bring the taskbar at the bottom to the forefront of the app.

remove the hover animations from the containers that makes them tilt diagonally on all pages.

charts.html

@@ -71,7 +71,7 @@
             transition: all 0.3s ease;
         }
         .chart-item:hover {
-            transform: translateX(5px);
+            transform: translateY(-5px);
             box-shadow: 0 5px 15px rgba(0, 255, 255, 0.2);
         }
 </style>
@@ -259,9 +259,8 @@
             </div>
         </main>
     </div>
-
-    <!-- Bottom Navigation -->
-        <div class="fixed bottom-0 left-0 right-0 bg-primary/80 border-t border-secondary/20 backdrop-blur-lg">
+        <!-- Bottom Navigation -->
+        <div class="fixed bottom-0 left-0 right-0 bg-primary/80 border-t border-secondary/20 backdrop-blur-lg z-50">
 <div class="container mx-auto px-4 py-3">
             <div class="flex justify-around">
                 <a href="index.html" class="flex flex-col items-center opacity-70 hover:opacity-100">

explore.html

@@ -52,10 +52,10 @@
             transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
         }
         .explore-card:hover {
-            transform: translateY(-5px) rotate(1deg);
+            transform: translateY(-5px);
             box-shadow: 0 10px 25px rgba(0, 255, 255, 0.3);
         }
-        @keyframes pulse {
+@keyframes pulse {
             0% { opacity: 0.8; }
             100% { opacity: 1; }
         }
@@ -221,9 +221,8 @@
             </div>
         </main>
     </div>
-
-    <!-- Bottom Navigation -->
-        <div class="fixed bottom-0 left-0 right-0 bg-primary/80 border-t border-secondary/20 backdrop-blur-lg">
+        <!-- Bottom Navigation -->
+        <div class="fixed bottom-0 left-0 right-0 bg-primary/80 border-t border-secondary/20 backdrop-blur-lg z-50">
 <div class="container mx-auto px-4 py-3">
             <div class="flex justify-around">
                 <a href="index.html" class="flex flex-col items-center opacity-70 hover:opacity-100">

index.html

@@ -59,7 +59,7 @@
             transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
         .card-hover:hover {
-            transform: translateY(-5px) rotate(1deg);
+            transform: translateY(-5px);
             box-shadow: 0 10px 25px rgba(0, 255, 255, 0.2);
         }
 </style>
@@ -244,9 +244,8 @@
                 </div>
             </div>
         </main>
-
         <!-- Bottom Navigation -->
-        <div class="fixed bottom-0 left-0 right-0 bg-primary/80 border-t border-secondary/20 backdrop-blur-lg">
+        <div class="fixed bottom-0 left-0 right-0 bg-primary/80 border-t border-secondary/20 backdrop-blur-lg z-50">
 <div class="container mx-auto px-4 py-3">
                 <div class="flex justify-around">
                     <a href="#" class="flex flex-col items-center text-secondary">

profile.html

@@ -55,8 +55,9 @@
         .vault-item:hover {
             background: linear-gradient(90deg, rgba(30, 30, 30, 0.6), rgba(30, 30, 30, 0.8));
             box-shadow: 0 0 10px rgba(127, 255, 212, 0.2);
+            transform: translateY(-2px);
         }
-        @keyframes pulse {
+@keyframes pulse {
             0% { opacity: 0.8; }
             100% { opacity: 1; }
         }
@@ -268,9 +269,8 @@
             </div>
         </div>
     </div>
-
-    <!-- Bottom Navigation -->
-        <div class="fixed bottom-0 left-0 right-0 bg-primary/80 border-t border-secondary/20 backdrop-blur-lg">
+        <!-- Bottom Navigation -->
+        <div class="fixed bottom-0 left-0 right-0 bg-primary/80 border-t border-secondary/20 backdrop-blur-lg z-50">
 <div class="container mx-auto px-4 py-3">
             <div class="flex justify-around">
                 <a href="index.html" class="flex flex-col items-center opacity-70 hover:opacity-100">