.rewards-and-loyality {
    padding-block: 48px 0;
    background: var(--Brand-600, #1434CB);
}

.rewards-and-loyality .two-column {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.rewards-and-loyality .rewards-features-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rewards-and-loyality .feature-header {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.rewards-and-loyality .rewards-content .section-header {
    margin-bottom: 40px;
}

.rewards-and-loyality .section-header :is(.text-xl, .section-title) {
    color: #fff
}

.rewards-and-loyality .feature {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border-radius: 24px;
    border: 1px solid rgba(165, 199, 253, 0.51);
    background: #FFF;
    box-shadow: -3.258px 22.805px 26.063px 0 rgba(212, 228, 253, 0.20), -2.134px -1.318px 3.453px 0 rgba(250, 250, 250, 0.22) inset;
    backdrop-filter: blur(9.223981857299805px);
}

.rewards-and-loyality .feature.active .feature-content {
    display: block;
}

.rewards-and-loyality .feature-icon {
    max-width: 28px;
    max-height: 28px;
    flex-shrink: 0;
}

.rewards-and-loyality .section-header.header-desktop {
    display: none
}

.rewards-and-loyality .feature .i2c-icon-add,
.rewards-and-loyality .feature .i2c-icon-subtract {
    font-size: 2rem
}

.rewards-and-loyality .feature .i2c-icon-add {
    display: inline-block;
}

.rewards-and-loyality .feature .i2c-icon-subtract {
    display: none;
}

.rewards-and-loyality .feature.active .i2c-icon-add {
    display: none;
}

.rewards-and-loyality .feature.active .i2c-icon-subtract {
    display: inline-block;
}

.rewards-and-loyality .feature-content {
    display: none
}

.cta-band {
    width: 100%;
    height: 100%;
    background-image: url('../../images/rewards-and-loyality/bg_dark.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.rewards-and-loyality .section-header {
    margin-bottom: 2.5rem
}

@media (max-width: 767px) {

    .rewards-and-loyality .feature-header {
        justify-content: space-between;
        align-items: center;
    }

    .rewards-and-loyality .toggle {
        max-width: 24px;
    }

    .rewards-and-loyality .feature-header .heading-6 {
        flex-grow: 1;
    }

    .rewards-and-loyality .img-holder img {
        transform: translateX(20px);
    }

    .fuel-section .section-title {
        justify-content: center
    }

    .fuel-right-lottie img {
        max-width: 100% !important
    }

    body .fuel-slider-inner .slick-dots {
        padding: 1rem 0 0
    }

}

@media (max-width: 1199px) {
    .rewards-and-loyality .feature {
        border-radius: 1rem;
    }

    .rewards-and-loyality .section-header {
        margin-bottom: 2.5rem
    }
}

/* design screen 768px and above */
@media (min-width: 768px) {
    .rewards-and-loyality {
        padding-block: 60px;
        overflow: hidden;
    }

    .rewards-and-loyality {
        position: relative;
        overflow: hidden;
        z-index: 1;
    }

    .rewards-and-loyality::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('../../images/reports-and-analytics/triangle-light.png');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        z-index: -1;
      
    } 

    .rewards-and-loyality .section-header.header-mobile {
        padding-right: 7rem;
    }

    .rewards-and-loyality .toggle {
        display: none;
    }

    .rewards-and-loyality .feature-content {
        display: block;
    }

    .rewards-and-loyality .two-column {
        flex-direction: row;
        align-items: center;
        gap: 25px;
    }

    .rewards-and-loyality .img-holder {
        max-width: 371px;
        transform: translate(60px) scale(1.4);
        /* for lottie adjustment */
    }

    .rewards-and-loyality .img-holder img {
        width: 100%;

    }

    .rewards-and-loyality .feature-icon {
        max-width: 32px;
        max-height: 32px;
    }

    .rewards-and-loyality .feature-content {
        padding-inline: 48px 0
    }

}



/* design screen 1024px = 992px and above */
@media (min-width: 992px) {
    .rewards-and-loyality::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('../../images/reports-and-analytics/triangle-light.png');
        background-size: cover;
        background-position: left center;
        background-repeat: no-repeat;
        z-index: -1;
        transform: translateX(-50%);
    }

    .rewards-and-loyality::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-image: url('../../images/reports-and-analytics/triangle-dark.png');
        background-size: cover;
        background-position: right center;
        background-repeat: no-repeat;
        z-index: -1;
        transform: translateY(30%) translateX(50%);
    }

    .rewards-and-loyality .feature-header {
        gap: 24px;
    }

    .rewards-and-loyality .two-column {
        gap: 93px;
    }

    .rewards-and-loyality .rewards-content {
        max-width: 453px;
    }

    .rewards-and-loyality .feature-content {
        padding-inline: 56px 0
    }

    .rewards-and-loyality .img-holder {
        max-width: 539px;
    }


}

/* design screen 1366px = 1200px and above */
@media (min-width: 1200px) {
    .rewards-and-loyality .section-header.header-desktop {
        display: flex
    }

    .rewards-and-loyality .section-header.header-mobile {
        display: none
    }

    .rewards-and-loyality {
        padding-block: 100px 0;
    }

    .rewards-and-loyality .two-column {
        gap: 131px;
    }

    .rewards-and-loyality .rewards-content {
        max-width: 600px;
        padding-block: 0 100px
    }

    .rewards-and-loyality .img-holder {
        max-width: 517px;
        transform: translateY(50px) translateX(120px) scale(1.62);
        /* for lottie */
    }

    .rewards-and-loyality .feature {
        padding: 40px;
    }

    .rewards-and-loyality .feature-icon {
        max-width: 34px;
        max-height: 34px;
    }

    .rewards-and-loyality .feature-content {
        padding-inline: 58px 0
    }

    .rewards-and-loyality .section-header {
        margin-bottom: 48px
    }
}

/* design screen 1920px = 1601px and above */
@media (min-width: 1601px) {
    .rewards-and-loyality .two-column {
        gap: 165px;
    }

    .rewards-and-loyality .section-header {
        margin-bottom: 60px
    }

    .rewards-and-loyality .rewards-content {
        width: 860px !important;
        max-width: 860px !important;
        padding-block: 0 120px;
    }

    .rewards-and-loyality .img-holder {
        max-width: 735px;
       transform: translateY(50px) translateX(100px) scale(1.3);
        /* for lottie */
    }

    .rewards-and-loyality {
        padding-block: 120px 0;
    }

    .rewards-and-loyality .section-header.header-desktop {
        padding-right: 2rem
    }

}

@media (min-width: 1601px) and (max-width: 1920) {
    .rewards-content {
        width: 860px !important;
        max-width: 860px !important;
    }

    .rewards-and-loyality .rewards-content {
        width: 860px !important;
        max-width: 860px !important;
    }
}


@media (min-width: 1921px) {
    /*.rewards-and-loyality .container {
        max-width: 88%;
        padding-inline: var(--containerFluidPadding) 0;
        margin-inline: unset;
        margin-left: auto;
    }*/

    .rewards-and-loyality .rewards-content {
        max-width: unset;
    }

   
}

/* END - Section Features list Grid styles */

@media (min-width: 1200px) and (max-width: 1600px) {
    .debit-hero-wrap .intro-component-video {
        max-width: 500px;
    }

    .debit-hero-wrap .intro-component-video img {
        max-width: 100%;
    }
}
@media (min-width: 768px) and (max-width: 990px){
.cta-band .cta-band-content{
padding-inline: 11.6rem;}
}

@media (min-width: 991px) and (max-width: 1365px){
.cta-band .cta-band-content{
padding-inline: 9rem;}
}
@media (min-width: 1366px) and (max-width: 1600px){
.cta-band .cta-band-content{
padding-inline: 2rem;}
}