@use '../utils' as *;
/*----------------------------------------*/
/*  SLIDER CSS START
/*----------------------------------------*/
.slider-height {
	background-color: rgb(237, 249, 253);
	padding-top: 140px;
	padding-bottom: 200px;
	@media #{$xxl} {
		padding-top: 120px;
		padding-bottom: 120px;
	}
	@media #{$md} {
		padding-top: 80px;
		padding-bottom: 80px;
		height: 680px;
	}
	@media #{$xs,$sm} {
		padding-top: 100px;
		padding-bottom: 120px;
	}
}
.slider-content {
    padding-left: 220px;
	@media #{$xxl} {
		padding-left: 80px;
	}
	@media #{$xl} {
		padding: 0px 50px 0px;
	}
	@media #{$md,$lg} {
		padding: 0px 30px 0px;
	}
	@media #{$xs,$sm} {
		padding: 0px 30px 0px;
	}
	@media #{$xxs} {
		padding: 0px 15px 0px;
	}
}
.slider-subtitle {
	font-size: 20px;
	margin-bottom: 35px;
	display: inline-block;
	padding-left: 10px;
	position: relative;
	&:before {
		position: absolute;
		content: "";
		height: 18px;
		width: 2px;
		background: var(--clr-theme-primary);
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}
}
.slider-title {
    font-size: 80px;
    margin-bottom: 20px;
    font-weight: 600;
    line-height: 1.1;
	@media #{$xxl} {
		font-size: 74px;
	}
	@media #{$xl} {
		font-size: 66px;
	}
	@media #{$lg} {
		font-size: 56px;
	}
	@media #{$md} {
		font-size: 50px;
	}
	@media #{$sm} {
		font-size: 44px;
	}
	@media #{$xs} {
		font-size: 40px;
	}
	@media #{$xxs} {
		font-size: 30px;
	}
}
.slide-video {
	.slider-link {
		height: 60px;
		width: 60px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border: 1px solid var(--clr-border-2);
		border-radius: 50%;
		font-size: 18px;
		&:hover {
			background-color: var(--clr-theme-secondary);
			color: var(--clr-common-white);
			border-color: transparent;
		}
	}
	span {
		margin-left: 10px;
	}
}
.slider-btn-wrapper {
	display: flex;
	align-items: center;
	gap: 15px 20px;
	flex-wrap: wrap;
}
.slider-thumb-wrapper {
	height: 841px;
	width: 100%;
	@media #{$xxl} {
		height: 650px;
	}
	@media #{$xl, $lg} {
		font-size: 700px;
	}
	@media #{$sm, $md} {
		height: 450px;
	}
	@media #{$xs} {
		height: 350px;
	}
}
// Slider 
.slider-nav-prev {
	max-width: 352px;
	padding: 30px 30px;
	background: rgba(3, 175, 229, 0.60);
	backdrop-filter: blur(15px);
	@media #{$lg} {
		max-width: 270px;
	}	
	p {
		color: var(--clr-common-white);
		font-size: 24px;
		font-style: normal;
		font-weight: 500;
		text-transform: capitalize;
		line-height: 1.5;
		@media #{$lg} {
			font-size: 20px;
		}
	}
}
.slider-button-prev {
	height: 55px;
	width: 55px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	border-radius: 50%;
	color: var(--clr-common-white);
	border: 1px solid var(--clr-common-white);
	height: 55px;
	width: 55px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	border-radius: 50%;
	color: var(--clr-common-white);
	border: 1px solid var(--clr-common-white);
}

.slider-nav-next {
	max-width: 352px;
	padding: 30px 30px;
	background: rgba(255, 255, 255, 0.60);
	backdrop-filter: blur(15px);
	@media #{$lg} {
		max-width: 270px;
	}
	p {
		color: rgb(22, 22, 22);
		font-size: 24px;
		font-weight: 500;
		text-transform: capitalize;
		line-height: 1.5;
		@media #{$lg} {
			font-size: 20px;
		}
	}
}

.slider-button-next {
	height: 55px;
	width: 55px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	border-radius: 50%;
	color: rgba(22, 22, 22, 1);
	border: 1px solid rgba(22, 22, 22, 1);
}


