/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 04 2026 | 02:47:09 */
/* ==========================================================================
   Hero (First View)
   ========================================================================== */
.hero {
	position: relative;
	width: 100%;
	background-color: #fff;
}

.hero__inner {
	position: relative;
	z-index: 3;
	max-width: 1400px;
	padding: clamp(50px, 6vw, 90px) clamp(24px, 5vw, 80px) 0;
}

.hero__title {
	font-size: clamp(36px, 6.2vw, 78px);
	font-weight: 900;
	line-height: 1.25;
	margin: 0 0 28px;
	letter-spacing: 0.02em;
	width: fit-content;
	background: linear-gradient(
		90deg,
		#02498B 0%,
		#B7C3DD 11%,
		#02498B 18%,
		#006DD2 53%,
		#02498B 99%
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.hero__title-strong,
.hero__title-light {
	color: inherit;
	-webkit-text-fill-color: inherit;
}

.hero__title-light {
	font-weight: 700;
}

.hero__subtitle {
	font-size: clamp(15px, 1.4vw, 20px);
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0 0 44px;
	width: fit-content;
	background: linear-gradient(
		90deg,
		#1B77E7 0%,
		#02498B 20%,
		#6167AB 47%,
		#02498B 70%,
		#1B77E7 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	min-width: 240px;
	padding: 18px 26px;
	background: linear-gradient(90deg, #02498B 0%, #1B77E7 100%);
	color: #fff;
	text-decoration: none;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.18em;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.hero__cta:hover {
	filter: brightness(0.92);
	color: #fff;
	transform: translateY(-2px);
}

/* Replace the → text with the same SVG arrow icon used elsewhere (white) */
.hero__cta-arrow {
	display: inline-block;
	width: 18px;
	height: 18px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cline%20x1%3D%275%27%20y1%3D%2712%27%20x2%3D%2719%27%20y2%3D%2712%27%2F%3E%3Cpolyline%20points%3D%2712%205%2019%2012%2012%2019%27%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	font-size: 0;
	color: transparent;
}

.hero__bg {
	position: relative;
	z-index: 1;
	width: 100vw;
	left: 50%;
	margin-left: -50vw;
	margin-top: -30px;
	overflow: hidden;
}

.hero__bg img,
.hero__bg video {
	display: block;
	width: 100%;
	height: auto;
}

/* PC: limit hero video height; crop via object-fit. The focal point is
   parameterised via --hero-video-focus so it can be tweaked later (e.g.
   override to 'center top', '30% center', 'left bottom', etc.). */
@media (min-width: 769px) {
	.hero__bg video {
		max-height: 70vh;
		object-fit: cover;
		object-position: var(--hero-video-focus, center center);
	}
}

.hero__swoosh {
	position: absolute;
	top: 160px;
	right: 0;
	width: 65%;
	max-width: 1100px;
	height: auto;
	z-index: 2;
	pointer-events: none;
    margin-right: 10px;
}

.hero__swoosh path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: hero-swoosh-draw 2.4s cubic-bezier(0.6, 0.05, 0.2, 1) 0.3s forwards;
}

@keyframes hero-swoosh-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__swoosh path {
		animation: none;
		stroke-dashoffset: 0;
	}
}

/* ==========================================================================
   Hero entrance animations — minimal & lightweight
   - Title uses opacity only (transforms on background-clip:text gradients are
     expensive to repaint, so we avoid them on the title)
   - No will-change to keep GPU memory free
   ========================================================================== */
@keyframes hero-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes hero-fade-up {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.hero__title {
	opacity: 0;
	animation: hero-fade 0.7s ease-out 0.2s forwards;
}

.hero__subtitle {
	opacity: 0;
	animation: hero-fade-up 0.6s ease-out 0.6s forwards;
}

.hero__cta {
	opacity: 0;
	animation: hero-fade-up 0.6s ease-out 0.9s forwards;
}

@media (prefers-reduced-motion: reduce) {
	.hero__title,
	.hero__subtitle,
	.hero__cta {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 768px) {
	.hero__inner {
		padding: 56px 24px 0;
	}
	.hero__bg {
		margin-top: -30px;
	}
	.hero__swoosh {
		top: 60px;
		width: 80%;
        margin-right: 10px;
	}
	.hero__cta {
		min-width: 200px;
		padding: 14px 20px;
	}
}