can you change the landing page into this vedio

index.html

@@ -22,11 +22,24 @@
             pointer-events: none;
         }
         .hero-background {
-            background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
-                     url('https://huggingface.co/spaces/mithunparambath/quantumcraft-nanosystems/resolve/main/images/the-world-of-the-semiconductor-cleanroom.jpg');
-            background-size: cover;
-            background-position: center;
-            background-attachment: fixed;
+            position: relative;
+            overflow: hidden;
+        }
+        .hero-video {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .video-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
         }
         .grid-pattern {
             background-image: linear-gradient(rgba(255,102,0,0.05) 1px, transparent 1px),
@@ -39,7 +52,12 @@
 <custom-navbar></custom-navbar>
 <!-- Hero Section -->
     <section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden hero-background">
-<div class="atom-animation" id="atomCanvas"></div>
+        <video class="hero-video" autoplay muted loop playsinline>
+            <source src="https://huggingface.co/spaces/mithunparambath/quantumcraft-nanosystems/resolve/main/videos/Untitled design.mp4" type="video/mp4">
+            Your browser does not support the video tag.
+        </video>
+        <div class="video-overlay"></div>
+        <div class="atom-animation" id="atomCanvas"></div>
         <div class="relative z-20 text-center px-4 max-w-6xl mx-auto">
             <h1 class="text-5xl md:text-7xl font-bold mb-6 text-white">
                 Enabling Next-Generation<br>Semiconductor Innovation
@@ -57,7 +75,7 @@
             </div>
         </div>
     </section>
-    <!-- About Section -->
+<!-- About Section -->
     <section id="about" class="py-20 px-4 bg-gray-50">
         <div class="max-w-6xl mx-auto">
             <div class="text-center mb-16">