@layer vendor, reset, base, layout, components, utilites;
@import url("https://cdn.jsdelivr.net/npm/swiper@14.0.1/swiper-bundle.min.css")
layer(vendor);

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  /* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  body {
    min-block-size: 100vh;
    line-height: 1.6;
  }

  h1,
  h2,
  h3,
  button,
  input,
  label {
    line-height: 1.1;
    font-size: 1.6em;
  }

  h1,
  h2,
  h3,
  h4 {
    font-optical-sizing: auto;
    font-style: normal;
  }

  p,
  li {
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 1rem;
    margin: 0;
  }

  img,
  picture {
    max-inline-size: 100%;
    display: block;
  }
}

@layer base {
  :root {
    --black: #0a0a0a;
    --white: #fff;
    --primary: #4447ee;
    --light-primary: oklch(
      from var(--primary) clamp(0, l + 0.22, 1) calc(c * 0.9) h
    );
    --dark-primary: oklch(
      from var(--primary) clamp(0, l - 0.22, 1) calc(c * 0.92) h
    );
    --dark-gray: #151515;
    --gray: #888;
    --darkerGrey: #363636;
    --grayMd: #b4b4b4;
    --light-gray: #d6d1f7;
    --light-text: #d9d9d9;
    --gradient-primary: linear-gradient(var(--primary), var(--dark-primary));

    --border-radius-1: 0.5rem;
    --border-radius-2: 1.25rem;
    --border-radius-3: 2rem;
    --border-radius-4: 3rem;
  }

  @view-transition {
    navigation: auto;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  html {
    scroll-padding: 2rem;
    overflow-x: hidden;
  }

  body {
    font-family: "DM Sans", sans-serif;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--white);
    background: var(--black);
    position: relative;
    line-height: normal;
    width: 100%;
    overflow-x: hidden;
  }

  h1 {
    font-family: "Sora", sans-serif;
    font-size: 4em;
    font-weight: 400;
    margin: 0;

    span {
      color: var(--primary);
    }

    strong {
      font-weight: 500;
    }

    @media screen and (max-width: 767px) {
      font-size: 2.5rem;
    }
  }

  h2 {
    font-family: "Sora", sans-serif;
    font-size: 2.5rem;
    font-weight: 200;
    margin: 0;

    @media screen and (max-width: 767px) {
      font-size: 1.875rem;
    }

    span {
      color: var(--primary);
    }
  }

  h3 {
    font-family: "Sora", sans-serif;
    font-size: 2rem;
    font-weight: 300;
    margin: 0;

    @media screen and (max-width: 767px) {
      font-size: 1.5rem;
    }
  }

  h4 {
    font-family: "Sora", sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0;

    @media screen and (max-width: 767px) {
      font-size: 1.25rem;
    }
  }
  h5 {
    font-family: "Sora", sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    margin: 0;

    @media screen and (max-width: 767px) {
      font-size: 1rem;
    }
  }
  h6 {
    font-family: "Sora", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    margin: 0;

    @media screen and (max-width: 767px) {
      font-size: 0.875rem;
    }
  }

  a {
    color: var(--primary);
    text-decoration: none;
    font-size: 1rem;
  }

  p {
    color: var(--light-text);
  }

  .btn {
    color: var(--white);
    font-family: "DM Sans", sans-serif;
    text-align: center;
    font-weight: 600;
    line-height: 21px; /* 150% */
    letter-spacing: 2.8px;
    text-transform: uppercase;
    display: inline-flex;
    padding: 1.25rem 2.5rem;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: var(--primary);
    transition: all 0.3s ease-in-out;
    cursor: pointer;

    &:hover {
      transform: scale(1.1);
    }
  }
}

@layer layout {
  .wrapper {
    --wrapper-max-width: 1440px;
    --wrapper-padding: 1rem;

    max-width: var(--wrapper-max-width);
    margin-inline: auto;
    padding-inline: var(--wrapper-padding);

    box-sizing: border-box;
    width: 100%;
  }

  .wrapper[data-width="narrow"] {
    --wrapper-max-width: 720px;
  }

  .wrapper[data-width="medium"] {
    --wrapper-max-width: 900px;
  }

  .wrapper[data-width="large"] {
    --wrapper-max-width: 1600px;
  }

  .section {
    --section-padding: 5rem;
    padding-block: var(--section-padding, 5rem);

    @media screen and (max-width: 767px) {
      --section-padding: 3rem;
    }
  }
  .section[data-padding="narrow"] {
    --section-padding: 2rem;
  }
  .section[data-padding="wide"] {
    --section-padding: 10rem;
  }
}

