.hero {
	position: relative;
}

.heroContainer {
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 3rem;
	margin: 150px auto 0 auto;
	max-width: calc(100vw - 93px);
}

.heroInfo {
	position: relative;
}

.gradientBlob {
	filter: blur(70px) opacity(0.8);
	z-index: -1;
	position: absolute;
	top: -115%;
	left: -50px;
}

.heroInfo h1 {
	text-wrap: nowrap;
	margin: 0;
	font-size: 30px;
}

.heroImage {
	display: block;
	height: auto;
	min-width: 300px;
	max-width: 500px;
}

.services {
	text-align: center;
	padding: 60px 20px 0 20px;
}

/* .blob {
	position: absolute;
	border-radius: 50%;
	z-index: -1;
	background: radial-gradient(circle at center, #9e9e9e 0, var(--background) 100%);
	width: 500px;
	aspect-ratio: 1;
	top: calc(50% - calc(500px / 2));
	left: calc(50% - calc(500px / 2));
	filter: blur(300px) opacity(0.15);
} */

/* .plans {
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	margin-inline: auto;
} */

.plans {
	margin-top: 4.5rem;
	display: flex;
	gap: 4rem 3rem;
	flex-wrap: wrap;
	justify-content: center;
	padding-inline: 1rem;
	text-align: left;
}

.plan {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	max-width: 360px;
	border: 1px solid var(--clr-neutral-800)/* #1f1f1f */;
	border-radius: .5rem;
	padding: 40px 32px;
	height: 507px;
}

.plan {
	color: #b4b4b4;
}

.plan .planTitle {
	margin-bottom: 0;
	color: #fff;
}

.plan .planInfo {
	text-wrap: balance;
}

.plan .planFeatures {
	line-height: 2;
	padding: 0;
	list-style: none;
}

.plan .planFeatures li {
	display: flex;
	gap: 1rem;
	align-items: center;
}

.plan .buy {
	margin-top: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 100vw;
	transition: all .2s ease;
}

.plan .buy:hover {
	padding-right: 15px;
}

/* global classes */

.white {
	color: #fff;
}

/* .btn {
	outline: 0;
	border: 0;
	text-decoration: none;
	padding: 10px 20px;
	border-radius: 7px;
	text-align: center;
	display: inline-block;
}

.btnPrimary {
	color: #fff;
	background: #5f43b1;
}

.btnPrimary:hover {
	color: #fff;
	background: #5f43b1b9;
}

.btnWhite {
	background: #fff;
	color: #000;
}

.btnWhite:hover {
	background: #ffffffb9;
} */

.gradientBorder {
	margin-top: -1px;
	position: relative;
	background: var(--clr-bg);
	background-clip: padding-box;
	border: solid 2px transparent;
}

.gradientBorder::before {
    content: '';
    position: absolute;
	inset: 0;
    z-index: -1;
    margin: -2px;
    border-radius: inherit;
    background: linear-gradient(45deg, #ba00ff 0%, var(--clr-primary-500) 100%);
}

.gradientBorder::after {
	content: 'Popular';
	position: absolute;
	bottom: 100%;
	left: 32px; /* make sure its the same value as the inline padding of the card */
	color: #000;
	background: #fff;
	padding: 2px 1.5rem;
	border-radius: 7px 7px 0 0;
	font-size: 15px;
}

.features {
	padding: 60px 10px;
	text-align: center;
	position: relative;
}

.features p {
	margin: 0;
	margin-block: 10px 30px;
}

.featuresTitle {
	margin: 0;
	margin-bottom: 10px;
	font-size: 2em;
}

.featuresWrapper {
	align-items: center;
	display: flex;
	flex-direction: column;
	row-gap: 11rem;
}

.feature {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	width: calc(100vw - 100px);
	justify-content: center;
	column-gap: 30px;
	text-align: left;
	transition: 200ms ease;
	border-radius: 1rem;
	border: 1px solid transparent;
	padding-inline: 3rem;
}

.feature:hover {
	background: var(--cardGradient);
	background-size: 200% 200%;
	animation: bgEffect 10s ease infinite;
	border-color: var(--clr-neutral-600);
}

.feature:nth-child(odd) {
	background: var(--cardGradient);
	background-size: 200% 200%;
	flex-direction: row-reverse;
	animation: bgEffect 15s ease infinite;
}

.feature p {
	font-size: 1.1rem;
	max-width: 45ch;
	flex: 1 1 50%;
	color: var(--clr-neutral-300);
}

.feature img {
	max-width: 400px;
	flex: 1 1 50%;
	width: 50%;
	transition: transform 200ms ease-out;
}

.feature:hover img {
	transform: translateY(2px);
}

.outline {
	-webkit-text-stroke: 1px var(--secondary);
	-webkit-text-fill-color: transparent;
	text-wrap: nowrap;
}

@media only screen and (max-width: 900px) {
	.heroContainer {
		justify-content: center;
		flex-direction: column-reverse;
		row-gap: 30px;
	}

	.heroImage {
		width: 100%;
		max-width: 400px;
	}

	.heroInfo h1 {
		font-size: 23px;
	}
}

@keyframes bgEffect {
	0% {
		background-position: 0% 57%
	}

	50% {
		background-position: 100% 44%
	}

	100% {
		background-position: 0% 57%
	}
}