/* Elanza Home — CSS layer added on top of native Elementor widgets to
   restore the design's motion/interaction details that Elementor's
   free widgets don't do natively (marquee, hover-lift cards, carousels). */

.elementor-hero-title,
.elanza-hero-title {
	text-transform: uppercase;
}

/* Same font-cascade bug hit before on the header/footer/blog-detail
   builds: Woodmart's own theme CSS sets font-family directly on
   headings/buttons/etc. (Roboto/Inter), which beats the inherited
   Nunito from any ancestor without !important. This page is built
   from native Elementor widgets (heading/text-editor/button/icon-box/
   testimonial/accordion/counter), none of which are wrapped in
   .elementor-widget-html, so the earlier fix for that class doesn't
   reach them — force Nunito across every widget type used here. */
#main-content .elementor-widget-heading,
#main-content .elementor-widget-heading *,
#main-content .elementor-widget-text-editor,
#main-content .elementor-widget-text-editor *,
#main-content .elementor-widget-button,
#main-content .elementor-widget-button *,
#main-content .elementor-widget-icon-box,
#main-content .elementor-widget-icon-box *,
#main-content .elementor-widget-testimonial,
#main-content .elementor-widget-testimonial *,
#main-content .elementor-widget-accordion,
#main-content .elementor-widget-accordion *,
#main-content .elementor-widget-counter,
#main-content .elementor-widget-counter *,
#main-content .elementor-widget-shortcode,
#main-content .elementor-widget-shortcode * {
	font-family: 'Nunito', sans-serif !important;
}

/* Woodmart's main content wrapper adds its own top/bottom padding —
   remove it so our sections control all spacing themselves. */
.wd-content-layout {
	padding: 0 !important;
}

/* ===== Exact section padding (matching the source design's clamp()
   values) — Elementor's dimension control only accepts a fixed unit,
   not a CSS clamp() expression, so these are applied as overrides
   keyed to a distinct class per section. Horizontal padding across all
   of them matches the source's clamp(20px,4.2vw,80px). ===== */

.elementor-section > .elementor-container {
	padding-left: clamp(20px, 4.2vw, 80px);
	padding-right: clamp(20px, 4.2vw, 80px);
}

