/* 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");

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

/*  
======================== 
MARK: == Variables
======================== 
*/
:root {
  /* Custom Variables */
  /* Colors */
  --mainColor: #d620fb;
  --mainColorDarker: #9a0bb8;
  --supplementColorOne: #facc15; /* yellow */
  --supplementColorOneDarker: #e1b813; /* yellow */
  --supplementColorTwo: #ffffff; /* white */
  --supplementColorThree: #5d5d5d; /* light grey */
  --supplementColorFour: #353a40; /* black */
  --supplementColorFive: #e7e9ee; /* black-50 */
  --supplementColorSix: #f9ba3e; /* yellow */
  --supplementColorSeven: #111111;
  --headingColor: #d620fb; /* headingColor */
  --footerPrimary: #ffffff; /* footerPrimary */
  --footerSecondary: #f9f9f9; /*footerSecondary */
  --headerPrimary: #ffffff; /* headerPrimary */
  --textPrimary: #ffffff; /* textPrimary */
  --textSecondary: #1f2328; /* textSecondary */
  --footerBG: #171616; /* footerBG */
  --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: "Montserrat", 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;
  scroll-padding-top: 14rem;
  overflow-x: hidden;
}

body {
  background-color: var(--lightGrey);
  overflow-x: hidden;
}

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

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

h3 {
  color: var(--textSecondary);
}

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

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

.cta-join,
.features,
.faq,
.contact {
  p {
    color: var(--textSecondary);
  }
}

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

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

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

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

body.ar .pricepoint,
body.ar .explore,
body.ar .features,
body.ar .faq,
body.ar .questions,
body.ar .contact,
body.ar .hero-heading {
  direction: rtl;
}

/* ====== */

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

header {
  width: 100%;
  position: fixed;
  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: 0.8rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    background-color: var(
      --supplementColorFour
    ); /* comment out if header transparent at start */
    transition: background-color 0.2s ease-in-out;

    img {
      max-width: 7rem;
      margin: 0 0 0 1.5rem;
      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: var(--mainColor);
        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: 100%;
      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(--supplementColorFive);
          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: 9rem;
        margin: 0 2.5rem 0 0;
      }

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

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

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

              h3 {
                color: var(--supplementColorFive);
              }

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

          /* 
                        MARK:: == Country Flags 
                     */
          /* 
                        Saudi Arabia (KSA)
                        United Kingdom (UK)
                     */
          .country-selection__list.eu li {
            /* Country 1 */
            &.country-selection__item:nth-of-type(2)::before {
              background-image: url("../assets/img/flags/poland.png");
            }
          }
        }

        .country-selection__wrapper.active {
          display: flex;
          flex-direction: column;
          margin: 0;
          gap: 1rem;
          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: space-between; */
        padding: 8rem 2rem;

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

    &.scrolled {
      background-color: var(--supplementColorFour);

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

.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,
.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(--headingColor);
  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;
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;

  h1 {
    font-family: var(--fontHeading);
    color: var(--headerPrimary);
    font-weight: var(--fontBold);
    line-height: var(--lineheight-125);
    margin: 0 0 2rem 0;
    font-size: 1.8em;
    align-self: center;
    text-align: center;
  }

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

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

      &: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(--textSecondary);
      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(--textSecondary);
        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 {
      cursor: pointer;
      background-color: var(--mainColor);
      color: var(--textPrimary);
      border: none;
      width: 100%;
      padding: 1rem;
      /* position: absolute;
            left: 0;
            bottom: 0; */
      font-weight: var(--fontSemiBold);
      font-size: var(--sizeTextRegular);

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

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

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

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

.hero-carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-carousel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.55) 100%
  );
  pointer-events: none;
}

.hero-carousel__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.hero-carousel__slide.active {
  opacity: 1;
}

.hero-carousel__slide--1 {
  background-image: url("../assets/img/Slider.jpg");
}

.hero-carousel__slide--2 {
  background-image: url("../assets/img/Slider-2.jpg");
}

.hero-carousel__slide--3 {
  background-image: url("../assets/img/Slider-1.jpg");
}

.hero-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  width: 2.75rem;
  height: 2.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;

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

.hero-carousel__btn--prev {
  left: 0.5rem;
}

