/* Web Builder Component: landing_powerd_by_logo / design-1 */

.wb-landing_powerd_by_logo-design-1 {
    padding: 80px 0;
    /* Desktop sathi thoda jasta space */
    background: #ffffff;
    overflow: hidden;
    width: 100%;
    position: relative;
    display: block;
    /* Visibility confirm karnyathi */
}

/* Slider Container */
.wb-landing_powerd_by_logo-design-1 .logo-slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
    /* Soft fade effect edges la */
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/* Moving Track */
.wb-landing_powerd_by_logo-design-1 .logo-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: scroll-logos 25s linear infinite;
    will-change: transform;
}

/* Pause animation on hover */
.wb-landing_powerd_by_logo-design-1:hover .logo-track {
    animation-play-state: paused;
}

/* Individual Slide - Desktop Size */
.wb-landing_powerd_by_logo-design-1 .logo-slide {
    width: 250px;
    /* Mothi size */
    padding: 0 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    /* Height confirm karnyathi */
}

/* --- LOGO IMAGE: Default Color State --- */
.wb-landing_powerd_by_logo-design-1 .logo-slide img {
    display: block;
    width: auto;
    max-width: 180px;
    /* Logo size vadhavli */
    max-height: 80px;
    /* Aspect ratio maintain karnyathi */
    filter: grayscale(0%);
    /* Aadhi colored */
    opacity: 1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- HOVER EFFECTS --- */

/* Jevha container var mouse yeil, baki logos faint hotil */
.wb-landing_powerd_by_logo-design-1:hover .logo-slide img {
    opacity: 0.6;
}

/* Jyavar mouse aahe to BLACK & WHITE honar */
.wb-landing_powerd_by_logo-design-1 .logo-slide img:hover {
    filter: grayscale(100%) !important;
    opacity: 1 !important;
    transform: scale(1.1);
    /* Thoda zoom effect */
}

/* --- ANIMATION LOGIC (Desktop: 4 Unique Logos) --- */
@keyframes scroll-logos {
    0% {
        transform: translateX(0);
    }

    100% {
        /* (Slide Width 250px * 4 unique logos) = -1000px */
        transform: translateX(-1000px);
    }
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    .wb-landing_powerd_by_logo-design-1 {
        padding: 40px 0;
    }

    .wb-landing_powerd_by_logo-design-1 .logo-slide {
        width: 160px;
        /* Mobile width */
        padding: 0 20px;
    }

    .wb-landing_powerd_by_logo-design-1 .logo-slide img {
        max-width: 110px;
        max-height: 60px;
    }

    @keyframes scroll-logos {
        0% {
            transform: translateX(0);
        }

        100% {
            /* (160px * 4 logos) = -640px */
            transform: translateX(-640px);
        }
    }
}