/* Root variables */
:root {
    --primary-color: #007bff;
    --secondary-color: #0056b3;
    --text-color: white;
    --background-color: #000;
}

/* Body styles */
body {
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
    background-image: url('images/space.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
    color: var(--text-color);
    font-family: 'Roboto', Arial, sans-serif;
    overflow-x: hidden; /* Предотвращаем горизонтальную прокрутку */
}

/* Обертка для контента */
.content-wrapper {
    display: flex;
    flex-direction: column; /* Контент идет сверху вниз */
    justify-content: flex-start; /* Выровнять по верхней границе */
    align-items: flex-start; /* Выровнять по левой стороне */
    min-height: 100vh; /* Минимальная высота страницы */
    padding: 20px; /* Одинаковые отступы со всех сторон */
    box-sizing: border-box; /* Учитываем padding в ширине */
}

/* Стили для больших экранов */
@media (min-width: 768px) {
    .content-wrapper {
        padding: 20px 40px; /* Большие отступы слева и справа на ПК */
    }
}

/* Swiper container */
.swiper {
    max-width: 1200px; /* Максимальная ширина контейнера */
    width: 100%; /* Занимает всю доступную ширину */
    margin: 0 auto; /* Центрирование */
    position: relative;
    background-color: transparent; /* Фон контейнера (прозрачный) */
    padding: 0; /* Убираем лишние отступы */
    box-sizing: border-box; /* Учитываем padding и border в ширине */
}

/* Swiper wrapper */
.swiper-wrapper {
    display: flex;
    align-items: stretch; /* Растягиваем слайды по высоте */
    transition: transform 0.5s ease; /* Плавная анимация */
}

/* Slides */
.swiper-slide {
    width: auto; /* Автоматическая ширина */
    max-width: 100%; /* Ограничение по ширине экрана */
    height: 450px; /* Высота слайда */
    position: relative; /* Для позиционирования текста */
    overflow: hidden; /* Скрываем лишнее содержимое */
    box-sizing: border-box; /* Учитываем padding и border в ширине */
    flex-shrink: 0; /* Запрещаем сжатие слайдов */
    background: linear-gradient(135deg, #0a1c3f, #2a3e6f); /* Градиент */
    border-radius: 10px; /* Скругляем углы */
    margin-right: 0; /* Убираем отступы между слайдами */
}

/* Изображения */
.swiper-slide img {
    width: 100%; /* Занимает всю ширину контейнера */
    height: 100%; /* Занимает всю высоту контейнера */
    object-fit: cover; /* Обрезает изображение, если оно выходит за пределы */
    border-radius: 10px; /* Скругляет углы */
    display: block; /* Убираем лишние отступы */
    opacity: 0.8; /* Делаем изображение немного прозрачным для акцента на фон */
}

/* Заголовок */
.swiper-slide h3 {
    position: absolute; /* Позиционируем поверх изображения */
    top: 10px; /* Уменьшаем отступ сверху (было 20px, стало 10px) */
    left: 20px; /* Отступ слева */
    margin: 0; /* Убираем стандартные отступы */
    font-size: 1.4rem; /* Размер заголовка */
    font-weight: normal; /* Убираем жирный шрифт */
    color: #4b9cff; /* Синий цвет для заголовка */
    z-index: 2; /* Текст поверх изображения */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Добавляем тень для лучшей читаемости */
}

/* Основной текст */
.swiper-slide p {
    position: absolute; /* Позиционируем поверх изображения */
    top: 60px; /* Поднимаем текст выше */
    left: 20px; /* Отступ слева */
    margin: 0; /* Убираем стандартные отступы */
    font-size: 1rem; /* Размер основного текста */
    font-weight: normal; /* Нежирный шрифт */
    line-height: 1.6; /* Межстрочный интервал */
    color: #cccccc; /* Темно-серый цвет для текста */
    z-index: 2; /* Текст поверх изображения */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Добавляем тень для лучшей читаемости */
}

/* Pagination */
.swiper-pagination {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3; /* Пагинация поверх слайдов */
}

/* Pagination bullets */
.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: #ccc;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    display: inline-block;
    opacity: 0.8;
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

/* Активная точка */
.swiper-pagination-bullet-active {
    background-color: #007aff;
    opacity: 1;
}

/* Navigation buttons */
.swiper-button-next,
.swiper-button-prev {
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3; /* Кнопки поверх слайдов */
    position: absolute;
    top: 50%; /* На уровне центра блока */
    transform: translateY(-50%); /* Центрируем по вертикали */
    font-size: 24px; /* Размер стрелок */
    cursor: pointer; /* Курсор указывает на кликабельность */
}

.swiper-button-next::after,
.swiper-button-prev::after {
    content: ''; /* Добавляем стрелки через псевдоэлементы */
    display: inline-block;
    width: 16px; /* Ширина стрелки */
    height: 16px; /* Высота стрелки */
    border-top: 2px solid white; /* Верхняя линия стрелки */
    border-right: 2px solid white; /* Правая линия стрелки */
    transform: rotate(45deg); /* Поворачиваем для создания стрелки */
}

.swiper-button-prev::after {
    transform: rotate(-135deg); /* Поворачиваем стрелку влево */
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: rgba(0, 0, 0, 0.9); /* Темнеет при наведении */
}

.swiper-button-next {
    right: 20px; /* Кнопка "Вперед" справа */
}

.swiper-button-prev {
    left: 20px; /* Кнопка "Назад" слева */
}

/* Медиа-запросы для мобильных устройств */
@media (max-width: 768px) {
    .swiper-slide {
        width: 100% !important; /* Занимает всю ширину экрана */
        height: auto; /* Высота подстраивается под содержимое */
        max-height: 400px; /* Ограничение высоты для мобильных устройств */
    }

    .swiper-slide img {
        width: 100%; /* Занимает всю ширину контейнера */
        height: auto; /* Сохраняем пропорции изображения */
        object-fit: cover; /* Обрезаем изображение, если оно выходит за пределы */
    }

    /* Убираем пагинацию для мобильных устройств */
    .swiper-pagination {
        display: none; /* Скрываем пагинацию */
    }
}