/* ==========================================================
   Lotto Side - Main Stylesheet
   Version 2.0
   ========================================================== */


/* ==========================================================
   RESET
   ========================================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#081325;
    color:#ffffff;
    font-family:Tahoma,sans-serif;
    line-height:1.6;
    overflow-x:hidden;

    /*
      44px TopBar
      60px Navbar
    */
    padding-top:104px;
}

img{
    max-width:100%;
    display:block;
}

a{
    color:inherit;
    text-decoration:none;
    transition:.25s;
}

ul{
    margin:0;
    padding:0;
    list-style:none;
}

.container{
    position:relative;
}


/* ==========================================================
   COLORS
   ========================================================== */

:root{

    --primary:#d4af37;

    --primary-hover:#e6c34a;

    --dark:#081325;

    --dark-2:#0b1633;

    --dark-3:#06101d;

    --card:#0f1d3d;

    --white:#ffffff;

}


/* ==========================================================
   TOP BAR
   ========================================================== */

.top-bar{

    position:fixed;

    top:0;

    left:0;
    

    width:100%;

    height:44px;

    background:var(--dark-3);

    border-bottom:1px solid rgba(255,255,255,.08);

    z-index:1055;

    display:flex;

    align-items:center;

}

.top-bar .container{

    width:100%;

}

