/* Сброс стилей */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Оформление для body */
body {
    font-family: Arial, sans-serif;
}

/* Стиль навигации */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Темный и прозрачный фон */
    padding: 15px 0;
    z-index: 1000; /* Чтобы навбар всегда был наверху */
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 20px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    transition: color 0.3s ease, border-bottom 0.3s ease;
    border-bottom: 2px solid transparent; /* Скрытая граница, которая будет появляться при наведении */
}

nav ul li a:hover {
    color: #007BFF; /* Синий цвет при наведении */
    border-bottom: 2px solid #007BFF; /* Подсвечивание границы при наведении */
}

.section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}
/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
    nav ul {
        flex-direction: row; /* Устанавливаем все элементы в одну строку */
        flex-wrap: wrap; /* Позволяем переносить элементы */
    }

    nav ul li {
        margin: 5px 8px; /* Уменьшаем расстояние между пунктами меню на мобильных устройствах */
    }

    nav ul li a {
        font-size: 14px; /* Немного уменьшаем размер шрифта */
    }
}

/* Секция 1 - Центрирование и стилизация */
.section-1 {
    background: url('/static/images/bg1.jpg') no-repeat center center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 50px;
    padding-bottom: 200px; /* Отступ снизу для предотвращения наложения текста */
    height: auto; /* Убираем фиксированную высоту */
    color: white;
    text-align: center;
}

/* Оформление контейнера и блоков */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.header-flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    padding: 20px;
}

.logo-block {
    flex-shrink: 0;
    margin-bottom: 60px; /* Отступ снизу увеличен для создания пространства */
    text-align: left;
    max-width: 40%; /* Ограничение ширины блока с логотипом */
}
.logo {
    width: 60%; /* Уменьшение ширины логотипа до 50% от оригинала */
    height: auto; /* Сохраняем пропорции высоты */
}

.info-block {
    display: flex;
    justify-content: space-between;
    width: 60%;
    max-width: 600px; /* Можно подогнать под нужную ширину */
}

.info-column {
    flex-basis: 50%;
    text-align: center;
}
.phone-number {
    font-size: 1.7rem; /* Увеличиваем размер шрифта (измените по необходимости) */
    color: #ffffff; /* Цвет текста (можете изменить на желаемый) */
}

/* Мобильная адаптация */
@media (max-width: 768px) {
    .header-flex-container {
        flex-direction: column;
        align-items: center;
    }
    .logo-block {
         margin-top: 30px; /* Задайте нужное значение отступа */
    flex-shrink: 0;
    margin-bottom: 60px; /* Отступ снизу увеличен для создания пространства */
    text-align: left;
    max-width: 60%; /* Ограничение ширины блока с логотипом */
}
.logo {
    width: 100%; /* Уменьшение ширины логотипа до 50% от оригинала */
    height: auto; /* Сохраняем пропорции высоты */
}

    .info-block {
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 100%;
    }

    .info-column {
        text-align: center;
        margin-bottom: 15px;
    }
}
/* Секция услуг */
/* Контейнер для секции с услугами и формой */
.services-form-container {
    display: flex;
    justify-content: space-between; /* Разместить элементы на противоположных сторонах */
    align-items: flex-start;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.service-item {
    display: flex;
    align-items: flex-start; /* Выравниваем иконки и текст по вертикали */
    margin-bottom: 40px; /* Отступ между блоками */
}

.service-item .icon {
    width: 50px; /* Размер иконки */
    margin-right: 15px; /* Отступ между иконкой и текстом */
}

.service-item h3 {
    font-size: 20px; /* Размер заголовка */
    margin: 0;
    margin-bottom: 5px; /* Отступ под заголовком */
}

.service-item p {
    font-size: 18px;
    margin: 0;
    line-height: 1.8;
}

/* Мобильная адаптация */
/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
    .services-section .container {
        display: flex;
        flex-direction: column;
        align-items: center; /* Центрируем содержимое */
        left: 0; /* Сбрасываем смещение влево */
        padding-left: 0; /* Убираем лишние отступы */
    }

    .service-item {
        flex-direction: column; /* Иконка и текст друг под другом */
        align-items: center; /* Центрируем содержимое */
        text-align: center; /* Текст по центру */
    }

    .service-item .icon {
        margin-right: 0; /* Убираем отступ справа для центрирования иконки */
        margin-bottom: 10px; /* Отступ под иконкой */
    }
}
/* Стили для формы */
.form-container {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    width: 350px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-left: 20px; /* Отступ слева для формы */
}

