@media (max-width:768px){

header .container{
    flex-direction:column;
    height:auto;
    padding:15px 0;
}

.logo img{
    width:180px;
}

nav ul{
    gap:15px;
    flex-wrap:wrap;
    justify-content:center;
}

.hero{
    padding-top:220px;
}

.hero-content{
    flex-direction:column-reverse;
    text-align:center;
}

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

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

.hero-buttons{
    justify-content:center;
    flex-wrap:wrap;
}

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

.footer-grid{
    grid-template-columns:1fr;
    text-align:center;
}

}