/* Import Fonts */
/* 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");
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap");

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

/*  
======================== 
MARK: == Variables
======================== 
*/
:root {
  /* Custom Variables */
  /* Colors */
  --mainColor: #044ad9;
  --mainColorDarker: #081031;
  --supplementColorOne: #07d99a;
  --supplementColorTwo: #f6faff;
  --supplementColorThree: #616367; /* grey */
  --supplementColorFour: #100f0f; /* black */
  --supplementColorFive: #fff; /* black-50 */
  --footerBG: #044ad9; /* footerBG */
  --textPrimary: #a2a6b0; /* textPrimary   */
  --textSecondary: #ffffff; /* textSecondary */

  --supplementColorOneDarker: #c24713; /* orange */
  --supplementColorSix: #f9ba3e; /* yellow */
  --headingColor: #ffffff; /* headingColor */
  --footerPrimary: #ffffff; /* footerPrimary */
  --footerSecondary: #f9f9f9; /*footerSecondary */
  --headerPrimary: #ffffff; /* headerPrimary */
  --headerBG: #100f0f; /* headerBG */
  --lightGrey: #ffffff; /* Footer Links Secondary */
  --errorColor: #d24545; /* Error Message Color */
  --successColor: #45d24c; /* Error Message Color */
  --errorColorMessage: #d24545; /* Error Message Color */

  /* Fonts */
  --fontHeading: "Comfortaa", sans-serif;
  --fontHeadingAlt: "Poppins", sans-serif;
  --fontText: "Montserrat", sans-serif;
  --fontTextAlt: "Poppins", sans-serif;

  /* Sizing */
  --sizeTextSmall: 12px; /* 12px */
  --sizeTextRegular: 14px; /* 14px */
  --sizeTextLarge: 16px; /* 16px */
  --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;
}

body {
  background-color: var(--supplementColorTwo);
  color: var(--mainColorDarker);
}

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

/* Arabic Text Styling */
body.ar h1,
body.ar h2,
body.ar h3,
body.ar h4,
body.ar p,
body.ar a,
body.ar label,
body.ar select,
body.ar li,
body.ar input:not([type="submit"]),
body.ar textarea {
  text-align: right;
}

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

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

body.ar * {
  direction: rtl;
}

