#header .header-nav-main nav > ul > li.dropdown-mega .dropdown-mega-content {
		padding: 20px 30px;
	}

	#header .header-nav-main nav > ul > li.dropdown-mega .dropdown-mega-sub-title {
		color: #333333;
		display: block;
		font-size: 1em;
		font-weight: 600;
		margin-top: 20px;
		padding-bottom: 5px;
		text-transform: uppercase;
	}

	#header .header-nav-main nav > ul > li.dropdown-mega .dropdown-mega-sub-title:first-child {
		margin-top: 0;
	}

	#header .header-nav-main nav > ul > li.dropdown-mega .dropdown-mega-sub-nav {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	#header .header-nav-main nav > ul > li.dropdown-mega .dropdown-mega-sub-nav > li > a {
		border: 0 none;
		border-radius: 4px;
		color: #777;
		display: block;
		font-size: 0.9em;
		font-weight: normal;
		margin: 0 0 0 -8px;
		padding: 3px 8px;
		text-shadow: none;
		text-transform: none;
		text-decoration: none;
	}

.overlay-color-brand25::before {
    background-color: rgba(0, 153, 204, 0.01); /* #0099cc @ 25 % */

}

.overlay-color-brand25ZXX::before {
    background-color: rgba(211, 211, 211, 0.10); /* #0099cc @ 15 % */

}



.overlay-color-brand35::before {
    background-color: rgba(0, 134, 179, 0.35); /* #0099cc @ 35 % */

}

.overlay-color-purple::before {
    background-color: rgba(48, 16, 48, 0.25); /* #0099cc @ 25 % */

}


/* 2️  Overlay logic */
.img-overlay-wrapperZZZ{
  position: relative;          /* establish containing block */
  display: inline-block;       /* keep it only as wide as the image */
}



.img-overlay-wrapperZZZ::before{
  content: "";
  position: absolute;
  inset: 0;                    /* stretch across the whole image */
  background: #0099cc;         /* overlay color */
  opacity: 0.10;               /* 25 % tint */
  border-radius: inherit;      /* match any rounded corners */
  pointer-events: none;        /* clicks fall through to the image */
}


.top-links {

  width: 100%;
  text-align: right;
  padding: 8px 20px;
  font-size: 16px;
  background: #ffffff; /* Or match your site */
  font-family: 'Open Sans', sans-serif;
}

.top-links a {
 
  margin-left: 20px;
  text-decoration: none;
  color: #0073e6; /* Your brand blue */
  font-weight: 600;
}

.top-links a:hover {
  text-decoration: underline;
}


.headline-with-pdf{
  position: relative;          /* new containing block            */
  display: inline-block;       /* shrinks to content for cleaner  */
  text-align: center;          /* (keep whatever centering you use) */
}

.headline-with-pdf .pdf-link{
  position: absolute;
  top: -2.6rem;       /* pushes it *above* the first line        */
  right: -12.2rem;     /* nudges it to the outside right edge     */
  width: 32px;        /* icon size—adjust to taste               */
  height: auto;
}

.headline-with-pdf .pdf-link img{
  max-width: 100%;
  display: block;
}




.headline-with-pdf .print-link{
  position: absolute;
  top: -2.6rem;       /* pushes it *above* the first line        */
  right: -15.2rem;     /* nudges it to the outside right edge     */
  width: 32px;        /* icon size—adjust to taste               */
  height: auto;
}

.headline-with-pdf .print-link img{
  max-width: 100%;
  display: block;
}

/* Custom Map */
section.section-custom-map {
	background: transparent url(../img/map3.png) center 0 no-repeat;
	padding: 129px 0 0;
	margin: 20px 0 0;
	border: 0;
}

section.section-custom-map section.section {
	border-top-color: rgba(241, 241, 241, 0.8);
	background: rgba(244, 244, 244, 0.8);
}

section.section-custom-map-2 {
	background: transparent url(../img/map-2.png) center 0 no-repeat;
	padding: 129px 0 0;
	margin: 50px 0 0;
	border: 0;
}

section.section-custom-map-2 section.section {
	border-top-color: rgba(241, 241, 241, 0.8);
	background: rgba(244, 244, 244, 0.8);
}

.header-with-overlay {
  position: relative;

  height: 500px; /* adjust as needed */
  overflow: hidden;
}



.header-with-overlay::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.3); /* semi-transparent overlay */
  /* trapezoid: top edge full width, bottom edge inset 20% on either side */
  clip-path: polygon(0% 0%, 60% 0%, 52% 100%, 0% 1000%);
  pointer-events: none; /* so clicks go “through” */
  z-index: 1;
}


.header-with-overlay .content {
  position: relative;
  z-index: 2; 
  color: white;
  padding: 2rem; /* or whatever */
}


/* lift the inner container (and thus all text) above the overlay */
.header-with-overlay .container {
  position: relative;
  z-index: 2;  /* must be higher than the overlay */
}

/* (optional) if you want individual headings even higher */
.header-with-overlay h1,
.header-with-overlay h2 {
  position: relative;
  z-index: 3;
}




.header-without-overlay {
  position: relative;

  height: 500px; /* adjust as needed */
  overflow: hidden;
}



.header-without-overlay::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.1); /* semi-transparent overlay */
  /* trapezoid: top edge full width, bottom edge inset 20% on either side */

  pointer-events: none; /* so clicks go “through” */
  z-index: 1;
}


.header-without-overlay .content {
  position: relative;
  z-index: 2; 
  color: white;
  padding: 2rem; /* or whatever */
}


/* lift the inner container (and thus all text) above the overlay */
.header-without-overlay .container {
  position: relative;
  z-index: 2;  /* must be higher than the overlay */
}

/* (optional) if you want individual headings even higher */
.header-without-overlay h1,
.header-without-overlay h2 {
  position: relative;
  z-index: 3;
}


 .audio-btn {
  background-color: #ffffff;
  color: black;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.audio-btn:hover {
  background-color: #d3d3d3;
}

.flex-container {
  display: flex;
  align-items: center; /* Vertically align center */
}





@media (max-width: 961.98px) {
  .hero-bg {
    background-image: url('../img/m3/mobile-lion10.png') !important;
    background-position: center;
    background-size: cover;
  }
}






