/* Kunify enhancements */

/* "Our Packages" card images — SP Page Builder's own compiled CSS for this
   page came back empty from the export/import, so these background-images
   (configured in the addon settings, files present on disk) never appeared.
   Values pulled directly from the saved addon settings. */
#sppb-addon-1774961251507 .sppb-flipbox-front { background-image: url('../../../images/2026/04/01/growth-1_1.jpg'); background-size: cover; background-position: center; }
#sppb-addon-1774961251507 .sppb-flipbox-back  { background-image: url('../../../images/2026/04/01/growth-1_5.jpg'); background-size: cover; background-position: center; }

#sppb-addon-1774961254615 .sppb-flipbox-front { background-image: url('../../../images/2026/04/01/growth-1_2.jpg'); background-size: cover; background-position: center; }
#sppb-addon-1774961254615 .sppb-flipbox-back  { background-image: url('../../../images/2026/04/01/growth-1_6.jpg'); background-size: cover; background-position: center; }

#sppb-addon-1774961259843 .sppb-flipbox-front { background-image: url('../../../images/2026/04/01/growth-1_3.jpg'); background-size: cover; background-position: center; }
#sppb-addon-1774961259843 .sppb-flipbox-back  { background-image: url('../../../images/2026/04/01/growth-1_7.jpg'); background-size: cover; background-position: center; }

#sppb-addon-1774961257431 .sppb-flipbox-front { background-image: url('../../../images/2026/04/01/growth-1_4.jpg'); background-size: cover; background-position: center; }
#sppb-addon-1774961257431 .sppb-flipbox-back  { background-image: url('../../../images/2026/04/01/growth-1_8.jpg'); background-size: cover; background-position: center; }

:root {
	--k3d-brand: #0e6e58; /* Kunify's real logo teal-green (not the theme's default blue links) */
	--k3d-brand-rgb: 14, 110, 88;
}

/* 1) Contact-style hero: hides the underlying slider, replaces it with a
   two-column "we'd love to hear from you" layout + scrubbing video. */
.k3d-hero-has-newdesign > .sp-item {
	visibility: hidden !important;
}

.k3d-new-hero {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	background: #fff;
	overflow: hidden auto;
}

.k3d-nh-text {
	flex: 1 1 55%;
	min-width: 0;
	max-width: 640px;
	padding: 3rem clamp(1.5rem, 5vw, 5rem);
}

.k3d-nh-headline {
	font-size: clamp(2.25rem, 4.5vw, 3.375rem);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: #1a1a1a; /* matches Kunify's real body text (#252525) / black header-footer */
	margin: 0 0 1.5rem;
	white-space: pre-wrap;
}

.k3d-nh-cursor {
	display: inline-block;
	width: 2px;
	height: .9em;
	background: var(--k3d-brand);
	vertical-align: middle;
	margin-inline-start: 2px;
	animation: k3d-blink 1s step-end infinite;
}

@keyframes k3d-blink {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0; }
}

.k3d-nh-desc {
	font-size: 1.05rem;
	line-height: 1.6;
	color: #5a5a5a; /* neutral gray, no unrelated blue tint */
	max-width: 38rem;
	margin: 0 0 2.5rem;
}

.k3d-nh-services-title {
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #1a1a1a;
	margin-bottom: .25rem;
}

.k3d-nh-services-subtitle {
	color: var(--k3d-brand);
	opacity: .75;
	margin-bottom: 1.25rem;
}

.k3d-nh-pills {
	display: flex;
	flex-wrap: wrap;
	gap: .625rem;
	margin-bottom: 1.25rem;
}

.k3d-nh-pill {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .6rem 1.1rem;
	border-radius: 999px;
	border: 1px solid rgba(0, 0, 0, .1);
	background: #fff;
	color: var(--k3d-brand);
	font-size: .9rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.k3d-nh-pill:hover {
	background: rgba(var(--k3d-brand-rgb), .08);
}

.k3d-nh-pill.is-active {
	background: var(--k3d-brand);
	color: #fff;
	border-color: var(--k3d-brand);
	box-shadow: 0 6px 16px rgba(var(--k3d-brand-rgb), .22);
}

.k3d-nh-pill-check {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	transform: scale(0);
	transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); /* spring-like pop */
}

