/* =========================================================================
   tweaks.css -- hand-written fixes & additions. Loaded LAST so everything
   here wins the cascade over the vendor mirror + page.css.
   ========================================================================= */

/* ---- base reset (this build has no WordPress/theme stylesheet, so the
   browser default 8px body margin etc. needs resetting by hand) ---- */
html {
	box-sizing: border-box;
	scroll-behavior: smooth;
}
[hidden] {
	display: none !important;
}
*, *::before, *::after {
	box-sizing: inherit;
}
body {
	margin: 0;
	background: #fff;
}
/* The page content's own root div has no border/padding of its own, so a
   top margin on one of its descendants (e.g. a bare browser-default h1
   margin somewhere in the chain) can "escape" and collapse with this
   element's margin, showing up as blank space ABOVE it -- between the
   sticky header and the hero -- rather than inside it. flow-root opens a
   new block formatting context that contains any such collapse, with no
   other visual side effects. */
.elementor.elementor-23184 {
	display: flow-root;
}

/* ---- self-hosted brand + chart fonts (mirrors the theme's own
   @font-face block, normally emitted by the WordPress theme header) ---- */
@font-face {
	font-family: "TTHoves";
	src: url("../fonts/TTHoves-Regular.ttf") format("truetype");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "TTHoves";
	src: url("../fonts/TTHoves-Medium.ttf") format("truetype");
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "TTHoves";
	src: url("../fonts/TTHoves-Light.ttf") format("truetype");
	font-weight: 300;
	font-display: swap;
}
@font-face {
	font-family: "Plus Jakarta Sans";
	src: url("../fonts/PlusJakartaSans.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Plus Jakarta Sans";
	src: url("../fonts/PlusJakartaSans.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "Plus Jakarta Sans";
	src: url("../fonts/PlusJakartaSans.woff2") format("woff2");
	font-weight: 600;
	font-display: swap;
}
@font-face {
	font-family: "Plus Jakarta Sans";
	src: url("../fonts/PlusJakartaSans.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}
body.fintech-overview-page {
	font-family: "TTHoves", sans-serif;
}

/* ---- hero background video: Elementor normally sizes this element with
   JS (frontend.js) so it always covers its container regardless of the
   video's native aspect ratio; without that JS it falls back to intrinsic
   size, leaving gaps. width/height:100% + the vendor's own object-fit:cover
   and 50%/50% centering reproduces the same "always cover" result. ---- */
.elementor-background-video-hosted {
	width: 100%;
	height: 100%;
}

/* =========================================================================
   Native audio player (replaces the html5-audio-player-pro / Plyr widget)
   Palette matches the source player's own skin settings.
   ========================================================================= */
.fintech-audio-player {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	background: #47755e;
	color: #fff;
	border-radius: 30px;
	padding: 10px 20px 10px 10px;
}
.fap-play, .fap-mute {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: #1b8f45;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.2s ease;
}
.fap-play:hover, .fap-mute:hover {
	background: #afd4e4;
	color: #195236;
}
.fap-play svg, .fap-mute svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}
.fap-mute {
	width: 32px;
	height: 32px;
	background: transparent;
}
.fap-mute svg {
	width: 20px;
	height: 20px;
}
.fap-volume {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
}
.fap-volume-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 70px;
	height: 4px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.3);
	cursor: pointer;
}
.fap-volume-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	transition: background-color 0.2s ease;
}
.fap-volume-slider::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	transition: background-color 0.2s ease;
}
.fap-volume-slider::-moz-range-track {
	height: 4px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.3);
}
.fap-volume-slider:hover::-webkit-slider-thumb,
.fap-volume-slider:focus-visible::-webkit-slider-thumb {
	background: #afd4e4;
}
.fap-volume-slider:hover::-moz-range-thumb,
.fap-volume-slider:focus-visible::-moz-range-thumb {
	background: #afd4e4;
}
@media (max-width: 480px) {
	.fap-volume-slider {
		width: 44px;
	}
}
.fap-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.fap-progress {
	position: relative;
	height: 6px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.3);
	cursor: pointer;
}
.fap-progress-bar {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0%;
	border-radius: 3px;
	background: #fff;
}
.fap-time {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.85);
	display: flex;
	gap: 4px;
}

