diff --git a/Html-Files/Css-Files/Experiencestyle.css b/Html-Files/Css-Files/Experiencestyle.css
index eec5dc46..f9436e62 100644
--- a/Html-Files/Css-Files/Experiencestyle.css
+++ b/Html-Files/Css-Files/Experiencestyle.css
@@ -1,147 +1,147 @@
 body {
-    font-family: "Open Sans", sans-serif;
-    color: #fff;
-    background-color: #000;
-    margin: 0;
-    padding-top: 10px;
-  }
-  a {
-    color: #55a5ea;
-    text-decoration: none;
-  }
-  h1{
-    color: #4bb6b7;
-    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
-  }
-  a:hover {
-    color: #55a5ea;
-    text-decoration: none;
-  }
-  .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;
-  }
+  font-family: "Open Sans", sans-serif;
+  color: #fff;
+  background-color: #000;
+  margin: 0;
+  padding-top: 10px;
+}
+a {
+  color: #55a5ea;
+  text-decoration: none;
+}
+h1{
+  color: #4bb6b7;
+  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+}
+a:hover {
+  color: #55a5ea;
+  text-decoration: none;
+}
+.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;
+}
 /*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);
-    }
+  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);
   }
-  
-  
-  .loader--hidden{
-    opacity: 0;
-    visibility: hidden;
+  100% {
+      transform: rotate(360deg);
   }
+}
+
+
+.loader--hidden{
+  opacity: 0;
+  visibility: hidden;
+}
 .h{
-    margin-top: 20px;
-    margin-bottom: 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+.header_container {
+  background-color: #022a2d;
+  opacity: 0.9;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: 60px;
+  margin: auto;
+  position: fixed;
+  width: 100vw;
+  height: 4.8rem;
+}
+.h{
+  margin-top: 90px;
+}
+*,*::after,*::before{
+  /*padding: 0;
+  margin: 0;*/
+  box-sizing: border-box;
 }
-  .header_container {
-    background-color: #022a2d;
-    opacity: 0.9;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    height: 60px;
-    margin: auto;
-    position: fixed;
-    width: 100vw;
-    height: 4.8rem;
-  }
-  .h{
-    margin-top: 90px;
-  }
-  *,*::after,*::before{
-    /*padding: 0;
-    margin: 0;*/
-    box-sizing: border-box;
-  }
 
 header {
 display: flex;
@@ -162,7 +162,7 @@ margin-right: 10px;
 
 .filter-sort select,
 .filter-sort input[type="range"] {
-margin-right: 20px;
+margin-right: 10px;
 }
 
 #doctor-list {
@@ -179,537 +179,549 @@ justify-content: space-between;
 align-items: center;
 }
 :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;
