@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&display=swap');

html,
body {
  font-family: 'Inter', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.section-title,
.about-title,
.reviews-title,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
  font-weight: 600;
}

/* Patient Reviews Section Style */
.patient-reviews-section {
  background: linear-gradient(180deg, #e3edf7 0%, #f5f8fc 100%) !important;
  /* border-top: 1px solid #d5e3f2; */
  padding: 0 0 80px 0;
  position: relative;
  overflow: hidden;
}

.reviews-badge {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--clinic-heading, #0f3d6b);
  background-color: rgba(0, 112, 192, 0.05);
  border: none !important;
  padding: 6px 16px;
  border-radius: 50px;
  text-transform: none;
  margin-bottom: 12px;
}

.reviews-badge::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: var(--clinic-primary, #0070c0);
  margin-right: 8px;
  flex-shrink: 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -16 439.504 439.504' fill='black'%3E%3Cpath stroke='black' stroke-width='16' stroke-linejoin='round' d='M376.328,45.601c-21.131-23.658-50.213-36.686-81.891-36.686c-24.766,0-51.477,14.735-70.994,25.501c-7.105,3.922-16.821,9.284-19.693,9.637c-2.859-0.347-12.525-5.695-19.613-9.616C164.67,23.666,138.009,8.915,113.068,8.915c-31.679,0-60.762,13.028-81.894,36.686C11.071,68.108,0,97.734,0,129.021c0,44.695,16.05,108.255,42.933,170.029c11.96,27.484,24.691,51.233,36.816,68.68c14.432,20.766,26.817,30.859,37.864,30.859c4.902,0,13.878-2.079,18.914-16.007c4.894-13.534,9.296-29.069,13.964-45.547c12.354-43.606,27.728-97.878,52.48-97.878h1.563c11.005,0,20.856,9.426,30.115,28.818c9.172,19.209,16.145,44.752,22.898,69.485c4.463,16.351,8.68,31.792,13.416,45.085c4.934,13.842,13.809,15.912,18.666,15.915c10.992-0.001,23.365-10.249,37.828-31.329c12.094-17.626,24.852-41.611,36.895-69.361c27.02-62.271,43.152-125.354,43.152-168.75C407.504,97.733,396.432,68.107,376.328,45.601 M286.797,77.685c-0.254-0.017-25.844-1.242-49.139-7.411c-10.504-2.781-22.924-8.369-22.924-10.027c0-1.614,13.494-9.471,16.748-11.267c17.924-9.888,42.469-23.43,62.955-23.43c60.361,0,96.432,52.609,96.432,103.471c0,40.62-16.008,102.744-41.779,162.126c-11.457,26.404-24.012,50.047-35.35,66.572c-13.082,19.067-21.547,24.61-24.111,24.105c-1.574-0.311-1.77-1.427-2.994-4.865c-4.531-12.712-8.668-27.863-13.047-43.904c-6.938-25.41-14.109-51.687-23.928-72.25c-12.301-25.762-27.062-38.285-45.126-38.285h-1.563c-17.401,0-31.821,12.423-44.081,37.978c-9.786,20.397-17.218,46.631-24.404,72.002c-4.58,16.165-8.905,31.436-13.602,44.424c-1.037,2.867-1.357,4.739-3.271,5.029c-1.5,0.228-7.907-0.269-24.204-23.718c-11.346-16.325-23.855-39.702-35.223-65.824C32.556,233.517,16.635,170.91,16.635,129.02c0-50.862,36.071-103.471,96.433-103.471c15.69,0,36.309,7.149,55.155,19.124c2.764,1.757,6.656,4.748,10.42,7.642c1.502,1.155,2.982,2.292,4.36,3.329c4.418,3.309,10.388,7.636,17.398,11.763c2.989,1.764,6.708,3.96,10.658,5.636c15.105,6.412,31.121,9.663,47.602,9.663c16.793,0,28.088-2.987,28.199-3.022c0,0,2.527-0.668,2.447-1.325C289.227,77.702,286.797,77.685,286.797,77.685z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -16 439.504 439.504' fill='black'%3E%3Cpath stroke='black' stroke-width='16' stroke-linejoin='round' d='M376.328,45.601c-21.131-23.658-50.213-36.686-81.891-36.686c-24.766,0-51.477,14.735-70.994,25.501c-7.105,3.922-16.821,9.284-19.693,9.637c-2.859-0.347-12.525-5.695-19.613-9.616C164.67,23.666,138.009,8.915,113.068,8.915c-31.679,0-60.762,13.028-81.894,36.686C11.071,68.108,0,97.734,0,129.021c0,44.695,16.05,108.255,42.933,170.029c11.96,27.484,24.691,51.233,36.816,68.68c14.432,20.766,26.817,30.859,37.864,30.859c4.902,0,13.878-2.079,18.914-16.007c4.894-13.534,9.296-29.069,13.964-45.547c12.354-43.606,27.728-97.878,52.48-97.878h1.563c11.005,0,20.856,9.426,30.115,28.818c9.172,19.209,16.145,44.752,22.898,69.485c4.463,16.351,8.68,31.792,13.416,45.085c4.934,13.842,13.809,15.912,18.666,15.915c10.992-0.001,23.365-10.249,37.828-31.329c12.094-17.626,24.852-41.611,36.895-69.361c27.02-62.271,43.152-125.354,43.152-168.75C407.504,97.733,396.432,68.107,376.328,45.601 M286.797,77.685c-0.254-0.017-25.844-1.242-49.139-7.411c-10.504-2.781-22.924-8.369-22.924-10.027c0-1.614,13.494-9.471,16.748-11.267c17.924-9.888,42.469-23.43,62.955-23.43c60.361,0,96.432,52.609,96.432,103.471c0,40.62-16.008,102.744-41.779,162.126c-11.457,26.404-24.012,50.047-35.35,66.572c-13.082,19.067-21.547,24.61-24.111,24.105c-1.574-0.311-1.77-1.427-2.994-4.865c-4.531-12.712-8.668-27.863-13.047-43.904c-6.938-25.41-14.109-51.687-23.928-72.25c-12.301-25.762-27.062-38.285-45.126-38.285h-1.563c-17.401,0-31.821,12.423-44.081,37.978c-9.786,20.397-17.218,46.631-24.404,72.002c-4.58,16.165-8.905,31.436-13.602,44.424c-1.037,2.867-1.357,4.739-3.271,5.029c-1.5,0.228-7.907-0.269-24.204-23.718c-11.346-16.325-23.855-39.702-35.223-65.824C32.556,233.517,16.635,170.91,16.635,129.02c0-50.862,36.071-103.471,96.433-103.471c15.69,0,36.309,7.149,55.155,19.124c2.764,1.757,6.656,4.748,10.42,7.642c1.502,1.155,2.982,2.292,4.36,3.329c4.418,3.309,10.388,7.636,17.398,11.763c2.989,1.764,6.708,3.96,10.658,5.636c15.105,6.412,31.121,9.663,47.602,9.663c16.793,0,28.088-2.987,28.199-3.022c0,0,2.527-0.668,2.447-1.325C289.227,77.702,286.797,77.685,286.797,77.685z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.reviews-title {
  font-size: 42px;
  font-weight: 700;
  color: #005096;
  margin-bottom: 18px;
  line-height: 1.25;
}

/* Premium Gradient Text Style for Highlighted Title Words */
.title-highlight {
  background: linear-gradient(135deg, #0070c0 0%, #00d2c4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-weight: inherit;
}

.text-white .title-highlight,
.page-header .title-highlight,
.home-doctors .title-highlight {
  background: linear-gradient(135deg, #00d2c4 0%, #00b0f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.reviews-desc {
  font-size: 15px;
  color: #586b7d;
  max-width: 600px;
  margin: 0 auto 24px auto;
  line-height: 1.6;
}

.google-rating-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border: 1px solid #d0e0f0;
  padding: 10px 24px;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  font-size: 14px;
  color: #3b5070;
  font-weight: 500;
  margin-bottom: 50px;
  transition: transform 0.3s ease;
}

.google-rating-pill:hover {
  transform: translateY(-2px);
}

.google-rating-pill svg {
  margin-right: 8px;
}

.reviews-slider-container {
  position: relative;
  padding: 0 50px;
}

.reviews-swiper {
  overflow: hidden;
  padding: 15px 15px 60px 15px !important;
  margin: 0 -15px;
}

.review-card {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.025);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: none;
  position: relative;
  text-align: left;
}

.review-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.05);
}

.review-stars {
  color: #fbc02d;
  font-size: 15px;
  margin-bottom: 16px;
  display: flex;
  gap: 3px;
}

.review-text {
  font-size: 14.5px;
  line-height: 1.65;
  color: #3b4654;
  margin-bottom: 24px;
  flex-grow: 1;
}

.review-user {
  display: flex;
  align-items: center;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dotted #b8d2eb;
}

.review-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  margin-right: 12px;
  flex-shrink: 0;
  text-transform: uppercase;
}

.bg-av-1 {
  background-color: #0070c0;
}

.bg-av-2 {
  background-color: #005086;
}

.bg-av-3 {
  background-color: #00b0f0;
}

.bg-av-4 {
  background-color: #0c3e72;
}

.bg-av-5 {
  background-color: #0088d2;
}

.bg-av-6 {
  background-color: #3aa8f2;
}

.user-details {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.user-name {
  font-weight: 700;
  font-size: 15px;
  color: #0f3d6b;
  margin: 0;
  line-height: 1.2;
}

.user-source {
  font-size: 12px;
  color: #637688;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Custom Navigation Arrows */
.reviews-swiper-button-prev,
.reviews-swiper-button-next {
  position: absolute;
  top: calc(50% - 30px);
  width: 42px;
  height: 42px;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0070c0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  z-index: 10;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e2edf8;
}

.reviews-swiper-button-prev {
  left: 0;
}

.reviews-swiper-button-next {
  right: 0;
}

.reviews-swiper-button-prev:hover,
.reviews-swiper-button-next:hover {
  background-color: #0070c0;
  color: #ffffff;
  border-color: #0070c0;
  box-shadow: 0 6px 20px rgba(0, 112, 192, 0.25);
  transform: scale(1.05);
}

.reviews-swiper-button-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* Custom Pagination Dots */
.reviews-swiper-pagination {
  position: absolute;
  bottom: 15px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  z-index: 10;
}

.reviews-swiper-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background-color: #d0e0f0;
  opacity: 1;
  border-radius: 50%;
  transition: all 0.3s ease;
  margin: 0 !important;
  cursor: pointer;
}

.reviews-swiper-pagination .swiper-pagination-bullet-active {
  background-color: #0070c0;
  width: 22px;
  border-radius: 5px;
}

/* Responsive Styles */
@media (max-width: 991.98px) {
  .reviews-title {
    font-size: 34px;
  }

  .reviews-slider-container {
    padding: 0 35px;
  }
}

@media (max-width: 767.98px) {
  .patient-reviews-section {
    padding: 60px 0;
  }

  .reviews-title {
    font-size: 26px;
  }

  .reviews-desc {
    font-size: 14px;
  }

  .reviews-slider-container {
    padding: 0 10px;
  }

  .reviews-swiper-button-prev,
  .reviews-swiper-button-next {
    display: none !important;
  }

  .reviews-swiper {
    padding: 15px 15px 45px 15px !important;
  }
}

/* ============================== */
/*  UNIVERSAL SERVICES PAGE STYLE */
/* ============================== */
:root {
  --clinic-primary: #0070c0;
  --clinic-accent: linear-gradient(135deg, #097cd4 0%, #00d2c4 100%);
  --clinic-accent-color: #097cd4;
  --clinic-accent-light: #f4f9fc;
  --clinic-accent-border: #d0e3f0;
  --clinic-text: #3b4654;
  --clinic-heading: #0f3d6b;

  /* Bootstrap Global Primary Overrides (Premium Sapphire Blue instead of standard #0d6efd) */
  --bs-primary: #0070c0 !important;
  --bs-primary-rgb: 0, 112, 192 !important;
  --bs-link-color: #0070c0 !important;
  --bs-link-color-rgb: 0, 112, 192 !important;
  --bs-link-hover-color: #097cd4 !important;
  --bs-link-hover-color-rgb: 9, 124, 212 !important;
}

html {
  overflow-x: clip;
  max-width: 100vw;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

body {
  overflow-x: clip;
  position: relative;
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
}

.text-primary-dark {
  color: var(--clinic-heading);
}

/* Service Intro Box styling */
.service-intro-card {
  border-left: 5px solid var(--clinic-primary);
  background-color: #f0f6fc;
  border-radius: 0 16px 16px 0;
  border-top: 1px solid #e2effa;
  border-right: 1px solid #e2effa;
  border-bottom: 1px solid #e2effa;
}

/* Service Sub-Cards styling */
.service-sub-card {
  border: 1px solid #eef2f5;
  border-radius: 16px;
  background-color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  overflow: hidden;
}

.service-sub-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 112, 192, 0.06);
  border-color: #d1e2f2;
}

.service-sub-card-img-wrapper {
  overflow: hidden;
  position: relative;
  aspect-ratio: 3 / 1.7;
  background-color: #f8fafc;
}

.service-sub-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.service-sub-card:hover .service-sub-card-img {
  transform: scale(1.05);
}

.service-sub-card-title {
  color: var(--clinic-heading);
  font-weight: 700;
  font-size: 1.25rem;
}

/* Sidebar Action Card CSS */
.sidebar-action-card {
  background: var(--clinic-accent);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(9, 124, 212, 0.15);
}

.sidebar-action-card-img-wrapper {
  height: 220px;
  overflow: hidden;
  position: relative;
}

/* Surgeon surgery mask image placement */
.sidebar-action-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

.sidebar-action-card-body {
  padding: 30px 25px;
}

.sidebar-action-card-title i {
  font-size: 1.45rem;
  color: #ffffff;
  margin-right: 10px;
  flex-shrink: 0;
}

.sidebar-action-card-title {
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.5px;
  color: #ffffff;
}

.sidebar-action-card-text {
  font-weight: 400;
  font-size: 0.98rem;
  color: #e0f2fe;
  /* Light blue/cyan tint */
  line-height: 1.5;
}

/* Sidebar Action Button styling matching image */
.btn-sidebar-action {
  background-color: #ffffff;
  color: #277bbc;
  border: none;
  border-radius: 14px;
  font-weight: 600;
  padding: 14px 20px;
  font-size: 1.05rem;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-sidebar-action:hover {
  background-color: #ffffff;
  opacity: 0.95;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.btn-sidebar-action i {
  transition: transform 0.3s ease;
}

.btn-sidebar-action:hover i {
  transform: translateX(4px);
}

.sidebar-action-card-phone {
  color: #e0f2fe;
  font-size: 0.98rem;
  font-weight: 500;
  transition: color 0.3s ease;
  display: inline-block;
}

.sidebar-action-card-phone:hover {
  color: #ffffff;
}

/* Sidebar Features Card CSS */
.sidebar-features-card {
  background-color: var(--clinic-accent-light);
  border: 1px solid var(--clinic-accent-border);
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.sidebar-features-card-title {
  color: var(--clinic-heading);
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 22px;
}

.sidebar-features-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sidebar-features-list-item {
  font-size: 1rem;
  color: var(--clinic-text);
  display: flex;
  align-items: center;
  font-weight: 400;
}

.sidebar-features-list-item i {
  color: var(--clinic-primary);
  font-size: 1.3rem;
  margin-right: 12px;
  flex-shrink: 0;
  font-weight: bold;
}

/* Sticky Sidebar behaviors */
.sticky-sidebar,
.faq-categories-sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
  z-index: 10;
  height: fit-content;
}

@media (max-width: 991.98px) {
  .sticky-sidebar,
  .faq-categories-sidebar {
    position: static;
    margin-top: 40px;
  }

  .sidebar-action-card-title {
    font-size: 1.3rem;
  }
}

/* --- Floating WhatsApp Button --- */
.whatsapp-btn-container {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 99999;
}

.whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #25d366 0%, #1ebd60 100%);
  color: #ffffff !important;
  border-radius: 50%;
  font-size: 32px;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
}

.whatsapp-btn::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px solid #25d366;
  border-radius: 50%;
  opacity: 0.8;
  animation: wa-pulse 2s infinite;
  pointer-events: none;
}

.whatsapp-btn:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.6);
  background: linear-gradient(135deg, #2ae771 0%, #17a452 100%);
}

