/* Sathya Talent Centre - site-specific overrides on top of theme/assets/css/style.css */

/* Consistent corner radius across every section card (About Vision/Mission,
   Training Programs, Program Highlights, Our Process) - the theme styled
   these inconsistently (15px / 20px / 0px), so pin them all to one value
   here. "Who Can Join" cards (.who-course-card) use their own 16px radius
   to match the newer course-card design. */
.value-box,
.single_course,
.single_tp,
.cat_list_two {
	border-radius: 20px;
}

/* Icon accent badges (Vision/Mission, Who Can Join, Program Highlights, Our
   Process): replace the theme's old 4-color rainbow (.sc_one - .sc_four,
   defined twice in style.css) with one blue/navy family matching the site's
   rebrand and gradient palette. */
.sc_one   { color: #007bff; background: #E6F2FF; }
.sc_two   { color: #16a34a; background: #E6F7EC; }
.sc_three { color: #0056b3; background: #E3F0FF; }
.sc_four  { color: #0056b3; background: #E3F0FF; }

/* Site logo: icon mark + real HTML text wordmark, replacing the theme's
   red/orange logo.png image (which clashed with the blue rebrand). Using
   real text avoids relying on an AI-generated image to render crisp text. */
.site-logo-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.site-logo-mark {
	height: 40px;
	width: auto;
}
.single_footer .site-logo-mark {
	margin-bottom: 0;
}
/* Footer: dark navy theme, matching the site's other dark sections
   (.hero-section-dark, .bg-dark-gradient-navy) so the page ends on the same
   accent instead of switching back to white right after the CTA section.
   Overrides the theme's dark-on-light defaults for .single_footer/.sf_contact
   (style.css:2352-2390). */
.footer { background: #0b104a; }
.footer p { color: rgba(255, 255, 255, 0.7); }
.single_footer h4 { color: #fff; }
.single_footer ul li a { color: rgba(255, 255, 255, 0.7); }
.single_footer ul li a:hover { color: #FFC857; }
.sf_contact span { color: #FFC857; }
.sf_contact p a { color: rgba(255, 255, 255, 0.85); }
.sf_contact p a:hover { color: #FFC857; }
.foot_copy { background: #0b104a; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.foot_copy p { color: rgba(255, 255, 255, 0.6); }

/* Social icons in the footer: the theme defaults these to black icons
   (style.css .social_profile ul li a), which clashes with the blue icon
   language used everywhere else on the site. Facebook/Instagram/LinkedIn
   already have hover colors defined in style.css; YouTube and Telegram
   are new. */
.social_profile ul li a {
	color: #007bff;
}
.f_youtube:hover { background: #FF0000; }
.f_telegram:hover { background: #229ED9; }

/* Hero banner: the theme's fixed 850px height + padding-top-based vertical
   centering was designed around a full-bleed photo column we don't have (no
   stock people-photos are used on this site). We use a normal two-column
   layout with flex centering instead. */
.hero-section {
	position: relative;
	height: auto;
	min-height: 620px;
	display: flex;
	align-items: center;
	padding: 60px 0 80px;
}
@media only screen and (max-width: 768px) {
	.hero-section { padding: 120px 0 60px; }
}

.section-eyebrow {
	display: inline-block;
	background: #ECEDFF;
	color: #007bff;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding: 6px 18px;
	border-radius: 30px;
	margin-bottom: 18px;
}

/* Founding-batch urgency pill (Hero, Closing CTA): reuses the gold accent
   already used for the hero H1 highlight and dark-section hover states, so
   both dark backgrounds it sits on stay within the existing palette. */
.founding-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 200, 87, 0.15);
	color: #FFC857;
	border: 1px solid rgba(255, 200, 87, 0.4);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.3px;
	padding: 6px 16px;
	border-radius: 30px;
	margin-bottom: 14px;
}

/* Hero banner: inky-blue 2D vector illustration background, with matching
   light text colors, scoped so it doesn't affect other sections.
   background-size: contain (not cover) so the full illustration is always
   visible instead of being cropped when the section's height (driven by
   text content + min-height, not the image) doesn't match the image's own
   aspect ratio - which happens constantly across screen sizes and browser
   zoom levels. background-color matches the image's own blue backdrop so
   any letterboxed space it leaves blends in seamlessly. */
.hero-section-dark {
	background-image: url('/images/hero-bg.png');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #062ebd;
}
.hero-section-dark .section-eyebrow {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}
.hero-section-dark .hero-text h1 {
	color: #fff;
}
.hero-section-dark .hero-text h1 span {
	color: #FFC857;
}
.hero-section-dark .hero-lead {
	color: #fff;
}
.hero-section-dark .hero-desc {
	color: rgba(255, 255, 255, 0.8);
}
.hero-section-dark .btn_outline {
	border-color: #fff;
	color: #fff;
}
.hero-section-dark .btn_outline:hover {
	background: #fff;
	color: #0056b3;
}

/* Career-journey labels (Learn/Practice/Get Certified/Interview/Get Hired):
   a compact timeline read as its own element near the background
   illustration's icon path, not pinned to each icon's exact pixel - a CSS
   background-image with background-size:contain can't report where it
   actually renders, so exact per-icon alignment isn't reliable across
   screen widths/zoom. lg+ only; the stacked mobile layout has no room for it. */
.hero-journey {
	position: absolute;
	right: 4%;
	top: 12%;
	bottom: 10%;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	z-index: 2;
	pointer-events: none;
}
.hero-journey-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.95);
	color: #0b104a;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.2px;
	padding: 7px 16px 7px 8px;
	border-radius: 30px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
	white-space: nowrap;
}
.hero-journey-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #0056b3;
	color: #fff;
	font-size: 11px;
	flex-shrink: 0;
}

/* Shared dark gradient background for content sections (Why Choose STC,
   Program Highlights) that previously used stock background photos. Cards
   inside (.cat_list li, .single_tp) stay white so they read as tiles on
   top of the gradient; only the section title text needs a light override. */
.bg-dark-gradient {
	background: linear-gradient(135deg, #0056b3 0%, #007bff 100%);
}
/* Closing CTA ("Ready to Transform Your Career?") stands out more as a bold
   dark navy block than as the same blue used for buttons/links everywhere
   else, so it keeps the old navy gradient while Program Highlights stays on
   the plain blue one above. */
.bg-dark-gradient.bg-dark-gradient-navy {
	background: linear-gradient(135deg, #0b104a 0%, #1a1f6e 100%);
}
/* Why Choose STC: tech-themed banner image (glowing center-bottom spotlight,
   circuit lines/arrows/hexagons pushed to the edges) replaces the old
   CSS-drawn radial glow + light-ray beams - the image already bakes in that
   same "spotlight fading to deep navy" look plus richer decoration, so the
   old .light-ray beams are switched off below to avoid doubling up.
   position/overflow here contain the image; .container gets a z-index bump
   below so the section title/list render above it instead of being lost
   behind the glow. */
.bg-dark-gradient.bg-dark-gradient-rich {
	position: relative;
	overflow: hidden;
	background-image: url('/images/why-choose-bg.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #00134d;
}
.bg-dark-gradient-rich > .container {
	position: relative;
	z-index: 1;
}
.bg-dark-gradient-rich .light-ray {
	display: none;
}
.bg-dark-gradient-rich .r1 { width: 50px; transform: translateX(-50%) rotate(-55deg); }
.bg-dark-gradient-rich .r2 { width: 40px; transform: translateX(-50%) rotate(-35deg); }
.bg-dark-gradient-rich .r3 { width: 60px; transform: translateX(-50%) rotate(-15deg); }
.bg-dark-gradient-rich .r4 { width: 70px; transform: translateX(-50%) rotate(0deg); }
.bg-dark-gradient-rich .r5 { width: 60px; transform: translateX(-50%) rotate(15deg); }
.bg-dark-gradient-rich .r6 { width: 40px; transform: translateX(-50%) rotate(35deg); }
.bg-dark-gradient-rich .r7 { width: 50px; transform: translateX(-50%) rotate(55deg); }
.bg-dark-gradient .section-title h2,
.bg-dark-gradient .section-title p {
	color: #fff;
}
.bg-dark-gradient .section-title p {
	color: rgba(255, 255, 255, 0.8);
}
.bg-dark-gradient .btn_outline {
	border-color: #fff;
	color: #fff;
}
.bg-dark-gradient .btn_outline:hover {
	background: #fff;
	color: #0056b3;
}
.bg-dark-gradient .sf_contact span {
	color: #fff;
}
.bg-dark-gradient .sf_contact p,
.bg-dark-gradient .sf_contact p a {
	color: #fff;
}
.bg-dark-gradient .sf_contact p a:hover {
	color: #FFC857;
}

/* The theme's own fixed-breakpoint font-size rules for .hero-text h1 don't
   reliably shrink it on narrow phones (same overflow reproduces on the
   stock theme demo, e.g. Theme/eduleb/index.html, at widths under ~480px).
   A fluid clamp is more robust than chasing more breakpoints. */
.hero-text h1 {
	font-size: clamp(28px, 5.2vw, 64px);
	padding-top: 0;
	white-space: normal;
	overflow-wrap: break-word;
}

/* Hero-lead used to be a single bullet-separated line ("Practical Training
   • Expert Mentorship • ..."); it's now the same four phrases as individual
   pill chips, a more typical premium-SaaS hero pattern - wording is
   unchanged, only the wrapper markup/styling differs (see Index.cshtml). */
.hero-lead {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
	margin-bottom: 22px;
	justify-content: center;
}
@media (min-width: 992px) {
	.hero-lead { justify-content: flex-start; }
}
.hero-lead-chip {
	display: inline-flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.2px;
	padding: 8px 16px;
	border-radius: 30px;
	backdrop-filter: blur(6px);
}

.hero-desc {
	font-size: 16px;
	color: #4a5355;
	margin: 0 auto 34px;
	max-width: 520px;
}

.hero-cta {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 520px;
	margin: 0 auto;
}

/* Primary button on dark sections (hero, Closing CTA): white button reads
   better against the dark hero-bg.png / bg-dark-gradient than the theme's
   default blue, which blends into both. Scoped to .hero-cta/.bg-dark-gradient
   so the header's "Apply Now" (.btn_one) on the light navbar is unaffected. */
.hero-cta .btn_one,
.bg-dark-gradient .btn_one {
	background: #fff;
	border-color: #fff;
	color: #0056b3;
}
.hero-cta .btn_one:hover,
.bg-dark-gradient .btn_one:hover {
	background: #0056b3;
	border-color: #0056b3;
	color: #fff;
}
/* Hero-only premium pill treatment for both CTAs - scoped to .hero-cta so
   the header nav button and Closing CTA (.bg-dark-gradient) keep the
   theme's sharper default corners rather than changing site-wide. */
.hero-cta .btn_one,
.hero-cta .btn_outline {
	border-radius: 50px;
	padding: 16px 34px;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.3s, color 0.3s, border-color 0.3s;
}
.hero-cta .btn_one {
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}
.hero-cta .btn_one:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
}
.hero-cta .btn_outline {
	border-color: rgba(255, 255, 255, 0.5);
}
.hero-cta .btn_outline:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
}

/* Hero visual: illustration shown at lg+ alongside the hero text; stacks
   below the text/CTA on narrower screens. hero-illustration.png has a
   transparent background matching the site's blue illustration style, so
   it sits directly on the hero's blue backdrop - no framing panel needed.
   (An earlier version, hero-banner.png, had a baked-in black background and
   needed a dark glass frame to avoid showing a visible black box; that
   workaround is gone now that the image itself is on-brand and transparent.)
   A soft gold/blue glow sits behind it for depth, and the image gets a slow
   continuous float, matching the floating language used on Who Can Join's
   badges. */
.hero-visual {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.hero-visual-glow {
	position: absolute;
	width: 340px;
	height: 340px;
	max-width: 80%;
	background: radial-gradient(circle, rgba(255, 200, 87, 0.25) 0%, rgba(59, 130, 246, 0.18) 55%, transparent 75%);
	filter: blur(30px);
	z-index: 0;
}
.hero-visual-img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	max-width: 380px;
	height: auto;
	animation: hero-visual-float 6s ease-in-out infinite;
}
@keyframes hero-visual-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
	.hero-visual-img { animation: none; }
}
@media (max-width: 991px) {
	.hero-visual-img { max-width: 300px; margin-top: 30px; }
}

/* At lg+ the hero text column switches to text-lg-start; left-align the
   description box and button row to match instead of staying centered. */
@media (min-width: 992px) {
	.hero-desc, .hero-cta {
		margin-left: 0;
		margin-right: 0;
		justify-content: flex-start;
	}
}

.btn_outline {
	display: inline-block;
	background: transparent;
	border: 1px solid #007bff;
	color: #007bff;
	padding: 15px 30px;
	border-radius: 2px;
	font-weight: 600;
	transition: 0.3s;
}
.btn_outline i { margin-right: 5px; }
.btn_outline:hover {
	background: #007bff;
	color: #fff;
}

/* Icon badge used inside the repurposed .cat_list chips (Why Choose STC) */
.cat_list .icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #ECEDFF;
	color: #007bff;
	margin-right: 10px;
	font-size: 16px;
}

/* About Us section: hosts the same blurred-blob decoration (.who-shape,
   defined with Who Can Join below) for a consistent premium background
   treatment between the two sections without duplicating the CSS. */
.ab_area {
	position: relative;
	overflow: hidden;
}
.ab_area > .container {
	position: relative;
	z-index: 1;
}

/* About Us intro paragraph reads better constrained than stretched full-width */
.ab_content > p {
	max-width: 620px;
	margin: 0 auto;
}
@media (min-width: 992px) {
	.ab_content > p { margin-left: 0; }
}

/* Vision/Mission moved from a separate full-width row into a compact,
   side-by-side pair directly under the intro paragraph - a tighter, more
   typical "text + quick facts" SaaS about-section layout instead of three
   stacked rows. */
.ab-value-list {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 30px;
	justify-content: center;
}
@media (min-width: 992px) {
	.ab-value-list { justify-content: flex-start; }
}

/* Vision / Mission cards in About Us. Hover lift + shadow match the same
   hover language used on every other card family on the page (single-counter,
   process-step, program-highlight) - this one previously only got a border
   color change, which read as inert next to the others. */
.value-box {
	height: 100%;
	text-align: center;
	background: #fff;
	border: 2px solid #eee;
	padding: 35px 30px;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.3s;
}
.value-box:hover {
	border-color: #007bff;
	transform: translateY(-6px);
	box-shadow: 10px 20px 40px rgba(23, 23, 36, 0.1);
}
/* Tint each card with its own icon's accent-color background (sc_three/
   sc_two, defined above) instead of plain white, so Vision/Mission read as
   distinct rather than identical white boxes. */
.value-box-vision { background: #E3F0FF; }
.value-box-mission { background: #E6F7EC; }
.value-box-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	font-size: 26px;
	margin-bottom: 18px;
}
.value-box h4 {
	color: #0b104a;
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 10px;
}
.value-box p { color: #4a5355; }
/* Compact sizing for the side-by-side .ab-value-list placement - same card,
   trimmed padding/icon/type so two fit comfortably next to each other. */
.ab-value-list .value-box {
	flex: 1 1 230px;
	text-align: left;
	padding: 26px 24px;
	border-width: 1px;
}
.ab-value-list .value-box-icon {
	width: 50px;
	height: 50px;
	font-size: 19px;
	margin-bottom: 14px;
}
.ab-value-list .value-box h4 { font-size: 17px; margin-bottom: 6px; }
.ab-value-list .value-box p { font-size: 14px; }

/* About Us illustration, right column: framed in a soft glass panel with a
   blurred color glow behind it, echoing the hero visual's treatment so the
   two sections read as one consistent premium design language. Unlike the
   hero panel this stays light, since about-illustration.png already sits on
   a white background. */
.ab-visual {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 30px;
}
@media (min-width: 992px) {
	.ab-visual { margin-top: 0; }
}
.ab-visual-glow {
	position: absolute;
	width: 320px;
	height: 320px;
	max-width: 80%;
	background: radial-gradient(circle, rgba(59, 130, 246, 0.16) 0%, rgba(147, 51, 234, 0.12) 55%, transparent 75%);
	filter: blur(30px);
	z-index: 0;
}
.ab-visual-panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 420px;
	background: linear-gradient(135deg, #F4F8FF 0%, #ffffff 100%);
	border: 1px solid rgba(11, 16, 74, 0.06);
	border-radius: 28px;
	padding: 22px;
	box-shadow: 0 24px 50px rgba(23, 23, 36, 0.08);
}
.about-illustration-img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	border-radius: 16px;
}

/* Training program card cover image: clip to the card's existing border-radius
   since the theme's ".single_c_img img" has no radius of its own */
.single_course {
	overflow: hidden;
}

/* Topic tag pills on each training program card */
.tag-chip-list {
	list-style: none;
	padding: 0 20px 25px;
	margin: 20px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}
.tag-chip {
	display: inline-block;
	padding: 4px 14px;
	border-radius: 30px;
	background: #ECEDFF;
	color: #007bff;
	font-size: 13px;
	font-weight: 600;
}

/* Closing CTA buttons */
.cta-buttons {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 25px;
}

/* Closing CTA contact row */
.cta-contact {
	display: flex;
	justify-content: center;
	gap: 50px;
	flex-wrap: wrap;
	margin-top: 10px;
}
.cta-contact .sf_contact { margin-bottom: 0; text-align: left; }

/* "Who Can Join?" section background: a premium light gradient (was flat
   #F9F9F9) plus a few oversized blurred blobs (.who-shape) anchored to the
   section corners for an abstract, ed-tech-SaaS feel. overflow:hidden keeps
   the blobs from creating horizontal scroll; .container gets a z-index bump
   in the rule below so content stays above them. */
.bg-light-alt {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #F4F8FF 0%, #FDFEFF 45%, #F6F0FF 100%);
}
.bg-light-alt > .container {
	position: relative;
	z-index: 1;
}
.who-shape {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	pointer-events: none;
	z-index: 0;
}
.who-shape.ws-1 { top: -120px; left: -80px; width: 320px; height: 320px; background: rgba(59, 130, 246, 0.16); }
.who-shape.ws-2 { top: 40%; right: -140px; width: 380px; height: 380px; background: rgba(147, 51, 234, 0.12); }
.who-shape.ws-3 { bottom: -140px; left: 30%; width: 300px; height: 300px; background: rgba(13, 148, 136, 0.14); }

/* Training Programs' bottom padding (80px) + this section's own top padding
   (80px) stacked into a 160px gap that read as an empty block between the
   program cards and "Who Can Join?" - tighten just this section's top. */
.section-padding-tight-top { padding-top: 30px; }

/* "Who Can Join?" cards: modern course-card layout matching the Edulab
   training-program cards (.single_course) - full-width 16:9 cover image with
   a rotated vertical category badge (same technique as that theme's
   .single_c_img span: absolute + translate(-50%,-50%) to center the badge on
   an anchor point, then rotate(-90deg) around that already-centered point,
   so it stays vertically centered over the image at any card width without
   per-breakpoint tuning), title, description and an optional icon row
   pinned to the bottom via margin-top:auto so every card lines up evenly
   regardless of description length. Cards sit 5-across at lg+ via bare
   .col-lg (equal-width flex columns), 2-per-row at sm, stacked below that. */
.who-course-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(23, 23, 36, 0.08);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.who-course-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 45px rgba(79, 70, 229, 0.22);
}
.who-course-img {
	position: relative;
	/*aspect-ratio: 16 / 9;*/
	overflow: hidden;
	background: #E6F2FF;
}
.who-course-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.who-course-card:hover .who-course-img img {
	transform: scale(1.08);
}
.who-course-badge {
	position: absolute;
	top: 50%;
	left: 20px;
	transform: translate(-50%, -50%) rotate(-90deg);
	white-space: nowrap;
	background: #4f46e5;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	padding: 5px 14px;
	border-radius: 5px;
	box-shadow: 0 6px 14px rgba(79, 70, 229, 0.35);
	transition: background 0.3s ease;
}
.who-course-card:hover .who-course-badge {
	background: #372fc9;
}
.who-course-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 24px 20px 20px;
	text-align: center;
}
.who-course-body h4 {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.2px;
	margin-bottom: 8px;
}
.who-course-body p {
	color: #6d7193;
	font-size: 14.5px;
	line-height: 1.5;
	margin-bottom: 0;
}
.who-course-icons {
	list-style: none;
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid #eef0fa;
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: left;
}
.who-course-icons li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #3a3d5c;
}
.who-course-icons i {
	color: #4f46e5;
	width: 16px;
	text-align: center;
}
@media (max-width: 575.98px) {
	.who-course-body { padding: 20px 18px 18px; }
}

/* Our Process: a full-width section (between Why Choose STC and Our
   Training Programs) with the heading/intro pinned in a narrower left
   column and the vertical timeline docked in a wider right column. A
   single gradient line runs behind the icon column, threading through
   every step's icon center; each step is an icon-left / card-right row
   stacked with a fixed gap. */
.category_two_area {
	background: linear-gradient(180deg, #F4F8FF 0%, #FFFFFF 65%);
}
.process-section-title {
	margin-bottom: 0;
}
.process-section-title p {
	width: auto;
	margin: 12px 0 0;
}
.process-section-desc {
	color: #4a5355;
}
.process-section-image {
	width: 100%;
	max-width: 340px;
	margin-top: 28px;
}
@media (min-width: 992px) {
	.process-section-title { position: sticky; top: 100px; }
	.process-section-image { max-height: calc(100vh - 160px); object-fit: contain; }
}
@media (max-width: 991px) {
	.process-section-title p { margin: 12px auto 0; }
	.process-section-image { margin: 28px auto 0; }
}
.process-steps-vertical {
	position: relative;
}
.process-steps-vertical::before {
	content: '';
	position: absolute;
	left: 35px;
	top: 36px;
	bottom: 36px;
	width: 2px;
	background: linear-gradient(180deg, #7cc0ff, #0b104a);
}
.process-step-row {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 26px;
}
.process-step-row:not(:last-child) {
	margin-bottom: 32px;
}
.process-step-row-body {
	flex: 1;
	background: #fff;
	border-radius: 16px;
	padding: 18px 24px;
	box-shadow: 0 10px 30px rgba(23, 23, 36, 0.06);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.process-step-row:hover .process-step-row-body {
	transform: translateY(-4px);
	box-shadow: 10px 20px 40px rgba(23, 23, 36, 0.1);
}
.process-step-row-body h4 {
	margin-bottom: 6px;
}
.process-step-row-body p {
	margin-bottom: 0;
	color: #6d7193;
}
.process-step-icon {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	color: #fff;
	font-size: 26px;
	box-shadow: 0 10px 20px rgba(0, 86, 179, 0.25);
}
.process-step-icon-1 { background: linear-gradient(135deg, #7cc0ff, #3b82f6); }
.process-step-icon-2 { background: linear-gradient(135deg, #4fa9ff, #0ea5e9); }
.process-step-icon-3 { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.process-step-icon-4 { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.process-step-icon-5 { background: linear-gradient(135deg, #1d4ed8, #0b104a); }
.process-step-number {
	position: absolute;
	bottom: -4px;
	right: -4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	color: #0056b3;
	font-size: 12px;
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(23, 23, 36, 0.25);
}

/* Program Highlights cards: icon-on-top centered tile with title and a
   one-line description, equal card height plus a hover lift, since these
   sit on the dark gradient section background as white tiles. */
.program-highlight {
	height: 100%;
	margin-bottom: 0;
	padding: 35px 30px;
	text-align: center;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.program-highlight:hover {
	transform: translateY(-6px);
	box-shadow: 10px 20px 40px rgba(23, 23, 36, 0.12);
}
/* This also matches the theme's ".single_tp span" rule (float:left, fixed
   60px box, line-height:60px, margin-right:15px) which is more specific
   than a bare class selector and was winning, floating the icon and
   causing the title/description to overlap it. Scoping under .program-highlight
   raises specificity enough to fully override the theme's float layout. */
.program-highlight .program-highlight-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	float: none;
	width: 76px;
	height: 76px;
	line-height: normal;
	margin-right: 0;
	border-radius: 18px;
	background: #E6F2FF;
	overflow: hidden;
	font-size: 22px;
	margin-bottom: 18px;
}
.program-highlight-icon img {
	width: 62%;
	height: 62%;
	object-fit: contain;
}
.program-highlight h3 {
	font-size: 18px;
}
.program-highlight p {
	color: #6d7193;
	font-size: 14px;
	margin-top: 10px;
}

/* Program Highlights: 6 items in a 3-per-row x 2-row grid, icon-on-top
   centered cards (no numbered "Highlight 0X" label - the icon + title
   already communicate each item, and a raw index added no information). */

/* Minimal spacing for out-of-scope scaffold pages (Privacy/Error) rendered under the theme layout */
.page-basic {
	padding: 120px 20px 80px;
	max-width: 800px;
	margin: 0 auto;
}