diff --git a/Html-Files/customer_agreement.html b/Html-Files/customer_agreement.html
index 7b255026..ad6542d2 100644
--- a/Html-Files/customer_agreement.html
+++ b/Html-Files/customer_agreement.html
@@ -4,115 +4,1132 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>RapiDoc</title>
-    <link rel="icon" href="https://cdn-icons-png.flaticon.com/256/2666/2666501.png"/>
-    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
-    <link rel="stylesheet" href="./Css-Files/customer_agreement.css">
+    <link
+      rel="icon"
+      href="https://cdn-icons-png.flaticon.com/512/1458/1458279.png"
+    />
+    <!-- Bootstrap CSS -->
+    <link
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <!-- <link rel="stylesheet" href="../style.css"> -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+    />
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+
+    <script type="text/javascript">
+      (function () {
+        emailjs.init({
+          publicKey: "o6kveYmOSDrs0l1Mg",
+        });
+      })();
+    </script>
+
+    <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"
+      rel="stylesheet"
+    />
+
+    <!-- transalator -->
+    <script src="https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
+
+    <!-- CSS Files -->
+    <link href="Css-Files/animate.min.css" rel="stylesheet" />
+    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
+    <link href="bootstrap-icons/bootstrap-icons.css" rel="stylesheet" />
+    <link href="boxicons/css/boxicons.min.css" rel="stylesheet" />
+    <link href="fontawesome-free/css/all.min.css" rel="stylesheet" />
+    <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="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"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
+    />
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        line-height: 1.6;
+        margin: 0;
+        padding: 0;
+        background-color: #000;
+        color: #fff;
+      }
+
+      ::-webkit-scrollbar {
+        width: 10px;
+      }
+
+      ::-webkit-scrollbar-thumb {
+        background-color: #3fbcc0;
+        border-radius: 10px;
+      }
+
+      ::-webkit-scrollbar-thumb:hover {
+        background-color: #005253;
+        border-radius: 10px;
+      }
+
+      ::-webkit-scrollbar-track {
+        background-color: #011212;
+      }
+
+      #privacy-policy-container {
+        max-width: 800px;
+        margin: 30px auto;
+        padding: 20px;
+        background: #1c413b;
+        border-radius: 8px;
+        color: white;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        position: relative;
+        top: 78px;
+      }
+
+      #privacy-policy-header {
+        text-align: center;
+      }
+
+      #privacy-policy-title {
+        font-size: 2.8em;
+        /* Larger main heading */
+        color: #fff;
+        margin-bottom: 20px;
+      }
+
+      .section-title {
+        color: #00d9ffc2;
+        /* Light blue section titles */
+        font-size: 1.5em;
+        margin-top: 20px;
+      }
+
+      .section-content {
+        margin-top: 10px;
+      }
+
+      .nav_link li {
+        margin-right: 1px;
+        /* Add space between items */
+        padding: 5px 10px;
+        display: inline-block;
+        color: white;
+      }
+
+      .nav_link li a {
+        transition: all 0.3s ease 0s;
+        color: white;
+        text-decoration: none;
+      }
+
+      .nav_link li a:hover {
+        color: #55a5ea;
+      }
+
+      #header {
+        position: relative;
+        top: 12px;
+      }
+
+      .header_container {
+        background-color: #022a2d;
+        opacity: 0.9;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        height: 85px;
+        margin: auto;
+        margin-top: -48px;
+        /* Adjust this value to move the header down */
+        padding-top: 15px;
+        position: fixed;
+        z-index: 101;
+      }
+
+      .iti--allow-dropdown input {
+        padding-left: 50px;
+        background-color: black; /* Adjust padding to prevent overlap */
+      }
+
+      .iti.iti--allow-dropdown {
+        margin-left: 250px;
+      }
+
+      .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;
+      }
+      .btn-get-started:hover {
+        background-color: green;
+        color: white;
+      }
+      select {
+        padding: 1px;
+        background-color: #55a5ea;
+        color: white;
+        height: 5vh;
+        width: 17vh;
+      }
+      option {
+        background-color: #55a5ea;
+        color: white;
+      }
+      .hamburger {
+        display: none;
+        cursor: pointer;
+        position: absolute;
+        top: 29px;
+        left: 1.5%;
+      }
+      button {
+        background-color: hwb(181 16% 46%);
+        color: white;
+        border: none;
+        padding: 10px 20px;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      .line {
+        width: 30px;
+        height: 5px;
+        margin: 4px 4px;
+        background-color: white;
+      }
+      .img p{
+        display: none; 
+        color: white;
+        font-size: 1.4rem;
+        font-family: "Poppins";
+      }
+      @media only screen and (max-width: 820px) {
+        .hamburger {
+          display: block;
+        }
+        .header_container {
+          flex-direction: column;
+          align-items: start;
+          height: 27.8rem;
+          transition: 0.55s all ease-out;
+          width: 100%;
+          /* padding-top: 5px; */
+        }
+        .nav_link {
+          display: flex;
+          flex-direction: column;
+          position: relative;
+          right: 32px;
+        }
+        .nav-h {
+          height: 5.5rem;
+          width: 100vw;
+        }
+        .vis-h {
+          opacity: 0;
+        }
+        .img img{
+          display: none;
+        }
+        .img p{
+          display: block;
+          position: relative;
+          left: 300px;
+          bottom: -8px;
+        }
+      }
+
+      @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;
+        }
+      }
+
+      .footer {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        max-width: 1280px;
+        width: 95%;
+        background: #3fbcc051;
+        border-radius: 6px;
+      }
+
+      .footer .footer-row {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        gap: 3.5rem;
+        padding: 60px;
+      }
+
+      .footer-row .footer-col h4 {
+        color: #f0f0f0;
+        font-size: 1.2rem;
+        font-weight: 400;
+      }
+
+      .footer-col .links {
+        margin-top: 20px;
+      }
+
+      .footer-col .links li {
+        list-style: none;
+        margin-bottom: 10px;
+      }
+
+      .footer-col .links li a {
+        text-decoration: none;
+        color: #bfbfbf;
+      }
+
+      .footer-col .links li a:hover {
+        color: #fff;
+      }
+
+      .footer-col p {
+        margin: 20px 0;
+        color: #bfbfbf;
+        max-width: 300px;
+      }
+
+      .footer-col form {
+        display: flex;
+        gap: 5px;
+      }
+
+      .footer-col input {
+        height: 40px;
+        border-radius: 6px;
+        background: none;
+        width: 100%;
+        outline: none;
+        border: 1px solid #7489c6;
+        caret-color: #fff;
+        color: #fff;
+        padding-left: 10px;
+      }
+
+      .footer-col input::placeholder {
+        color: #ccc;
+      }
+
+      .footer-col form button {
+        background: #fff;
+        border: none;
+        color: #08434551;
+        padding: 10px 15px;
+        border-radius: 6px;
+        cursor: pointer;
+        font-weight: 1000;
+        transition: 0.2s ease;
+      }
+
+      .footer-col form button:hover {
+        background: #cecccc;
+      }
+
+      /*
+ .icons {
+  display: flex;
+  margin-top: 30px;
+  gap: 30px;
+  cursor: pointer;
+}
+
+ .icons i {
+  color: #afb6c7;
+}
+
+ .icons i:hover {
+  color: #fff;
+}
+*/
+      @media (max-width: 768px) {
+        .footer {
+          position: relative;
+          bottom: 0;
+          left: 0;
+          transform: none;
+          width: 100%;
+          border-radius: 0;
+        }
+
+        .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;
+        }
+      }
+
+      /*################----Back to top----################*/
+      footer {
+        position: relative;
+        padding: 50px 0;
+      }
+
+      #back-to-top-container {
+        position: fixed;
+        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;
+        fill: #4178c0;
+        color: #00093d;
+        transition: fill 0.3s;
+      }
+
+      #back-to-top:hover {
+        fill: hsl(214, 50%, 60%);
+      }
+
+      .back-to-top:hover {
+        background: #3fbcc0cd;
+        color: #fff;
+      }
+
+      .back-to-top.active {
+        visibility: visible;
+        opacity: 1;
+      }
+
+      :root {
+        --text-color: #959da5;
+        --footer-bg: #3fbcc051;
+        --footer-bottom-bg: #3fbcc051s;
+        --white: white;
+        --link-color: #959da5;
+        --link-hover: #2f81cf;
+        --button-border: #848d97;
+      }
+
+      .subscribe-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        max-width: 8rem;
+        color: var(--white);
+        text-decoration: none;
+        font-size: 1rem;
+        height: 3rem;
+        font-weight: 700;
+        white-space: nowrap;
+        vertical-align: middle;
+        user-select: none;
+        border: 1px solid var(--link-color);
+        border-radius: 0.375rem;
+        transition: all 0.2s ease-in-out;
+      }
+
+      .subscribe-btn:hover {
+        border: 3px solid var(--white);
+      }
+
+      /*? footer containers */
+      footer {
+        bottom: 0;
+        background-color: var(--footer-bg);
+        width: 100%;
+        min-width: 20re;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+      }
+
+      .footer-wrapper {
+        display: flex;
+        flex-direction: column;
+        max-width: 80rem;
+        width: 100%;
+        margin: 0 auto;
+        padding: 1rem;
+      }
+
+      .footer-logo-columns {
+        list-style-type: none;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        flex-grow: 4;
+        gap: 3rem 1rem;
+      }
+
+      .footer-logo {
+        margin-bottom: 2rem;
+        width: 3rem;
+      }
+
+      .footer-logo-column {
+        display: flex;
+        grid-area: footer-logo;
+        flex-direction: column;
+        min-width: 16rem;
+        flex-grow: 1;
+        padding-right: 0.5rem;
+      }
+
+      .footer-logo-column p {
+        color: var(--text-color);
+        font-size: 0.95rem;
+        margin-bottom: 1.5rem;
+      }
+
+      .footer-logo-column h3 {
+        color: var(--white);
+        margin-top: 0.25rem;
+        margin-bottom: 0.25rem;
+      }
+
+      /* other columns */
+
+      .other-columns {
+        display: inline-grid;
+        grid-template-columns: repeat(2, 1fr);
+        width: 100%;
+        gap: 2rem 1rem;
+        padding-top: 2rem;
+      }
+
+      .other-columns ul {
+        display: flex;
+        gap: 0.75rem;
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+        flex-direction: column;
+        font-weight: 600;
+      }
+
+      .other-columns ul a {
+        color: var(--text-color);
+        text-decoration: none;
+        font-size: 0.85rem;
+      }
+
+      .other-columns h3 {
+        color: var(--link-color);
+        margin-bottom: 1rem;
+        font-size: 1rem;
+        font-family: ui-monospace, monospace;
+      }
+
+      .footer-logo svg {
+        fill: var(--white);
+      }
+
+      /*? Footer bottom */
+
+      /* Remove underline from all links in the footer sections */
+      .links a {
+        position: relative;
+        text-decoration: none;
+        color: inherit;
+        /* Optional: Use this if you want the link to inherit the color from its parent element */
+        transition: color 0.3s ease;
+        /* Smooth transition effect */
+      }
+
+      /* Add the underline effect */
+      .links a::after {
+        content: "";
+        position: absolute;
+        width: 0;
+        height: 2px;
+        /* Adjust the thickness of the underline */
+        bottom: -2px;
+        /* Adjust position if needed */
+        left: 0;
+        background-color: #000;
+        /* Change this to your desired underline color */
+        transition: width 0.3s ease;
+        transition-delay: 0.1s;
+        /* Optional: Adds a slight delay to the animation */
+      }
+
+      .links a:hover {
+        color: #000;
+        /* Change text color to black */
+      }
+
+      /* Hover effect */
+      .links a:hover::after {
+        width: 100%;
+        left: 0;
+        /* Reset to left 0 to create the effect from right to left */
+        right: auto;
+      }
+
+      .footer-bottom {
+        width: 100%;
+        color: var(--text-color);
+        background-color: var(--footer-bottom-bg);
+      }
+
+      .footer-bottom-wrapper {
+        display: flex;
+        max-width: 80rem;
+        margin: 0 auto;
+        gap: 1rem;
+        width: 100%;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        align-items: center;
+        align-content: center;
+        padding: 1rem;
+      }
+
+      .footer-bottom small {
+        font-size: 1rem;
+        display: inline;
+        white-space: nowrap;
+      }
+
+      .footer-bottom-links {
+        text-decoration: none;
+        list-style-type: none;
+        display: inline-flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 1rem;
+      }
+
+      .footer-bottom-links a {
+        color: var(--link-color);
+        text-decoration: none;
+        white-space: nowrap;
+      }
+
+      .footer-bottom-links a:hover {
+        color: var(--link-hover);
+        text-decoration: none;
+      }
+
+      .footer-bottom > small {
+        font-size: 1rem;
+        margin: 0 auto;
+        width: 100%;
+      }
+
+      /*? socials */
+      .social-wrapper {
+        display: flex;
+        gap: 0.5rem;
+        margin: 0 auto;
+      }
+
+      .social-links {
+        display: inline-flex;
+        gap: 0.5rem;
+        align-items: center;
+      }
+
+      .social-links img {
+        width: 1.5rem;
+        height: 1.5rem;
+        transition: all 0.2s ease-in-out;
+      }
+
+      .social-links img:hover {
+        transform: scale(1.1);
+      }
+
+      .social-links ul {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.75rem;
+        list-style-type: none;
+      }
+
+      .footer-bottom-wrapper {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+
+      @media (min-width: 600px) {
+        .other-columns {
+          display: grid;
+          grid-template-columns: repeat(4, 1fr);
+        }
+
+        .footer-bottom-wrapper {
+          flex-direction: row;
+        }
+
+        .footer-bottom-wrapper small {
+          font-size: smaller;
+        }
+
+        .footer-bottom-links {
+          margin-left: 1.5rem;
+        }
+      }
+
+      @media (max-width: 800px) {
+        .footer-top {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          text-align: center;
+          padding: 1rem 0.5rem 2rem 0.5rem;
+        }
+      }
+      #abc :hover {
+        background: #55a5ea;
+        border-color: #3fbbc0;
+      }
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        font-family: "Raleway", sans-serif;
+      }
+    </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"
+    />
+    <link rel="stylesheet" href="./Css-Files/aboutus.css" />
+    <link rel="stylesheet" href="./Css-Files/testimonial.css" />
+    <script src="chatboxx.js" defer></script>
+    <style>
+      #progressBar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 0%;
+        height: 8px;
+        background-color: #3fbcc0;
+        z-index: 9999;
+      }
+    </style>
   </head>
