/* 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, Who Can Join) - the
   theme styled these inconsistently (15px / 20px / 0px), so pin them all to
   one value here. */
.value-box,
.single_course,
.single_tp,
.cat_list_two,
.who-course-card {
	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: mark image with a "Talent Centre" wordmark stacked underneath,
   since logo.png only bakes in "SATHYA" - the HTML text completes the full
   "Sathya Talent Centre" name without relying on an image for crisp text. */
.site-logo-link {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}
.site-logo .site-logo-link {
	align-items: center;
}
.site-logo-mark {
	height: 60px;
	width: auto;
}
.single_footer .site-logo-mark {
	margin-bottom: 0;
}
.site-logo-text {
	font-size: 14px;
	font-weight: 600;
	/* margin-top: -17px; */
	/* letter-spacing: 1.2px; */
	text-transform: uppercase;
	 /*color: #fff;*/ 
	white-space: nowrap;
}
/*.single_footer .site-logo-text {
	color: #FFC857;
}
*//* 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: #1a2d62;
}
.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('/assets/images/stc/hero-bg.png');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #062ebd;
}
.hero-section-dark .section-eyebrow {
	background: rgba(255, 200, 87, 0.15);
	color: #FFC857;
	border: 1px solid rgba(255, 200, 87, 0.4);
}
.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: #fff;
}
/* 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('/assets/images/stc/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;
}

/* Closing CTA runs on white now (was the navy gradient), so the
   .bg-dark-gradient dark-section text/button colors above need resetting
   back to values readable on a light background. Placed after the
   .bg-dark-gradient rules so it wins the tie in specificity via source order. */
.bg-dark-gradient-navy .section-title h2 {
	color: #16193f;
}
.bg-dark-gradient-navy .section-title p {
	color: #555;
}
.cta-highlight {
	color: #007bff;
}
.cta-tagline {
	color: #007bff;
	font-weight: 600;
}
.bg-dark-gradient-navy .btn_one {
	background: #007bff;
	border-color: #007bff;
	color: #fff;
}
.bg-dark-gradient-navy .btn_one:hover {
	background: #f26b65;
	border-color: #f26b65;
	color: #fff;
}
.bg-dark-gradient-navy .btn_outline {
	border-color: #007bff;
	color: #007bff;
}
.bg-dark-gradient-navy .btn_outline:hover {
	background: #007bff;
	color: #fff;
}
.bg-dark-gradient-navy .sf_contact p,
.bg-dark-gradient-navy .sf_contact p a {
	color: #16193f;
}
.bg-dark-gradient-navy .sf_contact p a:hover {
	color: #007bff;
}
/* founding-badge's default gold-on-transparent styling (built for the dark
   hero/gradient sections) loses contrast on the CTA's white background, so
   it gets its own light-surface variant here, same amber accent. */
.bg-dark-gradient-navy .founding-badge {
	background: #FFF6E5;
	color: #B8790A;
	border-color: rgba(184, 121, 10, 0.3);
}

/* 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;
}

/* 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. Each card gets its own soft gradient
   wash, a colored top accent bar, and a glowing gradient icon badge so the
   two read as distinct, premium "value cards" rather than plain white boxes
   with a border. Hover lift + shadow match the hover language used on every
   other card family on the page (single-counter, process-step,
   program-highlight). */
.value-box {
	position: relative;
	overflow: hidden;
	height: 100%;
	text-align: center;
	background: #fff;
	border: none;
	padding: 35px 30px;
	box-shadow: 0 6px 20px rgba(11, 16, 74, 0.06);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.value-box::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
}
.value-box:hover {
	transform: translateY(-8px);
	box-shadow: 0 22px 45px rgba(11, 16, 74, 0.14);
}
/* Tint each card with a soft gradient wash in its own accent color, and top
   it with a matching gradient accent bar, so Vision/Mission read as
   distinct rather than identical white boxes. */
.value-box-vision {
	background: linear-gradient(155deg, #EAF3FF 0%, #FBFDFF 65%);
}
.value-box-vision::before { background: linear-gradient(90deg, #0056b3, #4da3ff); }
.value-box-mission {
	background: linear-gradient(155deg, #E9FBF1 0%, #FBFEFC 65%);
}
.value-box-mission::before { background: linear-gradient(90deg, #16a34a, #5eead4); }
.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;
	color: #fff !important;
	box-shadow: 0 10px 22px rgba(11, 16, 74, 0.16);
	transition: transform 0.3s ease;
}
.value-box:hover .value-box-icon { transform: scale(1.08) rotate(-4deg); }
.value-box-vision .value-box-icon { background: linear-gradient(135deg, #0056b3, #4da3ff) !important; }
.value-box-mission .value-box-icon { background: linear-gradient(135deg, #16a34a, #5eead4) !important; }
.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: 30px 24px 26px;
}
.ab-value-list .value-box-icon {
	width: 52px;
	height: 52px;
	font-size: 20px;
	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. Card is
   also a height:100% flex column (same technique as .who-course-card) so
   all 3 cards in a row match height, with the description growing via
   flex:1 to push each card's tag row down to the same bottom line instead
   of trailing at different heights depending on description length. */
.single_course {
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.single_course > p {
	flex: 1 0 auto;
}

/* Cover image: fixed, taller height with object-fit so every card shows a
   consistent, larger image regardless of the source file's own aspect ratio */
.single_c_img img {
	height: 240px;
	object-fit: cover;
	object-position: center;
}

/* Topic tag pills on each training program card */
.tag-chip-list {
	list-style: none;
	padding: 0 20px 25px;
	margin: -10px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	align-content: flex-start;
}
.tag-chip {
	display: inline-block;
	padding: 2px 6px;
	width: 152px;
	border-radius: 20px;
	background: #ECEDFF;
	color: #007bff;
	font-size: 12px;
	font-weight: 600;	
}
	@media (min-width: 992px) {
		.cta-intro p {
			width: 100%;
			margin-left: 0;
			margin-right: 0;
		}
	}
	/* 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; }

/* Closing CTA now runs image-left/content-right like About Us, so the
   buttons/contact row need to left-align alongside the text at lg+ instead
   of staying centered (the base .cta-buttons/.cta-contact rules above are
   shared with any future centered use, so the left variants live here). */
@media (min-width: 992px) {
	.cta-buttons-start { justify-content: flex-start; }
	.cta-contact-start { justify-content: flex-start; }
}

/* Closing CTA quick trust list: three short reassurances between the intro
   copy and the call-to-action buttons, giving skimmers a reason to act
   without needing to read the full paragraph above. */
.cta-trust-list {
	list-style: none;
	padding: 0;
	margin: 18px 0 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 24px;
}
@media (min-width: 992px) {
	.cta-trust-list { justify-content: flex-start; }
}
.cta-trust-list li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 14px;
	color: #16193f;
}
.cta-trust-list li i { color: #28a745; }

/* Closing CTA visual, left column: hero-illustration.png has a dark backdrop
   baked in (built for the dark hero section), so on the CTA's white
   background it's framed in a matching dark navy panel instead of sitting
   directly on the page - same glow + panel pattern as .ab-visual, just
   inverted to a dark surface so the image's own background blends in. */
.cta-visual {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 30px;
}
@media (min-width: 992px) {
	.cta-visual { margin-bottom: 0; }
}
.cta-visual-glow {
	position: absolute;
	width: 320px;
	height: 320px;
	max-width: 80%;
	background: radial-gradient(circle, rgba(255, 200, 87, 0.2) 0%, rgba(0, 86, 179, 0.18) 55%, transparent 75%);
	filter: blur(30px);
	z-index: 0;
}
.cta-visual-panel {
	position: relative;
	z-index: 1;
	width: 100%;
	/* max-width: 380px; */
	/* background: linear-gradient(135deg, #0a1440 0%, #142766 100%); */
	border-radius: 28px;
	padding: 22px;
	/* box-shadow: 0 24px 50px rgba(23, 23, 36, 0.18); */
}
.cta-visual-img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	border-radius: 16px;
}

/* "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.
   Badge/icon accent uses the same blue gradient as the Vision/Mission cards
   (was a leftover off-brand indigo/purple) for consistency across sections. */
.who-course-card {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
	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::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #0056b3, #4da3ff);
	z-index: 1;
}
*/.who-course-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 45px rgba(0, 86, 179, 0.2);
}
.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);
}
/* Soft bottom scrim so the badge sits with a touch more contrast and the
   image blends into the card body instead of ending on a hard edge. */
.who-course-img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.15) 100%);
	pointer-events: none;
}
.who-course-badge {
	position: absolute;
	top: 50%;
	left: 20px;
	transform: translate(-50%, -50%) rotate(-90deg);
	white-space: nowrap;
	background: linear-gradient(135deg, #0056b3, #4da3ff);
	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(0, 86, 179, 0.35);
	transition: background 0.3s ease;
	z-index: 1;
}
.who-course-card:hover .who-course-badge {
	background: linear-gradient(135deg, #003d82, #0056b3);
}
.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: 12px;
	font-weight: 600;
	color: #3a3d5c;
}
.who-course-icons i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border-radius: 50%;
	background: #E6F2FF;
	color: #007bff;
	font-size: 12px;
}
@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: honeycomb of hexagon tiles (clip-path hexagons) in a
   single staggered row, replacing the old rectangular card grid. Tiles stay
   white, the icon badge reuses the .sc_one blue-on-light-blue language, and
   the gold halo on hover reuses the accent already used for hover states
   elsewhere (social icons, founding badge) - all on top of the section's
   existing .bg-dark-gradient background. */
.program-highlights-section {
	padding: 40px 0;
}
.program-highlights-section .section-title {
	margin-bottom: 20px;
}
.highlight-honeycomb {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px 12px;
	max-width: 1520px;
	margin: 30px auto 0;
	padding: 0;
}
.hex-item {
	width: 150px;
	filter: drop-shadow(6px 12px 18px rgba(0, 15, 60, 0.22));
	transition: transform 0.3s ease, filter 0.3s ease;
}
.hex-item:nth-child(even) {
	margin-top: 55px;
}
.hex-item:hover {
	transform: translateY(-8px);
	filter: drop-shadow(0 18px 30px rgba(0, 15, 60, 0.32));
}
.hex-shape {
	position: relative;
	width: 100%;
	aspect-ratio: 0.92;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	background: #fff;
	transition: background 0.3s ease;
}
.hex-item:hover .hex-shape {
	background: #F3F8FF;
}
.hex-shape::after {
	content: "";
	position: absolute;
	inset: -5px;
	z-index: -1;
	clip-path: inherit;
	background: #FFC857;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.hex-item:hover .hex-shape::after {
	opacity: 1;
}
.hex-shape-inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 20px;
}
.hex-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/*width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #E6F2FF;*/
	margin-bottom: 8px;
}
.hex-icon img {
	width: 36px;
	height: 36px;
	object-fit: contain;
}
.hex-shape-inner h3 {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	margin-bottom: 3px;
}
.hex-shape-inner p {
	font-size: 10px;
	color: #6d7193;
	line-height: 1.3;
	margin: 0;
}
.highlight-cta {
	margin-top: 45px;
}
@media only screen and (max-width: 991px) {
	.hex-item:nth-child(even) { margin-top: 0; }
	.highlight-honeycomb { gap: 24px 16px; }
}
@media only screen and (max-width: 480px) {
	.hex-item { width: 42%; }
}

/* Why Choose STC: reuses the Program Highlights honeycomb above since the two
   sections had drifted into duplicate designs. This one leads the page, so
   its icons render as plain font-awesome glyphs (no source svg set) and its
   title gets a modest font bump to stand slightly apart from the later,
   near-identical Program Highlights section. */
.why-choose-honeycomb .hex-icon {
	margin-bottom: 10px;
}
.why-choose-honeycomb .hex-icon i {
	font-size: 30px;
	color: #007bff;
}
.why-choose-honeycomb .hex-shape-inner h3 {
	font-size: 15px;
}

/* Testimonials: replaces Program Highlights in the same slot, reusing the
   card language established by .value-box/.who-course-card (white card, top
   gradient accent bar, hover lift) instead of the honeycomb grid, since
   quote content reads better in a plain card than a hexagon tile. Avatars
   are initials-only (no headshot assets exist in wwwroot/images), styled
   like the section's other icon badges (.value-box-icon, .process-step-icon). */
/* Single-row horizontal scroller: cards no longer wrap into a Bootstrap
   grid, they sit in one flex row the user drags/swipes through. Fixed card
   width (instead of column-based sizing) is required for a scroll track -
   percentage widths would resize with the viewport instead of scrolling.
   scroll-snap-x gives each swipe a clean resting position; -webkit-overflow-
   scrolling keeps momentum scrolling smooth on iOS Safari. */
.testimony-scroll-wrap {
	position: relative;
	margin-top: 10px;
}
.testimony-scroll {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding: 10px 4px;
}
.testimony-scroll-item {
	flex: 0 0 320px;
	scroll-snap-align: start;
}
@media (max-width: 575.98px) {
	.testimony-scroll-item { flex-basis: 270px; }
}
/* Scrollbar hidden - navigation is via the prev/next arrow buttons instead
   of a visible drag track (still swipeable/draggable on touch/trackpad). */
.testimony-scroll {
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.testimony-scroll::-webkit-scrollbar {
	display: none;
}

/* Prev/next arrow buttons: floated over the scroll track's edges rather than
   inline, so they don't shift card layout and stay reachable regardless of
   scroll position. Reuses the site's blue/white button language. */
.testimony-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	color: #0056b3;
	border: 1px solid #E6F2FF;
	box-shadow: 0 10px 24px rgba(23, 23, 36, 0.14);
	font-size: 16px;
	cursor: pointer;
	transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.testimony-arrow:hover {
	background: #007bff;
	color: #fff;
	box-shadow: 0 14px 30px rgba(0, 86, 179, 0.28);
}
.testimony-arrow:active {
	transform: translateY(-50%) scale(0.94);
}
.testimony-arrow-prev {
	left: -22px;
}
.testimony-arrow-next {
	right: -22px;
}
@media (max-width: 767.98px) {
	.testimony-arrow {
		width: 38px;
		height: 38px;
		font-size: 14px;
	}
	.testimony-arrow-prev { left: -10px; }
	.testimony-arrow-next { right: -10px; }
}

.testimony-card {
	position: relative;
	overflow: hidden;
	height: 100%;
	background: #fff;
	padding: 34px 30px 30px;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(23, 23, 36, 0.08);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.testimony-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #0056b3, #4da3ff);
}
.testimony-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 45px rgba(0, 86, 179, 0.16);
}
.testimony-quote-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #E6F2FF;
	color: #007bff;
	font-size: 16px;
	margin-bottom: 14px;
}
.testimony-rating {
	color: #FFC857;
	font-size: 13px;
	margin-bottom: 12px;
}
.testimony-rating i:not(:last-child) {
	margin-right: 2px;
}
.testimony-text {
	color: #4a5355;
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 22px;
}
.testimony-person {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 18px;
	border-top: 1px solid #eef0fa;
}
.testimony-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: linear-gradient(135deg, #0056b3, #4da3ff);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
}
.testimony-person-info h4 {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 2px;
}
.testimony-person-info p {
	color: #6d7193;
	font-size: 13px;
	margin-bottom: 0;
}

/* 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;
}

/* ----------------------------------------------------------------------
   APPLY NOW PAGE (Views/Home/ApplyNow.cshtml)
   ---------------------------------------------------------------------- */

/* --- Header ---
   Reuses the Home hero's own markup/classes (.hero-section-dark, .hero-text,
   .section-eyebrow, .hero-lead, .hero-desc) so the two banners share
   identical font sizing and color treatment. .apply-page-header only swaps
   in this page's own banner image, using the same "contain + matching
   background-color" technique as .hero-section-dark so it blends the same
   way if letterboxed. Declared after .hero-section-dark in the cascade so
   it wins the background-image tie-break. */
.apply-page-header {
	position: relative;
	overflow: hidden;
	background-image: url(/assets/images/stc/AppluNow-Banner1.png);
	background-size: contain;
	background-position: right center;
	background-repeat: no-repeat;
	background-color: #00299e;
}
.apply-page-header-glow {
	position: absolute;
	top: -140px;
	right: -120px;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 70%);
	filter: blur(10px);
	pointer-events: none;
}
@media (max-width: 575px) {
	.apply-page-header-glow { width: 220px; height: 220px; top: -80px; right: -80px; }
}

