.tm-box-icon {
	@extend %clearfix;
	position: relative;

	.icon {
		@extend %transit;
		line-height: 1;
	}

	.content-wrap, .heading {
		@extend %transit;
	}

	.image {
		margin-bottom: 30px;

		img {
			width: 100%;
		}
	}

	.overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.content-wrap {
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.tm-svg {
		line-height: 0;
		display: inline-block;

		* {
			stroke: currentColor;
		}
	}

	.heading {
		word-wrap: break-word;
		margin-bottom: 0;
	}

	.btn {
		@extend %transit;
		display: inline-block;
		margin-top: 46px;
		font-size: 14px;
		font-weight: 500;

		.button-icon {
			margin-left: 2px;

			&:before {
				@extend %FontAwesomeRegular;
				content: '\f178';
			}
		}
	}

	&.style-01 {
		&:hover {
			.content-wrap {
				transform: translateY(-5px);
				border-color: #fff;
				box-shadow: 0 0 40px rgba(51, 51, 51, .1);
			}
		}

		.content-wrap {
			padding: 36px 10px 26px;
			border-radius: 5px;
			background: #fff;
			border: 2px solid #eee;
		}

		.icon {
			font-size: 60px;
			margin-bottom: 29px;
		}

		.tm-svg,
		svg {
			width: 60px;
			height: 60px;
		}

		.heading {
			font-size: 24px;
			font-weight: 500;
			line-height: 1.25;
			margin-bottom: 12px;
		}

		.btn {
			margin-top: 31px;
		}
	}

	&.style-02 {
		&:hover {
			.content-wrap {
				transform: translateY(-5px);
				background: #fff;
				box-shadow: 0 0 40px rgba(51, 51, 51, .1);
			}
		}

		.content-wrap {
			padding: 30px 15px;
			border-radius: 5px;
		}

		.main-content {
			display: flex;
		}

		.icon {
			flex-shrink: 0;
			font-size: 48px;
			min-width: 80px;
			margin-right: 10px;
			color: #333;
		}

		.tm-svg,
		svg {
			width: 48px;
			height: 48px;
		}

		.content {
			flex-grow: 1;
		}

		.heading {
			font-size: 24px;
			font-weight: 500;
			line-height: 1.25;
			margin-bottom: 12px;
		}

		.btn {
			margin-top: 15px;
		}
	}

	&.style-03 {
		&:hover {
			.content-wrap {
				transform: translateY(-5px);
				background: #fff;
				box-shadow: 0 0 40px rgba(51, 51, 51, .1);
			}
		}

		.content-wrap {
			padding: 30px;
			border-radius: 5px;
		}

		.content-header {
			display: flex;
			align-items: center;
			margin-bottom: 16px;
		}

		.icon {
			flex-shrink: 0;
			font-size: 48px;
			min-width: 60px;
			margin-right: 10px;
			color: #333;
		}

		.tm-svg,
		svg {
			width: 48px;
			height: 48px;
		}

		.content {
			flex-grow: 1;
		}

		.heading {
			font-size: 24px;
			line-height: 1.25;
			margin-bottom: 0;
		}

		.btn {
			margin-top: 15px;
		}
	}

	&.style-04 {
		.icon {
			font-size: 40px;
			margin-right: 10px;
			flex-shrink: 0;
			min-width: 54px;
		}

		.tm-svg,
		svg {
			width: 40px;
			height: 40px;
		}

		.content {
			display: flex;
			align-items: center;
		}

		.heading {
			font-size: 15px;
			font-weight: 500;
			text-transform: uppercase;
			letter-spacing: 2px;
			line-height: 1.78;
			margin-bottom: 13px;
		}

		.text {
			font-size: 34px;
			font-weight: 700;
			line-height: 1.17;
		}

		.btn {
			margin-top: 31px;
		}
	}

	&.style-05 {
		padding: 19px 24px 30px;
		border-radius: 5px;
		background: #edf2fe;

		.sub-heading {
			font-size: 15px;
			font-weight: 500;
			color: #4e84fa;
			margin-bottom: 7px;
			flex-shrink: 0;
		}

		.heading {
			font-size: 24px;
			font-weight: 700;
			line-height: 1.25;
			margin-bottom: 0;
			flex-grow: 1;
		}

		.content {
			display: flex;
			flex-direction: column;
			height: 100%;
		}

		.icon {
			position: absolute;
			top: 4px;
			right: -10px;
			font-size: 48px;
			margin: 0;
			flex-shrink: 0;
			color: #b9cefd;
			line-height: 1;
			z-index: -1;
		}

		.tm-svg,
		svg {
			width: 48px;
			height: 48px;
		}

		.text {
			margin-top: 10px;
			flex-shrink: 0;
		}
	}

	&.style-06 {
		&:hover {
			.content-wrap {
				background-color: #002fa6 !important;
			}

			.heading {
				color: #ffffff !important;
			}

			.text {
				color: #ffffff !important;
			}

			.btn {
				color: #ffffff !important;
			}

			.tm-svg {
				color: #ffffff !important;
			}

			.image-hover {
				opacity: 1;
			}

			.image {
				opacity: 0;
			}

		}

		.content-wrap {
			padding: 50px 35px;
			border-radius: 5px;
			background: #ffffff;
		}

		.icon {
			font-size: 60px;
			margin-bottom: 50px;
		}

		.tm-svg,
		svg {
			width: 90px;
			height: 90px;
		}

		.heading {
			font-size: 24px;
			font-weight: 500;
			color: #333333;
			margin-bottom: 12px;
			margin-top: 30px;
		}

		.text {
			font-size: 15px;
			font-weight: 400;
			line-height: 1.73;
			color: #696969;
		}

		.btn {
			margin-top: 35px;
			font-size: 14px;
			font-weight: 500;
			line-height: 1.71;
			color: #086ad8;
		}

		.image-wrap {
			position: relative;
			height: 100px;
		}

		.image,
		.image-hover {
			position: absolute;
			top: 0;
			left: 0;
		}

		.image {
			z-index: 1;
		}

		.image-hover {
			opacity: 0;
		}
	}

}

@include media-breakpoint-down(lg) {
	.tm-box-icon {
		&.style-04 {
			.text {
				font-size: 30px;
			}
		}
	}
}

@include media-breakpoint-down(md) {
	.tm-box-icon {
		&.style-04 {
			.text {
				font-size: 26px;
			}
		}
	}
}

@media all and (max-width: 360px) {
	.tm-box-icon {
		&.style-04 {
			.text {
				font-size: 20px;
			}
		}
	}
}