.elx-service-section {

}
@keyframes icon-bounce {
	0%,
	100%,
	20%,
	50%,
	80% {
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
	40% {
		-webkit-transform: translateY(-10px);
		-ms-transform: translateY(-10px);
		transform: translateY(-10px);
	}
	60% {
		-webkit-transform: translateY(-5px);
		-ms-transform: translateY(-5px);
		transform: translateY(-5px);
	}
}
.elx-service-title-text-area {
	.elx-section-title {
		margin-bottom: 45px;
		h2 {
			color: #fff;
		}
	}
	.elx-btn {
		a {
			color: var(--base-color);
			border: 2px solid #fff;
			&:before {
				background-color: #fff;
			}
			&:hover {
				color: #fff;
				border: 2px solid var(--base-color);
			}
		}
	}
}
.elx-service-item-content {
	margin-left: 80px;
}
.elx-service-item-area {
	z-index: 1;
	width: 50%;
	.elx-service-img {
		top: 0;
		left: 0;
		opacity: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		transition: all 500ms ease;
		&:before {
			top: 0;
			left: 0;
			z-index: 1;
			height: 100%;
			width: 100%;
			content: '';
			position: absolute;
			background-color: rgba(8, 64, 90, 0.7);
		}
		img {
			width: 100%;
			height: 100%;
			transition: all 3500ms ease;
		}
	}
	.elx-service-icon {
		z-index: 2;
		position: relative;
		margin-bottom: 25px;
		i {
			line-height: 1;
			font-size: 50px;
			color: var(--base-color);
		}
	}
	.elx-service-text {
		z-index: 2;
		position: relative;
		h3 {
			color: #fff;
			font-size: 22px;
			font-weight: 600;
			margin-bottom: 90px;
		}
		.read_more {
			color: #fff;
			font-weight: 500;
			position: relative;
			i {
				font-size: 20px;
				margin-left: 10px;
				transition: all 500 ease;
				transform: rotate(-45deg);
				transition: all 500ms ease;
			}
			&:before {
				left: 0;
				width: 0%;
				height: 1px;
				content: '';
				bottom: -1px;
				position: absolute;
				background-color: #fff;
				transition: all 500ms ease;
			}
			&:hover {
				&:before {
					width: 100%;
				}
				i {
					transform: rotate(0);
				}
			}
		}
	}
	.elx-service-item {
		margin: 1px;
		padding: 40px 35px 50px 35px;
		background-color: #08405a;
		
	}
	&:hover {
		.elx-service-img {
			opacity: 1;
			img {
				transform: scale(1.5);
			}
		}
		.elx-service-icon {
			animation: icon-bounce .8s ease-out infinite;
		}
	}
}