.navbar {
  /* box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); */
}
.navbar .navbar-brand img {
  max-width: 100px;
}
.navbar .navbar-nav .nav-link {
  color: #026e7a;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
}
.nav-text:hover {
  color: #026e7a;
  font-family: "Poppins", sans-serif;
  font-weight: bolder !important;
  /* font-size: 20px; */
}
.active-head {
  font-weight: bolder !important;
}
@media screen and (min-width: 1024px) {
  .navbar {
    letter-spacing: 0.1em;
  }
  .navbar .navbar-nav .nav-link {
    padding: 0.5em 1em;
  }
  .search-and-icons {
    width: 50%;
  }
  .search-and-icons form {
    flex: 1;
  }
}
@media screen and (min-width: 768px) {
  .navbar .navbar-brand img {
    max-width: 7em;
  }
  .navbar .navbar-collapse {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
  }
  .search-and-icons {
    display: flex;
    align-items: center;
  }
}
.search-and-icons form input {
  border-radius: 0;
  height: 2em;
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='grey' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E")
    no-repeat 95%;
}
.search-and-icons form input:focus {
  background: #fff;
  box-shadow: none;
}
.search-and-icons .user-icons div {
  padding-right: 1em;
}
.contact-info p,
.contact-info a {
  font-size: 0.9em;
  padding-right: 1em;
  color: grey;
}
.contact-info a {
  padding-right: 0;
}
.button {
  width: 230px;
  height: 60px;
  border-radius: 30px;
  background-color: #026e7a;
  color: #fff;
  border: none;
  font-size: 18px;
  font-family: "Poppins", sans-serif;
  @media only screen and (max-width: 768px) {
    margin-left: auto;
    margin-right: auto;
    width: 25rem;
  }
  @media (min-width: 373px) and (max-width: 395px) {
    width: 23rem;
  }
  @media (min-width: 350px) and (max-width: 375px) {
    width: 21.5rem;
  }
}
.text {
  color: #026e7a;
  font-family: "Poppins", sans-serif;
  font-weight: bold;
  font-size: 100px;
  text-align: center;
  @media (max-width: 768px) {
    font-size: 30px;
  }
  @media (min-width: 350px) and (max-width: 392px) {
    font-size: 25px;
  }
}
.header-text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  top: 15vw;
  position: absolute;
}
.headerText-blog {
  top: 15vw;
  @media (max-width: 768px) {
    top: 57vw;
  }
}
.headerText {
  position: absolute;
  top: 18rem;
  left: 6rem;
  font-family: "Poppins", sans-serif;
  @media (max-width: 768px) {
    top: 13rem;
    left: 0;
  }
}
.imageBox {
  width: 86.5%;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  padding-bottom: 5%;
  box-shadow: 5px 10px 40px rgba(2, 110, 122, 0.2);
  border-radius: 30px;
  @media (max-width: 768px) {
    margin-left: 1rem;
    width: 93%;
    height: auto;
    padding-bottom: 15%;
    top: 10vw;
    position: relative;
  }
}
.text-normal {
  color: #026e7a;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: 0.3px;
  @media (min-width: 350px) and (max-width: 392px) {
    font-size: 14px;
  }
}
.schedule {
  width: 300px;
  height: 65px;
  position: absolute;
  bottom: 5vw;
  background-color: #026e7a;
  color: #fff;
  border: none;
  border-radius: 35px;
  font-size: 18px;
  font-family: "Poppins", sans-serif;
  @media (max-width: 768px) {
    top: 100vw;
  }
}
.scheduleTwo {
  width: 300px;
  height: 65px;
  position: relative;
  margin-top: 5vw;
  background-color: #026e7a;
  color: #fff;
  border: none;
  border-radius: 35px;
  font-size: 18px;
  font-family: "Poppins", sans-serif;
}
.columnContainer {
  padding-left: 7rem;
  padding-top: 5rem;
  display: flex;
  justify-content: center;
  @media (max-width: 768px) {
    padding-left: 2rem;
    padding-top: 2rem;
  }
}
.River {
  color: #026e7a;
  font-family: "Poppins", sans-serif;
  font-size: 50px;
  font-weight: bold;
  @media (min-width: 350px) and (max-width: 392px) {
    font-size: 30px;
  }
}
.subHead {
  color: #026e7a;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: bold;
  @media (max-width: 768px) {
    font-size: 16px;
  }
}
.diamond {
  color: #026e7a;
  font-size: 16px;
  position: relative;
  top: -0.25rem;
}
.subText {
  color: #026e7a;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 85%;
  line-height: 36px;
  letter-spacing: 0.3px;
  @media (max-width: 768px) {
    font-size: 16px;
  }
}
.Slide-card {
  width: 100%;
  height: 40rem;
  border-radius: 30px;
  background-color: #e5f5f7;
  margin-right: 10px;
  border: none;
  @media (max-width: 768px) {
    height: 35rem;
    /* width: 65%;
    margin-right: 0; */
  }
}
.card-container {
  margin-left: 10rem;
  margin-right: 10rem;
  margin-top: 5rem;
  margin-bottom: 10rem;
}
.cardHead {
  font-size: 30px;
  color: #026e7a;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
}
.card-inner {
  color: #026e7a;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0.3px;
  @media (max-width: 768px) {
    font-size: 16px;
  }
}
.card-button {
  width: 170px;
  height: 60px;
  border-radius: 30px;
  background-color: #026e7a;
  color: #fff;
  border: none;
  font-family: "Poppins", sans-serif;
}
.aboutText {
  color: #026e7a;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 500;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 85%;
  line-height: 36px;
  letter-spacing: 0.3px;
  @media (max-width: 768px) {
    font-size: 16px;
    width: 93%;
    text-align: center;
  }
}
.footer {
  background-color: #026e7a;
  width: 100%;
  height: 500px;
  /* margin-left: 0.5rem; */
  @media (max-width: 768px) {
    height: auto;
    padding-bottom: 15%;
  }
}
.footsub {
  color: #a9b2bc;
  font-size: 16px;
  margin-top: 1rem;
  margin-bottom: 2rem;
  bottom: 5rem;
}
.footerHead {
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: bold;
  margin-top: 4rem;
}
.logo {
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: bold;
  font-size: 30px;
}
.email {
  width: 60%;
  height: 60px;
  border: none;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.email::placeholder {
  padding-left: 1rem;
  color: #717983;
  font-weight: 500;
}
.send {
  background-color: #039fae;
  color: #fff;
  width: 80px;
  height: 60px;
  border: none;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  font-weight: 500;
}
.footer-first {
  margin-top: 3rem;
  margin-left: 8rem;
  @media (max-width: 768px) {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
  }
}
.subHead-1 {
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: bold;
  @media (max-width: 768px) {
    font-size: 16px;
  }
}

.footer-list {
  color: #fff;
  font-size: 16px;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
}
.line {
  height: 1px;
  width: 63%;
  background-color: #a9b2bc;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  top: 5rem;
  @media (max-width: 768px) {
    width: 90%;
    top: 2rem;
  }
}
.line-text {
  position: relative;
  top: 6rem;
  gap: 1rem;
  @media (max-width: 768px) {
    top: 3rem;
  }
}
.social-icon {
  font-size: 25px;
  color: #fff;
}
.last-text {
  color: #a9b2bc;
  font-size: 14px;
  font-family: "Poppins", sans-serif;
}
.nav-list {
  font-size: 16px;
  width: 60vw;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.5rem !important;
  @media (max-width: 768px) {
    align-items: normal;
    padding-left: 2rem;
    padding-right: 2rem;
    justify-content: left;
    text-align: left;
  }
}

.caros-image {
  width: 65%;
  margin-left: auto;
  margin-right: auto;
  @media (max-width: 768px) {
    width: 70%;
  }
}
.carousel-control-prev-icon {
  color: black !important;
}
.profile {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  position: relative;
  top: -15vw;
  width: 90vw;
  @media (max-width: 768px) {
    width: 100%;
    left: 0;
    top: 0;
  }
}
.rev-profile {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  top: -35rem;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  @media (max-width: 768px) {
    width: 100%;
    top: 0;
  }
}
.profile-detail {
  width: 75%;
  height: 30rem;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  top: -5rem;
  box-shadow: 5px 10px 40px rgba(2, 110, 122, 0.2);
  border: none;
  background-color: #fff;
  border-radius: 25px;
  @media (max-width: 768px) {
    width: 93%;
    height: 27rem;
  }
}
.profile-detail-green {
  width: 75%;
  height: 30rem;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  top: -5rem;
  /* box-shadow: 5px 10px 40px rgba(2, 110, 122, 0.2); */
  border: none;
  background-color: #e5f5f7;
  border-radius: 25px;
  @media (max-width: 768px) {
    width: 93%;
    height: 27rem;
  }
}
.profile-image {
  z-index: 1;
  position: relative;
  width: 300px;
}
.name {
  font-size: 25px;
  color: #026e7a;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  text-align: left;
  @media (max-width: 768px) {
    font-size: 22px;
  }
}
.art-head {
  font-size: 30px;
  color: #026e7a;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  text-align: left;
  margin-top: 1rem;
  margin-bottom: 2rem;
}
.art-subhead {
  font-size: 25px;
  color: #026e7a;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  text-align: left;
  margin-top: 1rem;
  margin-bottom: 2rem;
}
.detail {
  position: relative;
  top: 3rem;
  padding: 2rem;
}
.detail-text {
  font-size: 16px;
  color: #026e7a;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  text-align: left;
  @media (max-width: 768px) {
    font-size: 14px;
  }
}
.name-line {
  background-color: #026e7a;
  height: 1px;
}
.scroll {
  height: 14vw;
  overflow-y: scroll;
  @media (max-width: 768px) {
    height: 50vw;
  }
}
.scroll::-webkit-scrollbar {
  width: 5px; /* Set the width of the scrollbar */
}

/* Handle on hover */
.scroll::-webkit-scrollbar-thumb:hover {
  background: #555; /* Change color on hover */
}

/* Handle */
.scroll::-webkit-scrollbar-thumb {
  background: #026e7a;
  border-radius: 5px;
}
.first-container {
  width: 82%;
  height: auto;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  top: -25vw;
  box-shadow: 5px 10px 40px rgba(2, 110, 122, 0.2);
  border: none;
  background-color: #fff;
  border-radius: 25px;
  @media (max-width: 768px) {
    width: 93%;
    top: 0;
  }
}
.dent-main {
  padding-top: 5rem;
  padding-bottom: 5rem;
  @media (max-width: 768px) {
    padding-top: 3rem;
  }
}
.dentist {
  padding-top: 5rem;
  padding-bottom: 5rem;
  @media (max-width: 768px) {
    padding-top: 0;
  }
}
.head-nav {
  width: 100vw;
  display: flex;
  justify-content: center;
}
.first-text {
  font-size: 16px;
  color: #026e7a;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  text-align: left;
  line-height: 30px;
  letter-spacing: 0.3px;
  /* padding-right: 5rem; */
  @media (max-width: 768px) {
    font-size: 14px;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
.image-place {
  position: relative;
  top: 5rem;
}
.Get-In {
  color: #026e7a;
  font-family: "Poppins", sans-serif;
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  position: relative;
  top: 15rem;
  @media (max-width: 768px) {
    top: 4rem;
    font-size: 25px;
  }
}
.contact-box {
  position: relative;
  top: 18rem;
  text-align: center;
  @media (max-width: 768px) {
    top: 7rem;
  }
}
.input {
  width: 50rem;
  height: 65px;
  border-radius: 20px;
  border: 1px solid #0b828f40;
  background-color: #e5f5f7;
  padding-left: 1.5rem;
  font-family: "Poppins", sans-serif;
  @media (max-width: 768px) {
    width: 22rem;
  }
  @media (min-width: 350px) and (max-width: 392px) {
    width: 20rem;
  }
}
.input:focus-visible {
  outline: none;
}
.input::placeholder {
  color: #026e7a;
}

.icon-container {
  width: 65%;
  height: 18vw;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  top: -30vw;
  box-shadow: 5px 10px 40px rgba(2, 110, 122, 0.2);
  border: none;
  background-color: #fff;
  border-radius: 25px;
  z-index: 1;
  @media (max-width: 768px) {
    width: 93%;
    height: auto;
    top: 0;
  }
}
.send-btn {
  width: 50rem;
  height: 60px;
  border-radius: 30px;
  background-color: #026e7a;
  color: #fff;
  border: none;
  font-size: 18px;
  font-family: "Poppins", sans-serif;
  @media (max-width: 768px) {
    width: 22rem;
  }
  @media (min-width: 350px) and (max-width: 392px) {
    width: 20rem;
  }
}

.owl-nav button {
  position: absolute;
  top: 50%;
  background-color: #000;
  color: #fff;
  margin: 0;
  transition: all 0.3s ease-in-out;
}
.owl-nav button.owl-prev {
  left: 0;
}
.owl-nav button.owl-next {
  right: 0;
}

.owl-dots {
  text-align: center;
  padding-top: 50px;
}
.owl-dots button.owl-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: inline-block;
  background-color: #e5f5f7;
  margin: 0 3px;
}
.owl-dots button.owl-dot.active {
  background-color: #026e7a;
}
.owl-dots button.owl-dot:focus {
  outline: none;
}
.owl-nav button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.38) !important;
}
span {
  font-size: 70px;
  position: relative;
  top: -5px;
}
.owl-nav button:focus {
  outline: none;
}
.caro-container {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  @media (max-width: 768px) {
    width: 100%;
  }
}

