@media (max-width:992px){

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

.main-menu{
    gap:20px;
}

h1{
    font-size:42px;
}

h2{
    font-size:32px;
}

}

@media (max-width:768px){

.site-header .container{
    flex-direction:column;
    justify-content:center;
    height:auto;
    padding:20px 0;
}

.main-menu{
    flex-direction:column;
    align-items:center;
    margin-top:20px;
}

.hero{
    padding:150px 0 70px;
}

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

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

.btn{
    display:block;
    width:100%;
    text-align:center;
    margin-bottom:15px;
}

section{
    padding:60px 0;
}

}

@media (max-width:480px){

.container{
    width:94%;
}

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

h2{
    font-size:26px;
}

}