/* Базовые стили и сброс */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

/* Основные стили страницы */
body {
    color: #333;
    line-height: 1.6;
    background-color: #f9f9f9;
}

/* Стили шапки */
header {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: all 0.3s ease;
}

/* Контейнер шапки */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    max-width: 1400px;
    margin: 0 auto;
}

/* Стили логотипа */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 12px;
    transition: transform 0.3s ease;
}

/* Иконка логотипа */
.logo-icon {
    width: 36px;
    height: 36px;
    color: #2ecc71; /* Основной зеленый цвет */
    transition: all 0.3s ease;
}

/* Текст логотипа */
.logo-text {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

/* Акцентная часть текста логотипа */
.logo-text span {
    color: #2ecc71;
}

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

.logo:hover .logo-icon {
    transform: rotate(15deg) scale(1.1);
    color: #27ae60; /* Темно-зеленый при наведении */
}

/* Навигационное меню */
nav ul {
    display: flex;
    list-style: none;
    gap: 25px;
}

nav ul li a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s;
    position: relative;
}

/* Подчеркивание ссылок при наведении */
nav ul li a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #2ecc71;
    transition: width 0.3s;
}

nav ul li a:hover {
    color: #2ecc71;
}

nav ul li a:hover::after {
    width: 100%;
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        padding: 15px;
    }
    
    .logo {
        margin-bottom: 15px;
    }
    
    .logo-icon {
        width: 30px;
        height: 30px;
    }
    
    .logo-text {
        font-size: 20px;
    }
    
    nav ul {
        gap: 15px;
    }
}



/* 
  Основной файл стилей для сайта проката велосипедов.
  Содержит все стили для элементов страницы.
  Организован по секциям в том же порядке, как они идут в HTML.
*/

/* 
  Сброс стандартных стилей браузера и базовые настройки 
  Эти стили применяются ко всем элементам на странице
*/
* {
  margin: 0; /* Убираем внешние отступы */
  padding: 0; /* Убираем внутренние отступы */
  box-sizing: border-box; /* Альтернативная модель расчета размеров */
  font-family: 'Arial', sans-serif; /* Шрифт по умолчанию */
}

/* 
  Стили для основного содержимого страницы 
  Задают базовые параметры для всего документа
*/
body {
  color: #333; /* Основной цвет текста - темно-серый */
  line-height: 1.6; /* Межстрочный интервал для лучшей читаемости */
  background-color: #f9f9f9; /* Светло-серый фон страницы */
}

/* 
  Стили шапки сайта 
  Фиксированная шапка, которая остается при прокрутке
*/
header {
  background-color: #fff; /* Белый фон */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Тень для эффекта "плавающей" шапки */
  position: fixed; /* Фиксированное позиционирование */
  width: 100%; /* На всю ширину экрана */
  top: 0; /* Прижимаем к верхнему краю */
  z-index: 1000; /* Высокий z-index чтобы шапка была поверх других элементов */
}

/* 
  Контейнер для содержимого шапки 
  Центрирует содержимое и задает максимальную ширину
*/
.header-container {
  display: flex; /* Flexbox для выравнивания элементов */
  justify-content: space-between; /* Распределение пространства между элементами */
  align-items: center; /* Выравнивание по вертикали по центру */
  padding: 15px 5%; /* Внутренние отступы */
  max-width: 1400px; /* Максимальная ширина контейнера */
  margin: 0 auto; /* Центрирование по горизонтали */
}

/* 
  Стили логотипа 
  Создает фирменный стиль для логотипа компании
*/
.logo {
  font-size: 24px; /* Размер шрифта */
  font-weight: bold; /* Полужирное начертание */
  color: #2ecc71; /* Зеленый цвет (фирменный) */
  text-decoration: none; /* Убираем подчеркивание */
}

/* 
  Вторая часть логотипа (для визуального акцента) 
  Использует другой цвет для части текста логотипа
*/
.logo span {
  color: #333; /* Темно-серый цвет */
}

/* 
  Навигационное меню 
  Стили для главного меню сайта
*/
nav ul {
  display: flex; /* Flexbox для горизонтального меню */
  list-style: none; /* Убираем маркеры списка */
}

