/* ==========================================================================
   Little Ayub – "Our Little Beginning" widget
   All selectors are scoped under .la-beg to avoid theme / widget conflicts.
   Elementor controls override the defaults below through CSS variables and
   {{WRAPPER}}-scoped rules, so these values are only the baseline design.
   ========================================================================== */

.la-beg {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
	padding: 80px 40px 90px;
	background-color: #FBFAF2;
	color: #1E5A4C;
}

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

.la-beg__inner {
	position: relative;
	z-index: 1;
	max-width: 1240px;
	margin: 0 auto;
}

/* ---------------- Header ---------------- */

.la-beg__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 1060px;
	margin: 0 auto 64px;
	text-align: center;
}

.la-beg__logo {
	line-height: 0;
	margin-bottom: 22px;
	color: #6CA13F;
}

.la-beg__logo > img,
.la-beg__logo > svg {
	display: block;
	width: 54px;
	max-width: 100%;
	height: auto;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.la-beg__label {
	margin: 0 0 14px;
	padding: 0;
	font-family: "Nunito", "Segoe UI", sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 3px;
	line-height: 1.4;
	text-transform: uppercase;
	color: #1D4E47;
}

.la-beg__label-line {
	display: block;
	width: 56px;
	height: 2px;
	margin: 0 auto 34px;
	border-radius: 2px;
	background-color: #1D4E47;
}

.la-beg__heading {
	margin: 0 0 26px;
	padding: 0;
	font-family: "Grandstander", "Comic Neue", "Trebuchet MS", sans-serif;
	font-size: 64px;
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.5px;
	color: #0F4A3C;
}

.la-beg__hl {
	--la-ul-width: 102%;
	--la-ul-thickness: 6px;
	--la-ul-bottom: -0.02em;
	--la-ul-left: -1%;
	position: relative;
	display: inline-block;
	white-space: nowrap;
	isolation: isolate;
}

.la-beg__hl-text {
	position: relative;
	z-index: 1;
}

.la-beg__hl-line {
	position: absolute;
	left: var(--la-ul-left);
	bottom: var(--la-ul-bottom);
	z-index: 0;
	width: var(--la-ul-width);
	height: 0.3em;
	overflow: visible;
	color: #F5B800;
	pointer-events: none;
}

.la-beg__hl-line path {
	fill: none;
	stroke: currentColor;
	stroke-width: var(--la-ul-thickness);
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.la-beg__desc {
	max-width: 920px;
	margin: 0 auto;
	font-family: "Nunito", "Segoe UI", sans-serif;
	font-size: 21px;
	line-height: 1.58;
	color: #1E5A4C;
}

.la-beg__desc p {
	margin: 0;
}

.la-beg__desc p + p {
	margin-top: 0.8em;
}

/* ---------------- Steps grid ----------------
   Layout is driven by variables so Elementor's responsive "Layout" control
   can switch between row / two+one / stacked at the real site breakpoints. */

.la-beg__steps {
	--la-art-h: 190px;
	--la-arrow-w: 170px;
	--la-diag-offset: 22%;

	/* row layout (default / desktop) */
	--la-cols: minmax(0, 1fr) var(--la-arrow-w) minmax(0, 1fr) var(--la-arrow-w) minmax(0, 1fr);
	--la-areas: "s1 a1 s2 a2 s3";
	--la-a1-h: block;
	--la-a1-v: none;
	--la-a1-d: none;
	--la-a2-h: block;
	--la-a2-v: none;
	--la-a2-d: none;
	--la-a1-cell: var(--la-art-h);
	--la-a2-cell: var(--la-art-h);
	--la-a2-justify: center;

	display: grid;
	grid-template-columns: var(--la-cols);
	grid-template-areas: var(--la-areas);
	align-items: start;
	justify-items: center;
	column-gap: 16px;
	row-gap: 20px;
	position: relative;
}

.la-beg__step {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 360px;
	min-width: 0;
	text-align: center;
}

.la-beg__step--1 { grid-area: s1; }
.la-beg__step--2 { grid-area: s2; }
.la-beg__step--3 { grid-area: s3; }

/* Illustration area */
.la-beg__art {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--la-art-h);
	margin-bottom: 18px;
}

.la-beg__figure {
	position: relative;
	flex: 0 0 auto;
	width: 190px;
	height: 150px;
	max-width: 100%;
}

.la-beg__step--1 .la-beg__figure { color: #E2524E; }
.la-beg__step--2 .la-beg__figure { color: #F4B400; }
.la-beg__step--3 .la-beg__figure { color: #5F9B3A; }

.la-beg__step--1 { --la-blob-color: rgba(242, 160, 160, 0.42); }
.la-beg__step--2 { --la-blob-color: rgba(255, 220, 105, 0.40); }
.la-beg__step--3 { --la-blob-color: rgba(176, 210, 128, 0.42); }

/* Soft watercolor wash behind each illustration */
.la-beg__blob {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 0;
	display: block;
	width: 290px;
	height: 185px;
	max-width: 125vw;
	transform: translate(-50%, -50%);
	border-radius: 48% 52% 45% 55% / 55% 48% 52% 45%;
	background-image:
		radial-gradient(ellipse at 50% 50%, var(--la-blob-color) 0%, var(--la-blob-color) 40%, transparent 71%),
		radial-gradient(ellipse at 28% 42%, var(--la-blob-color) 0%, transparent 58%),
		radial-gradient(ellipse at 74% 60%, var(--la-blob-color) 0%, transparent 56%);
	filter: blur(5px);
	pointer-events: none;
}

.la-beg__blob::before {
	content: "";
	position: absolute;
	inset: 10% 6% 12% 8%;
	border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%;
	background: radial-gradient(ellipse at 60% 40%, var(--la-blob-color) 0%, transparent 66%);
}

.la-beg__figure-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	transform-origin: 50% 50%;
	backface-visibility: hidden;
}

.la-beg__figure-inner > img,
.la-beg__figure-inner > svg {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: contain;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Step text */
.la-beg__step-heading {
	margin: 0 0 14px;
	padding: 0;
	font-family: "Grandstander", "Comic Neue", "Trebuchet MS", sans-serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	color: #0F4A3C;
}

.la-beg__step-desc {
	margin: 0 auto;
	padding: 0;
	max-width: 14em;
	font-family: "Nunito", "Segoe UI", sans-serif;
	font-size: 20px;
	line-height: 1.5;
	color: #1E5A4C;
}

/* ---------------- Arrows ---------------- */

.la-beg__arrow {
	--la-arrow-thickness: 2.5px;
	--la-dash: 7px;
	--la-gap: 7px;
	--la-arrow-scale: 1;
	--la-arrow-y: 0px;
	--la-arrow-dur: 2.4s;
	--la-arrow-dir: normal;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: start;
	width: 100%;
	min-width: 0;
	color: #6A9F3E;
	transform: translateY(var(--la-arrow-y));
	pointer-events: none;
}

.la-beg__arrow--1 {
	grid-area: a1;
	height: var(--la-a1-cell);
}

.la-beg__arrow--2 {
	grid-area: a2;
	height: var(--la-a2-cell);
	justify-content: var(--la-a2-justify);
}

.la-beg__arrow-svg {
	display: none;
	flex: 0 0 auto;
	height: auto;
	max-width: 100%;
	overflow: visible;
}

.la-beg__arrow--1 .la-beg__arrow-svg--h { display: var(--la-a1-h); }
.la-beg__arrow--1 .la-beg__arrow-svg--v { display: var(--la-a1-v); }
.la-beg__arrow--1 .la-beg__arrow-svg--d { display: var(--la-a1-d); }
.la-beg__arrow--2 .la-beg__arrow-svg--h { display: var(--la-a2-h); }
.la-beg__arrow--2 .la-beg__arrow-svg--v { display: var(--la-a2-v); }
.la-beg__arrow--2 .la-beg__arrow-svg--d { display: var(--la-a2-d); }

.la-beg__arrow-svg--h {
	width: calc(100% * var(--la-arrow-scale));
}

.la-beg__arrow-svg--v {
	width: calc(44px * var(--la-arrow-scale));
	margin: 4px 0;
}

.la-beg__arrow-svg--d {
	width: calc(130px * var(--la-arrow-scale));
	margin-right: var(--la-diag-offset);
}

.la-beg__arrow-line,
.la-beg__arrow-head {
	fill: none;
	stroke: currentColor;
	stroke-width: var(--la-arrow-thickness);
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.la-beg__arrow-line {
	stroke-dasharray: var(--la-dash) var(--la-gap);
	stroke-dashoffset: 0;
}

/* Snake-like flow: dashes travel along the fixed curved path */
.la-beg__arrow.is-animated .la-beg__arrow-line {
	animation: la-beg-flow var(--la-arrow-dur) linear infinite;
	animation-direction: var(--la-arrow-dir);
	will-change: stroke-dashoffset;
}

@keyframes la-beg-flow {
	from { stroke-dashoffset: 0; }
	to   { stroke-dashoffset: calc((var(--la-dash) + var(--la-gap)) * -4); }
}

/* ---------------- Icon animations ---------------- */

.la-beg__step {
	--la-icon-dur: 2.8s;
	--la-icon-delay: 0s;
	--la-icon-scale: 1.08;
	--la-icon-ease: ease-in-out;
}

.la-beg__step--anim-zoom .la-beg__figure-inner {
	animation: la-beg-zoom var(--la-icon-dur) var(--la-icon-ease) var(--la-icon-delay) infinite both;
	will-change: transform;
}

.la-beg__step--anim-grow .la-beg__figure-inner {
	transform-origin: 50% 95%;
	animation: la-beg-grow var(--la-icon-dur) var(--la-icon-ease) var(--la-icon-delay) infinite both;
	will-change: transform;
}

@keyframes la-beg-zoom {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(var(--la-icon-scale)); }
}

@keyframes la-beg-grow {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(var(--la-icon-scale)); }
}

/* Paused while off-screen (set by script.js) */
.la-beg--paused .la-beg__figure-inner,
.la-beg--paused .la-beg__arrow-line {
	animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
	.la-beg--respect-motion .la-beg__figure-inner,
	.la-beg--respect-motion .la-beg__arrow-line {
		animation: none !important;
	}
}

/* ---------------- Decorations ---------------- */

.la-beg__decos {
	position: absolute;
	inset: 0;
	z-index: 0;
	color: #6CA13F;
	pointer-events: none;
}

.la-beg__deco {
	position: absolute;
	display: block;
	width: 40px;
	line-height: 0;
	transform-origin: 50% 50%;
	pointer-events: none;
}

.la-beg__deco > img,
.la-beg__deco > svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* ---------------- Fallback responsive layout ----------------
   Only used if Elementor's generated CSS is unavailable; the "Layout"
   control normally overrides these at your real breakpoints. */

@media (max-width: 1024px) {
	.la-beg { padding: 64px 28px 72px; }
	.la-beg__steps {
		--la-art-h: 170px;
		--la-arrow-w: 110px;
		--la-cols: minmax(0, 1fr) var(--la-arrow-w) minmax(0, 1fr);
		--la-areas: "s1 a1 s2" "a2 a2 a2" "s3 s3 s3";
		--la-a2-h: none;
		--la-a2-d: block;
		--la-a2-cell: auto;
		--la-a2-justify: flex-end;
	}
	.la-beg__heading { font-size: 50px; }
}

@media (max-width: 767px) {
	.la-beg { padding: 52px 18px 60px; }
	.la-beg__steps {
		--la-cols: minmax(0, 1fr);
		--la-areas: "s1" "a1" "s2" "a2" "s3";
		--la-a1-h: none;
		--la-a1-v: block;
		--la-a2-d: none;
		--la-a2-v: block;
		--la-a1-cell: auto;
		--la-a2-justify: center;
		column-gap: 0;
	}
	.la-beg__heading { font-size: 38px; }
	.la-beg__desc { font-size: 16px; }
}