Manual changes saved

index.html

@@ -368,29 +368,31 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
 <form id="send_email_to_customer" action="./tool_management.php" method="post" novalidate>
   <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">
   <input type="hidden" name="action" value="validate_captcha">
+
   <div id="cta-modal"
-       class="fixed inset-0 z-[999] hidden flex items-center justify-center p-4"
+       class="fixed inset-0 z-[999] hidden"
        role="dialog" aria-modal="true" aria-labelledby="cta-modal-title">
     <!-- Backdrop -->
     <div class="absolute inset-0 bg-black/60"></div>
 
     <!-- Panel -->
-    <div class="relative w-full max-w-md">
-      <div class="bg-white rounded-2xl shadow-2xl border border-[rgba(0,32,96,.08)] overflow-hidden">
-        <!-- Close button -->
-        <button type="button" id="cta-close"
-                class="absolute -top-3 -right-3 bg-white rounded-full p-2 shadow-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-[var(--vlc-sky)] transition-all"
-                aria-label="Close">
-          <i data-feather="x" class="w-5 h-5 text-[var(--vlc-navy)]"></i>
-        </button>
-
+    <div class="relative h-full w-full flex items-center justify-center p-4">
+      <div class="w-full max-w-md bg-white rounded-2xl shadow-2xl border border-[rgba(0,32,96,.08)] overflow-hidden">
         <div class="bg-[var(--vlc-navy)] text-white px-5 py-4">
-          <h4 id="cta-modal-title" class="text-lg font-semibold">
-            Enter your business email to download
-          </h4>
+          <div class="flex items-center justify-between">
+            <h4 id="cta-modal-title" class="text-lg font-semibold">
+              Enter your business email to download
+            </h4>
+            <button type="button" id="cta-close"
+                    class="p-1 rounded-md hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white/50"
+                    aria-label="Close">
+              <i data-feather="x" class="w-5 h-5" aria-hidden="true"></i>
+            </button>
+          </div>
         </div>
-        <div class="p-6 space-y-4 relative">
-<p id="cta-error" class="hidden text-sm text-red-600">
+
+        <div class="p-6 space-y-4">
+          <p id="cta-error" class="hidden text-sm text-red-600">
             Please use a valid business email (not a personal domain).
           </p>
 
@@ -473,6 +475,7 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
     border: 1px solid #d1d5db;
   }
 </style>
+
 <script>
   // --- YouTube Video Modal ---
   (function() {
@@ -480,17 +483,17 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
     youtubeModal.id = 'youtube-modal';
     youtubeModal.className = 'fixed inset-0 z-[1000] hidden items-center justify-center bg-black/80 p-4';
     youtubeModal.innerHTML = `
-      <div class="relative w-full max-w-4xl h-[90vh]">
-        <button id="youtube-close" class="absolute -top-12 right-0 text-white hover:text-[var(--vlc-leaf)]">
+      <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>
-          <span class="sr-only">Close video</span>
         </button>
-        <div class="w-full h-full bg-black rounded-lg overflow-hidden">
+        <div class="aspect-w-16 aspect-h-9 bg-black">
           <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>
     `;
-document.body.appendChild(youtubeModal);
+    document.body.appendChild(youtubeModal);
+
     const openBtn = document.getElementById('youtube-open-modal');
     const closeBtn = document.getElementById('youtube-close');
 
@@ -498,51 +501,25 @@ document.body.appendChild(youtubeModal);
       youtubeModal.classList.remove('hidden');
       document.getElementById('youtube-iframe').src = 'https://www.youtube.com/embed/zAiME9H0EVQ?autoplay=1';
       document.body.style.overflow = 'hidden';
-      document.documentElement.style.overflow = 'hidden';
     }
 
     function closeModal() {
       youtubeModal.classList.add('hidden');
       document.getElementById('youtube-iframe').src = '';
       document.body.style.overflow = '';
-      document.documentElement.style.overflow = '';
     }
 
     openBtn.addEventListener('click', openModal);
     closeBtn.addEventListener('click', closeModal);
-    
-    // Close when clicking outside the video
     youtubeModal.addEventListener('click', (e) => {
       if (e.target === youtubeModal) closeModal();
     });
-    
-    // Close with ESC key
     document.addEventListener('keydown', (e) => {
       if (e.key === 'Escape' && !youtubeModal.classList.contains('hidden')) {
         closeModal();
       }
     });
-
-    // Add close button styles
-    const style = document.createElement('style');
-    style.textContent = `
-      #youtube-close {
-        transition: transform 0.2s ease, color 0.2s ease;
-      }
-      #youtube-close:hover {
-        transform: scale(1.1);
-        color: var(--vlc-leaf);
-      }
-      #youtube-close:focus {
-        outline: 2px solid var(--vlc-leaf);
-        outline-offset: 2px;
-      }
-      #youtube-modal {
-        transition: opacity 0.3s ease;
-      }
-    `;
-    document.head.appendChild(style);
-})();
+  })();
 
   // --- CTA Modal controls ---
 (function () {