/* ===================================================
   RESPONSIVE BREAKPOINTS
   =================================================== */

/* === 1440px and up — large desktops === */
@media (min-width: 1440px) {
}
@media (max-width: 1439px) {
}
@media (max-width: 1200px) {
}
@media (max-width: 1110px) {
}
@media (min-width: 1025px) {
}
/* === 1024px and below — tablets and small desktops === */
@media (max-width: 1024px) {
}
@media (max-width: 991px) {
  .banner {
    padding-left: 32px;
    padding-right: 32px;
  }

  .form-section form h2 {
    letter-spacing: -0.92px;
  }
  img.wave {
    bottom: -50px;
  }

  .banner .promotion {
    position: relative;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 30px;
    margin-bottom: 30px;
  }
}
/* === 768px and below — tablets & mobile landscape === */
@media (max-width: 768px) {
  header {
    background-image: url("../images/navbg-mobile.webp");
  }
  .banner h1 {
    text-align: left;
    letter-spacing: -0.815px;
  }
  .banner .legend {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }

  img.wave {
    bottom: -30px;
  }

  .banner .promotion {
    position: relative;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .banner .promotion li {
    min-height: 200px;
  }
}
/* === 576px and below — mobile portrait === */
@media (max-width: 576px) {
}
/* === 400px and below — small devices & legacy phones === */
@media (max-width: 400px) {
}