/* Viva Elementor Kit v1.0.5
 * Site background system and Viva utility classes.
 */

:root {
	--viva-kit-bg-base: #050b08;
	--viva-kit-bg-deep: #07100d;
	--viva-kit-bg-soft: #0b1511;
	--viva-kit-gold: #d4af37;
	--viva-kit-gold-rgb: 212 175 55;
	--viva-kit-green-rgb: 48 80 80;
	--viva-kit-cream: #f4f1e8;
	--viva-kit-border: rgb(212 175 55 / 0.22);
	--viva-kit-card: rgb(10 18 15 / 0.72);
}

html.viva-kit-bg-enabled,
body.viva-kit-bg-enabled {
	min-height: 100%;
}

body.viva-kit-bg-enabled {
	background:
		radial-gradient(circle at 14% 8%, rgb(var(--viva-kit-gold-rgb) / 0.11), transparent 28rem),
		radial-gradient(circle at 88% 24%, rgb(var(--viva-kit-green-rgb) / 0.28), transparent 34rem),
		radial-gradient(circle at 46% 92%, rgb(var(--viva-kit-gold-rgb) / 0.055), transparent 30rem),
		linear-gradient(135deg, var(--viva-kit-bg-base) 0%, var(--viva-kit-bg-soft) 48%, var(--viva-kit-bg-deep) 100%);
	background-attachment: fixed;
	color: var(--viva-kit-cream);
}

body.viva-kit-bg-enabled::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background:
		linear-gradient(115deg, transparent 0 42%, rgb(212 175 55 / 0.035) 42.2% 42.5%, transparent 42.7% 100%),
		linear-gradient(245deg, transparent 0 58%, rgb(48 80 80 / 0.08) 58.2% 58.45%, transparent 58.7% 100%);
	opacity: var(--viva-kit-ambient-opacity, 1);
}

body.viva-kit-bg-enabled::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: var(--viva-kit-noise-opacity, 0.055);
	mix-blend-mode: soft-light;
	background-image:
		radial-gradient(circle at 20% 30%, rgb(255 255 255 / 0.18) 0 1px, transparent 1.2px),
		radial-gradient(circle at 70% 60%, rgb(255 255 255 / 0.12) 0 1px, transparent 1.2px);
	background-size: 18px 18px, 26px 26px;
}

body.viva-kit-bg-simple {
	background: var(--viva-kit-bg-base);
}

