Give each Progressive Jackpots pills a different color and animation

index.html

@@ -305,23 +305,32 @@
             0%, 100% { transform: translateY(0) scale(1); }
             50% { transform: translateY(-3px) scale(1.1); }
         }
-        
         @keyframes float-1 {
             0%, 100% { transform: translate(0, 0); }
-            50% { transform: translate(10px, 15px); }
+            50% { transform: translate(0, -10px); }
         }
         
         @keyframes float-2 {
             0%, 100% { transform: translate(0, 0); }
-            50% { transform: translate(-5px, 10px); }
+            50% { transform: translate(0, -8px) rotate(3deg); }
         }
         
         @keyframes float-3 {
             0%, 100% { transform: translate(0, 0); }
-            50% { transform: translate(7px, 5px); }
+            50% { transform: translate(0, -12px) scale(1.05); }
         }
-        
-        .animate-spin {
+
+        @keyframes spin-slow {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        @keyframes magnify {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.3); }
+            100% { transform: scale(1); }
+        }
+.animate-spin {
             animation: spin 4s linear infinite;
         }
         
@@ -448,37 +457,43 @@
     <main class="ml-16 pt-24 pb-28 px-4 relative">
         <!-- Progressive Jackpots - Modern Pill Style -->
         <div class="flex justify-center space-x-2 mb-4">
-            <div class="glass-panel px-4 py-1 rounded-full relative overflow-hidden group hover:shadow-glow transition-all duration-300">
-                <div class="flex flex-col items-center">
-                    <div class="text-xs uppercase font-medium text-gray-400 group-hover:text-niogold transition-colors">Minor</div>
-                    <div class="text-sm font-bold text-niogold flex items-center">
-                        <i class="fas fa-arrow-up text-green-400 text-xs mr-1 animate-bounce"></i>
-                        <span>$12,345</span>
+            <!-- Minor Jackpot - Green Theme -->
+            <div class="glass-panel px-4 py-1 rounded-full relative overflow-hidden group hover:shadow-glow transition-all duration-300 animate-[float-1_4s_ease-in-out_infinite]">
+                <div class="absolute inset-0 bg-gradient-to-br from-emerald-500/20 to-emerald-800/10 opacity-30"></div>
+                <div class="flex flex-col items-center relative z-10">
+                    <div class="text-xs uppercase font-medium text-gray-400 group-hover:text-emerald-300 transition-colors">Minor</div>
+                    <div class="text-sm font-bold text-emerald-300 flex items-center">
+                        <i class="fas fa-leaf text-emerald-300 text-xs mr-1 animate-[spin-slow_5s_linear_infinite]"></i>
+                        <span class="animate-[pulseGlow_2s_ease-in-out_infinite]">$12,345</span>
                     </div>
                 </div>
-                <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-green-400/20 to-transparent"></div>
+                <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-emerald-300/80 to-transparent"></div>
             </div>
             
-            <div class="glass-panel px-4 py-1 rounded-full relative overflow-hidden group hover:shadow-glow transition-all duration-300">
-                <div class="flex flex-col items-center">
-                    <div class="text-xs uppercase font-medium text-gray-400 group-hover:text-niogold transition-colors">Major</div>
-                    <div class="text-sm font-bold text-niogold flex items-center">
-                        <i class="fas fa-bolt text-yellow-400 text-xs mr-1 animate-pulse"></i>
-                        <span>$98,765</span>
+            <!-- Major Jackpot - Blue Theme -->
+            <div class="glass-panel px-4 py-1 rounded-full relative overflow-hidden group hover:shadow-glow transition-all duration-300 animate-[float-2_4s_ease-in-out_infinite]">
+                <div class="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-blue-800/10 opacity-30"></div>
+                <div class="flex flex-col items-center relative z-10">
+                    <div class="text-xs uppercase font-medium text-gray-400 group-hover:text-blue-300 transition-colors">Major</div>
+                    <div class="text-sm font-bold text-blue-300 flex items-center">
+                        <i class="fas fa-bolt text-blue-300 text-xs mr-1 animate-[magnify_1.5s_ease-in-out_infinite]"></i>
+                        <span class="animate-[pulseGlow_1.5s_ease-in-out_infinite]">$98,765</span>
                     </div>
                 </div>
-                <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-yellow-400/20 to-transparent"></div>
+                <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-300/80 to-transparent"></div>
             </div>
             
-            <div class="glass-panel px-4 py-1 rounded-full relative overflow-hidden group hover:shadow-glow transition-all duration-300">
-                <div class="flex flex-col items-center">
-                    <div class="text-xs uppercase font-medium text-gray-400 group-hover:text-niogold transition-colors">Grand</div>
-                    <div class="text-sm font-bold text-niogold flex items-center">
-                        <i class="fas fa-fire text-red-400 text-xs mr-1 animate-pulse"></i>
-                        <span>$1.2M</span>
+            <!-- Grand Jackpot - Gold Theme -->
+            <div class="glass-panel px-4 py-1 rounded-full relative overflow-hidden group hover:shadow-glow transition-all duration-300 animate-[float-3_4s_ease-in-out_infinite]">
+                <div class="absolute inset-0 bg-gradient-to-br from-amber-500/20 to-yellow-800/10 opacity-30"></div>
+                <div class="flex flex-col items-center relative z-10">
+                    <div class="text-xs uppercase font-medium text-gray-400 group-hover:text-amber-300 transition-colors">Grand</div>
+                    <div class="text-sm font-bold text-amber-300 flex items-center">
+                        <i class="fas fa-crown text-amber-300 text-xs mr-1 animate-[iconBounce_1s_ease-in-out_infinite]"></i>
+                        <span class="animate-[pulseGlow_1s_ease-in-out_infinite]">$1.2M</span>
                     </div>
                 </div>
-                <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-red-400/20 to-transparent"></div>
+                <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-amber-300/80 to-transparent"></div>
             </div>
         </div>
 <!-- Hero Banner -->