.hero-section {
    background-color: var(--clr-primary-30);
    height: 52.5vh;
    border-radius: 35%;
    margin-bottom: 3%;
    max-width: 100%;
}

.hero-section-wib {
    position: relative; /* Ensure child elements can be positioned absolutely */
    background-image: linear-gradient(to right, var(--clr-light-greem-100), var(--clr-dark-green-100)); /* Background gradient */
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.3); /* Bottom shadow */
    height: 50vh;
    overflow: hidden;
}

.svg-container img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    opacity: 0.5;
}

.gorilla img {
    z-index: 2;
    opacity: 1;
    top: 30px;
}


.hero-title {
    position: absolute;
    max-width: 55%;
    left: 5%;
    top: 10%;
    color: white;
    line-height: 1.8;
    letter-spacing: 2px;
    z-index: 2;
}

.highlight {
    color: var(--clr-accent-100);
}


@media (max-width: 675px) {
    .gorilla img {
        display: none; /* Hide gorilla */
    }

}

/* Media query for screen widths 650px and above */
@media (min-width: 675px) {
    .svg-container img {
        left: 15%; /* Move all images 20% left */
    }

    .hero-section-wib {
        border-radius: 0 0 40px 40px;
    }

    .gorilla img {
        left: 20%;
    }
}

@media (min-width: 1000px) {
    .hero-title {
        left: 14%;
    }
}


/* ######################### */
/* ####### part two ######## */
/* ######################### */

.first-two-sections {
    background-color: #e9eff2;
    padding-bottom: 5%;
}

.opening-intro {
    padding: 2.5% 10%;
}

.opening-intro h1 {
    padding-bottom: 10px;
}

.brief-explanation {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between items */
    padding-bottom: 5%;
}

.sign-up-arsenal-city {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

.brief-explanation-content img {
    border-radius: 0 10% 10% 0;
    width: 85%;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3), /* Bottom shadow */ 5px -5px 5px rgba(0, 0, 0, 0.3); /* Top shadow */

}


@media (min-width: 900px) {
    .brief-explanation {
        flex-direction: row;
        align-items: center;
        gap: 5%;
        padding: 0 10%;
        padding-bottom: 5%;
    }

    .brief-explanation-content {
        max-width: 50%;
    }

    .brief-explanation-content img {
        width: 100%;
    }

    .brief-explanation-content p {
        font-size: .7rem;
    }

    .brief-explanation-content h2 {
        font-size: clamp(1rem, 3vw, 2rem);
    }

}

@media (max-width: 900px) {
    .sign-up-arsenal-city {
        padding: 0 10%;
    }
}


@media (min-width: 1050px) {
    .brief-explanation-content p {
        font-size: .8rem;
    }
}


/* ######################### */
/* ####### Lay betting ######## */
/* ######################### */

.glowing-background-1 {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0.5;
    width: 50%;
    filter: brightness(1.25);
}

.glowing-background-1 img {
    width: 100%;
    z-index: -1;
}


.arsenal {
    color: red;
}

.city {
    color: blue;
}

.back-bet {
    text-decoration: underline;
    color: var(--clr-light-greem-100);
    font-weight: bolder;
}


.lay-betting {
    padding: 5% 10%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    color: white;
    background-color: var(--clr-dark-green-100);
    position: relative;
}

.lay-betting-intro {
    display: flex;
    flex-direction: row;
    gap: 10rem;
    position: relative;
    z-index: 1;
}

.lay-opening-intro {
    width: 100%;
}

.lay-explanation {
    width: 140%;
}

.footy-shirts-arsenal img {
    width: 70%;
}

.qualifying-intro-heading {
    padding-top: 4%;
}

.highlight {
    font-weight: bold; /* Makes the text bold */
    color: var(--clr-accent-100); /* Highlights the text */
}


@media (max-width: 1200px) {
    .lay-betting-intro {
        gap: 5rem;
    }

    .lay-explanation {
        width: 120%;
    }

    .footy-shirts-arsenal img {
        width: 100%;
    }
}


@media (max-width: 800px) {
    .lay-betting-intro {
        gap: 1rem;
    }

    .lay-explanation {
        width: 120%;
    }

    .footy-shirts-arsenal img {
        width: 100%;
    }
}

