@use "mixins/mixins-master" as *;
@use "mixins/flex" as *;
@use "variables" as *;
.thim-sc-text-box {
	.btn {
		&:hover {
			cursor: pointer;
		}

		&:after {
			content: "\f125";
			font-family: ionicons;
			font-size: 14px;
			line-height: 1;
			margin-left: 13px;
		}
	}

	&.left {
		.title-1 {
			// font-family: TimesNewRomanPS-MT;
			font-size: 36px;
			font-weight: bold;
			font-style: italic;
			line-height: 1.22;
			letter-spacing: 0.7px;
			margin-top: 152px;
		}
		.title-2 {
			margin-top: 15px;
			font-size: 16px;
			font-weight: 400;
			line-height: 1.2;
			letter-spacing: 0.4px;
		}
		.btn {
			height: 39px;
			line-height: 39px;
			padding: 0 36px;
			color: #fff;

			margin-top: 56px;
			@include rounded(30px);
			.text {
				font-size: 16px;
				letter-spacing: 0.3px;
				text-transform: uppercase;
			}
		}
	}
	&.center {
		padding-bottom: 130px;
		text-align: center;
		.title-1 {
			padding-bottom: 16px;
			font-size: 16px;
			font-weight: 500;
			line-height: 24px;
			color: $thim_font_body_color;
		}
		.title-2 {
			font-size: 36px;
			font-weight: 500;
			color: $thim_font_title_color;
			max-width: 754px;
			margin: auto;
			line-height: normal;
		}
		.btn {
			margin-top: 48px;
			line-height: 56px;
			padding: 0 45px;
			height: 56px;
			background-color: #ffffff;
			@include rounded(30px);
			@include box-shadow(none);
			.text {
				font-size: 16px;
				line-height: 1.5;
				letter-spacing: 0.3px;
				text-transform: uppercase;
			}
		}
		.btn:hover {
			.text {
				color: #ffffff;
			}
		}
	}
	&.style-3 {
		background-color: #ffffff;
		border: solid 1px $border-color;
		padding: 58px 94px 60px;
		text-align: center;

		margin-left: 2px;
		margin-right: 2px;
		@include transition();
		@include rounded(5px);
		&:hover {
			border-color: #fff;
			@include box-shadow(12.9px 15.3px 18px 0 rgba(0, 0, 0, 0.08));
		}
		.title-1 {
			font-size: 24px;
			font-weight: 500;
			line-height: 0.83;
			text-align: center;
			&:after {
				content: "";
				width: 50px;
				height: 1px;
				position: relative;
				display: block;
				left: 0;
				right: 0;
				margin: 16px auto 30px;
			}
		}

		.title-2 {
			// font-size: 16px;
			// font-weight: 300;
			// line-height: 1.56;
			text-align: center;
			margin: 30px 0;
		}

		.btn {
			border: 1px solid;

			padding: 0 35px;
			height: 48px;
			line-height: 48px;
			text-transform: uppercase;
			font-weight: 500;
			font-size: 16px;
			// letter-spacing: 0.3px;
			outline: none;
			@include box-shadow(none);
			@include rounded(30px);
			&:hover {
				color: #fff;
			}

			&:after {
				content: "\e919";
				font-family: Ionicons;
				margin-left: 8px;
				font-size: 22px;
				line-height: 22px;
				position: relative;
				top: 2px;
			}
		}
	}
	&.style-4 {
		.title-1 {
			font-size: 44px;
			line-height: 1.25;
			text-transform: uppercase;
			font-weight: 500;
			margin-bottom: 16px;
		}

		.title-2 {
			font-size: 16px;
			line-height: 1.5;
			font-weight: 400;
			margin-bottom: 30px;
			color: $thim_font_body_color;
		}

		.btn {
			border: 1px solid;
			border-radius: 30px;
			font-size: 16px;
			line-height: 24px;
			font-weight: 500;
			text-transform: uppercase;
			padding: 0 45px;
			height: 48px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			text-align: center;
		}
	}
	&.size-small {
		.title-1 {
			font-size: 15px;
			font-weight: 400;
			line-height: 25px;
			color: black;
			margin-bottom: 20px;
		}

		.btn {
			height: 48px;
			font-size: 16px;
			font-weight: 500;
			line-height: 48px;
			padding: 0 40px;
			background-color: transparent;
			&:hover {
				color: #fff;
			}
		}
		&.text-home-6 {
			.title-1 {
				font-size: 36px;
				font-weight: 500;
				line-height: normal;
				text-align: left;
				color: #ffffff;
				text-transform: capitalize;
				margin-bottom: 16px;
			}

			.title-2 {
				font-size: 16px;
				font-weight: 400;
				font-style: normal;
				font-stretch: normal;
				line-height: 1.5;
				letter-spacing: 0.3px;
				text-align: left;
				color: #e2e0db;
				margin-bottom: 60px;
			}
		}
	}
}

.thim-background-overlay {
	.thim-sc-text-box {
		&.left {
			.title-1 {
				color: #ffffff;
			}
			.title-2 {
				color: #ffffff;
			}
		}
		&.style-4 {
			.title-1 {
				color: #fff;
			}

			.title-2 {
				color: #e2e0db;
			}

			.btn {
				color: $thim_body_primary_color;
				background-color: white;
				border-color: $thim_body_primary_color;
				&:hover {
					color: white;
					background-color: $thim_body_primary_color;
					border-color: $thim_body_primary_color;
				}
			}
		}
	}
}