/* Timeline Container */
.timeline {
	position: relative;
	max-width: 800px;
	margin: 0 auto;
	padding: 40px 0;
}

/* Timeline Vertical Line */
.timeline::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 4px;
	background: #ddd;
	left: 50%;
	margin-left: -2px;
}

/* Timeline Item */
.timeline-item {
	padding: 20px 40px;
	position: relative;
	width: 50%;
}

/* Timeline Item - Left Side */
.timeline-item.left {
	left: 0;
}

/* Timeline Item - Right Side */
.timeline-item.right {
	left: 50%;
}

/* Timeline Dot */
.timeline-item::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	border: 4px solid #007bff;
	top: 20px;
	right: -10px;
	z-index: 1;
}

/* Timeline Dot for Right Side */
.timeline-item.right::after {
	left: -10px;
}

/* Timeline Content */
.timeline-content {
	padding: 20px;
	background: #f8f9fa;
	border-radius: 8px;
	position: relative;
}

/* Timeline Heading */
.timeline-content h4 {
	margin-top: 0;
	color: #007bff;
}

/* Timeline Paragraph */
.timeline-content p {
	margin-bottom: 0;
}

/* Responsive Design for Mobile */
@media (max-width: 767.98px) {
	.timeline-item {
		width: 100%;
		padding-left: 70px;
		padding-right: 25px;
	}

	.timeline-item::after {
		left: 50px;
	}

	.timeline-item.right {
		left: 0%;
	}
	.icon-container {
		left: 20px;
		transform: translateX(0);
	}
}

.icon-container {
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	background: #007bff;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 20px;
	z-index: 2;
}