/* INDEX PAGE*/
/* 
01.Home Page 
02.AboutUS Page
03.Service Page
04.Portfolio Page
05.ContactUs Page
 */

/* ........................... */
/* Fonts */
/* ........................... */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap");

/* plus-jakarta-sans-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/plus-jakarta-sans-v12-latin-regular.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* plus-jakarta-sans-500 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/plus-jakarta-sans-v12-latin-500.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* plus-jakarta-sans-600 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/plus-jakarta-sans-v12-latin-600.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* plus-jakarta-sans-700 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/plus-jakarta-sans-v12-latin-700.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ........................... */
/* Comman Css */
/* ........................... */

html {
  font-size: 10px;
  margin: 0;
  padding: 0;
  height: 100%;
  /* overflow-x: hidden; */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.8rem;
  background-color: var(--color-white);
  overflow-x: hidden;
}

/* width */
body::-webkit-scrollbar {
  width: 8px;
}

/* Track */
body::-webkit-scrollbar-track {
  border-radius: 30px;
  background: #ffffff;
}

/* Handle */
body::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 30px;
}

::selection {
  color: #fff;
  background: var(--color-primary);
}

.row {
  padding: 0;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
ul,
p,
figure {
  padding: 0;
  margin: 0;
  list-style: none;
}

:root {
  --color-primary: #ff3b8a;
  --color-black: #1a1a1a;
  --color-light-black: #6f6f6f;
  --color-white: #ffffff;
  --color-blue: #42b3e5;
}

h1 {
  font-size: 5.2rem;
  line-height: 6.4rem;
}

h2 {
  font-size: 4rem;
  line-height: 6rem;
}

h3 {
  font-size: 2.4rem;
  line-height: 100%;
}

h4 {
  font-size: 2rem;
  line-height: 2.4rem;
}

a {
  text-decoration: none;
}

.containerX {
  margin: 0 10rem;
}

.section-margintop {
  margin-top: 15rem;
}

.theme-button {
  padding: 1.4rem 2.4rem;
  border-radius: 1.2rem;
  border: 0;
  background: var(--color-blue);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  transition: 0.3s;
  border: 1px solid transparent;
  max-width: 100%;
}

.theme-button:hover {
  border: 1px solid var(--color-blue);
  background: transparent;
  color: var(--color-blue);
}

.theme-button:hover img {
  filter: brightness(0) saturate(100%) invert(66%) sepia(38%) saturate(1800%)
    hue-rotate(170deg) brightness(95%) contrast(90%);
}

a.theme-button,
a.cta-button {
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

/*  Loader-section */
.Loader {
  width: 100%;
  height: 100vh;
  background: #fff;

  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;
}

.loader_img {
  width: 25rem;
  position: relative;
}

.loader_img img {
  width: 100%;
  display: block;
}

.loader_img::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 100%
  );
  transform: skewX(-25deg);
  z-index: 2;
  animation: shine 1.5s infinite;
}

@keyframes shine {
  0% {
    left: -75%;
  }

  100% {
    left: 125%;
  }
}

/* ............................... */
/* Home Page  */
/* ............................... */

/* 1.Topbar Section */
.topbar-section {
  background: var(--color-black);
  padding: 1.3rem 0;
}

.call-items {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--color-white);
  font-size: 1.6rem;
}