@keyframes wa-pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }

  50% {
    opacity: 0.4;
  }

  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

/* Tooltip style */
.whatsapp-tooltip {
  position: absolute;
  right: 75px;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  background: #232d36;
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

.whatsapp-tooltip::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: #232d36;
}

.whatsapp-btn-container:hover .whatsapp-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* Adjust for small screens to prevent overlapping with content */
@media (max-width: 767.98px) {
  .whatsapp-btn-container {
    bottom: 20px;
    right: 20px;
  }

  .whatsapp-btn {
    width: 50px;
    height: 50px;
    font-size: 26px;
  }

  .whatsapp-tooltip {
    display: none !important;
  }
}

/* ================================================== */
/*  ULTRA MODERN HERO BANNER SECTION                 */
/* ================================================== */

:root {
  --hero-primary-glow: rgba(0, 112, 192, 0.35);
  --hero-secondary-glow: rgba(0, 210, 196, 0.2);
  --gradient-banner: linear-gradient(135deg, #0070c0 0%, #00d2c4 100%);
  --dark-blue: #062246;
  --bg-gradient-hero: linear-gradient(140deg, #f3f7fd 0%, #eaf2fb 50%, #f6fafe 100%);
}



.hero-banner {
  display: flex !important;
  align-items: center;
  justify-content: center;
  /* height: calc(100vh) !important; */
  min-height: calc(100vh) !important;
  background: #f6fafe;
  background: linear-gradient(140deg, #f3f7fd 0%, #eaf2fb 50%, #f6fafe 100%) !important;
  padding: 90px 0;
  z-index: 2;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

.hero-content-minus-menu {
  padding-top: 127px;
}


/* Background Glowing Orbs */
.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.16;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
  transition: transform 0.3s ease-out;
}

/* Interactive Mouse Background Elements */
.hero-mouse-spotlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(650px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(0, 176, 240, 0.14),
      rgba(0, 210, 196, 0.05) 45%,
      transparent 75%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero-banner:hover .hero-mouse-spotlight {
  opacity: 1;
}

.hero-particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.orb-1 {
  width: 450px;
  height: 450px;
  background: #00b0f0;
  top: 5%;
  right: -5%;
  animation: orb-bounce-1 12s infinite alternate ease-in-out;
}

.orb-2 {
  width: 350px;
  height: 350px;
  background: #00d2c4;
  bottom: 5%;
  left: -5%;
  animation: orb-bounce-2 10s infinite alternate ease-in-out;
}

@keyframes orb-bounce-1 {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    transform: translate3d(-30px, 40px, 0) scale(1.1);
  }
}

@keyframes orb-bounce-2 {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    transform: translate3d(40px, -30px, 0) scale(1.15);
  }
}

/* Left Content Column */
.hero-content-col {
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-badge-wrapper {
  margin-bottom: 24px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 112, 192, 0.15);
  padding: 8px 18px;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #0f3d6b;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  box-shadow: 0 4px 15px rgba(0, 112, 192, 0.03);
}

.hero-title {
  font-family: 'Bricolage Grotesque', 'Manrope', sans-serif !important;
  font-size: 4.85rem;
  font-weight: 600;
  line-height: 1.0;
  color: #0c3e72;
  margin-bottom: 24px;
  letter-spacing: -1.5px;
}

.gradient-text {
  font-weight: 700;
  display: inline-block;
}

.hero-desc {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #4a5c6e;
  margin-bottom: 35px;
  max-width: 580px;
}

/* Social Proof Grid */
.hero-rating-container {
  margin-bottom: 40px;
  gap: 15px;
}

.avatar-group {
  display: flex;
  align-items: center;
}

.avatar-bubble,
.avatar-bubble-img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.8rem;
  border: 2px solid #ffffff;
  margin-right: -12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  text-transform: uppercase;
  transition: transform 0.3s ease;
}

.avatar-bubble-img:hover {
  transform: translateY(-3px) scale(1.1);
  z-index: 10;
}

.review-avatar-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffffff;
  margin-right: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.avatar-plus {
  background: var(--gradient-banner);
  font-weight: 600;
  font-size: 0.9rem;
  margin-right: 0;
}

.rating-text {
  display: flex;
  flex-direction: column;
}

.rating-stars {
  color: #ffc107;
  font-size: 0.95rem;
  display: flex;
  gap: 3px;
  margin-bottom: 3px;
}

.rating-desc {
  font-size: 0.9rem;
  color: #55687b;
}

/* CTA Buttons */
.btn-hero-primary {
  background: linear-gradient(135deg, #097cd4 0%, #00d2c4 50%, #097cd4 100%);
  background-size: 200% auto;
  color: #ffffff !important;
  font-weight: 600;
  padding: 16px 36px;
  border-radius: 50px;
  font-size: 1rem;
  border: none;
  box-shadow: 0 10px 25px var(--hero-primary-glow);
  position: relative;
  overflow: hidden;
  gap: 8px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  will-change: transform, box-shadow;
}

.btn-hero-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: all 0.6s ease;
}

.btn-hero-primary:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 15px 30px rgba(9, 124, 212, 0.45);
  background-position: right center;
}

.btn-hero-primary:hover::before {
  left: 100%;
}

.btn-hero-primary i {
  transition: transform 0.3s ease;
}

.btn-hero-primary:hover i {
  transform: translateX(3px);
}

.btn-hero-secondary {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 112, 192, 0.2);
  color: #0f3d6b !important;
  font-weight: 600;
  padding: 16px 32px;
  border-radius: 50px;
  font-size: 1rem;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

.btn-hero-secondary:hover {
  background-color: #ffffff;
  transform: translate3d(0, -3px, 0);
  border-color: #0070c0;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04);
}

.transition-icon {
  transition: transform 0.3s ease;
}

.btn-hero-secondary:hover .transition-icon {
  transform: translate3d(5px, 0, 0);
}

/* -------------------------------------------------- */
/*  HERO VISUAL WRAPPER & INNER ELEMENTS             */
/* -------------------------------------------------- */

/* Right Visual Column Container */
.hero-visual-col {
  z-index: 3;
}

.hero-visual-wrapper {
  width: 100%;
  max-width: 580px;
  height: calc(100vh - 127px - 60px);
  max-height: 640px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

/* Main Image Frame & Overlays */
.hero-image-frame {
  width: 100%;
  height: 100%;
  max-height: 640px;
  border-radius: 30px;
  box-shadow: 0 20px 50px rgba(0, 30, 60, 0.15);
  border: 6px solid #ffffff;
  position: relative;
  background: #f8fafc;
  transform: rotate(-1.5deg);
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: transform;
}

.hero-image-frame:hover {
  transform: rotate(0deg) scale(1.01);
}

.hero-image {
  width: 100%;
  height: 100%;
  max-height: 640px;
  object-fit: cover;
  object-position: center center;
  border-radius: 24px;
}

.image-spotlight-overlay {
  position: absolute;
  top: 0;
  left: -150%;
  width: 150%;
  height: 100%;
  pointer-events: none;
  border-radius: 24px;
  background: linear-gradient(120deg,
      transparent 30%,
      rgba(255, 255, 255, 0.05) 38%,
      rgba(255, 255, 255, 0.35) 45%,
      rgba(255, 255, 255, 0.55) 50%,
      rgba(255, 255, 255, 0.35) 55%,
      rgba(255, 255, 255, 0.05) 62%,
      transparent 70%);
  z-index: 2;
}

.hero-image-frame:hover .image-spotlight-overlay {
  animation: shineSweep 2.2s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes shineSweep {
  0% {
    left: -150%;
  }

  100% {
    left: 100%;
  }
}

.image-glass-accent {
  position: absolute;
  bottom: 25px;
  left: 20px;
  right: 20px;
  background: rgba(15, 61, 107, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  z-index: 4;
}

.image-glass-accent .accent-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  background: var(--gradient-banner) !important;
  flex-shrink: 0;
}

/* Floating Card Wrappers & Badges */
.float-wrapper {
  position: absolute;
  z-index: 6;
  will-change: transform;
  pointer-events: auto;
}

.floating-card {
  position: relative;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  padding: 12px 18px;
  border-radius: 11px;
  box-shadow: 0 14px 35px rgba(6, 34, 70, 0.1);
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.4s ease;
  will-change: transform, box-shadow;
}

.floating-card:hover {
  transform: scale(1.05) translate3d(0, -4px, 0);
  box-shadow: 0 20px 45px rgba(6, 34, 70, 0.18);
  background-color: #ffffff;
}

.floating-card .card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.floating-card .card-icon.bg-primary {
  background: linear-gradient(135deg, #0070c0 0%, #00b0f0 100%) !important;
}

.floating-card .card-icon.bg-success {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
}

.floating-card .card-icon.bg-warning {
  background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%) !important;
}

.floating-card .card-info {
  display: flex;
  flex-direction: column;
}

.floating-card .card-val {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0c3e72;
  line-height: 1.25;
}

.floating-card .card-lbl {
  font-size: 0.72rem;
  font-weight: 600;
  color: #5d7286;
}

/* Floating Card Pixel Positions */
.card-experience {
  top: 55px;
  left: -35px;
  right: auto;
  bottom: auto;
}

.card-smiles {
  top: auto;
  right: -35px;
  left: auto;
  bottom: 126px;
  margin-top: 0;
}

.card-tech {
  bottom: 115px;
  left: -35px;
  right: auto;
  top: auto;
  display: none;
}

/* Hardware-Accelerated Floating Animations */
.float-anim-1 {
  animation: float-gentle-1 5s infinite ease-in-out;
}

.float-anim-2 {
  animation: float-gentle-2 6s infinite ease-in-out;
}

.float-anim-3 {
  animation: float-gentle-3 5.5s infinite ease-in-out;
}

@keyframes float-gentle-1 {

  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -10px, 0);
  }
}

@keyframes float-gentle-2 {

  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -15px, 0);
  }
}

@keyframes float-gentle-3 {

  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -8px, 0);
  }
}