body.viva-kit-bg-gradient {
	background:
		radial-gradient(circle at 15% 10%, rgb(var(--viva-kit-gold-rgb) / 0.10), transparent 28rem),
		radial-gradient(circle at 85% 30%, rgb(var(--viva-kit-green-rgb) / 0.22), transparent 32rem),
		linear-gradient(135deg, #050b08 0%, #0b1511 45%, #07100d 100%);
	background-attachment: fixed;
}

body.viva-kit-bg-glow {
	background:
		radial-gradient(circle at 12% 18%, rgb(var(--viva-kit-gold-rgb) / 0.13), transparent 30rem),
		radial-gradient(circle at 82% 15%, rgb(var(--viva-kit-green-rgb) / 0.30), transparent 38rem),
		radial-gradient(circle at 54% 82%, rgb(var(--viva-kit-gold-rgb) / 0.07), transparent 36rem),
		linear-gradient(140deg, #040907, #0b1511 54%, #06100c);
	background-attachment: fixed;
}

.viva-section {
	position: relative;
	padding-block: clamp(42px, 7vw, 96px);
}

.viva-section--compact {
	padding-block: clamp(28px, 4vw, 56px);
}

.viva-glass-card,
.viva-kit-glass-card {
	border: 1px solid var(--viva-kit-border);
	border-radius: 22px;
	background:
		linear-gradient(145deg, rgb(14 24 20 / 0.82), rgb(7 16 13 / 0.58));
	box-shadow: 0 22px 60px rgb(0 0 0 / 0.22);
	backdrop-filter: blur(10px);
}

.viva-gold-glow {
	box-shadow:
		0 0 0 1px rgb(var(--viva-kit-gold-rgb) / 0.18),
		0 18px 52px rgb(var(--viva-kit-gold-rgb) / 0.10);
}

.viva-soft-noise {
	position: relative;
	isolation: isolate;
}

.viva-soft-noise::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.055;
	background-image:
		radial-gradient(circle, rgb(255 255 255 / 0.15) 0 1px, transparent 1.2px);
	background-size: 19px 19px;
}

.viva-dark-bg {
	background:
		radial-gradient(circle at top right, rgb(var(--viva-kit-green-rgb) / 0.20), transparent 28rem),
		linear-gradient(135deg, #050b08, #07100d);
}

.viva-gold-text {
	color: var(--viva-kit-gold);
}

.viva-border {
	border: 1px solid var(--viva-kit-border);
}

@media (max-width: 767px) {
	body.viva-kit-bg-enabled {
		background-attachment: scroll;
	}

	.viva-section {
		padding-block: 42px;
	}
}


/* v1.0.2: subtle golden lines, grain, and Viva logo pattern */
body.viva-kit-bg-enabled::before {
	background:
		linear-gradient(115deg, transparent 0 39%, rgb(212 175 55 / var(--viva-kit-lines-opacity, 0.10)) 39.15% 39.34%, transparent 39.55% 100%),
		linear-gradient(245deg, transparent 0 61%, rgb(212 175 55 / calc(var(--viva-kit-lines-opacity, 0.10) * 0.75)) 61.15% 61.34%, transparent 61.55% 100%),
		linear-gradient(180deg, transparent 0 12%, rgb(212 175 55 / calc(var(--viva-kit-lines-opacity, 0.10) * 0.55)) 12.1% 12.2%, transparent 12.35% 100%),
		radial-gradient(circle at 10% 18%, rgb(212 175 55 / 0.08), transparent 24rem),
		radial-gradient(circle at 90% 16%, rgb(48 80 80 / 0.10), transparent 30rem);
	opacity: var(--viva-kit-ambient-opacity, 1);
}

body.viva-kit-bg-enabled:not(.viva-kit-has-lines)::before {
	background:
		radial-gradient(circle at 10% 18%, rgb(212 175 55 / 0.08), transparent 24rem),
		radial-gradient(circle at 90% 16%, rgb(48 80 80 / 0.10), transparent 30rem);
}

body.viva-kit-bg-enabled::after {
	opacity: 1;
	mix-blend-mode: soft-light;
	background-image:
		var(--viva-kit-logo-pattern-url),
		radial-gradient(circle at 20% 30%, rgb(255 255 255 / 0.16) 0 1px, transparent 1.25px),
		radial-gradient(circle at 70% 60%, rgb(255 255 255 / 0.11) 0 1px, transparent 1.2px);
	background-repeat: repeat, repeat, repeat;
	background-position: center top, 0 0, 11px 9px;
	background-size:
		var(--viva-kit-logo-pattern-size, 220px) auto,
		18px 18px,
		29px 29px;
	filter: opacity(var(--viva-kit-logo-pattern-opacity, 0.035));
}

body.viva-kit-bg-enabled.viva-kit-has-grain::after {
	opacity: 1;
}

body.viva-kit-bg-enabled.viva-kit-has-logo-pattern::after {
	filter: opacity(var(--viva-kit-logo-pattern-opacity, 0.035));
}

body.viva-kit-bg-enabled.viva-kit-has-grain.viva-kit-has-logo-pattern::after {
	opacity: 1;
}

body.viva-kit-bg-enabled:not(.viva-kit-has-logo-pattern)::after {
	background-image:
		radial-gradient(circle at 20% 30%, rgb(255 255 255 / 0.16) 0 1px, transparent 1.25px),
		radial-gradient(circle at 70% 60%, rgb(255 255 255 / 0.11) 0 1px, transparent 1.2px);
	background-size: 18px 18px, 29px 29px;
	filter: opacity(var(--viva-kit-grain-opacity, 0.055));
}

body.viva-kit-bg-enabled:not(.viva-kit-has-grain):not(.viva-kit-has-logo-pattern)::after {
	display: none;
}

body.viva-kit-bg-enabled.viva-kit-has-grain:not(.viva-kit-has-logo-pattern)::after {
	filter: opacity(var(--viva-kit-grain-opacity, 0.055));
}

body.viva-kit-bg-enabled.viva-kit-has-logo-pattern:not(.viva-kit-has-grain)::after {
	background-image: var(--viva-kit-logo-pattern-url);
	background-size: var(--viva-kit-logo-pattern-size, 220px) auto;
	filter: opacity(var(--viva-kit-logo-pattern-opacity, 0.035));
}

/* Utility backgrounds for individual Elementor sections */
.viva-bg-lines {
	position: relative;
	isolation: isolate;
}

.viva-bg-lines::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(115deg, transparent 0 40%, rgb(212 175 55 / 0.12) 40.1% 40.28%, transparent 40.45%),
		linear-gradient(245deg, transparent 0 62%, rgb(212 175 55 / 0.08) 62.1% 62.28%, transparent 62.45%);
}

.viva-logo-pattern {
	position: relative;
	isolation: isolate;
}

.viva-logo-pattern::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.035;
	background-image: var(--viva-kit-logo-pattern-url);
	background-size: 220px auto;
	background-repeat: repeat;
	background-position: center;
}