.top-bar-content{

    width:100%;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.top-language{

    display:flex;

    align-items:center;

    gap:8px;

}

.lang-link{

    color:var(--primary);

    font-weight:600;

}

.lang-link:hover{

    color:#fff;

}

.top-jackpot{

    display:flex;

    align-items:center;

    gap:6px;

    color:#fff;

}

.top-jackpot strong{

    color:var(--primary);

}


/* ==========================================================
   HEADER
   ========================================================== */

.main-navbar{

    position:fixed;

    top:44px;

    left:0;

    width:100%;

    z-index:1050;

    background:var(--dark-2);

    backdrop-filter:blur(15px);

    border-bottom:1px solid rgba(255,255,255,.08);

    padding:10px 0;

}


/* ==========================================================
   LOGO
   ========================================================== */

.logo-wrapper{

    display:flex;

    align-items:center;

    gap:12px;

}

.logo-image{

    width:56px;

    height:56px;

    object-fit:contain;

}

.logo-text{

    display:flex;

    flex-direction:column;

}

.logo-en{

    color:var(--primary);

    font-size:20px;

    font-weight:700;

}

.logo-ar{

    color:#fff;

    font-size:14px;

}


/* ==========================================================
   NAVIGATION
   ========================================================== */

.navbar-nav{

    gap:14px;

}

.navbar .nav-link{

    color:#fff !important;

    padding:10px 10px;

    border-radius:8px;

    transition:.25s;

    font-size:18px;

    font-weight:700;

}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-item:hover>.nav-link{

    background:var(--primary);

    color:#111 !important;

}

.navbar-toggler{

    border:1px solid rgba(255,255,255,.20);

    background:var(--primary);

    padding:8px 10px;

}

.navbar-toggler:focus{

    box-shadow:none;

}


/* ==========================================================
   HEADER BUTTONS
   ========================================================== */

.btn-login{

    color:#fff;

    border:1px solid var(--primary);

    margin-inline-end:8px;

}

.btn-login:hover{

    background:var(--primary);

    color:#111;

}

.btn-register{

    background:var(--primary);

    color:#111;

    margin-inline-end:8px;

}

.btn-register:hover{

    background:var(--primary-hover);

    color:#111;

}
/* ==========================================================
   HERO SECTION
   ========================================================== */

.hero-section{

    background:linear-gradient(
        180deg,
        #0b1633 0%,
        #081325 100%
    );

    padding:120px 0 80px;

    text-align:center;

}

.hero-section h1{

    font-size:52px;

    font-weight:700;

    color:#fff;

    margin-bottom:20px;

}

.hero-section p{

    max-width:760px;

    margin:auto;

    color:#c9d2df;

    font-size:20px;

    line-height:1.8;

}

.hero-buttons{

    margin-top:35px;

}

.btn-gold{
    
    display: inline-block;
    
    background:var(--primary);

    color:#111;

    font-weight:700;

    padding:14px 34px;

    border-radius:10px;

    transition:.3s;

}

.btn-gold:hover{

    background:var(--primary-hover);

    transform:translateY(-3px);

}


/* ==========================================================
   SECTIONS
   ========================================================== */

section{

    position:relative;

}

.section-title{

    text-align:center;

    color:#fff;

    font-size:36px;

    font-weight:700;

    margin-bottom:45px;

}

.jackpot-section,
.games-section,
.results-section,
.winners-section{

    padding:90px 0;

}


/* ==========================================================
   CARDS
   ========================================================== */

.info-card,
.game-card,
.winner-card{

    background:var(--card);

    border-radius:20px;

    box-shadow:0 15px 40px rgba(0,0,0,.18);

}


.info-card{

    padding:30px;

    text-align:center;

    height:100%;

    min-height:150px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}


.game-card{

    padding:30px;

    text-align:center;

    transition:.3s;

    height:100%;

}


.game-card:hover{

    transform:translateY(-6px);

}


.active-game{

    border:2px solid var(--primary);

}


.winner-card{

    padding:22px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

/* ==========================================================
   JACKPOT
   ========================================================== */

.jackpot-value{

    font-size:36px;

    font-weight:700;

    color:var(--primary);

    margin:20px 0;

}

.jackpot-label{

    color:#cfd5df;

}


/* ==========================================================
   COUNTDOWN
   ========================================================== */

.countdown{

    display:flex;
    
    color:var(--primary);

    justify-content:center;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}

.count-box{

    width:110px;

    height:110px;

    background:#182544;

    border-radius:18px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    box-shadow:0 10px 25px rgba(0,0,0,.18);

}

.count-value{

    font-size:42px;

    font-weight:700;

    color:#ffc107;

    line-height:1;

}

.count-label{

    color:#fff;

    font-size:15px;

    margin-top:10px;

}


/* ==========================================================
   LOTTERY BALLS
   ========================================================== */

.balls-wrapper{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:16px;

    flex-wrap:wrap;

}

.lottery-ball{

    width:80px;

    height:80px;

    border-radius:50%;

    background:var(--primary);

    color:#111;

    font-size:28px;

    font-weight:700;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:0 8px 18px rgba(0,0,0,.25);

    transition:.25s;

}

.lottery-ball:hover{

    transform:scale(1.08);

}


/* ==========================================================
   RESULTS
   ========================================================== */

.result-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.result-row:last-child{

    border-bottom:none;

}


/* ==========================================================
   TABLES
   ========================================================== */

.table{

    color:#fff;

}

.table thead{

    background:#14254b;

}

.table td,
.table th{

    border-color:rgba(255,255,255,.08);

    vertical-align:middle;

}


/* ==========================================================
   BADGES
   ========================================================== */

.badge-gold{

    background:var(--primary);

    color:#111;

    font-weight:700;

}


/* ==========================================================
   FORMS
   ========================================================== */

.form-control,
.form-select{

    background:#132448;

    border:1px solid rgba(255,255,255,.10);

    color:#fff;

}

.form-control:focus,
.form-select:focus{

    background:#132448;

    color:#fff;

    border-color:var(--primary);

    box-shadow:none;

}

.form-control::placeholder{

    color:#9fa7b5;

}


/* ==========================================================
   ALERTS
   ========================================================== */

.alert{

    border:none;

    border-radius:12px;

}
/* ==========================================================
   FOOTER
========================================================== */

.main-footer{

    background:#06101d;

    padding:70px 0 30px;

    margin-top:70px;

    border-top:1px solid rgba(255,255,255,.08);

}

.main-footer h5{

    color:var(--primary);

    font-weight:700;

    margin-bottom:20px;

}

.main-footer p{

    color:#c7ced9;

}

.main-footer ul{

    list-style:none;

    padding:0;

    margin:0;

}

.main-footer li{

    margin-bottom:10px;

}

.main-footer a{

    color:#ffffff;

    transition:.25s;

}

.main-footer a:hover{

    color:var(--primary);

}

.footer-bottom{

    margin-top:35px;

    padding-top:20px;

    border-top:1px solid rgba(255,255,255,.08);

    text-align:center;

    color:#9aa6bb;

}


/* ==========================================================
   SOCIAL ICONS
========================================================== */

.social-icons{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}

.social-icon{

    width:50px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    color:#fff;

    font-size:20px;

    transition:.25s;

}

.social-icon:hover{

    background:var(--primary);

    color:#111;

    transform:translateY(-3px);

}


/* ==========================================================
   MOBILE USER CARD
========================================================== */

.mobile-user-card{

    display:none;

}

.mobile-user-name{

    font-size:22px;

    font-weight:700;

}

.mobile-user-balance{

    font-size:18px;

    font-weight:700;

    color:#111;

}

.mobile-user-links{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.mobile-user-links a{

    background:#fff;

    color:#111;

    padding:10px;

    border-radius:10px;

    font-weight:600;

    transition:.25s;

}

.mobile-user-links a:hover{

    background:#111827;

    color:#fff;

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:991px){

    body{

        padding-top:104px;

    }

    /* ---------- Top Bar ---------- */

    .top-bar{

        height:44px;
        padding-top:10px;


    }

    .top-bar-content{

        justify-content:center;

        align-items:center;

        gap:20px;

    }

    .top-language,
    .top-jackpot{

        display:flex;

        justify-content:center;

        align-items:center;

    }

    /* ---------- Navbar ---------- */

    .main-navbar{

        top:44px;

        padding:8px 0;

    }

    .navbar-collapse{

        background:#0b1633;

        margin-top:12px;

        padding:15px;

        border-radius:15px;

        max-height:75vh;

        overflow-y:auto;

    }

    .navbar-nav{

        gap:5px;

    }

    .navbar .nav-link{

        text-align:center;

    }

    /* ---------- Desktop buttons ---------- */

    .header-actions{

        display:none !important;

    }

    /* ---------- Mobile card ---------- */

    .mobile-user-card{

        display:block;

        background:var(--primary);

        color:#111;

        border-radius:15px;

        padding:18px;

        margin:15px 0;

        text-align:center;

    }

}


/* ==========================================================
   PHONE
========================================================== */

@media (max-width:768px){

    .hero-section{

        padding:90px 0 60px;

    }

    .hero-section h1{

        font-size:34px;

    }

    .hero-section p{

        font-size:17px;

    }

    .section-title{

        font-size:28px;

    }

    .jackpot-value{

        font-size:30px;

    }

    .count-box{

        width:85px;

        height:85px;

    }

    .count-value{

        font-size:28px;

    }

    .lottery-ball{

        width:62px;

        height:62px;

        font-size:22px;

    }

    .winner-card{

        flex-direction:column;

        gap:10px;

        text-align:center;

    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media (max-width:480px){

    .logo-image{

        width:42px;

        height:42px;

    }

    .logo-en{

        font-size:17px;

    }

    .logo-ar{

        font-size:12px;

    }

    .top-bar-content{

        gap:10px;

        font-size:13px;

    }

    .btn-login,
    .btn-register,
    .btn-gold{

        width:100%;

    }

}

.navbar-brand{

    margin:0 !important;
    padding:0 !important;

}

.logo-wrapper{

    margin:0 !important;
    padding:0 !important;

}
.jackpot-section .info-card h3{

    font-size:36px;

    font-weight:700;

    color:#fff;

    margin-bottom:20px;

}




.jackpot-value,
#countdown{

    font-size:30px;

    font-weight:700;

    line-height:1.2;

    margin:20px 0;

}
#countdown,
#countdown *{
    
     

    font-size:30px;

    font-weight:700;

}

@media (min-width: 768px){

    #withdrawForm .col-md-3{
        flex:0 0 25%;
        max-width:25%;
    }

    #cryptoWithdrawFields{
        flex:0 0 50%;
        max-width:50%;
    }

}

#cryptoWithdrawFields .form-control,
#cryptoWithdrawFields .form-select{

    width:100%;

}
.hero-play-btn{
    min-width:220px;
    padding:14px 36px;
}

