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


    body{
        max-width: 100%;
    }

    /* nav css start */
    .logo {
        width: 22vw;
        /* height: 6vw; */
    }
    .logo h2 {
        font-size: 3vw;
    }
    .nav-links ul li a {
        font-size: 3vw;
    }
    /* nav css end */

    /* hero sec css start */
    .hero-section {
        max-width: 100vw;
        height: auto;
    }

    .hero-sec-inner {
        flex-direction: column;
        gap: 10vw;
        height: auto;
        max-width: 90vw;
    }

    .hero-sec-left {
        max-width: 90vw;
        height: auto;
    }

    .btns {
        width: 89vw;
    }

    .btn-left {
        width: 29vw;
        height: auto;
        font-size: 4vw;
    }

    .btn-right {
        width: 43vw;
        font-size: 4vw;
        height: auto;
    }

    .dot {
        width: 5vw;
        height: auto;
    }

    .dot p {
        width: 1.2vw;
        height: 1.2vw;
    }

    .hero-lheading {
        font-size: 12vw;
    }

    .hero-sec-right {
        max-width: 90vw;
        height: 66vw;

    }

    .boxes {
        width: 90vw;
        height: 66vw;
        gap: 1vw;
    }

    .box1 {
        width: 15vw;
        height: 32vw;
    }

    .box2 {
        width: 74vw;
        height: 32vw;
    }

    .box3 {
        width: 90vw;
        height: 32vw;
    }

    .hero-img {
        top: 10.1vw;
        left: 18vw;
    }

    .hero-img img {
        width: 60vw;
    }

    /* hero sec css end */

    /* sec 1 css start */
    .sec1 {
        max-width: 100vw;
        height: 105vw;
    }

    .sec-1-inner {
        max-width: 90vw;
        height: 105vw;
        margin: 0vw 0vw 0vw 9vw;
        padding: 0vw;
        flex-direction: column;
    }

    .sec-1-left {
        width: 80vw;
        height: 45vw;
    }

    .sec1lp {
        font-size: 3vw;
    }

    .sec1l {
        font-size: 6vw;
    }

    .sec1para {
        font-size: 3vw;
        width: 70vw;
    }

    .boxes-box {
        width: 90vw;
        height: 45vw;
        padding-top: 3vw;
        padding-left: 30vw;
    }

    .sec-1-right {
        width: 90vw;
        height: 56vw;
    }

    .box-1 {
        width: 60.8vw;
        height: 30vw;
        padding: 4vw 0vw 4vw 5vw;
        border-top-left-radius: 2vw;
        border-right: 0.2vw solid #002759;
    }

    .box-1 .heading {
        font-size: 3vw;
    }

    .box-1 .lorem {
        font-size: 2vw;
    }

    .box-2 {
        width: 25vw;
        height: 15vw;
        top: 15.5vw;
        right: 22vw;
    }

    .flex-box {
        width: 53vw;
        height: 18vw;
    }

    .sec-1-boxes {
        width: 53vw;
        height: 1.7vw;
        display: flex;
        gap: 36vw;
    }

    .full-box {
        width: 35vw;
        height: 16vw;
    }

    .head {
        width: 35vw;
        height: 3vw;
    }

    img.cursor {
        top: 10vw;
        right: 78vw;
        width: 4vw;
    }

    .box-2 {
        width: 50vw;
        height: 25vw;
        top: 16.4vw;
        right: 27vw;
    }

    .box-2 h4 {
        font-size: 4vw;
    }

    .icon-box {
        width: 45.5vw;
        height: 14vw;
        display: flex;
        gap: 3vw;
    }

    img.react {
        width: 10vw;
        height: 10vw;
    }

    img.js {
        width: 10vw;
        height: 10vw;
    }

    img.figma {
        width: 10vw;
        height: 9vw;
    }

    img.github {
        width: 10vw;
        height: 10vw;
    }

    .git-img {
        right: 4vw 20px;
        width: 20vw;
    }

    /* sec 1 css end */

    /* sec 2 css start */
    .sec2 {
        height: 320vw;
        max-width: 100vw;
    } 

    .sec-2-inner {
        height: 320vw;
        max-width: 90vw;
        margin: 0vw 0vw 0vw 5vw;
    }

    .sec2-h2 {
        font-size: 6vw;
    }

    .sec2-p {
        width: 90vw;
        font-size: 2.5vw;
        margin: 2vw 0vw;
    }

    .sec-2-flex-box {
        width: 90vw;
        height: 300vw;
        display: flex;
        flex-direction: column;
        gap: 5vw;
    }

    .box-a {
        width: 90vw;
        height: 100vw;
        padding-bottom: 5vw;
    }

    .box-a h2 {
        font-size: 5.5vw;
        width: 50vw;
    }

    .pp-box {
        width: 76vw;
        height: 11vw;
    }

    .pp-box-p {
        width: 60vw;
        height: 11vw;
        font-size: 3vw;
    }

    .aero-right {
        width: 3vw;
        height: 11vw;
        padding-left: 4vw;
    }

    i.fa-solid.fa-arrow-right.ar {
        border-radius: 5vw;
        padding: 4vw;
        font-size: 5vw;
        border: 0.5vw solid white;
    }

    .box-b {
        width: 90vw;
        height: 100vw;
        padding-bottom: 10vw;
    }

    .box-b h2 {
        font-size: 5.5vw;
    }

    .box-c {
        width: 90vw;
        height: 100vw;
        padding-bottom: 5vw;
    }

    .box-c h2 {
        font-size: 5.5vw;
    }
    /* sec 2 css end */

    /* sec 3 css start */
    .sec-3 {
        height: 35vw;
        padding: 5vw 0vw;
    }

    .sec3-inner {
        height: 29vw;
        flex-direction: column;
        align-items: center;
    }

    .sec-3-left {
        width: 80vw;
        height: 10vw;
        text-align: center;
    }

    h2.s3l-h2 {
        font-size: 4.5vw;
    }

    .sec-3-right {
        width: 90vw;
        height: 13vw;
        padding: 3vw;
    }

    p.s3r-p {
        font-size: 2.8vw;
    }

    /* sec 3 css end */

    /* sec 4 css start */
    .sec-4 {
        height: 80vw;
    }

    .sec4-inner {
        height: 80vw;
    }

    .sec4-inner ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4.5vw;
    }
    .sec4img {
        width: 25vw;
        height: 7vw;
    }
    img.google {
        width: 22vw;
        height: 8vw;
    }
    img.smit {
        width: 25vw;
        height: 12vw;
    }
    .aro-rght {
        gap: 4vw;
    }
    p.yrn {
        font-size: 5vw;
        padding-top: 0.5vw;
    }
    i.fa-solid.fa-arrow-right.sec4-aro {
        padding-top: 1.8vw;
        font-size: 4vw;
    }
    p.sec5-p {
        font-size: 3vw;
    }

    /* sec 4 css end */




















}