@font-face {
  font-family: "Roboto"; /* имя шрифта для использования в CSS */
  src: url("../fonts/roboto-v51-cyrillic_latin-regular.woff2") format("woff2"); /* путь к файлу шрифта */
  font-weight: 400; /* обычная толщина */
  font-style: normal; /* обычный стиль, не курсив */
  font-display: swap; /* сначала покажет запасной шрифт, потом заменит на Roboto */
}
@font-face {
  font-family: "Philosopher"; /* имя второго шрифта */
  src: url("../fonts/philosopher-v21-cyrillic_latin-regular.woff2") format("woff2"); /* путь к файлу второго шрифта */
  font-weight: 400; /* обычная толщина */
  font-style: normal; /* обычный стиль */
  font-display: swap; /* быстрая отрисовка текста */
}
/* Стили для страницы */
body {
    background-color: #ffe2b0; /* Цвет фона страницы — светло-бежевый */
    font-family: 'Roboto', sans-serif; /* Основной текстовый шрифт */
}
/* Стили для контейнера с logo */
header {
    text-align: center; /* Выравнивание logo по центру */
    margin-bottom: 20px; /* Отступ снизу — 20 пикселей */
}
/* Стили для навигационного меню в main */
.main-menu {
    margin-bottom: 20px; /* Отступ снизу — 20 пикселей */
}
/* Стили для списка в навигационном меню */
nav ul {
    list-style: none; /* Убираем маркеры списка */
    display: flex; /* Используем flexbox для выравнивания элементов списка в строку */
    justify-content: center; /* Центрируем элементы по горизонтали */
    gap: 100px; /* Промежуток между элементами списка — 100 пикселей */
}
/* Стили для текста в навигационном меню */
nav a {
    font-size: 18px;       /* Размер шрифта — 18 пикселей */
    font-weight: 600; /* Полужирный шрифт */
    text-transform: uppercase; /* Преобразование текста в верхний регистр */
    text-decoration: none; /* Убираем подчеркивание у ссылок */
    color: black; /* Цвет текста — чёрный */
}
/* Стили для ссылок при наведении */
nav a:hover {
    color: rgba(230, 115, 0, 0.76); /* Цвет текста при наведении — полупрозрачный оранжевый */
    transition: color 0.2s ease; /* Плавный переход цвета текста при наведении */
    text-decoration: underline; /* Подчеркивание текста при наведении */
    text-underline-offset: 5px; /* Отступ подчеркивания от текста — 5 пикселей */
    text-decoration-thickness: 1px; /* Толщина подчеркивания — 1 пиксель */
}
/* Стили для блока с изображением */
/* Этот блок будет использоваться для размещения фонового изображения и блока с текстом поверх него */
.hero {
    margin-bottom: 20px; /* Отступ снизу — 20 пикселей */
    position: relative; /* Относительное позиционирование — позволяет использовать абсолютное позиционирование для дочерних элементов */
    height: 640px; /* Высота блока с изображением — 640 пикселей */
    background-image: url('../img/background_image.jpg'); /* Фоновое изображение */
    background-size: cover; /* Масштабирование изображения, чтобы оно полностью заполнило блок */
    background-position: center; /* Центрирование изображения */
    background-repeat: no-repeat; /* Запрет повторения изображения */
}
/* Стили для блока поверх изображения */
/* Этот блок будет использоваться для размещения текста поверх фонового изображения */
.overlay-box {
    position: absolute;  /* Абсолютное позиционирование — позволяет разместить блок поверх изображения */
    top: 54%;          /* Расстояние сверху от изображения */
    left: 50%;          /* Расстояние слева от изображения */
    padding: 15px; /* Внутренний отступ — 15 пикселей */
    background: linear-gradient(
      180deg,                              /* Направление градиента — сверху вниз (180 градусов) */
      rgba(244, 213, 178, 0.8) 0%,         /* Начальный цвет градиента (бежевый, 80% прозрачности) */
      rgba(234, 156, 65, 0.8) 100%         /* Конечный цвет градиента (оранжевый, 80% прозрачности) */
    );
}
/* Стили для текста внутри блока поверх изображения */
.overlay-text-box {
    width: 390px;        /* Ширина рамки */
    height: 160px;      /* Высота рамки */
    box-sizing: border-box;    /* Учитывает padding в общей ширине/высоте рамки */
    padding: 17px 28px; /* Внутренний отступ — 17 пикселей сверху и снизу, 28 пикселей слева и справа */
    border: 1px solid black;   /* Чёрная рамка толщиной 1px */
}
/* Заголовок внутри рамки */
.overlay-text-box h3 {
    margin-bottom: 9px; /* Отступ снизу — 9 пикселей */
    font-size: 36px;                     /* Размер заголовка — крупный */
    font-family: 'Philosopher', sans-serif; /* Шрифт Philosopher Regular */
}
/* Абзац текста внутри рамки */
.overlay-text-box p {
    text-align: left; /* Выравнивание текста по левому краю */
    font-size: 12px;                    /* Мелкий размер шрифта */
}
.logo-section {
    margin-bottom: 20px; /* Отступ снизу — 20 пикселей */
}
/* Стили для трех логотипов */
.logo-row {
    display: flex; /* Используем flexbox для выравнивания элементов списка в строку */
    justify-content: center; /* Центрируем элементы по горизонтали */
    gap: 76px; /* Промежуток между элементами списка — 76 пикселей */
}
.text-order-map {
    margin-bottom: 20px; /* Отступ снизу — 20 пикселей */
    display: flex; /* Используем flexbox для выравнивания элементов списка в строку */
    align-items: center; /* Центрируем элементы по вертикали */
    flex-direction: column; /* Выравниваем элементы по вертикали */
    gap: 20px; /* Промежуток между элементами списка — 20 пикселей */
    text-align: center; /* Выравнивание текста по центру */
}
.text-box h1 {
    font-size: 96px; /* Размер заголовка — крупный */
    font-family: 'Philosopher', sans-serif; /* Шрифт Philosopher Regular */
}
h1 .highlight {
    color: #f15b40; /* Цвет выделенного текста — оранжевый */
}
.text-box p {
    font-size: 18px; /* Размер текста — средний */
    width: 1000px; /* Ширина текста — 1000 пикселей */
}
/* Стили для кнопки заказа */
.order-btn {
    padding: 12px 32px; /* Внутренний отступ — 12 пикселей сверху и снизу, 32 пикселя слева и справа */
    background: #ff9900; /* Цвет фона кнопки — ярко-оранжевый */
    color: #fff; /* Цвет текста кнопки — белый */
    font-size: 1.1rem; /* Размер шрифта — 1.1rem */
    font-weight: bold; /* Жирный шрифт */
    border: none; /* Убираем стандартную рамку */
    border-radius: 8px; /* Плавно скруглённые углы */
    cursor: pointer; /* Курсор-рука при наведении */
    box-shadow: 0 2px 8px rgba(0,0,0,0.10); /* Лёгкая тень */
    transition: background 0.2s, box-shadow 0.2s; /* Плавные эффекты при наведении */
}
/* Стили для кнопки заказа при наведении */
.order-btn:hover {
    background: #ff7700; /* Цвет фона кнопки при наведении — чуть темнее оранжевый */
    color: #fff; /* Цвет текста кнопки остаётся белым */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Увеличиваем тень при наведении */
    transform: translateY(-2px) scale(1.03); /* Поднимаем кнопку и увеличиваем её размер при наведении */
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s; /* Плавный переход при наведении */
}