@media (max-width:768px){

    .hero-play-btn{
        display:inline-flex;
        width:auto;
        min-width:220px;
        justify-content:center;
    }

    .hero-buttons{
        text-align:center;
    }

}


.navbar-toggler{

    border:1px solid rgba(255,255,255,.25);

    background:#d4af37;

    padding:8px 10px;

}

.navbar-toggler i,
.navbar-toggler-icon{

    color:#111 !important;

    filter:brightness(0);

}

@media (max-width:768px){

    .row{
        margin-left:0;
        margin-right:0;
    }

    .col-md-6,
    .col-lg-3,
    .col-xl-10{
        padding-left:8px;
        padding-right:8px;
    }

}

@media (max-width:991px){

    .mobile-user-card{
        background:#d4af37;
        border-radius:16px;
        padding:18px;
        margin:15px;
        text-align:center;
    }

    .mobile-user-name{
        font-size:22px;
        font-weight:700;
        color:#111;
        margin-bottom:8px;
    }

    .mobile-user-balance{
        font-size:18px;
        font-weight:700;
        color:#111;
        margin-bottom:15px;
    }

    .mobile-user-links{
        display:flex;
        flex-direction:column;
        gap:10px;
    }

    .mobile-user-links a{
        background:#fff;
        color:#111;
        text-decoration:none;
        padding:10px;
        border-radius:10px;
        font-weight:600;
        transition:.3s;
    }

    .mobile-user-links a:hover{
        background:#111827;
        color:#fff;
    }

    .header-actions{
        display:none !important;
    }

    .navbar{
        top:44px !important;
    }

    body{
        padding-top:100px !important;
    }

    .top-bar-content{
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:4px;
        text-align:center;
    }

    .top-language,
    .top-jackpot{
        width:100%;
        text-align:center;
        justify-content:center;
    }

}

