/* =============================================
   CASINO LUCKY HUB - Main Stylesheet
   Fully Responsive with CSS Custom Properties
   ============================================= */

/* ── CSS Custom Properties (Root Variables) ── */
:root {
  /* Colors */
  --clr-bg:           #070707;
  --clr-bg-section:   #0a0a0a;
  --clr-gold:         #c9a227;
  --clr-gold-light:   #fff374;
  --clr-gold-dark:    #dbba00;
  --clr-orange-start: #d94801;
  --clr-orange-mid:   #ffb577;
  --clr-orange-end:   #f16913;
  --clr-green-light:  #50a347;
  --clr-green-dark:   #2d5f2e;
  --clr-white:        #ffffff;
  --clr-text-muted:   #aaaaaa;

  /* Gradients */
  --grad-gold:     linear-gradient(180deg, #fff374 0%, #dbba00 100%);
  --grad-orange:   linear-gradient(270deg, #d94801 0%, #ffb577 50.14%, #f16913 100%);
  --grad-green:    linear-gradient(135deg, #2ecc71, #27ae60);
  --grad-btn-gold: linear-gradient(180deg, #fbe67b 4.9%, #d7a600 41.02%, #e3b60d 66.62%, #fbe67b 100%);
  --grad-inner:    linear-gradient(180deg, #50a347 0%, #2d5f2e 100%);
  --grad-footer:   linear-gradient(180deg, #1b2431 0%, #000000 100%);

  /* Fluid Typography — clamp(min, preferred, max) */
  /* Preferred uses viewport width (vw) so text scales smoothly between breakpoints */

  /* Display / Hero */
  --fs-hero:        clamp(2rem,   8vw,   6.8rem);   /* h1: 40px → 109px */
  --fs-h2:          clamp(1.2rem,   3.5vw, 3.125rem); /* h2: 26px → 50px  */
  --fs-hero-sub:    clamp(1rem,     2.5vw, 2.375rem); /* 16px → 38px      */

  /* Section / UI */
  --fs-tab:         clamp(1rem,     2vw,   1.875rem); /* nav tab: 16px → 30px */
  --fs-game-label:  clamp(1rem,     1.8vw, 1.5rem);   /* game card label       */
  --fs-step-title:  clamp(1rem,     1.8vw, 1.5rem);   /* step title            */
  --fs-step-desc:   clamp(0.875rem, 1.6vw, 1.25rem);  /* step desc             */
  --fs-step-num:    clamp(0.875rem, 1.4vw, 1.5rem);   /* "Step N"              */
  --fs-stat-label:  clamp(0.8rem,   1.3vw, 1rem);     /* stat label            */
  --fs-stat-value:  clamp(0.9rem,   1.4vw, 1.125rem); /* stat value            */
  --fs-why-title:   clamp(1rem,     1.8vw, 1.5rem);   /* why-card title        */
  --fs-why-desc:    clamp(0.875rem, 1.5vw, 1.25rem);  /* why-card desc         */
  --fs-btn:         clamp(0.875rem, 1.5vw, 1.5rem);   /* btn-download text     */

  /* Bonus Banner */
  --fs-bonus-label:  clamp(1.125rem, 2.5vw, 2.15rem);  /* "Welcome Bonus"     */
  --fs-bonus-amount: clamp(2.5rem,   8vw,   6.658rem);  /* "$500"              */
  --fs-bonus-code:   clamp(0.875rem, 2vw,   1.69rem);   /* code text           */
  --fs-bonus-tag:    clamp(1rem,     2.5vw, 2.315rem);  /* tagline             */

  /* Footer */
  --fs-footer-h4:   clamp(1rem,   1.5vw, 1.5rem);
  --fs-footer-li:   clamp(0.875rem, 1.3vw, 1.25rem);
  --fs-footer-copy: clamp(0.75rem, 1.2vw, 1.25rem);

  /* Spacing Scale */
  --sp-xs:  clamp(0.5rem,  1vw,  1rem);
  --sp-sm:  clamp(1rem,    2vw,  1.5rem);
  --sp-md:  clamp(1.5rem,  3vw,  2.5rem);
  --sp-lg:  clamp(2rem,    4vw,  3.75rem);
  --sp-xl:  clamp(1.5rem,  5vw,  5rem);

  /* Border radius */
  --radius-sm: clamp(6px, 0.5vw, 8px);
  --radius-md: clamp(10px, 0.9vw, 14px);
  --radius-lg: clamp(14px, 1.3vw, 20px);
  --radius-pill: clamp(32px, 4vw, 50px);

  /* Transitions */
  --transition: 0.2s ease;

   --space-70: clamp(3rem, 2.4rem + 2vw, 4.375rem);      /* 48px → 70px */
  --space-35: clamp(1.5rem, 1.2rem + 1vw, 2.1875rem); 
}

/* ── Reset & Base ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--clr-bg);
  font-family: "Rajdhani", sans-serif;
  color: var(--clr-white);
  overflow-x: hidden;
}

* {
  font-family: "Rajdhani", sans-serif;
}

a {
  text-decoration: none;
  color: inherit;
}

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

.section-container {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 1.5rem);
}

/* ── Section Heading Decorator ── */
.section-heading .arrow-deco {
  
}


/* ── Gold border utility ── */
.gold-border {
  border: 1.5px solid var(--clr-gold);
  border-radius: var(--radius-md);
}

/* =============================================
   NAV
   ============================================= */
.site-nav {
  background-color: var(--clr-bg);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0px 4px 14px 0px #ef854340;
  border-bottom: 1px solid transparent;
  border-image: var(--grad-orange);
  border-image-slice: 1;
}

/* Inner row: logo | links | cta */
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 12px;
}

.logo-icon img {
  height: clamp(60px, 5vw, 80px);
  width: auto;
}

.nav-links {
  display: flex;
  gap: 15px;
  list-style: none;
  flex-wrap: wrap;
}

.nav-links a {
  transition: color var(--transition);
  font-weight: 600;
  font-size: clamp(0.875rem, 1.4vw, 1.125rem);
  line-height: 1;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--clr-gold);
}

/* ── Hamburger toggle button ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1.5px solid rgba(201, 162, 39, 0.5);
  border-radius: 8px;
  cursor: pointer;
  padding: 8px 7px;
  flex-shrink: 0;
}

.nav-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--clr-gold);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* Animate to X when open */
.nav-hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile drawer — right-side slide panel ── */
.nav-mobile-drawer {
  display: none;                       /* hidden on desktop */
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;

  /* Fixed panel on right */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(75vw, 280px);
  z-index: 1100;

  background: #0d0d0d;
  border-left: 1.5px solid rgba(201, 162, 39, 0.3);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.7);
  padding: 80px 28px 40px;

  /* Start off-screen to the right */
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}

.nav-mobile-drawer.is-open {
  transform: translateX(0);
}

/* Overlay backdrop */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1099;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.nav-backdrop.is-open {
  opacity: 1;
  pointer-events: all;
}

/* Close (×) button inside drawer */
.drawer-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  background: rgba(201, 162, 39, 0.1);
  border: 1.5px solid rgba(201, 162, 39, 0.4);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-gold);
  font-size: 18px;
  line-height: 1;
  transition: background var(--transition);
}

.drawer-close:hover {
  background: rgba(201, 162, 39, 0.25);
}

/* Gold divider under logo area */
.drawer-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--clr-gold) 0%, transparent 100%);
  opacity: 0.35;
}

