/* Основные стили для body */
body {
    margin: 0; /* Убираем отступы по умолчанию */
    font-family: Arial, sans-serif; /* Устанавливаем шрифт */
    padding: 0; /* Убираем отступы по умолчанию */
    background-color: #ffffff; /* Цвет фона страницы */
}

/* Заголовок */
.header {
    position: relative; /* Позволяет позиционировать заголовок относительно контейнера */
    height: 20%; /* Высота контейнера */
    display: flex; /* Используем flexbox для выравнивания элементов */
    align-items: center; /* Вертикальное выравнивание по центру */
    padding: 0.4% 1px; /* Горизонтальные отступы */
    background-color: rgba(255, 255, 255, 0.8); /* Слегка серый фон */
}

.buttonHeaderLeft {
    display: flex; /* Используем flexbox для выравнивания кнопок */
    /*align-items: center; /* Выравнивание кнопок по центру */
    padding: 5% 5; 
}

.buttonHeaderLeft a {
    margin-right: 1%; /* Отступ между кнопками */
    flex: 1.0; /* Позволяет кнопкам занимать равное пространство */
    min-width: 8%; /* Минимальная ширина кнопки */
}

.buttonHeaderLeft a:last-child {
    margin-right: 0; /* Убираем отступ у последней кнопки */
}

.header a {
    display: flex; /* Используем flexbox для выравнивания текста и изображения */
    align-items: center; /* Вертикальное выравнивание по центру */
    padding: 8px 10px; /* Внутренние отступы для кнопок */
    color: black; /* Цвет текста кнопки черный */
    font-weight: bold; /* Жирный шрифт */
    text-decoration: none; /* Убираем подчеркивание */
    transition: background-color 0.3s, transform 0.3s; /* Плавный переход при наведении */
}

.header a:hover {
    background-color: rgba(0, 0, 0, 0.1); /* Изменение фона при наведении */
    transform: scale(1.05); /* Увеличение кнопки при наведении */
}

/*тест телефона и описания работы*/

.phone {
    color: rgb(255, 255, 255); /* Цвет текста кнопки черный */
    margin: 5px 0; /* Отступы сверху и снизу для разделения с другими элементами */
    font-size: 0.9vw; /* Размер шрифта будет зависеть от ширины окна */
}
.description {
    color: rgb(255, 255, 255); /* Цвет текста кнопки черный */
    margin: 5px 0; /* Отступы сверху и снизу для разделения с другими элементами */
    font-size: 0.8vw; /* Размер шрифта будет зависеть от ширины окна */
}
/* Иконки */
.button-icon {
    width: 20px; /* Установите нужный размер для иконки */
    height: auto; /* Сохраняет пропорции изображения */
    margin-right: 8px; /* Отступ между иконкой и текстом */
    vertical-align: middle; /* Выравнивание по вертикали для лучшего отображения */
}
.phone-icon {
    width: 20px; /* Установите нужный размер для иконки */
    height: auto; /* Сохраняет пропорции изображения */
    margin-right: 8px; /* Отступ между иконкой и текстом */
    vertical-align: middle; /* Выравнивание по вертикали для лучшего отображения */
}
.description-icon{
    width: 20px; /* Установите нужный размер для иконки */
    height: auto; /* Сохраняет пропорции изображения */
    margin-right: 8px; /* Отступ между иконкой и текстом */
    vertical-align: middle; /* Выравнивание по вертикали для лучшего отображения */ 
}

/* Стили для секции UPheader */
.UPheader {
    position: relative; /* Устанавливаем относительное позиционирование для родительского элемента */

    padding: 10px; /* Отступы внутри секции - можно увеличить для большего пространства */
    background-color: rgba(189, 226, 23, 0.8); /* фон */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* Добавление черной тени */
    display: flex; /* Используем flexbox для выравнивания элементов */
    align-items: center;
    height: 60px; /* Высота полоски - можно изменить для регулировки толщины */
    margin: 5px 0; /* Отступы сверху и снизу для разделения с другими элементами */
}

