:root {

  /* Base palette — every color used across the theme */
  --color-primary: #0F2A3D;
  --color-secondary: #006699;
  --color-accent: #B8955E;
  --color-black: #1B1B1B;
  --color-muted-text: #93938C;
  --color-light-gray: #F6F5F2;
  --color-white: #ffffff;

}

/* =========================================================
   HOME HERO
   CSS-ONLY BACKGROUND SLIDER (4 IMAGES)
   Mobile First
========================================================= */

.home-hero-section {
	position: relative;
	min-height: 650px;
	overflow: hidden;
	display: flex;
	align-items: center;
	--hero-position: center top;
}

@media (min-width: 601px) {

	.home-hero-section {
		--hero-position: center top;
	}

}

.home-hero-section {
	padding-top: 100px;
	margin-top: 80px;
	box-sizing: border-box;
}

@media (min-width: 1025px) {

	.home-hero-section {
		padding-top: 140px;
		margin-top: 100px;
	}

}


/* =========================================================
   CSS SLIDER BACKGROUND LAYERS
========================================================= */

.home-hero-section::before,
.home-hero-section::after,
.home-hero-section .hero-layer {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: var(--hero-position);
	background-size: cover;
	pointer-events: none;
	will-change: opacity, transform;
	transform-origin: center top;
}

.home-hero-section .hero-layer {
	z-index: inherit;
}


/* =========================================================
   IMAGE 1
========================================================= */

.home-hero-section::before {
	z-index: 0;
	background-image:
		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%
		),
		var(--hero-image-1);
	animation:
		hero-image-1 28s infinite ease-in-out,
		hero-zoom 28s infinite ease-in-out;
}


/* =========================================================
   IMAGE 2
========================================================= */

.home-hero-section::after {
	z-index: 1;
	background-image:
		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%
		),
		var(--hero-image-2);
	opacity: 0;
	animation:
		hero-image-2 28s infinite ease-in-out,
		hero-zoom 28s infinite ease-in-out;
}


/* =========================================================
   IMAGE 3
========================================================= */

.home-hero-section .hero-layer-3 {
	z-index: 2;
	background-image:
		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%
		),
		var(--hero-image-3);
	opacity: 0;
	animation:
		hero-image-3 28s infinite ease-in-out,
		hero-zoom 28s infinite ease-in-out;
}


/* =========================================================
   IMAGE 4
========================================================= */

.home-hero-section .hero-layer-4 {
	z-index: 3;
	background-image:
		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%
		),
		var(--hero-image-4);
	opacity: 0;
	animation:
		hero-image-4 28s infinite ease-in-out,
		hero-zoom 28s infinite ease-in-out;
}


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

.home-hero-section > .l-section-h {
	position: relative !important;
	width: 100%;
	z-index: 10 !important;
}

.home-hero-section .w-vwrapper {
	position: relative;
	max-width: 60%px;
	z-index: 11;
}


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

.home-hero-section .hero-title {
	margin: 0;
	font-size: clamp(2rem, 1.2533rem + 2.8444vw, 3.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.15rem, 0.87rem + 1.0667vw, 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);
}


/* =========================================================
   SLIDER ANIMATION
   28s cycle, 4 images @ 25% each, ~6% crossfade
========================================================= */

@keyframes hero-image-1 {
	0%    { opacity: 1; }
	19%   { opacity: 1; }
	25%   { opacity: 0; }
	94%   { opacity: 0; }
	100%  { opacity: 1; }
}

@keyframes hero-image-2 {
	0%    { opacity: 0; }
	19%   { opacity: 0; }
	25%   { opacity: 1; }
	44%   { opacity: 1; }
	50%   { opacity: 0; }
	100%  { opacity: 0; }
}

@keyframes hero-image-3 {
	0%    { opacity: 0; }
	44%   { opacity: 0; }
	50%   { opacity: 1; }
	69%   { opacity: 1; }
	75%   { opacity: 0; }
	100%  { opacity: 0; }
}

@keyframes hero-image-4 {
	0%    { opacity: 0; }
	69%   { opacity: 0; }
	75%   { opacity: 1; }
	94%   { opacity: 1; }
	100%  { opacity: 0; }
}


/* =========================================================
   SUBTLE IMAGE MOVEMENT
========================================================= */

@keyframes hero-zoom {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.035); }
	100% { transform: scale(1); }
}


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

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


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

@media (min-width: 601px) {

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

}


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

@media (min-width: 1025px) {

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

}


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

@media (min-width: 1381px) {

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

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.home-hero-section::before {
		animation: none;
		transform: none;
		opacity: 1;
	}

	.home-hero-section::after,
	.home-hero-section .hero-layer {
		display: none;
	}

}


.promotion-section {
  padding-block: 3rem;
  background: var(--color-secondary);
}

.inner-promotion-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
}

@media (min-width: 1025px) {
  .inner-promotion-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
  }
}

.main-section {
  padding-block: 3rem;
  background: var(--color-primary);
}

.inner-main-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 1025px) {
  .inner-main-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2.5rem;
  }
}