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

#mgmonline {
    color: #003F67;
}

.text-blue {
    color: #00B4F1;
}

.mr-84 {
    margin-right: 84px;
}

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

.indicator-invite-1,
.indicator-invite-2 {
    position: absolute;
    width: 100%;
    bottom: -45px;
    left: 50%;
    transform: translate(-50%, -50%);

}

#mgmonline .banner {
    background-image: url("/umay/images/MGMOnline/sky-bg-dt.png");
    z-index: 0;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: top;
    background-size: cover;
    height: 950px;
    position: relative;

}

#mgmonline .text-banner {
    font-size: 34px;
    font-weight: 500;
    line-height: 36px;
    color: #003F67;
    z-index: 1;
}

#mgmonline .text-download-and-invite {
    font-size: 24px;
    font-weight: 500;
    line-height: 28px;
    color: #003F67;
}

.box-content-banner {
    margin-top: -10rem;
}

#mgmonline .people-banner-man {
    position: absolute;
    top: 3rem;
    z-index: -1;
    right: -10rem;
}

#mgmonline .people-banner-man .man {
    width: 35%;
}

#mgmonline .people-banner-girl .girl {
    width: 35%;
}


#mgmonline .people-banner-girl {
    position: absolute;
    top: 10rem;
    z-index: 19;
    right: 0rem;
}

.man,
.girl {
    width: 65%;
}

.box-people {
    position: absolute;
    top: 100px;
    z-index: -1;
}

.box-man {
    text-align: start;
    padding-left: 124px;
    padding-top: 48px;
}

.box-girl {
    text-align: end;
    padding-right: 127px;
    margin-top: -33px;
}

#mgmonline #section-2 {
    padding: 7rem 0;
    position: relative;
}



#mgmonline #section-2 .image1,
#mgmonline #section-2 .image2 {
    width: 50%;

}

#mgmonline #section-2 .box-image1 {
    position: absolute;
    z-index: 0;

}

#mgmonline #section-2 .box-image2 {
    position: absolute;
    right: -5rem;
    top: 18rem;
    z-index: 0;
}

#mgmonline #section-2 .text-center {
    position: relative;
}

#mgmonline #section-2 .text-recommendation {
    font-size: 64px;
    font-weight: 500;
    line-height: 66px;
    color: #003F67;
}

#mgmonline #section-2 .sub-1 {
    text-align: center;
    font-size: 64px;
    font-weight: 700;
    line-height: 66px;
    color: #E31C79
}

#mgmonline #section-2 .sub-2 {
    text-align: center;
    font-size: 34px;
    font-weight: 500;
    line-height: 36px;
    color: #003F67;
}

#mgmonline #section-2 .text-recommendation span {
    color: #00B4F1;
}

#mgmonline #section-3 .bg-section-3 {
    background: linear-gradient(180deg, #EDFAFF 0%, #ADEAFF 100%);
    padding: 7rem 0;
}

#mgmonline #section-3 .step-invite-header {
    color: #003F67;
    font-size: 64px;
    font-weight: 500;
    line-height: 66px;
}

#mgmonline #section-3 .step-invite-header span {
    color: #00B4F1;
}

#mgmonline #section-3 .step-invite-sub {
    font-size: 34px;
    color: #003F67;
    font-weight: 500;
    line-height: 36px;
}

.carousel-inner {
    justify-content: center;
    overflow: hidden;
}

.carousel-item {
    width: 50%;
    /* float: none; */
}



.left-invite-btn {
    position: absolute;
    top: 50%;
    cursor: pointer;
    left: 0;
    height: 50px;
    width: 50px;
}

.right-invite-btn {
    position: absolute;
    top: 50%;
    right: 0;
    cursor: pointer;
    height: 50px;
    width: 50px;
}

.carousel-invite-1,
.carousel-invite-2 {
    display: flex;
    justify-content: center;
    padding: 32px 0;
}


/* #mgmonline #section-4 .bg-section-4 {
    background: linear-gradient(180deg, #D7F5FF 0%, rgba(215, 245, 255, 0.00) 100%);
    padding: 7rem 0;
    padding-bottom: 0;
} */

#mgmonline .banner-4 {
    background-image: url("/umay/images/MGMOnline/banner-4.png");
    z-index: 0;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: top;
    background-size: cover;
    min-height: 100%;
    height: auto;
    position: relative;
    padding: 7rem 0;
}

