:root {
    /* Global */
    --pallete-1: #000000;
    --pallete-2: #381e09;
    --pallete-3: #6d3d1f;
    --pallete-4: #1F1F1F;
    --no-bg: transparent;
    --icon-color: #e8ba51;
    --normal-link: #ffdead; /* Color for link ref transaction */
    --bg-toggle-password: #ffffff;
    
    --bg-card-promo: transparent; /* Background color for card promo */

    /* Header */
    --text-header-content: #ffffff;
    --text-user-data: #ffffff;
    --text-menu-navigation: #ffffff;
    --running-text-info: #ff0000;
    --running-text-content: #ffffff;
    --text-running-text-info: #ffffff;
    --text-running-text-content: #ff0000;
    --text-game-navigation: #ffffff;
    --text-game-navigation-hover: #ff0000;
    --headnav-item-bg: rgba(30, 30, 30, .55);
    --provider-item-bg: rgba(30, 30, 30, .55);

    /* Main */
    --text-main: #ffffff;
    --text-widget-depo: #ffffff;
    --widget-card: linear-gradient(0deg, #8c3b00 0%, #ffc800 44%, #845500 74%);
    --text-widget-wd: #ffffff;
    --lottery-result-card:#1F1F1F;
    --lottery-result-1:#ffffff;
    --lottery-result-2:#f0b000;
    --text-game-favorite-title: #000000;
    --text-game-favorite-name: #ffffff;
    --text-game-favorite-provider: #FFBA00;
    --btn-login-play: #6ec20b;
    --btn-login-play-text: #000000;
    --btn-play-demo: #ff0000;
    --btn-play-demo-text: #000000;
    --text-static-content-sports: #000000;
    --text-static-content-casino: #000000;
    --text-static-content-arcade: #000000;
    --static-content-sports: #2d83dc;
    --static-content-casino: #31a4a5;
    --static-content-arcade: #eb3131;
    --game-favorite-box: #ffffff;
    --game-provider-hover: #ffffff;
    --game-provider-active: #ffffff;
    --game-name: #ffffff;
    --game-provider: #ffffff;
    --information-page-nav-text: #ffffff;
    --information-page-nav-text-active: #000000;
    --information-page-nav-text-hover: #ffffff;
    --information-page-nav-bg: #000000;
    --information-page-nav-bg-active: #ffffff;
    --tag-new-bg: #ff0000;
    --tag-new-text: #ffffff;
    --tag-promo-bg: #ff0000;
    --tag-promo-text: #ffffff;
    --tag-panas-bg: #000000;
    --tag-panas-text: #ff0000;
    --tag-pemeliharaan-bg: #ff0000;
    --tag-pemeliharaan-text: #ffff00;
    --deposit-amount-select-border: #ffffff;
    --deposit-amount-select-bg-hover: #000023;
    --deposit-amount-select-border-hover: #0000ff;
    --deposit-pending-card-bg: #121212;
    --memo-nav-tabs-active: #8700ca;
    --memo-accordion-button: #52007b;
    --memo-accordion-body: #000023;
    --memo-font-created-by: #8700ca;
    --memo-message-card-header: #8700ca;
    --memo-title-background: #52007b;
    --memo-text-message: #000000;
    --deposit-hamburg: #6ec20b;
    --withdraw-hamburg: #ff0000;
    --transaction-history-hamburg: #0088cc;
    --deposit-hamburg-text: #ffffff;
    --withdraw-hamburg-text: #ffffff;
    --transaction-history-hamburg-text: #ffffff;
    --bg-btn-login: #ffea00;
    --bg-btn-register: #e6011c;

    --btn-logout-mobile : #dc3545;
    --btn-deposit-mobile : #198754;
    --btn-withdraw-mobile : #dc3545;
    --btn-history-transaction-mobile : #0dcaf0;

    /* Game Section */
    --box-game-item: #ffffff;

    /* Footer */
    --text-footer-deposit-method-title: #ffffff;
    --text-footer-deposit-method-content: #ffffff;
    --footer-deposit-method: #7da34b;
    --text-footer-contact-us-title: #ffffff;
    --text-footer-contact-us-content: #ffffff;
    --footer-contact-us: #a4f4fb;
    --text-footer-provider-title: #ffffff;
    --text-footer-provider-content: #ffffff;
    --text-footer-copyright: #ffffff;
    --primary-gradient: linear-gradient(0deg, #735721 0%, #f3c456 44%, #ba8d36 74%);
    --primary-color: #f3c456;
    --secondary-color: #e8ba51;
    --accent-background: linear-gradient(0deg, #735721 0%, #f3c456 44%, #ba8d36 74%);
    --bg-sidebar: rgba(10, 10, 10, 0.95);
    --bg-primary: rgba(10, 10, 10);
    --accent-color: #3a3000;
    --dark-color: #131313;
    --light-color: #fbfbfb;
    --primary-text-color: #fff;
    --text-color: #000;
    --text-color-secondary: #000;
    --text-footer: #e6e6e6;
    --icon-footer-color: #e8ba51;
    --text-secondary: #e0e0e0;
    --text-shadow: rgba(140, 91, 0, 0.5);
    --box-shadow: var(--box-shadow);
    --header-bg: rgb(65 35 9 / 84%);
    --header-shadow: rgba(0, 0, 0, 0.3);
    --card-provider-bg: rgba(0, 0, 0, 0.8);
    --card-bg: rgb(65 35 9 / 84%);
    --border-radius: 12px;
    --banner-border-radius: 6px;
    --box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    --transition: all 0.3s ease;
    --grid-text: #fff;
    --category-game-nav-bg: #5f5f5f2e;
    --gn-item-w: 130px;
    --gn-item-h: 100px;
    --gn-gap: 14px;
    --gn-r: 14px;
    --gn-border: #e8bb51c4;
    --gn-shadow: 0 8px 22px rgba(138, 138, 138, 0.144);
    --gn-shadow-hover: 0 14px 30px hsla(48, 100%, 67%, 0.315);
    --background-footer-mobile: rgba(10, 10, 10, 0.95);
    --btn-accent-shadow: rgba(255, 208, 0, 0.3);
    --btn-accent-shadow-hover: rgba(255, 208, 0, 0.5);
    --btn-shadow-hover: rgba(140, 91, 0, 0.6);
    --fav-bg:#4d3415;
    --fav-z-bg:0;
    --fav-z-content:2;
    --ub-bg: rgba(10,10,10,0.85);
    --ub-border: rgba(255,255,255,0.25);
    --ub-text: #cfd3d7;
    --ub-text-strong: #fff;
    --ub-accent: #e8ba51;
    --ub-gap: 16px;
    --ub-h: 40px;
    --ub-pad-y: 6px;
    --ub-radius: 10px;
    --dot-on:  #2ecc71;
    --dot-off: #ff4a4a;
    --title-lines: 2;
    --title-fs: .87rem;
    --title-lh: 1.25;
    --gold-1:#735721;
    --gold-2:#f3c456;
    --gold-3:#ba8d36;
    --gold-grad: linear-gradient(0deg,var(--gold-1),var(--gold-2) 44%,var(--gold-3) 74%);
    --text-strong:#fff;
    --sep:#ffffff1f;
    --nav-bg: var(--header-bg);
    --nav-border: rgba(255,255,255,.12);
    --nav-hover: rgba(255,255,255,.08);
    --nav-shadow: 0 10px 24px rgba(0,0,0,.35);
    --lotto-w: 240px;
    --lotto-h: 140px;
    --lotto-gap: 14px;
    --lotto-r: 16px;
    --lotto-border: rgba(255,255,255,.12);
    --lotto-shadow: 0 12px 30px rgba(0,0,0,.35);
    --lotto-shadow-sm: 0 8px 20px rgba(0,0,0,.28);
    --lotto-accent: #000000;
    --lotto-accent-2: #000000;
    --lotto-bonus-1: rgba(0, 0, 0, 0.25);
    --lotto-bonus-2: rgba(0, 0, 0, 0.18);
    --bg-lotto-ball: radial-gradient(140% 100% at 30% 25%, #fff 0%, #f3c456 45%, #ffd04d 65%, #a56b00 100%);
    --pill-border: rgba(255, 184, 77, 0.45);
    --pill-background: rgba(255, 213, 77, 0.12);
    --pill-text: #fffdf8;
    --sc-max: 1200px;
    --sc-gap: 20px;
    --sc-card-bg: var(--card-bg, rgba(26,26,26,.85));
    --sc-card-bd: rgba(255,255,255,.12);
    --sc-radius: 14px;
    --sc-shadow: 0 10px 26px rgba(0,0,0,.35);
    --sc-shadow-hover: 0 18px 40px rgba(0,0,0,.45);
    --sc-title-bg: var(--primary-gradient);
    --sc-title-text: #121212;
    --sc-title-ring: rgba(255,255,255,.2);
    --shadow-sc-title: rgba(243,196,86,.25);
    --fp-max: 2400px;
    --fp-gap: 18px;
    --fp-card-bd: rgba(255,255,255,.12);
    --fp-title-grad: var(--primary-gradient, linear-gradient(0deg,#735721 0%,#f3c456 44%,#ba8d36 74%));
    --fp-title-color: #121212;
    --fp-radius: 14px;
    --fp-shadow: 0 10px 24px rgba(0,0,0,.3);
    --fp-shadow-hover: 0 16px 36px rgba(0,0,0,.4);
    --box-game-item: #735721;
}
@font-face {
    font-family: 'asiasigma';
    src: url('../font/icomoon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'asiasigma2';
    src: url('../font/icomoon2.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'frabk';
    src: url('../font/frabk.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'frabkit';
    src: url('../font/frabkit.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
body, .offcanvas {
    margin: 0px;
    background: var(--pallete-1);
    color: white;
    font-family: 'frabk';
    line-height: normal;
}
.loader {
    position: fixed;
    z-index: 99999;
    background: black;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    display: flex;
    color: white;
    text-align: center;
    > .spinner{
        width: 100%;
        margin: auto;
        display: block;
        img{
            width: 10%;
        }
        > .text-spinner {
            width: 100%;
            margin: auto;
            display: block;
        }
    }
}
.hide {
    display: none;
}
#offcanvas {
    background-color: var(--pallete-1);
    .header-collapse{
        background-color: var(--pallete-2);
        cursor: pointer;
    }
    a {
        color: inherit;
        text-decoration: none;
    }
    .navigation-icon-box-svg {
        width: 24px;
        height: 24px;
        margin-right: 8px;
        vertical-align: middle;
    }
    .slot-svg, .casino-svg, .arcade-svg, .cockfight-svg, .promo-svg, .lottery-svg, .sport-svg, .fishing-svg {
        fill: var(--text-main);
    }
}
#header-content {
    background-color: var(--pallete-3);
    color: var(--text-header-content);
}
header {
    #header-part{
        background-color: var(--no-bg);
        padding-top: 10px;
        #header-logo-part {
            background-color: var(--no-bg);
        }
        #user-data {
            color: var(--text-user-data);
            > div > * > .user-data-icon{
                width: 20px;
                vertical-align: -5px;
            }
        }
    }
    #menu-navigation {
        > div {
            background-color: var(--pallete-2);
        }
        color: var(--text-menu-navigation);
    }
    #menu-navigation-home.active {
        text-decoration: underline;
    }
    #menu-navigation-rekening.active {
        text-decoration: underline;
    }
    #menu-navigation-riwayat-promosi.active {
        text-decoration: underline;
    }
    #transaction-navigation {
        background-color: var(--no-bg);
        > div > div > div{
            text-align: center;
        }
        > div > div > div > img:hover {
            box-shadow: 0px 0px 20px 2px #a38989;
        }
    }
    #running-text {
        background-color: var(--pallete-1);
        .running-info{
            background-color: var(--running-text-info);
            color: var(--text-running-text-info);
        }
        .running-content {
            background-color: var(--running-text-content);
            color: var(--text-running-text-content);
        }
    }
    #game-navigation {
        background-color: var(--no-bg);
        color: var(--text-game-navigation);
        .content{
            display: flex;
            align-items: center;
            flex-direction: row;
            align-content: center;
            justify-content: center;
        }
        .navigation-item {
            max-width: 90px;
            width: 23vw;
        }
        .navigation-item > a {
            width: 100%;
            font-weight: 600;
        }
        .navigation-item > div {
            width: 100%;
            font-weight: 600;
        }
        .navigation-item:hover {
            a{
                color: var(--text-game-navigation-hover);
            }
            div {
                color: var(--text-game-navigation-hover);
            }
            .slot-svg, .casino-svg, .arcade-svg, .cockfight-svg, .promo-svg, .lottery-svg, .sport-svg, .fishing-svg {
                fill: var(--text-game-navigation-hover);
            }
        }
        .navigation-item.active {
            color: var(--text-game-navigation-hover);
        }
        .navigation-item.active .slot-svg,
        .navigation-item.active .casino-svg,
        .navigation-item.active .arcade-svg,
        .navigation-item.active .cockfight-svg,
        .navigation-item.active .promo-svg,
        .navigation-item.active .lottery-svg,
        .navigation-item.active .sport-svg,
        .navigation-item.active .fishing-svg {
            fill: var(--text-game-navigation-hover);
        }
        .navigation-image {
            background: url('../../images/navicon.svg') no-repeat;
            display: inline-block;
            height: 60px;
            width: 60px;
            background-size: cover;
        }
        .slot-nav-img {
            background-position: -120px 0px;
        }
        .lottery-nav-img {
            background-position: -420px 0px;
        }
        .casino-nav-img {
            background-position: -480px 0px;
        }
        .arcade-nav-img {
            background-position: 0px 0px;
        }
        .fishing-nav-img {
            background-position: -300px 0px;
        }
        .cockfight-nav-img {
            background-position: -360px 0px;
        }
        .sportbook-nav-img {
            background-position: -60px 0px;
        }
        .promo-nav-img {
            background-position: -180px 0px;
        }
        .navigation-icon-box-svg {
            height: 60px;
            width: 60px;
        }
        .slot-svg, .casino-svg, .arcade-svg, .cockfight-svg, .promo-svg, .lottery-svg, .sport-svg, .fishing-svg {
            fill: var(--text-game-navigation);
        }
    }
}
main {
    .game-image{
        inline-size: 100%;
    }
    #widget-section {
    }
    #widget-depo {
        background: var(--widget-card);
        .title{
            color: var(--primary-text-color);
        }
        .name {
            margin-left: 0.5rem;
            font-weight: 500;
            color: #f5f5f5;
        }
        .amount {
            color: #ffc800;
            font-weight: 600;
        }
        .widget-content {
            background-color: var(--pallete-1);
            border: 0.75px solid #0b3358;
            margin-bottom: 3px;
            border-radius: .35rem;
            span:last-child{
                line-height: 1.7;
            }
            .depo-text {
                background-color: #6ec20b;
            }
        }
    }
    #widget-wd {
        background: var(--widget-card);
        .title{
            color: var(--primary-text-color);
        }
        .name {
            margin-left: 0.5rem;
            font-weight: 500;
            color: #f5f5f5;
        }
        .amount {
            color: #ffc800;
            font-weight: 600;
        }
        .widget-content {
            background-color: var(--pallete-1);
            border: 0.75px solid #0b3358;
            margin-bottom: 3px;
            border-radius: .35rem;
            span:last-child{
                line-height: 1.7;
            }
            .wd-text {
                background-color: #5d9ad3;
            }
        }
    }
    #lottery-result {
        background-color: var(--pallete-1);
        > div {
            background-color: var(--pallete-2);
        }
        .lottery-container {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .scroll-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            z-index: 10;
        }
        .scroll-btn.left {
            left: 10px;
        }
        .scroll-btn.right {
            right: 10px;
        }
        .lottery-content {
            display: flex;
            overflow-x: auto;
            padding: 10px 40px;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .lottery-item {
            flex-shrink: 0;
            width: 200px;
            max-width: 200px;
            margin: 0px 15px;
            padding: 5px 0;
            background-color: var(--lottery-result-card);
            border-radius: 10px;
            text-align: center;
        }
        .lottery-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 5px;
            letter-spacing: 2px;
            color: var(--lottery-result-2);
        }
        .lottery-number {
            font-size: 22px;
            font-weight: bold;
            letter-spacing: 5px;
            background-color: var(--lottery-result-2);
            color: var(--lottery-result-1);
        }
        .lottery-small {
            font-size: 16px;
            font-weight: bold;
            margin-top: 2px;
            letter-spacing: 2px;
            color: var(--lottery-result-2);
        }
        .lottery-date {
            font-size: 11px;
            font-weight: bold;
            letter-spacing: 1px;
            color: var(--lottery-result-2);
            opacity: 0.6;
        }
        .lottery-content::-webkit-scrollbar {
            display: none;
        }
    }
    #favorite-games {
        background-color: var(--pallete-1);
        .game-favorite-slot-image{
            inline-size: 100%;
            object-fit: cover;
            aspect-ratio: 4/3;
        }
        > div > div {
            border: 1px solid var(--text-game-favorite-provider);
        }
        .title-card {
            border-top-left-radius: 6px;
            border-top-right-radius: 23px;
            color: var(--text-game-favorite-title);
            border-bottom: 30px solid var(--text-game-favorite-provider);
            border-right: 0px solid transparent;
            height: 0px;
            display: inline-block;
            width: 230px;
            line-height: 30px;
            svg{
                float: right;
                margin-top: 4px;
            }
        }
        .title-card-trapezoid {
            vertical-align: bottom;
            height: 0px;
            display: inline-block;
            width: 20px;
            margin-left: -33px;
            border-bottom: 20px solid var(--text-game-favorite-provider);
            border-left: 25px solid transparent;
            border-right: 13px solid transparent;
        }
        > div > div > div > div {
            background-color: var(--game-favorite-box);
        }
        .game-fav-box > span:first-child {
            color: var(--text-game-favorite-name);
            font-weight: 500;
        }
        .game-fav-box > span:nth-child(2) {
            color: var(--text-game-favorite-provider);
        }
        .row {
            margin-left: 0 !important;
            margin-right: 0 !important;
            margin-top: -1px !important;
        }
        .game-card {
            position: relative;
            overflow: hidden;
        }
        .game-hover-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 2;
        }
        .game-card:hover .game-hover-overlay {
            display: flex;
        }
        .game-hover-overlay button {
            opacity: 0;
            transition: opacity 0.3s ease;
            width: 80%;
            max-width: 200px;
            text-align: center;
        }
        .game-card:hover .game-hover-overlay button {
            opacity: 1;
        }
        #btnLoginPlay {
            background-color: var(--btn-login-play);
            color: var(--btn-login-play-text);
        }
        #btnLoginPlay:hover {
            filter: brightness(0.8);
        }
        #btnPlayDemo {
            background-color: var(--btn-play-demo);
            color: var(--btn-play-demo-text);
        }
        #btnPlayDemo:hover {
            filter: brightness(0.8);
        }
    }
    #static-content-list {
        .col {
            position: relative;
        }
        .box {
            display: flex;
            align-items: center;
            justify-content: right;
            position: absolute;
            bottom: 10px;
            right: 10px;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 5px 10px;
            border-radius: 8px;
        }
        .provider-logo {
            width: 24px;
            height: 24px;
        }
        .provider {
            color: #fff;
            font-size: 14px;
        }
        #sportsbook {
            .title-card{
                border-top-left-radius: 6px;
                border-top-right-radius: 23px;
                color: var(--text-static-content-sports);
                border-bottom: 30px solid var(--static-content-sports);
                border-right: 0px solid transparent;
                height: 0px;
                display: inline-block;
                width: 190px;
                line-height: 30px;
                svg{
                    float: right;
                    margin-top: 4px;
                }
            }
            .title-card-trapezoid {
                vertical-align: bottom;
                height: 0px;
                display: inline-block;
                width: 20px;
                margin-left: -15px;
                border-bottom: 20px solid var(--static-content-sports);
                border-left: 5px solid transparent;
                border-right: 13px solid transparent;
            }
            .content {
                border: 1px solid var(--static-content-sports);
            }
        }
        #casino {
            .title-card{
                border-top-left-radius: 6px;
                border-top-right-radius: 23px;
                color: var(--text-static-content-casino);
                border-bottom: 30px solid var(--static-content-casino);
                border-right: 0px solid transparent;
                height: 0px;
                display: inline-block;
                width: 190px;
                line-height: 30px;
                svg{
                    float: right;
                    margin-top: 4px;
                }
            }
            .title-card-trapezoid {
                vertical-align: bottom;
                height: 0px;
                display: inline-block;
                width: 20px;
                margin-left: -15px;
                border-bottom: 20px solid var(--static-content-casino);
                border-left: 5px solid transparent;
                border-right: 13px solid transparent;
            }
            .content {
                border: 1px solid var(--static-content-casino);
            }
        }
        #arcade {
            .title-card{
                border-top-left-radius: 6px;
                border-top-right-radius: 23px;
                color: var(--text-static-content-arcade);
                border-bottom: 30px solid var(--static-content-arcade);
                border-right: 0px solid transparent;
                height: 0px;
                display: inline-block;
                width: 190px;
                line-height: 30px;
                svg{
                    float: right;
                    margin-top: 4px;
                }
            }
            .title-card-trapezoid {
                vertical-align: bottom;
                height: 0px;
                display: inline-block;
                width: 20px;
                margin-left: -15px;
                border-bottom: 20px solid var(--static-content-arcade);
                border-left: 5px solid transparent;
                border-right: 13px solid transparent;
            }
            > div {
                border: 1px solid var(--static-content-arcade);
            }
        }
        .row {
            margin-left: 0 !important;
            margin-right: 0 !important;
            margin-top: -1px !important;
        }
    }
    #slot-page {
        background-color: var(--pallete-2);
        padding-left: 0 !important;
        padding-right: 0 !important;
        color: var(--text-main);
        > #slot-providers {
            .game-provider{
                background-color: var(--pallete-3);
                border: 1px solid transparent;
                border-radius: 5px;
            }
            .game-provider:hover {
                border: 1px solid var(--game-provider-hover);
            }
            .active {
                border: 1px solid var(--game-provider-active);
            }
        }
        > #slot-game > div > div {
            background-color: var(--box-game-item);
            .game-fav-box > span:first-child {
                color: var(--game-name);
            }
            .game-fav-box > span:last-child {
                color: var(--game-provider) !important;
            }
        }
        .row {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
    }
    #lottery-page {
        background-color: var(--pallete-2);
        padding-left: 0 !important;
        padding-right: 0 !important;
        > #lottery-game > div > div {
            background-color: var(--pallete-3);
            .game-fav-box > span {
                color: var(--game-name);
            }
        }
    }
    #casino-page {
        background-color: var(--pallete-2);
        padding-left: 0 !important;
        padding-right: 0 !important;
        color: var(--text-main);
        > #casino-providers {
            .game-provider{
                background-color: var(--pallete-3);
                border: 1px solid transparent;
                border-radius: 5px;
            }
            .game-provider:hover {
                border: 1px solid var(--game-provider-hover);
            }
            .active {
                border: 1px solid var(--game-provider-active);
            }
        }
        > #casino-game > div > div {
            background-color: var(--box-game-item);
            .game-fav-box > span:first-child {
                color: var(--game-name);
            }
            .game-fav-box > span:last-child {
                color: var(--game-provider) !important;
            }
        }
        .row {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
    }
    #fishing-page {
        background-color: var(--pallete-2);
        padding-left: 0 !important;
        padding-right: 0 !important;
        color: var(--text-main);
        > #fishing-providers {
            .game-provider{
                background-color: var(--pallete-3);
                border: 1px solid transparent;
                border-radius: 5px;
            }
            .game-provider:hover {
                border: 1px solid var(--game-provider-hover);
            }
            .active {
                border: 1px solid var(--game-provider-active);
            }
        }
        > #fishing-game > div > div {
            background-color: var(--box-game-item);
            .game-fav-box > span:first-child {
                color: var(--game-name);
            }
            .game-fav-box > span:last-child {
                color: var(--game-provider) !important;
            }
        }
        .row {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
    }
    #cockfight-page {
        background-color: var(--no-bg);
        color: var(--text-main);
    }
    #arcade-page {
        background-color: var(--pallete-2);
        padding-left: 0 !important;
        padding-right: 0 !important;
        color: var(--text-main);
        > #arcade-providers {
            .game-provider{
                background-color: var(--pallete-3);
                border: 1px solid transparent;
                border-radius: 5px;
            }
            .game-provider:hover {
                border: 1px solid var(--game-provider-hover);
            }
            .active {
                border: 1px solid var(--game-provider-active);
            }
        }
        > #arcade-game > div > div {
            background-color: var(--box-game-item);
            .game-fav-box > span:first-child {
                color: var(--game-name);
            }
            .game-fav-box > span:last-child {
                color: var(--game-provider) !important;
            }
        }
        .row {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
    }
    #sport-page {
        background-color: var(--pallete-2);
        padding-left: 0 !important;
        padding-right: 0 !important;
        color: var(--text-main);
        > #sports-game > div > div {
            background-color: var(--box-game-item);
            .game-fav-box > span {
                color: var(--game-name);
            }
        }
    }
    #esport-page {
        background-color: var(--pallete-2);
        padding-left: 0 !important;
        padding-right: 0 !important;
        color: var(--text-main);
        > #esports-game > div > div {
            background-color: var(--pallete-3);
            .game-fav-box > span {
                color: var(--game-name);
            }
        }
    }
    #cockfight-page {
        background-color: var(--pallete-2);
        padding-left: 0 !important;
        padding-right: 0 !important;
        > #cockfight-game > div > div {
            background-color: var(--pallete-3);
            .game-fav-box > span {
                color: var(--game-name);
            }
        }
    }
    #transaction-history {
        background-color: var(--pallete-2);
        color: var(--text-main);
    }
    #withdraw-page {
        background-color: var(--pallete-2);
        color: var(--text-main);
    }
    #deposit-page {
        background-color: var(--pallete-2);
        color: var(--text-main);
    }
    #information-page {
        background-color: var(--pallete-2);
        color: var(--text-main);
        padding-left: 0 !important;
        padding-right: 0 !important;
        .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link {
            color: var(--information-page-nav-text);
            background-color: var(--information-page-nav-bg);
        }
        .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link:hover {
            border: 1px solid var(--information-page-nav-text-hover);
        }
        .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
            color: var(--information-page-nav-text-active);
            background-color: var(--information-page-nav-bg-active);
        }
    }
    #promo-history-page {
        background-color: var(--pallete-2);
        color: var(--text-main);
    }
    #promo-progress-page {
        background-color: var(--pallete-2);
        color: var(--text-main);
    }
    #promo-take-page {
        background-color: var(--pallete-2);
        color: var(--text-main);
    }
    #promo-view-page {
        background-color: var(--pallete-2);
        color: var(--text-main);
    }
    #profile-page {
        background-color: var(--pallete-2);
        color: var(--text-main);
    }
    #change-password-page {
        background-color: var(--pallete-2);
        color: var(--text-main);
    }
    #rekening-page {
        background-color: var(--pallete-2);
        color: var(--text-main);
    }
    #register-page {
        background-color: var(--pallete-2);
        color: var(--text-main);
    }
    .deposit-pending-card {
        background-color: var(--deposit-pending-card-bg) !important;
        color: var(--text-main) !important;
    }
    .memo-page {
        background-color: var(--pallete-2) !important;
        .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
            color: var(--text-main) !important;
            background-color: var(--memo-nav-tabs-active) !important;
        }
        .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link {
            color: var(--text-main) !important;
        }
        .accordion-item {
            background-color: var(--no-bg) !important;
            border: none;
        }
        .accordion-button {
            color: var(--text-main) !important;
            background-color: var(--memo-accordion-button) !important;
        }
        .accordion-body {
            color: var(--text-main) !important;
            background-color: var(--memo-accordion-body) !important;
        }
        .memo-font-created-by {
            color: var(--memo-font-created-by) !important;
        }
        .memo-detail {
            background-color: var(--pallete-2) !important;
            .card-header {
                background-color: var(--memo-message-card-header) !important;
                a i {
                    color: var(--text-main) !important;
                }
            }
            .memo-title {
                color: var(--text-main) !important;
                background-color: var(--memo-title-background) !important;
            }
            #icon-reply {
                color: var(--text-main) !important;
            }
            .memo-text-message {
                color: var(--memo-text-message) !important;
            }
        }
    }
}
#deposit-hamburg {
    background-color: var(--deposit-hamburg) !important;
    color: var(--deposit-hamburg-text) !important;
}
#withdraw-hamburg {
    background-color: var(--withdraw-hamburg) !important;
    color: var(--withdraw-hamburg-text) !important;
}
footer {
    #footer-content {
        background-color: var(--pallete-2);
        #contact-us {
            > div:nth-child(1) {
                color: var(--text-footer-deposit-method-title);
                > div {
                    color: var(--text-footer-deposit-method-content);
                }
                .content {
                    border: 2px solid var(--footer-deposit-method);
                }
            }
            > div:nth-child(2) {
                color: var(--text-footer-contact-us-title);
                > div {
                    color: var(--text-footer-contact-us-content);
                }
                .content {
                    border: 2px solid var(--footer-contact-us);
                }
            }
        }
        #contact-button {
            cursor: pointer;
        }
    }
    #footer-provider {
        background-color: var(--pallete-2);
        > span {
            color: var(--text-footer-provider-title);
        }
        > div {
            color: var(--text-footer-provider-content);
        }
        .provider-box {
            border: 2px solid #6c757d;
            padding: 10px;
            position: relative;
        }
        .provider-title {
            position: absolute;
            top: -14px;
            left: 20px;
            background-color: var(--pallete-2);
            padding: 0 10px;
            white-space: nowrap;
        }
        .provider-card {
            background-color: var(--pallete-3);
        }
    }
    #footer-copyright {
        color: var(--text-footer-copyright);
        margin-top: -17px;
    }
}
#footer-mobile {
    background-color: var(--pallete-3);
}
.table {
    color:unset;
}
.fa, [class*="icon-"] {
    color: var(--icon-color);
}
.fa.exclude, [class*="icon-"].exclude {
    color: initial;
}
a {
    text-decoration: none;
    color: unset;
}
[class*="icon-"] {
    font-family: 'asiasigma' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
[class*="icon2-"] {
    font-family: 'asiasigma2' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-font {
    font-size: 2.2em;
    text-align: center;
    display: block;
    margin: 0px auto;
}
.icon-asiasigma4d:before {
    content: "\e93e";
}
.icon-pragmatic:before {
    content: "\e948";
}
.icon-habanero:before {
    content: "\e940";
}
.icon-spadegaming:before {
    content: "\e94c";
}
.icon-saba:before {
    content: "\e952";
}
.icon-joker:before {
    content: "\e944";
}
.icon-pg_soft:before {
    content: "\e947";
}
.icon-kingmaker:before {
    content: "\e945";
}
.icon-onegame:before {
    content: "\e946";
}
.icon-redtiger:before {
    content: "\e949";
}
.icon-sexygaming:before {
    content: "\e94b";
}
.icon-sv_cockfighting:before {
    content: "\e94d";
}
.icon-jdb:before {
    content: "\e943";
}
.icon-ion:before {
    content: "\e942";
}
.icon-sbobet:before {
    content: "\e94a";
}
.icon-cq9:before {
    content: "\e93f";
}
.icon-wmcasino:before {
    content: "\e94e";
}
.icon-ks_gaming:before {
    content: "\e951";
}
.icon-afb:before {
    content: "\e950";
}
.icon-user:before {
    content: "\e935";
}
.icon-login:before {
    content: "\e91c";
}
.icon-chat:before {
    content: "\e909";
}
.icon-copyright{
    font-size: unset;
    text-align: center;
    display: inline;
    margin: unset;
}
.icon-copyright:before {
    content: "\e90e";
}
/* icomoon2 */
.icon2-onegame:before {
  content: "\e900";
}
.icon2-ludobet:before {
  content: "\e901";
}
.icon2-hotroad:before {
  content: "\e902";
}
.icon2-kingmaker:before {
  content: "\e903";
}
.icon2-horsebook:before {
  content: "\e904";
}
.icon2-netent:before {
  content: "\e905";
}
.icon2-play_star:before {
  content: "\e906";
}
.icon2-afb:before {
  content: "\e907";
}
.icon2-ws168:before {
  content: "\e908";
}
.icon2-miki_world:before {
  content: "\e909";
}
.icon2-thunderfire:before {
  content: "\e90a";
}
.icon2-pp:before {
  content: "\e90b";
}
.icon2-habanero:before {
  content: "\e90c";
}
.icon2-fat_panda:before {
  content: "\e90d";
}
.icon2-pg_soft:before {
  content: "\e90e";
}
.icon2-spadegaming:before {
  content: "\e90f";
}
.icon2-joker:before {
  content: "\e910";
}
.icon2-cq9:before {
  content: "\e911";
}
.icon2-red_tiger:before {
  content: "\e912";
}
.icon2-btg:before {
  content: "\e913";
}
.icon2-dragoonsoft:before {
  content: "\e914";
}
.icon2-fastspin:before {
  content: "\e915";
}
.icon2-jili:before {
  content: "\e916";
}
.icon2-play8:before {
  content: "\e917";
}
.icon2-yellow_bat:before {
  content: "\e918";
}
.icon2-no_limit_city:before {
  content: "\e919";
}
.icon2-g:before {
  content: "\e91a";
}
.icon2-vgaming:before {
  content: "\e91b";
}
.icon2-jdb:before {
  content: "\e91c";
}
.icon2-sexy_casino:before {
  content: "\e91d";
}
.icon2-ion:before {
  content: "\e91e";
}
.icon2-wm:before {
  content: "\e91f";
}
.icon2-evolution:before {
  content: "\e920";
}
.icon2-fc:before {
  content: "\e921";
}
.icon2-sbo:before {
  content: "\e922";
}
.icon2-saba:before {
  content: "\e923";
}
.icon2-ga28:before {
  content: "\e924";
}
.icon2-sv388:before {
  content: "\e925";
}
.icon2-asiasigma4d:before {
  content: "\e926";
}
.icon2-arcade:before {
  content: "\f163";
}
.icon2-casino:before {
  content: "\f168";
}
.icon2-cockfight:before {
  content: "\f16c";
}
.icon2-fishing:before {
  content: "\f173";
}
.icon2-lottery:before {
  content: "\f19a";
}
.icon2-slots:before {
  content: "\f1ab";
}
.icon2-sportbook:before {
  content: "\f1b8";
}
/* icomoon2 */
.bmw-100 {
    min-width: 100px;
}
.btn > .spinner-border {
    vertical-align: -0.27em;
}
.mw-300 {
    min-width: 300px;
}
.provider-list-box > div {
    font-size: 0.7em;
}
.fixed-bottom-icon {
    font-size: 1.5em;
    margin: auto;
    display: block;
    padding-bottom: 0.3rem;
}
.flex-basis {
    flex-basis: 0 !important;
}
.logo-lottery {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.logo-lottery img {
    height: 120px;
    width: auto;
}
.btn-play {
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.btn-play button {
    font-size: 24px;
    padding: .5rem 1.25rem;
}
.provider-logo {
    width: 100%;
    max-width: 133px;
    height: 50px;
    object-fit: contain;
    flex-grow:1;
    display:flex;
    align-items:center;
    justify-content:center;
}
.provider-logo img {
    max-width:100px;
    max-height:100px;
    object-fit:contain;
}
.tag-new {
    left: 0%;
    background: var(--tag-new-bg);
    color: var(--tag-new-text);
}
.tag-promo {
    left: 0%;
    bottom: 0%;
    background: var(--tag-promo-bg);
    color: var(--tag-promo-text);
}
.tag-panas {
    right: 0%;
    background: var(--tag-panas-bg);
    color: var(--tag-panas-text);
}
.tag-pemeliharaan {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--tag-pemeliharaan-bg);
    color: var(--tag-pemeliharaan-text);
}
.darken {
    filter: brightness(70%);
}
.darken::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}
.hidden {
    display: none;
}
.hamburger-button {
    position: relative;
}
.hamburger-button:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10px;
    width: 10px;
}
.img-level {
    width:200px;
}
.small-badge {
    width: 30px;
}
.deposit-amount-selection {
    border: 1px solid var(--deposit-amount-select-border);
    cursor: pointer;
}
.deposit-amount-selection:hover {
    background: var(--deposit-amount-select-bg-hover);
    border: 1px solid var(--deposit-amount-select-border-hover);
}
.normal_link {
    text-decoration: underline;
    color: var(--normal-link);
}
.widget-content-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 210px;
}
.widget-content-wrapper {
    display: flex;
    flex-direction: column;
    animation: scroll-loop 20s linear infinite;
}
@keyframes scroll-loop {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(calc(-100% / 2));
    }
}
.widget-content-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.widget-content-container::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}
.widget-content-container::-webkit-scrollbar-track {
    background: transparent;
}
.widget-user-image {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #ffc800;
    object-fit: cover;
}
.name, .amount {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: frabk;
}
.forget-password-text {
    top: 30px;
}
.btn-login {
    background-color: var(--bg-btn-login);
}
.btn-register {
    background-color: var(--bg-btn-register);
}
@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.blinking-dot {
    animation: blink 1s infinite;
}
.highlight-box {
    box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.8);
    transition: box-shadow 0.5s ease-in-out;
}
.skeleton {
    animation: skeleton-loading 1s linear infinite alternate;
    display: flex;
    flex-direction: column;
}
@keyframes skeleton-loading {
    0% {
        background-color: hsl(200, 20%, 80%);
    }
    100% {
        background-color: hsl(200, 20%, 95%);
    }
}
.skeleton-title {
    width: 50%;
    height: 1rem;
    border-radius: 0.25rem;
}
.skeleton-body {
    width: 100%;
    height: 1.5rem;
    border-radius: 0.25rem;
}
.skeleton-footer {
    width: 50%;
    height: 1rem;
    border-radius: 0.25rem;
    margin-left: auto;
}
.empty-slide {
    visibility: hidden;
}
.qris-hidden {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 2s ease, transform 2s ease;
}
.qris-show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}
#promo-view-page .as-promotion-card {
    display:flex;
    flex-direction:column;
    height:100%;
    width:100%;
}