.modal {                                   /* внешний слой модального окна */
    display: none;                         /* по умолчанию окно скрыто */
    position: fixed;                       /* фиксируем на экране */
    z-index: 1000;                         /* поверх других элементов */
    left: 0;                               /* слева 0 (растягиваем на весь экран) */
    top: 0;                                /* сверху 0 */
    width: 100%;                           /* ширина 100% экрана */
    height: 100%;                          /* высота 100% экрана */
    background: rgba(0,0,0,0.4);           /* полупрозрачное затемнение фона */
}

.modal-content {                           /* внутренний блок модального окна */
    background: #fff;                      /* белый фон окна */
    margin: 12% auto;                      /* сверху 12% от экрана, по центру по горизонтали */
    padding: 32px 24px;                    /* внутренние отступы */
    border-radius: 12px;                   /* скруглённые углы окна */
    width: 90%;                            /* ширина 90% от экрана */
    max-width: 380px;                      /* максимальная ширина 380px */
    box-shadow: 0 2px 16px rgba(0,0,0,0.16);/* тень вокруг окна */
    text-align: center;                    /* центрируем текст внутри окна */
    position: relative;                    /* для позиционирования крестика */
}

.close {                                 /* крестик закрытия модального окна */
    position: absolute;                    /* абсолютное позиционирование внутри окна */
    right: 14px;                           /* отступ справа */
    top: 12px;                             /* отступ сверху */
    font-size: 1.8rem;                     /* размер крестика */
    color: #888;                           /* серый цвет крестика */
    cursor: pointer;                       /* курсор-рука при наведении */
    user-select: none;                     /* нельзя выделить текст крестика */
    transition: color 0.2s;                /* плавное изменение цвета при наведении */
}

.close:hover {                           /* эффект при наведении на крестик */
  color: #ff9900;                        /* оранжевый цвет крестика */
}
/* Стили для блока с картой */
.map-block {
    width: 100%;           /* занимает всю ширину родителя */
    max-width: 900px;      /* максимум — например, 900px */
    height: 400px; /* Высота карты — 400 пикселей */
    border: none; /* Убираем рамку вокруг карты */
}
/* Стили карты */
.map-block iframe {
    width: 100%;           /* карта растягивается на всю ширину блока */
    height: 100%;          /* карта растягивается на всю высоту блока */
    border: none;         /* Убираем рамку вокруг карты */
    border-radius: 10px; /* Закругляем углы карты */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Добавляем тень к карте */
    transition: transform 0.3s; /* Плавный переход при наведении */
}
.map-block:hover iframe {
    transform: scale(1.05); /* Увеличиваем размер карты при наведении */
}
/* Стили для разделителя */
/* Этот разделитель будет использоваться для создания горизонтальной линии */
.divider {
    margin: 0 auto 20px auto; /* Отступ снизу — 20 пикселей */
    width: 100%; /* Ширина линии — 100% */
    max-width: 1024px; /* Максимальная ширина — 1024 пикселя */
    height: 1px; /* Высота линии — 1 пиксель */
    background-color: #999999; /* Цвет линии — серый */
    border: none; /* Убираем рамку вокруг линии */
}
/* Стили для футера */
footer {
    padding-bottom: 20px; /* Отступ снизу — 20 пикселей */
}