@media (max-width: 767.98px) {
        .responsive-badge {
            font-size: 0.85rem !important;
            /* padding-top: 15px;
            padding-bottom: 15px; */
        }
    }

    @media (max-width: 575.98px) {
        .highlight-card .card-body {
            text-align: center;
        }

        .highlight-card .card-body .d-flex {
            flex-direction: column;
            align-items: center !important;
            justify-content: center;
        }

        .highlight-card .card-body .rounded-circle i {
            font-size: 22px !important;
        }

        .highlight-card .card-body h5,
        .highlight-card .card-body p {
            text-align: center;
        }
    }

    .highlight-card {
        border: none;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    .highlight-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }

    .highlight-card .card-body {
        transition: background-color 0.3s ease;
    }

    .highlight-card:hover .card-body {
        background-color: #f9f9f9;
    }

    .highlight-card i {
        font-size: 1.5rem;
    }

    .highlight-card,
    .card.shadow-sm {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .highlight-card:hover,
    .card.shadow-sm:hover {
        transform: translateY(-5px);
        box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.1);
    }

    .card .rounded-circle {
        transition: background-color 0.3s ease;
    }

    .card:hover .bg-opacity-10 {
        background-color: #6b0c0b !important;
    }

    .card-hover-effect {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border-radius: 0.5rem;
    }

    .card-hover-effect:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
    }

    .card-hover-effect .card-body {
        transition: background-color 0.3s ease;
    }

    .card-hover-effect:hover .card-body {
        background-color: #f8f9fa;
    }

    .card-hover-effect .card-header {
        transition: background-color 0.3s ease;
    }

    .card-hover-effect:hover .card-header {
        background-color: #6b0c0b !important;
    }

    .card-hover-effect {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border-radius: 0.5rem;
    }

    .card-hover-effect:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
    }

    .card-hover-effect .card-body {
        transition: background-color 0.3s ease;
    }

    .card-hover-effect:hover .card-body {
        background-color: #f8f9fa;
    }