div#auth_hero_added #checkout_page {
    animation: checkoutPage 20s linear infinite;
}

div#auth_hero_added #method_btn {
    animation: methodBtn 20s linear infinite;
    transform-origin: center;
    transform-box: fill-box;
}

div#auth_hero_added #mobile_msg {
    animation: mobileMsg 20s linear infinite;
    transform-origin: right;
    transform-box: fill-box;
}

div#auth_hero_added #mobile_msg #tap_scan_qr {
    animation: tapScanQr 20s linear infinite;
}

div#auth_hero_added #mobile_msg #open_upi_app {
    animation: openUpiApp 20s linear infinite;
}

div#auth_hero_added #all_process {
    animation: allProcess 20s linear infinite;
}

div#auth_hero_added #mobile_msg #scan_qr_code {
    animation: scanQrCode 20s linear infinite;
}

div#auth_hero_added #mobile_msg #payment_done {
    animation: paymentDone 20s linear infinite;
}

div#auth_hero_added #mobile_msg #enter_upi_pin {
    animation: enterUpiPin 20s linear infinite;
}

div#auth_hero_added #mobile_msg #star_1 {
    animation: enterUpiPinStar1 20s linear infinite;
}

div#auth_hero_added #mobile_msg #star_2 {
    animation: enterUpiPinStar2 20s linear infinite;
}

div#auth_hero_added #mobile_msg #star_3 {
    animation: enterUpiPinStar3 20s linear infinite;
}

div#auth_hero_added #mobile_msg #star_4 {
    animation: enterUpiPinStar4 20s linear infinite;
}

div#auth_hero_added #mobile_msg #star_5 {
    animation: enterUpiPinStar5 20s linear infinite;
}

div#auth_hero_added #success_noti {
    animation: successNoti 20s linear infinite;
}

div#auth_hero_added #rectangle_msg {
    overflow: hidden;
}

div#auth_hero_added #qr_screen {
    animation: qrScreen 20s linear infinite;
}

div#auth_hero_added #qr_screen #qr_main_frame #down_scanner {
    animation: qrCardDownScanner 20s linear infinite;
}

div#auth_hero_added #qr_screen #qr_main_frame #up_scanner {
    animation: qrCardUpScanner 20s linear infinite;
}