/* 
  Пункты меню 
  Стили для отдельных элементов меню
*/
nav ul li {
  margin-left: 30px; /* Отступ между пунктами меню */
}

/* 
  Ссылки в меню 
  Стили для текста ссылок в навигации
*/
nav ul li a {
  text-decoration: none; /* Убираем подчеркивание */
  color: #333; /* Цвет текста */
  font-weight: 500; /* Средняя насыщенность шрифта */
  transition: color 0.3s; /* Плавное изменение цвета */
}

/* 
  Эффект при наведении на ссылки меню 
  Изменение цвета при наведении курсора
*/
nav ul li a:hover {
  color: #2ecc71; /* Меняем цвет на фирменный зеленый */
}

/* 
  Секция "Герой" (первый экран) 
  Большой баннер с фоновым изображением и основным заголовком
*/
.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
              url('img/1.jpg');
  /* Затемненное фоновое изображение */
  background-size: cover; /* Растягиваем изображение на всю область */
  background-position: center; /* Центрируем изображение */
  height: 100vh; /* Высота на весь экран */
  display: flex; /* Flexbox для центрирования контента */
  align-items: center; /* Вертикальное центрирование */
  text-align: center; /* Горизонтальное центрирование текста */
  color: white; /* Белый текст для контраста */
  padding-top: 80px; /* Отступ сверху чтобы контент не скрывался под шапкой */
}

/* 
  Контейнер для контента в секции "Герой" 
  Ограничивает ширину текста для лучшей читаемости
*/
.hero-content {
  max-width: 800px; /* Ограничение ширины для лучшей читаемости */
  margin: 0 auto; /* Центрирование по горизонтали */
  padding: 0 20px; /* Отступы по бокам на мобильных */
}

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

/* 
  Текст под заголовком 
  Описание под главным заголовком
*/
.hero p {
  font-size: 20px; /* Увеличенный размер шрифта */
  margin-bottom: 30px; /* Отступ перед кнопкой */
}

/* 
  Стили кнопки 
  Основной стиль для всех кнопок на сайте
*/
.btn {
      display: inline-block; /* Чтобы можно было задавать padding */
      background-color: #2ecc71; /* Фирменный зеленый цвет */
      color: white; /* Белый текст */
      padding: 12px 30px; /* Внутренние отступы */
      border-radius: 30px; /* Скругленные углы */
      text-decoration: none; /* Убираем подчеркивание */
      font-weight: bold; /* Полужирный текст */
      transition: background-color 0.3s; /* Плавное изменение фона */
    }
/* 
  Секция "О нас" 
  Стили для блока с информацией о компании
*/
.about {
  padding: 80px 5%; /* Отступы сверху/снизу и по бокам */
  background-color: white; /* Белый фон */
}

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

/* 
  Основной заголовок секции 
  Стили для h2 в заголовках секций
*/
.section-title h2 {
  font-size: 36px; /* Крупный шрифт */
  color: #333; /* Темно-серый цвет */
  margin-bottom: 15px; /* Отступ перед подзаголовком */
}

/* 
  Подзаголовок секции 
  Стили для описания под заголовком секции
*/
.section-title p {
  color: #777; /* Серый цвет для менее важного текста */
  max-width: 700px; /* Ограничение ширины */
  margin: 0 auto; /* Центрирование */
}

/* 
  Контейнер для контента секции "О нас" 
  Располагает текст и изображение рядом
*/
.about-content {
  display: flex; /* Flexbox для двухколоночной раскладки */
  align-items: center; /* Выравнивание по вертикали */
  max-width: 1200px; /* Ограничение максимальной ширины */
  margin: 0 auto; /* Центрирование */
}

/* 
  Текстовая часть секции "О нас" 
  Стили для блока с текстом
*/
.about-text {
  flex: 1; /* Занимает доступное пространство */
  padding-right: 40px; /* Отступ справа от изображения */
}

/* 
  Подзаголовок в текстовой части 
  Стили для h3 в текстовом блоке
*/
.about-text h3 {
  font-size: 24px; /* Размер шрифта */
  margin-bottom: 20px; /* Отступ снизу */
  color: #2ecc71; /* Фирменный зеленый цвет */
}

