.du-timeline {
	position: relative;
	width: 80%;
}

.du-timeline::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(50%);
	transform: translateX(-50%);
	width: 5px;
	height: 100%;
	background-color: #f8f6f2;
}

.du-timeline-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	padding-top: 25px;
	padding-bottom: 25px;
	gap: 60px;
}
@keyframes fadeInTop {
	0% {
		transform: translateY(-200px);
	}
	100% {
		transform: translateY(0);
	}
}
.du-animated {
	opacity: 0;
	transition: opacity 0.7s ease-in-out;
}

.du-animated-visible {
	opacity: 1;
}
.du-animated-line-circle {
	position: absolute;
	width: 36px;
	height: 100%;
	left: calc(50% - 20px);
	display: flex;
	justify-content: center;
	align-items: center;
}
.du-animated-line-circle .du-timeline-circle {
	content: "";
	height: 36px;
	width: 36px;
	position: absolute;
	background: #f6a37e;
	border-radius: 50%;
	border: 8px solid #ffffff;
	z-index: 1;
}
.du-timeline-circle {
	content: "";
	height: 36px;
	width: 36px;
	position: absolute;
	background: #f6a37e;
	left: calc(50% - 18px);
	border-radius: 50%;
	border: 8px solid #ffffff;
	z-index: 1;

	/* animation: fade-in-scale 0.8s ease forwards; */
}
.du-timeline-line {
	content: "";
	height: 100%;
	width: 4px;
	position: absolute;
	background: #f6a37e;
	left: 50%;

	/* animation: grow-height 0.8s ease forwards; */
}
.du-timeline-item {
	@apply w-full sm:;
}

.du-timeline-year {
	flex: 1;
}
.du-timeline-item-left .du-timeline-content {
	text-align: left;
}
.du-timeline-item-right .du-timeline-content {
	text-align: right;
}

.du-timeline-content {
	flex: 1;
}

.du-timeline-img {
	flex: 1;
}
.du-timeline-img img {
	border-radius: 10px;
}
.du-timeline-item-left .du-timeline-img img {
	float: right;
}
.du-timeline-item-right .du-timeline-img {
	float: left;
}