.topbar-section ul {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* 2.Navbar Section */
.navbar-section {
  padding: 3rem 10rem;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 9999;
  background: var(--color-white);
  transition: 1s;
}

.navbar-section.active {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-link,
.dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-link {
  display: flex;
  align-items: center;
  gap: 5rem;
}

.navbar-link > li > a {
  color: var(--color-black, #333);
  font-weight: 500;
  font-size: 1.6rem;
  text-decoration: none;
  transition: 0.3s;
  padding: 1rem 0;
}

.navbar-link > li > a:hover,
.navbar-link > li > a.active {
  color: var(--color-blue, #007bff);
}

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 150%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 1.5rem 2rem;
  gap: 1.5rem;
  opacity: 0;
  visibility: hidden;
  margin-top: 15px;
  transition: all 0.3s ease;
  z-index: 100;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2rem;
  width: 55rem;
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  margin-top: 0;
}

.dropdown-menu li {
  width: 100%;
}

.dropdown-menu li a {
  color: #444;
  font-size: 1.5rem;
  text-decoration: none;
  font-weight: 400;
  transition: 0.2s;
  display: block;
}

.dropdown-menu li a:hover {
  color: var(--color-blue, #00baee);
}

.locationsdropdown-menu {
  position: absolute;
  top: 150%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 1.5rem 2rem;
  gap: 1.5rem;
  opacity: 0;
  visibility: hidden;
  margin-top: 15px;
  transition: all 0.3s ease;
  z-index: 100;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 2rem;
  width: 30rem;
}

.dropdown:hover .locationsdropdown-menu {
  opacity: 1;
  visibility: visible;
  margin-top: 0;
}

.locationsdropdown-menu li {
  width: 100%;
}

.locationsdropdown-menu li a {
  color: #444;
  font-size: 1.5rem;
  text-decoration: none;
  font-weight: 400;
  transition: 0.2s;
  display: block;
}

.locationsdropdown-menu li a:hover {
  color: var(--color-blue, #00baee);
}

/* 3.hero Section */
.hero-section {
  background: #f7f7f7;
  padding: 10rem;
  border-radius: 3rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 8rem;
}

.heading-text span {
  color: var(--color-primary);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 50%;
  font-size: 1.4rem;
}

.heading-text h1 {
  font-weight: 800;
  font-family: "Onest", sans-serif;
  text-transform: capitalize;
  margin-top: 1.6rem;
  display: block;
}

.Doyouknow-content {
  margin-top: 2rem;
}

.Doyouknow-content span {
  color: var(--color-blue);
  font-size: 1.8rem;
  font-weight: 500;
}

.Doyouknow-content ul {
  list-style: auto;
  padding-left: 2rem;
}

.Doyouknow-content ul li {
  font-size: 1.6rem;
  color: var(--color-light-black);
  font-weight: 500;
  margin-top: 1.5rem;
}

.herosection-content p {
  color: var(--color-light-black);
  margin-top: 1.6rem;
}

.ExploreMore-button {
  padding: 1.4rem 1.8rem;
  border: 1px solid var(--color-blue);
  border-radius: 1.2rem;
  background: transparent;
  color: var(--color-blue);
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.6rem;
  font-weight: 500;
  transition: 0.3s;
  max-width: 100%;
}

.ExploreMore-button:hover {
  background: var(--color-blue);
  color: var(--color-white);
}

.ExploreMore-button img {
  transition: 0.3s;
}

.ExploreMore-button:hover img {
  rotate: 45deg;
  filter: brightness(0) invert(1);
}

.button-section {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 6rem;
}

.heroimages-section {
  position: relative;
}

/* .hero-images figure {
  display: block;
  mask-image: url(../images/bg-shapes.png);
  background-image: url(../images/bg-shapes.png);
  mask-size: cover;
  mask-position: center center;
  mask-repeat: no-repeat;
  border-radius: 3rem;
  width: 100%;
  height: 100%;
} */
 .hero-images {
  border-radius: 3rem;
  overflow: hidden;
 }

.hero-images img {
  scale: 1.11;
}

.HappyCustomers-items {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.HappyCustomers-items {
  position: absolute;
  bottom: 30px;
  right: 0;
}

.HappyCustomers-items h2 {
  font-weight: 700;
}

.HappyCustomers-items p {
  color: var(--color-black);
  font-weight: 500;
}

/*4. About Section */
.about-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 8.6rem;
  padding: 0 10rem;
  align-items: center;
}

.aboutimages-section {
  position: relative;
}

.about-images figure {
  display: block;
  mask-image: url(../images/about-shapes.png);
  background-image: url(../images/about-shapes.png);
  mask-size: cover;
  mask-position: center center;
  mask-repeat: no-repeat;
  border-radius: 3rem;
  width: 100%;
  height: 100%;
}

.experience-text {
  position: absolute;
  padding: 0.8rem 2.4rem;
  box-shadow: 0px 0px 10px 0px #0000001a;
  background: var(--color-primary);
  border-radius: 1.6rem;
  text-align: center;
  color: var(--color-white);
  bottom: 0;
  left: 0;
}

.experience-text h2 {
  font-weight: 800;
}

.experience-text p {
  font-weight: 600;
}

.About-text {
  color: var(--color-light-black);
  margin: 3.8rem 0;
}

.Aboutlist-ul {
  margin-bottom: 3rem;
}

.Aboutlist-ul li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.6rem;
}

.Aboutlist-ul li p {
  color: var(--color-black);
}

.KnowMore-text {
  color: var(--color-black);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.4rem;
}

.KnowMore-text img {
  transition: 0.3s;
}

.KnowMore-text:hover img {
  rotate: 45deg;
}

/*5. services-section */
.services-section {
  background: #f7f7f7;
  padding: 10rem;
  border-radius: 3rem;
}

.ourservices-right {
  padding-right: 4rem;
}

.ourservices-left {
  padding-left: 4rem;
}

.serviceslist-ul {
  margin-top: 4rem;
}

.serviceslist-ul li {
  padding: 2.4rem;
  transition: 0.3s;
  cursor: pointer;
  position: relative;
  border-radius: 1.6rem;
  margin-bottom: 0.8rem;
}

.serviceslist-ul li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #d0d5dd;
  height: 1px;
  width: 95%;
}

.serviceslist-ul li.active,
.serviceslist-ul li:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.serviceslist-ul li.active::after,
.serviceslist-ul li:hover::after {
  background: var(--color-primary);
  border-radius: 1.6rem;
}

.serviceslist-ul li:last-child::after {
  background-color: transparent;
}

.serviceslist-ul li:hover h4,
.serviceslist-ul li:hover p,
.serviceslist-ul li:hover a,
.serviceslist-ul li.active h4,
.serviceslist-ul li.active p,
.serviceslist-ul li.active a {
  color: var(--color-white);
}

.serviceslist-ul li a img {
  transition: 0.3s;
  margin-top: 5px;
}

.serviceslist-ul li.active a img,
.serviceslist-ul li:hover a img {
  rotate: 45deg;
  filter: brightness(0) invert(1);
}

.serviceslist-ul li h4 {
  color: var(--color-black);
  font-weight: 700;
  font-size: 2rem;
}

.serviceslist-ul li p {
  margin: 1.2rem 0;
  color: var(--color-light-black);
}

.serviceslist-ul li a {
  color: var(--color-black);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.4rem;
}

.ourservices-slider.owl-theme .owl-dots .owl-dot span {
  width: 16px;
  height: 16px;
  margin: 5px 7px;
  background: #1a1a1a1a;
  display: block;
  -webkit-backface-visibility: visible;
  transition: opacity 200ms ease;
  border-radius: 30px;
}

.ourservices-slider.owl-theme .owl-dots .owl-dot.active span,
.ourservices-slider.owl-theme .owl-dots .owl-dot:hover span {
  background: var(--color-primary);
}

.ourservices-slider .owl-item {
  overflow: hidden;
  border-radius: 3rem;
}

.ourservices-slider.owl-theme .owl-nav.disabled + .owl-dots {
  margin-top: 20px;
}

.play-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 6. info-section */
.info-content h4 {
  font-weight: 600;
  margin-bottom: 2rem;
}

.Infolist-ul {
  margin-bottom: 4rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1.6rem;
}

.Infolist-ul li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.Infolist-ul li p {
  color: var(--color-black);
}

/* 7. locations-section */
.location-section {
  background: #f7f7f7;
  padding: 10rem;
  border-radius: 3rem;
}

.Teams-section {
  background: #f7f7f7;
  padding: 10rem;
  border-radius: 3rem;
  /* margin-bottom: 35rem; */
}

.location-section h1 {
  font-weight: 700;
  margin-top: 1rem;
  text-align: center;
}

.Teams-section h1 {
  font-weight: 700;
  margin-top: 1rem;
  text-align: center;
}

.Locations-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin: 4rem 19rem 0;
}

.Locations-items {
  border-radius: 14px;
  padding: 3rem;
  transition: 0.3s;
  box-shadow: 0px 0px 20px 0px #0000000d;
  background: var(--color-white);
  position: relative;
}

.Locations-items:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.Locations-items:hover p,
.Locations-items:hover a {
  color: var(--color-white);
}

.Locations-items:hover .card-heading img {
  filter: brightness(0) invert(1);
}

.Locations-items a img {
  transition: 0.3s;
  margin-top: 0.5rem;
}

.Locations-items:hover a img {
  rotate: 45deg;
  filter: brightness(0) invert(1);
}

.card-heading {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.6rem;
}

.card-heading h4 {
  font-weight: 700;
}

.Locations-items p {
  font-size: 1.6rem;
  color: #6f6f6f;
  line-height: 2.4rem;
  margin-bottom: 1.6rem;
  font-weight: 500;
}

.know-more {
  text-decoration: none;
  font-size: 1.6rem;
  color: #000;
  font-weight: 600;
  display: inline-flex;
  gap: 1rem;
}

/* 9. treatment-section */
.card-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 3rem;
}

.treatment-card {
  margin-top: 4rem;
  background-color: var(--color-white);
  padding: 2.4rem;
  position: relative;
}

.treatment-card {
  display: block;
  mask-image: url(../images/treatments-bg.png);
  background-image: url(../images/treatments-bg.png);
  mask-size: cover;
  mask-position: center center;
  mask-repeat: no-repeat;
  border-radius: 3rem;
  width: 100%;
  height: 100%;
}

.treatment-card h3 {
  margin-top: 2.4rem;
  font-weight: 600;
}

.treatment-card p {
  color: var(--color-light-black);
  margin-top: 1rem;
  font-size: 1.8rem;
  margin-bottom: 5rem;
}

.treatment-button {
  padding: 1.4rem 1.8rem;
  border: 1px solid var(--color-black);
  border-radius: 1.2rem;
  background: transparent;
  color: var(--color-black);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.6rem;
  font-weight: 500;
  margin-top: -6rem;
  justify-self: center;
  transition: all 0.3s;
  position: relative;
  z-index: 1;
}

.treatment-button:hover {
  background-color: var(--color-blue);
  border: 1px solid var(--color-blue);
  color: var(--color-white);
}

.treatment-button img {
  transition: 0.3s;
  margin-top: 0.3rem;
}

.treatment-button:hover img {
  rotate: 45deg;
  filter: brightness(0) invert(1);
}

/* 10. testimonial section */
.testimonial-section {
  margin-bottom: 30rem;
}

.quote_icon img {
  max-width: 4rem;
  max-height: 4rem;
}

.carousel-headingSec {
  margin-bottom: 1.5rem;
}

.ourservicenew_Slider {
  margin-top: 4rem;
}

.ourservicenew_Slider .item h3 {
  font-size: 2rem;
  font-weight: 600;
  line-height: 2.8rem;
}

.ourservicenew_Slider .item p {
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 3rem;
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--color-light-black);
}

