/* ========== PAGE BANNER (sab inner pages ke liye) ========== */
.banner {
  position: relative;
  padding: 58px 0;
  background: linear-gradient(110deg, #003f73, var(--nav-blue) 55%, #0a6fb8);
  overflow: hidden;
}
.banner::after {
  content: "";
  position: absolute;
  top: -70px; right: -70px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
}

.banner__inner {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 18px;
  text-align: center;
}
.banner__title { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; color: #fff; }

.banner__crumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 11px;
  font-size: 13.5px;
  color: #b9d4ea;
}
.banner__crumb a { color: #b9d4ea; text-decoration: none; transition: color .22s ease; }
.banner__crumb a:hover { color: #fff; }
.banner__crumb .is-current { color: var(--tb-accent); font-weight: 700; }

/* ========== ABOUT ========== */
.about { padding: 78px 0; background: #fff; }

.about__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 18px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: 52px;
}

.about__media { position: relative; }

.about__shape {
  position: absolute;
  top: -18px; left: -18px;
  width: 170px; height: 170px;
  border-radius: 18px;
  background: rgba(26, 171, 83, .12);
  z-index: 1;
}

.about__media img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(0, 59, 110, .2);
}

.about__badge {
  position: absolute;
  z-index: 3;
  right: -14px; bottom: 34px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 20px;
  border-radius: 13px;
  background: var(--nav-blue);
  color: #fff;
  box-shadow: 0 12px 28px rgba(0, 59, 110, .3);
  animation: floatY 4.6s ease-in-out infinite;
}
.about__badge strong { font-size: 33px; font-weight: 800; line-height: 1; }
.about__badge small { font-size: 11.5px; line-height: 1.5; color: #c4dcf0; }

.about__tag {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 30px;
  background: rgba(26, 171, 83, .1);
  color: #128a41;
  font-size: 13px;
  font-weight: 700;
}
.about__title {
  margin: 14px 0 18px;
  font-size: clamp(24px, 2.9vw, 33px);
  font-weight: 800;
  color: #1c2b36;
  line-height: 1.35;
}
.about__title span { color: var(--nav-blue); }

.about__content p {
  margin-bottom: 15px;
  font-size: 15px;
  line-height: 1.85;
  color: #5a6e80;
}
.about__content p strong { color: #1c2b36; }

.about__list { list-style: none; margin: 20px 0 6px; display: flex; flex-direction: column; gap: 11px; }
.about__list li {
  position: relative;
  padding-left: 30px;
  font-size: 14.5px;
  line-height: 1.7;
  color: #3f5668;
}
.about__list li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 1px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(26, 171, 83, .14);
  color: #128a41;
  font-size: 12px;
  font-weight: 800;
}

.about__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* ========== DOCTOR PROFILE ========== */
.doc { padding: 0 0 78px; background: #fff; }
.doc__inner { max-width: 1140px; margin: 0 auto; padding: 0 18px; }

.doc__card {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 36px;
  padding: 32px;
  border-radius: 18px;
  background: linear-gradient(130deg, #eef5fb, #f2f9f5);
  box-shadow: 0 6px 24px rgba(0, 59, 110, .08);
}

.doc__photo { border-radius: 14px; overflow: hidden; }
.doc__photo img {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.doc__photo:hover img { transform: scale(1.05); }

.doc__info { display: flex; flex-direction: column; justify-content: center; }

.doc__role {
  align-self: flex-start;
  padding: 5px 14px;
  border-radius: 20px;
  background: var(--nav-blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.doc__name { margin: 12px 0 5px; font-size: 27px; font-weight: 800; color: #1c2b36; }
.doc__degree { font-size: 14px; font-weight: 700; color: #128a41; }
.doc__bio { margin-top: 16px; font-size: 14.5px; line-height: 1.85; color: #5a6e80; }

.doc__points { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.doc__points span {
  padding: 7px 15px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(0, 75, 135, .15);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--nav-blue);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.doc__points span:hover { background: var(--nav-blue); color: #fff; transform: translateY(-2px); }

/* ========== MISSION / VISION / VALUES ========== */
.mvv { padding: 76px 0 84px; background: linear-gradient(180deg, #f6f9fc, #fff); }
.mvv__inner { max-width: 1180px; margin: 0 auto; padding: 0 18px; }

.mvv__head { text-align: center; margin-bottom: 44px; }
.mvv__title { font-size: clamp(23px, 2.9vw, 32px); font-weight: 800; color: var(--nav-blue); }
.mvv__desc { margin-top: 12px; font-size: 15px; color: #6b8296; }

.mvv__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.mcard {
  padding: 34px 26px 30px;
  border-radius: 16px;
  background: #fff;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0, 59, 110, .08);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.mcard:hover { transform: translateY(-8px); box-shadow: 0 18px 36px rgba(0, 59, 110, .15); }

.mcard__icon {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(0, 75, 135, .09);
  color: var(--nav-blue);
  transition: background .3s ease, color .3s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.mcard__icon svg { width: 28px; height: 28px; }
.mcard:hover .mcard__icon {
  background: var(--nav-blue);
  color: #fff;
  transform: rotateY(180deg);
}

.mcard h3 { font-size: 19px; font-weight: 800; color: #1c2b36; margin-bottom: 11px; }
.mcard p { font-size: 14px; line-height: 1.8; color: #6b8296; }

/* ========== ABOUT RESPONSIVE ========== */
@media (max-width: 1050px) {
  .about { padding: 56px 0; }
  .about__inner { grid-template-columns: 1fr; gap: 44px; }
  .about__media img { height: 360px; }
  .about__badge { right: 16px; }
  .doc__card { grid-template-columns: 1fr; gap: 26px; padding: 24px; }
  .doc__photo img { height: 300px; }
  .mvv__grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}

@media (max-width: 600px) {
  .banner { padding: 42px 0; }
  .about__media img { height: 280px; }
  .about__shape { width: 120px; height: 120px; }
  .about__badge { padding: 12px 15px; bottom: 18px; }
  .about__badge strong { font-size: 26px; }
  .doc__name { font-size: 23px; }
  .about__actions .btn-book, .about__actions .hero__call { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .about__badge { animation: none; }
}