+  --text-color: #959DA5;
+  --footer-bg: #3fbcc051;
+  --footer-bottom-bg: #3fbcc051s;
+  --white: white;
+  --link-color: #959DA5;
+  --link-hover: #2F81CF;
+  --button-border: #848D97;
+}
+
+.subscribe-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 8rem;
+  color: var(--white);
+  text-decoration: none;
+  font-size: 1rem;
+  height: 3rem;
+  font-weight: 700;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+  border: 1px solid var(--link-color);
+  border-radius: 0.375rem;
+  transition: all 0.2s ease-in-out;
+}
+
+.subscribe-btn:hover {
+  border: 3px solid var(--white);
+}
+
+/*? footer containers */
+footer {
+  bottom: 0;
+  background-color: var(--footer-bg);
+  width: 100%;
+  min-width: 20rem;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding-bottom: 3rem;
+}
+
+
+.footer-wrapper {
+  display: flex;
+  flex-direction: column;
+  max-width: 80rem;
+  width: 100%;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+.footer-logo-columns {
+  list-style-type: none;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  flex-grow: 4;
+  gap: 3rem 1rem;
+}
+
+.footer-logo {
+  margin-bottom: 2rem;
+  width: 3rem;
+}
+
+.footer-logo-column {
+  display: flex;
+  grid-area: footer-logo;
+  flex-direction: column;
+  min-width: 16rem;
+  flex-grow: 1;
+  padding-right: 0.5rem;
+}
+
+.footer-logo-column p {
+  color: var(--text-color);
+  font-size: 0.95rem;
+  margin-bottom: 1.5rem;
+}
+
+.footer-logo-column h3 {
+  color: var(--white);
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+/* other columns */
+
+.other-columns {
+  display: inline-grid;
+  grid-template-columns: repeat(2, 1fr);
+  width: 100%;
+  gap: 2rem 1rem;
+  padding-top: 2rem;
+}
+
+.other-columns ul {
+  display: flex;
+  gap: 0.75rem;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  flex-direction: column;
+  font-weight: 600;
+}
+
+.other-columns ul a {
+  color: var(--text-color);
+  text-decoration: none;
+  font-size: 0.85rem;
+}
+
+.other-columns ul a:hover {
+  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);
+  background-color: var(--footer-bottom-bg);
+}
+
+.footer-bottom-wrapper {
+  display: flex;
+  max-width: 80rem;
+  margin: 0 auto;
+  gap: 1rem;
+  width: 100%;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  align-content: center;
+  padding: 1rem;
+}
+
+.footer-bottom small {
+  font-size: 1rem;
+  display: inline;
+  white-space: nowrap;
+}
+
+.footer-bottom-links {
+  list-style-type: none;
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.footer-bottom-links a {
+  color: var(--link-color);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.footer-bottom-links a:hover {
+  color: var(--link-hover);
+  text-decoration: underline;
+}
+
+.footer-bottom>small {
+  font-size: 1rem;
+  margin: 0 auto;
+  width: 100%
+}
+
+/*? socials */
+.social-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin: 0 auto;
+}
+
+.social-links {
+  display: inline-flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.social-links img {
+  width: 1.5rem;
+  height: 1.5rem;
+  transition: all 0.2s ease-in-out;
+}
+
+.social-links img:hover {
+  transform: scale(1.1);
+}
+
+.social-links ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  list-style-type: none;
+}
+
+.footer-bottom-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.sort-btn{
+  background-color: #3fbcc0;
+  border-radius: 5px
+}
+.sort-btn:hover{
+  background-color: #4adbe0;
+}
+.btn2{
+  border-radius: 5px;
+  background-color: #3fbcc0;
+}
+.btn2:hover{
+  background-color: #4adbe0;
+}
+
+@media (max-width:768px){
+  .footer-bottom-wrapper{
+    position: relative;
+    right: 200px;
+    width: 68%;
   }
-  
-  .subscribe-btn:hover {
-    border: 3px solid var(--white);
+  #doctor-list li{
+    width: 44.5%;  
   }
-  
-  /*? footer containers */
-  footer {
-    bottom: 0;
-    background-color: var(--footer-bg);
-    width: 100%;
-    min-width: 20re;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    padding-bottom: 3rem;
+  .min,#fee-filter,#fee-value{
+    position: relative;
+    right: 416px;
+    top: 39px;
+    margin-right:10px;
   }
-  
-  
-  .footer-wrapper {
-    display: flex;
-    flex-direction: column;
-    max-width: 80rem;
-    width: 100%;
-    margin: 0 auto;
-    padding: 1rem;
+  .img img {
+    position: relative;
+    left: 300px;
+    bottom: 12px;
   }
-  
-  .footer-logo-columns {
-    list-style-type: none;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    flex-grow: 4;
-    gap: 3rem 1rem;
+  #sort-btn{
+    position: relative;
+    right: 494px;
+    top: 75px;
   }
-  
-  .footer-logo {
-    margin-bottom: 2rem;
-    width: 3rem;
+  .filter-sort{
+    height: 117px;
   }
-  
-  .footer-logo-column {
-    display: flex;
-    grid-area: footer-logo;
-    flex-direction: column;
-    min-width: 16rem;
-    flex-grow: 1;
-    padding-right: 0.5rem;
+}
+@media (max-width:576px) {
+  .footer-bottom-wrapper{
+    position: relative;
+    right: 140px;
   }
-  
-  .footer-logo-column p {
-    color: var(--text-color);
-    font-size: 0.95rem;
-    margin-bottom: 1.5rem;
+}
+@media screen and (max-width:620px) {
+  .min,#fee-filter,#fee-value{
+    right: 420px;
+    top: 75px;
   }
-  
-  .footer-logo-column h3 {
-    color: var(--white);
-    margin-top: 0.25rem;
-    margin-bottom: 0.25rem;
+  #sort-btn{
+    right: 112px;
+    top: 42px;
   }
-  
-  /* other columns */
-  
+
+}
+@media (min-width: 600px) {
   .other-columns {
-    display: inline-grid;
-    grid-template-columns: repeat(2, 1fr);
-    width: 100%;
-    gap: 2rem 1rem;
-    padding-top: 2rem;
-  }
-  
-  .other-columns ul {
-    display: flex;
-    gap: 0.75rem;
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-    flex-direction: column;
-    font-weight: 600;
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
   }
-  
-  .other-columns ul a {
-    color: var(--text-color);
-    text-decoration: none;
-    font-size: 0.85rem;
-  }
-  
-  .other-columns ul a:hover {
-    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);
-    background-color: var(--footer-bottom-bg);
-  }
-  
+
   .footer-bottom-wrapper {
-    display: flex;
-    max-width: 80rem;
-    margin: 0 auto;
-    gap: 1rem;
-    width: 100%;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: center;
-    align-content: center;
-    padding: 1rem;
+      flex-direction: row;
   }
-  
-  .footer-bottom small {
-    font-size: 1rem;
-    display: inline;
-    white-space: nowrap;
+  .footer-bottom-wrapper small{
+    font-size: smaller;
   }
-  
   .footer-bottom-links {
-    list-style-type: none;
-    display: inline-flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 1rem;
+      margin-left: 1.5rem;
   }
-  
-  .footer-bottom-links a {
-    color: var(--link-color);
-    text-decoration: none;
-    white-space: nowrap;
-  }
-  
-  .footer-bottom-links a:hover {
-    color: var(--link-hover);
-    text-decoration: underline;
-  }
-  
-  .footer-bottom>small {
-    font-size: 1rem;
-    margin: 0 auto;
-    width: 100%
-  }
-  
-  /*? socials */
-  .social-wrapper {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    margin: 0 auto;
-  }
-  
-  .social-links {
-    display: inline-flex;
-    gap: 0.5rem;
-    align-items: center;
-  }
-  
-  .social-links img {
-    width: 1.5rem;
-    height: 1.5rem;
-    transition: all 0.2s ease-in-out;
-  }
-  
-  .social-links img:hover {
-    transform: scale(1.1);
-  }
-  
-  .social-links ul {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.75rem;
-    list-style-type: none;
-  }
-  
-  .footer-bottom-wrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+}
+
+@media (max-width: 800px) {
+  .footer-top {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      padding: 1rem 0.5rem 2rem 0.5rem;
   }
-  
-  
-  @media (max-width:768px){
-    .footer-bottom-wrapper{
-      position: relative;
-      right: 200px;
-      width: 68%;
-    }
-    #doctor-list li{
-      width: 56%;
-    }
-    .min,#fee-filter,#fee-value{
-      position: relative;
-      right: 416px;
-      top: 39px;
-    }
-    .img img {
-      position: relative;
-      left: 300px;
-      bottom: 12px;
-    }
-    #sort-btn{
-      position: relative;
-      right: 494px;
-      top: 75px;
-    }
-    .filter-sort{
-      height: 117px;
-    }
+}
+.social-links i{
+  font-size: 1.5rem
   }
-  @media (max-width:576px) {
-    .footer-bottom-wrapper{
-      position: relative;
-      right: 140px;
-    }
+  #ss{
+      display: flex;
+      flex-wrap: wrap;
+      font-size: 1.3rem;
   }
-  @media screen and (max-width:620px) {
-    .min,#fee-filter,#fee-value{
-      right: 420px;
-      top: 75px;
-    }
-    #sort-btn{
-      right: 112px;
-      top: 42px;
-    }
+.social-links #insta:hover {
+ /* Add the white background */
+background: 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;
-    }
-  }
+/* Gradient background for text */
+background-image: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
+background-size: 100%;
 
