/* Basic layout for the logo slider */
.logo-slider {
    width: 100%;
    margin: 0;
    overflow: hidden; /* hides anything that animates out of container */
    text-align: center;
}

.logo-container {
    display: flex;
    justify-content: space-between; /* evenly distribute logos */
    align-items: center;
    min-height: 200px; /* ensure enough height for the container */
    transition: opacity 0.5s ease-in-out;
    /* Remove margin if you were using it to create spacing */
    /* margin: 10px;  <-- remove if set */
}

.logo-item {
    box-sizing: border-box;
    padding: 10px; /* add desired spacing inside each logo box */
}

.logo-container img {
    display: block;
    box-sizing: border-box;
    max-height: 120px;
    width: auto;
}

/* Keyframes for fade-out-up */
@keyframes fadeOutUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* Keyframes for fade-in-up */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Classes to trigger animations */
.fade-out-up {
    animation: fadeOutUp 0.8s forwards;
}

.fade-in-up {
    animation: fadeInUp 0.8s forwards;
}