.UPheader h1 {
    color: rgb(0, 0, 0); /* Цвет текста заголовка */
    font-weight: bold; /* Жирный шрифт для заголовка */
    padding-left: 2%; /* Отступ слева для заголовка */
    font-size: 1.8vw; /* Размер текста в vw для адаптивности */
}

.UPheader h4 {
    color: rgb(47, 47, 49); /* Цвет текста заголовка */
    margin: 10px 0 0; /* Отступ сверху для подзаголовка */
    font-size: 1.5vw; /* Адаптивный размер шрифта подзаголовка */
    padding-left: 10%; /* Отступ слева для заголовка */
}

/* Контактная информация */
.contact-info {
    margin-top: 10px; /* Отступ сверху для контактной информации */
    padding-left: 25%; /* Отступ слева для контактной информации */
    display: flex; /* Используем flexbox для выравнивания контактной информации */
    flex-direction: column; /* Вертикальное расположение элементов */
}
.phone {
    font-size: 1.0vw;
    color: rgb(47, 47, 49); /* Цвет текста заголовка */
}
.description {
    font-size: 1.0vw;
    color: rgb(47, 47, 49); /* Цвет текста заголовка */
}

@media (max-width: 768px) {
    .right-image {
        display: block; /* Показываем изображение на мобильных устройствах */
        position: absolute; /* Абсолютное позиционирование для новой картинки */
        right: 10px; /* Отступ справа */
        bottom: 10px; /* Отступ снизу (можно настроить) */
        width: 50px; /* Ширина картинки (можно настроить) */
        height: auto; /* Высота подстраивается автоматически */
    }
    .UPheader h1 {       
        font-size: 8px; /* Устанавливаем фиксированный размер шрифта для мобильных */
    }
}

@media (min-width: 769px) {
    .right-image {
        display: none; /* Скрываем изображение на больших экранах */
    }
}

@media (max-width: 768px) {
    .phone {
        font-size: 11px; /* Устанавливаем фиксированный размер шрифта для мобильных */
    }

    .description {
        display: none; /* Скрываем заголовок на мобильных устройствах */
    }
    .contact-info {
       /* padding-left: 10%; /* Отступ слева для контактной информации */
        margin-top: 0px;  
    }
    .phone-icon {
        width: 14px; /* Установите нужный размер для иконки */
        height: auto; /* Сохраняет пропорции изображения */
        margin-right: 1px; /* Отступ между иконкой и текстом */
    }
    .description-icon{
        width: 14px; /* Установите нужный размер для иконки */
        height: auto; /* Сохраняет пропорции изображения */
        margin-right: 1px; /* Отступ между иконкой и текстом */
    }
    .UPheader h4 {
        display: none; /* Скрываем заголовок на мобильных устройствах */
    }
    .contact-info {
        padding-left: 10%; /* Отступ слева для контактной информации */
    }
}

/* Стили для контейнера с изображением */
.image-container {
    position: relative; /* Делаем контейнер относительным */
    width: 100%; /* Ширина 100% от родительского элемента */
    padding-top: 42%; /* Соотношение сторон 1920x800 (800/1920 = 42%) */
    overflow: hidden; /* Убирает части изображения, выходящие за границы контейнера */
    margin-bottom: 5px; /* Отступ снизу для отделения от маленьких изображений */
}

.image-container img {
    position: absolute; /* Позволяет изображению занимать всю область контейнера */
    top: 0; /* Устанавливаем отступ сверху */
    left: 0; /* Устанавливаем отступ слева */
    width: 100%; /* Изображение будет растягиваться на всю ширину контейнера */
    height: 100%; /* Высота изображения равна высоте контейнера */
    object-fit: cover; /* Обеспечивает обрезку изображения для заполнения контейнера */
}

