/* Основные стили */
@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');

body {
    font-family: 'Russo One', sans-serif;
    margin: 0;
    padding: 0;

    overflow-x: hidden; /* Убираем горизонтальный скролл */
}

/* Фон всего сайта */
.container {
    width: 100%;
    height: 100%;
    padding-top: 30px;
    background: #000000;
    --gap: 5em;
    --line: 1px;
    --color: rgba(255, 255, 255, 0.2);

    background-image: linear-gradient(
        90deg,
        transparent calc(var(--gap) - var(--line)),
        var(--color) calc(var(--gap) - var(--line) + 1px),
        var(--color) var(--gap)
    ),
    linear-gradient(
        180deg,
        transparent calc(var(--gap) - var(--line)),
        var(--color) calc(var(--gap) - var(--line) + 1px),
        var(--color) var(--gap)
    );
    background-size: var(--gap) var(--gap);
}

/* Галерея */
.gallery {
    display: flex;
    overflow-x: auto; /* Добавляем горизонтальный скролл */
    padding: 10px;
    padding-top: 90px;
    gap: 10px; /* Отступы между изображениями */
    align-items: center; /* Выравнивание по центру по вертикали */
    white-space: nowrap; /* Не позволяет изображениям переноситься на новую строку */
    background: #000000;
    background-image: linear-gradient(
        90deg,
        transparent calc(var(--gap) - var(--line)),
        var(--color) calc(var(--gap) - var(--line) + 1px),
        var(--color) var(--gap)
    ),
    linear-gradient(
        180deg,
        transparent calc(var(--gap) - var(--line)),
        var(--color) calc(var(--gap) - var(--line) + 1px),
        var(--color) var(--gap)
    );
    background-size: var(--gap) var(--gap);
}

.gallery-item-wrapper {
    flex: 0 0 auto; /* Позволяет элементам фиксированной ширины не растягиваться */
    height: 700px; /* Высота изображения по умолчанию */
    overflow: hidden; /* Убираем скролл внутри элемента */
    border-radius: 8px; /* Скругленные углы */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Тень для выделения */
}

.gallery-item {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Обеспечивает, что изображение будет масштабироваться для покрытия контейнера */
    cursor: pointer;
}

/* Модальное окно */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Полупрозрачный черный фон */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Убедиться, что модальное окно поверх всего */
}

.modal-content {
    position: relative;
    width: 80%;
    max-width: 1200px; /* Максимальная ширина модального окна */
    height: 80%; /* Высота модального окна */
    border-radius: 10px; /* Скругленные углы */
    overflow: hidden; /* Убираем внутренний скролл */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Тень для выделения */
    background: #000000;
    background-image: linear-gradient(
        90deg,
        transparent calc(var(--gap) - var(--line)),
        var(--color) calc(var(--gap) - var(--line) + 1px),
        var(--color) var(--gap)
    ),
    linear-gradient(
        180deg,
        transparent calc(var(--gap) - var(--line)),
        var(--color) calc(var(--gap) - var(--line) + 1px),
        var(--color) var(--gap)
    );
    background-size: var(--gap) var(--gap);
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px; /* Ширина кнопки закрытия */
    height: 40px; /* Высота кнопки закрытия */
    font-size: 24px;
    color: #000; /* Цвет крестика */
    cursor: pointer;
    z-index: 20; /* Убедиться, что крестик находится поверх контента */
    background: rgba(255, 255, 255, 0.7); /* Полупрозрачный белый фон для крестика */
    border-radius: 50%; /* Скругленные углы для круглой формы */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Легкая тень для выделения */
}

/* Стили для Swiper */
.swiper-container {
    width: 100%;
    height: 100%; /* Высота контейнера Swiper на 100% */
    position: relative; /* Для правильного позиционирования стрелок */
}

.swiper-wrapper {
    display: flex; /* Гибкое выравнивание слайдов */
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(
        135deg, 
        rgba(232, 28, 255, 0.5) 0%, 
        rgba(64, 201, 255, 0.5) 100%, 
        rgba(252, 0, 255, 0.5) 0%, 
        rgba(0, 219, 222, 0.5) 100%
    );
    height: 100%; /* Высота слайда равна высоте контейнера */
}

.swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Обеспечивает, что изображение будет масштабироваться, чтобы поместиться в контейнере */
}

/* Стили для стрелок навигации */
.swiper-button-next,
.swiper-button-prev {
    color: #fff; /* Цвет стрелок */
    width: 40px; /* Ширина стрелок */
    height: 40px; /* Высота стрелок */
    background: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон стрелок */
    border-radius: 50%; /* Скругленные углы для стрелок */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10; /* Убедиться, что стрелки находятся поверх контента */
}

.swiper-button-next {
    right: 10px; /* Расположение стрелки "следующая" справа */
}

.swiper-button-prev {
    left: 10px; /* Расположение стрелки "предыдущая" слева */
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 24px; /* Размер иконок стрелок */
}

/* Медиазапрос для экранов менее 780px */
@media (max-width: 779px) {
    .gallery {
        padding-top: 10px; /* Изменяем значение padding-top для меньших экранов */
    }
}

