/* Jemná čiara nad logami */
.logo-slider .line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #e0e0e0; /* Rovnaká farba ako pod headerom */
    z-index: 2; /* Čiara nad logami */
}

/* Pohybujúce sa logá */
.logo-slider {
    overflow: hidden;
    width: 90%;
    margin-left: 5%;
    background-color: transparent;
    padding: 10px 0;
    position: relative;
    height: 110px; /* Nastavenie pevnej výšky */
}

/* Tiene pomocou pseudo-elementov */
.logo-slider .logo-shadow-left {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 5%;
    z-index: 1;
    background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.logo-slider .logo-shadow-right {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 5%;
    z-index: 1;
    background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    pointer-events: none;
}

/* Logá v horizontálnom posune */
.logo-wrapper {
    display: flex;
    animation: scroll-back-and-forth 180s ease-in-out infinite;
    width: max-content;
}

.logo-wrapper img {
    height: 120px; /* Zväčšenie výšky obrázkov */
    width: auto;
    margin-right: 20px;
    background-color: transparent;
    filter: grayscale(100%);
}

/* Animácia tam a späť s pauzami a presahom na kraji */
@keyframes scroll-back-and-forth {
    0% {
        transform: translateX(0); /* Logá začínajú presne na okraji */
    }
    48% {
        transform: translateX(calc(-100% + 90vw)); /* Pohyb doľava */
    }
    52% {
        transform: translateX(calc(-100% + 90vw)); /* Pauza na konci */
    }
    100% {
        transform: translateX(0); /* Logá sa vrátia presne na okraj */
    }
}

/* Responzívne úpravy pre mobilné zariadenia */
@media (max-width: 768px) {
    .logo-wrapper img {
        height: 100px; /* Upravená výška */
        margin-right: 20px;
    }

    .logo-slider {
        width: 90%;
        margin-left: 5%;
    }
}

@media (max-width: 480px) {
    .logo-wrapper img {
        height: 100px; /* Upravená výška pre malé zariadenia */
        margin-right: 15px;
    }

    .logo-slider {
        width: 90%;
        margin-left: 5%;
    }
}