/* Стили для наложения текста на изображение */
.overlay {
    position: absolute; /* Абсолютное позиционирование для overlay */
    top: 5%; /* Устанавливаем отступ сверху */
    left: 5%; /* Устанавливаем отступ слева */
    right: 5%; /* Устанавливаем отступ справа */
    bottom: 5%; /* Устанавливаем отступ снизу */
    display: flex; /* Используем flexbox для выравнивания текста */
    flex-direction: column; /* Устанавливаем вертикальное направление для дочерних элементов */
    align-items: flex-start; /* Выравнивание по верхнему краю */
}

.TextDess {
    color: rgb(255, 255, 255); /* Цвет текста */
    font-weight: bold; /* Жирный текст */
    font-size: 2.5vw; /* Размер текста в vw для адаптивности */
    line-height: 0.6; /* Высота строки для лучшей читаемости */
}

.TextON {
    color: rgb(199, 199, 199); /* Цвет текста */
    font-size: 1.4vw; /* Уменьшенный размер текста в vw */
    margin: 2% 0%; /* Отступы сверху и по бокам */
    text-align: left; /* Выравнивание текста по левому краю */
}
.TextON2 {
    color: rgb(199, 199, 199); /* Цвет текста */
    font-size: 1.4vw; /* Уменьшенный размер текста в vw */
    margin: 6% 0%; /* Отступы сверху и по бокам */
    text-align: left; /* Выравнивание текста по левому краю */
}
.ContsctINF{
    color: rgb(255, 255, 255); /* Цвет текста */
    font-size: 1.8vw; /* Уменьшенный размер текста в vw */
    margin: 0% 0%; /* Отступы сверху и по бокам */
    text-align: left; /* Выравнивание текста по левому краю */ 
}



/* Полоска под грузовиком и начало новой части */
.divider {
    position: relative; /* Позволяет использовать абсолютное позиционирование для текста внутри */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* Добавление черной тени */
    height: 60px; /* Высота полоски */
    background-color: rgba(247, 255, 210, 0.8); /* фон */
    width: 100%; /* Ширина полоски */
    margin: 15px 0; /* Отступы сверху и снизу для разделения с другими элементами */
}

/* Текст на полоске */
.divider-text {
    position: absolute; /* Позволяет позиционировать текст */
    left: 50%; /* Сдвигает текст в центр по горизонтали */
    top: 50%; /* Центрирует текст по вертикали */
    transform: translate(-50%, -50%); /* Центрирует текст по горизонтали и вертикали */
    font-size: 2.5vw; /* Размер текста в vw для адаптивности */
    color: rgb(0, 0, 0); /* Установите желаемый цвет текста */
    padding: 0 5px; /* Отступы вокруг текста (по желанию) */
}

/* Контейнер для мелких изображений */
.small-images-container {
    display: flex; /* Используем flexbox для выравнивания изображений в ряд */
    justify-content: center; /* Центрируем изображения по горизонтали */
    margin-top: 10px; /* Отступ сверху для разделения с предыдущим блоком */
    gap: 15px; /* Отступы между изображениями */
}

.small-image {
    position: relative; /* Позволяет позиционировать содержимое относительно изображения */
    width: 80%; /* Ширина маленьких изображений */
    max-width: 25%;
    height: auto; /* Высота автоматически подстраивается */
    overflow: hidden; /* Скрывает часть изображения, выходящую за границы контейнера */
    display: flex; /* Используем flexbox для выравнивания содержимого */
    flex-direction: column; /* Располагаем содержимое по вертикали */
    align-items: center; /* Центрируем содержимое по горизонтали */
    justify-content: center; /* Центрируем содержимое по вертикали */
}

.small-image img {
    width: 100%; /* Изображение будет растягиваться на всю ширину контейнера */
    height: auto; /* Высота автоматически подстраивается */
    object-fit: cover; /* Изображение будет обрезано, чтобы заполнить контейнер */
}

