/* === ОСНОВНЫЕ СТИЛИ === */
body { /* начало блока стилей */
  margin: 0; /* Убираем внешние отступы страницы */ /* внешний отступ */
  font-family: 'Segoe UI', sans-serif; /* Основной шрифт интерфейса */ /* шрифт */
  color: #333; /* Цвет текста по умолчанию — тёмно-серый */ /* цвет */
  background-color: #fff; /* Белый фон страницы */ /* цвет */
} /* конец блока стилей */

/* === Общий Контейнер сайта === */
.container { /* начало блока стилей */
  max-width: 1200px;     /* максимальная ширина контейнера */ /* ширина */
  margin: 0 auto;        /* центрируем по горизонтали */ /* внешний отступ */
  padding: 0 20px;       /* небольшой внутренний отступ по краям */ /* внутренний отступ */
} /* конец блока стилей */



a { /* начало блока стилей */
  text-decoration: none; /* Убираем подчёркивание у ссылок */ /* свойство */
  color: inherit; /* Наследуем цвет от родителя (обычно body) */ /* цвет */
} /* конец блока стилей */

/* === ШАПКА САЙТА === */

header { /* начало блока стилей */
  position: fixed; /* свойство */
  top: 0; /* свойство */
  left: 0; /* свойство */
  width: 100%; /* ширина */
  height: 70px; /* если у тебя шапка 70px */ /* высота */
  z-index: 999; /* свойство */
  background: #fff; /* чтобы не просвечивал */ /* фон */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* по желанию */ /* тень блока */
} /* конец блока стилей */



/* === СЕКЦИЯ "ПОСЛУГИ" === */
.services { /* начало блока стилей */
  background-color: #f2f2f2; /* Светло-серый фон */ /* цвет */
  padding: 60px 20px; /* Отступы сверху и по бокам */ /* внутренний отступ */
  text-align: center; /* Центрирование текста */ /* выравнивание текста */
} /* конец блока стилей */

.services h2 { /* начало блока стилей */
  font-size: 24px; /* Размер заголовка */ /* шрифт */
  margin-bottom: 40px; /* Отступ под заголовком */ /* внешний отступ */
} /* конец блока стилей */

/* Сетка карточек услуг */
.service-grid { /* начало блока стилей */
  display: grid; /* CSS Grid-сетка */ /* режим отображения */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); /* свойство */
  /* Автоматическая адаптация колонок */
  gap: 20px; /* Промежутки между карточками */ /* расстояние между элементами */
  max-width: 1000px; /* Максимальная ширина сетки */ /* ширина */
  margin: 0 auto; /* Центрирование блока */ /* внешний отступ */
} /* конец блока стилей */

/* Карточка одной услуги */
.service-box { /* начало блока стилей */
  background: white; /* Белый фон карточки */ /* фон */
  padding: 30px 20px; /* Внутренние отступы */ /* внутренний отступ */
  border-radius: 8px; /* Скругление углов */ /* граница */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Тень вокруг карточки */ /* тень блока */
} /* конец блока стилей */

/* Иконка внутри карточки */
.service-box img { /* начало блока стилей */
  height: 50px; /* Высота иконки */ /* высота */
  margin-bottom: 15px; /* Отступ под иконкой */ /* внешний отступ */
} /* конец блока стилей */

/* Заголовок услуги */
.service-box h3 { /* начало блока стилей */
  font-size: 18px; /* Размер заголовка */ /* шрифт */
  margin-bottom: 10px; /* Отступ под заголовком */ /* внешний отступ */
} /* конец блока стилей */

/* Описание услуги */
.service-box p { /* начало блока стилей */
  font-size: 14px; /* Размер текста */ /* шрифт */
  color: #666; /* Светло-серый цвет */ /* цвет */
} /* конец блока стилей */







