diff --git a/Html-Files/Css-Files/styles.css b/Html-Files/Css-Files/styles.css
index 06d3fca9..41a187f1 100644
--- a/Html-Files/Css-Files/styles.css
+++ b/Html-Files/Css-Files/styles.css
@@ -147,7 +147,7 @@ section::before {
     padding: 70px 50px;
     padding-left: 250px;
     margin-left: 150px;
-    width: calc(100% - 150px);
+    width: calc(100% - 300px);
     height: 100%;
     background: #fff; 
     box-shadow: 0 50px 50px rgba(0,0,0,0.25);
@@ -227,6 +227,7 @@ section::before {
     border: none;
     max-width: 150px;
     padding: 12px;
+    margin-left: 170px;
 }
 
 .container .contactForm .formBox .inputBox input[type="submit"]:hover {
diff --git a/Html-Files/contact.html b/Html-Files/contact.html
index 17b71d05..46c57838 100644
--- a/Html-Files/contact.html
+++ b/Html-Files/contact.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!-- <!doctype html>
 <html>
     <head>
     <meta charset="utf-8">
@@ -58,7 +58,7 @@ <h2>Contact Info</h2>
                             </li>
                             <li>
                                 <span><img src="images/mail.png"></span>
-                                <!-- <span>nassosanagn@gmail.com</span> -->
+                               
                                 <span><a href = "mailto: nassosanagn@gmail.com">rapidoc@mail.com</a></span>
                             </li>
                             <li>
@@ -77,7 +77,7 @@ <h2>Contact Info</h2>
                     </ul>
                 </div>
                 
-                    <div class="contactForm">
+                    <div class="contactForm" style="margin-left: 350px;">
                         <h2>RapiDoc Query</h2>
                         <div class="formBox">
                         <div class="inputBox w50">
@@ -111,4 +111,345 @@ <h2>RapiDoc Query</h2>
              
         </section>
     </body>
-</html>
+</html> -->
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact Us</title>
+    <link rel="shortcut icon" type="image/jpg" href="images/news2.png"/>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap');
+    </style>
+    <link rel="stylesheet" href="Css-Files/styles.css">
+</head>
+<body>
+    <header class="header_container">
+        <div class="img">
+            <img id="rd-logo" style="width: 90px; height: auto;" src="/images/rd.png">
+        </div>
+        <div class="text" style="margin-left: -33rem;">
+            <h1 class="logo me-auto"><a style="text-decoration: none; color: #55a5ea;" href="index.html">RapiDoc</a></h1>
+        </div>
+        <nav class="nav_menu">
+            <ul class="nav_link">
+                <li><a href="../index.html">Home</a></li>
+                <li><a href="../index.html">About</a></li>
+                <li><a href="/Html-Files/news.html">News</a></li>
+                <li><a href="../index.html">Services</a></li>
+                <li><a href="../index.html">Patient Portal</a></li>
+                <li><a href="../index.html">Doctor</a></li>
+                <li><a href="#">Contact us</a></li>
+            </ul>
+        </nav>
+    </header>
+    <section>
+        <div class="container">
+            <div class="contactInfo">
+                <div>
+                    <h2>Contact Info</h2>
+                    <ul class="info">
+                        <li>
+                            <span><img src="images/location.png"></span>
+                            <span>IGDTUW, Delhi</span>
+                        </li>
+                        <li>
+                            <span><img src="images/mail.png"></span>
+                            <span><a href="mailto: nassosanagn@gmail.com">rapidoc@mail.com</a></span>
+                        </li>
+                        <li>
+                            <span><img src="images/call.png"></span>
+                            <span>+91 1234567890</span>
+                        </li>
+                    </ul>
+                </div>
+                <ul class="sci">
+                    <li><a href="https://www.facebook.com"><img src="images/1.png"></a></li>
+                    <li><a href="https://www.instagram.com"><img src="images/3.png"></a></li>
+                    <li class="social-icon"><a href="https://www.twitter.com"><img src="images/x-twitter.svg"></a></li>
+                    <li><a href="https://www.linkedin.com"><img src="images/5.png"></a></li>
+                </ul>
+            </div>
+            <div class="contactForm">
+                <h2>RapiDoc Query</h2>
+                <div class="formBox">
+                    <div class="inputBox w50">
+                        <input type="text" name="first_name" required>
+                        <span>First Name</span>
+                    </div>
+                    <div class="inputBox w50">
+                        <input type="text" name="last_name" required>
+                        <span>Last Name</span>
+                    </div>
+                    <div class="inputBox w50">
+                        <input type="email" name="email" required>
+                        <span>Email Address</span>
+                    </div>
+                    <div class="inputBox w50">
+                        <input type="text" name="mobile" required>
+                        <span>Mobile Number</span>
+                    </div>
+                    <div class="inputBox w100">
+                        <textarea name="message" required></textarea>
+                        <span>Write your message here...</span>
+                    </div>
+                    <div class="inputBox w100">
+                        <input type="submit" value="Send">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Poppins', sans-serif;
+        }
+
+        section {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            background-color: #095a55;
+            position: relative;
+        }
+
+        section::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 50%;
+            height: 100%;
+            background: #4bb6b7;
+        }
+
+        .nav_link {
+            list-style: none;
+        }
+
+        .nav_link li {
+            padding: 5px 20px;
+            display: inline-block;
+            color: white;
+        }
+
+        .nav_link li a {
+            transition: all 0.3s ease 0s;
+            color: white;
+            text-decoration: none;
+        }
+
+        .nav_link li a:hover {
+            color: #55a5ea;
+            text-decoration: underline 2.5px rgb(3, 3, 94);
+        }
+
+        .header_container {
+            background-color: #022a2d;
+            opacity: 0.9;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            height: 60px;
+            width: 100%;
+            padding: 0 20px;
+        }
+
+        .container {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            width: 0%;
+            margin: 0 auto;
+            /* background: #fff; */
+            border-radius: 20px;
+            /* box-shadow: 0 20px 25px rgba(0,0,0,0.15); */
+        }
+
+        .contactInfo {
+            flex-basis: 30%;
+            background: #095a55;
+            padding: 40px;
+            border-radius: 20px;
+            box-shadow: 0 20px 25px rgba(0,0,0,0.15);
+            color: #fff;
+        }
+
+        .contactInfo h2 {
+            font-size: 24px;
+            margin-bottom: 20px;
+        }
+
+        .contactInfo ul.info {
+            list-style: none;
+        }
+
+        .contactInfo ul.info li {
+            display: flex;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+
+        .contactInfo ul.info li span {
+            margin-right: 10px;
+        }
+
+        .contactInfo ul.info li span img {
+            width: 20px;
+            height: 20px;
+            filter: invert(1);
+        }
+
+        .contactInfo ul.sci {
+            display: flex;
+            justify-content: flex-start;
+        }
+
+        .contactInfo ul.sci li {
+            list-style: none;
+            margin-right: 15px;
+        }
+
+        .contactInfo ul.sci li a img {
+            width: 25px;
+            height: 25px;
+            filter: invert(1);
+        }
+
+        .contactForm {
+            flex-basis: 65%;
+            padding: 40px;
+            margin-left: 20px;
+            background: #fff;
+            border-radius: 20px;
+            box-shadow: 0 20px 25px rgba(0,0,0,0.15);
+        }
+
+        .contactForm h2 {
+            font-size: 24px;
+            margin-bottom: 20px;
+            color: #0f3959;
+        }
+
+        .formBox {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+        }
+
+        .formBox .inputBox {
+            position: relative;
+            margin-bottom: 30px;
+        }
+
+        .formBox .inputBox.w50 {
+            flex-basis: 48%;
+        }
+
+        .formBox .inputBox.w100 {
+            flex-basis: 100%;
+        }
+
+        .formBox .inputBox input,
+        .formBox .inputBox textarea {
+            width: 100%;
+            padding: 5px 0;
+            font-size: 16px;
+            font-weight: 300;
+            color: #333;
+            border: none;
+            border-bottom: 1px solid #777;
+            outline: none;
+        }
+
+        .formBox .inputBox textarea {
+            resize: none;
+            height: 120px;
+        }
+
+        .formBox .inputBox span {
+            position: absolute;
+            left: 0;
+            padding: 5px 0;
+            pointer-events: none;
+            font-size: 16px;
+            font-weight: 300;
+            transition: 0.3s;
+        }
+
+        .formBox .inputBox input:focus ~ span,
+        .formBox .inputBox input:valid ~ span,
+        .formBox .inputBox textarea:focus ~ span,
+        .formBox .inputBox textarea:valid ~ span {
+            transform: translateY(-20px);
+            font-size: 12px;
+            color: #095a55;
+            font-weight: 500;
+        }
+
+        .formBox .inputBox input[type="submit"] {
+            cursor: pointer;
+            background: #095a55;
+            color: #fff;
+            border: none;
+            border-radius: 20px;
+            max-width: 150px;
+            padding: 10px;
+        }
+
+        .formBox .inputBox input[type="submit"]:hover {
+            background: #0d9480;
+        }
+
+        @media (max-width: 991px) {
+            section {
+                padding: 20px;
+            }
+
+            .container {
+                flex-direction: column;
+            }
+
+            .contactInfo,
+            .contactForm {
+                flex-basis: 100%;
+                margin: 0 0 20px;
+            }
+
+            .contactForm {
+                margin-left: 0;
+            }
+
+            .formBox .inputBox.w50 {
+                flex-basis: 100%;
+            }
+        }
+
+        @media (max-width: 600px) {
+            .formBox .inputBox input,
+            .formBox .inputBox textarea {
+                font-size: 14px;
+            }
+
+            .formBox .inputBox span {
+                font-size: 14px;
+            }
+        }
+    </style>
+    </body>
+</html>
\ No newline at end of file
