/*NOTE: This file is intended for programmers. Aspro technical support is not advised to work with him.*/

/* Examples (uncomment to use):*/

/* Expand site width */
/* body .wrapper { max-width: 1400px !important;  } */

/* Set site background image */
/* body {  background: url(image_source) top no-repeat; }

/* Hide compare button */
/* a.compare_item { display: none !important;  }*/


/* Почему выбирают нас? */

/* Общий контейнер блока */
.main-features-block {
    padding: 40px 0; /* Отступы сверху/снизу */
}

/* Заголовок секции */
.main-features-block .title-features {
    text-align: center;
    margin-bottom: 30px;
    font-size: 28px;
    color: #333; /* Основной цвет текста */
}

/* Flex-контейнер для всех преимуществ */
.features-list {
    display: flex;
    flex-wrap: wrap; /* Позволяет элементам переноситься на новую строку */
    gap: 20px; /* Отступ между элементами */
    justify-content: center; /* Центрирование элементов в контейнере */
}

/* Стиль одного элемента */
.feature-item {
    /* Базовый размер: 5 элементов в ряд */
    flex-basis: calc(20% - 16px); /* 100% / 5 = 20%. Вычитаем отступы gap: 20px * 4 / 5 = 16px */
    min-width: 200px; /* Минимальная ширина, чтобы текст не был слишком узким */
    
    padding: 25px;
    background-color: #f7f7f7; /* Светлый фон */
    border: 1px solid #eee;
    border-radius: 15px; /* Закругленные края */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* Легкая тень для объема */
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

/* Эффект при наведении (опционально) */
.feature-item:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

/* Иконка */
.feature-icon {
    margin-bottom: 15px;
    color: #007bff; /* Цвет для иконки (используйте ваш основной цвет бренда) */
}
.feature-icon i {
    font-size: 40px;
}

/* Заголовок внутри блока */
.feature-title {
    font-size: 18px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 10px;
}

/* Описание */
.feature-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}


/* --------------------------------- */
/* Адаптивность (Flexbox) */
/* --------------------------------- */

/* Планшеты (992px и меньше) */
@media (max-width: 992px) {
    .feature-item {
        /* 3 элемента в ряд */
        flex-basis: calc(33.33% - 14px); /* 100% / 3 = 33.33%. Вычитаем отступы */
        min-width: 250px;
    }
}

/* Маленькие планшеты / Телефоны (768px и меньше) */
@media (max-width: 768px) {
    .main-features-block {
        padding: 30px 0;
    }
    .feature-item {
        /* 2 элемента в ряд */
        flex-basis: calc(50% - 10px); /* 100% / 2 = 50%. Вычитаем отступы */
        min-width: 280px;
    }
}

/* Телефоны (576px и меньше) */
@media (max-width: 576px) {
    .feature-item {
        /* 1 элемент в ряд */
        flex-basis: 100%;
    }
}

/* Почему выбирают нас? */