/* Общие стили для всего сайта */
body {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #737373;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Убираем подчеркивание у ссылок и маркеры списка */
.navbar-nav {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.navbar.scrolled #navbar-logo {
    content: url('../images/logo_blue.png'); /* Заменить лого на синий при скролле */
}

.navbar #navbar-logo {
    content: url('../images/logo_white.png'); /* Основное лого */
}


.navbar .nav-link {
    text-decoration: none;
    color: white;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: color 0.3s ease;
    padding: 0 10px;
}

.navbar .nav-link:hover, .navbar .nav-link.active {
    color: #FF9B3E;
}

.navbar.scrolled .nav-link {
    color: #333;
}

.navbar.scrolled .nav-link:hover, .navbar.scrolled .nav-link.active {
    color: #FF9B3E;
}

/* Навигация */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 105px;
    display: flex;
    align-items: center;
    z-index: 1000;
    background-color: transparent;
    transition: background-color 0.3s ease;
}

.navbar.scrolled {
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Легкая тень */
}

/* Кастомная кнопка меню */
.custom-menu-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    height: 14px;
    width: 30px;
    display: none;
    align-items: center;
    justify-content: center;
}

.custom-menu-button:focus {
    outline: none;
}

.menu-icon {
    position: relative;
    width: 24px;
    height: 2px;
    background-color: white;
    transition: all 0.3s ease-in-out;
}

.menu-icon::before,
.menu-icon::after {
    content: '';
    position: absolute;
    right: 0;
    background-color: white;
    transition: all 0.3s ease-in-out;
}

.menu-icon::before {
    width: 24px;  /* Верхняя линия самая длинная */
    height: 2px;
    top: -6px;
}

.menu-icon {
    width: 18px;  /* Средняя линия средней длины */
}

.menu-icon::after {
    width: 9px;  /* Нижняя линия самая короткая */
    height: 2px;
    bottom: -6px;
}

.custom-menu-button:hover .menu-icon,
.custom-menu-button:hover .menu-icon::before,
.custom-menu-button:hover .menu-icon::after {
    background-color: #FF9B3E;
}

.navbar.scrolled .menu-icon, .navbar.scrolled .menu-icon::before, .navbar.scrolled .menu-icon::after {
    background-color: #333;
}

.navbar.scrolled .custom-menu-button:hover .menu-icon,
.navbar.scrolled .custom-menu-button:hover .menu-icon::before,
.navbar.scrolled .custom-menu-button:hover .menu-icon::after {
    background-color: #FF9B3E;
}

/* Скрытое меню для десктопа */
.hidden-menu {
    display: none;
}

/* Секции */
.section {
    height: 602px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Временные фоновые цвета для секций */
/* Стили для хедера */
#main {
    height: 605px;
    background-image: url('../images/background.jpg'); /* Путь к изображению относительно папки стилей */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Параллакс эффект */
    display: flex;
    align-items: center;
}

/* Стили для заголовка h1 */
#main h1 {
    font-size: 58px; /* Размер шрифта для десктопа */
    font-weight: 800; /* Экстра-болд */
    color: #FF9B3E; /* Цвет текста */
    margin: 0;
    text-align: left; /* Текст по левому краю */
}

/* Стили для абзаца p */
.subtitle {
    font-size: 20px; /* Размер шрифта */
    color: #FFFFFF; /* Цвет текста */
    margin-top: 35px; /* Расстояние от заголовка */
    text-align: left; /* Текст по левому краю */
}

/* Стили для контейнера кнопок */
.button-container {
    margin-top: 35px; /* Расстояние от абзаца */
    text-align: left; /* Выравнивание по левому краю для кнопок */
}

/* Стили для кнопок */
.btn {
    display: inline-block;
    padding: 10px 36px; /* Паддинги */
    margin-right: 15px;
    font-size: 14px; /* Размер шрифта */
    font-weight: bold; /* Вес шрифта */
    text-decoration: none;
    border-radius: 37px; /* Скругление */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    line-height: 28px; /* Высота текста */
    border: 1px solid transparent; /* Бордер по умолчанию (прозрачный) */
}

/* Оранжевая кнопка */
.btn-primary {
    background-color: #FF9B3E; /* Основной цвет кнопки */
    color: #FFFFFF; /* Цвет текста */
    border-color: #FF9B3E; /* Цвет бордера по умолчанию */
}

.btn-primary:hover {
    background-color: #FFFFFF; /* Цвет фона при наведении */
    color: #FF9B3E; /* Цвет текста при наведении */
    border-color: #FFFFFF; /* Цвет бордера при наведении */
}

