/* =========================================================
   NOVACARE CLIENT LOGOS
========================================================= */

.client-logos-section {
    padding: 70px 0;
    background: #0A2B1D;
    overflow: hidden;
}

.client-logos-heading {
    margin-bottom: 40px;
}

.client-logos-heading .section-tag {
    display: inline-block;
    margin-bottom: 12px;
}

.client-logos-heading h2 {
    margin: 0;
    color: #B88A44;
    font-weight: 800;
}


/* =========================================================
   SLIDER
========================================================= */

.client-logo-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
}


/*
 * The track contains the original logos plus
 * an identical duplicate set.
 */

.client-logo-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: clientLogoScroll 30s linear infinite;
}


/* =========================================================
   LOGO ITEM
========================================================= */

.client-logo-item {
    width: 180px;
    height: 100px;

    margin: 0 25px;

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

    flex-shrink: 0;
}


.client-logo-item img {
    display: block;

    max-width: 150px;
    max-height: 70px;

    width: auto;
    height: auto;

    object-fit: contain;

    opacity: .75;

    filter: grayscale(100%);

    transition:
        opacity .3s ease,
        filter .3s ease,
        transform .3s ease;
}


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

    filter: grayscale(0%);

    transform: scale(1.05);
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes clientLogoScroll {

    from {
        transform: translateX(0);
    }

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

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .client-logos-section {
        padding: 55px 0;
    }

    .client-logo-item {
        width: 150px;
        height: 85px;
        margin: 0 18px;
    }

    .client-logo-item img {
        max-width: 125px;
        max-height: 60px;
    }

}


@media (max-width: 576px) {

    .client-logo-track {
        animation-duration: 24s;
    }

    .client-logo-item {
        width: 130px;
        height: 75px;
        margin: 0 14px;
    }

    .client-logo-item img {
        max-width: 110px;
        max-height: 50px;
    }

}