.cover-bg {
  height: 100%;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: -1;
}
.cover-bg__outer-container {
  height: 100%;
  position: relative;
  width: 100%;
}
.cover-bg__waves-container,
.cover-bg__top-container {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 768px;
}
.cover-bg__waves-container {
  height: 100%;
  top: -20px;
}
.cover-bg__outer-waves {
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}
.cover-bg__outer-waves svg {
  height: 100%;
  width: 100%;
}
.cover-bg__inner-waves {
  height: 100%;
  position: absolute;
  bottom: 0;
  width: 100%;
}
.cover-bg__inner-waves svg {
  height: 100%;
  width: 100%;
}
.cover-bg__color {
  background: #001f6d;
  background-position: center 30%;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  mask-position: center bottom;
  mask-repeat: no-repeat;
  mask-size: cover;
  -webkit-mask-position: center bottom;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
}
.cover-bg__gradient-1 {
  background: radial-gradient(circle, rgba(0,95,190,0.8) 0%, rgba(0,67,155,0.8) 30%, rgba(0,39,119,1) 55%, rgba(0,39,119,0.4) 70%);
  height: 100%;
  left: 50%;
  position: absolute;
  top: 60%;
  transform: translate(-50%,-50%);
  width: 100%;
}
.cover-bg__top-container {
  background: #1c0a03;
  height: 375px;
  mask-position: center bottom;
  mask-repeat: no-repeat;
  mask-size: cover;
  -webkit-mask-position: center bottom;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
}
.cover-bg__top-image {
  bottom: 10px;
  height: auto;
  object-fit: contain;
  object-position: center bottom;
  position: absolute;
  width: 100%;
}
.cover-bg__top-light-1 {
  background: radial-gradient(circle, rgb(255 242 144) 30%, rgb(255 229 30 / 0%) 70%);
  height: 600px;
  left: 50%;
  mix-blend-mode: soft-light;
  position: absolute;
  top: 100%;
  transform: translate(-50%, -50%);
  width: 600px;
}
.cover-bg__noise {
  opacity: 0.3;
  mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 90%, rgba(0,0,0,0.4) 97%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 90%, rgba(0,0,0,0.4) 97%, rgba(0,0,0,0) 100%);
}

.outer-wave-animation,
.inner-wave-animation,
.image-wave-animation {
  animation: none;
  transform-box: fill-box;
  transform-origin: center bottom;
}


@media (min-width: 768px) {
  .cover-bg__waves-container,
  .cover-bg__top-container {
    width: 1024px;
  }
  .cover-bg__waves-container {
    top: -60px;
  }
  .cover-bg__gradient-1 {
    top: 65%;
  }
  .cover-bg__top-container {
    height: 550px;
  }
}

@media (min-width: 1024px) {
  .cover-bg__waves-container,
  .cover-bg__top-container {
    width: 1360px;
  }
  .cover-bg__waves-container {
    top: -120px;
  }
  .cover-bg__gradient-1 {
    top: 55%;
  }
  .cover-bg__top-container {
    height: 455px;
  }
  .outer-wave-animation {
    animation: outerAnimationWave 12s ease-in-out infinite alternate-reverse;
  }
  .inner-wave-animation {
    animation: innerAnimationWave 16s ease-in-out infinite alternate-reverse;
  }
  .image-wave-animation {
    animation: imageAnimationWave 12s ease-in-out infinite alternate-reverse;
  }
  .pause-animation-waves {
    animation-play-state: paused;
  }
}

@media (min-width: 1360px) {
  .cover-bg__waves-container,
  .cover-bg__top-container {
    width: 1920px;
  }
  .cover-bg__waves-container {
    top: -140px;
  }
  .cover-bg__top-container {
    height: 550px;
  }
  .cover-bg__top-light-1 {
    height: 900px;
    top: 110%;
    width: 900px;
  }
  .cover-bg__gradient-1 {
    background: radial-gradient(circle, rgba(0,95,190,0.8) 0%, rgba(0,67,155,0.8) 40%, rgba(0,39,119,1) 60%, rgba(0,39,119,0.4) 70%);
    top: 60%;
  }
}

@media (min-width: 1920px) {
  .cover-bg__waves-container,
  .cover-bg__top-container {
    width: 100%;
  }
  .cover-bg__waves-container {
    top: -150px;
  }
  .cover-bg__top-container {
    height: 590px;
  }
  .cover-bg__top-light-1 {
    height: 1250px;
    top: 110%;
    width: 1250px;
  }
}

@keyframes outerAnimationWave {
  0% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
  25% { transform: scaleX(1.1) skewX(2deg) skewY(2deg); }
  50% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
  75% { transform: scaleX(1.1) skewX(-2deg) skewY(-2deg); }
  100% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
}

@keyframes innerAnimationWave {
  0% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
  25% { transform: scaleX(1.2) skewX(2deg) skewY(1deg); }
  50% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
  75% { transform: scaleX(1.2) skewX(-2deg) skewY(-1deg); }
  100% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
}


@keyframes imageAnimationWave {
  0% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
  25% { transform: scaleX(1.1) skewX(2deg) skewY(1deg); }
  50% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
  75% { transform: scaleX(1.1) skewX(-2deg) skewY(1deg); }
  100% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
}