/* Footer background image fix (v3)
   Goal: footer text sits ON TOP of the gradient/image (like the live site)
   - Make the decorative PNG fill the entire footer area
   - Add a subtle dark overlay so white text stays readable
*/

/* Wrapper around the footer block */
.backgroundN{
  position: relative;
  z-index: 0;                 /* stacking context for negative z-index children */
  overflow: hidden;
  background: #0b1a2a;         /* fallback if image fails to load */
  min-height: 520px;
}

/* Decorative image layer: fill full footer height */
.backgroundN .footer-bg{
  position: absolute !important;
  inset: 0 !important;         /* top/right/bottom/left: 0 */
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center bottom !important; /* keep people at the bottom */
  z-index: -2 !important;      /* behind everything inside .backgroundN */
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Readability overlay (between image and text) */
.backgroundN::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.48) 30%, rgba(0,0,0,0.22) 55%, rgba(0,0,0,0.00) 78%);
}

/* Make footer text consistently white (unless explicitly overridden elsewhere) */
.backgroundN,
.backgroundN p,
.backgroundN h1,
.backgroundN h2,
.backgroundN h3,
.backgroundN h4,
.backgroundN h5,
.backgroundN h6,
.backgroundN a{
  color: #fff;
}

.backgroundN a{
  text-decoration: none;
}
.backgroundN a:hover{
  text-decoration: underline;
}

/* Ensure footer content sits above background layers */
.backgroundN .back-upN,
.backgroundN .youN,
.backgroundN .first-boxN,
.backgroundN .footer-lowN{
  position: relative;
  z-index: 1;
}

/* Optional: tiny shadow to help on bright parts of the gradient */
.backgroundN p,
.backgroundN h4{
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

@media (max-width: 768px){
  .backgroundN{
    min-height: 640px;
  }
}