@media (max-width: 600px) {
    #home {
        border: none;
        margin: 0;
        border-radius: 0;
        height: 100vh;
        width: 100%;
        background: hidden;
        box-shadow: none;
    }

    #main {
        background: radial-gradient(closest-side, rgb(235, 243, 245) 10.4572%, rgb(197 226 240 / 86%) 100%);

    }

    body {

        -ms-overflow-style: none;
        scrollbar-width: none;
        overflow-y: scroll;
    }

    body::-webkit-scrollbar {
        display: none;
    }

    .side-svg {
        position: absolute !important;
    }

    #skills {
        height: 215vh;
    }

    #about {
        height: 160vh !important;
    }

    #project {
        height: 325vh !important;
    }

    #contact {
        height: 137vh;
    }

    #skills,
    #project,
    #about,
    #contact {
        border: none;
        margin: 0;
        border-radius: 0;
        width: 100%;
        overflow-y: hidden;
        background: hidden;
        box-shadow: none;
    }



    .ic {
        margin-left: 1.5rem;
    }

    .project-text1 {
        width: 100%;
        font-size: 1rem;
        margin-left: 1rem;
        margin-right: 1rem;
        margin-top: 1rem;
    }

    .ham {
        position: fixed;
        bottom: -12rem;
        z-index: 124;
        left: -7rem;
    }

    .project-text2 {
        width: 100%;
        font-size: 1rem;
        margin: 1rem 1rem 2rem 1rem;
    }

    .bup {
        position: fixed;
        bottom: 0.7rem;
        right: 1.5rem;
        z-index: 1216;
        width: 3rem;
    }

    .bupp {
        position: fixed;
        bottom: 37px;
        z-index: 1235;
        right: 39px;
        width: 2rem;
    }

    .side-info {
        position: absolute;
        top: 48rem !important;
        left: 13rem !important;
    }

    .contact-form {
        top: 24.9rem !important;
        position: absolute;
        padding-top: 2rem !important;
        left: 2rem !important;
        width: 24rem !important;
        height: 27.1875rem !important;
    }

    .contact-text {
        width: 18.25rem !important;
        padding: 2.1rem 2.5rem 2rem 4rem !important;
        position: absolute !important;
        top: 14rem !important;
        left: 5.5rem !important;
    }

    .project-heading {
        width: 100% !important;
        font-size: 1rem !important;
    }

    .project-heading::after {
        width: 15rem !important;
        left: 27px !important;
        top: 66px !important;
    }

    .project-img {
        width: 16rem;
        margin-left: 0;
    }

    .pro-container {
        width: 67%;
        position: absolute;
        top: 13rem;
        left: 6rem;
    }

    .about-content {
        width: 67.5%;
        left: 6rem;
    }

    .icon1 {
        top: 14.7rem !important;
        left: 4px !important;
    }

    .about-in {
        height: 20rem !important;
        left: 10rem !important;
        width: 92.5% !important;
    }

    .about-in img {
        margin-left: 0 !important;
        margin-top: 31px !important;
    }

    .heading {
        top: 6rem;
        left: 7.5rem;
    }

    .mid {
        position: absolute !important;
        flex-direction: column !important;
        top: 17rem !important;
        height: 20rem !important;
        left: 8rem !important;
        width: 78.5% !important;
        display: flex !important;
    }

    .p-bar {
        height: 0.83rem !important;
        margin-right: 30px !important;
        width: 14rem !important;
        margin-top: 4px !important;
        margin-left: 1rem !important;
        background: #EBF3F5 !important;
    }

    .img {
        width: 2.1875rem !important;
        margin-left: 6px !important;
        height: 3rem !important;
    }

    .s-i {
        display: flex !important;
        justify-content: space-between !important;
        width: 14rem !important;
        margin-left: 1rem !important;
    }

    .skill-content {
        width: 74% !important;
        height: 5.625rem !important;
        top: 11.5rem !important;
        left: 6rem !important;
        font-size: 1.2rem !important;
    }

    .skill-componen {
        position: absolute !important;
        top: 24.5rem !important;
        width: 75% !important;
        left: 3.5rem !important;
    }

    .navbar {
        display: none;
    }

    .margin {
        padding-top: 0 !important;
    }

    .frame-9 {
        display: none !important;
    }

    .hamburger-icon {
        opacity: 1;
        animation: slideRight 2s ease forwards;
    }

    .ankit {
        font-size: 108.839325px !important;
    }

    .frame-2 {
        left: 66px !important;
        top: 205px !important;
    }

    .i-am-a-student-of-computer-science-engineering-i-am-a-full-stack-web-developer-and-good-cooder {
        font-size: 15.374292px !important;
        top: 133px !important;
        color: #222222 !important;
    }

    .frame-7 {
        left: 65px !important;
        top: 502px !important;
    }

    body {
        background-color: #000000;
        overflow-y: scroll;
    }

    .logo svg {
        width: 10rem;
        position: absolute;
        top: -51px;
        z-index: 11;
        left: -14px;
    }

    .logo-im {
        z-index: 15;
        position: absolute;
        left: 1rem;
        top: 0rem;
        width: 8rem;
    }

    .s-sv svg {
        display: none;
    }

    .rec-webdevloper {
        height: 51.25vh;
    }

    .rec-webdesign {
        height: 49.25vh;
    }

    .contact-container {
        position: absolute;
        left: 0 !important;
    }
}


