/* Import Fonts */
/* Source Sans 3  and Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

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

/*  
======================== 
MARK: == Variables
======================== 
*/
:root {
/* Custom Variables */
    /* Colors */
    --mainColor: #0DBBE0; /* Gogogy mainBlueColor */
    --supplementColorOne: #33DDF0; /* Gogogy lightBlueColor */
    --supplementColorTwo: #1293CC; /* Gogogy darkBlue */
    --supplementColorTwoDarker: #096187; /* Gogogy darkBlue */
    --supplementColorThree: rgb(132,231,242); /* Gogogy lightBlueBG on 15% opacity*/
    --supplementColorThreeOpacity: rgba(132,231,242, 0.15); /* Gogogy lightBlueBG on 15% opacity*/
    --headingColor: #08445E; /* Gogogy headingColor */
    --footerPrimary: #FFFFFF; /* Gogogy footerPrimary */
    --footerSecondary: #F9F9F9; /* Gogogy footerSecondary */
    --headerPrimary: #FFFFFF; /*  Gogogy headerPrimary */
    --textPrimary: #08445E; /*  Gogogy textPrimary */
    --textSecondary: #FFFFFF; /*  Gogogy textPrimary */
    --footerBG: #08445E; /* Gogogy footerBG */
    --headerBG: #ffffff; /* Gogogy headerBG */
    --lightGrey: #CCCCCC; /* Footer Links Secondary */
    --errorColor: #d24545; /* Error Message Color */
    --successColor: #45d24c; /* Error Message Color */
    --errorColorMessage: #d24545; /* Error Message Color */

/* Fonts */
    --fontHeading: "Source Sans 3", sans-serif;
    --fontHeadingAlt: "Inter", sans-serif;
    --fontText: "Source Sans 3", sans-serif;
    --fontTextAlt: "Inter", 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;
}

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

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

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

img {
    max-width: 10rem;
}

ul {
    list-style: none;
}

a {
    color: #000;
    text-decoration: none;
    font-family: var(--fontText);
}

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

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 .cta-join__text {
    text-align: right;
}

/* ====== */

/*  
======================== 
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;
        transition: background-color 0.2s ease-in-out;
    
        img {
            max-width: 4.5rem;
            grid-column: 3;
            justify-self: center;
        }
    
        .menu-btn {
            grid-column: 4 / span 2;
            justify-self: right;
            margin: 0 2rem 0 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 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: #fff;
                position: relative;
                transition: background-color 0.2s ease-in-out;
            }
        }

        .menu-btn.active {

            position: absolute;
            top: 10px;

            .menu-btn__stripe {
                z-index: 9999;

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

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

                &:nth-child(3) {
                    transform: rotate(-45deg);
                    top: -0.45rem;
                    background-color: var(--mainColor);
                }
            }
        }
    
        .nav-container {
            width: 100vw;
            height: 100vh;
            position: absolute;
            z-index: 8888;
            top: 0;
            display: none;
            flex-direction: column;
            justify-content: center;
            background-color: #fff;
            color: #000;
            gap: 3rem;
    
            .nav-list {
                order: 2;
                font-family: var(--fontHeadingAlt);
                font-weight: bold;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 1.5rem;
                position: relative;
                bottom: 8rem;
    
                a {
                    font-size: 1.25em;
                    color: var(--headingColor);

                    &:hover {
                        color: var(--supplementColorTwoDarker);
                        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 {
                    align-self: flex-end;
                    width: 2.5rem;
                    height: 1.5rem;
                    background: url("../assets/img/flags/netherlands.svg");
                    background-size: cover;
                    background-position: center;
                    border: none;
                    margin: 0.5rem 1.8rem;
                    position: relative;
                    cursor: pointer;

                    &::after {
                        content: url("../assets/img/globe.png");
                        position: relative;
                        object-fit: cover;
                        left: 2.5rem;
                        top: 0;
                    }
                }

                &:has(.country-selection__wrapper.active) {
                    .country-selection__btn {
                        background: initial;
                        height: 2.5rem;
                        position: absolute;
                        right: 0;
                        top: 0;

                        &::after {
                            top: 0.05rem;
                            left: -2rem;
                            content: url("../assets/img/icons/menu-close.svg");
                        }
                    }

                    .nav-list {
                        display: none;
                    }
    
                    .country-selection {
                        position: absolute;
                        bottom: 5rem;
                    }
                }

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

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

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

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

                    .country-selection__list.eu li {
                        &.country-selection__item:nth-of-type(2)::before {
                            background-image: url("../assets/img/flags/bosnia-and-herzegovina.svg");

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

                        }
                        /* &.country-selection__item:nth-of-type(4)::before {
                            background-image: url("../assets/img/flags/czech-republic.svg");

                        }
                        &.country-selection__item:nth-of-type(5)::before {
                            background-image: url("../assets/img/flags/switzerland.svg");

                        } */
                    }

                    .country-selection__list.mideast-af li {
                        &.country-selection__item:nth-of-type(2)::before {
                            background-image: url("../assets/img/flags/south-africa.svg");
                        }
                        &.country-selection__item:nth-of-type(3)::before {
                            background-image: url("../assets/img/flags/united-arab-emirates.svg");

                        }
                        /* &.country-selection__item:nth-of-type(4)::before {
                            background-image: url("../assets/img/flags/qatar.svg");

                        } */
                    }
                }
                
                .country-selection__wrapper.active {
                    display: flex;
                    flex-direction: column;
                    margin: 0;
                    gap: 1rem;
                    background-color: #fff;
                    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) {
                .nav-list {
                    display: none;
                }

                .country-selection {
                    bottom: 5rem;
                }
            }

            &.active {
                display: flex;
            }
        }

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

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

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