.form-container h2 {
    font-size: 24px;
    color: #333;
}

.form-container p {
    color: #666;
    font-size: 14px;
}

.form-group {
    margin-bottom: 15px;
}

.form-control {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.btn-submit {
    background-color: #ff3b3f;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

.btn-submit:hover {
    background-color: #e0292c;
}

.success-message {
    color: green;
    font-size: 16px;
    margin-top: 15px;
}

/* Мобильная адаптация */
@media (max-width: 768px) {
    .services-form-container {
        flex-direction: column;
        align-items: center;
    }

    .form-container {
        margin-left: 0;
        width: 100%;
    }
}







.section-2 {
    background: url('/static/images/bg2.jpg') no-repeat center center/cover;
    text-align: center;
    padding: 20px;
}
/* Стиль для заголовка */
.heading h1 {
    font-size: 48px;
    line-height: 1.2;
    color: black;
    font-weight: bold;
}

/* Стиль для верхней и нижней части текста */
.heading .top-text {
    font-size: 48px;
}

.heading .bottom-text {
    font-size: 48px;
    font-weight: normal;
}
.passport-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
/* Контейнер для кнопок и изображения паспорта */
.options-and-passport {
    display: flex;
    align-items: center;
    justify-content: flex-start;  /* Разместить элементы рядом друг с другом */
    max-width: 1000px;  /* Максимальная ширина контейнера */
    margin: 0 auto;     /* Центрирование контейнера */
    padding: 20px;
}

/* Левая часть (список опций) */
.passport-left {
    flex: 1;
    margin-right: 30px; /* Отступ справа */
}

.passport-left ul {
    list-style: none;
    padding: 0;
}

.passport-left ul li {
    margin-bottom: 10px;
    cursor: pointer;
}

/* Правая часть (изображение паспорта) */
.passport-right {
    flex: 0 0 auto; /* Убираем расширение flex */
    width: 1000px;   /* Устанавливаем ширину для изображения паспорта */
    margin-left: -400px; /* Отступ слева для изображения */
}

.passport-right img {
    width: 100%;   /* Увеличиваем изображение на всю ширину родителя */
    height: auto;
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
    /* Контейнер с кружками и изображением паспорта */
    .options-and-passport {
        flex-direction: column; /* Вертикальная ориентация */
        align-items: center; /* Центрирование */
        justify-content: flex-start;
    }

    /* Левые кружки для выбора опций */
    .passport-left {
        position: absolute; /* Позиционируем относительно контейнера */
        top: 50px; /* Корректируем отступ сверху */
        left: 20px; /* Корректируем отступ слева */
        z-index: 10; /* Чтобы они были над изображением паспорта */
    }

    /* Изображение паспорта */
    .passport-right {
        margin-top: 400px; /* Отступ сверху для паспорта */
        width: 350px; /* Уменьшаем ширину изображения для мобильных устройств */
    }

    .passport-right img {
        width: 100%;
        height: auto;
        margin-left: 60px;
    }
 /* Контейнер со стрелками и счетчиком */
    .mobile-arrows {
        display: flex;
        justify-content: center; /* Центрирование стрелок и текста */
        align-items: center;
        margin-left: 110px;
        margin-top: 10px;
    }

    .arrow-left, .arrow-right {
        font-size: 24px;
        cursor: pointer;
        padding: 0 20px; /* Добавляем отступы для более точного позиционирования */
    }

    /* Центрируем счетчик (цифры) */
    #image-count {
        font-size: 18px;
        padding: 0 10px;
        text-align: center;
    }

    /* Дополнительно можно добавить отступы для стрелок */
    .arrow-left {
        margin-right: 15px; /* Отодвигаем левую стрелку ближе к центру */
    }

    .arrow-right {
        margin-left: 15px; /* Отодвигаем правую стрелку ближе к центру */
    }

}
/* Стили для стрелок */
.arrow-left, .arrow-right {
    color: black; /* Меняем цвет на черный */
    font-size: 24px; /* Можно корректировать размер стрелок */
    cursor: pointer;
}

/* При наведении можно добавить другой эффект */
.arrow-left:hover, .arrow-right:hover {
    color: #333; /* Немного светлее при наведении */
}
/* Стили для счетчика (цифр) */
#image-count {
    color: black; /* Меняем цвет цифр на черный */
    font-size: 18px; /* Можно отрегулировать размер текста */
    font-weight: bold; /* Жирный текст для лучшей видимости */
}

