Update static/index.css

static/index.css

@@ -11,10 +11,38 @@ body {
   min-height: 100vh;      /* at least 80% viewport height */
   padding: 40px 0;  
    border-radius: 10px;
-  background-image:url('https://cdn-uploads.huggingface.co/production/uploads/68c9040752743c0e389c6079/3Bwo1Og_FLJVaDbXqihW8.gif');
-  background-size:cover;background-position:center;color:white ;  background-repeat: no-repeat; border-radius:10px;
 }
-
+/* Video background with fallback */
+    .video-container {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: -2;
+      overflow: hidden;
+    }
+    #backgroundVideo {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      min-width: 100%;
+      min-height: 100%;
+      width: auto;
+      height: auto;
+      transform: translateX(-50%) translateY(-50%);
+      object-fit: cover;
+    }
+    /* Fallback gradient overlay */
+    .video-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.4);
+      z-index: -1;
+    }
 button-group {
       display: flex;
       gap: 12px;