/* 10.03 - service page - start
==================================================================================================== */

/* service section - start */
.service-section {
	&.bg-gray {
		background-color: #fcf4f3;
	}
	&.bg-gray-2 {
		background-color: #f7f6f6;
	}

	.deco-image-1 {
		left: 0px;
		top: 120px;
	}
	.deco-image-2 {
		right: 0px;
		bottom: 50px;
	}

	.deco-image-3 {
		right: 40px;
		bottom: -13px;
		max-width: 605px;
	}
	.deco-image-4 {
		left: 45px;
		bottom: 35px;
		max-width: 220px;
	}
}
/* service section - end */

/* service primary - start */
.service-primary {
	margin-top: 60px;
	.item-icon {
		height: 60px;
		display: flex;
		align-items: center;
		margin-bottom: 30px;
		>img {
			margin: auto;
			height: 55px;
			margin-left: 0px;
		}
	}
	.item-title {
		font-size: 20px;
		font-weight: 500;
		margin-bottom: 15px;
	}
	p {
		font-size: 18px;
	}
}
/* service primary - end */

/* service fullimage - start */
.service-fullimage {
	overflow: hidden;
	margin-top: 30px;
	position: relative;
	border-radius: 6px;
	transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	&:hover {
		transform: translateY(-16px);
		box-shadow: 0px 20px 40px 0px rgba(4, 30, 54, 0.25);
	}

	.item-title {
		left: 0px;
		bottom: 40px;
		height: 65px;
		min-width: 270px;
		position: absolute;
		>a {
			width: 100%;
			height: 100%;
			display: block;
			font-size: 18px;
			font-weight: 700;
			line-height: 65px;
			padding: 0px 30px;
			color: $default-black;
			font-family: $heading-font;
			border-top-right-radius: 45px;
			border-bottom-right-radius: 45px;
			background-color: $default-yellow;
		}
	}

	&:hover {
		.item-title {
			>a {
				color: #ffffff;
				background-color: $default-red;
			}
		}
	}
}
/* service fullimage - end */

/* service boxed - start */
.service-boxed {
	color: #ffffff;
	margin-top: 30px;
	overflow: hidden;
	position: relative;
	border-radius: 6px;
	text-align: center;
	padding: 60px 30px;
	transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	&:hover {
		transform: translateY(-16px);
	}
	&.bg-orange {
		background-color: #fd5649;
		&:hover {
			box-shadow: 0px 40px 90px 0px rgba(253, 86, 73, 0.22);
		}
	}
	&.bg-yellow {
		background-color: #ffba0c;
		&:hover {
			box-shadow: 0px 40px 90px 0px rgba(255, 183, 0, 0.22);
		}
	}
	&.bg-pink {
		background-color: #f33eb0;
		&:hover {
			box-shadow: 0px 40px 90px 0px rgba(242, 42, 168, 0.22);
		}
	}
	.item-icon {
		width: 130px;
		height: 120px;
		display: flex;
		align-items: center;
		margin: 0px auto 30px;
		>img {
			margin: auto;
			height: 115px;
		}
	}

	.item-title {
		color: #ffffff;
		font-size: 20px;
		font-weight: 700;
		margin-bottom: 25px;
		font-family: $body-font;
	}
	.details-btn {
		color: #ffffff;
		font-size: 16px;
		font-weight: 700;
		font-family: $body-font;
		i {
			margin-left: 5px;
			transform: translateY(2px);
			transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
		}
		&:hover {
			i {
				transform: translate(6px, 2px);
			}
		}
	}
}
/* service boxed - end */

/* service boxed 2 - start */
.service-boxed-2 {
	margin-top: 30px;
	overflow: hidden;
	position: relative;
	border-radius: 6px;
	text-align: center;
	padding: 50px 30px;
	background-color: #ffffff;
	transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	box-shadow: 0px 20px 106px 0px rgba(36, 45, 75, 0.1);
	&:before {
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		content: '';
		opacity: 0;
		position: absolute;
		transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
		background-image: linear-gradient( 0deg, rgb(199,63,250) 0%, rgb(134,52,246) 100%);
	}
	&:hover {
		transform: translateY(-16px);
		&:before {
			opacity: 0.89;
		}
	}
	.item-icon {
		width: auto;
		height: 220px;
		display: flex;
		align-items: center;
		margin: 0px auto 50px;
		>img {
			margin: auto;
			height: 215px;
		}
	}

	.item-title {
		font-size: 22px;
		font-weight: 700;
		margin-bottom: 5px;
		font-family: $body-font;
	}

	.btn-wrap {
		top: 60%;
		left: 50%;
		z-index: 2;
		opacity: 0;
		position: absolute;
		transform: translate(-50%, -60%);
		transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	}
	&:hover {
		.btn-wrap {
			top: 50%;
			opacity: 1;
			transition-delay: .1s;
			transform: translate(-50%, -50%);
		}
	}
}
/* service boxed 2 - end */

/* 10.03 - service page - end
==================================================================================================== */