.k3d-nh-pill.is-active .k3d-nh-pill-check {
	transform: scale(1);
}

.k3d-nh-banner-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .35s ease;
}

.k3d-nh-banner-wrap.has-selection {
	grid-template-rows: 1fr;
}

.k3d-nh-banner-inner {
	overflow: hidden;
}

.k3d-nh-banner-empty {
	font-size: .75rem;
	font-style: italic;
	opacity: .5;
	padding-top: .5rem;
}

.k3d-nh-banner-active {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	background: rgba(var(--k3d-brand-rgb), .05);
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 1rem;
	padding: 1rem 1.25rem;
	margin-top: .5rem;
}

.k3d-nh-banner-wrap.has-selection .k3d-nh-banner-empty { display: none; }
.k3d-nh-banner-wrap.has-selection .k3d-nh-banner-active { display: flex; }

.k3d-nh-banner-text {
	font-size: .9rem;
	color: #1a1a1a;
}

.k3d-nh-lets-go {
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--k3d-brand);
	white-space: nowrap;
	text-decoration: none;
}

.k3d-nh-lets-go:hover {
	text-decoration: underline;
}

.k3d-nh-video-wrap {
	flex: 1 1 45%;
	min-width: 0;
	align-self: stretch;
	position: relative;
	overflow: hidden;
	background: #f2f4f8;
}

.k3d-nh-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	display: block;
}

@media (max-width: 991px) {
	.k3d-new-hero {
		flex-direction: column;
		height: auto;
		min-height: 100%;
	}
	.k3d-nh-text {
		max-width: none;
		padding: 2rem 1.5rem;
	}
	.k3d-nh-video-wrap {
		aspect-ratio: 16 / 10;
		flex: none;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.k3d-nh-cursor { animation: none; }
	.k3d-nh-pill, .k3d-nh-pill-check, .k3d-nh-banner-wrap { transition: none; }
}

/* 2) Portfolio card 3D tilt */
.k3d-tilt-perspective {
	perspective: 1000px;
}

.k3d-tilt {
	transition: transform .3s ease-out; /* Motion-Driven spec: hover transitions 300-400ms */
	will-change: transform;
}

/* 3) Scroll reveal 3D */
.k3d-reveal {
	opacity: 0;
	transform: perspective(900px) translateY(50px) rotateX(-12deg);
	transition: opacity .7s ease, transform .7s ease;
}

.k3d-reveal.k3d-in {
	opacity: 1;
	transform: perspective(900px) translateY(0) rotateX(0deg);
}

@media (prefers-reduced-motion: reduce) {
	.k3d-shape,
	.k3d-reveal {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* 4) Service estimator — "blueprint" cards that solidify on selection */
.k3d-calc-section {
	background: #fafafa;
	padding: 4rem 1.5rem;
}

.k3d-calc-inner {
	max-width: 1170px;
	margin: 0 auto;
}

.k3d-calc-head {
	text-align: center;
	max-width: 40rem;
	margin: 0 auto 3rem;
}

.k3d-calc-eyebrow {
	display: inline-block;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--k3d-brand);
	margin-bottom: .75rem;
}

.k3d-calc-title {
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 500;
	letter-spacing: -0.01em;
	color: #1a1a1a;
	margin: 0 0 .75rem;
}

.k3d-calc-subtitle {
	color: #5a5a5a;
	font-size: 1.05rem;
	line-height: 1.6;
}

.k3d-calc-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 2.5rem;
	align-items: start;
}

@media (max-width: 900px) {
	.k3d-calc-layout {
		grid-template-columns: 1fr;
	}
}

.k3d-calc-group + .k3d-calc-group {
	margin-top: 2rem;
}

.k3d-calc-group-title {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-size: .95rem;
	font-weight: 700;
	color: #1a1a1a;
	margin-bottom: 1rem;
}

