/* Сброс и базовые стили */
* {
    box-sizing: border-box;
  }
  
  body {
    font-family: Arial, sans-serif;
    margin:0;
    padding:0;
    line-height:1.5;
  }
  
  .container {
    max-width:1200px;
    margin:0 auto;
    padding:0 15px;
  }
  
  /* Хедер */
  .header {
    background-image: linear-gradient(to right, #041c33, #0a7eeb);
  }
  
 .header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
}

.logo {
    text-align: left; /* Выравнивание текста влево */
    color: #fff; /* Цвет текста */
    font-weight: bold; /* Жирный шрифт */
    font-size: 2rem; /* Размер шрифта */
}

.nav {
    display: flex; /* По умолчанию показываем навигацию */
    gap: 20px;
    font-size: 1.5rem;
}

/* Стили для ссылок навигации */
.nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
}

.nav a:hover,
.nav a:focus {
    text-decoration: underline;
}

/* Кнопка меню (для мобилки) */
.nav-toggle {
    display: none; /* По умолчанию скрыта */
    background: none;
    border: none;
    color: #fff;
    font-size: 1.8rem;
    cursor: pointer;
}

/* Медиа-запросы для мобильных устройств */
@media (max-width: 430px) {
    .header-container {
        flex-direction: row; /* Горизонтальное выравнивание элементов */
        align-items: center; /* Выравнивание по центру по вертикали */
        justify-content: space-between; /* Распределение пространства между элементами */
        padding: 10px; /* Добавление отступов для лучшего восприятия */
    }

    .logo {
        margin-left: 0; /* Убираем отрицательный отступ */
        font-size: 1.5rem; /* Уменьшаем размер шрифта для мобильной версии */
    }

    .nav {
        display: none; /* Скрываем навигацию по умолчанию на мобильных устройствах */
        flex-direction: column; /* Вертикальное расположение элементов навигации */
        position: absolute; /* Абсолютное позиционирование для выпадающего меню */
        top: 60px; /* Расположение под заголовком (можно настроить) */
        left: 0;
        width: 100%; /* Занимаем всю ширину экрана */
        background-color: rgba(4,28,51,0.9); /* Полупрозрачный фон для навигации */
        z-index: 1000; /* Убедитесь, что меню поверх других элементов */
    }

    .nav.show {
        display: flex; /* Показываем навигацию при активации класса show */
    }

    .nav a {
        padding: 15px; /* Добавление отступов для ссылок в навигации */
        color: #ffffff; /* Цвет текста ссылок */
        text-align: center; /* Центрирование текста ссылок */
        border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Разделитель между пунктами меню */
    }

    .nav a:hover {
        background-color: rgba(255, 255, 255, 0.1); /* Эффект при наведении на ссылки */
    }

    .nav-toggle {
        display: block; /* Показываем кнопку меню на мобильных устройствах */
        cursor: pointer; /* Указатель при наведении на кнопку меню */
    }

    .nav-toggle i { 
       font-size: 24px; /* Размер иконки кнопки меню */ 
       color: #ffffff; /* Цвет иконки кнопки меню */ 
   }
}
  
  /* Герой-секция */
  .hero {
    position: relative;
    color: #ffffff;
    padding: 250px 150px; /* Отступы для больших экранов */
    text-align: center;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('https://sun9-5.userapi.com/impg/4EaCs8uF2OujjYtd84bCNpkhuGBGo6ePYS-tUg/Igkf8GdYRpY.jpg?size=960x1280&quality=95&sign=56da89facfb7c824558e02e57453b1c0&type=album') no-repeat center/cover;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.overlay-text {
   position: relative;
   z-index: 3;
}
  
.overlay-text h1 {
   font-size: 5rem; /* Размер заголовка для больших экранов */
   margin-bottom: 10px;
}
  
.overlay-text p {
   font-size: 1.25rem; /* Размер текста для больших экранов */
   margin-bottom: 20px;
   max-width: 600px; /* Максимальная ширина текста */
   margin-left: auto; 
   margin-right: auto; 
}

.btn {
   background-color: rgba(10, 99, 189, 0.904);
   color:#ffffff; 
   padding :12px 25px ; 
   border :none ; 
   cursor:pointer ; 
   font-size :1rem ; /* Исправлено на rem */
   border-radius :6px ; 
   text-decoration :none ; 
   display:inline-block ; 
   transition :background-color .3s ease , transform .3s ease ; /* Добавлен эффект трансформации */
   margin :5px ; /* Отступ между кнопками */
}
  
.btn:hover,
.btn :focus {
   background-color :#1736e4 ; 
   outline:none ; 
   transform :scale(1.05) ; /* Увеличение размера при наведении */
}

.btn i {
  margin-right: 8px; /* Отступ между иконкой и текстом */
  font-size: 1.2rem; /* Размер иконки (можно настроить) */
  color: inherit; /* Установить цвет иконки равным цвету текста кнопки */
}

.btn:hover i,
.btn:focus i {
  color: #1f22f3; /* Цвет иконки при наведении или фокусе (можно настроить) */
}

/* Вторичные кнопки */
.btn-secondary {
   background-color:#eee; 
   color:#333; 
   border-radius:6px; 
   padding:10px; 
   cursor:pointer; 
   border:none; 
   transition:background-color .3s ease,color .3s ease; 
   font-size: 1.5rem;
}
  
.btn-secondary:hover,
.btn-secondary:focus {
   background-color:#095dac; 
   outline:none; 
}

/* Медиа-запросы для мобильных устройств */
@media (max-width: 430px) {
    .hero {
        padding: 100px 20px; /* Уменьшаем отступы для мобильных устройств */
        text-align: center; /* Центрируем текст на мобильных устройствах */
    }

    .overlay-text h1 {
        font-size: 1rem !important; /* Уменьшаем размер заголовка для мобильных устройств с использованием !important */
        margin-bottom: 10px;
    }

    .overlay-text p {
        font-size: 1rem; /* Уменьшаем размер текста для мобильных устройств */
        margin-bottom: 15px;
        max-width: none; /* Убираем максимальную ширину текста на мобильных устройствах */
        padding-left: 10px; /* Добавляем отступы по бокам для лучшего восприятия текста */
        padding-right: 10px;
    }

    .btn {
        padding :10px 15px ; /* Уменьшаем отступы кнопок на мобильных устройствах */
        font-size :0.9rem ; /* Уменьшаем размер шрифта кнопок на мобильных устройствах */
        margin :5px auto; /* Центрируем кнопки с отступом сверху и снизу */
        display:block; /* Делаем кнопки блочными элементами для лучшего отображения на маленьких экранах */
        width:auto; /* Автоматическая ширина кнопок на мобильных устройствах */  
    }

    .btn-secondary {
       font-size :1rem ; /* Уменьшаем размер шрифта вторичных кнопок на мобильных устройствах */  
       padding :8px ; /* Уменьшаем отступы вторичных кнопок на мобильных устройствах */  
       width:auto; /* Автоматическая ширина вторичных кнопок на мобильных устройствах */  
       margin:auto; /* Центрируем вторичные кнопки */  
     }
}
  
  /* Секции */
  section {
   margin-bottom:60px;
  }
  
  /* О нас */
  .about {
    padding: 50px 20px; /* Отступы сверху и снизу */
    background-image: linear-gradient( to right,#041c33, #0a7eeb); /* Светлый фон */
    color: #ffffff; /* Темный текст */
    border-radius: 40px; /* Закругленные углы */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Тень для глубины */
    margin-bottom: 30px;
}

.about h2 {
  position: relative; /* Для позиционирования псевдоэлемента */
  font-size: 3rem; /* Размер шрифта заголовка (можно настроить) */
  margin-bottom: 10px; /* Отступ снизу для заголовка */
}

.about h2::after {
  content: ""; /* Создание пустого контента */
  display: block; /* Отображение как блочный элемент */
  width: 20%; /* Длина полосы (можно настроить) */
  height: 4px; /* Высота полосы */
  background-color: #405bf1; /* Цвет полосы (можно настроить) */
  position: absolute; /* Абсолютное позиционирование */
  left: 0; /* Сдвиг влево */
  bottom: -5px; /* Расположение под заголовком (можно настроить) */
}

.about h3 {
    font-size: 2rem; /* Размер подзаголовка */
    margin-top: 20px; /* Отступ сверху */
}

.about p {
    font-size: 1.3rem;
    line-height: 1.6; /* Межстрочный интервал для удобочитаемости */
}

.about ul {
    list-style-type: disc; /* Стиль маркеров списка */
    margin-left: 20px; /* Отступ слева для списка */
}

.about li {
    font-size: 1.3rem;
    margin-bottom: 10px; /* Отступ между пунктами списка */
}
  
  /* Товары */
  .products {
    background-image: linear-gradient( to right,#041c33, #0a7eeb); /* Полупрозрачный небесный фон (можно настроить) */
    padding: 40px; /* Отступы внутри блока */
    border-radius: 40px; /* Скругление углов (по желанию) */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Тень для блока (по желанию) */
    text-align: center; /* Центрирование текста */
    margin-bottom: 30px;
}

.products h2 {
    color: #fff; /* Цвет заголовка */
    font-size: 3rem; /* Размер шрифта заголовка */
    position: relative; /* Для позиционирования псевдоэлемента */
    margin-bottom: 10px; /* Отступ снизу для заголовка */
    text-align: left; /* Сдвиг текста влево */
}

.products h2::after {
    content: ""; /* Создание пустого контента */
    display: block; /* Отображение как блочный элемент */
    width: 20%; /* Длина полосы (можно настроить) */
    height: 4px; /* Высота полосы */
    background-color: #405bf1; /* Цвет полосы (можно настроить) */
    position: absolute; /* Абсолютное позиционирование */
    left: 0; /* Сдвиг влево */
    bottom: -5px; /* Расположение под заголовком (можно настроить) */
}

.products h3 {
    font-weight: normal;
    color: #ffffff; /* Цвет подзаголовка (такой же, как у заголовка) */
    font-size: 1.3rem; /* Размер шрифта подзаголовка */
    margin-top: 10px; /* Отступ сверху для подзаголовка */
    margin-bottom: 20px; /* Отступ снизу для подзаголовка */
    text-align: left; /* Сдвиг текста влево */
}

.product-list {
 display: flex;
 gap: 30px; /* Промежуток между карточками продуктов */
 flex-wrap: wrap;
 justify-content: center;
}

.product-card {
 background: #ffffff; /* Цвет фона карточки */
 border-radius: 8px;
 box-shadow: 0 2px 8px rgba(0, 0, 0, .1); /* Тень карточки */
 max-width: 500px; /* Максимальная ширина карточки */
 text-align: center;
 display: flex;  
 flex-direction: column;
 padding-bottom: 15px;
 transition: transform .3s ease, box-shadow .3s ease; /* Плавный переход для трансформации и тени */
 cursor: pointer;
}

.product-card:hover,
.product-card:focus-within {
 transform: translateY(-5px); /* Подъем карточки при наведении */
 box-shadow: 0 6px 12px rgba(0, 0, 0, .15); /* Увеличенная тень при наведении */
}

.product-card img {
  width: 100%; /* Ширина изображения на всю карточку */
  height: 200px; /* Фиксированная высота для всех изображений */
  object-fit: cover; /* Обрезка изображения, чтобы оно заполнило контейнер */
  border-radius: 8px; /* Закругление углов изображения */
}

.product-card h3 {
 margin-top :15px ; 
 margin-bottom :10px; 
}

.product-card p {
 flex-grow :1 ; 
 padding :0 15px; /* Отступы по бокам для текста описания */ 
 margin-bottom :10px;
}

.product-card ul {
  color: #3e6af8; /* Цвет текста цены */
  font-weight: bold; /* Жирный шрифт */
  margin-top: -10px; /* Отрицательный отступ сверху для более компактного отображения */
  margin-bottom :10px; /* Отступ снизу */
  font-size :1.7rem; /* Размер шрифта цены */
  text-align: left;
}
  
  /* Контакты */
  .contacts {
    background-image: linear-gradient(to right, #041c33, #0a7eeb); /* Полупрозрачный небесный фон */
    padding: 40px; /* Отступы внутри блока */
    border-radius: 40px; /* Скругление углов */
    box-shadow: 0 4px 10px rgba(190, 190, 190, 0.1); /* Тень для блока */
    margin-bottom: 30px;
    position: relative; /* Относительное позиционирование для псевдоэлемента */
}

.contacts h2 {
    position: relative; /* Относительное позиционирование для заголовка */
    z-index: 1; /* Устанавливаем z-index выше, чтобы текст был над полосой */
    color: #fff; /* Цвет заголовка */
    font-size: 3rem; /* Размер шрифта заголовка */
    margin-bottom: 10px; /* Отступ снизу для заголовка */
    text-align: left; /* Сдвиг текста влево */
}

.contacts h2::after {
    content: ""; /* Создание пустого контента */
    display: block; /* Отображение как блочный элемент */
    width: 100%; /* Длина полосы (можно настроить) */
    height: 4px; /* Высота полосы */
    background-color: #405bf1; /* Цвет полосы (можно настроить) */
    position: absolute; /* Абсолютное позиционирование */
    left: 50%; /* Центрирование полосы по горизонтали */
    transform: translateX(-50%); /* Сдвиг влево на половину ширины полосы для центрирования */
    bottom: -10px; /* Расположение под заголовком (можно настроить) */
}
  
.contact-info {
  display: flex;
  flex-direction: row; /* Изменено на row для горизонтального расположения */
  align-items: flex-start; /* Выровнять элементы по верхнему краю */
}

.contact-details {
  flex: 1; /* Занимает оставшееся пространство */
  margin-right: 20px; /* Отступ справа для разделения с картой */
}

.map-container {
  flex: 0 0 50%; /* Занимает всю ширину на мобильных устройствах */
  max-width: 700px; /* Максимальная ширина для больших экранов */
  padding: 10px;
  border: 10px solid #ccc;
  border-radius: 10px;
  box-sizing: border-box; /* Учитываем отступы и границы в общей ширине */
}

.contact-item {
  margin-bottom: 20px; /* Увеличенный отступ между пунктами для лучшей читаемости */
}

.contact-item h3 {
  font-size: 18px; /* Размер шрифта заголовков (можно настроить) */
  color: #fff; /* Цвет заголовков (можно настроить) */
}

.contact-item span {
 font-size: 16px; /* Размер шрифта подзаголовков (можно настроить) */
 color: #d1d1d1; /* Цвет текста подзаголовков (можно настроить) */ 
}

.contact-item i {
 margin-right: 10px; /* Отступ между иконкой и текстом (если используете иконки) */
 color: #007bff; /* Цвет иконок (можно настроить) */ 
 font-size: 20px; /* Размер иконок (можно настроить) */ 
}


  /* Стили для галереи */
  .gallery {
    background-image: linear-gradient(to right, #041c33, #0a7eeb); /* Полупрозрачный небесный фон */
    padding: 40px; /* Отступы внутри блока */
    font-size: 2rem;
    border-radius: 40px; /* Скругление углов */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Тень для блока */
    margin-bottom: 30px;
    max-width: 1200px; /* Максимальная ширина блока */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Отступы между элементами */
    position: relative; /* Добавлено для позиционирования псевдоэлемента */
}

.gallery h2 {
    text-align: left;
    margin-bottom: 20px;
    font-size: 2em;
    color: #ffffff;
    margin-left: 50px;
}

.gallery h2::after { 
    content: ""; /* Создание пустого контента */
    display: block; /* Отображение как блочный элемент */
    width: 15%; /* Длина полосы (можно настроить) */
    height: 5px; /* Высота полосы */
    background-color: #405bf1; /* Цвет полосы (можно настроить) */
    position: absolute; /* Абсолютное позиционирование */
    left: 90px; /* Сдвиг влево, чтобы соответствовать отступу заголовка */
    bottom: +360px; /* Расположение под заголовком (можно настроить) */
}

.gallery-container {
    display: flex; /* Используем flexbox для расположения изображений в ряд */
    justify-content: flex-start; /* Выравнивание изображений по левому краю */
    overflow-x: auto; /* Прокрутка по горизонтали при необходимости */
}

.gallery-container img {
    max-width: 200px; /* Увеличенная максимальная ширина изображения */
    margin: 10px; /* Отступы между изображениями */
    border-radius: 15px; /* Скругленные края */
    cursor: pointer; /* Указатель при наведении */
}

/* Модальное окно и его стили остаются без изменений */

.modal {
      display: none; /* Скрыто по умолчанию */
      position: fixed; /* Остается на месте */
      z-index: 1000; /* На переднем плане */
      left: 0;
      top: 0;
      width: 100%; /* Полная ширина */
      height: 100%; /* Полная высота */
      overflow: auto; /* Прокрутка при необходимости */
      background-color: rgba(0,0,0,0.8); /* Полупрозрачный фон */
}
  
.modal-content {
      margin: auto;
      display: block;
      width: auto;
      max-width: 90%; /* Максимальная ширина изображения в модальном окне */
      max-height: calc(100% - 40px); /* Максимальная высота с учетом отступов */
}
  
.close {
      position: absolute;
      top: 20px;
      right: 35px;
      color: white;
      font-size: 40px;
}
  
  /* Футер */
  
  .footer {
    background: linear-gradient(to right, #041c33, #0a7eeb); /* Градиентный фон */
    color: #ecf0f1; /* Светлый текст */
    padding: 40px 20px;
    border-radius: 50px;
}

.footer-top {
    display: flex;
    justify-content: center; /* Центрируем содержимое */
    flex-wrap: wrap;
}

.footer-logo img {
    max-width: 100px; /* Ограничиваем размер логотипа */
    border-radius: 30px;
}

.footer-links,
.footer-contact,
.footer-social {
    flex: 1;
    margin: 10px;
    text-align: center; /* Центрируем текст внутри блоков */
}

.footer-links h3,
.footer-contact h3,
.footer-social h3 {
    margin-bottom: 1px;
    font-size: 30px; /* Увеличиваем размер заголовков */
}

.footer-links a,
.footer-social a {
    display: block;
    color: #ecf0f1; /* Цвет ссылок */
    text-decoration: none;
    margin-bottom: 5px;
    transition: color 0.3s ease; /* Плавный переход цвета */
    font-size: 1.5rem
}

.footer-links a:hover,
.footer-social a:hover {
    color: #1228f3; /* Цвет при наведении */
}

.footer-bottom {
    text-align: center;
    margin-top: 20px;
}

.footer-bottom p {
    font-size: 20px; /* Размер текста в нижней части футера */
}

/* Адаптивность для мобильных устройств */
/* Адаптивные стили для мобильных устройств */
@media (max-width: 430px) {
    .footer-top {
        flex-direction: column; /* Вертикальное расположение на маленьких экранах */
        align-items: center; 
        text-align: center; /* Центрируем текст */
    }

    .nav {
        position: absolute;
        top: 60px; 
        right: -100%; 
        background-color: #ffffff; /* Изменил на более читаемый цвет */
        flex-direction: column;
        width: 100%; /* Занимает всю ширину экрана */
        transition: right 0.3s ease-in-out; 
        border-radius: 0 0 8px 8px; /* Углы снизу скруглены */
    }

    .nav.nav-menu_visible {
        right: 0; 
    }

    .nav a {
        padding: 15px; 
        border-bottom: 1px solid rgba(0, 0, 0, .2); /* Изменил цвет границы для лучшей видимости */
        text-align: center; /* Центрирование текста ссылок */
    }

    .gallery {
        padding: 10px; /* Уменьшение отступов для мобильной версии */
        font-size: 1.2rem; /* Уменьшение размера шрифта */
        border-radius: 10px; /* Уменьшение скругления углов */
        box-shadow: none; /* Убираем тень для более плоского дизайна */
        margin-bottom: 20px; /* Уменьшение отступа снизу */
    }

    .gallery h2 {
        font-size: 1.5em; /* Уменьшение размера заголовка */
        margin-left: 10px; /* Уменьшение отступа слева */
    }

    .gallery h2::after { 
    content: ""; /* Создание пустого контента */
    display: block; /* Отображение как блочный элемент */
    width: 20%; /* Длина полосы (можно настроить) */
    height: 5px; /* Высота полосы */
    background-color: #405bf1; /* Цвет полосы (можно настроить) */
    position: absolute; /* Абсолютное позиционирование */
    left: 20px; /* Сдвиг влево, чтобы соответствовать отступу заголовка */
    bottom: 565px; /* Расположение под заголовком (можно настроить) */
}

    .gallery-container {
        display: flex;
        overflow-x: auto;
        padding-bottom: 10px;
    }

    .gallery-container img {
        max-width: calc(100% - 20px); /* Ограничиваем ширину изображений с учетом отступов */
        height: auto;
        margin-right: 10px;
    }

    .modal-content {
       max-width: 90%;
       max-height: calc(100% - 40px); 
   }

   .close {
       font-size:30px;
       top :10 px ;
       right :20 px ;
   }

   .contacts {
       padding :20 px ;
       border-radius :10 px ;
       margin-bottom :20 px ;
   }

   .contacts h2 {
       font-size :1.8rem ; /* Уменьшение размера шрифта заголовка */
       margin-bottom :5 px ;
       text-align :center ;
   }

   .contact-info {
       display:flex;
       flex-direction : column ;/* Изменение на вертикальное расположение элементов */
       align-items : center ;/* Центрирование элементов по горизонтали */ 
       padding :15 px ;/* Добавление отступа внутри блока */ 
   }

   .contact-details {
       margin-right :0 ;/* Убираем отступ справа для мобильной версии */ 
       margin-bottom :20 px ;/* Добавление отступа снизу для разделения с картой */ 
   }

   .map-container {
      flex-basis: auto; /* Автоматическая ширина для карт на мобильных экранах */
      width: calc(100% - 40px); /* Ширина карты с учетом отступов */
      margin-left:auto;
      margin-right:auto;
      padding-top :10 px ;/* Добавление верхнего отступа */ 
      padding-bottom :10 px ;/* Добавление нижнего отступа */ 
   }
  
   .contact-item h3 {
       font-size :16 px ;/* Уменьшение размера шрифта заголовков */ 
   }

   .contact-item span {
       font-size :14 px ;/* Уменьшение размера шрифта подзаголовков */ 
   }

   .contact-item i {
       font-size :18 px ;/* Уменьшение размера иконок */ 
   }
}