@media (max-width: 700px) {
    .lay-betting-intro {
        flex-direction: column;
        gap: 2rem;
    }

    .lay-explanation {
        width: 100%;
    }
}

/* ################################## */

.lay-opening-qualifying {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 5%;
    justify-content: space-between;
}


.lay-opening-qualifying-img {
    order: 2;
}

.lay-opening-qualifying-img img {
    border-radius: 10%;
    width: 100%;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3), /* Bottom shadow */ 5px -5px 5px rgba(0, 0, 0, 0.3); /* Top shadow */
    width: 100%;
}

.qualifying-intro-heading {
    padding-bottom: 3%;
}


@media (min-width: 900px) {
    .lay-opening-qualifying {
        flex-direction: row;
        align-items: flex-end;
        padding-bottom: 5%;
    }

    .lay-explanation-qualifying-para {
        padding: 0;
    }

    .lay-opening-qualifying p {
        font-size: .8rem;
    }


    .lay-opening-qualifying-img {
        order: 0;
    }

    .lay-explanation-qualifying {
        width: 50%;
    }

}


@media (min-width: 1050px) {
    .lay-opening-qualifying p {
        font-size: 1.2rem;
    }
}


/* ###################################### */
/* ###################################### */

.lay-opening-free {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 5%;
    justify-content: space-between;
}


.free-lay-intro-heading {
    padding-bottom: 3%;
}

.offer-img-container-sign-up {
    position: relative; /* Set the parent as a positioning context */
    height: auto; /* Maintain aspect ratio */
}

.offer-img-container-sign-up img {
    border-radius: 15px;
}

.offer-img-container-ab {
    position: absolute; /* Positioning context is the parent */
    top: 0; /* Align to the top of the parent */
    left: 0; /* Align to the left of the parent */
    width: 100%; /* Ensures child elements are relative to the parent */
    height: 100%; /* Ensures child elements are relative to the parent */
    pointer-events: none; /* Optional: Prevent blocking interactions with the parent image */
}

.offer-img-container-ab img:first-child {
    position: absolute;
    width: 25%; /* Adjust size as needed */
    left: 15%;
    top: -10%; /* Moves the image up by half its height */
    transform: rotate(-20deg);
}

.offer-img-container-ab img:last-child {
    position: absolute;
    width: 25%; /* Adjust size as needed */
    height: auto;
    right: 10%;
    bottom: -7.5%; /* Moves the image up by half its height */
    transform: rotate(-20deg);
}


@media (min-width: 900px) {
    .lay-opening-free {
        flex-direction: row;
        align-items: flex-end;
        padding-bottom: 5%;
    }

    .lay-explanation-free-para {
        padding: 0;
    }

    .lay-opening-free p {
        font-size: .8rem;
    }


    .lay-explanation-free {
        width: 50%;
    }

}


@media (min-width: 1050px) {
    .lay-opening-free p {
        font-size: 1.2rem;
    }
}


/* ######################### */
/* ####### try lay betting button ######## */
/* ######################### */

.lay-betting-btn-container {
    padding: 4%;
    background-color: #e9eff2;;
}


.lay-betting-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 1.5%;
    /* margin: 5%; */
    background-color: var(--clr-light-greem-100);
    border-radius: 20px;
    justify-content: space-between;
    color: white;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3), /* Bottom shadow */ 5px -5px 5px rgba(0, 0, 0, 0.3);
}


.get-started-btn {
    border: 1px solid white;
}


.try-lay-btns {
    display: flex;
    gap: 0.75rem;
    margin-right: 0;
}

@media (max-width: 800px) {
    .lay-betting-btn {
        flex-direction: column;
        text-align: center;
        padding: 5%;
    }
}


/* ######################### */
/* ####### try lay betting button ######## */
/* ######################### */

.glowing-background-2 {
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0.5;
    width: 50%;
    filter: brightness(1.25);
}

.glowing-background-2 img {
    width: 100%;
    transform: scaleX(-1);
    z-index: -1;
}


.highlight-dutch {
    color: var(--clr-light-greem-100);
}

