From 7779ae581aabef6e9546a26d412184ff4625a9b4 Mon Sep 17 00:00:00 2001
From: Isha <ishaprajapati112004@gmail.com>
Date: Sat, 22 Jun 2024 16:52:59 +0530
Subject: [PATCH] =?UTF-8?q?=E2=80=A2Responsive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Css-Files/news.css                       |  482 +--
 Html-Files/Css-Files/Experiencestyle.css |  470 ++-
 Html-Files/Css-Files/styles.css          |  158 +-
 Html-Files/Doctor Experience.html        |   79 +-
 Html-Files/app.js                        |    4 +-
 Html-Files/contact.html                  |  819 ++++-
 Html-Files/news.html                     |  111 +-
 images/Close.svg                         |    1 +
 images/Menu.svg                          |    1 +
 images/x-twitter.svg                     |    0
 index.html                               | 2094 ++++++-------
 style.css                                | 3637 ++++++++++++++++++++--
 12 files changed, 6002 insertions(+), 1854 deletions(-)
 create mode 100644 images/Close.svg
 create mode 100644 images/Menu.svg
 create mode 100644 images/x-twitter.svg

diff --git a/Css-Files/news.css b/Css-Files/news.css
index f8bde885..97b7452c 100644
--- a/Css-Files/news.css
+++ b/Css-Files/news.css
@@ -1,220 +1,298 @@
-*{
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: 'Poppins',sans-serif;
+/* Global Reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
+/* Body Styles */
+body {
+  font-family: Arial, sans-serif;
+  line-height: 1.6;
+}
 
-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;
-  }
+/* Navbar Styles */
+.nav_menu {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  background-color: #022a2d;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
 
-  .head {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    padding: 12px;
-    margin: 12px auto;
+.nav_menu img {
+  display: block; 
 }
 
-.line {
-    width: 30vw;
-    border: 1px solid black;
-    margin: 7px;
-    background-color: black;
-    height: 4px;
-    border-radius: 24px;
+.nav_menu ul.nav-item.navbar {
+  display: flex;
+  list-style: none;
 }
 
-#newsBox {
-    display: flex;
-    justify-content: center;
-align-items: center;
-    gap: 2rem;
-    flex-wrap: wrap;
+.nav_menu .nav-item.navbar li {
+  margin-right: 15px; 
+}
 
+.nav_menu .nav-item.navbar li:last-child {
+  margin-right: 0;
 }
-  
 
-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;
+.nav_menu .nav-item.navbar li a {
+  text-decoration: none;
+  color: white;
+  padding: 8px 5px;
+  transition: background-color 0.3s ease;
+  border-radius: 5px;
+}
+
+.nav_menu .nav-item.navbar li a:hover {
+  color: #55a5ea; 
+}
+
+/* Mobile Menu Styles */
+.menu-toggle {
+  display: none; 
+}
+
+/* Media Query for Responsive Design */
+@media (max-width: 1024px) {
+  .menu-toggle {
+    display: block;
+    cursor: pointer;
+    margin-right: 15px;
   }
-  
-  .underline {
-    width: 100%;
-    height: 5px;
-    background: #767676;
-    border-radius: 3px;
+
+  .nav_menu ul.nav-item.navbar {
+    display: none; 
     position: absolute;
-    top: 25px;
+    top: 100%; 
     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; */
+    width: 100%;
+    background-color: #ffffff; 
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    border-radius: 0 0 10px 10px;
+    z-index: 1000; 
+    padding: 1rem;
   }
 
-  .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;
+  .nav_menu ul.nav-item.navbar.show {
+    display: flex; 
+    flex-direction: column;
+    background-color:#022a2d ;
   }
-  .emoji{
-    padding: 1rem 0;
-    width: 20%;
-    display: flex;
-    justify-content: space-between;
+
+  .nav_menu .nav-item.navbar li {
+    width: 100%; 
   }
-  
-  
\ No newline at end of file
+}
+
+
+/*  */
+button {
+  position: relative;
+  border-radius: 10px;
+  border: 1px solid #4bb6b7;
+  background-color: #4bb6b7;
+  color: #fff;
+  font-size: 15px;
+  font-weight: 700;
+  margin: 8px;
+  padding: 8px 50px;
+  letter-spacing: 1px;
+  text-transform: capitalize;
+  transition: 0.3s ease-in-out;
+}
+
+a {
+  color: white;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #55a5ea;
+  text-decoration: none;
+}
+
+.header_container {
+  background-color: #022a2d;
+  opacity: 0.9;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: 60px;
+  /* padding: 0 20px; */
+  margin: auto;
+}
+.text {
+  padding-top: 28px;
+}
+
+.logo a {
+  text-decoration: none;
+  color: #55a5ea;
+  font-size: 1.5rem;
+}
+
+.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: #fff;
+  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;
+}
+
+.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: 2rem;
+  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;
+}
+
diff --git a/Html-Files/Css-Files/Experiencestyle.css b/Html-Files/Css-Files/Experiencestyle.css
index 799b31ab..a141489d 100644
--- a/Html-Files/Css-Files/Experiencestyle.css
+++ b/Html-Files/Css-Files/Experiencestyle.css
@@ -1,9 +1,19 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
 body {
     font-family: "Open Sans", sans-serif;
     color: #fff;
     background-color: #000;
     margin: 0;
     padding-top: 10px;
+
+    /* added */
+    font-size: 16px;
+    line-height: 1.5;
   }
   a {
     color: #55a5ea;
@@ -17,7 +27,7 @@ body {
     color: #55a5ea;
     text-decoration: none;
   }
-  .nav_link li {
+  /* .nav_link li {
     padding: 5px 20px;
     display: inline-block;
     color: white;
@@ -44,7 +54,7 @@ body {
   
   .nav_link li a:hover {
     color: #55a5ea;
-  }
+  } */
 /*Preloader CSS*/
 .pre{
     position: fixed;
@@ -118,7 +128,7 @@ body {
     visibility: hidden;
   }
 .h{
-    margin-top: 20px;
+    margin-top: 120px;
     margin-bottom: 20px;
 }
   .header_container {
@@ -142,11 +152,20 @@ display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 20px;
+
+/* added */
+flex-wrap: wrap;
+padding: 10px;
+background-color: #9cd7da; /* Example background color */
+box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
 }
 
 .filter-sort {
 display: flex;
 align-items: center;
+
+/* added */
+flex-wrap: wrap;
 }
 
 .filter-sort label {
@@ -156,8 +175,38 @@ margin-right: 10px;
 .filter-sort select,
 .filter-sort input[type="range"] {
 margin-right: 20px;
+/* added */
+margin-bottom: 10px;
+}
+
+/* added */
+#sort-btn {
+  margin-bottom: 10px; /* Add some bottom margin for spacing */
+}
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .filter-sort label,
+  .filter-sort select,
+  .filter-sort input[type="range"],
+  #sort-btn {
+    margin-right: 0;
+    margin-bottom: 10px; /* Adjust spacing for smaller screens */
+    width: 100%; /* Make elements full width */
+  }
+
+  .filter-sort {
+    flex-direction: column; /* Stack items vertically */
+    align-items: flex-start; /* Align items to the start */
+  }
 }
 
+@media (max-width: 480px) {
+  header {
+    padding: 5px; /* Reduce padding for smaller screens */
+  }
+}
+
+
 #doctor-list {
 list-style-type: none;
 padding: 0;
@@ -203,7 +252,8 @@ align-items: center;
     border: 3px solid var(--white);
   }
   
-  /*? footer containers */
+  /*
+
   footer {
     bottom: 0;
     background-color: var(--footer-bg);
@@ -260,7 +310,7 @@ align-items: center;
     margin-bottom: 0.25rem;
   }
   
-  /* other columns */
+
   
   .other-columns {
     display: inline-grid;
@@ -300,8 +350,7 @@ align-items: center;
   .footer-logo svg {
     fill: var(--white);
   }
-  
-  /*? Footer bottom */
+
   .footer-bottom {
     width: 100%;
     color: var(--text-color);
@@ -352,7 +401,7 @@ align-items: center;
     width: 100%
   }
   
-  /*? socials */
+
   .social-wrapper {
     display: flex;
     gap: 0.5rem;
@@ -415,4 +464,407 @@ align-items: center;
         text-align: center;
         padding: 1rem 0.5rem 2rem 0.5rem;
     }
-  }
\ No newline at end of file
+  }
+*/
+
+  /* added */
+  footer {
+    bottom: 0;
+    background-color: var(--footer-bg);
+    width: 100%;
+    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-columns {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+  
+  .other-columns {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 2rem 1rem;
+    width: 100%;
+    padding-top: 2rem;
+  }
+  
+  .other-columns ul {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    font-weight: 600;
+  }
+  
+  .other-columns ul a {
+    color: var(--text-color);
+    text-decoration: none;
+    font-size: 0.85rem;
+  }
+  
+  .other-columns ul a:hover {
+    text-decoration: underline;
+  }
+  
+  .footer-bottom {
+    width: 100%;
+    color: var(--text-color);
+    background-color: var(--footer-bottom-bg);
+  }
+  
+  .footer-bottom-wrapper {
+    display: flex;
+    flex-direction: column;
+    max-width: 80rem;
+    margin: 0 auto;
+    width: 100%;
+    gap: 1rem;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem;
+    text-align: center;
+  }
+  
+  .footer-bottom small {
+    font-size: 1rem;
+    white-space: wrap;
+  }
+  
+  .social-wrapper {
+    display: flex;
+    justify-content: center;
+    gap: 0.5rem;
+  }
+  
+  .social-links {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    
+  }
+  
+  .social-links a div i {
+    color: #afb6c7;
+  }
+  
+  .social-links a div i:hover {
+    color: #fff;
+  }
+  
+  .follow-us {
+    font-family: sans-serif;
+  }
+  
+  @media (min-width: 600px) {
+    .footer-bottom-wrapper {
+      flex-direction: row;
+      justify-content: space-between;
+    }
+    .footer-bottom small {
+      font-size: smaller;
+    }
+  }
+  
+  @media (max-width: 600px) {
+    .footer-bottom-wrapper {
+      text-align: center;
+    }
+  }
+  
+
+
+
+
+  .nav_menu {
+    background-color: #022a2d;
+}
+nav {
+    display: flex;
+    /* justify-content: space-between; */
+    align-items: center;
+    color: #000000;
+    padding: 5px 2px 2px 2px;
+    background-color: #ffffff;
+    position: fixed;
+    width: 100%;
+    z-index: 1;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    user-select: none;
+}
+nav ul {
+    display: flex;
+    align-items: center;
+}
+
+nav ul {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+nav ul li {
+    margin-right: 20px; /* Adjust spacing between navbar items */
+    color: white;
+}
+
+
+
+
+
+nav ul li a {
+    text-decoration: none;
+    transition: all 0.3s ease 0s;
+  color: white;
+}
+
+nav ul li a:hover {
+    color: #55a5ea;
+  
+    /* text-decoration: underline 2.5px rgb(3, 3, 94); */
+  }
+button {
+    position: relative;
+    border-radius: 10px;
+    border: 1px solid #4bb6b7;
+    background-color: #4bb6b7;
+    color: #fff;
+    font-size: 15px;
+    font-weight: 700;
+    margin: 8px;
+    padding: 8px 50px;
+    letter-spacing: 1px;
+    text-transform: capitalize;
+    transition: 0.3s ease-in-out;
+  }
+    
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #000000;
+    padding: 5px 2px 2px 2px;
+    background-color: #ffffff;
+}
+
+nav ul {
+    display: flex;
+    align-items: center;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+nav ul li {
+    margin-right: 20px; /* Adjust spacing between navbar items */
+    color: white;
+}
+
+
+
+
+
+.navbar-contact {
+    display: flex;
+    align-items: center;
+}
+
+.navbar-contact a {
+    text-decoration: none;
+    color: #000000;
+    padding: 5px 20px;
+}
+
+.navbar-contact a:hover {
+    color: #222;
+    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
+}
+nav ul li.contact {
+    margin-top: 2px; /* Adjust this value as needed */
+}
+nav ul li.contact a i {
+    vertical-align: middle;
+}
+.navbar-icons {
+    color: #000000; /* or #333333 */
+}
+
+nav img {
+    display: none;
+    cursor: pointer;
+}
+
+nav h1 {
+    font-size: 2rem;
+    padding-left: 5px;
+    margin: 0px;
+    color: white;
+    margin-bottom: 25px;
+}
+nav h1 :hover{
+    color: #55a5ea;
+}
+
+nav a {
+    color: #000000;
+    text-decoration: none;
+    padding: 5px 20px;
+    position: relative;
+    font-size: 16.5px;
+    letter-spacing: 0.3px;
+}
+
+nav a::after {
+    content: "";
+    position: absolute;
+    background-color: #435365;
+    /* background-color: #007bff; */
+    height: 3px;
+    width: 0;
+    left: 0;
+    bottom: -7px;
+    transition: 0.3s ease;
+    border-radius: 5px;
+}
+
+nav ul {
+    list-style: none;
+    display: flex;
+    margin: 0;
+    padding: 0;
+}
+
+nav ul li a:hover {
+    color: #007bff;
+    transition: all 0.5s ease;
+}
+
+nav ul li a:hover::after {
+    width: 100%;
+}
+
+@media screen and (max-width: 885px) {
+    nav a {
+        font-size: 16px;
+        letter-spacing: 0;
+    }
+    
+}
+
+@media screen and (max-width: 1024px) {
+    nav img {
+        display: inline-block;
+        padding-right: 15px;
+    }
+
+    nav {
+        padding: 15px;
+        /* position: relative; */
+    }
+
+    nav ul {
+        position: fixed;
+        top: 70px;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: #022a2d;
+        flex-direction: column;
+        text-align: center;
+        transition: left 0.3s ease;
+    }
+
+    nav ul.show {
+        left: 0;
+    }
+
+    nav ul li {
+        margin: 30px 0;
+    }
+
+    nav img {
+        display: block;
+    }
+
+    nav ul a {
+        color: #000000;
+        font-size: 20px;
+    }
+    nav ul li a:hover {
+        color: #55a5ea;
+      
+        /* text-decoration: underline 2.5px rgb(3, 3, 94); */
+      }
+
+}
+
+
+
+
+/* added */
+@media screen and (max-width: 860px) {
+    nav img {
+        display: inline-block;
+        padding-right: 15px;
+    }
+}
+@media screen and (max-width: 860px) {
+    nav ul {
+        position: fixed;
+        top: 70px; /* Adjust top positioning based on your header height */
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: #022a2d;
+        flex-direction: column;
+        text-align: center;
+        transition: left 0.3s ease;
+    }
+
+    nav ul.show {
+        left: 0;
+    }
+
+    nav ul li {
+        margin: 30px 0;
+    }
+
+    nav ul a {
+        color: #000000;
+        font-size: 20px;
+    }
+}
+
+
+nav ul li a {
+    text-decoration: none;
+    color: white;
+    padding: 5px 20px;
+    position: relative;
+    font-size: 13.5px; /* Adjust font size as needed */
+    letter-spacing: 0.3px;
+}
+
+
+
+
+
+/* Example CSS for larger screens (greater than 1024px) */
+@media screen and (min-width: 1025px) {
+    #rd-logo {
+        display: inline-block; /* Ensure the logo is displayed */
+    }
+}
diff --git a/Html-Files/Css-Files/styles.css b/Html-Files/Css-Files/styles.css
index 284a682a..de4dda83 100644
--- a/Html-Files/Css-Files/styles.css
+++ b/Html-Files/Css-Files/styles.css
@@ -7,6 +7,11 @@
     font-family: 'Poppins', sans-serif;
 }
 
+body {
+    font-size: 16px;
+    line-height: 1.5;
+}
+
 section {
     display: flex;
     justify-content: center;
@@ -61,27 +66,24 @@ section::before {
 
 .container {
     position: relative;
-    min-width: 1100px;
-    min-height: 550px;
+    max-width: 1200px;
+    width: 100%;
+    margin: 20px;
     display: flex;
-    z-index: 1000;
-    /* border-radius: 22px; */
-    /* background-color: #fff; */
+    flex-direction: column-reverse;
+    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
+    border-radius: 22px;
 }
 
 .container .contactInfo {
-    position: absolute;
-    top: 40px;
-    width: 350px;
-    height: calc(100% - 80px);
+    width: 100%;
     background: #095a55;
-    z-index: 1;
     padding: 40px;
+    box-shadow: none;
+    border-radius: 0;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
-    box-shadow: 0 20px 25px rgba(0,0,0,0.15); 
-    border-radius: 22px;
+    align-items: center;
 }
 
 .container .contactInfo h2 {
@@ -91,19 +93,19 @@ section::before {
 }
 
 .container .contactInfo ul.info {
-   margin: 20px 0; 
+    margin: 20px 0; 
 }
 
 .container .contactInfo ul.info li {
-   list-style: none;
-   display: flex;
-   margin: 20px 0;
-   cursor: pointer;
-   align-items: flex-start;
+    list-style: none;
+    display: flex;
+    margin: 20px 0;
+    cursor: pointer;
+    align-items: flex-start;
 }
 
 .container .contactInfo ul.info li span:nth-child(1) {
-    width: 30px;
+    width: 30px; 
     min-width: 30px;
 }
 
@@ -125,6 +127,8 @@ section::before {
 
 .container .contactInfo ul.sci {
     display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .container .contactInfo ul.sci li {
@@ -143,28 +147,32 @@ section::before {
 }
 
 .container .contactForm {
-    position: absolute;
-    padding: 70px 50px;
-    padding-left: 250px;
-    margin-left: 150px;
-    width: calc(100% - 150px);
-    height: 100%;
+    width: 100%;
+    padding: 40px;
     background: #fff; 
-    box-shadow: 0 50px 50px rgba(0,0,0,0.25);
-    border-radius: 22px;
+    box-shadow: none;
+    border-radius: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
 
 .container .contactForm h2 {
     color: #0f3959;
     font-size: 24px;
     font-weight: 500;
+    margin-top: 95px;
 }
 
+.container .contactInfo {
+    margin-top: 95px;
+}
 .container .contactForm .formBox {
     display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    padding-top: 30px;
+    flex-direction: column;
+    width: 100%;
+    margin-top: 15px;
 }
 
 .container .contactForm .formBox .inputBox {
@@ -172,14 +180,6 @@ section::before {
     width: 100%;
 }
 
-.container .contactForm .formBox .inputBox.w50 {
-    width: 47%;
-}
-
-.container .contactForm .formBox .inputBox.w100 {
-    width: 100%;
-}
-
 .container .contactForm .formBox .inputBox input,
 .container .contactForm .formBox .inputBox textarea {
     width: 100%;
@@ -233,86 +233,46 @@ section::before {
     background: #0d9480;
 }
 
-/* Responsive adjustments */
-@media (max-width: 1200px) {
+@media (min-width: 992px) {
     .container {
-        width: 90%;
-        margin: 20px;
-        box-shadow: 0 20px 50px rgba(0,0,0,0.2);
-    }
-
-    .container .contactInfo {
-        top: 0;
-        height: 550px;
-        position: relative;
-        box-shadow: none;
-        border-radius: 0;
+        flex-direction: row;
     }
 
+    .container .contactInfo, 
     .container .contactForm {
-        position: relative;
-        width: calc(100% - 350px);
-        padding-left: 0;
-        margin-left: 0;
-        padding: 40px;
-        height: 550px;
-        box-shadow: none;
-        border-radius: 0;
+        width: 50%;
+        height: 100%;
     }
-}
 
-@media (max-width: 991px) {
-    section {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        min-height: 100vh;
-        background: #fff38e;
-    }
-
-    section::before {
-        display: none;
+    .container .contactInfo {
+        border-radius: 22px 0 0 22px;
     }
 
-    .container {
-        flex-direction: column-reverse;
+    .container .contactForm {
+        border-radius: 0 22px 22px 0;
     }
 
     .container .contactForm {
-        width: 100%;
-        height: auto;
-        border-radius: 0;
+        padding-left: 250px;
     }
+}
 
-    .container .contactInfo {
-        width: 100%;
-        height: auto;
-        flex-direction: row;
-        border-radius: 0;
+@media (min-width: 600px) and (max-width: 991px) {
+    .container .contactForm .formBox .inputBox.w50 {
+        width: 48%;
     }
 
-    .container .contactInfo ul.sci {
-        justify-content: center;
-        align-items: center;
+    .container .contactForm .formBox .inputBox.w100 {
+        width: 100%;
     }
 }
 
 @media (max-width: 600px) {
-    .container .contactForm {
-        padding: 25px;
-    }
-
-    .container .contactInfo {
-        padding: 25px;
-        flex-direction: column;
-        align-items: flex-start;
-    }
-
-    .container .contactInfo ul.sci {
-        margin-top: 40px;
+    .container .contactForm .formBox .inputBox.w50 {
+        width: 100%;
     }
 
-    .container .contactForm .formBox .inputBox.w50 {
+    .container .contactForm .formBox .inputBox.w100 {
         width: 100%;
     }
-}
+}
\ No newline at end of file
diff --git a/Html-Files/Doctor Experience.html b/Html-Files/Doctor Experience.html
index a3a7ed1c..970d4fa0 100644
--- a/Html-Files/Doctor Experience.html	
+++ b/Html-Files/Doctor Experience.html	
@@ -15,28 +15,30 @@
   <div class="pre">
     <div class="loader"></div>
   </div>
-  <header class="header_container">
-    <div class="img">
-    <img id="rd-logo"  style="width: 90px; height: auto;" src="/images/rd.png"> 
-  </div>
-  
-  </div>
-  <nav class="nav_menu">
 
-    <ul class="nav_link">
-      <li><a href="../index.html">Home</a></li>
-      <li><a href="../index.html">About</a></li>
-      <li><a href="../Html-Files/news.html">News</a></li>
-      <a href="../dex.html"><button>Service</button></a>
-      <li><a href="../index.html">Patient Portal</a></li>
-      <li><a href="../index.html">Doctor</a></li>
-      <li><a href="../Html-Files/contact.html">Contact us</a></li>
-      <a href="../login.html"><button>Sign in/Sign up</button></a>
-    </ul>
-  </nav>
-  </div>
-</header>
 
+
+
+<nav class="nav_menu">
+  <div class="img">
+      <img id="rd-logo" style="width: 90px; height: auto;" src="../images/rd.png">
+    </div>
+  <h1 id="home">RapiDoc</h1>
+  <img    id="menu-icon" style="outline: none;" src="../images/Menu.svg" alt="Menu">
+  
+  <ul class="nav-item navbar">
+      <li class="navitem"><a href="index.html">Home</a></li>
+      <li class="navitem"><a href="#about">About</a></li>
+      <li class="navitem"><a href="Html-Files/news.html">News</a></li>
+      <li class="navitem"><a href="dex.html">Service</a></li>
+      <li class="navitem"><a href="#patient-portal">Patient Portal</a></li>
+      <li class="navitem"><a href="#doctors">Doctor</a></li>
+      <li class="navitem"><a href="Html-Files/contact.html">Contact us</a></li>
+      <li class="navitem"><a href="login.html">Sign in/Sign up</a></li>
+      <li class="navitem"><a href="./Html-Files/Doctor Experience.html"><button>Find a Doctor</button></a></li>
+
+  </ul>
+</nav>
   <header class="h">
     <h1>Find a Doctor</h1>
     <div class="filter-sort">
@@ -120,7 +122,7 @@ <h4>RAPIDOC Newsletter</h4><br>
               </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>
+              <div style="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.linkedin.com" target="_blank"><div><i class="fa-brands fa-linkedin"></i></div></a>
@@ -272,5 +274,40 @@ <h4>RAPIDOC Newsletter</h4><br>
       });
       });
       </script>
+
+
+
+<script>   
+  document.addEventListener('DOMContentLoaded', function() {
+      const menuIcon = document.getElementById('menu-icon');
+      const navLinks = document.querySelector('.nav-item.navbar');
+  
+      if (menuIcon && navLinks) {
+          menuIcon.addEventListener('click', toggleMenu);
+         
+      } else {
+          console.error('Menu icon or nav links not found');
+      }
+  
+      function toggleMenu() {
+          navLinks.classList.toggle('show');
+          if (navLinks.classList.contains('show')) {
+              menuIcon.src = './images/Close.svg';
+              disableScroll();
+          } else {
+              menuIcon.src = './images/Menu.svg';
+              enableScroll();
+          }
+      }
+  
+      function disableScroll() {
+          document.body.style.overflow = "hidden";
+      }
+  
+      function enableScroll() {
+          document.body.style.overflow = "visible";
+      }
+  });
+</script> 
 </body>
 </html>
\ No newline at end of file
diff --git a/Html-Files/app.js b/Html-Files/app.js
index d96b5160..048d8dd5 100644
--- a/Html-Files/app.js
+++ b/Html-Files/app.js
@@ -11,7 +11,7 @@ function toggleDarkMode() {
 }
 
 // Event listener for dark mode toggle button
-darkModeToggle.addEventListener("change", toggleDarkMode);
+// darkModeToggle.addEventListener("change", toggleDarkMode);
 
 // Function to check and set initial dark mode state based on user preferences
 function setInitialDarkMode() {
@@ -81,5 +81,5 @@ function getNews(newsCategoryName) {
     }
   };
 
-  xhr.send();
+  // xhr.send();
 }
diff --git a/Html-Files/contact.html b/Html-Files/contact.html
index 17b71d05..e8329d97 100644
--- a/Html-Files/contact.html
+++ b/Html-Files/contact.html
@@ -1,114 +1,717 @@
 <!doctype html>
 <html>
-    <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title> Contact Us</title>
-    <link rel="shortcut icon" type="image/jpg" href="images/news2.png"/>
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
-        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
-        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
-        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
-        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');
-        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
-        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap');
-        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap');
-    </style>
-    <link rel="stylesheet" href="Css-Files/styles.css">
-    </head>
-    <body>
-
-        <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: -33rem;">
-      
-            <h1 class="logo me-auto"><a style="text-decoration: none; color: #55a5ea;" href="index.html">RapiDoc</a></h1>
-          </div>
-          
-            <nav class="nav_menu">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Contact Us</title>
+<link rel="shortcut icon" type="image/jpg" href="images/news2.png"/>
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
+
+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        font-family: 'Poppins', sans-serif;
+    }
+
+    body {
+        font-size: 16px;
+        line-height: 1.5;
+    }
+
+    section {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 100vh;
+        background-color: #095a55;
+        position: relative;
+    }
+
+    section::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 50%;
+        height: 100%;
+        background: #fff38e;
+    }
+
+    /* .nav_link {
+        list-style: none;
+    }
+
+    .nav_link li {
+        padding: 5px 20px;
+        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;
+        text-decoration: underline 2.5px rgb(3, 3, 94);
+    } */
+
+    .header_container {
+        background-color: #022a2d;
+        opacity: 0.9;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        height: 60px;
+        width: 100%;
+        padding: 0 20px;
+    }
+
+    .container {
+        position: relative;
+        max-width: 1200px;
+        width: 100%;
+        margin: 20px;
+        display: flex;
+        flex-direction: column-reverse;
+        box-shadow: 0 20px 50px rgba(0,0,0,0.2);
+        border-radius: 22px;
+    }
+
+    .container .contactInfo {
+        width: 100%;
+        background: #095a55;
+        padding: 40px;
+        box-shadow: none;
+        border-radius: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .container .contactInfo h2 {
+        color: #fff;
+        font-size: 24px;
+        font-weight: 500;
+    }
+
+    .container .contactInfo ul.info {
+        margin: 20px 0; 
+    }
+
+    .container .contactInfo ul.info li {
+        list-style: none;
+        display: flex;
+        margin: 20px 0;
+        cursor: pointer;
+        align-items: flex-start;
+    }
+
+    .container .contactInfo ul.info li span:nth-child(1) {
+        width: 30px; 
+        min-width: 30px;
+    }
+
+    .container .contactInfo ul.info li span a {
+        color: #fff;
+        text-decoration: none;
+    }
+
+    .container .contactInfo ul.info li span:nth-child(1) img {
+        max-width: 100%;
+        filter: invert(1);
+    }
+
+    .container .contactInfo ul.info li span:nth-child(2) {
+        color: #fff;
+        margin-left: 10px;
+        font-weight: 300;
+    }
+
+    .container .contactInfo ul.sci {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .container .contactInfo ul.sci li {
+        list-style: none;
+        margin-right: 15px;
+    }
+
+    .container .contactInfo ul.sci li a {
+        text-decoration: none;
+    }
+
+    .container .contactInfo ul.sci li a img {
+        filter: invert(1);
+        width: 25px;
+        height: 25px;
+    }
+
+    .container .contactForm {
+        width: 100%;
+        padding: 40px;
+        background: #fff; 
+        box-shadow: none;
+        border-radius: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .container .contactForm h2 {
+        color: #0f3959;
+        font-size: 24px;
+        font-weight: 500;
+    }
+
+    .container .contactForm .formBox {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        width: 100%;
+    }
+
+    .container .contactForm .formBox .inputBox {
+        margin-bottom: 35px;
+        width: 48%;
+        position: relative;
+    }
+
+    .container .contactForm .formBox .inputBox.w100 {
+        width: 100%;
+    }
+
+    .container .contactForm .formBox .inputBox input,
+    .container .contactForm .formBox .inputBox textarea {
+        width: 100%;
+        resize: none;
+        padding: 5px 0;
+        font-size: 18px;
+        font-weight: 300;
+        color: #333;
+        border: none;
+        outline: none;
+        border-bottom: 1px solid #777;
+    }
+
+    .container .contactForm .formBox .inputBox textarea {
+        height: 120px;
+    }
+
+    .container .contactForm .formBox .inputBox span {
+        position: absolute;
+        left: 0;
+        padding: 5px 0;
+        pointer-events: none;
+        font-size: 18px;
+        font-weight: 300;
+        transition: 0.3s;
+    }
+
+    .container .contactForm .formBox .inputBox input:focus ~ span,
+    .container .contactForm .formBox .inputBox input:valid ~ span,
+    .container .contactForm .formBox .inputBox textarea:focus ~ span, 
+    .container .contactForm .formBox .inputBox textarea:valid ~ span {
+        transform: translateY(-20px);
+        font-size: 12px;
+        font-weight: 400;
+        letter-spacing: 1px;
+        color: #095a55;
+        font-weight: 500;
+    } 
+
+    .container .contactForm .formBox .inputBox input[type="submit"] {
+        cursor: pointer;
+        background: #095a55;
+        border-radius: 20px;
+        color: #fff;
+        border: none;
+        max-width: 150px;
+        padding: 12px;
+    }
+
+    .container .contactForm .formBox .inputBox input[type="submit"]:hover {
+        background: #0d9480;
+    }
+
+    @media (min-width: 992px) {
+        .container {
+            flex-direction: row;
+        }
+
+        .container .contactInfo, 
+        .container .contactForm {
+            width: 50%;
+            height: 100%;
+        }
+
+        .container .contactInfo {
+            border-radius: 22px 0 0 22px;
+        }
+
+        .container .contactForm {
+            border-radius: 0 22px 22px 0;
+        }
+
+        .container .contactForm {
+            padding-left: 250px;
+        }
+    }
+
+    @media (max-width: 991px) {
+        .container {
+            flex-direction: column-reverse;
+        }
+
+        .container .contactForm {
+            padding-left: 0;
+        }
+
+        .container .contactForm .formBox .inputBox {
+            width: 100%;
+        }
+    }
+
+    @media (max-width: 600px) {
+        .container .contactForm {
+            padding: 25px;
+        }
+
+        .container .contactInfo {
+            padding: 25px;
+            flex-direction: column;
+            align-items: flex-start;
+        }
+
+        .container .contactInfo ul.sci {
+            margin-top: 40px;
+        }
+    }
+
+    .nav_menu {
+    background-color: #022a2d;
+}
+nav {
+    display: flex;
+    /* justify-content: space-between; */
+    align-items: center;
+    color: #000000;
+    padding: 5px 2px 2px 2px;
+    background-color: #ffffff;
+    position: fixed;
+    width: 100%;
+    z-index: 1;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    user-select: none;
+}
+nav ul {
+    display: flex;
+    align-items: center;
+}
+
+nav ul {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+nav ul li {
+    margin-right: 20px; /* Adjust spacing between navbar items */
+    color: white;
+}
+
+
+
+
+
+nav ul li a {
+    text-decoration: none;
+    transition: all 0.3s ease 0s;
+  color: white;
+}
+
+nav ul li a:hover {
+    color: #55a5ea;
+  
+    /* text-decoration: underline 2.5px rgb(3, 3, 94); */
+  }
+button {
+    position: relative;
+    border-radius: 10px;
+    border: 1px solid #4bb6b7;
+    background-color: #4bb6b7;
+    color: #fff;
+    font-size: 15px;
+    font-weight: 700;
+    margin: 8px;
+    padding: 8px 50px;
+    letter-spacing: 1px;
+    text-transform: capitalize;
+    transition: 0.3s ease-in-out;
+  }
+    
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #000000;
+    padding: 5px 2px 2px 2px;
+    background-color: #ffffff;
+}
+
+nav ul {
+    display: flex;
+    align-items: center;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+nav ul li {
+    margin-right: 20px; /* Adjust spacing between navbar items */
+    color: white;
+}
+
+
+
+
+
+.navbar-contact {
+    display: flex;
+    align-items: center;
+}
+
+.navbar-contact a {
+    text-decoration: none;
+    color: #000000;
+    padding: 5px 20px;
+}
+
+.navbar-contact a:hover {
+    color: #222;
+    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
+}
+nav ul li.contact {
+    margin-top: 2px; /* Adjust this value as needed */
+}
+nav ul li.contact a i {
+    vertical-align: middle;
+}
+.navbar-icons {
+    color: #000000; /* or #333333 */
+}
+
+nav img {
+    display: none;
+    cursor: pointer;
+}
+
+nav h1 {
+    font-size: 2rem;
+    padding-left: 5px;
+    margin: 0px;
+    color: white;
+    margin-bottom: 25px;
+}
+nav h1 :hover{
+    color: #55a5ea;
+}
+
+nav a {
+    color: #000000;
+    text-decoration: none;
+    padding: 5px 20px;
+    position: relative;
+    font-size: 16.5px;
+    letter-spacing: 0.3px;
+}
+
+nav a::after {
+    content: "";
+    position: absolute;
+    background-color: #435365;
+    /* background-color: #007bff; */
+    height: 3px;
+    width: 0;
+    left: 0;
+    bottom: -7px;
+    transition: 0.3s ease;
+    border-radius: 5px;
+}
+
+nav ul {
+    list-style: none;
+    display: flex;
+    margin: 0;
+    padding: 0;
+}
+
+nav ul li a:hover {
+    color: #007bff;
+    transition: all 0.5s ease;
+}
+
+nav ul li a:hover::after {
+    width: 100%;
+}
+
+@media screen and (max-width: 885px) {
+    nav a {
+        font-size: 16px;
+        letter-spacing: 0;
+    }
+    
+}
+
+@media screen and (max-width: 1024px) {
+    nav img {
+        display: inline-block;
+        padding-right: 15px;
+    }
+
+    nav {
+        padding: 15px;
+        /* position: relative; */
+    }
+
+    nav ul {
+        position: fixed;
+        top: 70px;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: #022a2d;
+        flex-direction: column;
+        text-align: center;
+        transition: left 0.3s ease;
+    }
+
+    nav ul.show {
+        left: 0;
+    }
+
+    nav ul li {
+        margin: 30px 0;
+    }
+
+    nav img {
+        display: block;
+    }
+
+    nav ul a {
+        color: #000000;
+        font-size: 20px;
+    }
+    nav ul li a:hover {
+        color: #55a5ea;
       
-              <ul class="nav_link">
-                <li><a href="../index.html">Home</a></li>
-                <li><a href="../index.html">About</a></li>
-                <li><a href="/Html-Files/news.html">News</a></li>
-                <li><a href="../index.html">Services</a></li>
-                <li><a href="../index.html">patient Portal</a></li>
-                <li><a href="../index.html">Doctor</a></li>
-                <li><a href="#">Contact us</a></li>
-              </ul>
-            </nav>
-          </div>
-        </header>
-
-
-        <section>
-            <div class="container">
-                <div class="contactInfo"> 
-                    <div>
-                        <h2>Contact Info</h2>
-                        <ul class="info">
-                            
-                            <li>
-                                <span><img src="images/location.png"></span>
-                                <span>IGDTUW, Delhi</span>
-                                </span>
-                            </li>
-                            <li>
-                                <span><img src="images/mail.png"></span>
-                                <!-- <span>nassosanagn@gmail.com</span> -->
-                                <span><a href = "mailto: nassosanagn@gmail.com">rapidoc@mail.com</a></span>
-                            </li>
-                            <li>
-                                <span><img src="images/call.png"></span>
-                                <span>+91 1234567890</span>
-                            </li>
-
-                        </ul>
-                    </div>
-                    <ul class="sci">
-                        <li><a href="https://www.facebook.com"><img src="images/1.png"></a></li>
-                        <li><a href="https://www.instagram.com"><img src="images/3.png"></a></li>
-                        <li class="social-icon"><a href="https://www.twitter.com"><img src="images/x-twitter.svg"></a></li>
-                        <li><a href="https://www.linkedin.com"><img src="images/5.png"></a></li>
-                        
-                    </ul>
+        /* text-decoration: underline 2.5px rgb(3, 3, 94); */
+      }
+
+}
+
+
+
+
+/* added */
+@media screen and (max-width: 860px) {
+    nav img {
+        display: inline-block;
+        padding-right: 15px;
+    }
+}
+@media screen and (max-width: 860px) {
+    nav ul {
+        position: fixed;
+        top: 70px; /* Adjust top positioning based on your header height */
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: #022a2d;
+        flex-direction: column;
+        text-align: center;
+        transition: left 0.3s ease;
+    }
+
+    nav ul.show {
+        left: 0;
+    }
+
+    nav ul li {
+        margin: 30px 0;
+    }
+
+    nav ul a {
+        color: #000000;
+        font-size: 20px;
+    }
+}
+
+
+nav ul li a {
+    text-decoration: none;
+    color: white;
+    padding: 5px 20px;
+    position: relative;
+    font-size: 13.5px; /* Adjust font size as needed */
+    letter-spacing: 0.3px;
+}
+
+
+
+
+
+/* Example CSS for larger screens (greater than 1024px) */
+@media screen and (min-width: 1025px) {
+    #rd-logo {
+        display: inline-block; /* Ensure the logo is displayed */
+    }
+}
+
+</style>
+<link rel="stylesheet" href="Css-Files/styles.css">
+</head>
+<body>
+
+<!-- <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: -33rem;">
+        <h1 class="logo me-auto"><a style="text-decoration: none; color: #55a5ea;" href="index.html">RapiDoc</a></h1>
+    </div>
+    <nav class="nav_menu">
+        <ul class="nav_link">
+            <li><a href="../index.html">Home</a></li>
+            <li><a href="../index.html">About</a></li>
+            <li><a href="/Html-Files/news.html">News</a></li>
+            <li><a href="../index.html">Services</a></li>
+            <li><a href="../index.html">Patient Portal</a></li>
+            <li><a href="../index.html">Doctor</a></li>
+            <li><a href="#">Contact us</a></li>
+        </ul>
+    </nav>
+</header> -->
+
+
+
+<nav class="nav_menu">
+    <div class="img">
+        <img id="rd-logo" style="width: 90px; height: auto;" src="/images/rd.png">
+      </div>
+    <h1 id="home">RapiDoc</h1>
+    <img    id="menu-icon" style="outline: none;" src="/images/Menu.svg" alt="Menu">
+    
+    <ul class="nav-item navbar">
+        <li class="navitem"><a href="index.html">Home</a></li>
+        <li class="navitem"><a href="#about">About</a></li>
+        <li class="navitem"><a href="Html-Files/news.html">News</a></li>
+        <li class="navitem"><a href="dex.html">Service</a></li>
+        <li class="navitem"><a href="#patient-portal">Patient Portal</a></li>
+        <li class="navitem"><a href="#doctors">Doctor</a></li>
+        <li class="navitem"><a href="Html-Files/contact.html">Contact us</a></li>
+        <li class="navitem"><a href="login.html">Sign in/Sign up</a></li>
+        <li class="navitem"><a href="./Html-Files/Doctor Experience.html"><button>Find a Doctor</button></a></li>
+
+    </ul>
+</nav>
+
+<section>
+    <div class="container">
+        <div class="contactInfo"> 
+            <div>
+                <h2>Contact Info</h2>
+                <ul class="info">
+                    <li>
+                        <span><img src="images/location.png"></span>
+                        <span>IGDTUW, Delhi</span>
+                    </li>
+                    <li>
+                        <span><img src="images/mail.png"></span>
+                        <span><a href="mailto: nassosanagn@gmail.com">rapidoc@mail.com</a></span>
+                    </li>
+                    <li>
+                        <span><img src="images/call.png"></span>
+                        <span>+91 1234567890</span>
+                    </li>
+                </ul>
+            </div>
+            <ul class="sci">
+                <li><a href="https://www.facebook.com"><img src="images/1.png"></a></li>
+                <li><a href="https://www.instagram.com"><img src="images/3.png"></a></li>
+                <li class="social-icon"><a href="https://www.twitter.com"><img src="images/x-twitter.svg"></a></li>
+                <li><a href="https://www.linkedin.com"><img src="images/5.png"></a></li>
+            </ul>
+        </div>
+        <div class="contactForm">
+            <h2>RapiDoc Query</h2>
+            <div class="formBox">
+                <div class="inputBox w50">
+                    <input type="text" name="" required>
+                    <span>First Name</span>
+                </div>
+                <div class="inputBox w50">
+                    <input type="text" required>
+                    <span>Last Name</span>
+                </div>
+                <div class="inputBox w50">
+                    <input type="email" required>
+                    <span>Email Address</span>
+                </div>
+                <div class="inputBox w50">
+                    <input type="text" required>
+                    <span>Mobile Number</span>
+                </div>
+                <div class="inputBox w100">
+                    <textarea required></textarea>
+                    <span>Write your message here...</span>
                 </div>
-                
-                    <div class="contactForm">
-                        <h2>RapiDoc Query</h2>
-                        <div class="formBox">
-                        <div class="inputBox w50">
-                            <input type="text" name="" required>
-                            <span>First Name</span>
-                        </div>
-                        <div class="inputBox w50">
-                            <input type="text" required>
-                            <span>Last Name</span>
-                        </div>
-                        <div class="inputBox w50">
-                            <input type="email" required>
-                            <span>Email Address</span>
-                        </div>
-                        <div class="inputBox w50">
-                            <input type="text" required>
-                            <span>Mobile Number</span>
-                        </div>
-                        <div class="inputBox w100">
-                            <textarea required></textarea>
-                            <span>Write your message here...</span>
-                        </div>
-                        <div class="inputBox w100">
-                            <input type="submit" value="Send">
-                        </div>
-                        
-                    </div>
+                <div class="inputBox w100">
+                    <input type="submit" value="Send">
                 </div>
-                    
-                    
-             
-        </section>
-    </body>
+            </div>
+        </div>
+    </div>
+</section>
+<script>   
+    document.addEventListener('DOMContentLoaded', function() {
+        const menuIcon = document.getElementById('menu-icon');
+        const navLinks = document.querySelector('.nav-item.navbar');
+    
+        if (menuIcon && navLinks) {
+            menuIcon.addEventListener('click', toggleMenu);
+           
+        } else {
+            console.error('Menu icon or nav links not found');
+        }
+    
+        function toggleMenu() {
+            navLinks.classList.toggle('show');
+            if (navLinks.classList.contains('show')) {
+                menuIcon.src = './Images/Close.svg';
+                disableScroll();
+            } else {
+                menuIcon.src = './Images/Menu.svg';
+                enableScroll();
+            }
+        }
+    
+        function disableScroll() {
+            document.body.style.overflow = "hidden";
+        }
+    
+        function enableScroll() {
+            document.body.style.overflow = "visible";
+        }
+    });
+</script>  
+</body>
 </html>
diff --git a/Html-Files/news.html b/Html-Files/news.html
index c02d86aa..5f31086d 100644
--- a/Html-Files/news.html
+++ b/Html-Files/news.html
@@ -4,45 +4,56 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  
   <title>News RapiDoc</title>
+   <!-- Bootstrap CSS -->
+   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
   <!-- favicon -->
   <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">
+  <!-- <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/news.css" />
+
 </head>
 
 <body>
-  <!-- This is Bootsratp Nav bar -->
-  <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>
+ 
+ 
+  <nav class="nav_menu" style="position: relative;">
+    <div class="img">
+        <img id="rd-logo" style="width: 90px; height: auto; " src="../images/rd.png">
     </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>
+    <h1 id="home" style="color:white" >RapiDoc</h1>
+    <div class="menu-toggle">
+      
+      <img id="menu-icon" src="../images/Menu.svg" alt="Menu Icon" style="cursor: pointer;">
     </div>
-  </header>
+    
+    
+    <ul class="nav-item navbar" >
+        <li class="navitem"><a href="index.html">Home</a></li>
+        <li class="navitem"><a href="#about">About</a></li>
+        <li class="navitem"><a href="Html-Files/news.html">News</a></li>
+        <li class="navitem"><a href="dex.html">Service</a></li>
+        <li class="navitem"><a href="#patient-portal">Patient Portal</a></li>
+        <li class="navitem"><a href="#doctors">Doctor</a></li>
+        <li class="navitem"><a href="Html-Files/contact.html">Contact us</a></li>
+        <li class="navitem"><a href="login.html">Sign in/Sign up</a></li>
+        <li class="navitem"><a href="./Html-Files/Doctor Experience.html"><button>Find a Doctor</button></a></li>
+    </ul>
+</nav>
+
+
+
+
   <!-- This is basic header of website -->
 
 
   <div class="head container">
-    <h3>
+    <h3 >
       Top News <span class="badge text-bg-secondary">by RapiDoc</span>
     </h3>
     <span class="line"></span>
@@ -69,7 +80,7 @@ <h1>Top News by RapiDoc is Coming soon.</h1>
           <!-- <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"
+            width="100%" height="200px" style="border: 0; padding: 1rem 1em 0 0" allowfullscreen="" loading="lazy"
             referrerpolicy="no-referrer-when-downgrade"></iframe>
         </div>
       </div>
@@ -141,12 +152,54 @@ <h3>
     </div>
   </footer>
 
-</body>
+
+   <script>   
+    document.addEventListener('DOMContentLoaded', function() {
+        const menuIcon = document.getElementById('menu-icon');
+        const navLinks = document.querySelector('.nav-item.navbar');
+    
+        if (menuIcon && navLinks) {
+            menuIcon.addEventListener('click', toggleMenu);
+           
+        } else {
+            console.error('Menu icon or nav links not found');
+        }
+    
+        function toggleMenu() {
+            navLinks.classList.toggle('show');
+            if (navLinks.classList.contains('show')) {
+                menuIcon.src = '../images/Close.svg ';
+                disableScroll();
+            } else {
+                menuIcon.src = '../images/Menu.svg';
+                enableScroll();
+            }
+        }
+    
+        function disableScroll() {
+            document.body.style.overflow = "hidden";
+        }
+    
+        function enableScroll() {
+            document.body.style.overflow = "visible";
+        }
+    });
+</script>
+
 <!-- 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
+
+
+  <!-- Option 1: Bootstrap Bundle with Popper -->
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+</body>
+
+
+
+
+
+</html>
+
+
+
diff --git a/images/Close.svg b/images/Close.svg
new file mode 100644
index 00000000..5a60c58e
--- /dev/null
+++ b/images/Close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>
\ No newline at end of file
diff --git a/images/Menu.svg b/images/Menu.svg
new file mode 100644
index 00000000..2f427e91
--- /dev/null
+++ b/images/Menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>
\ No newline at end of file
diff --git a/images/x-twitter.svg b/images/x-twitter.svg
new file mode 100644
index 00000000..e69de29b
diff --git a/index.html b/index.html
index c6dcc503..bf7090ff 100644
--- a/index.html
+++ b/index.html
@@ -26,247 +26,381 @@
   <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 rel="stylesheet" href="navbar.css"> -->
 
-
-                         
   <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>
-      /* 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 */
-}
+  <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>
+    /* 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;
-}
+    .iti.iti--allow-dropdown {
+      margin-left: 250px;
+    }
 
-.container {
-    display:unset;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: nowrap;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-}
+    .container {
+      display: unset;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: nowrap;
+      width: 100%;
+      margin: 0;
+      padding: 0;
+    }
 
-.content {
-    text-align: left;
-    flex: 1;
-    padding: 20px;
-}
+    .content {
+      text-align: left;
+      flex: 1;
+      padding: 20px;
+    }
 
-.sec-img {
-    max-width: 50%;
-    width: 600px;
-    height: 600px;
-    margin-left: auto;
-}
+    .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 {
+      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 {
+    @media screen and (max-width: 992px) {
+      .container {
         flex-wrap: wrap;
         justify-content: center;
-    }
+      }
 
-    .sec-img {
+      .sec-img {
         max-width: 100%;
         margin: 20px 0;
         position: relative;
         top: 0;
         right: 0;
-        
-    }
 
-    .content {
+      }
+
+      .content {
         text-align: center;
         padding: 10px;
+      }
     }
-}
 
-@media screen and (max-width: 768px) {
-    .content {
+    @media screen and (max-width: 768px) {
+      .content {
         text-align: center;
         padding: 10px;
-    }
+      }
 
-    .sec-img {
+      .sec-img {
         max-width: 100%;
         margin: 20px 0;
         position: relative;
         top: 0;
         right: 0;
+      }
+    }
+
+    /*Preloader CSS*/
+    .pre {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transition: opacity 2s ease-out, visibility 2s ease-out;
+      opacity: 1;
+      visibility: visible;
+      z-index: 9999;
+    }
+
+    .pre--hidden {
+      opacity: 0;
+      visibility: hidden;
+    }
+
+    .loader {
+      display: block;
+      position: relative;
+      width: 150px;
+      height: 150px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      border-top-color: #55a5ea;
+      animation: spin 3s linear infinite;
+    }
+
+    .loader:before {
+      content: "";
+      position: absolute;
+      top: 5px;
+      left: 5px;
+      right: 5px;
+      bottom: 5px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      border-top-color: #3fbcc0c6;
+      animation: spin 3s linear infinite;
+    }
+
+    .loader:after {
+      content: "";
+      position: absolute;
+      top: 15px;
+      left: 15px;
+      right: 15px;
+      bottom: 15px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      border-top-color: #fff;
+      animation: spin 1.5s linear infinite;
+    }
+
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    .avatar {
+      margin: 20px 5px;
+    }
+
+    .avatar img {
+      margin: 20px 32px;
+    }
+
+    .textbox input {
+      width: 200px;
+      height: 40px;
+    }
+
+    .btn {
+      margin-left: 50px;
+      width: 240px;
+      height: 40px;
+      background-color: #00C896;
+      border: none;
+      font-size: 1rem;
+      border-radius: 20px;
+      margin-bottom: 20px;
     }
+
+    
+
+    
+
+    form.php-email-form {
+      width: 250px;
+      margin-right: 250px;
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      align-content: flex-start
+    }
+
+    .loader--hidden {
+      opacity: 0;
+      visibility: hidden;
+    }
+
+
+
+
+    .container-patientportal {
+    width: 90%;
+    max-width: 1200px;
+    margin: auto;
+    padding: 20px;
+    /* background: rgba(255, 255, 255, 0.8); */
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column; /* Stack items vertically on smaller screens */
+    align-items: center; /* Center align items */
 }
-/*Preloader CSS*/
-.pre{
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%; 
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: opacity 2s ease-out, visibility 2s ease-out;
-  opacity: 1;
-  visibility: visible;
-  z-index: 9999; 
+.avatar {
+    margin-bottom: 20px; /* Add space below the image */
 }
 
-.pre--hidden {
-  opacity: 0;
-  visibility: hidden;
+.avatar img {
+    width: 100px; /* Adjust image size */
+    height: 100px;
+    border-radius: 50%;
+}
+    .login-box {
+    width: 100%; /* Adjusted width for responsiveness */
+    max-width: 400px;
+    padding: 20px;
+    background: #f9f9f9;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    margin-top: 20px; /* Add space between image and form */
+    text-align: center; /* Center align form elements */
 }
 
-.loader {
-  display: block;
-  position: relative;
-  width: 150px;
-  height: 150px;
-  border-radius: 50%;
-  border: 3px solid transparent;
-  border-top-color: #55a5ea;
-  animation: spin 3s linear infinite;
+.textbox {
+    margin: 10px auto; /* Adjusted margin for center alignment */
+    padding: 10px;
+    background: #e9e9e9;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    max-width: 300px; /* Adjusted max-width */
+    margin-bottom: 20px;
 }
 
-.loader:before {
-  content: "";
-  position: absolute;
-  top: 5px;
-  left: 5px;
-  right: 5px;
-  bottom: 5px;
-  border-radius: 50%;
-  border: 3px solid transparent;
-  border-top-color: #3fbcc0c6;
-  animation: spin 3s linear infinite;
+.textbox i {
+    margin-right: 10px;
+    color: #888;
 }
 
-.loader:after {
-  content: "";
-  position: absolute;
-  top: 15px;
-  left: 15px;
-  right: 15px;
-  bottom: 15px;
-  border-radius: 50%;
-  border: 3px solid transparent;
-  border-top-color: #fff;
-  animation: spin 1.5s linear infinite;
+.textbox input {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: none;
+    padding: 10px;
+    font-size: 16px;
 }
 
-@keyframes spin {
-  0% {
-      transform: rotate(0deg);
-  }
-  100% {
-      transform: rotate(360deg);
+@media (max-width:490px){
+  .textbox input {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: none;
+    padding: 7px;
+    font-size: 12px;
   }
 }
-.avatar{
-  margin: 20px 100px;
-}
-.avatar img{
-  margin: 0px 450px;
+.btn {
+    width: 100%;
+    max-width: 200px; /* Adjusted max-width for responsiveness */
+    background: #1c413b;
+    border: none;
+    padding: 15px;
+    border-radius: 5px;
+    color: #fff;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background 0.3s;
+    margin: 20px auto; /* Adjusted margin for center alignment */
 }
-.textbox input{
-  width:200px;
-  height: 40px;
+
+.btn:hover {
+    background: #35aaae;
 }
-.btn{
-  margin-left: 50px;
-  width:240px;
-  height: 40px;
-  background-color: #00C896;
-  border: none;
-  font-size: 1rem;
-  border-radius: 20px;
-  margin-bottom: 20px;
+
+#forgot-password-patient-portal,
+.register-link {
+    margin-top: 20px;
+    text-align: center;
 }
-#appointment.appointment.section-bg{
-  margin: 0px 200px;;
+
+#forgot-password-patient-portal a ,
+.register-link a {
+    color: #1c413b;
+    text-decoration: none;
 }
-#appointment.appointment.section-bg h2{
-  margin: 0px 115px ;
+
+#forgot-password-patient-portal a:hover,
+.register-link a:hover {
+    text-decoration: underline;
 }
-form.php-email-form{
-  width: 300px;
-  margin-right: 250px;
-  display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    align-content: flex-start
+
+#section-patientportal {
+    width: 100%; /* Adjusted width for responsiveness */
+    max-width: 600px; /* Maximum width */
+    margin: auto; /* Center align */
+    padding: 20px;
 }
-.loader--hidden{
-  opacity: 0;
-  visibility: hidden;
+@media (max-width: 768px) {
+    .container-patientportal {
+        padding: 10px;
+    }
+    .login-box {
+        padding: 15px;
+    }
+    .btn {
+        padding: 10px;
+        font-size: 14px;
+    }
 }
-    </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>
+  <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>
 </head>
 
 <body>
   <div class="pre">
     <div class="loader"></div>
   </div>
-      <!-- ############# Header ############# -->
-  
-      <header class="header_container">
-        <div class="img">
-        <img id="rd-logo"  style="width: 90px; height: auto;" src="images/rd.png"> 
-      </div>
-      
+  <!-- ############# Header ############# -->
+
+  <!-- added -->
+  <nav class="nav_menu">
+    <div class="img">
+        <img id="rd-logo" style="width: 90px; height: auto;" src="images/rd.png">
       </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>
-          <a href="dex.html">Service</a>
-          <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>
-          <a href="login.html">Sign in/Sign up</a>
-          <a href="./Html-Files/Doctor Experience.html"><button>Find a Doctor</button></a>
-
-        </ul>
-      </nav>
+      <h1 id="home" style="color:white" >RapiDoc</h1>
+      <div class="menu-toggle">
+        
+        <img id="menu-icon" src="../images/Menu.svg" alt="Menu Icon" style="cursor: pointer;">
       </div>
-    </header>
-
+    
+    <ul class="nav-item navbar">
+        <li class="navitem"><a href="index.html">Home</a></li>
+        <li class="navitem"><a href="#about">About</a></li>
+        <li class="navitem"><a href="Html-Files/news.html">News</a></li>
+        <li class="navitem"><a href="dex.html">Service</a></li>
+        <li class="navitem"><a href="#patient-portal">Patient Portal</a></li>
+        <li class="navitem"><a href="#doctors">Doctor</a></li>
+        <li class="navitem"><a href="Html-Files/contact.html">Contact us</a></li>
+        <li class="navitem"><a href="login.html">Sign in/Sign up</a></li>
+        <li class="navitem"><a href="./Html-Files/Doctor Experience.html"><button>Find a Doctor</button></a></li>
+
+    </ul>
+</nav>
   <!-- ############# Header ############# -->
 
   <header id="header" class="fixed-top">
     <div class="container d-flex align-items-center">
 
-      
+
       <a href="#appointment" class="appointment-btn scrollto">
         <span class="d-md-inline">EMERGENCY</span></a>
 
@@ -277,19 +411,19 @@
   <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 Now</a>
-        </h4>
-      </div>
-      <img class="sec-img" src="images/rd.png" alt="" />
-  
+      <h1 style="font-size: 35px ; margin-top : 100px;">
+        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>
-<br><br><br><br><br>
-<!-- End Home -->
+    <img class="sec-img" src="images/rd.png" alt="" />
+
+  </div>
+  <br><br><br><br><br>
+  <!-- End Home -->
 
   <main id="main">
 
@@ -349,78 +483,94 @@ <h4 class="title"><a href="">Medicine use</a></h4>
       <div id="about-us">
         <h1 class="about-us-heading">About Us</h1>
         <div class="about-us-block">
-            <div class="about-us-community">
-                <div style="display: flex; align-items: center; gap: 1rem;">
-                    <img id="community-img" src="./images/checkup.png" alt="" style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
-                    <div class="about-us-blk-text">Comprehensive Health Checkups</div>
-                </div>
-                <p class="about-us-blk-para">At Rapidoc, we prioritize your well-being with thorough health checkups that are designed to detect potential health issues early. Our comprehensive packages include a range of tests and screenings, providing a detailed analysis of your health status. Book your health checkup easily through our platform and receive personalized recommendations from our medical experts.</p>
+          <div class="about-us-community">
+            <div style="display: flex; align-items: center; gap: 1rem;">
+              <img id="community-img" src="./images/checkup.png" alt=""
+                style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
+              <div class="about-us-blk-text">Comprehensive Health Checkups</div>
             </div>
-            <div class="about-us-product">
-                <div style="display: flex; align-items: center; gap: 1rem;">
-                    <img id="product-img" src="./images/ward.png" alt="" style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
-                    <div class="about-us-blk-text">Emergency Ward Availability</div>
-                </div>
-                <p class="about-us-blk-para">In critical situations, every second counts. Rapidoc offers real-time updates on the availability of emergency wards across various hospitals. This feature ensures that you can find the nearest hospital with an open emergency ward promptly, facilitating quicker access to urgent medical care when you need it most.</p>
+            <p class="about-us-blk-para">At Rapidoc, we prioritize your well-being with thorough health checkups that
+              are designed to detect potential health issues early. Our comprehensive packages include a range of tests
+              and screenings, providing a detailed analysis of your health status. Book your health checkup easily
+              through our platform and receive personalized recommendations from our medical experts.</p>
+          </div>
+          <div class="about-us-product">
+            <div style="display: flex; align-items: center; gap: 1rem;">
+              <img id="product-img" src="./images/ward.png" alt=""
+                style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
+              <div class="about-us-blk-text">Emergency Ward Availability</div>
             </div>
+            <p class="about-us-blk-para">In critical situations, every second counts. Rapidoc offers real-time updates
+              on the availability of emergency wards across various hospitals. This feature ensures that you can find
+              the nearest hospital with an open emergency ward promptly, facilitating quicker access to urgent medical
+              care when you need it most.</p>
+          </div>
         </div>
         <div class="about-us-block">
-            <div class="about-us-location">
-                <div style="display: flex; align-items: center; gap: 1rem;">
-                    <img id="location-img" src="./images/appointment.png" alt="" style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
-                    <div class="about-us-blk-text">Seamless Appointment Booking</div>
-                </div>
-                <p class="about-us-blk-para">Say goodbye to long queues and waiting times with Rapidoc's seamless appointment booking system. Our platform allows you to prebook appointments with specialists across numerous hospitals. This ensures you receive timely consultations and reduces the hassle of waiting, making your healthcare experience more efficient and convenient.</p>
+          <div class="about-us-location">
+            <div style="display: flex; align-items: center; gap: 1rem;">
+              <img id="location-img" src="./images/appointment.png" alt=""
+                style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
+              <div class="about-us-blk-text">Seamless Appointment Booking</div>
             </div>
-            <div class="about-us-event">
-                <div style="display: flex; align-items: center; gap: 1rem;">
-                    <img id="event-img" src="./images/services.png" alt="" style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
-                    <div class="about-us-blk-text">Personalized Healthcare Services</div>
-                </div>
-                <p class="about-us-blk-para">Rapidoc is dedicated to offering personalized healthcare services tailored to meet your unique needs. Our platform connects you with a variety of specialists and healthcare providers, ensuring you receive the best possible care. From tailored treatment plans to ongoing health management, Rapidoc supports your journey to optimal health with expert guidance and personalized attention.</p>
+            <p class="about-us-blk-para">Say goodbye to long queues and waiting times with Rapidoc's seamless
+              appointment booking system. Our platform allows you to prebook appointments with specialists across
+              numerous hospitals. This ensures you receive timely consultations and reduces the hassle of waiting,
+              making your healthcare experience more efficient and convenient.</p>
+          </div>
+          <div class="about-us-event">
+            <div style="display: flex; align-items: center; gap: 1rem;">
+              <img id="event-img" src="./images/services.png" alt=""
+                style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
+              <div class="about-us-blk-text">Personalized Healthcare Services</div>
             </div>
+            <p class="about-us-blk-para">Rapidoc is dedicated to offering personalized healthcare services tailored to
+              meet your unique needs. Our platform connects you with a variety of specialists and healthcare providers,
+              ensuring you receive the best possible care. From tailored treatment plans to ongoing health management,
+              Rapidoc supports your journey to optimal health with expert guidance and personalized attention.</p>
+          </div>
         </div>
-    </div>
+      </div>
     </section>
 
     <script>
-      document.querySelectorAll('.about-us-community').forEach(function(element) {
-  element.addEventListener('mouseover', function() {
-      element.querySelector('img').src = './images/checkuphover.png';
-  });
-  element.addEventListener('mouseleave', function() {
-      element.querySelector('img').src = './images/checkup.png';
-  });
-});
+      document.querySelectorAll('.about-us-community').forEach(function (element) {
+        element.addEventListener('mouseover', function () {
+          element.querySelector('img').src = './images/checkuphover.png';
+        });
+        element.addEventListener('mouseleave', function () {
+          element.querySelector('img').src = './images/checkup.png';
+        });
+      });
 
-document.querySelectorAll('.about-us-event').forEach(function(element) {
-  element.addEventListener('mouseover', function() {
-      element.querySelector('img').src = './images/serviceshover.png';
-  });
-  element.addEventListener('mouseleave', function() {
-      element.querySelector('img').src = './images/services.png';
-  });
-});
+      document.querySelectorAll('.about-us-event').forEach(function (element) {
+        element.addEventListener('mouseover', function () {
+          element.querySelector('img').src = './images/serviceshover.png';
+        });
+        element.addEventListener('mouseleave', function () {
+          element.querySelector('img').src = './images/services.png';
+        });
+      });
 
-document.querySelectorAll('.about-us-product').forEach(function(element) {
-  element.addEventListener('mouseover', function() {
-      element.querySelector('img').src = './images/wardhover.png';
-  });
-  element.addEventListener('mouseleave', function() {
-      element.querySelector('img').src = './images/ward.png';
-  });
-});
+      document.querySelectorAll('.about-us-product').forEach(function (element) {
+        element.addEventListener('mouseover', function () {
+          element.querySelector('img').src = './images/wardhover.png';
+        });
+        element.addEventListener('mouseleave', function () {
+          element.querySelector('img').src = './images/ward.png';
+        });
+      });
+
+      document.querySelectorAll('.about-us-location').forEach(function (element) {
+        element.addEventListener('mouseover', function () {
+          element.querySelector('img').src = './images/appointmenthover.png';
+        });
+        element.addEventListener('mouseleave', function () {
+          element.querySelector('img').src = './images/appointment.png';
+        });
+      });
+    </script>
 
-document.querySelectorAll('.about-us-location').forEach(function(element) {
-  element.addEventListener('mouseover', function() {
-      element.querySelector('img').src = './images/appointmenthover.png';
-  });
-  element.addEventListener('mouseleave', function() {
-      element.querySelector('img').src = './images/appointment.png';
-  });
-});
-  </script>
-    
     <!-- End About Section -->
 
 
@@ -430,7 +580,7 @@ <h1 class="about-us-heading">About Us</h1>
     <section id="counts" class="counts">
       <div class="container" data-aos="fade-up">
 
-        <div class="row no-gutters" >
+        <div class="row no-gutters">
 
           <div class="col-lg-3 col-md-6 d-md-flex align-items-md-stretch">
             <div class="count-box">
@@ -488,714 +638,530 @@ <h2 style="text-align:center;">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="align-items-stretch ">
-            <div class="icon-box">
-              <div class="icon"><i class="fas fa-heartbeat"></i></div>
-              <h4><a href="">Clinics/Labs</a></h4>
-              <p>Locate the best healthcare facilities around you hassle-free.From routine check-ups to specialized treatments, find the right clinic or lab that meets your needs. Our database is updated regularly to ensure you have the most accurate information.</p>
-            </div>
+        <div class="align-items-stretch ">
+          <div class="icon-box">
+            <div class="icon"><i class="fas fa-heartbeat"></i></div>
+            <h4><a href="">Clinics/Labs</a></h4>
+            <p>Locate the best healthcare facilities around you hassle-free.From routine check-ups to specialized
+              treatments, find the right clinic or lab that meets your needs. Our database is updated regularly to
+              ensure you have the most accurate information.</p>
           </div>
+        </div>
 
-          <div class="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>
-              <p>Get your prescribed medicines delivered at your doorstep.Our pharmacy service ensures you never miss a dose with timely reminders and easy refill options. Enjoy the convenience of home delivery and exclusive discounts on a wide range of medicines.</p>
-            </div>
+        <div class="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>
+            <p>Get your prescribed medicines delivered at your doorstep.Our pharmacy service ensures you never miss a
+              dose with timely reminders and easy refill options. Enjoy the convenience of home delivery and exclusive
+              discounts on a wide range of medicines.</p>
           </div>
+        </div>
 
-          <div class="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>
-              <p>Access to heath benefits like bootcamps, vaccination drives and much more.Stay informed about the latest health trends, wellness tips, and upcoming events in your area. Participate in community health initiatives and boost your wellbeing.
-               </p>
-            </div>
+        <div class="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>
+            <p>Access to heath benefits like bootcamps, vaccination drives and much more.Stay informed about the latest
+              health trends, wellness tips, and upcoming events in your area. Participate in community health
+              initiatives and boost your wellbeing.
+            </p>
           </div>
+        </div>
 
-          <div class="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>
-              <p>Know the blood banks and blood groups available around you. No one should suffer ỉn emergencies.Find the nearest blood donation centers, check blood availability, and get information on how to donate or request blood in urgent situations.</p>
-            </div>
+        <div class="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>
+            <p>Know the blood banks and blood groups available around you. No one should suffer ỉn emergencies.Find the
+              nearest blood donation centers, check blood availability, and get information on how to donate or request
+              blood in urgent situations.</p>
           </div>
+        </div>
 
-          <div class="align-items-stretch ">
-            <div class="icon-box">
-              <div class="icon"><i class="fas fa-wheelchair"></i></div>
-              <h4><a href="">Disabled Person</a></h4>
-              <p>Convenient medical care is here. Wheelchair accessible hospitals and clinics, find all in one go.Access resources and support tailored to the needs of individuals with disabilities, ensuring a seamless healthcare experience for everyone.</p>
-            </div>
+        <div class="align-items-stretch ">
+          <div class="icon-box">
+            <div class="icon"><i class="fas fa-wheelchair"></i></div>
+            <h4><a href="">Disabled Person</a></h4>
+            <p>Convenient medical care is here. Wheelchair accessible hospitals and clinics, find all in one go.Access
+              resources and support tailored to the needs of individuals with disabilities, ensuring a seamless
+              healthcare experience for everyone.</p>
           </div>
+        </div>
 
-          <div class="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>
-              <p>Weekly, monthly, yearly or each day, however you like it!  Subscribe to our health post for expert articles, tips, and insights to help you make informed health decisions.</p>
-            </div>
+        <div class="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>
+            <p>Weekly, monthly, yearly or each day, however you like it! Subscribe to our health post for expert
+              articles, tips, and insights to help you make informed health decisions.</p>
           </div>
         </div>
+      </div>
     </section><!-- End Services Section -->
 
-    <!-- Add Patient Portal Section -->
-
- <!-- <section id="patient-portal" class="patient-portal">
+    <!-- Patient Portal Section -->
+    <section id="patient-portal" class="patient-portal">
       <div class="container-patientportal">
-      <div class="section-title" id="section-patientportal">
-
-        <h2>Patient Portal</h2>
-        <p>Access your medical records, lab results, and prescription history securely.</p>
-        <!-- <p>The Patient Portal is your personalized online gateway to your health information. Whether you need to check your recent lab results, review your prescription history, or update your personal details, the Patient Portal provides a convenient and secure platform for managing your healthcare needs.</p> 
-      </div>
-      <div class="container">
-
-
+        <div class="section-title" id="section-patientportal">
+          <h2>Patient Portal</h2>
+          <p>Access your medical records, lab results, and prescription history securely.</p>
+        </div>
+        <div class="container">
 
-      <!-- Add Login Form for Patient Portal 
-      
+          <!-- Add Login Form for Patient Portal -->
           <div class="login-box">
-              <div class="avatar">
-                  <img src="img\avatar.png" alt="Avatar">
+            <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>
-              <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>-->
-
-
-      <!-- Add Forgot Password Link -->
-
-
-      <!-- Add Login Form for Patient Portal -->
-
-
-
-
-
-    <!-- Patient Portal Section -->
-<section id="patient-portal" class="patient-portal">
-  <div class="container-patientportal">
-    <div class="section-title" id="section-patientportal">
-      <h2>Patient Portal</h2>
-      <p>Access your medical records, lab results, and prescription history securely.</p>
-    </div>
-    <div class="container">
-
-      <!-- Add Login Form for Patient Portal -->
-      <div class="login-box">
-        <div class="avatar">
-          <img src="img/avatar.png" alt="Avatar" >
-        </div>
-        <form>
-          <div class="textbox">
-            <i class="fas fa-user" style = "margin-left:325px"></i>
-            <input type="text" placeholder="Username" name="username" required>
-          </div>
-          <br>
-          <div class="textbox">
-            <i class="fas fa-lock" style = "margin-left:325px"></i>
-            <input type="password" placeholder="Password" name="password" required>
-          </div>
-          <br>
-          <input type="submit" class="btn" value="SUBMIT" style = "margin-left:325px">
-          <div class="register-link" style = "margin-left:325px">
-            <a href="#">Not registered yet? Register Here</a>
-          </div>
-          <div class="forgot-password" id="forgot-password-patient-portal"style = "margin-left:325px">
-            <a href="forgot-password.php">Forgot Your Password?</a>
+              <br>
+              <div class="textbox">
+                <i class="fas fa-lock" ></i>
+                <input type="password" placeholder="Password" name="password" required>
+              </div>
+              <br>
+              <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>
-        </form>
+        </div>
       </div>
-    </div>
-  </div>
-</section>
+    </section>
 
-<!-- Appointment Section -->
-<section id="appointment" class="appointment section-bg">
-   
-  <div class="container">
-    <div class="section-title">
-      <h2>Make an Appointment</h2>
-      <p>We listed the docs, we made you a form. You make us an appointment.</p>
-    
-    <!--<div class="layout">-->
-      <form action="successful_appointment.html" method="post" class="php-email-form">
-        
-          <div class="col-md-4 form-group">
-            <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required>
-          </div>
-          <br>
-          <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" required>
-          </div>
-          <br>
-          <div class="col-md-4 form-group mt-3">
-            <select name="location" id="location" class="form-select" required>
-              <option value="">Your Location</option>
-              <option value="Mumbai">Mumbai</option>
-              <option value="Delhi">Delhi</option>
-              <option value="Chennai">Chennai</option>
-              <!-- Add more locations as needed -->
-            </select>
-          </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" maxlength="10" minlength="10" pattern="[0-9]*" required>
-          </div>-->
-        <!--</div>-->
-        
-          <div class="col-md-4 form-group mt-3">
-            <input type="date" name="date" class="form-control datepicker" id="date" placeholder="Appointment Date" required>
-            <script>
-              // To set value of minimum date in calendar 
-              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>
 
-        <!-- Time Slot Section -->
-        
-          <div class="col-md-12 form-group mt-3">
-            <select name="time-slot" id="time-slot" class="form-select" required>
 
-      <!-- ############# Appointment Section ############# -->
+    <!-- Appointment Section -->
 <section id="appointment" class="appointment section-bg">
   <div class="container">
     <div class="section-title">
       <h2>Make an Appointment</h2>
-      <p>We listed the docs, we made you a form. You make us an appointment.</p><br><br>
+      <p>We listed the docs, we made you a form. You make us an appointment.</p>
     </div>
-    <div class="layout">
-      <form action="" 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" maxlength="10" minlength="10" pattern="[0-9]*">
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-md-4 form-group mt-3">
-            <input type="date" name="date" class="form-control datepicker" id="date" placeholder="Appointment Date">
-            <script>
-              //To set value of minimum date in calendar
-              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 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>
-        
-        
-                   
-        
-                    <!-- OPD Section -->
-                    
-          <div class="col-md-12 form-group mt-3">
+    <form action="successful_appointment.html" method="post" 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" required>
+        </div>
         
-            <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 class="col-md-4 form-group mt-3">
-            <select name="age" id="age" class="form-select" required>
-              <option value="">Select Age</option>
-              <option value="18 or below">18 or below</option>
-              <option value="18 to 55">18 to 55</option>
-              <option value="55 above">55 above</option>
-            </select>
-          </div>
-
-          <div class="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="col-md-4 form-group mt-3 mt-md-0">
+          <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
+        </div>
         
-                    
+        <div class="col-md-4 form-group mt-3">
+          <select name="location" id="location" class="form-select" required>
+            <option value="">Your Location</option>
+            <option value="Mumbai">Mumbai</option>
+            <option value="Delhi">Delhi</option>
+            <option value="Chennai">Chennai</option>
+            <!-- Add more locations as needed -->
+          </select>
+        </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>
+        <div class="col-md-4 form-group mt-3">
+          <input type="date" name="date" class="form-control datepicker" id="date" placeholder="Appointment Date" required>
+          <script>
+            // To set value of minimum date in calendar 
+            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" required>
+            <option value="">Select Age</option>
+            <option value="18 or below">18 or below</option>
+            <option value="18 to 55">18 to 55</option>
+            <option value="55 above">55 above</option>
+          </select>
         </div>
-      </form>
-    </div>
-  </div>
-  
-
-<!--<section id="hospital" class="hospital-section-bg">
 
+        <div class="col-md-4 form-group mt-3">
+          <select name="hospital" id="hospital" class="form-select" required>
+            <option value="">Select Hospital</option>
+            <option value="Hospital 1">Hospital 1</option>
+            <option value="Hospital 2">Hospital 2</option>
+            <option value="Hospital 3">Hospital 3</option>
+            <!-- Add more hospitals as needed -->
+          </select>
+        </div>
 
+        <div class="col-md-4 form-group mt-3">
+          <select name="opd-section" id="opd-section" class="form-select" required>
+            <option value="">Select OPD Section</option>
+            <option value="ENT">ENT</option>
+            <option value="Gynecologist">Gynecologist</option>
+            <!-- Add more OPD sections as needed -->
+          </select>
+        </div>
 
-            <!-- Hospital Selection Section -->
-            
-  
-         
+        <div class="col-md-12 form-group mt-3">
+          <select name="time-slot" id="time-slot" class="form-select" required>
+            <option value="">Select Time Slot</option>
+            <option value="9:00 AM">9:00 AM</option>
+            <option value="11:00 AM">11:00 AM</option>
+            <option value="2:00 PM">2:00 PM</option>
+            <!-- Add more time slots as needed -->
+          </select>
+        </div>
+      </div>
+      
+      <div class="text-center mt-3">
+        <button type="submit">Make an Appointment</button>
+      </div>
+    </form>
+  </div>
 </section><!-- End Appointment Section -->
 
 
 
-        </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>
+    <!-- ################# Doctors Section ################# -->
+    <section id="doctors" class="doctors">
+      <div class="section-title">
+        <h2 >Doctors</h2>
+        <p>Don’t compromise your health when we have listed the best doctors for you!</p>
+      </div>
+      <div class="container">
+        <div class="row">
+          <div class="col-lg-6">
+            <div class="member d-flex align-items-start">
+              <div class="pic"><img src="img/doctors/1.png" class="img-fluid" alt=""
+                  style="width: 188px; height: 188px;"></div>
+              <div class="member-info">
+                <h4>Dermatologist</h4>
+                <br>
+                <div class="nxt-pg"><a href="Html-Files/derma.html"><button type="">Appoint a Doctor</button></a></div>
+              </div>
+            </div>
           </div>
-        </div> -->
-
-        <!-- <div class="form-group mt-3">
-          <textarea class="form-control" name="message" rows="5" placeholder="Message (Optional)"></textarea>
-        </div> -->
-        <!-- <div class="text-center">
-          <a href="successful_appointment.html" style="text-decoration: none;">
-            <button type="submit">Make an Appointment</button>
-          </a>
-        </div> -->
-      </form>
-    </div>
-  </div>
-</section><!-- End Appointment Section -->
 
-<!-- ################# Doctors Section ################# -->
-<section id="doctors" class="doctors">
-  <div class="section-title">
-    <h2>Doctors</h2>
-    <p>Don’t compromise your health when we have listed the best doctors for you!</p>
-  </div>
-  <div class="container">
-    <div class="row">
-      <div class="col-lg-6">
-        <div class="member d-flex align-items-start">
-          <div class="pic"><img src="img/doctors/1.png" class="img-fluid" alt="" style="width: 188px; height: 188px;"></div>
-          <div class="member-info">
-            <h4>Dermatologist</h4>
-            <br>
-            <div class="nxt-pg"><a href="Html-Files/derma.html"><button type="">Appoint a Doctor</button></a></div>
+          <div class="col-lg-6 mt-4 mt-lg-0">
+            <div class="member d-flex align-items-start">
+              <div class="pic"><img src="img/doctors/2.png" class="img-fluid" alt=""></div>
+              <div class="member-info">
+                <h4>Gynecologist</h4>
+                <br>
+                <div class="nxt-pg"><a href="Html-Files/gynaco.html"><button type="">Appoint a Doctor</button></a></div>
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
 
-      <div class="col-lg-6 mt-4 mt-lg-0">
-        <div class="member d-flex align-items-start">
-          <div class="pic"><img src="img/doctors/2.png" class="img-fluid" alt=""></div>
-          <div class="member-info">
-            <h4>Gynecologist</h4>
-            <br>
-            <div class="nxt-pg"><a href="Html-Files/gynaco.html"><button type="">Appoint a Doctor</button></a></div>
+          <div class="col-lg-6 mt-4">
+            <div class="member d-flex align-items-start">
+              <div class="pic"><img src="img/doctors/3.png" class="img-fluid" alt=""
+                  style="width: 188px; height: 188px;"></div>
+              <div class="member-info">
+                <h4>Cardiologist</h4>
+                <br>
+                <div class="nxt-pg"><a href="Html-Files/cardio.html"><button type="">Appoint a Doctor</button></a></div>
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
 
-      <div class="col-lg-6 mt-4">
-        <div class="member d-flex align-items-start">
-          <div class="pic"><img src="img/doctors/3.png" class="img-fluid" alt="" style="width: 188px; height: 188px;"></div>
-          <div class="member-info">
-            <h4>Cardiologist</h4>
-            <br>
-            <div class="nxt-pg"><a href="Html-Files/cardio.html"><button type="">Appoint a Doctor</button></a></div>
+          <div class="col-lg-6 mt-4">
+            <div class="member d-flex align-items-start">
+              <div class="pic"><img src="img/doctors/4.png" class="img-fluid" alt=""
+                  style="width: 188px; height: 188px;"></div>
+              <div class="member-info">
+                <h4>ENT</h4>
+                <br>
+                <div class="nxt-pg"><a href="Html-Files/ent.html"><button type="">Appoint a Doctor</button></a></div>
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
 
-      <div class="col-lg-6 mt-4">
-        <div class="member d-flex align-items-start">
-          <div class="pic"><img src="img/doctors/4.png" class="img-fluid" alt="" style="width: 188px; height: 188px;"></div>
-          <div class="member-info">
-            <h4>ENT</h4>
-            <br>
-            <div class="nxt-pg"><a href="Html-Files/ent.html"><button type="">Appoint a Doctor</button></a></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="member-info">
+                <h4>Pediatrician</h4>
+                <br>
+                <div class="nxt-pg"><a href="Html-Files/pediatrition.html"><button type="">Appoint a Doctor</button></a>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
+    </section>
+    <!-- End Doctors Section -->
 
-      <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="member-info">
-            <h4>Pediatrician</h4>
-            <br>
-            <div class="nxt-pg"><a href="Html-Files/pediatrition.html"><button type="">Appoint a Doctor</button></a></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</section> 
-<!-- End Doctors Section -->
-
-<!-- ################# Contact Section ################# -->
-<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 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="row mt-2" style="display: flex; flex-direction: row; align-items: stretch; justify-content: space-around;">
-      <div class="col-lg-4">
-        <div class="info">
-          <div class="address">
-            <i class="fa fa-location-dot"></i>
-            <h4>Location:</h4>
-            <p><a href="https://www.google.com/maps/search/?api=1&query=IGDTUW,Delhi" target="_blank">IGDTUW, Delhi</a></p>
-          </div>
-          <div class="email">
-            <i class="fa fa-envelope"></i>
-            <h4>Email:</h4>
-            <p><a href="mailto:rapidoc@mail.com">rapidoc@mail.com</a></p>
-          </div>
-          <div class="phone">
-            <i class="fa fa-phone"></i>
-            <h4>Call:</h4>
-            <p><a href="tel:+91 1234567890">+91 1234567890</a></p>
-          </div>
-        </div>
+    <!-- ################# Contact Section ################# -->
+    <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 class="col-lg-8 mt-5 mt-lg-0">
-        <form id="contactForm" action="" role="form" class="php-email-form">
-          <div class="form-group">
-            <input type="text" name="name" class="form-control enhanced-input" id="name" placeholder="Your Name" required>
-          </div>
-          <div class="form-group mt-3">
-            <input type="email" class="form-control enhanced-input" name="email" id="email" placeholder="Your Email" required>
-          </div>
-          <div class="form-group mt-3">
-            <input type="text" class="form-control enhanced-input" name="subject" id="subject" placeholder="Subject" required>
+      <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="row mt-2"
+          style="display: flex; flex-direction: row; align-items: stretch; justify-content: space-around;">
+          <div class="col-lg-4">
+            <div class="info">
+              <div class="address">
+                <i class="fa fa-location-dot"></i>
+                <h4>Location:</h4>
+                <p><a href="https://www.google.com/maps/search/?api=1&query=IGDTUW,Delhi" target="_blank">IGDTUW,
+                    Delhi</a></p>
+              </div>
+              <div class="email">
+                <i class="fa fa-envelope"></i>
+                <h4>Email:</h4>
+                <p><a href="mailto:rapidoc@mail.com">rapidoc@mail.com</a></p>
+              </div>
+              <div class="phone">
+                <i class="fa fa-phone"></i>
+                <h4>Call:</h4>
+                <p><a href="tel:+91 1234567890">+91 1234567890</a></p>
+              </div>
+            </div>
           </div>
-          <div class="form-group mt-3">
-            <textarea class="form-control enhanced-textarea" name="message" rows="5" placeholder="Message" required></textarea>
+          <div class="col-lg-8 mt-5 mt-lg-0">
+            <form id="contactForm" action="" role="form" class="php-email-form">
+              <div class="form-group">
+                <input type="text" name="name" class="form-control enhanced-input" id="name" placeholder="Your Name"
+                  required>
+              </div>
+              <div class="form-group mt-3">
+                <input type="email" class="form-control enhanced-input" name="email" id="email" placeholder="Your Email"
+                  required>
+              </div>
+              <div class="form-group mt-3">
+                <input type="text" class="form-control enhanced-input" name="subject" id="subject" placeholder="Subject"
+                  required>
+              </div>
+              <div class="form-group mt-3">
+                <textarea class="form-control enhanced-textarea" name="message" rows="5" placeholder="Message"
+                  required></textarea>
+              </div>
+              <div class="text-center"><button type="submit" class="btn-submit">Send Message</button></div>
+            </form>
+            <div id="confirmationMessage" style="display:none; margin-top: 20px; color: green;">
+              Thank you for your message. We will get back to you shortly.
+            </div>
           </div>
-          <div class="text-center"><button type="submit" class="btn-submit">Send Message</button></div>
-        </form>
-        <div id="confirmationMessage" style="display:none; margin-top: 20px; color: green;">
-          Thank you for your message. We will get back to you shortly.
         </div>
       </div>
-    </div>
-  </div>
-</section>
+    </section>
 
-<style>
-  .enhanced-input {
-    padding: 10px;
-    border: 2px solid #ccc;
-    border-radius: 5px;
-    margin-bottom: 15px;
-  }
+    <style>
+      .enhanced-input {
+        padding: 10px;
+        border: 2px solid #ccc;
+        border-radius: 5px;
+        margin-bottom: 15px;
+      }
 
-  .enhanced-textarea {
-    padding: 10px;
-    border: 2px solid #ccc;
-    border-radius: 5px;
-    margin-bottom: 15px;
-    resize: vertical;
-  }
+      .enhanced-textarea {
+        padding: 10px;
+        border: 2px solid #ccc;
+        border-radius: 5px;
+        margin-bottom: 15px;
+        resize: vertical;
+      }
 
-  .btn-submit {
-    padding: 10px 20px;
-    background-color: #55a5ea;
-    border: none;
-    border-radius: 5px;
-    color: white;
-    cursor: pointer;
-  }
+      .btn-submit {
+        padding: 10px 20px;
+        background-color: #55a5ea;
+        border: none;
+        border-radius: 5px;
+        color: white;
+        cursor: pointer;
+      }
 
-  .btn-submit:hover {
-    background-color: #4cae4c;
-  }
-</style>
-
-<script>
-  document.getElementById('contactForm').addEventListener('submit', function(event) {
-    event.preventDefault(); // Prevent form submission
-    // Display confirmation message
-    document.getElementById('confirmationMessage').style.display = 'block';
-    // Reset the form
-    event.target.reset();
-  });
-</script>
+      .btn-submit:hover {
+        background-color: #4cae4c;
+      }
+    </style>
 
+    <script>
+      document.getElementById('contactForm').addEventListener('submit', function (event) {
+        event.preventDefault(); // Prevent form submission
+        // Display confirmation message
+        document.getElementById('confirmationMessage').style.display = 'block';
+        // Reset the form
+        event.target.reset();
+      });
+    </script>
 
 
-      
-          <!-- End Contact Section -->
+
+
+    <!-- End Contact Section -->
 
     <!-- testimonial section -->
 
     <section id="test" class="testimonals">
-      <h2 class="h2 section-title has-underline" style="margin-top: 15px;align-items: center; justify-content: center; display: flex;">
-          What our Patients Say
-        </h2>
-      
-          <div class="testimonals-content">
-          <div class="swiper testimonals-slider js-testimonals-slider">
+      <h2 class="h2 section-title has-underline"
+        style="margin-top: 15px;align-items: center; justify-content: center; display: flex; ">
+        What our Patients Say
+      </h2>
+
+      <div class="testimonals-content">
+        <div class="swiper testimonals-slider js-testimonals-slider">
           <div class="swiper-wrapper">
-          <div class="swiper-slide testimonals-item">
-          <div class="info">
-          <img src="./images/profile1.webp" alt="">
-          <div class="text-box">
-          <h3 class="name">Dinesh Karthik</h3>
-          <span class="job">Bangalore</span>
-          </div>
-          </div>
-          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod enim, architecto eum pariatur explicabo aliquam incidunt provident vero nostrum quam!</p>
-          <div class="rating">
-          <i class="fa fa-star"></i>
-          <i class="fa fa-star"></i>
-          <i class="fa fa-star"></i>
-          <i class="fa fa-star"></i>
-          <i class="fa fa-star"></i>
-          </div>
-          </div>
-      
-          <div class="swiper-slide testimonals-item">
-          <div class="info">
-          <img src="./images/profile2.webp" alt="">
-          <div class="text-box">
-          <h3 class="name">Virat Kohli</h3>
-          <span class="job">Delhi</span>
-          </div>
-          </div>
-          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod enim, architecto eum pariatur explicabo aliquam incidunt provident vero nostrum quam!</p>
-          <div class="rating">
-          <i class="fa fa-star"></i>
-          <i class="fa fa-star"></i>
-          <i class="fa fa-star"></i>
-          <i class="fa fa-star"></i>
-          </div>
-          </div>
-      
-          <div class="swiper-slide testimonals-item">
-          <div class="info">
-          <img src="./images/profile3.webp" alt="">
-          <div class="text-box">
-          <h3 class="name">Smrithi Mandanna</h3>
-          <span class="job">Mumbai</span>
-          </div>
-          </div>
-          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod enim, architecto eum pariatur explicabo aliquam incidunt provident vero nostrum quam!</p>
-          <div class="rating">
-          <i class="fa fa-star"></i>
-          <i class="fa fa-star"></i>
-          <i class="fa fa-star"></i>
-          <i class="fa fa-star"></i>
-          </div>
-          </div>
-      
-          <div class="swiper-slide testimonals-item">
-          <div class="info">
-          <img src="./images/profile4.webp" alt="">
-          <div class="text-box">
-          <h3 class="name">John Doe</h3>
-          <span class="job">Chennai</span>
-          </div>
-          </div>
-          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod enim, architecto eum pariatur explicabo aliquam incidunt provident vero nostrum quam!</p>
-          <div class="rating">
-          <i class="fa fa-star"></i>
-          <i class="fa fa-star"></i>
-          <i class="fa fa-star"></i>
-          <i class="fa fa-star"></i>
-          <i class="fa fa-star"></i>
-          </div>
-          </div>
-      
-          <div class="swiper-slide testimonals-item">
-          <div class="info">
-          <img src="./images/profile5.webp" alt="">
-          <div class="text-box">
-          <h3 class="name">Shikha Pandey</h3>
-          <span class="job">Kolkata</span>
-          </div>
-          </div>
-          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod enim, architecto eum pariatur explicabo aliquam incidunt provident vero nostrum quam!</p>
-          <div class="rating">
-          <i class="fa fa-star"></i>
-          <i class="fa fa-star"></i>
-          <i class="fa fa-star"></i>
-          <i class="fa fa-star"></i>
-          </div>
-          </div>
-          </div>
-          </div>
-          <div class="swiper-pagination js-testimonals-pagination"></div>
-          </div>
-          </div>
+            <div class="swiper-slide testimonals-item">
+              <div class="infoo">
+                <img src="./images/profile1.webp" alt="">
+                <div class="text-box">
+                  <h3 class="name">Dinesh Karthik</h3>
+                  <span class="job">Bangalore</span>
+                </div>
+              </div>
+              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod enim, architecto eum pariatur explicabo
+                aliquam incidunt provident vero nostrum quam!</p>
+              <div class="rating">
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+              </div>
+            </div>
+
+            <div class="swiper-slide testimonals-item">
+              <div class="infoo">
+                <img src="./images/profile2.webp" alt="">
+                <div class="text-box">
+                  <h3 class="name">Virat Kohli</h3>
+                  <span class="job">Delhi</span>
+                </div>
+              </div>
+              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod enim, architecto eum pariatur explicabo
+                aliquam incidunt provident vero nostrum quam!</p>
+              <div class="rating">
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+              </div>
+            </div>
+
+            <div class="swiper-slide testimonals-item">
+              <div class="info">
+                <img src="./images/profile3.webp" alt="">
+                <div class="text-box">
+                  <h3 class="name">Smrithi Mandanna</h3>
+                  <span class="job">Mumbai</span>
+                </div>
+              </div>
+              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod enim, architecto eum pariatur explicabo
+                aliquam incidunt provident vero nostrum quam!</p>
+              <div class="rating">
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+              </div>
+            </div>
+
+            <div class="swiper-slide testimonals-item">
+              <div class="info">
+                <img src="./images/profile4.webp" alt="">
+                <div class="text-box">
+                  <h3 class="name">John Doe</h3>
+                  <span class="job">Chennai</span>
+                </div>
+              </div>
+              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod enim, architecto eum pariatur explicabo
+                aliquam incidunt provident vero nostrum quam!</p>
+              <div class="rating">
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+              </div>
+            </div>
+
+            <div class="swiper-slide testimonals-item">
+              <div class="info">
+                <img src="./images/profile5.webp" alt="">
+                <div class="text-box">
+                  <h3 class="name">Shikha Pandey</h3>
+                  <span class="job">Kolkata</span>
+                </div>
+              </div>
+              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod enim, architecto eum pariatur explicabo
+                aliquam incidunt provident vero nostrum quam!</p>
+              <div class="rating">
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+                <i class="fa fa-star"></i>
+              </div>
+            </div>
           </div>
-          <div class="swiper-pagination js-testimonals-pagination"></div>
-                          </div>
-          </section>
+        </div>
+        <div class="swiper-pagination js-testimonals-pagination"></div>
+      </div>
+      </div>
+      </div>
+      <div class="swiper-pagination js-testimonals-pagination"></div>
+      </div>
+    </section>
 
-          <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
-<script>
-  const swiper = new Swiper('.js-testimonals-slider', {
-    grabCursor: true,
-    spaceBetween: 30,
-    pagination: {
-      el: '.js-testimonals-pagination',
-      clickable: true
-    },
-    breakpoints: {
-      767: {
-        slidesPerView: 2,
-      }
-    }
-  })
-</script>
+    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+    <script>
+      const swiper = new Swiper('.js-testimonals-slider', {
+        grabCursor: true,
+        spaceBetween: 30,
+        pagination: {
+          el: '.js-testimonals-pagination',
+          clickable: true
+        },
+        breakpoints: {
+          767: {
+            slidesPerView: 2,
+          }
+        }
+      })
+    </script>
 
 
-     <!-- testimonial section -->
+    <!-- testimonial section -->
 
 
     <!-- Feedback System-->
@@ -1204,12 +1170,12 @@ <h3 class="name">Shikha Pandey</h3>
         <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>
+          <button class=" normal">&#128578;</button>
+          <button class=" normal">&#128515;</button>
+          <button class=" normal">&#128519;</button>
+          <button class=" normal">&#128531;</button>
+          <button class=" normal">&#128532;</button>
+          <button class=" normal">&#128545;</button>
         </div>
         <p class="ques">What you want to say?</p>
         <textarea id="textarea" cols="20" rows="5"></textarea>
@@ -1227,123 +1193,136 @@ <h1>Give Us Your Valuable Feedback.</h1>
       </div>
       <div class="info">
         <div class="center">
-          <button class="btn button">Submit</button>
+          <button class=" submit_button">Submit</button>
         </div>
 
       </div>
     </section>
-	  <script>
-  function submitFeedback(event) {
-    event.preventDefault();
+    <script>
+      function submitFeedback(event) {
+        event.preventDefault();
 
-    // Get the feedback data
-    const feedbackText = document.getElementById('textarea').value;
-    const satisfaction = document.querySelector('input[name="satisfaction"]:checked');
+        // Get the feedback data
+        const feedbackText = document.getElementById('textarea').value;
+        const satisfaction = document.querySelector('input[name="satisfaction"]:checked');
 
-    if (!satisfaction) {
-      alert('Please select your satisfaction level.');
-      return;
-    }
+        if (!satisfaction) {
+          alert('Please select your satisfaction level.');
+          return;
+        }
 
-    // Here you would normally send the feedback to the server
-    // For this example, we'll just display a confirmation message
+        // Here you would normally send the feedback to the server
+        // For this example, we'll just display a confirmation message
 
-    // Display the confirmation message
-    const confirmationMessage = document.getElementById('confirmation-message');
-    confirmationMessage.style.display = 'block';
+        // Display the confirmation message
+        const confirmationMessage = document.getElementById('confirmation-message');
+        confirmationMessage.style.display = 'block';
 
-    // Reset the form
-    document.getElementById('textarea').value = '';
-    document.querySelector('input[name="satisfaction"]:checked').checked = false;
+        // Reset the form
+        document.getElementById('textarea').value = '';
+        document.querySelector('input[name="satisfaction"]:checked').checked = false;
 
-    // Hide the confirmation message after a few seconds
-    setTimeout(() => {
-      confirmationMessage.style.display = 'none';
-    }, 6000);
-  }
-</script>
+        // Hide the confirmation message after a few seconds
+        setTimeout(() => {
+          confirmationMessage.style.display = 'none';
+        }, 6000);
+      }
+    </script>
 
 
 
   </main><!-- End #main -->
   <!-- ############### Footer ############### -->
-<br><br><br><br><br><br>
+  <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="./index.html">Home</a></li>
-                        <li><a href="#about">About Us</a></li>
-                        <li><a href="./Html-Files/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</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>
-                </section>
-                <section>
-                  <h4>Legal</h4><br>
-                  <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>
-                </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="#">
-                    <input type="text" placeholder="Your email" required>
-                    <button type="submit">SUBSCRIBE</button>
-                  </form>
-                </section>
-            </div>
+      <div class="footer-columns">
+        <div class="other-columns">
+          <section>
+            <h4>Quick Links</h4><br>
+            <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">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</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>
+          </section>
+          <section>
+            <h4>Legal</h4><br>
+            <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>
+          </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="#">
+              <input type="text" placeholder="Your email" required>
+              <button type="submit">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.linkedin.com" target="_blank"><div><i class="fa-brands fa-linkedin"></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 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="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.linkedin.com" target="_blank">
+              <div><i class="fa-brands fa-linkedin"></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>
+  </footer>
 
   <div id="back-to-top-container">
     <div class="circle">
@@ -1395,30 +1374,30 @@ <h4>RAPIDOC Newsletter</h4><br>
 
   </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="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>
@@ -1428,60 +1407,89 @@ <h4>RAPIDOC Newsletter</h4><br>
   <script src="swiper/swiper-bundle.min.js"></script>
   <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="swiper-bundle.min.js"></script>
- 
+
   <script src="https://mediafiles.botpress.cloud/b1d766f9-2fd0-4a60-96bb-fc1f494d156c/webchat/config.js" defer></script>
   <script>
     window.embeddedChatbotConfig = {
-    chatbotId: "xjRGZgxJziSoHQ1T1twl6",
-    domain: "www.chatbase.co"
+      chatbotId: "xjRGZgxJziSoHQ1T1twl6",
+      domain: "www.chatbase.co"
     }
-    </script>
-    <script
-    src="https://www.chatbase.co/embed.min.js"
-    chatbotId="xjRGZgxJziSoHQ1T1twl6"
-    domain="www.chatbase.co"
-    defer>
-    </script>
+  </script>
+  <script src="https://www.chatbase.co/embed.min.js" chatbotId="xjRGZgxJziSoHQ1T1twl6" domain="www.chatbase.co" defer>
+  </script>
   <script>
-    ScrollReveal({ 
-        //reset: true ,
-        distance : '60px' ,
-        duration:2500,
-        delay:400
+    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' });
+    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>
-          <script>
+  <script>
 
-window.addEventListener("load", () => {
-  const loader = document.querySelector(".pre");
+    window.addEventListener("load", () => {
+      const loader = document.querySelector(".pre");
 
-  loader.classList.add("pre--hidden");
+      loader.classList.add("pre--hidden");
 
-  loader.addEventListener("transitionend", () => {
-  document.body.removeChild(loader);
-  });
-  });
+      loader.addEventListener("transitionend", () => {
+        document.body.removeChild(loader);
+      });
+    });
 
-  window.addEventListener("load", () => {
-  const loader = document.querySelector(".loader");
+    window.addEventListener("load", () => {
+      const loader = document.querySelector(".loader");
 
-  loader.classList.add("loader--hidden");
+      loader.classList.add("loader--hidden");
 
-  loader.addEventListener("transitionend", () => {
-  document.body.removeChild(loader);
-  });
-  });
+      loader.addEventListener("transitionend", () => {
+        document.body.removeChild(loader);
+      });
+    });
   </script>
+
+<script>   
+  document.addEventListener('DOMContentLoaded', function() {
+      const menuIcon = document.getElementById('menu-icon');
+      const navLinks = document.querySelector('.nav-item.navbar');
+  
+      if (menuIcon && navLinks) {
+          menuIcon.addEventListener('click', toggleMenu);
+         
+      } else {
+          console.error('Menu icon or nav links not found');
+      }
+  
+      function toggleMenu() {
+          navLinks.classList.toggle('show');
+          if (navLinks.classList.contains('show')) {
+              menuIcon.src = './Images/Close.svg';
+              disableScroll();
+          } else {
+              menuIcon.src = './Images/Menu.svg';
+              enableScroll();
+          }
+      }
+  
+      function disableScroll() {
+          document.body.style.overflow = "hidden";
+      }
+  
+      function enableScroll() {
+          document.body.style.overflow = "visible";
+      }
+  });
+</script>  
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
index a8df6978..2c954c51 100644
--- a/style.css
+++ b/style.css
@@ -23,44 +23,13 @@ h6 {
   font-family: "Raleway", sans-serif;
 }
 
-.nav_link li {
-  padding: 5px 20px;
-  display: inline-block;
-  color: white;
-}
-
-.nav_link li a {
-  transition: all 0.3s ease 0s;
-  color: white;
-}
-button {
-  position: relative;
-  border-radius: 10px;
-  border: 1px solid #4bb6b7;
-  background-color: #4bb6b7;
-  color: #fff;
-  font-size: 15px;
-  font-weight: 700;
-  margin: 8px;
-  padding: 8px 50px;
-  letter-spacing: 1px;
-  text-transform: capitalize;
-  transition: 0.3s ease-in-out;
-}
-
-.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-evenly; */
   justify-content: space-between;
   align-items: center;
   height: 60px;
@@ -68,26 +37,40 @@ button {
 }
 
 .container {
-  /* display: ; */
   font-family: sans-serif;
   padding-top: 80px;
   display: unset;
+
+  /* added */
+  display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    font-family: sans-serif;
+    padding-top: 80px;
+    width: 90%;
+    margin: auto;
+}
+
+/* added */
+.sec-img {
+  max-width: 100%;
+  height: auto;
+  margin-top: 20px;
 }
 
-/* .container a:hover {
-  text-decoration: underline 2px;
-} */
+
 
 .content {
   display: flex;
   flex-direction: column;
   padding-left: 50px;
-  /* justify-content: center;
-  align-items: center; */
+  align-items: center; 
+  padding: 20px;
 }
 
 .content h1 {
-  font-size: 80px;
+  font-size: 40px;
   color: #d9d9d9;
 }
 
@@ -109,6 +92,52 @@ button {
   color: #55a5ea;
 }
 
+
+/* added */
+.btn-get-started {
+  font-size: 20px;
+  color: white;
+  background-color: #55a5ea;
+  padding: 10px 20px;
+  border-radius: 5px;
+  text-decoration: none;
+  margin-top: 20px;
+}
+
+.btn-get-started:hover {
+  background-color: #007BFF;
+}
+
+/* Media Queries for Responsiveness */
+@media (min-width: 768px) {
+  .container {
+      flex-direction: row;
+      justify-content: space-between;
+      text-align: left;
+  }
+
+  .content {
+      align-items: flex-start;
+      padding-left: 50px;
+  }
+
+  .content h1 {
+      font-size: 65px;
+  }
+
+  .sec-img {
+      margin-top: 0;
+      max-width: 50%;
+  }
+}
+
+@media (min-width: 440px) {
+  .content h1 {
+      font-size: 50px;
+  }
+}
+
+
 .container-head {
   display: grid;
   align-items: center;
@@ -142,7 +171,7 @@ button {
 */
 .appointment-btn {
   /* /* margin-left: 60rem; */
-  margin-top: 1rem; 
+  margin-top: 7rem; 
   background: #55a5ea;
   color: #fff;
   border-radius: 50px;
@@ -165,147 +194,282 @@ button {
   .appointment-btn {
     margin: 0 15px 0 0;
     padding: 6px 18px;
-  }
+    margin-top: 45px;
+    }
+}
+@media (max-width: 425px) {
+  .appointment-btn {
+    margin: 0 15px 0 0;
+    padding: 6px 18px;
+    margin-top: 65px;
+    }
+}
+@media (max-width: 325px) {
+  .appointment-btn {
+    margin: 0 15px 0 0;
+    padding: 6px 18px;
+    margin-top: 45px;
+    }
 }
-
 /*################----Navigation----################*/
 
-.navbar {
-  padding: 0;
+/* addede */
+
+.nav_menu {
+  background-color: #022a2d;
+}
+nav {
+  display: flex;
+  align-items: center;
+  color: #000000;
+  padding: 5px 2px 2px 2px;
+  background-color: #ffffff;
+  position: fixed;
+  width: 100%;
+  z-index: 1;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  user-select: none;
+}
+nav ul {
+  display: flex;
+  align-items: center;
 }
 
-.navbar ul {
-  margin-left: 35rem;
-  margin-top: -3rem;
-  padding: 0;
+nav ul {
   display: flex;
-  list-style: none;
   align-items: center;
+  justify-content: space-between;
 }
 
-.navbar li {
-  position: relative;
+nav ul li {
+  margin-right: 20px;
+  color: white;
+}
+
+nav ul li a {
+  text-decoration: none;
+  transition: all 0.3s ease 0s;
+color: white;
 }
 
-.navbar > ul > li {
+nav ul li a:hover {
+  color: #55a5ea;
+}
+button {
   position: relative;
-  white-space: nowrap;
-  padding: 8px 0 8px 20px;
+  border-radius: 10px;
+  border: 1px solid #4bb6b7;
+  background-color: #4bb6b7;
+  color: #fff;
+  font-size: 15px;
+  font-weight: 700;
+  margin: 8px;
+  padding: 8px 50px;
+  letter-spacing: 1px;
+  text-transform: capitalize;
+  transition: 0.3s ease-in-out;
 }
+  
 
-.navbar a,
-.navbar a:focus {
+nav ul {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  font-size: 14px;
-  color: #fff;
-  white-space: nowrap;
-  transition: 0.3s;
-  border-bottom: 2px solid #fff;
-  padding: 5px 2px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
-.navbar a i,
-.navbar a:focus i {
-  font-size: 12px;
-  line-height: 0;
-  margin-left: 5px;
+nav ul li {
+  margin-right: 20px;
+  color: white;
 }
 
-.navbar a:hover,
-.navbar .active,
-.navbar .active:focus,
-.navbar li:hover > a {
-  color: #55a5ea;
-  border-color: #55a5ea;
-}
 
-#navbar li a {
-  color: white;
+.navbar-contact {
+  display: flex;
+  align-items: center;
 }
 
-#navbar a:hover {
-  color: #3fbcc0a4;
-  text-decoration: underline;
-  text-decoration-color: #3fbcc0a4;
+.navbar-contact a {
+  text-decoration: none;
+  color: #000000;
+  padding: 5px 20px;
 }
 
-/*################----Mobile Navigation----################*/
+.navbar-contact a:hover {
+  color: #222;
+  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
+}
+nav ul li.contact {
+  margin-top: 2px;
+}
+nav ul li.contact a i {
+  vertical-align: middle;
+}
+.navbar-icons {
+  color: #000000; 
+}
 
-.mobile-nav-toggle {
-  color: #fff;
-  font-size: 28px;
-  cursor: pointer;
+nav img {
   display: none;
-  line-height: 0;
-  transition: 0.5s;
+  cursor: pointer;
 }
 
-.mobile-nav-toggle.bi-x {
-  color: #fff;
+nav h1 {
+  font-size: 2rem;
+  padding-left: 5px;
+  margin: 0px;
+  color: white;
+  margin-bottom: 25px;
+}
+nav h1 :hover{
+  color: #55a5ea;
 }
 
-@media (max-width: 991px) {
-  .mobile-nav-toggle {
-    display: block;
-  }
-
-  .navbar ul {
-    display: none;
-  }
+nav a {
+  color: #000000;
+  text-decoration: none;
+  padding: 5px 20px;
+  position: relative;
+  font-size: 16.5px;
+  letter-spacing: 0.3px;
 }
 
-.navbar-mobile {
-  position: fixed;
-  overflow: hidden;
-  top: 0;
-  right: 0;
+nav a::after {
+  content: "";
+  position: absolute;
+  background-color: #435365;
+  height: 3px;
+  width: 0;
   left: 0;
-  bottom: 0;
-  background: rgba(28, 47, 65, 0.9);
-  transition: 0.3s;
-  z-index: 999;
+  bottom: -7px;
+  transition: 0.3s ease;
+  border-radius: 5px;
 }
 
-.navbar-mobile .mobile-nav-toggle {
-  position: absolute;
-  top: 15px;
-  right: 15px;
+nav ul {
+  list-style: none;
+  display: flex;
+  margin: 0;
+  padding: 0;
 }
 
-.navbar-mobile ul {
-  display: block;
-  position: absolute;
-  top: 55px;
-  right: 15px;
-  bottom: 15px;
-  left: 15px;
-  padding: 10px 0;
-  background-color: #000;
-  overflow-y: auto;
-  transition: 0.3s;
+nav ul li a:hover {
+  color: #007bff;
+  transition: all 0.5s ease;
 }
 
-.navbar-mobile > ul > li {
-  padding: 0;
+nav ul li a:hover::after {
+  width: 100%;
 }
 
-.navbar-mobile a {
-  padding: 10px 20px;
-  font-size: 15px;
-  color: #fff;
-  border: none;
+@media screen and (max-width: 885px) {
+  nav a {
+      font-size: 16px;
+      letter-spacing: 0;
+  }
+  
+}
+
+@media screen and (max-width: 1024px) {
+  nav img {
+      display: inline-block;
+      padding-right: 15px;
+  }
+
+  nav {
+      padding: 15px;
+  }
+
+  nav ul {
+      position: fixed;
+      top: 70px;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: #022a2d;
+      flex-direction: column;
+      text-align: center;
+      transition: left 0.3s ease;
+  }
+
+  nav ul.show {
+      left: 0;
+  }
+
+  nav ul li {
+      margin: 30px 0;
+  }
+
+  nav img {
+      display: block;
+  }
+
+  nav ul a {
+      color: #000000;
+      font-size: 20px;
+  }
+  nav ul li a:hover {
+      color: #55a5ea;
+    }
+    .menu-toggle {
+      display: block;
+      cursor: pointer;
+      margin-right: 15px;
+    }
+
+}
+
+/* added */
+@media screen and (max-width: 860px) {
+  nav img {
+      display: inline-block;
+      padding-right: 15px;
+  }
+}
+@media screen and (max-width: 860px) {
+  nav ul {
+      position: fixed;
+      top: 70px; 
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: #022a2d;
+      flex-direction: column;
+      text-align: center;
+      transition: left 0.3s ease;
+  }
+
+  nav ul.show {
+      left: 0;
+  }
+
+  nav ul li {
+      margin: 30px 0;
+  }
+
+  nav ul a {
+      color: #000000;
+      font-size: 20px;
+  }
 }
 
-.navbar-mobile a:hover,
-.navbar-mobile .active,
-.navbar-mobile li:hover > a {
-  color: #3fbcc0c6;
+
+nav ul li a {
+  text-decoration: none;
+  color: white;
+  padding: 5px 20px;
+  position: relative;
+  font-size: 13.5px; 
+  letter-spacing: 0.3px;
 }
 
-.navbar-mobile .getstarted {
-  margin: 15px;
+
+/* Example CSS for larger screens (greater than 1024px) */
+@media screen and (min-width: 1025px) {
+  #rd-logo {
+      display: inline-block;
+  }
 }
 
 /*################----Sections General----################*/
@@ -318,13 +482,11 @@ section {
 }
 
 .section-title {
-  /* text-align: left; */
   padding-left: 50px;
   padding-right: 50px;
   margin-left: 15%;
   margin-right: 15%;
   text-align: center;
-  /* text-align: left; */
 }
 
 .section-title h2 {
@@ -360,13 +522,6 @@ section {
 
 
 /*################----Home Section----################*/
-#home {
-  width: 100%;
-  height: 100vh;
-  background-color: #000;
-  background-size: cover;
-  margin-bottom: -200px;
-}
 
 #home .multiple-text {
   color: #55a5ea;
@@ -419,17 +574,9 @@ section {
   background: #55a5ea;
 }
 
-@media (min-width: 1024px) {
-  #home {
-    background-attachment: fixed;
-  }
-}
 
 @media (max-width: 992px) {
-  #home {
-    margin-bottom: 0;
-    height: 100vh;
-  }
+
 
   #home .container {
     padding-bottom: 63px;
@@ -447,12 +594,6 @@ section {
   }
 }
 
-@media (max-height: 600px) {
-  #home {
-    height: 110vh;
-  }
-}
-
 /*################----Featured----################*/
 
 .row {
@@ -987,97 +1128,130 @@ section {
 }
 
 
-
-
+/* added */
 
 /* Overall section styling */
 #appointment.appointment.section-bg {
- background-color:#022a2d;
+  background-color: #022a2d;
   padding: 50px 0;
   box-sizing: border-box;
   width: 90%;
   max-width: 900px;
+  margin: 0 auto;
 }
-/*################----Appointments----################*/
+
+/* Layout styling */
 .layout {
   background-color: #3fbcc051;
   border-radius: 30px;
   padding: 50px;
-  width: 90%;  /* Changed width to 90% for better responsiveness */
-  max-width: 1200px;  /* Added max-width for better control */
-
+  max-width: 1200px;
   margin: 0 auto;
-  padding: 20px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   text-align: center;
   margin-bottom: 7%;
-  border-radius: 20px;
-  display: grid;
-  width: 30;
 }
 
-
-
+/* Section title styling */
 .section-title p {
   color: #fff;
   text-align: center;
   font-size: 16px;
   margin-bottom: 30px;
+}
 
+/* Responsive heading styling */
+.section-title h2 {
+  color: #fff;
+  text-align: center;
+  margin-bottom: 20px;
+  font-size: 2.5em; /* Default font size */
 }
 
 
-/* Form styling */
-.php-email-form {
-  display: flex; 
-  flex-wrap: wrap; 
-  color: #badaf7;
-  
+@media (max-width: 425px) {
+  .section-title h2 {
+    font-size: 1em;
+    display: flex;
+    align-items: center;
+  }
 }
-
+@media (max-width: 325px) {
+  .section-title h2 {
+    font-size: 1em;
+    display: flex;
+    align-items: center;
+    margin-left: -80px;
+  }
+  .section-title p {
+    text-align: center;
+    color: white;
+    font-size: 20px;
+    margin-left: -80px;
+}
+.php-email-form {
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* Center the form horizontally */
+  width: 100%; /* Ensure form takes full width of the container */
+  max-width: 600px; /* Set a max width for larger screens */
+  margin: 0 auto; /* Center the form within its container */
+  padding: 0 20px; 
+}
+}
+@media (max-width: 1200px) {
+  .php-email-form {
+    max-width: 80%;
+  }
+}
+
+@media (max-width: 768px) {
+  .php-email-form {
+    max-width: 90%;
+  }
+}
+
+@media (max-width: 576px) {
+  .php-email-form {
+    max-width: 95%;
+  }
+}
+
+/* Form styling */
+.php-email-form {
+  display: flex;
+  flex-wrap: wrap;
+  color: #badaf7;
+}
+
 .appointment .php-email-form input,
 .appointment .php-email-form textarea,
 .appointment .php-email-form select {
-  display: block;  /* Added display block to ensure full-width elements */
-  margin: 10px auto;  /* Centering elements */
+  display: block;
+  margin: 20px auto;
   border-radius: 10px;
   box-shadow: none;
   font-size: 14px;
   background: #badaf7;
   padding: 10px !important;
   color: #6c757d;
-  width: 80%;  /* Adjusted width for better layout */
-
-}
-.col-md-4.form-group {
-
-
-  width: calc(50% - 15px);
-  
+  width: 100%;
 }
 
 .form-group {
   margin-bottom: 15px;
-  
-  width: calc(50% - 15px);
-  color: #badaf7;
-}
-.form-group.d-flex {
-  display: flex; 
-  flex-wrap: wrap;
-  color: #badaf7;
+  width: 100%;
 }
 
-
 .form-control,
 .form-select {
   border: 1px solid #ccc;
   padding: 10px;
   border-radius: 4px;
   height: 50px;
-  width: 50%;
-  
+  width: 100%;
 }
+
 .php-email-form .form-control,
 .php-email-form .form-select {
   background-color: #badaf7;
@@ -1087,7 +1261,7 @@ section {
 .form-select:focus {
   border-color: #999;
   outline: none;
-  color: #badaf7;
+  color: #6c757d;
 }
 
 /* Text area styling */
@@ -1097,15 +1271,16 @@ section {
 
 /* Submit button styling */
 .text-center button {
-  background-color:#55a5ea; 
+  background-color: #55a5ea;
   color: #000;
   padding: 10px 20px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   transition: 0.3s ease;
-  margin-left: 120px;
+  margin: 20px auto;
 }
+
 .appointment .php-email-form input:focus,
 .appointment .php-email-form textarea:focus,
 .appointment .php-email-form select:focus {
@@ -1121,7 +1296,6 @@ section {
   color: #fff;
   transition: 0.4s;
   border-radius: 50px;
-
 }
 
 .text-center button:hover {
@@ -1129,8 +1303,16 @@ section {
 }
 
 
-
-
+.appointment .php-email-form button[type="submit"] {
+  display: block;
+  margin: 20px auto;
+  background: hsla(182, 51%, 50%, 0.651);
+  border: 0;
+  padding: 10px 35px;
+  color: #fff;
+  transition: 0.4s;
+  border-radius: 50px;
+}
 
 
 /*################----Doctors----################*/
@@ -1143,6 +1325,9 @@ section {
 
 }
 
+.section-title{
+  margin-top: 7%;
+}
 .doctors .member {
   background: #111111;
   position: relative;
@@ -1610,22 +1795,7 @@ section {
 .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;
@@ -1907,18 +2077,55 @@ button {
 }
 
 /*? footer containers */
+
+.footer-bottom>small {
+  font-size: 1rem;
+  margin: 0 auto;
+  width: 100%
+}
+
+
+@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;
+  }
+}
+
+
+
+
+/* added */
+
 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;
@@ -1928,58 +2135,27 @@ footer {
   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 {
+.footer-columns {
   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;
+  width: 100%;
 }
 
-/* other columns */
-
 .other-columns {
-  display: inline-grid;
-  grid-template-columns: repeat(2, 1fr);
-  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 2rem 1rem;
+  width: 100%;
   padding-top: 2rem;
 }
 
 .other-columns ul {
   display: flex;
+  flex-direction: column;
   gap: 0.75rem;
   list-style-type: none;
   padding: 0;
   margin: 0;
-  flex-direction: column;
   font-weight: 600;
 }
 
@@ -1993,18 +2169,6 @@ footer {
   text-decoration: underline;
 }
 
-.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 */
 .footer-bottom {
   width: 100%;
   color: var(--text-color);
@@ -2013,109 +2177,2900 @@ footer {
 
 .footer-bottom-wrapper {
   display: flex;
+  flex-direction: column;
   max-width: 80rem;
   margin: 0 auto;
-  gap: 1rem;
   width: 100%;
-  flex-wrap: wrap;
-  justify-content: space-between;
+  gap: 1rem;
+  justify-content: center;
   align-items: center;
-  align-content: center;
   padding: 1rem;
+  text-align: center;
 }
 
 .footer-bottom small {
   font-size: 1rem;
-  display: inline;
-  white-space: nowrap;
+  white-space: wrap;
 }
 
-.footer-bottom-links {
-  list-style-type: none;
-  display: inline-flex;
-  flex-wrap: wrap;
+.social-wrapper {
+  display: flex;
   justify-content: center;
-  gap: 1rem;
+  gap: 0.5rem;
 }
 
-.footer-bottom-links a {
-  color: var(--link-color);
-  text-decoration: none;
-  white-space: nowrap;
+.social-links {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  
 }
 
-.footer-bottom-links a:hover {
-  color: var(--link-hover);
-  text-decoration: underline;
+.social-links a div i {
+  color: #afb6c7;
 }
 
-.footer-bottom>small {
-  font-size: 1rem;
-  margin: 0 auto;
-  width: 100%
+.social-links a div i:hover {
+  color: #fff;
 }
 
-/*? socials */
-.social-wrapper {
-  display: flex;
-  gap: 0.5rem;
-  margin: 0 auto;
+.follow-us {
+  font-family: sans-serif;
 }
 
-.social-links {
-  display: inline-flex;
-  gap: 0.5rem;
-  align-items: center;
+@media (min-width: 600px) {
+  .footer-bottom-wrapper {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+  .footer-bottom small {
+    font-size: smaller;
+  }
 }
 
-.social-links img {
-  width: 1.5rem;
-  height: 1.5rem;
-  transition: all 0.2s ease-in-out;
+@media (max-width: 600px) {
+  .footer-bottom-wrapper {
+    text-align: center;
+  }
 }
 
-.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 {
+
+/* feedback added */
+.feed {
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  align-items: center;
+  padding: 1rem;
 }
 
+.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;
+  margin: 50px auto;
+  width: 90%;
+  max-width: 800px;
+}
 
+.feedback h1 {
+  color: black;
+  font-size: 2rem;
+  margin-bottom: 0.3rem;
+  font-family: "Poppins", sans-serif;
+  text-align: center;
+}
 
-@media (min-width: 600px) {
-  .other-columns {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-  }
+.feedback p {
+  color: black;
+  font-size: 1.1rem;
+  font-family: "Poppins", sans-serif;
+  text-align: center;
+}
 
-  .footer-bottom-wrapper {
-      flex-direction: row;
-  }
-  .footer-bottom-wrapper small{
-    font-size: smaller;
-  }
-  .footer-bottom-links {
-      margin-left: 1.5rem;
-  }
+.emoji {
+  padding: 1rem 0;
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+  justify-items: center;
 }
 
-@media (max-width: 800px) {
-  .footer-top {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      text-align: center;
-      padding: 1rem 0.5rem 2rem 0.5rem;
-  }
-}
\ No newline at end of file
+.btn {
+  background-color: transparent;
+  border: none;
+  font-size: 2rem;
+  font-family: "Poppins", sans-serif;
+  transition: 0.2s ease-in;
+  cursor: pointer;
+}
+
+.btn:hover {
+  transform: scale(1.5);
+}
+
+.ques {
+  margin: 0.5rem 0;
+  text-align: center;
+}
+
+.feedback #textarea {
+  padding: 1rem;
+  width: 100%;
+  background-color: transparent;
+  border: 0.1rem solid black;
+  border-radius: 0.5rem;
+  color: black;
+  margin-bottom: 0.6rem;
+  resize: none;
+}
+
+.feedback #textarea:focus {
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+}
+
+.radiobtn {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  margin: 1rem 0;
+}
+
+.one {
+  display: flex;
+  align-items: center;
+}
+
+.input {
+  font-family: "Poppins", sans-serif;
+  font-size: 1rem;
+  appearance: none;
+  width: 2rem;
+  height: 2rem;
+  border: 0.1rem solid black;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 0.5rem;
+}
+
+.input::before {
+  content: " ";
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  transition: 0.2s;
+}
+
+.input:checked::before {
+  background-color: #1977cc;
+}
+
+.label {
+  color: black;
+  font-family: "Poppins", sans-serif;
+  font-size: 1.1rem;
+}
+
+.info {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin: 1rem 0;
+  margin-bottom: -20px;
+}
+
+.center {
+  width: 100%;
+  text-align: center;
+}
+
+.submit_button {
+  width: 50%;
+  max-width: 200px;
+  background-color: white;
+  border-radius: 0.5rem;
+  border: none;
+  font-size: 1.4rem;
+  font-family: "Poppins", sans-serif;
+  padding: 1rem 2rem;
+  cursor: pointer;
+  color: #000;
+  transition: background-color 0.2s, transform 0.2s;
+}
+
+.submit_button:active {
+  background-color: white;
+  transform: scale(1);
+}
+
+.bsubmit_button:hover {
+  background-color: rgb(63, 155, 124);
+}
+
+@media (min-width: 600px) {
+  .feedback {
+    padding: 2rem 4rem;
+    width: 60%;
+  }
+
+  .submit_button {
+    width: 15%;
+  }
+}
+
+@media (max-width: 600px) {
+  .feedback {
+    width: 95%;
+    padding: 1rem;
+  }
+
+  .submit_button {
+    width: 100%;
+  }
+
+  .emoji {
+    grid-template-columns: repeat(1, 1fr);
+    justify-content: center;
+  }
+}
+@media screen and (max-width : 768px) {
+  .emoji {
+    grid-template-columns: repeat(2, 1fr);
+    margin-right: 25px;
+  }
+}
+@media screen and (max-width: 960px) and (min-width:600px){
+  .submit_button {
+    width: 100%;
+  }
+}
+
+
+
+
+/* added  */
+/* Contact Section */
+.contact {
+  padding: 40px 0;
+}
+
+.section-title {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.section-title h2 {
+  font-size: 36px;
+}
+
+.section-title p {
+  font-size: 18px;
+}
+
+.mapouter {
+  position: relative;
+  text-align: right;
+  width: 100%;
+  height: 363px;
+  margin-bottom: 20px; /* Added margin for better spacing */
+}
+
+.gmap_canvas {
+  overflow: hidden;
+  background: none !important;
+  width: 100%;
+  height: 363px;
+}
+
+.gmap_iframe {
+  height: 363px !important;
+}
+
+
+.info h4 {
+  font-size: 20px;
+
+}
+
+.info p {
+  margin-bottom: 20px;
+}
+
+.info i {
+  font-size: 24px;
+  color: #198754;
+}
+
+form {
+  background-color: #f8f9fa;
+  padding: 30px;
+  border-radius: 10px;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-control {
+  padding: 15px;
+  border: 1px solid #ced4da;
+  border-radius: 5px;
+}
+
+.textarea {
+  resize: vertical;
+}
+
+.btn-submit {
+  padding: 15px 30px;
+  border: none;
+  border-radius: 5px;
+  color: #fff;
+  cursor: pointer;
+}
+
+
+
+
+
+
+
+/* added */
+
+body {
+  font-family: "Open Sans", sans-serif;
+  color: #fff;
+  background-color: #000;
+}
+
+a {
+  color: #ffffff;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #55a5ea;
+  text-decoration: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Raleway", sans-serif;
+}
+
+
+
+.header_container {
+
+  background-color: #022a2d;
+  opacity: 0.9;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: 60px;
+  margin: auto;
+}
+
+.container {
+  font-family: sans-serif;
+  padding-top: 80px;
+  display: unset;
+
+  /* added */
+  display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    font-family: sans-serif;
+    padding-top: 80px;
+    width: 90%;
+    margin: auto;
+}
+
+/* added */
+.sec-img {
+  max-width: 100%;
+  height: auto;
+  margin-top: 20px;
+}
+
+
+
+.content {
+  display: flex;
+  flex-direction: column;
+  padding-left: 50px;
+  align-items: center; 
+  padding: 20px;
+}
+
+.content h1 {
+  font-size: 40px;
+  color: #d9d9d9;
+}
+
+.content h1 span {
+  color: #55a5ea;
+}
+
+.content h2 {
+  font-size: 20px;
+  margin-top: 30px;
+  padding-right: 40px;
+  line-height: 1.5;
+  color: #d9d9d9;
+}
+
+.content h2 a {
+  display: inline;
+  font-size: xx-large;
+  color: #55a5ea;
+}
+
+
+/* added */
+.btn-get-started {
+  font-size: 20px;
+  color: white;
+  background-color: #55a5ea;
+  padding: 10px 20px;
+  border-radius: 5px;
+  text-decoration: none;
+  margin-top: 20px;
+}
+
+.btn-get-started:hover {
+  background-color: #007BFF;
+}
+
+/* Media Queries for Responsiveness */
+@media (min-width: 768px) {
+  .container {
+      flex-direction: row;
+      justify-content: space-between;
+      text-align: left;
+  }
+
+  .content {
+      align-items: flex-start;
+      padding-left: 50px;
+  }
+
+  .content h1 {
+      font-size: 65px;
+  }
+
+  .sec-img {
+      margin-top: 0;
+      max-width: 50%;
+  }
+}
+
+@media (min-width: 440px) {
+  .content h1 {
+      font-size: 50px;
+  }
+}
+
+
+.container-head {
+  display: grid;
+  align-items: center;
+  grid-template-columns: 1fr 2fr 13fr 3fr;
+  margin-top: 0px;
+}
+
+/*---------------------parallax effect after about------------*/
+.parallax-container {
+  height: 100vh;
+  overflow: hidden;
+  transform: translateY(0);
+  transition: transform 0.5s ease;
+}
+
+.icon-boxes {
+  position: relative;
+  z-index: 1;
+}
+
+.icon-box {
+  background-color: rgba(255, 255, 255, 0.9);
+  padding: 20px;
+  margin-bottom: 20px;
+  border-radius: 10px;
+  z-index: -1;
+}
+
+/**
+* Appointment Button *
+*/
+.appointment-btn {
+  /* /* margin-left: 60rem; */
+  margin-top: 7rem; 
+  background: #55a5ea;
+  color: #fff;
+  border-radius: 50px;
+  padding: 8px 25px;
+  white-space: nowrap;
+  transition: 0.3s;
+  font-size: 16px;
+  font-weight: 600;
+  /* z-index: -1; */
+  display: inline-block;
+}
+
+.appointment-btn:hover {
+  background: #55a5ea;
+  z-index: -1;
+  color: #fff;
+}
+
+@media (max-width: 768px) {
+  .appointment-btn {
+    margin: 0 15px 0 0;
+    padding: 6px 18px;
+    margin-top: 45px;
+    }
+}
+@media (max-width: 425px) {
+  .appointment-btn {
+    margin: 0 15px 0 0;
+    padding: 6px 18px;
+    margin-top: 65px;
+    }
+}
+@media (max-width: 325px) {
+  .appointment-btn {
+    margin: 0 15px 0 0;
+    padding: 6px 18px;
+    margin-top: 45px;
+    }
+}
+/*################----Navigation----################*/
+
+/* addede */
+
+.nav_menu {
+  background-color: #022a2d;
+}
+nav {
+  display: flex;
+  /* justify-content: space-between; */
+  align-items: center;
+  color: #000000;
+  padding: 5px 2px 2px 2px;
+  background-color: #ffffff;
+  position: fixed;
+  width: 100%;
+  z-index: 1;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  user-select: none;
+}
+nav ul {
+  display: flex;
+  align-items: center;
+}
+
+nav ul {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+nav ul li {
+  margin-right: 20px;
+  color: white;
+}
+
+nav ul li a {
+  text-decoration: none;
+  transition: all 0.3s ease 0s;
+color: white;
+}
+
+nav ul li a:hover {
+  color: #55a5ea;
+}
+button {
+  position: relative;
+  border-radius: 10px;
+  border: 1px solid #4bb6b7;
+  background-color: #4bb6b7;
+  color: #fff;
+  font-size: 15px;
+  font-weight: 700;
+  margin: 8px;
+  padding: 8px 50px;
+  letter-spacing: 1px;
+  text-transform: capitalize;
+  transition: 0.3s ease-in-out;
+}
+  
+
+nav ul {
+  display: flex;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+nav ul li {
+  margin-right: 20px; 
+  color: white;
+}
+
+.navbar-contact {
+  display: flex;
+  align-items: center;
+}
+
+.navbar-contact a {
+  text-decoration: none;
+  color: #000000;
+  padding: 5px 20px;
+}
+
+.navbar-contact a:hover {
+  color: #222;
+  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
+}
+nav ul li.contact {
+  margin-top: 2px; /
+}
+nav ul li.contact a i {
+  vertical-align: middle;
+}
+.navbar-icons {
+  color: #000000;
+}
+
+nav img {
+  display: none;
+  cursor: pointer;
+}
+
+nav h1 {
+  font-size: 2rem;
+  padding-left: 5px;
+  margin: 0px;
+  color: white;
+  margin-bottom: 25px;
+}
+nav h1 :hover{
+  color: #55a5ea;
+}
+
+nav a {
+  color: #000000;
+  text-decoration: none;
+  padding: 5px 20px;
+  position: relative;
+  font-size: 16.5px;
+  letter-spacing: 0.3px;
+}
+
+nav a::after {
+  content: "";
+  position: absolute;
+  background-color: #435365;
+  height: 3px;
+  width: 0;
+  left: 0;
+  bottom: -7px;
+  transition: 0.3s ease;
+  border-radius: 5px;
+}
+
+nav ul {
+  list-style: none;
+  display: flex;
+  margin: 0;
+  padding: 0;
+}
+
+nav ul li a:hover {
+  color: #007bff;
+  transition: all 0.5s ease;
+}
+
+nav ul li a:hover::after {
+  width: 100%;
+}
+
+@media screen and (max-width: 885px) {
+  nav a {
+      font-size: 16px;
+      letter-spacing: 0;
+  }
+  
+}
+
+@media screen and (max-width: 1024px) {
+  nav img {
+      display: inline-block;
+      padding-right: 15px;
+  }
+
+  nav {
+      padding: 15px;
+      /* position: relative; */
+  }
+
+  nav ul {
+      position: fixed;
+      top: 70px;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: #022a2d;
+      flex-direction: column;
+      text-align: center;
+      transition: left 0.3s ease;
+  }
+
+  nav ul.show {
+      left: 0;
+  }
+
+  nav ul li {
+      margin: 30px 0;
+  }
+
+  nav img {
+      display: block;
+  }
+
+  nav ul a {
+      color: #000000;
+      font-size: 20px;
+  }
+  nav ul li a:hover {
+      color: #55a5ea;
+    }
+
+}
+
+/* added */
+@media screen and (max-width: 860px) {
+  nav img {
+      display: inline-block;
+      padding-right: 15px;
+  }
+}
+@media screen and (max-width: 860px) {
+  nav ul {
+      position: fixed;
+      top: 70px; 
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: #022a2d;
+      flex-direction: column;
+      text-align: center;
+      transition: left 0.3s ease;
+  }
+
+  nav ul.show {
+      left: 0;
+  }
+
+  nav ul li {
+      margin: 30px 0;
+  }
+
+  nav ul a {
+      color: #000000;
+      font-size: 20px;
+  }
+}
+
+
+nav ul li a {
+  text-decoration: none;
+  color: white;
+  padding: 5px 20px;
+  position: relative;
+  font-size: 13.5px;
+  letter-spacing: 0.3px;
+}
+
+
+
+
+
+/* Example CSS for larger screens (greater than 1024px) */
+@media screen and (min-width: 1025px) {
+  #rd-logo {
+      display: inline-block; 
+  }
+}
+
+/*################----Sections General----################*/
+section {
+  overflow: hidden;
+}
+
+.section-bg {
+  background-color: #000;
+}
+
+.section-title {
+  /* text-align: left; */
+  padding-left: 50px;
+  padding-right: 50px;
+  margin-left: 15%;
+  margin-right: 15%;
+  text-align: center;
+  /* text-align: left; */
+}
+
+.section-title h2 {
+  font-size: 32px;
+  font-weight: bold;
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  position: relative;
+  color: #fff;
+}
+
+.section-title h2::before {
+  content: "";
+  position: absolute;
+  display: block;
+  width: 120px;
+  height: 1px;
+  background: #000;
+  bottom: 1px;
+  left: calc(50% - 60px);
+}
+
+.section-title h2::after {
+  content: "";
+  position: absolute;
+  display: block;
+  width: 40px;
+  height: 3px;
+  background: #55a5ea;
+  bottom: 0;
+  left: calc(50% - 20px);
+}
+
+
+/*################----Home Section----################*/
+/* #home {
+  width: 100%;
+  height: 100vh;
+  background-color: #000;
+  background-size: cover;
+  margin-bottom: -200px;
+} */
+
+#home .multiple-text {
+  color: #55a5ea;
+}
+
+#home .container {
+  position: relative;
+  margin-top: 150px;
+}
+
+#home h1 {
+  margin: 0;
+  font-size: 48px;
+  font-weight: 700;
+  line-height: 56px;
+  color: #fff;
+}
+
+#home h2 {
+  color: #fff;
+  margin: 10px 0 0 0;
+  font-size: 22px;
+}
+
+#home .btn-get-started {
+  font-family: "Raleway", sans-serif;
+  text-transform: uppercase;
+  font-weight: 600;
+  font-size: 18px;
+  letter-spacing: 1px;
+  display: inline-block;
+  padding: 12px 35px;
+  margin-top: 30px;
+  border-radius: 50px;
+  transition: 0.5s;
+  color: #fff;
+  background: #55a5ea;
+}
+
+#home video {
+  margin-top: -70px;
+  margin-left: 50px;
+  height: 900px;
+  position: absolute;
+  top: 200px;
+  left: 550px;
+}
+
+#home .btn-get-started:hover {
+  background: #55a5ea;
+}
+
+/* @media (min-width: 1024px) {
+  #home {
+    background-attachment: fixed;
+  }
+} */
+
+@media (max-width: 992px) {
+  /* #home {
+    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;
+    margin-bottom: 30px;
+  }
+}
+
+@media (max-height: 600px) {
+  /* #home {
+    height: 110vh;
+  } */
+}
+
+/*################----Featured----################*/
+
+.row {
+  display: flex;
+  justify-content: center;
+}
+
+.featured-services .icon-box {
+  z-index: -1;
+  width: 290px;
+  height: 327px;
+  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: 50px;
+  z-index: 1;
+  transform: translateY(0);
+  transition: transform 0.5s ease;
+}
+
+.featured-services .icon-box::before {
+  z-index: -1;
+  content: "";
+  position: absolute;
+  background: #000;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  top: 100%;
+  transition: all 0.5s;
+  z-index: -1;
+}
+
+.featured-services .icon-box:hover::before {
+  z-index: -1;
+  background: #3fbcc051;
+  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: #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: #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: #55a5ea;
+  transition: all 0.3s ease-in-out;
+}
+
+.featured-services .title {
+  font-weight: 700;
+  margin-bottom: 15px;
+  font-size: 18px;
+}
+
+.featured-services .title a {
+  color: #eee;
+}
+
+.featured-services .description {
+  font-size: 15px;
+  line-height: 28px;
+  margin-bottom: 0;
+}
+
+.featured-services .icon-box:hover .title a,
+.featured-services .icon-box:hover .description {
+  color: #f7f4f4;
+}
+
+.featured-services .icon-box:hover .icon1 i {
+  color: red;
+}
+
+.featured-services .icon-box:hover .icon2 i {
+  color: rgb(235, 17, 235);
+}
+
+.featured-services .icon-box:hover .icon3 i {
+  color: orange;
+}
+
+.featured-services .icon-box:hover .icon4 i {
+  color: greenyellow;
+}
+
+/*################----About----################*/
+.about .icon-boxes h4 {
+  z-index: -1;
+  font-size: 18px;
+  color: #55a5ea;
+  margin-bottom: 15px;
+}
+
+.about .icon-boxes h3 {
+  z-index: -1;
+  font-size: 28px;
+  font-weight: 700;
+  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 #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 {
+  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;
+  font-weight: 600;
+}
+
+.about .icon-box .title a:hover {
+  z-index: -1;
+  color: #55a5ea;
+}
+
+.about .icon-box .description {
+  z-index: -1;
+  margin-left: 85px;
+  line-height: 24px;
+  font-size: 14px;
+}
+
+.about .video-box {
+  z-index: -1;
+  background: url("../img/about.png") center center no-repeat;
+  background-size: cover;
+  height: 300px;
+  top: 50px;
+}
+
+.about .play-btn {
+  width: 94px;
+  z-index: -1;
+  height: 94px;
+  background: radial-gradient(#55a5ea 50%, rgba(4, 196, 234, 0.4) 52%);
+  border-radius: 50%;
+  display: block;
+  position: absolute;
+  left: calc(50% - 47px);
+  top: calc(50% - 47px);
+  overflow: hidden;
+}
+
+.about .play-btn::after {
+  z-index: -1;
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-40%) translateY(-50%);
+  width: 0;
+  height: 0;
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+  border-left: 15px solid #fff;
+  z-index: 100;
+  transition: all 0.5s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+}
+
+.about .play-btn::before {
+  z-index: -1;
+  content: "";
+  position: absolute;
+  width: 120px;
+  height: 120px;
+  opacity: 1;
+  border-radius: 50%;
+  border: 5px solid rgba(149, 168, 184, 0.7);
+  top: -15%;
+  left: -15%;
+  background: rgba(198, 16, 0, 0);
+}
+
+.about .play-btn:hover::after {
+  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%;
+  transform: translateX(-40%) translateY(-50%);
+  width: 0;
+  height: 0;
+  border: none;
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+  border-left: 15px solid #fff;
+  z-index: 200;
+  -webkit-animation: none;
+  animation: none;
+  border-radius: 0;
+}
+
+@-webkit-keyframes pulsate-btn {
+  0% {
+    transform: scale(0.6, 0.6);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(1, 1);
+    opacity: 0;
+  }
+}
+
+@keyframes pulsate-btn {
+  0% {
+    transform: scale(0.6, 0.6);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(1, 1);
+    opacity: 0;
+  }
+}
+
+/*################----Counts----################*/
+
+.counts {
+  display: flex;
+  flex-direction: row;
+  margin: 30px;
+}
+
+.counts .count-box {
+  margin-top: 17px;
+  flex: 15%;
+  z-index: -1;
+  width: 280px;
+  height: 300px;
+  margin-left: 25px;
+  margin-right: 15px;
+  padding: 53px;
+  position: relative;
+  overflow: hidden;
+  background: #1c413b;
+  box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12);
+  border-radius: 50px;
+}
+
+.row {
+  padding-left: 33px;
+  --bs-gutter-x: 1.5rem;
+  --bs-gutter-y: 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc(var(--bs-gutter-y)* -2);
+  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 {
+  font-size: 30px;
+  color: #fcfcfc;
+  float: left;
+}
+
+.counts .count-box span {
+  font-size: 42px;
+  line-height: 24px;
+  display: inline-block;
+  font-weight: 700;
+  color: #f9f4f4;
+  margin-left: 50px;
+}
+
+.container .drop .content span {
+  font-size: 42px;
+  line-height: 24px;
+  display: inline-block;
+  font-weight: 700;
+  color: #faf8f8;
+}
+
+.container .drop .content p {
+  font-size: 30px;
+  line-height: 24px;
+  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; */
+  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; */
+  color: #faf8f8;
+  font-size: 15px;
+  font-family: "Poppins", sans-serif;
+  transition: ease-in-out 0.3s;
+}
+
+.counts .count-box a:hover {
+  color: #55a5ea;
+}
+
+/*################----Services----################*/
+.services .icon-box {
+  text-align: center;
+  margin-left: 80px;
+  margin-right: 80px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #0a0a0a;
+  padding: 30px 20px;
+  transition: all ease-in-out 0.3s;
+  background-color: #1c413b;
+}
+
+.services .icon-box .icon {
+  margin: 0 auto;
+  width: 64px;
+  height: 64px;
+  background: #1977cc;
+  border-radius: 5px;
+  transition: all 0.3s ease-out 0s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+  transform-style: preserve-3d;
+}
+
+.services .icon-box .icon i {
+  color: #060606;
+  font-size: 28px;
+}
+
+.services .icon-box .icon::before {
+  position: absolute;
+  content: "";
+  left: -8px;
+  top: -8px;
+  height: 100%;
+  width: 100%;
+  background: #badaf7;
+  border-radius: 5px;
+  transition: all 0.3s ease-out 0s;
+  transform: translateZ(-1px);
+}
+
+.services .icon-box h4 {
+  font-weight: 700;
+  margin-bottom: 15px;
+  font-size: 24px;
+}
+
+.services .icon-box h4 a {
+  color: #55a5ea;
+}
+
+.services .icon-box p {
+  line-height: 24px;
+  font-size: 14px;
+  margin-bottom: 0;
+}
+
+.services .container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  /* gap: 20px; */
+  margin-top: 8px;
+}
+
+.services .icon-box:hover {
+  background: #55a5ea;
+  border-color: #3fbbc0;
+}
+
+.services .icon-box:hover .icon {
+  background: #0f0f0f;
+}
+
+.services .icon-box:hover .icon i {
+  color: #1977cc;
+}
+
+.services .icon-box:hover .icon::before {
+  background: #3291e6;
+}
+
+.services .icon-box:hover h4 a,
+.services .icon-box:hover p {
+  color: #111111;
+}
+
+/* Styles for medium screens */
+@media (max-width: 991px) {
+  .services .container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* Styles for smaller screens */
+@media (max-width: 767px) {
+  .services .container {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Additional smaller adjustments */
+@media (max-width: 575px) {
+  .services .icon-box {
+    padding: 20px;
+  }
+  .services .icon i {
+    font-size: 30px;
+  }
+}
+
+
+/* added */
+
+/* Overall section styling */
+#appointment.appointment.section-bg {
+  background-color: #022a2d;
+  padding: 50px 0;
+  box-sizing: border-box;
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+/* Layout styling */
+.layout {
+  background-color: #3fbcc051;
+  border-radius: 30px;
+  padding: 50px;
+  max-width: 1200px;
+  margin: 0 auto;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  margin-bottom: 7%;
+}
+
+/* Section title styling */
+.section-title p {
+  color: #fff;
+  text-align: center;
+  font-size: 16px;
+  margin-bottom: 30px;
+}
+
+/* Responsive heading styling */
+.section-title h2 {
+  color: #fff;
+  text-align: center;
+  margin-bottom: 20px;
+  font-size: 2.5em; /* Default font size */
+}
+
+
+@media (max-width: 425px) {
+  .section-title h2 {
+    font-size: 1em;
+    display: flex;
+    align-items: center;
+  }
+}
+@media (max-width: 325px) {
+  .section-title h2 {
+    font-size: 1em;
+    display: flex;
+    align-items: center;
+    margin-left: -80px;
+  }
+  .section-title p {
+    text-align: center;
+    color: white;
+    font-size: 20px;
+    margin-left: -80px;
+}
+.php-email-form {
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* Center the form horizontally */
+  width: 100%; /* Ensure form takes full width of the container */
+  max-width: 600px; /* Set a max width for larger screens */
+  margin: 0 auto; /* Center the form within its container */
+  padding: 0 20px; 
+}
+}
+@media (max-width: 1200px) {
+  .php-email-form {
+    max-width: 80%;
+  }
+}
+
+@media (max-width: 768px) {
+  .php-email-form {
+    max-width: 90%;
+  }
+}
+
+@media (max-width: 576px) {
+  .php-email-form {
+    max-width: 95%;
+  }
+}
+
+/* Form styling */
+.php-email-form {
+  display: flex;
+  flex-wrap: wrap;
+  color: #badaf7;
+}
+
+.appointment .php-email-form input,
+.appointment .php-email-form textarea,
+.appointment .php-email-form select {
+  display: block;
+  margin: 20px auto;
+  border-radius: 10px;
+  box-shadow: none;
+  font-size: 14px;
+  background: #badaf7;
+  padding: 10px !important;
+  color: #6c757d;
+  width: 100%;
+}
+
+.form-group {
+  margin-bottom: 15px;
+  width: 100%;
+}
+
+.form-control,
+.form-select {
+  border: 1px solid #ccc;
+  padding: 10px;
+  border-radius: 4px;
+  height: 50px;
+  width: 100%;
+}
+
+.php-email-form .form-control,
+.php-email-form .form-select {
+  background-color: #badaf7;
+}
+
+.form-control:focus,
+.form-select:focus {
+  border-color: #999;
+  outline: none;
+  color: #6c757d;
+}
+
+/* Text area styling */
+.form-group textarea {
+  resize: none;
+}
+
+/* Submit button styling */
+.text-center button {
+  background-color: #55a5ea;
+  color: #000;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: 0.3s ease;
+  margin: 20px auto;
+}
+
+.appointment .php-email-form input:focus,
+.appointment .php-email-form textarea:focus,
+.appointment .php-email-form select:focus {
+  border-color: rgba(63, 188, 192, 0.651);
+}
+
+.appointment .php-email-form button[type="submit"] {
+  display: block;
+  margin: 20px auto;
+  background: hsla(182, 51%, 50%, 0.651);
+  border: 0;
+  padding: 10px 35px;
+  color: #fff;
+  transition: 0.4s;
+  border-radius: 50px;
+}
+
+.text-center button:hover {
+  background-color: #4bb6b7;
+}
+
+
+.appointment .php-email-form button[type="submit"] {
+  display: block;
+  margin: 20px auto;
+  background: hsla(182, 51%, 50%, 0.651);
+  border: 0;
+  padding: 10px 35px;
+  color: #fff;
+  transition: 0.4s;
+  border-radius: 50px;
+}
+
+
+/*################----Doctors----################*/
+
+.doctors {
+  background: #000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+}
+
+.section-title{
+  margin-top: 7%;
+}
+.doctors .member {
+  background: #111111;
+  position: relative;
+  border-radius: 10px;
+  padding: 30px;
+  margin: 10px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  width: 250px; 
+  box-sizing: border-box;
+}
+
+.doctors .member .pic {
+  overflow: hidden;
+  width: 180px;
+  border-radius: 50%;
+}
+
+.doctors .member .pic img {
+  transition: ease-in-out 0.3s;
+}
+
+.doctors .member:hover img {
+  transform: scale(1.1);
+}
+
+.doctors .member .member-info {
+  padding-top: 20px;
+}
+
+.doctors .member h4 {
+  font-weight: 700;
+  margin-bottom: 5px;
+  font-size: 20px;
+  color: #fff;
+}
+
+.doctors .member span {
+  display: block;
+  font-size: 15px;
+  padding-bottom: 10px;
+  position: relative;
+  font-weight: 500;
+}
+
+.doctors .member span::after {
+  content: "";
+  position: absolute;
+  display: block;
+  width: 50px;
+  height: 1px;
+  background: #fff;
+  bottom: 0;
+  left: 0;
+}
+
+.doctors .nxt-pg {
+  display: flex;
+  justify-content: center;
+  padding: 20px;
+}
+
+.doctors .nxt-pg button {
+  background: #55a5ea;
+  border: 0;
+  padding: 10px 35px;
+  transition: 0.4s;
+  width: 200px;
+  border-radius: 50px;
+  color: white;
+}
+
+.doctors .nxt-pg button:hover {
+  background: #55a5ea;
+}
+
+.contact .info {
+  width: 100%;
+  background: #0a0a0a;
+  border-radius: 15px;
+  padding: 15px;
+}
+
+.contact .info i {
+  font-size: 20px;
+  color: #1977cc;
+  float: left;
+  width: 44px;
+  height: 44px;
+  background: #0a0a0a;
+  border: 2px solid #55a5ea;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50px;
+  transition: all 0.5s ease-in-out;
+}
+
+.contact .info h4 {
+  padding: 0 0 0 60px;
+  font-size: 22px;
+  font-weight: 600;
+  margin-bottom: 5px;
+  color: #fff;
+}
+
+.contact .info p {
+  padding: 0 0 0 60px;
+  margin-bottom: 0;
+  font-size: 14px;
+  color: #fff;
+}
+
+.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: #55a5ea;
+}
+
+.contact .php-email-form {
+  width: 100%;
+  background: #000;
+}
+
+.contact .php-email-form .form-group {
+  padding-bottom: 8px;
+}
+
+.contact .php-email-form input,
+.contact .php-email-form textarea {
+  border-radius: 10px;
+  box-shadow: none;
+  font-size: 14px;
+}
+
+.contact .php-email-form input {
+  height: 44px;
+  width: 100%;
+}
+
+.contact .php-email-form textarea {
+  padding: 10px 12px;
+}
+
+.contact .php-email-form button[type="submit"] {
+  display: block;
+  margin: 20px auto;
+  background: #3fbcc0a6;
+  border: 0;
+  padding: 10px 35px;
+  color: #fff;
+  transition: 0.4s;
+  border-radius: 50px;
+}
+
+.contact .php-email-form button[type="submit"]:hover {
+  background: #55a5ea;
+}
+
+@-webkit-keyframes animate-loading {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes animate-loading {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+
+/*################--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;
+  margin: 50px;
+  width: 60%;
+  margin-left: 250px;
+  padding: 20px;
+}
+
+.feedback h1 {
+  color: black;
+  font-size: 2rem;
+  margin-bottom: 0.3rem;
+  font-family: "Poppins", sans-serif;
+}
+
+.feedback p {
+  color: black;
+  font-size: 1.1rem;
+  font-family: "Poppins", sans-serif;
+}
+
+.emoji {
+  padding: 1rem 0;
+  width: 20%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.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 {
+  margin: 0.5rem 0;
+}
+
+.feedback #textarea {
+  padding: 1rem;
+  width: 80%;
+  background-color: transparent;
+  border: 0.1rem solid black;
+  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;
+  }
+}
+
+.radiobtn {
+  width: 40%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.one {
+  display: flex;
+}
+
+.input {
+  position: relative;
+  font-family: "Poppins", sans-serif;
+  font-size: 1rem;
+  appearance: none;
+  width: 2rem;
+  height: 2rem;
+  border: 0.1rem solid black;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &::before {
+    content: " ";
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
+    transition: 0.2s;
+  }
+
+  &:checked::before {
+    background-color: #1977cc;
+  }
+}
+
+.label {
+  color: black;
+  font-family: "Poppins", sans-serif;
+  font-size: 1.1rem;
+  margin-left: 1rem;
+}
+
+.info {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  margin: 0.5rem 0;
+}
+
+.center {
+  margin-top: 2rem;
+  text-align: center;
+
+  .button {
+    width: 15%;
+    background-color: white;
+    border-radius: 0.5rem;
+    border: none;
+    font-size: 1.4rem;
+    font-family: "Poppins", sans-serif;
+    padding: 1rem 4rem;
+    cursor: pointer;
+    color: #000;
+  }
+
+  .button:active {
+    background-color: white;
+    transform: scale(1);
+  }
+
+  .button:hover {
+    background-color: rgb(63, 155, 124);
+  }
+}
+
+#footer {
+  background: #000;
+  padding: 0 0 30px 0;
+  color: #fff;
+  font-size: 14px;
+}
+
+#footer .footer-top {
+  background: #000;
+  padding: 60px 0 30px 0;
+}
+
+#footer .footer-top .footer-info {
+  margin-bottom: 30px;
+}
+
+#footer .footer-top .footer-info h3 {
+  font-size: 50px;
+  margin: 0 0 20px 0;
+  color: #57a6ea;
+  padding: 2px 0 2px 0;
+  line-height: 1;
+}
+
+#footer .footer-top .footer-info p {
+  font-size: 14px;
+  line-height: 24px;
+  margin-bottom: 0;
+  font-family: "Roboto", sans-serif;
+}
+
+#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");
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Open Sans", sans-serif;
+}
+
+.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;
+  }
+}
+
+#footer .footer-top .social-links a:hover {
+  background: #57a6ea;
+  text-decoration: none;
+}
+
+#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;
+  align-items: center;
+}
+
+#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----################*/
+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;
+}
+
+/* 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: hwb(181 16% 46%);
+  /* 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%);
+}
+
+
+: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);
+}
+
+
+@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;
+  }
+}
+
+
+
+
+/* added */
+
+footer {
+  bottom: 0;
+  background-color: var(--footer-bg);
+  width: 100%;
+  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-columns {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.other-columns {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 2rem 1rem;
+  width: 100%;
+  padding-top: 2rem;
+}
+
+.other-columns ul {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  font-weight: 600;
+}
+
+.other-columns ul a {
+  color: var(--text-color);
+  text-decoration: none;
+  font-size: 0.85rem;
+}
+
+.other-columns ul a:hover {
+  text-decoration: underline;
+}
+
+.footer-bottom {
+  width: 100%;
+  color: var(--text-color);
+  background-color: var(--footer-bottom-bg);
+}
+
+.footer-bottom-wrapper {
+  display: flex;
+  flex-direction: column;
+  max-width: 80rem;
+  margin: 0 auto;
+  width: 100%;
+  gap: 1rem;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+  text-align: center;
+}
+
+.footer-bottom small {
+  font-size: 1rem;
+  white-space: wrap;
+}
+
+.social-wrapper {
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.social-links {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  
+}
+
+.social-links a div i {
+  color: #afb6c7;
+}
+
+.social-links a div i:hover {
+  color: #fff;
+}
+
+.follow-us {
+  font-family: sans-serif;
+}
+
+@media (min-width: 600px) {
+  .footer-bottom-wrapper {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+  .footer-bottom small {
+    font-size: smaller;
+  }
+}
+
+@media (max-width: 600px) {
+  .footer-bottom-wrapper {
+    text-align: center;
+  }
+}
+
+
+
+
+/* feedback added */
+.feed {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1rem;
+}
+
+.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;
+  margin: 50px auto;
+  width: 90%;
+  max-width: 800px;
+}
+
+.feedback h1 {
+  color: black;
+  font-size: 2rem;
+  margin-bottom: 0.3rem;
+  font-family: "Poppins", sans-serif;
+  text-align: center;
+}
+
+.feedback p {
+  color: black;
+  font-size: 1.1rem;
+  font-family: "Poppins", sans-serif;
+  text-align: center;
+}
+
+.emoji {
+  padding: 1rem 0;
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+  justify-items: center;
+}
+
+.btn {
+  background-color: transparent;
+  border: none;
+  font-size: 2rem;
+  font-family: "Poppins", sans-serif;
+  transition: 0.2s ease-in;
+  cursor: pointer;
+}
+
+.btn:hover {
+  transform: scale(1.5);
+}
+
+.ques {
+  margin: 0.5rem 0;
+  text-align: center;
+}
+
+.feedback #textarea {
+  padding: 1rem;
+  width: 100%;
+  background-color: transparent;
+  border: 0.1rem solid black;
+  border-radius: 0.5rem;
+  color: black;
+  margin-bottom: 0.6rem;
+  resize: none;
+}
+
+.feedback #textarea:focus {
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+}
+
+.radiobtn {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  margin: 1rem 0;
+}
+
+.one {
+  display: flex;
+  align-items: center;
+}
+
+.input {
+  font-family: "Poppins", sans-serif;
+  font-size: 1rem;
+  appearance: none;
+  width: 2rem;
+  height: 2rem;
+  border: 0.1rem solid black;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 0.5rem;
+}
+
+.input::before {
+  content: " ";
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  transition: 0.2s;
+}
+
+.input:checked::before {
+  background-color: #1977cc;
+}
+
+.label {
+  color: black;
+  font-family: "Poppins", sans-serif;
+  font-size: 1.1rem;
+}
+
+.info {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin: 1rem 0;
+  margin-bottom: -20px;
+}
+
+.center {
+  width: 100%;
+  text-align: center;
+}
+
+.submit_button {
+  width: 50%;
+  max-width: 200px;
+  background-color: white;
+  border-radius: 0.5rem;
+  border: none;
+  font-size: 1.4rem;
+  font-family: "Poppins", sans-serif;
+  padding: 1rem 2rem;
+  cursor: pointer;
+  color: #000;
+  transition: background-color 0.2s, transform 0.2s;
+}
+
+.submit_button:active {
+  background-color: white;
+  transform: scale(1);
+}
+
+.bsubmit_button:hover {
+  background-color: rgb(63, 155, 124);
+}
+
+@media (min-width: 600px) {
+  .feedback {
+    padding: 2rem 4rem;
+    width: 60%;
+  }
+
+  .submit_button {
+    width: 15%;
+  }
+}
+
+@media (max-width: 600px) {
+  .feedback {
+    width: 95%;
+    padding: 1rem;
+  }
+
+  .submit_button {
+    width: 100%;
+  }
+
+  .emoji {
+    grid-template-columns: repeat(1, 1fr);
+    justify-content: center;
+  }
+}
+@media screen and (max-width : 768px) {
+  .emoji {
+    grid-template-columns: repeat(2, 1fr);
+    margin-right: 25px;
+  }
+}
+@media screen and (max-width: 960px) and (min-width:600px){
+  .submit_button {
+    width: 100%;
+  }
+}
+
+
+
+
+/* added  */
+/* Contact Section */
+.contact {
+  padding: 40px 0;
+}
+
+.section-title {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.section-title h2 {
+  font-size: 36px;
+}
+
+.section-title p {
+  font-size: 18px;
+}
+
+.mapouter {
+  position: relative;
+  text-align: right;
+  width: 100%;
+  height: 363px;
+  margin-bottom: 20px; /* Added margin for better spacing */
+}
+
+.gmap_canvas {
+  overflow: hidden;
+  background: none !important;
+  width: 100%;
+  height: 363px;
+}
+
+.gmap_iframe {
+  height: 363px !important;
+}
+
+/* .info {
+  background-color: #f8f9fa;
+  padding: 30px;
+  border-radius: 10px;
+} */
+
+.info h4 {
+  font-size: 20px;
+  /* color: #198754; */
+}
+
+.info p {
+  margin-bottom: 20px;
+}
+
+.info i {
+  font-size: 24px;
+  color: #198754;
+}
+
+form {
+  background-color: #f8f9fa;
+  padding: 30px;
+  border-radius: 10px;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-control {
+  padding: 15px;
+  border: 1px solid #ced4da;
+  border-radius: 5px;
+}
+
+.textarea {
+  resize: vertical;
+}
+
+.btn-submit {
+  padding: 15px 30px;
+  border: none;
+  border-radius: 5px;
+  color: #fff;
+  cursor: pointer;
+}