@charset "UTF-8";
/* CSS Document */

.animated-steps {
	padding: var(--widget-padding);
	text-align: center;
}

.animated-steps .text-box h5 {
	font-size: 22px;
	line-height: 32px;
	font-weight: 300;
	font-style: italic;
	color: var(--shd-mid);
}

.animated-steps .progress-bar-wrap {
	background-color: var(--act-primary-light);
	width: 100%;
	height: 15px;
	margin-top: 70px;
	border-radius: var(--rounded);
}

.animated-steps .progress-bar {
	background-color: var(--act-primary);
	height: 15px;
	border-radius: var(--rounded);
}

.animated-steps .steps-grid {
	gap: 20px;
	padding-bottom: 50px;
	margin-top: -31px;
	align-items: start;
}

.animated-steps .steps-grid .step-item {
	justify-items: center;
}

.animated-steps .steps-grid .content {
	justify-items: center;
	gap: 5px;
}

.animated-steps .steps-grid .step-item svg {
	color: var(--act-primary-light);
	font-size: 50px;
	transition: color 0.3s;
}

.animated-steps .steps-grid .step-item .indicator {
	background-color: var(--act-primary-light);
	padding: 10px;
	border-radius: var(--rounded);
	margin-bottom: 30px;
	transition: background-color 0.1s;
}

.animated-steps .steps-grid .step-item .indicator svg {
	background-color: var(--act-primary-light);
	color: var(--act-primary-light);
	width: 15px;
	height: 15px;
	padding: 5px;
	border: 1px solid var(--white);
	border-radius: var(--rounded);
	transition: background-color 0.1s;
}

.animated-steps .steps-grid .step-item h4 {
	color: var(--act-primary-light);
	transition: color 0.3s;
}

.animated-steps .steps-grid .step-item .text {
	opacity: 0;
	transition: opacity 0.3s;
}

.animated-steps .steps-grid .step-item.active svg {
	color: var(--act-alt);
	transition: color 0.3s;
}

.animated-steps .steps-grid .step-item.active .indicator {
	background-color: var(--act-primary);
	transition: background-color 0.1s;
}

.animated-steps .steps-grid .step-item.active .indicator svg {
	background-color: var(--act-primary);
	color: var(--white);
	transition: background-color 0.1s;
}

.animated-steps .steps-grid .step-item.active h4 {
	color: var(--act-primary);
	transition: color 0.3s;
}

.animated-steps .steps-grid .step-item.active .text {
	opacity: 1;
	transition: opacity 0.3s;
}


@media screen and (max-width: 1180px) and (orientation: portrait),
screen and (max-width: 1024px){ /* original breakpoint 1024px */
	
	.animated-steps .animation {
		grid-template-columns: auto 1fr;
	}
	
	.animated-steps .progress-bar-wrap {
		width: 15px;
		height: 100%;
		margin-top: 0;
		margin-right: -70px;
	}
	
	.animated-steps .progress-bar {
		width: 15px;
	}
	
	.animated-steps .steps-grid {
		margin-top: 0;
		margin-left: -16px;
		flex-wrap: wrap;
		align-items: center;
	}
	
	.animated-steps .step-item {
		grid-template-columns: auto 1fr;
		align-items: center;
		width: 100%!important;
	}
}

@media screen and (max-width: 768px) {
	
}