/* =========================================
   1. Adjustable settings
========================================= */

:root {
  /* Box dimensions and position */
  --box-height: 17vh;
  --box-min-height: 170px;
  --box-top-position: 20%;
  --box-gap: 8px;
  --box-side-space: 5%;

  /* Box appearance */
  --box-radius: 10px;
  --box-blur: 5px;
  --box-background: rgba(255, 255, 255, 0.12);
  --box-border: rgba(255, 255, 255, 0.28);

  /* Box padding */
  --box-padding-top: 9px;
  --box-padding-x: 14px;
  --box-padding-bottom: 10px;

  /* Icons */
  --icon-width: 20%;
  --icon-max-width: 42px;
  --icon-margin-bottom: 6px;

  /* Colors */
  --icon-first-color: #a9e7a4;
  --icon-other-color: #ffffff;
  --icon-line-first-color: #a9e7a4;
  --icon-line-other-color: #8ed8f8;

  --title-color: #ffffff;
  --description-color: #ffffff;

  /* Mobile banner overlay: change color and opacity independently */
  --mobile-overlay-color: 21, 148, 71; /* RGB for #174D38 (forest green) */
  --mobile-overlay-opacity: 0.3; /* 0 = transparent, 1 = fully opaque */

  /* Font sizes: independently adjustable */
  --title-size: clamp(13px, 1.2vw, 19px);
  --description-size: clamp(14px, 0.85vw, 14px);

  /* Font weights */
  --title-weight: 700;
  --description-weight: 400;

  /* Vertical spacing between lines */
  --title-line-height: 1.1;
  --description-line-height: 1.4;

  /* Overall title and description widths */
  --title-width: 100%;
  --description-width: 100%;

  /* Individual title line widths: Box 1 */
  --box-1-title-line-1-width: 100%;
  --box-1-title-line-2-width: 100%;
  --box-1-title-line-3-width: 100%;

  /* Individual title line widths: Box 2 */
  --box-2-title-line-1-width: 100%;
  --box-2-title-line-2-width: 100%;
  --box-2-title-line-3-width: 100%;

  /* Individual title line widths: Box 3 */
  --box-3-title-line-1-width: 100%;
  --box-3-title-line-2-width: 100%;
  --box-3-title-line-3-width: 100%;

  /* Individual title line widths: Box 4 */
  --box-4-title-line-1-width: 100%;
  --box-4-title-line-2-width: 100%;
  --box-4-title-line-3-width: 100%;

  /* Individual title line widths: Box 5 */
  --box-5-title-line-1-width: 100%;
  --box-5-title-line-2-width: 100%;
  --box-5-title-line-3-width: 100%;

  /* Individual description-line widths: Box 1 */
  --box-1-desc-line-1-width: 100%;
  --box-1-desc-line-2-width: 100%;
  --box-1-desc-line-3-width: 100%;

  /* Individual description-line widths: Box 2 */
  --box-2-desc-line-1-width: 100%;
  --box-2-desc-line-2-width: 100%;
  --box-2-desc-line-3-width: 100%;

  /* Individual description-line widths: Box 3 */
  --box-3-desc-line-1-width: 100%;
  --box-3-desc-line-2-width: 100%;
  --box-3-desc-line-3-width: 100%;

  /* Individual description-line widths: Box 4 */
  --box-4-desc-line-1-width: 100%;
  --box-4-desc-line-2-width: 100%;
  --box-4-desc-line-3-width: 100%;

  /* Individual description-line widths: Box 5 */
  --box-5-desc-line-1-width: 100%;
  --box-5-desc-line-2-width: 100%;
  --box-5-desc-line-3-width: 100%;

  /* Gap between title and description in each box */
  --box-1-title-description-gap: 4px;
  --box-2-title-description-gap: 4px;
  --box-3-title-description-gap: 12px;
  --box-4-title-description-gap: 4px;
  --box-5-title-description-gap: 4px;
}

/* =========================================
   2. Banner structure
   Preserve original banner height
========================================= */

#headerWrapper {
  position: relative;
  width: 100%;
  height: var(--header-height);
  overflow: hidden;
}

#headerWrapper .header-content {
  position: relative;
  width: 100%;
  height: 100%;
}

#headerWrapper .banner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#headerWrapper .banner img {
  display: block;
  width: 100%;
  height: var(--header-height);
  object-fit: fill;
}

