*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'Poppins',sans-serif;

min-height:100vh;

color:white;

overflow-x:hidden;

}

.hero-video{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;

z-index:-2;

}

.overlay{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:
linear-gradient(
to bottom,
rgba(0,0,0,.65),
rgba(0,0,0,.75)
);

z-index:-1;

}

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px;

}

.logo{

font-size:20px;

font-weight:700;

color:#D4AF37;

}

#logoutBtn{

position:fixed;

top:20px;

right:20px;

z-index:9999;

background:#D4AF37;

color:#111;

font-weight:700;

border:none;

padding:12px 22px;

border-radius:50px;

cursor:pointer;

}

.hero{

text-align:center;

padding:50px 20px;

}

.hero h1{

font-size:72px;

font-weight:800;

letter-spacing:2px;

color:#fff;

text-shadow:
0 0 15px rgba(212,175,55,.8),
0 0 30px rgba(212,175,55,.5),
0 10px 30px rgba(0,0,0,.8);

margin-bottom:15px;

}

.hero p{

font-size:18px;

font-weight:500;

color:rgba(255,255,255,.9);

text-shadow:
0 3px 15px rgba(0,0,0,.8);

max-width:800px;

margin:auto;

}

.stats-grid{

display:grid;

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

gap:20px;

padding:30px;

}

.card{

background:
rgba(15,15,15,.55);

backdrop-filter:blur(20px);

-webkit-backdrop-filter:blur(20px);

border:1px solid
rgba(212,175,55,.25);

border-radius:28px;

padding:35px 20px;

text-align:center;

box-shadow:
0 10px 40px rgba(0,0,0,.35);

transition:.35s;

}

.card:hover{

transform:
translateY(-8px);

border-color:#D4AF37;

box-shadow:
0 15px 45px rgba(212,175,55,.25);

}

.card h2{

font-size:52px;

font-weight:800;

color:#D4AF37;

text-shadow:
0 0 12px rgba(212,175,55,.6);

margin-bottom:12px;

}
.actions{

display:grid;

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

gap:20px;

padding:30px;

}

.action-card{

    display:flex;

justify-content:center;

align-items:center;

text-align:center;

background:
rgba(15,15,15,.55);

backdrop-filter:blur(20px);

border:1px solid
rgba(212,175,55,.20);

border-radius:25px;

padding:40px;

font-size:24px;

font-weight:700;

text-decoration:none;

color:white;

transition:.35s;

}

.action-card:hover{

transform:
translateY(-8px);

border-color:#D4AF37;

box-shadow:
0 15px 45px rgba(212,175,55,.25);

}



@media(max-width:768px){

.hero h1{

font-size:35px;

}

.navbar{

flex-direction:column;

gap:15px;

}

}




@media(max-width:768px){

.hero{

padding-top:100px;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:14px;

padding:0 20px;

}

#logoutBtn{

top:15px;

right:15px;

padding:10px 16px;

font-size:13px;

}

.logo{

font-size:16px;

}

}