/* ===================================
TABLET
=================================== */

@media(max-width:1024px){

.hero{
min-height:auto;
padding-top:120px;
}

.hero-content{
grid-template-columns:1fr;
gap:50px;
}

.hero h1{
font-size:58px;
}

.hero-image{
height:500px;
}

}

/* ===================================
TABLET & MOBILE
=================================== */

@media(max-width:991px){

/* Header */

.nav-menu{
position:fixed;
top:90px;
left:0;
width:100%;
background:#050505;
flex-direction:column;
padding:40px;
gap:24px;
display:none;
}

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

.nav-cta{
display:none;
}

.menu-toggle{
display:block;
}

/* Layout */

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

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

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

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

.featured-post-card{
grid-template-columns:1fr;
}

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

}

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

@media(max-width:768px){

section{
padding:70px 0;
}

.cta-box{
padding:50px 24px;
border-radius:28px;
}

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

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

.portfolio-image{
height:240px;
}

.featured-post-image{
height:300px;
}

.testimonial-card{
width:85vw;
min-width:85vw;
padding:28px;
}

.author-box{
flex-direction:column;
text-align:center;
}

.article-content p{
font-size:16px;
}

.article-content h2{
font-size:30px;
}

}

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

@media(max-width:576px){

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

.page-hero h1,
.case-hero h1{
font-size:42px;
}

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

.hero-image{
height:380px;
}

}

@media(max-width:768px){

    .top-bar{

        display:none;

    }

}