.background-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    z-index: -1;

    img {
        width: 100%;
    }

    &::before {
        content: '';
        /* Required for pseudo-elements */
        position: absolute;
        /* To position it over the image */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(ellipse farthest-side at 50% 0,
                rgba(149, 120, 255, 0.1) 0%,
                rgba(149, 120, 255, 0.00) 100%);
        pointer-events: none;

        z-index: -1;
        /* Allows clicks to pass through to the image */
    }
}

@media screen and (max-width: 1024px) and (min-width: 768px) {
    .background-pattern {
        left: -25%;
        width: 150%;
    }
}

@media screen and (max-width: 768px) {
    .background-pattern {
        left: -75%;
        width: 250%;
    }
}

.title {
    display: flex;
    padding: clamp(0pt, 20vw, 200pt) 20pt;
    padding-bottom: clamp(0pt, 10vw, 50pt);
    width: 100%;
    position: relative;
    justify-content: center;

    p {
        text-align: center;
        text-shadow: 0 0 12px rgba(241, 191, 90, 0.50);
        font-family: Mercadillo;
        font-size: clamp(0pt, 8vw, 130pt);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 2.6px;
        background: linear-gradient(2deg, #8B6432 10.41%, #F1BF5A 43.78%, #FFDEA6 60.37%, #F1BF5A 75.95%, #8B6432 120.14%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        padding: 0pt 10pt;
    }

    img {
        position: absolute;
        width: clamp(0pt, 7vw, 120pt);
    }

    .transp {
        opacity: 0.5;
    }

    .t1 {
        /* left: 2vw;
        top: 200pt; */
        left: 10%;
        top: 45%;
    }

    .t2 {
        left: 35%;
        top: 20%;
    }

    .t3 {
        right: 35%;
        top: 25%;
    }

    .t4 {
        right: 11%;
        top: 45%;
    }

    .a1 {
        /* left: 2vw;
        top: 200pt; */
        left: 15%;
        top: 80%;
        width: clamp(0pt, 15vw, 220pt);

        animation: toy1 5s ease-in-out infinite both;
    }

    .a2 {
        left: 18%;
        top: 15%;
        width: clamp(0pt, 8vw, 150pt);
        animation: toy2 5s ease-in-out infinite both;
    }

    .a3 {
        right: 20%;
        top: 12%;
        width: clamp(0pt, 8vw, 180pt);
        animation: toy3 5s ease-in-out infinite both;
    }

    .a4 {
        right: 13%;
        top: 80%;
        width: clamp(0pt, 15vw, 250pt);
        animation: toy4 5s ease-in-out infinite both;
    }

}

@keyframes toy1 {
    0% {
        transform: rotateZ(0deg);
        left: 15%;
        top: 80%;
    }
    50% {
        transform: rotateZ(-15deg);
        left: 15%;
        top: 70%;
    }
    100% {
        transform: rotateZ(0deg);
        left: 15%;
        top: 80%;
    }
}

@keyframes toy2 {
    0% {
        left: 18%;
        top: 17%;
    }
    50% {
        left: 18%;
        top: 5%;
    }
    100% {
        left: 18%;
        top: 17%;
    }
}

@keyframes toy3 {
    0% {
        transform: rotateZ(0deg);
        right: 20%;
        top: 12%;
    }
    50% {
        transform: rotateZ(15deg);
        right: 20%;
        top: 2%;
    }
    100% {
        transform: rotateZ(0deg);
        right: 20%;
        top: 12%;
    }
}

@keyframes toy4 {
    0% {
        right: 13%;
        top: 85%;
    }
    50% {
        right: 13%;
        top: 72%;
    }
    100% {
        right: 13%;
        top: 85%;
    }
}

@media screen and (max-width: 768px) {
    .title {
        padding: clamp(0pt, 10vw, 50pt) 20pt;
        padding-bottom: clamp(0pt, 4vw, 20pt);

        p {
            font-size: clamp(0pt, 8vw, 130pt);
        }

        img {
            display: none;
        }
    }
}

.selector {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: -24px;
    border-radius: 40pt;
    border: 2pt solid #8B6432;
    position: relative;
    padding: 3pt 3pt;
    background-color: #121034;
    transition-duration: 0.4s;
    filter: drop-shadow(0pt 0px 0px #f7a53900);

    &:hover {
        transform: scale(1.01);
        filter: drop-shadow(0pt 0px 10px #f7a5393a);
    }

    .indicator {
        position: absolute;
        background: linear-gradient(90deg, #0F0E2C -26.56%, #2A216D 16.04%, #372BA3 60.08%, #6358E4 106.53%);
        height: calc(100% - 6pt);
        width: 0px;
        border-radius: 37pt;
        z-index: -1;
        /* transition-duration: 0.5s; */
        left: 0px;
    }

    .anim {
        -webkit-animation: chan 0.4s ease-in-out forwards;
        animation: chan 0.4s ease-in-out forwards;
    }

    .button {
        display: flex;
        padding: clamp(0pt, 1.5vw, 16px) clamp(0pt, 3vw, 57.6px);
        justify-content: center;
        align-items: center;
        gap: 10.169px;
        flex-shrink: 0;
        border: none;

        color: #B29DFF;
        text-align: center;
        font-family: Outfit;
        font-size: clamp(0pt, 3.5vw, 28.8px);
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: 0.576px;
        background: #B29DFF;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: filter 0.5s ease-in-out, transform 0.5s ease-in-out;

        &:hover {
            filter: drop-shadow(0px 0px 10px #ffffff66);
            transform: scale(1.1);
        }

        &.active {
            background: linear-gradient(56deg, #8B6432 6.81%, #F1BF5A 36.71%, #D4AF72 51.23%, #F1BF5A 64.86%, #8B6432 94.76%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        &.active:hover {
            filter: drop-shadow(0px 0px 10px #ffe20466);
            transform: scale(1.1);
        }
    }
}

@media screen and (max-width: 768px) {
    .selector {
        padding: 3pt 3pt;
        border: 1pt solid #8B6432;

        .button {
            padding: clamp(0pt, 1.5vw, 16px) clamp(0pt, 3vw, 57.6px);
            gap: 10.169px;

            font-size: clamp(0pt, 4.5vw, 38.8px);
        }
    }
}

@keyframes chan {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        filter: blur(0px);
    }

    50% {
        -webkit-transform: scale(1.1, 0.8);
        transform: scale(1.1, 0.8);
        filter: blur(1.5pt);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        filter: blur(0px);
    }
}

.switch-container {
    display: flex;
    align-items: center;
    gap: 23px;
    padding: clamp(0pt, 4vw, 24pt);

    p {
        text-align: center;
        font-family: Outfit;
        font-size: clamp(0pt, 4vw, 22pt);
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: 0.48px;
        user-select: none;

        background: linear-gradient(56deg, #8B6432 6.81%, #F1BF5A 36.71%, #D4AF72 51.23%, #F1BF5A 64.86%, #8B6432 94.76%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition-duration: 0.5s;

        &:hover {
            filter: drop-shadow(0pt 0px 10px #f7a5393a);
            transform: scale(1.1);
        }
    }

    .switch {
        /* position: relative; */
        display: flex;
        height: clamp(0pt, 7vw, 40pt);
        aspect-ratio: 2/1;
        /* width: clamp(0pt, 14vw, 80pt); */
        border-radius: 20pt;
        border: 2pt solid #8B6432;
        /* padding: 3pt; */
        background: none;
        transition-duration: 0.5s;
        background-color: #121034;

        &.active {
            .indicator {
                left: 50%;
                background-position: 100% 0%;
            }
        }

        &:hover {
            filter: drop-shadow(0pt 0px 10px #f7a5393a);
            transform: scale(1.05);

            .indicator {
                transform: scale(0.9);
            }
        }

        .indicator {
            position: relative;
            left: 0;
            height: calc(100% - 6pt);
            margin: 3pt;
            aspect-ratio: 1;
            /* width: calc(50% - 6pt); */
            border-radius: 23.81px;
            background: linear-gradient(90deg, #0F0E2C -56.56%, #2A216D -16.04%, #372BA3 30.08%, #6358E4 126.53%);
            transition-duration: 0.4s;
            background-size: 200% 200%;

            background-position: 0% 0%;
            z-index: 10;

        }
    }
}

@media screen and (max-width: 768px) {
    .switch-container {
        gap: 15px;

        p {
            font-size: clamp(0pt, 4vw, 18pt);
        }

        .switch {
            height: clamp(0pt, 8vw, 40pt);
            border-radius: 20pt;
            border: 1pt solid #8B6432;
        }
    }
}

.no-active {
    margin-top: auto;
    margin-bottom: auto;
    padding-bottom: clamp(0pt, 20vw, 250pt);
    color: #DAD4FF;
    text-align: center;
    font-family: Mercadillo;
    font-size: clamp(0pt, 10vw, 100pt);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    animation: open 0.4s ease-in-out both;
}

.bonus-container {
    display: flex;
    flex-direction: column;
    gap: clamp(0pt, 1vw, 15pt);
    width: clamp(0pt, 94vw, 1200pt);
    /* background-color: #0F0E2C; */
    align-items: center;
    margin-top: clamp(0pt, 5vw, 70pt);
    margin-bottom: clamp(0pt, 6vw, 100pt);

    .row {
        display: flex;
        flex-direction: row;
        gap: clamp(0pt, 1vw, 15pt);

        width: 100%;

        .container {
            .text {
                max-width: 100%;
                min-width: 90%;
            }

            img {
                width: clamp(0pt, 12vw, 200pt);
            }
        }
    }

    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        background-size: cover;
        background-position: center;
        padding: clamp(0pt, 2vw, 20pt) 0pt;

        border-radius: clamp(0pt, 2vw, 20pt);
        border: clamp(0pt, 0.5vw, 5.5pt) solid #362B8F;
        transition-duration: 0.5s;

        animation: open 0.4s ease-in-out backwards;

        &:hover {
            transform: scale(1.01);
            filter: drop-shadow(0px 0px 10px #5f589487);

            img {
                transform: scale(1.05);
            }

            a {
                filter: drop-shadow(0px 0px 10px #ffd1825c);
            }
        }

        img {
            padding: clamp(0pt, 1vw, 15pt) 0pt;
            margin-top: auto;
            margin-bottom: auto;
            width: clamp(0pt, 15vw, 250pt);
            transition-duration: 0.5s;
            filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.536));

            &:hover {
                transform: scale(1.1);
            }
        }

        .description {
            color: #FFF;
            text-align: center;
            font-family: Outfit;
            font-size: clamp(0pt, 2vw, 20pt);
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            text-transform: uppercase;

            margin-bottom: clamp(0pt, 1vw, 14pt);
            filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.681));
        }

        .text {
            display: flex;
            padding: clamp(0pt, 0.5vw, 4pt);
            justify-content: center;
            align-items: center;
            gap: clamp(0pt, 1vw, 16px);
            /* width: clamp(0pt, 37%, 450pt); */
            max-width: 40%;
            min-width: 30%;
            width: max-content;

            border-radius: 10pt;
            background: #242164;

            margin-bottom: clamp(0pt, 1.2vw, 14pt);
            filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.393));

            p {
                width: 50%;
                text-align: center;
                text-align: center;
                font-family: Outfit;
                font-size: clamp(0pt, 1.2vw, 16pt);
                font-style: normal;
                font-weight: 400;
                line-height: normal;
                text-transform: uppercase;
                /* white-space: nowrap; */
                /* overflow: visible; */

                background: var(--saini-purple, linear-gradient(67deg, #9090FF 19.14%, #7979FC 70.52%));
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }

        .button {
            padding: clamp(0pt, 0.7vw, 6pt) clamp(0pt, 2vw, 16pt);
            margin-bottom: clamp(0pt, 1vw, 14pt);

            border-radius: 24px;
            background: linear-gradient(2deg, #8B6432 10.41%, #F1BF5A 43.78%, #FFDEA6 60.37%, #F1BF5A 75.95%, #8B6432 120.14%);

            color: #19182F;
            text-align: center;
            font-family: Outfit;
            font-size: clamp(0pt, 1.7vw, 16pt);
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            letter-spacing: 0.32px;
            text-decoration: none;
            text-transform: uppercase;
            transition-duration: 0.5s;
            filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.681));

            &:hover {
                transform: scale(1.1);
                filter: drop-shadow(0px 0px 10px #ffbe4e7b) brightness(1.2);
            }
        }

        .warning {
            color: #FFF;
            text-align: center;
            font-family: Outfit;
            font-size: clamp(0pt, 1.25vw, 14pt);
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            letter-spacing: 0.28px;
            filter: drop-shadow(0px 0px 2px rgb(0, 0, 0));
        }
    }
}

@keyframes open {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@media screen and (max-width: 768px) {
    .bonus-container {
        gap: clamp(0pt, 4vw, 25pt);
        margin-top: clamp(0pt, 4vw, 30pt);
        margin-bottom: clamp(0pt, 6vw, 70pt);
        width: clamp(0pt, 90vw, 90vw);

        .row {
            flex-direction: column;
            gap: clamp(0pt, 4vw, 25pt);

            .container {
                .text {
                    width: clamp(0pt, 80%, 450pt) !important;
                }

                img {
                    width: clamp(0pt, 40vw, 400pt);
                }
            }
        }

        .container {
            padding: clamp(0pt, 4vw, 20pt) 0pt;
            aspect-ratio: 4/3.1;

            border-radius: clamp(0pt, 5vw, 35pt);
            border: clamp(0pt, 1vw, 4.5pt) solid #362B8F;

            img {
                padding: clamp(0pt, 2vw, 25pt) 0pt;
                width: clamp(0pt, 40vw, 400pt);
            }

            .description {
                font-size: clamp(0pt, 5.3vw, 50pt);
                margin-bottom: clamp(0pt, 3vw, 14pt);
            }

            .text {
                padding: clamp(0pt, 1vw, 4pt);
                gap: clamp(0pt, 2vw, 16px);
                width: max-content;
                max-width: 95%;
                min-width: 80%;
                margin-bottom: clamp(0pt, 3vw, 20pt);

                p {
                    font-size: clamp(0pt, 3.5vw, 16pt);
                }
            }

            a {
                padding: clamp(0pt, 1.7vw, 6pt) clamp(0pt, 3.5vw, 16pt);
                margin-bottom: clamp(0pt, 3vw, 14pt);
                font-size: clamp(0pt, 3.5vw, 24pt);
            }

            .warning {
                font-size: clamp(0pt, 3.25vw, 14pt);
            }
        }
    }
}