.elanza-p-hero > .elementor-container {
	padding-top: clamp(48px, 6vw, 86px) !important;
	padding-bottom: clamp(56px, 6vw, 90px) !important;
}
.elanza-p-about > .elementor-container {
	padding-top: clamp(56px, 5vw, 84px) !important;
	padding-bottom: clamp(56px, 5vw, 84px) !important;
	/* Same underlying issue fixed elsewhere on the page: Elementor's
	   legacy "extended" gap preset doesn't add real space between
	   columns, so the image and text columns were touching at 0px.
	   Force an actual flex gap (this row is already display:flex) to
	   match the breathing room in the source design. On the mobile
	   breakpoint where Elementor stacks these columns vertically, the
	   same gap value becomes the vertical space between them instead —
	   desirable either way, so this is responsive-safe. */
	gap: clamp(40px, 5vw, 72px);
}
.elanza-p-services-head > .elementor-container {
	padding-top: clamp(72px, 7.5vw, 116px) !important;
	padding-bottom: 0 !important;
}
.elanza-p-services-row1 > .elementor-container {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.elanza-p-services-row2 > .elementor-container {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.elanza-p-services-row3 > .elementor-container {
	padding-top: 0 !important;
	padding-bottom: clamp(72px, 7.5vw, 116px) !important;
	/* Only one card on this row (the 7th service didn't fit evenly into
	   3-per-row) — center it instead of leaving it stranded on the left. */
	justify-content: center;
}
.elanza-p-services-row3 > .elementor-container > .elementor-column {
	flex: 0 1 33.333% !important;
}
.elanza-p-reputation > .elementor-container {
	padding-top: clamp(72px, 7.5vw, 120px) !important;
	padding-bottom: clamp(72px, 7.5vw, 120px) !important;
}
.elanza-p-why-head > .elementor-container {
	padding-top: clamp(72px, 7.5vw, 120px) !important;
	padding-bottom: 0 !important;
}
.elanza-p-why-cards > .elementor-container {
	padding-top: 0 !important;
	padding-bottom: clamp(72px, 7.5vw, 120px) !important;
}
.elanza-p-portfolio-head > .elementor-container {
	padding-top: clamp(72px, 7.5vw, 120px) !important;
	padding-bottom: 0 !important;
}
.elanza-p-portfolio-filters > .elementor-container {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.elanza-p-portfolio-track > .elementor-container {
	padding-top: 0 !important;
	padding-bottom: clamp(72px, 7vw, 110px) !important;
}
.elanza-p-agency > .elementor-container {
	padding-top: clamp(72px, 7.5vw, 120px) !important;
	padding-bottom: clamp(72px, 7.5vw, 120px) !important;
	gap: clamp(40px, 5vw, 72px);
}
.elanza-p-customers-head > .elementor-container {
	padding-top: clamp(72px, 7.5vw, 110px) !important;
	padding-bottom: 0 !important;
}
.elanza-p-customers-stage > .elementor-container {
	padding-top: 0 !important;
	padding-bottom: clamp(72px, 7vw, 110px) !important;
}
.elanza-p-rfp > .elementor-container {
	padding-top: clamp(48px, 4.5vw, 72px) !important;
	padding-bottom: clamp(48px, 4.5vw, 72px) !important;
	/* Same "extended"/"wide" gap-preset issue as every other multi-column
	   row on this page — it doesn't create real space between columns.
	   Forced real flex gap so image and text aren't touching at 0px. */
	gap: clamp(40px, 5vw, 72px);
}
.elanza-p-blogs-head > .elementor-container {
	padding-top: clamp(64px, 6vw, 104px) !important;
	padding-bottom: 10px !important;
}
.elanza-p-blogs-grid > .elementor-container {
	padding-top: 0 !important;
	/* Room for the card hover-lift's box-shadow to breathe instead of
	   getting visually cut off by the section boundary right below it. */
	padding-bottom: 32px !important;
}
.elanza-p-blogs-viewall > .elementor-container {
	padding-top: 0 !important;
	padding-bottom: clamp(64px, 6vw, 104px) !important;
}
.elanza-p-faq > .elementor-container {
	padding-top: clamp(64px, 6vw, 104px) !important;
	padding-bottom: clamp(64px, 6vw, 104px) !important;
}
.elanza-p-contact > .elementor-container {
	padding-top: clamp(64px, 6vw, 104px) !important;
	padding-bottom: clamp(72px, 7vw, 120px) !important;
	gap: clamp(40px, 5vw, 72px);
}

/* Card hover-lift shared by services / why-elanza / blog / testimonial cards.
   NOTE: the "elanza-hover-card"/"elanza-why-card" class lands on the OUTER
   .elementor-column div, but the actual visible card look — border,
   border-radius, background — is Elementor's own rendering on the CHILD
   .elementor-element-populated. Putting border-color/box-shadow on the
   outer (radius:0) element makes the hover shadow a square silhouette
   behind the rounded card, which looks broken/mismatched. Transform is
   fine on the outer element (moves the whole card together); border-color
   and box-shadow must target the populated child so they inherit its
   border-radius. */
.elanza-hover-card,
.elanza-why-card {
	transition: transform 0.3s cubic-bezier(0.22,0.61,0.36,1);
}
.elanza-hover-card:hover,
.elanza-why-card:hover {
	transform: translateY(-4px);
}
.elanza-hover-card > .elementor-element-populated,
.elanza-why-card > .elementor-element-populated {
	transition: border-color 0.25s ease, box-shadow 0.3s ease;
}
.elanza-hover-card:hover > .elementor-element-populated,
.elanza-why-card:hover > .elementor-element-populated {
	border-color: #9DBEDA !important;
	box-shadow: 0 10px 24px rgba(3,57,108,0.10);
}

/* Why-Elanza cards deliberately DON'T get the services-card flex/
   button/icon layout rules below (that's what caused the icon-box
   content to center and lose its normal left-aligned flow) — they
   just need left-aligned text and a spaced icon-box. */
.elanza-why-card .elementor-icon-box-content {
	text-align: left !important;
}
.elanza-why-card .elementor-icon-box-title,
.elanza-why-card .elementor-icon-box-description {
	text-align: left !important;
}
.elanza-why-icon.elementor-view-stacked .elementor-icon {
	width: 46px !important;
	height: 46px !important;
	border-radius: 12px !important;
	background: linear-gradient(135deg, #03396C 0%, #6E97BE 100%) !important;
	box-shadow: 0 8px 20px rgba(3, 57, 108, 0.30);
	/* The icon glyph (SVG/font-awesome <i>) was rendering as a plain
	   inline-block, so it sat wherever its own font metrics/baseline
	   placed it inside the 46px box (~3px off-center up-and-left)
	   instead of being truly centered. Force real flex centering. */
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}
.elanza-why-icon.elementor-view-stacked .elementor-icon svg,
.elanza-why-icon.elementor-view-stacked .elementor-icon i {
	margin: 0;
}
.elanza-why-icon .elementor-icon-box-icon {
	margin-bottom: 24px;
}

/* Logo marquee */
.elanza-marquee-row {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}
.elanza-marquee-track {
	display: flex;
	width: max-content;
}
.elanza-marquee-left {
	animation: elanzaMarqueeLeft 34s linear infinite;
}
.elanza-logo-item {
	flex: 0 0 auto;
	padding: 0 clamp(24px, 3vw, 56px);
	font-weight: 800;
	font-size: 20px;
	letter-spacing: 0.1em;
	color: #9A96A6;
	white-space: nowrap;
	transition: color 0.3s ease;
}
.elanza-logo-item:hover {
	color: #03396C;
}
@keyframes elanzaMarqueeLeft {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* Portfolio filters.
   Same gotcha as elsewhere on this page: "elanza-portfolio-filters" lands
   on the OUTER .elementor-column div (css_classes, no underscore), so
   flexing that element does nothing useful — its only child is the
   .elementor-widget-wrap that actually holds the button widgets, and
   THAT'S what needs to become the flex row. Likewise each button's
   "elanza-portfolio-filter-btn" class lands on the outer
   .elementor-widget-button div (_css_classes), not the inner
   <a class="elementor-button"> that Woodmart actually renders the visible
   pill on — so the chrome (background/border/radius/padding) has to
   target that inner <a>, or you get a full-width invisible outer box
   with a small default-styled Woodmart button floating inside it. */
.elanza-portfolio-filters > .elementor-widget-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.elanza-portfolio-filters > .elementor-widget-wrap > .elementor-widget-button {
	flex: 0 0 auto;
	width: auto;
}
@media (max-width: 767px) {
	/* At mobile widths the two longer labels ("Web Development",
	   "Digital Marketing") don't fit two-per-row, so flex-wrap stacked
	   all four pills into one per line — tall and not how a filter bar
	   usually behaves on a phone. Make it a horizontal swipe strip
	   instead, same pattern as the portfolio track below it. */
	.elanza-portfolio-filters > .elementor-widget-wrap {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding-bottom: 4px;
	}
	.elanza-portfolio-filters > .elementor-widget-wrap::-webkit-scrollbar {
		display: none;
	}
}
.elanza-portfolio-filter-btn .elementor-button {
	background: #FFFFFF !important;
	border: 1px solid #DAD6E4 !important;
	color: #12121A !important;
	font-weight: 800 !important;
	font-size: 13px !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 13px 26px !important;
	border-radius: 30px !important;
	cursor: pointer;
	transition: all 0.25s ease;
}
.elanza-portfolio-filter-btn.is-active .elementor-button {
	background: #03396C !important;
	border-color: #03396C !important;
	color: #FFFFFF !important;
}
.elanza-portfolio-filter-btn .elementor-button:hover {
	border-color: #03396C !important;
	color: #03396C !important;
}
.elanza-portfolio-filter-btn.is-active .elementor-button:hover {
	color: #FFFFFF !important;
}

/* Portfolio track — horizontal scroll-snap carousel.
   Still scrollable (by drag/swipe or the prev/next round buttons) — just
   hide the browser's native scrollbar track, which the design doesn't
   show at all. */
.elanza-portfolio-track .elementor-container {
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* old Edge/IE */
}
.elanza-portfolio-track .elementor-container::-webkit-scrollbar {
	display: none; /* Chrome/Safari/new Edge */
}
.elanza-portfolio-track .elementor-container {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	flex-wrap: nowrap !important;
	scroll-behavior: smooth;
	/* Same gap-preset issue as every other card row on this page — cards
	   were touching at 0px with no real space between them. */
	gap: 24px;
}
.elanza-portfolio-track .elementor-column {
	scroll-snap-align: start;
	flex: 0 0 auto !important;
	width: clamp(260px, 30vw, 400px) !important;
	transition: transform 0.4s cubic-bezier(0.22,0.61,0.36,1), box-shadow 0.4s ease, opacity 0.4s ease;
}
.elanza-portfolio-track .elementor-column:hover {
	transform: translateY(-8px);
}

/* Room for the "featured" card's scale-up (below) so it doesn't trip the
   container into showing a vertical scrollbar. */
.elanza-p-portfolio-track > .elementor-container {
	padding-top: clamp(16px, 2vw, 28px) !important;
}

/* Portfolio card overlay content — category badge, "Featured Work"
   caption and the site-name heading all sit on top of the image instead
   of the plain image-then-text-below layout. The image widget is the
   only thing left in normal flow, so making its parent .elementor-
   widget-wrap position:relative is enough for the rest to lay out
   against it via absolute positioning. */
.elanza-portfolio-card > .elementor-element-populated {
	position: relative;
	/* Elementor's default column padding (10px top/bottom) was making
	   this wrapper taller than the image itself, so "bottom: Npx" on the
	   overlay text below was measuring from a phantom edge below the
	   actual image — landing the site-name text half on the image, half
	   on the plain white gap under it (unreadable white-on-white). The
	   image must be the only thing establishing this wrapper's height. */
	padding: 0 !important;
}
.elanza-portfolio-card .elementor-widget-image {
	position: relative;
	margin: 0 !important;
	border-radius: 16px;
	overflow: hidden;
}
.elanza-portfolio-card .elementor-widget-image img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	display: block;
}
/* Dark gradient so the white overlay text stays legible over any image. */
.elanza-portfolio-card .elementor-widget-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0) 65%);
	pointer-events: none;
}

.elanza-portfolio-badge {
	position: absolute;
	top: 18px;
	left: 18px;
	z-index: 2;
	display: inline-block !important;
	width: max-content !important;
	max-width: calc(100% - 36px);
	background: rgba(18,18,26,0.55);
	color: #FFFFFF !important;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 8px 14px;
	border-radius: 999px;
	backdrop-filter: blur(3px);
}
.elanza-portfolio-badge .elementor-heading-title {
	color: #FFFFFF;
}

.elanza-portfolio-caption {
	position: absolute;
	left: 20px;
	bottom: 52px;
	z-index: 2;
	color: rgba(255,255,255,0.75) !important;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.elanza-portfolio-caption .elementor-heading-title {
	color: rgba(255,255,255,0.75);
}

.elanza-portfolio-sitename {
	position: absolute;
	left: 20px;
	bottom: 18px;
	z-index: 2;
	right: 20px;
}
.elanza-portfolio-sitename .elementor-heading-title {
	color: #FFFFFF !important;
	font-size: 19px;
	font-weight: 800;
}

/* Center-focus effect — JS (elanza-home.js) toggles "is-featured" on
   whichever card sits closest to the track's horizontal center as the
   user scrolls, approximating the design's enlarged/elevated middle
   card with the side cards receding slightly. */
.elanza-portfolio-card.is-featured {
	transform: scale(1.06);
	box-shadow: 0 34px 60px rgba(3,57,108,0.28);
	z-index: 2;
	border-radius: 16px;
}
.elanza-portfolio-track .elementor-column:not(.is-featured) {
	opacity: 0.82;
}

.elanza-portfolio-card.elanza-hide {
	display: none !important;
}

/* Testimonial carousel — the slides are flat widgets (not columns, see
   the earlier column-in-column nesting bug), so this needs to target
   the widget wrapper directly, not '.elementor-column'. */
.elanza-testimonial-stage .elanza-testimonial-slide {
	display: none;
}
.elanza-testimonial-stage .elanza-testimonial-slide.is-active {
	display: block;
}
/* Same gotcha as elsewhere: the class lands on the outer widget div,
   but Woodmart's gray default button style is set directly on the
   inner <a class="elementor-button">, so that's what needs targeting. */
.elanza-round-btn .elementor-button {
	width: 52px !important;
	height: 52px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	border: 1px solid #DAD6E4 !important;
	background: #FFFFFF !important;
	color: #12121A !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.25s ease;
}
.elanza-round-btn .elementor-button:hover {
	border-color: #03396C !important;
	background: #03396C !important;
	color: #FFFFFF !important;
}

/* Agency slabs — simplified CSS approximation of the design's 3D
   perspective-animated image slabs (angled, layered, subtle float —
   not the exact rotateY/rotateX per-frame animation from the source). */
.elanza-agency-slabs-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(20px, 2.4vw, 38px);
}
.elanza-agency-slab {
	width: 100%;
	max-width: 460px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: -24px 30px 60px rgba(0,0,0,0.5);
	animation: elanzaSlabFloat 8s ease-in-out infinite;
}
.elanza-slab-1 { clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); animation-delay: 0s; }
.elanza-slab-2 { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); animation-delay: 0.6s; }
.elanza-slab-3 { clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); animation-delay: 1.2s; }
@keyframes elanzaSlabFloat {
	0%, 100% { transform: translateY(0) rotate(-2deg); }
	50% { transform: translateY(-10px) rotate(-1deg); }
}

