@import url('https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Tilt Neon", sans-serif;
}
html,body{
height: 100vh;
width: 100%;
}
.main{
    width: 100%;
}
.logo img{
    width: 18vw;
}

.nav{
    display: flex;
    flex-wrap: wrap;
    gap: 2vw;
    font-size: 0.9vw;
}
.nav a{
    text-transform: uppercase;
    text-decoration: none;
    color: black;
    
}
.nav a:hover{
    transition: 1s;
    color: crimson;
}
nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0vw 5vw;
    width: 100%;
    height: 14vh;
}
.page1{
    display: flex;
}
.box{
    height: 86vh;
    width: 50%;

}
.box2 img{
    width: 38.5vw;
    position: absolute;
    top: 4%;
    z-index: 5;
}
.page1-text-left-padding h3{
    font-size: 2vw;
}
.page1-text-left-padding h4{
    font-size: 1vw;
}
.page1-text-left-padding{
    padding-left: 6.5vw;
    padding-top: 30vh;
    font-size: 4vw;
}
.nav i{
    display: none;
}
.special-span-hide{
    display: none;
}
#figma{
    position: absolute;
    width: 18vw;
    left: 70vw;
    top: 20vh;
    z-index: 4;
}
#js{
    position: absolute;
    width: 10vw;
    left: 50vw;
    top: 65vh;
    z-index: 6;
}
.nav ul{
    display: none;
}

.page2{
    height: 100vh;
    width: 100%;
    background-color: gray;
    display: flex;
    flex-wrap: wrap;
}
.box-page2{
    background-color: rgb(239, 235, 235);
    height: 100%;
    width: 50%;
}
.box-page2 img{
    width: 35vw;
   margin-top: 10vh;
   margin-left: 20vh;
}


.about-me h1{
    font-size: 1.5vw;
    font-weight: 200;
    margin-top: 5vw;
}
.about-me img{
    width: 25vw;
    margin-top: 15vh;
    margin-left: 10vw;
}

.page3{
    height: 70vh;
    width: 100%;
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-wrap: wrap;
}
.box-page3{
    background-color: rgb(255, 255, 255);
    height: 90%;
    width: 50%;
}
.box-page3 h1{
    margin-left: 2vw;
    text-transform: uppercase;
}
.skill-rate i{
    font-size: 1.5vw;
}
.skill-rate{
    margin: 3vh 0vh;
    height: 5vh;
    width: 30vw;
    background: rgb(13,7,116);
    background: linear-gradient(284deg, rgba(13,7,116,1) 0%, rgba(9,9,121,1) 29%, rgba(0,212,255,1) 100%);
    display: flex;
    margin-left: 2vw;
    align-items: center;
    padding-left: 2vw;
}
#java{
    width: 25vw;
}
#react{
    width: 20vw;
}
#c-plus{
    width: 27vw;
}
#python{
    width: 18vw;
}
#skill-rate-position{
    padding-top: 17vh;
    padding-left: 6vw;
}
#g3d-gif1 img{
    width: 75vh;
    margin-left: 8vw;
}
.page4{
    height: 80vh;
    width: 100%;
    display: flex;
    
}
.project{
    height: 70vh;
    width: 60vw;
    background-color: blue;
    margin: 2vw;
    border-radius: 5vw;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
}
.project h1{
    color: white;
    position: absolute;
    top: 6%;
}
.project img{
    height: 70vh;
    width: 70vw;
}
#center-h1{
    text-align: center;
}

.page5{
    height: 20vh;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 40vh;
}
.resume{
    height: 10vh;
    width: 10vw;
    background-color: rgb(17, 18, 52);
    border-radius: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4vw;
    color: white;
}
.reach-out{
    width: 100%;
    height: 40vh;
    padding: 0 5vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: larger;
}
.pic{
    height: 35vh;
    width: 35vh;
    background-color: black;
    border-radius: 50%;
    background-image: url(/pasport2.jpg);
    background-size: cover;
    border: 10px solid white;
}
.page5 a{
    text-decoration: none;
}
.bio a{
    background-color: black;
    color: white;
    padding: 5px 10px;
    border-radius: 30px;
}
.footer{
    height: 20vh;
    width: 100%;
    background-color: rgb(9, 3, 54);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
}
.footer img{
    width: 20vw;
}


