.cta-band-shader canvas{ filter: blur(5px); }
.cta-band {
	text-align: center;
	padding: var(--sectionInnerSpaceLarge) 0;
	position: relative;
}

.cta-band-lottie {
	position: relative;
	overflow: hidden;

}
.cta-band-lottie .cta-lottie-holder {
	width:100%;
	position: absolute;
	top:50%;
	left: 0;
	z-index: 0;
	pointer-events: none;
	transform: translateY(-50%) scale(1.2);
}
.cta-band h2 {
	margin-bottom: 2.25rem;
	justify-content: center;
}
.cta-band .section-title { justify-content: center; }
.cta-band-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 3.75rem;
}

/*-- cta light variant ---*/
.cta-band.cta-band-light {
	background: url('../images/light_cta_bg.webp') var(--light-blue) left top / 100% 100%;
}
.cta-band-content p {
	margin: 0;
}
.cta-band-dark {
	background-color: var(--text-brand-primary);
}
.cta-band-dark h6,
.cta-band-dark p,
.cta-band-dark .heading,
.cta-band-dark .sub-heading,
.cta-band-dark h2 {
	color: var(--white);
}
.cta-band * {
	position: relative;
	z-index: 1;
}
.cta-band-shader {
	overflow: hidden;
	background-color: var(--blueHover);
}
.cta-band-shader::before {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	content: "";
	background-image: url("../../assets/images/cta-band/cta-video-img.webp");
	background-position: center top;
	background-repeat: no-repeat;
	z-index: 1;
}
.cta-band-shader canvas {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 0;
	height: 100% !important;
}
.cta-band-bg-image {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
	z-index: 0;
}
.cta-band-animation {
	background-image: url("../../assets/images/cta-band/cta-animation-bg.webp");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}
/* animation css */
.animation-vertical {
	display: flex;
	flex-direction: column;
	gap: 10px; /* space between lines */
	width: 100%; /* container width */
	height: 100%; /* container height */
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	mix-blend-mode: color-dodge;
}

.cta-band-animation-line {
	width: 100%;
	height: 4px;
	position: relative;
	overflow: hidden;
}
.cta-band-animation-line::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0;
	background: var(--text-brand-secondary);
	background: -webkit-linear-gradient(left, var(--text-brand-secondary) 0%, #0a1a65 100%);
	background: -moz-linear-gradient(left, var(--text-brand-secondary) 0%, #0a1a65 100%);
	background: -o-linear-gradient(left, var(--text-brand-secondary) 0%, #0a1a65 100%);
	background: linear-gradient(90deg, var(--text-brand-secondary) 0%, #0a1a65 100%);
	animation: lineAnim var(--anim-duration, 3s) linear infinite alternate;
	animation-delay: var(--anim-delay, 0s);
}
.cta-band-animation-line.leader::before {
	background: var(--text-brand-secondary);
	background: -webkit-linear-gradient(
			left,
			var(--text-brand-secondary) 0%,
			var(--i2c-brand-950) 62.98%,
			var(--orange) 97.43%
	); /* Chrome 10-25, Safari 5.1-6 */
	background: -moz-linear-gradient(
			left,
			var(--text-brand-secondary) 0%,
			var(--i2c-brand-950) 62.98%,
			var(--orange) 97.43%
	);

	background: -o-linear-gradient(
			left,
			var(--text-brand-secondary) 0%,
			var(--i2c-brand-950) 62.98%,
			var(--orange) 97.43%
	);

	background: linear-gradient(
			90deg,
			var(--text-brand-secondary) 0%,
			var(--i2c-brand-950) 62.98%,
			var(--orange) 97.43%
	);

	animation-duration: 2s !important;
	animation-delay: 0s !important;
}

@keyframes lineAnim {
	from {
		width: 0;
	}
	to {
		width: 100%;
	}
}
@media screen and (max-width: 1600px) {
	.cta-band-lottie .cta-lottie-holder {
		height: 100%;
		top: 0;
		transform: scale(1.4);
	}
}
@media screen and (max-width: 1199px) {
	.cta-band h2,
	.cta-band-content {
		margin-bottom: 2rem;
	}
}
@media screen and (max-width: 991px) {
	.cta-band-lottie .cta-lottie-holder {transform: scale(1.6);}
}
@media screen and (max-width: 767px) {
	.cta-band h2,
	.cta-band-content { margin-bottom: 1.5rem; }
	.cta-band-lottie .cta-lottie-holder {display: none;}
}
