body {
    overflow-y: scroll !important;
}

#dreamwallet .banner {
    background-image: url('/umay/images/dreamwallet/dreamwallet-banner.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    background-position: top;
    min-height: 100%;
    height: 934px;
}

.phone-main {
    position: absolute;
    top: -20%;
}

.box-phone-2 {
    /* right: -27rem; */
    position: absolute;
    top: -100%;
}

.what-is-dreamwall {
    /* margin-left: 20rem; */
    margin-top: 122px;

}

.carousel-indicators [data-mdb-target] {
    margin-left: 5px;
}

#dreamwallet .main-color-white {
    color: #FFFFFF;
}

#dreamwallet .main-color-dark-blue {
    color: #003F67;
}

.wording-dream {
    width: 50%;
}

.wording-wallet {
    width: 25%;
    height: 25%;
}

.googlepay-img,
.appstore-img {
    width: 32%;
    cursor: pointer;
}

#dreamwallet .logo-download {
    text-align: start;
}


#dreamwallet .carousel {
    position: absolute;
    /* left: -56px; */
    top: -50%;
}

#dreamwallet .carousel.carousel-main {
    width: 100%;
    position: relative;
    top: 0%;
}

#dreamwallet .carousel-step-service {
    left: 562px;
    top: -190px
}

#dreamwallet .carousel.carousel-main {
    width: 100%;
    position: relative;
    top: 0%;
}

#dreamwallet-carousel-mobile .carousel-item {
    height: 66px;
}

#dreamwallet .phone {
    width: 100%;
}

#dreamwallet .phone-2 {
    width: 100%;
}

#dreamwallet .phone-3 {
    width: 50%;
    text-align: center;
}

.img-phone-2 {
    top: -170px;

}

.img-phone-3 {
    text-align: center;
    position: absolute;
    top: -138px;
}

.selector-21-header {
    color: #FFFFFF;
    font-size: 64px;
    font-weight: 500;
    line-height: 66px
}

.selector-21-sub {
    position: absolute;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 500;
    line-height: 36px;
    top: 231px;
}

.phone-section-21 {
    width: 25%;
    margin-left: 40px;
}

.carousel-indicators {
    position: absolute;
    right: -50rem;
    bottom: 20.5rem;
}


.carousel-control-prev img,
.carousel-control-next img {
    z-index: 999;
}

.carousel-indicators.carousel-indicators-main {
    left: -1358px;
    text-align: start;
    bottom: -2rem;
}

#dreamwallet-carousel .carousel-item {
    height: 152px;
}

.carousel-indicators.how-to-use {
    position: absolute;
    left: 0;
    right: 5px;
    bottom: 10.5rem;
}

.carousel-indicators button.active {
    background: #00B4F1;
}

#dreamwallet .way-to-download {
    padding-top: 24px !important;
}

.list-dreamwallet-bar {
    width: 100%;
}

a.list-dreamwallet-btn.active {
    background: #E31C79;
    border-radius: 40px;
    padding: 8px 20px;
    font-size: 24px;
    font-weight: 500;
    line-height: 28px;
    text-align: start;
    color: #ffffff;
    width: 80%;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

a.list-dreamwallet-btn {
    border: none;
    background-color: transparent;
    font-size: 24px;
    font-weight: 500;
    line-height: 28px;
    text-align: start;
    color: #ffffff;
    padding: 8px 20px;
    width: 80%;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.circle {
    background: #FFFFFF;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    cursor: pointer;
}

.circle.active {
    background: #E31C79;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    box-shadow: 0 0 0 6px #E31C7980;
}

.text-carousel-21 {
    position: absolute;
    font-size: 30px;
    font-weight: 400;
    line-height: 36px;
    text-align: start;
    left: 415px;
    top: 195px;
    width: 560px;
    word-wrap: break-word;
}

#dreamwallet-how-to-use-carousel {
    width: 100%;
}

#dreamwallet .text-question {
    color: #FFFFFF;
    font-size: 64px;
    font-weight: 500;
    line-height: 66px;
}

#dreamwallet .question {
    position: absolute;
    top: -50%;
    width: 100%;
}

#dreamwallet .accordion {
    --mdb-accordion-border-color: #003F67;
}

#dreamwallet .accordion-item .accordion-button {
    background-color: #003F67;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 500;
    line-height: 28px;
}

#dreamwallet .accordion-item {
    border-radius: 8px;
}

#dreamwallet .accordion-item .accordion-body {
    color: #003F67;
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
}

.accordion-button:after {
    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/></svg>");
}

.accordion-button:not(.collapsed):after {
    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/></svg>");
}

.carousel-control-next.section-2-1 {
    right: 36.5rem;
    height: 55px;
    top: 45%;
}


.carousel-control-prev.section-2-1 {
    left: -5rem;
    height: 55px;
    top: 45%;
}

.text-carousel-41 {
    position: absolute;
    font-size: 30px;
    font-weight: 400;
    line-height: 36px;
    text-align: start;
    left: 415px;
    top: 140px;
    width: 550px;
    word-wrap: break-word;

}

.carousel-control-next.section-4-1 {
    right: 39.5rem;
}


.carousel-control-prev.section-4-1 {
    left: -7rem;
}

#dreamwallet-payment-carousel .carousel-item-image {
    text-align: start;
}

