/* Главная секция (герой) с большим заголовком и призывом к действию */
.hero {
  background: linear-gradient(rgba(0, 91, 170, 0.4), rgba(0, 58, 110, 0.5)), url('../../images/hero1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--text-light);
  text-align: center;
  padding: 180px 0 100px;
  margin-top: 80px;
}

.hero h1 {
  font-size: 48px; /* Большой размер заголовка */
  margin-bottom: 20px; /* Отступ снизу */
}

.hero p {
  font-size: 20px; /* Размер текста описания */
  max-width: 700px; /* Максимальная ширина текста */
  margin: 0 auto 30px; /* Центрирование и отступ снизу */
}

.hero .logo-large {
  font-size: 72px; /* Очень большой размер логотипа */
  margin-bottom: 20px; /* Отступ снизу */
  color: var(--primary-yellow); /* Желтый цвет */
}

.hero .slogan {
  font-size: 28px; /* Размер слогана */
  font-weight: bold; /* Жирный шрифт */
  margin-bottom: 30px; /* Отступ снизу */
}

/* Секция услуг с карточками категорий */
.services {
  padding: 80px 0; /* Большие вертикальные отступы */
  background-color: var(--light-gray); /* Светло-серый фон */
}

/* Заголовок секции с описанием */
.section-title {
  text-align: center; /* Центрирование */
  margin-bottom: 50px; /* Отступ снизу */
}

.section-title h2 {
  font-size: 36px; /* Размер заголовка секции */
  color: var(--primary-blue); /* Синий цвет */
  margin-bottom: 15px; /* Отступ снизу */
}

.section-title p {
  color: #444; /* Серый цвет текста */
  max-width: 700px; /* Максимальная ширина */
  margin: 0 auto; /* Центрирование */
}

/* Сетка карточек услуг на flexbox */
.services-grid {
  display: flex; /* Flexbox контейнер */
  flex-wrap: wrap; /* Перенос элементов на новую строку */
  gap: 20px; /* Отступы между карточками */
  align-items: stretch; /* Растягивание карточек по высоте */
}

/* Отдельная карточка услуги */
.service-card {
  background-color: white; /* Белый фон */
  border-radius: 8px; /* Скругление углов */
  overflow: hidden; /* Скрытие выходящего контента */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Тень карточки */
  transition: transform 0.3s; /* Плавная анимация трансформации */
  display: flex; /* Flexbox для внутреннего содержимого */
  flex-direction: column; /* Вертикальное расположение элементов */
  width: calc(20% - 16px); /* Фиксированная ширина для 5 карточек */
  max-width: 220px; /* Максимальная ширина */
  min-width: 200px; /* Минимальная ширина */
}

.service-card:hover {
  transform: translateY(-10px); /* Поднятие карточки при наведении */
}

/* Контейнер для изображения услуги */
.service-img {
  height: 180px; /* Фиксированная высота */
  background-color: #f8f9fa; /* Светлый фон-заглушка */
  flex-shrink: 0; /* Запрет сжатия */
  position: relative; /* Относительное позиционирование */
  overflow: hidden; /* Скрытие выходящего контента */
  display: flex; /* Flexbox для центрирования */
  align-items: center; /* Вертикальное центрирование */
  justify-content: center; /* Горизонтальное центрирование */
  border-bottom: 2px solid #e9ecef; /* Разделительная линия */
}

.service-img img {
  width: 100%; /* Полная ширина изображения */
  height: 100%; /* Полная высота изображения */
  object-fit: cover; /* Заполнение всего пространства с обрезкой */
  object-position: center; /* Центрирование изображения */
}

/* Контент карточки (название, товары, кнопка) */
.service-content {
  padding: 20px; /* Внутренние отступы */
  display: flex; /* Flexbox для вертикального распределения */
  flex-direction: column; /* Вертикальное расположение */
  flex-grow: 1; /* Растягивание на доступное пространство */
}

/* Название категории услуг */
.service-content h3 {
  font-size: 18px; /* Размер шрифта заголовка */
  margin-bottom: 15px; /* Отступ снизу */
  color: var(--primary-blue); /* Синий цвет */
  flex-shrink: 0; /* Запрет сжатия */
  text-align: center; /* Центрирование текста */
  padding-bottom: 10px; /* Отступ снизу */
  border-bottom: 1px solid #e9ecef; /* Разделительная линия */
  font-weight: bold; /* Жирный шрифт */
  height: 60px; /* Фиксированная высота для выравнивания */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Контейнер для списка популярных товаров */
.service-products {
  flex-grow: 1; /* Растягивание на доступное пространство */
  margin-bottom: 10px; /* Отступ снизу */
  padding: 8px 0; /* Вертикальные отступы */
  min-height: 80px; /* Увеличенная минимальная высота для выравнивания */
  display: flex;
  flex-direction: column;
}

/* Заголовок "Популярные товары" */
.service-products-title {
  font-size: 13px; /* Размер шрифта */
  font-weight: 600; /* Полужирный шрифт */
  color: var(--primary-blue); /* Синий цвет */
  margin-bottom: 8px; /* Отступ снизу */
  text-transform: uppercase; /* Заглавные буквы */
  letter-spacing: 0.5px; /* Межбуквенный интервал */
  text-align: center; /* Центрирование */
  position: relative; /* Для псевдоэлемента */
}

/* Декоративная линия под заголовком */
.service-products-title::after {
  content: ''; /* Пустой контент */
  display: block; /* Блочный элемент */
  width: 30px; /* Ширина линии */
  height: 2px; /* Высота линии */
  background-color: var(--primary-yellow); /* Желтый цвет */
  margin: 4px auto 0; /* Центрирование и отступ сверху */
}

/* Названия отдельных товаров */
.service-products p {
  margin-bottom: 4px; /* Отступ снизу */
  color: #444; /* Серый цвет */
  font-size: 13px; /* Размер шрифта */
  line-height: 1.3; /* Межстрочный интервал */
  text-align: center; /* Центрирование */
}

/* Кнопка "Посмотреть все" в карточке */
.service-content .btn {
  margin-top: auto; /* Прижатие к низу */
  align-self: center; /* Центрирование по горизонтали */
  padding: 8px 16px; /* Уменьшенные отступы */
  font-size: 12px; /* Уменьшенный размер шрифта */
  width: 100%; /* Полная ширина */
  text-align: center; /* Центрирование текста */
}

/* Секция "О нас" с текстом и изображением */
.about {
  padding: 80px 0; /* Вертикальные отступы */
}

/* Контейнер для контента "О нас" */
.about-content {
  display: flex; /* Flexbox для горизонтального расположения */
  align-items: center; /* Вертикальное выравнивание */
  gap: 50px; /* Отступ между элементами */
}

/* Текстовая часть секции "О нас" */
.about-text {
  flex: 1; /* Равное распределение пространства */
}

.about-text h2 {
  font-size: 36px; /* Размер заголовка */
  color: var(--primary-blue); /* Синий цвет */
  margin-bottom: 20px; /* Отступ снизу */
}

.about-text p {
  margin-bottom: 20px; /* Отступ снизу */
  color: #444; /* Серый цвет текста */
}

/* Изображение в секции "О нас" */
.about-image {
  flex: 1; /* Равное распределение пространства */
  flex-shrink: 0; /* Запрет сжатия изображения */
  height: 400px; /* Фиксированная высота */
  background-color: #ddd; /* Серый фон-заглушка */
  border-radius: 8px; /* Скругление углов */
  background-size: cover; /* Покрытие всей области */
  background-position: center; /* Центрирование фона */
  min-width: 300px; /* Минимальная ширина для предотвращения исчезновения */
}

/* Секция отзывов клиентов */
.testimonials {
  padding: 80px 0; /* Вертикальные отступы */
  background-color: var(--light-gray); /* Светло-серый фон */
}

/* Сетка карточек отзывов */
.testimonials-grid {
  display: grid; /* CSS Grid */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Адаптивные колонки */
  gap: 30px; /* Отступы между карточками */
}

/* Отдельная карточка отзыва */
.testimonial-card {
  background-color: white; /* Белый фон */
  padding: 30px; /* Внутренние отступы */
  border-radius: 8px; /* Скругление углов */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* Легкая тень */
  display: flex; /* Flexbox для вертикального распределения */
  flex-direction: column; /* Вертикальное расположение элементов */
  height: 100%; /* Полная высота в grid контейнере */
}

/* Звездочки рейтинга в отзыве */
.testimonial-card .stars {
  color: var(--primary-yellow); /* Желтый цвет звезд */
  margin-bottom: 15px; /* Отступ снизу */
}

/* Текст отзыва */
.testimonial-card p {
  font-style: italic; /* Курсивный шрифт для текста отзыва */
  margin-bottom: 20px; /* Отступ снизу */
  flex-grow: 1; /* Растягивание на доступное пространство */
}

/* Контейнер с информацией об авторе отзыва */
.testimonial-author {
  display: flex; /* Flexbox для горизонтального расположения */
  align-items: center; /* Вертикальное выравнивание */
  gap: 15px; /* Отступ между аватаром и информацией */
  margin-top: auto; /* Прижимание к низу карточки */
}

/* Аватар автора отзыва */
.author-avatar {
  width: 50px; /* Ширина аватара */
  height: 50px; /* Высота аватара */
  border-radius: 50%; /* Круглая форма */
  background-color: #ddd; /* Серый фон-заглушка */
  background-size: cover; /* Покрытие всей области */
}

/* Заголовок с именем автора */
.author-info h4 {
  font-size: 18px; /* Размер шрифта имени */
  margin: 0; /* Убираем отступы */
  line-height: 1.2; /* Межстрочный интервал */
}

/* Дополнительная информация об авторе */
.author-info p {
  font-style: normal; /* Обычный (не курсивный) шрифт */
  color: #444; /* Серый цвет текста */
  font-size: 14px; /* Размер шрифта */
  margin: 0; /* Убираем отступы */
  line-height: 1.2; /* Межстрочный интервал */
}

/* Секция призыва к действию (Call-to-Action) */
.cta {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--dark-blue) 100%);
  color: var(--text-light);
  text-align: center;
}