.hero-carousel__btn--next {
  right: 0.5rem;
}

.hero-container > h1,
.hero-container > .hero-heading-group,
.hero-container > .cta,
.hero-container > .pricepoint {
  position: relative;
  z-index: 1;
}

@media screen and (min-width: 800px) {
  .hero-carousel__slide--1 {
    background-image: url("../assets/img/Slider-desktop.jpg");
  }

  .hero-carousel__slide--2 {
    background-image: url("../assets/img/Slider-desktop-2.jpg");
  }

  .hero-carousel__slide--3 {
    background-image: url("../assets/img/Slider-desktop-1.jpg");
  }

  .hero-carousel__btn--prev {
    left: 0.5rem;
  }

  .hero-carousel__btn--next {
    right: 0.5rem;
  }
}

/* ====== */
/* === Explore === */
/* ====== */
.explore,
.cta-join {
  margin: 5rem 0 0 0;

  .heading {
    margin: 0 0 1rem 0;
    text-align: center;
  }
}

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

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

  .explore__img {
    width: 75vw;
    max-width: 20rem;
  }
}

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

  100% {
    transform: translateX(calc(-33.3333%));
  }
}

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

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

.features {
  .features-list {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;

    li:nth-child(1) {
      background-color: var(--mainColor);

      img {
        filter: brightness(0) invert(1);
      }

      h3 {
        color: var(--supplementColorOne);
      }
      p {
        color: var(--textPrimary);
      
      }
    }
  }

  p {
    text-align: center;
    color: var(--textSecondary);
  }

  .features-list__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(214, 32, 251, 0.2);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    background-color: var(--supplementColorFive);
    justify-content: flex-start;
    max-width: 85vw;

    p {
      max-width: initial;
      color: var(--textSecondary);
    }

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

  h3 {
    color: var(--textSecondary);
    text-align: center;
    margin-top: 1rem;
  }

  .features__heading {
    margin: 4rem 0 1rem 0;
  }

  .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;
      color: var(--textSecondary);
    }
  }
}

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

.cta-join {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fdf4ff;
  padding: 5rem 0;

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

  .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(--supplementColorSeven);
    font-weight: var(--fontBold);
    margin: 2.5rem auto 1rem;

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

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

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

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

  .faq__text {
    max-width: 30rem;
    margin: 1rem 0 0 0;
  }

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

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

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

/* ====== */
/* === Reviews === */
/* ====== */
@keyframes scroll {
  0%,
  23% {
    transform: translateX(0);
  }
  25%,
  48% {
    transform: translateX(calc(-100% - 4rem));
  }
  50%,
  73% {
    transform: translateX(calc(-200% - 8rem));
  }
  75%,
  100% {
    transform: translateX(calc(-300% - 12rem));
  }
}

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

      .quote {
        min-width: calc(100% - 2rem);
        display: flex;
        animation: scroll 20s linear infinite;
        border-radius: 18px;
        justify-content: center;
        align-items: center;
        box-shadow:
          0 4px 24px rgba(214, 32, 251, 0.15),
          0 1px 4px rgba(0, 0, 0, 0.08);
        flex-direction: column;
        margin: 1rem;
        padding: 2rem 0;
        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(--textSecondary);
          }
        }

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

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

.contact {
  margin: 0 10%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .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;
      margin: 1rem 2rem;
    }

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

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

    .contact__details-email,
    .contact__details-phone {
      display: flex;
      flex-direction: column;
      justify-content: center;
      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(--fontRegular);
        text-decoration: underline;
        text-underline-offset: 3px;

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

  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 {
        color: var(--textSecondary);
        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(--textSecondary) !important;
      }
      select option {
        color: var(--textSecondary);
      }

      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(--textSecondary);
        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;
    gap: 5rem;

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

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

      .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;
      justify-content: space-between;
      order: 3;

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

.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(--headerPrimary);
    }

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

    h2 {
      font-weight: normal;
    }
  }

  .breadcrumb {
    margin: 1rem 0;

    a {
      color: var(--headingColor);
      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(--supplementColorThree);

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

  .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(--supplementColorThree);
      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: 320px) and (max-width: 800px) {
  .hero-container {
    h1 {
      margin-bottom: 6rem;
    }

    .hero-heading-group {
        p {
            margin-bottom: 1rem;
            text-align: center;
        }
    }
    
  }
  #container-explore {
    overflow: hidden;

    .explore#explore {
      max-width: 100%;
    }

    .explore-img__container {
      .explore__img {
        margin-left: 70%;
      }
    }
  }

  .reviews {
    .quotes-list {
      width: 100vw;
    }
  }
}

