/* RESET */
:root {
  /* #701B64 */
  --primary-clr: hsl(308, 61%, 27%);

  /* #A90466 */
  --secondary-clr: hsl(324, 95%, 34%);
  --secondary-clr-5: hsla(324, 95%, 34%, 5%);
  --secondary-clr-10: hsla(324, 95%, 34%, 10%);
  --secondary-clr-15: hsla(324, 95%, 34%, 15%);
  /* #9B2064 */
  --secondary-clr-900: hsl(327, 66%, 37%);
  /* #992F6A */
  --secondary-clr-800: hsl(327, 53%, 39%);

  /* #262F45 */
  --tertiary-clr: hsl(223, 29%, 21%);
  /* #2C2F4A */
  --tertiary-clr-900: hsl(234, 25%, 23%);
  /* #EEEEFB */
  --tertiary-clr-100: hsl(240, 62%, 96%);
  /* #FFFFFF */
  --white-clr: hsl(0, 0%, 100%);
  /* #F2F2F8 */
  --white-clr-900: hsl(240, 30%, 96%);
  /* #EBEBF2 */
  --white-clr-800: hsl(240, 21%, 94%);
  /* #333333 */
  --black-clr: hsl(0, 0%, 20%);
  /* #1865F2 */
  --extra-clr: hsl(219, 89%, 52%);
  /* #545760 */
  --text-clr: hsl(225, 7%, 35%);

  /* #D5D5D5 */
  --border-clr: hsl(0, 0%, 84%);
  --border-clr-30: hsl(0, 0%, 84%, 30%);

  /* #BDBDDB */
  --border-clr-900: hsl(240, 29%, 80%);

  --ff-lato: "Lato", sans-serif;
  --ff-inter: "Inter", sans-serif;
  --ff-satoshi: "Satoshi", sans-serif;

  /* 40px */
  /* --fs-1000: clamp(3.5rem, 2.5vw + 1.5rem, 6rem); */
  /* 5rem (80px) max */
  --fs-1000: clamp(3.5rem, 4vw + 1.5rem, 5rem);

  /* 4rem (64px) max */
  --fs-950: clamp(2.8rem, 3.2vw + 1.2rem, 4rem);

  /* 3.75rem (60px) max */
  --fs-900: clamp(2.6rem, 3vw + 1.2rem, 3.75rem);

  /* 3.5rem (56px) max */
  --fs-850: clamp(2.5rem, 2.8vw + 1.1rem, 3.5rem);

  /* 3rem (48px) max */
  --fs-800: clamp(2.25rem, 2.4vw + 1rem, 3rem);

  /* 2.5rem (40px) max */
  --fs-700: clamp(2rem, 2vw + 0.9rem, 2.5rem);

  /* 2.25rem (36px) max */
  --fs-650: clamp(1.5rem, 1.8vw + 0.8rem, 2.25rem);

  /* 2rem (32px) max */
  --fs-600: clamp(1.4rem, 1.6vw + 0.7rem, 2rem);

  /* 1.75rem (28px) max */
  --fs-550: clamp(1.25rem, 1.4vw + 0.6rem, 1.75rem);

  /* 1.5rem (24px) max */
  --fs-500: clamp(1.125rem, 1.2vw + 0.5rem, 1.5rem);

  /* 1.25rem (20px) max */
  --fs-450: clamp(0.95rem, 1vw + 0.5rem, 1.25rem);

  /* 1.125rem (18px) max */
  --fs-425: clamp(0.85rem, 0.9vw + 0.4rem, 1.125rem);

  /* 1rem (16px) fixed */
  --fs-400: 1rem;

  /* 0.875rem (14px) max */
  --fs-300: clamp(0.75rem, 0.7vw + 0.4rem, 0.875rem);

  /* 0.75rem (12px) max */
  --fs-200: clamp(0.65rem, 0.5vw + 0.3rem, 0.75rem);

  --fw-100: 100;
  --fw-200: 200;
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;

  accent-color: var(--secondary-clr);
  caret-color: var(--secondary-clr);
}

/* Box sizing rules*/
*,
*::before,
*::after {
  box-sizing: border-box;
  /* border: 1px solid red; */
}

