diff --git a/googletranslate.css b/googletranslate.css
index 12bf8de6..448f19e1 100644
--- a/googletranslate.css
+++ b/googletranslate.css
@@ -1,92 +1,91 @@
 #translateButton {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    z-index: 1000;
-    width: 60px;  
-    height: 60px;
-    border-radius: 50%; 
-    border: none; 
-    background-color: hwb(181 16% 46%);
-    color: white; 
-    text-align: center; 
-    display: inline-block; 
-    font-size: 16px; 
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 12px;
-    line-height: 1;
-    text-align: center;
-    white-space: nowrap;
-    transition: transform 0.3s ease;
-    margin-right: 1350px;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 1000;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  border: none;
+  background-color: hwb(181 16% 46%);
+  color: white;
+  text-align: center;
+  display: inline-block;
+  font-size: 16px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 12px;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  transition: transform 0.3s ease;
+  margin-right: 1350px;
 }
 #translateButton:hover {
-    transform: scale(1.2); 
+  transform: scale(1.2);
 }
 
 /* The popup modal */
 .popup {
-    display: none; 
-    position: fixed;
-    z-index: 1000;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgb(0,0,0); 
-    background-color: rgba(0,0,0,0.4); 
-    
+  display: none;
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0, 0, 0);
+  background-color: rgba(0, 0, 0, 0.4);
 }
 
 /* Popup content */
 .popup-content {
-    background-color: hwb(181 16% 46%);
-    margin-top: 600px;
-    padding-left: 20px;
-    border: 1px solid #888;
-    width: 300px;
-    border-radius: 10px;
-    position: relative;
-    margin-right: 1350px;
-    
+  background-color: hwb(181 16% 46%);
+  margin-top: 600px;
+  padding-left: 20px;
+  border: 1px solid #888;
+  width: 300px;
+  border-radius: 10px;
+  position: relative;
+  margin-right: 1350px;
 }
 
 /* Close button */
 .close {
-    color: #073725;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
-    cursor: pointer;
+  color: #073725;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+  cursor: pointer;
 }
 
 .close:hover,
 .close:focus {
-    color: black;
-    text-decoration: none;
+  color: black;
+  text-decoration: none;
 }
 
 /* Hide the default Google Translate widget */
-.goog-te-banner-frame.skiptranslate, .goog-te-gadget-icon {
-    display: none !important;
+.goog-te-banner-frame.skiptranslate,
+.goog-te-gadget-icon {
+  display: none !important;
 }
 
 body {
-    top: 0px !important;
+  top: 0px !important;
 }
 
 /* Hide the "Powered by Google" branding */
 .goog-logo-link {
-    display: none !important;
+  display: none !important;
 }
 
 .goog-te-gadget {
-    height: 28px !important;
-    overflow: hidden;
+  height: 28px !important;
+  overflow: hidden;
 }
 
 /* Hide Google Translate notifications */
@@ -96,34 +95,34 @@ body {
 .goog-te-banner-frame,
 .goog-te-banner,
 .goog-te-balloon {
-    display: none !important;
+  display: none !important;
 }
 
 /* Custom styles for the Google Translate dropdown */
 #google_translate_element select {
-    background: #ffffff;
-    border: 1px solid #ccc;
-    color: #55a5ea;
-    padding-left:20px;
-    font-size: 14px;
-    border-radius: 5px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 30px;
+  background: #ffffff;
+  border: 1px solid #ccc;
+  color: #55a5ea;
+  padding-left: 20px;
+  font-size: 14px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 30px;
 }
 
 /* Hide the Google Translate bar */
 body > .skiptranslate {
-    display: none !important;
+  display: none !important;
 }
 
 .goog-te-banner-frame.skiptranslate {
-    display: none !important;
+  display: none !important;
 }
 .goog-te-banner-frame {
-    display: none !important;
+  display: none !important;
 }
 .goog-te-banner {
-    display: none !important;
-}
\ No newline at end of file
+  display: none !important;
+}
diff --git a/index.css b/index.css
index 80d6b1de..11bcb6f6 100644
--- a/index.css
+++ b/index.css
@@ -1,19 +1,19 @@
 html {
-    scroll-behavior: smooth;
+  scroll-behavior: smooth;
 }
 
 .emoji input {
-    display: none;
+  display: none;
 }
 
 .emoji label {
-    font-size: 2rem;
-    cursor: pointer;
-    padding: 5px;
+  font-size: 2rem;
+  cursor: pointer;
+  padding: 5px;
 }
 
