/* ============================================================
   CLIENTS / LOGO SECTION
   CLEAN COMPLETE CSS
   FONT: URBANIST
============================================================ */


/* ============================================================
   01. CLIENTS SECTION
============================================================ */

.clients-section {
    position: relative;
    width: 100%;
    padding: 42px 0;
    overflow: hidden;
    background: transparent;
    isolation: isolate;
    font-family: "Urbanist", sans-serif;
}


/* ============================================================
   02. CLIENTS HEADING
============================================================ */

.clients-heading {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 0 24px;
    margin: 0 0 70px;
    text-align: center;
    font-family: "Urbanist", sans-serif;
}


/* ============================================================
   03. CLIENTS SUBTITLE
============================================================ */

.clients-subtitle {
    display: inline-block;
    margin: 0 0 18px;
    color: #ffffff;
    font-family: "Urbanist", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 3px;
    text-transform: capitalize;
}

body.light .clients-subtitle {
    color: #171313;
}


/* ============================================================
   04. CLIENTS TITLE
============================================================ */

.clients-title {
    margin: 0;
    color: #ffffff;
    font-family: "Urbanist", sans-serif;
    font-size: clamp(42px, 5.8vw, 57px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: 1px;
    text-wrap: balance;
}

body.light .clients-title {
    color: #171313;
}


/* ============================================================
   05. MARQUEE WRAPPER
============================================================ */

.clients-marquee-wrapper {
    position: relative;

    width: 100vw;
    max-width: 100vw;

    margin-left: 50%;
    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 24px;

    overflow: hidden;
    isolation: isolate;
}


/* ============================================================
   06. MARQUEE ROW
============================================================ */

.clients-marquee {
    position: relative;

    width: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;

    isolation: isolate;
}


/* ============================================================
   07. MARQUEE TRACK
============================================================ */

.clients-track {
    display: flex;
    align-items: center;

    width: max-content;
    flex-shrink: 0;

    will-change: transform;

    animation:
        clientsMoveRight
        34s
        linear
        infinite;
}


/* ============================================================
   08. SECOND ROW
============================================================ */

.clients-marquee-left .clients-track {
    animation:
        clientsMoveLeft
        36s
        linear
        infinite;
}


/* ============================================================
   09. FIRST ROW
   LEFT → RIGHT
============================================================ */

@keyframes clientsMoveRight {

    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }

}


/* ============================================================
   10. SECOND ROW
   RIGHT → LEFT
============================================================ */

@keyframes clientsMoveLeft {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* ============================================================
   11. EDGE FADE
============================================================ */

.clients-marquee-wrapper::before,
.clients-marquee-wrapper::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    width: 140px;

    z-index: 1;

    pointer-events: none;
}


/* ============================================================
   12. DARK MODE EDGE FADE
============================================================ */





/* ============================================================
   13. LIGHT MODE EDGE FADE
============================================================ */




/* ============================================================
   14. CLIENT LOGO
============================================================ */

.client-logo {
    position: relative;

    width: 175px;
    height: 76px;

    flex: 0 0 175px;

    margin-right: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: "Urbanist", sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;

    white-space: nowrap;

    opacity: 0.70;

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}


/* ============================================================
   15. LOGO IMAGE
============================================================ */

.client-logo img {
    display: block;

    width: auto;
    height: auto;

    max-width: 130px;
    max-height: 42px;

    object-fit: contain;

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}


/* ============================================================
   16. DARK MODE LOGO
   SHOW DARK VERSION
============================================================ */

.client-logo .client-logo-dark {
    display: block !important;
}

.client-logo .client-logo-light {
    display: none !important;
}


/* ============================================================
   17. LIGHT MODE LOGO
   SHOW ORIGINAL COLOR VERSION
============================================================ */

body.light .client-logo .client-logo-dark {
    display: none !important;
}

body.light .client-logo .client-logo-light {
    display: block !important;
}


/* ============================================================
   18. CLIENT HOVER
============================================================ */

.client-logo:hover {
    opacity: 1;

    transform: translateY(-3px);
}