/* =========================================
   3. Five boxes layout
========================================= */

#headerWrapper .services-overlay {
  position: absolute;
  top: var(--box-top-position);
  left: 0;
  right: 0;
  transform: translateY(-50%);

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--box-gap);

  direction: ltr;
  padding-left: var(--box-side-space);
  padding-right: var(--box-side-space);

  box-sizing: border-box;
  z-index: 2;
}

/* =========================================
   4. Individual box
========================================= */

#headerWrapper .service-box {
  height: var(--box-height);
  min-height: var(--box-min-height);
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  padding: var(--box-padding-top) var(--box-padding-x) var(--box-padding-bottom);

  box-sizing: border-box;

  color: var(--title-color);
  text-align: left;
  direction: ltr;

  background: var(--box-background);
  border: 1px solid var(--box-border);
  border-radius: var(--box-radius);

  -webkit-backdrop-filter: blur(var(--box-blur));
  backdrop-filter: blur(var(--box-blur));

  overflow: hidden;
}

/* =========================================
   5. Icon and underline
========================================= */

#headerWrapper .service-icon {
  width: var(--icon-width);
  max-width: var(--icon-max-width);
  flex-shrink: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  margin-bottom: var(--icon-margin-bottom);
}

#headerWrapper .service-icon img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

#headerWrapper .service-icon-line {
  display: block;
  width: 100%;
  height: 3px;
  margin-top: 4px;

  background: var(--icon-line-other-color);
  border-radius: 2px;
}

/* First box: green icon */

#headerWrapper .service-box-1 .service-icon img {
  filter: brightness(0) saturate(100%) invert(87%) sepia(14%) saturate(670%)
    hue-rotate(63deg) brightness(101%);
}

#headerWrapper .service-box-1 .service-icon-line {
  background: var(--icon-line-first-color);
}

/* =========================================
   6. Title and description
========================================= */

#headerWrapper .service-copy {
  width: 100%;
  min-width: 0;
  flex: 1;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Title */

#headerWrapper .service-title {
  width: var(--title-width);
  max-width: 100%;
  margin: 0;
  padding: 0;

  color: var(--title-color);
  font-size: var(--title-size);
  font-weight: var(--title-weight);
  line-height: var(--title-line-height);

  overflow-wrap: anywhere;
}

#headerWrapper .service-title span {
  display: block;
  max-width: 100%;
}

#headerWrapper .service-title-short {
  margin-bottom: 0;
}

/* Description */

#headerWrapper .service-description {
  width: var(--description-width);
  max-width: 100%;
  margin: 0;
  padding: 0;

  color: var(--description-color);
  font-size: var(--description-size);
  font-weight: var(--description-weight);
  line-height: var(--description-line-height);

  overflow-wrap: anywhere;
}

/* =========================================
   7. Independent title-description gaps
========================================= */

#headerWrapper .service-box-1 .service-description {
  margin-top: var(--box-1-title-description-gap);
}

#headerWrapper .service-box-2 .service-description {
  margin-top: var(--box-2-title-description-gap);
}

#headerWrapper .service-box-3 .service-description {
  margin-top: var(--box-3-title-description-gap);
}

#headerWrapper .service-box-4 .service-description {
  margin-top: var(--box-4-title-description-gap);
}

#headerWrapper .service-box-5 .service-description {
  margin-top: var(--box-5-title-description-gap);
}

/* =========================================
   8. Individual title-line widths
   Requires matching span classes in HTML
========================================= */

#headerWrapper .service-box-1 .title-line-1 {
  width: var(--box-1-title-line-1-width);
}
#headerWrapper .service-box-1 .title-line-2 {
  width: var(--box-1-title-line-2-width);
}
#headerWrapper .service-box-1 .title-line-3 {
  width: var(--box-1-title-line-3-width);
}

#headerWrapper .service-box-2 .title-line-1 {
  width: var(--box-2-title-line-1-width);
}
#headerWrapper .service-box-2 .title-line-2 {
  width: var(--box-2-title-line-2-width);
}
#headerWrapper .service-box-2 .title-line-3 {
  width: var(--box-2-title-line-3-width);
}

#headerWrapper .service-box-3 .title-line-1 {
  width: var(--box-3-title-line-1-width);
}
#headerWrapper .service-box-3 .title-line-2 {
  width: var(--box-3-title-line-2-width);
}
#headerWrapper .service-box-3 .title-line-3 {
  width: var(--box-3-title-line-3-width);
}

