/* ==========================================
   RESPONSIVE
========================================== */

/* Mobile & Tablet */
@media (max-width:991px){

    .hero-container{grid-template-columns:1fr;text-align:center;}
    .hero-text{margin:auto auto 35px;}
    .hero-buttons{justify-content:center;}
    .hero-features li{justify-content:center;}
    .hero-stats{grid-template-columns:repeat(2,1fr);}

    .brands-grid{grid-template-columns:repeat(3,1fr);}
    .services-grid{grid-template-columns:1fr;}
    .why-us .container{grid-template-columns:1fr;text-align:center;}
    .why-list{grid-template-columns:1fr;}
    .subsidy-grid{grid-template-columns:1fr;text-align:center;}
    .subsidy ul{list-style:none;padding:0;}
    .projects-grid{grid-template-columns:1fr;}
    .project-image img{height:220px;}
    .testimonial-grid{grid-template-columns:1fr;}
    .contact-grid{grid-template-columns:1fr;}
    .contact-buttons{flex-direction:column;}
    .footer-grid{grid-template-columns:1fr 1fr;}

    .cta{padding:60px 0;}
    .cta-box{flex-direction:column;text-align:center;}
    .cta-content h2{font-size:34px;}
    .cta-buttons{width:100%;justify-content:center;flex-wrap:wrap;}
    .cta-buttons .btn{min-width:220px;}

    .topbar{display:none!important;}
    .header{position:fixed!important;top:0!important;left:0;width:100%;z-index:99999;}
    body{padding-top:80px!important;}
    .mobile-toggle{display:flex!important;}
}

@media (max-width:768px){
    .service-grid{display:flex!important;flex-direction:column!important;gap:25px!important;}
    .reverse{display:flex!important;flex-direction:column!important;}
    .service-image{order:1!important;}
    .service-content{order:2!important;padding:0!important;}
    .service-image img{width:100%;height:230px;object-fit:cover;border-radius:20px;}
    .service-content h2{font-size:32px;line-height:1.3;}
}

@media (max-width:576px){
    .top-left{flex-direction:column;gap:8px;}
    .header-buttons{flex-direction:column;width:100%;}
    .header-buttons .btn{justify-content:center;}

    .hero{padding:60px 0;}
    .hero h1{font-size:38px;}
    .hero-stats{grid-template-columns:1fr;}
    .hero-buttons{flex-direction:column;}

    .brands-grid{grid-template-columns:repeat(2,1fr);}

    .footer-grid{grid-template-columns:1fr;text-align:center;}
    .footer-logo{margin:auto auto 20px;}

    .calculator-box{padding:25px;}
}

@media (min-width:992px){
    .mobile-menu,
    .mobile-toggle,
    .menu-overlay{
        display:none!important;
    }
}

/* ==========================================
   PROJECT PAGE
========================================== */

@media (max-width:991px){

    .projects-grid{
        grid-template-columns:1fr;
    }

}

@media (max-width:576px){

    .project-image img{
        height:220px;
    }

    .project-content{
        padding:22px;
    }

    .project-content h3{
        font-size:24px;
    }

}

/*==========================================
  FOOTER MOBILE
==========================================*/

@media (max-width:768px){

    .footer{
        padding:60px 0 25px;
    }

    .footer-grid{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:35px 25px;
        text-align:left;
    }

    .footer-grid > div:first-child{
        grid-column:1 / -1;
        text-align:center;
    }

    .footer-logo{
        margin:0 auto 18px;
    }

    .footer-grid > div:first-child p{
        max-width:320px;
        margin:0 auto;
        line-height:1.8;
    }

    .footer-grid h3{
        font-size:1.5rem;
        margin-bottom:18px;
    }

    .footer-grid ul{
        padding:0;
        margin:0;
        list-style:none;
    }

    .footer-grid ul li{
        margin-bottom:12px;
    }

    .footer-grid p{
        line-height:1.8;
    }

    .footer-bottom{
        margin-top:35px;
        text-align:center;
        font-size:.9rem;
    }

}

/* Mobile Header Branding */
@media (max-width:768px){

.logo{
    display:flex;
    align-items:center;
    gap:10px;
}

.logo img{
    width:58px;
    height:auto;
}

.mobile-logo-text{
    display:block;
}

.mobile-logo-text h2{
    font-size:16px;
    font-weight:700;
    color:#071C3C;
    line-height:1.1;
    margin:0;
}

.mobile-logo-text p{
    font-size:11px;
    color:#666;
    margin:2px 0 0;
    line-height:1;
}

.navbar{
    padding:0 15px;
}

}

/* Desktop */
@media (min-width:769px){

.mobile-logo-text{
    display:none;
}

}