/**
 * How It Works (Sticky Full) Elementor widget.
 *
 * @package Superio Child
 */

.how-it-works-tiles {
	position: relative;
}

.hiw-nav-item .hiw-desc p {
	font-size: 20px;
	font-weight: 400;
	color: #101010;
	line-height: 1.2;
}

.hiw-nav-item.active .hiw-desc p {
	color: #101010;
}

.hiw-nav-item .hiw-title h3 {
	font-size: 32px;
	font-weight: 500;
	color: #101010;
	line-height: 1.2;
	margin: 10px 0 12px 0 !important;
}

.hiw-nav-item.active .hiw-title h3 {
	color: #101010;
}

.hiw-main-header {
	text-align: center;
	margin-bottom: 20px;
	padding-top: 40px;
	width: 100%;
	line-height: 1.2;
}

.hiw-main-header h2 {
	font-size: 52px;
	font-weight: 800;
	color: #101010;
	margin: 0 !important;
	line-height: 1.2;
}

.hiw-main-header p {
	font-size: 24px;
	color: #101010;
	margin-top: 8px;
	font-weight: 500;
	margin-bottom: 0;
	line-height: 1.2;
}

@media (max-width: 1439px) {
	.hiw-nav-item .hiw-desc p {
		font-size: 16px;
	}

	.hiw-nav-item .hiw-title h3 {
		font-size: 24px;
		margin: 10px 0 12px 0 !important;
	}

	.hiw-main-header h2 {
		font-size: 40px;
	}

	.hiw-main-header p {
		font-size: 16px;
	}
}

@media (min-width: 1024px) {
	.hiw-nav-item .hiw-desc p {
		color: #10101035;
	}

	.hiw-nav-item.active .hiw-desc p {
		color: #10101060;
	}

	.hiw-nav-item .hiw-title h3 {
		color: #10101080;
	}

	.hiw-nav-item.active .hiw-title h3 {
		color: #101010;
	}

	.hiw-main-header h2 {
		color: #101010;
	}

	.hiw-main-header p {
		color: #101010;
	}

	.how-it-works-wrapper {
		height: 300vh;
		position: relative;
	}

	.how-it-works-sticky {
		position: sticky;
		top: 0;
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-bottom: 40px;
	}

	.hiw-visual-container {
		flex: 1;
		display: flex;
		width: 100%;
		position: relative;
	}

	.hiw-images {
		position: relative;
		width: 100%;
		max-height: 400px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: min(10vh, 40px) auto;
	}

	.hiw-image-slide {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		transition: opacity 0.5s ease;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.hiw-image-slide.active {
		opacity: 1;
	}

	.hiw-image-slide svg {
		max-width: 100%;
		max-height: 100%;
		height: auto;
		width: auto;
	}

	.hiw-nav-container {
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 20px;
		position: relative;
	}

	.hiw-nav-container .e-con-inner {
		display: flex;
		gap: 20px;
		justify-content: space-between;
		position: relative;
		z-index: 2;
	}

	.hiw-nav-container::before {
		content: '';
		position: absolute;
		top: 69px;
		left: 0;
		right: 0;
		width: 80%;
		margin: auto;
		height: 4px;
		background: #e7e7e7;
		z-index: 0;
	}

	.hiw-nav-item::after {
		content: '';
		position: absolute;
		top: 59px;
		left: 0;
		width: 100%;
		height: 4px;
		background-color: #e7e7e7;
		z-index: 10;
		transform: scaleX(1);
		transition: transform 0.3s ease;
		transform-origin: center;
	}

	.hiw-nav-item.active::after {
		transform: scaleX(1);
		background-color: #3924f8;
	}

	.hiw-nav-container .hiw-progress-fill {
		display: none;
	}

	.hiw-nav-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		cursor: pointer;
		transition: all 0.3s ease;
		opacity: 1;
		position: relative;
		padding: 0 10px;
		gap: 0;
	}

	.hiw-nav-item .elementor-widget-icon .elementor-icon {
		font-size: 24px;
		width: 40px;
		height: 40px;
		line-height: 40px;
		border-radius: 50%;
		padding: 0;
		background-color: #d7d3fe;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
		position: relative;
		z-index: 2;
		margin-bottom: 30px;
	}

	.hiw-nav-item .elementor-widget-icon .elementor-icon i {
		width: 1em;
		height: 1em;
		line-height: 1;
		color: inherit;
		display: block;
		font-size: inherit;
		text-align: center;
	}

	.hiw-nav-item .elementor-widget-icon .elementor-icon svg {
		width: 1em;
		height: 1em;
		display: block;
	}

	.hiw-nav-item.active .elementor-widget-icon .elementor-icon {
		background-color: #3924f8;
		color: #fff;
	}

	.hiw-nav-item.active .elementor-widget-icon .elementor-icon i {
		color: #fff;
	}

	.hiw-nav-item .elementor-heading-title {
		color: #333;
		transition: color 0.3s ease;
		margin-top: 20px;
	}

	.hiw-nav-item.active .elementor-heading-title {
		color: var(--hiw-primary);
	}

	.hiw-nav-item .elementor-widget-text-editor {
		color: #666;
	}
}

@media (max-width: 1023px) {
	.hiw-nav-item {
		display: block !important;
	}

	.hiw-nav-item .hiw-mobile-image {
		max-width: 60vw !important;
		margin: 0 auto;
	}

	.hiw-nav-item .elementor-widget-icon {
		display: none !important;
	}

	.how-it-works-wrapper {
		padding: 40px 0;
	}

	.hiw-visual-container {
		display: none;
	}

	.hiw-nav-container::before,
	.hiw-nav-container .hiw-progress-fill {
		display: none;
	}

	.hiw-nav-container .e-con-inner {
		flex-direction: column;
		gap: 40px;
	}

	.hiw-nav-item .elementor-widget-divider {
		display: none;
	}

	.hiw-nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.how-it-works-tiles::after {
		display: none;
	}
}