@media(max-width:900px){

.hero h1{

font-size:42px;

}

.hero p{

font-size:18px;

}

nav ul{

gap:20px;

}

.logo img{

height:55px;

}

}

@media(max-width:768px){

.navbar .container{

flex-direction:column;

}

nav ul{

flex-direction:column;

align-items:center;

margin-top:20px;

}

.hero{

padding-top:120px;

}

.hero h1{

font-size:34px;

}

.hero p{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

}

}