/**
 * EPIC Elements — styles
 *
 * Matched to the KeyDesign Addon output on epichospital.com so that
 * deactivating that plugin produces no visual change.
 *
 * All values sit in custom properties below — adjust once, applies everywhere.
 */

:root {
	--epic-teal:        #3c93a2;
	--epic-teal-dark:   #2f7480;
	--epic-text:        #1c2833;
	--epic-muted:       #5d6d7e;
	--epic-radius:      6px;
	--epic-shadow:      0 4px 18px rgba(0, 0, 0, .07);
	--epic-shadow-hover:0 10px 28px rgba(0, 0, 0, .12);
	--epic-anim-dur:    .7s;
}

/* ══════════════════════════════════════════════════════════════════════
   ICON BOX  — replaces tek_iconbox
   ══════════════════════════════════════════════════════════════════════ */

.epic-iconbox {
	position: relative;
	display: flex;
	gap: 16px;
	border-radius: var(--epic-radius);
	background-clip: padding-box;
	box-sizing: border-box;
}

.epic-iconbox--icon-left  { flex-direction: row;    align-items: flex-start; }
.epic-iconbox--icon-top   { flex-direction: column; }

.epic-iconbox--center {
	text-align: center;
	align-items: center;
	justify-content: center;
}

.epic-iconbox--center.epic-iconbox--icon-top {
	align-items: center;
}

.epic-iconbox--shadow {
	box-shadow: var(--epic-shadow, 0 6px 22px rgba(20, 60, 70, .08));
}

/*
 * When an icon box carries a custom background it's meant to read as a card.
 * The live pages stored zero padding (KeyDesign added the card padding/border
 * itself), so supply a sensible default here: comfortable padding, a subtle
 * border and rounded corners. Explicit per-box padding still overrides this.
 */
.epic-iconbox--has-bg {
	padding: 26px 24px;
	border: 1px solid rgba(20, 60, 70, .12);
	border-radius: 10px;
}

.epic-iconbox--hover {
	transition: transform .3s ease, box-shadow .3s ease;
}

.epic-iconbox--hover:hover {
	transform: translateY(-4px);
	box-shadow: var(--epic-shadow-hover, 0 14px 30px rgba(20, 60, 70, .14));
}

/* Icon */
.epic-iconbox__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.epic-iconbox--icon-bg .epic-iconbox__icon {
	border-radius: 50%;
}

.epic-iconbox__icon {
	overflow: visible;
}

/**
 * Matched to the live theme, read from its own CSS in DevTools:
 *
 *   .tt-iconbox-customimg img { max-width: fit-content; }
 *
 * i.e. the original lets a custom image icon render at its NATURAL size
 * (these specialty icons are 100px files) and simply ignores the 70px
 * wrapper. Forcing the image to fill the wrapper made it 70px — smaller
 * than live. So: natural size, wrapper as spacing only.
 */
.epic-iconbox__icon .epic-el-icon-img {
	width: auto !important;
	height: auto !important;
	max-width: none !important;
	display: block;
}

.epic-iconbox__icon .epic-el-icon {
	display: inline-block;
	line-height: 1;
}

/* Built-in SVG icon inside an icon box: match the original's dark, ~44px icon. */
.epic-iconbox__icon .epic-svg-icon {
	width: 44px;
	height: 44px;
	color: #1a2b3c;
}

/* Content */
.epic-iconbox__content {
	flex: 1 1 auto;
	min-width: 0;
}

.epic-iconbox__title {
	margin: 0 0 8px;
	line-height: 1.35;
	font-weight: 600;
}

.epic-iconbox__text {
	line-height: 1.55;
	color: inherit;
}

.epic-iconbox__text > *:last-child { margin-bottom: 0; }
.epic-iconbox__text > *:first-child { margin-top: 0; }

.epic-iconbox__link {
	display: inline-block;
	margin-top: 12px;
	font-weight: 600;
	text-decoration: none;
	color: var(--epic-teal);
}

.epic-iconbox__link:hover { text-decoration: underline; }

/* Badge */
.epic-iconbox__badge {
	position: absolute;
	top: 12px;
	right: 12px;
	background: var(--epic-teal);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .4px;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 100px;
	line-height: 1.4;
}

