diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index 7510f5d..32da1db 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -5,24 +5,26 @@ import { Logo } from '@/components/Logo'
 
 export function Hero() {
   return (
-    <section className="relative w-full lg:h-screen bg-transparent  h-[550px] lg:mt-0 mt-0">
+    <section className="relative w-full lg:h-screen bg-transparent h-[400px] sm:h-[500px] md:h-[550px] lg:mt-0 mt-0">
       {/* Background Video */}
-      <div className="absolute top-0 left-0 w-full lg:h-full h-[550px] 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"
-          className="absolute inset-0 w-full h-full object-cover"
-          frameBorder="0"
-          allow="autoplay; fullscreen; picture-in-picture"
-          style={{
-            width: '100%',
-            height: '100%',
-            minHeight: '100%',
-            minWidth: '100%',
-            objectFit: 'cover',
-            pointerEvents: 'none'
-          }}
-          title="VEDA Background Video"
-        ></iframe>
+      <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>
 
       {/* Welcome Content Overlay */}