-.emoji input:checked+label {
-    background-color: rgb(41, 136, 138);
+.emoji input:checked + label {
+  background-color: rgb(61, 156, 158);
 }
 @media screen and (max-width: 768px) {
     #ss {
@@ -27,24 +27,36 @@ html {
     }
   }
 .nav_menu {
-    display: flex;
+  display: flex;
 }
 
 .nav_link {
-    display: flex;
+  display: flex;
+  padding-right: 20px;
+}
+
+button:hover {
+  background-color: #13799b;
 }
 
 .iti--allow-dropdown input {
-    padding-left: 50px;
-    background-color: black;
-    /* Adjust padding to prevent overlap */
+  padding-left: 50px;
+  background-color: black;
+  /* Adjust padding to prevent overlap */
 }
 
 .iti.iti--allow-dropdown {
-    margin-left: 250px;
+  margin-left: 250px;
 }
 
 .container {
+  display: unset;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+  width: 100%;
+  margin: 0;
+  padding: 0;
     display: unset;
     align-items: center;
     /* justify-content: space-between; */
@@ -59,20 +71,33 @@ html {
     height: 400px;
     width: 300px;
 }
+
 .content {
-    text-align: left;
-    flex: 1;
-    padding: 20px;
+  text-align: left;
+  flex: 1;
+  padding: 20px;
 }
 
 .sec-img {
-    max-width: 50%;
-    width: 600px;
-    height: 600px;
-    margin-left: auto;
+  max-width: 50%;
+  width: 600px;
+  height: 600px;
+  margin-left: auto;
 }
 
 .btn-get-started {
+  display: inline-block;
+  background-color: #55a5ea;
+  color: #fff;
+  padding: 10px 20px;
+  text-decoration: none;
+  border-radius: 5px;
+  margin-top: 20px;
+}
+
+.btn-get-started:hover {
+  background-color: green;
+  color: white;
     display: inline-block;
     background-color: #3fbcc0;
     color: #fff;
@@ -94,188 +119,205 @@ html {
     transition: width 0.3s ease;
     z-index: -1;
 }
+
 select {
-    padding: 1px;
-    background-color: #55a5ea;
-    color: white;
-    height: 5vh;
-    width: 17vh;
+  padding: 1px;
+  background-color: #55a5ea;
+  color: white;
+  height: 5vh;
+  width: 17vh;
 }
 
 option {
-    background-color: #55a5ea;
-    color: white;
+  background-color: #55a5ea;
+  color: white;
 }
 
 .hamburger {
-    display: none;
-    cursor: pointer;
-    position: absolute;
-    top: 29px;
-    left: 1.5%;
+  display: none;
+  cursor: pointer;
+  position: absolute;
+  top: 29px;
+  left: 1.5%;
 }
 
 .line {
-    width: 30px;
-    height: 5px;
-    margin: 4px 4px;
-    background-color: white;
+  width: 30px;
+  height: 5px;
+  margin: 4px 4px;
+  background-color: white;
 }
 .img p{
     display: none;
 }
 @media only screen and (max-width: 820px) {
-    .hamburger {
-        display: block;
-    }
+  .hamburger {
+    display: block;
+  }
 
-    .header_container {
-        flex-direction: column;
-        align-items: start;
-        height: 24.8rem;
-        transition: 0.55s all ease-out;
-        /* padding-top: 5px; */
-    }
+  .header_container {
+    flex-direction: column;
+    align-items: start;
+    height: 24.8rem;
+    transition: 0.55s all ease-out;
+    /* padding-top: 5px; */
+  }
 
-    .nav_link {
-        flex-direction: column;
-        position: relative;
-        bottom: 40px;
-    }
+  .nav_link {
+    flex-direction: column;
+    position: relative;
+    bottom: 40px;
+  }
 
-    /* .nav-link li{
+  /* .nav-link li{
     margin-bottom: 5px;
   } */
-    .nav-h {
-        height: 5.5rem;
-        width: 100vw;
-    }
+  .nav-h {
+    height: 5.5rem;
+    width: 100vw;
+  }
 
-    .vis-h {
-        opacity: 0;
-    }
-    .img img{
-        display: none;
-    }
-    .img p{
-        display: block;
-        position: relative;
-        left: 300px;
-        bottom: 0;
-    }
-}
 
-@media screen and (max-width: 992px) {
-    .container {
-        flex-wrap: wrap;
-        justify-content: center;
-    }
+  .vis-h {
+    opacity: 0;
+  }
 
-    .sec-img {
-        max-width: 100%;
-        margin: 20px 0;
-        position: relative;
-        top: 0;
-        right: 0;
+  .img {
+    position: relative;
+    left: 300px;
+    bottom: 12px;
+  }
 
-    }
 
-    .content {
-        text-align: center;
-        padding: 10px;
-    }
+@media screen and (max-width: 992px) {
+  .container {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .sec-img {
+    max-width: 100%;
+    margin: 20px 0;
+    position: relative;
+    top: 0;
+    right: 0;
+  }
+
+  .content {
+    text-align: center;
+    padding: 10px;
+  }
 }
 
 @media screen and (max-width: 768px) {
-    .content {
-        text-align: center;
-        padding: 10px;
-    }
+  .content {
+    text-align: center;
+    padding: 10px;
+  }
 
-    .sec-img {
-        max-width: 100%;
-        margin: 20px 0;
-        position: relative;
-        top: 0;
-        right: 0;
-    }
+  .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;
+  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;
+  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;
+  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;
+  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;
+  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);
-    }
+  0% {
+    transform: rotate(0deg);
+  }
 
-    100% {
-        transform: rotate(360deg);
-    }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 .avatar {
-    margin: 20px 100px;
-    padding-left: 50px;
-    padding-right: 60px;
+  width: 15px;
+  margin: 20px 100px;
+  padding-left: 200px;
+  padding-right: 60px;
 }
 
 .textbox input {
+  width: 240px;
+  height: 40px;
+  align-items: center;
+  margin-left: 10px;
+  margin-right: 20px;
+  padding-left: 10px;
+}
+
+.btn {
+  margin-left: 2px;
+  width: 230px;
+  height: 40px;
+  background-color: #00c896;
+  border: none;
+  font-size: 1rem;
+  border-radius: 20px;
+  margin-bottom: 20px;
+=======
     width: 240px;
     height: 40px;
     border-radius: 10px;
@@ -296,9 +338,11 @@ option {
     border-radius: 10px;
     margin-bottom: 20px;
 }
+
 .btn:hover{
     background-color: #36b0b3;
 }
+
 .btn::before{
     content: '';
     position: absolute;
@@ -312,78 +356,78 @@ option {
     z-index: -1;
 }
 #appointment.appointment.section-bg {
-    margin: 0px 280px 100px;
+  margin: 0px 280px 100px;
 }
 
 #appointment.appointment.section-bg h2 {
-    margin: 0px 115px;
+  margin: 0px 115px;
 }
 
 form.php-email-form {
-    width: 300px;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    align-content: flex-start
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-content: flex-start;
 }
 
 .loader--hidden {
-    opacity: 0;
-    visibility: hidden;
+  opacity: 0;
+  visibility: hidden;
 }
 
-
-
 /* Appointment section Styling to align it to center */
 .appointment .container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    /* Center container contents */
-    border-radius: 10px;
-    margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* Center container contents */
+  border-radius: 10px;
+  margin: auto;
 }
 
 .appointment form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    /* Center form contents */
-    width: 100%;
-    max-width: 500px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* Center form contents */
+  width: 100%;
+  max-width: 500px;
 }
 
 .appointment .form-group {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    margin-bottom: 15px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 15px;
 }
 
 .appointment input,
 .appointment select,
 .appointment button {
-    width: 100%;
-    max-width: 500px;
-    border-radius: 10px;
+  width: 100%;
+  max-width: 500px;
+  border-radius: 10px;
 }
 
 .appointment .text-center {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    margin-top: 20px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
 }
 
 .appointment button[type="submit"] {
-    width: auto;
-    padding: 10px 20px;
-    display: block;
-    margin: 0 auto;
+  width: auto;
+  padding: 10px 20px;
+  display: block;
+  margin: 0 auto;
 }
 
 .php-email-form .form-control,
 .php-email-form .form-select {
+  margin: 0;
+  padding: 10px;
     border: none;
     margin: 0;
     padding: 10px;
@@ -391,61 +435,68 @@ form.php-email-form {
 
 .php-email-form .form-group,
 .php-email-form .row {
-    margin: 0;
-    padding: 10px;
+  margin: 0;
+  padding: 10px;
 }
 
 #name,
 #email {
+
+  margin-bottom: 10px;
+  border-bottom: none;
+  height: 7vh;
+
+
     margin-bottom: 10px;
     border-bottom: none;
     width: 100%;
+
 }
 
 #email,
 #location {
-    border-top: 1px solid #ccc;
-    /* Adjust color as needed */
-    margin-top: 0;
+  border-top: 1px solid #ccc;
+  /* Adjust color as needed */
+  margin-top: 0;
 }
 
 /* Remove <br> tags if present in HTML */
-#name+br,
-#email+br {
-    display: none;
+#name + br,
+#email + br {
+  display: none;
 }
 
 .section-bg {
-    background-color: #1c413b;
-    width: 700px;
-    padding: 40px;
+  background-color: #1c413b;
+  width: 700px;
+  padding: 40px;
 }
 
 #appointment.appointment.section-bg {
-    margin: auto;
+  margin: auto;
 }
 
 select {
-    padding: 1px;
-    background-color: #f8f8f8;
-    color: #374151;
-    height: 7vh;
-    width: 17vh;
+  padding: 1px;
+  background-color: #f8f8f8;
+  color: #374151;
+  height: 7vh;
+  width: 17vh;
 }
 
