/* =====================================
   ZEE 24 TV - Professional Stylesheet
   zee24tv.com
   ===================================== */

:root {
  --navy:   #0a0f2e;
  --navy2:  #0d1545;
  --crimson: #e8002d;
  --crimson2: #ff1744;
  --gold:   #f5c518;
  --light-bg: #f4f6fb;
  --white:  #ffffff;
  --text-muted-custom: rgba(255,255,255,0.65);
}

* { scroll-behavior: smooth; }
html { scroll-padding-top: 70px; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--white);
  color: #1a1a2e;
  overflow-x: hidden;
}
h1,h2,h3,h4,h5 { font-family: 'Rajdhani', sans-serif; font-weight: 700; }

/* ── NAVBAR ── */
#mainNav {
  background: rgba(10,15,46,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(232,0,45,0.25);
  transition: all .3s ease;
}
#mainNav.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,.5); }
.navbar-brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-logo-wrap {
  width:42px; height:42px;
  background: linear-gradient(135deg, var(--crimson), #7b0015);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 18px rgba(232,0,45,.55);
  font-size:1.1rem; color:#fff; font-weight:900;
  font-family:'Rajdhani',sans-serif; letter-spacing:1px;
}
.brand-text { color:#fff; font-size:1.15rem; font-weight:700; line-height:1; }
.brand-text span { color: var(--crimson2); }
.brand-sub { font-size:.6rem; color:var(--text-muted-custom); letter-spacing:2px; text-transform:uppercase; }
.nav-link-custom {
  color: rgba(255,255,255,.8) !important;
  font-weight:500; font-size:.88rem; letter-spacing:.5px;
  padding:.5rem 1rem !important; border-radius:6px;
  transition: all .25s; position:relative;
}
.nav-link-custom::after {
  content:''; position:absolute; bottom:4px; left:50%; right:50%;
  height:2px; background:var(--crimson2); border-radius:2px; transition:all .3s;
}
.nav-link-custom:hover { color:#fff !important; }
.nav-link-custom:hover::after { left:12px; right:12px; }
.btn-nav-primary {
  background: linear-gradient(135deg, var(--crimson), #b0001f);
  border:none; color:#fff; font-weight:600; font-size:.82rem;
  padding:.45rem 1.3rem; border-radius:50px; letter-spacing:.5px;
  box-shadow:0 4px 18px rgba(232,0,45,.4); transition:all .3s;
}
.btn-nav-primary:hover {
  background: linear-gradient(135deg, var(--crimson2), var(--crimson));
  transform:translateY(-1px); box-shadow:0 6px 24px rgba(232,0,45,.55); color:#fff;
}

/* ── HERO ── */
#home {
  background: linear-gradient(135deg, var(--navy) 0%, #12195a 50%, #1a0a3d 100%);
  min-height:100vh; display:flex; align-items:center;
  position:relative; overflow:hidden;
}
#home::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 60% at 80% 50%, rgba(232,0,45,.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 10% 80%, rgba(255,23,68,.08) 0%, transparent 60%);
}
.hero-circle {
  position:absolute; border-radius:50%;
  border:1px solid rgba(232,0,45,.15);
  animation: pulse-ring 4s ease-in-out infinite;
}
.hero-circle:nth-child(1){ width:400px;height:400px;top:-100px;right:-100px;animation-delay:0s;}
.hero-circle:nth-child(2){ width:600px;height:600px;top:-200px;right:-200px;animation-delay:.8s;}
.hero-circle:nth-child(3){ width:200px;height:200px;bottom:80px;left:-60px;animation-delay:1.6s;}
@keyframes pulse-ring { 0%,100%{opacity:.3;transform:scale(1);}50%{opacity:.7;transform:scale(1.04);} }
.dots-grid {
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:30px 30px;
}
.hero-logo-wrap {
  width:130px;height:130px;
  background:linear-gradient(135deg,var(--crimson),#7b0015);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 60px rgba(232,0,45,.5), 0 0 120px rgba(232,0,45,.2);
  position:relative; animation:float 3s ease-in-out infinite;
}
.hero-logo-wrap::before {
  content:''; position:absolute; inset:-3px; border-radius:50%;
  background:conic-gradient(var(--crimson2), transparent, var(--crimson2));
  animation:spin 3s linear infinite; z-index:-1;
}
@keyframes float { 0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);} }
@keyframes spin  { to{transform:rotate(360deg);} }
.hero-logo-text { font-family:'Rajdhani',sans-serif; font-size:2rem; font-weight:900; color:#fff; line-height:1; text-align:center; }
.hero-logo-sub  { font-size:.55rem; color:rgba(255,255,255,.7); letter-spacing:3px; text-transform:uppercase; }
.hero-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(232,0,45,.15); border:1px solid rgba(232,0,45,.3);
  border-radius:50px; padding:.3rem .9rem;
  font-size:.75rem; color:var(--crimson2); font-weight:600;
  letter-spacing:1px; text-transform:uppercase; margin-bottom:1.2rem;
}
.live-dot {
  width:8px;height:8px; background:var(--crimson2); border-radius:50%;
  animation:blink 1.2s ease-in-out infinite; box-shadow:0 0 6px var(--crimson2);
}
@keyframes blink { 0%,100%{opacity:1;}50%{opacity:.2;} }
.hero-title {
  font-size:clamp(2.4rem,5vw,4rem); font-weight:900;
  color:#fff; line-height:1.1; margin-bottom:1rem;
}
.hero-title .highlight {
  background:linear-gradient(90deg,var(--crimson2),var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-desc { color:var(--text-muted-custom); font-size:1rem; line-height:1.75; max-width:480px; margin-bottom:2rem; }
.btn-primary-hero {
  background:linear-gradient(135deg,var(--crimson),#b0001f);
  border:none; color:#fff; font-weight:600; font-size:.9rem;
  padding:.75rem 2rem; border-radius:50px;
  box-shadow:0 6px 24px rgba(232,0,45,.45); transition:all .3s;
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
}
.btn-primary-hero:hover {
  background:linear-gradient(135deg,var(--crimson2),var(--crimson));
  transform:translateY(-2px); box-shadow:0 10px 32px rgba(232,0,45,.6); color:#fff;
}
.btn-outline-hero {
  background:transparent; border:2px solid rgba(255,255,255,.3);
  color:#fff; font-weight:600; font-size:.9rem;
  padding:.72rem 2rem; border-radius:50px; transition:all .3s;
  display:inline-flex; align-items:center; gap:8px;
  backdrop-filter:blur(6px); text-decoration:none;
}
.btn-outline-hero:hover { border-color:var(--crimson2); background:rgba(232,0,45,.15); color:#fff; transform:translateY(-2px); }
.hero-stats { display:flex; gap:2rem; margin-top:2.5rem; }
.stat-item { text-align:left; }
.stat-num { font-family:'Rajdhani',sans-serif; font-size:1.8rem; font-weight:800; color:#fff; line-height:1; }
.stat-num span { color:var(--crimson2); }
.stat-label { font-size:.72rem; color:var(--text-muted-custom); letter-spacing:1px; text-transform:uppercase; }

/* ── SECTION SHARED ── */
.section-title { font-size:2.2rem; font-weight:800; position:relative; display:inline-block; }
.section-title::after {
  content:''; position:absolute; bottom:-6px; left:0; right:0;
  height:3px; background:linear-gradient(90deg,var(--crimson),transparent); border-radius:2px;
}
.section-label { font-size:.72rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--crimson); margin-bottom:.5rem; }

/* ── LIVE TV ── */
#live-tv { background:var(--light-bg); padding:90px 0; }
.tv-card { background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.12); border:1px solid rgba(0,0,0,.06); }
.tv-header { background:linear-gradient(135deg,var(--navy),#12195a); padding:14px 20px; display:flex; align-items:center; gap:10px; }
.tv-dot { width:10px;height:10px;border-radius:50%; }
.tv-controls { display:flex; gap:6px; }
.tv-title { color:rgba(255,255,255,.75); font-size:.8rem; flex:1; text-align:center; letter-spacing:1px; }
.tv-live-badge {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--crimson); border-radius:4px; padding:2px 8px;
  font-size:.65rem; font-weight:700; color:#fff; letter-spacing:1px;
}
.video-wrapper { position:relative; width:100%; padding-bottom:56.25%; }
.video-wrapper iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }
.tv-footer { padding:12px 20px; background:var(--navy); display:flex; align-items:center; justify-content:space-between; }
.tv-footer-text { color:rgba(255,255,255,.5); font-size:.75rem; }
.channel-badge {
  background:rgba(232,0,45,.15); border:1px solid rgba(232,0,45,.3);
  border-radius:50px; padding:3px 12px; font-size:.72rem; font-weight:600; color:var(--crimson2);
}
.feature-card {
  background:#fff; border-radius:16px; padding:1.5rem;
  border:1px solid rgba(0,0,0,.06); box-shadow:0 4px 20px rgba(0,0,0,.06);
  transition:all .3s; height:100%;
}
.feature-card:hover { transform:translateY(-4px); box-shadow:0 12px 36px rgba(0,0,0,.12); }
.feature-icon {
  width:50px;height:50px;
  background:linear-gradient(135deg,rgba(232,0,45,.12),rgba(232,0,45,.05));
  border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; color:var(--crimson); margin-bottom:1rem;
}
.feature-card h6 { font-weight:700; margin-bottom:.35rem; }
.feature-card p { font-size:.82rem; color:#6b7280; margin:0; }

/* ── DRAW ── */
#draw {
  background:linear-gradient(160deg,var(--navy) 0%,#12195a 60%,#1a0a3d 100%);
  padding:90px 0; position:relative; overflow:hidden;
}
#draw::before {
  content:''; position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:28px 28px;
}
#draw .section-title { color:#fff; }
#draw .section-title::after { background:linear-gradient(90deg,var(--crimson2),transparent); }
.draw-card {
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:24px; padding:2.5rem;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.draw-input-wrap label {
  font-size:.75rem; font-weight:600; color:rgba(255,255,255,.7);
  letter-spacing:.5px; text-transform:uppercase;
  margin-bottom:.5rem; display:block;
}
.draw-input {
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  border-radius:12px; color:#fff; padding:.75rem 1rem;
  font-size:.9rem; width:100%; transition:all .3s;
}
.draw-input:focus {
  outline:none; border-color:var(--crimson2);
  background:rgba(255,255,255,.12); box-shadow:0 0 0 3px rgba(232,0,45,.2);
}
.draw-input::-webkit-calendar-picker-indicator { filter:invert(1) opacity(.6); cursor:pointer; }
.btn-find-draws {
  background:linear-gradient(135deg,var(--crimson),#b0001f);
  border:none; color:#fff; font-weight:700; font-size:.95rem;
  padding:.85rem 2.5rem; border-radius:50px; width:100%;
  box-shadow:0 6px 24px rgba(232,0,45,.45); transition:all .3s;
  display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
}
.btn-find-draws:hover {
  background:linear-gradient(135deg,var(--crimson2),var(--crimson));
  transform:translateY(-2px); box-shadow:0 10px 32px rgba(232,0,45,.6); color:#fff;
}
.draw-logo-wrap {
  width:80px;height:80px;
  background:linear-gradient(135deg,var(--crimson),#7b0015);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 40px rgba(232,0,45,.5); margin:0 auto 1.5rem;
  font-family:'Rajdhani',sans-serif; font-size:1.2rem; font-weight:900; color:#fff;
}
.draw-stat {
  text-align:center; padding:1.5rem;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; flex:1;
}
.draw-stat-num { font-family:'Rajdhani',sans-serif; font-size:2rem; font-weight:800; color:#fff; }
.draw-stat-num span { color:var(--crimson2); }
.draw-stat-label { font-size:.72rem; color:rgba(255,255,255,.5); letter-spacing:1px; text-transform:uppercase; }

/* ── CONTACT ── */
#contact { background:#fff; padding:90px 0; }
.contact-info-card {
  background:linear-gradient(135deg,var(--navy),#12195a);
  border-radius:20px; padding:2.5rem; height:100%; position:relative; overflow:hidden;
}
.contact-info-card::before {
  content:''; position:absolute; width:200px; height:200px;
  background:rgba(232,0,45,.1); border-radius:50%; bottom:-50px; right:-50px;
}
.contact-info-card h3 { color:#fff; margin-bottom:.5rem; }
.contact-info-card > p { color:var(--text-muted-custom); font-size:.9rem; margin-bottom:2rem; }
.contact-item { display:flex; align-items:flex-start; gap:14px; margin-bottom:1.4rem; }
.contact-icon {
  width:42px;height:42px;min-width:42px;
  background:rgba(232,0,45,.15); border:1px solid rgba(232,0,45,.3);
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  color:var(--crimson2); font-size:1.05rem;
}
.contact-item-text h6 { color:#fff; margin:0 0 3px; font-size:.88rem; font-weight:600; }
.contact-item-text span { color:var(--text-muted-custom); font-size:.82rem; }
.contact-item-text a { color:var(--crimson2); text-decoration:none; font-size:.82rem; }
.contact-item-text a:hover { text-decoration:underline; }
.social-links { display:flex; gap:10px; margin-top:2rem; }
.social-btn {
  width:40px;height:40px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.7); font-size:1rem; transition:all .3s; text-decoration:none;
}
.social-btn:hover { background:var(--crimson); border-color:var(--crimson); color:#fff; }
.contact-form-card {
  background:#fff; border-radius:20px; padding:2.5rem;
  box-shadow:0 10px 40px rgba(0,0,0,.08); border:1px solid rgba(0,0,0,.06);
}
.form-label-custom { font-size:.78rem; font-weight:600; color:#374151; letter-spacing:.3px; margin-bottom:.4rem; display:block; }
.form-control-custom {
  border:1.5px solid #e5e7eb; border-radius:10px;
  padding:.75rem 1rem; font-size:.88rem; color:#1a1a2e;
  transition:all .3s; background:#fafbff; width:100%;
}
.form-control-custom:focus { outline:none; border-color:var(--crimson); box-shadow:0 0 0 3px rgba(232,0,45,.12); background:#fff; }
.form-control-custom::placeholder { color:#9ca3af; font-size:.85rem; }
.btn-send {
  background:linear-gradient(135deg,var(--crimson),#b0001f);
  border:none; color:#fff; font-weight:700; font-size:.95rem;
  padding:.85rem 2.5rem; border-radius:50px; width:100%;
  box-shadow:0 6px 24px rgba(232,0,45,.35); transition:all .3s;
  display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
}
.btn-send:hover { background:linear-gradient(135deg,var(--crimson2),var(--crimson)); transform:translateY(-2px); box-shadow:0 10px 32px rgba(232,0,45,.5); color:#fff; }

/* ── FOOTER ── */
footer { background:var(--navy); border-top:1px solid rgba(255,255,255,.06); padding:2.5rem 0 1.5rem; }
.footer-logo-wrap {
  width:48px;height:48px;
  background:linear-gradient(135deg,var(--crimson),#7b0015);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Rajdhani',sans-serif; font-size:1rem; font-weight:900; color:#fff;
  box-shadow:0 0 20px rgba(232,0,45,.4);
}
footer p, footer a { color:rgba(255,255,255,.5); font-size:.82rem; }
footer a { text-decoration:none; transition:color .2s; }
footer a:hover { color:var(--crimson2); }
footer h6 { color:#fff; font-weight:700; font-size:.9rem; margin-bottom:1rem; }
.footer-link-list { list-style:none; padding:0; margin:0; }
.footer-link-list li { margin-bottom:.5rem; }
.footer-divider { border-color:rgba(255,255,255,.08); }

/* ── SCROLL TO TOP ── */
#scrollTop {
  position:fixed; bottom:28px; right:28px;
  width:46px; height:46px;
  background:linear-gradient(135deg,var(--crimson),#b0001f);
  border:none; border-radius:50%; color:#fff; font-size:1.1rem;
  box-shadow:0 6px 20px rgba(232,0,45,.45);
  display:none; align-items:center; justify-content:center;
  cursor:pointer; z-index:9999; transition:all .3s;
}
#scrollTop.visible { display:flex; }
#scrollTop:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(232,0,45,.6); }

/* ── ANIMATIONS ── */
.fade-up { opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }

@media(max-width:768px) {
  .hero-stats { gap:1.2rem; }
  .stat-num { font-size:1.4rem; }
  .draw-card { padding:1.5rem; }
  .contact-info-card, .contact-form-card { padding:1.8rem; }
}