/* 
  Контейнер для изображения 
  Стили для блока с изображением
*/
.about-image {
  flex: 1; /* Занимает столько же места, сколько текст */
}

/* 
  Изображение в секции "О нас" 
  Стили для самого изображения
*/
.about-image img {
  width: 100%; /* На всю ширину контейнера */
  border-radius: 10px; /* Скругленные углы */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Легкая тень */
}

/* 
  Секция с велосипедами 
  Стили для блока с каталогом велосипедов
*/
.bikes {
  padding: 80px 5%; /* Отступы */
  background-color: #f9f9f9; /* Светло-серый фон */
}

/* 
  Сетка для карточек велосипедов 
  Использует CSS Grid для адаптивного расположения
*/
.bikes-grid {
  display: grid; /* CSS Grid раскладка */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Автоматические колонки */
  gap: 30px; /* Расстояние между карточками */
  max-width: 1200px; /* Ограничение ширины */
  margin: 0 auto; /* Центрирование */
}

/* 
  Карточка велосипеда 
  Стили для каждой карточки в каталоге
*/
.bike-card {
  background-color: white; /* Белый фон */
  border-radius: 10px; /* Скругленные углы */
  overflow: hidden; /* Обрезаем содержимое за границами */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Тень */
  transition: transform 0.3s; /* Плавная анимация */
}

/* 
  Эффект при наведении на карточку 
  Анимация при наведении курсора
*/
.bike-card:hover {
  transform: translateY(-10px); /* Сдвигаем вверх */
}

/* 
  Стили для галереи велосипедов 
  Контейнер для основного изображения и миниатюр
*/
.bike-gallery {
  position: relative; /* Для позиционирования элементов внутри */
  height: 250px; /* Фиксированная высота */
}

/* 
  Основное изображение в галерее 
  Стили для блока с главным изображением
*/
.gallery-main {
  height: 100%; /* На всю высоту контейнера */
  overflow: hidden; /* Обрезаем изображение если оно больше */
}

/* 
  Изображение в галерее 
  Стили для самого изображения
*/
.gallery-main img {
  width: 100%; /* На всю ширину */
  height: 100%; /* На всю высоту */
  object-fit: cover; /* Заполняем контейнер с сохранением пропорций */
  transition: opacity 0.3s ease; /* Плавное изменение прозрачности */
}

/* 
  Контейнер для миниатюр 
  Стили для блока с миниатюрами
*/
.gallery-thumbs {
  display: flex; /* Flexbox для горизонтального расположения */
  justify-content: center; /* Центрирование по горизонтали */
  padding: 10px; /* Внутренние отступы */
  background: #f5f5f5; /* Светло-серый фон */
}

/* 
  Миниатюры в галерее 
  Стили для миниатюрных изображений
*/
.gallery-thumbs img {
  width: 50px; /* Фиксированная ширина */
  height: 50px; /* Фиксированная высота */
  object-fit: cover; /* Заполняем контейнер */
  margin: 0 5px; /* Отступы между миниатюрами */
  cursor: pointer; /* Курсор-указатель */
  border: 2px solid transparent; /* Прозрачная рамка */
  transition: border-color 0.3s; /* Плавное изменение рамки */
}

/* 
  Эффект при наведении на миниатюру 
  Изменение рамки при наведении
*/
.gallery-thumbs img:hover {
  border-color: #2ecc71; /* Зеленая рамка */
}

/* 
  Информация о велосипеде 
  Стили для блока с описанием велосипеда
*/
.bike-info {
  padding: 20px; /* Внутренние отступы */
}

/* 
  Название велосипеда 
  Стили для заголовка h3 в карточке
*/
.bike-info h3 {
  font-size: 20px; /* Размер шрифта */
  margin-bottom: 10px; /* Отступ снизу */
}

/* 
  Описание велосипеда 
  Стили для текста описания
*/
.bike-info p {
  color: #777; /* Серый цвет текста */
  margin-bottom: 15px; /* Отступ снизу */
}

