@media (max-width: 1300px) {

    .presentation .container {
        padding: 1vw;
        gap: 1vw;
    }

}

@media (min-resolution: 2dppx) {
  body::before {
    background: radial-gradient(circle, white 1%, transparent 2%);
    background-size: 30px 30px;
    opacity: 1;
  }
}

@media (max-width: 650px) {
    .legal-links {
        margin-bottom: 70px;
    }

    .legal-links p {
        font-size: 0.8rem !important;
    }
}


/*  */

@media (max-width: 728px) {
    
    p {
        font-size: 0.9rem !important;
        line-height: 1.2rem;
    }

    h2 {
        margin-bottom: 10px !important;
        line-height: 2rem;
        font-size: 2rem;
    }

    .portfolio h2 {
        margin-left: 5px;
    }

    section:not(.horizontal-slide) .alt-font {
        font-size: 2.2rem !important;
    }

    /* CUSTOMERS */

    .reviews-container {
        display: flex;
        flex-direction: column;
    }

}

/*  */

@media (max-width: 1000px) {

    section {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow: hidden;
        padding: 15px;
    }

    .container {
        margin: 0 !important;
        padding: 0 !important;
    }

    p {
        margin: 0 !important;
    }

    /* SECTION 1 */

    .zoom-section {
        height: 100dvh !important;
        padding: 0 !important;
    }

    .zoom-image {
        width: 200vw !important;
        top: 60vw;
    }

    .double-marquee {
        top: 130vw;
    }

    /* HORIZONTAL SLIDE */

    .horizontal-slide {
        height: auto;
    }

    .horizontal-slide .container {
        display: flex;
        flex-direction: column;
        height: auto;
        gap: 100px;
    }

    .item {
        display: flex;
        justify-content: space-between;
        position: relative;
        margin: 0;
        top: 0;
        left: 0;
        max-width: 90vw;
        position: relative;
        margin-top: 220px;
    }

    .item > h2 {
        width: 50%;
        font-size: 1.5rem;
        line-height: 1.7rem;
        margin-right: 20px;
    }

    .item > p {
        width: 50%;
    }

    .item1::before {
        content: "";
        display: inline-block;
        background-image: var(--horizontal-img-1);
        position: absolute;
        width: 100%;
        height: 200px;
        left: 0;
        top: -220px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 8px;
    }

       .item2::before {
        content: "";
        display: inline-block;
        background-image: var(--horizontal-img-2);
        position: absolute;
        width: 100%;
        height: 200px;
        left: 0;
        top: -220px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 8px;

    }

       .item3::before {
        content: "";
         display: inline-block;
        background-image: var(--horizontal-img-3);
        position: absolute;
        width: 100%;
        height: 200px;
        left: 0;
        top: -220px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 8px;

    }

       .item4::before {
        content: "";
         display: inline-block;
        background-image: var(--horizontal-img-4);
        position: absolute;
        width: 100%;
        height: 200px;
        left: 0;
        top: -220px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 8px;

    }

    .horizontal-imgs {
        display: none;
    }

    .circle {
        margin-top: 50vh;
        display: none;
    }

    /* PRESENTATION */

    .presentation {
        width: 90vw !important;
        margin-top: 50px;
    }

    .presentation h2 {
        margin-bottom: 20px !important;
        font-size: 2rem;
    }

    .presentation .container {
        flex-direction: column;
        height: auto;
        gap: 10px;
    }

    .left, .right {
        padding: 20px;
    }

    .presentation .purple {
        transform: scale(1);
    }

    /* PORTFOLIO */

    .portfolio {
        margin-top: 100px ;
    }

    .portfolio h2 {
        margin-top: -5px;
    }

    .portfolio-text p {
        width: 50vw;
    }

    .portfolio-grid {
        display: grid;
        grid-template-columns: repeat(2,1fr) !important;
        margin: 70px 0 -170px;
    }
    
    .col1 {
    margin-top: 0;
    }

    .col2 {
        margin-top: 40vh;
    }

    .col3 {
        margin-top:-40vh;
    }

    .col4 {
    margin-top: 0;
    }


    .card {
        aspect-ratio: auto;
        height: 45vw;
    }

    .card-description p {
    font-size: 0.7rem;
    line-height: 1rem;
    }

    .customers {
        margin-top: -50px;
    }

    .customers-text > div, .customers-text p{
        width: 80vw;
    }

    /* CUSTOMERS */

    .reviews-container {
        grid-template-columns: repeat(2, 1fr);
    }

        .customers-logos-container {
        gap: 12vw;
        animation: scroll 40s linear infinite;
    }

    @keyframes scroll {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-50%);
        }
    }
 }