@media (max-width: 1599.98px) {

  .hero-content-col {
    padding-left: 60px;
  }

  .hero-content-minus-menu {
    padding-top: 114px;
  }

  .hero-banner {
    padding: 30px 0;
    min-height: auto;
  }

  .hero-badge-wrapper {
    margin-bottom: 10px;
  }

  .hero-badge {
    padding: 5px 14px;
    font-size: 0.78rem;
    letter-spacing: 1px;
  }

  .hero-title {
    font-size: 4rem;
    line-height: 1.05;
    margin-bottom: 12px;
    letter-spacing: -1px;
  }

  .hero-desc {
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 16px;
    /* max-width: 460px; */
  }

  .hero-rating-container {
    margin-bottom: 26px;
    gap: 12px;
  }

  .avatar-bubble,
  .avatar-bubble-img {
    width: 34px;
    height: 34px;
    font-size: 0.72rem;
    margin-right: -8px;
  }

  .rating-stars {
    font-size: 0.85rem;
    margin-bottom: 2px;
  }

  .rating-desc {
    font-size: 0.82rem;
  }

  .btn-hero-primary,
  .btn-hero-secondary {
    padding: 12px 27px;
    font-size: 0.90rem;
    border-radius: 50px;
  }

  .hero-visual-wrapper {
    max-height: 440px;
    height: 440px;
  }

  .hero-image-frame {
    max-height: 440px;
    height: 440px;
    border-radius: 22px;
    border-width: 4px;
  }

  .hero-image {
    max-height: 440px;
    height: 440px;
    border-radius: 16px;
  }

  .image-glass-accent {
    padding: 8px 14px;
    bottom: 16px;
    left: 14px;
    right: 14px;
    border-radius: 14px;
  }

  .image-glass-accent .accent-icon {
    width: 34px;
    height: 34px;
    font-size: 0.95rem;
  }

  .image-glass-accent h6 {
    font-size: 0.85rem;
  }

  .image-glass-accent small {
    font-size: 0.7rem;
  }

  .floating-card {
    padding: 7px 12px;
    gap: 8px;
    border-radius: 8px;
  }

  .floating-card .card-icon {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
    border-radius: 6px;
  }

  .floating-card .card-val {
    font-size: 0.82rem;
  }

  .floating-card .card-lbl {
    font-size: 0.65rem;
  }


  body,
  p,
  .review-text,
  .reviews-desc,
  .service-main-desc,
  .faq-answer {
    font-size: 0.94rem;
  }

  .hero-ticker-wrap {
    position: relative !important;
    bottom: auto !important;
    margin-top: 00px !important;
    z-index: 5;
  }
}

@media (max-width: 1199.98px) {
  .hero-content-col {
    padding-left: 0px;
  }
}