.small-image-title {
    color: rgb(255, 255, 255); /* Цвет текста */
    font-size: 1.5vw; /* Адаптивный размер текста */
    top: 10px; /* Отступ от верхней части контейнера */
    /*left: 10px; /* Отступ от левой части контейнера */
    font-weight: bold; /* Делаем текст жирным */
}
.small-image-description {
    color: rgb(255, 255, 255); /* Цвет текста */
    font-size: 1.5vw; /* Адаптивный размер текста */
    bottom: 10px; /* Отступ от нижней части контейнера */
    font-weight: bold; /* Делаем текст жирным */
    text-align: center; /* Центрируем текст */
}
.small-image-footer-description {
    color: rgb(29, 29, 29); /* Цвет текста */
    font-size: 1.2vw; /* Адаптивный размер текста */
    font-weight: bold; /* Делаем текст жирным */
    text-align: center; /* Центрируем текст по горизонтали */
}
.small-image-down-description{
    color: rgb(138, 138, 138); /* Цвет текста */
    font-size: 0.9vw; /* Адаптивный размер текста */
}




/* Контент наложения */
.overlay-content {
    position: absolute; /* Абсолютное позиционирование */
    top: 10%; /* Отступ сверху */
    left: 50%; /* Центрируем по горизонтали */
    transform: translateX(-50%); /* Центрируем по горизонтали */
    color: white; /* Цвет текста */
    text-align: center; /* Центрируем текст */
}

/* Кнопка под мелкими изображениями */
.small-image-button {
    display: flex; /* Используем Flexbox */
    justify-content: center; /* Центрируем по горизонтали */
    align-items: center; /* Центрируем по вертикали */
    background-color: rgb(87, 87, 252); /* Цвет фона кнопки */
    color: white; /* Цвет текста кнопки */
    border: none; /* Убираем рамку */
    border-radius: 20px; /* Слегка округлые края */
    padding: 0 2px; /* Убираем верхний и нижний отступы, оставляем только боковые */
    cursor: pointer; /* Указатель при наведении */
    margin: 20px auto; /* Центрируем кнопку с отступом сверху и снизу */
    text-align: center; /* Центрируем текст внутри кнопки */
    width: 300px; /* Ширина кнопки (можно настроить) */
    height: 50px; /* Высота кнопки (можно настроить) */
}

/* Прайс лист */
.services-container {
    background-color: rgba(247, 255, 210, 0.8); /* фон */
    width: 100%; /* Ширина на всю ширину экрана */
    padding: 20px; /* Отступы внутри контейнера */
    box-sizing: border-box; /* Учитываем отступы в ширине и высоте */
    text-align: center; /* Центрируем текст */
}

.price-list {
    display: flex; /* Используем flexbox для выравнивания пунктов */
    flex-direction: column; /* Вертикальное расположение */
    align-items: center; /* Центрируем элементы по горизонтали */
    margin-top: 20px; /* Отступ сверху для разделения с предыдущими элементами */
}

.price-item {
    display: flex; /* Используем flexbox для выравнивания названия и цены */
    justify-content: space-between; /* Разделяем элементы по краям */
    align-items: flex-start; /* Выравнивание по верхнему краю */
    width: 80%; /* Ширина каждого пункта прайс-листа */
    max-width: 600px; /* Максимальная ширина для пункта прайс-листа */
    margin: 10px 0; /* Отступы между пунктами */
}

.price-item-content {
    flex: 1; /* Позволяет этому блоку занимать оставшееся пространство */
    text-align: left; /* Выравнивание текста по левому краю */
}

.price-item-title {
    display: flex;
    font-weight: bold; /* Жирный текст для названия услуги */
    font-size: 18px; /* Размер текста для названия услуги */
    margin: 0; /* Убираем отступы */
}

