@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900&display=swap');
*
{   
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body
{
    background: #000;
    min-height: 200vh;
    
}

header
{
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.6s;
    padding: 40px 100px;
    z-index: 100000;
}

header.sticky
{
    padding: 5px 100px;
    background: #fff;
}

header .logo
{
    position: relative;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    font-size: 2em;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: 0.6s;
}
header ul
{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
header ul li
{
    position: relative;
    list-style: none;
}
header ul li a
{
    position:relative;
    margin: 0 15px;
    text-decoration: none;
    color: #fff;
    letter-spacing: 2px;
    font-weight: 500px;
    transition: 0.6s
}
.banner
{
    position: relative;
    width: 100%;
    height: 0%;
    background-color: #000;
}
header.sticky .logo,
header.sticky ul li a 
{
    color: #000
}

section
{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #000200;
    display: flex;
    justify-content: center;
    align-items: center;
}
section h2
{
    color: transparent;
    font-weight: 900;
    font-size: 14em;
    -webkit-text-stroke: 2px #fff;
    text-transform: lowercase;
}
section h2upper
{
    color: transparent;
    font-weight: 900;
    font-size: 14em;
    -webkit-text-stroke: 2px #fff;
    text-transform: uppercase;
}
section .star
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    animation: animate 8s ease-in-out infinite;
                
}

section .star.star1
{
    animation-delay: 0s;
    background: url(star1.png)
}
section .star.star2
{
    animation-delay: -1s;
    background: url(star2.png)
}
section .star.star3
{
    animation-delay: -2s;
    background: url(star3.png)
}
section .star.star4
{
    animation-delay: -3s;
    background: url(star4.png)
}
section .star.star5
{
    animation-delay: -4s;
    background: url(star5.png)
}
section .star.star6
{
    animation-delay: -5s;
    background: url(star6.png)
}
section .star.star7
{
    animation-delay: -6s;
    background: url(star7.png)
}
section .star.star8
{
    animation-delay: -7s;
    background: url(star8.png)
}

@keyframes animate
{
    0%,20%,40%,60%,80%,100%
    {
        opacity: 0;
    }

    10%,30%,50%,70%,90%
    {
        opacity: 1;
    }
}
@keyframes backgroundmove
{
    0%
    {
        transform: scale(1);
    }
    100%
    {
        transform: scale(1.7);
    }
}

section.main
{
    background: gainsboro
}

section.main ul h3
{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Poppins", sans-serif;
    color:black;
    font-size: 4em;

}
section.main ul h4
{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

section.Landing
{
    
    background-repeat: no-repeat;
}