@media (max-width:900px){
.nav{flex-direction:column;gap:1rem}
.nav ul{flex-wrap:wrap;justify-content:center;gap:1rem}
.hero{padding:1.5rem 1.2rem}
.hero-content{
grid-template-columns:1fr;
text-align:center;
gap:2rem;
}
.hero-text h1{font-size:2.8rem}
.hero-text p{margin:0 auto 2rem}
.buttons{justify-content:center}
.phone{
width:240px;
height:490px;
transform:none;
}
main section{padding:4rem 1.2rem}
h2{font-size:2.2rem}
}
@media (max-width:520px){
.logo{font-size:1.6rem}
.hero-text h1{font-size:2.2rem}
.hero-text p{font-size:1rem}
.nav ul{display:none;}
.cards{grid-template-columns:1fr}
.btn{width:100%;text-align:center}
.phone{width:210px;height:430px}
}