/* 
  Цена велосипеда 
  Стили для блока с ценой
*/
.bike-price {
  font-size: 18px; /* Размер шрифта */
  font-weight: bold; /* Полужирное начертание */
  color: #2ecc71; /* Фирменный зеленый цвет */
  margin-bottom: 15px; /* Отступ снизу */
}

/* 
  Секция с преимуществами 
  Стили для блока с преимуществами компании
*/
.features {
  padding: 80px 5%; /* Отступы */
  background-color: white; /* Белый фон */
}

/* 
  Сетка для карточек преимуществ 
  Использует CSS Grid для адаптивного расположения
*/
.features-grid {
  display: grid; /* CSS Grid раскладка */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Автоматические колонки */
  gap: 30px; /* Расстояние между карточками */
  max-width: 1200px; /* Ограничение ширины */
  margin: 0 auto; /* Центрирование */
}

/* 
  Карточка преимущества 
  Стили для каждой карточки преимущества
*/
.feature-card {
  text-align: center; /* Центрирование текста */
  padding: 30px 20px; /* Внутренние отступы */
  border-radius: 10px; /* Скругленные углы */
  background-color: #f9f9f9; /* Светло-серый фон */
  transition: transform 0.3s; /* Плавная анимация */
}

/* 
  Эффект при наведении на карточку преимущества 
  Анимация при наведении курсора
*/
.feature-card:hover {
  transform: translateY(-5px); /* Сдвигаем вверх */
}

/* 
  Иконка преимущества 
  Стили для иконок Font Awesome
*/
.feature-icon {
  font-size: 40px; /* Размер иконки */
  color: #2ecc71; /* Фирменный зеленый цвет */
  margin-bottom: 20px; /* Отступ снизу */
}

/* 
  Заголовок преимущества 
  Стили для заголовков h3 в карточках
*/
.feature-card h3 {
  margin-bottom: 15px; /* Отступ снизу */
}

/* 
  Секция с отзывами 
  Стили для блока с отзывами клиентов
*/
.testimonials {
  padding: 80px 5%; /* Отступы */
  background-color: #f9f9f9; /* Светло-серый фон */
}

/* 
  Сетка для отзывов 
  Использует CSS Grid для адаптивного расположения
*/
.testimonials-grid {
  display: grid; /* CSS Grid раскладка */
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); /* Автоматические колонки */
  gap: 30px; /* Расстояние между карточками */
  max-width: 1200px; /* Ограничение ширины */
  margin: 0 auto; /* Центрирование */
}

/* 
  Карточка отзыва 
  Стили для каждого отзыва
*/
.testimonial-card {
  background-color: white; /* Белый фон */
  padding: 30px; /* Внутренние отступы */
  border-radius: 10px; /* Скругленные углы */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Тень */
}

/* 
  Текст отзыва 
  Стили для текста отзыва (курсив)
*/
.testimonial-text {
  font-style: italic; /* Курсивное начертание */
  margin-bottom: 20px; /* Отступ снизу */
}

/* 
  Контейнер для автора отзыва 
  Стили для блока с информацией об авторе
*/
.testimonial-author {
  display: flex; /* Flexbox для выравнивания */
  align-items: center; /* Вертикальное центрирование */
}

/* 
  Аватар автора 
  Стили для круглого аватара
*/
.author-avatar {
  width: 50px; /* Фиксированная ширина */
  height: 50px; /* Фиксированная высота */
  border-radius: 50%; /* Круглая форма */
  overflow: hidden; /* Обрезаем изображение по кругу */
  margin-right: 15px; /* Отступ справа */
}

/* 
  Изображение аватара 
  Стили для изображения аватара
*/
.author-avatar img {
  width: 100%; /* На всю ширину */
  height: 100%; /* На всю высоту */
  object-fit: cover; /* Заполняем контейнер */
}

/* 
  Имя автора 
  Стили для имени в отзыве
*/
.author-info h4 {
  margin-bottom: 5px; /* Небольшой отступ снизу */
}

/* 
  Дополнительная информация об авторе 
  Стили для подписи под именем
*/
.author-info p {
  color: #777; /* Серый цвет */
  font-size: 14px; /* Уменьшенный размер шрифта */
}

