/*
 * Apex Events — effects.css
 * Glass cards, red glows, hover effects and the scroll/entrance animations.
 *
 * Purely visual: nothing is added to or removed from the page content. Animations only apply when
 * <html> has the class "apex-fx" (JavaScript on and animations allowed), so the page is fully
 * readable without JavaScript and for visitors who turn animations off.
 *
 * Brand red is var(--brand-red), an Elementor global colour (#E22128).
 */

/* ---------- Hero (Home) ---------- */

/* "Event infrastructure · Crowd control · …" as a glass pill. */
html body .elementor .apex-hero-label {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	opacity: 1;
}

/* "Our services" glass button. */
html body .elementor .apex-hero-button {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .4);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}

html body .elementor .apex-hero-button:hover {
	box-shadow: 0 0 40px rgba(255, 255, 255, .25);
}

/* Play / Pause: a round glass button with an icon. Elementor shows one button at a time (it hides the
   other with an inline style, so "display" here must not use !important). */
html body .elementor .apex-hero-video-controls {
	padding: 0;
	gap: 0;
}

html body .elementor .apex-hero-play,
html body .elementor .apex-hero-pause {
	position: relative;
	width: 48px;
	height: 48px;
	padding: 0 !important;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .25);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	color: #ffffff;
	cursor: pointer;
	transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}

html body .elementor .apex-hero-play:hover,
html body .elementor .apex-hero-pause:hover {
	background: rgba(255, 255, 255, .18);
	border-color: rgba(255, 255, 255, .5);
	transform: scale(1.06);
}

html body .elementor .apex-hero-play:focus-visible,
html body .elementor .apex-hero-pause:focus-visible {
	outline: 2px solid var(--brand-red, #E22128);
	outline-offset: 3px;
}

/* The words "Play" / "Pause" stay in the page for screen readers (the buttons are also labelled
   "Play video" / "Pause video"), but aren't shown. */
html body .elementor .apex-hero-play > *,
html body .elementor .apex-hero-pause > * {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* The icons, drawn in the button's text colour. */
html body .elementor .apex-hero-play::before,
html body .elementor .apex-hero-pause::before {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}

/* Play: a triangle, nudged right so it looks centred. */
html body .elementor .apex-hero-play::before {
	left: 3px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 1.5v13l11-6.5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 1.5v13l11-6.5z'/%3E%3C/svg%3E");
}

/* Pause: two bars. */
html body .elementor .apex-hero-pause::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 1.5h3.5v13H3zM9.5 1.5H13v13H9.5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 1.5h3.5v13H3zM9.5 1.5H13v13H9.5z'/%3E%3C/svg%3E");
}

/* Entrance on load: label, title, text and buttons rise in one after another. */
html.apex-fx body .elementor .apex-hero-label { animation: apex-fx-rise 1s cubic-bezier(.2, .7, .2, 1) .15s both; }
html.apex-fx body .elementor .apex-hero-title { animation: apex-fx-rise 1s cubic-bezier(.2, .7, .2, 1) .30s both; }
html.apex-fx body .elementor .apex-hero-text { animation: apex-fx-rise 1s cubic-bezier(.2, .7, .2, 1) .45s both; }
html.apex-fx body .elementor .apex-hero-actions { animation: apex-fx-rise 1s cubic-bezier(.2, .7, .2, 1) .60s both; }

/* ---------- Statement (Home) ---------- */

html body .elementor .apex-statement-accent {
	text-shadow: 0 0 70px rgba(226, 33, 40, .45);
}

/* ---------- Apex in numbers + Management (Home): drifting red glow behind glass cards ---------- */

html body .elementor .apex-numbers,
html body .elementor .apex-team {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

html body .elementor .apex-numbers::before,
html body .elementor .apex-team::before {
	content: '';
	position: absolute;
	z-index: -1;
	width: 60vw;
	height: 60vw;
	max-width: 820px;
	max-height: 820px;
	right: -15vw;
	top: 10%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(226, 33, 40, .28), transparent 62%);
	animation: apex-fx-drift 18s ease-in-out infinite alternate;
	pointer-events: none;
}

html body .elementor .apex-stat {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	border-radius: 20px;
	padding: 32px 28px;
	flex: 1 1 220px;
	min-width: 0;
}

html body .elementor .apex-stat-number-red {
	text-shadow: 0 0 50px rgba(226, 33, 40, .55);
}

html body .elementor .apex-leader-card {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	border-radius: 24px;
	padding: 40px 36px;
}

/*
 * Management cards with a portrait (an Elementor Image element placed first in the card):
 * portrait on the left, name / role / bio beside it; stacked on phones.
 * Swap a portrait in Elementor: click it inside the card and pick another from the Media Library.
 */
html body .elementor .apex-leader-card:has(> img) {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	column-gap: 32px;
	row-gap: 10px;
	align-content: start;
}

html body .elementor .apex-leader-card > img {
	grid-row: 1 / span 4;
	width: 180px !important;
	height: auto !important;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 22%;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, .15);
	box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .6);
	filter: grayscale(.2);
	transition: filter .6s ease, transform .6s ease;
}

