style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
   
}
body{
    min-height:100 vh;
    overflow-x:hidden;

}
header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    padding: 30px 100px;
   
    display:flex;
    justify-content: space-between;
    align-items:center;
    z-index: 100;
}
.logo{
    font-size: 2em;
    color: black;
    user-select:none;
}
.logo:hover{
    color:red;
}
.navigation a {
    font-size: 1.1em;
    color:black;
    font-weight:600;
    text-decoration:none;
    margin-left:20px;
    padding: 6px 15px;
    
}
.navigation a:hover,
.navigation a.active{
    color:green;
}
.navigation a span{
    position:relative;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:white;
    border-radius:3px;
    z-index:-1;
    transform:scale(0);
    opacity:0;
    transition:.5s;
}
.navigation a:hover span,
.navigation a.active span{
    transform:scale(1);
    opacity:1;

}

.parallax{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    height: 100vh;
    background: url('background.png') no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
#text{
    position:absolute;
    font-size: 5em;
    color:black;
    text-shadow:2px 4px 5px white;
}
.parallax img{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    pointer-events:none;
}
.parallax img#gate-left{
    position:fixed;
    transform:translateX(-282px);
}
.parallax img#gate-right{
    position:fixed;
    transform:translateX(305px);
}
.sec h2{
font-size:3em;
color:white;
margin-bottom:10px;
}
.sec{
    position:relative;
    background:black;
    padding:30px 100px;
}
.sec p{
    font-size:1em;
    color:white;
    font-weight:300;
    text-allign:justify;
}