/* SEO Content Section */

.seo-card {
    background: rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 25px;
    height: 100%;
    transition: transform .3s ease;
}

.seo-card:hover {
    transform: translateY(-5px);
}

.seo-card h3 {
    color:#f4c542;
}

.seo-card p {
    color:#e5e7eb;
    line-height:1.9;
}

.gtm-hidden {
    display: none;
    visibility: hidden;
}
/* ==========================================================
   Lotto Side - Main Stylesheet
   Version 2.0
   ========================================================== */


/* ==========================================================
   RESET
   ========================================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#081325;
    color:#ffffff;
    font-family:Tahoma,sans-serif;
    line-height:1.6;
    overflow-x:hidden;

    /*
      44px TopBar
      60px Navbar
    */
    padding-top:104px;
}

img{
    max-width:100%;
    display:block;
}

a{
    color:inherit;
    text-decoration:none;
    transition:.25s;
}

ul{
    margin:0;
    padding:0;
    list-style:none;
}

.container{
    position:relative;
}


/* ==========================================================
   COLORS
   ========================================================== */

:root{

    --primary:#d4af37;

    --primary-hover:#e6c34a;

    --dark:#081325;

    --dark-2:#0b1633;

    --dark-3:#06101d;

    --card:#0f1d3d;

    --white:#ffffff;

}


/* ==========================================================
   TOP BAR
   ========================================================== */

.top-bar{

    position:fixed;

    top:0;

    left:0;
    

    width:100%;

    height:44px;

    background:var(--dark-3);

    border-bottom:1px solid rgba(255,255,255,.08);

    z-index:1055;

    display:flex;

    align-items:center;

}

