From 2bbd32fc5aa103a2a55abd9f839df17ba639608f Mon Sep 17 00:00:00 2001
From: kesharwaniyanshi <kesharwaniyanshi@gmail.com>
Date: Sat, 25 May 2024 11:55:08 +0530
Subject: [PATCH 1/2] made changes to alignment

---
 index.html | 477 +++++++++++++++++++++++++++--------------------------
 style.css  |  85 ++++++----
 2 files changed, 297 insertions(+), 265 deletions(-)
diff --git a/index.html b/index.html
index bd97a1f3..517ef8f6 100644
--- a/index.html
+++ b/index.html
@@ -4,11 +4,11 @@
 <head>
   <meta charset="utf-8">
   <meta content="width=device-width, initial-scale=1.0" name="viewport">
- <link rel="shortcut icon" href="images/Screenshot 2024-05-18 at 10.12.21 PM.png" type="image/x-icon">
+  <link rel="shortcut icon" href="images/Screenshot 2024-05-18 at 10.12.21 PM.png" type="image/x-icon">
   <link rel="stylesheet" type="text/css" href="./style.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
   <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
-  
+
   <title>RapiDoc</title>
   <link
     href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
@@ -25,57 +25,59 @@
   <link href="swiper/swiper-bundle.min.css" rel="stylesheet">
   <link href="style.css" rel="stylesheet">
   <link href="patient-portal.css" rel="stylesheet">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+    integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
 
 </head>
 
 <body>
-      <!-- ############# Header ############# -->
-  
-      <header class="header_container">
-        <div class="img">
-        <img src="images/rd.png" width="70" height="80"> 
-      </div>
-      <div class="text" style="margin-left: -33rem;">
-  
-        <h1 class="logo me-auto"><a style="text-decoration: none; color: #55a5ea;" href="index.html">RapiDoc</a></h1>
-      </div>
-      <nav class="nav_menu">
-
-        <ul class="nav_link">
-          <li><a href="index.html">Home</a></li>
-          <li><a href="#about">About</a></li>
-          <li><a href="Html-Files/news.html">News</a></li>
-          <li><a href="#services">Services</a></li>
-          <li><a href="#patient-portal">Patient Portal</a></li>
-          <li><a href="#doctors">Doctor</a></li>
-          <li><a href="Html-Files/contact.html">Contact us</a></li>
-        </ul>
-      </nav>
-      </div>
-    </header>
+  <!-- ############# Header ############# -->
+
+  <header class="header_container" >
+    <div class="img">
+      <img src="images/rd.png" width="70" height="80">
+    </div>
+    <div class="text" style="margin-left: -33rem;">
+
+      <h1 class="logo me-auto"><a style="text-decoration: none; color: #55a5ea;" href="index.html">RapiDoc</a></h1>
+    </div>
+    <nav class="nav_menu">
+
+      <ul class="nav_link">
+        <li><a href="index.html">Home</a></li>
+        <li><a href="#about">About</a></li>
+        <li><a href="Html-Files/news.html">News</a></li>
+        <li><a href="#services">Services</a></li>
+        <li><a href="#patient-portal">Patient Portal</a></li>
+        <li><a href="#doctors">Doctor</a></li>
+        <li><a href="Html-Files/contact.html">Contact us</a></li>
+      </ul>
+    </nav>
+    </div>
+  </header>
 
 
-  <div class="container">
+  <div class="container" style="display:flex ;">
     <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>
+        <a href="#about" class="btn-get-started scrollto">Download App</a>
       </h2>
-    </div>    
+    </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">
 
-   
-   
+
+
     <!-- ############ Featured Services Section ############ -->
-    
-    
+
+
     <section id="featured-services" class="featured-services">
       <div class="container-fluid" data-aos="fade-up">
 
@@ -120,15 +122,15 @@ <h4 class="title"><a href="">Medicine use</a></h4>
       </div>
     </section><!-- End Featured Services Section -->
 
-   
+
     <!-- ################### About Section ################### -->
-   
-   
+
+
     <section id="about" class="about">
       <div class="container-fluid" data-aos="fade-up">
         <div class="section-title">
           <h2 style="text-align: center;">About Us</h2>
-          <p >RapiDoc is an online platform which enables you to get information about your nearest hospitals and
+          <p>RapiDoc is an online platform which enables you to get information about your nearest hospitals and
             healthcare facilities. It aims to address health-related issues. It is a one-stop destination for all your
             medical needs providing 24X7 helpline services for conventional benefits.</p>
         </div>
@@ -138,7 +140,7 @@ <h2 style="text-align: center;">About Us</h2>
      align-items-stretch position-relative">
             <a href="https://youtu.be/ImQqQ9_s38k" class="glightbox play-btn mb-4"></a>
           </div> -->
- <div class="col-xl-7 col-lg-6 icon-boxes d-flex flex-column align-items-stretch
+          <div class="col-xl-7 col-lg-6 icon-boxes d-flex flex-column align-items-stretch
      justify-content-center py-5 px-lg-5">
 
             <div class="icon-box">
@@ -146,7 +148,7 @@ <h2 style="text-align: center;">About Us</h2>
               <h4 class="title"><a href="">HEALTH CHECKUPS</a></h4>
               <p class="description">Bootcamps, personalised check-ups, newsletters, it’s all here.</p>
             </div>
