.service-box-section {
	padding: 8.125rem 0rem;
	@media (max-width: 1024px) {
		padding: 3.75rem 0rem;
	}
	.wc-single-box {
		padding: 2.5rem 1.813rem 3.125rem 1.813rem;
		background-color: var(--pure-white-color);
		box-shadow: 0px 7px 55px rgba(9, 16, 20, 0.08);
		position: relative;
		transition: all 0.3s ease;
		&::before {
			position: absolute;
			top: 0;
			left: 0;
			width: 0%;
			border-top: 3px solid var(--wc-primary-color);
			border-left: 3px solid var(--wc-primary-color);
			height: 0%;
			content: "";
			transition: all 0.3s;
			opacity: 0;
			visibility: hidden;
		}
		&:hover::before {
			height: 100%;
			visibility: visible;
			opacity: 1;
			width: 100%;
		}
		&::after {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 0%;
			height: 0%;
			border-right: 3px solid var(--wc-primary-color);
			border-bottom: 3px solid var(--wc-primary-color);
			height: 0%;
			content: "";
			transition: all 0.3s;
			opacity: 0;
			visibility: hidden;
		}
		&:hover::after {
			height: 100%;
			visibility: visible;
			opacity: 1;
			width: 100%;
		}
		&:hover {
			margin-top: -0.625rem;
			box-shadow: 0px 7px 55px rgba(9, 16, 20, 0.15);
		}
		@media (max-width: 1024px) {
			padding: 0.938rem;
		}
		@media (max-width: 991px) {
			margin-bottom: 30px;
		}
		.wc-box-title {
			position: relative;
			font-size: 1.75rem;
			line-height: 3.313rem;
			padding: 1rem 0rem 1rem 0.938rem;
			font-weight: 600;
			background-image: url(../images/banner/shape.png);
			background-position: left;
			background-size: contain;
			background-repeat: no-repeat;
			@media (max-width: 768px) {
				font-size: 1.563rem;
				padding: 0rem;
			}
			@media screen and (max-width: 1024px) {
				padding-left: 0rem;
			}
		}
		.wc-box-content {
			padding-left: 1.125rem;
			line-height: 1.813rem;
			@media (max-width: 1024px) {
				padding-left: 0rem;
			}
		}
	}
}