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

:root{

--primary:#ff2a2a;
--primary-strong:#c10000;

--text:#ffffff;

--panel:rgba(10,10,10,0.65);

}
.box{
    margin-top: 700px;
}

body{

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

/*background-image:url('./assets/bg.jpeg');*/


background-size:35%;

background-position:center;

background-repeat:no-repeat;

background-attachment:fixed;

color:var(--text);

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

}

.hero{

width:100%;

display:flex;

align-items:center;

justify-content:center;

padding:30px;

}



.logo{

font-family:'Cinzel',serif;

font-size:70px;

letter-spacing:4px;

margin-bottom:20px;

}

.logo span{

color:var(--primary);

text-shadow:0 0 20px rgba(255,0,0,0.6);

}

.subtitle{

max-width:500px;

margin:auto;

margin-bottom:30px;

color:#ddd;

}

.buttons{

display:flex;

gap:15px;

justify-content:center;

flex-wrap:wrap;

}

.btn{

padding:16px 28px;

border-radius:12px;

font-weight:700;

text-decoration:none;

transition:0.25s;

}

.primary{

background:linear-gradient(#ff3a3a,#b40000);

color:#fff;

box-shadow:0 10px 25px rgba(255,0,0,0.4);


}

.primary:hover{

transform:translateY(-3px);

}

.secondary{

background:#1a1a1a;

border:1px solid rgba(255,255,255,0.1);

color:#fff;

}

.secondary:hover{

background:#2a2a2a;

}

.outline{

border:1px solid var(--primary);

color:var(--primary);

}

.outline:hover{

background:rgba(255,0,0,0.1);

}


.particles{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

pointer-events:none;

background-image:

radial-gradient(circle,rgba(255,0,0,0.4) 1px,transparent 1px);

background-size:140px 140px;

animation:move 25s linear infinite;

opacity:0.4;

}

@keyframes move{

from{transform:translateY(0)}
to{transform:translateY(-200px)}

}

#bg-video {

position: fixed;

right: 0;
bottom: 0;

min-width: 100%;
min-height: 100%;

width: auto;
height: auto;

z-index: -2;

object-fit: cover;

}

.overlay{

position: fixed;

top:0;
left:0;

width:100%;
height:100%;

background: rgba(0,0,0,0.6);

z-index:-1;

}

.popup{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

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

display:flex;

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

z-index:999;

}

.popup-content{

position:relative;

max-width:600px;

}

.popup-content img{

width:100%;

border-radius:10px;

}

.close-btn{

position:absolute;

top:-15px;
right:-15px;

background:#ff0000;

color:#fff;

border:none;

width:35px;
height:35px;

border-radius:50%;

cursor:pointer;

font-weight:bold;

font-size:16px;

}