/* Reset margin, padding and font-size */
* {
  margin: 0;
  padding: 0;
  font: inherit;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

/* Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

h2 {
  text-wrap: balance;
}

/* Allow percentage-based heights in the application */
html,
body {
  height: 100%;
}

/* Set core root defaults */
html {
  scroll-behavior: smooth;
  interpolate-size: allow-keywords;
}

/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

a {
  cursor: pointer;
  text-decoration: none;
}

/* Make images easier to work with */
img,
picture,
video,
canvas,
svg {
  max-width: 100%;
  display: block;
}

/* Blur images when they have no alt attribute */
img:not([alt]) {
  filter: blur(10px);
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Custom CSS */
body {
  font-family: var(--ff-satoshi);
  font-size: var(--fs-400);
  font-weight: var(--fw-400);
  color: var(--text-clr);
  line-height: 19.2px;
  /* interpolate-size: allow-keywords; */
}

/* END OF RESET */

/* HEADER FOOTER */

/* Topbar */
.topbar {
  /* Full width background */
  border-image-source: conic-gradient(var(--tertiary-clr) 0% 0%);
  border-image-slice: fill 0;
  border-image-outset: 0 100vw;

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;

  @media (width <=890px) {
    display: none;
  }
}

.topbar-contacts {
  --_topbar-contacts-gap: 1rem;
  display: flex;
  gap: var(--_topbar-contacts-gap);
}

.topbar-contact-details {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--white-clr);
  text-decoration: none;

  &:not(:last-of-type) {
    padding-right: var(--_topbar-contacts-gap);
    border-right: 1px solid var(--white-clr);
  }

  &:hover {
    .topbar-contact-icon {
      scale: 1.2;
      transition: all 180ms ease-in-out;
    }
  }
}

.topbar-contact-icon {
  width: 1.5rem;
  height: 1.5rem;
  transition: all 180ms ease-in-out;
}

.topbar-contact-text {
  font-weight: var(--fw-400);
  font-size: var(--fs-300);
}

.topbar-social {
  display: flex;
  gap: 1rem;
}

.topbar-social-icon {
  width: 1.5rem;
  height: 1.5rem;
  transition: scale 180ms ease-in-out;

  &:hover {
    transition: scale 180ms ease-in-out;
    scale: 1.2;
  }
}

/* End of Topbar */
.primary-header.wrapper {
  @media (width <=768px) {
    --_gap: 1.125rem !important;
  }
}

/* Primay Nav */
.primary-nav {
  display: flex;
  align-items: center;
  padding-block: 2.125rem;

  .logo {
    width: 6.25rem;
    height: 3rem;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .btns {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1.75rem;
  }

  .btn-link {
    color: var(--tertiary-clr-900);
    font-weight: var(--fw-700);
    text-transform: uppercase;

    &:hover {
      color: var(--secondary-clr-900);
    }
  }

  @media (width <=896px) {
    .btns,
    .nav-links {
      display: none;
    }
  }
}

.nav-links {
  margin-inline: 3rem auto;
  display: flex;
  text-transform: uppercase;
  gap: 1.5rem;
}

.nav-link {
  font-size: 0.875rem;
  font-weight: var(--fw-700);

  a {
    color: var(--tertiary-clr-900);

    &:hover {
      color: var(--secondary-clr-900);
    }
  }
}

.primary-nav-toggler {
  --_toggler-clr: var(--tertiary-clr-900);

  cursor: pointer;
  margin-left: auto;
  border: none;
  border-radius: 50%;
  color: var(--white-clr);

  &:hover {
    --_toggler-clr: var(--white-clr);
    color: var(--tertiary-clr-900);
  }

  @media (width > 896px) {
    display: none;
  }
}

.sidebar {
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(3rem);

  .sidebar-dialog-content {
    padding-inline: 2rem;

    @media (width <=768px) {
      padding-inline: 1.125rem;
    }
  }
}

.sidebar {
  .dialog-header {
    margin-top: 2.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1.75rem;

    .close-btn {
      cursor: pointer;
      width: 1.75rem;
      height: 1.75rem;
      color: var(--tertiary-clr);
      background-color: var(--white-clr);
    }
  }

  .primary-nav {
    flex-direction: column;
    align-items: start;
    padding-block: 0;
    margin-block: 2.125rem;
  }

  .nav-links,
  .btns {
    display: revert;
    width: 100%;
  }

  .nav-links {
    margin-left: 0;
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  .nav-link {
    font-size: var(--fs-600);
  }

  .btns {
    background-color: transparent;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    border: none;
    box-shadow: none;
  }

  @media (width > 896px) {
    display: none;
  }
}

/* End of Primary Nav */

/* Footer */
.footer.wrapper {
  --_gap: 1.125rem !important;

  color: var(--white-clr);
  position: relative;

  &::before {
    content: "";
    position: absolute;
    z-index: -6;
    inset: 0;
    background-image: url("/assets/images/home/footer.png");
    background-size: cover;
  }

  a {
    color: var(--white-clr);
    text-decoration: none;
  }

  .content {
    position: relative;
    /* padding-block: 11.5rem 18rem; */
    padding-block: clamp(6.5rem, 15vw + 0.75rem, 11.5rem) 3rem;
    padding-inline: 0.625rem;

    &::after {
      content: "";
      bottom: 0;
      left: 0;
      position: absolute;
      display: block;
      width: 100%;
      z-index: -1;
      aspect-ratio: 3142/928;
      background-image: url("/images/white-logo.png");
      background-size: 100%;
      opacity: 0.04;
    }
  }
}

.footer-links:hover {
  text-decoration: underline;
}

.footer-title {
  font-size: var(--fs-400);
  font-weight: var(--fw-900);
  color: inherit;
  padding-bottom: 1.5rem;
  /* position: relative; */
  border-bottom: 1px solid #896d7d;
  /* &::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: -0.5rem;
    inset-block-end: var(--underline-position, -0.5rem);
    height: 4px;
    width: var(--underline-width, 4ch);
    background-color: var(--primary-clr);
    transform-origin: center;
    transition: width 500ms ease;
  }

  &:hover::after {
    --underline-width: 100%;
    transition: width 500ms ease;
  } */
}

.footer-description {
  max-width: 55ch;
  line-height: 26px;
  margin-right: 1.5rem;
}

.footer-top {
  padding-bottom: 2rem;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 2rem;
  column-gap: 2.5rem;
  justify-content: center;

  @media (width > 600px) {
    grid-template-columns: 1.5fr 1fr;
    /* justify-items: center;

    .columns:nth-of-type(2n + 1) {
      justify-self: start;
    } */
  }

  @media (width > 1024px) {
    grid-template-columns: 1.75fr repeat(3, 1fr);
    /* justify-items: center;
    justify-content: center;

    .columns:nth-of-type(2n + 1) {
      justify-self: inherit;
    } */
  }
}

.footer-contact,
.footer-about,
.footer-popular-services,
.footer-quick-links {
  display: grid;
  gap: 1.25rem;
  /* justify-content: start; */
}

.footer-about,
.footer-popular-services,
.footer-quick-links {
  align-content: start;
}

.footer-list-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 0.75rem;
  color: currentColor;
  transition: all 180ms ease;

  &:hover {
    .footer-list-icon {
      scale: 1.3;
      transition: all 180ms ease;
    }
  }
}

.footer-list-icon {
  width: 1.5rem;
  height: 1.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
}

.footer-socials {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 2.875rem;
  padding-block: 2.5rem 0.5rem;
  border-top: 1px solid var(--white-clr-800);
}

.footer-socials-line {
  flex-grow: 1;
  height: 2px;
  background-color: var(--white-clr);
  width: 100px;
}

.footer-social-links {
  display: flex;
  gap: 4rem;

  @media (width <=600px) {
    --_social-icon-size: 2.125rem;
    gap: 1.5rem;
    width: 100%;
    justify-content: space-between;
  }

  .social-icon-32 {
    width: var(--_social-icon-size, 2.25rem);
    height: var(--_social-icon-size, 2.25rem);
    color: var(--white-clr);
  }
}

.footer-social-link {
  width: 2rem;
  height: 2rem;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  background-color: var(--secondary-clr);
  border-radius: 50%;
  transition: all 180ms ease-in-out;

  &:hover {
    scale: 1.2;
    transition: all 180ms ease-in-out;
  }
}

.footer-bottom,
.footer-bottom-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.footer-bottom {
  @media screen and (width <=600px) {
    flex-wrap: wrap;
  }
}

/* End of Footer */

/* END OF HEADER FOOTER */

/* Utilities */
.btn-pill {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 6.25rem;
  background-color: var(--_btn-clr);
  color: var(--_btn-txt-clr);
  padding: 1.25em 2.25rem;
  border: none;
  border-radius: 100vw;
  font-size: var(--_btn-fs, var(--fs-400));
  font-weight: var(--_btn-fw, var(--fw-700));
  text-align: center;
  text-wrap: nowrap;
  text-transform: uppercase;
  transition: flex 500ms ease, width 500ms ease, padding 300ms ease;

  a {
    all: unset;
  }

  &:hover {
    color: var(--_btn-clr);
    background-color: var(--_btn-txt-clr);
    outline: 1px solid var(--_btn-clr);

    transition: all 180ms ease;

    .btn-icon {
      svg {
        path {
          fill: currentColor;
        }
      }
    }
  }

  &:has(.btn-icon),
  &:has(.bx) {
    --_btn-clr: var(--_btn-icon-clr);
    --_btn-txt-clr: var(--_btn-icon-txt-clr);

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0.625rem;

    .btn-icon {
      flex-shrink: 0;
      width: var(--_btn-icon-size, 1.25rem);
      height: var(--_btn-icon-size, 1.25rem);
      aspect-ratio: 1;

      svg {
        width: 100%;
        height: 100%;
      }
    }
  }

  &.btn-primary {
    --_btn-clr: var(--primary-clr);
    --_btn-txt-clr: var(--white-clr);
  }

  &.btn-secondary {
    --_btn-clr: var(--secondary-clr);
    --_btn-txt-clr: var(--white-clr);
  }

  &.btn-secondary-900 {
    --_btn-clr: var(--secondary-clr-900);
    --_btn-txt-clr: var(--white-clr);
  }

  &.btn-tertiary {
    --_btn-clr: var(--tertiary-clr);
    --_btn-txt-clr: var(--white-clr);
  }

  &.btn-tertiary-900 {
    --_btn-clr: var(--tertiary-clr-900);
    --_btn-txt-clr: var(--white-clr);
  }

  &.btn-outline,
  &.btn-outline-tertiary {
    --_btn-clr: var(--white-clr);
    --_btn-txt-clr: var(--tertiary-clr);
    border: 1px solid var(--_btn-txt-clr);
  }

  &.btn-outline-tertiary-900 {
    --_btn-clr: var(--white-clr);
    --_btn-txt-clr: var(--tertiary-clr-900);
    border: 1px solid var(--_btn-txt-clr);
  }

  &.btn-outline-secondary-900 {
    --_btn-txt-clr: var(--secondary-clr-900);
    --_btn-clr: var(--white-clr);
    border: 1px solid var(--_btn-txt-clr);
  }

  &.btn-outline-primary {
    --_btn-clr: var(--white-clr);
    --_btn-txt-clr: var(--primary-clr);
    border: 1px solid var(--_btn-txt-clr);
  }

  &.btn-outline-secondary {
    --_btn-clr: var(--white-clr);
    --_btn-txt-clr: var(--secondary-clr);
    border: 1px solid var(--_btn-txt-clr);
  }

  &.btn-outline-secondary-900 {
    --_btn-clr: var(--white-clr);
    --_btn-txt-clr: var(--secondary-clr-900);
    border: 1px solid var(--_btn-txt-clr);
  }

  &.btn-fw-500 {
    --_btn-fw: var(--fw-500);
  }

  &.btn-sm {
    padding-block: 1rem;

    @media (width <=768px) {
      --_btn-fs: 0.875rem;
    }
  }

  &.btn-md {
    padding-inline: 1.625rem;
  }

  &.btn-xl {
    padding: 1rem 2.5rem;
  }

  &.btn-2xl {
    width: 13.5rem;
  }

  &.btn-3xl {
    padding: 0.875rem;
    width: 20.5rem;
  }

  &.btn-full {
    width: 100%;
  }

  &.btn-partner {
    border: none;
    border-bottom: 2px solid var(--secondary-clr);

    &:hover {
      outline: none;
      border-bottom-color: var(--white-clr);
    }
  }
}

.h1 {
  font-weight: var(--fw-900);
  font-size: var(--fs-1000);
  line-height: 1.14;
}

h2 {
  margin-bottom: 0;
  color: var(--tertiary-clr-900);
}

/* End of Utilities */

/* Css Only Carousel */
.trusted-institutions-slider {
  --_institution-width: 12.75rem;
  --_institution-height: 8.5rem;
  --_institution-spacing: 2rem;

  margin-top: 1.625rem;
  width: 100%;
  height: var(--_institution-height);
  mask-image: linear-gradient(
    to right,
    transparent,
    rgba(0, 0, 0) 10% 90%,
    transparent
  );
  overflow-x: clip;

  &.reverse {
    --_animation-direction: reverse;
  }
}

.trusted-institutions {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--_institution-spacing);
  position: relative;
  min-width: calc(
    (var(--_institution-width) + var(--_institution-spacing)) *
      var(--_institution-quantity)
  );

  &:hover {
    .institution {
      animation-play-state: paused !important;
    }
  }

  .institution {
    --_animation-duration: calc(var(--_institution-quantity) * 5s);
    position: absolute;
    z-index: 1;
    left: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    filter: grayscale(1);

    transition: filter 300ms ease;
    animation: institutionSlider var(--_animation-duration) linear infinite;
    animation-direction: var(--_animation-direction);
    animation-delay: calc(
      (-1 * var(--_animation-duration) / var(--_institution-quantity)) *
        (var(--_institution-position) - 1)
    );

    &:hover {
      filter: grayscale(0);
      background-color: var(--white-clr);
    }

    img {
      padding: 1.25rem 1.5rem;
      width: var(--_institution-width);
      height: var(--_institution-height);
      object-fit: contain;
    }
  }
}

@keyframes institutionSlider {
  from {
    left: 100%;
  }

  to {
    left: calc(var(--_institution-width) * -1);
  }
}

/* End of Css Only Carousel */

body {
  font-family: var(--ff-satoshi);
  background-color: var(--white-clr-800);
  line-height: 1.6;
}

.wrapper {
  --_max-width: 1600px;

  @media (width <=768px) {
    --_gap: 0px !important;
  }
}

/* Hero */
.hero {
  color: var(--white-clr);
  overflow-x: clip;
}

.hero-content {
  border-radius: 3rem 3rem 0 0;
  padding-block: clamp(3rem, 5vw + 1.5rem, 6rem) 6rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  backdrop-filter: blur(40px);
  background-image: url("/assets/images/home/hero.png");
  background-size: cover;
  background-position: center;
  scale: crop;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    background: url("/assets/images/home/hero-gradient.png");
    background-size: cover;
    background-position: center;
    opacity: 0.3;
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    background: url("/assets/images/home/hero-gradient.png");
    background-size: cover;
    /* background-size: 100% 180%; */
    background-position: center;
    opacity: 0.5;
  }

  .hero-header {
    grid-column: 2/12;
  }

  .hero-body {
    grid-column: 3/11;
  }

  .hero-footer {
    grid-column: 2/12;
  }

  @media (width <=1200px) {
    padding-inline: 1.25rem;

    .hero-header {
      grid-column: 1/-1;
    }
  }

  @media (width <=1024px) {
    .hero-body {
      grid-column: 2/12;
    }

    .hero-footer {
      grid-column: 1/-1;
    }
  }

  @media (width <=768px) {
    background-size: 60rem 40rem;
    background-size: 65rem 41rem;
    /* background-repeat: no-repeat; */
    background-position-y: top;

    .hero-body {
      grid-column: 1/-1;
    }

    /* padding-inline: 1.25rem; */

    /* .hero-footer {
      grid-column: 1/-1;
    } */
  }
}