#visa-options {
    list-style-type: none;
    color: black;
    padding: 0;
    display: block;
}
/* Мобильные стрелки скрываются на десктопе */
.mobile-controls {
    display: none;
}
#visa-options li {
    margin: 10px 0;
    cursor: pointer;
    position: relative;
    padding-left: 30px;
}

#visa-options li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #000;
}

#visa-options li.active::before {
    content: "✔";
    font-size: 16px;
    color: #fff;
    background-color: #007bff;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Мобильная адаптация для галочек */
@media (max-width: 768px) {
    #visa-options {
        display: none; /* Скрыть кружки выбора на мобильных */
    }
}
#passport-image {
    max-width: 100%;
    height: auto;
}
/* Скрываем стрелки на больших экранах */
@media (min-width: 769px) {
    .mobile-arrows {
        display: none;
    }
}

/* Фон для секции */
.section-3 {
    background-color: white;
    padding-top: 100px; /* Увеличенный отступ сверху */
    padding-bottom: 100px; /* Увеличенный отступ снизу */
    min-height: 125vh; /* Увеличенная минимальная высота */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Элементы выше */
}
.section-3 h1 {
    font-size: 36px; /* Увеличение размера текста */
    color: #000000; /* Черный цвет текста */
    text-align: center; /* Центрирование заголовка */
    font-weight: bold; /* Сделать текст жирным, если требуется */
    margin-bottom: 20px; /* Отступ снизу для заголовка */
}

/* Стили для формы */
/* Для оформления формы */
form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f3f2f2;
    border-radius: 10px;
    border: 1px solid #ccc;
}

/* Оформление заголовков формы */
form h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
}
/* Для оформления текста */
form label {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    display: block;
    color: #333; /* Цвет текста для меток */
}
/* Нумерация секций формы */
.form-step {
    font-size: 18px;
    font-weight: bold;
    color: #333; /* Цвет текста для нумерации секций */
    margin-bottom: 10px;
}


/* Оформление полей ввода */
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    font-size: 18px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

/* Оформление радио-кнопок */
form input[type="radio"] {
    margin-right: 10px;
}

/* Оформление кнопки отправки */
form button {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    display: block;
    width: 100%;
    margin-top: 20px;
}

form button:hover {
    background-color: #45a049;
}

/* Для оформления текста */
form label {
    font-size: 16px;
    margin-bottom: 10px;
    display: block;
}

/* Нумерация секций формы */
.form-step {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}



.tab-menu {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    margin-top: 20px; /* Добавим отступ сверху, чтобы кнопки не были слишком близко к верху */
}

.tablink {
    background-color: #f1f1f1;
    color: #000;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 17px;
    transition: background-color 0.3s;
}

.tablink:hover {
    background-color: #ddd;
}

.tablink.active {
    background-color: #555;
    color: white;
}

@media (max-width: 768px) {
    .tab-menu {
    display: flex;
    flex-direction: column; /* Изменяем направление на колонку для мобильных */
    margin-bottom: 20px;
}

.tablink {
    background-color: #f1f1f1;
    color: #000;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 17px;
    transition: background-color 0.3s;
    width: 100%; /* Ширина кнопок 100% */
    margin: 5px 0; /* Отступ между кнопками */
}

.tablink:hover {
    background-color: #ddd;
}

.tablink.active {
    background-color: #555;
    color: white;
}
}
.tabcontent {
    display: none;
    padding: 20px;
    border-top: none;
    text-align: center; /* Центрируем содержимое */
}

.tabcontent h2 {
    margin-top: 0;
}


.section-4 {
    background: url('/static/images/bg3.jpg') no-repeat center top;
    background-size: cover;
    height: 500px; /* Высота для больших экранов */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* Стили для контейнера предложений */
.offers-container {
    padding: 20px;
    text-align: center; /* Центрирование текста */
}

.offers-title {
    font-size: 28px;
    color: #333; /* Темный цвет для заголовка */
    margin-bottom: 10px;
}

.offers-subtitle {
    font-size: 18px;
    color: #555; /* Чуть светлее для подзаголовка */
    margin-bottom: 20px;
}

.offer-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Центрируем элементы */
}

.offer-item {
    margin: 10px; /* Отступ между элементами */
    width: 200px; /* Ширина для элементов */
    background-color: #ffffff; /* Белый фон для элементов */
    border-radius: 10px; /* Закругленные углы */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Тень для глубины */
    padding: 10px; /* Отступ внутри элементов */
}

