$colors: #333333, #df6c4f, #49a942, #00a78e, #59dbff;
@use "mixins/mixins-master" as *;
@use "mixins/flex" as *;
@use "variables" as *;
.thim-sc-steps {
	position: relative;
	z-index: 1;
	padding-top: 20px;
	.sc-title {
		font-size: 36px;
		font-weight: 500;
		// letter-spacing: 0.7px;
		text-align: right;
		line-height: normal;
		margin-bottom: 60px;
	}
	&.sc-title-white .sc-title {
		color: white;
	}
	.steps-wrapper {
		position: relative;
		bottom: -17px;
		@include clearfix();
		.steps {
			@include clearfix();
			.nav {
				margin-left: 0;
				justify-content: flex-end;
				.nav-item {
					position: relative;
					margin-right: 40px;
					$index: 1;
					& {
						@for $i from 1 through 20 {
							&:nth-child(#{$i}) {
								@if ($index > length($colors)) {
									$index: 1;
								}
								.nav-link {
									background: nth($colors, $index);
								}
								$index: $index + 1;
							}
						}
					}

					&:last-child {
						margin-right: 0;
						&:after {
							display: none;
						}
					}
					&:after {
						position: absolute;
						width: 30px;
						height: 8px;
						background-image: radial-gradient(circle 5px, rgba(255, 255, 255, 0.7) 12%, transparent 16%);
						background-size: 4px 7px;
						content: "";
						left: 67px;
						top: 30px;
						border-bottom: none;
					}
					.nav-link {
						width: 60px;
						height: 60px;
						background-color: #df6c4f;
						// box-shadow: 12.9px 15.3px 18px 0 rgba(0, 0, 0, 0.08);
						font-size: 20px;
						font-weight: 500;
						// letter-spacing: 0.4px;
						line-height: 1.5;
						color: #fff;
						text-transform: uppercase;
						padding: 0;
						justify-content: center;
						flex-direction: column;
						text-align: center;
						@include rounded(50%);
						@include flexbox();
						span {
							display: block;
							font-size: 12px;
							// letter-spacing: 0.2px;
							font-weight: 400;
							line-height: 1.25;
						}
						.step-icon {
							font-size: 38px;
							line-height: 32px;
						}

						&:hover {
							box-shadow: 0px 4px 30px 0px #1c1c1b33;
						}
						&.active {
							background-color: #fff !important;
							box-shadow: 0px 4px 30px 0px #1c1c1b33;
						}
						&.show {
							display: inline-flex !important;
						}
					}
					&:hover {
						.nav-link {
							box-shadow: 0px 4px 30px 0px #1c1c1b33;
						}
					}
					&.active {
						.nav-link {
							background-color: #fff !important;
							box-shadow: 0px 4px 30px 0px #1c1c1b33;
						}
					}
				}
			}
			.tab-content {
				padding-top: 60px;
				text-align: right;
				max-width: 550px;
				font-size: 18px;
				font-weight: 200;
				line-height: 1.56;
				clear: both;
				margin: 0;
				margin-left: auto;
				.tab-title {
					font-size: 24px;
					line-height: 34px;
					font-weight: 500;
					margin-bottom: 16px;
				}
				.description {
					font-size: 16px;
					font-weight: 400;
					line-height: 1.667;
					margin: 0;
				}
				.readmore {
					color: #fff;
					margin-top: 30px;
					box-shadow: 12.9px 15.3px 18px 0 rgba(0, 0, 0, 0.08);
					font-size: 16px;
					line-height: 24px;
					// letter-spacing: 0.3px;
					text-align: left;
					@include rounded(40px);
					text-transform: uppercase;
					padding: 12px 40px;
					display: inline-block;
					font-weight: 500;
					&:hover {
						color: #fff;
					}
				}
			}
		}
	}

	.media-wrapper {
		margin-right: -150px;
		margin-left: 55px;
		margin-bottom: -90px;
	}

	.advance-overlay {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: -1;
		.svg-clip-path {
			position: absolute;
		}
	}

	&.layout-1 {
		.steps-wrapper .steps .nav .nav-item .nav-link span {
			margin-top: -1px;
			line-height: normal;
		}
		&.custom-style {
			.steps-wrapper .steps .nav .nav-item .nav-link span {
				margin-top: 6px;
				margin-bottom: -2px;
			}
		}
	}

	&.layout-2 {
		.media-box {
			order: -1;
		}

		.sc-title {
			text-align: left;
		}

		.steps-wrapper {
			bottom: auto;
			.steps {
				margin-top: 37px;
				float: left;
				.nav {
					margin-left: 0;
					justify-content: flex-start;
					transform: translate(0, -15px);
					.nav-item {
						position: relative;
						&:after {
							display: none;
						}
						@for $i from 1 through 20 {
							&:nth-child(#{$i + 1}) {
								bottom: 20px * $i;
							}
						}
					}
				}
				.tab-content {
					text-align: left;
				}
			}
		}

		.media-wrapper {
			margin-left: 0;
			margin-right: 0;
			margin-top: 49px;
		}

		.advance-overlay {
			top: 0;
		}
	}

	&.layout-3 {
		background: #f4f4f4 url("assets/images/sc-step-bg-2.png") top center repeat-x;
		padding-top: 100px;
		padding-bottom: 100px;
		.heading {
			margin-bottom: 100px;
		}
		.steps-wrapper {
			bottom: 0;
			.sc-title {
				margin-bottom: 58px;
			}
			.steps {
				float: none;
				.nav {
					justify-content: center;
					.nav-item {
						margin-right: 40px;
						text-align: center;
						width: 150px;
						cursor: pointer;
						.nav-link {
							display: inline-flex;
						}
						.tab-title {
							font-size: 16px;
							line-height: 26px;
							margin-top: 16px;
							padding: 0 10px;
							font-weight: 400;
							color: $thim_font_body_color;
						}
						&:after {
							width: 100px;
							left: 119px;
							background-image: radial-gradient(
								circle 5px,
								rgba(180, 180, 180, 0.7) 12%,
								transparent 16%
							);
							background-size: 3px 7px;
							height: 8px;
							border-bottom: none;
						}
					}
				}
				.tab-content {
					text-align: left;
					max-width: 560px;
					padding-top: 60px;
				}
			}
		}

		.media-wrapper {
			margin-right: 0;
			margin-left: -160px;
			margin-bottom: 0;
		}

		.sc-title {
			text-align: center;
			max-width: 500px;
			margin: auto;
			display: block;
			font-size: 36px;
			font-weight: 500;
			line-height: 1.25;
		}

		.background-overlay {
			height: 346px;
			position: absolute;
			bottom: 0;
			z-index: -1;
			left: 0;
			right: 0;
			background-position: center center;
			background-attachment: fixed;
			background-size: cover;
			@media (max-width: 1500px) {
				height: 325px;
			}

			&:before {
				content: "";
				background: #000;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				display: block;
				z-index: 2;
				height: 206px;
				@include opacity(0.7);
			}
			&:after {
				content: "";
				background: #fff;
				position: absolute;
				height: 140px;
				left: 0;
				right: 0;
				bottom: 0;
			}
		}
		.thim-sc-steps {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
	}

	&.layout-4 {
		.steps-wrapper .steps .tab-content {
			padding-top: 40px;

			// .readmore {
			// 	height: 35px;
			// 	line-height: 35px;
			// 	padding: 0 32px;
			// 	@include rounded(30px);
			// 	font-size: 14px;
			// }
		}
		.sc-steps-wrapper {
			background-attachment: fixed;
			background-size: cover;
			background-position: center center;
			.inner-steps-wrapper {
				padding: 100px 0 65px;
				background: rgba(0, 0, 0, 0.5);
				// background-image: url("assets/images/sc-step-bg-2.png");
				// background-position: top center;
				// background-repeat: no-repeat;
				// background-size: cover;
				.content-box {
					.tab-title,
					.sc-title {
						color: #fff;
					}
					.sc-title {
						margin-bottom: 40px;
					}
					.tab-title {
						margin-bottom: 16px;
					}
					.description {
						color: #e2e0db;
						max-width: 450px;
					}
				}
				.media-box {
					.player-wrapper {
						margin-top: 51px;
						margin-left: 51px;
						background: url("assets/images/sc-step-mockup-mac.png") center center no-repeat;
						width: 580px;
						height: 545px;
						.player-inner {
							height: 364px;
							padding: 23px 24px;
							iframe {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}

			.steps-wrapper .steps .nav .nav-item:after {
				background-image: radial-gradient(circle 5px, rgba(180, 180, 180, 0.7) 12%, transparent 16%);
			}
		}
		&.sc-step-one-title {
			.sc-steps-wrapper .inner-steps-wrapper .media-box .player-wrapper {
				margin-top: 24px;
			}
		}
	}

	&.has-bg {
		.steps-wrapper {
			.steps {
				.tab-content {
					.tab-title {
						color: #fff;
					}
					.description {
						color: #fffefc;
					}
					.readmore {
						background-color: #fff;
						&:hover {
							color: #fff;
						}
					}
				}
			}
		}
	}
	&.custom-style {
		padding-top: 95px;
		padding-bottom: 200px;
		.content-box {
			.steps-wrapper {
				margin-right: 10px;
				margin-top: 50px;
				.sc-title {
					font-size: 36px;
					font-weight: 500;
					// letter-spacing: 0.8px;
					text-align: right;
					margin-bottom: 16px;
					max-width: unset;
					float: unset;
				}

				.sub-title {
					text-align: right;
					font-size: 16px;
					font-weight: 400;
					line-height: 1.63;
					letter-spacing: 0.3px;
					position: relative;
					&:after {
						content: "";
						width: 50px;
						height: 1px;
						border-top: 1px solid #e0e0e0;
						position: absolute;
						right: 0;
						bottom: -10px;
					}
				}
				.steps {
					margin-top: 60px;
					.nav {
						.nav-item {
							.nav-link {
								background-color: transparent;
								color: #ccc;
								@include box-shadow(none);
								&.active {
									color: #fff;
									@include box-shadow(4.5px 5.4px 10px 0 rgba(0, 0, 0, 0.06));
								}
							}
							&:after {
								content: "......................................................";
								color: #ccc;
								background-image: none;
								overflow: hidden;
								height: auto;
								top: 15px;
							}
						}
					}

					.tab-content {
						font-size: 16px;
						line-height: 1.75;
						letter-spacing: 0.3px;
						text-align: right;
						padding-top: 60px;
						font-weight: 400;
						max-width: 490px;
					}
				}
			}
		}
		.media-box {
			display: table-cell;
			.media-wrapper {
				margin-left: 25px;
			}
		}
	}
}

.overflow-visible {
	overflow: visible !important;
}

article.sidebar-right {
	.thim-sc-steps {
		&.layout-4 {
			margin-right: 90px;
			.sc-steps-wrapper .inner-steps-wrapper .media-box .player-wrapper {
				margin-left: 10px;
			}
		}
	}
}