.dutch-betting {
    padding: 5% 10%;
    color: white;
    background-color: var(--clr-dark-green-100);
    position: relative;
}

.dutch-betting-opening {
    position: relative;
    z-index: 1;
}

.dutch-explanation-1,
.dutch-chels-tot {
    padding: 3% 0;
}

.dutch-opening-bet-accounts,
.dutch-chels-tot,
.dutch-free-round {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.dutch-free-round {
    position: relative;
    z-index: 1;
}

.dutch-explanation-flexs {
    width: 50%;
}

.dutch-chels-tot-logos {
    order: 0;
}

@media (max-width: 900px) {
    .dutch-opening-bet-accounts,
    .dutch-chels-tot,
    .dutch-free-round {
        flex-direction: column;
    }

    .dutch-explanation-flexs {
        width: 100%;
    }

    .dutch-chels-tot-logos {
        order: 2;
    }
}


.dutch-free-round {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.dutch-video .video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
}

.dutch-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 900px) {
    .dutch-opening-bet-accounts,
    .dutch-chels-tot,
    .dutch-free-round {
        flex-direction: column;
    }
    .dutch-explanation-flexs {
        width: 100%;
    }
    .dutch-chels-tot-logos {
        order: 2;
    }
}





/* ######################### */
/* ####### Try free trial btn ######## */
/* ######################### */


.glowing-background-3 {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0.5;
    width: 50%;
    z-index: 1;
    filter: brightness(1.25);
}

.glowing-background-3 img {
    width: 100%;
    z-index: -1;
}

.glowing-background-4 {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.5;
    width: 50%;
    z-index: 1;
    filter: brightness(1.25);
}

.glowing-background-4 img {
    width: 100%;
    transform: rotate(180deg);
    z-index: -1;
}


.free-trial-dutch-btn-container {
    padding: 4%;
    background-color: #e9eff2;;
}

.free-trial-dutch-btn {
    display: flex;
    flex-direction: column;
    padding: 1.5%;
    align-items: center;
    gap: 1rem;
    background-color: var(--clr-dark-green-100);
    border-radius: 20px;
    justify-content: space-between;
    justify-content: center;
    color: white;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3), /* Bottom shadow */ 5px -5px 5px rgba(0, 0, 0, 0.3);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.try-our-features h6 {
    font-weight: lighter;
}

.dutch-btns {
    width: 300px;
}

.contact-us-dutch {
    width: 175px;
    align-items: center;
}

.sign-up-premium {
    background: linear-gradient(to right, var(--clr-dark-green-100), var(--clr-light-greem-100), var(--clr-dark-green-100));
    border: 2px solid var(--clr-primary-100);
}


.try-trial-flex {
    display: flex;
    z-index: 5;
    gap: 2.5rem;
    margin-right: 0;
}

.contact-us-dutch {
    background-color: white;
}

.try-trial-flex-2 {
    margin-right: 5%;
}


@media (max-width: 800px) {
    .try-trial-flex {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
        justify-content: center; /* Centers items vertically */
        align-items: center;
    }

    .try-trial-flex-2 {
        margin-right: 0%;
    }
}


/* ######################### */
/* ####### comparison ######## */
/* ######################### */


.Dutch-lay-comparison {
    display: flex;
    flex-direction: row;
    padding: 5% 0;
}

