/* Общие стили */
body {
  font-family: "Arial", sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
  color: #333;
}

/* Шапка (site-header) */
.site-header {
  /* Фоновое изображение для всей шапки */
  background: url("photo_2025-02-22_19-20-35.jpg") no-repeat center center/cover;
  color: white; /* Белый текст для контраста */
  text-align: center;
  padding: 1em 0; /* Отступы для содержимого */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Тень для разделения от основного контента */
}

/* Стили для header внутри шапки */
header {
  padding: 1em 0;
}

header h1 {
  font-size: 2.5em;
  letter-spacing: 2px;
  margin: 0; /* Убираем отступы заголовка */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Добавляем тень для эффекта */
}

/* Стили для навигации */
nav {
  background: rgba(0, 0, 0, 0.4); /* Полупрозрачный фон для навигации */
  padding: 0.5em 0;
}

nav a {
  color: white; /* Белый цвет ссылок */
  text-decoration: none;
  margin: 0 15px;
  font-size: 18px;
  transition: transform 0.3s ease, color 0.3s ease;
  padding: 5px 10px;
  border-radius: 5px;
}

nav a:hover {
  transform: scale(1.1);
  background: rgba(
    255,
    255,
    255,
    0.2
  ); /* При наведении добавляем легкий белый фон */
  color: #f7dc6f; /* Яркий акцентный цвет */
}

/* Контейнер */
.container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  background-color: #ffffff; /* Белый фон для контрастности */
  word-wrap: break-word; /* Обеспечиваем перенос текста */
  overflow: hidden; /* Убираем возможность выхода информации за пределы контейнера */
  text-align: center; /* Выравнивание всего текста по центру */
}

.container:hover {
  transform: translateY(-10px);
}

/* Стили для разных секций */
.home-container {
  background: #fdebd0; /* Бежевый фон */
  color: #333;
}

.menu-container {
  background: #e8f8f5; /* Мятный фон */
  color: #333;
}

.services-container {
  background: #d5f4e6; /* Светло-зеленый фон */
  color: #333;
}

.contacts-container {
  background: #f5e3e3; /* Розовый фон */
  color: #333;
}

/* Заголовки */
h1,
h2,
h3 {
  text-align: center;
  font-weight: bold;
  letter-spacing: 1px;
}

/* Ссылки */
a {
  color: #3498db; /* Голубой цвет ссылок */
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #2980b9; /* Темно-голубой при наведении */
}

/* Социальные кнопки */
.social-links {
  margin-top: 20px;
  text-align: center;
}

.social-btn {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px;
  border: none;
  border-radius: 5px;
  color: white;
  font-size: 16px;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.social-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.social-btn.vk {
  background-color: #4a76a8; /* Цвет VK */
}

.social-btn.insta {
  background-color: #e1306c; /* Цвет Instagram */
}

/* Стили для меню */

/* Разделы меню */
.menu-section {
  margin-bottom: 20px;
}

.menu-section h3 {
  color: #3498db; /* Голубой цвет для заголовков */
  margin-bottom: 10px;
  text-align: center; /* Выравнивание заголовков по центру */
}

/* Общий стиль для всех элементов меню */
.menu-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

.menu-item {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  padding: 15px;
  width: calc(33% - 20px); /* Три колонки для больших экранов */
  transition: transform 0.3s ease;
  text-align: center; /* Выравнивание текста по центру */
}

.menu-item:hover {
  transform: translateY(-10px); /* Эффект при наведении */
}

/* Название и цена */
.menu-title {
  display: flex;
  flex-direction: column; /* Располагаем название и цену вертикально */
  align-items: center; /* Центрируем элементы */
  margin-bottom: 10px;
}

.main-course-name {
  font-size: 1.2em;
  font-weight: bold; /* Жирный шрифт */
  text-transform: uppercase; /* Прописываем название капсом */
  color: #2ecc71; /* Зеленый цвет */
  margin: 0 0 5px; /* Отступ между названием и ценой */
}
.main-course-price {
  font-size: 1em;
  font-weight: bold;
  color: #2ecc71; /* Яркий цвет для цен */
  margin: 0;
}

.soup-name {
  font-size: 1.2em;
  font-weight: bold; /* Жирный шрифт */
  text-transform: uppercase; /* Прописываем название капсом */
  color: #2ecc71; /* Зеленый цвет */
  margin: 0 0 5px; /* Отступ между названием и ценой */
}
.soup-price {
  font-size: 1em;
  font-weight: bold;
  color: #2ecc71; /* Яркий цвет для цен */
  margin: 0;
}

.salad-name {
  font-size: 1.2em;
  font-weight: bold; /* Жирный шрифт */
  text-transform: uppercase; /* Прописываем название капсом */
  color: #2ecc71; /* Зеленый цвет */
  margin: 0 0 5px; /* Отступ между названием и ценой */
}
.salad-price {
  font-size: 1em;
  font-weight: bold;
  color: #2ecc71; /* Яркий цвет для цен */
  margin: 0;
}

.menu-name {
  font-size: 1.2em;
  font-weight: bold; /* Жирный шрифт */
  text-transform: uppercase; /* Прописываем название капсом */
  color: #2ecc71; /* Зеленый цвет */
  margin: 0 0 5px; /* Отступ между названием и ценой */
}
.menu-price {
  font-size: 1em;
  font-weight: bold;
  color: #2ecc71; /* Яркий цвет для цен */
  margin: 0;
}

.pizza-name {
  font-size: 1.2em;
  font-weight: bold; /* Жирный шрифт */
  text-transform: uppercase; /* Прописываем название капсом */
  color: #2ecc71; /* Зеленый цвет */
  margin: 0 0 5px; /* Отступ между названием и ценой */
}
.pizza-price {
  font-size: 1em;
  font-weight: bold;
  color: #2ecc71; /* Яркий цвет для цен */
  margin: 0;
}

/* Описание состава */
.menu-item p {
  margin: 0;
  font-size: 0.9em;
  line-height: 1.5;
  text-align: center; /* Выравнивание состава по центру */
}

/* Секция пиццы */
.pizza-section {
  text-align: center;
  margin-bottom: 20px;
}

/* Общая картинка для раздела пиццы */
.pizza-overview {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

/* Изображение карты */
.map-image {
  max-width: 100%;
  border-radius: 15px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.map-image:hover {
  transform: scale(1.05);
}

/* Адаптивность */
@media (max-width: 768px) {
  .menu-item {
    width: calc(50% - 20px); /* Две колонки для планшетов */
  }
}

@media (max-width: 480px) {
  .menu-item {
    width: 100%; /* Одна колонка для смартфонов */
  }
}