/* =========================================================
   ArenaHub — UI/UX layout demo stylesheet
   Tokens
========================================================= */
:root{
  --primary: #B22234;
  --primary-dark: #8c1a29;
  --primary-light: #d94a5a;
  --navy: #222222;
  --navy-soft: #2c2c2c;
  --bg: #ffffff;
  --bg-soft: #F5F5F5;
  --text: #232323;
  --text-mute: #6b6b6b;
  --border: #e7e7e7;
  --blue-chip: #cfe8fb;
  --pink-chip: #fbd9e3;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.09);
  --font-display: 'Sora', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --header-h: 74px;
  --catbar-h: 52px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + var(--catbar-h) + 10px);}
body{
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; border:none;}

.container{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
}
.container.narrow{max-width:820px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* =========================================================
   Demo banner
========================================================= */
.demo-banner{
  background: var(--navy);
  color:#f0d9dc;
  font-size:0.8rem;
  text-align:center;
  padding:8px 16px;
  letter-spacing:.2px;
}
.demo-banner i{ color: var(--primary-light); margin-right:6px; }

/* =========================================================
   Header
========================================================= */
.site-header{
  position: sticky;
  top:0;
  z-index:100;
  background:#fff;
  border-bottom:1px solid var(--border);
  height: var(--header-h);
  display:flex;
  align-items:center;
}
.header-inner{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-display);
  font-weight:800;
  font-size:1.3rem;
  letter-spacing:.5px;
  color: var(--primary);
  white-space:nowrap;
}
.logo-mark{
  width:38px; height:38px;
  border-radius:10px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
  flex-shrink:0;
}
.logo-accent{ color: var(--navy); }

.main-nav{
  display:flex;
  gap:34px;
  flex:1;
  justify-content:center;
}
.main-nav a{
  font-weight:600;
  font-size:0.95rem;
  color: var(--text);
  position:relative;
  padding:6px 2px;
  transition:color .2s ease;
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  width:0; height:2px;
  background: var(--primary);
  transition:width .25s ease;
}
.main-nav a:hover{ color: var(--primary); }
.main-nav a:hover::after{ width:100%; }

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

.header-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-weight:700;
    font-size:.9rem;
    padding:12px 24px;
    border-radius:50px;
    text-decoration:none;
    transition:all .3s ease;
}

/* ===========================
   PRIMARY (WHATSAPP)
=========================== */

.btn-primary{
    background:linear-gradient(135deg,#25D366,#128C7E);
    color:#fff;
    box-shadow:0 8px 20px rgba(37,211,102,.35);
}

.btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(37,211,102,.55);
}

/* ===========================
   OUTLINE
=========================== */

.btn-outline{
    background:transparent;
    color:#25D366;
    border:2px solid #25D366;
}

.btn-outline:hover{
    background:#25D366;
    color:#fff;
    transform:translateY(-3px);
}

/* ===========================
   LIGHT BUTTON
=========================== */

.btn-light{
    background:#fff;
    color:#128C7E;
    box-shadow:0 8px 18px rgba(0,0,0,.08);
}

.btn-light:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 24px rgba(0,0,0,.15);
}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  padding:6px;
}
.nav-toggle span{
  width:22px; height:2px;
  background: var(--navy);
  border-radius:2px;
  transition:.25s ease;
}

