/* --- Carousel Container --- */
.logo-carousel-container {
    width: 100%; /* Adjust width as needed */
    overflow: hidden; /* Crucial: Hides overflowing content to create the sliding effect */
    background-color: #fff;
    padding: 20px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    
    user-select: none; /* Prevent text selection during drag/scroll */
}

/* --- Logo Strip (the moving part) --- */
.logo-carousel-strip {
    display: flex;
    white-space: nowrap; /* Prevent logos from wrapping */
    will-change: transform; /* Hint to browser for smoother animation */
}

/* --- Individual Logo Styling --- */
.logo-carousel-strip img {
    height: 100px; /* Adjust logo height as desired */
    width: auto;
    margin: 0 40px; /* Space between logos */
    opacity: 0.7; /* Optional: Make them slightly transparent */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    flex-shrink: 0; /* Prevent logos from shrinking */
    cursor: pointer; /* Indicate interactivity */
}

.logo-carousel-strip img:hover {
    opacity: 1; /* Optional: Full opacity on hover */
}

/* Optional: Pause animation on container hover */
.logo-carousel-container:hover .logo-carousel-strip {
    animation-play-state: paused;
}

/* --- Responsiveness for Smaller Screens (Media Queries) --- */

/* --- Media Queries for Responsiveness --- */
@media (max-width: 768px) {
    .logo-carousel-strip img {
        height: 80px;
        /* Smaller logos on tablets */
        margin: 0 20px;
        /* Reduced space */
    }
}

@media (max-width: 480px) {
    .logo-carousel-strip img {
        height: 60px;
        /* Even smaller logos on mobile */
        margin: 0 15px;
        /* Further reduced space */
    }
}