.card-active {
    transform: translateY(-5px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    cursor: pointer;
    background-color: #325d8859;
    border-radius: 12px;
}

.card {
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    background-color: #fff;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}
    .card:hover {
        transform: scale(1.02);
        transition: transform 0.2s ease-in-out;
        cursor: pointer;
        background: linear-gradient(to top, #cfc09f 20%, #ffecb3 98%, #cfc09f 70%);
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }

    /* Иконки в карточках */
    .card img.card-img-top,
    .card i.bi {
        transition: transform 0.3s ease;
    }

    /* Hover для иконок на ПК */
    .card:hover img.card-img-top,
    .card:hover i.bi {
        transform: scale(1.08);
    }

/* Текст внутри карточки */
.card-text {
    font-size: 15px;
    line-height: 1.4;
}

/* --- MOBILE --- */
@media (max-width: 768px) {
    .card {
    }

        .card img.card-img-top,
        .card i.bi {
            width: 100px !important;
            margin-top: 12px !important;
        }

    .card-text {
        font-size: 14px;
    }

    /* Мягкий hover эффект на мобильных */
    .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .row.g-4 {
        --bs-gutter-x: 0.8rem;
        --bs-gutter-y: 1rem;
    }
}

@media (max-width: 480px) {
    .card img.card-img-top,
    .card i.bi {
        width: 45px !important;
    }

    .card-text {
        font-size: 13px;
    }
}