//page scroll bar add
::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}
/* Track */
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px $p2-clr;
	border-radius: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
	background: $p2-clr;
	border-radius: 10px;
}
//page scroll bar add

//Basic Code Start
.fix {
	overflow: hidden !important;
}

.ralt {
	position: relative;
}

.ml-100 {
	margin-left: 100px;
}

.fs-8{
	font-size: 5px;
}
//Basic Code End

//Video Css Start
.ripple {
	position: relative;

	&::before,
	&::after {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 60px;
		height: 60px;
		-webkit-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);
		border-radius: 50%;
		box-shadow: 0 0 0 0 rgba(243, 159, 95, 0.5);
		-webkit-animation: rippleOne 3s infinite;
		animation: rippleOne 3s infinite;
	}

	&::before {
		-webkit-animation-delay: 0.9s;
		animation-delay: 0.9s;
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
	}

	&::after {
		-webkit-animation-delay: 0.6s;
		animation-delay: 0.6s;
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
	}
}
//Video Css End


//pagination default
.swiper-dot {
	margin-bottom: 2px;
	position: relative;
	.swiper-pagination-bullet {
		width: 10px;
		height: 10px;
		transition: 0.6s;
		background-color: $p1-clr;
		opacity: 0.5;
		border-radius: 10px;
		&:not(:last-child) {
			margin-right: 15px;
		}
	}
	.swiper-pagination-bullet.swiper-pagination-bullet-active {
		background-color: $p1-clr;
		transition: 0.6s;
		position: relative;
		opacity: 1;
		&::before {
			position: absolute;
			width: 30px;
			height: 30px;
			line-height: 30px;
			top: -10px;
			left: -10px;
			border-radius: 50%;
			background-color: transparent;
			border: 2px solid $p1-clr;
			content: "";
		}
	}
}

.array-button {
	@include flex;
	gap: 15px;

	.array-prev {
		width: 50px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		border: 1px solid $p1-clr;
		color: $p1-clr;
		border-radius: 50%;
		@include transition;
		i{
			font-size: 20px;
		}

		&:hover {
			background-color: $p1-clr;
			color: $white;
		}
	}

	.array-next {
		width: 50px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		border: 1px solid $p1-clr;
		color: $p1-clr;
		border-radius: 50%;
		@include transition;
		i{
			font-size: 20px;
		}

		&:hover {
			background-color: $p1-clr;
			color: $white;
		}
	}
}

//pagination default

.mt-10 {
	margin-top: 10px;
}

br {
	@include breakpoint(max-md) {
		display: none;
	}
}

.mt-60 {
	margin-top: 55px;
	@include breakpoint(max-xxl){
		margin-bottom: 45px;
	}
	@include breakpoint(max-xl){
		margin-bottom: 38px;
	}
	@include breakpoint(max-lg){
		margin-bottom: 30px;
	}
	@include breakpoint(max-md){
		margin-bottom: 24;
	}
}
.mb-60 {
	margin-bottom: 55px;
	@include breakpoint(max-xxl){
		margin-bottom: 45px;
	}
	@include breakpoint(max-xl){
		margin-bottom: 38px;
	}
	@include breakpoint(max-lg){
		margin-bottom: 30px;
	}
	@include breakpoint(max-md){
		margin-bottom: 24;
	}
}

.mb-40 {
	margin-bottom: 40px;
	@include breakpoint(max-xl){
		margin-bottom: 30px;
	}
	@include breakpoint(max-lg){
		margin-bottom: 20px;
	}
}
.mt-40 {
	margin-top: 40px;
	@include breakpoint(max-xl){
		margin-top: 30px;
	}
	@include breakpoint(max-lg){
		margin-top: 20px;
	}
}

/* background */
.bg-cover {
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	background-position: center;
}

.bg-cover-2 {
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	background-position: center;
	width: 100%;
	height: 100%;
}

//>>>>> Nice Select Css Start <<<<<//

