@media (max-width:1024px){
  .navbar{
    padding:16px;
    gap:16px;
    flex-wrap:wrap;
  }

  .hero-content{
    padding:32px 24px;
  }
}

@media (max-width:768px){

  .navbar{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .navbar-links{
    flex-direction:column;
    gap:12px;
  }

  .hero{
    padding:48px 20px;
  }

  h1{
    font-size:2rem;
  }

  h2{
    font-size:1.5rem;
  }

  section{
    padding:32px 20px;
  }
}

@media (max-width:480px){

  .hero{
    padding:32px 16px;
  }

  h1{
    font-size:1.7rem;
  }

  .navbar-button{
    width:100%;
  }
}