#mgmonline #section-4 .step-invited {
    color: #003F67;
    font-size: 64px;
    font-weight: 500;
    line-height: 66px;
}

#mgmonline #section-4 .step-invited span {
    color: #00B4F1;
}

#mgmonline #section-4 .card-register,
#mgmonline #section-4 .card-qr-code {
    border-radius: 40px;
    box-shadow: 4px 14px 30px 0px rgba(9, 30, 66, 0.10);
    background: #FFFFFF;
    margin: 24px 0;
}

#mgmonline #section-4 .card-qr-code .card-body,
#mgmonline #section-4 .card-register .card-body {
    padding: 32px;

}

#mgmonline #section-4 .card-body .card-title {
    color: #003F67;
    text-align: center;
    font-size: 34px;
    font-weight: 700;
    line-height: 36px;
}

#mgmonline #section-4 .card-body .card-text {
    color: #003F67;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    line-height: 22px;
}

#mgmonline #section-4 .QR1,
#mgmonline #section-4 .QR2,
#mgmonline #section-4 .QR3,
#mgmonline #section-4 .QR4 {
    width: 75%;
    margin: 14px;
}

#mgmonline #section-4 .question {
    margin: 7rem 0;
}

#mgmonline #section-4 .text-question {
    font-size: 64px;
    font-weight: 500;
    line-height: 66px;
    color: #003F67;
}

#mgmonline #section-4 .accordion-item {
    border-radius: 8px;
}

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

#mgmonline #section-4 .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>");
}

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

/* mobile size */
@media (min-width: 576px) and (max-width: 768px) {

    .right-invite-btn,
    .left-invite-btn {
        top: 40%;
    }


    .right-invite-btn {
        right: -3%;
    }

    .left-invite-btn {
        left: -3%;
    }

}

