/*!
 * Universal Advanced Slider for Elementor
 *
 * Specificity is kept LOW on purpose: every rule here can be overridden by the
 * widget's style controls (Elementor generates ".elementor-X .elementor-element-Y ..." selectors).
 * Rules from 1.x keep their original selectors; former inline <style> rules are now class based.
 */

/* =====================================================================
   Base (1.x)
   ===================================================================== */
.use-slider-container {
	position: relative;
	width: 100%;
	overflow: visible;
}

.use-slider {
	width: 100%;
	height: 100%;
}

.use-slider-container > .use-slider {
	position: relative;
	overflow: hidden;
}

.use-slide {
	position: relative;
	display: flex;
	flex-direction: column;
	height: auto;
	box-sizing: border-box;
}

/* Hover-lift guard inside the slide so buttons are not clipped (was inline in 1.x). */
.use-slider-container .use-slide {
	padding-block: 20px;
	/* "transform" stays in the list: 3D effects (coverflow, cube, flip, cards) animate it. */
	transition-property: transform, opacity, scale;
	transition-duration: 0.3s;
	transition-timing-function: ease;
}

.use-slider-container.use-effect-cards > .use-slider,
.use-slider-container.use-effect-cube > .use-slider {
	overflow: visible;
}

.use-slide-image {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-inline: auto !important;
}

.use-slide-image img {
	display: block;
	max-width: 100%;
	height: auto;
	object-fit: cover;
	object-position: center;
	margin: 0 auto;
	transition: transform 0.5s ease, filter 0.5s ease;
}

.use-slide-image .use-image-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.use-slide-content {
	position: relative;
	z-index: 2;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
}

.use-heading-1 {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 10px 0;
	color: #333;
}

.use-heading-1 a {
	color: inherit;
	text-decoration: none;
}

.use-heading-2 {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	margin: 0 0 8px 0;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.use-description {
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 20px 0;
	color: #777;
}

.use-description > :last-child {
	margin-bottom: 0;
}

.use-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	background-color: #3498db;
	color: #fff;
	text-decoration: none;
	border: none;
	border-radius: 4px;
	font-weight: 500;
	transition: all 0.3s ease;
	cursor: pointer;
	gap: 8px;
	align-self: var(--use-button-align, center);
}

.use-button-icon,
.use-button-text {
	display: inline-flex;
	align-items: center;
}

.use-button:hover {
	background-color: #2980b9;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.use-button-text {
	order: 2;
}

.use-button-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.use-button-icon-before .use-button-text { order: 2; }
.use-button-icon-before .use-button-icon { order: 1; }
.use-button-icon-after .use-button-text { order: 1; }
.use-button-icon-after .use-button-icon { order: 2; }

.use-button-icon-position-before .use-button .use-button-text { order: 2; }
.use-button-icon-position-before .use-button .use-button-icon { order: 1; }
.use-button-icon-position-after .use-button .use-button-text { order: 1; }
.use-button-icon-position-after .use-button .use-button-icon { order: 2; }

/* RTL: flex already follows the reading direction; mirror directional icons (e.g. arrows). */
.use-dir-rtl.use-rtl-mirror-icons .use-button-icon i,
.use-dir-rtl.use-rtl-mirror-icons .use-button-icon svg {
	transform: scaleX(-1);
}

.use-button:focus-visible,
.use-slider-container .use-nav-btn:focus-visible,
.use-slide-link:focus-visible,
.use-slider-container .swiper-pagination-bullet:focus-visible {
	outline: 2px solid #3498db;
	outline-offset: 2px;
}

.use-slide-link:focus-visible {
	outline-offset: -4px;
}

.use-empty-message {
	padding: 20px;
	text-align: center;
	color: #777;
}

/* =====================================================================
   Before Swiper starts: lay slides out like the final result (no layout jump)
   --use-spv / --use-gap come from the "Slides Per View" / "Space Between" controls.
   ===================================================================== */
.use-slider:not(.swiper-initialized) > .swiper-wrapper > .use-slide {
	width: calc((100% - (var(--use-spv, 1) - 1) * var(--use-gap, 0px)) / var(--use-spv, 1));
	margin-inline-end: var(--use-gap, 0px);
}

