/* Import Fonts */

@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap");

/* Source Sans 3  and Inter */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* CSS Reset - Always Include */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*  
======================== 
MARK: == Variables
======================== 
*/
:root {
  /* Custom Variables */
  /* Colors */
  --mainColor: #211a2b; /* main orange color */
  --mainColorDarker: #ffae17; /* main orange darker color */
  --supplementColorOne: #d194ff; /* purple */
  --supplementColorOneDarker: #4d0057; /* purple darker */
  --supplementColorTwo: #ffffff; /* white */
  --supplementColorThree: #5d5d5d; /* light grey */
  --supplementColorFour: #f1f1f1ee; /* lighter grey */
  --supplementColorFive: #171616; /* black-50 */
  --supplementColorSix: #fffae8; /* light yellow */
  --headingColor: #ffffff; /* headingColor */
  --footerPrimary: #ffffff; /* footerPrimary */
  --footerSecondary: #f9f9f9; /*footerSecondary */
  --headerPrimary: #ffffff; /* headerPrimary */
  --textPrimary: #5d5d5d; /* textPrimary */
  --textSecondary: #ffffff; /* textSecondary */
  --pricepointBG: #ffae17; /* Pricepoint background */
  --footerBG: #291c2c; /* footerBG */
  --headerBG: #ffffff; /* headerBG */
  --lightGrey: #ffffff; /* Footer Links Secondary */
  --errorColor: #d24545; /* Error Message Color */
  --successColor: #45d24c; /* Error Message Color */
  --errorColorMessage: #d24545; /* Error Message Color */

  /* Fonts */
  --fontHeading: "Baloo 2", sans-serif;
  --fontHeadingAlt: "Baloo 2", sans-serif;
  --fontText: "Baloo 2", sans-serif;
  --fontTextAlt: "Baloo 2", sans-serif;

  /* Sizing */
  --sizeTextSmall: 12px; /* 12px */
  --sizeTextRegular: 14px; /* 14px */
  --sizeTextLarge: 16px; /* 16px */
  --sizeTextXLarge: 18px; /* 18px */
  --sizeHeading1: 45px; /* 45px */
  --sizeHeading2: 36px; /* 36px */
  --sizeHeading3: 30px; /* 30px */
  --sizeHeading4: 25px; /* 25px */
  --sizeHeading5: 23px; /* 23px */
  --sizeHeading6: 20px; /* 20px */

  /* Other */
  /* weight */
  --fontExtraLight: 200; /* Extra Light */
  --fontLight: 300; /* Light */
  --fontRegular: 400; /* Regular */
  --fontMedium: 500; /* Medium */
  --fontSemiBold: 600; /* Semi Bold */
  --fontBold: 700; /* Bold */
  --fontExtraBold: 800; /* Extra Bold */
  --fontBlack: 900; /* Black */

  /* lineheight */
  --lineheight-auto: auto;
  --lineheight-0: 0;
  --lineheight-125: 125%;
}

/*  
======================== 
MARK: == General 
======================== 
*/

html {
  font-family: sans-serif;
  scroll-behavior: smooth;
  /* scroll-padding-top: 5rem; */
}

body {
  background-color: var(--mainColor);
}

/* Prevent scrolling when .no-scroll is applied to body */
body.no-scroll {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
p {
  font-family: var(--fontHeading);
  color: var(--textSecondary);
}

p {
  font-size: var(--sizeTextRegular);
  line-height: var(--lineheight-125);
  font-weight: var(--fontRegular);
}

img {
  max-width: 10rem;
}

ul {
  list-style: none;
}

a {
  color: #0dbbe0;
  /* text-decoration: none; */
  font-family: var(--fontText);
}

.to-uppercase {
  text-transform: uppercase;
}
.to-lowercase {
  text-transform: lowercase;
}

/* MARK: Animation */

@keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-20px);
  }
  100% {
    transform: translatey(0px);
  }
}

@keyframes scrollCarousel {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-40% + 12rem));
  }
}

@keyframes scroll {
  0%,
  15% {
    transform: translateX(0);
  }
  20%,
  35% {
    transform: translateX(calc(-100% - 4rem));
  }
  40%,
  55% {
    transform: translateX(calc(-200% - 8rem));
  }
  60%,
  75% {
    transform: translateX(calc(-300% - 12rem));
  }
  80%,
  100% {
    transform: translateX(0);
  }
}

/* Arabic Text Styling */
body.ar h1,
body.ar h2,
body.ar h3,
body.ar h4,
body.ar p,
body.ar a {
  direction: rtl !important;
  text-align: right !important;
}

body.ar button:not(.to-top),
body.ar label,
body.ar select,
body.ar li,
body.ar input:not([type="submit"]),
body.ar textarea {
  text-align: right !important;
}

body.ar .scroll-indicator {
  text-align: left !important;
  direction: ltr !important;
}

body.ar .hero-text__wrapper {
  justify-content: center !important;

  h1 {
    text-align: center !important;
  }
}

body.ar .breadcrumb {
  justify-content: flex-end !important;
}

body.ar .breadcrumb a::before {
  content: "";
  display: inline-block;
  background-image: url("../assets/img/icons/breadcrumb-arrow.svg");
  background-size: contain;
  width: 0.6rem;
  height: 0.6rem;
  margin: 0 0 0 0.5rem;
  transform: rotate(180deg);
}

body.ar .headings {
  align-items: flex-end !important;
  border-left: none;

  .heading {
    margin: 0 0.5rem 0 0 !important;
  }
}

body.ar button:not(.to-top) {
  text-align: right !important;
  direction: rtl !important;

  &::before {
    float: left !important;
  }
}

body.ar .cta-join__text {
  text-align: right;
  direction: rtl;
}

body.ar .contact .contact__details {
  justify-content: flex-end;
}

body.ar .top-content {
  &::before {
    left: 0 !important;
  }

  .container {
    .buttons-list {
      justify-content: flex-end;
    }
  }
}