#headerWrapper .service-box-4 .title-line-1 {
  width: var(--box-4-title-line-1-width);
}
#headerWrapper .service-box-4 .title-line-2 {
  width: var(--box-4-title-line-2-width);
}
#headerWrapper .service-box-4 .title-line-3 {
  width: var(--box-4-title-line-3-width);
}

#headerWrapper .service-box-5 .title-line-1 {
  width: var(--box-5-title-line-1-width);
}
#headerWrapper .service-box-5 .title-line-2 {
  width: var(--box-5-title-line-2-width);
}
#headerWrapper .service-box-5 .title-line-3 {
  width: var(--box-5-title-line-3-width);
}

/* =========================================
   9. Individual description-line widths
   Requires matching span classes in HTML
========================================= */

#headerWrapper .service-box-1 .desc-line-1 {
  width: var(--box-1-desc-line-1-width);
}
#headerWrapper .service-box-1 .desc-line-2 {
  width: var(--box-1-desc-line-2-width);
}
#headerWrapper .service-box-1 .desc-line-3 {
  width: var(--box-1-desc-line-3-width);
}

#headerWrapper .service-box-2 .desc-line-1 {
  width: var(--box-2-desc-line-1-width);
}
#headerWrapper .service-box-2 .desc-line-2 {
  width: var(--box-2-desc-line-2-width);
}
#headerWrapper .service-box-2 .desc-line-3 {
  width: var(--box-2-desc-line-3-width);
}

#headerWrapper .service-box-3 .desc-line-1 {
  width: var(--box-3-desc-line-1-width);
}
#headerWrapper .service-box-3 .desc-line-2 {
  width: var(--box-3-desc-line-2-width);
}
#headerWrapper .service-box-3 .desc-line-3 {
  width: var(--box-3-desc-line-3-width);
}

#headerWrapper .service-box-4 .desc-line-1 {
  width: var(--box-4-desc-line-1-width);
}
#headerWrapper .service-box-4 .desc-line-2 {
  width: var(--box-4-desc-line-2-width);
}
#headerWrapper .service-box-4 .desc-line-3 {
  width: var(--box-4-desc-line-3-width);
}

#headerWrapper .service-box-5 .desc-line-1 {
  width: var(--box-5-desc-line-1-width);
}
#headerWrapper .service-box-5 .desc-line-2 {
  width: var(--box-5-desc-line-2-width);
}
#headerWrapper .service-box-5 .desc-line-3 {
  width: var(--box-5-desc-line-3-width);
}

/* =========================================
   10. Medium screens
========================================= */

@media (max-width: 992px) {
  :root {
    --box-height: 17vh;
    --box-min-height: 155px;

    --box-top-position: 44%;

    --box-side-space: 3%;
    --box-gap: 6px;

    --box-padding-top: 8px;
    --box-padding-x: 9px;
    --box-padding-bottom: 8px;

    --icon-width: 25%;
    --icon-margin-bottom: 5px;

    --title-size: clamp(12px, 1.5vw, 17px);
  }
}

/* =========================================
   11. Mobile screens only
   Desktop and tablet rules above remain unchanged
========================================= */

