Apply a pop-up to youtube section

index.html

@@ -378,15 +378,25 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
         <i data-feather="shopping-bag" class="w-5 h-5" aria-hidden="true"></i>
         <span>View VLC IM ON APP SOURCE</span>
       </a>
-
       <!-- YouTube -->
-      <a href="https://www.youtube.com/watch?v=0O5oZfmJ5AQ" rel="noopener"
+      <button id="youtube-popup-button"
          class="cta-btn flex-1 inline-flex items-center justify-center gap-2 rounded-lg px-4 py-3 text-sm md:text-base font-semibold border border-white/20 bg-white/10 transition focus:outline-none focus:ring-2 focus:ring-white/50">
         <i data-feather="play-circle" class="w-5 h-5" aria-hidden="true"></i>
         <span>Watch it in action</span>
-      </a>
+      </button>
 
-    </div>
+      <!-- YouTube Popup -->
+      <div id="youtube-popup" class="fixed inset-0 z-[1000] hidden flex items-center justify-center bg-black/80">
+        <div class="relative w-full max-w-4xl">
+          <button id="youtube-close" class="absolute -top-10 right-0 text-white hover:text-[var(--vlc-leaf)]">
+            <i data-feather="x" class="w-8 h-8"></i>
+          </button>
+          <div class="aspect-w-16 aspect-h-9">
+            <iframe id="youtube-iframe" class="w-full h-full" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+          </div>
+        </div>
+      </div>
+</div>
   </div>
 </section>
 
@@ -721,11 +731,39 @@ Request Demo
       </div>
     </div>
   </footer>
+<script>
+  // YouTube Popup functionality
+  (function() {
+    const popupButton = document.getElementById('youtube-popup-button');
+    const popup = document.getElementById('youtube-popup');
+    const closeButton = document.getElementById('youtube-close');
+    const iframe = document.getElementById('youtube-iframe');
+
+    if (!popupButton || !popup) return;
+
+    popupButton.addEventListener('click', () => {
+      iframe.src = 'https://www.youtube.com/embed/0O5oZfmJ5AQ?autoplay=1';
+      popup.classList.remove('hidden');
+      document.body.style.overflow = 'hidden';
+    });
+
+    closeButton.addEventListener('click', () => {
+      iframe.src = '';
+      popup.classList.add('hidden');
+      document.body.style.overflow = '';
+    });
 
+    popup.addEventListener('click', (e) => {
+      if (e.target === popup) {
+        iframe.src = '';
+        popup.classList.add('hidden');
+        document.body.style.overflow = '';
+      }
+    });
+  })();
 
-<script> 
   // Init animations and handle mobile menu functionality after scripts loaded
-  document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', () => {
     // Initialize AOS (Animation On Scroll)
     if (window.AOS) {
       AOS.init({

style.css

@@ -1,4 +1,27 @@
 
+/* YouTube Popup */
+#youtube-popup {
+  transition: opacity 0.3s ease;
+}
+#youtube-popup iframe {
+  min-height: 400px;
+}
+
+@media (max-width: 1024px) {
+  #youtube-popup iframe {
+    min-height: 300px;
+  }
+}
+
+@media (max-width: 640px) {
+  #youtube-popup iframe {
+    min-height: 200px;
+  }
+  #youtube-close {
+    top: -50px;
+  }
+}
+
 /* Mobile menu styles */
 @media (max-width: 767px) {
   body {