.beach-waves {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40vh;
  pointer-events: none;
  z-index: 1;

  background:
    radial-gradient(ellipse at 20% 100%, #81d4fa 30%, transparent 31%),
    radial-gradient(ellipse at 70% 100%, #4fc3f7 30%, transparent 31%),
    radial-gradient(ellipse at 50% 100%, #0288d1 25%, transparent 26%);

  background-size: 200% 100%;
  animation: oceanWave 12s linear infinite;
  filter: blur(2px);
}
@keyframes oceanWave {
  0% {
    background-position: 0% 100%, 50% 100%, 100% 100%;
  }
  50% {
    background-position: 50% 100%, 0% 100%, 50% 100%;
  }
  100% {
    background-position: 100% 100%, 50% 100%, 0% 100%;
  }
}

@media (max-width: 768px) {
  .snow-hills {
    height: 30vh;
    background-image:
      radial-gradient(ellipse at 0% 100%, rgba(129, 212, 250, 0.95) 40%, transparent 41%),
      radial-gradient(ellipse at 100% 100%, rgba(129, 212, 250, 0.95) 40%, transparent 41%);
  }
}