// Core variables and mixins
@import "sub-stylesheet/_variables";
@import "sub-stylesheet/_mixins";





// working process
.working-process-section {
	// padding-top: 120px;
	// padding-bottom: 160px;
	padding-left: 20px;
	padding-right: 20px;
	position: relative;
	overflow: hidden;
	@include breakpoint(sm){
		padding-left: 0;
		padding-right: 0;
	}
	.section-header {
		margin-bottom: 70px;
	}
	.bz-working-process {
		position: relative;
	}
}

// process-item
.bz-process-item {
	width: 100%;
	height: 200px;
	position: relative;
	overflow: hidden;
	.process-item-inner {
		width: 100%;
		height: 100%;
		@include border-radius(10px);
		overflow: hidden;
		.front,.back {
			width: 100%;
			height: 100%;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20px 20px;
			text-align: center;
			@include border-radius(10px);

			.process-count {
				position: absolute;
				left: 20px;
				top: 20px;
			}
		}
		.front {
			background-color: #fff;
			.name {
				color: #2e3c40;
				font-size: 20px;
			}
		}
		.back {
			background-color: #ff6360;
			.process-count {
				color: #fff;
			}
			.desc {
				margin-bottom: 0;
				color: #fff;
				line-height: 1.7;
			}
		}
	}

}

.bz-working-process-container {
	padding-bottom: 20px;
	overflow: hidden;
	@include breakpoint(lg){
		padding-bottom: 80px;
		.swiper-wrapper {
			cursor: ew-resize;
		}
	}
	.button-control-group {
		position: absolute;
		left: 50%;
		bottom: 0;
		width: 85%;
		background-color: red;
		@include transform(translateX(-50%));
		.process-slide-prev-btn {
			position: absolute;
			left: 0;
			top: 0;
			font-size: 30px;
			outline: none;
			@include transition(0.3s);
			// color: #959595;
			cursor: pointer;
			z-index: 2;
			-webkit-animation: colorchange 1s infinite;
			animation: colorchange 1s infinite;
			&:active,&:focus,&:hover {
				color: $base-color1;
			}
		}
		.process-slide-next-btn {
			position: absolute;
			right: 0;
			top: 0;
			font-size: 30px;
			outline: none;
			@include transition(0.3s);
			// color: #959595;
			cursor: pointer;
			z-index: 2;
			&:active,&:focus,&:hover {
				color: $base-color1;
			}
		}
	}

	.swiper-pagination-progressbar {
		width: 75%;
		top: 106%;
		left: 50%;
		@include breakpoint(sm){
			width: 80%;
		}
		@include transform(translateX(-50%));
		background-color: #eeeeee;
		height: 2px;
		.swiper-pagination-progressbar-fill {
			background-color: #d2d2d2;
			height: 2px;
		}
	}
}