.price-item-description {
    font-size: 12px; /* Размер текста для описания услуги */
    color: rgb(139, 121, 121); /* Цвет текста для описания */
    margin: 0; /* Убираем отступы */
}
.price-item-cost {
    font-weight: bold; /* Жирный текст для стоимости */
    color: black; /* Черный цвет текста */
    margin-left: 20px; /* Отступ между описанием и ценой (регулируемый) */
    align-self: center; /* Центрируем цену по вертикали относительно услуги */
    min-width: 100px; /* Минимальная ширина для выравнивания */
    text-align: right; /* Выравнивание текста по правому краю */
}

/* Разделитель для прайс-листа */
.dividerPrice {
    height: 1px; /* Высота полоски */
    background-color: #ccc; /* Цвет полоски (светло-серый) */
    width: 80%; /* Ширина полоски (можно регулировать) */
    margin: 10px auto; /* Центрируем полоску с отступами сверху и снизу */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* Добавление черной тени */
}

/* Заголовок для автомобилей */
.cars-title {
    font-weight: bold; /* Жирный текст для заголовка */
    font-size: 24px; /* Размер текста для заголовка */
    margin: 20px 0 10px; /* Отступы: сверху 20px, снизу 10px */
    text-align: center; /* Центрируем текст */
}

.cars-description {
    font-size: 16px; /* Размер текста для подзаголовка */
    color: #666; /* Цвет текста для подзаголовка (можно изменить) */
    text-align: center; /* Центрируем текст */
    margin-bottom: 20px; /* Отступ снизу */
}

/* Разделитель для автомобилей */
.dividerPriceAuto {
    height: 1px; /* Высота полоски */
    background-color: #ccc; /* Цвет полоски (светло-серый) */
    width: 100%; /* Ширина полоски (можно регулировать) */
    margin: 10px 0; /* Отступы сверху и снизу для разделения с другими элементами */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* Добавление черной тени */
}

/* Стили для слайдера */
.slider-container {
    display: flex;
    /*align-items: flex-start; /* Выравниваем элементы по верхнему краю */
    justify-content: space-between; /* Распределяем элементы по горизонтали */
    padding: 5px; /* Отступы вокруг контейнера */
    width: 93%; /* Максимальная ширина контейнера */
    /*max-width: 1920px; /* Ограничиваем максимальную ширину */
    height: 800px; /* Высота контейнера */
    margin: auto; /* Центрируем контейнер на странице */
    background-color: #fff; /* Цвет фона контейнера */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Тень для контейнера */
    border-radius: 8px; /* Закругленные углы контейнера */
}

.slider {
    flex: 1; /* Занимает оставшееся пространство */
    display: flex;
    flex-direction: column; /* Располагаем изображение и текст вертикально */
    /*justify-content: flex-start; /* Выравниваем элементы по верхнему краю */
    margin: 0 20px; /* Отступы слева и справа */
}

.slider img {
    max-width: 70%; /* Ограничиваем ширину изображения */
    max-height: 75%;
    height: auto; /* Автоматическая высота */
    margin-bottom: 100px; /* Отступ между изображением и текстом */
    /*margin-top: 200px;*/
}

.slider-button {
    background-color: #f0f0f0; /* Цвет фона кнопок */
    border: 2px solid #ccc; /* Рамка кнопок */
    border-radius: 2px; /* Закругленные углы */
    padding: 10px; /* Отступы внутри кнопок */
    cursor: pointer; /* Указатель при наведении */
    font-size: 24px; /* Размер шрифта для стрелок */
    transition: background-color 0.3s; /* Плавный переход цвета фона */
}

.slider-button:hover {
    background-color: #e0e0e0; /* Цвет фона при наведении */
}

.car-info {
    margin-left: 20px; /* Отступ слева от изображения */
    flex: 1.0; /* Занимает оставшееся пространство */
    display: flex; /* Используем flex для выравнивания текста */
    flex-direction: column; /* Располагаем текст вертикально */
    justify-content: flex-start; /* Выравниваем текст по верхнему краю */
}

