From 45021e25e070e5e9878d91f93d5307e302c21929 Mon Sep 17 00:00:00 2001
From: Suraj <surajlohit42@gmail.com>
Date: Sun, 26 May 2024 09:15:36 +0530
Subject: [PATCH] Added the Responsive ness and improved
 feedback,doctors,medical record and contact section

---
 index.html | 374 +++++++++++-----------
 style.css  | 897 ++++++++++++++++++++++++++++++++++++-----------------
 2 files changed, 794 insertions(+), 477 deletions(-)
diff --git a/index.html b/index.html
index bd97a1f3..817554f0 100644
--- a/index.html
+++ b/index.html
@@ -31,17 +31,17 @@
 
 <body>
       <!-- ############# Header ############# -->
-  
-      <header class="header_container">
-        <div class="img">
+  <header>
+    
+    <div class="header_container">
+      <div class="img">
         <img src="images/rd.png" width="70" height="80"> 
       </div>
-      <div class="text" style="margin-left: -33rem;">
+      <div class="text">
   
         <h1 class="logo me-auto"><a style="text-decoration: none; color: #55a5ea;" href="index.html">RapiDoc</a></h1>
       </div>
-      <nav class="nav_menu">
-
+      <nav class="navbar">
         <ul class="nav_link">
           <li><a href="index.html">Home</a></li>
           <li><a href="#about">About</a></li>
@@ -51,22 +51,29 @@ <h1 class="logo me-auto"><a style="text-decoration: none; color: #55a5ea;" href=
           <li><a href="#doctors">Doctor</a></li>
           <li><a href="Html-Files/contact.html">Contact us</a></li>
         </ul>
+        <div class="mobile-nav-toggle"><i class="fas fa-bars"></i></div>
       </nav>
+    </div>
+  </header>
+      
+      
+
+
+      <div class="container">
+        <div class="content">
+          <h1>
+            Welcome to <span>RapiDoc!</span> <br /> Your one-stop digital <br> healthcare destination
+          </h1>
+          <h2>
+            <a href="#about" class="btn-get-started scrollto">Download App</a>
+          </h2>
+        </div>
+        <img class="sec-img" src="images/rd.png" alt="RapiDoc Image" />
       </div>
-    </header>
-
-
-  <div class="container">
-    <div class="content">
-      <h1 style="font-size: 65px;">
-        Welcome to <span>RapiDoc!</span> <br /> Your one-stop digital <br> healthcare destination
-      </h1>
-      <h2>
-       <a href="#about" class="btn-get-started scrollto">Download App</a>
-      </h2>
-    </div>    
-    <img style="position: relative; top: -70px; right: -10rem;" class="sec-img" src="images/rd.png" alt="" />
-  </div>
+      
+
+
+
   <br><br><br><br><br>
   <!-- End Home -->
   <main id="main">
@@ -226,16 +233,16 @@ <h4 class="title"><a href="">SERVICES</a></h4>
    
    
     <section id="services" class="services">
-      <div class="container">
+      <div class="container services-container ">
 
-        <div class="section-title">
-          <h2>Services</h2>
-          <p>Our services are for your good health. We are with you at every digital step.</p>
+        <div class="section-titl">
+          <h2 class="text-center" >Services</h2>
+          <p class="white" >Our services are for your good health. We are with you at every digital step.</p>
         </div>
 
-        <div class="row">
+        <div class="row services-row ">
           <div class="col-lg-4 col-md-6 d-flex align-items-stretch">
-            <div class="icon-box">
+            <div class="icon-box service-icon-box ">
               <div class="icon"><i class="fas fa-heartbeat"></i></div>
               <h4><a href="">Clinics/Labs</a></h4>
               <p>Locate the best healthcare facilities around you hassle-free.</p>
@@ -243,7 +250,7 @@ <h4><a href="">Clinics/Labs</a></h4>
           </div>
 
           <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0">
-            <div class="icon-box">
+            <div class="icon-box service-icon-box ">
               <div class="icon"><i class="fas fa-pills"></i></div>
               <h4><a href="https://www.1mg.com">Pharmacy</a></h4>
               <p>Get your prescribed medicines delivered at your doorstep.</p>
@@ -251,7 +258,7 @@ <h4><a href="https://www.1mg.com">Pharmacy</a></h4>
           </div>
 
           <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0">
-            <div class="icon-box">
+            <div class="icon-box service-icon-box ">
               <div class="icon"><i class="fas fa-hospital-user"></i></div>
               <h4><a href="">Daily Feed</a></h4>
               <p>Access to heath benefits like bootcamps, vaccination drives and much more
@@ -260,7 +267,7 @@ <h4><a href="">Daily Feed</a></h4>
           </div>
 
           <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4">
-            <div class="icon-box">
+            <div class="icon-box service-icon-box ">
               <div class="icon"><i class="fas fa-dna"></i></div>
               <h4><a href="Html-Files/blood.html">Blood Bank</a></h4>
               <p>Know the blood banks and blood groups available around you. No one should suffer ỉn emergencies.</p>
@@ -268,7 +275,7 @@ <h4><a href="Html-Files/blood.html">Blood Bank</a></h4>
           </div>
 
           <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4">
-            <div class="icon-box">
+            <div class="icon-box service-icon-box ">
               <div class="icon"><i class="fas fa-wheelchair"></i></div>
               <h4><a href="">Disabled Person</a></h4>
               <p>Convenient medical care is here. Wheelchair accessible hospitals and clinics, find all in one go.</p>
@@ -276,7 +283,7 @@ <h4><a href="">Disabled Person</a></h4>
           </div>
 
           <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4">
-            <div class="icon-box">
+            <div class="icon-box service-icon-box ">
               <div class="icon"><i class="fas fa-notes-medical"></i></div>
               <h4><a href="https://www.medicalnewstoday.com/">Health Post</a></h4>
               <p>Weekly, monthly, yearly or each day, however you like it!</p>
