@import url("https://fonts.googleapis.com/css2?family=Ancizar+Sans:ital,wght@0,100..1000;1,100..1000&family=Comfortaa:wght@300..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Outfit:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300..700&family=Raleway:ital,wght@0,100..900;1,100..900&family=Short+Stack&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap");
/* --- ROOT VARIABLES --- */

:root {
  --page_margin: 8rem;
}

html {
  scroll-behavior: auto;
  height: auto;
  &:has(.custom-modal),
  &:has(.modal.active) {
    overflow-y: hidden;
    .nav_burger_menu {
      pointer-events: none;
      opacity: 0;
    }
  }
  &:has(.mobile_nav_menu.open) {
    overflow-y: hidden;
    .nav_burger_menu {
      transform: rotate(180deg) !important;
      transition: all 200ms;
    }
  }
}

/* --- END OF ROOT VARIABLES --- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --- GLOBAL CLASSES STYLES --- */

.pre_heading_pill_wrapper {
  padding: 2px;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  &::after {
    content: "";
    position: absolute;
    width: 100%;
    top: 0;
    pointer-events: none;
    left: 0;
    height: 100%;
    background: conic-gradient(from 180deg, #ff9292, #9e1943, #f472b6, #a80345);
    animation: spin 5s linear infinite;
    filter: blur(12px) contrast(1.5);
    z-index: -1;
  }
}
.pre_heading_pill {
  overflow: hidden;
  padding: 6px 24px;
  z-index: 32;
  background: linear-gradient(to bottom, #f0f0f0, #ffffff);
  color: #696969;
  width: fit-content;
  margin: 0 auto;
  font-weight: normal;
  font-size: 0.875rem;
  border-radius: 12px;
  border: 1px solid #f1f1f1;
  box-shadow:
    inset 0 4px 4px 0 rgba(255, 255, 255, 0.44),
    0 1px 32px -8px rgba(0, 17, 54, 0.2);
}

.heading {
  font-size: 2.25rem;
  font-size: clamp(1.5rem, 1.277rem + 1.0811vw, 2.25rem);
  font-weight: 700;
  color: #333333;
}

.subheading {
  font-size: 1.25rem;
  font-weight: 400;
  color: transparent;
  background: linear-gradient(to right, #6b0637 40%, #ff3079 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.global_heading_container {
  text-align: center !important;
  /* margin-inline: var(--page_margin); */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block: 2rem;
  flex-direction: column;

  .pre_heading_pill {
    margin-bottom: 12px !important;
  }
}

.users_pill {
  padding: 4px 16px 4px 4px;
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #ffffff93;

  backdrop-filter: blur(12px);
  border-radius: 100rem;
  border: 1px solid #f2f2f2;
  font-size: 0.75rem;
  color: #555555;
  width: fit-content;
  margin: 0 auto;

  .users_pill_images {
    font-size: 0;
    display: flex;
    align-items: center;

    img {
      object-fit: cover;
      object-position: center;
      height: 40px;
      width: 40px;
      border: 2px solid #ffffff;
      border-radius: 100rem;
      margin-right: -16px;

      &:last-child {
        margin-right: 0;
      }
    }
  }
  .users_pill_text {
    font-size: 0.875rem;
    font-weight: 400;
    text-align: left;
    line-height: 120%;

    strong {
      font-weight: 700;
      color: #9e214d;
    }
  }
}

.button {
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 100rem;
  font-size: 1rem;
  color: white;
  text-decoration: none;
  transition: all 280ms;
  background: linear-gradient(to right, #9e214d, #ff4d8c);
  border: 1px solid #de628e;
  font-weight: 400;
  box-shadow: inset 0px 2px 4.8px rgba(255, 255, 255, 0.497);
  &:hover {
    opacity: 50%;
  }
}

.trust_metrics_container {
  display: flex;
  gap: 20px;
  position: relative;
  z-index: 44;
  justify-content: center;

  .trust_metric {
    display: flex;
    border: 1px solid #eaeaea;
    background-color: #ffffffe4;
    backdrop-filter: blur(20px);
    width: 281px;
    height: 208px;
    border-radius: 24px;
    flex-direction: column;
    align-items: center;
    padding-top: 2.75rem;

    .trust_metric_value {
      font-size: 56px;
      font-weight: 700;
      color: transparent;
      background: linear-gradient(to bottom, #ff3079, #ffeeee);
      -webkit-background-clip: text;
      background-clip: text;
    }

    .trust_metric_label {
      font-size: 20px;
      font-weight: 500;
      color: #5c5c5c;
    }
  }
}

/** {*/
/*  margin: 0;*/
/*  padding: 0;*/
/*  box-sizing: border-box;*/
/*}*/

body {
  /* min-height: 100dvh; */
  height: auto;
  font-family: "Poppins", sans-serif;
  background-color: #ffffff;
  position: relative;
  scroll-behavior: auto;
  section {
    background-color: #fff !important;
    /* z-index: 23 !important; */
    /* position: relative; */
  }
  .hero_section {
    background-color: initial !important;
  }
  .kit_items_presentation_section {
    /* z-index: 1 !important; */
  }
}

/* This page is embedded on a V2 template (fragments/header.ftl / footer.ftl), which loads
   Tailwind's output.css for the header/footer. Tailwind's preflight resets font-size on bare
   h1-h6 to `inherit`, which this design never needed a counter-rule for since heading
   font-size always used to come from the browser default. Scoped to .kit_page (this page's
   own content, not the V2 header/footer) and to elements without a class, so it can't
   override any of this file's own classed heading rules. */
.kit_page :where(h1, h2, h3, h4, h5, h6):not([class]) {
  font-size: revert;
}

/* --- END OF GLOBAL CLASSES STYLES --- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --- NAVBAR SECTION STYLES --- */

.navbar {
  top: 0;
  position: sticky;
  width: 100%;
  height: auto;
  overflow: hidden;
  padding: 20px var(--page_margin);
  z-index: 9999;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);

  .navbar_container {
    display: flex;
    margin-inline: auto;
    max-width: 1440px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    height: 100%;

    .navbar_logo_and_links {
      display: flex;
      align-items: center;
      gap: 40px;
      .navbar_logo {
        font-size: 0;
        img {
          height: 36px;
          width: 100%;
        }
      }

      .navbar_links {
        display: flex;
        gap: 20px;

        .navbar_link {
          font-size: 0.875rem;
          color: #333333;
          transition: all 0.2s ease-in-out;
          text-decoration: none;

          &:hover {
            opacity: 0.75;
          }
        }
      }
    }
    .navbar_buttons {
      display: flex;
      align-items: center;
      gap: 0.5rem;

      .navbar_button {
        padding: 8px 12px;
        font-size: 0.875rem;
        font-weight: 300;
        border: none;
        border-radius: 100rem;
        text-decoration: none;
        transition: all 0.2s ease-in-out;
        cursor: pointer;

        &.login_button {
          background-color: transparent;
          color: rgb(130, 14, 37);
          border: 1px solid rgb(184, 25, 57);
          &:hover {
            opacity: 0.3;
          }
        }

        &.signup_button {
          background-color: transparent;
        }
      }
      .nav_burger_menu {
        font-size: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        display: none;
      }
    }
  }
}

/* --- END OF NAVBAR SECTION STYLES --- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --- HERO SECTION STYLES --- */

.hero_section {
  position: relative;
  width: 100%;
  min-height: calc(100dvh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;

  .hero_bg_image {
    z-index: 1;
    mask-image: linear-gradient(to right, transparent, black);
    display: block;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      /* background: linear-gradient(to top, white, transparent); */
    }
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;

      object-position: center;
      display: block;
      filter: contrast(1.25);
      /* position: relative; */
    }
  }

  .hero_section_wrapper {
    overflow: hidden;
    z-index: 23;
    position: relative;
    background: transparent;
    display: flex;
    width: 100%;
    flex: 1;
    align-self: stretch;
    justify-content: center;
    padding: 0 var(--page_margin);
    align-items: center;
    min-height: 100%;

    .hero_section_container {
      overflow: visible;
      max-width: 1440px;
      height: auto;
      width: 100%;
      z-index: 434;
      position: relative;
      /* top: 20px; */
      /* padding-top: 20px; */
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-block: 2rem;
      justify-content: center;
      text-align: center;

      .pre_heading_pill {
        margin: 0 !important;
        background: linear-gradient(to bottom, #ffffff, #ffffff);
      }

      .heading {
        font-weight: 800;
        letter-spacing: 1%;
        font-size: 38px;
        line-height: 130%;
        margin-top: 24px;
        max-width: 380px;
        margin-bottom: 4px;
        color: transparent;
        background: linear-gradient(55deg, #db1c6f 35%, #3f0214 100%);
        -webkit-background-clip: text;
        background-clip: text;
        span {
          color: rgb(40, 40, 40);
        }
      }

      .subheading {
        color: #5b5b5b;
        font-size: 24px;
        margin-bottom: 24px;
      }

      .users_pill {
        margin-bottom: 50px;
      }

      .button {
        margin-bottom: 60px;
        a {
          text-decoration: none;
          color: white;
        }
        &:hover {
          opacity: 1;
          transform: scale(0.95);
        }
      }

      &::before {
        content: "";
        position: absolute;
        /* top: -5%;
        left: 0;
        background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/radial\ f683.svg);
        background-size: contain;
        background-repeat: no-repeat;
        width: 17.5vw;
        height: 17.5vw;
        aspect-ratio: 1/1; */
      }

      &::after {
        content: "";
        position: absolute;
        top: 10%;
        right: -17.5%;
        width: 12vw;
        height: auto;
        aspect-ratio: 1 / 2;
        background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/carnet.svg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        transform: rotate(-23.08deg);
        filter: blur(8.2px);
        z-index: 10000;
      }
    }

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 50%;
      pointer-events: none;
      background: linear-gradient(to top, #7f0723 20%, rgba(255, 255, 255, 0));
    }

    &::before {
      /* content: ""; */
      position: absolute;
      border-radius: 520rem 520rem 0 0;
      z-index: -1;
      background: linear-gradient(to bottom, #86002f, rgb(255, 255, 255));
      width: 100%;
      transform: translateY(50%);
      aspect-ratio: 1 / 1;
      pointer-events: none;
      background-position: center;
      transition: all 400ms;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  &::before {
    content: "";
    z-index: 10000;
    position: absolute;
    top: 8.5%;
    left: -13%;
    width: 23.5vw;
    height: auto;
    aspect-ratio: 1 / 1.8;
    background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/carte.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(25deg);
    filter: blur(3.2px);
  }
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/images/bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -2;
  }
}

/* --- HERO EQUATION (Testimonial Card) --- */
.hero_equation {
  position: relative;
  overflow: hidden;
  padding: 4px 4px 18px 4px;
  border: 2px solid white;
  border-radius: 1.5rem;
  z-index: 44;
  width: 100%;
  background-color: white;
  display: flex;
  box-shadow: 0px 20px 40px pink;
  gap: 2rem;
  margin-inline: auto;
  max-width: 967px;
}
.hero_equation::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: scale(1.25);
  background: conic-gradient(
    from 90deg,
    rgb(183, 29, 60),
    rgb(170, 163, 255),
    rgb(255, 122, 66),
    rgb(183, 29, 60)
  );
  /* transform: scale(1.25); */
  transform-origin: center;
  filter: blur(8px) contrast(1.25);
  /* animation: spin 8s linear infinite; */
  z-index: 0;
}

.hero_equation .eq_card {
  position: relative;
  z-index: 1;
  overflow: visible;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: rgb(255, 255, 255);
  border-radius: 1.25rem;
  padding: 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
}
.hero_equation .eq_testimonial_avatar {
  position: absolute;
  top: 0;
  left: 1.5rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.hero_equation .eq_testimonial_avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.hero_equation .eq_testimonial_quote {
  font-size: 24px;
  color: #2b2b2b;
  line-height: 1.5;
  font-weight: 500;
  font-style: italic;

  strong {
    color: #9e214d;
    font-style: normal;
    font-weight: 700;
  }
}
.hero_equation .eq_testimonial_author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid #f0f0f0;
  padding-top: 0.625rem;
}
.hero_equation .eq_testimonial_name {
  font-size: 0.8rem;
  font-weight: 700;
  color: #1a1a1a;
  font-style: normal;
}
.hero_equation .eq_testimonial_location {
  font-size: 0.7rem;
  color: #aaa;
  font-style: normal;
}
.hero_equation .eq_pills {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: 0.375rem;
  ul {
    padding-top: 8px;
    list-style-type: none;
    display: flex;
    flex-shrink: 0;
    height: fit-content;
    animation: slide 20s infinite linear reverse forwards;
    li {
      white-space: nowrap;
      flex-shrink: 0;
      border-radius: 100rem;
      margin-right: 6px;
      height: auto;
      width: auto;
      padding: 4px 12px;
      font-size: 14px;
      background-color: rgb(255, 228, 233);
      color: #4a001a;
    }
  }
  &::before {
    width: 24px;
    height: 100%;
    z-index: 3;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(
      to right,
      rgb(255, 255, 255),
      rgba(255, 255, 255, 0)
    );
  }
  &::after {
    width: 24px;
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(
      to left,
      rgb(255, 255, 255),
      rgba(255, 255, 255, 0)
    );
  }
  &:hover ul {
    animation-play-state: paused;
  }
}
/* --- END OF HERO SECTION STYLES --- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --- TEXT CAROUSEL SECTION STYLES --- */
@keyframes slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}
.text_carousel_section {
  padding: 0px var(--page_margin);

  .text_carousel_wrapper {
    cursor: default;
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    position: relative;
    display: flex;
    height: auto;
    overflow: hidden;
    align-items: center;

    ul {
      position: relative;
      display: flex;
      align-items: center;
      list-style-type: none;
      /* gap: 2.5rem; */
      width: fit-content;
      animation: slide 30s infinite linear reverse forwards;
      li {
        font-size: 0.875rem;
        font-size: 1rem;
        font-weight: 400;
        margin-left: 2.5rem;
        white-space: nowrap;
        text-wrap: nowrap;
        color: rgb(77, 77, 77);
        transition: all 200ms;
        position: relative;
        &:hover {
          scale: 1.5;
          color: black;
        }
      }
    }

    &:before {
      pointer-events: none;
      content: "";
      display: flex;

      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 100%;
      background: linear-gradient(to right, white, rgba(255, 255, 255, 0));
      z-index: 1;
    }
    &:after {
      pointer-events: none;
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 50%;
      height: 100%;
      background: linear-gradient(to left, white, rgba(255, 255, 255, 0));
      z-index: 1;
    }
  }
}

/* --- END OF TEXT CAROUSEL SECTION STYLES --- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --- DESTINATION SECTION STYLES --- */
.destination_section {
  display: none;
  padding: 80px var(--page_margin);
  padding-bottom: 0;
  .destination_container {
    max-width: 1440px;
    margin-inline: auto;
    padding-block: 48px;
    display: grid;
    /* grid-template-columns: 1fr 1fr 1fr; */
    grid-template-rows: auto;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;

    .destination_card {
      background-color: #fff;
      padding: 2rem;
      border-radius: 2rem;
      display: flex;
      gap: 12px;
      align-items: top;
      border: 1px solid #f2f2f2;
      box-shadow: 8px 8px 19px 0 rgba(77, 77, 77, 0.05);

      .checkmark_icon_wrapper {
        position: relative;
        transform-origin: center;
        transition: all 100ms;
        font-size: 0;
        img {
          transition: all 200ms;
        }
      }
      .destination_card_content {
        display: flex;
        flex-direction: column;
        gap: 8px;
        .destination_card_title {
          font-weight: 600;
          font-size: 18px;
          letter-spacing: -3%;
        }
        .destination_card_text {
          font-weight: 300;
          font-size: 14px;
          letter-spacing: -2%;
        }
      }
    }
  }
  .user_role_select_container {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column-reverse;
    gap: 24px;
    justify-content: center;
    .user_role_picker_pill_wrapper {
      position: relative;
      /* z-index: -1; */
      border-radius: 100rem;
      /* pointer-events: none; */
      overflow: hidden;

      &::after {
        content: "";
        position: absolute;
        width: 100%;
        top: 0;
        pointer-events: none;
        left: 0;
        height: 100%;
        background: conic-gradient(
          from 180deg,
          #ff9292,
          #a78bfa,
          #f472b6,
          #a80345
        );
        animation: spin 5s linear infinite;
        filter: blur(20px) contrast(1.5);
      }

      .user_role_picker_pill {
        position: relative;
        width: 100%;
        z-index: 1;
        margin: 2px;
        padding: 0.5rem;
        display: flex;
        gap: 4px;
        background-color: #fcfcfc;
        border-radius: 100rem;
        .user_role_cell_wrapper {
          position: relative;
          cursor: pointer;
          pointer-events: all;
          background: linear-gradient(to bottom, #efefef, #ffffff);
          width: fit-content;
          flex: 1;
          width: 100%;
          box-shadow:
            0 4px 18px 0 rgba(0, 0, 0, 0.12),
            inset 0 2px 12px 0 rgba(255, 255, 255, 0.401);
          border-radius: 100rem;
          padding: 2px;
          .user_role_cell {
            width: fit-content;
            text-align: center;
            position: relative;
            pointer-events: all;
            cursor: pointer;
            transition: all 200ms;
            z-index: 9;
            opacity: 1;
            box-shadow: inset 0 2px 12px 0 rgba(255, 255, 255, 0.401);
            padding: 4px 2rem;
            font-size: 20px;
            color: #333333;
            border-radius: 100rem;
            background: linear-gradient(to bottom, #ffffff, #efefef);
            &:hover {
              opacity: 50%;
              top: 2px;
            }
          }
        }
      }
    }
    .user_role_facility_text {
      font-size: 18px;
      text-align: center;
      color: #737373;
      span {
        color: #ff3079;
      }
    }
  }
}

/* --- END OF DESTINATION SECTION STYLES --- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --- ABOUT SECTION STYLES --- */

.about_section {
  padding: 80px var(--page_margin);
  padding-bottom: 0;
  overflow: hidden;
  .about_section_banner {
    max-width: 1440px;
    margin-inline: auto;
    position: relative;
    overflow: hidden;
    padding: 3rem;
    display: flex;
    align-items: end;
    width: 100%;
    height: 564px;
    background: linear-gradient(to bottom, #730028 0%, #ff87ad 45%, #fff 100%);
    border-radius: 64px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;

    .inner_container_wrapper {
      /* border: 1px solid wheat; */
      overflow: hidden;
      width: 100%;
      margin: 0 auto;
      height: 100%;
      display: flex;
      align-items: end;
      background: transparent;
      /* height: 400px; */
      .inner_container {
        display: flex;
        flex-direction: column;
        position: relative;
        align-items: center;
        justify-content: end;
        padding: 0.5rem;
        height: 40%;
        max-width: 100%;
        margin: 0 auto;
        background-color: #cd0066;
        border-radius: 2rem;

        .inner_container_items_holder {
          display: grid;
          /* position: relative; */
          z-index: 2;
          bottom: -2rem;
          /* place-items: center; */
          align-items: end;
          justify-content: center;
          font-size: 0;
          width: 100%;
          height: 230%;
          /* width: fit-content; */

          img {
            width: 80%;
            height: auto;
            margin: 0 auto;
            transition: all 400ms;
            position: relative;
            /* visibility: hidden; */
            grid-area: 1 / 1;

            &:first-child {
              width: 70%;
              transform: rotate(-20deg);
              left: -25%;
              bottom: -20%;
              z-index: 0;
            }
            &:nth-child(2) {
              transform: rotate(0deg);
              z-index: 1;
            }
            &:last-child {
              width: 70%;
              transform: rotate(20deg);
              right: -26%;
              bottom: -20%;
              z-index: 0;
            }
          }
          &:hover {
            img {
              &:first-child {
                transform: rotate(0deg) scale(0.5);
                left: 0;
                bottom: 0;
                filter: blur(15px);
              }
              &:last-child {
                transform: rotate(0deg) scale(0.5);
                filter: blur(15px);

                right: 0;
                bottom: 0;
              }
            }
          }
        }

        .inner_container_text {
          background-color: white;
          border-radius: 20px;
          padding: 12px;
          position: relative;
          z-index: 4;
          text-align: center;
          font-size: 1rem;
          font-weight: 400;
          width: 100%;
        }

        &::before {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          border-radius: inherit;
          z-index: 3;
          height: 100%;
          background: linear-gradient(to bottom, #5c002000 0%, #5c0020 65%);
        }
      }
    }

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      transform: translate(-25%, -25%);
      width: 30%;
      height: auto;

      aspect-ratio: 1 / 1;
      background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/white-radial.svg);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      transform: translate(25%, -25%);
      width: 24%;
      height: auto;
      aspect-ratio: 1 / 1;
      background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/white-radial.svg);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
  }
  .about_facilities_container {
    width: 100%;
    display: grid;
    border-radius: 3rem;
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;

    .facility_card_wrapper {
      --delay: 0s;
      animation-delay: var(--delay);
      padding: 1px;
      position: relative;
      background: linear-gradient(to bottom, #efefef, #cdcdcd);
      display: flex;
      align-items: center;
      flex: 1;
      justify-content: center;
      border-radius: 2rem;
      /* box-shadow: 12px 16px 0 0 #ffd8ee; */
      width: 100%;
      height: auto;
      transition: all 400ms;
      aspect-ratio: 1 / 1;
      &:hover {
        transform: translate(6px, 8px);
        animation-play-state: paused;
        box-shadow: none;
        .facility_card {
          box-shadow: none;
        }
      }

      .facility_card {
        width: 100%;
        height: 100%;
        transition: all 400ms;
        background-color: #fff;
        border-radius: calc(2rem - 1px);
        padding: 1rem;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        text-align: center;

        h1 {
          font-size: 4rem;
          background: linear-gradient(to bottom, #ff3079, #ffeeee);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }
        .facility_card_image_wrapper {
          font-size: 0;
          overflow: hidden;
          width: 100%;
          height: 100%;
          flex: 1;
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
          }
        }
      }
    }
    .facility_card_wrapper:nth-of-type(1) {
      --delay: 0s;
    }
    .facility_card_wrapper:nth-of-type(2) {
      --delay: 0.4s;
    }
    .facility_card_wrapper:nth-of-type(3) {
      --delay: 0.8s;
    }
    .facility_card_wrapper:nth-of-type(4) {
      --delay: 1.2s;
    }
  }
}

/* --- END OF ABOUT SECTION STYLES --- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --- KIT ITEMS SECTION STYLES --- */

.kit_items_presentation_section {
  cursor: url("https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/cursorplane.png"), auto;
  scrollbar-width: none;
  position: relative;
  pointer-events: all;
  display: flex;
  gap: 2rem;
  padding: 4rem var(--page_margin);
  height: calc(100dvh - 80px);
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  .kit_items_presentation_inner {
    margin-inline: auto;
    max-width: 1440px;
    display: flex;
    width: 100%;
    .kit_items_presentation_container {
      counter-increment: step;
      counter-reset: 1;
      flex: 1 0 auto;
      &::after {
        width: 80px;
        height: auto;
        aspect-ratio: 1/1;
        border-radius: 100rem;
        background-color: pink;
        content: counter(step);
        font-family: Poppins;
        display: grid;
        place-items: center;
        color: rgb(105, 0, 32);
        font-size: 40px;
        box-shadow: inset 4px 4px 12px white;
        border: 1px solid rgb(255, 235, 235);
        transition: all 400ms;
        top: 0%;
        left: 0%;
        transform: translateX(-50%);
        position: absolute;
      }
      &::before {
        content: "";
        position: absolute;
        height: 25%;
        width: 150px;
        top: 0;
        left: 0;
        transition: all 400ms;
        transform: translateX(-50%);
        background: linear-gradient(to top, white 0%, pink 50%, white 100%);
        border-radius: 100rem;
        border-radius: 50% / 10% 10% 90% 90%;
        filter: blur(40px);
      }
      &:nth-of-type(5),
      &:nth-of-type(6) {
        &::after,
        &::before {
          display: none;
        }
      }
      &:nth-of-type(even) {
        transition: all 400ms;
        &:hover {
          &::after {
            /* transform: translateY(-100%) translateX(50%); */
          }
        }
        flex-direction: column-reverse;
        &::after,
        &::before {
          top: 100%;
          transform: translateY(-100%) translateX(-50%);
        }
        &::before {
          border-radius: 50% 50% 50% 50% / 90% 90% 10% 10%;
        }
      }
      display: flex;
      flex-direction: column;
      align-items: center !important;
      position: relative;
      justify-content: space-between !important;
      gap: 2rem;
      width: auto;
      height: 100%;
      /* min-height: 500px; */
      aspect-ratio: 1/1;
      .presentation_image_wrapper {
        font-size: 0;
        background-color: white;
        border: 1px solid #f2f2f2;
        box-shadow: 8px 8px 19px 0 rgba(77, 77, 77, 0.05);
        aspect-ratio: 1 / 1;
        border-radius: 3rem;
        padding: 2rem;
        transition: all 400ms;
        position: relative;
        /* height: 50%; */
        flex: 1;
        height: auto;
        width: auto;
        overflow: hidden;
        img {
          width: 300px;
          height: 300px;
          width: 100%;
          height: 100%;
          object-fit: contain;
          bottom: 0;
          right: 0;
          transition: all 400ms;
          transform: translate(35%, 35%) rotate(-30deg) scale(1.5);
          position: relative;
          z-index: 2;
        }
        &::before {
          content: "";
          width: 150%;
          height: 150%;
          border-radius: 100rem;
          background-color: pink;
          box-shadow: inset 0 0 24px white;
          position: absolute;
          bottom: 0;
          transition: all 400ms;
          right: 0;
          z-index: 1;
          transform: translate(50%, 50%);
        }
      }
      .presentation_text {
        flex: 1;
        align-content: center;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
        gap: 0.5rem;
        max-width: calc(300px + 2rem);
        h2 {
          font-weight: 600;
        }
        p {
          color: rgb(70, 70, 70);
        }
      }
      &:hover {
        .presentation_image_wrapper {
          background: linear-gradwient(
            to bottom,
            #730028 0%,
            #ff87ad 45%,
            #ff87ad 100%
          );
          background-color: #950b3b;

          img {
            transform: none;
          }
          &::before {
            /* background-color: #b64269; */
          }
        }
        &::after {
          /* top: 50%; */
        }
      }
      &:has(.kit_opened_image_wrapper) {
        margin-right: 8rem;
        pointer-events: none;
        .kit_opened_image_wrapper {
          mask-image: linear-gradient(to left, white 80%, transparent);
          position: relative;
          height: 100%;
          width: 100%;
          overflow: hidden;
          img {
            transform: scale(1.5) rotate(4.25deg) translateX(64px);
            transform-origin: center;
            object-fit: contain;
            object-position: right;
            width: 100%;
            height: 100%;
          }
          &::before {
            width: 30%;
            content: "";
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            z-index: 232;
            background: linear-gradient(to left, white, transparent);
          }
        }
      }
    }
    #empty_container_for_space {
      background-color: rebeccapurple;
    }
  }
}

/* ---END OF KIT ITEMS SECTION STYLES --- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --- PLANS PRICING SECTION STYLES --- */

.plans_pricing_section {
  border-radius: 4rem;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 96px var(--page_margin);
  height: auto;
  background: linear-gradient(to bottom, #983054, #5e000000 70%);
  background: linear-gradient(to bottom, #620027 20%, #1b0009 80%);
  background-color: #4a001a;

  .global_heading_container {
    .pre_heading_pill {
      border: none;
      background: none;
      color: white;
      background-color: #ffffff22;
      box-shadow: none;
    }
    .heading {
      color: white;
    }

    .subheading {
      color: #ff98bc;
      font-size: 1rem;
    }
  }

  .plans_pricing_section_container {
    max-width: 1440px;
    scrollbar-width: 0;
    margin-inline: auto;
    display: flex;
    align-items: start;
    margin-top: 2rem;
    width: 100%;
    /* overflow-x: auto; */
    justify-content: start;
    scroll-snap-type: x mandatory;
    gap: 20px;

    .plan_pricing_card {
      scroll-snap-align: center;
      position: relative;
      overflow: hidden;
      flex: 1;
      width: 100%;
      padding: 36px;
      /* align-self: stretch; */
      border-radius: 2rem;
      height: auto;
      transition: all 200ms;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      align-items: start;
      justify-content: space-between;
      background-color: rgba(14, 14, 14, 0.81);

      .recommendation_tag {
        position: relative;
        padding: 4px 28px;
        background-color: transparent;
        border: 1px solid #cd0048;
        font-weight: 400;
        font-size: 12px;
        color: white;
        line-height: 138%;
        border-radius: 100rem;
      }

      .plan_name_and_value {
        position: relative;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        justify-content: space-between;
        padding-bottom: 12px;
        border-bottom: 1px solid #a4365d;

        .plan_name {
          color: white;
          transition: all 200ms;
          line-height: 100%;
          text-transform: uppercase;
          font-size: 36px;
        }
        .plan_value {
          line-height: 100%;
          color: #ff80ac;
          text-transform: uppercase;
          font-size: 24px;
          font-weight: 600;
        }
        &::after {
          content: "";
          position: absolute;
          bottom: -0.5px;
          left: 0%;
          width: 0px;
          margin: 0 auto;
          transition: all 400ms;
          height: 1px;
          background-color: #f983ac;
          background: linear-gradient(
            to left,
            transparent,
            #ffb4ce,
            transparent
          );
        }
      }
      .card_body_details {
        position: relative;
        list-style: none;
        width: 100%;
        padding-block: 1rem;
        display: flex;
        /* gap: 20px; */
        flex-direction: column;

        .card_plan_detail {
          span {
            display: block;
            width: 20px;
            height: 20px;
            flex-shrink: 0;
            background: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/icons/card_check_icon.svg);
            background-size: contain;
            background-position: center;
          }
          display: flex;
          gap: 8px;
          align-items: center;
          color: white;
          font-weight: 400;
          font-size: 14px;
          text-transform: uppercase;
          padding-block: 18px;
          border-bottom: 1px dashed #9797bc80;

          &:first-child {
            padding-top: 0 !important;
          }
        }

        .excluded_plan_detail {
          text-decoration: line-through;
          opacity: 24%;
        }
        .accent_on_detail {
          font-weight: 500;
          color: #ff80ac;
          font-style: italic;
          position: relative;

          &::after {
            content: "";
            inset: 0;
            position: absolute;
            background: linear-gradient(
              to right,
              transparent,
              rgba(255, 232, 239, 0.161),
              transparent
            );
            animation: waveshine 5s infinite cubic-bezier(0.47, 0, 0.745, 0.715);
          }
        }
      }

      .plan_pricing_buy_button_wrapper {
        position: relative;
        transition: all 200ms;
        padding: 2px;
        border-radius: 100rem;
        box-shadow: inset 0 2px 11.4px 0 rgba(255, 255, 255, 0.428);
        width: 100%;
        background: linear-gradient(to bottom, #ffffff, #8b8b8b);
        .plan_pricing_buy_button {
          position: relative;
          background: linear-gradient(to bottom, #d4d4d4, #fffafc);
          width: 100%;
          border-radius: 100rem;
          padding: 1rem;
          color: #1d1d1d;
          transition: all 200ms;
          margin: 0 auto;
          text-align: center;
          font-size: 1rem;
          text-transform: uppercase;
          line-height: 100%;
          font-weight: 600;
        }
        &:hover {
          opacity: 50%;
        }
      }
      &:not(:nth-child(2)) {
        background-color: rgba(14, 14, 14, 0.48);
      }
      &:nth-child(3) {
        .recommendation_tag {
          background-color: #fff;
          color: black;
          border-color: white;
        }
      }
      &:nth-child(2) {
        box-shadow:
          inset 0 0 0px 6px #f6b6b7,
          0 0 105px -27px #ff4548;
        .recommendation_tag {
          background-color: #cd0048;
        }
        .plan_name_and_value {
          .plan_value {
            color: #f6b6b7;
          }
          &::after {
            animation: waveshine 5s infinite cubic-bezier(0.47, 0, 0.745, 0.715)
              1s;
          }
        }
        .plan_pricing_buy_button_wrapper {
          position: relative;
          z-index: 3;
          background: linear-gradient(to bottom, #ffbfde, #ba2929);

          .plan_pricing_buy_button {
            background: linear-gradient(to bottom, #ff8db5, #ff6969);
            color: white;
            border-color: #a4365d;
          }
        }
        &:after {
          content: "";
          position: absolute;
          width: 100%;
          height: 15%;
          left: 0;
          bottom: 0;
          border-radius: 50% 50% 0 0;
          background-color: #ff9292b2;
          filter: blur(50px);
          z-index: 2;
        }
      }
      &:hover {
        background-color: rgba(14, 14, 14, 0.71);
        .plan_name_and_value::after {
          width: 100%;
        }
        .plan_name {
          transform: translateX(8px);
        }
        .plan_pricing_buy_button_wrapper {
          transform: translateY(5px);
          cursor: pointer;
          /* width: 90%; */
          margin: 0 auto;
        }
      }
    }
  }
  &::before {
    content: "";
    position: absolute;
    pointer-events: none;
    width: 20%;
    height: auto;
    aspect-ratio: 1 / 2.71;
    background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/prism_abstract.svg);
    background-repeat: no-repeat;
    background-size: contain;
    top: 0;
    left: 0;
    z-index: 3;
  }
  &::after {
    content: "";
    pointer-events: none;
    position: absolute;
    background-size: contain;
    background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/prism_abstract.svg);
    background-repeat: no-repeat;
    width: 15%;
    height: auto;
    aspect-ratio: 1 / 2.71;
    bottom: 0;
    right: 0;
    z-index: 3;
    transform: scale(-1, -1);
  }
  .plans_pricing_section_secure_payment_message {
    position: relative;
    color: rgba(255, 255, 255, 0.658);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
    text-align: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 300;
    margin-top: 4rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    .secure_payment_icon {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      opacity: 80%;
      position: relative;
    }
    .payment_methods {
      display: flex;
      border-radius: 1rem;
      background: linear-gradient(to bottom, #99999919, rgba(255, 255, 255, 0));
      padding: 0.25rem;
      gap: 4px;
      transform-origin: center;
      transform: scale(0.875);

      .payment_method_icon {
        font-size: 0;
      }
    }
  }
}

/* --- END OF PLAN PRICING SECTION STYLES --- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --- ABOUT BOOK AND COURSE SECTION STYLES --- */

.about_book_and_course {
  padding: 80px var(--page_margin);
  position: relative;
  z-index: 2;
  .global_heading_container {
  }

  &::before {
    content: "";
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    position: absolute;
    background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/images/starting-homeschooling-at-12.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 1rem;
    background-attachment: fixed;
    background-position: center;
    z-index: -1;
    mask-image: linear-gradient(to top, transparent, white, transparent);
  }

  .role_picker_book_course {
    margin-top: 3rem;
    cursor: pointer;
    padding: 4px;
    position: sticky;
    margin-bottom: 2rem;
    top: 86px;
    z-index: 434;
    border-radius: 18px;
    width: fit-content;
    margin-inline: auto;
    height: auto;
    display: flex;
    align-items: center;
    background: #f7f7f7;
    .pick_role {
      border-radius: 14px;
      background: transparent;
      box-shadow: none;
      transition: all 300ms;
      padding: 2px;
      span {
        display: block;
        padding: 6px 1rem;
        border-radius: 12px;
        color: #b6b6b6;
        line-height: 1.3;
        font-weight: 400;
      }
    }
    .pick_role.active {
      background: linear-gradient(to bottom, #8b8b8b48, #fff);
      box-shadow:
        inset 0 2px 11.4px 0 rgba(255, 255, 255, 0.387),
        0 4px 18px 0 rgba(0, 0, 0, 0.12);
      font-weight: 500;
      span {
        display: block;
        background: linear-gradient(to bottom, #ffffff, #efefef);
        padding: 6px 1rem;
        border-radius: 12px;
        color: #636363;
        line-height: 1.3;
        font-weight: 400;
      }
    }
  }

  .about_book_and_course_container {
    max-width: 1440px;
    margin-inline: auto;
    /* padding: 2rem; */
    /* height: 643px; */
    max-height: auto;
    /* background-color: #f7f7f7; */
    border-radius: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    .about_item_content_side_container {
      flex: 1;
      display: flex;
      overflow: hidden;
      flex-direction: column;
      gap: 1rem;
      align-items: center;
      align-self: stretch;
      width: 100%;
      min-height: 100%;
      .about_item_general_container {
        position: relative;
        flex: 1;
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        gap: 2rem;
        flex-direction: column;
        justify-content: space-between;
        align-items: start;
        background-color: #fff;
        border: 1px solid #f2f2f2;
        border-radius: 2rem;
        padding: 2rem 40px;
        .about_item_text {
          display: flex;
          flex: 1;
          flex-direction: column;
          gap: 0.5rem;
          h2 {
            font-size: 40px;
            font-weight: 700;
            line-height: 124%;
            color: transparent;
            background: linear-gradient(
              90deg,
              rgb(212, 141, 153) 10%,
              rgb(138, 10, 74) 40%
            );
            background-clip: text;
          }
          p {
            font-size: 20px;
            margin-block: 1rem;
            color: #757575;
          }
        }
        .about_item_features {
          display: flex;
          align-items: center;
          width: 100%;
          overflow: hidden;
          position: relative;
          ul {
            list-style-type: none;
            display: flex;
            flex-shrink: 0;
            height: fit-content;
            animation: slide 30s infinite linear reverse forwards;

            li {
              white-space: nowrap;
              flex-shrink: 0;
              border-radius: 100rem;
              margin-right: 4px;
              height: auto;
              width: auto;
              padding: 4px 12px;
              font-size: 14px;
              background-color: rgb(255, 228, 233);
              color: #4a001a;
            }
          }
          &::before {
            width: 24px;
            height: 100%;
            z-index: 3;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            background: linear-gradient(
              to right,
              rgb(255, 255, 255),
              rgba(255, 255, 255, 0)
            );
          }
          &::after {
            width: 24px;
            height: 100%;
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            background: linear-gradient(
              to left,
              rgb(255, 255, 255),
              rgba(255, 255, 255, 0)
            );
          }
          &:hover ul {
            animation-play-state: paused;
          }
        }
      }
      .about_item_slider_container {
        /* flex: 1; */
        width: 100%;
        /* height: 100%; */
        display: flex;
        flex-direction: column;
        gap: 2rem;
        /* max-height: 100%; */
        justify-content: space-between;
        align-items: start;
        /* align-self: stretch; */
        border: 1px solid #f2f2f2;
        background-color: #fff;
        border-radius: 2rem;
        padding: 2rem 40px;
        .about_item_slider_buttons {
          display: flex;
          gap: 0.5rem;
          .button {
            padding-inline: 24px;
          }
          #previous {
            background: none;
            color: rgb(130, 14, 37);
          }
        }
      }
    }
    .about_item_image_container {
      font-size: 0;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: end;
      min-height: 100%;
      width: 100%;
      overflow: hidden;
      align-self: stretch;
      border: 1px solid #f2f2f2;
      background-color: #fff;
      box-shadow: inset -2px 0px 24px rgba(168, 168, 168, 0.558);
      border-radius: 2rem;
      .about_item_image_wrapper {
        counter-reset: step;
        position: relative;
        font-size: 0;
        box-shadow: 2px -2px 30px 0 rgba(128, 128, 128, 0.229);
        background-color: whitesmoke;
        border-top: 1px solid white;
        border-left: 1px solid white;
        overflow: hidden;
        border-top-left-radius: 12px;
        /* height: calc(100% - 3rem); */
        height: 100%;
        width: 100%;
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          aspect-ratio: 1/1;
          object-position: center;
          animation: fadein 400ms ease;
        }
        &::after {
          /* position: absolute;
          display: none;
          width: 40px;
          aspect-ratio: 1/1;
          content: counter(step);
          color: black;
          font-size: 1rem;
          font-family: Poppins;
          font-weight: 500;
          background-color: rgb(255, 222, 222);
          display: flex;
          justify-content: center;
          align-items: center;
          border-bottom-right-radius: 10px;
          top: 0;
          left: 0; */
        }
      }
    }
  }
  .about_book_and_course_facilities_container {
    margin-top: 4rem;
    max-width: 1440px;
    margin-inline: auto;
    .about_book_and_course_facilities_list {
      width: 100%;
      list-style-type: none;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
      grid-template-rows: auto;
      gap: 0.5rem;
      .about_book_and_course_facility_item {
        display: flex;
        gap: 1rem;
        align-items: center;
        width: 100%;
        background-color: #fff;
        border: 1px solid #f2f2f271;
        transition: ALL 280ms;
        border-radius: 12px;
        padding: 12px;
        box-shadow: 4px 4px 16px 0 rgba(77, 77, 77, 0.04);
        .gear_icon {
          font-size: 0;
          img {
            width: 36px;
            height: 36px;
            transition: ALL 280ms;
          }
        }
        &:hover {
          gap: 1.25rem;
          .gear_icon {
            img {
              transform: rotate(45deg);
            }
          }
        }
      }
    }
  }
}

/* --- CURRICULUM ACCORDION --- */
.curriculum_accordion_trigger {
  cursor: pointer;
  user-select: none;
}

.curriculum_chevron_wrapper {
  display: grid;
  place-items: center;
  padding: 0.5rem;
  margin-top: 0.5rem;
  border-radius: 100%;
  background-color: rgba(255, 192, 203, 0.497);
}
.curriculum_chevron {
  transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
.curriculum_accordion_trigger.open .curriculum_chevron {
  transform: rotate(180deg);
}
.curriculum_accordion_body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.curriculum_accordion_body.open {
  max-height: 900px;
}
/* --- END OF ABOUT BOOK AND COURSE SECTION STYLES  --- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --- AUTHORS SECTION STYLES --- */

.authors_container_section {
  .global_heading_container {
    margin-inline: var(--page_margin);
  }
  position: relative !important;
  overflow: hidden;
  padding: 0px var(--page_margin);
  /* background-color: rebeccapurple !important; */
  display: flex;
  flex-direction: column;
  #corina {
    /* position: sticky; */
    /* top: 0px; */
    .author_container {
      background-attachment: scroll;
    }
  }
  #iurie {
    position: relative;
    &::after {
      /* content: ""; */
      height: 8rem;
      background: linear-gradient(to top, white 12%, transparent 100%);
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      transform: translateY(-100%);
    }
    .author_big_image_wrapper {
      font-size: 0 !important;
      img {
        transform: scaleX(1) !important;
      }
    }
    .author_container {
      overflow: hidden;
      border-top-right-radius: 0;
      flex-direction: row-reverse;
      .author_content_side {
        /* align-items: end; */
        align-items: stretch;
        .author_card {
          border-radius: 4rem 0 0 0;
          &::before {
            left: 100%;
            transform: scaleX(-1)
              translate(calc(100% - 0.5px), calc(-100% + 0.5px));
          }
          &::after {
            right: 100%;
            transform: translateX(calc(0% + 0.5px)) translateY(0.5px) scaleX(-1);
          }
        }
      }
      .author_content_side {
        flex-direction: column-reverse;
        .author_content_title,
        .author_content_subtitle {
          background-clip: text !important;
          background: linear-gradient(
            to right,
            rgba(46, 0, 11, 0.85) 0%,
            rgb(255, 133, 133) 92.5%
          );
          background: white;
        }
        .author_card {
          border-radius: 0;
          align-self: end;
          border-top-left-radius: 0;
          border-bottom-left-radius: 4rem;
          &::before {
            left: 100%;
            transform: scale(-1, -1)
              translate(calc(100% - 0.5px), calc(-100% + 0.5px));
            bottom: 0;
            top: auto;
          }
          &::after {
            right: 100%;
            transform: translateX(calc(0% + 0.5px)) translateY(-0.5px) scale(-1);
            top: 0;
          }
        }
      }
    }
  }
  .authors_section {
    padding: 80px 0px;
    background-color: #fff;
    overflow: hidden;
    .authors_container {
      display: flex;
      flex-direction: column;
      display: none;
    }
    .author_container {
      margin-inline: auto;
      max-width: 1440px;
      /* margin-top: 6rem; */
      position: relative;

      z-index: 3;
      &::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        border-bottom-right-radius: inherit;
        height: 40%;
        content: "";
        z-index: 3;
        background: linear-gradient(to top, black, rgba(0, 0, 0, 0));
      }
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 624px;
      /* flex-wrap: wrap; */
      /* height: auto; */
      border-radius: 4rem;
      background-color: #1d1d1d;
      background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/images/Author_Container_Gradient_BG.jpg);
      /* background-attachment: fixed; */
      background-repeat: no-repeat;
      background-size: cover;

      .author_content_side {
        position: relative;
        z-index: 4;
        display: flex;
        flex: 1;
        /* height: 100%; */
        flex-direction: column;
        justify-content: space-between;
        align-items: min-content;
        gap: 0;
        .author_content_text_wrapper {
          padding: 56px 80px;
          display: flex;
          flex-direction: column;
          .author_content_title {
            font-size: 40px;
            color: transparent;
            text-wrap: nowrap;
            background: linear-gradient(
              to right,
              rgba(43, 43, 43, 0) 0%,
              rgb(255, 255, 255) 1.5%
            );
            -webkit-background-clip: text;
            background-clip: text;
            font-weight: bold;
            letter-spacing: -2%;
          }
          .author_content_subtitle {
            font-weight: 300;
            color: transparent;
            background: linear-gradient(
              to right,
              rgba(45, 45, 45, 0) 0%,
              rgb(255, 255, 255) 1.5%
            );
            -webkit-background-clip: text;
            background-clip: text;
            opacity: 68%;
            font-size: 20px;
            letter-spacing: -2%;
          }
          .author_details_cards {
            display: flex;
            width: 100%;
            margin-top: 2rem;
            gap: 1rem;
            align-items: stretch;
            .author_detail_card {
              padding: 2rem;
              padding-left: 1.75rem;
              background-color: #2b2b2b84;
              text-align: left;
              border: 1px solid #2b2b2ba5;
              flex: 1;
              font-size: 14px;
              color: rgba(255, 255, 255, 0.49);
              border-radius: 2rem;
              span {
                font-weight: bold;
                font-size: 18px;
                color: white;
              }
            }
          }
        }
        .author_card {
          &::before {
            position: absolute;
            content: "";
            background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/author-card-pseudo-element.svg);
            width: 64px;
            height: 64px;
            /* background-position: center; */
            background-repeat: no-repeat;
            background-size: cover;
            aspect-ratio: 1/1;
            left: 0;
            top: 0;
            /* transform-origin: left bottom; */
            transform: translateY(calc(-100% + 0.5px)) translateX(-0.5px);
          }

          &::after {
            position: absolute;
            content: "";
            background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/author-card-pseudo-element.svg);
            width: 64px;
            height: 64px;
            /* background-position: center; */
            background-repeat: no-repeat;
            background-size: cover;
            aspect-ratio: 1/1;
            bottom: 0;
            right: 0;
            transform: translateX(calc(100% - 0.5px)) translateY(0.5px);
          }

          background-color: white;
          max-width: 522px;
          display: flex;
          flex-direction: column;
          gap: 1rem;
          position: relative;
          padding: 2rem;
          border-top-right-radius: 4rem;
          .author_card_head {
            display: flex;
            gap: 1rem;

            .author_picture_wrapper {
              position: relative;
              font-size: 0;
              img {
                width: 80px;
                aspect-ratio: 1/1;
                mask-image: linear-gradient(to bottom, white, transparent);
                border-radius: 100rem;
              }
            }
            .author_card_info {
              display: flex;
              gap: 8px;
              flex-direction: column;

              .author_card_name_role {
                .author_card_name {
                  line-height: 120%;
                  font-weight: bold;
                  font-size: 20px;
                }
                .author_card_role {
                  line-height: 120%;
                  font-size: 1rem;
                  font-weight: normal;
                  color: #2c2e34;
                }
              }
              .author_experience_socials {
                display: flex;
                gap: 4px;
                .author_experience {
                  line-height: 1.3;
                  border-radius: 100rem;
                  font-size: 12px;
                  font-weight: 500;
                  color: #b51650;
                  background-color: #ff8cb635;
                  padding: 6px 12px;
                  width: fit-content;
                }
                .author_socials {
                  display: flex;
                  font-size: 0;
                  align-items: stretch;
                  gap: 4px;

                  .author_social_wrapper {
                    font-size: 0;

                    overflow: hidden;
                    border-radius: 100rem;
                    img {
                      width: 28px;
                      height: 28px;
                      border-radius: 100rem;
                    }
                  }
                }
              }
            }
          }
          .author_card_quote {
            font-weight: 300;
            white-space: wrap;
            text-wrap: wrap;
          }
        }
      }
      .author_big_image_wrapper {
        flex: 1;
        position: relative;
        top: 0;
        overflow: visible;
        display: flex;
        justify-content: center;
        height: 100%;
        font-size: 0;
        img {
          position: relative;
          z-index: 3;
          object-fit: contain;
          transform: scale(1.12);
          /* right: 2.75rem; */
          transform-origin: bottom;
        }
        &::before {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: -5rem;
          background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/Group-60.svg);
          background-position: left;
          background-repeat: no-repeat;
        }
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          top: 4rem;
          z-index: 2;
          right: -2rem;
          background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/Frame-146.svg);
          background-position: top right;
          background-repeat: no-repeat;
        }
      }
    }
  }
}
/* --- END OF AUTHORS SECTION STYLES --- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --- BRANDING SECTION STYLES --- */

.about_company {
  position: relative;
  z-index: 11;
  overflow: hidden;
  padding: 80px var(--page_margin);
  background-color: #ffffff !important;
  .about_company_container {
    overflow: hidden;
    border: none;
    max-width: 1440px;
    margin-inline: auto;
    outline: none;
    font-size: 0;
    width: 100%;
    .video_wrapper {
      overflow: hidden;
      font-size: 0;
      border: none;
      background: #000;
      outline: none;
      border-radius: 2rem;
      aspect-ratio: 16/9;
      width: 100%;
      height: 100%;
      iframe {
        font-size: 0;
        display: block;
        transform: scale(1.01);
        position: relative;
        border: none;
        outline: none;
        width: 100%;
        height: 100%;
        transform-origin: center;
      }
    }
  }
}

/* --- END OF BRANDING SECTION STYLES --- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --- PARTNERS SECTION STYLES (2 SECTIONS) --- */

.partners_pictures {
  width: 100%;
  height: auto;
  background: linear-gradient(
    to top,
    rgb(211, 216, 255),
    rgb(255, 243, 245)
  ) !important;
  padding: 80px var(--page_margin);
  .partners_pictures_container {
    display: flex;
    max-width: 1440px;
    margin-inline: auto;
    perspective: 1200px !important;
    width: 100%;
    align-items: center;
    gap: 20px;
    .partner_picture_wrapper {
      &:first-child {
        transform: rotateY(-10deg) rotateX(5deg) rotateZ(4deg);
      }
      &:last-child {
        transform: rotateY(10deg) rotateX(-5deg) rotateZ(-4deg);
      }
      position: relative;
      z-index: 34;
      display: block;
      overflow: hidden;
      border-radius: 2rem;
      padding: 1rem;
      background-color: white !important;
      background: linear-gradient(rgb(255, 255, 255), rgb(239, 239, 239)) 0%
        0% / cover no-repeat;
      box-shadow:
        rgba(255, 255, 255, 0.39) 0px 2px 11.4px 0px inset,
        0 40px 130px rgba(188, 0, 75, 0.449);
      border: 1px solid whitesmoke;
      img {
        border-radius: 2rem;
      }
      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 20%;
        top: 0;
        transition: all 400ms;
        left: -50%;
        border-radius: 0 0 50rem 50rem;
        background-color: rgba(201, 37, 116, 0.156);
        filter: blur(50px);
        z-index: 1;
      }
      &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 20%;
        left: 50%;
        bottom: 0;
        border-radius: 50rem 50rem 0 0;
        background-color: rgba(201, 37, 116, 0.156);
        filter: blur(50px);
        z-index: 1;
      }
      .partner_picture_details {
        bottom: 0;
        left: 0;
        display: flex;
        transition: all 700ms cubic-bezier(0.16, 1, 0.3, 1);
        transform-origin: bottom left;
        padding: 2rem;
        justify-content: space-between;
        align-items: center;
        background-color: rgb(255, 255, 255);
        position: absolute;
        z-index: 234;
        width: 100%;
        overflow: hidden;
        height: 37.5%;
        margin: 2rem;
        width: calc(100% - 4rem);
        border-radius: 1rem;
        .partner_logo_wrapper {
          flex: 1;
          width: 100%;
          font-size: 0;
          img {
            object-fit: contain;
            object-position: initial;
          }
        }
      }
      font-size: 0;
      background-color: #000;
      border-radius: 3rem;
      overflow: hidden;
      flex: 1;
      height: auto;
      aspect-ratio: 1 / 1;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 400ms;
        object-position: center;
      }
      &:hover {
        img {
          transform: scale(110%);
        }
        .partner_picture_details {
          /* width: 50%; */
          /* height: 20%; */
          transform: translateY(107.5%);
          .partner_logo_wrapper {
          }
        }
      }
      :nth-of-type(2) {
        img {
          display: none !important;
        }
      }
    }
  }
}
.partners_schools_section {
  .global_heading_container {
    padding-top: 0;
    margin-top: 0;
    .subheading {
      /* color: white; */
    }
  }
  padding: 3rem var(--page_margin);
  /* background: linear-gradient(to bottom, #620027 20%, #1b0009 80%);
  background-color: rgba(0, 0, 0, 0);
  background-color: #4a001a; */
  .partners_schools_container {
    max-width: 1440px;
    margin-inline: auto;
    display: grid;
    align-content: center;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-template-rows: repeat(auto);
    justify-content: center;
    gap: 1rem;
    .partner_school_wrapper {
      display: flex;
      padding: 1rem;
      border-radius: 1rem;
      transition: all 300ms;
      background-color: white;
      border: 2px solid rgb(224, 224, 224);
      border: 2px solid #f2f2f2;
      box-shadow: 8px 8px 19px 0 rgba(77, 77, 77, 0.05);
      aspect-ratio: 16/9;
      width: 100%;
      height: 100%;
      img {
        transition: all 300ms;
        object-fit: contain !important;
        width: 100%;
        height: 100%;
        object-position: center;
      }
      &:hover {
        border: 2px solid rgb(199, 55, 98);
        box-shadow: 1px 1px 4px 0 rgba(77, 77, 77, 0.05);
        img {
          scale: 0.95;
        }
      }
    }
  }
}

/* --- END OF PARTNERS SECTION STYLES (2 SECTIONS) --- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --- REVIEWS SECTION STYLES --- */

.reviews_carousel_section {
  .global_heading_container {
    overflow: visible;
    padding-bottom: 5rem;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      width: 14vw;
      height: auto;
      aspect-ratio: 1/1;
      transform: translateY(-14%);
      background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/Frame-74.svg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      left: 0;
      top: 0;
    }
    &::after {
      content: "";
      position: absolute;
      width: 10vw;
      height: auto;
      aspect-ratio: 1/1;
      background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/Frame-73.svg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      right: 0;
      top: 0;
    }
  }
  padding: 80px var(--page_margin);
  .reviews_carousel_container {
    position: relative;
    margin-inline: auto;
    max-width: 1440px;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    /* border: 1px solid black; */
    height: 596px;
    overflow: hidden;
    .reviews_carousel_column {
      display: flex;
      flex-direction: column;
      /* overflow: hidden; */
      width: 100%;
      height: auto;
      .reviews_carousel_animable_col {
        animation: caro_rev 50s linear infinite reverse forwards;
        display: flex;
        flex-direction: column;
        height: max-content;
        width: 100%;
        .review_card {
          display: flex;
          flex-direction: column;
          gap: 2rem;
          white-space: initial;
          border: 1px solid rgb(235, 235, 235);
          padding: 36px;
          box-shadow: 4px 4px 15px 0 whitesmoke;
          border-radius: 1rem;
          background-color: white;
          margin-bottom: 20px;
          /* width: 400px; */

          .review_card_header {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .reviewer_info {
              display: flex;
              align-items: center;
              gap: 10px;
              .reviewer_image {
                font-size: 0;
                img {
                  width: 2rem;
                  height: 2rem;
                  border-radius: 50%;
                  background-color: gray;
                  object-position: center;
                  object-fit: cover;
                }
              }

              .reviewer_details {
                .reviewer_name {
                  font-size: 16px;
                  line-height: 130%;
                  font-weight: 500;
                }

                .reviewer_role {
                  font-size: 12px;
                  line-height: 130%;
                  color: #d8014d;
                }
              }
            }
          }
          .review_text {
            font-size: 0.875rem;
            max-width: 800px;
            opacity: 70%;
          }
        }
      }
      &:hover {
        .reviews_carousel_animable_col {
          animation-play-state: paused;
        }
      }
      &:nth-child(2) {
        .reviews_carousel_animable_col {
          animation-duration: 25s;
        }
      }
    }
    &::before {
      pointer-events: none;
      z-index: 4;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 40%;
      background: linear-gradient(to bottom, white, transparent);
    }
    &::after {
      content: "";
      pointer-events: none;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 40%;
      background: linear-gradient(to top, white, transparent);
    }
  }
  .video_reviews_container {
    &::before {
      content: "";
      position: absolute;
      pointer-events: none;
      width: 20%;
      height: auto;
      aspect-ratio: 1 / 2.71;
      background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/prism_abstract.svg);
      background-repeat: no-repeat;
      background-size: contain;
      top: 0;
      left: 0;
      z-index: 3;
    }
    &::after {
      content: "";
      pointer-events: none;
      position: absolute;
      background-size: contain;
      background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/prism_abstract.svg);
      background-repeat: no-repeat;
      width: 20%;
      height: auto;
      aspect-ratio: 1 / 2.71;
      bottom: 0;
      right: 0;
      z-index: 3;
      transform: scale(-1, -1);
    }
    position: relative;
    max-width: 1440px;
    margin-inline: auto;
    overflow: hidden;
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, #983054, #5e000000 70%);
    background: linear-gradient(to bottom, #620027 20%, #1b0009 80%);
    background-color: #4a001a;
    padding: 2rem 20px;
    border-radius: 3rem;
    gap: 1.5rem;
    .wrapper_virew {
      p {
        font-size: 24px;
        color: #ffffff;
        font-weight: 500;
        text-align: center;
      }
      display: flex;
      flex-direction: column;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      row-gap: 1rem;
      .role_picker_video_review {
        cursor: pointer;
        padding: 4px;
        border-radius: 18px;
        width: fit-content;
        height: auto;
        display: flex;
        align-items: center;
        background: #f7f7f7;
        .pick_role {
          border-radius: 14px;
          background: transparent;
          box-shadow: none;
          transition: all 300ms;
          padding: 2px;
          span {
            display: block;
            padding: 6px 1rem;
            border-radius: 12px;
            color: #b6b6b6;
            line-height: 1.3;
            font-weight: 400;
          }
        }
        .pick_role.active {
          background: linear-gradient(to bottom, #8b8b8b48, #fff);
          box-shadow:
            inset 0 2px 11.4px 0 rgba(255, 255, 255, 0.387),
            0 4px 18px 0 rgba(0, 0, 0, 0.12);
          font-weight: 500;
          span {
            display: block;
            background: linear-gradient(to bottom, #ffffff, #efefef);
            padding: 6px 1rem;
            border-radius: 12px;
            color: #636363;
            line-height: 1.3;
            font-weight: 400;
          }
        }
      }
    }
    .videos_container {
      position: relative;
      display: flex;
      width: 100%;
      display: flex;
      gap: 20px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 0.5rem;
      scrollbar-width: none;
      /* border-radius: 2rem; */
      &::-webkit-scrollbar {
        display: none;
      }
      .video_review_card {
        &::before {
          content: "";
          position: absolute;
          width: 100%;
          height: 20%;
          top: 0;
          transition: all 400ms;
          left: -50%;
          border-radius: 0 0 50rem 50rem;
          background-color: rgba(201, 37, 116, 0.156);
          filter: blur(50px);
          z-index: 1;
        }
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 20%;
          left: 50%;
          bottom: 0;
          border-radius: 50rem 50rem 0 0;
          background-color: rgba(201, 37, 116, 0.156);
          filter: blur(50px);
          z-index: 1;
        }
        flex: 1;
        overflow: hidden;
        background: linear-gradient(to top, #1f020865, #5c06187e);
        box-shadow: inset 0 2px 11.4px 0 rgba(255, 255, 255, 0.038);
        /* padding: 1rem; */
        display: flex;
        border: 1px solid rgba(255, 255, 255, 0.096);
        align-items: center;
        justify-content: center;
        aspect-ratio: 9/16;
        overflow: hidden;
        position: relative;
        border-radius: 2rem;
        background-repeat: no-repeat;
        background-size: cover;
        scroll-snap-align: center;
        iframe {
          display: block;
          position: relative;
          z-index: 2;
          width: 100%;
          height: 100%;
          border-radius: 1rem;
        }
        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }
    }
    .video_sliders {
      display: flex;
      align-items: center;
      width: 100%;
      justify-content: center;
      gap: 1rem;
      .video_slider {
        box-shadow:
          inset 0 2px 11.4px 0 rgba(255, 255, 255, 0.387),
          0 4px 18px 0 rgba(0, 0, 0, 0.12);
        width: 48px;
        height: 48px;
        display: block;
        transition: all 200ms;
        border-radius: 100rem;
        background-color: whitesmoke;
        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iIzJiMmIyYiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xNjUuNjYsMjAyLjM0YTgsOCwwLDAsMS0xMS4zMiwxMS4zMmwtODAtODBhOCw4LDAsMCwxLDAtMTEuMzJsODAtODBhOCw4LDAsMCwxLDExLjMyLDExLjMyTDkxLjMxLDEyOFoiPjwvcGF0aD48L3N2Zz4=);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 50%;
        &:nth-child(2) {
          rotate: 180deg;
        }
        &:hover {
          transform: scale(0.95);
        }
      }
      .video_slider.disabled {
        opacity: 0.3 !important;
        pointer-events: none;
        cursor: default;
      }
    }
  }
}

