/* Общие стили */
.slider-wrapper {
    position: relative;
    margin-top: 15px;  /* Отступ сверху */
    margin-bottom: 15px; /* Отступ снизу */
}

.slider-container {
    width: 100%;
    height: 400px; /* Высота слайдера */
    position: relative;
    overflow-x: hidden; /* Предотвращение горизонтальной прокрутки */
}

.swiper-pagination {
    text-align: center;
    margin-top: 10px; /* Отступ сверху для пагинации */
    position: relative; /* Позиционирование внутри wrapper */
}

.swiper-slide {
    background-size: cover;
    background-position: center;
    position: relative;
    width: 60%;
    opacity: 0.9;
    transition: opacity 0.5s ease, transform 0.5s ease;
    cursor: grab; /* Добавляем курсор "рука" при наведении */
}

/* Размытие боковых слайдов */
.swiper-slide:not(.swiper-slide-active) {
    filter: blur(3px); /* Размытие боковых слайдов */
    transform: scale(0.9); /* Немного уменьшаем боковые слайды */
}

.swiper-slide-active {
    opacity: 1;
    transform: scale(1);
    filter: blur(0); /* Убираем размытие с активного слайда */
    border-radius: 6px;
}

.slide-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    /* background-color: rgba(0, 0, 0, 0.5); */ /* Закомментирован фон */
    padding: 10px;
    max-width: 500px;
    border-radius: 5px;
}

.slide-content a{
    font-size: 2rem;
    margin-bottom: 10px;
      margin-top: 0;
    font-weight: 700;
     color: white;
    text-transform: uppercase;
}
 
.slide-content p {
    font-size: 1.3rem;
    margin: 20px 0;
}

 .slider-container .button {
    background-color: #e51c2300;
    color: #ffffff;
    padding: 10px 20px;
    font-weight: 500;
    font-size: 1rem!important;
    border-radius: 4px;
     border:3px solid #fff;
    text-decoration: none;
    }

/* Стилизация пагинации */
.slider-wrapper .swiper-pagination-bullet {
    width: 7px !important;
    height: 7px !important;
    background-color: #f2f2f2 !important;
    opacity: 1 !important;
    border-radius: 5px !important; /* Убираем закругление, чтобы сделать квадрат */
    /* margin: 0 8px !important; */ /* Увеличиваем отступ между квадратиками */
    transition: background-color 0.3s ease, transform 0.3s ease !important; /* Плавный переход цвета и размера */
}

.slider-wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #1399fc !important;
    width: 24px !important; /* Растягиваем активный квадрат */
    height: 7px !important; /* Активный квадрат будет немного растянутым */
    transform: scale(1.2) !important; /* Немного увеличиваем активный квадрат */

}

/* Курсор "рука" при клике */
.swiper-slide:active {
    cursor: grabbing;
}

@media (max-width: 768px) {
    .slider-container {
        height: 33vh; /* Уменьшаем высоту слайдера на планшетах */
        overflow-x: hidden; /* Предотвращение горизонтальной прокрутки */
    }
.two-column-block .column-1 img, .two-column-block .column-1 video {
    width: 100%;
    height: 30vh;
    border-radius: 25px;
    object-fit: cover;
}
    .swiper-slide {
        width: 95%; /* Увеличиваем ширину центрального слайда до 95% */
    }

    .slide-content a {
        font-size: 4vw; /* Уменьшаем размер заголовков */
    }

    .slide-content p {
        font-size: 3vw; /* Уменьшаем размер текста */
    }

    .slide-content {
        position: absolute;
        top: 0;
        left: 0;
        color: white;
        padding: 20px 25px;
        max-width: 500px;
        border-radius: 5px;
    }

    .slider-container .button {
        background-color: #e51c2300;
        color: white;
        padding: 10px 20px;
        font-weight: 400;
        font-size: 0.9rem!important;
        text-decoration: none;
    }
}