.hero-header {
  text-align: center;
  text-transform: uppercase;

  > * {
    margin-inline: auto;
  }

  p {
    padding-top: clamp(1.125rem, 2.6vw + 1rem, 3rem);
    font-size: var(--fs-600);
    line-height: 1.3;
  }

  @media (width <=1024px) {
    .h1 {
      font-size: var(--fs-950);
    }

    p {
      font-size: var(--fs-500);
    }
  }

  @media (width <=600px) {
    .h1 {
      font-size: var(--fs-650);
    }

    p {
      max-width: 25ch;
      font-size: var(--fs-400);
    }
  }
}

.hero-body {
  padding-block: 11.25rem 4.25rem;
  text-align: center;

  p {
    padding-bottom: 3rem;
    max-width: 35ch;
    margin-inline: auto;
    font-size: var(--fs-500);
  }

  @media (width <=1024px) {
    padding-top: 9rem;

    p {
      font-size: var(--fs-450);
    }
  }

  @media (width <=600px) {
    padding-top: 8.5rem;

    p {
      font-size: var(--fs-400);
    }
  }
}

.autoComplete_wrapper {
  display: flex;
}
.enhanced-results-list {
  max-height: 380px;
  padding-top: 0;
  top: 5.5rem;
  border-radius: 1.5rem;
}

.enhanced-result-item.group-header {
  padding: 1.125rem 1rem;
}

.hero-search {
  height: 78px;
  max-width: 800px;
  margin-inline: auto;
  padding: 0.625rem;
  background-color: var(--white-clr);
  border-radius: 100vw;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-weight: var(--fw-500);
  transition: 300ms ease;
  isolation: isolate;

  &:focus-within {
    outline: 2px solid var(--secondary-clr);
  }

  input {
    flex: 1 0 0;
    background-color: transparent;
    border: none;
    min-width: 0;

    &:focus-visible {
      outline: none;
    }
  }

  &:has(.course-search:focus-visible) {
    isolation: revert;

    .course-search-label {
      width: 0;
      flex: 0 0 auto;
      scale: 0;
      white-space: nowrap;
      opacity: 0;
      display: none;
      /* position: absolute; */
      z-index: -1;
      transform: scale(0);
      transform-origin: left center;
      /* transition: all 400ms ease-out; */
      transition: width 400ms ease-out, flex 400ms ease-out,
        transform 10ms 400ms ease-out, display 400ms ease-out;

      transition-behavior: allow-discrete;
    }

    .course-search-wrapper {
      flex: 1;
      min-width: 0;
      /* transition: all 400ms ease-out; */
      transition: all 400ms ease-out;
    }
  }

  .course-search-label {
    flex: 1;
    height: 56px;
    padding: 1rem;
    color: #7c7c80;
    text-align: left;
    transition: 600ms ease-in;
  }

  .course-search-wrapper {
    max-height: 48px;
    width: 360px;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;

    background-color: var(--white-clr);
    border: 1px solid var(--border-clr-900);
    border-radius: 100vw;
    transition: 600ms ease-in;
  }

  .course-search {
    flex: 1 0 1;
  }

  .search-btn {
    cursor: pointer;
    background-color: var(--tertiary-clr-900);
    padding: 1rem;
    border: none;
    border-radius: 50%;
  }

  @media (width <=1200px) {
    max-height: revert;
    padding: 0.5rem;
    height: auto;

    .course-search-label {
      display: none;
    }

    .course-search-wrapper {
      flex: 1;
      min-width: 0;
      border: none;

      svg {
        display: none;
      }
    }
  }

  @media (width <=768px) {
    padding: 0.25rem;

    .course-search {
      text-indent: 1.25rem;
      padding: 0.5rem;
    }
  }
}

.hero-footer {
  @media (width <=768px) {
    position: relative;

    &::after {
      content: "";
      inset-inline: -1.25rem;
      top: 2rem;
      height: 30rem;
      width: 100vw;
      position: absolute;
      z-index: -1;
      background-color: rgb(25, 24, 50);
      opacity: 0.7;
      backdrop-filter: blur(10rem);
    }
  }

  .achievements {
    padding: min(7%, 5rem) min(7%, 6rem);
    display: flex;
    justify-content: space-between;
    border-radius: 1rem;
    border: 1px solid var(--tertiary-clr-900);
    backdrop-filter: blur(40px);

    @media (width <=768px) {
      gap: 2rem;
      flex-direction: column;
    }
  }

  .achievement {
    text-align: center;

    > * {
      display: block;
    }

    span {
      /* font-size: 3.5rem; */
      font-size: var(--fs-850);
      font-weight: var(--fw-900);
      line-height: 0.97;
    }

    small {
      font-size: var(--fs-550);
      font-weight: var(--fw-500);
      color: #b6b1b1;
    }
  }

  .separator {
    width: 1px;
    background: #4a4e73;

    @media (width <=768px) {
      height: 1px;
      margin-inline: auto;
      width: min(100%, 92px);
    }
  }
}

/* End of Hero */

/* Courses */
.courses {
  isolation: isolate;
}

.courses-content {
  --_course-top: -4.625rem;
  padding-bottom: clamp(3rem, 5vw + 1.5rem, 6rem);
  margin-top: clamp(-0.5rem, 5vw - 3.125rem, 3rem);
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  text-align: center;

  &::before {
    content: "";
    inset: 0;
    z-index: -1;
    top: var(--_course-top);
    position: absolute;
    border-radius: 3rem;
    background: linear-gradient(
      180deg,
      var(--white-clr) 67.72%,
      var(--white-clr-800) 96.2%
    );
  }

  .courses-header {
    grid-column: 3/11;
  }

  .courses-tabs,
  .courses-list {
    grid-column: 1/-1;
  }

  .btn-pill {
    grid-column: 1/-1;
    justify-self: center;
  }

  @media (width <=1200px) {
    .courses-header {
      grid-column: 2/-2;
    }
  }

  @media (width <=600px) {
    grid-template-columns: repeat(4, 1fr);

    padding-inline: 1.25rem;

    .courses-header {
      grid-column: 1/-1;
    }
  }
}

.courses-header {
  h2 {
    text-transform: uppercase;

    @media (width <=1024px) {
      font-size: var(--fs-950);
    }

    @media (width <=600px) {
      font-size: 2rem;
    }
  }
}

.courses-preheading {
  padding-bottom: 3rem;
  text-transform: uppercase;
  max-width: 520px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;

  font-weight: var(--fw-700);
  font-size: var(--fs-400);
  line-height: 1.2;

  @media (width <=768px) {
    padding-bottom: 6rem;
    flex-direction: column;
    text-align: center;

    &::after {
      content: "";
      position: relative;
      bottom: -3rem;
      width: 50%;
      height: 1px;
      border: 1px solid #c3c5da;
    }
  }
}

.courses-header-text {
  font-size: var(--fs-500);
  font-weight: var(--fw-500);
  padding-block: 1.5rem 3rem;

  @media (width <=1024px) {
    font-size: var(--fs-450);
  }

  @media (width <=600px) {
    font-size: var(--fs-400);
  }
}

.courses-preheading-icon {
  min-width: fit-content;
  display: inline-block;
  padding: 1rem;
  background-color: var(--white-clr-800);
  border-radius: 50%;
}

.courses-tabs {
  margin-inline: auto;

  position: relative;
  isolation: isolate;
  padding: 0.375rem;
  margin-bottom: 1.5rem;
  width: fit-content;
  min-height: 50px;
  display: flex;
  align-items: stretch;
  background-color: var(--tertiary-clr-100);
  border-radius: 100vw;

  .slide {
    position: absolute;
    height: calc(100% - 10px);
    top: 5px;
    left: var(--_slide-left, 0.25rem);
    width: var(--_slide-width, 12rem);
    z-index: -1;
    background-color: var(--tertiary-clr-900);
    border-radius: inherit;
    transition: all 0.5s ease;
  }

  .tab {
    --_tab-padding-inline: 0.625rem;
    cursor: pointer;
    flex: 0 0 auto;
    /* Will be set by JS */
    width: auto;
    min-width: auto;
    padding: var(--_tab-padding-inline) 1rem;
    text-align: center;
    padding: var(--_tab-padding-inline) 1rem;
    text-align: center;
    font-weight: var(--fw-500);
    font-size: var(--_slide-fs, var(--fs-400));
    text-transform: uppercase;
    background-color: transparent;
    border: none;
    border-radius: inherit;
    transition: color 0.3s ease;
    position: relative;

    &.tab-active {
      color: var(--white-clr);
    }
  }

  @media (width <=768px) {
    --_slide-fs: 0.875rem;
  }

  @media (width <=480px) {
    --_slide-fs: 0.75rem;
  }
}