.ourservicenew_Slider .carousel-shadow:hover {
  transform: translateY(-15px);
}

.ourservicenew_Slider .owl-item-inner {
  padding: 10px;
  border-radius: 15px;
}

.ourservicenew_Slider .carousel-shadow {
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  padding: 2.4rem;
  border-radius: 20px;
  background: var(--color-White);
  text-align: center;
  transition: all 0.2s;
  margin: 10px;
  height: 28rem;
}

.ourservicenew_Slider.owl-carousel .owl-nav {
  display: flex;
  justify-content: center;
  gap: 4rem;
  margin-top: 4rem;
}

.ourservicenew_Slider.owl-carousel .owl-nav .owl-prev,
.ourservicenew_Slider.owl-carousel .owl-nav .owl-next {
  border: 1px solid var(--color-blue);
  border-radius: 12rem;
  color: var(--color-blue);
  width: 6rem;
  height: 6rem;
  font-size: 2.5rem;
}

.ourservicenew_Slider.owl-carousel .owl-nav .owl-prev.disabled,
.ourservicenew_Slider.owl-carousel .owl-nav .owl-next.disabled {
  border: 1px solid #6f6f6f80;
  color: #6f6f6f80;
}

/* 11.CTA-section */
.cta-content {
  background-color: var(--color-blue);
  padding: 4rem;
  color: var(--color-white);
  text-align: center;
  border-radius: 3rem;
  position: relative;
  overflow: hidden;
  margin-top: -20rem;
}

