/* ====== GLOBAL THEME: CINEMATIC JUNGLE ====== */
html { background: none; }
:root{
  --bg-1: #04130f;             /* deep jungle */
  --bg-2: #0b241c;             /* moss */
  --bg-3: #0f2e23;             /* canopy shadow */
  --surface: rgba(11, 28, 22, 0.78);
  --glass: rgba(255,255,255,0.05);
  --muted: #cfd8d3;
  --accent: #e9d08b;           /* warm gold text */
  --accent-strong: #f2d786;    /* brighter gold */
  --accent-glow: rgba(242, 215, 134, 0.4);
  --leaf-1: #1b5e3b;
  --leaf-2: #144f35;
  --vine: rgba(19, 64, 46, 0.55);
  --max-width: 1100px;
  --radius: 16px;
  --gap: 28px;
}

/* Typography: Cardo + Cinzel Decorative */
*{box-sizing:border-box}
html,body{height:100%}
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: var(--accent);
  overflow-x: hidden;
  background:
    radial-gradient(800px 400px at 20% 10%, rgba(255,255,255,0.03), transparent 60%),
    radial-gradient(800px 400px at 80% 20%, rgba(255,240,180,0.05), transparent 60%),
    linear-gradient(160deg, #02150c 0%, #042a17 40%, #0b3a23 80%, #0a1b13 100%);
  background-attachment: fixed;
  background-size: 600% 600%;
  animation: bgShift 36s ease-in-out infinite;
  position: relative;
}





@keyframes bgShift {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Subtle drifting jungle mist layers */
body::before,
body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(60vw 40vh at 20% 20%, rgba(255,255,255,0.035), transparent 60%),
    radial-gradient(70vw 50vh at 80% 10%, rgba(255,255,255,0.03), transparent 65%);
  filter: blur(18px);
  animation: mist 35s ease-in-out infinite;
}
body::after{
  background:
    radial-gradient(40vw 30vh at 30% 80%, rgba(255,255,255,0.03), transparent 60%),
    radial-gradient(50vw 30vh at 70% 85%, rgba(255,255,255,0.025), transparent 65%);
  animation-duration: 48s;
  mix-blend-mode: screen;
  opacity: .8;
}
@keyframes mist {
  0%,100% { transform: translateY(-1%) translateX(0%); }
  50%     { transform: translateY(2%) translateX(1%); }
}

/* Scrollbar hidden (unchanged) */
body { scrollbar-width: none; -ms-overflow-style: none; }
body::-webkit-scrollbar { display: none; }

html, body { margin: 0; padding: 0; height: 100vh; overflow-x: hidden; }

/* ====== PARTICLES (canvas placeholder; JS optional) ====== */
#particles {
  position: fixed; inset: 0;
  z-index: 1; display: block; pointer-events: none;
  mix-blend-mode: lighten;
}
header, main, footer { position: relative; z-index: 2; }


/* ====== HEADER ====== */
header{
  display:flex; align-items:center; justify-content:center;
  padding:18px 28px;
  backdrop-filter: blur(10px);
  background:
    linear-gradient(180deg, rgba(18,40,32,0.65), rgba(14,34,26,0.25), transparent 80%);
  position:sticky; top:0; z-index:60;
  border-bottom: 1px solid rgba(226, 195, 115, 0.15);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}
.brand { display:flex; align-items:center; gap:12px; }
.brand img {
  height: 300px;
  width: auto;
  display: block;
  position: relative;
  top: 10px; /* pushes it slightly downward */
  z-index: 5;
}
header {
  height: 110px; /* fixed size */
  overflow: visible; /* allows logo to extend out */
}
.brand h3 {
  margin:0; font-weight:700; letter-spacing:0.6px; color:var(--accent);
  font-family: "Cinzel Decorative", serif; font-size:18px;
  text-shadow: 0 0 10px var(--accent-glow);
}


/* ====== COUNTDOWN ====== */
.countdown-container { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }

.countdown-title{
  font-family: "Cinzel Decorative", serif;
  font-size: 18px; font-weight:700; letter-spacing: 1.2px;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  }
@media (max-width:600px){ .countdown-title{ font-size:15px } }