/* Card skeleton stays as you have it */
#promo-view-page .as-promotion-card{
    display:flex; flex-direction:column; height:100%; width:100%;
    background : var(--bg-card-promo);
}
#promo-view-page .as-promo-title-wrap {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height: calc(5.3 * 1lh);
}
#promo-view-page .as-promo-title-wrap h3 {
    margin:0;
    line-height:1.2;
    text-align:center;
    word-break:break-word;
}
#promo-view-page .as-promotion-meta {
    text-align:center;
    line-height:1.2;
    min-height: 1.4em;
    margin-top:.25rem;
    margin-bottom:.25rem;
}
#promo-view-page .as-promotion-imgwrap {
    height:240px;
    display:flex;
    align-items:center;
    justify-content:center;
}
#promo-view-page .as-promotion-imgwrap img {
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    display:block;
}
* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body {
    font-family:Montserrat,sans-serif;
    background-color: var(--bg-primary);
    color:var(--text-color);
    line-height:1.6;
    overflow-x:hidden;
    padding-top:80px;
    padding-bottom:5px;
}
.container {
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}
h1,h2,h3,h4,h5,h6 {
    font-weight:700;
    margin-bottom:15px;
    line-height:1.2;
}
h1 {
    font-size:3rem;
}
h2 {
    font-size:2.5rem;
}
h3 {
    font-size:2rem;
}
h4 {
    font-size:1.5rem;
}
h5 {
    font-size:1.2rem;
}
h6 {
    font-size:1rem;
}
p {
    margin-bottom:15px;
    color:var(--text-secondary);
}
a {
    color:var(--accent-color);
    text-decoration:none;
    transition:var(--transition);
}
a:hover {
    color:var(--light-color);
}
.btn {
    display:inline-block;
    padding:9px 17px;
    background:var(--primary-gradient);
    color:var(--text-color);
    border:none;
    border-radius:50px;
    font-weight:600;
    font-size:1rem;
    text-transform:uppercase;
    letter-spacing:1px;
    cursor:pointer;
    transition:var(--transition);
    box-shadow:0 5px 15px var(--box-shadow);
    position:relative;
    overflow:hidden;
    text-align:center;
}
.btn:hover {
    transform:translateY(-3px);
    box-shadow:0 8px 20px var(--btn-shadow-hover);
}
.btn-accent {
    background:var(--accent-background);
    color:var(--dark-color);
    box-shadow:0 5px 15px var(--btn-accent-shadow);
}
.btn-accent:hover {
    box-shadow:0 8px 20px var(--btn-accent-shadow-hover);
}
.header {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:var(--header-bg);
    backdrop-filter:blur(10px);
    z-index:2100;
    padding:15px 0;
    box-shadow:0 5px 20px var(--header-shadow);
}
.nav-container {
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.logo {
    display:flex;
    align-items:center;
}
.website-logo {
    width: 100%;
    max-width: 300px;
}
.nav-menu {
    display:flex;
    list-style:none;
    gap:30px;
}
.nav-link {
    color:var(--primary-text-color);
    font-weight:500;
    font-size:1rem;
    transition:var(--transition);
    position:relative;
}
.nav-link::after {
    content:'';
    position:absolute;
    bottom:-5px;
    left:0;
    width:0;
    height:2px;
    background:var(--accent-color);
    transition:var(--transition);
}
.nav-link:hover::after {
    width:100%;
}
.nav-buttons {
    display:flex;
    gap:15px;
    align-items:center;
    justify-content: end;
}
.nav-button {
    background:0 0;
    border:1px solid var(--secondary-color);
    color:var(--primary-text-color);
    padding:8px 20px;
    border-radius:50px;
    font-weight:500;
    cursor:pointer;
    transition:var(--transition);
    font-size: 1rem;
}
.nav-button:hover {
    background:var(--accent-color);
    color:var(--light-color);
}
.mobile-menu-btn {
    display:none;
    background:0 0;
    border:none;
    color:var(--primary-text-color);
    font-size:1.5rem;
    cursor:pointer;
}
.hero {
    background-size:cover;
    background-position:center;
    padding:80px 0;
    text-align:center;
    position:relative;
    overflow:hidden;
}
.hero::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:radial-gradient(circle at center,rgba(255,153,0,.1) 0,rgba(10,10,10,0) 70%);
}
.hero-content {
    position:relative;
    z-index:1;
    max-width:800px;
    margin:0 auto;
}
.hero-title {
    font-size:2rem;
    font-weight:800;
    margin-bottom:20px;
    background:var(--primary-gradient);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    text-transform:uppercase;
    letter-spacing:2px;
}
.hero-subtitle {
    font-size:1.5rem;
    color:var(--text-secondary);
    margin-bottom:40px;
}
.hero-buttons {
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}
.ticker {
    position:relative;
    z-index: 20;
    background: rgba(10,10,10,.65);
    backdrop-filter: blur(6px);
    border-block: 1px solid var(--nav-border);
}
.ticker__inner {
    max-width: none;
    margin:0;
    padding: 6px 16px;
    display:flex;
    align-items:center;
    gap:12px;
    min-height:42px;
}
.ticker__icon {
    color: var(--gold-2);
    opacity:.95;
}
.ticker__viewport {
    position:relative;
    overflow:hidden;
    flex:1 1 auto;
    mask-image: linear-gradient(90deg,transparent 0,#000 30px,#000 calc(100% - 30px),transparent 100%);
    -webkit-mask-image: linear-gradient(90deg,transparent 0,#000 30px,#000 calc(100% - 30px),transparent 100%);
    white-space: nowrap;
}
.ticker__track {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;

    animation-name: ticker-move;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.ticker__item {
    color: var(--text-strong);
    font-weight:700;
    letter-spacing:.2px;
}
.ticker__sep {
    opacity:.5;
}
.ticker:hover .ticker__track {
    animation-play-state: paused;
}
@keyframes ticker-move {
    from { transform: translateX(var(--from)); }
    to   { transform: translateX(var(--to)); }
}
.headnav {
    position: relative;
    top: 0;
    z-index: 19;
    background: var(--nav-bg);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--nav-border);
    box-shadow: var(--nav-shadow);
}
.headnav__rail {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 10px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type: x proximity;
    padding: 10px 56px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    justify-content: center;
}
.headnav__rail::-webkit-scrollbar {
    display:none;
}
.headnav__item {
    scroll-snap-align: center;
    display:inline-flex;
    align-items:center;
    gap:10px;
    height: 46px;
    padding: 0 16px;
    color:#fff;
    text-decoration:none;
    white-space:nowrap;
    cursor:pointer;
    border:1px solid var(--nav-border);
    border-radius: 999px;
    background: var(--headnav-item-bg);
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
    position: relative;
    isolation: isolate;
}
.headnav__item i {
    font-size:1rem;
    text-shadow:0 2px 10px rgba(140,91,0,.35);
}
.headnav__item span {
    font-weight:800;
    letter-spacing:.2px;
}
.headnav__item:hover {
    background: var(--nav-hover);
    transform: translateY(-1px);
    border-color: #ffffff2e;
}
.headnav__item.is-active {
    border-color: #ffffff45;
    background: var(--nav-hover);
}
.headnav__indicator {
    position:absolute;
    top:50%;
    left:0;
    transform: translate(0, -50%);
    width:0;
    height:52px;
    border-radius:999px;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    border:1px solid rgba(232,187,81,.45);
    box-shadow: 0 0 0 1px rgba(232,187,81,.25) inset, 0 10px 28px rgba(232,187,81,.14);
    pointer-events:none;
    opacity:.95;
    z-index:0;
    transition: transform .22s ease, width .22s ease, height .22s ease;
    will-change: transform, width, height;
}
.headnav__arrow {
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    width:36px;
    height:36px;
    border-radius:999px;
    border:1px solid rgba(232,187,81,.25);
    background: radial-gradient(120% 120% at 50% 0,rgba(243,196,86,.18),rgba(26,26,26,.95) 60%);
    color:#fff;
    align-items:center;
    justify-content:center;
    box-shadow: 0 10px 20px rgba(0,0,0,.35);
    transition: transform .15s ease, border-color .2s ease;
    z-index: 2;
}
.headnav__arrow i {
    font-size:.9rem;
}
.headnav__arrow--left {
    left: 10px;
}
.headnav__arrow--right {
    right: 10px;
}
.headnav__arrow:hover {
    transform: translateY(-50%) scale(1.06);
    border-color: rgba(232,187,81,.45);
}
.headnav__fade {
    position:absolute;
    top:4px;
    bottom:4px;
    width:48px;
    pointer-events:none;
    z-index:1;
    background: linear-gradient(90deg, rgba(10,10,10,.9), rgba(10,10,10,0));
    border-radius: 12px;
    opacity:.6;
    display:none;
}
.headnav__fade--left {
    left: 0;
}
.headnav__fade--right {
    right: 0;
    transform: scaleX(-1);
}
.headnav[data-overflow="1"] .headnav__arrow {
    display:flex;
}
.headnav[data-overflow="1"] .headnav__fade {
    display:block;
}
.carousel-container {
    max-width: 1990px;
    aspect-ratio: 24 / 7;
    max-height: 500px;
    border-radius: var(--banner-border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    position: relative;
}
.carousel {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.carousel-slide {
    position: absolute !important;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}
.carousel-slide.active {
    opacity: 1;
    z-index: 2;
}
.carousel-slide img,
.carousel-image {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    display: block;
}
.carousel-indicators {
    position: absolute;
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 5;
}
.carousel-indicators [data-bs-target] {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 4px !important;
    background: rgba(255, 255, 255, 0.6) !important;
}
.carousel-indicators .active {
    background: var(--accent-color, #fff) !important;
}
.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 32px;
    font-weight: bold;
    color: var(--pallete-2);
    background: transparent;
    border: none;
    padding: 8px 14px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
    transition: background 0.3s ease;
}
.carousel-prev:hover,
.carousel-next:hover {
    background: transparent !important;
}
.carousel-prev {
    left: 15px;
}
.carousel-next {
    right: 15px;
}
.provider-section {
    padding:80px 0;
}
.section-title {
    text-align:center;
    /* margin-bottom:40px; */
    font-size:2rem;
    background:var(--primary-gradient);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    position:relative;
    padding-bottom:15px;
}
.provider-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:30px;
}
.provider-card {
    background:var(--card-provider-bg);
    border-radius:var(--border-radius);
    overflow:hidden;
    box-shadow:var(--box-shadow);
    transition:var(--transition);
    border:1px solid rgba(255,255,255,.3);
    height:100%;
    display:flex;
    flex-direction:column;
}
.provider-card:hover {
    transform:translateY(-10px);
    box-shadow:0 15px 30px rgba(140,0,0,.4);
    border-color:var(--accent-color);
}
.provider-card a {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:100%;
    padding:25px;
    text-align:center;
}
.provider-name {
    font-weight:700;
    margin-bottom:20px;
    font-size:1.2rem;
    color:var(--text-color);
}
.provider-button {
    background:var(--primary-gradient);
    color:var(--text-color);
    font-weight:600;
    padding:10px 20px;
    border-radius:30px;
    font-size:.9rem;
    display:inline-block;
    transition:var(--transition);
}
.provider-button:hover {
    transform:scale(1.05);
}
.footer {
    background:var(--card-bg);
    padding:30px 0;
    margin-top:50px;
    border-top:1px solid rgba(255,255,255,.1);
}
.footer-content {
    text-align:center;
}
.footer-logo {
    margin-bottom:15px;
}
.footer-logo img {
    height:40px;
    width:auto;
}
.footer-links {
    display:flex;
    justify-content:center;
    gap:20px;
    margin-bottom:20px;
    flex-wrap:wrap;
}
.footer-link {
    color:var(--text-secondary);
    transition:var(--transition);
    font-size:.9rem;
}
.footer-link:hover {
    color:var(--accent-color);
}
.copyright {
    font-size:.8rem;
    color:var(--text-secondary);
}
.bottom-menu {
    display:none;
}
.menu-item {
    text-align:center;
    color:var(--text-footer);
    transition:var(--transition);
    padding:5px 10px;
    border-radius:var(--border-radius);
}
.menu-item:hover {
    background:rgba(255,255,255,.1);
}
.menu-icon {
    font-size:1.5rem;
    margin-bottom:5px;
    color:var(--icon-footer-color);
}
.menu-text {
    font-size:.75rem;
    font-weight:500;
}
.sidebar {
    position:fixed;
    top:0;
    right:-300px;
    width:300px;
    height:100%;
    background:var(--bg-sidebar);
    backdrop-filter:blur(10px);
    z-index:2150;
    transition:var(--transition);
    padding:30px;
    overflow-y:auto;
}
.sidebar.active {
    right:0;
}
.sidebar-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
    padding-bottom:15px;
    border-bottom:1px solid rgba(255,255,255,.1);
}
.sidebar-logo {
    height:40px;
}
.sidebar-close {
    background:0 0;
    border:none;
    color:var(--text-footer);
    font-size:1.5rem;
    cursor:pointer;
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    transition:var(--transition);
}
.sidebar-close:hover {
    background:rgba(255,255,255,.1);
}
.sidebar-menu {
    display:flex;
    flex-direction:column;
    gap:15px;
}
.sidebar-link {
    display:flex;
    align-items:center;
    gap:15px;
    color:var(--text-footer);
    padding: 0px 15px;
    border-radius:var(--border-radius);
    transition:var(--transition);
}
.sidebar-link:hover {
    background:rgba(255,255,255,.1);
}
.sidebar-icon {
    font-size:1.2rem;
    color:var(--icon-footer-color);
}
#backToTopBtn {
    display:none;
    position:fixed;
    bottom:100px;
    right:20px;
    z-index:99;
    background:var(--primary-gradient);
    color:#000;
    cursor:pointer;
    border:2px solid #ffffff7d;
    border-radius:50%;
    width:50px;
    height:50px;
    font-size:1.2rem;
    box-shadow:var(--box-shadow);
    transition:var(--transition);
    display:flex;
    align-items:center;
    justify-content:center;
}
#backToTopBtn:hover {
    transform:translateY(-5px);
    box-shadow:0 15px 30px var(--text-shadow);
}
.overlay {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.5);
    z-index:999;
    display:none;
}
.overlay.active {
    display:block;
}
.section {
    padding:40px 0 10px;
}
.favorites {
    position:relative;
    /* background:var(--fav-bg); */
    overflow:hidden;
}
.favorites .favorites__inner {
    position:relative;
    z-index:var(--fav-z-content);
}
.fav-bg {
    position:absolute;
    inset:0;
    z-index:var(--fav-z-bg);
    /* margin:10px auto; */
}
.fav-bg__base {
    position:absolute;
    inset:0;
    background:var(--fav-bg);
}
.fav-bg__img {
    position:absolute;
    top:0;
    bottom:0;
    pointer-events:none;
    filter:grayscale(5%) brightness(100%) blur(1px);
    transition:filter .3s ease;
    opacity:.6;
}
.fav-bg__img img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.fav-bg__left {
    left:0;
    width:25%;
}
.fav-bg__mid {
    left:25%;
    width:50%;
    opacity:.5;
}
.fav-bg__right {
    right:0;
    width:25%;
}
.fav-bg__overlay {
    position:absolute;
    inset:0;
    background:radial-gradient(80% 60% at 50% 40%,rgba(0,0,0,.2) 0,rgba(0,0,0,0) 60%),linear-gradient(to bottom,rgba(0,0,0,.25),rgba(0,0,0,0) 30%,rgba(0,0,0,.25) 100%);
    pointer-events:none;
}
.favorites__head {
    display:block;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    justify-content:space-between;
    margin-bottom:18px;
    margin-top:1.25rem;
}
.favorites .section-title {
    font-size:1.8rem;
    margin:0;
    background:var(--primary-gradient);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
.favorites__filters {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 2rem;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.favorites__filters::-webkit-scrollbar {
    display: none;
}
.chip {
    border:1px solid rgba(243,196,86,.35);
    background:rgba(255,255,255,.04);
    color:#fff;
    font-weight:600;
    letter-spacing:.2px;
    padding:8px 12px;
    border-radius:999px;
    cursor:pointer;
    transition:transform .15s ease,background .15s ease,border-color .15s ease;
    font-size: clamp(0.75rem, 0.9vw + 0.4rem, 1rem);
}
.chip i {
    font-size: 1em;
    line-height: 1;
}
.chip:hover {
    transform:translateY(-1px);
    background:rgba(255,255,255,.08);
}
.chip.is-active {
    background:var(--primary-gradient);
    color:#121212;
    border-color:transparent;
}
.fav-grid {
    display:flex !important;
    gap:14px;
    padding:4px 0;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    width:100%;
    box-sizing:border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.fav-grid::-webkit-scrollbar {
    display: none;
}
.fav-grid::-webkit-scrollbar-thumb {
    background:rgba(0,0,0,.25);
    border-radius:6px;
}
.fav-grid > li {
    flex:0 0 auto;
    scroll-snap-align:start;
    box-sizing:border-box;
}
.game-card {
    position:relative;
    border-radius:12px;
    overflow:hidden;
    isolation:isolate;
    background:var(--card-bg);
    border:1px solid rgba(232,187,81,.25);
    box-shadow:0 8px 22px rgba(0,0,0,.3);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}
.game-card:hover {
    transform:translateY(-4px);
    box-shadow:0 20px 46px rgba(0,0,0,.45);
    border-color:rgba(232,187,81,.5);
}
.game-card__thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    width: 100%;
    overflow: hidden;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
}
.game-card__thumb img {
    width: 100%;
    height: 100%;
    object-position: center;
    display: block;
    flex-shrink: 0;
}
.game-card:hover .game-card__thumb img {
    transform:scale(1.04);
}
.game-card__overlay {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.65) 100%);
    opacity:0;
    transition:opacity .2s ease;
}
.game-card:hover .game-card__overlay {
    opacity:1;
}
.btn-min {
    padding:8px 12px;
    border-radius:999px;
    font-weight:700;
    letter-spacing:.3px;
    cursor:pointer;
    border:1px solid rgba(255,255,255,.22);
    color:#fff;
    background:rgba(27,26,26,.6);
    transition:transform .15s ease,background .15s ease,border-color .15s ease;
}
.btn-min.primary {
    background:var(--primary-gradient);
    color:#121212;
    border-color:#fff;
    z-index:3;
}
.btn-min:hover {
    transform:translateY(-1px);
}
.badges {
    position:absolute;
    top:8px;
    /* left:8px; */
    left:6px;
    display:flex;
    /* gap:6px; */
    gap:4px;
    z-index:2;
}
.badge {
    /* font-size:.72rem; */
    font-size:.62rem;
    padding:4px 8px;
    border-radius:999px;
    background:rgba(243,196,86,.18);
    border:1px solid rgba(243,196,86,.5);
    color:#fff;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
}
.badge--hot {
    background:rgba(124,33,33,.7);
    border-color:rgba(255,74,74,.55);
}
.badge--new {
    background:rgba(13,80,60,.7);
    border-color:rgba(77,255,202,.55);
}
.badge--popular {
    background: rgba(255, 140, 0, .7); 
    border-color: rgba(255, 140, 0, .55);
}
.fav-btn {
    position:absolute;
    top:8px;
    right:8px;
    width:36px;
    height:36px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(0,0,0,.38);
    border:1px solid rgba(255,255,255,.18);
    cursor:pointer;
    z-index:2;
    transition:transform .15s ease,background .15s ease;
}
.fav-btn:hover {
    transform:scale(1.06);
    background:rgba(0,0,0,.55);
}
.fav-btn svg {
    width:18px;
    height:18px;
    fill:#fff;
    opacity:.9;
}
.fav-btn.is-active {
    background:var(--primary-gradient);
    border-color:transparent;
}
.fav-btn.is-active svg {
    fill:#121212;
}
.game-card__body {
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:10px 10px 12px;
    flex:1 1 auto;
}
.game-title {
    font-size:var(--title-fs);
    line-height:var(--title-lh);
    font-weight:800;
    letter-spacing:.2px;
    color:#fff;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:var(--title-lines);
    overflow:hidden;
    min-height:calc(var(--title-lines) * var(--title-lh) * 1em);
}
.game-meta {
    margin-top:auto;
    display:block;
    align-items:center;
    gap:10px;
}
.game-provider {
    flex:0 1 42%;
    min-width:120px;
    font-size:.78rem;
    color:var(--text-secondary,#cfcfcf);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.rtp {
    flex:1 1 auto;
    display:flex;
    align-items:center;
    gap:8px;
    min-width:140px;
}
.rtp__bar-wrap {
    flex:1 1 auto;
    height:8px;
    background:rgba(255,255,255,.08);
    border-radius:999px;
    overflow:hidden;
}
.rtp__bar {
    height:100%;
    background:linear-gradient(90deg,#ff4a4a,#ffd000,#4dffca);
    width:0%;
    transition:width .4s ease;
}
.rtp__val {
    flex:0 0 3.2rem;
    text-align:right;
    font-size:.78rem;
    color:#fff;
    opacity:.95;
}
.fav-grid .game-card {
    display:flex;
    flex-direction:column;
    height:100%;
    background:rgba(26,26,26,.85);
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    overflow:hidden;
}
.is-skel {
    overflow:hidden;
}
.skel {
    position:relative;
    border-radius:8px;
    background:rgba(255,255,255,.06);
}
.skel::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
    transform:translateX(-100%);
    animation:shimmer 1.2s infinite;
}
.skel-thumb {
    aspect-ratio:16/10;
}
.skel-line {
    height:16px;
    margin:10px;
}
@keyframes shimmer {
    to{
        transform:translateX(100%);
    }
}
.lotto-rail-wrap {
    position:relative;
}
.lotto-rail {
    display:flex;
    gap:var(--lotto-gap);
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    padding-bottom:8px;
    scrollbar-width:none;
    -ms-overflow-style:none;
}
.lotto-rail::-webkit-scrollbar {
    display:none;
}
.lotto-fade {
    position:absolute;
    top:0;
    bottom:0;
    width:48px;
    pointer-events:none;
    z-index:1;
    background:linear-gradient(90deg,rgba(10,10,10,.95),rgba(10,10,10,0));
    opacity:.7;
}
.lotto-fade-left {
    left:0;
}
.lotto-fade-right {
    right:0;
    transform:scaleX(-1);
}
.lotto-scroll-btn {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:38px;
    height:38px;
    border-radius:12px;
    border:1px solid var(--lotto-border);
    background:linear-gradient(180deg,#1c1c1c,#121212);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
    cursor:pointer;
    box-shadow:var(--lotto-shadow-sm);
    transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.lotto-scroll-btn i {
    color:var(--primary-text-color);
    font-size:.95rem;
}
.lotto-scroll-btn:hover {
    transform:translateY(-50%) scale(1.06);
    box-shadow:0 14px 32px rgba(0,0,0,.45);
    border-color:rgba(255,255,255,.22);
}
.lotto-left {
    left:8px;
}
.lotto-right {
    right:8px;
}
#lottery-content>*,.lotto-card {
    scroll-snap-align:start;
    min-width:var(--lotto-w);
    border-radius:var(--lotto-r);
    position:relative;
    padding:14px 12px 12px;
    color:var(--primary-text-color);
    background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
    border:1px solid var(--lotto-border);
    box-shadow:var(--lotto-shadow);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
    overflow:hidden;
    isolation:isolate;
}
.lotto-card::before {
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    pointer-events:none;
    background:conic-gradient(from 30deg,var(--lotto-accent),rgba(255,255,255,.2),var(--lotto-accent-2),rgba(255,255,255,.2),var(--lotto-accent));
    opacity:.35;
    -index:-1;
}
.lotto-card::after {
    content:"";
    position:absolute;
    inset:-20% -20% auto -20%;
    height:60%;
    background:radial-gradient(60% 60% at 50% 0,rgba(77,255,202,.25),rgba(255,59,106,.12) 60%,transparent 65%);
    filter:blur(18px);
    opacity:.6;
    pointer-events:none;
    z-index:-1;
}
.lotto-card:hover {
    transform:translateY(-4px);
    box-shadow:0 20px 44px rgba(0,0,0,.5);
}
.lotto-head {
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:8px;
    margin-bottom:8px;
}
.lotto-market {
    font-weight:800;
    letter-spacing:.3px;
    font-size:.8rem;
    display:inline-flex;
    gap:6px;
    align-items:center;
}
.lotto-time {
    font-size:.78rem;
    opacity:.8;
    white-space:nowrap;
}
.lotto-balls {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    margin:4px 0 10px;
}
.ball {
    width:24px;
    height:24px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    color:#111;
    font-size:1.2rem;
    background:var(--bg-lotto-ball);
    box-shadow:0 8px 18px var(--lotto-bonus-1),0 0 0 2px var(--lotto-bonus-2);
    position:relative;
    border:1px solid #fff;
}
.ball::after {
    content:"";
    position:absolute;
    top:6px;
    left:8px;
    width:12px;
    height:8px;
    border-radius:50%;
    filter:blur(1px);
    opacity:.85;
}
.ball.bonus {
    outline:2px solid var(--lotto-accent);
    box-shadow:0 8px 18px var(--lotto-bonus-1),0 0 0 2px var(--lotto-bonus-2);
}
.lotto-foot {
    display:flex;
    align-items:center;
    gap:6px;
}
.pill {
    font-size:.74rem;
    padding:4px 9px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.06);
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.pill-ok {
    border-color:var(--pill-border);
    background:var(--pill-background);
    color:var(--pill-text);
}
.sc-wrap {
    padding: 14px 0 6px;
    margin-bottom: 1.25rem;
}
.sc {
    max-width: var(--sc-max);
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: var(--sc-gap);
}
.sc-card {
    position: relative;
    border-radius: var(--sc-radius);
    background: var(--sc-card-bg);
    border: 1px solid var(--sc-card-bd);
    box-shadow: var(--sc-shadow);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.sc-title {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .3px;
    color: var(--sc-title-text);
    padding: 8px 14px;
    background: var(--sc-title-bg);
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    margin: 12px 0 0 0;
    box-shadow: 0 4px 14px var(--shadow-sc-title), 0 0 0 1px var(--sc-title-ring) inset;
}
.sc-title__trap {
    position: absolute;
    left: 0;
    top: calc(8px + 38px);
    width: 64px;
    height: 10px;
    background: linear-gradient(90deg, rgba(243,196,86,.45), rgba(243,196,86,0));
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
    filter: blur(.4px);
}
.sc-tiles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
    margin-top: 6px;
}
.sc-tile {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
    padding: 0;
}
.sc-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0,0,0,.38);
    border-color: rgba(232,187,81,.32);
}
.sc-tile img {
    width: 100%;
    height: auto;
    display:block;
    object-fit: cover;
    transition: transform .25s ease;
}
.sc-tile:hover img {
    transform: scale(1.03);
}
.sc-second-wrap {
    padding: 14px 0 6px;
    margin-bottom: 1.25rem;
}
.sc-second {
    max-width: var(--sc-max);
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sc-gap);
}
.sc-second-card {
    position: relative;
    border-radius: var(--sc-radius);
    background: var(--sc-card-bg);
    border: 1px solid var(--sc-card-bd);
    box-shadow: var(--sc-shadow);
    overflow: hidden;
    transition: transform .18s
    ease, box-shadow .18s
    ease, border-color .18s
    ease, background .18s
    ease;
}
.sc-second-card {
    position: relative;
    border-radius: var(--sc-radius);
    background: var(--sc-card-bg);
    border: 1px solid var(--sc-card-bd);
    box-shadow: var(--sc-shadow);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.sc-second-title {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .3px;
    color: var(--sc-title-text);
    padding: 8px 14px;
    background: var(--sc-title-bg);
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    margin: 12px 0 0 0;
    box-shadow: 0 4px 14px var(--shadow-sc-title), 0 0 0 1px var(--sc-title-ring) inset;
}
.sc-second-title__trap {
    position: absolute;
    left: 0;
    top: calc(8px + 38px);
    width: 64px;
    height: 10px;
    background: linear-gradient(90deg, rgba(243,196,86,.45), rgba(243,196,86,0));
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
    filter: blur(.4px);
}
/* .sc-second-tiles {
    display: grid;
    gap: 12px;
    padding: 12px;
    margin-top: 6px;
} */
 .sc-second-tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;  
    gap: 12px;
    padding: 12px;
}