.courses-list {
  padding: 2rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.125rem;

  @media (width <=1200px) {
    padding: 1.5rem;
    /* grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
  }

  @media (width <=600px) {
    padding: 1.25rem 0;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .course-item {
    padding: 1.25rem 0.875rem 3rem 0.875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: start;
    outline: 1px solid #e8e8fd;
    border-radius: 1.25rem;
    background-color: #fafafc;
    transition: 300ms ease all;

    &:hover,
    &:focus-within {
      background-color: var(--white-clr);
      outline-width: 2px;
      box-shadow: 0px 0px 30px 0px #2c2f4a0d;

      .course-link {
        rotate: 0deg;
        opacity: 1;
        background-color: var(--white-clr-800);
        pointer-events: revert;
      }
    }

    p {
      max-width: 15ch;
      font-weight: var(--fw-500);
      font-size: 0.875rem;
      line-height: 0.97;
      text-align: center;
      color: var(--secondary-clr);
    }

    @media (width <=600px) {
      padding: 1rem 0.75rem 2.625rem 0.75rem;
    }
  }

  .course-link {
    opacity: 0;
    align-self: end;
    pointer-events: none;
    border-radius: 50%;
    padding: 0.75rem;
    rotate: -90deg;
    transition: 300ms ease all;

    &:focus-visible {
      outline: none;
    }
  }

  .course-img {
    height: 2.125rem;
    width: 2.125rem;
    aspect-ratio: 1;
    overflow: hidden;

    svg,
    img {
      width: 100%;
      height: 100%;
      aspect-ratio: 1;

      filter: drop-shadow(100px 0 0 var(--secondary-clr));
      transform: translateX(-100px);
    }
  }

  .course-title {
    max-width: 15ch;
    padding-block: 2rem 0.5rem;
    line-height: 1.05;
    font-size: var(--fs-450);
    font-weight: var(--fw-700);
    text-transform: uppercase;
    color: var(--tertiary-clr-900);
  }

  .course-availability {
    grid-column: 2/3;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;

    svg {
      width: 12px;
      height: 12px;
      aspect-ratio: 1;
    }
  }
}

/* End of Courses */

/* Steps */
.steps {
  --_gap: 1.125rem !important;
}

.steps-content {
  padding-block: clamp(3.5rem, 6vw + 1.5rem, 7rem);
  display: grid;
  grid-template-columns: repeat(12, 1fr);

  .steps-header {
    grid-column: 1/8;
  }

  .steps-body {
    grid-column: span 5;
  }

  .steps-list {
    grid-column: 1/-1;
  }

  @media (width > 768px) {
    padding-inline: 4.5rem;
  }

  @media (width <=1200px) {
    .steps-header {
      grid-column: 1/7;
    }

    .steps-body {
      grid-column: span 6;
    }
  }

  @media (width <=1024px) {
    .steps-header,
    .steps-body {
      grid-column: 1/-1;
    }
  }
}

.steps-header {
  color: var(--tertiary-clr-900);
  text-transform: uppercase;

  h2 {
    font-size: var(--fs-850);
    font-weight: var(--fw-900);
    line-height: 1.25;
  }

  p {
    font-weight: var(--fw-500);
    font-size: var(--fs-650);
  }
}

.steps-body {
  display: grid;
  gap: 1rem;
  align-content: space-between;

  p {
    max-width: 55ch;
    font-size: var(--fs-425);
    font-weight: var(--fw-500);
    color: var(--black-clr);

    @media (width <=1024px) {
      padding-block: 2.25rem 0.5rem;
      font-size: var(--fs-400);
    }
  }

  .btns {
    display: flex;
    gap: 0.5rem;

    @media (width <=480px) {
      flex-direction: column;
    }
  }
}

.steps-list {
  counter-reset: steps;
  padding-top: clamp(3rem, 6vw + 0.5rem, 4.5rem);

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  display: grid;

  @media (width <=1024px) {
    /* min-height: 468px; */
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 468px);
  }
}

.step-card {
  --_steps-padding: 2.25rem;
  counter-increment: steps;
  padding: var(--_steps-padding);
  position: relative;
  border-radius: 1.5rem;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  text-align: center;
  color: var(--white-clr);

  &::before {
    content: counter(steps);
    width: 72px;
    height: 72px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: var(--fw-700);
    font-size: var(--fs-650);
    border-radius: 50%;
    background-color: var(--tertiary-clr-900);
  }

  .step-card-img {
    z-index: -2;
    border-radius: inherit;
    inset: 0;
    position: absolute;

    img {
      border-radius: inherit;
      object-fit: cover;
      width: 100%;
      height: 100%;
    }

    &::before {
      /* TODO: Fix blur under text */
      content: "";
      position: absolute;
      inset: 0;
      opacity: 0.15;
      background: url("/assets/images/home/hero-gradient.png");
      border-radius: inherit;
    }

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      height: 130px;
      inset-inline: 0;
      backdrop-filter: blur(8px);
      border-bottom-left-radius: inherit;
      border-bottom-right-radius: inherit;
    }
  }

  h3 {
    margin-top: auto;
    font-weight: var(--fw-900);
    font-size: var(--fs-800);
    text-transform: uppercase;
  }

  p {
    margin-inline: auto;
    max-width: 20ch;
    font-weight: var(--fw-500);
    font-size: var(--fs-450);

    @media (width <=1024px) {
      font-size: 1.125rem;
    }
  }

  @media (width >1024px) {
    min-height: 586px;
  }
}

/* End of Steps */

/* Quote */
.quote {
  --_gap: 1.125rem !important;
}

.quote-content {
  padding: clamp(4.5rem, 8vw + 1.5rem, 5.75rem) 1.125rem;

  text-align: center;
  background-image: url("/assets/images/home/quote.png");
  background-position: center;
  background-size: cover;
  border-radius: 3rem;

  > * {
    margin-inline: auto;
  }

  h2 {
    max-width: 45ch;
    padding-bottom: 3rem;
    font-size: var(--fs-700);
    font-weight: var(--fw-700);
    line-height: 1.3;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--white-clr);

    @media (width <=768px) {
      font-size: var(--fs-550);
    }
  }

  .btn-pill {
    width: fit-content;
  }
}

/* End of Quote */

/* Counsellors */
.counsellors {
  --_gap: 1.125rem !important;
}

.counsellors-content {
  padding-block: clamp(3.5rem, 6vw + 1.5rem, 7rem);

  @media (width > 768px) {
    padding-inline: 4.5rem;
  }
}

.counsellors-header {
  padding-bottom: 56px;
  display: grid;
  grid-template-columns: auto 1fr;

  @media (width > 480px) {
    .btn-pill {
      width: fit-content;
    }
  }

  @media (width > 1024px) {
    &:not(.btn-pill) {
      grid-column: 1;
    }

    .btn-pill {
      align-self: end;
      justify-self: end;
      grid-column: 2;
      grid-row: 1 / span 2;
    }
  }

  @media (width <=1024px) {
    grid-template-columns: 1fr;

    p {
      padding-block: 2rem 2.25rem;
    }
  }

  h2 {
    color: var(--tertiary-clr-900);
    font-size: var(--fs-800);
    font-weight: var(--fw-900);
    text-transform: uppercase;

    span {
      display: block;
      font-weight: var(--fw-700);
      line-height: 1.2;
    }

    @media (width <=1022px) {
      font-size: var(--fs-700);
    }
  }

  p {
    font-weight: var(--fw-500);
    font-size: var(--fs-400);
    color: var(--black-clr);
  }
}

.counsellors-icon-list {
  padding-block: var(--_counsellors-icon-list-padding, 3rem);
  display: flex;
  gap: var(--_counsellors-icon-list-gap, 3.5rem);
  border-block: 1px solid #d2d5ed;

  @media (width <=1024px) {
    --_item-title-additional-spacing: 0.5rem;
    --_counsellors-icon-list-gap: 3rem;
    --_counsellors-icon-list-padding: 2.25rem 4rem;

    flex-direction: column;
  }

  li {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: 0.25rem 1rem;
    align-items: center;

    > .item-icon {
      grid-row: span 2;
    }

    @media (width <=600px) {
      justify-items: center;
      grid-template-columns: 1fr;
      gap: 0.75rem;
    }
  }

  .item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    background-color: var(--white-clr);
    border-radius: 50%;
  }

  .item-title {
    padding-top: var(--_item-title-additional-spacing, 0);
    align-self: end;
    line-height: 1;
    font-weight: var(--fw-700);
    font-size: 1.125rem;
    text-transform: uppercase;
    color: var(--tertiary-clr-900);
  }

  .item-text {
    align-self: start;
    font-weight: var(--fw-500);
    font-size: var(--fs-400);
    color: #1a1a1a;
  }
}

.round-btns-wrapper {
  &.right-align {
    position: relative;

    .round-btns {
      position: absolute;
      z-index: 1;
      padding-left: 2rem;
      margin-left: auto;
      top: -28px;
      inset-inline: 0;
      background-color: var(--white-clr-800);

      @media (width <=600px) {
        margin-inline: auto;
        padding-right: 2rem;
      }
    }
  }
}

.round-btns {
  width: fit-content;
  display: flex;
  gap: 1.5rem;

  .prev-btn,
  .next-btn {
    cursor: pointer;
    width: 3rem;
    height: 3rem;
    aspect-ratio: 1;
    border-radius: 50%;
    border: none;
    color: var(--tertiary-clr-900);
    background-color: var(--white-clr);

    &:hover {
      background-color: var(--tertiary-clr-900);
      border-color: var(--tertiary-clr-900);
      color: var(--white-clr);
    }

    &:disabled {
      color: var(--white-clr);
      background-color: var(--border-clr);
      outline: 1px solid var(--white-clr);
    }

    svg {
      margin: auto;
    }
  }
}

.counsellors-slider {
  padding-top: 3rem;
  overflow-x: clip;
}

.card-list {
  --_card-list-gap: 1.125rem;
  --_card-size: 344px;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--_card-size);
  touch-action: pan-y pinch-zoom;

  /* Card list gap */
  margin-right: calc(var(--_card-list-gap) * -1);

  > * {
    margin-right: var(--_card-list-gap);
  }

  @media (width <=400px) {
    --_card-size: max(100%, 344px);
  }
}

.card-body {
  margin-top: 1.25rem;
  padding: 1.125rem 1rem;
  font-weight: var(--fw-500);
  font-style: Medium;
  font-size: var(--fs-300);
  color: #090820;
  background-color: #ededf6;
  border-radius: 0.5rem;
}

