.wc-single-service {
	padding: 0rem 2rem 4rem 2rem;
	transition: all 0.3s ease;
	position: relative;
	&::before {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		background-color: var(--wc-primary-color);
		overflow: hidden;
		width: 100%;
		height: 0;
		transition: 0.3s ease;
		content: "";
	}
	&:hover::before {
		height: 100%;
	}
	&:hover {
		.wc-service-title {
			color: var(--pure-white-color);
			position: relative;
		}
		.wc-service-content {
			color: var(--pure-white-color);
			position: relative;
			z-index: 9;
		}
		.wc-service-shadow-title {
			color: var(--pure-white-color);
			position: relative;
			opacity: 0.1;
		}
	}
	@media (max-width: 768px) {
		padding: 1.25rem;
		box-shadow: 0px 7px 55px rgba(9, 16, 20, 0.08);
		margin-bottom: 30px;
	}
	.wc-service-shadow-title {
		font-size: 10.625rem;
		font-family: var(--wc-heading-font);
		color: var(--wc-gray-color);
		line-height: 8.938rem;
		padding-top: 4.063rem;
		display: inline-block;
		opacity: 0.1;
		font-weight: 600;
		margin-left: -1.25rem;
		@media (max-width: 767px) {
			padding-top: 0rem;
			font-size: 8.75rem;
			margin-left: 0rem;
			margin-top: -2.875rem;
			padding-top: 3.75rem;
		}
		@media screen and (min-width: 768px) and (max-width: 768px) {
			padding-top: 0rem;
			line-height: 10.313rem;
			font-size: 7rem;
			padding-left: 10px;
		}
	}
	.wc-service-content {
		line-height: 1.813rem;
	}
	.wc-service-title {
		font-size: 2.5rem;
		line-height: 3rem;
		font-weight: 700;
		padding-bottom: 1.188rem;
		margin-top: -5.563rem;
		@media (max-width: 768px) {
			font-size: 1.375rem;
			padding-bottom: 1.25rem;
		}
		@media (max-width: 1024px) {
			font-size: 2rem;
		}
	}
}

/* service Dark Section */

.service-dark {
	background: var(--wc-dark-gray-color);
	.wc-service-title {
		color: var(--pure-white-color);
	}
	.wc-service-content {
		color: var(--pure-white-color);
	}
}