diff --git a/index.html b/index.html
index fee9831..4a503f1 100644
--- a/index.html
+++ b/index.html
@@ -333,7 +333,7 @@ <h1>Meet the Developers</h1>
       <div class="contacts-container">
           <div class="contacts-map-container">
               <!-- Embed your map iframe here -->
-              <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3500.8056942573885!2d77.2294329757856!3d28.665536075646727!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd0683919c3b%3A0xf5fc331b74c2b9e2!2sIndira%20Gandhi%20Delhi%20Technical%20University%20for%20Women!5e0!3m2!1sen!2sin!4v1718804452113!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+              <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3500.8056942573885!2d77.2294329757856!3d28.665536075646727!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd0683919c3b%3A0xf5fc331b74c2b9e2!2sIndira%20Gandhi%20Delhi%20Technical%20University%20for%20Women!5e0!3m2!1sen!2sin!4v1718804452113!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" frameborder="0"></iframe>
           </div>
           <div class="contacts-contact-form-container">
               <h1>Contact Us</h1>
diff --git a/styles/contact.css b/styles/contact.css
index 09c62a5..713510f 100644
--- a/styles/contact.css
+++ b/styles/contact.css
@@ -14,15 +14,17 @@
 }
 
 .contacts-popup-things {
-    background-color: rgb(255, 234, 184);
+    background-color: var(--bgColor);
     padding: 20px;
     border-radius: 10px;
     position: relative;
-    width: 90%;
+    width: 70%;
     max-width: 1200px;
     height: 70vh;
     box-sizing: border-box;
     overflow: auto; /* Enable scrolling for large content */
+    border-radius: 20px;
+    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.752);
 }
 
 .contacts_close {
@@ -35,6 +37,7 @@
 
 .contacts-container {
     display: flex;
+    flex-direction: row;
     width: 100%;
     height: 100%;
 }
@@ -50,15 +53,16 @@
 }
 
 .contacts-contact-form-container {
-    background-color: rgb(255, 234, 184);
-    padding: 30px;
+    background-color: var(--bgColor);
+    padding: 20px 30px 10px 30px; /* Adjusted padding to add more space at the top */
     box-sizing: border-box;
+    margin-bottom: 10px; /* Added margin-bottom to create space below the form */
 }
 
 .contacts-contact-form-container h1 {
     text-align: center;
     margin-bottom: 20px;
-    color: #be0065;
+    color: var(--textColor);
 }
 
 .contacts-contact-form {
@@ -73,27 +77,45 @@
     border-radius: 10px;
     outline: none;
     background: #ffffff;
-    color: #be0065;
-    border: 2px solid #d91c81;
+    color: var(--textColor);
+    border: 2px solid var(--textColor);
     font-size: 14px;
 }
 
 .contacts-contact-form input::placeholder, .contacts-contact-form textarea::placeholder {
-    color: #be0065;
+    color: #121111;
 }
 
 .contacts-contact-form button {
     padding: 10px 40px;
     border: none;
     border-radius: 20px;
-    background-color: #be0065;
-    color: rgb(255, 238, 197);
+    background-color: var(--textColor);
+    color: var(--bgColor);
     font-size: 14px;
     cursor: pointer;
     transition: background-color 0.3s ease;
     align-self: center;
+    margin-top: 10px; /* Added margin-top to create space above the button */
 }
 
 .contacts-contact-form button:hover {
-    background-color: #c2186a;
+    background-color: var(--textColor);
+}
+
+/* Media query for small screens */
+@media (max-width: 768px) {
+    .contacts-container {
+        flex-direction: column;
+    }
+
+    .contacts-map-container {
+        order: 2; /* Map goes below the contact form */
+        width: 100%;
+    }
+
+    .contacts-contact-form-container {
+        order: 1; /* Contact form goes above the map */
+        width: 100%;
+    }
 }