// Slider navigation
.slider__navigation {
	position: absolute;
	bottom: 30px;
	z-index: 554;
	gap: 20px;
	right: 10%;
	button {
		&:hover {
			color: var(--clr-common-white);
			background: var(--clr-theme-secondary);
			border-color: transparent;
		}
	}
	// Slider 
	.slider-nav-prev {
		max-width: 352px;
		padding: 30px 30px;
		background: rgba(3, 175, 229, 0.60);
		backdrop-filter: blur(15px);
		@media #{$sm, $lg} {
			max-width: 270px;
		}	
		p {
			color: var(--clr-common-white);
			font-size: 24px;
			font-style: normal;
			font-weight: 500;
			text-transform: capitalize;
			line-height: 1.5;
			@media #{$sm, $lg} {
				font-size: 20px;
			}
		}
	}
	.slider-button-prev {
		height: 55px;
		width: 55px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background-color: transparent;
		border-radius: 50%;
		color: var(--clr-common-white);
		border: 1px solid var(--clr-common-white);
	}
	.slider-nav-next {
		max-width: 352px;
		padding: 30px 30px;
		background: rgba(255, 255, 255, 0.60);
		backdrop-filter: blur(15px);
		@media #{$sm, $lg} {
			max-width: 270px;
		}	
		p {
			color: rgb(22, 22, 22);
			font-size: 24px;
			font-weight: 500;
			text-transform: capitalize;
			line-height: 1.5;
			@media #{$sm, $lg} {
				font-size: 20px;
			}
		}
	}
	.slider-button-next {
		height: 55px;
		width: 55px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background-color: transparent;
		border-radius: 50%;
		color: rgba(22, 22, 22, 1);
		border: 1px solid rgba(22, 22, 22, 1);
	}
	// Slider navigation
	.slider__navigation {
		display: flex;
		position: absolute;
		bottom: 30px;
		z-index: 554;
		gap: 20px;
		right: 10%;
		@media #{$lg} {
			right: 20px;
		}
	}
	@media #{$lg} {
		right: 20px;
	}
}
.slider-pagination {
	position: absolute;
    left: 220px;
	bottom: 50px;
	z-index: 55;
	@media #{$xl,$xxl} {
		left: 80px;
	}
}
// Slider style 2
@media (min-width: 1601px) {
	.slider-area-2 {
		.container {
			max-width: 1500px;
		}
	}
}
.slider-area-2 {
	background: var(--clr-theme-primary);
	display: flex;
	align-items: end;
	padding-top: 100px;
	@media #{$xs,$sm,$md} {
		padding-top: 160px;
	}
	@media #{$xxs} {
		padding-top: 145px;
	}
}
.banner-social-two {
	position: absolute;
	border-radius: 60px;
	top: 50%;
	transform: translateY(-50%);
	right: 50px;
	z-index: 12;
	ul {
		display: flex;
		flex-direction: column;
		gap: 10px;
		li {
			list-style: none;
			a {
				height: 44px;
				width: 44px;
				border: 1px solid rgba(255, 255, 255, 1);
				display: inline-flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				color: var(--clr-common-white);
				&:hover {
					background-color: var(--clr-common-white);
					color: var(--clr-theme-primary);
					border-color: transparent;
				}
			}
		}
	}
}
.slider-subtitle-2 {
	color: #FFF;
	font-size: 16px;
	font-weight: 500;
	padding: 4px 10px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	display: inline-block;
	margin-bottom: 20px;
}
.slider-title-2 {
	color: var(--clr-common-white);
	font-size: 80px;
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 20px;
	@media #{$xxl} {
		font-size: 66px;
	}
	@media #{$xl} {
		font-size: 60px;
	}
	@media #{$lg} {
		font-size: 50px;
	}
	@media #{$md} {
		font-size: 46px;
	}
	@media #{$sm} {
		font-size: 40px
	}
	@media #{$xs} {
		font-size: 34px;
	}
	@media #{$xxs} {
		font-size: 28px;
	}
}
.slider-content-2 {
	& > p {
		color: var(--clr-common-white);
		margin-bottom: 35px;
		max-width: 450px
	}
}
.slider-meta {
	display: flex;
	align-items: center;
	gap: 10px;
}
.slider-meta-content {
	& > p {
		margin-bottom: 0;
		color: var(--clr-common-white);
	}
}
.slider-meta-rating {
	span {
		color: #FFBE11;
		font-size: 14px;
	}
}
.slider-meta-thumb {
	img {
		border: 3px solid var(--clr-common-white);
		border-radius: 50%;
		@media #{$xs} {
			max-width: 40px;
		}
		&:not(:last-child) {
			margin-right: -28px;
		}
	}
}
.slider-round {
	background: #caeaff;
	border-radius: 50%;
	width: 782px;
	height: 782px;
	position: absolute;
	bottom: 0;
	z-index: -1;
	left: 50%;
	transform: translateX(-50%);
	@media #{$xxl} {
		width: 680px;
		height: 680px;
	}
	@media #{$xl} {
		width: 600px;
		height: 600px;
	}
	@media #{$lg} {
		width: 500px;
		height: 500px;
	}
	@media #{$md} {
		width: 500px;
		height: 500px;
	}
	@media #{$sm} {
		width: 500px;
		height: 500px;
	}
	@media #{$xs} {
		width: 420px;
		height: 420px;
	}
	@media #{$xxs} {
		width: 320px;
		height: 320px;
	}
}
.slider-thumb-wrapper-2 {
	.slider-thumb-2 {
		max-width: 621px;
		margin: 0 0 auto;
		@media #{$md} {
			max-width: 450px;
			margin: auto;
		}
		@media #{$sm} {
			max-width: 400px;
 			 margin: auto;
		}
		@media #{$xs,$sm} {
			max-width: 380px;
 			 margin: auto;
		}
		img {
			width: 100%;
		}
	}
	.glow {
		background: #a8eaff;
		border-radius: 50%;
		width: 717px;
		height: 717px;
		filter: blur(200px);
		position: absolute;
		z-index: -12;
		top: 0;
		right: 0%;
		@media #{$xl} {
			width: 600px;
			height: 600px;
		}
		@media #{$lg} {
			width: 500px;
			height: 500px;
		}
		@media #{$md} {
			width: 500px;
			height: 500px;
		}
		@media #{$sm} {
			width: 500px;
			height: 500px;
		}
		@media #{$xs} {
			width: 500px;
			height: 500px;
		}
		@media #{$xxs} {
			width: 500px;
			height: 500px;
		}
	}
}
.slider-link-play {
	height: 60px;
	width: 60px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.20);
	border-radius: 50%;
	font-size: 18px;
	color: var(--clr-common-body);
	&:hover {
		background-color: var(--clr-theme-secondary);
		color: var(--clr-common-white);
	}
}