.cta-section {
  position: relative;
}

.cta-section h1 {
  font-weight: 700;
  margin-bottom: 2rem;
}

.cta-button {
  padding: 1.4rem 2.4rem;
  border-radius: 1.2rem;
  border: 1px solid transparent;
  background: var(--color-primary);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-self: center;
  gap: 0.8rem;
  margin-top: 4rem;
  transition: 0.3s;
  max-width: 100%;
  position: relative;
  z-index: 1;
}

.cta-button:hover {
  border: 1px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
}

.cta-button:hover img {
  filter: invert(47%) sepia(87%) saturate(3520%) hue-rotate(316deg)
    brightness(102%) contrast(101%);
}

.cta-leftpattern {
  position: absolute;
  left: 0%;
  bottom: 0%;
}

.cta-rightpattern {
  position: absolute;
  right: 0%;
  top: 0%;
}

/* 12.footer-section */
.footer-section {
  padding-bottom: 6rem;
}

.footer-sec {
  background-color: var(--color-black);
  border-radius: 3rem;
  padding: 5rem 10rem;
  color: #ffffffcc;
}

.footer-top {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 6rem;
}

.footer-leftContent p {
  font-size: 1.6rem;
  margin-top: 1.6rem;
}

.footer-rightContent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10rem;
}

.footer-sec h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 2rem;
}

.footer-sec ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-sec ul li {
  margin-top: 1.2rem;
}