+
   <body>
     <div id="progressBar"></div>
-    <script src="../js/progressbar_and_header.js"></script>
-    <div class="container" id="customer-agreement-container">
-      <header id="customer-agreement-header">
-        <h1 id="customer-agreement-title">Customer Agreement</h1>
-      </header>
-      <main class="main-content" id="customer-agreement-main">
-        <section class="section" id="customer-agreement-introduction">
-          <h2 class="section-title" id="introduction-title">Introduction</h2>
-          <p class="section-content" id="introduction-content">
-            Welcome to RAPIDOC Healthcare Website. This Customer Agreement
-            outlines the terms and conditions under which you may use our online
-            platform to access healthcare information and services. By using our
-            website, you agree to comply with and be bound by the terms of this
-            agreement.
-          </p>
-        </section>
-        <section class="section" id="customer-agreement-services">
-          <h2 class="section-title">Services Provided</h2>
-          <ul class="section-list">
-            <li class="list-item">
-              <strong>Information Access:</strong> RAPIDOC provides information
-              about the nearest hospitals and healthcare facilities, including
-              blood availability in emergencies, OPDs, and bed availability.
-            </li>
-            <li class="list-item">
-              <strong>Appointment Booking:</strong> Users can prebook
-              appointments for OPDs at desired hospitals.
-            </li>
-            <li class="list-item">
-              <strong>Emergency Services:</strong> Information on emergency
-              services and blood group availability.
-            </li>
-            <li class="list-item">
-              <strong>Healthcare Facilities:</strong> Detailed information on
-              healthcare services provided by various hospitals.
-            </li>
-          </ul>
-        </section>
-        <section class="section" id="customer-agreement-responsibilities">
-          <h2 class="section-title">User Responsibilities</h2>
-          <ul class="section-list">
-            <li class="list-item">
-              <strong>Accuracy of Information:</strong> Users must provide
-              accurate and up-to-date information when using our services.
-            </li>
-            <li class="list-item">
-              <strong>Compliance:</strong> Users must comply with all applicable
-              laws and regulations when using our platform.
-            </li>
-            <li class="list-item">
-              <strong>Account Security:</strong> Users are responsible for
-              maintaining the confidentiality of their account information and
-              password.
-            </li>
-          </ul>
-        </section>
-        <section class="section" id="customer-agreement-terms">
-          <h2 class="section-title">Terms of Use</h2>
-          <ul class="section-list">
-            <li class="list-item">
-              <strong>Acceptance of Terms:</strong> By accessing and using our
-              website, you accept and agree to be bound by the terms of this
-              Customer Agreement.
-            </li>
-            <li class="list-item">
-              <strong>Modification of Terms:</strong> RAPIDOC reserves the right
-              to modify these terms at any time. Any changes will be posted on
-              this page, and your continued use of the website will constitute
-              acceptance of the new terms.
-            </li>
-            <li class="list-item">
-              <strong>Termination:</strong> RAPIDOC may terminate your access to
-              the website at any time, without notice, for conduct that it
-              believes violates this agreement or is harmful to other users of
-              the website, RAPIDOC, or third parties, or for any other reason.
-            </li>
-          </ul>
-        </section>
-        <section class="section" id="customer-agreement-contact">
-          <h2 class="section-title">Contact Information</h2>
-          <p class="section-content">
-            For any questions or concerns about this Customer Agreement, please
-            contact us at rapidoc@mail.com.
-          </p>
-        </section>
-      </main>
-    </div>
-    <!-- Footer -->
-    <footer class="text-center mt-5">
-      <div class="container">
-        <p>&copy; 2024 RapiDoc. All rights reserved.</p>
-        <ul class="list-inline">
-          <li class="list-inline-item"><a href="/index.html">Home</a></li>
-          <li class="list-inline-item">
-            <a href="/Html-Files/privacy_policy_page.html">Privacy Policy</a>
+    <script>
+      window.onscroll = function () {
+        var winScroll =
+          document.body.scrollTop || document.documentElement.scrollTop;
+        var height =
+          document.documentElement.scrollHeight -
+          document.documentElement.clientHeight;
+        var scrolled = (winScroll / height) * 100;
+        document.getElementById("progressBar").style.width = scrolled + "%";
+      };
+    </script>
+    <!-- ############# Header ############# -->
+    <header class="header_container nav-h">
+      <div class="img">
+        <img
+          id="rd-logo"
+          style="width: 90px; height: auto"
+          src="/assets/img/rd1.png"
+        />
+        <p>Rapidoc</p>
+      </div>
+      <nav class="nav_menu">
+        <ul class="nav_link vis-h">
+          <li>
+            <a href="/"><i class="bi bi-house-door-fill"></i> Home</a>
+          </li>
+          <li>
+            <a href="#about"><i class="bi bi-info-circle-fill"></i> About</a>
           </li>
