/* Section Background Colors */
.background-blue {
	background-color: var(--background-blue, #3080B2);
	color: #fff;
}

.background-blue :is(h1, h2, h3, h4) {
	color: #fff;
}

.background-light-blue {
	background-color: var(--light-blue, #EFF5FB);
}

.background-grey {
	background-color: var(--grey, #2B363A);
	color: #fff;
}

.background-grey :is(h1, h2, h3, h4) {
	color: #fff;
}

.background-light-blue-gradient {
	background: linear-gradient(0deg, #FFF 33.42%, #ECF8FF 100%);
}

.background-white-to-blue-gradient {
	background: linear-gradient(180deg, #FFF 33.42%, #ECF8FF 100%);
}

.background-blue-green-gradient {
	color: #fff;
	background: linear-gradient(98deg, rgba(183, 206, 63, 0.50) 18.23%, rgba(88, 137, 183, 0.50) 99.14%), #136599;
}

.background-blue-green-gradient :is(h1, h2, h3, h4) {
	color: #fff;
}

.background-grey-gradient {
	color: #fff;
	background: linear-gradient(112deg, rgba(25, 125, 188, 0.00) 35.7%, rgba(25, 125, 188, 0.36) 97.61%), #151515;
}

.background-grey-gradient :is(h1, h2, h3, h4) {
	color: #fff;
}

/* Section Previous Color Overlays */
section[class*="previous-"]::before {
	content: "";
	position: absolute;
	z-index: 0;
	width: 100%;
	height: 400px;
	max-height: 60%;
	top: 0;
	left: 0;
	pointer-events: none;
	background-color: transparent;
}

section.previous-white::before,
section.previous-none::before {
	background-color: #fff;
}

section.previous-blue::before {
	background-color: var(--background-blue, #3080B2);
}

section.previous-grey::before {
	background-color: var(--grey, #2B363A);
}

section.previous-light-blue::before {
	background-color: var(--light-blue, #EFF5FB);
}

/* Remove Top Padding When Same Background */
.background-white + .background-white,
.background-white + .previous-white,
.background-light-blue-gradient + .background-white,
.background-light-blue-gradient + .previous-white {
	padding-top: 0;
}

.background-grey + .background-grey,
.background-grey + .previous-grey {
	padding-top: 0;
}

.background-light-blue + .background-light-blue,
.background-light-blue + .previous-light-blue {
	padding-top: 0;
}

.background-blue + .background-blue,
.background-blue + .previous-blue {
	padding-top: 0;
}

/* Section Container Colors */
section[class*="container-"][class*="previous-"]::before {
	height: 50%;
}

section[class*="container-"]:not(.container-none) .container {
	padding: 47px;
	position: relative;
	color: var(--body-text, #151515);
}

section[class*="container-"]:not(.container-none):first-child .container {
	padding-top: 0;
}

section[class*="container-"]:not(.container-none) .container :is(h1, h2, h3, h4) {
	color: var(--body-text, #151515);
}

section[class*="container-"]:not(.container-none) .container::before {
	content: "";
	position: absolute;
	z-index: -1;
	width: calc(100% - 30px);
	height: calc(100% - 30px);
	top: 15px;
	left: 15px;
	border-radius: 30px;
	pointer-events: none;
}

.container-light-blue .container::before,
.container-light-blue.call-to-action-section .call-to-action-container {
	background-color: var(--light-blue, #EFF5FB);
}

.container-white .container::before,
.container-white.call-to-action-section .call-to-action-container {
	background-color: #fff;
}

.container-light-blue-gradient.call-to-action-section .call-to-action-container {
	background: linear-gradient(0deg, #FFF 33.42%, #ECF8FF 100%);
}

.container-light-blue :is(h1, h2, h3, h4),
.container-light-blue-gradient.call-to-action-section .section-introduction :is(h1, h2, h3, h4) {
	color: var(--dark-blue, #0A3E3F);
}

.container-light-blue-gradient.call-to-action-section .section-introduction {
	color: var(--body-text, #151515);
}

.container-grey.call-to-action-section .call-to-action-container {
	background-color: var(--grey, #2B363A);
	color: #fff;
}

.container-blue.call-to-action-section .call-to-action-container {
	background-color: var(--blue, #197DBC);
	color: #fff;
}

.container-blue.call-to-action-section .call-to-action-container .section-introduction :is(h1, h2, h3, h4) {
	color: #fff;
}

@media screen and (max-width: 991px) {
	section[class*="container-"]:not(.container-none) .container {
		padding: 40px;
	}
	
	section[class*="container-"]:not(.container-none) .container::before {
		width: calc(100% - 40px);
		height: calc(100% - 40px);
		top: 20px;
		left: 20px;
	}
}