/* Контейнер для контента внутри шапки */
.header-container { /* начало блока стилей */
  display: flex; /* режим отображения */
  align-items: center; /* свойство */
  justify-content: space-between; /* свойство */
  padding: 15px 30px; /* внутренний отступ */
  max-width: 1200px; /* ширина */
  margin: 0 auto; /* внешний отступ */
  flex-wrap: nowrap; /* гибкий контейнер */
} /* конец блока стилей */

/* Блок логотипа + названия фирмы */
.logo-block { /* начало блока стилей */
  display: flex; /* режим отображения */
  align-items: center; /* свойство */
  gap: 10px; /* расстояние между элементами */
} /* конец блока стилей */

.logo-img { /* начало блока стилей */
  height: 60px; /* высота */
  display: block; /* режим отображения */
} /* конец блока стилей */

.firm-name { /* начало блока стилей */
 /* font-weight: bold;*/
   font-style: italic; /* шрифт */
  font-size: 14px; /* шрифт */
  color: #222; /* цвет */
  white-space: nowrap; /* свойство */
} /* конец блока стилей */

/* Меню */
.main-nav { /* начало блока стилей */
  display: flex; /* режим отображения */
  gap: 30px; /* расстояние между элементами */
  flex: 1; /* гибкий контейнер */
  justify-content: center; /* свойство */
} /* конец блока стилей */

.main-nav a { /* начало блока стилей */
  font-size: 16px; /* шрифт */
  font-weight: 500; /* шрифт */
  color: #333; /* цвет */
  text-decoration: none; /* свойство */
} /* конец блока стилей */

.main-nav a:hover { /* начало блока стилей */
  color: #007bff; /* цвет */
} /* конец блока стилей */


/* Селектор языка */
.lang-selector select { /* начало блока стилей */
  font-size: 14px; /* шрифт */
  padding: 6px 10px; /* внутренний отступ */
  border: none; /* граница */
  background: transparent; /* фон */
  appearance: none; /* свойство */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20,50 70,100 120,50' fill='none' stroke='%23000' stroke-width='14'/%3E%3C/svg%3E"); /* фон */
  background-repeat: no-repeat; /* фон */
  background-position: right 8px center; /* фон */
  background-size: 12px; /* фон */
  padding-right: 24px; /* внутренний отступ */
  cursor: pointer; /* свойство */
} /* конец блока стилей */

.lang-selector form { /* начало блока стилей */
  display: flex; /* режим отображения */
  align-items: center; /* свойство */
} /* конец блока стилей */

/* === Адаптация под мобильные устройства === */
@media (max-width: 768px) { /* начало блока стилей */
  .header-container { /* начало блока стилей */
    flex-direction: column; /* гибкий контейнер */
    align-items: center; /* свойство */
    gap: 10px; /* расстояние между элементами */
  } /* конец блока стилей */

  .main-nav { /* начало блока стилей */
    flex-wrap: wrap; /* гибкий контейнер */
    justify-content: center; /* свойство */
    gap: 15px; /* расстояние между элементами */
  } /* конец блока стилей */

  .lang-selector { /* начало блока стилей */
    align-self: flex-end; /* свойство */
  } /* конец блока стилей */
} /* конец блока стилей */

/* === БЛОК О КОМПАНИИ === */
.about { /* начало блока стилей */
  background-color: #f9f9f9; /* цвет */
  padding: 80px 20px; /* внутренний отступ */
  
  text-align: center;   /* Центрирует заголовок и по умолчанию всё содержимое */ /* выравнивание текста */
} /* конец блока стилей */

.about h2 { /* начало блока стилей */
  font-size: 28px;   /* Размер заголовка */ /* шрифт */
  
  margin-bottom: 40px;  /* Отступ снизу от заголовка до контента */ /* внешний отступ */
} /* конец блока стилей */

