/* style.css */

/* Basic body styling for context */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #ffffff;
}

.footer-schools {
    padding: 50px 0;
    background-color: #fff;
    text-align: center;
}

.container-schools {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-title {
    font-size: 22px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 40px;
}

.logo-marquee-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    /* Add a defined height to the container to prevent layout shifts */
    height: 100px; /* Adjust as needed, should be a bit more than max-height of images */
    display: flex; /* Ensure inner content respects this height */
    align-items: center; /* Vertically center the logos if the gallery doesn't fill the height */
}

/* Adds a fade effect to the left and right edges */
.logo-marquee-container::before,
.logo-marquee-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px; /* Increased width of the fade for a smoother effect */
    z-index: 2;
    pointer-events: none; /* Allows clicks/hovers on content behind the fade */
}

.logo-marquee-container::before {
    left: 0;
    background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.logo-marquee-container::after {
    right: 0;
    background: linear-gradient(to left, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.logo-gallery {
    display: flex;
    white-space: nowrap; /* Ensures images stay in one line */
    align-items: center;
    /* We'll calculate total width dynamically based on number of images and desired spacing */
    /* Let's say each logo slot is about 200px wide (160px image + 40px gap/padding) */
    /* If you have 18 unique logos, you have 36 total logos in the duplicated list */
    width: calc(18 * (160px + 40px)); /* Total unique logos * (min-width + gap) */
    animation: scroll 40s linear infinite; /* Adjust duration based on number of logos */
}

/* Pause animation on hover */
/* .logo-marquee-container:hover .logo-gallery {
    animation-play-state: paused;
} */

/* The animation keyframes */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Moves the gallery by exactly half its calculated width to loop seamlessly */
        /* It should be (number of unique logos) * (min-width + gap) */
        transform: translateX(calc(-18 * (160px + 40px) / 2));
    }
}

.logo-gallery img {
    max-height: 100px; /* Standardize max height for all logos */
    min-width: 160px; /* Give each image a minimum space it must occupy */
    width: auto; /* Allow width to adjust based on aspect ratio */
    object-fit: contain; /* Scales image down while maintaining aspect ratio */
    flex-shrink: 0; /* Prevent images from shrinking below their min-width/auto width */
    padding: 0 20px; /* Add internal padding to create consistent spacing around each image */
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Individual logo hover effect */
.logo-gallery img:hover {
    filter: grayscale(0%); /* Brings back color on hover */
    opacity: 1;
    transform: scale(1.1); /* Slightly enlarges the logo on hover */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .section-title {
        font-size: 18px;
    }
    .logo-marquee-container {
        height: 80px; /* Adjust height for smaller screens */
    }
    .logo-marquee-container::before,
    .logo-marquee-container::after {
        width: 40px; /* Smaller fade width on smaller screens */
    }
    .logo-gallery {
        width: calc(18 * (120px + 30px)); /* Adjusted for smaller logo size */
        animation-duration: 30s; /* Faster scroll for fewer visible logos */
    }
    .logo-gallery img {
        max-height: 80px;
        min-width: 100px; /* Adjusted min-width for smaller screens */
        padding: 0 15px; /* Adjusted padding */
    }
    
    @keyframes scroll {
        100% {
            transform: translateX(calc(-18 * (100px + 30px) / 2)); /* Adjusted for smaller logo width + padding */
        }
    }
}