@media(max-width:1100px){


.navbar{

padding:0 5%;

}


.hero{

padding-top:40px;
gap:30px;

}


.hero-content h1{

font-size:42px;

}



.features{

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

}



.cards{

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

}



.why .cards{

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

}


}





@media(max-width:768px){

.navbar{
height:auto;
padding:0 12px;
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
column-gap:8px;
flex-direction:initial;
gap:0;
}

.menu{
display:none;
}

.logo{
font-size:22px;
}




.hero{

flex-direction:column;
text-align:center;

}



.hero-content{

width:100%;

}



.hero-content h1{

font-size:34px;

}



.hero-content p{

font-size:17px;

}



.hero-buttons{

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

}



.btn{

width:85%;
text-align:center;

}



.hero-image{

width:100%;

}



.hero-image img{

height:300px;

}



.features{

grid-template-columns:1fr;

}



.cards{

grid-template-columns:1fr;

}



.why{

margin:20px 5%;
border-radius:30px;

}



.why .cards{

grid-template-columns:1fr;

}



.newsletter{

margin:30px 5%;

}



.newsletter input{

width:90%;
margin-bottom:15px;

}



h2{

font-size:28px;

}



}





@media(max-width:400px){



.hero-content h1{

font-size:30px;

}



.hero-image img{

height:240px;

}


}