diff --git a/app/page.tsx b/app/page.tsx
index ea4293e..0023429 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -188,7 +188,9 @@ export default function ShahiKitchenHomepage() {
       <section className="relative min-h-[70dvh] sm:min-h-[78dvh] md:min-h-[85dvh] lg:min-h-[92dvh] xl:min-h-[100dvh] 
                           flex items-center justify-center pt-40 sm:pt-44 md:pt-52 lg:pt-[200px] xl:pt-[220px] overflow-hidden bg-[#fbf7ef]">
         
-        {/* Banner Video - Optimized positioning per device */}
+        {/* Banner Video - Responsive sources for proper mobile/iPad visualization (portrait asset) + desktop (landscape).
+           Mobile/iPad (<=1024px) uses the compressed banner_mobile-optimized versions (WebM primary for size/speed, MP4 fallback).
+           These were generated from the provided banner_mobile.mp4 (original kept as source asset). */}
         <video
           autoPlay
           muted
@@ -199,7 +201,18 @@ export default function ShahiKitchenHomepage() {
                      lg:object-[50%_20%] xl:object-[50%_24%]"
           onError={(e) => console.error('Hero banner video failed to load', e)}
         >
-          {/* Using the compressed banner1.mp4 from images/logo as intended for the hero */}
+          {/* Mobile + iPad (portrait-friendly framing for better visualization on small screens) */}
+          <source 
+            src="/images/logo/banner_mobile-optimized.webm" 
+            type="video/webm" 
+            media="(max-width: 1024px)" 
+          />
+          <source 
+            src="/images/logo/banner_mobile-optimized.mp4" 
+            type="video/mp4" 
+            media="(max-width: 1024px)" 
+          />
+          {/* Desktop / large screens */}
           <source src="/images/logo/banner1.mp4" type="video/mp4" />
         </video>
 
diff --git a/public/images/logo/banner_mobile-optimized.mp4 b/public/images/logo/banner_mobile-optimized.mp4
new file mode 100644
index 0000000..19b34b7
Binary files /dev/null and b/public/images/logo/banner_mobile-optimized.mp4 differ
diff --git a/public/images/logo/banner_mobile-optimized.webm b/public/images/logo/banner_mobile-optimized.webm
new file mode 100644
index 0000000..f7c5879
Binary files /dev/null and b/public/images/logo/banner_mobile-optimized.webm differ
diff --git a/public/images/logo/banner_mobile.mp4 b/public/images/logo/banner_mobile.mp4
new file mode 100644
index 0000000..049f5dc
Binary files /dev/null and b/public/images/logo/banner_mobile.mp4 differ