/*-----Стилизация Карусели-----*/
.carousel {
    height: 350px;
    /* Устанавливаем высоту карусели */
    overflow: hidden;
    /* Скрываем переполнение */
    position: relative;
    /* Позволяет позиционировать элементы внутри */
}

.word {
    font-weight: bold;
}

/*-----Стили для нижних кнопок-----*/
.carousel-indicators button {
    background-color: rgba(203, 203, 203, 0.8);
    /* Полупрозрачный серый цвет */
    border: none;
    /* Без рамки */
    width: 12px;
    /* Ширина индикатора */
    height: 12px;
    /* Высота индикатора */
    opacity: 1;
    /* Полная непрозрачность */
    transition: background-color 0.3s;
    /* Плавный переход при изменении цвета */
}

.carousel-indicators button.active {
    background-color: #67b84f;
    /* Зеленый цвет при активности */
}

.carousel-indicators button:hover {
    background-color: rgba(103, 184, 79, 0.7);
    /* Темно-зеленый при наведении */
}

/*-----Стили для блока с текстом-----*/
.custom-caption {
    width: 40%;
    display: flex;
    /* Используем flexbox для расположения элементов */
    flex-direction: column;
    /* Устанавливаем направление колонок */
    align-items: flex-start;
    /* Выровнять элементы по началу */
    background-color: rgba(244, 242, 243, 0.9);
    /* Полупрозрачный фон */
    color: #393229;
    /* Цвет текста */
    font-weight: 400;
    /* Жирность текста */
    font-size: 20px;
    /* Размер шрифта */
    padding: 20px 20px;
    /* Отступы внутри блока */
    border-radius: 2px;
    /* Закругляем края */
    transform: translate(140%, -36%);
    /* Центрируем по горизонтали и вертикали */
}

.caption-item {
    display: flex;
    /* Используем flexbox для расположения элементов в строку */
    justify-content: space-between;
    /* Распределяем пространство между элементами */
    align-items: center;
    /* Центруем по вертикали */
    margin-bottom: 10px;
    /* Отступ между строками */
    width: 100%;
    /* Занимаем всю ширину родительского блока */
}


/*Картинка*/
.carousel-item img {
    height: 100%;
    /* Высота изображений равна высоте карусели */
    width: auto;
    /* Ширина изображений автоматическая для сохранения пропорций */
    max-width: none;
    /* Отключаем максимальную ширину */
    object-fit: cover;
    /* Обеспечивает обрезку изображений с сохранением пропорций */
}

/*Текст*/
.checkmark {
    margin-right: 10px;
    border: 0px;
    /* Отступ между текстом и кнопкой (20px) */
}

.checkmark::before {
    content: "✔";
    color: #0072ab;
    /* синяя галочка */
    font-weight: bold;
    margin-right: 5px;
    /* маленький отступ */
}

/*Кнопка*/
.custom-caption-btn {
    background-color: #0072ab;
    /* Цвет фона кнопки */
    text-decoration: none;
    width: 100px;
    /* Ширина кнопки */
    color: #fff;
    /* Цвет текста кнопки */
    border: none;
    /* Без рамки */
    padding: 10px 15px;
    /* Отступы внутри кнопки */
    cursor: pointer;
    /* Курсор при наведении */
    border-radius: 5px;
    /* Закруг ление краёв кнопки */
    font-size: 14px;
    /* Размер шрифта кнопки */
    white-space: nowrap;
    /* Предотвращает перенос текста */
    display: flex;
    /* Делаем кнопки flex-контейнерами */
    align-items: center;
    /* Центрируем текст по вертикали */
    justify-content: center;
    /* Центрируем текст по горизонтали */
    text-align: center;
    /* На случай переноса текста */
}

.custom-caption-btn:hover {
    background-color: #4a5567;
    /* Добавляет эффект при наведении */
}

/*-----Стили для боковых кнопок-----*/
.carousel-control-prev,
.carousel-control-next {
    background-color: rgba(255, 255, 255, 0.7);
    /* Полупрозрачный белый фон */
    color: green;
    /* Цвет кнопок */
    width: 50px;
    /* Ширина кнопок */
    height: 50px;
    /* Высота кнопок */
    top: 50%;
    /* Центрируем по вертикали */
    transform: translateY(-50%);
    /* Сдвигаем на половину высоты кнопки */
    z-index: 15;
    /* Увеличиваем z-index, чтобы стрелки были поверх изображений */
    border-radius: 50%;
    /* Округлые края для кнопок */
    display: flex;
    /* Центрируем содержимое */
    align-items: center;
    /* Центрируем по вертикали */
    justify-content: center;
    /* Центрируем по горизонтали */
    border: none;
    /* Убираем рамку */
    position: absolute;
    /* Позволяет расположить стрелки относительно родительского блока */
}

.carousel-control-prev {
    left: 0;
    /* Положение стрелки влево без отступа */
}

.carousel-control-next {
    right: 0;
    /* Положение стрелки вправо без отступа */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 20px;
    /* Ширина иконок */
    height: 20px;
    /* Высота иконок */
    border-radius: 50%;
    /* Округлые иконки */
}

