From a710ce21274438f765aa7e9830c1c51c34419407 Mon Sep 17 00:00:00 2001
From: Vamshi Maskuri <117595548+varshith257@users.noreply.github.com>
Date: Sat, 25 May 2024 16:25:24 +0530
Subject: [PATCH 1/5] Add code analysis to the repo

---
 .github/workflows/codeql.yml | 93 ++++++++++++++++++++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 .github/workflows/codeql.yml

diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
new file mode 100644
index 00000000..484a6e9d
--- /dev/null
+++ b/.github/workflows/codeql.yml
@@ -0,0 +1,93 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+  schedule:
+    - cron: '20 12 * * 3'
+
+jobs:
+  analyze:
+    name: Analyze (${{ matrix.language }})
+    # Runner size impacts CodeQL analysis time. To learn more, please see:
+    #   - https://gh.io/recommended-hardware-resources-for-running-codeql
+    #   - https://gh.io/supported-runners-and-hardware-resources
+    #   - https://gh.io/using-larger-runners (GitHub.com only)
+    # Consider using larger runners or machines with greater resources for possible analysis time improvements.
+    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
+    timeout-minutes: ${{ (matrix.language == 'swift' && 120) || 360 }}
+    permissions:
+      # required for all workflows
+      security-events: write
+
+      # required to fetch internal or private CodeQL packs
+      packages: read
+
+      # only required for workflows in private repositories
+      actions: read
+      contents: read
+
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+        - language: javascript-typescript
+          build-mode: none
+        # CodeQL supports the following values keywords for 'language': 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'swift'
+        # Use `c-cpp` to analyze code written in C, C++ or both
+        # Use 'java-kotlin' to analyze code written in Java, Kotlin or both
+        # Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
+        # To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,
+        # see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.
+        # If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
+        # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v3
+      with:
+        languages: ${{ matrix.language }}
+        build-mode: ${{ matrix.build-mode }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+    # If the analyze step fails for one of the languages you are analyzing with
+    # "We were unable to automatically build your code", modify the matrix above
+    # to set the build mode to "manual" for that language. Then modify this step
+    # to build your code.
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+    - if: matrix.build-mode == 'manual'
+      shell: bash
+      run: |
+        echo 'If you are using a "manual" build mode for one or more of the' \
+          'languages you are analyzing, replace this with the commands to build' \
+          'your code, for example:'
+        echo '  make bootstrap'
+        echo '  make release'
+        exit 1
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v3
+      with:
+        category: "/language:${{matrix.language}}"

From d4e9dc734aa22ec6994e07e59e89e71e63f4f04a Mon Sep 17 00:00:00 2001
From: Vamshi Maskuri <117595548+varshith257@users.noreply.github.com>
Date: Sat, 25 May 2024 16:27:36 +0530
Subject: [PATCH 2/5] Update codeql.yml

---
 .github/workflows/codeql.yml | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
index 484a6e9d..1c847d87 100644
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -1,14 +1,3 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
 name: "CodeQL"
 
 on:

From cbd34127cd2820519ee5b45494ccead61c21fcc2 Mon Sep 17 00:00:00 2001
From: Vamshi Maskuri <117595548+varshith257@users.noreply.github.com>
Date: Sat, 25 May 2024 16:28:56 +0530
Subject: [PATCH 3/5] Update codeql.yml

---
 .github/workflows/codeql.yml | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
index 1c847d87..8f716e56 100644
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -60,22 +60,6 @@ jobs:
         # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
         # queries: security-extended,security-and-quality
 
-    # If the analyze step fails for one of the languages you are analyzing with
-    # "We were unable to automatically build your code", modify the matrix above
-    # to set the build mode to "manual" for that language. Then modify this step
-    # to build your code.
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
-    - if: matrix.build-mode == 'manual'
-      shell: bash
-      run: |
-        echo 'If you are using a "manual" build mode for one or more of the' \
-          'languages you are analyzing, replace this with the commands to build' \
-          'your code, for example:'
-        echo '  make bootstrap'
-        echo '  make release'
-        exit 1
-
     - name: Perform CodeQL Analysis
       uses: github/codeql-action/analyze@v3
       with:

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 4/5] 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