/* FAQ heading — dedicated (larger) size than the reused services h2,
   matching the source design's bigger FAQ title */
.elanza-faq-h2 .elementor-heading-title {
	font-size: clamp(32px, 4.2vw, 60px) !important;
	font-weight: 800 !important;
	line-height: 1.08 !important;
	letter-spacing: -0.03em !important;
	margin: 0 0 clamp(30px, 3.4vw, 52px) !important;
}
.elanza-p-faq .elementor-widget-text-editor p {
	margin: 0 0 14px !important;
}

/* FAQ accordion — restyle Elementor's default chrome to match the
   underline + circular plus-icon look from the source design */
.elementor-widget-accordion .elementor-accordion-item {
	border: none !important;
	border-bottom: 1px solid #E4E1EC !important;
}
.elementor-widget-accordion .elementor-tab-title {
	padding: clamp(22px, 2.2vw, 30px) 0 !important;
	font-weight: 800 !important;
	font-size: clamp(16px, 1.5vw, 20px) !important;
	color: #12121A !important;
	font-family: 'Nunito', sans-serif !important;
}
.elementor-widget-accordion .elementor-tab-content {
	padding: 0 0 clamp(22px, 2.2vw, 30px) !important;
	font-size: clamp(15px, 1.15vw, 17px) !important;
	line-height: 1.75 !important;
	color: #55535F !important;
	font-family: 'Nunito', sans-serif !important;
	/* Elementor's own stylesheet adds a default border-top here, which
	   combined with our border-bottom on .elementor-accordion-item
	   produced a double line under each open item — kill it. */
	border-top: none !important;
}
.elementor-widget-accordion .elementor-accordion-icon {
	color: #03396C !important;
}