/*-----Стилизация Карусели (КОНЕЦ)-----*/


.container-fluid_advantages {
    background-color: #edeef0;
}

.advantages {
    display: flex;
    /* Используем Flexbox для выравнивания в строку */
    flex-wrap: wrap;
    /* Позволяет элементам переноситься на новую строку, если не хватает места */
    gap: 20px;
    /* Отступ между элементами */
    padding: 10px;
    /* Отступ вокруг всего блока */
}

.advantage-item {
    display: flex;
    /* Flexbox для иконки и текста */
    align-items: center;
    /* Вертикальное выравнивание по центру */
    justify-content: center;
    padding: 5px 5px;
    /* Внутренний отступ */
    flex: 1 1 200px;
    /* Позволяет элементам занимать равное пространство, минимальная ширина 200px */
    margin: 20px 0;
}

.icon {
    margin-right: 12px;
    /* Отступ между иконкой и текстом */
}

.icon img {
    width: 35px;
    /* Ширина иконки */
}

.text p {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    margin: 0;
    /* Убираем отступы у текста */
    color: #333;
    /* Цвет текста */
}



.popular-products {
    text-align: center;
    /* Центрируем содержимое */
}

.line-container {
    display: flex;
    /* Используем Flexbox для выравнивания */
    align-items: center;
    /* Центрируем по вертикали */
}

.line {
    flex: 1;
    /* Линия занимает оставшееся пространство */
    border: none;
    /* Убираем стандартный стиль границы */
    border-top: 1px solid #949494;
    /* Цвет и стиль линии */
    margin: 0;
    /* Убираем отступы */
}

.line-text {
    padding: 0 10px;
    /* Отступы по бокам текста */
    font-size: 26px;
    /* Размер шрифта */
    font-weight: 400;
    /* Жирный шрифт */
    line-height: 29px;
    color: #333;
    /* Цвет текста */
}

.blocks {
    padding: 30px 0 !important;
}

.row {
    display: flex !important;
    /* Переопределяем стиль Bootstrap */
    gap: 15px !important;
    /* Убедитесь, что есть отступы между карточками */
    flex-wrap: wrap !important;
    /* Позволяет карточкам переноситься на следующую строку */
    justify-content: center;
}

.card {
    position: relative !important;
    /* Переопределяем стиль Bootstrap */
    background-color: #fff !important;
    margin-top: 15px !important;
    border: 0px !important;
    border-radius: 0px !important;
    overflow: hidden !important;
    display: flex !important;
    /* Используйте flex для центрирования содержимого */
    justify-content: center !important;
    /* Центрирование по горизонтали */
    align-items: center !important;
    /* Центрирование по вертикали */
}

.card img {
    width: 100% !important;
    height: auto !important;
    /* Убедитесь, что изображение сохраняет свои пропорции */
    object-fit: cover !important;
    /* Масштабирование изображения */
    transition: transform 0.3s ease;
    /* Плавное увеличение */
}

.card:hover img {
    transform: scale(1.1);
    /* Увеличиваем изображение на 10% */
}

.card .text {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    border-radius: 3px !important;
    margin: 15px 25px !important;
    padding: 6px 10px !important;
    background-color: #0072ab;
    color: #fff !important;
    /* Цвет текста */
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
}

.small {
    width: 270px !important;
    /* Ширина маленькой плашки */
    height: auto !important;
    /* Высота маленькой плашки */
}

.big {
    width: 555px !important;
    /* Ширина большой плашки (2 маленькие) */
    height: auto !important;
    /* Высота большой плашки */
}



/* Адаптация карусели для мобильных устройств */
@media (max-width: 768px) {
    .carousel {
        height: 200px;
        /* Уменьшаем высоту для мобильных устройств */
    }

    .carousel-inner img {
        object-fit: cover;
        /* Обеспечиваем обрезку изображений с сохранением пропорций */
        max-height: 200px;
        /* Ограничиваем максимальную высоту изображений */
    }

    .custom-caption {
        width: 90%;
        /* Увеличиваем ширину подложки для текста */
        transform: translate(0, -30%);
        /* Центрируем по вертикали */
    }
}


/* Мобильная адаптация карточек */
@media (max-width: 768px) {
    .row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* 2 колонки для маленьких */
        gap: 10px;
        /* отступ между карточками */
        justify-items: center;
        /* центрируем карточки */
        width: 100%;
    }


    .small {
        width: 270px !important;
        /* Ширина маленькой плашки */
        height: auto !important;
        /* Высота маленькой плашки */
    }

    .big {
        width: 270px !important;
        /* Ширина большой плашки (2 маленькие) */
        height: 270px !important;
        /* Высота большой плашки */
    }


}




/* Адаптация для планшетов */
@media (min-width: 769px) and (max-width: 1024px) {
    .header_info {
        flex-direction: row;
        /* Горизонтальное расположение */
    }

    .menu_list {
        gap: 20px;
        /* Увеличиваем отступы */
    }

    .carousel {
        height: 300px;
        /* Увеличиваем высоту для планшетов */
    }
}