From 0e9de941f8974e96edcf359a7953aabb21161069 Mon Sep 17 00:00:00 2001
From: Anishka Gupta <anshu9990011996@gmail.com>
Date: Sun, 26 May 2024 12:28:11 +0530
Subject: [PATCH 5/5] =?UTF-8?q?Revert=20"Added=20the=20Responsive=20ness?=
 =?UTF-8?q?=20and=20improved=20feedback,doctors,medical=20recor=E2=80=A6"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 384 ++++++++++++-----------
 style.css  | 897 +++++++++++++++++------------------------------------
 2 files changed, 486 insertions(+), 795 deletions(-)

diff --git a/index.html b/index.html
index 8931bf2c..05670ef9 100644
--- a/index.html
+++ b/index.html
@@ -31,18 +31,17 @@
 
 <body>
       <!-- ############# Header ############# -->
-  <header>
-    
-    <div class="header_container">
-      <div class="img">
+  
+      <header class="header_container">
+        <div class="img">
         <img src="images/rd.png" width="70" height="80"> 
       </div>
-      <div class="text">
-
+      <div class="text" style="margin-left: -20rem;">
   
         <h1 class="logo me-auto"><a style="text-decoration: none; color: #55a5ea;" href="index.html">RapiDoc</a></h1>
       </div>
-      <nav class="navbar">
+      <nav class="nav_menu">
+
         <ul class="nav_link">
           <li><a href="index.html">Home</a></li>
           <li><a href="#about">About</a></li>
@@ -52,29 +51,22 @@ <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">
@@ -234,16 +226,16 @@ <h4 class="title"><a href="">SERVICES</a></h4>
    
    
     <section id="services" class="services">
-      <div class="container services-container ">
+      <div class="container">
 
-        <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 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="row services-row ">
+        <div class="row">
           <div class="col-lg-4 col-md-6 d-flex align-items-stretch">
-            <div class="icon-box service-icon-box ">
+            <div class="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>
@@ -251,7 +243,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 service-icon-box ">
+            <div class="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>
@@ -259,7 +251,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 service-icon-box ">
+            <div class="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
@@ -268,7 +260,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 service-icon-box ">
+            <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>
               <p>Know the blood banks and blood groups available around you. No one should suffer ỉn emergencies.</p>
@@ -276,7 +268,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 service-icon-box ">
+            <div class="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>
@@ -284,7 +276,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 service-icon-box ">
+            <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>
               <p>Weekly, monthly, yearly or each day, however you like it!</p>
@@ -298,26 +290,41 @@ <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-patientportal">
+      <div class="section-title" id="section-patientportal">
+        <h2>Patient Portal</h2>
+        <p>Access your medical records, lab results, and prescription history securely.</p>
+        <!-- <p>The Patient Portal is your personalized online gateway to your health information. Whether you need to check your recent lab results, review your prescription history, or update your personal details, the Patient Portal provides a convenient and secure platform for managing your healthcare needs.</p> -->
+      </div>
 
-    <h1 class="text-center" >Patient Portal Section</h1>
+      <!-- Add Login Form for Patient Portal -->
+      
+          <div class="login-box">
+              <div class="avatar">
+                  <img src="img\avatar.png" alt="Avatar">
+              </div>
+              <form>
+                  <div class="textbox">
+                      <i class="fas fa-user"></i>
+                      <input type="text" placeholder="Username" name="username" required>
+                  </div>
+                  <div class="textbox">
+                      <i class="fas fa-lock"></i>
+                      <input type="password" placeholder="Password" name="password" required>
+                  </div>
+                  <input type="submit" class="btn" value="SUBMIT">
+                  <div class="register-link">
+                      <a href="#">Not registered yet? Register Here</a>
+                  </div>
+                  <div class="forgot-password" id="forgot-password-patient-portal">
+                    <a href="forgot-password.php">Forgot Your Password?</a>
+                  </div>
+              </form>
+          </div>
 
 
-    <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>
+      <!-- Add Forgot Password Link -->
+
     </div>
   </section><!-- End Patient Portal Section -->
    
