section.hero-section[class*="section"] {
	/*padding-block: var(--hero-section-padding-block);*/
	padding-top: 6rem;
	padding-bottom: var(--sectionInnerSpace);
	margin-bottom: calc(-1 * var(--sectionSpace));
	overflow: hidden;
}
.hero-section .hdng-wrapper {
	max-width: 100% !important;
}

.debit-hero-wrap .intro-component-content-wrapper {
	flex: 1;
	gap: 2.5rem;
}


.debit-hero-wrap .intro-component-flex {
	gap: 2rem;
}

.debit-hero-img img {
	max-width: 44.8rem;
}
.debit-hero-img {
	padding-block: 0;
	/* text-align: center; */
	text-align: right;
}
.debit-hero-wrap .intro-component-video {
	background-color: transparent;
	overflow: hidden;
	max-width: none;
}
.intro-component-video { border-radius: 1.5rem; }


/*debit number*/
.debit-number {
	display: flex;
	padding: 24px;
	align-items: center;
	gap: 8px;
	position: absolute;
	right: 80px;
	top: 49px;
	border-radius: 16px;
	border: 1px solid #E5F3FF;
	background: #FFF;
	justify-content: center;
	text-align: center;
}
.debit-number-text {
	font-size: 0.9375rem;
	line-height: 22px;
}
.debit-number-icon {
	display: flex;
}


.intro-component-flex {
	border-radius: 1.5rem;
}
@media screen and (max-width: 1600px){
	/*hero*/
	section.hero-section[class*="section"] {
		padding-top: 4.25rem;
	}
	.debit-hero-img img {
		max-width: 34.2rem
	}
	.debit-number-text {
		font-size: 10px;
	}
	.debit-number {
		padding: 16px;
		right: 29px;
	}
}

@media screen and (max-width: 1199px){
	section.hero-section[class*="section"] {
		padding-top: 1rem;
	}
	.debit-number {
		padding: 15px;
		right: 10px;
	}
	.debit-number-icon {
		width: 13px;
	}
	.debit-hero-img img {
		max-width: 26.055rem
	}
	.debit-hero-wrap .intro-component-content-wrapper {
		gap: 1.5rem;
	}
}
@media screen and (max-width: 991px){
	.intro-component-flex {
		border-radius: 1.5rem;
	}
	.intro-component-video { border-radius: 1rem; }
	/*hero*/
	.debit-number {
		padding: 12px;
		right: 0;
		top: 24px;
	}
	.arrows-wrap {
		display: none;
	}
	.debit-number-icon {
		width: 10px;
	}
	.debit-hero-img img {
		max-width: 19.5rem
	}
	.debit-hero-wrap .intro-component-flex { gap: 1.5rem;}

}

@media screen and (max-width: 767px){
	.debit-hero-wrap .intro-component-flex {
		flex-direction: column;
	}
	.debit-number-icon {
		width: 11px;
	}
	.debit-hero-img{text-align: center;}
	.debit-hero-img img {
		max-width: 20.2rem
	}
	.debit-hero-wrap .intro-component-content-wrapper {
		gap: 1rem;
	}
	.debit-number {
		padding: 11px;
	}
	.debit-hero-wrap .intro-component-flex {
		gap: 40px;
	}
	.section-title {
		justify-content: center;
	}
	.section-title {
		justify-content: left;
	}
	.debit-hero-wrap .intro-component-video {
		width: 100%;
	}
}




/*================================================================*/
/*--- Intro Section ---- */
/*================================================================*/

/*====== Intro Section =====*/
.intro-component {
	padding-block: var(--sectionInnerSpace);
}

.theme-blue {
	color: var(--white, #FFF);
	background: var(--text-brand-primary, #081A66);
}

.theme-white {
	color: var(--white, #FFF);
	background: var(--text-brand-primary, #081A66);
}

.intro-component-flex {
	display: flex;
	justify-content: space-between;
	align-items: start;
	gap: 11.375rem;
}


.intro-component-content-wrapper,
.intro-component-content {
	display: flex;
	flex-direction: column;
}

.intro-component-content-wrapper {
	flex: 1;
	gap: 4.5rem
}

.intro-component-content {
	gap: 1.5rem;
}

.intro-component-video {
	position: relative;
	background: var(--blue, #1434CB);
	flex: 1;
	max-width: 44.625rem;
	overflow: hidden;
}

.intro-component-video video {
	width: 100%;
	height: 100%;
	border-radius: 1rem;
	object-fit: cover;
	display: block;
}

.intro-component-logo-container {
	position: absolute;
	bottom: 3.4375rem;
	right: 3.4375rem;
	left: 3.4375rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 2;
}

.intro-component-logo-container.content-end{
	justify-content: end
}
.intro-component-client-logo {
	display: flex;
	width: 158px;
	height: 70px;
	padding: 8px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 8px;
	background: #FFF;
}

.intro-component-client-logo img {
	max-width: 80px;
	height: auto;
}

@media only screen and (max-width: 1600px) {

	.intro-component-flex {
		gap: 4.625rem;
	}
	.debit-hero-wrap .intro-component-video .intro-component-video { max-width: 31.0625rem; }
	.debit-hero-wrap .intro-component-video .debit-hero-img{ display: flex; justify-content: end;}
	.intro-component-client-logo {
		width: 139px;
		height: 62px
	}
	.intro-component-content-wrapper {
		gap: 2rem;
	}
}

@media only screen and (max-width: 1365px) {

	.intro-component-flex {
		gap: 4.3125rem;
	}

	.intro-component-video {
		max-width: 23.375rem;
	}

	.intro-component-logo-container {
		/* right: 1.625rem;
		left: 1.625rem; */
		bottom: 1.625rem;
	}

	.intro-component-client-logo {
		width: 124px;
		height: 52px;
		border-radius: 6px;
	}

	.intro-component-content,
	.intro-component-content-wrapper {
		gap: 1.5rem;
	}

	.intro-component-client-logo img {
		max-width: 70px;
		height: auto;
	}
}
@media screen and (max-width: 1199px){
	.debit-hero-wrap .intro-component-video .intro-component-video { max-width: 28.25rem; }
}
@media only screen and (max-width: 1023px) {

	.intro-component-video {
		max-width: 21.75rem;
	}

	.intro-component-logo-container {
		/* right: 1.5rem;
		left: 1.5rem; */
		bottom: 1.5rem;
	}

}

@media only screen and (max-width: 767px) {

	.intro-component-flex {
		gap: 40px;
		flex-direction: column;
	}

	.intro-component-video {
		max-width: 100%;
	}

	.intro-component-content {
		gap: 14px;
	}

	.intro-component-logo-container {
		right: 12%;
		bottom: 21px;
	}
	.debit-hero-wrap .intro-component-video .debit-hero-img { justify-content: center; }
	.debit-hero-wrap .intro-component-video .intro-component-video { max-width: 20.5rem; }
}
@media only screen and (max-width: 574px) {
	.intro-component-logo-container {
		right: 10%;
	}
}
@media only screen and (max-width: 479px) {
	.intro-component-logo-container {
		right: 12%;
	}
}
@media only screen and (max-width: 400px) {
	.intro-component-logo-container {
		right: 6%;
	}
}