// Banner one area start here ***
.banner {
	&-area {
		padding-top: 350px;
	}
	&__content {
		position: absolute;
		top: 50%;
		left: 40px;
		transform: translateY(-50%);
		h5 {
			margin-bottom: 20px;
		}
	}
	&__item {
		position: relative;
	}
}
// Banner one area end here ***

// Banner five area start here ***
.banner-two {
	overflow: hidden;
	position: relative;
	&__shape-left {
		position: absolute;
		bottom: 310px;
		left: -70px;
		z-index: 2;
		top: 30%;
	}
	&__shape-right {
		position: absolute;
		bottom: 20px;
		right: -80px;
		z-index: 2;
	}
	&__arry-btn {
		width: 60px;
		position: absolute;
		top: 50%;
		right: 65px;
		transform: translateY(-50%);
		z-index: 2;
		button {
			background-color: transparent;
			border: 1px solid var(--border);
			color: var(--border-light);
			&:hover {
				background-color: var(--primary-color);
				border: 1px solid var(--primary-color);
			}
			transform: translateX(30px);
			visibility: hidden;
			opacity: 0;
			transition: var(--transition);
		}
		.active {
			background-color: var(--primary-color);
			border: 1px solid var(--primary-color);
			color: var(--white);
		}
		.arry-next {
			transition: all 0.6s ease-in-out;
		}
	}
	&__content {
		padding-bottom: 100px;
		padding-top: 300px;
		h4 {
			font-weight: 600;
			font-size: 16px;
			color: var(--white);
			margin-bottom: 30px;
		}
		h1 {
			color: var(--white);
			font-size: 80px;
			line-height: 90px;
			font-weight: 600;
		}
		p {
			font-weight: 500;
		}
		.banner-two__info {
			span {
				color: var(--border-light);
				font-weight: 500;
				font-size: 14px;
			}
		}
	}
	&__slider {
		.slide-bg:before {
			position: absolute;
			content: "";
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background: linear-gradient(
				180deg,
				rgba(0, 0, 0, 0) -0.98%,
				rgba(0, 0, 0, 0.7) 100%
			);
			z-index: -1;
		}
		.slide-bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			opacity: 1;
			z-index: -2;
			background-repeat: no-repeat;
			background-position: center center;
			background-size: cover;
			transform: scale(1);
			-webkit-transition: all 8s ease-out 0s;
			-moz-transition: all 8s ease-out 0s;
			-ms-transition: all 8s ease-out 0s;
			-o-transition: all 8s ease-out 0s;
			transition: all 8s ease-out 0s;
		}
		.swiper-slide-active .slide-bg {
			-webkit-transform: scale(1.12);
			-moz-transform: scale(1.12);
			transform: scale(1.12);
		}
	}
	&:hover {
		.banner-two__arry-btn {
			button {
				transform: translateX(0px);
				visibility: visible;
				opacity: 1;
			}
		}
	}
}
.banner-two-light {
	.banner-two__content {
		h4 {
			color: var(--black);
		}
		h1 {
			color: var(--black);
		}
		p {
			color: var(--paragraph-light);
		}
		.banner-two__info {
			span {
				color: var(--paragraph-light);
			}
			h3 {
				color: var(--black);
			}
		}
	}
}
// Banner five area end here ***

// Page banner area start here ***
.page-banner {
	margin-top: 200px;
	text-align: center;
	.breadcrumb-list {
		a,
		span {
			font-size: 14px;
			font-weight: 600;
		}
	}
}
// Page banner area end here ***

// Ad banner area start here ***
.ad-banner {
	&-area {
		overflow: hidden;
	}
	&__content {
		position: relative;
		p {
			font-size: 20px;
			font-weight: 600;
		}
	}
	&__content.left {
		margin-left: 25%;
	}
	&__item {
		position: relative;
		overflow: hidden;
		.bg-image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			transition: var(--transition);
		}
		&:hover {
			.bg-image {
				transform: scale(1.1);
			}
		}
	}
}
// Ad banner area end here ***