/* general styling */
:root {
	--primary: #981b36;
	--primaryLight: #ef4123;
	--secondary: #ef4123;
	--secondaryLight: #ef4123;
	--headerColor: #635851;
	--bodyTextColor: #28231d;
	--bodyTextColorWhite: #fafbfc;
	--headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);  /* 31px to 49px */
	--bodyFontSize: 1.3125rem;  /* equivalent to 21px */
	--sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
	}

body {
	margin: 0;
	padding: 0;
	}

*, *:before, *:after {
	box-sizing: border-box;  /* prevents padding from affecting height and width */
	}


/* general link styling */
a {
	text-decoration: none;
	}

a:link {
	color: #28231d;
	}

a:visited {
	color: #28231d;
	}

a:hover {
	color: #981b36;
	}

a:active {
	color: #981b36;
	}


/* font info */
@font-face {
	font-family: "roboto-regular";
	src: url("fonts/roboto-regular.woff2") format('woff2');
	src: url("fonts/roboto-regular.woff") format('woff');
	font-weight: normal;
	font-style: normal;
	}

@font-face {
	font-family: "roboto-slab-bold";
	src: url("fonts/roboto-slab-bold.woff2") format('woff2');
	src: url("fonts/roboto-slab-bold.woff") format('woff');
	font-weight: normal;
	font-style: normal;
	}

@font-face {
	font-family: "fjallaone";
	src: url("fonts/fjallaone-regular.woff2") format('woff2');
	src: url("fonts/fjallaone-regular.woff") format('woff');
	font-weight: normal;
	font-style: normal;
	}


/* text styling */
.gc-title {
	font-family: "fjallaone", Tahoma, sans-serif;
	font-size: var(--headerFontSize);
	font-weight: 900;
	line-height: 1.2em;
	text-align: inherit;
	max-width: 43.75rem;
	margin: 0 0 1rem 0;
	color: var(--headerColor);
	position: relative;
	}

.gc-text {
	font-family: "roboto-regular", Cambria, Calibri, sans-serif;
	font-size: var(--bodyFontSize);
	line-height: 1.5em;
	text-align: inherit;
	width: 100%;
	max-width: 40.625rem;
	margin: 0;
	color: var(--bodyTextColor);
	}

hr {
	display: block;
	position: relative;
	padding: 0;
	margin: 8px auto;
	height: 0;
	width: 100%;
	max-height: 0;
	font-size: 1px;
	line-height: 0;
	clear: both;
	border: none;
	border-top: 1px solid #aaaaaa;
	border-bottom: 1px solid #ffffff;
	}

h1 {
	font-family: "fjallaone", Tahoma, sans-serif;
	font-size: 2.125rem;  /* equivalent to 34px */
	font-weight: bold;
	color: #635851;
	}

h2 {
	font-family: "fjallaone", Tahoma, sans-serif;
	font-size: 1.875rem;  /* equivalent to 30px */
	font-weight: bold;
	color: #635851;
	}

h3 {
	font-family: "fjallaone", Tahoma, sans-serif;
	font-size: 1.5rem;  /* equivalent to 24px */
	font-weight: bold;
	color: #635851;
	}

h4 {
	font-family: "roboto-slab-bold", Cambria, Calibri, serif;
	font-size: 1.25rem;   /* equivalent to 20px */
	font-weight: bold;
	color: #635851;
	}

h5 {
	font-family: "roboto-slab-bold", Cambria, Calibri, serif;
	font-size: 1.125rem;  /* equivalent to 18px */
	font-weight: bold;
	color: #635851;
	}

h6 {
	font-family: "roboto-slab-bold", Cambria, Calibri, serif;
	font-size: 1rem;  /* equivalent to 16px */
	font-weight: bold;
	color: #635851;
	}

/*-- navigation styling -*/
/* mobile screens: 1023px */
@media only screen and (max-width: 63.9375rem) {
	body.gc-open {
	overflow: hidden;
	}

#gc-navigation {
	font-family: "robotoregular", Cambria, Calibri, sans-serif;
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 1rem;
	background-color: #fff;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	position: fixed;
	z-index: 10000;
	}

#gc-navigation:before {
	content: "";
	width: 100%;
	height: 0vh;
	background: rgba(0, 0, 0, 0.6);
	opacity: 0;
	display: block;
	position: absolute;
	top: 100%;
	right: 0;
	z-index: -1100;
	transition: height 0.5s, opacity 0.5s;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	}

#gc-navigation.gc-active:before {
	height: 150vh;
	opacity: 1;
	}

#gc-navigation.gc-active .gc-ul-wrapper {
	opacity: 1;
	transform: scaleY(1);
	transition-delay: 0.15s;
	}

#gc-navigation.gc-active .gc-li {
	opacity: 1;
	transform: translateY(0);
	}

#gc-navigation .gc-container {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	}

#gc-navigation .gc-logo {
	width: 40%;
	max-width: 9.125rem;
	height: 100%;
	margin: 0 auto 0 0;
	box-sizing: border-box;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
	}

#gc-navigation .gc-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	}

#gc-navigation .gc-toggle {
	/* 44px to 48px */
	width: clamp(2.75rem, 6vw, 3rem);
	height: clamp(2.75rem, 6vw, 3rem);
	margin: 0 0 0 auto;
	background-color: transparent;
	border: none;
	border-radius: 0.25rem;
	display: flex;
	justify-content: center;
	align-items: center;
	}

#gc-navigation .gc-active .gc-line1 {
	top: 50%;
	transform: translate(-50%, -50%) rotate(225deg);
	}

#gc-navigation .gc-active .gc-line2 {
	top: 50%;
	transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
	transform-origin: center;
	}

#gc-navigation .gc-active .gc-line3 {
	opacity: 0;
	bottom: 100%;
	}

#gc-navigation .gc-box {
	/* 24px to 28px */
	width: clamp(1.5rem, 2vw, 1.75rem);
	/* 14px to 16px */
	height: clamp(0.875rem, 1.5vw, 1rem);
	position: relative;
	}

#gc-navigation .gc-line {
	width: 100%;
	height: 2px;
	background-color: #1a1a1a;
	border-radius: 2px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	}

#gc-navigation .gc-line1 {
	top: 0;
	transition: transform 0.5s, top 0.3s, left 0.3s;
	animation-duration: 0.7s;
	animation-timing-function: ease;
	animation-direction: normal;
	animation-fill-mode: forwards;
	transform-origin: center;
	}

#gc-navigation .gc-line2 {
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	transition: top 0.3s, left 0.3s, transform 0.5s;
	animation-duration: 0.7s;
	animation-timing-function: ease;
	animation-direction: normal;
	animation-fill-mode: forwards;
	}

#gc-navigation .gc-line3 {
	bottom: 0;
	transition: bottom 0.3s, opacity 0.3s;
	}

