/* =========================================================
   MINUVIA - TEACHER BENEFITS
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.teacher-benefits-section {
  position: relative;

  padding:
    100px 0 110px;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #F5F8FC 100%
    );
}



/* =========================================================
   HEADING
========================================================= */

.teacher-benefits-heading {
  position: relative;

  z-index: 2;

  max-width: 1350px;

  margin:
    0 auto 48px;

  text-align: center;
}


.teacher-benefits-heading h2 {
  margin:
    16px 0 13px;

  color: #0B1F3C;

  font-size:
    clamp(
      38px,
      3.2vw,
      58px
    );

  line-height: 1.04;

  letter-spacing: -2.4px;

  white-space: nowrap;
}


.teacher-benefits-heading h2 span {
  display: inline;

  color: #246CF5;
}


.teacher-benefits-heading p {
  max-width: 690px;

  margin: 0 auto;

  color: #65758B;

  font-size: 15px;

  line-height: 1.7;
}



/* =========================================================
   CAROUSEL
========================================================= */

.teacher-benefits-carousel {
  position: relative;

  z-index: 2;

  max-width: 900px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: center;
}



/* =========================================================
   BENEFIT CARD
========================================================= */

.teacher-benefit-card {
  width: 100%;

  min-height: 440px;

  padding:
    42px 48px 36px;

  border:
    1px solid #DDE6F1;

  border-radius: 28px;

  background:
    rgba(
      255,
      255,
      255,
      0.97
    );

  box-shadow:
    0 22px 55px
    rgba(
      11,
      31,
      60,
      0.09
    );

  cursor: grab;

  user-select: none;

  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}


.teacher-benefit-card:active {
  cursor: grabbing;
}


.teacher-benefit-card.changing {
  opacity: 0.55;

  transform:
    scale(0.988);
}



/* =========================================================
   CARD TOP
========================================================= */

.teacher-benefit-card-top {
  margin-bottom: 30px;

  display: flex;

  align-items: center;

  justify-content: flex-start;
}


.teacher-benefit-count {
  min-height: 31px;

  padding:
    0 12px;

  border:
    1px solid #DDE6F1;

  border-radius: 999px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color: #78879A;

  background: #F8FAFD;

  font-size: 11px;

  font-weight: 800;
}



/* =========================================================
   MAIN CONTENT
========================================================= */

.teacher-benefit-main {
  display: block;
}


.teacher-benefit-copy {
  width: 100%;
}


/* BLUE NUMBERED SUBHEADING */

.teacher-benefit-subheading {
  margin:
    0 0 10px;

  color: #246CF5;

  font-size: 13px;

  font-weight: 900;

  line-height: 1.4;

  letter-spacing: 0.45px;

  text-transform: uppercase;
}


.teacher-benefit-copy h3 {
  margin:
    0 0 14px;

  color: #0B1F3C;

  font-size:
    clamp(
      30px,
      4vw,
      44px
    );

  line-height: 1.06;

  letter-spacing: -1.5px;
}


.teacher-benefit-description {
  max-width: 760px;

  margin: 0;

  color: #65758B;

  font-size: 16px;

  line-height: 1.75;
}



/* =========================================================
   PAYOFF
========================================================= */

.teacher-benefit-payoff {
  margin-top: 34px;

  padding:
    22px 24px;

  border:
    1px solid #CEE0FF;

  border-radius: 17px;

  background:
    linear-gradient(
      135deg,
      #F2F7FF,
      #EAF2FF
    );
}


.teacher-benefit-payoff-label {
  display: block;

  margin-bottom: 6px;

  color: #246CF5;

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 0.5px;
}


.teacher-benefit-payoff strong {
  display: block;

  color: #0B1F3C;

  font-size: 16px;

  line-height: 1.45;
}



/* =========================================================
   CARD FOOTER
========================================================= */

.teacher-benefit-card-footer {
  margin-top: 27px;
}


.teacher-benefit-footer-line {
  height: 1px;

  display: block;

  background: #E3EAF3;
}


.teacher-benefit-card-footer p {
  margin:
    14px 0 0;

  color: #8794A6;

  font-size: 11px;
}



/* =========================================================
   ARROWS
========================================================= */

.teacher-benefits-arrow {
  position: absolute;

  z-index: 8;

  top: 50%;

  width: 52px;
  height: 52px;

  border: 0;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-family:
    Arial,
    sans-serif;

  font-size: 36px;

  line-height: 1;

  transform:
    translateY(-50%);

  box-shadow:
    0 10px 26px
    rgba(
      11,
      31,
      60,
      0.12
    );

  cursor: pointer;

  transition:
    transform 0.18s ease;
}


.teacher-benefits-arrow:hover {
  transform:
    translateY(-50%)
    scale(1.07);
}


.teacher-benefits-arrow-left {
  left: -80px;

  color: #246CF5;

  background: #FFFFFF;
}


.teacher-benefits-arrow-right {
  right: -80px;

  color: #FFFFFF;

  background: #246CF5;
}