/* Вторая кнопка */
.btn-secondary {
    background-color: transparent; /* Прозрачный фон */
    color: #FFFFFF; /* Цвет текста */
    border-color: #FFFFFF; /* Белый бордер по умолчанию */
}

.btn-secondary:hover {
    background-color: #FF9B3E; /* Цвет фона при наведении */
    color: #FFFFFF; /* Цвет текста при наведении */
    border-color: #FF9B3E; /* Цвет бордера при наведении */
}
/* Стили для секции "О нас" */
#about {
    height: 735px; /* Фиксированная высота для десктопных версий */
    background-color: #FFFFFF; /* Белый фон */
    padding: 0 15px; /* Отступы от краев экрана */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Заголовок h2 */
#about h2 {
    font-size: 36px;
    font-weight: 800; /* Экстра-болд */
    color: #252B42;
    margin-bottom: 35px; /* Расстояние от сабтайтла, если он появится */
    text-align: center;
}

/* Контейнер карточек */
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Расстояние между карточками */
    justify-content: center;
}

/* Стили для карточек */
.card {
    width: 300px; /* Примерная ширина карточек */
    background-color: #C0E6FF; /* Фон карточек */
    border-radius: 10px; /* Скругление углов карточек */
    overflow: hidden; /* Для скрытия лишних частей, если будут */
    display: flex;
    flex-direction: column;
}

/* Верхняя часть карточки */
.card-top {
    height: 132px;
    background-color: transparent;
    display: flex;
    align-items: center;
    padding: 15px;
}

.card-top img {
    width: 72px;
    height: 72px;
    margin-right: 15px;
}

.card-top h6 {
    font-size: 16px;
    font-weight: 800; /* Экстра-болд */
    margin: 0;
}

/* Нижняя часть карточки */
.card-bottom {
    height: 250px;
    background-color: #FFFFFF;
    border-radius: 11px; /* Скругление углов нижней части карточки */
    border: 1px solid #A9D6FF; /* Бордер карточки */
    padding: 30px 50px; /* Паддинги */
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-content ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.card-content li {
    font-size: 14px;
    font-weight: 600; /* Семиболд */
    margin-bottom: 10px; /* Расстояние между пунктами списка */
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
    #about {
        height: auto; /* Адаптивная высота секции */
        padding: 15px; /* Увеличиваем отступы для мобильной версии */
    }
    
    .card-container {
        flex-direction: column; /* Вертикальное расположение карточек */
        align-items: center; /* Центрируем карточки */
    }

    .card {
        width: 100%; /* Полная ширина карточек для мобильных устройств */
        max-width: 500px; /* Максимальная ширина карточек */
    }

    .card-bottom {
        height: auto; /* Адаптивная высота нижней части карточки */
        padding: 20px; /* Уменьшение паддингов для мобильной версии */
    }
}

/* Стили для секции "Об услугах" */
#services {
    background-color: #FFFFFF; /* Белый фон секции */
    padding: 3em 15px; /* Отступы от краев экрана */
    height: auto; /* Позволяет высоте секции адаптироваться к содержимому */
    display: flex;
    flex-direction: column; /* Убедитесь, что блоки располагаются вертикально */
}

/* Устранение высоты в фиксированном стиле для секции "Об услугах" */
#services .section {
    height: auto; /* Позволяет высоте адаптироваться к содержимому */
    align-items: flex-start; /* По умолчанию выравнивание по верхнему краю */
}

/* Общие стили для текста услуг */
.service-text {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Выравнивание по вертикали */
    text-align: left; /* Выравнивание текста по левому краю */
}

.service-text h3 {
    font-size: 38px;
    font-weight: 700; /* Болд */
    color: #000000; /* Черный цвет */
    margin: 0;
}

.service-text p {
    font-size: 16px;
    font-weight: 500; /* Медиум */
    color: #000000; /* Черный цвет */
    margin: 10px 0 0;
}

/* Общие стили для изображений услуг */
.service-image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.service-image img {
    height: 214px; /* Высота изображений */
    width: auto; /* Соответствующая ширина */
}

