/* Home-page hero, "Option A – light clinical" (chosen 31 Oct 2026): light blue background, navy text,
   navy circle behind Dr. Praveen's cut-out photo. Loaded only on the home page (see _tools/add_hero_style.py). */
.elementor-element-6a0e6c6 {
  background: radial-gradient(circle at 74% 46%, #ffffff 0, #eef5fd 36%, #d9e7f6 100%) !important;
}
/* text that was white on the old navy background becomes navy */
.elementor-element-3c84d20 h1,
.elementor-element-3c84d20 h2,
.elementor-element-3c84d20 p,
.elementor-element-3c84d20 .box-title,
.elementor-element-3c84d20 .box-title a,
.elementor-element-3c84d20 .box-text,
.elementor-element-3c84d20 span:not(.sub-title):not(.sub-title *) { color: #0d1b3e !important; }
.elementor-element-3c84d20 p { color: #3b4a66 !important; }                 /* body copy a touch softer than headings */
.elementor-element-3c84d20 .sec-title { color: #0d1b3e !important; }
.elementor-element-3c84d20 .feature-contact-wrap .contact-info { border-color: #c9d6e8 !important; }   /* divider lines */
/* keep the pills white-on-colour */
.elementor-element-3c84d20 .sub-title, .elementor-element-3c84d20 .sub-title * { color: #fff !important; }
.apx-wa-btn, .apx-wa-btn span { color: #fff !important; }

/* navy circle behind the photo, used as a mask: head and shoulders rise out of the top of the circle,
   the lower body is cut along the circle's round edge (no fade), so the photo never runs past the circle */
.elementor-element-2916b32 { position: relative; --r: min(255px, 41vw); --cy: 54%; }
.elementor-element-2916b32 img {
  position: relative; z-index: 1;
  -webkit-mask-image: linear-gradient(#000, #000), radial-gradient(circle var(--r) at 50% var(--cy), #000 calc(var(--r) - .5px), transparent var(--r));
          mask-image: linear-gradient(#000, #000), radial-gradient(circle var(--r) at 50% var(--cy), #000 calc(var(--r) - .5px), transparent var(--r));
  -webkit-mask-size: 100% var(--cy), 100% 100%;  mask-size: 100% var(--cy), 100% 100%;
  -webkit-mask-repeat: no-repeat;                 mask-repeat: no-repeat;
  -webkit-mask-position: top, center;             mask-position: top, center;
}
.elementor-element-2916b32::before {
  content: ""; position: absolute; left: 50%; top: var(--cy); width: calc(var(--r) * 2); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: linear-gradient(160deg, #1f3967, #2c5f8a); box-shadow: 0 30px 70px rgba(31, 57, 103, .35); z-index: 0;
}
/* tablet: the photo is shorter there, so lift the circle until its edge (not the photo's flat bottom) is what cuts him off */
@media (min-width: 768px) and (max-width: 1024px) { .elementor-element-2916b32 { --cy: 50%; } }

/* proof row + credentials under the hero text */
.apx-proof { display: flex; gap: 0; margin-top: 26px; max-width: 600px; }
.apx-proof > div { flex: 1; padding: 2px 18px; border-left: 1px solid #c9d6e8; }
.apx-proof > div:first-child { padding-left: 0; border-left: 0; }
.apx-proof b { display: block; font-family: var(--title-font, inherit); font-size: 30px; line-height: 1.1; font-weight: 700; color: #1f3967; }
.apx-proof b i { font-style: normal; font-size: 13px; letter-spacing: 1px; color: #f5a623; vertical-align: middle; }
.apx-proof span { display: block; font-size: 13.5px; line-height: 1.35; color: #4a5a78; margin-top: 4px; }
.apx-creds { margin-top: 16px !important; font-size: 12.5px !important; letter-spacing: .06em; text-transform: uppercase; color: #5b6880 !important; font-weight: 600; }
@media (max-width: 767px) {
  .apx-proof { margin-top: 20px; }
  .apx-proof > div { padding: 2px 10px; }
  .apx-proof b { font-size: 24px; }
  .apx-proof b i { display: block; font-size: 11px; margin-top: 2px; }
  .apx-proof span { font-size: 12px; }
  .apx-creds { font-size: 11px !important; line-height: 1.5 !important; }
}

/* desktop: the proof row made the text column taller than the theme's fixed 700px hero, which pushed the
   Support / Mail / WhatsApp row under the clinic cards. Let the hero grow with its content instead. */
@media (min-width: 1025px) {
  .elementor-element-6a0e6c6 { height: auto !important; min-height: 700px !important; padding-bottom: 64px !important; }
  .elementor-element-6a0e6c6 > .e-con-inner { align-items: flex-end !important; }
}

/* "Qualifications & fellowships" in the About section (add_qualifications.py) */
.apx-quals { margin: 22px 0 26px; }
.apx-quals-title { font-size: 19px !important; margin: 0 0 14px !important; color: #0d1b3e; }
.apx-quals-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.apx-quals-grid li { display: flex; gap: 11px; align-items: flex-start; background: #f3f7fc; border: 1px solid #e3eaf3; border-radius: 14px; padding: 12px 14px; margin: 0; }
.apx-quals-grid svg { width: 20px; height: 20px; flex: none; fill: #f37021; margin-top: 2px; }
.apx-quals-grid b { display: block; font-family: var(--title-font, inherit); font-size: 15.5px; color: #0d1b3e; line-height: 1.25; }
.apx-quals-grid span { display: block; font-size: 13.5px; color: #4a5a78; line-height: 1.4; margin-top: 2px; }
.apx-award { display: flex; gap: 11px; align-items: flex-start; margin: 12px 0 0 !important; padding: 12px 14px; border-radius: 14px;
  background: #fff4ec; border: 1px solid #ffd9bf; font-size: 13.5px !important; line-height: 1.45 !important; color: #5a3a22 !important; text-align: left !important; }
.apx-award svg { width: 20px; height: 20px; flex: none; fill: #f37021; margin-top: 1px; }
.apx-award b { color: #0d1b3e; }
@media (max-width: 767px) {
  .apx-quals-grid { grid-template-columns: 1fr; gap: 8px; }
  .apx-quals-grid li { padding: 11px 13px; }
}

/* the keyword headline ("Spine & Cervical Surgeon in Hyderabad") is longer than the old one: keep it to 3 lines on desktop */
/* H1 = keyword line (small, above) + the doctor's name (large) */
.elementor-element-6a0e6c6 h1.sec-title .apx-h1-kw { display: block; font-size: 26px; line-height: 1.25; font-weight: 600; color: #1f3967 !important;
  text-transform: none; letter-spacing: -.01em; margin-bottom: 10px; }
@media (min-width: 1025px) { .elementor-element-6a0e6c6 h1.sec-title { font-size: min(52px, 3.5vw) !important; line-height: 1.1 !important; white-space: nowrap; } .elementor-element-6a0e6c6 h1.sec-title .apx-h1-kw { white-space: normal; } }
@media (max-width: 767px) { .elementor-element-6a0e6c6 h1.sec-title .apx-h1-kw { font-size: 19px; margin-bottom: 6px; } }

@media (max-width: 1024px) { body .elementor-element-6a0e6c6 .title-area p.sec-text, body .elementor-element-6a0e6c6 p.sec-text { margin-top: 14px !important; } }