.playstore.section-blue {
        position: relative;
    }
    
    .red-star {
        background-image: url(../img/icon/unnamed.png?id=2)!important;
    background-position: right !important;
    background-size: 22% !important;
    background-repeat: no-repeat !important;
    background-position-y: 118px !important;
    background-position-x: 1000px !important;
    }
    
    .section-blue {
        background: #085694;
        border-radius: 20px;
        padding: 15px;
        padding-right: 0 !important;
        color: #fff;
        margin-top: 60px;
    }
    
    .padding-left-frame {
        padding-left: 8%;
    }
    
    .frame-wraper[_ngcontent-whg-c50] {
        top: 49%;
        transform: translateY(-50%);
        position: relative;
    }
    
    .swiper-cards {
        overflow: hidden;
    }
    
    .swiper-cards {
        overflow: visible;
    }
    
    .swiper-3d {
        perspective: 1200px;
    }
    
    .swiper-horizontal {
        touch-action: pan-y;
    }
    
    .swiper {
        margin-left: auto;
        margin-right: auto;
        position: relative;
        overflow: hidden;
        overflow: clip;
        list-style: none;
        padding: 0;
        z-index: 1;
        display: block;
    }
    
    .swiper-3d .swiper-wrapper {
        transform-style: preserve-3d
    }
    
    .swiper-android .swiper-slide,
    .swiper-ios .swiper-slide,
    .swiper-wrapper {
        transform: translate3d(0px, 0, 0)
    }
    
    .swiper-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: flex;
        transition-property: transform;
        transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
        box-sizing: content-box
    }
    
    .swiper-cards .swiper-slide {
        height: 390px;
    }
    
    .d-hidden {
        visibility: hidden !important;
    }
    
    .swiper-slide:not(.swiper-slide-active) {
        opacity: .3 !important;
    }
    
    .swiper-cards .swiper-slide {
        transform-origin: center bottom;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        overflow: hidden;
    }
    
    .swiper-3d .swiper-cube-shadow,
    .swiper-3d .swiper-slide {
        transform-style: preserve-3d;
    }
    
    .swiper-slide {
        flex-shrink: 0;
        width: 100%;
        height: 100%;
        position: relative;
        transition-property: transform;
        display: block;
    }
    
    .img-style {
        height: auto;
        padding: 4px 0;
        border-radius: 24px;
    }
    
    .swiper-cards .swiper-slide {
        height: 390px;
    }
    
    .d-hidden {
        visibility: hidden !important;
    }
    
    .swiper-slide:not(.swiper-slide-active) {
        opacity: .3 !important;
    }
    
    .swiper-cards .swiper-slide {
        transform-origin: center bottom;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        overflow: hidden;
    }
    
    .swiper-3d .swiper-cube-shadow,
    .swiper-3d .swiper-slide {
        transform-style: preserve-3d;
    }
    
    .swiper-slide {
        flex-shrink: 0;
        width: 100%;
        height: 100%;
        position: relative;
        transition-property: transform;
        display: block;
    }
    
    .swiper .swiper-notification {
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: none;
        opacity: 0;
        z-index: -1000;
    }
    
    .mob-frame {
        top: 15px;
        position: absolute;
        z-index: 99;
        height: 400px;
        left: 218px;
        width: 204px;
    }
    
    .mob-frame img {
        width: 100%;
        height: 100%;
    }
    
    .frame2 {
        position: absolute !important;
        max-width: 195% !important;
        margin-left: -62% !important;
    }
    
    .right-gap {
        padding-right: 122px;
    }
    
    .slide-heading,
    .slide-heading-inner {
        font-size: 40px;
        font-weight: 700;
        letter-spacing: 0px;
        line-height: 45px;
        margin: 0;
        color:#fff;
    }
    
    .pad-left {
        padding-left: 0 !important;
    }
    
    .pad-left {
        padding: 0 152px 0 0;
    }
    
    .c-stepper__item-two {
        position: relative;
        display: flex;
        gap: 20px;
        padding-bottom: 25px;
    }
    
    .active.c-stepper__item-two:before {
        background-color: #06c67a;
        color: #fff;
    }
    
    .dwn-link,
    .c-stepper__item-two:before,
    .c-stepper__item:before {
        cursor: pointer;
    }
    
    .c-stepper__item-two:before {
        --size: 23px;
        content: "\f00c";
        position: relative;
        font-family: FontAwesome;
        z-index: 1;
        font-size: 13px;
        flex: 0 0 var(--size);
        padding: 0px 5px;
        height: var(--size);
        color: #414099;
        border-radius: 50%;
        background-color: #6060b5;
    }
    
    .active.c-stepper__item-two .c-stepper__title {
        font-weight: 600;
        font-size: 20px;
        color:#fff;
    }
    
    .align-download {
        justify-content: left;
    }
    
    .googlePlay {
        padding-right: 10px;
    }
    /* slider  mobile css */
    
    @media (min-width: 360px) and (max-width: 991.98px) {
        .section-blue {
            margin-left: 5px;
            margin-right: 5px;
            margin-top: 50px !important;
        }
    }
    
    @media (min-width: 360px) and (max-width: 991.98px) {
        .red-star {
            background-image: none;
        }
    }
    
    @media (min-width: 360px) and (max-width: 991.97px) {
        .playstore.section-blue {
            position: relative;
            padding-bottom: 0 !important;
        }
    }
    
    @media (min-width: 360px) and (max-width: 991.97px) {
        .app-benefit-container {
            padding: 0;
            margin: 0 0 10px -15px;
        }
    }
    
    @media (min-width: 360px) and (max-width: 991.97px) {
        .padding-left-frame1 {
            padding-left: 27% !important;
        }
    }
    
    @media (max-width: 576px) {
        .padding-left-frame {
            margin-bottom: 30px !important;
        }
    }
    
    .banner-slider {
        position: relative;
        top: -45px
    }
    
    .banner-slider .Banner-section {
        position: relative
    }
    
    .banner-slider .banner-heading {
        position: absolute;
        top: 10px;
        right: 20px
    }
    
    .banner-slider .banner-subheading {
        position: absolute;
        top: 0;
        right: 0
    }
    
    @media (max-width: 786px) {
        .banner-slider {
            position: inherit;
            top: auto
        }
    }
    
    .banner-slider .slick-initialized .slick-slide {
        width: 100vw
    }
    
    .banner-slider .slick-track.slick-slide {
        width: 100vw!important
    }
    
    @media (max-width: 450px) {
        .banner-slider .waysToBank {
            height: auto;
            margin-top: 10px
        }
    }
    
    @media (max-width: 2100px) {
        .banner-slider .slick-slide img {
            width: 100%!important;
        }
    }
    
    @media (min-width: 2100px) {
        .banner-slider .slick-dotted.slick-slider {
            height: 450px;
            overflow: hidden;
        }
    }
    
    @media (min-width: 360px) and (max-width: 991px) {
        .slick-slider.slick-track {
            height: 630px!important;
        }
        .hide-mobile {
            display: none!important;
        }
    }
    
    @media (max-width: 450px) {
        .slick-slider.slick-track {
            height: 630px!important
        }
    }
    
    .card.prod-slider-cards .card-body {
        width: 100%
    }
    
    .d-seprate {
        margin-top: 18px;
        margin-bottom: 36px;
        gap: 24px
    }
    
    .d-seprate .icon-small {
        display: flex
    }
    
    .title-cad {
        font-size: 24px
    }
    
    .ways-b-c-icons {
        width: 42px;
        height: 42px;
    }
    
    .banking-solutions-c .title-cad {
        width: 80%
    }
    
    .banking-solutions-c .text-cad,
    .ways-to-bank .text-cad {
        font-weight: 400!important
    }
    
    .white-outline-button,
    .white-button {
        margin: 0
    }
    
    .connect-us .sec-heading,
    .ways-to-bank .sec-heading {
        margin-top: 60px;
        margin-bottom: 24px
    }
    
    .button-center {
        display: flex;
        justify-content: center
    }
    
    .title-cad1 {
        font-size: 24px;
        padding: 0 14px!important
    }
    
    .contact-card-text {
        font-size: 18px;
        text-align: left
    }
    
    .playstore.section-blue {
        position: relative
    }
    
    .connect-us {
        max-width: 996px;
        width: 100%
    }
    
    .carousel-off-panel {
        display: flex;
        flex-wrap: nowrap;
        overflow: auto
    }
    
    .frame2 {
        position: absolute!important;
        max-width: 195% !important;
        margin-left: -62%!important
    }
    
    .pad-left {
        padding: 0 152px 0 0
    }
    
    .mob-frame {
        top: 0;
        position: absolute;
        z-index: 99;
        height: 400px;
        left: -10px;
        width: 204px
    }
    
    .mob-frame img {
        width: 100%;
        height: 100%
    }
    
    .swiper-cards .swiper-slide {
        height: 390px
    }
    
    .img-style {
        height: auto;
        padding: 4px 0;
        border-radius: 24px
    }
    
    .frame-wraper {
        top: 49%;
        transform: translateY(-50%);
        position: relative
    }
    
    .d-hidden {
        visibility: hidden!important
    }
    
    .c-stepper__title {
        font-weight: 400;
        font-size: 20px
    }
    
    .active.c-stepper__item-two .c-stepper__title {
        font-weight: 600;
        font-size: 20px
    }
    
    .active.c-stepper__item-two :before {
        background-color: #06c67a;
        color: #fff
    }
    
    .completed.c-stepper__item-two :after,
    .completed.c-stepper__item :after {
        border-color: #06c67a
    }
    
    .align-download {
        justify-content: left;
    }
    
    .para-min-height {
        min-height: 271px;
    }
    
    .mobile-font {
        font-weight: 600!important
    }
    
    @media (max-width: 576px) {
        .pad-left {
            padding: 0!important;
        }
        .banking-solutions-c .title-cad {
            width: 100%;
        }
        .box {
            max-width: 300px;
            width: 70%;
            flex-wrap: nowrap;
            overflow-x: auto;
        }
        .offer-text {
            font-size: 14px;
            line-height: 18px;
            padding: 1px 20px
        }
        .box1 {
            max-width: 400px;
            width: 90%;
            flex-wrap: nowrap;
            overflow-x: scroll
        }
        .xs-6 {
            width: 50%
        }
        .xs-6 .contact-det {
            display: block;
            text-align: center;
            padding: 0!important
        }
        .xs-6 .pad-xs {
            margin-bottom: 17px
        }
        .padding-left-frame {
            margin-bottom: 30px!important
        }
    }
    
    .pad-left {
        padding-left: 0!important
    }
    
    .border-none {
        border-bottom: none!important
    }
    
    .cad-inner-area {
        padding-bottom: 0!important
    }
    
    .whatsapp-pad {
        padding-right: 10px
    }
    
    .mob-app-img {
        position: absolute;
        right: 10rem
    }
    
    .popular-btn {
        background-color: #ffe8ea;
        color: #414099;
        width: 83px;
        height: 29px;
        border-radius: 8px;
        border: none;
        padding: 6px, 16px, 6px, 16px;
        font-size: 14px;
        position: absolute;
        right: 10px;
        z-index: 1;
        top: 20px;
        line-height: 0px!important
    }
    
    .playstore-icons {
        position: absolute;
        left: 30px;
        bottom: 30px;
        z-index: 9
    }
    
    .googlePlay {
        padding-right: 10px
    }
    
    .c-stepper__title,
    .offers {
        font-size: 20px
    }
    
    .off-panel {
        width: 20rem;
        margin: 0 16px
    }
    
    .off-panel1 {
        width: 100%!important;
        max-width: 340px!important;
        margin: 0 16px;
        height: 364px!important
    }
    
    .customer-feedback-card {
        width: 30rem;
        margin: 0 8px;
        border-radius: 20px!important;
        border: rgba(51, 51, 51, .1019607843) solid 1px!important
    }
    
    .open-account {
        font-weight: 600;
        font-size: 16px;
        border-radius: 23px;
        padding: 10px 20px;
        background-color: #414099;
        border: none
    }
    
    .ac-opening-slider {
        margin-top: 4rem
    }
    
    .individual-main-c {
        margin-top: -10px
    }
    
    .contact-det {
        padding-bottom: 0;
        padding-top: 15px
    }
    
    .outer-pad {
        margin: 0
    }
    
    .pad-0 {
        padding-left: 0!important;
        padding-right: 0!important
    }
    
    .ways-card {
        display: flex;
        justify-content: space-between;
        max-width: 387px;
        height: 364px;
        margin: 9px;
        padding: 43px 60px
    }
    
    .ways-card .title-cad {
        padding: 0!important
    }
    
    .ways-card .blue-outline-button {
        padding: 6px 12px
    }
    
    .place {
        font-size: 13px
    }
    
    .sub-head1 {
        font-size: 20px
    }
    
    @media (min-width: 360px) and (max-width: 991.97px) {
        .para-min-height {
            min-height: unset
        }
        .mobile-font {
            font-weight: 600!important
        }
        .c-stepper__title {
            font-weight: 400;
            font-size: 14px
        }
        .active.c-stepper__item-two .c-stepper__title {
            font-weight: 600;
            font-size: 14px
        }
        .get-offer {
            font-weight: 400
        }
        .place {
            font-size: 12px
        }
        .blue-outline-button {
            font-size: 14px
        }
        .sub-head1 {
            font-size: 16px
        }
        .align-download {
            justify-content: center
        }
        .frame2 {
            position: absolute!important;
            width: 169%!important;
            margin-left: -44%!important
        }
        .pad-left {
            padding: 0!important
        }
        .padding-left-frame1 {
            padding-left: 27%!important
        }
        .ways-title {
            padding-right: 32px!important
        }
        .ways-to-bank {
            padding-right: 0!important
        }
        .ways-card {
            width: 285.83px;
            height: 260.44px;
            margin: 0 8px;
            padding: 24px
        }
        .ways-card .btn {
            font-size: 14px!important;
            font-weight: 500;
            padding: 3px 8px!important
        }
        .whatsapp-pad {
            padding-right: 4px
        }
        .mesh {
            margin-bottom: 4rem
        }
        .open-ac-btns {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 16px;
            margin-bottom: 12px;
            align-items: center
        }
        .open-ac-btns button {
            font-size: 14px
        }
        .individual-main-c {
            margin-top: 10px!important
        }
        .stepper-slider-heading {
            text-align: left!important;
            padding-right: 12px
        }
        .ac-opening-slider {
            margin-top: 40px!important
        }
        .playstore.section-blue {
            position: relative;
            padding-bottom: 0!important
        }
        .app-benefit-container {
            padding: 0;
            margin: 0 0 10px -15px
        }
        .align {
            padding: 0
        }
        .connect-us .sec-heading,
        .ways-to-bank .sec-heading {
            margin-top: 40px;
            margin-bottom: 12px
        }
        .circle-icon {
            padding-top: 0!important
        }
        .mob-app-img {
            display: block;
            width: 370px;
            position: relative;
            top: 16px;
            left: 50%;
            margin-top: 12px
        }
        .off-panel1 {
            width: 220px!important;
            height: 241px!important
        }
        .off-panel {
            width: 175px
        }
        .slide-heading {
            text-align: center
        }
        .offers {
            font-size: 14px!important
        }
        .customer-feedback-card {
            width: 286px!important;
            min-height: 360px
        }
        .customer-feedback-card .card-body {
            flex-direction: column;
            align-items: start;
            text-align: start;
            padding: 14px
        }
        .customer-feedback-card .card-body img {
            height: 26px
        }
        .customer-feedback-card .card-body .slide-para-content {
            line-height: 18px;
            margin-top: 12px
        }
        .sec-heading {
            font-size: 20px!important
        }
        .sub-head {
            text-align: center
        }
        .banner-head {
            text-align: center;
            font-size: 26px!important;
            letter-spacing: .8
        }
        .pad-card {
            padding-left: 2px!important
        }
        .pad-left {
            padding-left: 0!important
        }
        .button-center {
            display: flex;
            justify-content: left
        }
        .popular-btn {
            background-color: #ffe8ea;
            color: #414099;
            width: 53px;
            height: 19px;
            border-radius: 5px;
            border: none;
            padding: 4px, 11px, 4px, 11px;
            font-size: 10px;
            line-height: 0px!important
        }
        .show-body-styles {
            font-size: 14px;
            line-height: 16px;
            color: #807d94;
            margin-bottom: 20px
        }
        .banner-head {
            font-size: 26px;
            line-height: 32.5px
        }
        .contact-card-text {
            font-size: 14px;
            font-weight: 500
        }
        .margin-bottom-10px {
            padding-bottom: 20px!important
        }
    }
    
    .mob-card {
        min-height: 40px
    }
    
    .padding-left-frame {
        padding-left: 8%
    }
    
    .way-bank-mobile {
        background-color: #fff;
        border: none;
        color: #414099;
        text-align: center;
        font-family: Work Sans;
        font-size: 22px;
        font-style: normal;
        font-weight: 600;
        line-height: 130%
    }
    
    @media (min-width: 450px) and (max-width: 992px) {
        .cards-circle {
            top: 40%;
            left: 70%
        }
        .pig-circle {
            right: 12%
        }
        .frame2 {
            position: absolute!important;
            width: 169%!important;
            margin-left: -44%!important
        }
        .pad-left {
            padding: 0!important
        }
        .padding-left-frame1 {
            padding-left: 28%!important
        }
    }
    
    @media (max-width: 991.98px) {
        .way-bank-mobile {
            font-size: 16px
        }
    }
    .c-stepper__item-two:not(:last-child):after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    transform: translate(.7rem);
    width: 2px;
    border-left: #cdcdcd dotted 2px;
}


