.option-menu-btn {
	display: none;
	position: absolute;
	/* width: 40px; */
	height: 40px;
	right: 0px;
	top: 75px;
}
.option-menu-btn button {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

#how-it-works-main-container {
	margin-top: 150px;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
	padding: 150px;
	padding-top: 0;
}

#how-it-works-options-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 200px;
}
#how-it-works-options-container {
	position: fixed;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 400px;
}
#how-it-works-options-container {
	margin: 0;
	width: 100%;
}
#how-it-works-options-container h1 {
	width: 100%;
	max-width: 700px;
	font-size: 20px;
	border-bottom: 1px solid lightgray;
	padding-bottom: 10px;
	margin-bottom: 20px;
}
#how-it-works-options-container h4 {
	font-size: 14px;
}
.options-grid {
	padding: 0 20px;
	margin: 50px 0;
	margin-bottom: 150px;
	height: auto;
	width: 100%;
	min-width: 140px;
	max-width: 600px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 10px;
	grid-row: auto;
	justify-content: center;
	align-items: center;
}

.options-grid div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: white;
	/* height: 150px; */
	font-weight: 500;
	color: var(--primaryThree);
	padding: 12px 8px;
	transition: 0.2s ease-out;
	margin: 0;
	box-shadow: var(--dropshadow-mid);
	overflow: hidden;
	border-radius: 10px;
	transition: 0.2s ease-out;
}

.options-grid div:hover,
.options-grid div.active {
	background-color: var(--primaryTwo);
	transform: scale(1.05);
	cursor: pointer;
	color: white;
}
.options-grid div span {
	font-size: 12px;
}
.pre-info-container {
	margin-bottom: 50px;
}
.pre-info-container p {
	margin-bottom: 50px;
}

/* How it works Container */
.how-it-works-content-container,
.how-it-works-item,
.benefits--main-container {
	width: 100%;
	padding: 0 50px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.how-it-works-content-container {
	padding-left: 450px;
}

.how-it-works-item,
.benefits--main-container {
	max-width: 1000px;
	padding: 0;
}

.steps-grid-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	grid-template-rows: auto;
	text-align: left;
	gap: 25px 150px;
	padding: 50px 0;
	margin-top: 25px;
	margin-bottom: 100px;
}
.steps-grid-container h3,
.how-it-works-item h2 {
	border-bottom: 1px solid lightgray;
	margin-bottom: 12px;
	width: 100%;
}
.how-it-works-item h2 {
	margin-bottom: 50px;
	padding-bottom: 10px;
}
.steps-grid-container button {
	background: none;
	color: var(--primaryThree);
	outline: none;
	border: none;
	transition: 0.25s ease-in-out;
	font-size: 16px;
	font-weight: 500;
}
.steps-grid-container button:hover {
	cursor: pointer;
	color: var(--primaryTwo);
}

.benefits-container {
	margin-top: 25px;
	width: 100%;
	max-width: 450px;
}
.video-container {
	background: var(--primaryTwo);
	height: 315px;
	width: 560px;
	margin-bottom: 50px;
}
@media (max-width: 1340px) {
	#how-it-works-main-container {
		flex-direction: column;
		width: 100%;
	}
	#how-it-works-options-container {
		position: relative;
		width: 100%;
		max-width: 100%;
	}
	.options-grid {
		margin: 0;
		margin-top: 25px;
		padding-bottom: 15px;
		justify-content: space-between;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		max-width: 100%;
		gap: 15px;
		margin-bottom: 50px;
	}
	.how-it-works-content-container {
		padding: 0px;
	}
}
@media (max-width: 1000px) {
	#how-it-works-main-container {
		flex-direction: column;
		width: 100%;
		padding: 0 25px;
	}
}

@media (max-width: 500px) {
	.option-menu-btn {
		display: block;
	}
	#how-it-works-main-container {
		margin-top: 0;
		padding: 150px 25px;
		padding-top: 0;
		width: 100%;
	}
	.video-container {
		width: 100%;
		/* height: max-content; */
		background: none;
		margin-bottom: 50px;
	}
	.how-it-works-content-container {
		padding: 0px;
		padding-top: 150px;
	}
	.steps-grid-container {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		justify-content: center;
		align-items: center;
		margin-bottom: 50px;
	}
	#how-it-works-options-container {
		margin: 0;
		margin-top: 50px;
		background: whitesmoke;
		width: 100vw;
		height: 100vh;
		z-index: 9999;
		top: 0;
		left: -100vw;
		padding: 20px;
		position: absolute;
		justify-content: flex-start;
		transition: 0.35s ease-in-out;
	}

	#how-it-works-options-container.active {
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		position:fixed;
	}

	#how-it-works-options-container h1 {
		font-size: 16px;
	}
	#how-it-works-options-container h4 {
		font-size: 11px;
	}
	.options-grid {
		margin: 0;
		margin-top: 25px;
		padding-bottom: 15px;
		width: 100%;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}

	.options-grid div {
		font-size: 14px;
	}
}