@media (max-width: 1451px) {
    .rectangle-4 {
        right: 1055px;
    }

    .rectangle-5 {
        right: 1192px;
    }
}

@media (max-width: 1346px) {

    .home-photo {
        position: absolute;
        width: 28rem;
        top: 9rem;
        left: 24rem;
    }

    .ellipse-3 {
        z-index: -1;
        left: 42rem;
        top: 727px;
    }

    .rec-webdevloper {
        z-index: 12;
    }

    .about-in img {
        width: inherit;
        margin-left: 5rem;
        margin-top: 50px;
    }

    .icon1 {
        position: absolute;
        top: 16.7rem;
        left: 5rem;
    }

    .contact-container {
        position: absolute;
        right: 108%;
    }

    .ham {
        bottom: -103px;
    }

    .side-info {
        z-index: 12;
        left: 26%;
    }

}

@media (max-width: 1100px) {

    .s-sv svg {
        position: absolute;
        top: -155px;
        right: -144px;
    }

    .rectangle-4 {
        right: 1055px;
    }
}

@media (max-width: 1224px) {
    .project-text2 {
        width: 66rem;
        margin: 1rem 8.5rem 3rem 10rem;
    }

    .nav {
        left: 18rem;
    }

    .side-info {
        position: absolute;
        top: 48rem;
        left: 13rem;
    }

    .contact-container {
        position: absolute;
        right: 114%;
    }
}

@media (max-width: 1075px) {

    .home-photo {
        position: absolute;
        width: 25rem;
        top: 11rem;
        left: 24rem;
    }
}

@media (max-width: 1034px) {

    .home-photo {
        width: 23rem;
    }
}

@media (max-width: 1000px) {
    .home-photo {
        left: 22rem;

    }

    .i-am-a-student-of-computer-science-engineering-i-am-a-full-stack-web-developer-and-good-cooder {
        font-size: 15.374292px;
        top: 133px;
        color: #222222;
    }

    .frame-9 {
        left: 80px;
    }

    .frame-2 {
        left: 87px;
    }

    .frame-7 {
        left: 84px;
    }

}

@media (max-width: 940px) {
    .home-photo {
        left: 20rem;
    }

}

@media (max-width: 900px) {
    .home-photo {
        display: none;
    }

    .frame-7 {
        left: 127px;
        top: 485px;
    }

    .frame-2 {
        left: 126px;
    }

    .i-am-a-student-of-computer-science-engineering-i-am-a-full-stack-web-developer-and-good-cooder {
        font-size: 18.374292px;
    }

    .contact-me {
        left: 523px;
    }

    .project {
        left: 382px;
    }

    .about {
        left: 251px;
    }

    .skills {
        left: 120px;
    }
}

