:root {
    --bg-nav: #29282f;
    --text-primary: #e0e0e0;
    --accent1: #FF6500;
    --accent2: #ffc916;
    --card-bg: rgba(0, 39, 83, 0.38);
}

/* Base */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Titillium Web', sans-serif; }
body { background: var(--bg-nav); color: var(--text-primary); }
a { color: var(--accent2); text-decoration: none; }

/* Navigation */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    background: var(--bg-nav);
    backdrop-filter: blur(5px);
    z-index: 100;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    font-size: 1.5em;
    min-height: 7.5lvh;
}
nav .logo, nav ul li a { color: var(--text-primary); font-weight: 700; }
nav .logo { display: flex; align-items: center; gap: 0.5rem; }
nav .logo img { height: 2em; width: auto; }
nav ul { display:flex; gap:2rem; list-style:none; transition:max-height 0.3s ease; overflow:hidden; }
nav ul li a { font-weight:600; transition:0.3s; }
nav ul li a:hover { color: var(--accent1); }
.menu-toggle { display:none; cursor:pointer; }
.menu-toggle span { display:block; width:25px; height:3px; margin:5px 0; background-color: var(--text-primary); transition:0.3s; }
.menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.menu-toggle.active span:nth-child(2) { opacity:0; }
.menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

@media(max-width:1100px) {
    nav { flex-wrap: wrap; }
    nav ul { flex-direction: column; width: 100%; max-height:0; gap:0; font-size:0.85em; }
    nav ul.active { max-height:500px; }
    nav ul li { text-align:center; margin:1rem 0; }
    .menu-toggle { display:block; }
}

/* Hero Section */
.hero {
    position:relative;
    height:92.5lvh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    overflow:hidden;
    color: var(--text-primary);
}
.hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: url('main-bg.jpg') center/cover no-repeat;
    filter: grayscale(15%) blur(2px);
    z-index: 1;
    opacity: 0;
    animation: fadeInBg 1s cubic-bezier(0.4, 0, 1, 1) forwards;
}
.hero::after {
    content:'';
    position:absolute; top:0; left:0; width:100%; height:100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.65) 100%);
    z-index:2;
}
.hero-content { position:relative; z-index:3; animation:fadeIn 1s ease forwards; }
.hero hr { width: 100%; transform: scaleX(0); transform-origin: center; animation: fadeWide 1s ease forwards; color: var(--text-primary); text-shadow: 2px 2px 5px rgba(0,0,0,0.5); }
.hero h1 { font-size:5.5rem; line-height:1; color: var(--text-primary); text-shadow:2px 2px 5px rgba(0,0,0,1); padding:0; }
.hero h2 { font-size:2.5rem; line-height:1; color: var(--text-primary); text-shadow:2px 2px 5px rgba(0,0,0,1); padding: 5px 0 0 0;}