.footer-sec ul li a {
  margin-top: 1.2rem;
  font-size: 1.6rem;
  font-weight: 500;
  color: #ffffffcc;
}

.footer-sec ul li a:hover {
  color: var(--color-white);
}

.footer-icons {
  display: flex;
  gap: 2rem;
  margin-top: 2rem !important;
}

.footer-icons a {
  width: 4rem;
  height: 4rem;
  border: 1px solid var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  color: var(--color-white);
  transition: 0.3s;
}

.footer-icons a:hover {
  color: var(--color-blue);
  border-color: var(--color-blue);
}

.footer-icons a i {
  transition: 0.3s;
}

.footer-icons a:hover i {
  color: var(--color-blue);
}

.footer-bottom {
  border-top: 1px solid #ffffff33;
  margin-top: 6rem;
  padding-top: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.6rem;
  color: var(--color-white);
}

.footer-links {
  display: flex;
  gap: 3rem;
}

.footer-links a {
  color: var(--color-white);
  font-size: 1.6rem;
}

/* ............................... */
/* About Page  */
/* ............................... */
/* About Section */
.tophero-section {
  height: 25rem;
  border-radius: 3rem;
  overflow: hidden;
  position: relative;
}

.tophero-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #1a1a1a99;
}

.tophero-img,
.tophero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tophero-heading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1;
  width: 100%;
}

.page-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.6rem;
}

.tophero-heading p {
  color: var(--color-white);
  font-size: 6.2rem;
  line-height: 7.2rem;
  font-weight: 700;
}

.tophero-heading ul li a {
  font-size: 1.8rem;
  line-height: 2.4rem;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35);
}

.pink-color {
  color: var(--color-primary);
}

.white-color {
  color: var(--color-white);
}

/* Ourapproach Section */
.ourapproach-section {
  padding: 15rem 10rem;
  background: #f7f7f7;
  border-radius: 3rem;
}

.ourapproach-heading {
  width: 50%;
  text-align: center;
  margin: 0 auto;
}

.ourapproach-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 4rem;
  margin-top: 4rem;
}

.ourapproach-items {
  border: 1px solid #1a1a1a33;
  padding: 2.4rem;
  border-radius: 1.6rem;
  transition: 0.3s;
}

.ourapproach-items:hover {
  background-color: var(--color-primary);
}

.ourapproach-items:hover h4 {
  color: var(--color-white);
}

.ourapproach-items:hover p {
  color: #ffffffe5;
}

.ourapproach-items:hover .ourapproach-icon img {
  filter: brightness(0) invert(1);
}

.ourapproach-items h4 {
  font-weight: 700;
  color: var(--color-black);
  margin-top: 2rem;
}

.ourapproach-items p {
  margin-top: 1.2rem;
  color: var(--color-light-black);
  font-weight: 500;
}

/* Directors Section */
.directors-heading {
  width: 28%;
  text-align: center;
  margin: 0 auto;
}

.directors-section {
  margin: 0 10rem;
}

.directors-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 8.6rem;
  margin-top: 8.6rem;
}

.doctor-heading {
  margin-bottom: 4rem;
}

.doctor-heading h2 {
  font-weight: 700;
  font-family: "Onest", sans-serif;
}

.doctor-heading span {
  color: var(--color-primary);
  font-size: 1.4rem;
  font-weight: 500;
  text-transform: uppercase;
}

.directors-content p {
  font-weight: 500;
  color: var(--color-light-black);
  margin-bottom: 4rem;
  line-height: 3rem;
}

.directors1-images,
.directors2-images {
  overflow: hidden;
}

.directors1-images img,
.directors2-images img {
  height: 100%;
}

.directors1-images figure {
  display: block;
  mask-image: url(../images/directors1-bg.png);
  background-image: url(../images/directors1-bg.png);
  mask-size: cover;
  mask-position: center center;
  mask-repeat: no-repeat;
  border-radius: 3rem;
  width: 100%;
  height: 100%;
}

.directors2-images figure {
  display: block;
  mask-image: url(../images/directors2-bg.png);
  background-image: url(../images/directors2-bg.png);
  mask-size: cover;
  mask-position: center center;
  mask-repeat: no-repeat;
  border-radius: 3rem;
  width: 100%;
  height: 100%;
}

.doctor1-name {
  padding: 1.5rem 2.2rem;
  background: var(--color-primary);
  border-radius: 1.6rem;
  position: absolute;
  text-align: center;
  bottom: 0;
  right: 0;
  width: 50%;
}

