diff --git a/Html-Files/Css-Files/styles.css b/Html-Files/Css-Files/styles.css
index f0803764..284a682a 100644
--- a/Html-Files/Css-Files/styles.css
+++ b/Html-Files/Css-Files/styles.css
@@ -1,27 +1,25 @@
-/* @import url('http://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap'); */
+@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;
+    font-family: 'Poppins', sans-serif;
 }
 
-section
-{
+section {
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     background-color: #095a55;
-
+    position: relative;
 }
-section::before
-{
+
+section::before {
     content: '';
     position: absolute;
-    top: 10;
+    top: 0;
     left: 0;
     width: 50%;
     height: 100%;
@@ -30,27 +28,26 @@ section::before
 
 .nav_link {
     list-style: none;
-  }
-  
-  .nav_link li {
+}
+
+.nav_link li {
     padding: 5px 20px;
     display: inline-block;
     color: white;
-  }
-  
-  .nav_link li a {
+}
+
+.nav_link li a {
     transition: all 0.3s ease 0s;
     color: white;
     text-decoration: none;
-  }
-  
-  .nav_link li a:hover {
+}
+
+.nav_link li a:hover {
     color: #55a5ea;
     text-decoration: underline 2.5px rgb(3, 3, 94);
-  }
-  
-  .header_container {
-    /* background-color: #d9d9d9; */
+}
+
+.header_container {
     background-color: #022a2d;
     opacity: 0.9;
     display: flex;
@@ -58,11 +55,11 @@ section::before
     justify-content: space-between;
     align-items: center;
     height: 60px;
-    margin: auto;
-  }
+    width: 100%;
+    padding: 0 20px;
+}
 
-.container
-{
+.container {
     position: relative;
     min-width: 1100px;
     min-height: 550px;
@@ -70,11 +67,9 @@ section::before
     z-index: 1000;
     /* border-radius: 22px; */
     /* background-color: #fff; */
-
 }
 
-.container .contactInfo
-{
+.container .contactInfo {
     position: absolute;
     top: 40px;
     width: 350px;
@@ -83,29 +78,23 @@ section::before
     z-index: 1;
     padding: 40px;
     display: flex;
-    justify-content: center;
     flex-direction: column;
     justify-content: space-between;
     box-shadow: 0 20px 25px rgba(0,0,0,0.15); 
     border-radius: 22px;
 }
 
-.container .contactInfo h2
-{
+.container .contactInfo h2 {
     color: #fff;
-    font-size:24px;
+    font-size: 24px;
     font-weight: 500;
 }
 
-.container .contactInfo ul.info 
-{
-   position: relative;
+.container .contactInfo ul.info {
    margin: 20px 0; 
 }
 
-.container .contactInfo ul.info li
-{
-   position: relative;
+.container .contactInfo ul.info li {
    list-style: none;
    display: flex;
    margin: 20px 0;
@@ -113,37 +102,28 @@ section::before
    align-items: flex-start;
 }
 
-.container .contactInfo ul.info li span:nth-child(1)
-{
+.container .contactInfo ul.info li span:nth-child(1) {
     width: 30px;
     min-width: 30px;
 }
 
-/* for gmail */
-.container .contactInfo ul.info li span a
-{
+.container .contactInfo ul.info li span a {
     color: #fff;
     text-decoration: none;
-    width: 30px;
-    min-width: 30px;
-    
 }
 
-.container .contactInfo ul.info li span:nth-child(1) img
-{
+.container .contactInfo ul.info li span:nth-child(1) img {
     max-width: 100%;
     filter: invert(1);
 }
 
-.container .contactInfo ul.info li span:nth-child(2)
-{
+.container .contactInfo ul.info li span:nth-child(2) {
     color: #fff;
     margin-left: 10px;
     font-weight: 300;
 }
 
 .container .contactInfo ul.sci {
-    position: relative;
     display: flex;
 }
 
@@ -158,15 +138,11 @@ section::before
 
 .container .contactInfo ul.sci li a img {
     filter: invert(1);
-    background-color: transparent;
-    width: 25px; /* Adjust the width as needed */
-    height: 25px; /* Adjust the height as needed */
+    width: 25px;
+    height: 25px;
 }
 
-
-
-.container .contactForm
-{
+.container .contactForm {
     position: absolute;
     padding: 70px 50px;
     padding-left: 250px;
@@ -178,41 +154,34 @@ section::before
     border-radius: 22px;
 }
 
-.container .contactForm h2
-{
+.container .contactForm h2 {
     color: #0f3959;
     font-size: 24px;
     font-weight: 500;
 }
 
-.container .contactForm .formBox
-{
-    position: relative;
+.container .contactForm .formBox {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     padding-top: 30px;
 }
 
-.container .contactForm .formBox .inputBox
-{
-    position: relative;
+.container .contactForm .formBox .inputBox {
     margin-bottom: 35px;
+    width: 100%;
 }
 
-.container .contactForm .formBox .inputBox.w50
-{
+.container .contactForm .formBox .inputBox.w50 {
     width: 47%;
 }
 
-.container .contactForm .formBox .inputBox.w100
-{
+.container .contactForm .formBox .inputBox.w100 {
     width: 100%;
 }
 
 .container .contactForm .formBox .inputBox input,
-.container .contactForm .formBox .inputBox textarea 
-{
+.container .contactForm .formBox .inputBox textarea {
     width: 100%;
     resize: none;
     padding: 5px 0;
@@ -224,13 +193,11 @@ section::before
     border-bottom: 1px solid #777;
 }
 
-.container .contactForm .formBox .inputBox textarea 
-{
+.container .contactForm .formBox .inputBox textarea {
     height: 120px;
 }
 
-.container .contactForm .formBox .inputBox span 
-{
+.container .contactForm .formBox .inputBox span {
     position: absolute;
     left: 0;
     padding: 5px 0;
@@ -243,20 +210,16 @@ section::before
 .container .contactForm .formBox .inputBox input:focus ~ span,
 .container .contactForm .formBox .inputBox input:valid ~ span,
 .container .contactForm .formBox .inputBox textarea:focus ~ span, 
-.container .contactForm .formBox .inputBox textarea:valid ~ span
-{
+.container .contactForm .formBox .inputBox textarea:valid ~ span {
     transform: translateY(-20px);
-    font-size:  12px;
+    font-size: 12px;
     font-weight: 400;
     letter-spacing: 1px;
     color: #095a55;
     font-weight: 500;
 } 
 
-/* Css for the submit button */
-.container .contactForm .formBox .inputBox input[type="submit"]         
-{
-    position: relative;
+.container .contactForm .formBox .inputBox input[type="submit"] {
     cursor: pointer;
     background: #095a55;
     border-radius: 20px;
@@ -264,35 +227,29 @@ section::before
     border: none;
     max-width: 150px;
     padding: 12px;
-
 }
 
-.container .contactForm .formBox .inputBox input[type="submit"]:hover{
+.container .contactForm .formBox .inputBox input[type="submit"]:hover {
     background: #0d9480;
 }
 
-/* make the form responsive */
-@media (max-width: 1200px)
-{
-    .container
-    {
+/* Responsive adjustments */
+@media (max-width: 1200px) {
+    .container {
         width: 90%;
-        min-width: auto;
         margin: 20px;
         box-shadow: 0 20px 50px rgba(0,0,0,0.2);
     }
 
-    .container .contactInfo
-    {
+    .container .contactInfo {
         top: 0;
         height: 550px;
         position: relative;
         box-shadow: none;
-        border-radius: 0px;
+        border-radius: 0;
     }
 
-    .container .contactForm
-    {
+    .container .contactForm {
         position: relative;
         width: calc(100% - 350px);
         padding-left: 0;
@@ -300,14 +257,12 @@ section::before
         padding: 40px;
         height: 550px;
         box-shadow: none;
-        border-radius: 0px;
+        border-radius: 0;
     }
 }
 
-@media (max-width: 991px)
-{
-    section
-    {
+@media (max-width: 991px) {
+    section {
         display: flex;
         justify-content: center;
         align-items: center;
@@ -315,60 +270,49 @@ section::before
         background: #fff38e;
     }
 
-    section::before
-    {
+    section::before {
         display: none;
     }
 
-    .container
-    {
-        display: flex;
+    .container {
         flex-direction: column-reverse;
     }
 
-    .container .contactForm
-    {
+    .container .contactForm {
         width: 100%;
         height: auto;
-        border-radius: 0px;
+        border-radius: 0;
     }
 
-    .container .contactInfo
-    {
+    .container .contactInfo {
         width: 100%;
         height: auto;
         flex-direction: row;
-        border-radius: 0px;
+        border-radius: 0;
     }
-    .container .contactInfo ul.sci
-    {
-       position: relative;
-       display: flex;
-       justify-content: center;
-       align-items: center;
+
+    .container .contactInfo ul.sci {
+        justify-content: center;
+        align-items: center;
     }
 }
 
-@media (max-width: 600px)
-{
-    .container .contactForm
-    {
+@media (max-width: 600px) {
+    .container .contactForm {
         padding: 25px;
     }
 
-    .container .contactInfo{
+    .container .contactInfo {
         padding: 25px;
         flex-direction: column;
         align-items: flex-start;
     }
 
-    .container .contactInfo ul.sci
-    {
+    .container .contactInfo ul.sci {
         margin-top: 40px;
     }
 
-    .container .contactForm .formBox .inputBox.w50
-    {
+    .container .contactForm .formBox .inputBox.w50 {
         width: 100%;
     }
 }
diff --git a/index.html b/index.html
index 01bdce49..916945ca 100644
--- a/index.html
+++ b/index.html
@@ -652,21 +652,142 @@ <h4><a href="https://www.medicalnewstoday.com/">Health Post</a></h4>
 
     <!-- Add Patient Portal Section -->
 
-  <section id="patient-portal" class="patient-portal">
+ <!-- <section id="patient-portal" class="patient-portal">
       <div class="container-patientportal">
       <div class="section-title" id="section-patientportal">
 
         <h2>Patient Portal</h2>
         <p>Access your medical records, lab results, and prescription history securely.</p>
-        <!-- <p>The Patient Portal is your personalized online gateway to your health information. Whether you need to check your recent lab results, review your prescription history, or update your personal details, the Patient Portal provides a convenient and secure platform for managing your healthcare needs.</p> -->
+        <!-- <p>The Patient Portal is your personalized online gateway to your health information. Whether you need to check your recent lab results, review your prescription history, or update your personal details, the Patient Portal provides a convenient and secure platform for managing your healthcare needs.</p> 
       </div>
       <div class="container">
 
 
+
+      <!-- Add Login Form for Patient Portal 
+      
+          <div class="login-box">
+              <div class="avatar">
+                  <img src="img\avatar.png" alt="Avatar">
+              </div>
+              <form>
+                  <div class="textbox">
+                      <i class="fas fa-user"></i>
+                      <input type="text" placeholder="Username" name="username" required>
+                  </div>
+                  <div class="textbox">
+                      <i class="fas fa-lock"></i>
+                      <input type="password" placeholder="Password" name="password" required>
+                  </div>
+                  <input type="submit" class="btn" value="SUBMIT">
+                  <div class="register-link">
+                      <a href="#">Not registered yet? Register Here</a>
+                  </div>
+                  <div class="forgot-password" id="forgot-password-patient-portal">
+                    <a href="forgot-password.php">Forgot Your Password?</a>
+                  </div>
+              </form>
+          </div>-->
+
+
+      <!-- Add Forgot Password Link -->
+
+
       <!-- Add Login Form for Patient Portal -->
 
 
 
+
+
+    <!-- Patient Portal Section -->
+<section id="patient-portal" class="patient-portal">
+  <div class="container-patientportal">
+    <div class="section-title" id="section-patientportal">
+      <h2>Patient Portal</h2>
+      <p>Access your medical records, lab results, and prescription history securely.</p>
+    </div>
+    <div class="container">
+
+      <!-- Add Login Form for Patient Portal -->
+      <div class="login-box">
+        <div class="avatar">
+          <img src="img/avatar.png" alt="Avatar" style = "margin-left:325px">
+        </div>
+        <form>
+          <div class="textbox">
+            <i class="fas fa-user" style = "margin-left:325px"></i>
+            <input type="text" placeholder="Username" name="username" required>
+          </div>
+          <div class="textbox">
+            <i class="fas fa-lock" style = "margin-left:325px"></i>
+            <input type="password" placeholder="Password" name="password" required>
+          </div>
+          <input type="submit" class="btn" value="SUBMIT" style = "margin-left:325px">
+          <div class="register-link" style = "margin-left:325px">
+            <a href="#">Not registered yet? Register Here</a>
+          </div>
+          <div class="forgot-password" id="forgot-password-patient-portal"style = "margin-left:325px">
+            <a href="forgot-password.php">Forgot Your Password?</a>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Appointment Section -->
+<section id="appointment" class="appointment section-bg">
+   
+  <div class="container">
+    <div class="section-title">
+      <h2>Make an Appointment</h2>
+      <p>We listed the docs, we made you a form. You make us an appointment.</p>
+    
+    <!--<div class="layout">-->
+      <form action="successful_appointment.html" method="post" class="php-email-form">
+        
+          <div class="col-md-4 form-group">
+            <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required>
+          </div>
+          <div class="col-md-4 form-group mt-3 mt-md-0">
+            <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
+          </div>
+          <div class="col-md-4 form-group mt-3">
+            <select name="location" id="location" class="form-select" required>
+              <option value="">Your Location</option>
+              <option value="Mumbai">Mumbai</option>
+              <option value="Delhi">Delhi</option>
+              <option value="Chennai">Chennai</option>
+              <!-- Add more locations as needed -->
+            </select>
+          </div>
+          <!--<div class="col-md-4 form-group mt-3 mt-md-0">
+            <input type="tel" class="form-control" name="phone" id="phone" placeholder="Your Phone" maxlength="10" minlength="10" pattern="[0-9]*" required>
+          </div>-->
+        <!--</div>-->
+        
+          <div class="col-md-4 form-group mt-3">
+            <input type="date" name="date" class="form-control datepicker" id="date" placeholder="Appointment Date" required>
+            <script>
+              // To set value of minimum date in calendar 
+              var currentDate = new Date();
+              var year = currentDate.getFullYear();
+              var month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
+              var day = currentDate.getDate().toString().padStart(2, '0');
+              var formattedDate = `${year}-${month}-${day}`;
+
+              document.getElementById('date').setAttribute('min', formattedDate);
+            </script>
+          <!--</div>-->
+          
+          
+        </div>
+
+        <!-- Time Slot Section -->
+        
+          <div class="col-md-12 form-group mt-3">
+            <select name="time-slot" id="time-slot" class="form-select" required>
+
       <!-- ############# Appointment Section ############# -->
 <section id="appointment" class="appointment section-bg">
   <div class="container">
@@ -723,6 +844,7 @@ <h2>Make an Appointment</h2>
         <div class="row">
           <div class="col-md-12 form-group mt-3">
             <select name="time-slot" id="time-slot" class="form-select">
+
               <option value="">Select Time Slot</option>
               <!-- Populate with available time slots -->
               <option value="9:00 AM">9:00 AM</option>
@@ -731,8 +853,78 @@ <h2>Make an Appointment</h2>
               <!-- Add more time slots as needed -->
             </select>
           </div>
+
+          <div class="col-md-12 form-group mt-3">
+
+            <select name="hospital" id="hospital" class="form-select">
+              <option value="">Select Hospital</option>
+                          <!-- Populate with available hospitals -->
+                <option value="Hospital 1">Hospital 1</option>
+                <option value="Hospital 2">Hospital 2</option>
+               <option value="Hospital 3">Hospital 3</option>
+                          <!-- Add more hospitals as needed -->
+            </select>
+          </div>
+        
+        
+                   
+        
+                    <!-- OPD Section -->
+                    
+          <div class="col-md-12 form-group mt-3">
+        
+            <select name="opd-section" id="opd-section" class="form-select">
+              <option value="">Select OPD Section</option>
+                          <!-- Populate with available OPD sections -->
+              <option value="ENT">ENT</option>
+              <option value="Gynecologist">Gynecologist</option>
+                          <!-- Add more OPD sections as needed -->
+            </select>
+          </div>
+          <div class="col-md-4 form-group mt-3">
+            <select name="age" id="age" class="form-select" required>
+              <option value="">Select Age</option>
+              <option value="18 or below">18 or below</option>
+              <option value="18 to 55">18 to 55</option>
+              <option value="55 above">55 above</option>
+            </select>
+          </div>
+        
+                    
+        
+          <!--<div class="form-group mt-3">
+            <textarea class="form-control" name="message" rows="5" placeholder="Message (Optional)"></textarea>
+          </div>-->
+          <div class="text-center">
+            <a href="successful_appointment.html" style="text-decoration: none;">
+            <button type="submit">Make an Appointment</button>
+            </a>
+          </div>
+        </div>
+
+       
+       
+        </div>
+      </form>
+    </div>
+  </div>
+  
+
+<!--<section id="hospital" class="hospital-section-bg">
+
+
+
+            <!-- Hospital Selection Section -->
+            
+  
+         
+</section><!-- End Appointment Section -->
+
+
+
         </div>
 
+
         <!-- Hospital Selection Section -->
         <div class="row">
           <div class="col-md-12 form-group mt-3">
diff --git a/style.css b/style.css
index 68ed6951..b9a94caf 100644
--- a/style.css
+++ b/style.css
@@ -986,6 +986,18 @@ section {
   }
 }
 
+
+
+
+
+/* Overall section styling */
+#appointment.appointment.section-bg {
+ background-color:#022a2d;
+  padding: 50px 0;
+  box-sizing: border-box;
+  width: 90%;
+  max-width: 900px;
+
 /*################----Appointments----################*/
 .layout {
   background-color: #3fbcc051;
@@ -993,17 +1005,42 @@ section {
   padding: 50px;
   width: 90%;  /* Changed width to 90% for better responsiveness */
   max-width: 1200px;  /* Added max-width for better control */
+
   margin: 0 auto;
+  padding: 20px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  margin-bottom: 7%;
+  border-radius: 20px;
+  display: grid;
+  width: 30;
 }
 
-.appointment .php-email-form {
-  width: 100%;
+/* Section title styling */
+.section-title h2 {
+  font-size: 28px;
+  color: #fff;
+  display: flex;
+  margin-bottom: 20px;
 }
 
-.appointment .php-email-form .form-group {
-  padding-bottom: 8px;
+.section-title p {
+  color: #fff;
+  text-align: center;
+  font-size: 16px;
+  margin-bottom: 30px;
+
 }
 
+
+/* Form styling */
+.php-email-form {
+  display: flex; 
+  flex-wrap: wrap; 
+  color: #badaf7;
+  
+  
+
 .appointment .php-email-form input,
 .appointment .php-email-form textarea,
 .appointment .php-email-form select {
@@ -1016,7 +1053,64 @@ section {
   padding: 10px !important;
   color: #6c757d;
   width: 80%;  /* Adjusted width for better layout */
+
 }
+.col-md-4.form-group {
+
+
+  width: calc(50% - 15px);
+  
+}
+
+.form-group {
+  margin-bottom: 15px;
+  
+  width: calc(50% - 15px);
+  color: #badaf7;
+}
+.form-group.d-flex {
+  display: flex; 
+  flex-wrap: wrap;
+  color: #badaf7;
+}
+
+
+.form-control,
+.form-select {
+  border: 1px solid #ccc;
+  padding: 10px;
+  border-radius: 4px;
+  height: 50px;
+  width: 50%;
+  
+}
+.php-email-form .form-control,
+.php-email-form .form-select {
+  background-color: #badaf7;
+}
+
+.form-control:focus,
+.form-select:focus {
+  border-color: #999;
+  outline: none;
+  color: #badaf7;
+}
+
+/* Text area styling */
+.form-group textarea {
+  resize: none;
+}
+
+/* Submit button styling */
+.text-center button {
+  background-color:#55a5ea; 
+  color: #000;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: 0.3s ease;
+  margin-left: 120px;
 
 .appointment .php-email-form input:focus,
 .appointment .php-email-form textarea:focus,
@@ -1033,12 +1127,20 @@ section {
   color: #fff;
   transition: 0.4s;
   border-radius: 50px;
+
 }
 
-.appointment .php-email-form button[type="submit"]:hover {
-  background: #3fbcc0bd;
+.text-center button:hover {
+  background-color: #4bb6b7;
 }
 
+
+
+
+
+
+/*################----Doctors----################*/
+
 .doctors {
   background: #000;
   display: flex;