@use "../utilities" as *;

/* START: Service CSS */
.service-style-4 {
	padding: 10px;
	border: 1px solid var(--tj-color-border-2);
	position: relative;
	z-index: 2;
	.thumb {
		height: 300px;
		overflow: hidden;
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	.service-icon {
		width: 90px;
		height: 90px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-inline-start: 15px;
		margin-top: -45px;
		margin-bottom: 0;
		border-radius: 50%;
		background-color: var(--tj-color-common-white);
		position: relative;
		z-index: 2;
		text-align: center;
		span {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 70px;
			height: 70px;
			font-size: 50px;
			line-height: 1;
			border-radius: 50%;
			color: var(--tj-color-theme-primary);
			background-color: var(--tj-color-theme-bg);
			i {
				transition: all 0.4s ease-in-out;
			}
		}
	}
	.service-content {
		padding: 20px 20px 20px 20px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		column-gap: 20px;
		row-gap: 30px;
		.title {
			max-width: 260px;
			margin-bottom: 0;
			&:hover a {
				color: var(--tj-color-theme-primary);
			}
		}
	}
	.service-button {
		margin-top: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		font-size: 22px;
		line-height: 1;
		color: var(--tj-color-common-white);
		background-color: var(--tj-color-heading-primary);
		&::before {
			display: none;
		}
		i {
			transform: rotate(-45deg) translateX(0);
			transition: transform 0.3s ease-in-out;
			text-shadow: -40px 0 0;
		}
		&:hover {
			i {
				transform: rotate(-45deg) translateX(40px);
			}
		}
	}
	&:hover {
		.thumb {
			img {
				transform: scale(1.15);
			}
		}
		.service-icon {
			span {
				background-color: var(--tj-color-theme-primary);
				color: var(--tj-color-common-white);
			}
			i {
				transform: rotateY(360deg);
			}
		}
	}
}