/* ============================================================
   19. LOGO HOVER
============================================================ */

.client-logo:hover img {
    opacity: 1;

    transform: scale(1.045);
}


/* ============================================================
   20. LIGHT MODE CLIENT
============================================================ */

body.light .client-logo {
    opacity: 0.88;

    color: rgba(23, 19, 19, 0.70);
}


/* ============================================================
   21. LIGHT MODE LOGO OPACITY
============================================================ */

body.light .client-logo .client-logo-light {
    opacity: 0.90;
}


/* ============================================================
   22. LIGHT MODE LOGO HOVER
============================================================ */

body.light .client-logo:hover .client-logo-light {
    opacity: 1;

    transform: scale(1.045);
}


/* ============================================================
   23. MARQUEE HOVER PAUSE
============================================================ */

.clients-marquee:hover .clients-track {
    animation-play-state: paused;
}


/* ============================================================
   24. SCROLL REVEAL - UP
============================================================ */

.reveal-up {
    opacity: 0;

    transform: translateY(60px);

    transition:
        opacity 0.9s cubic-bezier(.22, 1, .36, 1),
        transform 0.9s cubic-bezier(.22, 1, .36, 1);
}

.reveal-up.is-visible {
    opacity: 1;

    transform: translateY(0);
}


/* ============================================================
   25. SCROLL REVEAL - DOWN
============================================================ */

.reveal-down {
    opacity: 0;

    transform: translateY(-60px);

    transition:
        opacity 0.9s cubic-bezier(.22, 1, .36, 1),
        transform 0.9s cubic-bezier(.22, 1, .36, 1);
}

.reveal-down.is-visible {
    opacity: 1;

    transform: translateY(0);
}


/* ============================================================
   26. SCROLL REVEAL - LEFT
============================================================ */

.reveal-left {
    opacity: 0;

    transform: translateX(-50px);

    transition:
        opacity 0.9s cubic-bezier(.22, 1, .36, 1),
        transform 0.9s cubic-bezier(.22, 1, .36, 1);
}

.reveal-left.is-visible {
    opacity: 1;

    transform: translateX(0);
}


/* ============================================================
   27. SCROLL REVEAL - RIGHT
============================================================ */

.reveal-right {
    opacity: 0;

    transform: translateX(50px);

    transition:
        opacity 0.9s cubic-bezier(.22, 1, .36, 1),
        transform 0.9s cubic-bezier(.22, 1, .36, 1);
}

.reveal-right.is-visible {
    opacity: 1;

    transform: translateX(0);
}


/* ============================================================
   28. LARGE DESKTOP
============================================================ */

@media (min-width: 1200px) {

    .clients-section {
        padding: 42px 0;
    }

    .clients-heading {
        margin-bottom: 82px;
    }

    .clients-subtitle {
        margin-bottom: 20px;

        font-size: 12px;
        letter-spacing: 3.2px;
    }

    .clients-title {
        font-size: clamp(55px, 5.5vw, 57px);
        letter-spacing: 1px;
    }

    .clients-marquee-wrapper {
        gap: 28px;
    }

    .client-logo {
        width: 175px;
        flex-basis: 175px;

        height: 78px;

        margin-right: 18px;
    }

    .client-logo img {
        max-width: 130px;
        max-height: 42px;
    }

    .clients-track {
        animation-duration: 18s;
    }

    .clients-marquee-left .clients-track {
        animation-duration: 20s;
    }

}


/* ============================================================
   29. TABLET
============================================================ */

@media (max-width: 1199px) {

    .clients-section {
        padding: 42px 0;
    }

    .clients-heading {
        margin-bottom: 65px;
    }

    .clients-title {
        font-size: clamp(42px, 6.5vw, 52px);
    }

    .client-logo {
        width: 145px;
        flex-basis: 145px;

        height: 68px;

        margin-right: 15px;
    }

    .client-logo img {
        max-width: 112px;
        max-height: 36px;
    }

    .clients-track {
        animation-duration: 18s;
    }

    .clients-marquee-left .clients-track {
        animation-duration: 20s;
    }

}


