@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif; /* Единый шрифт для всего сайта */
    font-size: 1.1rem; /* Увеличиваем базовый размер шрифта */
    font-weight: 400; /* Стандартная толщина */
    line-height: 1.6; /* Улучшаем межстрочный интервал для читаемости */
}

main {
    position: relative; /* Необходимо для корректного отображения */    
}

/* Исправление для якорных ссылок при фиксированной шапке */
section[id] {
    scroll-margin-top: 80px; /* Отступ, равный высоте шапки + небольшой запас */
}


.navbar {
    box-shadow: 0 2px 4px rgba(0,0,0,.1); /* Добавим тень для шапки */
}

.navbar-brand img {
    height: 40px;
}

.navbar-brand {
    font-weight: bold;
}

/* Стиль для активного пункта меню */
.navbar-nav .nav-link.active {
    color: #0d6efd !important; /* Основной синий цвет Bootstrap, оставляем для текста */
    font-weight: bold;
    position: relative; /* Необходимо для позиционирования псевдо-элемента */
}

/* Убедимся, что стрелочка у выпадающего меню не пропадает при активном состоянии */
.navbar-nav .nav-link.active.dropdown-toggle::after {
    content: none; /* Убираем нашу кастомную полоску, чтобы не конфликтовать со стрелкой Bootstrap */
}


/* Создаем синюю полоску под активным пунктом меню */
.navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0; /* Располагаем внизу элемента */
    left: 50%; /* Центрируем относительно элемента */
    transform: translateX(-50%); /* Точное центрирование */
    width: 85%; /* Увеличиваем ширину полоски до 85% */
    height: 3px; /* Толщина полоски */
    background-color: #0d6efd; /* Синий цвет */
    border-radius: 2px; /* Слегка скругляем углы */
}

/* Добавляем плавный переход для всех ссылок в навигации */
.navbar-nav .nav-link, .navbar .btn {
    transition: transform 0.2s ease-in-out;
}

/* Эффект "приподнятия" при наведении на ссылки и кнопку в шапке */
.navbar-nav .nav-link:hover, .navbar .btn:hover {
    transform: translateY(-2px); /* Сдвигаем элемент вверх на 2 пикселя */
}

/* Стили для круглой иконки соцсетей в шапке */
.btn-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;    
    color: #0088cc; /* Официальный цвет Telegram */
    font-size: 2.2rem; /* Увеличиваем размер иконки */
    text-decoration: none;
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

.btn-social-icon:hover {
    color: #005f8f; /* Более темный оттенок Telegram при наведении */
    transform: translateY(-2px); /* Эффект приподнятия, как у других кнопок */
}