@media (min-width: 350px) and (max-width: 768px) {

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

    .nopadding-mobile {
        padding: 0;
    }

    #mgmonline .banner {
        background-image: url("/umay/images/MGMOnline/sky-bg-mb.png");
        z-index: 0;
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-position: top;
        background-size: cover;
        height: 695px;
        position: relative;

    }

    #mgmonline .text-banner {
        font-size: 24px;
        font-weight: 500;
        line-height: 28px;
        color: #003F67;
        z-index: 1;
    }

    #mgmonline .text-download-and-invite {
        font-size: 20px;
        font-weight: 500;
        line-height: 28px;
        color: #003F67;
    }

    .appstore,
    .googleplay {
        width: 45%;
    }

    #mgmonline #section-2 {
        padding: 2rem 1rem;
        position: relative;
    }

    #mgmonline #section-2 .box-image1 {
        position: absolute;
        top: 7rem;

    }

    #mgmonline #section-2 .box-image2 {
        position: absolute;
        right: -7rem;
        top: 22rem;
    }

    #mgmonline #section-2 .text-center {
        position: static;
    }

    #mgmonline #section-2 .mt-5 .img-fluid {
        max-width: 30%;
    }

    #mgmonline #section-2 .image1 {
        width: 20%;
    }

    #mgmonline #section-2 .image2 {
        width: 30%;

    }

    #mgmonline #section-2 .text-recommendation {
        font-size: 48px;
        font-weight: 500;
        line-height: 50px;
        color: #003F67;
    }

    #mgmonline #section-2 .icon1,
    #mgmonline #section-2 .icon2,
    #mgmonline #section-2 .icon3 {
        width: 15%;
    }

    #mgmonline #section-2 .sub-1 {
        text-align: center;
        font-size: 34px;
        font-weight: 700;
        line-height: 36px;
        color: #E31C79
    }

    #mgmonline #section-2 .sub-2 {
        text-align: center;
        font-size: 24px;
        font-weight: 500;
        line-height: 28px;
        color: #003F67;
    }

    #mgmonline #section-3 .bg-section-3 {

        padding: 2rem 0;
    }

    #mgmonline #section-4 .bg-section-4 {
        background: linear-gradient(180deg, #D7F5FF 0%, rgba(215, 245, 255, 0.00) 100%);
        padding: 2rem 1rem;
    }

    #mgmonline #section-4 .step-invited {
        color: #003F67;
        font-size: 48px;
        font-weight: 500;
        line-height: 50px;
    }

    #mgmonline #section-4 .card-qr-code .card-body,
    #mgmonline #section-4 .card-register .card-body {
        padding: 32px;
    }

    #mgmonline #section-4 .card-register,
    #mgmonline #section-4 .card-qr-code {
        border-radius: 20px;
    }

    #mgmonline #section-4 .card-register {
        margin: 0px 0;
    }

    #mgmonline #section-4 .card-body .card-title {
        color: #003F67;
        text-align: center;
        font-size: 34px;
        font-weight: 700;
        line-height: 36px
    }

    #mgmonline #section-4 .card-body .card-text {
        color: #003F67;
        text-align: center;
        font-size: 20px;
        font-weight: 500;
        line-height: 22px;
    }

    #mgmonline #section-4 .QR1,
    #mgmonline #section-4 .QR2,
    #mgmonline #section-4 .QR3,
    #mgmonline #section-4 .QR4 {
        width: 75%;
        margin: 14px;
    }


    #mgmonline #section-4 .question {
        margin: 3rem 0;
    }

    #mgmonline #section-4 .text-question {
        font-size: 34px;
        font-weight: 700;
        line-height: 36px;
        color: #003F67;
    }

    #mgmonline #section-4 .accordion-item {
        border-radius: 8px;
        margin-top: 1rem;
    }

    #mgmonline #section-4 .accordion-item .accordion-button {

        background-color: #003F67;
        color: #FFFFFF;
        font-size: 20px;
        font-weight: 500;
        line-height: 22px;
        padding: 16px;
    }

    #mgmonline #section-4 .accordion-item .accordion-body {
        color: #003F67;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        padding: 16px;
    }

    #mgmonline #section-3 .step-invite-sub {
        font-size: 24px;
        font-weight: 500;
        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>") !important;
    }

    .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>") !important;
    }

    #mgmonline #section-3 .step-invite-header {
        color: #003F67;
        font-size: 48px;
        font-weight: 500;
        line-height: 50px
    }

    .carousel-inner {
        padding-right: 0 !important;
    }

    .carousel {
        height: 524px;
    }

    .carousel-control-next {
        right: 0rem !important;
    }

    .carousel-control-prev {
        left: 0rem !important;
    }

    .carousel-indicators {
        bottom: 95px;
    }

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

    .carousel-invite-1,
    .carousel-invite-2 {
        display: none;
    }

    .carousel-item {
        width: 100%;
        text-align: center;
        /* float: none; */
    }

    .phone-howto {
        width: 280px;
        align-items: center;
        text-align: center;
    }

    .carousel-control-next,
    .carousel-control-prev {
        top: -5rem !important;
    }

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

}

@media (min-width: 350px) and (max-width: 389px) {
    .carousel-indicators {
        bottom: 95px;
    }
}

@media (min-width: 390px) and (max-width: 410px) {
    .carousel-indicators {
        bottom: 95px;
    }
}

/* sm size */
@media (min-width: 576px) and (max-width: 767px) {}

/* fix ipadmini */
@media (min-width: 768px) and (max-width: 819px) {

    .appstore,
    .googleplay {
        width: 25%;
    }
}

/* md size */
@media (min-width: 768px) and (max-width: 991px) {
    #mgmonline .banner {
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-position: top;
        background-size: cover;
        height: 1032px !important;
        position: relative;

    }

    #mgmonline #section-4 .QR1,
    #mgmonline #section-4 .QR2,
    #mgmonline #section-4 .QR3,
    #mgmonline #section-4 .QR4 {
        width: 45%;
        margin: 14px;
    }


    .right-invite-btn {
        right: -15px;
    }

    .left-invite-btn {
        left: -15px;
    }

}

/* lg size */
@media (min-width: 992px) and (max-width: 1199px) {
    .box-man {
        text-align: start;
        padding-left: 0px;
        padding-top: 48px;
    }

    .box-girl {
        text-align: end;
        padding-right: 0px;
        margin-top: -33px;
    }

}

/* xl size */
@media (min-width: 1200px) and (max-width:1919px) {

    .man,
    .girl {
        width: 60%;
    }

    .box-man {
        text-align: start;
        padding-left: 32px;
        padding-top: 48px;
    }

    .box-girl {
        text-align: end;
        padding-right: 32px;
        margin-top: -33px;
    }


    .right-invite-btn {
        right: -30px;
    }

    .left-invite-btn {
        left: -30px;
    }
}