/* === СТИЛИ ГЛАВНОЙ СТРАНИЦЫ САЙТА === */

/* === КАРТИНКИ === */
/* Динамический размер картинок */
@media (min-width: 992px) { /* Применяется только для экранов шире 992px (большие экраны) */
    .bfl-main-page .limited-img {
        width: 95%;
        max-width: 600px;
        height: auto;
    }
}

/* === КНОПКИ === */
   
/* Центрирование кнопок */
.bfl-main-page .btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Центрирование контейнера с кнопками */
.bfl-main-page .button-container {
    width: 85%;  /* Занимает 85% от родительского контейнера для больших экранов */
    margin: 0 auto;  /* Центрирование контейнера */
}

@media (max-width: 768px) { /* Для мобильных устройств, ширина контейнера 100% */
    .bfl-main-page .button-container {
        width: 100%; 
    }
}

@media (min-width: 992px) { /* Ограничение для больших экранов */
    .bfl-main-page .custom-container {
        max-width: 800px; /* Можно настроить под нужный размер */
        margin: 0 auto;
    }
}

/* === СЕРВИСЫ === */

/* Иконки сервисов */
.bfl-main-page .icon-btn {
    border: 2px solid var(--bfl-logo-color); /* окантовка */
    border-radius: 12px; /* скругление */
    padding: 20px; /* внутренний отступ */
    background-color: var(--bfl-second-color);
    color: var(--bfl-logo-color);
    transition: all 0.3s ease;
    width: 100%; /* чтобы кнопка занимала всю ширину колонки */
}

.bfl-main-page .icon-btn i {
    pointer-events: none; /* чтобы клик шёл по кнопке, а не по иконке */
}

.bfl-main-page .icon-btn:hover {
    background-color: var(--bfl-logo-color);
    color: var(--bfl-base-color);
    transform: scale(1.1);
    cursor: pointer;
}

/* === ТАРИФЫ === */
        
/* Иконки тарифов */
.bfl-main-page .icon-btn-pay {
    border: 2px solid var(--bfl-logo-color); /* окантовка */
    border-radius: 12px; /* скругление */
    padding: 20px; /* внутренний отступ */
    background-color: var(--bfl-second-color);
    color: var(--bfl-base-color);
    transition: all 0.3s ease;
    width: 100%; /* чтобы кнопка занимала всю ширину колонки */
}

.bfl-main-page .icon-btn-pay i {
    pointer-events: none; /* чтобы клик шёл по кнопке, а не по иконке */
}

.bfl-main-page .icon-btn-pay:hover {
    background-color: var(--bfl-base-color);
    color: var(--bfl-logo-color);
    transform: scale(1.1);
    cursor: pointer;
}