@use "mixins/mixins-master" as *;
@use "mixins/flex" as *;
@use "variables" as *;
.thim-courses-block-2 {
	margin-bottom: 45px;
	border-radius: 12px;
	overflow: hidden;

	.no-gutter {
		margin: 0;

		& > [class*="col-"] {
			padding-left: 0;
			padding-right: 0;
		}

		.intro-item {
			.wrapper {
				position: absolute;
				top: 50%;
				padding: 0 30px;
				text-align: center;
				@include translate(0, -50%);
			}
		}
	}

	.intro-item {
		position: relative;
		z-index: 5;
		@include box-shadow(12.9px 15.3px 18px 0 rgba(0, 0, 0, 0.15));

		&:before {
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			// @include scale(1.06, 1.05);
			z-index: -1;
		}

		.title {
			font-size: 36px;
			text-transform: capitalize;
			line-height: 46px;
			margin-bottom: 10px;
			color: #ffffff;
		}

		.description {
			// font-size: 15px;
			color: #fff;
			// line-height: 1.667;
			// font-weight: 400;
			margin-bottom: 30px;
		}

		.view-courses-button {
			display: inline-block;
			font-size: 16px;
			text-transform: uppercase;
			padding: 12px 20px;
			background-color: #fff;
			font-weight: 500;
			@include rounded(30px);
			@include box-shadow(12.9px 15.3px 18px 0 rgba(0, 0, 0, 0.08));
			&:hover {
				@include box-shadow(4.5px 5.4px 10px 0 rgba(0, 0, 0, 0.06));
			}
		}
	}

	.course-item {
		&.hide-label {
			&:before,
			.course-label {
				display: none !important;
				opacity: 0 !important;
			}
		}

		&:hover {
			.content-item {
				.price {
					// .course-origin-price {
					// 	color: #fff;
					// }

					.course-price {
						color: #fff;
						&.free {
							color: #fff !important;
						}
					}
				}
			}

			.featured-img {
				&:before {
					@include opacity(1);
				}

				&:after {
					@include opacity(0);
				}
			}

			&.new-course {
				&:before {
					border-top: 86px solid #df6c4f;
				}
			}
		}

		&.new-course {
			position: relative;

			&:before {
				content: "";
				position: absolute;
				width: 0;
				height: 0;
				top: 0;
				left: 0;
				border-right: 86px solid transparent;
				@include transition(all 0.5s);
				z-index: 4;
			}

			.course-label {
				position: absolute;
				font-size: 18px;
				color: #fff;
				top: 18px;
				left: 10px;
				z-index: 1000;
				@include rotate(-45deg);
				font-weight: 400;
				text-transform: uppercase;
			}
		}

		.featured-img {
			position: relative;
			img {
				width: 100%;
				object-fit: cover;
			}
			&:before,
			&:after {
				content: "";
				display: block;
				position: absolute;
				width: 100%;
				left: 0;
				bottom: 0;
				pointer-events: none;
				@include transition(all 0.5s);
			}

			&:before {
				background: linear-gradient(358.31deg, #000000 7.56%, rgba(0, 0, 0, 0) 98.53%);
				@include opacity(1);
				height: 200px;
			}

			&:after {
				height: calc(100% - 200px);
				z-index: 2;
				background: linear-gradient(
					180deg,
					rgba(0, 200, 255, 0) 1.27%,
					rgba(1, 200, 255, 0.3) 11.03%,
					rgba(2, 147, 188, 0.8) 30.54%,
					rgba(3, 89, 113, 0.95) 50.05%,
					rgba(3, 58, 78, 0.95) 69.56%,
					#011c2d 98.82%
				);
				@include opacity(0);
			}
		}

		.content-item {
			position: absolute;
			bottom: 0;
			z-index: 3;
			width: 100%;
			padding: 0 30px 30px 30px;

			.name {
				line-height: 1.625;
				margin-bottom: 16px;
				text-transform: capitalize;
				display: inline-block;

				a {
					font-size: 16px;
					color: #fff;
				}
				img {
					border-radius: 50%;
					margin-right: 12px;
				}
			}

			.title {
				margin-bottom: 12px;

				a {
					display: block;
					line-height: 1.25;
					font-size: 20px;
					font-weight: 500;
					color: #fff;
				}
			}

			.price {
				display: inline-flex;
				align-items: center;
				&:empty {
					display: none;
				}
				.course-price {
					font-size: 20px;
					font-weight: 500;
					margin-right: 10px;
					color: #fff;
					@include transition(all 0.4s);
				}

				.free {
					color: #3ab500 !important;
					font-size: 20px;
					text-transform: uppercase;
				}

				.course-origin-price {
					// order: 2;
					font-size: 20px;
					line-height: 25px;
					font-weight: 400;
					// filter: brightness(0.9);
					@include transition(all 0.3s);
					text-decoration: line-through;
					color: #ff3b30;
					margin-right: 8px;
				}
			}
		}

		&:hover {
			.featured-img:before {
				@include opacity(0);
				// height: calc(100% - 110px);
			}
			// .content-item .title a {
			// 	color: $thim_body_primary_color;
			// }
			.featured-img:after {
				@include opacity(1);
			}
		}
	}
}