/*
===================================
===================================
Styles for an individual page


===================================
===================================
*/

/* 
===================================
Page Component Styles (icon grid, team member card)
===================================
*/

.wrapper {
	max-width: var(--desktop-wrapper-width);
	margin: none;
}

.invis-flex {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.hero-text {
	border: 2px solid transparent;
	padding: var(--spacing40) var(--spacing20);
}

.hero-text p {
	margin-bottom: 0;
}

.h3-styles,
section div p {
	color: var(--color-onyx);
	text-align: center;
}

h3 {
	font-family: var(--main-font);
	font-size: var(--font36);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height40);
	margin-bottom: var(--spacing20);
}

section div p {
	font-family: var(--body-font);
	font-size: var(--font16);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height20);
	margin-bottom: var(--spacing100);
}

.about-wrapper p,
.about-wrapper .h4-styles {
	color: var(--color-onyx);
}

.about-wrapper .h4-styles {
	text-align: center;
}

.signature {
	font-family: var(--body-font);
	font-size: var(--font21);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height26);
	color: var(--color-onyx);
	margin-top: 50px;
}

/* Styles for the container */
.btn-container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--spacing20);
	margin-top: var(--spacing65);
	margin-bottom: var(--spacing65);
}

.about-wrapper .button3 {
	display: flex;
	align-items: center;
	justify-content: center;
}

.about-wrapper a:visited {
	color: var(--color-white);
}

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

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

===================================
*/

/* 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 */
}

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

	.hero {
		position: relative;
		max-width: 100%;
	}

	.overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(
			107deg,
			rgba(9, 9, 9, 0.8) 9.51%,
			rgba(9, 9, 9, 0) 76.72%
		);
		background: linear-gradient(
			107deg,
			rgba(9, 9, 9, 0.8) 9.51%,
			rgba(9, 9, 9, 0) 76.72%
		);
		z-index: 1;
	}

	.hero-text {
		position: absolute;
		z-index: 10;
		top: 43%;
		max-width: 40%;
		padding: 0px var(--spacing65);
		border: 2px solid transparent;
		left: 31%;
		transform: translate(-50%, -33%);
	}

	.hero-text p {
		font-size: var(--font21);
		line-height: var(--line-height32);
		text-align: left;
	}

	.about-wrapper {
		max-width: 800px;
		margin-bottom: 200px;
	}

	.h3-styles,
	section div p {
		color: var(--color-white);
	}

	.h3-styles {
		font-family: var(--main-font);
		font-size: var(--font56);
		font-style: normal;
		font-weight: var(--font-weight-bold);
		line-height: var(--line-height58);
		text-align: left;
	}

	.about-wrapper p {
		font-family: var(--body-font);
		font-size: var(--font21);
		font-weight: var(--font-weight-regular);
		line-height: var(--line-height32);
		margin-bottom: 40px;
		text-align: left;
	}

	.about-wrapper .h4-styles {
		font-size: var(--font46);
		font-weight: var(--font-weight-bold);
		line-height: var(--line-height50);
		text-align: left;
		margin-top: var(--spacing164);
		margin-bottom: 0px;
	}

	.signature {
		font-family: var(--main-font);
		font-size: var(--font24);
		font-weight: var(--font-weight-medium);
		line-height: var(--line-height32);
		color: var(--color-onyx);
	}
}

/* Desktop Only */
@media screen and (min-width: 1024px) {
	.signature {
		font-family: var(--main-font);
		font-size: var(--font24);
		font-weight: var(--font-weight-medium);
		line-height: var(--line-height58);
	}
}

@media screen and (min-width: 1049px) {
	.btn-container {
		display: none;
	}
}