/* Hero full-bleed */
.hero-section {
  position: relative;
  overflow: visible;
}

/* make the background span the full viewport width regardless of parent container */
.hero-bleed {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 60vh; /*hange to 100vh if you want full screen */
  display: flex;
  align-items: center;
  justify-content: center;

  /* full-bleed trick */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* overlay for readability */
.hero-bleed .overlay {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  background: rgba(0,0,0,0.35);
  z-index: 1;
}

/* content stays above overlay */
.hero-content {
  position: relative;
  z-index: 2;
  padding: 4rem 0; /* adjust spacing */
  color: #fff !important;
}

/* optional: avoid horizontal scrollbar from 100vw on small browsers */
html, body {
  overflow-x: hidden;
}

.front .content {
    padding: 0px;
}

.hero-content h1, .hero-content h4{
    color: #fff;
}