/* JAI SHREE RAM */
/* JAI HANUMAN */
/* RADHE RADHE */


/* GENERAL */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    overflow-x: hidden;
    scroll-behavior: smooth;
}


*::selection{
    background-color: rgba(0, 0, 0, 0.37);
}

/* MAIN */
/* JUGAD */


.div_aligner{
    height: 55vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 3px solid #ffae3c;
    border-bottom: 3px solid #ffae3c;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 2s;
    border-radius: 20px;
}

.div_aligner:hover{
    border-top: 1px solid #ff9500;
    border-bottom: 1px solid #ff9500; 
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 2s;
}

#main{
    background: linear-gradient(#fff , #0066ffdc);
}

/* PAGES */

#page1{
    width: 100%;
    height: 100vh;
    background-color: transparent;
}

.page2{
    width: 100%;
    height: 100vh;
    background-color: transparent;
}
.part1{
    width: 100%;
    height: 38vh;
    background-color: transparent;
}
.part2{
    display: flex;
    width: 18%;
    height: 45vh;
    justify-content: center;
}

.page4{
    width: 100%;
    height: 100vh;
    background-color: transparent;
}
.gap_filler{
    width: 100%;
    height: 10vh;
    background-color: transparent;
}
/* NAV */

#nav{
    position: fixed;
    height: 10vh;
    width: 70%;
    top: 0;
    left: 15.5vw;
    border-bottom: 1px solid #444;
    overflow-y: hidden;
    transition: all linear 0.5s;
    mix-blend-mode: darken;
}

#nav:hover{
    transition: all linear 0.5s;
    border-bottom: 1px solid #000;
}

#nav ul{
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#nav ul li{
    list-style: none;
}

#nav ul li a{
    text-decoration: none;
    padding: 0 6vw;
    color: #444;
    font-size: 1.2rem;
    transition: all linear 0.2s;
    font-weight: 900;
}

#nav ul li a:hover{
    color: #000;
    transition: all linear 0.2s;
    cursor: pointer;
}


/* LOGO */

#logo{
    position: absolute;
    top: 30vh;
    left: 25vw;
    height: fit-content;
    transition: all linear 1s;
    opacity: 5;
    pointer-events: none;
}






/* JAI SHREE RAM */
/* JAI HANUMAN */
/* RADHE RADHE */

.center{
    display: flex;
    justify-content: center;
}

#intro{
    position: relative;
    top: 75vh;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
}

#description{
    position: relative;
    font-family: 'Courier New', Courier, monospace;
    top: 76vh;
    font-weight: 500;
}

#another_page1_p{
    position: relative;
    font-family: 'Courier New', Courier, monospace;
    top: 77vh;
    font-weight: 500;
}















/* JAI SHREE RAM */
/* JAI HANUMAN */
/* RADHE RADHE */


/* Styles For Page 2 */


.page2 h1{
    position: relative;
    top: 15vh;
    left: 5vw;
    padding: 0 0;
    font-family: 'Courier New', Courier, monospace;
    font-style: italic;
    font-weight: 1000;
    font-size: 4vw;
    border-bottom: 1px solid #444;
    width: 70vw;
}

.page2 p{
    position: relative;
    top: 16vh;
    left: 8vw;
    font-family: 'Courier New', Courier, monospace;
    font-style: italic;
    font-weight: 400;
    font-size: 1vw;
    padding: 5px 20px;
    width: 85%;
}

.page2 h2{
    position: relative;
    top: 18vh;
    left: 10vw;
    font-family: 'Courier New', Courier, monospace;
    font-style: italic;
    font-weight: 600;
    font-size: 2vw;
}

.page2 video{
    position: relative;
    left: 26vw;
    height: 54%;
    top: 20vh;
    border: 2px solid #444;
    border-radius: 2vw;
}











/* JAI SHREE RAM */
/* JAI HANUMAN */
/* RADHE RADHE */


/* Styles For Page 2 */

.part1 h1{
    position: relative;
    top: 15vh;
    left: 5vw;
    padding: 0 0;
    width: 70%;
    font-style: italic;
    font-weight: 1000;
    font-size: 4vw;
    border-bottom: 1px solid #444;
    font-family: 'Courier New', Courier, monospace;
}

.part1 p{
    position: relative;
    top: 22vh;
    left: 10vw;
    padding: 0 0;
    font-weight: 500;
    font-size: 1vw;
    font-family: 'Courier New', Courier, monospace;
}

/* DOWNLOAD BUTTONS */