/* --- Form section layout --- */
.apply-page-section { position: relative; }

/* --- Side info panel --- */
/* Flex column so .apply-side-contact can anchor to the bottom via
   margin-top: auto below. On lg+ screens the panel sticks in place while
   the (much longer) form column scrolls past, instead of being stretched
   to match the form's full height - stretching left a large dead gap
   between the list and the bottom-anchored contact links. */
.apply-side-panel {
	position: relative;
	overflow: hidden;
	background: linear-gradient(165deg, #F7FAFF 0%, #fff 55%);
	border-radius: 20px;
	padding: 38px 28px 34px;
	box-shadow: 0 6px 20px rgba(11, 16, 74, 0.06);
	display: flex;
	flex-direction: column;
}
/*.apply-side-panel::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient(90deg, #4da3ff, #0056b3);
}*/
@media (min-width: 992px) {
	.apply-side-panel {
		position: sticky;
		top: 110px;
	}
}
.apply-side-visual {
	position: relative;
	display: flex;
	justify-content: center;
	margin-bottom: 18px;
}
.apply-side-glow {
	position: absolute;
	width: 240px;
	height: 240px;
	background: radial-gradient(circle, rgba(59, 130, 246, 0.16) 0%, rgba(147, 51, 234, 0.12) 55%, transparent 75%);
	filter: blur(24px);
	z-index: 0;
}
.apply-side-img {
	position: relative;
	z-index: 1;
	max-width: 240px;
	width: 100%;
	height: auto;
}
.apply-side-panel h3 {
	font-size: 18px;
	font-weight: 700;
	color: #0b104a;
	margin-bottom: 18px;
}
.apply-side-list {
	list-style: none;
	padding: 0;
	margin: 0 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
/* Each benefit is a small bordered card (title + supporting line) rather
   than a single bullet line, so the list reads with the same weight as
   the rest of the site's card language (who-course-card, value-box). */
.apply-side-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	border: 1px solid transparent;
	border-radius: 12px;
	transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.apply-side-list li:hover {
	transform: translateX(4px);
	background: #F4F8FF;
	border-color: #E6F2FF;
}
.apply-side-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: linear-gradient(135deg, #E6F2FF, #EDE7FF);
	color: #007bff;
	font-size: 14px;
	flex-shrink: 0;
	margin-top: 2px;
}
.apply-side-text { display: flex; flex-direction: column; gap: 3px; }
.apply-side-text-title {
	color: #1a2d62;
	font-size: 14px;
	font-weight: 700;
}
.apply-side-text-desc {
	color: #6d7193;
	font-size: 12.5px;
	line-height: 1.5;
}
/* Contact callout: a tinted panel instead of two bare text links, so it
   reads as a distinct, tappable action rather than trailing off the list. */
.apply-side-contact {
	margin-top: auto;
	padding: 18px;
	border-radius: 14px;
	background: linear-gradient(135deg, #F4F8FF, #EEF2FF);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.apply-side-contact-label {
	color: #6d7193;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.apply-side-contact-link {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #1a2d62;
	font-weight: 700;
	font-size: 14px;
	transition: color 0.2s ease;
}
.apply-side-contact-link:hover { color: #007bff; }
.apply-side-contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #fff;
	color: #007bff;
	font-size: 13px;
	flex-shrink: 0;
	box-shadow: 0 4px 10px rgba(11, 16, 74, 0.08);
}

/* --- Form card --- */
.apply-form-card {
	position: relative;
	overflow: hidden;
	background: #fff;
	border-radius: 20px;
	padding: 36px 34px;
	box-shadow: 0 10px 30px rgba(23, 23, 36, 0.08);
}
/*.apply-form-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient(90deg, #0056b3, #4da3ff);
}*/

/* --- Form fields ---
   Underline-field styling (.apply2-*), re-themed blue/gold via the
   `.apply-form-card .apply2-*` overrides further below. */
.apply2-form-wrap { width: 100%; max-width: 560px; }
.apply2-form-title { color: #16193f; font-size: 28px; font-weight: 700; margin-bottom: 6px; }
.apply2-form-subtitle { color: #8b93b8; font-size: 14px; margin-bottom: 36px; }
.apply2-required { color: #d92d20; }

.apply2-alert {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	border-left: 3px solid transparent;
	padding: 14px 16px;
	margin-bottom: 24px;
	font-weight: 600;
	font-size: 14px;
}
.apply2-alert i { margin-top: 2px; flex-shrink: 0; }
.apply2-alert-success { background: #F3FBF6; border-left-color: #16a34a; color: #0f7a37; }
.apply2-alert-error { background: #FFF6F5; border-left-color: #d92d20; color: #b91c1c; }

.apply2-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	margin-bottom: 30px;
}
.apply2-field label {
	display: block;
	color: #8b93b8;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.apply2-input {
	width: 100%;
	border: none;
	border-bottom: 2px solid #e3e6f0;
	border-radius: 0;
	background: transparent;
	padding: 8px 2px 12px;
	font-size: 16px;
	color: #16193f;
	transition: border-color 0.2s ease;
}
.apply2-input::placeholder { color: #b7bcd6; }
.apply2-input:focus { outline: 0 none; border-bottom-color: #0b104a; }
.apply2-input.input-validation-error { border-bottom-color: #d92d20; }

.apply2-fieldset { border: none; padding: 0; margin: 0 0 32px; }
.apply2-fieldset legend {
	width: 100%;
	float: none;
	padding: 0;
	color: #8b93b8;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.apply2-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.apply2-tag {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 10px 18px;
	border: 1.5px solid #d8dce8;
	border-radius: 6px;
	color: #16193f;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.apply2-tag:hover { border-color: #0b104a; }
.apply2-tag:has(.apply2-tag-input:checked) {
	background: #0b104a;
	border-color: #0b104a;
	color: #fff;
}
.apply2-tag:has(.apply2-tag-input:focus-visible) {
	outline: 2px solid #0b104a;
	outline-offset: 2px;
}
.apply2-fieldset:has(.field-validation-error) .apply2-tags {
	padding: 12px;
	margin: 0 -12px;
	border: 1px dashed #d92d20;
	border-radius: 8px;
}

.apply2-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	border: none;
	border-radius: 8px;
	margin-top: 8px;
	padding: 18px 30px;
	background: #0b104a;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	transition: background 0.2s ease, transform 0.2s ease;
}
.apply2-submit:hover { background: #16193f; transform: translateY(-2px); color: #fff; }
.apply2-submit:focus-visible { outline: 2px solid #0b104a; outline-offset: 3px; }

.apply2-form .text-danger { display: block; color: #d92d20; font-size: 12px; margin-top: 6px; }

@media (max-width: 575px) {
	.apply2-row { grid-template-columns: 1fr; gap: 0; }
	.apply2-field { margin-bottom: 20px; }
}

/* Re-themed blue/gold accents on top of the underline-field defaults above. */
.apply-form-card .apply2-submit {
	background: linear-gradient(135deg, #0056b3, #007bff);
	text-transform: none;
	letter-spacing: 0.3px;
	box-shadow: 0 10px 25px rgba(0, 86, 179, 0.25);
}
.apply-form-card .apply2-submit:hover {
	background: linear-gradient(135deg, #0056b3, #007bff);
	box-shadow: 0 16px 34px rgba(0, 86, 179, 0.32);
}
.apply-form-card .apply2-submit:focus-visible {
	outline: 2px solid #007bff;
}
.apply-form-card .apply2-input:focus {
	border-bottom-color: #007bff;
}
.apply-form-card .apply2-tag:hover {
	border-color: #9fc7ff;
	background: #F4F8FF;
}
.apply-form-card .apply2-tag:has(.apply2-tag-input:checked) {
	background: linear-gradient(135deg, rgba(0, 86, 179, 0.08), rgba(77, 163, 255, 0.12));
	border-color: #007bff;
	color: #0056b3;
}
.apply-form-card .apply2-tag:has(.apply2-tag-input:focus-visible) {
	outline-color: #007bff;
}
.apply-form-card .apply2-form-wrap {
	max-width: none;
}

.apply-side-contact a:focus-visible {
	outline: 2px solid #007bff;
	outline-offset: 3px;
}
@media (min-width: 576px) and (max-width: 991.98px) {
	.apply-side-panel { padding: 32px 44px; }
	.apply-side-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 18px 28px;
		margin-bottom: 26px;
	}
	.apply-form-card { padding: 34px 44px; }
}
@media (max-width: 575px) {
	.apply-form-card { padding: 28px 22px; }
}