.selector-41-header {
    color: #FFFFFF;
    font-size: 64px;
    font-weight: 500;
    line-height: 66px;
    position: absolute;
    top: -50px;
}

.selector-41-sub {
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;

}

.box-content-41 {
    position: absolute;
    top: 157px;
    border-radius: 10px;
    background: #003F67;
    padding: 14px;
    width: 90%;

}

.phone-section-41 {
    width: 25%;
    margin-left: 40px;

}

.carousel-indicators.payment {
    position: absolute;
    left: 0;
    right: 54px;
    bottom: 273px;
}

#dreamwallet-payment-carousel {
    width: 100%;
}


.nav-pills {
    background: #FFFFFF;
    border-radius: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    height: 62px;

}

.nav-pills .nav-link.active {
    color: #FFFFFF;
    background-color: #003F67;
    font-size: 24px;
    font-weight: 500;
    line-height: 28px;
    border-radius: 50px;
    border-bottom: none;
    text-align: center;
    padding: 9px 1rem;
    /* width: 250px; */

}

.nav-pills .nav-link {
    color: #003F67 !important;
    background-color: #FFFFFF;
    font-size: 24px;
    font-weight: 500;
    line-height: 28px;
    border-radius: 50px;
    text-align: center;
    padding: 9px 1rem;
    /* width: 250px; */
}

.tab-pane {
    position: relative;
}

#dreamwallet .dreamwallet-step-service-carousel {
    position: absolute;
}

.phone-section-31 {
    /* width: 63.72%; */
    width: 61.266%;
    height: 102%;
    /* margin-left: -82px; */
}

.phone-section-31-2 {
    /* width: 257.42px; */
    /* height: 528.04px; */
    /* margin-left: -64px */
}

#carouselBasicExample .carousel-item {
    text-align: end;
}

#carouselBasicExample2 .carousel-item {
    text-align: end;
}

.text-carousel-31 {
    position: absolute;
    left: -35rem;
    top: 12rem;
    font-size: 30px;
    font-weight: 400;
    line-height: 36px;
    text-align: start;
    width: 600px;
    word-wrap: break-word;
}

.selector-31-header {
    position: absolute;
    font-size: 64px;
    font-weight: 500;
    line-height: 66px;
    top: -6rem;
    /* width: 100vw; */
}

#carouselBasicExample .carousel-item,
#carouselBasicExample2 .carousel-item {
    /* margin-top: -29%; */
}

#carouselBasicExample .carousel-indicators {
    left: -139.5rem;
    bottom: 9rem;

}

#carouselBasicExample2 .carousel-indicators {
    left: -137.5rem;
    bottom: 9rem;

}

#carouselBasicExample .carousel-indicators [data-mdb-target],
#carouselBasicExample2 .carousel-indicators [data-mdb-target],
#dreamwallet-how-to-use-carousel .carousel-indicators [data-mdb-target],
#dreamwallet-payment-carousel .carousel-indicators [data-mdb-target] {
    margin-left: 4px;
}


.carousel-control-prev.section-3-1 {
    left: 6rem;
    top: 50%;
    height: 40px;
}

.carousel-control-next.section-3-1 {
    /* left: 28.5rem; */
    right: -4rem;
    top: 50%;
    height: 40px;
}

.banner.section-2 {
    align-items: center;
}

.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
    transition: opacity 0s 0.1s;
}

#section-2 .container {
    display: flex;
    flex-direction: column;
}

.panel,
.panel-group .panel-heading+.panel-collapse>.panel-body {
    border: none;
}