/* Заголовок CTA секции */
.cta h2 {
  font-size: 36px; /* Размер заголовка */
  margin-bottom: 20px; /* Отступ снизу */
}

/* Описательный текст в CTA секции */
.cta p {
  max-width: 700px; /* Максимальная ширина текста */
  margin: 0 auto 30px; /* Центрирование и отступ снизу */
  font-size: 18px; /* Размер шрифта */
}

/* Компенсация высоты header для якорных ссылок */
#reviews {
  scroll-margin-top: 120px;
}

#about {
  scroll-margin-top: 120px;
}

/* Медиа-запросы для адаптивного дизайна */

/* Большие экраны (до 1400px) - 4 карточки в ряд */
@media (max-width: 1400px) {
  .service-card {
    width: calc(25% - 15px); /* Ширина для 4 карточек с учетом отступов */
    max-width: 280px; /* Максимальная ширина карточки */
  }
}

/* Средние экраны (до 1200px) - 3 карточки в ряд */
@media (max-width: 1200px) {
  .service-card {
    width: calc(33.333% - 14px); /* Ширина для 3 карточек с учетом отступов */
    max-width: 350px; /* Максимальная ширина карточки */
  }
}

/* Планшеты (до 992px) - 2 карточки в ряд */
@media (max-width: 992px) {
  .about-content {
    flex-direction: column; /* Вертикальное расположение в секции "О нас" */
    gap: 30px; /* Отступ между текстом и изображением */
  }

  .about-image {
    display: block !important; /* Принудительное отображение */
    width: 100%; /* Полная ширина изображения */
    height: 300px; /* Уменьшенная высота для планшетов */
    flex: none; /* Отмена flex свойств */
  }

  .service-card {
    width: calc(50% - 10px); /* Ширина для 2 карточек с учетом отступов */
    max-width: 400px; /* Максимальная ширина карточки */
  }
}

