.service-item .service-icon{
	margin-bottom: 27px;
}

.service-item .service-icon i{
	width:100px;
	height: 100px;
	background: #097E13FF;
	font-size: 43px;
    border-radius: 50%;
    padding: 25px 30px;
    color: #fff;
    transition: 0.5s;
}

.service-1{
	transition: 0.5s;
	width: 100%;
	position: relative;
	overflow: hidden;
}

.service-1::before{
	content: '';
    position: absolute;
    width: 50%;
    background: #ffc518;
    top: 0%;
    right: -50%;
    height: 100%;
    border-radius: 0 5px 5px 0;
    transition: 0.5s;
}

.service-1::after{
	content: '';
    position: absolute;
    width: 50%;
    background: #fafafa80;
    top: 0%;
    left: -50%;
    height: 100%;
    border-radius: 5px 0 0 5px;
    transition: 0.5s;
}

.service-2{
	transition: 0.5s;
	width: 100%;
	position: relative;
	overflow: hidden;
}

.service-3{
	transition: 0.5s;
	width: 100%;
	position: relative;
	overflow: hidden;
}

.service-4{
	transition: 0.5s;
	width: 100%;
	position: relative;
	overflow: hidden;
}

.service-2::before{
	content: '';
    position: absolute;
    width: 50%;
    background: #0dcaf0;
    top: 0%;
    right: -50%;
    height: 100%;
    border-radius: 0 5px 5px 0;
    transition: 0.5s;
}

.service-2::after{
	content: '';
    position: absolute;
    width: 50%;
    background: #fafafa80;
    top: 0%;
    left: -50%;
    height: 100%;
    border-radius: 5px 0 0 5px;
    transition: 0.5s;
}

.service-3::before{
	content: '';
    position: absolute;
    width: 50%;
    background: #dc3545;
    top: 0%;
    right: -50%;
    height: 100%;
    border-radius: 0 5px 5px 0;
    transition: 0.5s;
}

.service-3::after{
	content: '';
    position: absolute;
    width: 50%;
    background: #fafafa80;
    top: 0%;
    left: -50%;
    height: 100%;
    border-radius: 5px 0 0 5px;
    transition: 0.5s;
}

.service-4::before{
	content: '';
    position: absolute;
    width: 50%;
    background: #198754;
    top: 0%;
    right: -50%;
    height: 100%;
    border-radius: 0 5px 5px 0;
    transition: 0.5s;
}

.service-4::after{
	content: '';
    position: absolute;
    width: 50%;
    background: #fafafa80;
    top: 0%;
    left: -50%;
    height: 100%;
    border-radius: 5px 0 0 5px;
    transition: 0.5s;
}

.service{
/*	background: #E71736FF;*/
}

.service:hover .service-1{
	background: #ffc518;
}

.service:hover .service-2{
	background: #0dcaf0;
}

.service:hover .service-3{
	background: #dc3545;
}

.service:hover .service-4{
	background: #198754;
}

.service:hover .service-1 .service-icon i{
	background: #fff;
	color:#ffc518;
	border:1px solid #ffc518;
	box-shadow: 0px 10px 14px 2px #4f4c4c;
}

.service:hover .service-2 .service-icon i{
	background: #fff;
	color:#0dcaf0;
	border:1px solid #0dcaf0;
	box-shadow: 0px 10px 14px 2px #4f4c4c;
}

.service:hover .service-3 .service-icon i{
	background: #fff;
	color:#dc3545;
	border:1px solid #dc3545;
	box-shadow: 0px 10px 14px 2px #4f4c4c;
}

.service:hover .service-4 .service-icon i{
	background: #fff;
	color:#198754;
	border:1px solid #198754;
	box-shadow: 0px 10px 14px 2px #4f4c4c;
}

.service:hover .btn-outline-warning{
/*	background: #ffc518;*/
	color:#fff;
	border:1px solid #fff;
}

.service:hover .btn-outline-danger{
/*	background: #dc3545;*/
	color:#fff;
	border:1px solid #fff;
}

.service:hover .service-1::before{
	right: 0%;
}

.service:hover .service-1::after{
	left: 0%;
}

.service:hover .btn-outline-info{
/*	background: #ffc518;*/
	color:#fff;
	border:1px solid #fff;
}

.service:hover .btn-outline-success{
/*	background: #198754;*/
	color:#fff;
	border:1px solid #fff;
}

.service:hover .service-2::before{
	right: 0%;
}

.service:hover .service-2::after{
	left: 0%;
}

.service:hover .service-3::before{
	right: 0%;
}

.service:hover .service-3::after{
	left: 0%;
}

.service:hover .service-4::before{
	right: 0%;
}

.service:hover .service-4::after{
	left: 0%;
}

.product-list{
	position: relative;
	width: 100%;
	overflow: hidden;
    box-shadow: 0 8px 24px hsl(0, 0%, 5%, .15);
    border:1px solid #C0C0C0FF;
    border-radius: 5px;
}

.product-overly{
	position: absolute;
    box-shadow: 0 8px 24px hsl(0, 0%, 5%, .15);
    left: 0;
    width: 80%;
    margin-inline: auto;
    border-radius: 5%;
    bottom: -60%;
    right: 0;
    padding: 14px;
    opacity: 0;
    transition: opacity 1s 1s;
}

.product-list:not(:hover){
	animation: show-overflow 2s forwards;
}

.product-list:not(:hover) .product-overly{
	animation: remove-data 1s forwards;
}

.product-list:hover .product-overly{
	animation: show-data 1s forwards;
	opacity: 1;
	transition: opacity .3s;
}

.product-list:hover{
	animation: remove-overflow 2s forwards;
}

@keyframes show-data{
	50%{
		transform: translateY(-110%);
	}
	100%{
		transform: translateY(-70%);
	}
}

@keyframes remove-overflow{
	to{
		overflow: initial;
	}
}

@keyframes remove-data{
	0%{
		transform: translateY(-70%);
	}
	50%{
		transform: translateY(-110%);
	}
	100%{
		transform: translateY(20%);
	}
}

@keyframes show-overflow{
	0%{
		overflow: initial;
		pointer-events: none;
	}
	50%{
		overflow: hidden;
	}
}