/* responsive.css */

@media(max-width:1100px){

.hero-grid,
.about-grid,
.service-grid,
.why-grid,
.testimonial-grid,
.footer-grid,
.brand-grid{
grid-template-columns:1fr;
}

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

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

nav{
display:none;
}

}

@media(max-width:768px){

.hero{
padding-top:120px;
}

.section-title h2{
font-size:32px;
}

.stats{
flex-direction:column;
gap:20px;
}

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

.btn,
.primary-btn,
.secondary-btn{
display:block;
width:100%;
text-align:center;
margin:15px 0;
}

.container{
width:94%;
}

.card,
.brand-card,
.service-card,
.stat-card,
.why-card,
.testimonial-card,
.faq-item{
padding:25px;
}

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

.hero p{
font-size:16px;
}

}

@media(max-width:480px){

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

.section-title h2{
font-size:26px;
}

.logo img{
height:42px;
}

.header .container{
height:70px;
}

}