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

body{

background:#05070d;
color:white;
overflow-x:hidden;

}

.hero{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

position:relative;

background:
linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.85)),
url("https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=2000&q=80");

background-size:cover;
background-position:center;

}

.overlay{

position:absolute;
width:100%;
height:100%;
backdrop-filter:blur(3px);

}

.hero-content{

position:relative;
z-index:2;

}

.hero h1{

font-size:90px;

font-weight:800;

letter-spacing:5px;

color:white;

text-shadow:0 0 40px #38b6ff;

}

.hero h2{

font-size:35px;

margin-top:20px;

color:#38b6ff;

}

.hero p{

margin-top:25px;

font-size:22px;

opacity:.8;

}

.explore{

display:inline-block;

margin-top:45px;

padding:18px 45px;

background:#38b6ff;

border-radius:50px;

text-decoration:none;

color:white;

font-weight:700;

transition:.4s;

box-shadow:0 0 30px #38b6ff;

}

.explore:hover{

transform:translateY(-6px);

box-shadow:0 0 60px #38b6ff;

}

#buttons{

padding:120px 20px;

text-align:center;

}

#buttons h2{

font-size:50px;

margin-bottom:50px;

}

.button{

display:block;

width:340px;

margin:25px auto;

padding:20px;

text-decoration:none;

color:white;

font-size:22px;

font-weight:700;

border-radius:18px;

background:rgba(255,255,255,.06);

backdrop-filter:blur(18px);

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

transition:.35s;

}

.button:hover{

background:#38b6ff;

transform:translateY(-8px);

box-shadow:0 0 40px #38b6ff;

}

.text{

margin-top:30px;

font-size:20px;

opacity:.8;

}

footer{

padding:80px;

text-align:center;

background:#090c14;

margin-top:120px;

}

footer h3{

font-size:40px;

color:#38b6ff;

margin-bottom:15px;

}

@media(max-width:900px){

.hero h1{

font-size:55px;

}

.hero h2{

font-size:26px;

}

.hero p{

font-size:18px;

}

.button{

width:90%;

}

}

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:#38b6ff;

border-radius:50px;

}

::-webkit-scrollbar-track{

background:#05070d;

}




/* ========================= */
/* Animations */
/* ========================= */

.hidden{
opacity:0;
transform:translateY(80px);
transition:all 1s ease;
}

.show{
opacity:1;
transform:translateY(0);
}

.star{
position:absolute;
width:2px;
height:2px;
background:#38b6ff;
border-radius:50%;
box-shadow:0 0 10px #38b6ff;
animation:twinkle 4s infinite ease-in-out;
}

@keyframes twinkle{

0%{
opacity:.2;
transform:scale(.5);
}

50%{
opacity:1;
transform:scale(1.8);
}

100%{
opacity:.2;
transform:scale(.5);
}

}

.button,
.explore{

position:relative;
overflow:hidden;

}

.button::before,
.explore::before{

content:"";

position:absolute;

left:var(--x);

top:var(--y);

width:0;

height:0;

background:rgba(255,255,255,.25);

border-radius:50%;

transform:translate(-50%,-50%);

transition:.45s;

}

.button:hover::before,
.explore:hover::before{

width:450px;
height:450px;

}

.hero{

overflow:hidden;

}

.hero::after{

content:"";

position:absolute;

width:700px;

height:700px;

background:#38b6ff;

filter:blur(220px);

opacity:.12;

right:-250px;

top:-250px;

animation:floatLight 8s infinite alternate ease-in-out;

}

@keyframes floatLight{

0%{

transform:translateY(0px);

}

100%{

transform:translateY(120px);

}

}

.loaded{

animation:fadePage .8s;

}

@keyframes fadePage{

from{

opacity:0;

}

to{

opacity:1;

}

}