/* =========================================================
   Category bar
========================================================= */
.category-bar{
  position:sticky;
  top: var(--header-h);
  z-index:99;
  background: var(--navy);
  height: var(--catbar-h);
  display:flex;
  align-items:center;
}
.category-track{
  width:100%;
  display:flex;
  overflow-x:auto;
  scrollbar-width:none;
  padding:0 12px;
}
.category-track::-webkit-scrollbar{ display:none; }
.cat-item{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 16px;
  height: var(--catbar-h);
  color:#c9c9c9;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:.3px;
  text-transform:uppercase;
  border-bottom:3px solid transparent;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
  white-space:nowrap;
}
.cat-item i{ font-size:0.95rem; }
.cat-item:hover{ color:#fff; background:rgba(255,255,255,0.06); }
.cat-item.active{
  color:#fff;
  border-bottom-color: var(--primary);
  background:rgba(178,34,52,0.18);
}

/* =========================================================
   Section scaffolding
========================================================= */
.section-block{ margin-top:44px; }
.section-block:first-of-type{ margin-top:34px; }
.section-label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background: var(--primary);
  color:#fff;
  font-weight:700;
  font-size:0.95rem;
  letter-spacing:.3px;
  padding:12px 20px;
  border-radius: var(--radius) var(--radius) 0 0;
  margin-bottom:0;
}
.section-label.centered{
  display:flex;
  justify-content:center;
  margin:0 auto 8px;
  border-radius: var(--radius);
}
.section-heading{
  font-family: var(--font-display);
  font-size:2rem;
  font-weight:800;
  margin:10px 0 30px;
}
.section-heading.centered{ text-align:center; }

/* =========================================================
   Hero
========================================================= */
.hero{
  background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%);
  padding:44px 0 60px;
}
.hero-heading{
  text-align:center;
  font-family: var(--font-display);
  font-size:clamp(1.4rem, 3vw, 2.1rem);
  font-weight:800;
  color: var(--primary);
}
.hero-heading .divider{ color: var(--navy); opacity:.4; margin:0 8px; }
.hero-sub{
  text-align:center;
  color: var(--text-mute);
  margin-top:10px;
  font-size:0.95rem;
}

/* =========================================================
   Card grids
========================================================= */
.card-grid{
  display:grid;
  gap:16px;
  background:#fff;
  border:1px solid var(--border);
  border-top:none;
  border-radius:0 0 var(--radius) var(--radius);
  padding:20px;
  box-shadow: var(--shadow-sm);
}
.game-grid{ grid-template-columns:repeat(6, 1fr); }
.sport-grid{ grid-template-columns:repeat(6, 1fr); }
.promo-grid{ grid-template-columns:repeat(4, 1fr); }
.tile-grid{
  grid-template-columns:repeat(5, 1fr);
  border-top:1px solid var(--border);
  border-radius: var(--radius);
}

.game-card{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  aspect-ratio: 4/3;
  cursor:pointer;
  box-shadow: var(--shadow-sm);
}
.game-card img{
  width:100%; height:100%;
  object-fit:cover;
  transition: transform .4s ease;
}
.game-card:hover img{ transform:scale(1.08); }
.game-card .tag{
  position:absolute; top:8px; left:8px;
  background:rgba(0,0,0,0.55);
  color:#fff;
  font-size:0.62rem;
  font-weight:700;
  padding:3px 8px;
  border-radius:4px;
  letter-spacing:.4px;
  text-transform:uppercase;
}
.game-card .label{
  position:absolute; left:0; right:0; bottom:0;
  background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent);
  color:#fff;
  font-weight:700;
  font-size:0.82rem;
  padding:22px 10px 10px;
}

.sport-card{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  aspect-ratio: 4/3;
  cursor:pointer;
  box-shadow: var(--shadow-sm);
}
.sport-card img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.sport-card:hover img{ transform:scale(1.08); }
.sport-card .label{
  position:absolute; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.55);
  color:#fff;
  font-weight:800;
  font-size:0.85rem;
  text-align:center;
  letter-spacing:.5px;
  text-transform:uppercase;
  padding:9px 6px;
}

.promo-card{
  border-radius: var(--radius);
  overflow:hidden;
  aspect-ratio: 16/9;
  box-shadow: var(--shadow-sm);
  position:relative;
  cursor:pointer;
}
.promo-card img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.promo-card:hover img{ transform:scale(1.06); }

