/*
 * Homepage (page ID 4922) responsive fixes.
 * Enqueued only on the front page by hello_elementor_home_responsive_fix() in functions.php.
 * Every rule overrides one specific Elementor-generated value that broke the layout
 * at a given breakpoint. Desktop values are left untouched wherever possible.
 * Selectors are prefixed with body.elementor-page-4922 so they never apply to other pages.
 */

/* ===== All widths ===== */

/* Featured Projects section: a 2px left margin on the full-width container pushed it past the viewport. */
body.elementor-page-4922 .elementor-4922 .elementor-element.elementor-element-45ecc7e {
	--margin-left: 0px;
}

/* "Who we are" section (9b4085f): its fixed 314px right-hand image (ea2665b) and the
   Legacy section (4d31990): its 47vw right-hand image (ae1b641) are both designed to bleed
   off the right edge. Clip the bleed at the section edge instead of letting it create a
   horizontal scrollbar (visible on 1366px-1490px wide desktops). overflow-x: clip does not
   clip vertically, so elements that hang below these sections are unaffected. */
body.elementor-page-4922 .elementor-4922 .elementor-element.elementor-element-9b4085f,
body.elementor-page-4922 .elementor-4922 .elementor-element.elementor-element-4d31990 {
	overflow-x: clip;
}

/* ===== Desktop + tablet (>= 768px) ===== */
@media (min-width: 768px) {
	/* "Why choose us" slider container was 103.352% wide -> horizontal overflow. */
	body.elementor-page-4922 .elementor-4922 .elementor-element.elementor-element-91a24b3 {
		--width: 100%;
	}
}

/* ===== Tablet + mobile (<= 1024px) ===== */
@media (max-width: 1024px) {
	/* "Who we are": the video is pulled up 820px on desktop into space created by the founder
	   image column. That column is hidden on tablet/mobile, so the video covered the heading. */
	body.elementor-page-4922 .elementor-4922 .elementor-element.elementor-element-0c59d22 > .elementor-widget-container {
		margin-top: 0;
	}

	/* Testimonials block (e435f23): on desktop the interior photo (e635663) is absolutely positioned
	   (54vw x 99vh) with the testimonial card pulled up beside it by negative margins. On tablet
	   and mobile those offsets (-490px / -150px left margins, 653px / 100px fixed widths, 99vh
	   height) cut the text off and made the photo cover the "Our Events" heading. Put the photo
	   in normal flow above the card and let the card take the full width. */
	body.elementor-page-4922 .elementor-4922 .elementor-element.elementor-element-365ecb1 {
		--width: 100%;
		--min-height: 0px;
		--margin-top: 0px;
		--margin-left: 0px;
		--margin-right: 0px;
	}
	body.elementor-page-4922 .elementor-4922 .elementor-element.elementor-element-e635663 {
		position: static;
		width: 100%;
		max-width: 100%;
		--container-widget-width: 100%;
	}
	body.elementor-page-4922 .elementor-4922 .elementor-element.elementor-element-e635663 img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
	body.elementor-page-4922 .elementor-4922 .elementor-element.elementor-element-8b03385 {
		--width: 100%;
		--margin-top: 0px;
		--margin-left: 0px;
		--margin-right: 0px;
	}
	body.elementor-page-4922 .elementor-4922 .elementor-element.elementor-element-7fd008e {
		--width: 100%;
		--min-height: 0px;
		--margin-top: 0px;
		--margin-bottom: 0px;
		--margin-left: 0px;
		--margin-right: 0px;
	}
	/* "Our Events" section is pulled 135px up into the section above on desktop (where the photo
	   is beside it). Once the blocks stack, that pull puts the heading under the testimonial card. */
	body.elementor-page-4922 .elementor-4922 .elementor-element.elementor-element-71b7b4d {
		--margin-top: 0px;
	}

	/* "Why choose us" card: 111% / 108% wide heading and text overflowed the card under the image. */
	body.elementor-page-4922 .elementor-2491 .elementor-element.elementor-element-e1f79d7,
	body.elementor-page-4922 .elementor-2491 .elementor-element.elementor-element-742a642 {
		width: 100%;
		max-width: 100%;
	}
}

/* ===== Tablet only (768px - 1024px) ===== */
@media (max-width: 1024px) and (min-width: 768px) {
	/* "Why choose us" card had a fixed 421px left margin and was cut off at 768px.
	   Start it where the 38.121%-wide image ends instead. */
	body.elementor-page-4922 .elementor-2491 .elementor-element.elementor-element-f33cb8e {
		--margin-left: 38.121%;
	}

	/* Featured project titles wrap to two lines in the narrower tablet cards and overlapped the location line. */
	body.elementor-page-4922 .elementor-2120 .elementor-element.elementor-element-22d1c19 .elementor-heading-title {
		font-size: 19px;
	}
}

/* ===== Mobile (<= 767px) ===== */
@media (max-width: 767px) {
	/* Hero: the slide text sat under the transparent header and collided with the logo. */
	body.elementor-page-4922 .elementor-4922 .elementor-element.elementor-element-efa1e3d .jet-slider__content-inner {
		transform: translateY(45px);
	}

	/* "Why choose us" card: the image was absolutely positioned and the card kept its 421px
	   desktop left margin, so the card sat completely off-screen. Stack image above card. */
	body.elementor-page-4922 .elementor-2491 .elementor-element.elementor-element-6bb1858 {
		--position: relative;
		--width: 100%;
		--min-height: 240px;
		top: auto;
	}
	body.elementor-page-4922 .elementor-2491 .elementor-element.elementor-element-f33cb8e {
		--width: 100%;
		--margin-top: 0px;
		--margin-left: 0px;
		--padding-top: 30px;
		--padding-bottom: 30px;
		--padding-left: 20px;
		--padding-right: 20px;
	}

	/* Its slider arrows were positioned 203px from the bottom, which now lands on the card text. */
	body.elementor-page-4922 .elementor-4922 .elementor-element.elementor-element-4a5897f .jet-listing-grid__slider-icon.prev-arrow,
	body.elementor-page-4922 .elementor-4922 .elementor-element.elementor-element-4a5897f .jet-listing-grid__slider-icon.next-arrow {
		bottom: 6px;
	}

	/* Legacy section: a fixed 500px container on a 375-430px screen caused horizontal scrolling. */
	body.elementor-page-4922 .elementor-4922 .elementor-element.elementor-element-311a7d9 {
		--width: 100%;
	}

	/* "Our Events" inner container is pulled 139px up on mobile, into the testimonial card above it. */
	body.elementor-page-4922 .elementor-4922 .elementor-element.elementor-element-5cd8dbc {
		--margin-top: 0px;
	}

	/* Footer keyword line is 130% wide (sits beside other columns on desktop) and overflowed once stacked. */
	body.elementor-page-4922 .elementor-1543 .elementor-element.elementor-element-613483ba {
		width: 100%;
		max-width: 100%;
	}
}