#gc-navigation .gc-ul-wrapper {
	width: 100%;
	height: auto;
	padding-bottom: 2.4em;
	background-color: #fff;
	box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
	opacity: 0;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: -1;
	overflow: hidden;
	transform: scaleY(0);
	transition: transform 0.4s, opacity 0.3s;
	transform-origin: top;
	}

#gc-navigation .gc-ul {
	width: 100%;
	height: auto;
	max-height: 65vh;
	margin: 0;
	padding: 3rem 0 0 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 1.25rem;
	overflow: scroll;
	}

#gc-navigation .gc-li {
	text-align: center;
	list-style: none;
	width: 100%;
	margin-right: 0;
	opacity: 0;
	transform: translateY(-4.375rem);
	transition: transform 0.6s, opacity 0.9s;
	}

#gc-navigation .gc-li:nth-of-type(1) {
	transition-delay: 0.05s;
	}

#gc-navigation .gc-li:nth-of-type(2) {
	transition-delay: 0.1s;
	}

#gc-navigation .gc-li:nth-of-type(3) {
	transition-delay: 0.15s;
	}

#gc-navigation .gc-li:nth-of-type(4) {
	transition-delay: 0.2s;
	}

#gc-navigation .gc-li:nth-of-type(5) {
	transition-delay: 0.25s;
	}

#gc-navigation .gc-li:nth-of-type(6) {
	transition-delay: 0.3s;
	}

#gc-navigation .gc-li:nth-of-type(7) {
	transition-delay: 0.35s;
	}

#gc-navigation .gc-li:nth-of-type(8) {
	transition-delay: 0.4s;
	}

#gc-navigation .gc-li:nth-of-type(9) {
	transition-delay: 0.45s;
	}

#gc-navigation .gc-li:nth-of-type(10) {
	transition-delay: 0.5s;
	}

#gc-navigation .gc-li-link {
	/* 16px to 24px */
	font-size: clamp(1rem, 2.5vw, 1.5rem);
	line-height: 1.2em;
	text-decoration: none;
	margin: 0;
	color: var(--headerColor);
	display: inline-block;
	position: relative;
	}

/* active state underline */
#gc-navigation .gc-li-link:before {
	content: "";
	width: 100%;
	height: 1px;
	background: currentColor;
	opacity: 1;
	display: none;
	position: absolute;
	bottom: -0.125rem;
	left: 0;
	}

#gc-navigation .gc-li-link.gc-active:before {
	display: block;
	}

#gc-navigation .gc-button-solid {
	display: none;
	}
}

/*-- desktop navigation -*/
/* small desktop: 1024px */
@media only screen and (min-width: 64rem) {
	#gc-navigation {
	font-family: "robotoregular", Cambria, Calibri, sans-serif;
	width: 100%;
	box-sizing: border-box;
	padding: 0 1rem;
	background-color: #fff;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	position: fixed;
	z-index: 10000;
	}

#gc-navigation .gc-container {
	width: 100%;
	max-width: 80rem;
	margin: auto;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 1.5rem;
	}

#gc-navigation .gc-toggle {
	display: none;
	}

#gc-navigation .gc-logo {
	width: 18.4%;
	max-width: 21.875rem;
	height: 4.0625rem;
	margin: 0 auto 0 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 100;
	}

#gc-navigation .gc-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	}

#gc-navigation .gc-ul {
	width: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: clamp(1.25rem, 2.6vw, 2.25rem); 	/* for 20px to 36px */
	}

#gc-navigation .gc-li {
	list-style: none;
	padding: 2rem 0;
	flex: none;
	}

/* for 14px to 16px */
#gc-navigation .gc-li-link {
	font-size: clamp(0.875rem, 1vw, 1rem);
	line-height: 1.5em;
	text-decoration: none;
	margin: 0;
	color: var(--bodyTextColor);
	display: block;
	position: relative;
	}

#gc-navigation .gc-li-link:hover:before {
	width: 100%;
	}

#gc-navigation .gc-li-link.gc-active:before {
	width: 100%;
	}

/* active state underline */
#gc-navigation .gc-li-link:before {
	content: "";
	width: 0%;
	height: 2px;
	background: var(--primary);
	opacity: 1;
	display: block;
	position: absolute;
	bottom: 0rem;
	left: 0;
	transition: width 0.3s;
	}

#gc-navigation .gc-button-solid {
	font-family: "roboto-regular", Cambria, Calibri, sans-serif;
	font-size: 1rem;
	font-weight: 700; /* for 46px to 56px */
	line-height: clamp(2.875em, 5.5vw, 3.5em);
	text-align: center;
	text-decoration: none;
	min-width: 9.375rem;
	margin: 0;
	box-sizing: border-box;
	padding: 0 1.5rem;
	color: #fff;
	background-color: var(--primary);
	border-radius: 0.25rem;
	display: inline-block;
	position: relative;
	z-index: 1;
	}

#gc-navigation .gc-button-solid:before {
	content: "";
	width: 0%;
	height: 100%;
	background: #000;
	opacity: 1;
	border-radius: 0.25rem;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	transition: width 0.3s;
	}

#gc-navigation .gc-button-solid:hover:before {
	width: 100%;
	}
}



