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

body{
font-family:Arial,sans-serif;
background:#112D51;
}

    /* ========== HEADER ========== */
    .site-header {
      width: 100%;
      background: #041735;
      position: relative;
      z-index: 999;
      border-bottom: 2px solid #ffc627;
    }

    .header-container {
      max-width: 1380px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .nav-wrap {
      min-height: 90px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      position: relative;
    }

    .logo {
      flex-shrink: 0;
      z-index: 1002;
    }

    .logo img {
      max-width: 210px;
      width: 100%;
      display: block;
    }

    .main-nav {
      flex: 1;
      display: flex;
      justify-content: center;
    }

    .nav-links {
      list-style: none;
      display: flex;
      align-items: center;
      gap: 34px;
    }

    .nav-links li {
      position: relative;
    }

    .nav-links li a {
      text-decoration: none;
      color: #dfe6f2;
      font-size: 16px;
      font-weight: 600;
      transition: 0.3s ease;
      display: inline-block;
      padding: 10px 0;
    }

    .nav-links li a:hover {
      color: #ffc627;
    }

    .dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 220px;
      background: #0b2b5d;
      border-radius: 12px;
      padding: 10px 0;
      list-style: none;
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px);
      transition: 0.3s ease;
      box-shadow: 0 12px 35px rgba(0,0,0,0.25);
       border: 2px solid #ffc627;
    }

    .dropdown-menu li a {
      display: block;
      padding: 12px 18px;
      font-size: 15px;
      color: #fff;
    }

    .dropdown-menu li a:hover {
      background: rgba(255, 198, 39, 0.12);
      color: #ffc627;
    }

    .dropdown:hover .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-shrink: 0;
    }

    .btn {
      text-decoration: none;
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      border-radius: 14px;
      transition: 0.3s ease;
      white-space: nowrap;
    }

    .btn-login {
      min-width: 110px;
      height: 54px;
      border: 2px solid #f2b514;
      color: #f2b514 !important;
      background: transparent;
      padding: 0 22px;
      font-size: 16px;
    }

    .btn-login:hover {
      background: #f2b514;
      color: #061f47 !important;
    }

    .btn-register {
      min-width: 170px;
      height: 54px;
      background: linear-gradient(180deg, #ffd34f 0%, #e3ac12 100%);
      color: #08234c !important;
      padding: 0 26px;
      font-size: 16px;
      box-shadow: 0 8px 22px rgba(242, 181, 20, 0.28);
    }

    .btn-register:hover {
      transform: translateY(-1px);
    }

    .menu-toggle {
      display: none;
      width: 44px;
      height: 44px;
      border: none;
      background: transparent;
      cursor: pointer;
      flex-direction: column;
      justify-content: center;
      gap: 6px;
      z-index: 1002;
    }

    .menu-toggle span {
      display: block;
      width: 28px;
      height: 3px;
      background: #fff;
      border-radius: 10px;
      margin: 0 auto;
    }

    .mobile-only {
      display: none;
    }

    .arrow {
      display: inline-block;
      margin-left: 6px;
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
      color: #fff;
      transition: 0.3s ease;
    }

    .dropdown:hover .arrow {
      color: #ffc627;
    }


       /* ========== RESPONSIVE ========== */
    @media (max-width: 991px) {
      .nav-wrap {
        min-height: 74px;
      }

      .logo img {
        max-width: 155px;
      }

      .menu-toggle {
        display: flex;
      }

      .header-actions {
        display: none;
      }

      .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #061f47;
        display: none;
        padding: 0 20px 20px;
        border-top: 1px solid rgba(255,255,255,0.08);
      }

      .main-nav.active {
        display: block;
      }

      .nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
      }

      .nav-links > li {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.08);
      }

      .nav-links > li:last-child {
        border-bottom: none;
      }

      .nav-links li a {
        display: block;
        width: 100%;
        padding: 16px 0;
        font-size: 16px;
      }

      .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        min-width: 100%;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0 0 10px 14px;
        border-radius: 0;
      }

      .dropdown-menu li a {
        padding: 10px 0;
        color: #dbe3f3;
        font-size: 15px;
      }

      .dropdown.open .dropdown-menu {
        display: block;
      }

      .drop-trigger {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
      }

      .arrow {
        font-size: 22px;
        line-height: 1;
        margin-left: 10px;
      }

      .mobile-only {
        display: block;
        border-bottom: none !important;
      }

      .mobile-only .btn {
        width: 100%;
        height: 52px;
        margin-top: 14px;
      }

      .mobile-only:last-child .btn {
        margin-bottom: 0;
      }
    }


    @media (max-width: 575px) {
      .header-container {
        padding: 0 15px;
      }
      .main-nav {
        padding: 0 15px 15px;
      }
      .logo img {
        max-width: 145px;
      }
      .menu-toggle {
        width: 40px;
        height: 40px;
      }
      .menu-toggle span {
        width: 24px;
      }
    }




