* {
	font-size: 22px;
}

:root {
	--shadow_color: rgba(0, 0, 0, 0.37);
	--hero_background: black;
	--try_a_sample: black;

	--BRAND-PURPLE: #7d00e3;
	--BRAND-PURPLE-HOVER: #6500b8;
	--BRAND-GOLD: #f5d211;
}

body {
	perspective: 1000px; /* Adjust the perspective value to control the depth */
}

main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	width: 100%;
}

.hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* overflow: hidden; */

	min-height: 250px;
	height: 80vh;
	max-height: 500px;

	width: 100%;

	margin: 0px;

	padding-top: clamp(40px, 10vh, 55px); /* To account for header */
	padding-bottom: 15px;

	color: white;
	background-color: var(--hero_background);
	background: radial-gradient(
		circle at 100% 100%,
		var(--BRAND-PURPLE) 0%,
		var(--hero_background) 60%
	);
}

.hero_text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: baseline;

	width: 85%;

	/* background-color: #f5d211; */

	height: 100%;

	/* border: 1px red solid; */
}

@media screen and (min-width: 800px) {
	.hero {
		padding-bottom: 35px;
	}

	.hero_text {
		align-items: center;
		text-align: center;

		width: 90%;
	}
}

.hero h2 {
	font-size: 2em;

	line-height: 1.2em;

	margin-top: 15px;
}
.hero h2 i {
	font-size: 1em;
}
.hero p {
	font-size: 1.1em;
	line-height: 1.25em;

	margin: min(2vh, 30px) 0px;
}

.hero p em,
.hero p b,
.hero p i,
.hero p u {
	font-size: 1em;
}

.items_figure {
	display: none;
}

.cta {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	width: min(auto, 250px);
	padding: 5px 20px;
	height: auto;

	margin-top: 5px;

	background-color: var(--BRAND-PURPLE);
	color: white;
	text-decoration: none;
	text-wrap: wrap;

	border: 1px solid white;
	border-radius: 8px;

	font-size: min(10vw, 1.25em);

	transition: background-color 0.3s;
}
.cta:hover {
	border: 1px solid var(--BRAND-GOLD);
	background-color: black;
	color: var(--BRAND-GOLD);
}

h2 {
	font-size: 1.75em;
	line-height: 1.1em;
}
h2 i {
	font-size: 1em;
}
.hero p {
	font-size: 1em;
	line-height: 1.35em;

	max-width: 700px;

	margin: 20px 0px;
}
.hero em {
	font-style: normal;
	font-weight: bold;
}

@media screen and (min-width: 480px) {
	.hero p {
		font-size: 1em;
		line-height: 1.35em;

		max-width: 700px;

		margin: 20px 0px;
	}

	.cta {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		/* width: 200px; */
		padding: 0px 20px;
		height: 50px;

		margin-top: 5px;

		background-color: var(--BRAND-PURPLE);
		color: white;
		text-decoration: none;
		font-size: 1.1em;

		border: 1px solid var(--BRAND-PURPLE);
		border-radius: 8px;

		transition: background-color 0.3s;
	}
	.cta:hover {
		border: 1px solid var(--BRAND-GOLD);
		background-color: black;
		color: var(--BRAND-GOLD);
	}
}

.content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-content: center;

	max-width: 1200px;

	/* background-color: #6500b8; */
	/* border: 1px solid green; */
}

#prologue_intro {
	/* margin-bottom: 0px; */

	font-size: 1.66em;
	margin-bottom: 35px;
	padding-top: 0px;
	margin-top: 30px;
}

#prologue {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	width: 100vw;
	max-width: 1150px;

	margin-top: 0px;
	margin-bottom: 0px;

	text-align: center;

	font-size: 1em;

	/* background-color: lime; */
}

#tradeoffer {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;

	width: 100%;
	max-width: 800px;

	margin-bottom: min(45px, 5vh);

	/* flex-wrap: wrap; */

	/* background-color: orange; */
}

.offer_component {
	display: flex;
	flex-direction: column;
	justify-content: baseline;
	align-items: center;

	width: 77.5%;
	/* min-width: 20px; */
	/* max-width: 40vw; */

	margin-bottom: 20px;

	padding: 12.5px;

	border-radius: 30px;

	box-shadow: 0px 0px 15px 0.25vh lightgray;

	/* border: 1px solid blue; */

	/* background-color: magenta; */
}

.offer_component h3 {
	font-size: 1.25em;

	margin-top: 0.75em;
	margin-bottom: 0.75em;
}

