/*==========================================
        1400px
==========================================*/

@media (max-width:1400px){

    .container{
        max-width:1140px;
    }

}


/*==========================================
        1200px
==========================================*/

@media (max-width:1200px){

    .container{
        max-width:960px;
    }

    .hero-left h1{
        font-size:48px;
    }

}


/*==========================================
        992px
==========================================*/

@media (max-width:992px){

    .container{
        max-width:720px;
    }

    /* Header */

    .navbar{
        height:80px;
    }

    .nav-menu{

        position:fixed;

        top:70px;

        left:-100%;

        width:280px;

        height:calc(100vh - 80px);

        background:#fff;

        flex-direction:column;

        justify-content:flex-start;

        align-items:flex-start;

        gap:0;

        padding:30px;

        transition:.4s;

        box-shadow:0 10px 30px rgba(0,0,0,.1);

    }

    .nav-menu.active{
        left:0;
    }

    .nav-menu li{
        width:100%;
    }

    .nav-menu li a{

        display:block;

        width:100%;

        padding:15px 0;

        border-bottom:1px solid var(--border);

    }

    header .btn-primary{
        display:none;
    }

    .mobile-toggle{
        display:flex;
    }

    /* Hero */

    .hero{
        padding:150px 0 80px;
    }

    .hero-content{

        grid-template-columns:1fr;

        text-align:center;

        gap:50px;

    }

    .hero-right{
        order:-1;
    }

    .hero-left p{

        margin:0 auto 35px;

        max-width:600px;

    }

    .hero-btns{
        justify-content:center;
    }

    .hero-left h1{
        font-size:42px;
    }

}


/*==========================================
        768px
==========================================*/

@media (max-width:768px){

    .container{
        max-width:540px;
    }

    .navbar{
        height:75px;
    }

    .logo img{
        height:85px;
    }

    .hero{

        padding:130px 0 70px;

    }

    .hero-left h1{

        font-size:34px;

    }

    .hero-left p{

        font-size:16px;

    }

    .hero-btns{

        flex-direction:column;

        align-items:center;

    }

    .hero .btn{

        width:220px;

    }

    .hero-right img{

        max-width:400px;

    }

}


/*==========================================
        576px
==========================================*/

@media (max-width:576px){

    .container{

        width:100%;

        padding:0 20px;

    }

    .hero{

        padding:120px 0 60px;

    }

    .hero-left h1{

        font-size:30px;

        line-height:1.3;

    }

    .hero-left p{

        font-size:15px;

    }

    .hero-tag{

        font-size:13px;

        padding:8px 18px;

    }

    .hero-right img{

        max-width:300px;

    }

    .btn{

        width:100%;

    }

}


/*==========================================
        400px
==========================================*/

@media (max-width:400px){

    .hero-left h1{

        font-size:26px;

    }

    .hero-left p{

        font-size:14px;

    }

    .navbar{

        height:70px;

    }

    .logo img{

        height:75px;

    }

}

/*==================================
        HERO SLIDER
===================================*/

@media(max-width:1200px){

.hero-content h1{

font-size:58px;

}

}

@media(max-width:992px){

.hero-slider{

        height: 85vh;
        padding-top: 60px;

}

.hero-content{

max-width:520px;

}

.hero-content h1{

font-size:46px;

}

.hero-company {
    display: block;
    width: 100%;
    text-align: center;
}

.service-strip{

grid-template-columns:repeat(3,1fr);

}

.hero-prev,
.hero-next{

display:none;

}

}

@media(max-width:768px){

/* .hero-slider{

        height: 85vh;
        padding-top: 60px;

} */

.hero-content{

top:45%;

}

.hero-top{

flex-direction:column;

align-items:flex-start;

gap:10px;

}

.hero-content h1{

font-size:36px;

line-height: 40px;

}

.service-strip{

grid-template-columns:repeat(2,1fr);

}

.strip-item{

padding:20px 10px;

}

.strip-item span{

font-size:15px;

}

}

@media(max-width:576px){

.hero-content{

width:100%;

padding-right:20px;
padding-left: 20px;

}

.hero-content h1{

font-size:30px;

}

.hero-company{

font-size:40px;

letter-spacing:3px;

}

.current-slide{

font-size:34px;

}

.service-strip{

grid-template-columns:1fr;

}

.hero-services{

position:relative;

}

}

/*=============================
        Statistics
=============================*/

