body {
    padding-top: 70px;
}


/* ============================================================
   Page design — background & hero banner (wave variant)
   ============================================================ */

/* Tokens */

.lp {
    /* Palette: dark purple, black, gray */
    --c-black: #0e0d11;
    --c-charcoal: #17161a;
    --c-graphite: #2a2830;
    --c-gray-dark: #18171c;
    --c-gray-light: #e7e6eb;
    --c-bone: #f1eef6;
    --c-lilac: #b7aacf;
    --c-purple-deep: #34156a;
    --c-purple: #4b1e8a;
    --c-purple-mid: #6130b3;
    --c-purple-light: #7a4fd0;

    /* Header */
    --hero-bg: var(--c-charcoal);
    --hero-title: var(--c-bone);
    --hero-subtitle: var(--c-lilac);

    /* Transition bands: solid accent, then a lighter echo blending into main */
    --band-accent: var(--c-purple);
    --band-echo: color-mix(in srgb, var(--c-purple) 30%, var(--main-bg));

    /* Main */
    --main-bg: var(--c-black);
    --main-text: #c8c4d0;
    --main-heading: var(--c-bone);
    --main-line: color-mix(in srgb, var(--c-purple-light) 28%, var(--main-bg));

    /* Layout grid: one column line per content column, rails on the content edges */
    --grid-cols: 12;
    --grid-span: calc(min(100%, var(--container)) - 2 * var(--gutter));
    --grid-cell: calc((min(100vw, var(--container)) - 2 * var(--gutter)) / var(--grid-cols));
    --grid-line: color-mix(in srgb, var(--main-heading) 5%, transparent);
    --grid-rail: color-mix(in srgb, var(--main-heading) 10%, transparent);

    --font: "Montserrat", "Segoe UI", system-ui, sans-serif;

    --container: 72rem;
    --gutter: clamp(1.25rem, 5vw, 3rem);
    --divider-h: clamp(3.5rem, 11vw, 10rem);
}

@media (max-width: 48rem) {
    .lp {
        --grid-cols: 6;
    }
}


/* Base */

.lp,
.lp *,
.lp *::before,
.lp *::after {
    box-sizing: border-box;
}

.lp {
    background: var(--main-bg);
    color: var(--main-text);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
}

.lp :focus-visible {
    outline: 2px solid var(--c-purple-light);
    outline-offset: 3px;
}


/* Hero banner */

.lp-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-content: center;
    min-height: min(80vh, 600px);
    min-height: min(80svh, 600px);
    max-height: 600px;
    padding-block: 2.5rem calc(var(--divider-h) + 1rem);
    overflow: hidden;
    background: var(--hero-bg);
    color: var(--hero-title);
}

.lp-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    text-align: center;
}

.lp-hero__title {
    margin: 0;
}

.lp-hero__title img {
    width: 36rem;
    max-width: 80%;
    height: auto;
}

.lp-hero__subtitle {
    max-width: 40ch;
    margin: clamp(0.5rem, 1.5vw, 1rem) auto 0 auto;
    font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
    line-height: 1.5;
    color: var(--hero-subtitle);
    text-wrap: pretty;
}

.lp-hero__socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

.lp-hero__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgb(122 79 208 / 0.35);
    border-radius: 999px;
    color: var(--c-lilac);
    font-size: 1.25rem;
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.lp-hero__socials a:hover {
    color: var(--c-bone);
    border-color: var(--c-purple-light);
    background: rgb(122 79 208 / 0.15);
}

/* Portrait figures flanking the banner content. They sit behind the wave bands
   and take 90% of the hero height: the picture rises out of the wave and is
   cut off at the bottom by it. Desktop only. */
.lp-hero__figure {
    display: none;
    position: absolute;
    z-index: 1;
    bottom: 0;
    height: 90%;
    pointer-events: none;
}

.lp-hero__figure--left {
    left: 6vw;
}

.lp-hero__figure--right {
    right: 6vw;
}

@media (min-width: 950px) {
    .lp-hero__figure {
        display: block;
    }
}

/* Mobile: size the hero to its content instead of a fixed viewport height */
@media (max-width: 949px) {
    .lp-hero {
        min-height: 0;
        max-height: none;
        padding-block: 3rem calc(var(--divider-h) + 1rem);
    }
}