.doctor2-name {
  padding: 1.5rem 2.2rem;
  background: var(--color-primary);
  border-radius: 1.6rem;
  position: absolute;
  text-align: center;
  bottom: 0;
  left: 0;
  width: 50%;
}

.doctor2-name p,
.doctor1-name p {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--color-white);
  margin-bottom: 0.4rem;
}

.doctor2-name span,
.doctor1-name span {
  color: var(--color-white);
  font-weight: 600;
  text-transform: capitalize;
  font-size: 1.6rem;
}

/* ........................................ */
/* Services Page */
/* ........................................ */

.Services-heading {
  width: 40%;
  margin: 0 auto;
  text-align: center;
}

.mainservices-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 3rem;
  margin: 4rem 10rem 35rem 10rem;
}

.Services-card {
  position: relative;
}

.Services-card h3 {
  margin-top: 2.4rem;
  font-weight: 600;
}

.Services-card p {
  color: var(--color-light-black);
  margin-top: 1rem;
  font-size: 1.8rem;
  margin-bottom: 5rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.Services-button {
  padding: 1.4rem 1.8rem;
  border: 1px solid var(--color-black);
  border-radius: 1.2rem;
  background: transparent;
  color: var(--color-black);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.6rem;
  font-weight: 500;
  justify-self: center;
  transition: all 0.3s;
  position: relative;
  z-index: 1;
}

.Services-button:hover {
  background-color: var(--color-blue);
  border: 1px solid var(--color-blue);
  color: var(--color-white);
}

.Services-button img {
  transition: 0.3s;
  margin-top: 0.3rem;
}

.Services-button:hover img {
  rotate: 45deg;
  filter: brightness(0) invert(1);
}

.services-bgpattern img {
  width: 100%;
  height: 100%;
}

.Services-content {
  position: absolute;
  top: 0;
  padding: 2rem;
}

/* .............................. */
/* Contact Us */
/* .............................. */
.contact-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 3rem;
  margin: 0 10rem;
  margin-top: 4rem;
}

.contactus-box {
  border: 1px solid #1a1a1a33;
  padding: 2.4rem;
  border-radius: 1.6rem;
}

.contactus-box img {
  background-color: var(--color-blue);
  padding: 1.4rem;
  border-radius: 1.2rem;
}

.contactus-box h4 {
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1.2rem;
}

.contactus-box p a {
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 0.8rem;
  color: #1a1a1ae5;
}

.contactus-box span {
  font-size: 1.6rem;
  font-weight: 500;
  color: #6f6f6f;
  margin-top: 1rem;
  display: block;
}

.location-mapiframe {
  height: 25rem;
  margin-top: 2rem;
  border-radius: 2.4rem;
  overflow: hidden;
}

.location-mapiframe iframe {
  width: 100%;
  height: 100%;
}

/* 4. get in touch */
.getintouch-section {
  background: #f7f7f7;
  padding: 10rem;
  border-radius: 3rem;
}

.getintouch-content {
  margin-top: 4rem;
}

.form-container {
  background: var(--color-white);
  padding: 2.4rem;
  border-radius: 1.6rem;
  margin: auto;
  max-width: 60%;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group.full {
  margin-bottom: 2.4rem;
}

.form-row {
  display: flex;
  gap: 2.4rem;
  margin-bottom: 2.4rem;
}

.form-row .form-group {
  width: 50%;
}

label {
  font-size: 1.4rem;
  margin-bottom: 0.8rem;
  color: var(--color-black);
  font-weight: 500;
}

input,
textarea {
  width: 100%;
  padding: 1.6rem;
  border: 1px solid #d0d5dd;
  border-radius: 1.2rem;
  font-size: 1.4rem;
  outline: none;
  transition: 0.3s;
}

input:focus,
textarea:focus {
  border-color: #42b3e5;
}

textarea {
  height: 14rem;
  resize: none;
}

.submit-btn {
  width: 100%;
  padding: 1.4rem;
  border: 1px solid var(--color-blue);
  border-radius: 1.2rem;
  background: var(--color-blue);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 500;
  cursor: pointer;
  transition: 0.3s;
}

.submit-btn:hover {
  background: transparent;
  color: var(--color-blue);
  border: 1px solid var(--color-blue);
}

.getintouch-map iframe {
  width: 100%;
  height: 100%;
  border-radius: 3rem;
}

/* ............................... */
/* Service Detail */
/* ............................... */
.servicedetail-section {
  display: grid;
  grid-template-columns: 45rem auto 45rem;
  grid-gap: 6rem;
  align-items: start;
}

.servicedetail-section h3 {
  font-size: 3.6rem;
  font-weight: 700;
  color: var(--color-black);
  margin-top: 4rem;
}

.servicedetail-section h3:first-child {
  margin-top: 0;
}

.servicedetail-section p {
  font-size: 1.8rem;
  font-weight: 500;
  color: #585656;
  margin-top: 3rem;
}

.servicedetail-img {
  position: sticky;
  top: 120px;
  height: 30rem;
  border-radius: 3rem;
  overflow: hidden;
}

.servicedetail-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.tab-content img {
  width: 100%;
}

.tabs_sections {
  background-color: #f7f7f7;
  padding: 2.4rem;
  border-radius: 2rem;
  position: sticky;
  top: 120px;
  height: fit-content;
}

.tabs_sections h4 {
  font-size: 3.4rem;
  font-weight: 700;
  color: #000000;
}

.border-bottom {
  border-bottom: 1px solid #d9d9d9;
  margin: 2.4rem 0;
}

.tabs_items li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 2rem;
  font-weight: 500;
  color: #333;
  transition: 0.3s;
  margin: 0.8rem 0;
  padding: 1.4rem;
  cursor: pointer;
}

