html {
	box-sizing: border-box;
}

/* 
===================================
Page Component Styles (icon grid, team member card)
===================================
*/
.hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.hero img {
	width: 100%;
}
.values-card {
	min-height: 204px;
	border: none;
	border-radius: var(--spacing10);
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	margin: 0 var(--spacing20);
}
.text-container {
	min-height: 204px;
	padding: 0 var(--spacing20) 0 var(--spacing20);
	margin-bottom: var(--spacing20);
	display: flex;
	flex-direction: column;
	border-radius: var(--spacing10);
	justify-content: center;
}
.values-card img {
	margin-bottom: var(--spacing20);
}
.values-card h2 {
	margin: var(--spacing20) 0px var(--spacing10) 0px;
	font-size: var(--font28);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height32);
	color: var(--color-white);
}
.values-card p {
	margin-top: 0px;
	display: flex;
	text-align: left;
	font-size: var(--font16);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height26);
}
/* Turns Our Values Title Black */
.values-head {
	display: flex;
	flex-direction: column;
	text-align: center;
	margin-bottom: var(--spacing100);
}

.h1-black {
	color: var(--color-onyx);
	margin: 60px 0 var(--spacing20) 0;
	font-size: var(--font36);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height40);
}

.values-head p {
	color: var(--color-onyx);
	margin: 0 var(--spacing20) 0;
	line-height: var(--line-height26);
}
.copperback {
	background-color: var(--color-copper);
	display: flex;
	flex-direction: column;
	text-align: center;
	margin-bottom: var(--spacing20);
}
.onyxback {
	background-color: var(--color-onyx);
}
.amaraback {
	background-color: var(--color-amaranth);
}
.sustainability-text {
	background-color: var(--color-onyx);
}
.authenticity-text {
	background-color: var(--color-amaranth);
}
.education-text {
	background-color: var(--color-yaleblue);
}
.tech-text {
	background-color: var(--color-teal);
	padding-bottom: var(--spacing20);
}
.grapeback {
	background-color: var(--color-cybergrape);
}
.blueback {
	background-color: var(--color-yaleblue);
}
.tealback {
	background-color: var(--color-teal);
}

/* desktop text for Technology and Innovation title */
.desktop-text {
	display: none;
}
.support {
	background-color: var(--color-yaleblue);
	margin-top: 90px;
}

.support-header {
	padding-top: 90px;
	display: flex;
	flex-direction: row;
	justify-content: left;
	font-size: var(--font28);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height32);
	align-items: center;
}
.support-header h2 {
	color: var(--color-white);
	font-size: var(--font28);
	line-height: var(--line-height32);
	margin-bottom: 0px;
}
.support-header svg {
	position: relative;
	bottom: -7px;
	left: 9px;
}
.support-text p {
	font-size: var(--font28);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height32);
	margin: var(--spacing20) 0px;
	font-family: var(--main-font);
}
.support-text a {
	font-family: var(--body-font);
	font-size: var(--font21);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height32);
	color: var(--color-white);
}
.support-logos {
	display: flex;
	flex-direction: column;
	padding-bottom: var(--spacing80);
}
.support-logo-01 {
	width: 82px;
	height: 69px;
	margin: var(--spacing40) 0px var(--spacing20);
}
.support-logo-02 {
	width: 149px;
	height: 62px;
}
.empowering-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	margin-top: 60px;
}
.empowering h2 {
	font-size: var(--font28);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height32);
	color: var(--color-onyx);
	margin-bottom: var(--spacing20);
}
.empowering p {
	text-align: left;
	color: var(--color-onyx);
	padding: 0px var(--spacing20);
	margin-bottom: 60px;
}
/* Adds Red Block behind this img - this changes in the desktop version */
.empowering-img-block {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: var(--color-amaranth);
}
.empowering-img-block picture {
	margin: 30px;
}

/* ===================================
Section Styles (background, padding, etc.)
===================================
*/

/* 
===================================
Media Queries (overriding styles for different screen sizes)
===================================
*/

/* Tablet and Larger */
@media screen and (min-width: 768px) {
	/* Add styles that apply to table and desktop */
}

/* Tablet Only */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	/* Add styles that only apply to tablet. These are usually fixes to get responsiveness right */
}