.use-effect-fade .use-slider:not(.swiper-initialized) > .swiper-wrapper > .use-slide,
.use-effect-cube .use-slider:not(.swiper-initialized) > .swiper-wrapper > .use-slide,
.use-effect-flip .use-slider:not(.swiper-initialized) > .swiper-wrapper > .use-slide,
.use-effect-cards .use-slider:not(.swiper-initialized) > .swiper-wrapper > .use-slide {
	width: 100%;
	margin-inline-end: 0;
}

/* =====================================================================
   Navigation (was an inline <style> per widget in 1.x)
   ===================================================================== */
.use-slider-container .use-nav-holder {
	pointer-events: none;
	position: absolute;
	z-index: 10;
}

.use-slider-container .use-nav-holder .use-nav-btn {
	pointer-events: auto;
	border: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Never animate position (top/left): arrows must not drift while images load or on resize. */
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s, transform 0.2s;
	cursor: pointer;
	flex-shrink: 0;
	box-sizing: border-box;
	line-height: 1;
}

.use-slider-container .use-nav-btn:hover {
	transform: scale(var(--use-nav-hover-scale, 1.05));
}

.use-slider-container .use-nav-btn.swiper-button-disabled {
	opacity: 0.35;
	cursor: auto;
	pointer-events: none;
}

.use-slider-container .use-nav-btn.swiper-button-lock {
	display: none;
}

/* Together presets */
.use-slider-container .use-nav-holder.use-nav-together {
	display: flex;
	gap: 10px;
}

.use-slider-container .use-nav-holder.use-nav-together .use-nav-btn {
	position: relative;
}

.use-slider-container .use-nav-together.use-nav-together_top_left {
	top: calc(0px + var(--use-nav-offset-y, 0px));
	left: calc(0px + var(--use-nav-offset-x, 0px));
}

.use-slider-container.use-dir-rtl .use-nav-together.use-nav-together_top_left {
	left: auto;
	right: calc(0px + var(--use-nav-offset-x, 0px));
}

.use-slider-container .use-nav-together.use-nav-together_top_right {
	top: calc(0px + var(--use-nav-offset-y, 0px));
	right: calc(0px + var(--use-nav-offset-x, 0px));
}

.use-slider-container.use-dir-rtl .use-nav-together.use-nav-together_top_right {
	right: auto;
	left: calc(0px + var(--use-nav-offset-x, 0px));
}

.use-slider-container .use-nav-together.use-nav-together_bottom_left {
	bottom: calc(0px + var(--use-nav-offset-y, 0px));
	left: calc(0px + var(--use-nav-offset-x, 0px));
}

.use-slider-container.use-dir-rtl .use-nav-together.use-nav-together_bottom_left {
	left: auto;
	right: calc(0px + var(--use-nav-offset-x, 0px));
}

.use-slider-container .use-nav-together.use-nav-together_bottom_right {
	bottom: calc(0px + var(--use-nav-offset-y, 0px));
	right: calc(0px + var(--use-nav-offset-x, 0px));
}

.use-slider-container.use-dir-rtl .use-nav-together.use-nav-together_bottom_right {
	right: auto;
	left: calc(0px + var(--use-nav-offset-x, 0px));
}

/* Sides presets */
.use-slider-container .use-nav-holder.use-nav-sides {
	inset: 0;
}

.use-slider-container .use-nav-sides .use-nav-btn {
	position: absolute;
}

.use-slider-container .use-nav-sides.use-nav-sides_top .use-nav-prev,
.use-slider-container .use-nav-sides.use-nav-sides_top .use-nav-next {
	top: 0;
}

.use-slider-container .use-nav-sides.use-nav-sides_center .use-nav-prev,
.use-slider-container .use-nav-sides.use-nav-sides_center .use-nav-next {
	top: 50%;
	transform: translateY(-50%);
}

.use-slider-container .use-nav-sides.use-nav-sides_center .use-nav-btn:hover {
	transform: translateY(-50%) scale(var(--use-nav-hover-scale, 1.05));
}

