.multistep {
	.bg-gradient {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 1440px;
		height: 215px;
		background: var(--Deep-Void-Purple, #542985);
		filter: blur(250px);
		z-index: -1;
	}

	.image-gradient {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		height: 100%;
		background: linear-gradient(
			180deg,
			var(--Electric-Purple, #9810fa) 0%,
			var(--Cyber-Pink, #ec4899) 50%,
			var(--Crimson-Violet, #861043) 100%
		);
		filter: blur(75px);
		z-index: -1;
	}

	.step-card-wrapper {
		.step-card {
			background: rgba(6, 8, 15, 0.5);
			padding: 50px 80px 0 80px;
			border-radius: 40px;
			border: 1px solid #1e2939;
			overflow: hidden;
			transition: 0.3s all;

			@media (max-width: 767px) {
				display: flex;
				padding: 20px 20px 0 20px;
			}

			&:hover {
				box-shadow: 0 0 20px 0 var(--Electric-Purple, #9810fa);
			}

			.row {
				@media (max-width: 1024px) {
					display: flex;
					flex-direction: column-reverse;
				}

				.col-lg-4 {
					position: relative;
					display: flex;
					align-items: flex-end;

					@media (max-width: 1024px) {
						justify-content: center;
					}

					.step-image {
						position: relative;

						.image-overlay {
							display: flex;
							align-items: center;
							justify-content: center;
							position: absolute;
							top: 0;
							left: 50%;
							transform: translateX(-50%);
							width: 100%;
							height: 100%;

							.play-button {
								display: contents;

								svg {
									border-radius: 50%;
									border: 3px solid var(--white);
								}
							}
						}
					}
				}

				.step-content {
					display: flex;
					flex-direction: row;
					gap: 45px;

					@media (max-width: 991px) {
						margin-top: 30px;
					}

					@media (max-width: 767px) {
						display: flex;
						flex-direction: column;
						margin-top: 0;
						gap: 10px;
					}

					.step-icon {
						img {
							margin-top: 10px;
						}
					}

					.step-heading {
						.heading-3 {
							background: linear-gradient(
								90deg,
								var(--Electric-Purple, #9810fa) 0.75%,
								var(--Cyber-Pink, #ec4899) 98.3%
							);
							background-clip: text;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}
					}
				}

				.step-list {
					margin-top: 30px;
					margin-bottom: 50px;

					.list-item {
						display: flex;
						flex-direction: row;
						gap: 10px;
						margin-bottom: 15px;
						background: rgba(6, 8, 15, 0.5);
						padding: 20px;
						border-radius: 10px;
						border: 1px solid var(--Deep-Steel, #1e2939);

						svg {
							margin-top: 5px;
						}
					}
				}
			}
		}
	}
}