/* =========================================
   1. LOGO SCROLL ANIMATION SPEED
========================================= */

:root {
    --weblodge-logo-scroll-duration: 75s;
}


/* =========================================
   2. LOGO SCROLL SECTION
   USES GLOBAL .wla-section
========================================= */

.weblodge-agency-home-page-logo-scroll-section {
    width: 100%;
    text-align: center;
}


/* =========================================
   3. LOGO SLIDER
========================================= */

.weblodge-agency-home-page-logo-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 50px;
}


/* Remove extra space after the last slider */

.weblodge-agency-home-page-logo-slider:last-child {
    margin-bottom: 0;
}


/* =========================================
   4. LOGO TRACK
========================================= */

.weblodge-agency-home-page-logo-track {
    display: flex;
    align-items: center;
    width: max-content;

    animation:
        weblodge-home-page-logo-scroll
        var(--weblodge-logo-scroll-duration)
        linear infinite;

    will-change: transform;
}


/* =========================================
   5. FIRST AND SECOND ROW LOGOS
========================================= */

.logo-carousel-item {
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 25px;
    flex-shrink: 0;
}

.logo-carousel-item img {
    max-width: 100%;
    max-height: 65px;
    object-fit: contain;
    opacity: 0.65;
    filter: grayscale(100%);
    transition: 0.35s ease;
}

.logo-carousel-item img:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05);
}


/* =========================================
   6. NORMAL SCROLL ANIMATION
========================================= */

@keyframes weblodge-home-page-logo-scroll {
    0% {
        transform: translateX(0);
    }

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


/* =========================================
   7. REVERSE SCROLL ANIMATION
========================================= */

.weblodge-agency-home-page-logo-slider.reverse
.weblodge-agency-home-page-logo-track {
    animation:
        weblodge-home-page-logo-scroll-reverse
        var(--weblodge-logo-scroll-duration)
        linear infinite;
}

@keyframes weblodge-home-page-logo-scroll-reverse {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}


/* =========================================
   8. THIRD ROW SCROLL DIRECTION
========================================= */

.weblodge-agency-home-page-logo-slider.bottom
.weblodge-agency-home-page-logo-track {
    animation:
        weblodge-home-page-logo-scroll
        var(--weblodge-logo-scroll-duration)
        linear infinite;
}


/* =========================================
   9. THIRD ROW LOGOS
========================================= */

.logo-carousel3rd-item {
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 25px;
    flex-shrink: 0;
}

.logo-carousel3rd-item img {
    max-width: 100%;
    max-height: 65px;
    object-fit: contain;
    opacity: 0.65;
    filter: grayscale(100%);
    transition: 0.35s ease;
}

.logo-carousel3rd-item img:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05);
}


/* =========================================
   10. SLIDER FADE EDGES
========================================= */



.weblodge-agency-home-page-logo-slider::before {
    content: "";
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    left: 0;
    background: linear-gradient(
        to right,
        #170154,
        transparent
    );
}

.weblodge-agency-home-page-logo-slider::after {
    content: "";
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    right: 0;
    background: linear-gradient(
        to left,
        #170154,
        transparent
    );
}


/* =========================================
   11. TABLET RESPONSIVE
========================================= */

@media (max-width: 1024px) {

    .weblodge-agency-home-page-logo-slider {
        margin-bottom: 35px;
    }

}


/* =========================================
   12. MOBILE RESPONSIVE
========================================= */

@media (max-width: 767px) {

    .logo-carousel-item,
    .logo-carousel3rd-item {
        width: 150px;
        padding: 0 10px;
    }

    .weblodge-agency-home-page-logo-slider::before,
    .weblodge-agency-home-page-logo-slider::after {
        width: 0;
    }

    .weblodge-agency-home-page-logo-slider {
        margin-bottom: 15px;
    }

}