.hero{
position:relative;
overflow:hidden;
background:linear-gradient(135deg,#112D51,#183b67);
padding:90px 20px;
}

.container{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:80px;
position:relative;
z-index:2;
}

.hero-content{
flex:1;
}

.hero-badge{
display:inline-block;
padding:10px 20px;
background:rgba(236,182,35,.15);
border:1px solid #ECB623;
border-radius:50px;
color:#ECB623;
font-weight:700;
margin-bottom:25px;
}

.hero h1{
font-size:42px;
line-height:1.2;
color:#fff;
margin-bottom:25px;
font-weight:700;
}

.hero p{
font-size:18px;
line-height:1.9;
color:#e8f0ff;
}

.hero-buttons{
display:flex;
gap:18px;
margin:35px 0;
flex-wrap:wrap;
}

.hero-buttons a{
text-decoration:none;
padding:15px 34px;
border-radius:50px;
font-weight:700;
transition:.35s;
}

.hero-buttons a:nth-child(1){
background:#ECB623;
color:#112D51;
}

.hero-buttons a:nth-child(2){
background:#22B6B6;
color:#fff;
}

.hero-buttons a:nth-child(3){
background-color: #FD5E53;
color:#fff;
}

.hero-buttons a:hover{
transform:translateY(-5px);
}

.hero-phone{
width:360px;
display:flex;
justify-content:center;
align-items:center;
perspective:1200px;
}

/* Phone */

.phone{

width:290px;
height:580px;
background:#111;
border:8px solid #2d2d2d;
border-radius:45px;
padding:10px;
position:relative;
box-shadow:0 40px 80px rgba(0,0,0,.45);

}

.phone:before{

content:"";
position:absolute;
top:12px;
left:50%;
transform:translateX(-50%);
width:120px;
height:20px;
background:#222;
border-radius:20px;
z-index:5;

}

.phone{
    animation: phoneFloat 3.5s ease-in-out infinite;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

@keyframes phoneFloat{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-12px);
    }
}

.camera{

position:absolute;
width:12px;
height:12px;
background:#000;
border:2px solid #555;
border-radius:50%;
top:16px;
left:35%;

}

