@import url("https://fonts.googleapis.com/css2?family=Mohave:ital,wght@0,300..700;1,300..700&display=swap");

:root {
	--lgold: #e3d3b2;
	--gold: #c19d47;
	--blue: #202930;
	--black: #0c161e;
}

/* sm: 35.5em; */
/* md: 48em; */
/* lg: 64em; */
/* xl: 80em; */

.mohave-bold {
	font-family: "Mohave", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
}

html,
body {
	font-family: sans-serif;
	background-color: var(--blue);
}

h1,
h2,
h3,
h4 {
	font-family: "Mohave", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 0.5em;
}

h1 {
	font-size: 4.6rem;
}
h2 {
	font-size: 3.5rem;
}
h3 {
	font-size: 2.8rem;
	color: var(--lgold);
}
h4 {
	font-size: 2.4rem;
}

a {
	color: var(--gold);
}

p {
	font-size: 1.1rem;
	line-height: 1.4em;
	color: #fff;
}

ul {
	padding: 0;
	list-style-position: inside;
}

li {
	margin-bottom: 10px;
}

li::marker {
	color: var(--lgold);
}

img {
	max-width: 100%;
	height: auto;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

.btn {
	text-transform: uppercase;
	padding: 20px 40px;
	border: 2px solid var(--gold);
	text-decoration: none;
	display: inline-block;
	font-weight: bold;
	transition: 0.5s ease;
	background-color: var(--black);
}

.btn:hover {
	background-color: var(--gold);
	color: #fff;
}

.relative {
	position: relative;
}

.l-box {
	padding: 20px;
	box-sizing: border-box;
}

.container-sm {
	max-width: 1000px;
	margin: 0 auto;
}

.container-md {
	max-width: 1400px;
	margin: 0 auto;
}

.container-lg {
	max-width: 1800px;
	margin: 0 auto;
}

.white,
.white h1,
.white h2,
.white h3,
.white h4 {
	color: #fff;
}

.bkg-grey-xl {
	background-color: #eee;
}

.bkg-grey-d {
	background-color: #333;
}

.bkg-gold-l {
	background-color: var(--lgold);
}

.bkg-gold {
	background-color: var(--gold);
}

.bkg-white {
	background-color: #fff;
}

.bkg-blue {
	background-color: var(--blue);
}

.bkg-black {
	background-color: var(--black);
}

.angle {
	height: 200px;
	width: 100%;
	z-index: -1;

	@media screen and (max-width: 64em) {
		height: 100px;
	}
}

.angle-top-right {
	clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
}

.angle-top-left {
	clip-path: polygon(0 0, 100% 100%, 100% 100%, 0 100%);
}

.angle-bottom-right {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
}

.angle-bottom-left {
	clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
}

.hero-angle {
	position: absolute;
	bottom: 0;
	z-index: 1;
}

.height-100 {
	height: 100%;
}

.z-100 {
	z-index: 100;
}

.hero {
	height: 80vh;
	min-height: 700px;
	width: 100%;
	background-color: var(--blue);
	clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 95%, 0 75%);
}

.hero-image {
	background-image: url("../images/Going-Underground-image5.jpg");
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	opacity: 0.4;
	height: 100%;
}

.hero-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 11;
	text-align: center;
}

.hero-content img {
	width: 80%;
	max-width: 400px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 1);
	margin: 0 auto;
	transform: rotate(5deg);
}

.intro {
	position: relative;
	margin: 40px auto 40px;
	z-index: 10;
}

.videos {
	position: relative;
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin: 40px auto 40px;
	z-index: 10;
	width: 100%;
}

.video {
	position: relative;
	border: 2px solid var(--gold);
}

.images {
	position: relative;
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin: 40px auto 40px;
	z-index: 10;
	width: 100%;
}

.footer-img {
	clip-path: polygon(0 0, 50% 25%, 100% 0, 100% 100%, 0 100%);
	background-image: url("../images/gold.jpg");
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	opacity: 0.4;
	height: 400px;
}

.footer-content {
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
}

footer a {
}