-                   
+
             <div class="icon-box">
               <div class="icon"><i class="fas fa-stethoscope"></i></div>
               <h4 class="title"><a href="">EMERGENCY WARDS</a></h4>
@@ -167,10 +169,10 @@ <h4 class="title"><a href="">SERVICES</a></h4>
       </div>
     </section><!-- End About Section -->
 
-   
+
     <!-- ################## Counts Section ################## -->
-   
-   
+
+
     <section id="counts" class="counts">
       <div class="container" data-aos="fade-up">
 
@@ -221,20 +223,18 @@ <h4 class="title"><a href="">SERVICES</a></h4>
       </div>
     </section><!-- End Counts Section -->
 
-   
+
     <!-- #################### Services Section #################### -->
-   
-   
-    <section id="services" class="services">
-      <div class="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>
 
+    <section id="services" class="services">
+      <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>
+      <div class="container">
         <div class="row">
-          <div class="col-lg-4 col-md-6 d-flex align-items-stretch">
+          <div class="col-lg-4 col-md-3 d-flex align-items-stretch ">
             <div class="icon-box">
               <div class="icon"><i class="fas fa-heartbeat"></i></div>
               <h4><a href="">Clinics/Labs</a></h4>
@@ -242,7 +242,7 @@ <h4><a href="">Clinics/Labs</a></h4>
             </div>
           </div>
 
-          <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0">
+          <div class="col-lg-4 col-md-6 d-flex align-items-stretch ">
             <div class="icon-box">
               <div class="icon"><i class="fas fa-pills"></i></div>
               <h4><a href="https://www.1mg.com">Pharmacy</a></h4>
@@ -250,7 +250,7 @@ <h4><a href="https://www.1mg.com">Pharmacy</a></h4>
             </div>
           </div>
 
-          <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0">
+          <div class="col-lg-4 col-md-6 d-flex align-items-stretch ">
             <div class="icon-box">
               <div class="icon"><i class="fas fa-hospital-user"></i></div>
               <h4><a href="">Daily Feed</a></h4>
@@ -259,7 +259,7 @@ <h4><a href="">Daily Feed</a></h4>
             </div>
           </div>
 
-          <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4">
+          <div class="col-lg-4  col-md-6 d-flex align-items-stretch ">
             <div class="icon-box">
               <div class="icon"><i class="fas fa-dna"></i></div>
               <h4><a href="Html-Files/blood.html">Blood Bank</a></h4>
@@ -267,7 +267,7 @@ <h4><a href="Html-Files/blood.html">Blood Bank</a></h4>
             </div>
           </div>
 
-          <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4">
+          <div class="col-lg-4 col-md-6 d-flex align-items-stretch ">
             <div class="icon-box">
               <div class="icon"><i class="fas fa-wheelchair"></i></div>
               <h4><a href="">Disabled Person</a></h4>
@@ -275,7 +275,7 @@ <h4><a href="">Disabled Person</a></h4>
             </div>
           </div>
 
-          <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4">
+          <div class="col-lg-4 col-md-6 d-flex align-items-stretch">
             <div class="icon-box">
               <div class="icon"><i class="fas fa-notes-medical"></i></div>
               <h4><a href="https://www.medicalnewstoday.com/">Health Post</a></h4>
@@ -289,134 +289,134 @@ <h4><a href="https://www.medicalnewstoday.com/">Health Post</a></h4>
     </section><!-- End Services Section -->
 
     <!-- Add Patient Portal Section -->
-  <section id="patient-portal" class="patient-portal">
-    <div class="container">
-
+    <section id="patient-portal" class="patient-portal">
       <div class="section-title">
         <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-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 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>
 
-      <!-- Add Forgot Password Link -->
-      <div class="forgot-password">
-        <a href="forgot-password.php">Forgot Your Password?</a>
       </div>
+    </section><!-- End Patient Portal Section -->
 
-    </div>
-  </section><!-- End Patient Portal 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><br><br>
-        </div>
+      <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>
         <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>
+            <div class="row">
+              <div class="col-md-2 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="date" name="date" class="form-control datepicker" id="date"
+                  placeholder="Appointment Date" width="60%">
+              </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>
+            <!-- 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>
+            <!-- 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>
+            <!-- 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="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>
 
@@ -426,21 +426,22 @@ <h2>Make an Appointment</h2>
 
 
     <!-- ################# Doctors Section ################# -->
-  
-  
+
+
     <section id="doctors" class="doctors">
+      
+      <div class="section-title">
+        <h2>Doctors</h2>
+        <p>Don’t compromise your health when we have listed the best doctors for you!</p>
+      </div>
       <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>
-
         <div class="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="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>
@@ -462,7 +463,8 @@ <h4>Gynecologist</h4>
 
           <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="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>
@@ -473,7 +475,8 @@ <h4>Cardiologist</h4>
 
           <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="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>
@@ -486,17 +489,16 @@ <h4>ENT</h4>
     </section><!-- End Doctors Section -->
 
 
-     <!-- ################# Contact Section ################# -->
-    
-    
-     <section id="contact" class="contact">
-      <div class="container">
+    <!-- ################# Contact Section ################# -->
 