@layer components {
  .site_header {
    position: sticky;
    top: 0;
    z-index: 1200;
    background: var(--white);
    border-bottom: 1px solid var(--light-gray);
    .header__inner {
      min-height: 88px;
      padding: 0 clamp(1rem, 3vw, 2.5rem);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .logo {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      color: var(--primary);

      .logo_desktop,
      .logo_mobile {
        width: 100%;
        max-width: 200px;
      }

      .logo_mobile {
        display: none;
      }

      @media screen and (max-width: 767px) {
        .logo_desktop {
          display: none;
        }

        .logo_mobile {
          display: inline-flex;
        }
      }
    }

    .contact-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 1.1rem;
      min-height: 2.35rem;
      padding: 0.25rem 1.3rem;
      border: 1px solid var(--primary);
      border-radius: 999px;
      background: var(--white);
      flex-wrap: nowrap;
      white-space: nowrap;

      a,
      .contact-pill__label {
        font-family: "DM Sans", sans-serif;
        font-size: 0.95rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: none;
        color: #161616;
        margin: 0;
      }

      .contact-pill__label {
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
      }

      .contact-pill__status-dot {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 999px;
        background: var(--primary);
        border: 2px solid var(--primary);
        animation: status-dot-pulse 1.8s ease-out infinite;

        @media (prefers-reduced-motion: reduce) {
          animation: none;
        }
      }

      .contact-pill__separator {
        color: #373737;
        font-size: 0.95rem;
        font-weight: 700;
      }

      @media screen and (max-width: 1100px) {
        display: none;
      }
    }

    .header__actions {
      display: inline-flex;
      align-items: center;
      gap: 1rem;

      .header__login,
      .header__start {
        font-family: "DM Sans", sans-serif;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.28em;
        text-transform: uppercase;
      }

      .header__login {
        border: 0;
        background: transparent;
        color: var(--primary);
        cursor: pointer;
        padding: 0;
      }

      .header__start {
        color: var(--white);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.25rem;
        padding: 0.7rem 1.2rem;
        background: var(--primary);
        border-radius: 999px;
      }

      .menu-btn {
        width: 2.6rem;
        height: 2.6rem;
        border-radius: 0.65rem;
        border: 1px solid var(--primary);
        background: var(--white);
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        cursor: pointer;
        transition: background-color 0.2s ease;

        span {
          width: 0.8rem;
          height: 2px;
          background: var(--primary);
          border-radius: 2px;
        }

        &:hover,
        &[aria-expanded="true"] {
          background: #f6f3ff;
        }
      }
    }

    .dropdown-menu {
      position: absolute;
      right: clamp(1rem, 3vw, 2.5rem);
      top: calc(100% + 0.5rem);
      width: min(18rem, calc(100vw - 2rem));
      border: 1px solid #f0d4da;
      border-radius: 1rem;
      background: var(--white);
      box-shadow: 0 1.2rem 2.2rem rgba(17, 17, 17, 0.12);
      padding: 0.55rem;
      z-index: 9999;

      ul {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
      }

      li {
        margin: 0;
        width: 100%;
      }

      a {
        display: block;
        width: 100%;
        color: #181818;
        font-size: 0.84rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        padding: 0.8rem 0.95rem;

        transition:
          background-color 0.2s ease,
          color 0.2s ease;

        span {
          display: inline-block;

          &::after {
            content: "";
            display: block;
            width: 100%;
            height: 1px;
            margin-top: 0.2rem;
            background: rgba(255, 42, 79, 0.75);

            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.3s ease-in-out;
          }
        }

        &:hover {
          color: var(--primary);

          span::after {
            transform: scaleX(1);
          }
        }
      }
    }
  }

  @keyframes status-dot-pulse {
    0% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(255, 42, 79, 0.45);
    }
    70% {
      transform: scale(1.05);
      box-shadow: 0 0 0 0.45rem rgba(255, 42, 79, 0);
    }
    100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(255, 42, 79, 0);
    }
  }

  .page_hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10rem 0;
    background: linear-gradient(
      180deg,
      rgba(10, 10, 10, 0) 80.82%,
      #0a0a0a 96.6%
    );
    position: relative;

    @media screen and (max-width: 767px) {
      padding: 3rem 0;
    }

    .hero__content {
      position: relative;
      z-index: 1;
      h1 {
        font-size: 7.875rem;
        font-style: normal;
        font-weight: 800;
        line-height: 126px; /* 90% */
        letter-spacing: -7px;

        @media screen and (max-width: 767px) {
          font-size: 2.5rem;
          line-height: 1.2;
          letter-spacing: -1px;
        }
      }

      .btn {
        max-width: 200px;
        margin: 0 auto;
        padding: 1rem 1.5rem;
      }
    }

    video {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      object-fit: cover;
      width: 100%;
      height: 100%;
      max-width: 338px;
      max-height: 680px;
      border-radius: 40px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
      box-shadow:
        0 32px 100px -8px rgba(31, 0, 20, 0.45),
        0 20px 60px 26px rgba(10, 0, 15, 0.8),
        0 0 36px 6px rgba(255, 42, 79, 0.4),
        0 0 110px 51px rgba(146, 20, 42, 0.55);
    }
  }

  .see-all {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;

    img {
      width: 1rem;
      height: 1rem;
    }

    &:hover {
      transform: translateX(2px);
    }
  }

  /* Swiper  */
  .overlay {
    background: url(../images/overlay.png) no-repeat center center;
    background-size: cover;
    position: absolute;
    inset: 0;

    z-index: 2;
  }
  .swiperHero {
    width: 100%;
    height: 50dvh;
    overflow: hidden;
    position: relative;
    z-index: 1;

    .swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      inset: 0;
      z-index: -1;
      filter: blur(20px);
    }

    .hero-slide-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      max-width: 600px;
      align-items: baseline;
      color: #fff;
      position: relative;
      z-index: 3;
      gap: 1rem;

      h2 {
        font-size: 2.5rem;
        font-weight: 700;

        @media screen and (max-width: 767px) {
          font-size: 1.75rem;
        }
      }

      p {
        font-size: 1.125rem;
        line-clamp: 3;

        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;

        overflow: hidden;
        @media screen and (max-width: 767px) {
          font-size: 1rem;
        }
      }

      .btn {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
      }
    }
  }
  .swiper-pagination {
    position: relative;
    bottom: 50px;
    text-align: center;
    margin-top: 1rem;

    .swiper-pagination-bullet {
      width: 12px;
      height: 12px;
      background-color: #5138b7;
      opacity: 0.5;
      transition: all 0.3s ease-in-out;

      &.swiper-pagination-bullet-active {
        opacity: 1;
        background-color: var(--primary);
      }
    }
  }

  .swiper.visible-items {
    width: 100%;
    height: 100%;

    .swiper-slide {
      width: 100%;
      height: 100%;

      img {
        display: block;
        width: 180px;
        object-fit: cover;
        height: 160px;
        border-radius: 8px;
      }

      .cardsTitle {
        color: #d1d5db;
        font-family: "DM Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 16px; /* 133.333% */
        padding: 20px 10px 0 10px;
      }

      &:hover {
        transform: scale(1.02);
        transition: all 0.3s ease-in-out;
      }
    }
    .swiper-slide.visible-item-film {
      &::after {
        content: url(../images/icons/vertical-watch.svg);
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -40%);
      }
    }

    .swiper-slide.visible-item-video {
      &::after {
        content: url(../images/icons/icon_play.svg);
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -40%);
      }
    }
    .swiper-slide.visible-item-film,
    .swiper-slide.visible-item-video {
      position: relative;

      .img-overlay {
        position: relative;
        &::after {
          content: "";
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.5);
        }
      }
      img {
        width: 100%;
        height: 325px;
        background: rgba(0, 0, 0, 0.5);
      }
    }
    .swiper-slide.visible-item-sound {
      position: relative;
      &::after {
        content: url(../images/icons/icon_sound.svg);
        position: absolute;
        top: 33%;
        left: 50%;
        transform: translate(-50%, -40%);
      }

      .img-overlay {
        position: relative;
        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.5);
        }
      }
      img {
        width: 235px;
        height: 95px;
        background: rgba(0, 0, 0, 0.5);
      }
    }
    .swiper-slide.visible-item-article,
    .swiper-slide.visible-item-book {
      position: relative;
      display: flex;
      align-items: stretch;
      min-height: 150px;
      text-decoration: none;

      .img-overlay {
        flex: 0 0 150px;
        width: 150px;
        height: 150px;
        border-radius: 8px;
        overflow: hidden;
      }

      img {
        width: 150px;
        height: 150px;
        border-radius: 8px;
        object-fit: cover;
        background: transparent;
      }

      .cardsContent--article,
      .cardsContent--book {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 10px;
        min-width: 0;
        padding: 10px 10px 10px 20px;
        overflow: hidden;
      }

      .cardsTitle {
        padding: 0;
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        line-height: 24px;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .cardsSeparator {
        width: 48px;
        height: 1px;
        background: rgba(255, 255, 255, 0.35);
        flex-shrink: 0;
      }

      .cardsDescription {
        margin: 0;
        color: rgba(255, 255, 255, 0.6);
        font-size: 10px;
        font-weight: 300;
        line-height: 12px;
        overflow: hidden;
        display: -webkit-box;
        line-clamp: 3;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }
    .swiper-pagination {
      bottom: 0;
    }
  }

  .section_pill {
    display: flex;
    width: fit-content;
    padding: 5px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 999px;
    background: rgba(110, 42, 255, 0.2);
    color: var(--primary);
    font-weight: 300;
    letter-spacing: -0.6px;
    text-transform: uppercase;

    &.gray {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
    }
  }

  .banner-section {
    .wrapper {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      position: relative;
      gap: 2rem;
    }

    h1 {
      font-size: 7.875rem;
      font-style: normal;
      font-weight: 800;
      line-height: 126px; /* 90% */
      letter-spacing: -7px;

      @media screen and (max-width: 767px) {
        font-size: 2.5rem;
        line-height: 1.2;
        letter-spacing: -1px;
      }

      span {
        color: var(--primary);
      }
    }

    .btn {
      background: transparent;
      border: 1px solid var(--primary);
    }
  }

  .verticals-section {
    padding-block: 2.5rem 4rem;

    .verticals-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
      width: 100%;
    }

    .vertical-card {
      --vertical-card-bg: #1a0408;

      min-height: 240px;
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: var(--vertical-card-bg);
      padding: 30px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-decoration: none;
      transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;

      &:hover {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.24);
        box-shadow: 0 16px 30px rgba(0, 0, 0, 0.25);
      }

      h3 {
        color: var(--white);
        font-family: "Sora", sans-serif;
        font-size: 1.25rem;
        font-weight: 600;
        line-height: 1.4;
        margin: 0;
        min-height: 60px;
        display: flex;
        align-items: center;
      }

      p {
        margin: 0;
        color: #b9b9b9;
        font-family: "DM Sans", sans-serif;
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1.285;
      }
    }

    .vertical-card__icon {
      width: 48px;
      height: 48px;
      margin-bottom: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;

      img {
        width: 48px;
        height: 48px;
        object-fit: contain;
      }
    }

    @media screen and (max-width: 1300px) {
      .verticals-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media screen and (max-width: 767px) {
      padding-block: 1.5rem 2.5rem;

      .verticals-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .vertical-card {
        min-height: 200px;
        padding: 20px;

        h3 {
          font-size: 1rem;
          min-height: 44px;
        }

        p {
          font-size: 0.75rem;
          line-height: 1.4;
        }
      }

      .vertical-card__icon {
        width: 40px;
        height: 40px;

        img {
          width: 40px;
          height: 40px;
        }
      }
    }
  }

  .stats-section {
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      align-items: center;
      gap: 1.2rem;
      justify-items: center;
    }

    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.95rem;
    }

    .stat-value {
      margin: 0;
      color: #fff;
      font-family: "DM Sans", sans-serif;
      font-size: 72px;
      font-weight: 900;
      line-height: 1.1;
      letter-spacing: -1.6px;
      white-space: nowrap;
    }

    .stat-value__star {
      font-size: 60px;
      line-height: 1.1;
      margin-left: 1px;
    }

    .stat-separator {
      width: 90px;
      height: 3px;
      background: var(--primary);
      border-radius: 999px;
      display: block;
    }

    .stat-label {
      margin: 0;
      color: #888;
      font-family: "DM Sans", sans-serif;
      font-size: 13px;
      font-weight: 400;
      line-height: 20px;
      letter-spacing: 2px;
      text-transform: uppercase;
      white-space: nowrap;
    }

    @media screen and (max-width: 1300px) {
      .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 2.5rem;
      }
    }

    @media screen and (max-width: 767px) {
      padding-block: 2rem 1rem;

      .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem 1rem;
      }

      .stat-item {
        gap: 0.6rem;
      }

      .stat-value {
        font-size: 42px;
        letter-spacing: -0.8px;
      }

      .stat-value__star {
        font-size: 34px;
      }

      .stat-separator {
        width: 64px;
        height: 2px;
      }

      .stat-label {
        font-size: 10px;
        letter-spacing: 1.2px;
        line-height: 1.3;
      }
    }
  }

  .featured-section {
    background: #080808;
    padding: 50px 20px;

    .wrapper {
      margin: 0 auto;

      h2 {
        margin-bottom: 32px;
        font-size: 28px;
        font-weight: 700;
      }

      .featured-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: 190px 190px 200px;
        gap: 16px;

        @media (max-width: 600px) {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }

        .featured-card {
          position: relative;
          overflow: hidden;
          border-radius: 6px;
          background: #181818;
          color: #fff;
          text-decoration: none;
          grid-column: 1 / 3;
          grid-row: 3;

          img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition:
              transform 0.45s ease,
              filter 0.45s ease;
          }

          .card-overlay {
            position: absolute;
            inset: 0;

            background: linear-gradient(
              to top,
              rgba(0, 0, 0, 0.85) 0%,
              rgba(0, 0, 0, 0.3) 45%,
              rgba(0, 0, 0, 0.05) 75%
            );

            transition: background 0.35s ease;
          }

          .card-content {
            position: absolute;
            z-index: 2;
            left: 18px;
            bottom: 15px;
            display: flex;
            flex-direction: column;
            gap: 6px;

            h3 {
              font-size: 20px;
              font-weight: 700;
              line-height: 1.1;
            }
          }

          &:hover {
            img {
              transform: scale(1.05);
              filter: brightness(1.1);
            }

            .card-overlay {
              background: linear-gradient(
                to top,
                rgba(0, 0, 0, 0.9) 0%,
                rgba(0, 0, 0, 0.15) 60%,
                transparent 100%
              );
            }
          }

          &.play {
            grid-column: 1;
            grid-row: 1 / 3;
          }

          &.watch {
            grid-column: 2;
            grid-row: 1;
          }

          &.fitness {
            grid-column: 3;
            grid-row: 1;
          }

          &.cooking {
            grid-column: 2;
            grid-row: 2;
          }

          &.wellness {
            grid-column: 3;
            grid-row: 2 / 4;
          }

          &.mindfulness {
            grid-column: 1 / 3;
            grid-row: 3;
          }
        }
      }
    }
  }

  .card-tag {
    display: inline-block;
    margin-bottom: 5px;
    padding: 3px 8px;

    border-radius: 10px;
    background: rgba(255, 255, 255, 0.22);

    font-weight: 500;
    text-transform: uppercase;
    backdrop-filter: blur(5px);
  }
  .divider {
    width: 50%;
    height: 3px;
    background: var(--primary);
  }
  .single-item {
    gap: 40px;

    @media screen and (max-width: 767px) {
      gap: 20px;
    }

    h1 {
      font-size: 72px;
      font-style: normal;
      font-weight: 800;
      line-height: 72px; /* 100% */
      letter-spacing: -1.8px;

      @media screen and (max-width: 767px) {
        font-size: 36px;
        line-height: 36px; /* 100% */
        letter-spacing: -0.9px;
      }
    }
    .single-video-player {
      width: 100%;
      max-width: 900px;
      margin: 0 auto;
      border-radius: 20px;
      overflow: hidden;
    }
    .single-item-image {
      max-width: 400px;
      margin: 0 auto;

      &.single-item-image-article {
        max-width: 900px;
        margin: 0;
      }
      img {
        border-radius: 24px;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .single-item-info {
      gap: 40px;

      p {
        color: var(--light-text);
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 32.5px; /* 162.5% */
        margin-bottom: 20px;
      }

      h3 {
        color: var(--light-text);
        font-size: 26px;
        font-style: normal;
        font-weight: 800;
        line-height: 38px;
        margin-block: 20px;
      }

      table {
        width: 100% !important;
        margin: 20px auto;
        font-size: 0.875rem;

        td {
          padding: 10px 5px;
        }
      }

      table tr:first-child th,
      table tr:first-child td {
        background: var(--primary);
        color: var(--white);
      }
      @media screen and (max-width: 767px) {
        gap: 20px;
      }

      .single-item-card {
        display: flex;
        padding: 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        flex: 1 0 0;
        align-self: stretch;
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.05);
        background: rgba(255, 255, 255, 0.03);
        width: 300px;

        @media screen and (max-width: 767px) {
          width: 100%;
        }

        h3 {
          color: #fff;
          font-size: 24px;
          font-style: normal;
          font-weight: 700;
          margin-block: 0;
          line-height: 32px; /* 133.333% */
        }
        p {
          color: #64748b;
          font-size: 12px;
          font-style: normal;
          font-weight: 400;
          line-height: 16px; /* 133.333% */
          letter-spacing: 1.2px;
          text-transform: uppercase;
          margin-block: 0;
        }

        h4 {
          color: #94a3b8;
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 20px; /* 142.857% */
        }

        .star-icon {
          display: flex;
          width: 48px;
          height: 48px;
          justify-content: center;
          align-items: center;
          border-radius: 9999px;
          background: rgba(52, 168, 83, 0.1);
          img {
            width: 18px;
            height: 16px;
          }
        }
      }
    }

    /* Custom Audio Player Styling */
    audio {
      width: 100%;
      height: 50px;
      border-radius: var(--border-radius-3);
    }

    audio::-webkit-media-controls-panel {
      background-color: #f4f4f4;
      border-radius: var(--border-radius-3);
    }

    audio::-webkit-media-controls-play-button {
      background-color: #dfdfdf;
      border-radius: 50%;
      color: var(--black);
    }

    audio::-webkit-media-controls-play-button:hover {
      background-color: var(--light-primary);
    }

    audio::-webkit-media-controls-timeline {
      background-color: #f4f4f4;
      border-radius: 25px;
      margin: 0 10px;
    }

    audio::-webkit-media-controls-volume-slider {
      background-color: #f4f4f4;
      border-radius: 25px;
    }

    .audio-player-container {
      background: #f4f4f4;
      border: 1px solid var(--gray);
      padding: 0.5rem;
      border-radius: var(--border-radius-2);
      box-shadow: 0px 0px 1rem rgba(192, 192, 192, 0.19);
      margin: 1rem 0;
      width: 100%;
    }

    .custom-audio-player {
      width: 100%;
      height: 54px;
      border-radius: 30px;
    }

    .custom-audio-player::-webkit-media-controls-panel {
      background: #f4f4f4;
      border-radius: 30px;
      padding: 0 5px;
    }

    .custom-audio-player::-webkit-media-controls-play-button {
      background-color: #dfdfdf;
      border-radius: 50%;
      padding: 8px;
    }

    .custom-audio-player::-webkit-media-controls-play-button:hover {
      background-color: var(--primary);
    }

    .custom-audio-player::-webkit-media-controls-volume-slider {
      margin-left: 10px;
    }

    .custom-audio-player::-webkit-media-controls-volume-control-container {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f4f4f4;
    }

    .custom-audio-player::-webkit-media-controls-mute-button {
      background-color: transparent;
      border-radius: 50%;
    }

    .custom-audio-player::-webkit-media-controls-current-time-display,
    .custom-audio-player::-webkit-media-controls-time-remaining-display {
      color: var(--black);
      font-size: 12px;
    }

    /* dots */
    .custom-audio-player::-webkit-media-controls-overflow-button {
      margin-left: 10px;
    }

    @media (max-width: 768px) {
      .custom-audio-player::-webkit-media-controls-volume-control-container {
        display: none !important;
        width: 0 !important;
      }

      .custom-audio-player::-webkit-media-controls-volume-slider {
        display: none !important;
        width: 0 !important;
      }

      .custom-audio-player::-webkit-media-controls-mute-button {
        display: none !important;
      }
    }
  }

  .sound_hero {
    width: 100%;
    height: 50dvh;
    overflow: hidden;
    position: relative;
    z-index: 1;

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

    &::before {
      content: "";
      position: absolute;
      inset: -30px;

      background: inherit;
      background-size: cover;
      background-position: center;

      filter: blur(20px);
      transform: scale(1.05);

      z-index: 0;
    }

    .sound_hero__content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: baseline;
      gap: 30px;

      width: 100%;

      position: relative;
      z-index: 3;

      @media screen and (max-width: 767px) {
        gap: 1rem;
      }

      h1 {
        font-size: 72px;
        font-weight: 800;
        line-height: 72px; /* 100% */
        letter-spacing: -1.8px;

        @media screen and (max-width: 767px) {
          font-size: 2rem;
          line-height: 1.2;
          letter-spacing: -1px;
        }
      }
    }
  }

  .single_sound_section {
    position: relative;
    z-index: 3;
    margin-top: -50px;
  }

  /* =========================================================
   SHARED MODAL OVERLAY
   ========================================================= */

  .refund-modal,
  .modal-background {
    position: fixed;
    inset: 0;
    z-index: 9999;

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

    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

    padding: 2rem;

    background: rgba(0, 0, 0, 0.75);

    overflow-y: auto;
  }

  /* =========================================================
   SHARED MODAL CONTAINER
   ========================================================= */

  .refund-modal .modal-content,
  .modal-container-email,
  .modal-container-otp {
    position: relative;

    width: min(100%, 900px);

    background: var(--white, #fff);

    border-radius: 22px;

    overflow: hidden;

    box-shadow:
      0 30px 80px rgba(0, 0, 0, 0.3),
      0 8px 30px rgba(0, 0, 0, 0.15);
  }

  /* =========================================================
   LOGIN EMAIL + OTP CONTAINERS
   ========================================================= */

  .modal-container-email,
  .modal-container-otp {
    display: none;

    min-height: 600px;

    padding: 0;
  }

  /* =========================================================
   SHARED GRID
   ========================================================= */

  .refund-modal .modal-grid,
  .modal-container-email .modal-grid,
  .modal-container-otp .modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    width: 100%;
    min-height: 600px;
  }

  /* =========================================================
   SHARED LEFT IMAGE
   ========================================================= */

  .refund-modal .modal-visual,
  .modal-container-email .modal-visual,
  .modal-container-otp .modal-visual {
    position: relative;

    min-width: 0;
    min-height: 600px;

    overflow: hidden;

    background: var(--white);

    img {
      display: block;

      width: 100%;
      height: 100%;

      object-fit: cover;
      object-position: center;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    }
  }

  /* =========================================================
   SHARED RIGHT FORM PANEL
   ========================================================= */

  .refund-modal .modal-form,
  .modal-container-email .modal-form,
  .modal-container-otp .modal-form {
    position: relative;

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

    min-width: 0;

    padding: 4rem 3.5rem 3rem;

    background: var(--white, #fff);
  }

  /* =========================================================
   REFUND INNER
   ========================================================= */

  .refund-modal {
    .refund-form-inner {
      width: 100%;
      max-width: 360px;

      margin: 0 auto;
    }

    .modal-form {
      form {
        width: 100%;
        min-width: 0;
      }
    }

    .refund-heading {
      margin-bottom: 2rem;

      text-align: center;

      h2 {
        margin: 0 0 1rem;

        font-size: 1.8rem;
        font-weight: 700;
        line-height: 1.2;

        color: var(--black, #111);
      }

      p {
        margin: 0;

        font-size: 0.84rem;
        line-height: 1.6;

        color: #808286;
      }
    }
  }

  /* =========================================================
   LOGIN / OTP FORM INNER
   ========================================================= */

  .form-modal-email,
  .form-modal-otp {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    max-width: 360px;

    margin: 0;

    text-align: center;

    > h4 {
      margin: 0 0 0.8rem;

      font-size: 1.8rem;
      font-weight: 700;
      line-height: 1.2;

      color: var(--black, #111);
    }

    .modal-description {
      margin: 0;

      font-size: 0.84rem;
      line-height: 1.6;

      color: #808286;
    }

    > form {
      display: flex;
      flex-direction: column;

      width: 100%;

      margin-top: 2rem;

      text-align: left;
    }

    .login-footer {
      margin: 1.5rem 0 0;

      font-size: 0.78rem;
      line-height: 1.5;

      color: #808286;

      span {
        color: #808286;
      }

      a {
        color: var(--primary);

        text-decoration: underline;

        transition: opacity 0.2s ease;

        &:hover {
          opacity: 0.7;
        }
      }
    }

    .errorEmail,
    .errorOtp {
      display: block;

      min-height: 1rem;

      margin-top: 0.8rem;

      font-size: 0.75rem;
      line-height: 1.4;

      color: #e63946;
    }
  }

  /* =========================================================
   SHARED FORM GROUP
   ========================================================= */

  .refund-modal .form-group,
  .form-modal-email .form-group,
  .form-modal-otp .form-group {
    display: flex;
    flex-direction: column;

    width: 100%;

    label {
      margin-bottom: 0.45rem;

      font-size: 0.7rem;
      font-weight: 600;

      color: var(--black, #111);
    }

    input {
      width: 100%;
      max-width: 100%;
      height: 46px;

      padding: 0 1rem;

      border: 1px solid #dedede;
      border-radius: 12px;

      outline: none;

      background: #f8f8f8;

      font-family: inherit;
      font-size: 0.85rem;

      color: var(--black, #111);

      transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;

      &::placeholder {
        color: #b4b4b4;
      }

      &:hover {
        border-color: #c3c3c3;
      }

      &:focus {
        border-color: var(--primary);

        background: #fff;

        box-shadow: 0 0 0 3px rgba(255, 42, 79, 0.08);
      }
    }
  }

  .form-modal-email form > input,
  .form-modal-otp form > input {
    width: 100%;
    max-width: 100%;
    height: 46px;

    padding: 0 1rem;

    border: 1px solid #dedede;
    border-radius: 12px;

    outline: none;

    background: #f8f8f8;

    font-family: inherit;
    font-size: 0.85rem;

    color: var(--black, #111);

    transition:
      border-color 0.2s ease,
      background-color 0.2s ease,
      box-shadow 0.2s ease;

    &::placeholder {
      color: #b4b4b4;
    }

    &:focus {
      border-color: var(--primary);

      background: #fff;

      box-shadow: 0 0 0 3px rgba(255, 42, 79, 0.08);
    }
  }

  /* =========================================================
   SHARED BUTTON
   ========================================================= */

  .refund-modal #refund-submit,
  .form-modal-email form button,
  .form-modal-otp form button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 46px;

    margin-top: 1rem;
    padding: 0.8rem 1.5rem;

    border: none;
    border-radius: 999px;

    background: var(--primary);

    color: var(--white, #fff);

    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;

    cursor: pointer;

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

    &:hover {
      transform: translateY(-1px);

      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }

    &:active {
      transform: translateY(0);
    }

    &:disabled {
      opacity: 0.5;

      cursor: not-allowed;

      transform: none;
      box-shadow: none;
    }
  }

  /* =========================================================
   REFUND CAPTCHA + STATUS
   ========================================================= */

  .refund-modal {
    .h-captcha {
      display: flex;
      justify-content: center;

      width: 100%;
      max-width: 100%;

      margin-top: 1.25rem;

      transform-origin: top center;
    }

    .refund-status {
      width: 100%;

      margin-top: 1rem;
      padding: 0.75rem 1rem;

      border-radius: 10px;

      font-size: 0.78rem;
      line-height: 1.5;

      text-align: center;
    }
  }

  /* =========================================================
   REFUND CONTACT INFO
   ========================================================= */

  .refund-modal {
    .info-frame {
      width: 100%;

      margin-top: 1.5rem;
      padding-top: 1.5rem;

      border-top: 1px solid #ededed;

      text-align: center;

      > p {
        margin: 0 0 0.8rem;

        font-size: 0.75rem;
        line-height: 1.5;

        color: #808286;
      }

      .contact {
        display: flex;
        flex-direction: column;

        gap: 0.4rem;

        h3 {
          margin: 0;

          font-size: 0.78rem;
          font-weight: 500;
          line-height: 1.5;

          color: var(--black, #111);

          a {
            color: var(--primary);

            text-decoration: none;

            transition: opacity 0.2s ease;

            &:hover {
              opacity: 0.7;
            }
          }
        }
      }

      .text-small {
        margin-top: 0.8rem;

        font-size: 0.68rem;

        color: #aaa;
      }
    }
  }

  /* =========================================================
   REFUND CLOSE BUTTON
   ========================================================= */

  .refund-modal {
    .close {
      position: absolute;

      top: 1.25rem;
      right: 1.25rem;

      z-index: 20;

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

      width: 42px;
      height: 42px;

      border-radius: 50%;

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

      color: var(--black, #111);

      font-size: 1.8rem;
      font-weight: 300;
      line-height: 1;

      cursor: pointer;

      transition:
        background-color 0.2s ease,
        transform 0.2s ease;

      &:hover {
        background: #ededed;

        transform: rotate(90deg);
      }
    }
  }

  /* =========================================================
   EMAIL + OTP CLOSE BUTTON
   ========================================================= */

  .close-modal-email,
  .close-modal-otp {
    position: absolute;

    top: 1.25rem;
    right: 1.25rem;

    z-index: 20;

    width: auto;

    margin: 0;
    padding: 0;

    button {
      display: flex;
      align-items: center;
      justify-content: center;

      width: 42px;
      height: 42px;

      margin: 0;
      padding: 0;

      border: none;
      border-radius: 50%;

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

      cursor: pointer;

      transition:
        background-color 0.2s ease,
        transform 0.2s ease;

      img {
        display: block;

        width: 14px;
        height: 14px;

        object-fit: contain;
      }

      &:hover {
        background: #ededed;

        transform: rotate(90deg);
      }
    }
  }

  /* =========================================================
   OPTIONAL HELPERS
   ========================================================= */

  .open {
    display: block;
  }

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

  @media (max-width: 768px) {
    .refund-modal,
    .modal-background {
      align-items: flex-start;

      padding: 1rem;

      overflow-y: auto;
    }

    /* ---------------- SHARED CONTAINER ---------------- */

    .refund-modal .modal-content,
    .modal-container-email,
    .modal-container-otp {
      width: 100%;
      max-width: 420px;

      min-height: auto;

      margin: auto;

      border-radius: 18px;

      overflow: hidden;
    }

    /* ---------------- GRID ---------------- */

    .refund-modal .modal-grid,
    .modal-container-email .modal-grid,
    .modal-container-otp .modal-grid {
      display: flex;
      flex-direction: column;

      width: 100%;
      min-height: auto;
    }

    /* ---------------- IMAGE ---------------- */

    .refund-modal .modal-visual,
    .modal-container-email .modal-visual,
    .modal-container-otp .modal-visual {
      width: 100%;
      height: 220px;
      min-height: 220px;
    }

    /* ---------------- FORM PANEL ---------------- */

    .refund-modal .modal-form,
    .modal-container-email .modal-form,
    .modal-container-otp .modal-form {
      width: 100%;
      min-width: 0;

      padding: 3rem 1.5rem 2rem;
    }

    /* ---------------- REFUND ---------------- */

    .refund-modal {
      .refund-form-inner {
        width: 100%;
        max-width: 100%;
      }

      .refund-heading {
        margin-bottom: 1.5rem;

        h2 {
          font-size: 1.5rem;
        }

        p {
          font-size: 0.8rem;
        }
      }

      .close {
        top: 0.8rem;
        right: 0.8rem;

        width: 38px;
        height: 38px;
      }
    }

    /* ---------------- LOGIN / OTP ---------------- */

    .form-modal-email,
    .form-modal-otp {
      width: 100%;
      max-width: 100%;

      > h4 {
        font-size: 1.5rem;
      }

      .modal-description {
        font-size: 0.8rem;
      }

      > form {
        width: 100%;
        max-width: 100%;

        margin-top: 1.5rem;
      }
    }

    .close-modal-email,
    .close-modal-otp {
      top: 0.8rem;
      right: 0.8rem;

      button {
        width: 38px;
        height: 38px;
      }
    }
  }

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

  @media (max-width: 380px) {
    .refund-modal,
    .modal-background {
      padding: 0.75rem;
    }

    .refund-modal .modal-form,
    .modal-container-email .modal-form,
    .modal-container-otp .modal-form {
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .refund-modal {
      .h-captcha {
        transform: scale(0.88);
        transform-origin: top center;

        margin-bottom: -8px;
      }
    }
  }

  .site-footer {
    background: var(--dark-gray);
    padding: clamp(4.5rem, 8vw, 7.5rem) 0 clamp(3rem, 5vw, 5rem);

    a {
      color: inherit;
    }
  }

  .site-footer__top {
    display: grid;
    grid-template-columns: minmax(240px, 480px) minmax(320px, 1fr) minmax(
        220px,
        280px
      );
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;

    @media screen and (min-width: 768px) and (max-width: 1199px) {
      grid-template-columns: minmax(240px, 1fr) minmax(200px, 240px) minmax(
          200px,
          200px
        );
    }

    @media screen and (max-width: 767px) {
      grid-template-columns: minmax(240px, 1fr) minmax(220px, 280px);
    }
  }

  .site-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--white);
  }

  .site-footer__brand-dot {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    background: var(--white);
    flex-shrink: 0;
  }

  .site-footer__brand-name {
    font-family: "Sora", sans-serif;
    font-size: clamp(1.5rem, 2vw, 1.75rem);
    font-weight: 700;
    line-height: 1;
  }

  .site-footer__description {
    color: var(--light-gray);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 1rem 0 0;

    a {
      color: var(--light-gray);
      text-decoration: underline;
      text-underline-offset: 0.2rem;
    }
  }

  .site-footer__links {
    display: grid;
    justify-content: end;
    text-align: right;

    @media screen and (min-width: 768px) and (max-width: 1199px) {
      margin-top: 27px;
      justify-content: center;
    }
  }

  .site-footer__link-column {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    justify-content: end;
    align-items: flex-start;

    a {
      color: #faf7f2;
      font-size: 0.95rem;
      line-height: 1.35;
      width: fit-content;

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

    @media screen and (max-width: 767px) {
      align-items: flex-start;
      text-align: left;
    }
  }

  .site-footer__label {
    color: var(--light-gray);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 0.35rem;
  }

  .site-footer__contact {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.5rem;

    @media screen and (min-width: 768px) and (max-width: 1199px) {
      margin-top: 22px;
    }
  }

  .site-footer__email {
    color: #faf7f2;
    font-size: 0.95rem;
    margin: 0;
    text-align: right;
  }

  .site-footer__contact-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .site-footer__icon-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
      transform 0.2s ease,
      background-color 0.2s ease;

    img,
    svg {
      width: 1.15rem;
      height: 1.15rem;
      object-fit: contain;
    }

    svg {
      fill: var(--white);
    }

    &:hover {
      transform: translateY(-2px);
      background: #ff5672;
    }
  }

  .site-footer__payments {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.25rem;

    img {
      height: 2rem;
      width: auto;
    }
  }

  .site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: clamp(3rem, 5vw, 4.5rem);

    p {
      margin: 0;
      color: var(--light-gray);
      font-size: 0.82rem;
    }
  }

  .site-footer__bottom-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;

    a {
      color: var(--white);
      font-size: 0.95rem;

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

  @media screen and (max-width: 1199px) {
    .site-footer__contact {
      align-items: flex-start;

      .site-footer__email {
        text-align: left;
      }

      .site-footer__payments {
        justify-content: flex-start;
      }
    }
  }

  @media screen and (max-width: 767px) {
    .site-footer {
      padding: 4rem 0 3rem;
    }

    .site-footer__top {
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    .site-footer__links {
      grid-template-columns: 1fr;
      order: 2;
      gap: 1.6rem;
    }

    .site-footer__link-column--offset .site-footer__label {
      display: none;
    }

    .site-footer__contact {
      order: 3;
      gap: 1rem;
    }

    .site-footer__bottom {
      flex-direction: column;
      align-items: flex-start;
      margin-top: 2.5rem;
    }

    .site-footer__bottom-links {
      flex-wrap: wrap;
      gap: 0.75rem 1.1rem;
    }
  }

  /* Footer  */
  .backToTopBtn {
    bottom: 70px;
    left: 13px;
    z-index: 1000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--black);
    border: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 0px 4px var(--primary);
    cursor: pointer;
    transition-duration: 0.3s;
    overflow: hidden;
    position: fixed;
  }

  #backToTop {
    opacity: 0;
    visibility: hidden;

    &.visible {
      opacity: 1;
      visibility: visible;
    }
  }

  .svgIcon {
    width: 12px;
    transition-duration: 0.3s;
  }

  .svgIcon path {
    fill: var(--white);
  }

  .backToTopBtn:hover {
    width: 140px;
    border-radius: 50px;
    transition-duration: 0.3s;
    background-color: var(--black);
    align-items: center;
  }

  .backToTopBtn:hover .svgIcon {
    transition-duration: 0.3s;
    transform: translateY(-200%);
  }

  .backToTopBtn::before {
    position: absolute;
    bottom: -20px;
    content: "Back to Top";
    color: var(--primary);
    font-size: 0px;
  }

  .backToTopBtn:hover::before {
    font-size: 13px;
    opacity: 1;
    bottom: unset;
    transition-duration: 0.3s;
  }

  /* Support page  */
  .unsub-container {
    border: 3px solid var(--darkerGrey);
    padding: 2.5rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    border-radius: var(--border-radius-2);

    form {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      width: 100%;
      max-width: 500px;

      input {
        padding: 0.75rem;
        border: 1px solid var(--darkerGrey);
        border-radius: var(--border-radius-2);
        width: 100%;
        background: var(--darkerGrey);
        color: var(--white);
        font-size: 1rem;

        &::placeholder {
          color: var(--grayMd);
        }
      }

      .btn {
        width: 100%;
      }
    }

    #errorMsg {
      color: var(--gray);
      font-size: 0.875rem;
    }
  }
  .h-captcha {
    max-width: 100%;
    overflow: auto;
  }

  .support-page {
    .wrapper[data-width="medium"] {
      --wrapper-max-width: 900px;
    }

    h3 {
      color: var(--white);
      font-size: 1.25rem;
      margin: 0;

      @media (max-width: 767px) {
        text-align: center;
      }
    }

    h2 {
      font-size: 3rem;
      font-weight: 200;
      margin: 0;

      @media (max-width: 767px) {
        font-size: 2rem;
      }
    }

    a {
      color: var(--white);
      text-decoration: underline;
      font-weight: 600;
      overflow: hidden;
      white-space: nowrap; /* Don't forget this one */
      text-overflow: ellipsis;
    }

    .text-large {
      color: var(--gray);
      font-size: 2.125rem;
      font-weight: 300;
      line-height: 1.3;

      @media (max-width: 767px) {
        font-size: 1.75rem;
        text-align: center;
      }
    }

    .tablet-column {
      @media (max-width: 1199px) {
        flex-direction: column;
      }
    }

    .support-live-chat {
      background: var(--primary);
      background: linear-gradient(
        to bottom,
        var(--dark-primary),
        var(--primary)
      );
      position: relative;
      padding: 60px 80px;
      border-radius: var(--border-radius-2);

      @media (min-width: 768px) and (max-width: 1199px) {
        padding: 60px 40px;
      }

      @media (max-width: 767px) {
        padding: 30px 20px;
        text-align: center;
      }

      .chat-content {
        position: relative;
        z-index: 1;

        h2 {
          font-size: 4rem;
          color: var(--black);

          @media (max-width: 767px) {
            font-size: 11vw;
            letter-spacing: -0.5px;
            font-weight: 300;
          }
        }
      }

      > img {
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 0;

        @media (min-width: 768px) and (max-width: 1199px) {
          right: -10px;
          z-index: 0;
          height: 340px;
          width: auto;
        }

        @media (max-width: 767px) {
          display: none;
        }
      }

      .chat-button {
        display: block;
        max-width: max-content;
        padding: 0.6rem 2.5rem 0.6rem 1rem;
        display: flex;
        align-items: center;
        gap: 10px;
        border-radius: var(--border-radius-1);
        border: none;
        transition: all 0.2s ease-out;
        margin-top: 20px;
        cursor: pointer;

        @media (max-width: 767px) {
          padding: 0.6rem 1rem;
          width: 100%;
          max-inline-size: none;
          justify-content: center;
        }

        &:hover {
          transform: scale(1.1);
        }

        span {
          text-transform: uppercase;
          font-weight: 600;
          font-size: 1.25rem;

          @media (max-width: 767px) {
            font-size: 5vw;
            letter-spacing: -0.5px;
          }
        }

        img {
          width: 40px;
          height: 40px;
        }
      }
    }

    .support-video {
      width: 100%;
      height: 100%;
      border-radius: 25px;
    }

    .support-container {
      background: var(--darkerGrey);
      position: relative;
      padding: 50px;
      border-radius: 25px;

      @media (max-width: 767px) {
        padding: 30px 20px;
        text-align: center !important;
      }

      &.email-frame {
        text-align: left;
        max-width: 680px;

        img {
          left: auto;
          right: 20px;
        }

        a {
          font-size: 1.5rem;
          line-height: normal;

          @media (max-width: 767px) {
            font-size: 5.5vw;
          }
        }
      }

      > .d-flex {
        position: relative;
        z-index: 1;
      }

      > img {
        position: absolute;
        left: 0;
        top: -30px;
        height: 100%;
        width: auto;
        z-index: 0;
        object-fit: contain;
        object-position: top;
        max-width: 350px;

        @media (max-width: 767px) {
          display: none;
        }
      }

      .support-number {
        font-size: 3rem;
        line-height: 1.25;
        font-weight: 800;
        display: block;
        text-decoration: none !important;

        @media (max-width: 767px) {
          font-size: 9vw;
        }
      }

      /* @supports (-webkit-touch-callout: none) {
        @media screen and (max-device-width: 767px) and (-webkit-min-device-pixel-ratio: 2) {
          .support-number {
            transform: scale(2.25);
            margin-top: -15px;
            margin-bottom: 10px;
            color: var(--white) !important;
            text-decoration: none !important;
          }
        }
      } */

      .support-text {
        color: var(--light-text);
        display: block;
      }
    }

    .contact_form {
      padding: 0 0 0 80px;
      background: transparent;
      max-width: 100%;

      @media screen and (min-width: 768px) and (max-width: 1279px) {
        padding-left: 50px;
      }

      @media screen and (max-width: 767px) {
        padding-left: 0;
      }

      .form-group {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;

        input,
        textarea {
          padding: 0.75rem;
          background: var(--darkerGrey) !important;
          color: var(--white);
          border: none !important;
          border-radius: 25px;
          font-family: "Sora", sans-serif;
          font-size: 1rem;

          &::placeholder {
            color: var(--grayMd);
          }
        }
      }
    }

    .accordion {
      width: 100%;
      margin: auto;
      overflow: hidden;

      .accordion-item {
        background: transparent;
        border: none;
        border-bottom: 1px solid var(--grayDark);
        border-radius: 0 !important;

        .accordion-header {
          cursor: pointer;
          padding: 25px 0 10px;
          font-weight: bold;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .arrow {
            color: var(--white);
            transition: transform 0.3s ease;
            margin-right: 10px;
            font-size: 18px;
          }

          span {
            font-size: 1.5rem;
            line-height: 1.3;
            color: var(--white);
            font-weight: 600;
            flex-grow: 1;
            padding-right: 20px;

            @media (max-width: 767px) {
              font-size: 1.25rem;
            }
          }
        }

        .accordion-content {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.3s ease;
          padding: 0 0 15px;
          color: var(--grayMd);

          p {
            margin: 15px 0;
          }
        }

        &.active {
          .accordion-content {
            max-height: 450px; /* adjust if answers are long */
            overflow-y: auto;
          }

          .arrow {
            transform: rotate(90deg); /* arrow points down when open */
          }
        }
      }
    }
  }

  /* Legals Pages  */

  .title-section {
    /* styling for my title section header */
    background: var(--primary);
    padding: 2rem 0;

    h1 {
      font-size: 3rem;
      font-weight: 800;
      line-height: 1.2;
      margin-bottom: 1rem;

      @media (max-width: 767px) {
        font-size: 2rem;
        line-height: 1.3;
      }
    }
  }

  .legals {
    h2 {
      font-size: 2rem;
      margin-bottom: 0.75rem;
      margin-top: 2rem;
    }
    h3 {
      font-size: 1.5rem;
      margin-bottom: 0.75rem;
      margin-top: 2rem;
    }
    p {
      font-size: 1rem;
      margin-bottom: 1rem;
    }
    ul {
      list-style: disc;
      padding-left: 20px;

      li {
        margin-bottom: 0.5rem;
      }
    }
  }
}

@layer utilites {
  .background-dark {
    background-color: var(--black);
  }

  .background-primary {
    background-color: var(--primary);
  }

  .background-light {
    background-color: var(--light-gray);
  }
  .d-none,
  .hidden {
    display: none !important;
  }

  .d-flex {
    display: flex;

    .flex-1 {
      flex: 1;
      min-width: 0;
    }
  }

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

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

  .flex-row {
    flex-direction: row;
  }

  .d-flex .column {
    flex-basis: 50%;
    flex-grow: 1;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-between {
    justify-content: space-between;
  }

  .align-center {
    align-items: center;
  }

  .text-center {
    text-align: center;
  }

  .text-white {
    color: var(--white);
  }

  .text-black {
    color: var(--black);
  }

  .m-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .ml-auto {
    margin-left: auto !important;
  }

  .xs-hide {
    @media screen and (max-width: 767px) {
      display: none;
    }
  }

  .md-hide {
    @media screen and (min-width: 768px) and (max-width: 1199px) {
      display: none;
    }
  }

  .mt-auto {
    margin-top: auto !important;
  }

  .mt-0 {
    margin-top: 0 !important;
  }

  .mt-1 {
    margin-top: 1rem;
  }

  .mt-2 {
    margin-top: 1.25rem;
  }

  .mt-3 {
    margin-top: 1.5rem;
  }

  .mt-4 {
    margin-top: 2rem;
  }

  .mt-5 {
    margin-top: 2.5rem;
  }

  .mb-0 {
    margin-bottom: 0;
  }

  .mb-1 {
    margin-bottom: 1rem;
  }

  .mb-2 {
    margin-bottom: 1.25rem;
  }

  .mb-3 {
    margin-bottom: 1.5rem;
  }

  .mb-4 {
    margin-bottom: 2rem;
  }

  .mb-5 {
    margin-bottom: 2.5rem;
  }

  .pt-0 {
    padding-top: 0 !important;
  }

  .pt-1 {
    padding-top: 1rem;
  }

  .pt-2 {
    padding-top: 1.25rem;
  }

  .pt-3 {
    padding-top: 1.5rem;
  }

  .pt-4 {
    padding-top: 2rem;
  }

  .pt-5 {
    padding-top: 2.5rem;
  }

  .pb-1 {
    padding-bottom: 1rem;
  }

  .pb-2 {
    padding-bottom: 1.25rem;
  }

  .pb-3 {
    padding-bottom: 1.5rem;
  }

  .pb-4 {
    padding-bottom: 2rem;
  }

  .pb-5 {
    padding-bottom: 2.5rem;
  }

  .p-all {
    padding: 3rem;

    @media (max-width: 767px) {
      padding: 1.5rem;
    }
  }

  .no-padding-top {
    padding-top: 0 !important;
  }

  .no-padding-bottom {
    padding-bottom: 0 !important;
  }

  .col-4 {
    width: 35%;

    @media screen and (min-width: 768px) and (max-width: 1199px) {
      width: 45%;
    }

    @media screen and (max-width: 767px) {
      width: 100%;
    }
  }

  .col-7 {
    width: 60%;

    @media screen and (min-width: 768px) and (max-width: 1199px) {
      width: 50%;
    }

    @media screen and (max-width: 767px) {
      width: 100%;
    }
  }

  .col-6 {
    width: 50%;

    @media screen and (max-width: 767px) {
      width: 100%;
    }
  }

  .gap-1 {
    gap: 0.5rem;
  }

  .gap-2 {
    gap: 0.625rem;
  }

  .gap-3 {
    gap: 1rem;
  }

  .gap-20 {
    gap: 20px;
  }

  .gap-30 {
    gap: 30px;
  }
  .gap-40 {
    gap: 40px;
  }

  .gap-50 {
    gap: 50px;
  }

  .gap-100 {
    gap: 100px;

    @media screen and (max-width: 1199px) {
      gap: 50px;
    }
  }

  .w-100 {
    width: 100%;
  }

  .mobile-column {
    @media screen and (max-width: 767px) {
      flex-direction: column;
    }
  }

  .mobile-column-reverse {
    @media screen and (max-width: 767px) {
      flex-direction: column-reverse;
    }
  }

  .tablet-column {
    @media screen and (min-width: 768px) and (max-width: 1199px) {
      flex-direction: column;
    }
  }

  .reverse-mobile {
    @media screen and (max-width: 767px) {
      flex-direction: column-reverse;
    }
  }
}