From d6b7818e82ac114f7555760985c5f5b215f569e9 Mon Sep 17 00:00:00 2001
From: samarsajad <142666229+samarsajad@users.noreply.github.com>
Date: Thu, 6 Jun 2024 01:45:32 +0530
Subject: [PATCH] fixed overlapping

---
 Html-Files/Css-Files/styles.css | 202 +++++++++---------------
 index.html                      | 268 +++++++++++++++++++-------------
 style.css                       | 123 ++++++++++-----
 3 files changed, 311 insertions(+), 282 deletions(-)

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 2206baae..496c471f 100644
--- a/index.html
+++ b/index.html
@@ -493,18 +493,18 @@ <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 -->
+      <!-- Add Login Form for Patient Portal 
       
           <div class="login-box">
               <div class="avatar">
@@ -527,7 +527,7 @@ <h2>Patient Portal</h2>
                     <a href="forgot-password.php">Forgot Your Password?</a>
                   </div>
               </form>
-          </div>
+          </div>-->
 
 
       <!-- Add Forgot Password Link -->
@@ -536,123 +536,167 @@ <h2>Patient Portal</h2>
     <!-- ############# Appointment Section ############# -->
 
 
-    <section id="appointment" class="appointment section-bg">
+    <!-- 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">
 
-      <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><br><br>
+      <!-- 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>
-        <div class="layout">
-          <form accept="" role="form" class="php-email-form">
-            <div class="row">
-
-              <div class="col-md-4 form-group">
-
-                <input type="text" name="name" class="form-control" id="name" placeholder="Your Name">
-              </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">
-              </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]*" style="width: 100%;"
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-md-4 form-group mt-3">
 
-                <input type="date" name="date" class="form-control datepicker" id="date" placeholder="Appointment Date">
+        <!-- Time Slot Section -->
+        
+          <div class="col-md-12 form-group mt-3">
+            <select name="time-slot" id="time-slot" class="form-select" required>
+              <option value="">Select Time Slot</option>
+              <!-- Populate with available time slots -->
+              <option value="9:00 AM">9:00 AM</option>
+              <option value="11:00 AM">11:00 AM</option>
+              <option value="2:00 PM">2:00 PM</option>
+              <!-- 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>
 
-                <script>   //To set value of minimum date in calender 
-                  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}`;
+       
+       
+        </div>
+      </form>
+    </div>
+  </div>
+  
 
-                  document.getElementById('date').setAttribute('min', formattedDate);
-                </script>
+<!--<section id="hospital" class="hospital-section-bg">
 
-              </div>
-              <div class="col-md-4 form-group mt-3">
-                <select name="age" id="age" class="form-select">
-                  <option value="">Select Age</option>
-                  <option value="Department 1">18 or below</option>
-                  <option value="Department 2">18 to 55</option>
-                  <option value="Department 3">55 above</option>
-                </select>
-              </div>
-              <div class="col-md-4 form-group mt-3">
-                <select name="doctor" id="doctor" class="form-select">
-                  <option value="">Your Location</option>
-                  <option value="Doctor 1">Mumbai</option>
-                  <option value="Doctor 2">Delhi</option>
-                  <option value="Doctor 3">Chennai</option>
-                  <!-- Add more locations as needed -->
-                </select>
-              </div>
-            </div>
 
-            <!-- Time Slot Section -->
-            <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>
-                  <option value="11:00 AM">11:00 AM</option>
-                  <option value="2:00 PM">2:00 PM</option>
-                  <!-- Add more time slots as needed -->
-                </select>
-              </div>
-            </div>
 
             <!-- Hospital Selection Section -->
-            <div class="row">
-              <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>
-            </div>
-
-            <!-- OPD Section -->
-            <div class="row">
-              <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>
-
-            <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>
-          </form>
-
-        </div>
-
-      </div>
-    </section><!-- End Appointment Section -->
+            
+  
+         
+</section><!-- End Appointment Section -->
 
 
 
diff --git a/style.css b/style.css
index cb76f3ac..3a8b667d 100644
--- a/style.css
+++ b/style.css
@@ -1006,71 +1006,112 @@ section {
 
 
 
-/*################----Appointments----################*/
-.layout {
-  /*border: 2px solid #ccc; */
-  background-color: #3fbcc051;
-  border-radius: 30px;
-  padding: 50px;
-  width: 700px;
+/* Overall section styling */
+#appointment.appointment.section-bg {
+ background-color:#022a2d;
+  padding: 50px 0;
+  box-sizing: border-box;
+  width: 90%;
+  max-width: 900px;
   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;
+
 }
 
-.appointment .php-email-form input,
-.appointment .php-email-form textarea,
-.appointment .php-email-form select {
-  margin-left: 175px;
-  border-radius: 0;
-  box-shadow: none;
-  font-size: 14px;
-  background: #badaf7;
-  border-radius: 10px;
-  padding: 10px !important;
-  color: #6c757d;
+/* Form styling */
+.php-email-form {
+  display: flex; 
+  flex-wrap: wrap; 
+  color: #badaf7;
+  
+  
 }
+.col-md-4.form-group {
 
-.appointment .php-email-form input:focus,
-.appointment .php-email-form textarea:focus,
-.appointment .php-email-form select:focus {
-  border-color: #3fbcc0a6;
+  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;
 }
 
-.appointment .php-email-form input,
-.appointment .php-email-form select {
-  height: 44px;
+
+.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;
 }
 
-.appointment .php-email-form textarea {
-  padding: 10px 12px;
+.form-control:focus,
+.form-select:focus {
+  border-color: #999;
+  outline: none;
+  color: #badaf7;
 }
 
-.appointment .php-email-form button[type="submit"] {
-  margin-left: 250px;
-  background: #3fbcc0a6;
-  border: 0;
-  padding: 10px 35px;
-  color: #fff;
-  transition: 0.4s;
-  border-radius: 50px;
+/* 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 button[type="submit"]:hover {
-  background: #3fbcc0bd;
+.text-center button:hover {
+  background-color: #4bb6b7;
 }
 
 
 
 
+
 /*################----Doctors----################*/
 .doctors {
   background: #000;