.bg-dark-teal {
    --bs-bg-opacity: 1;
    background-color: #12677D !important
}
.bg-teal {
    --bs-bg-opacity: 1;
    background-color: #6FB9BD !important
}
.bg-pale-blue {
    --bs-bg-opacity: 1;
    background-color: #E8F5F1 !important
}
.bg-mint-tea {
    --bs-bg-opacity: 1;
    background-color: #B1DED8 !important
}
.bg-pale-yellow {
    --bs-bg-opacity: 1;
    background-color: #FFFAEC !important
}
.bg-yellow {
    --bs-bg-opacity: 1;
    background-color: #eeb952 !important
}
.bg-dark {
    --bs-bg-opacity: 1;
    background-color: rgb(34, 95, 114) !important
}
.bg-green {
    --bs-bg-opacity: 1;
    background-color: rgb(25, 135, 84) !important
}
.bg-red {
    --bs-bg-opacity: 1;
    background-color: rgb(193, 54, 54) !important
}
.bg-blue {
    --bs-bg-opacity: 1;
    background-color: rgb(193, 54, 54) !important
}

body footer,
body footer p { font-size: 16px !important; line-height: 20px !important; }

.dropdown-toggle:after,
.dropup .dropdown-toggle:after {
	font-size: 14px !important;
	margin-top: 4px;
}
/* Make sure the section is a stacking context */
.jarallax {
	position: relative; /* you already have this */
}

/* The dimming overlay */
.jarallax::before {
	content: "";
	position: absolute;
	inset: 0;                 /* top:0; right:0; bottom:0; left:0 */
	background: rgba(0,0,0,.40); /* 40% black */
	pointer-events: none;     /* let clicks pass through */
	z-index: 0;               /* below content, above the -100 image layer */
}

/* Ensure your content is above the overlay */
.jarallax > .content-layer {
	position: relative;
	z-index: 1;
}
section b,
section strong { color: inherit !important; font-weight: 900 !important; }