#service {
    color: #202020;
}

#service .main-color-red {
    color: #e31c79;
}

#service .breadcrumb-item+.breadcrumb-item::before {
    float: left;
    padding-right: 0.5rem;
    color: #626262;
    content: var(--bs-breadcrumb-divider, "/");
}

#service .main-color-black {
    color: #202020;
}

#service .main-color-grey {
    color: #626262;
}

#service .main-color-blue {
    color: #003f67;
}

#service .main-bg-color-blue {
    background-color: #003f67;
}

#service .main-bg-color-red {
    color: #e31c79;
}

#service .umay-red {
    color: #e31c79;
}

#service .card {
    position: relative;
}

#service .cardless-section1 {
    position: relative;
}

#service .cardless-bg-header {
    background-image: url("/static/images/Cardless/bg/cardless-bg-header-destop.png");
    z-index: 0;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: top;
    background-size: cover;
    /* margin-top: -30vw; */
    /* height: 1300px; */
}

#service .cardless-bg-footer {
    background-image: url("/static/images/Cardless/bg/cardless-bg-footer-destop.svg");
    z-index: 0;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: bottom;
    background-size: cover;
}

#service .padding-top-82 {
    padding-top: 82px;
}

#service .height-100 {
    height: 100vh;
}

#service .cardless-conten.header {
    padding-bottom: 50px;
}

#service .cardless-content p {
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    color: #202020;
    text-align: start;
}

#service .cardless-content h1 {
    font-style: normal;
    font-weight: 500;
    font-size: 80px;
    line-height: 80px;
    color: #003f67;
}

#service .cardless-content h2 {
    font-weight: 500;
    font-size: 48px;
    line-height: 50px;
    color: #003f67;
}

#service .cardless-content h4 {
    font-weight: 400;
    font-size: 24px;
    line-height: 28px;
    color: #202020;
}

#service .card-section-1 {
    background: linear-gradient(180deg, #adeaff 0%, #edfaff 100%);
    padding: 60px 50px;
    margin-top: 100px;
    border-radius: 40px;
}

#service .card-section-2 {
    background: #ffffff;
    /* Drop Shadow/XLarge */
    padding: 60px 40px 60px 80px;
    box-shadow: 4px 14px 30px rgba(9, 30, 66, 0.1);
    border-radius: 40px;
    margin-top: 80px;
}

#service .accordion-header {
    font-weight: 500;
    font-size: 34px;
    line-height: 36px;
    color: #ffffff;
}

#service .accordion-button {
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
    font-weight: 700;
    font-size: 24px;
    line-height: 28px;
    border-radius: 40px !important;
    font-weight: 700;
    font-size: 24px;
    line-height: 28px;
    color: #003F67;
}

#service .accordion-button.accordion-button-2 {
    background: #d7f5ff;
    font-weight: 700;
    font-size: 24px;
    line-height: 28px;
    border-radius: 40px !important;
}

#service .accordion-button.collapsed {
    border-radius: 40px;
}

#service .accordion-borderless #service .accordion-item #service .accordion-button:not(.collapsed) {
    color: #003f67;
}

#service .accordion-borderless #service .accordion-item #service .accordion-button#service .accordion-button-2:not(.collapsed) {
    background: #d7f5ff;
}

#service .accordion-button:not(.collapsed)::after {
    background-image: url("/static/images/Cardless/icon/minus-svgrepo-com.svg") !important;
}

#service .accordion-button.collapsed::after {
    background-image: url("/static/images/Cardless/icon/plus-svgrepo-com.svg") !important;
}

#service .accordion-cardless-text-header {
    font-weight: 500;
    font-size: 34px;
    line-height: 36px;
    color: #202020;
    padding-bottom: 20px;
}

#service .accordion-cardless-text-content p {
    font-weight: 500;
    font-size: 24px;
    line-height: 28px;
    color: #003f67;
}

#service .carousel-indicators .active {
    background-color: #e31c79;
}

#service .carousel-indicators {
    bottom: -53px;
}

#service .carousel-control-prev {
    bottom: -60px;
    left: -15px;
}

#service .carousel-control-next {
    bottom: -60px;
    right: -15px;
}

#service .carousel {
    top: 30px !important;
}

#service .step-img {
    width: 50%;
}

#service .btn-step-cardless,
#service .btn-atm-cardless {
    border-radius: 40px;
    padding: 0 40px;
    width: 100%;
    /* height: 5vh; */
    color: black;
    text-align: start;
}

#service .btn-step-cardless:hover,
#service .btn-atm-cardless:hover {
    background-color: #ffffff66;
}

#service .breadcrumb a,
#service .breadcrumb-item.active,
#service .breadcrumb-item::before {
    color: #626262 !important;
}