@media (min-width: 350px) and (max-width: 766px) {
    #section-2 .container {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .box-phone-2 {
        position: relative;
        top: 0;
        padding: 0 24px;
    }

    .what-is-dreamwall {
        /* margin-left: 20rem; */
        margin-top: 16px;
    }

    #section-2 .h3 {
        font-size: 23px !important;
        padding: 0 38px;
    }

    #dreamwallet .banner.section-1 {
        height: 730px;
    }

    #dreamwallet .way-to-download {
        padding-top: 18px !important;
    }

    #dreamwallet .carousel.carousel-main {
        top: -36px;
    }

    .carousel-indicators.carousel-indicators-main {
        left: 0;
        text-align: start;
        bottom: -5.5rem;
    }

    .nav-scroll {
        position: fixed;
        top: 30dvh;
        z-index: 999;
    }

    #dreamwallet .banner.section-6 {
        height: auto;
    }

    #dreamwallet .banner.banner.section-3 {
        padding: 48px 0;
        height: 736px;
    }

    #dreamwallet .banner.banner.section-4 {
        padding: 32px 0;
        height: 760px;
    }

    #dreamwallet .banner.banner.section-5 {
        padding: 16px 0;
        height: 924px;
    }

    .banner.section-2 {
        align-items: normal;
    }

    #dreamwallet-how-to-use-carousel-mobile.carousel {
        position: absolute;
        height: 350px;
    }

    .list-dreamwallet-bar {
        padding-top: 50%
    }

    #selector-11 {
        padding: 20% 0;
    }

    #selector-21 {
        padding: 16% 0;
    }

    #selector-31 {
        padding-top: 1.5vh;
    }

    #selector-41 {
        padding: 24px 8px;
    }

    .phone-section-41 {
        margin-left: 0;
    }

    #selector-51 {
        padding: 35% 0;
    }

    .phone-section-31 {

        margin-left: 0;
    }

    #carouselBasicExample .carousel-indicators [data-mdb-target],
    #carouselBasicExample2 .carousel-indicators [data-mdb-target],
    #dreamwallet-how-to-use-carousel .carousel-indicators [data-mdb-target],
    #dreamwallet-payment-carousel .carousel-indicators [data-mdb-target],
    #dreamwallet-carousel .carousel-indicators [data-mdb-target],
    #dreamwallet-how-to-use-carousel-mobile .carousel-indicators [data-mdb-target] {
        margin-left: 4px;
    }

    .selector-11 {
        text-align: center;
    }

    .h1-m {
        font-size: 34px !important;
        font-weight: 500 !important;
        line-height: 36px !important;
    }

    .phone-2 {
        text-align: center;
    }

    .img-phone-2 {
        /* position: absolute; */
        width: 85%;
        margin-bottom: 18px;
        /* left: 50%;
        transform: translate(-50%, -50%); */
    }

    .h1-m {
        font-size: 34px;
        font-weight: 500;
        line-height: 36px;
        text-align: center;
    }

    .h3 {
        font-size: 18px !important;
        font-weight: 400 !important;
        line-height: 22px !important;
        text-align: center;
    }


    #dreamwallet .banner {
        background-image: url('/umay/images/dreamwallet/dreamwallet-banner-mobile.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: scroll;
        background-position: top;
        min-height: 100%;
        height: 685px;
    }

    #dreamwallet .carousel {
        position: relative;
        left: 0;
        top: 0;

    }

    .carousel-indicators {
        position: relative;
        bottom: -16.5rem;
    }

    #dreamwallet .phone {
        width: 80%;
    }

    #dreamwallet .phone-2 {
        width: 100%;
        top: -25px;
    }


    .way-to-download {
        text-align: center;
    }

    #dreamwallet .logo-download {
        justify-content: center;
        padding-top: 0.5rem;
    }

    #dreamwallet .selector {
        padding-bottom: 24px;
    }

    .circle {
        background: #FFFFFF;
        border-radius: 50%;
        width: 12px;
        height: 12px;

    }

    .circle.active {
        background: #E31C79;
        border-radius: 50%;
        width: 12px;
        height: 12px;
        box-shadow: 0 0 0 7px #E31C7980;
    }

    .list-dreamwallet-bar {
        position: absolute;
        top: 75px
    }

    .img-section-2 {
        top: 140px
    }

    .selector-21 {
        margin: 0;
    }

    .selector-21-header {
        color: #FFFFFF;
        font-size: 34px;
        font-weight: 500;
        line-height: 36px;
        text-align: center;
        margin-bottom: 24px;
    }

    .text-carousel-21 {
        text-align: center;
        left: 0;
        top: 0;

    }

    .phone-section-21 {
        width: 55%;
        margin-left: 0;
    }

    .selector-21-sub {
        font-size: 24px;
        top: 592px;
        text-align: center;
    }

    #carouselBasicExample-mobile .carousel-item,
    #carouselBasicExample2-mobile .carousel-item {
        height: 435px;
    }

    #dreamwallet-payment-carousel-mobile .carousel-item {
        height: 470px;
    }

    .carousel-indicators.how-to-use {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 40px;
        height: 10px;
    }

    .text-carousel-21 {
        position: relative;
        font-size: 24px;
        font-weight: 400;
        line-height: 22px;
        text-align: center;
        margin-top: 55px;
        /* left: 415px;
        top: 195px; */
        width: 100%;
        padding: 0 24px;

    }

    .carousel-control-prev.section-2-1 {
        left: 28px;
        top: 50%;
    }

    .carousel-control-next.section-2-1 {
        /* left: 247px; */
        right: 28px;
        top: 50%;
    }

    .carousel-control-prev.section-4-1 {
        left: 28px;
        top: 35%;
        height: 45px;
    }

    .carousel-control-next.section-4-1 {
        /* left: 247px; */
        right: 28px;
        top: 35%;
        height: 45px;
    }

    .carousel-control-prev img,
    .carousel-control-next img {
        width: 44px;
        height: 44px;

    }



    /* section-5 */
    #dreamwallet .text-question {
        color: #FFFFFF;
        font-size: 34px;
        font-weight: 500;
        line-height: 36px;
        text-align: center;
    }

    #dreamwallet .accordion {
        --mdb-accordion-bg: transparent;
    }

    #dreamwallet .accordion-item {
        margin-top: 16px;
    }

    #dreamwallet .accordion-item .accordion-button {
        padding: 16px;
        font-size: 20px;
        font-weight: 500;
        line-height: 22px
    }

    #dreamwallet .accordion-item .accordion-body {
        padding: 16px;
        font-size: 20px;
        font-weight: 400;
        line-height: 22px;
        background: #ffffff;
    }

    ol,
    ul {
        padding-left: 1rem;
    }

    #dreamwallet .question {
        position: relative;
        top: 0;
    }

    .selector-41-header {
        color: #FFFFFF;
        font-size: 34px;
        font-weight: 500;
        line-height: 36px;
        text-align: center;
        margin-bottom: 20px;
        position: relative;
        top: 0;
    }

    .phone-section-41 {
        width: 52.1%;
    }

    .box-content-41 {
        position: relative;
        top: 24px;
        border-radius: 10px;
        background: #003F67;
        padding: 8px;

    }

    #dreamwallet-payment-carousel .carousel-item-image,
    #dreamwallet-payment-carousel-mobile .carousel-item-image {
        text-align: center;
    }


    #dreamwallet-payment-carousel .carousel-indicators.payment {
        position: absolute;
        left: 0;
        right: 0px;
        bottom: 12px;
    }

    #dreamwallet-payment-carousel-mobile .carousel-indicators.payment {
        position: absolute;
        left: 0;
        right: 0px;
        bottom: 50px;
    }

    .nav-pills {
        background: #FFFFFF;
        border-radius: 50px;
        width: auto;
        padding: 4px;
        display: flex;
        justify-content: center;
        height: auto;
        margin: 0;

    }

    .nav-item {
        display: flex;
        align-items: center;
    }

    .nav-pills .nav-link.active {
        color: #FFFFFF;
        background-color: #003F67;
        font-size: 20px;
        font-weight: 500;
        line-height: 22px;
        border-radius: 50px;
        border-bottom: none;
        padding: 9px 16px;
        margin: 3px;

    }

    .nav-pills .nav-link {
        color: #003F67 !important;
        background-color: #FFFFFF;
        font-size: 20px;
        font-weight: 500;
        line-height: 22px;
        border-radius: 50px;
        padding: 9px 16px;
        margin: 3px;
    }

    .selector-31-header {
        position: relative;
        font-size: 34px;
        font-weight: 500;
        line-height: 36px;
        top: 0;
        margin-bottom: 20px;
        text-align: center;
    }

    #carouselBasicExample .carousel-item {
        justify-content: center;
        margin-top: 0;
    }

    #carouselBasicExample2 .carousel-item {
        margin-top: 0;
    }

    .text-carousel-31 {
        position: relative;
        left: 0;
        top: 0;
        font-size: 21px;
        font-weight: 400;
        line-height: 22px;
        margin-top: 34px;
        text-align: center;
        padding: 0 24px;
        width: 100%;
    }

    .box-content-return {
        padding: 0 24px;
    }

    #carouselBasicExample .carousel-item,
    #carouselBasicExample2 .carousel-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .carousel-control-prev.section-3-1 {
        left: 28px;
        top: 40%;
        height: 44px;
    }

    .carousel-control-next.section-3-1 {
        right: 28px;
        top: 40%;
        height: 44px;
        /* left: 0; */
    }

    .googlepay-img,
    .appstore-img {
        width: 40%;
    }

    .carouselBasicExample-mobile {
        position: relative;
        bottom: -48px;
        right: 0;
    }

    .carouselBasicExample-mobile-2 {
        position: relative;
        bottom: -48px;
        right: 0;
    }

    .box-content-41 {
        margin: 0 24px;
    }

    .text-carousel-41 {
        line-height: 28px;
        font-size: 24px;
        text-align: center;
        left: 0;
        top: 411px;
        width: 100%;
    }

    #dreamwallet .banner.banner.section-3 {
        padding: 80px 0;
    }

    #dreamwallet .banner.banner.section-4 {
        padding: 64px 0;
    }

    #dreamwallet .banner.banner.section-5 {
        padding: 52px 0;
    }

}

