/* Стили для всего сайта */
  body {
    background-color: #fffaf6; /* Нежный кремовый фон */
    font-family: Arial, sans-serif; /* Удобный современный шрифт */
    color: #4a3728; /* Шоколадный цвет текста вместо резкого черного */
    max-width: 700px; /* Ограничиваем ширину сайта, чтобы текст не размазывался */
    width: 100%;
    margin: 0 auto; /* Центрируем сайт ровно по середине экрана */
    padding: 30px; /* Добавляем отступы от краев экрана */
    box-sizing: border-box; /* Эта строчка защитит сайт от вылезания за края из-за отступов */
  }

  /* Стили для заголовков */
  h1 {
    color: green; /* Красивый глубокий праздничный цвет */
    text-align: center; /* Выравниваем главный заголовок по центру */
  }

  h2 {
    color: #8b0000;
    margin-top: 40px; /* Добавляем отступ сверху перед разделом преимуществ */
  }

  /* Усмиряем нашу огромную картинку */
  img {
    width: 100%; /* Картинка займет всю ширину нашего сайта (700 пикселей) */
    max-width: 500px; /* Но не станет больше 500 пикселей, чтобы оставаться аккуратной */
    height: auto; /* Высота подстроится автоматически, чтобы фото не сжалось */
    display: block; /* Позволяет выровнять картинку */
    margin: 20px auto; /* Центрируем картинку и делаем отступы сверху и снизу */
    border-radius: 50px; /* Закругляем уголки у фотографии, как на современных сайтах */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Добавляем мягкую, дорогую тень под фото */
  }
/* Превращаем шапку в гибкий флекс-контейнер */
.site-header {
  display: flex; /* Магия: выстраивает все элементы внутри в одну строчку! */
  justify-content: space-between; /* Расталкивает логотип влево, а телефон вправо */
  align-items: center; /* Выравнивает их ровно по вертикали (по центру друг друга) */
  
  background-color: #ffffff; /* Делаем белый фон для шапки */
  padding: 15px 20px; /* Добавляем внутренние отступы, чтобы текст не прилипал к краям */
  border-radius: 10px; /* Скругляем уголки шапки */
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Добавляем легкую стильную тень снизу */
  margin-bottom: 30px; /* Делаем отступ снизу, чтобы шапка не прилипала к главному тексту */
}

/* Стили для логотипа */
.logo {
  font-size: 20px;
  font-weight: bold;
  color: #d2691e; /* Шоколадно-карамельный цвет */
}

/* Стили для телефона */
.phone {
  font-size: 16px;
  font-weight: bold;
  color: #4a3728;
}
/* Стили для кнопки отправки */
.submit-btn {
  width: 100%;
  background-color: #ff69b4; /* Яркий ягодный цвет */
  color: white;
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
  border: none;
  border-radius: 30px; /* Округлая форма кнопки */
  cursor: pointer; /* Курсор превращается в пальчик при наведении */
  box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3); /* Мягкая тень под кнопкой */
  
  /* Плавная анимация изменения цвета и приподнимания */
  transition: background-color 0.3s, transform 0.2s; 
}

/* Эффект при наведении мышки на кнопку */
.submit-btn:hover {
  background-color: #e04d9b; /* Цвет становится чуть темнее */
  transform: translateY(-2px); /* Кнопка аккуратно приподнимается */
}
/* Стили для подвала сайта */
.site-footer {
  margin-top: 60px; /* Отступ сверху от формы заказа */
  padding: 30px 20px;
  background-color: #4a3728; /* Темно-шоколадный фон подвала */
  color: #fffcf9; /* Светлый текст, который хорошо видно на темном */
  text-align: center;
  border-radius: 15px 15px 0 0; /* Скругляем только верхние углы подвала */
}

.footer-text {
  margin: 0 0 20px 0;
  font-size: 14px;
  opacity: 0.8; /* Делаем текст копирайта чуть приглушенным */
}

/* Выстраиваем кнопки контактов в ряд с помощью Flexbox */
.footer-contacts {
  display: flex;
  justify-content: center;
  gap: 15px; /* Расстояние между кнопками */
  flex-wrap: wrap; /* Если экран узкий, кнопки встанут друг под друга */
}

/* Общие стили для кнопок-ссылок */
.contact-link {
  display: inline-block;
  padding: 10px 20px;
  color: white;
  text-decoration: none; /* Убираем стандартное подчеркивание ссылки */
  border-radius: 20px;
  font-size: 14px;
  font-weight: bold;
  transition: opacity 0.2s, transform 0.2s;
}

/* Индивидуальные фирменные цвета для мессенджеров */
.whatsapp {
  background-color: #25d366; /* Зеленый цвет WhatsApp */
}

.telegram {
  background-color: #0088cc; /* Синий цвет Telegram */
}

/* Эффект при наведении на кнопки соцсетей */
.contact-link:hover {
  opacity: 0.9; /* Кнопка становится чуть-чуть прозрачнее */
  transform: scale(1.05); /* Кнопка слегка увеличивается в размере (эффект пульсации) */
}