diff --git a/index.html b/index.html
index de235e65..7033c23a 100644
--- a/index.html
+++ b/index.html
@@ -898,6 +898,88 @@
 .subscribe:hover {
   background-color: #2980b9; }
 
+  /* Contact Us */
+  .section-contact {
+  color: black;
+  padding: 40px 20px;
+}
+
+.flexi {
+  display: flex;
+  justify-content: space-between; /* Ensure both containers are side by side */
+  flex-wrap: wrap; 
+}
+
+.contact {
+  width: 52%; /* Adjust width for the contact form */
+}
+
+.cardi {
+  width: 35%; /* Adjust width for the contact card */
+  max-width: 350px; /* Limit max width */
+  margin-left: 20px; /* Add some space between the two sections */
+}
+
+.contact-container {
+  background-color: var(--secondary-color);
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.contact-card {
+  background-color: var(--secondary-color);
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  margin-top: 20px; /* Ensure there's space above the card */
+}
+
+.map-container {
+  display: flex;
+  justify-content: center;
+  align-items: center; /* Center map inside container */
+  width: 100%;
+  height: 300px; /* Fixed height for map */
+  margin-top: 20px; /* Space above map */
+}
+.contact-form input,
+  .contact-form textarea {
+    width: 100%;
+    padding: 12px;
+    margin-bottom: 15px;
+    border: 1px solid #8f8d8d;
+    border-radius: 5px;
+    font-size: 14px;
+  }
+  .contact:hover {
+    transform: scale(1.02); /* Slightly enlarge on hover */
+  }
+
+  .cardi:hover {
+    transform: scale(1.02);
+  }
+
+
+iframe {
+  width: 100%;
+  height: 100%;
+  border: none; /* Remove border for a cleaner look */
+  border-radius: 10px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .flexi {
+    flex-direction: column; /* Stack elements on smaller screens */
+    align-items: center;
+  }
+  .contact, .cardi {
+    width: 90%; /* Ensure full width on smaller screens */
+    max-width: none; /* Remove max-width restriction */
+  }
+}
+
 
 
   </style>
@@ -1099,6 +1181,89 @@
 .nav{
   justify-content: space-around;
 }
+
+
+.section-contact {
+  color: black;
+  padding: 40px 20px;
+}
+
+.flexi {
+  display: flex;
+  justify-content: space-between; /* Ensure both containers are side by side */
+  flex-wrap: wrap; 
+}
+
+.contact {
+  width: 52%; /* Adjust width for the contact form */
+}
+
+.cardi {
+  width: 35%; /* Adjust width for the contact card */
+  max-width: 350px; /* Limit max width */
+  margin-left: 20px; /* Add some space between the two sections */
+}
+
+.contact-container {
+  background-color: var(--secondary-color);
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.contact-card {
+  background-color: var(--secondary-color);
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  margin-top: 20px; /* Ensure there's space above the card */
+}
+
+.map-container {
+  display: flex;
+  justify-content: center;
+  align-items: center; /* Center map inside container */
+  width: 100%;
+  height: 300px; /* Fixed height for map */
+  margin-top: 20px; /* Space above map */
+}
+.contact-form input,
+  .contact-form textarea {
+    width: 100%;
+    padding: 12px;
+    margin-bottom: 15px;
+    border: 1px solid #8f8d8d;
+    border-radius: 5px;
+    font-size: 14px;
+  }
+  .contact:hover {
+    transform: scale(1.02); /* Slightly enlarge on hover */
+  }
+
+  .cardi:hover {
+    transform: scale(1.02);
+  }
+
+
+iframe {
+  width: 100%;
+  height: 100%;
+  border: none; /* Remove border for a cleaner look */
+  border-radius: 10px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .flexi {
+    flex-direction: column; /* Stack elements on smaller screens */
+    align-items: center;
+  }
+  .contact, .cardi {
+    width: 90%; /* Ensure full width on smaller screens */
+    max-width: none; /* Remove max-width restriction */
+  }
+}
+
   </style>
   <script>
     document.addEventListener('DOMContentLoaded', function() {
@@ -3004,184 +3169,88 @@ <h3>Rate Us</h3>
     </div>
 
     <script src="/assets/js/rate.js"></script>
-     
-
-    
-      
 
 
+  <!-- --Contact Us -->
+                                    
 <section class="section-contact" id="contact" aria-label="contact">
-      
-<h1 class="ctc">CONTACT US!</h1>
-<p class="p">Have a Question?</p>
-
-<div class="flexi">
-  <div class="contact">
-    <h3 style="text-align: left; color: #A30F17;" class="g_i_t">Get in touch</h3>
-    <div class="contact-container">
-      <form class="contact-form" id="contactForm">
-        <label for="name">Name</label>
-        <input type="text" id="name" name="name" placeholder="Your Name" required>
-
-        <label for="email">Email</label>
-        <input type="email" id="email" name="email" placeholder="your-email@example.com" required>
-
-        <label for="subject">Subject</label>
-        <input type="text" id="subject" name="subject" placeholder="Subject" required>
-        <label for="message">Message</label>
-        <textarea id="message" name="message" placeholder="Your Message" required></textarea>
- 
-          <button type="submit">Send Message</button>
-        </form>
-        <div class="image-fader">
-          <img src="./assets/images/ctc1.png" alt="ctc1" style="width: 30rem">
-          <img src="./assets/images/ctc2.png" alt="ctc2" style="width: 30rem">
-          <img src="./assets/images/ctc3.png" alt="ctc3" style="width: 30rem">
-          <img src="./assets/images/ctc4.png" alt="ctc4" style="width: 30rem">
- 
-        </div> 
-    </div>
-  </div>
-
-  <div class="cardi">
-    <div class="contact-card white-border-card">
-      <li>
-        <p class="card-title address-title">
-          <lord-icon class="invert-col" src="https://cdn.lordicon.com/iikoxwld.json" trigger="hover" colors="primary:#000000" style="width:25px;height:25px"></lord-icon>
-          Address :
-        </p>
-        <address class="address">
-          12, Nayabad, 
-          Kolkata, India 700054
-        </address>
-      </li>
-      <li>
-        <p class="card-title phone-title">
-          <lord-icon class="invert-col" src="https://cdn.lordicon.com/srsgifqc.json" trigger="hover" style="width:20px;height:20px;"></lord-icon>
-          Phone :
-        </p>
-        <a href="tel:9124421980" class="card-link">+91 9124421980</a>
-      </li>
-      <li>
-        <p class="card-title email-title">
-          <lord-icon class="invert-col" src="https://cdn.lordicon.com/xtzvywzp.json" trigger="hover" style="width:20px;height:20px;"></lord-icon>
-          Email :
-        </p>
-        <a href="mailto:support@swapreads.com" class="card-link">support@swapreads.com</a>
-      </li>
-    </div>
-  </div>
-</div>
-<style>
-  .flexi {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    /*margin-left: -100px; /* Shift both sections further left */
-  }
-
-  .contact {
-    flex: 0.75;
-    margin-right:-60px;
-    margin-top: 0;
-    margin-bottom: 17px;
-  }
-  .address-side {
-    flex: 0.25; /* Reduced flex value to make the address section narrower */
-    margin-left: -150px; /* Keep the left shift to bring it closer to the center */
-    margin-top: 0;
-    margin-right: 100px;
-    margin-bottom: 17px;
-    
-}
-.cardi{
-    display: flex;
-    justify-content: center; /* Center the contact card */
-    align-content: center;
-    margin-top: 200px; /* Adjust this value as needed */
-    margin-left:280px;
-}
-
-
-  <section class="section-contact" id="contact" aria-label="contact">
-    <h1 class="ctc">CONTACT US!</h1>
-    <p class="p">Have a Question?</p>
-
-
-    <div class="flexi">
-      <div class="contact">
-        <h2 style="text-align: center; color: #A30F17;">Get in touch</h2>
-        <div class="contact-container">
-          <form class="contact-form" id="contactForm">
-            <label for="name">Name</label>
-            <input type="text" id="name" name="name" placeholder="Your Name" required>
-
-            <label for="email">Email</label>
-            <input type="email" id="email" name="email" placeholder="your-email@example.com" required>
+  <h1 class="h1 section-title has-underline" style="margin-top: 15px;">
+    Contact Us!
+    <span class="span has-before"></span>
+  </h1>
+  <p class="p">Have a Question?</p> 
+  <h3 style="text-align: center; color: #A30F17;">GET IN TOUCH</h3>
+  <div class="flexi">
+    <div class="contact">
+      <div class="contact-container">
+        <form class="contact-form" id="contactForm">
+          <label for="name">Name</label>
+          <input type="text" id="name" name="name" placeholder="Your Name" required>
 
-            <label for="subject">Subject</label>
-            <input type="text" id="subject" name="subject" placeholder="Subject" required>
+          <label for="email">Email</label>
+          <input type="email" id="email" name="email" placeholder="your-email@example.com" required>
 
-            <label for="message">Message</label>
-            <textarea id="message" name="message" placeholder="Your Message" required></textarea>
+          <label for="subject">Subject</label>
+          <input type="text" id="subject" name="subject" placeholder="Subject" required>
 
-            <button type="submit">Send Message</button>
-          </form>
+          <label for="message">Message</label>
+          <textarea id="message" name="message" placeholder="Your Message" required></textarea>
 
-          <!-- Image Fader Section -->
+          <button type="submit">Send Message</button>
+        </form>
+        <!-- Image Fader Section -->
+        <center>
           <div class="image-fader">
-            <img src="/assets/images/ctc1.png" alt="ctc1">
-            <img src="/assets/images/ctc5.png" alt="ctc5">
-            <img src="/assets/images/ctc3.png" alt="ctc3">
-            <img src="/assets/images/ctc4.png" alt="ctc4">
+            <img src="./assets/images/ctc1.png" alt="ctc1">
+            <img src="./assets/images/ctc5.png" alt="ctc5">
+            <img src="./assets/images/ctc3.png" alt="ctc3">
+            <img src="./assets/images/ctc4.png" alt="ctc4">
           </div>
-        </div>
+        </center>
       </div>
+    </div>
 
-      <!-- Contact Information Section -->
-          <div class="cardi">
-            <div class="contact-card white-border-card">
-              <ul>
-                <li>
-                  <p class="card-title address-title">
-                    <lord-icon class="invert-col" src="https://cdn.lordicon.com/iikoxwld.json" trigger="hover" colors="primary:#000000" style="width:20.5rem;height:20.5rem"></lord-icon>
-                    Address:
-                  </p>
-                  <address class="address">
-                    12, Nayabad<br>
-                    Kolkata, India 700054
-                  </address>
-                </li>
-                <li>
-                  <p class="card-title phone-title">
-                    <lord-icon class="invert-col" src="https://cdn.lordicon.com/srsgifqc.json" trigger="hover" style="width:2rem;height:2rem;"></lord-icon>
-                    Phone:
-                  </p>
-                  <a href="tel:9124421980" class="card-link">+91 9124421980</a>
-                </li>
-                <li>
-                  <p class="card-title email-title">
-                    <lord-icon class="invert-col" src="https://cdn.lordicon.com/xtzvywzp.json" trigger="hover" style="width:2rem;height:2rem;"></lord-icon>
-                    Email:
-                  </p>
-                  <a href="mailto:support@swapreads.com" class="card-link">support@swapreads.com</a>
-                </li>
-              </ul>
-              <div class="map-container">
-        <iframe
-          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3686.5834653201455!2d88.40974607348684!3d22.482281936278092!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a0273c5411d60d7%3A0x5d6e57763593194b!2sSouthern%20Cleve%20Housing%2C%2012%2C%20Bhagat%20Singh%20Nagar%2C%20Nayabad%2C%20Kolkata%2C%20West%20Bengal%20700150!5e0!3m2!1sen!2sin!4v1716043813992!5m2!1sen!2sin"
-          style="border:0; margin: bottom 0.3em;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
-        </iframe>
+    <!-- Contact Information Section -->
+    <div class="cardi">
+      <div class="contact-card white-border-card">
+        <ul>
+          <li>
+            <p class="card-title address-title">
+              <lord-icon class="invert-col" src="https://cdn.lordicon.com/iikoxwld.json" trigger="hover" colors="primary:#000000" style="width:25px;height:25px"></lord-icon>
+              Address:
+            </p>
+            <address class="address">
+              12, Nayabad<br>
+              Kolkata, India 700054
+            </address>
+          </li>
+          <li>
+            <p class="card-title phone-title">
+              <lord-icon class="invert-col" src="https://cdn.lordicon.com/srsgifqc.json" trigger="hover" style="width:20px;height:20px;"></lord-icon>
+              Phone:
+            </p>
+            <a href="tel:9124421980" class="card-link">+91 9124421980</a>
+          </li>
+          <li>
+            <p class="card-title email-title">
+              <lord-icon class="invert-col" src="https://cdn.lordicon.com/xtzvywzp.json" trigger="hover" style="width:20px;height:20px;"></lord-icon>
+              Email:
+            </p>
+            <a href="mailto:support@swapreads.com" class="card-link">support@swapreads.com</a>
+          </li>
+        </ul>
+        <!-- Map Container -->
+        <div class="map-container">
+          <iframe
+            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3686.5834653201455!2d88.40974607348684!3d22.482281936278092!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a0273c5411d60d7%3A0x5d6e57763593194b!2sSouthern%20Cleve%20Housing%2C%2012%2C%20Bhagat%20Singh%20Nagar%2C%20Nayabad%2C%20Kolkata%2C%20West%20Bengal%20700150!5e0!3m2!1sen!2sin!4v1716043813992!5m2!1sen!2sin"
+            style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
+          </iframe>
+        </div>
       </div>
-            </div>
-          </div>
-
-      <!-- Google Map Section -->
-      
     </div>
+  </div>
 </section>
 
-
 <script src="https://cdn.emailjs.com/dist/email.min.js"></script>
 <script>
   (function() {