-          <li class="list-inline-item">
-            <a href="/Html-Files/terms_and_conditions.html"
-              >Terms and Conditions</a
+          <li>
+            <a href="news.html"><i class="bi bi-newspaper"></i> News</a>
+          </li>
+          <li>
+            <a href="dex.html"><i class="bi bi-gear"></i> Service</a>
+          </li>
+          <li>
+            <a href="#patient-portal"
+              ><i class="bi bi-person"></i> Patient Portal</a
             >
           </li>
+          <li>
+            <a href="#doctors"><i class="bi bi-person-circle"></i> Doctor</a>
+          </li>
+          <li>
+            <a href="Html-Files/contact.html"
+              ><i class="bi bi-telephone"></i>Contact us</a
+            >
+          </li>
+          <li>
+            <a href="rateus.html"><i class="bi bi-star"></i>Rate Us</a>
+          </li>
+
+          <li>
+            <a href="login.html"
+              ><i class="bi bi-box-arrow-right"></i> Sign in/Sign up</a
+            >
+          </li>
+          <a href="./Html-Files/Doctor Experience.html"
+            ><button>Find a Doctor</button></a
+          >
         </ul>
+        <div class="hamburger">
+          <div class="line"></div>
+          <div class="line"></div>
+          <div class="line"></div>
+        </div>
+      </nav>
+    </header>
+
+    <!-- ############# Header ############# -->
+    <div class="container mt-5" id="privacy-policy-container">
+      <div id="progressBar"></div>
+      <script src="../js/progressbar_and_header.js"></script>
+      <div class="container" id="customer-agreement-container">
+        <header id="customer-agreement-header">
+          <h1 id="customer-agreement-title">Customer Agreement</h1>
+        </header>
+        <main class="main-content" id="customer-agreement-main">
+          <section class="section" id="customer-agreement-introduction">
+            <h2 class="section-title" id="introduction-title">Introduction</h2>
+            <p class="section-content" id="introduction-content">
+              Welcome to RAPIDOC Healthcare Website. This Customer Agreement
+              outlines the terms and conditions under which you may use our online
+              platform to access healthcare information and services. By using our
+              website, you agree to comply with and be bound by the terms of this
+              agreement.
+            </p>
+          </section>
+          <section class="section" id="customer-agreement-services">
+            <h2 class="section-title">Services Provided</h2>
+            <ul class="section-list">
+              <li class="list-item">
+                <strong>Information Access:</strong> RAPIDOC provides information
+                about the nearest hospitals and healthcare facilities, including
+                blood availability in emergencies, OPDs, and bed availability.
+              </li>
+              <li class="list-item">
+                <strong>Appointment Booking:</strong> Users can prebook
+                appointments for OPDs at desired hospitals.
+              </li>
+              <li class="list-item">
+                <strong>Emergency Services:</strong> Information on emergency
+                services and blood group availability.
+              </li>
+              <li class="list-item">
+                <strong>Healthcare Facilities:</strong> Detailed information on
+                healthcare services provided by various hospitals.
+              </li>
+            </ul>
+          </section>
+          <section class="section" id="customer-agreement-responsibilities">
+            <h2 class="section-title">User Responsibilities</h2>
+            <ul class="section-list">
+              <li class="list-item">
+                <strong>Accuracy of Information:</strong> Users must provide
+                accurate and up-to-date information when using our services.
+              </li>
+              <li class="list-item">
+                <strong>Compliance:</strong> Users must comply with all applicable
+                laws and regulations when using our platform.
+              </li>
+              <li class="list-item">
+                <strong>Account Security:</strong> Users are responsible for
+                maintaining the confidentiality of their account information and
+                password.
+              </li>
+            </ul>
+          </section>
+          <section class="section" id="customer-agreement-terms">
+            <h2 class="section-title">Terms of Use</h2>
+            <ul class="section-list">
+              <li class="list-item">
+                <strong>Acceptance of Terms:</strong> By accessing and using our
+                website, you accept and agree to be bound by the terms of this
+                Customer Agreement.
+              </li>
+              <li class="list-item">
+                <strong>Modification of Terms:</strong> RAPIDOC reserves the right
+                to modify these terms at any time. Any changes will be posted on
+                this page, and your continued use of the website will constitute
+                acceptance of the new terms.
+              </li>
+              <li class="list-item">
+                <strong>Termination:</strong> RAPIDOC may terminate your access to
+                the website at any time, without notice, for conduct that it
+                believes violates this agreement or is harmful to other users of
+                the website, RAPIDOC, or third parties, or for any other reason.
+              </li>
+            </ul>
+          </section>
+          <section class="section" id="customer-agreement-contact">
+            <h2 class="section-title">Contact Information</h2>
+            <p class="section-content">
+              For any questions or concerns about this Customer Agreement, please
+              contact us at rapidoc@mail.com.
+            </p>
+          </section>
+        </main>
+      </div>
+    </div>
+
+    <!-- Bootstrap JS and dependencies -->
+
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+    <!-- ############### Footer ############### -->
+    <br /><br /><br /><br /><br /><br />
+    <footer>
+      <div class="footer-wrapper">
+        <div class="footer-columns">
+          <div class="other-columns">
+            <section>
+              <h4>Quick Links</h4>
+              <br />
+              <ul class="links">
+                <li><a href="/">Home</a></li>
+                <li><a href="#about">About Us</a></li>
+                <li><a href="contact.html">Contact Us</a></li>
+                <li><a href="#services">Services</a></li>
+                <li><a href="#doctors">Doctors</a></li>
+                <li><a href="./faq.html">FAQ</a></li>
+              </ul>
+            </section>
+            <section>
+              <h4>Explore</h4>
+              <br />
+              <ul class="links">
+                <li><a href="appointment.html">Appointment</a></li>
+                <li><a href="#">Patient Portal</a></li>
+                <li><a href="login.html">Login account</a></li>
+                <li><a href="#">Helplines</a></li>
+                <li><a href="#">Location</a></li>
+              </ul>
+            </section>
+            <section>
+              <h4>Legal</h4>
+              <br />
+              <ul class="links">
+                <li>
+                  <a href="customer_agreement.html">Customer Agreement</a>
+                </li>
+                <li><a href="privacy_policy_page.html">Privacy Policy</a></li>
+                <li>
+                  <a href="terms_and_conditions.html">Terms and Conditions</a>
+                </li>
+                <li><a href="#">GDPR</a></li>
+                <li><a href="#">Security</a></li>
+                <li><a href="#test">Testimonials</a></li>
+              </ul>
+            </section>
+            <section class="footer-col">
+              <h4>RAPIDOC Newsletter</h4>
+              <br />
+              <p>
+                Subscribe to our newsletter for a weekly dose of news, updates,
+                helpful tips, and exclusive offers.
+              </p>
+              <form action="#" class="subscribe-form">
+                <input type="email" placeholder="Your email" required />
+                <button type="submit" style="color: black;">SUBSCRIBE</button>
+              </form>
+            </section>
+          </div>
+        </div>
+      </div>
+      <div class="footer-bottom">
+        <div class="footer-bottom-wrapper">
+          <small
+            >© <span id="year"></span><span> RapiDoc</span>&nbsp;| All Rights
+            Reserved Made with ❤️ by RapiDoc</small
+          >
+          <style>
+            .social-wrapper a div i {
+              color: #afb6c7;
+            }
+            .social-wrapper a div i:hover {
+              color: #fff;
+            }
+          </style>
+          <div class="social-wrapper">
+            <div class="social-links">
+              <div style="margin-left: 100px; font-family: sans-serif">
+                <i>Follow&nbsp;Us&nbsp;:&nbsp;</i>
+              </div>
+              <a href="https://www.facebook.com/" target="_blank"
+                ><div><i class="fa-brands fa-facebook-f"></i></div
+              ></a>
+              <!-- <a href="https://www.twitter.com" target="_blank"><div><i class="fa-brands fa-twitter"></i></div></a> -->
+              <a href="https://www.twitter.com"
+                ><div>
+                  <img
+                    src="twitter.png"
+                    style="width: 16px; height: 15px"
+                  /></div
+              ></a>
+              <a href="https://www.linkedin.com" target="_blank"
+                ><div><i class="fa-brands fa-linkedin"></i></div
+              ></a>
+              <a href="#" target="_blank"
+                ><div><i class="fa-brands fa-instagram"></i></div
+              ></a>
+              <a
+                href="https://github.com/Anishkagupta04/RAPIDOC-HEALTHCARE-WEBSITE-"
+                target="_blank"
+                ><div><i class="fa-brands fa-github"></i></div
+              ></a>
+              <a href="+91 1234567890" title="+91 1234567890" target="_blank"
+                ><div><i class="fa-solid fa-phone"></i></div
+              ></a>
+              <a href="info@rapidoc.com" target="_blank"
+                ><div><i class="fa-solid fa-envelope"></i></div
+              ></a>
+            </div>
+          </div>
+        </div>
       </div>
     </footer>