.offer_component ul li em {
	font-style: normal;
	font-weight: bold;
}

.offer_component ul li strong {
	color: var(--BRAND-PURPLE);
}

#zero_dollars {
	font-size: 1.25em;
}

#prologue p {
	display: inline;
	width: 85%;
}

@media screen and (min-width: 800px) {
	#tradeoffer {
		flex-direction: row;
		align-items: stretch;
	}

	.offer_component {
		width: 45%;
		/* min-width: 20px; */
		max-width: 40vw;
	}
}

#so_how_do_we_make_money {
	font-weight: bolder;
	font-size: 1.275em;

	/* background-color: red; */
}

.intro {
	display: block;
	text-align: center;

	/* margin: -17.5px auto; */
	/* margin-top: 40px; */
	margin-bottom: 0px;

	padding-top: 3vw;
	padding-bottom: 0vw;

	font-size: 1.66em;
	font-weight: bold;

	/* background-color: pink; */
}

section {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	/* width: 100%; */

	margin: 30px auto;
	margin-top: 40px;

	padding: 0vh 0vw;

	/* border: 1px solid blue; */
	/* background-color: violet; */
}

section p {
	margin-bottom: 0.75em;

	line-height: 1.25em;
}

section ul {
	text-align: left;

	width: 85%;

	list-style-position: outside;

	transform: translateX(10px);
	transform: scaleX(-10px);
}

section ul li {
	line-height: 1.25em;

	margin-bottom: 16.6px;
}

section .text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	text-align: left;

	width: 85%;
	max-width: 525px;

	/* background-color: #f5d211; */
}

section .text h3 {
	display: flex;
	flex-direction: column;
	justify-content: left;

	font-size: 1.3em;

	line-height: 1.5em;

	margin-bottom: 10px;

	width: 100%;

	/* background-color: #6500b8; */
}

section .text p {
	width: 100%;

	/* background-color: antiquewhite; */
}

section .step_num {
	font-size: 0.9em;
}

section .less {
	color: grey;
}

section img {
	width: 85%;
	max-width: 500px;

	margin-bottom: 10px;

	border-radius: 20px;

	justify-self: baseline;
	/* align-self: baseline; */

	object-fit: cover;
	object-position: 69% 50%;
}

#bookCall img {
	object-fit: contain;
	border-radius: min(2.5vw, 12.5px);

	height: auto;
}

#get-discord {
	margin-bottom: 60px;
}

#get-discord img {
	max-width: 100000px;
	object-position: 100% 50%;
	object-fit: contain;
}

#get-gud {
	margin-bottom: 10px;
}

@media screen and (min-width: 1080px) {
	.intro {
		margin-bottom: 30px;
	}

	.odd,
	.even {
		width: 92.5vw;

		margin-bottom: 125px;
		max-width: 1150px;

		align-items: center;
		justify-content: space-between;
	}

	.odd {
		flex-direction: row;
	}

	.even {
		flex-direction: row-reverse;
	}

	/* .odd .text {
        margin-left: 4vw;
    }

    .even .text {
        margin-right: 4vw;
    } */

	section .text {
		text-align: left;
	}

	section ul {
		transform: translateX(10px);
		transform: scaleX(-10px);
	}

	section img {
		width: auto;
		max-width: 550px;

		height: 60vh;
		max-height: 500px;

		width: 40vw;

		margin-bottom: 0px;

		object-position: 61.5% 50%;
	}
}

section h3 .step {
	font-size: 1.33em;
}

section h3 .step em {
	font-size: 1em;
	font-style: normal;

	color: var(--BRAND-PURPLE);
}

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

	width: 100%;
	max-width: none;

	padding: min(5vw, 50px) 0px;
	padding-top: min(12vw, 70px);

	background: linear-gradient(white 0%, gray 100%);
	background: var(--BRAND-PURPLE);

	color: white;
}

.getstarted h3 {
	font-size: 1.75em;

	margin-bottom: 15px;

	line-height: 1.25em;

	text-align: center;
}

.getstarted p {
	width: 90%;
	max-width: 600px;

	line-height: 1.35em;

	text-align: center;
}

.getstarted a {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	width: 225px;

	margin-top: 20px;
	margin-bottom: 30px;

	padding: 10px;

	border-radius: 10px;
	border: 2px solid var(--BRAND-PURPLE);

	text-decoration: none;

	font-size: 1.05em;
	font-weight: normal;

	color: black;

	background-color: white;
}

.getstarted a:hover {
	/* border-color: var(--BRAND-GOLD); */

	/* color: var(--BRAND-GOLD); */

	/* text-decoration: underline; */

	background-color: lightgray;
}

