diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 92f18132..da6f7f2c 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,50 +1,32 @@
-## PR Description
+## Description
 
-_Add your description_
+[Please include a brief description of the changes or features added]
 
-## Related Issues: Issue for which you are raising a PR for
+## Related Issues
 
+[Cite any related issue(s) this pull request addresses. If none, simply state “None”]
 - Closes #
 
-### Issue
+## Type of PR
 
-[Issue number or description]
+- [ ] Bug fix
+- [ ] Feature enhancement
+- [ ] Documentation update
+- [ ] Other (specify): _______________
 
-### Checklist
+## Screenshots / videos (if applicable)
+[Attach any relevant screenshots or videos demonstrating the changes]
 
-- [ ] I have gone through the [contributing guide](## PR Description
 
-_Add your description_
-
-## Related Issues: Issue for which you are raising a PR for
-
-- Closes #
-
-### Issue
-
-[Issue number or description]
-
-### Checklist
+## Checklist
 
 - [ ] I have gone through the [contributing guide](https://github.com/Anishkagupta04/RAPIDOC-HEALTHCARE-WEBSITE-/)
 - [ ] I have updated my branch and synced it with project `main` branch before making this PR
-- [ ] Is this a bug fix/enhancement/documentation changes
-
-
-## Undertaking
-
-I declare that: 
-
-1. The content I am submitting is original and has not been plagiarized.  
-2. No portion of the work has been copied from any other source without proper attribution.  
-3. The work has been checked for plagiarism, and I assure its authenticity.
-- [ ] I have updated my branch and synced it with project `main` branch before making this PR
-- [ ] Is this a bug fix/enhancement/documentation changes
-- [ ] Part of GSSOC
-- [ ] Tested for any breaking changes
-- [ ] Other relevant checks completed
-
-
-I understand that any violation of this undertaking may have legal consequences that I will bear and could result in the withdrawal of any recognition associated with the work. 
-
-- [ ] I Agree
+- [ ] I have performed a self-review of my code
+- [ ] I have tested the changes thoroughly before submitting this pull request.
+- [ ] I have provided relevant issue numbers, screenshots, and videos after making the changes.
+- [ ] I have commented my code, particularly in hard-to-understand areas.
+<!-- [X] - put a cross/X inside [] to check the box -->
+
+## Additional context:
+[Include any additional information or context that might be helpful for reviewers.]
diff --git a/.github/workflows/auto-comment-on-pr-merge.yml b/.github/workflows/auto-comment-on-pr-merge.yml
new file mode 100644
index 00000000..c88e9ccc
--- /dev/null
+++ b/.github/workflows/auto-comment-on-pr-merge.yml
@@ -0,0 +1,37 @@
+name: Auto Comment on PR Merge
+
+on:
+  pull_request_target:
+    types: [closed]
+
+permissions:
+  issues: write
+  pull-requests: write
+
+jobs:
+  comment:
+    if: github.event.pull_request.merged == true
+    runs-on: ubuntu-latest
+
+    steps:
+     - name: Add Comment to Merged PR
+       run: |
+        COMMENT=$(cat <<EOF
+        {
+          "body": "🎉 Your pull request has been successfully merged! 🎉 Thank you for your contribution to our project. Your efforts are greatly appreciated. Keep up the fantastic work! 🚀"
+        }
+        EOF
+        )
+        RESPONSE=$(curl -s -o response.json -w "%{http_code}" \
+          -X POST \
+          -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
+          -H "Accept: application/vnd.github.v3+json" \
+          https://api.github.com/repos/${{ github.repository }}/issues/${{ github.event.pull_request.number }}/comments \
+          -d "$COMMENT")
+        cat response.json
+        if [ "$RESPONSE" -ne 201 ]; then
+          echo "Failed to add comment"
+          exit 1
+        fi
+       env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.github/workflows/build-html-pages b/.github/workflows/build-html-pages
new file mode 100644
index 00000000..24db80be
--- /dev/null
+++ b/.github/workflows/build-html-pages
@@ -0,0 +1,35 @@
+name: Deploy static content to Pages
+
+on:
+  push:
+    branches: ["main"]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+  
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload entire repository
+          path: '.'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/.github/workflows/close-old-issue.yml b/.github/workflows/close-old-issue.yml
new file mode 100644
index 00000000..d3e0e348
--- /dev/null
+++ b/.github/workflows/close-old-issue.yml
@@ -0,0 +1,55 @@
+name: Close Old Issues
+on:
+  schedule:
+    - cron: "0 0 * * *" # Runs daily at midnight
+
+jobs:
+  manage-issues:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Manage Issues
+        run: |
+          open_issues=$(curl -s -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
+            "https://api.github.com/repos/${{ github.repository }}/issues?state=open" \
+            | jq -r '.[] | .number')
+          for issue in $open_issues; do
+            # Get issue details
+            issue_details=$(curl -s -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
+              "https://api.github.com/repos/${{ github.repository }}/issues/$issue")
+            last_updated=$(echo $issue_details | jq -r '.updated_at')
+            labels=$(echo $issue_details | jq -r '.labels[].name')
+
+            days_since_update=$(( ( $(date +%s) - $(date -d "$last_updated" +%s) ) / 86400 ))
+
+            if [ $days_since_update -gt 7 ]; then
+              if echo "$labels" | grep -q "stale"; then
+                # If stale for more than 10 days, close the issue
+                if [ $days_since_update -gt 17 ]; then
+                  curl -s -X PATCH -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
+                    -H "Accept: application/vnd.github.v3+json" \
+                    -d '{"state":"closed"}' \
+                    "https://api.github.com/repos/${{ github.repository }}/issues/$issue"
+                  
+                  curl -s -X POST -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
+                    -H "Accept: application/vnd.github.v3+json" \
+                    -d '{"body":"This issue has been automatically closed because it has been inactive for more than 17 days (including 7 days marked as stale). If you believe this is still relevant, feel free to reopen it or create a new one. Thank you!"}' \
+                    "https://api.github.com/repos/${{ github.repository }}/issues/$issue/comments"
+                fi
+              else
+                # Mark as stale
+                curl -s -X POST -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
+                  -H "Accept: application/vnd.github.v3+json" \
+                  -d '{"labels":["stale"]}' \
+                  "https://api.github.com/repos/${{ github.repository }}/issues/$issue/labels"
+                
+                curl -s -X POST -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
+                  -H "Accept: application/vnd.github.v3+json" \
+                  -d '{"body":"This issue has been marked as stale because it has been inactive for more than 7 days. It will be closed if no further activity occurs in the next 10 days. Please update if you want to keep it open."}' \
+                  "https://api.github.com/repos/${{ github.repository }}/issues/$issue/comments"
+              fi
+            fi
+          done
diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
new file mode 100644
index 00000000..8f716e56
--- /dev/null
+++ b/.github/workflows/codeql.yml
@@ -0,0 +1,66 @@
+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
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v3
+      with:
+        category: "/language:${{matrix.language}}"
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6f3a2913..a90daae9 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
     "liveServer.settings.port": 5501
-}
\ No newline at end of file
+}
diff --git a/Css-Files/news.css b/Css-Files/news.css
new file mode 100644
index 00000000..f8bde885
--- /dev/null
+++ b/Css-Files/news.css
@@ -0,0 +1,220 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins',sans-serif;
+}
+
+
+body{
+    /* font-family: "Open Sans", sans-serif; */
+    color: #fff;
+    background-color: #000;
+  }
+  
+  a {
+    color: white;
+    text-decoration: none;
+  }
+  
+  a:hover {
+    color: #55a5ea;
+    text-decoration: none;
+  }
+  
+  .nav_link {
+    list-style: none;
+  }
+  
+  .nav_link li {
+    padding: 5px 20px;
+    display: inline-block;
+    color: white;
+    padding-top: 15px;
+  }
+  
+  .nav_link li a {
+    transition: all 0.3s ease 0s;
+    color: white;
+    text-decoration: none;
+  }
+  
+  .nav_link li a:hover {
+    color: #55a5ea;
+    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-between;
+    align-items: center;
+    height: 60px;
+    margin: auto;
+  }
+
+  .head {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 12px;
+    margin: 12px auto;
+}
+
+.line {
+    width: 30vw;
+    border: 1px solid black;
+    margin: 7px;
+    background-color: black;
+    height: 4px;
+    border-radius: 24px;
+}
+
+#newsBox {
+    display: flex;
+    justify-content: center;
+align-items: center;
+    gap: 2rem;
+    flex-wrap: wrap;
+
+}
+  
+
+footer {
+    width: 100%;
+    background: linear-gradient(to right, #0f0f0f, #00093d);
+    color: #ffff;
+    line-height: 20px;
+  }
+  
+  .footer-title {
+    font-weight: 700;
+    font-size: 26px;
+    margin-bottom: 22px;
+  }
+  
+  .row {
+    width: 90%;
+    margin: auto;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+  
+  .col {
+    padding: 20px 0;
+  }
+  
+  .col h3 {
+    font-size: 25px;
+  }
+  
+  #col1 {
+    flex-basis: 40%;
+    margin-right: 40px;
+  }
+  
+  #col2 {
+    flex-basis: 20%;
+    margin-right: 10px;
+    font-size: 15px;
+  }
+  
+  #col3 {
+    flex-basis: 15%;
+  }
+  
+  #col4 {
+    flex-basis: 15%;
+  }
+  
+  .logo {
+    margin-bottom: 30px;
+  }
+  
+  .col h3 {
+    width: fit-content;
+    margin-bottom: 40px;
+    position: relative;
+  }
+  
+  #col2 p {
+    margin-bottom: 18px;
+  }
+  
+  #col2 p a {
+    font-size: 15px;
+    padding-top: 10px;
+    color: #fff;
+  }
+  
+  .email-id {
+    width: fit-content;
+    margin: 20px 0;
+    border-bottom: 1px solid #ccc;
+  }
+  
+  .quick-links-info div {
+    margin-bottom: 20px;
+  }
+  
+  .quick-links-info div a {
+    color: #fff;
+    font-size: 15px;
+  }
+  
+  .underline {
+    width: 100%;
+    height: 5px;
+    background: #767676;
+    border-radius: 3px;
+    position: absolute;
+    top: 25px;
+    left: 0;
+    overflow: hidden;
+  }
+  
+  .underline span {
+    width: 15px;
+    height: 100%;
+    background: #fff;
+    border-radius: 3px;
+    position: absolute;
+    top: 0;
+    left: 10px;
+    /* animation: moving 1s linear infinite; */
+  }
+
+  .news{
+    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;
+  }
+  .news h1{
+    color: black;
+    font-size: 2.0rem;
+    margin-bottom: 0.3rem;
+    font-family: "Poppins", sans-serif;
+  }
+  .news p{
+    color: black;
+    font-size: 1.1rem;
+    font-family: "Poppins", sans-serif;
+  }
+  .emoji{
+    padding: 1rem 0;
+    width: 20%;
+    display: flex;
+    justify-content: space-between;
+  }
+  
+  
\ No newline at end of file
diff --git a/Css-Files/patient-portal.css b/Css-Files/patient-portal.css
new file mode 100644
index 00000000..1b2507a0
--- /dev/null
+++ b/Css-Files/patient-portal.css
@@ -0,0 +1,108 @@
+
+.container-patientportal {
+    width: 100%;
+    /* display: flex; */
+    justify-content: space-between;
+    /* align-items: flex-start; */
+    background: rgba(255, 255, 255, 0.8);
+    background: linear-gradient(to bottom right, black, black, black);
+    padding: 5px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    /* position: relative; */
+}
+
+.login-box {
+    width: 40%;
+    text-align: center;
+    padding: 20px;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    margin: auto;
+}
+
+.login-box h1 {
+    margin: 0;
+    font-size: 24px;
+}
+
+.login-box h2 {
+    margin: 10px 0 20px;
+    font-size: 18px;
+    color: #555;
+}
+
+.avatar {
+    margin: 20px 0;
+}
+
+.avatar img {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+}
+
+.textbox {
+    margin: 10px 0;
+    padding: 10px;
+    background: #f1f1f1;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+}
+
+.textbox i {
+    margin-right: 10px;
+    color: #888;
+}
+
+.textbox input {
+    border: none;
+    outline: none;
+    background: none;
+    width: 100%;
+    padding: 10px;
+    font-size: 16px;
+}
+
+.btn {
+    width: 100%;
+    background: #1c413b;
+    border: none;
+    padding: 15px;
+    border-radius: 5px;
+    color: #fff;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background 0.3s;
+}
+
+.btn:hover {
+    background: #35aaae;
+    transform: none;
+}
+
+#forgot-password-patient-portal,
+.register-link {
+    margin-top: 20px;
+}
+#forgot-password-patient-portal a ,
+.register-link a {
+    color: #1c413b;
+    text-decoration: none;
+}
+#forgot-password-patient-portal a:hover,
+.register-link a:hover {
+    text-decoration: underline;
+}
+
+#section-patientportal{
+    width: 40%;
+    padding: 0;
+    margin: auto;
+    padding: 10%;
+}
+#patient-portal{
+    padding: 0px;
+}
\ No newline at end of file
diff --git a/Html-Files/news.html b/Html-Files/news.html
index 741a2052..c02d86aa 100644
--- a/Html-Files/news.html
+++ b/Html-Files/news.html
@@ -6,72 +6,147 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>News RapiDoc</title>
   <!-- favicon -->
-  <link rel="icon" type="image/png" href="img/favicon.png" sizes="32x32" />
-  <!-- Bootsratp CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
 
   <!-- Local CSS -->
-  <link rel="stylesheet" href="Css-Files/style.css" />
+  <link rel="stylesheet" href="../Css-Files/news.css" />
 </head>
 
 <body>
   <!-- This is Bootsratp Nav bar -->
