/* Minimal stacking fix — no layout changes */
header.hero { z-index: 9999; position: relative; overflow: visible !important; }
header.hero .hero-bg { z-index: 9998 !important; pointer-events: none; }
header.hero .hero-content { z-index: 10000 !important; position: absolute; }


/* REVERT: restore absolute hero-bg (undo the fixed experiment) */
header.hero .hero-bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -20vh !important;
  height: auto !important;
  z-index: 9998 !important;
  pointer-events: none !important;
  background-position: center !important;
  background-size: cover !important;
  will-change: transform;
}

/* ensure hero and content keep their stacking order (no layout changes) */
header.hero {
  position: relative !important;
  overflow: visible !important;
  z-index: 9999 !important;
}
header.hero .hero-content {
  position: absolute !important;
  z-index: 10000 !important;
}


/* Make the section background sit below the hero-bg while keeping section content above it */
/* Target the analysis/therapy row that currently supplies the colored background */
.row.analysis {
  position: relative;
  background: transparent !important; /* remove the element background so the pseudo bg can be controlled */
}

/* recreate the colored band as a pseudo-element behind the content */
.row.analysis::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(98, 131, 164); /* keep the same color you had */
  z-index: 9980;                 /* lower than hero-bg but above page background */
  pointer-events: none;
}

/* ensure the section's content sits above the hero background */
.row.analysis > * {
  position: relative;
  z-index: 10001;                /* above hero-bg so content is not hidden */
}


/* Ensure Therapy section content sits above the hero background (no layout changes) */
section.therapy { position: relative; z-index: 10001 !important; }

/* Put the Therapy blue band above the hero-bg but below the Therapy content */
section.therapy {
  position: relative;
  z-index: 10001 !important; /* keeps content above hero-bg */
  background: transparent !important; /* keep any existing background from interfering */
}

section.therapy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9999;                      /* sits above hero-bg (9998) but below .therapy content (10001) */
  background: rgb(98, 131, 164);      /* the blue band color */
  pointer-events: none;
}


/* Remove the full-section blue band we added earlier */
section.therapy::before { display: none !important; }

/* Top band: ensure .analysis has the blue pseudo */
.analysis {
  position: relative !important;
  overflow: visible !important;
}
.analysis::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(98, 131, 164);
  z-index: 9999;        /* above hero-bg (9998) */
  pointer-events: none;
}

/* Bottom band: blue pseudo on #analysis2, but keep its children above the pseudo */
#analysis2 {
  position: relative;
  overflow: visible;
}
#analysis2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(98, 131, 164);
  z-index: 9999;
  pointer-events: none;
}


/* Remove any previous pseudo attempts that may conflict */
.analysis::before { display: none !important; }

/* Apply the blue band directly on the top row */
.analysis {
  position: relative !important;
  z-index: 9999 !important;              /* sits above hero-bg (9998) */
  background: rgb(98, 131, 164) !important;
  -webkit-backface-visibility: hidden;    /* small perf/paint hint */
}

/* Force direct children of those rows to sit above the pseudo */
.analysis > *, #analysis2 > * {
  position: relative !important;
  z-index: 10003 !important;
}




/* ensure the blue pseudo is above hero-bg (9998) */
.analysis::before {
  z-index: 10000 !important;        /* above hero-bg (9998/9999) */
  pointer-events: none;
  background: rgb(98, 131, 164) !important;
}


/* Force the top Therapy band to blue with higher specificity */
section.therapy .row.analysis {
  position: relative !important;
  z-index: 10000 !important;                /* above hero-bg (9998) */
  background-color: rgb(98, 131, 164) !important;
}

/* Ensure the row’s children sit above the blue band */
section.therapy .row.analysis > * {
  position: relative !important;
  z-index: 10003 !important;
}


/*remove 30px bootstrap extension of .row element width */
section.therapy > .row.analysis {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Ensure columns inside this row use border-box so inner padding doesn't overflow */
section.therapy > .row.analysis > [class*="col-"] {
  box-sizing: border-box;
}


@media (min-width: 320px) and (max-width: 767.999px) {
	
.navbar {
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 550;
     padding: 2rem 2rem;
     display: flex;
     height: 90px;
     justify-content: center;
     background-color: rgba(255, 255, 255, 0.27);  /*Lighter transparency */
     backdrop-filter: blur(2px);  /*Frosted glass effect */
     -webkit-backdrop-filter: blur(2px);  /*Safari support */
     box-shadow: 0 4px 20px rgba(250, 250, 250, 0.3);
     transition: background-color 1.5s ease, box-shadow 1.2s ease;
	 z-index: 10050 !important;
 }
	
	
  /* Hamburger menu styles */
nav#navbar .hamburger,
  #navbar #hamburger,
  .navbar #hamburger {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 36px !important;
    z-index: 22222 !important;
    right: 30px !important;
    top: 10px !important;
    position: absolute !important;
  }

  /* ensure each bar is visible, sized and does not collapse */
  nav#navbar .hamburger > div,
  #navbar #hamburger > div,
  .navbar #hamburger > div,
  .hamburger > div {
    display: block !important;
    width: 25px !important;
    height: 3px !important;
    background-color: #333 !important;
    background-image: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
  }


  /* hide the desktop inline menu at mobile widths */
  nav#navbar ul,
  nav#navbar > ul {
    display: none !important;
  }

  /* show the stacked mobile menu when navbar.open is active */
  nav#navbar.open ul,
  nav#navbar.open > ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    position: absolute !important;
	width: 130px;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    background: #fff !important;  
    padding-top: 20px !important;
	padding-bottom: 20px !important;
	margin-left: -50px !important;
	list-style: none !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
    z-index: 10060 !important;
  }

  /* make links touch-friendly */
  nav#navbar.open ul li a {
    display: block;
	color: #000;
	text-decoration: none;
	font-weight: 300;
	font-size: 16px;
	text-align: center;
	margin-left: -40px;

  }
}