.nav-mobile-drawer .nav-links {
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

.nav-mobile-drawer .nav-links a {
  font-size: 1.375rem;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}

.nav-mobile-drawer .nav-links a:hover {
  border-bottom-color: rgba(201, 162, 39, 0.4);
}

.nav-mobile-drawer .nav-cta {
  width: 100%;
}

.nav-mobile-drawer .nav-cta .btn-download {
  width: 100%;
  justify-content: center;
}

/* ── Download / CTA Button ── */
.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--clr-white);
  font-size: var(--fs-btn);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  border-radius: var(--radius-pill);
  padding: 2px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
  transition: transform var(--transition), box-shadow var(--transition);
  background: var(--grad-btn-gold);
  text-decoration: none;
}

.inner-layer {
  padding: 10px 15px;
  background: var(--grad-inner);
  box-shadow: 0px 0px 6.37px 4.5px #00000040 inset;
  border-radius: var(--radius-pill);
  display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.inner-layer span {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 16px;
  font-weight: 600;
  filter: drop-shadow(2px 2px 2px rgba(16, 24, 40, 0.8));
  white-space: nowrap;
}

.btn-download:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(46, 204, 113, 0.55);
}
.hero-container{
  z-index: 2;
}
/* =============================================
   HERO SECTION
   ============================================= */
