header { 
	padding-bottom: 4rem; 
	position: relative;
}
#benefits {
	background: #201F54;
	text-align: center;
	color: rgba(255,255,255,0.75);
}
#benefits .container { padding: 1.5rem 1rem 5rem 1rem; }
#benefits h2, #benefits h3 { color: #ffffff; }
#benefits h2 {
	text-transform: uppercase;
	text-align: left;
	font-size: 2.6rem;
	margin-bottom: 1rem;
}
#benefits h2 span { display: block; }
#benefits h3 { 
	font-family: "Inter", sans-serif;
	font-size: 1.125rem; 
	font-weight: 500;
	text-transform: uppercase;
}
#benefits .subtitle { 
	text-align: left; 
	margin: 1rem 0 1.5rem 0;
	width: 100%;
	color: rgba(248,215,251,0.85);
}
#benefits ul {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3.75rem;
	margin: 4rem auto 0 auto;
}
#benefits ul li {
	background: #6F31E3;
	border-radius: 1.5rem;
	padding: 1.5rem;
}
#benefits ul li p { line-height: 1.25rem; }

#pricing-plans {
	background: url("../img/pricing-bgr.svg") no-repeat bottom center;
	background-size: cover;
	text-align: center;
	padding: 4rem 0;
	opacity: 1;
	transition: opacity 0.3s ease-in-out;
}

#selling_points {
	background: #201F54;
	border-bottom-left-radius: 1.5rem;
	border-bottom-right-radius: 1.5rem;
}
#selling_points ul {
	list-style: none;
	padding: 2rem;
	margin: 0 auto;
	display: flex;
	gap: 3rem;
	flex-wrap: wrap;
	width: 1020px;
	max-width: 100%;
	justify-content: space-between;
}
#selling_points h3 {
	color: #FFC248;
	font-size: 2rem;
	margin-bottom: 0;
}
#selling_points p {
	border-top: 1px solid rgba(255,255,255,0.35);
	padding: 1rem 0 0 0;
	color: rgba(255,255,255,0.85);
	font-size: 1.125rem;
}

#how-it-works { padding: 5rem 1rem; }
#how-it-works h2, #how-it-works .subtitle { text-align: center; }
#how-it-works .steps {
	list-style: none;
	padding: 0;
	margin: 3rem auto 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem;
}
.step-title { 
	display: flex; 
	align-items: baseline; 
	gap: 1rem; 
}
.step-title span::before {
	content: "";
	position: absolute;
	display: inline-block;
	left: 0;
	bottom: 0.25rem;
	background: rgba(79,19,192,0.15);
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
}
.step-title span { 
	position: relative;
	display: inline-block;
	text-align: right;
	font-family: "Montserrat", sans-serif;
	font-size: 4.25rem;
	font-weight: bold;
	color: #4F13C0;
	width: 3.25rem;
	line-height: 1;
}
.step-title h3 {
	font-size: 1.25rem;
	font-weight: 500;
	color: #1a1a1a;
}
#how-it-works .steps p { 
	margin: 0;
}

@media screen and (max-width: 1280px) {
	header { padding-bottom: 1rem; }
}

@media screen and (max-width: 1200px) {
	header { padding-bottom: 2rem; }
	#selling_points ul { gap: 2rem; }
}

@media screen and (max-width: 1080px) {
	header { padding-bottom: 0rem; }
}
@media screen and (max-width: 980px) {
	#hero.home { width: calc(100% - 2rem); }
	#benefits ul { 
		grid-template-columns: 1fr 1fr; 
		gap: 2.5rem;
	}
	#selling_points ul { padding: 0.5rem 1.5rem 1rem 1.5rem; }
	#selling_points h3 { font-size: 1.5rem; }
	#selling_points p {
		font-size: 1rem;
		padding-top: 0.75rem;
		margin-top: 0.75rem;
	}
}

@media screen and (max-width: 820px) {
	#pricing-plans { padding-bottom: 2rem; }
	.plans.monthly { width: 100%; }
	#selling_points ul { 
		flex-flow: column;
		gap: 1rem;
		padding-top: 1.5rem;
	}
	#selling_points h3 { margin-top: 0; }
	#faqs .content { grid-template-columns: 1fr; }
	#faqs ul { margin-bottom: 2rem; }
	#faqs .connect { 
		order: 2; 
		display: flex;
		align-items: center; 
		gap: 2rem;
	}
	#faqs .connect img { width: 200px; }
	#faqs .connect p { 
		text-align: left; 
		font-size: 1rem; 
		margin-bottom: 0;
	}
}

@media (max-width: 768px) {
	#how-it-works .steps { 
		grid-template-columns: 1fr 1fr; 
		gap: 2rem;
	}
}

@media screen and (max-width: 620px) {
	#hero.home { 
		gap: 2rem;
		margin-top: 0;
	}
	#hero h1 { width: calc(100% - 2rem); }
	#hero.home h1::after { bottom: 1rem; }
	.short-benefits { gap: 2.5rem; }
	#benefits ul, #how-it-works .steps { 
		grid-template-columns: 1fr; 
		gap: 1.5rem;
	}
	#faqs .connect { 
		flex-flow: column; 
		gap: 0.5rem;
	}
	#faqs .connect p { text-align: center; }
}

@media screen and (max-width: 460px) {
	.short-benefits { 
		flex-flow: column; 
		gap: 1.5rem; 
	}
}

@media screen and (max-width: 420px) {
	#pricing-plans .container { padding: 0; }
	#pricing-plans h2, #pricing-plans .subtitle { 
		width: calc(100% - 2rem); 
		padding-left: 1rem; 
		padding-right: 1rem; 
	}
}