@media (max-width: 850px) {

    #home {
        border: none;
        margin: 0;
        border-radius: 0;
        height: 100vh;
        width: 100%;
        background: hidden;
        box-shadow: none;
    }

    #main {
        background: radial-gradient(closest-side, rgb(235, 243, 245) 10.4572%, rgb(197 226 240 / 86%) 100%);
    }

    body {

        -ms-overflow-style: none;
        scrollbar-width: none;
        overflow-y: scroll !important;
    }

    body::-webkit-scrollbar {
        display: none;
    }

    .navbar {
        display: none;
    }

    .margin {
        padding-top: 0 !important;
    }

    #skills {
        height: 215vh;
    }

    #about {
        height: 164vh;
    }

    #project {
        height: 300vh;
    }

    #contact {
        height: 137vh;
    }

    #skills,
    #project,
    #about,
    #contact {
        border: none;
        margin: 0;
        border-radius: 0;
        width: 100%;
        overflow-y: hidden;
        background: hidden;
        box-shadow: none;
    }

    /* #about .bottom-up {
        display: none;
    } */


    .md\:w-56 {
        width: auto !important;
    }
    .md\:h-auto {
        height: 14rem !important;
    }
    .md\:flex {
        display: flex;
        flex-direction: column !important;
    }
   

    .ic {
        margin-left: 1.5rem;
    }

    .project-text1 {
        width: 100%;
        font-size: 1rem;
        margin-left: 3rem;
        margin-right: 3rem;
        margin-top: 1rem;
    }

    .ham {
        position: fixed;
        bottom: -12rem;
        z-index: 124;
        left: -7rem;
    }

    .project-text2 {
        width: 100%;
        font-size: 1rem;
        margin: 1rem 3rem 2rem 3rem;
    }

    .bup {
        position: fixed;
        bottom: 0.7rem;
        right: 1.5rem;
        z-index: 1216;
        width: 3rem;
    }

    .bupp {
        position: fixed;
        bottom: 37px;
        z-index: 1235;
        right: 39px;
        width: 2rem;
    }

    .side-info {
        position: absolute;
        top: 48rem;
        left: 13rem;
    }

    .contact-form {
        top: 24.9rem;
        position: absolute;
        padding-top: 2rem;
        left: 2rem;
        width: 26rem;
        height: 27.1875rem;
    }

    .contact-text {
        width: 18.25rem;
        padding: 2.1rem 2.5rem 2rem 4rem;
        position: absolute;
        top: 14rem;
        left: 5.5rem;
    }

    .project-heading {
        width: 100%;
        font-size: 1rem;
    }

    .project-heading::after {
        width: 15rem;
        left: 23%;
        top: 66px;
    }

    .project-img {
        width: 16rem;
        margin-left: 0;
    }

    .pro-container {
        width: 67%;
        position: absolute;
        top: 13rem;
        left: 6rem;
    }

    .about-content {
        width: 67.5%;
        left: 6rem;
    }

    .icon1 {
        top: 18.7rem;
        left: 73px;
    }

    .about-in {
        height: 22rem;
        left: 10rem;
        width: 92.5%;
    }

    .about-in img {
        margin-left: 0;
        margin-top: 0;
    }

    .heading {
        top: 6rem;
        left: 7.5rem;
    }

    .mid {
        position: absolute;
        flex-direction: column;
        top: 17rem;
        height: 20rem;
        left: 8rem;
        width: 78.5%;
        display: flex;
    }

    .p-bar {
        height: 0.83rem;
        margin-right: 30px;
        width: 14rem;
        margin-top: 4px;
        margin-left: 1rem;
        background: #EBF3F5;
    }

    .img {
        width: 2.1875rem;
        margin-left: 6px;
        height: 3rem;
    }

    .s-i {
        display: flex;
        justify-content: space-between;
        width: 14rem;
        margin-left: 1rem;
    }

    .skill-content {
        width: 74%;
        height: 5.625rem;
        top: 11.5rem;
        left: 6rem;
        font-size: 1.2rem;
    }

    .skill-componen {
        position: absolute;
        top: 24.5rem;
        width: 75%;
        left: 4.5rem;
    }

    .navbar {
        display: none;
    }

    .margin {
        padding-top: 0 !important;
    }

    .frame-9 {
        display: none;
    }

    .hamburger-icon {
        opacity: 1;
        animation: slideRight 2s ease forwards;
    }

    .bottom-up {
        display: none;
    }


    .logo svg {
        width: 10rem;
        position: absolute;
        top: -35px;
        z-index: 11;
        left: 0;
    }

    .logo-im {
        z-index: 15;
        position: absolute;
        left: 1.5rem;
        top: 0rem;
        width: 10rem;

    }

    .s-sv svg {
        display: none;
    }

    .rec-webdevloper {
        height: 51.25vh;
    }

    .rec-webdesign {
        height: 49.25vh;
    }

    .contact-container {
        position: absolute;
        left: 12%;
    }


}