/* hero image styling; applies to main page only unless more hero images are added in the future */
/* for mobile screens: 360px */
@media only screen and (min-width: 0rem) {
	#hero-main {
		padding: var(--sectionPadding);
		padding-top: clamp(10rem, 20vw, 12.5rem); /* 160px to 200px */
		overflow: hidden;
		position: relative;
		z-index: 1;
		}

	#hero-main .gc-container {
		width: 100%;
		max-width: 80rem;
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		z-index: 1;
		}

	#hero-main .gc-content {
		text-align: center;
		width: 100%;
		margin-bottom: clamp(2.5rem, 5vw, 3.25rem); /* 40px to 52px */
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		z-index: 1;
		}

	#hero-main .gc-flex {
		flex: none; /* prevents flexbox from squishing everything */
		}

	#hero-main .gc-title {
		font-size: clamp(2.438rem, 5vw, 3.813rem); /* 39px to 61px */
		}

	#hero-main .gc-text {
		margin-bottom: 1.25rem;
		}

	#hero-main .gc-button-solid {
		font-family: "roboto-regular", Cambria, Calibri, sans-serif;
		font-size: 1rem;
		font-weight: 700;
		line-height: clamp(2.875rem, 5.5vw, 3.5rem); /* 46px to 56px */
		text-align: center;
		text-decoration: none;
		min-width: 9.375rem;
		margin: 0;
		box-sizing: border-box; /* prevents padding from adding to the width */
		padding: 0 clamp(2rem, 4vw, 3rem); /* 32px to 48px */
		background-color: var(--primary);
		color: var(--bodyTextColorWhite);
		display: inline-block;
		position: relative;
		z-index: 1;
		transition: color 0.3s;
		transition: background-color 0.3s;
		}

	#hero-main .gc-button-solid:hover {
		background-color: #000;
		color: #fff;
		}

	#hero-main .gc-picture {
		width: 100%;
		height: clamp(17.5rem, 58.6vw, 31.875rem); /* 280px to 510px */
		margin-bottom: clamp(1rem, 2vw, 1.25rem); /* 16px to 20px */
		display: block;
		position: relative;
		}

	#hero-main .gc-picture img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 2.5rem;
		position: absolute;
		}

	#hero-main .gc-card-group {
		width: 100%;
		margin: 0;
		padding: 0;
		display: grid;
		justify-content: center;
		grid-template-columns: repeat(12, 1fr);
		gap: clamp(1rem, 2vw, 1.25rem); /* 16px to 20px */
		}

	#hero-main .gc-item {
		text-align: center;
		list-style: none;
		width: 100%;
		margin: 0;
		box-sizing: border-box;
		padding: clamp(1.5rem, 3vw, 2rem); /* 24px to 32px */
		background-color: #F7F7F7;
		border-radius: 1.25rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		grid-column: span 12;
		position: relative;
		z-index: 1;
		transition: border-color 0.3s;
		}

	#hero-main .gc-item:hover {
		border-color: var(--primary);
		}

	#hero-main .gc-item:hover .gc-h3 {
		color: var(--primary);
		}

	#hero-main .gc-icon-picture {
		margin-bottom: 1.25rem;
		perspective: 700px;
		transform-style: preserve-3d;
		}

	#hero-main .gc-icon {
		width: 2.5rem;
		height: auto;
		display: block;
		transition: transform 0.5s;
		}

	#hero-main .gc-h3 {
		font-size: 1.25rem;
		line-height: 1.5em;
		text-align: inherit;
		margin: 0;
		margin-bottom: 0.75rem;
		color: var(--headerColor);
		transition: color 0.3s;
		}

	#hero-main .gc-item-text {
		font-size: clamp(0.875rem, 1.5vw, 1rem); /* 14px to 16px */
		line-height: 1.5em;
		text-align: inherit;
		margin: 0;
		color: var(--bodyTextColor);
		}
	}

/* for tablet screens: 768px */
@media only screen and (min-width: 48rem) {
	#hero-main .gc-text {
		font-size: 1.25rem;
		}

	#hero-main .gc-item {
		text-align: left;
		margin: 0;
		align-items: flex-start;
		grid-column: span 6;
		}
	}

/* for small desktops: 1024px */
@media only screen and (min-width: 64rem) {
	#hero-main .gc-content {
		display: flex;
		flex-direction: column;
		}

	#hero-main .gc-title {
		max-width: 46.875rem;
		}

	#hero-main .gc-item {
		grid-column: span 3;
		}
	}

/* for large desktop screens: 1300px */
@media only screen and (min-width: 81.25rem) {
	#hero-main .gc-title {
		margin: 0;
		}

	#hero-main .gc-container {
		flex-direction: column;
		}

	#hero-main .gc-content {
		text-align: left;
		max-width: 80rem;
		gap: 1.25rem;
		flex-direction: row;
		align-items: flex-start;
		}

	#hero-main .gc-flex {
		width: 50%;
		max-width: 39.375rem;
		}
	}



/* about page; styling the mission and vision sections */
/* for mobile screens: 360px */
@media only screen and (min-width: 0rem) {
	#mv-sbs {
		padding: var(--sectionPadding);
		}

	#mv-sbs .gc-container {
		width: 100%;
		max-width: 34.375rem; /* changes to 1280px at tablet */
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: clamp(3rem, 10vw, 3.75rem); /* 48px to 60px */
		}

	#mv-sbs .gc-content {
		text-align: left;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start; /* centers content horizontally, set to flex-start to left align */
		}

	#mv-sbs .gc-text {
		margin-bottom: 1rem;
		}

	#mv-sbs .gc-text:last-of-type {
		margin-bottom: 2rem;
		}

	#mv-sbs .gc-ul {
		width: 100%;
		margin: 0 0 clamp(2rem, 4vw, 2.25rem) 0; /* 32px to 36px */
		padding: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		row-gap: clamp(1.5rem, 4vw, 2rem); /* 24px to 32px */
		}

	#mv-sbs .gc-li {
		font-size: var(--bodyFontSize);
		font-family: "robotoregular", Cambria, Calibri, sans-serif;
		font-weight: normal;
		list-style: none;
		line-height: 1.5em;
		margin: 0;
		color: var(--bodyTextColor);
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 2rem;
		}

	#mv-sbs .gc-image-group {
		width: 100%;
		max-width: 39.375rem;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		row-gap: clamp(2.5rem, 6vw, 3rem); /* 40px to 48px */
		order: -1; /* sends it to the top in the first position */
		}

	#mv-sbs .gc-stat-group {
		margin: 0;
		padding: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 1rem;
		}

	#mv-sbs .gc-stat {
		list-style: none;
		max-width: 14.375rem;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
		}

	#mv-sbs .gc-number {
		font-family: "fjallaone", Tahoma, sans-serif;
		font-size: clamp(2.4375rem, 5vw, 3.8125rem); /* 39px - 61px */
		line-height: 1.2em;
		font-weight: 900;
		color: var(--headerColor);
		}

	#mv-sbs .gc-desc {
		font-family: "robotoregular", Cambria, Calibri, sans-serif;
		font-size: clamp(0.875rem, 1rem, 1.25rem);
		line-height: 1.5em;
		font-weight: 400;
		margin: 0;
		color: var(--bodyTextColor);
		}

	#mv-sbs .gc-picture {
		width: 100%;
		height: clamp(14rem, 62vw, 21.1875rem); /* 244px to 339px, changes clamp at tablet */
		display: block;
		position: relative;
		}

	#mv-sbs .gc-picture img {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		object-fit: cover;
		}
	}

/* for tablet screens: 768px */
@media only screen and (min-width: 48rem) {
	#mv-sbs .gc-container {
		max-width: 80rem;
		flex-direction: row;
		align-items: flex-start;
		}

	#mv-sbs .gc-content {
		width: 71%;
		max-width: 33.75rem;
		}

	#mv-sbs .gc-image-group {
		width: 68%;
		}

	#mv-sbs .gc-stat-group {
		justify-content: flex-start;
		}

	#mv-sbs .gc-picture {
		height: clamp(21.25rem, 35vw, 28.8125rem); /* 340px to 461px */
		}
	}



