*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
.hero{
    width: 100%;
    height: 100vh;
    background-image: url(./new\ bg.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}
.logo{
    font-size: 2rem;
    font-weight: 900;
}
.navbar{
    width: 85%;
    height: 15%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
button{
    color:aqua;
    padding: 10px 25px;
    background: transparent;
    border: 1px solid #fff;
    border-radius: 20px;
    outline: auto;
    cursor: pointer;
}
.content{
    color: #fbfcfb;
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    z-index: 2;
}

h1 {
    font-size: 80px;
    margin: 10px 0 30px;
    line-height: 80px;
}
/* .side-bar { */
    /* width: 50px; */
    /* height: 100vh; */
    /* background: linear-gradient(grey, black); */
    /* position: absolute; */
    /* right: 0; */
    /* top: 0; */
/* } */
/* .menu{ */
    /* display: block; */
    /* width: 25px; */
    /* margin: 40px auto 0; */
    /* cursor: pointer; */
    /* color: #f8a2e0; */
/* } */
/* .social-link img, .useful-link img{ */
    /* width: 25px; */
    /* margin: 5px auto; */
    /* cursor: pointer; */
/* } */
/* .social-links{ */
    /* width: 50px; */
    /* text-align: center; */
    /* position: absolute; */
    /* top: 50%; */
    /* transform: translateY(-50%); */
/* } */
/*  */
/* .useful-links{ */
    /* width: 50px; */
    /* text-align: center; */
    /* position: absolute; */
    /* bottom: 30px; */
/* } */
.ghost img{
    width: 100px;
    animation: ghost 7s linear infinite;
    
}
.ghost{
    width:100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: absolute;
    bottom: -70px;
    
    
}
@keyframes ghost{
    0%{
        transform: translateY(0);
        opacity: 0;
    }
    50%{
        
        opacity: 1;
    }
    70%{

        opacity: 1;
    }
    100%{
        
        transform:translateY(-80vh);
        opacity: 0;
    }

}


.ghost img:nth-child(1){
    animation-delay: 2s;
    width: 25px;
    font-size: large;
}
.ghost img:nth-child(2){
    animation-delay: 1s;
    font-size: larger;
}
.ghost img:nth-child(3){
    animation-delay: 3s;
    width: 25px;
    font-size: x-large;
}
.ghost img:nth-child(4){
    animation-delay: 4.5s;
    font-size: xx-small;
}
.ghost img:nth-child(5){
    animation-delay: 3s;
    font-size: x-large;
}
.ghost img:nth-child(6){
    width: 20px;
    animation-delay: 6s;
    font-size: larger;
}
.ghost img:nth-child(7){
    width: 35px;
    animation-delay: 7s;
    font-size: xx-large;
}


@media screen and (max-width:600px) 
{
    h1 {
        font-size: 40px;
        line-height: 80px;
    }
    /* .side-bar{ */
        /* width: 100%; */
        /* height: 50px; */
        /* top: auto; */
        /* bottom: 0; */
        /* display: flex; */
        /* align-items: center; */
        /* justify-content: space-between; */
        /* padding: 0 10px; */
        /* box-sizing: border-box; */
    /* } */
    /* .social-link{ */
        /* width: auto; */
        /* position: unset; */
        /* transform: none; */
/*          */
    /* } */
    /* .useful-links{ */
        /* width: auto; */
        /* position: unset; */
    /* } */
    /* .menu{ */
        /* width: 18px; */
        /* margin: 0; */
/*          */
    }
    .hero{
        background-image: url(./new\ bg.jpg);
    }
    .leo{
        display: none;
    }
    .loader{
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin-left: 0;
        background-color: #16191e;
        position: absolute;
    }
    .loader>div{
        height: 100px;
        width: 100px;
        border: 15px solid #45474b;
        border-top-color:#2a88e6 ;
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 50%;
        animation: spin 1.5s infinite linear;
    }
    @keyframes spin{
        100%{
            transform: rotate(360deg );
        }
    }


@media screen and (max-width: 900px) and (min-width: 600px){
    /* add css for tablet screen size */
}