.header-bg-image {
    background-image: url('/assets/img/pages/common/headers/rio.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card:hover .card-body {
    color: var(--my-secondary) !important; /* Cambia esto al color deseado, puede ser var(--my-primary) */
    transition: color 0.5s ease !important;
}
.card:hover {
    background-color: var(--my-primary) !important;
    transition: background-color 0.5s ease !important;
}