/* fixed display on 390 and 428 */
@media (min-width: 390px) and (max-width: 413px) {


    #dreamwallet .banner.banner.section-3 {
        padding: 48px 0;
        height: 736px;
    }

    #dreamwallet .banner.banner.section-4 {
        padding: 32px 0;
        height: 785px;
    }

    #dreamwallet .banner.banner.section-5 {
        padding: 16px 0;
        height: 924px;
    }

    #dreamwallet .banner.banner.section-3 {
        padding: 80px 0;
    }

    #dreamwallet .banner.banner.section-4 {
        padding: 78px 0;
    }

    #dreamwallet .banner.section-1 {
        height: 750px;
    }

    .carousel-indicators {
        position: relative;
        bottom: -392px;
    }

    .text-carousel-21 {
        margin-top: 41px;
        padding: 0 24px;
    }

    #carouselBasicExample .carousel-indicators {
        bottom: 72px;
        z-index: 999;
        left: 34%;
        transform: translate(-50%, -50%);
    }

    .text-carousel-41 {
        line-height: 28px;
        font-size: 24px;
        text-align: center;
        left: 0;
        top: 453px;
    }

    #dreamwallet-payment-carousel-mobile .carousel-indicators.payment {
        bottom: 41px;
    }

    #dreamwallet-payment-carousel-mobile .carousel-item {

        height: 500px;
    }

    .box-content-return {
        padding: 0 28px;
    }


}