.about-wrapper { /* начало блока стилей */
  display: flex;   /* Flex-контейнер, размещает блоки по горизонтали */ /* режим отображения */
  
  justify-content: center;  /* Центрирует содержимое по горизонтали */ /* свойство */
  
  align-items: flex-start;   /* Выравнивает верхнюю границу блоков по одной линии */ /* свойство */
  
  gap: 40px;   /* Расстояние между текстом и изображением */ /* расстояние между элементами */
  
  max-width: 1100px;   /* Максимальная ширина блока */ /* ширина */
  
  margin: 0 auto;  /* Центрирование блока по горизонтали */ /* внешний отступ */
  
  flex-wrap: wrap;   /* Позволяет переносить блоки на новую строку при узком экране */ /* гибкий контейнер */
  
  text-align: left;   /* Переопределяет выравнивание текста внутри flex-блоков */ /* выравнивание текста */
} /* конец блока стилей */

.about-text { /* начало блока стилей */
  flex: 1 1 700px;   /* Растягиваемый блок, базовая ширина 500px. Можно уменьшить при адаптации */ /* гибкий контейнер */
  
  font-size: 18px;  /* Размер шрифта текста */ /* шрифт */
  
  line-height: 1.6;  /* Межстрочный интервал для лучшей читаемости */ /* высота */
  
  color: #333;   /* Тёмно-серый цвет текста */ /* цвет */
  
  text-align: justify;   /* Выровнять текст по ширине, как ты и просил */ /* выравнивание текста */
} /* конец блока стилей */

.about-image { /* начало блока стилей */
  flex: 1 1 300px;   /* Базовая ширина блока с изображением — 300px, также может растягиваться */ /* гибкий контейнер */
  
  text-align: center;   /* Центрирует изображение внутри блока */ /* выравнивание текста */
} /* конец блока стилей */

.about-image img { /* начало блока стилей */
  max-width: 100%;   /* Изображение не выходит за пределы блока */ /* ширина */
  
  height: auto;   /* Автоматическое соотношение сторон */ /* высота */
  
  border-radius: 8px;   /* Слегка скруглённые углы для эстетики */ /* граница */
} /* конец блока стилей */



/* === HERO секция === */
.hero { /* начало блока стилей */
  margin-top: 80px; /* если шапка фиксирована */ /* внешний отступ */
  background-color: #f9f9f9; /* цвет */
  padding: 0; /* внутренний отступ */
    position: relative;
  z-index: 1; /* ниже чем у #catalog */
} /* конец блока стилей */

/* Контейнер слайдера и текста */
.hero-slider-wrapper { /* начало блока стилей */
  position: relative; /* свойство */
  width: 100%; /* ширина */
  height: 360px; /* уменьшено */ /* высота */
/* ===   border: 2px dashed red; /* для визуального контроля границ */
  border-radius: 10px; /* граница */
  overflow: visible; /* свойство */
  box-sizing: border-box; /* свойство */
} /* конец блока стилей */

/* Сам слайдер */
.hero-slider { /* начало блока стилей */
  width: 100%; /* ширина */
  height: 100%; /* высота */
  position: relative; /* свойство */
  overflow: hidden; /* свойство */
  border-radius: 10px; /* граница */
} /* конец блока стилей */

/* Контейнер слайдов */
.hero-slider .swiper-wrapper { /* начало блока стилей */
  display: flex; /* режим отображения */
} /* конец блока стилей */

/* Один слайд */
.hero-slider .swiper-slide { /* начало блока стилей */
  flex-shrink: 0; /* гибкий контейнер */
  width: 100%; /* ширина */
  text-align: center; /* выравнивание текста */
} /* конец блока стилей */

/* Картинка */
.hero-slider .swiper-slide img { /* начало блока стилей */
  width: 100%; /* ширина */
  height: 100%; /* высота */
  object-fit: cover; /* свойство */
  display: block; /* режим отображения */
  border-radius: 10px; /* граница */
} /* конец блока стилей */

