/* =========================================================
   RM ACELECT ENGINEERING
   RESPONSIVE DESIGN
   ========================================================= */


/* =========================
   TABLET — 992px
   ========================= */

@media (max-width: 992px){

    /* General */

    .container{
        width:92%;
    }

    .section-title{
        margin-bottom:45px;
    }

    .section-title h2{
        font-size:34px;
    }

    .section-title p{
        font-size:16px;
    }


    /* Services */

    .service-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:22px;
    }


    /* Why Choose */

    .why-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:22px;
    }


    /* Brands */

    .brand-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:20px;
    }


    /* Projects */

    .project-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:22px;
    }


    /* Pricing */

    .pricing-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:22px;
    }


    /* Maintenance benefits */

    .maintenance-benefits{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }


    /* Contact */

    .contact-grid{
        grid-template-columns:1fr 1fr;
        gap:22px;
    }


    /* Footer */

    .footer-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:35px;
    }

}


/* =========================
   MOBILE — 768px
   ========================= */

@media (max-width: 768px){

    /* General spacing */

    .services,
    .why-choose,
    .brands,
    .projects,
    .pricing,
    .maintenance,
    .faq,
    .contact{
        padding:65px 0;
    }

    .container{
        width:92%;
    }

    .section-title{
        margin-bottom:38px;
    }

    .section-title h2{
        font-size:30px;
        line-height:1.25;
    }

    .section-title p{
        font-size:15px;
        line-height:1.7;
    }


    /* Header */

    .top-bar{
        flex-wrap:wrap;
        gap:15px;
    }

    .logo img{
        width:105px;
    }

    .company-info{
        flex:1;
        min-width:180px;
    }

    .company-info h1{
        font-size:21px;
        line-height:1.25;
    }

    .company-info p{
        font-size:13px;
        line-height:1.4;
    }

    .whatsapp-btn{
        padding:10px 15px;
        font-size:13px;
    }


    /* Navigation */

    .navbar ul{
        flex-wrap:wrap;
        gap:0;
    }

    .navbar li{
        margin:0 10px;
    }

    .navbar a{
        padding:13px 0;
        font-size:14px;
    }


    /* Services */

    .service-grid{
        grid-template-columns:1fr;
        gap:20px;
        margin-top:30px;
    }

    .service-card img{
        height:210px;
    }

    .service-card h3{
        font-size:21px;
    }


    /* Why Choose */

    .why-grid{
        grid-template-columns:1fr;
        gap:18px;
        margin-top:30px;
    }

    .why-card{
        padding:30px 24px;
    }


    /* Brands */

    .brand-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:14px;
        margin-top:30px;
    }

    .brand-card{
        min-height:130px;
        padding:22px 14px;
    }

    .brand-card .brand-name{
        font-size:20px;
    }


    /* Projects */

    .project-grid{
        grid-template-columns:1fr;
        gap:20px;
        margin-top:30px;
    }

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

    .project-content{
        padding:22px 20px;
    }

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


    /* Pricing */

    .pricing-grid{
        grid-template-columns:1fr;
        gap:20px;
        margin-top:30px;
    }

    .pricing-card{
        padding:28px 22px;
    }

    .price{
        font-size:38px;
    }


    /* Maintenance */

    .maintenance-card{
        margin-top:30px;
    }
        
    .maintenance-table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;

        -webkit-overflow-scrolling:touch;
    }

    .maintenance-table th,
    .maintenance-table td{
        padding:13px 12px;
    }

    .maintenance-benefits{
        grid-template-columns:1fr;
        gap:12px;
        padding:22px;
    }

    .maintenance-note{
        margin:22px;
        padding:17px 18px;
        font-size:13px;
    }


    /* FAQ */

    .faq-container{
        width:100%;
        margin-top:30px;
    }

    .faq-item{
        margin-bottom:10px;
    }

    .faq-question{
        padding:17px 18px;
        font-size:15px;
    }

    .faq-answer{
        padding:0 18px 18px;
        font-size:14px;
    }


    /* Contact */

    .contact-grid{
        grid-template-columns:1fr;
        gap:20px;
        margin-top:30px;
    }

    .contact-info,
    .contact-form{
        padding:26px 22px;
    }

    .contact-info h3,
    .booking-intro h3{
        font-size:22px;
    }


    /* Booking */

    .booking-form{
        gap:13px;
    }

    .booking-form input,
    .booking-form select,
    .booking-form textarea{
        padding:13px 14px;
        font-size:14px;
    }

    .price-box{
        padding:17px;
    }

    .price-box h2{
        font-size:32px;
    }

    .submit-btn{
        padding:14px 18px;
        font-size:15px;
    }


    /* Footer */

    .footer-grid{
        grid-template-columns:1fr;
        gap:30px;

        padding:45px 0 35px;
    }

    .footer-brand p{
        max-width:none;
    }

    .footer-bottom .container{
        min-height:auto;

        flex-direction:column;
        align-items:flex-start;

        padding-top:18px;
        padding-bottom:18px;
    }

}