@media (min-width: 412px) and (max-width: 767px) {

    #dreamwallet .banner.banner.section-3 {
        padding: 96px 0;
        height: 824px;
    }

    #dreamwallet .banner.banner.section-4 {
        padding: 68px 0;
        height: 844px;
    }

    #dreamwallet .banner.banner.section-5 {
        height: 110dvh;
        padding: 22px 0;
    }

    #selector-41 {
        padding: 52px 8px;
    }

    #dreamwallet .banner.section-1 {
        height: 769px;
    }

    .banner.banner.section-3 {
        padding: 58px 0;
        height: 100dvh;
    }

    .carousel-indicators {
        position: relative;
        bottom: -412px;
    }

    .text-carousel-21 {
        margin-top: 48px;
        padding: 0 24px;
    }

    #selector-21 {
        padding: 10% 0;
    }

    .carousel-indicators.how-to-use {
        position: absolute;
        left: 0;
        right: 0;
        bottom: -134px;
        height: 10px;
    }

    #selector-21 {
        padding: 11% 0;
    }

    .selector-21-sub {
        top: 645px;
    }

    #carouselBasicExample .carousel-indicators {
        bottom: 72px;
        z-index: 999;
        left: 34%;
        transform: translate(-50%, -50%);
    }

    .phone-section-31 {
        width: 55%;
        height: 99.5%;
    }

    .carouselBasicExample-mobile {
        position: relative;
        bottom: -42px;
        right: 0;
    }

    .carouselBasicExample-mobile-2 {
        position: relative;
        bottom: -42px;
        right: 0;
    }

    .nav-pills .nav-link.active {
        padding: 9px 16px;
    }

    .text-carousel-41 {
        line-height: 28px;
        font-size: 24px;
        text-align: center;
        left: 0;
        top: 465px;
    }

    #dreamwallet-payment-carousel-mobile .carousel-indicators.payment {
        bottom: 40px;
    }

    #dreamwallet-payment-carousel-mobile .carousel-item {

        height: 515px;
    }

}

/* fixed display 360 */
@media (min-width: 360px) and (max-width: 389px) {
    .carousel-indicators.how-to-use {
        bottom: -3.5rem;
    }

    #carouselBasicExample .carousel-indicators {
        bottom: 72px;
        z-index: 999;
        left: 34%;
        transform: translate(-50%, -50%);
    }

    .phone-section-31 {
        width: 54.99%;
        height: 85.33%;
        /* margin-left: -64px; */
    }

    .carouselBasicExample-mobile {
        bottom: 18px;
        right: 0;
    }

    .carouselBasicExample-mobile-2 {
        bottom: 18px;
        right: 0;
    }

}

@media (min-width: 390px) and (max-width: 411px) {
    #dreamwallet .banner.banner.section-4 {
        padding: 52px 0;

    }

    .carousel-indicators.how-to-use {
        bottom: -102px
    }

    .carouselBasicExample-mobile {
        position: relative;
        bottom: -17px;
        right: 0;
    }

    .carouselBasicExample-mobile-2 {
        position: relative;
        bottom: -17px;
        right: 0;
    }

    .nav-pills .nav-link.active {
        padding: 9px 33px;
    }

    .phone-section-31 {
        width: 54.99%;
        height: 93.33%;
    }
}