.k3d-calc-group-title svg {
	width: 18px;
	height: 18px;
	color: var(--k3d-brand);
}

.k3d-calc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: .875rem;
}

/* Blueprint sketch state: dashed, faint, technical-drawing feel */
.k3d-calc-card {
	position: relative;
	text-align: start;
	cursor: pointer;
	padding: 1rem 1.1rem;
	border-radius: .75rem;
	border: 1.5px dashed #c9cdc9;
	background: transparent;
	color: #5a5a5a;
	transition: border-color .25s ease, background-color .25s ease, color .25s ease, transform .2s ease;
}

.k3d-calc-card-name {
	display: block;
	font-size: .95rem;
	font-weight: 600;
	color: #1a1a1a;
	margin-bottom: .2rem;
}

.k3d-calc-card-price {
	display: block;
	font-size: .8rem;
	color: #8a8a8a;
}

.k3d-calc-card-check {
	position: absolute;
	top: .75rem;
	inset-inline-end: .75rem;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	border: 1.5px dashed #c9cdc9;
	transition: all .25s ease;
}

.k3d-calc-card-check svg {
	width: 11px;
	height: 11px;
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

/* Solidified state: the sketch "comes to life" once picked */
.k3d-calc-card.is-selected {
	border-style: solid;
	border-color: var(--k3d-brand);
	background: rgba(var(--k3d-brand-rgb), .05);
	color: #1a1a1a;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(var(--k3d-brand-rgb), .12);
}

.k3d-calc-card.is-selected .k3d-calc-card-check {
	border-style: solid;
	background: var(--k3d-brand);
	border-color: var(--k3d-brand);
}

.k3d-calc-card.is-selected .k3d-calc-card-check svg {
	transform: translate(-50%, -50%) scale(1);
}

/* Summary panel: builds a live "stacked invoice" bar as services are added */
.k3d-calc-summary {
	position: sticky;
	top: 1.5rem;
	border: 1px solid #ececec;
	border-radius: 1rem;
	background: #fff;
	padding: 1.5rem;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .05);
}

.k3d-calc-summary-title {
	font-size: .85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #8a8a8a;
	margin-bottom: 1rem;
}

.k3d-calc-bar {
	display: flex;
	width: 100%;
	height: 10px;
	border-radius: 999px;
	overflow: hidden;
	background: #f0f0f0;
	margin-bottom: 1.25rem;
}

.k3d-calc-bar-empty {
	flex: 1;
}

.k3d-calc-bar-seg {
	height: 100%;
	transition: flex-basis .4s ease;
}

.k3d-calc-total-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: .25rem;
}

.k3d-calc-total-label {
	font-size: .9rem;
	color: #5a5a5a;
}

.k3d-calc-total-value {
	font-size: 1.8rem;
	font-weight: 600;
	color: #1a1a1a;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.k3d-calc-timeline {
	font-size: .85rem;
	color: #8a8a8a;
	margin-bottom: 1.25rem;
}

.k3d-calc-empty-hint {
	font-size: .85rem;
	font-style: italic;
	color: #8a8a8a;
	opacity: .8;
}

.k3d-calc-selected-list {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .4rem;
	max-height: 160px;
	overflow-y: auto;
}

.k3d-calc-selected-list li {
	display: flex;
	justify-content: space-between;
	gap: .5rem;
	font-size: .85rem;
	color: #444;
}

.k3d-calc-cta {
	display: block;
	width: 100%;
	text-align: center;
	padding: .85rem 1rem;
	border-radius: .65rem;
	background: var(--k3d-brand);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	transition: opacity .2s ease;
}

.k3d-calc-cta:hover {
	opacity: .88;
	color: #fff;
}

.k3d-calc-cta[aria-disabled="true"] {
	pointer-events: none;
	background: #e0e0e0;
	color: #9a9a9a;
}

.k3d-calc-reset {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	width: 100%;
	margin-top: .6rem;
	background: none;
	border: none;
	color: #8a8a8a;
	font-size: .8rem;
	cursor: pointer;
	padding: .4rem;
}