/* Decor, grid overlay & header -> main transition */

.lp-decor {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.lp-divider {
    display: none;
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    z-index: 2;
    width: 100%;
    height: var(--divider-h);
}

.lp-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--grid-rail) 0 1px, transparent 1px),
        repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px calc(100% / var(--grid-cols))),
        linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px);
    background-size:
        var(--grid-span) 100%,
        var(--grid-span) 100%,
        100% var(--grid-cell);
    background-position: 50% 0, 50% 0, 0 0;
}

/* The grid rises out of the wave and fades before it reaches the headline. */
.lp-grid--hero {
    background-position: 50% 100%, 50% 100%, 0 100%;
    -webkit-mask-image: linear-gradient(to top, #000 var(--divider-h), transparent 75%);
    mask-image: linear-gradient(to top, #000 var(--divider-h), transparent 75%);
}

/* In the main area the grid fades in below the transition and out near the bottom. */
.lp-grid--main {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14rem, #000 calc(100% - 10rem), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 14rem, #000 calc(100% - 10rem), transparent);
}

.lp-band--echo {
    fill: var(--band-echo);
}

.lp-band--main {
    fill: var(--main-bg);
}


/* Wave variant */

.lp[data-variant="wave"] .lp-decor--wave,
.lp[data-variant="wave"] .lp-divider--wave {
    display: block;
}

.lp[data-variant="wave"] {
    --divider-h: clamp(5rem, 16.7vw, 15rem);
    --hero-bg:
        radial-gradient(55% 70% at 62% 78%, rgb(255 255 255 / 0.07), transparent 70%),
        radial-gradient(45% 60% at 8% 0%, rgb(75 30 138 / 0.35), transparent 70%),
        radial-gradient(40% 55% at 100% 35%, rgb(75 30 138 / 0.22), transparent 70%),
        linear-gradient(100deg, var(--c-black) 0%, var(--c-charcoal) 40%, #232128 70%, var(--c-black) 100%);
}

/* Wave bands: two translucent hazes lead into the solid accent */

.lp-band--haze-far {
    fill: var(--c-purple-light);
    opacity: 0.06;
}

.lp-band--haze-near {
    fill: var(--c-purple-light);
    opacity: 0.1;
}

.lp-divider--wave .lp-band--accent {
    fill: url("#lp-wave-accent-fill");
}

.lp-wave-crest {
    fill: none;
    stroke: url("#lp-wave-crest-stroke");
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

/* Diamonds: filled shapes, outline echoes and edge construction lines */

.lp-diamond {
    position: absolute;
    aspect-ratio: 1;
    rotate: 45deg;
}

/* Extends the square's top and left edges past its corners (after rotation: the two upper edges). */
.lp-diamond--lined::before,
.lp-diamond--lined::after {
    content: "";
    position: absolute;
}

.lp-diamond--lined::before {
    top: 0;
    left: -150%;
    width: 400%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--c-purple-light) 38% 62%, transparent);
}

.lp-diamond--lined::after {
    top: -150%;
    left: 0;
    width: 1px;
    height: 400%;
    background: linear-gradient(to bottom, transparent, var(--c-purple-light) 38% 62%, transparent);
}

.lp-diamond--top-large {
    top: -9vw;
    left: 7vw;
    width: clamp(7rem, 16vw, 17rem);
    background: linear-gradient(to bottom right, var(--c-purple) 20%, transparent 95%);
    opacity: 0.8;
}

.lp-diamond--top-small {
    top: -3vw;
    left: 19vw;
    width: clamp(4rem, 9vw, 10rem);
    background: linear-gradient(to bottom right, var(--c-purple-light) 0%, transparent 90%);
    opacity: 0.3;
}

.lp-diamond--top-frame {
    top: -2vw;
    left: 14vw;
    width: clamp(5rem, 13vw, 14rem);
    border: 1px solid rgb(122 79 208 / 0.3);
}

.lp-diamond--side {
    top: 14%;
    right: -9vw;
    width: clamp(9rem, 24vw, 24rem);
    background: linear-gradient(to bottom right, var(--c-purple) 10%, transparent 85%);
    opacity: 0.7;
}

.lp-diamond--side-frame {
    top: 24%;
    right: -3vw;
    width: clamp(9rem, 24vw, 24rem);
    border: 1px solid rgb(122 79 208 / 0.22);
}

.lp-diamond--shadow {
    bottom: -7vw;
    right: 9vw;
    width: clamp(7rem, 17vw, 17rem);
    background: linear-gradient(to bottom right, var(--c-graphite), var(--c-black) 70%);
    opacity: 0.9;
}

.lp-diamond--outline {
    top: 16%;
    right: 27vw;
    width: clamp(2.5rem, 5vw, 5rem);
    border: 1px solid rgb(122 79 208 / 0.35);
}

.lp-diamond--spark {
    top: 30%;
    right: 24vw;
    width: 0.625rem;
    background: var(--c-purple-light);
}


/* Main area */

.lp .section01 {
    position: relative;
    background: none;
    padding-top: 30px;
}

.lp .section01 .centerCointainer {
    position: relative;
}


/* Contact */

.contact {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 40px;
    flex-wrap: wrap;
}

.contact img {
    height: 60px;
    margin: 0 15px;
    cursor: pointer;
}

.centerHeader {
    text-align: center;
    width: 100%;
    color: white;
    font-weight: 400;
    font-size: 32px;
}

@media (max-width: 1060px) {
    .contact img {
        height: 40px;
        margin: 0 15px 20px 15px;
    }
}


/* Casino offer section */

.casinoOfferSection .quickFilterWrapper {
    margin-top: 50px;
}

.casinoOfferSection .quickFilterWrapper .quickFilter button:not(.active) {
    background-color: #646d7ca3;
}

/*.casinoOfferSection .quickFilterWrapper .quickFilter button.active {
    background-color: #b95e31;
}*/

.casinoOfferSection .filterOptions {
    background-color: #2b2e33;
}

.casinoOfferSection .offer-list .offer .offerWrapper {
    background: linear-gradient(to bottom right, rgb(30, 31, 41), #3e4248);
    border-radius: 10px;
}

.casinoOfferSection .offer-list .offer .toggleDetails {
    background-color: rgba(255, 255, 255, 0.11);
}

.casinoOfferSection .offer-list .offer .reviewLink {
    background-color: rgba(255, 255, 255, 0.11);
}

.casinoOfferSection .offer-list .offer .toggleDetails:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/*.casinoOfferSection .offer-list .offer .playButton {
    background-color: #ffffffec;
    color: #000000de;
}*/


/*.casinoOfferSection .offer-list .offer .playButton:hover {
    background-color: #f9c314;
}*/

.casinoOfferSection .flLabelInputBox .label {
    background-color: #31343b;
}

.casinoOfferSection .offer-list .offer .infos p {
    background-color: 3px 3px 0px rgba(0, 0, 0, 0.37);
}

.offers-filter-container .offer-section-container .topBar .sortOptions button i {
    color: #ff545a;
}

.filterOptions .optionContainer .title .preTextIcon {
    color: #ff545a;
}

.filterOptions .checkbox-container input:checked ~ .checkmark {
    background-color: #ff545a;
}

@media (max-width: 600px) {
    .offers-filter-container .offer-section-container .topBar .sortOptions button i {
        color: rgba(162, 207, 243, 0.9);
    }

    .filterOptions .optionContainer .title .preTextIcon {
        color: rgba(148, 197, 236, 0.9);
    }

    .filterOptions .checkbox-container input:checked ~ .checkmark {
        background-color: #2196F3;
    }

    .offers-filter-container .offer-section-container .topBar .sortOptions button {
        background-color: #000;
    }

    .offers-filter-container .openFilterMobile {
        background-color: #000;
    }
}


/* bottomSection */
* {
    --bottomSection-bg-color: #17161a;
}

.bottomSection {
    width: 100%;
    position: relative;
    padding: 100px 0;
    background-color: var(--bottomSection-bg-color);
}

.bottomSection .topBorder_wave {
    position: absolute;
    width: 100% !important;
    left: 0;
}

.bottomSection .topBorder_wave path {
    fill: var(--bottomSection-bg-color) !important;
}

.bottomSection .topBorder_wave:nth-child(1) {
    height: 150px;
    top: -150px;
}

.bottomSection .topBorder_wave:nth-child(2) {
    height: 230px;
    top: -230px;
    opacity: 0.5;
}

@media (max-width: 600px) {
    .bottomSection {
        width: 100%;
        padding-bottom: 120px;
    }

    .bottomSection .topBorder_wave:nth-child(1) {
        height: 70px;
        top: -70px;
    }

    .bottomSection .topBorder_wave:nth-child(2) {
        height: 120px;
        top: -120px;
    }
}


/* SIMPLE OFFERS */
.simpleOffersContainer .offer-container .offer {
    margin-bottom: 24px !important;
}

.simpleOffersContainer .offer-container .offer .mainInfos .infos {
    flex-direction: column;
    justify-content: center;
    /*padding: 10px 0;*/
}

.simpleOffersContainer .offer-container .offer .mainInfos .infos .mainText {
    font-size: 36px;
    white-space: nowrap;
    width: 100%;
    margin: 0;
}

.simpleOffersContainer .offer-container .offer .mainInfos .infos .mainText .bigText {
    color: #FFD700;
    font-weight: bold;
    font-size: 54px;
}

.offerDetails .bodyContainer .bonusInfos {
    display: flex;
    flex-direction: column;
}

.offer-list .offer .infos p.subText, .offerDetails .bodyContainer .bonusInfos p.subText {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    text-shadow: none;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.offer-list .offer .infos span, .offerDetails .bodyContainer .bonusInfos span {
    font-size: 16px;
}

.offer-list .offer .infos p.subText .xbold, .offerDetails .bodyContainer .bonusInfos p.subText .xbold {
    font-size: 18px;
    font-weight: 500;
}

.simpleOffersContainer .offer-list .offer .offerWrapper {
    border-radius: 10px;
}

.simpleOffersContainer .offer-container .offer .bottomSection1 {
    display: flex;
    align-items: center;
    flex-direction: column;
    /*gap: 8px;*/
    padding: 12px 14px;
    color: #fff;
    border-top: 2px solid #FFD700;
}

.simpleOffersContainer .offer-container .offer .bottomSection1 .subText {
    font-weight: 400;
    font-size: 18px;
    text-align: center;
    width: 100%;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.simpleOffersContainer .offer-container .offer .bottomSection1 .subText .xbold {
    font-weight: 600;
    font-size: 20px;
}

.simpleOffersContainer .offer-container .offer .bottomSection1 .benefitsList {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    color: #fff;
    justify-content: center;
}

.simpleOffersContainer .offer-container .offer .bottomSection1 .benefitsList > span {
    display: flex;
    align-items: center;
}

.simpleOffersContainer .offer-container .offer .bottomSection1 .benefitsList > span .xicon {
    color: #FFD700;
    margin-right: 4px;
    font-weight: bold;
}

.simpleOffersContainer .offer-container .offer .bottomSection1 .benefitsList > span img {
    height: 1.6em;
    margin-left: 6px;
}

.simpleOffersContainer .offer-container .offer .bottomSection2 {
    background-color: #1a1c20;
    padding: 15px 20px;
    font-size: 16px;
    border-radius: 0 0 10px 10px;
}

.simpleOffersContainer .offer-container .offer .bottomSection2 p {
    width: 100%;
    text-align: center;
    color: #fff;
}

.simpleOffersContainer .offer-container .offer .bottomSection2 p .goldText {
    color: #FFD700;
    font-weight: bold;
    font-size: 18px;
}

.simpleOffersContainer .offer-container .offer .details .casinoInfos .fetureList {
    max-width: 710px;
}

@media (min-width: 950px) {
    .noDesktop {
        display: none;
    }
}

@media (max-width: 950px) {
    .noMobile {
        display: none;
    }

    .simpleOffersContainer .offer-container .offer .mainInfos .infos .mainText {
        white-space: normal;
        font-size: 25px;
    }

    .simpleOffersContainer .offer-container .offer .mainInfos .infos .mainText .bigText,
    .offerDetails .bonusInfos .mainText .bigText {
        color: #FFD700;
        font-weight: bold;
        font-size: 36px !important;
    }

    .simpleOffersContainer .offer-container .offer .toggleDetails {
        /*width: 100%;
        text-align: center;*/
    }
}