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

@media (max-width:1200px){

h1{
font-size:110px;
}

h2{
font-size:100px;
}

.hero-content{

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

}

.case-grid{

grid-template-columns:1fr 1fr;

}

}


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

@media (max-width:992px){

.container{
width:92%;
}

/* NAV */

.nav-wrapper{

flex-wrap:wrap;
gap:25px;

}

.nav-links{

gap:24px;
flex-wrap:wrap;
justify-content:center;

}

/* TYPOGRAPHY */

h1{
font-size:68px;
}

h2{
font-size:38px;
}

/* ABOUT */

.grid-two{

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

}

/* SERVICES */

.services-grid{

grid-template-columns:1fr;

}

/* CASE STUDIES */

.case-grid{

grid-template-columns:1fr;

}

/* CTA */

.cta-box{

padding:70px 40px;

}

}


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

@media (max-width:768px){

/* TYPOGRAPHY */

h1{

font-size:75px;

}

h2{

font-size:70px;

}

h3{

font-size:60px;

}

p{

font-size:15px;

}

/* NAVBAR */

.navbar{

padding:18px 0;

}

.nav-wrapper{

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

}

.nav-links{

flex-direction:column;
gap:16px;

width:100%;

margin-top:10px;

}

.cta-btn{

width:100%;

}

/* HERO */

.hero{

padding-top:170px;
padding-bottom:90px;

}

.hero-content{

gap:45px;

}

.hero-left p{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

}

.primary-btn,
.secondary-btn{

width:100%;
text-align:center;

}

/* METRICS */

.hero-right{

gap:18px;

}

.metric-card{

padding:28px;

}

.metric-card h3{

font-size:34px;

}

/* SECTIONS */

section{

padding:90px 0;

}

/* SERVICES */

.service-card{

padding:36px 28px;

}

/* CASE */

.case-card{

padding:38px 28px;

}

/* TESTIMONIAL */

.testimonial{

padding:40px 28px;

}

.testimonial p{

font-size:18px;

}

/* CTA */

.cta-box{

padding:55px 28px;

}

/* FOOTER */

.footer-grid{

flex-direction:column;

gap:30px;

}

}


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

@media (max-width:480px){

.container{

width:94%;

}

h1{

font-size:58px;

}

h2{

font-size:48px;

}

.logo{

font-size:20px;

}

.hero{

padding-top:155px;

}

.metric-card{

padding:22px;

}

.metric-card h3{

font-size:30px;

}

.service-card{

padding:30px 22px;

}

.case-card{

padding:30px 22px;

}

.cta-box{

padding:45px 22px;

}

}
/* MEGA HEADINGS */

@media(max-width:768px){

.hero .mega-heading{

font-size:80px;

}

.about-preview .mega-heading,
.services .mega-heading{

font-size:55px;

}

}
@media(max-width:991px){

    .benefits-grid,
    .process-grid{

        grid-template-columns:1fr 1fr;

    }

    .role-card{

        flex-direction:column;

        align-items:flex-start;

        gap:25px;

    }

}

@media(max-width:767px){

    .benefits-grid,
    .process-grid{

        grid-template-columns:1fr;

    }

}
@media(max-width:991px){

    .blog-grid{

        grid-template-columns:1fr 1fr;

    }

}

@media(max-width:767px){

    .blog-grid{

        grid-template-columns:1fr;

    }

    .featured-card{

        padding:40px;

    }

}
/* HAMBURGER MENU */

.menu-toggle{
    display:none;
    font-size:32px;
    cursor:pointer;
    color:#fff;
}

@media (max-width:768px){

.nav-wrapper{
    position:relative;
}

.menu-toggle{
    display:block;
}

.nav-links{
    display:none;
    position:absolute;
    top:80px;
    left:0;
    width:100%;
    background:#000;
    flex-direction:column;
    text-align:center;
    padding:30px 0;
    gap:20px;
    z-index:999;
}

.nav-links.active{
    display:flex;
}

.cta-btn{
    display:none;
}

}