/* fix ipad mini */
@media (min-width: 767px) and (max-width: 817px) {

    #dreamwallet .banner.banner.section-1,
    #dreamwallet .banner.banner.section-2,
    #dreamwallet .banner.banner.section-3,
    #dreamwallet .banner.banner.section-5 {
        height: 100dvh;
        align-items: center;
    }

    #dreamwallet .phone {
        width: 50%
    }

    #selector-11 .main-color-white {
        padding: 0 24px;
    }

    .box-content-return {
        padding: 0 34px;
    }

    #selector-51 {
        padding: 0 40px;
    }

    .carousel-control-next.section-2-1 {
        top: 35%;
    }

    .carousel-control-prev.section-2-1 {
        top: 35%;
    }

    .googlepay-img,
    .appstore-img {
        width: 24%;
    }

    .wording-dream {
        width: 25%;
    }

    .selector-11 {
        text-align: center;
    }

    .img-phone-2 {
        width: 85%;
        text-align: center;
    }

    .text-carousel-21 {
        position: relative;
        /* left: 50%;: 453px; */
        text-align: center;
        top: 47px;
        left: 0;
        padding: 0 24px;
        width: 100%;

    }

    #dreamwallet-how-to-use-carousel-mobile .carousel-item {
        height: 580px;
    }

    .phone-section-21 {
        width: 30%;
        margin-left: 0;
    }

    .section-3 .container {
        /* margin-top: -244px; */
    }

    #dreamwallet .banner.banner.section-4 {
        padding: 78px 0;
        height: 100dvh;
    }


    .box-phone-2 {
        /* top: -70%; */
        position: relative;

    }


    .section-3 .carousel-indicators.how-to-use {
        bottom: -131px
    }

    .selector-21-sub {
        top: 680px;
    }

    .phone-section-31 {
        width: 30%;
        height: auto;
    }

    #dreamwallet .carousel {
        position: relative;
        top: 0;
    }

    .carousel-control-prev.section-2-1 {
        left: 10%;
    }

    .carousel-control-next.section-2-1 {
        right: 10%;
    }

    .carouselBasicExample-mobile {
        position: relative;
        bottom: -85px;
        right: 0;
    }

    .carousel-item {
        height: 388px;
    }

    .carouselBasicExample-mobile-2 {
        position: relative;
        bottom: -85px;
        right: 0;
    }

    .selector-21-header {
        margin-bottom: 24px;
    }

    .nav-pills .nav-link.active {
        padding: 9px 74px;
    }

    .carousel-control-prev.section-3-1 {
        left: 10%;
    }

    .carousel-control-next.section-3-1 {
        right: 10%;
    }

    .nav-pills {
        background: #FFFFFF;
        border-radius: 50px;
        width: auto;
        display: flex;
        justify-content: center;
        height: auto;
        margin-top: 100px;
        margin-bottom: 48px !important;
    }

    .section-3 .carousel-indicators.how-to-use {
        bottom: 100px;
    }

    .what-is-dreamwall {
        margin-top: 28px;
    }

    .phone-section-31 {
        margin: 0;
    }

    .selector-31-header {
        top: 0;
    }

    .text-carousel-31 {
        position: relative;
        left: 0;
        top: 0;
        font-size: 30px;
        font-weight: 400;
        line-height: 36px;
        text-align: center;
        margin-top: 44px;
        width: 100%;
    }

    .phone-section-41 {
        width: 30%;
        margin: 0;
        text-align: center;
    }

    .selector-41-header {
        position: relative;
        text-align: center;
        top: 0;
        margin-bottom: 24px;

    }

    #dreamwallet-payment-carousel-mobile .carousel-item-image {
        display: flex;
        justify-content: center;
    }

    .carousel-control-next.section-4-1 {
        right: 10%;
    }

    .carousel-control-prev.section-4-1 {
        left: 10%;
    }

    #dreamwallet-payment-carousel-mobile .carousel-item {
        height: 528px;
    }

    .carousel-indicators.payment {
        left: 0;
        right: 0;
        bottom: 46px;
    }

    .text-carousel-41 {
        line-height: 28px;
        font-size: 24px;
        text-align: center;
        left: 0;
        top: 475px;
        width: 100%;
    }

    .carousel-indicators.carousel-indicators-main {
        left: 0;
        right: 0;
        bottom: -50px;
    }

    #dreamwallet .way-to-download {
        padding: 61px 0 !important;
        text-align: center;
    }

    #dreamwallet .text-question {
        text-align: center;
    }

    .box-content-41 {
        position: relative;
        width: 100%;
        top: 0;
        margin-top: 24px;
    }

    #dreamwallet .question {
        position: relative;
        width: 100%;
        top: 0;
    }

    .section-6 {
        align-items: center;
    }

    .list-dreamwallet-bar {
        position: fixed;
        top: 45%;
    }

    #dreamwallet .selector {
        padding-bottom: 24px;
    }
}

/* fix tablet android */
@media (min-width:800px)and (max-width:819px) {
    #dreamwallet .phone {
        width: 80%;
    }

    .carousel-control-prev.section-2-1 {
        top: 31%;
    }

    .carousel-control-next.section-2-1 {
        top: 31%;
    }

    .carousel-control-prev.section-4-1 {
        right: 0;
        top: -20%;
    }

    .carousel-control-next.section-4-1 {
        right: 0;
        top: -20%;
    }
}

