:root {
            --color-bg: #050e08;
            --color-primary: #eab308;
            --color-secondary: #064e3b;
            --color-text: #ecfccb;
            --color-text-muted: #6ee7b7;
            --font-heading: 'Rye', serif;
            --font-body: 'Oxanium', cursive;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            background-color: var(--color-bg);
            color: var(--color-text);
            font-family: var(--font-body);
            overflow-x: hidden;
            min-height: 100vh;
        }

        .bg-video {
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.9;
            z-index: -2;
        }
        .bg-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: -1;
        }

        
        .vine-container {
            position: fixed;
            top: -20px;
            left: 0;
            width: 100%;
            height: 150px;
            z-index: 40;
            pointer-events: none;
            background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,0 Q30,60 50,30 T90,80' stroke='%232d5a3f' stroke-width='4' fill='none'/%3E%3Cpath d='M120,0 Q140,90 160,40 T200,100' stroke='%231e402a' stroke-width='5' fill='none'/%3E%3Cpath d='M250,0 Q280,70 300,20 T350,90' stroke='%232d5a3f' stroke-width='3' fill='none'/%3E%3C/svg%3E");
            background-repeat: repeat-x;
        }

        @keyframes falling-leaf {
    0% {
        transform: translate3d(0, -5vh, 0) rotateZ(0deg) rotateY(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.5;
    }
    50% {
        transform: translate3d(-20px, 50vh, 0) rotateZ(80deg) rotateY(30deg);
        opacity: 0.5;
    }
    100% {
        transform: translate3d(20px, 110vh, 0) rotateZ(160deg) rotateY(-20deg);
        opacity: 0;
    }
}

  .leaf {
    position: fixed;
    width: 20px;
    height: 34px;

    /* Thoda depth + light reflection */
    background: radial-gradient(circle at 20% 15%, #5d876c 0, #106931 30%, #0d5126 70%, #0f3e22 100%);

    /* 👉 Realistic leaf outline */
    clip-path: polygon(
        50% 0%,   /* top tip */
        75% 8%,
        92% 25%,
        100% 50%, /* right middle */
        85% 80%,
        60% 100%, /* bottom tip */
        40% 100%,
        15% 80%,
        0% 50%,   /* left middle */
        8% 25%,
        25% 8%
    );

    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transform-origin: center;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

/* Leaf vein (center wali line) */
.leaf::before {
    content: "";
    position: absolute;
    top: 10%;
    left: 50%;
    width: 2px;
    height: 80%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    filter: blur(0.4px);
}

/* Slight side veins / texture */
.leaf::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.12) 0,
            transparent 40%
        );
    opacity: 0.6;
    mix-blend-mode: screen;
}


        nav {
            position: fixed;
            top: 0;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            padding: 0.9rem 2rem;  
            background: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent);
            z-index: 100;
        }

        /* .logo {
            font-family: var(--font-heading);
            font-size: 1.8rem;
            color: var(--color-primary);
            letter-spacing: 2px;
            cursor: pointer;
            text-shadow: 0 0 15px var(--color-primary), 0 0 30px rgba(234,179,8,0.3);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .logo-avatar {
            height: 50px;
            width: 50px;
            border-radius: 50%;
            border: 2px solid var(--color-primary);
            background: linear-gradient(135deg, var(--color-primary), #64748b);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.2rem;
            color: #000;
            box-shadow: 0 0 20px rgba(234,179,8,0.3);
        } */

