@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: 1rem 0;
  }

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

@layer base {
  :root {
    --black: #141414;
    --white: #fff;
    --primary: #6EBA21;
    --secondary: #EEFF01;
    --light-gray: #F6F9D2;
    --gray: #e0e0e0;
    --dark-gray: #5e5e5e;
    --gradient: linear-gradient(#6EBA21 50%, #EEFF01 100%);

    --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: "Inter", sans-serif;
    font-size: 10px;
    color: var(--black);
    background-color: var(--white);
    position: relative;
    line-height: normal;
    width: 100%;
    overflow-x: hidden;
  }

  h1 {
    font-family: "Coustard", sans-serif;
    font-size: 3em;
    font-weight: 900;

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

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

  h2 {
    font-family: "Coustard", sans-serif;
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;

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

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

  h3 {
    font-family: "Coustard", sans-serif;
    font-size: 1.5rem;
    font-weight: 900;

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

  a {
    color: var(--light-primary);
    text-decoration: none;
  }

  .btn {
    font-weight: 700;
    color: var(--black);
    background-color: var(--secondary);
    border-radius: var(--border-radius-4);
    box-shadow: 0 3px 0 var(--primary);
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 3rem;
    font-size: 2em;
    border: none;
    transition: all 0.2s ease-out;
    width: fit-content;
    min-width: 240px;
    text-transform: uppercase;
    font-weight: 600;

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

    &.large {
      margin: 0;
      font-size: 1.5rem;
      padding: 1.25rem 3rem;
    }
  }

  .btn-img {
    flex: 1;
    border: none;
    border-radius: var(--border-radius-2);
    transition: all .2s ease-in-out;
    background: transparent;
    overflow: hidden;
    padding: 0;

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

.highlight-list {
  li {
    padding: 0.5rem 0 1rem 2rem;
    display: flex;
    font-size: 1.5rem;
    font-weight: 300;
    position: relative;
    border-bottom: 1px solid var(--light-gray);

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

    &::before {
      content: "✔";
      font-weight: 600;
      position: absolute;
      left: 0;
      color: var(--primary);
    }
  }
}

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

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

    /* helps to match the Figma file */
    box-sizing: border-box;
    width: 100%;
  }

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

  .wrapper[data-width="narrowXS"] {
    --wrapper-max-width: 600px;
  }

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

  .wrapper[data-width="full"] {
    --wrapper-max-width: 100%;
  }

  .section {
    padding-block: 6rem;

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

    +.section {
      padding-top: 0;
    }

    &.padding-top {
      padding-block: 6rem;

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

    .modal-grid {
      display: grid;
      place-items: center;
      gap: 1.25rem;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      height: 100%;

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

  @layer components {

    /* Navigation  */
    .top_bar {
      display: flex;
      padding: 0.5rem 2.5rem;
      justify-content: space-between;
      background: var(--primary);
      gap: 1.5rem;
      align-items: center;

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

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

      a {
        color: var(--white);
        font-size: 1rem;
        letter-spacing: -0.5px;
        line-height: 1.4;
        font-weight: 600;
      }

      .support-icon {
        width: 25px;
        height: 25px;
      }
    }

    .bck-title {
      width: 100%;
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      background: url(../images/bck-title.png) right top no-repeat;
      height: 320px;
      background-size: contain;

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

      @media screen and (max-width: 767px) {
        height: 140px;
      }
    }

    .site_header {
      display: flex;
      justify-content: space-between;
      padding: 1.25rem 2.5rem;
      align-items: center;
      position: relative;
      z-index: 999;

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

      .logo_header {
        height: 50px;
        width: auto;
        overflow: hidden;
        padding: 0 !important;

        @media screen and (max-width: 767px) {
          max-width: 42px;
          height: 42px;
        }

        img {
          height: 50px;
          width: auto;
          max-inline-size: none;

          @media screen and (max-width: 767px) {
            width: auto;
            height: 42px;
          }
        }
      }

      .site_navigation {
        grid-column: 3;
        justify-self: end;

        @media screen and (max-width: 767px) {
          position: fixed;
          inset: 0;
          background: var(--dark-gray);
          transform: translateX(100%);
          transition: transform 0.3s ease-in-out;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 90%;
          z-index: 2;
          right: 0;
          left: auto;
          height: 100%;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          /* Add for iOS smooth scrolling */
          -webkit-transform: translateX(100%);
          /* Ensure compatibility with older iOS */

          &.active {
            transform: translateX(0);
            -webkit-transform: translateX(0);
            /* For iOS compatibility */
          }
        }

        ul {
          display: flex;
          gap: 1.25rem;

          a {
            text-decoration: none;
            font-weight: 700;
            color: var(--primary);

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

          @media screen and (max-width: 767px) {
            flex-direction: column;
            gap: 1.5rem;
            padding: 2rem 0;
          }
        }
      }

      a,
      button {
        backdrop-filter: blur(8px);
        padding: 0.5rem 1rem !important;
        background: #ffffffbe !important;
        border-radius: var(--border-radius-1);
        font-size: 18px;
        min-width: auto;
        min-height: 40px;

        @media screen and (max-width: 767px) {
          background: transparent !important;
          backdrop-filter: none;
        }
      }

      .header-right {
        grid-column: 3;
        position: relative;
        display: flex;
        gap: 1rem;
        align-items: center;

        .dropdown-trigger {
          display: flex;
          flex-direction: column;
          gap: 4px;
          background: none;
          border: none;
          padding: 5px;
          cursor: pointer;
          justify-content: center;
        }

        .dropdown-menu {
          position: fixed;
          top: 0;
          right: -100%;
          height: 100vh;
          background: var(--black);
          width: 25%;
          padding: 4rem 1.5rem;
          transition: right 0.3s ease-in-out;
          box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
          overflow-y: auto;
          z-index: 9;

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

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

          &.active {
            right: 0;
          }

          ul {
            display: flex;
            flex-direction: column;
            gap: 1.25rem;

            li {
              margin: 0;

              a {
                display: block;
                padding: 0.5rem;
                font-size: 1.125rem;
                font-weight: 600;
                color: var(--primary);
                transition: color 0.2s;
                background: transparent !important;
                backdrop-filter: unset;

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

        .unsubLink {
          font-size: 20px;
          text-transform: uppercase;
          font-weight: 600;
          color: var(--primary);
        }
      }

      .desktop-nav {
        display: flex;
        gap: 1.25rem;

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

        a {
          text-decoration: none;
          font-weight: 700;
        }
      }

      .hamburger {
        display: none;
        flex-direction: column;
        gap: 6px;
        cursor: pointer;
        padding: 5px;
        background: none;
        border: none;
        z-index: 10;

        span {
          display: block;
          width: 30px;
          height: 3px;
          background-color: var(--primary);
          transition: 0.3s ease-in-out;
        }

        &.active {
          position: fixed;
          right: 40px;

          @media screen and (max-width: 767px) {
            right: 18px;
          }

          span:first-child {
            transform: translateY(9px) rotate(45deg);
          }

          span:nth-child(2) {
            opacity: 0;
          }

          span:last-child {
            transform: translateY(-9px) rotate(-45deg);
          }
        }

        &[aria-expanded="true"] {
          position: fixed;
          right: 40px;
          font-weight: 700;

          @media screen and (max-width: 767px) {
            right: 10px;
            top: 15px;
          }

          span:first-child {
            transform: translateY(9px) rotate(45deg);
          }

          span:nth-child(2) {
            opacity: 0;
          }

          span:last-child {
            transform: translateY(-5px) rotate(-45deg);
          }
        }

        @media screen and (max-width: 767px) {
          display: flex;
          align-items: flex-end;
        }
      }

      @media screen and (min-width: 768px) {
        .mobile-nav {
          display: none;
        }
      }
    }

    /* Hero Section */

    .page_hero {
      position: relative;
      padding-block: 10rem;
      background: var(--gradient);


      @media screen and (max-width: 1199px) {
        padding-block: 6rem;
      }

      .hero-bck {
        position: absolute;
        bottom: 0;
        left: 0;
        width: auto;
        height: 100%;
        z-index: 0;
        overflow: hidden;
        object-fit: cover;

        &.right {
          left: inherit;
          right: 0;
        }

        @media screen and (max-width: 1199px) {
          height: 80%;
        }

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

      .hero-content {
        text-align: center;
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        color: var(--white);

        h1 {
          font-size: 6em;
          text-transform: uppercase;

          @media screen and (max-width: 1199px) {
            font-size: 5em;
          }

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

          span {
            color: var(--secondary);
            display: block;
          }
        }

        p {
          font-size: 1.25rem;
          margin: 0 auto;
          max-width: 1080px;
          font-weight: 500;
        }

        .btn {
          margin: 0;
          font-size: 1.5rem;
          text-transform: uppercase;
          padding: 1.25rem 3rem;
        }
      }
    }

    .banner {
      background: var(--primary);

      .banner-text {
        color: var(--white);
        text-align: center;
        text-transform: uppercase;
        font-size: 3rem;
        font-family: "Coustard", sans-serif;
        font-weight: 900;

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

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

        span {
          display: block;
          color: var(--secondary);
        }
      }
    }

    .background-primary {
      .banner {
        padding-top: 5rem;

        img {
          border-radius: var(--border-radius-3);
        }
      }
    }

    .home-banner {
      padding: 4rem 1rem;
      background: var(--secondary) url(../images/professional-chef-kitchen.png) right bottom no-repeat;
      background-size: contain;
      border-radius: var(--border-radius-2);
    }

    /* Hero Payment  */

    .hero_payment {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      /* Price Cards Payment  */

      .price_cards {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 40px;
        padding: 40px 0 60px;

        h1 {
          font-size: 24px;
          font-weight: 600;
          margin-bottom: 0px;
          text-transform: uppercase;
        }

        .pricing-toggle {
          display: flex;
          justify-content: center;
          width: 90%;
          max-width: 720px;
          margin: 0 auto;
          overflow: hidden;
          gap: 10px;

          .pricing-option {
            background-color: transparent;
            padding: 20px 30px;
            cursor: pointer;
            transition:
              background-color 0.3s,
              color 0.3s;
            border-radius: 8px;
            border: solid 1px var(--light-gray);
            background: var(--light-gray);
            flex: 1;
            color: var(--black);
            justify-content: space-between;
            gap: 20px;

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

            .pricing-price {
              text-align: right;
            }

            .plan-name {
              font-family: "Nunito", sans-serif;
              line-height: 30px;
              text-align: left;
              font-size: 24px;
              font-weight: 600;
              margin-bottom: 5px;

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

            .price {
              font-family: "Nunito", sans-serif;
              line-height: 30px;
              font-size: 28px;
              font-weight: 800;
              margin-bottom: 5px;

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

            .duration {
              font-size: 15px;
              font-weight: 600;
              text-transform: uppercase;
              line-height: normal;
              margin-bottom: 0;
            }

            .details {
              font-size: 14px;
              line-height: normal;
              margin-bottom: 0;
            }

            &.active {
              border: solid 1px var(--primary);
              background-color: var(--primary);
              color: var(--white);
            }
          }
        }
      }

      .headpart {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        background-color: var(--light-gray);
        padding: 60px 0;

        h1 {
          font-size: 1.5rem;
          font-weight: 500;
          margin-bottom: 30px;
          text-align: center;
        }

        .flex-container-col {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
        }

        .checkbox-group {
          margin-bottom: 15px;
          position: relative;
          display: flex;
          align-items: flex-start;
          justify-content: flex-start;

          .checkbox-group input[type="checkbox"] {
            margin-top: 5px;
          }

          label {
            font-size: 14px;
            line-height: 1.5;
            display: block;
            margin-left: 10px;
            position: relative;
          }
        }

        .btn {
          padding: 18px;
          font-size: 30px;
          font-weight: 700;
          line-height: 30px;
          margin: 30px auto;
          display: block;
          width: 100%;
          max-width: 360px;

          &:disabled {
            border: none;
            cursor: not-allowed;
            box-shadow: none;
            opacity: 0.5;

            &:hover {
              transform: none;
            }
          }
        }
      }
    }

    /* Slider  */

    .slider {
      position: relative;
      overflow: hidden;
      height: 100%;
      max-height: 600px;

      @media (max-width: 767px) {
        max-height: 70vh;
      }

      .slides {
        display: flex;
        width: 100%;
        height: 600px;
        transition: transform 0.6s ease-in-out;

        @media (max-width: 767px) {
          height: 70vh;
        }

        .slide {
          width: 100%;
          height: 100%;
          flex-shrink: 0;
          background-size: cover;
          background-position: center;
          position: relative;
          color: white;
          display: flex;
          align-items: center;
          overflow: hidden;
          border-radius: var(--border-radius-2);

          .overlay {
            display: flex;
            flex-direction: column;
            padding: 80px;
            gap: 20px;

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

            h1 {
              margin: 0;
              font-size: 3rem;
              font-weight: 600;

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

            p {
              font-size: 1.2rem;
              max-width: 480px;
              margin: 0 0 10px;
              text-align: left;

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

          img {
            position: absolute;
            z-index: -1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(0.5);
            overflow: hidden;
            border-radius: var(--border-radius-2);

            @media (max-width: 767px) {
              height: 70vh;
            }
          }
        }
      }

      /* Arrows */
      .arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        padding: 15px;
        cursor: pointer;
        z-index: 10;
        width: 60px;
        height: 60px;
        font-size: 24px;
        border-radius: 30px;
        font-weight: 300;
      }

      .prev {
        left: 10px;
      }

      .next {
        right: 10px;
      }

      /* Dots */
      .dots {
        position: absolute;
        bottom: 20px;
        width: 100%;
        text-align: center;
      }

      .dot {
        display: inline-block;
        width: 12px;
        height: 12px;
        margin: 0 5px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        cursor: pointer;
      }

      .dot.active {
        background: white;
      }
    }

    /* Home Apps */

    .homeApps {
      padding: 4.125rem 3.125rem;
      margin-bottom: 3.125rem;
      border-radius: var(--border-radius-2);

      @media (max-width: 767px) {
        padding: 2rem 1.5rem;
        flex-direction: column;
        gap: 2rem;
        margin-bottom: 2rem;
      }

      .homeApps_text {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        align-items: flex-start;
        text-align: left;

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

        h3 {
          text-transform: capitalize;
          font-size: 1.875rem;

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

        .btn {
          padding: 0.5rem 1.25rem;
          font-size: 1rem;
          color: var(--primary);

          &:hover,
          &:focus-visible {
            transform: scale(1.05);
            color: var(--white);
          }
        }
      }

      .homeApps__container {
        padding: 1rem;
        border-radius: var(--border-radius-2);
        gap: 0.625rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;

        &::-webkit-scrollbar {
          display: none;
        }

        @media (max-width: 767px) {
          width: 100%;
          justify-content: flex-start;
        }
      }

      .homeApps__item {
        width: 120px;
        height: 120px;
        flex-shrink: 0;

        @media (max-width: 576px) {
          width: 100px;
          height: 100px;
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: var(--border-radius-2);
        }
      }
    }

    /* Category Page */

    .category_hero {
      padding: 7.125rem 2rem;
      background-size: cover;
      color: var(--white);
      text-align: center;
      border-radius: var(--border-radius-2);

      h1 {
        font-size: 2.75rem;
        margin-bottom: 1rem;
      }

      p {
        font-size: 1.125rem;
      }
    }

    /* Fix for category cards layout */

    .category-items-container,
    .category-items-more {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
    }

    .category_card {
      position: relative;
      width: 100%;
      max-width: 300px;
      height: 200px;
      margin-bottom: 20px;
      overflow: hidden;
      border-radius: 8px;
      transition: all 0.3s ease-in-out;

      img.cardsImage {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 0.3s ease-in-out;
        filter: brightness(0.5) grayscale(0.5);
      }
    }

    .category_card:hover img.cardsImage {
      transform: scale(1.05);
    }

    .video-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 1;
    }

    .category_card:hover .video-overlay {
      opacity: 1;
    }

    .card-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .cardsTitle {
      position: absolute;
      bottom: 20px;
      left: 15px;
      font-size: 1rem;
      font-weight: 600;
      z-index: 2;
      margin: 0;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    /* Transition styles for See More/Less functionality */
    .category-items-more {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition:
        max-height 0.5s ease-in-out,
        opacity 0.5s ease-in-out;
    }

    .category-items-more.show {
      max-height: 100%;
      /* Large enough to contain all items */
      opacity: 1;
      display: flex !important;
    }

    /* Button transition effects */
    .see-more-btn,
    .see-less-btn {
      transition: all 0.3s ease;
      border: 2px solid var(--primary);
      color: var(--primary);
      background: transparent;
      padding: 0.75rem 2rem;
      margin-top: 20px;
    }

    .see-more-btn:hover,
    .see-less-btn:hover {
      transform: translateY(-3px);
    }

    /* Item appear animation */

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .category-items-more.show a {
      animation: fadeInUp 0.4s ease-out forwards;
    }

    .category-items-more.show a:nth-child(1) {
      animation-delay: 0.05s;
    }

    .category-items-more.show a:nth-child(2) {
      animation-delay: 0.1s;
    }

    .category-items-more.show a:nth-child(3) {
      animation-delay: 0.15s;
    }

    .category-items-more.show a:nth-child(4) {
      animation-delay: 0.2s;
    }

    .category-items-more.show a:nth-child(5) {
      animation-delay: 0.25s;
    }

    .category-items-more.show a:nth-child(6) {
      animation-delay: 0.3s;
    }

    .category-items-more.show a:nth-child(7) {
      animation-delay: 0.35s;
    }

    .category-items-more.show a:nth-child(8) {
      animation-delay: 0.4s;
    }

    .category-items-more.show a:nth-child(9) {
      animation-delay: 0.45s;
    }

    .category-items-more.show a:nth-child(10) {
      animation-delay: 0.5s;
    }

    /* Also add animations to the initial items */
    .category-items-container a {
      animation: fadeInUp 0.4s ease-out forwards;
    }

    .category-items-container a:nth-child(1) {
      animation-delay: 0.05s;
    }

    .category-items-container a:nth-child(2) {
      animation-delay: 0.1s;
    }

    .category-items-container a:nth-child(3) {
      animation-delay: 0.15s;
    }

    .category-items-container a:nth-child(4) {
      animation-delay: 0.2s;
    }

    .category-items-container a:nth-child(5) {
      animation-delay: 0.25s;
    }

    .category-items-container a:nth-child(6) {
      animation-delay: 0.3s;
    }

    /* Category Cards */

    .category_card {
      width: 180px;
      height: 210px;
      overflow: hidden;
      border-radius: var(--border-radius-3);
      position: relative;
      transition: transform 0.3s ease-in-out;
      margin: 0;

      @media screen and (min-width: 991px) and (max-width: 1199px) {
        width: 150px;
      }

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

        img.cardsImage {
          filter: brightness(1) grayscale(0) contrast(1);
        }
      }

      img.cardsImage {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 0.3s ease-in-out;
        filter: brightness(0.5) grayscale(0.25) contrast(1.1);
      }
    }

    .category_card:hover img.cardsImage {
      transform: scale(1.05);
    }

    .cardsTitle {
      text-align: center;
      position: absolute;
      width: 80%;
      bottom: 20px;
      left: 15px;
      color: var(--white);
      font-size: 0.9rem;
      z-index: 2;
      margin: 0;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      text-transform: uppercase;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .app-section,
    #app-section {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 1rem;
      justify-items: center;

      @media screen and (min-width: 991px) and (max-width: 1199px) {
        grid-template-columns: repeat(auto-fill, minmax(13.5%, 1fr));
      }
    }

    /* Categorie Pills  */

    .features-bar {
      margin: 0;
      flex-wrap: wrap;

      @media screen and (max-width: 767px) {
        justify-content: center;
      }
    }

    .labels {
      .item-label {
        display: inline-block;
        padding: 5px 10px;
        background: var(--primary);
        color: var(--black);
        font-weight: 600;
        font-family: "Roboto", sans-serif;
        border-radius: 5px;
        max-height: fit-content;
        overflow: hidden;
        white-space: nowrap;
        /* Don't forget this one */
        text-overflow: ellipsis;
      }
    }

    .rating {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .rating>img {
      width: 15px;
    }

    .rating>span {
      font-size: 1.5em;
    }

    .categories {
      position: relative;
      overflow-x: auto;
    }

    form.categories-buttons {
      display: flex;
      flex-wrap: nowrap;
      gap: 10px;
      transition: transform 0.3s ease-in-out;
      width: max-content;
      padding: 0 0 10px 0;
      margin: 0 auto;

      .category-pill {
        padding: 0.5rem 1rem;
        border: none;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        justify-content: center;
        border-radius: var(--border-radius-3);
        background-color: #232323;
        color: var(--white);
        font-size: 0.875rem;
        cursor: pointer;
        transition: transform 0.3s ease-in-out;

        img {
          width: 20px;
          height: 20px;
          filter: brightness(10) contrast(5);
        }

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

    /* Search Page  */

    #filter-content {
      position: absolute;
      inset: 0;
      background: var(--black);
      padding: 160px 20px;
      display: none;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      /* Adjust columns dynamically */
      gap: 40px 20px;
      /* Keeps consistent spacing between items */
      justify-content: start;
      /* Align items to the start */
      justify-items: center;
      align-content: start;
      /* Align the grid's content to the top */
      z-index: 2;

      p {
        color: var(--white);
      }
    }

    .film-item {
      display: flex;
      flex-direction: column;
      gap: 10px;
      justify-content: flex-start;
      align-items: center;
      max-width: 180px;
      max-height: min-content;
    }

    .film-item img {
      height: 250px;
      width: 100%;
      max-width: 180px;
    }

    .film-item a {
      color: var(--white);
    }

    .film-item h3 {
      font-size: 14px;
      margin-top: 10px;
      text-align: left;
    }

    /* Scrollbar  */

    /* width */
    ::-webkit-scrollbar {
      width: 15px;
      height: 5px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px rgba(128, 128, 128, 0.329);
      border-radius: 10px;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
      background: #2c2c2c;
      border-radius: 10px;
    }

    /* Section Picker */

    .section_picker {
      display: flex;
      flex-direction: row;
      justify-content: center;
      gap: 5px;
      max-width: 100%;
      margin-top: 5px;

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

      button {
        padding: 30px;
        background: transparent;
        width: 100%;
        transition: 0.2s;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 20px;
        transition: all 0.2s ease-out;
        text-align: left;
        background: var(--secondary);
        border: none;

        @media screen and (max-width: 767px) {
          background-size: 50% !important;
        }

        &:hover {
          transform: translateY(-5px);
          background: var(--primary);
        }

        &.active {
          cursor: default;
          transform: none !important;

          .btn {
            border: 2px solid var(--secondary);
            transform: none !important;
            color: var(--secondary);
            cursor: default;
            background: transparent;
            opacity: .5;
          }
        }

        span {
          font-weight: 600;
          font-size: 1.25rem;
        }

        p {
          font-size: 1.25rem;
          font-weight: 100 !important;
          margin: 0 0 10px;
          max-width: 80%;

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

        .btn {
          font-size: 1.25rem;
          background: var(--white);
        }

        &:nth-of-type(1) {
          background: var(--secondary) url(../images/picker-bck-recipes.png) no-repeat bottom right;
          background-size: 33.33%;

          &.active {
            background: var(--primary) url(../images/picker-bck-recipes.png) no-repeat bottom right;
          }
        }

        &:nth-of-type(2) {
          background: var(--secondary) url(../images/picker-bck-videos.png) no-repeat bottom right;
          background-size: 33.33%;

          &.active {
            background: var(--primary) url(../images/picker-bck-videos.png) no-repeat bottom right;
          }
        }

        &:nth-of-type(3) {
          background: var(--secondary) url(../images/picker-bck-tips.png) no-repeat bottom right;
          background-size: 33.33%;

          &.active {
            background: var(--primary) url(../images/picker-bck-tips.png) no-repeat bottom right;
          }
        }
      }
    }

    /* Latest Articles  */

    .latest_articles {
      background: var(--black);
      background-attachment: fixed;
      background-size: cover;

      .btn {
        display: block;
        width: fit-content;
        margin: 1rem auto 0;
        padding: 0.75rem 2rem;
      }

      .d-flex {
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: center;
        padding: 0;
      }

      .article_card {
        flex: 1;
        min-width: 280px;
        max-width: 320px;
        overflow: hidden;
        transition: transform 0.3s ease;
        cursor: pointer;

        &:hover {
          transform: translateY(-5px);
        }

        picture {
          width: 100%;
          height: 200px;
          overflow: hidden;
          border-radius: var(--border-radius-2);

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;

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

        .article-content {
          padding: 0.5rem;

          h5 {
            font-size: 1.125rem;
            margin-bottom: 1rem;
            color: var(--white);
          }

          .excerp p {
            font-size: 0.875rem;
            color: var(--white);
            line-height: 1.6;
          }
        }
      }
    }

    /* Game Modal Styles */
    .featured-modal {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.8);
    }

    .featured-modal .modal-content {
      position: relative;
      background-color: #1a1a1a;
      margin: 2% auto;
      padding: 0;
      width: 80%;
      max-width: 900px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
      animation: modalFadeIn 0.4s;
      border-radius: 8px;
      overflow: hidden;
    }

    @keyframes modalFadeIn {
      from {
        opacity: 0;
        transform: translateY(-50px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .featured-modal .close {
      position: absolute;
      right: 15px;
      top: 15px;
      color: white;
      font-size: 28px;
      font-weight: bold;
      z-index: 10;
      cursor: pointer;
      background-color: rgba(0, 0, 0, 0.5);
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 50%;
    }

    .featured-modal .close:hover {
      background-color: rgba(255, 0, 0, 0.7);
    }

    .featured-modal .modal-header {
      width: 100%;
      position: relative;
      overflow: hidden;
    }

    .featured-modal .video-container {
      width: 100%;
      background-color: #000;
    }

    .featured-modal .video-container video,
    .featured-modal .video-container iframe {
      width: 100%;
      aspect-ratio: 16/9;
      display: block;
    }

    .featured-modal .modal-body {
      padding: 20px;
      color: #fff;
    }

    .featured-modal .info h2 {
      margin-top: 0;
      margin-bottom: 15px;
      font-size: 24px;
      color: #fff;
    }

    .featured-modal .featured-screenshots {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 15px;
      margin-top: 20px;
    }

    .featured-modal .screenshot img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 4px;
      cursor: pointer;
      transition: transform 0.3s ease;
    }

    .featured-modal .screenshot img:hover {
      transform: scale(1.03);
    }

    .featured-modal .modal-footer {
      margin-top: 20px;
      text-align: center;
    }

    .featured-modal .btn-view-details {
      background-color: #e50914;
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .featured-modal .btn-view-details:hover {
      background-color: #f40612;
    }

    .featured-modal .btn-secondary {
      background-color: #333;
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
      margin-left: 10px;
      transition: background-color 0.3s ease;
    }

    .featured-modal .btn-secondary:hover {
      background-color: #555;
    }

    .featured-modal .description {
      color: #ccc;
      line-height: 1.6;
      margin-bottom: 20px;
    }

    .featured-modal .description h3 {
      color: #fff;
      margin-top: 20px;
      margin-bottom: 10px;
      font-size: 18px;
    }

    .featured-modal .description ul {
      padding-left: 20px;
      margin-bottom: 15px;
    }

    .featured-modal .description li {
      margin-bottom: 5px;
    }

    .featured-modal .description p {
      margin-bottom: 15px;
    }

    .featured-modal .screenshots-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 10px;
      margin-top: 15px;
    }

    .featured-modal .featured-screenshots h3 {
      color: #fff;
      margin-bottom: 15px;
      font-size: 20px;
    }

    /* Lightbox Gallery Styles */
    .lightbox-overlay {
      display: none;
      position: fixed;
      z-index: 2000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.9);
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }

    .lightbox-content {
      position: relative;
      width: 80%;
      height: 80%;
      max-width: 1200px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
    }

    .lightbox-image {
      max-width: 100%;
      max-height: 85%;
      object-fit: contain;
      border-radius: 4px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }

    .lightbox-close {
      position: absolute;
      right: 20px;
      top: 20px;
      color: white;
      font-size: 35px;
      font-weight: bold;
      cursor: pointer;
      background-color: rgba(0, 0, 0, 0.5);
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 50%;
      z-index: 2010;
    }

    .lightbox-prev,
    .lightbox-next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      color: white;
      font-size: 30px;
      font-weight: bold;
      cursor: pointer;
      background-color: rgba(0, 0, 0, 0.5);
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 50%;
      user-select: none;
      z-index: 2010;
      transition: background-color 0.3s ease;
    }

    .lightbox-prev {
      left: 20px;
    }

    .lightbox-next {
      right: 20px;
    }

    .lightbox-prev:hover,
    .lightbox-next:hover,
    .lightbox-close:hover {
      background-color: rgba(255, 0, 0, 0.7);
    }

    .lightbox-counter {
      position: absolute;
      bottom: 20px;
      color: white;
      font-size: 16px;
      font-weight: bold;
      background-color: rgba(0, 0, 0, 0.5);
      padding: 5px 15px;
      border-radius: 15px;
    }

    /* Responsive styles */
    @media (max-width: 768px) {
      .featured-modal .modal-content {
        width: 95%;
        margin: 10% auto;
      }

      .featured-modal .featured-screenshots {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      }
    }

    /* Support pages  */

    .contact__info {
      display: flex;
      flex-direction: column;
      line-height: 1.3;

      h2,
      h3 {
        font-size: 1.25rem;
        margin-top: 1rem;
        margin-bottom: 0;
      }

      p,
      ul li {
        margin-bottom: 1rem;
        margin-top: .5rem;
      }

      a {
        color: var(--primary);
        margin-bottom: 1rem;
        font-weight: 600;
        font-size: 1rem;
      }

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

        &label {
          font-size: 0.75rem;
        }
      }
    }

    .title-section {
      padding-block: 2rem;
      background-size: cover;

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

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;

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

      p {
        font-size: 0.875rem;
        text-align: center;
      }

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

      label {
        display: flex;
        flex-direction: column;
      }

      input,
      textarea {
        padding: 0.75rem 1rem;
        border: none;
        border-radius: var(--border-radius-2);
        background: var(--light-gray);
        font-size: 1rem;
        color: var(--black);
        font-family: 'Inter', sans-serif;
      }

      .btn {
        width: 100%;
      }
    }

    /* Single Items  */
    .single-item,
    .single-movie {
      h1 {
        font-size: 30px;
        line-height: 1.3;
        font-weight: 600;
        margin-bottom: 10px;
        text-align: left;
        text-wrap: inherit;

        @media screen and (max-width: 767px) {
          font-size: 24px;
          text-align: center;
        }
      }

      h2 {
        font-size: 19px;
        line-height: 20px;
        font-weight: 700;
        margin-bottom: 20px;
        text-transform: uppercase;
      }

      .img-radial {
        width: 100%;
        max-width: 150px;
        height: 100%;
        max-height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        border-radius: var(--border-radius-2);
        overflow: hidden;

        @media screen and (max-width: 767px) {
          max-width: 240px;
          max-height: 240px;
          margin: 0 auto;
        }

        &.large {
          max-width: 100%;

          @media screen and (max-width: 767px) {
            max-height: 200px;
          }
        }

        img {
          width: auto;
          min-height: 150px;
          min-width: 100%;
          border-radius: var(--border-radius-2);
          object-fit: cover;
          filter: brightness(0.7) grayscale(0.5);

          @media screen and (max-width: 767px) {
            min-height: 240px;
          }
        }
      }

      video {
        max-height: 450px;
        max-width: 100%;
        border-radius: var(--border-radius-2);
        overflow: hidden;
      }

      .single-item-info {
        width: 100%;
        padding: 0;

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

        p,
        ul li,
        ol li {
          line-height: 24px;
          margin: 0 0 20px !important;
          background: none !important;
          font-size: 16px !important;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          background: none !important;
          margin-bottom: .5rem !important;
        }

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

        table {
          width: 100% !important;
          font-size: 15px;
          margin: 20px 0;

          @media screen and (max-width: 767px) {
            display: block;
            /* allows overflow */
            overflow-x: auto;
            /* enable horizontal scroll */
            white-space: nowrap;
            /* prevent cells from breaking */
            width: 100%;
            /* make it responsive */
            -webkit-overflow-scrolling: touch;
            /* smooth scroll on iOS */
          }

          tr {
            td {
              padding: 0.5rem 1rem;
              text-align: left !important;
            }
          }
        }
      }

      .btn {
        @media screen and (max-width: 767px) {
          margin: 0 auto;
        }
      }
    }

    .blog,
    article {

      .single-item,
      .single-movie {
        .img-radial {
          max-width: 100%;
          min-height: 300px;

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

    .single-movie .single-item-info {
      width: 100%;
    }

    .unsub-container {
      border: 2px solid var(--primary);
      padding: 2rem 1.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      gap: 1.5rem;
      border-radius: var(--border-radius-2);
      margin: 0 auto;
      max-width: 960px;

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

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

        .form-group {
          padding: 0;
        }

        input {
          padding: 0.75rem 1rem;
          border: 1px solid var(--gray);
          border-radius: var(--border-radius-2);
          width: 100%;
          background: var(--light-gray);
          color: var(--black);
        }

        .btn {
          width: 100%;
        }
      }

      #errorMsg {
        color: var(--gray);
        font-size: 0.875rem;
      }
    }

    .h-captcha {
      overflow: auto;
      max-width: 100%;
    }

    /* Alert styles */
    .alert {
      padding: 1rem;
      margin-bottom: 1rem;
      border: 1px solid transparent;
      border-radius: 0.375rem;
    }

    .alert-success {
      color: #155724;
      background-color: #d4edda;
      border-color: #c3e6cb;
    }

    .alert-error {
      color: #721c24;
      background-color: #f8d7da;
      border-color: #f5c6cb;
    }

    .alert p {
      margin: 0;
    }

    /* Support page */

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

      h3 {
        color: var(--primary);
        font-family: 'Inter', sans-serif;
        font-size: 1.25rem;
        font-weight: 500;
        margin: 0;

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

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

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

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

      .text-large {
        color: var(--dark-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-video {
        width: 100%;
        height: 100%;
        border-radius: 25px;
      }

      .support-container {
        background: var(--light-gray);
        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: 960px;

          img {
            left: auto;
            right: 0;
            top: -20px;
          }

          a {
            font-size: 1.5rem;
            line-height: normal;
            text-decoration: none;
          }
        }

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

        >img {
          position: absolute;
          left: 0;
          top: -40px;
          height: 100%;
          width: auto;
          z-index: 0;
          object-fit: contain;
          object-position: top;
          max-width: 280px;
          filter: grayscale(0.75) brightness(1.5);

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

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

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

        @supports (-webkit-touch-callout: none) {
          @media screen and (max-device-width: 767px) and (-webkit-min-device-pixel-ratio: 2) {
            .support-number {
              color: var(--white) !important;
              text-decoration: none !important;

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

        .support-text {
          display: block;
          font-size: 0.9rem;
        }
      }

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

        .form-group {
          width: 100%;
          margin: 0;
        }
      }

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

        .accordion-item {
          background: transparent;
          border: none;
          border-bottom: 1px solid var(--gray);
          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(--gray);

            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 */
            }
          }
        }
      }
    }

    /* Footer  */

    .backToTopBtn {
      bottom: 20px;
      right: 20px;
      z-index: 1000;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: rgb(20, 20, 20);
      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;
      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.25s;
    }

    .site_footer {
      padding-block: 3.125rem;

      a {
        color: var(--white);
        text-decoration: none;
        font-weight: 500;
        transition: color 0.25s ease-out;

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

      p {
        font-size: 15px;
        line-height: 18px;
        text-align: center;
        margin-bottom: 1rem;
      }

      .logos img {
        width: 40px;
        height: 40px;
        object-fit: contain;
      }

      @media screen and (max-width: 767px) {
        .footer_link ul {
          flex-direction: column;
          gap: 0.8rem !important;
        }

        .copyrights {
          font-size: 0.875rem;
        }
      }

      .logo_footer {
        max-width: 90px;
        height: auto;
      }

      .disclaimer {
        font-size: 15px;
        line-height: 1.4;
      }
    }

    /* Modals  */
    .otp-modal,
    .login-modal,
    .unsub-modal,
    .sign-up-modal {
      position: fixed;
      inset: 0;
      background: rgba(255, 255, 255, 0.95);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      overflow-y: auto;
      padding: 2rem;

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

      .close {
        position: absolute;
        right: 1.25rem;
        top: 1.25rem;
        font-size: 2rem;
        cursor: pointer;
        color: var(--primary);
        line-height: 20px;

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

      form {
        width: 100%;

        .checkbox-group {
          label {
            font-size: 0.875rem;
            display: inline;
          }

          input[type="checkbox"] {
            accent-color: var(--primary);
            min-height: auto !important;
          }
        }

        .checkbox-group {
          &:first-of-type {
            margin-top: 10px;
          }

          label {
            display: inline;
            font-size: 0.875rem;
          }
        }

        input {
          padding: 0.5rem;
          border: 1px solid var(--gray);
          border-radius: var(--border-radius-2);
        }

        .btn {
          width: 100%;
          margin-top: 1rem;
          padding: 0.75rem;
        }

        .form-group {
          display: flex;
          flex-direction: column;
          gap: 1rem;
          padding: 3rem !important;

          p {
            font-size: 0.875rem;
            text-align: center;

            &:empty {
              display: none;
            }
          }

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

          @media screen and (max-width: 767px) {
            margin-top: 0;
            padding: 2rem 1rem !important;
            max-width: 100%;

            &label {
              font-size: 0.75rem;
            }
          }
        }
      }

      h2 {
        @media screen and (max-width: 767px) {
          font-size: 1.5rem;
          text-align: center;
          margin: 10px auto;
        }
      }

      .modal-content {
        background: var(--white);
        border-radius: var(--border-radius-2);
        border: 2px solid var(--primary);
        width: 100%;
        overflow: auto;
        max-inline-size: 600px;
        position: relative;

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

        .form-group input {
          background: var(--light-gray);
          border: 2px solid var(--gray) !important;
          border: none;
          padding: 0.5rem 1rem;
          min-height: 50px;
          color: var(--black);

          &:focus-visible {
            outline: none;
            border: 2px solid var(--primary) !important;
          }

          &::placeholder {
            color: var(--dark-gray);
          }
        }
      }

      .modal-bck {
        background: url(../images/modal-image.jpg) center no-repeat;
        background-size: cover;
        height: 100%;
        width: 100%;

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

    /* Payment modal  */

    .modal {
      display: none;
      position: fixed;
      z-index: 9999;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(255, 255, 255, 0.9);
      align-items: center;
      justify-content: center;
      padding: 30px 0;
    }

    /* Payment Modal Styles */

    #paymentModal .modal-content {
      background: var(--white);
      border-radius: var(--border-radius-2);
      border: 2px solid var(--primary);
      padding: var(--border-radius-2);
      max-width: 480px;
      width: 90%;
      margin: 20px auto;
      display: flex;
      flex-direction: column;
      height: auto;
      position: relative;

      @media screen and (max-width: 479px) {
        padding: 20px;
        height: 90%;
        overflow-y: scroll;
      }

      h2 {
        font-size: 18px;
        margin-bottom: 20px;
        text-align: center;
      }

      .form-group {
        margin-bottom: 20px;
        gap: 8px;

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

      label {
        display: block;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: 500;
        color: var(--dark-gray);
      }

      input {
        width: 100%;
        padding: 8px 15px;
        font-size: 16px;
        transition: border-color 0.3s ease;
        color: var(--black);

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

      .d-flex {
        display: flex;
        gap: 15px;

        .form-group {
          flex: 1;
        }
      }

      button[type="submit"] {
        width: 100%;
        padding: 14px;
        background: var(--primary);
        border: none;
        border-radius: 30px;
        color: white;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-top: 10px;

        &:hover {
          background: var(--primary);
          transform: translateY(-1px);
          box-shadow: 0 5px 15px rgba(26, 47, 163, 0.2);
        }
      }

      .close {
        position: absolute;
        right: 20px;
        top: 5px;
        font-size: 2rem;
        color: var(--primary);
        cursor: pointer;
        transition: color 0.3s ease;

        @media screen and (max-width: 479px) {
          right: 10px;
          top: 10px;
        }

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

    /* Input placeholder styling */
    input::placeholder {
      color: var(--dark-gray);
    }

    /* Error state */
    input.error {
      border-color: #dc3545;
    }

    /* Success state */
    input.success {
      border-color: #28a745;
    }

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

    /* Webkit (Chrome, Safari, newer versions of Opera) */
    audio::-webkit-media-controls-panel {
      background-color: var(--light-gray);
      border-radius: var(--border-radius-3);
    }

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

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

    audio::-webkit-media-controls-timeline {
      background-color: var(--gray);
      border-radius: 25px;
      margin: 0 10px;
    }

    audio::-webkit-media-controls-timeline:hover {
      background-color: var(--gray);
    }

    audio::-webkit-media-controls-volume-slider {
      background-color: var(--gray);
      border-radius: 25px;
      padding: 0px;
      height: 6px;
      margin-top: auto;
      margin-bottom: auto;
    }

    audio::-webkit-media-controls-volume-slider:hover {
      background-color: var(--primary);
    }

    /* Audio player container - for additional styling */
    .audio-player-container {
      background: linear-gradient(135deg, #f5f5f5 0%, var(--light-primary) 40 100%);
      background: #eeeeee;
      padding: 1.25rem;
      border-radius: var(--border-radius-2);
      box-shadow: 0px 0px 1rem rgba(221, 162, 222, 0.4);
      margin: 1rem 0;
      width: 100%;
    }

    /* Table  */

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

      td {
        padding: 10px 5px;
      }
    }

    .blog table tr:first-child th,
    .blog table tr:first-child td {
      background: var(--primary);
      color: var(--white);
    }

    /* Legals Pages  */

    .legals {
      font-size: 16px;
      line-height: 1.4;

      h2 {
        font-size: 2rem;
        margin-top: 2rem;
        margin-bottom: 1rem;
      }

      h3 {
        font-size: 1.5rem;
        margin-top: 2rem;
        margin-bottom: 1rem;
      }

      h4 {
        font-size: 1.25rem;
        margin-top: 1.5rem;
        margin-bottom: 0.5rem;
      }

      p {
        font-size: 1rem;
        margin-bottom: 1rem;
      }

      ul {
        list-style: disc;
        padding-left: 20px;

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

  @layer pages {
    .page {
      p {
        margin: 15px 0;
      }

      h1,
      h2 {
        margin-top: 30px;
      }

      .info-frame {
        background: var(--secondary);
        background-size: cover;
        padding: 30px;
        border-radius: var(--border-radius-2);
        gap: 10px;

        h2 {
          color: var(--white);
          margin: 0;
        }

        p {
          margin: 0;
        }

        .text-xl {
          font-size: 1.5rem;
          font-weight: 700;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;

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

      ul,
      ol {
        li {
          margin: 15px;
        }
      }
    }

    .btn.primary {
      padding: 12px 40px;
      font-size: 1.25rem;
      text-transform: uppercase;
      letter-spacing: 0.2px;
      transition: 0.25s ease-out;

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

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

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

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

    .background-light {
      background-color: var(--light-gray);
    }

    .intro-text {
      max-width: 640px;
      margin: 0 auto;
      font-size: 1.8em;
      line-height: normal;
    }

    .d-none,
    .hidden {
      display: none !important;
    }

    .d-flex {
      display: flex;

      .flex-1 {
        flex: 1;
      }
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .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-50 {
      gap: 50px;
    }

    .gap-100 {
      gap: 100px;

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

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

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