@media screen and (max-width:900px) {


    /* nav bar */

    nav {
        padding: 5vw 4vw;
        align-items: flex-end;

    }

    nav a,
    nav h4 {
        font-size: 1.6vmax;
        width: min-content;
    }


    /* nav bar */

    /* page1  */

    .circle {

        display: none;

    }

    .page1 {
        height: 80vh;
        justify-content: center;
    }

    .p1body {
        height: 40%;
        padding: 1vw 0vw;
    }

    .headingbase {
        padding-right: 4vw;
        height: 10vh;
        line-height: 3.5vw;
    }



    .heading h1 {
        font-size: 15vw;
    }


    .frame span {
        font-size: 15vw;
        height: 16vw;
    }

    .frame {
        height: 16vw;
    }

    h4 {
        opacity: 0.8;
        font-size: 3.5vw;
    }

    h1 {
        font-size: 16vw;
    }


    .headingp2 {
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .p1bottom {

        align-items: flex-end;
    }

    .p1bottom h4 {
        width: 80%;
    }

    .links {
        width: 60%;
        flex-direction: column;
        align-items: flex-end;
    }


    .p1bottom .arrows {
        display: none;
    }

    /* page1 end */



    /* menu */
    .menu {

        flex-direction: column;
    }



    .menunav {
        width: 95vw;
        position: absolute;
        top: 0;
        padding-right: 3vw;

    }

    .left-menu {
        height: 70vh;
        margin-top: 4vw;

    }

    .left-menu h1 span {
        font-size: 15vw;
    }

    .right-menu {
        border-top: 1px solid red;

        /* padding: 2vw 20vw; */
        width: 62%;
        margin-top: 3vw;
        padding-top: 0.9vw;

        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-start;
    }



    /* end menu */


    /* page2 */

    .page2 {
        width: 100%;
        height: fit-content;
        padding: 4vw 4vw;
    }


    .element h1 {
        font-size: 10vw;
        font-weight: 500;
        opacity: 0.7;
    }

    .element span {
        width: 3vw;
        position: relative;
    }


    .element span img {
        width: 100%;
        height: fit-content;
        object-fit: cover;
        opacity: 1;
        z-index: 9;

    }

    .cont-elem {
        flex-direction: column;
        align-items: flex-start;
    }


    /* form */

    form {

        padding: 3vw 0;
        width: 100%;
        height: fit-content;
        gap: 1.6vw;

        background-color: rgba(0, 0, 0, 0.845);
        z-index: 99;
    }

    input,
    textarea {
        padding: 2.5vw 2.5vw;
        border-radius: 1.5vw;
        font-size: 3.9vw;
    }

    form button {
        padding: 2vw 2vw;
        font-size: 5vw;
    }

    form button:hover {
        color: #888;
    }

    /* form end */

    /* page2 end */

    /* page3 */

    .page3 {
        flex-direction: column-reverse;
        padding-top: 0vh;
        padding-bottom: 5vh;
        height: fit-content;
    }

    .page3 .imgcontainer {
        width: 85%;
        height: 65vmax;

    }


    .page3 .about {
        width: 85%;
        padding-top: 3vw;

    }

    .about p {
        font-size: 5.5vw;
        font-weight: 400;
        margin: 3vw 0
    }

    .about h4 {
        font-weight: 400;

        line-height: 2.8vmax;
    }

    .about h4 span {
        font-size: 2.4vmax;
    }

    /* page3 end */


    /* page5 */
    .page5-skill {
        display: none;
    }

    .center {
        display: flex;
    }

    .sk {
        padding: 2vw 3vw;
        font-size: 5vmin;
        border-radius: 3vw;
    }

    .skill-container {
        gap: 4vw;
        padding-bottom: 8vw;
    }

    .skill-row {
        flex-wrap: wrap;
        gap: 2vw;
    }

    /* page5 end */


    /* page4 */
    .textContainer h1 {
        font-size: 16vw;
    }

    .textContainer p {
        font-size: 3vw;
    }

    .pro-bottom h4 {
        font-size: 6vw;
        top: 6%;
        right: 4%;
    }

    .pro-bottom h1 {
        font-size: 12vw;
        bottom: 5%;
        left: 3%;
    }

    /* page4 end */

    /* mini project page */
    .mini-project-page {
        height: fit-content;

    }

    .image-container {
        flex-direction: column;
        align-items: center;
    }

    .img-row {
        width: 80%;
        position: relative;
    }

    .mini-pro-title h1 {
        font-size: 6vw;
    }

    .img-row-container {
        height: fit-content;

    }

    .black-screen {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-bottom: 4vw;
    }

    .black-screen .open-project {
        bottom: 1%;
        right: 1%;
        font-size: 6.5vw;
    }

    .black-screen .view-repo {

        bottom: 9vw;
        right: 1%;
        font-size: 6.5vw;

    }

    .black-screen .project-name {
        font-size: 6vw;
    }

    .black-screen h2 {
        line-height: 6vw;
        font-size: 6vw;
        padding-top: 1vw;

    }

    .black-screen .pro-dest {
        display: none;
    }

    .black-screen h2 span {
        font-size: 4vw;
        font-weight: 200;

    }


    /* end mini project page */


    /* page6 */

    .page6 .edu-box {
        background-color: #3c3a3a6a;
        width: 350px;
        height: fit-content;
        padding: 2vw 2.4vw;
        border-radius: 3vw;

        gap: 0.5vw;


    }

    .box-body {
        padding-bottom: 1.3vw;
    }

    .box-body i {
        opacity: 0;
    }

    .edu-box span {
        font-size: 3vw;
        font-weight: 400;
        color: #888;

    }

    .edu-box h4 {
        font-size: 5vw;
    }

    h4.clg-name {
        font-size: 3vw;
        opacity: 1;
    }

    #hsc {
        top: 20%;
        left: -75%;
    }

    #bca {

        top: 48%;
        left: -67%;
    }

    #mca {
        bottom: 19%;
        left: -67%;
    }




    /* end page6 */



    footer {
        flex-direction: column-reverse;
    }

    footer .left-footer,
    .right-footer {
        display: flex;
        gap: 4vw;
    }




    /* button hover  */

    .frameFor h4 , .frameFor h3 {
        font-size: 1.8vmax;
        height: 2vmax;
        padding: 1vmax 1vw;
    }

    .frameFor {
        height: 2vmax;
    }

    .about .btn-con{
        margin-top: 5vmax;
       padding: 2vmax;
    }
    /* button hover end */


    .page4{
        display: none;
    }


}