-
-
 #progressBar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 0%;
-    height: 6px;
-    background-color: #3fbcc0;
-    z-index: 9999;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 0%;
+  height: 6px;
+  background-color: #3fbcc0;
+  z-index: 9999;
 }
 
 .contact .php-email-form {
+  width: 300%;
+  background: #000;
     width: 200%;
 }
 
@@ -454,296 +505,294 @@ select {
 }
 
 @media (max-width: 768px) {
-    body {
-
-        width: 163vw !important;
-    }
-
-    .header_container {
-        width: 163vw;
-        height: auto;
-    }
+  body {
+    width: 163vw !important;
+  }
 
-    .nav_menu {
-        padding: 10px;
-        height: auto;
-    }
+  .header_container {
+    width: 163vw;
+    height: auto;
+  }
 
-    .nav-h {
-        height: 5.5rem;
-        width: -webkit-fill-available !important;
-        justify-content: center;
-        flex-direction: row;
-        align-items: center;
-    }
+  .nav_menu {
+    padding: 10px;
+    height: auto;
+  }
 
-    .container {
-        flex-wrap: wrap;
-        justify-content: center;
-        flex-direction: column-reverse;
-        padding: 10px;
-    }
+  .nav-h {
+    height: 5.5rem;
+    width: -webkit-fill-available !important;
+    justify-content: center;
+    flex-direction: row;
+    align-items: center;
+  }
 
-    .about-service {
-        height: auto !important;
-        width: auto !important;
-        margin-left: 0px !important;
-        margin-top: 0px !important;
-        flex-direction: column;
-    }
+  .container {
+    flex-wrap: wrap;
+    justify-content: center;
+    flex-direction: column-reverse;
+    padding: 10px;
+  }
 
-    .count-box {
-        padding: 76px;
-        font-size: 24px;
-    }
+  .about-service {
+    height: auto !important;
+    width: auto !important;
+    margin-left: 0px !important;
+    margin-top: 0px !important;
+    flex-direction: column;
+  }
 
-    .appointment .container {
-        display: flex !important;
-        justify-content: center !important;
-        align-content: center !important;
-    }
+  .count-box {
+    padding: 76px;
+    font-size: 24px;
+  }
 
-    .mt-2 {
-        display: flex;
-        align-items: stretch !important;
-        justify-content: space-around !important;
-        align-content: center !important;
-        gap: 40px !important;
-        margin-top: 70px !important;
-    }
+  .appointment .container {
+    display: flex !important;
+    justify-content: center !important;
+    align-content: center !important;
+  }
 
-    .appointment form {
-        display: flex !important;
-        flex-direction: column !important;
-        align-items: center !important;
-        width: 100% !important;
-        max-width: 500px !important;
-    }
+  .mt-2 {
+    display: flex;
+    align-items: stretch !important;
+    justify-content: space-around !important;
+    align-content: center !important;
+    gap: 40px !important;
+    margin-top: 70px !important;
+  }
 
-    .appointment .form-group {
-        width: 100% !important;
-        display: flex !important;
-        justify-content: center !important;
-        margin-bottom: 15px !important;
-    }
+  .appointment form {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    width: 100% !important;
+    max-width: 500px !important;
+  }
 
-    footer {
-        width: 168vw !important;
-        padding: 40px !important;
-        margin: auto !important;
-    }
+  .appointment .form-group {
+    width: 100% !important;
+    display: flex !important;
+    justify-content: center !important;
+    margin-bottom: 15px !important;
+  }
 
-    #appointment.appointment.section-bg {
-        margin: 15px;
-    }
+  footer {
+    width: 168vw !important;
+    padding: 40px !important;
+    margin: auto !important;
+  }
 
