bring the cart to front bc its behind the website

index.html

@@ -39,8 +39,21 @@
     <!-- Vanta.js Background -->
     <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
 
+    <!-- Cart Dropdown (moved before navigation) -->
+    <div id="cart-dropdown" class="hidden absolute right-0 mt-2 w-72 bg-black border border-yellow-500 rounded-lg shadow-lg py-2 z-50">
+        <div class="px-4 py-2 text-white border-b border-gray-700">Your Cart</div>
+        <div id="cart-items" class="max-h-60 overflow-y-auto">
+            <div class="px-4 py-3 text-gray-300 text-center">Your cart is empty</div>
+        </div>
+        <div class="px-4 py-2 border-t border-gray-700">
+            <button id="checkout-btn" class="w-full bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 rounded transition disabled:opacity-50" disabled>
+                Checkout
+            </button>
+        </div>
+    </div>
+
     <!-- Navigation -->
-    <nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
+<nav class="relative z-10 bg-black bg-opacity-80 border-b border-gold-500">
         <div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">
                 <div class="flex items-center space-x-2">
@@ -58,23 +71,12 @@
                     <a href="results.html" class="text-white hover:text-yellow-500 transition">Results</a>
 </div>
                 <div class="flex items-center space-x-4">
-                    <div class="relative">
-                        <button id="cart-button" class="flex items-center space-x-1 bg-black bg-opacity-50 px-3 py-2 rounded-lg border border-yellow-500 hover:bg-yellow-500 hover:text-black transition">
-                            <i data-feather="shopping-cart" class="text-yellow-500 hover:text-black"></i>
-                            <span id="cart-count" class="text-white">0</span>
-                        </button>
-                        <div id="cart-dropdown" class="hidden absolute right-0 mt-2 w-72 bg-black border border-yellow-500 rounded-lg shadow-lg py-2 z-20">
-                            <div class="px-4 py-2 text-white border-b border-gray-700">Your Cart</div>
-                            <div id="cart-items" class="max-h-60 overflow-y-auto">
-                                <div class="px-4 py-3 text-gray-300 text-center">Your cart is empty</div>
-                            </div>
-                            <div class="px-4 py-2 border-t border-gray-700">
-                                <button id="checkout-btn" class="w-full bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 rounded transition disabled:opacity-50" disabled>
-                                    Checkout
-                                </button>
-                            </div>
-                        </div>
-                    </div>
+                        <div class="relative">
+                            <button id="cart-button" class="flex items-center space-x-1 bg-black bg-opacity-50 px-3 py-2 rounded-lg border border-yellow-500 hover:bg-yellow-500 hover:text-black transition">
+                                <i data-feather="shopping-cart" class="text-yellow-500 hover:text-black"></i>
+                                <span id="cart-count" class="text-white">0</span>
+                            </button>
+</div>
                     <div class="relative group">
                         <button 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>