@media (min-width: 818px) and (max-width: 991px) {
    .h3 {
        font-weight: 400 !important;
        font-size: 32px !important;
        line-height: 36px !important;
    }

    .carousel-indicators.carousel-indicators-main {
        left: 0;
    }

    #dreamwallet .banner {
        background-image: url('/umay/images/dreamwallet/dreamwallet-banner-mobile.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: scroll;
        background-position: top;
        min-height: 100%;
        height: 930px;
    }

    .what-is-dreamwall {
        /* margin-left: 20rem; */
        margin-top: 34px;
    }

    .box-phone-2 {
        position: relative;
    }

    #dreamwallet .carousel {
        position: relative;
        left: 0px;
        top: 0px;
    }

    #dreamwallet .phone {
        width: 60%;
    }

    #dreamwallet .phone-2 {
        width: 100%;
    }

    .img-phone-2 {
        width: 90%;
    }

    .selector-11 .d-block {
        text-align: center;
    }

    .wording-dream {
        width: 40%;
    }

    .selector-11 .h1-m {
        margin-bottom: 12px;
    }

    #dreamwallet .way-to-download {
        text-align: center;
    }

    .googlepay-img,
    .appstore-img {
        width: 24%;
    }

    .carousel-indicators {
        position: absolute;
        right: 0rem;
        bottom: -4.5rem;
    }

    .list-dreamwallet-bar {
        position: absolute;
        top: 34%;
        left: 23px;
    }

    .circle.active,
    .circle {
        width: 12px;
        height: 12px;
    }

    #dreamwallet .selector {
        padding-bottom: 32px;
    }

    .img-phone-2 {
        top: 0px;
    }

    .h1-m,
    .h3 {
        text-align: center;
    }

    #dreamwallet .banner.section-2 {
        align-items: center;
        height: 100dvh;
    }

    .phone-section-21 {
        width: 35%;
        margin-left: 0;
    }

    .carousel-indicators.how-to-use {
        position: absolute;
        left: 0;
        right: 0;
        bottom: -3.5rem;
    }

    .text-carousel-21 {
        position: absolute;
        font-size: 24px;
        font-weight: 400;
        line-height: 36px;
        text-align: start;
        top: 534px;
        width: 100%;
        left: 0;
        text-align: center;
    }

    #dreamwallet-how-to-use-carousel-mobile .carousel-item {
        height: 642px;
    }

    #dreamwallet-how-to-use-carousel-mobile .carousel-indicators.how-to-use {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 6.5rem;
    }

    .selector-21-sub {
        top: 755px;
    }

    #dreamwallet .banner.section-3 {
        align-items: center;
        height: 100dvh;
    }

    .carousel-control-prev.section-2-1 {
        left: 10%;
        top: 37%;
    }

    .carousel-control-next.section-2-1 {
        right: 10%;
        top: 37%;
    }

    #dreamwallet .banner.section-4 {
        align-items: center;
        height: 100dvh;
    }

    .carousel-control-prev.section-4-1 {
        top: -10%
    }

    .carousel-control-next.section-4-1 {
        top: -10%
    }

    .selector-21-header {
        margin-bottom: 54px;
    }

    .selector-31-header {
        position: relative;
        top: -1rem;
    }

    .phone-section-31 {
        width: 35%;
        height: 73.956%;
        margin-left: 0;
    }

    .nav-pills {
        width: 79%;
        margin-bottom: 3rem !important;
    }

    .carousel-control-prev.section-3-1 {
        left: 10%;
        top: 35%;
    }

    .carousel-control-next.section-3-1 {
        /* left: 28.5rem; */
        right: 10%;
        top: 35%;
    }

    .text-carousel-31 {
        position: relative;
        left: 0;
        top: 40px;
        font-size: 30px;
        font-weight: 400;
        line-height: 36px;
        text-align: center;
    }

    .section-4 .carousel-indicators {
        position: absolute;
        right: 0rem;
        bottom: 8.5rem;
    }

    .tab-content .carousel-item {
        height: 680px;
    }

    #dreamwallet .banner.section-5 {
        align-items: center;
        height: 100dvh;
    }

    .selector-41-header {
        margin-bottom: 56px;
        text-align: center;
        position: relative;
    }

    .phone-section-41 {
        width: 35%;
        margin-left: 0;
    }

    .text-carousel-41 {
        position: relative;
        font-size: 24px;
        font-weight: 400;
        line-height: 36px;
        text-align: center;
        left: 0;
        top: 40px;
        width: 100%;
    }

    .carousel-indicators.payment {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 22px;
    }

    #dreamwallet-payment-carousel-mobile .carousel-item {
        text-align: center;
        height: 570px;
    }

    .carousel-control-prev.section-4-1 {
        left: 10%;
    }

    .carousel-control-next.section-4-1 {
        right: 10%;
    }

    #dreamwallet .banner.section-6 {
        align-items: center;
        height: 100dvh;
    }

    #dreamwallet .question {
        position: relative;
        top: 0;
    }

    .box-content-41 {
        position: relative;
        top: 0;
        margin-top: 16px;
        width: 100%;
    }

    .list-dreamwallet-bar {
        position: fixed;
    }
}


@media (min-width: 992px) and (max-width: 1199px) {
    .section-1-carousel {
        right: 30px;
    }

    .carousel-indicators.carousel-indicators-main {
        left: -1053px;
        text-align: start;
        bottom: -2rem
    }

    .selector-21-header {
        color: #FFFFFF;
        font-size: 52px;
        font-weight: 500;
        line-height: 66px
    }

    .selector-21-sub {
        position: absolute;
        color: #FFFFFF;
        font-size: 24px;
        font-weight: 500;
        line-height: 36px;
        top: 231px;
    }

    .carousel-indicators {
        position: absolute;
        right: -38.5rem;
        bottom: 15.5rem;
    }

    #dreamwallet .carousel {
        position: absolute;
        left: 28px;
        top: -25%;
    }

    .carousel-indicators.how-to-use {
        position: absolute;
        right: -6px;
        bottom: 5.5rem;
    }

    .text-carousel-21 {
        position: absolute;
        font-size: 24px;
        font-weight: 400;
        line-height: 36px;
        text-align: start;
        left: 283px;
        top: 144px;
        width: 450px;
        word-wrap: break-word;
    }

    .img-phone-2 {
        top: -85px;
    }

    .h1-m {
        font-weight: 500 !important;
        font-size: 56px !important;
        line-height: 66px !important;
    }

    .h3 {
        font-weight: 400 !important;
        font-size: 24px !important;
        line-height: 36px !important;
    }

    a.list-dreamwallet-btn.active,
    a.list-dreamwallet-btn {
        font-size: 16px;
    }

    .nav-pills .nav-link.active,
    .nav-pills .nav-link {
        padding: 9px 1rem;
        width: 182px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    .text-carousel-31 {
        position: absolute;
        left: -35rem;
        /* top: 0; */
        font-size: 24px;
        font-weight: 400;
        line-height: 36px;
        width: 400px;
        word-wrap: break-word;
    }

    #carouselBasicExample .carousel-indicators {
        left: -111.5rem;
        bottom: 0rem;
    }

    #carouselBasicExample2 .carousel-indicators {
        left: -109rem;
        bottom: 0rem;
    }

    #carouselBasicExample .carousel-item {
        text-align: center;
    }

    #carouselBasicExample2 .carousel-item {
        text-align: center;
    }

    .carousel-control-prev.section-3-1 {
        left: -87px;
        top: 55%;
    }

    .carousel-control-next.section-3-1 {
        right: 20px;
        top: 55%;
    }

    .phone-section-31 {
        width: 100%;
        height: 100%;
        margin-left: -111px;
        padding-top: 72px;
    }

    .selector-41-header {
        color: #FFFFFF;
        font-size: 58px;
        font-weight: 500;
        line-height: 66px;
        top: -15px;
    }

    .text-carousel-41 {
        position: absolute;
        font-size: 24px;
        font-weight: 400;
        line-height: 36px;
        text-align: start;
        left: 287px;
        top: 107px;
        width: 450px;
        word-wrap: break-word;
    }

    .carousel-indicators.payment {
        position: absolute;
        left: 0;
        right: 38px;
        bottom: 11.5rem;
    }

    .carousel-control-prev.section-2-1 {
        left: -3rem;
    }

    .carousel-control-next.section-2-1 {
        right: 25.8rem;
    }

    #dreamwallet .carousel-step-service {
        left: 562px;
        top: -190px;
    }


}

