/* --------------------- */
/* Header Breakpoints    */
/* --------------------- */

/* Default (≥1401px, wide desktop) */
header.paragraph.paragraph--type--paragraph-header-block.fullscreen-element.no-pad.paragraph--view-mode--default {
  height: 450px !important; /* Default shorter height */
}

/* Mid-range desktops (1200px – 1400px) */
@media (max-width: 1400px) {
  header.paragraph.paragraph--type--paragraph-header-block.fullscreen-element.no-pad.paragraph--view-mode--default {
    height: 400px !important;
  }
}

/* Small laptops / large tablets (992px – 1199px) */
@media (max-width: 1199px) {
  header.paragraph.paragraph--type--paragraph-header-block.fullscreen-element.no-pad.paragraph--view-mode--default {
    height: 350px !important;
  }
}

/* Tablets (768px – 991px) */
@media (max-width: 991px) {
  header.paragraph.paragraph--type--paragraph-header-block.fullscreen-element.no-pad.paragraph--view-mode--default {
    height: 300px !important;
  }
}

/* Mobile (≤767px) */
@media (max-width: 767px) {
  header.paragraph.paragraph--type--paragraph-header-block.fullscreen-element.no-pad.paragraph--view-mode--default {
    height: 250px !important;
  }
}

/* ---------------------- */
/* Logo Container Styles  */
/* ---------------------- */

.hero-logo-container {
  position: absolute;
  left: 0%; /* Adjust this percentage to horizontally align with the nav logo */
  top: 50%;
  transform: translateY(-50%);
  width: 45%; /* This ensures the logo remains proportionally sized */
}

.logo-position img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Mid-range desktops (1200px – 1400px) */
@media (max-width: 1400px) {
  .hero-logo-container {
    width: 40%;
    left: 0.4%;
  }
}

/* Small laptops / large tablets (992px – 1199px) */
@media (max-width: 1199px) {
  .hero-logo-container {
    width: 35%;
    left: 0.5%;
  }
}

/* Tablets (768px – 991px) */
@media (max-width: 991px) {
  .hero-logo-container {
    width: 30%;
    left: 1%;
  }
}

/* Mobile (≤767px) */
@media (max-width: 767px) {
  .hero-logo-container {
  	left: 0%;
    width: 40%;
  }
}

@media (max-width: 576px) {
  .hero-logo-container {
  	left: 10px;
    width: 50%;
  }
}

/* Background image scaling */
.background-image-holder {
  background-size: cover;
  background-position: center;
  height: 100%; /* Matches header height */
  width: 110%;
}