.k3d-calc-reset:hover { color: #1a1a1a; }
.k3d-calc-reset svg { width: 13px; height: 13px; }

@media (prefers-reduced-motion: reduce) {
	.k3d-calc-card, .k3d-calc-card-check, .k3d-calc-card-check svg, .k3d-calc-bar-seg {
		transition: none !important;
	}
}

/* 5) FAQ accordion */
.k3d-faq-section {
	padding: 4rem 1.5rem;
	background: #fff;
}

.k3d-faq-inner {
	max-width: 1170px;
	margin: 0 auto;
}

.k3d-faq-head {
	text-align: center;
	max-width: 40rem;
	margin: 0 auto 3rem;
}

.k3d-faq-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: start;
}

@media (max-width: 900px) {
	.k3d-faq-layout {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

.k3d-faq-form-slot {
	border: 1px solid #ececec;
	border-radius: 1rem;
	background: #fafafa;
	padding: 1.75rem;
}

.k3d-faq-whatsapp {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .85rem 1rem;
	margin-bottom: 1.25rem;
	border: 1.5px solid rgba(37, 211, 102, .35);
	border-radius: .75rem;
	background: rgba(37, 211, 102, .08);
	color: #1a7a3e;
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease;
}

.k3d-faq-whatsapp:hover {
	background: rgba(37, 211, 102, .16);
	border-color: rgba(37, 211, 102, .6);
	color: #1a7a3e;
}

.k3d-faq-whatsapp svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.k3d-faq-form-slot .sppb-row-column,
.k3d-faq-form-slot .sppb-column,
.k3d-faq-form-slot .sppb-column-addons {
	/* SP Page Builder also generates an ID-scoped rule for this same column
	   (e.g. #column-wrap-id-X{max-width:50%}) sized for its ORIGINAL row —
	   an ID selector outranks this class selector on specificity alone, so
	   without !important that stale width wins over this 100% intent. */
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	padding: 0;
	margin: 0;
	/* SP Page Builder positions columns absolutely (per-id coordinates meant
	   for their original row) — once moved here that leaves this box with
	   nothing in normal flow, collapsing its height. Force it back to flow. */
	position: static !important;
	top: auto !important;
	inset-inline-start: auto !important;
	inset-inline-end: auto !important;
	height: auto !important;
}

/* The form addon ships a 50% black background meant to sit as a translucent
   panel over the map image in its original spot — left as-is it reads as a
   dark overlay/shadow now that the form lives in our plain light card. */
.k3d-faq-form-slot .sppb-addon-form-builder {
	background: transparent !important;
}

/* Same story for the input text itself: white, meant to be legible on that
   dark overlay — invisible (white-on-white) against our plain light card. */
.k3d-faq-form-slot .sppb-form-control {
	color: #1a1a1a !important;
}

.k3d-faq-form-slot .sppb-form-control::placeholder {
	color: #8a8a8a;
}

/* The submit button is styled white-text-on-transparent by default (only
   turning solid + dark text on hover) — again designed for the dark overlay
   we removed above. Give it real always-visible brand styling instead of
   relying on hover to reveal it. */
.k3d-faq-form-slot .sppb-btn.sppb-btn-default {
	color: #fff;
	background: var(--k3d-brand);
	border-color: var(--k3d-brand);
}

.k3d-faq-form-slot .sppb-btn.sppb-btn-default:hover {
	color: #fff;
	background: #0b5c48;
	border-color: #0b5c48;
}

.k3d-faq-eyebrow {
	display: inline-block;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--k3d-brand);
	margin-bottom: .75rem;
}

.k3d-faq-title {
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 500;
	letter-spacing: -0.01em;
	color: #1a1a1a;
	margin: 0 0 .75rem;
}

.k3d-faq-subtitle {
	color: #5a5a5a;
	font-size: 1.05rem;
	line-height: 1.6;
}

.k3d-faq-item {
	border-bottom: 1px solid #ececec;
}

.k3d-faq-item:first-child {
	border-top: 1px solid #ececec;
}

.k3d-faq-question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.35rem .25rem;
	background: none;
	border: none;
	text-align: start;
	cursor: pointer;
	font-size: 1.05rem;
	font-weight: 600;
	color: #1a1a1a;
}

