:root{
        --accent: #10a6c7; /* turquoise */
        --bg: #fff7ea;     /* warm cream */
        --card-bg: #fff;
        --muted: #6b6b6b;
      }
      body{
        font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
        background: var(--bg);
        color:#222;
      }
      
      .swiper-pagination-bullet-active {
          background: #ffffff;
        }
        
        /* Inactive bullets */
        .swiper-pagination-bullet {
          background: #ffffff;
        }

      /* Header */
      
        .site-header {
            position: sticky;
            top:0px;
            z-index: 99999;
            width: 100%;
            /*height: 66px;*/
            background:#161b26
        }
        
      
      .brand-logo{height:44px}
      .top-cta .btn{border-radius:30px}

      /* Hero */
      .hero{
        position:relative;
        overflow:hidden;
        border-bottom:6px solid rgba(16,166,199,0.15);
      }
      .hero img{width:100%;height:420px;object-fit:cover;display:block}
      @media(min-width:1200px){.hero img{height:460px}}
      @media(max-width:576px){.hero img{height:260px}}

      /* Section titles */
      .section-title {
            text-align: center;
            font-size: 26px;
            font-weight: 600;
            margin-bottom: 20px;
        }
      .section-sub{font-size:0.95rem;text-align:center;margin-bottom:16px}

      /* Popular row: two large cards */
      .popular-card img{width:100%;height:260px;object-fit:cover;border-radius:6px;box-shadow: 0px 5px 4px 1px lightblue;}
      @media(max-width:576px){.popular-card img{height:180px}}

      /* Game card grid */
      .game-card{
        /*background:var(--card-bg);border-radius:6px;padding:0;overflow:hidden;*/
        /* box-shadow:0 6px 18px rgba(0,0,0,0.06) */
        /*box-shadow: 0px 4px 4px 0px #f8f9fa;*/
      }
      .game-card .thumb{height:240px;object-fit:cover;display:block;width: 100%;}
      @media(min-width:1200px){.game-card .thumb{height:360px}} 
      @media(min-width:1200px){.game-card .thumb{width:260px}}/*custom width*/
      .game-card .card-body{padding:10px;text-align:center}
      .buy-btn{background:#4B475E;border:0;color:#fff;padding:8px 22px;font-weight:600;width:100%;}

      /* Promo banner */
      .promo{margin:44px 0}
      .promo img{width:100%;height:220px;object-fit:cover;border-radius:6px}
      @media(min-width:1200px){.promo img{height:320px}}

      /* Thumbnails strip */
      .thumb-strip{display:flex;gap:12px;overflow-x:auto;padding:12px 0}
      .thumb-strip img{width:120px;height:76px;object-fit:cover;border-radius:4px}

      /* Footer */
      footer{border-top:2px solid rgba(16,166,199,0.12);padding:22px 0;margin-top:36px;text-align:center;background: #161b26;color:#fff;}

      /* Small helpers */
      .all-game-link{font-weight:600;color:var(--muted);float:right;margin-top:-36px}
      /*.site-header{*/
      /*  background: #161b26;*/
      /*  padding: 5px;*/
      /*}*/
      
      
      @keyframes scrollMarquee{
      0%{transform:translateX(0)}
      100%{transform:translateX(-50%)}
    }
    
    .thumb-marquee {
    animation: none;
    }
   

    .payment-box
    {
        background: white;
        border-radius: 30px;
        padding: 25px;
        margin-bottom: 30px;
        margin-top: 25px;
        border: 2px solid #13AED2;
    } 
    
     .btn-confirm {
      background: #090909;
      color: white;
      font-weight: 600;
      border-radius: 10px;
      width: 100%;
      padding: 10px;
    }
    .btn-close {
      background: #090909;
      color: #fff;
      font-weight: 600;
      border-radius: 10px;
      width: 100%;
      padding: 10px;
    }

    .section-box {
        background: white;
        border-radius: 30px;
        padding: 25px;
        margin: 20px 0;
        border: 1px solid #13AED2;
    }

    .voucher-card {
        border: 2px solid #13AED2;
        border-radius: 20px;
        padding: 15px;
        text-align: center;
        transition: 0.3s;
    }

    .voucher-card:hover {
      background-color: #fff5eb;
      transform: scale(1.05);
    }
    .voucher-card img {
      width: 60px;
      margin-bottom: 10px;
    }

    .continue-btn {
        background-color: #161B26;
        color: white;
        font-weight: bold;
        border: none;
        border-radius: 8px;
        padding: 12px 0;
        width: 100%;
        margin-top: 30px;
        font-size: 20px;
        transition: 0.3s;
    }


      :root{
        --accent: #10a6c7;
        --bg: #fff7ea;
        --card-bg: #fff;
        --muted: #6b6b6b;
      }
      body{
        font-family: 'Montserrat', sans-serif;
        background: #161b26;
        color:#222;
      }

      .thumb-marquee-container{
        overflow:hidden;
        cursor:grab;
        user-select:none;
      }
      .thumb-marquee{
        display:flex;
        gap:12px;
        animation: scrollMarquee 25s linear infinite;
      }
      .thumb-marquee img{
        width:120px;height:76px;object-fit:cover;border-radius:4px;
      }
      .thumb-marquee.pause-animation{animation-play-state: paused;}
      @keyframes scrollMarquee{
        0%{transform:translateX(0)}
        100%{transform:translateX(-50%)}
      }
      
      
    
         /* old code working*/
        .heroSwiper {
          width: 100%;
          /*height: 457px;*/
        }
        
        .heroSwiper img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        
        @media (max-width: 768px) {
          .heroSwiper {
            height: auto;
          }
        
          .heroSwiper img {
            height: auto;
            object-fit: contain;
          }
        }
        
        /*end old*/
        
 


/* Card Styling */
.custom-card {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.custom-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hero Text Overlay */
.hero-content {
    position: absolute;
    bottom: 40px;
    left: 40px;
    color: white;
}

.hero-title {
    font-size: 2rem;
    font-weight: 700;
}

.hero-title span {
    color: #fff;
}

.hero-btn {
    background: white;
    color: black;
    border-radius: 30px;
    padding: 10px 20px;
    font-weight: 600;
    border: none;
}

/* Small cards height */
.small-card {
    height: 250px;
}

/* Hero height */
.hero-card {
    height: 520px;
}

/* Image overlay gradient (professional touch) */
.overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}

/* Hover effect */
.custom-card:hover {
    transform: scale(1.02);
    transition: 0.3s ease;
}

.header-menu a{
    color:#fff;
    text-decoration:none;
}


.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.slider-controls {
    display: flex;
    gap: 10px;
}

.slider-btn {
    background: #1c2541;
    border: none;
    color: #fff;
    width: 35px;
    height: 35px;
    border-radius: 6px;
    font-size: 18px;
    cursor: pointer;
}

.slider-btn:hover {
    background: #3a506b;
}

.slider-wrapper {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    scroll-behavior: smooth;
    padding: 10px 0;
}

/* Hide scrollbar */
.slider-wrapper::-webkit-scrollbar {
    display: none;
}

.game-card {
    min-width: 195px;
    
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    transition: 0.3s;
}

.game-card:hover {
    transform: scale(1.05);
}

.game-card img {
    width: 100%;
    height: 270px;
    object-fit: cover;
}

.game-title {
    padding: 8px;
    text-align: center;
    font-weight: 600;
}


/*auto scroll*/


.auto-scroll {
    flex-wrap: nowrap !important;
    overflow-x: auto;              /* allow horizontal scroll */
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
}

.auto-scroll:active {
    cursor: grabbing;
}

/* Hide scrollbar (works in Firefox too) */
.auto-scroll {
    scrollbar-width: none;
}
.auto-scroll::-webkit-scrollbar {
    display: none;
}

.auto-scroll .col-6 {
    flex: 0 0 auto;
 /* card width */
}


.auto-scroll-wrapper {
    overflow: hidden;
    position: relative;
}

.auto-scroll {
    display: flex;
    flex-wrap: nowrap !important;
    gap: 10px;
    will-change: transform;
}


.custom-card {
    border-radius: 12px;
    overflow: hidden;
}

.custom-card img {
    object-fit: cover;
    height: 100%;
}

/* Left big image */
.hero-card {
    height: 100%;
}

/* Right small images */
.small-card {
    height: 100%;
}

/* Mobile optimization */
@media (max-width: 991px) {
    .hero-card {
        height: auto;
    }
}


/*success page */

/* Orange top header bar */
    .topbar{
      background: var(--accent);
      color: #fff;
      padding: 16px 0;
      text-align: center;
      font-weight:700;
      letter-spacing:0.6px;
    }

    .topbar h1{
      margin:0;
      font-size: clamp(20px, 3vw, 34px);
    }

    /* Main panel */
    .confirmation-wrap{
      max-width: var(--max-width);
      margin: 48px auto;
      padding: 36px 24px 64px;
      text-align: center;
    }

    /* Concentric rings + check */
    .ring-wrap{
      display:inline-grid;
      place-items:center;
      margin: 26px 0 18px;
      width: clamp(150px, 26vw, 260px);
      height: clamp(150px, 26vw, 260px);
      position: relative;
    }

    .ring {
      position:absolute;
      inset:0;
      border-radius:50%;
      display:block;
      /* create rings with radial-gradient for smooth color steps */
      background:
        radial-gradient(circle at center, rgba(255,106,0,1) 0 22%,
                       rgb(19, 174, 210) 22% 34%,
                       rgba(255,106,0,0.45) 34% 46%,
                       rgba(255,106,0,0.22) 46% 58%,
                       rgba(255,106,0,0.08) 58% 70%,
                       rgba(255,255,255,0) 70% 100%);
      box-shadow: none;
      transform: scale(1);
    }

    /* solid center circle for the check */
    .center-circle{
      width: 44%;
      height: 44%;
      border-radius:50%;
      background: #4B475E;
      display:flex;
      align-items:center;
      justify-content:center;
      z-index:5;
      box-shadow: 0 8px 18px rgba(255,106,0,0.12);
    }

    /* check mark */
    .check-svg{
      width: 44%;
      height: 44%;
      fill: none;
      stroke: #fff;
      stroke-width: 6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    
    /* footer spacing for small screens */
    @media (max-width:480px){
      .confirmation-wrap{ margin: 24px 12px 48px; padding-bottom:48px; }
      .ring-wrap{ margin-top: 8px; margin-bottom: 12px; }
      .btn-continue{ padding: 14px 18px; width: 100%; }
    }

    /* message */
    .confirm-text{
      color: #fff;
      font-weight:600;
      margin-top: 12px;
      margin-bottom: 6px;
      font-size: clamp(14px, 1.6vw, 18px);
    }
    .confirm-sub{
      color: #fff;
      margin-bottom: 26px;
      opacity: .95;
      font-size: clamp(13px, 1.3vw, 16px);
      font-weight:500;
    }


/*end success*/