/* faq */

#faq {
	width: 85%;

	max-width: 750px;

	/* background-color: red; */
}

#faq .title {
	display: block;

	width: 100%;

	margin-bottom: 22.5px;

	text-align: center;

	font-weight: bold;
	font-size: 1.75em;
}

#faq .c {
	position: relative;

	width: 100%;

	margin-bottom: 20px;

	border-radius: 10px;

	box-shadow: 0px 0px 15px 0.25vh lightgray;
}

#faq input {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	visibility: 0;

	border-radius: 10px;
}

#faq h4 {
	background: white;
	color: var(--BRAND-PURPLE);
	padding: 1em;
	position: relative;

	border-radius: 10px;
}

#faq label::before {
	content: "▶";
	display: inline-block;
	font-size: 1em;
	margin: -10px 0;
	margin-right: 20px;
	/* border: 15px solid transparent;
    border-left:20px solid white; */
}

#faq label {
	display: flex;
	flex-direction: row;
	justify-content: left;
	align-items: center;

	position: relative;

	cursor: pointer;
}

#faq .p {
	max-height: 0px;

	overflow: hidden;
	transition: max-height 0s;

	/* background-color: white; */
	/* box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.2); */
}

#faq .p p {
	padding: 2em;
}

#faq .p ul {
	list-style-type: disc;
	/* list-style-position: inside; */
	transform: none;
	margin-left: 27.5px;
}

#faq input:checked ~ h4 label::before {
	/* border-left:15px solid transparent;
    border-top:20px solid white;
    margin-top:12px;
    margin-right:10px; */

	content: "▼";
	font-size: 1.375em;
	margin-left: -5.75px;
	margin-right: 14px;
}

#faq input:checked ~ h4 {
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

#faq input:checked ~ .p {
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

#faq input:checked ~ h4 ~ .p {
	max-height: 100000px;

	transition: max-height 0.5s;

	/* padding: 2em; */
	padding: min(2em, 7.5vw);
}

#testimonials {
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;

	width: 100%;
	max-width: none;

	padding-bottom: 0px;

	margin-bottom: 0px;

	background: gray;
	/* background-color: red; */
	background: linear-gradient(
		180deg,
		var(--still_not_convinced) 0%,
		black 100%
	);
	/* background: black; */
}

#testimonials h2 {
	display: inline-block;

	width: auto;

	text-align: center;

	padding-top: 50px;

	margin: 0 auto;
	margin-bottom: 30px;

	color: white;

	/* background-color: rebeccapurple; */
}

.hallOfTestimony {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* overflow:scroll; */
	/* flex-wrap: wrap; */
	/* overflow-x: auto; */
	/* scroll-snap-type: x mandatory; */

	width: 100vw;
	max-width: 2000px;

	/* padding-bottom: 60px; */
	padding-bottom: min(50px, 5vh);

	/* background: gray; */
	/* background-color: red; */
	/* background: linear-gradient(0deg, var(--realisation_background) 50%, white 90%);  */
}

.testimony {
	display: inline-flex;
	align-self: stretch;
	justify-self: stretch;
	flex-direction: column;
	justify-content: space-between;

	scroll-snap-align: start;

	width: 75vw;
	/* max-width: 270px; */

	/* height: max(210px, 17.5vw); */
	height: auto;

	/* display: inline-block; */
	text-align: left;

	border-radius: min(
		2vw,
		10px
	); /* Optional: Makes the image a perfect circle */
	/* border: 2px solid var(--accent); */

	/* box-shadow: 0px 0px 15px 0.5vh lightgray; */
	/* color: black; */
	background-color: white;

	margin: 10px auto;

	padding: 20px;
}

@media screen and (min-width: 900px) {
	.hallOfTestimony {
		flex-direction: row;
		flex-wrap: wrap;
		width: 90vw;
	}

	.testimony {
		width: 20%;
		min-width: 300px;
		margin: 10px;
	}
}

.testimony p {
	font-style: italic;

	font-size: 0.9em;
}

.testimony em {
	font-style: italic;
	font-size: 1em;
	font-weight: bold;
}

.testimony .name {
	font-weight: bold;
	font-size: 1em;
}

.testimony .course,
.testimony .course sup {
	color: black;
	opacity: 80%;
	font-size: 0.9em;
}

.testimony .pfp {
	justify-self: center;
	align-self: center;

	padding-bottom: 20px;
	width: 50%;

	border-radius: 100%;
}