.k3d-faq-question:hover {
	color: var(--k3d-brand);
}

.k3d-faq-icon {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	border: 1.5px solid var(--k3d-brand);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--k3d-brand);
	transition: transform .3s ease, background-color .3s ease, color .3s ease;
}

.k3d-faq-icon svg {
	width: 13px;
	height: 13px;
}

.k3d-faq-item.is-open .k3d-faq-icon {
	transform: rotate(135deg);
	background: var(--k3d-brand);
	color: #fff;
}

.k3d-faq-answer-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .35s ease;
}

.k3d-faq-item.is-open .k3d-faq-answer-wrap {
	grid-template-rows: 1fr;
}

.k3d-faq-answer-inner {
	overflow: hidden;
}

.k3d-faq-answer {
	padding: 0 1.75rem 1.35rem .25rem;
	color: #5a5a5a;
	line-height: 1.65;
	font-size: .97rem;
}

@media (prefers-reduced-motion: reduce) {
	.k3d-faq-icon, .k3d-faq-answer-wrap {
		transition: none !important;
	}
}

/* 6) Chat widget — rule-based FAQ assistant, no external API */
.k3d-chat-fab {
	position: fixed;
	inset-inline-end: 1.5rem;
	bottom: 1.5rem;
	width: 58px;
	height: 58px;
	border-radius: 999px;
	background: var(--k3d-brand);
	color: #fff;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 10px 25px rgba(var(--k3d-brand-rgb), .35);
	z-index: 100000;
	transition: transform .2s ease;
}

.k3d-chat-fab {
	font-family: inherit;
}

.k3d-chat-fab:hover {
	transform: scale(1.06);
}

.k3d-chat-fab svg {
	width: 26px;
	height: 26px;
}

.k3d-chat-fab .k3d-chat-fab-icon-close {
	display: none;
}

.k3d-chat-fab.is-open .k3d-chat-fab-icon-open {
	display: none;
}

.k3d-chat-fab.is-open .k3d-chat-fab-icon-close {
	display: block;
}

.k3d-chat-panel,
.k3d-chat-panel * {
	font-family: inherit;
}

.k3d-chat-panel {
	position: fixed;
	inset-inline-end: 1.5rem;
	bottom: 5.75rem;
	width: 340px;
	max-width: calc(100vw - 2rem);
	height: 480px;
	max-height: calc(100vh - 8rem);
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	overscroll-behavior: contain;
	z-index: 99999;
	opacity: 0;
	transform: translateY(16px) scale(.97);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}