/* ====== */

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

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

  .pricepoint {
    background-color: var(--supplementColorThree);
    padding: 0.5rem 1.5rem;
    font-family: var(--fontHeading);
    display: flex;
    justify-content: flex-start;
    gap: 10px;

    span {
      text-align: right;
    }
  }

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

    img {
      max-width: 7rem;
      margin: 0 10px;
      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: end;
      gap: 0.4rem;
      width: 2rem;
      height: 2.5rem;
      float: right;
      cursor: pointer;
      transition: all 200ms ease;

      .menu-btn__stripe {
        width: 100%;
        height: 0.25rem;
        border-radius: 2rem;
        background-color: #07d99a;
        position: relative;
        transition: background-color 0.2s ease-in-out;

        &:nth-child(3) {
          width: 75%;
        }
      }
    }

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

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

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

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

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

      .nav-list {
        order: 2;
        font-family: var(--fontHeadingAlt);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        /* position: relative;
                bottom: 8rem; */

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

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

      .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: 5rem;
        margin: 0 2.5rem;
      }

      .country-selection {
        margin: 0 2rem;
        align-items: center;
        /* cursor: pointer; */

        .country-selection__btn {
          background-color: var(--supplementColorFive);
          color: var(--textPrimary);
          align-self: flex-end;
          display: flex;
          align-items: center;
          border: none;
          margin: 0.5rem 1.8rem;
          position: relative;
          cursor: pointer;

          &::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;
          }
        }

        &:has(.country-selection__wrapper.active) {
          .country-selection__btn {
            &::after {
              top: -0.1rem;
              content: "⯅";
            }
          }

          .nav-list {
            display: none;
          }
        }

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

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

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

          a {
            color: var(--supplementColorTwo);
            text-decoration: underline;
            text-underline-offset: 4px;
            font-size: var(--sizeHeading6);
          }

          /* .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/netherlands.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 
                     */
          /* 
                        Austria (AT)
                        Ireland (IE)
                        Poland (PL)
                        Potugal (PT)
                        Singapore (SG)
                        South Africa (ZA)
                        Spain (ES)
                        United Kingdom (UK)
                     */
          /*
                    .country-selection__list.eu li {
                        /* Country 1 
                        &.country-selection__item:nth-of-type(2)::before {
                            background-image: url("../assets/img/flags/austria.svg");
                        }
                        /* Country 2 
                        &.country-selection__item:nth-of-type(3)::before {
                            background-image: url("../assets/img/flags/ireland.svg");
                        }
                        /* Country 3 
                        &.country-selection__item:nth-of-type(4)::before {
                            background-image: url("../assets/img/flags/poland.svg");
                        }
                        /* Country 4 
                        &.country-selection__item:nth-of-type(5)::before {
                            background-image: url("../assets/img/flags/portugal.svg");
                        }
                        /* Country 5 
                        &.country-selection__item:nth-of-type(6)::before {
                            background-image: url("../assets/img/flags/spain.svg");
                        }
                        /* Country 5 
                        &.country-selection__item:nth-of-type(7)::before {
                            background-image: url("../assets/img/flags/united-kingdom.svg");
                        }
                    }
                    */

          /* .country-selection__list.mideast-af li {
                        /* Country 1 
                        &.country-selection__item:nth-of-type(2)::before {
                            background-image: url("../assets/img/flags/singapore.svg");

                        }
                        /* Country 2 
                        &.country-selection__item:nth-of-type(3)::before {
                            background-image: url("../assets/img/flags/south-africa.svg");
                        }
                    } */
        }

        /* .country-selection__wrapper.active {
                    display: flex;
                    flex-direction: column;
                    margin: 0;
                    gap: 1rem;
                    background-color: var(--supplementColorFour);
                    width: 100%;
                } */
      }

      .lang-selection {
        a {
          color: var(--supplementColorTwo);
          font-weight: var(--fontBold);

          &.active {
            color: var(--headingColor);
            text-decoration: underline;
            text-underline-offset: 4px;
          }
        }
      }

      &:has(.country-selection__wrapper.active) {
        align-items: start;

        .nav-list {
          display: none;
        }

        .country-selection {
          bottom: 5rem;
          align-items: center;
          justify-content: space-between;
          gap: 16.3rem;

          .country-selection__btn {
            order: 2;
            position: relative;
            left: -0.5rem;
          }
        }
      }

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

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

    /* &.scrolled {
      background-color: var(--supplementColorFour);
      background-color: var(--mainColor);
      background-color: transparent;

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

  /*HEADER WITH FLAGS */
  .header-container--general {
    display: flex;
    background-color: var(--mainColor);
    justify-content: center !important;
  }
  .header-container--general .flag-box__img {
    max-width: 50px;
    margin: 0;
  }

  .header-container--general::before {
    content: "";
    background: url("../assets/img/Atom.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 80px;
    height: 80px;
    position: absolute;
    bottom: -10%;
    left: 0%;
    z-index: 0;
  }
  .header-container--general::after {
    content: "";
    background: url("../assets/img/Atom.png");
    transform: rotate(30deg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    right: 5%;
    z-index: 0;
  }
  .header__country-selection {
    text-align: center;
  }
  .header__flags-container {
    display: flex;
    align-items: center;
    justify-content: center;
    /* flex-wrap: wrap; */
    gap: 10px;
    gap: 10px;
    max-width: 50%;
    margin: 0 auto;
  }
  .header__flag-box {
    padding: 10px;
  }
  .flag-box__title {
    color: var(--textPrimary);
    font-size: var(--sizeTextSmall);
  }
}

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

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

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

      .lang-selection {
        a {
          color: var(--supplementColorTwo);

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

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

/* .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 {
  margin: 0 2rem;
}

.heading {
  color: var(--mainColor);
  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;
    } */
}

/*  
======================== 
MARK: == Hero 
======================== 
*/

.hero-container {
  height: 94vh;
  position: relative;
  background-image: url("../assets/img/hero-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem;
  padding-top: 0;
  gap: 1rem;
  h1 {
    font-family: var(--fontHeading);
    color: var(--headerPrimary);
    font-weight: var(--fontBold);
    line-height: var(--lineheight-125);
    text-transform: uppercase;
    /* max-width: 65vw; */
    margin: 0;
    font-size: 1.8em;
    text-align: center;
  }

  .hero__img {
    max-width: 100px;
    margin: 2rem auto;
    transform: rotate(-20deg);
  }

  .cta {
    /* background-color: var(--supplementColorFour); */
    width: 95%;
    min-height: 8rem;
    padding: 1.5rem 3rem;
    margin: 0;
    align-self: center;
    border-radius: 8px;
    position: relative;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    align-items: center;
    z-index: 2;

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

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

    #cta__text--highlight {
      display: none;
      color: var(--errorColorMessage);
    }
    select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      list-style: none;
      width: 100%;
      border: none;
      border-radius: 4px;
      padding: 0.7rem 1rem;
      margin: 1.5rem 0;
      font-size: var(--sizeTextRegular);
      color: var(--headerPrimary);
      text-align-last: left;
      background-color: var(--supplementColorFive);
      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(--headingColor);
        font-family: var(--fontText);
        font-size: var(--sizeTextLarge);
        padding: 0;
        margin: 0;
      }

      &::before {
        content: "";
        display: inline-block;
        width: 1rem;
        height: 1rem;
        background-color: #000;
      }
    }
    button {
      min-width: 250px;
      cursor: pointer;
      background-color: var(--supplementColorOne);
      color: var(--textSecondary);
      border: none;
      border-radius: 8px;
      width: 100%;
      padding: 1rem;
      /* position: absolute;
            left: 0;
            bottom: 0; */
      font-weight: var(--fontSemiBold);
      font-size: var(--sizeTextLarge);
      font-family: var(--fontHeading);

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

  .pricepoint {
    margin: 0 auto 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--sizeTextRegular);
  }

  .scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 2.5rem;
    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;
    }
  }
  #left-side-img {
    position: absolute;
    bottom: -60px;
    left: 0;
    max-width: 150px;
    margin: 0;
    z-index: 0;
    opacity: 1;
  }
  #right-side-img {
    position: absolute;
    bottom: 13%;
    right: 0;
    max-width: 130px;
    margin: 0;
    z-index: 0;
    opacity: 0.7;
  }

  #right-top-side-img {
    display: none;
  }
}

