/* ===============================
TABLETS
================================ */

@media (max-width:1100px){

.top-header .container{
    flex-wrap:wrap;
    justify-content:center;
    gap:20px;
}

.logo{
    width:100%;
    text-align:center;
}

.search-box{
    max-width:100%;
    width:100%;
}

.contact-info{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
}

.hero{
    height:650px;
}

.hero-content h1{
    font-size:46px;
}

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

.machines{
    right:20px;
    bottom:20px;
}

.machines img{
    width:130px;
}

.machines img:nth-child(2){
    width:170px;
}

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

.about-intro,
.about-services{
    gap:35px;
}

.contact-layout{
    grid-template-columns:1fr;
}

}

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

/*=========================================
  MOBILE (Matches Desktop Theme)
=========================================*/

@media (max-width:768px){

    body{
        overflow-x:hidden;
    }

    .container{
        width:94%;
    }

    /* ---------- HEADER ---------- */

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

    .top-header .container{
        flex-direction:column;
        gap:18px;
        text-align:center;
    }

    .logo img{
        height:55px;
        margin:auto;
    }

    .search-box{
        width:100%;
        max-width:100%;
    }

    .contact-info{
        flex-direction:column;
        gap:15px;
        align-items:center;
    }

    .quote-btn{
        width:100%;
        max-width:260px;
        text-align:center;
    }

    /* ---------- NAV ---------- */

    nav{
        background:#FEDB00;
    }

    .nav-links{
        flex-wrap:wrap;
        justify-content:center;
        width:100%;
    }

    .nav-links li{
        flex:1 0 50%;
        text-align:center;
    }

    .nav-links a{
        padding:15px;
        color:#111;
        font-weight:600;
    }

    .nav-links a:hover{
        background:#111;
        color:#FEDB00;
    }

    /* ---------- HERO ---------- */

    .hero{
        height:60vh;
        min-height:430px;
    }

    .hero-btn{
        bottom:-160px;
        padding:13px 28px;
    }

    .prev,
    .next{
        width:42px;
        height:42px;
        font-size:20px;
    }

    /* ---------- CLIENTS ---------- */

    .clients{
        padding:50px 0;
    }

    .logo-track img{
        width:110px;
        margin:0 18px;
    }

    /* ---------- FEATURES ---------- */

    .features{
        padding:60px 0;
    }

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

    .features .card{
        padding:35px 22px;
    }

    /* ---------- ABOUT ---------- */

    .about-intro,
    .about-services{
        grid-template-columns:1fr;
        gap:35px;
    }

    .about-stats{
        grid-template-columns:1fr;
    }

    /* ---------- CONTACT ---------- */

    .contact-layout{
        grid-template-columns:1fr;
    }

    .contact-form-grid{
        grid-template-columns:1fr;
    }

    .contact-cta > .container{
        flex-direction:column;
        text-align:center;
    }

    .contact-cta-actions{
        justify-content:center;
    }

    /* ---------- FOOTER ---------- */

    .footer{
        padding:35px 20px 20px;
    }

    .footer-content{
        grid-template-columns:1fr;
        gap:30px;
        width:100%;
        text-align:center;
    }

    .footer-links,
    .footer-contact{
        justify-self:center;
        text-align:center;
    }

    .footer-contact p,
    .footer-contact a{
        justify-content:center;
        margin:auto;
    }

    /* ---------- FLOATING ---------- */

    .whatsapp-float{
        width:58px;
        height:58px;
        font-size:32px;
        right:18px;
        bottom:18px;
    }

    .online-support{
        right:0;
        bottom:90px;
        top:auto;
        transform:none;
    }

    .support-toggle{
        background:#111;
        color:#FEDB00;
    }

}

/* ===============================
SMALL PHONES
================================ */

@media (max-width:480px){

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

.logo img{
    height:52px;
}

.search-box input{
    height:44px;
}

.hero{
    height:520px;
}

.hero-content{
    top:48%;
}

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

.about-stats{
    grid-template-columns:1fr;
}

.about-services ul{
    grid-template-columns:1fr;
}

.contact-hero h1{
    font-size:29px;
}

.contact-cta-actions{
    width:100%;
    flex-direction:column;
}

.contact-cta-actions a{
    text-align:center;
}

.hero-content p{
    font-size:15px;
}

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

footer{
    padding:25px 0;
}

footer p{
    font-size:13px;
}

}

/* ===============================
LARGE SCREENS
================================ */

@media (min-width:1500px){

.container{
    max-width:1450px;
}

.hero-content h1{
    font-size:72px;
}

.hero-content p{
    font-size:24px;
}

.machines img{
    width:220px;
}

.machines img:nth-child(2){
    width:280px;
}

}