/*
==========================================
Membership Payment Gateway
Floating Payment Button
==========================================
*/

.mpg-floating-button{

    position:fixed;

    right:25px;

    bottom:25px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 24px;

    background:#0056b3;

    color:#ffffff !important;

    border-radius:50px;

    text-decoration:none !important;

    font-size:16px;

    font-weight:600;

    font-family:inherit;

    line-height:1;

    border:none;

    cursor:pointer;

    z-index:999999;

    box-shadow:0 10px 30px rgba(0,0,0,.25);

    transition:all .25s ease;

    animation:mpgPulse 2.5s infinite;

}

.mpg-floating-button:hover{

    background:#004494;

    color:#ffffff !important;

    text-decoration:none !important;

    transform:translateY(-3px);

    box-shadow:0 14px 35px rgba(0,0,0,.35);

}

.mpg-floating-button:focus{

    outline:none;

    color:#ffffff;

}

.mpg-floating-button:active{

    transform:scale(.97);

}

/* Pulse Animation */

@keyframes mpgPulse{

    0%{

        box-shadow:
            0 10px 30px rgba(0,0,0,.25),
            0 0 0 0 rgba(0,86,179,.50);

    }

    70%{

        box-shadow:
            0 10px 30px rgba(0,0,0,.25),
            0 0 0 16px rgba(0,86,179,0);

    }

    100%{

        box-shadow:
            0 10px 30px rgba(0,0,0,.25),
            0 0 0 0 rgba(0,86,179,0);

    }

}

/* Mobile */

@media (max-width:768px){

    .mpg-floating-button{

        right:15px;

        bottom:15px;

        padding:13px 18px;

        font-size:14px;

        gap:8px;

    }

}

/* Small Phones */

@media (max-width:480px){

    .mpg-floating-button{

        right:12px;

        bottom:12px;

        width:58px;

        height:58px;

        padding:0;

        border-radius:50%;

        font-size:26px;

    }

    .mpg-floating-button span{

        display:none;

    }

}