.our-timeline {
	.timeline-wrapper {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		margin-top: 30px;

		.timeline-item {
			position: relative;
			width: 100%;
			max-width: calc(50% - 30px);
			padding: 30px;
			margin-top: 30px;
			background: linear-gradient(
				127deg,
				var(--Oxford-Blue, rgba(16, 24, 40, 0.3)) 0%,
				rgba(8, 12, 20, 0.3) 50%,
				var(--Oxford-Blue, rgba(16, 24, 40, 0.3)) 100%
			);
			border: 1px solid var(--Deep-Steel, #1e2939);
			border-radius: 20px;
			transition: 0.3s all;

			@media (max-width: 767px) {
				max-width: 100%;
			}

			.label-wrapper {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				gap: 10px;
				font-size: 16px;

				span {
					padding: 5px 25px;
					border-radius: 20px;
				}
			}

			.heading-wrapper {
				margin-top: 20px;

				.heading-3 {
					font-weight: 400;
				}

				.period {
					color: var(--electric-purple);
					font-size: 20px;
					font-weight: 700;
				}
			}

			.features-wrapper {
				margin-top: 25px;

				.feature-item {
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					gap: 10px;
					margin-top: 15px;

					svg {
						margin-top: 5px;
					}

					.feature-label {
						font-size: 16px;
					}
				}

				.line-gradient {
					.ornament-1 {
					}

					.ornament-2 {
						&:before {
							width: 5px;
							background: linear-gradient(
								180deg,
								var(--deep-forest-green, #006327) 0%,
								#ad46ff 100%
							);
							border-radius: 20px;
						}

						&:after {
							width: 5px;
							background: linear-gradient(
								180deg,
								#f6339a 0%,
								var(--azure-glow, #2b7fff) 100%
							);
							border-radius: 20px;
						}
					}

					.ornament-3 {
					}
				}
			}

			&:nth-child(1) {
				.label-wrapper {
					@media (max-width: 767px) {
						margin-top: 80px;
					}
					.phase {
						background: linear-gradient(
							95deg,
							var(--emerald-green, #00c950) 0%,
							var(--deep-forest-green, #006327) 100%
						);
					}

					.label {
						color: var(--emerald-green);
						background: rgba(0, 201, 80, 0.2);
						border: 0.5px solid var(--emerald-green);
					}
				}

				&:hover {
					border: 0.5px solid var(--emerald-green);
					box-shadow: 0 0 20px 0 rgba(0, 201, 80, 0.5);
				}

				&:before {
					content: "";
					position: absolute;
					top: -8px;
					right: -70px;
					width: 80px;
					height: 80px;
					background-image: url("../../../assets/images/phase-1.png");
					background-position: center;
					background-repeat: no-repeat;

					@media (max-width: 767px) {
						top: 10px;
						left: 20px;
					}
				}

				&:after {
					content: "";
					position: absolute;
					bottom: -20px;
					right: -30px;
					width: 5px;
					height: calc(100% - 50px);
					border-radius: 20px;
					background: linear-gradient(
						180deg,
						var(--Deep-Forest-Green, #006327) 0%,
						#ad46ff 100%
					);

					@media (max-width: 767px) {
						display: none;
					}
				}
			}

			&:nth-child(2) {
				align-self: flex-end;

				.label-wrapper {
					justify-content: flex-end;

					@media (max-width: 767px) {
						justify-content: flex-start;
						margin-top: 80px;
					}
					.phase {
						background: linear-gradient(
							95deg,
							#ad46ff 0%,
							#f6339a 100%
						);
					}

					.label {
						color: var(--electric-purple);
						background: rgba(152, 16, 250, 0.2);
						border: 0.5px solid #9810fa;
					}
				}

				&:hover {
					border: 0.5px solid var(--deep-void-purple, #542985);
					box-shadow: 0 0 20px 0 rgba(225, 56, 181, 0.5);
				}

				&:before {
					content: "";
					position: absolute;
					top: -8px;
					left: -75px;
					width: 80px;
					height: 80px;
					background-image: url("../../../assets/images/phase-2.png");
					background-position: center;
					background-repeat: no-repeat;

					@media (max-width: 767px) {
						top: 10px;
						left: 20px;
					}
				}

				&:after {
					content: "";
					position: absolute;
					bottom: -20px;
					left: -35px;
					width: 5px;
					height: calc(100% - 50px);
					border-radius: 20px;
					background: linear-gradient(
						180deg,
						#f6339a 0%,
						var(--azure-glow, #2b7fff) 100%
					);

					@media (max-width: 767px) {
						display: none;
					}
				}
			}

			&:nth-child(3) {
				.label-wrapper {
					@media (max-width: 767px) {
						margin-top: 80px;
					}
					.phase {
						background: linear-gradient(
							95deg,
							var(--azure-glow, #2b7fff) 0%,
							var(--cyber-cyan, #00b8db) 100%
						);
					}

					.label {
						color: var(--azure-glow);
						background: rgba(43, 127, 255, 0.2);
						border: 0.5px solid var(--azure-glow);
					}
				}

				&:hover {
					border: 0.5px solid var(--azure-glow);
					box-shadow: 0 0 20px 0 rgba(0, 184, 219, 0.5);
				}

				&:before {
					content: "";
					position: absolute;
					top: -8px;
					right: -70px;
					width: 80px;
					height: 80px;
					background-image: url("../../../assets/images/phase-3.png");
					background-position: center;
					background-repeat: no-repeat;

					@media (max-width: 767px) {
						top: 10px;
						left: 20px;
					}
				}
			}
		}
	}
}