/* Текст поверх */
.hero-overlay-text { /* начало блока стилей */
  position: absolute; /* свойство */
  bottom: -30px; /* отступ от нижнего края */ /* свойство */
  left: 50%; /* свойство */
  transform: translateX(-50%); /* только по горизонтали */ /* свойство */
  color: #fff; /* цвет */
  text-align: center; /* выравнивание текста */
  z-index: 12; /* свойство */
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); /* свойство */
  padding: 0 20px; /* внутренний отступ */
  width: 100%; /* ширина */
  box-sizing: border-box; /* свойство */
} /* конец блока стилей */

/* Заголовок */
.hero-overlay-text h1 { /* начало блока стилей */
  font-size: 20px; /* шрифт */
  margin-bottom: 10px; /* внешний отступ */
  line-height: 1.2; /* высота */
  text-align: center; /* выравнивание текста */
  word-break: break-word; /* свойство */
} /* конец блока стилей */

/* Подзаголовок */
.hero-overlay-text p { /* начало блока стилей */
  font-size: 16px; /* шрифт */
  margin-bottom: 20px; /* внешний отступ */
} /* конец блока стилей */

/* Кнопка */
.hero-overlay-text .btn { /* начало блока стилей */
  background: #007aff; /* фон */
  color: #fff; /* цвет */
  padding: 10px 20px; /* внутренний отступ */
  border-radius: 8px; /* граница */
  display: inline-block; /* режим отображения */
  font-weight: bold; /* шрифт */
  transition: background 0.3s; /* свойство */
} /* конец блока стилей */

.hero-overlay-text .btn:hover { /* начало блока стилей */
  background: #005fcc; /* фон */
} /* конец блока стилей */

/* Кнопки навигации */
.swiper-button-next,
.swiper-button-prev { /* начало блока стилей */
  color: #000; /* цвет */
  top: 50%; /* свойство */
  transform: translateY(-50%); /* свойство */
  z-index: 11; /* свойство */
} /* конец блока стилей */

/* Точки-пагинация */
.swiper-pagination { /* начало блока стилей */
  bottom: 10px; /* свойство */
  z-index: 11; /* свойство */
} /* конец блока стилей */

.swiper-pagination-bullet { /* начало блока стилей */
  background: #000; /* фон */
  opacity: 0.4; /* свойство */
} /* конец блока стилей */

.swiper-pagination-bullet-active { /* начало блока стилей */
  background: #007aff; /* фон */
  opacity: 1; /* свойство */
} /* конец блока стилей */

/* === Адаптивные размеры === */
@media (min-width: 768px) { /* начало блока стилей */
  .hero-overlay-text h1 { /* начало блока стилей */
    font-size: 28px; /* шрифт */
  } /* конец блока стилей */
  .hero-overlay-text p { /* начало блока стилей */
    font-size: 18px; /* шрифт */
  } /* конец блока стилей */
  .hero-overlay-text .btn { /* начало блока стилей */
    font-size: 16px; /* шрифт */
    padding: 12px 24px; /* внутренний отступ */
  } /* конец блока стилей */
} /* конец блока стилей */

@media (min-width: 1200px) { /* начало блока стилей */
  .hero-slider-wrapper { /* начало блока стилей */
    height: 400px; /* на десктопе — чуть выше */ /* высота */
  } /* конец блока стилей */
  .hero-overlay-text h1 { /* начало блока стилей */
    font-size: 36px; /* шрифт */
  } /* конец блока стилей */
  .hero-overlay-text p { /* начало блока стилей */
    font-size: 20px; /* шрифт */
  } /* конец блока стилей */
  .hero-overlay-text .btn { /* начало блока стилей */
    font-size: 18px; /* шрифт */
    padding: 14px 28px; /* внутренний отступ */
  } /* конец блока стилей */
} /* конец блока стилей */
.hero-slider,
.hero-slider .swiper-wrapper,
.hero-slider .swiper-slide,
.hero-slider .swiper-slide img { /* начало блока стилей */
  height: 100%; /* высота */
} /* конец блока стилей */