/* Smooth open/close instead of Elementor's instant inline
   display:none/block toggle (which caused a visible "jerk").
   Elementor still flips the inline `display` style AND toggles the
   `.elementor-active` class at the same time — we force display:block
   at all times ourselves (overriding the inline "none") and animate
   max-height/opacity keyed off .elementor-active instead. */
.elementor-widget-accordion .elementor-tab-content {
	display: block !important;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.35s ease;
}
.elementor-widget-accordion .elementor-tab-content.elementor-active {
	max-height: 600px !important;
	opacity: 1 !important;
	padding: 0 0 clamp(22px, 2.2vw, 30px) !important;
}

/* Text-editor content should inherit Nunito like the rest of the page */
.elementor-widget-text-editor,
.elementor-widget-text-editor * {
	font-family: 'Nunito', sans-serif;
}

/* ===== About section — image media block (decorative backdrop,
   border box, accent square, "11 Years shipping" badge card) ===== */

.elanza-about-media {
	position: relative;
	padding-bottom: clamp(20px, 2.4vw, 34px);
}

/* Decorative outline box, bottom-left, behind the image */
.elanza-about-media::before {
	content: '';
	position: absolute;
	z-index: 0;
	left: -16px;
	bottom: 8px;
	width: 58%;
	height: 62%;
	border-radius: 18px;
	border: 1.5px solid rgba(3, 57, 108, 0.32);
}