.nice-select {
	background-color: transparent;
	border: transparent;
	float: initial;
	overflow: initial;
	height: initial;
	padding: 0;
	display: inline-flex;
	align-items: center;
	line-height: 150%;
	width: 100%;
	border: none;

	&:focus,
	&:hover {
		border-color: transparent;
	}

	&::after {
		height: 8px;
		width: 8px;
		right: 0;
		top: 15px;
		border-color: $header-color;
		border-bottom: 2px solid $header-color;
		border-right: 2px solid $header-color;
	}

	.list {
		width: initial;
		background-color: #fff;
		box-shadow: none;
		overflow: initial;
		box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
		width: 100%;
		top: 100%;
		padding: 0;
		max-height: 50vh;
		overflow-x: auto;
		left: 0;
		&::-webkit-scrollbar {
			width: 2px;
			opacity: 1;
			display: block;
		}
		&::-webkit-scrollbar-button,
		&::-webkit-scrollbar-thumb {
			background: $header-color;
		}
	}
	.option {
		background-color: transparent;
		font-size: 16px;
		line-height: 150%;
		padding: 4px 5px;
		min-height: initial;
		font-weight: 500;
		&:hover,
		&:focus,
		&.selected.focus {
			background-color: transparent;
		}
	}
	.current {
		font-weight: 500;
		color: $header-color;
	}
}
//>>>>> Nice Select Css End <<<<<//

.scroll-up {
	cursor: pointer;
	display: block;
	border-radius: 50px;
	box-shadow: inset 0 0 0 2px var(--border);
	z-index: 99;
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	position: fixed;
	right: 25px;
	bottom: 35px;
	height: 50px;
	width: 50px;
	@include transition;
}

.scroll-up::after {
	position: absolute;
	font-family: "Font Awesome 6 free";
	content: "\f062";
	text-align: center;
	line-height: 50px;
	font-weight: 700;
	font-size: 18px;
	color: $p2-clr;
	left: 0;
	top: 0;
	height: 50px;
	width: 50px;
	cursor: pointer;
	display: block;
	z-index: 1;
	@include transition;
}

.scroll-up svg path {
	fill: none;
}

.scroll-up svg.scroll-circle path {
	stroke: $theme-color-2;
	stroke-width: 4px;
	box-sizing: border-box;
	@include transition;
}

.scroll-up.active-scroll {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.page-nav-wrap {
	ul {
		li {
			display: inline-block;

			.page-numbers {
				&.current {
					background-color: $p2-clr;
					color: $white;
				}

				display: inline-block;
				width: 50px;
				height: 50px;
				line-height: 50px;
				background: transparent;
				font-weight: 600;
				transition: all 0.3s ease-in-out;
				margin: 0 2px;
				border: 1px solid $border-color;
				color: $text-color;
				border-radius: 50%;

				@media (max-width: 767px) {
					margin-top: 10px;
					width: 50px;
					height: 50px;
					line-height: 50px;
					font-size: 14px;
				}

				i {
					margin-top: 2px;
				}
				&:hover {
					background-color: $p2-clr;
					color: $white;
					border: 1px solid transparent;
				}
			}
		}
	}
}

.box-color-1 {
	background-color: rgba(248, 184, 31, 0.15);
	color: #f8b81f;
}

.box-color-2 {
	background-color: rgba(88, 102, 235, 0.15);
	color: #5866eb;
}

.box-color-3 {
	background-color: rgba(57, 192, 250, 0.15);
	color: #39c0fa;
}

.box-color-4 {
	background-color: rgba(249, 37, 150, 0.15);
	color: #f92596;
}

.border-none {
	border: none !important;
}

.pt-40 {
	padding-top: 40px;
}

.box-shadow {
	box-shadow: $shadow;
}

.bor-1 {
	border: 1px solid $p2-clr;
}

.mb-55 {
	margin-bottom: 55px !important;
}

.border-array-style {
	border: 1px solid $p2-clr;
}

.pt-80 {
	padding-top: 80px;
}