/* ------------------------------------------------------------- */
/* слайдер с плавно меняющимся фоном (картинки) и текстом поверх */
/* ------------------------------------------------------------- */

    .slider-wrapper {
        position: relative;
        width: 100%;
        height: 250px;
        overflow: hidden;
        border-radius: 0px;
        background-color: #000; /* Черный фон вместо белого на всякий случай */
    }

    .slider-card {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0; /* Все скрыты */
        animation: slideFade 16s infinite; /* 16 секунд на 4 слайда */
    }
  
    /* Фоны для каждого блока */
        
    .slider-card-1 .slider-card-bg { background-image: url('../img/slider_familytv.jpg'); }
    .slider-card-2 .slider-card-bg { background-image: url('../img/slider_ipcam.jpg'); }
    .slider-card-3 .slider-card-bg { background-image: url('../img/slider_phonetalk.jpg'); }
    .slider-card-4 .slider-card-bg { background-image: url('../img/slider_supportoffice.jpg'); }
  
    .slider-card-bg {
        position: absolute; 
        z-index: 1;  
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        /*transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Плавный зум */
    }
  
    /* Контент поверх */
    .slider-card-content {
        position: relative;
        z-index: 3; /* Самый верхний слой */
        color: white;  

        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
        text-align: center;
        pointer-events: none; /* Чтобы мышь кликала сквозь текст на фон */
    }
  
  
    /* Тайминги для 4-х слайдов (по 4 секунды на каждый) */
    .slider-card:nth-child(1) { animation-delay: 0s; }
    .slider-card:nth-child(2) { animation-delay: 4s; }
    .slider-card:nth-child(3) { animation-delay: 8s; }
    .slider-card:nth-child(4) { animation-delay: 12s; }
  
    /* Ключевая анимация: плавный переход без пустот */
    @keyframes slideFade {
        0% { opacity: 0; }
        5% { opacity: 1; }      /* Плавное появление (0.8 сек от 16 сек) */
        25% { opacity: 1; }     /* Картинка полностью видна четверть времени */
        30% { opacity: 0; }     /* Плавное исчезновение, пока под ней уже горит следующая */
        100% { opacity: 0; }
    }
  
    /* Слой с градиентом */
    .slider-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Градиент от прозрачного сверху к черному (0.7 прозрачности) снизу */
        background: linear-gradient(135deg, #0b3c5dff, #1d6fa555);
        z-index: 2; /* Выше картинки (z-index: 1), но ниже текста */
        pointer-events: none; /* Чтобы слой не мешал наведению мыши */
    }

    .slider-title {
        font-size: 2.5rem;
        font-weight: 600;
        margin-bottom: 1rem;
        line-height: 1.2;
    }

    .slider-subtitle {
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
        opacity: 0.95;
    }

    @media (max-width: 1024px) {

        .slider-title {
            font-size: 2.0rem;
        }

        .slider-subtitle {
            font-size: 0.8rem;
        }        
        
    }