diff --git a/index.html b/index.html
index fac0fbb..075327e 100644
--- a/index.html
+++ b/index.html
@@ -542,21 +542,120 @@ <h2>- Neha Rajput</h2>
 
 
 
-    <div class="containers" id="sxs">
-        <div id="contact" class="contact-info">
-            <div style="padding-left: 30px;">
-                <h2 style="text-align:left">Contact Us</h2>
-                <p style="color: white;font-size: 16px;">We value your feedback! We'd love to hear from you! For
-                    inquiries, feedback, or support, please reach out. Your insights help us improve your experience.
-                </p>
-
-                <h4>Localisation</h4>
-                <p style="color: white;font-size: 16px;">ABC colony, Bangalore Pin: 76896</p>
-
-                <h4>Phone No</h4>
-                <p style="color: white;font-size: 16px;">+91 9685478526</p>
+    <div id="sxs"
+        style="display: flex; align-items: center;justify-content: center;flex-direction: column;max-width: 80vw;align-self: center;justify-self:center">
+        <div id="contact2" class="contact2"
+            style=" background-color: white; padding: 20px;display: flex;  margin: auto; border-radius: 10px; overflow: hidden; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); width: auto;">
+            <!-- Left Section -->
+            <div class="contact2-div1"
+                style="max-width: 100%; border-radius: 10px; background: linear-gradient(135deg, hsl(204, 75%, 50%), #079874); padding: 30px; color: white; display: flex; flex-direction: column; justify-content: center;">
+                <h2 style="color: white; text-align: left; font-size: 4rem; margin-bottom: 10px;">Contact Us</h2>
+                <p style="color: white;font-size: 16px; line-height: 1.6; margin-bottom: 20px;">We value your feedback!
+                    Reach out for inquiries, feedback, or support. Your insights help us improve your experience.</p>
+
+                <div style="display: flex; gap: 10px; margin-top: 20px;">
+                    <!-- Location Icon and Text -->
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="white" viewBox="0 0 24 24">
+                        <path
+                            d="M12 2c-3.866 0-7 3.134-7 7 0 4.506 6.24 11.084 6.532 11.384.197.208.473.316.751.316s.554-.108.75-.316c.292-.3 6.533-6.878 6.533-11.384 0-3.866-3.134-7-7-7zm0 9c-1.104 0-2-.896-2-2s.896-2 2-2 2 .896 2 2-.896 2-2 2z" />
+                    </svg>
+                    <p style="color: white; font-size: 16px;">ABC Colony, Bangalore, Pin: 76896</p>
+                </div>
+
+                <div style="display: flex; gap: 10px; margin-top: 20px;">
+                    <!-- Phone Icon and Text -->
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="white" viewBox="0 0 24 24">
+                        <path
+                            d="M6.615 10.193c1.513 3.142 4.05 5.676 7.195 7.193l1.767-1.767c.282-.282.682-.382 1.043-.294 1.149.285 2.37.437 3.64.437.552 0 1 .447 1 1v3.625c0 .552-.448 1-1 1-10.493 0-19-8.507-19-19 0-.553.448-1 1-1h3.625c.552 0 1 .447 1 1 0 1.27.152 2.491.437 3.64.087.361-.012.762-.294 1.043l-1.767 1.767z" />
+                    </svg>
+                    <p style=" color: white; font-size: 16px;">+91 9685478526</p>
+                </div>
+
+
+            </div>
+
+            <!-- Right Section (Contact Form) -->
+            <div class="contact-form" style="display: flex;align-items: center;justify-content: center;width: 100%;">
+                <form style="width: 100%;">
+                    <div style=" display: flex; gap: 30px; margin-bottom: 20px;margin-top: 50px;">
+                        <input type="text" placeholder="Name"
+                            style="flex: 1; padding: 10px; border-bottom: 2px solid #ccc; border-radius: 0px; outline: none; transition: border-color 0.3s;">
+                        <input type="email" placeholder="Email"
+                            style="flex: 1; padding: 10px; border-bottom: 2px solid #ccc; border-radius: 0px; outline: none; transition: border-color 0.3s;">
+                    </div>
+                    <input type="text" placeholder="Subject"
+                        style="width: 100%; padding: 10px; margin-bottom: 20px; border-bottom: 2px solid #ccc; border-radius: 0px; outline: none; transition: border-color 0.3s;">
+                    <textarea placeholder="Message" rows="4"
+                        style="width: 100%; padding: 10px; margin-bottom: 20px;border-bottom: 2px solid #ccc; border-radius: 0px; outline: none; transition: border-color 0.3s;"></textarea>
+                    <button type="submit"
+                        style="width: 100%;margin-bottom: 50px; padding: 10px; background: linear-gradient(135deg, hsl(204, 75%, 50%), #079874); color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer;">Send
+                        Message</button>
+                </form>
             </div>
         </div>
+        <style>
+            /* Container style for input and textarea */
+            input[type="text"],
+            input[type="email"],
+            textarea {
+                width: 100%;
+                padding: 10px;
+                margin-bottom: 15px;
+                border: none;
+                border-bottom: 2px solid #ccc;
+                border-radius: 0;
+                outline: none;
+                transition: border-color 0.3s, box-shadow 0.3s;
+            }
+
+            /* Focus style */
+            input[type="text"]:focus,
+            input[type="email"]:focus,
+            textarea:focus {
+                border-bottom: 2px solid #0077cc;
+            }
+
+            input[type="text"]:hover,
+            input[type="email"]:hover,
+            textarea:hover {
+                border-bottom: 2px solid #0077cc;
+            }
+
+            /* Button styling */
+            button[type="submit"] {
+                width: 100%;
+                padding: 10px;
+                background-color: #b0b0b0;
+                color: white;
+                border: none;
+                border-radius: 5px;
+                font-size: 16px;
+                cursor: pointer;
+                transition: background-color 0.3s;
+            }
+
+            /* Button hover effect */
+            button[type="submit"]:hover {
+                background-color: #005fa3;
+
+            }
+
+            @media (max-width: 1000px) {
+                .contact2 {
+                    flex-direction: column;
+                }
+                
+            }
+        </style>
+
+
+        <div class="map-container">
+            <iframe
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d126915.40242030277!2d85.7892607!3d20.2498709!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a19a7a3b9692fff%3A0x87cd0a356bbc39ce!2sITER%2C%20Siksha%20'O'%20Anusandhan!5e0!3m2!1sen!2sin!4v1689514124518!5m2!1sen!2sin"
+                allowfullscreen>
+            </iframe>
+        </div>
+    </div>
         </footer>