.card-tags {
  max-height: 74px;
  overflow-y: clip;
  margin-block: 1.125rem;
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 0.375rem;
}

.card-tag {
  padding: 0.375rem 0.5rem;
  font-weight: var(--fw-500);
  background-color: #f8f8f9;
  border: 1px solid #c8cad9;
  font-size: var(--fs-200);
  border-radius: 100vw;
}

/* End of Counsellors */

/* Events */
.events {
  --_gap: 1.125rem !important;
}

.events-content {
  padding-block: clamp(3.5rem, 6vw + 1.5rem, 7rem);

  .events-btns {
    margin-left: auto;
    top: -28px;
    inset-inline: 0;
    width: fit-content;
    display: flex;
    gap: 1rem 0.25rem;
    background-color: var(--white-clr-800);

    @media (width <=480px) {
      width: 100%;
      flex-direction: column;
    }
  }

  @media (width <=768px) {
    display: flex;
    flex-direction: column;

    .round-btns-wrapper {
      padding-top: 2.25rem;
      position: relative;

      &::before {
        height: 1px;
        background-color: #d2d5ed;
      }
    }

    .round-btns {
      position: static;
    }

    .events-btns-wrapper {
      order: 1;
    }

    .events-btns {
      padding-top: 2.25rem;
      margin-right: auto;
    }
  }

  @media (width > 768px) {
    padding-inline: 4.5rem;

    > .event-focus-img {
      display: none;
    }

    .round-btns-wrapper {
      display: none;
    }

    .events-btns-wrapper {
      position: relative;
    }

    .events-btns {
      position: absolute;
      padding-left: 2rem;
    }
  }
}

.events-header {
  h2 {
    text-transform: uppercase;
    font-size: var(--fs-950);

    @media (width <=1024px) {
      font-size: var(--fs-850);
    }
  }

  p {
    padding-block: 2.25rem;
    font-weight: var(--fw-500);
    color: var(--black-clr);
    border-bottom: 1px solid #d2d5ed;
  }
}

.events-body {
  --_card-list-gap: 1.125rem;
  --_card-size: 340px;
  --_card-title-width: 260px;
  padding-top: 4rem;

  @media (width <=400px) {
    --_card-size: max(100%, 308px);
  }

  @media (width > 1200px) {
    --_card-size: 308px;
    --_card-title-width: 230px;

    display: grid;
    grid-template-columns: 1fr 600px;
    grid-template-rows: fit-content(668px);
    grid-template-rows: 668px;
    align-content: start;
    gap: var(--_card-list-gap);

    .event-focus-img {
      display: block;
    }
  }
}

.events-slider {
  overflow-x: clip;
}

.event-card-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--_card-size);
  touch-action: pan-y pinch-zoom;
  /* For gapping */
  margin-right: calc(var(--_card-list-gap) * -1);

  > * {
    margin-right: var(--_card-list-gap);
  }

  @media (width <=768px) {
    > .event-focus-img {
      display: none;
    }
  }

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

    &.border {
      padding-bottom: 1rem;
      margin-bottom: 1rem;
      border-bottom: 1px solid #e8e8f7;
    }
  }

  .icon-key {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    justify-content: center;
  }

  .title {
    color: #a9a9b8;
    font-weight: var(--fw-500);
    font-size: var(--fs-300);
  }

  .icon-value {
    color: #090820;
    font-weight: var(--fw-500);
    font-size: var(--fs-300);
  }
}

.event-focus-img {
  display: none;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 2.25rem;
  }
}

.event-card {
  position: relative;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  border-radius: 2.25rem;
  border: 1px solid #ddddeb;
  background-color: var(--white-clr);

  .btns {
    --_btn-icon-size: 1.875rem;

    margin-top: auto;
    display: flex;
    justify-content: stretch;
    gap: 0.75rem;

    > * {
      flex-grow: 1;
    }
  }

  .expired {
    position: absolute;
    top: 1.625rem;
    left: 1.625rem;
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem;
    color: var(--white-clr);
    background-color: #f42b3f;
    border-radius: 100vw;

    font-weight: 500;
    font-size: 0.875rem;
  }

  .icon-text,
  .card-body,
  .card-tags {
    margin-inline: 0.5rem;
  }

  .card-body {
    max-height: 284px;
  }
}

.event-card-img {
  padding-bottom: 1rem;

  img {
    width: 100%;
    height: 275px;
    border-radius: 1.5rem;
    object-fit: cover;
    outline: 1px solid var(--white-clr);
  }
}

.event-card-title {
  padding: 1rem;
  position: absolute;
  inset-inline: 0;
  margin-inline: auto;
  top: 176px;
  width: var(--_card-title-width);
  font-weight: var(--fw-500);
  font-size: 0.875rem;
  line-height: 100%;
  color: #090820;

  backdrop-filter: blur(30px);
  background-color: #ededf6cc;
  border-radius: 0.75rem;
}

.event-card-name {
  --_line-clamp: 1;
}

.event-card-location {
  margin-top: 1rem;
  padding-top: 1rem;
  display: flex;
  gap: 0.375rem;
  align-items: center;
  border-top: 1px solid #ccb2ba;

  .icon {
    flex-shrink: 0;
  }
}

/* End of Events */

/* Testimonials */

/* .embla__viewport {
} */

/* .embla__container {
  display: flex;
  touch-action: pan-y pinch-zoom;
  margin-left: calc(var(--slide-spacing) * -1);
} */
/* .embla__slide {
  transform: translate3d(0, 0, 0);
  flex: 0 0 var(--slide-size);
  min-width: 0;
  padding-left: var(--slide-spacing);
} */

/* .embla__slide__number {
  box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
  border-radius: 1.8rem;
  font-size: 4rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--slide-height);
  user-select: none;
} */
/* .embla-thumbs {
  --thumbs-slide-spacing: 0.8rem;
  --thumbs-slide-height: 6rem;
  margin-top: var(--thumbs-slide-spacing);
}
.embla-thumbs__viewport {
  overflow: hidden;
} */
/* .embla-thumbs__container {
  display: flex;
  flex-direction: row;
  margin-left: calc(var(--thumbs-slide-spacing) * -1);
} */
/* .embla-thumbs__slide {
  flex: 0 0 22%;
  min-width: 0;
  padding-left: var(--thumbs-slide-spacing);
} */

/* @media (min-width: 576px) {
  .embla-thumbs__slide {
    flex: 0 0 15%;
  }
} */
/* .embla-thumbs__slide__number {
  border-radius: 1.8rem;
  -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  touch-action: manipulation;
  display: inline-flex;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--detail-high-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--thumbs-slide-height);
  width: 100%;
} */
/* .embla-thumbs__slide--selected .embla-thumbs__slide__number { */
/* .embla-thumbs__slide--selected .embla-thumbs__slide__number { */
/* .active .embla-thumbs__slide__number {
  color: var(--text-body);
} */

.testimonials {
  --_gap: 1.125rem !important;

  --_card-size: 524px;
  --_card-list-gap: 1.5rem;
  --_navigations-spacing: 1.125rem;
  --_navigation-size: 4rem;
}

.testimonials-content {
  padding-block: clamp(3.5rem, 6vw + 1.5rem, 7rem);
  border-radius: 2rem;
  background-color: var(--white-clr-900);
  border: 1px solid var(--white-clr);
  overflow-x: clip;

  .round-btns {
    padding-block: 2.5rem;
    margin-inline: auto;
  }

  @media (width > 768px) {
    .round-btns {
      position: relative;
      padding-block: 2rem;
      width: auto;
    }

    .prev-btn,
    .next-btn {
      z-index: 1;
      position: absolute;
      bottom: -9rem;
      inset-inline: 0;
      background-color: var(--tertiary-clr-900);
      color: var(--white-clr);
      outline: 1px solid var(--white-clr);
      transition: all 300ms ease;

      &:hover {
        scale: 1.1;
      }
    }

    .prev-btn {
      margin-inline: var(--_card-list-gap) auto;
    }

    .next-btn {
      margin-inline: auto var(--_card-list-gap);
    }
  }
}

.testimonials-header {
  display: grid;

  h2 {
    padding-inline: 1.125rem;
    text-align: center;
    font-size: var(--fs-850);
    font-weight: var(--fw-900);
    text-transform: uppercase;

    span {
      display: block;
      font-weight: var(--fw-700);
      line-height: 1.2;
    }

    @media (width <=1024px) {
      font-size: var(--fs-700);
    }
  }

  p {
    font-weight: var(--fs-500);
    font-size: var(--fs-500);
    color: var(--black-clr);
  }
}

.testimonial-slider {
  /* --slide-height: 19rem;
  --slide-spacing: 1rem;
  --slide-size: 100%; */

  overflow-x: clip;
  margin-inline: var(--_card-list-gap);

  @media (width <=1024px) {
    --_card-list-gap: 1rem;
  }

  @media (width <=768px) {
    --_card-list-gap: 0.75rem;
  }

  @media (width <=600px) {
    --_card-size: 100%;
    /* --_card-list-gap: 0.625rem; */
  }
}

.embla-thumbs {
  width: min(574px, 100%);
  margin-inline: auto;
  overflow-x: clip;
  overflow-clip-margin: 2rem;
}

.testimonial-navigations {
  margin-inline: auto;
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid #cccee5;
  display: flex;
  align-items: center;
  justify-content: center;

  /* For agpping */
  margin-left: calc(var(--_navigations-spacing) * -1);

  > * {
    margin-left: var(--_navigations-spacing);
  }
}