body.ar .reviews {
  .container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
}

body.ar .footer__content {
  grid-template-columns: max-content 1fr;

  .footer-links {
    grid-column: 2;
  }
  .footer-img {
    grid-column: 1;
  }
}

.terms.ar,
.privacy.ar {
  .table-of-content {
    ul {
      border-right: 1px solid #fff;
    }
  }
}

/* ====== */

/*  
======================== 
MARK: == Header 
======================== 
*/

.index-country .header-container .menu-btn__stripe {
  background-color: #000 !important;
}

.index-country .header-container.scrolled {
  background-color: var(--headerBG);
  color: var(--textPrimary);
}

.index-country .nav-list a,
.index-country .country-selection__btn {
  color: var(--textPrimary);
}

header {
  width: 100%;
  position: fixed;
  z-index: 999;

  .pricepoint {
    background-color: var(--pricepointBG);
    padding: 0.5rem 1.5rem;
    font-family: var(--fontHeading);
    font-size: var(--sizeTextRegular);
    font-weight: var(--fontMedium);
    color: white;
    display: flex;
    justify-content: center;
    gap: 10px;

    span {
      text-align: right;
    }
  }

  .header-container {
    width: 100%;
    padding: 0.8rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    background-color: var(
      --headerBG
    ); /* comment out if header transparent at start */
    transition: background-color 0.2s ease-in-out;

    img {
      margin: 0 0 0 1.3rem;
      grid-column: 1;
      justify-self: center;
    }

    .menu-btn {
      grid-column: 4 / span 2;
      justify-self: right;
      margin: 0 2rem 0 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 0px;
      width: 30px;
      height: 30px;
      float: right;
      cursor: pointer;
      transition: all 200ms ease;
      border: 2px solid var(--supplementColorOne);
      border-radius: 50%;

      .menu-btn__stripe {
        width: 70%;
        height: 2px;
        border-radius: 2rem;
        background-color: var(--supplementColorOne);
        position: relative;
        transition: background-color 0.2s ease-in-out;
        margin: 1px auto;
      }
    }

    .menu-btn.active {
      .menu-btn__stripe {
        z-index: 9999;

        &:nth-child(1) {
          transform: rotate(45deg);
          background-color: var(--supplementColorThree);
        }

        &:nth-child(2) {
          display: none;
        }

        &:nth-child(3) {
          transform: rotate(-45deg);
          top: -0.2rem;
          background-color: var(--supplementColorThree);
        }
      }
    }

    /* For when the nav-container is active */
    .nav-container.active .country-selection__btn {
      color: var(--textPrimary) !important;
    }

    .nav-container {
      width: 100vw;
      height: 100vh;
      position: absolute;
      z-index: 8888;
      top: 0;
      display: none;
      flex-direction: column-reverse;
      justify-content: center;
      background-color: var(--supplementColorTwo);
      color: #000;
      gap: 3rem;

      .nav-list {
        order: 1;
        font-family: var(--fontHeadingAlt);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        width: 100%;

        .nav-list__item {
          font-size: var(--sizeTextLarge);
          font-weight: var(--fontMedium);
          text-align: center;
          /* width: 100%; */
          padding-bottom: 1rem;
          border-bottom: 1px solid var(--mainColor);

          &:last-of-type {
            border: none;
          }
        }

        a {
          font-size: var(--sizeTextLarge);
          color: black;
          text-decoration: none;

          &:hover {
            text-decoration: underline;
            text-underline-offset: 4px;
            text-decoration-color: var(--textPrimary);
          }
        }
      }

      .country-selection,
      .lang-selection {
        order: 1;
        display: flex; /* activate when multiple languages */
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        position: relative;
        /* bottom: 9rem;
                margin: 0 2.5rem 0 0; */
      }

      .country-selection {
        align-items: center;
        /* cursor: pointer; */

        .country-selection__btn {
          background-color: var(--headingColor);
          color: var(--textPrimary);
          font-size: var(--sizeTextRegular);
          font-weight: var(--fontBold);
          align-self: flex-end;
          display: flex;
          align-items: center;
          position: relative;
          cursor: pointer;
          border-radius: 50px;
          border-width: initial;
          border-style: none;
          border-color: initial;
          border-image: initial;
          padding: 8px 20px;
          margin: 0 auto;
          box-shadow: rgba(100, 100, 111, 0.2) 0px;
          border: 2px solid var(--supplementColorOne);

          &::before {
            content: url("../assets/img/icons/language-icon.svg");
            position: relative;
            object-fit: cover;
            left: -0.5rem;
            top: 0rem;
          }

          &::after {
            content: "⯆";
            position: relative;
            object-fit: cover;
            left: 0.5rem;
            top: -0.1rem;
          }
        }

        .country-selection__wrapper {
          display: none;
          color: var(--headingColor);

          h2 {
            font-size: var(--sizeHeading2);
          }

          h3 {
            font-size: var(--sizeHeading4);
            color: var(--textPrimary);
          }

          a {
            color: var(--textPrimary);
            font-size: var(--sizeHeading6);
            text-decoration: none !important;

            &::hover {
              text-decoration: underline;
              text-underline-offset: 4px;
            }
          }

          .country-selection__list li {
            margin: 1rem 0;
            display: flex;
            align-items: center;

            &::before {
              content: "";
              width: 1.5rem;
              height: 1.2rem;
              background-image: url("../assets/img/flags/belgium.svg");
              background-repeat: no-repeat;
              background-size: cover;
              background-position: center;
              margin: 0 0.5rem 0 0;
              border-radius: 4px;
            }

            &.country-selection__heading {
              align-self: flex-start;

              &::before {
                display: none;
                background-color: initial;
              }
            }
          }

          /* 
                        MARK:: == Country Flags 
                     */
          .country-selection__list li {
            /* Country 1 */
            &.country-selection__item:nth-of-type(2)::before {
              background-image: url("../assets/img/flags/switzerland.svg");
            }
            /* Country 2 */
            &.country-selection__item:nth-of-type(3)::before {
              background-image: url("../assets/img/flags/greece.svg");
            }
            /* Country 3 */
            &.country-selection__item:nth-of-type(4)::before {
              background-image: url("../assets/img/flags/mexico.svg");
            }
            &.country-selection__item:nth-of-type(5)::before {
              background-image: url("../assets/img/flags/netherlands.svg");
            }
            &.country-selection__item:nth-of-type(6)::before {
              background-image: url("../assets/img/flags/portugal.svg");
            }
            &.country-selection__item:nth-of-type(7)::before {
              background-image: url("../assets/img/flags/slovenia.svg");
            }
            &.country-selection__item:nth-of-type(8)::before {
              background-image: url("../assets/img/flags/thailand.svg");
            }
          }
        }

        .country-selection__wrapper.active {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          margin: 0;
          gap: 3rem;
          background-color: var(--supplementColorTwo);
          width: 100%;
          position: absolute;
          top: 100%;
          justify-content: center;
        }
      }

      .lang-selection {
        a {
          color: #000;
          text-decoration: none;

          &.active {
            color: #000;
            text-decoration: underline;
            text-underline-offset: 4px;
            font-weight: var(--fontBold);
          }

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

      &.active {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8rem 2rem;

        .country-selection {
          order: 2;
          position: relative;
        }
      }
    }

    &.scrolled {
      .nav-container {
        .nav-list {
          a {
            &:hover {
              text-decoration: underline;
              text-underline-offset: 4px;
            }
          }
        }

        /* .country-selection__btn {
                    background-color: transparent;
                    color: var(--supplementColorTwo);
                } */
      }
    }
  }
}

.privacy header,
.terms header {
  .header-container {
    background-color: var(--supplementColorTwo);

    .menu-btn {
      .menu-btn__stripe {
        background-color: var(--supplementColorFive);
      }
    }

    .nav-container {
      .nav-list {
        a {
          &:hover {
            text-decoration-color: var(--supplementColorOne);
          }
        }
      }

      .lang-selection {
        a {
          color: #000;

          &.active {
            font-weight: var(--fontBold);
            color: #000;

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

/* .lang-selection {
    display: none;
} */

/* ====== */

/*  
======================== 
MARK: == Main 
======================== 
*/

/* ====== */
/* === Headings & General === */
/* ====== */

.explore h2,
.explore p,
.top-content h2,
.top-content p,
.features h2,
.features p,
.cta-join h2,
.cta-join p,
.reviews h2,
.reviews p,
.faq h2,
.faq p,
.contact h2,
.contact p {
  margin: 0 2rem;
}

.heading {
  color: var(--textSecondary);
  font-size: var(--sizeHeading4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.3rem;

  /* &::before,
    &::after {
        content: "";
        display: inline-block;
        top: 0;
        width: 2.5rem;
        height: 2px;
        background-color: var(--supplementColorOne);
        border-radius: 2px;
    } */
}

/* ====== */
/* === Hero === */
/* ====== */

.hero-container {
  height: 100vh; /* Full viewport height */
  position: relative;
  background-image: url("../assets/img/shoopadoo-heroBG-desktop.webp"); /* Background image */
  background-size: cover; /* Ensures the image scales with the container */
  background-position: center; /* Centers the image */
  background-repeat: no-repeat;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center; /* Horizontally centers the elements */
  gap: 1.5rem; /* Space between elements */
  padding: 4.5rem 1.5rem;

  h1 {
    font-family: var(--fontHeading);
    color: var(--headerPrimary);
    font-weight: var(--fontBold);
    line-height: var(--lineheight-125);
    font-size: var(--sizeHeading3);
    text-align: center;
  }

  .cta {
    background-color: var(--supplementColorTwo);
    width: 100%;
    max-width: 33rem;
    min-height: 8rem;
    padding: 2.5rem 2rem;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center the content inside cta */
    gap: 1rem; /* Gap between the elements inside the CTA */

    .cta__text {
      color: var(--textPrimary);

      &:first-child {
        font-size: var(--sizeTextLarge);
        font-weight: var(--fontBold);
      }

      &:nth-child(2) {
        font-size: var(--sizeTextRegular);
      }
    }

    #cta__text--highlight {
      display: none;
      color: var(--errorColorMessage);
    }

    select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      list-style: none;
      width: 100%;
      border: 2px solid var(--mainColor);
      border-radius: 0.5rem;
      padding: 0.7rem 1rem;
      font-size: var(--sizeTextRegular);
      color: var(--textPrimary);
      text-align-last: left;
      background-color: var(--supplementColorTwo);
      background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="%235D5D5D" width="16" height="16"><path d="M8 11.5L3 6.5h10L8 11.5z"/></svg>');
      background-repeat: no-repeat;
      background-position: calc(100% - 1rem) center; /* Position the arrow on the right */

      &.active {
        background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="%235D5D5D" width="16" height="16"><path d="M8 4.5L3 9.5h10L8 4.5z"/></svg>');
      }

      .cta__list-item {
        color: var(--textPrimary);
        font-family: var(--fontText);
        font-size: var(--sizeTextLarge);
        padding: 0;
        margin: 0;

        option::hover {
          color: var(--mainColor);
        }
      }

      &::before {
        content: "";
        display: inline-block;
        width: 1rem;
        height: 1rem;
        background-color: #000;
      }
    }

    button {
      cursor: pointer;
      background-color: var(--mainColor);
      color: var(--supplementColorTwo);
      border-radius: 0.5rem;
      border: none;
      width: 90%;
      padding: 1rem;
      /* position: absolute;
            left: 0;
            bottom: 0; */
      font-weight: var(--fontSemiBold);
      font-size: var(--sizeTextRegular);

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

  .pricepoint {
    margin: 0;
    font-size: var(--sizeTextXLarge);
    font-weight: var(--fontMedium);
    color: var(--supplementColorTwo);
    text-align: center; /* Center the pricepoint text */

    span {
      font-size: var(--sizeTextRegular);
      font-weight: var(--fontLight);
    }
  }

  .scroll-indicator {
    color: var(--textPrimary);
    transform: rotate(90deg) translate(0rem, 3.3rem);
    width: fit-content;
    font-size: var(--sizeTextSmall);

    &::after {
      content: "";
      position: relative;
      display: inline-block;
      margin: 0 0 0 0.5rem;
      top: -2px;
      right: 0;
      width: 2.5rem;
      height: 1px;
      background-color: var(--textPrimary);
      border-radius: 2px;
    }
  }
}

.index-country .hero-container {
  padding: 4rem 1.5rem 2rem 1.5rem;

  .hero-text__wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5rem 0;
    padding: 4rem 1.5rem 2rem 1.5rem;

    h1 {
      margin: 0;
      font-size: 2em;
      order: 2;
      max-width: initial;
    }

    .cta {
      order: 3;
      min-height: initial;
      width: 100%;
    }

    .pricepoint {
      order: 4;
      text-align: center;
    }

    img {
      order: 1;
      max-width: 70vw;
    }
  }

  .cta {
    background-color: transparent;
    padding: 0;

    a.cta__text {
      background-color: var(--mainColor);
      text-decoration: none;
      color: var(--headerPrimary);
      width: 100%;
      text-align: center !important;
      margin: 0 0 0.5rem 0;
      padding: 1rem;
      font-size: var(--sizeHeading6);
      font-weight: var(--fontSemiBold);

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

    p.cta__text {
      font-weight: normal;
      font-size: small;
      color: var(--headerPrimary);

      a {
        text-decoration: underline;
        margin: 0 0 0 0;
        color: var(--headerPrimary);

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

.to-top {
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: 50%;
  background-color: var(--mainColor);
  position: fixed;
  bottom: 1.3rem;
  right: 1.3rem;
  z-index: 88;

  svg path {
    stroke: var(--headerPrimary);
  }
}

.to-top:hover {
  background-color: var(--mainColorDarker);
  cursor: pointer;
}

/* ====== */
/* === Explore === */
/* ====== */

/* ====== Explore Section ====== */
.explore-container {
  position: relative;
  display: flex;
  margin-bottom: 5rem;
  flex-direction: column;
  scroll-margin-top: 10rem;
}

/* Explore Text Content */
.explore-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2rem;
  max-width: 100%;
  text-align: left;

  .explore-content__heading {
    color: white;
    font-size: var(--sizeHeading1);
    margin-bottom: 1.5rem;
  }

  .explore-content__description {
    color: white;
    font-size: var(--sizeTextLarge);
    line-height: var(--lineheight-125);
    max-width: 30rem;
  }
}

/* Explore Image */
.explore-image__container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 1rem 0;

  .explore-image__img {
    width: auto;
    max-width: 100%;
    height: auto;
    /* max-height: 390px; */
    position: relative;
  }
}

.explore-img__container {
  width: 100%;
  display: flex;
  justify-content: center;

  .explore__img {
    margin: 3rem 0 5rem;
    width: 75vw;
    max-width: 20rem;
  }
}

.top-content {
  margin: 10rem 0 0;
  overflow: hidden;

  .top-content__heading {
    text-align: center;
    font-size: var(--sizeHeading2);
    margin-bottom: 2rem;
  }

  /* === Carousel === */

  .carousel,
  .carousel__item {
    display: flex;
  }

  .carousel {
    /* background-color: #0DBBE0; */
    margin: 2rem 0 4rem 0;
    animation: scrollCarousel 60s linear infinite;

    .carousel__item {
      flex-direction: column-reverse;
      flex: 0 0 50vw;
      height: auto;
      border-radius: 20px;
      color: #fff;
      justify-content: flex-end;
      align-items: center;

      &:first-of-type {
        margin-left: 1rem;
      }
      &:last-of-type {
        margin-right: 1rem;
      }

      h3 {
        font-size: var(--sizeTextLarge);
        font-weight: var(--fontBold);
        line-height: var(--lineheight-125);
        margin: 0.75rem 0.75rem 0;
        text-align: center;
      }
    }
  }
}

/* ====== */
/* === Features === */
/* ====== */

.features {
  padding: 1rem 1rem 4rem;
  scroll-margin-top: 10rem;
  background: #d9a7ff;
  .features-list,
  .features-list__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .features__heading {
    margin: 4rem 0 3rem 0;
    font-size: var(--sizeHeading2);
  }

  .features-list {
    gap: 2rem;

    .features-list__item h3 {
      order: 2;
      font-size: var(--sizeHeading6);
      width: 75%;
      text-align: center !important;
    }
    .features-list__item p {
      order: 3;
      text-align: center !important;
      font-size: var(--sizeTextRegular);
      max-width: 16.5rem;
    }
    .features-list__item img {
      order: 1;
      margin: 0 0 1.5rem 0;
    }
  }
}

/* ====== */
/* === Join Now === */
/* ====== */

.cta-join {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url("../assets/img/Mobile_JoinNow.webp");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 50% 65%;
  padding: 5rem 0;

  ::before {
    content: "";
    position: absolute;
    top: -39px;
    left: 40px;
    width: 90px;
    height: 90px;
    animation: float 5s infinite linear;
    background-image: url(../assets/img/jellyfish-3.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
  }

  .cta-join__text {
    max-width: 24rem;
    text-align: center !important;
    font-size: var(--sizeTextRegular);
    color: white;
  }

  .cta-join__heading {
    font-size: var(--sizeHeading2);
    color: white;
    text-align: center;
    /* margin-bottom: 0; */
  }

  .cta-join__links {
    display: flex;
    flex-direction: column;

    .cta-join__btn--secondary {
      color: var(--headingColor);
      text-decoration: underline;
      text-underline-offset: 2px;

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

  .cta-join_linktexts {
    color: var(--supplementColorTwo);

    a {
      text-decoration: underline 1px var(--supplementColorTwo);
      color: var(--supplementColorTwo);
    }
  }

  .cta-join__btn--primary {
    text-align: center;
    text-decoration: none;
    padding: 0.75rem 3rem;
    background-color: var(--mainColor);
    color: var(--headerPrimary);
    font-weight: var(--fontBold);
    border-radius: 2.5rem;
    margin: 2.5rem auto 1rem;

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

  .asset-desktop.fifa {
    display: none;
  }
}
/* ====== */

/* ====== */
/* === FAQ === */
/* ====== */

.faq {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5rem 6% 1rem;
  background-color: #d9a7ff;
  scroll-margin-top: 10rem;
  .faq__text {
    max-width: 30rem;
    margin: 1rem 0 0 0;
    color: white;
    text-align: center !important;
  }

  .faq__heading {
    color: white;
    font-size: var(--sizeHeading2);
    text-align: center;
  }

  .questions__container {
    margin: 2rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    justify-items: start;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    max-width: 50rem;

    .questions {
      width: 100%;

      /* buttons */
      .accordion {
        cursor: pointer;
        width: 100%;
        padding: 2rem 1rem;
        background-color: white;
        color: #d9a7ff;
        border: 1px solid white;
        border-radius: 4px;
        font-family: var(--fontText);
        /* font-weight: var(--fontBold); */
        text-align: left;

        &:hover {
          background-color: #d9a7ff;
          color: white;
        }

        &.open {
          background-color: #d9a7ff;
          color: white;
        }

        &::before {
          content: "+";
          color: var(--headerPrimary);
          float: right;
          font-size: var(--sizeTextLarge);
          margin: 0 0 0 0.2rem;
        }

        &.open::before {
          content: "-";
          margin: 0 0.1rem 0 0.2rem;
        }
      }

      /* .questions:has(.accordion.open) {
                background-color: var(--fifthColor);
            } */
    }

    /* text */
    .text-panel {
      display: none;
      overflow: hidden;
    }

    ul {
      list-style-type: circle;
      display: flex;
      flex-direction: column;
      gap: 1rem;

      & li {
        color: white;
        font-size: 14px;
        line-height: var(--lineheight-125);
        font-weight: var(--fontRegular);
        margin: 1rem 1rem 1rem 3.2rem;
        font-family: var(--fontHeading);

        & span {
          font-weight: var(--fontSemiBold);
        }
      }
    }

    .text-panel p {
      margin: 1rem 1rem 1rem 3.2rem;
      color: white;
    }
  }
}

/* ====== */
/* === Reviews === */
/* ====== */

.reviews {
  display: flex;
  flex-direction: column;
  margin: 5rem 0 10rem 0;
  scroll-margin-top: 10rem;

  .rating__star {
    width: 1rem;
    height: 1rem;
    display: inline-block;
    background-image: url("../assets/img/star_full.svg");
    background-size: cover;
    background-repeat: no-repeat;
  }

  .reviews__heading {
    margin: 0 0 1rem 0;
    font-size: var(--sizeHeading2);
  }

  .reviews__text {
    max-width: 20rem;
    text-align: center !important;
  }

  .quotes-container {
    display: flex;
    flex-direction: column;

    .quotes-list {
      display: flex;
      overflow: hidden;
      scrollbar-width: none;
      column-gap: 2rem;

      .quote {
        min-width: calc(100% - 2rem);
        display: flex;
        animation: scroll 20s linear infinite;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 1rem;
        padding: 2rem 0;
        background-image: url(../assets/img/Review_BG.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;

        .quote__div {
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 2rem 0;

          .quote__start,
          .quote__end {
            width: 1rem;
            height: 1rem;
          }

          .quote__start {
            align-self: flex-start;
          }
          .quote__end {
            align-self: flex-end;
          }
          .quote__text {
            max-width: 15rem;
            text-align: center;
            margin: 0 0.5rem;
            font-size: var(--sizeTextRegular);
          }
        }

        .rating {
          width: 100%;
          padding: 0 0 0.5rem 0;
          display: flex;
          justify-content: center;
          gap: 0.2rem;

          .rating__star--quote {
            width: 0.75rem;
            height: 0.75rem;
          }
        }

        .rating.four {
          .rating__star--quote:nth-of-type(5) {
            background-image: url("../assets/img/star_empty.svg");
          }
        }
      }
    }

    .quote-indicator {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1.4rem;
      margin: 2rem 0 2rem 0;

      .quote-indicator__item {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background-color: var(--supplementColorThree);
      }

      .quote-indicator__item.active {
        background-color: var(--mainColor);
        width: 0.75rem;
        height: 0.75rem;
      }
    }
  }
}

/* ====== */
/* === Contact === */
/* ====== */

.contact {
  margin: 5rem 5% 0rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  scroll-margin-top: 10rem;

  .contact_intro,
  .contact__details,
  form {
    width: 100%;
    max-width: 30rem;
  }

  .contact__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 0 1rem 0;

    .contact__heading {
      text-align: center;
      font-size: var(--sizeHeading2);
      margin: 1rem 1rem;
      gap: 0;
    }

    .contact__text {
      max-width: 30rem;
      text-align: center !important;
    }
  }

  .contact__details {
    /* display: grid;
        grid-template-columns: 1fr 1fr;
        max-width: 55rem;
        gap: 0 3rem; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
    text-align: center !important;

    .contact__details-email,
    .contact__details-phone {
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      margin: 2rem 0;

      p,
      a {
        margin: 0 0 0.5rem 0;
        /* font-weight: bold; */
        font-size: var(--sizeTextLarge);
        text-align: center !important;
      }

      .phone-link,
      .email-link {
        font-size: var(--sizeTextRegular);
        font-weight: var(--fontRegular);
        text-decoration: underline;
        text-underline-offset: 3px;
      }
    }
  }

  .contact-form-wrapper {
    width: 100%;
    background-color: #f1f1f1;
    margin: 2rem 0 10rem 0;
    padding: 0 2rem 0 2rem;
    border-radius: 30px;
    font-family: var(--fontHeading);
    max-width: 60rem;
  }

  form {
    margin: 2rem 0 5rem;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 3rem;
    max-width: 55rem;

    fieldset {
      border: none;
      display: flex;
      flex-direction: column;
      margin: 0 0 1rem 0;

      input,
      textarea,
      select {
        background-color: var(--supplementColorTwo);
        width: 100%;
        border: none;
        border-radius: 4px;
        padding: 0.9rem 0.8rem;
        border-radius: 8px;
        font-size: var(--sizeTextSmall);
        font-family: var(--fontHeading);
      }

      select {
        color: var(--textPrimary) !important;
      }
      select option {
        color: var(--textPrimary);
      }

      textarea {
        min-height: 8rem;
        resize: none;

        &::-webkit-scrollbar {
          width: 6px;
        }

        &::-webkit-scrollbar-track {
          background-color: transparent;
        }

        &::-webkit-scrollbar-thumb {
          background: var(--supplementColorTwo);
          border-radius: 4px;
        }

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

      select {
        color: var(--supplementColorThree);
        cursor: pointer;
        option {
          font-size: 0.9rem;
        }
      }

      .phone-input__container {
        display: flex;
        justify-content: space-between;
        width: 100%;

        select {
          width: initial;
          padding: 0 0.5rem;
          margin: 0 0.25rem 0 0.25rem;
          font-size: var(--sizeTextLarge);
        }
        #telInput {
          width: 100%;
        }
      }

      label {
        font-size: var(--sizeTextRegular);
        color: var(--textPrimary);
        margin: 0 0 0.25rem 0;
      }

      .error {
        border-color: var(--errorColor);
        border-width: 3px;
        color: var(--errorColorMessage);
      }

      .success {
        border-color: var(--successColor);
        border-width: 3px;
      }
    }

    input[type="submit"] {
      cursor: pointer;
      width: 100%;
      background-color: var(--mainColor);
      color: var(--headerPrimary);
      font-size: var(--sizeTextLarge);
      font-family: var(--fontText);
      border: none;
      border-radius: 4px;
      padding: 0.5rem 0;
      margin: 0.5rem 0 0 0;
      align-self: start;

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

.gr .contact {
  margin: 2rem 5% 0rem;
}

.za {
  .contact .contact__details {
    justify-content: center;
  }
}

.asset-desktop.mario {
  display: none;
}

.asset-desktop.crash {
  display: none;
}

/*  
======================== 
MARK: == Footer 
======================== 
*/

.footer__container {
  background-color: var(--footerBG);
  display: flex;
  justify-content: center;

  .footer__content {
    padding: 2rem 0;
    margin: 0 10%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 0;

    a,
    p {
      color: var(--footerPrimary);
    }

    .footer-links {
      grid-row: 2;
      display: grid;
      gap: 1.25rem;
      order: 2;

      .footer-links__item a {
        text-decoration: underline;
        text-underline-offset: 0.4rem;
        font-size: var(--sizeTextXLarge);

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

    .footer-links.secondary-links {
      grid-row: 3;
    }

    .footer-img {
      grid-row: 1;
      grid-column: 1 / span 2;
      max-width: 8.25rem;
      order: 1;
      justify-self: center;
    }

    .footer-rights {
      grid-row: 4;
      grid-column: 1 / span 2;
      display: flex;
      justify-content: space-between;
      order: 3;
      margin-top: 2rem;

      p {
        color: var(--footerSecondary);
        font-size: var(--sizeTextSmall);
      }
    }
  }
}

/* ====== */

/*  
======================== 
MARK: == Terms & Privacy 
======================== 
*/

/* ====== */
/* === General === */
/* ====== */

/* ========================= */
/* MARK: == Terms & Privacy == */
/* ========================= */

.terms,
.privacy,
.widerrufsrecht,
.impressum {
  position: relative;

  &:has(.header-container.scrolled) {
    .to-top {
      background-color: var(--mainColor);

      svg path {
        stroke: var(--supplementColorTwo);
      }

      &:hover {
        background-color: var(--mainColorDarker);
        cursor: pointer;
      }
    }
  }

  /* Hero Section for Privacy & Terms Pages */
  .hero-privacy,
  .hero-terms {
    min-height: 20rem;
    background-color: var(--mainColor);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem 1rem;

    h1,
    h2 {
      color: var(--headerPrimary);
    }

    h1 {
      font-size: var(--sizeHeading1);
    }

    h2 {
      font-weight: normal;
    }
  }

  /* Breadcrumb Styling */
  .breadcrumb {
    margin: 1rem 1.5rem;
    display: flex;
    justify-content: flex-start;

    a {
      color: var(--supplementColorTwo);
      text-decoration: underline;
      text-underline-offset: 3px;
      margin: 0 1rem 0 1rem;

      &::before {
        content: "";
        display: inline-block;
        background-image: url("../assets/img/icons/breadcrumb-arrow.svg");
        background-size: contain;
        width: 0.6rem;
        height: 0.6rem;
        margin: 0 0.5rem 0 0;
      }

      &:hover {
        color: var(--mainColor);
        font-weight: var(--fontBold);
        text-decoration: none;
      }
    }
  }

  /* To-Top Button Styling */
  .to-top {
    background-color: var(--supplementColorTwo);

    svg path {
      stroke: var(--mainColor);
    }
  }

  .to-top:hover {
    background-color: var(--mainColor);

    svg path {
      stroke: var(--supplementColorTwo);
    }
  }

  /* Content Area Styling for Terms & Privacy */
  .privacy-subject,
  .terms-subject,
  .table-of-content {
    padding: 2rem 10%;

    h2,
    h3,
    h4,
    p,
    li,
    a {
      color: var(--textPrimary);
      font-family: var(--fontTextAlt);
      margin: 0 auto;
    }

    h2,
    h3,
    h4 {
      margin: 3rem 0 0.5rem;
      margin: 0 auto;
    }

    h2 {
      font-size: var(--sizeHeading5);
    }
    h3 {
      font-size: var(--sizeTextLarge);
    }
    h4 {
      font-size: var(--sizeTextRegular);
      font-weight: normal;
    }
    p,
    li,
    a {
      font-size: var(--sizeTextLarge);
    }

    ul {
      list-style: initial;
      margin: 1rem 2rem;
      padding: 0 1rem;

      li {
        margin: 0.5rem 0;
      }
    }
  }

  /* Table of Contents Styling */
  .table-of-content {
    margin: 0;
    padding: 2rem 10%;
    position: relative;
    background-color: #37323d;

    .table-of-content__heading {
      font-size: var(--sizeHeading2);
      color: var(--supplementColorTwo);
      margin: 0;
    }

    ul {
      list-style: none;
      /* margin-bottom: 5rem; */

      li {
        font-size: var(--sizeTextLarge);
        margin: 0.3rem 0;

        a {
          text-decoration: underline;
          color: var(--supplementColorTwo);
          font-size: var(--sizeTextLarge);

          &:hover {
            color: var(--mainColor);
            font-weight: var(--fontBold);
            text-decoration: none;
          }
        }
      }
    }

    .bg-toc {
      position: absolute;
      top: -5rem;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #37323d;
      z-index: -1;
    }

    .scroll-indicator__line {
      width: 0.05rem;
      height: 80%;
      display: inline-block;
      position: absolute;
      background-color: var(--headingColorLight);
      top: 4.2rem;
    }
  }

  /* Scroll Indicator Line */
  .privacy-subject,
  .table-of-content {
    position: relative;

    .scroll-indicator__line {
      width: 0.05rem;
      height: 100%;
      display: inline-block;
      position: absolute;
      background-color: var(--headingColor);
      left: -1.3rem;
      top: 0;
    }
  }

  /* Arabic Styling for RTL Support */
  &.ar {
    ul {
      direction: rtl;
    }

    .privacy-subject,
    .table-of-content {
      .scroll-indicator__point {
        transform: translate(30.8rem, 4.5rem) !important;
      }
      .scroll-indicator__line {
        right: -1.3rem !important;
        left: initial;
      }
    }
  }
}

/*  
======================== 
MARK: == Impr & Widerruf
======================== 
*/

.widerrufsrecht,
.impressum {
  .subject-1 {
    margin-block: 5rem 8rem;
  }

  .privacy-subject__text {
    margin: 1rem 0;
  }

  ol.privacy-subject__list {
    list-style: lower-roman;
    margin: 2rem 0;
  }
}

/*  
======================== 
MARK: == Mediaqueries
======================== 
*/

@media screen and (min-width: 300px) {
  .footer__container {
    .footer__content {
      .footer-img {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        max-width: 10.5rem;
        width: 100%;
      }
      .footer-links {
        grid-row: 1;
        grid-column: 1;
      }
      .footer-links.secondary-links {
        grid-row: 2;
        grid-column: 1 / span 2;
      }
      .footer-rights {
        grid-row: 3;
      }
    }
  }
}

@media screen and (min-width: 400px) {
  /* ====== */
  /* === Hero Privacy === */
  /* === Hero T&C === */
  /* ====== */

  .hero-privacy,
  .hero-terms {
    min-height: 25rem;
  }

  .reviews {
    align-items: center;
    justify-content: center;
    margin: 10rem auto 10rem;
    max-width: 27.5rem;

    .reviews__text,
    .quotes-container {
      margin: 0 2rem;
      max-width: 100%;
    }
  }
}

@media screen and (min-width: 510px) {
  .hero-container {
    padding: 3.5rem 1.5rem;

    h1 {
      max-width: 75vw;
      font-size: 1.8em;
      font-size: var(--sizeHeading3);
    }

    .pricepoint {
      margin: 0 auto 2rem;
      display: block;
    }
  }

  .index-country .hero-container {
    .hero-text__wrapper {
      img {
        max-width: 20rem;
      }

      h1 {
        max-width: 30rem;
      }
    }
  }

  .explore-content__description {
    max-width: 30rem;
  }

  .contact {
    .contact__details {
      flex-direction: row;
      justify-content: space-around;
    }
  }
}

@media screen and (min-width: 640px) {
  header {
    .pricepoint {
      padding: 0.5rem 1.8rem;
    }
  }

  .top-content {
    margin: 10rem 0%;
    /* === Carousel === */
    .carousel {
      /* background-color: #0DBBE0; */
      /* gap: 1rem; */
      margin: 0rem 0 4rem 0;
      animation: scrollCarousel 60s linear infinite;

      .carousel__item {
        flex: 0 0 5vw;
      }
    }
  }

  .features {
    .features-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      justify-items: stretch;
      align-items: stretch;
      gap: 2.5rem 1rem;
      margin: 0 2rem;

      .features-list__item {
        justify-content: flex-start;
        text-align: center;
        /* margin: 0 0 1rem 0; */

        /* &:nth-of-type(5) {
                    grid-column: span 2;
                } */

        p {
          max-width: 17rem;
        }

        img {
          min-height: 6.25rem;
          object-fit: contain;
        }
      }
    }
  }

  .faq {
    .questions__container {
      .questions {
        /* buttons */
        .accordion {
          font-size: var(--sizeTextLarge);
        }
      }

      /* text */
      .text-panel {
        display: none;
        overflow: hidden;
        color: white;
      }

      .text-panel p {
        margin: 1rem 1rem 1rem 3.2rem;
      }
    }
  }

  /* ====== */
  /* === Hero Privacy === */
  /* === Hero T&C === */
  /* ====== */

  .terms,
  .privacy {
    .hero-privacy,
    .hero-terms {
      background-position: 0% 10%;
      background-size: 100% 50rem;
      display: flex;
      align-items: stretch;

      .hero-privacy__textwrap,
      .hero-terms__textwrap {
        /* width: 35rem; */
        margin: 0 10%;
        display: flex;
        flex-direction: column;
      }
    }

    .breadcrumb {
      margin: 1rem 10%;
    }

    .privacy-subject,
    .terms-subject,
    .table-of-content {
      padding: 2rem auto;
      /* background-color: #37323D; */
    }
  }
}

@media screen and (min-width: 800px) {
  /* Target nav-list links on .index-country pages */

  header {
    .pricepoint {
      padding: 0.5rem 10%;
    }

    .header-container {
      padding: 1rem 10% 1rem 10%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 auto;
      width: 100%;

      img {
        margin: 0 0 0 0;
      }

      .menu-btn {
        display: none;
      }

      .nav-container {
        width: initial;
        height: initial;
        position: initial;
        z-index: initial;
        display: flex;
        flex-direction: row;
        align-items: initial;
        justify-content: initial;
        background-color: transparent;
        color: var(--textSecondary);
        gap: 0;
        margin-left: 1rem;

        .nav-list {
          font-weight: var(--fontRegular);
          flex-direction: row;
          align-items: center;
          position: relative;
          bottom: 0;

          .nav-list__item {
            border: none;
            padding-bottom: 0;
          }

          a {
            font-size: 1rem;
            color: var(--supplementColorFive);
            transition: color 0.2s ease-in-out;
          }
        }

        .country-selection,
        .lang-selection {
          order: 2;
          /* activate when multiple languages */
          display: flex;
          /* display: none; */
          position: relative;
          right: 0;
          bottom: 0;
        }
        .country-selection {
          flex: 0 0 50%;
        }

        .lang-selection__options {
          /* activate when multiple languages */
          /* display: none; */
          display: flex;

          a {
            color: var(--supplementColorFive);
            font-weight: var(--fontRegular);
            margin: 0 0.3rem;

            &.active {
              color: var(--supplementColorFive);
              font-weight: var(--fontBold);
              text-decoration: underline;
              text-underline-offset: 4px;
            }

            &:hover {
              text-decoration: underline;
              text-underline-offset: 4px;
              color: var(--mainColor);
            }
          }
        }
        &.active {
          display: flex;
        }
      }
      &.scrolled {
        .nav-container {
          .lang-selection {
            a {
            }
          }
        }
      }
    }
  }

  .hero-container {
    height: 90vh;

    .scrolled h1 {
      max-width: 50vw;
    }
  }

  .explore-container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: var(--mainColor) !important; /* Full orange background */
    padding: 0 11%;
    height: 60vh;
    margin-bottom: 5rem;
  }

  .explore-content {
    max-width: 50%; /* Half width for text */
    padding: 2rem;
  }

  .explore-content__heading {
    font-size: var(--sizeHeading2);
  }

  .explore-image__container {
    justify-content: flex-end;
    max-width: 50%; /* Half width for image */
  }

  .explore-image__img {
    max-width: 25rem; /* Scale the image smaller */
  }

  .features {
    padding: 1rem 10rem 8rem;
    .features-list {
      gap: 4.5rem 1rem;
      margin: 5rem 0 0 0;

      .features-list__item {
        &:nth-of-type(6) {
          word-break: break-all;
        }
      }
    }
  }

  .cta-join {
    img.asset-desktop.fifa {
      display: inline;
      position: absolute;
      width: 30rem;
      max-width: initial;
      right: 0;
      bottom: -5rem;
    }
  }

  /* ====== */
  /* === Reviews === */
  /* ====== */

  .reviews {
    align-items: center;
    margin: 10rem 9%;
    max-width: initial;
    position: relative;

    .reviews__text {
      justify-self: center;
      max-width: 45rem;
      text-align: center;
    }

    .quotes-container {
      max-width: 35rem;
      justify-self: center;
      margin: 3rem 0 0;
    }

    .general-rating {
      grid-row-start: 3;
    }

    img.asset-desktop.mario {
      display: inline;
      position: absolute;
      bottom: 5rem;
      left: -8rem;
      bottom: -5rem;
      width: 15rem;
      max-width: initial;
    }
  }

  .contact {
    position: relative;
    padding: 10%;

    .contact__heading,
    .contact__intro,
    .contact__details {
      margin: 0 2rem 0 0;
    }

    form {
      display: grid;
      grid-template-columns: 1fr 1fr;

      fieldset {
        &:nth-of-type(4) {
          grid-column: 2;
          grid-row: 1;
        }
        &:last-of-type {
          grid-column: 2;
          grid-row: 2 / span 2;
        }
      }

      input[type="submit"] {
        grid-column: 2;
      }
    }
  }

  .za {
    .contact .contact__details {
      justify-content: flex-start;
    }
  }

  .footer__container {
    position: relative;

    .footer__content {
      grid-template-columns: minmax(10rem, 25rem) 1fr;

      .footer-links:not(.footer-links.secondary-links) {
        grid-template-columns: 1fr 1fr;
      }
    }
  }
}

@media screen and (min-width: 1200px) {
  .hero-container {
    grid-template-columns: minmax(20rem, 40rem) 30rem;

    .cta {
      background-color: var(--supplementColorFour);
      margin: 0;

      ul {
        background-color: var(--textSecondary);
      }

      select {
        width: 75%;
      }

      button {
        width: 75%;
        left: initial;
        bottom: 2rem;
      }
    }

    h1 {
      font-size: 2.5rem;
    }
  }

  .features {
    .features-list {
      grid-template-columns: repeat(4, minmax(10rem, 20rem));
      grid-template-rows: 1fr;
    }
  }
  .explore-container {
    margin: 0 auto;
  }

  .explore-image__img {
    max-width: 30rem;
  }

  .cta-join {
    position: relative;
    background-image: url("../assets/img/Mobile_JoinNow.webp");
    background-size: 100%, 100%;
    background-position: 50% 65%, 50% 65%;
  }
}
@media screen and (max-width: 480px) {
  .hero-container {
    background-image: url("../assets/img/shoopadoo-heroBG-mobile-DARK.webp"); /* Background image */
  }
}