+
+    <script>
+      const hamburger = document.querySelector('.hamburger');
+      const navbar = document.querySelector('.header_container');
+      const nav = document.querySelector('.nav_link');
+      hamburger.addEventListener('click', () => {
+        navbar.classList.toggle('nav-h');
+        nav.classList.toggle('vis-h');
+      })
+      function toggleAnswer(id) {
+        var answer = document.getElementById(id);
+        if (answer) {
+          if (answer.style.display === "block") {
+            answer.style.display = "none";
+            document.getElementById(
+              "icon" + id.charAt(id.length - 1)
+            ).innerText = "➕";
+          } else {
+            answer.style.display = "block";
+            document.getElementById(
+              "icon" + id.charAt(id.length - 1)
+            ).innerText = "➖";
+          }
+        }
+      }
+    </script>
+    <script>
+      //// JavaScript working of scroll button when scrolling down
+      var backToTopBtn = document.getElementById("back-to-top");
+
+      if (backToTopBtn) {
+        backToTopBtn.addEventListener("click", function () {
+          document.body.scrollTop = 0; // For Safari
+          document.documentElement.scrollTop = 0; // For Chrome, Firefox, edge
+        });
+      }
+
+      // JavaScript to show scroll button when scrolling down
+      window.addEventListener("scroll", function () {
+        var scrollBtn = document.getElementById("back-to-top");
+        if (scrollBtn) {
+          if (
+            document.body.scrollTop > 20 ||
+            document.documentElement.scrollTop > 20
+          ) {
+            scrollBtn.style.display = "block";
+          } else {
+            scrollBtn.style.display = "none";
+          }
+        }
+      });
+    </script>
   </body>
 </html>