/**
 * Smart Green Living infrastructure carousel.
 *
 * Scoped to the semantic .sgl-infrastructure section. Owl keeps ownership of
 * carousel movement and its 30px item margin; this layer owns the component's
 * headline, card geometry and typography across breakpoints.
 */

body.elementor-page .elementor .sgl-infrastructure .team-section .sec-title {
	margin: 0 0 32px !important;
	padding: 0 !important;
}

body.elementor-page .elementor .sgl-infrastructure .team-section .sec-title .top-title {
	display: block !important;
	margin: 0 !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 28px !important;
	text-transform: uppercase !important;
	color: var(--sgl-green, #72914e) !important;
}

body.elementor-page .elementor .sgl-infrastructure .team-section .sec-title h1 {
	margin: 0 !important;
	font-size: clamp(36px, 2.604vw, 50px) !important;
	font-weight: 300 !important;
	line-height: 1.24 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--sgl-ink, #151f23) !important;
}

body.elementor-page .elementor .sgl-infrastructure .team-section .sec-title h1 b {
	position: relative !important;
	z-index: 0 !important;
	isolation: isolate !important;
	display: inline-block !important;
	width: auto !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	background: none !important;
	overflow: visible !important;
}

/* Accent geometry follows the supplied 436x23 Figma asset. We keep using the
 * original, known-good SVG file and reproduce the longer 436:23 proportion
 * with one deterministic horizontal scale. The final visible width is exactly
 * the rendered width of INFRASTRUKTUR. on every breakpoint. */
body.elementor-page .elementor .sgl-infrastructure .team-section .sec-title h1 b::after {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	bottom: -0.08em !important;
	z-index: -1 !important;
	display: block !important;
	width: 69.98470948% !important;
	height: 0.46em !important;
	max-width: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	opacity: 1 !important;
	transform: scaleX(1.4288835482) !important;
	transform-origin: left bottom !important;
	background: transparent url("/wp-content/themes/smartgreenliving-child/assets/images/figma/headline_accent.svg") left bottom / 100% 100% no-repeat !important;
	pointer-events: none !important;
}

body.elementor-page .elementor .sgl-infrastructure .team-section .sec-title p {
	margin: 12px 0 0 !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 28px !important;
	color: var(--sgl-ink, #151f23) !important;
}

@media (min-width: 1201px) {
	body.elementor-page .elementor .sgl-infrastructure .team-section > .container {
		width: 1294px !important;
		max-width: calc(100vw - 96px) !important;
	}

	body.elementor-page .elementor .sgl-infrastructure .team-section .sec-title {
		width: 788px !important;
		max-width: 100% !important;
	}

	body.elementor-page .elementor .sgl-infrastructure .team-carousel {
		width: 100% !important;
		max-width: 100% !important;
	}

	body.elementor-page .elementor .sgl-infrastructure .team-carousel .owl-stage {
		display: flex !important;
	}

	/* Owl calculates four desktop columns and owns the 30px inter-item gap. */
	body.elementor-page .elementor .sgl-infrastructure .team-carousel .owl-item {
		flex: 0 0 min(293.5px, calc((100vw - 96px) / 4 - 30px)) !important;
		width: min(293.5px, calc((100vw - 96px) / 4 - 30px)) !important;
		padding-right: 0 !important;
	}

	body.elementor-page .elementor .sgl-infrastructure .team-block-one {
		width: 100% !important;
		margin: 0 !important;
	}

	body.elementor-page .elementor .sgl-infrastructure .team-block-one .image-box {
		display: block !important;
		box-sizing: border-box !important;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 1 / 1 !important;
		margin: 0 !important;
		padding: 10px !important;
		background: #fff !important;
		border: 1px solid #ebebeb !important;
	}

	body.elementor-page .elementor .sgl-infrastructure .team-block-one .image-box figure {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
	}

	body.elementor-page .elementor .sgl-infrastructure .team-block-one .image-box img {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		object-fit: cover !important;
	}

	body.elementor-page .elementor .sgl-infrastructure .team-block-one .lower-content {
		box-sizing: border-box !important;
		width: 100% !important;
		padding: 28px 0 0 !important;
	}

	body.elementor-page .elementor .sgl-infrastructure .team-block-one h3,
	body.elementor-page .elementor .sgl-infrastructure .team-block-one h3 a {
		margin: 0 !important;
		font-size: 24px !important;
		font-weight: 600 !important;
		line-height: 32px !important;
		letter-spacing: 0 !important;
		text-transform: none !important;
		white-space: nowrap !important;
		color: var(--sgl-ink, #151f23) !important;
	}

	body.elementor-page .elementor .sgl-infrastructure .team-block-one .designation {
		display: block !important;
		margin-top: 3px !important;
		font-size: 15px !important;
		font-weight: 300 !important;
		line-height: 24px !important;
		letter-spacing: 0 !important;
		text-transform: none !important;
		white-space: nowrap !important;
		color: var(--sgl-ink, #151f23) !important;
	}
}

@media (max-width: 1200px) {
	body.elementor-page .elementor .sgl-infrastructure .team-section > .container {
		width: calc(100% - 48px) !important;
		max-width: 920px !important;
		margin-right: auto !important;
		margin-left: auto !important;
	}
}

@media (max-width: 767px) {
	body.elementor-page .elementor .sgl-infrastructure .team-section > .container {
		width: calc(100% - 32px) !important;
		max-width: none !important;
	}

	body.elementor-page .elementor .sgl-infrastructure .team-section .sec-title {
		margin-bottom: 42px !important;
	}

	body.elementor-page .elementor .sgl-infrastructure .team-section .sec-title h1 {
		font-size: clamp(34px, 9.4vw, 40px) !important;
		line-height: 1.22 !important;
	}

	body.elementor-page .elementor .sgl-infrastructure .team-section .sec-title p {
		font-size: 15px !important;
		line-height: 1.65 !important;
	}
}