/* ===========================
HDS MEDIA V2
=========================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{

--red:#E50914;
--black:#090909;
--dark:#111111;
--white:#ffffff;
--gray:#bcbcbc;

}

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

body{

background:var(--black);

color:white;

overflow-x:hidden;

}

a{

text-decoration:none;

}

ul{

list-style:none;

margin:0;
padding:0;

}

.container{

max-width:1200px;

}

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

.navbar{

padding:20px 0;

background:rgba(0,0,0,.45);

backdrop-filter:blur(20px);

border-bottom:1px solid rgba(255,255,255,.08);

}

.navbar-brand{

font-size:32px;

font-weight:800;

color:white;

}

.navbar-brand span{

color:var(--red);

}

.navbar ul{

display:flex;

gap:30px;

margin-left:auto;

margin-right:30px;

}

.navbar ul li a{

color:white;

font-weight:500;

transition:.3s;

}

.navbar ul li a:hover{

color:var(--red);

}

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

.main-btn{

padding:14px 30px;

background:var(--red);

border-radius:12px;

color:white;

font-weight:600;

transition:.4s;

display:inline-block;

}

.main-btn:hover{

transform:translateY(-5px);

background:#ff1f2f;

box-shadow:0 15px 35px rgba(229,9,20,.4);

color:white;

}

.second-btn{

padding:14px 30px;

border:1px solid rgba(255,255,255,.2);

border-radius:12px;

color:white;

margin-left:15px;

transition:.4s;

display:inline-block;

}

.second-btn:hover{

background:white;

color:black;

}

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

.hero{

min-height:100vh;

display:flex;

align-items:center;

background:
radial-gradient(circle at top right,#E5091430,transparent 35%),
radial-gradient(circle at bottom left,#ff000020,transparent 35%),
#090909;

padding-top:120px;

}

.tag{

display:inline-block;

padding:10px 18px;

background:#181818;

border:1px solid rgba(255,255,255,.08);

border-radius:50px;

margin-bottom:25px;

}

.hero h1{

font-size:68px;

font-weight:800;

line-height:1.15;

}

.hero h1 span{

color:var(--red);

}

.hero p{

font-size:20px;

color:#cfcfcf;

margin:30px 0;

line-height:34px;

max-width:600px;

}

.hero-btns{

margin-top:40px;

}

/* ===========================
RIGHT CARD
=========================== */

.hero-card{

background:#151515;

padding:40px;

border-radius:30px;

border:1px solid rgba(255,255,255,.08);

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

box-shadow:0 25px 60px rgba(0,0,0,.35);

}

.mini-card{

background:#202020;

padding:25px;

border-radius:18px;

text-align:center;

transition:.4s;

font-weight:600;

}

.mini-card i{

font-size:42px;

color:var(--red);

margin-bottom:15px;

display:block;

}

.mini-card:hover{

transform:translateY(-8px);

background:var(--red);

}

.mini-card:hover i{

color:white;

}

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

section{

padding:100px 0;

}
#loader{

position:fixed;

width:100%;

height:100vh;

background:#090909;

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

}

.spinner{

width:70px;

height:70px;

border:6px solid #333;

border-top:6px solid #E50914;

border-radius:50%;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}
}