-  @media (max-width: 800px) {
-    .footer-top {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        text-align: center;
-        padding: 1rem 0.5rem 2rem 0.5rem;
-    }
-  }
-  .social-links i{
-    font-size: 1.5rem
-    }
-    #ss{
-        display: flex;
-        flex-wrap: wrap;
-        font-size: 1.3rem;
-    }
-  .social-links #insta:hover {
-   /* Add the white background */
-  background: white;
-  
-  /* Gradient background for text */
-  background-image: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
-  background-size: 100%;
-  
-  /* Use the text as a mask for the background */
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent; 
-  -moz-background-clip: text;
-  -moz-text-fill-color: transparent;
-  }
-  .social-links #twit a:hover{
-    color: #000;
-  }
-  .social-links #git a:hover{
-    color: black;
-  }
-  .social-links #git:hover{
-    background-color: white;
-    border-radius: 50%;
-  }
-  .social-links #linkd a:hover{
-    color: #0077b5;
-  }
-  .social-links #fb a:hover{
-    color: #1877f2;
-  }
-  .social-links #linkd a:hover{
-    color: #0077b5;
-  }
-  .social-links #phn a:hover{
-    color: red;
-  }
-  .social-links #mail1 a:hover{
-    color: #bd4b39;
-  }
-  .social-links a{
-    color: white;
-  }
-  .social-links {
-    display: inline-flex;
-    gap: 1rem;
-    align-items: center;
-    margin-left: -100px;
-  }
-  .subscribe-form {
-    display: flex;
-    gap: 10px;
+/* Use the text as a mask for the background */
+-webkit-background-clip: text;
+background-clip: text;
+-webkit-text-fill-color: transparent; 
+-moz-background-clip: text;
+-moz-text-fill-color: transparent;
 }
-.footer-col form {
+.social-links #twit a:hover{
+  color: #000;
+}
+.social-links #git a:hover{
+  color: black;
+}
+.social-links #git:hover{
+  background-color: white;
+  border-radius: 50%;
+}
+.social-links #linkd a:hover{
+  color: #0077b5;
+}
+.social-links #fb a:hover{
+  color: #1877f2;
+}
+.social-links #linkd a:hover{
+  color: #0077b5;
+}
+.social-links #phn a:hover{
+  color: red;
+}
+.social-links #mail1 a:hover{
+  color: #bd4b39;
+}
+.social-links a{
+  color: white;
+}
+.social-links {
+  display: inline-flex;
+  gap: 1rem;
+  align-items: center;
+  margin-left: -100px;
+}
+.subscribe-form {
   display: flex;
-  gap: 5px;
+  gap: 10px;
+}
+.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;
+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 form button {
-  background: #fff;
-  border: none;
-  color: #08434551;
-  padding: 10px 15px;
-  border-radius: 6px;
-  cursor: pointer;
-  font-weight: 1000;
-  transition: 0.2s ease;
+background: #fff;
+border: none;
+color: #08434551;
+padding: 10px 15px;
+border-radius: 6px;
+cursor: pointer;
+font-weight: 1000;
+transition: 0.2s ease;
 }
 .footer-col p {
-  margin: 20px 0;
-  color: #bfbfbf;
-  max-width: 300px;
+margin: 20px 0;
+color: #bfbfbf;
+max-width: 300px;
 }
 /* back to top */
 #back-to-top-container {
-  position: fixed;
-  bottom: 15px;
-  right: 77px;
-  cursor: pointer;
-  z-index: 1000;
+position: fixed;
+bottom: 15px;
+right: 77px;
+cursor: pointer;
+z-index: 1000;
 }
 #back-to-top {
-  width: 55px;
-  height: 55px;
-  fill: hwb(181 16% 46%);
-  color: hwb(181 11% 13%);
-  transition: fill 0.3s;
-  background: white;
-  border-radius: 50%;
+width: 55px;
+height: 55px;
+fill: hwb(181 16% 46%);
+color: hwb(181 11% 13%);
+transition: fill 0.3s;
+background: white;
+border-radius: 50%;
 }
 #back-to-top:hover {
-  transform: scale(1.1);
+transform: scale(1.1);
 }
-<<<<<<< HEAD
-=======
 #subscribeBanner {
-  display: none;
-  position: fixed;
-  top: 20px;
-  right: 20px;
-  background: rgb(75, 182, 183);
-  color: black;
-  padding: 5px;
-  z-index: 1000;
-  border-radius: 5px;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+display: none;
+position: fixed;
+top: 20px;
+right: 20px;
+background: rgb(75, 182, 183);
+color: black;
+padding: 5px;
+z-index: 1000;
+border-radius: 5px;
+box-shadow: 0 2px 5px rgba(0,0,0,0.2);
 }
 
 
 @media screen and (max-width: 768px) {
-  #ss {
-    font-size: 8px;
-  }
+#ss {
+  font-size: 8px;
+}
 }
 
 @media screen and (max-width: 600px) {
-  #ss {
-    font-size: 6px;
-  }
+#ss {
+  font-size: 6px;
+}
 }
 @media screen and (max-width: 768px) {
-  .social-wrapper {
-    font-size: 8px;
-  }
+.social-wrapper {
+  font-size: 8px;
+}
 
-  .social-links i {
-    font-size: 6px;
-  }
+.social-links i {
+  font-size: 6px;
+}
 }
 
 @media screen and (max-width: 480px) {
-  .social-wrapper {
-    font-size: 8px;
-  }
+.social-wrapper {
+  font-size: 8px;
+}
 
-  .social-links i {
-    font-size: 6px;
-  }
+.social-links i {
+  font-size: 6px;
 }
-    body {
-      font-family: Arial, sans-serif;
-      background-color: #121212;
-      color: white;
-  
-    
-    }
+}
+  body {
+    font-family: Arial, sans-serif;
+    background-color: #121212;
+    color: white;
 
-    h1 {
-      color: #00bfa5;
-      text-align: center;
-      margin-left: 40px;
-    }
+  
+  }
 
