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


body{
    background:#050505;
    font-family:Arial, sans-serif;
}


.hero{

    height:100vh;
    position:relative;
    overflow:hidden;

    background:
    radial-gradient(circle at center,
    #222 0%,
    #080808 50%,
    #000 100%);

}


#lightning{

    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:1;

}


.smoke{

    position:absolute;
    inset:-50px;

    background:
    radial-gradient(circle,
    rgba(255,120,0,.15),
    transparent 60%);

    filter:blur(50px);

    animation:
    smokeMove 8s infinite alternate;

}


@keyframes smokeMove{

    from{
        transform:translate(-30px,-20px);
    }

    to{
        transform:translate(40px,30px);
    }

}



.navbar{

    position:relative;
    z-index:5;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:30px 8%;

}



.logo img{

    width:180px;

}



.navbar ul{

    display:flex;
    gap:40px;
    list-style:none;

}


.navbar a{

    color:white;
    text-decoration:none;

    font-weight:bold;

    transition:.3s;

}



.navbar a:hover{

    color:#ff7300;

    text-shadow:
    0 0 10px #ff7300;

}




.hero-content{

    position:absolute;

    z-index:5;

    top:50%;
    left:50%;

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

    text-align:center;

    color:white;

}



.hero-content h1{

    font-size:90px;

    letter-spacing:8px;

    text-shadow:

    0 0 10px #ff7300,
    0 0 30px #ff7300;


}



.hero-content h1 span{

    color:#ff7300;

}



.hero-content p{

    margin:25px;

    font-size:22px;

}



.btn{

    display:inline-block;

    padding:18px 40px;

    background:#ff7300;

    color:black;

    font-weight:bold;

    border-radius:50px;

    cursor:pointer;

    transition:.3s;

}



.btn:hover{

    box-shadow:
    0 0 20px #ff7300,
    0 0 60px #ff7300;

    transform:scale(1.05);

}

.slider-1 {
    max-width: 700px;
    margin: 150px auto;
    overflow: hidden;
    border: 1px solid #ff7300;
    border-radius: 20px;
    box-shadow: 0 0 5px #ff7300;
}

.slider-1 .slider {
    animation: slider-1 50s infinite ease-in-out;
    display: flex;
}

.slider-1 p {
    background: #000;
    flex-shrink: 0;
    padding: 72px 0;
    width: 100%;
    text-align: center;
    font-size: 25px;
    color: #ff7300;
}

@keyframes slider-1 {
  0%,
  10% {
    transform: translateX(0);
  }
  12%,
  22% {
    transform: translateX(-100%);
  }
  27%,
  37% {
    transform: translateX(-200%);
  }
  42%,
  52% {
    transform: translateX(-300%);
  }
  57%,
  67% {
    transform: translateX(-400%);
  }
  72%,
  82% {
    transform: translateX(-500%);
  }
  87%,
  97% {
    transform: translateX(-600%);
  }
  100% {
    transform: translateX(-700%);
  }
} 

@media(max-width:800px){

.navbar ul{
display:none;
}


.hero-content h1{

font-size:50px;

}

}