.top-bar .container{

    width:100%;

}

.top-bar-content{

    width:100%;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.top-language{

    display:flex;

    align-items:center;

    gap:8px;

}

.lang-link{

    color:var(--primary);

    font-weight:600;

}

.lang-link:hover{

    color:#fff;

}

.top-jackpot{

    display:flex;

    align-items:center;

    gap:6px;

    color:#fff;

}

.top-jackpot strong{

    color:var(--primary);

}


/* ==========================================================
   HEADER
   ========================================================== */

.main-navbar{

    position:fixed;

    top:44px;

    left:0;

    width:100%;

    z-index:1050;

    background:var(--dark-2);

    backdrop-filter:blur(15px);

    border-bottom:1px solid rgba(255,255,255,.08);

    padding:10px 0;

}


/* ==========================================================
   LOGO
   ========================================================== */

.logo-wrapper{

    display:flex;

    align-items:center;

    gap:12px;

}

.logo-image{

    width:56px;

    height:56px;

    object-fit:contain;

}

.logo-text{

    display:flex;

    flex-direction:column;

}

.logo-en{

    color:var(--primary);

    font-size:20px;

    font-weight:700;

}

.logo-ar{

    color:#fff;

    font-size:14px;

}


/* ==========================================================
   NAVIGATION
   ========================================================== */

.navbar-nav{

    gap:14px;

}

.navbar .nav-link{

    color:#fff !important;

    padding:10px 10px;

    border-radius:8px;

    transition:.25s;

    font-size:18px;

    font-weight:700;

}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-item:hover>.nav-link{

    background:var(--primary);

    color:#111 !important;

}

.navbar-toggler{

    border:1px solid rgba(255,255,255,.20);

    background:var(--primary);

    padding:8px 10px;

}

.navbar-toggler:focus{

    box-shadow:none;

}


/* ==========================================================
   HEADER BUTTONS
   ========================================================== */

.btn-login{

    color:#fff;

    border:1px solid var(--primary);

    margin-inline-end:8px;

}

.btn-login:hover{

    background:var(--primary);

    color:#111;

}

.btn-register{

    background:var(--primary);

    color:#111;

    margin-inline-end:8px;

}

.btn-register:hover{

    background:var(--primary-hover);

    color:#111;

}
/* ==========================================================
   HERO SECTION
   ========================================================== */

.hero-section{

    background:linear-gradient(
        180deg,
        #0b1633 0%,
        #081325 100%
    );

    padding:120px 0 80px;

    text-align:center;

}

.hero-section h1{

    font-size:52px;

    font-weight:700;

    color:#fff;

    margin-bottom:20px;

}

.hero-section p{

    max-width:760px;

    margin:auto;

    color:#c9d2df;

    font-size:20px;

    line-height:1.8;

}

.hero-buttons{

    margin-top:35px;

}

.btn-gold{
    
    display: inline-block;
    
    background:var(--primary);

    color:#111;

    font-weight:700;

    padding:14px 34px;

    border-radius:10px;

    transition:.3s;

}

.btn-gold:hover{

    background:var(--primary-hover);

    transform:translateY(-3px);

}


/* ==========================================================
   SECTIONS
   ========================================================== */

section{

    position:relative;

}

.section-title{

    text-align:center;

    color:#fff;

    font-size:36px;

    font-weight:700;

    margin-bottom:45px;

}

.jackpot-section,
.games-section,
.results-section,
.winners-section{

    padding:90px 0;

}


/* ==========================================================
   CARDS
   ========================================================== */

.info-card,
.game-card,
.winner-card{

    background:var(--card);

    border-radius:20px;

    box-shadow:0 15px 40px rgba(0,0,0,.18);

}


.info-card{

    padding:30px;

    text-align:center;

    height:100%;

    min-height:150px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}


.game-card{

    padding:30px;

    text-align:center;

    transition:.3s;

    height:100%;

}


.game-card:hover{

    transform:translateY(-6px);

}


.active-game{

    border:2px solid var(--primary);

}


.winner-card{

    padding:22px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

/* ==========================================================
   JACKPOT
   ========================================================== */

.jackpot-value{

    font-size:36px;

    font-weight:700;

    color:var(--primary);

    margin:20px 0;

}

.jackpot-label{

    color:#cfd5df;

}


/* ==========================================================
   COUNTDOWN
   ========================================================== */

.countdown{

    display:flex;
    
    color:var(--primary);

    justify-content:center;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}

.count-box{

    width:110px;

    height:110px;

    background:#182544;

    border-radius:18px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    box-shadow:0 10px 25px rgba(0,0,0,.18);

}

.count-value{

    font-size:42px;

    font-weight:700;

    color:#ffc107;

    line-height:1;

}

.count-label{

    color:#fff;

    font-size:15px;

    margin-top:10px;

}


/* ==========================================================
   LOTTERY BALLS
   ========================================================== */

.balls-wrapper{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:16px;

    flex-wrap:wrap;

}

.lottery-ball{

    width:80px;

    height:80px;

    border-radius:50%;

    background:var(--primary);

    color:#111;

    font-size:28px;

    font-weight:700;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:0 8px 18px rgba(0,0,0,.25);

    transition:.25s;

}

.lottery-ball:hover{

    transform:scale(1.08);

}


/* ==========================================================
   RESULTS
   ========================================================== */

.result-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.result-row:last-child{

    border-bottom:none;

}


/* ==========================================================
   TABLES
   ========================================================== */

.table{

    color:#fff;

}

.table thead{

    background:#14254b;

}

.table td,
.table th{

    border-color:rgba(255,255,255,.08);

    vertical-align:middle;

}


/* ==========================================================
   BADGES
   ========================================================== */

.badge-gold{

    background:var(--primary);

    color:#111;

    font-weight:700;

}


/* ==========================================================
   FORMS
   ========================================================== */

.form-control,
.form-select{

    background:#132448;

    border:1px solid rgba(255,255,255,.10);

    color:#fff;

}

.form-control:focus,
.form-select:focus{

    background:#132448;

    color:#fff;

    border-color:var(--primary);

    box-shadow:none;

}

.form-control::placeholder{

    color:#9fa7b5;

}


/* ==========================================================
   ALERTS
   ========================================================== */

.alert{

    border:none;

    border-radius:12px;

}
/* ==========================================================
   FOOTER
========================================================== */

.main-footer{

    background:#06101d;

    padding:70px 0 30px;

    margin-top:70px;

    border-top:1px solid rgba(255,255,255,.08);

}

.main-footer h5{

    color:var(--primary);

    font-weight:700;

    margin-bottom:20px;

}

.main-footer p{

    color:#c7ced9;

}

.main-footer ul{

    list-style:none;

    padding:0;

    margin:0;

}

.main-footer li{

    margin-bottom:10px;

}

.main-footer a{

    color:#ffffff;

    transition:.25s;

}

.main-footer a:hover{

    color:var(--primary);

}

.footer-bottom{

    margin-top:35px;

    padding-top:20px;

    border-top:1px solid rgba(255,255,255,.08);

    text-align:center;

    color:#9aa6bb;

}


/* ==========================================================
   SOCIAL ICONS
========================================================== */

.social-icons{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}

.social-icon{

    width:50px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    color:#fff;

    font-size:20px;

    transition:.25s;

}

.social-icon:hover{

    background:var(--primary);

    color:#111;

    transform:translateY(-3px);

}


/* ==========================================================
   MOBILE USER CARD
========================================================== */

.mobile-user-card{

    display:none;

}

.mobile-user-name{

    font-size:22px;

    font-weight:700;

}

.mobile-user-balance{

    font-size:18px;

    font-weight:700;

    color:#111;

}

.mobile-user-links{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.mobile-user-links a{

    background:#fff;

    color:#111;

    padding:10px;

    border-radius:10px;

    font-weight:600;

    transition:.25s;

}

.mobile-user-links a:hover{

    background:#111827;

    color:#fff;

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:991px){

    body{

        padding-top:104px;

    }

    /* ---------- Top Bar ---------- */

    .top-bar{

        height:44px;
        padding-top:10px;


    }

    .top-bar-content{

        justify-content:center;

        align-items:center;

        gap:20px;

    }

    .top-language,
    .top-jackpot{

        display:flex;

        justify-content:center;

        align-items:center;

    }

    /* ---------- Navbar ---------- */

    .main-navbar{

        top:44px;

        padding:8px 0;

    }

    .navbar-collapse{

        background:#0b1633;

        margin-top:12px;

        padding:15px;

        border-radius:15px;

        max-height:75vh;

        overflow-y:auto;

    }

    .navbar-nav{

        gap:5px;

    }

    .navbar .nav-link{

        text-align:center;

    }

    /* ---------- Desktop buttons ---------- */

    .header-actions{

        display:none !important;

    }

    /* ---------- Mobile card ---------- */

    .mobile-user-card{

        display:block;

        background:var(--primary);

        color:#111;

        border-radius:15px;

        padding:18px;

        margin:15px 0;

        text-align:center;

    }

}


/* ==========================================================
   PHONE
========================================================== */

@media (max-width:768px){

    .hero-section{

        padding:90px 0 60px;

    }

    .hero-section h1{

        font-size:34px;

    }

    .hero-section p{

        font-size:17px;

    }

    .section-title{

        font-size:28px;

    }

    .jackpot-value{

        font-size:30px;

    }

    .count-box{

        width:85px;

        height:85px;

    }

    .count-value{

        font-size:28px;

    }

    .lottery-ball{

        width:62px;

        height:62px;

        font-size:22px;

    }

    .winner-card{

        flex-direction:column;

        gap:10px;

        text-align:center;

    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media (max-width:480px){

    .logo-image{

        width:42px;

        height:42px;

    }

    .logo-en{

        font-size:17px;

    }

    .logo-ar{

        font-size:12px;

    }

    .top-bar-content{

        gap:10px;

        font-size:13px;

    }

    .btn-login,
    .btn-register,
    .btn-gold{

        width:100%;

    }

}

.navbar-brand{

    margin:0 !important;
    padding:0 !important;

}

.logo-wrapper{

    margin:0 !important;
    padding:0 !important;

}
.jackpot-section .info-card h3{

    font-size:36px;

    font-weight:700;

    color:#fff;

    margin-bottom:20px;

}




.jackpot-value,
#countdown{

    font-size:30px;

    font-weight:700;

    line-height:1.2;

    margin:20px 0;

}
#countdown,
#countdown *{
    
     

    font-size:30px;

    font-weight:700;

}

@media (min-width: 768px){

    #withdrawForm .col-md-3{
        flex:0 0 25%;
        max-width:25%;
    }

    #cryptoWithdrawFields{
        flex:0 0 50%;
        max-width:50%;
    }

}

#cryptoWithdrawFields .form-control,
#cryptoWithdrawFields .form-select{

    width:100%;

}
.hero-play-btn{
    min-width:220px;
    padding:14px 36px;
}

