/* Dynamic CSS Variables for Images */
:root {
  --header-bg-image: url('../images/page-header-bg.jpg?v=1787890551');
  --hero-1-image: url('../images/hero-1.jpg?v=1787890551');
  --hero-2-image: url('../images/hero-2.jpg?v=1787890551');
  --hero-3-image: url('../images/hero-3.jpg?v=1787890551');
}

/* Override Hero Slider Backgrounds */
.slide:nth-child(1) {
  background-image: linear-gradient(rgba(0, 86, 179, 0.7), rgba(0, 86, 179, 0.7)), var(--hero-1-image);
}

.slide:nth-child(2) {
  background-image: linear-gradient(rgba(0, 86, 179, 0.7), rgba(0, 86, 179, 0.7)), var(--hero-2-image);
}

.slide:nth-child(3) {
  background-image: linear-gradient(rgba(0, 86, 179, 0.7), rgba(0, 86, 179, 0.7)), var(--hero-3-image);
}

/* Override Page Header Background */
.page-header:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0, 86, 179, 0.8), rgba(0, 86, 179, 0.8)), var(--header-bg-image);
  background-size: cover;
  background-position: center;
  z-index: -1;
}

/* Fix for ensuring the page header background displays properly */
.page-header {
  position: relative;
  overflow: hidden; /* Ensure the pseudo-element stays contained */
}