@media (max-width: 991.98px) {
  .hero-content-minus-menu {
    padding-top: 78px;
  }

  .hero-banner {
    padding: 63px 0;
  }

  .hero-badge {
    margin-top: 60px;
  }

  .hero-content-col {
    text-align: center !important;
    align-items: center !important;
  }

  .hero-badge-wrapper {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  .hero-title,
  .hero-desc {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-rating-container {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  .hero-rating-container .rating-text {
    text-align: center !important;
    margin-left: 0 !important;
  }

  .hero-actions {
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }
}

@media (max-width: 575.98px) {

      .hero-title {
        font-size: 3.2rem;
        line-height: 1.05;
        margin-bottom: 12px;
        letter-spacing: -1px;
    }

  .hero-visual-wrapper {
    width: 100%;
    max-width: 580px;
    height: auto;
    aspect-ratio: 3/3.5;
    max-height: 640px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.hero-image-frame {
        max-height: none;
        height: 100%;
        border-radius: 22px;
        border-width: 4px;
    }

    .hero-image {
        max-height: none;
        height: 100%;
        border-radius: 16px;
    }


  .hero-visual-col {
      padding: 0 30px;
  }

  .card-experience {
      top: 46px;
      left: -24px;
      right: auto;
      bottom: auto;
  }

  .card-smiles {
      top: auto;
      right: -24px;
      left: auto;
      bottom: 85px;
      margin-top: 0;
  }

  /* Compact height & size for Advanced Clinic badge on extra small devices */
  .image-glass-accent {
      bottom: 8px !important;
      left: 8px !important;
      right: 8px !important;
      padding: 6px 10px !important;
      border-radius: 12px !important;
  }

  .image-glass-accent .accent-icon {
      width: 28px !important;
      height: 28px !important;
      font-size: 0.82rem !important;
      margin-right: 8px !important;
  }

  .image-glass-accent h6 {
      font-size: 0.78rem !important;
      line-height: 1.1 !important;
  }

  .image-glass-accent small {
      font-size: 0.65rem !important;
      line-height: 1.1 !important;
  }
}

/* Bottom Ribbon Marquee Ticker */
.bg-dark-blue {
  background-color: var(--dark-blue) !important;
}

.hero-ticker-wrap {
  border-color: rgba(255, 255, 255, 0.08) !important;
}




.marquee-slide-container {
  display: flex;
  white-space: nowrap;
  width: 100%;
}

.marquee-slide-content {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-around;
  min-width: 100%;
  animation: marquee-scroll 24s linear infinite;
  will-change: transform;
}

.marquee-item {
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0 40px;
  color: rgba(255, 255, 255, 0.9);
  display: inline-flex;
  align-items: center;
}

.marquee-item i {
  color: #00d2c4 !important;
}

@keyframes marquee-scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

/* Pause marquee hover for accessibility */
.hero-ticker-wrap:hover .marquee-slide-content {
  animation-play-state: paused;
}




/* Utility Classes */
.py-6 {
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
}

@media (max-width: 991.98px) {
  .py-6 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

.bg-white-10 {
  background-color: rgba(255, 255, 255, 0.08);
}

.border-white-10 {
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.text-white-80 {
  color: rgba(255, 255, 255, 0.85);
}

.backdrop-blur {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.shadow-md {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}

/* About Section styles */
.about-image-wrapper {
  position: relative;
  max-width: 100%;
  max-width: 550px;
  z-index: 2;
  margin: 0 auto;
}

.about-image-frame {
  border: 6px solid #ffffff;
  box-shadow: 0 20px 45px rgba(0, 30, 60, 0.12);
  transition: transform 0.5s ease;
}

.about-image-frame:hover {
  transform: scale(1.01);
}

.about-badge-float {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 140px;
  border: 1px solid rgba(0, 112, 192, 0.08);
  z-index: 5;
  transition: transform 0.3s ease;
}

.about-badge-float:hover {
  transform: scale(1.05) translateY(-5px);
}

/* Counter Section styles */
.counter-section {
  background: transparent !important;
}

.counter-box {
  position: relative;
  /* Multi-layered background: soft glow, semi-transparent modern teal-to-blue gradient, and fixed parallax background image */
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 60%),
    linear-gradient(135deg, rgba(0, 210, 196, 0.7) 0%, rgba(0, 112, 192, 0.85) 100%),
    url('../images/home/9016326.jpg') !important;
  background-size: cover !important;
  background-position: center center, center center, center center !important;
  background-attachment: scroll, scroll, fixed !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px rgba(6, 34, 70, 0.15);
  z-index: 1;
}

.counter-card {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
  will-change: transform;
}

.counter-card:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.counter-icon-wrap {
  width: 65px;
  height: 65px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.counter-card:hover .counter-icon-wrap {
  background: rgba(0, 210, 196, 0.2);
  border-color: rgba(0, 210, 196, 0.4);
  transform: scale(1.08) rotate(8deg);
  box-shadow: 0 0 15px rgba(0, 210, 196, 0.25);
}

.counter-icon {
  font-size: 1.9rem;
  color: #ffffff !important;
  opacity: 0.95;
  transition: color 0.3s ease, transform 0.3s ease;
}

.counter-card:hover .counter-icon {
  color: #ffffff !important;
}

.counter-svg {
  width: 30px;
  height: 30px;
  stroke: currentColor;
  stroke-width: 1.25;
  fill: none;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.3s ease;
}

.counter-number {
  color: #ffffff !important;
  font-family: 'Manrope', 'Poppins', 'Inter', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px;
}

.counter-lbl {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500;
}

/* Why Choose Us Section styles */
.benefit-card {
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s ease, box-shadow 0.4s ease;
  will-change: transform;
}

.benefit-card:hover {
  transform: translate3d(0, -6px, 0);
  border-color: rgba(0, 112, 192, 0.2) !important;
  box-shadow: 0 15px 30px rgba(0, 112, 192, 0.06);
}

.benefit-icon {
  transition: transform 0.3s ease;
}



/* Homepage Services Section styles */
.home-services {
  background: linear-gradient(180deg, #f0f6fc 0%, #ffffff 100%);
  position: relative;
}

/* Premium Service Cards styles */
.service-premium-card {
  height: 250px;
  display: block;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
  will-change: transform;
}

.service-premium-card:hover {
  transform: translate3d(0, -8px, 0);
}

.service-premium-img-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.service-premium-img {
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-premium-card:hover .service-premium-img {
  transform: scale(1.08);
}

.service-premium-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Smooth inner shadow at the bottom of the card for text readability */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 60%);
  z-index: 2;
  transition: all 0.4s ease;
}

.service-premium-card:hover .service-premium-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 60%);
}

.service-premium-title-box {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
}

.service-premium-card:hover .service-premium-title-box {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transform: scale(1.02);
}

.service-premium-title {
  font-size: 1.15rem;
  letter-spacing: 0.5px;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

@media (max-width: 575.98px) {
  .service-premium-card {
    height: 210px;
  }
}

/* Animated Premium CTA Button */
.btn-premium-animated {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  background: var(--gradient-banner);
  color: #ffffff !important;
  font-weight: 600;
  font-size: 0.98rem;
  border-radius: 50px;
  border: none;
  padding: 6px 24px 6px 54px;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.85s cubic-bezier(0.165, 0.84, 0.44, 1), background 0.85s ease;
  will-change: transform;
  cursor: pointer;
}

.btn-premium-animated .btn-circle {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clinic-primary, #0070c0);
  transition: left 0.85s cubic-bezier(0.25, 1, 0.5, 1), transform 0.85s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 2;
}

.btn-premium-animated .btn-circle svg {
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-premium-animated .btn-text {
  display: inline-block;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
}

.btn-premium-animated:hover {
  transform: translate3d(0, -3px, 0);
  background: linear-gradient(135deg, #097cd4 0%, #00e0d1 100%);
}

.btn-premium-animated:hover .btn-circle {
  left: calc(100% - 46px);
}

.btn-premium-animated:hover .btn-circle svg {
  transform: rotate(45deg);
}

.btn-premium-animated:hover .btn-text {
  transform: translateX(-34px);
}

/* Call Us Gradient Animated Button */
.btn-gradient-call {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  background: var(--gradient-banner);
  color: #ffffff !important;
  font-weight: 600;
  font-size: 0.98rem;
  border-radius: 50px;
  border: none;
  padding: 6px 28px 6px 54px;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.85s cubic-bezier(0.165, 0.84, 0.44, 1), background 0.85s ease;
  will-change: transform;
  cursor: pointer;
}

.btn-gradient-call .btn-circle-call {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clinic-primary, #0070c0);
  transition: left 0.85s cubic-bezier(0.25, 1, 0.5, 1), transform 0.85s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 2;
}

.btn-gradient-call .btn-circle-call i {
  display: inline-block;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-gradient-call .btn-text {
  display: inline-block;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
}

.btn-gradient-call:hover {
  transform: translate3d(0, -3px, 0);
  background: linear-gradient(135deg, #097cd4 0%, #00e0d1 100%);
}

.btn-gradient-call:hover .btn-circle-call {
  left: calc(100% - 46px);
}

.btn-gradient-call:hover .btn-circle-call i {
  transform: rotate(15deg);
}

.btn-gradient-call:hover .btn-text {
  transform: translateX(-34px);
}

/*--------------------------------------------------------------
# Smile Gallery Styles
--------------------------------------------------------------*/
.gallery-section {
  background-color: #f8fafd;
  padding: 80px 0;
  position: relative;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
  padding: 20px 0 50px 0;
}

.gallery-item {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
  cursor: pointer;
  aspect-ratio: 4 / 5;
  aspect-ratio: 9 / 16;

  background-color: #eef3f8;
}

.gallery-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 112, 192, 0.12);
}

.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.gallery-item:hover .gallery-img {
  transform: scale(1.06);
}

.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(6, 34, 70, 0.4);
  backdrop-filter: blur(2px);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease;
  z-index: 2;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery-zoom-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 18px;
  transform: scale(0.8);
  transition: background 0.3s, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.gallery-item:hover .gallery-zoom-icon {
  transform: scale(1);
}

.gallery-zoom-icon:hover {
  background: #ffffff;
  color: var(--bs-primary, #0070c0);
  transform: scale(1.1);
}

/* Lightbox styles */
.clinic-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(6, 22, 46, 0.96);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  user-select: none;
}

.clinic-lightbox.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 80vh;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
  border-radius: 16px;
  overflow: hidden;
  background-color: #06162e;
  transform: scale(0.9);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.clinic-lightbox.active .lightbox-content {
  transform: scale(1);
}

.lightbox-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

.lightbox-close {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s, color 0.3s;
  z-index: 10002;
}

.lightbox-close:hover {
  background: #ffffff;
  color: var(--bs-primary, #0070c0);
  transform: rotate(90deg);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s, color 0.3s;
  z-index: 10001;
}

.lightbox-nav:hover {
  background: #ffffff;
  color: var(--bs-primary, #0070c0);
  transform: translateY(-50%) scale(1.05);
}

.lightbox-prev {
  left: 30px;
}

.lightbox-next {
  right: 30px;
}

/* Responsive Grid and styles */
@media (max-width: 991.98px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (max-width: 767.98px) {
  .gallery-section {
    padding: 60px 0;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }

  .lightbox-prev {
    left: 10px;
  }

  .lightbox-next {
    right: 10px;
  }

  .lightbox-close {
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .lightbox-content {
    max-width: 95%;
    max-height: 75vh;
  }
}

@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .gallery-overlay {
    padding: 12px;
  }

  .gallery-zoom-icon {
    width: 34px;
    height: 34px;
    font-size: 12px;
  }
}

/* ==========================================================================
   HOMEPAGE SECTIONS MODERNIZATION OVERRIDES
   ========================================================================== */

/* Custom Color variables/tokens */
:root {
  --gradient-primary-glow: linear-gradient(135deg, #0070c0 0%, #00d2c4 100%);
  --gradient-primary-dark: linear-gradient(135deg, #062246 0%, #005086 100%);
  --primary-glow-light: rgba(0, 112, 192, 0.06);
  --success-glow-light: rgba(40, 167, 69, 0.06);
  --warning-glow-light: rgba(255, 193, 7, 0.06);
  --info-glow-light: rgba(23, 162, 184, 0.06);
  --text-muted-dark: #637688;
  --transition-cubic: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* --- ABOUT SECTION UPGRADES ("Creating Smiles That Last a Lifetime") --- */
.about-clinic {
  position: relative;
  background-color: #ffffff;
}
 .about-content-block
  {
    padding-left: 3rem;
  }
.about-decor-circle {
  position: absolute;
  top: -10%;
  left: -5%;
  width: 30vw;
  height: 30vw;
  background: radial-gradient(circle, rgba(0, 112, 192, 0.04) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

.dot-grid-decor {
  position: absolute;
  top: -25px;
  left: -25px;
  width: 150px;
  height: 150px;
  background-image: radial-gradient(#d0e0f0 1.5px, transparent 1.5px);
  background-size: 15px 15px;
  opacity: 0.75;
  z-index: 0;
  pointer-events: none;
}



.about-image-frame {
  position: relative;
  z-index: 2;
  border: 1px solid rgba(0, 112, 192, 0.1);
  box-shadow: 0 30px 60px rgba(6, 34, 70, 0.12) !important;
  transition: var(--transition-cubic);
  overflow: hidden;
}

.about-image-frame img {
  transition: var(--transition-cubic);
}

.about-image-frame:hover img {
  transform: scale(1.03);
}

/* Flash / Light Sweep Hover Effect for Homepage About Image */
.about-image-frame::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -85%;
  width: 50%;
  height: 200%;
  background: linear-gradient(to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 0) 100%);
  transform: rotate(25deg);
  transition: all 0.75s ease;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}

.about-image-frame:hover::after {
  left: 135%;
  opacity: 1;
  transition: all 0.75s ease;
}

.glassmorphic-badge {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 15px 35px rgba(6, 34, 70, 0.08) !important;
  z-index: 5;
}

/* Homepage About Section Floating Trusted Care Badge */
.about-badge-float {
  position: absolute;
  bottom: -22px;
  right: -20px;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 40px rgba(6, 34, 70, 0.12), 0 4px 12px rgba(0, 112, 192, 0.08) !important;
  z-index: 6;
  padding: 14px 20px !important;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
  width: max-content;
}

.about-badge-float:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 22px 50px rgba(6, 34, 70, 0.18), 0 6px 16px rgba(0, 112, 192, 0.12) !important;
  background-color: #ffffff !important;
}

.about-badge-float .badge-icon-orb {
  width: 46px;
  height: 46px;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #0070c0 0%, #00d2c4 100%) !important;
  font-size: 1.25rem;
  box-shadow: 0 6px 18px rgba(0, 112, 192, 0.3);
}

.about-badge-float h6 {
  font-size: 1rem;
  font-weight: 800;
  color: #0c3e72;
  line-height: 1.2;
}

.about-badge-float small {
  font-size: 0.78rem;
  font-weight: 600;
  color: #5d7286;
}

@media (max-width: 991.98px) {
  .about-badge-float {
    bottom: -30px;
    right: 10px;
    padding: 12px 16px !important;
  }
}

@media (max-width: 575.98px) {
  .about-badge-float {
    bottom: -25px;
    right: 15px;
    padding: 10px 14px !important;
    border-radius: 14px !important;
  }

  .about-badge-float .badge-icon-orb {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    border-radius: 10px !important;
  }

  .about-badge-float h6 {
    font-size: 0.88rem;
  }

  .about-badge-float small {
    font-size: 0.7rem;
  }
}

.text-muted-dark {
  color: var(--text-muted-dark);
  font-size: 0.82rem;
}

.bg-primary-light {
  background-color: rgba(0, 112, 192, 0.08) !important;
}

.bg-success-light {
  background-color: rgba(40, 167, 69, 0.08) !important;
}

.bg-warning-light {
  background-color: rgba(255, 193, 7, 0.08) !important;
}

.bg-info-light {
  background-color: rgba(23, 162, 184, 0.08) !important;
}

.about-feature-tag {
  transition: var(--transition-cubic);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
}

.about-feature-tag:hover {
  transform: translateY(-4px);
  background-color: #ffffff !important;
  box-shadow: 0 12px 25px rgba(6, 34, 70, 0.06);
  border-color: rgba(0, 112, 192, 0.15) !important;
}

.feature-tag-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  transition: var(--transition-cubic);
}

.about-feature-tag:hover .feature-tag-icon {
  transform: scale(1.1);
}

/* Dedicated Media Queries: About Clinic Section Only */
@media (max-width: 1599.98px) {
  .about-clinic .lead,
  .about-clinic p.lead {
    font-size: 0.94rem !important;
    line-height: 1.65 !important;
    font-weight: 400;
  }
  .about-image-block{
    padding:0 80px 0 80px
  }
  .about-content-block
  {
    padding-left: 0;
  }

  .about-clinic .banner-feature-item .feature-label {
    font-size: 0.82rem !important;
  }
}

@media (max-width: 767.98px) {
  .about-content-block
  {
    padding-left: 1.5rem;
  }
}

@media (max-width: 575.98px) {
 .about-image-block{
    padding:0 30px 0 30px
  }
}
/* --- COUNTER SECTION (Restored Exact Original Style) --- */
.counter-section {
  background: transparent !important;
}

.counter-box {
  position: relative;
  /* Multi-layered background: soft glow, semi-transparent modern teal-to-blue gradient, and fixed parallax background image */
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 60%),
    linear-gradient(135deg, rgba(0, 210, 196, 0.88) 0%, rgba(0, 112, 192, 0.97) 100%),
    url('../images/home/9016326.jpg') !important;
  background-size: cover !important;
  background-position: center center, center center, center center !important;
  background-attachment: scroll, scroll, fixed !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px rgba(6, 34, 70, 0.15);
  z-index: 1;
}

.counter-card {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
  will-change: transform;
}

.counter-card:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.counter-icon-wrap {
  width: 65px;
  height: 65px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.counter-card:hover .counter-icon-wrap {
  background: rgba(0, 210, 196, 0.2);
  border-color: rgba(0, 210, 196, 0.4);
  transform: scale(1.08) rotate(8deg);
  box-shadow: 0 0 15px rgba(0, 210, 196, 0.25);
}

.counter-icon {
  font-size: 1.9rem;
  color: #ffffff !important;
  opacity: 0.95;
  transition: color 0.3s ease, transform 0.3s ease;
}

.counter-card:hover .counter-icon {
  color: #ffffff !important;
}

.counter-svg {
  width: 30px;
  height: 30px;
  stroke: currentColor;
  stroke-width: 1.25;
  fill: none;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.3s ease;
}

.counter-number {
  color: #ffffff !important;
  font-family: 'Manrope', 'Poppins', 'Inter', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px;
}

.counter-lbl {
  color: rgba(255, 255, 255, 0.85) !important;
}


/* --- TREATMENTS & SERVICES GRID UPGRADES --- */
.home-services {
  background: linear-gradient(180deg, #f8fafd 0%, #ffffff 100%);
}

.service-premium-card {
  height: 320px;
  box-shadow: 0 15px 35px rgba(6, 34, 70, 0.04) !important;
  border: 1px solid rgba(0, 112, 192, 0.08);
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s ease;
  will-change: transform;
}

.service-premium-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(6, 34, 70, 0.18) !important;
  border-color: rgba(0, 210, 196, 0.3);
}

.service-premium-img {
  transition: transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: transform;
}

.service-premium-card:hover .service-premium-img {
  transform: scale(1.08);
}

.service-premium-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 34, 70, 0.88) 0%, rgb(6 34 70 / 0%) 50%, rgb(6 34 70 / 0%) 100%);
  z-index: 2;
  transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  opacity: 0.85;
}

.service-premium-card:hover .service-premium-overlay {
  opacity: 1;
  background: linear-gradient(to top, rgba(6, 34, 70, 0.94) 0%, rgba(6, 34, 70, 0.65) 55%, rgba(6, 34, 70, 0.2) 100%);
}

.service-premium-content-box {
  z-index: 3;
  transform: translateY(78px);
  transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.service-premium-card:hover .service-premium-content-box {
  transform: translateY(0);
}

.service-cat-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #00e0d1;
  background: rgba(0, 224, 209, 0.12);
  padding: 4px 12px;
  border-radius: 50px;
  border: 1px solid rgba(0, 224, 209, 0.3);
  transition: all 0.4s ease;
}

.service-premium-title {
  font-size: 1.35rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.service-premium-reveal-desc {
  opacity: 0;
  transition: opacity 0.35s ease 0.05s;
  will-change: opacity;
  margin-top: 8px;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.service-desc-text {
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.service-learn-more {
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.service-learn-more i {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.service-premium-card:hover .service-premium-reveal-desc {
  opacity: 1;
}

.service-premium-card:hover .service-learn-more i {
  transform: translateX(6px);
}


/* --- CHIEF DOCTORS SECTION UPGRADES (Dark Glassmorphic Theme with Moving Background Gradient) --- */
.home-doctors {
  background: linear-gradient(135deg, #021124 0%, #062246 35%, #082d59 70%, #021124 100%) !important;
  background-size: 300% 300% !important;
  animation: doctorsBgGradientShift 12s ease infinite;
  position: relative;
  overflow: hidden;
}

.home-doctors::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 90px;
  background: linear-gradient(180deg, rgba(2, 17, 36, 0.45) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.home-doctors::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90px;
  background: linear-gradient(0deg, rgba(2, 17, 36, 0.45) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

@keyframes doctorsBgGradientShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.doctors-bg-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse 70% 65% at 50% 50%, rgba(0, 210, 196, 0.22) 0%, rgba(0, 112, 192, 0.12) 40%, rgba(2, 17, 36, 0) 80%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
  animation: doctorsGlowPulse 7s infinite alternate ease-in-out;
  transition: transform 0.8s ease, opacity 0.8s ease;
}

.home-doctors:hover .doctors-bg-glow {
  transform: scale(1.15);
  opacity: 0.95;
}

.doctors-mouse-spotlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(650px circle at var(--doc-mouse-x, 50%) var(--doc-mouse-y, 50%),
      rgba(0, 210, 196, 0.22),
      rgba(0, 112, 192, 0.08) 45%,
      transparent 75%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.home-doctors:hover .doctors-mouse-spotlight {
  opacity: 1;
}

.doctors-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
  transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.8s ease;
}

.doctors-bg-orb.orb-left {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(0, 210, 196, 0.35) 0%, rgba(0, 112, 192, 0.15) 50%, rgba(2, 17, 36, 0) 80%);
  top: -20%;
  left: -10%;
  animation: orbFloatLeft 10s infinite alternate ease-in-out;
}

.doctors-bg-orb.orb-right {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 112, 192, 0.35) 0%, rgba(0, 210, 196, 0.15) 50%, rgba(2, 17, 36, 0) 80%);
  bottom: -20%;
  right: -10%;
  animation: orbFloatRight 12s infinite alternate ease-in-out;
}

.home-doctors:hover .doctors-bg-orb.orb-left {
  transform: translate3d(40px, 30px, 0) scale(1.15);
  opacity: 0.6;
}

.home-doctors:hover .doctors-bg-orb.orb-right {
  transform: translate3d(-40px, -30px, 0) scale(1.15);
  opacity: 0.6;
}

@keyframes doctorsGlowPulse {
  0% {
    transform: scale(0.92);
    opacity: 0.6;
  }

  100% {
    transform: scale(1.15);
    opacity: 1;
  }
}

@keyframes orbFloatLeft {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    transform: translate3d(50px, 40px, 0) scale(1.15);
  }
}

@keyframes orbFloatRight {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    transform: translate3d(-50px, -40px, 0) scale(1.15);
  }
}

.doctor-leader-card-modern {
  position: relative;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
  transition: var(--transition-cubic);
  z-index: 1;
}

.doctor-leader-card-modern:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(0, 224, 209, 0.35) !important;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.22),
    0 0 25px rgba(0, 210, 196, 0.15) !important;
}

.doctor-img-wrapper {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  position: relative;
  z-index: 1;
}

.doctor-img-zoom {
  transition: var(--transition-cubic);
}

.doctor-leader-card-modern:hover .doctor-img-zoom {
  transform: scale(1.05);
}

.doctor-specialty-badge {
  bottom: 16px !important;
  left: 16px !important;
  right: 16px !important;
  width: calc(100% - 32px) !important;
  padding: 10px 16px !important;
  text-align: center;
  color: #ffffff !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  background: linear-gradient(135deg, rgba(8, 33, 63, 0.75) 0%, rgba(0, 112, 192, 0.55) 100%) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
  z-index: 5;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  letter-spacing: 0.2px;
}

.doctor-leader-card-modern:hover .doctor-specialty-badge {
  background: linear-gradient(135deg, rgba(0, 112, 192, 0.75) 0%, rgba(0, 210, 196, 0.65) 100%) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 12px 30px rgba(0, 210, 196, 0.25) !important;
}

.specialty-badge-modern {
  font-size: 0.78rem;
  color: #00e0d1 !important;
  background: rgba(0, 210, 196, 0.15) !important;
  border: 1px solid rgba(0, 210, 196, 0.3) !important;
}

.doctor-sub-title {
  color: #00e0d1 !important;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
}

.doctor-desc-text {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Glassmorphic button and badge adjustments for the dark doctors section */
.home-doctors .reviews-badge {
  background: rgba(0, 210, 196, 0.12) !important;
  border: 1px solid rgba(0, 210, 196, 0.3) !important;
  color: #00e0d1 !important;
  padding: 6px 14px !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 50px !important;
}

.home-doctors .btn-hero-secondary {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: var(--transition-cubic);
}

.home-doctors .btn-hero-secondary:hover {
  background: linear-gradient(135deg, #0070c0, #00d2c4) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: translateY(-2px);
}


/* --- WHY CHOOSE US UPGRADES --- */
.why-choose-us {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafd 100%);
}

.why-choose-bg-orb {
  position: absolute;
  top: 10%;
  right: -5%;
  width: 25vw;
  height: 25vw;
  background: radial-gradient(circle, rgba(0, 210, 196, 0.04) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.benefit-card-modern {
  background-color: #ffffff !important;
  transition: var(--transition-cubic);
  z-index: 2;
  position: relative;
  box-shadow: 0 10px 25px rgba(6, 34, 70, 0.02);
}

.benefit-card-modern:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 210, 196, 0.25) !important;
  box-shadow: 0 20px 40px rgba(6, 34, 70, 0.06);
}

.benefit-icon-modern {
  transition: var(--transition-cubic);
}

.benefit-card-modern:hover .benefit-icon-modern {
  transform: scale(1.1) rotate(5deg);
  background-image: var(--gradient-primary-glow) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 20px rgba(0, 210, 196, 0.2);
}


/* --- DRAGGABLE BEFORE & AFTER SMILE COMPARISON SECTION --- */
.before-after-section {
  position: relative;
  z-index: 10;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background-color: #f8fafd;
  border: none !important;
  overflow: hidden;
}

.before-after-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, rgba(0, 112, 192, 0.2) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  background-position: 12px 12px;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
}

.ba-bg-glow {
  width: 90vw;
  max-width: 1100px;
  height: 380px;
  background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(0, 210, 196, 0.22) 0%, rgba(0, 112, 192, 0.1) 50%, transparent 80%);
  filter: blur(45px);
  z-index: 1;
  pointer-events: none;
}

.before-after-card-wrapper {
  max-width: 900px;
  width: 100%;
}

.before-after-slider {
  height: 420px;
  border-radius: 30px;
  box-shadow: 0 25px 60px rgba(6, 34, 70, 0.18) !important;
  border: 4px solid #ffffff;
  background-color: #08213f;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
}

@media (max-width: 991.98px) {
  .before-after-slider {
    height: 380px;
    border-radius: 24px;
  }
}

@media (max-width: 575.98px) {
  .before-after-slider {
    height: 280px;
    border-radius: 20px;
  }
}

.ba-image {
  pointer-events: none;
}

.ba-before-image {
  z-index: 2;
  border-right: 2px solid #ffffff;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
}

.ba-before-image img,
.ba-after-image img {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.ba-badge {
  z-index: 4;
  top: 50%;
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  padding: 18px 10px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 2.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: translateY(-50%) rotate(180deg);
}

.ba-badge-before {
  left: 24px;
}

.ba-badge-after {
  right: 24px;
}

@media (max-width: 575.98px) {
  .ba-badge {
    padding: 12px 6px;
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    border-radius: 10px;
  }
  .ba-badge-before {
    left: 10px;
  }
  .ba-badge-after {
    right: 10px;
  }
}

/* Central Divider Line & Handle */
.ba-handle {
  z-index: 5;
  top: 0;
  bottom: 0;
  width: 4px;
  transform: translateX(-50%);
  pointer-events: none;
}

.ba-line {
  width: 3px;
  height: 100%;
  background: #ffffff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  margin: 0 auto;
}

.ba-circle-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  color: #0070c0;
  font-size: 0.95rem;
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.25),
    0 0 0 4px rgba(255, 255, 255, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.before-after-slider:active .ba-circle-handle,
.before-after-slider:hover .ba-circle-handle {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.3),
    0 0 0 6px rgba(255, 255, 255, 0.5);
}

@media (max-width: 575.98px) {
  .ba-circle-handle {
    width: 38px;
    height: 38px;
    font-size: 0.78rem;
  }
}

/* View All Gallery Link Pill */
.ba-view-all-btn {
  z-index: 6;
  bottom: 22px;
  right: 22px;
  background: linear-gradient(135deg, rgba(15, 61, 107, 0.636) 0%, rgba(0, 112, 192, 0.663) 100%) !important;
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  color: #ffffff !important;
  border-radius: 50px;
  padding: 7px 8px 7px 20px;
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: 0.4px;
  text-decoration: none !important;
  box-shadow: 0 10px 25px rgba(0, 112, 192, 0.35);
  border: 1.5px solid rgba(255, 255, 255, 0.251) !important;
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.ba-btn-arrow-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  color: #0070c0;
  font-size: 0.72rem;
  transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease;
}

.ba-view-all-btn:hover {
  background: linear-gradient(135deg, rgba(0, 112, 192, 0.92) 0%, rgba(0, 210, 196, 0.92) 100%) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0, 210, 196, 0.45);
  border-color: rgba(255, 255, 255, 0.7) !important;
}

.ba-view-all-btn:hover .ba-btn-arrow-circle {
  transform: translateX(2px) rotate(-45deg);
  background: #ffffff;
  color: #0070c0;
}

@media (max-width: 575.98px) {
  .ba-view-all-btn {
    bottom: 12px;
    right: 12px;
    padding: 5px 6px 5px 14px;
    font-size: 0.76rem;
  }
  .ba-btn-arrow-circle {
    width: 24px;
    height: 24px;
    font-size: 0.65rem;
  }
}


/* --- PATIENT REVIEWS UPGRADES --- */
.patient-reviews-section {
  background: #f8fafd !important;
  padding-top: 150px !important;
}

@media (max-width: 991.98px) {
  .patient-reviews-section {
    padding-top: 100px !important;
  }
}

@media (max-width: 575.98px) {
  .patient-reviews-section {
    padding-top: 80px !important;
  }
}

.reviews-decor-glow-1 {
  display: none !important;
}

.reviews-decor-glow-2 {
  position: absolute;
  bottom: -10%;
  right: -5%;
  width: 35vw;
  height: 35vw;
  background: radial-gradient(circle, rgba(0, 224, 209, 0.03) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

.patient-reviews-section .review-card {
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid rgba(0, 112, 192, 0.05);
  box-shadow: 0 15px 35px rgba(6, 34, 70, 0.03) !important;
  transition: var(--transition-cubic);
}

.patient-reviews-section .review-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(6, 34, 70, 0.06) !important;
}

.patient-reviews-section .review-stars {
  color: #ffb300;
  text-shadow: 0 0 8px rgba(255, 179, 0, 0.2);
}

/* Background Large Quote Design */
.patient-reviews-section .review-card::before {
  content: "“";
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 5rem;
  font-family: serif;
  color: rgba(0, 112, 192, 0.05);
  line-height: 1;
  font-weight: 900;
  pointer-events: none;
}

.patient-reviews-section .review-user {
  border-top: 1px solid rgba(0, 112, 192, 0.08) !important;
}

.patient-reviews-section .review-avatar {
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.patient-reviews-section .reviews-swiper-button-prev,
.patient-reviews-section .reviews-swiper-button-next {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(0, 112, 192, 0.1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.02) !important;
  transition: var(--transition-cubic);
}

.patient-reviews-section .reviews-swiper-button-prev:hover,
.patient-reviews-section .reviews-swiper-button-next:hover {
  background: var(--gradient-primary-glow);
  border-color: transparent;
  color: #ffffff !important;
  box-shadow: 0 10px 25px rgba(0, 112, 192, 0.25) !important;
}

.patient-reviews-section .reviews-swiper-pagination .swiper-pagination-bullet-active {
  background: var(--gradient-primary-glow) !important;
}

@media (max-width: 991.98px) {
  .service-premium-card {
    height: 290px;
  }
}

/* Side-by-Side Wide Clinic Images in About Section */
.about-clinic-img-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(6, 34, 70, 0.07);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
  background-color: #f8fafc;
}

.about-clinic-img-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 35px rgba(0, 80, 150, 0.15);
}

/* Glassmorphic Premium Styles for About Clinic Items */
.about-clinic-img-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(0, 112, 192, 0.12);
  box-shadow: 0 10px 30px rgba(6, 34, 70, 0.08);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease, border-color 0.3s ease;
  background-color: #f7fafc;
}

.about-clinic-img-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(0, 112, 192, 0.16);
  border-color: rgba(0, 112, 192, 0.3);
}

.clinic-wide-img {
  width: 100%;
  height: 145px;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: block;
}

.about-clinic-img-card:hover .clinic-wide-img {
  transform: scale(1.07);
}

.glass-img-badge {
  background: linear-gradient(to top, rgba(6, 34, 70, 0.85) 0%, rgba(6, 34, 70, 0.3) 70%, rgba(6, 34, 70, 0) 100%);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Glassmorphic Feature Card */
.about-clinic-feature-card {
  height: 145px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 247, 255, 0.85) 100%);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(0, 112, 192, 0.16) !important;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(6, 34, 70, 0.06);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}

.about-clinic-feature-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0, 112, 192, 0.08) 0%, transparent 65%);
  pointer-events: none;
}

.about-clinic-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(0, 112, 192, 0.16) !important;
  border-color: rgba(0, 112, 192, 0.35) !important;
}

.glass-icon-orb {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #0070c0 0%, #004080 100%);
  color: #ffffff;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: 0 8px 20px rgba(0, 112, 192, 0.28);
  transition: transform 0.3s ease;
}

.about-clinic-feature-card:hover .glass-icon-orb {
  transform: scale(1.08);
}

/* About Section Highlights Banner Card (Theme-Matched Compact Design) */
.about-highlights-banner {
  background: linear-gradient(135deg, rgba(6, 34, 70, 0.92) 0%, rgba(0, 80, 150, 0.94) 100%), url('../images/clinic/5DS_0053.JPG') center/cover no-repeat;
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(6, 34, 70, 0.2) !important;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
  border: none;
}

/* Hide Highlights Banner Block in 992px Container View */
@media (max-width: 992px) {
  .about-highlights-banner {
    display: none !important;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .about-highlights-banner {
    display: none !important;
  }
}

.about-highlights-banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 50px rgba(6, 34, 70, 0.28) !important;
}

.banner-left-col {
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  min-height: 140px;
}

@media (max-width: 575.98px) {
  .banner-left-col {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    min-height: 110px;
  }
}

.social-banner-label {
  font-family: 'Manrope', sans-serif;
  opacity: 0.85;
}

.banner-social-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.banner-social-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.banner-social-btn:hover {
  transform: translateY(-3px) scale(1.08);
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.banner-social-btn.instagram-btn:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  border-color: transparent;
}

.banner-social-btn.facebook-btn:hover {
  background: #1877f2;
  border-color: transparent;
}

.banner-social-btn.whatsapp-btn-banner:hover {
  background: #25d366;
  border-color: transparent;
}

.banner-social-btn.youtube-btn:hover {
  background: #ff0000;
  border-color: transparent;
}

.banner-features-vertical {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.banner-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cyan-check-icon {
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.08854 8.18862C6.75521 7.85529 6.25521 7.85529 5.92188 8.18862C5.58854 8.52195 5.58854 9.02195 5.92188 9.35529L8.42188 11.8553C8.58854 12.022 8.75521 12.1053 9.00521 12.1053C9.25521 12.1053 9.42187 12.022 9.58854 11.8553L15.4219 5.18862C15.6719 4.77195 15.6719 4.27195 15.2552 4.02195C14.9219 3.77195 14.4219 3.77195 14.1719 4.10529L9.00521 10.022L7.08854 8.18862Z' fill='url(%23paint0_linear_banner)'/%3E%3Cpath d='M16.5052 7.9375C16.0052 7.9375 15.6719 8.27083 15.6719 8.77083C15.6719 12.4375 12.6719 15.4375 9.00521 15.4375C5.33854 15.4375 2.33854 12.4375 2.33854 8.77083C2.33854 7.02083 3.00521 5.35417 4.25521 4.10417C5.50521 2.77083 7.17188 2.10417 9.00521 2.10417C9.50521 2.10417 10.0885 2.1875 10.5885 2.27083C11.0052 2.4375 11.5052 2.1875 11.6719 1.6875C11.8385 1.1875 11.5052 0.854167 11.0885 0.6875H11.0052C10.3385 0.520833 9.67188 0.4375 9.00521 0.4375C4.42188 0.4375 0.671875 4.1875 0.671875 8.85417C0.671875 11.0208 1.58854 13.1875 3.08854 14.6875C4.67188 16.2708 6.75521 17.1042 8.92188 17.1042C13.5052 17.1042 17.2552 13.3542 17.2552 8.77083C17.3385 8.27083 16.9219 7.9375 16.5052 7.9375Z' fill='url(%23paint1_linear_banner)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_banner' x1='5.67188' y1='7.97452' x2='15.5925' y2='7.97452' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2300e6c3'/%3E%3Cstop offset='1' stop-color='%2300d2c4'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_banner' x1='0.671875' y1='8.77083' x2='17.2659' y2='8.77083' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2300e6c3'/%3E%3Cstop offset='1' stop-color='%2300d2c4'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  flex-shrink: 0;
  border-radius: 0;
  box-shadow: none;
}

.feature-label {
  font-size: 0.95rem;
  font-weight: 400;
  font-family: 'Inter', sans-serif;
  color: #ffffff;
  line-height: 1.25;
  letter-spacing: -0.1px;
}

@media (max-width: 575.98px) {
  .clinic-wide-img {
    height: 110px;
  }

  .about-clinic-feature-card {
    height: 110px;
  }

  .glass-icon-orb {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
  }
}

/* ==================================================
   Custom Styles Consolidations (Migrated from sparrow.css)
   ================================================== */

/* # Page Header & Breadcrumbs
================================================== */
.page-header {
  color: #ffffff !important;
  padding: 180px 0 160px 0 !important;
  margin-top: 127px !important;
  text-align: center;
  position: relative;
  z-index: 1;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: scroll !important;
  overflow: hidden;
}

.page-header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 37, 55, 0.65);
  z-index: 0;
}