/* Small accent square, top-right, behind the image */
.elanza-about-media::after {
	content: '';
	position: absolute;
	z-index: 0;
	top: -26px;
	right: -28px;
	width: 104px;
	height: 104px;
	border-radius: 16px;
	background: linear-gradient(135deg, #03396C 0%, #245A8D 100%);
	opacity: 0.16;
}
@media (max-width: 767px) {
	/* On narrow screens the media column spans nearly the full section
	   width, so the -28px offset pushed this square past the viewport
	   edge and caused a page-wide horizontal scrollbar. Pull it back in
	   to stay within the section's own side padding instead. */
	.elanza-about-media::after {
		top: -14px;
		right: -12px;
		width: 72px;
		height: 72px;
	}
}

.elanza-about-image {
	position: relative;
	z-index: 1;
}
.elanza-about-image img {
	border-radius: 18px;
	aspect-ratio: 4/5;
	object-fit: cover;
}

.elanza-about-badge {
	position: absolute;
	z-index: 2;
	right: -18px;
	bottom: -22px;
	display: flex;
	align-items: center;
	gap: 14px;
	background: #FFFFFF;
	border-radius: 16px;
	padding: 16px 20px;
	box-shadow: 0 18px 44px rgba(18, 18, 26, 0.16);
	max-width: 260px;
}
.elanza-about-badge-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	border-radius: 12px;
	background: linear-gradient(135deg, #03396C 0%, #245A8D 100%);
	color: #fff;
	font-weight: 800;
	font-size: 15px;
}
.elanza-about-badge-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.elanza-about-badge-title {
	font-size: 15px;
	font-weight: 800;
	color: #12121A;
	line-height: 1.2;
}
.elanza-about-badge-sub {
	font-size: 13px;
	font-weight: 500;
	color: #7A7885;
	line-height: 1.2;
}

@media (max-width: 480px) {
	.elanza-about-badge {
		right: 8px;
		bottom: -16px;
		padding: 12px 14px;
	}
}

/* ===== Service / Why-Elanza card layout =====
   Elementor's row already stretches columns to equal height, but the
   widgets inside stack top-to-bottom with no way to pin the last row
   to the bottom — so cards with shorter copy left their button/icon
   floating mid-card instead of flush with the bottom edge, and the
   button+icon (two separate widgets) need to sit side by side.

   Fix: make each card's widget-wrap a wrapped flex row, force the
   heading/description onto their own full-width lines, and let the
   button + icon (the only widgets NOT forced to 100%) fall onto a
   shared last line pinned to the bottom via space-between. */
/* Force the row itself to stretch its columns to equal height — needed
   because this Elementor version's row/container doesn't default to
   align-items:stretch for boxed-layout sections. */
.elanza-p-services-row1 > .elementor-container,
.elanza-p-services-row2 > .elementor-container,
.elanza-p-services-row3 > .elementor-container,
.elanza-p-why-cards > .elementor-container,
.elanza-p-blogs-grid > .elementor-container {
	align-items: stretch;
	/* Elementor's legacy gap presets only pad content *inside* each
	   column — they don't create real space between adjacent bordered
	   card boxes, which touch at 0px regardless of the preset. Force
	   real flexbox gap directly (the container is already display:flex). */
	gap: 24px;
}
.elanza-p-services-row1 > .elementor-container > .elementor-column,
.elanza-p-services-row2 > .elementor-container > .elementor-column,
.elanza-p-services-row3 > .elementor-container > .elementor-column,
.elanza-p-why-cards > .elementor-container > .elementor-column,
.elanza-p-blogs-grid > .elementor-container > .elementor-column {
	display: flex;
	flex-direction: column;
}
.elanza-p-services-row1 > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elanza-p-services-row2 > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elanza-p-services-row3 > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elanza-p-why-cards > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elanza-p-blogs-grid > .elementor-container > .elementor-column > .elementor-widget-wrap {
	flex: 1 1 auto;
}

.elanza-hover-card > .elementor-widget-wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}
.elanza-hover-card > .elementor-widget-wrap > .elementor-widget-heading,
.elanza-hover-card > .elementor-widget-wrap > .elementor-widget-text-editor {
	flex: 0 0 100%;
	width: 100%;
}
.elanza-hover-card > .elementor-widget-wrap > .elementor-widget-button,
.elanza-hover-card > .elementor-widget-wrap > .elementor-widget-icon {
	margin-top: auto;
	flex: 0 0 auto !important;
	width: max-content !important;
}
/* auto-margin resolves ~20px lower for the icon than the button on the
   same wrapped line (browser flex quirk with multi-line auto-margins) —
   nudge it back up so the circle vertically centers with the pill. */
