style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* font-family: 'Courier New', Courier, monospace; */
    font-family: "Neuehaasdisplay mediu", sans-serif;
/* font-style: normal
font-variant-caps: normal
font-variant-east-asian: normal
font-variant-ligatures: normal
font-variant-numeric: normal
font-weight: 500 */

}

html, body{
    height: 100%;
    width: 100%;
    font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Oxygen,Fira Sans,Droid Sans,sans-serif;
}
#main {
    /* background-color: #000; */
    position: relative;
    z-index: 10;
}

#page1{
    min-height: 100vh; /*we cant give 100% as parent(#main) ki height defined nahi hai and hum nahi kar rahe hai as hame locomotive use karrna hai */
    width: 100%;
    background-color: #EFEAE3; 
    padding: 0 2vw;
    position: relative;  /*  it is the parent for nav and all...so it is a good practice to give relative to the parent so that the children are in control */
}
/* <-----------------------------------------------NAVBAR-------------------------------------------------------------------------------> */
 
nav{
    padding: 1.5vw 2vw;
    width: 100%;
    display: flex;
    align-items: centre ; 
    justify-content: space-between;
}

#nav-part2{
    display: flex;
    align-items: center ; 
    gap: 1vw;
    justify-content: center; 

}

#nav-part2 h4{
    padding: 10px 20px;
    border: 1px solid rgba(19, 18, 18, 0.459) ;
    border-radius: 100vw; 
    font-weight: 500;
    color: #000000bb;
    font-size: 18px;
    transition: all ease 0.4s;
    overflow: hidden; /* the gem of the whole thing to get it done */
    position: relative; /* to get a control/hold on child when giving it(::after) position: absolute; */
}

#nav-part2 h4::after{ /* if u leave space between the tag and :: then it would be considered as after for the the child of that tag and not the tag itself  */
    content: "";
    position: absolute;
    /*so all this would be acc to the parent ka size  */
    height: 100%;
    width: 100%; 
    background-color: black;
    left: 0;
    bottom: -100%;
    border-radius: 50%;
    transition: all ease 0.4s;
}

#nav-part2 h4:hover::after{
    bottom: 0;
    border-radius: 0;

}
#nav-part2 h4 a{
    text-decoration: none;
    color: black;
    position: relative;
    z-index: 10;
}
#nav-part2 h4:hover a{
    color: white;
}
/*< -----------------------------------x-x-x--------------------------------------------------------> */

/* <============================ 1st screen div===================================================> */

#center{
    height: 65vh;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: 2.5vw;
    border-bottom: 1px solid #0000003c;
}
#left h3{
    width: 25vw;
    font-size: 1.8vw;
    line-height: 2vw;
    margin-bottom: 3vw;
}

#center h1{
    font-size: 10vw;
    line-height: 9vw;
    text-align: right;
}
/* <------------------------------circle animation=----------------------------------------------> */
#circle-shape{
    right: 0;
    top: 70vh;
    width: 36vw;
    height: 36vw;
    position: absolute;

}
#shape1{
    background-color: #FE350F;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    filter: blur(20px);
    height: 100%;
    width: 100%;
    position: absolute;
}
#shape2{
    background: linear-gradient(#fe630f,#FE350F);
    border-radius: 50%;
    filter: blur(20px);
    height: 30vw;
    width: 30vw;
    margin-right: 2vw;
    position: absolute;
    animation: anim2 1.5s ease-in-out alternate  infinite;
}

#shape3{
    
    background: linear-gradient(#FE350F, #fe630f);
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    filter: blur(20px);
    height: 30vw;
    width:30vw;
    position: absolute;
    animation: anim1 2.5 s linear alternate  infinite;
    margin-right: 4vw;
    margin-bottom: 2vw;
}
@keyframes anim1 {
    from{
        transform: translate(-10%, 30%);
    }
    to{
        transform: translate(20%, -9%);
    }
    
}
@keyframes anim2 {
    from{
        transform: translate(-10%, -3%);
    }
    to{
        transform: translate(15%, 30%);
    }
}

