add foam cannon foam dripping behind boxes - Follow Up Deployment

index.html

@@ -56,6 +56,34 @@
             transform: translateY(-10px);
             box-shadow: 0 20px 25px -5px rgba(181, 48, 255, 0.3), 0 10px 10px -5px rgba(181, 48, 255, 0.1);
         }
+
+        .service-card::after {
+            content: '';
+            position: absolute;
+            bottom: -20px;
+            left: 20px;
+            width: 60%;
+            height: 30px;
+            background: linear-gradient(to right, rgba(255,255,255,0.8), rgba(255,255,255,0));
+            border-radius: 50%;
+            filter: blur(5px);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .service-card:hover::after {
+            opacity: 0.7;
+            animation: foamDrip 2s ease-in-out infinite;
+        }
+
+        @keyframes foamDrip {
+            0%, 100% {
+                transform: translateY(0) scaleX(0.9);
+            }
+            50% {
+                transform: translateY(5px) scaleX(1);
+            }
+        }
         
         .gallery-item:hover {
             transform: scale(1.05);
@@ -265,7 +293,7 @@
             
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                 <!-- Basic Package -->
-                <div class="service-card bg-gray-700 rounded-xl overflow-hidden shadow-lg transition duration-500 cursor-pointer border border-gray-600 hover:border-purple-500">
+                <div class="service-card bg-gray-700 rounded-xl overflow-hidden shadow-lg transition duration-500 cursor-pointer border border-gray-600 hover:border-purple-500 relative">
                     <div class="bg-gradient-to-r from-purple-600 to-pink-600 text-white py-8 px-6 text-center relative">
                         <h3 class="text-2xl font-bold mb-2">Jay's Basic</h3>
                         <p class="text-xl">Small Car: $70 | SUV: $80</p>
@@ -400,7 +428,7 @@
                 </div>
                 
                 <!-- Max Package -->
-                <div class="service-card bg-gray-700 rounded-xl overflow-hidden shadow-lg transition duration-300 cursor-pointer border border-gray-600 hover:border-purple-500">
+                <div class="service-card bg-gray-700 rounded-xl overflow-hidden shadow-lg transition duration-300 cursor-pointer border border-gray-600 hover:border-purple-500 relative">
                     <div class="bg-gradient-to-r from-purple-600 to-pink-600 text-white py-8 px-6 text-center">
                         <h3 class="text-2xl font-bold mb-2">Jay's Max</h3>
                         <p class="text-xl">Small Car: $200 | SUV: $210</p>