.page-header .container,
.page-header h1,
.page-header nav {
  position: relative;
  z-index: 2;
}

@media (max-width: 1599.98px) {
  .page-header {
    margin-top: 114px !important;
        padding: 140px 0 120px 0 !important;
  }
}

@media (max-width: 767.98px) {
  .page-header {
    margin-top: 78px !important;
    padding: 90px 0 60px 0 !important;
  }
}

.breadcrumb-item+.breadcrumb-item::before {
  color: #fff !important;
  opacity: .7;
}

/* ==================================================
   Modern & Snappy AOS Animations Overrides
   ================================================== */
@media (min-width: 768px) {
  html:not(.no-js) [data-aos] {
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  html:not(.no-js) [data-aos='fade-up'] {
    transform: translate3d(0, 25px, 0) !important;
  }

  html:not(.no-js) [data-aos='fade-down'] {
    transform: translate3d(0, -25px, 0) !important;
  }

  html:not(.no-js) [data-aos='fade-right'] {
    transform: translate3d(-25px, 0, 0) !important;
  }

  html:not(.no-js) [data-aos='fade-left'] {
    transform: translate3d(25px, 0, 0) !important;
  }

  html:not(.no-js) [data-aos].aos-animate {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
  }

  /* Custom Title Reveal Animation (Clip-Path Slide-Up) */
  html:not(.no-js) [data-aos='title-reveal'] {
    clip-path: inset(0 0 100% 0);
    transform: translateY(40px);
    opacity: 0;
    transition-property: transform, opacity, clip-path !important;
  }

  html:not(.no-js) [data-aos='title-reveal'].aos-animate {
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
    opacity: 1;
    transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1) !important;
  }
}