-        <div class="section-title">
-          <h2>Contact</h2>
-          <p>Located your appointment. Feel free to give us feedback and help us improve our digital med care.</p>
-        </div>
+
+    <section id="contact" class="contact">
+      <div class="section-title">
+        <h2>Contact</h2>
+        <p>Located your appointment. Feel free to give us feedback and help us improve our digital med care.</p>
       </div>
+    </div>
+    <div class="container">
 
       <!--Google map-->
       <div class="mapouter">
@@ -525,15 +527,16 @@ <h2>Contact</h2>
         </style>
       </div><br>
 
-      <div class="container">
-        <div class="row mt-5">
+      <div class="container"  >
+        <div class="row mt-2" style="display: flex; flex-direction: row; align-items: stretch; justify-content: space-around;">
 
           <div class="col-lg-4">
             <div class="info">
               <div class="address">
                 <i class="fa fa-location-dot"></i>
                 <h4>Location:</h4>
-                <p><a href="https://www.google.com/maps/search/?api=1&query=IGDTUW,Delhi" target="_blank">IGDTUW, Delhi</a></p>
+                <p><a href="https://www.google.com/maps/search/?api=1&query=IGDTUW,Delhi" target="_blank">IGDTUW,
+                    Delhi</a></p>
               </div>
 
               <div class="email">
@@ -550,7 +553,7 @@ <h4>Call:</h4>
             </div>
           </div><br><br>
 
-          <div class="col-lg-8 mt-5 mt-lg-0">
+          <div class="col-lg-8 mt-5 mt-lg-0" >
             <form action="" role="form" class="php-email-form">
               <div class="row">
                 <div class="col-md-6 form-group">
@@ -578,49 +581,49 @@ <h4>Call:</h4>
 
 
     <!-- Feedback System-->
-  <section id="feedback" class="feed">
-    <div class="feedback">
-      <h1>Give Us Your Valuable Feedback.</h1>
-      <p>Your feedback is very important for Rapidoc.</p>
-      <div class="emoji">
+    <section id="feedback" class="feed">
+      <div class="feedback">
+        <h1>Give Us Your Valuable Feedback.</h1>
+        <p>Your feedback is very important for Rapidoc.</p>
+        <div class="emoji">
           <button class="btn normal">&#128578;</button>
           <button class="btn normal">&#128515;</button>
           <button class="btn normal">&#128519;</button>
           <button class="btn normal">&#128531;</button>
           <button class="btn normal">&#128532;</button>
           <button class="btn normal">&#128545;</button>
-      </div>
-      <p class="ques">What you want to say?</p>
-      <textarea id="textarea" cols="20" rows="5"></textarea>
-      <p class="ques">Are you satisfied with rapidoc?</p>
-      <div class="radiobtn">
+        </div>
+        <p class="ques">What you want to say?</p>
+        <textarea id="textarea" cols="20" rows="5"></textarea>
+        <p class="ques">Are you satisfied with rapidoc?</p>
+        <div class="radiobtn">
           <div class="one">
-            <input class="input"  type="radio" name="one" id="Yes" />
+            <input class="input" type="radio" name="one" id="Yes" />
             <label class="label" for="Yes">Yes</label>
           </div>
           <div class="one">
-            <input class="input"  type="radio" name="one" id="No" />
+            <input class="input" type="radio" name="one" id="No" />
             <label class="label" for="No">No</label>
           </div>
+        </div>
       </div>
-    </div>
-    <div class="info">
-      <div class="center">
+      <div class="info">
+        <div class="center">
           <button class="btn button">Submit</button>
+        </div>
+
       </div>
-      
-    </div>
-  </section>
+    </section>
 
 
   </main><!-- End #main -->
-<hr>
+  <hr>
   <!-- ############### Footer ############### -->
- 
- 
+
+
   <footer id="footer">
     <div class="footer-top">
-      <div class="container">
+      <div class="container" style="display: flex; flex-direction: column ; align-items: flex-start; justify-content: center;">
         <div class="row">
 
           <div class="col-lg-4 col-md-6">
@@ -687,41 +690,43 @@ <h4>Daily Newsletter</h4>
 
   <div id="back-to-top-container">
     <div class="circle">
-  <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
-    <path d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"/>
-  </svg>
-  </div>
+      <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+        class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
+        <path
+          d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z" />
+      </svg>
+    </div>
   </div>
   <!-- JS Files -->
   <script>
     var currentYear = new Date().getFullYear();
     document.getElementById('year').textContent = currentYear;
   </script>
-  
- <script>
-  document.addEventListener("DOMContentLoaded", function () {
+
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
       const backToTopButton = document.getElementById('back-to-top-container');
-  
+
       function checkButtonVisibility() {
-          if (window.innerWidth > 100 && window.scrollY > 100) {
-              backToTopButton.style.display = 'block';
-          } else {
-              backToTopButton.style.display = 'none';
-          }
+        if (window.innerWidth > 100 && window.scrollY > 100) {
+          backToTopButton.style.display = 'block';
+        } else {
+          backToTopButton.style.display = 'none';
+        }
       }
-  
+
       window.addEventListener('scroll', checkButtonVisibility);
       window.addEventListener('resize', checkButtonVisibility);
-  
+
       backToTopButton.addEventListener('click', function () {
-          window.scrollTo({
-              top: 0,
-              behavior: 'smooth' 
-          });
+        window.scrollTo({
+          top: 0,
+          behavior: 'smooth'
+        });
       });
       checkButtonVisibility();
-  });
-  
+    });
+
   </script>
 
   <!-- JS Files -->
