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

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

body{
    font-family: "Poppins", sans-serif;
    background:#f5f5f5;
    color:#222;
}

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

:root{
    --red:#ffb600;
    --dark-red:#8e1b1b;
    --light-red:#ffebee;
    --white:#fff;
    --shadow:0 6px 18px rgba(0,0,0,.08);
}

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

.topbar{
    background:linear-gradient(90deg, #0d47a1, #0066ff);
    color:#fff;
    padding:10px 0;
}

.topbar .logo{
    font-weight:800;
    font-size:20px;
}

/* =========================
   NAVBAR
========================= */

.navbar{
    padding:12px 0;
}

.navbar-nav .nav-link{
    font-weight:600;
    color:#333 !important;
    margin:0 8px;
}

.navbar-nav .nav-link:hover{
    color:var(--red) !important;
}

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

.hero{
    background:linear-gradient(135deg, #0065ff, #25226c);
    color:#fff;
    text-align:center;
    padding:70px 15px;
}

.hero h1{
    font-size:42px;
    font-weight:800;
}

.hero p{
    opacity:.9;
    margin-top:10px;
}

/* =========================
   SECTION TITLE
========================= */

.section-title{
    font-size:28px;
    font-weight:800;
    text-align:center;
    color:var(--red);
    margin-bottom:25px;
    position:relative;
}

.section-title::after{
    content:"";
    width:60px;
    height:4px;
    background:#ffb300;
    position:absolute;
    bottom:-10px;
    left:50%;
    transform:translateX(-50%);
    border-radius:5px;
}

/* =========================
   RESULT CARD
========================= */

.result-card{
    background:#fff;
    border-radius:14px;
    padding:20px;
    text-align:center;
    box-shadow:var(--shadow);
    border-top:4px solid var(--red);
    transition:.3s;
}

.result-card:hover{
    transform:translateY(-6px);
}

.result-card h5{
    color:var(--red);
    font-weight:700;
}

.result-card .numbers span{
    display:block;
    margin-top:6px;
    font-weight:600;
    font-size:16px;
}

/* =========================
   DOWNLOAD SECTION
========================= */

.download-section{
    background:#fff;
    text-align:center;
}

.download-section h2{
    color:var(--red);
    font-weight:800;
}

/* =========================
   BUTTON RED
========================= */

.btn-red{
    background:#ec0404;
    color:#fff;
    border:none;
}

.btn-red:hover{
    background:var(--dark-red);
    color:#fff;
}

/* =========================
   TABLE STYLING
========================= */

.table{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:var(--shadow);
}

.table thead{
    background:var(--red);
    color:#fff;
}

.table tbody tr:hover{
    background:var(--light-red);
}

/* =========================
   NUMBER GRID
========================= */

.number-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
}

.number-grid span{
    width:60px;
    height:60px;
    background:var(--red);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-weight:700;
    box-shadow:0 4px 10px rgba(198,40,40,.3);
}


.teer-overview .overview-box{
    background:#fff;
    padding:25px;
    border-radius:12px;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    border-left:5px solid #045cec;
}

.teer-overview p{
    margin-bottom:15px;
    line-height:1.7;
    color:#333;
    font-size:15px;
}

.teer-overview p:last-child{
    margin-bottom:0;
}
/* =========================
   HOW TO PLAY
========================= */

.how-to-play .how-box{
    background:#fff;
    padding:25px;
    border-radius:12px;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    border-left:5px solid #045cec;
}

.how-to-play p{
    margin-bottom:15px;
    line-height:1.7;
    color:#333;
    font-size:15px;
}

.how-to-play p:last-child{
    margin-bottom:0;
}

.step{
    background:#fff;
    padding:18px;
    margin-bottom:15px;
    border-radius:12px;
    box-shadow:var(--shadow);
    border-left:4px solid var(--red);
    font-weight:500;
}

.faq .accordion-button{
    background:#fff;
    color:#045cec;
    font-weight:600;
    box-shadow:none;
}

.faq .accordion-button:not(.collapsed){
    background:#045cec;
    color:#fff;
}

.faq .accordion-item{
    border:none;
    margin-bottom:10px;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.faq .accordion-body{
    background:#fff;
    color:#333;
    font-size:15px;
    line-height:1.6;
}
/* =========================
   FOOTER
========================= */

.footer{
    background:#111;
    color:#fff;
    padding:18px 0;
    text-align:center;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:992px){

.hero h1{
    font-size:34px;
}

}

@media(max-width:768px){

.hero h1{
    font-size:26px;
}

.section-title{
    font-size:22px;
}

.number-grid span{
    width:50px;
    height:50px;
    font-size:14px;
}

}

@media(max-width:480px){

.hero{
    padding:35px 10px;
}

.hero h1{
    font-size:22px;
}

.btn{
    width:100%;
    margin-top:8px;
}

}