.sc-tiles--methods.is-textlist {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    padding-top: 10px;
}
.method-item {
    display:flex;
    flex: 1 0 140px;
    width: max-content;
    max-width: 180px;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:10px;
    background: rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.12);
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
    font-weight: 700;
    letter-spacing:.2px;
    color:#fff;
}
.method-item:hover {
    background: rgba(255,255,255,.06);
    border-color: rgba(232,187,81,.28);
}
.status-dot {
    width:10px;
    height:10px;
    border-radius:50%;
    position:relative;
    flex:0 0 10px;
    background: var(--dot-off);
    box-shadow: 0 0 0 0 rgba(0,0,0,0.0);
}
.method-item.is-active .status-dot {
    background: var(--dot-on);
    animation: dotPulseOn 1.6s ease-out infinite;
    box-shadow: 0 0 0 0 rgba(46,204,113,.45);
}
.method-item.is-off .status-dot {
    background: var(--dot-off);
    animation: dotPulseOff 1.8s ease-out infinite;
    box-shadow: 0 0 0 0 rgba(255,74,74,.40);
}
@keyframes dotPulseOn {
    0%   {
        box-shadow: 0 0 0   0 rgba(46,204,113,.45);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(46,204,113,0);
    }
    100% {
        box-shadow: 0 0 0   0 rgba(46,204,113,0);
    }
}
@keyframes dotPulseOff {
    0%   {
        box-shadow: 0 0 0   0 rgba(255,74,74,.40);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255,74,74,0);
    }
    100% {
        box-shadow: 0 0 0   0 rgba(255,74,74,0);
    }
}
.method-label {
    line-height:1;
    white-space:nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
}
.sc-tiles--contacts {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.contact-tile {
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border-radius:12px;
    text-decoration:none;
    color:#fff;
    background: rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.12);
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.contact-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0,0,0,.38);
    border-color: rgba(232,187,81,.32);
    background: rgba(255,255,255,.06);
}
.contact-tile i {
    width:36px;
    height:36px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background: radial-gradient(120% 120% at 50% 0%, rgba(243,196,86,.22), rgba(255,255,255,.08) 60%);
    border:1px solid rgba(232,187,81,.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.25);
    font-size: 1rem;
}
.contact-tile span {
    font-weight:800;
    letter-spacing:.2px;
    color:#fff;
    opacity:.95;
}
.fp-wrap {
    padding: 18px 0 8px;
    /* border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgba(68, 68, 68, 0.753);
    border-top-right-radius: 10%;
    border-top-left-radius: 10%; */
}
.fp {
    max-width: var(--fp-max);
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: var(--fp-gap);
}
.fp-group {
    border: 1px solid var(--fp-card-bd);
    border-radius: var(--fp-radius);
    box-shadow: var(--fp-shadow);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fp-head {
    padding: 10px 0px 0;
}
.fp-title {
    display: inline-block;
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .4px;
    color: var(--fp-title-color);
    background: var(--fp-title-grad);
    padding: 6px 12px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0 4px 12px rgba(243,196,86,.25), 0 0 0 1px rgba(255,255,255,.18) inset;
    text-transform: uppercase;
}
.fp-logos {
    list-style: none;
    margin: 0px 0 14px;
    padding: 1px 1px 10px 15px;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.fp-logos li {
    display: grid;
    justify-content: left;
    padding: 3px;
    filter: grayscale(95%) contrast(105%);
}
.fp-logos li:hover {
    transform: translateY(-2px);
    border-color: rgba(232,187,81,.28);
    filter: grayscale(0%);
}
.fp-logos img {
    width: 100%;
    height: 36px;
    object-fit: contain;
    display: block;
}
.utilbar {
    background:var(--ub-bg);
    border-bottom:1px solid var(--ub-border);
    backdrop-filter:blur(8px);
    color:var(--ub-text);
    font-size:.9rem;
    z-index:2000;
    overflow:visible;
    position:relative;
}
.utilbar .container {
    position:relative;
    z-index:1;
    overflow:visible;
}
.utilbar__inner {
    display:grid;
    grid-template-columns:1fr auto auto;
    align-items:center;
    gap:var(--ub-gap);
    min-height:calc(var(--ub-h) + var(--ub-pad-y)*2);
    padding:var(--ub-pad-y) 20px;
}
.utilbar__left {
    display:inline-flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
}
.utilbar__icon {
    opacity:.85;
}
.utilbar__nav {
    display:inline-flex;
    align-items:center;
    gap:18px;
}
.util-link {
    display:inline-flex;
    gap:8px;
    align-items:center;
    color:var(--ub-text);
    text-decoration:none;
    padding:6px 10px;
    border-radius:8px;
    transition:background .2s ease,color .2s ease;
}
.util-link:hover {
    background:rgba(255,255,255,.06);
    color:var(--ub-text-strong);
}
.util-link i {
    color:var(--ub-accent);
}
.langmenu {
    position:relative;
    z-index:2200;
}
.langmenu__btn {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 12px;
    border:1px solid var(--ub-border);
    background:0 0;
    color:var(--ub-text-strong);
    border-radius:999px;
    cursor:pointer;
    transition:background .2s ease,border-color .2s ease;
    z-index:2101;
    position:relative;
}
.langmenu__btn:hover {
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.18);
}
.langmenu__btn .caret {
    width:14px;
    height:14px;
    fill:currentColor;
    opacity:.8;
}
.langmenu__list {
    position:absolute;
    right:0;
    top:calc(100% + 6px);
    width:180px;
    background:rgba(20,20,20,.98);
    border:1px solid var(--ub-border);
    border-radius:10px;
    box-shadow:0 12px 30px rgba(0,0,0,.35);
    list-style:none;
    margin:0;
    padding:6px;
    display:none;
    z-index:3000;
    overflow:visible;
}
.langmenu__list[data-open=true] {
    display:block;
}
.langmenu__list li {
    margin:2px 0;
}
.langmenu__list button {
    width:100%;
    text-align:left;
    padding:10px 10px;
    border:0;
    background:0 0;
    color:var(--ub-text-strong);
    border-radius:8px;
    cursor:pointer;
    transition:background .15s ease;
}
.langmenu__list button:hover {
    background:rgba(255,255,255,.08);
}
.toast-container {
    z-index: 9998;
}
.provider-logo-lospesco {
    width: 100%;
    max-width: 133px;
    height: 50px;
    object-fit: contain;
}
#transaction-history-hamburg {
    background-color: var(--transaction-history-hamburg) !important;
    color: var(--transaction-history-hamburg-text) !important;
}
.widget-content {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.wd-text, .depo-text {
    color: #000;
    border-radius: 0.35rem;
    font-size: 0.75rem;
    font-family: frabk;
}
#select-provider {
    background: linear-gradient(0deg, #8c3b009e 0%, #ffc80096 44%, #84550099 74%);
    border-bottom: 3px solid var(--icon-footer-color);
    #select-provider .row {
        display: flex;
        flex-wrap: wrap;
    }
    #select-provider .col {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 10px;
    }
    .provider-image {
        width: 100%;
        object-fit: contain;
        height: 100%;
    }
    .btn-show {
        background-color: var(--icon-footer-color);
        border-radius: 24px 24px 0px 0px;
        color: #000;
    }
    .card-trapezoid-left {
        vertical-align: bottom;
        height: 0px;
        display: inline-block;
        width: 20px;
        margin-right: -33px;
        border-bottom: 20px solid var(--icon-footer-color);
        border-left: 13px solid transparent;
        border-right: 25px solid transparent;
    }
    .card-trapezoid-right {
        vertical-align: bottom;
        height: 0px;
        display: inline-block;
        width: 20px;
        margin-left: -33px;
        border-bottom: 20px solid var(--icon-footer-color);
        border-left: 25px solid transparent;
        border-right: 13px solid transparent;
    }
}
.fav-grid-wrap {
    position: relative;
    width: 100%;
}
.fav__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
}
.fav__arrow:hover {
    background: rgba(0,0,0,0.8);
}
.fav__arrow--left {
    left: -20px;
}
.fav__arrow--right {
    right: -20px;
}
.carousel-inner {
    aspect-ratio: 24/7;
}
.games-content .nav-link {
    margin-bottom: -1px;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    color: #fff;
}
.games-content .nav-link.active,
.games-content .nav-link.active:hover {
    background: var(--primary-gradient);
    color: #121212;
    border-color: rgba(243, 196, 86, .8);
}
.games-content .nav-link:hover {
    border-color: rgba(243, 196, 86, .6);
}
.list-group-vendor .list-group-item.active {
    z-index: 2;
    color: #121212 !important;
    background: var(--primary-gradient) !important;
    border-color: rgba(243, 196, 86, .8) !important;
}
.list-group-vendor .list-group-item:hover {
    background: var(--primary-gradient) !important;
    color: #121212 !important;
    border-color: rgba(243, 196, 86, .6) !important;
}
.list-group-vendor .list-group-item {
    border-top-width: 0;
    background-color: transparent;
    color: #fff;
    padding: unset;
}
.card-game {
    background-color: var(--box-game-item);
}