.comparison-methods {
    width: 50%;
    height: auto;
    padding: 2.5%;
    border-radius: 20px;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.comparison-methods h3 {
    padding-bottom: 2%;
}

.comparison-methods ul {
    padding-bottom: 5%;
}

.comparison-methods p {
    margin-top: auto;
}

.comparison-lay {
    background: white;
    border: 2px solid var(--clr-green-100);
    margin-bottom: 10%;
}

.comparison-dutch {
    background-color: var(--clr-dark-green-100);
    color: white;
}

.Dutch-lay-comparison-title {
    text-align: center;
    padding-top: 7.5%;
}


@media (max-width: 600px) {
    .Dutch-lay-comparison {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .comparison-methods {
        width: 100%;
    }

    .comparison-lay {
        margin-bottom: 0;
        width: 80%;
    }
}


/* ######################### */
/* ####### advising friends ######## */
/* ######################### */

.advising-friends {
    padding: 5% 10%;
    color: white;
    background-color: var(--clr-dark-green-100);
    position: relative;
}

.advising-friends-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.advising-friends-flex-container {
    width: 50%;
}

.friends-intro {
    padding: 5%;
    padding-left: 0%;
}

@media (max-width: 750px) {
    .advising-friends-flex {
        flex-direction: column;
    }

    .advising-friends-flex-container {
        width: 100%;
    }

    .friends-intro {
        padding: 0;
    }
}

.advising-friends-questions {
    padding-top: 5%;
    position: relative;
    z-index: 1;
}


/* ######################### */
/* ####### community ######## */
/* ######################### */

.community-container-main {
    padding: 5% 0;
}

.community-container1 {
    display: flex;
    background-color: var(--clr-primary-20);
    justify-content: center;
    max-width: 100%;
    box-shadow: 0 -5px 5px rgba(125, 255, 225, 0.25), /* Light green top */ 0 5px 5px rgba(125, 255, 225, 0.25); /* Bottom border shadow */
}

.community-container2 {
    display: flex;
    height: 100%;
    max-width: 1200px;
    width: 100%;
    flex-direction: column;
    gap: 2rem;
    padding: 1rem;
}

.community-content {
    /* padding: 1rem; */
    display: flex;
    flex-direction: column;
    max-width: 400px;
    margin-inline: auto;
}

.community-header {
    font-size: var(--fs-heading-tertiary);
    font-weight: bold;
}

.community-p {
    font-size: var(--fs-body-large);
}

.community-icons-container {
    display: flex;
    justify-content: space-between;
    margin-block: auto;
    max-width: 300px;
}

.community-icons-container img {
    width: 48px;
    height: auto;
    border-radius: 8px;
}


.community-img {
    right: 0;
    max-width: 100%;
    height: auto;
    margin-block: auto;
    margin-inline: auto;
    /* padding-top: 2rem; */
    border-radius: 2rem;
}


@media (min-width: 730px) {
    /* .community-container1 {
        margin-bottom: 4rem;
        padding-top: 0;
    } */
    .community-container2 {
        flex-direction: row;
    }

    .community-content {
        max-width: 50%;
        padding: 3rem;
    }


    .community-img {
        margin-inline: 0;
        max-width: 50%;
        padding-top: 0;


    }
}


@media (min-width: 992px) {
    .community-icons-container img {
        width: 64px
    }

    .community-icons-container {
        max-width: 400px;
    }
}

/* @media (min-width: 1200px) {
    .community-img {
        border-radius: 20px
    }

} */


/* ######################### */
/* ####### Expert button ######## */
/* ######################### */

.expert-button-container {
    padding-bottom: 5%;
}


.expert-button {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between items */
    padding: 5%;
    margin: 0 5%;
    border-radius: 20px;
    background-image: radial-gradient(circle, var(--clr-light-greem-100), var(--clr-dark-green-100));
    color: white;
    box-shadow: inset 0 0 0 1px #60ba8d;
}

.background-glowing {
    position: absolute;
    width: 100%;
    height: auto;
    opacity: 0.5;
    z-index: 1;
    left: 20%;
    top: 30%;
}

.expert-button-flex2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px; /* Space between items */
    margin-inline: auto;
    z-index: 2;
}

.get-started-btn2 img {
    width: 120px;
    height: auto;
    color: var(--clr-green-100);
}

.get-started-btn-gamble {
    width: 120px;
}


@media (min-width: 450px) {
    .expert-button {
        flex-direction: row;
        align-items: center;
        gap: 5%;
        padding: 0.5% 2%;
    }

}

.last-container {
    background-color: #e9eff2;
}


/* ####################################*/
/* ########## FAQs ############# */
/* ##########      ############# */
/* ################################### */

.faq-container-main {
    background-color: var(--clr-primary-20);
}

.faq-container {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 5% 0;
    padding-top: 2%;
}

.faq-item {
    max-width: 70%;
}

.heading-small {
    font-weight: var(--fw-light);
    padding-top: 5%;
    font-size: 2.5rem;
}

@media (max-width: 500px) {
    .faq-item {
        max-width: 90%;
    }

}