/* Стили для выпадающего меню */
.dropdown-menu {
    border: none; /* Убираем стандартную рамку */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Добавляем тень */
    animation: fadeIn 0.3s ease-in-out; /* Анимация появления */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero {
    position: relative;
    background: url('https://images.unsplash.com/photo-1499678329028-101435549a4e?q=80') no-repeat center center;
    background-size: cover;
    background-attachment: fixed; /* Делаем фон статичным при прокрутке */
    color: white;
    min-height: 60vh; /* Используем min-height вместо height, чтобы баннер был адаптивным */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Оверлей для улучшения читаемости текста на главном баннере */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.hero .container {
    position: relative;
    z-index: 2;
}

.hero h1 {
    font-size: 3rem;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
}

/* Стили для баннера на странице блога */
.blog-hero {
    position: relative;
    /* Новое изображение для блога */
    background: url('https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=80') no-repeat center center;
    background-size: cover;
    background-attachment: fixed; /* Тот самый эффект параллакса */
    color: white;
    min-height: 40vh; /* Делаем его немного ниже, чем на главной */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Оверлей для баннера блога */
.blog-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Чуть более темный оверлей для контраста */
    z-index: 1;
}

/* Стили для текста в баннере блога, чтобы он был ярче */
.blog-hero .container {
    position: relative;
    z-index: 2;
}
.blog-hero h1 {
    font-size: 3rem;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
}

/* Стили для баннера на странице "О нас" */
.about-hero {
    position: relative;
    /* Новое изображение для страницы "О нас" */
    background: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=1170') no-repeat center center;
    background-size: cover;
    background-attachment: fixed; /* Эффект параллакса */
    color: white;
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.about-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.about-hero h1, .about-hero p {
    position: relative;
    z-index: 2;
}

/* Стили для баннера на страницах услуг */
.service-hero {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed; /* Эффект параллакса */
    color: white;
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.service-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.service-hero h1, .service-hero p {
    position: relative;
    z-index: 2;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
}

/* Стили для баннера на страницах постов блога */
.blog-post-hero {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed; /* Эффект параллакса */
    color: white;
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.blog-post-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.blog-post-hero h1 {
    position: relative;
    z-index: 2;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
}

/* "Прозрачный" разделитель с эффектом параллакса перед подвалом */
.parallax-divider {
    height: 100px; /* Высота "окна" */
}

.section-title {
    margin-bottom: 2rem;
    text-align: center;
}

.main-footer {
    background-color: #212529; /* Темный фон */
    color: #adb5bd; /* Светло-серый текст */
    padding-top: 3rem;
    font-size: 0.9rem; /* Уменьшаем шрифт в подвале */
}

.main-footer h5 {
    color: #fff; /* Белый цвет для заголовков */
    margin-bottom: 1.5rem;
}

.main-footer .footer-links a, .main-footer .list-unstyled a {
    color: #adb5bd;
    text-decoration: none;
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out; /* Добавляем плавность для transform */
    display: inline-block; /* Необходимо, чтобы transform работал корректно на inline-элементах */
}

.main-footer .footer-links a:hover, .main-footer .list-unstyled a:hover {
    color: #fff;
    transform: translateY(-2px); /* Добавляем эффект "приподнятия" */
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-bottom {
    background-color: #1c1f23; /* Еще более темный фон для нижней полосы */
    color: #6c757d; /* Тусклый цвет для копирайта */
    padding: 1rem 0;
    margin-top: 2rem;
}

/* Стили для секции "Популярные направления" */
.tours-figure {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border-radius: .5rem; /* Более заметное скругление углов */
    padding: 1rem; /* Внутренний отступ */
    background-color: #fff; /* Белый фон, чтобы карточка выделялась */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07); /* Легкая тень по умолчанию */
}

.tours-figure:hover {
    transform: translateY(-8px); /* Увеличиваем подъем при наведении */
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15); /* Более выразительная тень */
}

/* Увеличиваем шрифт для названий направлений */
.tours-figure .figure-caption {
    font-size: 1.3rem; /* Немного уменьшаем размер для лучшего баланса */
    font-weight: 500;  /* Делаем шрифт чуть жирнее */
}

/* Стили для выравнивания высоты изображений в карточках */
.card-img-top,
.figure-img {
    height: 250px; /* Вы можете подобрать нужную высоту */
    object-fit: cover; /* Масштабирует изображение, чтобы оно заполнило контейнер, сохраняя пропорции и обрезая лишнее */
    width: 100%;
}

/* Убедимся, что карточки в одной строке имеют одинаковую высоту */
.card {
    display: flex;
    flex-direction: column;
}
/* Центрируем текст в карточках услуг для лучшего вида */
#services .card-body {
    text-align: center;
}

/* Добавляем стили для карточек в секции блога на главной странице */
#blog .card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

#blog .card:hover {
    transform: translateY(-10px); /* Поднимаем карточку */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Делаем тень более выразительной */
}

/* Добавляем стили для карточек на основной странице блога (blog.html) */
.blog-page .card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.blog-page .card:hover {
    transform: translateY(-10px); /* Поднимаем карточку */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Делаем тень более выразительной */
}

/* Стили для секции FAQ */
#faq .accordion-button {
    font-size: 1.2rem; /* Увеличиваем шрифт вопроса */
    font-weight: 500;  /* Делаем его немного жирнее */
}

/* Общие стили для карточек услуг (на главной и на страницах услуг) */
.service-card {
    border: none; /* Убираем рамку у карточек */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-color 0.3s;
}

/* Эффект при наведении на карточку услуги */
.service-card:hover {
    transform: translateY(-10px); /* Поднимаем карточку */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Делаем тень более выразительной */
}

/* Стили для иконок в секции услуг */
.service-icon {
    font-size: 3rem; /* Увеличиваем размер иконки */
    color: #0d6efd; /* Основной синий цвет Bootstrap */
}

/* Стили для анимации появления секций */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Стили для кнопки "Наверх" */
.scroll-top-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #0d6efd; /* Основной цвет Bootstrap */
    color: white;
    border-radius: 50%;    
    text-decoration: none; 
    /* Добавляем flex для центрирования SVG иконки */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: opacity 0.3s, visibility 0.3s;
    opacity: 0;
    visibility: hidden;
}

.scroll-top-btn svg {
    color: white; /* Устанавливаем белый цвет для иконки по умолчанию */
    transform: translateY(-1px); /* Слегка поднимаем иконку для идеального визуального центрирования */
}

.scroll-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    z-index: 1050; /* Увеличиваем z-index, чтобы кнопка была поверх всего */
}

