/* --------------------------------------
*		ts-ihbox-style-23 (Vertical Step / Timeline Box)
* ---------------------------------------*/
.ts-ihbox-style-23 {
	display: flex;
	align-items: center;
	gap: 40px;
	position: relative;
}
.ts-box-col-wrapper:last-child .ts-ihbox-style-23 {
	padding-bottom: 0;
}
.ts-ihbox-style-23 .ts-ihbox-icon,
.ts-ihbox-style-23 .ts-ihbox-svg {
	position: relative;
	flex-shrink: 0;
}
.ts-ihbox-style-23 .ts-ihbox-icon-wrapper,
.ts-ihbox-style-23 .ts-ihbox-svg-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: 2px solid rgba(var(--tste-labtechco-skincolor-dark-rgb),.15);
	background-color: transparent;
	font-size: 28px;
	line-height: 1;
	color: var(--tste-labtechco-skincolor-dark);
	transition: all 0.3s ease-in-out;
}
.ts-ihbox-style-23 .ts-ihbox-icon-wrapper i::before {
	font-size: 28px;
	color: inherit;
}
.ts-ihbox-style-23 .ts-ihbox-icon-wrapper svg,
.ts-ihbox-style-23 .ts-ihbox-svg-wrapper svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
}
.ts-ihbox-style-23 .ts-ihbox-icon-wrapper.ts-ihbox-icon-type-text {
	font-size: 22px;
	font-weight: 600;
}
.ts-ihbox-style-23 .ts-ihbox-icon-wrapper.ts-ihbox-icon-type-image {
	padding: 0;
	overflow: hidden;
}
.ts-ihbox-style-23 .ts-ihbox-icon-wrapper.ts-ihbox-icon-type-image img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}
.ts-box-col-wrapper:not(:last-child) .ts-ihbox-style-23 .ts-ihbox-icon::after,
.ts-box-col-wrapper:not(:last-child) .ts-ihbox-style-23 .ts-ihbox-svg::after {
    content: '';
    position: absolute;
    top: 77px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 20px;
    background-color: #e2e4ec;
}

/* Content */
.ts-ihbox-style-23 .ts-ihbox-content-wrap {
	flex: 1;
}
.ts-ihbox-style-23 .ts-ihbox-title-inner {
	margin-bottom: 4px;
}
.ts-ihbox-style-23 .ts-ihbox-heading {
    font-size: 22px;
    line-height: 30px;
    font-weight: 500;
	text-transform: none;
	margin: 0;
	transition: color 0.3s ease-in-out;
}
.ts-ihbox-style-23 .ts-ihbox-content {
	margin: 6px 0 0;
	font-size: 16px;
	line-height: 24px;
	color: #6d708a;
}

/* Active / hover state */
.ts-ihbox-style-23.tste-active .ts-ihbox-icon-wrapper,
.ts-ihbox-style-23.tste-active .ts-ihbox-svg-wrapper,
.ts-ihbox-style-23:hover .ts-ihbox-icon-wrapper,
.ts-ihbox-style-23:hover .ts-ihbox-svg-wrapper {
	border-color: var(--tste-labtechco-skincolor);
	color: var(--tste-labtechco-skincolor);
}
.ts-ihbox-style-23.tste-active .ts-ihbox-heading,
.ts-ihbox-style-23:hover .ts-ihbox-heading {
	color: var(--tste-labtechco-skincolor);
}

/* Background color variants */
.tste-elementor-bg-color-blackish .ts-ihbox-style-23 .ts-ihbox-heading,
.tste-elementor-bg-color-secondary .ts-ihbox-style-23 .ts-ihbox-heading,
.tste-elementor-bg-color-globalcolor .ts-ihbox-style-23 .ts-ihbox-heading {
	color: var(--tste-labtechco-skincolor-white);
}
.tste-elementor-bg-color-blackish .ts-ihbox-style-23 .ts-ihbox-content,
.tste-elementor-bg-color-secondary .ts-ihbox-style-23 .ts-ihbox-content,
.tste-elementor-bg-color-globalcolor .ts-ihbox-style-23 .ts-ihbox-content {
	color: rgba(var(--tste-labtechco-skincolor-white-rgb), 0.75);
}
.tste-elementor-bg-color-blackish .ts-ihbox-style-23 .ts-ihbox-icon-wrapper,
.tste-elementor-bg-color-secondary .ts-ihbox-style-23 .ts-ihbox-icon-wrapper,
.tste-elementor-bg-color-globalcolor .ts-ihbox-style-23 .ts-ihbox-icon-wrapper,
.tste-elementor-bg-color-blackish .ts-ihbox-style-23 .ts-ihbox-svg-wrapper,
.tste-elementor-bg-color-secondary .ts-ihbox-style-23 .ts-ihbox-svg-wrapper,
.tste-elementor-bg-color-globalcolor .ts-ihbox-style-23 .ts-ihbox-svg-wrapper {
	border-color: rgba(255, 255, 255, 0.3);
	color: rgba(255, 255, 255, 0.6);
}
.tste-elementor-bg-color-blackish .ts-box-col-wrapper:not(:last-child) .ts-ihbox-style-23 .ts-ihbox-icon::after,
.tste-elementor-bg-color-secondary .ts-box-col-wrapper:not(:last-child) .ts-ihbox-style-23 .ts-ihbox-icon::after,
.tste-elementor-bg-color-globalcolor .ts-box-col-wrapper:not(:last-child) .ts-ihbox-style-23 .ts-ihbox-icon::after {
	background-color: rgba(255, 255, 255, 0.3);
}

/* RTL */
.rtl .ts-ihbox-style-23 {
	flex-direction: row-reverse;
	text-align: right;
}

/* Responsive */
@media (max-width: 767px) {
	.ts-ihbox-style-23 {
		gap: 25px;
		padding-bottom: 0px;
	}
}
@media (max-width:575px) {
	.ts-ihbox-style-23 {
		gap: 20px;
	}
	.ts-ihbox-style-23 .ts-ihbox-heading {
		font-size: 18px;
		line-height: 24px;
	}
	.ts-ihbox-style-23 .ts-ihbox-content {
		font-size: 14px;
		line-height: 21px;
	}
}