@media (min-width: 350px) and (max-width: 992px) {
    #service .h-500 {
        /* height: 0 !important; */
    }

    .cardless-content.h-500 {
        height: 542px !important;
    }

    #service .carousel {
        top: 30px !important;
    }

    #service .btn-step-cardless,
    #service .btn-atm-cardless {
        border-radius: 40px;
        padding: 10px 40px;
        width: 100%;
        color: black;
        text-align: start;
    }

    #service .cardless-bg-header {
        background-image: url("/static/images/Cardless/bg/cardless-bg-header-destop.png");
        z-index: 0;
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-position: top;
        background-size: cover;
    }

    #service .step-img {
        width: 200px;
    }

    #service .height-100 {
        height: 100vh;
    }

    #service .cardless-content {
        padding-bottom: 0px;
    }

    #service .cardless-content p {
        font-weight: 500;
        font-size: 20px;
        line-height: 28px;
        color: #202020;
        text-align: start;
    }

    #service .cardless-content h1 {
        font-weight: 500;
        font-size: 48px;
        line-height: 50px;
        color: #003f67;
    }

    #service .cardless-content h2 {
        font-weight: 500;
        /* font-size: 34px; */
        line-height: 36px;
        text-align: center;
        /* color: #202020; */
    }

    #service .cardless-content h4 {
        font-weight: 400;
        font-size: 20px;
        line-height: 22px;
        color: #202020;
    }

    #service .row>* {
        flex-shrink: 0;
        width: 100%;
        max-width: 100%;
        padding-right: 0;
        padding-left: 0;
        margin-top: var(--mdb-gutter-y);
    }

    #service .card-section-1 {
        background: linear-gradient(180deg, #adeaff 0%, #edfaff 100%);
        padding: 30px 5px;
        border-radius: 40px;
    }

    #service .card-section-2 {
        background: #ffffff;
        /* Drop Shadow/XLarge */
        padding: 25px 25px;
        box-shadow: 4px 14px 30px rgba(9, 30, 66, 00.1);
        border-radius: 40px;
        margin-top: 0px;
    }

    #service .accordion-header {
        font-weight: 500;
        font-size: 34px;
        line-height: 36px;
        color: #ffffff;
    }

    #service .accordion-button {
        background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
        font-weight: 700;
        font-size: 24px;
        line-height: 28px;
        border-radius: 20px !important;
        padding: 13px 20px;
    }

    #service .accordion-button.accordion-button-2 {
        font-weight: 700;
        font-size: 20px;
        line-height: 22px;
        color: #003f67;
        border-radius: 40px !important;
    }

    #service .accordion-button.collapsed {
        border-radius: 40px;
    }

    #service .accordion-borderless #service .accordion-item #service .accordion-button:not(.collapsed) {
        color: #003f67;
    }

    #service .accordion-borderless #service .accordion-item #service .accordion-button#service .accordion-button-2:not(.collapsed) {
        background: #d7f5ff;
    }

    #service .accordion-body {
        padding: 10px;
    }

    #service ul {
        padding-left: 1rem;
    }

    #service .accordion-cardless-text-header {
        font-weight: 500;
        font-size: 34px;
        line-height: 36px;
        color: #202020;
        padding-bottom: 20px;
    }

    #service .accordion-cardless-text-content p {
        font-weight: 500;
        font-size: 24px;
        line-height: 28px;
        color: #003f67;
    }

    #service .carousel-indicators .active {
        background-color: #e31c79;
    }

    #service .carousel-indicators {
        bottom: -57px;
    }

    #service .carousel-control-prev {
        bottom: 0vw;
        left: 0vw;
    }

    #service .carousel-control-next {
        bottom: 0vw;
        right: 0vw;
    }

    #service .carouselStepUseDisplay {
        top: -166px !important;
    }

    #service .carousel[b-2y50ziv98s] {
        top: 0px !important;
    }
}


/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) and (max-width: 991px) {
    #service .card-section-1 {
        padding: 50px 50px;
        margin-top: 100px;
    }

    #service .card-section-2 {
        padding: 50px 50px;
        margin-top: 100px;
    }

    #service .carousel-control-prev {
        bottom: 0vw;
        left: 1vw;
    }

    #service .carousel-control-next {
        bottom: 0vw;
        right: 1vw;
    }

    #service .accordion-button {
        font-weight: 700;
        /* font-size: 20px; */
        line-height: 28px;
    }

    #service .accordion-button.accordion-button-2 {
        font-weight: 700;
        /* font-size: 20px; */
        line-height: 28px;
    }

    #service .cardless-content h2 {
        text-align: center;
    }
}


/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) and (max-width: 1199px) {

    /* #service .breadcrumb {
    padding-top: 50px !important;
  } */
    #service .card-section-1 {
        padding: 50px 50px;
        margin-top: 100px;
    }

    #service .card-section-2 {
        padding: 50px 50px;
        margin-top: 100px;
    }

    #service .carousel-control-prev {
        bottom: -22px;
        left: -45px;
    }

    #service .carousel-control-next {
        bottom: -22px;
        right: -45px;
    }

    #service .accordion-button {
        font-weight: 700;
        /* font-size: 20px; */
        line-height: 28px;
    }

    #service .accordion-button.accordion-button-2 {
        font-weight: 700;
        /* font-size: 20px; */
        line-height: 28px;
    }
}

@media (min-width: 1900px) {
    #service .carousel-indicators {
        bottom: -75px;
    }

    #service .carousel-control-prev {
        /* bottom: -22vw; */
        left: 1vw;
    }

    #service .carousel-control-next {
        /* bottom: -22vw; */
        right: 1vw;
    }
}

#service .h-500 {
    height: 600px;
}