:root {
    --color-primary: #1b4f9b;
    --color-secondary: #35b0ed;

    --color-info: #0EA5E9;
    --color-success: #16A34A;
    --color-warning: #D97706;
    --color-error: #DC2626;

    --color-white: #ffffff;
    --color-black: #000000;
    --color-footer-heading: #000000;
    --color-body-text: #4d5156;
}

/* =========================================================
   HOME HERO
   Impreza / RoyalSlider
   Mobile First
========================================================= */

.home-hero-section {
	position: relative;
	min-height: 500px;
	overflow: hidden;

	display: flex;
	align-items: center;
}


/* =========================================================
   REMOVE ANY PREVIOUS SECTION OVERLAY
========================================================= */

.home-hero-section::before,
.home-hero-section::after {
	content: none !important;
	display: none !important;
}


/* =========================================================
   SLIDER BACKGROUND LAYER
========================================================= */

.home-hero-section > .l-section-slider {
	position: absolute !important;
	inset: 0 !important;

	width: 100% !important;
	height: 100% !important;

	z-index: 0 !important;
}


/* =========================================================
   IMAGE OVERLAY
   IMPORTANT:
   Overlay belongs to the slider, NOT the section
========================================================= */

.home-hero-section > .l-section-slider::after {
	content: "" !important;

	position: absolute !important;
	inset: 0 !important;

	width: 100%;
	height: 100%;

	z-index: 10 !important;

	pointer-events: none;

	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.58) 0%,
		rgba(0, 0, 0, 0.42) 40%,
		rgba(0, 0, 0, 0.18) 70%,
		rgba(0, 0, 0, 0.08) 100%
	);
}


/* =========================================================
   HERO CONTENT
========================================================= */

.home-hero-section > .l-section-h {
	position: relative !important;

	width: 100%;

	z-index: 20 !important;
}


/* Content / text width */

.home-hero-section .w-vwrapper {
	position: relative;

	max-width: 720px;

	z-index: 21;
}


/* =========================================================
   HERO TITLE
========================================================= */

.home-hero-section .hero-title {
	margin: 0;

	font-size: clamp(2.4rem, 1.9rem + 2.2vw, 4.6rem);
	line-height: 1.05;

	font-weight: 600;

	color: #fff !important;
	opacity: 1 !important;
}


.home-hero-section .hero-title .w-text-h,
.home-hero-section .hero-title .w-text-value {
	color: #fff !important;
	opacity: 1 !important;
}


/* =========================================================
   HERO SUB TITLE
========================================================= */

.home-hero-section .hero-sub-title {
	margin: 0;

	font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.75rem);
	line-height: 1.25;

	font-weight: 400;

	color: #fff !important;
	opacity: 1 !important;
}


.home-hero-section .hero-sub-title .w-text-h,
.home-hero-section .hero-sub-title .w-text-value {
	color: #fff !important;
	opacity: 1 !important;
}


/* =========================================================
   INTRO
========================================================= */

.home-hero-section .hero-intro {
	max-width: 650px;

	margin-top: 0.5rem;

	font-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
	line-height: 1.55;

	color: rgba(255, 255, 255, 0.95) !important;
	opacity: 1 !important;
}


.home-hero-section .hero-intro,
.home-hero-section .hero-intro .wpb_wrapper,
.home-hero-section .hero-intro p {
	color: rgba(255, 255, 255, 0.95) !important;
	opacity: 1 !important;
}


.home-hero-section .hero-intro p {
	margin: 0;
}


/* =========================================================
   SUBTLE TEXT SHADOW
========================================================= */

.home-hero-section .hero-title,
.home-hero-section .hero-sub-title,
.home-hero-section .hero-intro {
	text-shadow:
		0 2px 4px rgba(0, 0, 0, 0.20),
		0 4px 16px rgba(0, 0, 0, 0.25);
}


/* =========================================================
   MOBILE
   0 – 600px
========================================================= */

.home-hero-section {
	min-height: 500px;
}


/* =========================================================
   TABLET
   601px – 1024px
========================================================= */

@media (min-width: 601px) {

	.home-hero-section {
		min-height: 60vh;
	}

}


/* =========================================================
   LAPTOP
   1025px – 1380px
========================================================= */

@media (min-width: 1025px) {

	.home-hero-section {
		min-height: 75vh;
	}

}


/* =========================================================
   DESKTOP
   1381px+
========================================================= */

@media (min-width: 1381px) {

	.home-hero-section {
		min-height: 85vh;
	}

}