/* about page: team members section; this is a bit different because we're using info cards */
/* for mobile screens: 360px */
@media only screen and (min-width: 0rem) {
	#dhs-team {
		overflow: hidden;
		padding: var(--sectionPadding);
		background-color: #f7f7f7;
		}

	#dhs-team .gc-container {
		width: 100%;
		max-width: 80rem;
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: clamp(3rem, 6vw, 4rem); /* 48px to 64px */
		}

	#dhs-team .gc-content {
		text-align: center;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		}

	#dhs-team .gc-title {
		font-size: var(--headerFontSize);
		font-weight: 900;
		line-height: 1.2em;
		text-align: inherit;
		max-width: 43.75rem;
		margin: 0 0 1rem 0;
		color: var(--headerColor);
		position: relative;
		}

	#dhs-team .gc-title {
		margin: 0 0 2rem 0; /* removed for tablet screens */
		}

	#dhs-team .gc-button-solid {
		font-size: 1rem;
		line-height: clamp(2.875rem, 5.5vw, 3.5rem); /* 46px to 56px */
		text-decoration: none;
		font-weight: 700;
		text-align: center;
		margin: 0;
		color: #fff;
		min-width: 9.375rem;
		padding: 0 1.5rem;
		background-color: var(--primary);
		border-radius: 0.25rem;
		display: inline-block;
		position: relative;
		z-index: 1;
		box-sizing: border-box; /* prevents padding from adding to the width */
		}

	#dhs-team .gc-button-solid:before {
		content: "";
		position: absolute;
		height: 100%;
		width: 0%;
		background: #000;
		opacity: 1;
		top: 0;
		left: 0;
		z-index: -1;
		border-radius: 0.25rem;
		transition: width 0.3s;
		}

	#dhs-team .gc-button-solid:hover:before {
		width: 100%;
		}

	#dhs-team .gc-card-group {
		width: 100%;
		padding: 0;
		margin: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		gap: 1rem;
		}

	#dhs-team .gc-item {
		list-style: none;
		width: 100%;
		max-width: 21.5rem;
		border-radius: 1rem;
		overflow: hidden;
		position: relative;
		}

	#dhs-team .gc-item:hover .gc-background {
		background-color: var(--primary);
		}

	dhs-team .gc-item:hover .gc-background img {
		transform: scale(1.1);
		opacity: 0.9;
		}

	#dhs-team .gc-item:hover .gc-name {
		color: var(--secondaryLight);
		}

	#dhs-team .gc-info {
		padding: 0.75rem 1rem;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		z-index: 10;
		}

	#dhs-team .gc-name {
		font-size: 1.25rem;
		font-weight: 700;
		color: var(--headerColor);
		line-height: 1.2em;
		margin: 0;
		display: block;
		transition: color 0.3s;
		}

	#dhs-team .gc-job {
		font-size: clamp(0.875rem, 1.5vw, 1rem); /* 14px to 16px */
		line-height: 1.5em;
		color: var(--bodyTextColor);
		display: block;
		}

	#dhs-team .gc-background {
		width: 100%;
		height: 21.25rem;
		overflow: hidden;
		display: block;
		position: relative;
		transition: background-color 0.3s;
		}

	#dhs-team .gc-background img {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		object-fit: cover; /* makes it behave like a background image */
		object-position: top; /* makes the image position itself at the top of the parent */
		transition:
		transform 0.6s,
		opacity 0.3s;
		}

	#dhs-team .gc-bubbles {
		display: none;
		}
	}

/* for tablet screens: 700px */
@media only screen and (min-width: 43.75rem) {
	#dhs-team .gc-content {
		text-align: left;
		width: 100%;
		max-width: 44.25rem; /* matches the max-width of the card group */
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		}

	#dhs-team .gc-title {
		margin: 0;
		}

	#dhs-team .gc-card-group {
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		}

	#dhs-team .gc-item {
		width: 48.8%;
		}
	}

/* for desktop screens: 1024px */
@media only screen and (min-width: 64rem) {
	#dhs-team .gc-content {
		max-width: 100%;
		}

	#dhs-team .gc-card-group {
		flex-wrap: nowrap;
		justify-content: space-between;
		}

	#dhs-team .gc-item {
		width: 100%; /* stretch the list items as far as they can go, and the gap property on the parent will space them apart */
		}

	#dhs-team .gc-background {
		height: clamp(15.625rem, 25vw, 20.9375rem); /* 250px to 335px */
		}

	#dhs-team .gc-bubbles {
		display: block;
		position: absolute;
		}

	#dhs-team .gc-bubbles-small {
		width: 13.875rem;
		height: 9.5rem;
		left: -21.875rem;
		top: -3.125rem;
		}

	#dhs-team .gc-bubbles-small:before {
		/* circle 1 */
		content: "";
		width: 8.75rem;
		height: 8.75rem;
		border-radius: 50%;
		background: #fff;
		opacity: 1;
		position: absolute;
		display: block;
		top: 0;
		right: 0;
		animation-name: floatAnimation2;
		animation-duration: 6s;
		animation-timing-function: ease-in-out;
		animation-fill-mode: forwards;
		animation-iteration-count: infinite;
		}

	#dhs-team .gc-bubbles-small:after {
		/* circle 2 */
		content: "";
		width: 7.3125rem;
		height: 7.3125rem;
		border-radius: 50%;
		background: #fff;
		opacity: 1;
		position: absolute;
		display: block;
		bottom: 0;
		left: 0;
		animation-name: floatAnimation;
		animation-duration: 20s;
		animation-timing-function: ease-in-out;
		animation-fill-mode: forwards;
		animation-iteration-count: infinite;
		}

	#dhs-team .gc-bubbles-big {
		width: 19.75rem;
		height: 24.125rem;
		right: -22.875rem;
		bottom: -6.25rem;
		}

	#dhs-team .gc-bubbles-big:before {
		/* circle 1 */
		content: "";
		width: 5.875rem;
		height: 5.875rem;
		border-radius: 50%;
		background: #fff;
		opacity: 1;
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		animation-name: floatAnimation2;
		animation-duration: 6s;
		animation-timing-function: ease-in-out;
		animation-fill-mode: forwards;
		animation-iteration-count: infinite;
		}

	#dhs-team .gc-bubbles-big:after {
		/* circle 2 */
		content: "";
		width: 5.875rem;
		height: 5.875rem;
		border-radius: 50%;
		background: #fff;
		opacity: 1;
		position: absolute;
		display: block;
		top: 4.375rem;
		right: 3.75rem;
		animation-name: floatAnimation;
		animation-duration: 20s;
		animation-timing-function: ease-in-out;
		animation-fill-mode: forwards;
		animation-iteration-count: infinite;
		}

	#dhs-team .gc-bubbles-big2 {
		width: 13.1875rem;
		height: 13.1875rem;
		border-radius: 50%;
		background: #fff;
		opacity: 1;
		position: absolute;
		display: block;
		bottom: 1.4375rem;
		left: 0.1875rem;
		animation-name: floatAnimation;
		animation-duration: 14s;
		animation-timing-function: ease-in-out;
		animation-fill-mode: forwards;
		animation-iteration-count: infinite;
		}

	#dhs-team .gc-bubbles-big2:before {
		/* second bubble */
		content: "";
		width: 9.875rem;
		height: 9.875rem;
		border-radius: 50%;
		background: #fff;
		opacity: 1;
		position: absolute;
		display: block;
		bottom: -4.6875rem;
		right: -4.6875rem;
		animation-name: floatAnimation2;
		animation-duration: 6s;
		animation-timing-function: ease-in-out;
		animation-fill-mode: forwards;
		animation-iteration-count: infinite;
		}

