@media (max-width: 450px) {
  .flex{
    flex-direction: column !important;
  }

  .hero-text{
    width: 90% !important;
    top: 70% !important;
    left: 50% !important;
  }
  
  .waves{
    right: 550px !important;
    top: 70px !important;
  }

  nav{
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .container-header{
    justify-content: normal !important;
  }
  }

@media (max-width: 768px) {
  .waves{
    top: 0% !important;
  }
}