@media (max-width:768px){

    .hero-play-btn{
        display:inline-flex;
        width:auto;
        min-width:220px;
        justify-content:center;
    }

    .hero-buttons{
        text-align:center;
    }

}


.navbar-toggler{

    border:1px solid rgba(255,255,255,.25);

    background:#d4af37;

    padding:8px 10px;

}

.navbar-toggler i,
.navbar-toggler-icon{

    color:#111 !important;

    filter:brightness(0);

}

@media (max-width:768px){

    .row{
        margin-left:0;
        margin-right:0;
    }

    .col-md-6,
    .col-lg-3,
    .col-xl-10{
        padding-left:8px;
        padding-right:8px;
    }

}

@media (max-width:991px){

    .mobile-user-card{
        background:#d4af37;
        border-radius:16px;
        padding:18px;
        margin:15px;
        text-align:center;
    }

    .mobile-user-name{
        font-size:22px;
        font-weight:700;
        color:#111;
        margin-bottom:8px;
    }

    .mobile-user-balance{
        font-size:18px;
        font-weight:700;
        color:#111;
        margin-bottom:15px;
    }

    .mobile-user-links{
        display:flex;
        flex-direction:column;
        gap:10px;
    }

    .mobile-user-links a{
        background:#fff;
        color:#111;
        text-decoration:none;
        padding:10px;
        border-radius:10px;
        font-weight:600;
        transition:.3s;
    }

    .mobile-user-links a:hover{
        background:#111827;
        color:#fff;
    }

    .header-actions{
        display:none !important;
    }

    .navbar{
        top:44px !important;
    }

    body{
        padding-top:100px !important;
    }

    .top-bar-content{
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:4px;
        text-align:center;
    }

    .top-language,
    .top-jackpot{
        width:100%;
        text-align:center;
        justify-content:center;
    }

}

