/* ==========================================
   HARWELL SERVICES
   RESPONSIVE STYLES
========================================== */

@media (max-width: 900px){

    .navbar{
        position:absolute;
        padding:18px 0;
    }

    .nav-container{
        align-items:flex-start;
        gap:20px;
    }

    .logo-circle{
        width:48px;
        height:48px;
        font-size:1.5rem;
    }

    .logo-text h3{
        font-size:1.3rem;
    }

    .logo-text span{
        font-size:.9rem;
    }

    nav{
        display:none;
    }

    .navbar .btn{
        display:none;
    }

    .hero{
        min-height:100vh;
        padding-top:150px;
        padding-bottom:70px;
        align-items:flex-start;
    }

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

    .hero-location{
        font-size:.95rem;
        margin-bottom:18px;
    }

    .hero h1{
        font-size:clamp(3.8rem, 18vw, 6rem);
        line-height:.92;
        margin-bottom:25px;
    }

    .hero-description{
        font-size:1rem;
        line-height:1.7;
        margin-bottom:32px;
    }

    .hero-buttons{
        flex-direction:column;
        gap:14px;
        width:100%;
    }

    .hero-buttons .btn{
        width:100%;
        padding:16px 20px;
    }

    .trust{
        padding:60px 0;
    }

    .trust-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .trust-card{
        padding:30px 22px;
    }

    .trust-card h2{
        font-size:2.2rem;
    }

}

@media (max-width: 480px){

    .container{
        width:88%;
    }

    .hero{
        padding-top:135px;
    }

    .hero h1{
        font-size:4.1rem;
    }

    .hero-description{
        font-size:.95rem;
    }

    .btn{
        font-size:.95rem;
    }

}


@media (max-width: 900px){
    .service-grid{
        grid-template-columns:1fr;
    }

    .services{
        padding:70px 0;
    }
}

@media(max-width:900px){
    .quote-grid{
        grid-template-columns:1fr;
    }

    .quote-form{
        padding:28px;
    }
}

@media(max-width:900px){
    .before-after-card{
        grid-template-columns:1fr;
    }

    .ba-image{
        min-height:240px;
    }
}

@media(max-width:900px){
    .hero-content{
        padding-top:130px;
    }

    .hero h1{
        font-size:4.4rem;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .hero-buttons .btn{
        width:100%;
    }

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

@media(max-width:900px){

    .ba-slider{
        height:420px;
    }

    .ba-before-wrap img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

}

@media(max-width:480px){

    .ba-slider{
        height:320px;
    }

}