%flex {
	display: flex;
	flex-wrap: wrap;
}
%center {
	top: 50%;
	left: 50%;
	@include transform(translate(-50%, -50%));
	position: absolute;
	content: "";
}
.pt-80 {
	padding-top: 80px;
}
.pb-80 {
	padding-bottom: 80px;
}
.pt-100 {
	padding-top: 70px;
}
.pb-100 {
	padding-bottom: 70px;
}
.pt-50 {
	padding-top: 35px;
}
.pb-50 {
	padding-bottom: 35px;
}
@include breakpoint(lg) {
	.pt-100 {
		padding-top: 100px;
	}
	.pb-100 {
		padding-bottom: 100px;
	}
	.pt-50 {
		padding-top: 50px;
	}
	.pb-50 {
		padding-bottom: 50px;
	}
}
.overlayer {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.7);
	z-index: 99;
	display: none;
	&.active {
		display: block;
		animation-name: fadeIn;
		-webkit-animation-name: fadeIn;
		-moz-animation-name: fadeIn;
		animation-duration: 0.3s;
		-webkit-animation-duration: 0.3s;
		-moz-animation-duration: 0.3s;
	}
}
.rtl {
	direction: rtl;
}
.ltr {
	direction: ltr;
}
.section-header {
	margin-bottom: 30px;
	position: relative;
	z-index: 1;
	&__subtitle {
		color: var(--base-clr);
		display: inline-block;
		text-transform: capitalize;
		margin: 0;
		display: inline-flex;
		align-items: flex-end;
		position: relative;
		&::after {
			display: inline;
			content: "";
			background: var(--base-clr);
			height: 2px;
			width: 60px;
			@include border-radius(2px);
			left: 100%;
			bottom: 0;
		}
		margin-bottom: 20px;
	}
	&.text-lg-end {
		.section-header__subtitle {
			padding-right: 60px;
			&::after {
				left: calc(100% - 60px);
			}
		}
	}
	&__title {
		margin-bottom: 20px;
	}
	p {
		max-width: 630px;
		&:not(:last-child) {
			margin-bottom: 22px;
		}
	}
	&.text-center {
		max-width: 720px;
		margin-left: auto;
		margin-right: auto;
		.section-header__subtitle {
			justify-content: center;
		}
		p {
			max-width: 660px;
			margin-left: auto;
			margin-right: auto;
		}
	}
	&.text-white {
		color: $light-color;
		.section-header__title {
			color: $white;
		}
	}
	@include breakpoint(md) {
		margin-bottom: 40px;
	}
	@include breakpoint(lg) {
		margin-bottom: 50px;
	}
}
.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: -5px;
	margin-top: 30px;
	li {
		padding: 5px;
		a {
			width: 35px;
			height: 35px;
			line-height: 35px;
			text-align: center;
			@include border-radius(4px);
			background: var(--section-bg);
			color: var(--title-clr);
			border: 1px solid var(--border-clr);
			&:hover {
				border-color: var(--base-clr);
			}
			&.active {
				background: var(--base-clr);
				border-color: var(--base-clr);
				color: $white;
			}
			&.disabled {
				background: rgba(var(--base-rgb), 0.1);
			}
		}
	}
}
.owl-dots {
	display: flex;
	flex-wrap: wrap;
	margin: -3px;
	margin-top: 20px;
	justify-content: center;
	.owl-dot {
		width: 13px;
		height: 13px;
		display: flex;
		align-items: center;
		justify-content: center;
		@include border-radius(50%);
		@include transition($transition);
		margin: 3px;
		&.active {
			@include border-radius(50%);
			border: 1px solid var(--base-clr);
			border-color: var(--base-clr);
			@include transform(scale(1.3));
		}
		span {
			background: var(--base-clr);
			width: 5px;
			height: 5px;
			@include border-radius(50%);
		}
	}
}
.toTopBtn {
	position: fixed;
	bottom: -60px;
	right: 30px;
	width: 40px;
	line-height: 40px;
	display: block;
	text-align: center;
	color: var(--base-clr);
	@include border-radius(5px);
	@include transition($transition);
	cursor: pointer;
	z-index: 3;
	background: var(--title-clr);
	&.active {
		bottom: 30px;
	}
}
.loader {
	position: fixed;
	inset: 0;
	background: var(--section-bg);
	z-index: 99999;
	&::before {
		@extend %center;
		width: 46px;
		height: 46px;
		@include border-radius(50%);
		border: 4px solid var(--title-clr);
		border-left-color: var(--base-clr);
		border-right-color: var(--base-clr);
		animation: rotate 3s linear infinite;
	}
}
@keyframes rotate {
	0% {
		@include transform(translate(-50%, -50%) rotate(0deg));
	}
	100% {
		@include transform(translate(-50%, -50%) rotate(720deg));
	}
}