html body .elementor .apex-leader-card:hover > img {
	filter: none;
	transform: translateY(-4px);
}

@media (max-width: 767px) {
	html body .elementor .apex-leader-card:has(> img) {
		grid-template-columns: minmax(0, 1fr);
	}

	html body .elementor .apex-leader-card > img {
		grid-row: auto;
		width: 150px !important;
		margin-bottom: 12px;
	}
}

/* ---------- Red spotlight that follows the mouse (Numbers, Projects, Management) ---------- */

html body .elementor .apex-spotlight {
	position: relative;
	isolation: isolate;
}

/* --apex-mx / --apex-my are set by assets/js/effects.js. */
html body .elementor .apex-spotlight::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	transition: opacity .4s ease;
	background: radial-gradient(600px circle at var(--apex-mx, 50%) var(--apex-my, 50%), rgba(226, 33, 40, .14), transparent 60%);
}

html body .elementor .apex-spotlight:hover::after {
	opacity: 1;
}

/* ---------- Selected projects (Home): rows slide and glow on hover ---------- */

html body .elementor .apex-home-projects article {
	transition: background-color .35s ease, padding-inline-start .35s ease;
}

html body .elementor .apex-home-projects article:hover {
	padding-inline-start: 16px;
}

html body .elementor .apex-home-projects article h3 {
	transition: color .35s ease, text-shadow .35s ease;
}

