/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

:root {
	--logo-navy: #19143f;
	--logo-gold: #b58a45;
	--logo-ivory: #f6f1e7;

	--cnvs-themecolor: var(--logo-gold);
	--cnvs-themecolor-rgb: 181, 138, 69;
	--cnvs-dark-color: var(--logo-navy);
	/* --cnvs-body-bg: var(--logo-ivory); */
	--bs-primary: var(--logo-gold);
	--bs-primary-rgb: 181, 138, 69;
	--bs-link-color: var(--logo-navy);
	--bs-link-color-rgb: 25, 20, 63;
	--bs-link-hover-color: var(--logo-gold);
	--bs-link-hover-color-rgb: 181, 138, 69;
}

#header-wrap {
	background-color: rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(16px);
}

#header-wrap #logo img {
	height: 72px;
	margin-block: 12px;
}

#slider {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

#slider::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(12, 14, 18, 0.72) 0%, rgba(12, 14, 18, 0.38) 52%, rgba(12, 14, 18, 0.58) 100%);
	content: '';
}

#slider .slider-inner {
	position: relative;
	z-index: 1;
}

#slider .hero-copy {
	opacity: var(--hero-copy-opacity, 1);
	transform: translateY(calc(var(--hero-copy-offset, 0) * 1px));
	transition: opacity 100ms linear, transform 100ms linear;
	will-change: opacity, transform;
}

#slider .hero-copy h1 {
	text-shadow: 0 3px 18px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.95);
}

@media (prefers-reduced-motion: reduce) {
	#slider .hero-copy {
		transition: none;
	}
}