.login-mobile {
    background: var(--fav-bg);
}

.bg-login-mobile {
    background:var(--primary-gradient);
    color:var(--text-color);
    border: 1px solid var(--secondary-color);
}

.bg-register-mobile {
    border:1px solid var(--secondary-color);
    color:var(--primary-text-color);
}

.bg-login-mobile,
.bg-register-mobile {
    font-weight: bold;
}

.bg-login-modal {
    background:var(--fav-bg);
}

.provider-logo-side {
    width: 100%;
    max-width: 30px;
    height: 50px;
    object-fit: contain;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.utilbar__btn {
    border-radius: 10px;
    width: 190px;
    text-align: center;
    font-size: 16px;
}

.btn-logout-mobile {
    background: var(--btn-logout-mobile);
}
.btn-deposit-mobile {
    background: var(--btn-deposit-mobile);
}
.btn-withdraw-mobile {
    background: var(--btn-withdraw-mobile);
}
.btn-history-transaction-mobile {
    background: var(--btn-history-transaction-mobile);
}

.provider-item{
    background: var(--provider-item-bg);
}

/* font awesome color */
.fa-facebook-f {
    color: #1877f2;
}

.fa-x {
    color: #000000;
}

.fa-telegram {
    color: #0088CC;
}

.fa-whatsapp {
    color: #25D366;
}

.fa-youtube {
    color: #CC1A1A;
}

.navigation-icon-box-svg {
    width: 24px; 
    height: 24px; 
    margin-right: 3px; 
    vertical-align: middle;
}

.slot-svg, .casino-svg, .arcade-svg, .cockfight-svg, .promo-svg, .lottery-svg, .sport-svg, .fishing-svg{
    fill: var(--icon-color);
}

.flag-wrap {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;       
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.flag-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.provider {
    position: relative;       
    padding: 0 44px;          
}

.provider__rail {
    overflow-x: auto;         
    -webkit-overflow-scrolling: touch;
    display: flex;
    gap: 0.5rem;              
    scroll-behavior: smooth;
    padding: .25rem 0;
}

.provider__rail::-webkit-scrollbar { height: 8px; }
.provider__rail::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 8px; }

.provider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    z-index: 20;
}