/* "Center arrows on: image area" - --use-nav-top is measured by the script. */
.use-slider-container.use-nav-anchor-image .use-nav-sides.use-nav-sides_center .use-nav-prev,
.use-slider-container.use-nav-anchor-image .use-nav-sides.use-nav-sides_center .use-nav-next {
	top: var(--use-nav-top, 50%);
}

.use-slider-container .use-nav-sides.use-nav-sides_bottom .use-nav-prev,
.use-slider-container .use-nav-sides.use-nav-sides_bottom .use-nav-next {
	bottom: 0;
}

.use-slider-container.use-navigation-inside .use-nav-sides .use-nav-prev {
	left: var(--use-nav-inside, 10px);
}

.use-slider-container.use-navigation-inside .use-nav-sides .use-nav-next {
	right: var(--use-nav-inside, 10px);
}

.use-slider-container.use-navigation-outside .use-nav-sides .use-nav-prev {
	left: calc(var(--use-nav-outside, 22px) * -1);
}

.use-slider-container.use-navigation-outside .use-nav-sides .use-nav-next {
	right: calc(var(--use-nav-outside, 22px) * -1);
}

.use-slider-container.use-dir-rtl.use-navigation-inside .use-nav-sides .use-nav-prev {
	left: auto;
	right: var(--use-nav-inside, 10px);
}

.use-slider-container.use-dir-rtl.use-navigation-inside .use-nav-sides .use-nav-next {
	right: auto;
	left: var(--use-nav-inside, 10px);
}

.use-slider-container.use-dir-rtl.use-navigation-outside .use-nav-sides .use-nav-prev {
	left: auto;
	right: calc(var(--use-nav-outside, 22px) * -1);
}

.use-slider-container.use-dir-rtl.use-navigation-outside .use-nav-sides .use-nav-next {
	right: auto;
	left: calc(var(--use-nav-outside, 22px) * -1);
}

/* Manual preset */
.use-slider-container .use-nav-sides.use-nav-manual {
	inset: 0;
}

.use-slider-container .use-nav-sides.use-nav-manual .use-nav-prev,
.use-slider-container .use-nav-sides.use-nav-manual .use-nav-next {
	top: calc(50% + var(--use-nav-inset-block, 0px));
	transform: translateY(-50%);
}

.use-slider-container .use-nav-sides.use-nav-manual .use-nav-btn:hover {
	transform: translateY(-50%) scale(var(--use-nav-hover-scale, 1.05));
}

.use-slider-container.use-nav-anchor-image .use-nav-sides.use-nav-manual .use-nav-prev,
.use-slider-container.use-nav-anchor-image .use-nav-sides.use-nav-manual .use-nav-next {
	top: calc(var(--use-nav-top, 50%) + var(--use-nav-inset-block, 0px));
}

.use-slider-container.use-navigation-inside .use-nav-sides.use-nav-manual .use-nav-prev {
	left: calc(var(--use-nav-inside, 10px) + var(--use-nav-inset-inline, 0px));
}

.use-slider-container.use-navigation-inside .use-nav-sides.use-nav-manual .use-nav-next {
	right: calc(var(--use-nav-inside, 10px) + var(--use-nav-inset-inline, 0px));
}

.use-slider-container.use-navigation-outside .use-nav-sides.use-nav-manual .use-nav-prev {
	left: calc(var(--use-nav-outside, 22px) * -1 + var(--use-nav-inset-inline, 0px));
}

.use-slider-container.use-navigation-outside .use-nav-sides.use-nav-manual .use-nav-next {
	right: calc(var(--use-nav-outside, 22px) * -1 + var(--use-nav-inset-inline, 0px));
}

.use-slider-container.use-dir-rtl.use-navigation-inside .use-nav-sides.use-nav-manual .use-nav-prev {
	left: auto;
	right: calc(var(--use-nav-inside, 10px) + var(--use-nav-inset-inline, 0px));
}