-    .testimonial-contains {
-        padding: 10px !important;
-    }
+  #appointment.appointment.section-bg {
+    margin: 15px;
+  }
 
-    .swiper-slide .testimonals-item {
-        width: 476px !important;
-    }
+  .testimonial-contains {
+    padding: 10px !important;
+  }
 
-    .other-columns {
-        grid-template-columns: repeat(3, 3fr);
+  .swiper-slide .testimonals-item {
+    width: 476px !important;
+  }
 
-    }
+  .other-columns {
+    grid-template-columns: repeat(3, 3fr);
+  }
 
-    .form.php-email-form {
-        align-content: flex-start;
-    }
+  .form.php-email-form {
+    align-content: flex-start;
+  }
 
-    .social-wrapper {
-        margin-right: 50%;
-    }
+  .social-wrapper {
+    margin-right: 50%;
+  }
 
-    #slide-item {
-        width: 510px !important;
-    }
+  #slide-item {
+    width: 510px !important;
+  }
 
-    .footer-col {
-        padding: 15px;
-        text-align: center;
-    }
+  .footer-col {
+    padding: 15px;
+    text-align: center;
+  }
 }
 
-
 .mapouter {
-    position: relative;
-    text-align: right;
-    width: 100%;
-    height: 363px;
+  position: relative;
+  text-align: right;
+  width: 100%;
+  height: 363px;
 }
 
 .gmap_canvas {
-    overflow: hidden;
-    background: none !important;
-    width: 100%;
-    height: 363px;
+  overflow: hidden;
+  background: none !important;
+  width: 100%;
+  height: 363px;
 }
 
 .gmap_iframe {
-    height: 363px !important;
+  height: 363px !important;
 }
 
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");
 
 body {
-    font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
 }
 
 .section-title h2 {
-    font-size: 32px;
-    text-transform: uppercase;
-    position: relative;
-    font-weight: 700;
-    margin-bottom: 20px;
+  font-size: 32px;
+  text-transform: uppercase;
+  position: relative;
+  font-weight: 700;
+  margin-bottom: 20px;
 }
 
 .section-title p {
+  font-size: 16px;
+  margin-bottom: 40px;
     margin-top: 20px;
     font-size: 16px;
     margin-bottom: 40px;
 }
 