/* --- END OF REVIEWS SECTION STYLES --- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --- FAQ SECTION STYLES --- */

.faq_section {
  padding: 80px var(--page_margin);
  background: linear-gradient(to bottom, white, #e7e9eb);
  border-bottom-left-radius: 4rem;
  border-bottom-right-radius: 4rem;
  .faq_section_container {
    max-width: 1440px;
    margin-inline: auto;
    display: flex;
    position: relative;
    justify-content: space-between;
    gap: 20px;
    align-items: start;

    .faq_container {
      z-index: 4;
      flex: 1;
      position: relative;
      left: 2rem;

      .global_heading_container {
        align-items: start;
        .pre_heading_pill {
          width: fit-content !important;
          margin-left: 0 !important;
        }
        .heading {
          align-items: start;
          margin-top: 0;
          text-align: left;
          font-size: 2rem;
        }

        .subheading {
          align-items: start;
          margin-top: 0;
          text-align: left;
          font-size: 1rem;
        }
      }
    }

    .faq_questions_wrapper {
      padding: 1rem;
      width: 100%;
      border-radius: 2rem;
      background: linear-gradient(to bottom, #ffffff8b, #ffffff1f);
      border: 1px solid #e7e7e7;
      backdrop-filter: blur(2rem);
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      gap: 8px;

      details {
        summary {
          border-radius: 1rem;
          overflow: hidden;
          width: 100%;
          border: 1px solid rgb(255, 255, 255);
          background-color: white;
          box-shadow: 8px 8px 19px 0 rgba(77, 77, 77, 0.05);
          border-bottom: 0;
          position: relative;
          list-style: none;
          list-style-position: inside;
          list-style-position: end;
          cursor: pointer;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 1rem;
          font-weight: 500;
          padding: 1rem;

          .dropdown_icon {
            background-image: url("https://static.thenounproject.com/png/4890377-200.png");
            font-size: 0;
            background-position: center;
            background-size: 100%;
            transform: rotate(-90deg);
            transition: all 200ms;
            background-repeat: no-repeat;
            height: 1rem;
            width: 1rem;
          }
          &::before {
            content: "";
            position: absolute;
            border-radius: 100rem;
            left: 0;
            bottom: 0;
            width: 30%;

            transform: translate(-50%, 80%);
            height: auto;
            aspect-ratio: 1/1;
            background-color: #ced1d9;
            opacity: 50%;
            filter: blur(50px);
          }
        }

        .faq_answer {
          padding: 12px 12px 12px 12px;
          font-size: 1rem;
          color: #960644;
          border: inherit;
          border-bottom-left-radius: 1rem;
          border-bottom-right-radius: 1rem;
          background-color: rgb(250, 243, 244);
          border-top: 0;
          transition: opacity 500ms ease-in-out;
          opacity: 0.0001;

          p {
            margin: 0;
            padding: 0;
          }

          p + p {
            margin-top: 12px;
          }
        }

        &[open] summary {
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;

          .dropdown_icon {
            transform: rotate(0deg);
          }
        }

        &:not([open]) .faq_answer {
          opacity: 0.0001;
        }

        &[open] .faq_answer {
          opacity: 1;
        }
      }
    }
    .faq_image_wrapper {
      position: sticky;
      top: 80px;
      font-size: 0;
      mask-image: linear-gradient(to bottom, white, transparent);
      height: 600px;
      /* align-self: stretch; */
      flex: 1;
      transform: translateX(-2rem);
      filter: contrast(1.4) brightness(0.9);
      width: 100%;
      /* background-color: #555555; */
      border-radius: 2rem;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;

      z-index: 3;
      img {
        width: 100%;
        height: 100%;
        position: relative;
        border-radius: inherit;
        object-fit: cover;
        object-position: center;
      }
      &::after {
        position: absolute;
        content: "";
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50%;
        background: linear-gradient(to top, #e7e9eb, #e7e9eb00);
      }
    }
  }
}

/* --- END OF FAQ SECTION STYLES --- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --- BANNER SECTION STYLES --- */

.banner_section_pre_footer {
  background: linear-gradient(
    to bottom,
    rgba(154, 154, 154, 100%),
    rgb(255, 255, 255)
  );
  background: #fff;
  position: sticky;
  top: 0;
  overflow: hidden;
  height: 100dvh;
  width: 100%;
  padding: var(--page_margin);
  display: flex;
  justify-content: center;
  align-items: center;

  .banner_section_container_wrapper {
    position: relative;
    width: 100%;
    .banner_section_container {
      transform-origin: center center;
      transform: scale(0.5); /* start small */
      will-change: transform;
      position: relative;
      overflow: hidden;
      width: 100%;
      max-width: 1440px;
      margin-inline: auto;
      border-radius: 48px;
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 3rem;
      padding: 4rem 2rem;
      background-color: #12111b;
      background: linear-gradient(to right, #9e214d, #12111b);
      /* height: 330px; */
      /* height: 44vh; */

      .global_heading_container {
        .heading {
          font-size: 40px;
          color: white;
        }
        .subheading {
          color: #ffffff8e;
          margin-top: 1rem;
          font-style: italic;
          font-size: 20px;
        }
      }

      .banner_section_button {
        font-size: 18px;
        padding: 12px 24px;
      }
      &::before {
        position: absolute;
        pointer-events: none;
        left: 0;
        bottom: 0;
        mix-blend-mode: luminosity;
        background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/prismforbanner.svg);
        background-position: bottom;
        background-size: contain;
        background-repeat: no-repeat;
        content: "";
        width: 80%;
        height: 40%;
        transform: scale(-1, 1) translateX(40%);
      }
      &::after {
        position: absolute;
        pointer-events: none;
        right: 0;
        top: 0;
        mix-blend-mode: luminosity;
        background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/prismforbanner.svg);
        background-position: bottom;
        transform: rotate(180deg);
        background-size: contain;
        background-repeat: no-repeat;
        content: "";
        width: 80%;
        height: 40%;
        transform: scale(1, -1) translateX(40%);
      }
    }
    &::before {
      position: absolute;
      pointer-events: none;
      left: 0;
      top: 0rem;
      background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/Frame-87.svg);
      background-position: left;
      background-size: contain;
      transform: translateX(-8%);
      background-repeat: no-repeat;
      content: "";
      z-index: 43;
      width: 100%;
      height: 64%;
    }
    &::after {
      position: absolute;
      pointer-events: none;
      right: 0;
      bottom: 0rem;
      background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/Frame-88.svg);
      background-position: right;
      background-size: contain;
      transform: translateX(5%);
      transition: all 200ms;
      background-repeat: no-repeat;
      content: "";
      width: 100%;
      height: 40%;
    }
  }
}