/* Global py-6 & pb-6 Padding Overrides for spacious breathing room */
.py-6 {
  padding-top: 7.5rem !important;
  padding-bottom: 7.5rem !important;
}

.pb-6 {
  padding-bottom: 7.5rem !important;
}

@media (max-width: 767.98px) {
  .py-6 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }

  .pb-6 {
    padding-bottom: 4.5rem !important;
  }
}

/* Reviews section spacing consistency override */
.patient-reviews-section {
  padding: 7.5rem 0 !important;
}

@media (max-width: 767.98px) {
  .patient-reviews-section {
    padding: 4.5rem 0 !important;
  }
}

/* Service Page Fullwidth Main Image & Description styles */
.service-main-img-box {
  position: relative;
  width: 100%;
  height: 380px;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.service-main-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-main-img-box:hover img {
  transform: scale(1.04);
}

/* Ultra-Subtle Lighter Edge-to-Edge Brand Gradient Glass Card */
.service-main-desc {
  position: relative;
  background: linear-gradient(135deg, rgba(9, 124, 212, 0.035) 0%, rgba(0, 210, 196, 0.04) 100%);
  border: 1px solid rgba(9, 124, 212, 0.14);
  border-radius: 24px;
  padding: 36px 40px;
  margin-bottom: 3.2rem;
  box-shadow: 0 16px 40px rgba(9, 124, 212, 0.035);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.service-main-desc:hover {
  transform: translateY(-4px);
  background: linear-gradient(135deg, rgba(9, 124, 212, 0.06) 0%, rgba(0, 210, 196, 0.07) 100%);
  box-shadow: 0 24px 50px rgba(9, 124, 212, 0.08);
  border-color: rgba(9, 124, 212, 0.24);
}

.service-main-desc p {
  font-size: 1.06rem;
  font-weight: 400;
  color: #2c4257;
  line-height: 1.88;
  margin-bottom: 1.35rem;
  letter-spacing: -0.005em;
}

.service-main-desc p:last-child {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .service-main-desc {
    padding: 24px 22px;
    border-radius: 18px;
    margin-bottom: 2.2rem;
  }

  .service-main-desc p {
    font-size: 0.98rem;
    line-height: 1.75;
    margin-bottom: 1rem;
  }
}

@media (max-width: 767.98px) {
  .service-main-img-box {
    height: 240px;
    border-radius: 16px;
    margin-bottom: 1.5rem;
  }

  .service-main-desc {
    font-size: 0.95rem;
    margin-bottom: 2rem;
  }
}

/* Smile Gallery 3:4 Portrait Aspect Ratio */
.gallery-item {
  aspect-ratio: 3 / 4;
}

/* Apply Premium Glass Reflection Sweep Effect to Doctor Card, Gallery, Collage & Tech Showcase Images */
.doctor-card-img-wrapper,
.doctor-img-wrapper,
.doctor-leader-card .col-md-4>div,
.gallery-item,
.collage-img-wrapper,
.tech-img-wrapper {
  position: relative;
  overflow: hidden;
}

.doctor-card-img-wrapper::after,
.doctor-img-wrapper::after,
.doctor-leader-card .col-md-4>div::after,
.gallery-item::after,
.collage-img-wrapper::after,
.tech-img-wrapper::after,
.sculpted-frame::after,
.sculpted-image-box::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 0%;
  left: 50%;
  top: 50%;
  background-color: rgba(255, 255, 255, 0.25);
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: 3;
  pointer-events: none;
}

.doctor-card:hover .doctor-card-img-wrapper::after,
.doctor-leader-card-modern:hover .doctor-img-wrapper::after,
.doctor-leader-card:hover .col-md-4>div::after,
.gallery-item:hover::after,
.collage-img-wrapper:hover::after,
.tech-img-wrapper:hover::after,
.sculpted-frame:hover::after,
.sculpted-image-box:hover::after {
  height: 250%;
  transition: all 900ms linear !important;
  background-color: transparent;
}

/* Ensure the gallery lightbox displays images in their original aspect ratio */
.lightbox-content {
  max-width: 90vw !important;
  max-height: 85vh !important;
  aspect-ratio: auto !important;
  width: auto !important;
  height: auto !important;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent !important;
  box-shadow: none !important;
}

.lightbox-img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 85vh !important;
  object-fit: contain !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}

@media (max-width: 767.98px) {
  .lightbox-content {
    max-width: 95vw !important;
    max-height: 75vh !important;
  }

  .lightbox-img {
    max-height: 75vh !important;
  }
}

/* Why Choose Us Collage Layout (Flexbox Architecture) */
.why-choose-collage-grid {
  display: flex;
  gap: 24px;
  height: 500px;
}

.collage-col {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.collage-col-left {
  flex: 1.35;
}

.collage-col-right {
  flex: 1;
  gap: 24px;
}

@media (max-width: 991.98px) {
  .why-choose-collage-grid {
    height: 440px;
    gap: 16px;
  }

  .collage-col-right {
    gap: 16px;
  }
}

@media (max-width: 575.98px) {
  .why-choose-collage-grid {
    flex-direction: column;
    height: auto;
    gap: 16px;
  }

  .collage-col-left .collage-img-wrapper {
    height: 260px;
  }

  .collage-img-sub {
    height: 200px;
  }

  .collage-stat-card {
    height: auto;
    padding: 20px;
  }
}

.collage-img-wrapper {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.03);
}

.collage-col-left .collage-img-wrapper {
  height: 100%;
}

.collage-img-sub {
  height: 62%;
}

.collage-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.collage-img-wrapper:hover .collage-img {
  transform: scale(1.05);
}

.collage-stat-card {
  height: 38%;
  background: linear-gradient(135deg, #f4f9fc 0%, #eef6fa 100%);
  border: 1px solid #d0e3f0;
  border-radius: 28px;
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 112, 192, 0.04);
}

.collage-stat-card::before {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(9, 124, 212, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
  top: -50px;
  right: -50px;
  pointer-events: none;
}

.collage-stat-card .stat-number {
  font-size: 3.2rem;
  font-weight: 850;
  background: linear-gradient(135deg, #097cd4 0%, #00d2c4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  font-family: 'Outfit', sans-serif;
  letter-spacing: -1px;
}

.collage-stat-card .stat-text {
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
  margin-top: 2px;
}

.collage-stat-card .stat-line-1 {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--clinic-primary, #0070c0);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.collage-stat-card .stat-line-2 {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--clinic-heading, #0f3d6b);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

/* Key Features List */
.why-choose-features-row {
  margin:.0rem 0 1.3rem 0;
}

.why-choose-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.why-choose-features-list li {
  font-size: 0.98rem;
  color: var(--clinic-text, #3b4654);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  font-weight: 500;
}

.why-choose-features-list li::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 12px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.08854 8.18862C6.75521 7.85529 6.25521 7.85529 5.92188 8.18862C5.58854 8.52195 5.58854 9.02195 5.92188 9.35529L8.42188 11.8553C8.58854 12.022 8.75521 12.1053 9.00521 12.1053C9.25521 12.1053 9.42187 12.022 9.58854 11.8553L15.4219 5.18862C15.6719 4.77195 15.6719 4.27195 15.2552 4.02195C14.9219 3.77195 14.4219 3.77195 14.1719 4.10529L9.00521 10.022L7.08854 8.18862Z' fill='url(%23paint0_linear_1659_22782)'/%3E%3Cpath d='M16.5052 7.9375C16.0052 7.9375 15.6719 8.27083 15.6719 8.77083C15.6719 12.4375 12.6719 15.4375 9.00521 15.4375C5.33854 15.4375 2.33854 12.4375 2.33854 8.77083C2.33854 7.02083 3.00521 5.35417 4.25521 4.10417C5.50521 2.77083 7.17188 2.10417 9.00521 2.10417C9.50521 2.10417 10.0885 2.1875 10.5885 2.27083C11.0052 2.4375 11.5052 2.1875 11.6719 1.6875C11.8385 1.1875 11.5052 0.854167 11.0885 0.6875H11.0052C10.3385 0.520833 9.67188 0.4375 9.00521 0.4375C4.42188 0.4375 0.671875 4.1875 0.671875 8.85417C0.671875 11.0208 1.58854 13.1875 3.08854 14.6875C4.67188 16.2708 6.75521 17.1042 8.92188 17.1042C13.5052 17.1042 17.2552 13.3542 17.2552 8.77083C17.3385 8.27083 16.9219 7.9375 16.5052 7.9375Z' fill='url(%23paint1_linear_1659_22782)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1659_22782' x1='5.67188' y1='7.97452' x2='15.5925' y2='7.97452' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23097cd4'/%3E%3Cstop offset='1' stop-color='%2300d2c4'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_1659_22782' x1='0.671875' y1='8.77083' x2='17.2659' y2='8.77083' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23097cd4'/%3E%3Cstop offset='1' stop-color='%2300d2c4'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}

@media (max-width: 575.98px) {
  .why-choose-collage-grid {
    height: auto;
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .collage-col-left .collage-img-wrapper {
    height: 300px;
  }

  .collage-col-right {
    gap: 15px;
  }

  .collage-img-sub {
    height: 250px;
  }

  .collage-stat-card {
    height: auto;
    padding: 16px 20px;
  }
}

/* Clinical Technology Showcase Cards */
.tech-card {
  border-radius: 20px !important;
  overflow: hidden !important;
  border: none !important;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
}

.tech-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 112, 192, 0.08) !important;
}

.tech-img-wrapper {
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
  overflow: hidden !important;
  position: relative;
}

.tech-img {
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.tech-card:hover .tech-img {
  transform: scale(1.05);
}

/* Responsive Modern Grid Container Alignment (Bootstrap Standard Breakpoints) */
.modern-grid-container {
  margin-top: 40px;
}

@media (max-width: 991.98px) {
  .modern-grid-container {
    margin-top: 0 !important;
  }
}


/* Hide About Us section Call Us Now button in 960px width container view */
@media (min-width: 960px) and (max-width: 1199.98px) {
  .btn-about-call-us {
    display: none !important;
  }
}

@media (max-width: 960px) {
  .btn-about-call-us {
    display: none !important;
  }
}

/* ==========================================================================
   MIGRATED PAGE-SPECIFIC STYLES
   ========================================================================== */

/* Services Page Styles */
.learn-more-link {
  color: #0070c0;
  font-size: 0.95rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  transition: color 0.3s ease;
}

.learn-more-link .arrow-icon {
  transition: transform 0.3s ease;
}

.learn-more-link:hover {
  color: #005096;
}

.learn-more-link:hover .arrow-icon {
  transform: translateX(4px);
}

/* About Page Styles */
.about-section {
  padding: 110px 0;
}

.bg-light-blue {
  background-color: #f7fbfe;
}

.about-subtitle {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #6c757d;
}

.sculpted-composition-container {
  position: relative;
  width: 100%;
}

.sculpted-frame {
  position: relative;
  width: 100%;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: none !important;
}

.sculpted-image-box {
  width: 100%;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  box-shadow: none !important;
}

.sculpted-main-img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
  border-radius: 28px;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: none !important;
}

.sculpted-frame:hover .sculpted-main-img {
  transform: scale(1.02);
}

.sculpted-review-card {
  position: absolute;
  top: 20px;
  right: 20px;
  max-width: 295px;
  background: linear-gradient(135deg, rgba(9, 124, 212, 0.82) 0%, rgba(0, 210, 196, 0.82) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 24px;
  border: 2px solid rgba(255, 255, 255, 0.65);
  padding: 24px 20px;
  z-index: 3;
  box-shadow: none !important;
  color: #ffffff;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
}

.sculpted-review-card:hover {
  transform: translateY(-5px);
  box-shadow: none !important;
}

.review-card-title {
  font-size: 1.02rem;
  font-weight: 600;
  color: #ffffff;
  font-family: 'Manrope', sans-serif;
  letter-spacing: 0px;
}

.avatar-stack {
  display: flex;
  align-items: center;
}

.avatar-img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.9);
  margin-right: -12px;
  box-shadow: none !important;
}

.avatar-more-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.88rem;
  border: 2px solid rgba(255, 255, 255, 0.9);
  margin-right: 0;
  box-shadow: none !important;
}