@keyframes floatAnimation {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-2em);
	}
	100% {
		transform: translateY(0);
	}
	}

@keyframes floatAnimation2 {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-1em);
	}
	100% {
		transform: translateY(0);
	}
	}
}



/* presenters page: side-by-side (sbs) content display styling */
/* section 1: the expertise we offer; mobile screens: 360px */
@media only screen and (min-width: 0rem) {
	#expertise {
		padding: var(--sectionPadding);
		}

	#expertise .gc-container {
		width: 100%;
		max-width: 80rem;
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: clamp(3rem, 6vw, 4rem); /* 48px - 64px */
		}

	#expertise .gc-content {
		text-align: center;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		}

	#expertise .gc-text {
		max-width: 66.5rem;
		}

	#expertise .gc-card-group {
		width: 100%;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: clamp(1.25rem, 3vw, 2.5rem); /* 20px - 40px */
		}

	#expertise .gc-item {
		text-align: center;
		list-style: none;
		width: 100%;
		max-width: 20.375rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		}

	#expertise .gc-picture {
		margin-bottom: 1.5rem;
		width: 4.5rem;
		height: 4.5rem;
		background-color: rgba(206, 65, 13, 0.05);
		border-radius: 1rem 0 1rem 0;
		display: flex;
		justify-content: center;
		align-items: center;
		}

	#expertise .gc-h3 {
		font-size: 1.25rem;
		line-height: 1.2em;
		text-align: inherit;
		margin: 0 0 0.75rem 0;
		color: var(--headerColor);
		}

	#expertise .gc-item-p {
		font-size: 1rem;
		line-height: 1.5em;
		text-align: inherit;
		margin: 0;
		color: var(--bodyTextColor);
		}

	#expertise .gc-arrow {
		/* 48px - 80px */
		width: clamp(3rem, 6vw, 5rem);
		height: auto;
		display: block;
		flex: none;
		transform: rotate(120deg);
		}

	#expertise .gc-arrow-img {
		width: 100%;
		display: block;
		}

	#expertise .gc-icon {
		width: 2rem;
		height: auto;
		display: block;
		}
	}

/* for tablet screens: 768px */
@media only screen and (min-width: 48rem) {
	#expertise .gc-card-group {
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
		}

	#expertise .gc-arrow {
		align-self: center;
		transform: rotate(40deg);
		}
	}

/* section 2: the alternating content; start with mobile screens: 360px */
@media only screen and (min-width: 0rem) {
	#sbs-normal,
	#sbs-reverse {
		padding: var(--sectionPadding);
		overflow: hidden;
		}

	#sbs-normal .gc-container,
	#sbs-reverse .gc-container {
		width: 100%;
		max-width: 34.375rem; /* changes to 1280px at desktop */
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: clamp(3rem, 6vw, 4rem); /* 48px to 64px */
		position: relative;
		}

	#sbs-normal .gc-content,
	#sbs-reverse .gc-content {
		text-align: left;
		width: 100%;
		max-width: 33.875rem;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		}

	#sbs-normal .gc-text,
	#sbs-reverse .gc-text {
		margin-bottom: 1rem;
		}

	#sbs-normal .gc-text:last-of-type,
	#sbs-reverse .gc-text:last-of-type {
		margin-bottom: 2rem;
		}

	#sbs-normal .gc-card-group,
	#sbs-reverse .gc-card-group {
		width: 100%;
		max-width: 39.375rem;
		margin: 0 0 2rem 0;
		padding: 0;
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		gap: 1.5rem;
		}

	#sbs-normal .gc-li,
	#sbs-reverse .gc-li {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		gap: clamp(1rem, 2.5vw, 1.25rem); /* 16px to 20px */
		}

	#sbs-normal .gc-li-picture,
	#sbs-reverse .gc-li-picture {
		width: 5rem;
		height: 5rem;
		margin: 0;
		border-radius: 50%;
		background-color: #fff;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		flex: none; /* prevents flexbox from squishing it */
		position: relative;
		z-index: 1;
		}

	#sbs-normal .gc-li-picture:before,
	#sbs-reverse .gc-li-picture:before {
		content: '';
		width: 100%;
		height: 100%;
		background: var(--primary);
		opacity: .1;
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		z-index: -1;
		}

	#sbs-normal .gc-li-icon,
	#sbs-reverse .gc-li-icon {
		width: 2rem;
		height: auto;
		display: block;
		}

	#sbs-normal .gc-h3,
	#sbs-reverse .gc-h3 {
		font-size: 1.25rem;
		line-height: 1.2em;
		font-weight: 700;
		text-align: left;
		margin: 0 0 0.75rem 0;
		color: var(--headerColor);
		}

	#sbs-normal .gc-li-text,
	#sbs-reverse .gc-li-text {
		font-size: 1rem;
		line-height: 1.5em;
		text-align: left;
		margin: 0;
		color: var(--bodyTextColor);
		}

	#sbs-normal .gc-button-solid,
	#sbs-reverse .gc-button-solid {
		font-size: 1rem;
		line-height: clamp(2.875rem, 5.5vw, 3.5rem); /* 46px to 56px */
		text-decoration: none;
		font-weight: 700;
		text-align: center;
		margin: 0;
		color: #fff;
		min-width: 9.375rem;
		padding: 0 2rem;
		background-color: var(--primary);
		border-radius: 0.25rem;
		display: inline-block;
		position: relative;
		z-index: 1;
		box-sizing: border-box; /* prevents padding from adding to the width */
		}

	#sbs-normal .gc-button-solid:before,
	#sbs-reverse .gc-button-solid:before {
		content: '';
		position: absolute;
		height: 100%;
		width: 0%;
		background: #000;
		opacity: 1;
		top: 0;
		left: 0;
		z-index: -1;
		border-radius: 0.25rem;
		transition: width .3s;
		}

	#sbs-normal .gc-button-solid:hover:before,
	#sbs-reverse .gc-button-solid:hover:before {
		width: 100%;
		}

	#sbs-normal .gc-picture,
	#sbs-reverse .gc-picture {
		width: 100%;
		max-width: 40.625rem;
		min-height: 22.625rem;
		border-radius: 1.5rem;
		/* clips img tag corners */
		overflow: hidden;
		display: block;
		position: relative;
		z-index: 1;
		}

	#sbs-normal .gc-picture img,
	#sbs-reverse .gc-picture img {
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		object-fit: cover;
		 }
	}

