make this function the same way as the cart

index.html

@@ -84,25 +84,19 @@
                                 <span id="cart-count" class="text-white">0</span>
                             </button>
 </div>
-                    <div class="relative group z-50">
-                        <button class="flex items-center space-x-1 bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg transition">
-                            <i data-feather="globe" class="mr-1"></i>
+                    <div class="relative">
+                        <button id="language-button" class="flex items-center space-x-1 bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg transition">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe mr-1"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
                             <span id="current-language">EN</span>
-                            <i data-feather="chevron-down" class="ml-1"></i>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down ml-1"><polyline points="6 9 12 15 18 9"></polyline></svg>
                         </button>
-                        <div class="absolute right-0 mt-2 w-48 bg-black border border-yellow-500 rounded-lg shadow-lg py-1 hidden group-hover:block" style="z-index: 1000;">
+                        <div id="language-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-black border border-yellow-500 rounded-lg shadow-lg py-1 z-50">
                             <a href="#" class="language-switch block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="en">English</a>
                             <a href="#" class="language-switch block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="es">Español</a>
                             <a href="#" class="language-switch block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="fr">Français</a>
                             <a href="#" class="language-switch block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="de">Deutsch</a>
                         </div>
-<div class="absolute right-0 mt-2 w-48 bg-black border border-yellow-500 rounded-lg shadow-lg py-1 hidden group-hover:block" style="z-index: 1000;">
-<a href="#" class="language-switch block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="en">English</a>
-                            <a href="#" class="language-switch block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="es">Español</a>
-                            <a href="#" class="language-switch block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="fr">Français</a>
-                            <a href="#" class="language-switch block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="de">Deutsch</a>
-                        </div>
-                    </div>
+</div>
 <a href="login.html" class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold px-4 py-2 rounded-lg transition flex items-center">
                         <i data-feather="user" class="mr-2"></i> Login
                     </a>
@@ -646,8 +640,15 @@ Get Started
                 // Initial translations loaded
                 updateContent();
             });
-
         // Language switcher
+        const languageButton = document.getElementById('language-button');
+        const languageDropdown = document.getElementById('language-dropdown');
+        
+        languageButton.addEventListener('click', (e) => {
+            e.stopPropagation();
+            languageDropdown.classList.toggle('hidden');
+        });
+
         document.querySelectorAll('.language-switch').forEach(link => {
             link.addEventListener('click', (e) => {
                 e.preventDefault();
@@ -655,11 +656,18 @@ Get Started
                 i18next.changeLanguage(lang, () => {
                     document.getElementById('current-language').textContent = lang.toUpperCase();
                     updateContent();
+                    languageDropdown.classList.add('hidden');
                 });
             });
         });
 
-        // Update page content
+        // Close dropdown when clicking outside
+        document.addEventListener('click', (e) => {
+            if (!languageButton.contains(e.target) && !languageDropdown.contains(e.target)) {
+                languageDropdown.classList.add('hidden');
+            }
+        });
+// Update page content
         function updateContent() {
             // Translate all elements with data-i18n attribute
             document.querySelectorAll('[data-i18n]').forEach(el => {