the pop up for the currency exhange and the language translator dont pop up make it fit remove items if needed

index.html

@@ -85,28 +85,26 @@
                 </a>
             </div>
 <div class="flex items-center space-x-4">
-                    <div class="relative group">
+                    <div class="relative">
                         <button id="language-btn" class="flex items-center space-x-1 bg-black bg-opacity-50 px-3 py-2 rounded-lg border border-yellow-500">
                             <i data-feather="globe" class="text-yellow-500"></i>
                             <span class="text-white">EN</span>
                         </button>
-                        <div id="language-dropdown" class="absolute right-0 mt-2 w-48 bg-black border border-yellow-500 rounded-lg shadow-lg py-1 z-20 hidden">
-                            <a href="#" class="block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="en">English</a>
-                            <a href="#" class="block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="es">Español</a>
-                            <a href="#" class="block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="fr">Français</a>
-                            <a href="#" class="block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="de">Deutsch</a>
+                        <div id="language-dropdown" class="absolute right-0 mt-2 w-36 bg-black border border-yellow-500 rounded-lg shadow-lg py-1 z-20 hidden">
+                            <a href="#" class="block px-3 py-1 text-sm text-white hover:bg-yellow-500 hover:text-black" data-lang="en">English</a>
+                            <a href="#" class="block px-3 py-1 text-sm text-white hover:bg-yellow-500 hover:text-black" data-lang="es">Español</a>
+                            <a href="#" class="block px-3 py-1 text-sm text-white hover:bg-yellow-500 hover:text-black" data-lang="fr">Français</a>
                         </div>
                     </div>
-                    <div class="relative group ml-2">
+                    <div class="relative ml-2">
                         <button id="currency-btn" class="flex items-center space-x-1 bg-black bg-opacity-50 px-3 py-2 rounded-lg border border-blue-500">
                             <i data-feather="dollar-sign" class="text-blue-500"></i>
                             <span class="text-white">USD</span>
                         </button>
-                        <div id="currency-dropdown" class="absolute right-0 mt-2 w-48 bg-black border border-blue-500 rounded-lg shadow-lg py-1 z-20 hidden">
-                            <a href="#" class="block px-4 py-2 text-white hover:bg-blue-500 hover:text-black" data-currency="USD">USD ($)</a>
-                            <a href="#" class="block px-4 py-2 text-white hover:bg-blue-500 hover:text-black" data-currency="EUR">EUR (€)</a>
-                            <a href="#" class="block px-4 py-2 text-white hover:bg-blue-500 hover:text-black" data-currency="GBP">GBP (£)</a>
-                            <a href="#" class="block px-4 py-2 text-white hover:bg-blue-500 hover:text-black" data-currency="JPY">JPY (¥)</a>
+                        <div id="currency-dropdown" class="absolute right-0 mt-2 w-36 bg-black border border-blue-500 rounded-lg shadow-lg py-1 z-20 hidden">
+                            <a href="#" class="block px-3 py-1 text-sm text-white hover:bg-blue-500 hover:text-black" data-currency="USD">USD ($)</a>
+                            <a href="#" class="block px-3 py-1 text-sm text-white hover:bg-blue-500 hover:text-black" data-currency="EUR">EUR (€)</a>
+                            <a href="#" class="block px-3 py-1 text-sm text-white hover:bg-blue-500 hover:text-black" data-currency="GBP">GBP (£)</a>
                         </div>
                     </div>
                     
@@ -516,45 +514,46 @@
     </footer>
 
     <script>
-        // Dropdown Toggle Logic
-        document.getElementById('language-btn').addEventListener('click', function(e) {
+        // Simplified Dropdown Toggle Logic
+        const languageBtn = document.getElementById('language-btn');
+        const currencyBtn = document.getElementById('currency-btn');
+        const languageDropdown = document.getElementById('language-dropdown');
+        const currencyDropdown = document.getElementById('currency-dropdown');
+
+        languageBtn.addEventListener('click', (e) => {
             e.stopPropagation();
-            const dropdown = document.getElementById('language-dropdown');
-            const currencyDropdown = document.getElementById('currency-dropdown');
-            dropdown.classList.toggle('hidden');
+            languageDropdown.classList.toggle('hidden');
             currencyDropdown.classList.add('hidden');
         });
 
-        document.getElementById('currency-btn').addEventListener('click', function(e) {
+        currencyBtn.addEventListener('click', (e) => {
             e.stopPropagation();
-            const dropdown = document.getElementById('currency-dropdown');
-            const languageDropdown = document.getElementById('language-dropdown');
-            dropdown.classList.toggle('hidden');
+            currencyDropdown.classList.toggle('hidden');
             languageDropdown.classList.add('hidden');
         });
 
         // Close dropdowns when clicking outside
-        document.addEventListener('click', function() {
-            document.getElementById('language-dropdown').classList.add('hidden');
-            document.getElementById('currency-dropdown').classList.add('hidden');
+        document.addEventListener('click', () => {
+            languageDropdown.classList.add('hidden');
+            currencyDropdown.classList.add('hidden');
         });
 
-        // Language and currency change handlers
+        // Handle selections
         document.querySelectorAll('#language-dropdown a').forEach(item => {
-            item.addEventListener('click', function(e) {
+            item.addEventListener('click', (e) => {
                 e.preventDefault();
-                const lang = this.getAttribute('data-lang');
-                document.getElementById('language-btn').querySelector('span').textContent = lang.toUpperCase();
-                // Here you would add actual language change logic
+                document.querySelector('#language-btn span').textContent = 
+                    item.getAttribute('data-lang').toUpperCase();
+                languageDropdown.classList.add('hidden');
             });
         });
 
         document.querySelectorAll('#currency-dropdown a').forEach(item => {
-            item.addEventListener('click', function(e) {
+            item.addEventListener('click', (e) => {
                 e.preventDefault();
-                const currency = this.getAttribute('data-currency');
-                document.getElementById('currency-btn').querySelector('span').textContent = currency;
-                // Here you would add actual currency conversion logic
+                document.querySelector('#currency-btn span').textContent = 
+                    item.getAttribute('data-currency');
+                currencyDropdown.classList.add('hidden');
             });
         });