@keyframes checkoutPage {
    0% {
        opacity: 0;
    }

    2% {
        opacity: 1;
    }

    12% {
        opacity: 1;
    }

    14% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes mobileMsg {
    0% {
        opacity: 0;
    }

    14% {
        opacity: 0;
    }

    16% {
        opacity: 0;
        transform: scaleX(0.5) scaleY(0.5);
    }

    17% {
        opacity: 1;
        transform: scaleX(0.8) scaleY(0.8);
    }

    18% {
        opacity: 1;
        transform: scaleX(1) scaleY(1);
    }

    20% {
        opacity: 1;
    }

    98% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes tapScanQr {
    0% {
        opacity: 0;
    }

    28% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    38% {
        opacity: 1;
    }

    40% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes openUpiApp {
    0% {
        opacity: 0;
    }

    18% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    28% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes allProcess {
    0% {
        opacity: 0;
    }

    18% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    26% {
        opacity: 1;
    }

    28% {
        opacity: 1;
        transform: translateY(0rem);
    }

    30% {
        transform: translateY(5rem);
        opacity: 1;
    }

    32% {
        opacity: 1;
    }

    36% {
        opacity: 1;
    }

    38% {
        opacity: 1;
        transform: translateY(5rem);
    }

    40% {
        transform: translateY(10.4rem);
        opacity: 1;
    }

    42% {
        opacity: 1;
    }

    60% {
        opacity: 1;
    }

    62% {
        transform: translateY(10.4rem);
        opacity: 1;
    }

    64% {
        transform: translateY(14.3rem);
        opacity: 1;
    }

    66% {
        opacity: 1;
    }

    76% {
        opacity: 1;
    }

    78% {
        transform: translateY(14.3rem);
        opacity: 1;
    }

    80% {
        transform: translateY(18.8rem);
        opacity: 1;
    }

    82% {
        opacity: 1;
    }

    94% {
        opacity: 1;
    }

    96% {
        opacity: 1;
        transform: translateY(18.8rem);
    }

    98% {
        opacity: 1;
        transform: translateY(0rem);
    }

    100% {
        opacity: 0;
    }
}

@keyframes scanQrCode {
    0% {
        opacity: 0;
    }

    38% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    62% {
        opacity: 1;
    }

    64% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes paymentDone {
    0% {
        opacity: 0;
    }

    78% {
        opacity: 0;
    }

    80% {
        opacity: 1;
    }

    94% {
        opacity: 1;
    }

    96% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes enterUpiPin {
    0% {
        opacity: 0;
    }

    62% {
        opacity: 0;
    }

    64% {
        opacity: 1;
    }

    78% {
        opacity: 1;
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes enterUpiPinStar1 {
    0% {
        opacity: 0;
    }

    66% {
        opacity: 0;
    }

    68% {
        opacity: 1;
    }

    78% {
        opacity: 1;
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes enterUpiPinStar2 {
    0% {
        opacity: 0;
    }

    68% {
        opacity: 0;
    }

    70% {
        opacity: 1;
    }

    78% {
        opacity: 1;
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes enterUpiPinStar3 {
    0% {
        opacity: 0;
    }

    70% {
        opacity: 0;
    }

    72% {
        opacity: 1;
    }

    78% {
        opacity: 1;
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes enterUpiPinStar4 {
    0% {
        opacity: 0;
    }

    72% {
        opacity: 0;
    }

    74% {
        opacity: 1;
    }

    78% {
        opacity: 1;
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes enterUpiPinStar5 {
    0% {
        opacity: 0;
    }

    74% {
        opacity: 0;
    }

    76% {
        opacity: 1;
    }

    78% {
        opacity: 1;
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes all_process {
    0% {
        opacity: 0;
    }

    14% {
        opacity: 0;
    }

    16% {
        opacity: 1;
    }

    18% {
        opacity: 1;
    }

    20% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes qrScreen {
    0% {
        opacity: 0;
    }

    12% {
        opacity: 0;
    }

    14% {
        opacity: 1;
    }

    86% {
        opacity: 1;
    }

    88% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes qrCardDownScanner {
    0% {
        opacity: 0;
    }

    46% {
        opacity: 0;
    }

    48% {
        opacity: 1;
        transform: translateY(0rem);
    }

    50% {
        opacity: 1;
    }

    53% {
        opacity: 1;
    }

    54% {
        opacity: 0;
        transform: translateY(-25rem);
    }

    56% {
        opacity: 0;
    }

    98% {
        opacity: 0;
        transform: translateY(-25rem);
    }

    100% {
        opacity: 0;
        transform: translateY(0rem);
    }
}

@keyframes qrCardUpScanner {
    0% {
        opacity: 0;
    }

    52% {
        opacity: 0;
    }

    54% {
        opacity: 1;
        transform: translateY(0rem);
    }

    56% {
        opacity: 1;
    }

    59% {
        opacity: 1;
    }

    60% {
        opacity: 0;
        transform: translateY(25rem);
    }

    62% {
        opacity: 0;
    }

    98% {
        opacity: 0;
        transform: translateY(25rem);
    }

    100% {
        opacity: 0;
        transform: translateY(0rem);
    }
}

@keyframes successNoti {
    0% {
        opacity: 0;
    }

    86% {
        opacity: 0;
    }

    88% {
        opacity: 1;
    }

    98% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes methodBtn {
    10% {
        transform: scaleX(1) scaleY(1);
    }

    11% {
        transform: scaleX(0.8) scaleY(0.8);
    }

    12% {
        transform: scaleX(1) scaleY(1);
    }
}