.hero {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 110px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-xl) 0;
  z-index: 1;
}
.bg-slider{
  width: 100%;
  height: 100%;
  top: 0;
  left: o;
}
.bg-slider .swiper-slide img{
  width: 100%;
  height: 100%;
  z-index: -1;
}
h1 {
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: 1;
  letter-spacing: 0%;
  text-transform: uppercase;
}

h1 span {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

h2 {
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: 0%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-sub {
  font-weight: 400;
  font-size: var(--fs-hero-sub);
  line-height: 1.4;
  letter-spacing: 0%;
  margin: var(--sp-sm) 0 var(--sp-md);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* =============================================
   STATS SECTION
   ============================================= */


.stats-wrapper {
  background: var(--grad-orange);
  padding: 2px;
  border-radius: var(--radius-pill);
}

.stats-pill {
  background: #000000;
  border-radius: var(--radius-pill);
  padding: clamp(12px, 2vw, 18px) 10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 0;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.5vw, 14px);
  padding: clamp(8px, 1.5vw, 14px) clamp(12px, 2vw, 20px);
  flex: 1 1 160px;
  justify-content: center;
}

.stat-item + .stat-item {
  border-left: 1px solid rgba(201, 162, 39, 0.35);
}

.stat-icon {
  width: clamp(32px, 4vw, 44px);
  height: clamp(32px, 4vw, 44px);
  background: rgba(201, 162, 39, 0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-label {
  font-size: var(--fs-stat-label);
  color: var(--clr-white);
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}

.stat-value {
  font-size: var(--fs-stat-value);
  font-weight: 600;
  color: var(--clr-white);
  letter-spacing: 0.5px;
}

/* =============================================
   OUR GAMES SECTION
   ============================================= */


.games-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.5vw, 16px);
  max-width: 1120px;
  margin: 0 auto;
}

.game-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
  min-height: clamp(180px, 22vw, 270px);
  padding: 10px;
  justify-content: space-between;
  background-repeat: no-repeat;
  z-index: 10;
  background-size: 100% 100%;
}
.slider-arrow{
  position: absolute;
    width: 100%;
    display: flex;
    z-index: 100;
    top: 50%;
    transform: translateY(-50%);
}
.game-card:hover {
  transform: translateY(-4px);
}

.game-label {
  font-size: var(--fs-game-label);
  font-weight: 600;
  letter-spacing: 0.5px;
  z-index: 2;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(2px 2px 2px rgba(16, 24, 40, 0.8));
}
.game-img{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;

}
.game-img img{
  width: 100%;
}

/* =============================================
   HOW TO PLAY SECTION
   ============================================= */


/* Custom tab pills */
.how-tabs .nav-pills {
  background: linear-gradient(180deg, #3d4a5c 0%, #2d3643 100%);
  border-radius: var(--radius-pill);
  padding: 1px;
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

.gradient-border {
  background: var(--grad-orange);
  padding: 1.5px;
  border-radius: var(--radius-pill);
}

.how-tabs .nav-link {
  border-radius: var(--radius-pill);
  padding: clamp(6px, 1vw, 8px) clamp(14px, 2.5vw, 28px);
  font-size: var(--fs-tab);
  font-weight: 600;
  color: var(--clr-white);
  background: transparent;
  border: none;
  letter-spacing: 0.3px;
  transition: all 0.25s;
  white-space: nowrap;
}

.how-tabs .nav-link.active {
  background: var(--grad-gold);
  color: #3d4a5c;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(201, 162, 39, 0.4);
  border-radius: var(--radius-pill);
}

.how-tabs .nav-link:hover:not(.active) {
  color: var(--clr-white);
}

/* Steps */
.steps-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 2vw, 24px);
  max-width: 900px;
  margin: var(--sp-lg) auto 0;
}

.step-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.gradient-border2 {
  background: var(--grad-gold);
  padding: 1.5px;
  border-radius: var(--radius-lg);
}

.step-icon-wrap {
  width: clamp(100px, 13vw, 175px);
  height: clamp(100px, 13vw, 175px);
  border-radius: var(--radius-lg);
  background: var(--clr-bg-section);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: box-shadow var(--transition);
}

.step-icon-wrap img {
  width: clamp(40px, 5vw, 70px);
  height: clamp(40px, 5vw, 70px);
  object-fit: contain;
}

.step-card:hover .step-icon-wrap {
  box-shadow: 0 0 18px rgba(201, 162, 39, 0.3);
}

.step-number {
  font-weight: 600;
  font-size: var(--fs-step-num);
  line-height: 1;
  text-align: center;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 2px 2px rgba(16, 24, 40, 0.8));
}