.provider__arrow--left  { left: 6px; }
.provider__arrow--right { right: 6px; }

.register-link {
    color: var(--secondary-color);
}

.password-toggle {
    display:inline-block;
    padding:9px 17px;
    border:none;
    border-radius:50px;
    font-weight:600;
    font-size:1rem;
    text-transform:uppercase;
    letter-spacing:1px;
    cursor:pointer;
    transition:var(--transition);
    box-shadow:0 5px 15px var(--box-shadow);
    position:relative;
    overflow:hidden;
    text-align:center;
    color: var(--icon-color);
    background: var(--bg-toggle-password);
}

.btn-download {
    display: inline-block;
    padding: 9px 17px;
    background: var(--primary-gradient);
    color: var(--text-color);
    border: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 5px 15px var(--box-shadow);
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* MEDIA QUERIES */

@media (hover:hover) {
    .favorites:hover .fav-bg__img{
        filter:grayscale(0) brightness(105%) blur(.5px);
    }
}

@media (prefers-reduced-motion:reduce) {
    .game-card,.game-card__thumb img,.rtp__bar{
        transition:none!important;
    }
    .ball,.game-nav-item,.gn-chip::after,.gn-scroll-btn,.icon-wrap,.lotto-card,.lotto-scroll-btn{
        transition:none!important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sc-card, .sc-tile, .sc-tile img{
        transition: none !important;
    }
    .status-dot{
        animation:none !important;
        box-shadow:none !important;
    }
    .fp-group, .fp-logos li{
        transition: none !important;
    }
}

@media (min-width:1280px) {
    .fav-grid > li{
        width:calc(100%/6 - 11.6px);
    }
}

@media (min-width:1024px) and (max-width:1279px) {
    .fav-grid > li{
        width:calc(100%/5 - 11.2px);
    }
}

@media (max-width:1200px) {
    .fav__arrow--right { 
        right: 7px;
    }
    .fav__arrow--left { 
        left: 7px;
    }
}

@media (max-width:1024px) {
    .headnav__rail{
        padding:10px 12px;
    }
    .headnav__rail {
        justify-content: start;
    }
}

@media (max-width:1023.98px) {
    .fav-bg__img{
        display:none;
    }
}

@media (min-width:768px) and (max-width:1023px) {
    .fav-grid > li{
        width:calc(100%/4 - 10.5px);
    }
}

@media (min-width:993px) {
    .mobile-only{
        display:none !important;
    }
}

@media (max-width:992px) {
    .nav-menu{
        display:none;
    }
    .desktop-only {
        display:none !important;
    }
    .mobile-menu-btn {
        display:block;
    }
    .hero-title {
        font-size:2.5rem;
    }
    .provider-grid {
        grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
        gap:20px;
    }
    .utilbar__inner{
        grid-template-columns:1fr auto;
    }
    /* .langmenu {
        display:none;
    } */
    .utilbar__left {
        display:none;
    }
    .utilbar__nav {
        display:none;
        align-items:center;
        /* margin-right: 15px; */
    }
    .sc-wrap{
        display: none;
    }
    .sc-second{
        display: block;
    }
    .sc-second-card {
        margin-bottom: 1.25rem;
    }
    .fp-wrap{
        /* display: none; */
    }
}

@media (max-width:768px) {
    :root{
        --lotto-w:210px;
    }
    body{
        padding-top:70px;
        padding-bottom:70px;
    }
    h1 {
        font-size:2.5rem;
    }
    h2 {
        font-size:2rem;
    }
    h3 {
        font-size:1.5rem;
    }
    .ticker__inner{
        min-height:40px;
        padding:6px 12px;
    }
    .ticker__item {
        font-size:.95rem;
    }
    .logo-lottery img {
        height: 50px;
    }
    .btn-play button {
        font-size: 12px;
        padding: 0.25rem 0.5rem;
    }
    .very-small {
        font-size: 0.5em;
    }
    .widget-content-container {
        max-height: 200px;
    }
    .carousel-container {
        aspect-ratio: 24 / 7;
    }
    .carousel-prev,
    .carousel-next {
        font-size: 24px;
        padding: 6px 10px;
    }
    .hero {
        padding:50px 0;
    }
    .hero-title {
        font-size:1.2rem;
    }
    .hero-subtitle {
        font-size:0.8rem;
    }
    .carousel-container {
        max-height:250px !important;
    }
    .provider-grid {
        grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
        gap:15px;
    }
    .provider-card a {
        padding:15px;
    }
    .provider-name {
        font-size:1rem;
        margin-bottom:15px;
    }
    .provider-button {
        padding:5px 15px;
        font-size:.8rem;
    }
    .bottom-menu {
        padding:10px 0;
        position:fixed;
        bottom:0;
        left:0;
        width:100%;
        background:var(--background-footer-mobile);
        backdrop-filter:blur(10px);
        display:flex;
        justify-content:space-around;
        box-shadow:0 -5px 20px rgba(0,0,0,.3);
        z-index:1000;
        border-top:1px solid rgba(255,255,255,.1);
    }
    #backToTopBtn {
        bottom:85px;
        width:45px;
        height:45px;
        font-size:1rem;
        margin-bottom:15px;
    }
    .footer {
        display:block;
    }
    .footer-links {
        display:none;
    }
    #lottery-content>* {
        margin:0 6px;
    }
    .headnav__item i{
        font-size:0.8rem !important;
    }
    .headnav__item span {
        font-size:0.8rem !important;
        font-weight:600;
        letter-spacing:.2px;
    }
    .fav__arrow--left {
        left: 7px;
    }
    .fav__arrow--right {
        right: 7px;
    }
    .utilbar__btn {
        width: 240px;
        font-size: 16px;
    }
    .provider__arrow { display: none; }
}