/* Адаптивные стили для мобильных устройств */
@media (max-width: 767px) {
    .gallery {
        padding: 0px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .gallery-item-wrapper {
        width: 100vw; /* Ширина элемента будет равна ширине экрана */
        height: auto; /* Высота автоматически */
        max-height: 80vh; /* Максимальная высота на мобильных устройствах */
    }

    .gallery-item {
        height: auto; /* Высота изображения автоматически */
        object-fit: cover; /* Масштабирование изображения для покрытия контейнера */
    }

    .modal-content {
        width: 100vw; /* Ширина модального окна на мобильных устройствах */
        height: 100vh; /* Высота модального окна на мобильных устройствах */
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 30px; /* Уменьшаем размеры стрелок на мобильных устройствах */
        height: 30px;
        font-size: 18px; /* Уменьшаем размер шрифта стрелок */
    }
}

/* Стили для скрытия пункта "Агентство" и выравнивания остального текста по центру на экранах менее 480px */
@media (max-width: 480px) {
    /* Скрытие пункта "Агентство" */
    .header-nav .nav-link:first-child {
        display: none;
    }

    /* Центрирование оставшихся пунктов навигации */
    .header-nav {
        justify-content: center; /* Центрирование пунктов навигации */
        gap: 20px; /* Увеличение расстояния между оставшимися пунктами */
    }
}


/* Фон всего сайта */
.container {
    width: 100%;
    height: 100%;
    background: #000000;
    --gap: 5em;
    --line: 1px;
    --color: rgba(255, 255, 255, 0.2);

    background-image: linear-gradient(
            90deg,
            transparent calc(var(--gap) - var(--line)),
            var(--color) calc(var(--gap) - var(--line) + 1px),
            var(--color) var(--gap)
        ),
        linear-gradient(
            180deg,
            transparent calc(var(--gap) - var(--line)),
            var(--color) calc(var(--gap) - var(--line) + 1px),
            var(--color) var(--gap)
        );
    background-size: var(--gap) var(--gap);
}

/* Карточка профиля */
.profile-card {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 0, 174, 0.8), rgba(0, 191, 255, 0.8));
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
    box-sizing: border-box; /* Учитываем отступы и границы */
    margin-bottom: 20px;
}

/* Профильный заголовок */
.profile-header {
    text-align: center;
}

.profile-info h2 {
    margin: 0;
    font-size: 2.5rem;
    color: #ffffff; /* Белый цвет для заголовка */
}

.profile-info .description {
    font-size: 1.1rem;
    color: #e0e0e0; /* Цвет для описания */
    line-height: 1.6;
    max-width: 100%;
    margin: 0 auto;
}


/* Подробности профиля */
.profile-details {
    width: 100%;
    border-top: 1px solid #fff;
    padding-top: 20px;
}

.profile-details h3 {
    margin: 0;
    font-size: 1.8rem;
    color: #fff;
    border-bottom: 2px solid #fff; /* Подчеркивание заголовка */
    padding-bottom: 5px;
    margin-bottom: 15px;
}

.profile-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* Автоматический перенос элементов на новую строку */
    gap: 20px; /* Расстояние между элементами списка */
}

.profile-details li {
    font-size: 1.1rem;
    color: #e0e0e0;
    width: 48%; /* Устанавливаем ширину элемента списка для двух колонок */
}

.profile-details strong {
    font-weight: bold;
}

/* Основные стили для блока контактной информации */
.contact-info {
    width: 100%;
    text-align: center;
    padding-top: 20px;
    color: #fff; /* Цвет текста внутри блока */
}

/* Стили для горизонтальных линий */
.line-top, .line-bottom {
    border: 0;
    height: 1px;
    background: #fff; /* Цвет линии */
    margin: 20px 0; /* Отступы сверху и снизу */
}

.contact-info h3 {
    margin: 0;
    font-size: 1.4rem; /* Размер шрифта такой же как у .price */
    color: #fff; /* Цвет текста заголовка */
    padding-bottom: 5px;
    margin-bottom: 15px;
    border: none; /* Убираем подчеркивание */
}

.contact-info .price {
    font-size: 2.4rem; /* Размер шрифта для цены */
    color: #ff00ae; /* Цвет текста цены */
    font-weight: bold;
    background: rgba(0, 0, 0, 0.7); /* Прозрачный черный фон для контраста */
    padding: 10px;
    border-radius: 8px;
    box-sizing: border-box; /* Учитываем отступы и границы */
    margin-bottom: 20px; /* Отступ снизу, чтобы отделить от линии */
}

/* Общие стили для мессенджеров */
.messengers {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 10px;
    flex-wrap: nowrap; /* Убедитесь, что иконки не переходят на новую строку */
    overflow-x: auto; /* Позволяет горизонтальную прокрутку, если иконки не помещаются */
    white-space: nowrap; /* Предотвращает перенос иконок на новую строку */
}

.messengers a {
    display: inline-block;
    width: 60px;
    height: 60px;
    overflow: hidden;
    transition: background 0.3s, box-shadow 0.3s;
}

.messengers img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Адаптивные стили для мобильных устройств */
@media (max-width: 767px) {
    .contact-info .price {
        font-size: 1rem;
    }

    .messengers {
        gap: 10px;
    }

    .messengers a {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 768px) {
    .contact-info .price {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .contact-info .price {
        font-size: 1.5rem;
    }

    .messengers {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 15px;
    }

    .messengers a {
        width: 40px;
        height: 40px;
    }
}

/* Стилизация скроллбара для Webkit-браузеров (Chrome, Safari, Edge) */
.gallery::-webkit-scrollbar {
    width: 12px; /* Ширина скроллбара */
}

.gallery::-webkit-scrollbar-track {
    background: transparent; /* Прозрачный фон трека скроллбара */
}

.gallery::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #ff00ae, #00bfff); /* Градиентный цвет скроллбара */
    border-radius: 10px; /* Скругленные углы скроллбара */
}

.gallery::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #ff00ae, #00bfff); /* Градиент при наведении */
}