html body .elementor .apex-home-projects article:hover h3 {
	color: var(--brand-red, #E22128);
	text-shadow: 0 0 30px rgba(226, 33, 40, .35);
}


/*
 * ---------- About Apex Events (Home): split section ----------
 * Full width. Text on the left (on white, with a faint red glow); the scaffolding photo (the Elementor
 * Image at the end of the "about-row") fills the right half to the screen edge with a large curved left
 * edge, continuing the circles of the spiral section above. A thin red arc runs beside the curve, and a
 * dark glass card (built by effects.js, decorative) sits on the photo. While scrolling, effects.js sets
 * --apex-about-s, which zooms the photo inside its (still) curved frame.
 * Swap the photo in Elementor (Navigator > about-photo).
 */

html body .elementor .apex-about:has(> .apex-about-row > img) {
	padding: 0 !important;
	max-width: none !important;
}

html body .elementor .apex-about-row:has(> img) {
	--apex-about-t: 0;
	--apex-about-gutter: max(48px, calc((100% - 1170px) / 2));
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid !important;
	grid-template-columns: var(--apex-about-gutter) minmax(0, 5fr) 72px minmax(0, 6fr);
	grid-template-rows: 1fr auto;
	width: 100% !important;
	max-width: none !important;
	min-height: 660px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	gap: 0 !important;
	background: #fff; /* the faint red glow is drawn by the mask (::after) */
}

/* Text column. */
html body .elementor .apex-about-row:has(> img) > div:first-child {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	max-width: 540px;
	margin: 120px 0 34px;
}

html body .elementor .apex-about-row:has(> img) > span {
	grid-column: 2;
	grid-row: 2;
	justify-self: start;
	margin-bottom: 120px;
}

/* "About Apex Events" label: red, with a short accent line before it. */
html body .elementor .apex-about-row > div > p:first-child {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
	color: var(--brand-red, #E22128) !important;
	opacity: 1 !important;
	font-weight: 600;
}

html body .elementor .apex-about-row > div > p:first-child::before {
	content: '';
	width: 44px;
	height: 2px;
	background: currentColor;
}

/* The paragraph: same scale as the other sections' body text. */
html body .elementor .apex-about-row > div > p:last-child {
	font-size: 17px !important;
	line-height: 1.8 !important;
	font-weight: 300 !important;
	color: #141414 !important;
	opacity: 1 !important;
	letter-spacing: 0 !important;
}

/* "Our projects": an outlined pill with an arrow, filling red on hover. */
html body .elementor .apex-about-row > span {
	border: 0 !important;
	padding: 0 !important;
}

html body .elementor .apex-about-row > span a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 14px 26px;
	border: 1px solid #111;
	border-radius: 999px;
	color: #111 !important;
	text-decoration: none !important;
	background-image: none !important;
	transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease;
}

html body .elementor .apex-about-row > span a::after {
	content: '→';
	transition: transform .35s ease;
}

html body .elementor .apex-about-row > span a:hover,
html body .elementor .apex-about-row > span a:focus-visible {
	background-color: var(--brand-red, #E22128);
	border-color: var(--brand-red, #E22128);
	color: #fff !important;
	box-shadow: 0 14px 34px -12px rgba(226, 33, 40, .6);
}

html body .elementor .apex-about-row > span a:hover::after {
	transform: translateX(4px);
}

/*
 * The photo: right half, to the screen edge, with a large curved left edge (like one of the spiral's
 * rings in the section above). While scrolling it zooms (--apex-about-s, set by effects.js, 1.18 down
 * to 1) using only a GPU transform, so scrolling stays smooth. The curve is NOT cut out of the photo:
 * a still white mask with an oval window (the row's ::after) sits on top of it, so the edge never
 * moves or repaints while the picture zooms underneath. The mask and the red arc span the full
 * width and share the same oval, so they always line up.
 */
html body .elementor .apex-about-row:has(> img) {
	--apex-about-s: 1;
	--apex-about-line: 1;
	--apex-about-rx: 43.3%; /* oval window: horizontal radius (share of the section width) */
	--apex-about-ry: 125%; /* oval window: vertical radius (share of the section height) */
}

html body .elementor .apex-about-row > img {
	grid-column: 4;
	grid-row: 1 / -1;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	min-height: 100%;
	object-fit: cover;
	object-position: 60% 50%;
	border-radius: 0;
	transform: scale(var(--apex-about-s));
	transform-origin: 100% 50%;
	will-change: transform;
}

/* White mask with the oval window (still; above the photo, below the text). */
html body .elementor .apex-about-row:has(> img)::after {
	content: '';
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	align-self: stretch;
	justify-self: stretch;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(640px circle at 0% 100%, rgba(226, 33, 40, .07), transparent 70%),
		radial-gradient(ellipse var(--apex-about-rx) var(--apex-about-ry) at 100% 50%, transparent 99.6%, #fff 100%);
}

/* The text and button sit above the mask. */
html body .elementor .apex-about-row:has(> img) > div:first-child,
html body .elementor .apex-about-row:has(> img) > span {
	position: relative;
	z-index: 2;
}

/*
 * The arc just outside the oval (the row's ::before; same box and oval as the mask): a mostly-black
 * line that turns brand red towards its lower end. The colour is a top-to-bottom gradient, and a
 * ring-shaped mask (the oval, slightly larger) cuts it down to the thin arc.
 */
html body .elementor .apex-about-row:has(> img)::before {
	--apex-about-ring: radial-gradient(ellipse var(--apex-about-rx) var(--apex-about-ry) at 100% 50%,
		transparent 102.2%, #000 102.4%, #000 103.5%, transparent 103.7%);
	content: '';
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	align-self: stretch;
	justify-self: stretch;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 55%, #6b1013 75%, var(--brand-red, #E22128) 100%);
	-webkit-mask-image: var(--apex-about-ring);
	mask-image: var(--apex-about-ring);
}

/* Dark glass card on the photo (built by effects.js; repeats facts already in the text, hidden from
 * screen readers). A solid tint rather than a live blur, so it costs nothing while the photo zooms. */
.apex-about-stat {
	grid-column: 4;
	grid-row: 1 / -1;
	align-self: end;
	justify-self: end;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0 var(--apex-about-gutter) 56px 0;
	padding: 22px 28px;
	border-radius: 20px;
	color: #fff;
	background: linear-gradient(135deg, rgba(20, 20, 20, .82), rgba(10, 10, 10, .7));
	border: 1px solid rgba(255, 255, 255, .16);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .08);
	pointer-events: none;
}

.apex-about-stat strong {
	font-size: 52px;
	line-height: 1;
	font-weight: 300;
	color: var(--brand-red, #E22128);
	text-shadow: 0 0 24px rgba(226, 33, 40, .45);
}

.apex-about-stat span {
	max-width: 150px;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .85);
}

/* ---- Arrival and scroll animation (only when animations are allowed) ---- */

/* The photo fades in on arrival (then keeps zooming with the scroll). */
html.apex-fx-ready .elementor .apex-about-row > img.apex-fx-reveal {
	opacity: 0;
	transform: scale(var(--apex-about-s));
	transition: opacity 1.2s ease;
}

html.apex-fx-ready .elementor .apex-about-row > img.apex-fx-reveal.is-in {
	opacity: 1;
	transform: scale(var(--apex-about-s));
}

/* The red arc is drawn by the scroll: it grows down as you scroll down and retracts as you scroll up. */
html.apex-fx-ready .elementor .apex-about-row:has(> img)::before {
	clip-path: inset(0 0 calc((1 - var(--apex-about-line)) * 100%) 0);
}

/* The glass card rises in. */
html.apex-fx-ready .apex-about-stat {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity .8s ease .6s, transform 1s cubic-bezier(.2, .7, .2, 1) .6s;
}

html.apex-fx-ready .apex-about-stat.is-in {
	opacity: 1;
	transform: none;
}

@media (max-width: 1024px) {
	html body .elementor .apex-about-row:has(> img) {
		grid-template-columns: 40px minmax(0, 1fr) 40px minmax(0, 1fr);
		min-height: 580px;
		--apex-about-rx: 45%;
	}

	html body .elementor .apex-about-row:has(> img) > div:first-child {
		margin-top: 96px;
	}

	html body .elementor .apex-about-row:has(> img) > span {
		margin-bottom: 96px;
	}

	.apex-about-stat {
		margin: 0 24px 32px 0;
		padding: 16px 20px;
	}

	.apex-about-stat strong {
		font-size: 40px;
	}
}

/* Phones: text first, then the photo full width with a curved top edge (no zoom) and the scroll-drawn arc. */
@media (max-width: 767px) {
	html body .elementor .apex-about-row:has(> img) {
		grid-template-columns: 20px minmax(0, 1fr) 20px;
		grid-template-rows: auto auto auto;
		min-height: 0;
	}

	html body .elementor .apex-about-row:has(> img) > div:first-child {
		grid-column: 2;
		margin: 72px 0 28px;
	}

	html body .elementor .apex-about-row:has(> img) > span {
		grid-column: 2;
		margin-bottom: 48px;
	}

	html body .elementor .apex-about-row > img,
	html.apex-fx-ready .elementor .apex-about-row > img.apex-fx-reveal,
	html.apex-fx-ready .elementor .apex-about-row > img.apex-fx-reveal.is-in {
		grid-column: 1 / -1;
		grid-row: 3;
		height: auto !important;
		aspect-ratio: 4 / 3;
		transform: none;
		clip-path: ellipse(130% 92% at 50% 100%);
	}

	html body .elementor .apex-about-row:has(> img)::after {
		display: none;
	}

	/*
	 * The arc runs along the photo's curved top edge: black on the left turning red on the right.
	 * Like a progress bar it always starts at the left end and fills/empties with the scroll
	 * (--apex-about-line, set by effects.js from the photo's position).
	 */
	html body .elementor .apex-about-row:has(> img)::before {
		--apex-about-ring: radial-gradient(ellipse 130% 92% at 50% 100%,
			transparent 101.4%, #000 101.8%, #000 103.2%, transparent 103.6%);
		grid-column: 1 / -1;
		grid-row: 3;
		background: linear-gradient(90deg, #0a0a0a 0%, #1a1a1a 55%, #6b1013 75%, var(--brand-red, #E22128) 100%);
	}

	html.apex-fx-ready .elementor .apex-about-row:has(> img)::before {
		clip-path: inset(0 calc((1 - var(--apex-about-line)) * 100%) 0 0);
	}

	html body .elementor .apex-about-row > div > p:last-child {
		font-size: 16px !important;
	}

	.apex-about-stat {
		grid-column: 1 / -1;
		grid-row: 3;
		justify-self: start;
		margin: 0 0 20px 20px;
		padding: 14px 18px;
		gap: 14px;
	}

	.apex-about-stat strong {
		font-size: 34px;
	}

	.apex-about-stat span {
		font-size: 11px;
	}
}

/* ---------- Our services (Home): padded cards that lift on hover ---------- */

/*
 * The negative side margin equals the padding, so at rest the text lines up with the section heading;
 * the hover panel then has room around the text. The divider line is drawn inside the padding.
 */
html body .elementor .apex-home-service-card {
	position: relative;
	padding: 36px 28px 32px !important;
	margin-inline: -28px;
	border-width: 0 !important;
	border-radius: 20px;
	background-color: transparent;
	transition: transform .4s ease, box-shadow .4s ease, background-color .4s ease;
}

html body .elementor .apex-home-service-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 28px;
	right: 28px;
	height: 1px;
	background: rgba(0, 0, 0, .15);
	transition: background-color .4s ease, left .4s ease, right .4s ease;
}

html body .elementor .apex-home-service-card:hover {
	transform: translateY(-6px);
	background-color: #ffffff;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .05);
}

html body .elementor .apex-home-service-card:hover::before {
	left: 0;
	right: 0;
	height: 3px;
	border-radius: 20px 20px 0 0;
	background: var(--brand-red, #E22128);
}

/* Photo at the top of each card (an Elementor Image element placed first in the card). */
html body .elementor .apex-home-service-card > img {
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 14px;
	margin-bottom: 12px;
	filter: grayscale(.25);
	transition: filter .5s ease;
}

html body .elementor .apex-home-service-card:hover > img {
	filter: none;
}

/* Phones: the section's side padding is 20px, so the card's padding and pull-back match it. */
@media (max-width: 767px) {
	html body .elementor .apex-home-service-card {
		padding-inline: 20px !important;
		margin-inline: -20px;
	}

	html body .elementor .apex-home-service-card::before {
		left: 20px;
		right: 20px;
	}
}

/* ---------- Hire & supply (Home): product rows ---------- */

html body .elementor .apex-home-product-list > * {
	display: flex;
	align-items: baseline;
	gap: 18px;
	min-width: 0;
	padding-block: 22px !important;
	transition: color .3s ease, padding-inline-start .35s ease;
}

/* The number ("01") as a fixed-width red label, so every product name starts at the same point. */
html body .elementor .apex-home-product-list > * span {
	flex: 0 0 30px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2px;
	color: var(--brand-red, #E22128);
	font-variant-numeric: tabular-nums;
}

/* A red arrow slides in on hover. */
html body .elementor .apex-home-product-list > *::after {
	content: '\2192';
	margin-inline-start: auto;
	padding-inline-start: 12px;
	color: var(--brand-red, #E22128);
	opacity: 0;
	transform: translateX(-10px);
	transition: opacity .35s ease, transform .35s ease;
}

html body .elementor .apex-home-product-list > *:hover {
	padding-inline-start: 8px;
}

html body .elementor .apex-home-product-list > *:hover::after {
	opacity: 1;
	transform: none;
}

/* Red "Supply · Install · Support · UAE-wide" strip. */
html body .elementor .apex-promise-strip {
	border-radius: 20px;
	box-shadow: 0 30px 80px -30px rgba(226, 33, 40, .7);
}

/* ---------- Footer: red glow and glowing buttons ---------- */

html body .elementor .apex-footer {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

html body .elementor .apex-footer::before {
	content: '';
	position: absolute;
	z-index: -1;
	width: 70vw;
	height: 70vw;
	max-width: 900px;
	max-height: 900px;
	left: -20vw;
	top: -30vw;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(226, 33, 40, .22), transparent 65%);
	pointer-events: none;
}

html body .elementor .apex-quote-title {
	text-shadow: 0 0 60px rgba(226, 33, 40, .35);
}

html body .elementor .apex-quote-button {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}

html body .elementor .apex-quote-button-whatsapp {
	background: var(--brand-red, #E22128);
	border-color: var(--brand-red, #E22128);
	box-shadow: 0 12px 40px -12px rgba(226, 33, 40, .8);
}

html body .elementor .apex-quote-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 50px -12px rgba(226, 33, 40, .9);
}

/* ---------- Photos in the dark panels (Services blocks, Products and Events cards) ---------- */

/*
 * Each panel holds an Elementor Image element (added last, after the number/year). The photo fills the
 * panel behind the text, with a dark shade at the bottom so the white number/year stays readable.
 * Change a photo in Elementor: click it inside the panel and pick another from the Media Library.
 */
html body .elementor .apex-service-media,
html body .elementor .apex-card-grid article > :first-child {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

html body .elementor .apex-card-grid article > :first-child {
	min-height: 220px;
}

html body .elementor .apex-service-media > img,
html body .elementor .apex-card-grid article > :first-child > img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}

html body .elementor .apex-service-media::before,
html body .elementor .apex-card-grid article > :first-child::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .2) 45%, rgba(0, 0, 0, .78) 100%);
	pointer-events: none;
}

/* Gentle slow zoom on hover. */
html body .elementor .apex-service-media:hover > img,
html body .elementor .apex-card-grid article:hover > :first-child > img {
	transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
	html body .elementor .apex-service-media > img,
	html body .elementor .apex-card-grid article > :first-child > img {
		transition: none;
	}
}

/* ---------- Inner pages: page head entrance on load ---------- */

/* Breadcrumbs, title and subtitle rise in… */
html.apex-fx body .elementor .apex-page-head > :nth-child(1) { animation: apex-fx-rise 1s cubic-bezier(.2, .7, .2, 1) .10s both; }
html.apex-fx body .elementor .apex-page-head > :nth-child(2) { animation: apex-fx-rise 1s cubic-bezier(.2, .7, .2, 1) .22s both; }
html.apex-fx body .elementor .apex-page-head > :nth-child(3) { animation: apex-fx-rise 1s cubic-bezier(.2, .7, .2, 1) .36s both; }

/* …then each pill button. */
html.apex-fx body .elementor .apex-page-head > nav:last-child > :nth-child(1) { animation: apex-fx-rise .8s cubic-bezier(.2, .7, .2, 1) .57s both; }
html.apex-fx body .elementor .apex-page-head > nav:last-child > :nth-child(2) { animation: apex-fx-rise .8s cubic-bezier(.2, .7, .2, 1) .64s both; }
html.apex-fx body .elementor .apex-page-head > nav:last-child > :nth-child(3) { animation: apex-fx-rise .8s cubic-bezier(.2, .7, .2, 1) .71s both; }
html.apex-fx body .elementor .apex-page-head > nav:last-child > :nth-child(4) { animation: apex-fx-rise .8s cubic-bezier(.2, .7, .2, 1) .78s both; }
html.apex-fx body .elementor .apex-page-head > nav:last-child > :nth-child(5) { animation: apex-fx-rise .8s cubic-bezier(.2, .7, .2, 1) .85s both; }
html.apex-fx body .elementor .apex-page-head > nav:last-child > :nth-child(6) { animation: apex-fx-rise .8s cubic-bezier(.2, .7, .2, 1) .92s both; }

/* ---------- Scroll reveal (classes added by assets/js/effects.js) ---------- */

/* Items start slightly lower and transparent, then settle when scrolled into view (.is-in). */
html.apex-fx-ready .apex-fx-reveal {
	opacity: 0;
	transform: translate3d(0, 36px, 0);
	transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
	transition-delay: var(--apex-delay, 0s);
}

/* Services page dark panels slide in from their own side. */
html.apex-fx-ready .apex-fx-reveal.apex-fx-left {
	transform: translate3d(-70px, 0, 0);
}

html.apex-fx-ready .apex-fx-reveal.apex-fx-right {
	transform: translate3d(70px, 0, 0);
}

html.apex-fx-ready .apex-fx-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Product/event cards: the number or year inside the dark panel rises in just after its card (not the photo). */
html.apex-fx-ready article.apex-fx-reveal > :first-child > :not(img) {
	opacity: 0;
	transform: translate3d(0, 26px, 0) scale(.92);
	transform-origin: left bottom;
	transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
	transition-delay: calc(var(--apex-delay, 0s) + .25s);
}

html.apex-fx-ready article.apex-fx-reveal.is-in > :first-child > :not(img) {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.apex-fx-reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}