/* ==========================================================================
   vasudev-custom.css
   Project-specific additions. Loaded last so it can override the exported
   Elementor stylesheets without editing them.

   1. Top-gap guard   — nothing may sit above the header in the flow.
   2. Inner-page hero — img_1.jpg replaces the #F3FFFB radial gradient.
   3. Breadcrumbs     — shared styling for the inner-page breadcrumb trail.
   4. Testimonials    — initial-letter avatars, since we hold no patient photos.
   5. Patient journey — numbered first-visit steps on the Conditions page.
   6. Contact details — tappable phone/email links and the Maps embed.
   7. Header menu     — centre the desktop nav instead of right-aligning it.
   8. Blog list       — static article cards (no Elementor posts widget here).
   9. Blog detail     — article body, share row, author box, sidebar widgets.
  10. Pagination      — page links under the blog grid.
  11. Home hero       — size the cut-out photo against the disc behind it.
  12. Credential badge— stop "BAMS" clipping and the -35px page overflow.
  13. Olive card      — readable text on the #6B8E23 panels.
  14. Founder block   — About Us founder section + round team portraits.
  15. Services menu   — three-across dropdown wide enough for all 14 items.
  16. Our Physician   — cropped portrait + degree certificate card.
   ========================================================================== */


/* 1. Top-gap guard ---------------------------------------------------------
   The header container carries --margin-bottom:-80px (post-40.css) so the
   navbar overlaps the first page section and the section background starts at
   y=0. That only works while the header is the first in-flow element in
   <body>. The anti-forgery token wrapper is rendered before it and, being an
   empty block, can introduce a stray line box that pushes the whole header
   down. Hidden inputs still post normally from a display:none container.      */
body > #imbibe-request-verification-token {
	display: none;
}

/* The header must paint above the hero background in every stacking context. */
body > .elementor-location-header {
	position: relative;
	z-index: 99;
}

/* Common culprits that can render before the header and open a gap. Hidden
   inputs still post normally from a display:none container.                   */
body > #imbibe-request-verification-token,
body > form#__AjaxAntiForgeryForm,
body > input[type="hidden"] {
	display: none !important;
}


/* 1b. Header logo ----------------------------------------------------------
   vasudevlogonobg1.png was a 409x362 canvas whose artwork only occupied a
   185x171 box in the middle, so roughly 53% of the width and 47% of the height
   were empty transparent padding. Scaled to the theme's height:42px that left
   the visible mark about 20px tall and sitting off-centre. images/vasudev-logo.png
   is the same artwork with the transparent padding cropped off, so the declared
   height is now the real height of the logo. The rules below restore a sensible
   optical size inside the 80 / 70 / 60px header.                              */
body .elementor-40 .elementor-element.elementor-element-addb148 img {
	height: 56px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
}

@media (max-width: 1024px) {
	body .elementor-40 .elementor-element.elementor-element-addb148 img {
		height: 48px;
	}
}

@media (max-width: 767px) {
	body .elementor-40 .elementor-element.elementor-element-addb148 img {
		height: 42px;
	}
}


/* 2. Inner-page hero background -------------------------------------------
   These are the six hero containers that used
       background-image: radial-gradient(at top center,
           var(--e-global-color-7fbea4f) 0%,
           var(--e-global-color-c94d9ab) 100%);
   where --e-global-color-7fbea4f is #F3FFFB and --e-global-color-c94d9ab is
   #DEEED9 (both defined in post-7.css).

       .elementor-element-2fbe0f1   post-177  Contact us
       .elementor-element-b1d1b11   post-256  FAQ, Conditions We Care For
       .elementor-element-5da5259   post-473  Services
       .elementor-element-a1c6268   post-547  Appointment / Booking
       .elementor-element-8963b8f   post-609  About us, Our Team
       .elementor-element-sdhero01  post-999  Panchakarma Overview + the 13
                                              individual therapy pages

   The home page hero (.elementor-element-ebf5c34, post-672) is deliberately
   NOT in this list.

   Each page links its own post-NNN.css from inside <body>, i.e. AFTER this
   file, so a plain specificity tie would lose. The leading `body` adds one
   element to the selector and settles it regardless of source order. background-attachment stays scroll: fixed breaks on
   iOS Safari and inside the shape-divider clip.                              */
body .elementor .elementor-element.elementor-element-2fbe0f1:not(.elementor-motion-effects-element-type-background),
body .elementor .elementor-element.elementor-element-b1d1b11:not(.elementor-motion-effects-element-type-background),
body .elementor .elementor-element.elementor-element-5da5259:not(.elementor-motion-effects-element-type-background),
body .elementor .elementor-element.elementor-element-a1c6268:not(.elementor-motion-effects-element-type-background),
body .elementor .elementor-element.elementor-element-8963b8f:not(.elementor-motion-effects-element-type-background),
body .elementor .elementor-element.elementor-element-sdhero01:not(.elementor-motion-effects-element-type-background) {
	background-color: #f3fffb;
	background-image: url(../images/img_1.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
}

/* The hero containers start at the very top of the document and the navbar is
   pulled back over them, so no extra offset is needed. Belt and braces: make
   sure none of them picks up a margin that would open a gap above the navbar. */
body .elementor .elementor-element.elementor-element-2fbe0f1,
body .elementor .elementor-element.elementor-element-b1d1b11,
body .elementor .elementor-element.elementor-element-5da5259,
body .elementor .elementor-element.elementor-element-a1c6268,
body .elementor .elementor-element.elementor-element-8963b8f,
body .elementor .elementor-element.elementor-element-sdhero01 {
	--margin-top: 0px;
}


/* 3. Breadcrumbs -----------------------------------------------------------
   Sits inside the existing hero container, under the page sub-heading, so it
   inherits the hero's centring and responsive padding. No new section.       */
.vd-breadcrumb {
	width: 100%;
	margin-top: 18px;
}

.vd-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vd-breadcrumb li {
	display: flex;
	align-items: center;
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	font-size: 15px;
	line-height: 1.4;
	color: var(--e-global-color-primary);
}

/* separator between crumbs */
.vd-breadcrumb li + li::before {
	content: "/";
	margin-right: 10px;
	color: var(--e-global-color-primary);
	opacity: .55;
}

.vd-breadcrumb a {
	color: var(--e-global-color-primary);
	text-decoration: none;
	transition: color .3s;
}

.vd-breadcrumb a:hover,
.vd-breadcrumb a:focus {
	color: var(--e-global-color-d49ac81);
}

/* current page */
.vd-breadcrumb [aria-current="page"] {
	color: var(--e-global-color-secondary);
	font-weight: 500;
}

@media (max-width: 1024px) {
	.vd-breadcrumb {
		margin-top: 16px;
	}

	.vd-breadcrumb li {
		font-size: 14px;
	}
}

@media (max-width: 767px) {
	.vd-breadcrumb {
		margin-top: 14px;
	}

	.vd-breadcrumb ol {
		gap: 4px 8px;
	}

	.vd-breadcrumb li {
		font-size: 13px;
	}

	.vd-breadcrumb li + li::before {
		margin-right: 8px;
	}
}


/* 4. Testimonials ----------------------------------------------------------
   The "What Our Patients Say" slider has no patient photographs on file, so
   each card shows the patient's initial instead of a stock face. Sizing and
   border match the avatar styling the exported theme uses for <img>. */

.ekit-wid-con .elementskit-commentor-bio .elementskit-commentor-image > .vd-avatar-initial {
	align-items: center;
	background-color: #7FB53D;
	border: 4px solid #FFFFFF;
	border-radius: 50%;
	box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.1);
	color: #FFFFFF;
	display: flex;
	font-size: 26px;
	font-weight: 600;
	height: 70px;
	justify-content: center;
	line-height: 1;
	width: 70px;
}