@@ -290,31 +297,25 @@ <h4><a href="https://www.medicalnewstoday.com/">Health Post</a></h4>
 
     <!-- Add Patient Portal Section -->
   <section id="patient-portal" class="patient-portal">
-    <div class="container">
-
-      <div class="section-title">
-        <h2>Patient Portal</h2>
-        <p>Access your medical records, lab results, and prescription history securely.</p>
-      </div>
 
-      <!-- Add Login Form for Patient Portal -->
-      <div class="login-form">
-        <form action="login.php" method="post">
-          <div class="form-group">
-            <input type="email" class="form-control" name="email" placeholder="Your Email" required>
-          </div>
-          <div class="form-group">
-            <input type="password" class="form-control" name="password" placeholder="Your Password" required>
-          </div>
-          <div class="text-center"><button type="submit">Login</button></div>
-        </form>
-      </div>
-
-      <!-- Add Forgot Password Link -->
-      <div class="forgot-password">
-        <a href="forgot-password.php">Forgot Your Password?</a>
-      </div>
+    <h1 class="text-center" >Patient Portal Section</h1>
 
+    <div class="login-container">
+      <form class="login-form" action="#" method="post">
+        <h2>Login</h2>
+        <div class="form-group">
+          <label for="email">Email</label>
+          <input type="email" id="email" name="email" placeholder="Your Email" required>
+        </div>
+        <div class="form-group">
+          <label for="password">Password</label>
+          <input type="password" id="password" name="password" placeholder="Your Password" required>
+        </div>
+        <div class="forgot-password">
+          <a href="#">Forgot Your Password?</a>
+        </div>
+        <button type="submit">Login</button>
+      </form>
     </div>
   </section><!-- End Patient Portal Section -->
    
@@ -322,106 +323,81 @@ <h2>Patient Portal</h2>
    
    
     <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><br><br>
+      <div class="container appointment-container ">
+    
+        <div class="section-titl">
+          <h2 class="text-center" >Make an Appointment</h2>
+          <p class="white text-center" >We listed the docs, we made you a form. You make us an appointment.</p>
         </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">
-    </div>
-  </div>
-  <div class="row">
-    <div class="col-md-4 form-group mt-3">
-      <input type="datetime" name="date" class="form-control datepicker" id="date" placeholder="Appointment Date">
-    </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 class="row">
+              <div class="col-md-6 form-group">
+                <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required>
+              </div>
+              <div class="col-md-6 form-group">
+                <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
+              </div>
+              <div class="col-md-6 form-group">
+                <input type="tel" class="form-control" name="phone" id="phone" placeholder="Your Phone" required>
+              </div>
+              <div class="col-md-6 form-group">
+                <input type="datetime-local" name="date" class="form-control" id="date" placeholder="Appointment Date" required>
+              </div>
+              <div class="col-md-6 form-group">
+                <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="col-md-6 form-group">
+                <select name="doctor" id="doctor" class="form-select" required>
+                  <option value="">Your Location</option>
+                  <option value="Mumbai">Mumbai</option>
+                  <option value="Delhi">Delhi</option>
+                  <option value="Chennai">Chennai</option>
+                </select>
+              </div>
+              <div class="col-md-12 form-group">
+                <select name="time-slot" id="time-slot" class="form-select" required>
+                  <option value="">Select Time Slot</option>
+                  <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>
+                </select>
+              </div>
+              <div class="col-md-12 form-group">
+                <select name="hospital" id="hospital" class="form-select" required>
+                  <option value="">Select Hospital</option>
+                  <option value="Hospital 1">Hospital 1</option>
+                  <option value="Hospital 2">Hospital 2</option>
+                  <option value="Hospital 3">Hospital 3</option>
+                </select>
+              </div>
+              <div class="col-md-12 form-group">
+                <select name="opd-section" id="opd-section" class="form-select" required>
+                  <option value="">Select OPD Section</option>
+                  <option value="ENT">ENT</option>
+                  <option value="Gynecologist">Gynecologist</option>
+                </select>
+              </div>
+              <div class="col-md-12 form-group">
+                <textarea class="form-control" name="message" rows="5" placeholder="Message (Optional)"></textarea>
+              </div>
+              <div class="col-md-12 text-center">
+                <button type="submit">Make an Appointment</button>
+              </div>
+            </div>
+          </form>
         </div>
-
+    
       </div>
-    </section><!-- End Appointment Section -->
+    </section>
+    
+    <!-- End Appointment Section -->
 
 
 
@@ -429,61 +405,58 @@ <h2>Make an Appointment</h2>
   
   
     <section id="doctors" class="doctors">
-      <div class="container">
-
-        <div class="section-title">
-          <h2>Doctors</h2>
-          <p>Don’t compromise your health when we have listed the best doctors for you!</p>
+      <div class="doctor-container">
+    
+        <div class="section-titl">
+          <h2 class="text-center" >Doctors</h2>
+          <p class="white" >Don’t compromise your health when we have listed the best doctors for you!</p>
         </div>
-
-        <div class="row">
-
+    
+        <div class="row doctor-details doctor-row ">
+    
           <div class="col-lg-6">
-            <div class="member d-flex align-items-start">
-              <div class="pic"><img src="img/doctors/1.png" class="img-fluid" alt="" style="width: 188px; height: 188px;"></div>
-              <div class="member-info">
-                <h4>Dermatologist</h4>
-                <br>
-                <div class="nxt-pg"><a href="Html-Files/doc.html"><button type="">Appoint a Doctor</button></a></div>
+            <div class="member d-flex flex-column align-items-center">
+              <div class="pic"><img src="img/doctors/1.png" class="img-fluid doctor-img " alt=""></div>
+              <div class="member-info text-center">
+                <h4 class="text-center" >Dermatologist</h4>
+                <div class="nxt-pg"><a href="Html-Files/doc.html"><button type="button">Appoint a Doctor</button></a></div>
               </div>
             </div>
           </div>
