//Banner Style
.banner-section-wrap {
	.swiper-pagination {
		position: absolute;
		top: 50%;
		left: 7%;
		bottom: initial;
		display: grid;
		gap: 9px;
		transform: translateY(-50%);
		.swiper-pagination-bullet {
			width: 15px;
			height: 15px;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.25);
			opacity: 1;
		}
		.swiper-pagination-bullet-active {
			background: $white;
		}
	}
	&.style3 {
		.banner-bg-slide {
			background: url(../../assets/img/banner/banner3-slide1.png) no-repeat
				top center;
			background-size: cover;
			padding: 320px 0 260px;
			&.style2 {
				background: url(../../assets/img/banner/banner3-slide2.png)
					no-repeat top center;
				background-size: cover;
			}
			&.style3 {
				background: url(../../assets/img/banner/banner1-slide1.png)
					no-repeat top center;
				background-size: cover;
			}
			@include breakpoint(max-xxl) {
				padding: 270px 0 200px;
			}
			@include breakpoint(max-lg) {
				padding: 210px 0 160px;
				.hero-ele1 {
					width: 200px;
				}
				.hero-ele2 {
					width: 200px;
				}
			}
			@include breakpoint(max-sm) {
				padding: 180px 0 160px;
				.hero-ele1 {
					width: 200px;
				}
				.hero-ele2 {
					width: 200px;
				}
			}
		}
		.banner-content {
			max-width: 850px;
			margin: 0 auto;
		}
		.swiper-pagination {
			display: flex !important;
			top: initial !important;
			bottom: 75px;
			left: 28%;
		}
	}
	@media screen and (max-width: 1650px) {
		.swiper-pagination {
			top: 96%;
			left: 44%;
			display: flex !important;
		}
	}
}
.banner-bg-slide {
	background: url(../../assets/img/banner/banner1-slide1.png) no-repeat top
		center;
	background-size: cover;
	padding: 210px 0;
	position: relative;
	overflow: hidden;
	z-index: 1;
	&.style2 {
		background: url(../../assets/img/banner/banner1-slide2.png) no-repeat top
			center;
	}
	.hero-ele1 {
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: -1;
	}
	.hero-ele2 {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.banner-content {
		max-width: 730px;
		.hero-badge {
			background: linear-gradient(
				90deg,
				rgba(3, 23, 64, 0.5) 0%,
				rgba(3, 23, 64, 0) 100%
			);
			padding: 12px 15px;
		}
		h1 {
			font-size: 80px;
			font-weight: 700;
			line-height: 84px;
			letter-spacing: -1.6px;
		}
	}
	.hero-text-box {
		position: absolute;
		right: 15%;
		bottom: 0;
		.boxes1 {
			width: 400px;
			padding: 40px 29px;
			text-align: center;
			border-top-left-radius: 12px;
			border-top-right-radius: 12px;
			background: $white;
			font-size: 24px;
			font-weight: 600;
			color: $black;
		}
		.boxes2-inner {
			background: $p1-clr;
			padding: 28px 28px;
			width: 400px;
			.icon {
				width: 80px;
				height: 80px;
				background: #4327f3;
				border-radius: 50%;
			}
		}
	}
	@media screen and (max-width: 1399px) {
		padding: 150px 0;
		.banner-content {
			max-width: 630px;
			.hero-badge {
				padding: 8px 12px;
				font-size: 12px;
			}
			h1 {
				font-size: 60px;
				font-weight: 700;
				line-height: 70px;
				letter-spacing: -1.6px;
			}
		}
	}
	@media screen and (max-width: 1199px) {
		padding: 110px 0 120px;
		.banner-content {
			max-width: 630px;
			.hero-badge {
				padding: 8px 12px;
				font-size: 12px;
			}
			h1 {
				font-size: 50px;
				font-weight: 700;
				line-height: 60px;
				letter-spacing: -1.6px;
			}
		}
		.hero-text-box {
			right: 0%;
			bottom: 0;
			.boxes1 {
				width: 280px;
				padding: 20px 14px;
				font-size: 16px;
				line-height: 20px;
			}
			.boxes2-inner {
				padding: 20px 14px;
				width: 280px;
				.boxes2 {
					.cont {
						h3 {
							font-size: 18px;
						}
						p {
							font-size: 14px;
						}
					}
				}
				.icon {
					width: 50px;
					height: 50px;
					min-width: 50px;
					img {
						width: 30px;
					}
				}
			}
		}
		.hero-ele2 {
			height: 100% !important;
		}
	}
	@media screen and (max-width: 767px) {
		.banner-content {
			text-align: center;
		}
		.hero-text-box {
			right: 0%;
			bottom: 0;
			position: relative;
			.boxes1 {
				border-top-left-radius: 0;
				border-top-right-radius: 0;
				width: 280px;
				padding: 20px 14px;
				font-size: 16px;
				line-height: 20px;
				margin: 50px auto 0;
			}
			.boxes2-inner {
				padding: 20px 14px;
				width: 280px;
				margin: 0 auto;
				.boxes2 {
					.cont {
						h3 {
							font-size: 18px;
						}
						p {
							font-size: 14px;
						}
					}
				}
				.icon {
					width: 50px;
					height: 50px;
					min-width: 50px;
					img {
						width: 30px;
					}
				}
			}
		}
	}
	@media screen and (max-width: 575px) {
		padding: 95px 0 100px;
		.banner-content {
			max-width: 630px;
			h1 {
				font-size: 36px;
				font-weight: 700;
				line-height: 42px;
				letter-spacing: 0.6px;
			}
			.common-btn {
				padding-left: 14px;
				padding-right: 14px;
				font-size: 14px;
			}
		}
	}
}
//Banner Style Two
.banner-section2 {
	background: url(../../assets/img/banner/hero2-bg.png) no-repeat top center;
	background-size: cover;
	position: relative;
	overflow: hidden;
	padding: 230px 0 145px;
	z-index: 1;
	.banner-thumb2-wrap {
		position: relative;
		z-index: 1;
		.thumb1 {
			img {
				width: 100%;
				border-radius: 10px;
			}
		}
		.flower-ele,
		.line-card,
		.box-card,
		.cmns-dots {
			position: absolute;
		}
		.flower-ele {
			top: -50px;
			left: -50px;
		}
		.line-card {
			animation: lr 2s linear infinite;
			left: -200px;
			bottom: 10px;
		}
		.box-card {
			right: -160px;
			top: 30px;
			animation: updown 2s linear infinite;
		}
		.cmns-dots {
			left: -60px;
			top: 140px;
			animation: updown 2s linear infinite;
			z-index: -1;
		}
	}
	.cmns-dots {
		position: absolute;
		top: 100px;
		right: 80px;
		animation: lr 2s linear infinite;
		z-index: -1;
	}
	.banner-content {
		h1 {
			font-size: 80px;
			font-weight: 700;
			line-height: 90px;
			letter-spacing: -1.6px;
		}
	}
	@media screen and (max-width: 1500px) {
		.banner-content {
			h1 {
				font-size: 70px;
				font-weight: 700;
				line-height: 80px;
				letter-spacing: -1.6px;
			}
		}
		.banner-thumb2-wrap {
			.line-card {
				left: -80px;
				bottom: -30px;
			}
			.box-card {
				right: -60px;
				top: 30px;
			}
			.cmns-dots {
				left: -60px;
				top: 100px;
				animation: updown 2s linear infinite;
				z-index: -1;
			}
		}
	}
	@media screen and (max-width: 1199px) {
		padding: 180px 0 105px;
		.banner-content {
			h1 {
				font-size: 50px;
				font-weight: 700;
				line-height: 60px;
				letter-spacing: -1.6px;
			}
		}
		.banner-thumb2-wrap {
			.line-card {
				left: -80px;
				bottom: -30px;
			}
			.box-card {
				right: -60px;
				top: 30px;
			}
			.cmns-dots {
				left: -60px;
				top: 100px;
				animation: updown 2s linear infinite;
				z-index: -1;
			}
		}
	}
	@media screen and (max-width: 991px) {
		padding: 150px 0 105px;
		.banner-content {
			h1 {
				font-size: 50px;
				font-weight: 700;
				line-height: 60px;
				letter-spacing: -1.6px;
			}
		}
		.banner-thumb2-wrap {
			.line-card {
				left: -80px;
				bottom: -30px;
			}
			.box-card {
				right: -60px;
				top: 30px;
			}
			.cmns-dots {
				left: -60px;
				top: 100px;
				animation: updown 2s linear infinite;
				z-index: -1;
			}
		}
	}
	@media screen and (max-width: 550px) {
		padding: 150px 0 95px;
		.banner-content {
			h1 {
				font-size: 36px;
				font-weight: 700;
				line-height: 46px;
				letter-spacing: -1.6px;
			}
			.common-btn {
				padding: 11px 15px;
				font-size: 14px;
			}
		}
		.banner-thumb2-wrap {
			.line-card {
				left: -30px;
				bottom: -60px;
				width: 250px;
			}
			.box-card {
				right: -30px;
				top: 0px;
				width: 180px;
			}
			.cmns-dots {
				left: -60px;
				top: 100px;
				animation: updown 2s linear infinite;
				z-index: -1;
			}
		}
	}
}
@keyframes lr {
	50% {
		transform: translateX(-10px);
	}
}

//banner-section-section04
.banner-section-section04 {
	background: #f0f4fd;
	padding-top: 70px;
	position: relative;
	z-index: 1;
	.banner-content {
		h1 {
			font-size: 110px;
			line-height: 105%;
			font-weight: 800;
		}
		.n0-border {
			border-color: rgba(3, 23, 64, 0.15) !important;
		}
	}
	.business-thumbnail {
		margin-left: 50px;
		margin-top: -80px;
		.box-card {
			left: 190%;
			top: 54%;
		}
		.line-card {
			bottom: 80px;
			right: -66px;
		}
	}
	.overlay {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	@media screen and (max-width: 1500px) {
		.business-thumbnail {
			margin-left: 0px;
			margin-top: -80px;
			.box-card {
				left: 140%;
				top: 54%;
			}
			.line-card {
				bottom: 80px;
				right: -26px;
			}
		}
	}
	@include breakpoint(max-xxl) {
		.banner-content {
			padding: 100px 0 110px;
			h1 {
				font-size: 80px;
				line-height: 105%;
				font-weight: 800;
			}
		}
	}
	@include breakpoint(max-xl) {
		.banner-content {
			padding: 96px 0 110px;
			h1 {
				font-size: 80px;
				line-height: 105%;
				font-weight: 800;
			}
		}
	}
	@include breakpoint(max-lg) {
		.banner-content {
			padding: 85px 0 110px;
			text-align: center;
			h1 {
				font-size: 80px;
				line-height: 105%;
				font-weight: 800;
			}
		}
		.business-thumbnail {
			margin-left: 0px;
			margin-top: -80px;
			max-width: 100%;
			.box-card {
				left: 190%;
				top: 54%;
				display: none;
			}
			.line-card {
				bottom: 80px;
				right: -0px;
			}
		}
	}
	@include breakpoint(max-md) {
		.banner-content {
			padding: 60px 0 110px;
			text-align: center;
			h1 {
				font-size: 50px;
				line-height: 105%;
				font-weight: 800;
			}
		}
		.business-thumbnail {
			margin-left: 0px;
			margin-top: -80px;
			max-width: 100%;
			.box-card {
				left: 190%;
				top: 54%;
				display: none;
			}
			.line-card {
				bottom: 80px;
				right: -0px;
			}
		}
	}
	@include breakpoint(max-sm) {
		.banner-content {
			padding: 60px 0 90px;
			text-align: center;
			.hero-badge {
				font-size: 12px;
			}
			h1 {
				font-size: 38px;
				line-height: 105%;
				font-weight: 800;
			}
			.common-btn {
				font-size: 14px;
				padding: 11px 16px 13px;
			}
		}
		.business-thumbnail {
			margin-left: 0px;
			margin-top: -80px;
			max-width: 100%;
			.box-card {
				left: 190%;
				top: 54%;
				display: none;
			}
			.line-card {
				bottom: 0px;
				right: -0px;
			}
		}
	}
}

//banner-section-section05
.banner-section-section05 {
	padding-top: 200px;
	.banner-wrapper5 {
		display: flex;
		justify-content: space-between;
		gap: 22px;
		border-radius: 12px;
		overflow: hidden;
		.contents {
			max-width: 755px;
			h1 {
				font-size: 70px;
				font-weight: 700;
				color: $black;
				line-height: 76px;
				letter-spacing: -2.8px;
			}
		}
		.line {
			width: 100%;
			height: 1px;
			background: rgba(255, 255, 255, 0.5);
		}
		.banner-counter5 {
			max-width: 320px;
			padding: 50px 50px;
			background: linear-gradient(95deg, #5135ff 0.27%, #ff5455 99.73%);
			clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%, 0 14%);
		}
	}
	.banner-thumb5 {
		margin-top: -160px;
	}
	@include breakpoint(max-xl) {
		padding-top: 150px;
		.banner-wrapper5 {
			display: flex;
			gap: 22px;
			.contents {
				max-width: 600px;
				h1 {
					font-size: 50px;
					line-height: 56px;
					letter-spacing: -2.8px;
				}
			}
			.banner-counter5 {
				max-width: 320px;
				padding: 30px 20px 30px 30px;
			}
		}
	}
	@include breakpoint(max-lg) {
		padding-top: 130px;
		.banner-wrapper5 {
			display: flex;
			gap: 22px;
			.contents {
				max-width: 400px;
				h1 {
					font-size: 32px;
					line-height: 40px;
					letter-spacing: -1.1px;
				}
			}
			.banner-counter5 {
				max-width: 320px;
				padding: 30px 20px 30px 30px;
			}
		}
	}
	@include breakpoint(max-md) {
		padding-top: 120px;
		.banner-wrapper5 {
			display: flex;
			flex-wrap: wrap;
			gap: 22px;
			margin-bottom: 30px;
			.contents {
				max-width: 100%;
				h1 {
					font-size: 32px;
					line-height: 40px;
					letter-spacing: -1.1px;
				}
			}
			.banner-counter5 {
				max-width: 100%;
				width: 100%;
				padding: 30px 20px 30px 30px;
			}
		}
		.banner-thumb5 {
			margin-top: -0px;
		}
	}
	@include breakpoint(max-sm) {
		.banner-thumb5 {
			height: 250px;
			img {
				height: 100%;
				object-fit: cover;
			}
		}
	}
	@media screen and (max-width: 400px) {
		.banner-wrapper5 {
			margin-bottom: 30px;
			.contents {
				max-width: 100%;
				h1 {
					font-size: 26px;
					line-height: 38px;
					letter-spacing: -1.1px;
				}
			}
			.banner-counter5 {
				max-width: 100%;
				width: 100%;
				padding: 30px 20px 30px 30px;
			}
		}
	}
}

//Breadcrumnd
.breadcrumb-section {
	background: url(../../assets/img/banner/breadcrumb.png) no-repeat center center;
	background-size: cover;
	z-index: 1;
	.bread-ele{
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: 40%;
		height: 100%;
	}
	&::before{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		content: "";
		z-index: -1;
		background: rgba(3, 23, 64, 0.541);
	}
}

.bread-content {
	padding: 150px 0 160px;
	display: grid;
	gap: 16px;
	align-items: center;
	justify-content: center;
	ul {
		li,
		a {
			font-size: 20px;
			font-weight: 500;
		}
		i {
			font-size: 16px;
		}
	}
	@include breakpoint(max-xl) {
		padding: 150px 0 160px;
	}
	@include breakpoint(max-lg) {
		padding: 120px 0 100px;
		gap: 9px;
		ul {
			li,
			a {
				font-size: 16px;
			}
			i {
				font-size: 14px;
			}
		}
	}
	@include breakpoint(max-sm) {
		padding: 80px 0 80px;
		justify-content: center;
		ul {
			li,
			a {
				font-size: 16px;
			}
			i {
				font-size: 14px;
			}
		}
	}
}
//Breadcrumnd