@@ -737,4 +742,4 @@ <h4>Daily Newsletter</h4>
   <script src="https://mediafiles.botpress.cloud/b1d766f9-2fd0-4a60-96bb-fc1f494d156c/webchat/config.js" defer></script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
index 3eb3ed8c..71f880c8 100644
--- a/style.css
+++ b/style.css
@@ -50,7 +50,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .container {
-  display: flex;
+  /* display: ; */
   font-family: sans-serif;
   padding-top: 80px;
 }
@@ -703,18 +703,21 @@ section {
 
 .counts .count-box {
   box-shadow: -10px -5px 40px 0 rgba(0, 0, 0, 0.1);
-  padding: 50px;
+  padding: 50px 80px ;
   margin: 5%;
-  width: calc(100%-15px);
+  width: calc(100%-5px);
+  height: 100%;
   background:#1c413b;
-  align-content: center;
+  align-content:space-evenly;
   border-radius: 15px;
   /* margin-top: 10px; */
 }
 .row-d{
   display: flex;
-  /* margin:10px 20px 10px 20px; */
+  margin:0px 20px 0px 20px;
   align-items: center;
+  justify-content: space-between;
+  /* flex-wrap: wrap; */
 
 }
 .counts .count-box i {
@@ -726,7 +729,7 @@ section {
 .counts .count-box span{
   font-size: 42px;
   line-height: 24px;
-  display: block;
+  display: inline-block;
   font-weight: 700;
   color: #f9f4f4;
   margin-left: 50px;
@@ -734,21 +737,21 @@ section {
 .container .drop .content span{
   font-size: 42px;
   line-height: 24px;
-  display: block;
+  display: inline-block;
   font-weight: 700;
   color: #faf8f8;
 }
 .container .drop .content p{
   font-size: 30px;
   line-height: 24px;
-  display: block;
+  display: inline-block;
   justify-content: center;
   font-weight: 700;
   color: #f8f8f8;
 }
 .counts .count-box p {
-  padding: 30px 0 0 0;
-  margin: 0;
+  padding: 30px 0 0 0;  
+  /* margin: 0; */
   font-family: "Roboto", sans-serif;
   font-size: 14px;
   color: #fffcfc;
@@ -757,7 +760,7 @@ section {
 .counts .count-box a {
   font-weight: 600;
   display: block;
-  margin-top: 10px;
+  /* margin-top: 10px; */
   color: #faf8f8;
   font-size: 15px;
   font-family: "Poppins", sans-serif;
@@ -773,8 +776,14 @@ section {
 /*################----Services----################*/
 .services .icon-box {
   text-align: center;
+  margin-left: 80px;
+  margin-right: 80px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   border: 1px solid #0a0a0a;
-  padding: 80px 20px;
+  padding: 30px 20px;
   transition: all ease-in-out 0.3s;
   background-color: #1c413b;
 }
@@ -826,6 +835,7 @@ section {
   font-size: 14px;
   margin-bottom: 0;
   
+  
 }
 .services .icon-box:hover {
   background: #55a5ea;
@@ -857,7 +867,7 @@ section {
   border-radius: 30px;
   padding: 50px;
   width: 700px; 
-  margin: 0 auto; 
+  margin: 0 auto;
 }
 .appointment .php-email-form {
   width: 100%;
@@ -868,7 +878,7 @@ section {
 }
 
 .appointment .php-email-form input, .appointment .php-email-form textarea, .appointment .php-email-form select {
-  margin-left: 250px;
+  margin-left: 175px;
   border-radius: 0;
   box-shadow: none;
   font-size: 14px;
@@ -885,7 +895,7 @@ section {
 
 .appointment .php-email-form input, .appointment .php-email-form select {
   height: 44px;
-
+  width: 50%;
 }
 
 .appointment .php-email-form textarea {
@@ -912,6 +922,7 @@ section {
 /*################----Doctors----################*/
 .doctors {
   background: #000;
+  /* display: flex; */
 }
 
 .doctors .member {
@@ -919,11 +930,18 @@ section {
   position: relative;
   border-radius: 10px;
   padding: 30px;
+  margin: 10px 500px ;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
 }
 
 .doctors .member .pic {
   overflow: hidden;
   width: 180px;
+  /* margin: 0 130px; */
   border-radius: 50%;
 }
 
@@ -984,7 +1002,10 @@ section {
 /*################----Contact----################*/
 .contact .info {
   width: 100%;
-  background: #000;
+  background:#0a0a0a;
+  border-radius: 15px;
+  padding: 15px;
+  /* border: 2px; */
 }
 
 .contact .info i {
@@ -993,7 +1014,7 @@ section {
   float: left;
   width: 44px;
   height: 44px;
-  background: #0a0a0a;
+  background:#0a0a0a;
   border: 2px solid #55a5ea;
   display: flex;
   justify-content: center;
@@ -1044,6 +1065,7 @@ section {
 
 .contact .php-email-form input {
   height: 44px;
+  width: 100%;
 }
 
 .contact .php-email-form textarea {
@@ -1209,7 +1231,7 @@ section {
     background-color:rgb(63, 155, 124) ;
   }
 }
-
+/* 
 
 #footer {
   background: #000;
@@ -1344,7 +1366,7 @@ section {
   padding-top: 10px;
   margin:auto;
 }
-
+ */
 
 /*################----Back to top----################*/
 footer {
@@ -1389,13 +1411,14 @@ footer {
 /* -----***************************************-----  */
  .patient-portal {
   width: 90%;
-  max-width: 600px; /* Maximum width of the container */
+  max-width: 900px; /* 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;
+  padding: 20px; 
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);  
+   background-color:#3fbcc051;
    text-align: center; 
    margin-bottom: 7%;
+   border-radius: 20px;
 } 
 /* Section title styling */
 .section-title h1 {
@@ -1403,20 +1426,24 @@ footer {
   text-align: center;
 }
 .section-title p {
-  text-align: center;
-  color: #000;
-  font-size: 16px;
+  text-align:center;
+  color: white;
+  font-size: 20px;
 }
 /* Form styling */
 .form-group {
+  margin-top: 15px;
   margin-bottom: 15px; /* Adds bottom margin for form-group */
 }
-.form-control2 {
-  width: 60%; /* Full width */
+.forgot-password{
+  margin-top: 20px;
+}
+.form-control {
+  width: 50%; /* Full width */
   padding: 10px;
   border: 1px solid #ccc; /* Light gray border */
   border-radius: 4px; /* Rounded corners */
-  text-align: center;
+  /* text-align: center; */
 }
 button {
   background-color: #29888a; /* Blue background for the button */

From 849b9051df3455f7abffea20ad2357c0fecf8538 Mon Sep 17 00:00:00 2001
From: kesharwaniyanshi <kesharwaniyanshi@gmail.com>
Date: Sat, 25 May 2024 14:50:46 +0530
Subject: [PATCH 2/2] Fixed alignment of home page

---
 index.html | 174 ++++++++++++++--------------
 style.css  | 329 ++++++++++++++++++++++++++++++++++-------------------
 2 files changed, 299 insertions(+), 204 deletions(-)

diff --git a/index.html b/index.html
index 517ef8f6..e40edd39 100644
--- a/index.html
+++ b/index.html
@@ -34,7 +34,7 @@
 <body>
   <!-- ############# Header ############# -->
 
-  <header class="header_container" >
+  <header class="header_container">
     <div class="img">
       <img src="images/rd.png" width="70" height="80">
     </div>
@@ -321,12 +321,12 @@ <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>
+        <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>
         <div class="layout">
           <form accept="" role="form" class="php-email-form">
             <div class="row">
@@ -342,11 +342,11 @@ <h2>Make an Appointment</h2>
             </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" width="60%">
+                <input type="date" name="date" class="form-control datepicker" id="date" placeholder="Appointment Date"
+                  width="60%">
               </div>
               <div class="col-md-4 form-group mt-3">
-                <select  name="age" id="age" class="form-select">
+                <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>
@@ -429,7 +429,7 @@ <h2>Make an Appointment</h2>
 
 
     <section id="doctors" class="doctors">
-      
+
       <div class="section-title">
         <h2>Doctors</h2>
         <p>Don’t compromise your health when we have listed the best doctors for you!</p>
@@ -497,86 +497,90 @@ <h4>ENT</h4>
         <h2>Contact</h2>
         <p>Located your appointment. Feel free to give us feedback and help us improve our digital med care.</p>
       </div>
-    </div>
-    <div class="container">
-
-      <!--Google map-->
-      <div class="mapouter">
-        <div class="gmap_canvas"><iframe class="gmap_iframe" width="100%" frameborder="0" scrolling="no"
-            marginheight="0" marginwidth="0"
-            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3500.8055368048804!2d77.22981385036265!3d28.6655407892513!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd0683919c3b%3A0xf5fc331b74c2b9e2!2sIndira%20Gandhi%20Delhi%20Technical%20University%20for%20Women!5e0!3m2!1sen!2sin!4v1679424592719!5m2!1sen!2sin"></iframe><a
-            href="https://www.fnfgo.com/">FNF Mods</a></div>
-        <style>
-          .mapouter {
-            position: relative;
-            text-align: right;
-            width: 100%;
-            height: 363px;
-          }
-
-          .gmap_canvas {
-            overflow: hidden;
-            background: none !important;
-            width: 100%;
-            height: 363px;
-          }
-
-          .gmap_iframe {
-            height: 363px !important;
-          }
-        </style>
-      </div><br>
-
-      <div class="container"  >
-        <div class="row mt-2" style="display: flex; flex-direction: row; align-items: stretch; justify-content: space-around;">
-
-          <div class="col-lg-4">
-            <div class="info">
-              <div class="address">
-                <i class="fa fa-location-dot"></i>
-                <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 class="email">
-                <i class="fa fa-envelope"></i>
-                <h4>Email:</h4>
-                <p><a href="mailto:rapidoc@mail.com">rapidoc@mail.com</a></p>
-              </div>
+      </div>
+      <div class="container">
 
-              <div class="phone">
-                <i class="fa fa-phone"></i>
-                <h4>Call:</h4>
-                <p><a href="tel:+91 1234567890">+91 1234567890</a></p>
-              </div>
-            </div>
-          </div><br><br>
+        <!--Google map-->
+        <div class="mapouter">
+          <div class="gmap_canvas"><iframe class="gmap_iframe" width="100%" frameborder="0" scrolling="no"
+              marginheight="0" marginwidth="0"
+              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3500.8055368048804!2d77.22981385036265!3d28.6655407892513!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd0683919c3b%3A0xf5fc331b74c2b9e2!2sIndira%20Gandhi%20Delhi%20Technical%20University%20for%20Women!5e0!3m2!1sen!2sin!4v1679424592719!5m2!1sen!2sin"></iframe><a
+              href="https://www.fnfgo.com/">FNF Mods</a></div>
+          <style>
+            .mapouter {
+              position: relative;
+              text-align: right;
+              width: 100%;
+              height: 363px;
+            }
+
+            .gmap_canvas {
+              overflow: hidden;
+              background: none !important;
+              width: 100%;
+              height: 363px;
+            }
+
+            .gmap_iframe {
+              height: 363px !important;
+            }
+          </style>
+        </div><br>
+
+        <div class="container" >
+          <div class="row mt-2"
+            style="display: flex; flex-direction: row; align-items: stretch; justify-content: space-around;">
+
+            <div class="col-lg-4">
+              <div class="info">
+                <div class="address">
+                  <i class="fa fa-location-dot"></i>
+                  <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 class="col-lg-8 mt-5 mt-lg-0" >
-            <form action="" role="form" class="php-email-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 class="email">
+                  <i class="fa fa-envelope"></i>
+                  <h4>Email:</h4>
+                  <p><a href="mailto:rapidoc@mail.com">rapidoc@mail.com</a></p>
                 </div>
-                <div class="col-md-6 form-group mt-3 mt-md-0">
-                  <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
+
+                <div class="phone">
+                  <i class="fa fa-phone"></i>
+                  <h4>Call:</h4>
+                  <p><a href="tel:+91 1234567890">+91 1234567890</a></p>
                 </div>
               </div>
-              <div class="form-group mt-3">
-                <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required>
-              </div>
-              <div class="form-group mt-3">
-                <textarea class="form-control" name="message" rows="5" placeholder="Message" required></textarea>
-              </div>
-              <div class="text-center"><button type="submit">Send Message</button></div>
-            </form>
+            </div><br><br>
+
+          
+            <div class="col-lg-8 mt-5 mt-lg-0">
+              <form action="" role="form" class="php-email-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=""
+                      fdprocessedid="b0eyy">
+                  </div>
+                  <div class="col-md-6 form-group mt-3 mt-md-0">
+                    <input type="email" class="form-control" name="email" id="email" placeholder="Your Email"
+                      required="" fdprocessedid="ajhhhr">
+                  </div>
+                </div>
+                <div class="form-group mt-3">
+                  <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required=""
+                    fdprocessedid="mbdam9">
+                </div>
+                <div class="form-group mt-3">
+                  <textarea class="form-control" name="message" rows="5" placeholder="Message" required=""></textarea>
+                </div>
+                <div class="text-center"><button type="submit" fdprocessedid="dyl49d">Send Message</button></div>
+              </form>
 
+            </div>
           </div>
 
         </div>
-
-      </div>
     </section><!-- End Contact Section -->
 
 
@@ -622,9 +626,9 @@ <h1>Give Us Your Valuable Feedback.</h1>
 
 
   <footer id="footer">
-    <div class="footer-top">
-      <div class="container" style="display: flex; flex-direction: column ; align-items: flex-start; justify-content: center;">
-        <div class="row">
+    <div class="footer-top" >
+      <div class="container" >
+        <div class="row-d" >
 
           <div class="col-lg-4 col-md-6">
             <div class="footer-info">
@@ -681,7 +685,7 @@ <h4>Daily Newsletter</h4>
       </div>
     </div>
 
-    <div class="container">
+    <div class="container" >
       <div class="copyright">
         &copy; 2024 Copyright <strong><span>RapiDoc</span></strong>. All Rights Reserved
       </div>
diff --git a/style.css b/style.css
index 71f880c8..3048d6f9 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,4 @@
-body{
+body {
   font-family: "Open Sans", sans-serif;
   color: #fff;
   background-color: #000;
@@ -14,7 +14,12 @@ a:hover {
   text-decoration: none;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: "Raleway", sans-serif;
 }
 
@@ -92,7 +97,7 @@ h1, h2, h3, h4, h5, h6 {
 
 }
 
-.container-head{
+.container-head {
   display: grid;
   align-items: center;
   grid-template-columns: 1fr 2fr 13fr 3fr;
@@ -170,13 +175,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 +194,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 +228,7 @@ h1, h2, h3, h4, h5, h6 {
   .mobile-nav-toggle {
     display: block;
   }
+
   .navbar ul {
     display: none;
   }
@@ -254,7 +265,7 @@ h1, h2, h3, h4, h5, h6 {
   transition: 0.3s;
 }
 
-.navbar-mobile > ul > li {
+.navbar-mobile>ul>li {
   padding: 0;
 }
 
@@ -265,13 +276,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 +298,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 +351,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 +389,8 @@ section {
   color: #fff;
   background: #55a5ea;
 }
-#home video{
+
+#home video {
   margin-top: -70px;
   margin-left: 50px;
   height: 900px;
@@ -388,7 +405,7 @@ section {
 
 @media (min-width: 1024px) {
   #home {
-    background-attachment:fixed;
+    background-attachment: fixed;
   }
 }
 
@@ -397,13 +414,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 +451,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 +483,7 @@ section {
   color: #3fbcc0a4;
   transition: all 0.3s ease-in-out;
 }
+
 .featured-services .icon2 {
   margin-bottom: 15px;
 }
@@ -473,6 +494,7 @@ section {
   color: #55a5ea;
   transition: all 0.3s ease-in-out;
 }
+
 .featured-services .icon3 {
   margin-bottom: 15px;
 }
@@ -483,6 +505,7 @@ section {
   color: #55a5ea;
   transition: all 0.3s ease-in-out;
 }
+
 .featured-services .icon4 {
   margin-bottom: 15px;
 }
@@ -510,20 +533,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 +562,7 @@ section {
   color: #55a5ea;
   margin-bottom: 15px;
 }
+
 .about .icon-boxes h3 {
   font-size: 28px;
   font-weight: 700;
@@ -578,7 +606,7 @@ section {
 
 .about .icon-box .title {
   margin-left: 85px;
-  
+
   font-weight: 700;
   margin-bottom: 10px;
   font-size: 18px;
@@ -602,7 +630,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 +704,7 @@ section {
     transform: scale(0.6, 0.6);
     opacity: 1;
   }
+
   100% {
     transform: scale(1, 1);
     opacity: 0;
@@ -687,6 +716,7 @@ section {
     transform: scale(0.6, 0.6);
     opacity: 1;
   }
+
   100% {
     transform: scale(1, 1);
     opacity: 0;
@@ -703,30 +733,41 @@ section {
 
 .counts .count-box {
   box-shadow: -10px -5px 40px 0 rgba(0, 0, 0, 0.1);
-  padding: 50px 80px ;
+  padding: 50px 80px;
   margin: 5%;
   width: calc(100%-5px);
   height: 100%;
-  background:#1c413b;
-  align-content:space-evenly;
+  background: #1c413b;
+  align-content: space-evenly;
   border-radius: 15px;
   /* margin-top: 10px; */
 }
-.row-d{
+/* .row {
+  --bs-gutter-x: 1.5rem;
+  --bs-gutter-y: 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc(var(--bs-gutter-y)* -1);
+  margin-right: calc(var(--bs-gutter-x) / -2);
+  margin-left: calc(var(--bs-gutter-x) / -2);
+} */
+
+.row-d {
   display: flex;
-  margin:0px 20px 0px 20px;
+  margin: 0px 20px 0px 20px;
   align-items: center;
   justify-content: space-between;
   /* flex-wrap: wrap; */
 
 }
+
 .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: inline-block;
@@ -734,14 +775,16 @@ section {
   color: #f9f4f4;
   margin-left: 50px;
 }
-.container .drop .content span{
+
+.container .drop .content span {
   font-size: 42px;
   line-height: 24px;
   display: inline-block;
   font-weight: 700;
   color: #faf8f8;
 }
-.container .drop .content p{
+
+.container .drop .content p {
   font-size: 30px;
   line-height: 24px;
   display: inline-block;
@@ -749,8 +792,9 @@ section {
   font-weight: 700;
   color: #f8f8f8;
 }
+
 .counts .count-box p {
-  padding: 30px 0 0 0;  
+  padding: 30px 0 0 0;
   /* margin: 0; */
   font-family: "Roboto", sans-serif;
   font-size: 14px;
@@ -834,9 +878,10 @@ section {
   line-height: 24px;
   font-size: 14px;
   margin-bottom: 0;
-  
-  
+
+
 }
+
 .services .icon-box:hover {
   background: #55a5ea;
   border-color: #3fbbc0;
@@ -854,21 +899,23 @@ 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;
 }
 
 
 
 /*################----Appointments----################*/
-.layout{
+.layout {
   /*border: 2px solid #ccc; */
   background-color: #3fbcc051;
   border-radius: 30px;
   padding: 50px;
-  width: 700px; 
+  width: 700px;
   margin: 0 auto;
 }
+
 .appointment .php-email-form {
   width: 100%;
 }
@@ -877,7 +924,9 @@ section {
   padding-bottom: 8px;
 }
 
-.appointment .php-email-form input, .appointment .php-email-form textarea, .appointment .php-email-form select {
+.appointment .php-email-form input,
+.appointment .php-email-form textarea,
+.appointment .php-email-form select {
   margin-left: 175px;
   border-radius: 0;
   box-shadow: none;
@@ -888,12 +937,15 @@ section {
   color: #6c757d;
 }
 
-.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 {
+.appointment .php-email-form input,
+.appointment .php-email-form select {
   height: 44px;
   width: 50%;
 }
@@ -930,7 +982,7 @@ section {
   position: relative;
   border-radius: 10px;
   padding: 30px;
-  margin: 10px 500px ;
+  margin: 10px 500px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -982,7 +1034,8 @@ section {
   bottom: 0;
   left: 0;
 }
-.doctors .nxt-pg button{
+
+.doctors .nxt-pg button {
   background: #55a5ea;
   border: 0;
   padding: 10px 35px;
@@ -992,9 +1045,10 @@ section {
   border-radius: 50px;
   color: white;
 }
-.doctors .nxt-pg button:hover{
 
-  background:#55a5ea;
+.doctors .nxt-pg button:hover {
+
+  background: #55a5ea;
 }
 
 
@@ -1002,7 +1056,7 @@ section {
 /*################----Contact----################*/
 .contact .info {
   width: 100%;
-  background:#0a0a0a;
+  background: #0a0a0a;
   border-radius: 15px;
   padding: 15px;
   /* border: 2px; */
@@ -1014,7 +1068,7 @@ section {
   float: left;
   width: 44px;
   height: 44px;
-  background:#0a0a0a;
+  background: #0a0a0a;
   border: 2px solid #55a5ea;
   display: flex;
   justify-content: center;
@@ -1038,13 +1092,16 @@ 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 {
@@ -1056,7 +1113,8 @@ section {
   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;
@@ -1082,13 +1140,14 @@ 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);
   }
@@ -1098,6 +1157,7 @@ section {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
@@ -1106,49 +1166,55 @@ section {
 
 /*################--feedback###############*/
 
-.feedback{
+.feedback {
   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;
+  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;
 }
-.feedback h1{
+
+.feedback h1 {
   color: black;
   font-size: 2.0rem;
   margin-bottom: 0.3rem;
   font-family: "Poppins", sans-serif;
 }
-.feedback p{
+
+.feedback p {
   color: black;
   font-size: 1.1rem;
   font-family: "Poppins", sans-serif;
 }
-.emoji{
+
+.emoji {
   padding: 1rem 0;
   width: 20%;
   display: flex;
   justify-content: space-between;
 }
-.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{
+.ques {
   margin: 0.5rem 0;
 }
-.feedback #textarea{
+
+.feedback #textarea {
   padding: 1rem;
   width: 80%;
   background-color: transparent;
@@ -1156,21 +1222,24 @@ section {
   border-radius: 0.5rem;
   color: black;
   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;
+
+  &:active {
+    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
   }
 }
 
-.radiobtn{
+.radiobtn {
   width: 40%;
   display: flex;
   justify-content: space-between;
-  
+
 }
-.one{
+
+.one {
   display: flex;
 }
-.input{
+
+.input {
   position: relative;
   font-family: "Poppins", sans-serif;
   font-size: 1rem;
@@ -1182,62 +1251,70 @@ section {
   display: flex;
   justify-content: center;
   align-items: center;
-  &::before{
+
+  &::before {
     content: " ";
     width: 1rem;
     height: 1rem;
     border-radius: 50%;
     transition: 0.2s;
   }
-  &:checked::before{
+
+  &:checked::before {
     background-color: #1977cc;
 
-  } 
+  }
 }
-.label{
+
+.label {
   color: black;
   font-family: "Poppins", sans-serif;
   font-size: 1.1rem;
   margin-left: 1rem;
 }
-.info{
+
+.info {
   width: 100%;
   display: flex;
   justify-content: space-between;
   flex-direction: column;
   margin: 0.5rem 0;
 }
-.center{
+
+.center {
   margin-top: 2rem;
   text-align: center;
-  
-  .button{
+
+  .button {
     width: 15%;
     background-color: white;
     border-radius: 0.5rem;
     border: none;
     font-size: 1.4rem;
     font-family: "Poppins", sans-serif;
-    padding:1rem 4rem;
+    padding: 1rem 4rem;
     cursor: pointer;
     color: #000;
   }
-  .button:active{
+
+  .button:active {
     background-color: white;
     transform: scale(1.0);
 
   }
-  .button:hover{
-    background-color:rgb(63, 155, 124) ;
+
+  .button:hover {
+    background-color: rgb(63, 155, 124);
   }
 }
-/* 
+
+
 
 #footer {
   background: #000;
-  /* padding: 0 0 30px 0; */
-  color: #fff;
-  font-size: 14px;
+  padding: 0 0 30px 0;
+color: #fff;
+font-size: 14px;
 }
 
 #footer .footer-top {
@@ -1303,7 +1380,8 @@ section {
 
 #footer .footer-top .footer-links ul i {
   padding-right: 2px;
-  color: #57a6ea;;
+  color: #57a6ea;
+  ;
   font-size: 18px;
   line-height: 1;
 }
@@ -1358,15 +1436,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;
+  /* padding-top: 10px; */
 }
- */
 
 /*################----Back to top----################*/
 footer {
@@ -1376,8 +1453,8 @@ footer {
 
 #back-to-top-container {
   position: fixed;
-  bottom: 100px; 
-  right: 47px; 
+  bottom: 100px;
+  right: 47px;
   cursor: pointer;
   z-index: 1000;
 }
@@ -1385,8 +1462,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;
@@ -1395,58 +1472,72 @@ 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: 900px; /* 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:#3fbcc051;
-   text-align: center; 
-   margin-bottom: 7%;
-   border-radius: 20px;
-} 
+  max-width: 900px;
+  /* 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: #3fbcc051;
+  text-align: center;
+  margin-bottom: 7%;
+  border-radius: 20px;
+}
+
 /* 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;
+  text-align: center;
   color: white;
   font-size: 20px;
 }
+
 /* Form styling */
 .form-group {
   margin-top: 15px;
-  margin-bottom: 15px; /* Adds bottom margin for form-group */
+  margin-bottom: 15px;
+  /* Adds bottom margin for form-group */
 }
-.forgot-password{
+
+.forgot-password {
   margin-top: 20px;
 }
+
 .form-control {
-  width: 50%; /* Full width */
+  width: 50%;
+  /* 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;
@@ -1458,8 +1549,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;
@@ -1468,12 +1559,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