-    .filters {
-      display: flex;
-      justify-content: center;
-      margin-bottom: 20px;
-    }
+  h1 {
+    color: #00bfa5;
+    text-align: center;
+    margin-left: 40px;
+  }
 
-    .filters select, .filters input {
-      margin: 0 10px;
-    }
+  .filters {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+  }
 
-    .filters label {
-      margin-right: 10px;
-    }
+  .filters select, .filters input {
+    margin: 0 10px;
+  }
 
-    .filters input[type="range"] {
-      margin-left: 10px;
-    }
+  .filters label {
+    margin-right: 10px;
+  }
 
-    #doctor-list {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 20px; /* Adjust space between items as needed */
+  .filters input[type="range"] {
+    margin-left: 10px;
   }
+
+  #doctor-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px; /* Adjust space between items as needed */
+}
   
-  #doctor-list li {
-      border: 2px solid #4bb6b7;
-      border-radius: 20px;
-      padding: 30px;
-      background-color: #2c3e50;
-      font-family: 'Cambria', Cochin, Georgia, Times, 'Times New Roman', serif;
-      font-size: 25px;
-      color: #ecf0f1;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-      width: calc(33.333% - 20px); 
-      box-sizing: border-box; 
+#doctor-list li {
+    /* border: 2px solid #4bb6b7; */
+    border-radius: 20px;
+    padding: 30px;
+    background-color: #1c413b;
+    font-family: 'Cambria', Cochin, Georgia, Times, 'Times New Roman', serif;
+    font-size: 25px;
+    color: #ecf0f1;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    /* width: calc(33.333% - 20px);   */
+    box-sizing: border-box; 
+}
+
+  #doctor-list li .content {
+    flex-grow: 1;
+    padding-right: 20px; 
+    margin-left: 10px;
+  }
+
+  #doctor-list li .content h4 {
+    margin: 0;
+    width: 400px;
+    font-size: 28px;
+    color: #ecf0f1;
   }
 
-    #doctor-list li .content {
-      flex-grow: 1;
-      padding-right: 20px; 
-     margin-left: 50px;
-    }
-
-    #doctor-list li .content h4 {
-      margin: 0;
-      font-size: 28px;
-      color: #ecf0f1;
-    }
-
-    #doctor-list li .content p {
-      margin: 5px 0 0;
-      font-size: 20px;
-      color: #f2f7fa;
-    }
-     
-    #doctor-list li img {
-      width: 80px;
-      height: auto;
-      border-radius: 50%;
-      margin-right: 200px; /* Add margin to left to separate from content */
-    }
-    #doctor-list li:hover {
-      background: rgb(75, 182, 183);
-      border: 2px solid white;
-      color: rgb(129, 124, 124);
-      font-weight: 700;
-      font-size: 30px;
-    }
-    #doctor-list li .content:hover {
-      color: aliceblue;
-      font-size: 30px;
-    }
->>>>>>> c95240aabf081bcd1831deb17d34a642e1974c6b
+  #doctor-list li .content p {
+    margin: 5px 0 0;
+    font-size: 20px;
+    color: #f2f7fa;
+  }
+   
+  #doctor-list li img {
+    width: 80px;
+    height: auto;
+    border-radius: 50%;
+    margin-right: 200px; /* Add margin to left to separate from content */
+  }
+  #doctor-list li:hover {
+    background: rgb(75, 182, 183);
+    border: 2px solid white;
+    color: rgb(129, 124, 124);
+    font-weight: 700;
+    font-size: 30px;
+  }
+  #doctor-list li .content:hover {
+    color: aliceblue;
+    font-size: 30px;
+  }
\ No newline at end of file
diff --git a/Html-Files/Doctor Experience.html b/Html-Files/Doctor Experience.html
index 8ecb140a..84b48b17 100644
--- a/Html-Files/Doctor Experience.html	
+++ b/Html-Files/Doctor Experience.html	
@@ -52,11 +52,11 @@
     }
 
     #doctor-list li {
-      border: 2px solid #4bb6b7;
+      /* border: 2px solid #4bb6b7; */
       border-radius: 20px;
       padding: 30px;
       margin: 20px 0;
-      background-color: #2c3e50;
+      background-color: #1c413b;
       font-family: 'Cambria', Cochin, Georgia, Times, 'Times New Roman', serif;
       font-size: 25px;
       color: #ecf0f1;
@@ -64,13 +64,13 @@
       align-items: center;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
       margin:30px;
-      width: 96%;
+      width: 44.5%;   
     }
 
     #doctor-list li .content {
       flex-grow: 1;
       padding-right: 20px; 
-     margin-left: 50px;
+      margin-left: 10px;
     }
 
     #doctor-list li .content h4 {
@@ -124,16 +124,15 @@
     </div>
     <nav class="nav_menu">
       <ul class="nav_link vis-h">
-        <li><a href="../index.html"><i class="bi bi-house-door-fill"></i>Home</a></li>
-        <li><a href="../index.html#about"><i class="bi bi-info-circle-fill"></i>About</a></li>
-        <li><a href="../news.html"><i class="bi bi-newspaper"></i>News</a></li>
-        
-        <li><a href="../dex.html"><i class="bi bi-gear"></i>Service</a></li>
-        <li><a href="../index.html#patient-portal"><i class="bi bi-person"></i>Patient Portal</a></li>
+        <li><a href="../index.html"><i class="bi bi-house-door-fill"></i> Home</a></li>
+        <li><a href="../index.html#about"><i class="bi bi-info-circle-fill"></i> About</a></li>
+        <li><a href="../news.html"><i class="bi bi-newspaper"></i> News</a></li>
+        <li><a href="../dex.html"><i class="bi bi-gear"></i> Service</a></li>
+        <li><a href="../index.html#patient-portal"><i class="bi bi-person"></i> Patient Portal</a></li>
         <li><a href="Html-Files/appointment.html"><i class="bi bi-person"></i> Appointment</a></li>