.countdown {
  display:flex; align-items:center; justify-content:center; gap:16px;
  background: linear-gradient(180deg, rgba(18,40,32,0.55), rgba(18,40,32,0.35));
  border: 1px solid rgba(226, 195, 115, 0.18);
  border-radius: 12px;
  padding: 6px 14px;
  font-weight: 700;
  color: var(--accent);
  font-size: 15px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
.countdown .time { display:flex; flex-direction:column; align-items:center; min-width:52px; }
.countdown .time span {
  font-size: 20px; font-weight: 800; letter-spacing: 0.5px;
  text-shadow: 0 0 10px var(--accent-glow);
  color: #fffbe6;
}
.countdown .time small { font-size: 11px; color: var(--muted); margin-top:2px; }
@media (max-width:600px){
  .countdown{ gap:10px; font-size:13px; padding:6px 10px }
  .countdown .time span{ font-size:18px }
}
/* ====== COUNTDOWN SECTION (separate placement) ====== */
.countdown-section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}

.countdown-section .countdown-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* ====== LAYOUT ====== */
.container{ max-width:var(--max-width); margin:56px auto; padding:0 20px; }

.hero { margin:0 auto 36px; }
.hero .slider {
  position:relative; border-radius:20px; overflow:hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
  outline: 1px solid rgba(226, 195, 115, 0.15);
  background:
    linear-gradient(180deg, rgba(10,30,24,0.55), rgba(10,30,24,0.35));
}
.hero .slides { display:flex; transition: transform .55s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.hero .slides img { width:100%; height:520px; object-fit:cover; flex-shrink:0; display:block; }

.arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:999px;
  display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(10, 8, 1, 0.18), rgba(1, 5, 4, 0.6));
  border:1px solid rgba(226,195,115,0.35);
  color: #ffffff; cursor:pointer;
  transition:transfor m .15s, background .15s, box-shadow .15s;
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
}
.arrow:hover{ transform:translateY(-50%) scale(1.06); box-shadow: 0 14px 34px rgba(0,0,0,0.5); }
.arrow.prev{ left:16px } .arrow.next{ right:16px }

/* ====== HERO CTA ====== */
.hero-cta{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:24px; z-index:40;
  display:flex; flex-direction:row; align-items:center; justify-content:center;
  gap:20px; padding:14px 24px; border-radius:16px;
  background: linear-gradient(180deg, rgba(11,28,22,0.75), rgba(11,28,22,0.55));
  border:1px solid rgba(226,195,115,0.22); backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  min-width:320px; max-width:90vw; text-align:center; flex-wrap:nowrap;
}
.hero-cta .cta-btn {
  background: linear-gradient(180deg, rgba(226,195,115,0.25), rgba(18,40,32,0.8));
  border: 1px solid rgba(226,195,115,0.35);
  color: #ffffff; /* orange instead of yellow */
  padding: 10px 22px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  font-size: 15px;
  text-shadow: 0 0 8px var(--accent-glow);
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  transition: all 0.2s ease;
}

.hero-cta .cta-btn:hover {
  background: linear-gradient(180deg, rgba(226,195,115,0.4), rgba(18,40,32,0.6));
  color: #fffbe6;
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(226,195,115,0.4);
}

.counter-card{ display:flex; gap:12px; align-items:center; color:var(--muted); font-weight:700; font-size:14px; }
.counter-text{ text-align:left; }
.counter-label{ font-size:12px; color:var(--muted); }
.counter-number{
  font-weight:900; color:#fffbe6; font-size:16px;
  text-shadow: 0 0 10px var(--accent-glow);
}

/* ====== ABOUT ====== */
.about{
  margin-top:12px; background: var(--surface);
  border-radius:18px; padding:42px;
  border:1px solid rgba(226,195,115,0.12);
  box-shadow: 0 26px 60px rgba(0,0,0,0.55);
  display:flex; flex-direction:column; align-items:center; gap:24px;
}
.about h1 {
  margin: 0 0 8px;
  font-size: 30px;
  color: #ff983f; /* orange instead of yellow */
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow: 0 0 8px rgba(255, 152, 63, 0.35);
}

.about p{ color:var(--muted); margin:0 0 12px; font-size:16px; max-width:900px; text-align:center; }
.about-video{
  width:100%; max-width:900px; border-radius:16px; overflow:hidden; position:relative;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
  border:1px solid rgba(226,195,115,0.14); backdrop-filter: blur(10px);
}
.about-video video{ width:100%; height:auto; display:block; border-radius:16px; object-fit:contain; max-height:60vh; }