/* --- END OF BANNER SECTION STYLES --- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --- CONTACT FORM SECTION --- */

.contact_form_section {
  &::before {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/images/bgformcrew.JPG);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    filter: grayscale();
    background-attachment: fixed;
    mix-blend-mode: overlay;
  }
  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 0;
    top: 0;
    left: 0;
    pointer-events: none;
    font-size: 0;
    width: 100%;
    height: 45%;
    background: linear-gradient(
      to bottom,
      rgb(255, 255, 255),
      rgba(255, 255, 255, 0)
    );
  }
  overflow: hidden;
  /* position: sticky; */
  position: relative;
  z-index: 13;
  top: 0;
  height: auto;
  z-index: 32;
  background: linear-gradient(
    to top,
    rgba(154, 154, 154, 100%),
    rgba(255, 255, 255, 100%)
  );
  width: 100%;
  padding: 80px var(--page_margin);
  padding-bottom: 0;
  .global_heading_container {
    position: relative;
    z-index: 5;
    .heading {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      font-size: 36px;
      line-height: 1.3;
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 64px;
        height: 48px;
        background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/plane.svg);
        background-repeat: no-repeat;
        background-size: contain;
        transform: translateY(-150%) translateX(-50%);
      }
    }
    .subheading {
      font-size: 18px;
      font-weight: normal;
      color: black;
      opacity: 64%;
      margin-top: 4px;
    }
  }
  .contact_form_container {
    /* position: relative; */
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    height: 100%;
    margin-top: 108px;
    display: flex;
    /* transform: scale(0.5); */
    transform-origin: bottom;
    justify-content: center;
    &::before {
      position: absolute;
      content: "";
      pointer-events: none;
      top: 50%;
      left: 0;
      width: 40%;
      height: auto;
      aspect-ratio: 16/9;
      background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/plane.svg);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: left;
      transform: scale(-1, 1) translateY(0%) translateX(50%);
      filter: grayscale() blur(4px);
      mix-blend-mode: luminosity;
    }
    &::after {
      position: absolute;
      content: "";
      pointer-events: none;
      top: 50%;
      right: 0;
      width: 20%;
      height: auto;
      aspect-ratio: 16/9;
      background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/plane.svg);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: right;
      transform: translateY(-50%);
      filter: grayscale() blur(8px);
      mix-blend-mode: luminosity;
    }

    .contact_form {
      position: relative;
      overflow: visible;
      mix-blend-mode: normal;
      z-index: 20;
      &::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/phone_mock.svg);
        width: 100%;
        height: 100%;
        background-position: bottom;
        mix-blend-mode: normal;
        background-size: contain;
        background-repeat: no-repeat;
        opacity: 100%;
        transform-origin: bottom;
        filter: blur(1px);
        z-index: -20;
        transform: scale(1.175);
      }
      padding: 1rem 1rem;
      padding-bottom: 3rem;
      max-width: 400px;
      background-color: white;
      height: auto;
      display: flex;
      gap: 12px;
      flex-direction: column;
      align-items: center;
      .form_row {
        width: 100%;
        position: relative;
        z-index: 543453;
        height: auto;
        display: flex;
        flex-direction: column;
        label {
          font-size: 14px;
          font-weight: 500;
          line-height: 1.3;
          letter-spacing: -2%;
          span {
            color: red;
          }
        }
        &:has(input[type="checkbox"]) {
          flex-direction: row-reverse;
          justify-content: center;
          padding-top: 0.5rem;
          gap: 0.5rem;
          label {
            font-weight: 300;
            opacity: 50%;
            letter-spacing: -2%;
            line-height: 1.3;
            font-size: 12px;
          }
          input[type="checkbox"] {
            accent-color: #b0184d;
          }
        }
        input[type="text"] {
          all: unset;
          font-size: 14px;
          font-weight: 300;
          opacity: 85%;
          padding-top: 12px;
          padding-bottom: 6px;
          border-bottom: 1px solid rgb(224, 224, 224);
          &::placeholder {
            font-weight: 300;
            font-size: 14px;
            letter-spacing: -2%;
            line-height: 1.3;
          }
        }
        .textarea_wrapper {
          width: 100%;
          height: 92px;
          overflow: hidden;
          background-color: white;
          border: 1px solid #e8e8e8;
          box-shadow: 4px 4px 17.5px 0 rgba(0, 0, 0, 0.079);
          margin-top: 8px;
          padding: 10px;
          padding-right: 0;
          border-radius: 1rem;

          textarea {
            all: unset;
            font-size: 14px;
            white-space: pre-wrap;
            word-wrap: break-word; /* legacy */
            overflow-wrap: break-word; /* modern */
            /* overflow: hidden; */
            white-space: wrap;
            resize: vertical auto;
            background-color: white;
            width: 100%;
            height: 100%;
            &::placeholder {
              font-weight: 300;
              font-size: 14px;
              letter-spacing: -2%;
              line-height: 1.3;
            }
          }
        }
        #form_submit_button {
          cursor: pointer;
          z-index: calc(infinity);
          padding-block: 0.75rem;
          position: relative;
          font-family: inherit;
          transition: all 200ms;
          &:hover {
            opacity: 70%;
          }
        }
      }
    }
  }
}