@@ -325,81 +332,106 @@ <h2>Login</h2>
    
    
     <section id="appointment" class="appointment section-bg">
-      <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 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="layout">
           <form accept="" 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>
-              <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 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>
-    
+
       </div>
-    </section>
-    
-    <!-- End Appointment Section -->
+    </section><!-- End Appointment Section -->
 
 
 
@@ -407,58 +439,61 @@ <h2 class="text-center" >Make an Appointment</h2>
   
   
     <section id="doctors" class="doctors">
-      <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 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 doctor-details doctor-row ">
-    
+
+        <div class="row">
+
           <div class="col-lg-6">
-            <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 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>
             </div>
           </div>
-    
+
           <div class="col-lg-6 mt-4 mt-lg-0">
-            <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 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>
             </div>
           </div>
-    
+
           <div class="col-lg-6 mt-4">
-            <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 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>
             </div>
           </div>
-    
+
           <div class="col-lg-6 mt-4">
-            <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 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>
             </div>
           </div>
         </div>
       </div>
-    </section>
-    <!-- End Doctors Section -->
+    </section><!-- End Doctors Section -->
 
 
      <!-- ################# Contact Section ################# -->
@@ -500,33 +535,27 @@ <h2>Contact</h2>
         </style>
       </div><br>
 
-      <div class="ContactSection">
-        <div class="row mt-5 contact-container  ">
+      <div class="container">
+        <div class="row mt-5">
 
           <div class="col-lg-4">
             <div class="info">
-              <div class="address contact-info ">
+              <div class="address">
                 <i class="fa fa-location-dot"></i>
-                <div>
-                  <h4>Location:</h4>
+                <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 contact-info ">
+              <div class="email">
                 <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 contact-info ">
+              <div class="phone">
                 <i class="fa fa-phone"></i>
-                <div>
-                  <h4>Call:</h4>
+                <h4>Call:</h4>
                 <p><a href="tel:+91 1234567890">+91 1234567890</a></p>
-                </div>
               </div>
             </div>
           </div><br><br>
@@ -680,17 +709,6 @@ <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 2ebb3844..3eb3ed8c 100644
--- a/style.css
+++ b/style.css
@@ -1,11 +1,7 @@
-body {
-  margin: 0;
-  padding: 0;
+body{
   font-family: "Open Sans", sans-serif;
   color: #fff;
   background-color: #000;
-  box-sizing: border-box;
-  overflow-x: hidden;
 }
 
 a {
@@ -15,113 +11,66 @@ a {
 
 a:hover {
   color: #55a5ea;
-}
-
-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;
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Raleway", sans-serif;
 }
 
-.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;
 }
 
-.mobile-nav-toggle {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
+.nav_link li a {
+  transition: all 0.3s ease 0s;
   color: white;
 }
 
-@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;
-  }
-
-  .nav_link li {
-    margin: 10px 0;
-  }
-
-  .mobile-nav-toggle {
-    display: block;
-  }
+.nav_link li a:hover {
+  color: #55a5ea;
 
-  .nav_link.active {
-    display: flex;
-  }
+  /* text-decoration: underline 2.5px rgb(3, 3, 94); */
 }
 
+.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;
+}
 
 .container {
   display: flex;
-  /* flex-direction: column; */
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-  text-align: center;
+  font-family: sans-serif;
+  padding-top: 80px;
 }
 