.step-title {
  font-size: var(--fs-step-title);
  font-weight: 600;
  color: var(--clr-white);
  margin-top: 6px;
}

.step-desc {
  font-size: var(--fs-step-desc);
  color: var(--clr-white);
  line-height: 1.5;
}

/* =============================================
   BONUS BANNER SECTION
   ============================================= */
.bonus-section {
}

.bonus-banner {
  max-width: 1120px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  /* background: url(../images/welcome-bonus-bg.webp) no-repeat 100% 100%; */
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 400px;
}
.bonus-wrapper{
  padding: clamp(24px, 4vw, 42px) clamp(16px, 5vw, 60px);
}
.banner-bg{
  position: absolute;
  width: 100%;
  height: 100%;
}
.banner-bg img{
  width: 100%;
  height: 100%;
}
.bonus-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 180deg at 50% 50%,
    rgba(255,255,255,0.04) 0deg, transparent 20deg,
    rgba(255,255,255,0.04) 40deg, transparent 60deg,
    rgba(255,255,255,0.04) 80deg, transparent 100deg,
    rgba(255,255,255,0.04) 120deg, transparent 140deg,
    rgba(255,255,255,0.04) 160deg, transparent 180deg,
    rgba(255,255,255,0.04) 200deg, transparent 220deg,
    rgba(255,255,255,0.04) 240deg, transparent 260deg,
    rgba(255,255,255,0.04) 280deg, transparent 300deg,
    rgba(255,255,255,0.04) 320deg, transparent 340deg,
    rgba(255,255,255,0.04) 360deg
  );
  z-index: 0;
}

.bonus-banner::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(150px, 30vw, 300px);
  height: clamp(150px, 30vw, 300px);
  background: radial-gradient(circle, rgba(100, 255, 100, 0.15) 0%, transparent 70%);
  z-index: 0;
}

.bonus-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-xs);
}

.bonus-label {
  font-weight: 600;
  font-size: var(--fs-bonus-label);
  line-height: 1;
}

.bonus-amount {
  font-weight: 700;
  font-size: var(--fs-bonus-amount);
  line-height: 1;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 2px 2px rgba(16, 24, 40, 0.8));
}

.bonus-code {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  font-weight: 600;
  font-size: var(--fs-bonus-code);
  line-height: 1;
  padding: clamp(6px, 1vw, 10px);
  border: 2px dashed #ffb577;
}

.bonus-tagline {
  font-size: var(--fs-bonus-tag);
  font-weight: 700;
  color: var(--clr-white);
  -webkit-text-fill-color: var(--clr-white);
  -webkit-text-stroke: 2px #f3d43f;
  text-transform: uppercase;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
  letter-spacing: 18%;
}

/* =============================================
   WHY CHOOSE US SECTION
   ============================================= */
.why-section {
}

.why-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  max-width: 1120px;
  margin: 0 auto var(--sp-md);
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.5vw, 16px);
  max-width: 1120px;
  margin: 0 auto;
}