@media (max-width: 1200px) {
    .contact-me {
        left: 523px;
    }

    .project {
        left: 382px;
    }

    .about {
        left: 251px;
    }

    .skills {
        left: 120px;
    }

    .skill-componen {

        width: 67%;
        left: 20%;
    }

    .img {
        width: 3.1875rem;
        margin-left: 3rem;
        MARGIN-RIGHT: 3rem;
    }

    .s-i {

        width: 89%;
    }

    .s-itean {
        width: 90%;
    }

    .p-bar {
        width: 90%;
    }
}

@media (min-width: 1650px) {
    .frame-9 {
        left: 150px;
        top: 663px;
    }

    .rectangle-4 {
        right: 1377px;
        top: 769px;
    }

    .home-photo {
        top: 9rem;
        left: 30rem;
    }

    .frame-2 {
        left: 120px;
        top: 230px;
    }

    .frame-7 {
        left: 120px;
        top: 545px;
    }

    .icon1 {
        top: 21.7rem;
        left: 8rem;
    }

    .contact-container {
        position: absolute;
        top: 3rem;
        left: 1rem;
    }

    .side-info {
        top: 34rem;
        left: 21rem;
    }

}

@media (max-width: 1440px) {
    .frame-9 {
        top: 517px;
    }

    .rec-webdevloper svg {
        margin-bottom: 1rem;
    }

    .icon1 {
        top: 13.7rem;
        left: 6rem;
    }

    .about-in img {
        margin-top: 0px;
    }

    .about-content {
        top: 65rem;
    }
}

@media (max-width: 450px) {
    .ham {
        bottom: -16rem;
        left: -11.9rem;
    }

    .frame-2 {
        left: 30px !important;
        top: 175px !important;
    }

    .i-am-a-student-of-computer-science-engineering-i-am-a-full-stack-web-developer-and-good-cooder {
        width: 20rem;
        line-height: 20px;
    }

    .ankit {
        font-size: 70.839325px !important;
        width: 19rem;
    }

    .hello-i-m {
        font-size: 18.805294px;
    }

    .frame-7 {
        left: 31px !important;
        top: 475px !important;
    }

    .side {
        width: 3.625rem;
    }

    .ellipse-20 {
        right: -1.9rem;
        object-fit: contain;
        width: fit-content;
        /* height: 0; */
    }

    .logo-im {
        left: 0.5rem;
        top: -0.3rem;
        width: 9rem;
    }

    .logo svg {
        width: 10rem;
        top: -62px;
        left: -20px;
    }

    .skill-content {
        width: 73.5% !important;
        height: 5.625rem !important;
        top: 11.5rem !important;
        left: 4rem !important;
        font-size: 1.2rem !important;
    }

    .skill-componen {
        top: 27.5rem !important;
        width: 76% !important;
        left: 3rem !important;
    }

    .img {
        width: 0 !important;
        margin-left: 20px !important;
        MARGIN-RIGHT: 2.5rem;
    }

    .img img {
        margin-top: 5px;
        width: 2rem;
    }

    .p-bar {
        width: 80% !important;
    }

    .s-itean,
    .s-i {
        width: 80% !important;
    }

    .about-in img {
        height: 16rem;
        margin-left: -50px !important;
    }

    .icon1 {
        top: 14.7rem !important;
        left: -4rem !important;
    }

    .about-info {
        position: absolute !important;
        left: -4rem !important;
        top: 18rem !important;
        width: 100% !important;
    }

    .about-content {
        bottom: 90px;
        left: 4rem !important;
    }

    .pro-container {
        width: 80%;
        top: 14rem;
        left: 2rem;
    }

    #project {
        height: 340vh !important;
    }

    .contact-form {
        top: 24.9rem !important;
        position: absolute;
        padding-top: 2rem !important;
        left: 2rem !important;
        width: 19rem !important;
        height: 29.1875rem !important;
    }

    .contact-text {
        width: 16rem !important;
        padding: 1.1rem 1.5rem 2rem 2rem !important;
        position: absolute !important;
        top: 13rem !important;
        left: 3.5rem !important;
    }

    .con-heading {
        margin-left: 3rem;
    }

    .inputs input {
        margin: 0.6rem 0 0 3rem;
    }

    #massage {
        margin: 0.6rem 0 0 3rem;
    }

    #btn {
        margin: 1.5rem 0rem 0rem 3rem;
    }

    .side-info {
        left: 6rem !important;
        top: 48.5rem !important;
    }

    #contact {
        height: 125vh;
    }

    .icon-1,
    .icon-2,
    .icon-3 {
        width: 20px;
    }

    #nav-1 ul {
        margin: 0;
        position: absolute;
        top: 30%;
        left: 20%;
    }

    #nav-1 a {
        text-decoration: none;
    }

    #nav-1 li {
        list-style: none;
        font-size: 18px;
        color: #fff;
        line-height: 2.3;
        text-transform: uppercase;
        letter-spacing: 1.7px;
    }

    #nav-1 li:hover {
        transform: scale(1.2);
    }

    #skills {
        height: 195vh !important;
    }

    .contact-text {
        height: 14.25rem;
    }

    .mob {
        display: block;
    }

    .mob1 {
        display: none;
    }

}