/* Стили для всех блоков на мобильных устройствах */
/* Стили для всех блоков на мобильных устройствах */
/* Стили для всех блоков на мобильных устройствах */
@media (max-width: 767px) {
    /* Общее правило для всех блоков */
    .row {
        flex-direction: column-reverse; /* Переставляем порядок элементов: сначала картинка, потом текст */
    }

    .service-image {
        order: 1; /* Устанавливаем порядок для изображения */
    }

    .service-text {
        order: 2; /* Устанавливаем порядок для текста */
        text-align: left; /* Выравнивание текста по левому краю */
        padding: 15px; /* Уменьшаем отступы для мобильной версии */
    }

    .service-image img {
        height: auto; /* Адаптивная высота изображения */
        width: 100%; /* Изображение занимает всю ширину блока */
    }

    .service-text p {
        margin: 5px 0 0; /* Меньшие отступы */
    }

    /* Специфические стили для второго блока */
    .service-air {
        flex-direction: column; /* Изменяем порядок элементов на мобильных устройствах */
    }

    .service-air .service-image {
        order: 1; /* Изображение вверху */
    }

    .service-air .service-text {
        order: 2; /* Текст внизу */
        text-align: left; /* Выравнивание текста по левому краю */
        padding: 15px; /* Уменьшаем отступы для мобильной версии */
    }

    .service-air .service-image img {
        height: auto; /* Адаптивная высота изображения */
        width: 100%; /* Изображение занимает всю ширину блока */
    }

    .service-air .service-text p {
        margin: 5px 0 0; /* Меньшие отступы */
    }
}

/* Стили для второго блока */
@media (max-width: 767px) {
	.custom-menu-button {
        display: flex; /* Показываем кнопку на мобильных устройствах */
    }
    .service-air .row {
        flex-direction: column-reverse; /* Переставляем порядок элементов: сначала картинка, потом текст */
    }

    .service-air .service-image {
        order: 1; /* Устанавливаем порядок для изображения */
    }

    .service-air .service-text {
        order: 2; /* Устанавливаем порядок для текста */
        text-align: left; /* Выравнивание текста по левому краю */
        padding: 15px; /* Уменьшаем отступы для мобильной версии */
    }

    .service-air .service-image img {
        height: auto; /* Адаптивная высота изображения */
        width: 100%; /* Изображение занимает всю ширину блока */
    }

    .service-air .service-text p {
        margin: 5px 0 0; /* Меньшие отступы */
    }
}
/* Стили для футера */
#contact {
    background-color: #FAFAFA; /* Фон секции футера */
    padding: 20px 0; /* Убираем горизонтальные паддинги */
    box-sizing: border-box;
    width: 100%;
}

#contact .container-fluid {
    padding: 0; /* Убираем паддинги внутри контейнера */
}

#contact h2 {
    font-size: 40px;
    font-weight: 700; /* Болд */
    color: #252B42; /* Цвет текста */
    margin-bottom: 40px; /* Отступ снизу */
}

.contact-info {
    margin-bottom: 20px;
}

.contact-info p {
    font-size: 32px;
    font-weight: 300; /* Лайт */
    color: #737373; /* Цвет текста */
    margin: 0 0 40px; /* Отступ снизу */
}

.contact-info a {
    color: #737373; /* Цвет ссылок */
    text-decoration: none; /* Убираем подчеркивание */
}

.contact-info a:hover {
    color: #252B42; /* Цвет ссылок при наведении */
}


/* Стили для карты */
#map-section {
    width: 100%;
    padding: 0; /* Убираем паддинги */
    margin: 0; /* Убираем отступы */
}

#map {
    height: 400px; /* Высота карты */
    width: 100vw; /* Ширина на всю ширину экрана */
    margin: 0;
    padding: 0;
}


/* Мобильная адаптация */
@media (max-width: 768px) {
    .navbar-menu {
        display: none;
        position: absolute;
        top: 105px;
        left: 0;
        width: 100%;
        background-color: white;
        flex-direction: column;
    }

    .navbar-menu.show {
        display: flex;
    }

    .navbar-menu .nav-link {
        color: #333;
        padding: 10px;
    }

    .navbar-menu .nav-link:hover {
        color: #FF9B3E;
    }

    .navbar.scrolled .navbar-menu .nav-link {
        color: #333;
    }

    .navbar.scrolled .navbar-menu .nav-link:hover {
        color: #FF9B3E;
    }

    .custom-menu-button {
        display: block;
    }

    /* На мобильных устройствах класс hidden-menu не применяется */
    .hidden-menu {
        display: block;
    }
    #main h1 {
        font-size: 38px; /* Размер шрифта для мобильных устройств */
    }

    .button-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .btn {
        margin: 10px 0; /* Расстояние между кнопками */
    }
    #map iframe {
        height: 300px; /* Изменяем высоту для мобильных устройств */
    }
    #contact {
        padding: 20px 10px; /* Добавляем немного паддинга по бокам */
    }
    
    .contact-info p {
        font-size: 24px; /* Меньше размер шрифта на мобильных устройствах */
        margin-bottom: 20px; /* Меньше отступ снизу */
    }
}