@media screen and (min-width:1200px) and (max-width:1400px) {

    .container {

        max-width: 1340px;

    }

}



@media screen and (max-width:1200px) {



    header { padding: 20px 0px;}

    footer .grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; column-gap: 35px;}

    footer .grid .contact-us ul li img { width: 30px; height: 30px;}

    .footer-logo img { width: 180px;}

    a.navbar-brand img { width: 180px;}

    .primary-btn { font-size: 16px; padding: 10px 25px;}

    header.scrolled { padding: 8px 0; top: 0px;}

    .hero { padding: 80px 30px 170px;}

    .hero .form { padding: 30px 20px; margin-right: 15px;}

    h1 { font-size: 51px;}

    .hero p { font-size: 21px;}

    .container { padding: 0 30px;}

    .hero-detail .hero-box img { margin-bottom: 15px; width: 70px; height: 70px;}

    .hero-detail .hero-box { padding: 15px;}

    h2 { font-size: 36px;}

    .py-80 { padding: 70px 0;}

    .row .col-12 { padding: 0 12px;}

    .row { margin-left: -12px; margin-right: -12px;}

    .serving-box img.mb-14 { width: 65px;}

    .serving-box h4 { min-height: 55px; font-size: 21px;}

    .servingimg { height: 170px;}

    .mb-34 { margin-bottom: 24px;}

    .cont-txt ul { gap: 8px;}

    .mt-50 { margin-top: 40px;}

    .project-overlay-txt { padding: 20px;}

    .project-image { height: 250px;}

    .g-40 { gap: 30px;}

    .client-experince .swiper-button-prev { left: 30px;}

    .client-experince .swiper-button-next { left: 80px;}

    .tedtimonial-content { padding: 30px;}

    .g-30 { gap: 20px;}

    .about-hero { padding: 100px 0px;}

    .about-hero h1 { font-size: 38px;}

    .video-card { height: 430px;}

    .teambox h4 { min-height: auto;}

    .team-txt { padding: 20px 24px;}

    .blog-box img.blogimg { height: 330px;}

    .blogdate { font-size: 20px;}

    .text-18 { font-size: 17px;}

    .solarimgs { height: 405px;}

    .blog-detaili-img img { height: 410px;}

    .post-inner h4 { font-size: 18px;}

    .post-inner img { width: 70px; height: 70px;}

    h3 { font-size: 24px;}

    .profileinner img { width: 62px; height: 62px;}

    .postdate { font-size: 20px;}



}