.navigation {
  /* margin-left: 1.125rem; */
  margin-bottom: 5.75rem;

  .navigation-btn {
    border-radius: 50%;
    aspect-ratio: 1;
    border: none;
    /* min-width: fit-content; */
    width: var(--_navigation-size);
    height: var(--_navigation-size);

    img {
      aspect-ratio: 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top;
      border-radius: inherit;
    }
  }

  &.active {
    position: relative;

    .navigation-btn {
      outline: 4px solid var(--secondary-clr-900);
    }

    &::after {
      content: attr(data-name);
      position: absolute;
      bottom: -3rem;
      left: -2rem;
      display: block;
      margin-inline: auto;
      width: fit-content;
      /* z-index: 2; */
      /* word-wrap: no-wrap; */
      white-space: nowrap;
      /* margin-block: 0.75rem 3rem; */
      padding: 0.625rem 1rem;
      font-weight: var(--fw-700);
      color: var(--tertiary-clr-900);
      border-radius: 100vw;
      background-color: var(--white-clr);
    }
  }

  @media (width <=1024px) {
    --_navigation-size: 3.5rem;
  }
}

.testimonial-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--_card-size);
  touch-action: pan-y pinch-zoom;

  /* Card list gap */
  margin-right: calc(var(--_card-list-gap) * -1);

  > * {
    margin-right: var(--_card-list-gap);

    /* @media (width <=600px) {
      margin-right: var(--_card-spacing);
    } */
  }
}

.testimonial {
  border-radius: 36px;
  border-width: 1px;
  padding: 36px;
  background-color: var(--white-clr);
  border: 1px solid #ebebf2;
  transition: 500ms all ease;

  &:not(.active) {
    opacity: 50%;
    scale: 0.9;
  }

  p {
    margin-bottom: 1.5rem;
    font-weight: var(--fw-700);
    font-size: 1.125rem;
    line-height: 1.3;
    color: var(--tertiary-clr-900);

    @media (width <=768px) {
      font-size: var(--fs-500);
    }
  }
}

.avatar-wrapper {
  padding-top: 1.5rem;
  display: grid;
  grid-template-columns: 64px auto;
  gap: 0.5rem 0.75rem;
  align-items: center;
  font-size: 0.875rem;
  line-height: 1.5em;
  border-top: 1px solid #e8e8f7;

  .avatar {
    grid-row: span 2;
  }

  .avatar-name {
    font-weight: var(--fw-700);
    font-size: var(--fs-450);
    color: var(--tertiary-clr-900);
    align-self: end;
  }

  .avatar-country {
    align-self: start;
    font-weight: var(--fw-500);
    font-size: var(--fs-400);
    color: #787b93;
  }
}

.avatar {
  outline-offset: 0.375rem;
  border-radius: 50%;

  img {
    width: 60px;
    height: 60px;
    aspect-ratio: 1;
    border: 4px solid #ebebf2;
    border-radius: inherit;
    aspect-ratio: 1;
    object-fit: cover;
  }
}

/* End of testimonials */

/* About Us */
.about-us {
  --_gap: 1.125rem !important;
}

.about-us-content {
  padding-block: 3.5rem;

  display: grid;
  grid-template-columns: repeat(12, 1fr);

  .about-us-img {
    grid-column: span 6;
  }

  .about-us-article {
    grid-column: span 6;
  }

  @media (width <=1024px) {
    grid-template-columns: repeat(8, 1fr);

    .about-us-article,
    .about-us-img {
      grid-column: 1/-1;
    }
  }
}

.about-us-img {
  margin-right: 2rem;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 2.25rem;
    border: 1px solid #ffffff;
  }

  @media (width <=1024px) {
    margin-right: 0;
    height: 540px;
  }

  @media (width <=768px) {
    height: 480px;
  }

  @media (width <=600px) {
    height: 420px;
  }
}

.about-us-article {
  padding: 2.125rem 3.5rem;

  @media (width <=1200px) {
    padding-inline: 2rem;
  }

  @media (width <=1024px) {
    padding: 2.5rem 0 0;
  }
}

.about-us-header {
  text-transform: uppercase;

  span {
    font-weight: var(--fw-500);
    font-size: 1.75rem;
    color: var(--secondary-clr-900);
  }

  h2 {
    padding-top: 2.25rem;
    font-size: var(--fs-850);
    font-weight: var(--fw-900);
    line-height: 1.1;
    text-transform: uppercase;

    @media (width <=1024px) {
      font-size: var(--fs-800);
    }
  }
}

.about-us-body {
  p {
    padding-block: 1.75rem 2.5rem;
    font-weight: var(--fw-500);
    /* font-size: var(--fs-400); */
    color: var(--black-clr);
  }

  .achievement-list {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(2, 1fr);
  }

  .achievement-item {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--white-clr);
    border-radius: 1.25rem;
    background-color: #f2f2f8;
    text-align: center;
    text-transform: uppercase;

    @media (width <=480px) {
      padding: 1.25rem;
    }

    svg {
      width: 36px;
      height: 36px;
    }

    span {
      padding-top: 2rem;
      font-weight: var(--fw-900);
      font-size: var(--fs-500);
      color: var(--tertiary-clr-900);
      line-height: 1.2;

      @media (width <=480px) {
        padding-top: 1.5rem;
        font-size: var(--fs-450);
      }

      &:has(+ small) {
        line-height: 1;
        font-weight: var(--fw-900);
        font-size: var(--fs-650);

        @media (width <=480px) {
          font-size: var(--fs-550);
        }
      }
    }

    small {
      padding-top: 1rem;
      text-align: center;
      font-weight: var(--fw-500);
      font-size: var(--fs-450);
      color: #6b6b6b;

      @media (width <=480px) {
        font-size: 0.875rem;
      }
    }
  }
}

/* End of About Us */

/* Trusted Institutions */
.trusted {
  --_gap: 1.125rem !important;
  position: relative;
}

.trusted-content {
  padding-block: clamp(4.5rem, 10vw + 1.25rem, 7.5rem)
    clamp(3rem, 7vw + 1rem, 6rem);

  overflow-x: clip;

  .embla__container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 160px;
    gap: 2rem;
  }
}

.trusted-header {
  text-align: center;

  h2 {
    padding-bottom: 2rem;
    text-transform: uppercase;
    font-weight: var(--fw-500);
    font-size: var(--fs-1000);

    span {
      font-weight: var(--fw-900);
    }

    @media (width <=1024px) {
      font-size: var(--fs-950);
    }

    @media (width <=600px) {
      font-size: var(--fs-800);
    }
  }

  p {
    margin-inline: auto;
    max-width: 60ch;
    font-weight: var(--fw-500);
    color: var(--black-clr);
  }
}

.slider-controls {
  margin-left: auto;
  margin-bottom: 0.625rem;
  display: flex;
  min-width: 8.75rem;
  justify-content: end;
  gap: 1rem;
}

/* End of Trusted Institutions */

/* Call To Action */
.call-to-action {
  --_gap: 1.125rem !important;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    z-index: -5;
    margin-inline: auto;
    width: 100%;
    height: 100%;
    background-color: var(--white-clr-800);
    border-radius: 3rem;
    bottom: -3rem;
  }
}

.call-to-action-content {
  position: relative;
  display: grid;
  border-radius: 2.5rem;

  @media (width >600px) {
    /* padding-block: 6rem; */
    padding-block: clamp(3rem, 9vw, 6rem);
    padding-inline: 2rem;

    &::after {
      content: "";
      position: absolute;
      z-index: -2;
      inset: 0;
      background-image: url("/assets/images/home/call-to-action.png");
      background-size: cover;
      background-position: right;
      transform: scaleX(-1);
      border-radius: inherit;
    }

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background-image: url("/assets/images/home/hero-gradient.png");
      background-size: cover;
      opacity: 0.25;
      border-radius: inherit;
    }
  }
}

.call-to-action-img {
  margin-bottom: 3rem;
  isolation: isolate;
  position: relative;
  border-radius: 2.25rem;

  img {
    height: 400px;
    transform: scaleX(-1);
    border-radius: inherit;
    object-fit: cover;
  }

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: url("/assets/images/home/hero-gradient.png");
    background-size: cover;
    opacity: 0.25;
    border-radius: inherit;
  }

  @media (width > 600px) {
    display: none;
  }
}

.call-to-action-card {
  border-radius: 1.5rem;
  width: fit-content;
  max-width: min(598px, 100%);

  h2 {
    font-weight: var(--fw-900);
    font-size: var(--fs-900);
    text-transform: uppercase;

    @media (width <=1024px) {
      font-size: var(--fs-800);
    }
  }

  p {
    padding-block: 2.25rem 2rem;
    color: var(--black-clr);
    font-size: var(--fs-450);
    font-weight: var(--fw-500);
  }

  .btns {
    display: flex;
    gap: 0.5rem;

    @media (width <=480px) {
      flex-direction: column;
    }
  }

  @media (width > 600px) {
    padding: 3rem 2.25rem;
    backdrop-filter: blur(60px);

    h2,
    p {
      color: var(--white-clr);
    }
  }
}

/* End of Call To Action */
/* Signup */
.signup {
  background-color: #f8f8f8;
  padding-block: 1rem 3rem;
  position: relative;
  overflow-x: clip;
  isolation: isolate;

  .star-1 {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 400px;
    color: #ffdb44;
  }

  .star-2 {
    position: absolute;
    z-index: -1;
    top: 44%;
    left: 46%;
    color: #ffd8a9;
  }

  .star-3 {
    position: absolute;
    z-index: -1;
    top: 80%;
    left: 50%;
    color: #ffd8a9;
  }

  .star-4 {
    position: absolute;
    z-index: -1;
    bottom: 5%;
    left: 40%;
    color: #ffdb44;
  }
}

.signup-content {
  display: grid;
  align-items: center;

  @media (width<=768px) {
    .column:last-of-type {
      grid-row: 1;
    }

    gap: 3rem;
  }

  @media (width<=500px) {
    .column:last-of-type {
      display: none;
    }
  }

  @media (width>768px) {
    gap: 1.5rem;
    grid-template-columns: 1fr 1fr;
  }

  @media (width<=1024px) {
    .btn {
      max-width: 10rem;
    }
  }
}

