/* =========================
   RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}


html{
    scroll-behavior:smooth;
}


body{

    background:#050505;
    color:#fff;
    overflow-x:hidden;

}




/* =========================
   PARTICLES
========================= */

#particles-js{

    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:-1;

}





/* =========================
   LOADING SCREEN
========================= */


.loader{

    position:fixed;
    width:100%;
    height:100vh;
    background:#050505;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;

}



.loader-text{

    font-size:45px;
    font-weight:900;
    color:#FFD700;
    text-shadow:
    0 0 10px #FFD700,
    0 0 30px #FF3B3B;

    animation:loading 1.5s infinite alternate;

}



@keyframes loading{

from{

transform:scale(1);

}

to{

transform:scale(1.2);

}

}







/* =========================
   NAVBAR
========================= */


header{

position:fixed;
top:0;
width:100%;
z-index:1000;

background:rgba(5,5,5,.8);

backdrop-filter:blur(10px);

border-bottom:1px solid rgba(255,215,0,.3);

}




nav{

max-width:1200px;
margin:auto;

display:flex;
align-items:center;
justify-content:space-between;

padding:20px;

}




.logo{

display:flex;
align-items:center;
gap:10px;

}



.logo img{

width:50px;
height:50px;
object-fit:contain;

}



.logo h2{

color:#FFD700;
font-weight:900;

}




nav ul{

display:flex;
gap:25px;
list-style:none;

}



nav ul li a{

color:white;
text-decoration:none;
font-weight:600;
transition:.3s;

}



nav ul li a:hover{

color:#FFD700;

text-shadow:
0 0 10px #FFD700;

}



.menu{

display:none;
font-size:25px;

}









/* =========================
   HERO
========================= */


.hero{

height:100vh;
position:relative;

display:flex;
align-items:center;
justify-content:center;

overflow:hidden;

}




.hero video{

position:absolute;
width:100%;
height:100%;

object-fit:cover;

z-index:-2;

}



.hero-overlay{

position:absolute;
width:100%;
height:100%;

background:

linear-gradient(

90deg,

rgba(0,0,0,.9),

rgba(0,0,0,.5)

);

z-index:-1;

}




.hero-content{

text-align:center;
padding:20px;

}