.offer-image {
    max-width: 100%;
    height: auto; /* Адаптивный размер изображения */
}

.offer-title {
    font-size: 16px;
    color: #333; /* Цвет заголовка для каждого предложения */
    margin-top: 10px;
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
    .section-4 {
        height: auto; /* Автоматическая высота для мобильных */
        padding: 20px; /* Уменьшенные отступы на мобильных */
        margin-top: 600px; /* Добавьте отступ сверху для мобильных устройств */
    }

    .offers-title {
        font-size: 24px; /* Уменьшение размера заголовка на мобильных */
    }

    .offers-subtitle {
        font-size: 16px; /* Уменьшение размера подзаголовка на мобильных */
    }

    .offer-item {
        width: 90%; /* Ширина для мобильных устройств */
        margin: 10px auto; /* Уменьшение отступов между элементами и выравнивание по центру */
    }
}





.section-5 {
    background: url('/static/images/bg4.jpg') no-repeat center center/cover;
    background-size: cover;
    height: 500px; /* Высота для больших экранов */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.form-container {
    margin-top: 50px; /* Отступ сверху для контактной формы */
    padding: 20px; /* Дополнительные отступы для внутреннего содержимого формы */
    background-color: rgba(255, 255, 255, 0.8); /* Полупрозрачный фон для лучшей читаемости текста */
    border-radius: 10px; /* Закругленные углы для контейнера формы */
}




.section-6 {
    background-color: white;
    padding: 700px 200px;
    max-width: 1000px; /* Изменяем максимальную ширину секции */
    margin: 0 auto;
    overflow: hidden; /* Препятствуем выходу контента за границы */
}

.countries-container {
    max-width: 100%; /* Ограничение ширины контейнера */
    margin: 0 auto;
    text-align: center;
}

.title {
    font-size: 36px;
    color: #333;
    margin-bottom: 40px; /* Отступ снизу от заголовка */
    text-align: center;
    font-weight: bold;
}

.country-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 колонки для стран */
    gap: 30px; /* Отступы между колонками */
    justify-content: center;
    padding: 0;
    max-width: 100%; /* Предотвращаем выход за пределы экрана */
    box-sizing: border-box; /* Учитываем padding и border при расчете ширины */
}

.country-group {
    margin-bottom: 20px;
}

.country-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    text-align: left;
}

.country-item img {
    width: 30px;
    height: auto;
    margin-right: 10px;
}

.country-item span {
    font-size: 18px;
    color: #333;
}

.country-letter {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    text-align: left;
}

/* Мобильная версия */
@media (max-width: 768px) {
    .section-6 {
        padding: 1000px 100px; /* Уменьшаем отступы для мобильных устройств */
    }
    .country-list {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки на мобильных устройствах */
        gap: 15px;
    }

    .title {
        font-size: 28px; /* Уменьшаем размер заголовка на мобильных устройствах */
    }

    .country-item img {
        width: 25px; /* Уменьшаем размер флага */
    }

    .country-item span {
        font-size: 16px; /* Уменьшаем шрифт на мобильных устройствах */
    }
}





.section-7 {
    background: url('/static/images/bg6.jpg') no-repeat center center/cover;
   position: relative; /* Относительное позиционирование для секции */
    overflow: hidden; /* Скрытие лишнего контента */
    height: 100vh; /* Высота секции на полный экран */
    display: flex; /* Используем flexbox для расположения контента */
    align-items: center; /* Центрирование по вертикали */
    background-color: #333; /* Цвет фона секции, чтобы белый текст был виден */
}

.visa-process  {
    flex: 1; /* Занимает оставшееся пространство */
    padding: 20px; /* Отступы для текста */
    color: #fff; /* Цвет основного текста белый */
    text-align: left; /* Текст слева */
    max-width: 600px; /* Максимальная ширина блока с текстом */
    margin-left: -600px; /* Устанавливаем отступ слева для смещения влево */
    /* margin: 0 auto;  Убираем центрирование */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Тень для выделения блока */
    border-radius: 10px; /* Закругленные углы */
}

.header {
    font-size: 2.5rem; /* Большой заголовок */
    margin-bottom: 20px; /* Отступ снизу */
    color: #ffffff; /* Цвет заголовка оранжевый */
}

.subtitle {
    font-size: 1.5rem; /* Подзаголовки меньше заголовка */
    margin-bottom: 10px; /* Отступ снизу для подзаголовков */
    color: #ffffff; /* Цвет подзаголовков оранжевый */
}

