updated the minor change

assets/img/x-mark.svg

+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.5977 9.40039L9.39833 22.5997" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.40234 9.40039L22.6017 22.5997" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

dev/sass/base/_global.scss

@@ -138,14 +138,57 @@ button {
 	}
 }
 
-// .download-popup {
-// 	position: fixed;
-// 	top: 80px;
-// 	bottom: 64px;
-// 	left: 50%;
-// 	transform: translateX(-50%);
-// 	background-color: $white;
-// }
+.custom-overlay {
+	position: fixed;
+	inset: 0;
+	z-index: 112;
+	background-color: rgba(0, 0, 0, 0.6);
+}
+
+.download-popup {
+	position: fixed;
+	top: 80px;
+	bottom: 20px;
+	left: 50%;
+	transform: translateX(-50%);
+	background-color: $white;
+	z-index: 113;
+	min-width: 1058px;
+	display: grid;
+	place-items: center;
+
+	button {
+		background-color: transparent;
+		outline: none;
+		border: none;
+	}
+
+	.section-title {
+		position: relative;
+		padding: 48px 48px 0;
+
+		button {
+			position: absolute;
+			top: 24px;
+			right: 16px;
+		}
+	}
+
+	.form-content-box {
+		padding: 0 48px 48px;
+	}
+}
+.custom-overlay,
+.download-popup {
+	opacity: 0;
+	visibility: hidden;
+	transition: all 0.3s ease-in-out;
+
+	&.active {
+		opacity: 1;
+		visibility: visible;
+	}
+}
 
 @media (max-width: 767px) {
 	.section-title {
@@ -158,4 +201,35 @@ button {
 	.input-field {
 		margin-bottom: 24px;
 	}
+
+	.download-popup {
+		.section-title {
+			button {
+				position: unset;
+				min-width: 48px;
+			}
+		}
+	}
+}
+
+@media (max-width: 1199px) {
+	.download-popup {
+		min-width: 90%;
+		bottom: 24px;
+
+		.section-title {
+			position: relative;
+			padding: 24px 16px 0;
+		}
+
+		.dp-content-box {
+			height: calc(100vh - 24px);
+		}
+
+		.form-content-box {
+			max-height: calc(100% - 140px);
+			overflow: auto;
+			padding: 0 16px 24px;
+		}
+	}
 }

footer.php

@@ -248,13 +248,19 @@
 
 <div class="download-popup">
   <div class="dp-content-box">
-    <div class="form-content-box">
-      <div class="top-title section-title">
+    <div class="top-title section-title d-flex justify-content-between align-items-start">
+      <div class="title">
         <h2>Get Your Free SEO Audit Delivered to Your Inbox</h2>
-        <p>Fill out the form, and we'll send you a detailed SEO audit directly to your email, helping you improve your
+        <p class="d-none d-md-block">Fill out the form, and we'll send you a detailed SEO audit directly to your email,
+          helping you improve your
           website's performance.
         </p>
       </div>
+      <button type="button" class="close-download-popup">
+        <img src="<?php echo get_parent_theme_file_uri()?>/assets/img/x-mark.svg" alt="">
+      </button>
+    </div>
+    <div class="form-content-box">
       <div class="row">
         <div class="col-sm-6">
           <div class="input-field">
@@ -271,7 +277,7 @@
         <div class="col-sm-6">
           <div class="input-field">
             <label>Enter your Email Address</label>
-            <input type="text" placeholder="Enter your Enter your Email Address ">
+            <input type="text" placeholder="Enter your Email Address ">
           </div>
         </div>
         <div class="col-sm-6">
@@ -288,7 +294,7 @@
         </div>
       </div>
       <div class="submit-field ">
-        <input type="submit" value="Analyze">
+        <input type="submit" value="Submit">
         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path fill-rule="evenodd" clip-rule="evenodd"
             d="M-6.11959e-07 9L12.17 9L6.58 14.59L8 16L16 8L8 6.99382e-07L6.59 1.41L12.17 7L-7.86805e-07 7L-6.11959e-07 9Z"
@@ -298,6 +304,7 @@
     </div>
   </div>
 </div>
+<a href="#" class="custom-overlay"></a>
 
 <?php wp_footer() ?>
 

template-parts/site-comparison/comparison-form.php

@@ -26,5 +26,13 @@
           fill="white" />
       </svg>
     </div>
+    <div class="submit-field download-seo-audit">
+      <input type="submit" value="Experimental Download">
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M-6.11959e-07 9L12.17 9L6.58 14.59L8 16L16 8L8 6.99382e-07L6.59 1.41L12.17 7L-7.86805e-07 7L-6.11959e-07 9Z"
+          fill="white" />
+      </svg>
+    </div>
   </div>
 </section>
\ No newline at end of file