:root {
	--yn-color-text: #171717;
	--yn-color-muted: #6b7280;
	--yn-color-border: #e5e7eb;
	--yn-color-surface: #ffffff;
	--yn-color-brand: #0f766e;
	--yn-color-brand-dark: #115e59;
	--yn-radius: 8px;
	--yn-shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.08);
}

/* ── Hero Video Section: force true full-screen ──────────────────────────
 * Elementor "full height" sets min-height:100vh but the fixed header
 * (which sits on top) causes the bottom of the section to be cut off.
 * We override with 100svh (small viewport height) which accounts for
 * mobile browser chrome, and use a negative margin-top trick so the
 * section starts from y=0 (behind the transparent header).
 * ─────────────────────────────────────────────────────────────────────── */
.elementor-section-height-full,
.elementor-section-height-full.elementor-section-stretched {
	min-height: 100vh !important;  /* fallback for browsers without svh */
	min-height: 100svh !important; /* svh = small viewport height, best for mobile */
}

/* Account for WordPress admin bar so it doesn't push the section down */
body.admin-bar .elementor-section-height-full,
body.admin-bar .elementor-section-height-full.elementor-section-stretched {
	min-height: calc(100vh - 32px) !important;
	min-height: calc(100svh - 32px) !important;
}

/* Ensure the background video container fills the section */
.elementor-section-height-full > .elementor-background-video-container {
	height: 100% !important;
	min-height: 100vh !important;
	min-height: 100svh !important;
	position: absolute !important;
	top: 0 !important;
	bottom: 0 !important;
}

/* Force video to fill container without Elementor JS distortion */
.elementor-section-height-full .elementor-background-video-container video,
.elementor-section-height-full .elementor-background-video-container iframe {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	transform: none !important;
	object-fit: cover !important;
	object-position: center center !important;
}



body {
	color: var(--yn-color-text);
}

a {
	color: inherit;
}

/* ==========================================================================
   EXPANSIVE DESKTOP LAYOUT (40PX SIDE MARGINS ON MACBOOK PRO 14" & DESKTOPS)
   ========================================================================== */
:root {
	--yn-container-max-width: 1440px;
	--e-con-max-width: 1440px;
}

