/* ===================== FOOTER BACKGROUND (Synthamate-style wave) ===================== */
/* Apply ONLY to the bottom tab/footer container you’re using. 
   If your footer class is different, replace `.cfa-footer` with your footer class. */

.cfa-footer{
  position: relative;
  overflow: hidden;
  /* keep your existing layout/spacing; only background changes */
  background: linear-gradient(to bottom, #d8ff6a 0%, #7ae78a 52%, #066100 100%);
}

/* upside-down dark wave sitting on TOP of the gradient */
.cfa-footer::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:0;
  height: 140px;          /* adjust “wave depth” */
  pointer-events:none;
  background-repeat: repeat-x;
  background-position: top left;
  background-size: 520px 140px;
  /* wave SVG is already “dark”, then flipped vertically via transform */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='140' viewBox='0 0 520 140'%3E%3Cpath fill='%230b3b17' d='M0 90 C 40 30, 80 30, 120 90 S 200 150, 240 90 S 320 30, 360 90 S 440 150, 480 90 S 520 30, 520 30 L520 0 L0 0 Z'/%3E%3C/svg%3E");
  transform: scaleY(-1);  /* upside down */
  transform-origin: top;
  opacity: 0.95;
}

/* subtle darkening behind the text columns so each “spike” reads darker */
.cfa-footer::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:0; bottom:0;
  pointer-events:none;
  /* dark at the top blending into the green gradient below */
  background:
    linear-gradient(to bottom, rgba(11,59,23,0.55) 0%, rgba(11,59,23,0.18) 22%, rgba(11,59,23,0.0) 48%);
}

/* Keep footer text white so it pops over the dark wave */
.cfa-footer,
.cfa-footer a,
.cfa-footer .cfa-footer-col-title,
.cfa-footer .cfa-footer-link,
.cfa-footer .cfa-footer-tagline,
.cfa-footer .cfa-email,
.cfa-footer .cfa-footer-bottom{
  color:#ffffff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}

/* If you want the big logo/tagline area to stay readable on top of the wave */
.cfa-footer-left{
  position: relative;
  z-index: 1;
}
.cfa-footer-right{
  position: relative;
  z-index: 1;
}
.cfa-footer-bottom{
  position: relative;
  z-index: 1;
  border-top: 2px solid rgba(255,255,255,0.18);
}