.tile-card{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  aspect-ratio:4/3;
  box-shadow: var(--shadow-sm);
  cursor:pointer;
}
.tile-card img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.tile-card:hover img{ transform:scale(1.08); }
.tile-card .label{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(0deg, rgba(0,0,0,0.72), transparent);
  color:#fff;
  font-weight:700;
  font-size:0.78rem;
  text-align:center;
  padding:18px 6px 8px;
  letter-spacing:.3px;
}

/* =========================================================
   Match table
========================================================= */
.match-section{ padding:50px 0; background: var(--bg-soft); }
.table-card{
  background:#fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow:hidden;
}
.table-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding:16px 22px;
  border-bottom:1px solid var(--border);
}
.table-title{
  display:flex; align-items:center; gap:10px;
  background: var(--primary);
  color:#fff;
  font-weight:700;
  font-size:0.9rem;
  padding:8px 16px;
  border-radius:20px;
}
.table-filters{ display:flex; gap:8px; }
.chip{
  background:#fff;
  border:1.5px solid var(--border);
  color: var(--text-mute);
  font-weight:700;
  font-size:0.75rem;
  padding:6px 14px;
  border-radius:20px;
  transition:.2s ease;
}
.chip.active, .chip:hover{
  border-color: var(--primary);
  color: var(--primary);
  background:rgba(178,34,52,0.06);
}

.table-scroll{ overflow-x:auto; }
.match-table{
  width:100%;
  border-collapse:collapse;
  min-width:760px;
}
.match-table thead th{
  background: var(--bg-soft);
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:.4px;
  color: var(--text-mute);
  padding:12px 14px;
  text-align:center;
  border-bottom:1px solid var(--border);
}
.match-table thead th.col-match{ text-align:left; }
.match-table tbody td{
  padding:14px;
  text-align:center;
  border-bottom:1px solid var(--border);
  font-size:0.85rem;
}
.match-table tbody tr:hover{ background: rgba(178,34,52,0.03); }
.match-cell{ text-align:left; }
.match-name{ font-weight:700; font-size:0.9rem; }
.match-league{ color: var(--text-mute); font-size:0.72rem; margin-top:2px; }
.status-badge{
  display:inline-flex; align-items:center; gap:6px;
  color:#1a9e56;
  font-weight:800;
  font-size:0.72rem;
  letter-spacing:.4px;
}
.status-badge .dot{
  width:7px; height:7px; border-radius:50%;
  background:#1a9e56;
  box-shadow:0 0 0 3px rgba(26,158,86,0.18);
}
.match-date{ font-size:0.78rem; color: var(--text-mute); }
.odd-cell{
  font-weight:700;
  border-radius:6px;
}
.odd-cell .odd-value{ display:block; font-size:0.88rem; }
.odd-cell .odd-volume{ display:block; font-size:0.65rem; opacity:.65; font-weight:600; }
.odd-1, .odd-2{ background: var(--blue-chip); }
.odd-x{ background: var(--pink-chip); }
.table-note{
  padding:12px 22px 18px;
  font-size:0.78rem;
  color: var(--text-mute);
}
.table-note i{ color: var(--primary); margin-right:4px; }

/* =========================================================
   Providers
========================================================= */
.providers-section{ padding:54px 0; }
.provider-strip{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:14px;
  margin-top:22px;
}
.provider-card{
  background: var(--navy);
  border-radius: var(--radius);
  height:78px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f2f2f2;
  font-weight:800;
  font-size:0.85rem;
  letter-spacing:.4px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.provider-card:hover{ transform:translateY(-4px); box-shadow: var(--shadow-md); }


/* ================= ABOUT SECTION ================= */

.about-section{
    padding:90px 0;
}

.about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.about-image img{
    width:100%;
    border-radius:18px;
    display:block;
}

.section-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#fff4e5;
    color:#d97706;
    padding:8px 16px;
    border-radius:50px;
    font-size:14px;
    font-weight:600;
    margin-bottom:20px;
}

.about-content h2{
    font-size:42px;
    line-height:1.2;
    margin-bottom:20px;
}