body.ar .hero-heading {
  text-align: center;
}

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

    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;
      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 1rem;
        color: var(--headerPrimary);

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

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

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

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

/*  
======================== 
MARK: == Explore 
======================== 
*/

.explore,
.cta-join {
  margin: 6rem 0 0 0;

  .heading {
    margin: 0 0 1rem 0;
  }
}

.explore {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 1.5rem;
  position: relative;
}

.explore__heading {
  color: var(--mainColor);
  text-transform: uppercase;
  margin-bottom: 3rem !important;
}

.explore__text {
  color: var(--supplementColorThree);
  margin: 2rem 4rem !important;
}

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

  .explore__img {
    margin: 5rem 0 5rem;
    width: 75vw;
    max-width: 20rem;
  }
}
.explore-img__container::before {
  content: "";
  background: url("../assets/img/Hat.png");
  background-repeat: no-repeat;
  width: 80px;
  height: 100px;
  /* transform: rotate(45deg); */
  position: absolute;
  right: 0px;
  top: -10%;
  z-index: 0;
  opacity: 0.4;
  overflow: hidden;
}

.explore-img__container::after {
  content: "";
  background: url("../assets/img/planetEarth.png");
  background-repeat: no-repeat;
  transform: rotate(345deg);
  width: 150px;
  height: 190px;
  position: absolute;
  bottom: -20%;
  left: -16%;
  z-index: 0;
  opacity: 0.4;
}

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

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

