#language-switcher {
    display: flex;
    gap: 10px;
    align-items: center;
}

#language-switcher .flag-icon {
    cursor: pointer;
    font-size: 30px;
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: grayscale(100%); /* Make the flag grayscale by default */
}

/* Hover effect - restore color when hovered */
#language-switcher .flag-icon:hover {
    transform: scale(1.1);
    filter: grayscale(0%); /* Restore color on hover */
}

/* Active flag styling - ensure the selected flag stays colored */
#language-switcher .lang-active .flag-icon {
    filter: grayscale(0%); /* Ensure the selected flag is colored */
    transform: scale(1.2); /* Slightly larger selected flag */
}