@font-face {
    font-family: unArundathee;
    src: url('../fonts/UN-Arundathee.ttf');
}

@font-face {
    font-family: productSans;
    src: url('../fonts/product-sans/Product_Sans_Bold.ttf');
}

#page_one {
    background: url("../images/webp/helapayBG.webp") no-repeat center;
    background-size: cover;
}

.header-text {
    color: rgba(0, 118, 254, 1);
    font-family: unArundathee, productSans;
    line-height: initial;
}

.header-text_mini {
    color: rgba(0, 118, 254, 1);
    font-family: unArundathee, productSans;
    font-size: 2rem;

}

.header-text_two {
    color: #ffffff;
    font-family: unArundathee, productSans;
    font-size: 60px;

}

.header-text_three {
    color: #FFD600;
    font-family: unArundathee, productSans;
    font-size: 88px;

}

.header-english_font {
    color: #FFD600;
    font-family: productSans, productSans;
    font-size: 40px;
    cursor: pointer;
}



.secondary_color {
    color: #FFD600;
}

.wiggle {
    animation: wiggle 8s linear infinite;
}

#fing_print {
    width: 300px;
    cursor: pointer;
}

#page_two {
    background: url("../images/webp/helapayBG1.webp");
    background-size: cover;
    display: none;
}

.show_ele {
    display: flex !important;
}

.hide_ele {
    display: none !important;
}

#page_three {
    background-color: rgba(0, 118, 254, 1);
    display: none;
}

#page_four {
    background: url("../images/webp/helapayBG2.webp") rgba(0, 118, 254, 1);
    background-size: cover;
    display: none;
}

.text-white {
    color: #ffffff !important;
}

.sin-font-40 {
    font-family: unArundathee, productSans;
}

.text-secondary {
    color: #07248D !important;
}

.text-white {
    color: #ffffff !important;
}

.mandala_base {
    position: absolute;
    overflow: hidden;
}

.mandala_set {
    position: absolute;
}

.mandala_one {
    left: -140px;
    bottom: -112px;
    width: 700px;
    -webkit-animation: rotation 40s infinite linear;
}

.mandala_two {
    right: -150px;
    top: -139px;
    width: 550px;
    -webkit-animation: rotation_t 40s infinite linear;
}

.mandala_three {
    right: 169px;
    bottom: -67px;
    width: 340px;
    -webkit-animation: rotation 40s infinite linear;
}

.mandala_four {
    right: 700px;
    top: 60px;
    -webkit-animation: rotation_t 40s infinite linear;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}

@-webkit-keyframes rotation_t {
    from {
        -webkit-transform: rotate(359deg);
    }
    to {
        -webkit-transform: rotate(0deg);
    }
}

@-webkit-keyframes wiggle {
    0% {
        transform: rotate(
                0deg) translateX(5px) translateY(0) rotate(
                0deg);
    }
    100% {
        transform: rotate(
                1turn) translateX(5px) translateY(0) rotate(
                -1turn);
    }
}

.next_button {
    position: absolute;
    bottom: 10px;
    right: 20px;
    width: 100px;
    cursor: pointer;
    z-index: 99999;
}

#page_five {
    background: url("../images/webp/helapayBG2.webp") rgba(0, 118, 254, 1);
    background-size: cover;
    display: none;
}

.pre_loader_base {
    height: 100vh;
    width: 100vw;
    position: fixed;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
}


.pre_loader_base img {
    width: 250px;
}

.payhere_logo_mini_logo_lu:before {
    content: '';
    background: url('../images/HELAPAY.png') no-repeat;
    display: block;
    width: 100%;
    height: 50px;
    position: absolute;
    background-size: contain;
    top: 20px;
    left: 20px;
}

.payhere_logo_mini_logo_black_lb:before {
    content: '';
    background: url('../images/HELAPAY.png') no-repeat;
    display: block;
    width: 100%;
    height: 50px;
    position: absolute;
    background-size: contain;
    bottom: 20px;
    left: 20px;
}

.payhere_logo_mini_logo_lb:before {
    content: '';
    background: url('../images/HELAPAY_WHITE.png') no-repeat;
    display: block;
    width: 100%;
    height: 50px;
    position: absolute;
    background-size: contain;
    bottom: 20px;
    left: 20px;
}

.next_button_hide{
    display: none;
}