.top-content {
  overflow: hidden;

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

  /* === Carousel === */

  .carousel,
  .carousel__item {
    display: flex;
  }

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

    .carousel__item {
      flex-direction: column-reverse;
      flex: 0 0 30vw;
      height: 18rem;
      border-radius: 20px;
      padding: 2rem 0.25rem;
      color: #fff;
      justify-content: center;
      align-items: center;

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

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

/*  
======================== 
MARK: == Features
======================== 
*/

.features {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 3rem 0;

  .features-list,
  .features-list__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .features__heading {
    margin: 3rem 0 3rem 0;
    color: var(--mainColor);
    text-transform: uppercase;
  }

  /* .features-list {
        gap: 2rem;

        .features-list__item {
            gap: 0.5rem;
        }

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

  .features__wrapper {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 16px;
    scroll-behavior: smooth;
  }
  .feature__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex: 0 0 auto;
    width: 200px;
    scroll-snap-align: start;
  }

  .feature__img {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--supplementColorThree);
    background-color: rgba(4, 74, 217, 0.06);
    width: 125px;
    height: 125px;
  }
  .feature__img img {
    filter: opacity(0.2);
    padding: 1rem;
  }
  .feature__title {
    color: var(--mainColor);
    font-weight: var(--fontExtraBold);
  }
  .feature__description {
    color: var(--supplementColorThree);
    max-width: 80%;
    margin: 0 auto;
    text-align: center;
  }
}

/*  
======================== 
MARK: == Join Now 
======================== 
*/

.cta-join {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(#000000a1 0%, #000000a1 100%),
    url("../assets/img/BG_JoinNow.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 50% 65%;
  padding: 5rem 0;

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

  .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__btn--primary {
    text-align: center;
    text-decoration: none;
    padding: 0.75rem 3rem;
    background-color: var(--supplementColorOne);
    color: var(--headerPrimary);
    font-weight: var(--fontBold);
    margin: 2.5rem auto 1rem;

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

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

/*  
======================== 
MARK: == FAQ 
======================== 
*/

.faq {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 5rem 10% 5rem;

  .faq__text {
    max-width: 50rem;
    margin: 1rem 0 0 0;
    color: var(--supplementColorThree);
  }

  .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: 1rem 1rem;
        background-color: var(--supplementColorFive);
        color: var(--mainColor);
        border: 1px solid var(--mainColor);
        border-radius: 20px;
        font-family: var(--fontText);
        /* font-weight: var(--fontBold); */
        text-align: left;

        /* &:hover {
          background-color: var(--mainColor);
          color: var(--textSecondary);
        } */

        &.open {
          background-color: initial;
        }

        &::before {
          content: "+";
          color: var(--mainColor);
          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;
    }

    .text-panel p {
      margin: 1rem;
      color: var(--supplementColorThree);
    }
  }
}

/*  
======================== 
MARK: == Reviews 
======================== 
*/

@keyframes scroll {
  0%,
  33.33% {
    transform: translateX(0);
  }
  40%,
  73.33% {
    transform: translateX(calc(-100% - 4rem));
  }
  80%,
  100% {
    transform: translateX(calc(-200% - 8rem));
  }
}

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

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

  .reviews__text {
    max-width: 20rem;
  }

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

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

      .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-color: var(--supplementColorFive);
        border-bottom: 2px solid var(--textPrimary);

        .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: 20rem;
            text-align: center;
            margin: 0 0.5rem;
            font-size: var(--sizeTextRegular);
            color: var(--headingColor);
          }
        }

        .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: 0.4rem;
      margin: 0 0 2rem 0;

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

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

/*  
======================== 
MARK: == Contact
======================== 
*/

.contact {
  margin: 2rem 3rem;
  background-color: var(--supplementColorOne);
  text-align: center;
  border-radius: 15px;
  color: var(--textSecondary);
  margin-bottom: 6rem;

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

  .contact__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;

    .contact__heading {
      font-size: 24px;
      text-align: center;
      text-transform: uppercase;
      color: var(--textSecondary);
      margin: 1rem 0rem;
    }

    .contact__text {
      max-width: 30rem;
    }
  }

  .contact__details {
    /* display: flex; */
    margin: 0 2rem;
    padding: 1rem 0;
    justify-content: space-between;

    .contact__details-email {
      background-color: var(--mainColor);
      /* display: flex;
      flex-direction: column;
      justify-content: center; */
      border-radius: 10px;
      /* margin: 2rem 0; */
      p,
      a {
        margin: 0 0 0.5rem 0;
        /* font-weight: bold; */
        font-size: var(--sizeTextLarge);
        color: var(--headingColor);
      }

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

        &:hover {
          /* color: var(--mainColor); */
          text-decoration: underline;
        }
      }
      padding: 1rem;
    }
  }
  form {
    margin: 2rem 0 5rem;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    padding: 2rem;
    gap: 0 3rem;
    background-color: var(--supplementColorFive);
    max-width: 55rem;
    fieldset {
      border: none;
      display: flex;
      flex-direction: column;
      margin: 0 0 1rem 0;
      input,
      textarea,
      select {
        background-color: var(--supplementColorFour);
        color: var(--headingColor);
        font-family: var(--fontText);
        width: 100%;
        border: 1px solid #6a6a6a;
        border-radius: 4px;
        margin: 0.5rem 0 0 0;
        padding: 0.9rem 0.8rem;
      }
      select {
        color: var(--headingColor) !important;
      }
      select option {
        color: var(--headingColor);
      }
      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;
        }
        #telInput {
          width: 100%;
        }
      }
      label {
        font-family: var(--fontText);
        font-size: var(--sizeTextLarge);
        color: var(--headingColor);
        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);
      }
    }
  }
}

