Manual changes saved

index.html

@@ -20,6 +20,19 @@
         }
     </script>
     <style>
+
+        .videoWrapper {
+        position: relative;
+        padding-bottom: 56.25%; /* 16:9 */
+        height: 0;
+        }
+        .videoWrapper iframe {
+        position: absolute;
+        top: 0;
+        left: 10%;
+        width: 80%;
+        height: 80%;
+        }
         .hero-gradient {
             background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
         }
@@ -137,11 +150,11 @@
             </div>
         </div>
     </div>
-    <div id="features" class="max-w-7xl mx-auto p-8">
-        <div class="aspect-w-16 aspect-h-9">
-            <iframe class="w-full h-full" src="https://www.youtube.com/embed/HhVD-wYJ-i0?si=oxsBgdY9TgA2SeBm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-        </div>
+
+    <div class="videoWrapper">
+            <iframe width="1280" height="720" src="https://www.youtube.com/embed/HhVD-wYJ-i0?si=oxsBgdY9TgA2SeBm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
     </div>
+
 <!-- Features Section -->
     <div id="features" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
         <div class="text-center">