.page-hire{
    height: 70vh;
    width: 100%;
    background-color: rgb(255, 255, 255);
    display: none;
}
.hire{
    width: 50%;
    height: 100%;
    display: flex;
    gap: 2vw;
    align-items: center;
    justify-content: center;
}
.hire-box{
    height: 45vh;
    width: 20vw;
    background-color: rgb(216, 207, 207);
    margin-left: 2vw;
    flex-wrap: wrap;
    border-radius: 2vw;
    text-align: center;
    padding: 1vh;
}
.mentor{
    height: 90vh;
    width: 100%;
    display: flex;
    gap: 10vh;

}
.mentor-box{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    
}
.mentor-box img{
    width: 20vw;
}
.img-harry,.img-shradha,.img-harsh{
    height: 40vh;
    width: 40vh;
    background-color: red;
    overflow: hidden;
    border-radius: 20%;
}
.mentor-box h4{
    text-align: center;
    color: gray;
    margin-top: 3vw;
}

.img-harry i{
    color: red;
    font-size: 10vw;
    position: absolute;
    top: 30%;
    left: 30%;
    opacity: 0;
    transform: scale(0);
    transition:  ease 0.5s;
}
.img-shradha i{
    color: red;
    font-size: 10vw;
    position: absolute;
    top: 30%;
    left: 30%;
    opacity: 0;
    transform: scale(0);
    transition:  ease 0.5s;
}
.img-harsh i{
    color: red;
    font-size: 10vw;
    position: absolute;
    top: 30%;
    left: 30%;
    opacity: 0;
    transform: scale(0);
    transition:  ease 0.5s;
}
.hire button{
    padding: 2vh 4vw;
    border-radius: 10px;
    background-color: black;
    color: white;
}
.page-hire button{
    padding: 2vh 4vw;
    border-radius: 10px;
    background-color: black;
    color: white;
}
.page-hire p{
    text-align: center;
}
@media (max-width:500px){
    .mentor{
        margin-top: 30vh;
        height: 90vh;
        width: 100%;
        display: flex;
        gap: 10vh;
        flex-direction: column;
    
    }
    .mentor-box img{
        width: 20vw;
        display: none;
    }
    .img-harry{
        background-image: url(/harry.jpg);
        background-size: cover;
    }
    .img-shradha{
        background-image: url(/shradha.jpg);
        background-size: cover;
    }
    .img-harsh{
        background-image: url(/harsh.jpg);
        background-size: cover;
    }
    


    .img-harry i{
        color: crimson;
        font-size: 20vw;
        position: absolute;
        top: 30%;
        left: 30%;
        opacity: 0;
        transform: scale(0);
        transition:  ease 0.5s;
    }
    .img-shradha i{
        color: crimson;
        font-size: 20vw;
        position: absolute;
        top: 30%;
        left: 30%;
        opacity: 0;
        transform: scale(0);
        transition:  ease 0.5s;
    }
    .img-harsh i{
        color: crimson;
        font-size: 20vw;
        position: absolute;
        top: 30%;
        left: 30%;
        opacity: 0;
        transform: scale(0);
        transition:  ease 0.5s;
    }
    

    #g3d-gif1 img{
        width: 25vh;
        margin-left: 0vw;
        margin: 0;
        overflow: hidden;
    }




    .main{
        width: 100%;
    }
    .logo img{
        width: 60vw;
        margin: -8vw;
    }
    .nav i{
        display: block;
        font-size: 10vw;
    }
    .bar{
        width: 2vw;
        height: 1vh;
        background-color: black;
        border-radius: 2vw;
    }
    .nav h1{
        display: none;
    }
    nav{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0vw 5vw;
        width: 100%;
        height: 14vh;
    }
    .page1{
        display: flex;
        flex-direction: column;
    }
    .box{
        height: 86vh;
        width: 100%;
    
    }
    .box1{
        height: 20vh;
    }
    .page1-text-left-padding h3{
        font-size: 5vw;
    }
    .page1-text-left-padding h4{
        font-size: 5vw;
    }
    .page1-text-left-padding{
        padding-left: 5vw;
        padding-top: 1vh;
        font-size: 8vw;
    }
    .box2 img{
        width: 100vw;
        position: relative;
        top: 4%;
    }
    .box2{
        height: 56vh;
        position: relative;
        overflow: hidden;
    }
    .hide-for-resposive{
        display: none;
    }
    .special-span-hide{
        display: block;
    }
    #figma{
        position: absolute;
        width: 30vw;
        left: 55vw;
        top: 15vh;
        z-index: 4;
    }
    #js{
        position: absolute;
        width: 25vw;
        left: 9vw;
        top: 40vh;
        z-index: 6;
    }

    .page2{
        height: 100vh;
        width: 100%;
        background-color: rgb(255, 255, 255);
        display: flex;
        flex-wrap: wrap;
        
    }
    .box-page2{
        background-color: rgb(255, 255, 255);
        height: 50%;
        width: 100%;
    }
    .box-page2 img{
        width: 75vw;
        margin-top: 5vh;
       margin-left: 6vh;
    }
    .about-me img{
        width: 45vw;
        margin-top: 1vh;
        margin-left: 28vw;
    }
    .about-me h1{
        font-size: 5vw;
        font-weight: 200;
        margin-top: 5vw;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        font-weight: 200;
    }
    #reduce-hight{
        height: 45vh;
        margin-top: -10vh;
    }

    .page3{
        margin-top: -15vh;
        height: 70vh;
        width: 100%;
        background-color: rgb(255, 255, 255);
        display: flex;
        flex-wrap: wrap;
    }
    .box-page3{
        width: 100%;
        background-color: rgb(255, 254, 254);
       
    }
    .box-page3 h1{
        margin-left: 2vw;
    }
    .skill-rate i{
        font-size: 5vw;
    }
    .skill-rate{
        margin: 3vh 0vh;
        height: 3vh;
        width: 70vw;
        background: rgb(13,7,116);
        background: linear-gradient(284deg, rgba(13,7,116,1) 0%, rgba(9,9,121,1) 29%, rgba(0,212,255,1) 100%);
        display: flex;
        margin-left: 2vw;
        align-items: center;
        padding-left: 2vw;
    }
    #skill-rate-position{
        padding-top: 1vh;
        padding-left: 10vw;
        /* background-color: red; */
        height: 35vh;
    }
    #java{
        width: 55vw;
    }
    #react{
        width: 50vw;
    }
    #c-plus{
        width: 57vw;
    }
    #python{
        width: 48vw;
    }
    #g3d-gif1{
        display: flex;
        justify-content: center;
        align-items: center;
        
    }
    #g3d-gif1 img{
        width: 48vh;
        margin-left: 0vw;
        align-items: center;
       
        
    }
    .project{
        height: 30vh;
        width: 90%;
        margin: 2vw;
        border-radius: 5vw;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        flex-wrap: wrap;
        font-size: 2vw;
    }
    .adjust-project-title{
        height: 2vh;
        position: relative;
        margin-top: 20vh;
    }
    .project h1{
        color: white;
        position: absolute;
        top: 6%;
    }
    .project img{
        height: 40vh;
        width: 100%;
        object-fit: cover;
    }
    .resume{
        /* margin-top: -15vh; */
        height: 10vw;
        width: 30vw;
        background-color: rgb(17, 18, 52);
        border-radius: 2vw;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 4.4vw;
        color: white;
    }

    .page4{
        height: 80vh;
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-top: 10%;
        align-items: center;
        
    }
    

    .page5{
        height: 20vh;
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        height: 40vh;
        margin-top: -14vh;
    }

    .reach-out{
        width: 100%;
        height: 40vh;
        padding: 0 0vw;
        margin-top: 5vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 4vw;
        padding-left: 4vw;
    }
    .pic{
        height:60vw;
        width: 46vw;
        background-color: black;
        border-radius: 50%;
        background-image: url(/pasport2.jpg);
        background-size: cover;
        display: none;
    }
    .footer{
        height: 20vh;
        width: 100%;
        background-color: rgb(33, 33, 113);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: white;
    }
    .bio h2,h3{
        font-size: 3vw;
    }
    .bio{
        
        border-radius: 20vw;
        text-align: center;
    }
    .footer img{
        width: 60vw;
        margin-top: 5vh;
    }
    .footer h1{
        font-size: 2vw;
    }

    .page-hire{
        margin-top: 130vh;
        height: 80vh;
        width: 100%;
        background-color: rgb(255, 255, 255);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .hire{
       margin-top: 0vh;
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        gap: 2vw;
        align-items: center;
        justify-content: center;
        padding-top: 2vh;
    }

    .hire-box{
        height: 25vh;
        width: 80vw;
        background-color: rgb(227, 219, 219);
        margin-left: 0vw;
        flex-wrap: wrap;
        border-radius: 2vw;
        text-align: center;
        overflow: hidden;
        padding: 1vh;
        font-size: 1vh;
        color: rgb(57, 54, 54);

    }
    .hire-box h1{
        font-size: 8vw;
        font-weight: 200;
    }
    .hire-box h3{
        font-size: 3.5vw;
        font-weight: 200;
    }

    .why-hire h1,h4{
        text-align: center;
        font-weight: 200;
    }
    .why-hire h4{
        background-color: rgb(216, 207, 207);
        border-radius: 2vw;
        font-size: 3vw;
        width: 70vw;
        padding: 4vw;
    }
    
    
}