:root {
  --hero-animation-duration: 1s;
}

.slider-transition {
  transition: transform 0.7s ease-in-out;
}

.partner-slider .preview-text {
  transition: max-height 0.7s ease-in-out;
}

.hero-bunner-content-transition {
  transition: transform 2.7s ease-in-out;
  animation: adder-frame var(--hero-animation-duration);
}

#heroBannerSliderImageLayer .item.preActive {
  animation: hero-bunner-text-in var(--hero-animation-duration);
}

#heroBannerSliderImageLayer .item.out {
  animation: hero-bunner-text-out var(--hero-animation-duration);
}

#heroBannerSliderImageLayer .item.preActive {
  transform: translateX(-100%);
}

#heroBannerSliderContentLayer .item.preActive .top-caption,
#heroBannerSliderContentLayer .item.preActive .main-heading {
  animation: hero-bunner-text-in-from-top var(--hero-animation-duration);
  animation-timing-function: ease-in;
}

#heroBannerSliderContentLayer .item.preActive .sub-heading,
#heroBannerSliderContentLayer .item.preActive .button {
  animation: hero-bunner-text-in-from-bottom var(--hero-animation-duration);
  animation-timing-function: ease-in;
}

#heroBannerSliderContentLayer .item.out .top-caption,
#heroBannerSliderContentLayer .item.out .main-heading {
  animation: hero-bunner-text-out-from-top var(--hero-animation-duration);
  animation-timing-function: ease-out;
}

#heroBannerSliderContentLayer .item.out .sub-heading,
#heroBannerSliderContentLayer .item.out .button {
  animation: hero-bunner-text-out-from-bottom var(--hero-animation-duration);
  animation-timing-function: ease-out;
}

#heroBannerSliderContentLayer .item.preActive {
  transform: translateX(-100%);
  background: none;
}

@keyframes adder-frame {
  from {
    opacity: 1;
  }

  to {
    opacity: 1;
  }
}

@keyframes hero-bunner-text-in-from-top {
  from {
    transform: translate(-10px, -10px);
    opacity: 0;
  }
  50% {
    transform: translate(-10px, -10px);
    opacity: 0;
  }
  to {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}

@keyframes hero-bunner-text-in-from-bottom {
  from {
    transform: translate(-10px, 10px);
    opacity: 0;
  }
  50% {
    transform: translate(-10px, 10px);
    opacity: 0;
  }
  to {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}

@keyframes hero-bunner-text-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes hero-bunner-text-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes hero-bunner-text-out-from-top {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate(10px, 10px);
  }
  to {
    opacity: 0;
    transform: translate(10px, 10px);
  }
}

@keyframes hero-bunner-text-out-from-bottom {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate(10px, -10px);
  }
  to {
    opacity: 0;
    transform: translate(10px, -10px);
  }
}

.burger-btn span {
  margin-left: 0;
  transition: all 0.25s ease-in-out;
}

.burger-btn.open span:first-child {
  transform: rotate(45deg) translateY(4.2px);
}

.burger-btn.open span:last-child {
  transform: rotate(-45deg) translateY(-4.2px);
}

.burger-btn.open span:nth-child(2) {
  width: 0;
  transform: translateX(-4.2px);
}

.mobile-animation-container {
  pointer-events: none;
}

.mobile-animation-container.open {
  pointer-events: all;
}

#mobile-links {
  transition: all 0.25s ease-in-out;
}

.open #mobile-links {
  transform: translateX(-100%);
}