@media(max-width:900px){


header{

flex-direction:column;

gap:15px;

}



nav{

flex-wrap:wrap;

justify-content:center;

}



.hero{

flex-direction:column;

text-align:center;

}



.hero-content,
.hero-image{

width:100%;

}



.hero h1{

font-size:35px;

}



.product-container{

grid-template-columns:
1fr;

}



.benefit{

grid-template-columns:
1fr;

}



.products h2,
.category h2,
.benefit h2{

font-size:28px;

}


}



@media(max-width:500px){


.logo{

font-size:24px;

}



.hero{

padding:
50px 5%;

}



.hero h1{

font-size:30px;

}



.product-card{

padding:20px;

}


}