+
+/* .container a:hover {
+  text-decoration: underline 2px;
+} */
+
 .content {
-  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding-left: 50px;
+  /* justify-content: center;
+  align-items: center; */
 }
 
 .content h1 {
-  font-size: 65px;
-  margin: 0;
+  font-size: 80px;
+  color: #d9d9d9;
 }
 
 .content h1 span {
@@ -129,59 +78,28 @@ header{
 }
 
 .content h2 {
-  margin-top: 20px;
-}
-
-.btn-get-started {
-  background-color: #55a5ea;
-  color: #fff;
-  padding: 10px 20px;
-  text-decoration: none;
-  border-radius: 5px;
-  transition: background-color 0.3s ease;
+  font-size: 20px;
+  margin-top: 30px;
+  padding-right: 40px;
+  line-height: 1.5;
+  color: #d9d9d9;
 }
 
-.btn-get-started:hover {
-  background-color: #4a92d0;
-}
+.content h2 a {
+  display: inline;
+  font-size: xx-large;
+  color: #55a5ea;
 
-.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;
-  }
+.container-head{
+  display: grid;
+  align-items: center;
+  grid-template-columns: 1fr 2fr 13fr 3fr;
+  margin-top: 0px;
 }
 
-@media (max-width: 600px) {
-  .content h1 {
-    font-size: 30px;
-  }
 
-  .btn-get-started {
-    padding: 8px 16px;
-    font-size: 14px;
-  }
-}
 
 /*---------------------parallax effect after about------------*/
 .parallax-container {
@@ -201,10 +119,10 @@ header{
   padding: 20px;
   margin-bottom: 20px;
   border-radius: 10px;
-
 }
 
 
+
 /**
 * Appointment Button *
 */
@@ -252,14 +170,13 @@ header{
   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;
@@ -271,17 +188,13 @@ header{
   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;
 }
@@ -305,7 +218,6 @@ header{
   .mobile-nav-toggle {
     display: block;
   }
-
   .navbar ul {
     display: none;
   }
@@ -342,7 +254,7 @@ header{
   transition: 0.3s;
 }
 
-.navbar-mobile>ul>li {
+.navbar-mobile > ul > li {
   padding: 0;
 }
 
@@ -353,16 +265,13 @@ header{
   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;
@@ -375,10 +284,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; */
 }
@@ -428,11 +337,9 @@ section {
   background-size: cover;
   margin-bottom: -200px;
 }
-
-#home .multiple-text {
+#home .multiple-text{
   color: #55a5ea;
 }
-
 #home .container {
   position: relative;
   margin-top: 150px;
@@ -466,8 +373,7 @@ section {
   color: #fff;
   background: #55a5ea;
 }
-
-#home video {
+#home video{
   margin-top: -70px;
   margin-left: 50px;
   height: 900px;
@@ -482,7 +388,7 @@ section {
 
 @media (min-width: 1024px) {
   #home {
-    background-attachment: fixed;
+    background-attachment:fixed;
   }
 }
 
@@ -491,16 +397,13 @@ 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;
@@ -528,8 +431,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 {
@@ -560,7 +463,6 @@ section {
   color: #3fbcc0a4;
   transition: all 0.3s ease-in-out;
 }
-
 .featured-services .icon2 {
   margin-bottom: 15px;
 }
@@ -571,7 +473,6 @@ section {
   color: #55a5ea;
   transition: all 0.3s ease-in-out;
 }
-
 .featured-services .icon3 {
   margin-bottom: 15px;
 }
@@ -582,7 +483,6 @@ section {
   color: #55a5ea;
   transition: all 0.3s ease-in-out;
 }
-
 .featured-services .icon4 {
   margin-bottom: 15px;
 }
@@ -610,24 +510,20 @@ 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;
 }
 
@@ -639,7 +535,6 @@ section {
   color: #55a5ea;
   margin-bottom: 15px;
 }
-
 .about .icon-boxes h3 {
   font-size: 28px;
   font-weight: 700;
@@ -683,7 +578,7 @@ section {
 
 .about .icon-box .title {
   margin-left: 85px;
-
+  
   font-weight: 700;
   margin-bottom: 10px;
   font-size: 18px;
@@ -707,7 +602,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;
@@ -781,7 +676,6 @@ section {
     transform: scale(0.6, 0.6);
     opacity: 1;
   }
-
   100% {
     transform: scale(1, 1);
     opacity: 0;
@@ -793,7 +687,6 @@ section {
     transform: scale(0.6, 0.6);
     opacity: 1;
   }
-
   100% {
     transform: scale(1, 1);
     opacity: 0;
@@ -804,56 +697,61 @@ 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: 20px;
+  padding: 50px;
   margin: 5%;
-  width: calc(100% - 30px);
-  background: #1c413b;
+  width: calc(100%-15px);
+  background:#1c413b;
   align-content: center;
   border-radius: 15px;
-  height: 250px;
-  /* Fixed height */
-  width: 250px;
-  /* Fixed width */
+  /* margin-top: 10px; */
+}
+.row-d{
   display: flex;
-  flex-direction: column;
-  justify-content: center;
+  /* margin:10px 20px 10px 20px; */
   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-top: 10px;
+  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;
 }
-
 .counts .count-box p {
-  padding: 10px 0 0 0;
+  padding: 30px 0 0 0;
   margin: 0;
   font-family: "Roboto", sans-serif;
   font-size: 14px;
   color: #fffcfc;
-  text-align: center;
 }
 
 .counts .count-box a {
@@ -870,67 +768,9 @@ 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;
@@ -985,9 +825,8 @@ section {
   line-height: 24px;
   font-size: 14px;
   margin-bottom: 0;
-
+  
 }
-
 .services .icon-box:hover {
   background: #55a5ea;
   border-color: #3fbbc0;
@@ -1005,192 +844,78 @@ 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 {
+.layout{
+  /*border: 2px solid #ccc; */
   background-color: #3fbcc051;
   border-radius: 30px;
   padding: 50px;
-  max-width: 700px;
-  margin: 0 auto;
+  width: 700px; 
+  margin: 0 auto; 
 }
-
-.appointment-container {
-  display: flex;
-  flex-direction: column;
+.appointment .php-email-form {
+  width: 100%;
 }
 
 .appointment .php-email-form .form-group {
-  padding-bottom: 16px;
+  padding-bottom: 8px;
 }
 
-.appointment .php-email-form input,
-.appointment .php-email-form textarea,
-.appointment .php-email-form select {
-  width: 100%;
+.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;
   border-radius: 10px;
-  padding: 10px;
+  padding: 10px !important;
   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: none;
+  border: 0;
   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: #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;
+  background: #000;
 }
 
 .doctors .member {
-  background: #222222;
+  background: #111111;
   position: relative;
   border-radius: 10px;
   padding: 30px;
@@ -1200,7 +925,6 @@ button[type="submit"]:hover {
   overflow: hidden;
   width: 180px;
   border-radius: 50%;
-  margin-bottom: 20px;
 }
 
 .doctors .member .pic img {
@@ -1211,16 +935,38 @@ button[type="submit"]:hover {
   transform: scale(1.1);
 }
 
-.doctors .member-info h4 {
+.doctors .member .member-info {
+  padding-left: 30px;
+}
+
+.doctors .member h4 {
   font-weight: 700;
-  margin-bottom: 10px;
+  margin-bottom: 5px;
   font-size: 20px;
   color: #fff;
 }
 
-.doctors .member-info .nxt-pg button {
+.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{
   background: #55a5ea;
-  border: none;
+  border: 0;
   padding: 10px 35px;
   text-decoration: none;
   transition: 0.4s;
@@ -1228,44 +974,17 @@ button[type="submit"]:hover {
   border-radius: 50px;
   color: white;
 }
+.doctors .nxt-pg button:hover{
 
-.doctors .member-info .nxt-pg button:hover {
-  background: #448cc5;
+  background:#55a5ea;
 }
 
-@media (max-width: 991px) {
-  .doctors .member {
-    margin-bottom: 30px;
-  }
-}
 
 
 /*################----Contact----################*/
 .contact .info {
   width: 100%;
-  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%);
-  }
+  background: #000;
 }
 
 .contact .info i {
@@ -1298,38 +1017,33 @@ button[type="submit"]:hover {
   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: #3fbcc051;
-  padding: 30px;
-  border-radius: 25px;
+  background: #000;
 }
 
 .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 {
@@ -1346,183 +1060,156 @@ button[type="submit"]:hover {
 }
 
 .contact .php-email-form button[type="submit"]:hover {
-  background: #55a5ea;
+  background:#55a5ea;
 }
 
-.contact .section-title {
-  text-align: center;
-  margin-bottom: 50px;
-}
-
-.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;
+@-webkit-keyframes animate-loading {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
-@media (max-width: 768px) {
-  .contact .info {
-    padding: 30px;
+@keyframes animate-loading {
+  0% {
+    transform: rotate(0deg);
   }
-
-  .contact-container {
-    flex-direction: column;
+  100% {
+    transform: rotate(360deg);
   }
 }
 
+
 /*################--feedback###############*/
 
-.feed {
+.feedback{
   border-radius: 1rem;
-  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 */
-}
-
-@media (max-width: 768px) {
-  .feed {
-    width: 280px;
-  }
-  .service-icon-box {
-    width: 280px;
-  }
+  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;
 }
-
-.feed h1 {
-  color: #ffffff;
-  font-size: 2rem;
+.feedback h1{
+  color: black;
+  font-size: 2.0rem;
   margin-bottom: 0.3rem;
+  font-family: "Poppins", sans-serif;
 }
-
-.feedback {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.feed p {
-  color: #ffffff;
+.feedback p{
+  color: black;
   font-size: 1.1rem;
+  font-family: "Poppins", sans-serif;
 }
-
-.emoji {
+.emoji{
   padding: 1rem 0;
-  width: 100%;
+  width: 20%;
   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);
+  }
 }
 
-.btn:hover {
-  transform: scale(1.5);
-}
-
-.ques {
+.ques{
   margin: 0.5rem 0;
 }
-
-#textarea {
+.feedback #textarea{
   padding: 1rem;
-  width: 100%;
-  background-color: #fff;
-  border: 0.1rem solid #000;
+  width: 80%;
+  background-color: transparent;
+  border: 0.1rem solid black;
   border-radius: 0.5rem;
-  color: #000000;
+  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;
+  }
 }
 
-.radiobtn {
-  width: 100%;
+.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;
   appearance: none;
   width: 2rem;
   height: 2rem;
-  border: 0.1rem solid #000;
+  border: 0.1rem solid black;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
-}
-
-.input::before {
-  content: " ";
-  width: 1rem;
-  height: 1rem;
-  border-radius: 50%;
-  transition: 0.2s;
-}
+  &::before{
+    content: " ";
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
+    transition: 0.2s;
+  }
+  &:checked::before{
+    background-color: #1977cc;
 
-.input:checked::before {
-  background-color: #1977cc;
+  } 
 }
-
-.label {
-  color: #ffffff;
+.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;
-  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 {
-  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:rgb(63, 155, 124) ;
+  }
 }
 
-.button:hover {
-  background-color: #3fbcc0;
-}
 
 #footer {
   background: #000;
@@ -1594,8 +1281,7 @@ button[type="submit"]:hover {
 
 #footer .footer-top .footer-links ul i {
   padding-right: 2px;
-  color: #57a6ea;
-  ;
+  color: #57a6ea;;
   font-size: 18px;
   line-height: 1;
 }
@@ -1650,14 +1336,13 @@ button[type="submit"]:hover {
 }
 
 #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;
 }
 
 
@@ -1669,8 +1354,8 @@ footer {
 
 #back-to-top-container {
   position: fixed;
-  bottom: 100px;
-  right: 47px;
+  bottom: 100px; 
+  right: 47px; 
   cursor: pointer;
   z-index: 1000;
 }
@@ -1678,8 +1363,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;
@@ -1688,65 +1373,53 @@ 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);
-  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);  
+   background-color: white;
+   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;
@@ -1758,8 +1431,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;
@@ -1768,12 +1441,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%);
-}
\ No newline at end of file
+  fill: hsl(214, 50%, 60%); 
+}