.use-slider-container.use-dir-rtl.use-navigation-inside .use-nav-sides.use-nav-manual .use-nav-next {
	right: auto;
	left: calc(var(--use-nav-inside, 10px) + var(--use-nav-inset-inline, 0px));
}

.use-slider-container.use-dir-rtl.use-navigation-outside .use-nav-sides.use-nav-manual .use-nav-prev {
	left: auto;
	right: calc(var(--use-nav-outside, 22px) * -1 + var(--use-nav-inset-inline, 0px));
}

.use-slider-container.use-dir-rtl.use-navigation-outside .use-nav-sides.use-nav-manual .use-nav-next {
	right: auto;
	left: calc(var(--use-nav-outside, 22px) * -1 + var(--use-nav-inset-inline, 0px));
}

/* RTL: mirror arrow icons */
.use-slider-container.use-dir-rtl .use-nav-prev i,
.use-slider-container.use-dir-rtl .use-nav-prev svg,
.use-slider-container.use-dir-rtl .use-nav-next i,
.use-slider-container.use-dir-rtl .use-nav-next svg {
	transform: scaleX(-1);
}

/* =====================================================================
   Pagination
   ===================================================================== */
.use-pagination {
	position: relative;
	margin-top: 20px;
	text-align: center;
}

/* RTL: bullets follow the reading direction (first bullet on the right, like the first slide);
   numbers stay in their natural order. */
.use-slider-container.use-dir-rtl .use-pagination.swiper-pagination-fraction,
.use-slider-container.use-dir-rtl .use-pagination.use-pagination-custom-fraction {
	direction: ltr;
	unicode-bidi: isolate;
}

.use-slider-container .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	background-color: #ccc;
	opacity: 1;
	transition: all 0.3s ease;
}

.use-slider-container .swiper-pagination-bullet-active {
	background-color: #3498db;
	transform: scale(1.2);
}

.use-slider-container .use-pagination.swiper-pagination-lock {
	display: none;
}

/* Over the slides */
.use-slider-container.use-pag-inside .use-pagination,
.use-slider-container.use-pag-top .use-pagination {
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	margin: 0;
	z-index: 10;
}

.use-slider-container.use-pag-inside .use-pagination {
	top: auto;
	bottom: 15px;
}

.use-slider-container.use-pag-top .use-pagination {
	top: 15px;
	bottom: auto;
}

/* Custom rendered pagination (custom fraction, duplicated loop) */
.use-pagination-custom-bullets .swiper-pagination-bullet {
	display: inline-block;
	margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
	border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
	cursor: pointer;
}

.use-pagination-custom-fraction {
	font-size: 16px;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
}

.use-pagination-custom-fraction .use-fraction-current {
	font-weight: 700;
}

.use-pagination-custom-fraction .use-fraction-sep {
	margin: 0 0.4em;
	opacity: 0.6;
}

.use-pagination-custom-fraction .use-fraction-total {
	opacity: 0.6;
}

/* =====================================================================
   Layouts
   ===================================================================== */

/* Fixed image box (height / aspect ratio set): make the image fill it so Object Fit works. */
.use-img-fixed .use-slide-image img {
	width: 100%;
	height: 100%;
}

/* Hero: content over image */
.use-slider-container.use-layout-overlay .use-slide {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 1fr;
	padding: 0;
	overflow: hidden;
}

.use-layout-overlay .use-slide > .use-slide-image,
.use-layout-overlay .use-slide > .use-slide-content {
	grid-area: 1 / 1;
	min-width: 0;
}

.use-layout-overlay .use-slide-image {
	width: 100%;
	height: 100%;
	margin: 0 !important;
	align-self: stretch;
}

/* Readability shade over the image (adjust or hide in Style > Content Box). */
.use-layout-overlay .use-slide-image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image: linear-gradient(0deg, var(--use-shade, rgba(0, 0, 0, 0.55)) 0%, rgba(0, 0, 0, 0) 75%);
}

.use-layout-overlay .use-slide-content {
	padding: 40px;
}

.use-layout-overlay .use-heading-1,
.use-layout-overlay .use-heading-2,
.use-layout-overlay .use-description {
	color: #fff;
}