#car-title {
    font-size: 17px; /* Размер шрифта для названия автомобиля */
    font-weight: bold; /* Жирный шрифт */
    margin: 0; /* Убираем отступы */
}

#car-descriptions {
    font-size: 16px; /* Размер шрифта для описания */
    margin: 5px 0; /* Вертикальные отступы между строками */
    line-height: 1.5; /* Высота строки для лучшей читаемости */
}

@media (min-width: 769px) {
    .slider img {
        margin-top: 200px; /* Отступ сверху от контейнера для больших экранов */
        padding-left: 50px;
    }
    .car-info {
        margin-top: 170px;
    }
    #car-title {
        margin-top: 170px;
    }
}

/* Медиа-запросы для мобильных устройств */
@media (max-width: 768px) {
    .slider-container {
        flex-direction: column; /* Располагаем элементы в колонку на мобильных */
        height: 700px; /* Автоматическая высота для мобильных */
    }

    .slider {
        margin: 0; /* Убираем отступы для мобильных */
    }

    .car-info {
        margin-left: 0; /* Убираем отступ слева для мобильных */
        margin-top: 10px; /* Добавляем отступ сверху для текста */
    }

    #car-title {
        font-size: 16px; /* Уменьшаем размер шрифта для мобильных */
    }

    #car-descriptions {
        font-size: 14px; /* Уменьшаем размер шрифта для описания */
    }
}

/* Отзывы клиентов */
.reviews-section {
    text-align: center; /* Центрируем текст */
    margin: 20px 0; /* Отступы сверху и снизу */
}

.top-line, .bottom-line {
    height: 2px; /* Высота полоски */
    background-color: #ccc; /* Цвет полоски */
    margin: 10px 0; /* Отступы сверху и снизу для полоски */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* Добавление черной тени */
}

h2 {
    font-size: 24px; /* Размер шрифта заголовка */
    margin: 10px 0; /* Отступы для заголовка */
}

a {
    color: #007bff; /* Цвет ссылки */
    text-decoration: none; /* Убираем подчеркивание */
}

a:hover {
    text-decoration: underline; /* Подчеркивание при наведении */
}


/* Отзывы клиентов */
.reviews-section {
    text-align: center; /* Центрируем текст */
    margin: 20px 0; /* Отступы сверху и снизу */
}

.top-line, .bottom-line {
    height: 2px; /* Высота полоски */
    background-color: #ccc; /* Цвет полоски */
    margin: 10px 0; /* Отступы сверху и снизу для полоски */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* Добавление черной тени */
}

h2 {
    font-size: 24px; /* Размер шрифта заголовка */
    margin: 10px 0; /* Отступы для заголовка */
}

a {
    color: #007bff; /* Цвет ссылки */
    text-decoration: none; /* Убираем подчеркивание */
}

a:hover {
    text-decoration: underline; /* Подчеркивание при наведении */
}

/* Отзывы */
.centered-image-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150vh; /* Высота контейнера */
    padding: 20px; /* Отступы */
    box-sizing: border-box;
}