.signup-header {
  color: var(--black-clr);

  h2 {
    padding-block: 1.5rem;
  }
}

/* End of Signup */

/* Counselor */
.counselor {
  padding-block: clamp(3rem, 9vw, 6rem);
  background-color: #f9f2f74d;
  position: relative;
  isolation: isolate;

  &::after {
    content: "";
    position: absolute;
    top: 216px;
    right: 0;
    height: 517px;
    width: 399px;
    background-image: url("/assets/images/dotted-pattern.svg");
    /* background-repeat: no-repeat; */
    background-position: center;
    background-size: cover;
    background-size: 32.4%;
    z-index: -1;
  }

  @media (width <=1024px) {
    .btn {
      margin-top: 1.15rem;
      margin-inline: auto;
    }

    .counselor-figures {
      flex-wrap: wrap;
    }
  }

  @media (600px < width <=1024px) {
    .counselor-figures {
      justify-content: center;
    }
  }
}

.counselor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  line-height: 24px;

  div {
    width: 45ch;
  }

  p {
    color: hsl(0, 0%, 0%);
  }
}

.counselor-figures {
  padding: 1rem 1.5rem;
  margin-block: 1.875rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background-color: #f8f8f8;
}

.counselor-figure {
  flex: 0 0 auto;
  max-width: 26ch;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 0.625rem;
}

.counselor-figure-icon {
  width: 2.5rem;
  height: 2.5rem;
  aspect-ratio: 1;
  padding: 0.5rem;
  border-radius: 50%;
  background-color: var(--secondary-clr);

  svg {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
  }
}

.counselor-list {
  display: grid;

  gap: 1.15rem;

  @media (width>600px) {
    grid-template-columns: 1fr 1fr;
    place-items: center;
    gap: clamp(1.15rem, 5vw, 2.625rem);
  }

  @media (width>1200px) {
    grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
    gap: 1.15rem;
  }
}

.counselor-card {
  /* width: 262px; */
  /* width: min(100%, 400px); */
  padding: 1rem;
  position: relative;
  isolation: isolate;
  /* overflow: clip; */
  contain: paint;
  background-color: white;
  /* background-color: #f9f2f74d; */
  /* border-image: fill 1 linear-gradient(90deg, white, white); */
  border-radius: 0.75rem;
  border: 1px solid #d5d5d5;
  transition: all 180ms ease;

  &:hover {
    border: 1px solid var(--secondary-clr);
  }
}

.counselor-card-bg-img {
  position: absolute;
  z-index: -1;
  top: 7px;
  right: -53px;
  width: 175px;
  height: 331px;

  svg {
    width: 100%;
    height: 100%;
  }
}

.counselor-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.counselor-img {
  width: 4.5rem;
  height: 4.5rem;
  aspect-ratio: 1;
}

.counselor-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.counselor-name {
  color: hsl(0, 0%, 8%);
}

.counselor-country {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.25rem;
}

.counselor-country-name {
  font-size: var(--fs-300);
  line-height: 16.8px;
  color: var(--tertiary-clr);
}

.counselor-languages {
  font-size: var(--fs-200);
  line-height: 14.4px;
  color: var(--text-clr);
}

.counselor-details {
  display: grid;
  gap: 0.25rem;
  padding-block: 1rem 0.5rem;
  border-top: 1px solid #e0e0e0;
}

.counselor-university {
  font-size: var(--fs-300);
  font-weight: var(--fw-500);
  color: var(--black-clr);
  line-height: 16.8px;
}

.counselor-expertise {
  font-size: var(--fs-200);
  line-height: 14.4px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.tag {
  padding: 0.25rem;
  font-size: var(--fs-200);
  line-height: 14.4px;
  border: 1px solid #d5d5d5;
  border-radius: 0.25rem;
  color: var(--secondary-clr);
  background-color: var(--white-clr);
  transition: all 180ms ease;

  &:hover {
    background-color: var(--secondary-clr-5);
  }
}

.counselor-btn {
  margin-top: 2rem;
}

/* End of Counselor */

/* Works */
.works {
  padding-block-start: clamp(2.25rem, 7vw, 4.375rem);
  padding-block-end: clamp(14rem, 7vw, 17.125rem);
  background-color: #f7f5f7;
  position: relative;
  isolation: isolate;
  overflow-x: clip;

  &::after {
    content: "";
    position: absolute;
    bottom: -5.5rem;
    right: -8.625rem;
    width: 640px;
    height: 760px;
    background-image: url("/assets/images/works-ellipse.png");
    background-repeat: no-repeat;
    z-index: -1;
  }
}

.works-cards {
  counter-reset: works-card-counter;
  padding-top: 5.625rem;

  display: grid;

  @media (width <=1024px) {
    gap: clamp(3rem, 5vw, 4rem);
    grid-auto-flow: row;
    grid-auto-columns: fit-content(450px);
    justify-content: center;
  }

  @media (width > 1024px) {
    grid-auto-flow: column;
    grid-auto-columns: 280px;
    gap: 2rem;
    justify-content: space-between;
    background-image: url("/assets/images/start/path.svg");
    background-position-y: 85%;
    background-size: contain;
    background-repeat: no-repeat;
  }
}

.works-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;

  div {
    width: 45ch;
  }

  p {
    color: hsl(0, 0%, 0%);
  }
}

.works-card {
  position: relative;
  padding: 3.5rem 1.25rem 1.25rem;
  background: var(--white-clr);
  border: 1px solid #d5d5d5;
  border-radius: 0.75rem;
  box-shadow: 0 2px 4px hsla(0, 0%, 0%, 0.07);

  text-align: center;
  color: hsl(0, 0%, 0%);
}

.works-card-header {
  counter-increment: works-card-counter;

  &::before {
    content: counter(works-card-counter) ".";

    width: 3.5rem;
    height: 3.5rem;
    padding: 1.1rem 0.9rem;
    position: absolute;
    top: -1.6875rem;
    inset-inline: 0;
    margin: auto;
    font-size: var(--fs-800);
    font-weight: var(--fw-800);
    color: var(--secondary-clr);
    background: #eeeeef;
    border-radius: 50%;
    outline: 1px solid var(--secondary-clr);
    box-shadow: 0 0 0 4px var(--white-clr);
  }
}

.works-card-img {
  img {
    margin-inline: auto;
  }
}

.works-card-title {
  padding-block: 0.75rem;
  font-size: var(--fs-600);
  font-weight: var(--fw-600);
  line-height: 21.6px;
}

/* End of Works */

/* Help */
.help-content {
  position: relative;
  padding-block: clamp(3rem, 8.5vw + 1.5rem, 8rem);
  padding-inline: max(5%, 2rem);
  background-color: var(--secondary-clr-900);
  display: grid;
  isolation: isolate;
  border-radius: 3rem;

  &::before {
    content: "";
    z-index: -1;
    position: absolute;
    inset: 0;
    background-image: url("/assets/images/home/hero-gradient.png");
    background-size: cover;
    opacity: 0.35;
    border-radius: inherit;
  }

  @media (width <=728px) {
    border-radius: 2.25rem;
    padding-inline: 1.125rem;
  }
}

.help-header {
  text-transform: uppercase;
  color: var(--white-clr);

  h2 {
    text-align: center;
    color: var(--white-clr);
    font-weight: var(--fw-700);

    @media (width <=1024px) {
      font-size: var(--fs-950);
    }

    @media (width <=600px) {
      font-size: var(--fs-650);
    }
  }
}

.help-quotes {
  padding-block: 3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  color: var(--white-clr);
  text-transform: uppercase;
  font-size: var(--fs-300);

  li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
    border-radius: 100vw;
    outline: 1px solid var(--secondary-clr-800);
    background-color: var(--tertiary-clr-900);

    @media (width <=816px) {
      justify-content: start;
      width: 100%;
    }
  }
}

.help-video {
  all: revert;
  width: 100%;
  max-height: 640px;

  @media (width <=1024px) {
    max-height: 480px;
  }

  img,
  video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2.25rem;
  }
}

/* End of Help */

/* Facts */
.facts {
  padding-top: clamp(3rem, 9vw, 6rem);

  @media (width <=1024px) {
    .facts-items-wrapper {
      &::before {
        content: "";
        max-width: 650px;
        aspect-ratio: 764/700;
        background-image: url("/assets/images/australia-map.svg");
        /* background-size: 84%; */
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        inset: 0;
        /* background-position: 129px; */
      }
    }
  }

  @media (width > 1024px) {
    .facts-items-wrapper {
      position: relative;
      padding: 8rem;

      &::before {
        content: "";
        width: 764px;
        height: 700px;
        background-image: url("/assets/images/australia-map.svg");
        background-size: 84%;
        background-repeat: no-repeat;
        position: absolute;
        right: 8rem;
        bottom: 0;
        margin: auto;
        background-position: center;
        z-index: -2;
      }
    }
  }
}

.facts-content {
  position: relative;
}

.facts-avatar {
  @media (width <=1024px) {
    display: none;
  }

  @media (width > 1024px) {
    position: absolute;
    height: 92px;
    width: 92px;
    overflow: hidden;
    background-color: #f6d67f;
    border-radius: 50%;
    border-right: 4px solid #a90466;
    z-index: -1;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    &.avatar-1 {
      right: 39.375rem;
      top: 186px;
    }

    &.avatar-2 {
      right: 25.375rem;
      bottom: 25.75rem;
    }

    &.avatar-3 {
      right: 344px;
      bottom: 224px;
    }

    &.avatar-4 {
      right: 12rem;
      bottom: 340px;
    }

    &.avatar-5 {
      right: 256px;
      bottom: 120px;
    }
  }
}

.facts-header {
  max-width: 45ch;
}

