.page-banner {
	--page-banner-img: url(../assets/images/services-pexels-erik-mclean-med.jpg);
}

.main > * + * {
	margin-top: 5rem;
}

.main p {
	max-width: 60ch;
}

.page-intro {

	margin-top: 5rem;
	/* padding: 0 var(--r4); */
	padding: 0;
}

.head-body-wrap {
	padding: var(--r4);
}

.head-body-wrap > * + * {
	margin-top: var(--r4);
}


.intro-heading {
	font-weight: 500;
}

.quote {
	padding: 1.5rem;
	position: relative;
	font-size: var(--h4-size);
	font-weight: 500;
	text-align: center;

	z-index: 1;
}

.quote::before {
	position: absolute;
	display: block;
	content: open-quote;

	top: 0;
	left: 0;

	font-size: 10rem;
	line-height: 1;

	opacity: 0.2;
}

.quote::after {
	position: absolute;
	display: block;
	content: close-quote;

	bottom: 0;
	right: 0;

	font-size: 10rem;
	line-height: 0;

	opacity: 0.2;
}

.page-intro .image-wrapper {
	max-width: 60ch;
}

.page-intro .image-wrapper {
	padding: var(--r4);

	max-height: 40ch;
}

.service-info > * + * {
	margin-top: 5rem;
}

.service {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	min-height: 60vh;
	width: 100%;

	/* Make sure hashlink anchors offest the height of the top nav when scrolling to element */
	scroll-margin-top: var(--topbar-ht);
}

/* service section underlays */
#renovation {
	--underlay-url: url(../assets/images/renovation-pexels-mark-mccammon-med.jpg);
}

#retrofitting {
	--underlay-url: url(../assets/images/services-pexels-erik-mclean-small.jpg);
}

#panel {
	--underlay-url: url(../assets/images/panel-pexels-pixabay-small.jpg);
}

#automation {
	--underlay-url: url(../assets/images/automation-pexels-john-tekeridis-small.jpg);
	--underlay-url: url(../assets/images/brain.jpg);
}

#avmedia {
	--underlay-url: url(../assets/images/avmedia-pexels-felipe-hueb-small.jpg);
}

#solar {
	--underlay-url: url(../assets/images/solar-pexels-kelly-lacy-small.jpg);
}

.service * + * {
	margin-top: var(--r6);
}

.container {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	/* justify-content: center; */
	align-items: center;
	flex: 1 0 45ch;

	margin-top: 0;
	padding: 0 var(--r4);
	padding: var(--r4);
	min-height: 50%;
}

.container > * {
	margin-top: var(--r6);
}

.primary {
	/* margin-right: var(--r4); */
	/* text-align: center; */
}

.service-header {
	position: relative;

	padding: 0 var(--r4);
	width: 100%;
}

.service-header::after {
	position: absolute;
	display: block;
	content: '';

	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	width: 100%;
	height: 100%;

	background-color: var(--detail);

	opacity: 0.2;
}

.service-title {
	position: relative;
	text-align: center;

	z-index: 1;
}

.service p,
.feature-list {
	max-width: 60ch;
}

.service p {
	padding: var(--r4);
}

.service > .image-wrapper {
	display: none;
}

.secondary {
	background-color: var(--quat);
}

.secondary h3 {
	width: 100%;

	text-align: center;
	color: var(--detail);
}

.feature-list {
	color: var(--body-dbg);
}

.feature-list * + * {
	margin-top: 0;
}

.feature-list-item {
	flex-basis: 100%;
}

.custom-ul {
	padding-left: 1rem;
}

/* .about li, */
.custom-ul li {
	display: flex;
	align-items: center;
	padding: 1rem 0;
	line-height: 1;
}

/* .about li::before, */
.custom-ul li::before {
	content: '';
	display: inline-block;

	margin-right: 0.5rem;
	height: 2rem;
	width: 2rem;

	background-image: url('../assets/svg/bolt.svg');
	background-size: contain;
	background-repeat: no-repeat;
}

@media screen and (min-width: 48rem) {
}