/* =========================
   SMALL MOBILE — 480px
   ========================= */

@media (max-width: 480px){

    .container{
        width:94%;
    }


    /* Header */

    .top-header{
        padding:12px 0;
    }

    .top-bar{
        display:grid;

        grid-template-columns:auto 1fr;

        gap:10px 12px;
    }

    .logo img{
        width:90px;
    }

    .company-info h1{
        font-size:18px;
    }

    .company-info p{
        font-size:11px;
    }

    .whatsapp-btn{
        grid-column:1 / -1;

        width:100%;

        text-align:center;
    }


    /* Navigation */

    .navbar ul{
        justify-content:flex-start;
        overflow-x:auto;
        flex-wrap:nowrap;

        -webkit-overflow-scrolling:touch;
    }

    .navbar li{
        flex:0 0 auto;
        margin:0 8px;
    }

    .navbar a{
        padding:12px 0;
        font-size:13px;
        white-space:nowrap;
    }


    /* Section headings */

    .section-title h2{
        font-size:27px;
    }

    .section-title p{
        font-size:14px;
    }


    /* Brands */

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

    .brand-card{
        min-height:115px;
    }


    /* Services */

    .service-card img{
        height:200px;
    }


    /* Projects */

    .project-card img{
        height:200px;
    }


    /* Contact */

    .contact-info,
    .contact-form{
        padding:23px 18px;
    }


    /* Footer */

    .footer-bottom-links{
        flex-wrap:wrap;
        gap:10px;
    }

}

/* =========================
   RESPONSIVE TRUST COUNTERS
   ========================= */

@media (max-width: 992px){

    .counter-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:18px;
    }

    .counter-box{
        padding:25px 16px;
    }

    .counter-box h2{
        font-size:36px;
    }
}


@media (max-width: 768px){

    .counter-section{
        padding:40px 0;
    }

    .counter-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:14px;
    }

    .counter-box{
        padding:22px 12px;
        border-radius:12px;
    }

    .counter-box h2{
        font-size:32px;
    }

    .counter-box p{
        font-size:12px;
        line-height:1.5;
    }
}


@media (max-width: 480px){

    .counter-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:10px;
    }

    .counter-box{
        padding:19px 8px;
    }

    .counter-box h2{
        font-size:28px;
    }

    .counter-box p{
        font-size:11px;
    }
}

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

@media (max-width: 992px){

    .hero{
        padding:110px 0 90px;
    }

    .hero-content{
        width:100%;
        max-width:760px;
    }

    .hero h4{
        font-size:14px;
        letter-spacing:1px;
    }

    .hero h1{
        max-width:720px;

        font-size:46px;
        line-height:1.15;

        letter-spacing:-.5px;
    }

    .hero p{
        max-width:680px;

        font-size:16px;
        line-height:1.75;
    }
}


