pop-up is not looking proper. Please do it

index.html

@@ -497,25 +497,34 @@
     </div>
   </section>
   <!-- Download Modal -->
+  <!-- Download Modal -->
   <form id="send_email_to_vM_customer" action="./Ask_sendEmailToCustomer.php" method="post">
-<div id="downloadModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
-      <div class="bg-white p-8 rounded-lg max-w-md w-full mx-4 relative">
-        <button onclick="closeDownloadModal()" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700" style="cursor:pointer;">
+    <div id="downloadModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center transition-opacity duration-300 hidden">
+      <div class="bg-white p-8 rounded-lg w-full max-w-md mx-4 relative">
+        <button onclick="closeDownloadModal()" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700">
           <i data-feather="x" class="w-6 h-6"></i>
         </button>
-<h3 class="text-2xl font-bold text-[var(--vlc-navy)] mb-4">Download Resource</h3>
-        <div class="space-y-4">
-          <div class="modal-content">
-            <span class="close_modal">&times;</span>
-            <h4 class="modal-title">Enter your email to download</h4>
-            <span id="VMerror" style="display:none;color:red;">Please enter valid business email.</span>
-            <input style="width: 100%; border-radius: 5px;" name="vM_customer_email" id="vM_customer_email"
-                   type="text" placeholder="EMail*" required  autocomplete="off"/>
-            <input type="hidden" id="downloadResource" name="resource" value="">
-<input type="submit" value="Submit" id="VMask_question" class="w-full btn-primary py-3 rounded-md font-medium"/>
-            <input type="hidden" id="g-recaptcha-response-three" name="g-recaptcha-response-three">
-            <input type="hidden" name="action" value="validate_captcha_three">
+        <h3 class="text-2xl font-bold text-[var(--vlc-navy)] mb-6">Download Resource</h3>
+        <div class="space-y-6">
+          <div>
+            <label for="vM_customer_email" class="block text-sm font-medium text-gray-700 mb-1">Enter your email to download</label>
+            <span id="VMerror" class="hidden text-sm text-red-500">Please enter a valid business email</span>
+            <input 
+              name="vM_customer_email" 
+              id="vM_customer_email"
+              type="email" 
+              placeholder="Email address*" 
+              required
+              autocomplete="email"
+              class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[var(--vlc-sky)] focus:border-[var(--vlc-sky)]"
+            />
           </div>
+          <input type="hidden" id="downloadResource" name="resource" value="">
+          <button type="submit" class="w-full btn-primary py-3 rounded-md font-medium">
+            Download Now
+          </button>
+          <input type="hidden" id="g-recaptcha-response-three" name="g-recaptcha-response-three">
+          <input type="hidden" name="action" value="validate_captcha_three">
         </div>
       </div>
     </div>
@@ -582,16 +591,13 @@
       document.getElementById('downloadResource').value = resourceName;
       document.getElementById('send_email_to_vM_customer').action = actionUrl;
       document.getElementById('downloadModal').classList.remove('hidden');
-      document.body.style.overflow = 'hidden';
-      document.getElementById('downloadModal').style.display = 'flex';
+      document.body.classList.add('overflow-hidden');
     }
-function closeDownloadModal() {
-      const modal = document.getElementById('downloadModal');
-      modal.classList.add('hidden');
-      document.body.style.overflow = 'auto';
-      setTimeout(() => {
-        modal.style.display = 'none';
-      }, 300); // Match the CSS transition duration
+
+    function closeDownloadModal() {
+      document.getElementById('downloadModal').classList.add('hidden');
+      document.body.classList.remove('overflow-hidden');
+      document.getElementById('VMerror').classList.add('hidden');
     }
 // Handle form submission
     document.getElementById('send_email_to_vM_customer').addEventListener('submit', function(e) {
@@ -608,9 +614,8 @@ function closeDownloadModal() {
       this.submit();
       closeDownloadModal();
     });
-
     function validateEmail(email) {
-      const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
       return re.test(email);
     }
 // Init animations (after scripts loaded)

style.css

@@ -7,7 +7,6 @@ body {
 section {
   padding: 4rem 0;
 }
-
 .btn-primary {
   background: var(--vlc-navy);
   color: white;
@@ -15,6 +14,58 @@ section {
   border-radius: 0.375rem;
   font-weight: 500;
   transition: all 0.3s ease;
+  border: none;
+  cursor: pointer;
+  text-align: center;
+}
+
+/* Modal styles */
+#downloadModal {
+  transition: opacity 0.3s ease;
+  opacity: 0;
+  pointer-events: none;
+}
+
+#downloadModal.hidden {
+  opacity: 0;
+}
+
+#downloadModal:not(.hidden) {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+#downloadModal > div {
+  background: white;
+  padding: 2rem;
+  border-radius: 0.5rem;
+  width: 100%;
+  max-width: 28rem;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
+              0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  position: relative;
+}
+
+#downloadModal input[type="text"] {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.375rem;
+  margin-bottom: 1rem;
+  font-size: 1rem;
+}
+
+#downloadModal input[type="text"]:focus {
+  outline: none;
+  border-color: var(--vlc-sky);
+  box-shadow: 0 0 0 3px rgba(0, 160, 233, 0.1);
+}
+
+#VMerror {
+  color: #ef4444;
+  font-size: 0.875rem;
+  margin-bottom: 0.5rem;
+  display: block;
 }
 .btn-primary:hover {
   background: var(--vlc-navy-700);