/**
 * Slider Styles
 *
 * Header slider component styles.
 *
 * @package    Estylish
 * @author     Woracious
 * @since      1.0.0
 */

/*--------------------------------------------------------------
# Slider Variables
--------------------------------------------------------------*/

:root {
	--slides-across: 4;
}

@media screen and (max-width: 1200px) {
	:root {
		--slides-across: 3;
	}
}

@media screen and (max-width: 1000px) {
	:root {
		--slides-across: 2;
	}
}

@media screen and (max-width: 600px) {
	:root {
		--slides-across: 1;
	}
}

/*--------------------------------------------------------------
# Slider Layout
--------------------------------------------------------------*/

a {
	text-decoration: none;
}

.pslider {
	display: flex;
	gap: 20px;
}

.hslider {
	display: flex;
	overflow: hidden;
}

.navigator {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.hslide-wrap {
	width: 100%;
	transition: 1s ease;
}

.hrapper {
	display: flex;
	justify-content: space-between;
}

/*--------------------------------------------------------------
# Slider Item
--------------------------------------------------------------*/

.hrecur {
	flex: 0 0 calc((100%) / var(--slides-across));
	transition: transform 0.5s;
	padding: 7px;
	display: flex;
	justify-content: space-between;
	gap: 15px;
	align-items: center;
	background-color: var(--color4);
	background-clip: content-box;
	box-sizing: border-box;
}

.extracontain {
	margin: 10px 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.hrecur p:first-child {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #eeeeee;
	border-radius: 25px;
	padding: 15px;
	width: 30px;
	height: 30px;
}

.hrecur p,
.hrecur a {
	font-size: 1rem;
	color: #030303;
}