.why-card {
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #1f1e11 0%, #1b1806 100%);
  padding: clamp(16px, 2.5vw, 30px) clamp(12px, 2vw, 20px) clamp(14px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  transition: box-shadow var(--transition), transform var(--transition);
  height: 100%;
}

.why-icon {
  font-size: clamp(24px, 3.5vw, 36px);
  filter: drop-shadow(0 0 8px rgba(201, 162, 39, 0.5));
}

.why-icon img {
  width: clamp(40px, 5vw, 60px);
  height: clamp(40px, 5vw, 60px);
  object-fit: contain;
}

.why-title {
  font-weight: 600;
  font-size: var(--fs-why-title);
  line-height: 1;
  text-align: center;
}

.why-desc {
  font-weight: 400;
  font-size: var(--fs-why-desc);
  line-height: 1.4;
  text-align: center;
}

/* =============================================
   FOOTER
   ============================================= */
.site-footer {
  background: var(--grad-footer);
  /* padding: var(--sp-xl) 0 0; */
}

.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr 1fr 1fr;
  gap: clamp(16px, 3vw, 30px);
  padding-bottom: var(--sp-lg);
}

.footer-logo-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.footer-logo-badge {
  width: clamp(80px, 12vw, 140px);
  height: auto;
}

.footer-socials {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.social-btn {
  border-radius: 50%;
  border: 1.5px solid rgba(201, 162, 39, 0.4);
  background: rgba(201, 162, 39, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-gold);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  text-decoration: none;
}

.social-btn:hover {
  background: rgba(201, 162, 39, 0.2);
  border-color: var(--clr-gold);
}

.footer-col h4 {
  font-size: var(--fs-footer-h4);
  font-weight: 600;
  color: var(--clr-white);
  margin-bottom: clamp(10px, 2vw, 18px);
  letter-spacing: 0.5px;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vw, 10px);
}

.footer-col ul li a,
.footer-col ul li {
  font-size: var(--fs-footer-li);
  color: var(--clr-white);
  transition: color var(--transition);
  line-height: 1.4;
}

.footer-col ul li a:hover {
  color: var(--clr-gold);
  text-decoration: none;
}

.footer-contact-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-bottom {
  padding: 14px clamp(1rem, 3vw, 1.5rem);
  text-align: center;
  font-size: var(--fs-footer-copy);
  color: var(--clr-white);
  letter-spacing: 0.3px;
}