/* for small desktops: 1024px */
@media only screen and (min-width: 64rem) {
	#sbs-normal .gc-container,
	#sbs-reverse .gc-container {
		max-width: 80rem;
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
		position: relative;
		}

	#sbs-normal .gc-content,
	#sbs-reverse .gc-content {
		width: 50%;
		padding: 2.5rem 0;
		}

	#sbs-normal .gc-picture,
	#sbs-reverse .gc-picture {
		height: auto;
		width: 55%;
		}
	}

/* reverse side-by-side styling */
/* for mobile screens: 360px */
@media only screen and (min-width: 0rem) {
	#sbs-reverse {
		background-color: #f7f7f7;
		}
	}

/* for small desktops: 1024px */
@media only screen and (min-width: 64rem) {
	#sbs-reverse .gc-picture {
		order: 2; /* sends it to the right in the 2nd position */
		}
	}


/* faq page styling */
/* mobile screens: 360px */
@media only screen and (min-width: 0rem) {
	#gc-faq {
		padding: var(--sectionPadding);
		position: relative;
		}

	#gc-faq .faq-container {
		width: 100%;
		max-width: 80rem;
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: clamp(3rem, 6vw, 4rem);  /* 48px - 64px */
		position: relative;
		z-index: 1;
		}

	#gc-faq .faq-content {
		text-align: left;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		}

	#gc-faq .faq-page-title {
		margin: 0;
		}

	#gc-faq .faq-flex-group {
		width: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		gap: clamp(1rem, 2.3vw, 1.25rem);  /* 16px - 20px */
		position: relative;
		}

	#gc-faq .faq-wrapper {
		width: 100%;
		position: relative;
		}

	#gc-faq .faq-left-nav {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: clamp(1rem, 2.5vw, 1.25rem);  /* 16px - 20px */
		flex: none;
		}

	#gc-faq .faq-flex {
		width: 100%;
		padding: clamp(1.5rem, 3vw, 2rem);  /* 24px - 32px */
		background-color: #F7F7F7;
		display: flex;
		flex-direction: column;
		order: 3;
		gap: 1.25rem;
		}

	#gc-faq .cs-option {
		font-family: "fjallaone", Tahoma, sans-serif;
		font-size: clamp(1rem, 2vw, 1.25rem);  /* 16px - 20px */
		line-height: 1.2em;
		font-weight: 700;
		padding: 0;
		color: var(--bodyTextColor);
		background-color: transparent;
		border: none;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 0.5rem;
		position: relative;
		z-index: 1;
		transition: color .3s;
		}

	#gc-faq .cs-option:hover {
		color: var(--primary);
		cursor: pointer;
		}

	#gc-faq .cs-option.cs-active {
		color: var(--primary);
		}

	#gc-faq .faq-picture {
		width: 100%;
		height: clamp(20.5rem, 30vw, 28.125rem);  /* 328px - 450px */
		margin: 0 0 clamp(1rem, 2.4vw, 1.25rem);  /* 16px - 20px */
		order: 2;
		position: relative;
		z-index: 1;
		}

	#gc-faq .faq-picture img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		position: absolute;
		top: 0;
		left: 0;
		}

	#gc-faq .cs-faq-group {
		width: 100%;
		padding: 0;
		margin: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		order: 3;
		gap: 0.5rem;
		transition: transform 0.7s,
			opacity 0.3s,
			visibility 0.5s,
			top 0.3s,
			left 0.3s;
		transform-origin: top;
		transform-style: preserve-3d;
		perspective: 900px;
		}

	#gc-faq .cs-faq-group.cs-hidden {
		visibility: hidden;
		pointer-events: none;
		opacity: 0;
		top: 0;
		left: 0;
		position: absolute;
		transform: scaleY(0);
		}

	#gc-faq .cs-faq-group.cs-hidden .cs-faq-item {
		transform: rotateX(270deg);
		opacity: 0;
		}

	#gc-faq .cs-faq-item {
		list-style: none;
		width: 100%;
		overflow: hidden;
		opacity: 1;
		top: 0;
		transform: rotateX(0deg);
		transition: transform 0.6s,
			opacity 0.3s;
		}

	#gc-faq .cs-faq-item:nth-of-type(2) {
		transition-delay: 0.1s;
		}

	#gc-faq .cs-faq-item:nth-of-type(3) {
		transition-delay: 0.2s;
		}

	#gc-faq .cs-faq-item:nth-of-type(4) {
		transition-delay: 0.3s;
		}

	#gc-faq .cs-faq-item:nth-of-type(5) {
		transition-delay: 0.4s;
		}

	#gc-faq .cs-faq-item:nth-of-type(6) {
		transition-delay: 0.5s;
		}

	#gc-faq .cs-faq-item:nth-of-type(7) {
		transition-delay: 0.6s;
		}

	#gc-faq .cs-faq-item:nth-of-type(8) {
		transition-delay: 0.7s;
		}

	#gc-faq .cs-faq-item:nth-of-type(9) {
		transition-delay: 0.8s;
		}

	#gc-faq .cs-faq-item:nth-of-type(10) {
		transition-delay: 0.9s;
		}

	#gc-faq .cs-faq-item.active .cs-button {
		color: var(--primary);
		}

	#gc-faq .cs-faq-item.active .cs-button:before {
		background-color: var(--primary);
		transform: rotate(315deg);
		}

	#gc-faq .cs-faq-item.active .cs-button:after {
		background-color: var(--primary);
		transform: rotate(-315deg);
		}

	#gc-faq .cs-faq-item.active .faq-answer-text {
		height: auto;
		padding: 0 clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 1.3vw, 1.5rem);  /* 20px - 24px bottom; 16px - 24px left & right */
		opacity: 1;
		}

	#gc-faq .cs-button {
		font-size: clamp(1rem, 2vw, 1.25rem);  /* 16px - 20px */
		line-height: 1.2em;
		text-align: left;
		font-weight: bold;
		padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.25rem);  /* 16px - 24px top & bottom; 16px - 20px left & right */
		background-color: #f7f7f7;
		border: none;
		color: var(--headerColor);
		display: block;
		width: 100%;
		position: relative;
		transition: background-color 0.3s, color 0.3s;
		}

	#gc-faq .cs-button:hover {
		cursor: pointer;
		}

	#gc-faq .cs-button:before {
		/* left line */
		content: "";
		width: 0.5rem;
		height: 0.125rem;
		background-color: var(--headerColor);
		opacity: 1;
		border-radius: 50%;
		position: absolute;
		display: block;
		top: 50%;
		right: 1.5rem;
		transform: rotate(45deg);
		transform-origin: left center;
		transition: transform 0.5s;
		}

	#gc-faq .cs-button:after {
		/* right line */
		content: "";
		width: 0.5rem;
		height: 0.125rem;
		background-color: var(--headerColor);
		opacity: 1;
		border-radius: 50%;
		position: absolute;
		display: block;
		top: 50%;
		right: 1.3125rem;
		transform: rotate(-45deg);
		transform-origin: right center;
		transition: transform 0.5s;
		}

	#gc-faq .faq-button-text {
		font-family: "fjallaone", Tahoma, sans-serif;
		width: 80%;
		display: block;
		}

	#gc-faq .faq-answer-text {
		font-family: "roboto-regular", Cambria, Calibri, sans-serif;
		font-size: clamp(0.875rem, 1.5vw, 1rem);  /* 14px - 16px */
		line-height: 1.5em;
		width: 100%;
		height: 0;
		margin: 0;
		padding: 0 clamp(1rem, 2vw, 1.5rem);  /* 16px - 24px */
		opacity: 0;
		background-color: #f7f7f7;
		color: var(--bodyTextColor);
		overflow: hidden;
		transition: opacity 0.3s, padding-bottom 0.3s;
		}
	}