/* Whole-box link */
a.epic-iconbox__boxlink {
	display: block !important;
	width: 100%;
	text-decoration: none;
	color: inherit;
	height: 100%;
}

/* ══════════════════════════════════════════════════════════════════════
   FEATURE BOX  — replaces tek_contentbox
   ══════════════════════════════════════════════════════════════════════ */

/**
 * Feature box — the "Why Choose EPIC" cards on specialty and treatment
 * pages. Matched to the live design: white card, soft shadow, rounded
 * corners, and a teal bar that appears along the bottom on hover.
 */
.epic-featurebox {
	position: relative;
	display: block;
	width: 100%;
	padding: 34px 26px;
	border-radius: 8px;
	height: 100%;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #e6ebed;
	box-shadow: 0 6px 18px rgba(20, 60, 70, .06);
	transition: box-shadow .3s ease, transform .3s ease;
	overflow: hidden;
	margin-bottom: 24px;
}

/* Inner layout: stack icon, title, text, link — centred or left. */
.epic-featurebox__content { display: block; }
.epic-featurebox--center { text-align: center; }
.epic-featurebox--left   { text-align: left; }

/* The gap between stacked cards in the same column; the last needs none. */
.epic-featurebox:last-child { margin-bottom: 0; }


.epic-featurebox:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(20, 60, 70, .12);
}

.epic-featurebox::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	background: var(--epic-teal, #3c93a2);
	transform: scaleX(0);
	transition: transform .3s ease;
}

.epic-featurebox:hover::after {
	transform: scaleX(1);
}

.epic-featurebox--center { text-align: center; }
.epic-featurebox--left   { text-align: left; }

/* Vertical rhythm between the stacked parts (replaces the old flex gap). */
.epic-featurebox__icon    { margin-bottom: 14px; }
.epic-featurebox__title   { margin-bottom: 8px; }
.epic-featurebox__text    { margin-bottom: 10px; }
.epic-featurebox__subtitle{ margin-bottom: 8px; }

.epic-featurebox--shadow {
	box-shadow: var(--epic-shadow);
	background: #fff;
}

.epic-featurebox--linked {
	transition: transform .3s ease, box-shadow .3s ease;
}

.epic-featurebox--linked:hover {
	transform: translateY(-4px);
	box-shadow: var(--epic-shadow-hover);
}

.epic-featurebox__icon {
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.epic-featurebox__icon .epic-el-icon-img {
	max-width: 62px;
	height: auto;
	display: block;
}

.epic-featurebox__icon .epic-el-icon {
	font-size: 40px;
	color: var(--epic-teal);
}

.epic-featurebox__title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--epic-teal);
}

.epic-featurebox__subtitle {
	font-size: 14px;
	color: var(--epic-muted);
	line-height: 1.5;
}

.epic-featurebox__text {
	font-size: 15px;
	line-height: 1.55;
	color: var(--epic-teal);
}

.epic-featurebox__text > *:last-child  { margin-bottom: 0; }
.epic-featurebox__text > *:first-child { margin-top: 0; }
.epic-featurebox__text i { font-style: italic; }

.epic-featurebox__linktext {
	display: inline-block;
	font-weight: 600;
	font-size: 14px;
	color: var(--epic-teal);
}

a.epic-featurebox__boxlink {
	display: block !important;
	width: 100%;
	text-decoration: none;
	color: inherit;
	height: 100%;
}

/* ══════════════════════════════════════════════════════════════════════
   HEADING  — replaces tek_sectiontitle
   ══════════════════════════════════════════════════════════════════════ */

.epic-heading            { margin: 0 0 6px; }
.epic-heading--left      { text-align: left; }
.epic-heading--center    { text-align: center; }
.epic-heading--right     { text-align: right; }
.epic-heading--narrow    { max-width: 780px; margin-left: auto; margin-right: auto; }

.epic-heading__title {
	margin: 0 0 5px;
	line-height: 1.25;
	color: var(--epic-teal);
}

.epic-heading__subtitle {
	margin: 0;
	line-height: 1.5;
	color: var(--epic-muted);
}

.epic-heading__separator {
	display: block;
	width: 60px;
	height: 3px;
	margin-top: 14px;
	background: var(--epic-teal);
	border-radius: 3px;
}