.subtitle strong {
    font-size: 1.5rem; /* Увеличение шрифта для выделенных слов */
}
.highlight {
    color: #ff8800; /* Оранжевый цвет для заголовков */
    font-weight: bold; /* Полужирный текст для выделения */
    font-size: 2.5rem; /* Размер текста для выделенных заголовков */
}

.visa-process p {
    color: #fff; /* Цвет основного текста белый */
    font-size: 1rem; /* Размер текста для абзацев */
    margin: 40px; /* Убираем отступы у абзацев */
}


.ship-container {
    position: absolute; /* Абсолютное позиционирование для контейнера с кораблем */
    left: 70%; /* Центрируем по горизонтали */
    bottom: 25vh; /* Начальная позиция корабля внизу */
    transform: translateX(-50%); /* Сдвигаем влево на 50% своей ширины для центрирования */
    z-index: 10; /* Увеличиваем z-index для отображения над другими элементами */
}

.ship {
    width: 150px; /* Размер корабля */
}


/* Медиазапрос для мобильных устройств */
@media (max-width: 768px) {
    .section-7 {
        height: auto; /* Делаем высоту секции автоматической для мобильных устройств */
        padding: 20px; /* Добавляем отступы для удобства */
    }
    .visa-process {
        margin-left: 0; /* Убираем отступ слева */
        margin-right: 0; /* Убираем отступ справа */
        max-width: 100%; /* Максимальная ширина блока с текстом 100% */
        padding: 10px; /* Уменьшаем отступы для мобильного устройства */
        text-align: center; /* Центрируем текст на мобильных устройствах */
    }

    .header {
        font-size: 2rem; /* Уменьшаем размер заголовка для мобильных устройств */
    }

    .subtitle {
        font-size: 1.2rem; /* Уменьшаем размер подзаголовков для мобильных устройств */
    }

    p {
        font-size: 0.9rem; /* Уменьшаем размер текста для мобильных устройств */
        margin: 20px 0; /* Отступы у абзацев */
    }

    .ship-container {
        display: none; /* Показываем контейнер с кораблем на мобильных устройствах */
        bottom: 10px; /* Устанавливаем корабль ближе к низу */
    }
}


.section-8 {
    background-color: #f1f1f1; /* Серый цвет фона */
    background-image: url('/static/images/bg10.png'); /* Замените на ваш путь к изображению */
    background-repeat: no-repeat; /* Не повторять изображение */
    background-position: right center; /* Позиционирование изображения */
    background-size: contain; /* Адаптирует размер фона к секции */
    padding: 50px 20px; /* Отступы */
    text-align: left; /* Изменено на 'left' для смещения текста влево */
    position: relative; /* Позиционирование для последующих элементов */
    overflow: hidden; /* Скрывает контент, выходящий за пределы секции */
}

.icon-container {
    position: relative; /* Для позиционирования иконки относительно контейнера */
    margin-bottom: 20px; /* Отступ снизу */
}

.result-icon {
    width: 100px; /* Ширина иконки */
    height: auto; /* Автоматическая высота, чтобы сохранить пропорции */
}

.result-container {
    max-width: 800px; /* Максимальная ширина контейнера */
    margin-left: 0; /* Убираем центрирование для смещения влево */
    margin-right: auto; /* Делаем отступ справа авто, чтобы сместить влево */
    position: relative; /* Позиционируем контейнер относительно секции */
    z-index: 1; /* Убедитесь, что контейнер выше фона */
    padding-left: 200px; /* Отступ слева для смещения текста */
}

.result-header {
    font-size: 6rem; /* Размер заголовка */
    margin-bottom: 50px; /* Отступ снизу */
    color: #333; /* Цвет заголовка */
}

.result-list {
    list-style: none; /* Убираем стандартные маркеры списка */
    padding: 0; /* Убираем внутренние отступы */
}

.result-item {
    font-size: 1.8rem; /* Размер текста для списка */
    margin: 10px 0; /* Отступы между пунктами */
    color: #555; /* Цвет текста */
}

.checkmark {
    margin-right: 10px; /* Отступ между галочкой и текстом */
    color: #ff8800; /* Цвет галочки */
}
/* Медиазапрос для мобильных устройств */
@media (max-width: 768px) {
     .section-8 {
        background-image: none; /* Убираем фоновое изображение на мобильных устройствах */
    }
    .result-container {
        max-width: 100%; /* Увеличиваем ширину контейнера до 100% */
        margin: 0 auto; /* Центрируем контейнер */
        padding-left: 20px; /* Уменьшаем отступ слева */
        padding-right: 20px; /* Добавляем отступ справа для симметрии */
    }

    .result-header {
        font-size: 3rem; /* Уменьшаем размер заголовка для мобильных устройств */
        margin-bottom: 30px; /* Уменьшаем отступ снизу */
    }

    .result-item {
        font-size: 1.2rem; /* Уменьшаем размер текста для списка */
    }

    .result-icon {
        width: 50px; /* Уменьшаем размер иконки для мобильных */
    }
}