/* =========================================================
   DOTS
========================================================= */

.teacher-benefits-dots {
  position: relative;

  z-index: 2;

  min-height: 12px;

  margin-top: 27px;

  display: flex;

  justify-content: center;

  gap: 7px;
}


.teacher-benefit-dot {
  width: 8px;
  height: 8px;

  padding: 0;

  border: 0;

  border-radius: 50%;

  background: #CCD6E3;

  cursor: pointer;

  transition:
    width 0.18s ease,
    background 0.18s ease;
}


.teacher-benefit-dot.active {
  width: 22px;

  border-radius: 99px;

  background: #246CF5;
}


.teacher-benefits-swipe {
  position: relative;

  z-index: 2;

  margin:
    11px 0 0;

  text-align: center;

  color: #8290A3;

  font-size: 13px;
}



/* =========================================================
   DECORATIVE BACKGROUND
========================================================= */

.teacher-benefits-orb {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;
}


.teacher-benefits-orb-left {
  width: 470px;
  height: 470px;

  left: -260px;

  top: 210px;

  background:
    rgba(
      211,
      227,
      251,
      0.35
    );
}


.teacher-benefits-orb-right {
  width: 520px;
  height: 520px;

  right: -280px;

  bottom: -260px;

  background:
    rgba(
      204,
      224,
      252,
      0.35
    );
}



/* =========================================================
   LARGE TABLET / SMALL DESKTOP
   HEADLINE CAN WRAP BELOW THIS SIZE
========================================================= */

@media (max-width: 1180px) {

  .teacher-benefits-heading {
    max-width: 900px;
  }


  .teacher-benefits-heading h2 {
    white-space: normal;

    font-size:
      clamp(
        38px,
        4.5vw,
        58px
      );
  }


  .teacher-benefits-heading h2 span {
    display: inline;
  }

}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1080px) {

  .teacher-benefits-carousel {
    max-width: 760px;
  }


  .teacher-benefits-arrow-left {
    left: -62px;
  }


  .teacher-benefits-arrow-right {
    right: -62px;
  }

}



/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 900px) {

  .teacher-benefits-carousel {
    max-width:
      calc(
        100% - 70px
      );
  }


  .teacher-benefits-arrow-left {
    left: -30px;
  }


  .teacher-benefits-arrow-right {
    right: -30px;
  }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {

  .teacher-benefits-section {
    padding:
      75px 0 85px;
  }


  .teacher-benefits-heading {
    max-width: 100%;

    margin-bottom: 32px;
  }


  .teacher-benefits-heading h2 {
    font-size: 38px;

    letter-spacing: -1.7px;

    white-space: normal;
  }


  .teacher-benefits-heading h2 span {
    display: inline;
  }


  .teacher-benefits-heading p {
    font-size: 14px;
  }


  .teacher-benefits-carousel {
    max-width:
      calc(
        100% - 24px
      );
  }


  .teacher-benefit-card {
    min-height: 0;

    padding:
      27px 22px 25px;

    border-radius: 22px;
  }


  .teacher-benefit-card-top {
    margin-bottom: 24px;
  }


  .teacher-benefit-main {
    display: block;
  }


  .teacher-benefit-subheading {
    margin-bottom: 8px;

    font-size: 11px;
  }


  .teacher-benefit-copy h3 {
    font-size: 30px;
  }


  .teacher-benefit-description {
    font-size: 14px;
  }


  .teacher-benefit-payoff {
    margin-top: 25px;

    padding: 18px;
  }


  .teacher-benefit-payoff strong {
    font-size: 14px;
  }


  .teacher-benefits-arrow {
    width: 42px;
    height: 42px;

    font-size: 29px;
  }


  .teacher-benefits-arrow-left {
    left: -18px;
  }


  .teacher-benefits-arrow-right {
    right: -18px;
  }

}


/* =========================================================
   FORCE EXPLORE THE PORTAL ARROW TO MATCH OTHER BUTTONS
========================================================= */

.teacher-portal-jump-button .teacher-portal-jump-arrow {
  width: 34px !important;
  height: 34px !important;

  min-width: 34px !important;
  min-height: 34px !important;

  padding: 0 !important;

  border: 0 !important;

  border-radius: 50% !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  color: #FFFFFF !important;

  background: #246CF5 !important;

  box-shadow:
    0 6px 14px
    rgba(36, 108, 245, 0.20) !important;

  font-size: 20px !important;

  font-weight: 800 !important;

  line-height: 1 !important;

  transform: none !important;
}


/* KEEP IT CIRCULAR ON HOVER */

.teacher-portal-jump-button:hover
.teacher-portal-jump-arrow {
  color: #FFFFFF !important;

  background: #246CF5 !important;

  border-radius: 50% !important;

  transform: none !important;
}


/* MOBILE */

@media (max-width: 650px) {

  .teacher-portal-jump-button
  .teacher-portal-jump-arrow {
    width: 30px !important;
    height: 30px !important;

    min-width: 30px !important;
    min-height: 30px !important;

    font-size: 18px !important;
  }

}