.viva-grain {
	position: relative;
	isolation: isolate;
}

.viva-grain::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.055;
	background-image:
		radial-gradient(circle at 20% 30%, rgb(255 255 255 / 0.16) 0 1px, transparent 1.25px),
		radial-gradient(circle at 70% 60%, rgb(255 255 255 / 0.11) 0 1px, transparent 1.2px);
	background-size: 18px 18px, 29px 29px;
}


/* v1.0.3: decorative golden line presets and controls */
body.viva-kit-bg-enabled.viva-kit-has-lines::before {
	background:
		linear-gradient(var(--viva-kit-line-angle-1, 115deg), transparent 0 39%, rgb(212 175 55 / var(--viva-kit-lines-opacity, 0.10)) 39.15% calc(39.15% + var(--viva-kit-lines-thickness, 1px)), transparent 39.75% 100%),
		linear-gradient(var(--viva-kit-line-angle-2, 245deg), transparent 0 61%, rgb(212 175 55 / calc(var(--viva-kit-lines-opacity, 0.10) * 0.75)) 61.15% calc(61.15% + var(--viva-kit-lines-thickness, 1px)), transparent 61.75% 100%),
		linear-gradient(var(--viva-kit-line-angle-3, 155deg), transparent 0 12%, rgb(212 175 55 / calc(var(--viva-kit-lines-opacity, 0.10) * 0.55)) 12.1% calc(12.1% + var(--viva-kit-lines-thickness, 1px)), transparent 12.55% 100%),
		linear-gradient(var(--viva-kit-line-angle-4, 25deg), transparent 0 78%, rgb(212 175 55 / calc(var(--viva-kit-lines-opacity, 0.10) * 0.45)) 78.1% calc(78.1% + var(--viva-kit-lines-thickness, 1px)), transparent 78.55% 100%),
		radial-gradient(circle at var(--viva-kit-lines-glow-x, 10%) var(--viva-kit-lines-glow-y, 18%), rgb(212 175 55 / 0.08), transparent 24rem),
		radial-gradient(circle at 90% 16%, rgb(48 80 80 / 0.10), transparent 30rem);
	background-position: var(--viva-kit-lines-bg-position, center);
	background-size: var(--viva-kit-lines-bg-size, cover);
}

body.viva-kit-lines-orientation-diagonal {
	--viva-kit-line-angle-1: 115deg;
	--viva-kit-line-angle-2: 245deg;
	--viva-kit-line-angle-3: 155deg;
	--viva-kit-line-angle-4: 25deg;
}

body.viva-kit-lines-orientation-horizontal {
	--viva-kit-line-angle-1: 180deg;
	--viva-kit-line-angle-2: 180deg;
	--viva-kit-line-angle-3: 180deg;
	--viva-kit-line-angle-4: 180deg;
}

body.viva-kit-lines-orientation-vertical {
	--viva-kit-line-angle-1: 90deg;
	--viva-kit-line-angle-2: 90deg;
	--viva-kit-line-angle-3: 90deg;
	--viva-kit-line-angle-4: 90deg;
}

body.viva-kit-lines-count-1::before {
	background:
		linear-gradient(var(--viva-kit-line-angle-1, 115deg), transparent 0 39%, rgb(212 175 55 / var(--viva-kit-lines-opacity, 0.10)) 39.15% calc(39.15% + var(--viva-kit-lines-thickness, 1px)), transparent 39.75% 100%),
		radial-gradient(circle at var(--viva-kit-lines-glow-x, 10%) var(--viva-kit-lines-glow-y, 18%), rgb(212 175 55 / 0.08), transparent 24rem);
}