.centered-image {
    background-size: cover; /* Масштабирование изображения */
    background-position: center; /* Центрирование изображения */
    filter: brightness(70%) blur(2.0px);
    width: 80%; /* Ширина */
    height: auto; /* Высота автоматически подстраивается под ширину */
    max-height: 150vh; /* Ограничение максимальной высоты */
    box-sizing: border-box; 
    background-color: rgba(61, 60, 60, 0.281);
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(128, 128, 128, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cards-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-wrap: wrap;
    max-width: 70%; /* Максимальная ширина */
    gap: 40px; /* Отступ между карточками */
}

.card {
    position: relative;
    text-align: left;
    width: calc((100% / 2) - (15px * 2)); /* Ширина карточки */
    overflow: hidden;

}

.card-image {
    width: 100%; /* Ширина изображения 100% от родительского элемента */
    height: auto; /* Высота будет автоматически подстраиваться */
    border-radius: 2px;
    filter: brightness(85%);
}
.review-text {
    position: absolute;
    top: 15px; /* Отступ */
    left: 10px;
    color: rgb(0, 0, 0);
    font-size: 0.9vw; /* Размер текста в зависимости от ширины окна */
    margin: 0;
}

.card h3 {
    position: absolute;
    bottom: 22px; /* Отступ */
    left: 10px;
    color: rgb(0, 0, 0);
    font-size: 0.9vw; /* Размер текста в зависимости от ширины окна */
}

.card h2 {
    position: absolute;
    bottom: 14px; /* Отступ */
    left: 10px;
    color: rgb(70, 70, 70);
    font-size: 0.7vw; /* Размер текста в зависимости от ширины окна */
}
/* Медиа-запросы для мобильных устройств */

@media (max-width: 768px) {
    .centered-image-container {
        height: auto; /* Автоматическая высота для мобильных */
        padding: 10px; /* Уменьшаем отступы */
    }
    .card-image {
        width: 250px; /* Ширина изображения 100% от родительского элемента */
        
    }

    .centered-image {
        height: 50vh; /* Уменьшаем высоту изображения на мобильных */
    }

    .cards-container {
        max-width: 90%; /* Увеличиваем максимальную ширину для мобильных */
        gap: 20px; /* Уменьшаем отступ между карточками */
        display: flex; /* Используем Flexbox для выравнивания карточек */
        justify-content: center; /* Центрируем карточки по горизонтали */
    }

    .card {
        width: 250px; /* Ширина карточки 100% на мобильных */
        margin-bottom: 20px; /* Отступ между карточками */
    }
    .review-text {
        font-size: 10px; /* Увеличиваем размер текста для мобильных */
        top: 7px; /* Уменьшаем отступ сверху */
        left: 10px; /* Отступ слева */
    }

    .card h3 {
        font-size: 11px; /* Увеличиваем размер заголовка для мобильных */
        bottom: 15px; /* Уменьшаем отступ снизу */
    }

    .card h2 {
        font-size: 7px; /* Увеличиваем размер текста для мобильных */
        bottom: 6px; /* Уменьшаем отступ снизу */
    }
}
/* Скрываем карточки на мобильных устройствах */
@media (max-width: 768px) {
    .card {
        display: none; /* Скрываем все карточки по умолчанию */
    }
    /* Показываем только первые две карточки */
    .card:nth-child(1),
    .card:nth-child(2),
    .card:nth-child(3) {
        display: block;
    }
}
@media (max-height: 769px) {
    .card {
        display: none; /* Скрываем все карточки по умолчанию */
    }
    /* Показываем только первые две карточки */
    .card:nth-child(1),
    .card:nth-child(2) {
        display: block;
    }
    .review-text {
        font-size: 9px; /* Увеличиваем размер текста для мобильных */
        top: 5px; /* Уменьшаем отступ сверху */
        left: 10px; /* Отступ слева */
    }

    .card h3 {
        font-size: 10px; /* Увеличиваем размер заголовка для мобильных */
        bottom: 13px; /* Уменьшаем отступ снизу */
    }

    .card h2 {
        font-size: 7px; /* Увеличиваем размер текста для мобильных */
        bottom: 6px; /* Уменьшаем отступ снизу */
    }
}
.overlaydate {
    background-color: rgba(128, 128, 128, 0.7); /* Полупрозрачный серый цвет */
    color: black; /* Цвет текста */
    padding: 20px;
    text-align: center;
    width: 100%; /* Занимает всю ширину экрана */
    backdrop-filter: blur(5px); /* Эффект размытия фона */
    font-size: 1.2em; /* Размер шрифта */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Тень для эффекта */
    position: absolute; /* Позволяет полоске занимать всю ширину */
    
}
@media (max-width: 600px) {
    .overlaySpecial {
        font-size: 1em; /* Уменьшение размера шрифта на маленьких экранах */
    }
}