/* =========================================================
   MINUVIA - STUDENT BENEFITS
========================================================= */


/* =========================================================
   GIVE FEATURES ROOM FOR JUMP BUTTON
========================================================= */

.features-showcase-section {
  position: relative;

  padding-bottom: 155px;
}



/* =========================================================
   FEATURES → STUDENT BENEFITS JUMP BUTTON
========================================================= */

.student-benefits-jump-button {
  position: absolute;

  z-index: 20;

  left: 50%;
  bottom: 22px;

  width: 112px;
  height: 112px;

  transform:
    translateX(-50%);

  border:
    1px solid #D7E3F2;

  border-radius: 18px;

  display: flex;

  flex-direction: column;

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

  gap: 8px;

  color: #0B1F3C;

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

  box-shadow:
    0 14px 32px
    rgba(
      11,
      31,
      60,
      0.10
    );

  text-align: center;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


.student-benefits-jump-button:hover {
  transform:
    translateX(-50%)
    translateY(-5px);

  box-shadow:
    0 19px 38px
    rgba(
      11,
      31,
      60,
      0.15
    );
}


.student-benefits-jump-arrow {
  width: 34px;
  height: 34px;

  border-radius: 50%;

  display: flex;

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

  color: #FFFFFF;

  background: #246CF5;

  font-size: 20px;

  font-weight: 800;

  line-height: 1;
}


.student-benefits-jump-text {
  max-width: 84px;

  color: #0B1F3C;

  font-size: 11px;

  font-weight: 800;

  line-height: 1.25;
}



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

.student-benefits-section {
  position: relative;

  padding:
    100px 0 110px;

  overflow: hidden;

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



/* =========================================================
   STUDENT BENEFITS HEADING
   DESKTOP = ONE LINE
========================================================= */

.student-benefits-heading {
  position: relative;

  z-index: 2;

  width: 100%;

  max-width: 1250px;

  margin:
    0 auto 48px;

  text-align: center;
}


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

  color: #0B1F3C;

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

  line-height: 1.04;

  letter-spacing: -2.4px;

  white-space: nowrap;
}


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

  color: #246CF5;
}


.student-benefits-heading p {
  max-width: 760px;

  margin: 0 auto;

  color: #65758B;

  font-size: 15px;

  line-height: 1.7;
}



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

.student-benefits-carousel {
  position: relative;

  z-index: 2;

  max-width: 900px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: center;
}



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

.student-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;
}


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


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

  transform:
    scale(0.988);
}



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

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

  display: flex;

  align-items: center;

  justify-content: flex-start;
}


.student-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
========================================================= */

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


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


.student-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;
}


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

  color: #0B1F3C;

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

  line-height: 1.06;

  letter-spacing: -1.5px;
}


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

  margin: 0;

  color: #65758B;

  font-size: 16px;

  line-height: 1.75;
}



/* =========================================================
   STUDENT BENEFIT PAYOFF
========================================================= */

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

  padding:
    22px 24px;

  border:
    1px solid #CEE0FF;

  border-radius: 17px;

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


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

  margin-bottom: 6px;

  color: #246CF5;

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 0.5px;
}


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

  color: #0B1F3C;

  font-size: 16px;

  line-height: 1.45;
}



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

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


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

  display: block;

  background: #E3EAF3;
}


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

  color: #8794A6;

  font-size: 11px;
}



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

.student-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;
}


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


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

  color: #246CF5;

  background: #FFFFFF;
}


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

  color: #FFFFFF;

  background: #246CF5;
}



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

.student-benefits-dots {
  position: relative;

  z-index: 2;

  min-height: 12px;

  margin-top: 27px;

  display: flex;

  justify-content: center;

  gap: 7px;
}


.student-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;
}


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

  border-radius: 99px;

  background: #246CF5;
}


.student-benefits-swipe {
  position: relative;

  z-index: 2;

  margin:
    11px 0 0;

  text-align: center;

  color: #8290A3;

  font-size: 13px;
}



/* =========================================================
   BACKGROUND ORBS
========================================================= */

.student-benefits-orb {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;
}


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

  left: -260px;

  top: 210px;

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


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

  right: -280px;

  bottom: -260px;

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



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

@media (max-width: 1080px) {

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


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


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

}



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

@media (max-width: 1050px) {

  .student-benefits-heading {
    max-width: 850px;
  }


  .student-benefits-heading h2 {
    white-space: normal;
  }

}



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

@media (max-width: 900px) {

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


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


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

}



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

@media (max-width: 620px) {

  .features-showcase-section {
    padding-bottom: 130px;
  }


  /* JUMP BUTTON */

  .student-benefits-jump-button {
    width: 96px;
    height: 96px;

    bottom: 14px;

    border-radius: 16px;
  }


  .student-benefits-jump-arrow {
    width: 30px;
    height: 30px;

    font-size: 18px;
  }


  .student-benefits-jump-text {
    font-size: 10px;
  }



  /* SECTION */

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



  /* HEADING */

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

    margin-bottom: 32px;
  }


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

    letter-spacing: -1.7px;

    white-space: normal;
  }


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


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



  /* CAROUSEL */

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



  /* CARD */

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

    padding:
      27px 22px 25px;

    border-radius: 22px;
  }


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


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


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

    font-size: 11px;
  }


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


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



  /* PAYOFF */

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

    padding: 18px;
  }


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



  /* ARROWS */

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

    font-size: 29px;
  }


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


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

}