.elementor-widget-skill_experience_new .elementor-widget-container {
	overflow: visible;
}

.sxn,
.sxn *,
.sxn *::before,
.sxn *::after {
	box-sizing: border-box;
}

.sxn {
	--sxn-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--sxn-accent: #f2ee3a;
	--sxn-accent-soft: rgba(242, 238, 58, 0.14);
	--sxn-text: #f4f4f2;
	--sxn-muted: #8f8f8c;
	--sxn-dim: #4a4a48;
	--sxn-body: #b1b1ae;
	--sxn-surface: #111113;
	--sxn-bg: #070708;
	--sxn-line: rgba(255, 255, 255, 0.08);
	--sxn-dot: rgba(255, 255, 255, 0.25);
	--sxn-pad-top: 130px;
	--sxn-gap: 18px;
	--sxn-radius: 24px;
	width: 100%;
	padding-top: var(--sxn-pad-top);
	color: var(--sxn-text);
	font-family: inherit;
}

.sxn-head {
	margin-bottom: 44px;
	max-width: 720px;
}

.sxn-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--sxn-accent);
	font-size: 0.88rem;
	font-weight: 600;
}

.sxn-eyebrow::before {
	content: "";
	width: 26px;
	height: 1.5px;
	background: currentColor;
}

.sxn-eyebrow.is-plain::before {
	content: none;
}

.sxn-title {
	margin: 12px 0 0;
	color: var(--sxn-text);
	font-size: clamp(1.6rem, 2.8vw, 2.3rem);
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: -0.03em;
}

.sxn-fill .w {
	color: var(--sxn-dim);
	transition: color 0.35s ease;
}

.sxn-fill .w.is-on {
	color: var(--sxn-text);
}

.sxn-reveal {
	opacity: 0;
	translate: 0 26px;
	transition: opacity 0.9s var(--sxn-ease), translate 0.9s var(--sxn-ease);
}

.sxn-reveal.is-in {
	opacity: 1;
	translate: 0 0;
}

.sxn-timeline {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sxn-gap);
	margin: 0;
	padding: 0;
	padding-inline-start: 46px;
	list-style: none;
}

.sxn-line {
	position: absolute;
	top: 8px;
	bottom: 8px;
	inset-inline-start: 11px;
	width: 2px;
	border-radius: 2px;
	background: var(--sxn-line);
}

.sxn-progress {
	display: block;
	width: 100%;
	height: calc(var(--p, 0) * 100%);
	border-radius: inherit;
	background: linear-gradient(var(--sxn-accent), color-mix(in srgb, var(--sxn-accent) 20%, transparent));
	box-shadow: 0 0 14px color-mix(in srgb, var(--sxn-accent) 60%, transparent);
}

.sxn-item {
	position: relative;
}

.sxn-dot {
	position: absolute;
	top: 34px;
	inset-inline-start: -42px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--sxn-bg);
	border: 2px solid var(--sxn-dot);
	transition: border-color 0.5s, box-shadow 0.5s, background 0.5s;
}

.sxn-item.is-lit .sxn-dot {
	border-color: var(--sxn-accent);
	background: var(--sxn-accent);
	box-shadow: 0 0 0 6px var(--sxn-accent-soft);
}

.sxn-card {
	padding: 26px 28px;
	border-radius: var(--sxn-radius);
	background: var(--sxn-surface);
	border: 1px solid var(--sxn-line);
}

.sxn-card:hover {
	border-color: color-mix(in srgb, var(--sxn-accent) 35%, transparent);
}

.sxn-tilt {
	--rx: 0deg;
	--ry: 0deg;
	position: relative;
	transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
	transform-style: preserve-3d;
	transition: transform 0.7s var(--sxn-ease), border-color 0.4s, box-shadow 0.5s var(--sxn-ease);
	will-change: transform;
}

.sxn-tilt.is-tilting {
	transition: transform 0.12s linear, border-color 0.4s, box-shadow 0.5s var(--sxn-ease);
}

.sxn-tilt::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.07), transparent 50%);
	opacity: 0;
	transition: opacity 0.4s;
}

.sxn-tilt.is-tilting::after {
	opacity: 1;
}

.sxn-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 12px;
}

.sxn-role {
	margin: 0;
	font-size: 1.08rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.sxn-company {
	margin: 0;
	color: var(--sxn-muted);
	font-size: 0.92rem;
}

.sxn-date {
	flex: none;
	padding: 5px 12px;
	border-radius: 99px;
	background: var(--sxn-accent-soft);
	color: var(--sxn-accent);
	font-size: 0.82rem;
	font-weight: 700;
}

.sxn-text {
	margin: 0;
	color: var(--sxn-body);
	max-width: 54em;
}

@media (max-width: 760px) {
	.sxn-timeline {
		padding-inline-start: 34px;
	}

	.sxn-line {
		inset-inline-start: 7px;
	}

	.sxn-dot {
		inset-inline-start: -34px;
	}

	.sxn-row {
		flex-direction: column;
		gap: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sxn-reveal {
		opacity: 1;
		translate: none;
		transition: none;
	}

	.sxn-timeline {
		--p: 1;
	}

	.sxn-dot {
		border-color: var(--sxn-accent);
		background: var(--sxn-accent);
		box-shadow: 0 0 0 6px var(--sxn-accent-soft);
	}
}