/* Brands Auto-Scrolling Marquee */

/* Clean wrap with no predefined background, blends seamlessly into Elementor */
.sm-marquee-wrap {

    overflow: hidden;
    position: relative;
    width: 100%;
}

.sm-marquee-outer {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center; /* Centers height nicely if items differ */
    /* Fades the edges using a transparent mask instead of a solid color block */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}

/* Left & Right fading bounds - safely hidden as we use mask-image now */
.sm-fade-left, .sm-fade-right {
    display: none;
}

/* Flex Track for Infinite CSS Animation (NO JS!) */
.sm-marquee-track {
    display: flex;
    gap: 56px;
    align-items: center;
    width: max-content; /* VERY IMPORTANT: Prevents pushing to 100% boundary */
    /* 28s duration - scales based on total track width inherently */
    animation: sm-auto-scroll 28s linear infinite;
    padding-right: 56px; /* Needed so half-point loop offset covers exactly half the content without snapping due to spacing */
}

.sm-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    opacity: 0.85;
    /* Optional: To make color logos black-and-white, un-invert the 'invert(1)' if you have dark logos */
    filter: brightness(0) invert(1);
    transition: opacity 0.3s ease;
    width: 150px;
    height:auto;
}

.sm-logo-item:hover {
    opacity: 1;
}

/* Ensures uploaded SVG/PNG fits nicely */
.sm-logo-item img {
    height: auto;
    max-height: 38px; /* Slightly taller limit for more diverse logos */
    width: auto;
    max-width: 150px; /* Sensible limit */
    display: block;
}

/* Linear infinite seamless pan */
@keyframes sm-auto-scroll {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%); /* Moves half exactly when cloned 2 times! */
    }
}

/* Responsive Overrides */
@media (max-width: 768px) {
    .sm-marquee-outer {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
    }

    .sm-marquee-track {
        gap: 32px;
        padding-right: 32px;
    }

    .sm-logo-item img {
        max-height: 28px;
        max-width: 110px;
    }
}