.review-card-divider {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.25);
  width: 100%;
}

.rating-number {
  font-size: 3.3rem;
  font-weight: 800;
  font-family: 'Manrope', sans-serif;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -1.5px;
}

.reviews-count {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 500;
  letter-spacing: 0;
  padding-left: 5px;
}

.legacy-timeline {
  position: relative;
  margin-top: 40px;
}

.legacy-timeline-item {
  position: relative;
  padding-left: 30px;
  border-left: 2px dashed #dbe7f4;
  margin-bottom: 25px;
}

.legacy-timeline-item:last-child {
  border-left: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: -7px;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #005096;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 80, 150, 0.15);
  transition: all 0.3s ease;
}

.legacy-timeline-item:hover .timeline-dot {
  background-color: #ffd700;
  box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.3);
  transform: scale(1.2);
}

.timeline-year {
  font-family: 'Manrope', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #005096;
  margin-bottom: 3px;
  display: block;
}

.timeline-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #062246;
  margin-bottom: 5px;
}

.timeline-text {
  font-size: 0.88rem;
  color: #6c757d;
  line-height: 1.5;
  margin-bottom: 0;
}

/* Bento Grid Modern Showcase Styles */
.modern-grid-item {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: pointer;
}

.modern-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: block;
}

.modern-grid-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 80, 150, 0.12);
}

.modern-grid-item:hover img {
  transform: scale(1.04);
}

.item-h200 {
  height: 200px;
}

.item-h250 {
  height: 250px;
}

.item-h300 {
  height: 300px;
}

.item-h530 {
  height: 530px;
}

@media (max-width: 991.98px) {

  .item-h530,
  .item-h300,
  .item-h250,
  .item-h200 {
    height: 260px !important;
  }
}

.grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(6, 34, 70, 0.85) 0%, rgba(6, 34, 70, 0.1) 70%, rgba(6, 34, 70, 0) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  display: flex;
  align-items: flex-end;
  padding: 24px;
}

.modern-grid-item:hover .grid-overlay {
  opacity: 1;
}

.grid-overlay-text {
  color: #ffffff;
  transform: translateY(10px);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.modern-grid-item:hover .grid-overlay-text {
  transform: translateY(0);
}

.grid-overlay-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 4px;
  font-family: 'Manrope', sans-serif;
}

.grid-overlay-subtitle {
  font-size: 0.85rem;
  opacity: 0.85;
  margin-bottom: 0;
}

.stats-section {
  background: linear-gradient(135deg, #062246 0%, #003366 100%);
  color: #ffffff;
  padding: 60px 0;
  border-radius: 28px;
  margin-top: 80px;
  box-shadow: 0 15px 40px rgba(6, 34, 70, 0.15);
}

.stat-item {
  text-align: center;
  position: relative;
}

.stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.15);
}

.stat-number {
  font-size: 3.2rem;
  font-weight: 800;
  font-family: 'Manrope', sans-serif;
  color: #ffd700;
  margin-bottom: 6px;
  display: block;
}

.stat-label {
  font-size: 0.88rem;
  font-weight: 600;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.about-lightbox .lightbox-content {
  aspect-ratio: auto !important;
  max-width: 85%;
  max-height: 85vh;
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
}

.about-lightbox .lightbox-img {
  object-fit: contain !important;
  border-radius: 14px;
  max-height: 80vh;
  width: auto;
  height: auto;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}

@media (max-width: 1199px) {
  .item-tall {
    height: 464px;
  }

  .item-short {
    height: 220px;
  }
}

@media (max-width: 991px) {
  .about-section {
    padding: 70px 0;
  }

  .stat-item:not(:last-child)::after {
    display: none;
  }

  .stat-item {
    margin-bottom: 30px;
  }

  .stat-item:last-child {
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  .about-img-container {
    padding: 10px;
    margin-bottom: 40px;
  }

  .about-img-main {
    height: 320px;
  }

  .about-img-secondary {
    display: none;
  }

  .about-img-badge {
    position: relative;
    bottom: auto;
    right: auto;
    margin: -30px auto 0 auto;
    border: 4px solid #ffffff;
    background: #ffffff;
  }

  .item-tall {
    height: 320px;
  }

  .item-short {
    height: 220px;
  }
}

@media (max-width: 575.98px) {
  .sculpted-review-card {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    margin-top: 12px;
  }

  .sculpted-main-img {
    height: 320px;
  }
}

/* Doctors Page Styles */
.badge-specialty {
  background-color: #f0f6fc;
  color: #0070c0;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 5px 12px;
  border-radius: 50px;
  display: inline-block;
  transition: all 0.3s ease;
}

.xp-badge {
  background: linear-gradient(135deg, #fffdf2 0%, #fef3cd 100%);
  border: 1px solid #ffeeba;
  color: #856404;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 5px 14px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(133, 100, 4, 0.04);
}

.xp-badge i {
  margin-right: 6px;
}

.doctor-leader-card {
  transition: all 0.3s ease;
  border: 1px solid #eef2f5 !important;
  background-color: #ffffff;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.02) !important;
  border-radius: 24px !important;
  padding: 20px;
}

@media (max-width: 767.98px) {
  .doctor-leader-card .col-md-4 {
    margin-bottom: 0.5rem !important;
  }
  .doctor-leader-card .card-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.doctor-leader-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 112, 192, 0.08) !important;
  border-color: #d1e2f2 !important;
}

.doctor-leader-card img {
  transition: transform 0.5s ease;
}

.doctor-leader-card:hover img {
  transform: scale(1.02);
}

.doctor-card {
  background: #ffffff;
  border: 1px solid #eef2f5;
  border-radius: 20px;
  padding: 16px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  height: 100%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.015);
  display: flex;
  flex-direction: column;
}

.doctor-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--clinic-accent);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.doctor-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 112, 192, 0.08);
  border-color: #d1e2f2;
}

.doctor-card:hover::before {
  opacity: 1;
}

.doctor-card-img-wrapper {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-color: #f8fafc;
  border-radius: 16px;
}

.doctor-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.doctor-card:hover .doctor-card-img {
  transform: scale(1.03);
}

.doctor-card-body {
  padding: 16px 4px 4px 4px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.doctor-card:hover .badge-specialty {
  background-color: #e0f2fe;
}

.specialty-section-title {
  position: relative;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--clinic-heading);
  margin-bottom: 25px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f0f6fc;
  text-align: center;
}

.specialty-section-title::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -2px;
  width: 40px;
  height: 2px;
  background-color: var(--clinic-primary);
}

.doctor-avatar-fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #062246 0%, #0070c0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 3rem;
  letter-spacing: -1px;
  position: relative;
  overflow: hidden;
  user-select: none;
  transition: transform 0.5s ease, background 0.5s ease;
  border-radius: 16px;
}

.doctor-avatar-fallback::after {
  content: '\f5c9';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  bottom: -15px;
  right: -10px;
  font-size: 6rem;
  color: rgba(255, 255, 255, 0.05);
  transform: rotate(-15deg);
  pointer-events: none;
}

.doctor-card:hover .doctor-avatar-fallback {
  background: linear-gradient(135deg, #097cd4 0%, #00d2c4 100%);
  transform: scale(1.03);
}

.specialty-subtitle {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--clinic-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  display: block;
}

.resident-badge {
  background-color: #f3fef8;
  color: #228468;
  font-weight: 500;
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #e5f7ee;
}

.resident-badge i {
  font-size: 0.65rem;
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
  }

  100% {
    transform: scale(0.95);
    opacity: 0.8;
  }
}

.doctor-card.resident-card {
  border-color: rgba(0, 112, 192, 0.15);
  box-shadow: 0 10px 25px rgba(0, 112, 192, 0.03);
}

.doctor-card.resident-card::before {
  opacity: 0.8;
  height: 5px;
}

.doctor-section-spacer {
  margin-bottom: 90px;
}

@media (max-width: 767.98px) {
  .doctor-section-spacer {
    margin-bottom: 50px;
  }
}

/* Contact Page Luxury Styles */
.contact-info-section {
  margin-top: 60px;
  margin-bottom: 50px;
  position: relative;
  z-index: 10;
}

/* Clean Minimalist Contact Cards (Pure Gradient Icon, No Round Background, No Shadow) */
.info-card-clean {
  background: #ffffff;
  border-radius: 20px;
  padding: 38px 28px;
  border: 1px solid #eef2f5;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.info-card-clean:hover {
  transform: translateY(-6px);
  border-color: #d1e2f2;
  box-shadow: 0 18px 40px rgba(9, 124, 212, 0.08);
}

.info-icon-pure,
.info-svg-pure {
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.info-card-clean:hover .info-icon-pure,
.info-card-clean:hover .info-svg-pure {
  transform: translateY(-4px) scale(1.1);
}

.info-card-clean h4 {
  font-weight: 700;
  color: #0f172a;
  font-size: 1.15rem;
  margin-bottom: 12px;
  letter-spacing: -0.2px;
}

.info-card-clean p {
  color: #586b7d;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0;
}

/* Advisory Section Repair & Luxury Styling */
.advisory-section {
  background: linear-gradient(135deg, #097cd4 0%, #00d2c4 100%);
  border-radius: 28px;
  padding: 55px 40px;
  color: #ffffff;
  box-shadow: 0 15px 35px rgba(9, 124, 212, 0.18);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.advisory-content h3 {
  font-size: 2.1rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 14px;
  letter-spacing: -0.5px;
}

.advisory-content p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.92);
  max-width: 850px;
  margin: 0 auto 30px auto;
  line-height: 1.7;
}

.advisory-phones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 30px;
}

.phone-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff !important;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 50px;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.phone-link-btn:hover {
  background: #ffffff;
  color: #097cd4 !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.phone-link-btn i {
  font-size: 1.1rem;
}

.advisory-warning-box {
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  border-radius: 18px;
  padding: 20px 26px;
  font-size: 0.95rem;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: 850px;
  margin: 0 auto;
  text-align: left;
}

.advisory-warning-box i {
  font-size: 1.3rem;
  color: #ffd700;
  margin-top: 2px;
  flex-shrink: 0;
}

/* Contact Map & Appointment Form Upgrade */
.contact-map-card {
  border-radius: 24px;
  border: 1px solid #eef2f5;
  overflow: hidden;
  height: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  min-height: 480px;
}

