@media screen and (max-width: 900px) {
    .hero-section {
        flex-direction: column;
    }

    .hero-section img {
        width: 60%;
    }

    .hero-right {
        padding: 0 60px;
    }

    .services-section img {
        width: 40%;
    }

    .testimonials {
        flex-direction: column;
    }

    .testimonials-section {
        padding: 0 60px;
    }

    .clients {
        width: 100%;
    }

    .why-card-section {
        flex-direction: column;
    }

    .form-section {
        flex-direction: column;
    }

    .contact-section {
        padding: 0 60px;

    }

    form {
        padding: 0;
    }

    /***PROJECT PAGE ***/
    /***PROJECT PAGE ***/
    /***PROJECT PAGE ***/
    /***PROJECT PAGE ***/
    /***PROJECT PAGE ***/

    .hero-project-top {
        padding: 0 60px;
    }

    .project-gallery-section {
        padding: 0 60px;
    }

    .badges {
        flex-wrap: wrap;
        flex: 0 0 auto;
    }

    .pill {
        flex: 0 0 auto;
    }

    .quote {
        padding: 56px 60px 0px 60px;
    }
}

@media screen and (max-width: 768px) {
    nav .ms-logo img {
        width: 230px;
        height: 230px;
        margin-top: -115px;
        /* Half the height */
        margin-left: -115px;
        /* Half the width */
    }

    .ms-logo img {
        width: 230px;
        height: 230px;
    }
}

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

    .hamburger-background,
    .back-icon-background {
        width: 72px;
        height: 72px;
        border-radius: 0 0 16px 0;
    }

    #hamburger-icon {
        display: ;
        width: 20px;
        margin: 0 auto;
        padding-top: 14px;
        height: 6px;
        position: relative;
    }

    .close-button {
        width: 30px;
        height: 30px;
    }

    .close-button :after {
        height: 30px;
    }

    .close-button :before {
        height: 30px;

    }

    .web-body {

        gap: 36px;
        margin-top: 32px;
    }

    .hero-section {
        gap: 36px;
    }

    .hero-section img {
        width: 80%;

    }

    .hero-left {
        display: block;
    }

    .hero-right {
        padding: 0;
    }

    .hero-text h1 {
        max-width: 300px;
    }

    h1 {
        font-size: 40px;
        line-height: 1.12;
    }

    h2 {
        font-size: 32px;
        line-height: 40px;
    }

    h3 {
        font-size: 24px;
        line-height: 32px;
    }

    .services-section {
        flex-direction: column;
        padding: 32px 24px;
        row-gap: 28px;
    }

    .services-inner {
        flex-direction: column;

    }

    .services-section img {
        width: 100%;
    }

    .app-icon,
    .vector-icon {
        flex-direction: column;
        gap: 28px;
    }

    .ui-ux-design,
    .logo-design {
        flex-direction: column;
        gap: 28px;
    }

    .testimonials {
        gap: 28px;
    }

    .testimonials-section {
        padding: 0 24px;
    }


    .why-card-section {
        gap: 28px;
    }

    .why-section {
        padding: 28px 24px;

    }

    .why-card {
        padding: 48px 28px;
        gap: 20px;
    }

    p.number {
        font-size: 40px;
    }

    .contact-section {
        padding: 0 24px;
        gap: 28px;
        margin: 0;
    }

    .form-section img {
        width: 100%;
    }

    .form-section {
        gap: 28px;
    }


    footer {
        margin-top: 28px;
    }

    /***PROJECT PAGE ***/
    /***PROJECT PAGE ***/
    /***PROJECT PAGE ***/
    /***PROJECT PAGE ***/
    /***PROJECT PAGE ***/

    .hero-project-section {
        display: flex;
        flex-direction: column;
        gap: 28px;
        align-items: center;
        position: relative;
        overflow: visible;
        min-height: clamp(320px, 70vh, 460px);
        --circles-offset-y: clamp(24px, 2vh, 0px);
    }

    .hero-headline {
        gap: 16px;
    }

    .hero-project-top {
        gap: 52px;
        padding: 0 24px;
    }

    .hero--icon {
        width: 100%;
        height: auto;
    }

    .hero--wide {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .project-description {
        padding: 32px 24px;
        row-gap: 28px;
    }

    .project-gallery-section {
        padding: 0 24px;
    }

    .project-gallery {
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
        gap: 28px;
        margin-top: 0;
        padding: 0 0 24px 0;
    }


    .quote {
        padding: 24px 24px 0px 24px;
        flex-direction: column;
        text-align: left;
        gap: 24px;
    }

}

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