/* Общие стили для кнопок каруселей "Популярные направления", "Отзывы" и "Наш Блог" */
#toursCarousel .carousel-control-prev,
#toursCarousel .carousel-control-next,
#reviewsCarousel .carousel-control-prev,
#reviewsCarousel .carousel-control-next,
#blogCarousel .carousel-control-prev,
#blogCarousel .carousel-control-next {
    /* Делаем кнопки круглыми и заметными */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7); /* Светлый полупрозрачный фон, как в мобильной версии */
    top: 50%; /* Выравниваем по вертикали */
    transform: translateY(-50%);
    opacity: 1; /* Убираем прозрачность по умолчанию, чтобы кнопки были всегда видны */
    transition: opacity 0.2s;
}

#toursCarousel .carousel-control-prev:hover,
#toursCarousel .carousel-control-next:hover,
#reviewsCarousel .carousel-control-prev:hover,
#reviewsCarousel .carousel-control-next:hover,
#blogCarousel .carousel-control-prev:hover,
#blogCarousel .carousel-control-next:hover {
    background-color: rgba(255, 255, 255, 1); /* Делаем фон полностью белым при наведении */
}

/* Кастомизация стрелок карусели */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    /* Фильтр для изменения цвета стандартной иконки Bootstrap */
    filter: invert(1) grayscale(100) brightness(0.5);
}

.carousel-control-prev, .carousel-control-next {
    width: 5%; /* Уменьшаем ширину кликабельной области */
}

/* Стили для карточек-ссылок */
.card-link {
    text-decoration: none;
    color: inherit; /* Наследует цвет текста от родителя, убирая синий цвет ссылки */
}

/* Стили для обновленной формы контактов */
.form-control {
    padding: 0.75rem 1rem; /* Увеличиваем отступы в полях ввода */
    font-size: 1.1rem; /* Слегка увеличиваем шрифт в полях формы */
}

.form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Стандартная тень фокуса Bootstrap */
}

.contact-image-wrapper {
    background-image: url('https://images.unsplash.com/photo-1567473030492-533b30c5494c?q=80&w=880');
    background-size: cover;
    background-position: center;
    min-height: 400px; /* Минимальная высота, чтобы изображение не схлопывалось на маленьких экранах */
    height: 100%;
}

/* Выделяем обертку формы контактов */
.contact-form-wrapper {
    border: 1px solid #dee2e6; /* Легкая серая рамка, стандартная для Bootstrap */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Едва заметная тень для объема */
    background-color: #fff; /* Явно задаем белый фон */
}