/* oddly shaped screens: 600px */
@media only screen and (min-width: 37.5rem) {
	#gc-faq .faq-left-nav {
		width: 80%;
		max-width: 22.0625rem;
		flex-direction: row;
		align-items: stretch;
		flex: none;
		}

	#gc-faq .faq-content {
		width: 100%;
		}

	#gc-faq .faq-picture {
		min-height: clamp(18.75rem, 30vw, 30.8125rem);  /* 300px - 493px */
		margin: 0;
		height: 100%;
		flex: none;
		order: 3;
		}
	}

/* desktop: 1024px */
@media only screen and (min-width: 48rem) {
	#gc-faq .faq-flex-group {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		column-gap: clamp(1.25rem, 3vw, 5rem);  /* 20px - 80px */
		}

	#gc-faq .faq-left-nav {
		flex-direction: column;
		flex: auto;
		}

	#gc-faq .faq-picture {
		max-height: 31.25rem;
		}
	}



/* timeline page styling */
/* for mobile screens: 360px */
@media only screen and (min-width: 0rem) {
	#tools-list {
		padding: var(--sectionPadding);
		background-color: #fff;
		overflow: hidden;
		position: relative;
		z-index: 1;
		}

	#tools-list .gc-container {
		width: 100%;
		max-width: 80rem;
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: clamp(3rem, 6vw, 4rem); /* 48px to 64px */
		position: relative;
		}

	#tools-list .gc-content {
		text-align: left;
		width: 100%;
		max-width: 46.125rem;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		}

	#tools-list .gc-title {
		font-family: "fjallaone", Tahoma, sans-serif;
		font-size: var(--headerFontSize);
		font-weight: 900;
		line-height: 1.2em;
		text-align: inherit;
		width: 100%;
		max-width: 100%;
		margin: 0 0 1rem 0;
		color: var(--headerColor);
		position: relative;
		}

	#tools-list h2,
	#tools-list h3,
	#tools-list h4,
	#tools-list h5,
	#tools-list h6 {
		font-family: "fjallaone", Tahoma, sans-serif;
		font-weight: 700;
		text-align: inherit;
		margin: 0 0 1rem 0;
		color: var(--headerColor);
		}

	#tools-list h2 {
		font-size: 2rem;
		margin-top: 2rem;
		}

	#tools-list h3 {
		font-size: 1.5rem;
		color: var(--primary);
		}

	#tools-list h4,
	#tools-list h5,
	#tools-list h6 {
		font-size: 1.25rem;
		}

	#tools-list .gc-button-solid {
		margin-bottom: 2rem;
		}

	#tools-list .gc-no-margin {
		margin: 0;
		}

	#tools-list .gc-color {
		color: var(--primary);
		}

	#tools-list p {
		font-family: "roboto-regular", Cambria, Calibri, sans-serif;
		font-size: var(--bodyFontSize);
		line-height: 1.5em;
		text-align: inherit;
		width: 100%;
		margin: 0 0 1rem 0;
		color: var(--bodyTextColor);
		}

	#tools-list p:last-of-type {
		margin-bottom: 2rem;
		}

	#tools-list p a {
		font-size: inherit;
		line-height: inherit;
		text-decoration: underline;
		color: var(--primary);
		}

	#tools-list ol,
	#tools-list ul {
		padding-left: 1.5rem;
		margin: 0 0 2rem 0;
		color: var(--bodyTextColor);
		display: flex;
		flex-direction: column;
		gap: 1rem;
		}

	#tools-list ul li {
		color: inherit;
		position: relative;
		}

	#tools-list img {
		width: 100%;
		height: auto;
		display: block;
		}

	#tools-list .gc-image-group {
		width: 50%;
		max-width: 27.0625rem;
		display: none;
		flex-direction: column;
		gap: 1.25rem;
		position: relative;
		}

	#tools-list .gc-image-group:after {
	/* colored box */
		content: "";
		width: 100%;
		height: clamp(11.0625rem, 19vw, 16.125rem); /* 177px to 258px */
		background: var(--primary);
		border-radius: 6.25rem 0 6.25rem;
		opacity: 0.35;
		display: block;
		}

	#tools-list .gc-picture {
		width: 100%;
		height: clamp(18.75rem, 40vw, 32.5rem); /* 300px to 520px */
		box-shadow: 0px 3.3478px 50.2169px rgba(0, 0, 0, 0.16);
		border-radius: 0 clamp(7.8125rem, 15vw, 12.5rem) 0 /* 125px to 200px */
		clamp(7.8125rem, 15vw, 12.5rem);
		box-sizing: border-box; /* prevents border from affecting height and width */
		overflow: hidden;
		display: block;
		position: relative;
		}

	#tools-list .gc-picture img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		}
	}

/* for tablet screens: 768px */
@media only screen and (min-width: 48rem) {
	#tools-list .gc-container {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		}

	#tools-list .gc-content {
		flex: none;
		width: 60%;
		order: 2; /* sends it to the right in the 2nd position */
		}

	#tools-list .gc-image-group {
		display: flex;
		}
	}


