@media screen and (max-width:991px) {



    body { font-size: 14px;}

    header .main-header .menu { align-items: start; gap: 18px;}

    .user-content a.primary-btn.primary-bg { background-color: transparent !important; border: 0; padding: 0; margin-top: 18px; font-weight: 500; color: #fff;}

    .offcanvas-header { background: #fdf6dc;}

    a.navbar-brand img { width: 160px;}

    footer .grid { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 2fr; column-gap: 20px;}

    footer .footer-logo p { font-size: 14px; margin: 20px 0px 35px;}

    .footer-logo img { width: 160px;}

    h6 { font-size: 18px;}

    footer .footer-top h6 { margin-bottom: 20px;}

    footer .grid .contact-us ul li .text-white { display: none;}

    footer .grid .contact-us ul {  gap: 10px;}
footer .grid .contact-us ul .d-flex.gap-2 {
    align-items: center;
}
    p { font-size: 14px;}

    .py-80 { padding: 50px 0;}

    .g-40 { gap: 20px;}

    h3 { font-size: 20px;}

    .project-overlay-txt h6 { font-size: 15px;}

    .project-image { height: 200px;}

    .hero .form { padding: 20px; margin-right: 0;}

    .hero .form input { height: 45px; margin-bottom: 15px; padding: 10px 15px;}

    .hero .form a { margin-top: 20px; font-size: 18px;}

    .hero .form a img { width: 22px;}

    .hero .form a span { font-size: 26px;}

    h1 { font-size: 38px;}

    .hero p { font-size: 18px;}

    .hero { padding: 65px 30px 140px;}

    .hero-detail .hero-box img { width: 50px; height: 50px;}

    .hero-detail .hero-box h6 { font-size: 18px;}

    .text-18 { font-size: 15px;}

    h2 { font-size: 26px;}

    .innovative img { width: 35px; height: 35px;}

    .innovative { max-width: 225px; padding: 10px;}

    .img-about img { width: 78%;}

    .primary-btn { font-size: 15px;}

    .mt-50 { margin-top: 30px;}

    .serving-box.p-30 { padding: 15px;}

    .serving-box img.mb-14 { width: 50px;}

    .serving-box h4 { min-height: auto; font-size: 16px;}

    .servingimg { height: 140px;}

    .mb-4 { margin-bottom: 15px !important;}

    .cont-txt ul { gap: 6px;}

    .mb-20 { margin-bottom: 10px;}

    .footer-bottom { padding: 10px 0 !important;}

    .about-hero { padding: 80px 0px;}

    .about-hero h1 { font-size: 34px;}

    .play-btn { width: 60px; height: 60px;}

    .play-triangle { border-left: 20px solid #fff; border-top: 14px solid transparent; border-bottom: 14px solid transparent;}

    .video-card { height: 340px;}

    .tedtimonial-content { padding: 20px;}

    img.qoute { width: 65px; height: 65px;}

    h4 { font-size: 20px;}

    img.visson-img { width: 25%;}

    .p-40 { padding: 20px;}

    .teambox .servingimg { height: 180px;}

    .team-txt { padding: 15px;}

    .serving-box h4 { margin-bottom: 10px !important;}

    .solarimgs { height: 330px;}

    .search-bar input.form-control { padding: 12px; height: auto;}

    .search-bar button { padding: 10px;}

    .search-bar { max-width: 330px;}

    .blogdate { font-size: 14px;}

    .blog-box img.blogimg { height: 275px;}

    .blogbox-content h3 { font-size: 18px;}

    .blogbox-content { padding: 15px;}

    .form-input { padding: 12px;}

    .row { row-gap: 24px;}

    .transparent-btn { padding: 10px 40px; font-size: 15px;}

    button.primary-bg.primary-btn { padding: 10px 40px;}

    .map-btn .primary-btn { padding: 10px 40px;}

    .post-inner h4 { font-size: 15px;}

    .post-inner img { width: 55px; height: 55px;}

    .g-20 { gap: 12px;}

    .profileinner img { width: 52px; height: 52px;}

    h3 { font-size: 18px;}

    .postdate { font-size: 15px;}

    .social-sidebar li a img { width: 24px; height: 24px;}

    .tags-sidebar a { padding: 4px 10px; font-size: 12px;}

    .sidebar-spac h3 { font-size: 18px;}

    .blog-detaili-img img { height: 310px;}

    .p-20 { padding: 15px;}

    .text-18 { font-size: 14px;}

    header button.btn.btn-canvas { font-size: 18px;}

    .primary-btn { font-size: 14px;}

    .offcanvas-body { background: #000;}

    header .main-header .menu li:hover a { color: #f7cc3f;}

    header .main-header .menu li a { color: #fff;}

    header button.btn.btn-canvas { padding: 2px 10px;}

.serving-box .team-txt {
    min-height: 130px;
}
section.home-about .row {
    align-items: center;
}

}



@media screen and (max-width:767px) {



    body { font-size: 13px;}

    a.navbar-brand img { width: 130px;}

    h1 { font-size: 31px;}

    .hero p { font-size: 16px;}

    h2 { font-size: 21px;}

    .py-80 { padding: 40px 0;}

    .mt-50 { margin-top: 20px;}

    .g-40 { gap: 15px;}

    .grid-cloumn-3 { grid-template-columns: 1fr 1fr;}

    .project-overlay-txt { padding: 15px;}

    .container { padding: 0 15px;}

    .grid-span-1, .grid-span-2, .grid-span-3, .grid-span-4, .grid-span-5, .grid-span-6, .grid-span-7, .grid-span-8 { grid-column: auto; grid-row: auto;}

    .-mt-40 { margin-top: 0;}

    .client-experince .swiper-button-prev, .client-experince .swiper-button-next { width: 30px; height: 30px; bottom: 20px; left: unset; right: 30px;}

    .client-experince .swiper-button-prev { right: 70px;}

    footer .grid { grid-template-columns: 1fr; row-gap: 20px;}

    footer .grid ul { gap: 8px;}

    footer .footer-top h6 { margin-bottom: 5px;}

    footer .footer-logo p { font-size: 13px; margin: 12px 0px 5px;}

    p { font-size: 13px;}

    .video-card { height: 280px; border-radius: 20px;}

    .mission-vission-section .p-40 { padding: 0;}

    .about-hero h1 { font-size: 28px;}

    .about-hero { padding: 70px 0px;}

    .blog-box img.blogimg { height: 240px;}

    .profileinner h3 { font-size: 15px;}

    .profileinner img { width: 45px; height: 45px;}

    .postdate { font-size: 12px;}

    .row { row-gap: 15px;}

    .row { margin-left: -8px; margin-right: -8px;}

    .hero { padding: 60px 5px 130px;}

    .primary-btn { font-size: 13px;}
.serving-box .team-txt {
    min-height: auto;
}
   

}



@media screen and (max-width:425px) {



    .grid-span-1, .grid-span-2, .grid-span-3, .grid-span-4, .grid-span-5, .grid-span-6, .grid-span-7, .grid-span-8 { grid-column: auto; grid-row: auto;}

    .grid-cloumn-3 { grid-template-columns: 1fr;}

    .about-hero { padding: 60px 0px;}

    .solarimgs { height: 270px;}



}