/* Import Fonts */

@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap");

/* 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: #ffa80d; /* main orange color */
    --mainColorDarker: #cc8203; /* main orange darker color */
    --supplementColorOne: #8c019f; /* purple */
    --supplementColorOneDarker: #4d0057; /* purple darker */
    --supplementColorTwo: #ffffff; /* white */
    --supplementColorThree: #5d5d5d; /* light grey */
    --supplementColorFour: #f1f1f1ee; /* lighter grey */
    --supplementColorFive: #171616; /* black-50 */
    --supplementColorSix: #fffae8; /* light yellow */
    --headingColor: #ffffff; /* headingColor */
    --footerPrimary: #ffffff; /* footerPrimary */
    --footerSecondary: #f9f9f9; /*footerSecondary */
    --headerPrimary: #ffffff; /* headerPrimary */
    --textPrimary: #5d5d5d; /* textPrimary */
    --textSecondary: #ffffff; /* textSecondary */
    --pricepointBG: #fffae8; /* Pricepoint background */
    --footerBG: #291c2c; /* footerBG */
    --headerBG: #ffffff; /* headerBG */
    --lightGrey: #ffffff; /* Footer Links Secondary */
    --errorColor: #d24545; /* Error Message Color */
    --successColor: #45d24c; /* Error Message Color */
    --errorColorMessage: #d24545; /* Error Message Color */

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

    /* Sizing */
    --sizeTextSmall: 12px; /* 12px */
    --sizeTextRegular: 14px; /* 14px */
    --sizeTextLarge: 16px; /* 16px */
    --sizeTextXLarge: 18px; /* 18px */
    --sizeHeading1: 45px; /* 45px */
    --sizeHeading2: 36px; /* 36px */
    --sizeHeading3: 30px; /* 30px */
    --sizeHeading4: 25px; /* 25px */
    --sizeHeading5: 23px; /* 23px */
    --sizeHeading6: 20px; /* 20px */

    /* Other */
    /* weight */
    --fontExtraLight: 200; /* Extra Light */
    --fontLight: 300; /* Light */
    --fontRegular: 400; /* Regular */
    --fontMedium: 500; /* Medium */
    --fontSemiBold: 600; /* Semi Bold */
    --fontBold: 700; /* Bold */
    --fontExtraBold: 800; /* Extra Bold */
    --fontBlack: 900; /* Black */

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

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

html {
    font-family: sans-serif;
    scroll-behavior: smooth;
    scroll-padding-top: 15rem;
}

body {
    background-color: var(--headerBG);
}

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

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

img {
    max-width: 10rem;
}

ul {
    list-style: none;
}

a {
    color: #0dbbe0;
    /* text-decoration: none; */
    font-family: var(--fontText);
}

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



/* Arabic Text Styling */
body.ar h1,
body.ar h2,
body.ar h3,
body.ar h4,
body.ar p, 
body.ar a {
    direction: rtl !important;
    text-align: right !important;
}

body.ar button:not(.to-top),
body.ar label,
body.ar select,
body.ar li,
body.ar input:not([type="submit"]),
body.ar textarea {
    text-align: right !important;
}

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

body.ar .hero-text__wrapper {
    justify-content: center!important;
    
    h1 {
        text-align: center !important;
    }
}

body.ar .breadcrumb {
    justify-content: flex-end !important; 
}

body.ar .breadcrumb a::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 0 0.5rem;
    transform: rotate(180deg); 
}

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

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

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

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

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

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