.owl-item {
  width: 485px !important;
  margin-right: 30px !important;
  @media (max-width: 768px) {
    width: 330px !important;
    margin-right: 10px !important;
  }
}
.owl-drag {
  padding-right: 3rem;
  padding-left: 3rem;
}
.owl-prev {
  left: -5rem !important;
  color: #026e7a !important;
}
.owl-next {
  right: -4rem !important;
  color: #026e7a !important;
}
.about-image {
  position: relative;
  top: 12vw;
  display: flex;
  justify-content: center;
  border-radius: 25px;
  @media (max-width: 768px) {
    width: 23rem;
  }
  @media (min-width: 350px) and (max-width: 392px) {
    width: 21.5rem;
  }
}
.progress-container {
  width: 70%;
  height: 45rem;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  top: -42vw;
  box-shadow: 5px 10px 40px rgba(2, 110, 122, 0.2);
  border: none;
  background-color: rgba(229, 245, 247, 0.5);
  border-radius: 25px;
  margin-bottom: -30rem;
  backdrop-filter: blur(10.5px);
  @media (max-width: 768px) {
    width: 93%;
    top: -5rem;
    margin-bottom: 1rem;
    height: 40rem;
  }
}
.image-progress {
  position: relative;
  top: 7vw;
  @media (max-width: 768px) {
    width: 300px;
    top: 25vw;
  }
}
.progress-text {
  color: #81b7bd;
  font-size: 50px;
  font-weight: bold;
  position: relative;
  top: 12rem;
  text-align: center;
  @media (max-width: 768px) {
    font-size: 35px;
  }
}
.top {
  display: flex;
  @media (max-width: 768px) {
    flex-direction: column;
  }
}
.main-logo {
  width: 350px;
  @media (max-width: 768px) {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -1rem;
  }
  @media (min-width: 373px) and (max-width: 395px) {
    margin-left: 7rem;
  }
  @media (min-width: 350px) and (max-width: 375px) {
    margin-left: 6rem;
  }
}
.navbar-toggler-icon {
  width: 30px;
  left: 1rem;
  color: #026e7a;
  position: absolute;
}
.foot-line {
  gap: 10rem;
  @media (max-width: 768px) {
    flex-direction: column;
    gap: 0;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
  }
}
.contact-container {
  width: 82%;
  margin-left: auto;
  margin-right: auto;
  height: 58vw;
  margin-bottom: -55rem;
  position: relative;
  top: -25vw;
  box-shadow: 5px 10px 40px rgba(2, 110, 122, 0.2);
  border: none;
  background-color: #fff;
  border-radius: 25px;
  @media (max-width: 768px) {
    width: 93%;
    top: 1rem;
    margin-bottom: 1rem;
    height: 45rem;
  }
}
.serv-container {
  width: 82%;
  height: 33vw;
  padding: 5rem;
  margin-bottom: -25rem;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  top: -30rem;
  box-shadow: 5px 10px 40px rgba(2, 110, 122, 0.2);
  border: none;
  background-color: #fff;
  border-radius: 25px;
  @media (max-width: 768px) {
    width: 93%;
    padding: 2rem;
    top: 1rem;
    height: auto !important;
    margin-bottom: 1rem;
    height: 45rem;
  }
}
.blog-container {
  width: 82%;
  height: 40rem;
  padding: 5rem;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: -27vw;
  box-shadow: 5px 10px 40px rgba(2, 110, 122, 0.2);
  border: none;
  background-color: #fff;
  border-radius: 25px;
  @media (max-width: 768px) {
    width: 93%;
    padding: 2rem;
    top: 1rem;
    margin-top: 0;
    height: auto !important;
    margin-bottom: 1rem;
    height: 45rem;
  }
}
.blog-slide {
  margin-top: 2vw;
  margin-bottom: 8vw;
  @media (max-width: 768px) {
    margin-top: 0;
  }
}
.article-slide {
  margin-top: 1vw;
  margin-bottom: 8vw;
  @media (max-width: 768px) {
    margin-top: 8vw;
    margin-bottom: 20vw;
  }
}
.detail-container {
  width: 60%;
  height: auto;
  padding: 5rem;
  margin-bottom: -25rem;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  top: -30rem;
  box-shadow: 5px 10px 40px rgba(2, 110, 122, 0.2);
  border: none;
  background-color: #fff;
  border-radius: 25px;
  @media (max-width: 768px) {
    width: 93%;
    padding: 2rem;
    top: 1rem;
    height: auto !important;
    margin-bottom: 1rem;
    height: 45rem;
  }
}
.detailOne-container {
  width: 82%;
  height: auto;
  padding: 5rem;
  margin-bottom: -25rem;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  top: -30rem;
  box-shadow: 5px 10px 40px rgba(2, 110, 122, 0.2);
  border: none;
  background-color: #fff;
  border-radius: 25px;
  @media (max-width: 768px) {
    width: 93%;
    padding: 2rem;
    top: 1rem;
    height: auto !important;
    margin-bottom: 1rem;
    height: 45rem;
  }
}
.health-container {
  width: 60%;
  height: auto;
  padding: 5rem;
  position: relative;
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
  top: -15rem;
  box-shadow: 5px 10px 40px rgba(2, 110, 122, 0.2);
  border: none;
  background-color: #fff;
  border-radius: 25px;
  @media (max-width: 768px) {
    width: 93%;
    padding: 2rem;
    top: 1rem;
    height: auto !important;
    margin-bottom: 8vw;
    height: 45rem;
  }
}
.blog-back {
  background-color: #e9eef3;
  height: 27rem;
  border-radius: 20px;
  @media only screen and (max-width: 768px) {
    width: 100%;
    height: 20rem;
  }
}
.blog-subback {
  background-color: #e9eef3;
  width: 100%;
  height: 18rem;
  border-radius: 20px;
  @media only screen and (max-width: 768px) {
    height: 15rem;
  }
}
.blog-content {
  padding-left: 2rem;
  padding-top: 1rem;
  @media only screen and (max-width: 768px) {
    width: 100%;
    padding-left: 0;
  }
}
.detail-content {
  padding-left: 2rem;
  padding-top: 1rem;
  @media only screen and (max-width: 768px) {
    width: 100%;
    padding-left: 0;
  }
}
.detail-content h3 {
  color: #026e7a;
  font-weight: bold;
  font-size: 30px;
  font-family: "Poppins", sans-serif;
}
.detail-content h4 {
  color: #026e7a;
  font-weight: bold;
  font-size: 20px;
  font-family: "Poppins", sans-serif;
}
.detail-content p {
  color: #026e7a;
  font-size: 18px;
  font-family: "Poppins", sans-serif;
  line-height: 30px;
  letter-spacing: 0.3px;
}
.blog-sub {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 82%;
  margin-bottom: 1.5rem;
  @media only screen and (max-width: 768px) {
    top: 1rem;
    width: 93%;
  }
}
.blog-subContainer {
  background-color: white;
  box-shadow: 5px 10px 40px rgba(2, 110, 122, 0.2);
  width: 50%;
  height: auto;
  border-radius: 20px;
  padding: 2rem;
  @media only screen and (max-width: 768px) {
    width: 100%;
    height: auto;
  }
}
.service-Container {
  background-color: white;
  box-shadow: 5px 10px 40px rgba(2, 110, 122, 0.2);
  width: 50%;
  height: 55rem;
  border-radius: 20px;
  padding: 2rem;
  @media only screen and (max-width: 768px) {
    width: 93%;
    height: auto;
  }
}
.read-art {
  color: blue;
  font-size: 16px;
  font-weight: bold;
}
.header-contact {
  position: absolute;
  top: 18rem;
  left: 43rem;
  font-family: "Poppins", sans-serif;
  @media (max-width: 768px) {
    top: 16rem;
    left: 8rem;
  }
}
.header-service {
  position: absolute;
  top: 18rem;
  left: 37rem;
  font-family: "Poppins", sans-serif;
  @media (max-width: 768px) {
    top: 16rem;
    left: 8rem;
  }
}
.pearl-image {
  width: 86.5%;
  @media (max-width: 768px) {
    width: 93%;
  }
}
.service {
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 82%;
  margin-bottom: 8vw;
  @media only screen and (max-width: 768px) {
    margin-top: 2rem;
    width: 93%;
  }
}
.services {
  position: relative;
  left: 5rem;
  @media (max-width: 768px) {
    left: 0;
  }
}
.carousel-indicators {
  /* top: 52rem; */
  @media only screen and (max-width: 768px) {
    /* top: 12rem; */
  }
}
.Modern-text {
  top: -1rem;
  position: relative;
}
.about-us {
  margin-left: auto;
  margin-right: auto;
}
.carousel-indicators [data-bs-target] {
  width: 15px !important;
  height: 15px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  background-color: #e5f5f7 !important;
  margin: 0 3px !important;
}
.carousel-indicators .active {
  background-color: #026e7a !important;
  opacity: unset !important;
}
.navbar-toggler:focus {
  box-shadow: none;
}
.navbar-toggler-icon {
  background-image: url("/images/burger_Dental.svg") !important;
}
.teeth-container {
  width: 72vw;
  height: auto;
  padding-bottom: 25%;
  position: relative;
  box-shadow: 5px 10px 40px rgba(2, 110, 122, 0.2);
  border: none;
  background-color: #fff;
  margin-left: auto;
  margin-right: auto;
  @media only screen and (max-width: 768px) {
    top: 0;
    margin-left: auto;
    margin-right: auto;
    width: 93%;
    padding-bottom: 100%;
  }
}
.teeth-article {
  position: relative;
  top: 4rem;
  border-radius: 20px;
  @media only screen and (max-width: 768px) {
    width: 350px;
  }
  @media (min-width: 350px) and (max-width: 392px) {
    width: 300px;
  }
}
.article-content {
  position: relative;
  top: 8rem;
  left: 5rem;
  width: 88%;
  @media only screen and (max-width: 768px) {
    left: 0;
    width: 100%;
  }
}
.side-art {
  left: 2rem;
  top: 3rem;
  @media only screen and (max-width: 768px) {
    left: 0;
  }
}
.right-container {
  width: 20%;
  padding: 2rem;
  @media only screen and (max-width: 768px) {
    width: 100%;
  }
}
.art-admin {
  position: relative;
  top: 15rem;
}
.art-search {
  width: 100%;
  height: 50px;
  border: 1px solid #e9f3f4;
  border-radius: 20px;
  padding-left: 1rem;
}
.art-list {
  color: #026e7a;
  text-decoration: underline;
  position: relative;
  top: 2rem;
  font-size: 18px;
  line-height: 35px;
  font-weight: 500;
  font-family: "Poppins", sans-serif;
}
.search-icon {
  position: absolute;
  right: 3rem;
  margin-top: 1rem;
  color: #026e7a;
}
.art-search:focus-visible {
  outline: none;
}
.art-search::placeholder {
  color: #7eb5bb;
  font-size: 18px;
  font-family: "Poppins", sans-serif;
}
.art-right {
  background-color: #fff;
  width: 100%;
  height: auto;
  box-shadow: 5px 10px 40px rgba(2, 110, 122, 0.2);
  position: relative;
  padding: 1rem;
  padding-bottom: 15%;
  top: 3rem;
  @media only screen and (max-width: 768px) {
    height: 32rem;
  }
}
.back-arrow {
  position: absolute;
  top: 10vw;
  left: 11rem;
  color: #026e7a;
  font-size: 24px;
  font-weight: bold;
  background-color: #81b7bd29;
  padding: 1rem;
  border-radius: 30px;
  cursor: pointer;
  @media only screen and (max-width: 768px) {
    top: 50vw;
    left: 4vw;
    font-size: 18px;
    font-weight: bolder;
    padding: 0.5rem;
  }
}
.comments {
  background-color: #fff;
  width: 80%;
  height: 20rem;
  box-shadow: 5px 10px 40px rgba(2, 110, 122, 0.2);
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  padding: 1rem;
  border: 1px solid #e9f3f4;
  border-radius: 20px;

  @media only screen and (max-width: 768px) {
    width: 93%;
    height: 12rem;
  }
}
.comments:focus-visible {
  outline: none;
}
.comments::placeholder {
  color: #8995a8;
  font-size: 18px;
}
.comment-two {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  gap: 20px;
  @media only screen and (max-width: 768px) {
    width: 93%;
    position: relative;
  }
}
.comment {
  background-color: #fff;
  box-shadow: 5px 10px 40px rgba(2, 110, 122, 0.2);
  position: relative;
  padding: 1rem;
  border: 1px solid #e9f3f4;
  border-radius: 20px;
  width: 100%;
}
.comment:focus-visible {
  outline: none;
}
.comment::placeholder {
  color: #8995a8;
  font-size: 18px;
}
.second-button {
  background-color: #cce2e4;
  color: #026e7a;
  border: none;
  border-radius: 20px;
  width: 150px;
  height: 50px;
}
.article-first {
  left: 5rem;
  top: 5.5rem;
  @media only screen and (max-width: 768px) {
    left: 0;
    top: 4rem;
  }
}
.art-headone {
  width: 60vw;
  @media only screen and (max-width: 768px) {
    position: relative;
    width: 100%;
  }
}
.container-review {
  position: relative;
  top: -42rem;
  padding-left: 4%;
  padding-right: 6%;
  @media (max-width: 768px) {
    top: -10rem;
    padding-left: 6%;
    padding-right: 6%;
    padding-top: 4%;
  }
}
.review-banner {
  background-color: #e5f5f7;
  position: relative;
  top: -41rem;
  @media only screen and (max-width: 768px) {
    top: -3rem;
  }
}

