:root {
	--white: hsl(0, 0%, 100%);
	--black: hsl(0, 0%, 13%);
	--extreme-light-gray: hsl(0, 0%, 90%);
	--ultra-light-gray: hsl(0, 0%, 85%);
	--very-light-gray: hsl(0, 0%, 70%);
	--light-gray: hsl(0, 0%, 60%);
	--medium-gray: hsl(0, 0%, 50%);
	--dark-gray: hsl(0, 0%, 40%);
	--very-dark-gray: hsl(0, 0%, 30%);
	--dsgreen-lighter: hsl(102, 100%, 50%);
	--dsgreen: hsl(102, 80%, 33.3%);
	--dsgreen-darker: hsl(102, 100%, 25%);
	--header-gradient: linear-gradient(0deg,hsla(102, 100%, 12.5%, 0.9) 0%, hsla(102, 100%, 12.5%, 0.5) 100%);
	--service-area-gradient: linear-gradient(0deg,rgba(255, 255, 255, 0.2) 100%, rgba(255, 255, 255, 0.4) 0%);
	color-scheme: light dark;
	font-size: medium;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: medium;
	font-weight: 400;
	line-height: 1.5;
	color: var(--black);
	text-align: left;
}

@media (prefers-color-scheme: dark) {
	:root {
		--white: hsl(0, 0%, 0%);
		--black: hsl(0, 0%, 87%);
		--extreme-light-gray: hsl(0, 0%, 10%);
		--ultra-light-gray: hsl(0, 0%, 15%);
		--very-light-gray: hsl(0, 0%, 30%);
		--light-gray: hsl(0, 0%, 40%);
		--medium-gray: hsl(0, 0%, 50%);
		--dark-gray: hsl(0, 0%, 60%);
		--very-dark-gray: hsl(0, 0%, 70%);
		--dsgreen: hsl(102, 100%, 50%);
		--dsgreen-darker: hsl(102, 100%, 75%);
		--header-gradient: linear-gradient(0deg,rgba(38, 128, 0, 0.1) 0%, rgba(38, 128, 0, 0.5) 100%);
		--service-area-gradient: linear-gradient(0deg,rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
	}
}

body {
	display: flex;
	flex-direction: column;
	background-color: var(--white);
	color: var(--black);
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-family: Aleo;
	text-wrap: balance;
}

a, a:hover {
	text-decoration: none;
	color: var(--dsgreen);
	cursor: pointer;
}

body > header {
	order: 1;
	position: relative;
	background-image: url("images/tree-line.svg"), var(--header-gradient);
	background-size: cover;
	padding: 1rem;
	color: white;
	text-shadow: 0 0 0.675rem black;
}

header > section {
	margin: 0 auto;
	padding: 0;
}

@media screen and (min-width: 729px) {
	body > header > section {
		display: flex;
		gap: 1rem;
		align-items: center;
		align-content: center;
	}
}

.logo {
	display: block;
	max-width: 10rem;
	object-fit: contain;
	margin: auto;
}

/* @media screen and (min-width: 728px) {
	.logo {
		float: left;
		margin: 1rem;
	}
} */

.text-wrap-balance {
	text-wrap: balance;
}

header > section {
	background-color: transparent;
}

header > section h2 {
	text-align: center;
	text-wrap: balance;
	margin-block-start: 1em;
	margin-block-end: 0.5rem;
}

header > section h2 + p {
	text-align: center;
	margin-top: 0.5rem;
}

header a {
	color: var(--dsgreen-lighter);
}

nav {
	background-color: var(--medium-gray);
	padding-block: 0.5rem;
}

nav > section {
	background-color: transparent;
	display: flex;
	justify-content: space-evenly;
	align-items: end;
	gap: 0.5rem;
	padding: 0;
}

nav > section > a {
	text-align: center;
}

nav a:hover {
	text-shadow: 0 0 1rem var(--white);
}

header + nav {
	position: sticky;
	top: 0;
	order: 2;
	z-index: 99;
}

nav > section > a {
	color: var(--white);
	display: block;
}

body > main {
	order: 3;
}

section {
	padding: 3rem 1.5rem 1.5rem 1.5rem;
	background-color: var(--white);
	max-width: 1280px;
	margin-inline: auto;
}

section:nth-child(even) {
	background-color: var(--extreme-light-gray);
}

section > h1:first-child,
section > h2:first-child,
section > h3:first-child {
	margin-block-start: 0;
}

section#Welcome-to-Ds-Hauling-and-Demolition-Services {
	padding-block-end: 0;
}

div.tags {
	margin-block-start: 1rem;
	margin-block-end: 0;
	text-align: right;
}

div.tags > span {
	display: inline-block;
	padding: 0.5rem;
	background-color: var(--dsgreen-darker);
	color: var(--white);
	margin-inline-start: 0.5rem;
}