body.viva-kit-lines-count-2::before {
	background:
		linear-gradient(var(--viva-kit-line-angle-1, 115deg), transparent 0 39%, rgb(212 175 55 / var(--viva-kit-lines-opacity, 0.10)) 39.15% calc(39.15% + var(--viva-kit-lines-thickness, 1px)), transparent 39.75% 100%),
		linear-gradient(var(--viva-kit-line-angle-2, 245deg), transparent 0 61%, rgb(212 175 55 / calc(var(--viva-kit-lines-opacity, 0.10) * 0.75)) 61.15% calc(61.15% + var(--viva-kit-lines-thickness, 1px)), transparent 61.75% 100%),
		radial-gradient(circle at var(--viva-kit-lines-glow-x, 10%) var(--viva-kit-lines-glow-y, 18%), rgb(212 175 55 / 0.08), transparent 24rem);
}

body.viva-kit-lines-count-3::before {
	background:
		linear-gradient(var(--viva-kit-line-angle-1, 115deg), transparent 0 39%, rgb(212 175 55 / var(--viva-kit-lines-opacity, 0.10)) 39.15% calc(39.15% + var(--viva-kit-lines-thickness, 1px)), transparent 39.75% 100%),
		linear-gradient(var(--viva-kit-line-angle-2, 245deg), transparent 0 61%, rgb(212 175 55 / calc(var(--viva-kit-lines-opacity, 0.10) * 0.75)) 61.15% calc(61.15% + var(--viva-kit-lines-thickness, 1px)), transparent 61.75% 100%),
		linear-gradient(var(--viva-kit-line-angle-3, 155deg), transparent 0 12%, rgb(212 175 55 / calc(var(--viva-kit-lines-opacity, 0.10) * 0.55)) 12.1% calc(12.1% + var(--viva-kit-lines-thickness, 1px)), transparent 12.55% 100%),
		radial-gradient(circle at var(--viva-kit-lines-glow-x, 10%) var(--viva-kit-lines-glow-y, 18%), rgb(212 175 55 / 0.08), transparent 24rem);
}

body.viva-kit-lines-count-4 {
	--viva-kit-lines-count-active: 4;
}

body.viva-kit-lines-position-top_right {
	--viva-kit-lines-bg-position: right top;
	--viva-kit-lines-bg-size: 92rem 62rem;
	--viva-kit-lines-glow-x: 88%;
	--viva-kit-lines-glow-y: 10%;
}

body.viva-kit-lines-position-top_left {
	--viva-kit-lines-bg-position: left top;
	--viva-kit-lines-bg-size: 92rem 62rem;
	--viva-kit-lines-glow-x: 10%;
	--viva-kit-lines-glow-y: 10%;
}

body.viva-kit-lines-position-bottom_right {
	--viva-kit-lines-bg-position: right bottom;
	--viva-kit-lines-bg-size: 92rem 62rem;
	--viva-kit-lines-glow-x: 88%;
	--viva-kit-lines-glow-y: 88%;
}

body.viva-kit-lines-position-bottom_left {
	--viva-kit-lines-bg-position: left bottom;
	--viva-kit-lines-bg-size: 92rem 62rem;
	--viva-kit-lines-glow-x: 10%;
	--viva-kit-lines-glow-y: 88%;
}

body.viva-kit-lines-position-center {
	--viva-kit-lines-bg-position: center;
	--viva-kit-lines-bg-size: 72rem 48rem;
	--viva-kit-lines-glow-x: 50%;
	--viva-kit-lines-glow-y: 50%;
}

body.viva-kit-lines-position-both {
	--viva-kit-lines-bg-position: center;
	--viva-kit-lines-bg-size: cover;
}

body.viva-kit-lines-pattern-soft_diagonal {
	--viva-kit-lines-pattern-active: soft;
}

body.viva-kit-lines-pattern-straight.viva-kit-lines-orientation-diagonal {
	--viva-kit-line-angle-1: 128deg;
	--viva-kit-line-angle-2: 128deg;
	--viva-kit-line-angle-3: 128deg;
	--viva-kit-line-angle-4: 128deg;
}