.about-content h2 span{
    color:#f59e0b;
}

.about-content p{
    font-size:17px;
    line-height:1.9;
    color:#666;
    margin-bottom:20px;
}

.about-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin:35px 0;
}

.feature-item{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
}

.feature-item i{
    color:#16a34a;
}

@media(max-width:991px){

.about-grid{
grid-template-columns:1fr;
gap:40px;
}

.about-content h2{
font-size:32px;
}

.about-features{
grid-template-columns:1fr;
}

}

/*========================================
ABOUT PAGE SECTIONS
========================================*/

.section-header{
text-align:center;
max-width:760px;
margin:0 auto 55px;
}

.why-reddybook,
.steps-section,
.games-highlight{
padding:90px 0;
}

.why-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.why-card{
padding:30px;
border-radius:16px;
text-align:center;
transition:.3s;
}

.why-card:hover{
transform:translateY(-8px);
}

.why-card i{
font-size:42px;
margin-bottom:18px;
}

.step-box{
text-align:center;
padding:35px;
border-radius:16px;
}

.steps-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.step-number{
width:70px;
height:70px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
font-weight:700;
margin:0 auto 20px;
}

.games-wrapper{
display:grid;
grid-template-columns:1fr 500px;
gap:60px;
align-items:center;
}

.games-image img{
width:100%;
display:block;
border-radius:18px;
}

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

.games-list li{
display:flex;
align-items:center;
gap:10px;
}

@media(max-width:991px){

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

.steps-grid{
grid-template-columns:1fr;
}

.games-wrapper{
grid-template-columns:1fr;
}

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

}

@media(max-width:576px){

.why-grid{
grid-template-columns:1fr;
}

}

/*=============================
      APK SECTION
==============================*/

.apk-section{
    padding:90px 0;
    background:#0f172a;
}

.apk-wrapper{
    display:grid;
    grid-template-columns:420px 1fr;
    gap:70px;
    align-items:center;
}

.apk-image img{
    width:100%;
    display:block;
}

.apk-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 18px;
    background:#1e293b;
    color:#fbbf24;
    border-radius:40px;
    font-weight:600;
    margin-bottom:18px;
}

.apk-content h2{
    font-size:42px;
    color:#fff;
    margin-bottom:20px;
    line-height:1.2;
}

.apk-content h2 span{
    color:#fbbf24;
}

.apk-content p{
    color:#cbd5e1;
    font-size:17px;
    line-height:1.9;
    margin-bottom:18px;
}

.apk-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin:35px 0;
}

.apk-card{
    background:#16213b;
    padding:25px;
    border-radius:15px;
    transition:.3s;
}

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

.apk-card i{
    font-size:28px;
    color:#fbbf24;
    margin-bottom:15px;
}

.apk-card h4{
    color:#fff;
    margin-bottom:10px;
}

.apk-card p{
    margin:0;
    font-size:15px;
    color:#94a3b8;
}

.apk-buttons{
    display:flex;
    gap:20px;
    margin-top:35px;
}

.btn-secondary{
    background:#fff;
    color:#111827;
}

@media(max-width:992px){

.apk-wrapper{
grid-template-columns:1fr;
}

.apk-image{
text-align:center;
}

.apk-image img{
max-width:340px;
margin:auto;
}

.apk-features{
grid-template-columns:1fr;
}

.apk-buttons{
flex-direction:column;
}

.apk-content h2{
font-size:32px;
}

}

/*====================================
      REDDYANNA SECTION
====================================*/

.comparison-section{
    padding:90px 0;
}

.comparison-section .section-header{
    text-align:center;
    max-width:850px;
    margin:0 auto 60px;
}

.comparison-section .section-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 18px;
    border-radius:50px;
    font-size:14px;
    font-weight:600;
    margin-bottom:20px;
}

.comparison-section .section-header h2{
    font-size:42px;
    font-weight:800;
    margin-bottom:20px;
    line-height:1.2;
}

