/**

 * Swiper 10.2.0

 * Most modern mobile touch slider and framework with hardware accelerated transitions

 * https://swiperjs.com

 *

 * Copyright 2014-2023 Vladimir Kharlampidi

 *

 * Released under the MIT License

 *

 * Released on: August 17, 2023

 */



:root {
	--swiper-theme-color: #221f1f;
	--wrapper-half: calc(var(--wrapper-max-size) / 2);
	/*

  --swiper-preloader-color: var(--swiper-theme-color);

  --swiper-wrapper-transition-timing-function: initial;

  */
}

:host {
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	z-index: 1;
}

.swiper {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	overflow: hidden;
	overflow: clip;
	list-style: none;
	padding: 0;
	/* Fix of Webkit flickering */

	z-index: 1;
	display: block;
}

.swiper-vertical > .swiper-wrapper {
	flex-direction: column;
}

.swiper-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: flex;
	transition-property: transform;
	transition-timing-function: var( --swiper-wrapper-transition-timing-function, initial );
	box-sizing: content-box;
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
	transform: translate3d(0px, 0, 0);
}

.swiper-horizontal {
	touch-action: pan-y;
}

.swiper-vertical {
	touch-action: pan-x;
}

.swiper-slide {
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	position: relative;
	transition-property: transform;
	display: block;
}

.swiper-slide-invisible-blank {
	visibility: hidden;
}

/* Auto Height */

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
	height: auto;
}

.swiper-autoheight .swiper-wrapper {
	align-items: flex-start;
	transition-property: transform, height;
}

.swiper-backface-hidden .swiper-slide {
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* 3D Effects */

.swiper-3d.swiper-css-mode .swiper-wrapper {
	perspective: 1200px;
}

.swiper-3d .swiper-wrapper {
	transform-style: preserve-3d;
}

.swiper-3d {
	perspective: 1200px;
}

.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
	transform-style: preserve-3d;
}

/* CSS Mode */

.swiper-css-mode > .swiper-wrapper {
	overflow: auto;
	scrollbar-width: none;
	/* For Firefox */

	-ms-overflow-style: none;
	/* For Internet Explorer and Edge */
}

.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
	display: none;
}

.swiper-css-mode > .swiper-wrapper > .swiper-slide {
	scroll-snap-align: start start;
}

.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
	scroll-snap-type: x mandatory;
}

.swiper-css-mode.swiper-vertical > .swiper-wrapper {
	scroll-snap-type: y mandatory;
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
	scroll-snap-type: none;
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
	scroll-snap-align: none;
}

.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
	content: "";
	flex-shrink: 0;
	order: 9999;
}

.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
	scroll-snap-align: center center;
	scroll-snap-stop: always;
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
	margin-inline-start: var(--swiper-centered-offset-before);
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
	height: 100%;
	min-height: 1px;
	width: var(--swiper-centered-offset-after);
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
	margin-block-start: var(--swiper-centered-offset-before);
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
	width: 100%;
	min-width: 1px;
	height: var(--swiper-centered-offset-after);
}

/* Slide styles start */



.swiper-lazy-preloader {
	width: 42px;
	height: 42px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -21px;
	margin-top: -21px;
	z-index: 10;
	transform-origin: 50%;
	box-sizing: border-box;
	border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
	border-radius: 50%;
	border-top-color: transparent;
}

.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
	animation: swiper-preloader-spin 1s infinite linear;
}

.swiper-lazy-preloader-white {
	--swiper-preloader-color: #fff;
}

.swiper-lazy-preloader-black {
	--swiper-preloader-color: #000;
}