.k3d-chat-panel.is-open {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.k3d-chat-header {
	background: var(--k3d-brand);
	color: #fff;
	padding: 1rem 1.1rem;
	flex-shrink: 0;
}

.k3d-chat-header-title {
	font-weight: 700;
	font-size: .95rem;
}

.k3d-chat-header-subtitle {
	font-size: .78rem;
	opacity: .85;
}

.k3d-chat-messages {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	background: #fafafa;
}

.k3d-chat-bubble {
	max-width: 85%;
	padding: .6rem .85rem;
	border-radius: .8rem;
	font-size: .87rem;
	line-height: 1.5;
}

.k3d-chat-bubble.bot {
	align-self: flex-start;
	background: #fff;
	border: 1px solid #ececec;
	color: #333;
	border-bottom-left-radius: .2rem;
}

.k3d-chat-bubble.user {
	align-self: flex-end;
	background: var(--k3d-brand);
	color: #fff;
	border-bottom-right-radius: .2rem;
}

.k3d-chat-bubble.user .k3d-chat-link {
	color: #fff;
	text-decoration: underline;
}

.k3d-chat-link {
	color: var(--k3d-brand);
	font-weight: 600;
	text-decoration: underline;
}

.k3d-chat-quick-replies {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	padding: 0 1rem .75rem;
	flex-shrink: 0;
	max-height: 6rem;
	opacity: 1;
	overflow: hidden;
	transition: opacity .2s ease, max-height .2s ease, padding .2s ease;
}

.k3d-chat-quick-replies.k3d-chat-hidden {
	opacity: 0;
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	pointer-events: none;
}

.k3d-chat-quick-reply {
	border: 1px solid rgba(var(--k3d-brand-rgb), .35);
	background: #fff;
	color: var(--k3d-brand);
	border-radius: 999px;
	padding: .35rem .75rem;
	font-size: .78rem;
	cursor: pointer;
}

.k3d-chat-quick-reply:hover {
	background: rgba(var(--k3d-brand-rgb), .08);
}

.k3d-chat-input-row {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .75rem;
	border-top: 1px solid #ececec;
	flex-shrink: 0;
}

.k3d-chat-input {
	flex: 1;
	border: 1px solid #e0e0e0;
	border-radius: 999px;
	padding: .55rem .9rem;
	font-size: .87rem;
	outline: none;
}

.k3d-chat-input:focus {
	border-color: var(--k3d-brand);
}

.k3d-chat-send {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 999px;
	background: var(--k3d-brand);
	color: #fff;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.k3d-chat-send svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 480px) {
	.k3d-chat-panel {
		inset-inline-end: 1rem;
		bottom: 5.25rem;
		width: calc(100vw - 2rem);
	}
}

/* 7) Language switcher — restyled to match the brand instead of the stock
   Bootstrap grey button + flag icons it ships with. */
.sp-module:has(.mod-languages) {
	display: flex;
	align-items: center;
	margin-inline-start: .5rem;
}

/* RTL nav spacing isn't a mirror-image of the LTR version (the megamenu's
   own padding is asymmetric), so the switcher ends up crowding — even
   overlapping — the last nav item unless given a bit more breathing room. */
html[dir="rtl"] .sp-module:has(.mod-languages) {
	margin-inline-start: 1.5rem;
}

.mod-languages {
	display: flex;
	align-items: center;
}

.mod-languages img {
	display: none;
}

.mod-languages__select {
	position: relative;
}

.mod-languages__select .btn {
	display: flex;
	align-items: center;
	gap: .35rem;
	background: none;
	border: 1.5px solid rgba(var(--k3d-brand-rgb), .35);
	color: var(--k3d-brand);
	border-radius: 999px;
	padding: .4rem 1rem;
	font-size: .82rem;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.2;
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease;
}

.mod-languages__select .btn:hover,
.mod-languages__select .btn:focus {
	background: var(--k3d-brand);
	color: #fff;
}

.mod-languages__select .btn::after {
	display: none;
}

.mod-languages__select .btn::before {
	content: '';
	width: 6px;
	height: 6px;
	border-inline-end: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	margin-bottom: 2px;
}

.mod-languages .lang-block.dropdown-menu {
	min-width: 9rem;
	border: 1px solid #ececec;
	border-radius: .75rem;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
	padding: .4rem;
	margin-top: .5rem;
	font-family: inherit;
}

.mod-languages .lang-block.dropdown-menu li a {
	display: block;
	border-radius: .5rem;
	padding: .5rem .75rem;
	font-size: .85rem;
	color: #333;
	text-decoration: none;
}

.mod-languages .lang-block.dropdown-menu li a:hover {
	background: rgba(var(--k3d-brand-rgb), .08);
	color: var(--k3d-brand);
}

.mod-languages .lang-block.dropdown-menu li.lang-active a {
	color: var(--k3d-brand);
	font-weight: 700;
}

/* 8) Portfolio item detail page banner — video instead of the plain title */
.sp-page-title.k3d-portfolio-banner {
	position: relative;
	overflow: hidden;
	min-height: 260px;
	display: flex;
	align-items: center;
	background-color: #0a2e26;
}

.k3d-portfolio-banner-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 80%;
	z-index: 0;
}

/* Instagram widget next to the map — the widget's own script sets its
   height to auto (grows with however many posts load), which was taller
   than the map's fixed 540px and stretched the whole row. Cap it to match
   the map's height and let it scroll internally instead. */