-  <nav id="navbar">
-    <nav class="navbar navbar-dark navbar-expand-lg bg-dark">
-      <div class="container-fluid">
-        <a class="navbar-brand" href="">Home</a>
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
-          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon"></span>
-        </button>
-              <div class="form-check form-switch">
-                <input type="checkbox" id="darkModeToggle">
-                <label class="form-check-label" for="darkModeToggle">
-                  <svg class="moon"  xmlns="http://www.w3.org/2000/svg"
-                  width="16" height="16"
-                    viewBox="0 0 512 512">
-                    <path fill="#fff"
-                      d="M268.279,496c-67.574,0-130.978-26.191-178.534-73.745S16,311.293,16,243.718A252.252,252.252,0,0,1,154.183,18.676a24.44,24.44,0,0,1,34.46,28.958,220.12,220.12,0,0,0,54.8,220.923A218.746,218.746,0,0,0,399.085,333.2h0a220.2,220.2,0,0,0,65.277-9.846,24.439,24.439,0,0,1,28.959,34.461A252.256,252.256,0,0,1,268.279,496ZM153.31,55.781A219.3,219.3,0,0,0,48,243.718C48,365.181,146.816,464,268.279,464a219.3,219.3,0,0,0,187.938-105.31,252.912,252.912,0,0,1-57.13,6.513h0a250.539,250.539,0,0,1-178.268-74.016,252.147,252.147,0,0,1-67.509-235.4Z"
-                      class="ci-primary"></path>
-                  </svg>
-                  <svg class="sun"  xmlns="http://www.w3.org/2000/svg" width="16"
-                    height="16" fill="currentColor" class="bi bi-sun" viewBox="0 0 16 16">
-                    <path
-                      d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
-                      fill="#fff9e5"></path>
-                  </svg>
-                </label>
-        </div>
-      </div>
+  <header class="header_container">
+    <div class="img">
+      <img id="rd-logo" style="width: 90px; height: auto;" src="/images/rd.png">
+    </div>
+    <div class="text" style="margin-left: -28rem; padding-top: 28px;">
+
+      <h1 class="logo me-auto"><a style="text-decoration: none; color: #55a5ea;" href="index.html">RapiDoc</a></h1>
+    </div>
+    <nav class="nav_menu">
+
+      <ul class="nav_link">
+        <li><a href="index.html">Home</a></li>
+        <li><a href="#about">About</a></li>
+        <li><a href="Html-Files/news.html">News</a></li>
+        <li><a href="#services">Services</a></li>
+        <li><a href="#patient-portal">patient Portal</a></li>
+        <li><a href="#doctors">Doctor</a></li>
+        <li><a href="Html-Files/contact.html">Contact us</a></li>
+      </ul>
     </nav>
-  </nav>
+    </div>
+  </header>
   <!-- This is basic header of website -->
+
+
   <div class="head container">
     <h3>
       Top News <span class="badge text-bg-secondary">by RapiDoc</span>
     </h3>
     <span class="line"></span>
   </div>
-  <!-- This is div where all the News are Fetched from API -->
-  <div id="newsBox"></div>
-  <div id="spinner" class="mySpin spinner-border text-warning"></div>
+
+  <!-- news System-->
+  <section id="news" class="feed">
+    <div class="news">
+      <h1>Top News by RapiDoc is Coming soon.</h1>
+      <p>Your Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum alias culpa earum dicta ullam atque doloribus
+        quisquam, tempora eos maxime sint. Labore porro deserunt dignissimos est optio. Modi, alias doloremque!.</p>
+      <p class="ques">.......</p>
+      <p class="ques">......</p>
+    </div>
+  </section>
+
+
   <!-- This is Basic Dark Fotter -->
-  <footer id="sticky-footer" class="flex-shrink-0 py-2 bg-dark text-white-50">
-    <div class="container text-center">
-      <small>Copyright &copy;2024 &nbsp; RapiDoc</small>
+  <footer>
+    <div class="row">
+      <!-- map -->
+      <div class="col" id="col1">
+        <div class="contact-location">
+          <!-- <img style="height: 100%;;" src="img/home icon.webp" alt="" class="logo"> -->
+          <iframe
+            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3500.8055368048804!2d77.22981385036265!3d28.6655407892513!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd0683919c3b%3A0xf5fc331b74c2b9e2!2sIndira%20Gandhi%20Delhi%20Technical%20University%20for%20Women!5e0!3m2!1sen!2sin!4v1679424592719!5m2!1sen!2sin"
+            width="100%" height="200px" style="border: 0; padding: 2rem 2em 0 0" allowfullscreen="" loading="lazy"
+            referrerpolicy="no-referrer-when-downgrade"></iframe>
+        </div>
+      </div>
+      <!-- map -->
+
+      <!-- contact -->
+      <div class="col" id="col2">
+        <h3>
+          Contact
+          <div class="underline"><span></span></div>
+        </h3>
+
+        <p><a href="">contact@rapidoc.com</a></p>
+        <p><a href="">+91 1234567890</a></p>
+      </div>
+      <!-- contact -->
+
+      <!-- Links -->
+      <div class="col" id="col3">
+        <h3>
+          Quick Links
+          <div class="underline"><span></span></div>
+        </h3>
+        <div class="quick-links" id="bottom">
+          <!-- <div class="footer-title">
+                        QUICK LINKS
+                    </div> -->
+          <div class="quick-links-info">
+            <div><a href="./index.html">Home</a></div>
+            <div><a href="#about">About us</a></div>
+            <div><a href="./Html-Files/contact.html">Contact us</a></div>
+            <div><a href="#services">Services</a></div>
+            <div><a href="#doctors">Doctors</a></div>
+          </div>
+        </div>
+      </div>
+      <!-- links -->
+
+      <div class="col" id="col4">
+        <h3>
+          SOCIAL
+          <div class="underline"><span></span></div>
+        </h3>
+        <div class="social-icons">
+
+          <div class="social">
+            <a href="#" target="_blank"><img src="#" alt="">Instagram</a>
+
+          </div>
+          <div class="social">
+            <a href="#" target="_blank"><img src="" alt="">LinkedIn</a>
+
+          </div>
+          <div class="social">
+            <a href="#"><img src="" alt="">Facebook</a>
+
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Copyright -->
+    <div id="copyright" style="text-align: center">
+      <p style="align-items: center">
+        © <span id="year"></span><span> RapiDoc</span>&nbsp;| All Rights
+        Reserved
+      </p>
+      <p>Made with ❤️ by RapiDoc</p>
     </div>
   </footer>
 
-  <!-- Bootsratp js -->
-  <script src="app.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
-    integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
-    crossorigin="anonymous"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"
-    integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
-    crossorigin="anonymous"></script>
 </body>
+<!-- Bootsratp js -->
+<script src="app.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
+  integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"
+  integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
 
 </html>
