@import "@/styles/mixins.scss";
@import "@/styles/variables.scss";

.educationBannerRegion {
  position: relative;
  height: 32.5rem;

  :global(.swiper-container) {
    height: 100%;
  }

  .educationBanner {
    height: 100%;

    &:after {
      background: rgba($blue-dark, 60%);
    }

    .educationBannerLink {
      position: relative;
      z-index: 2;
      display: block;
      height: 100%;
    }

    :global(.container) {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: #FFF;
      height: 100%;
      padding-top: 6.5rem;
      padding-bottom: 5.5rem;
      box-sizing: border-box;
    }

    .educationBannerInner{
      max-width: 54rem;
      max-height: 100%;
      overflow: hidden;
    }

    h5 {
      @include h5();
      opacity: 0.8;
    }

    h1 + h5 {
      margin-top: $hl-9;
    }
  }

  :global(.swiper-pagination) {
    left: 50%;
    bottom: 2rem;
    height: 0.5rem;
    transform: translateX(-50%);

    :global(.swiper-pagination-bullet) {
      float: left;
      background: $white;
      width: 0.5rem;
      height: 0.5rem;
      margin: 0 .3125rem;
      opacity: 0.4;

      &:global(.swiper-pagination-bullet-active) {
        opacity: 1;
      }
    }
  }
}