.contact-map-iframe {
  width: 100%;
  height: 100%;
  min-height: 480px;
  border: 0;
  display: block;
}

.appointment-form-section {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid #eef2f5;
  padding: 45px 38px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.appointment-form-section h3 {
  font-size: 1.8rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 10px;
  text-align: center;
  letter-spacing: -0.4px;
}

.appointment-form-section p {
  color: #64748b;
  font-size: 1rem;
  margin-bottom: 30px;
  text-align: center;
}

.form-control-custom {
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 12px;
  font-size: 0.95rem;
  color: #0f172a;
  transition: all 0.3s ease;
  outline: none;
}

.form-control-custom:focus {
  border-color: #097cd4;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(9, 124, 212, 0.1);
}

.form-control-custom::placeholder {
  color: #94a3b8;
}

textarea.form-control-custom {
  resize: none;
}

.error-text {
  color: #ef4444;
  font-size: 12px;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.error-text::before {
  content: "\f06a";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.btn-submit {
  background: linear-gradient(135deg, #097cd4 0%, #00d2c4 50%, #097cd4 100%);
  background-size: 200% auto;
  color: #ffffff;
  border: none;
  border-radius: 50px;
  padding: 14px 35px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 15px rgba(9, 124, 212, 0.2);
  position: relative;
  overflow: hidden;
}

.btn-submit::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: all 0.6s ease;
}

.btn-submit:hover:not(:disabled) {
  background-position: right center;
  box-shadow: 0 8px 25px rgba(9, 124, 212, 0.35);
  transform: translateY(-2px);
}

.btn-submit:hover:not(:disabled)::before {
  left: 100%;
}

.btn-submit i {
  transition: transform 0.3s ease;
}

.btn-submit:hover:not(:disabled) i {
  transform: translateX(4px);
}

.btn-submit:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 4px 10px rgba(9, 124, 212, 0.15);
}

.btn-submit:disabled {
  background: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
  box-shadow: none;
}

.form-note {
  font-size: 12px;
  color: #64748b;
  margin-top: 12px;
}

.alert-custom-success {
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 14px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 991px) {
  .contact-header h1 {
    font-size: 32px;
  }

  .contact-info-section {
    margin-top: 20px;
  }

  .advisory-section,
  .appointment-form-section {
    padding: 35px 25px;
  }
}

/* ==========================================================================
   FAQ SEARCH AREA STYLES
   ========================================================================== */
.faq-search-wrapper {
  position: relative;
  max-width: 800px;
  margin: 0 auto 3.5rem auto;
}

.faq-search-container {
  position: relative;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 2px solid rgba(0, 112, 192, 0.15);
  border-radius: 100px;
  padding: 6px 14px 6px 24px;
  box-shadow: 0 12px 35px rgba(6, 34, 70, 0.08);
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.faq-search-container:focus-within {
  border-color: #00d2c4;
  box-shadow: 0 15px 40px rgba(0, 210, 196, 0.2), 0 0 0 4px rgba(0, 210, 196, 0.12);
  transform: translateY(-2px);
}

.faq-search-icon {
  font-size: 1.25rem;
  color: #0070c0;
  margin-right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.faq-search-input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 12px 16px 12px 0 !important;
  font-size: 1.05rem !important;
  color: #062246 !important;
  width: 100%;
  outline: none !important;
}

.faq-search-input::placeholder {
  color: #8fa0b5;
  font-size: 0.96rem;
}

.faq-search-clear {
  background: rgba(0, 112, 192, 0.08);
  color: #0070c0;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.25s ease;
  flex-shrink: 0;
  opacity: 0;
  visibility: hidden;
}

.faq-search-clear.active {
  opacity: 1;
  visibility: visible;
}

.faq-search-clear:hover {
  background: #0070c0;
  color: #ffffff;
  transform: scale(1.1);
}

.faq-result-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 210, 196, 0.1);
  color: #0070c0;
  border: 1px solid rgba(0, 210, 196, 0.3);
  padding: 6px 18px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.88rem;
}

.faq-no-results {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 20px;
  padding: 40px 20px;
  text-align: center;
}

/* FAQ Category & CTA Styles */
.faq-category-section {
  padding-top: 20px;
  scroll-margin-top: 120px;
}

.cta-section {
  background: linear-gradient(135deg, #097cd4 0%, #00d2c4 100%);
  border-radius: 24px;
  padding: 60px 40px;
  color: #ffffff;
  box-shadow: 0 15px 35px rgba(9, 124, 212, 0.15);
}

.btn-cta-contact {
  background-color: #ffffff;
  color: #0f3d6b !important;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none !important;
  border-radius: 50px;
  padding: 12px 28px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
}

.btn-cta-contact i {
  transition: transform 0.3s ease;
}

.btn-cta-contact:hover {
  background-color: #f8fafc;
  color: #0070c0 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2);
  text-decoration: none !important;
}

.btn-cta-contact:hover i {
  transform: translateY(-2px);
}

.btn-cta-call {
  background-color: #0f3d6b;
  color: #ffffff !important;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none !important;
  border-radius: 50px;
  padding: 12px 28px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
}

.btn-cta-call i {
  transition: transform 0.3s ease;
}

.btn-cta-call:hover {
  background-color: #0b2e52;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 61, 107, 0.3);
  text-decoration: none !important;
}

.btn-cta-call:hover i {
  transform: rotate(15deg) scale(1.1);
}

@media (max-width: 991.98px) {
  .faq-categories-sidebar {
    position: static;
    margin-bottom: 40px;
  }
}

.faq-categories-sidebar .faq-nav-link {
  border-left: 3px solid transparent;
  background-color: #ffffff;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #3b4654;
  font-weight: 500;
  padding: 12px 18px;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.faq-categories-sidebar .faq-nav-link i {
  font-size: 1.1rem;
  margin-right: 12px;
  transition: transform 0.3s ease;
}

.faq-categories-sidebar .faq-nav-link:hover {
  background-color: #f4f9fc;
  color: #0070c0;
}

.faq-categories-sidebar .faq-nav-link:hover i {
  transform: scale(1.1);
}

.faq-categories-sidebar .faq-nav-link.active {
  background-color: #f4f9fc !important;
  color: #0070c0 !important;
  font-weight: 600;
  border-left-color: #0070c0;
}

.accordion-custom .accordion-item {
  border: 1px solid #eef2f5;
  border-radius: 14px !important;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
  transition: all 0.3s ease;
  background-color: #ffffff;
}

.accordion-custom .accordion-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 112, 192, 0.03);
  border-color: #d1e2f2;
}

.accordion-custom .accordion-button {
  font-weight: 600;
  font-size: 1.1rem;
  color: #0f3d6b;
  padding: 20px 24px;
  background-color: #ffffff;
  box-shadow: none !important;
  border-left: 4px solid transparent;
  transition: all 0.25s ease;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
}

.accordion-custom .accordion-button:not(.collapsed) {
  color: #0070c0;
  background-color: #f4f9fc;
  border-left-color: #0070c0;
}

.accordion-custom .accordion-button::after {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  content: "";
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230f3d6b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform 0.2s ease-in-out;
}

/* --- LENIS SMOOTH SCROLL BASE STYLES --- */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis-stopped {
  overflow: hidden;
}

.lenis-scrolling iframe {
  pointer-events: none;
}

/* --- BUTTER-SMOOTH REVEAL ANIMATIONS (INTERSECTION OBSERVER) --- */

/* Base container state: hidden with GPU transform offset */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(35px);
  transition: transform 1.45s cubic-bezier(0.215, 0.61, 0.355, 1),
    opacity 1.45s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Side slide-in variations */
.reveal-from-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: transform 1.45s cubic-bezier(0.215, 0.61, 0.355, 1),
    opacity 1.45s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.reveal-from-right {
  opacity: 0;
  transform: translateX(40px);
  transition: transform 1.45s cubic-bezier(0.215, 0.61, 0.355, 1),
    opacity 1.45s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Zoom scale variation */
.reveal-zoom {
  opacity: 0;
  transform: scale(0.92);
  transition: transform 1.45s cubic-bezier(0.215, 0.61, 0.355, 1),
    opacity 1.45s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* --- PURE CSS CLIP-PATH CURTAIN MASK REVEAL (NO DOM SPLITTING) --- */
.title-reveal-mask {
  opacity: 0;
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  transform: translateY(35px);
  transition: clip-path 1.65s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 1.65s cubic-bezier(0.215, 0.61, 0.355, 1),
    opacity 1.65s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.title-reveal-mask.is-revealed {
  opacity: 1 !important;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
  transform: translateY(0) !important;
}

/* Active Visible State triggered by JS IntersectionObserver */
.is-visible {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) rotate(0deg) !important;
}

/* --- STAGGERED WORD FALL-FROM-RIGHT WOBBLE REVEAL STYLES --- */
.reveal-word {
  display: inline-block;
}

/* --- ABOUT IMAGE BOTTOM-TO-TOP HEIGHT REVEAL STYLES --- */
.about-image-frame,
.sculpted-image-box {
  overflow: hidden;
}

.about-image-frame img,
.sculpted-image-box img {
}

/* Ensure zero shadows on About section image blocks */
.about-image-frame,
.sculpted-image-box,
.sculpted-frame,
.about-image-wrapper,
.sculpted-main-img {
  box-shadow: none !important;
}

/* --- SECTION BADGES ELASTIC POP-IN REVEAL STYLES --- */
.reviews-badge,
.about-badge,
.section-badge,
.hero-badge,
.hero-badge-wrapper,
.service-badge,
.doctors-badge,
.tech-badge,
.faq-badge,
.gallery-badge,
.contact-badge,
.sub-title,
.subtitle {
  display: inline-block;
}

/* --- SLEEK & PREMIUM SOCIAL MEDIA ICONS & SECTION SPACING --- */
.footer-socials,
/* --- SLEEK & PREMIUM SOCIAL MEDIA ICONS & SECTION SPACING --- */
.footer-socials,
.social-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Light Background Social Icons (Default for pages & cards) */
.social-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #097cd4 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Authentic Brand Hover Colors for Social Icons */
.social-icon.facebook-icon:hover,
.footer-social-btn.facebook-btn:hover {
  background: #1877f2 !important;
  border-color: transparent !important;
  color: #ffffff !important;
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 10px 22px rgba(24, 119, 242, 0.4) !important;
}

.social-icon.instagram-icon:hover,
.footer-social-btn.instagram-btn:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 10px 22px rgba(220, 39, 67, 0.4) !important;
}

.social-icon.youtube-icon:hover,
.footer-social-btn.youtube-btn:hover {
  background: #ff0000 !important;
  border-color: transparent !important;
  color: #ffffff !important;
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 10px 22px rgba(255, 0, 0, 0.4) !important;
}

.footer-social-btn i,
.social-icon i {
  transition: transform 0.3s ease;
}

.footer-social-btn:hover i,
.social-icon:hover i {
  transform: scale(1.15) rotate(5deg);
}

/* Sleek Icon Orbs Upgrade */
.card-icon,
.accent-icon,
.service-icon,
.tech-icon,
.info-card-icon {
  box-shadow: 0 8px 20px rgba(9, 124, 212, 0.15);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.service-card:hover .service-icon,
.tech-card:hover .tech-icon,
.info-card:hover .info-card-icon,
.floating-card:hover .card-icon {
  transform: scale(1.12) rotate(6deg);
  box-shadow: 0 12px 25px rgba(9, 124, 212, 0.3);
}

/* Standardized Homepage & About Page Luxurious Section Spacing */
.about-section,
.clinic-technology-section,
.home-doctors,
.py-6 {
  padding-top: 110px !important;
  padding-bottom: 110px !important;
}

.mb-6 {
  margin-bottom: 110px !important;
}

@media (max-width: 991.98px) {

  .about-section,
  .clinic-technology-section,
  .home-doctors,
  .py-6 {
    padding-top: 75px !important;
    padding-bottom: 75px !important;
  }

  .mb-6 {
    margin-bottom: 75px !important;
  }

  /* Override fixed background attachments on mobile devices (fixed backgrounds cause severe repaint jerks on mobile WebKit/Blink) */
  .counter-box,
  .cta-section,
  .banner-features,
  .hero-banner,
  section {
    background-attachment: scroll !important;
  }
}

/* Mobile Smooth Touch Scrolling & GPU Compositor Optimization */
@media (max-width: 991.98px) {

  html {
    overflow-x: clip;
  }

  body {
    overflow-x: clip;
    touch-action: manipulation;
    -webkit-overflow-scrolling: touch;
  }

  /* Chief Specialists Section Mobile Scrolling Optimization */
  .home-doctors {
    background: linear-gradient(135deg, #021124 0%, #062246 50%, #082d59 100%) !important;
    background-size: auto !important;
    animation: none !important;
  }

  .doctors-bg-glow {
    animation: none !important;
    filter: blur(20px) !important;
    opacity: 0.7 !important;
  }

  .doctors-bg-orb {
    display: none !important;
  }

  .doctors-mouse-spotlight {
    display: none !important;
  }

  .doctor-leader-card-modern {
    background: rgba(6, 28, 56, 0.9) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  .doctor-specialty-badge {
    background: rgba(8, 33, 63, 0.94) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}