.tabs_items li:hover {
  background: #ececec;
  border-radius: 1.2rem;
}

.tabs_items li img {
  transition: 0.3s;
}

.tabs_items li.current img {
  rotate: 45deg;
  filter: brightness(0) invert(1);
}

.tabs_items li.current {
  background: var(--color-blue);
  color: var(--color-white);
  font-weight: 500;
  border-radius: 1.2rem;
  padding: 1.4rem;
}

.tab-content {
  display: none;
}

.tab-content.current {
  display: inherit;
}

.servicecont-margintop {
  margin-top: 6rem;
}

/* ............................... */
/* Book Appointment */
/* ............................... */
.modal {
  z-index: 999999;
}

.modal-book {
  padding: 3rem;
}

.modal-book h4 {
  font-size: 2.8rem;
  text-align: center;
  margin-bottom: 2.4rem;
  font-family: "Onest", sans-serif;
  font-weight: 600;
}

.book-dialog {
  max-width: 700px;
}

.close-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 2.8rem;
}

.modal-content {
  border: 0;
  border-radius: 3rem;
}

.modal-backdrop {
  z-index: 9999;
}

/* ............................... */
/* Location Section */
/* ............................... */

.locationList-ul {
  margin-bottom: 4rem;
}

.locationList-ul li {
  margin-bottom: 2rem;
}

.locationList-points {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.locationList-ul li span {
  color: var(--color-black);
  font-size: 2rem;
  font-weight: 600;
}

.locationList-ul li p {
  color: var(--color-light-black);
  font-size: 1.6rem;
  font-weight: 500;
  margin-left: 3.4rem;
  margin-top: 0.8rem;
}

.location-map {
  height: 100%;
}

.location-map iframe {
  width: 100%;
  height: 100%;
  border-radius: 3rem;
}

.workingHours-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 4rem;
}

.workinghours-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 8.6rem;
  padding: 0 10rem;
}

.teamsCards-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 3rem;
  margin-top: 4rem;
}

.teams-card {
  position: relative;
  overflow: hidden;
  border-radius: 25px;
}

.teamscard-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  color: var(--color-white);
  text-align: center;
  padding: 2rem;
  transform: translateY(100%);
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  border-radius: 25px;
}

.teamscard-content > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.teamscard-content p {
  font-size: 2.8rem;
  font-weight: 600;
}

.teamscard-content span {
  display: block;
  font-size: 1.5rem;
  font-weight: 500;
  margin-top: 1rem;
  opacity: 0.9;
}

.teamscard-content .section-line {
  border-bottom: 1px solid var(--color-white);
  padding-bottom: 1.5rem;
}

.teams-card:hover .teamscard-content {
  transform: translateY(0);
}

.teams-doctorcontent {
  position: relative;
  overflow-y: auto;
  margin-top: 2rem;
  padding-right: 15px;
  height: 42rem;
  text-align: start;
  box-sizing: border-box;
}

/* .teams-doctorcontent::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 1px;
  background: var(--color-white);
} */

.teams-doctorcontent::-webkit-scrollbar {
  width: 4px;
  border-radius: 10px;
}

.teams-doctorcontent::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.teams-doctorcontent::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

.teams-doctorcontent span {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  opacity: 0.9;
}

/* Marquee */
.logo-marquee {
  position: relative;
}

.logo-marquee--marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  margin-bottom: 3rem;
}

.logo-marquee--marquee-group {
  display: flex;
  flex-shrink: 0;
}

