.badge {
    background: linear-gradient(135deg, #6a5acd, #4b0082); /* Gradient background */
    border-radius: 12px; /* More rounded corners */
    padding: 5px 10px; /* More padding for better readability */
    text-decoration: none;
    margin: 0 0.5em; /* Slightly larger margin */
    font-size: 0.85em; /* Slightly larger font size */
    color: #fff; /* White text color */
    font-weight: 600; /* Semi-bold text */
    display: inline-block; /* Ensure it behaves like an inline element */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    transition: background 0.3s ease, transform 0.3s ease; /* Smooth transition effects */
}

.badge:hover, .badge:focus, .badge:active {
    background: linear-gradient(135deg, #4b0082, #6a5acd); /* Inverted gradient on hover */
    transform: translateY(-2px); /* Slight lift effect on hover */
    color: #fff;
}