*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}

#loader {
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 1;
    overflow: visible;
    background: #000 url('intro.gif') no-repeat center center;
}

.popup {
    top: 5%;
    left: 0;
    right: 0;       
    font-size: 14px;
    margin: auto;
    width: 100%;
    min-width: 320px;
    max-width: 600px;
    position: absolute;
    padding: 5px 20px;
    border: 1px solid #383838;
    background: #000;
    z-index: 1000;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    border-radius: 20px;
    font: 14px/18px 'Tahoma', Arial, sans-serif;
    color: #fff;
    -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -webkit-animation: fade .6s;
    -moz-animation: fade .6s;
    animation: fade .6s;
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    z-index: 999;
    -webkit-animation: fade .6s;
    -moz-animation: fade .6s;
    animation: fade .6s;
    overflow: auto;
}


 .hero{
min-height: 100vh;
width: 100%;
background-color: #000;
background-image: url(https://media.discordapp.net/attachments/1031198574588993646/1061351821546881115/background.gif?ex=66085ae9&is=65f5e5e9&hm=f6f9ba485d682743c46fa25662f79bc89cff87a273f8eb23b07e361720698840&=);
background-position: center;
background-repeat: no-repeat;
background-size: 90%;
color: #fff;
padding: 0 8%;
}
 nav{
     display: flex;
     align-items:center;
     justify-content: space-between;
     padding: 20px 0;
 }
 .logo{
     width: 60px;
 }
 nav ul li{
     display: inline-block;
     list-style: none;
     margin: 10px 30px;

 }
 nav ul li a{
     color: #fff;
     text-decoration: none;
 }

 .hero h1{
     font-size: 75px;
     margin-top: 22%;
 }
 
 .hero button{
     background: #393939;
     border: 0;
     outline: none;
     padding: 15px 35px;
     color: #fff;
     margin-top: 25px;
     font-weight: 500;
     letter-spacing: 1px;
     cursor: pointer;
 }
 .indicator span{
     display: inline-block;
     background: #3a3a3a;
     height: 15px;
     width: 15px;
     border-radius: 50%;
     margin-right: 10px;
 }
 .indicator{
     margin-top: 130px;
 }


 .indicator span.active{
     background: #bfbfbf
 }

 .indicator2 span{
     display: inline-block;
     background: #3a3a3a;
     height: 15px;
     width: 15px;
     border-radius: 50%;
     margin-right: 10px;
 }
 .indicator2{
     margin-top: 10px;
 }


 .indicator2 span.active2{
     background: #bfbfbf
 }

 .indicator3 span{
     display: inline-block;
     background: #3a3a3a;
     height: 15px;
     width: 15px;
     border-radius: 50%;
     margin-right: 10px;
 }
 .indicator3{
     margin-top: 10px;
 }


 .indicator3 span.active3{
     background: #bfbfbf
 }

 .cta{
     position: absolute;
     width: 5%;
     min-width: 250px;
     right: 3%;
     bottom: 100px;
 }
 .cta2{
     position: absolute;
     width: 5%;
     min-width: 250px;
     right: 3%;
     bottom: 80px;
 }
 .cta3{
     position: absolute;
     width: 5%;
     min-width: 250px;
     right: 3%;
     bottom: 60px;
 }