/* project gallery */
/* for mobile screens: 360px */
@media only screen and (min-width: 0rem) {
	#project-gallery {
		padding: var(--sectionPadding);
		position: relative;
		overflow: hidden;
		}

	#project-gallery .gc-container {
		width: 100%;
		max-width: 69rem;
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: clamp(3rem, 6vw, 4rem); /* 48px to 64px */
		}

	#project-gallery .gc-content {
		text-align: center;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		}

	#project-gallery .gc-image-group {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: clamp(1rem, 1.5vw, 1.25rem); /* 16px to 20px */
		}

	#project-gallery .gc-item {
		width: 100%;
		height: 100%;
		aspect-ratio: 1;
		margin: 0;
		position: relative;
		display: block;
		}

	#project-gallery .gc-item:hover .gc-hover-box {
		opacity: 1;
		}

	#project-gallery .gc-item:hover .gc-icon {
		transform: rotateY(0); /* return to original position */
		}

	#project-gallery .gc-item:hover .gc-h3 {
		opacity: 1;
		transform: translateY(0); /* Return to original position */
		}

	#project-gallery .gc-item:hover .gc-hover-box-text {
		opacity: 1;
		transform: translateY(0); /* Return to original position */
		}

	#project-gallery .gc-picture {
		margin: auto;
		width: 100%;
		height: 100%;
		display: block;
		position: relative;
		}

	#project-gallery .gc-picture img {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		object-fit: cover;
		}

	#project-gallery .gc-hover-box {
		text-align: center;
		width: 100%;
		height: 100%;
		padding: 1em;
		background-color: rgba(229, 87, 44, 0.9);
		opacity: 0;
		position: absolute;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box; /* prevents padding from contributing to height and width */
		perspective: 700px; /* sets stage for 3d transform animation */
		top: 0;
		left: 0;
		z-index: 10;
		pointer-events: none; /* prevents mouse from being able to interact with these elements */
		transition: opacity 0.3s;
		}

	#project-gallery .gc-icon {
		width: clamp(3.125rem, 5vw, 3.75rem); /* 50px to 60px */
		height: clamp(3.125rem, 5vw, 3.75rem);
		margin-bottom: clamp(1rem, 5vw, 2rem); /* 16px to 32px */
		border-radius: 50%;
		background-color: #fff;
		outline: 0.5rem solid rgba(255, 255, 255, 0.7);
		transform: rotateY(90deg); /* start with the icon box rotated 90 degrees */
		position: relative;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		flex: none;
		transition: transform 0.5s;
		}

	#project-gallery .gc-icon img {
		width: 1.25rem;
		height: 1.25rem;
		}

	#project-gallery .gc-h3 {
		font-size: clamp(1.25rem, 2vw, 1.5625rem); /* 20px to 25px */
		line-height: 1.2em;
		font-weight: 700;
		margin: 0 auto;
		max-width: 16.875rem;
		color: #fff;
		opacity: 0; /* push starting position down 10px and make it invisible */
		transform: translateY(0.625rem);
		margin-bottom: 0.5rem;
		transition:
		opacity 0.3s,
		transform 0.3s ease-out;
		transition-delay: 0.1s;
		}

	#project-gallery .gc-hover-box-text {
		font-size: clamp(0.8125rem, 1vw, 1rem); /* 13px to 16px */
		line-height: 1.5em;
		margin: 0 auto;
		max-width: 16.875rem;
		color: #fff;
		opacity: 0; /* push starting position down 10px and make it invisible */
		transform: translateY(0.625rem);
		transition:
		opacity 0.3s,
		transform 0.3s ease-out;
		transition-delay: 0.2s;
		}
	}

/* screesn that are in between: 600px */
@media only screen and (min-width: 37.5rem) {
	#project-gallery .gc-image-group {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: 1fr;
		}

	#project-gallery .gc-item {
		grid-column: span 6;
		}
	}

/* tablet screens: 768px */
@media only screen and (min-width: 48rem) {
	#project-gallery .gc-item {
		grid-column: span 4;
		}
	}



/* footer styling */
/* mobile: 360px */
@media only screen and (min-width: 0rem) {
	#gc-footer {
		padding: var(--sectionPadding);
		background-color: #1a1a1a;  /* navigation links */
		}

	#gc-footer .footer-container {
		width: 100%; /* reset on desktop */
		max-width: 43.75rem;
		margin: auto;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 2.5rem;
		}

	#gc-footer .footer-logo-group {
		width: 100%; /* takes up all the space, lets the other lists wrap below it */
		position: relative;
		}

	#gc-footer .footer-logo {
		width: 11.125rem;
		height: auto;
		display: block;
		margin-bottom: 1.5rem;
		}

	#gc-footer .footer-logo-img {
		width: 100%;
		height: auto;
		}

	#gc-footer .footer-logo-img.dark {
		display: none;
		}

	#gc-footer .footer-nav {
		width: 100%;
		padding: 0;
		margin: 0;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-direction: column;
		gap: 0.75rem;
		}

	#gc-footer .footer-nav-li {
		list-style: none;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		}

	#gc-footer .footer-header {
		font-family: "fjallaone", Tahoma, sans-serif;
		font-size: 1rem;
		line-height: 1.2em;
		text-transform: uppercase;
		font-weight: 700;
		margin-bottom: 0.75rem;
		color: var(--bodyTextColorWhite);
		position: relative;
		display: block;
		}

	#gc-footer .footer-nav-link {
		font-family: "roboto-regular", Cambria, Calibri, sans-serif;
		font-size: 1rem;
		text-decoration: none;
		line-height: 1.5em;
		color: var(--bodyTextColorWhite);
		position: relative;
		display: inline-block;
		transition: color 0.3s;
		}

	#gc-footer .footer-nav-link:before {
		content: ""; /* underline */
		width: 0%;
		height: 0.125rem;
		background: currentColor;
		opacity: 1;
		position: absolute;
		display: block;
		bottom: -0.125rem;
		left: 0;
		transition: width 0.3s;
		}

	#gc-footer .footer-nav-link:hover {
		color: var(--primary);
		}

	#gc-footer .footer-nav-link:hover:before {
		width: 100%;
		}

	#gc-footer .footer-icon {
		width: 1.5rem;
		height: auto;
		margin-right: 0.75rem;
		}

	#gc-footer .footer-bottom {
		max-width: 80rem;
		margin: auto;
		margin-top: 2rem;
		padding-top: 1.5rem;
		border-top: 1px solid #484848;
		display: flex;
		justify-content: center;
		align-items: center;
		}

	#gc-footer .footer-text {
		font-family: "roboto-regular", Cambria, Calibri, sans-serif;
		font-size: 1rem;
		line-height: 1.5em;
		color: var(--bodyTextColorWhite);
		text-align: center;
		}
	}

/* tablet: 768px */
@media only screen and (min-width: 48rem) {
	#gc-footer .footer-container {
		row-gap: 0;
		flex-direction: row;
		justify-content: space-between;
		row-gap: 2.5rem;
		}

	#gc-footer .footer-nav {
		width: auto;
		}
	}

/* small desktop: 1024px */
@media only screen and (min-width: 64rem) {
	#gc-footer .footer-container {
		max-width: 80rem;
		flex-wrap: nowrap; /* align everything to the right */
		justify-content: flex-end;
		column-gap: 5.25rem;
		}

	#gc-footer .footer-logo-group {
		width: 30%;
		max-width: 24.1875rem;  /* pushes away from everything to the right */
		margin-right: auto;
		}

	#gc-footer .footer-text {
		width: 100%;
		}
	}