@keyframes fadeInBg { to { opacity:1; } }
@keyframes fadeWide { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fadeIn { from {opacity:0; transform:translateY(20px);} to {opacity:1; transform:translateY(0);} }

@media(max-width:1100px) { .hero h1{font-size:4rem;} .hero h2{font-size:1.8rem;} }
@media(max-width:750px) { .hero h1{font-size:2.8rem;} .hero h2{font-size:1.5rem;} }

/* Sections */
.section { padding:4rem 2rem; max-width:1100px; margin:0 auto; background: var(--bg-nav); color: var(--text-primary); }
.section h2 { color: var(--accent1); margin-bottom:1rem; text-transform:uppercase; text-align:center; }
.section p { margin-bottom:2rem; text-align:center; }

@media(max-width:750px) { .section h2{font-size:1.3rem;} }

/* Background Section */
.img-bg { color: var(--text-primary); padding:12rem 2rem; text-align:center; position:relative; }
.img-bg::after { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:1; }
.img-foreground { position:relative; z-index:2; max-width:1100px; margin:0 auto; }
.img-foreground h2 { color: var(--accent1); margin-bottom:1rem; text-transform:uppercase; }
.img-foreground p { margin-bottom:2rem; }

/* Buttons */
.href-btn { display:inline-block; padding:0.5rem 1rem; background: var(--accent1); color:#fff; font-weight:bold; text-transform:uppercase; border-radius:2rem; transition:background 0.3s, transform 0.2s; }
.href-btn:hover { background:#fff; color: var(--accent1); }

/* Social Icons */
.social-icons { display:flex; align-items:center; justify-content:center; gap:16px; list-style:none; padding:0; margin:0; }
.social-icon a{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.social-icon a .svg-wrapper { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:#f1f1f1; transition:all 0.3s; }
.social-icon a .svg-wrapper svg { width:22px; height:22px; fill:#333; transition:fill 0.3s; }
.social-icon a .name { color:#fff; padding-left:5px; }
.social-icon.instagram a:hover .svg-wrapper { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.social-icon.facebook a:hover .svg-wrapper { background: #0866ff; }
.social-icon.instagram a:hover svg, .social-icon.facebook a:hover svg { fill:#fff; }

/* Sponsors */
.sponsors-container { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; align-items:center; padding-bottom:15px; }
.sponsor { width:10rem; height:10rem; border-radius:16px; overflow:hidden; display:flex; align-items:center; justify-content:center; background-color:#fff; }
.sponsor img { max-width:80%; max-height:80%; object-fit:contain; }
@media(max-width:1100px) { .sponsor { width:8rem; height:8rem; } }

/* Cards */
.cards-section{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center;margin-top:2rem;}
.card,.card-transparent,.card-list,.card-plain{flex:1 1 300px;max-width:450px;padding:2rem;border-radius:10px;color:var(--text-primary);transition:transform 0.3s;}
.card,.card-list{background:rgba(0, 0, 0, 0.2);}
.card-transparent{border:1px var(--card-bg);}
.card:hover,.card-list:hover,.card-image:hover{transform:translateY(-5px);}
.card h3,.card-plain h3,.card-list h3{margin-bottom:1rem;}
.card h3,.card-plain h3{color:var(--accent2);}
.card-list h3{color:var(--accent1);}
.card p,.card-plain p{color:var(--text-primary);}
.card-list ul{list-style-type:disc;padding-left:1.5rem;}
.card-list li{margin-bottom:0.5rem;line-height:1.5;}
.card-image{flex:1 1 300px;max-width:450px;border-radius:10px;overflow:hidden;transition:transform 0.3s;}
.card-image img{width:100%;height:100%;object-fit:cover;}


/* Gallery */
.gallery { margin:10px; display:flex; flex-wrap:wrap; gap:15px; justify-content:center; align-items:center; }
.gallery-item { width:250px; height:250px; overflow:hidden; display:flex; align-items:center; justify-content:center; flex:1 1 250px; }
.gallery-item img { width:100%; height:100%; object-fit:cover; display:block; border-radius:8px; }
@media(max-width:1100px) { .gallery-item { width:180px; height:180px; flex:1 1 180px; } }
@media(max-width:750px) { .gallery-item { width:120px; height:120px; flex:1 1 120px; } }

/* Lightbox */
.lightbox-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); display:none; justify-content:center; align-items:center; z-index:1000; transition:opacity 0.3s ease; }
.lightbox-overlay img { max-width:90%; max-height:90%; border-radius:10px; box-shadow:0 0 20px rgba(0,0,0,0.5); transition:transform 0.3s ease; }

/* Event Lineup */
.event-lineup { display:flex; flex-direction:column; gap:15px; margin:10px; }
.event-item { display:flex; flex-direction:row; align-items:flex-start; padding:15px 20px; border-radius:12px; background:rgba(255,255,255,0.11); box-shadow:0 4px 15px rgba(0,0,0,0.1); transition: transform 0.2s, box-shadow 0.2s; }
.event-item:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(0,0,0,0.15); }
.event-time { display: none; flex-shrink:0; font-size:0.9rem; font-weight:bold; color:#fff; background:var(--accent1); padding:10px 20px; border-radius:8px; margin-right:20px; text-align:center; }
.event-details { display:flex; flex-direction:column; gap:5px; }
.event-title { font-size:1.1rem; font-weight:600; color:#fff; }
.event-subtitle { font-size:0.95rem; color:rgba(255,255,255,0.66); }
.event-subtitle a { color:#ff6f61; text-decoration:none; }
.event-subtitle a:hover { text-decoration:underline; }
.event-info { font-size:0.9rem; color:#555; line-height:1.4; margin-top:5px; }
@media(max-width:700px) {
    .event-item { flex-direction:column; align-items:flex-start; }
    .event-time { margin-right:0; margin-bottom:10px; }
}

/* Footer */
footer { background:#1a1a1a; text-align:center; padding:2rem; font-size:0.9rem; color:#bbb; }

/* Accessibility */
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0; }