/* SEO Content Section */

.seo-card {
    background: rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 25px;
    height: 100%;
    transition: transform .3s ease;
}

.seo-card:hover {
    transform: translateY(-5px);
}

.seo-card h3 {
    color:#f4c542;
}

.seo-card p {
    color:#e5e7eb;
    line-height:1.9;
}

.gtm-hidden {
    display: none;
    visibility: hidden;
}
/* ================================
   Home FAQ
================================ */

.home-faq{

    background:#081325 !important;

    background-image:none !important;

    color:#fff;

}
}

.home-faq-title {
    font-weight: 700;
    margin-bottom: .75rem;
}

.home-faq-subtitle {
    font-size:1.25rem;
    max-width: 760px;
    margin: auto;
    color: #fff;
    line-height: 1.9;
    
}

.home-faq .accordion-item {
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,.05);
}

.home-faq .accordion-button{
    display:flex;
    align-items:center;
    gap:.75rem;
    line-height:1.6;
    white-space:normal;
}
.accordion-button span{
    flex:1;
}
.home-faq .accordion-button:not(.collapsed) {
    background: #d4af37;
color: #111;
}

.home-faq .accordion-button:focus {
    box-shadow: none;
}

.home-faq .accordion-body {
    line-height: 1.9;
    color: #555;
}

