/* Мобильная адаптация */
@media (max-width: 768px) {

    /* Все медиа-запросы для мобильных устройств находятся здесь */

    /* Кнопка меню становится видимой на мобильных устройствах */
    .menu-toggle {
        display: block;
    }

    /* Меню скрыто по умолчанию */
    .nav-links {
        display: none;
        flex-direction: column;
        gap: 0;
        width: 100%;
        background-color: #333;
        position: absolute;
        top: 50px;
        left: 0;
    }

    /* Когда меню открыто, отображаем его */
    .nav-links.active {
        display: flex;
    }

    /* Пункты меню на мобильных устройствах */
    .nav-links li {
        text-align: center;
        width: 100%;
        padding: 10px;
    }

    /* Мобильная адаптация для Hero блока */
    #hero .hero-content {
        flex-direction: column; /* Элементы становятся вертикальными */
        text-align: center; /* Центрируем текст */
    }

    #hero .hero-text {
        width: 100%; /* Заголовок и текст занимают всю ширину */
        margin-bottom: 10px;
        text-align: center;

    }

    #hero .hero-text2 {
        width: 100%; /* Заголовок и текст занимают всю ширину */
        margin-bottom: 10px;
        text-align: center;
    padding-left: 0px; /* Отступ справа, чтобы текст не был слишком близко к изображению */


    }


    #hero .hero-text h1 {
        font-size: 1.2rem; /* Уменьшаем размер заголовка для мобильных */
        line-height: 1.4;
    }

    #hero .hero-text2 h1 {
        font-size: 1.2rem; /* Уменьшаем размер заголовка для мобильных */
        line-height: 1.4;
    }

    #hero .hero-text p {
        font-size: 1rem; /* Уменьшаем размер текста для мобильных */
    }

    #hero .hero-image {
        width: 100%; /* Изображение будет занимать всю ширину */
        justify-content: center;
    }

    #hero .hero-image img {
        max-width: 100%; /* Убираем ограничение по ширине */
        height: auto; /* Высота автоматически будет пропорциональна */
        object-fit: contain; /* Сохраняем пропорции изображения */
    }

    /* Адаптивные стили для секции Why */
    .why-content {
        flex-direction: column;
        text-align: center;
    }

    #why h2 {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .why-text {
        width: 100%;
    }

    .why-image {
        justify-content: center; /* Для мобильных устройств, картинка будет по центру */
        width: 100%;
    }

    /* Адаптивные стили для карточек */
    .services-cards {
        flex-direction: column;
        align-items: center; /* Центрируем карточки на мобильных устройствах */
    }

    .service-card {
        width: 100%; /* Уменьшаем ширину карточек для мобильных устройств */
        margin-bottom: 0px;
    }

    .fade-in h2 {
        font-size: 1.5rem; /* Уменьшаем размер заголовка для мобильных */
        line-height: 1.4;
    }

    .fade-in visible h2 {
        font-size: 1.5rem; /* Уменьшаем размер заголовка для мобильных */
        line-height: 1.4;
    }

    .order-content {
        flex-direction: column; /* Вертикальное расположение элементов */
        text-align: center; /* Центрируем текст */
    }

    .order-form input, .order-form button {
        width: 90%; /* Уменьшаем ширину полей и кнопки для мобильных */
    }

    .card, .service-card {
        flex-direction: column;
    }

    .card-left, .card-right {
        width: 100%;
    }
    
/* Мобильная адаптация для карусели */
@media (max-width: 768px) {
    .carousel-images {
        flex-direction:row;
        overflow: hidden;  
        width: 100%; /* Показываем все изображения в одном ряду */
        animation: slide 12s infinite linear; /* Прокрутка карусели */

    }

    .carousel-images img {
        width: 30%; /* Изображения занимают всю ширину на мобильных устройствах */
        max-width: 30%;
        margin-right: 10px; /* Убираем расстояние между изображениями */
    }
}


/* Мобильная версия: */
@media (max-width: 768px) {
  .carousel-images {
    width: 768px; /* Контейнер будет расширяться, чтобы поместить все изображения */
  }

  .carousel-images img {
  height: 30%; /* Изображения растягиваются по ширине контейнера */
  width: 33.33%; /* Уменьшаем ширину изображений, чтобы на мобильных показывалось 3 изображения */
  }

  /* Анимация для прокрутки карусели */
  @keyframes slide {
    0% {
      transform: translateX(0); /* Начинаем с первого изображения */
    }
    100% {
      transform: translateX(-33.33%); /* Перемещаем контейнер на 33.33% ширины (на одно изображение) */
    }
  }
}
    .order-form input {
        width: 80%; /* Уменьшаем ширину формы на мобильных устройствах */
    }
}


/* Адаптивные стили */
@media (max-width: 1024px) {
    .complect-item {
        width: calc(50% - 20px); /* 2 блока в строку для экранов средней ширины */
    }
}

@media (max-width: 768px) {
    .complect-desc-container {
        flex-direction: column; /* Столбик при малом размере экрана */
        gap: 10px; /* Меньше расстояние между блоками */
    }

    .complect-item {
        width: 100%; /* Каждый блок будет занимать всю ширину экрана */
    }
}


/* Обеспечиваем корректное размещение элементов в футере */
@media (max-width: 768px) {
    footer {
        padding: 10px 0;
    }
    
    .footer-content {
        max-width: 100%; /* Растягиваем на всю ширину на мобильных */
    }

    .footer-content p {
        font-size: 1rem; /* Уменьшаем размер текста для мобильных */
    }

    .scroll-to-top {
        bottom: 80px; /* Увеличиваем отступ снизу, чтобы кнопка не перекрывала ссылку на Telegram */
        right: 20px;
    }
}