-.section-black-text p, .section-black-text h2 {
-    color: white;
+.section-black-text p,
+.section-black-text h2 {
+  color: white;
 }
 
 .enhanced-input,
 .enhanced-textarea {
-    border: 2px solid #ccc;
-    border-radius: 5px;
-    margin-bottom: 15px;
-    font-size: 1rem;
-    color: #000;
-    background-color: #f9f9f9;
-    transition: border-color 0.3s, background-color 0.3s;
-    margin: 0 auto;
-    padding: 0 20px;
+  border: 2px solid #ccc;
+  border-radius: 5px;
+  margin-bottom: 15px;
+  font-size: 1rem;
+  color: #000;
+  background-color: #f9f9f9;
+  transition: border-color 0.3s, background-color 0.3s;
+  margin: 0 auto;
+  padding: 0 20px;
 }
 
 .enhanced-input:focus,
 .enhanced-textarea:focus {
-    border-color: #4cae4c;
-    background-color: #fff;
-    color: #000;
+  border-color: #4cae4c;
+  background-color: #fff;
+  color: #000;
 }
 
 .btn-submit {
-    padding: 10px 20px;
-    background-color: #000;
-    border: none;
-    border-radius: 5px;
-    color: white;
-    cursor: pointer;
-    transition: background-color 0.3s, transform 0.3s;
+  padding: 10px 20px;
+  background-color: #000;
+  border: none;
+  border-radius: 5px;
+  color: white;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.3s;
 }
 
 
+.btn-submit:hover {
+  background-color: #4cae4c;
+  transform: scale(1.05);
+}
+
 
 @keyframes fadeIn {
-    0% {
-        opacity: 0;
-    }
+  0% {
+    opacity: 0;
+  }
 
-    100% {
-        opacity: 1;
-    }
+  100% {
+    opacity: 1;
+  }
 }
 
 .confirmation-message {
-    display: none;
-    margin-top: 10px;
-    padding: 30px;
-    background-color: #e0f7fa;
-    color: #00796b;
-    border: 1px solid #00796b;
-    border-radius: 10px;
-    font-size: 1.2rem;
-    text-align: center;
-    animation: slideDown 1s forwards;
+  display: none;
+  margin-top: 10px;
+  padding: 30px;
+  background-color: #e0f7fa;
+  color: #00796b;
+  border: 1px solid #00796b;
+  border-radius: 10px;
+  font-size: 1.2rem;
+  text-align: center;
+  animation: slideDown 1s forwards;
 }
 
 .modal {
-    display: none;
-    position: fixed;
-    z-index: 1;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgba(0, 0, 0, 0.4);
-    /* Black w/ opacity */
+  display: none;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 0.4);
+  /* Black w/ opacity */
 }
 
 .modal-content {
-    background-color: teal;
-    margin: 20% auto;
-    padding: 20px;
-    border: 1px solid #888;
-    width: 50%;
-    max-width: 300px;
-    color: white;
-    text-align: center;
+  background-color: teal;
+  margin: 20% auto;
+  padding: 20px;
+  border: 1px solid #888;
+  width: 50%;
+  max-width: 300px;
+  color: white;
+  text-align: center;
 }
 
 .close {
-    color: white;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
+  color: white;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
 }
 
 .close:hover,
 .close:focus {
-    color: #000;
-    text-decoration: none;
-    cursor: pointer;
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
 }
 