.screen{

width:100%;
height:100%;
border-radius:36px;
overflow:hidden;
background:linear-gradient(180deg,#112D51,#0b203b);
padding:25px;

}

.status{

height:40px;
}

.screen{
height:100%;
padding:18px;
background:linear-gradient(180deg,#163b68,#0f2745);
display:flex;
flex-direction:column;
}

.status-bar{
display:flex;
justify-content:space-between;
color:#fff;
font-size:12px;
margin-top:12px;
margin-bottom:18px;
}

.logo-box{
text-align:center;
margin-bottom:18px;
}

.logo-circle{
width:60px;
height:60px;
margin:auto;
border-radius:50%;
background:linear-gradient(135deg,#ECB623,#22B6B6);
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
font-weight:bold;
color:#112D51;
}

.logo-box h3{
margin:10px 0 3px;
color:#fff;
font-size:22px;
}

.logo-box p{
margin:0;
color:#ddd;
font-size:13px;
}

.balance-card{
background:linear-gradient(135deg,#ECB623,#22B6B6);
border-radius:18px;
padding:18px;
margin-bottom:18px;
color:#112D51;
text-align:center;
box-shadow:0 10px 25px rgba(0,0,0,.3);
}

.balance-card h2{
margin:5px 0 0;
font-size:28px;
}

.game-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
margin-bottom:18px;
}

.game{
height:75px;
border-radius:15px;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
color:#fff;
}

.red{
background:#ff5757;
}

.green{
background:#22B6B6;
}

.violet{
background:#7b5cff;
}

.lottery{
background:#ECB623;
color:#112D51;
}

.play-btn{
display:block;
text-align:center;
background:#ECB623;
color:#112D51;
padding:14px;
border-radius:50px;
text-decoration:none;
font-weight:700;
margin-top:auto;
}

.nav-bar{
display:flex;
justify-content:space-around;
margin-top:18px;
padding:12px;
background:rgba(255,255,255,.08);
border-radius:16px;
color:#fff;
font-size:22px;
}

.banner{

height:120px;
border-radius:18px;
background:linear-gradient(135deg,#ECB623,#22B6B6);
margin-bottom:25px;
animation:glow 3s infinite;

}

.box{

height:60px;
background:rgba(255,255,255,.08);
border-radius:15px;
margin-bottom:18px;
position:relative;
overflow:hidden;

}

.box:before{

content:"";
position:absolute;
left:-100%;
top:0;
width:50%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
animation:shine 2.5s infinite;

}

.bottom-btns{

display:flex;
justify-content:center;
gap:18px;
margin-top:40px;

}

.bottom-btns span{

width:55px;
height:55px;
background:#ECB623;
border-radius:50%;
animation:pulse 2s infinite;

}

.bottom-btns span:nth-child(2){

background:#22B6B6;
animation-delay:.3s;

}

.bottom-btns span:nth-child(3){

animation-delay:.6s;

}

.hero-bg-circle{

position:absolute;
border-radius:50%;
filter:blur(100px);

}

.one{

width:350px;
height:350px;
background:#ECB623;
top:-120px;
left:-120px;
opacity:.18;

}

.two{

width:420px;
height:420px;
background:#22B6B6;
bottom:-180px;
right:-120px;
opacity:.18;

}

@keyframes float{

0%,100%{

transform:rotateY(-10deg) translateY(0);

}

50%{

transform:rotateY(10deg) translateY(-18px);

}

}

@keyframes glow{

0%,100%{

box-shadow:0 0 20px rgba(236,182,35,.4);

}

50%{

box-shadow:0 0 40px rgba(34,182,182,.8);

}

}

@keyframes shine{

100%{

left:150%;

}

}

@keyframes pulse{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.15);

}

}

@media(max-width:991px){

.container{

flex-direction:column;
text-align:center;

}

.hero h1{

font-size:38px;

}

.hero-buttons{

justify-content:center;

}

.hero-phone{

margin-top:40px;

}

}

@media(max-width:600px){

.hero{

padding:70px 15px;

}

.hero h1{

font-size:30px;

}

.hero p{

font-size:16px;

}

.hero-buttons a{

width:100%;
text-align:center;

}

.phone{

width:240px;
height:490px;

}

}

.gift-spec-section{
    background:#112D51;
    padding:40px 20px;
}

.gift-spec-section .table-container{
    max-width:1400px;
    margin:auto;
}

/* Cards */

.gift-box,
.specification-box{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    padding:35px;
    margin-bottom:35px;
}

.gift-box{
    border-top:4px solid #ECB623;
}

.specification-box{
    border-top:4px solid #22B6B6;
}

/* Heading */

.gift-box h2,
.specification-box strong{
    color:#fff;
    font-size:32px;
    margin:0 0 20px;
    line-height:1.3;
    text-align: center;
}

/* Paragraph */

.specification-box p{
    color:#dbe8ff;
    font-size:17px;
    line-height:1.9;
    margin:0 0 30px;
}

.specification-box p strong{
    color:#ECB623;
}

/* Gift Code */

.gift-code-box{
    background:linear-gradient(90deg,#22B6B6);
    border-radius:16px;
    padding:22px;
    text-align:center;
    overflow:auto;
}

.gift-code-box strong{
    color:#f6f6f7;
    font-size:20px;
    font-weight:800;
    letter-spacing:3px;
    white-space:nowrap;
}

/* Table */

.table-responsive{
    overflow-x:auto;
}

.spec-table{
    width:100%;
    border-collapse:collapse;
    min-width:700px;
}

.spec-table thead{
    background:linear-gradient(90deg,#ECB623);
}

.spec-table th{
    padding:18px;
    color:#112D51;
    text-align:left;
    font-size:18px;
    font-weight:700;
}

.spec-table td{
    padding:18px;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.08);
    font-size:17px;
}

.spec-table td:first-child{
    color:#ECB623;
    font-weight:700;
    width:35%;
}

.spec-table tbody tr:nth-child(even){
    background:rgba(255,255,255,.03);
}

.spec-table tbody tr:hover{
    background:rgba(34,182,182,.08);
    transition:.3s;
}

/* Mobile */

@media(max-width:768px){

.gift-spec-section{
    padding:60px 15px;
}

.gift-box,
.specification-box{
    padding:22px;
}

.gift-box h2,
.specification-box h2{
    font-size:28px;
}

.gift-code-box strong{
    font-size:20px;
    letter-spacing:1px;
}

.specification-box p{
    font-size:16px;
}

.spec-table{
    min-width:650px;
}

.spec-table th,
.spec-table td{
    padding:15px;
    font-size:15px;
}

}

/*=====================================
Jalwa About Section
=====================================*/

.jalwa-about-section{
    background:#112D51;
    padding:20px 20px;
}

.jalwa-about-section .main-wapper{
    max-width:1400px;
    margin:auto;
}

.content-box{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-top:4px solid #ECB623;
    border-radius:20px;
    padding:40px;
    box-shadow:0 15px 40px rgba(0,0,0,.18);
}

.content-box h2{
    color:#fff;
    font-size:32px;
    font-weight:700;
    line-height:1.3;
    margin:0 0 25px;
}

.content-box h3{
    color:#ECB623;
    font-size:30px;
    font-weight:700;
    margin:35px 0 20px;
    line-height:1.3;
}

.content-box p{
    color:#dbe8ff;
    font-size:17px;
    line-height:1.9;
    margin:0 0 20px;
}

.feature-list{
    margin:0;
    padding:0;
    list-style:none;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px 25px;
}

.feature-list li{
    position:relative;
    padding:16px 18px 16px 52px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    color:#fff;
    font-size:17px;
    line-height:1.6;
    transition:.3s;
}

.feature-list li::before{
    content:"✓";
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    width:22px;
    height:22px;
    border-radius:50%;
    background:#22B6B6;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:700;
}

.feature-list li:hover{
    border-color:#22B6B6;
    transform:translateY(-3px);
}

@media(max-width:768px){

.jalwa-about-section{
    padding:60px 15px;
}

.content-box{
    padding:25px;
}

.content-box h2{
    font-size:28px;
}

.content-box h3{
    font-size:24px;
}

.content-box p{
    font-size:16px;
}

.feature-list{
    grid-template-columns:1fr;
}

.feature-list li{
    font-size:16px;
}

}

/*=========================================
Reusable Content Section
=========================================*/

.content-section{
    padding:40px 20px;
    background:#112D51;
}

.content-section .content-container{
    max-width:1400px;
    margin:auto;
}

.content-card{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-top:4px solid #ECB623;
    border-radius:20px;
    padding:40px;
    box-shadow:0 15px 40px rgba(0,0,0,.18);
}

.content-card h2{
    color:#fff;
    font-size:32px;
    line-height:1.3;
    margin:0 0 22px;
    font-weight:700;
}

.content-card h3{
    color:#ECB623;
    font-size:28px;
    line-height:1.4;
    margin:35px 0 18px;
    font-weight:700;
}

.content-card p{
    color:#dbe8ff;
    font-size:17px;
    line-height:1.9;
    margin:0 0 20px;
}

.content-btn-box{
    margin:30px 0 35px;
    text-align:center;
}

.content-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    background:#f3b714;
    color:#0b1a30;
    font-size:17px;
    font-weight:700;
    padding:14px 34px;
    border-radius:50px;
    transition:.3s;
}

.content-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(34,182,182,.25);
}

.content-list{
    margin:0;
    padding:0;
    list-style:none;
}

.content-list li{
    position:relative;
    margin-bottom:16px;
    padding:16px 18px 16px 55px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    color:#fff;
    font-size:17px;
    line-height:1.8;
    transition:.3s;
}

.content-list li::before{
    content:"✓";
    position:absolute;
    left:18px;
    top:18px;
    width:24px;
    height:24px;
    border-radius:50%;
    background:#22B6B6;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:700;
}

.content-list li:hover{
    border-color:#22B6B6;
    transform:translateX(5px);
}

@media(max-width:768px){

.content-section{
    padding:60px 15px;
}

.content-card{
    padding:25px;
}

.content-card h2{
    font-size:28px;
}

.content-card h3{
    font-size:24px;
}

.content-card p,
.content-list li{
    font-size:16px;
}

.content-btn{
    width:100%;
}

}

/*==========================
Premium Gaming Steps
==========================*/

.step-list{
    margin:35px 0;
    padding:0;
    list-style:none;
    counter-reset:step;
}

.step-list li{
    counter-increment:step;
    position:relative;
    margin-bottom:35px;
    padding:25px 25px 25px 95px;
    background:linear-gradient(135deg,#163b69,#17365f);
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    color:#fff;
    font-size:17px;
    line-height:1.9;
    overflow:hidden;
    transition:.35s;
}

.step-list li::before{
    content:counter(step);
    position:absolute;
    left:25px;
    top:25px;
    width:30px;
    height:30px;
    border-radius:50%;
    background:linear-gradient(135deg,#ECB623,#FFD84A);
    color:#112D51;
    font-size:16px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 0 20px rgba(236,182,35,.45);
}

.step-list li::after{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:5px;
    height:100%;
    background:linear-gradient(#ECB623,#22B6B6);
}

.step-list li:hover{
    transform:translateY(-6px);
    border-color:#22B6B6;
    box-shadow:0 20px 45px rgba(0,0,0,.30);
}

/* Image */

.step-img{
    margin-top:22px;
}

.step-img img{
    display:block;
    width:100%;
    max-width:430px;
    border-radius:16px;
    border:3px solid rgba(255,255,255,.08);
    box-shadow:0 15px 35px rgba(0,0,0,.25);
    transition:.35s;
}

.step-img img:hover{
    transform:scale(1.03);
    border-color:#ECB623;
    box-shadow:0 0 30px rgba(236,182,35,.35);
}

/* Mobile */

@media(max-width:768px){

.step-list li{
    padding:80px 18px 18px;
    font-size:16px;
}

.step-list li::before{
    left:18px;
    top:18px;
    width:44px;
    height:44px;
    font-size:18px;
}

.step-img img{
    max-width:100%;
}

}

/*=========================================
Game Types Section
=========================================*/

.game-section{
    padding:40px 20px;
    background:#112D51;
}

.game-container{
    max-width:1400px;
    margin:auto;
}

.game-card{
    position:relative;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    padding:45px;
    overflow:hidden;
}

.game-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#ECB623,#22B6B6,#ECB623);
}

.game-card h2{
    margin:0 0 20px;
    font-size:32px;
    line-height:1.3;
    color:#fff;
    font-weight:700;
}

.game-card>.game-intro{
    margin:0 0 40px;
    font-size:17px;
    line-height:1.9;
    color:#dbe8ff;
}

/*=========================================
Game Box
=========================================*/

.game-box{
    display:flex;
    align-items:flex-start;
    gap:24px;
    position:relative;
    margin-bottom:28px;
    padding:28px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    transition:.35s ease;
    overflow:hidden;
}

.game-box:last-child{
    margin-bottom:0;
}

.game-box::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:6px;
    height:100%;
    background:linear-gradient(#ECB623,#22B6B6);
}

.game-box:hover{
    transform:translateY(-8px);
    border-color:#22B6B6;
    background:rgba(255,255,255,.06);
    box-shadow:0 20px 45px rgba(0,0,0,.28);
}

/*=========================================
Icon
=========================================*/

.game-icon{
    width:72px;
    height:72px;
    min-width:72px;
    border-radius:18px;
    background:linear-gradient(135deg,#ECB623,#22B6B6);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    color:#112D51;
    font-weight:700;
    box-shadow:0 12px 25px rgba(34,182,182,.25);
}

/*=========================================
Content
=========================================*/

.game-content{
    flex:1;
}

.game-content h3{
    margin:0 0 15px;
    font-size:28px;
    color:#ECB623;
    line-height:1.4;
    font-weight:700;
}

.game-content p{
    margin:0;
    color:#eef6ff;
    font-size:17px;
    line-height:1.9;
}

/*=========================================
Hover Effect
=========================================*/

.game-box:hover .game-icon{
    transform:rotate(-8deg) scale(1.08);
    transition:.35s;
}

.game-box:hover .game-content h3{
    color:#22B6B6;
}

/*=========================================
Responsive
=========================================*/

@media(max-width:991px){

.game-card{
    padding:35px;
}

.game-card h2{
    font-size:28px;
}

.game-content h3{
    font-size:24px;
}

}

@media(max-width:768px){

.game-section{
    padding:60px 15px;
}

.game-card{
    padding:24px;
    border-radius:18px;
}

.game-card h2{
    font-size:26px;
}

.game-card>.game-intro{
    font-size:16px;
    margin-bottom:30px;
}

.game-box{
    flex-direction:column;
    gap:18px;
    padding:22px;
}

.game-icon{
    width:60px;
    height:60px;
    min-width:60px;
    font-size:28px;
    border-radius:15px;
}

.game-content h3{
    font-size:22px;
}

.game-content p{
    font-size:16px;
}

}

/*==========================
Bonus Section
==========================*/

.bonus-section{
    padding:40px 20px;
    background:#112D51;
}

.bonus-container{
    max-width:1400px;
    margin:auto;
}

.bonus-card{
    padding:45px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
}

.bonus-card h2{
    margin:0 0 35px;
    color:#fff;
    font-size:32px;
    line-height:1.3;
    text-align:center;
}

.bonus-list{
    margin:0;
    padding:0;
    list-style:none;
}

.bonus-list li{
    position:relative;
    margin-bottom:20px;
    padding:22px 22px 22px 70px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    color:#eef6ff;
    font-size:17px;
    line-height:1.9;
    transition:.3s;
}

.bonus-list li:last-child{
    margin-bottom:0;
}

.bonus-list li::before{
    content:"🎁";
    position:absolute;
    left:22px;
    top:22px;
    width:34px;
    height:34px;
    border-radius:50%;
    background:#ECB623;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}

.bonus-list li:hover{
    transform:translateX(8px);
    border-color:#22B6B6;
    box-shadow:0 15px 35px rgba(0,0,0,.25);
}

.bonus-list strong{
    color:#ECB623;
    font-size:18px;
}

.bonus-card p{
    color:#dbe8ff;
    font-size:17px;
    line-height:1.9;
    margin:0 0 20px;
}

@media(max-width:768px){

.bonus-section{
    padding:60px 15px;
}

.bonus-card{
    padding:25px;
}

.bonus-card h2{
    font-size:28px;
    margin-bottom:25px;
}

.bonus-list li{
    padding:18px 18px 18px 60px;
    font-size:16px;
}

.bonus-list li::before{
    left:18px;
    top:18px;
    width:30px;
    height:30px;
    font-size:16px;
}

.bonus-list strong{
    font-size:17px;
}

}

/*===================================
Responsible Gaming
===================================*/

.safe-play-section{
    padding:40px 20px;
    background:#112D51;
}

.safe-play-container{
    max-width:1400px;
    margin:auto;
}

.safe-play-card{
    position:relative;
    padding:45px;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    overflow:hidden;
}

.safe-play-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#22B6B6,#ECB623,#22B6B6);
}

.safe-play-card h2{
    margin:0 0 35px;
    color:#fff;
    font-size:32px;
    line-height:1.3;
    text-align:center;
}

.safe-play-card p{
    color:#dbe8ff;
    font-size:17px;
    line-height:1.9;
    margin:0 0 20px;
}

/* List */

.safe-play-list{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
}

.safe-play-list li{
    position:relative;
    padding:22px 22px 22px 72px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    color:#fff;
    font-size:17px;
    line-height:1.8;
    transition:.35s;
    overflow:hidden;
}

.safe-play-list li::before{
    content:"✓";
    position:absolute;
    left:20px;
    top:50%;
    transform:translateY(-50%);
    width:36px;
    height:36px;
    border-radius:50%;
    background:linear-gradient(135deg,#ECB623,#22B6B6);
    color:#112D51;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:700;
}

.safe-play-list li::after{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:5px;
    height:100%;
    background:#ECB623;
    transition:.35s;
}

.safe-play-list li:hover{
    transform:translateY(-8px);
    border-color:#22B6B6;
    box-shadow:0 18px 40px rgba(0,0,0,.28);
    background:rgba(255,255,255,.06);
}

.safe-play-list li:hover::after{
    background:#22B6B6;
}

/* Responsive */

@media(max-width:768px){

.safe-play-section{
    padding:60px 15px;
}

.safe-play-card{
    padding:25px;
}

.safe-play-card h2{
    font-size:28px;
    margin-bottom:25px;
}

.safe-play-list{
    grid-template-columns:1fr;
    gap:18px;
}

.safe-play-list li{
    padding:18px 18px 18px 62px;
    font-size:16px;
}

.safe-play-list li::before{
    width:32px;
    height:32px;
    left:16px;
    font-size:18px;
}

}

/*====================================
Conclusion Section
====================================*/

.conclusion-section{
    padding:40px 20px;
    background:#112D51;
}

.conclusion-container{
    max-width:1400px;
    margin:auto;
}

.conclusion-card{
    position:relative;
    padding:45px;
    border-radius:24px;
    background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.08);
    overflow:hidden;
}

.conclusion-card::before{
    content:"";
    position:absolute;
    inset:0;
    padding:2px;
    border-radius:24px;
    background:linear-gradient(90deg,#ECB623,#22B6B6,#ECB623);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    pointer-events:none;
}

.conclusion-card h2{
    margin:0 0 25px;
    color:#fff;
    font-size:32px;
    line-height:1.3;
    text-align:center;
}

.conclusion-card p{
    position:relative;
    margin:0 0 22px;
    padding-left:28px;
    color:#eef6ff;
    font-size:17px;
    line-height:1.9;
}

.conclusion-card p:last-child{
    margin-bottom:0;
}

.conclusion-card p::before{
    content:"";
    position:absolute;
    left:0;
    top:12px;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#ECB623;
    box-shadow:0 0 15px #ECB623;
}

@media(max-width:768px){

.conclusion-section{
    padding:60px 15px;
}

.conclusion-card{
    padding:25px;
    border-radius:18px;
}

.conclusion-card h2{
    font-size:28px;
}

.conclusion-card p{
    font-size:16px;
    line-height:1.8;
    padding-left:22px;
}

.conclusion-card p::before{
    width:8px;
    height:8px;
    top:10px;
}

}

/*==================================
FAQ Section
==================================*/

.faq-section{
    padding:40px 20px;
    background:#112D51;
}

.faq-container{
    max-width:1300px;
    margin:auto;
}

.faq-card{
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    padding:45px;
}

.faq-card h2{
    margin:0 0 40px;
    text-align:center;
    color:#fff;
    font-size:32px;
    line-height:1.3;
}

.faq-item{
    margin-bottom:20px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    overflow:hidden;
    background:rgba(255,255,255,.03);
    transition:.35s;
}

.faq-item:last-child{
    margin-bottom:0;
}

.faq-item:hover{
    border-color:#22B6B6;
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(0,0,0,.22);
}

.faq-item h3{
    margin:0;
    padding:22px 70px 22px 24px;
    font-size:21px;
    line-height:1.6;
    color:#91f5f0;
    cursor:pointer;
    position:relative;
    transition:.3s;
}

.faq-item h3::before{
    content:"Q";
    position:absolute;
    left:20px;
    top:50%;
    transform:translateY(-50%);
    width:36px;
    height:36px;
    border-radius:50%;
    background:#ECB623;
    color:#112D51;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}

.faq-item h3{
    padding-left:70px;
}

.faq-item h3::after{
    content:"+";
    position:absolute;
    right:24px;
    top:50%;
    transform:translateY(-50%);
    color:#ECB623;
    font-size:30px;
    font-weight:700;
    transition:.3s;
}

.faq-item.active h3::after{
    content:"−";
}

.faq-content{
    display:none;
    padding:0 24px 24px 70px;
}

.faq-item.active .faq-content{
    display:block;
}

.faq-content p{
    margin:0;
    color:#e7eefc;
    font-size:17px;
    line-height:1.9;
}

.faq-item.active{
    border-color:#ECB623;
    background:rgba(255,255,255,.05);
}

@media(max-width:768px){

.faq-section{
    padding:60px 15px;
}

.faq-card{
    padding:25px;
}

.faq-card h2{
    font-size:28px;
    margin-bottom:25px;
}

.faq-item h3{
    font-size:18px;
    padding:18px 55px 18px 60px;
}

.faq-item h3::before{
    width:30px;
    height:30px;
    left:16px;
}

.faq-item h3::after{
    right:18px;
}

.faq-content{
    padding:0 18px 18px 18px;
}

.faq-content p{
    font-size:16px;
}

}

/*=====================================
EPS Pages
=====================================*/

.eps-section{
    padding:80px 20px;
    background:#112D51;
}

.eps-section .eps-container{
    max-width:1380px;
    margin:auto;
}

.eps-card{
    position:relative;
    padding:55px;
    border-radius:26px;
    background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 25px 60px rgba(0,0,0,.28);
    overflow:hidden;
}

.eps-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#ECB623,#22B6B6,#ECB623);
}

/* H1 */

.eps-card h1{
    margin:0 0 35px;
    text-align:center;
    color:#fff;
    font-size:48px;
    line-height:1.3;
    font-weight:700;
}

/* H2 */

.eps-card h2{
    position:relative;
    margin:45px 0 22px;
    padding-left:20px;
    color:#fff;
    font-size:30px;
    line-height:1.4;
    font-weight:700;
}

.eps-card h2::before{
    content:"";
    position:absolute;
    left:0;
    top:5px;
    width:6px;
    height:38px;
    border-radius:20px;
    background:#ECB623;
}

.eps-card h2::after{
    content:"";
    position:absolute;
    left:20px;
    bottom:-8px;
    width:70px;
    height:3px;
    border-radius:10px;
    background:#22B6B6;
}

/* H3 */

.eps-card h3{
    margin:30px 0 12px;
    color:#ECB623;
    font-size:24px;
    line-height:1.4;
    font-weight:700;
}

/* Paragraph */

.eps-card p{
    margin:0 0 18px;
    color:#e8f2ff;
    font-size:17px;
    line-height:1.95;
}

/* Strong */

.eps-card strong{
    color:#22B6B6;
    font-weight:700;
}

/* Links */

.eps-card a{
    color:#22B6B6;
    text-decoration:none;
    transition:.3s;
}

.eps-card a:hover{
    color:#ECB623;
}

/* Last */

.eps-card p:last-child{
    margin-bottom:0;
}

/* Mobile */

@media(max-width:768px){

.eps-section{
    padding:60px 15px;
}

.eps-card{
    padding:28px 22px;
    border-radius:18px;
}

.eps-card h1{
    font-size:32px;
    margin-bottom:22px;
}

.eps-card h2{
    font-size:25px;
    margin:35px 0 18px;
}

.eps-card h2::before{
    height:30px;
}

.eps-card h3{
    font-size:20px;
}

.eps-card p{
    font-size:16px;
    line-height:1.9;
}

}

.contact-box{
    display:flex;
    align-items:center;
    gap:20px;
    margin-top:35px;
    padding:25px 30px;
    background:linear-gradient(135deg,rgba(236,182,35,.12),rgba(34,182,182,.10));
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    transition:.35s;
}

.contact-box:hover{
    transform:translateY(-5px);
    border-color:#22B6B6;
    box-shadow:0 18px 40px rgba(0,0,0,.25);
}

.contact-icon{
    width:70px;
    height:70px;
    min-width:70px;
    border-radius:50%;
    background:linear-gradient(135deg,#ECB623,#22B6B6);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    color:#112D51;
}

.contact-info h2{
    margin:0 0 8px;
    padding:0;
    color:#fff;
    font-size:26px;
}

.contact-info h2::before,
.contact-info h2::after{
    display:none;
}

.contact-info a{
    color:#ECB623;
    font-size:19px;
    font-weight:600;
    text-decoration:none;
    word-break:break-word;
    transition:.3s;
}

.contact-info a:hover{
    color:#22B6B6;
}

@media(max-width:768px){

.contact-box{
    padding:20px;
    gap:15px;
}

.contact-icon{
    width:55px;
    height:55px;
    min-width:55px;
    font-size:22px;
}

.contact-info h2{
    font-size:22px;
}

.contact-info a{
    font-size:16px;
}

}

.apk-hero{
    background:#112D51;
    padding:90px 20px;
}

.apk-hero .apk-container{
    max-width:1300px;
    margin:auto;
}

.apk-hero-wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:70px;
}

.apk-hero-content{
    flex:1;
}

.apk-label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    border-radius:50px;
    background:rgba(236,182,35,.12);
    color:#ECB623;
    border:1px solid rgba(236,182,35,.3);
    font-size:15px;
    font-weight:600;
    margin-bottom:18px;
}

.apk-hero h1{
    color:#fff;
    font-size:42px;
    line-height:1.25;
    margin-bottom:20px;
}

.apk-hero p{
    color:#d8e8ff;
    line-height:1.9;
    font-size:17px;
}

.hero-btn-box{
    margin:30px 0;
}

.hero-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 35px;
    border-radius:50px;
    text-decoration:none;
    background:#ECB623;
    color:#112D51;
    font-weight:700;
    transition:.3s;
}

.hero-btn:hover{
    background:#22B6B6;
    color:#fff;
}

.apk-info{
    width:360px;
}

.apk-box{
    padding:35px;
    border-radius:22px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    text-align:center;
}

.apk-icon{
    width:80px;
    height:80px;
    margin:0 auto 20px;
    border-radius:50%;
    background:linear-gradient(135deg,#ECB623,#22B6B6);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#112D51;
    font-size:32px;
}

.apk-box h3{
    color:#fff;
    margin-bottom:20px;
    font-size:28px;
}

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

.apk-box li{
    color:#e8f2ff;
    padding:12px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.apk-box li:last-child{
    border:none;
}

.apk-box li i{
    color:#22B6B6;
    margin-right:8px;
}

.apk-btn{
    display:block;
    margin-top:28px;
    padding:15px;
    border-radius:50px;
    background:#22B6B6;
    color:#fff;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}

.apk-btn:hover{
    background:#ECB623;
    color:#112D51;
}

@media(max-width:991px){

.apk-hero-wrap{
    flex-direction:column;
}

.apk-info{
    width:100%;
}

.apk-box{
    max-width:420px;
    margin:auto;
}

}

@media(max-width:768px){

.apk-hero{
    padding:60px 15px;
}

.apk-hero h1{
    font-size:32px;
}

.apk-box{
    padding:25px;
}

}

.content-card h4{
    margin:22px 0 16px;
    padding-left:18px;
    font-size:22px;
    font-weight:700;
    line-height:1.4;
    color:#ECB623;
    border-left:4px solid #22B6B6;
    position:relative;
    letter-spacing:.3px;
}

.content-card h4::before{
    content:"";
    position:absolute;
    left:-7px;
    top:50%;
    transform:translateY(-50%);
    width:10px;
    height:10px;
    background:#22B6B6;
    border-radius:50%;
}

.center-img {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 25px 0;
}

.center-img img {
    width: 300px;
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .center-img img {
        width: 100%;
        max-width: 300px;
    }
}

 /* ===== FOOTER ===== */
.footer {
  background: #061a33;
  padding: 2.5rem 2rem 1.5rem;
  border-top: 2px solid #f5c542;
}

.footer-container {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

/* ===== FOOTER LINKS ===== */
.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.5rem;
}

.footer-links a {
  color: #b0cce3;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #f5c542;
}

/* Separator */
.footer-links .sep {
  color: #4a6a8a;
  font-weight: 300;
}

/* ===== DIVIDER ===== */
.footer-divider {
  max-width: 600px;
  margin: 0 auto 1.2rem;
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(245, 197, 66, 0.2),
    transparent
  );
}

/* ===== BOTTOM TEXT ===== */
.footer-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.footer-bottom p {
  color: #7a95b0;
  font-size: 0.9rem;
  margin: 0;
}

.footer-bottom .brand-name {
  color: #ffd966;
  font-weight: 600;
}

/* ===== MOBILE ===== */
@media (max-width: 600px) {
  .footer {
    padding: 2rem 1rem 1.2rem;
  }

  .footer-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    width: fit-content;
    margin: 0 auto 1.5rem;
  }

  .footer-links .sep {
    display: none;
  }

  .footer-links a {
    font-size: 0.9rem;
    display: flex;
    align-items: center;
  }

  .footer-links a::before {
    content: "•";
    color: #f5c542;
    margin-right: 8px;
    font-size: 1rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 0.6rem;
    text-align: center;
  }
}

.author-box{
    display:flex;
    align-items:flex-start;
    gap:35px;
    background:#0C0A3E;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:30px;
}

.author-img{
    flex:0 0 300px;
}

.author-img img{
    width: 350px;
    height: 500px;
    display:block;
    border-radius:16px;
    border:4px solid #ECB623;
    box-shadow:0 15px 35px rgba(0,0,0,.35);
}

.author-content{
    flex:1;
}

.author-content h1{
    margin:0 0 20px;
    color:#fff;
    font-size:34px;
    line-height:1.3;
}

.author-content p{
    margin:0 0 18px;
    color:#d9defc;
    font-size:17px;
    line-height:1.9;
}

@media(max-width:991px){

.author-box{
    flex-direction:column;
    text-align:center;
    padding:25px;
}

.author-img{
    flex:none;
    max-width:220px;
    margin:auto;
}

.author-content h1{
    font-size:28px;
}

}

@media(max-width:576px){

.author-box{
    padding:20px;
}

.author-img{
    max-width:180px;
}

.author-content h1{
    font-size:24px;
}

.author-content p{
    font-size:16px;
}

}