-
+    
           <div class="col-lg-6 mt-4 mt-lg-0">
-            <div class="member d-flex align-items-start">
-              <div class="pic"><img src="img/doctors/2.png" class="img-fluid" alt=""></div>
-              <div class="member-info">
-                <h4>Gynecologist</h4>
-                <br>
-                <div class="nxt-pg"><a href="Html-Files/doc.html"><button type="">Appoint a Doctor</button></a></div>
+            <div class="member d-flex flex-column align-items-center">
+              <div class="pic"><img src="img/doctors/2.png" class="img-fluid  " alt=""></div>
+              <div class="member-info text-center">
+                <h4 class="text-center" >Gynecologist</h4>
+                <div class="nxt-pg"><a href="Html-Files/doc.html"><button type="button">Appoint a Doctor</button></a></div>
               </div>
             </div>
           </div>
-
+    
           <div class="col-lg-6 mt-4">
-            <div class="member d-flex align-items-start">
-              <div class="pic"><img src="img/doctors/3.png" class="img-fluid" alt="" style="width: 188px; height: 188px;"></div>
-              <div class="member-info">
-                <h4>Cardiologist</h4>
-                <br>
-                <div class="nxt-pg"><a href="Html-Files/doc.html"><button type="">Appoint a Doctor</button></a></div>
+            <div class="member d-flex flex-column align-items-center">
+              <div class="pic"><img src="https://communitymemorial.org/wp-content/uploads/2023/02/Services-Cardiology.jpg" class="img-fluid doctor-img " alt=""></div>
+              <div class="member-info text-center">
+                <h4 class="text-center" >Cardiologist</h4>
+                <div class="nxt-pg"><a href="Html-Files/doc.html"><button type="button">Appoint a Doctor</button></a></div>
               </div>
             </div>
           </div>
-
+    
           <div class="col-lg-6 mt-4">
-            <div class="member d-flex align-items-start">
-              <div class="pic"><img src="img/doctors/4.png" class="img-fluid" alt="" style="width: 188px; height: 188px;"></div>
-              <div class="member-info">
-                <h4>ENT</h4>
-                <br>
-                <div class="nxt-pg"><a href="Html-Files/doc.html"><button type="">Appoint a Doctor</button></a></div>
+            <div class="member d-flex flex-column align-items-center">
+              <div class="pic"><img src="img/doctors/4.png" class="img-fluid doctor-img " alt=""></div>
+              <div class="member-info text-center">
+                <h4 class="text-center" >ENT</h4>
+                <div class="nxt-pg"><a href="Html-Files/doc.html"><button type="button">Appoint a Doctor</button></a></div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </section><!-- End Doctors Section -->
+    </section>
+    <!-- End Doctors Section -->
 
 
      <!-- ################# Contact Section ################# -->
@@ -525,27 +498,33 @@ <h2>Contact</h2>
         </style>
       </div><br>
 
-      <div class="container">
-        <div class="row mt-5">
+      <div class="ContactSection">
+        <div class="row mt-5 contact-container  ">
 
           <div class="col-lg-4">
             <div class="info">
-              <div class="address">
+              <div class="address contact-info ">
                 <i class="fa fa-location-dot"></i>
-                <h4>Location:</h4>
+                <div>
+                  <h4>Location:</h4>
                 <p><a href="https://www.google.com/maps/search/?api=1&query=IGDTUW,Delhi" target="_blank">IGDTUW, Delhi</a></p>
+                </div>
               </div>
 
-              <div class="email">
+              <div class="email contact-info ">
                 <i class="fa fa-envelope"></i>
+               <div>
                 <h4>Email:</h4>
                 <p><a href="mailto:rapidoc@mail.com">rapidoc@mail.com</a></p>
+               </div>
               </div>
 
-              <div class="phone">
+              <div class="phone contact-info ">
                 <i class="fa fa-phone"></i>
-                <h4>Call:</h4>
+                <div>
+                  <h4>Call:</h4>
                 <p><a href="tel:+91 1234567890">+91 1234567890</a></p>
+                </div>
               </div>
             </div>
           </div><br><br>
@@ -699,6 +678,17 @@ <h4>Daily Newsletter</h4>
   </script>
   
  <script>