.dnw a{
    text-decoration: none;
    color: #444;
    font-family: cursive;
    position: relative;
    top: 15vw;
    width: 60%;
    height: 10%;
    text-align: center;
    background-color: transparent;
    border: 3px solid #3b6bf1;
    border-radius: 10px;
    transition: all linear 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dnw a:hover{
    background-color: #3b6bf1;
    color: #000;
    cursor: pointer;
    transition: all linear 0.5s;
}

/* LOGO OF OS */

.dnw_logo{
    position: absolute;
    display: flex;
    width: 7vw;
}











/* JAI SHREE RAM */
/* JAI HANUMAN */
/* RADHE RADHE */

#contact{
    display: flex;
    background-color: #fff;
    width: 80%;
    height: 70vh;
    position: relative;
    top: 20vh;
    left: 20vh;
    background-color: #2a7fff;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-radius: 20px;
}

.left{
    width: 50%;
    height: 100%;
    background: url(log.svg) center center no-repeat;
    background-size: contain;
}

.right{
    width: 50%;
    height: 100%;
    background-color: transparent;
    overflow: hidden;
}

#contact h1{
    width: 100%;
    display: flex;
    color: #444;
    justify-content: center;
    position: relative;
    top: 7vh;
    font-size: 3rem;
    font-family: 'Courier New', Courier, monospace;
    transform: all linear 2s;
}

#contact h1:hover{
    color: #121212;
    cursor: pointer;
    transform: all linear 2s;
}


form{
    position: relative;
    left: 4vw;
    top: 9vh;
}

#Subject , #Message{
    display: flex;
    width: 81%;
}

#Name , #Email{
    width: 40%;
    height: 10%;
}

form input{
    border: none;
    outline: none;
    padding: 1vh 1vw;
    font-size: medium;
    font-weight: 800;
    font-family: 'Courier New', Courier, monospace;
    border-radius: 10px;
}

textarea{
    font-size: medium;
    font-weight: 800;
    font-family: 'Courier New', Courier, monospace;
    resize: none;
    border: none;
    outline: none;
    padding-left: 1vw;
    padding-top: 1vh;
    border-radius: 10px;
}


#Submit{
    border: none;
    outline: none;
    position: relative;
    width: 50%;
    height: 5vh;
    left: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    font-size: 1.2rem;
    font-family: monospace;
    background-color: #0058bd;
    color: #fff;
    transform: all linear 5s;
}

#Submit:hover{
    background-color: #294dff;
    cursor: pointer;
    transform: all linear 5s;
}










/* JAI SHREE RAM */
/* JAI HANUMAN */
/* RADHE RADHE */


/* Responsive Ban Ja Please */


/* PAGE 1 */

@media screen and (max-width:1056px){
    #logo{
        left: 15vw;
    }
}


@media screen and (max-width:500px){
    #logo{
        display: flex;
        width: 100vw;
        left: 10px;
    }
    #nav{
        display: none;
    }
    #intro , #description , #another_page1_p{
        top: 65vh;
        width: 100vw;
        padding: 0 20px;
    }
}


/* Page2 */

@media screen and (max-width:1056px) {
    .page2 video{
        left: 20vw;
    }
}


@media screen and (max-width:500px) {
    .page2 h1 {
        top: 12vh;
        font-size: 8vw;
    }
    .page2 p{
        top: 15vh;
        font-size: 3vw;
    }
    .page2 h2{
        top: 25vh;
        font-size: 4vw;
    }
    .page2 video{
        top: 28vh;
        left: 10vw;
        width: 80vw;
        height: 29vh;
    }
}




/* PAGE 3 */

@media screen and (max-width:500px) {
    .part1 h1 {
        top: 12vh;
        font-size: 8vw;
    }
    .part1 p{
        top: 15vh;
        font-size: 3vw;
        width: 80%;
    }
    .dnw_logo{
        display: flex;
        position: absolute;
        width: 32vw;
        top: 20px;
        left: 35%;
    }
    .part2 {
        width: 100%;
        position: relative;
        height: 100%;
    }
    .dnw a{
        top: 70%;
    }
}


/* PAGE 4 */

@media screen and (max-width:500px) {
    .left{
        display: none;
    }  
    #contact{
        left: 12vw;
        
    }  
    #contact h1 {
        top: 8vh;
        font-size: 8vw;
    }
    #contact .right{
        width: 100%;
        position: relative;
    }
    input , textarea{
        position: relative;
        left: 4vw;
    }
    #Submit{
        left: 15vw;
    }
}









/* JAI SHREE RAM */
/* JAI HANUMAN */
/* RADHE RADHE */



/* ANIMATIONS */

@keyframes Float{
    0%{
        transform: translateY(0);
    }
    10%{
        transform: translateY(-7px);
    }
    20%{
        transform: translateY(-14px);
    }
    30%{
        transform: translateY(-21px);
    }
    40%{
        transform: translateY(-28px);
    }
    50%{
        transform: translateY(-35px);
    }
    60%{
        transform: translateY(-28px);
    }
    70%{
        transform: translateY(-21px);
    }
    80%{
        transform: translateY(-14px);
    }
    90%{
        transform: translateY(-7px);
    }
    100%{
        transform: translateY(0);
    }
}



.float{
    animation: Float 6s linear infinite;
}