/* Base wrapper (replaces old .page-module/.row/.col layout in a minimal way) */
.vc-timeline {
	width: 100%;
}

.vc-timeline__wrapper {
	position: relative;
	/* Optional spacing similar to typical section padding */
	padding: 0;
}

/* Vertical line */
.vc-timeline__wrapper::after {
	content: "";
	display: block;
	left: 167px;
	top: 15px;
	height: calc(100% - 30px);
	background-color: #c7c7c7;
	position: absolute;
	width: 2px;
}

/* Item layout */
.vc-timeline__item {
	display: flex;
	align-items: flex-start;
}

/* Year column */
.vc-timeline__year {
	width: 196px;
	flex: 0 0 196px;
}

/* Year box */
.vc-timeline__year-value {
	width: 144px;
	height: 40px;
	background-color: #4C7EC4;
	color: #FFF;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 700;
	font-size: 20px;
	position: relative;
}

/* Arrow */
.vc-timeline__year-value::after {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 0 9px 9px;
	border-color: transparent transparent transparent #4C7EC4;
	content: "";
	display: block;
	position: absolute;
	right: -9px;
	top: 50%;
	transform: translate3d(0, -50%, 0);
}

/* Dot */
.vc-timeline__year-value::before {
	width: 10px;
	height: 10px;
	background-color: #C6C6C6;
	border-radius: 50%;
	content: "";
	display: block;
	position: absolute;
	right: -29px;
	top: 50%;
	transform: translate3d(0, -50%, 0);
}

/* Description column */
.vc-timeline__description {
	flex: 1 1 auto;
	min-width: 0;
}

/* Optional: spacing between entries (safe default) */
.vc-timeline__item+.vc-timeline__item {
	margin-top: 16px;
}

/* Responsiveness (replacement for @include sm) */
@media (max-width: 576px) {
	.vc-timeline__year {
		width: 136px;
		flex: 0 0 136px;
	}

	.vc-timeline__wrapper::after {
		left: 103px;
	}

	.vc-timeline__year-value {
		width: 80px;
		height: 30px;
		font-size: 16px;
	}
}