/* Import Fonts */
/* Jort */
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Kanit: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 */
  /* maincolors */
  --mainColor: #e50915;

  /* general */
  --textPrimary: #fff;
  --textSecondary: #ffffff;
  --headingColor: #fff;
  --headingColorLight: #fff;
  --bgColor: #100f0f;

  /* header */
  --bgPricePoint: #100f0f;
  --headerPrimary: #ffffff;
  --headerBG: #000; /* headerBG */

  --formText: #8c8c8c;
  --formBg: #161616;

  --colorGrey: #5d5d5d; /* not active buttons */
  /* footer */
  --footerPrimary: #ffffff;
  --footerSecondary: #f9f9f9;
  --footerBG: #000; /* footerBG */

  /* errors */
  --errorColor: #d24545; /* Error Message Color */
  --successColor: #45d24c; /* Error Message Color */
  --errorColorMessage: #d24545; /* Error Message Color */

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

  /* Sizing */
  --sizeTextSmall: 12px; /* 12px */
  --sizeTextRegular: 14px; /* 14px */
  --sizeTextLarge: 16px; /* 16px */
  --sizeHeading1: 40px; /* 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: "Jost", sans-serif;
  scroll-behavior: smooth;
}

body {
  background: url("../assets/img/Mobile_FullBG.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--bgColor);
}

body.terms {
  background-color: #100f0f !important;
  background: none;
}

body.privacy {
  background-color: #100f0f !important;
  background: none;
}

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

h1,
h2,
h3,
h4,
p {
  font-family: var(--fontHeadingAlt);
  color: var(--textSecondary);
  text-align: left;
}

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

img {
  max-width: 10rem;
}

ul {
  list-style: none;
}

a {
  color: #fff;
  text-decoration: underline;
  font-family: var(--fontTextAlt);
}

.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 button:not(.to-top),
body.ar label,
body.ar select,
body.ar li,
body.ar input:not([type="submit"]),
body.ar textarea {
  text-align: right !important;
  direction: rtl !important;
}

/* max-width adjustments */
body.ar .top-content__text,
body.ar .faq__text,
body.ar .reviews__text,
body.ar .contact__text {
  margin-left: auto !important; /* Plaatst de tekst tegen de rechterkant */
}