.epic-heading--center .epic-heading__separator { margin-left: auto; margin-right: auto; }
.epic-heading--right  .epic-heading__separator { margin-left: auto; }

/* ══════════════════════════════════════════════════════════════════════
   BUTTON  — replaces tek_button
   ══════════════════════════════════════════════════════════════════════ */

.epic-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 26px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: #fff;
	background: var(--epic-teal);
	border: 1px solid var(--epic-teal);
	border-radius: var(--epic-radius);
	text-decoration: none;
	transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
	cursor: pointer;
}

/*
 * Site-wide hover. The old rule shifted teal to a slightly darker teal, which
 * was too subtle to read as interactive. This inverts the fill to the accent,
 * lifts the button 2px and adds a soft shadow — a clear, consistent hover on
 * every button without per-button settings. Buttons that set their own hover
 * colours (the Hover fields) still win, because those are inline styles.
 */
.epic-button:hover,
.epic-button:focus {
	background: var(--epic-accent, #dd3333);
	border-color: var(--epic-accent, #dd3333);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
}

.epic-button:active {
	transform: translateY(0);
	box-shadow: 0 3px 8px rgba(0, 0, 0, .14);
}

.epic-button--outline {
	background: transparent;
	color: var(--epic-teal);
}

.epic-button--outline:hover {
	background: var(--epic-accent, #dd3333);
	border-color: var(--epic-accent, #dd3333);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
}

.epic-button--small  { padding: 8px 18px;  font-size: 13px; }
.epic-button--large  { padding: 15px 34px; font-size: 17px; }

.epic-button__icon { font-size: .9em; }

.epic-button-wrap--center { text-align: center; }
.epic-button-wrap--right  { text-align: right; }
.epic-button-wrap--left   { text-align: left; }

/* ══════════════════════════════════════════════════════════════════════
   BREADCRUMBS  — replaces tek_breadcrumbs
   ══════════════════════════════════════════════════════════════════════ */

/**
 * BAND GEOMETRY
 *
 * The band is built in page content as: row (black background, padding-top
 * 5px, no bottom padding) > column > spacer, breadcrumb, spacer. The spacer
 * heights are inline styles on a wrapper with an inner span, so hiding them
 * from CSS proved unreliable, and the row's own asymmetric padding pushed the
 * trail below centre no matter what the spacers did.
 *
 * The spacers are now removed in PHP before WPBakery ever renders them, and
 * the row is tagged .epic-bcn-row server-side. Everything vertical is zeroed
 * here, so the band's height IS the nav's height and the trail is centred by
 * construction rather than by arithmetic.
 *
 * One number controls the band: --epic-bcn-height.
 */
:root {
	--epic-bcn-height: 60px;
}

.epic-breadcrumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	min-height: var(--epic-bcn-height);
	margin: 0;
	padding: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
}

.epic-bcn-row,
.vc_row:has(.epic-breadcrumbs) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.epic-bcn-row .vc_column-inner,
.epic-bcn-row .wpb_column,
.vc_row:has(.epic-breadcrumbs) .vc_column-inner,
.vc_row:has(.epic-breadcrumbs) .wpb_column {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.epic-bcn-row .wpb_wrapper > *,
.vc_row:has(.epic-breadcrumbs) .wpb_wrapper > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Belt and braces — if a spacer ever survives the PHP filter. */
.epic-bcn-row .vc_empty_space,
.vc_row:has(.epic-breadcrumbs) .vc_empty_space,
.epic-breadcrumbs + .vc_empty_space {
	display: none !important;
}

/**
 * The previous theme's "centre" option centred the container, not the text —
 * every breadcrumb bar on the live site reads from the left edge of the
 * content column. Matched here so bcn-center behaves the same way.
 */
.epic-breadcrumbs--left   { justify-content: flex-start; text-align: left; }
.epic-breadcrumbs--center { justify-content: flex-start; text-align: left; }
.epic-breadcrumbs--right  { justify-content: flex-end;   text-align: right; }

.epic-breadcrumbs a {
	color: inherit;
	text-decoration: none;
	opacity: .92;
}

.epic-breadcrumbs a:hover { opacity: 1; text-decoration: underline; }

/* Our own separator, plus the ones Rank Math and NavXT emit — they ship with
   no horizontal spacing, which is why the trail reads as "home>Doctors". */
.epic-breadcrumbs__sep,
.epic-breadcrumbs .separator,
.epic-breadcrumbs .rank-math-breadcrumb .separator {
	display: inline-block;
	padding: 0 8px;
	font-weight: 400;
	opacity: .7;
}

/* Home icon in place of the site name as the first crumb. */
.epic-breadcrumbs__home {
	display: inline-flex;
	align-items: center;
	vertical-align: -2px;
}

.epic-breadcrumbs__home svg { width: 20px; height: 20px; }

@media (max-width: 767px) {
	:root { --epic-bcn-height: 48px; }
	.epic-breadcrumbs { font-size: 15px; }
	.epic-breadcrumbs__sep,
	.epic-breadcrumbs .separator { padding: 0 6px; }
}

/* ══════════════════════════════════════════════════════════════════════
   ANIMATIONS — replaces KeyDesign's kd-animated classes

   Entrance animations are cosmetic, and any failure mode leaves content
   stuck at opacity 0 — invisible boxes, which is exactly what happened on
   the specialty pages. So the rules are written so the WORST case is
   "content simply appears":

   - elements are visible by default; nothing starts hidden
   - the fade runs only as a one-shot enhancement on load
   - fill-mode is none, so the element's natural (visible) style is the
     resting state before and after, whatever happens to the animation
   ══════════════════════════════════════════════════════════════════════ */

.epic-anim {
	opacity: 1;
	animation-duration: var(--epic-anim-dur, .7s);
	animation-fill-mode: none;
	animation-timing-function: ease-out;
}

.epic-anim--fadeIn      { animation-name: epicFadeIn; }
.epic-anim--fadeInUp    { animation-name: epicFadeInUp; }
.epic-anim--fadeInDown  { animation-name: epicFadeInDown; }
.epic-anim--fadeInLeft  { animation-name: epicFadeInLeft; }
.epic-anim--fadeInRight { animation-name: epicFadeInRight; }
.epic-anim--zoomIn      { animation-name: epicZoomIn; }
.epic-anim--slideInUp   { animation-name: epicFadeInUp; }
.epic-anim--slideInDown { animation-name: epicFadeInDown; }
.epic-anim--bounceIn    { animation-name: epicZoomIn; }

@keyframes epicFadeIn      { from { opacity: 0; } to { opacity: 1; } }
@keyframes epicFadeInUp    { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes epicFadeInDown  { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: none; } }
@keyframes epicFadeInLeft  { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes epicFadeInRight { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes epicZoomIn      { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.epic-anim {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.epic-iconbox--hover,
	.epic-featurebox--linked,
	.epic-button {
		transition: none;
	}
	.epic-iconbox--hover:hover,
	.epic-featurebox--linked:hover {
		transform: none;
	}
}

.epic-button:focus-visible,
.epic-iconbox__link:focus-visible,
.epic-breadcrumbs a:focus-visible,
a.epic-iconbox__boxlink:focus-visible,
a.epic-featurebox__boxlink:focus-visible {
	outline: 2px solid var(--epic-teal);
	outline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════════════════
   VIDEO  — replaces tek_video
   ══════════════════════════════════════════════════════════════════════ */

.epic-video { position: relative; line-height: 0; }

.epic-video__trigger {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	overflow: hidden;
	border-radius: var(--epic-radius);
}

.epic-video__poster {
	width: 100%;
	height: auto;
	display: block;
	transition: transform .4s ease, filter .3s ease;
}

.epic-video__trigger:hover .epic-video__poster {
	transform: scale(1.03);
	filter: brightness(.9);
}

.epic-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	padding-left: 4px;
	border-radius: 50%;
	background: var(--epic-teal);
	color: #fff;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
	transition: transform .25s ease, background .25s ease;
}

.epic-video__trigger:hover .epic-video__play {
	transform: translate(-50%, -50%) scale(1.08);
	background: var(--epic-teal-dark);
}

.epic-video--small-video-btn  .epic-video__play { width: 52px; height: 52px; }
.epic-video--medium-video-btn .epic-video__play { width: 68px; height: 68px; }
.epic-video--large-video-btn  .epic-video__play { width: 84px; height: 84px; }

.epic-video--play-button-left  .epic-video__play { left: 34px; transform: translateY(-50%); }
.epic-video--play-button-right .epic-video__play { left: auto; right: 34px; transform: translateY(-50%); }

.epic-video--shadow .epic-video__trigger { box-shadow: var(--epic-shadow); }

/* Lightbox */
.epic-video-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(0, 0, 0, .88);
	opacity: 0;
	transition: opacity .25s ease;
}

.epic-video-modal.is-open { opacity: 1; }

.epic-video-modal__frame {
	position: relative;
	width: 100%;
	max-width: 960px;
	aspect-ratio: 16 / 9;
}

.epic-video-modal__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 4px;
}

.epic-video-modal__close {
	position: absolute;
	top: 18px;
	right: 22px;
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	color: #fff;
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
	opacity: .8;
}

.epic-video-modal__close:hover { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════
   COUNTER  — replaces tek_counter
   ══════════════════════════════════════════════════════════════════════ */

.epic-counter {
	display: flex;
	align-items: center;
	gap: 14px;
}

.epic-counter--center { flex-direction: column; text-align: center; gap: 8px; }
.epic-counter--right  { justify-content: flex-end; text-align: right; }
.epic-counter--icon-top { flex-direction: column; align-items: center; text-align: center; }

.epic-counter__icon { flex: 0 0 auto; line-height: 1; }
.epic-counter__icon i { font-size: 38px; color: var(--epic-teal); }

.epic-counter__body { min-width: 0; }

.epic-counter__number {
	font-size: 42px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--epic-text);
	display: flex;
	align-items: baseline;
	gap: 1px;
}

/*
 * The suffix (e.g. "+") sits in its own span. Force it to inherit the
 * number's size, weight and colour and stay inline — some resets shrink
 * or hide bare spans, which is why the "+" could vanish on the front end.
 */
.epic-counter__units {
	display: inline;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	line-height: inherit;
	margin-left: 2px;
}

.epic-counter--center .epic-counter__number,
.epic-counter--icon-top .epic-counter__number { justify-content: center; }

.epic-counter--center .epic-counter__label { text-align: center; }
.epic-counter--right  .epic-counter__label { text-align: right; }

.epic-counter--right .epic-counter__number { justify-content: flex-end; }

.epic-counter__label {
	margin-top: 6px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--epic-muted);
}

.epic-counter--big-counter .epic-counter__number { font-size: 56px; }
.epic-counter--small-counter .epic-counter__number { font-size: 32px; }

/* ══════════════════════════════════════════════════════════════════════
   TEXT ROTATOR  — replaces tek_textrotator
   ══════════════════════════════════════════════════════════════════════ */

.epic-textrotator { margin: 0 0 .5em; }

.epic-textrotator--left   { text-align: left; }
.epic-textrotator--center { text-align: center; }
.epic-textrotator--right  { text-align: right; }

.epic-textrotator__rotate {
	position: relative;
	display: inline-block;
	vertical-align: bottom;
	min-height: 1.2em;
}

.epic-textrotator__item {
	position: absolute;
	left: 0;
	top: 0;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .4s ease, transform .4s ease;
	pointer-events: none;
}

.epic-textrotator__item.is-active {
	position: relative;
	opacity: 1;
	transform: none;
}

/* ══════════════════════════════════════════════════════════════════════
   SCROLL DOWN  — replaces tek_scrolldown
   ══════════════════════════════════════════════════════════════════════ */

.epic-scrolldown--left   { text-align: left; }
.epic-scrolldown--center { text-align: center; }
.epic-scrolldown--right  { text-align: right; }

.epic-scrolldown__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	color: inherit;
	animation: epicBounce 2s infinite;
}

@keyframes epicBounce {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(-9px); }
	60% { transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
	.epic-scrolldown__link { animation: none; }
	.epic-video__poster,
	.epic-video__play { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   DOCTOR ARTICLES  — "Articles authored by Dr X"
   Replaces the WPBakery grid on doctor pages. Matches the blog card look.
   ══════════════════════════════════════════════════════════════════════ */

.epic-doctor-articles {
	display: grid;
	gap: 26px;
	margin: 8px 0 20px;
}

.epic-doctor-articles--cols-1 { grid-template-columns: minmax(0, 340px); }
.epic-doctor-articles--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.epic-doctor-articles--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.epic-doctor-articles--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 767px) {
	.epic-doctor-articles { grid-template-columns: 1fr !important; }
}

.epic-doc-article {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid #e6ecee;
	border-radius: 8px;
	overflow: hidden;
	transition: box-shadow .25s ease, transform .25s ease;
}

.epic-doc-article:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(20, 60, 70, .12);
}

.epic-doc-article__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #eef2f3;
}

.epic-doc-article__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.epic-doc-article__thumb-empty { display: block; width: 100%; height: 100%; }

.epic-doc-article__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 22px 24px 26px;
}

.epic-doc-article__cat {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 14px;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 600;
	color: #2b7f8c;
	background: #e8f4f6;
	border-radius: 999px;
	text-decoration: none;
}

.epic-doc-article__cat::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.epic-doc-article__title {
	margin: 0 0 20px;
	font-size: 17px;
	line-height: 1.55;
	font-weight: 500;
}

.epic-doc-article__title a {
	color: #22323a;
	text-decoration: none;
}

.epic-doc-article__title a:hover { color: #2b7f8c; }

.epic-doc-article__more {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 26px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: #3f97a4;
	border-radius: 999px;
	text-decoration: none;
	transition: background .2s ease;
}

.epic-doc-article__more:hover { background: #2b7f8c; }

/* ==========================================================================
   NATIVE WPBAKERY BUTTONS  (.vc_btn3)
   --------------------------------------------------------------------------
   The site mixes two button families: legacy tek_button (rendered by this
   plugin as .epic-button) and WPBakery's own vc_btn3 — e.g. the "Virtual
   Tour" hero button. This gives vc_btn3 the same tactile hover as
   .epic-button: a 2px lift with a soft shadow and a clearly darker fill.

   Each button KEEPS its own colour (juicy-pink stays pink); the darkening
   comes from a brightness filter, so one rule covers every vc_btn3 colour
   preset without listing them.
   ========================================================================== */

.vc_btn3.vc_general {
	transition: filter .25s ease, transform .25s ease, box-shadow .25s ease !important;
}

.vc_btn3.vc_general:hover,
.vc_btn3.vc_general:focus {
	filter: brightness(.85) saturate(1.15);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

.vc_btn3.vc_general:active {
	transform: translateY(0);
	box-shadow: 0 3px 8px rgba(0, 0, 0, .15);
	filter: brightness(.8);
}

@media (prefers-reduced-motion: reduce) {
	.vc_btn3.vc_general,
	.vc_btn3.vc_general:hover { transition: none; transform: none; }
}

/* ==========================================================================
   SHAPE  (.epic-shape)  —  decorative dots pattern
   --------------------------------------------------------------------------
   Positioned absolutely inside its column, exactly as KeyDesign did. The
   column itself must anchor it; :has() marks any WPBakery column that
   contains a shape as position:relative without touching the rest.
   Decorative only: no pointer events, sits behind the content, hidden on
   phones where the offsets would push it into text.
   ========================================================================== */

.wpb_column:has(> .wpb_wrapper > .epic-shape),
.vc_column-inner:has(> .wpb_wrapper > .epic-shape) {
	position: relative;
}

.epic-shape {
	position: absolute;
	display: block;
	pointer-events: none;
	z-index: 0;
	line-height: 0;
	will-change: transform;
}

.epic-shape svg { display: block; }

@media (max-width: 767px) {
	.epic-shape { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.epic-shape { transform: none !important; }
}

/* ==========================================================================
   BUTTON STYLE + SHAPE VARIANTS
   --------------------------------------------------------------------------
   The base .epic-button is the "Modern" solid style. These add Flat, Outline,
   Gradient and 3D, plus three shapes. Per-button colours set in the editor
   (inline styles) still win over all of these.
   ========================================================================== */

/* ── Shapes ── */
.epic-button--shape-rounded { border-radius: 6px; }
.epic-button--shape-square  { border-radius: 0; }
.epic-button--shape-round   { border-radius: 999px; }

/* ── Flat ── solid, no rounding shift, no lift/shadow on hover ── */
.epic-button--flat {
	box-shadow: none;
}
.epic-button--flat:hover,
.epic-button--flat:focus {
	transform: none;
	box-shadow: none;
	background: var(--epic-accent, #dd3333);
	border-color: var(--epic-accent, #dd3333);
}

/* ── Outline ── transparent until hover ── */
.epic-button--outline {
	background: transparent;
	color: var(--epic-teal);
	border-color: var(--epic-teal);
}
.epic-button--outline:hover,
.epic-button--outline:focus {
	background: var(--epic-teal);
	border-color: var(--epic-teal);
	color: #fff;
}

/* ── Gradient ── teal→accent sweep, brightens on hover ── */
.epic-button--gradient {
	background: linear-gradient(135deg, var(--epic-teal) 0%, var(--epic-accent, #dd3333) 100%);
	border-color: transparent;
	background-size: 140% 140%;
	background-position: 0% 50%;
}
.epic-button--gradient:hover,
.epic-button--gradient:focus {
	background: linear-gradient(135deg, var(--epic-teal) 0%, var(--epic-accent, #dd3333) 100%);
	border-color: transparent;
	background-position: 100% 50%;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

/* ── 3D ── solid with a hard bottom edge that presses in on click ── */
.epic-button--3d {
	box-shadow: 0 4px 0 rgba(0, 0, 0, .22);
	transform: translateY(0);
}
.epic-button--3d:hover,
.epic-button--3d:focus {
	transform: translateY(-1px);
	box-shadow: 0 5px 0 rgba(0, 0, 0, .22);
	background: var(--epic-accent, #dd3333);
	border-color: var(--epic-accent, #dd3333);
}
.epic-button--3d:active {
	transform: translateY(3px);
	box-shadow: 0 1px 0 rgba(0, 0, 0, .22);
}

/* ==========================================================================
   PRICING  (.epic-pricing)  —  replaces tek_pricing, DetailedStyle
   --------------------------------------------------------------------------
   A titled card (dark navy by default, per the stored box colour) with a
   checked list of included items and an optional button. Colours come inline
   from the shortcode so each plan can differ.
   ========================================================================== */

.epic-pricing {
	border-radius: 12px;
	padding: 0;
	background: #262b4c;
	color: #fff;
	height: auto;
	box-sizing: border-box;
	display: block;
	overflow: hidden;
	margin-bottom: 24px;
}

/* Green header band across the top, like KeyDesign's DetailedStyle. */
.epic-pricing__title {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: .3px;
	text-align: center;
	line-height: 1.3;
	padding: 18px 22px;
	margin: 0;
	background: var(--epic-pricing-head, #1ec773);
	color: #fff;
}

/* Everything below the header gets the card padding. */
.epic-pricing__price,
.epic-pricing__list,
.epic-pricing__subtitle {
	margin-left: 26px;
	margin-right: 26px;
}
.epic-pricing__list { margin-top: 22px; }
.epic-pricing__list:last-child { margin-bottom: 26px; }

.epic-pricing__price {
	text-align: center;
	margin-top: 22px;
	margin-bottom: 18px;
}
.epic-pricing__amount { font-size: 34px; font-weight: 800; }
.epic-pricing__period { font-size: 14px; opacity: .8; margin-left: 4px; }

.epic-pricing__list {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
}

.epic-pricing__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0 10px 6px;
	font-size: 15px;
	line-height: 1.35;
	border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.epic-pricing__row:last-child { border-bottom: 0; }

.epic-pricing__ico {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--epic-teal, #3c93a2);
}
.epic-pricing--highlight .epic-pricing__ico,
.epic-pricing__row .epic-pricing__ico { color: #4fd1a5; }

.epic-pricing__row--off { opacity: .55; }
.epic-pricing__row--off .epic-pricing__ico { color: #ff8080; }

.epic-pricing__btn {
	display: inline-block;
	margin: 22px 26px 26px;
	padding: 12px 26px;
	border-radius: 8px;
	background: var(--epic-teal, #3c93a2);
	color: #fff;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background .2s ease, transform .2s ease;
}
.epic-pricing__btn:hover {
	background: var(--epic-accent, #dd3333);
	transform: translateY(-2px);
	color: #fff;
}

.epic-pricing--highlight {
	box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
	transform: translateY(-6px);
}

@media (max-width: 767px) {
	.epic-pricing--highlight { transform: none; }
}

/* ==========================================================================
   SVG ICON  (.epic-svg-icon)  —  built-in line icons, colour via currentColor
   ========================================================================== */
.epic-svg-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	line-height: 0;
	color: var(--epic-teal, #3c93a2);
}
.epic-svg-icon svg { display: block; width: 100%; height: 100%; }

/* Feature-box icon block centred at top, matching the original cards */
.epic-featurebox__icon {
	display: flex;
	justify-content: center;
	margin-bottom: 4px;
}
.epic-featurebox--left .epic-featurebox__icon { justify-content: flex-start; }

/* ==========================================================================
   TIMELINE  (.epic-timeline)  —  replaces tek_timeline (Our Journey)
   Vertical centre line with star nodes; cards alternate left/right (zigzag).
   Card colours come inline per item (teal / red on the live page).
   ========================================================================== */

.epic-timeline {
	position: relative;
	padding: 10px 0;
}

/* Centre vertical line */
.epic-timeline__line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	transform: translateX(-50%);
	background: #cfe0e4;
}

.epic-timeline__item {
	position: relative;
	width: 50%;
	box-sizing: border-box;
	padding: 0 44px 40px;
}
.epic-timeline__item--left  { left: 0; text-align: left; }
.epic-timeline__item--right { left: 50%; text-align: left; }

/* Star node on the centre line */
.epic-timeline__node {
	position: absolute;
	top: 6px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	box-shadow: 0 0 0 5px #fff, 0 4px 12px rgba(0,0,0,.15);
	font-size: 30px;
	font-weight: 900;
	line-height: 1;
}
.epic-timeline__node svg { width: 24px; height: 24px; }
.epic-timeline__item--left  .epic-timeline__node { right: -26px; }
.epic-timeline__item--right .epic-timeline__node { left: -26px; }

/* Small arrow connector from node toward the card */
.epic-timeline__item--left  .epic-timeline__node::after,
.epic-timeline__item--right .epic-timeline__node::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	border: 8px solid transparent;
	transform: translateY(-50%);
}
.epic-timeline__item--left .epic-timeline__node::after {
	left: -14px;
	border-right-color: var(--epic-node-bg, #3c93a2);
}
.epic-timeline__item--right .epic-timeline__node::after {
	right: -14px;
	border-left-color: var(--epic-node-bg, #3c93a2);
}

/* Card */
.epic-timeline__card {
	border-radius: 14px;
	padding: 20px 22px 22px;
	color: #fff;
	display: block;
}
/* Year is a white rounded pill inset inside the card — the card colour shows
   above, left and right of it, so it reads as "inside the box". */
.epic-timeline__year-badge {
	display: block;
	background: #fff;
	border-radius: 10px;
	padding: 12px 20px;
	margin: 0 0 16px;
}
.epic-timeline__year {
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
	margin: 0;
}
.epic-timeline__body {
	padding: 0;
}
/* Plain round bullets, identical in every card colour. No checkmarks. */
.epic-timeline__body ul {
	margin: 0;
	padding-left: 20px;
	list-style: disc;
}
.epic-timeline__body ul li::before { content: none !important; }
.epic-timeline__body li {
	margin-bottom: 10px;
	line-height: 1.5;
	font-size: 15px;
	list-style: disc;
	padding-left: 0;
}
.epic-timeline__body ul ul { margin-top: 8px; list-style: circle; }
.epic-timeline__body strong { font-weight: 700; }

@media (max-width: 767px) {
	.epic-timeline__line { left: 21px; }
	.epic-timeline__item,
	.epic-timeline__item--left,
	.epic-timeline__item--right {
		width: 100%;
		left: 0;
		padding: 0 0 34px 54px;
	}
	.epic-timeline__item--left  .epic-timeline__node,
	.epic-timeline__item--right .epic-timeline__node { left: 0; right: auto; }
}