/* Sparkle Fiber — brand overrides (see BRAND.md). Loads after all parent styles. */

:root {
	--color-primary: #2A758F;      /* brand teal — nav, structure, primary accents */
	--color-secondary: #02897A;    /* accent orange — CTAs, highlights */
	--color-seconary: #02897A;     /* theme typo variant, keep in sync */
	--color-heading: #023040;      /* dark teal — headings */
	--dark: #023040;               /* dark sections / footer */
	--dark-secondary: #0A3A48;
	--color-paragraph: #3A4A50;
}

/* Logo holder backdrop (angled shape) -> dark teal so the logo blends into header */
.top-bar-area .logo a::after,
.logo a::after,
header .logo a::after {
	background: #023040 !important;
}

/* Subtle boundaries to define header regions now that all are dark teal */
.top-bar-area {
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.navbar.nav-box {
	border: 1px solid rgba(255, 255, 255, 0.12);
}
/* Divider before the search icon in the nav */
.navbar.nav-box .attr-nav {
	border-left: 1px solid rgba(255, 255, 255, 0.12);
}

/* Main navigation bar -> dark teal (matches logo bg / topbar) */
.navbar.nav-box,
.navbar.nav-box.navbar-fixed,
.navbar.bootsnav.nav-box,
header .navbar.nav-box {
	background-color: #023040 !important;
}
/* Sticky/scrolled state also dark teal */
.navbar.navbar-fixed.sticked,
.navbar.bootsnav.sticked,
.navbar.bootsnav.navbar-scrolled {
	background-color: #023040 !important;
}
/* Dropdown menus -> dark teal to match */
.navbar.nav-box .navbar-nav .dropdown-menu {
	background-color: #023040 !important;
}
.navbar.nav-box .navbar-nav .dropdown-menu > li > a {
	color: #E6EEF0 !important;
}
.navbar.nav-box .navbar-nav .dropdown-menu > li > a:hover {
	color: #02897A !important;
}

/* Style 4 header (navbar-regular navbar-common) -> dark teal, used site-wide
   after simplifying the header. White logo + light menu text sit on this. */
.navbar.navbar-common,
.navbar.navbar-regular,
header .navbar.navbar-common,
.navbar.navbar-common.sticked,
.navbar.bootsnav.navbar-common.navbar-scrolled {
	background-color: #023040 !important;
}
.navbar.navbar-common .navbar-nav > li > a {
	color: #E6EEF0 !important;
}
.navbar.navbar-common .navbar-nav > li > a:hover,
.navbar.navbar-common .navbar-nav > li.active > a,
.navbar.navbar-common .navbar-nav > li.current-menu-item > a {
	color: #02897A !important;
}
.navbar.navbar-common .navbar-nav .dropdown-menu {
	background-color: #023040 !important;
}
.navbar.navbar-common .navbar-nav .dropdown-menu > li > a { color: #E6EEF0 !important; }
.navbar.navbar-common .navbar-nav .dropdown-menu > li > a:hover { color: #02897A !important; }
.navbar.navbar-common .navbar-toggle { color: #E6EEF0 !important; }
.navbar.navbar-common .navbar-brand img.logo { max-height: 54px; width: auto; }

/* Pricing cards: stack the feature lines; keep featured (dark) card legible */
.pricing-item {
	white-space: pre-line;
}
.pricing-item.active {
	color: #E6EEF0 !important;
}

/* Hero / gradient blocks -> brand teal gradient (was hardcoded cyan-blue) */
.gradient-bg {
	background-image: linear-gradient(90deg, #2A758F 23%, #023040 100%) !important;
}

/* Primary call-to-action buttons -> orange (matches flyer CTAs) */
.btn.btn-theme,
.btn.btn-theme.primary,
.btn-theme,
.button-primary,
.elementor-button-wrapper .elementor-button {
	background-color: #02897A !important;
	border-color: #02897A !important;
	color: #ffffff !important;
}
/* hover-fill overlay -> dark teal */
.btn.btn-theme::before,
.btn.btn-theme.primary::before {
	background-color: #023040 !important;
}
.btn.btn-theme:hover,
.btn.btn-theme.primary:hover,
.btn-theme:hover,
.elementor-button-wrapper .elementor-button:hover {
	border-color: #023040 !important;
	color: #ffffff !important;
}

/* Sparkle Fiber — inline video popup (portrait client footage) */
.sf-video-mfp .mfp-container { padding: 16px; }
.sf-video-wrap {
	position: relative;
	max-width: 420px;
	margin: 0 auto;
	background: #000;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.sf-video-wrap video {
	display: block;
	width: 100%;
	max-height: 82vh;
	height: auto;
}

/* Service/feature cards (featured_two) — align titles + descriptions across each row */
.feature-style-three .item {
	height: 100%;
}
.feature-style-three .top h4 {
	min-height: 2.5em;            /* fits 1- and 2-line titles so descriptions align */
	display: flex;
	align-items: flex-end;
}
/* Mobile — center the service tile titles to match the centered icon + copy */
@media (max-width: 767px) {
	.feature-style-three .top h4 {
		justify-content: center;
		text-align: center;
		min-height: 0;
	}
	.feature-style-three .item { text-align: center; }
}

/* Homepage transparent header on scroll -> white bar + darker logo + dark text */
.navbar.bootsnav.navbar-fixed.navbar-transparent.sticked,
.navbar.bootsnav.navbar-transparent.navbar-scrolled {
	background-color: #ffffff !important;
	box-shadow: 0 2px 14px rgba(2, 48, 64, 0.10) !important;
}
.navbar.navbar-transparent.sticked .navbar-nav > li > a,
.navbar.navbar-transparent.navbar-scrolled .navbar-nav > li > a {
	color: #023040 !important;
}
.navbar.navbar-transparent.sticked .navbar-nav > li > a:hover,
.navbar.navbar-transparent.sticked .navbar-nav > li.active > a,
.navbar.navbar-transparent.sticked .navbar-nav > li.current-menu-item > a {
	color: #02897A !important;
}

/* Pricing cards — align titles, prices and buttons across the 3 cards */
.pricing-item {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.pricing-item .pricing-header h4 {
	min-height: 2.4em;           /* 1- and 2-line titles align -> prices line up */
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0;
}
.pricing-item > a.btn {
	margin-top: auto;            /* pin the button to the bottom of each card */
}
/* Breathing room above the CTA + off the card's bottom edge */
.pricing-item {
	padding-bottom: 40px !important;
}
.pricing-item > a.btn {
	margin-top: 34px !important; /* guaranteed gap even in the shortest card */
}

/* Appointment section — client video as an autoplaying background loop (replaces stock cutout) */
.sf-appoint-video {
	display: block;
	width: 100%;
	max-width: 340px;
	height: auto;
	max-height: 520px;
	object-fit: cover;
	border-radius: 16px;
	box-shadow: 0 18px 50px rgba(2, 48, 64, 0.35);
	margin: 0 auto;
}

/* Hidden for now: testimonials (temporary) + blog (not used) homepage sections */
.elementor-element-c0b91d7,
.elementor-element-992624d {
	display: none !important;
}
/* Footer copyright — white + centered.
   Its column wrap is flex, so the text box shrinks to content and sits left;
   center the flex row + full-width the box so it truly centers on the page. */
.elementor-element-345151c {
	justify-content: center !important;
}
.elementor-element-e60692a {
	width: 100% !important;
}
.elementor-element-e60692a,
.elementor-element-e60692a * {
	color: #ffffff !important;
	text-align: center !important;
}

/* Before / after comparison slider (client couch clean) */
.sf-ba {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 16px;
	box-shadow: 0 18px 50px rgba(2, 48, 64, 0.28);
	touch-action: none;
	user-select: none;
	cursor: ew-resize;
	background: #023040;
}
.sf-ba img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}
.sf-ba-before {
	clip-path: inset(0 50% 0 0);
	z-index: 2;
}
.sf-ba-handle {
	position: absolute;
	top: 0;
	left: 50%;
	width: 4px;
	height: 100%;
	margin-left: -2px;
	background: #ffffff;
	z-index: 3;
	cursor: ew-resize;
}
.sf-ba-knob {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #02897A;
	border: 3px solid #ffffff;
	box-shadow: 0 4px 14px rgba(2, 48, 64, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 18px;
	line-height: 1;
}
.sf-ba-label {
	position: absolute;
	bottom: 16px;
	z-index: 4;
	padding: 5px 14px;
	border-radius: 30px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #ffffff;
	background: rgba(2, 48, 64, 0.72);
	pointer-events: none;
}
.sf-ba-label-before { left: 16px; }
.sf-ba-label-after { right: 16px; background: rgba(2, 137, 122, 0.85); }
/* Mobile — breathing room below the slider before the copy */
@media (max-width: 767px) {
	.sf-ba { margin-bottom: 32px; }
}

/* Real Results — before/after showcase (sliders + client videos) */
.sf-results {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 15px;
	text-align: center;
}
.sf-results-eyebrow {
	color: #2A758F;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 8px;
}
.sf-results-title {
	color: #023040;
	font-weight: 800;
	margin: 0 0 12px;
}
.sf-results-sub {
	color: #3A4A50;
	max-width: 620px;
	margin: 0 auto;
}
.sf-results-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin-top: 40px;
	align-items: start;
}
.sf-results-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.sf-results-cap {
	font-size: 15px;
	font-weight: 600;
	color: #023040;
}
/* portrait slider variant (shower) */
.sf-ba-portrait { aspect-ratio: 3 / 4; }
/* client videos in the grid — fill the cell, portrait phone footage */
.sf-results-video {
	width: 100% !important;
	max-width: 100% !important;
	max-height: none !important;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 16px;
	box-shadow: 0 18px 50px rgba(2, 48, 64, 0.28);
	margin: 0 !important;
	background: #023040;
}
@media (max-width: 991px) {
	.sf-results-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.sf-results-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
}

/* Residual orange (#ffb400) cleanup -> brand colours, site-wide (inner pages) */
.about-style-six ul li::after,
.banner-area.auto-height.banner-style-four .content li::after {
	background: #02897A !important;
	color: #ffffff !important;
}
.banner-area.banner-style-four .banner-items .thumb i:nth-child(3) {
	background: #02897A !important;
}
.estimate-area {
	background: #023040 !important;
}

/* About — "Why Sparkle Fiber" value cards */
.sf-why { max-width: 1180px; margin: 0 auto; padding: 0 15px; text-align: center; }
.sf-why-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	margin-top: 34px;
}
.sf-why-card {
	background: #ffffff;
	border: 1px solid #e7edef;
	border-radius: 16px;
	padding: 30px 22px;
	box-shadow: 0 10px 30px rgba(2, 48, 64, 0.06);
	text-align: center;
}
.sf-why-ico { font-size: 36px; line-height: 1; display: block; margin-bottom: 16px; color: #02897A; }
.sf-why-ico i { color: #02897A; }
.sf-why-title { color: #023040; font-weight: 800; font-size: 18px; margin: 0 0 8px; }
.sf-why-card p { color: #3A4A50; font-size: 15px; margin: 0; }

/* About — team grid (placeholder avatars until real photos land) */
.sf-team { max-width: 1080px; margin: 0 auto; padding: 0 15px; text-align: center; }
.sf-team-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin-top: 36px;
}
.sf-team-card {
	background: #ffffff;
	border: 1px solid #e7edef;
	border-radius: 16px;
	padding: 28px 18px;
	box-shadow: 0 10px 30px rgba(2, 48, 64, 0.06);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.sf-team-photo { width: 120px; height: 120px; }
.sf-team-av { width: 100%; height: 100%; display: block; border-radius: 50%; }
.sf-team-role { color: #023040; font-weight: 700; font-size: 16px; }
@media (max-width: 991px) {
	.sf-why-grid { grid-template-columns: repeat(2, 1fr); }
	.sf-team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
	.sf-why-grid, .sf-team-grid { grid-template-columns: 1fr; max-width: 360px; margin-left: auto; margin-right: auto; }
}

/* Footer social icons */
.sf-social { display: flex; gap: 12px; margin-top: 20px; }
.sf-social a {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff !important;
	font-size: 17px;
	transition: background 0.25s ease, transform 0.25s ease;
}
.sf-social a:hover { background: #02897A; transform: translateY(-2px); }
@media (max-width: 767px) { .sf-social { justify-content: flex-start; } }

/* Service checklist ticks — white badge so the green check reads on the teal panel */
.services-types-area .item ul li::after {
	background: #ffffff !important;
	color: #02897A !important;
}

/* Footer (desktop) — two columns, brand + contact both LEFT-aligned.
   Copyright stays centered via its own rule above. */
.elementor-element-442610d,
.elementor-element-442610d .elementor-widget-container,
.elementor-element-3c395f9,
.elementor-element-3c395f9 .elementor-widget-container,
.elementor-element-d094d04 {
	text-align: left !important;
}
/* logo — left, sensible size */
.elementor-element-6bf4a76 img {
	max-width: 260px !important;
	width: auto !important;
	margin: 0 !important;
	display: inline-block !important;
}
/* contact list — left-aligned icon + text rows */
.elementor-element-3c395f9 .address ul {
	display: block;
	margin: 0;
	max-width: 100%;
	list-style: none;
	padding: 0;
}
.elementor-element-3c395f9 .address li,
.elementor-element-3c395f9 .address li:first-child {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 12px;
	text-align: left;
	margin-bottom: 16px;
}
@media (max-width: 767px) {
	.elementor-element-6bf4a76 img { max-width: 188px !important; margin: 0 !important; }
	/* Mobile footer — left-align everything + comfortable side padding */
	.elementor-element-442610d,
	.elementor-element-442610d .elementor-widget-container,
	.elementor-element-3c395f9,
	.elementor-element-3c395f9 .elementor-widget-container {
		text-align: left !important;
	}
	.elementor-element-442610d,
	.elementor-element-3c395f9 {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
	/* breathing room above the logo (off the section's top edge) */
	.elementor-element-442610d { padding-top: 36px !important; }
	/* separate the contact block from the brand block (two stacked sections) */
	.elementor-element-3c395f9 { padding-top: 34px !important; }
	.elementor-element-3c395f9 .address ul {
		margin: 0;
		max-width: 100%;
	}
	.elementor-element-3c395f9 .address li,
	.elementor-element-3c395f9 .address li:first-child {
		justify-content: flex-start;
		text-align: left;
	}
}

/* Mobile hero — ensure the image + content layers fill at least 60vh
   (the bg image lives on .carousel-item/.box-table, so stretch those too) */
@media (max-width: 767px) {
	.banner-area,
	.banner-area .carousel,
	.banner-area .carousel-inner,
	.banner-area .carousel-item,
	.banner-area .box-table,
	.banner-area .box-cell,
	#bootcarousel,
	#bootcarousel .carousel-inner,
	#bootcarousel .carousel-item,
	#bootcarousel .box-table,
	#bootcarousel .box-cell {
		min-height: 60vh !important;
	}
}

/* Pricing — center all card content */
.pricing-item,
.pricing-item .pricing-header,
.pricing-item .price,
.pricing-item .pricing-body {
	text-align: center !important;
}
/* Featured (dark) card — force every line to a legible light tone
   (feature list + "FROM, PER…" subtext were low-contrast grey) */
.pricing-item.active,
.pricing-item.active * {
	color: #EAF2F4 !important;
}
.pricing-item.active .price h2,
.pricing-item.active .price h2 sup {
	color: #ffffff !important;
}

/* Pricing — make the price read stronger */
.pricing-item .price h2 {
	font-size: 64px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	color: #023040 !important;
}
.pricing-item.active .price h2 { color: #ffffff !important; }
.pricing-item .price h2 sup {
	font-size: 26px !important;
	font-weight: 700 !important;
	top: -0.7em;
	margin-right: 2px;
}
.pricing-item .pricing-header h4 {
	font-weight: 800 !important;
}