.home-faq-more {
    margin-top: 30px;
}

.home-faq-more .btn {
    padding: 10px 28px;
    border-radius: 30px;
}
/* Accessible Gold */
:root{
    --gold:#b8860b;
    --gold-dark:#8a6508;
    --gold-light:#d6a400;
}

.text-gold{
    color:var(--gold-dark)!important;
}

.btn-outline-warning{
    color:var(--gold-dark)!important;
    border-color:var(--gold-dark)!important;
    background:transparent;
}

.btn-outline-warning:hover,
.btn-outline-warning.active,
.btn-outline-warning.selected{
    background:var(--gold);
    border-color:var(--gold);
    color:#111!important;
}

.lottery-number{
    font-weight:700;
}
/* FAQ */

.accordion-item{
    border:0;
    border-radius:10px;
    overflow:hidden;
    margin-bottom:18px;
    background:#fff;
}

.accordion-button{
    background:#fff;
    color:#111;
    font-weight:700;
    padding:1.2rem 1.5rem;
    box-shadow:none !important;
}

.accordion-button:not(.collapsed){
    background:#d4af37; /* ذهبي الموقع */
    color:#111;
}

.accordion-button.collapsed{
    background:#fff;
    color:#111;
}

.accordion-button:focus{
    box-shadow:none;
}

.accordion-button::after{
    filter:brightness(0);
}

.accordion-body{
    background:#fff;
    color:#222;
    line-height:2;
    
}