.logo-marquee--gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image:
    linear-gradient(
      90deg,
      rgba(247, 247, 247, 1) 0%,
      rgba(247, 247, 247, 0) 20%
    ),
    linear-gradient(
      270deg,
      rgba(247, 247, 247, 1) 0%,
      rgba(247, 247, 247, 0) 20%
    );
  z-index: 2;
}

.scroll-left {
  animation: scroll-left 30s linear infinite;
}

.scroll-right {
  animation: scroll-right 30s linear infinite;
}

.logo-marquee--marquee-group img {
  padding: 0 2rem;
  width: auto;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes scroll-right {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}

.locationServices-section {
  margin: 4rem 10rem 0 10rem;
}

.locationServices-card {
  position: relative;
}

.locationServices-card h3 {
  margin-top: 2.4rem;
  font-weight: 600;
}

.locationServices-card p {
  color: var(--color-light-black);
  margin-top: 1rem;
  font-size: 1.8rem;
  margin-bottom: 4rem;
}

.locationServices-button {
  padding: 1.4rem 1.8rem;
  border: 1px solid var(--color-black);
  border-radius: 1.2rem;
  background: transparent;
  color: var(--color-black);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.6rem;
  font-weight: 500;
  justify-self: center;
  transition: all 0.3s;
  position: relative;
  z-index: 1;
}

.locationServices-button:hover {
  background-color: var(--color-blue);
  border: 1px solid var(--color-blue);
  color: var(--color-white);
}

.locationServices-button img {
  transition: 0.3s;
  width: auto !important;
  margin-top: 0.3rem;
}

.locationServices-button:hover img {
  rotate: 45deg;
  filter: brightness(0) invert(1);
}

.locationServices-bgpattern img {
  width: 100%;
  height: 100%;
}

/* .locationServices-content {
  position: absolute;
  top: 0;
  padding: 2rem;
} */

.locationServices-content {
  padding: 2rem;
  border: 1px solid #d9d9d9;
  border-radius: 2rem;
}

.locationServices-content p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

.locationServices-carousel.owl-carousel .owl-nav .owl-prev,
.locationServices-carousel.owl-carousel .owl-nav .owl-next {
  border: 1px solid var(--color-blue);
  border-radius: 12rem;
  color: var(--color-blue);
  width: 6rem;
  height: 6rem;
  font-size: 2.5rem;
  margin: 0;
  position: absolute;
}

.locationServices-carousel.owl-carousel .owl-nav .owl-prev.disabled,
.locationServices-carousel.owl-carousel .owl-nav .owl-next.disabled {
  border: 1px solid #6f6f6f80;
  color: #6f6f6f80;
}

.locationServices-carousel.owl-theme .owl-nav [class*="owl-"]:hover {
  background: transparent;
  color: var(--color-blue);
}

.locationServices-carousel.owl-carousel .owl-nav .owl-prev {
  top: 50%;
  transform: translateX(-50%);
  left: -40px;
}

.locationServices-carousel.owl-carousel .owl-nav .owl-next {
  top: 50%;
  transform: translateX(-50%);
  left: calc(100% + 45px);
}
.location-img {
  border-radius: 3rem;
  overflow: hidden;
}

.location-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.MedicalTeam-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 4rem;
}

.MedicalTeam-content {
  text-align: center;
}

.MedicalTeam-content h3 {
  font-weight: 700;
  color: var(--color-black);
  font-family: "Onest", sans-serif;
  margin-top: 1rem;
}

.MedicalTeam-content span {
  color: var(--color-primary);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 30%;
  font-size: 1.2rem;
}

.MedicalTeam-content p {
  font-size: 1.8rem;
  color: var(--color-light-black);
  margin-top: 2rem;
  line-height: 3.2rem;
}

.MedicalTeam-content {
  padding: 6rem 10rem;
  background: #f7f7f7;
  border-radius: 3rem;
}

.OurPatrons-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 3rem;
  padding: 0 25rem;
  margin-bottom: 35rem;
  margin-top: 4rem;
}

.OurPatrons-items {
  position: relative;
  border-radius: 3rem;
  overflow: hidden;
}

.OurPatrons-content {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  padding: 2rem;
  width: 100%;
  text-align: center;
}

.OurPatrons-content span {
  display: block;
}

.OurPatrons-content p {
  color: var(--color-white);
  font-size: 2.4rem;
  font-weight: 600;
}

.OurPatrons-content span {
  display: block;
  font-size: 1.4rem;
  font-weight: 500;
  margin-top: 0.8rem;
  opacity: 0.9;
  color: var(--color-white);
}