-        <li><a href="../index.html#doctors"><i class="bi bi-person-circle"></i>Doctor</a></li>
-        <li><a href="../index.html#contact"><i class="bi bi-telephone"></i>Contact us</a></li>
-        <li><a href="../login.html"><i class="bi bi-box-arrow-right"></i>Sign in/Sign up</a></li>
+        <li><a href="../index.html#doctors"><i class="bi bi-person-circle"></i> Doctor</a></li>
+        <li><a href="../index.html#contact"><i class="bi bi-telephone"></i> Contact us</a></li>
+        <li style="margin-right: 20px;"><a href="../login.html"><i class="bi bi-box-arrow-right"></i> Sign in/Sign up</a></li>
       </ul>
       <div class="hamburger">
         <div class="line"></div>
@@ -147,7 +146,7 @@
     <h1>Find a Doctor</h1>
     <div class="filter-sort">
       <label for="experience-filter" style="color: #4bb6b7; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 25px;">Experience:</label>
-      <select id="experience-filter" style="height: 35px; background-color: #ecf0f1;">
+      <select id="experience-filter" class="btn2" style="height: 35px; width: 130px; border: none; border-radius: 5px; padding: 5px;">
         <option value="" style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">All</option>
         <option value="5">5+ years</option>
         <option value="10">10+ years</option>
@@ -155,10 +154,10 @@ <h1>Find a Doctor</h1>
       </select>
       
       <label for="fee-filter" style="color: #4bb6b7; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 25px;" class="min">Minimum Fee:</label>
-      <input type="range" id="fee-filter" min="0" max="1000" step="50" value="500" style="height: 35px; background-color: #ecf0f1;">
-      <span id="fee-value" style="color: #4bb6b7; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 25px;">1000</span>
+      <input type="range" id="fee-filter" min="0" max="1000" step="50" value="500" style="height: 35px; margin-top: 8px;">
+      <span id="fee-value" style="color: #4bb6b7; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 25px; margin-right: 20px;">1000</span>
       
-      <button id="sort-btn" style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">Sort by Fee</button>
+      <button id="sort-btn" class="sort-btn" style="font-family: Arial, Helvetica, sans-serif; width: 130px; height: 35px; margin-left: 10px; margin-right: 10px; border: none;">Sort by Fee</button>
     </div>
   </header>
 
@@ -625,4 +624,4 @@ <h4>${doctor.name}</h4>
   </script>
   <script src="./experience.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/assets/css/styles.css b/assets/css/styles.css
index ab5ea8d6..c0746455 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -883,3 +883,34 @@ footer {
 #back-to-top:hover {
   transform: scale(1.1);
 }
+
+
+@media (max-width: 768px) {
+  #back-to-top-container {
+    right: 15px;
+  }
+  .app__container{
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    justify-content: center !important;
+
+  }
+  .app__buttons{
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    
+    
+  }
+
+  .app__buttons button{
+    margin: 10px 0 !important;
+  }
+  .app__buttons button:hover{
+    background-color: #55a5ea !important;
+    color: black !important;
+  }
+ 
+  
+}
\ No newline at end of file
diff --git a/checkup.css b/checkup.css
index 6351071d..1067672b 100644
--- a/checkup.css
+++ b/checkup.css
@@ -114,6 +114,7 @@ body {
 #services {
     text-align: center;
     display: flex;
+    max-width: 100%;
     justify-content: center;
     
 }
diff --git a/dex.html b/dex.html
index 1450fefc..4d3a6424 100644
--- a/dex.html
+++ b/dex.html
@@ -532,7 +532,7 @@ <h4>Quick Links</h4><br>
             <h4>Explore</h4><br>
             <ul class="links">
               <li><a href="Html-Files/appointment.html">Appointment</a></li>
-              <li><a href="index.html#patient-portal">Patient Portal</a></li>
+              <li><a href="portal.html">Patient Portal</a></li>
               <li><a href="login.html">Login account</a></li>
               <li><a href="#">Helplines</a></li>
               <li><a href="index.html#contact">Location</a></li>
diff --git a/index.html b/index.html
index e5c6c6ae..c0ff4ff4 100644
--- a/index.html
+++ b/index.html
@@ -693,7 +693,7 @@ <h4>Quick Links</h4><br>
             <h4>Explore</h4><br>
             <ul class="links">
               <li><a href="Html-Files/appointment.html">Appointment</a></li>
-              <li><a href="index.html#patient-portal">Patient Portal</a></li>
+              <li><a href="portal.html">Patient Portal</a></li>
               <li><a href="log/login.html">Login account</a></li>
               <li><a href="#">Helplines</a></li>
               <li><a href="index.html#contact">Location</a></li>