@keyframes swiper-preloader-spin {

	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* Slide styles end */



/* swiper button */



.slider__nav {
	display: flex;
	gap: 1.25rem;
}

.swiper--arrows {
	--arrow-size: 50px;
	--arrow-icon-width: 18px;
	--arrow-icon-height: 20px;
	width: var(--arrow-size);
	height: var(--arrow-size);
	border-radius: 50%;
	border: 1px solid var(--swiper-theme-color);
	color: var(--swiper-theme-color);
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: all ease-in-out 200ms;
}

.swiper--arrows svg {
	width: var(--arrow-icon-width);
	height: var(--arrow-icon-height);
}

.swiper--arrows:not(.swiper-button-disabled):hover {
	border-color: var(--swiper-theme-color);
	color: var(--baniyas-black-light);
}

.swiper--arrows.swiper-button-disabled {
	opacity: 0.5;
}



.swiper--arrows.white--theme {
	--swiper-theme-color: white;
	opacity: 0.5;
}

.swiper--arrows.white--theme:hover {
	opacity: 1;
	border-color: var(--baniyas-blue);
	background-color: var(--baniyas-blue);
	color: white;
}



.swiper--arrows.black--theme {
	--swiper-theme-color: #b1b4c7;
	opacity: 0.5;
}

.swiper--arrows.black--theme:hover {
	opacity: 1;
	border-color: var(--baniyas-blue);
	background-color: var(--baniyas-blue);
	color: white;
}

.swiper--arrows.black--theme:hover svg path {
	stroke: #fff;
}



@media (hover: hover) {

	.swiper--arrows:not(.swiper-button-disabled):hover {
		transform: scale(1.1);
	}
}



/* swiper button custom */



.hero__slider .slider__nav,
.banner__slider .slider__nav {
	position: absolute;
	left: var(--wrapper-inline-padding);
	bottom: clamp(40px, 4vw, 80px);
	z-index: 4;
}

.banner__slider .slider__nav {
	bottom: 50px;
}

@media (min-width: 1900px) {

	.hero__slider .slider__nav,
	.banner__slider .slider__nav {
		left: calc(50vw - calc(var(--wrapper-max-size)) / 2);
	}
}



@media (max-width: 1800px) {

	.swiper--arrows {
		--arrow-size: 45px;
		--arrow-icon-width: 16px;
		--arrow-icon-height: 18px;
	}
}



@media (max-width: 640px) {

	.hero__slider .slider__nav,
	.banner__slider .slider__nav {
		display: none;
	}
}



.swiper-button-lock {
	display: none;
}



/* pagination */



.swiper-pagination {
	--swiper-bullet-theme: var(--baniyas-black-light);
	position: relative;
	text-align: center;
	display: flex;
	justify-content: center;
	margin-block-start: 20px;
}

.swiper-pagination.swiper-pagination-hidden {
	opacity: 0;
}

.swiper-pagination-disabled > .swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
	display: none !important;
}

.swiper-pagination-bullet {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid transparent;
	background-color: transparent;
	margin: 0;
	padding: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	opacity: 0.5;
	transition: all ease-in-out 200ms;
}

.swiper-pagination-bullet::after {
	width: 6px;
	height: 6px;
	content: "";
	background-color: var(--swiper-bullet-theme);
	border-radius: 50%;
	transition: all ease-in-out 200ms;
}



.swiper-pagination-clickable .swiper-pagination-bullet {
	cursor: pointer;
}

.swiper-pagination-bullet:only-child {
	display: none !important;
}

.swiper-pagination-bullet-active {
	opacity: var(--swiper-pagination-bullet-opacity, 1);
	border-color: var(--swiper-bullet-theme);
}

.swiper-pagination-bullet-active::after {
	transform: scale(1.5);
	opacity: 0.7;
}



/* hero pagination custom */



.swiper-fullscreen-pagination {
	display: none;
}



.swiper-banner-pagination {
	position: absolute;
	bottom: 50px;
	--swiper-bullet-theme: white;
	right: var(--wrapper-inline-padding);
}



.swiper-slider-pagination {
	margin-block-start: 10px;
}

.swiper-center-pagination {
	justify-content: center;
}



@media (max-width: 640px) {

	.swiper-fullscreen-pagination {
		--swiper-bullet-theme: white;
		display: flex;
		position: absolute;
		bottom: 30px;
		left: var(--wrapper-inline-padding);
		z-index: 2;
	}

	.swiper-banner-pagination {
		bottom: 20px;
	}

	.service__slider .swiper-fullscreen-pagination {
		--swiper-bullet-theme: rgba(0, 0, 0, 0.69);
		bottom: 0px;
		left: var(--wrapper-inline-padding);
	}
}