@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 {
    h1 {
      max-width: 75vw;
      margin: 0 auto 1rem;
      font-size: 1.8em;
    }

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

  .index-country .hero-container {
    .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;
      }
    }
  }
}

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

  /* ====== */
  /* === 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(--textSecondary);
        gap: 0;

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

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

        .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(--textSecondary);
            font-weight: var(--fontRegular);
            margin: 0 0.3rem;

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

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

        &: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: 6.7em;
            width: 100%;
            height: calc(100vh - 6.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);

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

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

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

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

  .hero-container {
    background-image: url("../assets/img/bg_hero.png");
    display: grid;
    grid-template-columns: minmax(20rem, 40rem) 20rem;
    grid-template-rows: auto;
    padding: 8rem 10% 3rem;
    /* gap: 5%; */
    justify-content: space-between;
    align-items: center;
    align-content: center;
    position: initial;

    h1 {
      text-align: left;
    }

    .hero-heading-group {
      align-self: flex-start;
      display: flex;
      flex-direction: column;
    }

    .cta {
      background-color: var(--supplementColorFour);
      width: initial;
      padding: 2rem 3rem;
      margin: 0;
      grid-row: 2;
      /* 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);
    }
    .hero-heading-group {
        p {
            max-width: 46vw;
        }
    }

    .hero-heading-group {
      grid-row: 1 / span 3;
    }
  }

  .index-country {
    .hero-heading-group {
        p {
            margin: 0 auto 2rem;
        }
    }
  }

  .cta-join {
    &::after {
      content: "";
      position: absolute;
      background-image: url("../assets/img/Vector.png");
      background-repeat: no-repeat;
      right: 0;
      bottom: 0;
      height: 200px;
      width: 100px;
      background-size: cover;
    }
  }

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

  .index-country .hero-container#top {
    grid-template-columns: 1fr 300px;
  }
}

.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; */
      grid-row: initial;

      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: 2.5em;
      grid-row: 1 / span 2;
    }

    img {
      grid-column: 2 / span 2;
      grid-row: 1 / span 4;
      justify-self: right;
      min-width: 20rem;
      max-width: 30vw;
      margin-top: 5rem;
    }
  }

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

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

#container-explore {
  padding: 5rem 9%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow-x: hidden;
  flex-direction: column;

  &::after {
    content: "";
    background-image: url(../assets/img/bg-about.svg);
    background-repeat: no-repeat;
    display: block;
    background-size: cover;
    position: absolute;
    z-index: -1;
    right: 0;
    width: 180px;
    height: 200px;
    top: -50px;
  }

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

    .heading {
      margin: 1rem 0;
      justify-content: flex-start;
    }

    .explore__text {
      max-width: 30rem;
      color: var(--textSecondary);
    }
  }

  .explore-img__container {
    bottom: 0;
    max-width: 20rem;

    .explore__img {
      max-width: 25rem;
    }
  }
}

.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: 8rem 9%;
  max-width: initial;
  position: relative;

  .reviews__text {
    justify-self: center;
    max-width: 45rem;
    text-align: center;
    color: var(--textSecondary);
  }

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

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

.contact {
  position: relative;
  margin: 0 10% 5rem;

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

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

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

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

.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 {
    padding: 0;

    flex-direction: row;

    &::after {
      width: 700px;
      height: 601px;
      top: -75px;
    }

    .explore-img__container {
      max-width: 30rem;
      margin: 3rem 0 5rem;
      .explore__img {
        max-width: 30rem;
      }
    }
  }

  .features {
    .features-list {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 1.5rem;
      max-width: 75rem;
      margin: 3rem auto 0;
      justify-items: stretch;
      align-items: stretch;

      .features-list__item {
        &:nth-child(5) {
          grid-column: 3;
          grid-row: 1 / span 2;
          justify-content: center;
        }
      }
    }
  }
}