@import '../../common';

.rs-services-slider {
	position: relative;
	&.service-style-1 {
		.service-img {
			position: relative;
			overflow: hidden;
			display: block;
			img {
				width: 100%;
				-webkit-transition:  all 0.3s ease;
				transition: all 0.3s ease;
				&:hover {
					transform: scale(1.05);
				}
			}
			
			
		}
		.service-title-holder {
			position: relative;
			-webkit-transition:  all 0.5s ease;
			transition: all 0.5s ease;
			padding: 30px;
			background-color: #fff;
			.service-content-area {
				position: relative;
				z-index: 3;
				display: flex;
				align-items: center;
			}
			.service-title {
				z-index: 2;
				.title {
					transition: all 0.5s ease;
					font-size: 24px;
					font-weight: 700;
					line-height: 32px;
					margin-bottom: 15px;
					a {
						color: $titleColor;
					}

				}
				&.yes {
					.title {
						a {
							color: $titleColor;
							display: inline;
							background-image: linear-gradient(to bottom, transparent 0%, transparent 100%);
							background-size: 0 1px;
							background-repeat: no-repeat;
							background-position: left 100%;
							transition: all 0.3s ease-in-out;
							&:hover {
								background-image: linear-gradient(to bottom, #fff 0%, #fff 100%);
								background-size: 100% 1px!important;
							}
						}
					}
				}
			}
			.icon-part{
				img{
					transition: all 0.5s ease;
				}
			}
			.numbering{
				position: absolute;
				position: relative;
				left: 30px;
				bottom: 70px;
				span{
					position: relative;
					z-index: 2;
					font-size: 52px;
					font-weight: 700;
					line-height: 60px;
					color: #f5f5f6;
					-webkit-transition:  all 0.5s ease;
					transition: all 0.5s ease;
					display: block;
				}
				&.number-line {
					position: relative;
					&:after {
						content: "";
						position: absolute;
						width: 185px;
						height: 1px;
						background-color: #f5f5f6;
						right: 0px;
						bottom: 27%;
						-webkit-transition:  all 0.5s ease;
						transition: all 0.5s ease;
					}
				}
			}
			.service-desc{
				z-index: 2;
				font-size: 17px;
				line-height: 28px;
				font-weight: 400;
				color: #535a5e;
				-webkit-transition:  all 0.5s ease;
				transition: all 0.5s ease;
				margin-bottom: 20px;
			}
			.read__more{
				margin-top: 10px;
				-webkit-transition:  all 0.5s ease;
				transition: all 0.5s ease;
				z-index: 2;
				.btn-area {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.btn-text {
						transition: $transition;
						border-width: 2px;
						font-size: 16px;
						line-height: 24px;
						font-weight: 500;
					}
					
					.btn-icon {
						background-color: #e6e6e9;
						width: 30px;
						height: 30px;
						border-radius: 2px;
						display: inline-block;
						text-align: center;
						line-height: 28px;
						svg{
							transition: all 0.5 ease;
							width: 12px;
							height: 10px;
							fill: $bodyColor;
						}
					}
				}
			}
			&:after {
				content: "";
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
				transition: all .5s ease;
			}
			
		}
		.rs-service-slider:hover {
			.btn_box {
				.btn-area {
					.btn-text {
						color: #040423;
					}
					.btn-icon {
						background-color: $primaryColor;
						svg {
							
							fill: #fff;
							path {
								fill: #fff;
							}
						}
					}
					
				}
			}
			.service-title-holder { 
				&:after {
					opacity: 1;
					
				}
			}
		}
	}

	&.service-style-2 {
		.service-img {
			position: relative;
			a {
				overflow: hidden;
				display: block;
			}
			img {
				padding-right: 30px;
				width: 100%;
				-webkit-transition:  all 0.3s ease;
				transition: all 0.3s ease;
			}
		}
		.rs-service-slider {
			position: relative;
			-webkit-transition:  all 0.3s ease;
			transition: all 0.3s ease;
			.service-title-holder {
				margin-left: 92px;
				margin-top: -57px;
				transition: all 0.3s ease;
				padding: 30px;
				background-color: #f7f7f7;
				border-radius: 15px;
				transform: translate(0);
				.service-title {
					position: relative;
					.title {
						transition: all 0.3s;
						font-size: 24px;
						font-weight: 700;
						line-height: 32px;
						margin-bottom: 10px;
						a {
							color: $titleColor;
						}
					}
				}
				.service-desc{
					position: relative;
					font-size: 17px;
					line-height: 28px;
					font-weight: 400;
					color: #535a5e;
					transition: all 0.3s;
				}
				.read__more{
					margin-top: 10px;
					.btn-area {
						display: flex;
						align-items: center;
						justify-content: space-between;
						.btn-text {
							transition: $transition;
							border-width: 2px;
							font-size: 16px;
							line-height: 24px;
							font-weight: 500;
						}
						
						.btn-icon {
							background-color: #e6e6e9;
							width: 30px;
							height: 30px;
							border-radius: 2px;
							display: inline-block;
							text-align: center;
							line-height: 28px;
							svg{
								transition: all 0.3 ease-in-out;
								width: 12px;
								height: 10px;
								fill: $bodyColor;
							}
						}
					}
				}
				.numbering{
					position: absolute;
					left: 30px;
					bottom: 70px;
					transition: 0.3s;
					span{
						font-size: 52px;
						font-weight: 700;
						line-height: 60px;
						color: #f5f5f6;
					}
					&.number-line {
						position: relative;
						&:after {
							content: "";
							position: absolute;
							width: 180px;
							height: 1px;
							background-color: #f5f5f6;
							right: 30px;
							bottom: 32%;
						}
					}
				}
		
				&.btn_box:hover {
					.btn-area {
						// .btn-text {
						// 	color: #040423;
						// }
						// .btn-icon {
						// 	background-color: $primaryColor;
						// 	svg {
								
						// 		fill: #fff;
						// 		path {
						// 			fill: #fff;
						// 		}
						// 	}
						// }
						
					}
				}
			}
			&:hover {
				.service-title-holder {
					transform: translate(0, -10px);
				}
			}
		}
	}

	&.service-style-3 {
		.grid-item {
			.rs-service-slider {
				padding: 30px;
				position: relative;
				transition: $transition;
				.service-img {
					flex-shrink: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					&.img-clip-enable {
						clip-path: polygon(0 0, 88% 0, 100% 100%, 0 88%);
					}
				}
				.service-title-holder {
					position: relative;
					transition: $transition;
				}
				&::after {
					position: absolute;
					content: '';
					left: 0;
					top: 0;
					bottom: 0;
					right: 0;
					background: rgba(0, 0, 0, 0.4);
					transition: $transition;
					pointer-events: none;
				}
			}
			&.slick-slide {
				.rs-service-slider {
					> * {
						transition: $transition;
						position: relative;
						z-index: 1;
					}
				}
			}
		}
	}

	&.service-style-4 {
		.grid-item {
			.rs-service-slider {
				display: flex;
				align-items: stretch;
				justify-content: flex-start;
				gap: 30px;
				.service-img {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					position: relative;
					overflow: hidden;
					transition: $transition;
					img,
					svg path {
						transition: $transition;
					}
				}
				.feature-img {
					img {
						object-fit: cover;
						object-position: center;
						height: 100%;
						width: auto;
					}
				}
				.read__more {
					a {
						display: inline-flex;
						align-items: center;
						gap: 7px;
						color: $titleColor;
						svg {
							width: 18px;
							height: 18px;
							path {
								transition: $transition;
								color: $titleColor;
							}
						}
						i {
							color: $titleColor;
							transition: $transition;
							font-size: 18px;
						}
						&:hover {
							color: $primaryColor;
							i {
								color: $titleColor;
							}
							svg {
								path {
									fill: $primaryColor;
								}
							}
						}
					}
				}
			}
		}
	}
}

.rs-service-thumb-slider {
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
	.rs-services-slider {
		flex: 0 0 auto;
		width: 100%;
		max-width: calc(100% - 110px);
	}
	.thumb-sl-nav {
		flex: 0 0 auto;
		width: 100%;
		max-width: 110px;
		flex-shrink: 0;
		.slick-list {
			padding: 0 !important;
			.thumb-img {
				opacity: 1;
				transition: $transition;
				overflow: hidden;
				border: none;
				width: 100%;
				height: auto;
				aspect-ratio: 1/1;
				position: relative;
				margin: 5px 0;
				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					object-position: center;
				}
				&:after {
					position: absolute;
					content: '';
					left: 0;
					top: 0;
					right: 0;
					bottom: 0;
					border: 2px solid transparent;
					transition: $transition;
					pointer-events: none;
				}
				&.slick-center {
					&:after {
						border-color: $primaryColor;
					}
				}
			}
		}
	}
}

@keyframes foldAnimation {
    0% {
      transform: rotateY(0deg);
    }
    50% {
      transform: rotateY(90deg);
    }
    100% {
      transform: rotateY(0deg);
    }
}

.service-slider-btn-design .elementor-icon-list-item:after {
	content: '';
	position: absolute;
	background: $bodyColor;
	width: 49px!important;
	height: 1px;
	bottom: 1px;
	left: 0;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
}
  
.service-slider-btn-design .elementor-icon-list-item:hover:after  { 
	width: 100%!important;
	background: $primaryColor;
}