.elementor-8688 .elementor-element.elementor-element-58a7c433{--display:flex;--overflow:hidden;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-7c697b7b *//* Logo slider container */
.logo-slider-wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 20px 0;
}

/* Gradient effect (left & right) */
.logo-slider-wrapper::before,
.logo-slider-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100px; /* Gradient width on desktop */
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.logo-slider-wrapper::before {
    left: 0;
    background: linear-gradient(to right, #F1F0EE 0%, rgba(241, 240, 238, 0) 100%);
}

.logo-slider-wrapper::after {
    right: 0;
    background: linear-gradient(to left, #F1F0EE 0%, rgba(241, 240, 238, 0) 100%);
}

/* Logo slider */
.logo-slider {
    display: flex;
    width: max-content;
    white-space: nowrap;
    animation: scroll-left 100s linear infinite;
    gap: 40px; /* Space between logos */
}

/* Pause on hover (desktop only) */
@media screen and (min-width: 769px) {
    .logo-slider:hover {
        animation-play-state: paused;
    }
}

/* Logos */
.logo-slider img {
    width: 100px; /* Set width to 100px */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain;
    transition: transform 0.3s ease-in-out;
}

/* Hover effect */
.logo-slider img:hover {
    transform: scale(1.1);
}

/* Infinite scrolling animation */
@keyframes scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-140px * 11)); /* Adjust based on logo size + gap */
    }
}

/* Responsive - Mobile */
@media screen and (max-width: 768px) {
    .logo-slider {
        gap: 20px; /* Smaller gap on mobile */
    }

    .logo-slider img {
        width: 80px; /* Smaller logos on mobile */
        height: 40px;
    }

    .logo-slider-wrapper::before,
    .logo-slider-wrapper::after {
        width: 40px; /* Gradient width on mobile */
    }

    @keyframes scroll-left {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(calc(-100px * 11)); /* Adjusted for mobile */
        }
    }
}/* End custom CSS */