body.ar .top-content {

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

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

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

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

    .footer-links {
        grid-column: 2;

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

/* ====== */

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

.header-container {
            &.scrolled {
                & .nav-container {
                    & .lang-selection {
                        & a {
                            &.active {
                                color: var(--headingColor);
                                font-weight: var(--fontBold);
*/

/* Target menu button stripe only on .index-country pages */
.index-country .header-container .menu-btn__stripe {
    background-color: #000 !important;
}

/* Apply .scrolled styling only when .index-country is not present */
.header-container:not(.index-country):not(.terms):not(.privacy).scrolled {
    background-color: var(--mainColor);
    color: var(--headingColor);
}

/* Override .scrolled effect on language indexes */
.index-country .header-container.scrolled {
    background-color: var(--headerBG); /* Retains original background */
    color: var(--textPrimary); /* Retains original text color */
}

.index-country .nav-list a,
.index-country .country-selection__btn {
    color: var(--textPrimary); /* Retains text color on links */
}

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

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

        span {
            text-align: right;
        }
    }

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

        img {
            max-width: 7rem;
            margin: 0 0 0 1.3rem;
            grid-column: 1;
            justify-self: center;
        }

        .menu-btn {
            grid-column: 4 / span 2;
            justify-self: right;
            margin: 0 2rem 0 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: end;
            gap: 0.4rem;
            width: 2rem;
            height: 2.5rem;
            float: right;
            cursor: pointer;
            transition: all 200ms ease;

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

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

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

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

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

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

        /* For when the nav-container is active */
        .nav-container.active .country-selection__btn {
            color: var(--textPrimary) !important;
        }

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

            .nav-list {
                order: 1;
                font-family: var(--fontHeadingAlt);
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 1.5rem;
                width: 100%;

                .nav-list__item {
                    font-size: var(--sizeTextLarge);
                    font-weight: var(--fontMedium);
                    text-align: center;
                    /* width: 100%; */
                    padding-bottom: 1rem;
                    border-bottom: 1px solid var(--mainColor);

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

                .nav-list__item:hover {
                }

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

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

            .country-selection,
            .lang-selection {
                order: 1;
                display: flex; /* activate when multiple languages */
                flex-direction: column;
                justify-content: center;
                align-items: flex-end;
                position: relative;
                /* bottom: 9rem;
                margin: 0 2.5rem 0 0; */
            }

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

                .country-selection__btn {
                    background-color: var(--headingColor);
                    color: var(--textPrimary);
                    font-size: var(--sizeTextRegular);
                    font-weight: var(--fontBold);
                    align-self: flex-end;
                    display: flex;
                    align-items: center;
                    position: relative;
                    cursor: pointer;
                    border-radius: 1.15rem;
                    border-width: initial;
                    border-style: none;
                    border-color: initial;
                    border-image: initial;
                    padding: 10px 20px 10px 20px;
                    margin: 0px 0 0 0rem;
                    box-shadow: rgba(100, 100, 111, 0.2) 0px;

                    &::before {
                        content: url("../assets/img/icons/language-icon.svg");
                        position: relative;
                        object-fit: cover;
                        left: -0.5rem;
                        top: 0rem;
                    }

                    &::after {
                        content: "⯆";
                        position: relative;
                        object-fit: cover;
                        left: 0.5rem;
                        top: -0.1rem;
                    }
                }

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

                    .country-selection__btn {
                        color: var(--textPrimary) !important;
                    }

                    .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(--textPrimary);
                        font-size: var(--sizeHeading6);
                        text-decoration: none !important;

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

                    .country-selection__list li {
                        margin: 1rem 0;
                        display: flex;
                        align-items: center;

                        &::before {
                            content: "";
                            width: 1.5rem;
                            height: 1.2rem;
                            background-image: url("../assets/img/flags/netherlands.svg");
                            background-repeat: no-repeat;
                            background-size: cover;
                            background-position: center;
                            margin: 0 0.5rem 0 0;
                            border-radius: 4px;
                        }

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

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

                    /* 
                        MARK:: == Country Flags 
                     */
                    /* 
                        Austria (AT)
                        Ireland (IE)
                        Poland (PL)
                        Potugal (PT)
                        Singapore (SG)
                        South Africa (ZA)
                        Spain (ES)
                        United Kingdom (UK)
                     */
                    .country-selection__list.eu li {
                        /* Country 1 */
                        &.country-selection__item:nth-of-type(2)::before {
                            background-image: url("../assets/img/flags/cyprus.svg");
                        }
                        /* Country 2 */
                        &.country-selection__item:nth-of-type(3)::before {
                            background-image: url("../assets/img/flags/greece.svg");
                        }
                        /* Country 3 */
                        &.country-selection__item:nth-of-type(4)::before {
                            background-image: url("../assets/img/flags/netherlands.svg");
                        }
                    }

                    .country-selection__list.mideast-af li {
                        /* Country 1 */
                        &.country-selection__item:nth-of-type(2)::before {
                            background-image: url("../assets/img/flags/iraq.svg");
                        }
                        /* Country 2 */
                        &.country-selection__item:nth-of-type(3)::before {
                            background-image: url("../assets/img/flags/pakistan-flag-icon.svg");
                        }
                        /* Country 3 */
                        &.country-selection__item:nth-of-type(4)::before {
                            background-image: url("../assets/img/flags/palestine.svg");
                        }
                        /* Country 4 */
                        &.country-selection__item:nth-of-type(5)::before {
                            background-image: url("../assets/img/flags/saudi-arabia.svg");
                        }
                        &.country-selection__item:nth-of-type(6)::before {
                            background-image: url("../assets/img/flags/senegal.svg");
                        }
                    }
                }

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

            .lang-selection {
                a {
                    color: #000;
                    text-decoration: none;

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

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

                .nav-list {
                    display: none;
                }

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

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

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

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

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

            .menu-btn__stripe {
                background-color: white;
            }

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

                .country-selection__btn {
                    background-color: transparent;
                    color: var(--supplementColorTwo);
                }
            }
        }
    }
}

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

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

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

            .lang-selection {
                a {
                    color: #000;

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

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

/* .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(--textPrimary);
    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; /* Full viewport height */
    position: relative;
    background-image: url("../assets/img/izeplay-heroBG-mobile-DARK.jpg"); /* Background image */
    background-size: cover; /* Ensures the image scales with the container */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center; /* Horizontally centers the elements */
    gap: 1.5rem; /* Space between elements */
    padding: 4.5rem 1.5rem;

    h1 {
        font-family: var(--fontHeading);
        color: var(--headerPrimary);
        font-weight: var(--fontBold);
        line-height: var(--lineheight-125);
        font-size: var(--sizeHeading3);
        text-align: center;
    }

    .cta {
        background-color: var(--supplementColorTwo);
        width: 100%;
        max-width: 33rem;
        min-height: 8rem;
        padding: 2.5rem 2rem;
        border-radius: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; /* Center the content inside cta */
        gap: 1rem; /* Gap between the elements inside the CTA */

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

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

            &:nth-child(2) {
                font-size: var(--sizeTextRegular);
            }
        }

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

        select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            list-style: none;
            width: 100%;
            border: 2px solid var(--mainColor);
            border-radius: 0.5rem;
            padding: 0.7rem 1rem;
            font-size: var(--sizeTextRegular);
            color: var(--textPrimary);
            text-align-last: left;
            background-color: var(--supplementColorTwo);
            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(--textPrimary);
                font-family: var(--fontText);
                font-size: var(--sizeTextLarge);
                padding: 0;
                margin: 0;

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

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

        button {
            cursor: pointer;
            background-color: var(--mainColor);
            color: var(--supplementColorTwo);
            border-radius: 0.5rem;
            border: none;
            width: 90%;
            padding: 1rem;
            /* position: absolute;
            left: 0;
            bottom: 0; */
            font-weight: var(--fontSemiBold);
            font-size: var(--sizeTextRegular);

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

    .pricepoint {
        margin: 0;
        font-size: var(--sizeTextXLarge);
        font-weight: var(--fontMedium);
        color: var(--supplementColorTwo);
        text-align: center; /* Center the pricepoint text */

        span {
            font-size: var(--sizeTextRegular);
            font-weight: var(--fontLight);
        }
    }

    .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 {
    padding: 4rem 1.5rem 2rem 1.5rem;

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

        h1 {
            margin: 0;
            font-size: 2em;
            order: 2;
            max-width: initial;
        }

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

        .pricepoint {
            order: 4;
            text-align: center;
        }

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

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

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

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

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

            a {
                text-decoration: underline;
                margin: 0 0 0 0;
                color: var(--headerPrimary);

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

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

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

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

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

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

/* ====== Explore Section ====== */
.explore-container {
    position: relative;
    display: flex;
    margin-bottom: 5rem;
    flex-direction: column;
    background: linear-gradient(to bottom, var(--mainColor) 80%, white 20%);
}

/* Explore Text Content */
.explore-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem;
    max-width: 100%;
    text-align: left;

    .explore-content__heading {
        color: white;
        font-size: var(--sizeHeading1);
        margin-bottom: 1.5rem;
    }

    .explore-content__description {
        color: white;
        font-size: var(--sizeTextLarge);
        line-height: var(--lineheight-125);
        max-width: 30rem;
    }
}

/* Explore Image */
.explore-image__container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 1rem 0;

    .explore-image__img {
        width: auto;
        max-width: 100%;
        height: auto;
        /* max-height: 390px; */
        position: relative;
    }
}

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

    .explore__img {
        margin: 3rem 0 5rem;
        width: 75vw;
        max-width: 20rem;
    }
}

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

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

.top-content {
    margin: 10rem 0;
    overflow: hidden;

    .top-content__heading {
        text-align: center;
        font-size: var(--sizeHeading2);
        margin-bottom: 2rem;
    }

    /* === Carousel === */

    .carousel,
    .carousel__item {
        display: flex;
    }

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

        .carousel__item {
            flex-direction: column-reverse;
            flex: 0 0 50vw;
            height: 14rem;
            border-radius: 20px;
            padding: 2rem 0.25rem;
            color: #fff;
            justify-content: center;
            align-items: center;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

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

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

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

.features {
    margin-bottom: 10rem;

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

    .features__heading {
        margin: 4rem 0 3rem 0;
        font-size: var(--sizeHeading2);
    }

    .features-list {
        gap: 2rem;

        .features-list__item {
            /* gap: 0.5rem; */
        }

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

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

.cta-join {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("../assets/img/izeplay-joinnowBG-mobile.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 50% 65%;
    padding: 5rem 0;

    ::before {
        content: "";
        position: absolute;
        top: -39px;
        left: 40px;
        width: 90px;
        height: 90px;
        animation: float 5s infinite linear;
        background-image: url(../assets/img/addon-BleuDiamond-2.png);
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 1;
    }

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

    .cta-join__heading {
        font-size: var(--sizeHeading2);
        color: white;
        margin-bottom: 0;
    }

    .cta-join__links {
        display: flex;
        flex-direction: column;

        .cta-join__btn--secondary {
            color: var(--headingColor);
            text-decoration: underline;
            text-underline-offset: 2px;

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

    .cta-join_linktexts {
        color: var(--supplementColorTwo);

        a {
            text-decoration: underline 1px var(--supplementColorTwo);
            color: var(--supplementColorTwo);
        }
    }

    .cta-join__btn--primary {
        text-align: center;
        text-decoration: none;
        padding: 0.75rem 3rem;
        background-color: var(--mainColor);
        color: var(--headerPrimary);
        font-weight: var(--fontBold);
        border-radius: 2.5rem;
        margin: 2.5rem auto 1rem;

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

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

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

.faq {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5rem 6% 1rem;
    background-color: #8c019f;

    ::before {
        content: "";
        position: absolute;
        top: -39px;
        left: 20px;
        width: 87px;
        height: 95px;
        background-image: url("../assets/img/addon-PinkDiamond-2 1.png"); /* Path to the image */
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 5; /* Ensure it stays below content but visible on the section */
    }

    .faq__text {
        max-width: 30rem;
        margin: 1rem 0 0 0;
        color: white;
        text-align: center !important;
    }

    .faq__heading {
        color: white;
        font-size: var(--sizeHeading2);
        text-align: center;
    }

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

        .questions {
            width: 100%;

            /* buttons */
            .accordion {
                cursor: pointer;
                width: 100%;
                padding: 2rem 1rem;
                background-color: white;
                color: #8c019f;
                border: 1px solid white;
                border-radius: 4px;
                font-family: var(--fontText);
                /* font-weight: var(--fontBold); */
                text-align: left;

                &:hover {
                    background-color: #8c019f;
                    color: white;
                }

                &.open {
                    background-color: #8c019f;
                    color: white;
                }

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

        ul {
            list-style-type: circle;
            display: flex;
            flex-direction: column;
            gap: 1rem;

            & li {
                color: white;
                font-size: 14px;
                line-height: var(--lineheight-125);
                font-weight: var(--fontRegular);
                margin: 1rem 1rem 1rem 3.2rem;
                font-family: var(--fontHeading);

                & span {
                    font-weight: var(--fontSemiBold);
                }
            }
        }

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

/* ====== */
/* === Reviews === */
/* ====== */
@keyframes scroll {
    0%,
    15% {
        transform: translateX(0);
    }
    20%,
    35% {
        transform: translateX(calc(-100% - 4rem));
    }
    40%,
    55% {
        transform: translateX(calc(-200% - 8rem));
    }
    60%,
    75% {
        transform: translateX(calc(-300% - 12rem));
    }
    80%,
    95% {
        transform: translateX(calc(-400% - 16rem));
    }
    100% {
        transform: translateX(0);
    }
}

.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;
        font-size: var(--sizeHeading2);
    }

    .reviews__text {
        max-width: 20rem;
        text-align: center !important;
    }

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

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

            .quote {
                min-width: calc(100% - 2rem);
                display: flex;
                animation: scroll 20s linear infinite;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                margin: 1rem;
                padding: 2rem 0;
                background-color: var(--supplementColorTwo);
                border-bottom: 0px solid var(--textPrimary);
                box-shadow: rgba(100, 100, 111, 0.2) 0px 0px 12px 2px;

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

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

                    .quote__start {
                        align-self: flex-start;
                    }
                    .quote__end {
                        align-self: flex-end;
                    }

                    .quote__text {
                        max-width: 20rem;
                        text-align: center;
                        margin: 0 0.5rem;
                        font-size: var(--sizeTextRegular);
                        color: var(--textPrimary);
                    }
                }

                .rating {
                    width: 100%;
                    padding: 0 0 0.5rem 0;
                    display: flex;
                    justify-content: center;
                    gap: 0.2rem;

                    .rating__star--quote {
                        width: 0.75rem;
                        height: 0.75rem;
                    }
                }

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

        .quote-indicator {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1.4rem;
            margin: 2rem 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(--mainColor);
                width: 0.75rem;
                height: 0.75rem;
            }
        }
    }
}

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

.contact {
    margin: 5rem 5% 0rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;

    .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;
            font-size: var(--sizeHeading2);
            margin: 1rem 1rem;
            gap: 0;
        }

        .contact__text {
            max-width: 30rem;
            text-align: center !important;
        }
    }

    .contact__details {
        /* display: grid;
        grid-template-columns: 1fr 1fr;
        max-width: 55rem;
        gap: 0 3rem; */
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* align-items: center; */
        text-align: center !important;

        .contact__details-email,
        .contact__details-phone {
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            margin: 2rem 0;

            p,
            a {
                margin: 0 0 0.5rem 0;
                /* font-weight: bold; */
                font-size: var(--sizeTextLarge);
                text-align: center !important;
                color: var(--textPrimary);
            }

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

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

    .contact-form-wrapper {
        width: 100%;
        background-color: #f1f1f1;
        margin: 2rem 0 10rem 0;
        padding: 0 2rem 0 2rem;
        border-radius: 30px;
        font-family: var(--fontHeading);
        max-width: 60rem;
    }

    form {
        margin: 2rem 0 5rem;
        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 {
                background-color: var(--supplementColorTwo);
                width: 100%;
                border: none;
                border-radius: 4px;
                padding: 0.9rem 0.8rem;
                border-radius: 8px;
                font-size: var(--sizeTextSmall);
                font-family: var(--fontHeading);
            }

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

            textarea {
                min-height: 8rem;
                resize: none;

                &::-webkit-scrollbar {
                    width: 6px;
                }

                &::-webkit-scrollbar-track {
                    background-color: transparent;
                }

                &::-webkit-scrollbar-thumb {
                    background: var(--supplementColorTwo);
                    border-radius: 4px;
                }

                &::-webkit-scrollbar-button {
                    display: none;
                }
            }

            select {
                color: var(--supplementColorThree);
                cursor: pointer;
                option {
                    font-size: 0.9rem;
                }
            }

            .phone-input__container {
                display: flex;
                justify-content: space-between;
                width: 100%;

                select {
                    width: initial;
                    padding: 0 0.5rem;
                    margin: 0 0.25rem 0 0.25rem;
                    font-size: var(--sizeTextLarge);
                }
                #telInput {
                    width: 100%;
                }
            }

            label {
                font-size: var(--sizeTextRegular);
                color: var(--textPrimary);
                margin: 0 0 0.25rem 0;
            }

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

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

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

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

.gr .contact{
margin: 2rem 5% 0rem;

}

.za {
    .contact .contact__details {
        justify-content: center;
    }
}

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

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

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

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

    .footer__content {
        padding: 2rem 0;
        margin: 0 10%;
        width: 100%;
        display: 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(--sizeTextXLarge);

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

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

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

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

    &::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/windolin-background-sq.svg"), 
            url("../assets/img/windolin-background-sq.svg"),
            url("../assets/img/windolin-background-sq.svg"),
            url("../assets/img/windolin-background-sq.svg"); */
        background-position: 
            100% 20%, 
            0% 40%, 
            100% 60%, 
            0% 80%;
        background-size:
            15rem 15rem, 
            15rem 15rem, 
            15rem 15rem,
            25rem 25rem; 
    }

    &:has(.header-container.scrolled) {
        .to-top {
            background-color: var(--mainColor);

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

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

    /* Hero Section for Privacy & Terms Pages */
    .hero-privacy,
    .hero-terms {
        min-height: 20rem;
        background-color: var(--mainColor);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 2rem 1rem;

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

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

        h2 {
            font-weight: normal;
        }
    }


    /* Breadcrumb Styling */
    .breadcrumb {
        margin: 1rem 1.5rem;
        display: flex;
        justify-content: flex-start;

        a {
            color: var(--supplementColorTwo);
            text-decoration: underline;
            text-underline-offset: 3px;
            margin: 0 1rem 0 1rem;

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

            &:hover {
                color: var(--mainColor);
                font-weight: var(--fontBold); 
                text-decoration: none; 
            }
        }
    }

    /* To-Top Button Styling */
    .to-top {
        background-color: var(--supplementColorTwo);

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

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

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

    /* Content Area Styling for Terms & Privacy */
    .privacy-subject,
    .terms-subject,
    .table-of-content {
        padding: 2rem 10%;

        h2, h3, h4, p, li, a {
            color: var(--textPrimary);
            font-family: var(--fontTextAlt);
            margin: 0 auto;
        }

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

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

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

            li {
                margin: 0.5rem 0;
            }
        }
    }

    /* Table of Contents Styling */
    .table-of-content {
        margin: 0;
        padding: 2rem 10%;
        position: relative;
        background-color: #37323D;

        .table-of-content__heading {
            font-size: var(--sizeHeading2);
            color: var(--supplementColorTwo);
            margin: 0;
        }

        ul {
            list-style: none;
            /* margin-bottom: 5rem; */

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

                a {
                    text-decoration: underline;
                    color: var(--supplementColorTwo);
                    font-size: var(--sizeTextLarge);
                    
                    &:hover {
                        color: var(--mainColor);
                        font-weight: var(--fontBold);
                        text-decoration: none;
                    }
                }
            }
        }

        .bg-toc {
            position: absolute;
            top: -5rem;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #37323D;
            z-index: -1;
        }

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

    /* Scroll Indicator Line */
    .privacy-subject,
    .table-of-content {
        position: relative;

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

    /* Arabic Styling for RTL Support */
    &.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;
                max-width: 10.5rem;
            }
            .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: 10rem auto 10rem;
        max-width: 27.5rem;

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

@media screen and (min-width: 510px) {
    .hero-container {
        padding: 3.5rem 1.5rem;

        h1 {
            max-width: 75vw;
            font-size: 1.8em;
            font-size: var(--sizeHeading3);
        }

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

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

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

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

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

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

            .carousel__item {
                flex: 0 0 5vw;
                padding: 2rem 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;
            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;
                color: white;
            }

            .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 {
            padding: 2rem auto;
            /* background-color: #37323D; */
        }
    }
}

@media screen and (min-width: 800px) {
    /* Target nav-list links on .index-country pages */
    .index-country .header-container .nav-container .nav-list a {
        color: #000 !important;
    }

    .index-country .header-container .nav-container .lang-selection a {
        color: #000 !important;
        font-weight: var(--fontRegular) !important;
        text-decoration: none !important;
    }

    .index-country .header-container .nav-container .lang-selection a.active {
        color: #000 !important;
        font-weight: var(--fontBold) !important;
        text-decoration: underline !important;
    }

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

    .terms .header-container .nav-container .lang-selection a {
        color: #000 !important;
        font-weight: var(--fontRegular) !important;
        text-decoration: none !important;
    }

    .terms .header-container .nav-container .lang-selection a.active {
        color: #000 !important;
        font-weight: var(--fontBold) !important;
        text-decoration: underline !important;
    }

    .privacy .header-container .nav-container .lang-selection a {
        color: #000 !important;
        font-weight: var(--fontRegular) !important;
        text-decoration: none !important;
    }

    .privacy .header-container .nav-container .lang-selection a.active {
        color: #000 !important;
        font-weight: var(--fontBold) !important;
        text-decoration: underline !important;
    }

    

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

        .header-container {
            padding: 1rem 9% 1rem 10%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 auto;
            width: 100%;

            img {
                margin: 0 0 0 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;

                    .nav-list__item {
                        border: none;
                        padding-bottom: 0;
                    }

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

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

                .country-selection__list {
                    display: none;
                }

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

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

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

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

                    .nav-list {
                        display: flex;
                    }

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

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

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

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

                        }
                    }

                    /* .country-selection__wrapper.active {

                    } */
                }

                &.active {
                    display: flex;
                }
            }

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

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

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

                    .nav-list__item:hover {
                        
                        text-decoration: underline;
                        text-underline-offset: 4px;
                        text-decoration-color: var(--textPrimary);
                        
                    }
                        
                    }

                    .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: 90vh;

        .scrolled h1 {
            max-width: 50vw;
        }
    }

    .explore-container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        background: var(--mainColor) !important; /* Full orange background */
        padding: 0 11%;
        height: 60vh;
        margin-bottom: 5rem;
    }

    .explore-content {
        max-width: 50%; /* Half width for text */
        padding: 2rem;
    }

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

    .explore-image__container {
        justify-content: flex-end;
        max-width: 50%; /* Half width for image */
    }

    .explore-image__img {
        max-width: 25rem; /* Scale the image smaller */
    }

    .features {
        margin: 10rem 9%;

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

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

    .cta-join {
        img.asset-desktop.fifa {
            display: inline;
            position: absolute;
            width: 30rem;
            max-width: initial;
            right: 0;
            bottom: -5rem;
        }
    }

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

    .reviews {
        align-items: center;
        margin: 10rem 9%;
        max-width: initial;
        position: relative;

        .reviews__text {
            justify-self: center;
            max-width: 45rem;
            text-align: center;
        }

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

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

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

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

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

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

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

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

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

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

                    .nav-list {
                        a {
                            color: #000;
                        }
                    }


                }
            }
        }
    }

    .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) {
    .hero-container {
        grid-template-columns: minmax(20rem, 40rem) 30rem;

        .cta {
            background-color: var(--supplementColorFour);
            margin: 0;

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

            select {
                width: 75%;
            }

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

        h1 {
            font-size: 2.5rem;
        }
    }

    .explore-container {
        margin: 0 auto;
    }

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

    .cta-join {
        position: relative;
        background-image: url("../assets/img/izeplay-joinnowBG-mobile.jpg");
        background-size: 100%, 100%;
        background-position: 50% 65%, 50% 65%;
    }
}


/* Animation */

@keyframes float {
    0% {
      transform: translatey(0px);
    }
    50% {
      transform: translatey(-20px);
    }
    100% {
      transform: translatey(0px);
    }
  }