div#pro-services fieldset {
	border: thin solid var(--medium-gray);
	text-align: center;
	margin-block-start: 3.5rem;
	border-radius: 0.5rem;
	position: relative;
	padding: 3rem 1rem 1rem 1rem;
}

div#pro-services fieldset > legend {
	background-color: var(--white);
	color: var(--dsgreen);
	border-radius: 6em;
	border: thin solid var(--medium-gray);
	width: min-content;
	padding: 0.5em 0.625em;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
}

.carousel-caption {
	background-color:hsla(0, 0%, 13%, 0.5);
	padding-inline: 1.25rem;
}

.carousel-item img {
	width: 100%;
	object-fit: cover;
}

ul.pro-services > li + li {
	margin-block-start: 0.5rem;
}

section#ds-hauling-and-demolition-service-areas {
	background-image: var(--service-area-gradient), url(/images/417-area-code-map-sliceA.jpg);
	background-position: bottom left;
	background-repeat: no-repeat;
	background-size: cover;
}

#localities {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16ch, 1fr));
	gap: 0.5rem;
	padding-left: 1rem;
}

blockquote {
	margin: 1rem;
	padding: 1rem 5rem;
	border: thin solid var(--dark-gray);
	background-color: var(--ultra-light-gray);
	position: relative;
	quotes: "“" "”" "‘" "’";
	--ff: 'Times New Roman', Times, serif;
	--lh: 0;
	--fs: 800%;
	--clr: var(--dsgreen-darker);
	--o: 0.5;
	--oqt: 3.5rem;
	--oql: 0.5rem;
	--cqb: 0;
	--cqr: 0.5rem;
}

blockquote::before {
	content: open-quote;
	font-family: var(--ff);
	line-height: var(--lh);
	font-size: var(--fs);
	color: var(--clr);
	position: absolute;
	top: var(--oqt);
	left: var(--oql);
	opacity: var(--o);
}

blockquote::after {
	content: close-quote;
	font-family: var(--ff);
	line-height: var(--lh);
	font-size: var(--fs);
	color: var(--clr);
	position: absolute;
	right: var(--cqr);
	bottom: var(--cqb);
	opacity: var(--o);
}

p.reviewer {
	margin-inline-start: 50%;
	position: relative;
}

@media screen and (max-width: 684px) {
	p.reviewer {
		margin-inline-start: 25%;
	}
	@media screen and (max-width: 527px) {
		blockquote {
			padding: 3rem 1rem;
			--fs: 400%;
			--oqt: 2rem;
			--oql: 0.5rem;
			--cqb: 0.5rem;
			--cqr: 0.5rem;
		}
		p.reviewer {
			margin-inline-start: 15%;
		}
	}
}

p.reviewer::before {
	content: "— ";
	position: absolute;
	right: 101%;
}

p.reviewer > cite {
	display: block;
	font-size: smaller;
}

div#contact-grid {
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.form-control {
	color: var(--black);
	background-color: var(--white);
}

.btn-primary {
	border-color: var(--dsgreen-darker);
	background-color: var(--dsgreen);
	color: var(--white);
}

.btn-secondary {
    color: var(--white);
    background-color: var(--light-gray);
    border-color: var(--light-gray);
}

p#my-form-status::empty {
	display: none;
}

div#contact-grid > div.contact-card {
	--darkreader-text--white: white;
	--darkreader-text--black: black;
	--darkreader-text-000000: black;
	--darkreader-background-ffffff: white;
	--darkreader-text-268000: var(--darkreader-border--dsgreen);
	border: thin solid var(--black);
	color: var(--darkreader-text--black);
	padding: 1rem;
	background-color: var(--ultra-light-gray);
	background-image: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
	background-position-x: 45%;
	background-position-y: center;
	background-repeat: no-repeat;
	background-size: cover;
	text-shadow:
		0 0 0.125em var(--darkreader-text--white),
		0 0 0.25em var(--darkreader-text--white),
		0 0 0.375em var(--darkreader-text--white),
		0 0 0.5em var(--darkreader-text--white);
}

div.h-card {
	margin-block-end: 1rem;
}

div.h-card p {
	margin: 0;
}

div.h-card a {
	color: hsl(102, 100%, 25%) !important;
}

div.contact-card a.btn {
	background-color: var(--dsgreen-darker);
	border: thin solid var(--dsgreen);
	margin-top: 1rem;
	-webkit-text-stroke: 0 transparent;
	text-shadow: none;
}

@media screen and (max-width: 420px) {
	div.contact-card {
		background-position-x: 70%;
	}
}

body > footer {
	order: 4;
	text-align: center;
	border-top: thin solid var(--black);
	margin-block-start: 2rem;
	background-color: var(--very-dark-gray);
	color: var(--white);
	font-size: 88%;
}

footer > nav {
	display: block;
	text-align: center;
}

footer > nav > a {
	color: var(--white);
}