/* =========================================================================
   YouTube facade (community section video)
   ========================================================================= */
.elementor-video[data-youtube-facade] {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000 url("../img/youtube-thumb-Bu41JztsehM.jpg") center/cover;
	border-radius: inherit;
	overflow: hidden;
	cursor: pointer;
}
.elementor-video[data-youtube-facade] iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.yt-facade-play {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.25);
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.yt-facade-play svg {
	width: 68px;
	height: 48px;
}

/* =========================================================================
   Carousel: only .e-n-carousel-arrow-* CSS custom properties are supplied
   by page.css -- the actual slide sizing/translate is applied inline by
   main.js, this just keeps things sane before JS finishes on first paint.
   ========================================================================= */
.e-n-carousel.swiper {
	overflow: hidden;
}
.e-n-carousel .swiper-wrapper {
	will-change: transform;
}
.swiper-pagination-bullet {
	cursor: pointer;
}

/* =========================================================================
   Icon-font swap: the source used Elementor's own "eicon-chevron-*" font
   for carousel arrows; this rebuild self-hosts Font Awesome only (fewer
   fonts to ship) and swaps those two glyphs for the equivalent fa-chevron.
   ========================================================================= */
.elementor-swiper-button i.fas {
	font-size: inherit;
}

/* =========================================================================
   Carousel arrows + pagination -- the widget's own --e-n-carousel-dots-*
   position custom properties are never set per-element in the source (they
   only get real values when Elementor's editor UI is used to move the dots),
   so they resolve to "auto" and the dots end up pinned to the default
   static position (bottom-left) instead of centered. Force perfectly round
   arrow buttons and a centered, evenly-gapped dot row instead of relying on
   that fallback chain.
   ========================================================================= */
.elementor-widget-n-carousel .elementor-swiper-button-prev,
.elementor-widget-n-carousel .elementor-swiper-button-next {
	width: 40px;
	height: 40px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	border-radius: 50% !important;
}
.elementor-widget-n-carousel .swiper-pagination {
	position: static !important;
	inset: auto !important;
	transform: none !important;
	width: 100%;
	margin-top: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.elementor-widget-n-carousel .swiper-pagination-bullet {
	margin: 0 !important;
}

/* =========================================================================
   Smooth open/close: nested accordion
   The vendor CSS hides closed panels with `display:none`, which can't be
   transitioned, and there's no dedicated "clip" wrapper in this Elementor
   version's accordion markup -- the content div IS the styled .e-con, so
   the override below keeps it laid out (still using its own --display,
   flex or grid) and animates max-height/opacity instead of display.
   ========================================================================= */
.elementor-widget-n-accordion .e-n-accordion-item > .e-con {
	overflow: hidden;
	max-height: 2000px;
	opacity: 1;
	transition: max-height 0.4s ease, opacity 0.3s ease 0.05s;
}
.elementor-widget-n-accordion .e-n-accordion-item:not([open]) > .e-con {
	display: var(--display, flex) !important;
	max-height: 0;
	opacity: 0;
	transition: max-height 0.35s ease, opacity 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
	.elementor-widget-n-accordion .e-n-accordion-item > .e-con {
		transition: none;
	}
}

/* =========================================================================
   Smooth open: nested tabs -- fade + rise the newly active panel in.
   ========================================================================= */
@keyframes e-tab-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}
.elementor-widget-n-tabs .e-n-tabs-content > .e-con.e-tab-fade-in {
	animation: e-tab-fade-in 0.35s ease;
}
.elementor-widget-n-tab-title,
.e-n-tab-title {
	transition: color 0.2s ease, background-color 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
	.elementor-widget-n-tabs .e-n-tabs-content > .e-con.e-tab-fade-in {
		animation: none;
	}
}

/* A plain mouse click still focuses a <button>, which very briefly flashes
   the browser's own default (often black/dark) focus ring before the
   vendor's own `:focus:not(:focus-visible){outline:none}` rule takes over.
   Make both states explicit instead of relying on that timing: no outline
   on click, a deliberate brand-colored ring only for real keyboard nav. */