.facts-items-wrapper {
  min-height: 480px;
  position: relative;

  @media (width <=1024px) {
    &::before {
      inset: 0;
      margin: auto;
    }

    .facts {
      width: fit-content;
      margin-inline: auto;
    }
  }
}

.facts-items {
  margin-top: clamp(3rem, 9.25vw, 4.25rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(auto, 266px));
  grid-template-rows: repeat(5, 1fr);
  gap: 1.5rem 3rem;

  .facts-item {
    grid-row: span 2;
  }

  .facts-item:nth-of-type(2n) {
    grid-column: 2/-1;
  }

  .facts-item:nth-of-type(2) {
    grid-row: 2/4;
  }
}

.facts-item {
  padding-block: clamp(0.75rem, 3vw, 1.5rem);
  padding-inline: clamp(1rem, 3vw, 2.625rem) 0.5rem;

  font-size: clamp(var(--fs-200), 3vw, var(--fs-600));
  color: var(--tertiary-clr);
  line-height: 24px;
  background-color: var(--white-clr);
  border: 1px solid var(--secondary-clr);
  border-radius: 0.75rem;
  box-shadow: 0 2px 4px hsla(0, 0%, 0%, 0.07);

  position: relative;
  isolation: isolate;

  &::before {
    content: "";
    position: absolute;
    width: 70px;
    height: 70px;
    aspect-ratio: 1;
    left: 1.25rem;
    inset-block: 0;
    margin: auto;
    background-color: #f6e6f0;
    border-radius: 50%;
    z-index: -1;
  }

  span {
    display: block;
    color: var(--secondary-clr);
    font-size: var(--fs-850);
    font-weight: var(--fw-900);
    line-height: 43.2px;
    letter-spacing: 12%;
  }
}

/* End of Facts */
/* Bridge */
.bridge {
  padding-block: clamp(5rem, 8vw, 5.625rem) clamp(5.5rem, 10vw, 7.5rem);
  position: relative;
  overflow-x: clip;

  &::before {
    content: "";
    position: absolute;
    bottom: 7.5rem;
    left: -6rem;
    width: 640px;
    height: 760px;
    background-image: url("/assets/images/bridge-ellipse.png");
    background-repeat: no-repeat;
    z-index: -1;
  }

  @media (width <=525px) {
    padding-top: 0;
  }

  @media (width <=600px) {
    padding-bottom: 4rem;
  }
}

.bridge-content {
  display: grid;
  gap: 2rem;

  @media (width > 1024px) {
    grid-template-columns: 1fr 1fr;
  }

  @media (width <=1024px) {
    & .focus-img-3 {
      width: 100%;
      height: 392.89px;
      margin-top: 2rem;
    }
  }
}

.bridge-list {
  padding-block: 1.875rem 2.5rem;
  color: var(--black-clr);
  display: grid;
  gap: clamp(1rem, 3vw, 1.875rem);
  line-height: 22px;
  letter-spacing: -2%;
}

.bridge-list-item {
  position: relative;
  isolation: isolate;
  padding-left: 2.5rem;

  &::before {
    content: "";
    position: absolute;
    left: 0;
    z-index: 1;
    display: block;
    background-image: url("/assets/icons/check-circle.svg");
    background-size: contain;
    width: 1.5rem;
    height: 1.5rem;
    aspect-ratio: 1;
  }
}

/* End of Bridge */

/* Popup styles */
.popup {
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  --_sidebar-height: 100vh;
  --_sidebar-width: 1000px;
  --_container-padding: 0.5rem;
  --_top-grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

  --_padding-5: 1.5rem;
  --_padding-4: 1.25rem;
  --_padding-3: 1rem;
  --_padding-2: 0.875rem;

  border-radius: 0.75rem;

  @media (width <=480px) {
    inset: auto;
    bottom: 0;
    margin-top: auto;
    min-width: 100%;
    max-height: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  @media (width > 480px) {
    --_sidebar-height: 90vh;
    --_padding-3: 1.25rem;
    --_container-padding: 1rem;

    border-radius: 0.75rem;
  }

  @media (width > 768px) {
    --_padding-5: 2rem;
    --_padding-4: 1.5rem;
    --_padding-3: 1.25rem;
    --_padding-2: 1rem;
  }

  overflow-y: hidden;

  &.active .popup-content {
    transform: translateY(0);
  }

  .close-btn {
    cursor: pointer;
    position: absolute;
    top: var(--_padding-3);
    right: var(--_padding-4);
    background: transparent;
    border: none;
    color: var(--white-clr);
    transition: scale var(--transition-fast);

    &:hover {
      scale: 1.1;
    }
  }
}

.popup-content {
  background-color: var(--white-clr);
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-normal);
  /* overflow-y: clip; */

  @media (width <=480px) {
    height: inherit;
    display: flex;
    flex-direction: column;
  }
}

.popup-header {
  padding: var(--_padding-3) var(--_padding-5);
  background-color: var(--primary-clr);
  color: var(--white-clr);
  position: relative;
  position: sticky;
  top: 0;

  h2 {
    /* font-family: var(--ff-); */
    font-size: var(--fs-800);
    font-weight: var(--fw-700);
    color: var(--white-clr);
    margin-bottom: 8px;

    @media (width <=480px) {
      font-size: var(--fs-600);
    }
  }

  p {
    /* font-family: var(--ff-); */
    font-size: var(--fs-400);
    font-weight: var(--fw-400);
    opacity: 0.9;

    @media (width <=480px) {
      font-size: var(--fs-300);
    }
  }
}

.popup-body {
  --_popup-height: 90vh;
  overflow-y: auto;
  padding: var(--_padding-5);

  /* For showing scrollbar inside popup-body instead of popup */
  max-height: calc(var(--_sidebar-height) - 104px - 82px);

  @media (width <=768px) {
    max-height: calc(var(--_sidebar-height) - 96px - 74px);
    padding: var(--_padding-2);
  }
}

.popup-footer {
  display: none !important;
  margin-top: auto;
  padding: var(--_padding-3) var(--_padding-5);
  position: sticky;
  bottom: 0;
  background-color: #f5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-clr-900);
}

.reset-btn {
  cursor: pointer;
  padding: 0.625rem 1.25rem;
  /* font-family: var(--ff-inter); */
  font-size: var(--fs-300);
  font-weight: var(--fw-500);
  background-color: transparent;
  color: var(--text-clr);
  border: 1px solid var(--border-clr-900);
  border-radius: 0.375rem;
  transition: all var(--transition-fast);

  &:hover {
    background-color: var(--white-clr-800);
  }

  @media (width <=480px) {
    flex: 1;
  }
}

.selection-container {
  margin-bottom: 2rem;
}

.section-title {
  margin-bottom: 1rem;

  h3 {
    /* font-family: var(--ff-lato); */
    font-size: var(--fs-500);
    font-weight: var(--fw-600);
    color: var(--tertiary-clr);
    margin-bottom: 0.25rem;
  }

  p {
    /* font-family: var(--ff-inter); */
    font-size: var(--fs-300);
    color: var(--text-clr);

    span {
      font-weight: var(--fw-600);
      color: var(--secondary-clr-900);
    }
  }
}

/* Areas grid */
.areas-container,
.fields-container {
  max-height: 320px;
  overflow-y: auto;
  border-radius: 0.5rem;

  border: 1px solid var(--border-clr);
  box-shadow: inset 0 0 16px #0000002c;
  padding: var(--_container-padding);
}

.areas-grid,
.fields-grid {
  display: grid;
  grid-template-columns: var(--_top-grid-template-columns);
  gap: clamp(0.75rem, 1.5vw + 0.1rem, 0.875rem);

  .bx {
    border-radius: 50%;
    background-color: var(--secondary-clr);
    color: var(--white-clr);
    transition: all 180ms ease;

    &:hover {
      background-color: var(--primary-clr);
    }
  }
}

.area-card {
  background-color: var(--white-clr);
  border: 2px solid var(--border-clr);
  border-radius: 8px;
  padding: 0.5rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  height: 100%;
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 1rem;
  align-items: center;

  &:hover {
    border-color: var(--secondary-clr-900);
    box-shadow: 0 4px 12px var(--secondary-clr-10);
    translate: 0 -0.125rem;
  }

  &.selected {
    border-color: var(--secondary-clr-900);
    background-color: var(--secondary-clr-5);
    box-shadow: 0 4px 12px var(--secondary-clr-15);
  }
}

.area-card-icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  aspect-ratio: 1;
  background-color: var(--secondary-clr-10);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary-clr-900);

  /* Add color to png line  with dropshadow */
  contain: paint;

  img {
    height: 2rem;
    width: 2rem;
    filter: drop-shadow(100px 0 0 var(--secondary-clr-900));
    translate: -100px;
  }
}

.area-card-title {
  flex-grow: 1;
  /* font-family: var(--ff-lato); */
  font-size: var(--fs-400);
  font-weight: var(--fw-600);
  color: var(--tertiary-clr-900);
}

/* Subareas section */
.subareas-section,
.levels-section {
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--transition-normal);

  &.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
  }
}

.subareas-container,
.levels-container {
  max-height: 280px;
  overflow-y: auto;
  border-radius: 8px;
  border: 1px solid var(--border-clr);
  box-shadow: inset 0 0 10px #0000002c;
}

.subareas-grid,
.levels-grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 0.875vw + 0.2rem, 0.625rem);
  padding: var(--_container-padding);
}

.subarea-card,
.level-card {
  cursor: pointer;
  padding: 0.375rem 0.75rem;
  /* font-family: var(--ff-lato); */
  font-size: var(--fs-300);
  font-weight: var(--fw-600);
  color: var(--tertiary-clr-900);
  background-color: var(--white-clr);
  border: 1px solid var(--border-clr);
  border-radius: 6px;
  transition: all var(--transition-fast);

  &:hover {
    border-color: var(--secondary-clr-900);
    box-shadow: 0 2px 8px var(--secondary-clr-10);
    transform: translateY(-2px);
  }
}