*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Rajdhani',sans-serif;
}


body{
background:#08090b;
color:white;
}


header{

height:70px;
background:#070809;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 10%;
position:absolute;
width:100%;
z-index:10;

}


.logo{

font-size:18px;
font-weight:bold;

}


.logo span{

font-size:30px;

}



nav a{

margin:0 18px;
color:#aaa;
cursor:pointer;

}


nav .active{

color:#e00000;

}



button{

background:#d60000;
border:none;
color:white;
padding:14px 35px;
cursor:pointer;

}



.hero{

height:850px;

background:
linear-gradient(90deg,rgba(0,0,0,.8),rgba(0,0,0,.4)),
url("https://images.unsplash.com/photo-1542751371-adc38448a05e");

background-size:cover;
background-position:center;

display:flex;
align-items:center;
justify-content:flex-end;

}



.hero-content{

width:45%;
text-align:center;
margin-right:8%;

}



.hero h1{

font-size:90px;
line-height:.8;

}



.hero h1 span{

font-size:110px;

}



.hero h3{

margin:40px 0;

}


.hero p{

color:#bbb;
font-size:18px;
line-height:1.7;

}


.buttons{

margin-top:40px;

}


.trailer{

background:none;
border:1px solid #777;
margin-left:20px;

}




.dashboard{

display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:20px;
padding:50px 10%;
margin-top:-170px;

}



.box{

background:#101214cc;
border:1px solid #222;
padding:25px;

}



.cards{

display:flex;
gap:15px;

}



.card{

width:33%;
background:#15171a;

}



.card img{

width:100%;
height:140px;
object-fit:cover;

}



.card h4{

color:red;
padding:10px;

}



.card p,
.card small{

padding:10px;

}



.server{

padding:20px 0;
border-bottom:1px solid #333;
display:flex;
justify-content:space-between;

}




.darkbtn{

margin-top:20px;
background:none;
border:1px solid #333;
width:100%;

}



.event{

display:flex;
gap:15px;
padding:15px 0;
border-bottom:1px solid #333;

}



.features{

display:flex;
justify-content:space-around;
padding:35px 10%;
background:#111;

}



.features div{

width:20%;

}



.features h3{

color:#ddd;

}



.features p{

color:#777;

}



footer{

padding:30px 10%;
display:flex;
justify-content:space-between;
background:#070809;
color:#777;

}