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

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

/*  
======================== 
MARK: == Variables
======================== 
*/
:root {
/* Custom Variables */
    /* Colors */
    --mainColor: #8415CC; 
    --mainColorDarker: #5f0e94; 
    --bgColor: #1E1E1E;

    --supplementColorOne: #FF8800;
    --supplementColorOneDarker: #cc6e02;
    --supplementColorTwo: #049DBF;
    --supplementColorThree: #D9D9D9;
    --supplementColorFour: #2c2c2c;

    --headingColor: #171616; 
    --headingColorLight: #FFFFFF; 

    --footerPrimary: #FFFFFF; 
    --footerSecondary: #F9F9F9; 
    --headerPrimary: #FFFFFF;
    --textPrimary: #171616; 
    --textSecondary: #FFFFFF; 
    --textPricePoint: #000000;

    --footerBG: #171616; 
    --headerBG: #100F0F; 
    --lightGrey: #FFFFFF;
    --errorColor: #d24545; 
    --successColor: #45d24c; 
    --errorColorMessage: #d24545; 

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

/* Sizing */
    --sizeTextSmall: 0.75rem;   /* 12px */
    --sizeTextRegular: 0.875rem; /* 14px */
    --sizeTextLarge: 1rem;   /* 16px */
    --sizeHeadingHero: 3.5rem; /* 56px */
    --sizeHeading1: 2.5rem;    /* 40px */
    --sizeHeading2: 2.25rem;    /* 36px */
    --sizeHeading3: 1.875rem;    /* 30px */
    --sizeHeading4: 1.5625rem;    /* 25px */
    --sizeHeading5: 1.4375rem;    /* 23px */
    --sizeHeading6: 1.25rem;    /* 20px */

/* Other */
/* weight */
    --fontExtraLight: 200; 
    --fontLight: 300; 
    --fontRegular: 400; 
    --fontMedium: 500; 
    --fontSemiBold: 600;
    --fontBold: 700; 
    --fontExtraBold: 800; 
    --fontBlack: 900;

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

    /* border radius */
    --border-radius-xs: 4px;
    --border-radius-s: 8px;
    --border-radius-m: 1rem;
    --border-radius-l: 2rem;
}


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

html {
    font-family: sans-serif;
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
    overflow-x: hidden;
}

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

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

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

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

img {
    max-width: 10rem;
}

ul {
    list-style: none;
}

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

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

/* Arabic Text Styling */
body.ar h1,
body.ar h2,
body.ar h3,
body.ar h4,
body.ar p, 
body.ar a,
body.ar 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;
}

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: 100vw;
    position: fixed;
    z-index: 999;

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

        span {
            text-align: right;
        }
    }

    .header-container {
        padding: 0.15rem 0;
        border-radius: var(--border-radius-l);
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        align-items: center;
        background-color: var(--bgColor); /* 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: var(--border-radius-l);
                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; 
                }

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

                &:nth-child(3) {
                    width: 100%;
                    transform: rotate(-45deg);
                    top: -0.45rem;
                }
            }
        }
    
        .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(--supplementColorFive);
            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;
                    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(--mainColor);   
                    }
                }
            }
    
            .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(--headingColorLight);
                    align-self: flex-end;
                    display: flex;
                    align-items: center;
                    border: none;
                    border-radius: var(--border-radius-l);
                    padding: 0.5rem 1.5rem;
                    margin: 0.5rem 1.8rem;
                    position: relative;
                    cursor: pointer;

                    &::before {
                        content: url("../assets/img/icons/language-icon.svg");

                        position: relative;
                        object-fit: cover;
                        left: -0.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(--headingColorLight);
                        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: var(--border-radius-xs);
                        }

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

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

                    /* 
                        MARK:: == Country Flags 
                     */
                     /* 
                        Finnish (FI)
                        Hungarian (HU)
                        Polish (PL)
                        Serbia Serbian cyrillic (RS)
                        Serbia Serbian alphabet (RS)
                        South Africa English (ZAF)
                     */
                    .country-selection__list.eu li {
                        /* Country 1 */
                        &.country-selection__item:nth-of-type(2)::before {
                            background-image: url("../assets/img/flags/finland.svg");
                        }
                        /* Country 2 */
                        &.country-selection__item:nth-of-type(3)::before {
                            background-image: url("../assets/img/flags/hungary.svg");
                        }
                        /* Country 3 */
                        &.country-selection__item:nth-of-type(4)::before {
                            background-image: url("../assets/img/flags/poland.svg");
                        }
                        /* Country 4 */
                        &.country-selection__item:nth-of-type(5)::before {
                            background-image: url("../assets/img/flags/serbia.svg");
                        }
                    }

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

                        }
                        /* Country 2 */
                        /* &.country-selection__item:nth-of-type(3)::before {
                            background-image: url("../assets/img/flags/united-arab-emirates.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;
                    }
                }
            }

            &:has(.country-selection__wrapper.active) {
                align-items: start;
                /* height: initial; */


                .nav-list {
                    display: none;
                }

                .country-selection {
                    bottom: 5rem;
                    min-width: calc(100vw - 4rem);
                    align-items: center;
                    justify-content: space-between;
                    gap: 8rem;


                    .country-selection__btn {
                        order: 2;
                        align-self: center;
                    }
                }
            }

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

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

        &:has(.nav-container.active) {
            width: 100%;
        }
    }

    &.scrolled {

        .header-container {
            border-radius: 0;
        }

        .pricepoint  {
            color: var(--textSecondary);
            background-color: var(--bgColor);
        }
    }
}