.privacy header,
.terms header {
    .header-container {
        background-color: #fff;

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

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

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

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

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

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

/* ====== */

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

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

.explore h2,
.explore p,
.top-content h2,
.top-content p,
.features h2,
.features p,
.cta-join h2,
.cta-join p,
.reviews h2,
.reviews p,
.faq h2,
.faq p,
.contact h2,
.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;
    background-image: 
        linear-gradient( 
                #ffffff00 0%, 
                #ffffff00 80%, 
                #ffffff 100%
                ),
        url("../assets/img/bg-overlay_hero.png"),
        linear-gradient( 
            #00000000 0%, 
            #00000000 60%, 
            #091441 70%
            ),
        url("../assets/img/bg_hero_root.jpg");
    background-size: 
        190%,
        40rem,
        190%,
        40rem;
    background-position:
        0% 0%, 
        0% 8rem,
        0% 0%, 
        65% 0%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;


    h1 {
        font-family: var(--fontHeading);
        color: var(--headerPrimary);
        font-weight: var(--fontSemiBold);
        line-height: var(--lineheight-125);
        /* max-width: 60vw; */
        max-width: 75vw;
        margin: 0 0 2.5rem 0;
        font-size: 2em;

    }

    .cta {
        background-color: var(--headerPrimary);
        width: 100%;
        min-height: 10rem;
        padding: 1rem;
        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(--headingColor);

            &:first-child {
                font-size: var(--sizeTextSmall);
            }

            &:nth-child(2) {
                font-size: var(--sizeTextLarge);
                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: 1px solid #08445e81;
            border-radius: 4px;
            padding: 0.5rem;
            margin: 1rem 0;
            font-size: var(--sizeTextRegular);
            text-align-last: center;
            background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="16" height="16"><path d="M11.5 8L6.5 3v10l5-5z"/></svg>');
            background-repeat: no-repeat;
            background-position: 0.5rem center; /* Position the arrow on the left */

            &.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="currentColor" width="16" height="16"><path d="M8 4.5L3 9.5h10L8 4.5z"/></svg>');
            }

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

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

        button {
            cursor: pointer;
            background-color: var(--supplementColorTwo);
            color: var(--textSecondary);
            border-radius: 0 0 8px 8px;
            border: none;
            width: 100%;
            padding: 0.5rem;
            position: absolute;
            left: 0;
            bottom: 0;
            font-weight: var(--fontSemiBold);
            font-size: var(--sizeHeading6);

            &:hover {
                background-color: var(--supplementColorTwoDarker);
            }
        }
        
        .pricepoint {
            margin: 0 auto 2rem;
            align-items: center;
            font-size: var(--sizeTextRegular);
            color: var(--textPrimary);
            opacity: 0.7;
            
        }
    }

    .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 {
    background-image: 
    linear-gradient( 
            #ffffff00 0%, 
            #ffffff00 80%, 
            #ffffff 100%
            ),
    url("../assets/img/bg-overlay_hero.png"),
    linear-gradient( 
        #00000000 0%, 
        #00000000 60%, 
        #091441 70%
        ),
    url("../assets/img/bg_hero_root.jpg");
    background-size: 
        190%,
        40rem,
        190%,
        40rem;
    background-position:
        0% 0%, 
        0% 8rem,
        0% 0%, 
        65% 0%;

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

        a.cta__text {
            background-color: var(--supplementColorTwo);
            color: var(--headerPrimary);
            width: 100%;
            text-align: center;
            margin: 0 0 0.5rem 0;
            padding: 0.5rem 0;
            font-size: var(--sizeHeading6);
            font-weight: var(--fontSemiBold);
            border-radius: 4px;

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

        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);
                }
            }
        }
    }
    .pricepoint {
        order: 4;
        text-align: center;
    }
}