/* ============================================================
   30. SMALL TABLET
============================================================ */

@media (max-width: 991px) {

    .clients-section {
        padding: 42px 0;
    }

    .clients-heading {
        padding: 0 20px;

        margin-bottom: 55px;
    }

    .clients-subtitle {
        font-size: 10px;

        letter-spacing: 2.6px;
    }

    .clients-title {
        font-size: clamp(38px, 7vw, 45px);

        letter-spacing: 1px;
    }

    .clients-marquee-wrapper {
        gap: 18px;
    }

    .client-logo {
        width: 130px;
        flex-basis: 130px;

        height: 62px;

        margin-right: 13px;

        font-size: 14px;
    }

    .client-logo img {
        max-width: 100px;
        max-height: 33px;
    }

    .clients-track {
        animation-duration: 18s;
    }

    .clients-marquee-left .clients-track {
        animation-duration: 20s;
    }

}


/* ============================================================
   31. MOBILE
============================================================ */

@media (max-width: 767px) {

    .clients-section {
        padding: 35px 0;
    }

    .clients-heading {
        padding: 0 18px;

        margin-bottom: 45px;
    }

    .clients-subtitle {
        margin-bottom: 14px;

        font-size: 9px;

        letter-spacing: 2.3px;
    }

    .clients-title {
        font-size: clamp(32px, 9.5vw, 38px);

        line-height: 1.08;

        letter-spacing: 1px;
    }

    .clients-marquee-wrapper {
        gap: 12px;
    }

    .clients-marquee-wrapper::before,
    .clients-marquee-wrapper::after {
        width: 60px;
    }

    .client-logo {
        width: 105px;
        flex-basis: 105px;

        height: 54px;

        margin-right: 10px;

        font-size: 12px;
    }

    .client-logo img {
        max-width: 82px;
        max-height: 27px;
    }

    .clients-track {
        animation-duration: 18s;
    }

    .clients-marquee-left .clients-track {
        animation-duration: 20s;
    }

    .reveal-up {
        transform: translateY(40px);
    }

}


/* ============================================================
   32. SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .clients-section {
        padding: 35px 0;
    }

    .clients-heading {
        padding: 0 16px;

        margin-bottom: 38px;
    }

    .clients-subtitle {
        font-size: 8px;

        letter-spacing: 2px;
    }

    .clients-title {
        font-size: clamp(30px, 10vw, 32px);

        letter-spacing: 0.8px;
    }

    .clients-marquee-wrapper::before,
    .clients-marquee-wrapper::after {
        width: 45px;
    }

    .client-logo {
        width: 90px;
        flex-basis: 90px;

        height: 48px;

        margin-right: 8px;
    }

    .client-logo img {
        max-width: 70px;
        max-height: 24px;
    }

    .clients-track {
        animation-duration: 21s;
    }

    .clients-marquee-left .clients-track {
        animation-duration: 22s;
    }

}


/* ============================================================
   33. EXTRA SMALL MOBILE
============================================================ */

@media (max-width: 360px) {

    .clients-section {
        padding: 25px 0;
    }

    .clients-heading {
        margin-bottom: 34px;
    }

    .clients-title {
        font-size: 28px;

        letter-spacing: 0.6px;
    }

    .client-logo {
        width: 80px;
        flex-basis: 80px;

        height: 44px;

        margin-right: 7px;
    }

    .client-logo img {
        max-width: 63px;
        max-height: 21px;
    }

    .clients-track {
        animation-duration: 19s;
    }

    .clients-marquee-left .clients-track {
        animation-duration: 20s;
    }

}


/* ============================================================
   34. REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .clients-track,
    .clients-marquee-left .clients-track {
        animation: none;
    }

    .reveal-up,
    .reveal-down,
    .reveal-left,
    .reveal-right {
        opacity: 1;

        transform: none;
    }

}


/* ============================================================
   END CLIENTS / LOGO SECTION
============================================================ */