.privacy header,
.terms header {
    .header-container {
        padding: 0.15rem 0;
        margin: 1rem 0 0 0;

        .nav-container {
            .nav-list {
                a {
                    &:hover {
                        text-decoration: underline;
                        text-underline-offset: 4px;
                        text-decoration-color: var(--mainColor);
                    }
                }
            }

            .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 === */
/* ====== */

.heading {
    color: var(--headingColorLight);
    font-size: var(--sizeHeading3);
    font-weight: var(--fontBlack);
    display: flex;
    justify-content: flex-start;
    text-transform: uppercase;
    margin: 1.5rem 0;
    gap: 1.3rem;
}

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

.hero-container {
    height:100vh; 
    position: relative;
    margin: 0 0 7rem 0;
    background: 
    linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,1) 100%),
        url('../assets/img/background.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 1.5rem;

    h1 {
        text-align: center;
        font-family: var(--fontHeading);
        color: var(--headingColorLight);
        font-weight: var(--fontBlack);
        line-height: var(--lineheight-100);
        margin: 0 0 1.5rem 0;
        font-size: var(--sizeHeading2);
        max-width: 35rem;
    }

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

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

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

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

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

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

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

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

        button {
            cursor: pointer;
            background-color: var(--mainColor);
            color: var(--headingColorLight);
            border: none;
            border-radius: var(--border-radius-s);
            width: 100%;
            padding: 1rem;
            /* position: absolute;
            left: 0;
            bottom: 0; */
            font-weight: var(--fontSemiBold);
            font-size: var(--sizeTextLarge);
            text-transform: uppercase;

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

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

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

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

.index-country .hero-container {

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

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

        .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;
            margin: 0 0 0.5rem 0;
            padding: 1rem;
            border-radius: var(--border-radius-s);
            font-size: var(--sizeHeading6);
            font-weight: var(--fontSemiBold);

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

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

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

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

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

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

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


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

/* #container-explore {
    background-image: url('../assets/img/bg-asset-1.svg');
    background-repeat: no-repeat;
    background-size: 8rem;
    background-position: 100% 70%;
} */

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

    .explore__text > span {
        font-weight: var(--fontBold);
    }
}

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


    .explore__img {        
        margin: 5rem 0;
        width: 75vw;
        max-width: 25rem;
        position: relative;
        /* right: 5rem; */
    }

    &::before {
        content: url("../assets/img/square-asset-glow.svg");
        display: inline-block;
        position: absolute;
        left: -10rem;
        margin: 8rem 0 0 0;
        z-index: -1;
    }
}

.index-country .explore-img__container {
    &::before {
        content: url("../assets/img/square-asset-glow-2.svg");
    }
}

/* ====== */
/* === MARK: Top Content
/* === Top Content === */
/* ====== */

/* @keyframes scrollCarousel {
    0% {
        transform: translateX(0);
    }
    
    100% {
        transform: translateX(calc(-40% + 12rem));
    }
} */


.top-content {
    margin: 0 9%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    /* justify-items: center; */
    /* margin: 5rem 2rem 10rem; */

    /* === Carousel === */
    .carousel {
        display: flex;
        overflow-x: scroll;
        user-select: none;
        gap: 0 0.5rem;

        /* horizontal scrollbar styling */
        &::-webkit-scrollbar {
            height: 0.4rem;
            background-color: transparent;
        }
        &::-webkit-scrollbar-thumb {
            height: 0.4rem;
            border-radius: var(--border-radius-s);
            background-color: var(--mainColor);
        }
        /* === */

        .carousel__item {
            flex: 0 0 90%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 16rem;
            max-width: 12rem;
            border-radius: var(--border-radius-s);
            padding: 1rem;
            color: #fff;
            gap: 0.7rem 0;

    
            &:nth-of-type(1) {
                background: 
                    url("../assets/img/topcontent/IMG-Holder-1.jpg") no-repeat center center / cover;
            }
            &:nth-of-type(2) {
                background: 
                    url("../assets/img/topcontent/IMG-Holder-2.jpg") no-repeat center center / cover;
            }
            &:nth-of-type(3) {
                background: 
                    url("../assets/img/topcontent/IMG-Holder-3.jpg") no-repeat center center / cover;
            }
            &:nth-of-type(4) {
                background: 
                    url("../assets/img/topcontent/IMG-Holder-4.jpg") no-repeat center center / cover;
            }
            &:nth-of-type(5) {
                background: 
                    url("../assets/img/topcontent/IMG-Holder-5.jpg") no-repeat center center / cover;
            }
            &:nth-of-type(6) {
                background: 
                    url("../assets/img/topcontent/IMG-Holder-6.jpg") no-repeat center center / cover;
                }
    
    
            h3 {
                font-size: 1.2rem;
                font-weight: var(--fontBlack);
                line-height: var(--lineheight-125);
                margin: 0 0.75rem;
                padding: 0.3rem 1.15rem;
                max-width: 15rem;
                text-align: center;
                border-bottom: var(--supplementColorOne) solid 0.3rem;
            }

            /* p {
                margin: 0;
                font-size: 0.7rem;
                font-weight: var(--fontLight);

                &.tag {
                    font-size: 0.7rem;
                    font-weight: var(--fontMedium);
                    background-color: transparent;
                    border: 1px solid var(--mainColor);
                    padding: 0.1rem 1.5rem;
                    align-self: flex-start;
                }
            } */
        }
    }
}


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

.features {
    margin: 4rem 9%;

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

    /* .features__heading {
        margin: 4rem 0 3rem 0;
    } */

    .features-list {
        gap: 2rem;

        .features-list__item {
            align-items: center;
            gap: 0.5rem;
            background-color: rgba(255, 255, 255, 0.1);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            padding: 1.5rem 0;
            border-radius: var(--border-radius-m);
        }

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

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

.cta-join {
    position: relative;
    padding: 5rem 0;
    margin: 0 9%;

    /* &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: -8rem;
        transform: rotate(180deg);
        background-image: url("../assets/img/bg-asset-3.svg");
        background-repeat: no-repeat;
        z-index: -1;
    } */

    .cta-wrapper {
        background-color: var(--mainColor);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 5rem 2rem;
        border-radius: var(--border-radius-s);

        h2, p {
            color: var(--headingColorLight);
        }
    
        .cta-join__text {
            max-width: 24rem;
            font-size: var(--sizeTextRegular);
        }
    
        .cta-join__links {
            display: flex;
            flex-direction: column;
            
            p {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 0.3rem;
                margin: 0;
            }
    
            .cta-join__btn--secondary {
                color: var(--headingColorLight);
                text-decoration: underline;
                text-underline-offset: 2px;
                
                &:hover {
                    color: #fff;
                    font-weight: var(--fontSemiBold);
                }
            }
        }
    
        .cta-join__btn--primary {
            text-align: center;
            padding: 0.75rem 3rem;
            background-color: var(--supplementColorOne);
            color: var(--headerPrimary);
            font-weight: var(--fontBold);
            margin: 2.5rem auto 1rem;
            border-radius: var(--border-radius-s);
    
            &:hover {
                background-color: var(--supplementColorOneDarker);
            }
        }
    }
}
/* ====== */

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

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

    .text-wrapper {
        /* align-self: flex-start; */

        .faq__heading {
            margin: 0;
            /* align-self: flex-start; */
        }
    
        .faq__text {
            max-width: 40rem;
            margin: 1rem 0 0 0;
        }
    }

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

        .questions {
            width: 100%;
            
            /* buttons */
            .accordion {
                cursor: pointer;
                width: 100%;
                padding: 1rem 1rem;
                background-color: transparent;
                color: var(--headingColorLight);
                border: 1px solid var(--mainColor);
                border-radius: var(--border-radius-s);
                font-family: var(--fontText);
                font-weight: var(--fontMedium);
                text-align: left;

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

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

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

                &::before {
                    content: "+";
                    color: var(--mainColor);
                    float: right;
                    font-size: var(--sizeTextLarge);
                    margin: 0 0 0 0.2rem;
                }
            
                &.open::before {
                    content: "-";
                    color: var(--headingColorLight);
                    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;

            a {
                color: #FFFFFF;
                text-decoration: underline;
                font-weight: var(--fontSemiBold);
            }
        }
    }
}

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

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

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

    .reviews__text-container {
        width: 100%;
    }

    .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: 2rem; */
            display: flex;
            overflow: hidden; 
            user-select: none;
            /* Hides the overflow */

            .quote {
                min-width: 100%;
                display: flex;
                justify-content: center;
                /* animation: scroll 20s linear infinite; */
                padding: 2rem;
                border-radius: var(--border-radius-m);
    
                .quote__div {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap: 1rem;
                    margin: 2rem 0;
                    border: 2px solid var(--supplementColorTwo);
                    padding: 2rem;
                    border-radius: var(--border-radius-s);
                    max-width: 40rem;
    
    
                    .quote__start,
                    .quote__end {
                        width: 1rem;
                        height: 1rem;
                    }
    
                    .quote__start {
                        align-self: flex-start;
                    }
                    .quote__end {
                        align-self: flex-end;
                    }
            
                    .quote__text {
                        /* max-width: 20rem; */
                        text-align: center;
                        margin: 0 0.5rem;
                        font-size: var(--sizeTextRegular);
                        color: var(--headingColorLight);
                    }
                }
    
                .rating {
                    width: 100%;
                    padding: 0 0 0.5rem 0;
                    display: flex;
                    justify-content: center;
                    gap: 0.2rem;
    
                    .rating__star--quote {
                        width: 0.75rem;
                        height: 0.75rem;
                    }

                }

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

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

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

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

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

.contact {
    padding: 0 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
    position: relative;

    &::before {
        content: "";
        position: absolute;
        /* width: 100%; */
        height: 100%;
        top: 0;
        transform:scaleX(-1);
        background-image: url("../assets/img/bg-asset-4.svg");
        background-size: 10rem;
        background-position: 100% 100%;
        background-repeat: no-repeat;
        z-index: -1;
    }

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

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

        .contact__heading {
            text-align: lef;
            margin: 1rem 0;
        }

        .contact__text {
            max-width: 40rem;
            margin: 0;
        }
    }

    .contact__wrapper {
        margin: 2rem 0 5rem;
        width: 100%;
        border: 0.2rem solid var(--mainColor);
        border-radius: var(--border-radius-m);
        padding: 2rem 1.5rem;
    
        .contact__details {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
    
            .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 {
            width: 100%;
            display: grid;
            grid-template-columns: 1fr;
            gap: 0 3rem;
            /* max-width: 55rem; */
    
            fieldset {
                border: none;
                display: flex;
                flex-direction: column;
                margin: 0 0 1rem 0;
    
                input, 
                textarea,
                select {
                    width: 100%;
                    border: none;
                    border-radius: var(--border-radius-s);
                    margin: 0.5rem 0 0 0;
                    padding: 0.9rem 0.8rem;
                    font-family: var(--fontText);
                }
    
                select {
                    color: var(--headingColor)!important;
                }
                select option {
                    color: var(--headingColor);
                }
    
                textarea {
                    min-height: 12rem;
                    resize: none;
    
                    &::-webkit-scrollbar {
                        width: 6px;
                    }
        
                    &::-webkit-scrollbar-track {
                        background-color: transparent;
                    }
        
                    &::-webkit-scrollbar-thumb {
                        background: var(--supplementColorTwo);
                        border-radius: var(--border-radius-xs);
                    }
    
                    &::-webkit-scrollbar-button {
                        display: none;
                    }
                }
    
                select {
                    color: var(--supplementColorThree);
                    cursor: pointer;
                    option {
                        font-size:0.9rem;
                    }
                }
    
                .phone-input__container {
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
    
                    select {
                        width: initial;
                        padding: 0 0.5rem;
                        margin: 0 0.25rem 0 0;
                    }
                    #telInput {
                        width: 100%;
                    }
                }
    
                label {
                    font-family: var(--fontText);
                    font-size: var(--sizeTextLarge);
                    color: var(--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(--fontText);
                font-weight: var(--fontBold);
                border: none;
                border-radius: var(--border-radius-s);
                padding: 0.5rem 0;
                margin: 0.5rem 0 0 0;
                align-self: start;
                
    
                &:hover {
                    background-color: var(--mainColorDarker);
                }
            }
        }
    
    }
}

.uae, .kw {
    .contact .contact__details {
        justify-content: center;
    }
}

.asset-desktop {
    display: none;
}

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

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

    .footer__content {
        padding: 2rem 0;
        margin: 0 10%;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        gap: 5rem;
    
        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(--supplementColorOne);
                }
            }
        }
        .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 {
    position: relative;
    background: var(--bgColor);

    /* &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-repeat: no-repeat;
        z-index: -1; 
        opacity: 0.15; 
        pointer-events: none; 
        background-image: 
            url("../assets/img/bg-asset-1.svg"), 
            url("../assets/img/bg-asset-2.svg"),
            url("../assets/img/bg-asset-4.svg"),
            url("../assets/img/bg-asset-3.svg");
        background-position: 
            100% 20%, 
            0% 40%, 
            100% 60%, 
            0% 80%;
        background-size:
            15rem 15rem, 
            15rem 15rem, 
            15rem 15rem,
            25rem 25rem; 
    } */
    

    &:has(header.scrolled) {

        .header-container {
            border-radius: 0;
            margin: 0;
            padding: 1.15rem 0;
        }
    }

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

    .hero-privacy,
    .hero-terms {
        min-height: 20rem;
        background-color: var(--mainColor);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;  
        padding: 2rem 1rem;

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

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

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

    .to-top {
        background-color: var(--headingColorLight);
    
        svg path {
            stroke: var(--mainColor);
        }
    }
    
    .to-top:hover {
            background-color: var(--mainColor);

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

    .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: 3rem 0 0.5rem;
        }

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

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

            li {
                margin: 0.5rem 0;
            }
        }
    }

    .table-of-content {
        margin: 0;
        padding: 2rem 10%;
        position: relative;
       

        .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.3rem 0;

                a {
                    text-decoration: underline;
                    color: var(--headingColorLight);
                    
                    &:hover {
                        color: #fff;
                        font-weight: var(--fontSemiBold);
                    }
                }
            }
        }

        .bg-toc {
            position: absolute;
            top: -5rem;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--bgColor);
            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 {

    ul {
        direction: rtl;
    }

    .privacy-subject,
    .table-of-content {

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

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

.widerrufsrecht,
.impressum {

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

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

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


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

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

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

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

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

    .reviews {
        align-items: center;
        justify-content: center;
        /* margin: 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: 40rem;
            margin: 0 auto 2rem;
            font-size: 2.2em;
        }

        .cta {
            max-width: 40rem;
        }

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

    .cta-join {
        .cta-wrapper {
            justify-content: center;

            .cta-join__heading {
                text-align: center;
            }
        }
    }
}

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

    header {
        .pricepoint {
            padding: 0.5rem 1.8rem;
        }
    }

    .carousel {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        gap: 1.5rem 1rem;
        /* animation: scrollCarousel 60s linear infinite; */
            
        .carousel__item {

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

    .features {

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

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

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

                p {
                    padding: 0 0.5rem;
                    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;
            }
        }
    }

    .cta-join {
        margin: 10rem 9%;

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

            h1 {
                font-size: 3rem;
                max-width: 50vw;
            }
    
    
            .hero-privacy__textwrap,
            .hero-terms__textwrap {
                /* width: 35rem; */
                margin: 0 10%;
                display: flex;
                flex-direction: column;
            }
        }
    
        .breadcrumb {
            margin: 1rem 10%;
        }
    }
}

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

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

    header {
        .pricepoint {
            padding: 0.5rem 10%;
        }
   
        .header-container {
            padding: .5rem 10%;
            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(--supplementColorFive);
                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;
                    }
                }

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

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

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

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

                    .nav-list {
                        display: flex;
                    }

                    .country-selection {
                        bottom: initial;
                        flex-direction: row;
                        align-items: flex-start;
                        position: absolute;
                        background-color: var(--bgColor);
                        top: 7.5em;
                        width: 100vw;
                        height: calc(100vh - 7.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 1rem 0;
                            }
                        }
                    }
    
                    /* .country-selection__wrapper.active {

                    } */
                }

                &.active {
                    display: flex;
                }
            }

            &:has(.country-selection__wrapper.active) {
                background-color: var(--bgColor);
                padding: 2rem 9%;

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

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

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

                            &:hover {
                                color: var(--supplementColorTwo);
                            }
                        }
                    }
                }
            }
        }
    
        &:has( .country-selection__wrapper.active) {
            background-color: var(--bgColor);

            .pricepoint  {
                visibility: hidden;
            }

            .nav-list {
                visibility: hidden;
            }
        }
    }

    .index-country header {
        .header-container {
            padding: 1.43rem 10%;      
        }
    }

    .hero-container {

        .cta {
            min-height: initial;
            width: 100%;
            margin: 0rem 0 1rem 0;
            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;
        }

        h1 {
            max-width: 50vw;
            margin: 5rem 0 3.5rem;
            font-size: var(--sizeHeading1);
        }
    }

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

        .hero-text__wrapper {
            width: 100%;
            display: flex;
            /* display: grid;
            grid-column: span 2;
            justify-content: space-between; */

            h1 {
                margin: 6rem 0 3.5rem;
            }
    
            .cta {
                max-width: 23rem;
                align-self: initial ;
            }

            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 {
        padding: 0 9% 5rem;
        display: flex;
        justify-content: center;
        gap: 5rem;
        align-items: center;
        flex-direction: row-reverse;

        .explore {
            max-width: 70vw;
            margin: 0;
            
            .heading {
                justify-content: flex-start;
            }

            .explore__text {
                max-width: 40rem;
            }   
        }

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

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

    .features {
        margin: 10rem 9%;

        .features-list {
            grid-template-columns: repeat(4, minmax(10rem, 30rem));
            grid-template-rows: 1fr;
            gap: 4.5rem 1rem;
            margin: 0 auto;
            max-width: 120rem;

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

    .cta-join {
        padding: 0;

        &::before {
            display: none;
        }

        .cta-wrapper {
            margin: 0 auto;
            max-width: 120rem;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;

            .cta-join__heading,
            .cta-join__text,
            .cta-join__links {
                z-index: 2;
                margin: 0;
                padding: 1rem 4rem;
            }

            .cta-join__heading {
                grid-column: 1;
                text-align: left;
            }
            .cta-join__links{
                grid-column: 2;
                grid-row: 1 / span 2;
            }
        }

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

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

    .reviews {
        align-items: center;
        max-width: initial;
        position: relative;

        &::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 20rem;
            bottom: -10rem;
            /* transform: rotate(180deg); */
            background-image: url("../assets/img/bg-asset-3.svg");
            background-repeat: no-repeat;
            z-index: -1;
        }

        .reviews__text {
            justify-self: center;
            max-width: 40rem;
        }
    
        .quotes-container {
            max-width: 40rem;
            justify-self: center;
        }
    
        .general-rating {
            grid-row-start: 3;
        }

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

    .index-country {
        .reviews {
            &::before {
                height: 30rem;
                bottom: -5rem;
            }
        }
    }

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

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

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

            .contact__details {
            
                max-width: 60rem;
            }

            form {
                max-width: 60rem;
                grid-template-columns: 1fr 1fr;
                justify-content: center;
                
                fieldset {
                    &:nth-of-type(4) {
                        grid-column: 2;
                        grid-row: 1;
                    }
                    &:last-of-type {
                        grid-column: 2;
                        grid-row: 2 / span 2;
                    }
                }
    
                input[type="submit"] {
                    grid-column: 2;
                }
            }
        }
    }

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

    .terms, 
    .privacy,
    .widerrufsrecht,
    .impressum {

        &:has(header.scrolled) {
            .header-container {
                padding: 2.43rem 10% 1.43rem;
            }
        }

        header {
       
            .header-container {
                padding: 1.43rem 10%;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            
        }
        
        
        .privacy-subject,
        .terms-subject {
            margin: 2rem auto;
            max-width: 50rem;
        }
    }

    .footer__container {
        position: relative;

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

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

@media screen and (min-width: 1200px) {
    
    .explore-img__container {
        position: relative;

        &::before {
            left: -10rem;
            top: 10rem;
        }
    }

    .top-content  {
        margin: 2rem;

        .heading {
            margin: 4rem calc(9% - 2rem);
        }

        .carousel {
            .carousel__item {
                height: 22rem;
                max-width: 22%;
            }
        }
    }
}