.logo {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.logo-avatar {
    width: 110px;          
    height: 110px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.logo-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;

    /* JUMANJI GLOW */
    filter:
        drop-shadow(0 0 12px rgba(234,179,8,0.6))
        drop-shadow(0 0 30px rgba(234,179,8,0.35));
}


.logo-text {
    font-family: var(--font-heading);
    font-size: 2rem;
    letter-spacing: 2px;
    color: var(--color-primary);
    text-shadow: 
        0 0 15px var(--color-primary),
        0 0 30px rgba(234,179,8,0.35);
}

        .nav-links {
            display: flex;
            gap: 2rem;
        }
        .nav-links a {
            color: rgba(255,255,255,0.7);
            text-decoration: none;
            font-family: var(--font-heading);
            font-size: 0.9rem;
            letter-spacing: 1px;
            transition: all 0.3s;
            cursor: pointer;
        }
        .nav-links a:hover, .nav-links a.active {
            color: var(--color-primary);
            text-shadow: 0 0 10px var(--color-primary);
        }

        .mobile-menu-btn {
            display: none;
            color: var(--color-primary);
            cursor: pointer;
        }
        .mobile-menu {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(0,0,0,0.95);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 2rem;
            z-index: 99;
            transform: translateY(-100%);
            transition: transform 0.3s;
        }
        .mobile-menu.open { transform: translateY(0); }
        .mobile-menu a { color: var(--color-text); font-family: var(--font-heading); font-size: 1.5rem; text-decoration: none; cursor: pointer; }

        main {
            position: relative;
            z-index: 10;
            max-width: 1200px;
            margin: 0 auto;
            padding: 100px 0px 0px 0px;
            min-height: 100vh;
        }

        .page { display: none; }
        .page.active { display: block; }

        h1,h2,h3,h4 { font-family: var(--font-heading); text-transform: uppercase; }

        /* hero / buttons / cards etc. - reuse original look */
        .hero-content { text-align: center; padding: 15vh 0; }
        .sub-title { color: var(--color-primary); letter-spacing: 0.7em; font-size: 1.8rem; margin-bottom: 2rem; opacity: 0.8; text-shadow: 0 0 0px var(--color-primary); }
        .main-title { font-size: 7rem; line-height: 1.5; color: transparent; background: linear-gradient(to bottom, #fef3c7, #d97706); -webkit-background-clip: text; background-clip: text; margin-bottom: 1.5rem; text-shadow: 0 0 0px rgba(255, 208, 0, 0.659); filter: drop-shadow(0 0 0px rgba(255, 191, 0, 0.73)); }
        .hero-text { font-size: 1.5rem; color: var(--color-text-muted); max-width: 600px; margin: 0 auto 3rem; text-shadow: 0 0 10px rgba(110,231,183,0.2); }

        .hero-buttons { display:flex; gap:3.5rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }
        button { cursor:pointer; font-family: var(--font-heading); transition: all .3s; border: none; font-size:1.3rem; padding: 2rem 3rem; }

        .btn-primary { background: var(--color-primary); color: #000; border: 2px solid var(--color-primary); box-shadow: 0 0 30px rgba(234,179,8,0.4); }
        .btn-primary:hover { background: transparent; color: var(--color-primary); box-shadow: 0 0 50px rgba(234,179,8,0.6); text-shadow: 0 0 10px var(--color-primary); }
        .btn-secondary { background: var(--color-primary); color: #000; border: 2px solid var(--color-primary); box-shadow: 0 0 30px rgba(234,179,8,0.4); }
        .btn-secondary:hover { background: transparent; color: var(--color-primary); box-shadow: 0 0 50px rgba(234,179,8,0.6); text-shadow: 0 0 10px var(--color-primary); }
.btn-secondary a {
    text-decoration: none;
    color: inherit; /* Takes button text color */
}

        /* countdown */
        .countdown-container { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:20px; max-width:800px; margin:4rem auto; }
        .countdown-box { background: rgba(6,78,59,0.3); border:2px solid var(--color-primary); padding:20px; text-align:center; box-shadow:0 0 20px rgba(234,179,8,0.2); }
        .countdown-number { font-size:3.5rem; color:var(--color-primary); font-weight:bold; font-family:var(--font-heading); text-shadow:0 0 5px var(--color-primary); }
        .countdown-label { color:#6ee7b7; font-size:1.75rem; letter-spacing:2px; margin-top:10px; }
        

        .section-header { font-size:3rem; color:var(--color-primary); text-align:center; text-shadow:0 0 0px rgba(234,179,8,0.6); margin-bottom:3rem; }

        .info-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem; }
        .info-box { background: rgba(0,0,0,0.4); border:1px solid #064e3b; padding:1.5rem; }
        .info-box h3 { color: var(--color-primary); margin-bottom:.5rem; text-shadow:0 0 10px var(--color-primary); }
        .info-box p { font-size:.9rem; color:#a7f3d0; }

        /* events + cards */
        /* events + cards - CLEAN VERSION */

.group-header {
    max-width: 1200px;
    margin: 80px auto 30px;
    font-size: 1.5rem;
    color: var(--color-primary);
    text-shadow: 0 0 10px rgba(234,179,8,0.4);
}
/* =======================
   MOBILE RESPONSIVE PATCH
======================= */

@media (max-width: 900px) {

  /* Navbar spacing fix */
  nav {
    padding: 0.5rem 1rem;
  }

  /* Logo resize for mobile */
  .logo-avatar {
    width: 60px;
    height: 60px;
  }

  .logo-text {
    font-size: 1.2rem;
  }

  /* Hide desktop links */
  .nav-links {
    display: none;
  }

  /* Show hamburger */
  .mobile-menu-btn {
    display: block;
    font-size: 2rem;
  }
}


/* Mobile menu slide fix */
@media (max-width: 900px) {
  .mobile-menu {
    transform: translateY(-100%);
  }
  .mobile-menu.open {
    transform: translateY(0);
  }
}




/* Countdown smaller */
@media (max-width: 768px) {
  .countdown-number {
    font-size: 2rem;
  }
  .countdown-label {
    font-size: 1rem;
  }
}


/*hackathon card*/
/* ===== Wrapper (Center Card) ===== */
.hackathon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem 1rem;
}

/* ===== Main Card ===== */
.hackathon-card {
    max-width: 480px;
    width: 100%;
    margin: auto;

    background-color:rgba(0,0,0,0.8);

    border-radius: 20px;
    padding: 2rem;
    min-height: 260px;
    position: relative;


    backdrop-filter: blur(10px);

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    transition: all 0.4s ease;
}

/* ===== Neon Glow Border ===== */
.hackathon-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 20px;
    z-index: -1;
    opacity: 0.5;
    filter: blur(6px);
    transition: opacity 0.4s ease;
}

/* ===== Hover Effect ===== */
.hackathon-card:hover {
    transform: translateY(-10px) scale(1.04);

}

.hackathon-card:hover::before {
    opacity: 1;
}

/* ===== Hackathon Type Badge ===== */
.hackathon-type {
    align-self: flex-start;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(16,185,129,0.18);
    color: #34d399;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 0.8rem;
    text-shadow: 0 0 8px rgba(16,185,129,0.4);
}

/* ===== Title ===== */
.hackathon-card h3 {
    font-size: 1.8rem;
    color: #eab308;
    margin-bottom: 0.6rem;
    text-shadow: 0 0 18px rgba(234,179,8,0.45);
}

/* ===== Description ===== */
.hackathon-card p {
    color: #a7f3d0;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ===== Info Section ===== */
.hackathon-info {
    margin-top: 1rem;
}

.hackathon-info p {
    margin: 0.4rem 0;
    font-size: 0.9rem;
}

/* ===== Button ===== */

/* Buttons container */
.hackathon-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Common button style (Explore + Join) */
.hackathon-btn {
    padding: 10px 26px;
    border-radius: 30px;
    background: linear-gradient(90deg, #10b981, #eab308);
    color: #020617;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Hover effect */
.hackathon-btn:hover {
    transform: scale(1.12);
    box-shadow: 0 0 25px rgba(234,179,8,0.6);
}

/* Join button (slightly different glow for highlight) */
.join-btn {
    background: linear-gradient(90deg, #eab308, #10b981);
}


/* ===== Mobile Responsive ===== */
@media (max-width: 600px) {
    .hackathon-card {
        max-width: 92%;
        padding: 1.5rem;
    }

    .hackathon-card h3 {
        font-size: 1.5rem;
    }
}



/* Two-column about section → single column */
@media (max-width: 900px) {
  div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}


/* Events grid → single column */
@media (max-width: 900px) {
  .events-grid {
    grid-template-columns: 1fr;
    padding: 0 1rem;
  }
}

    

/* ===== EVENTS GRID (FINAL, FIXED) ===== */

.events-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(480px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto 100px;
}


/* Single card → align to START (like Zircon) */
.events-grid.single {
    grid-template-columns: repeat(2, minmax(480px, 1fr));
    justify-items: start;
}


/* Card width consistency */
.event-card {
    width: 100%;
    max-width: 560px;
}




/* ===== CENTER EVERYTHING LIKE ZIRCON ===== */
.levels-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.event-card {
    background: rgba(0,0,0,0.8);
    border:2px solid #064e3b;
    border-radius: 15px;
    padding:2rem;
    transition:all .3s;
    box-shadow:0 0 20px rgba(234,179,8,0.1);

    /* equal height + nice layout */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 260px;   /* same base size sab ke liye */
}

.event-card:hover { 
    transform: translateY(-8px); 
    border-color:var(--color-primary); 
    box-shadow:0 0 40px rgba(234,179,8,0.3); 
}

.event-type { 
    color:#10b981; 
    font-size:.75rem; 
    font-weight:bold; 
    letter-spacing:2px; 
    margin-bottom:.5rem; 
    text-shadow:0 0 5px rgba(16,185,129,0.3); 
}

.event-card h3 { 
    font-size:1.8rem; 
    color:var(--color-primary); 
    margin-bottom:1rem; 
    text-shadow:0 0 15px rgba(234,179,8,0.4); 
}

.event-card p { 
    color:#a7f3d0; 
    font-size:.95rem; 
    margin-bottom:1.5rem; 
}

.join-btn { 
    background:transparent; 
    color:var(--color-primary); 
    border:1px solid var(--color-primary);
    border-radius: 15px; 
    padding:.7rem 1.5rem; 
    cursor:pointer; 
    font-family:var(--font-heading); 
    font-size:.85rem; 
    transition:all .3s; 
    box-shadow:0 0 15px rgba(234,179,8,0.2); 
}

.join-btn:hover { 
    background:var(--color-primary); 
    color:#000; 
    box-shadow:0 0 30px rgba(234,179,8,0.4); 
}
.group-header {
    font-size: 1.4rem;
    color: var(--color-primary);
    margin: 3rem 0 1.5rem;
    text-shadow: 0 0 10px rgba(234,179,8,0.4);
}

        /* team */
        .team-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
    gap: 3rem; 
    text-align: center; 
    margin-bottom: 50px; 
}
  /* .avatar-img {
    width: 110px;
} */

/* ================= GUARDIANS IMAGE FIX ================= */

.team-member {
    text-align: center;
}

.avatar-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;

    /* 🌿 JUMANJI JUNGLE BACKGROUND */
    background: radial-gradient(
        circle at top,
        #1f4d2b 0%,
        #0f2f1b 45%,
        #07150d 100%
    );

    border: 3px solid rgba(234,179,8,0.4);
    padding: 4px;

    box-shadow:
        0 0 20px rgba(234,179,8,0.3),
        inset 0 0 14px rgba(0,0,0,0.8);

    transition: all 0.35s ease;
}



.team-member:hover .avatar-img {
    border-color: var(--color-primary);
    transform: scale(1.05);
    box-shadow:
        0 0 25px rgba(234,179,8,0.6),
        0 0 50px rgba(234,179,8,0.25);
}

.team-member h3 {
    margin-top: 0.8rem;
    font-size: 0.95rem;
    color: var(--color-text);
}

.team-member p {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    letter-spacing: 1px;
}

/* MOBILE FIX */
@media (max-width: 768px) {
    .avatar-img {
        width: 95px;
        height: 95px;
    }
}


.avatar { 
    width: 120px; 
    height: 120px; 
    border-radius: 50%; 
    border: 3px solid rgba(234,179,8,0.3); 
    margin: 0 auto 1rem; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 2rem; 
    font-family: var(--font-heading); 
    color: var(--color-primary); 
    background: black; 
    transition: all 0.3s; 
}
.team-member:hover .avatar { 
    border-color: var(--color-primary); 
    box-shadow: 0 0 20px rgba(234,179,8,0.3); 
}
.team-member h3 { 
    color: var(--color-text); 
    margin-bottom: 0.5rem; 
    font-size: 1rem; 
}
.team-member p { 
    color: var(--color-text-muted); 
    font-size: 0.8rem; 
    letter-spacing: 1px; 
}
        /* contact */
        .contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:4rem; }
        .contact-info h1 { text-align:left; }
        .contact-desc { font-size:1.1rem; color:var(--color-text-muted); margin-bottom:3rem; }
        .contact-item { display:flex; align-items:center; gap:1.5rem; margin-bottom:2rem; }
        .icon-box { width:50px; height:50px; border-radius:50%; background:rgba(6,78,59,0.3); border:1px solid #065f46; display:flex; align-items:center; justify-content:center; color:var(--color-primary); }
        .contact-item h4 { color:var(--color-text); margin-bottom:.2rem; }
        .contact-item p { color:#6ee7b7; font-size:.9rem; }

        .contact-form-wrapper { background: rgba(0,0,0,0.6); border:1px solid #064e3b; padding:2rem; }
        .form-group { margin-bottom:1.5rem; }
        label { display:block; color:#10b981; font-family:var(--font-heading); font-size:.9rem; margin-bottom:.5rem; letter-spacing:1px; }
        input, textarea, select { width:100%; padding:.8rem; background:rgba(0,0,0,0.5); border:1px solid #064e3b; color:var(--color-text); font-family:var(--font-body); font-size:1rem; transition:border-color .3s; }
        input:focus, textarea:focus, select:focus { border-color:var(--color-primary); box-shadow:0 0 0px rgba(234,179,8,0.2); outline:none; }

        .btn-submit { width:100%; background:linear-gradient(to right, var(--color-primary), #d97706); color:black; font-weight:bold; padding:1rem; margin-top:1rem; box-shadow:0 0 0px rgba(234,179,8,0.3); }
        .btn-submit:hover { box-shadow:0 0 0px rgba(234,179,8,0.5); transform:translateY(-2px); }

        footer { margin-top:20px; border-top:2px solid rgba(234,179,8,0.2); background: rgba(0,0,0,0.6); backdrop-filter: blur(10px); padding:2rem 2rem; position:relative; z-index:0; }
        .footer-content { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem; }
        .footer-section h3 { color:var(--color-primary); margin-bottom:1.5rem; text-shadow:0 0 15px rgba(234,179,8,0.4); font-size:1.2rem; }
        .footer-section a, .footer-section p { color:#a7f3d0; text-decoration:none; margin-bottom:.8rem; font-size:.95rem; transition:color .3s; display:block; }
        .footer-bottom { max-width:1200px; margin:2rem auto 0; padding-top:1rem; border-top:1px solid rgba(234,179,8,0.1); text-align:center; color:#6ee7b7; font-size:.85rem; }

        .sound-toggle { position:fixed; bottom:1rem; right:1rem; font-family:monospace; font-size:.8rem; color:rgba(234,179,8,0.5); z-index:100; }

        /* popup
        .popup-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.7);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }
        .popup-overlay.open { display:flex; }
        .popup-box {
            background: #071009;
            color: var(--color-text);
            max-width: 720px;
            width: 90%;
            padding: 1.5rem;
            border-radius: 10px;
            border: 1px solid rgba(234,179,8,0.15);
            box-shadow: 0 8px 40px rgba(0,0,0,0.6);
            text-align: center;
        }
        .popup-box h2 { color: var(--color-primary); margin-bottom: .5rem; }
        .popup-box p { color: #a7f3d0; line-height:1.5; margin-bottom:1rem; } */

        @media (max-width: 768px) {
            .nav-links { display: none; }
            .mobile-menu-btn { display: block; }
            .main-title { font-size: 2.5rem; }
            .section-header { font-size: 1.8rem; }
            .contact-layout { grid-template-columns: 1fr; }
            .countdown-container { grid-template-columns: repeat(2, 1fr); }
            .team-grid { grid-template-columns: repeat(2, 1fr); }
            .hero-buttons { flex-direction: column; }
            .btn-primary, .btn-secondary { width: 100%; }
            .events-grid { grid-template-columns: 1fr; }
        }
        

.event-card:hover {
    transform: translateY(-8px);
    border-color: var(--color-primary);
    box-shadow: 0 0 40px rgba(234, 179, 8, 0.3);
}
.info-box {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #064e3b;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.info-box:hover {
    background: rgba(0, 0, 0, 0.6); /* Darken the background on hover */
    border-color: var(--color-primary); /* Highlight the border */
    transform: translateY(-5px); /* Slightly lift the box */
    box-shadow: 0 0 20px rgba(234, 179, 8, 0.3); /* Add a glowing effect */
}

.info-box h3 {
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    text-shadow: 0 0 0px var(--color-primary);
}

.info-box:hover h3 {
    text-shadow: 0 0 0px var(--color-primary); /* Enhance the glow of the title */
}

.info-box p {
    font-size: 1rem;
    color: #a7f3d0;
}

.info-box:hover p {
    color: #d1fae5; /* Slightly brighten the text color */
}

/* ========== EVENT CARD ==========
.event-card {
    background: linear-gradient(180deg,#0d1c10,#0a2716);
    border: 2px solid #6d4a26;
    border-radius: 12px;
    padding: 20px;
    width: 330px;
    color: #e9fbdc;
    font-family: "Oxanium", sans-serif;
    box-shadow: 0 4px 18px rgba(0,0,0,0.45), inset 0 0 8px rgba(255,210,100,0.06);
}
.event-card .event-type {
    font-size: 12px;
    letter-spacing: 2px;
    color:#71e6a8;
}
.event-card h3 {
    font-family: 'Rye', serif;
    font-size: 24px;
    color: #f6d47a;
    margin: 6px 0 10px;
}
.event-card p {
    font-size: 14px;
    color:#c8f7d6;
    margin-bottom:15px;
}
.join-btn {
    background: linear-gradient(180deg,#f3c04d,#d49a29);
    border: 2px solid #8a631a;
    font-family:'Rye', serif;
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
    color:#0d120b;
    transition: 0.2s ease;
}
.join-btn:hover { transform: scale(1.05); } */

/* ========== POPUP OVERLAY ========== */
.jumanji-overlay {
    position:fixed;
    font-size:smaller;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: none;
    margin-top: 70px;
    justify-content: center;
    backdrop-filter: blur(4px);
    z-index: 99999;
}
.jumanji-overlay.active { display: flex;
    align-items: center;     /* ✅ vertical centering */
}


/* Lock background when popup open */
body.popup-open {
    overflow: hidden;       /* ✅ scroll बंद */
    height: 100vh;
}

/* ========== POPUP BOX ========== */
.jumanji-popup {
    position: fixed;
    width: min(900px,95%);
    background: linear-gradient(#0a150d,#071109);
    border: 6px solid #553617;
    border-radius: 12px;
    display: grid;
    height:570px;
    grid-template-columns: 1fr 350px;
    gap: 20px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
    animation: popupIn .25s ease;
    overflow-y: auto;        /* ✅ allow popup scroll */
    max-height: 85vh;        /* ✅ fit screen */
}



/* popup entrance animation */
@keyframes popupIn {
    from { opacity:0; transform: scale(0.9) translateY(15px); }
    to   { opacity:1; transform: scale(1) translateY(0); }
}

/* LEFT SIDE CONTENT */
.popup-left {
    color:#f7e9c0;
    font-family: Georgia, serif;
    padding-right: 10px;
}
.popup-left h2 {
    font-family:'Rye', serif;
    font-size: 25px;
    margin-bottom: 10px;
    color:#f5cc72;
}
.popup-left h3 {
    color:#f5cc72;
    margin: 12px 0 6px;
}
.popup-left ul {
    margin-left:18px;
}
.popup-left li {
    margin-bottom:4px;
    font-size: 10px;
    line-height: 1.35;
}

/* RIGHT IMAGE */
.popup-right img {
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 10px;
    border: 4px solid rgba(0,0,0,0.4);
}

/* BUTTONS */
.popup-buttons {
    display:flex;
    gap:12px;
    margin-top:15px;
}
.popup-btn {
    padding: 10px 22px;
    border-radius:8px;
    cursor:pointer;
    font-family:'Rye', serif;
    border:2px solid #b6833a;
    background: linear-gradient(180deg,#3b2a1a,#2b1608);
    color:#f5d495;
}
.popup-btn.primary {
    background: linear-gradient(180deg,#f3c04d,#d49a29);
    border-color:#8a631a;
    color:#0d120b;
}
.popup-btn:hover { transform: translateY(-2px); }



/* ================= TABLET (769px – 1024px) ================= */
@media (min-width: 769px) and (max-width: 1024px) {

    main {
        padding: 100px 30px 0;
    }

    /* EVENTS GRID → 2 columns but flexible */
    .events-grid,
    .events-grid.single {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .event-card {
        max-width: 100%;
    }

    .event-card h3 {
        font-size: 1.6rem;
    }

    .event-card p {
        font-size: 0.95rem;
    }

    /* HERO */
    .main-title {
        font-size: 4rem;
    }

    /* TEAM */
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* POPUP */
    .jumanji-popup {
        width: 90%;
        grid-template-columns: 1fr 300px;
    }
}

/* ==================================================
   FINAL MASTER MOBILE PATCH – AADHAR XIV
   Place this at END of CSS
================================================== */

@media (max-width: 768px) {

  /* ===== NAVBAR ===== */
  nav {
    padding: 0.4rem 1rem;
  }

  .logo-avatar {
    width: 65px;
    height: 65px;
  }

  .logo-text {
    font-size: 1.5rem;
  }

  .nav-links {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
    font-size: 2rem;
  }

  /* ===== MAIN GLOBAL SPACING ===== */
  main {
    padding: 80px 15px 0;
  }

  /* ===== HERO ===== */
  .hero-content {
    padding: 6vh 0;
  }

  .sub-title {
    font-size: 0.9rem;
    letter-spacing: 0.25em;
  }

  .main-title {
    font-size: 2.6rem;
    line-height: 1.1;
  }

  .hero-text {
    font-size: 1rem;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 1rem;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
  }

  /* ===== COUNTDOWN ===== */
  .countdown-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .countdown-number {
    font-size: 2rem;
  }

  .countdown-label {
    font-size: 0.9rem;
  }

  /* ===== TWO COLUMN INLINE GRIDS FIX ===== */
  div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* ===== EVENTS ===== */
  .levels-wrapper {
    padding: 0 10px;
  }

  .events-grid,
  .events-grid.single {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  .event-card {
    max-width: 100%;
    padding: 1.3rem;
    min-height: auto;
  }

  .event-card h3 {
    font-size: 1.4rem;
  }

  .event-card p {
    font-size: 0.9rem;
  }

  .event-card > div,
  .btn-row {
    flex-direction: column;
    gap: 10px;
  }

  .join-btn {
    width: 100%;
    font-size: 0.9rem;
  }

  .group-header {
    text-align: center;
    font-size: 1.2rem;
    margin: 40px 0 15px;
  }

  /* ===== ABOUT ===== */
  #about .section-header {
    font-size: 2rem;
    padding: 0 10px;
  }

  #about div[style*="max-width:900px"] {
    margin: 0 10px !important;
    padding: 1.2rem !important;
  }

  #about h2 {
    font-size: 1.2rem !important;
  }

  #about p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  #about .info-grid {
    grid-template-columns: 1fr !important;
  }

  /* ===== TEAM ===== */
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }

  .avatar-img {
    width: 90px;
    height: 90px;
  }

  /* ===== CONTACT ===== */
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* ===== FOOTER ===== */
  .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  /* ===== POPUP ===== */
  .jumanji-popup {
    grid-template-columns: 1fr;
    padding: 20px;
    max-height: 90vh;
  }

  .popup-right img {
    max-height: 180px;
  }
}

.sound-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(0,0,0,0.6);
  border: 2px solid #eab308;
  color: #eab308;
  padding: 8px 14px;
  border-radius: 20px;
  font-family: 'Rye', serif;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 0 15px rgba(234,179,8,0.4);
}
.sound-toggle:hover {
  background:#eab308;
  color:#000;
}

.sponsor-card {
  background: rgba(0,0,0,0.85);
  border: 2px solid #ffdc41;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  width: 260px;
  height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 20px rgba(255,220,65,0.4);
  transition: 0.3s ease;
}

.logo-box {
  width: 140px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
}

.logo-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.sponsor-link {
  text-decoration: none;
  color: #ffdc41;
  font-weight: bold;
}

.sponsor-card p {
  color: #cfcfcf;
  font-size: 0.9rem;
}

.sponsor-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(255,220,65,0.8);
}