.copyright {
  border-top: 1.5px solid transparent;
  border-image-source: var(--grad-orange);
  border-image-slice: 1;
}
.header-btn-wrapper{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* =============================================
   RESPONSIVE BREAKPOINTS
   ============================================= */
@media(max-width:1199px){
    .swiper-button-next,.next-btn{
    right: 0 !important;
    position: relative;
    margin-top: 0;
    top: auto;
  }
  .swiper-button-prev,.prev-btn{
    left: 0 !important;
    position: relative;
    margin-top: 0;
    top: auto;
  }
  .slider-arrow{
    position: relative;
    width: 100px;
    margin: auto;
    margin-top: 20px;
    flex-direction: row-reverse;
    gap: 10px;
    transform: translateX(0);
    top: auto;
  }
}
/* ── Large tablets (≤ 1024px) ── */
@media (max-width: 1024px) {
  .games-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps-row {
    grid-template-columns: repeat(2, 1fr);
    max-width: 600px;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
  .swiper-button-next,.next-btn{
    right: 0 !important;
    position: relative;
    margin-top: 0;
    top: auto;
  }
  .swiper-button-prev,.prev-btn{
    left: 0 !important;
    position: relative;
    margin-top: 0;
    top: auto;
  }
  .slider-arrow{
    position: relative;
    width: 100px;
    margin: auto;
    margin-top: 20px;
    flex-direction: row-reverse;
    gap: 10px;
    transform: translateX(0);
    top: auto;
  }
}

/* ── Tablets (≤ 768px) ── */
@media (max-width: 768px) {
  .stats-pill {
    flex-wrap: wrap;
    gap: 0;
  }
  .why-header{
    justify-content: center;
    gap: 5px;
  }

  .stat-item {
    flex: 1 1 45%;
    border-left: none !important;
    border-top: 1px solid rgba(201, 162, 39, 0.25);
    padding: 12px;
    justify-content: flex-start;
  }

  .stat-item:nth-child(-n+2) {
    border-top: none;
  }
    header .btn-download {
        position: fixed;
        right: 0;
        top: 50%;
        z-index: 9999;
        writing-mode: vertical-lr;
         border-radius: 20px 0px 0 20px;
         transform: translatey(-50%);
    }
    header .btn-download:hover{
      transform: translatey(-50%);
    }
        header .btn-download .inner-layer{
          border-radius: 20px 0px 0 20px;
        }
  /* Hide desktop nav links & CTA, show hamburger */
  /* .nav-links,
  .nav-inner .btn-download {
    display: none;
  } */

  .nav-hamburger {
    display: flex;
  }

  .nav-mobile-drawer,
  .nav-backdrop {
    display: flex;
  }

  .how-tabs .nav-pills {
    gap: 4px;
  }

  .how-tabs .nav-link {
    padding: 8px 16px;
  }
  .hero{
    min-height: 300px;
  }
  .bonus-tagline{
        -webkit-text-stroke: .5px #f3d43f;
  }
  .bonus-banner{
    min-height: 100%;
  }
}

/* ── Mobile (≤ 576px) ── */
@media (max-width: 576px) {

  .steps-row {
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-logo-col {
    align-items: center;
  }

  .footer-socials {
    justify-content: center;
  }

  .hero-copy {
    align-items: center;
    text-align: center;
  }

  .hero-sub br {
    display: none;
  }

  .bonus-tagline {
    font-size: clamp(0.875rem, 4vw, 1.5rem);
  }
}

/* ── Small mobile (≤ 380px) ── */
@media (max-width: 380px) {

  .how-tabs .nav-link {
    font-size: 0.875rem;
    padding: 6px 12px;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


.swiper-button-next,.next-btn{
  right: -62px;
  position: absolute;
}
.swiper-button-prev,.prev-btn{
  left: -62px;
  position: absolute;
}
.footer-col ul{
  padding-left: 0;
}
.pagination-dots {
    position: relative;
    text-align: center;
    transform: translateZ(0);
    transition: opacity .3s;
    z-index: 10;
    margin-top: 10px;
}
.swiper-pagination-bullet {
  background-color: #fff;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active{
  background: var(--grad-gold);
  width: 30px;
  border-radius: 10px;
}
.py70 {
  padding-top: var(--space-70);
  padding-bottom: var(--space-70);
}

.pt70 {
  padding-top: var(--space-70);
}

.pb70 {
  padding-bottom: var(--space-70);
}

.py35 {
  padding-top: var(--space-35);
  padding-bottom: var(--space-35);
}

.pt35 {
  padding-top: var(--space-35);
}

.pb35 {
  padding-bottom: var(--space-35);
}


/* Policy page css */

    .policy-wrapper h2.section-heading {
      font-size: var(--fs-why-title);
      margin-top: 1.8rem;
      margin-bottom: 0.5rem;
      text-align: left;
      justify-content: start;
    }
 
    .policy-wrapper p,
    .policy-wrapper li {
      font-size: var(--fs-why-desc);
    }
    .text-light{
      font-weight: 600;
    }
 
    .policy-wrapper ul {
      padding-left: 1.2rem;
      margin-bottom: 0.4rem;
    }
 
    .policy-wrapper ul li {
      margin-bottom: 0.15rem;
    }
 
    .policy-wrapper ul li::marker {
      color: #888;
    }
 
    .policy-wrapper .contact-line {
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
      margin-bottom: 0.25rem;
      color: #b8b8cc;
    }
 
    .policy-wrapper .contact-line .icon {
      margin-top: 2px;
      flex-shrink: 0;
    }

    .swiper.bonus-bg-swiper {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .bonus-wrapper {
      position: absolute;
      top: 0;
      bottom: 0;
      height: max-content;
      margin: auto;
    }
    .live-game {
        background: var(--grad-gold);
}
    .live-game a {
    color: red !important;
    background-clip: text;
    -webkit-text-fill-color: red;
    line-height: normal;
}