.wcf--timeline .thumb {
	line-height: 0;
}

.wcf--timeline .timeline-item {
	display: flex;
	gap: var(--content-gap, 60px);
}

.wcf--timeline .content-wrap {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.wcf--timeline .content-wrap .content {
	flex: 1;
}

.wcf--timeline .step-box {
	position: relative;
}

.wcf--timeline .step-box .icon {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--icon-size, 16px);
	line-height: var(--icon-size, 16px);
	width: calc(var(--icon-size, 25px) + 2 * var(--icon-padding, 1px));
	height: calc(var(--icon-size, 25px) + 2 * var(--icon-padding, 1px));
	border-radius: 100%;
	background-color: #f9b099;
	position: relative;
	z-index: 1;
}

.wcf--timeline .step-box .line {
	width: 2px;
	height: 100%;
	border-left: 1px dashed #f9b099;
	position: absolute;
	top: 0;
	left: calc(50% + 2px);
	transform: translateX(calc(-50% - 2px));
}

.wcf--timeline .indicator {
	--indicator-gap: 20px;
	position: absolute;
	right: 10px;
	height: 1px;
	width: 70px;
	background-color: #000;
	left: calc(100% + var(--indicator-gap));
}

@media (min-width:1023px) {
	.wcf--timeline.style-2 .step-box {
		order: 1;
	}
	
	.wcf--timeline.style-2 .content-wrap {
		width: calc(50% - ( var(--icon-size, 25px) + 2 * var(--icon-padding, 1px) ) / 2 - var(--content-gap, 60px));
	}
	
	.wcf--timeline.style-2 .timeline-item:nth-child(odd) .content-wrap {
		direction: rtl;
	}
	
	.wcf--timeline.style-2 .timeline-item:nth-child(odd) .indicator {
		left: auto;
		right: calc(100% + var(--indicator-gap));
	}
	
	.wcf--timeline.style-2 .timeline-item:nth-child(even) {
		flex-direction: row-reverse;
	}
}

.elementor-widget-wcf--timeline.wcf-image-position-row img {
	width: 500px;
}