.elanza-hover-card > .elementor-widget-wrap > .elementor-widget-icon {
	transform: translateY(-20px);
}
.elanza-hover-card > .elementor-widget-wrap > .elementor-widget-icon .elementor-icon {
	width: 34px;
	height: 34px;
}

/* Exact typography matching the source design — Elementor's default
   theme heading style (24px/700 for h2, 22px for h3) doesn't match the
   design's clamp-based section title (30-46px/800) or the smaller
   17.5px/700 card titles, so these are overridden by class. */
.elanza-services-h2 .elementor-heading-title {
	font-size: clamp(30px, 3.4vw, 46px) !important;
	font-weight: 800 !important;
	line-height: 1.12 !important;
}
.elanza-card-title .elementor-heading-title {
	font-size: 17.5px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}

/* Floating customer-avatar constellation (the wavy dashed SVG path +
   circles behind "Our Happy Customers") — bobbing animation. */
@keyframes elanzaFloat {
	0% { transform: translate(-50%, -50%) translateY(0); }
	50% { transform: translate(-50%, -50%) translateY(-14px); }
	100% { transform: translate(-50%, -50%) translateY(0); }
}

/* ===== Recent Blogs cards — image full-width on its own row, title
   grows to fill remaining space, arrow icon pinned to the far right
   of the same row (same wrapped-flex trick used for service cards). */
.elanza-p-blogs-grid .elementor-column > .elementor-element-populated,
.elanza-p-blogs-grid .elementor-widget-wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}
.elanza-p-blogs-grid .elementor-widget-image {
	flex: 0 0 100%;
	width: 100%;
}
.elanza-p-blogs-grid .elementor-widget-image img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	border-radius: 17px 17px 0 0;
	display: block;
}
.elanza-blog-title {
	flex: 1 1 auto !important;
	width: auto !important;
}
.elanza-blog-title .elementor-heading-title {
	font-size: 16px !important;
	font-weight: 800 !important;
	line-height: 1.35 !important;
}
/* Arrow icon removed per design update — title now takes the full row. */
.elanza-blog-arrow {
	display: none !important;
}

/* View All button hover — lift + deepen the shadow to match the
   interaction style used on the rest of the page's buttons. */
.elanza-p-blogs-viewall .elementor-button {
	transition: transform 0.25s ease, box-shadow 0.3s ease;
}
.elanza-p-blogs-viewall .elementor-button:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 40px rgba(3,57,108,0.4) !important;
}