.index-country.ba .hero-container {
    background-image: 
    linear-gradient( 
            #ffffff00 0%, 
            #ffffff00 80%, 
            #ffffff 100%
            ),
            url("../assets/img/bg-overlay_hero.png"),
            linear-gradient( 
                #00000000 0%, 
                #00000000 60%, 
                #091441 70%
                ),
            url("../assets/img/bg_hero_ba.jpg");
}

.index-country.ch .hero-container {
    background-image: 
    linear-gradient( 
            #ffffff00 0%, 
            #ffffff00 80%, 
            #ffffff 100%
            ),
        url("../assets/img/bg-overlay_hero.png"),
        linear-gradient( 
            #00000000 0%, 
            #00000000 60%, 
            #091441 70%
            ),
        url("../assets/img/bg_hero_ch.jpg");
}

.index-country.cz .hero-container {
    background-image: 
    linear-gradient( 
            #ffffff00 0%, 
            #ffffff00 80%, 
            #ffffff 100%
            ),
        url("../assets/img/bg-overlay_hero.png"),
        linear-gradient( 
            #00000000 0%, 
            #00000000 60%, 
            #091441 70%
            ),
        url("../assets/img/bg_hero_cz.jpg");
}

.index-country.nl .hero-container {
    background-image: 
    linear-gradient( 
            #ffffff00 0%, 
            #ffffff00 80%, 
            #ffffff 100%
            ),
        url("../assets/img/bg-overlay_hero.png"),
        linear-gradient( 
            #00000000 0%, 
            #00000000 60%, 
            #091441 70%
            ),
        url("../assets/img/bg_hero_nl.jpg");
}

.index-country.qa .hero-container {
    background-image: 
    linear-gradient( 
            #ffffff00 0%, 
            #ffffff00 80%, 
            #ffffff 100%
            ),
        url("../assets/img/bg-overlay_hero.png"),
        linear-gradient( 
            #00000000 0%, 
            #00000000 60%, 
            #091441 70%
            ),
        url("../assets/img/bg_hero_qa.jpg");
}

.index-country.uae .hero-container {
    background-image: 
    linear-gradient( 
            #ffffff00 0%, 
            #ffffff00 80%, 
            #ffffff 100%
            ),
        url("../assets/img/bg-overlay_hero.png"),
        linear-gradient( 
            #00000000 0%, 
            #00000000 60%, 
            #091441 70%
            ),
        url("../assets/img/bg_hero_uae.jpg");
}

.index-country.za .hero-container {
    background-image: 
    linear-gradient( 
            #ffffff00 0%, 
            #ffffff00 80%, 
            #ffffff 100%
            ),
        url("../assets/img/bg-overlay_hero.png"),
        linear-gradient( 
            #00000000 0%, 
            #00000000 60%, 
            #091441 70%
            ),
        url("../assets/img/bg_hero_za.jpg");
}

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

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

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

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

.hero-privacy,
.hero-terms {
    min-height: 20rem;
    background-image: url("../assets/img/hero-overlay.jpg");
    background-position: 0% 0%;
    background-size: 40rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;  
    padding: 2rem 1rem;

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

    h2 {
        font-weight: normal;
    }
}

.breadcrumb {
    margin: 1rem 0;

    a {
        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(--supplementColorTwo);
        }
    }
}


/* ====== */
/* === Explore === */
/* ====== */
.explore,
.cta-join {
    margin: 7rem 0 0 0;
    background-color: var(--supplementColorThreeOpacity);
    clip-path: polygon(0% 10%, 0% 100%, 100% 90%, 100% 0%);
    height: 40rem;

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

.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;
    position: relative;
    bottom: 5rem;

    .explore__img {        
        margin: 2rem 0 4rem 0;
        /* width: 40vw; */
        max-width: 16rem;
    }
}

/* ====== */
/* === Top Content === */
/* ====== */
.bg-top-content {
    position: absolute;
    z-index: -1;
    background-color: var(--supplementColorThreeOpacity);
    clip-path: polygon(0% 10%, 0% 99%, 100% 90%, 100% 1%);
    height: 95rem;
    width: 100%;
}

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