.k3d-instagram-widget {
	height: 540px;
	overflow: hidden;
}

.k3d-instagram-widget .sk-instagram-feed {
	height: 540px !important;
	overflow-y: auto !important;
}

.sp-page-title.k3d-portfolio-banner .container {
	position: relative;
	z-index: 1;
}

/* 9) Hidden data row — holds FAQ/calculator/WhatsApp/hero content that used
   to be hardcoded in custom.js, now editable from the dashboard instead.
   Rendered (not SPPB-hidden) so custom.js can read it; hidden from visitors
   here instead. Do not delete this row in the page editor. */
.k3d-data-row {
	display: none !important;
}

/* 10) Arabic header: the naive RTL mirror puts the logo on the right and the
   menu on the left. Keep the same physical layout as the English header
   (logo left, menu block right) — lock the outer row to ltr for that macro
   position, then re-assert rtl on the menu itself so the links still read
   right-to-left inside their own block, and hug the block's outer (right)
   edge the same way the English menu hugs its outer (right) edge. */
html[dir="rtl"] #sp-header .container-inner > .row {
	direction: ltr;
}

html[dir="rtl"] #sp-header #sp-menu {
	direction: rtl;
}

html[dir="rtl"] #sp-header #sp-menu .sp-column {
	justify-content: flex-start !important;
}

/* 11) Careers page */
.k3d-careers-hero {
	background: #0a2e26;
	padding: 4rem 0 3rem;
}

.k3d-careers-hero-title {
	color: #fff;
	font-weight: 700;
}

.k3d-careers-hero-desc {
	color: rgba(255, 255, 255, .8);
	max-width: 640px;
	margin-top: .5rem;
}

.k3d-careers-jobs-heading-row {
	padding-top: 3rem;
}

.k3d-careers-jobs-heading {
	text-align: center;
}

.k3d-careers-jobs-heading .sppb-addon-title {
	font-weight: 700;
	color: #111;
}

.k3d-careers-jobs-row {
	padding: 1rem 0;
}

.k3d-job-card {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 1rem;
	padding: 1.75rem !important;
	height: 100%;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .04);
	transition: box-shadow .2s ease, transform .2s ease;
}

.k3d-job-card:hover {
	box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
	transform: translateY(-2px);
}

.k3d-job-card .sppb-addon-title {
	font-size: 1.15rem;
	font-weight: 700;
	color: #111;
}

.k3d-job-card .k3d-job-meta {
	color: var(--k3d-brand);
	font-size: .82rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .02em;
	margin: .5rem 0 .75rem;
}

.k3d-job-card .k3d-job-desc {
	color: #555;
	font-size: .92rem;
	line-height: 1.6;
}

.k3d-job-card .sppb-icon {
	color: var(--k3d-brand);
	background: rgba(var(--k3d-brand-rgb), .08);
	border-radius: 50%;
}

.k3d-job-card .sppb-btn {
	background: var(--k3d-brand);
	border-color: var(--k3d-brand);
	color: #fff;
	margin-top: 1rem;
}

.k3d-job-card .sppb-btn:hover {
	background: #0b5c48;
	border-color: #0b5c48;
}

.k3d-careers-apply-row {
	background: #fafafa;
	padding: 3.5rem 0;
}

.k3d-careers-apply-heading {
	text-align: center;
}

.k3d-careers-apply-heading .sppb-addon-title {
	font-weight: 700;
	color: #111;
}

.k3d-careers-apply-desc {
	text-align: center;
	color: #666;
	max-width: 560px;
	margin: .5rem auto 2rem;
}

.k3d-careers-form {
	max-width: 720px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 1rem;
	padding: 2rem !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .04);
}

.k3d-careers-form .sppb-form-control {
	color: #1a1a1a;
}

.k3d-careers-form .sppb-btn.sppb-btn-default {
	background: var(--k3d-brand);
	border-color: var(--k3d-brand);
	color: #fff;
}

.k3d-careers-form .sppb-btn.sppb-btn-default:hover {
	background: #0b5c48;
	border-color: #0b5c48;
}