.hero-logo{

width:180px;

filter:

drop-shadow(0 0 20px #FFD700);

}




.hero h1{

font-size:80px;
font-weight:900;

color:white;

}



.hero h1 span{

display:block;

color:#FFD700;

text-shadow:

0 0 15px #FFD700,
0 0 30px #FF3B3B;

}




.hero p{

font-size:20px;
margin:20px 0;

color:#ddd;

}







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


.hero-button{

display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;

}



.btn{

padding:15px 30px;

border-radius:50px;

text-decoration:none;

font-weight:700;

transition:.4s;

}



.gold{

background:#FFD700;
color:#000;

box-shadow:

0 0 20px #FFD700;

}



.red{

background:#FF3B3B;
color:white;

box-shadow:

0 0 20px #FF3B3B;

}



.dark{

background:#111;
color:#fff;

border:1px solid #FFD700;

}



.btn:hover{

transform:translateY(-8px)
scale(1.05);

}









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


.section{

padding:100px 10%;

text-align:center;

}



.section h2{

font-size:45px;

margin-bottom:40px;

color:#FFD700;

text-shadow:

0 0 15px #FFD700;

}



.section p{

font-size:18px;

line-height:2;

color:#ddd;

}








/* =========================
TIMELINE
========================= */


.timeline{

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

}



.timeline-card{


width:300px;

padding:30px;

background:#111;

border:1px solid #FFD700;

border-radius:20px;


box-shadow:

0 0 20px rgba(255,215,0,.3);


transition:.4s;

}



.timeline-card:hover{

transform:translateY(-10px);

box-shadow:

0 0 30px #FFD700;

}









/* =========================
LEADERBOARD
========================= */


.leader-container{

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

}



.leader-card{

width:280px;

padding:40px 20px;

background:

linear-gradient(

145deg,

#111,

#1b1b1b

);


border-radius:25px;

border:2px solid #FFD700;


box-shadow:

0 0 25px rgba(255,215,0,.4);


transition:.4s;

}



.leader-card:hover{

transform:scale(1.08);

border-color:#FF3B3B;


box-shadow:

0 0 30px #FF3B3B;

}



.leader-card h1{

font-size:60px;

}



.leader-card h3{

font-size:25px;

margin:15px;

}



.leader-card span{

color:#FFD700;

font-size:22px;

font-weight:bold;

}









/* =========================
TICKET
========================= */


.ticket-card{

max-width:400px;

margin:auto;

padding:40px;

background:#111;

border-radius:30px;

border:2px solid #FF3B3B;


box-shadow:

0 0 30px #FF3B3B;


}



.ticket-card h1{

font-size:60px;

color:#FFD700;

}



.ticket-card button{

margin-top:20px;

padding:15px 40px;

border:none;

border-radius:50px;

background:#FFD700;

font-weight:bold;

cursor:pointer;

}










/* =========================
FOOTER
========================= */


footer{

padding:40px;

text-align:center;

background:#000;

border-top:1px solid #FFD700;

}



footer h3{

color:#FFD700;

font-size:30px;

}










/* =========================
FLOATING BUTTON
========================= */


.floating{

position:fixed;

right:25px;

width:55px;

height:55px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:25px;

color:white;

text-decoration:none;

z-index:999;

}



.wa{

bottom:90px;

background:#25D366;

box-shadow:

0 0 20px #25D366;

}



.top{

bottom:25px;

background:#FFD700;

color:#000;

}









/* =========================
RESPONSIVE
========================= */


@media(max-width:768px){



nav ul{

display:none;

}



.menu{

display:block;

color:#FFD700;

}




.hero h1{

font-size:45px;

}



.hero p{

font-size:15px;

}




.section h2{

font-size:35px;

}



.btn{

width:90%;

}




}

/* =========================
PARTICIPANT
========================= */


.participant-grid{

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

}



.participant-card{

width:280px;

background:#111;

border:1px solid #FFD700;

border-radius:20px;

padding:25px;

box-shadow:0 0 20px #FFD70055;

}



.participant-card img{

width:120px;

height:120px;

border-radius:50%;

object-fit:cover;

}



.participant-card span{

color:#FFD700;

font-weight:bold;

}






/* =========================
PRIZE
========================= */


.prize-box{

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}



.prize-card{

width:250px;

padding:30px;

background:#111;

border-radius:20px;

border:2px solid #FF3B3B;

box-shadow:0 0 20px #FF3B3B;

}



.prize-card h1{

font-size:60px;

}




/* =========================
GALLERY
========================= */


.gallery-grid{

display:grid;

grid-template-columns:repeat(
auto-fit,
minmax(250px,1fr)
);

gap:20px;

}



.gallery-grid img{

width:100%;

height:250px;

object-fit:cover;

border-radius:20px;

border:2px solid #FFD700;

transition:.4s;

}



.gallery-grid img:hover{

transform:scale(1.05);

}






/* =========================
FAQ
========================= */


.faq-container{

max-width:800px;

margin:auto;

}



.faq-item{

margin-bottom:20px;

}



.faq-item button{

width:100%;

padding:20px;

background:#111;

color:white;

border:1px solid #FFD700;

border-radius:15px;

display:flex;

justify-content:space-between;

cursor:pointer;

font-size:18px;

}



.faq-answer{

max-height:0;

overflow:hidden;

transition:.5s;

background:#080808;

}



.faq-answer.show{

max-height:200px;

padding:20px;

}




.rotate{

transform:rotate(45deg);

}





/* =========================
SPONSOR
========================= */


.sponsor-slider{

display:flex;

justify-content:center;

gap:40px;

flex-wrap:wrap;

}



.sponsor-slider img{

width:120px;

filter:grayscale(1);

transition:.3s;

}



.sponsor-slider img:hover{

filter:none;

transform:scale(1.2);

}






/* =========================
CONTACT
========================= */


.contact-box a{

display:inline-flex;

gap:10px;

margin:15px;

padding:15px 30px;

background:#111;

border:1px solid #FFD700;

border-radius:50px;

color:white;

text-decoration:none;

}



.contact-box a:hover{

background:#FFD700;

color:#000;

}