body.viva-kit-lines-pattern-corner_frame::before {
	background:
		linear-gradient(180deg, rgb(212 175 55 / var(--viva-kit-lines-opacity, 0.10)), rgb(212 175 55 / var(--viva-kit-lines-opacity, 0.10))) right 7% top 8% / min(34vw, 420px) var(--viva-kit-lines-thickness, 1px) no-repeat,
		linear-gradient(90deg, rgb(212 175 55 / var(--viva-kit-lines-opacity, 0.10)), rgb(212 175 55 / var(--viva-kit-lines-opacity, 0.10))) right 7% top 8% / var(--viva-kit-lines-thickness, 1px) min(24vw, 280px) no-repeat,
		linear-gradient(180deg, rgb(212 175 55 / calc(var(--viva-kit-lines-opacity, 0.10) * 0.65)), rgb(212 175 55 / calc(var(--viva-kit-lines-opacity, 0.10) * 0.65))) left 7% bottom 8% / min(28vw, 360px) var(--viva-kit-lines-thickness, 1px) no-repeat,
		linear-gradient(90deg, rgb(212 175 55 / calc(var(--viva-kit-lines-opacity, 0.10) * 0.65)), rgb(212 175 55 / calc(var(--viva-kit-lines-opacity, 0.10) * 0.65))) left 7% bottom 8% / var(--viva-kit-lines-thickness, 1px) min(20vw, 250px) no-repeat;
}

body.viva-kit-lines-pattern-rays::before {
	background:
		conic-gradient(from 220deg at var(--viva-kit-lines-glow-x, 12%) var(--viva-kit-lines-glow-y, 18%), transparent 0deg 18deg, rgb(212 175 55 / calc(var(--viva-kit-lines-opacity, 0.10) * 0.75)) 18.3deg 18.9deg, transparent 19.2deg 32deg, rgb(212 175 55 / calc(var(--viva-kit-lines-opacity, 0.10) * 0.55)) 32.3deg 32.8deg, transparent 33.2deg 70deg),
		radial-gradient(circle at var(--viva-kit-lines-glow-x, 12%) var(--viva-kit-lines-glow-y, 18%), rgb(212 175 55 / 0.08), transparent 24rem);
}


/* v1.0.5: Viva logo pattern color and layout modes */
body.viva-kit-bg-enabled.viva-kit-has-logo-pattern::after {
	background-color: transparent;
	opacity: 1;
}

body.viva-kit-bg-enabled.viva-kit-has-logo-pattern {
	--viva-kit-logo-pattern-color: rgb(212 175 55 / var(--viva-kit-logo-pattern-opacity, 0.035));
}

body.viva-kit-logo-pattern-color-gold {
	--viva-kit-logo-pattern-color: rgb(212 175 55 / var(--viva-kit-logo-pattern-opacity, 0.035));
}

body.viva-kit-logo-pattern-color-soft_gold {
	--viva-kit-logo-pattern-color: rgb(235 220 170 / var(--viva-kit-logo-pattern-opacity, 0.035));
}

body.viva-kit-logo-pattern-color-dark_gold {
	--viva-kit-logo-pattern-color: rgb(132 102 32 / var(--viva-kit-logo-pattern-opacity, 0.035));
}

body.viva-kit-logo-pattern-color-cream {
	--viva-kit-logo-pattern-color: rgb(244 241 232 / var(--viva-kit-logo-pattern-opacity, 0.035));
}

body.viva-kit-logo-pattern-color-green {
	--viva-kit-logo-pattern-color: rgb(48 80 80 / var(--viva-kit-logo-pattern-opacity, 0.035));
}

body.viva-kit-logo-pattern-mode-ordered::after {
	background-position: center top, 0 0, 11px 9px;
	background-size:
		var(--viva-kit-logo-pattern-size, 220px) auto,
		18px 18px,
		29px 29px;
}

body.viva-kit-logo-pattern-mode-offset::after {
	background-position: 0 0, 0 0, 11px 9px;
	background-size:
		var(--viva-kit-logo-pattern-size, 220px) auto,
		18px 18px,
		29px 29px;
	transform: rotate(var(--viva-kit-logo-pattern-rotation, 0deg));
}

body.viva-kit-logo-pattern-mode-scattered::after {
	background-position: 7% 6%, 56% 24%, 20% 78%;
	background-size:
		var(--viva-kit-logo-pattern-size, 220px) auto,
		calc(var(--viva-kit-logo-pattern-size, 220px) * 1.65) auto,
		calc(var(--viva-kit-logo-pattern-size, 220px) * 0.82) auto;
	transform: rotate(var(--viva-kit-logo-pattern-rotation, -12deg));
}

/* Section utility variants for manual Elementor use */
.viva-logo-pattern--ordered::after {
	background-position: center top;
}

.viva-logo-pattern--offset::after {
	background-position: 0 0;
	transform: rotate(-6deg);
}

.viva-logo-pattern--scattered::after {
	background-position: 7% 6%, 56% 24%, 20% 78%;
	transform: rotate(-12deg);
}