.position-relative {
    position: relative;
}

.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6); /* Semi-transparent black background */
    padding: 15px 20px;
    border-radius: 10px;
}

.overlay-text p {
    font-size: 1.2rem;
    color: white;
    font-weight: bold;
    margin: 0;
}
/* Remove extra padding from the section */
.page-section.cta {
padding: 0;
}

/* Wrapper: relative positioning & height control */
.page-section.cta .image-wrapper {
position: relative;
position: relative;
width: 100%;
}
/* Make the image fully visible and responsive */
.page-section.cta {
/*height: 100vh; /* Full height of screen */
margin: 0;
padding: 0;
}

.page-section.cta .image-wrapper {
    position: relative;
    width: 100%;
    max-height: 50vh;     /* limits height to 50% of viewport */
    overflow: hidden;
}

.page-section.cta .water-image {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* show full image without cropping */
    display: block;
}

/* Heading overlay styling */
.overlay-heading {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
color:#082746;
/* text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); */
z-index: 2;
}

.overlay-heading .section-heading-upper,
.overlay-heading .section-heading-lower {
display: block;
}

/* Style the overlay text at the bottom center */
.overlay-text {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.6);
padding: 10px 20px;
border-radius: 8px;
z-index: 2;
}
.text-center1{
text-align:left;
}

.equal-height-img {
height: 300px;       /* or whatever height you want */
object-fit: contain;   /* this ensures the image fills the height nicely */
width: 100%;         /* keeps image responsive */
}


.img-fluid1 {
max-width: 100%;
height: 400px;
}

@media (max-width: 768px) {
.page-section.cta {
padding: 0;
margin: 0;
height: auto;
}

.page-section.cta .container,
.image-wrapper {
padding: 0;
margin: 0;
height: auto;
}

.water-image {
display: block;
width: 100%;
height: auto;
object-fit: cover;
max-height: 300px; /* control height if needed */
}

}
.section-heading1 {
text-transform: uppercase;
}
.section-heading1 .section-heading-upper {
display: block;
font-size: 1rem;
font-weight: 800;
}
.section-heading1 .section-heading-lower {
display: block;
font-size: 3rem;
font-weight: 100;
}

@media (max-width: 768px) {
.overlay-heading {
font-size: 1rem !important;
text-align: left !important;
position: absolute !important;
top: 20px !important;
left: 20px !important;
transform: none !important;
width: auto !important;
line-height: 1.3 !important;
}
.section-heading1 .section-heading-lower {
display: block;
font-size: 1rem;
font-weight: 100;

}
.section-heading-upper{
color: #ffffff !important;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}
.overlay-heading .section-heading-upper,
.overlay-heading .section-heading-lower {
display: block;
}
.lead{
margin-top: 20px;
}
}





/* Full-width hero image container */
.hero-image-wrapper {
    width: 100vw;                 /* full screen width */
    height: 50vh;                 /* half of viewport height */
    margin-left: 50%;             /* pull outside container padding */
    transform: translateX(-50%);  /* center it */
    overflow: hidden;
    position: relative;
  }
  
  /* Image behavior inside the wrapper */
  .hero-image {
    width: 100%;
    height: 100%;
         /* show full image, no cropping */
    display: block;
  }