.comparison-section .section-header p{
    font-size:17px;
    line-height:1.8;
    max-width:760px;
    margin:auto;
}

.comparison-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.comparison-card{
    padding:35px 30px;
    border-radius:18px;
    transition:.3s ease;
    height:100%;
}

.comparison-card:hover{
    transform:translateY(-8px);
}

.comparison-card i{
    width:65px;
    height:65px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    margin-bottom:22px;
}

.comparison-card h3{
    font-size:24px;
    margin-bottom:15px;
    font-weight:700;
}

.comparison-card p{
    font-size:16px;
    line-height:1.8;
    margin:0;
}

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

@media(max-width:991px){

.comparison-grid{
    grid-template-columns:1fr;
}

.comparison-section{
    padding:80px 0;
}

.comparison-section .section-header h2{
    font-size:34px;
}

}

@media(max-width:576px){

.comparison-section{
    padding:60px 0;
}

.comparison-card{
    padding:25px;
}

.comparison-card h3{
    font-size:22px;
}

.comparison-card p{
    font-size:15px;
}

.comparison-section .section-header h2{
    font-size:28px;
}

.comparison-section .section-header p{
    font-size:15px;
}

}
/* =========================================================
   Card games / categories sections
========================================================= */
.cardgames-section, .categories-section{ padding:20px 0 54px; }

/* =========================================================
   About / What-is split sections
========================================================= */
.about-section, .whatis-section{ padding:60px 0; }
.whatis-section{ background: var(--bg-soft); }
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}
.split.reverse .split-media{ order:2; }
.split.reverse .split-copy{ order:1; }
.split-media img{
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.split-copy h2{
  font-family: var(--font-display);
  font-size:1.7rem;
  font-weight:800;
  margin:12px 0 16px;
  line-height:1.3;
}
.split-copy p{ color: var(--text-mute); margin-bottom:14px; font-size:0.95rem; }
.check-list{ margin:18px 0 24px; display:flex; flex-direction:column; gap:10px; }
.check-list li{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:0.9rem; }
.check-list i{ color: var(--primary); }

.feature-mini-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin-top:26px;
}
.feature-mini{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:16px 10px;
  text-align:center;
  font-weight:700;
  font-size:0.78rem;
  display:flex; flex-direction:column; gap:8px; align-items:center;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease;
}
.feature-mini:hover{ transform:translateY(-4px); }
.feature-mini i{ color: var(--primary); font-size:1.2rem; }

/* =========================================================
   Contact page
========================================================= */
.contact-form{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:20px;
}
.contact-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-weight:700;
  font-size:0.85rem;
  color: var(--text);
}
.contact-form input,
.contact-form textarea{
  font-family: var(--font-body);
  font-size:0.92rem;
  padding:12px 14px;
  border:1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  background:#fff;
  resize:vertical;
  transition: border-color .2s ease;
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color: var(--primary);
}
.contact-form button{ align-self:flex-start; margin-top:4px; }

.contact-details{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:20px;
}
.contact-details li{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:600;
  font-size:0.92rem;
  color: var(--text);
}
.contact-details i{
  width:36px; height:36px;
  border-radius:10px;
  background: var(--bg-soft);
  color: var(--primary);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

/* =========================================================
   Why-choose feature grid
========================================================= */
.why-section{ padding:60px 0; }
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
.feature-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:28px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.feature-card:hover{ transform:translateY(-6px); box-shadow: var(--shadow-md); border-color:transparent; }
.feature-card .icon{
  width:52px; height:52px;
  border-radius:12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
  margin-bottom:16px;
}
.feature-card h3{ font-size:1.05rem; margin-bottom:8px; }
.feature-card p{ color: var(--text-mute); font-size:0.88rem; }

/* =========================================================
   Sports covered
========================================================= */
.sports-covered-section{ padding:20px 0 64px; background: var(--bg-soft); }
.sports-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}
.sport-pill{
  background:#fff;
  border-radius: var(--radius);
  padding:22px 14px;
  text-align:center;
  font-weight:700;
  font-size:0.9rem;
  box-shadow: var(--shadow-sm);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  transition: transform .2s ease;
}
.sport-pill:hover{ transform:translateY(-4px); color: var(--primary); }
.sport-pill i{ font-size:1.4rem; color: var(--primary); }

