:root{
    --features-list-btn-margin-top: 5rem;
    overflow-x: hidden;
}
body{
    position: relative;
}
.features-list-box {
    position: relative;
	overflow: hidden;
}

.features-list-btn {
    margin-top: var(--features-list-btn-margin-top);
}
.features-list-bg-decor {
    position: absolute !important;
    bottom: 0;
    left: 30%;
    z-index: 0;
    width: 1661px;
    height: 1276px;
}
.features-list-bg-decor svg {
    height: 100%;
    width: 100%;
}
.features-list-box header, 
.features-list-box div{
	position: relative;	
	z-index: 1;
}

/* ============ header */
section.hero-section[class*="section"]{
    position: relative;
}
.lottie-contain {
    left: 50%;
    position: absolute;
    right: 0;
    top: 120px;
    max-width: 989px;
    z-index: -1;
    height: 1276px;
    width: 100%;
    transform: translateX(27.625%);
}
.lottie-contain:before {
    width: 0;
    height: 0;
    content: "";
    border-style: solid;
    border-width: 0 51.90625rem 79.75rem;
    border-color: transparent transparent #E5F3FF;
    filter: blur(13.75rem);
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50.375%);
    pointer-events: none;
}
.lottie-contain__img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}
.intro-component-video.debit-hero-right {
    display: none;
}
.intro-component-content-wrapper.debit-hero-left {
    max-width: 66%;
}
section.hero-section[class*="section"] {
    overflow-x: inherit !important;
}
.lottie-contain dotlottie-player {
    height: auto;
    margin-top: 6rem;
}

/* ============ header */
.cta-band .container-sm {
    max-width: 1180px;
}
.cta-band .cta-band-content {
    max-width: 850px;
    margin-inline: auto;
}
@media screen and (max-width: 1600px) {
    :root{
        --features-list-btn-margin-top: 3.75rem;
    }
    .intro-component-content-wrapper.debit-hero-left {
        max-width: 63%;
    }
    .lottie-contain {
        max-width: 40%;
        top: 250px;
    }
    .lottie-contain:before {
        width: 0;
        height: 0;
        content: "";
        border-style: solid;
        border-width: 0 46.90625rem 65.75rem;
        border-color: transparent transparent #E5F3FF;
        /* filter: blur(13.75rem); */
        position: absolute;
        left: 50%;
        top: -270px;
        transform: translateX(-50.375%);
        pointer-events: none;
        /* background: red; */
        z-index: -1;
    }
    #header:not(.sticky),
	#header .header-holder {
        background-color: rgba(0,0,0,0);
    }
	.lottie-contain dotlottie-player {
		margin-top: 0;
	}
	.cta-band .container-sm {
		max-width: 1000px;
	}
}
@media screen and (max-width: 1199px) {
    :root{
        --features-list-btn-margin-top: 3rem;
    }    
    .intro-component-content-wrapper.debit-hero-left {
        max-width: 64%;
    }
    .lottie-contain {
        max-width: 50%;
        top: 100px;
        transform: translateX(27%);
    }
    .lottie-contain:before {
        border-width: 0 33.90625rem 58.75rem;
        top: -330px;
        transform: translateX(-38.375%);
    }
    .section-title {
        flex-direction: column;
    }
    .features-list-bg-decor {
		left: 20%;
	}
	.cta-band .cta-band-content {
		max-width: 700px;
	}
	.features-list-holder .features-list-box{
		padding: 60px !important;
	}
	
}

@media screen and (max-width: 991px) {
    .lottie-contain {
        transform: translateX(0%);
        left: inherit;
        right: 0;
		top: 80px;
        width: 290px;
    }
    .intro-component-content-wrapper.debit-hero-left {
        max-width: 100%;
    }
	.features-list-bg-decor {
		left: 10%;
	}
	.cta-band .cta-band-content {
		max-width: 590px;
	}
	.features-list-holder .features-list-box{
		padding: 48px !important;
	}
}
@media screen and (max-width: 767px) {
    :root{
        --features-list-btn-margin-top: 2.5rem;
    }
    .lottie-contain {
        max-width: 40%;
        height: 160px;
    }
    .intro-component-content-wrapper.debit-hero-left {
        max-width: 100%;
    }
    .lottie-contain:before {
        display: none;
    }
	.features-list-holder .features-list-box{
		padding: 24px !important;
	}
}

/* two columns css Starts ==================== */
.features-list-holder_bg .features-list-box{
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;    
}
.features-list-holder_bg .features-list-box.bg-default{
    background-image: url('../../images/pages/how-we-diff/features-list-box-bg.webp');
}
.features-list-holder_bg .features-list-box.bg-blue{
    background-image: url('../../images/pages/how-we-diff/features-list-box-bg-01.webp');
}
.features-list-holder_bg .features-list-box.bg-blue-light{
    background-image: url('../../images/pages/how-we-diff/features-list-box-bg-02.webp');
}
.features-list-holder .section-header {
    gap: 2rem;
    margin-bottom: 5rem;
    max-width: 76%;
}
.hwd-sect {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}
.hwd-sect > div {
    flex: 1;
}
.hwd-sect-list ul {
    gap: 40px;
}
.hwd-sect-list ul li {
    position: relative;
    gap: 24px;
    display: flex;
    flex-direction: column;
    border-left: 2px solid var(--orange);
    /*opacity: 0.7;*/
    padding-inline: 48px 38px;
    transition: var(--transitionDefault);
}
.hwd-sect-list ul li:before {
    content: '';
    position: absolute;
    left: -2px;
    width: 2px;
    height: 0;
    background-color: var(--orange);
    transition: var(--transitionDefault);
}
.hwd-sect-list ul li:hover:before,
.hwd-sect-list ul li.active:before {
	height: 100%;
}
.hwd-sect-list ul li:hover,
.hwd-sect-list ul li.active{
	opacity: 1;
}
.hwd-sect-img {
    text-align: right;
    display: flex;
    justify-content: flex-end;
    margin-right: -30px;
}

@media screen and (max-width: 1600px) {
	.features-list-holder .section-header {
		max-width: 100%;
	}
	.hwd-sect-list ul {
		gap: 32px;
	}
	.hwd-sect-list ul li {
		padding-inline: 48px 0;
	}
	.hwd-sect-img img {
		width: 88.57%;
	}
	.bg-blue .hwd-sect-img img,
	.bg-blue-light .hwd-sect-img img {
		width: 100%;
	}
}
@media screen and (max-width: 1199px) {
	.features-list-holder .section-header {
		gap: 1.5rem;
		margin-bottom: 2.5rem;
	}
	.hwd-sect-list ul {
		gap: 24px;
	}
	.hwd-sect-img img {
		width: 100%;
	}
	.hwd-sect-list ul li {
		padding-inline: 24px;
	}
	.hwd-sect-img {
	    margin-right: 0;
	}
}
@media screen and (max-width: 991px) {
	.features-list-holder .section-header {
		margin-bottom: 2rem;
	}
	.hwd-sect-list ul li {
		gap: 16px;
		padding-inline: 24px 20px;
	}
}
@media screen and (max-width: 767px) {
	.features-list-holder .section-header {
		gap: 1rem;
		margin-bottom: 2.5rem;
	}
	.hwd-sect {
		gap: 3rem;
		flex-direction: column;
	}
	.hwd-sect-list ul li {
		padding-inline: 24px 0px;
	}
	.hwd-sect-img {
		margin-right: 0;
	}
	.features-list-bg-decor {
		left: -20%;
	}
}

/* two columns css Ends  ==================== */