/* ==========================================================================
   The Green Guard Turf — HOME page styles (Elementor rebuild)
   Loads AFTER /assets/css/base.css and /assets/css/style.css.
   Values ported from the original Elementor CSS (post-homepage.css /
   post-kit.css) and the page's inline <style> blocks.
   ========================================================================== */

/* ---------- page-scoped vars (from the original inline :root blocks) ---------- */
:root {
	--primary-green: #a7ff52;
	--text-dark: #2c3e50;
	--bg-light: #ffffff;
	--highlight-color: #79dd07;
	--light-gray-bg: #f9f9f9;
	--dark-gray: #333;
	--medium-gray: #777;

	--team-primary-green: #a7ff52;
	--team-secondary-green: #38c172;
	--team-text-dark: #2c3e50;
	--team-text-light: #fff;
	--team-bg-light: #ffffff;
	--team-explore-color: #79dd07;
	--team-primary-gradient: linear-gradient(180deg, #b0f555 0%, #34e068 100%);
	--team-bg-text-color-base: #f0f3f6;
	--team-text-fade-gradient: linear-gradient(to bottom, var(--team-bg-text-color-base) 40%, rgba(240, 243, 246, 0) 100%);
	--team-card-bg: #f7f9fb;
}

/* ---------- element defaults inside the page (Elementor-ish reset) ---------- */
.gg-main :where(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	font-family: 'Montserrat', sans-serif;
	color: #fff;
}
.gg-main p { margin: 0; }
.gg-main a { text-decoration: none; }

/* section label (lime uppercase h6, centered variants add .is-center) */
.gg-sec-label {
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.3;
	color: #84bd00;
	margin: 0 0 20px;
}
.gg-sec-label.is-center { text-align: center; margin-bottom: 50px; }

/* big section heading (kit vamtam_h2: 40/29/25) */
.gg-h2 {
	font-size: 40px;
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
}
@media (max-width: 1024px) { .gg-h2 { font-size: 29px; } }
@media (max-width: 767px)  { .gg-h2 { font-size: 25px; } }

/* shell = 30px page gutter used by every rounded panel (20px on mobile) */
.gg-shell { padding-left: 30px; padding-right: 30px; }
@media (max-width: 767px) { .gg-shell { padding-left: 20px; padding-right: 20px; } }

/* shared buttons of this page (elementor size-sm look) */
.banner-btn,
.gg-pbtn {
	display: inline-block;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.1;
	color: #fff;
	background-color: #10551F;
	border: none;
	border-radius: 6px;
	padding: 15px 24px;
	cursor: pointer;
	transition: background-color .3s ease, color .3s ease;
	white-space: nowrap;
}
.gg-pbtn--lime { background-color: #84bd00; }
.gg-pbtn--lime:hover { background-color: #10551F; }
.gg-pbtn--green:hover,
.banner-btn:hover { background-color: #84bd00; }
.banner-btn--lime { background-color: #84bd00; }
.banner-btn--lime:hover { background-color: #10551F; }

/* ---------- entrance animations (subtle, IntersectionObserver) ---------- */
@media (prefers-reduced-motion: no-preference) {
	[data-gg-anim] { opacity: 0; transition: opacity .7s ease, transform .7s ease; }
	[data-gg-anim="up"]   { transform: translateY(28px); }
	[data-gg-anim="zoom"] { transform: scale(.85); }
	[data-gg-anim].gg-in  { opacity: 1; transform: none; }
}

/* ==========================================================================
   1. HERO — full-viewport rounded panel with background video
   ========================================================================== */
.gg-hero { padding-top: 4px; }
.gg-hero__panel {
	position: relative;
	overflow: hidden;
	border-radius: 26px;
	background-color: #10551F;
	min-height: calc(100vh - 200px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 8vh 30px;
}
.gg-hero__video {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}
.gg-hero__video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.gg-hero__content { position: relative; z-index: 1; }

/* The hero title is the page's h1. Every rule that styles it is written
   class-only (here and in style.css), so the tag carries no styling of its
   own and the promotion from h2 is pixel-neutral. */
.banner-text2 {
	font-size: 80px;               /* kit c0f7fb0; style.css clamps at <=1600 */
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.8px;
	color: #fff;
	max-width: 900px;
	margin: 0 0 50px;
}
.banner-text2 .is-lime { color: #84bd00; }

.gg-hero__btns {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}
.gg-hero__btns .banner-btn--lime { background-color: #84bd00; }
.gg-hero__btns .banner-btn--lime:hover { background-color: #10551F; }

@media (max-width: 1024px) {
	.gg-hero__panel { min-height: 70vw; padding: 40px 20px; }
}
@media (max-width: 767px) {
	.gg-hero__panel { min-height: 130vw; padding: 60px 20px 20px; }
	.banner-text2 { margin: 0 0 20px; }
}
/* .pad-bot-mb (on .gg-hero__content) gets padding-bottom:200px <=991 from style.css */

/* ==========================================================================
   2. FEATURE STRIP
   ========================================================================== */
.gg-strip { margin-bottom: 12vh; }
.gg-strip__in {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 35px 0;
	border-bottom: 1px solid #e6e6e621;
}
.gg-strip__item {
	flex: 0 0 30%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: #fff;
}
.gg-strip__item i {
	color: #84bd00;
	font-size: 24px;
	line-height: 1;
}
@media (max-width: 1024px) {
	.gg-strip { margin-bottom: 60px; }
}
@media (max-width: 767px) {
	.gg-strip { margin-bottom: 40px; }
	.gg-strip__in { flex-direction: column; padding: 0; border-bottom: 0; }
	.gg-strip__item { flex: 1 1 auto; width: 100%; padding: 20px 0; }
	.gg-strip__item + .gg-strip__item { border-top: 1px solid #e6e6e621; }
}

/* ==========================================================================
   3. WELCOME TO / The Green Guard Turf
   ========================================================================== */
.gg-welcome { margin-bottom: 12vh; }
.gg-welcome__in {
	display: flex;
	justify-content: space-between;
	column-gap: 5%;
}

.gg-welcome__intro {
	flex: 1 1 33%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-top: 40px;
	position: relative;
}
.gg-welcome__intro .gg-h2 { max-width: 345px; margin-bottom: 40px; }

.gg-welcome__badge {
	display: flex;
	align-items: center;
	gap: 15px;
	max-width: 280px;
}
.gg-welcome__badge img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border: 5px solid #84bd00;
	border-radius: 100%;
	flex: 0 0 auto;
}
.gg-welcome__badge h6 {
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.3;
	color: #fff;
}

.gg-welcome__media {
	flex: 0 1 440px;
	min-width: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.gg-welcome__roll {
	position: absolute;
	left: -36%;
	top: 15%;
	width: 100%;
	max-width: 250px;
	transform: rotate(-21deg);
	z-index: 1;
}
.gg-welcome__stack {
	width: 80%;
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
}
.gg-welcome__video {
	display: flex;
	min-height: 580px;
	border-radius: 20px;
	overflow: hidden;
	background-image: url("/assets/images/wel-elem.png");
	background-position: center center;
	background-size: cover;
}
.video-bg { width: 100%; height: 100%; object-fit: cover; display: block; }

.gg-welcome__cta {
	width: 100%;
	background-color: #84bd00;
	border-radius: 20px;
	padding: 30px;
	margin-top: 10px;
}
.gg-welcome__btn {
	display: block;
	width: 100%;
	text-align: center;
	background-color: #fff;
	color: #10551F;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.1;
	padding: 15px 24px;
	border-radius: 6px;
	transition: background-color .3s ease, color .3s ease;
}
.gg-welcome__btn:hover { background-color: #10551F; color: #fff; }

.gg-welcome__text {
	flex: 1 1 33%;
	min-width: 0;
	padding-top: 80px;
}
.gg-welcome__text p {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: #fff;
	margin: 0 0 40px;
}
.gg-checklist {
	list-style: none;
	margin: 0;
	padding: 12px 0;
	border-top: 1px solid #e6e6e621;
	border-bottom: 1px solid #e6e6e621;
}
.gg-checklist li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12.5px 0;
	font-size: 14px;
	line-height: 1.4;
	color: #fff;
}
.gg-checklist li + li { border-top: 1px solid #e6e6e621; }
.gg-checklist .gg-pill {
	flex: 0 0 40px;
	width: 40px;
	height: 24px;
	background-color: #84bd00;
	border-radius: 100%;
}

@media (max-width: 1024px) and (min-width: 768px) {
	.gg-welcome__in { flex-wrap: wrap; row-gap: 30px; }
	.gg-welcome__intro { flex: 1 1 33%; }
	.gg-welcome__media { flex: 1 1 55%; }
	.gg-welcome__text { flex: 1 1 100%; padding-top: 0; }
}
@media (max-width: 767px) {
	.gg-welcome { margin-bottom: 40px; }
	.gg-welcome__in { flex-direction: column; row-gap: 20px; }
	.gg-welcome__intro { padding-top: 0; }
	.gg-welcome__intro .gg-h2 { margin-bottom: 20px; }
	.gg-welcome__roll { display: none; }
	.gg-welcome__media { order: 99; }
	.gg-welcome__stack { width: 100%; }
	.gg-welcome__video { min-height: 110vw; height: auto; }
	.gg-welcome__text { padding-top: 0; }
	.gg-welcome__text p { margin-bottom: 20px; }
	.gg-welcome__cta { padding: 17px; }
	.gg-checklist li { font-size: 15px; }
}

/* graphic curve (lime blurred blob — from the original inline styles) */
.graphic-curve {
	position: absolute;
	bottom: -45px;
	left: -50px;
	width: 300px;
	height: 300px;
	background: var(--team-primary-gradient);
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.3;
	z-index: -1;
}

/* ==========================================================================
   4. OUR SERVICES — green panel + expanding showcase
   ========================================================================== */
.gg-services { margin-bottom: 6vh; }
.gg-services__panel {
	background-color: #10551f;
	border-radius: 24px;
	padding: 89px 30px 54px;
}
.gg-services__panel .gg-h2 { text-align: center; margin-bottom: 40px; }
.gg-services__desc {
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	padding-bottom: 47px;
}
.gg-services__more { text-align: center; margin-top: 80px; }

@media (max-width: 767px) {
	.gg-services__panel { padding: 90px 20px 40px; }
	.gg-services__panel .gg-h2 { margin-bottom: 25px; }
	.gg-services__desc { font-size: 15px; line-height: 1.5; padding-bottom: 55px; }
	.gg-services__more { margin-top: 20px; }
}

/* --- image showcase (ported verbatim from the original inline styles) --- */
.image-showcase {
	display: flex;
	width: 100%;
	max-width: 100%;
	height: 650px;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.showcase-panel {
	flex-grow: 1;
	flex-basis: 0;
	transform: translateZ(0);
	background-size: cover;
	background-position: center;
	position: relative;
	cursor: pointer;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.showcase-panel:nth-child(1) { background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('/assets/images/1.jpg'); }
.showcase-panel:nth-child(2) { background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('/assets/images/2.jpg'); }
.showcase-panel:nth-child(3) { background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('/assets/images/3.jpg'); }
.showcase-panel:nth-child(4) { background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('/assets/images/4.jpg'); }
/* The flex-grow transition is armed on first pointer interaction (see the
   showcase script in index.html). Keeping it off the idle state prevents a
   Chrome full-page-capture artifact that rendered the panels mid-transition;
   real hover/click behavior is unchanged. */
.image-showcase.is-armed .showcase-panel {
	transition: flex-grow 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: flex-grow;
}
.showcase-panel.is-active,
.showcase-panel:hover { flex-grow: 5; }
.showcase-panel.is-active:nth-child(1),
.showcase-panel:hover:nth-child(1) { background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), url('/assets/images/1.jpg'); }
.showcase-panel.is-active:nth-child(2),
.showcase-panel:hover:nth-child(2) { background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), url('/assets/images/2.jpg'); }
.showcase-panel.is-active:nth-child(3),
.showcase-panel:hover:nth-child(3) { background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), url('/assets/images/3.jpg'); }
.showcase-panel.is-active:nth-child(4),
.showcase-panel:hover:nth-child(4) { background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), url('/assets/images/4.jpg'); }

.panel-content {
	color: white;
	padding: 20px;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
	position: relative;
}
.panel-content h2 {
	margin: 0;
	font-size: 1.8rem;
	white-space: nowrap;
	font-weight: 500;
}
.panel-content p { display: none; }
.showcase-panel.is-active .panel-content,
.showcase-panel:hover .panel-content {
	writing-mode: initial;
	transform: none;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}
.showcase-panel.is-active .panel-content h2,
.showcase-panel:hover .panel-content h2 {
	font-size: 2.5rem;
	margin-bottom: 10px;
}
.showcase-panel.is-active .panel-content p,
.showcase-panel:hover .panel-content p {
	display: block;
	font-size: 1rem;
	opacity: 1;
}
/* Panel deep-links (K9 GUARD ULTRA -> /pet-turf/, TOUR MASTER PRO ->
   /putting-greens/). Values are the owner's, verbatim: hidden until the panel
   is active or hovered, so the resting showcase is unchanged. display:none
   also keeps the hidden links out of the tab order. */
.panel-link {
	display: none;
	margin-top: 12px;
	color: #8ee000;
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(142, 224, 0, .5);
	padding-bottom: 2px;
}
.showcase-panel.is-active .panel-link,
.showcase-panel:hover .panel-link {
	display: inline-block;
}
@media (max-width: 768px) {
	.image-showcase {
		flex-direction: column;
		height: 90vh;
		width: 90%;
		max-width: none;
		overflow: hidden;
		margin: 0 auto;
	}
	.showcase-panel {
		width: 100%;
		height: 16.66% !important;
		transition: height 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		will-change: height;
		flex-grow: initial;
		flex-basis: initial;
	}
	.showcase-panel.is-active { height: 50% !important; }
	.panel-content {
		writing-mode: initial;
		transform: none;
		text-align: center;
		position: relative;
		padding: 10% 20px 0;
		background: none;
	}
	.showcase-panel.is-active .panel-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding-top: 20px;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
	}
	.showcase-panel.is-active .panel-content p { display: block; }
	.showcase-panel:not(.is-active) .panel-content p { display: none; }
}

/* ==========================================================================
   5. ADVANTAGE / Building Better Turf — 6 steps around the circular video
   ========================================================================== */
.gg-adv-head { padding-top: 34px; margin-bottom: 76px; text-align: center; }
.gg-adv-head .gg-h2 { max-width: 650px; margin: 0 auto; }

.gg-steps { margin-bottom: 6vh; }
.gg-steps__in { display: flex; gap: 20px; }

.gg-steps__col {
	flex: 1 1 25%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}
.gg-steps__col--right { align-items: flex-end; }

.gg-step {
	width: 85%;
	border: 1px solid #e6e6e621;
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.gg-steps__col--left .gg-step { text-align: right; }
.step-count {
	margin: 0;
	font-weight: 900;
	color: transparent;
	font-size: 70px;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #84bd00;
	line-height: 70%;
}
.gg-step h5 {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
	color: #10551F;
}
.gg-step p {
	font-size: 14px;
	line-height: 1.4;
	color: #fff;
}

.gg-steps__center {
	flex: 0 0 630px;
	min-height: 665px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.gg-circle {
	position: relative;
	width: 470px;
	background-color: #10551f;
	border-radius: 100%;
	padding: 25px;
}
.img-wrap {
	width: 100%;
	height: 400px;
	overflow: hidden;
	position: relative;
	display: block;
	will-change: transform;
	backface-visibility: hidden;
	border-radius: 50%;
}
.img-wrap video,
.img-wrap img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* lime divider accents around the circle (original absolute dividers) */
.gg-circle .gg-div {
	position: absolute;
	height: 0;
	border-top: 1px solid #84bd00;
}
.gg-div--1 { width: 100px; top: -30px;  left: -90px;  transform: rotate(-150deg); }
.gg-div--2 { width: 100px; top: -15px;  right: -100px; transform: rotate(150deg); }
.gg-div--3 { width: 30px;  top: 225px;  left: -120px; }
.gg-div--4 { width: 30px;  top: 243px;  right: -115px; }
.gg-div--5 { width: 100px; top: 490px;  left: -97px;  transform: rotate(150deg); }
.gg-div--6 { width: 100px; top: 500px;  right: -97px; transform: rotate(-150deg); }

@media (max-width: 1024px) {
	.gg-circle .gg-div { display: none; }
}
@media (max-width: 767px) {
	.gg-adv-head { margin-bottom: 20px; }
	.gg-steps { margin-bottom: 25px; }
	.gg-steps__in { flex-direction: column; gap: 20px; }
	.gg-step p { font-size: 15px; line-height: 1.4; }
	.gg-steps__center { order: -1; flex: 1 1 auto; min-height: 0; }
	.gg-circle { width: 270px; padding: 15px; }
	.gg-steps__col { align-items: center; gap: 20px; }
	.gg-step {
		width: 90%;
		border-width: 0 0 1px 0;
		padding-bottom: 20px;
	}
	.gg-steps__col--left .gg-step { text-align: left; }
}

/* request a quote row */
.gg-quote-row { text-align: center; margin-bottom: 54px; }
@media (max-width: 767px) { .gg-quote-row { margin-bottom: 40px; } }

/* ==========================================================================
   6. WHY CHOOSE — grass background band (ported inline styles)
   ========================================================================== */
.hero {
	position: relative;
	width: 100%;
	height: 750px;
	background: url(/assets/images/turf-gallery2.jpg) center / cover no-repeat;
	display: flex;
	justify-content: center;
	align-items: stretch;
	transition: background-image 0.5s ease-in-out;
}
.overlay {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	pointer-events: none;
}
.hero-text {
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: #fff;
	z-index: 2;
	padding: 20px;
	pointer-events: none;
	transition: opacity .3s ease;
}
.hero-text h1 {
	font-size: 60px;
	margin-bottom: 20px;
	font-weight: 900;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.hero-text p {
	font-size: 18px;
	line-height: 138%;
	max-width: 600px;
	margin: 10px auto 0;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.hero .content {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: 100%;
	z-index: 1;
}
.card {
	background: linear-gradient(0deg, black -29%, transparent 20%);
	padding: 20px;
	color: #fff;
	transition: transform 0.3s;
	cursor: default;
	border-right: 1px solid #a0a0a0;
	display: flex;
	flex-direction: column;
	justify-content: end;
}
.card:last-child { border: none; }
.card:hover { backdrop-filter: blur(2px); }
/* Original wraps each card's text in an Elementor child container, which the
   kit pads 30px left/right on desktop (20px <=1024px). */
.card > div { padding: 0 30px; }
@media (max-width: 1024px) { .card > div { padding: 0 20px; } }
.card h4 {
	font-size: 28px;
	font-weight: 600;
	color: #fff;
	line-height: 140%;
	text-align: left;
	margin: 0 0 15px;
}
.card p { margin: 10px 0; font-size: 14px; line-height: 1.4; }
@media (max-width: 768px) {
	.hero .content { grid-template-columns: 1fr; }
	.hero-text h1 { font-size: 40px; }
	.hero-text p { font-size: 18px; }
}
/* Original inline styles: fixed card height on small phones */
@media (max-width: 520px) {
	.card { height: 220px; }
}
.bg-h5 {
	color: #fff !important;
	font-size: 16px !important;
	margin: 0 !important;
}
.bg-wid {
	text-align: center !important;
	width: 100% !important;
	margin: 0 auto !important;
	max-width: 100% !important;
}
.bg-h2 {
	display: block !important;
	font-size: 2.5vw !important;
	text-align: center !important;
	color: #fff !important;
	width: 100% !important;
	font-weight: 500;
}

/* ==========================================================================
   7. WE LOVE THE WORK WE DO — black panel + grass video band
   ========================================================================== */
.gg-eff { margin-top: 4vh; margin-bottom: 6vh; }
.gg-eff__panel {
	background-color: #0A0A0A;
	border-radius: 24px 24px 0 0;
	padding: 86px 30px 80px;
}
.gg-eff__panel .gg-h2 {
	max-width: 650px;
	margin: 0 auto 35px;
	text-align: center;
}
.gg-eff__cols { display: flex; margin-top: 57px; }
.gg-eff__col {
	flex: 1 1 50%;
	min-width: 0;
	display: flex;
	align-items: flex-start;
	column-gap: 10px;
	padding-bottom: 20px;
}
.gg-eff__col--left { border-right: 1px solid #e6e6e621; }
.gg-eff__col--right { justify-content: flex-end; }
.gg-eff__icon { flex: 0 0 26px; height: 26px; }
.gg-eff__col p {
	max-width: 330px;
	margin: 20px 0 -15px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
}
.gg-eff__col--right p { text-align: right; }

.gg-eff__video {
	position: relative;
	overflow: hidden;
	border-radius: 26px;
	min-height: 779px;
	margin-top: -20px;
}
.gg-eff__video video {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 1024px) {
	.gg-eff__video { min-height: 60vw; }
}
@media (max-width: 767px) {
	.gg-eff { margin-top: 0; margin-bottom: 40px; }
	.gg-eff__panel { padding: 90px 20px 20px; }
	.gg-eff__cols { flex-direction: column; align-items: center; gap: 15px; }
	.gg-eff__col { border: 0; justify-content: center; padding-bottom: 0; }
	.gg-eff__icon { display: none; }
	.gg-eff__col p,
	.gg-eff__col--right p { text-align: center; margin: 10px 0; font-size: 17px; }
	.gg-eff__cols { margin-top: 10px; }
	.gg-eff__video { margin-top: 20px; }
}

/* ==========================================================================
   8. CLIENT REVIEWS — swiper slider (ported inline styles)
   ========================================================================== */
.gg-reviews-head { text-align: center; padding-top: 40px; }
.gg-reviews-head .gg-h2 { max-width: 650px; margin: 0 auto; }
/* original wraps this heading onto two lines on phones */
@media (max-width: 767px) {
	.gg-reviews-head .gg-h2 { max-width: 300px; }
}

.gg-reviews {
	width: 85%;
	margin: 0 auto;
	border: 1px solid #e6e6e621;
}
@media (max-width: 767px) {
	.gg-reviews { width: 90%; border-width: 0 0 1px 0; }
}

.aelirc-testimonial-slider {
	width: 100%;
	z-index: 10;
	position: relative;
}
.aelirc-testimonial-slider .swiper-slide {
	padding: 40px;
	background-color: #1B1B1B;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-sizing: border-box;
	height: auto;
}
@media (min-width: 768px) {
	.aelirc-testimonial-slider .swiper-slide { min-height: 411px; }
}
.testimonial-quote-text {
	font-size: 24px;
	font-weight: 500;
	color: #fff;
	line-height: 1.4;
	margin-bottom: 0px;
	max-width: 750px;
	padding: 0 20px;
}
.testimonial-quote-text strong { color: #84bd00; }
.author-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	margin-top: 30px;
}
.author-avatar {
	width: 55px;
	height: 55px;
	border-radius: 50%;
	background-color: var(--highlight-color);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}
.author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-details { text-align: left; }
.author-name {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 2px;
	color: #fff;
}
.author-title { font-size: 14px; color: #fff; }
.swiper-pagination-pb { padding-bottom: 15px; }
.aelirc-testimonial-slider .swiper-button-prev { left: 36px; }
.aelirc-testimonial-slider .swiper-button-next { right: 36px; }
.aelirc-testimonial-slider .swiper-button-prev,
.aelirc-testimonial-slider .swiper-button-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	background-color: #84bd00;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 18px;
	z-index: 10;
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s;
	box-shadow: 0 0 20px 20px #ffffff17;
	margin-top: 0;
}
.aelirc-testimonial-slider .swiper-button-prev:hover,
.aelirc-testimonial-slider .swiper-button-next:hover {
	background-color: #ffffff;
	box-shadow: 0 0 20px 20px #84bd001c;
	color: #84bd00;
}
.swiper-button-next:after,
.swiper-button-prev:after { display: none !important; }
@media (max-width: 450px) {
	.testimonial-quote-text { font-size: 16px; }
}

/* ==========================================================================
   9. VIDEO TESTIMONIALS  (#testimonial-section — ported inline styles;
      most rules already live in /assets/css/style.css; the overrides that the
      original applied via the LATER inline <style> block are repeated here)
   ========================================================================== */
#testimonial-section .container {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 20px;
}
#testimonial-section h5 { color: #8ee000; }
#testimonial-section h2 { font-size: 48px; font-weight: 600; }
@media (max-width: 768px) {
	#testimonial-section h2 { font-size: 36px; }
}
/* the inline block re-declared the pill widths as percentages (wins over
   the 180/220px in style.css) */
.testimonial-pill { width: 31%; }
.testimonial-pill.active { width: 31%; }
@media (max-width: 1200px) {
	.testimonial-pill { width: 160px; }
	.testimonial-pill.active { width: 200px; }
}
@media (max-width: 992px) {
	.testimonial-pill { width: 140px; }
	.testimonial-pill.active { width: 180px; }
}
@media (max-width: 768px) {
	.testimonial-pill { width: 120px; }
	.testimonial-pill.active { width: 150px; }
}
@media (max-width: 576px) {
	.testimonial-pill { width: 100px; padding: 10px; }
	.testimonial-pill.active { width: 130px; }
}
@media (max-width: 400px) {
	.testimonial-pill { width: 90px; }
	.testimonial-pill.active { width: 110px; }
}

/* ==========================================================================
   10. BLOGS — team-block (ported inline styles)
   ========================================================================== */
.team-block {
	padding: 100px 0 30px;
	position: relative;
}
.team-block .container {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 20px;
}
.team-block__watermark {
	position: absolute;
	top: 0px;
	left: 26%;
	transform: translateX(-50%);
	font-size: 13vw !important;
	font-weight: 800 !important;
	z-index: 1;
	pointer-events: none;
	line-height: 1 !important;
	white-space: nowrap;
	color: transparent !important;
	background-clip: text !important;
	-webkit-background-clip: text;
	text-shadow: 0 0 5px rgba(0, 0, 0, 0.01);
	margin: 0;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: #2f2f2f;
}
.team-block__content {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 40px;
	position: relative;
	z-index: 2;
	align-items: start;
}
.team-block__intro { padding-top: 30px; }
.team-block__title {
	font-size: 40px !important;
	margin-bottom: 25px;
	line-height: 1.2 !important;
	font-weight: 500;
}
.team-block__quote {
	font-style: italic;
	color: var(--team-text-light);
	line-height: 1.6;
	margin-bottom: 35px;
	font-size: 16px;
	border-left: 3px solid var(--team-explore-color);
	padding-left: 15px;
}
.team-block__cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 25px;
	padding: 20px 0;
	margin-top: 30px;
	align-items: start;
}
.member-card {
	background-color: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 10px 40px rgb(59 59 59 / 5%);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.member-card:hover {
	transform: translateY(-12px);
	box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1);
}
.team-block__cards > div:nth-child(2),
.team-block__cards > div:nth-child(3) { margin-top: 0 !important; }
.member-card__media {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--team-card-bg);
}
.member-card__media img { width: 100%; display: block; }
.member-card__info {
	text-align: center;
	padding: 30px 15px 25px;
	background-color: #101010;
}
.member-card__name {
	font-size: 19px;
	font-weight: 700;
	margin-bottom: 5px;
	color: #fff;
}
.member-card__role {
	font-size: 14px;
	color: var(--team-text-light);
	margin-bottom: 10px;
}
@media (max-width: 1550px) {
	.team-block__watermark { left: 20% !important; }
}
@media (max-width: 992px) {
	.team-block__content { grid-template-columns: 1fr; gap: 50px; }
	.team-block__intro { text-align: center; padding-top: 0; }
	.team-block__title { font-size: 36px; }
	.team-block__cards { grid-template-columns: repeat(2, minmax(200px, 1fr)); margin-top: 0; }
	.team-block__quote {
		margin: 20px auto 30px;
		border-left: none;
		padding-left: 0;
		max-width: 500px;
	}
}
@media (max-width: 767px) {
	.team-block__cta { display: none; }   /* original hides Read All Blogs on mobile */
}
@media (max-width: 600px) {
	.team-block__cards { grid-template-columns: 1fr; }
	.team-block__title { font-size: 25px !important; }
	.team-block__watermark {
		font-size: 25vw;
		top: 36px;
		left: 50% !important;
	}
}