.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 20s linear infinite;

        .carousel__item {
            background-color: #f14040;
            background-image: 
                linear-gradient(to top, #000 30%, #00000000),
                url("../assets/img/top-content_1.jpg");
            background-size: cover;
            flex-direction: column;
            flex: 0 0 70vw;
            height: 18rem;
            border-radius: 20px;
            padding: 2rem 1rem;
            color: #fff;
            justify-content: flex-end;
    
            &:nth-of-type(1) {
                background-image: 
                    linear-gradient(to top, #000 30%, #00000000),
                    url("../assets/img/top-content_1.jpg");
            }
            &:nth-of-type(2) {
                background-image: 
                    linear-gradient(to top, #000 30%, #00000000),
                    url("../assets/img/top-content_3.jpg");
            }
            &:nth-of-type(3) {
                background-image: 
                    linear-gradient(to top, #000 30%, #00000000),
                    url("../assets/img/top-content_2.jpg");
            }
            &:nth-of-type(4) {
                background-image: 
                    linear-gradient(to top, #000 30%, #00000000),
                    url("../assets/img/top-content_4.jpg");
            }
    
            &:first-of-type {
                margin-left: 1rem;
            }
            &:last-of-type {
                margin-right: 1rem;
            }
    
    
            h3 {
                font-size: var(--sizeHeading3);
                font-weight: normal;
                line-height: var(--lineheight-125);
            }
    
            p {
                margin: 0;
            }
        }
    }


    /* === List === */
    .content-list {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, 9rem);
        gap: 1.8rem;
        width: 90%;
        margin: 0 auto;

        .content-list__item {
            color: #fff;
            padding: 1.5rem 10%;
            background-image: 
                linear-gradient(#00000093,#000000b0),
                url("../assets/img/top-content_3.jpg");
            background-size: 100%;
            background-position: 10% 50%;
            border-radius: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-family: var(--fontHeading);
            font-size: var(--sizeHeading2);
            font-weight: bold;

            &:nth-of-type(2) {
                background-image: 
                    linear-gradient(#00000093,#000000b0),
                    url("../assets/img/top-content_list_1.jpg");
            }
            &:nth-of-type(3) {
                background-image: 
                    linear-gradient(#00000093,#000000b0),
                    url("../assets/img/top-content_list_2.jpg");
                background-size: 80%;
                background-position: 55% -0.5rem; 
            }
            &:nth-of-type(4) {
                background-image: 
                    linear-gradient(#00000093,#000000b0),
                    url("../assets/img/top-content_list_3.jpg");
                background-size: 80%;
                background-position: 55% -13rem;
            }
            &:nth-of-type(5) {
                background-image: 
                    linear-gradient(#00000093,#000000b0),
                    url("../assets/img/top-content_list_4.jpg");
            }
            &:nth-of-type(6) {
                background-image: 
                    linear-gradient(#00000093,#000000b0),
                    url("../assets/img/top-content_list_5.jpg");
            }
        }
    }
}


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

.features {

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

    .features__heading {
        margin: 5rem 0 3rem 0;
    }

    .features-list {
        gap: 5rem;

        .features-list__item {
            gap: 0.5rem;
        }

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

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

.cta-join {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

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

    .cta-join__btn--primary {
        width: calc(100% - 2rem);
        max-width: 30rem;
        text-align: center;
        padding: 0.75rem;
        background-color: var(--supplementColorTwo);
        color: var(--headerPrimary);
        border-radius: 4px;
        margin: 2.5rem 0 1rem 0;

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

    .cta-join__btn--secondary {
        margin: 0 0 0 1rem;
        text-decoration: underline;
        text-underline-offset: 4px;

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

}

/* ====== */

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

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

    .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.4rem;
        width: 100%;
        max-width: 50rem;
        

        .questions {
            width: 100%;
            
            /* buttons */
            .accordion {
                cursor: pointer;
                width: 100%;
                padding: 0.5rem 1rem;
                background-color: var(--supplementColorTwo);
                color: var(--headerPrimary);
                border: none;
                border-radius: 4px;
                font-family: var(--fontText);
                font-weight: var(--fontBold);
                text-align: left;

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

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

                &::before {
                    content: "+";
                    color: var(--headerPrimary);
                    float: right;
                    font-size: var(--sizeTextLarge);
                    margin: 0 0 0 0.2rem;
                }
            
                &.open::before {
                    content: "-";
                    margin: 0 0.1rem 0 0.2rem;
                }
            }
        
            /* .questions:has(.accordion.open) {
                background-color: var(--fifthColor);
            } */
        }
    
        /* text */
        .text-panel {
            display: none;
            overflow: hidden;
        }
    
        .text-panel p {
            margin: 1rem 1rem 1rem 1rem;
        }
        .text-panel a{
            text-decoration: underline;
        }
    }
}

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

.bg-reviews {
    position: absolute;
    z-index: -1;
    background-color: var(--supplementColorThreeOpacity);
    clip-path: polygon(0% 10%, 0% 99%, 100% 90%, 100% 1%);
    height: 38rem;
    width: 100%;
}


@keyframes scroll {
    0%, 16.67% {
      transform: translateX(0);
    }
    20%, 36.67% {
      transform: translateX(calc(-100% - 2rem));
    }
    40%, 56.67% {
      transform: translateX(calc(-200% - 4rem));
    }
    60%, 76.67% {
      transform: translateX(calc(-300% - 6rem));
    }
    80%, 96.67% {
      transform: translateX(calc(-400% - 8rem));
    }
    100% {
      transform: translateX(calc(-400% - 8rem));
    }
  }

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

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

    .reviews__text {
        max-width: 20rem;
    }

    .quotes-container {
        display: flex;
        flex-direction: column;  
        width: 90%;
        margin: 2rem auto;      


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

            .quote {
                min-width: 100%;
                display: flex;
                animation: scroll 30s linear infinite;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                margin: 0 0 2rem 0;
    
                .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(--sizeHeading5);
                    }
                }
    
                .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.three {
                    .rating__star--quote:nth-of-type(4),
                    .rating__star--quote:nth-of-type(5) {
                        background-image: url("../assets/img/star_empty.svg");
                    }
                }
            }
        }

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

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

            .quote-indicator__item.active {
                background-color: var(--headingColor);
            }
        }
    }

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

        .general-rating__text {
            color: var(--headingColor);
            font-size: var(--sizeTextRegular);
            font-weight: var(--fontBold);
        }

        .rating {
            display: flex;
            align-items: center;
            gap: 0.1rem;

            .rating__number {
                color: var(--headingColor);
                font-size: 2rem;
                margin: 0 0.5rem 0 0;
            }
            .rating__star--general:nth-of-type(5) {
                background-image: url("../assets/img/star_empty.svg");
            }

        }
    }
}

/* ====== */
/* === 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;
            
            p {
                margin: 0 0 0.5rem 0;
                font-weight: bold;
                font-size: var(--sizeTextLarge);
                color: var(--headingColor);
            }

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

    form {
        margin: 2rem 2rem 5rem;

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

            input, 
            textarea,
            select {
                width: 100%;
                border-radius: 4px;
                border-color: var(--headingColor);
                border-width: 1px;
                border-style: solid;
                padding: 0.6rem 0.8rem;
                font-family: var(--fontText);
            }

            textarea {
                min-height: 6rem;
                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 {
                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);
                font-weight: bold;
                color: var(--headingColor);
                margin: 0 0 0.25rem 0;
            }

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

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

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

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


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

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

    .footer__content {
        padding: 2rem 1rem 1rem 1rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 0.35fr;
        gap: 5rem;
    
        a,
        p {
            color: var(--footerPrimary);
        }
    
        .footer-links {
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
    
            .footer-links__item a {
                text-decoration: underline;
                text-underline-offset: 0.4rem;
                font-size: var(--sizeTextRegular);

                &:hover {
                    color: var(--supplementColorOne);
                }
            }
        }
    
        .footer-img {
            max-width: 6.25rem;
            justify-self: end;
        }
    
        .footer-rights {
            display: flex;
            grid-column: 1 / -1;
            display: flex;
            justify-content: space-between;
    
            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;
        }

        .footer-img {
            grid-column: 2;
            grid-row: 1;
        }
    }
}
/* ====== */

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

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

.terms, 
.privacy {

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

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

        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: 1dvi 0;
            padding: 0 1rem;

            li {
                margin: 0.5rem 0;
            }
        }
    }

    .table-of-content {

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

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

                a {
                    text-decoration: underline;
                    
                    &:hover {
                        color: var(--supplementColorTwo);
                    }
                }
            }
        }
    }

    .privacy-subject,
    .table-of-content {
        position: relative;

        .scroll-indicator__point {
            position: sticky;
            /* right: -1.5rem; */
            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: calc(100% + 2rem);
            display: inline-block;
            position: absolute;
            background-color: var(--headingColor);
            left: -1.3rem;
            top: 5rem;
        }
    }
}