/* ====== FOOTER ====== */
footer{ margin-top:48px; padding:40px 20px; text-align:center; color:var(--muted);
  border-top:1px solid rgba(226,195,115,0.12);
  background: linear-gradient(180deg, transparent, rgba(10,30,24,0.35));
}
.socials{ display:flex; gap:16px; justify-content:center; margin-bottom:18px }
.socials a{
  display:inline-grid; place-items:center; width:44px; height:44px; border-radius:10px;
  background: var(--glass);
  border:1px solid rgba(226,195,115,0.12);
  color:var(--accent); transition: transform .12s, box-shadow .12s, background .2s;
}
.socials a:hover{ transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,0.45); }
.socials a.instagram:hover{ background: linear-gradient(45deg,#f58529,#dd2a7b,#8134af); color:white; }
.socials a.whatsapp1:hover{ background: #18f239; color:white; }
.socials a.twitter:hover{ background: #1da1f2; color:white; }

.footer-note { font-size:14px; color:var(--muted); }

/* Floating WhatsApp button (unchanged except slight shadow tone) */
.whatsapp{
  position:fixed; right:20px; bottom:20px; z-index:80;
  width:56px;height:56px;border-radius:999px;
  background:#25D366; color:#ffffff; display:grid; place-items:center;
  box-shadow:0 18px 40px rgba(37,211,102,0.18); border:1px solid rgba(0,0,0,0.12);
  text-decoration:none;
}

/* ====== RESPONSIVE ====== */
@media (max-width:900px){
  .hero .slides img{ height:420px }
  header{ padding:14px 18px }
  .container{ margin-top:28px }
  .hero-cta{ left:50%; transform:translateX(-50%); bottom:12px; padding:10px; min-width:200px }
  .hero .slides img{ height:360px }
}
@media (max-width:600px){
  .hero-cta{ gap:12px; padding:12px 16px; min-width:280px; flex-direction: row }
  .hero-cta .cta-btn{ font-size:15px; padding:10px 20px }
  .counter-card{ font-size:12px }
}

/* Keep your existing utility tweaks */
main.container { margin-top: 30px; }
/* ====== GLOBAL JUMANJI 3D TEXT STYLE ====== */



.countdown-title {
    color: #ff983f; /* orange instead of yellow */

  font-size: 25px;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}

/* ====== REALISTIC JUNGLE OVERLAY ====== */
/* Foreground vines layer for realism */
body::before {
  background:
    url('https://www.shutterstock.com/shutterstock/videos/20038576/thumb/7.jpg?ip=x480') repeat-x bottom / contain,
    url('https://wallpapers.com/images/hd/jungle-background-0f76mjjyweba3i2g.jpg') center / cover no-repeat,
    linear-gradient(180deg, rgba(0,0,0,0.4), transparent 60%);
  mix-blend-mode: normal;
  opacity: 0.4;
  animation: sway 24s ease-in-out infinite alternate;
}


@keyframes sway {
  0% { background-position: 0 0; }
  100% { background-position: 100px 0; }
}

/* optional light shafts for realism */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(800px 400px at 30% -10%, rgba(255,255,200,0.06), transparent 70%),
              radial-gradient(1000px 600px at 80% -5%, rgba(255,240,170,0.04), transparent 80%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0.7;
}

@media (max-width: 600px) {
  body {
    background:
      linear-gradient(160deg, #2a0000 0%, #5b0000 60%, #1a0000 100%) !important;
  }
  body::before {
    opacity: 0.25 !important; /* still fine */
  }
  body::after {
    opacity: 0.5 !important;
  }
}


/* === Restore Modern Font for All Text === */
h1, h2, h3, h4, h5, h6,
.countdown-title,
.brand h3,
.about h1,
footer, p, a, span, button, div {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  -webkit-text-fill-color: unset !important;
  background: none !important;
}

h1 {


}

.whatsapp-group {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px 20px;
}

.glass-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 40px; /* circular edges */
  padding: 60px 40px;
  text-align: center;
  max-width: 500px;
  box-shadow: 0 0 25px rgba(255, 0, 0, 0.4), inset 0 0 30px rgba(255, 0, 0, 0.2);
  transition: 0.4s ease;
}

.glass-card:hover {
  box-shadow: 0 0 35px rgba(255, 60, 60, 0.6), inset 0 0 40px rgba(255, 0, 0, 0.3);
}

.glass-card h1 {
  font-family: 'Cinzel Decorative', serif;
    color: #ff983f; /* orange instead of yellow */
  font-size: 1.8rem;
  margin-bottom: 15px;
}

.glass-card p {
  color: #ffd6d6;
  font-size: 1.1rem;
  margin-bottom: 25px;
}

.glass-card .cta-btn {
  display: inline-block;
  background: #e10404;
  color: white;
  padding: 14px 34px;
  border-radius: 30px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px #b1090e;
}