.section-9 {
    padding: 20px; /* Отступы вокруг секции */
    background-color: #f9f9f9; /* Цвет фона для секции */
    text-align: center; /* Центрируем текст */
    position: relative; /* Устанавливаем позицию для вложенного контейнера */
}

.map-container {
    margin-top: 20px; /* Отступ сверху */
    border-radius: 8px; /* Закругление углов */
    overflow: hidden; /* Обрезаем содержимое по краям контейнера */
}

/* Новый стиль для текстового блока */
.contact-info {
    position: absolute; /* Абсолютное позиционирование */
    top: 170px; /* Отступ сверху (увеличен для смещения вниз) */
    left: 30px; /* Отступ слева (увеличен для смещения вправо) */
    background-color: rgba(255, 255, 255, 0.8); /* Полупрозрачный фон для читаемости текста */
    padding: 15px; /* Отступы внутри контейнера */
    border-radius: 8px; /* Закругление углов текста */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Тень для выделения блока */
    z-index: 10; /* Убедитесь, что текст находится поверх карты */
    color: #000; /* Цвет текста на черный */
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
    .map-container {
        margin-left: 0; /* Убираем сдвиг влево */
        margin-right: 0; /* Убираем сдвиг вправо */
        width: 100%; /* Ширина на 100% */
    }

    iframe {
        width: 100%; /* Ширина iframe на 100% */
        height: 500px; /* Высота карты для мобильных устройств */
        border: 0; /* Убираем рамку */
    }

    .contact-info {
        font-size: 14px; /* Меньший шрифт для мобильных устройств */
        padding: 10px; /* Уменьшение отступов */
        top: 1px; /* Уменьшите значение, чтобы поднять блок выше */
        left: 1px;
    }
}


.alert {
    padding: 15px;
    background-color: #4CAF50; /* Зеленый цвет для успешных сообщений */
    color: white; /* Цвет текста */
    margin-bottom: 20px; /* Отступ снизу */
    border-radius: 5px; /* Закругленные углы */
}
.footer {
    background-color: #1b528f; /* Темный фон футера */
    color: #fff; /* Цвет текста */
    padding: 40px 20px; /* Отступы */
}

.footer-container {
    display: flex; /* Используем Flexbox для выравнивания */
    justify-content: space-between; /* Размещаем элементы по краям */
    align-items: center; /* Выравнивание по вертикали */
    max-width: 1200px; /* Максимальная ширина контейнера */
    margin: 0 auto; /* Центрируем контейнер */
    flex-wrap: wrap; /* Позволяем элементам переноситься при узких экранах */
}

.footer-left, .footer-right {
    flex: 1; /* Элементы занимают равное пространство */
    margin: 0 20px; /* Отступы слева и справа */
}

.footer-logo {
    flex: 0 0 auto; /* Логотип занимает фиксированное пространство */
    margin: 0 20px; /* Отступы вокруг логотипа */
    display: flex; /* Используем Flexbox для центрирования логотипа */
    max-width: 30%; /* Максимальная ширина логотипа */
    justify-content: center; /* Центрируем логотип по горизонтали */
    align-items: center; /* Центрируем логотип по вертикали */
}

.footer-logo img {
    max-width: 100%; /* Максимальная ширина логотипа */
    height: auto; /* Автоматическая высота для пропорций */
}

.footer-left p, .footer-right p {
    margin: 5px 0; /* Минимизируем отступы между абзацами */
}

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

.footer a:hover {
    text-decoration: underline; /* Подчеркивание при наведении на ссылку */
}


/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
    .footer {
        flex-direction: column; /* Вертикальное расположение элементов на мобильных устройствах */
        align-items: center; /* Центрируем элементы */
        text-align: center; /* Центрируем текст */
    }

    .footer-container {
        justify-content: center; /* Центрируем контейнер */
        text-align: center; /* Центрируем текст для мобильных устройств */
    }

    .footer-logo {
        margin: 10px 0; /* Отступы для логотипа на мобильных устройствах */
    }
}