/* --- END OF CONTACT FORM SECTION --- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --- FOOTER STYLES --- */

.footer_section {
  &::after {
    content: "";
    position: absolute;
    z-index: 4;
    bottom: 0;
    top: 0;
    left: 0;
    pointer-events: none;
    width: 100%;
    height: 10%;
    transform: translateY(calc(-100% + 1px));
    background: linear-gradient(to top, #2f2f2f, rgba(255, 255, 255, 0));
  }
  position: relative;
  z-index: 9998;
  background-color: #151517;
  padding: 80px 0 0 0;

  .footer_container {
    gap: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-inline: auto;
    max-width: 1440px;
    align-items: stretch;
    padding-inline: var(--page_margin);

    .footer_branding_socials {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      justify-content: space-between;

      .footer_logo {
        font-size: 0;
        img {
          object-fit: contain;
        }
      }
      .footer_slogan {
        font-size: 12px;
        font-weight: 200;
        color: rgba(255, 255, 255, 0.616);
        span {
          color: white;
        }
      }
      .footer_socials {
        display: flex;
        font-size: 0;
        gap: 4px;
        .social_icon {
          transition: all 200ms;
          font-size: 0;
          &:hover {
            opacity: 60%;
          }
        }
      }
    }

    .footer_cols_wrapper {
      padding: 1px;
      background: linear-gradient(to bottom, #2c2e34 0%, #151517 55%);

      border-radius: 1rem;
    }
    .footer_cols {
      background: linear-gradient(to bottom, #99999919, rgba(255, 255, 255, 0));
      background: linear-gradient(to bottom, #1c1c1f, #151517);
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
      gap: 2rem;
      max-width: 100%;
      padding: 20px 28px;
      border-radius: 1rem;

      .footer_col {
        position: relative;
        z-index: 4;
        display: flex;
        flex-direction: column;
        gap: 20px;

        .footer_col_name {
          color: white;
          font-weight: 600;
          align-items: center;
          display: flex;
          gap: 0.5rem;
          span {
            font-size: 0;
          }
        }

        .footer_col_content {
          display: flex;
          flex-direction: column;
          .footer_col_content_wrapper {
            display: flex;
            gap: 0.5rem;
          }
          .footer_content_text {
            white-space: nowrap;
            color: rgba(255, 255, 255, 0.75);
            text-decoration: none;
            font-size: 14px;
            font-weight: 300;
            &:hover {
              opacity: 60%;
            }
          }
          &#footer_verify_certificate_col_content {
            gap: 0.5rem;
            p {
              opacity: 50%;
              color: white;
              font-size: 14px;
              font-weight: 300;
            }
            .footer_certification_check {
              display: flex;
              gap: 4px;
              padding: 4px;
              border-radius: 100rem;
              border: 1px solid white;

              input[type="text"] {
                padding: 0.5rem 0;
                flex: 1;
                text-align: center;
                border-radius: 100rem;
                background-color: white;
                padding: 8px 0;
                border: 0px solid transparent;
                outline: none;
                &::placeholder {
                  font-family: Poppins;
                  color: #c0c0c0;
                  font-weight: 400;
                  font-size: 14px;
                }
              }
              button[type="submit"] {
                cursor: pointer;
                font-size: 14px;
                font-weight: 400;
                font-family: poppins;
                padding: 8px 12px;
                border-radius: 100rem;
                color: white;
                background: linear-gradient(to right, #9e214d, #ff4d8c);
                border: 1px solid #de628e;
                transition: all 200ms;

                &:hover {
                  opacity: 60%;
                }
              }
            }
          }
        }
      }
    }
  }

  .footer_credential_container {
    padding-inline: var(--page_margin);
    margin-inline: auto;
    max-width: 1440px;
    margin-top: 2rem;
    display: flex;
    position: relative;
    justify-content: space-between;
    padding-top: 0.5rem;
    /* border-top: 1px solid #8383832d; */
    align-items: center;
    p {
      color: gray;
      font-size: 14px;
    }
    .footer_payment_methods {
      display: flex;
      border-radius: 1rem;
      background: linear-gradient(to bottom, #99999919, rgba(255, 255, 255, 0));
      padding: 0.5rem;
      gap: 4px;

      .payment_method_icon {
        font-size: 0;
      }
    }
    &::after {
      content: "";
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 0;
      width: calc(100% - 2 * var(--page_margin));
      height: 1px;
      background-color: #8383832d;
    }
  }

  .footer_big_logo {
    margin-top: 3rem;
    position: relative;
    mix-blend-mode: overlay;
    width: 100%;
    height: 100%;
    font-size: 0;
    left: 0;
    bottom: 0;
    img {
      aspect-ratio: auto;
      width: 100%;
    }
    &::after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      background: linear-gradient(to top, #151517, #15151700);
      left: 0;
      top: 0;
      z-index: 303;
    }
  }
}

/* --- END OF FOOTER STYLES --- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --- TRUST METRICTS SECTION STYLES --- */

.trust_metrics_section {
  /* overflow-x: hidden; */
  overflow: hidden;
  width: 100%;
  background: linear-gradient(to bottom, white, rgb(255, 243, 245)) !important;
  height: auto;
  padding: 0px var(--page_margin);

  .trust_metrics_container_wrapper_auxiliary {
    max-width: 1440px;
    overflow: hidden;
    margin-inline: auto;
    position: relative;
    width: 100%;
    &::before {
      content: "";
      position: absolute;
      background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/radial-f683.svg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      bottom: 0;
      left: 0;
      transform: translate(-35%, 35%);
      width: 17.5vw;

      height: 17.5vw;
      aspect-ratio: 1 / 1;
    }
    &::after {
      content: "";
      position: absolute;
      background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/radial-f683.svg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      top: 0;
      right: 0;
      transform: translate(35%, -35%);
      width: 17.5vw;

      height: 17.5vw;
      aspect-ratio: 1 / 1;
    }
  }

  .trust_metrics_container_wrapper {
    padding: 6px;
    position: relative;
    overflow: hidden;
    z-index: 3;
    border-radius: 26px;

    .trust_metrics_container {
      width: 100%;
      border-radius: 20px;
      padding: 6px;
      gap: 10px;
      background-color: #fff;

      .trust_metric {
        width: 100%;
        border-radius: 1rem;
      }
    }
    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: conic-gradient(
        from 180deg,
        #ff9292,
        #a78bfa,
        #f472b6,
        #a80345
      );
      animation: spin 5s linear infinite;
      filter: blur(30px) contrast(1.5);
    }
  }
}

@keyframes spin {
  to {
    transform: rotate(-360deg);
  }
}
@keyframes spin2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* --- END OF TRUST METRICTS SECTION STYLES --- */
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --- AUTHORS SECTION STYLES --- */

.authors {
  padding: 4rem var(--page_margin);
  padding-top: 0;
}

.authors__wrap {
  max-width: 1440px;
  margin: 0 auto;
}

/* ROWS */
.authors__row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.authors__row--big {
}

/* BIG CARD */
.author-card--big {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 1rem;

  &:nth-of-type(even) {
    flex-direction: column-reverse;
  }
}

.author-card__media {
  position: relative;
  font-size: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 40px;
  overflow: hidden;
}

.author-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.author-card__body {
  /* flex: 1; */
  padding: 18px 24px;
  border-radius: 32px;
  align-content: center;
  position: relative;
  overflow: hidden;
  width: 100%;
  box-shadow: 8px 8px 19px 0 #0e003f0f;
  background-color: white;
  border: 1px solid rgb(255, 255, 255);
  &::before {
    content: "";
    position: absolute;
    border-radius: 100rem;
    left: 0;
    bottom: 0;
    width: 50%;

    transform: translate(-50%, 50%);
    height: auto;
    aspect-ratio: 1/1;
    background-color: #ced1d9;
    opacity: 50%;
    filter: blur(50px);
  }
}

.author-card__name {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -2%;
  line-height: 130%;
  /* letter-spacing: 0.2px; */
}

.author-card__sub {
  color: #4b4b4b;
  letter-spacing: -2%;
  line-height: 130%;
  font-size: 14px;
}

.author-card__role {
  color: #ce0064;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -2%;
  font-weight: 400;
  margin-top: 8px;
}

@media (max-width: 1220px) {
  .navbar {
    overflow: hidden;
    padding-block: 18px;
    .navbar_container {
      .navbar_logo_and_links {
        .navbar_logo {
          img {
            width: 104px;
          }
        }
        .navbar_links {
          a {
            display: none;
          }
        }
      }
      .navbar_buttons {
        .navbar_button {
          display: none;
        }
        .nav_burger_menu {
          display: block;
        }
      }
    }
  }

  .plans_pricing_section {
    .plans_pricing_section_container {
      flex-direction: column;
    }
  }

  .about_book_and_course {
    .about_book_and_course_container {
      flex-direction: column;
      height: auto;
      .about_item_image_container {
        .about_item_image_wrapper {
          width: 100%;
          height: 100%;
        }
      }

      .about_item_slider_container .about_item_slider_buttons {
        width: 100%;
        .button {
          &:hover {
            opacity: 100% !important;
          }
          width: 100%;
          align-items: center;
          justify-content: center;
          text-align: center;
        }
      }
    }
  }

  .authors_container_section {
    #iurie {
      .author_container {
        border-top-right-radius: 0 !important;
        border-top-left-radius: 0 !important;
        .author_card {
          border-top-right-radius: 0;
          border-top-left-radius: 0;
        }
        .author_big_image_wrapper {
          overflow: visible !important;
        }
      }
    }
    .authors_section {
      padding-block: 0;
      .author_container {
        border-radius: 3rem;
        height: auto;
        background-size: cover;
        background-position: bottom left;
        background-attachment: scroll;
        overflow: hidden;
        padding: 0;
        flex-direction: column !important;
        .author_content_side {
          .author_content_text_wrapper {
            text-align: center;
            margin-block: 2rem;
            padding: 2rem;
            .author_content_title {
              text-wrap: wrap;
              font-size: 28px;
              white-space: wrap;
              background: transparent;
              color: white;
            }
            .author_content_subtitle {
              background: transparent;
              color: white;
              font-size: 16px;
            }
          }
          .author_card {
            max-width: 100%;
            border-bottom-left-radius: 64px;
            z-index: 2;
            position: relative;

            box-shadow: 0 0 64px 8px rgb(19, 1, 76);
            /* padding-right: 0; */

            /* border-top-right-radius: 64px; */
            &::after {
              /* all: initial !important; */
              /* background-color: red; */
              bottom: 0;
              transform: translateY(calc(100% - 0.5px)) scale(-1);
              right: 0;
            }
          }
        }
        .author_big_image_wrapper {
          position: relative;
          /* justify-content: start; */
          justify-content: start;
          /* overflow: hidden; */
          img {
            object-position: right;
            /* transform: scale(1.075); */
            filter: hue-rotate(-15deg);
            transform: scale(0.91);
          }
          &:after {
            top: -4rem;
          }
        }
      }
    }
  }
}

/* Responsive tweaks */
@media (max-width: 980px) {
  :root {
    --page_margin: 2rem;
  }
  .author-card--big {
    min-width: 0;
  }
  .author-card__media {
    width: 240px;
    height: 240px;
  }
}

@media (max-width: 768px) {
  :root {
    --page_margin: 1.5rem;
  }

  .hero_equation {
    flex-direction: column;
    width: 100% !important;
    .eq_card .eq_testimonial_quote {
      font-size: 20px;
    }
    .eq_pills {
      ul {
        padding-top: 8px;
        li {
          font-size: 14px;
        }
      }
    }
  }
  .hero_bg_image {
    /* mask-image: none !important; */
    background-position: right !important;
    /* background-size: 100% 400%; */
    filter: brightness(110%);
    /* background-size: contain !important; */
    img {
      /* object-fit: contain !important; */
      object-position: calc(100% + 190px) -50px !important;
      /* object-position: -800px -200px !important; */
    }
  }

  .reviews_carousel_section {
    padding-inline: 1rem !important;
    padding-bottom: 0 !important;
    .video_reviews_container {
      &::before,
      &::after {
        width: 35% !important;
      }
      .videos_container {
        .video_review_card {
          width: 100% !important;
        }
      }
    }
  }

  .user_role_select_container {
    width: 100%;
    align-items: stretch !important;
  }

  .user_role_cell {
    padding-inline: 0px !important;
    width: 100% !important;
    flex: 1 !important;
    font-size: 20px !important;
  }

  .contact_form_section {
    .contact_form_container {
      .contact_form {
        padding-inline: 2rem !important;
        &::before {
        }
      }
    }
  }

  .about_company {
    padding-block: 40px;
    .about_company_container {
      .video_wrapper {
        aspect-ratio: 1/1;
        iframe {
        }
      }
    }
  }

  .destination_section {
    .destination_container {
      position: relative !important;
      .destination_card {
        position: sticky;
        /* padding: 1.5rem; */
        top: 80px; /* top: 16vh !important; */
        .checkmark_icon_wrapper {
          /* display: none; */
          img {
            width: 40px;
          }
        }
        .destination_card_content {
          .destination_card_title {
            /* font-size: 16px; */
          }
        }
      }

      .destination_card:not(:first-child) {
        box-shadow: none;
      }
    }
  }

  .about_book_and_course {
    padding-block: 40px;
    position: relative;
    .global_heading_container {
    }
    .about_book_and_course_container {
      padding-inline: 0;
      background-color: transparent;
      .about_item_content_side_container {
        .about_item_general_container .about_item_text {
          h2 {
            font-size: 28px;
          }
          p {
            font-size: 16px;
          }
        }
        .about_item_general_container,
        .about_item_slider_container {
          border: 1px solid #f2f2f2;
          box-shadow: 8px 8px 19px 0 rgba(77, 77, 77, 0.05);
          padding: 1.5rem;
        }
      }
    }
    .about_book_and_course_facilities_container {
      .about_book_and_course_facilities_list {
        grid-template-columns: 1fr;
      }
    }
  }

  .authors__row--big {
    flex-direction: column;

    .author-card.author-card--big {
      flex-direction: row !important;
      align-items: stretch !important;
      align-content: center !important;
      &:nth-child(even) {
        flex-direction: row-reverse !important;
        .author-card__body {
        }
      }
      .author-card__name {
        font-size: 1.25rem;
      }
      .author-card__sub {
        font-size: 14px;
      }
      .author-card__role {
        font-size: 16px;
      }
    }
  }
  .trust_metrics_section {
    .trust_metrics_container {
      flex-direction: column;
    }
  }

  .banner_section_pre_footer {
    & .banner_section_container_wrapper {
      margin: 0 auto;
      height: 75%;
      width: 100%;

      & .banner_section_container {
        height: 100%;

        &::after,
        &::before {
          width: 60vw;
          height: 60vw;
        }
      }
    }
  }

  .trust_metrics_section {
    padding-block: 0;
    & .trust_metrics_container_wrapper_auxiliary {
      &::after,
      &::before {
        width: 47.5vw;
        height: 47.5vw;
      }
    }
  }

  .banner_section_pre_footer {
    & .banner_section_container_wrapper {
      &::before,
      &::after {
        width: 40vw;
        height: 30vw;
      }
    }
  }

  .hero_section {
    /* height: 100vh; */
    background-position: left;

    .hero_section_wrapper {
      background-position: left;
      .hero_section_container {
        padding-top: 20px;
        height: auto;
        .heading {
          font-size: 32px;
          display: flex;
          flex-direction: column;
        }
        .subheading {
          font-size: 24px;
          font-weight: 600;
          opacity: 90%;
          margin-bottom: 1rem;
        }
        .users_pill {
          margin-bottom: 1.75rem;
        }

        .trust_metrics_container {
          /* flex-direction: column; */
          /* height: 208px; */
          width: 100% !important;
          justify-content: start;
          scroll-snap-type: x mandatory;
          overflow-x: scroll !important;
          .trust_metric {
            scroll-snap-align: center;
            flex: 1 0 auto !important;
            width: 80%;
            width: 100% !important;
            background-color: rgba(255, 255, 255, 0.705);
            /* height: 200px; */
          }
        }
        ::-webkit-scrollbar {
          display: none;
        }
      }
      &::before {
        /* content: ""; */
        scale: 1.5;
        /* position: absolute; */
        /* bottom: 0px; */
        /* left: 50%; */

        /* transform: translateX(-50%) translateY(0) scale(2.75); */
        /* width: calc(100% - 2 * var(--page_margin)); */
        /* aspect-ratio: 2 / 1; */
      }
    }
  }

  .about_section {
    & .about_section_banner {
      overflow: visible !important;
      height: 480px;
      padding: 1rem;
      & .inner_container_wrapper {
        /* overflow-x: visible; */
        overflow: visible;
        & .inner_container {
          & .inner_container_items_holder {
            & img {
              width: 70%;
              &:nth-child(1) {
                width: 55%;
              }
              &:nth-child(2) {
              }
              &:nth-child(3) {
                width: 55%;
              }
            }
          }
        }
      }
      &::before {
        width: 44%;
        /* display: none; */
      }
      &::after {
        width: 44%;
        /* transform: translate(50%, -50%); */
      }
    }
  }

  .partners_pictures {
    padding-bottom: 24px;
    .partners_pictures_container {
      gap: 0;
      flex-direction: column;
    }
  }

  .partners_schools_section {
    padding-bottom: 0px;
    .partners_schools_container {
      grid-template-columns: 1fr 1fr 1fr !important;
      gap: 8px !important;
    }
  }

  .faq_section {
    padding-top: 0px !important;
    margin-top: 0;
    overflow: hidden;
    padding-bottom: 2rem;
    /* padding-inline: 1rem; */
    border-bottom-right-radius: 2rem;
    border-bottom-left-radius: 2rem;
    .faq_section_container {
      align-items: stretch;
      flex-direction: column;
      height: fit-content !important;

      .faq_container {
        transform: none;
        left: 0;
        right: 0;
        bottom: -7rem;
        .global_heading_container {
          align-items: center;
          .pre_heading_pill {
            margin-inline: auto !important;
          }
          .heading,
          .subheading {
            text-align: center;
          }
        }
      }
      .faq_image_wrapper {
        transform: translate(0, 0);
      }
    }
  }

  .plans_pricing_section {
    padding: 24px;
    padding-block: 48px;
    border-radius: 2rem;
    .global_heading_container {
      margin-top: 0;
    }
    .plans_pricing_section_container {
      flex-direction: column;
      .plan_pricing_card {
        /* margin-inline: 1rem; */
        padding-inline: 2rem;
        .card_body_details {
          /* gap: 1rem; */
          .card_plan_detail {
            font-size: 12px;

            padding-block: 14px;
            &:first-child() {
              padding-top: 0 !important;
            }
          }
        }
      }
    }
    &::before,
    &::after {
      width: 85vw;
      height: auto;
      aspect-ratio: 1 / 1;
      background-size: contain;
    }

    &::before {
      top: 4.45%;
    }
  }
  .author-card__body:nth-child(even) {
    box-shadow: none !important;
    position: static !important;
  }
  .author-card__media:nth-child(odd) {
  }
  .author-card__media {
    width: 100%;
    /* height: 260px; */
    height: auto;
    aspect-ratio: 1 / 1;
    img {
      aspect-ratio: 1 / 1;
    }
  }

  .author-card__name {
    font-size: 18px !important;
  }
  .author-card__sub {
    font-size: 20px;
  }
  .author-card__quote {
    font-size: 16px;
  }

  .users_pill_images {
    img {
      width: 36px !important;
      height: 36px !important;
    }
  }
  .reviews_carousel_section {
    .global_heading_container {
      padding-bottom: 2rem !important;
    }
    .reviews_carousel_container {
      grid-template-columns: 1fr !important;
      .reviews_carousel_column {
        &:hover {
          .reviews_carousel_animable_col {
            animation-play-state: running !important;
          }
        }
        &:not(:nth-child(2)) {
          /* display: none; */
        }
      }
    }
  }
  .contact_form_section {
    .global_heading_container {
      .heading {
        font-size: 2rem;
      }
      .subheading {
        font-size: 1rem;
      }
    }
    .contact_form_container {
    }
  }
  .video_reviews_container {
    margin-top: 4rem;

    display: flex;
    flex-direction: column;
    gap: 1rem;
    .wrapper_virew {
      p {
        font-size: 24px;
        font-weight: 500;
      }
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      row-gap: 1rem;
      .role_picker_video_review {
        padding: 4px;
        border-radius: 18px;
        width: fit-content;
        display: flex;
        align-items: center;
        background: rgb(215, 215, 215);
        .pick_role {
          padding: 8px 1rem;
          border-radius: 14px;
          background-color: #fff;
          line-height: 1.3;
          font-weight: 400;
        }
        #profesori {
          background-color: transparent !important;
        }
      }
    }
    .videos_container {
      width: 100%;
      display: flex;
      /* flex-direction: column; */
      gap: 20px;
      .video_review_card {
        &:nth-child(odd) {
          /* display: none; */
        }
        flex: 1 0 auto !important;

        aspect-ratio: 1/1;
        border-radius: 2rem;
      }
    }
  }
  .kit_items_presentation_section {
    .kit_items_presentation_inner {
      scroll-snap-type: x mandatory !important;
      .kit_items_presentation_container {
        scroll-snap-align: center !important;
        .presentation_text {
          max-width: 256px !important;
        }
        .presentation_image_wrapper {
          img {
            width: 156px !important;
            height: 156px !important;
          }
        }
      }
    }
  }
}

@keyframes waveshine {
  0% {
    width: 0;
    left: 0;
  }
  50% {
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
  100% {
    width: 0%;
    left: 100%;
    transform: translateX(-50%);
  }
}

@keyframes caro_rev {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.custom-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  backdrop-filter: blur(10px);
  justify-content: center;
  z-index: 9990;
}

.custom-modal {
  background: #fff;
  padding: 2rem;
  border-radius: 1rem;
  margin: 1rem;
  width: 100%;
  max-width: 400px;
  position: relative;
  animation: fadein 180ms linear 1;
}
@keyframes fadein {
  from {
    filter: blur(10px);
    opacity: 0;
  }
  to {
    filter: blur(0);
    opacity: 1;
  }
}

.custom-modal h2 {
  margin-bottom: 1rem;
  font-weight: 700;
  span {
    color: transparent;
    background: linear-gradient(to bottom, #ff3079, #ffeeee);
    background-clip: text;
  }
}

.modal-form input {
  padding: 10px;
  margin-bottom: 12px;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 22px;
  transition: all 60ms;
  background: none;
  border: none;
  padding: 5px;
  border-radius: 100rem;
  display: flex;
  height: fit-content;
  align-items: center;
  width: fit-content;
  cursor: pointer;
  &:hover {
    opacity: 30%;
  }
}
.form_row {
  width: 100%;
  height: auto;
  justify-content: space-between;
  display: flex;
  flex-direction: column;
  label {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -2%;
    span {
      color: red;
    }
  }
  &:has(input[type="checkbox"]) {
    flex-direction: row;
    justify-content: center;
    padding-top: 0.5rem;
    gap: 0.5rem;
    label,
    label a,
    label span {
      font-weight: 300;
      opacity: 70% !important;
      letter-spacing: -2% !important;
      line-height: 1.3 !important;
      font-size: 12px;
    }
    a {
      color: rgb(201, 37, 116);
    }
    input[type="checkbox"] {
      accent-color: #b0184d;
    }
  }
  input[type="text"],
  input[type="email"],
  input[type="tel"] {
    all: unset;
    font-size: 14px;
    font-weight: 300;
    opacity: 85%;
    padding-top: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgb(224, 224, 224);
    &::placeholder {
      font-weight: 300;
      font-size: 14px;
      letter-spacing: -2%;
      line-height: 1.3;
    }
  }
  .textarea_wrapper {
    width: 100%;
    height: 92px;
    overflow: hidden;
    background-color: white;
    border: 1px solid #e8e8e8;
    box-shadow: 4px 4px 17.5px 0 rgba(0, 0, 0, 0.079);
    margin-top: 8px;
    padding: 10px;
    padding-right: 0;
    border-radius: 1rem;

    textarea {
      all: unset;
      font-size: 14px;
      white-space: pre-wrap;
      word-wrap: break-word; /* legacy */
      overflow-wrap: break-word; /* modern */
      /* overflow: hidden; */
      white-space: wrap;
      resize: vertical auto;
      background-color: white;
      width: 100%;
      height: 100%;
      &::placeholder {
        font-weight: 300;
        font-size: 14px;
        letter-spacing: -2%;
        line-height: 1.3;
      }
    }
  }
  #form_submit_button {
    cursor: pointer;
    z-index: calc(infinity);
    padding-block: 0.75rem;
    position: relative;
    font-family: inherit;
    transition: all 200ms;
    &:hover {
      opacity: 70%;
    }
  }
}

.form_rows {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* mobile nav menu */

.mobile_nav_menu {
  position: fixed;
  inset: 0;
  height: 100dvh;
  /* background: rgba(0, 0, 0, 0.3); */
  z-index: 10999;
}

.mobile_nav_content {
  position: absolute;
  padding: var(--page_margin);
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  transform: translateX(-100%);
  transition: all 200ms ease;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 4rem;
  justify-content: center;
}

.mobile_nav_menu.open .mobile_nav_content {
  transform: translateX(0);
}

.mobile_nav_content .navbar_buttons {
  display: flex;
  width: 100%;
  gap: 1rem;
  flex-direction: column;
  .button {
    padding: 0.875rem;
    text-align: start;
    width: 100% !important;
    flex: 1;
    animation: menu_items_slide 400ms ease forwards;
    &:last-child {
      background: #ffffff00;
      color: rgb(201, 37, 116);
      border-color: rgb(201, 37, 116);
    }

    /* display: none; */
  }
}

.mobile_nav_content ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  /* align-self: flex-start; */
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mobile_nav_content li {
  font-size: 36px;
  cursor: pointer;
  font-weight: 600;
  transform: translateY(-50%);
  filter: blur(10px);
  opacity: 0;
  animation: menu_items_slide 400ms ease forwards;
  a {
    text-decoration: none;
    color: inherit;
    opacity: 80%;
  }
}

.mobile_nav_content li:nth-child(1) {
  animation-delay: 0.05s;
}
.mobile_nav_content li:nth-child(2) {
  animation-delay: 0.1s;
}
.mobile_nav_content li:nth-child(3) {
  animation-delay: 0.15s;
}
.mobile_nav_content li:nth-child(4) {
  animation-delay: 0.2s;
}
.mobile_nav_content li:nth-child(5) {
  animation-delay: 0.25s;
}

@keyframes menu_items_slide {
  from {
    filter: blur(10px);
    transform: translateY(-50%);
    opacity: 0;
  }
  to {
    filter: none;
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 480px) {
  :root {
    --page_margin: 1.5rem;
  }

  .authors_container_section {
    padding: 0rem;
  }
  .contact_form_section {
    .contact_form_container {
      &::before {
        z-index: 323;
        bottom: 0;
        transform: translateY(15%) translateX(-40%) scaleX(-1);
      }
      &::after {
        filter: blur(3px);
        z-index: 323;
        width: 80px;
        bottom: 0;
      }
      .contact_form {
        padding-inline: 1rem !important;
        margin-inline: 0.5rem !important;
        &::before {
        }
      }
    }
  }
}

/* ================================================================
   NEW SECTIONS — Parent-focused redesign (clean, gentle style)
   ================================================================ */

/* ---- Before / After Section ---- */
.before_after_section {
  padding: 80px var(--page_margin);
  background: linear-gradient(to bottom, rgb(127, 7, 35), white);
  position: relative;
  overflow: hidden;

  .global_heading_container {
    .heading {
      color: white;
    }
    .subheading {
      color: pink;
    }
    position: relative;
  }

  &::after {
    content: "";
    inset: 0;
    position: absolute;
    bottom: -150%;
    background-position: top;
    background-attachment: fixed;
    background-size: cover;
    z-index: 3;
    left: 0;
    transform: rotateX(40deg);
    background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/squircles.svg);
  }
}
.before_after_section .before_after_container {
  display: flex;
  position: relative;
  z-index: 4;
  align-items: stretch;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 3rem;
  max-width: 1440px;
  perspective: 1200px;
  margin-inline: auto;
}

.before_after_section .before_card {
  transform: rotateY(10deg);
}
.before_after_section .after_card {
  transform: rotateY(-10deg);
}
.before_after_section .before_card,
.before_after_section .after_card {
  flex: 1;
  min-width: 300px;
  /* max-width: 540px; */
  /* margin-inline: auto; */
  background: #fff;
  border: 4px solid #f2f2f2;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 8px 8px 19px 0 rgba(77, 77, 77, 0.05);
}
.before_after_section .ba_card_image {
  width: 100%;
  height: 280px;
  overflow: hidden;
}
.before_after_section .ba_card_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mask-image: linear-gradient(to bottom, white, transparent);
  object-position: center;
  transition: transform 500ms ease;
}
.before_after_section .before_card .ba_card_image img {
  filter: grayscale(100%) brightness(0.95);
}
.before_after_section .after_card {
  img {
    filter: brightness(1.25);
  }
}
.before_after_section .before_card:hover .ba_card_image img,
.before_after_section .after_card:hover .ba_card_image img {
  transform: scale(1.04);
}
.before_after_section .ba_card_body {
  padding: 2rem 2.25rem 2.5rem;
}
.before_after_section .before_after_label {
  font-weight: 700;
  font-size: 3.25rem;
  line-height: 1;
  margin-bottom: 1.25rem;
  display: block;
}
.before_after_section .before_label {
  color: #b0b0b0;
}
.before_after_section .after_label {
  color: transparent;
  background: linear-gradient(45deg, #ff218c, #370013);
  -webkit-background-clip: text;
  background-clip: text;
}
.before_after_section .before_after_list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  /* gap: 0.875rem; */
}
.before_after_section .before_after_list li {
  font-size: 1rem;
  line-height: 1.45;
  display: flex;
  cursor: default;
  align-items: center;
  border-bottom: 1px solid whitesmoke;
  padding-block: 1rem;
  gap: 0.75rem;
  transition: all 280ms;
  color: #555;
  &:hover {
    background-color: rgba(255, 192, 203, 0.284);
    padding-left: 14px;
    border-radius: 1rem;
  }
}
.before_after_section .ba_icon {
  flex-shrink: 0;
  font-size: 1.1rem;
  border-radius: 100rem;
  padding: 5px;
  background-color: whitesmoke;
  border: 1px solid rgba(128, 128, 128, 0.147);
  line-height: 1.45;
}
.before_after_section .before_after_arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---- Child Objectives Section ---- */
.child_objectives_section {
  padding: 80px var(--page_margin);
  background: #fff;
  position: relative;
  /* overflow: hidden; */
  &::before {
    content: "";
    inset: 0;
    position: absolute;
    /* background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/images/starting-homeschooling-at-12.jpg); */
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    z-index: 2;
    mask-image: linear-gradient(to top, transparent, white, transparent);
  }
  .global_heading_container {
    position: relative;
    z-index: 4;
  }
}
.child_objectives_flex {
  max-width: 1440px;
  margin-inline: auto;
  display: flex;
  width: 100%;
  position: relative;
  margin-top: 4rem !important;
  align-items: center;
  gap: 3rem;
  .child_projects {
    flex: 1;
    border: 1px solid white !important;
    /* position: relative; */
    border-radius: 2rem;
    z-index: 44;
    /* background-color: #fff; */
    align-self: stretch;
    .child_projects_wrapper {
      &::before {
        inset: 0;
        /* background-size: cover; */
        /* background-position: center; */
        content: "";
        z-index: -1;
        position: absolute;
        /* transform: scale(0); */
        transition: all 400ms;
        text-align: center;
        transform: scale(1);
        overflow: hidden;

        transform-origin: center;
        border-radius: 323px;
        background: conic-gradient(
          from 90deg,
          rgb(183, 29, 60),
          rgb(170, 163, 255),
          rgb(255, 122, 66)
        );
        filter: blur(28px);
        /* animation: spin2 8s infinite linear; */
      }
      position: sticky;
      top: 80px;
      padding: 0.5rem;
      box-shadow: 4px 4px 25px 0px rgb(238, 172, 252);
      width: 100%;
      height: fit-content;
      border-radius: 1rem;
      /* aspect-ratio: 16 / 9; */

      iframe {
        width: 100%;
        height: 100%;
        border-radius: 8px;
        width: 100%;
        cursor: pointer;
        aspect-ratio: 16 / 9 !important;
      }
      h1 {
        padding: 1rem;
        position: relative;
        background: linear-gradient(to right, white, transparent);
        border-radius: 8px;
        font-size: 18px;
        text-align: center;
        font-weight: normal;
        color: rgb(78, 26, 35);
      }
    }
  }
}
.child_objectives_section .child_objectives_grid {
  position: relative;
  z-index: 4;
  display: grid;
  column-gap: 2rem;
  grid-template-columns: repeat(1, 1fr);
  flex-direction: column;
  border-radius: 1rem;
  /* max-width: 500px; */
  flex: 1;
  /* padding: 1rem; */
  /* background-color: #ffffffc8; */
  /* margin: 2rem auto 0; */
}
.child_objectives_section .objective_card {
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
  padding: 1.75rem 0;
  /* backdrop-filter: blur(12px); */
  border-bottom: 1px solid #ebebeb;
  /* background: transparent; */

  transition: all 200ms ease;
  &:last-child {
    border-bottom: none;
  }
  &:hover {
    gap: 2.25rem;
    background-color: rgba(255, 192, 203, 0.154);
    .objective_icon {
      transform: rotate(12deg);
    }
  }
}
.child_objectives_section .objective_icon {
  font-size: 2.25rem;
  line-height: 1;
  flex-shrink: 0;
  width: 52px;
  text-align: center;
  transition: all 200ms ease;

  margin-top: 2px;
}
.child_objectives_section .objective_card_content {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.child_objectives_section .objective_title {
  font-weight: 600;
  font-size: 1.1rem;
  color: #1a1a1a;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.child_objectives_section .objective_text {
  font-size: 0.875rem;
  color: #777;
  line-height: 1.65;
  font-weight: 300;
  margin: 0;
}

/* ---- Student Projects Section ---- */
.student_projects_section {
  padding: 80px var(--page_margin);
  display: none;
  background: linear-gradient(to bottom, #620027 20%, #1b0009 80%);
  background-color: #4a001a;
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, white 60%, transparent);
  perspective: 800px;

  &::after {
    content: "";
    inset: 0;
    position: absolute;
    top: 50%;
    background-position: top;
    background-attachment: fixed;
    background-size: cover;
    left: 0;
    transform: rotateX(40deg) scale(1.2);
    background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/squircles.svg);
  }
}

.student_projects_section .global_heading_container {
  .pre_heading_pill {
    border: none;
    background: none;
    color: white;
    background-color: #ffffff22;
    box-shadow: none;
  }
  .heading {
    color: white;
  }

  .subheading {
    color: #ff98bc;
    font-size: 1rem;
  }
}
.student_projects_section .student_projects_grid {
  display: flex;
  position: relative;
  justify-content: center;
  z-index: 9;
  gap: 1.25rem;
  margin-top: 3rem;
  max-width: 1440px;
  margin: 0 auto;
}
.student_projects_section .student_project_card {
  border-radius: 1.5rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid #f2f2f2;
  max-width: 600px;
  flex: 1;
  margin-inline: auto;
  box-shadow: 8px 8px 19px 0 rgba(77, 77, 77, 0.05);
  transition: transform 180ms ease;
}
.student_projects_section .student_project_card:hover {
}
.student_projects_section .student_project_video_wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.student_projects_section .student_project_video_wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.student_projects_section .student_project_info {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid #f2f2f2;
}
.student_projects_section .student_name {
  font-weight: 600;
  font-size: 0.9rem;
  color: #1a1a1a;
}
.student_projects_section .student_project_title {
  font-size: 0.8rem;
  color: #aaa;
  font-weight: 300;
  margin-top: 0.2rem;
}

/* ---- Transformation Section ---- */
.transformation_section {
  padding: 80px var(--page_margin);
  position: relative;
  overflow: hidden;
  z-index: 2;
  cursor: url("https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/cursorplane.png"), auto;
  background: linear-gradient(
    to top,
    #120424 80%,
    rgb(111, 33, 188)
  ) !important;

  .global_heading_container {
    .heading {
      color: white;
    }
    .subheading {
      color: #ff98bc;
    }
  }

  &::after {
    bottom: 0%;
    right: 0;
    width: 50%;
    height: 50%;
    transform: translateX(50%) translateY(50%);
    z-index: -1;
    position: absolute;
    content: "";
    background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/white-radial.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  &::before {
    top: 0%;
    left: 0;
    width: 50%;
    height: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: -1;
    position: absolute;
    content: "";
    background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/white-radial.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
}
.transformation_section .transformation_cards {
  display: flex;
  gap: 3rem;
  margin-top: 3rem;
  max-width: 1440px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.transformation_section .transformation_card {
  div:has(img, iframe) {
    transition: all 400ms;
  }
  flex: 1;
  position: relative;
  perspective: 800px;
  min-width: 300px;
  z-index: 3;
  &::after {
    opacity: 0;
    transition: all 400ms;
    width: 100%;
    inset: 0;
    height: 100%;

    background: linear-gradient(
      to bottom,
      white 0%,
      rgb(166, 45, 97) 30%,
      rgba(176, 63, 63, 0.236) 70%
    );
    filter: blur(45px);
    z-index: -1;
    content: "";
    position: absolute;
  }
}

.transformation_section .transformation_card:hover,
.transformation_section .transformation_card.is-active {
  div:has(img, iframe) {
    opacity: 1;
  }
  .transformation_card_header_wrapper {
  }
  .transformation_card_header_wrapper::before {
    filter: blur(8px) contrast(1.25);
    transform: scale(1.25);
    transform-origin: center;
    background: conic-gradient(
      from 90deg,
      rgb(183, 29, 60),
      rgb(170, 163, 255),
      rgb(255, 122, 66)
    );
  }

  &:after {
    opacity: 90%;
  }

  .transformation_text {
    color: white;
    scale: 1.025;
  }
}

.transformation_section .transformation_card_header_wrapper {
  &::before {
    inset: 0;
    /* background-size: cover; */
    /* background-position: center; */
    content: "";
    z-index: -1;
    position: absolute;
    transform: scale(0);
    transition: all 400ms;
    background: lightgray;
    /* filter: blur(8px); */
    /* animation: spin2 8s infinite linear; */
  }
  border-radius: 16px;
  overflow: hidden;
  padding: 0.3rem;
  background: lightgray;

  position: relative;
  z-index: 1;
}
.transformation_section .transformation_card_header {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  z-index: 43;
  margin-bottom: 1.5rem;
  padding: 1rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #f2f2f2;
  background-color: white;
  border-radius: 11.2px;
}
.transformation_section .transformation_avatar {
  width: 52px;
  height: 52px;
  border-radius: 100rem;
  background: #f8f8f8;
  border: 1px solid #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(1.2);
    border-radius: 100%;
  }
}
.transformation_section .transformation_name {
  font-weight: 700;
  font-size: 18px;
  color: #1a1a1a;
}
.transformation_section .transformation_age {
  font-size: 14px;
  color: #aaa;
  /* margin-top: 0.2rem; */
}
.transformation_section .transformation_before_after {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.transformation_section .transformation_before,
.transformation_section .transformation_after_block {
  padding: 1rem 0rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  line-height: 1.65;
  display: flex;
  flex-direction: column;
}
.transformation_section .transformation_media {
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.202);
  margin-bottom: 1rem;
}
.transformation_section .transformation_media img,
.transformation_section .transformation_media iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  border: none;
}
.transformation_section .transformation_text {
  color: #ffffffa9;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  background-color: #28003740;
  line-height: 1.6;
  transform-origin: top;
  width: 90%;
  transition: all 320ms;
  margin-inline: auto;
  position: relative;
  backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 1px white;
  top: -2.5rem;
}
.transformation_section .transformation_before {
  /* background: #f8f8f8; */
  /* border-left: 3px solid #e0e0e0; */
  color: #888;
}
.transformation_section .transformation_after_block {
  /* background: #fff5f8; */
  /* border-left: 3px solid #9e214d; */
  color: #1a1a1a;
}
.transformation_section .transformation_label {
  font-size: 1.65rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  display: block;
}
.transformation_section .transformation_before .transformation_label {
  color: #ffd9e7;
}
.transformation_section .transformation_after_block .transformation_label {
  color: transparent;
  background: linear-gradient(to right, pink, white);
  background-clip: text;
}

/* ---- FOMO Section ---- */
.fomo_section {
  padding: 24px var(--page_margin);
  background: #f8f8f8;
  display: none;
}
.fomo_section .fomo_stats_row {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: 2.5rem;
  max-width: 1440px;
  margin: 0 auto;
}
.fomo_section .fomo_stat_card {
  flex: 1;
  min-width: 130px;
  background-color: white;
  /* border: 1px solid gray; */
  box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.091);
  padding: 2rem;
  /* max-width: 200px; */
  border-radius: 2rem;
  text-align: center;
}
.fomo_section .fomo_stat_value {
  font-size: 2.5rem;
  font-weight: 700;
  color: transparent;
  background: linear-gradient(to bottom, #ff3079, #ffeeee);
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 1;
}
.fomo_section .fomo_stat_label {
  font-size: 0.85rem;
  color: #5c5c5c;
  margin-top: 0.35rem;
  font-weight: 500;
}
.fomo_section .fomo_quote_block {
  text-align: center;
  padding: 2rem 0 0;
}
.fomo_section .fomo_quote_text {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 700;
  color: #1a1a1a;
  max-width: 680px;
  margin: 0 auto;
}
.fomo_section .fomo_quote_sub {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  color: #5c5c5c;
  max-width: 460px;
  margin-inline: auto;
}

/* ---- Closing Story Section ---- */
.closing_story_section {
  padding: 80px var(--page_margin);
  background: linear-gradient(to right, white, pink);
  overflow: hidden;
  position: relative;
  z-index: 10;

  .users_pill {
    margin: 0;
    margin-bottom: 1rem;
  }

  &::before {
    width: 50%;
    height: 50%;
    /* content: ""; */
    right: 0;
    top: 0;
    transform: translateY(-50%) translateX(50%);
    background: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/radial-f683.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
  }
}
.closing_story_section .closing_story_inner {
  display: flex;
  gap: 5rem;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  flex-wrap: wrap;
  .closing_radial {
    top: 50%;
    width: 100%;
    pointer-events: none;
    height: 100%;
    display: none;
    transform: translateX(-75%) translateY(-50%);
    left: 0%;
    position: absolute;
  }
}
.closing_story_section .closing_story_text {
  /* padding-left: var(--page_margin); */
  flex: 1;
  min-width: 280px;
}
.closing_story_section .closing_story_headline {
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.04em;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}
.closing_story_section .closing_story_headline span {
  color: transparent;
  background: linear-gradient(to left, #6b0637 0%, #ff3079 100%);
  background-clip: text;
  -webkit-background-clip: text;
  font-style: italic;
}
.closing_story_section .closing_story_body {
  font-size: 1rem;
  color: #666;
  line-height: 1.75;
  font-weight: 400;
  margin-bottom: 1.25rem;
}
.closing_story_section .closing_story_body:last-of-type {
  margin-bottom: 2rem;
}
.closing_story_section .closing_story_cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.closing_story_section .closing_story_illustration {
  flex: 1;
  min-width: 280px;
  min-height: 100%;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.closing_story_section .closing_illustration_card {
  border-radius: 2.5rem;
  text-align: center;
  width: 100%;
  height: 100%;
}
.closing_story_section .closing_illustration_card .illustration_picture {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 0;
  border: 4px solid white;
  overflow: hidden;
  border-radius: 1rem;
  mask-image: linear-gradient(to left, black 20%, transparent);
  img {
    width: 100%;
    height: 100%;
    /* border-top-right-radius: 2rem; */
    /* border-bottom-right-radius: 2rem; */
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center;
  }
}
.closing_story_section .closing_illustration_card .illustration_text {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: #1a1a1a;
}
.closing_story_section .closing_illustration_card .illustration_sub {
  margin-top: 0.875rem;
  font-size: 0.85rem;
  color: #aaa;
  line-height: 1.5;
  font-style: italic;
}

/* ---- Destination Section V2 (image-grid layout, draft) ---- */
.destination_section_v2 {
  padding: 80px var(--page_margin);
  background: linear-gradient(to bottom, white, #e7e9eb) !important;

  position: relative;
  .global_heading_container {
    position: relative;
    &::before {
      content: "";
      position: absolute;
      width: 14vw;
      height: auto;
      aspect-ratio: 1/1;
      transform: translateY(-14%);
      background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/Frame-74.svg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      left: 0;
      top: 0;
    }
    &::after {
      content: "";
      position: absolute;
      width: 10vw;
      height: auto;
      aspect-ratio: 1/1;
      background-image: url(https://minio-cursuri.iucosoft.com/iucosoft/java_distractiva_kit/misc/Frame-73.svg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      right: 0;
      top: 0;
    }
  }
}
.destination_section_v2 .destination_v2_grid {
  max-width: 1440px;
  margin-inline: auto;
  position: relative;
  /* position: relative; */
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: transparent;
  border-radius: 2rem;
  /* overflow: hidden; */
}
.destination_section_v2 .destination_v2_card {
  overflow: hidden;
  position: sticky;
  top: 96px;
  border-radius: 0;
  aspect-ratio: 4 / 3;
  cursor: default;
  background: #d0d0d0;
  &:hover {
    .destination_v2_card_body {
      opacity: 0;
    }
  }
}
.destination_section_v2 .destination_v2_card_img {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.destination_section_v2 .destination_v2_card_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 500ms ease;
}
.destination_section_v2
  .destination_v2_card:hover
  .destination_v2_card_img
  img {
  transform: scale(1.06);
}
.destination_section_v2 .destination_v2_card_overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(8, 0, 4, 0.9) 0%,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(0, 0, 0, 0.05) 100%
  );
}
.destination_section_v2 .destination_v2_card_body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transition: all 800ms;
  z-index: 2;
  padding: 1.75rem;
}
.destination_section_v2 .destination_v2_card_title {
  font-weight: 700;
  font-size: 1.5rem;
  color: #fff;
  margin: 0 0 0.35rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.destination_section_v2 .destination_v2_card_text {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.55;
  font-weight: 300;
  margin: 0;
}
.destination_section_v2 .destination_v2_card_text strong {
  color: rgba(255, 170, 190, 0.95);
  font-weight: 600;
}

/* ---- Responsive overrides for new sections ---- */
@media (max-width: 980px) {
  .destination_section_v2 .destination_v2_grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .student_projects_section .student_projects_grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .closing_story_section .closing_story_inner {
    gap: 3rem;
  }
}

@media (max-width: 600px) {
  .destination_section_v2 .destination_v2_grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .before_after_section .before_after_container {
    flex-direction: column;
    align-items: stretch;
  }

  .closing_story_section .closing_illustration_card .illustration_picture {
    mask-image: linear-gradient(to top, black 30%, transparent);
  }

  .closing_story_section .closing_story_inner .closing_radial {
    top: 0%;
    width: 100%;
    pointer-events: none;
    height: 100%;
    transform: translateX(-30%) translateY(-60%);
    left: 100%;
    position: absolute;
  }

  .before_after_section .before_after_arrow {
    transform: rotate(90deg);
  }
  .before_after_section .ba_card_image {
    height: 180px;
  }

  .child_objectives_section .child_objectives_flex {
    flex-direction: column;
  }

  .before_after_section .ba_card_body {
    padding: 1rem 1.25rem 1.5rem;
  }
  .before_after_section .before_after_label {
    font-size: 2rem;
    margin-bottom: 0.75rem;
  }
  .before_after_section .before_after_list li {
    font-size: 1rem;
    padding-block: 0.55rem;
    gap: 0.4rem;
  }
  .before_after_section .ba_icon {
    font-size: 0.9rem;
  }
  .student_projects_section .student_projects_grid {
    grid-template-columns: 1fr;
  }
  .transformation_section .transformation_cards {
    flex-direction: column;
  }
  .transformation_section {
    &::before {
      left: 50%;
      top: 0;
      transform: translateX(-50%) translateY(-50%);
    }
    &::after {
      right: 50%;
      bottom: 0;
      transform: translateX(50%) translateY(50%);
    }
  }
  .transformation_section .transformation_media {
    iframe {
      aspect-ratio: 1 / 1;
    }
    img {
      aspect-ratio: 16 / 9;
    }
  }
  .fomo_section .fomo_stat_card {
    min-width: 130px;
  }
  .fomo_section .fomo_quote_block {
    padding: 2.5rem 1.5rem;
  }

  .closing_story_section {
    padding-block: 48px;
  }
  .closing_story_section .closing_story_inner {
    flex-direction: column;
    gap: 2.5rem;
  }
  .closing_story_section .closing_story_illustration {
    width: 100%;
  }
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* Fundal modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 9999;
}

/* Modal activ */
.modal.active {
  opacity: 1;
  visibility: visible;
}

/* Conținut modal */
.modal-content {
  background: #ffffff;
  padding: 32px;
  border-radius: 14px;
  text-align: center;
  max-width: 420px;
  width: 90%;
  position: relative;
  animation: scaleIn 0.3s ease;
}

.modal-content h2 {
  margin-bottom: 12px;
  color: #2c2c2c;
}

.modal-content p {
  color: #555;
  margin-bottom: 24px;
}

.modal-content #modalOkBtn {
  width: 90px;
}

/* Buton X */
.modal-close {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 22px;
  cursor: pointer;
  color: #999;
}

.modal-close:hover {
  color: #000;
}

/* Animație */
@keyframes scaleIn {
  from {
    transform: scale(0.85);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}