/* 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: == Mediaqueries
======================== 
*/

@media screen and (min-width: 400px) {

    .explore,
    .cta-join {
        height: 30rem;

        .heading {
            margin: 0 0 1rem 0;
        }
    }
    .explore__img {
        bottom: -8rem;
        max-width: 15rem;
    }
    

    .reviews {
        .reviews__text {
            margin: 0 auto;
        }
    }

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

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

}

@media screen and (min-width: 510px) {
    
    .explore {
        
        .explore__text {
            max-width: 30rem;
        }
    }


    .top-content {    
        /* === Carousel === */
    
        .carousel {    
            animation: scrollCarousel 20s linear infinite;


            .carousel__item {
                flex: 0 0 20rem;
                height: 18rem;
                border-radius: 20px;
                padding: 2rem 1rem;
                color: #fff;
                justify-content: flex-end;
            }
        }
    }

    /* .reviews {
        align-items: center;
        justify-content: center;
        margin: 5rem 2rem 10rem;

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

    } */

    .footer__container {
        .footer__content {
            padding: 2rem 10%;
            width: 100%;
        }
    }
}

@media screen and (min-width: 640px) {
    .hero-container {
        background-size: 
            100%;
        background-position:
            0% 0%, 
            0% 10rem,
            0% 0%, 
            65% 0%;
        .cta {
            max-width: 35rem;
        }

        h1 {
            max-width: 65vw;
            margin: 0 auto 2.5rem;
        }
        .pricepoint {
            margin: 0 auto 2rem;
            display: block;
        }
    }

    .index-country .hero-container {
        background-size: 
            70rem,
            100% 80%,
            190%;
        background-position:
            0% 0%, 
            0% 10rem,
            0% 0%, 
            30% 0%;
    }

    .bg-top-content {
        background-color: var(--supplementColorThreeOpacity);
        clip-path: polygon(0% 10%, 0% 99%, 100% 90%, 100% 1%);
        height: 60rem;
    }

    .top-content {
        .carousel {
            animation: scrollCarousel 20s linear infinite;
        }

            /* === List === */
        .content-list {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: repeat(3, 9rem);
            gap: 2%;
            margin: 0 2%;

            .content-list__item {
                font-size: var(--sizeHeading2);
                line-height: var(--lineheight-125);
                text-align: center;
                padding: 1em;

                &:nth-of-type(1) {
                    grid-row: 1 / span 2;
                    background-size: cover;
                    background-position: center;
                }
                /* &:nth-of-type(2) {
                    grid-row: 1 / span 2;
                } */
                &:nth-of-type(3) {
                    grid-row: 1 / span 2;
                    background-size: cover;
                    background-position: center;
                }
                &:nth-of-type(4) {
                    grid-row: 2 / span 2;
                    grid-column: 2;
                    background-size: cover;
                    background-position: center;
                }
                /* &:nth-of-type(5) {
                    grid-row: 1 / span 2;
                } */
                /* &:nth-of-type(6) {
                    grid-row: 1 / span 2;
                } */
            }
        }
    }

    .features {

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

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

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

                p {
                    max-width: 17rem;
                }

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

    .faq {

        .questions__container {
            .questions {
                
                /* buttons */
                .accordion {
                    font-size: var(--sizeTextLarge);
                }
            }
        
            /* text */
            .text-panel {
                display: none;
                overflow: hidden;
            }
        
            .text-panel p {
                margin: 1rem 1rem 1rem 3.2rem;
            }
        }
    }

    /* ====== */
    /* === 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: 30rem;
        }
    }
}

@media screen and (min-width: 800px) {

    header {
        .pricepoint {
            padding: 0.5rem 10%;
        }
   
        .header-container {
            padding: 1rem 4rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        
            img {
                max-width: 4.5rem;
                height: auto;
                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(--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(--textSecondary);
                        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 .country-selection__btn {
                    width: 1.5rem;
                    height: 0.9rem;
                    position: relative;
                    right: 0;

                    &::after {
                        left: 1.9rem;
                        top: -6px;
                    }
                }
    
                .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: 4.5rem;
                        width: 100vw;
                        height: calc(100vh - 4.5rem);
                        padding: 2rem 10% 1rem;

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

                        }

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

                            .country-selection__item {
                                margin: 0 0 1rem 0;
                            }
                        }
                    }
    
                    /* .country-selection__wrapper.active {

                    } */
                }

                &.active {
                    display: flex;
                }
            }

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

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

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

                    .lang-selection {
                
                        a {
                            color: var(--supplementColorTwo);
                            font-weight: var(--fontRegular);
        
                            &.active {
                                color: var(--headingColor);
                                font-weight: var(--fontBold);
                            }

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

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

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

                    .lang-selection {
                
                        a {
                            color: var(--supplementColorTwo);
                            font-weight: var(--fontRegular);
        
                            &.active {
                                color: var(--headingColor);
                                font-weight: var(--fontBold);
                            }

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

    .hero-container {
        height: 100vh;
        display: grid;
        grid-template-columns: 20rem 20rem;
        padding: 0 4rem;
        justify-content: space-between;
        align-items: center;

        background-image: 
            linear-gradient( 
                    #ffffff00 0%, 
                    #ffffff00 80%, 
                    #ffffff 100%
                    ),
            url("../assets/img/desktopBg-overlay_hero.png"),
            url("../assets/img/desktop_bg_hero_root.jpg");
        background-size: 
            100%,
            90% 100%,
            190%;
        background-position:
            0% 0%, 
            0% 0%,
            80% 10%;

        .cta {
            background-color: rgba(255, 255, 255, 0.85);
            max-width: 23rem;
    
            ul {
                background-color: var(--textSecondary);
            }

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

        .pricepoint {
            grid-column: 1;
            justify-self: left;
            margin: 0;
        }
    
        .scroll-indicator {
            position: absolute;
            bottom: 1.9rem;
            left: 2.5rem;
            color: var(--textSecondary);
    
            &::after {
                background-color: var(--textSecondary);
            }
        }

        h1 {
            max-width: 35vw;
            margin: 0 auto 2.5rem;
            font-size: 3em;
        }
    }

    .index-country .hero-container {
        height: 100vh;
        display: grid;
        grid-template-columns: 25rem;
        grid-template-rows: 20rem 10rem;
        align-content: center;
        padding: 0 4rem;
        justify-content: space-between;
        align-items: center;

        background-image: 
            linear-gradient( 
                    #ffffff00 0%, 
                    #ffffff00 80%, 
                    #ffffff 100%
                    ),
            url("../assets/img/desktopBg-overlay_hero.png"),
            url("../assets/img/bg_hero_nl.jpg");
        background-size: 
            100%,
            90% 100%,
            90rem;
        background-position:
            0% 0%, 
            0% 0%,
            80% 10%;

        .cta {
            max-width: 23rem;

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

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

        .pricepoint {
            grid-column: 1;
            /* justify-self: center; */
        }
    
        .scroll-indicator {
            position: absolute;
            bottom: 1.9rem;
            left: 2.5rem;
            color: var(--textSecondary);
    
            &::after {
                background-color: var(--textSecondary);
            }
        }

        h1 {
            max-width: 35vw;
            margin: 0 auto 2.5rem;
            font-size: 2.5em;
        }
    }

    .index-country.ba .hero-container {
        background-image: 
                linear-gradient( 
                        #ffffff00 0%, 
                        #ffffff00 80%, 
                        #ffffff 100%
                        ),
                url("../assets/img/desktopBg-overlay_hero.png"),
                url("../assets/img/bg_hero_ba.jpg");
    }
    
    .index-country.ch .hero-container {
        background-image: 
            linear-gradient( 
                #ffffff00 0%, 
                #ffffff00 80%, 
                #ffffff 100%
                ),
            url("../assets/img/desktopBg-overlay_hero.png"),
            url("../assets/img/bg_hero_ch.jpg");
    }
    
    .index-country.cz .hero-container {
        background-image: 
            linear-gradient( 
                #ffffff00 0%, 
                #ffffff00 80%, 
                #ffffff 100%
                ),
            url("../assets/img/desktopBg-overlay_hero.png"),
            url("../assets/img/bg_hero_cz.jpg");
    }
    
    .index-country.nl .hero-container {
        background-image: 
            linear-gradient( 
                #ffffff00 0%, 
                #ffffff00 80%, 
                #ffffff 100%
                ),
            url("../assets/img/desktopBg-overlay_hero.png"),
            url("../assets/img/bg_hero_nl.jpg");
    }
    
    .index-country.qa .hero-container {
        background-image: 
            linear-gradient( 
                #ffffff00 0%, 
                #ffffff00 80%, 
                #ffffff 100%
                ),
            url("../assets/img/desktopBg-overlay_hero.png"),
            url("../assets/img/bg_hero_qa.jpg");
    }
    
    .index-country.uae .hero-container {
        background-image: 
            linear-gradient( 
                #ffffff00 0%, 
                #ffffff00 80%, 
                #ffffff 100%
                ),
            url("../assets/img/desktopBg-overlay_hero.png"),
            url("../assets/img/bg_hero_uae.jpg");
    }
    
    .index-country.za .hero-container {
        background-image: 
            linear-gradient( 
                #ffffff00 0%, 
                #ffffff00 80%, 
                #ffffff 100%
                ),
            url("../assets/img/desktopBg-overlay_hero.png"),
            url("../assets/img/bg_hero_za.jpg");
    }


    #container-explore {
        margin: 10rem 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .explore {
            max-width: 70vw;
            margin: 0;
            
            .explore__text {
                max-width: 30rem;
                margin-left: 4rem;
            }   
        }

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

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

    .bg-top-content {
        background-color: var(--supplementColorThreeOpacity);
        clip-path: polygon(0% 10%, 0% 99%, 100% 90%, 100% 1%);
        height: 60rem;
    }

    .top-content {
            /* === List === */
        .content-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: repeat(3, 9rem);
            gap: 1.8rem;
        }
    }

    .features {

        .features-list {
            grid-template-columns: repeat(3, minmax(10rem, 25rem));
            gap: 4.5rem 1rem;
            margin: 5rem 0 0 0;

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

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

    .bg-reviews {
        background-color: var(--supplementColorThreeOpacity);
        clip-path: polygon(0% 10%, 0% 99%, 100% 90%, 100% 1%);
        width: 50%;
        height: 30rem;
        margin: 10rem 0;
    }

    .reviews {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, auto);
        margin: 5rem 5% 10rem;

        .reviews__text {
            grid-row-start: 2;
        }
    
        .quotes-container {
            grid-row: 1 / span 3;
            max-width: 20rem;
            justify-self: center;
        }
    
        .general-rating {
            grid-row-start: 3;
        }
    }



    .index-country .reviews {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(4, max-content);
        justify-items: center;
        margin: 18rem 5% 10rem;
    
        .quotes-container {
            max-width: 20rem;
            margin: 0;
            grid-row: 1 /span 2;
            grid-column: 2;
            position: relative;
            bottom: 0.75rem;
            justify-self: center;

        }

        .reviews__heading {
            grid-column: span 2;
            justify-self: start;
            margin: 0 6rem;
        }

        .reviews__text {
            grid-row: 2;
            margin:1rem 1rem 1rem 2.4rem;
            max-width: 25rem;
        }
        .general-rating {
            grid-row: 2;
            margin: 0 2rem;
            max-width: 20rem;
        }

        /* .quotes_container {
            grid-row: 2 /span 2;
        } */

    }

    .privacy, 
    .terms {
        header {
    
            .header-container {

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

                    .nav-list {

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

@media screen and (min-width: 1200px) {

    header {
        .header-container {
            padding: 1rem 8rem;
        }
    
    }

    .hero-container {
        padding: 0 10%;

        background-size: 
            100%,
            90% 100%,
            140%;
        background-position:
            0% 0%, 
            0% 0%,
            100% 10%;

        h1 {
            max-width: 40vw;
            margin: 0 auto 2.5rem;
            font-size: 5em;
        }
    }

    .index-country .hero-container {
        padding: 0 7%;
        gap: 5rem 0;
        align-content: center;
        grid-template-columns: 35rem;

        background-size: 
            100%,
            90% 100%,
            cover;
        background-position:
            0% 0%, 
            0% 0%,
            100% 0%;

        h1 {
            max-width: 50rem;
            line-height: 100%;
            margin: 8rem auto 2.5rem;
            font-size: 4em;
        }
    }
    
    #container-explore {
        .explore {
            padding: 12rem;
        }

        .explore-img__container {
            margin: 0 10rem 0 0;
            max-width: 25rem;

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

    .bg-top-content {
        height: 85rem;
    }

    .top-content {
        .content-list {
            max-width: 65rem;
            margin: 10rem auto;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: repeat(4, 9rem);
            gap: 1.8rem;

            .content-list__item {

                &:nth-of-type(1) {
                    grid-row: 1 / span 3;
                    grid-column: 1 / span 1;
                }
                &:nth-of-type(2) {
                    grid-column: 2 / span 2;
                }
                &:nth-of-type(3) {
                    grid-row: 2 / span 3;
                    grid-column: 2 / span 1;
                }
                &:nth-of-type(4) {
                    grid-row: 2 / span 2;
                    grid-column: 3;
                }
                &:nth-of-type(5) {
                    grid-row: 4;
                }
                &:nth-of-type(6) {
                    grid-row: 4;
                    grid-column: 1;
                }
            }
        }
    }

    .reviews,
    .index-country .reviews {
    
        .quotes-container {
            max-width: 30rem;
        }

    }

}

/* For iPhone 12 Pro/14 Pro and relevant sizes*/
@media (min-width: 390px) and (min-height: 844px) {
    
    .hero-container h1 {
        font-size: 3em;
    }
  }

/* For iPhone 14 Pro Max and relevant sizes*/
/* @media (min-width: 430px) and (min-height: 932px) {
    
   
} */

/* For Galaxy S20/S21 and relevant sizes*/
/* @media (min-width: 360px) and (min-height: 800px) {

   
} */