.elementor-11566 .elementor-element.elementor-element-cb3fa06{--display:flex;}/* Start custom CSS for html, class: .elementor-element-9ce995a *//* Container styling */
.image-scroll-wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
    background: #F1F0EE;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

/* Left and Right Gradient */
.image-scroll-wrapper::before,
.image-scroll-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 200px; /* Desktop gradient width */
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.image-scroll-wrapper::before {
    left: 0;
    background: linear-gradient(to right, #F1F0EE 0%, rgba(241, 240, 238, 0) 100%);
}

.image-scroll-wrapper::after {
    right: 0;
    background: linear-gradient(to left, #F1F0EE 0%, rgba(241, 240, 238, 0) 100%);
}

/* Shared image row styling */
.image-scroll {
    display: flex;
    width: max-content;
    white-space: nowrap;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    gap: 20px; /* Adjust spacing between images */
}

/* Pause animation on hover (desktop only) */
@media screen and (min-width: 769px) {
    .image-scroll:hover {
        animation-play-state: paused !important;
    }
}

/* Top row - Right to Left */
.image-scroll.top {
    animation: scroll-left 100s linear infinite;
}

/* Bottom row - Left to Right */
.image-scroll.bottom {
    animation: scroll-right 100s linear infinite;
}

/* Image styling (Desktop) */
.image-scroll img {
    width: 200px;
    height: 260px;
    object-fit: cover; /* Maintain proportions while filling the box */
    border-radius: 10px;
}

/* Keyframes for right to left scroll (desktop) */
@keyframes scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-220px * 6)); /* 200px width + 20px gap */
    }
}

/* Keyframes for left to right scroll (desktop) */
@keyframes scroll-right {
    from {
        transform: translateX(calc(-220px * 6)); /* 200px width + 20px gap */
    }
    to {
        transform: translateX(0);
    }
}

/* Breakpoint for Laptop (1366px and below) */
@media screen and (max-width: 1366px) {
    .image-scroll img {
        width: 170px;
        height: 230px;
    }

    /* Keyframes for right to left scroll (laptop) */
    @keyframes scroll-left-laptop {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(calc(-190px * 6)); /* 230px width + 20px gap */
        }
    }

    /* Keyframes for left to right scroll (laptop) */
    @keyframes scroll-right-laptop {
        from {
            transform: translateX(calc(-190px * 6)); /* 230px width + 20px gap */
        }
        to {
            transform: translateX(0);
        }
    }
}

/* Responsive - Mobile */
@media screen and (max-width: 768px) {
    .image-scroll {
        gap: 10px; /* Reduce spacing on mobile */
    }
    
    .image-scroll-wrapper {
    gap: 10px;
    }
    
    .image-scroll img {
        width: 140px;
        height: 180px;
        object-fit: cover; /* Maintain proportions while filling the box */
    }

    @keyframes scroll-left {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(calc(-150px * 6)); /* 140px width + 10px gap */
        }
    }

    @keyframes scroll-right {
        from {
            transform: translateX(calc(-150px * 6)); /* 140px width + 10px gap */
        }
        to {
            transform: translateX(0);
        }
    }
    
    /* Adjust gradient width on mobile */
    .image-scroll-wrapper::before,
    .image-scroll-wrapper::after {
        width: 40px; /* Mobile gradient width */
    }
}/* End custom CSS */