.language-switcher ul {
    list-style: none; /* Remove default list bullets */
    padding: 0;
    margin: 0;
    display: flex; /* Display list items in a row */
    align-items: center; /* Center items vertically */
    gap: 15px; /* Space between links */
}

.language-switcher li a {
    display: flex; /* Align flag and text horizontally */
    align-items: center; /* Center them vertically */
    text-decoration: none; /* Remove default link underline */
    color: #333;
    font-weight: bold;
    padding: 5px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.language-switcher li a:hover {
    background-color: #f0f0f0; /* Hover effect */
}

.language-switcher img {
    width: 24px; /* Set a consistent width for flags */
    height: auto; /* Maintain aspect ratio */
    margin-right: 8px; /* Space between the flag and the language code */
    border: 1px solid #ccc; /* Optional: adds a border to the flags */
}

/* Style for the active language */
.language-switcher li.active a {
    background-color: #007bff; /* Different background for the active language */
    color: white; /* White text for the active language */
    cursor: default; /* Change cursor to indicate it's not a clickable link */
}

.language-switcher li.active a:hover {
    background-color: #007bff; /* Keep the same background on hover for active link */
}