/* Мобильные устройства (до 768px) */
@media (max-width: 768px) {
  .header-contact {
    display: none; /* Скрытие контактов в хедере */
  }

  nav ul {
    display: none; /* Скрытие основного меню */
  }

  .mobile-menu-btn {
    display: block; /* Показ кнопки мобильного меню */
  }

  .hero h1 {
    font-size: 36px; /* Уменьшенный размер заголовка */
  }

  .hero p {
    font-size: 18px; /* Уменьшенный размер текста */
  }

  .hero .logo-large {
    font-size: 48px; /* Уменьшенный размер логотипа */
  }

  .hero .slogan {
    font-size: 22px; /* Уменьшенный размер слогана */
  }

  .about-text h2 {
    font-size: 28px; /* Уменьшенный размер заголовка секции "О нас" */
  }

  .about-image {
    display: block !important; /* Принудительное отображение */
    height: 250px; /* Еще более уменьшенная высота для мобильных */
    flex: none; /* Отмена flex свойств */
  }

  .service-card {
    width: calc(50% - 10px); /* 2 карточки в ряд */
  }
}

/* Маленькие мобильные устройства (до 576px) - 1 карточка в ряд */
@media (max-width: 576px) {
  .hero {
    padding: 150px 0 80px; /* Уменьшенные отступы героя */
  }

  .hero h1 {
    font-size: 28px; /* Еще более уменьшенный заголовок */
  }

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

  .btn {
    padding: 10px 20px; /* Уменьшенные отступы кнопок */
    font-size: 13px; /* Уменьшенный размер шрифта кнопок */
  }

  .service-card {
    width: 100%; /* Полная ширина карточки - 1 в ряд */
    max-width: none; /* Убираем ограничение максимальной ширины */
  }
}