/* 
  Секция контактов 
  Стили для блока с контактной информацией и формой
*/
.contact {
  padding: 80px 5%; /* Отступы */
  background-color: white; /* Белый фон */
}

/* 
  Контейнер для контента секции контактов 
  Располагает контакты и форму рядом
*/
.contact-container {
  display: flex; /* Flexbox для двухколоночной раскладки */
  max-width: 1200px; /* Ограничение ширины */
  margin: 0 auto; /* Центрирование */
}

/* 
  Блок с контактной информацией 
  Стили для левой части секции
*/
.contact-info {
  flex: 1; /* Занимает доступное пространство */
  padding-right: 40px; /* Отступ справа от формы */
}

/* 
  Заголовок блока контактов 
  Стили для h3 в контактной информации
*/
.contact-info h3 {
  font-size: 24px; /* Размер шрифта */
  margin-bottom: 20px; /* Отступ снизу */
  color: #2ecc71; /* Фирменный зеленый цвет */
}

/* 
  Текст в блоке контактов 
  Стили для описания в контактной информации
*/
.contact-info p {
  margin-bottom: 30px; /* Отступ снизу */
}

/* 
  Блок с деталями контактов 
  Стили для списка контактов
*/
.contact-details {
  margin-bottom: 30px; /* Отступ снизу */
}

/* 
  Каждая строка контактов 
  Стили для отдельной строки с контактом
*/
.contact-details div {
  display: flex; /* Flexbox для выравнивания иконки и текста */
  align-items: center; /* Вертикальное центрирование */
  margin-bottom: 15px; /* Отступ между строками */
}

/* 
  Иконки контактов 
  Стили для иконок Font Awesome
*/
.contact-details i {
  margin-right: 10px; /* Отступ справа от текста */
  color: #2ecc71; /* Фирменный зеленый цвет */
}

/* 
  Блок с формой 
  Стили для правой части секции с формой
*/
.contact-form {
  flex: 1; /* Занимает столько же места, сколько контактная информация */
}

/* 
  Группа полей формы 
  Стили для каждого блока с полем формы
*/
.form-group {
  margin-bottom: 20px; /* Отступ между группами */
}

/* 
  Лейблы полей формы 
  Стили для подписей к полям формы
*/
.form-group label {
  display: block; /* Каждый лейбл на новой строке */
  margin-bottom: 5px; /* Небольшой отступ снизу */
  font-weight: 500; /* Средняя насыщенность шрифта */
}

/* 
  Поля ввода и textarea 
  Общие стили для input и textarea
*/
.form-group input,
.form-group textarea {
  width: 100%; /* На всю ширину */
  padding: 12px; /* Внутренние отступы */
  border: 1px solid #ddd; /* Серая граница */
  border-radius: 5px; /* Слегка скругленные углы */
  font-size: 16px; /* Размер шрифта */
}

/* 
  Специфичные стили для textarea 
  Дополнительные стили для многострочного поля
*/
.form-group textarea {
  height: 150px; /* Начальная высота */
  resize: vertical; /* Разрешаем изменять размер только по вертикали */
}

/* 
  Подвал сайта 
  Стили для футера (нижней части сайта)
*/
footer {
  background-color: #333; /* Темный фон */
  color: white; /* Белый текст */
  padding: 50px 5% 20px; /* Отступы: сверху 50px, по бокам 5%, снизу 20px */
}

/* 
  Контейнер для содержимого подвала 
  Сетка для колонок в футере
*/
.footer-container {
  display: grid; /* CSS Grid раскладка */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Автоматические колонки */
  gap: 30px; /* Расстояние между колонками */
  max-width: 1200px; /* Ограничение ширины */
  margin: 0 auto; /* Центрирование */
}

/* 
  Заголовки колонок подвала 
  Стили для h3 в колонках футера
*/
.footer-column h3 {
  font-size: 18px; /* Размер шрифта */
  margin-bottom: 20px; /* Отступ снизу */
  color: #2ecc71; /* Фирменный зеленый цвет */
}

/* 
  Списки в подвале 
  Стили для списков ссылок в футере
*/
.footer-column ul {
  list-style: none; /* Убираем маркеры списка */
}