+@media (max-width: 768px) {
+  .other-columns {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
 
-@media (max-width:768px) {
-    .other-columns {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-    }
-
-    .footer-col {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        flex-wrap: nowrap;
-        gap: 90px;
-    }
+  .footer-col {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: 90px;
+  }
 
-    .subscribe-form {
-        display: flex;
-        gap: 10px;
-    }
+  .subscribe-form {
+    display: flex;
+    gap: 10px;
+  }
 }
 
 .social-wrapper a div i {
-    color: #afb6c7;
+  color: #afb6c7;
 }
 
 .social-wrapper a div i:hover {
-    color: #fff;
+  color: #fff;
 }
+
 .confirmation-message {
-    display: none;
-    color: green;
-    margin-top: 10px;
-}
-.nav_link{
-    display: flex;
-    gap: 10px;
-}
-.btn1{
-    margin-right: 15px;
+  display: none;
+  color: green;
+  margin-top: 10px;
 }
 .btn2:hover{
     background-color: #36b0b3;
diff --git a/index.html b/index.html
index 0feea411..20a5288e 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,9 @@
   <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="googletranslate.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
+
+
   <script type="text/javascript">
     (function () {
       emailjs.init({
@@ -92,6 +95,14 @@
         <li><a href="log/login.html"><i class="bi bi-box-arrow-right"></i> Sign in/Sign up</a></li>
         <a href="Html-Files/Doctor Experience.html"><button class="btn1">Find a Doctor</button></a>
 
+
+
+       
+        <a href="./Html-Files/Doctor Experience.html"><button>Find a Doctor</button></a>
+     
+
+        
+
       </ul>
     </nav>
   </header>
@@ -102,6 +113,11 @@
       </a>
     </div>
   </header>
+
+
+<br>
+
+
   <div class="container" style="display:flex ;">
     <div class="content">
       <h1 style="font-size: 65px;">
@@ -282,7 +298,50 @@ <h1 class="about-us-heading">About Us</h1>
         </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-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-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>
+
+
     <script src="js/imageswap.js"></script>
+
     <!-- End About Section -->
     <!-- ################## Counts Section ################## -->
     <section id="counts" class="counts">
@@ -391,10 +450,12 @@ <h4><a href="https://www.medicalnewstoday.com/">Health Post</a></h4>
         </div>
       </div>
     </section><!-- End Services Section -->
-    
+
+    <br>
+
     <!-- Patient Portal Section -->
     <section id="patient-portal" class="patient-portal">
-      <div class="container-patientportal">
+      <div class="container-patientportal" style="border-radius:10px;">
         <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>