/* 5. Patient journey -------------------------------------------------------
   Four numbered steps shown under the conditions accordion, so a patient
   reading about their complaint can see what booking actually leads to.
   Plain markup rather than Elementor containers — same approach as
   .vd-breadcrumb above. */

.vd-journey {
	padding: 20px 20px 70px;
}

.vd-journey__inner {
	margin: 0 auto;
	max-width: 1140px;
	text-align: center;
}

.vd-journey .vd-journey__eyebrow {
	color: #7FB53D;
	font-family: var(--e-global-typography-accent-font-family), Sans-serif;
	font-size: 15px;
	font-style: italic;
	letter-spacing: 1px;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.vd-journey .vd-journey__title {
	color: #1F1F1F;
	font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
	font-size: 40px;
	font-weight: 600;
	line-height: 1.3em;
	margin: 0 0 50px;
}

.vd-journey .vd-journey__steps {
	counter-reset: none;
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(4, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

/* the thread running behind the numbers, tying the four steps together */
.vd-journey .vd-journey__steps::before {
	background: linear-gradient(90deg, rgba(127, 181, 61, 0) 0%, #DEEED9 12%, #DEEED9 88%, rgba(127, 181, 61, 0) 100%);
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 0;
}

.vd-journey .vd-journey__step {
	background: #FFFFFF;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 16px;
	padding: 0 24px 28px;
	position: relative;
	text-align: center;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
	z-index: 1;
}

.vd-journey .vd-journey__step:hover {
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
	transform: translateY(-4px);
}

.vd-journey .vd-journey__num {
	align-items: center;
	background: #7FB53D;
	border: 6px solid #FFFFFF;
	border-radius: 50%;
	color: #FFFFFF;
	display: flex;
	font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
	font-size: 22px;
	font-weight: 600;
	height: 66px;
	justify-content: center;
	line-height: 1;
	margin: -33px auto 18px;
	width: 66px;
}

.vd-journey .vd-journey__step-title {
	color: #1F1F1F;
	font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.4em;
	margin: 0 0 10px;
}

.vd-journey .vd-journey__step-text {
	color: #6E7A84;
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	font-size: 15px;
	line-height: 1.7em;
	margin: 0;
}

.vd-journey .vd-journey__cta {
	background: #7FB53D;
	border-radius: 100px;
	color: #FFFFFF;
	display: inline-block;
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	font-size: 15px;
	font-weight: 500;
	margin-top: 45px;
	padding: 14px 34px;
	text-decoration: none;
	transition: background-color 0.3s ease;
}

.vd-journey .vd-journey__cta:hover,
.vd-journey .vd-journey__cta:focus {
	background: #6B8E23;
	color: #FFFFFF;
}

@media (max-width: 1024px) {
	.vd-journey .vd-journey__title { font-size: 32px; }
	.vd-journey .vd-journey__steps { grid-template-columns: repeat(2, 1fr); row-gap: 56px; }
	.vd-journey .vd-journey__steps::before { display: none; }
}

@media (max-width: 767px) {
	.vd-journey { padding-bottom: 50px; }
	.vd-journey .vd-journey__title { font-size: 26px; margin-bottom: 44px; }
	.vd-journey .vd-journey__steps { grid-template-columns: 1fr; row-gap: 52px; }
}


/* 6. Contact details -------------------------------------------------------
   Phone and e-mail are links so a phone can dial or compose straight from the
   page, but they must not pick up the kit's link colour and sit there looking
   like navigation. `a.vd-contact-link` ties `.elementor-kit-7 a` on
   specificity and wins on order, since this file loads last. */

a.vd-contact-link {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease;
	word-break: break-word;
}

a.vd-contact-link:hover,
a.vd-contact-link:focus {
	color: #7FB53D;
}

/* the embed ships with width/height attributes as a no-CSS fallback */
iframe.vd-map {
	border: 0;
	border-radius: 20px;
	display: block;
	height: 460px;
	width: 100%;
}

@media (max-width: 767px) {
	iframe.vd-map { height: 340px; }
}

/* The footer's "Get in touch" column is ~220px wide and its description type
   is 22px, which splits the address across "gmail." / "com". The e-mail gets
   its own smaller size there; the phone number still fits at full size. */
.elementor-element-14db292 a.vd-contact-link {
	font-size: 16px;
	line-height: 1.6;
}

/* post-46.css styles the two original footer icon-boxes by element id, so the
   address box added beside them inherits the widget default (centred) instead.
   Match the column: left-aligned, label above, address at body size. */
.elementor-element-vdaddr .elementor-icon-box-wrapper {
	text-align: start;
}

.elementor-element-vdaddr .elementor-icon-box-title {
	color: var( --e-global-color-primary );
	font-family: var( --e-global-typography-69c152f-font-family ), Sans-serif;
	font-size: var( --e-global-typography-69c152f-font-size );
	font-weight: var( --e-global-typography-69c152f-font-weight );
	line-height: var( --e-global-typography-69c152f-line-height );
	margin-block-end: 5px;
}

.elementor-element-vdaddr .elementor-icon-box-description {
	color: var( --e-global-color-secondary );
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	font-size: 16px;
	line-height: 1.7em;
}


/* 7. Header menu -----------------------------------------------------------
   The header row holds two columns: the logo (4e0911d, 20%) and a second
   column (071fe92, 80%) carrying BOTH the nav and the social icons, with
   --justify-content:flex-end. So the menu is pushed against the social icons
   at the right edge, and no amount of justifying inside that column can bring
   it to the middle of the header — centring within a column that starts at
   20% lands at 60%, not 50%.

   Instead the nav is taken out of that column's flow on desktop and centred on
   the header row itself (.e-con gives it position:relative already); the logo
   stays left and the social icons stay right. 071fe92 has to go position:static
   or it would be the offset parent.

   The guard is 1200px, not the 1025px where the desktop menu first appears:
   between those two the centred menu would sit close enough to the logo to
   touch it (smartmenus adds the dropdown chevrons at runtime, so the menu is
   ~40px wider than the markup suggests). Below 1200px the original
   right-aligned layout stands, and below 1025px the widget is
   elementor-nav-menu--dropdown-tablet — the hamburger, which must keep its
   normal flow inside that column. */

@media (min-width: 1200px) {
	.elementor-40 .elementor-element.elementor-element-071fe92 {
		position: static;
	}

	.elementor-40 .elementor-element.elementor-element-ec7e89a {
		left: 50%;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		/* an absolutely positioned box with width:auto shrinks to fit the space
		   LEFT of its right edge - i.e. only 50% of the header - so the menu
		   wrapped onto a second line. max-content sizes it to the menu itself. */
		max-width: none;
		width: max-content;
	}

	.elementor-40 .elementor-element.elementor-element-ec7e89a .elementor-nav-menu--main .elementor-nav-menu {
		flex-wrap: nowrap;
	}
}


/* 8. Blog list -------------------------------------------------------------
   This theme has no Elementor posts-widget stylesheet and no post-99.css, so
   the exported .elementor-posts / .elementor-post__card markup has nothing to
   style it. The article list is plain markup instead, styled here.

   Selectors are doubled up under .vd-blog because .elementor-kit-7 h2 and
   .elementor-kit-7 a (0,1,1) outrank a single class. */

.vd-blog {
	padding: 80px 20px 90px;
}

.vd-blog__inner {
	margin: 0 auto;
	max-width: 1140px;
}

.vd-blog .vd-blog__grid {
	display: grid;
	gap: 35px 30px;
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.vd-blog .vd-blog__card {
	background: #FFFFFF;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.vd-blog .vd-blog__card:hover {
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.09);
	transform: translateY(-4px);
}

.vd-blog .vd-blog__media {
	display: block;
	line-height: 0;
	overflow: hidden;
	position: relative;
}

/* the source images are 1280px wide; the ratio box keeps every card equal */
.vd-blog .vd-blog__media img {
	aspect-ratio: 3 / 2;
	display: block;
	height: auto;
	object-fit: cover;
	transition: transform 0.5s ease;
	width: 100%;
}

.vd-blog .vd-blog__card:hover .vd-blog__media img {
	transform: scale(1.05);
}

.vd-blog .vd-blog__badge {
	background: #7FB53D;
	border-radius: 100px;
	color: #FFFFFF;
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	font-size: 13px;
	font-weight: 500;
	left: 16px;
	line-height: 1;
	padding: 8px 16px;
	position: absolute;
	top: 16px;
}

.vd-blog .vd-blog__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 24px 26px 28px;
}

.vd-blog .vd-blog__meta {
	color: #6E7A84;
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	font-size: 14px;
	margin: 0 0 10px;
}

.vd-blog .vd-blog__title {
	font-family: var( --e-global-typography-secondary-font-family ), Sans-serif;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.4em;
	margin: 0 0 12px;
}

.vd-blog .vd-blog__title a {
	color: #1F1F1F;
	text-decoration: none;
	transition: color 0.3s ease;
}

.vd-blog .vd-blog__title a:hover,
.vd-blog .vd-blog__title a:focus {
	color: #7FB53D;
}

.vd-blog .vd-blog__excerpt {
	color: #6E7A84;
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	font-size: 15px;
	line-height: 1.75em;
	margin: 0 0 20px;
}

/* pushed to the bottom so the links line up across cards of unequal text */
.vd-blog .vd-blog__more {
	align-self: flex-start;
	border-bottom: 1px solid rgba(127, 181, 61, 0.45);
	color: #7FB53D;
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	font-size: 15px;
	font-weight: 500;
	margin-top: auto;
	padding-bottom: 3px;
	text-decoration: none;
	transition: border-color 0.3s ease, color 0.3s ease;
}

.vd-blog .vd-blog__more:hover,
.vd-blog .vd-blog__more:focus {
	border-bottom-color: #6B8E23;
	color: #6B8E23;
}

/* 3 across is held all the way down to 900px rather than dropping to 2 at the
   theme's 1024px tablet breakpoint: a 1280px screen at 125% Windows scaling
   reports exactly 1024 CSS px, so a 1024 cut-off turns laptops into 2 columns. */
@media (max-width: 1024px) {
	.vd-blog { padding: 60px 20px 70px; }
	.vd-blog .vd-blog__grid { gap: 28px 21px; }
}

@media (max-width: 900px) {
	.vd-blog .vd-blog__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.vd-blog { padding: 45px 20px 55px; }
	.vd-blog .vd-blog__grid { grid-template-columns: 1fr; gap: 24px; }
	.vd-blog .vd-blog__title { font-size: 19px; }
}


/* 9. Blog detail -----------------------------------------------------------
   Article column plus a right sidebar, laid out like the reference page.
   Every rule is doubled under .vd-post / .vd-widget because the kit styles
   bare h2/h3/p/a/ul at (0,1,1), which beats a single class. */

.vd-post {
	padding: 70px 20px 90px;
}

.vd-post__inner {
	display: grid;
	gap: 50px;
	grid-template-columns: minmax(0, 1fr) 330px;
	margin: 0 auto;
	max-width: 1140px;
}

/* ---- post header bits that sit inside the shared hero ---- */

.vd-post__eyebrow {
	color: #7FB53D;
	font-family: var( --e-global-typography-accent-font-family ), Sans-serif;
	font-size: 15px;
	font-style: italic;
	letter-spacing: 1px;
	margin: 0 0 10px;
	text-align: center;
	text-transform: uppercase;
}

.vd-post__headmeta {
	color: #6E7A84;
	display: flex;
	flex-wrap: wrap;
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	font-size: 15px;
	gap: 10px 22px;
	justify-content: center;
	margin: 14px 0 0;
}

.vd-post__headmeta span::before {
	color: #B9C4B0;
	content: "\2022";
	margin-right: 22px;
}

/* ---- article ---- */

.vd-post .vd-post__figure {
	border-radius: 20px;
	margin: 0 0 36px;
	overflow: hidden;
}

.vd-post .vd-post__figure img {
	aspect-ratio: 16 / 9;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.vd-post .vd-post__figure--inline {
	margin: 36px 0;
}

.vd-post .vd-post__figure--inline figcaption {
	color: #6E7A84;
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	font-size: 14px;
	font-style: italic;
	padding: 14px 4px 0;
	text-align: center;
}

.vd-post .vd-post__body p {
	color: #6E7A84;
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	font-size: 16px;
	line-height: 1.9em;
	margin: 0 0 22px;
}

.vd-post .vd-post__lead {
	color: #1F1F1F;
	font-size: 19px;
	line-height: 1.8em;
}

.vd-post .vd-post__body h2 {
	color: #1F1F1F;
	font-family: var( --e-global-typography-secondary-font-family ), Sans-serif;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.35em;
	margin: 40px 0 16px;
}

.vd-post .vd-post__body ul {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.vd-post .vd-post__body ul li {
	color: #6E7A84;
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	font-size: 16px;
	line-height: 1.8em;
	margin-bottom: 10px;
	padding-left: 28px;
	position: relative;
}

.vd-post .vd-post__body ul li::before {
	background: #7FB53D;
	border-radius: 50%;
	content: "";
	height: 8px;
	left: 4px;
	position: absolute;
	top: 12px;
	width: 8px;
}

.vd-post .vd-post__body blockquote {
	background: #F3FFFB;
	border-left: 4px solid #7FB53D;
	border-radius: 0 16px 16px 0;
	margin: 34px 0;
	padding: 28px 30px;
}

.vd-post .vd-post__body blockquote p {
	color: #1F1F1F;
	font-family: var( --e-global-typography-secondary-font-family ), Sans-serif;
	font-size: 18px;
	font-style: italic;
	line-height: 1.75em;
	margin: 0;
}

/* ---- share ---- */

.vd-post__share {
	align-items: center;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
	margin-top: 40px;
	padding-top: 26px;
}

.vd-post .vd-post__share-label {
	color: #1F1F1F;
	font-family: var( --e-global-typography-secondary-font-family ), Sans-serif;
	font-size: 17px;
	font-weight: 600;
}

.vd-post .vd-post__share-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* text labels rather than brand icons: this theme ships no icon font with
   the brand glyphs in it (materialdesignicons.min.css is a 410-byte stub) */
.vd-post .vd-post__share-link {
	background: #DEEED9;
	border-radius: 100px;
	color: #4F6B2A;
	display: inline-block;
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	font-size: 14px;
	font-weight: 500;
	padding: 9px 18px;
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.vd-post .vd-post__share-link:hover,
.vd-post .vd-post__share-link:focus {
	background: #7FB53D;
	color: #FFFFFF;
}

/* ---- author ---- */

.vd-post__author {
	align-items: flex-start;
	background: #F3FFFB;
	border: 1px solid #DEEED9;
	border-radius: 20px;
	display: flex;
	gap: 22px;
	margin-top: 36px;
	padding: 28px 30px;
}

.vd-post__author-avatar {
	align-items: center;
	background: #7FB53D;
	border-radius: 50%;
	color: #FFFFFF;
	display: flex;
	flex: 0 0 auto;
	font-family: var( --e-global-typography-secondary-font-family ), Sans-serif;
	font-size: 26px;
	font-weight: 600;
	height: 68px;
	justify-content: center;
	line-height: 1;
	width: 68px;
}

.vd-post .vd-post__author-name {
	color: #1F1F1F;
	font-family: var( --e-global-typography-secondary-font-family ), Sans-serif;
	font-size: 19px;
	font-weight: 600;
	margin: 0 0 2px;
}

.vd-post .vd-post__author-role {
	color: #7FB53D;
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	font-size: 14px;
	margin: 0 0 10px;
}

.vd-post .vd-post__author-bio {
	color: #6E7A84;
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	font-size: 15px;
	line-height: 1.75em;
	margin: 0;
}

/* ---- comments ---- */

.vd-post__comments {
	margin-top: 46px;
}

.vd-post .vd-post__comments-title {
	color: #1F1F1F;
	font-family: var( --e-global-typography-secondary-font-family ), Sans-serif;
	font-size: 26px;
	font-weight: 600;
	margin: 0 0 8px;
}

.vd-post .vd-post__comments-note {
	color: #6E7A84;
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	font-size: 14px;
	margin: 0 0 22px;
}

/* ---- forms (comments + newsletter) ---- */

.vd-form__row {
	margin-bottom: 18px;
}

.vd-form__grid {
	display: grid;
	gap: 0 18px;
	grid-template-columns: repeat(3, 1fr);
}

.vd-form .vd-form__label {
	color: #1F1F1F;
	display: block;
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 7px;
}

.vd-form__label--hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.vd-form .vd-form__field {
	background: #FFFFFF;
	border: 1px solid #DEEED9;
	border-radius: 12px;
	color: #1F1F1F;
	display: block;
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	font-size: 15px;
	padding: 12px 16px;
	transition: border-color 0.3s ease;
	width: 100%;
}

.vd-form .vd-form__field:focus {
	border-color: #7FB53D;
	outline: none;
}

.vd-form .vd-form__submit {
	background: #7FB53D;
	border: 0;
	border-radius: 100px;
	color: #FFFFFF;
	cursor: pointer;
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	font-size: 15px;
	font-weight: 500;
	margin-top: 6px;
	padding: 13px 32px;
	transition: background-color 0.3s ease;
}

.vd-form .vd-form__submit:hover,
.vd-form .vd-form__submit:focus {
	background: #6B8E23;
}

.vd-form--inline .vd-form__field {
	margin-bottom: 10px;
}

.vd-form--inline .vd-form__submit {
	margin-top: 0;
	width: 100%;
}

/* ---- sidebar ---- */

.vd-post__side {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.vd-widget {
	background: #FFFFFF;
	border: 1px solid rgba(0, 0, 0, 0.07);
	border-radius: 20px;
	padding: 26px 26px 28px;
}

.vd-widget--news {
	background: #F3FFFB;
	border-color: #DEEED9;
}

.vd-widget .vd-widget__title {
	color: #1F1F1F;
	font-family: var( --e-global-typography-secondary-font-family ), Sans-serif;
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 18px;
}

.vd-widget .vd-widget__text {
	color: #6E7A84;
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	font-size: 15px;
	line-height: 1.7em;
	margin: 0 0 16px;
}

.vd-widget .vd-widget__cats {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vd-widget .vd-widget__cats li + li {
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.vd-widget .vd-widget__cats a {
	align-items: center;
	color: #6E7A84;
	display: flex;
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	font-size: 15px;
	justify-content: space-between;
	padding: 11px 0;
	text-decoration: none;
	transition: color 0.3s ease;
}

.vd-widget .vd-widget__cats a:hover,
.vd-widget .vd-widget__cats a:focus {
	color: #7FB53D;
}

.vd-widget .vd-widget__cats span {
	background: #DEEED9;
	border-radius: 100px;
	color: #4F6B2A;
	font-size: 12px;
	padding: 3px 10px;
}

.vd-widget .vd-widget__posts {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vd-widget .vd-widget__post {
	display: flex;
	gap: 14px;
}

.vd-widget .vd-widget__post + .vd-widget__post {
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	margin-top: 14px;
	padding-top: 14px;
}

.vd-widget .vd-widget__post-thumb {
	border-radius: 10px;
	flex: 0 0 auto;
	height: 62px;
	overflow: hidden;
	width: 72px;
}

.vd-widget .vd-widget__post-thumb img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.vd-widget .vd-widget__post-title {
	color: #1F1F1F;
	display: block;
	font-family: var( --e-global-typography-secondary-font-family ), Sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45em;
	margin-bottom: 4px;
	text-decoration: none;
	transition: color 0.3s ease;
}

.vd-widget .vd-widget__post-title:hover,
.vd-widget .vd-widget__post-title:focus {
	color: #7FB53D;
}

.vd-widget .vd-widget__post-date {
	color: #6E7A84;
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	font-size: 13px;
}

@media (max-width: 1024px) {
	.vd-post { padding: 55px 20px 70px; }
	.vd-post__inner { gap: 40px; grid-template-columns: minmax(0, 1fr); }
	.vd-post .vd-post__body h2 { font-size: 25px; }
}

@media (max-width: 767px) {
	.vd-post { padding: 40px 20px 55px; }
	.vd-post .vd-post__lead { font-size: 17px; }
	.vd-post .vd-post__body h2 { font-size: 22px; }
	.vd-form__grid { grid-template-columns: 1fr; }
	.vd-post__author { flex-direction: column; gap: 16px; }
}


/* 10. Pagination -----------------------------------------------------------
   Sits under the blog grid. The markup is static, so the current page is
   whichever link carries --current rather than anything computed.
   Selectors are doubled under .vd-pager to clear .elementor-kit-7 a. */

.vd-pager {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 55px;
}

.vd-pager .vd-pager__link {
	align-items: center;
	background: #FFFFFF;
	border: 1px solid #DEEED9;
	border-radius: 100px;
	color: #6E7A84;
	display: inline-flex;
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	font-size: 15px;
	font-weight: 500;
	height: 46px;
	justify-content: center;
	min-width: 46px;
	padding: 0 8px;
	text-decoration: none;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.vd-pager .vd-pager__link:hover,
.vd-pager .vd-pager__link:focus {
	background: #DEEED9;
	border-color: #DEEED9;
	color: #4F6B2A;
}

.vd-pager .vd-pager__link--current,
.vd-pager .vd-pager__link--current:hover,
.vd-pager .vd-pager__link--current:focus {
	background: #7FB53D;
	border-color: #7FB53D;
	color: #FFFFFF;
}

/* prev/next carry words, so they need room the numbers do not */
.vd-pager .vd-pager__link--nav {
	padding: 0 22px;
}

/* a <span>, not an <a>: there is no previous page from page 1 */
.vd-pager .vd-pager__link--disabled,
.vd-pager .vd-pager__link--disabled:hover {
	background: #FFFFFF;
	border-color: rgba(0, 0, 0, 0.07);
	color: #C3CBD2;
	cursor: default;
}

.vd-pager .vd-pager__gap {
	color: #B9C4B0;
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	padding: 0 2px;
}

@media (max-width: 767px) {
	.vd-pager { gap: 8px; margin-top: 40px; }
	.vd-pager .vd-pager__link { font-size: 14px; height: 42px; min-width: 42px; }
	.vd-pager .vd-pager__link--nav { padding: 0 16px; }
}


/* 11. Home hero ------------------------------------------------------------
   Two assets are stacked here, both 1376x768:

     circle.png      (b1e970e) a green disc, ~660px across, centred in the
                     canvas with transparent padding either side. Sized with
                     object-fit: cover, so the disc scales with the box.
     panchkarma.webp (5362dae) a transparent cut-out of the therapy scene,
                     filling ~87% of the canvas width. Sized with
                     object-fit: contain, which is width-limited at this
                     aspect ratio — so the `height` post-672.css sets never
                     changed how large the scene drew, only where it sat.

   The result was a scene drawn far larger than the disc behind it, with its
   heavy end (couch, pots, bowls) hanging below and to the right of the disc
   while the top of the disc stayed empty. On a phone the scene kept its
   572px width attribute and ran past the edge of the screen.

   Both are centred on the same point by their own layout, so the fix is to
   size the disc and the scene against each other at every breakpoint, and to
   lift the scene slightly within its box (object-position) so its weight sits
   on the middle of the disc rather than on the disc's lower edge.

   As in section 2, home.cshtml links post-672.css from inside <body>, i.e.
   after this file, so the leading `body .elementor` is what wins the tie.   */
body .elementor .elementor-element.elementor-element-b1e970e {
	width: 520px;
	max-width: 100%;
	--container-widget-width: 520px;
}

body .elementor .elementor-element.elementor-element-b1e970e img {
	width: 100%;
	height: 520px;
	object-fit: cover;
}

body .elementor .elementor-element.elementor-element-5362dae img {
	width: 560px;
	max-width: 100%;
	height: 520px;
	object-fit: contain;
	object-position: center 40%;
}

/* the left column carried 9em of bottom padding, which left the section
   roughly 200px taller than its tallest column */
body .elementor .elementor-element.elementor-element-5f2df1a {
	--padding-top: 4em;
	--padding-bottom: 5em;
}

@media (max-width: 1024px) {
	/* 10em of side padding left barely 450px for the headline at 768px */
	body .elementor .elementor-element.elementor-element-5f2df1a {
		--padding-top: 3em;
		--padding-bottom: 1em;
		--padding-left: 2.5em;
		--padding-right: 2.5em;
	}

	body .elementor .elementor-element.elementor-element-b1e970e {
		width: 440px;
		--container-widget-width: 440px;
	}

	body .elementor .elementor-element.elementor-element-b1e970e img {
		height: 440px;
	}

	body .elementor .elementor-element.elementor-element-5362dae img {
		width: 475px;
		height: 440px;
	}
}

@media (max-width: 767px) {
	body .elementor .elementor-element.elementor-element-5f2df1a {
		--padding-top: 2em;
		--padding-bottom: 0.5em;
		--padding-left: 1em;
		--padding-right: 1em;
	}

	body .elementor .elementor-element.elementor-element-b1e970e {
		width: 280px;
		--container-widget-width: 280px;
	}

	body .elementor .elementor-element.elementor-element-b1e970e img {
		height: 280px;
		border-radius: 0;
	}

	body .elementor .elementor-element.elementor-element-5362dae img {
		width: 320px;
		height: 280px;
	}
}


/* 12. Credential badge -----------------------------------------------------
   The "Qualified & Registered / BAMS / Registered Ayurvedic Practitioner"
   card appears twice: home (989bf48 + 04864fa, post-672) and Services
   (2142e8f + 147d6f6, post-473). Two faults, identical in both copies:

   a) "BAMS" inherits --e-global-typography-primary-font-size, which is
      67.32px on desktop. The card is 165px wide with 14px of side padding,
      so the S was clipped off by the card's own `--overflow: hidden`.

   b) The card is absolutely positioned at right:-35px above 1024px. Between
      roughly 1025px and 1300px the column it hangs off already reaches the
      edge of the viewport, so those 35px became horizontal page scroll
      (documentElement.scrollWidth 1293 against clientWidth 1258 at 1280).
      Below 1366px it now sits flush instead.                                */
body .elementor .elementor-element.elementor-element-04864fa .elementor-heading-title,
body .elementor .elementor-element.elementor-element-147d6f6 .elementor-heading-title {
	font-size: 44px;
	line-height: 1.15;
}

/* post-672/473 set this with `body:not(.rtl) .elementor-NNN .elementor-element
   .elementor-element-ID`, which ties with the usual `body .elementor ...`
   prefix used elsewhere in this file — and they load later, so they would win
   the tie. The leading `html` adds the element that settles it. */
@media (max-width: 1365px) {
	html body:not(.rtl) .elementor .elementor-element.elementor-element-989bf48,
	html body:not(.rtl) .elementor .elementor-element.elementor-element-2142e8f {
		right: 0;
	}
}

@media (max-width: 1024px) {
	body .elementor .elementor-element.elementor-element-04864fa .elementor-heading-title,
	body .elementor .elementor-element.elementor-element-147d6f6 .elementor-heading-title {
		font-size: 38px;
	}
}

@media (max-width: 767px) {
	body .elementor .elementor-element.elementor-element-04864fa .elementor-heading-title,
	body .elementor .elementor-element.elementor-element-147d6f6 .elementor-heading-title {
		font-size: 30px;
	}
}


/* 13. Olive card contrast --------------------------------------------------
   The "Focused on Musculoskeletal Care" card (home 093e749, Services its
   twin) sets its description and tick list to #FFFFFF80 on #6B8E23 — about
   1.9:1, which is unreadable. Raised to 92% white, roughly 4.3:1 at the
   15-16px these run at. The headline above them is already solid white.    */
body .elementor .elementor-element.elementor-element-c7a011c .elementor-heading-title,
body .elementor .elementor-element.elementor-element-82bcff8 .elementor-heading-title,
body .elementor .elementor-element.elementor-element-56a7736 .elementor-icon-list-text,
body .elementor .elementor-element.elementor-element-ff0032d .elementor-icon-list-text {
	color: rgba(255, 255, 255, 0.92);
}

/* The 100px band heading on Conditions We Care For ("Assessment First,
   Always") and FAQ ("Patient-Centred Care") is set in #DEEED9 on white —
   about 1.25:1, so it reads as an empty gap rather than a heading. It is the
   only content in its container, so it is a real heading, not decoration.
   #7A9C55 is 3.1:1, which clears AA for large text while staying softer than
   the solid olive used elsewhere. */
body .elementor .elementor-element.elementor-element-2aaa783 .elementor-heading-title {
	color: #7A9C55;
}


/* 14. Founder section + team portraits ------------------------------------
   clientimage.webp is a full-length outdoor photograph in portrait format,
   not a studio headshot, so both places it appears crop it rather than
   letterboxing it:

   a) The team grid on About Us and Our Team shows every member in a round
      376x376 frame. nouser.jpg already draws its own grey circle, so the
      real photograph needs the frame applying in CSS to sit alongside them.
      The transform zooms past what object-fit alone can reach on a 3:4
      source, and the origin keeps the crop on the head and upper body.
   b) The founder block below gives the same photograph a taller portrait
      frame, where far less cropping is needed.

   These rules key off classes added in the markup, so they apply on both
   AboutUs.cshtml and Team.cshtml without naming Elementor element ids.     */
.vd-portrait-frame {
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
}

/* frontend.min.css carries `.elementor img{border-radius:0;max-width:100%;
   height:auto}` at (0,1,1), so every rule below needs at least two classes
   plus the element to take effect. */
.elementor .vd-portrait-frame img.vd-portrait {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transform: scale(1.5);
	transform-origin: 50% 22%;
}

/* ---- founder block ---- */
.elementor .elementor-element.elementor-element-abfnd01 {
	--display: flex;
	--flex-direction: row;
	--justify-content: center;
	--align-items: center;
	--flex-wrap: wrap;
	--gap: 48px 56px;
	--padding-top: 5em;
	--padding-bottom: 1em;
}

.elementor .elementor-element.elementor-element-abfndpic {
	--display: flex;
	--width: 34%;
	--justify-content: center;
}

.elementor .elementor-element.elementor-element-abfndcol {
	--display: flex;
	--width: 56%;
	--justify-content: center;
	--gap: 14px 14px;
}

.elementor img.vd-founder-photo {
	width: 100%;
	max-width: 360px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 18%;
/*	border-radius: 180px 180px 24px 24px;*/
	display: block;
	box-shadow: 0 18px 40px rgba(31, 31, 31, 0.14);
}

/* Our Physician reuses the therapy-page template, whose lead image slot is
   built for a 1280x854 landscape photograph. The same portrait source fills
   that slot at roughly 785x1045, which dwarfs the column, so it gets the same
   arched frame as the founder block at a size suited to a content column. */
/* post-999.css styles this slot with
   `.elementor-999 .elementor-element.elementor-element-sdcont0
    .elementor-widget-image img` at (0,4,1), so four classes plus two
   elements are needed to override its border-radius and width. */
body .elementor .elementor-element .elementor-widget-image img.vd-doctor-photo {
	width: 100%;
	max-width: 420px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 18%;
/*	border-radius: 210px 210px 24px 24px;*/
	display: block;
	margin-inline: auto;
	box-shadow: 0 18px 40px rgba(31, 31, 31, 0.14);
}

@media (max-width: 767px) {
	body .elementor .elementor-element .elementor-widget-image img.vd-doctor-photo {
		max-width: 260px;
	}
}

.elementor .elementor-element.elementor-element-abfndeye .elementor-heading-title {
	font-family: var( --e-global-typography-b2ce6af-font-family ), Sans-serif;
	font-size: var( --e-global-typography-b2ce6af-font-size );
	font-style: var( --e-global-typography-b2ce6af-font-style );
	font-weight: var( --e-global-typography-b2ce6af-font-weight );
	text-transform: var( --e-global-typography-b2ce6af-text-transform );
	color: var( --e-global-color-ec3c7a7 );
}

.elementor .elementor-element.elementor-element-abfndh2 .elementor-heading-title {
	font-family: var( --e-global-typography-5d167aa-font-family ), Sans-serif;
	font-size: var( --e-global-typography-5d167aa-font-size );
	font-weight: var( --e-global-typography-5d167aa-font-weight );
	line-height: var( --e-global-typography-5d167aa-line-height );
	color: var( --e-global-color-secondary );
}

.elementor .elementor-element.elementor-element-abfndrol .elementor-heading-title {
	font-family: var( --e-global-typography-520c191-font-family ), Sans-serif;
	font-size: var( --e-global-typography-520c191-font-size );
	color: var( --e-global-color-primary );
}

.elementor .elementor-element.elementor-element-abfnddiv {
	--divider-color: var( --e-global-color-4d462f5 );
	--divider-border-style: solid;
	--divider-border-width: 1px;
	max-width: 160px;
}

.elementor .elementor-element.elementor-element-abfndtxt {
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	font-size: var( --e-global-typography-text-font-size );
	line-height: var( --e-global-typography-text-line-height );
	color: var( --e-global-color-primary );
}

.elementor .elementor-element.elementor-element-abfndlst .elementor-icon-list-icon i {
	color: var( --e-global-color-ec3c7a7 );
}

.elementor .elementor-element.elementor-element-abfndlst {
	--e-icon-list-icon-size: 14px;
}

.elementor .elementor-element.elementor-element-abfndlst .elementor-icon-list-item {
	margin-block-end: 8px;
}

.elementor .elementor-element.elementor-element-abfndlst .elementor-icon-list-text {
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	font-size: var( --e-global-typography-84ca66e-font-size );
	color: var( --e-global-color-primary );
}

.elementor .elementor-element.elementor-element-abfndbtn {
	--display: flex;
	--flex-direction: row;
	--justify-content: flex-start;
	--align-items: center;
	--flex-wrap: wrap;
	--gap: 12px 14px;
	--margin-top: 10px;
}

/* second button reads as the quieter of the pair */
.vd-btn-ghost.elementor-button {
	background-color: transparent;
	color: var( --e-global-color-638d055 );
	border: 1px solid var( --e-global-color-ec3c7a7 );
}

.vd-btn-ghost.elementor-button:hover,
.vd-btn-ghost.elementor-button:focus {
	background-color: var( --e-global-color-ec3c7a7 );
	color: #fff;
}

@media (max-width: 1024px) {
	.elementor .elementor-element.elementor-element-abfnd01 {
		--padding-top: 3.5em;
		--gap: 32px 32px;
	}

	.elementor .elementor-element.elementor-element-abfndpic {
		--width: 38%;
	}

	.elementor .elementor-element.elementor-element-abfndcol {
		--width: 54%;
	}
}

@media (max-width: 767px) {
	.elementor .elementor-element.elementor-element-abfnd01 {
		--flex-direction: column;
		--padding-top: 2.5em;
		--padding-bottom: 0.5em;
		--gap: 24px 24px;
	}

	.elementor .elementor-element.elementor-element-abfndpic,
	.elementor .elementor-element.elementor-element-abfndcol {
		--width: 100%;
	}

	.elementor img.vd-founder-photo {
		max-width: 260px;
		margin-inline: auto;
	}

	.elementor .elementor-element.elementor-element-abfndbtn {
		--justify-content: center;
	}

	.elementor .elementor-element.elementor-element-abfndeye,
	.elementor .elementor-element.elementor-element-abfndh2,
	.elementor .elementor-element.elementor-element-abfndrol {
		text-align: center;
	}

	.elementor .elementor-element.elementor-element-abfnddiv {
		margin-inline: auto;
	}
}


/* 15. Services mega-dropdown ----------------------------------------------
   The Services submenu lists all twelve therapies plus the Panchakarma
   overview and the conditions page — fourteen items, laid out three to a row.

   Three things had to give:

   a) widget-nav-menu.min.css sets a fixed
      `.elementor-nav-menu--main .elementor-nav-menu ul{width:12em}` (about
      156px at the 13px dropdown size), far too narrow for these labels.

   b) SmartMenus ALSO writes an inline width onto the submenu when it opens
      it, and an inline style beats any selector — so the width here needs
      !important. (A plain rule looks correct in a static mock where
      SmartMenus never ran, and then collapses in the real browser.)
      !important on width is safe: SmartMenus measures the element to
      position it, and keepInViewport still shifts the panel left if it
      would run off screen. It is NOT safe on display — SmartMenus opens and
      closes the panel with inline display:block/display:none, so forcing
      that would leave the menu permanently open. That is why the three
      across come from inline-block list items rather than grid or flex.

   c) The items inherit white-space:nowrap and generous side padding from the
      horizontal menu. Both are reset so a long label wraps inside its cell
      instead of spilling out of the panel.

   Scoped to the main nav above 1024px. Below that the burger menu takes
   over and the same <ul> becomes a vertical accordion that SmartMenus
   animates by height, so it must stay a single column.                     */
@media (min-width: 1025px) {
	.elementor-nav-menu--main .elementor-nav-menu ul.vd-menu-services {
		width: 700px !important;
		/* SmartMenus writes BOTH width and max-width inline (20em each). The
		   max-width has to be overridden too, or it clamps the panel back to
		   260px no matter what width says. */
		max-width: calc(100vw - 32px) !important;
		padding: 8px 0;
		/* the newlines between the <li> tags are rendered whitespace between
		   inline-blocks; at any inherited size three 33.333% cells plus two
		   gaps exceed 100% and the third wraps. The links set their own
		   font-size, so zeroing it here only collapses the gaps. */
		font-size: 0;
	}

	.elementor-nav-menu--main ul.vd-menu-services > li {
		display: inline-block;
		width: 33.333%;
		vertical-align: top;
	}

	.elementor-nav-menu--main ul.vd-menu-services .elementor-sub-item {
		white-space: normal;
		line-height: 1.3;
		padding: 11px 14px;
		border-inline-start: 0;
	}

	/* the per-corner radii assume a single stack; with three across the
	   first and last items are no longer the visual corners */
	.elementor-40 .elementor-element.elementor-element-ec7e89a
	.elementor-nav-menu--dropdown ul.vd-menu-services li:first-child a,
	.elementor-40 .elementor-element.elementor-element-ec7e89a
	.elementor-nav-menu--dropdown ul.vd-menu-services li:last-child a {
		border-radius: 0;
	}
}

/* Between the burger breakpoint and ~1280 the nav sits closer to the right
   edge, and SmartMenus' keepInViewport cannot help: it positions the panel
   from the 20em width it set itself, so it has no idea the panel is wider.
   Narrowing it here keeps three across without letting the right-hand
   column run off screen. */
@media (min-width: 1025px) and (max-width: 1199px) {
	.elementor-nav-menu--main .elementor-nav-menu ul.vd-menu-services {
		width: 540px !important;
	}
}


/* 16. Our Physician: portrait + degree certificate ------------------------
   clientimage.webp is 1200x1600 — a full-length outdoor snapshot, not a
   studio headshot. Dropped into the therapy-page lead image slot it filled
   most of the column with sky and hillside while Dr. Kamboj himself was a
   small figure in the middle, which is what made the page look wrong.

   object-fit alone cannot crop in far enough: the source is 3:4 and the
   frame is 4:5, so `cover` only shaves a few percent off the height. The
   zoom therefore comes from a transform inside a clipping frame.

   Working from the source: his head runs from about 24% to 33% of the image
   height and his waist is near 57%. scale(2) with the origin at 50% 30%
   leaves the frame showing roughly 17%–64% of the height, i.e. a little
   headroom, his head, and his upper body — and at 2x of a 1200px-wide
   source the crop is still being downsampled, so it stays sharp.          */
.vd-doctor-frame {
	width: 100%;
	max-width: 380px;
	aspect-ratio: 4 / 5;
	overflow: hidden;
/*	border-radius: 190px 190px 20px 20px;*/
	margin-inline: auto;
	box-shadow: 0 18px 40px rgba(31, 31, 31, 0.16);
}

/* post-999.css styles this slot with
   `.elementor-999 .elementor-element.elementor-element-sdcont0
    .elementor-widget-image img` at (0,4,1), so four classes plus two
   elements are needed to take the width and radius back. */
body .elementor .elementor-element .vd-doctor-frame img.vd-doctor-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	border-radius: 0;
	transform: scale(2);
	transform-origin: 50% 30%;
	display: block;
}

/* post-999.css styles the section sub-headings by element id (sdsubt1), so
   the new "Degree & Qualification" heading has to be given the same rule or
   it falls back to the browser's h3 and towers over "Credentials &
   Experience" right above it. */
.elementor .elementor-element.elementor-element-sddegt1 .elementor-heading-title {
	font-family: var( --e-global-typography-secondary-font-family ), Sans-serif;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.3em;
	color: var( --e-global-color-secondary );
	margin-top: 8px;
}

/* ---- degree certificate card ---- */
.vd-credential {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 28px;
	margin: 0;
	padding: 24px;
	background-color: var( --e-global-color-7fbea4f );
	border: 1px solid var( --e-global-color-332724a );
	border-radius: 20px;
}

.vd-credential__frame {
	flex: 0 0 auto;
	width: 210px;
	display: block;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var( --e-global-color-332724a );
	box-shadow: 0 8px 20px rgba(31, 31, 31, 0.10);
	transition: transform .25s ease, box-shadow .25s ease;
}

.vd-credential__frame:hover,
.vd-credential__frame:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(31, 31, 31, 0.16);
}

body .elementor .elementor-element .vd-credential__frame img.vd-credential__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

/* the card body is a <figcaption>, and the theme styles those as italic
   image captions (`figcaption{font-style:italic}`); only the eyebrow wants
   that, so the rest is set back to normal */
.vd-credential__body {
	flex: 1 1 260px;
	min-width: 0;
	font-style: normal;
	color: var( --e-global-color-primary );
}

.vd-credential__eyebrow {
	display: block;
	font-family: var( --e-global-typography-b2ce6af-font-family ), Sans-serif;
	font-size: var( --e-global-typography-b2ce6af-font-size );
	font-style: var( --e-global-typography-b2ce6af-font-style );
	text-transform: var( --e-global-typography-b2ce6af-text-transform );
	color: var( --e-global-color-ec3c7a7 );
	margin-bottom: 4px;
}

.vd-credential__title {
	display: block;
	font-family: var( --e-global-typography-7044a64-font-family ), Sans-serif;
	font-size: var( --e-global-typography-7044a64-font-size );
	line-height: 1.35;
	color: var( --e-global-color-secondary );
	margin-bottom: 14px;
}

.vd-credential__facts {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}

.vd-credential__facts li {
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	font-size: var( --e-global-typography-84ca66e-font-size );
	line-height: 1.5;
	color: var( --e-global-color-primary );
	padding: 7px 0;
	border-bottom: 1px solid var( --e-global-color-332724a );
}

.vd-credential__facts li:last-child {
	border-bottom: 0;
}

.vd-credential__facts li span {
	display: block;
	font-size: 0.82em;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var( --e-global-color-638d055 );
}

.vd-credential__link {
	display: inline-block;
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	font-size: var( --e-global-typography-84ca66e-font-size );
	color: var( --e-global-color-638d055 );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vd-credential__link:hover,
.vd-credential__link:focus-visible {
	color: var( --e-global-color-ec3c7a7 );
}

@media (max-width: 767px) {
	.vd-doctor-frame {
		max-width: 260px;
		border-radius: 130px 130px 16px 16px;
	}

	.vd-credential {
		gap: 20px;
		padding: 18px;
	}

	.vd-credential__frame {
		width: 150px;
		margin-inline: auto;
	}
}