diff --git a/portal.html b/portal.html
new file mode 100644
index 00000000..aee89b5d
--- /dev/null
+++ b/portal.html
@@ -0,0 +1,767 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta content="width=device-width, initial-scale=1.0" name="viewport">
+  
+  <link rel="icon" type="image/x-icon" href="./favicon.png">
+  <!-- Bootstrap Icons CDN link -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="./style.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+  <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css"
+    />
+    <link rel="icon" type="image/x-icon" href="./favicon.png" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <!--=============== CSS ===============-->
+    <link rel="stylesheet" href="assets/css/styles.css" />
+
+    <style>
+
+header.header_container {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+header.header_container.scrolled {
+    background-color: #005253; /* Adjust the background color as needed */
+    box-shadow: 0 4px 2px -2px gray; /* Adds a shadow effect */
+}
+
+
+      ::-webkit-scrollbar {
+        width: 10px;
+      }
+
+      ::-webkit-scrollbar-thumb {
+        background-color: #3fbcc0;
+        border-radius: 10px;
+      }
+
+      ::-webkit-scrollbar-thumb:hover {
+        background-color: #005253;
+        border-radius: 10px;
+      }
+
+      ::-webkit-scrollbar-track {
+        background-color: #011212;
+      }
+
+      #progressBar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 0%;
+        height: 6px;
+        background-color: #3fbcc0;
+        z-index: 9999;
+      }
+
+      .custom-button {
+        position: relative;
+        background-color: #3fbcc0a6;
+        color: white;
+        border: 2px solid #000;
+        border-radius: 10px;
+        overflow: hidden;
+        transition: color 0.3s ease;
+        z-index: 1;
+        padding: 10px 15px; /* Adjust padding to make the button bigger */
+        font-size: 14px; 
+        margin-top: -10px;
+      }
+      
+      .custom-button::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 0;
+        height: 100%;
+        background-color: #55a5ea;
+        transition: width 0.3s ease;
+        z-index: -1;
+      }
+      
+      .custom-button:hover {
+        color: #fff;
+      }
+      
+      .custom-button:hover::before {
+        width: 100%;
+      }
+
+      .home__container {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+      }
+      
+      .home__image {
+        width: 50%;
+      }
+      
+      .home__data {
+        text-align: left;
+        flex: 1;
+      }
+      
+
+      .about__container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      
+      .imt {
+        width: 40%;
+      }
+
+      .about__data {
+        text-align: left;
+        flex: 1; /* Allow text content to expand */
+        color: #fff; /* Set a default text color */
+        font-size: 16px; /* Set a default font size */
+        z-index: 1;
+        margin-left: 20px;
+      }
+      
+      .security__container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      
+      .security__image {
+        width: 40%; /* Adjust image width as needed */
+      }
+      
+      .security__data {
+        text-align: left;
+        flex: 1;
+      }
+      
+
+
+      .services__data {
+        display: flex;
+        flex-direction: column;
+        align-items: center; /* Center content horizontally */
+        text-align: center; /* Center text */
+      }
+
+      .services__data .button-link {
+        margin: 20px auto 0; /* Center button and add spacing */
+      }
+
+      .app__container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 50px 0;
+      }
+      
+      .app__data {
+        text-align: left;
+        flex-grow: 1; /* Allow the content to expand to fill available space */
+      }
+
+      .section__title-center {
+        text-align: center;
+        margin-right: 10px; /* Adjust the margin value as needed */
+      }
+      
+      .imt {
+        width: 30%;
+        padding-right: 60px; /* Add padding to the right */
+        margin-top: 20px; /* Move the image down */
+      }
+      
+
+      .contact__container {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        flex-wrap: wrap;
+        padding-top: 50px;
+        text-align: left;
+      }
+  
+      .contact__content {
+        flex: 1;
+      max-width: 45%;
+      display: flex;
+      flex-direction: column;
+      padding-left: 20px;
+      gap: 1rem;
+      padding-left: 100px;
+      color: white;
+      }
+
+      .contact__heading {
+        text-align: left;
+        margin-bottom: 0.5rem; /* Reduce space below heading */
+      }
+
+      .section__title-center {
+        position: relative;
+  right: 20px;
+      }
+  
+      .contact__description {
+        text-align: left;
+        margin-bottom: 1rem; /* Space below description */
+      }
+  
+      .contact__map {
+        flex: 1;
+        max-width: 70%;
+        margin-left: 10px;
+        margin-top: 20px;
+      }
+
+      .contact__map iframe {
+        width: 85%; /* Ensure iframe takes full width of its container */
+      }
+  
+      .contact__address {
+        display: flex;
+      align-items: center;
+      gap: 10px;
+      margin: 10px 0;
+      color: white;
+      }
+  
+      .contact__information {
+        font-weight: bold;
+        color: white;
+      }
+  
+      .button {
+        display: inline-block;
+        margin-top: 20px;
+        padding: 10px 20px;
+        background-color: #007bff;
+        color: white;
+        text-decoration: none;
+        border-radius: 5px;
+        text-align: center;
+      }
+  
+      .button:hover {
+        background-color: #0056b3;
+      }
+  
+      @media (max-width: 768px) {
+        .contact__container {
+          flex-direction: column;
+          align-items: center;
+        }
+  
+        .contact__content,
+        .contact__map {
+          max-width: 100%;
+        }
+  
+        .contact__map {
+          margin-left: 0;
+          margin-top: 20px;
+        }
+      }
+    </style>
+  <script type="text/javascript">
+    (function () {
+      emailjs.init({
+        publicKey: "o6kveYmOSDrs0l1Mg",
+      });
+    })();
+  </script>
+
+  <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
+  <script src="https://unpkg.com/scrollreveal"></script>
+  <title>RapiDoc</title>
+  <link
+    href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
+    rel="stylesheet">
+
+  <!-- transalator -->
+  <script src="https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
+
+  <!-- CSS Files -->
+   <link rel="stylesheet" href="index.css">
+  <link href="Css-Files/animate.min.css" rel="stylesheet">
+  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
+  <link href="bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
+  <link href="boxicons/css/boxicons.min.css" rel="stylesheet">
+  <link href="fontawesome-free/css/all.min.css" rel="stylesheet">
+  <link href="glightbox/css/glightbox.min.css" rel="stylesheet">
+  <link href="remixicon/remixicon.css" rel="stylesheet">
+  <link href="swiper/swiper-bundle.min.css" rel="stylesheet">
+  <link href="patient-portal.css" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+    integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
+  <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>
+    @media screen and (max-width: 1275px) {
+      #rd-logo{
+        visibility: hidden;
+      }
+    }
+    img{
+      border-radius: 10px;
+      padding: 0 0 0 0;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="pre">
+    <div class="loader"></div>
+  </div>
+  <!-- ############# Header ############# -->
+  <header class="header_container nav-h">
+    <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 vis-h">
+        <li><a href="index.html"><i class="bi bi-house-door-fill"></i> Home</a></li>
+        <li><a href="index.html#about"><i class="bi bi-info-circle-fill"></i> About</a></li>
+        <li><a href="news.html"><i class="bi bi-newspaper"></i> News</a></li>
+        <li><a href="dex.html"><i class="bi bi-gear"></i> Service</a></li>
+        <li><a href="index.html#patient-portal"><i class="bi bi-person"></i> Patient Portal</a></li>
+        <li><a href="Html-Files/appointment.html"><i class="bi bi-person"></i> Appointment</a></li>
+        <li><a href="index.html#doctors"><i class="bi bi-person-circle"></i> Doctor</a></li>
+        <li><a href="index.html#contact"><i class="bi bi-telephone"></i>Contact us</a></li>
+
+        <a href="./Html-Files/Doctor Experience.html"><button class="custom-button">Find a Doctor</button></a>
+      </ul>
+      <div class="hamburger">
+        <div class="line"></div>
+        <div class="line"></div>
+        <div class="line"></div>
+      </div>
+    </nav>
+  </header>
+
+<section style="color: #000;">Patient portal<section>
+
+  <!-- Patient Portal Section -->
+  <section id="patient-portal" class="patient-portal">
+    <div class="container-patientportal">
+      <div class="section-title section-black-text" 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" height="280px" width="263px" alt="Avatar">
+          </div>
+          <form>
+            <div class="textbox">
+              <i class="fas fa-user"></i>
+              <input type="text" placeholder="Username" name="username" required class="t1">
+            </div>
+            <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">
+              <p style="font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 15px;">Not registered yet?<a href="#" style="font-family: Verdana, Geneva, Tahoma, sans-serif;"> Register Here</a></p>
+            </div>
+            <div class="forgot-password" id="forgot-password-patient-portal">
+              <a style="font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 14px;" href="forgot-password.php">Forgot Your Password?</a>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  
+
+  <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="index.html#about">About Us</a></li>
+              <li><a href="index.html#contact">Contact Us</a></li>
+              <li><a href="#">Services</a></li>
+              <li><a href="index.html#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="Html-Files/appointment.html">Appointment</a></li>
+              <li><a href="index.html#patient-portal">Patient Portal</a></li>
+              <li><a href="login.html">Login account</a></li>
+              <li><a href="#">Helplines</a></li>
+              <li><a href="index.html#contact">Location</a></li>
+            </ul>
+          </section>
+          <section>
+            <h4>Legal</h4><br>
+            <ul class="links">
+              <li><a href="Html-Files/customer_agreement.html">Customer Agreement</a></li>
+              <li><a href="Html-Files/privacy_policy_page.html">Privacy Policy</a></li>
+              <li><a href="Html-Files/terms_and_conditions.html">Terms and Conditions</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" >
+      <div>
+      <h4>RAPIDOC Newsletter</h4><br>
+      <p>
+        Subscribe to our newsletter for a weekly dose
+        of news, updates, helpful tips, and
+        exclusive offers.
+      </p>
+    </div>
+      <form action="#" class="subscribe-form">
+        <input type="email" placeholder="Your email" required>
+        <button type="submit" style="color: #005253;">SUBSCRIBE</button>
+      </form>
+      <p class="confirmation-message">Thank you for subscribing!</p>
+       </section>
+      
+
+          <script>
+            document.querySelector('.subscribe-form').addEventListener('submit', function (event) {
+              event.preventDefault(); // Prevent the form from submitting in the traditional way
+
+              // Here you would normally send the form data to the server using fetch or XMLHttpRequest
+              // For demonstration purposes, we'll just show the confirmation message
+
+              const confirmationMessage = document.querySelector('.confirmation-message');
+              confirmationMessage.style.display = 'block'; // Show the confirmation message
+
+              // Clear the input field
+              this.querySelector('input[type="email"]').value = '';
+
+              // Optionally, you can hide the confirmation message after a few seconds
+              setTimeout(() => {
+                confirmationMessage.style.display = 'none';
+              }, 5000); // Hide after 5 seconds
+            });
+          </script>
+            
+            <script>
+              document.querySelector('.subscribe-form').addEventListener('submit', function(event) {
+                event.preventDefault(); // Prevent the form from submitting in the traditional way
+            
+                // Show the modal popup
+                const modal = document.getElementById('popupModal');
+                modal.style.display = 'block';
+            
+                // Clear the input field
+                this.querySelector('input[type="email"]').value = '';
+            
+                // Hide the modal when the close button is clicked
+                const closeModal = document.querySelector('.modal .close');
+                closeModal.onclick = function() {
+                  modal.style.display = 'none';
+                }
+              });
+            
+              // Hide the modal when clicking outside of it
+              window.onclick = function(event) {
+                const modal = document.getElementById('popupModal');
+                if (event.target == modal) {
+                  modal.style.display = 'none';
+                }
+              }
+            </script>
+
+        </div>
+      </div>
+    </div>
+   
+    <div class="footer-bottom">
+      <div class="footer-bottom-wrapper">
+        <small id="ss">© <span id="year"></span><span> RapiDoc</span>&nbsp;| All Rights
+          Reserved Made with ❤️ by RapiDoc</small>
+        <div class="social-wrapper">
+          <div class="social-links">
+            <div style="margin-left: 300px;font-family: sans-serif;"><i>Follow&nbsp;Us&nbsp;:&nbsp;</i></div>
+            <div  id="insta">
+            <a href="https://www.instagram.com" target="_blank">
+              <i class="fab fa-instagram"></i>
+            </a>
+          </div>
+          <div id="twit">
+            <a  href="https://www.twitter.com" target="_blank">
+              <i class="bi bi-twitter-x"></i>
+            </a>
+          </div>
+          <div id="git">
+            <a  href="https://github.com/Anishkagupta04/RAPIDOC-HEALTHCARE-WEBSITE-" target="_blank">
+              <i class="fab fa-github"></i>
+            </a>
+          </div>
+          <div id="linkd">
+            <a  href="https://www.linkedin.com" target="_blank">
+              <i class="fab fa-linkedin"></i>
+            </a>
+          </div>
+
+            <div id="fb"><a  href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></div>
+           <div id="phn"> <a  href="+91 1234567890" title="+91 1234567890" target="_blank"><i class="fa-solid fa-phone"></i></a></div>
+            <div id="mail1" ><a  href="info@rapidoc.com" target="_blank"><i class="fa-solid fa-envelope"></i></a></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </footer>
+
+  <div id="back-to-top-container">
+    <div class="circle">
+      <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+        class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
+        <path
+          d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z" />
+      </svg>
+    </div>
+  </div>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script>
+    // First, make sure to include the GSAP library in your HTML file:
+
+// Then add this JavaScript code:
+
+document.addEventListener("DOMContentLoaded", function() {
+  const images = document.getElementsByTagName('img');
+
+  Array.from(images).forEach(img => {
+    img.addEventListener("mousemove", function(event) {
+      const rect = img.getBoundingClientRect();
+      const imgX = rect.left + rect.width / 2;
+      const imgY = rect.top + rect.height / 2;
+      const mouseX = event.clientX - imgX;
+      const mouseY = event.clientY - imgY;
+      
+      const rotateX = mouseY * 0.05; // Adjust this value to control tilt sensitivity
+      const rotateY = mouseX * -0.05; // Adjust this value to control tilt sensitivity
+      
+      gsap.to(img, {
+        rotationX: rotateX,
+        rotationY: rotateY,
+        ease: "power2.out",
+        duration: 0.3
+      });
+    });
+
+    img.addEventListener("mouseleave", function() {
+      gsap.to(img, {
+        rotationX: 0,
+        rotationY: 0,
+        ease: "power2.out",
+        duration: 0.5
+      });
+    });
+  });
+});
+  </script>
+
+  <!-- JS Files -->
+  <script>
+
+    function loadGoogleTranslate() {
+      new google.translate.TranslateElement("google_element");
+    }
+
+    var currentYear = new Date().getFullYear();
+    document.getElementById('year').textContent = currentYear;
+  </script>
+
+
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      const backToTopButton = document.getElementById('back-to-top-container');
+
+      function checkButtonVisibility() {
+        if (window.innerWidth > 100 && window.scrollY > 100) {
+          backToTopButton.style.display = 'block';
+        } else {
+          backToTopButton.style.display = 'none';
+        }
+      }
+
+      window.addEventListener('scroll', checkButtonVisibility);
+      window.addEventListener('resize', checkButtonVisibility);
+
+      backToTopButton.addEventListener('click', function () {
+        window.scrollTo({
+          top: 0,
+          behavior: 'smooth'
+        });
+      });
+      checkButtonVisibility();
+    });
+
+  </script>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
+
+  <script>
+    const swiper = new Swiper('.js-testimonals-slider', {
+      grabCursor: true,
+      spaceBetween: 30,
+      pagination: {
+        el: '.js-testimonals-pagination',
+        clickable: true
+      },
+      breakpoints: {
+        767: {
+          slidesPerView: 2,
+        }
+      }
+    })
+  </script>
+
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      const phoneInputField = document.getElementById('phone');
+      const iti = window.intlTelInput(phoneInputField, {
+        initialCountry: "auto",
+        geoIpLookup: function (callback) {
+          fetch('https://ipinfo.io/json?token=YOUR_TOKEN')
+            .then(response => response.json())
+            .then(data => callback(data.country))
+            .catch(() => callback('us'));
+        },
+        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
+      });
+
+      document.getElementById('phone-form').addEventListener('submit', function (event) {
+        event.preventDefault();
+        const phoneNumber = iti.getNumber();
+        console.log('Full Phone Number:', phoneNumber);
+
+        // You can now send this phone number to your server or process it as needed
+      });
+    });
+  </script>
+
+
+  <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
+  <script src="glightbox/js/glightbox.min.js"></script>
+  <script src="php-email-form/validate.js"></script>
+  <script src="purecounter/purecounter.js"></script>
+  <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="assets/js/main.js"></script>
+  <script src="patient-portal.js"></script>
+  <script src="medicine.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"
+    }
+  </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().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>
+    function sendMail() {
+      let params = {
+        to_email: document.getElementById("subscribe-email").value,
+        message: `<h1>Thank you for subscribing to RapiDoc Newsletter</h1>
+      <p>Stay tuned for the latest news, updates, helpful tips, and exclusive offers.</p>`,
+      }
+      emailjs.send("service_lktb68z", "template_w79vd94", params).then(alert("Subscribed Successfully!"));
+    }
+
+
+    window.addEventListener("load", () => {
+      const loader = document.querySelector(".pre");
+
+      loader.classList.add("pre--hidden");
+
+      loader.addEventListener("transitionend", () => {
+        document.body.removeChild(loader);
+      });
+    });
+
+    window.addEventListener("load", () => {
+      const loader = document.querySelector(".loader");
+
+      loader.classList.add("loader--hidden");
+
+      loader.addEventListener("transitionend", () => {
+        document.body.removeChild(loader);
+      });
+    });
+    const hamburger = document.querySelector('.hamburger');
+    const navbar = document.querySelector('.header_container');
+    const nav = document.querySelector('.nav_link');
+    hamburger.addEventListener('click', () => {
+      navbar.classList.toggle('nav-h');
+      nav.classList.toggle('vis-h');
+    })
+  </script>
+
+  <div id="progressBar"></div>
+  <script>
+    window.onscroll = function () {
+      var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+      var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+      var scrolled = (winScroll / height) * 100;
+      document.getElementById("progressBar").style.width = scrolled + "%";
+    };
+  </script>
+</body>
diff --git a/style.css b/style.css
index 59d1d254..ed992d54 100644
--- a/style.css
+++ b/style.css
@@ -1066,8 +1066,8 @@ section {
 /*################----Services----################*/
 .services .icon-box {
   text-align: center;
-  margin-left: 80px;
-  margin-right: 80px;
+  margin-left: 2rem;
+  margin-right: 2rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -1158,6 +1158,7 @@ section {
 /* Styles for medium screens */
 @media (max-width: 991px) {
   .services .container {
+    padding: 1rem;
     grid-template-columns: repeat(2, 1fr);
   }
 }