/* customer-logos.css */

/* Container for customer logos */
.u-logo-container {
    width: 100%; /* Set to 100% of the parent element */
    max-width: 2000px; /* Maximum width to control layout */
    margin: 0 auto; /* Center the container */
    display: flex; /* Use flexbox for layout */
    justify-content: space-around; /* Distribute logos evenly */
    align-items: center; /* Center logos vertically */
    flex-wrap: nowrap; /* Prevent logos from wrapping */
    gap: 40px; /* Space between logos */
    padding: 40px 0; /* Padding for top and bottom */
}

/* Add background color to the section */
#customer-logos {
    background-color: rgba(255, 255, 255, 0.5); /* Light grey with some transparency */
    padding: 20px 0; /* Optional: Add padding for better spacing */
}

/* Individual logo styles */
.u-logo {
    width: 500px; /* Width for all logos */
    height: auto; /* Maintain aspect ratio */
    max-height: 150px; /* Limit max height for uniformity */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .u-logo-container {
        flex-wrap: wrap; /* Allow wrapping on smaller screens */
        justify-content: center; /* Center logos when wrapped */
        gap: 30px; /* Smaller gap for mobile view */
    }

    .u-logo {
        width: 180px; /* Smaller width for logos on smaller screens */
        max-height: 100px; /* Smaller max height */
    }
}