@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css");
.timeline .dot {
	height: 25px;
	width: 25px;
}
body{
    overflow-x: hidden;
}
.timeline .icon i {
	padding: 10px;
	font-size: 60px;
	line-height: 1;
}
.timeline .date {
	width: 150px;
	margin-right: -45px;
	margin-top: 24px;
	border-top: 3px solid lightgray;
	text-align: right;
	font-size: 20px;
}
.timeline .card-body {
    background: #ec6428;
    color: white;
}
/*Even*/
.event:nth-child(even) .date {
	margin-left: -45px;
	text-align: left;
}
.event:nth-child(even) .icon i {
	margin-left: 45px;
}
/*Colors*/
.bg-color1 {
	background: #EC6428;
	color: #fff;
}
.txt-color1 {
	border-color: #EC6428 !important;
}
.bg-color2 {
	background:#ec6428;
	color: #fff;
}
.txt-color2 {

    border-color: #ec6428 !important;
}

/*Animation*/
.timeline .detail,
.timeline .icon {
	visibility: hidden;
	opacity: 0;
	transition: all 0.5s ease-in-out;
}

.timeline .event:nth-child(odd) .detail,
.timeline .event:nth-child(even) .icon {
	transform: translate3d(200px, 0, 0);
}

.timeline .event:nth-child(even) .detail,
.timeline .event:nth-child(odd) .icon {
	transform: translate3d(-200px, 0, 0);
}

.timeline .event.in-view .detail,
.timeline .event.in-view .icon {
	transform: none;
	visibility: visible;
	opacity: 1;
}

.timeline .dot {
	animation: scaleAnimation 1s;
}

@keyframes scaleAnimation {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}