@media (max-width:767px) {
    .fav-grid > li{
        width:calc(50% - 7px);
    }
}

@media (max-width:600px) {
    .utilbar__inner{
        grid-template-columns:1fr auto;
        font-size:.85rem;
        padding-left:10px;
        padding-right:10px;
    }
    .utilbar__btn {
        width: 150px;
        font-size: 12px;
    }
}

@media (max-width: 575.98px) {
    #promo-view-page .as-promo-title-wrap{
        min-height: 0;
    }
    #promo-view-page .as-promotion-imgwrap{
        height:200px;
    }
    .favorites__filters {
        display: block;
        text-align: center; 
        margin-top: 20px;
    }
    .favorites__filters > * {
        display: block;     
        margin-bottom: 10px; 
    }
    .favorites__filters > *:last-child {
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    .lottery-title {
        font-size: 16px;
    }
    .lottery-number {
        font-size: 18px;
    }
    .lottery-small {
        font-size: 16px;
    }
    .method-tile img{
        width: 80px;
        height: 30px;
    }
    .contact-tile {
        gap:10px;
        padding:10px 12px;
    }
    .contact-tile i {
        width:34px;
        height:34px;
        font-size:.95rem;
    }
    .website-logo {
        width: 75%;
        max-width: 300px;
    }
    .nav-tabs{
        border-bottom: none;
    }
    .utilbar__btn {
        width: 135px;
        font-size: 10px;
    }
    .provider-grid{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }
    .footer-links {
        flex-direction:column;
        gap:10px;
    }
}

@media (max-width:420px) {
    .game-provider{
        flex-basis:48%;
        min-width:100px;
    }
    .rtp {
        min-width:120px;
        gap:6px;
    }
    .rtp__val {
        flex-basis:3rem;
    }
    .utilbar__btn {
        width: 120px;
        font-size: 9px;
    }
}

@media (max-width: 340px) {
    .lottery-title {
        font-size: 10px;
    }
    .lottery-number {
        font-size: 12px;
    }
    .lottery-small {
        font-size: 10px;
    }
    .lottery-date {
        font-size: 8px;
    }
}