.playstore.section-blue {
        position: relative;
    }
    
    .completed.c-stepper__item-two:after,
    .completed.c-stepper__item:after {
        border-color: #06c67a;
    }
    
    .c-stepper__item-two:not(:last-child):after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        transform: translate(.7rem);
        width: 2px;
        border-left: #cdcdcd dotted 2px;
    } 
    @media (min-width: 360px) and (max-width: 991.97px) {
    .playstore.section-blue {
        position: relative;
        padding-bottom: 0 !important;
    }
}
@media (min-width: 360px) and (max-width: 991.97px) {
    .app-benefit-container {
        padding: 0;
        margin: 0 0 10px -15px;
    }
}
@media (min-width: 360px) and (max-width: 991.97px) {
    .padding-left-frame1 {
        padding-left: 22% !important;
    }
}
@media (max-width: 576px) {
    .padding-left-frame {
        margin-bottom: 30px !important;
    }
}
@media (min-width: 360px) and (max-width: 991.97px) {
    .frame2 {
        position: absolute !important;
        width: 156% !important;
        margin-left: -44% !important;
    }
}
@media (min-width: 360px) and (max-width: 991.97px) {
    .stepper-slider-heading {
        text-align: left !important;
        padding-right: 12px;
    }
}
@media (min-width: 360px) and (max-width: 991.98px) {
    .slide-heading {
        font-size: 20px !important;
        text-align: left;
        padding: 0;
        line-height: normal;
    }
}
@media (min-width: 360px) and (max-width: 991.97px) {
    .pad-left {
        padding-left: 0 !important;
    }
}
<style>
@media (min-width: 360px) and (max-width: 991.97px) {
    .pad-left {
        padding: 0 !important;
    }
}
@media (min-width: 360px) and (max-width: 991.97px) {
    .active.c-stepper__item-two .c-stepper__title {
        font-weight: 600;
        font-size: 14px;
    }
}

@media only screen and (max-width: 767px) {
    .mobile-slider {
        margin-right: 59px !important;
    }
    .modal-content{
        max-width: 95% !important;
    }
}