@media(max-width:992px){

.stats-wrapper{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:576px){

.stats{

margin-top:0;

}

.stats-wrapper{

grid-template-columns:1fr;

}

}

/* ABOUT SECTION */

@media(max-width:992px){

.about-wrapper{

grid-template-columns:1fr;
gap: 0;

}

.about-content{

text-align:center;

}

.about-list{

grid-template-columns:1fr;

}

.about-dashboard{

margin-top:40px;

}

.floating-card{

display:none;

}

}

@media(max-width:768px){

.about-content h2{

font-size:34px;

}

.graph{

height:180px;

}

.bar{

width:35px;

}

.about-list{

grid-template-columns:1fr;

}

}

/* ============================
        MISSION VISION
============================ */

@media(max-width:991px){

.mv-wrapper{

grid-template-columns:1fr;

}

.mv-divider{

display:none;

}

}

@media(max-width:767px){

.mv-card{

padding:35px 25px;
display: flex;
flex-direction: column;
align-items: center;
}

.mv-card h3{

font-size:28px;

}

.mv-icon{

width:65px;

height:65px;

font-size:26px;

}

.mv-card p {
    text-align: center;
}

}

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

@media(max-width:1200px){

.service-content{

padding:40px;

}

.service-content h3{

font-size:32px;

}

}

@media(max-width:992px){

.service-box{

grid-template-columns:1fr;

}

.reverse{

grid-template-columns:1fr;

}

.reverse .service-image{

order:1;

}

.reverse .service-content{

order:2;

}

.service-image{

height:320px;

}

.service-content{

padding:35px;

}

}

@media(max-width:768px){

.section-title h2{

font-size:34px;

}

.service-number{

width:60px;

height:60px;

font-size:28px;

}

.service-content h3{

font-size:28px;
text-align: center;

}

.service-content{

padding:30px;

display: flex;
flex-direction: column;
align-items: center;
}

.service-content p {
    text-align: center;
    margin-bottom: 0;
}

.service-highlights{

grid-template-columns:1fr;

}

}

@media(max-width:576px){

.service-image{

height:240px;

}

.service-content{

padding:25px;

}

.section-title h2{

font-size:28px;

}

.service-content h3{

font-size:24px;

}

.services::before{
    display: none;
}

.services::after{
    display: none;
}

}

/*==========================
        INDUSTRIES
==========================*/

@media(max-width:1100px){

.industries-wrapper{

grid-template-columns:1fr;
gap: 10px;

}

.industries-left{

position:static;

}

}

@media(max-width:768px){

.industries-grid{

grid-template-columns:repeat(2,1fr);

}

.industries-left .btn{

    display: none;

}

}

@media(max-width:576px){

.industries-grid{

grid-template-columns:1fr;

}

.industry-card.wide{

grid-column:auto;

}

}

/*==========================
        OUR PROCESS
==========================*/

@media(max-width:991px){

.process-timeline::before{

left:25px;

}

.process-row{

grid-template-columns:50px 1fr;

gap:0px;

}

.process-row>div:first-child:empty{

display:none;

}

.process-row.reverse .process-card{

grid-column:2;

}

.process-card::after{

display:none;

}

.timeline-dot{

grid-row:1;

}

}

@media(max-width:768px){

.process-card{

padding:30px;

}

.process-card h3{

font-size:24px;

}

}


/*==========================
        WHY CHOOSE US
==========================*/

@media(max-width:1200px){

.why-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.why-grid{

grid-template-columns:1fr;

gap:45px;

}

.why-item{

text-align:center;

}

.why-icon{

margin:0 auto 30px;

}

.why-link{

justify-content:center;

}

.why-item h3{

font-size:26px;

}

}

@media(max-width:576px){

.why-item h3{

font-size:24px;

}

.why-item p{

font-size:15px;

}

.why-icon{

width:75px;
height:75px;
font-size:30px;

}

.why-icon::before{

width:75px;
height:75px;

}

}


/* ======================
    CONTACT FORM
========================= */

@media(max-width:1200px){

.contact-wrapper{

grid-template-columns:1fr;

}

.contact-form-box{

max-width:700px;

margin:auto;

width:100%;

}

}

@media(max-width:768px){

.contact-content{

text-align:center;

}

.contact-content h2{

font-size:36px;

}

.contact-info{

justify-content:left;

text-align:left;

}

.form-row{

grid-template-columns:1fr;

}

.contact-form-box{

padding:35px 25px;

}

.form-header h3{

font-size:28px;

}

}

@media(max-width:576px){

.contact-content h2{

font-size:30px;

}

.contact-info{

align-items:flex-start;

}

.contact-icon{

width:55px;

height:55px;

font-size:20px;

}

.contact-info h5{

font-size:17px;

}

}

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

@media(max-width:1200px){

.footer-grid{

grid-template-columns:repeat(2,1fr);

gap:50px;

}

}

@media(max-width:768px){

    .footer::before {
        display: none;
    }

    .footer::after{
        display: none;
    }

.footer{

margin-top:120px;

}

.footer-grid{

grid-template-columns:1fr;

gap:45px;

}

.footer-column{

text-align:left;

}

.footer-column h4::after{

left:5%;

transform:translateX(-50%);

}

.footer-social{

justify-content:left;

}

.footer-contact li{

justify-content:left;

}

.footer-bottom-wrapper{

flex-direction:column;

text-align:center;

}

.footer-bottom-links{

justify-content:center;

flex-wrap:wrap;

}

.cta-content h2{

font-size:32px;

}

}

@media(max-width:576px){


.footer-column h4{

font-size:20px;

}

.footer-social a{

width:44px;

height:44px;

}

}


/*=========================================
            THANK YOU PAGE
==========================================*/

@media(max-width:768px){

.thank-you-box{

padding:45px 25px;

}

.thank-you-box h1{

font-size:34px;

}

.thank-contact{

grid-template-columns:1fr;

}

.contact-card{

justify-content:center;

text-align:left;

}

}

@media(max-width:576px){

.thank-you-section{

padding:140px 0 80px;

}

.thank-icon{

width:90px;

height:90px;

font-size:42px;

}

.thank-you-box h1{

font-size:28px;

}

}