@media (max-height: 700px) {
    #about {
        height: 190vh !important;
    }

    #contact {
        height: 135vh !important;
    }

    #project {
        height: 360vh !important;
    }

    #skills {
        height: 230vh !important;
    }       


}

@media (min-height: 720px)and (min-width:1520px) {
   


    .rec-webdevloper svg {
        margin-bottom: 1rem;
        width: 1.5rem;
    }

    .frame-2 {
        left: 137px;
        top: 173px;
    }

    .ankit {
        left: 0px;
        top: 55.9px;
    }

    .i-am-a-student-of-computer-science-engineering-i-am-a-full-stack-web-developer-and-good-cooder {

        left: 0px;
        top: 115px;
    }

    .frame-7 {
        left: 137px;
        top: 444px;
    }

    .home-photo {
        width: 28%;
        top: 12rem;
        left: 37rem;
    }

    .frame-9 {
        left: 140px;
        top: 481px;
    }

    .rectangle-5 {
        right: 1278px;
        top: 561px;
    }

    .rectangle-4 {
        right: 1129px;
        top: 592px;
    }.heading {
        position: absolute;
        top: 12rem;
        left: 17.5rem;
    }.skill-componen {
        position: absolute;
        top: 25.5rem;
        width: 52%;
        left: 22.5rem;
    }.skill-content {
        top: 17.5rem;
        left: 17rem;
    }.heading {
        top: 13rem;
        left: 17.5rem;
    }.side-info {
        top: 34rem;
        left: 23rem;
    }.contact-form {
        top: 15.9rem;
        left: 37rem;
    }.con-heading {
        margin-top: 2.5rem;
    }.contact-text {
        top: 18rem;
        left: 16.5rem;
    }#skills .bottom-up,#project .bottom-up{
        position: absolute !important;
        top: 42rem !important;
        right: 0 !important;
    }
    #skills .bottom-up .sv-2,#project .bottom-up .sv-2 {
        position: absolute !important;
        bottom: -47.2rem !important;
        right: 42.5px !important;
        width: 1.5rem !important;
    }
     .sv-2,#project .bottom-up .sv-2 {
        bottom: -59.2rem !important;
    }.img {
        height: 4rem;
    }.pro-container {
        width: 60%;
        position: absolute;
        top: 19rem;
        left: 20rem;
    }.project-heading::after {
        left: 318px;
        top: 72px;
    }.mid {
        top: 18rem;
        left: 10rem;
    }.about-content {
        top: 40rem;
        width: 64.5%;
        height: 5.625rem;
        left: 17rem;
    }.about-in img {
        width: 23rem;
        height: 21.5rem;
        margin-left: 13rem;
        margin-top: 7px;
    }.icon1 {
        top: 16.7rem;
        left: 14rem;
    }.contact-container{
        left: 3rem;
        position: absolute;
    }
    


}