/* <------------------------------x-x-x---------------------------------------------------------------> */
#page1 video{
    width: 100%;
    border-radius: 30px;
    margin-top: 4vw;
    position: relative;
    z-index: 10;
}


/* <========================================2nd screen div================================================> */

#page2{
    min-height: 100vh;
    width: 100%;
    background-color: #EFEAE3;
    padding: 8vw 0 ;
    position: relative;
}
/* <-------------------------------------scroll wala part------------------------------------------------> */
#moving-text{
    white-space: nowrap;
    overflow-x: auto;

}
#moving-text::-webkit-scrollbar{
    display: none;
}
#moving-text h1{
    font-size: 9vw;
    display: inline-block;
}
.container{
    
    margin-bottom: 2px;
    display: inline-block;
    white-space: nowrap;  
    animation: text-move 11s linear infinite;
}
.bullet{
    height: 70px;
    width: 70px;
    border-radius: 50%;
    display: inline-block;
    background-color: #FE350F;
    margin: 1vw 2vw;
}
@keyframes text-move {
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-100%);
    }
}

#page2Bottom{
    height: 80vh;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4vw;
    position: relative;
    z-index: 9;
}

.sideDiv{
    width: 20%;
}

.sideDiv img{
    width: 100%;
    border-radius: 20px;
    margin-bottom: 3vh;
}

#page2Bottom h1{
    font-size: 4vw;
    width: 60%;
    line-height: 4vw;
}

#sidDiv p {
    font-weight: 200;
    margin: 30vh 0;
    font-size: 1vw;
}
/* <--------------------------------Circle animation---------------------------------------------> */
#page2 #shape{
    height: 32vw;
    width: 32vw;
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(to top right, #ff2d03, #ff5c0b);
    top: 58%;
    left: 25%;
    filter: blur(20px);
    animation: circle 6s ease-in-out infinite alternate;


}
@keyframes circle {
    from {
        filter: blur(20px);
        transform: translate(10%, -10%) skew(0);
    }

    to {
        filter: blur(30px);
        transform: translate(-10%, 10%) skew(-12deg);
    }
}

#projects{
    
    width: 100%;
    position: absolute;
    bottom: 0;
    padding-bottom: 2vh;
    align-items: center;
    display: flex;
    padding-left: 2vw;

}
p {
    font-size: 15px;
}
 .bullets{
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
    background-color: #FE350F;
    margin: 1vw 1vw;
}

/* <========================================3rd screen div================================================> */

#page3{
    min-height: 100vh;
    width: 100%;
    background-color: #EFEAE3;
    padding: 4vw 0;
}

.element{
     display: flex;
     align-items: center;
     height: 110px;
     width: 100%;
     padding: 0 1.5vw;
     border-bottom: 1px  solid #0000003c;
     /* border-top: 1px solid #0000003c; */
     position: relative;
     overflow: hidden;
}
.overlay{
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: orange;
    left: 0;
    top: -100%;
    transition: all ease 0.25s;

}
.element:hover .overlay {
    top: 0;
}

.element h2{
    font-size: 3vw;
    position: relative;
    z-index: 10;
}

#fixed-image{
    height: 30vw;
    width: 24vw;
    background-color: aqua;
    z-index: 99;
    left:50%;
    top: 25%;
    position: fixed;
    border-radius: 10px;
    display: none;
    background-position: center;
    background-size: cover;
}


#page5 {
    height: 100vh;
    width: 100%;
    /* background-color: #EFEAE3; */
}
/* 
-------------------------------footer-------------------------- */


#footer {
    position: fixed;
    height: 105vh;
    width: 100%;
    background-color: #000;
    color: #fff;
    z-index: 9;
    bottom: 0;
    display: flex;
    /* align-items: flex-end; */
    justify-content: flex-end;
    flex-direction: column;
    padding: 1vw 3vw;
}

#footer h1 {
    font-size: 23vw;
}

#footer-div {
    height: 20vh;
    width: 100%;
    background-color: red;
}

#footer-bottom {
    border-top: 1px solid #dadada;
    height: 10vh;
    width: 100%;
}