Download Now add popup

index.html

@@ -557,8 +557,29 @@
         Download Now
       </button>
       
-      <form id="send_email_to_customer" action="./HP_Dell_and_IBM_Managed_NOC.php" method="post" class="hidden mt-8 bg-white p-8 rounded-xl shadow-md max-w-md mx-auto">
-        <div class="modal-content">
+      <!-- Download Modal -->
+      <div id="downloadModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white p-8 rounded-xl shadow-xl max-w-md w-full mx-4">
+          <div class="flex justify-between items-center mb-4">
+            <h3 class="text-xl font-bold text-[var(--vlc-navy)]">Download Resource</h3>
+            <button id="closeModal" class="text-gray-500 hover:text-gray-700">
+              <i data-feather="x"></i>
+            </button>
+          </div>
+          <form id="send_email_to_customer" action="./HP_Dell_and_IBM_Managed_NOC.php" method="post">
+            <div class="modal-content">
+              <h4 class="modal-title text-lg font-semibold text-[var(--vlc-navy)] mb-4">Enter your email to download</h4>
+              <span id="error" class="hidden text-red-500 text-sm mb-2">Please enter valid business email.</span>
+              <input class="w-full px-4 py-2 border border-gray-300 rounded-md mb-4 focus:outline-none focus:ring-2 focus:ring-[var(--vlc-leaf)]" 
+                     name="customer_email" id="customer_email" type="email" placeholder="Business Email *" required autocomplete="off"/>
+              <input type="submit" value="Submit" id="distribution_btn" class="btn-primary w-full py-2 rounded-md font-bold"/>
+              <input type="hidden" id="g-recaptcha-response-two" name="g-recaptcha-response-two">
+              <input type="hidden" name="action" value="validate_captcha_two">
+            </div>
+          </form>
+        </div>
+      </div>
+<div class="modal-content">
           <h4 class="modal-title text-xl font-bold text-[var(--vlc-navy)] mb-4">Enter your email to download</h4>
           <span id="error" class="hidden text-red-500 text-sm mb-2">Please enter valid business email.</span>
           <input class="w-full px-4 py-2 border border-gray-300 rounded-md mb-4 focus:outline-none focus:ring-2 focus:ring-[var(--vlc-leaf)]" 

style.css

@@ -27,10 +27,37 @@ body {
   font-weight: bold;
   cursor: pointer;
 }
-
 .close_modal:hover {
   color: var(--vlc-leaf);
 }
+
+/* Modal styles */
+#downloadModal {
+  transition: opacity 0.3s ease;
+}
+
+#downloadModal .bg-white {
+  animation: modalFadeIn 0.3s ease-out;
+}
+
+@keyframes modalFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+#closeModal {
+  transition: color 0.2s ease;
+}
+
+#closeModal:hover {
+  color: var(--vlc-navy);
+}
 h1 {
 	font-size: 16px;
 	margin-top: 0;