/* Casino Page Content */
/*=====================================
      CONTENT SECTION
======================================*/

.content-section{
    padding:90px 0;
}

.content-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
    margin-top:50px;
}

.content-box{
    padding:35px;
    border-radius:18px;
}

.content-box h3{
    margin-bottom:18px;
    font-size:26px;
    font-weight:700;
}

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

@media(max-width:991px){

.content-grid{
    grid-template-columns:1fr;
}

.content-box{
    padding:25px;
}

}

/* =========================================================
   FAQ accordion
========================================================= */
.faq-section{ padding:60px 0; }
.accordion-item{
  border:1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom:12px;
  overflow:hidden;
}
.accordion-question{
  width:100%;
  background:#fff;
  padding:18px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:700;
  font-size:0.95rem;
  text-align:left;
}
.accordion-question:hover{ background: var(--bg-soft); }
.accordion-question i{ transition: transform .25s ease; color: var(--primary); }
.accordion-item.open .accordion-question i{ transform:rotate(180deg); }
.accordion-answer{
  max-height:0;
  overflow:hidden;
  transition: max-height .3s ease;
  background: var(--bg-soft);
}
.accordion-answer p{ padding:0 20px 18px; color: var(--text-mute); font-size:0.9rem; }

/* =========================================================
   CTA
========================================================= */
.cta-section{
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  padding:64px 0;
}
.cta-inner{ text-align:center; color:#fff; }
.cta-inner h2{ font-family: var(--font-display); font-size:1.9rem; font-weight:800; margin-bottom:12px; }
.cta-inner p{ opacity:.9; max-width:520px; margin:0 auto 26px; }

/* =========================================================
   Footer
========================================================= */
.site-footer{ background: var(--navy); color:#c9c9c9; padding:56px 0 0; }
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:36px;
  padding-bottom:40px;
}
.footer-logo{ margin-bottom:14px; }
.footer-logo .logo-accent{ color:#fff; }
.footer-col p{ font-size:0.85rem; line-height:1.7; color:#aaa; }
.footer-col h4{ color:#fff; font-size:0.95rem; margin-bottom:16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:0.85rem; color:#aaa; transition:color .2s ease; }
.footer-col a:hover{ color: var(--primary-light); }
.footer-col li{ font-size:0.85rem; color:#aaa; display:flex; align-items:center; gap:8px; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.08);
  text-align:center;
  padding:18px 0;
  font-size:0.78rem;
  color:#888;
}

/* =========================================================
   Footer disclaimer
========================================================= */
.footer-disclaimer{
  border-top:1px solid rgba(255,255,255,0.08);
  padding:18px 0;
}
.footer-disclaimer p{
  font-size:0.78rem;
  line-height:1.6;
  color:#9a9a9a;
  max-width:980px;
}
.footer-disclaimer i{ color: var(--primary-light); margin-right:4px; }
.footer-disclaimer strong{ color:#c9c9c9; }

/* =========================================================
   Floating contact button
========================================================= */
/* ===============================
   FLOATING WHATSAPP BUTTON
================================= */

.floating-contact{
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: 50px;

    background: linear-gradient(135deg,#25D366,#128C7E);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;

    box-shadow: 0 8px 30px rgba(37,211,102,.45);

    z-index: 999;
    transition: all .35s ease;

    animation: whatsappPulse 2s infinite;
}

.floating-contact i{
    font-size:22px;
    color:#fff;
}

.floating-contact:hover{
    transform: translateX(-50%) translateY(-5px) scale(1.04);
    box-shadow: 0 12px 40px rgba(37,211,102,.65);
    animation-play-state: paused;
}

/* Glowing Ring */

.floating-contact::before{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:60px;
    background:rgba(37,211,102,.35);
    z-index:-1;
    animation:ring 2s infinite;
}

/* Pulse Animation */

@keyframes whatsappPulse{

    0%{
        box-shadow:0 0 0 0 rgba(37,211,102,.55);
    }

    70%{
        box-shadow:0 0 0 18px rgba(37,211,102,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(37,211,102,0);
    }

}

@keyframes ring{

    0%{
        transform:scale(1);
        opacity:.7;
    }

    70%{
        transform:scale(1.15);
        opacity:0;
    }

    100%{
        transform:scale(1);
        opacity:0;
    }

}

@media(max-width:768px){

.floating-contact{
    width:calc(100% - 32px);
    justify-content:center;
    font-size:14px;
    padding:14px 20px;
}

}


/* =========================================================
   Back to top + toast
========================================================= */
.back-to-top{
  position:fixed;
  right:24px; bottom:24px;
  width:46px; height:46px;
  border-radius:50%;
  background: var(--primary);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-md);
  opacity:0; visibility:hidden;
  transform:translateY(10px);
  transition:.3s ease;
  z-index:80;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background: var(--primary-dark); }

.demo-toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translate(-50%, 20px);
  background: var(--navy);
  color:#fff;
  padding:12px 22px;
  border-radius:24px;
  font-size:0.85rem;
  font-weight:600;
  box-shadow: var(--shadow-md);
  opacity:0;
  visibility:hidden;
  transition:.3s ease;
  z-index:200;
}
.demo-toast.show{ opacity:1; visibility:visible; transform:translate(-50%, 0); }

/* =========================================================
   Reveal animation
========================================================= */
.reveal{ opacity:0; transform:translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 1080px){
  .game-grid{ grid-template-columns:repeat(4, 1fr); }
  .sport-grid{ grid-template-columns:repeat(3, 1fr); }
  .promo-grid{ grid-template-columns:repeat(2, 1fr); }
  .tile-grid{ grid-template-columns:repeat(3, 1fr); }
  .provider-strip{ grid-template-columns:repeat(3, 1fr); }
  .feature-grid{ grid-template-columns:repeat(2, 1fr); }
  .sports-grid{ grid-template-columns:repeat(3, 1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 860px){
  .main-nav{
    position:absolute;
    top:100%; left:0; right:0;
    background:#fff;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    border-bottom:1px solid var(--border);
    box-shadow: var(--shadow-md);
    max-height:0;
    overflow:hidden;
    transition: max-height .3s ease;
  }
  .main-nav.open{ max-height:400px; }
  .main-nav a{ width:100%; padding:14px 24px; border-bottom:1px solid var(--border); }
  .main-nav a::after{ display:none; }
  .header-inner{ position:relative; }
  .nav-toggle{ display:flex; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .split{ grid-template-columns:1fr; }
  .split.reverse .split-media{ order:1; }
  .split.reverse .split-copy{ order:2; }
}

@media (max-width: 640px){
  :root{ --header-h:64px; }
/*  .floating-contact span{ display:none; } */
  .floating-contact{ padding:13px; }
  .game-grid{ grid-template-columns:repeat(2, 1fr); }
  .sport-grid{ grid-template-columns:repeat(2, 1fr); }
  .promo-grid{ grid-template-columns:1fr; }
  .tile-grid{ grid-template-columns:repeat(2, 1fr); }
  .provider-strip{ grid-template-columns:repeat(2, 1fr); }
  .feature-grid{ grid-template-columns:1fr; }
  .feature-mini-grid{ grid-template-columns:repeat(2, 1fr); }
  .sports-grid{ grid-template-columns:repeat(2, 1fr); }
  .footer-grid{ grid-template-columns:1fr; }
  .hero-heading{ padding:0 8px; }
  .table-card-header{ flex-direction:column; align-items:flex-start; }
}