.hero-waves {
   display: block;
   width: 100%;
   height: 60px;
   position: absolute;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: 3;
}

.wave1 use {
   animation: move-forever1 10s linear infinite;
   animation-delay: -2s;
   fill: var(--waves-color);
   opacity: 0.6;
}

.wave2 use {
   animation: move-forever2 8s linear infinite;
   animation-delay: -2s;
   fill: var(--waves-color);
   opacity: 0.4;
}

.wave3 use {
   animation: move-forever3 6s linear infinite;
   animation-delay: -2s;
   fill: var(--waves-color);
}

@keyframes move-forever1 {
   0% {
      transform: translate(85px, 0%);
   }

   100% {
      transform: translate(-90px, 0%);
   }
}

@keyframes move-forever2 {
   0% {
      transform: translate(-90px, 0%);
   }

   100% {
      transform: translate(85px, 0%);
   }
}

@keyframes move-forever3 {
   0% {
      transform: translate(-90px, 0%);
   }

   100% {
      transform: translate(85px, 0%);
   }
}

.hero-bg {
   position: absolute;
   inset: 0;
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 1;
}

.hero:before {
   content: "";
   background: color-mix(in srgb, var(--wavesbg-color), transparent 10%);
   position: absolute;
   inset: 0;
   z-index: 2;
}