@media (min-width: 1200px) and (max-width: 1399px) {
    .section-1-carousel {
        right: 30px;
    }

    .carousel-indicators.carousel-indicators-main {
        left: -1143px;
        text-align: start;
        bottom: -2rem;
    }

    .selector-21-header {
        color: #FFFFFF;
        font-size: 52px;
        font-weight: 500;
        line-height: 66px
    }

    .selector-21-sub {
        position: absolute;
        color: #FFFFFF;
        font-size: 24px;
        font-weight: 500;
        line-height: 36px;
        top: 242px;
    }


    .carousel-indicators {
        position: absolute;
        right: -38.5rem;
        bottom: 15.5rem;
    }

    #dreamwallet .carousel {
        position: absolute;
        left: 28px;
        top: -25%;
    }

    .carousel-indicators.how-to-use {
        position: absolute;
        right: 17px;
        bottom: 8.5rem;
    }

    .text-carousel-21 {
        position: absolute;
        font-size: 24px;
        font-weight: 400;
        line-height: 36px;
        text-align: start;
        left: 342px;
        top: 144px;
        width: 500px;
        word-wrap: break-word;
    }

    .img-phone-2 {
        top: -85px;
    }

    .h1-m {
        font-weight: 500 !important;
        font-size: 56px !important;
        line-height: 66px !important;
    }

    .h3 {
        font-weight: 400 !important;
        font-size: 24px !important;
        line-height: 36px !important;
    }

    a.list-dreamwallet-btn.active,
    a.list-dreamwallet-btn {
        font-size: 16px;
    }

    .nav-pills .nav-link.active,
    .nav-pills .nav-link {
        padding: 9px 0.5rem;
    }

    .nav-pills .nav-link,
    .nav-pills .nav-link.active {
        width: 218px;
    }

    .text-carousel-31 {
        position: absolute;
        left: -564px;
        top: 12rem;
        font-size: 24px;
        font-weight: 400;
        line-height: 36px;
        width: 550px;
        word-wrap: break-word;
    }

    #carouselBasicExample .carousel-indicators {
        left: -120.5rem;
        bottom: 0rem;
    }

    #carouselBasicExample2 .carousel-indicators {

        left: -118.5rem;
        bottom: 0rem;
    }

    .carousel-control-prev.section-3-1 {
        left: 0;
        top: 45%;
    }

    .carousel-control-next.section-3-1 {
        right: 0;
        top: 45%;
    }

    .phone-section-31 {
        width: 63.72%;
        height: 100.63%;
        /* margin-left: -85.5px; */
    }

    #carouselBasicExample .carousel-item {
        text-align: center;
    }

    #carouselBasicExample2 .carousel-item {
        text-align: center;
    }

    .text-carousel-41 {
        position: absolute;
        font-size: 30px;
        font-weight: 400;
        line-height: 36px;
        text-align: start;
        left: 346px;
        top: 118px;
        width: 500px;
    }

    .selector-41-header {
        color: #FFFFFF;
        font-size: 64px;
        font-weight: 500;
        line-height: 66px;
        position: absolute;
        top: -7px;
    }

    .carousel-indicators.payment {
        position: absolute;
        left: 0;
        right: 54px;
        bottom: 240px;
    }

    .carousel-control-next.section-2-1 {
        right: 30.5rem;
    }

    #dreamwallet .carousel-step-service {
        left: 562px;
        top: -190px;
    }


}

@media (min-width: 1400px) {
    .nav-pills .nav-link.active {
        color: #FFFFFF;
        background-color: #003F67;
        font-size: 24px;
        font-weight: 500;
        line-height: 28px;
        border-radius: 50px;
        border-bottom: none;
        text-align: center;
        padding: 9px 1rem;
        width: 250px;

    }

    .nav-pills .nav-link {
        color: #003F67 !important;
        background-color: #FFFFFF;
        font-size: 24px;
        font-weight: 500;
        line-height: 28px;
        border-radius: 50px;
        text-align: center;
        padding: 9px 1rem;
        width: 250px;
    }
    #section-4 .nav-item {
        width: 46%;
    }
    
}




@media (min-width: 1400px) {
    .selector-31-header {
        width: 45vw;
        word-wrap: break-word;
    }
}