/* whatWeDoSlider.css */
.what-we-do-slider-wrapper .what-we-do-slider {
	display: flex;
	column-gap: 30px;
}

.what-we-do-slider-wrapper .slider-item {
	position: relative;
	height: 223px;
	width: 186px;
	border-radius: 20px;
	overflow: hidden;
	background-color: #EFEFEF;
	padding: 31px 23px 26px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: all 0.6s ease-out;
	flex-shrink: 0;
}

.what-we-do-slider-wrapper .slider-item.active {
	flex: auto;
	padding: 31px 26px 26px;
}

.what-we-do-slider-wrapper .slider-item .background-image {
	position: absolute;
	width: 100%;
	height: 100%;
	transition: opacity 0.6s ease-out;
	opacity: 0;
	top: 0;
	left: 0;
}

.what-we-do-slider-wrapper .slider-item.active .background-image {
	opacity: 1;
}

.what-we-do-slider-wrapper .slider-item .background-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: transparent linear-gradient(90deg, #000000 0%, #00000000 100%) 0% 0% no-repeat padding-box;
  opacity: 0.55;
}

.what-we-do-slider-wrapper .background-image img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.what-we-do-slider-wrapper .slider-icon {
	width: 45px;
	height: 45px;
	border-radius: 7px;
	background-color: #333333;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.what-we-do-slider-wrapper .slider-icon img.hover,
.what-we-do-slider-wrapper .slider-item.active .slider-icon img.normal {
	display: none;
}

.what-we-do-slider-wrapper .slider-item.active .slider-icon {
	background-color: #ffffff;
}

.what-we-do-slider-wrapper .slider-item.active .slider-icon img.hover {
	display: block;
}

.what-we-do-slider-wrapper .slider-icon, 
.what-we-do-slider-wrapper .slider-title, 
.what-we-do-slider-wrapper .slider-description {
	z-index: 2;
	position: relative;
}

.what-we-do-slider-wrapper .slider-item .slider-title {
	font-size: 24px;
	line-height: 32px;
	font-weight: bold;
	letter-spacing: -0.36px;
	color: #333333;
	position: absolute;
	left: 24px;
	top: 165px;
	transition: left 0.6s ease-out, top 0.6s ease-out;
}

.what-we-do-slider-wrapper .slider-description {
	font-size: 18px;
	line-height: 24px;
	letter-spacing: -0.27px;
	color: #FFFFFF;
	opacity: 0;
	transition: opacity 0.4s ease 0.2s;
}

.what-we-do-slider-wrapper .slider-item.active .slider-title {
	color: #ffffff;
	left: 86px;
	top: 36px;
}

.what-we-do-slider-wrapper .slider-item.active .slider-description {
	opacity: 1;
}

@media only screen and (max-width: 1200px) {
	.what-we-do-slider-wrapper .what-we-do-slider {
		flex-direction: column;
		row-gap: 12px;
	}

	.what-we-do-slider-wrapper .slider-item {
		height: 64px;
		width: 100%;
		border-radius: 10px;
		padding: 15px 16px;
	}

	.what-we-do-slider-wrapper .slider-item.active {
		flex: auto;
		padding: 28px 16px;
		height: 178px;
	}

	.what-we-do-slider-wrapper .slider-item .background-image::before {
		opacity: 0.61;
	}

	.what-we-do-slider-wrapper .slider-icon {
		width: 34px;
		height: 34px;
	}

	.what-we-do-slider-wrapper .slider-item .slider-title {
		font-size: 18px;
		line-height: 24px;
		letter-spacing: -0.27px;
		top: 20px;
		left: 60px;
	}

	.what-we-do-slider-wrapper .slider-item .slider-description {
		font-size: 16px;
		line-height: 21px;
		letter-spacing: -0.24px;
	}

	.what-we-do-slider-wrapper .slider-item.active .slider-title {
	color: #ffffff;
		left: 60px;
		top: 33px;
	}
}
/* whatWeDoSlider.css end */