.image-review {
  width: 686px;
  @media (max-width: 768px) {
    width: 300px;
    margin-left: 3rem;
    margin-top: 1rem;
  }
}
.star {
  width: 48px;
  @media only screen and (max-width: 768px) {
    width: 25px;
  }
}
.review-profile {
  width: 90%;
  height: auto;
  padding-bottom: 3rem;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  top: -5rem;
  box-shadow: 5px 10px 40px rgba(2, 110, 122, 0.2);
  border: none;
  background-color: #fff;
  border-radius: 25px;
}
.review-detail {
  width: 90%;
  height: auto;
  padding-bottom: 3rem;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  top: -5rem;
  /* box-shadow: 5px 10px 40px rgba(2, 110, 122, 0.2); */
  border: none;
  background-color: #e5f5f7;
  border-radius: 25px;
}
.rev-footer {
  margin-top: -30rem;
  @media only screen and (max-width: 768px) {
    margin-top: 0;
  }
}
.myth {
  width: 32%;
  @media only screen and (max-width: 768px) {
    width: 100%;
  }
}
.image-Dr {
  width: 28vw;
  @media only screen and (max-width: 768px) {
    width: 400px;
  }
  @media (min-width: 350px) and (max-width: 392px) {
    width: 350px;
  }
}
@media (max-width: 768px) {
  .footer-mob {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
  }
  .teeth-image {
    width: 300px;
  }
  .About {
    top: 8rem;
    position: relative;
  }
  .mission {
    margin-top: 5rem !important;
  }
  .nav-container {
    box-shadow: 5px 10px 40px rgba(2, 110, 122, 0.2);
    border-radius: 30px;
    background-color: #ffffffd4;
    backdrop-filter: blur(10.5px);
    z-index: 9;
    position: absolute;
    width: 93%;
    /* margin-left: 1rem !important; */
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .teeth-white {
    width: 100%;
  }
  .calendar {
    color: #026e7a;
    position: relative;
  }
  .navbar .navbar-nav .nav-link {
    border-bottom: 1px solid #026e7a;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .mob-bottom {
    margin-bottom: 8vw;
  }
  .Teeth-inner {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}