/* Стили для иконок соцсетей */
.social-icons .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;    
    color: #0088cc; /* Официальный цвет Telegram */
    font-size: 2.5rem; /* Увеличиваем размер самой иконки */
    margin-right: 10px;
    transition: color 0.3s, transform 0.3s;
    text-decoration: none;
}
.social-icons .social-icon:hover {
    color: #005f8f; /* Более темный оттенок Telegram при наведении */
    transform: translateY(-3px);
}

/* Стили для хлебных крошек */
.breadcrumb {
    background-color: transparent; /* Убираем фон, если он есть */
    padding: 0; /* Убираем внутренний отступ */
    margin-bottom: 2rem; /* Добавляем отступ снизу */
    /* Добавляем анимацию появления */
    animation: breadcrumb-fade-in 0.6s ease-out forwards;
    opacity: 0; /* Изначально скрываем элемент */
}
.breadcrumb-item a {
    text-decoration: none;
}

/* Ключевые кадры для анимации хлебных крошек */
@keyframes breadcrumb-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px); /* Начинаем чуть ниже */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Заканчиваем на исходной позиции */
    }
}

/* Стили для блока "Другие услуги" на страницах услуг */
.other-services .service-card {
    border: 1px solid #e9ecef; /* Добавляем легкую рамку */
}

.other-services .service-card:hover {
    transform: translateY(-10px); /* Синхронизируем эффект с главной */
    background-color: #f8f9fa; /* Слегка меняем фон при наведении */
}

/* Стили для изображений на страницах услуг */
.service-page-img {
    width: 100%;
    height: 450px; /* Вы можете настроить высоту по своему вкусу */
    object-fit: cover;
    object-position: center; /* Центрируем изображение */
}


/* Адаптация высоты изображения на мобильных устройствах */
@media (max-width: 767.98px) {
    .service-page-img {
        height: 250px;
    }
}

/* Скрываем изображение в форме контактов на мобильных устройствах */
@media (max-width: 991.98px) {
    .contact-image-wrapper {
        display: none;
    }
}

#blogCarousel .carousel-control-prev-icon,
#blogCarousel .carousel-control-next-icon {
    filter: invert(1) grayscale(100) brightness(0.5); /* Делаем стрелки темными */
}

/* Улучшение вида кнопок управления каруселями на мобильных */
@media (max-width: 767.98px) {
    /* Общие стили для кнопок каруселей "Популярные направления" и "Наш Блог" */
    /* На мобильных устройствах делаем фон кнопок светлым для лучшего контраста с темными изображениями */
    #toursCarousel .carousel-control-prev, #toursCarousel .carousel-control-next {
        background-color: rgba(255, 255, 255, 0.7);
        opacity: 1;
    }

    /* Отступы для кнопок */
    #toursCarousel .carousel-control-prev, #blogCarousel .carousel-control-prev { left: 10px; }
    #toursCarousel .carousel-control-next, #blogCarousel .carousel-control-next { right: 10px; }    

    /* Убираем стандартное оформление ссылок в карусели блога на мобильных */
    #blogCarousel .figure {
        text-decoration: none;
        color: inherit;
    }

    /* Выравниваем высоту слайдов в карусели блога, чтобы избежать "скачков" страницы */
    #blogCarousel .carousel-item {
        min-height: 480px; /* Подбираем высоту, чтобы вместить самый длинный пост */
    }
}

/* Стили для изображения на странице поста в блоге */
.blog-post-img {
    width: 100%;
    height: 400px; /* Фиксированная высота для создания пропорции */
    object-fit: cover; /* Масштабирует изображение, чтобы оно заполнило контейнер, сохраняя пропорции и обрезая лишнее */
    object-position: center; /* Центрирует изображение внутри рамки */
}

/* Выравнивание высоты карточек в карусели отзывов */
.review-card {
    max-width: 800px; /* Ограничиваем ширину блока с отзывом */
    margin: 0 auto; /* Центрируем */
    background-color: #fff; /* Белый фон */
    border: 1px solid #e9ecef; /* Тонкая рамка для четкости границ */
    border-radius: .5rem;
    padding: 2rem;
    min-height: 320px; /* Увеличиваем min-height, чтобы все карточки были одинаковой высоты */
    display: flex; /* Добавляем flex для вертикального центрирования */
    flex-direction: row;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); /* Усиливаем тень для большего объема */
    transition: box-shadow 0.3s ease-in-out; /* Плавный переход для тени */
}

