@use "../utilities" as *;

/**----------------------------------------
START: Service CSS
----------------------------------------*/
.h11-service {
	background-color: var(--tj-color-theme-dark);
	border-radius: 12px;
	position: relative;
	overflow: hidden;
	z-index: 1;
	.sec-heading {
		.sub-title {
			background-color: var(--tj-color-grey-3);
			color: var(--tj-color-common-white);
		}
		.sec-title {
			color: var(--tj-color-common-white);
		}
	}
	&-item {
		height: 450px;
		padding: 0;
		background-color: transparent;
		position: relative;
		.h6-service {
			&-thumb {
				height: 100%;
				img {
					min-height: 450px;
					transform: none;
				}
				&::before {
					content: "";
					position: absolute;
					bottom: -60%;
					left: 0;
					width: 100%;
					height: 235px;
					background-color: var(--tj-color-theme-primary);
					clip-path: polygon(17% 0, 100% 90%, 100% 100%, 0 100%, 0 31.5%);
					z-index: 1;
					transition: all 0.3s ease-in-out;
					@media #{$lg,$sm,$xs} {
						height: 170px;
					}
					@media #{$md,$sm,$xs} {
						bottom: 0;
					}
				}
			}
			&-content {
				position: absolute;
				padding: 30px;
				height: auto;
				bottom: 0;
				left: 0;
				z-index: 2;
				opacity: 0;
				visibility: hidden;
				transition: all 0.35s ease-in-out;
				.title {
					width: calc(100% - 63px);
					color: var(--tj-color-common-white);
					a {
						&:hover {
							color: var(--tj-color-text-body-5);
						}
					}
					@media #{$lg} {
						font-size: 20px;
					}
					@media #{$md,$sm,$xs} {
						max-width: 230px;
					}
				}
				.text-btn {
					.btn-icon {
						width: 52px;
						height: 52px;
						background-color: var(--tj-color-common-white);
						i {
							color: var(--tj-color-theme-dark);
						}
						@media #{$sm,$xs} {
							width: 45px;
							height: 45px;
						}
					}
				}
				@media #{$lg,$sm,$xs} {
					padding: 20px;
				}
				@media #{$md,$sm,$xs} {
					opacity: 1;
					visibility: visible;
					width: 100%;
				}
			}
			&-index {
				color: var(--tj-color-common-white);
			}
			&-title-wrap {
				@media #{$md,$sm,$xs} {
					justify-content: space-between;
				}
			}
		}
		&:hover {
			.h6-service {
				&-thumb {
					&::before {
						bottom: 0;
					}
				}
				&-content {
					opacity: 1;
					visibility: visible;
					transition-delay: 0.25s;
				}
			}
		}
	}
}

/* !END: Service CSS */