@media (max-width: 768px){

    .hero{
        padding:85px 0 70px;
    }

    .hero-content{
        width:100%;
        max-width:100%;
    }

    .hero h4{
        max-width:100%;

        font-size:12px;
        line-height:1.5;

        letter-spacing:.8px;
    }

    .hero h1{
        max-width:100%;

        margin-bottom:20px;

        font-size:38px;
        line-height:1.15;

        letter-spacing:-.3px;

        overflow-wrap:normal;
        word-break:normal;
    }

    .hero p{
        max-width:100%;

        font-size:14px;
        line-height:1.7;
    }

    .hero-buttons{
        margin-top:25px;

        gap:10px;
    }
}


@media (max-width: 480px){

    .hero{
        padding:65px 0 55px;
    }

    .hero h4{
        font-size:11px;
        line-height:1.5;

        margin-bottom:12px;
    }

    .hero h1{
        font-size:31px;
        line-height:1.18;

        letter-spacing:0;
    }

    .hero p{
        font-size:13px;
        line-height:1.7;
    }

    .hero-buttons{
        flex-direction:column;

        width:100%;
    }

    .hero-buttons a{
        width:100%;
        max-width:260px;

        text-align:center;
    }
}

/* =========================
   MOBILE NAVIGATION
   ========================= */

@media (max-width: 768px){

    .navbar{
        position:sticky;
        top:0;
    }

    .nav-wrapper{
        width:100%;

        display:flex;
        align-items:center;

        gap:10px;

        padding:7px 10px;
    }

    .logo{
        flex:0 0 auto;
    }

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

    .navbar ul{
        flex:1 1 auto;

        display:flex;
        align-items:center;
        justify-content:flex-start;

        gap:0;

        min-width:0;

        overflow-x:auto;
        overflow-y:hidden;

        white-space:nowrap;

        scrollbar-width:none;

        -webkit-overflow-scrolling:touch;
    }

    .navbar ul::-webkit-scrollbar{
        display:none;
    }

    .navbar li{
        flex:0 0 auto;
    }

    .navbar li a{
        padding:11px 9px;

        font-size:12px;

        white-space:nowrap;
    }

    .navbar li a::after{
        left:9px;
        right:9px;
        bottom:3px;
    }

    .book-btn{
        flex:0 0 auto;

        padding:11px 12px;

        font-size:11px;

        border-radius:6px;
    }
}


@media (max-width: 480px){

    .nav-wrapper{
        gap:6px;

        padding:6px 7px;
    }

    .logo img{
        height:52px;
    }

    .navbar li a{
        padding:10px 8px;

        font-size:11px;
    }

    .book-btn{
        padding:10px 10px;

        font-size:10px;
    }
}

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

@media (max-width: 992px){

    .testimonial-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));

        gap:22px;

        margin-top:40px;
    }

    .testimonial-card{
        padding:30px 24px;
    }

}


@media (max-width: 768px){

    .testimonials{
        padding:65px 0;
    }

    .testimonial-grid{
        grid-template-columns:1fr;

        gap:18px;

        margin-top:30px;
    }

    .testimonial-card{
        width:100%;

        padding:28px 22px;

        border-radius:14px;
    }

    .stars{
        font-size:23px;

        margin-bottom:16px;
    }

    .testimonial-card p{
        font-size:14px;

        line-height:1.75;

        margin-bottom:20px;
    }

    .testimonial-card h4{
        font-size:18px;
    }

    .testimonial-card span{
        font-size:13px;
    }

}


@media (max-width: 480px){

    .testimonial-card{
        padding:25px 20px;
    }

    .testimonial-card p{
        font-size:14px;

        line-height:1.7;
    }

}

/* =========================
   MOBILE MAINTENANCE HEADER
   ========================= */

@media (max-width: 768px){

    .maintenance-header{
        padding:28px 18px;
    }

    .maintenance-header h3{
        font-size:25px;
        line-height:1.25;
    }

    .maintenance-header p{
        font-size:13px;
        line-height:1.55;
    }

}


@media (max-width: 480px){

    .maintenance-header{
        padding:25px 16px;
    }

    .maintenance-header h3{
        font-size:23px;
        line-height:1.22;
    }

    .maintenance-header p{
        font-size:12px;
        line-height:1.5;
    }

}