fix

src/components/Hero.jsx

@@ -5,26 +5,24 @@ import { Logo } from '@/components/Logo'
 
 export function Hero() {
   return (
-    <section className="relative w-full lg:h-screen bg-transparent h-[400px] sm:h-[500px] md:h-[550px] lg:mt-0 mt-0">
+    <section className="relative w-full lg:h-screen bg-transparent h-[550px] lg:mt-0 mt-0">
       {/* Background Video */}
-      <div className="absolute top-0 left-0 w-full h-full overflow-hidden z-0 bg-[#FEFFF6] opacity-30">
-        <div className="relative w-full h-full">
-          <iframe
-            src="https://player.vimeo.com/video/1112045863?autoplay=1&loop=1&muted=1&controls=0&background=1&quality=auto&responsive=1"
-            className="absolute top-0 left-0 w-full h-full border-0"
-            allow="autoplay; fullscreen; picture-in-picture"
-            style={{
-              width: '100%',
-              height: '100%',
-              minHeight: '100%',
-              minWidth: '100%',
-              objectFit: 'cover',
-              pointerEvents: 'none',
-              border: 'none'
-            }}
-            title="VEDA Background Video"
-          ></iframe>
-        </div>
+      <div className="absolute inset-0 w-full h-full overflow-hidden z-0 bg-[#FEFFF6] opacity-30">
+        <iframe
+          src="https://player.vimeo.com/video/1112045863?autoplay=1&loop=1&muted=1&controls=0&background=1&quality=auto&responsive=1"
+          className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-0"
+          allow="autoplay; fullscreen; picture-in-picture"
+          style={{
+            width: '300%',
+            height: '300%',
+            minWidth: '100vw',
+            minHeight: '100vh',
+            objectFit: 'cover',
+            pointerEvents: 'none',
+            border: 'none'
+          }}
+          title="VEDA Background Video"
+        ></iframe>
       </div>
 
       {/* Welcome Content Overlay */}