body.ar .features {
  align-items: flex-end;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ====== */

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

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

  .pricepoint {
    background-color: var(--bgPricePoint);
    padding: 0.5rem;
    font-family: var(--fontHeadingAlt);
    display: flex;
    justify-content: center;
    gap: 10px;
    color: var(--textSecondary);

    /* span {
            text-align: right;
        } */
  }

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

    img {
      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(--headingColorLight);
        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(--headingColorLight);
        }

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

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

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

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

        .nav-list__item {
          text-align: center !important;
          width: 100%;
          padding-bottom: 1rem;
          border-bottom: 1px solid var(--mainColor);

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

        a {
          font-size: var(--sizeTextLarge);
          color: var(--textSecondary);

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

      .country-selection,
      .lang-selection {
        order: 1;
        display: flex; /* activate when multiple languages */
        flex-direction: column;
        justify-content: flex-end;
        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);
          display: flex;
          align-items: center;
          border: none;
          padding: 0.5rem 1.5rem;
          position: relative;
          cursor: pointer;

          &::before {
            content: url("../assets/img/icons/language-icon.svg");
            position: relative;
            object-fit: cover;
            left: -0.7rem;
            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(--textSecondary);
            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 
                     */
          /* 
                        switserland (ch)
                        iraq (iq)
                        kazakhstan (kz)
                        oman (om)
                        (Saudi Arabia) (ksa)
                        united arab emirates (uae)
                     */
          .country-selection__list.eu li {
            /* Country 1 */
            &.country-selection__item:nth-of-type(2)::before {
              background-image: url("../assets/img/flags/spain.svg");
            }
            /* Country 2 */
            &.country-selection__item:nth-of-type(3)::before {
              background-image: url("../assets/img/flags/switzerland.svg");
            }
          }

          .country-selection__list.mideast-af li {
            /* Country 1 */
            &.country-selection__item:nth-of-type(2)::before {
              background-image: url("../assets/img/flags/kuwait.svg");
            }
            /* Country 2 */
            &.country-selection__item:nth-of-type(3)::before {
              background-image: url("../assets/img/flags/oman.svg");
            }
            /* Country 3 */
            &.country-selection__item:nth-of-type(4)::before {
              background-image: url("../assets/img/flags/south-africa.svg");
            }
            /* Country 4 */
            &.country-selection__item:nth-of-type(5)::before {
              background-image: url("../assets/img/flags/poland.svg");
            }
          }
        }

        .country-selection__wrapper.active {
          display: flex;
          flex-direction: column;
          margin: 0;
          gap: 1rem;
          background-color: transparent;
          width: 100%;
        }
      }

      .lang-selection {
        margin: 0;
        order: 3;
        position: relative;
        bottom: 0;

        .lang-selection__options {
          display: flex;
          gap: 0.5rem;
        }

        a {
          color: var(--headingColorLight);
          font-weight: var(--fontLight);

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

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

      &:has(.country-selection__wrapper.active) {
        overflow-y: scroll;
        justify-content: flex-start;
        align-items: normal;

        .nav-list {
          display: none;
        }

        .country-selection {
          /* margin: 10rem 0 0 0; */
          position: relative;
          /* top: 5.2rem; */
          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: 3rem 2rem;

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

/* .privacy header,
.terms header {
    .header-container {
        .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 === */
/* ====== */

.headings {
  h3.heading {
    font-size: 0.75rem;
    font-weight: var(--fontRegular);
  }
}

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

.hero-container {
  margin: 0 0 2rem 0;
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  padding: 6.5rem 1.5rem 0rem 1.5rem;
  background: url("../assets/img/Mobile_HeroSection.jpg");
  background-size: cover;
  background-repeat: no-repeat;

  h1 {
    font-family: var(--fontHeadingAlt);
    color: var(--headingColorLight);
    font-weight: var(--fontBold);
    line-height: var(--lineheight-125);
    margin: 0 0 1.5rem 0;
    font-size: 36px;
    /* max-width: 20rem; */
    text-align: left;
  }

  .hero-svg {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
    margin-bottom: 1rem;
  }

  .hero-svg img {
    width: 100px;
    height: auto;
    opacity: 1;
  }

  /* ====== CTA HERO ====== */
  .cta {
    background-color: var(--bgColor);
    width: 100%;
    min-height: 8rem;
    padding: 1.5rem 1rem;
    margin: 0 0 1rem 0;
    border-radius: 1rem;
    align-self: center;
    /* border-radius: 8px; */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;

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

      &:first-child {
        font-size: 18px;
        font-weight: var(--fontSemiBold);
      }
    }

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

    select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      list-style: none;
      width: 80%;
      border: none;
      border-radius: 4px;
      padding: 0.7rem 1rem;
      margin: 1rem 0 0.75rem;
      font-size: 18px;
      color: var(--headingColorLight);
      text-align-last: left;
      background-color: var(--supplementColorThree);
      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 */
      border: 1px solid var(--mainColor);

      &.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:focus {
        outline: none; /* Verwijdert standaard blauwe rand */
        border-color: var(
          --mainColor
        ); /* Optioneel: verander de randkleur op focus */
      }

      &.cta__list option {
        background-color: #000; /* Zwarte achtergrond voor opties */
        color: #fff; /* Witte tekst voor opties */
      }

      &.cta__list option:hover {
        background-color: var(--mainColor) !important;
        color: #fff;
      }

      .cta__list-item {
        color: var(--headingColor);
        font-family: var(--fontTextAlt);
        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(--headingColorLight);
      border: none;
      width: 100%;
      padding: 1rem;
      /* position: absolute;
            left: 0;
            bottom: 0; */
      font-weight: var(--fontSemiBold);
      font-size: 18px;

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

    .cta-linktext {
      margin-top: 1rem;
      font-size: 14px;
      font-weight: var(--fontLight);

      a {
        color: #fff;
        text-decoration: underline solid #fff 1px;

        &:hover {
          color: var(--mainColor);
          text-decoration: underline solid var(--mainColor) 1px;

          /* font-weight: var(--fontSemiBold); */
        }
      }
    }
  }

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

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

    &::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(--headingColorLight);
      border-radius: 2px;
    }
  }
}

.index-country .ar {
  .cta__text {
    text-align: center !important;
  }
}

.index-country .hero-container {
  .hero-text__wrapper {
    width: 100%;
    display: flex;
    margin-bottom: 2rem;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0;

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

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

    .pricepoint {
      order: 4;
      max-width: 23rem;
      text-align: center;
    }
  }

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

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

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

    p.cta__text {
      font-weight: normal;
      font-size: small;

      a {
        text-decoration: underline;
        margin: 0 0 0 1rem;
        color: var(--headingColorLight);

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

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

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

.to-top:hover {
  background-color: #fff;
  cursor: pointer;

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

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

#container-explore {
  background-image: url("../assets/img/Mobile_BG-About.jpg");
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10.5rem 1.5rem 5.5rem 1.5rem;

  .explore {
    .explore__text {
      margin: 1rem 0 0 0;
      font-size: 20px;
      font-weight: var(--fontSemiBold);
    }

    .explore__heading {
      font-size: 40px;
      text-align: left;
    }

    .explore__text-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      gap: 0rem;
    }

    img {
      max-width: 100%;
      height: auto;
      margin-top: 5rem;
    }
  }
}

/* ====== */
/* === MARK: Best Content
/* === Discover Our Services (prev. top content) === */
/* ====== */

.top-content {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  /* justify-items: center; */
  overflow: hidden;
  padding: 10.5rem 1.5rem 11rem 1.5rem;
  text-align: left;

  .top-content__heading {
    font-size: 40px;
    margin-bottom: 1rem;
    text-align: left;
    display: block !important;
  }

  .top-content__text {
    font-size: 18px;
    max-width: 50rem;
    font-weight: var(--fontRegular);
  }

  /* === Carousel === */

  .carousel {
    margin: 2rem 0 4rem 0;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    /* animation: scrollCarousel 60s linear infinite; */

    .carousel__item {
      flex-direction: column-reverse;
      text-align: center;
      display: flex;
      align-items: center;
      /* height: 18rem; */
      border-radius: 20px;
      margin-bottom: 3rem;
      padding: 1rem 1.25rem;
      color: #fff;

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

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

      img {
        max-width: 5rem !important;
        border-radius: 20px;

        &:hover {
          filter: none;
        }
      }
    }
  }
}

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

.features {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0rem 0rem 0rem 0rem;

  .features__heading {
    text-align: left;
    font-size: var(--sizeHeading2);
    margin-bottom: 5rem;
    padding: 0 1.5rem;
  }

  .features-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    width: 100%;
    max-width: 1200px;

    .features-list__item {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      justify-items: center;
      align-items: flex-start;
      width: 100%;
      max-width: 300px;
      height: 400px;
      background-size: cover;
      background-position: center;
      overflow: hidden;

      &.video {
        background-image: url("../assets/img/features/Features_BGVideos.jpg");
      }

      &.scoops {
        background-image: url("../assets/img/features/Features_BGScoops.jpg");
      }

      &.news {
        background-image: url("../assets/img/features/Features_BGNews.jpg");
      }

      &.insights {
        background-image: url("../assets/img/features/Features_BGInsights.jpg");
      }

      &.devices {
        background-image: url("../assets/img/features/Features_BGMultidevices.jpg");
      }

      .features-list__content {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 1.5rem 2rem;
        color: white;
        text-align: left;

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

        p {
          font-size: 0.9rem;
          line-height: 1.4;
          font-weight: var(--fontLight);
        }
      }
    }
  }
}

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

.cta-join {
  position: relative;
  width: 100%;
  height: auto;
  padding: 7.5rem 1.5rem 0 1.5rem;
  display: flex;
  justify-content: center; /* Horizontaal centreren */
  align-items: center; /* Verticaal centreren */
  flex-direction: column; /* Standaard: items onder elkaar */
  text-align: center; /* Zorg dat de tekst gecentreerd is */

  .cta-wrapper {
    background-image: url("../assets/img/Mobile_JoinNow.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column; /* Standaard: stack boven elkaar */
    padding: 4rem 2rem;
    width: 100%;
    max-height: 700px;
    text-align: center;
    color: #fff;

    .cta-join__heading {
      font-size: 2rem;
      font-weight: var(--fontBold);
      line-height: 1;
      margin-bottom: 1rem;
      max-width: 18rem;
    }

    .cta-join__text-container,
    .cta-join__links {
      flex: 1;
    }

    .cta-join__text {
      font-size: 14px;
      font-weight: var(--fontLight);
      line-height: 1.4;
      margin-bottom: 2rem;
      color: #fff;
    }

    .cta-join__links {
      display: flex;
      flex-direction: column;
      align-items: center;

      .cta-join__btn--primary {
        display: inline-block;
        padding: 0.75rem 3rem;
        background-color: var(--mainColor);
        color: #fff;
        font-size: 1rem;
        width: 100%;
        max-width: 20rem;
        font-weight: bold;
        text-align: center !important;
        /* border-radius: 30px; */
        margin-bottom: 1rem;
        text-transform: uppercase;
        transition: background-color 0.3s ease;
        text-decoration: none;

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

      .cta-join_linktexts {
        font-size: 0.9rem;
        line-height: 1.4;
        font-weight: var(--fontLight);
        color: var(--textPrimary);
        text-align: center !important;

        a.cta-join__btn--secondary {
          color: #fff;
          text-decoration: underline;
          margin-left: 0.25rem;

          &:hover {
            color: var(--mainColor);
            /* font-weight: var(--fontSemiBold); */
          }
        }
      }
    }
  }
}

/* ====== */

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

.faq {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4rem 1.5rem 4rem 1.5rem;
  position: relative;
  overflow: hidden;

  .faq__heading {
    font-size: 40px;
    margin-bottom: 1rem;
    text-align: left;
    display: block;
  }

  &::before,
  &::after {
    content: "";
    position: absolute;
    width: 7rem;
    height: 10rem;
    background-repeat: no-repeat;
    pointer-events: none; /* Ensure they don't interfere with clicks */
    background-size: contain;
    z-index: -1;
  }

  &::before {
    bottom: -5rem;
    right: 0rem;
    /* background-image:  */
    /* url("../assets/img/IMG-extra-1.png"); */
  }
  &::after {
    bottom: 0rem;
    right: 1rem;
    /* background-image: 
            url("../assets/img/extra-asset.svg"); */
    transform: rotate(100deg);
  }

  .faq__text {
    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: 35rem;

    .questions {
      width: 100%;

      /* buttons */
      .accordion {
        cursor: pointer;
        width: 100%;
        padding: 1rem 1rem 1rem 1rem;
        margin: 1rem 0 1rem 0;
        background-color: transparent;
        color: var(--headingColorLight);
        border: 1px solid transparent;
        border-bottom: 1px solid var(--mainColor);
        border-radius: 4px;
        font-family: var(--fontTextAlt);
        font-weight: var(--fontMedium);
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: space-between;

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

          &::before {
            color: var(--headingColorLight);
          }
        }

        &.open {
          background-color: transparent;
          color: var(--headingColorLight);
        }

        span {
          flex-grow: 1;
          text-align: left;
        }

        &::after {
          content: "+";
          color: var(--textPrimary);
          float: right;
          font-size: 1.5rem;
          margin: 0 0 0 0.2rem;
        }

        &.open::after {
          content: "-";
          color: var(--headingColorLight);
          font-size: 2.5rem;
          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 2.2rem;
      color: #fff;
    }
  }
}

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

.reviews {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 7rem 1.5rem 10rem 1.5rem;

  .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__text-container {
    width: 100%;
  }

  .reviews__heading {
    font-size: 40px;
    margin-bottom: 1rem;
    text-align: left;
    display: block;
  }

  .reviews__text {
    text-align: left;
    margin-bottom: 3rem;
  }

  .reviews p {
    margin: 0px 2rem;
  }

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

    &:active {
      cursor: grabbing;
    }

    .quotes-list {
      display: flex;
      overflow: hidden;
      max-width: 100vw;
      scrollbar-width: none;
      column-gap: 0;

      &.dragging .quote {
        margin: 0 1rem; /* Add gap while dragging */
      }

      .quote {
        min-width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 2rem;
        border: solid 2.5px var(--mainColor);
        background-color: var(--lightGrey);
        transition: margin 0.3s ease; /* Smooth transition for margin */

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

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

          .quote__text {
            max-width: 20rem;
            text-align: center;
            margin: 0 0.5rem;
            font-size: var(--sizeTextLarge);
            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: 1.5rem;
      margin: 2rem 0 2rem 0;

      .quote-indicator__item {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background-color: #fff;
      }

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

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

.contact {
  padding: 4rem 1.5rem 4rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;

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

  .contact__intro {
    display: flex;
    flex-direction: column;
    margin: 0 0 1rem 0;

    .contact__heading {
      font-size: 40px;
      margin-bottom: 1rem;
      text-align: left;
      display: block !important;
    }

    .contact__text {
      margin: 1rem 0 0 0;
      /* max-width: 35rem; */
    }
  }

  .contact__details {
    display: flex;
    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(--headingColorLight);
      }

      .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;
    background-color: var(--supplementColorThree);
    border: 2px solid var(--mainColor);
    padding: 2rem;
    gap: 0 3rem;
    max-width: 55rem;

    .contact__details-container {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-bottom: 2rem;
      gap: 3rem;
      border-bottom: 2px solid var(--mainColor);

      /* .contact__details-email,
            .contact__details-phone {
                text-align: center; 
                display: flex; 
                flex-direction: column; 
                justify-content: center; 
                align-items: center; 
            } */
    }

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

      input,
      textarea,
      select {
        background-color: var(--formBg);
        border: 1px solid transparent;
        color: var(--formText);
        width: 100%;
        /* border: none; */
        border-radius: 4px;
        margin: 0.5rem 0 0 0;
        padding: 0.9rem 0.8rem;
        font-family: var(--fontTextAlt);
      }

      a {
        color: #fff;
      }

      p {
        padding: 0.9rem 0.8rem;
        margin: 0.5rem 0 0 0;
      }

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

      textarea {
        min-height: 9rem;
        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(--fontTextAlt);
        font-size: var(--sizeTextLarge);
        color: var(--headingColorLight);
        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(--fontTextAlt);
      font-weight: var(--fontMedium);
      border: none;
      border-radius: 4px;
      padding: 0.5rem 0;
      margin: 0.5rem 0 0 0;
      align-self: start;

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

.asset-desktop {
  display: none;
}

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

.footer__container {
  z-index: 22;
  background-color: var(--footerBG);
  display: flex;
  justify-content: center;
  padding: 0rem 1.5rem 0rem 1.5rem;

  .footer__content {
    padding: 2rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 3rem;

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

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

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

        &:hover {
          color: var(--mainColor);
          /* font-weight: var(--fontSemiBold); */
        }
      }
    }

    .footer-region-btn {
      display: none !important; /* Verborgen voor schermen < 800px */
      background-color: var(--mainColor);
      color: var(--textPrimary);
      display: flex;
      align-items: center;
      border: none;
      padding: 0.5rem 1.5rem;
      position: relative;
      cursor: pointer;
      font-size: var(--sizeTextRegular);
      font-family: var(--fontTextAlt);
      transition: background-color 0.3s ease;
      margin-top: 1rem; /* Voeg wat ruimte toe tussen de button en het logo */
    }

    /* Pseudo-elementen voor de button */
    .footer-region-btn::before {
      content: url("../assets/img/icons/language-icon.svg");
      position: relative;
      object-fit: cover;
      left: -0.7rem;
      top: 0rem;
    }

    .footer-region-btn::after {
      content: "⯆";
      position: relative;
      object-fit: cover;
      left: 0.5rem;
      top: -0.1rem;
    }

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

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

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

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

/*  
======================== 
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: 8vw;
    }

    h2 {
      font-weight: normal;
    }
  }

  .breadcrumb {
    margin: 1rem 0;

    a {
      color: var(--headingColorLight);
      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: #fff;
        /* font-weight: var(--fontBold); */
        text-decoration: none;
      }
    }
  }

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

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

    h2,
    h3,
    h4 {
      margin: 0rem 0 1rem;
    }

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

    a {
      font-size: 18px;
    }

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

      li {
        margin: 0.5rem 0;
      }
    }
  }

  .table-of-content {
    margin: 0;
    padding: 4rem 8% 8rem 8%;
    position: relative;
    background-color: #000;

    .table-of-content__heading {
      font-size: var(--sizeHeading3);
      color: var(--headingColorLight);
      margin-bottom: 2rem;
    }

    ul {
      list-style: none;
      border-left: 1px solid #fff;
      /* margin-bottom: 5rem; */

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

        a {
          text-decoration: underline;
          color: var(--headingColorLight);

          &:hover {
            color: #fff;
            /* font-weight: var(--fontBold); */
            text-decoration: none;
          }
        }
      }
    }

    .bg-toc {
      position: absolute;
      top: -5rem;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--supplementColorTwo);
      z-index: -1;
    }

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

  /* ===== */
  /* COMMENT ON IF READING LINE INDICATOR NEEDS TO BE THERE */
  /* ===== */
  .privacy-subject {
    position: relative;
    color: var(--headingColorLight);

    /* .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(--headingColorLight);
      left: -1.3rem;
      /* top: 5rem; */
      top: 0;
    }
  }
}

/* Arabic styling */
.terms.ar,
.privacy.ar {
  .hero-terms {
    .hero-terms__textwrap {
      align-items: flex-end;
    }
  }

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

    .scroll-indicator__line {
      /* right: -1.3rem!important; */
      left: initial;
      right: 9% !important;
    }

    ul {
      direction: rtl;
      border-left: none;
    }
  }

  .table-of-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    ul {
      border-right: 1px solid #fff;
    }
  }

  .breadcrumb {
    justify-content: flex-end !important;
    display: flex;

    a {
      &::after {
        content: "";
        display: inline-block;
        background-image: none;
      }

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

/*  
======================== 
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-container {
    h1 {
      font-family: var(--fontHeadingAlt);
      color: var(--headingColorLight);
      font-weight: var(--fontBold);
      line-height: var(--lineheight-125);
      margin: 0 0 1.5rem 0;
      font-size: 46px;
      /* max-width: 20rem; */
      text-align: left;
    }
  }

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

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

  .reviews {
    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: 30rem;
      margin: 0 auto 2rem;
      font-size: 2.2em;
    }

    .cta {
      max-width: 30rem;
    }

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

  .cta-join__heading {
    max-width: 50rem !important;
  }

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

  .top-content {
    .container {
      .content-list {
        justify-self: auto;

        .items {
          &.active {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto;
          }

          .item {
            &:last-of-type {
              margin: 3rem 0;
            }
          }
        }
      }
    }
  }

  .footer__container {
    .footer__content {
      .footer-img {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
      }
      .footer-links {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-row: 1;
        grid-column: 1;

        .footer-links__item a {
          font-size: 16px;
        }
      }
      .footer-links.secondary-links {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-row: 2;
        grid-column: 1 / span 2;

        .footer-links__item a {
          font-size: 12px;
          font-weight: var(--fontLight);
        }
      }
      .footer-rights {
        grid-row: 3;
      }

      .footer-region-btn {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
      }
    }
  }
}

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

  /* .top-content { */
  /* === Carousel === */
  .top-content {
    .carousel {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;
      gap: 1.5rem 1rem;

      .carousel__item {
        &.long-text {
          position: relative;
          top: 1.25rem;
        }

        img {
          max-width: 15rem !important;
          border-radius: 20px;
        }
      }
    }
  }

  .features {
    .features-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      justify-items: center;
      align-items: stretch;

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

  .reviews {
    display: flex;
    flex-direction: column;
    align-items: center;

    .container {
      .reviews__text {
        max-width: 30rem;
      }
    }

    .quotes-container {
      max-width: 30rem;
    }
  }

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

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

      h1 {
        font-size: 3rem;
        /* max-width: 50vw; */
      }

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

    .breadcrumb {
      margin: 1rem 9%;
    }
  }
}

@media screen and (max-width: 800px) {
  .contact__details-email,
  .contact__details-phone {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

@media screen and (min-width: 800px) {
  body {
    background: url("../assets/img/Desktop_FullBG.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }

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

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

      img.logo {
        margin: 0;
      }

      .menu-btn {
        display: none;
      }

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

        .nav-list {
          /* font-weight: var(--fontRegular); */
          flex-direction: row;
          align-items: center;
          justify-content: flex-end;
          position: relative;
          width: initial;
          bottom: 0;
          gap: 0.2rem 1.5rem;
          flex-wrap: wrap;

          .nav-list__item {
            border: none;
            padding: 0;
            width: initial;

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

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

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

        .country-selection {
          .country-selection__btn {
            background-color: var(--mainColor);
            color: var(--textPrimary);
            font-family: var(--fontHeading);
          }
        }

        .country-selection__list {
          display: none;
        }

        .lang-selection {
          a {
            margin: 0 0.3rem;
            text-decoration: none;

            .active {
              text-decoration: underline;
            }
          }
        }

        &: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(--bgColor);
            top: 5.5em;
            width: 100vw;
            height: calc(100vh - 5.5em);
            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 0.5rem 0;

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

          .country-selection__wrapper.active {
            gap: 0;
          }
        }

        &.active {
          display: flex;
          padding: 0;
        }
      }

      &:has(.country-selection__wrapper.active) {
        .nav-container {
          color: var(--headingColorLight);
          overflow-y: initial;

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

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

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

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

          .country-selection {
            margin: 0;
          }
        }
      }
    }
  }

  .index-country .hero-container {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: flex-start; /* Align items to the left */
    justify-content: center; /* Center vertically */
    text-align: left; /* Ensure text aligns to the left */
    padding: 1.5rem;
    padding: 4rem 8%;
  }

  .index-country .hero-container h1,
  .index-country .hero-container .cta,
  .index-country .hero-container .pricepoint {
    align-self: flex-start; /* Align each child element to the left */
    text-align: left; /* Ensure the text inside aligns left */
    margin: 0; /* Reset any existing margin if needed */
  }

  .index-country .hero-container h1 {
    margin: 1rem 0;
  }

  .index-country .hero-container .cta {
    .cta-linktext {
      font-size: 20px;
    }
  }

  .index-country.ar .hero-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;
  }

  /* .index-country.ar .hero-container h1,
    .index-country.ar .hero-container .cta,
    .index-country.ar .hero-container .pricepoint {
        align-self: flex-end !important; 
        align-items: flex-end !important; 
        text-align: right !important;
        margin-left: auto !important; 
    } */

  .index-country.ar .hero-container h1 {
    margin: 1rem 0 !important;
  }

  .hero-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4rem 8%;
    gap: 2rem;
    /* min-height: 90vh; */
    background-image: url("../assets/img/Desktop_HeroSection.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* position: initial; */

    .hero-svg {
      display: none;
    }

    .cta {
      min-height: initial;
      width: 100%;
      padding: 1.5rem 0.5rem;

      /* .cta__text:first-child,
            select,
            button {
                font-size: var(--sizeHeading6);
            } */

      select {
        width: 75%;
        margin: 1.5rem 0;
      }

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

    .pricepoint {
      margin: 0 auto;
    }

    .scroll-indicator {
      position: absolute;
      bottom: 1.5rem;
      left: 2.5rem;
    }

    h1 {
      max-width: 65%;
      margin: 5rem auto;
      text-align: left;
      font-size: var(--sizeHeading1);
    }
  }

  .index-country .hero-container {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .hero-text__wrapper {
      width: 100%;
      display: flex;
      max-width: fit-content;

      .cta {
        max-width: 23rem;
        align-self: initial;
        /* align-items: flex-start; */
      }

      img {
        grid-column: 2;
        grid-row: span 3;
        min-width: 25rem;
        max-width: 35vw;
      }
    }

    .scroll-indicator {
      position: absolute;
      bottom: 1.9rem;
      left: 2.5rem;
    }
  }

  #container-explore {
    position: relative;
    background-image: url("../assets/img/Desktop_BG-About.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 4rem 8%;
    margin-top: 6rem;
    height: 70vh;

    .explore {
      position: relative;
      display: flex;
      width: 100%;
      justify-content: space-between; /* Plaatst items zo ver mogelijk uit elkaar */
      align-items: center; /* Centreert items verticaal in de container */
      padding: 0; /* Verwijdert extra padding rondom de container */

      .explore__text-container {
        flex: 0 0 auto; /* Zorgt dat de tekstcontainer alleen zoveel ruimte inneemt als nodig */
        text-align: left; /* Zorgt dat de tekst links uitlijnt */
      }

      img {
        flex: 0 0 auto; /* Zorgt dat de afbeelding alleen zoveel ruimte inneemt als nodig */
        max-width: 40%; /* Limiteert de breedte van de afbeelding */
        height: auto; /* Behoudt de originele verhoudingen van de afbeelding */
      }
    }

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

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

  .top-content {
    padding: 12rem 8% 4rem 8%;
    background-size: 20%;

    .container {
      .content-list {
        .items.active {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          grid-template-rows: auto;
          gap: 1rem;

          .item img {
            height: 15rem;
            width: 15rem;
            max-width: initial;
          }
        }
      }
    }
  }

  .index-country.ar .features {
    align-items: flex-end !important;

    .features__heading {
      padding-left: 0;
      padding-right: 8%;
    }
  }

  .features {
    padding: 4rem 8%;
    position: relative;

    .features__heading {
      padding-left: 0%;
    }
  }

  .cta-join {
    padding: 8rem 8%;

    &::before {
      display: none;
    }

    .cta-wrapper {
      width: 100%;
      background-image: url("../assets/img/Desktop_JoinNow.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      flex-direction: row; /* Zet de items naast elkaar */
      justify-content: center; /* Horizontaal centreren */
      align-items: center; /* Verticaal centreren */
      text-align: left; /* Zet de tekst links uitgelijnd */
      gap: 5rem;

      .cta-join__text-container {
        text-align: left; /* Tekst links uitlijnen */
        flex: 7;
      }

      .cta-join__links {
        text-align: center; /* Knoppen gecentreerd */
        flex: 3;
      }
    }

    .cta-join__heading,
    .cta-join__text,
    .cta-join__links {
      z-index: 2;
    }

    img.asset-desktop {
      display: inline;
      position: absolute;
      width: 25rem;
      max-width: initial;
      left: -5rem;
      bottom: -0.1rem;
      z-index: 1;
    }
  }

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

  .reviews {
    justify-content: center;
    max-width: initial;
    position: relative;
    padding: 4rem 8% 12rem 8%;

    .reviews__text-container {
      display: flex;
      gap: 1rem;
      flex-direction: column;

      .reviews__text {
        font-size: 18px;
        max-width: 50rem;
      }
    }

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

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

  .faq {
    padding: 4rem 8%;

    .faq__text-container {
      display: flex;
      gap: 1rem;
      flex-direction: column;
      width: 100%;

      .faq__text {
        font-size: 18px;
        max-width: 50rem;
      }
    }

    &::before,
    &::after {
      width: 7rem;
      height: 10rem;
    }

    .container {
      /* width: 100%; */
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-bottom: 5rem;
    }
  }

  .contact {
    position: relative;
    padding: 4rem 8%;

    /* &::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            transform:scaleX(1);
            background-size: 15rem;
            background-position: 100% 50%;
        } */

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

      .contact__text {
        font-size: 18px;
        max-width: 50rem;
      }
    }

    .contact__intro,
    .contact__details {
      align-self: center;
    }

    .contact__details {
      margin: 0;
    }

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

      .contact__details-container {
        display: grid;
        gap: 0 3rem;
        grid-column: 1 / span 2;
        grid-row: 1;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        border-bottom: solid 2px var(--mainColor);
        margin-bottom: 2rem;
        gap: 3rem;

        fieldset:nth-of-type(1) {
          grid-column: 1;
          grid-row: 1;
        }

        fieldset:nth-of-type(2) {
          grid-column: 2;
          grid-row: 1;
        }
      }

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

        a {
          color: #fff;
        }
      }

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

  /* form AR */

  body.ar form {
    .contact__details-container {
      display: grid;
      gap: 0 3rem;
      grid-column: 1 / span 2;
      grid-row: 1;

      fieldset:nth-of-type(1) {
        grid-column: 2;
        grid-row: 1;
      }

      fieldset:nth-of-type(2) {
        grid-column: 1;
        grid-row: 1;
      }
    }

    fieldset {
      &:nth-of-type(2) {
        grid-column: 2;
        grid-row: 2;
      }

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

      &:last-of-type {
        grid-column: 1;
        grid-row: 3 / span 2;
      }
    }

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

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

  .impressum,
  .widerrufsrecht,
  .privacy,
  .terms {
    .hero-privacy,
    .hero-terms {
      background-color: var(--mainColor);
    }

    .privacy-subject:first-of-type {
      margin-top: 5rem;
    }

    .privacy-subject:last-of-type {
      margin-bottom: 5rem;
    }

    .privacy-subject,
    .terms-subject {
      padding: 2rem 8%;
      width: 100%;
      max-width: none;
      margin: 0 auto;
    }
  }

  .footer__container {
    position: relative;
    padding: 0rem 8%;

    .footer__content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto auto auto; /* Add a row for the button */
      gap: 2rem; /* Adjust spacing between grid items */
      width: 100%;

      .footer-img {
        max-width: 13.25rem !important;
        grid-column: 2;
        grid-row: 1;
        justify-self: right;
      }

      .footer-region-btn {
        display: flex !important;
        grid-column: 2;
        grid-row: 2;
        justify-self: right;
        margin-top: 1rem;
        background-color: var(--mainColor);
        color: var(--textPrimary);
        padding: 0.5rem 1.5rem;
        font-size: var(--sizeTextRegular);
        border: none;
        cursor: pointer;
        align-items: center;
        transition: background-color 0.3s ease;
      }

      .footer-region-btn::before {
        content: url("../assets/img/icons/language-icon.svg");
        margin-right: 0.5rem;
      }

      .footer-region-btn::after {
        content: "⯆";
        margin-left: 0.5rem;
      }

      .footer-links {
        grid-column: 1; /* Keep the links on the left */
        grid-row: 1; /* Keep the links in the first row */
      }

      .footer-rights {
        grid-column: 1 / span 2; /* Span both columns at the bottom */
        grid-row: 4; /* Place in the last row */
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}

@media screen and (min-width: 1000px) {
  .index-country.ar .features {
    align-items: flex-end !important;

    .features__heading {
      padding-left: 0;
      padding-right: 8%;
    }
  }

  .features {
    padding: 4rem 0;
    position: relative;

    .features__heading {
      padding-left: 8%;
    }

    .features-list {
      display: grid;
      grid-template-columns: repeat(5, minmax(10rem, 1fr));
      grid-template-rows: auto;
      align-items: stretch;
      gap: 0 1.5rem;
      width: 100%;
      margin: 0 auto;
      padding: 0;
      box-sizing: border-box;
      max-width: none !important;

      .features-list__item {
        width: 100%;
        height: 400px;
        background-size: cover;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;

        .features-list__content {
          position: relative;
          width: 100%;
          padding: 2rem 1rem;
          text-align: center;

          .features-list__item h3,
          .features-list__item p {
            margin: 0 auto; /* Tekst centreren */
            max-width: 80%; /* Optionele beperking voor tekstbreedte */
          }
        }
      }
    }
  }
}

@media screen and (min-width: 1200px) {
  .hero-container {
    .cta {
      border-radius: 14px;
      align-self: initial;

      select {
        width: 75%;
        margin: 1.5rem 0;
      }

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

    h1 {
      font-size: 3.5rem;
      max-width: 40rem;
      text-align: left;
    }
  }

  #container-explore {
    padding: 10rem auto;
  }

  .top-content {
    .top-content__text {
      margin-bottom: 3rem;
    }

    .carousel {
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: auto;
      gap: 2rem 1.5rem; /* Example of additional customization */
    }
  }

  .reviews {
    &::before,
    &::after {
      max-width: 12rem;
    }
  }

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

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-repeat: no-repeat;
      z-index: 1; /* Place them behind the content */
      /* opacity: 0.15; Set the desired opacity */
      pointer-events: none; /* Ensure they don't interfere with clicks */
      background-position: 75% 20rem, 100% 20%, 100% 50%, 0% 80%, 100% 90%;
      background-size: 12rem 12rem, 15rem 15rem, 12rem 12rem, 15rem 15rem,
        12rem 12rem;
    }
  }

  .terms.ar,
  .privacy.ar {
    &::before {
      background-position: 20% 24rem, 100% 20%, 100% 50%, 0% 80%, 100% 90%;
    }
  }
}