@import '../../styles/variable';
@import '../../styles/mixin';
.gkit-info-image-box {

	@include transition;

	.gkit-box-header {
		@include transition;
		position: relative;
		overflow: hidden;

		.box-thumb {
			display: block;

			&>img {

				@include transition;
				width: 100%;
			}
		}

		a {
			display: block;

			@include transition;
		}

		img {
			display: block;

			@include transition;
			backface-visibility: hidden;
		}
	}

	.gkit-box-body {
		padding: 55px 40px;
	}

	.gkit-box-content {
		.gkit-info-box{
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 20px;

			.icon{
				&-left{
					margin-right: 10px;
				}
				&-right{
					margin-left: 10px;
				}
			}

			&-title {
				font-size: 18px;
				font-weight: 700;
				transition: color 0.4s ease, font-size 0.4s ease;
	
			}
			>i {
				font-size: 22px;
				padding-right: 14px;
				position: relative;
				top: 2px;
			}

			.gkit-icon{
				@include transition;
			}
		}
		.gkit-box-style-content {
			transition: color 0.4s ease, font-size 0.4s ease;
		}
	}

	.gkit-box-footer {
		line-height: 1;
		margin-top: 20px;
	}


	&.style-modern {
		overflow: visible;

		.gkit-box-body {
			box-shadow: -1.216px 6.894px 25px 0 rgba(0, 0, 0, 0.07);
			border-radius: 10px;
			background-color: rgba($color: $color-white, $alpha: 0.9);
			padding: 30px 40px;
			position: relative;
			z-index: 2;

			margin: {
				top: -20px;
				left: auto;
				right: auto;
			}
		}
	}

	&.hover-border-bottom {

		.gkit-box-body {
			position: relative;

			&::before {
				position: absolute;
				content: "";
				bottom: -1px;
				left: 0;
				height: 3px;
				width: 100%;
				background-color: $color-primary;
				transition: transform 250ms ease-in;
				transform: scaleX(0);
				transform-origin: 0% 50%;
			}

			&--hover-left {
				&::before {
					transform-origin: right center;
				}
			}

			&--hover-center {
				&::before {
					transform-origin: center center;
				}
			}
		}

		&:hover {
			.gkit-box-body {
				&::before {
					transform: scaleX(1);
					transform-origin: 100% 50%;
				}

				&--hover-left {
					&::before {
						transform-origin: left center;
					}
				}

				&--hover-center {
					&::before {
						transform-origin: center center;
					}
				}
			}
		}
	}

	&.floating-style {

		.gkit-box-body {
			background-color: #fff;
			box-shadow: -1.216px 6.894px 25px 0 rgba(0, 0, 0, 0.07);
			border-radius: 10px;
			width: 100%;
			position: relative;
			padding: 30px 35px;

			@include transition;
			height: 90px;

			margin: {
				left: auto;
				right: auto;
				top: -40px;
			}

			position: relative;

			&::before,
			&::after {
				position: absolute;
				content: "";
				bottom: -10px;
				left: 50%;
				height: 100%;
				transform: translateX(-50%);
				width: 100%;
				z-index: -1;

				@include transition;
				opacity: 0;
				border-radius: 10px;
				background-color: $color-white;
			}

			&::after {
				bottom: -20px;
				width: 100%;
				z-index: -2;
			}

			.gkit-box-content {

				.gkit-box-style-content {
					opacity: 0;
					transition: opacity 0.4s ease;
				}
			}

			.gkit-info-box-title {
				font-size: 18px;
				font-weight: 700;

				>i {
					font-size: 26px;
				}
			}
		}

		.gkit-box-footer {
			opacity: 0;
			transition: opacity 0.4s ease;
		}

		&:hover {

			.gkit-box-body {
				height: 185px;

				&::before,
				&::after {
					opacity: 1;
				}

				.gkit-box-content {

					.gkit-box-style-content {
						opacity: 1;
					}
				}

				.gkit-box-footer {
					opacity: 1;
				}
			}
		}
	}

	&.style-sideline {

		.gkit-box-body {
			padding: {
				left: 0;
				right: 0;
			}
		}
	}

	&.shadow-line {

		.gkit-box-body {
			position: relative;

			&::before,
			&::after {
				position: absolute;
				content: "";
				left: 0;
				bottom: 0;
				height: 100%;
				background-color: $color-white;
				width: 10px;
				box-shadow: -1.216px 6.894px 15px 0 rgba(0, 0, 0, 0.07);
			}

			&::after {
				left: inherit;
				right: 0;
			}
		}
	}

}

.gkit-image-box-body {

	.gkit-image-box.floating-style & {

		&::before,
		&::after {
			box-shadow: -1.216px 6.894px 25px 0 rgba(0, 0, 0, 0.07);
		}
	}

	&-inner {

		.gkit-image-box.style-sideline & {
			padding-left: 40px;
			padding-right: 40px;
			border-left: 3px solid #2575fc;
			transition: border-color 0.3s;
		}
	}
}