\ No newline at end of file
diff --git a/Introduction/Advantages.md b/Introduction/Advantages.md
new file mode 100644
index 00000000..7472eb47
--- /dev/null
+++ b/Introduction/Advantages.md
@@ -0,0 +1,8 @@
+# **9. ADVANTAGES:**
+Here are the advantages of Rapidoc healthcare service
+- Convenient access to healthcare services and medical information anytime, anywhere.
+- User-friendly interface for easy navigation and quick appointment bookings.
+- Timely updates on bed availability at emergency centers for informed decision-making during emergencies.
+- Ability to book appointments with top-rated doctors across various specialties.
+- Access to regular health updates and informative newsletters for staying informed.
+- Streamlined emergency services to ensure prompt assistance when needed.
diff --git a/Introduction/Architecture.md b/Introduction/Architecture.md
new file mode 100644
index 00000000..2a10b2ea
--- /dev/null
+++ b/Introduction/Architecture.md
@@ -0,0 +1,12 @@
+# **6. ARCHITECTURE**
+Here is the architecture diagram of Rapidoc healthcare application. 
+
+
+
+![Architecture diagram](https://github.com/TejaswiKandunuri/RAPIDOC-HEALTHCARE-WEBSITE-/assets/110902627/5184e0e4-f430-4348-95f5-afe7855a9ef1)
+
+This is the flow of operations , which can be done through the rapidoc application.
+The provided architecture diagram outlines the flow of operations within the RapiDoc application, 
+illustrating how data and control move through the various components. 
+
+![rapidoc flow diagram](https://github.com/TejaswiKandunuri/RAPIDOC-HEALTHCARE-WEBSITE-/assets/110902627/df749559-19a6-4f84-b082-692eed63fd67)
diff --git a/Introduction/Conclusion.md b/Introduction/Conclusion.md
new file mode 100644
index 00000000..f96e39a0
--- /dev/null
+++ b/Introduction/Conclusion.md
@@ -0,0 +1,12 @@
+# **12. CONCLUSION**
+The RapiDoc healthcare website stands as a very useful digital platform dedicated to transforming healthcare accessibility.
+By providing comprehensive and user-friendly services, RapiDoc revolutionizes how users access medical care, ensuring 
+convenience and efficiency. With features ranging from appointment booking with top-rated doctors to real-time updates on 
+emergency bed availability, RapiDoc addresses diverse healthcare needs. Moreover, its commitment to accessibility ensures
+no one is left behind in receiving timely medical care.
+
+While the platform offers numerous advantages such as easy access to healthcare services and informative updates,
+it also faces challenges such as potential privacy concerns and dependency on internet connectivity. Looking ahead,
+RapiDoc has promising future scope areas, including the expansion of services, integration of AI-driven virtual health 
+assistants, and geographical expansion. In essence, RapiDoc emerges as a reliable partner in promoting well-being and 
+enhancing the healthcare experience for all users.
diff --git a/Introduction/Disadvantages.md b/Introduction/Disadvantages.md
new file mode 100644
index 00000000..93a3b03f
--- /dev/null
+++ b/Introduction/Disadvantages.md
@@ -0,0 +1,4 @@
+# **10. DISADVANTAGES**
+These are the disadvantages of Rapidoc healthcare service
+- Potential privacy concerns related to storing personal health information online.
+- limiting usage in areas with poor connectivity.
diff --git a/Introduction/Future Scope.md b/Introduction/Future Scope.md
new file mode 100644
index 00000000..fb27a04a
--- /dev/null
+++ b/Introduction/Future Scope.md	
@@ -0,0 +1,4 @@
+# **11. FUTURE SCOPE**
+- Expansion of Services: Introduce additional healthcare services like telemedicine consultations and home healthcare.
+- AI-powered Virtual Health Assistants, Develop AI-driven assistants for round-the-clock support and health advice.
+- Geographical Expansion: Expand services globally by partnering with healthcare providers worldwide.
diff --git a/Introduction/Installation.md b/Introduction/Installation.md
new file mode 100644
index 00000000..8b17f6ea
--- /dev/null
+++ b/Introduction/Installation.md
@@ -0,0 +1,10 @@
+# **7. INSTALLATION**
+To run the project locally in your System
+1. Fork the Repository: Click on the "Fork" button on the repository's GitHub page to create a copy of the repository in your GitHub account.
+2. Clone the repository: Clone the forked repository to your local machine using the following command in your terminal.
+git clone
+ ```bash
+   https://github.com/<your-github-username>/RAPIDOC-HEALTHCARE-WEBSITE
+   ```
+4. You can make changes in code using the VS code text editor.
+5. Find the Index.html file: Right click the file mentioned and click on "Open with Live Server" This will redirect to the web-browser and load the landing page of the project
diff --git a/Introduction/Objectives.md b/Introduction/Objectives.md
new file mode 100644
index 00000000..4f3080b3
--- /dev/null
+++ b/Introduction/Objectives.md
@@ -0,0 +1,12 @@
+# **2.  OBJECTIVES:**
+- Provide a comprehensive online destination for essential healthcare services.
+- Enable users to easily locate nearby clinics, labs, and pharmacies for their medical needs.
+- Keep users informed about blood bank statuses and provide regular health updates through a daily feed.
+- Cater to the accessibility needs of disabled individuals by listing wheelchair-accessible hospitals and clinics.
+- Offer booking services for appointments with top-rated doctors across various specialties.
+- Facilitate normal checkups, and blood tests, and provide crucial information about body temperature ranges and medicine usage.
+- Extend health benefits like boot camps, vaccination drives, and personalized check-ups.
+- Streamline emergency services to help users avoid the rush and get immediate assistance, with real-time updates on bed availability at emergency centers.
+- Provide users with the latest medical insights and health tips through newsletters.
+- Ensure seamless integration of digital solutions for a reliable healthcare experience.
+- Commit to providing a seamless and efficient healthcare experience for all users.
diff --git a/Introduction/Project Overview.md b/Introduction/Project Overview.md
new file mode 100644
index 00000000..f26bc9b4
--- /dev/null
+++ b/Introduction/Project Overview.md	
@@ -0,0 +1,14 @@
+# **1. PROJECT OVERVIEW**
+   
+  RapiDoc is a pioneering digital healthcare platform designed to transform the way users access medical services. As a comprehensive and user-friendly online destination,
+RapiDoc provides a wide range of essential healthcare services aimed at improving the overall healthcare experience. The platform ensures users can easily locate nearby
+clinics and labs, access pharmacy deliveries, stay informed about blood bank statuses, and receive regular health updates through our daily feed. With a focus on accessibility,
+ RapiDoc also caters to disabled individuals by listing wheelchair-accessible hospitals and clinics, ensuring no one is left behind in receiving timely and efficient medicalcare.
+
+  The services offered by RapiDoc are meticulously designed to cater to various health needs. Users can book appointments with top-rated doctors specializing in dermatology,
+gynecology, cardiology, and ENT, ensuring they receive expert medical attention. The platform facilitates normal checkups, blood tests, and provides crucial information about 
+body temperature ranges and medicine usage. Our commitment to health extends beyond immediate medical needs, offering health benefits like bootcamps, vaccination drives, and 
+personalized check-ups. Emergency services are streamlined to help users avoid rush and get immediate assistance, with real-time updates on bed availability at emergency 
+centers. Additionally, RapiDoc's subscription to newsletters keeps users informed with the latest medical insights and health tips. Through our seamless integration of digital
+solutions, RapiDoc stands as a reliable partner in maintaining and enhancing your health, bringing you the best facilities and ensuring you are well-supported at every digital 
+step.
diff --git a/Introduction/Technology stack.md b/Introduction/Technology stack.md
new file mode 100644
index 00000000..e06bc869
--- /dev/null
+++ b/Introduction/Technology stack.md	
@@ -0,0 +1,4 @@
+# **5. TECHNOLOGY STACK**
+- Frontend: HTML5, CSS, JavaScript, BootStrap
+- Integrated Development Environment (IDE): VS Code/Google IDX
+- Version Control: Git and GitHub
diff --git a/Introduction/Usage.md b/Introduction/Usage.md
new file mode 100644
index 00000000..b59361b1
--- /dev/null
+++ b/Introduction/Usage.md
@@ -0,0 +1,40 @@
+
+# **8. USAGE**
+
+**Accessing the Website:**
+
+Users start by accessing the RapiDoc website through their web browser on any internet-enabled device.
+
+**Exploring Healthcare Services:**
+
+Upon landing on the homepage, users can explore the various healthcare services offered by RapiDoc. This includes services such as locating nearby clinics, labs, and pharmacies, booking appointments with doctors across different specialties, accessing blood bank statuses, and receiving regular health updates.
+
+**Locating Nearby Healthcare Facilities:**
+
+If a user is in need of immediate medical assistance or wants to schedule an appointment, they can use the website to locate nearby healthcare facilities such as clinics, labs, and pharmacies. The website provides information on the location, services offered, and contact details of these facilities.
+
+**Booking Appointments:**
+
+
+Users can book appointments with top-rated doctors specializing in various fields like dermatology, gynecology, cardiology, and ENT. They can browse through available appointment slots, select a convenient time, and provide necessary details to confirm the booking.
+
+**Accessing Medical Information:**
+
+
+RapiDoc provides users with access to crucial medical information such as body temperature ranges, medicine usage guidelines, and general health tips. Users can stay informed about various health topics through the website's daily feed and newsletter subscriptions.
+
+**Emergency Services:**
+
+In case of emergencies, users can use the website to access streamlined emergency services. Real-time updates on bed availability at emergency centers help users make informed decisions and get immediate assistance when needed.
+
+**Staying Updated:**
+
+Users can stay updated with the latest medical insights and health tips by subscribing to RapiDoc's newsletters. This ensures that they receive timely information about healthcare developments and best practices.
+
+**Navigating the Website:**
+
+Throughout their interaction with the website, users can easily navigate between different pages using intuitive navigation menus and links. The website's user-friendly interface ensures a smooth and seamless browsing experience.
+
+**Contacting RapiDoc:**
+
+For further inquiries or assistance, users can easily get in touch with RapiDoc through the provided contact information, including email and phone number.
diff --git a/Introduction/features And Services.md b/Introduction/features And Services.md
new file mode 100644
index 00000000..5c71b725
--- /dev/null
+++ b/Introduction/features And Services.md	
@@ -0,0 +1,33 @@
+# **4. FEATURES AND SERVICES**
+**Homepage:**
+
+Welcome Section: Introduces RapiDoc as a digital healthcare destination, emphasizing the ease and convenience of accessing healthcare services through the platform.
+Download App Button: Encourages users to download the RapiDoc app for a more integrated experience.
+
+**Services:**
+
+Clinics/Labs: Helps users locate the best healthcare facilities around them without hassle.
+Pharmacy: Allows users to get prescribed medicines delivered to their doorstep.
+Daily Feed: Provides access to health benefits such as bootcamps, vaccination drives, and more.
+Blood Bank: Offers information about nearby blood banks and available blood groups to ensure no one suffers in emergencies.
+Disabled Person Services: Lists wheelchair-accessible hospitals and clinics to ensure convenient medical care.
+Health Post: Delivers health-related content weekly, monthly, yearly, or daily, based on user preference.
+
+**Appointments:**
+
+Make an Appointment: A form where users can book appointments with doctors. It includes fields for the user's name, email, phone, appointment date, age, location, and an optional message.
+
+**Doctors:**
+
+Specialist Listings: Lists doctors across various specializations such as Dermatology, Gynecology, Cardiology, and ENT, with options to appoint a doctor directly from the website.
+
+**Contact:**
+
+Feedback Form: Allows users to provide feedback and suggestions to help improve digital medical care.
+Contact Information: Provides the platform's contact details, including location, email, and phone number.
+Address: Lists the address as Delhi, India.
+Links: Includes quick links to important sections of the website such as Home, About Us, Services, Doctors, and Contact.
+
+**Newsletter Subscription:**
+
+Daily Newsletter: Encourages users to subscribe to receive medical insights and updates via email.
diff --git a/Introduction/purpose.md b/Introduction/purpose.md
new file mode 100644
index 00000000..40877b80
--- /dev/null
+++ b/Introduction/purpose.md
@@ -0,0 +1,7 @@
+# **3. PURPOSE** 
+The purpose of the RapiDoc project is to revolutionize the accessibility and delivery of healthcare services through a comprehensive digital platform. 
+It aims to address various needs and challenges faced by individuals seeking medical assistance by providing a user-friendly interface to access a wide range
+of healthcare services. By leveraging digital solutions, RapiDoc intends to streamline the process of locating nearby clinics, labs, and pharmacies, booking 
+appointments with top-rated doctors, receiving health updates, and accessing emergency services. Additionally, the project aims to cater to the accessibility
+needs of disabled individuals and keep users informed with the latest medical insights and health tips. Overall, the purpose of RapiDoc is to provide a seamless
+and efficient healthcare experience for all users, enhancing their well-being and ensuring they receive timely and expert medical attention.
diff --git a/README.md b/README.md
index 1a73b202..a132e6b9 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,9 @@
-
 ![RapidDoc](https://camo.githubusercontent.com/dd5e3080a7adc2ead8f86cbbd6577cee0a38439c0ebf195021ce41587b0a405f/68747470733a2f2f6d69726f2e6d656469756d2e636f6d2f6d61782f313430302f312a633459675258595161794f5657785633376f757272772e706e67)
 
+## RapiDoc
 
-## RapiDoc 
 [💬 Join the community on Slack](https://join.slack.com/t/newworkspace-ley5153/shared_invite/zt-2isvflg78-tMexsn50mxdwY4BEJ_W11g)<br>
+
 <div align = "center">
 
 <div align="center">
@@ -14,8 +14,6 @@
 
 </div>
 
-
-
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 <table align="center">
@@ -67,102 +65,98 @@ It is an online platform which enables you to get information about your nearest
 ### Setup and Installation
 
 To contribute to the RAPIDOC-HEALTHCARE-WEBSITE repository, follow these steps:
-1. **Fork the Repository**
+
+1. **Fork the Repository:**
    Click on the "Fork" button on the repository's GitHub page to create a copy of the repository in your GitHub account.
 
-2. **Clone the repository**
-   Clone the forked repository to your local machine using the following command in your terminal:
+2. **Clone the repository:**
+   Clone the forked repository to your local machine using the following command in your terminal.
    ```bash
    git clone https://github.com/<your-github-username>/RAPIDOC-HEALTHCARE-WEBSITE
    ```
-3. **Add a remote upstream**
+3. **Add a remote upstream:**
    ```bash
    git remote add upstream https://github.com/original-owner-username/RAPIDOC-HEALTHCARE-WEBSITE
    ```
-4. **Create a new branch**
-       Create a new branch for your changes. Run the following command in your terminal:
+4. **Create a new branch:**
+   Create a new branch for your changes. Run the following command in your terminal.
    ```bash
    git checkout -b <your-branch-name>
    ```
-   
-5. **Make the desired changes**
+5. **Make the desired changes:**
    Make the desired changes to the source code.
 
-6. **Add your changes**
-   Add your changes to the staging area. Run the following command in your terminal:
+6. **Add your changes:**
+   Add your changes to the staging area. Run the following command in your terminal.
    ```bash
    git add <File1 changed> <File2 changed> ...
    ```
-   
-7. **Commit your changes**
-   Commit your changes with a meaningful commit message. Run the following command in your terminal:
+7. **Commit your changes:**
+   Commit your changes with a meaningful commit message. Run the following command in your terminal.
    ```bash
    git commit -m "<your-commit-message>"
    ```
-   
-8. **Push your changes**
-   Push your changes to your forked repository. Run the following command in your terminal:
+8. **Push your changes:**
+   Push your changes to your forked repository. Run the following command in your terminal
    ```bash
    git push origin <your-branch-name>
    ```
-   
-9. **Create a Pull Request:-**
+9. **Create a Pull Request:**
    Go to the GitHub page of your forked repository. You should see a prompt to create a pull request (PR). Click on it, compare the changes, and create the PR.
 
-
 To run the project locally in your System
-1. *Fork the Repository*
+
+1. _Fork the Repository:_
    Click on the "Fork" button on the repository's GitHub page to create a copy of the repository in your GitHub account.
 
    ![Screenshot (127)](https://github.com/Anishkagupta04/RAPIDOC-HEALTHCARE-WEBSITE-/assets/105973197/164ba1a7-d42e-4e4d-acbd-4bc81cf387d5)
 
    ![Screenshot (128)](https://github.com/Anishkagupta04/RAPIDOC-HEALTHCARE-WEBSITE-/assets/105973197/21a47905-69ee-448f-a5c0-71ceb3c694d5)
 
-2. *Clone the repository*
-   Clone the forked repository to your local machine using the following command in your terminal:
+2. _Clone the repository:_
+   Clone the forked repository to your local machine using the following command in your terminal.
+
    ```bash
    git clone https://github.com/<your-github-username>/RAPIDOC-HEALTHCARE-WEBSITE
 
    ![Screenshot (129)](https://github.com/Anishkagupta04/RAPIDOC-HEALTHCARE-WEBSITE-/assets/105973197/88249cc4-5849-4472-b190-9d9bad2bb236)
 
+   ```
 
-3. *Open the project in VS Code*
-   click on the open with vs code button , to make changes to the code using the text editor
+3. _Open the project in VS Code:_
+   Click on the open with vs code button , to make changes to the code using the text editor.
 
    ![Screenshot (130)](https://github.com/Anishkagupta04/RAPIDOC-HEALTHCARE-WEBSITE-/assets/105973197/10644887-eb4b-4471-98bb-26e0b1bb4f07)
 
-
-4. *Clearly read the contribution guidelines*
-   Make sure to follow the guidelines to contribute to this project 
+4. _Clearly read the contribution guidelines:_
+   Make sure to follow the guidelines to contribute to this project.
 
    ![Screenshot (131)](https://github.com/Anishkagupta04/RAPIDOC-HEALTHCARE-WEBSITE-/assets/105973197/342c364a-d908-48a4-9d12-2552298d87bd)
 
-
-5. *Find the Index.html file*
+5. _Find the Index.html file:_
    Right click the file mentioned and click on "Open with Live Server"
    This will redirect to the web-browser and load the landing page of the project
 
    ![Screenshot (133)](https://github.com/Anishkagupta04/RAPIDOC-HEALTHCARE-WEBSITE-/assets/105973197/62044e1a-a644-467d-98ac-eabfac970ed9)
 
-
-
 To contribute to the RAPIDOC-HEALTHCARE-WEBSITE repository using GitHub Desktop, follow these steps:
-1. **Clone the repository**
+
+1. **Clone the repository:**
    Open GitHub Desktop and log in to your GitHub account. Go to the "File" menu and select "Clone Repository." Select the RAPIDOC-HEALTHCARE-WEBSITE repository from the list and choose a local path to clone the repository.
 
-2. **Switch to the correct branch**
+2. **Switch to the correct branch:**
    Once the repository is cloned, make sure you are on the correct branch where you want to make your changes. You can switch branches using the "Branch" menu in GitHub Desktop.
 
-3. **Make and commit changes**
+3. **Make and commit changes:**
    Make the desired changes to the code in your local repository. After making changes, stage them by clicking the "+" button next to the changed files. Enter a commit message describing your changes and click the "Commit" button.
 
-4. **Push changes to GitHub**
+4. **Push changes to GitHub:**
    After committing your changes, push them to your fork of the repository on GitHub. Click the "Push origin" button in GitHub Desktop to push your changes.
 
-5. **Create a pull request**
+5. **Create a pull request:**
    Go to your fork of the RAPIDOC-HEALTHCARE-WEBSITE repository on the GitHub website. You should see a notification that your branch is ahead of the original repository. Click on the "Compare & pull request" button to create a pull request for your changes.
 
-6. **Review and submit the pull request**
+6. **Review and submit the pull request:**
    On the pull request page, review your changes and add a title and description for your pull request. Once you're satisfied with your changes, click the "Create pull request" button to submit your pull request.
 
 If you find this project helpful, please consider giving it a star! ⭐️
@@ -170,22 +164,23 @@ If you find this project helpful, please consider giving it a star! ⭐️
 ### Contributing
 
 We love your input! We want to make contributing to this project as easy and transparent as possible, whether it's:
+
 - Reporting a bug
 - Discussing the current state of the code
 - Submitting a fix
 - Proposing new features
 
-<div>
- 
-<h2 align = "center">Our Contributors ❤️</h2>
-<div align = "center">
- <h3>Thank you for contributing to our repository</h3>
+<div align="center">
+  <h2>Our Contributors ❤️</h2>
+  <h3>Thank you for contributing to our repository</h3>
+
+<a href="https://github.com/Anishkagupta04/RAPIDOC-HEALTHCARE-WEBSITE-/graphs/contributors">
+<!-- it links to the "contributors" page of the RAPIDOC-HEALTHCARE-WEBSITE- repository. This page shows a graph of contributors and their contributions to the repository. -->
+<img src="https://contributors-img.web.app/image?repo=Anishkagupta04/RAPIDOC-HEALTHCARE-WEBSITE-" />
+<!-- This takes a repository name as a query parameter (?repo=Anishkagupta04/RAPIDOC-HEALTHCARE-WEBSITE-) and returns an image representing the contributors to that repository. -->
 
-![Contributors](https://contrib.rocks/image?repo=Anishkagupta04/RAPIDOC-HEALTHCARE-WEBSITE-)
+  </a>
 
 ### Show some ❤️ by starring this awesome repository!
 
 </div>
-
-  
-
diff --git a/chatbox.css b/chatbox.css
new file mode 100644
index 00000000..c52918b5
--- /dev/null
+++ b/chatbox.css
@@ -0,0 +1,197 @@
+/* Import Google font - Poppins */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+body {
+  
+}
+.chatbot-toggler {
+   
+  position: fixed;
+  bottom: 30px;
+  right: 35px;
+  outline: none;
+  border: none;
+  height: 50px;
+  width: 50px;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: #4178c0;
+  transition: all 0.2s ease;
+}
+body.show-chatbot .chatbot-toggler {
+  transform: rotate(90deg);
+}
+.chatbot-toggler span {
+  color: #fff;
+  position: absolute;
+}
+.chatbot-toggler span:last-child,
+body.show-chatbot .chatbot-toggler span:first-child  {
+  opacity: 0;
+}
+body.show-chatbot .chatbot-toggler span:last-child {
+  opacity: 1;
+}
+.chatbot {
+    z-index: 1;
+  position: fixed;
+  right: 35px;
+  bottom: 90px;
+  width: 420px;
+  background: #fff;
+  border-radius: 15px;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(0.5);
+  transform-origin: bottom right;
+  box-shadow: 0 0 128px 0 rgba(0,0,0,0.1),
+              0 32px 64px -48px rgba(0,0,0,0.5);
+  transition: all 0.1s ease;
+}
+body.show-chatbot .chatbot {
+  opacity: 1;
+  pointer-events: auto;
+  transform: scale(1);
+}
+.chatbot header {
+  padding: 16px 0;
+  position: relative;
+  text-align: center;
+  color: #fff;
+  background: #4178c0;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+.chatbot header span {
+  position: absolute;
+  right: 15px;
+  top: 50%;
+  display: none;
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+header h2 {
+  font-size: 1.4rem;
+}
+.chatbot .chatbox {
+  overflow-y: auto;
+  height: 510px;
+  padding: 30px 20px 100px;
+}
+.chatbot :where(.chatbox, textarea)::-webkit-scrollbar {
+  width: 6px;
+}
+.chatbot :where(.chatbox, textarea)::-webkit-scrollbar-track {
+  background: #fff;
+  border-radius: 25px;
+}
+.chatbot :where(.chatbox, textarea)::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 25px;
+}
+.chatbox .chat {
+  display: flex;
+  list-style: none;
+}
+.chatbox .outgoing {
+  margin: 20px 0;
+  justify-content: flex-end;
+}
+.chatbox .incoming span {
+  width: 32px;
+  height: 32px;
+  color: #fff;
+  cursor: default;
+  text-align: center;
+  line-height: 32px;
+  align-self: flex-end;
+  background: #4178c0;
+  border-radius: 4px;
+  margin: 0 10px 7px 0;
+}
+.chatbox .chat p {
+  white-space: pre-wrap;
+  padding: 12px 16px;
+  border-radius: 10px 10px 0 10px;
+  max-width: 75%;
+  color: #fff;
+  font-size: 0.95rem;
+  background: #4178c0;
+}
+.chatbox .incoming p {
+  border-radius: 10px 10px 10px 0;
+}
+.chatbox .chat p.error {
+  color: #721c24;
+  background: #f8d7da;
+}
+.chatbox .incoming p {
+  color: #000;
+  background: #f2f2f2;
+}
+.chatbot .chat-input {
+  display: flex;
+  gap: 5px;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  background: #fff;
+  padding: 3px 20px;
+  border-top: 1px solid #ddd;
+}
+.chat-input textarea {
+  height: 55px;
+  width: 100%;
+  border: none;
+  outline: none;
+  resize: none;
+  max-height: 180px;
+  padding: 15px 15px 15px 0;
+  font-size: 0.95rem;
+}
+.chat-input span {
+  align-self: flex-end;
+  color: #4178c0;
+  cursor: pointer;
+  height: 55px;
+  display: flex;
+  align-items: center;
+  visibility: hidden;
+  font-size: 1.35rem;
+}
+.chat-input textarea:valid ~ span {
+  visibility: visible;
+}
+
+@media (max-width: 490px) {
+  .chatbot-toggler {
+    right: 20px;
+    bottom: 20px;
+  }
+  .chatbot {
+    right: 0;
+    bottom: 0;
+    height: 100%;
+    border-radius: 0;
+    width: 100%;
+  }
+  .chatbot .chatbox {
+    height: 90%;
+    padding: 25px 15px 100px;
+  }
+  .chatbot .chat-input {
+    padding: 5px 15px;
+  }
+  .chatbot header span {
+    display: block;
+  }
+}
\ No newline at end of file
diff --git a/chatboxx.js b/chatboxx.js
new file mode 100644
index 00000000..c02fc282
--- /dev/null
+++ b/chatboxx.js
@@ -0,0 +1,143 @@
+const chatbotToggler = document.querySelector(".chatbot-toggler");
+const closeBtn = document.querySelector(".close-btn");
+const chatbox = document.querySelector(".chatbox");
+const chatInput = document.querySelector(".chat-input textarea");
+const sendChatBtn = document.querySelector(".chat-input span");
+
+let userMessage = null; // Variable to store user's message
+let appointmentStep = 0; // Variable to track the appointment scheduling steps
+let selectedDoctor = null; // Variable to store the selected doctor
+let appointmentDetails = {}; // Object to store appointment details
+
+const inputInitHeight = chatInput.scrollHeight;
+
+const predefinedQA = {
+    "Hi": "Hello",
+    "Hey":"Hello",
+    "How are you?": "I'm just a bot, but I'm doing great! How can I assist you today?",
+    "What is your name?": "I am a chatbot created to assist you.",
+    "Tell me a joke.": "Why don't scientists trust atoms? Because they make up everything!",
+    "What is RapiDoc?": "RapiDoc is an online platform which enables you to get information about your nearest hospitals and healthcare facilities. It aims to address health-related issues. It is a one-stop destination for all your medical needs.",
+    "How can RapiDoc help me?": "RapiDoc helps you find the nearest hospitals and healthcare facilities, ensuring you have access to necessary medical information and services quickly and easily.",
+    "What services does RapiDoc provide?": "RapiDoc provides information on nearby hospitals, healthcare facilities, and various medical services to address your health-related needs.",
+    "Make an appointment": "Sure, here are some doctors available for appointments:\n1. Dr. Vikas Chopra\n2. Dr. Ajay Aggarwal\n3. Dr. Soni Gupta\nPlease type the number of the doctor you want to make an appointment with."
+};
+
+const doctorsList = {
+    "1": "Dr. Vikas Chopra",
+    "2": "Dr. Ajay Aggarwal",
+    "3": "Dr. Soni Gupta"
+};
+
+const createChatLi = (message, className) => {
+    const chatLi = document.createElement("li");
+    chatLi.classList.add("chat", `${className}`);
+    let chatContent = className === "outgoing" ? `<p></p>` : `<span class="material-symbols-outlined">smart_toy</span><p></p>`;
+    chatLi.innerHTML = chatContent;
+    chatLi.querySelector("p").textContent = message;
+    return chatLi;
+}
+
+const generateResponse = (chatElement) => {
+    const API_URL = "https://api.openai.com/v1/chat/completions";
+    const messageElement = chatElement.querySelector("p");
+
+    const requestOptions = {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+            "Authorization": `Bearer ${API_KEY}`
+        },
+        body: JSON.stringify({
+            model: "gpt-3.5-turbo",
+            messages: [{ role: "user", content: userMessage }],
+        })
+    }
+
+    fetch(API_URL, requestOptions).then(res => res.json()).then(data => {
+        messageElement.textContent = data.choices[0].message.content.trim();
+    }).catch(() => {
+        messageElement.classList.add("error");
+        messageElement.textContent = "Oops! Something went wrong. Please try again.";
+    }).finally(() => chatbox.scrollTo(0, chatbox.scrollHeight));
+}
+
+const handleAppointment = (userMessage) => {
+    if (appointmentStep === 0) {
+        selectedDoctor = doctorsList[userMessage];
+        if (!selectedDoctor) {
+            chatbox.appendChild(createChatLi("Invalid doctor number. Please try again.", "incoming"));
+            return;
+        }
+        chatbox.appendChild(createChatLi(`You selected ${selectedDoctor}. Please enter the date for your appointment (YYYY-MM-DD).`, "incoming"));
+        appointmentStep++;
+    } else if (appointmentStep === 1) {
+        const date = userMessage;
+        if (!date.match(/^\d{4}-\d{2}-\d{2}$/)) {
+            chatbox.appendChild(createChatLi("Invalid date format. Please enter the date in YYYY-MM-DD format.", "incoming"));
+            return;
+        }
+        appointmentDetails.date = date;
+        chatbox.appendChild(createChatLi("Please enter the time for your appointment (HH:MM).", "incoming"));
+        appointmentStep++;
+    } else if (appointmentStep === 2) {
+        const time = userMessage;
+        if (!time.match(/^\d{2}:\d{2}$/)) {
+            chatbox.appendChild(createChatLi("Invalid time format. Please enter the time in HH:MM format.", "incoming"));
+            return;
+        }
+        appointmentDetails.time = time;
+        chatbox.appendChild(createChatLi(`Appointment scheduled with ${selectedDoctor} on ${appointmentDetails.date} at ${appointmentDetails.time}.`, "incoming"));
+        appointmentStep = 0;
+        selectedDoctor = null;
+        appointmentDetails = {};
+    }
+}
+
+const handleChat = () => {
+    userMessage = chatInput.value.trim();
+    if (!userMessage) return;
+
+    chatInput.value = "";
+    chatInput.style.height = `${inputInitHeight}px`;
+
+    chatbox.appendChild(createChatLi(userMessage, "outgoing"));
+    chatbox.scrollTo(0, chatbox.scrollHeight);
+
+    if (appointmentStep > 0) {
+        handleAppointment(userMessage);
+    } else if (predefinedQA[userMessage]) {
+        setTimeout(() => {
+            const incomingChatLi = createChatLi(predefinedQA[userMessage], "incoming");
+            chatbox.appendChild(incomingChatLi);
+            chatbox.scrollTo(0, chatbox.scrollHeight);
+        }, 600);
+    } else if (Object.keys(doctorsList).includes(userMessage)) {
+        setTimeout(() => {
+            handleAppointment(userMessage);
+        }, 600);
+    } else {
+        setTimeout(() => {
+            const incomingChatLi = createChatLi("Thinking...", "incoming");
+            chatbox.appendChild(incomingChatLi);
+            chatbox.scrollTo(0, chatbox.scrollHeight);
+            generateResponse(incomingChatLi);
+        }, 600);
+    }
+}
+
+chatInput.addEventListener("input", () => {
+    chatInput.style.height = `${inputInitHeight}px`;
+    chatInput.style.height = `${chatInput.scrollHeight}px`;
+});
+
+chatInput.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" && !e.shiftKey && window.innerWidth > 800) {
+        e.preventDefault();
+        handleChat();
+    }
+});
+
+sendChatBtn.addEventListener("click", handleChat);
+closeBtn.addEventListener("click", () => document.body.classList.remove("show-chatbot"));
+chatbotToggler.addEventListener("click", () => document.body.classList.toggle("show-chatbot"));
diff --git a/img/avatar.png b/img/avatar.png
new file mode 100644
index 00000000..bdd06384
Binary files /dev/null and b/img/avatar.png differ
diff --git a/index.html b/index.html
index 31d22e13..dd9ed213 100644
--- a/index.html
+++ b/index.html
@@ -4,12 +4,14 @@
 <head>
   <meta charset="utf-8">
   <meta content="width=device-width, initial-scale=1.0" name="viewport">
+
   <link rel="icon" type="image/x-icon" href="/favicon.ico">
- 
+
+
   <link rel="stylesheet" type="text/css" href="./style.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
   <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
-  
+  <script src="https://unpkg.com/scrollreveal"></script>
   <title>RapiDoc</title>
   <link
     href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
@@ -24,10 +26,102 @@
   <link href="glightbox/css/glightbox.min.css" rel="stylesheet">
   <link href="remixicon/remixicon.css" rel="stylesheet">
   <link href="swiper/swiper-bundle.min.css" rel="stylesheet">
-  <link href="style.css" rel="stylesheet">
-  <link href="patient-portal.css" rel="stylesheet">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
+
+                         
+  <link href="patient-portal.css" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+    integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css">
+    <style>
+      /* Ensure the input takes up full width */
+       /* Ensure the input takes up full width */
+/* Ensure the input takes up full width */
+.iti--allow-dropdown input {
+    padding-left: 50px;
+    background-color: black; /* Adjust padding to prevent overlap */
+}
+
+.iti.iti--allow-dropdown {
+    margin-left: 250px;
+}
+
+.container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.content {
+    text-align: left;
+    flex: 1;
+    padding: 20px;
+}
+
+.sec-img {
+    max-width: 50%;
+    width: 600px;
+    height: 600px;
+    margin-left: auto;
+}
+
+.btn-get-started {
+    display: inline-block;
+    background-color: #55a5ea;
+    color: #fff;
+    padding: 10px 20px;
+    text-decoration: none;
+    border-radius: 5px;
+    margin-top: 20px;
+}
+
+@media screen and (max-width: 992px) {
+    .container {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .sec-img {
+        max-width: 100%;
+        margin: 20px 0;
+        position: relative;
+        top: 0;
+        right: 0;
+        
+    }
+
+    .content {
+        text-align: center;
+        padding: 10px;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .content {
+        text-align: center;
+        padding: 10px;
+    }
+
+    .sec-img {
+        max-width: 100%;
+        margin: 20px 0;
+        position: relative;
+        top: 0;
+        right: 0;
+    }
+}
+
+    </style>
+    <link rel="stylesheet" href="chatbox.css">
+     <!-- Google Fonts Link For Icons chatboxx -->
+     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
+     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
+     <script src="chatboxx.js" defer></script>
 </head>
 
 <body>
@@ -54,28 +148,67 @@
       </nav>
       </div>
     </header>
+    <ul class="chatbox">
+      <li class="chat incoming">
+        <span class="material-symbols-outlined">smart_toy</span>
+        <p>Hi there 👋<br>How can I help you today?</p>
+      </li>
+    </ul>
+    <div class="chat-input">
+      <textarea placeholder="Enter a message..." spellcheck="false" required></textarea>
+      <span id="send-btn" class="material-symbols-rounded">send</span>
+    </div>
+  </div>
+
+
+  <!-- ############# Header ############# -->
 
+  <header id="header" class="fixed-top">
+    <div class="container d-flex align-items-center">
 
-  <div class="container">
+      <h1 class="logo me-auto"><a href="index.html">RapiDoc</a></h1>
+
+      <nav id="navbar" class="navbar order-last order-lg-0">
+        <ul>
+          <li><a class="nav-link scrollto active" href="#home">Home</a></li>
+          <li><a class="nav-link scrollto" href="#about">About</a></li>
+          <li><a class="nav-link scrollto" href="#services">Services</a></li>
+          <li><a class="nav-link scrollto" href="#doctors">Doctors</a></li>
+          <li><a class="nav-link scrollto" href="#contact">Contact</a></li>
+        </ul>
+        <i class="bi bi-list mobile-nav-toggle"></i>
+      </nav><!-- .navbar -->
+
+      <a href="#appointment" class="appointment-btn scrollto">
+        <span class="d-md-inline">EMERGENCY</span></a>
+
+    </div>
+  </header>
+
+
+  <div class="container" style="display:flex ;">
     <div class="content">
-      <h1 style="font-size: 65px;">
-        Welcome to <span style="color: #55a5ea;">RapiDoc!</span> <br /> Your one-stop digital <br> healthcare destination
-      </h1>
-      <h4>
-        <!-- <a href="#about" class="btn-get-started scrollto">Download App</a> -->
-      </h4>
-    </div>    
-    <img style="position: relative; top: -60px; right: -10rem;" class="sec-img" src="images/rd.png" alt="" />
-  </div>
-  <br><br><br><br><br>
-  <!-- End Home -->
+
+        <h1 style="font-size: 65px;">
+            Welcome to <span style="color: #55a5ea;">RapiDoc!</span> <br /> Your one-stop digital <br> healthcare
+            destination
+        </h1>
+        <h4>
+            <a href="#about" class="btn-get-started scrollto">Download Now</a>
+        </h4>
+      </div>
+      <img class="sec-img" src="images/rd.png" alt="" />
+  
+    </div>
+<br><br><br><br><br>
+<!-- End Home -->
+
   <main id="main">
 
-   
-   
+
     <!-- ############ Featured Services Section ############ -->
-    
-    
+
+
     <section id="featured-services" class="featured-services">
       <div class="container" data-aos="fade-up">
 
@@ -120,25 +253,26 @@ <h4 class="title"><a href="">Medicine use</a></h4>
       </div>
     </section><!-- End Featured Services Section -->
 
-   
+
     <!-- ################### About Section ################### -->
-   
-   
+
+
     <section id="about" class="about">
       <div class="container" data-aos="fade-up">
         <div class="section-title">
-          <h2>About Us</h2>
-          <p>RapiDoc is an online platform which enables you to get information about your nearest hospitals and
-            healthcare facilities. It aims to address health-related issues. It is a one-stop destination for all your
-            medical needs.</p>
+
+          <h2 style="text-align: center;">About Us</h2>
+
+          <p>RapiDoc is an online platform designed to provide comprehensive information about nearby hospitals and healthcare facilities, addressing a wide range of health-related issues. It serves as a one-stop destination for all your medical needs, offering an easy and efficient way to find essential healthcare services. Whether you're looking for the nearest hospital, specialized medical care, or urgent health services, RapiDoc simplifies the process with its user-friendly interface and extensive database. By centralizing health information, it ensures you have quick access to vital resources, enhancing your ability to make informed healthcare decisions and receive timely medical attention.
+
+          </p>
         </div>
 
         <div class="row">
           <div class="col-xl-5 col-lg-6 video-box d-flex justify-content-center
      align-items-stretch position-relative">
-            <!-- <a href="https://youtu.be/ImQqQ9_s38k" class="glightbox play-btn mb-4"></a> -->
-          </div>
- <div class="col-xl-7 col-lg-6 icon-boxes d-flex flex-column align-items-stretch
+
+          <div class="col-xl-7 col-lg-6 icon-boxes d-flex flex-column align-items-stretch
      justify-content-center py-5 px-lg-5">
 
             <div class="icon-box">
@@ -146,7 +280,7 @@ <h2>About Us</h2>
               <h4 class="title"><a href="">HEALTH CHECKUPS</a></h4>
               <p class="description">Bootcamps, personalised check-ups, newsletters, it’s all here.</p>
             </div>
-                   
+
             <div class="icon-box">
               <div class="icon"><i class="bx bx-health"></i></div>
               <h4 class="title"><a href="">EMERGENCY WARDS</a></h4>
@@ -167,10 +301,10 @@ <h4 class="title"><a href="">SERVICES</a></h4>
       </div>
     </section><!-- End About Section -->
 
-   
+
     <!-- ################## Counts Section ################## -->
-   
-   
+
+
     <section id="counts" class="counts">
       <div class="container" data-aos="fade-up">
 
@@ -221,20 +355,19 @@ <h4 class="title"><a href="">SERVICES</a></h4>
       </div>
     </section><!-- End Counts Section -->
 
-   
+
     <!-- #################### Services Section #################### -->
-   
-   
-    <section id="services" class="services">
-      <div class="container">
 
-        <div class="section-title">
-          <h2>Services</h2>
-          <p>Our services are for your good health. We are with you at every digital step.</p>
-        </div>
 
+
+    <section id="services" class="services">
+      <div class="section-title">
+        <h2>Services</h2>
+        <p>Our services are for your good health. We are with you at every digital step.</p>
+      </div>
+      <div class="container">
         <div class="row">
-          <div class="col-lg-4 col-md-6 d-flex align-items-stretch">
+          <div class="col-lg-4 col-md-3 d-flex align-items-stretch ">
             <div class="icon-box">
               <div class="icon"><i class="fas fa-heartbeat"></i></div>
               <h4><a href="">Clinics/Labs</a></h4>
@@ -242,7 +375,7 @@ <h4><a href="">Clinics/Labs</a></h4>
             </div>
           </div>
 
-          <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0">
+          <div class="col-lg-4 col-md-6 d-flex align-items-stretch ">
             <div class="icon-box">
               <div class="icon"><i class="fas fa-pills"></i></div>
               <h4><a href="https://www.1mg.com">Pharmacy</a></h4>
@@ -250,7 +383,7 @@ <h4><a href="https://www.1mg.com">Pharmacy</a></h4>
             </div>
           </div>
 
-          <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0">
+          <div class="col-lg-4 col-md-6 d-flex align-items-stretch ">
             <div class="icon-box">
               <div class="icon"><i class="fas fa-hospital-user"></i></div>
               <h4><a href="">Daily Feed</a></h4>
@@ -259,7 +392,7 @@ <h4><a href="">Daily Feed</a></h4>
             </div>
           </div>
 
-          <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4">
+          <div class="col-lg-4  col-md-6 d-flex align-items-stretch ">
             <div class="icon-box">
               <div class="icon"><i class="fas fa-dna"></i></div>
               <h4><a href="Html-Files/blood.html">Blood Bank</a></h4>
@@ -267,7 +400,7 @@ <h4><a href="Html-Files/blood.html">Blood Bank</a></h4>
             </div>
           </div>
 
-          <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4">
+          <div class="col-lg-4 col-md-6 d-flex align-items-stretch ">
             <div class="icon-box">
               <div class="icon"><i class="fas fa-wheelchair"></i></div>
               <h4><a href="">Disabled Person</a></h4>
@@ -275,7 +408,7 @@ <h4><a href="">Disabled Person</a></h4>
             </div>
           </div>
 
-          <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4">
+          <div class="col-lg-4 col-md-6 d-flex align-items-stretch">
             <div class="icon-box">
               <div class="icon"><i class="fas fa-notes-medical"></i></div>
               <h4><a href="https://www.medicalnewstoday.com/">Health Post</a></h4>
@@ -289,134 +422,162 @@ <h4><a href="https://www.medicalnewstoday.com/">Health Post</a></h4>
     </section><!-- End Services Section -->
 
     <!-- Add Patient Portal Section -->
+
   <section id="patient-portal" class="patient-portal">
-    <div class="container">
+      <div class="container-patientportal">
+      <div class="section-title" id="section-patientportal">
 
-      <div class="section-title">
         <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>
+      <div class="container">
+
 
       <!-- Add Login Form for Patient Portal -->
-      <div class="login-form">
-        <form action="login.php" method="post">
-          <div class="form-group">
-            <input type="email" class="form-control" name="email" placeholder="Your Email" required>
-          </div>
-          <div class="form-group">
-            <input type="password" class="form-control" name="password" placeholder="Your Password" required>
+      
+          <div 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="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>
 
-    </div>
-  </section><!-- End Patient Portal Section -->
-   
+
     <!-- ############# Appointment Section ############# -->
-   
-   
+
+
     <section id="appointment" class="appointment section-bg">
-      <div class="container">
 
+      <div class="container">
         <div class="section-title">
           <h2>Make an Appointment</h2>
           <p>We listed the docs, we made you a form. You make us an appointment.</p><br><br>
         </div>
         <div class="layout">
           <form accept="" role="form" class="php-email-form">
-  <div class="row">
-    <div class="col-md-4 form-group">
-      <input type="text" name="name" class="form-control" id="name" placeholder="Your Name">
-    </div>
-    <div class="col-md-4 form-group mt-3 mt-md-0">
-      <input type="email" class="form-control" name="email" id="email" placeholder="Your Email">
-    </div>
-    <div class="col-md-4 form-group mt-3 mt-md-0">
-      <input type="tel" class="form-control" name="phone" id="phone" placeholder="Your Phone">
-    </div>
-  </div>
-  <div class="row">
-    <div class="col-md-4 form-group mt-3">
-      <input type="datetime" name="date" class="form-control datepicker" id="date" placeholder="Appointment Date">
-    </div>
-    <div class="col-md-4 form-group mt-3">
-      <select name="age" id="age" class="form-select">
-        <option value="">Select Age</option>
-        <option value="Department 1">18 or below</option>
-        <option value="Department 2">18 to 55</option>
-        <option value="Department 3">55 above</option>
-      </select>
-    </div>
-    <div class="col-md-4 form-group mt-3">
-      <select name="doctor" id="doctor" class="form-select">
-        <option value="">Your Location</option>
-        <option value="Doctor 1">Mumbai</option>
-        <option value="Doctor 2">Delhi</option>
-        <option value="Doctor 3">Chennai</option>
-        <!-- Add more locations as needed -->
-      </select>
-    </div>
-  </div>
+            <div class="row">
 
-  <!-- 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>
+              <div class="col-md-4 form-group">
 
-  <!-- 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>
+                <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">
 
-  <!-- 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>
+                <input type="tel" class="form-control" name="phone" id="phone" placeholder="Your Phone" maxlength="10"
+                  minlength="10" pattern="[0-9]*" style="width: 100%;"
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-md-4 form-group mt-3">
 
-  <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>
+                <input type="date" name="date" class="form-control datepicker" id="date" placeholder="Appointment Date">
+
+                <script>   //To set value of minimum date in calender 
+                  var currentDate = new Date();
+                  var year = currentDate.getFullYear();
+                  var month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
+                  var day = currentDate.getDate().toString().padStart(2, '0');
+                  var formattedDate = `${year}-${month}-${day}`;
+
+                  document.getElementById('date').setAttribute('min', formattedDate);
+                </script>
+
+              </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>
 
@@ -426,21 +587,22 @@ <h2>Make an Appointment</h2>
 
 
     <!-- ################# Doctors Section ################# -->
-  
-  
+
+
     <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>
+      <div class="section-title">
+        <h2>Doctors</h2>
+        <p>Don’t compromise your health when we have listed the best doctors for you!</p>
+      </div>
+      <div class="container">
 
         <div class="row">
 
           <div class="col-lg-6">
             <div class="member d-flex align-items-start">
-              <div class="pic"><img src="img/doctors/1.png" class="img-fluid" alt="" style="width: 188px; height: 188px;"></div>
+              <div class="pic"><img src="img/doctors/1.png" class="img-fluid" alt=""
+                  style="width: 188px; height: 188px;"></div>
               <div class="member-info">
                 <h4>Dermatologist</h4>
                 <br>
@@ -462,7 +624,8 @@ <h4>Gynecologist</h4>
 
           <div class="col-lg-6 mt-4">
             <div class="member d-flex align-items-start">
-              <div class="pic"><img src="img/doctors/3.png" class="img-fluid" alt="" style="width: 188px; height: 188px;"></div>
+              <div class="pic"><img src="img/doctors/3.png" class="img-fluid" alt=""
+                  style="width: 188px; height: 188px;"></div>
               <div class="member-info">
                 <h4>Cardiologist</h4>
                 <br>
@@ -473,7 +636,8 @@ <h4>Cardiologist</h4>
 
           <div class="col-lg-6 mt-4">
             <div class="member d-flex align-items-start">
-              <div class="pic"><img src="img/doctors/4.png" class="img-fluid" alt="" style="width: 188px; height: 188px;"></div>
+              <div class="pic"><img src="img/doctors/4.png" class="img-fluid" alt=""
+                  style="width: 188px; height: 188px;"></div>
               <div class="member-info">
                 <h4>ENT</h4>
                 <br>
@@ -483,7 +647,8 @@ <h4>ENT</h4>
           </div>
           <div class="col-lg-6 mt-4">
             <div class="member d-flex align-items-start">
-              <div class="pic"><img src="img/doctors/Image(13).png" class="img-fluid" alt="" style="width: 188px; height: 188px;"></div>
+              <div class="pic"><img src="img/doctors/Image(13).png" class="img-fluid" alt=""
+                  style="width: 188px; height: 188px;"></div>
               <div class="member-info">
                 <h4>Pediatrician</h4>
                 <br>
@@ -496,46 +661,59 @@ <h4>Pediatrician</h4>
     </section><!-- End Doctors Section -->
 
 
-     <!-- ################# Contact Section ################# -->
-    
-    
-     <section id="contact" class="contact">
-      <div class="container">
+    <!-- ################# Contact Section ################# -->
 
-        <div class="section-title">
-          <h2>Contact</h2>
-          <p>Located your appointment. Feel free to give us feedback and help us improve our digital med care.</p>
-        </div>
-      </div>
 
-      <!--Google map-->
-      <div class="mapouter">
-        <div class="gmap_canvas"><iframe class="gmap_iframe" width="100%" frameborder="0" scrolling="no"
-            marginheight="0" marginwidth="0"
-            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3500.8055368048804!2d77.22981385036265!3d28.6655407892513!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd0683919c3b%3A0xf5fc331b74c2b9e2!2sIndira%20Gandhi%20Delhi%20Technical%20University%20for%20Women!5e0!3m2!1sen!2sin!4v1679424592719!5m2!1sen!2sin"></iframe><a
-            href="https://www.fnfgo.com/">FNF Mods</a></div>
-        <style>
-          .mapouter {
-            position: relative;
-            text-align: right;
-            width: 100%;
-            height: 363px;
-          }
-
-          .gmap_canvas {
-            overflow: hidden;
-            background: none !important;
-            width: 100%;
-            height: 363px;
-          }
-
-          .gmap_iframe {
-            height: 363px !important;
-          }
-        </style>
-      </div><br>
 
+    <section id="contact" class="contact">
+      <div class="section-title">
+        <h2>Contact</h2>
+        <p>Located your appointment. Feel free to give us feedback and help us improve our digital med care.</p>
+      </div>
+      </div>
       <div class="container">
+
+
+        <!--Google map-->
+        <div class="mapouter">
+          <div class="gmap_canvas"><iframe class="gmap_iframe" width="100%" frameborder="0" scrolling="no"
+              marginheight="0" marginwidth="0"
+              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3500.8055368048804!2d77.22981385036265!3d28.6655407892513!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd0683919c3b%3A0xf5fc331b74c2b9e2!2sIndira%20Gandhi%20Delhi%20Technical%20University%20for%20Women!5e0!3m2!1sen!2sin!4v1679424592719!5m2!1sen!2sin"></iframe><a
+              href="https://www.fnfgo.com/">FNF Mods</a></div>
+          <style>
+            .mapouter {
+              position: relative;
+              text-align: right;
+              width: 100%;
+              height: 363px;
+            }
+
+            .gmap_canvas {
+              overflow: hidden;
+              background: none !important;
+              width: 100%;
+              height: 363px;
+            }
+
+            .gmap_iframe {
+              height: 363px !important;
+            }
+          </style>
+        </div><br>
+
+        <div class="container" >
+          <div class="row mt-2"
+            style="display: flex; flex-direction: row; align-items: stretch; justify-content: space-around;">
+
+            <div class="col-lg-4">
+              <div class="info">
+                <div class="address">
+                  <i class="fa fa-location-dot"></i>
+                  <h4>Location:</h4>
+                  <p><a href="https://www.google.com/maps/search/?api=1&query=IGDTUW,Delhi" target="_blank">IGDTUW,
+                      Delhi</a></p>
+                </div>
+
         <div class="row mt-5">
 
           <div class="col-lg-4">
@@ -543,7 +721,8 @@ <h2>Contact</h2>
               <div class="address">
                 <i class="bi bi-geo-alt"></i>
                 <h4>Location:</h4>
-                <p><a href="https://www.google.com/maps/search/?api=1&query=IGDTUW,Delhi" target="_blank">IGDTUW, Delhi</a></p>
+                <p><a href="https://www.google.com/maps/search/?api=1&query=IGDTUW,Delhi" target="_blank">IGDTUW,
+                    Delhi</a></p>
               </div>
 
               <div class="email">
@@ -560,166 +739,237 @@ <h4>Call:</h4>
             </div>
           </div><br><br>
 
-          <div class="col-lg-8 mt-5 mt-lg-0">
-            <form action="" role="form" class="php-email-form">
-              <div class="row">
-                <div class="col-md-6 form-group">
-                  <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required>
+
+                <div class="email">
+                  <i class="fa fa-envelope"></i>
+                  <h4>Email:</h4>
+                  <p><a href="mailto:rapidoc@mail.com">rapidoc@mail.com</a></p>
                 </div>
-                <div class="col-md-6 form-group mt-3 mt-md-0">
-                  <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
+
+                <div class="phone">
+                  <i class="fa fa-phone"></i>
+                  <h4>Call:</h4>
+                  <p><a href="tel:+91 1234567890">+91 1234567890</a></p>
                 </div>
               </div>
-              <div class="form-group mt-3">
-                <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required>
-              </div>
-              <div class="form-group mt-3">
-                <textarea class="form-control" name="message" rows="5" placeholder="Message" required></textarea>
-              </div>
-              <div class="text-center"><button type="submit">Send Message</button></div>
-            </form>
+            </div><br><br>
+
+          
+            <div class="col-lg-8 mt-5 mt-lg-0">
+              <form action="" role="form" class="php-email-form">
+                <div class="row">
+                  <div class="col-md-6 form-group">
+                    <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required=""
+                      fdprocessedid="b0eyy">
+                  </div>
+                  <div class="col-md-6 form-group mt-3 mt-md-0">
+                    <input type="email" class="form-control" name="email" id="email" placeholder="Your Email"
+                      required="" fdprocessedid="ajhhhr">
+                  </div>
+                </div>
+                <div class="form-group mt-3">
+                  <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required=""
+                    fdprocessedid="mbdam9">
+                </div>
+                <div class="form-group mt-3">
+                  <textarea class="form-control" name="message" rows="5" placeholder="Message" required=""></textarea>
+                </div>
+                <div class="text-center"><button type="submit" fdprocessedid="dyl49d">Send Message</button></div>
+              </form>
 
+            </div>
           </div>
 
         </div>
-
-      </div>
     </section><!-- End Contact Section -->
 
 
     <!-- Feedback System-->
-  <section id="feedback" class="feed">
-    <div class="feedback">
-      <h1>Give Us Your Valuable Feedback.</h1>
-      <p>Your feedback is very important for Rapidoc.</p>
-      <div class="emoji">
+    <section id="feedback" class="feed">
+      <div class="feedback">
+        <h1>Give Us Your Valuable Feedback.</h1>
+        <p>Your feedback is very important for Rapidoc.</p>
+        <div class="emoji">
           <button class="btn normal">&#128578;</button>
           <button class="btn normal">&#128515;</button>
           <button class="btn normal">&#128519;</button>
           <button class="btn normal">&#128531;</button>
           <button class="btn normal">&#128532;</button>
           <button class="btn normal">&#128545;</button>
-      </div>
-      <p class="ques">What you want to say?</p>
-      <textarea id="textarea" cols="20" rows="5"></textarea>
-      <p class="ques">Are you satisfied with rapidoc?</p>
-      <div class="radiobtn">
+        </div>
+        <p class="ques">What you want to say?</p>
+        <textarea id="textarea" cols="20" rows="5"></textarea>
+        <p class="ques">Are you satisfied with rapidoc?</p>
+        <div class="radiobtn">
           <div class="one">
-            <input class="input"  type="radio" name="one" id="Yes" />
+            <input class="input" type="radio" name="one" id="Yes" />
             <label class="label" for="Yes">Yes</label>
           </div>
           <div class="one">
-            <input class="input"  type="radio" name="one" id="No" />
+            <input class="input" type="radio" name="one" id="No" />
             <label class="label" for="No">No</label>
           </div>
+        </div>
       </div>
-    </div>
-    <div class="info">
-      <div class="center">
+      <div class="info">
+        <div class="center">
           <button class="btn button">Submit</button>
+        </div>
+
       </div>
-      
-    </div>
-  </section>
+    </section>
 
 
   </main><!-- End #main -->
-
- 
   <!-- ############### Footer ############### -->
-
-  <footer>
-    <div class="row">
-      <!-- map -->
-      <div class="col" id="col1">
-        <div class="contact-location">
-          <!-- <img style="height: 100%;;" src="img/home icon.webp" alt="" class="logo"> -->
-          <iframe
-            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3500.8055368048804!2d77.22981385036265!3d28.6655407892513!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd0683919c3b%3A0xf5fc331b74c2b9e2!2sIndira%20Gandhi%20Delhi%20Technical%20University%20for%20Women!5e0!3m2!1sen!2sin!4v1679424592719!5m2!1sen!2sin"
-            width="100%" height="200px" style="border: 0; padding: 2rem 2em 0 0" allowfullscreen="" loading="lazy"
-            referrerpolicy="no-referrer-when-downgrade"></iframe>
+<br><br><br><br><br><br>
+
+  <footer id="footer">
+    <div class="footer-top" >
+      <div class="container" >
+        <div class="row-d" >
+
+    <section class="footer">
+      <div class="footer-row">
+        <div class="footer-col">
+          
+          <h4>Quick Links</h4>
+          <ul class="links">
+            <li><a href="./index.html">Home</a></li>
+            <li><a href="#about">About Us</a></li>
+            <li><a href="./Html-Files/contact.html">Contaact Us</a></li>
+            <li><a href="#services">Services</a></li>
+            <li><a href="#doctors">Doctors</a></li>
+          </ul>
         </div>
-      </div>
-      <!-- map -->
-
-      <!-- contact -->
-      <div class="col" id="col2">
-        <h3>
-          Contact
-          <div class="underline"><span></span></div>
-        </h3>
-
-        <p><a href="">contact@rapidoc.com</a></p>
-        <p><a href="">+91 1234567890</a></p>
-      </div>
-      <!-- contact -->
-
-      <!-- Links -->
-      <div class="col" id="col3">
-        <h3>
-          Quick Links
-          <div class="underline"><span></span></div>
-        </h3>
-        <div class="quick-links" id="bottom">
-          <!-- <div class="footer-title">
-                        QUICK LINKS
-                    </div> -->
-          <div class="quick-links-info">
-            <div><a href="./index.html">Home</a></div>
-            <div><a href="#about">About us</a></div>
-            <div><a href="./Html-Files/contact.html">Contact us</a></div>
-            <div><a href="#services">Services</a></div>
-            <div><a href="#doctors">Doctors</a></div>
+        <div class="footer-col">
+          <h4>Explore</h4>
+          <ul class="links">
+            <li><a href="#">Appointment</a></li>
+            <li><a href="#">Patient Portal</a></li>
+            <li><a href="#">Login account</a></li>
+            <li><a href="#">Helplines</a></li>
+            <li><a href="#">Location</a></li>
+          </ul>
+        </div>
+        <div class="footer-col">
+          <h4>Legal</h4>
+          <ul class="links">
+            <li><a href="#">Customer Agreement</a></li>
+            <li><a href="#">Privacy Policy</a></li>
+            <li><a href="#">GDPR</a></li>
+            <li><a href="#">Security</a></li>
+            <li><a href="#">Testimonials</a></li>
+          </ul>
+        </div>
+        <div class="footer-col">
+          <h4>RAPIDOC Newsletter</h4>
+          <p>
+            Subscribe to our newsletter for a weekly dose
+            of news, updates, helpful tips, and
+            exclusive offers.
+          </p>
+          <form action="#">
+            <input type="text" placeholder="Your email" required>
+            <button type="submit">SUBSCRIBE</button>
+          </form>
+          <div class="icons">
+            <i class="fa-brands fa-facebook-f"></i>
+            <i class="fa-brands fa-twitter"></i>
+            <i class="fa-brands fa-linkedin"></i>
+            <i class="fa-brands fa-github"></i>
+            <i class="fa-solid fa-phone"></i>
+            <i class="fa-solid fa-envelope"></i>
           </div>
         </div>
       </div>
-      <!-- links -->
-
-      <div class="col" id="col4">
-        <h3>
-            SOCIAL
-            <div class="underline"><span></span></div>
-        </h3>
-        <div class="social-icons">
-            
-            <div class="social">
-                <a href="#" target="_blank"><img
-                        src="#" alt="">Instagram</a>
+      <div id="copyright" style="text-align: center">
+        <p style="align-items: center">
+          © <span id="year"></span><span> RapiDoc</span>&nbsp;| All Rights
+          Reserved
+        </p>
+        <p>Made with ❤️ by RapiDoc</p>
+      </div>
+    </section>
 
-            </div>
-            <div class="social">
-                <a href="#" target="_blank"><img
-                        src="" alt="">LinkedIn</a>
 
-            </div>
-            <div class="social">
-                <a href="#"><img src="" alt=""> Facebook</a>
 
-            </div>
-        </div>
-    </div>
+  <div id="back-to-top-container">
+    <div class="circle">
+      <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+        class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
+        <path
+          d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z" />
+      </svg>
     </div>
+  </div>
 
-    <!-- Copyright -->
-    <div id="copyright" style="text-align: center">
-      <p style="align-items: center">
-        © <span id="year"></span><span> RapiDoc</span>&nbsp;| All Rights
-        Reserved
-      </p>
-      <p>Made with ❤️ by RapiDoc</p>
-    </div>
-  </footer>
 
 
   <div id="preloader"></div>
   <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
       class="bi bi-arrow-up-short"></i></a>
 
+
   <!-- JS Files -->
   <script>
     var currentYear = new Date().getFullYear();
     document.getElementById('year').textContent = currentYear;
   </script>
+
+
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      const backToTopButton = document.getElementById('back-to-top-container');
+
+      function checkButtonVisibility() {
+        if (window.innerWidth > 100 && window.scrollY > 100) {
+          backToTopButton.style.display = 'block';
+        } else {
+          backToTopButton.style.display = 'none';
+        }
+      }
+
+      window.addEventListener('scroll', checkButtonVisibility);
+      window.addEventListener('resize', checkButtonVisibility);
+
+      backToTopButton.addEventListener('click', function () {
+        window.scrollTo({
+          top: 0,
+          behavior: 'smooth'
+        });
+      });
+      checkButtonVisibility();
+    });
+
+  </script>
+
+   <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
+   <script>
+       document.addEventListener("DOMContentLoaded", function() {
+           const phoneInputField = document.getElementById('phone');
+           const iti = window.intlTelInput(phoneInputField, {
+               initialCountry: "auto",
+               geoIpLookup: function(callback) {
+                   fetch('https://ipinfo.io/json?token=YOUR_TOKEN')
+                       .then(response => response.json())
+                       .then(data => callback(data.country))
+                       .catch(() => callback('us'));
+               },
+               utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
+           });
+
+           document.getElementById('phone-form').addEventListener('submit', function(event) {
+               event.preventDefault();
+               const phoneNumber = iti.getNumber();
+               console.log('Full Phone Number:', phoneNumber);
+
+               // You can now send this phone number to your server or process it as needed
+           });
+       });
+   </script>
+
+
   <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
   <script src="glightbox/js/glightbox.min.js"></script>
   <script src="php-email-form/validate.js"></script>
@@ -728,8 +978,24 @@ <h3>
   <script src="https://unpkg.com/typed.js@2.0.132/dist/typed.umd.js"></script>
   <script src="js/main.js"></script>
   <script src="patient-portal.js"></script>
-  <script src="https://cdn.botpress.cloud/webchat/v1/inject.js"></script>
+ 
   <script src="https://mediafiles.botpress.cloud/b1d766f9-2fd0-4a60-96bb-fc1f494d156c/webchat/config.js" defer></script>
+  
+  <script>
+    ScrollReveal({ 
+        //reset: true ,
+        distance : '60px' ,
+        duration:2500,
+        delay:400
+    });
+    ScrollReveal().reveal('.d-flex,#home', { delay: 500 , origin:'top' });
+    ScrollReveal().reveal('.logo , .navbar,.content', { delay: 500 , origin:'left' });
+    ScrollReveal().reveal('.sec-img', { delay: 500 , origin:'right' });
+    ScrollReveal().reveal('.col-md-6,.about', { delay: 600 , origin:'left' });
+    ScrollReveal().reveal('.col-lg-3', { delay: 500 , origin:'left' });
+    ScrollReveal().reveal('.feedback', { delay: 400 , origin:'left' });
+    ScrollReveal().reveal('.footer', { delay: 400 , origin:'bottom' });
+  </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/js/main.js b/js/main.js
index 1ab4f709..39660687 100644
--- a/js/main.js
+++ b/js/main.js
@@ -6,14 +6,20 @@
    * Easy selector helper function
    */
   const select = (el, all = false) => {
-    el = el.trim()
+    // Check if el is a string
+    if (typeof el !== 'string') {
+      console.error('The selector must be a string.');
+      return;
+    }
+  
+    el = el.trim();
+  
     if (all) {
-      return [...document.querySelectorAll(el)]
+      return [...document.querySelectorAll(el)];
     } else {
-      return document.querySelector(el)
+      return document.querySelector(el);
     }
   }
-
   /**
    * Easy event listener function
    */
diff --git a/style.css b/style.css
index 52666d9e..15eb01ac 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,4 @@
-body{
+body {
   font-family: "Open Sans", sans-serif;
   color: #fff;
   background-color: #000;
@@ -14,7 +14,12 @@ a:hover {
   text-decoration: none;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: "Raleway", sans-serif;
 }
 
@@ -47,7 +52,7 @@ button {
 .nav_link li a:hover {
   color: #55a5ea;
 
-  text-decoration: underline 2.5px rgb(3, 3, 94);
+  /* text-decoration: underline 2.5px rgb(3, 3, 94); */
 }
 
 .header_container {
@@ -64,21 +69,20 @@ button {
 }
 
 .container {
-  display: flex;
+  /* display: ; */
   font-family: sans-serif;
-
   padding-top: 80px;
 }
 
 
-.container a:hover {
+/* .container a:hover {
   text-decoration: underline 2px;
-}
+} */
 
 .content {
   display: flex;
   flex-direction: column;
-  padding-left: 20px;
+  padding-left: 50px;
   /* justify-content: center;
   align-items: center; */
 }
@@ -89,10 +93,10 @@ button {
 }
 
 .content h1 span {
-  color: #f9a826;
+  color: #55a5ea;
 }
 
-.content h4 {
+.content h2 {
   font-size: 20px;
   margin-top: 30px;
   padding-right: 40px;
@@ -100,16 +104,14 @@ button {
   color: #d9d9d9;
 }
 
-.content h4 a {
+.content h2 a {
   display: inline;
-  color: #f9a826;
-}
-
-
-
+  font-size: xx-large;
+  color: #55a5ea;
 
+}
 
-.container-head{
+.container-head {
   display: grid;
   align-items: center;
   grid-template-columns: 1fr 2fr 13fr 3fr;
@@ -136,6 +138,7 @@ button {
   padding: 20px;
   margin-bottom: 20px;
   border-radius: 10px;
+  z-index: -1;
 }
 
 
@@ -145,7 +148,7 @@ button {
 */
 .appointment-btn {
   margin-left: 25px;
-  background: #3fbcc0a4;
+  background: #55a5ea;
   color: #fff;
   border-radius: 50px;
   padding: 8px 25px;
@@ -153,11 +156,13 @@ button {
   transition: 0.3s;
   font-size: 16px;
   font-weight: 600;
+  z-index: -1;
   display: inline-block;
 }
 
 .appointment-btn:hover {
-  background: #3fbcc0c6;
+  background: #55a5ea;
+  z-index: -1;
   color: #fff;
 }
 
@@ -187,13 +192,14 @@ button {
   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;
@@ -205,15 +211,29 @@ button {
   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 {
-  color: #3fbcc0c6;
-  border-color: #3fbcc0c6;
+.navbar a:hover,
+.navbar .active,
+.navbar .active:focus,
+.navbar li:hover>a {
+  color: #55a5ea;
+  border-color: #55a5ea;
+}
+
+#navbar li a{ 
+  color: white;
+}
+
+#navbar a:hover{
+  color:  #3fbcc0a4;
+  text-decoration: underline;
+  text-decoration-color: #3fbcc0a4;
 }
 
 /*################----Mobile Navigation----################*/
@@ -235,6 +255,7 @@ button {
   .mobile-nav-toggle {
     display: block;
   }
+
   .navbar ul {
     display: none;
   }
@@ -271,7 +292,7 @@ button {
   transition: 0.3s;
 }
 
-.navbar-mobile > ul > li {
+.navbar-mobile>ul>li {
   padding: 0;
 }
 
@@ -282,16 +303,19 @@ button {
   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: 60px 0;
+  padding: 50px 0;
   overflow: hidden;
 }
 
@@ -300,8 +324,13 @@ section {
 }
 
 .section-title {
+  /* text-align: left; */
+  padding-left: 50px;
+  padding-right: 50px;
+  margin-left: 15%;
+  margin-right: 15%;
   text-align: center;
-  padding-bottom: 30px;
+  /* text-align: left; */
 }
 
 .section-title h2 {
@@ -330,7 +359,7 @@ section {
   display: block;
   width: 40px;
   height: 3px;
-  background: #3fbcc0c6;
+  background: #55a5ea;
   bottom: 0;
   left: calc(50% - 20px);
 }
@@ -349,9 +378,11 @@ section {
   background-size: cover;
   margin-bottom: -200px;
 }
-#home .multiple-text{
-  color: #3fbcc0a4;
+
+#home .multiple-text {
+  color: #55a5ea;
 }
+
 #home .container {
   position: relative;
   margin-top: 150px;
@@ -383,11 +414,12 @@ section {
   border-radius: 50px;
   transition: 0.5s;
   color: #fff;
-  background: #3fbcc0a4;
+  background: #55a5ea;
 }
-#home video{
+
+#home video {
   margin-top: -70px;
-  margin-left: 50PX;
+  margin-left: 50px;
   height: 900px;
   position: absolute;
   top: 200px;
@@ -395,7 +427,7 @@ section {
 }
 
 #home .btn-get-started:hover {
-  background: #3fbcc0c6;
+  background: #55a5ea;
 }
 
 @media (min-width: 1024px) {
@@ -409,13 +441,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;
@@ -432,20 +467,34 @@ section {
 
 
 /*################----Featured----################*/
+
+.row{
+  display: flex;
+  justify-content: center;
+  /* border: 2px solid red; */
+  margin: 30px;
+}
+
 .featured-services .icon-box {
+  z-index: -1;
+  width: 230px;
+  height: 270px;
+  margin-left: 15px;
+  margin-right: 15px;
   padding: 30px;
   position: relative;
   overflow: hidden;
   background: #111111;
   box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12);
   transition: all 0.3s ease-in-out;
-  border-radius: 8px;
+  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 {
+  z-index: -1;
   content: '';
   position: absolute;
   background: #000;
@@ -458,49 +507,61 @@ section {
 }
 
 .featured-services .icon-box:hover::before {
+  z-index: -1;
   background: #3fbcc051;
-  top: 50px;
-  border-radius: 70px;
+  top: 0px;
+  border-radius: 50px;
 }
 
 .featured-services .icon1 {
+  z-index: -1;
   margin-bottom: 15px;
 }
 
 .featured-services .icon1 i {
+  z-index: -1;
   font-size: 48px;
   line-height: 1;
   color: #3fbcc0a4;
   transition: all 0.3s ease-in-out;
 }
+
 .featured-services .icon2 {
+  z-index: -1;
   margin-bottom: 15px;
 }
 
 .featured-services .icon2 i {
+  z-index: -1;
   font-size: 48px;
   line-height: 1;
-  color: #3fbcc0a4;
+  color: #55a5ea;
   transition: all 0.3s ease-in-out;
 }
+
 .featured-services .icon3 {
+  z-index: -1;
   margin-bottom: 15px;
 }
 
 .featured-services .icon3 i {
+  z-index: -1;
   font-size: 48px;
   line-height: 1;
-  color: #3fbcc0a4;
+  color: #55a5ea;
   transition: all 0.3s ease-in-out;
 }
+
 .featured-services .icon4 {
+  z-index: -1;
   margin-bottom: 15px;
 }
 
 .featured-services .icon4 i {
+  z-index: -1;
   font-size: 48px;
   line-height: 1;
-  color: #3fbcc0a4;
+  color: #55a5ea;
   transition: all 0.3s ease-in-out;
 }
 
@@ -520,20 +581,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;
 }
 
@@ -541,59 +606,70 @@ section {
 
 /*################----About----################*/
 .about .icon-boxes h4 {
+  z-index: -1;
   font-size: 18px;
-  color: #3fbcc0a4;
+  color: #55a5ea;
   margin-bottom: 15px;
 }
 
 .about .icon-boxes h3 {
+  z-index: -1;
   font-size: 28px;
   font-weight: 700;
-  color: #3fbcc0a4;
+  color: #55a5ea;
   margin-bottom: 15px;
 }
 
 .about .icon-box {
+  z-index: -1;
   background: #111111;
   border-radius: 10px;
   margin-top: 35px;
+  margin-left: 15%;
+  margin-right: 15%;
 }
 
 .about .icon-box .icon {
+  z-index: -1;
   float: left;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 64px;
   height: 64px;
-  border: 2px solid #3fbcc0a4;
+  border: 2px solid #55a5ea;
   border-radius: 50px;
   transition: all 0.5s ease-in-out;
 }
 
 .about .icon-box .icon i {
+  z-index: -1;
   color: #3fbcc0a4;
   font-size: 32px;
 }
 
 .about .icon-box:hover .icon {
-  background: #3fbcc0a6;
-  border-color: #3fbbc0;
+  z-index: -1;
+  background: #55a5ea;
+  border-color: #55a5ea;
 }
 
 .about .icon-box:hover .icon i {
+  z-index: -1;
   color: #fff;
 }
 
 .about .icon-box .title {
+  z-index: -1;
   margin-left: 85px;
-  
+
   font-weight: 700;
   margin-bottom: 10px;
   font-size: 18px;
 }
 
 .about .icon-box .title a {
+  z-index: -1;
   color: #fff;
   transition: 0.3s;
   font-size: 18px;
@@ -601,17 +677,20 @@ section {
 }
 
 .about .icon-box .title a:hover {
-  color: #3fbcc0a6;
+  z-index: -1;
+  color: #55a5ea;
 }
 
 .about .icon-box .description {
+  z-index: -1;
   margin-left: 85px;
   line-height: 24px;
   font-size: 14px;
 }
 
 .about .video-box {
-  background: url("../img/about.png") center center no-repeat;  
+  z-index: -1;
+  background: url("../img/about.png") center center no-repeat;
   background-size: cover;
   height: 300px;
   top: 50px;
@@ -619,8 +698,9 @@ section {
 
 .about .play-btn {
   width: 94px;
+  z-index: -1;
   height: 94px;
-  background: radial-gradient(#3fbcc0a4 50%, rgba(4, 196, 234, 0.4) 52%);
+  background: radial-gradient(#55a5ea 50%, rgba(4, 196, 234, 0.4) 52%);
   border-radius: 50%;
   display: block;
   position: absolute;
@@ -630,6 +710,7 @@ section {
 }
 
 .about .play-btn::after {
+  z-index: -1;
   content: '';
   position: absolute;
   left: 50%;
@@ -645,6 +726,7 @@ section {
 }
 
 .about .play-btn::before {
+  z-index: -1;
   content: '';
   position: absolute;
   width: 120px;
@@ -658,12 +740,14 @@ section {
 }
 
 .about .play-btn:hover::after {
-  border-left: 15px solid #3fbcc0a6;
+  z-index: -1;
+  border-left: 15px solid #55a5ea;
   transform: scale(20);
 }
 
 .about .play-btn:hover::before {
   content: '';
+  z-index: -1;
   position: absolute;
   left: 50%;
   top: 50%;
@@ -685,6 +769,7 @@ section {
     transform: scale(0.6, 0.6);
     opacity: 1;
   }
+
   100% {
     transform: scale(1, 1);
     opacity: 0;
@@ -696,6 +781,7 @@ section {
     transform: scale(0.6, 0.6);
     opacity: 1;
   }
+
   100% {
     transform: scale(1, 1);
     opacity: 0;
@@ -706,59 +792,89 @@ section {
 
 /*################----Counts----################*/
 .counts {
-  padding-bottom: 30px;
+  /* padding-top: 30px; */
+ 
+  justify-content: center;
 }
 
+
 .counts .count-box {
+  z-index: -1;
   box-shadow: -10px -5px 40px 0 rgba(0, 0, 0, 0.1);
-  padding: 20px;
-  width: 100%;
-  background:#1c413b;
+  padding: 50px 80px;
+  margin: 5%;
+  width: calc(100%-5px);
+  height: 100%;
+  background: #1c413b;
+  align-content: space-evenly;
   border-radius: 15px;
-  margin-top: 10px;
+  /* margin-top: 10px; */
+}
+/* .row {
+  --bs-gutter-x: 1.5rem;
+  --bs-gutter-y: 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc(var(--bs-gutter-y)* -1);
+  margin-right: calc(var(--bs-gutter-x) / -2);
+  margin-left: calc(var(--bs-gutter-x) / -2);
+} */
+
+.row-d {
+  display: flex;
+  margin: 0px 20px 0px 20px;
+  align-items: center;
+  justify-content: space-between;
+  /* flex-wrap: wrap; */
+
 }
 
 .counts .count-box i {
-  display: block;
   font-size: 30px;
   color: #fcfcfc;
   float: left;
 }
 
-.counts .count-box span{
+.counts .count-box span {
   font-size: 42px;
   line-height: 24px;
-  display: block;
+  display: inline-block;
   font-weight: 700;
   color: #f9f4f4;
   margin-left: 50px;
 }
-.container .drop .content span{
+
+.container .drop .content span {
   font-size: 42px;
   line-height: 24px;
-  display: block;
+  display: inline-block;
   font-weight: 700;
   color: #faf8f8;
 }
-.container .drop .content p{
+
+.container .drop .content p {
   font-size: 30px;
   line-height: 24px;
-  display: block;
+  display: inline-block;
+  justify-content: center;
   font-weight: 700;
   color: #f8f8f8;
 }
+
 .counts .count-box p {
+  z-index: -1;
   padding: 30px 0 0 0;
-  margin: 0;
+  /* margin: 0; */
   font-family: "Roboto", sans-serif;
   font-size: 14px;
   color: #fffcfc;
 }
 
 .counts .count-box a {
+  z-index: -1;
   font-weight: 600;
   display: block;
-  margin-top: 10px;
+  /* margin-top: 10px; */
   color: #faf8f8;
   font-size: 15px;
   font-family: "Poppins", sans-serif;
@@ -766,21 +882,29 @@ section {
 }
 
 .counts .count-box a:hover {
-  color: #3fbcc0a6;
+  color: #55a5ea;
 }
 
 
 
 /*################----Services----################*/
 .services .icon-box {
+  z-index: -1;
   text-align: center;
+  margin-left: 80px;
+  margin-right: 80px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   border: 1px solid #0a0a0a;
-  padding: 80px 20px;
+  padding: 30px 20px;
   transition: all ease-in-out 0.3s;
   background-color: #1c413b;
 }
 
 .services .icon-box .icon {
+  
   margin: 0 auto;
   width: 64px;
   height: 64px;
@@ -795,11 +919,14 @@ section {
 }
 
 .services .icon-box .icon i {
+  
   color: #060606;
   font-size: 28px;
 }
 
 .services .icon-box .icon::before {
+  
+ 
   position: absolute;
   content: '';
   left: -8px;
@@ -813,23 +940,28 @@ section {
 }
 
 .services .icon-box h4 {
+  
   font-weight: 700;
   margin-bottom: 15px;
   font-size: 24px;
 }
 
 .services .icon-box h4 a {
-  color: #3fbcc0a4;
+ 
+  color: #55a5ea;
 }
 
 .services .icon-box p {
+ 
   line-height: 24px;
   font-size: 14px;
   margin-bottom: 0;
-  
+
+
 }
+
 .services .icon-box:hover {
-  background: #3fbcc0a4;
+  background: #55a5ea;
   border-color: #3fbbc0;
 }
 
@@ -845,21 +977,23 @@ section {
   background: #3291e6;
 }
 
-.services .icon-box:hover h4 a, .services .icon-box:hover p {
+.services .icon-box:hover h4 a,
+.services .icon-box:hover p {
   color: #111111;
 }
 
 
 
 /*################----Appointments----################*/
-.layout{
+.layout {
   /*border: 2px solid #ccc; */
   background-color: #3fbcc051;
   border-radius: 30px;
   padding: 50px;
-  width: 700px; 
-  margin: 0 auto; 
+  width: 700px;
+  margin: 0 auto;
 }
+
 .appointment .php-email-form {
   width: 100%;
 }
@@ -868,8 +1002,10 @@ section {
   padding-bottom: 8px;
 }
 
-.appointment .php-email-form input, .appointment .php-email-form textarea, .appointment .php-email-form select {
-  margin-left: 250px;
+.appointment .php-email-form input,
+.appointment .php-email-form textarea,
+.appointment .php-email-form select {
+  margin-left: 175px;
   border-radius: 0;
   box-shadow: none;
   font-size: 14px;
@@ -879,14 +1015,17 @@ section {
   color: #6c757d;
 }
 
-.appointment .php-email-form input:focus, .appointment .php-email-form textarea:focus, .appointment .php-email-form select:focus {
+.appointment .php-email-form input:focus,
+.appointment .php-email-form textarea:focus,
+.appointment .php-email-form select:focus {
   border-color: #3fbcc0a6;
 
 }
 
-.appointment .php-email-form input, .appointment .php-email-form select {
+.appointment .php-email-form input,
+.appointment .php-email-form select {
   height: 44px;
-
+  width: 50%;
 }
 
 .appointment .php-email-form textarea {
@@ -913,6 +1052,7 @@ section {
 /*################----Doctors----################*/
 .doctors {
   background: #000;
+  /* display: flex; */
 }
 
 .doctors .member {
@@ -920,11 +1060,18 @@ section {
   position: relative;
   border-radius: 10px;
   padding: 30px;
+  margin: 10px 500px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
 }
 
 .doctors .member .pic {
   overflow: hidden;
   width: 180px;
+  /* margin: 0 130px; */
   border-radius: 50%;
 }
 
@@ -965,8 +1112,9 @@ section {
   bottom: 0;
   left: 0;
 }
-.doctors .nxt-pg button{
-  background: #3fbcc0a6;
+
+.doctors .nxt-pg button {
+  background: #55a5ea;
   border: 0;
   padding: 10px 35px;
   text-decoration: none;
@@ -975,9 +1123,10 @@ section {
   border-radius: 50px;
   color: white;
 }
-.doctors .nxt-pg button:hover{
 
-  background:#3fbcc0be;
+.doctors .nxt-pg button:hover {
+
+  background: #55a5ea;
 }
 
 
@@ -985,7 +1134,10 @@ section {
 /*################----Contact----################*/
 .contact .info {
   width: 100%;
-  background: #000;
+  background: #0a0a0a;
+  border-radius: 15px;
+  padding: 15px;
+  /* border: 2px; */
 }
 
 .contact .info i {
@@ -995,7 +1147,7 @@ section {
   width: 44px;
   height: 44px;
   background: #0a0a0a;
-  border: 2px solid #3fbcc0a4;
+  border: 2px solid #55a5ea;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -1018,13 +1170,16 @@ section {
   color: #fff;
 }
 
-.contact .info .email, .contact .info .phone {
+.contact .info .email,
+.contact .info .phone {
   margin-top: 40px;
 }
 
-.contact .info .email:hover i, .contact .info .address:hover i, .contact .info .phone:hover i {
-  background: #3fbcc0a4;
-  
+.contact .info .email:hover i,
+.contact .info .address:hover i,
+.contact .info .phone:hover i {
+  background: #55a5ea;
+
 }
 
 .contact .php-email-form {
@@ -1036,7 +1191,8 @@ section {
   padding-bottom: 8px;
 }
 
-.contact .php-email-form input, .contact .php-email-form textarea {
+.contact .php-email-form input,
+.contact .php-email-form textarea {
   border-radius: 10px;
   box-shadow: none;
   font-size: 14px;
@@ -1045,6 +1201,7 @@ section {
 
 .contact .php-email-form input {
   height: 44px;
+  width: 100%;
 }
 
 .contact .php-email-form textarea {
@@ -1061,13 +1218,14 @@ section {
 }
 
 .contact .php-email-form button[type="submit"]:hover {
-  background:#3fbcc0be;
+  background: #55a5ea;
 }
 
 @-webkit-keyframes animate-loading {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
@@ -1077,6 +1235,7 @@ section {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
@@ -1085,49 +1244,55 @@ section {
 
 /*################--feedback###############*/
 
-.feedback{
+.feedback {
   border-radius: 1rem;
   background-color: #fff;
   padding: 2rem 4rem;
-  box-shadow: rgba(50,50,93,0.25) 0px 2px 5px -1px,rgba(0, 0,0,0.3) 0px 1px 3px -1px;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
   margin: 50px;
   width: 60%;
   margin-left: 250px;
   padding: 20px;
 }
-.feedback h1{
+
+.feedback h1 {
   color: black;
   font-size: 2.0rem;
   margin-bottom: 0.3rem;
   font-family: "Poppins", sans-serif;
 }
-.feedback p{
+
+.feedback p {
   color: black;
   font-size: 1.1rem;
   font-family: "Poppins", sans-serif;
 }
-.emoji{
+
+.emoji {
   padding: 1rem 0;
   width: 20%;
   display: flex;
   justify-content: space-between;
 }
-.btn{
+
+.btn {
   background-color: transparent;
   border: none;
   font-size: 1.5rem;
   font-family: "Poppins", sans-serif;
   transition: 0.2s ease-in;
   cursor: pointer;
+
   &:hover {
     transform: scale(1.5);
   }
 }
 
-.ques{
+.ques {
   margin: 0.5rem 0;
 }
-.feedback #textarea{
+
+.feedback #textarea {
   padding: 1rem;
   width: 80%;
   background-color: transparent;
@@ -1135,21 +1300,24 @@ section {
   border-radius: 0.5rem;
   color: black;
   margin-bottom: 0.6rem;
-  &:active{
-    box-shadow: rgba(50, 50, 93,0.25) 0px 2px 5px -1px,rgba(0,0,0,0.3) 0px 1px 3px -1px;
+
+  &:active {
+    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
   }
 }
 
-.radiobtn{
+.radiobtn {
   width: 40%;
   display: flex;
   justify-content: space-between;
-  
+
 }
-.one{
+
+.one {
   display: flex;
 }
-.input{
+
+.input {
   position: relative;
   font-family: "Poppins", sans-serif;
   font-size: 1rem;
@@ -1161,212 +1329,371 @@ section {
   display: flex;
   justify-content: center;
   align-items: center;
-  &::before{
+
+  &::before {
     content: " ";
     width: 1rem;
     height: 1rem;
     border-radius: 50%;
     transition: 0.2s;
   }
-  &:checked::before{
+
+  &:checked::before {
     background-color: #1977cc;
 
-  } 
+  }
 }
-.label{
+
+.label {
   color: black;
   font-family: "Poppins", sans-serif;
   font-size: 1.1rem;
   margin-left: 1rem;
 }
-.info{
+
+.info {
   width: 100%;
   display: flex;
   justify-content: space-between;
   flex-direction: column;
   margin: 0.5rem 0;
 }
-.center{
+
+.center {
   margin-top: 2rem;
   text-align: center;
-  
-  .button{
+
+  .button {
     width: 15%;
     background-color: white;
     border-radius: 0.5rem;
     border: none;
     font-size: 1.4rem;
     font-family: "Poppins", sans-serif;
-    padding:1rem 4rem;
+    padding: 1rem 4rem;
     cursor: pointer;
     color: #000;
   }
-  .button:active{
+
+  .button:active {
     background-color: white;
     transform: scale(1.0);
 
   }
-  .button:hover{
-    background-color:rgb(63, 155, 124) ;
+
+  .button:hover {
+    background-color: rgb(63, 155, 124);
   }
 }
 
 
 
-/*################----Footer----################*/
-
+#footer {
+  background: #000;
+  padding: 0 0 30px 0;
+color: #fff;
+font-size: 14px;
+}
 
-footer {
-  width: 100%;
-  background: linear-gradient(to right, #0f0f0f, #00093d);
-  color: #ffff;
-  line-height: 20px;
+#footer .footer-top {
+  background: #000;
+  padding: 60px 0 30px 0;
 }
 
-.footer-title {
-  font-weight: 700;
-  font-size: 26px;
-  margin-bottom: 22px;
+#footer .footer-top .footer-info {
+  margin-bottom: 30px;
 }
 
-.row {
-  width: 90%;
-  margin: auto;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
+#footer .footer-top .footer-info h3 {
+  font-size: 50px;
+  margin: 0 0 20px 0;
+  color: #57a6ea;
+  padding: 2px 0 2px 0;
+  line-height: 1;
 }
 
-.col {
-  padding: 20px 0;
+#footer .footer-top .footer-info p {
+  font-size: 14px;
+  line-height: 24px;
+  margin-bottom: 0;
+  font-family: "Roboto", sans-serif;
 }
 
-.col h3 {
-  font-size: 25px;
+#footer .footer-top .social-links a {
+  font-size: 18px;
+  display: inline-block;
+  background: #57a6ea;
+  color: #fff;
+  line-height: 1;
+  padding: 8px 0;
+  margin-right: 4px;
+  border-radius: 4px;
+  text-align: center;
+  width: 36px;
+  height: 36px;
+  transition: 0.3s;
 }
+/* Importing Google font - Open Sans */
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');
 
-#col1 {
-  flex-basis: 40%;
-  margin-right: 40px;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Open Sans', sans-serif;
 }
 
-#col2 {
-  flex-basis: 20%;
-  margin-right: 10px;
-  font-size: 15px;
+.footer {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: 1280px;
+  width: 95%;
+  background: #3fbcc051;
+  border-radius: 6px;
 }
 
-#col3 {
-  flex-basis: 15%;
+.footer .footer-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 3.5rem;
+  padding: 60px;
 }
 
-#col4 {
-  flex-basis: 15%;
+.footer-row .footer-col h4 {
+  color: #f0f0f0;
+  font-size: 1.2rem;
+  font-weight: 400;
 }
 
-.logo {
-  margin-bottom: 30px;
+.footer-col .links {
+  margin-top: 20px;
 }
 
-.col h3 {
-  width: fit-content;
-  margin-bottom: 40px;
-  position: relative;
+.footer-col .links li {
+  list-style: none;
+  margin-bottom: 10px;
 }
 
-#col2 p {
-  margin-bottom: 18px;
+.footer-col .links li a {
+  text-decoration: none;
+  color: #bfbfbf;
 }
 
-#col2 p a {
-  font-size: 15px;
-  padding-top: 10px;
+.footer-col .links li a:hover {
   color: #fff;
 }
 
-.email-id {
-  width: fit-content;
+.footer-col p {
   margin: 20px 0;
-  border-bottom: 1px solid #ccc;
+  color: #bfbfbf;
+  max-width: 300px;
 }
 
-.quick-links-info div {
-  margin-bottom: 20px;
+.footer-col form {
+  display: flex;
+  gap: 5px;
 }
 
-.quick-links-info div a {
+.footer-col input {
+  height: 40px;
+  border-radius: 6px;
+  background: none;
+  width: 100%;
+  outline: none;
+  border: 1px solid #7489C6 ;
+  caret-color: #fff;
   color: #fff;
-  font-size: 15px;
+  padding-left: 10px;
 }
 
-.underline {
-  width: 100%;
-  height: 5px;
-  background: #767676;
-  border-radius: 3px;
-  position: absolute;
-  top: 25px;
-  left: 0;
-  overflow: hidden;
+.footer-col input::placeholder {
+  color: #ccc;
 }
 
-.underline span {
-  width: 15px;
-  height: 100%;
+ .footer-col form button {
   background: #fff;
-  border-radius: 3px;
-  position: absolute;
-  top: 0;
-  left: 10px;
-  /* animation: moving 1s linear infinite; */
+  border: none;
+  color: #08434551;
+  padding: 10px 15px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 1000;
+  transition: 0.2s ease;
 }
 
-@keyframes moving {
-  0% {
-    left: -20px;
+.footer-col form button:hover {
+  background: #cecccc;
+}
+
+.footer-col .icons {
+  display: flex;
+  margin-top: 30px;
+  gap: 30px;
+  cursor: pointer;
+}
+
+.footer-col .icons i {
+  color: #afb6c7;
+}
+
+.footer-col .icons i:hover  {
+  color: #fff;
+}
+
+@media (max-width: 768px) {
+  .footer {
+    position: relative;
+    bottom: 0;
+    left: 0;
+    transform: none;
+    width: 100%;
+    border-radius: 0;
   }
 
-  100% {
-    left: 100%;
+  .footer .footer-row {
+    padding: 20px;
+    gap: 1rem;
+  }
+
+  .footer-col form {
+    display: block;
+  }
+
+  .footer-col form :where(input, button) {
+    width: 100%;
+  }
+
+  .footer-col form button {
+    margin: 10px 0 0 0;
   }
 }
 
-.social-icons img:hover {
-  transition: 0.5s ease-in-out;
-  transform: scale(1.1);
+#footer .footer-top .social-links a:hover {
+  background: #57a6ea;
+  text-decoration: none;
 }
 
-.social a{
-  margin-bottom: 10px;
-  text-align: center;
+#footer .footer-top h4 {
+  font-size: 16px;
+  font-weight: 600;
+  position: relative;
+  padding-bottom: 12px;
+}
+
+#footer .footer-top .footer-links {
+  margin-bottom: 30px;
+}
+
+#footer .footer-top .footer-links ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+#footer .footer-top .footer-links ul i {
+  padding-right: 2px;
+  color: #57a6ea;
+  font-size: 18px;
+  line-height: 1;
+}
+
+#footer .footer-top .footer-links ul li {
+  padding: 10px 0;
   display: flex;
-  gap: 10px;
   align-items: center;
-  color: white;
+}
 
+#footer .footer-top .footer-links ul li:first-child {
+  padding-top: 0;
 }
 
+#footer .footer-top .footer-links ul a {
+  color: #fff;
+  transition: 0.3s;
+  display: inline-block;
+  line-height: 1;
+}
+
+#footer .footer-top .footer-links ul a:hover {
+  color: #57a6ea;
+}
+
+#footer .footer-top .footer-newsletter form {
+  margin-top: 30px;
+  background: #fff;
+  padding: 6px 10px;
+  position: relative;
+  border-radius: 4px;
+}
+
+#footer .footer-top .footer-newsletter form input[type="email"] {
+  border: 0;
+  padding: 4px;
+  width: calc(100% - 110px);
+}
+
+#footer .footer-top .footer-newsletter form input[type="submit"] {
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  background: none;
+  font-size: 16px;
+  padding: 0 20px;
+  background: #57a6ea;
+  color: #fff;
+  transition: 0.3s;
+  border-radius: 0 4px 4px 0;
+}
+
+#footer .footer-top .footer-newsletter form input[type="submit"]:hover {
+  background: #57a6ea;
+  ;
+}
 
+#footer .copyright {
+  justify-content: center;
+  /* padding-top: 10px; */
+}
 
 /*################----Back to top----################*/
-.back-to-top {
+footer {
+  position: relative;
+  padding: 50px 0;
+}
+
+#back-to-top-container {
   position: fixed;
-  visibility: hidden;
-  opacity: 0;
-  right: 15px;
-  bottom: 15px;
-  z-index: 996;
-  background: #3fbcc0a4;
+  bottom: 100px;
+  right: 47px;
+  cursor: pointer;
+  z-index: 1000;
+}
+
+.circle {
+  background-color: #00093d;
+  border-radius: 50%;
+  width: 35px;
+  height: 35px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: background-color 0.3s;
+}
+
+#back-to-top {
   width: 40px;
   height: 40px;
-  border-radius: 4px;
-  transition: all 0.4s;
+  fill: #4178c0;
+  color: #00093d;
+  transition: fill 0.3s;
 }
 
-.back-to-top i {
-  font-size: 28px;
-  color: #fff;
-  line-height: 0;
+#back-to-top:hover {
+  fill: hsl(214, 50%, 60%);
 }
 
 .back-to-top:hover {
@@ -1378,3 +1705,92 @@ footer {
   visibility: visible;
   opacity: 1;
 }
+
+
+
+/* Style for pateint portal  */
+/* -----***************************************-----  */
+.patient-portal {
+  width: 90%;
+  max-width: 900px;
+  /* Maximum width of the container */
+  margin: 0 auto;
+  /* Centers the container */
+  padding: 20px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  background-color: #3fbcc051;
+  text-align: center;
+  margin-bottom: 7%;
+  border-radius: 20px;
+}
+
+/* Section title styling */
+.section-title h1 {
+  color: #29888a;
+  /* Sets a blue color for the heading */
+  text-align: center;
+}
+
+.section-title p {
+  text-align: center;
+  color: white;
+  font-size: 20px;
+}
+
+/* Form styling */
+.form-group {
+  margin-top: 15px;
+  margin-bottom: 15px;
+  /* Adds bottom margin for form-group */
+}
+
+
+.forgot-password {
+  margin-top: 20px;
+}
+
+.form-control {
+  width: 50%;
+  /* Full width */
+
+  padding: 10px;
+  border: 1px solid #ccc;
+  /* Light gray border */
+  border-radius: 4px;
+  /* Rounded corners */
+  /* text-align: center; */
+}
+
+button {
+  background-color: #29888a;
+  /* Blue background for the button */
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+  z-index: 1000;
+}
+
+.circle {
+  background-color: #00093d;
+  border-radius: 50%;
+  width: 35px;
+  height: 35px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: background-color 0.3s;
+}
+
+#back-to-top {
+  width: 40px;
+  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