.e-n-tab-title:focus {
	outline: none;
}
.e-n-tab-title:focus-visible {
	outline: 2px solid #1b8f45;
	outline-offset: 2px;
}

/* On hover, the source design's own icon color swap depends on Elementor's
   own frontend.js setting data-touch-mode (see main.js) -- once wired up it
   swaps to the source's green; this overrides that to the blue accent
   instead, per design feedback. */
.elementor-element-e48317a [data-touch-mode="false"] .e-n-tab-title[aria-selected="false"]:hover {
	--n-tabs-icon-color-hover: #afd4e4 !important;
}

/* =========================================================================
   Anchor offset -- the sticky header would otherwise cover the top of a
   section when jumping to it via the nav links below.
   ========================================================================= */
html {
	scroll-padding-top: 96px;
}

/* =========================================================================
   Site header (hand-built -- doesn't exist in the source's body content
   or page.css, so this reuses the same brand colors/type already
   established by the rest of the page rather than inventing new ones).
   ========================================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid #eceef0;
}
.site-header-inner {
	max-width: 1300px;
	margin: 0 auto;
	padding: 16px 40px;
	display: flex;
	align-items: center;
	gap: 32px;
}
.site-logo {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
}
.site-logo img {
	height: 42px;
	width: auto;
	display: block;
}
.site-nav {
	flex: 0 1 auto;
	display: flex;
	align-items: center;
	gap: 24px;
	margin-left: auto;
}
.site-nav a {
	font-family: "TTHoves", sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: #1a1a1a;
	text-decoration: none;
	white-space: nowrap;
}
.site-nav a:hover {
	color: #1b8f45;
}
a.site-header-cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #1b8f45;
	color: #fff;
	font-family: "TTHoves", sans-serif;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	padding: 12px 22px;
	border-radius: 30px;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}
a.site-header-cta:hover {
	background: #afd4e4;
	color: #195236;
}
a.site-header-cta i {
	font-size: 13px;
	color: inherit;
}
.site-nav-toggle {
	display: none;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
}
.site-nav-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: #1a1a1a;
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.site-nav-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}
.site-nav-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}
.site-nav-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 900px) {
	.site-header-inner {
		padding: 14px 20px;
		gap: 12px;
	}
	.site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		margin: 0;
		background: #fff;
		border-bottom: 1px solid #eceef0;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}
	.site-nav.is-open {
		max-height: 400px;
	}
	.site-nav a {
		padding: 14px 20px;
		border-top: 1px solid #eceef0;
	}
	a.site-header-cta {
		/* nav is absolutely positioned on mobile (out of flow), so this
		   margin is what pushes the cta + burger group to the right */
		margin-left: auto;
		padding: 10px 18px;
		font-size: 13px;
	}
	.site-nav-toggle {
		display: flex;
	}
}

/* =========================================================================
   Site footer (hand-built, same rationale as the header above)
   ========================================================================= */
.site-footer {
	background: #f0eff4;
	padding: 48px 40px;
}
.site-footer-inner {
	max-width: 1300px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 48px;
	flex-wrap: wrap;
}
.site-footer .site-logo img {
	height: 42px;
}
.site-footer-text {
	flex: 1 1 420px;
	margin: 0;
	font-family: "TTHoves", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #1a1a1a;
}
.site-footer-social {
	flex: 0 0 auto;
	display: flex;
	gap: 14px;
}
.site-footer-social a {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: #195236;
	display: flex;
	align-items: center;
	justify-content: center;
}
.site-footer-social a:hover {
	background: #1b8f45;
}
.site-footer-social svg {
	width: 18px;
	height: 18px;
	fill: #fff;
}
@media (max-width: 700px) {
	.site-footer-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
	/* In row layout `flex: 1 1 420px` uses 420px as a target WIDTH. Once the
	   footer switches to a column, flex-basis applies to the (now vertical)
	   main axis instead -- turning that same value into a 420px min-HEIGHT
	   and leaving a large blank gap under the short paragraph. */
	.site-footer-text {
		flex: none;
		width: 100%;
	}
}