/*
Mobile 768x720
Tablet 1024x1026
Desktop 1920x1080
*/
.page-home-hero-block {
  /* overflow: hidden; */
  height: 800px;
  position: relative;
  width: 100%;
}
.page-home-hero-block__outer-container {
  left: 50%;
  position: relative;
  transform: translateX(-50%);
  width: 768px;
}
.page-home-hero-block__mask {
  background: rgb(3,48,140);
  background: linear-gradient(90deg, rgba(3,48,140,1) 0%, rgba(3,50,144,1) 20%, rgba(4,67,186,1) 40%, rgba(4,67,186,1) 50%, rgba(4,67,186,1) 60%, rgba(3,50,144,1) 80%, rgba(3,48,140,1) 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;
}
.page-home-hero-block__inner-container {
  left: 50%;
  /* padding-bottom: 50px; */
  position: relative;
  transform: translateX(-50%);
  width: 100vw;
}
.page-home-hero-block__outer-waves,
.page-home-hero-block__inner-waves {
  height: 130%;
  /* left: 50%; */
  position: absolute;
  pointer-events: none;
  top: -30%;
  /* transform: translateX(-50%); */
  width: 100%;
}
.page-home-hero-block__outer-waves svg,
.page-home-hero-block__inner-waves svg {
  height: 100%;
  width: 100%;
}
.page-home-hero-block__trigger-animation-waves {
  bottom: -20px;
  height: 100px;
  left: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
}
.page-home-hero-block__slide {
  height: 720px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.page-home-hero-block__slide-anchor {
  display: block;
  height: 100%;
  width: 100%;
}
.page-home-hero-block__buttons {
  display: none;
  pointer-events: none;
  position: absolute;
  top: 44%;
  transform: translateY(-50%);
  width: 100%;
  z-index: 1;
}
.page-home-hero-block__prev-button,
.page-home-hero-block__next-button {
  pointer-events: auto;
  position: relative;
}
.page-home-hero-block .swiper-button-prev,
.page-home-hero-block .swiper-button-next {
  width: 60px;
  height: 60px;
  background-color: #fff;
  border-radius: 50%;
  color: #eb1c24;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-home-hero-block .swiper-button-prev:hover,
.page-home-hero-block .swiper-button-next:hover {
  background-color: #eb1c24;
  color: #fff;
}

.page-home-hero-block .swiper-button-next:after,
.page-home-hero-block .swiper-button-prev:after {
  content: '';
}
.page-home-hero-block .swiper-button-prev svg,
.page-home-hero-block .swiper-button-next svg {
  height: auto;
  width: 12px;
}
.page-home-hero-block .swiper-pagination {
  display: none;
  bottom: 90px;
  pointer-events: none;
}
.page-home-hero-block .swiper-pagination.is-visible {
  display: unset;
}
.page-home-hero-block .swiper-pagination .swiper-pagination-bullet {
  margin: 0 7px;
  height: 6px;
  width: 24px;
  border: none;
  border-radius: 45px;
  background: #fff;
  opacity: 0.3;
  pointer-events: auto;
}
.page-home-hero-block .swiper-pagination .swiper-pagination-bullet-active {
  opacity: 1;
}

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

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

@media (min-width: 768px) {
  .page-home-hero-block {
    height: 1026px;
  }
  .page-home-hero-block__outer-container {
    width: 1024px;
  }
  .page-home-hero-block__slide {
    height: 1026px;
  }
  .page-home-hero-block .swiper-pagination {
    bottom: 125px;
  }
  .page-home-hero-block .swiper-pagination .swiper-pagination-bullet {
    margin: 0 10px;
    width: 31px;
  }
  .page-home-hero-block__trigger-animation-waves {
    height: 120px;
  }
}

@media (min-width: 1024px) {
  .page-home-hero-block {
    height: 834px;
  }
  .page-home-hero-block__outer-container {
    width: 1360px;
  }
  .page-home-hero-block__slide {
    height: 834px;
  }
  .page-home-hero-block .swiper-pagination {
    bottom: 140px;
  }
  .page-home-hero-block__buttons.is-visible {
    display: unset;
  }
  .page-home-hero-block .swiper-pagination {
    display: none;
  }
  .page-home-hero-block__trigger-animation-waves {
    height: 140px;
  }
  .outer-wave-animation {
    animation: outerAnimationWave 10s ease-in-out infinite alternate-reverse;
  }
  .inner-wave-animation {
    animation: innerAnimationWave 8s ease-in-out infinite alternate-reverse;
  }
  .pause-animation-waves {
    animation-play-state: paused;
  }
}

@media (min-width: 1360px) {
  .page-home-hero-block {
    height: 865px;
  }
  .page-home-hero-block__outer-container {
    width: 1920px;
  }
  .page-home-hero-block__slide {
    height: 865px;
  }
  .page-home-hero-block .swiper-pagination {
    bottom: 170px;
  }
  .page-home-hero-block__buttons {
    top: 38%;
  }
  .page-home-hero-block__trigger-animation-waves {
    height: 180px;
  }
}

@media (min-width: 1920px) {
  .page-home-hero-block {
    height: 1080px;
  }
  .page-home-hero-block__outer-container {
    width: 102%;
  }
  .page-home-hero-block__slide {
    height: 1080px;
  }
  .page-home-hero-block .swiper-pagination {
    bottom: 185px;
  }
  .page-home-hero-block__buttons {
    top: 38%;
  }
}

@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(2deg); }
  50% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
  75% { transform: scaleX(1.2) skewX(-2deg) skewY(-2deg); }
  100% { transform: scaleX(1) skewX(0deg) skewY(0deg); }
}