style.css

*{
margin:0;
padding: 0;
box-sizing: border-box;
}
#wrapper{
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 10px;
}
.container{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
transform-style: preserve-3d;
z-index: -1;
}
.background{
transform: translateZ(-40px) scale(5);
}
.foreground{
transform: translateZ(-20px) scale(3);
}
.background.foreground{
position: absolute;
height: 100%;
width: 100%;
z-index: -1;
object-fit: cover;
}
h1{
position: absolute;
top: 3rem;
font-size: 6rem;
text-shadow: 0px,0px,10px solid rgb(0,0,0,0.3);
letter-spacing: 4px;
color: white;
}
section{
background-color: rgb(45,45,45);
color: white;
padding:4rem 0;
}
.heading{
font-size: 4rem;
padding: 0 8rem;
}
.text{
font-size: 1.5rem;
padding: 0 8rem;
margin: 4rem 0;
}
.bg{
position:relative;
width: 100%;
height: 500px;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
.desc{
position: absolute;
background-color: white;
padding: 0.5rem 2.5rem;
top: 50%;
left: 50%;
transform:translateX(-50%) translateX(40%) ;
color: black;
font-size: 3.5rem;
font-weight: 600;
}
.bg1{
    background-image: url(sport-1.jpg);
   }
   .bg2{
    background-image: url(sport-2.jpg);
   }
   .bg3{
    background-image: url(sport-3.jpg);
   }