@media (max-width: 576px) {
  :root {
    /* Provide enough vertical space for all five services on mobile */
    --header-height: max(75vw, 400px);
  }

  #headerWrapper {
    height: var(--header-height);
    overflow: hidden;
  }

  #headerWrapper .banner,
  #headerWrapper .header-content {
    height: 100%;
  }

  #headerWrapper .banner img {
    height: var(--header-height);
  }

  /* Mobile-only colored overlay; adjust color and opacity in :root */
  #headerWrapper .banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: rgba(
      var(--mobile-overlay-color),
      var(--mobile-overlay-opacity)
    );
  }

  /* Five services stacked vertically */
  #headerWrapper .services-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: none;

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 10px;

    padding: 14px 12px;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* All service rows are transparent by default */
  #headerWrapper .service-box {
    width: 100%;
    height: auto;
    min-height: 0;
    min-width: 0;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;

    padding: 0;
    margin: 0;

    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    box-shadow: none;

    -webkit-backdrop-filter: none;
    backdrop-filter: none;

    color: #ffffff !important;
    text-align: left;
    overflow: visible;
  }

  /* Only the first service has a translucent box */
  #headerWrapper .service-box-1 {
    padding: 9px 10px;
    background: var(--box-background);
    border-color: var(--box-border);
    border-radius: var(--box-radius);

    -webkit-backdrop-filter: blur(var(--box-blur));
    backdrop-filter: blur(var(--box-blur));
  }

  /* Slightly larger icons; subtle shadows make their edges look bolder */
  #headerWrapper .service-icon {
    width: 28px;
    min-width: 28px;
    max-width: 28px;
    flex: 0 0 28px;
    margin: 0;
  }

  #headerWrapper .service-icon img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    filter: drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.95));
  }

  /* Preserve the first icon's green color and add a matching subtle shadow */
  #headerWrapper .service-box-1 .service-icon img {
    filter: brightness(0) saturate(100%) invert(87%) sepia(14%) saturate(670%)
      hue-rotate(63deg) brightness(101%)
      drop-shadow(0 0 0.6px rgba(169, 231, 164, 0.95));
  }

  /* The underline is not used in the compact mobile layout */
  #headerWrapper .service-icon-line {
    display: none;
  }

  /* Title and description sit to the right of the icon */
  #headerWrapper .service-copy {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;

    color: #ffffff !important;
    text-align: left;
  }

  /* Keep the complete title on one line */
  #headerWrapper .service-title {
    display: block;
    width: 100% !important;
    max-width: 100%;
    margin: 0;
    padding: 0;

    color: #ffffff !important;
    font-size: clamp(12px, 3.3vw, 15px);
    font-weight: 800;
    line-height: 1.25;

    white-space: nowrap;
    overflow-wrap: normal;
    text-indent: 0;
    text-align: left;
  }

  /* Join the title's existing spans into a single line on mobile */
  #headerWrapper .service-title span {
    display: inline !important;
    width: auto !important;
    max-width: none;
    margin: 0;
    padding: 0;

    color: #ffffff !important;
    font-weight: 800;
    white-space: nowrap;
  }

  #headerWrapper .service-title span:not(:last-child)::after {
    content: " ";
  }

  /* Indent the description block so every wrapped line shares the same start */
  #headerWrapper .service-description {
    display: block;
    width: 100% !important;
    max-width: 100%;
    margin: 3px 0 0;
    padding: 0 0 0 9px;
    box-sizing: border-box;

    color: #ffffff !important;
    font-size: clamp(11px, 3vw, 13px);
    font-weight: 700;
    line-height: 1.35;

    white-space: normal;
    overflow-wrap: anywhere;
    text-indent: 0;
    text-align: left;
  }

  /* Override each service's desktop title-description spacing */
  #headerWrapper .service-box-1 .service-description,
  #headerWrapper .service-box-2 .service-description,
  #headerWrapper .service-box-3 .service-description,
  #headerWrapper .service-box-4 .service-description,
  #headerWrapper .service-box-5 .service-description {
    margin-top: 3px;
  }

  /* Keep existing description spans in the same text flow and indentation */
  #headerWrapper .service-description span {
    display: inline !important;
    width: auto !important;
    max-width: none;
    margin: 0;
    padding: 0;

    color: #ffffff !important;
    font-size: inherit;
    font-weight: 700;
    text-indent: 0;
  }

  #headerWrapper .service-description span:not(:last-child)::after {
    content: " ";
  }
}

/* =========================================
   Fix: Keep banner and service boxes positioned
========================================= */

/* Keep the banner wrapper as the positioning reference */
#headerWrapper {
  position: relative;
  width: 100%;
  height: var(--header-height);
  overflow: hidden;
}

/* Make header content fill the banner */
#headerWrapper .header-content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Keep the banner image inside its wrapper */
#headerWrapper .banner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#headerWrapper .banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* Restore the intended position of the five boxes */
#headerWrapper .services-overlay {
  position: absolute;
  top: var(--box-top-position);
  left: 0;
  right: 0;
  bottom: auto;

  transform: translateY(-50%);

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--box-gap);

  direction: ltr;
  padding-left: var(--box-side-space);
  padding-right: var(--box-side-space);

  box-sizing: border-box;
  z-index: 2;
}

/* Keep the mobile layout unchanged */
@media (max-width: 576px) {
  #headerWrapper .header-content {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
  }

  #headerWrapper .services-overlay {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    transform: none;

    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 10px;
  }
}