+
+document.addEventListener('DOMContentLoaded', function() {
+  const mobileNavToggle = document.querySelector('.mobile-nav-toggle');
+  const navLinks = document.querySelector('.nav_link');
+
+  mobileNavToggle.addEventListener('click', function() {
+    navLinks.classList.toggle('active');
+  });
+});
+
+
   document.addEventListener("DOMContentLoaded", function () {
       const backToTopButton = document.getElementById('back-to-top-container');
   
diff --git a/style.css b/style.css
index 3eb3ed8c..2ebb3844 100644
--- a/style.css
+++ b/style.css
@@ -1,7 +1,11 @@
-body{
+body {
+  margin: 0;
+  padding: 0;
   font-family: "Open Sans", sans-serif;
   color: #fff;
   background-color: #000;
+  box-sizing: border-box;
+  overflow-x: hidden;
 }
 
 a {
@@ -11,66 +15,113 @@ a {
 
 a:hover {
   color: #55a5ea;
-  text-decoration: none;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: "Raleway", sans-serif;
 }
 
 
+header{
+  display: flex;
+  justify-content: center;
+  background-color: #29888a;
+}
+
+.header_container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px;
+  background-color: #022629;
+  position: fixed;
+  top: 0;
+  width: 90%;
+  z-index: 1000;
+}
+
+.logo {
+  font-size: 24px;
+  color: white;
+  text-decoration: none;
+}
+
+.navbar {
+  display: flex;
+  align-items: center;
+}
+
+.nav_link {
+  list-style: none;
+  display: flex;
+  gap: 20px;
+}
+
 .nav_link li {
-  padding: 5px 20px;
   display: inline-block;
+}
+
+.nav_link a {
   color: white;
+  text-decoration: none;
+  font-size: 18px;
 }
 
-.nav_link li a {
-  transition: all 0.3s ease 0s;
+.mobile-nav-toggle {
+  display: none;
+  font-size: 24px;
+  cursor: pointer;
   color: white;
 }
 
-.nav_link li a:hover {
-  color: #55a5ea;
+@media (max-width: 768px) {
+  .nav_link {
+    display: none;
+    flex-direction: column;
+    position: absolute;
+    top: 60px;
+    right: 20px;
+    background-color: #3fbcc0;
+    width: 150px;
+    padding: 10px;
+    border-radius: 5px;
+  }
 
-  /* text-decoration: underline 2.5px rgb(3, 3, 94); */
-}
+  .nav_link li {
+    margin: 10px 0;
+  }
 
-.header_container {
-  /* background-color: #d9d9d9; */
-  background-color: #022a2d;
-  opacity: 0.9;
-  display: flex;
-  flex-direction: row;
-  /* justify-content: space-evenly; */
-  justify-content: space-between;
-  align-items: center;
-  height: 60px;
-  margin: auto;
+  .mobile-nav-toggle {
+    display: block;
+  }
+
+  .nav_link.active {
+    display: flex;
+  }
 }
 
+
 .container {
   display: flex;
-  font-family: sans-serif;
-  padding-top: 80px;
+  /* flex-direction: column; */
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  text-align: center;
 }
 
-
-/* .container a:hover {
-  text-decoration: underline 2px;
-} */
-
 .content {
-  display: flex;
-  flex-direction: column;
-  padding-left: 50px;
-  /* justify-content: center;
-  align-items: center; */
+  flex: 1;
 }
 
 .content h1 {
-  font-size: 80px;
-  color: #d9d9d9;
+  font-size: 65px;
+  margin: 0;
 }
 
 .content h1 span {
@@ -78,28 +129,59 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .content h2 {
-  font-size: 20px;
-  margin-top: 30px;
-  padding-right: 40px;
-  line-height: 1.5;
-  color: #d9d9d9;
+  margin-top: 20px;
 }
 
-.content h2 a {
-  display: inline;
-  font-size: xx-large;
-  color: #55a5ea;
+.btn-get-started {
+  background-color: #55a5ea;
+  color: #fff;
+  padding: 10px 20px;
+  text-decoration: none;
+  border-radius: 5px;
+  transition: background-color 0.3s ease;
+}
 
+.btn-get-started:hover {
+  background-color: #4a92d0;
 }
 
-.container-head{
-  display: grid;
-  align-items: center;
-  grid-template-columns: 1fr 2fr 13fr 3fr;
-  margin-top: 0px;
+.sec-img {
+  flex: 1;
+  max-width: 100%;
+  height: auto;
+  position: relative;
+  top: -70px;
+  right: -10rem;
 }
 
+@media (max-width: 991px) {
+  .container {
+    flex-direction: column-reverse;
+    text-align: center;
+  }
 
+  .sec-img {
+    position: static;
+    margin-top: 20px;
+    right: 0;
+    top: 0;
+  }
+
+  .content h1 {
+    font-size: 40px;
+  }
+}
+
+@media (max-width: 600px) {
+  .content h1 {
+    font-size: 30px;
+  }
+
+  .btn-get-started {
+    padding: 8px 16px;
+    font-size: 14px;
+  }
+}
 
 /*---------------------parallax effect after about------------*/
 .parallax-container {
@@ -119,8 +201,8 @@ h1, h2, h3, h4, h5, h6 {
   padding: 20px;
   margin-bottom: 20px;
   border-radius: 10px;
-}
 
+}
 
 
 /**
@@ -170,13 +252,14 @@ h1, h2, h3, h4, h5, h6 {
   position: relative;
 }
 
-.navbar > ul > li {
+.navbar>ul>li {
   position: relative;
   white-space: nowrap;
   padding: 8px 0 8px 20px;
 }
 
-.navbar a, .navbar a:focus {
+.navbar a,
+.navbar a:focus {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -188,13 +271,17 @@ h1, h2, h3, h4, h5, h6 {
   padding: 5px 2px;
 }
 
-.navbar a i, .navbar a:focus i {
+.navbar a i,
+.navbar a:focus i {
   font-size: 12px;
   line-height: 0;
   margin-left: 5px;
 }
 
-.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
+.navbar a:hover,
+.navbar .active,
+.navbar .active:focus,
+.navbar li:hover>a {
   color: #55a5ea;
   border-color: #55a5ea;
 }
@@ -218,6 +305,7 @@ h1, h2, h3, h4, h5, h6 {
   .mobile-nav-toggle {
     display: block;
   }
+
   .navbar ul {
     display: none;
   }
@@ -254,7 +342,7 @@ h1, h2, h3, h4, h5, h6 {
   transition: 0.3s;
 }
 
-.navbar-mobile > ul > li {
+.navbar-mobile>ul>li {
   padding: 0;
 }
 
@@ -265,13 +353,16 @@ h1, h2, h3, h4, h5, h6 {
   border: none;
 }
 
-.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
+.navbar-mobile a:hover,
+.navbar-mobile .active,
+.navbar-mobile li:hover>a {
   color: #3fbcc0c6;
 }
 
 .navbar-mobile .getstarted {
   margin: 15px;
 }
+
 /*################----Sections General----################*/
 section {
   padding: 50px 0;
@@ -284,10 +375,10 @@ section {
 
 .section-title {
   /* text-align: left; */
-  padding-left:50px;
-  padding-right:50px;
-  margin-left:15%;
-  margin-right:15%;
+  padding-left: 50px;
+  padding-right: 50px;
+  margin-left: 15%;
+  margin-right: 15%;
   text-align: center;
   /* text-align: left; */
 }
@@ -337,9 +428,11 @@ section {
   background-size: cover;
   margin-bottom: -200px;
 }
-#home .multiple-text{
+
+#home .multiple-text {
   color: #55a5ea;
 }
+
 #home .container {
   position: relative;
   margin-top: 150px;
@@ -373,7 +466,8 @@ section {
   color: #fff;
   background: #55a5ea;
 }
-#home video{
+
+#home video {
   margin-top: -70px;
   margin-left: 50px;
   height: 900px;
@@ -388,7 +482,7 @@ section {
 
 @media (min-width: 1024px) {
   #home {
-    background-attachment:fixed;
+    background-attachment: fixed;
   }
 }
 
@@ -397,13 +491,16 @@ section {
     margin-bottom: 0;
     height: 100vh;
   }
+
   #home .container {
     padding-bottom: 63px;
   }
+
   #home h1 {
     font-size: 28px;
     line-height: 36px;
   }
+
   #home h2 {
     font-size: 18px;
     line-height: 24px;
@@ -431,8 +528,8 @@ section {
   transition: all 0.3s ease-in-out;
   border-radius: 50px;
   z-index: 1;
-    transform: translateY(0);
-    transition: transform 0.5s ease;
+  transform: translateY(0);
+  transition: transform 0.5s ease;
 }
 
 .featured-services .icon-box::before {
@@ -463,6 +560,7 @@ section {
   color: #3fbcc0a4;
   transition: all 0.3s ease-in-out;
 }
+
 .featured-services .icon2 {
   margin-bottom: 15px;
 }
@@ -473,6 +571,7 @@ section {
   color: #55a5ea;
   transition: all 0.3s ease-in-out;
 }
+
 .featured-services .icon3 {
   margin-bottom: 15px;
 }
@@ -483,6 +582,7 @@ section {
   color: #55a5ea;
   transition: all 0.3s ease-in-out;
 }
+
 .featured-services .icon4 {
   margin-bottom: 15px;
 }
@@ -510,20 +610,24 @@ section {
   margin-bottom: 0;
 }
 
-.featured-services .icon-box:hover .title a, .featured-services .icon-box:hover .description {
+.featured-services .icon-box:hover .title a,
+.featured-services .icon-box:hover .description {
   color: #f7f4f4;
 }
 
-.featured-services .icon-box:hover .icon1 i{
+.featured-services .icon-box:hover .icon1 i {
   color: red;
 }
-.featured-services .icon-box:hover .icon2 i{
+
+.featured-services .icon-box:hover .icon2 i {
   color: rgb(235, 17, 235);
 }
-.featured-services .icon-box:hover .icon3 i{
+
+.featured-services .icon-box:hover .icon3 i {
   color: orange;
 }
-.featured-services .icon-box:hover .icon4 i{
+
+.featured-services .icon-box:hover .icon4 i {
   color: greenyellow;
 }
 
@@ -535,6 +639,7 @@ section {
   color: #55a5ea;
   margin-bottom: 15px;
 }
+
 .about .icon-boxes h3 {
   font-size: 28px;
   font-weight: 700;
@@ -578,7 +683,7 @@ section {
 
 .about .icon-box .title {
   margin-left: 85px;
-  
+
   font-weight: 700;
   margin-bottom: 10px;
   font-size: 18px;
@@ -602,7 +707,7 @@ section {
 }
 
 .about .video-box {
-  background: url("../img/about.png") center center no-repeat;  
+  background: url("../img/about.png") center center no-repeat;
   background-size: cover;
   height: 300px;
   top: 50px;
@@ -676,6 +781,7 @@ section {
     transform: scale(0.6, 0.6);
     opacity: 1;
   }
+
   100% {
     transform: scale(1, 1);
     opacity: 0;
@@ -687,6 +793,7 @@ section {
     transform: scale(0.6, 0.6);
     opacity: 1;
   }
+
   100% {
     transform: scale(1, 1);
     opacity: 0;
@@ -697,61 +804,56 @@ section {
 
 /*################----Counts----################*/
 .counts {
-  /* padding-top: 30px; */
   justify-content: center;
+  padding-top: 30px;
 }
 
 .counts .count-box {
   box-shadow: -10px -5px 40px 0 rgba(0, 0, 0, 0.1);
-  padding: 50px;
+  padding: 20px;
   margin: 5%;
-  width: calc(100%-15px);
-  background:#1c413b;
+  width: calc(100% - 30px);
+  background: #1c413b;
   align-content: center;
   border-radius: 15px;
-  /* margin-top: 10px; */
-}
-.row-d{
+  height: 250px;
+  /* Fixed height */
+  width: 250px;
+  /* Fixed width */
   display: flex;
-  /* margin:10px 20px 10px 20px; */
+  flex-direction: column;
+  justify-content: center;
   align-items: center;
+}
 
+.row-d {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 20px;
 }
+
 .counts .count-box i {
   font-size: 30px;
   color: #fcfcfc;
-  float: left;
 }
 
-.counts .count-box span{
+.counts .count-box span {
   font-size: 42px;
   line-height: 24px;
   display: block;
   font-weight: 700;
   color: #f9f4f4;
-  margin-left: 50px;
-}
-.container .drop .content span{
-  font-size: 42px;
-  line-height: 24px;
-  display: block;
-  font-weight: 700;
-  color: #faf8f8;
-}
-.container .drop .content p{
-  font-size: 30px;
-  line-height: 24px;
-  display: block;
-  justify-content: center;
-  font-weight: 700;
-  color: #f8f8f8;
+  margin-top: 10px;
 }
+
 .counts .count-box p {
-  padding: 30px 0 0 0;
+  padding: 10px 0 0 0;
   margin: 0;
   font-family: "Roboto", sans-serif;
   font-size: 14px;
   color: #fffcfc;
+  text-align: center;
 }
 
 .counts .count-box a {
@@ -768,9 +870,67 @@ section {
   color: #55a5ea;
 }
 
+@media (max-width: 991px) {
+  .counts .count-box {
+    width: 200px;
+    height: auto;
+  }
+
+  .counts .count-box span {
+    font-size: 36px;
+  }
+
+  .counts .count-box p {
+    font-size: 12px;
+  }
+
+  .counts .count-box a {
+    font-size: 13px;
+  }
+}
+
+@media (max-width: 600px) {
+  .counts .count-box {
+    width: 150px;
+    height: auto;
+    padding: 10px;
+  }
+
+  .counts .count-box span {
+    font-size: 30px;
+  }
+
+  .counts .count-box p {
+    font-size: 10px;
+  }
+
+  .counts .count-box a {
+    font-size: 12px;
+  }
+}
 
 
 /*################----Services----################*/
+.services-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.services-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 20px;
+}
+
+
+.service-icon-box {
+  height: 200px;
+  width: 400px;
+}
+
 .services .icon-box {
   text-align: center;
   border: 1px solid #0a0a0a;
@@ -825,8 +985,9 @@ section {
   line-height: 24px;
   font-size: 14px;
   margin-bottom: 0;
-  
+
 }
+
 .services .icon-box:hover {
   background: #55a5ea;
   border-color: #3fbbc0;
@@ -844,78 +1005,192 @@ section {
   background: #3291e6;
 }
 
-.services .icon-box:hover h4 a, .services .icon-box:hover p {
+.services .icon-box:hover h4 a,
+.services .icon-box:hover p {
   color: #111111;
 }
 
 
+/* Patient Portal */
+.login-container {
+  background-color: #1C413B;
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.login-form {
+  max-width: 300px;
+  margin: 0 auto;
+}
+
+.login-form h2 {
+  text-align: center;
+  margin-bottom: 20px;
+  color: #3fbcc0;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 5px;
+  color: #3fbcc0;
+}
+
+.form-group input[type="email"],
+.form-group input[type="password"] {
+  width: 100%;
+  padding: 10px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+}
+
+
+@media (max-width: 768px) {
+
+  .form-group input[type="email"],
+  .form-group input[type="password"] {
+    width: 70%;
+  }
+}
+
+.forgot-password {
+  text-align: right;
+  margin-bottom: 20px;
+  transform: translateX(-20%);
+}
+
+.forgot-password a {
+  color: #3fbcc0;
+}
+
+button[type="submit"] {
+  background-color: #3fbcc0;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  width: 100%;
+}
+
+button[type="submit"]:hover {
+  background-color: #3498db;
+}
+
 
 /*################----Appointments----################*/
-.layout{
-  /*border: 2px solid #ccc; */
+.layout {
   background-color: #3fbcc051;
   border-radius: 30px;
   padding: 50px;
-  width: 700px; 
-  margin: 0 auto; 
+  max-width: 700px;
+  margin: 0 auto;
 }
-.appointment .php-email-form {
-  width: 100%;
+
+.appointment-container {
+  display: flex;
+  flex-direction: column;
 }
 
 .appointment .php-email-form .form-group {
-  padding-bottom: 8px;
+  padding-bottom: 16px;
 }
 
-.appointment .php-email-form input, .appointment .php-email-form textarea, .appointment .php-email-form select {
-  margin-left: 250px;
-  border-radius: 0;
-  box-shadow: none;
-  font-size: 14px;
-  background: #badaf7;
+.appointment .php-email-form input,
+.appointment .php-email-form textarea,
+.appointment .php-email-form select {
+  width: 100%;
   border-radius: 10px;
-  padding: 10px !important;
+  padding: 10px;
   color: #6c757d;
+  background: #badaf7;
+  border: none;
+  margin-bottom: 16px;
 }
 
-.appointment .php-email-form input:focus, .appointment .php-email-form textarea:focus, .appointment .php-email-form select:focus {
+.appointment .php-email-form input:focus,
+.appointment .php-email-form textarea:focus,
+.appointment .php-email-form select:focus {
   border-color: #3fbcc0a6;
-
-}
-
-.appointment .php-email-form input, .appointment .php-email-form select {
-  height: 44px;
-
-}
-
-.appointment .php-email-form textarea {
-  padding: 10px 12px;
 }
 
 .appointment .php-email-form button[type="submit"] {
-  margin-left: 250px;
   background: #3fbcc0a6;
-  border: 0;
+  border: none;
   padding: 10px 35px;
   color: #fff;
   transition: 0.4s;
   border-radius: 50px;
+  cursor: pointer;
 }
 
 .appointment .php-email-form button[type="submit"]:hover {
   background: #3fbcc0bd;
 }
 
+@media (max-width: 768px) {
+  .layout {
+    padding: 60px;
+  }
+}
 
 
 
 /*################----Doctors----################*/
 .doctors {
-  background: #000;
+  background: #111111;
+}
+
+.doctor-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.doctor-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 20px;
+}
+
+
+.text-center {
+  text-align: center;
+}
+
+.white {
+  color: white;
+  margin-bottom: 20px;
+}
+
+@media (max-width: 768px) {
+  .white {
+    width: 350px;
+    text-align: center;
+  }
+}
+
+.doctor-img {
+  height: 200px;
+  object-fit: cover;
+  width: 200px;
+}
+
+.doctor-details {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 5vw;
 }
 
 .doctors .member {
-  background: #111111;
+  background: #222222;
   position: relative;
   border-radius: 10px;
   padding: 30px;
@@ -925,6 +1200,7 @@ section {
   overflow: hidden;
   width: 180px;
   border-radius: 50%;
+  margin-bottom: 20px;
 }
 
 .doctors .member .pic img {
@@ -935,38 +1211,16 @@ section {
   transform: scale(1.1);
 }
 
-.doctors .member .member-info {
-  padding-left: 30px;
-}
-
-.doctors .member h4 {
+.doctors .member-info h4 {
   font-weight: 700;
-  margin-bottom: 5px;
+  margin-bottom: 10px;
   font-size: 20px;
   color: #fff;
 }
 
-.doctors .member span {
-  display: block;
-  font-size: 15px;
-  padding-bottom: 10px;
-  position: relative;
-  font-weight: 500;
-}
-
-.doctors .member span::after {
-  content: '';
-  position: absolute;
-  display: block;
-  width: 50px;
-  height: 1px;
-  background: #fff;
-  bottom: 0;
-  left: 0;
-}
-.doctors .nxt-pg button{
+.doctors .member-info .nxt-pg button {
   background: #55a5ea;
-  border: 0;
+  border: none;
   padding: 10px 35px;
   text-decoration: none;
   transition: 0.4s;
@@ -974,17 +1228,44 @@ section {
   border-radius: 50px;
   color: white;
 }
-.doctors .nxt-pg button:hover{
 
-  background:#55a5ea;
+.doctors .member-info .nxt-pg button:hover {
+  background: #448cc5;
 }
 
+@media (max-width: 991px) {
+  .doctors .member {
+    margin-bottom: 30px;
+  }
+}
 
 
 /*################----Contact----################*/
 .contact .info {
   width: 100%;
-  background: #000;
+  background: #3fbcc051;
+  padding: 50px;
+  border-radius: 10px;
+}
+
+.contact-container {
+  display: flex;
+  /* flex-direction: column; */
+  justify-content: space-around;
+  align-items: center;
+
+}
+
+.contact-info{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@media (max-width: 991px){
+  .contact-container {
+  transform: translateX(-5%);
+  }
 }
 
 .contact .info i {
@@ -1017,33 +1298,38 @@ section {
   color: #fff;
 }
 
-.contact .info .email, .contact .info .phone {
+.contact .info .email,
+.contact .info .phone {
   margin-top: 40px;
 }
 
-.contact .info .email:hover i, .contact .info .address:hover i, .contact .info .phone:hover i {
+.contact .info .email:hover i,
+.contact .info .address:hover i,
+.contact .info .phone:hover i {
   background: #55a5ea;
-  
 }
 
 .contact .php-email-form {
   width: 100%;
-  background: #000;
+  background: #3fbcc051;
+  padding: 30px;
+  border-radius: 25px;
 }
 
 .contact .php-email-form .form-group {
   padding-bottom: 8px;
 }
 
-.contact .php-email-form input, .contact .php-email-form textarea {
+.contact .php-email-form input,
+.contact .php-email-form textarea {
   border-radius: 10px;
   box-shadow: none;
   font-size: 14px;
-
 }
 
 .contact .php-email-form input {
   height: 44px;
+  width: 100%;
 }
 
 .contact .php-email-form textarea {
@@ -1060,156 +1346,183 @@ section {
 }
 
 .contact .php-email-form button[type="submit"]:hover {
-  background:#55a5ea;
+  background: #55a5ea;
 }
 
-@-webkit-keyframes animate-loading {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
+.contact .section-title {
+  text-align: center;
+  margin-bottom: 50px;
 }
 
-@keyframes animate-loading {
-  0% {
-    transform: rotate(0deg);
+.contact .mapouter {
+  position: relative;
+  text-align: right;
+  width: 100%;
+  height: 363px;
+  margin-bottom: 20px;
+}
+
+.contact .gmap_canvas {
+  overflow: hidden;
+  background: none !important;
+  width: 100%;
+  height: 363px;
+}
+
+.contact .gmap_iframe {
+  height: 363px !important;
+}
+
+@media (max-width: 768px) {
+  .contact .info {
+    padding: 30px;
   }
-  100% {
-    transform: rotate(360deg);
+
+  .contact-container {
+    flex-direction: column;
   }
 }
 
-
 /*################--feedback###############*/
 
-.feedback{
+.feed {
   border-radius: 1rem;
-  background-color: #fff;
-  padding: 2rem 4rem;
-  box-shadow: rgba(50,50,93,0.25) 0px 2px 5px -1px,rgba(0, 0,0,0.3) 0px 1px 3px -1px;
-  margin: 50px;
-  width: 60%;
-  margin-left: 250px;
-  padding: 20px;
+  background-color: #3fbcc051;
+  padding: 2rem;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+  margin: 50px auto;
+  max-width: 800px;
+  /* Adjust the max-width based on your design */
 }
-.feedback h1{
-  color: black;
-  font-size: 2.0rem;
+
+@media (max-width: 768px) {
+  .feed {
+    width: 280px;
+  }
+  .service-icon-box {
+    width: 280px;
+  }
+}
+
+.feed h1 {
+  color: #ffffff;
+  font-size: 2rem;
   margin-bottom: 0.3rem;
-  font-family: "Poppins", sans-serif;
 }
-.feedback p{
-  color: black;
+
+.feedback {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.feed p {
+  color: #ffffff;
   font-size: 1.1rem;
-  font-family: "Poppins", sans-serif;
 }
-.emoji{
+
+.emoji {
   padding: 1rem 0;
-  width: 20%;
+  width: 100%;
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
 }
-.btn{
+
+.btn {
   background-color: transparent;
   border: none;
   font-size: 1.5rem;
-  font-family: "Poppins", sans-serif;
   transition: 0.2s ease-in;
   cursor: pointer;
-  &:hover {
-    transform: scale(1.5);
-  }
 }
 
-.ques{
+.btn:hover {
+  transform: scale(1.5);
+}
+
+.ques {
   margin: 0.5rem 0;
 }
-.feedback #textarea{
+
+#textarea {
   padding: 1rem;
-  width: 80%;
-  background-color: transparent;
-  border: 0.1rem solid black;
+  width: 100%;
+  background-color: #fff;
+  border: 0.1rem solid #000;
   border-radius: 0.5rem;
-  color: black;
+  color: #000000;
   margin-bottom: 0.6rem;
-  &:active{
-    box-shadow: rgba(50, 50, 93,0.25) 0px 2px 5px -1px,rgba(0,0,0,0.3) 0px 1px 3px -1px;
-  }
 }
 
-.radiobtn{
-  width: 40%;
+.radiobtn {
+  width: 100%;
   display: flex;
   justify-content: space-between;
-  
 }
-.one{
+
+.one {
   display: flex;
 }
-.input{
+
+.input {
   position: relative;
-  font-family: "Poppins", sans-serif;
-  font-size: 1rem;
   appearance: none;
   width: 2rem;
   height: 2rem;
-  border: 0.1rem solid black;
+  border: 0.1rem solid #000;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
-  &::before{
-    content: " ";
-    width: 1rem;
-    height: 1rem;
-    border-radius: 50%;
-    transition: 0.2s;
-  }
-  &:checked::before{
-    background-color: #1977cc;
+}
 
-  } 
+.input::before {
+  content: " ";
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  transition: 0.2s;
 }
-.label{
-  color: black;
-  font-family: "Poppins", sans-serif;
-  font-size: 1.1rem;
+
+.input:checked::before {
+  background-color: #1977cc;
+}
+
+.label {
+  color: #ffffff;
   margin-left: 1rem;
 }
-.info{
+
+.info {
   width: 100%;
   display: flex;
   justify-content: space-between;
+  align-items: center;
   flex-direction: column;
   margin: 0.5rem 0;
 }
-.center{
+
+.center {
   margin-top: 2rem;
   text-align: center;
-  
-  .button{
-    width: 15%;
-    background-color: white;
-    border-radius: 0.5rem;
-    border: none;
-    font-size: 1.4rem;
-    font-family: "Poppins", sans-serif;
-    padding:1rem 4rem;
-    cursor: pointer;
-    color: #000;
-  }
-  .button:active{
-    background-color: white;
-    transform: scale(1.0);
+}
 
-  }
-  .button:hover{
-    background-color:rgb(63, 155, 124) ;
-  }
+.button {
+  width: 100%;
+  background-color: #fff;
+  border-radius: 0.5rem;
+  border: none;
+  font-size: 1.4rem;
+  padding: 1rem;
+  cursor: pointer;
+  color: #000;
 }
 
+.button:hover {
+  background-color: #3fbcc0;
+}
 
 #footer {
   background: #000;
@@ -1281,7 +1594,8 @@ section {
 
 #footer .footer-top .footer-links ul i {
   padding-right: 2px;
-  color: #57a6ea;;
+  color: #57a6ea;
+  ;
   font-size: 18px;
   line-height: 1;
 }
@@ -1336,13 +1650,14 @@ section {
 }
 
 #footer .footer-top .footer-newsletter form input[type="submit"]:hover {
-  background: #57a6ea;;
+  background: #57a6ea;
+  ;
 }
 
 #footer .copyright {
   justify-content: center;
   padding-top: 10px;
-  margin:auto;
+  margin: auto;
 }
 
 
@@ -1354,8 +1669,8 @@ footer {
 
 #back-to-top-container {
   position: fixed;
-  bottom: 100px; 
-  right: 47px; 
+  bottom: 100px;
+  right: 47px;
   cursor: pointer;
   z-index: 1000;
 }
@@ -1363,8 +1678,8 @@ footer {
 .circle {
   background-color: #00093d;
   border-radius: 50%;
-  width: 35px; 
-  height: 35px; 
+  width: 35px;
+  height: 35px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -1373,53 +1688,65 @@ footer {
 
 #back-to-top {
   width: 40px;
-  height: 40px; 
-  fill: #4178c0; 
+  height: 40px;
+  fill: #4178c0;
   color: #00093d;
   transition: fill 0.3s;
 }
 
 #back-to-top:hover {
-  fill: hsl(214, 50%, 60%); 
+  fill: hsl(214, 50%, 60%);
 }
 
 
 
 /* Style for pateint portal  */
 /* -----***************************************-----  */
- .patient-portal {
+.patient-portal {
   width: 90%;
-  max-width: 600px; /* Maximum width of the container */
-  margin: 0 auto; /* Centers the container */
-   padding: 20px; 
-   box-shadow: 0 4px 8px rgba(0,0,0,0.1);  
-   background-color: white;
-   text-align: center; 
-   margin-bottom: 7%;
-} 
+  max-width: 600px;
+  /* Maximum width of the container */
+  margin: 0 auto;
+  /* Centers the container */
+  padding: 20px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  margin-bottom: 7%;
+}
+
 /* Section title styling */
 .section-title h1 {
-  color: #29888a; /* Sets a blue color for the heading */
+  color: #29888a;
+  /* Sets a blue color for the heading */
   text-align: center;
 }
+
 .section-title p {
   text-align: center;
-  color: #000;
+  /* color: #000; */
   font-size: 16px;
 }
+
 /* Form styling */
 .form-group {
-  margin-bottom: 15px; /* Adds bottom margin for form-group */
+  margin-bottom: 15px;
+  /* Adds bottom margin for form-group */
 }
+
 .form-control2 {
-  width: 60%; /* Full width */
+  width: 60%;
+  /* Full width */
   padding: 10px;
-  border: 1px solid #ccc; /* Light gray border */
-  border-radius: 4px; /* Rounded corners */
+  border: 1px solid #ccc;
+  /* Light gray border */
+  border-radius: 4px;
+  /* Rounded corners */
   text-align: center;
 }
+
 button {
-  background-color: #29888a; /* Blue background for the button */
+  background-color: #29888a;
+  /* Blue background for the button */
   color: white;
   border: none;
   padding: 10px 20px;
@@ -1431,8 +1758,8 @@ button {
 .circle {
   background-color: #00093d;
   border-radius: 50%;
-  width: 35px; 
-  height: 35px; 
+  width: 35px;
+  height: 35px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -1441,12 +1768,12 @@ button {
 
 #back-to-top {
   width: 40px;
-  height: 40px; 
-  fill: #4178c0; 
+  height: 40px;
+  fill: #4178c0;
   color: #00093d;
   transition: fill 0.3s;
 }
 
 #back-to-top:hover {
-  fill: hsl(214, 50%, 60%); 
-}
+  fill: hsl(214, 50%, 60%);
+}
\ No newline at end of file
