html {
  scroll-behavior: smooth;
}

/* navbar */
:root {
  --biru-muda: #5bc0f8;
  --biru-tua: #007bff;
  --biru-transparan: rgba(91, 192, 248, 0.3);
}

.navbar-airbiru {
  background-color: #c4e8fe;
}

.navbar-nav .nav-link.active {
  color: #0217f4 !important;
}

.btn-topup {
  border: 2px solid #000000;
  color: #0217f4;
  transition: 0.3s;
}

.btn-topup:hover {
  background-color: #ffffff;
  color: var(--biru-tua);
}

.btn-topup-inline:hover {
  background-color: var(--biru-tua) !important;
  color: white !important;
  border-color: var(--biru-tua) !important;
}


/* how it work */
.bg-light-blue {
  background-color: #e7f5ff;
}

/* payment */
.payment-logo {
  max-height: 50px;
  object-fit: contain;
  aspect-ratio: 3 / 1;
  padding: 5px;
  background-color: white;
}

/* hero-section */
.highlight-review {
  background-color: #e0f3ff;
  padding: 0 8px;
  border-radius: 6px;
}

.wave-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  z-index: 1;
}

.hero-waves {
  display: block;
  width: 100%;
  height: 100px;
}

/* Warna Biru dan animasi vertikal */
.hero-waves .wave1 {
  /* animation: moveWaveY1 4s ease-in-out infinite alternate; */
  animation: moveWaveY1 1s ease-in-out infinite alternate;
}

.hero-waves .wave2 {
  /* animation: moveWaveY2 6s ease-in-out infinite alternate; */
  animation: moveWaveY2 2s ease-in-out infinite alternate;
}

.hero-waves .wave3 {
  /* animation: moveWaveY3 8s ease-in-out infinite alternate; */
  animation: moveWaveY3 4s ease-in-out infinite alternate;
}

@keyframes moveWaveY1 {
  0% { transform: translateY(0); }
  100% { transform: translateY(4px); }
}

@keyframes moveWaveY2 {
  0% { transform: translateY(0); }
  100% { transform: translateY(6px); }
}

@keyframes moveWaveY3 {
  0% { transform: translateY(0); }
  100% { transform: translateY(8px); }
}