/* 
  Элементы списка в подвале 
  Стили для пунктов меню в футере
*/
.footer-column ul li {
  margin-bottom: 10px; /* Отступ между элементами */
}

/* 
  Ссылки в подвале 
  Стили для ссылок в футере
*/
.footer-column ul li a {
  color: #ddd; /* Светло-серый цвет */
  text-decoration: none; /* Убираем подчеркивание */
  transition: color 0.3s; /* Плавное изменение цвета */
}

/* 
  Эффект при наведении на ссылки в подвале 
  Изменение цвета ссылок при наведении
*/
.footer-column ul li a:hover {
  color: #2ecc71; /* Фирменный зеленый цвет */
}

/* 
  Социальные ссылки 
  Стили для блока с иконками соцсетей
*/
.social-links {
  display: flex; /* Flexbox для горизонтального расположения */
  margin-top: 20px; /* Отступ сверху */
}

/* 
  Каждая социальная ссылка 
  Стили для отдельной иконки соцсети
*/
.social-links a {
  display: flex; /* Flexbox для центрирования иконки */
  align-items: center; /* Вертикальное центрирование */
  justify-content: center; /* Горизонтальное центрирование */
  width: 40px; /* Фиксированная ширина */
  height: 40px; /* Фиксированная высота */
  background-color: rgba(255, 255, 255, 0.1); /* Полупрозрачный фон */
  border-radius: 50%; /* Круглая форма */
  margin-right: 10px; /* Отступ между иконками */
  color: white; /* Белый цвет иконки */
  text-decoration: none; /* Убираем подчеркивание */
  transition: background-color 0.3s; /* Плавное изменение фона */
}

/* 
  Эффект при наведении на социальные ссылки 
  Изменение фона иконок при наведении
*/
.social-links a:hover {
  background-color: #2ecc71; /* Фирменный зеленый цвет */
}

/* 
  Блок с копирайтом 
  Стили для нижней строки с копирайтом
*/
.copyright {
  text-align: center; /* Центрирование текста */
  padding-top: 30px; /* Отступ сверху */
  margin-top: 30px; /* Отступ от предыдущего контента */
  border-top: 1px solid rgba(255, 255, 255, 0.1); /* Тонкая разделительная линия */
  color: #aaa; /* Серый цвет текста */
  font-size: 14px; /* Уменьшенный размер шрифта */
}

/* 
  Адаптивные стили для мобильных устройств 
  Медиазапросы для экранов менее 768px
*/
@media (max-width: 768px) {
  /*
    Медиазапрос срабатывает при ширине экрана до 768px
    Все стили внутри применяются только на мобильных устройствах
  */
  
  /* Шапка на мобильных */
  .header-container {
    flex-direction: column; /* Элементы в колонку */
    padding: 15px; /* Уменьшенные отступы */
  }
  
  /* Меню навигации */
  nav ul {
    margin-top: 15px; /* Отступ сверху от логотипа */
  }
  
  /* Пункты меню */
  nav ul li {
    margin-left: 15px; /* Уменьшенные отступы */
    margin-right: 15px;
  }
  
  /* Заголовок героя */
  .hero h1 {
    font-size: 36px; /* Уменьшенный размер шрифта */
  }
  
  /* Текст под заголовком */
  .hero p {
    font-size: 18px; /* Уменьшенный размер шрифта */
  }
  
  /* Секция "О нас" */
  .about-content {
    flex-direction: column; /* Элементы в колонку */
  }
  
  /* Текстовая часть */
  .about-text {
    padding-right: 0; /* Убираем отступ справа */
    margin-bottom: 30px; /* Отступ снизу перед изображением */
  }
  
  /* Секция контактов */
  .contact-container {
    flex-direction: column; /* Элементы в колонку */
  }
  
  /* Блок с контактами */
  .contact-info {
    padding-right: 0; /* Убираем отступ справа */
    margin-bottom: 30px; /* Отступ снизу перед формой */
  }
  
  /* Сетка велосипедов */
  .bikes-grid {
    grid-template-columns: 1fr; /* Одна колонка */
  }
  
  /* Галерея велосипедов */
  .bike-gallery {
    height: 200px; /* Уменьшенная высота */
  }
}