/*=====================================================
TABLETS (1024px and below)
======================================================*/

@media (max-width:1024px){

    .container{
        width:92%;
    }

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

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

    .about-preview .container{
        grid-template-columns:1fr;
        gap:50px;
    }

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

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

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

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

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

}


/*=====================================================
MOBILE (768px and below)
======================================================*/

@media (max-width:768px){

    html {
        overflow-x:hidden;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        -ms-overflow-style:none;
    }

    html::-webkit-scrollbar {
        display:none;
        width:0;
        height:0;
    }

    body {
        overflow-x:hidden;
        -webkit-overflow-scrolling:touch;
        padding-top:92px;
    }

    header{
        position:fixed;
        top:0;
        left:0;
        right:0;
        width:100%;
        background:#fff;
        z-index:999;
        box-shadow:0 3px 20px rgba(0,0,0,.05);
    }

    .location-grid{

    grid-template-columns:1fr;

}.location-grid{

    grid-template-columns:1fr;

}
    section{
        padding:70px 0;
    }

    .top-bar{

        display:none;

    }

    nav{

        flex-direction:row;
        flex-wrap:wrap;
        height:auto;
        padding:20px 0;
        gap:12px;

    }

    .logo{

        margin-bottom:0;

        text-align:left;

    }

    .logo img{

        width:60px;
        height:60px;

    }

    .logo h2{

        font-size:1.4rem;

    }

    .logo span{

        font-size:.88rem;

    }

    .menu-toggle{

        margin-left:auto;

    }

    .nav-links{

        flex-direction:column;
        width:100%;
        align-items:center;
        gap:20px;
        margin-bottom:25px;

    }

    .btn{

        width:100%;
        text-align:center;

    }

    .hero{

        min-height:auto;

        padding:90px 0;

    }

    .hero-content{

        text-align:center;

    }

    .hero h1{

        font-size:1.95rem;

    }

    .hero p{

        font-size:.95rem;
        margin-bottom:22px;

    }

    .hero-buttons{

        display:flex;
        flex-direction:column;
        gap:12px;

    }

    .btn-outline{

        margin-left:0;

    }

    .trust .container{

        grid-template-columns:1fr;

    }

    .about-preview .container{
        grid-template-columns:1fr;
        gap:30px;
    }

    .about-image{
        order:2;
    }

    .about-text{
        order:1;
    }

    .services-grid{

        grid-template-columns:1fr;

    }

    .why-grid{
        display:flex;
        gap:16px;
        overflow-x:auto;
        padding-bottom:10px;
        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x mandatory;
    }

    .why-card{
        padding:24px 20px;
        border-left-width:4px;
        min-width:260px;
        flex:0 0 260px;
        scroll-snap-align:start;
    }

    .why-us{
        padding-top:40px;
        padding-bottom:40px;
    }

    .why-card-header{
        gap:12px;
        margin-bottom:12px;
    }

    .why-card i{
        font-size:1.5rem;
    }

    .section-title{
        margin-bottom:28px;
        text-align:left;
    }

    .section-title h2{
        font-size:2rem;
    }

    .section-title p{
        margin:0;
        max-width:100%;
    }

    .process-grid{

        grid-template-columns:1fr;

    }

    .areas-grid{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

}


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

@media (max-width:480px){

    .hero h1{

        font-size:2rem;

    }

    .section-title h2{

        font-size:2rem;

    }

    .about-text h2{

        font-size:2rem;

    }

    .cta h2{

        font-size:2rem;

    }

    .trust-card,
    .service-card,
    .why-card,
    .process-card,
    .area-card{

        padding:25px;

    }

}
/*====================================
ABOUT PAGE RESPONSIVE
=====================================*/

@media(max-width:992px){

.about-grid{

grid-template-columns:1fr;

}

.mission-vision .container{

grid-template-columns:1fr;

}

.page-banner h1{

font-size:2.3rem;

}

}

@media(max-width:768px){

.about-content h2{

font-size:2rem;

}

.cta h2{

font-size:2rem;

}

}
/*====================================
SERVICES PAGE RESPONSIVE
=====================================*/

@media(max-width:992px){

.service-row{

grid-template-columns:1fr;

gap:40px;

margin-bottom:70px;

}

.service-row.reverse .service-image{

order:1;

}

.service-row.reverse .service-content{

order:2;

}

.service-content h2{

font-size:1.8rem;

}

}