.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: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5rem;

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

    .footer-links {
      display: grid;
      /* grid-template-columns: 125px 125px; */
      gap: 1.25rem;
      order: 2;
      justify-content: center;

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

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

    .footer-img {
      max-width: 14.25rem;
      margin: 0 auto;
      order: 1;
      /* position: relative;
            left: 1.60rem; */
    }

    .footer-rights {
      display: flex;
      gap: 1rem;
      justify-content: space-between;
      order: 3;
      flex-direction: column;

      p {
        color: var(--footerSecondary);
        font-size: var(--sizeTextSmall);
      }
    }
    .footer-rights__copyright {
      text-align: center;
    }
  }
}

.index-country .footer__container,
.privacy .footer__container,
.terms .footer__container {
  .footer__content {
    gap: 3rem 4rem;

    .footer-links.secondary-links {
      font-size: var(--sizeTextSmall);
      color: var(--footerSecondary);
      grid-column: span 2;
    }
  }
}
/* ====== */

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

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

.terms,
.privacy,
.widerrufsrecht,
.impressum {
  /* ====== */
  /* === Hero Privacy === */
  /* === Hero T&C === */
  /* ====== */

  .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(--mainColorDarker);
    } */

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

    h2 {
      font-weight: normal;
    }
  }

  .breadcrumb {
    margin: 1rem 0;

    a {
      color: var(--mainColorDarker);
      text-decoration: underline;
      text-underline-offset: 3px;
      margin: 0 0 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);
        text-decoration-color: var(--mainColor);
      }
    }
  }

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

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

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

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

  .privacy-subject,
  .terms-subject,
  .table-of-content {
    margin: 2rem 10%;

    h2,
    h3,
    h4,
    p,
    li,
    a {
      color: var(--mainColorDarker);
      font-family: var(--fontTextAlt);
      max-width: 50rem;
    }

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

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

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

      li {
        margin: 0.5rem 0;
      }
    }
  }

  .table-of-content {
    .table-of-content__heading {
      font-size: var(--sizeTextLarge);
    }

    ul {
      list-style: none;
      li {
        font-size: var(--sizeTextLarge);
        margin: 0.3rem 0;

        a {
          text-decoration: underline;

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

  /* ===== */
  /* COMMENT ON IF READING LINE INDICATOR NEEDS TO BE THERE */
  /* ===== */
  .privacy-subject,
  .table-of-content {
    position: relative;

    /* .scroll-indicator__point {
            position: sticky;
            top: 1rem;
            margin: 0;
            display: inline-block;
            background-image: url("../assets/img/icons/scroll-indicator-point.svg");
            background-size: contain;
            width: 1rem;
            height: 1rem;
            transform: translate(-1.75rem, 4.5rem);
        } */

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

/* Arabic styling */
.terms.ar,
.privacy.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: 400px) {
  /* ====== */
  /* === Hero Privacy === */
  /* === Hero T&C === */
  /* ====== */

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

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

    .reviews__text,
    .quotes-container {
      margin: 0 2rem;
    }
  }
}

@media screen and (min-width: 510px) {
  .hero-container {
    padding-top: 6rem;
    h1 {
      /* max-width: 75vw; */
      margin: 0 auto;
      font-size: 2.2em;
    }

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

    #right-top-side-img {
      display: block;
      position: absolute;
      top: 15%;
      right: 10%;
      max-width: 130px;
      margin: 0;
      z-index: 0;
    }

    .hero__img {
      position: absolute;
      top: 15%;
      left: 10%;
    }

    #left-side-img {
      bottom: 0;
    }
  }

  .index-country .hero-container {
    .hero__img {
      position: absolute;
      top: 10%;
      left: 10%;
    }

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

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

  /* .explore {
    .explore__text {
      max-width: 30rem;
    }
  } */

  .footer__container {
    .footer__content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;

      .footer-img {
        margin: initial;
        justify-self: end;
        grid-column: 2;
        grid-row: 1;
      }

      .footer-links.secondary-links,
      .footer-rights {
        grid-column: 1 / span 2;
      }
      .footer-links {
        justify-content: start;
      }
    }
  }
}

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

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

      .carousel__item {
        flex: 0 0 5vw;
        padding: 2rem 0.25rem;
      }
    }
  }

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

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

  body.ar .accordion {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }

  /* ====== */
  /* === 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 {
      margin: 2rem auto;
      max-width: 50rem;
    }
  }
}

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

    .header-container {
      padding: 1rem 9%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .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(--supplementColorFour);
        gap: 25px;

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

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

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

        .country-selection__list {
          display: none;
        }

        .lang-selection {
          a {
            color: var(--mainColorDarker);
            font-weight: var(--fontRegular);
            margin: 0 0.3rem;

            &.active {
              color: var(--mainColorDarker);
              font-weight: var(--fontBold);
            }

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

        &:has(.country-selection__wrapper.active) {
          flex-direction: column;
          justify-content: space-between;
          /* gap: 1rem; */

          .nav-list {
            display: flex;
          }

          .country-selection {
            bottom: initial;
            flex-direction: row;
            align-items: flex-start;
            position: absolute;
            background-color: var(--headerBG);
            top: 5.7em;
            width: 100vw;
            height: calc(100vh - 5.7em);
            padding: 2rem 10% 1rem;

            .country-selection__btn {
              position: initial;
              order: 2;
              align-self: flex-start;
            }

            .country-selection__list {
              display: flex;
              flex-direction: column;

              .country-selection__item {
                margin: 0 0 1rem 0;
              }
            }
          }

          /* .country-selection__wrapper.active {

                    } */
        }

        &.active {
          display: flex;
        }
      }

      &:has(.country-selection__wrapper.active) {
        background-color: var(--headerBG);

        .nav-container {
          color: var(--headingColor);

          .nav-list {
            a {
              color: var(--headingColor);
            }
          }

          .lang-selection {
            a {
              color: var(--supplementColorTwo);
              font-weight: var(--fontRegular);

              &.active {
                color: var(--headingColor);
                font-weight: var(--fontBold);
              }

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

      &.scrolled {
        .nav-container {
          color: var(--headingColor);

          .nav-list {
            a {
              color: var(--headingColor);
            }
          }

          .lang-selection {
            a {
              color: var(--supplementColorTwo);
              font-weight: var(--fontRegular);

              &.active {
                color: var(--headingColor);
                font-weight: var(--fontBold);
              }

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

  .hero-container {
    display: grid;
    /* grid-template-columns: minmax(20rem, 40rem) 20rem; */
    grid-template-rows: auto;
    padding: 4rem 10%;
    gap: 5%;
    justify-content: center;
    align-items: center;
    align-content: center;
    position: initial;

    .cta {
      /* background-color: var(--supplementColorFour); */
      width: initial;
      padding: 2rem 3rem;
      margin: 0;
      /* max-width: 23rem; */

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

      button {
        font-size: var(--sizeTextLarge);
      }
    }

    .pricepoint {
      grid-column: 1;
      justify-self: left;
      margin: 0;
    }

    .scroll-indicator {
      position: absolute;
      bottom: 2rem;
      left: 2.5rem;
      color: var(--textSecondary);

      &::after {
        background-color: var(--textSecondary);
      }
    }

    h1 {
      max-width: 46vw;
      font-size: var(--sizeHeading1);
      grid-row: 1 / span 3;
    }
  }

  .index-country .hero-container {
    /* display: flex; */

    /* grid-template-columns: 1fr 1fr 1fr; */

    .hero-text__wrapper {
      width: 100%;
      grid-column: span 3;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      justify-content: space-between;

      .cta {
        /* max-width: 23rem; */

        p.cta__text {
          color: var(--headerPrimary);

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

      .pricepoint {
        grid-column: 1;
        justify-self: center;
        /* margin: 0 4.5rem; */
      }

      h1 {
        max-width: 30vw;
        margin: 5em auto 2.5rem;
        font-size: 3em;
        grid-row: 1 / span 2;
      }

      img {
        grid-column: 2 / span 2;
        grid-row: 1 / span 4;
        justify-self: center;
        min-width: 25rem;
        max-width: 35vw;
      }
    }

    .scroll-indicator {
      position: absolute;
      bottom: 1.9rem;
      left: 2.5rem;
      color: var(--textSecondary);

      &::after {
        background-color: var(--textSecondary);
      }
    }
  }

  #container-explore {
    margin: 10rem 9%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .explore {
      max-width: 73vw;
      margin: 0;

      /* .heading {
        margin: 1rem 2rem;
        justify-content: flex-start;
      } */

      /* .explore__text {
        max-width: 30rem;
      } */
    }

    .explore-img__container {
      bottom: 0;
      /* max-width: 20rem; */
      /* margin: 0 4rem 0 0; */

      .explore__img {
        max-width: 25rem;
      }
    }
  }
  .explore-img__container::before {
    width: 160px;
    transform: rotate(45deg);
    opacity: 1;
    right: 0;
    top: 0;
  }
  .explore-img__container::after {
    width: 160px;
    opacity: 1;
    left: 0;
    bottom: 0;
  }

  .features {
    margin-bottom: 5rem;

    .features-list {
      grid-template-columns: repeat(4, minmax(10rem, 20rem));
      grid-template-rows: 1fr;
      gap: 4.5rem 1rem;
      margin: 5rem 0 0 0;

      .features-list__item {
        &:nth-of-type(6) {
          word-break: break-all;
        }
      }
    }
    .features__wrapper {
      max-width: 90%;
      margin: 0 auto;
      flex-wrap: wrap;
      justify-content: center;
      gap: 40px;
    }
    .feature__box {
      width: 400px;
    }
  }

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

  .faq::before {
    content: "";
    background: url("../assets/img/Microscope.png");
    background-repeat: no-repeat;
    width: 250px;
    height: 400px;
    position: absolute;
    left: 0px;
    z-index: 0;
    opacity: 1;
  }

  .faq::after {
    content: "";
    background: url("../assets/img/Atom-faq.png");
    background-repeat: no-repeat;
    width: 150px;
    height: 390px;
    position: absolute;
    right: 0;
    z-index: 0;
  }

  .contact {
    position: relative;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;

    .contact__heading {
      margin: 1rem 0;
    }
    .contact__intro {
      margin: 0 auto;
      text-align: left;
      max-width: 30rem;
      align-items: flex-start;
      padding: 2rem 0;
    }
    .contact__details {
      margin: 0 auto;
      padding-bottom: 2rem;
      max-width: 30rem;
    }

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

  .privacy,
  .terms {
    header {
      .header-container {
        .nav-container {
          color: var(--headingColor);

          .nav-list {
            a {
              color: var(--headingColor);
            }
          }
        }
      }
    }
  }

  .footer__container {
    position: relative;

    .asset-desktop.crash {
      display: inline;
      max-width: 30vw;
      transform: rotateY(180deg);
      position: absolute;
      right: 0;
      top: -25rem;
    }
  }
}

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

  #container-explore {
    margin: 10rem auto;
    max-width: 90%;
    margin-bottom: 5rem;

    .explore-img__container {
      /* max-width: 30rem; */
      .explore__img {
        max-width: 30rem;
      }
    }
  }

  .cta-join {
    position: relative;
    background-image: linear-gradient(#000000a1 0%, #000000a1 100%),
      url("../assets/img/BG_JoinNow.png");
    background-size: 100%, 100%;
    background-position: 50% 65%, 50% 65%;
  }

  .features__wrapper {
    justify-content: center;
  }
}