/* Define the scrolling animation */
@keyframes scroll-left {
    0% {
        transform: translateX(calc(var(--total-width)));
    }

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

/* Container styling */
.scrolling-images-container {
    border: 2px solid #bbb;
    margin: 20px 0;
    height: 300px;
    overflow: hidden;
    background: linear-gradient(135deg, #ff5f6d, #ffc371); /* Gradient from red to orange */
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3), inset 0 -2px 5px rgba(255, 255, 255, 0.5), 
                    0 4px 8px rgba(0, 0, 0, 0.2), 0 -4px 8px rgba(255, 255, 255, 0.2);
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Center items vertically */
}

/* Styling for the scrolling images */
.scrolling-images {
    display: flex;
    align-items: center; /* Vertically centers the images */
    animation: scroll-left 20s linear infinite;
}

    .scrolling-images img {
        width: 150px; /* Adjust as necessary */
        height: auto; /* Maintain aspect ratio */
        margin-right: 30px; /* Space between images */
    }