/* =========================================
   БЛОК: НАМ ДОВЕРЯЮТ (Бегущая строка)
   ========================================= */

.partners-section {
    padding: 80px 0 0px;
    position: relative;
    z-index: 10;
    overflow: hidden; /* Важно, чтобы не появился горизонтальный скролл на сайте */
}

/* Обёртка, которая накладывает градиент по краям для плавного исчезновения */
.marquee-wrapper {
    display: flex;
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
    /* Маска скрывает жесткие края экрана слева и справа */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* Трек, который будет двигаться */
.marquee-track {
    display: flex;
    width: max-content;
    /* Анимация: 40 секунд на полный цикл, линейная, бесконечная */
    animation: scrollMarquee 40s linear infinite;
}

/* Остановка анимации при наведении мыши (опционально, но удобно) */
.marquee-track:hover {
    animation-play-state: paused;
}

/* Блок с логотипами */
.marquee-items {
    display: flex;
    gap: 30px;
    padding-right: 30px; /* Отступ между первым и вторым набором */
}

/* Карточка партнера (стекло) */
.partner-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 30px;
    border-radius: 20px;
    /* Для светлой темы: заменили белый прозрачный фон на легкое затемнение */
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.01) 100%);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
}

.partner-card:hover {
    transform: translateY(-5px);
    border-color: rgba(10, 197, 209, 0.3);
    box-shadow: 0 10px 25px rgba(10, 197, 209, 0.15);
}

/* --- МАГИЯ РАЗМЕРОВ КАРТИНОК --- */
.partner-card img {
    height: 90px; /* ЖЕСТКАЯ ВЫСОТА: Все логотипы будут одной высоты */
    width: auto; /* ШИРИНА АВТО: Подстраивается под пропорции */
    object-fit: contain; /* Картинка не сплющивается */
    
    /* Эффект: серые и бледные по умолчанию. 
       ВАЖНО: Если ваши логотипы чисто белого цвета (для темного фона), 
       раскомментируйте свойство invert(1) ниже, чтобы сделать их черными! */
    filter: grayscale(1) opacity(0.6) /* invert(1) */;
    transition: filter 0.4s ease, opacity 0.4s ease;
}

.partner-card:hover img {
    /* Эффект: цветные и яркие при наведении */
    filter: grayscale(0) opacity(1) /* invert(1) */;
}

/* --- Анимация сдвига --- */
@keyframes scrollMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Сдвигаем ровно на половину (на 1 блок marquee-items) */
}

/* --- Адаптив --- */
@media (max-width: 768px) {
    .partner-card {
        padding: 15px 20px;
        border-radius: 16px;
    }
    
    .partner-card img {
        height: 40px; /* На телефонах делаем логотипы чуть меньше */
    }
    
    .marquee-items {
        gap: 20px;
        padding-right: 20px;
    }
}