/* Исправление для мобильной версии: увеличиваем минимальную высоту карточек отзывов,
   чтобы они были одинаковыми даже при разном количестве текста. */
@media (max-width: 767.98px) {
    #reviews .review-card {
        /* Увеличиваем значение, чтобы вместить самый длинный отзыв и выровнять все карточки */
        min-height: 420px;
        flex-direction: column; /* Возвращаем вертикальное расположение на мобильных */
        padding: 1.5rem;
    }
}

.review-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #0d6efd; /* Основной синий цвет */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem; /* Отступ снизу от аватара */
}

.review-body {
    margin-bottom: 0; /* Убираем лишний отступ */
    display: flex; /* Используем flexbox */
    flex-direction: column; /* Располагаем элементы в колонку */
    justify-content: center; /* Центрируем по вертикали */
    height: 100%; /* Занимаем всю высоту */
}

.review-text {
    font-style: italic;
    color: #495057;
    font-size: 1.15rem; /* Немного увеличиваем шрифт текста отзыва */
}

.review-author {
    margin: 0; /* Убираем стандартные отступы у заголовка */
    font-weight: bold;
}

.review-author-city {
    font-size: 0.9rem;
    font-style: italic;
    color: #6c757d;
    margin-top: 0.5rem; /* Увеличиваем отступ сверху */
}

.review-author-side {
    flex: 0 0 180px; /* Фиксированная ширина левой колонки */
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрируем содержимое левой колонки */
    justify-content: center;
    text-align: center;
    padding-right: 2rem;
    border-right: 1px solid #e9ecef; /* Разделительная линия */
}

@media (max-width: 767.98px) {
    .review-author-side {
        flex-direction: row; /* Горизонтальное расположение на мобильных */
        border-right: none;
        border-bottom: 1px solid #e9ecef; /* Линия-разделитель снизу */
        padding-right: 0;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
        flex-basis: auto; /* Сбрасываем фиксированную ширину */
    }
    .review-avatar { margin-bottom: 0; margin-right: 1rem; }
    .review-author-info { text-align: left; }
}

.review-author-info {
    display: flex;
    flex-direction: column;
}

.review-rating .fa-star {
    color: #ffc107; /* Желтый цвет звезд Bootstrap */
}

.review-rating {
    margin-top: 1rem; /* Увеличиваем отступ над звездами */
}

.review-content-side {
    flex: 1;
    padding-left: 2rem;
}
@media (max-width: 767.98px) { .review-content-side { padding-left: 0; } }

/* Стили для индикаторов карусели отзывов */
#reviewsCarousel .carousel-indicators {
    position: static; /* Возвращаем статическое позиционирование */
    margin-top: 1.5rem; /* Добавляем отступ сверху */
    justify-content: center;
}

#reviewsCarousel .carousel-indicators [data-bs-target] {
    background-color: #0d6efd; /* Делаем индикаторы синими для лучшей видимости */
    opacity: 0.5;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    transition: opacity 0.3s ease;
}

#reviewsCarousel .carousel-indicators .active {
    opacity: 1; /* Делаем активный индикатор полностью непрозрачным */
}
 
/* Стили для выпадающего списка языков */
.lang-dropdown-btn {
    min-width: 65px; /* Чтобы кнопка не "прыгала" в размере */
    border: none; /* Убираем обводку */
}

/* Отступ для кнопки языка на мобильных, чтобы она не прилипала к гамбургер-меню */
@media (max-width: 991.98px) {    
    /* На мобильных устройствах контейнер шапки должен быть flex-контейнером для правильного расположения элементов */
    .navbar > .container {
        display: flex;
        justify-content: space-between;
    }
}