.timeline {
	position: relative;
	padding: 10px;
	margin: 0 auto;
	overflow: hidden;
	color: #ffffff;
	width: 65%;
}

.timeline-row .timeline-time {
	position: absolute;
	right: 50%;
	top: 31px;
	text-align: right;
	margin-right: 20px;
	color: #000000;
	font-size: 1.5rem;
}

.timeline-row .timeline-time small {
	display: block;
	font-size: 0.8rem;
	color: #8796af;
}

.timeline-row .timeline-content {
	position: relative;
	padding: 20px 30px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.timeline-row .timeline-content h4 {
	margin: 0 0 20px 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	line-height: 150%;
	font-size: 24px;
}

.timeline-row .timeline-content p {
	margin-bottom: 30px;
	line-height: 150%;
}

.timeline-row .timeline-content i {
	font-size: 2rem;
	color: #ffffff;
	line-height: 100%;
	padding: 10px;
	border: 2px solid #ffffff;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	margin-bottom: 10px;
	display: inline-block;
}

.timeline-row .timeline-content .thumbs {
	margin-bottom: 20px;
}

.timeline-row .timeline-content .thumbs img {
	margin-bottom: 10px;
}

.timeline-row:nth-child(even) .timeline-content {
	background-color: #ff5000;
	/* Fallback Color */
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#fc6d4c),
		to(#ff5000)
	);
	/* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(right, #cbeeff, #89d2f5);
	/* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image: -moz-linear-gradient(top, #fc6d4c, #ff5000);
	/* FF3.6 */
	background-image: -ms-linear-gradient(top, #fc6d4c, #ff5000);
	/* IE10 */
	background-image: -o-linear-gradient(top, #fc6d4c, #ff5000);
	/* Opera 11.10+ */
	background-image: linear-gradient(top, #fc6d4c, #ff5000);

	text-align: left;
	color: #000000 !important;
}

.timeline-row:nth-child(even) .timeline-content:after {
	left: -39px;
	border-right: 18px solid #89d2f5;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}

.timeline-row:nth-child(even) .timeline-content:before {
	left: -50px;
	right: initial;
}

.timeline-row:nth-child(odd) .timeline-content {
	background-color: #5a99ee;
	/* Fallback Color */
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#1379bb),
		to(#5a99ee)
	);
	/* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(left, #cbeeff, #89d2f5);
	/* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image: -moz-linear-gradient(top, #1379bb, #5a99ee);
	/* FF3.6 */
	background-image: -ms-linear-gradient(top, #1379bb, #5a99ee);
	/* IE10 */
	background-image: -o-linear-gradient(top, #1379bb, #5a99ee);
	/* Opera 11.10+ */
	background-image: linear-gradient(top, #1379bb, #5a99ee);

	margin-left: 0;
	text-align: left;
	color: #000000 !important;
}
/* .timeline-row:nth-child(odd) .timeline-content {
				-webkit-linear-gradient(     left,     #cbeeff,     #61c5e0    )
    background-color: #5a99ee;
    background-image: -webkit-gradient( linear, left top, left bottom, from(#1379bb), to(#5a99ee) );
    background-image: -webkit-linear-gradient( left, #cbeeff, #89d2f5 ); */
.timeline-row:nth-child(odd) .timeline-content:after {
	right: -39px;
	border-left: 18px solid #89d2f5;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}

@media (max-width: 767px) {
	.timeline {
		padding: 15px 10px;
	}
	.timeline:after {
		left: 28px;
	}
	.timeline .timeline-row {
		padding-left: 0;
		margin-bottom: 16px;
	}
	.timeline .timeline-row .timeline-time {
		position: relative;
		right: auto;
		top: 0;
		text-align: left;
		margin: 0 0 6px 56px;
	}
	.timeline .timeline-row .timeline-time strong {
		display: inline-block;
		margin-right: 10px;
	}
	.timeline .timeline-row .timeline-icon {
		top: 52px;
		left: -2px;
		margin-left: 0;
	}
	.timeline .timeline-row .timeline-content {
		padding: 15px;
		margin-left: 5px;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
		position: relative;
	}
	.timeline .timeline-row .timeline-content:after {
		right: auto;
		left: -39px;
		top: 32px;
	}
	.timeline .timeline-row:nth-child(odd) {
		padding-right: 0;
	}
	.timeline .timeline-row:nth-child(odd) .timeline-time {
		position: relative;
		right: auto;
		left: auto;
		top: 0;
		text-align: left;
		margin: 0 0 6px 56px;
	}
	.timeline .timeline-row:nth-child(odd) .timeline-content {
		margin-right: 0;
		margin-left: 5px;
	}
	.timeline .timeline-row:nth-child(odd) .timeline-content:after {
		right: auto;
		left: -39px;
		top: 32px;
		border-right: 18px solid #5a99ee;
		border-left: inherit;
	}
	.timeline.animated .timeline-row:nth-child(odd) .timeline-content {
		left: 20px;
	}
	.timeline.animated .timeline-row.active:nth-child(odd) .timeline-content {
		left: 0;
	}
}
.timeline-wrraper {
	width: auto;
	max-height: 430px;
	height: auto;
}
.timeline-row {
	opacity: 0;
	transform: translateX(-20px);
	transition: opacity 1.5s, transform 1.5s;
	margin-bottom: 25px;
}

.timeline-row:nth-child(even) {
	transform: translateX(20px);
}

.timeline-row.fade-in {
	opacity: 1;
	transform: translateX(0);
}

/* Media query for mobile devices */
@media (max-width: 767px) {
	.timeline,
	.timeline-row {
		display: block;
		width: auto;
		margin: 0;
		padding: 0;
		border: none;
		position: static;
		transform: none;
		content: none;
	}
	.timeline:after {
		display: none;
	}
	.timeline-row {
		margin-bottom: 15px;
		transform: none; /* Reset the transform for stacking */
	}
	.timeline-row .timeline-content:before {
		display: none;
	}
	.timeline .timeline-row .timeline-content:after {
		display: none;
	}
	.timeline-row .timeline-content h4 {
		font-size: 19px;
	}
}
.timeline-row:after {
	content: "";
	position: absolute;
	bottom: -15;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 15px 0; /* Adjust the height here */
	border-color: #fa8900 transparent transparent transparent; /* Adjust color as needed */
}