.css-hover-slider-section{
	position:relative;
	background:#000;
	box-shadow:0 20px 15px -10px rgba(0,0,0,.6);
	height:20rem;
	max-width:45rem;
	margin:2rem auto;
	overflow:hidden;
	font-family:'Port Lligat Slab',serif;
	color:#333;
	border-radius:8px;
}
.css-hover-slider-section h2{font-size:3rem;margin:0.5rem 0;color:#2c3e50;}
.css-hover-slider-section .desc{font-size:1.3rem;line-height:1.5;}

.slider-image{
	background-size:cover;
	background-position:center;
	height:100%;
	position:absolute;
	left:0;
	width:50%;
	transition:left 1s ease-in-out;
	z-index:1;
}
.slider-image .hover-bg{
	background-size:cover;
	background-position:center;
	position:absolute;
	inset:0;
	opacity:0;
	transition:opacity 1s ease-in-out;
}

.slider-1,.slider-2{
	background:#ecf0f1;
	height:100%;
	position:absolute;
	top:0;
	width:50%;
	padding:2rem 3rem;
	transition:all 1s ease-in-out;
	overflow:hidden;
}
.slider-1{right:0;}
.slider-2{left:-50%;z-index:5;}

/* افکت‌ها هنگام هاور */
.css-hover-slider-section:hover .slider-1{right:-50%;}
.css-hover-slider-section:hover .slider-2{left:0;}
.css-hover-slider-section:hover .slider-image{left:50%;}
.css-hover-slider-section:hover .hover-bg{opacity:1;}