/**
 * How We Work - CSS (required for how-we-work section)
 * Moved from theme custom.css for corprate folder
 */

/* Show how-work image - override theme .reveal visibility */
.how-we-work .reveal{
	position: relative;
	display: block;
	visibility: visible;
	overflow: visible;
}

.how-we-work .reveal img{
	height: 100%;
	width: 100%;
	object-fit: cover;
	transform-origin: left;
}

/* How We Work section - bg image path relative to css file: ../images/ */
.how-we-work{
	background: url(../images/how-we-work-bg-image.png), var(--primary-color, #1a1a1a);
	background-repeat: repeat-y;
	background-position: left top;
	background-size: auto;
	padding: 100px 0;
}

.work-counter-list{
	display: flex;
	flex-wrap: wrap;
	gap: 40px 100px;
	border-bottom: 1px solid var(--dark-divider-color, rgba(255,255,255,0.2));
	margin-bottom: 60px;
	padding-bottom: 60px;
}

.work-counter-list-item{
	width: calc(25% - 75px);
}

.work-counter-item-header{
	display: flex;
	margin-bottom: 30px;
}

.work-counter-item-header .icon-box{
	margin-right: 20px;
}

.work-counter-item-header .icon-box img{
	width: 100%;
	max-width: 50px;
	transition: all 0.4s ease-in-out;
}

.work-counter-list-item:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.work-counter-item-no h2{
	font-size: 46px;
	color: var(--white-color, #fff);
}

.work-counter-item-content p{
	color: var(--white-color, #fff);
	margin-bottom: 0;
}

/* Work steps */
.work-step-item{
	display: flex;
	border-bottom: 1px solid var(--dark-divider-color, rgba(255,255,255,0.2));
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.work-step-item:last-child{
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.work-step-item .icon-box{
	margin-right: 20px;
}

.work-step-item .icon-box img{
	max-width: 50px;
	transition: all 0.4s ease-in-out;
}

.work-step-item:hover .icon-box img{
	filter: brightness(0) invert(1);
	transform: rotateY(180deg);
}

/* Steps 4, 5, 6: color PNG by default, white PNG on hover, icon rotates on hover */
.work-step-item .icon-box-bg{
	display: block;
	width: 50px;
	min-width: 50px;
	height: 50px;
	flex-shrink: 0;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	transition: transform 0.4s ease-in-out;
}
.work-step-item:hover .icon-box-bg{
	transform: rotateY(180deg);
}
.work-step-item .icon-box-bg::after{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 0.4s ease-in-out;
	pointer-events: none;
}
/* Step 4: default color.png, hover - 1.PNG. URL-encode comma %2C, space %20, ampersand %26 */
.work-step-item .icon-box-step-4{
	background-image: url("../images/Test%2C%20Refine%20%26%20Perfect%20color.png");
}
.work-step-item .icon-box-step-4::after{
	background-image: url("../images/Test%2C%20Refine%20%26%20Perfect%20-%201.png");
}
.work-step-item:hover .icon-box-step-4::after{
	opacity: 1;
}
/* Step 5: default color.png, hover - 1.PNG */
.work-step-item .icon-box-step-5{
	background-image: url("../images/Launch with Impact color.png");
}
.work-step-item .icon-box-step-5::after{
	background-image: url("../images/Launch with Impact - 1.png");
}
.work-step-item:hover .icon-box-step-5::after{
	opacity: 1;
}
/* Step 6: default color.png, hover - 1.PNG */
.work-step-item .icon-box-step-6{
	background-image: url("../images/Grow Together color.png");
}
.work-step-item .icon-box-step-6::after{
	background-image: url("../images/Grow Together - 1.png");
}
.work-step-item:hover .icon-box-step-6::after{
	opacity: 1;
}

.work-step-content{
	width: calc(100% - 70px);
}

.work-step-content h3{
	font-family: var(--default-font, inherit);
	font-size: 16px;
	font-weight: 500;
	color: var(--white-color, #fff);
	margin-bottom: 10px;
}

.work-step-content h2{
	font-size: 20px;
	color: var(--white-color, #fff);
	margin-bottom: 15px;
}

.work-step-content p{
	color: var(--white-color, #fff);
	margin-bottom: 0;
}

.how-work-image figure{
	display: block;
}

.how-work-image img{
	width: 100%;
	aspect-ratio: 1 / 1.078;
	object-fit: cover;
}

/* Tablet - max-width: 991px */
@media only screen and (max-width: 991px){
	.how-we-work{
		padding: 50px 0;
	}

	.work-counter-list{
		gap: 30px 40px;
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.work-counter-list-item{
		text-align: center;
		width: calc(25% - 30px);
	}

	.work-counter-item-header{
		display: block;
		margin-bottom: 10px;
	}

	.work-counter-item-header .icon-box{
		margin: 0 0 10px 0;
	}

	.work-counter-item-no{
		width: 100%;
	}

	.work-counter-item-no h2{
		font-size: 36px;
	}

	.how-work-content{
		margin-bottom: 30px;
	}

	.work-step-item{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.how-work-image img{
		aspect-ratio: 1 / 0.7;
		object-position: top center;
	}
}

/* Mobile - max-width: 767px */
@media only screen and (max-width: 767px){
	.work-counter-list{
		gap: 20px;
	}

	.work-counter-list-item{
		width: calc(50% - 10px);
	}

	.work-counter-item-header .icon-box img{
		max-width: 40px;
	}

	.work-counter-item-no h2{
		font-size: 26px;
	}

	.work-step-item .icon-box{
		margin-right: 15px;
	}

	.work-step-item .icon-box img{
		max-width: 40px;
	}

	.work-step-content{
		width: calc(100% - 55px);
	}

	.work-step-content h2{
		font-size: 18px;
		margin-bottom: 10px;
	}

	.how-work-image img{
		aspect-ratio: 1 / 0.9;
		object-position: center center;
	}
}