/* Desktop Only */
@media screen and (min-width: 1024px) {
	/* Add styles that apply specifically to desktop */
	.mobile-hero {
		display: none;
	}

	/* Values header and p needs to be on top of the hero */
	.desktop-parent {
		display: flex;
		flex-direction: column;
		gap: var(--spacing20);
		margin: 190px auto 193px auto;
		max-width: 1328px;
	}
	.values-main {
		display: flex;
		position: absolute;
		left: 50%;
	}
	.values-card {
		margin: 0px var(--spacing10);
	}
	.values-card p {
		margin: 0px var(--spacing20);
		font-size: var(--font21);
		font-weight: var(--font-weight-regular);
	}
	.copperback,
	.authenticity,
	.education {
		margin-right: var(--spacing10);
	}
	.sustainability-text,
	.grapeback,
	.technology {
		margin-left: var(--spacing10);
	}
	.values-card h2 {
		margin: var(--spacing20) 0px 0px var(--spacing20);
		font-size: var(--font36);
		font-weight: var(--font-weight-bold);
		line-height: var(--line-height40);
		text-align: left;
	}
	.values-head p {
		text-align: left;
		margin: 0;
		font-size: var(--font21);
		font-weight: var(--font-weight-regular);
		line-height: var(--line-height32);
	}
	.onyxback,
	.grapeback,
	.tealback {
		padding-right: 44px;
	}

	/* desktop text for Technology and Innovation title */
	.desktop-text {
		display: block;
	}

	/* Cards need to change from column to row with some stylized sizing and padding*/
	.desktop-group {
		display: flex;
		flex-direction: row;
		height: 290px;
	}
	/* Gradients */
	.hero {
		width: 100%;
		height: 100vh;
		max-height: 1000px;
		background-image: linear-gradient(
				260deg,
				rgba(9, 9, 9, 0.8) 46.9%,
				rgba(9, 9, 9, 0) 86.82%
			),
			url(/assets/images/pages/values/hero-values.jpg);
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		position: relative;
	}
	.hero img {
		display: none;
	}
	.sustainability {
		background-image: linear-gradient(
				269deg,
				#0e0e0e 46.26%,
				rgba(27, 27, 27, 0) 99.04%
			),
			url(/assets/images/pages/values/sustainability.jpg);
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	.authenticity {
		background-image: linear-gradient(
				88deg,
				#b91515 47.26%,
				rgba(185, 21, 21, 0.73) 55.57%,
				rgba(119, 45, 45, 0.4) 68.47%
			),
			url(/assets/images/pages/values/authenticity.jpg);
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	.education {
		background-image: linear-gradient(
				90deg,
				#184f85 63.23%,
				rgba(24, 79, 133, 0) 83.39%
			),
			url(/assets/images/pages/values/education.jpg);
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	.technology {
		background-image: linear-gradient(
				280deg,
				#007a80 67.16%,
				rgba(0, 122, 128, 0) 80.36%
			),
			url(/assets/images/pages/values/techinnovation.jpg);
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	/* Changing values card imgs to background imgs */
	.values-card img {
		display: none;
	}
	/* Individual card widths */
	.sustainability-text {
		display: flex;
		flex-direction: column;
		width: 60%;
		margin-left: auto;
		background-color: transparent;
		border-radius: var(--spacing10);
	}
	.authenticity-text {
		display: flex;
		flex-direction: column;
		width: 50%;
		background-color: transparent;
		border-radius: var(--spacing10);
	}
	.education-text {
		display: flex;
		flex-direction: column;
		width: 65%;
		background-color: transparent;
		border-radius: var(--spacing10);
	}
	.tech-text {
		display: flex;
		flex-direction: column;
		width: 70%;
		margin-left: auto;
		background-color: transparent;
		border-radius: var(--spacing10);
	}
	/* setting copper and grape cards maximum widths */
	.copperback,
	.grapeback {
		max-width: 40%;
	}
	/* setting onyx and amaranth cards maximum widths */
	.onyxback,
	.authenticity {
		max-width: 60%;
	}
	/* setting blue and teal cards widths */
	.education,
	.technology {
		width: 50%;
	}

	.support-logos {
		display: flex;
		gap: var(--spacing40);
		padding-bottom: 116px;
	}
	/* All Text white except Empowerment section and We Support Header */
	.h1-black {
		color: var(--color-white);
	}
	.values-head {
		text-align: left;
		width: 65%;
		margin-bottom: 0px;
	}
	.values-head p {
		color: var(--color-white);
	}
	p {
		color: var(--color-white);
	}

	.support-header {
		padding-top: 115px;
	}

	.support-header h2.h2-styles {
		font-size: var(--font46);
		font-weight: var(--font-weight-bold);
		line-height: var(--line-height50);
		margin-bottom: 20px;
	}
	.support p {
		font-size: var(--font46);
		font-weight: var(--font-weight-bold);
		line-height: var(--line-height50);
		max-width: 1000px;
	}
	.support-text a {
		font-size: var(--font28);
		font-weight: var(--font-weight-medium);
		line-height: var(--line-height28);
	}
	.support svg {
		width: 39px;
		height: 39px;
	}
	.support-logos {
		display: flex;
		flex-direction: row;
		align-items: baseline;
	}
	.support-logo-01,
	.support-logo-02 {
		width: auto;
		height: var(--spacing100);
	}
	.empowering {
		width: var(--desktop-wrapper-width);
		max-width: var(--wrapper-width-max);
		margin: 0 auto;
		padding: var(--spacing100) 0px;
		display: flex;
		flex-direction: row-reverse;
		gap: 90px;
	}
	.empowering-text,
	.empowering-img-block {
		width: 50%;
	}
	.empowering-text {
		margin-top: 0px;
		text-align: left;
		color: var(--color-onyx);
	}
	.empowering-text h2 {
		font-size: var(--font46);
		font-weight: var(--font-weight-bold);
		line-height: var(--line-height50);
		margin-bottom: var(--spacing20);
	}
	.empowering-text p {
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		line-height: var(--line-height32);
	}
	.empowering-img-block {
		background-color: transparent;
		position: relative;
		flex-direction: row;
		justify-content: right;
	}
	.empowering-img-block.style-left::before {
		transform: translate(-10%, -15%);
	}
	.empowering-img-block picture {
		margin: 0px;
		display: flex;
		justify-content: flex-end;
		width: 80%;
		max-width: 350px;
		border-radius: var(--spacing10);
		object-fit: cover;
		object-position: top;
		aspect-ratio: 1/1;
	}
	.empowering-img-block::before {
		background-color: var(--color-amaranth);
		border-radius: var(--spacing10);
		position: absolute;
		content: " ";
		width: 80%;
		max-width: 350px;
		margin-top: 30px;
		aspect-ratio: 1/1;
		z-index: -1;
	}

	.empowering-img-block picture img {
		border-radius: var(--spacing10);
	}
}
/* For 1300px and larger */
@media screen and (min-width: 1300px) {
	.values-card p {
		line-height: var(--line-height32);
	}
}