@media (min-width: 1025px) {
	/* Boxed containers span wide leaving exactly 40px edge margins on MacBook Pro 14" */
	/* Header (.yn-sticky-header) excluded so it stays full viewport width */
	.elementor-section.elementor-section-boxed > .elementor-container,
	.e-con.e-con-boxed:not(.yn-sticky-header) > .e-con-inner,
	.e-con--boxed:not(.yn-sticky-header) > .e-con-inner,
	.yn-container {
		width: calc(100% - 80px) !important;
		max-width: 1440px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box !important;
	}

	/* Boxed sections themselves should not add extra side padding that shrinks container */
	.elementor-section.elementor-section-boxed {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Full width sections keep content 40px from the screen edge */
	.elementor-section.elementor-section-full_width:not(.elementor-section-stretched) {
		padding-left: 40px !important;
		padding-right: 40px !important;
		box-sizing: border-box !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-section.elementor-section-boxed > .elementor-container,
	.e-con.e-con-boxed:not(.yn-sticky-header) > .e-con-inner,
	.e-con--boxed:not(.yn-sticky-header) > .e-con-inner,
	.yn-container {
		width: calc(100% - 60px) !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box !important;
	}
}

@media (max-width: 767px) {
	.elementor-section.elementor-section-boxed > .elementor-container,
	.e-con.e-con-boxed:not(.yn-sticky-header) > .e-con-inner,
	.e-con--boxed:not(.yn-sticky-header) > .e-con-inner,
	.yn-container {
		width: calc(100% - 32px) !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box !important;
	}
}

.yn-container {
	width: min(1440px, calc(100% - 80px));
	margin-inline: auto;
}

.yn-button,
.elementor-button,
.button {
	border-radius: var(--yn-radius);
	font-weight: 700;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

/* .yn-button:hover,
.elementor-button:hover,
.button:hover {
	transform: translateY(-1px);
} */

.yn-section {
	padding-block: clamp(48px, 8vw, 96px);
}

.yn-section__title {
	margin: 0 0 16px;
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.1;
}

.yn-section__text {
	max-width: 680px;
	color: var(--yn-color-muted);
	font-size: 18px;
	line-height: 1.7;
}


/* ── Header Full-Width Override ──────────────────────────────────────────────── */
/* Ensure the sticky header container ALWAYS spans the full viewport width */
.yn-sticky-header,
.yn-sticky-header.e-con.e-con-boxed,
.yn-sticky-header .e-con-inner,
.yn-sticky-header > .e-con-inner {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ── Header Inner Padding (40px sides, 14px top/bottom for balanced height) ── */
.yn-sticky-header .e-con-inner,
.hfe-header .e-con-inner {
	padding-left: 40px !important;
	padding-right: 40px !important;
	padding-top: 8px !important;
	padding-bottom: 8px !important;
	min-height: 60px !important;
	box-sizing: border-box !important;
}
@media (max-width: 1024px) {
	.yn-sticky-header .e-con-inner,
	.hfe-header .e-con-inner {
		padding-left: 20px !important;
		padding-right: 20px !important;
		padding-top: 8px !important;
		padding-bottom: 8px !important;
		min-height: 56px !important;
	}
}
/* ── Sticky Header Base ───────────────────────────── */
/* By default on homepage, it starts transparent */
body.home .yn-sticky-header {
	transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
	background-color: transparent;
}

/* On inner pages, instantly white header (Style 3) */
body:not(.home) .yn-sticky-header {
	/* No transition — prevents flash on page load */
	background-color: #ffffff !important;
	box-shadow: 0 2px 0 rgba(27, 68, 156, 0.08), 0 4px 20px rgba(27, 68, 156, 0.07) !important;
	border-bottom: 1px solid rgba(27, 68, 156, 0.08) !important;
}

/* Scrolled state for the homepage — white (Style 3) */
.yn-header-scrolled {
	background-color: #ffffff !important;
	box-shadow: 0 2px 0 rgba(27, 68, 156, 0.08), 0 4px 20px rgba(27, 68, 156, 0.07) !important;
	border-bottom: 1px solid rgba(27, 68, 156, 0.08) !important;
}

/* ── Menu Items Base Styles (Pill Shape) ── */
.yn-sticky-header .yn-nav-menu > li > a,
.yn-sticky-header .elementor-nav-menu a {
	border-radius: 8px !important;
	transition: all 0.3s ease !important;
}

/* 
 * 1. HOMEPAGE AT TOP (Not Scrolled)
 * Text is White, transparent background
 */
body.home .yn-sticky-header:not(.yn-header-scrolled) .yn-nav-menu > li > a,
body.home .yn-sticky-header:not(.yn-header-scrolled) .elementor-nav-menu a,
body.home .yn-sticky-header:not(.yn-header-scrolled) .yn-site-title,
body.home .yn-sticky-header:not(.yn-header-scrolled) .yn-menu-toggle {
	color: #ffffff !important;
	background-color: transparent !important;
}

body.home .yn-sticky-header:not(.yn-header-scrolled) .yn-site-logo img {
	filter: brightness(0) invert(1) !important;
}

/* 
 * 2. SCROLLED OR INNER PAGES (Header is Yellow)
 * Base Text is Blue
 */
.yn-header-scrolled .yn-nav-menu > li > a,
.yn-header-scrolled .elementor-nav-menu a,
.yn-header-scrolled .yn-site-title,
.yn-header-scrolled .yn-menu-toggle,
body:not(.home) .yn-sticky-header .yn-nav-menu > li > a,
body:not(.home) .yn-sticky-header .elementor-nav-menu a,
body:not(.home) .yn-sticky-header .yn-site-title,
body:not(.home) .yn-sticky-header .yn-menu-toggle {
	color: #1B449C !important;
	background-color: transparent !important;
}

.yn-header-scrolled .yn-site-logo img,
body:not(.home) .yn-sticky-header .yn-site-logo img {
	filter: none !important;
}

/* 
 * 3. HOVER STATE
 * Background White, Text Blue (#1B449C), No font-weight change to prevent jumping!
 */
.yn-sticky-header .yn-nav-menu > li > a:hover,
.yn-sticky-header .elementor-nav-menu a:hover,
body.home .yn-sticky-header:not(.yn-header-scrolled) .yn-nav-menu > li > a:hover,
body.home .yn-sticky-header:not(.yn-header-scrolled) .elementor-nav-menu a:hover,
.yn-header-scrolled .yn-nav-menu > li > a:hover,
.yn-header-scrolled .elementor-nav-menu a:hover,
body:not(.home) .yn-sticky-header .yn-nav-menu > li > a:hover,
body:not(.home) .yn-sticky-header .elementor-nav-menu a:hover {
	background-color: rgba(255, 220, 3, 0.18) !important;
	color: #1B449C !important;
	box-shadow: none !important;
}

/* 
 * 3b. ACTIVE STATE — Yellow pill (UPG brand, like Style 3 highlight)
 * Background Yellow, Text Blue
 */
.yn-sticky-header .yn-nav-menu > li.current-menu-item > a,
.yn-sticky-header .yn-nav-menu > li.current-menu-ancestor > a,
.yn-sticky-header .elementor-nav-menu .current-menu-item > a,
body.home .yn-sticky-header:not(.yn-header-scrolled) .yn-nav-menu > li.current-menu-item > a,
body.home .yn-sticky-header:not(.yn-header-scrolled) .yn-nav-menu > li.current-menu-ancestor > a,
body.home .yn-sticky-header:not(.yn-header-scrolled) .elementor-nav-menu .current-menu-item > a,
.yn-header-scrolled .yn-nav-menu > li.current-menu-item > a,
.yn-header-scrolled .yn-nav-menu > li.current-menu-ancestor > a,
.yn-header-scrolled .elementor-nav-menu .current-menu-item > a,
body:not(.home) .yn-sticky-header .yn-nav-menu > li.current-menu-item > a,
body:not(.home) .yn-sticky-header .yn-nav-menu > li.current-menu-ancestor > a,
body:not(.home) .yn-sticky-header .elementor-nav-menu .current-menu-item > a {
	background-color: #ffdc03 !important;
	color: #1B449C !important;
	box-shadow: none !important;
	font-weight: 700 !important;
}

/* 
 * 4. PREMIUM CONTACT CTA BUTTON
 * Dynamic styling based on scroll state with smooth animations
 */
.yn-sticky-header .yn-nav-btn {
	position: relative !important;
	border-radius: 8px !important;
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	padding: 12px 28px !important;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	overflow: hidden !important;
}

/* ── CTA Button Flair (Shimmer sweep on hover) ── */
/* ::before is the sweep — starts left, sweeps to right on hover */
.yn-sticky-header .yn-nav-btn::before {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: -120% !important;
	width: 60% !important;
	height: 100% !important;
	background: linear-gradient(
		105deg,
		transparent 0%,
		rgba(255, 255, 255, 0.35) 50%,
		transparent 100%
	) !important;
	transform: skewX(-20deg) !important;
	transition: left 0.55s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
	pointer-events: none !important;
	z-index: 1 !important;
}

.yn-sticky-header .yn-nav-btn:hover::before {
	left: 160% !important;
}

/* Ensure button text stays above the flair layer */
.yn-sticky-header .yn-nav-btn > *,
.yn-sticky-header .yn-nav-btn span {
	position: relative !important;
	z-index: 2 !important;
}

/* Base Icon setup */
.yn-sticky-header .yn-nav-btn::after {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-left: 10px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Hover Animation for Icon */
.yn-sticky-header .yn-nav-btn:hover::after {
	transform: rotate(360deg) !important;
}

/* 4a. CTA at Top (Transparent Header) -> White button, Blue text/icon */
body.home .yn-sticky-header:not(.yn-header-scrolled) .yn-nav-btn {
	background-color: #ffffff !important;
	color: #1B449C !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

body.home .yn-sticky-header:not(.yn-header-scrolled) .yn-nav-btn::after {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%231B449C" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>') !important;
}

body.home .yn-sticky-header:not(.yn-header-scrolled) .yn-nav-btn:hover {
	box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3) !important;
	background-color: #f8f9fa !important;
}

/* 4b. CTA Scrolled (Yellow Header) or Inner Pages -> Blue button, White text/icon */
.yn-header-scrolled .yn-nav-btn,
body:not(.home) .yn-sticky-header .yn-nav-btn {
	background-color: #1B449C !important;
	color: #ffffff !important;
	box-shadow: 0 4px 15px rgba(27, 68, 156, 0.2) !important;
}

.yn-header-scrolled .yn-nav-btn::after,
body:not(.home) .yn-sticky-header .yn-nav-btn::after {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>') !important;
}

.yn-header-scrolled .yn-nav-btn:hover,
body:not(.home) .yn-sticky-header .yn-nav-btn:hover {
	background-color: #0e2d6b !important;
	box-shadow: 0 8px 25px rgba(27, 68, 156, 0.4) !important;
}

/* ── Mobile Responsive Fixes ───────────────────────────── */
@media (max-width: 1024px) {
	/* Mobile Menu Toggle Button Color */
	body.home .yn-sticky-header:not(.yn-header-scrolled) .yn-menu-toggle {
		color: #ffffff !important;
	}
	.yn-header-scrolled .yn-menu-toggle,
	body:not(.home) .yn-sticky-header .yn-menu-toggle {
		color: #1B449C !important;
	}
	
	/* Mobile Dropdown Menu Container — white, clean like style 3 */
	.yn-sticky-header .yn-nav-collapse,
	.yn-sticky-header .yn-mob-type-fullscreen .yn-nav-collapse {
		background-color: #ffffff !important;
		box-shadow: 0 8px 32px rgba(27, 68, 156, 0.12) !important;
		border-top: 2px solid #ffdc03 !important; /* Yellow accent strip */
	}
	
	/* Mobile Dropdown Items (Lazy Transition) */
	.yn-sticky-header .yn-nav-menu > li {
		text-align: center !important;
	}

	.yn-sticky-header .yn-nav-menu > li > a,
	.yn-sticky-header .yn-mob-type-fullscreen .yn-nav-menu > li > a,
	body.home .yn-sticky-header:not(.yn-header-scrolled) .yn-nav-menu > li > a {
		color: #1B449C !important;
		background-color: transparent !important;
		border-radius: 8px !important;
		margin: 6px auto !important;
		padding: 10px 24px !important;
		display: inline-block !important;
		transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
		-webkit-tap-highlight-color: transparent !important;
	}
	
	/* Mobile Dropdown Hover/Active */
	.yn-sticky-header .yn-nav-menu > li > a:hover,
	.yn-sticky-header .yn-nav-menu > li.current-menu-item > a,
	.yn-sticky-header .yn-mob-type-fullscreen .yn-nav-menu > li > a:hover,
	.yn-sticky-header .yn-mob-type-fullscreen .yn-nav-menu > li.current-menu-item > a,
	body.home .yn-sticky-header:not(.yn-header-scrolled) .yn-nav-menu > li > a:hover,
	body.home .yn-sticky-header:not(.yn-header-scrolled) .yn-nav-menu > li.current-menu-item > a {
		background-color: #ffdc03 !important;
		color: #1B449C !important;
		box-shadow: none !important;
		font-weight: 700 !important;
		transform: none !important;
	}
}

/* ==========================================
   PREMIUM TEAM MEMBER CARDS (UPG ADVANCED)
   ========================================== */
.yn-team-wrapper {
	width: 100%;
	position: relative;
}

.yn-team-grid {
	width: 100%;
}

.yn-team-grid-item {
	display: flex;
	width: 100%;
}

.yn-team-card {
	position: relative;
	width: 100%;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
	background: #ffffff;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 100%;
}

.yn-team-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(27, 68, 156, 0.12);
}

/* Badge / Department Tag */
.yn-team-badge {
	position: absolute;
	top: 15px;
	left: 15px;
	z-index: 4;
	background: #ffdc03;
	color: #1B449C;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 5px 14px;
	border-radius: 30px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	pointer-events: none;
}

/* Image */
.yn-team-card .yn-team-img {
	position: relative;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	background-color: #f4f6fa;
	width: 100%;
	flex: 1 1 auto;
	display: flex;
	align-items: stretch;
	justify-content: center;
}

.yn-team-card .yn-team-img img {
	width: 100% !important;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
	transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease;
}

/* Hover effects for Photo */
.yn-team-hover-subtle_zoom .yn-team-card:hover .yn-team-img img {
	transform: scale(1.03);
}
.yn-team-hover-zoom .yn-team-card:hover .yn-team-img img {
	transform: scale(1.06);
}
.yn-team-hover-zoom_big .yn-team-card:hover .yn-team-img img {
	transform: scale(1.10);
}
.yn-team-hover-grayscale .yn-team-img img {
	filter: grayscale(100%);
}
.yn-team-hover-grayscale .yn-team-card:hover .yn-team-img img {
	filter: grayscale(0%);
	transform: scale(1.03);
}
.yn-team-hover-color_gray .yn-team-card:hover .yn-team-img img {
	filter: grayscale(100%);
}
.yn-team-hover-none .yn-team-card:hover .yn-team-img img {
	transform: none !important;
}

/* ── STYLE 1: Floating Glassmorphism (Default UPG Signature) ── */
.yn-team-style-floating_glass .yn-team-info {
	position: absolute !important;
	bottom: 15px !important;
	left: 15px !important;
	right: 15px !important;
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 16px 14px;
	border-radius: 15px;
	text-align: center;
	transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
	border: 1px solid rgba(255, 255, 255, 0.7);
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	z-index: 3;
}

.yn-team-style-floating_glass .yn-team-card:hover .yn-team-info {
	background: #ffdc03;
	border-color: #ffdc03;
}

/* ── STYLE 2: Below Photo (Classic Corporate) ── */
.yn-team-style-below_image .yn-team-info {
	position: relative;
	background: #ffffff;
	padding: 20px 18px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	transition: all 0.4s ease;
	border-top: 1px solid #f0f0f0;
	margin-top: auto;
	flex-shrink: 0;
}

.yn-team-style-below_image .yn-team-card:hover .yn-team-info {
	background: #ffdc03;
	border-color: #ffdc03;
}

/* ── STYLE 3: Full Card Overlay (Modern Portfolio) ── */
.yn-team-style-full_overlay .yn-team-info {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(6, 11, 19, 0.95) 0%, rgba(6, 11, 19, 0.6) 50%, transparent 100%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	padding: 24px 18px;
	text-align: center;
	z-index: 3;
	transition: all 0.4s ease;
}

.yn-team-style-full_overlay .yn-team-name {
	color: #ffffff !important;
}

.yn-team-style-full_overlay .yn-team-pos {
	color: #ffdc03 !important;
}

/* Typography */
.yn-team-name-link {
	text-decoration: none;
	color: inherit;
	display: block;
}

.yn-team-card .yn-team-name {
	color: #1B449C;
	font-size: 20px;
	font-weight: 800;
	margin: 0 0 4px 0 !important;
	transition: color 0.3s ease;
}

.yn-team-card .yn-team-pos {
	color: #666666;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin: 0 !important;
	transition: color 0.3s ease;
}

.yn-team-card:hover .yn-team-pos {
	color: #1B449C;
}

.yn-team-bio {
	font-size: 13px;
	color: #555555;
	line-height: 1.5;
	margin: 6px 0 0 0 !important;
}

/* ── Social Media & Contact Buttons ── */
.yn-team-socials {
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 4;
}

.yn-socials-inline {
	justify-content: center;
	margin-top: 10px;
}

/* Always visible mode */
.yn-team-socials-always .yn-socials-inline {
	display: flex !important;
	opacity: 1 !important;
	max-height: none !important;
	overflow: visible !important;
	transform: none !important;
	visibility: visible !important;
	margin-top: 10px !important;
}

/* Hover reveal mode: animated slide up */
.yn-team-socials-hover_reveal .yn-socials-inline {
	display: flex;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transform: translateY(10px);
	transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
	margin-top: 0;
}

.yn-team-socials-hover_reveal .yn-team-card:hover .yn-socials-inline {
	opacity: 1;
	max-height: 50px;
	transform: translateY(0);
	margin-top: 10px;
}

/* Floating top corner mode */
.yn-socials-top {
	position: absolute;
	top: 15px;
	right: 15px;
	flex-direction: column;
	opacity: 0;
	transform: translateX(10px);
	transition: all 0.35s ease;
}

.yn-team-socials-overlay_top .yn-team-card:hover .yn-socials-top {
	opacity: 1;
	transform: translateX(0);
}

.yn-social-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: rgba(27, 68, 156, 0.1);
	color: #1B449C;
	text-decoration: none;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.yn-social-btn svg {
	width: 15px;
	height: 15px;
	transition: transform 0.25s ease;
}

.yn-social-btn:hover {
	background-color: #1B449C !important;
	color: #ffffff !important;
	transform: translateY(-2px) scale(1.1);
	box-shadow: 0 4px 12px rgba(27, 68, 156, 0.25);
}

.yn-social-btn:hover svg {
	transform: scale(1.1);
}

/* ── Team Members Mobile Responsive Optimization ── */
@media (max-width: 767px) {
	.yn-team-wrapper {
		width: 100% !important;
	}
	.yn-team-wrapper .yn-team-grid {
		width: 100% !important;
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}
	.yn-team-wrapper .yn-team-grid-item {
		width: 100% !important;
		display: flex !important;
		justify-content: center !important;
	}
	.yn-team-wrapper .yn-team-card {
		width: 100% !important;
		max-width: 100% !important;
		min-height: 580px;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.yn-team-wrapper .yn-team-img {
		width: 100% !important;
		flex: 1 1 auto !important;
		min-height: 0 !important;
	}
	.yn-team-wrapper .yn-team-img img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: top center !important;
	}
	.yn-team-wrapper .yn-team-info {
		width: 100% !important;
		padding: 20px 18px !important;
		margin-top: auto !important;
		flex-shrink: 0 !important;
	}
	.yn-team-wrapper .yn-team-card .yn-team-name {
		font-size: 20px !important;
	}
	.yn-team-wrapper .yn-team-card .yn-team-pos {
		font-size: 13px !important;
	}
}

/* ==========================================================================
   6. CAREERS PAGE (DARK THEME & SMOOTH FRONTPAGE-STYLE ANIMATIONS)
   ========================================================================== */

/* Overall Page Background for Careers */
body.page-id-30,
.yn-careers-wrapper {
	background-color: #060b13 !important;
	color: #f0f4fa !important;
}

/* Section Tag / Subtitle (Yellow accent) */
.yn-badge-tag {
	color: #ffdc03 !important;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.15em !important;
	text-transform: uppercase !important;
	margin-bottom: 12px !important;
	display: inline-block !important;
}

/* Main Section Heading */
.yn-section-title {
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 900 !important;
	color: #ffffff !important;
	letter-spacing: -0.5px !important;
	margin-bottom: 30px !important;
}

.yn-section-title .yn-dot {
	color: #ffdc03 !important;
}

/* ── Job Postings Accordion / Cards ────────────────────────────────────── */
.yn-job-card {
	background: #0d1726 !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 12px !important;
	margin-bottom: 14px !important;
	overflow: hidden !important;
	transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
	cursor: pointer !important;
}

.yn-job-card:hover {
	transform: translateY(-3px) !important;
	border-color: rgba(255, 220, 3, 0.4) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 25px rgba(27, 68, 156, 0.2) !important;
}

.yn-job-header {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 22px 28px !important;
	user-select: none !important;
}

.yn-job-main {
	flex: 1 !important;
	padding-right: 20px !important;
}

.yn-job-title {
	color: #ffffff !important;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	margin: 0 0 10px 0 !important;
	transition: color 0.3s ease !important;
}

.yn-job-card:hover .yn-job-title {
	color: #ffdc03 !important;
}

/* Badges / Pills */
.yn-job-badges {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	flex-wrap: wrap !important;
}

.yn-badge-dept {
	background: rgba(27, 68, 156, 0.35) !important;
	color: #60a5fa !important;
	border: 1px solid rgba(96, 165, 250, 0.25) !important;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	padding: 3px 10px !important;
	border-radius: 4px !important;
}

.yn-badge-type {
	background: #ffdc03 !important;
	color: #080d1a !important;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	padding: 3px 10px !important;
	border-radius: 4px !important;
}

.yn-badge-loc {
	background: rgba(255, 255, 255, 0.06) !important;
	color: #94a3b8 !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	padding: 3px 10px !important;
	border-radius: 4px !important;
}

/* Plus / Close Icon */
.yn-job-icon {
	width: 32px !important;
	height: 32px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #ffdc03 !important;
	font-size: 22px !important;
	font-weight: 400 !important;
	transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.3s ease !important;
}

.yn-job-card.is-open .yn-job-icon {
	transform: rotate(45deg) !important;
	color: #ffffff !important;
}

/* Accordion Collapsible Body */
.yn-job-body {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
	padding: 0 28px;
}

.yn-job-card.is-open .yn-job-body {
	max-height: 600px !important;
	opacity: 1 !important;
	padding: 0 28px 24px 28px !important;
	border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
	margin-top: 6px !important;
	padding-top: 18px !important;
}

.yn-job-desc {
	color: rgba(240, 244, 250, 0.72) !important;
	font-size: 14px !important;
	line-height: 1.7 !important;
	margin-bottom: 16px !important;
}

.yn-job-apply-btn {
	background: #ffdc03 !important;
	color: #080d1a !important;
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	padding: 10px 24px !important;
	border-radius: 50px !important;
	display: inline-flex !important;
	align-items: center !important;
	text-decoration: none !important;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.yn-job-apply-btn:hover {
	background: #ffffff !important;
	color: #1B449C !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 18px rgba(255, 220, 3, 0.3) !important;
}

/* ── Why Work at UPG / Benefits Grid ───────────────────────────────────── */
.yn-benefits-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 20px !important;
	margin-top: 30px !important;
}

.yn-benefit-card {
	background: #0d1726 !important;
	border: 1px solid rgba(255, 255, 255, 0.07) !important;
	border-radius: 14px !important;
	padding: 32px 26px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
	cursor: default !important;
}

.yn-benefit-card:hover {
	transform: translateY(-6px) scale(1.02) !important;
	border-color: rgba(255, 220, 3, 0.4) !important;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 25px rgba(27, 68, 156, 0.25) !important;
}

.yn-benefit-icon {
	font-size: 32px !important;
	margin-bottom: 16px !important;
	display: inline-block !important;
	transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.yn-benefit-card:hover .yn-benefit-icon {
	transform: scale(1.2) rotate(6deg) !important;
}

.yn-benefit-text {
	color: #e2e8f0 !important;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.6 !important;
	margin: 0 !important;
}

/* Responsive adjustments */
@media (max-width: 991px) {
	.yn-benefits-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 767px) {
	.yn-benefits-grid {
		grid-template-columns: 1fr !important;
	}
	.yn-job-header {
		padding: 18px 20px !important;
	}
	.yn-job-body {
		padding: 0 20px !important;
	}
	.yn-job-card.is-open .yn-job-body {
		padding: 0 20px 20px 20px !important;
	}
}

/* ==========================================================================
   7. HIDE SCROLLBAR (CLEAN MINIMAL VIEW WHILE MAINTAINING SCROLL)
   ========================================================================== */
html,
body {
	scrollbar-width: none !important; /* Firefox */
	-ms-overflow-style: none !important; /* IE and Edge */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
	display: none !important; /* Chrome, Safari, Opera */
	width: 0 !important;
	height: 0 !important;
	background: transparent !important;
}

/* ==========================================================================
   8. BACK TO TOP (ONTOP) BUTTON
   ========================================================================== */
.yn-back-to-top {
	position: fixed !important;
	bottom: 35px !important;
	right: 35px !important;
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	background-color: #ffdc03 !important; /* Brand Yellow */
	color: #1B449C !important; /* Brand Blue */
	border: 2px solid rgba(255, 255, 255, 0.6) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	z-index: 99999 !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 15px rgba(255, 220, 3, 0.3) !important;
	transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transform: translateY(20px) scale(0.85) !important;
	pointer-events: none !important;
	outline: none !important;
	padding: 0 !important;
}

.yn-back-to-top svg {
	display: block !important;
	transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Visible State on Scroll */
.yn-back-to-top.is-visible {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0) scale(1) !important;
	pointer-events: auto !important;
}

/* Hover State */
.yn-back-to-top:hover {
	background-color: #1B449C !important;
	color: #ffdc03 !important;
	border-color: #ffdc03 !important;
	transform: translateY(-5px) scale(1.08) !important;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 20px rgba(27, 68, 156, 0.4) !important;
}

.yn-back-to-top:hover svg {
	transform: translateY(-2px) !important;
}

/* Active / Click State */
.yn-back-to-top:active {
	transform: translateY(-2px) scale(0.95) !important;
}

/* Mobile Adjustment */
@media (max-width: 767px) {
	.yn-back-to-top {
		bottom: 25px !important;
		right: 25px !important;
		width: 42px !important;
		height: 42px !important;
	}
	.yn-back-to-top svg {
		width: 18px !important;
		height: 18px !important;
	}
}

/* ==========================================================================
   9. FLOATING OVERLAY SCROLLBAR (ZERO CONTAINER LAYOUT SHIFT)
   ========================================================================== */
.yn-overlay-scrollbar {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	width: 14px !important;
	height: 100vh !important;
	z-index: 999998 !important;
	pointer-events: auto !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.3s !important;
}

/* Show when mouse moves near right edge or while scrolling */
.yn-overlay-scrollbar.is-active {
	opacity: 1 !important;
	visibility: visible !important;
}

.yn-scrollbar-thumb {
	position: absolute !important;
	right: 3px !important;
	width: 6px !important;
	border-radius: 10px !important;
	background: rgba(255, 220, 3, 0.75) !important; /* Brand Yellow accent */
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.35) !important;
	cursor: grab !important;
	transition: width 0.2s ease, background-color 0.2s ease, right 0.2s ease !important;
}

.yn-scrollbar-thumb:hover,
body.yn-scrollbar-dragging .yn-scrollbar-thumb {
	width: 9px !important;
	right: 2px !important;
	background: #ffdc03 !important;
	box-shadow: 0 0 14px rgba(255, 220, 3, 0.6) !important;
	cursor: grabbing !important;
}

body.yn-scrollbar-dragging {
	user-select: none !important;
	-webkit-user-select: none !important;
}

/* ==========================================================================
   10. LANGUAGE SWITCHER (ENG / KH) TO THE LEFT OF CTA BUTTON
   ========================================================================== */
.yn-nav-right-area {
	display: inline-flex !important;
	align-items: center !important;
	gap: 12px !important;
}

.yn-nav-btn-pos-push_right .yn-nav-right-area {
	margin-left: auto !important;
}

.yn-lang-switcher {
	display: inline-flex !important;
	align-items: center !important;
	padding: 3px 5px !important;
	border-radius: 8px !important;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
	user-select: none !important;
	cursor: pointer !important;
}

.yn-lang-btn {
	background: transparent !important;
	border: none !important;
	outline: none !important;
	text-decoration: none !important;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px !important;
	padding: 5px 11px !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
}

.yn-lang-sep {
	opacity: 0.35 !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	margin: 0 1px !important;
	line-height: 1 !important;
}

/* 10a. Transparent Top Header (Home Page Top) */
body.home .yn-sticky-header:not(.yn-header-scrolled) .yn-lang-switcher {
	background: rgba(255, 255, 255, 0.15) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
}

body.home .yn-sticky-header:not(.yn-header-scrolled) .yn-lang-btn {
	color: rgba(255, 255, 255, 0.85) !important;
}

body.home .yn-sticky-header:not(.yn-header-scrolled) .yn-lang-btn:hover {
	color: #ffffff !important;
}

body.home .yn-sticky-header:not(.yn-header-scrolled) .yn-lang-btn.is-active {
	background: #ffffff !important;
	color: #1B449C !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

body.home .yn-sticky-header:not(.yn-header-scrolled) .yn-lang-sep {
	color: rgba(255, 255, 255, 0.6) !important;
}

/* 10b. Scrolled (Yellow Header) & Inner Pages */
.yn-header-scrolled .yn-lang-switcher,
body:not(.home) .yn-sticky-header .yn-lang-switcher {
	background: rgba(255, 220, 3, 0.08) !important;
	border: 1.5px solid #ffdc03 !important;
}

.yn-header-scrolled .yn-lang-btn,
body:not(.home) .yn-sticky-header .yn-lang-btn {
	color: #1B449C !important;
}

.yn-header-scrolled .yn-lang-btn:hover,
body:not(.home) .yn-sticky-header .yn-lang-btn:hover {
	color: #0e2d6b !important;
}

.yn-header-scrolled .yn-lang-btn.is-active,
body:not(.home) .yn-sticky-header .yn-lang-btn.is-active {
	background: #1B449C !important;
	color: #ffffff !important;
	box-shadow: 0 2px 8px rgba(27, 68, 156, 0.25) !important;
}

.yn-header-scrolled .yn-lang-sep,
body:not(.home) .yn-sticky-header .yn-lang-sep {
	color: rgba(27, 68, 156, 0.4) !important;
}

/* Mobile responsive */
@media (max-width: 1023px) {
	.yn-nav-right-area {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 14px !important;
		margin-top: 15px !important;
		width: 100% !important;
	}
	.yn-mob-type-fullscreen .yn-lang-switcher {
		background: rgba(255, 220, 3, 0.1) !important;
		border: 1.5px solid #ffdc03 !important;
		border-radius: 8px !important;
	}
	.yn-mob-type-fullscreen .yn-lang-btn {
		color: #1B449C !important;
		font-size: 13px !important;
		padding: 7px 14px !important;
	}
	.yn-mob-type-fullscreen .yn-lang-btn.is-active {
		background: #1B449C !important;
		color: #ffffff !important;
	}
}
/* ==========================================================================
   Scroll Reveal / Parallax Animation for Team Cards
   ========================================================================== */
.yn-team-card {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.yn-team-card.yn-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Ensure hover transforms still work after reveal */
.yn-team-card.yn-in-view:hover {
    transform: translateY(-5px); /* standard hover lift */
}