@use "@/src/assets/scss/variables" as *;
@use "@/src/assets/scss/partial" as *;

.HeroBannerWrapper {
  .HeroBannerContentWrap {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    background: url("../../../../../public/images/bg-line.svg"),
      linear-gradient(90.1deg, $secondaryColor 0.09%, #008b94 99.92%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    &::before,
    &::after {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
    }

    @media (min-width: $lg) {
      flex-direction: row;
    }

    .HeroBannerContent {
      h1 {
        .AnimatedSpan {
          display: inline-block;
          animation-name: slideUp;
          animation-duration: 6s;
          animation-iteration-count: infinite;
          animation-direction: top;

          @keyframes slideUp {
            0% {
              transform: translate3d(0, 0, 0);
            }

            20% {
              transform: translate3d(0, 0, 0); // hold at 0%
            }

            60% {
              transform: translate3d(0, -33%, 0);
            }

            100% {
              transform: translate3d(0, -67%, 0);
            }
          }
        }
      }

      p {
        color: #f5f5f5;
      }
    }

    .BannerLinksWrapper {
      a {
        border-color: #ffffff50;
      }
    }
  }
}