/* Side by side */
.use-layout-side .use-slide,
.use-layout-side_reverse .use-slide {
	flex-direction: row;
	align-items: center;
	gap: 30px;
}

.use-layout-side_reverse .use-slide {
	flex-direction: row-reverse;
}

.use-layout-side .use-slide-image,
.use-layout-side_reverse .use-slide-image {
	flex: 0 0 50%;
	width: 50%;
	margin-inline: 0 !important;
}

.use-layout-side .use-slide-content,
.use-layout-side_reverse .use-slide-content {
	flex: 1 1 0;
	min-width: 0;
}

@media (max-width: 767px) {
	.use-slider-container.use-layout-side .use-slide,
	.use-slider-container.use-layout-side_reverse .use-slide {
		flex-direction: column;
	}

	.use-slider-container.use-layout-side .use-slide-image,
	.use-slider-container.use-layout-side_reverse .use-slide-image {
		flex-basis: auto;
		width: 100% !important;
	}
}

/* Buttons aligned to the bottom (slides are equal height) */
.use-equal-height .use-slide-content {
	justify-content: flex-start;
}

.use-equal-height .use-slide-content .use-button {
	margin-top: auto;
}

/* Whole slide clickable */
.use-slide-link {
	position: absolute;
	inset: 0;
	z-index: 3;
}

/* Content sits above the link but lets clicks through, except on its own links/buttons. */
.use-slide-has-link .use-slide-content {
	z-index: 4;
	pointer-events: none;
}

.use-slide-has-link .use-slide-content a,
.use-slide-has-link .use-slide-content button,
.use-slide-has-link .use-slide-content .use-button {
	pointer-events: auto;
}

/* =====================================================================
   Image effects
   ===================================================================== */
.use-image-overlay-yes .use-slide-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.use-img-hover-zoom .use-slide:hover .use-slide-image img {
	transform: scale(1.08);
}

.use-img-hover-zoom-out .use-slide-image img {
	transform: scale(1.08);
}

.use-img-hover-zoom-out .use-slide:hover .use-slide-image img {
	transform: scale(1);
}

.use-img-hover-grayscale .use-slide-image img {
	filter: grayscale(1);
}

.use-img-hover-grayscale .use-slide:hover .use-slide-image img {
	filter: grayscale(0);
}

.use-img-hover-lift .use-slide-image {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.use-img-hover-lift .use-slide:hover .use-slide-image {
	transform: translateY(-6px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* =====================================================================
   Autoplay UI
   ===================================================================== */
.use-slider-container .use-autoplay-toggle.use-autoplay-toggle {
	position: absolute;
	top: 12px;
	inset-inline-end: 12px;
	z-index: 11;
	width: 34px;
	height: 34px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.45);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	line-height: 1;
}

.use-slider-container .use-autoplay-toggle.use-autoplay-toggle:hover {
	background-color: rgba(0, 0, 0, 0.65);
	color: #fff;
}

.use-autoplay-toggle[hidden] {
	display: none !important;
}

.use-autoplay-toggle .use-icon-play,
.use-autoplay-stopped .use-autoplay-toggle .use-icon-pause {
	display: none;
}

.use-autoplay-stopped .use-autoplay-toggle .use-icon-play {
	display: block;
}

.use-autoplay-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	z-index: 10;
	background-color: rgba(0, 0, 0, 0.08);
	pointer-events: none;
}

.use-autoplay-progress span {
	display: block;
	height: 100%;
	background-color: #3498db;
	transform: scaleX(0);
	transform-origin: left center;
}

.use-dir-rtl .use-autoplay-progress span {
	transform-origin: right center;
}

/* =====================================================================
   Responsive (1.x)
   ===================================================================== */
@media (max-width: 767px) {
	.use-heading-1 {
		font-size: 20px;
	}

	.use-heading-2 {
		font-size: 14px;
	}

	.use-button {
		padding: 10px 20px;
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.use-slider-container .use-slide,
	.use-slider-container .use-slide-image img,
	.use-slider-container .use-button,
	.use-slider-container .use-nav-btn {
		transition: none;
	}
}
