.login-body {
    background: url(../images/bkg.jpg) no-repeat;
    background-size: cover;
    background-position: center bottom;
    font-family: 'Inter', sans-serif;
    position: relative;
}

.couponbody {
    background: #ebf1f1 url(../images/bg-coupon.png) no-repeat;
    background-size: cover;
    background-position: center bottom;
    background-attachment: fixed;
    font-family: 'Inter', sans-serif;
    position: relative;
}

.evnt {
    height: 100px;
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
}

.card.crdlgn {
    background: rgb(255 255 255) url(../images/login_top_bg.png);
    background-repeat: no-repeat;
    background-position: top -30px center;
    position: relative;
    border-radius: .9rem;
    border: 0;
    box-shadow: 0 0 30px rgba(0, 0, 0, .25);
}

.dgnflw {
    position: absolute;
    top: -55px;
    right: -55px;
    height: 135px;
    animation: swing ease-in-out 1s infinite alternate;
    transform-origin: center -20px;
}

@keyframes swing {
    0% {
        transform: rotate(3deg);
    }

    100% {
        transform: rotate(-3deg);
    }
}

.logosec {
    margin-bottom: 1.5rem
}

    .logosec .lgicon {
        height: 42px;
        max-width: 200px;
        margin-bottom: 1.25rem
    }

    .logosec .lgttl {
        text-align: center;
        margin-bottom: 2rem;
        font-size: .875rem;
        font-weight: 600;
        position: relative;
        text-transform: uppercase;
    }

.lgttl:before {
    position: absolute;
    content: '';
    height: 3px;
    width: 45px;
    background: #e8e6e6;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}

.frgt-pass {
    color: #000;
    font-size: .775rem;
    font-weight: 500
}

    .frgt-pass:hover {
        color: #4d78de
    }

.login-body input[type=password], .login-body input[type=text] {
    color: #000;
    padding-right: 78px;
}

.cstm-txfiled {
    position: relative
}

    .cstm-txfiled .rtlbl {
        position: absolute;
        right: 1px;
        top: 1px;
        margin-bottom: 0;
        background: 0 0;
        height: 2.5rem;
        line-height: 1.5rem;
        font-weight: 500;
        min-width: 78px;
        color: #000;
        padding: .5rem;
        border-top-right-radius: .25rem;
        border-bottom-right-radius: .25rem
    }

.srvicns .sicn {
    width: 90px;
    height: 90px
}

.srvicns {
    flex: none;
    position: relative
}

.srvcttl {
    font-size: .925rem;
    line-height: .925rem;
    margin-bottom: .35rem;
    color: #183958;
    font-weight: 500;
}

.srvcdesc {
    color: #666e76;
    font-size: .725rem;
    line-height: 1.25rem
}

.wd-100p {
    width: 100%
}

.srvcs {
    position: relative
}

.footbotm {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid #ebf1f1;
}

.cpyrgtz {
    font-size: .675rem;
    color: #676e73;
}

.clgo {
    margin: .65rem 0 .65rem 1rem;
}

    .clgo .fcLogo {
        height: 18px;
    }

    .clgo .pwrdBy {
        margin-left: .75rem;
        padding-left: .75rem;
        border-left: 1px solid #e2e9ef;
        font-size: .7rem;
        color: #676e73;
        display: inline-block;
    }

        .clgo .pwrdBy a {
            display: inline-block;
        }

        .clgo .pwrdBy img {
            height: 18px;
            margin-left: .5rem;
        }

.forSupport {
    font-size: .675rem;
    margin: .65rem 1rem .65rem 0;
    color: #676e73;
}

    .forSupport a {
        font-weight: 500;
        font-size: .745rem;
        color: #183958;
    }

        .forSupport a:hover {
            color: #ae2220;
        }

.srvclist .srvicns {
    width: 90px;
    display: inline-block;
    margin-right: 10px;
}

.srvclist .srvcdtl {
    width: calc(100% - 100px);
    display: inline-block
}

.login-body .container {
    padding-right: 25px;
    padding-left: 25px
}

.gftphoto img {
    max-height: 200px;
    margin-bottom: 1rem;
}

.gfttxt {
    font-size: 1rem;
}

.rps {
    display: inline-block;
    font-size: 2.75rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

    .rps .bi {
        color: #29b774;
        margin-left: .25rem;
    }
/* Change the white to any color */
input:autofill,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}
/*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: black !important;
}

.cptcd, .eqlsgn {
    font-size: 1.25rem;
    font-weight: bold;
    margin-right: .75rem;
}

@media (max-width:767px) {
    .login-left-title {
        display: none
    }

    .lgnbxx {
        margin-top: 50px;
    }

    .evnt {
        height: 80px;
    }

    .footbotm {
        position: relative !important;
        margin-bottom: 20px;
        margin-top: 20px;
        border-top: none;
        background: 0 0
    }

    .cpyrgtz {
        text-align: center;
        margin-top: 12px;
        width: 100%
    }

    .forSupport {
        text-align: center;
        margin-top: 12px;
        width: 100%
    }

    .clgo {
        width: 100%;
        min-width: 100%;
        justify-content: center;
        text-align: center;
        margin-left: 0;
        margin-bottom: 0
    }

    .dwp4 {
        flex-wrap: wrap
    }

    .logosec .lgttl {
        font-size: .725rem
    }

    .mgtpacc {
        margin-top: 80px
    }

    .card.crdllt.wd-100p {
        max-width: 380px;
    }
}

@media (min-width:768px) {
    .dnBg {
        display: none;
    }

    .card.crdllt {
        position: relative;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .crdllt:before {
        content: '';
        position: absolute;
        left: -46px;
        width: 46px;
        height: 100%;
        background: #b8e8ea;
        border-top-left-radius: .9rem;
        border-bottom-left-radius: .9rem;
        box-shadow: -4px 0px 12px rgba(204, 217, 226, 0.35);
        -webkit-box-shadow: -4px 0px 12px rgba(204, 217, 226, 0.35);
        -moz-box-shadow: -4px 0px 12px rgba(204, 217, 226, 0.35);
    }

    .login-left-title {
        color: #000;
        margin: 0;
        padding: 14px 12px;
        font-size: .845rem;
        position: absolute;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: .1rem;
        position: absolute;
        top: 50%;
        left: -23px;
        transform: translate(-50%,-50%) rotate(-90deg);
        -moz-transform: translate(-50%,-50%) rotate(-90deg);
        -o-transform: translate(-50%,-50%) rotate(-90deg);
        -webkit-transform: translate(-50%,-50%) rotate(-90deg)
    }
}




#gfticn {
    max-width: 50px;
    position: absolute;
    top: 90px;
    right: 0rem;
}

    #gfticn .st0 {
        fill: #3D3D3D;
    }

    #gfticn .st1 {
        fill-rule: evenodd;
        clip-rule: evenodd;
        fill: #FF6666;
    }

    #gfticn .st2 {
        fill: #3AACE8;
    }

    #gfticn .st3 {
        fill: #FF6666;
    }

#gfticn {
    animation: gftanim 5s ease-in-out infinite;
}

@keyframes gftanim {
    0% {
        transform: translate(-50%, -50%) rotate(0);
    }

    2.5% {
        transform: translate(-50%, -50%) rotate(5deg) scale(1.1);
    }

    5% {
        transform: translate(-50%, -50%) rotate(0) scale(1.1);
    }

    7.5% {
        transform: translate(-50%, -50%) rotate(5deg) scale(1.1);
    }

    10% {
        transform: translate(-50%, -50%) rotate(0) scale(1);
    }

    100% {
        transform: translate(-50%, -50%) rotate(0);
    }
}




.pyro > .before, .pyro > .after {
    position: absolute;
    top: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
    -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}

.pyro > .after {
    -moz-animation-delay: 1.25s, 1.25s, 1.25s;
    -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
    -o-animation-delay: 1.25s, 1.25s, 1.25s;
    -ms-animation-delay: 1.25s, 1.25s, 1.25s;
    animation-delay: 1.25s, 1.25s, 1.25s;
    -moz-animation-duration: 1.25s, 1.25s, 6.25s;
    -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
    -o-animation-duration: 1.25s, 1.25s, 6.25s;
    -ms-animation-duration: 1.25s, 1.25s, 6.25s;
    animation-duration: 1.25s, 1.25s, 6.25s;
}

@-webkit-keyframes bang {
    to {
        box-shadow: -103px -280.6666666667px #04ff00, 75px -346.6666666667px #00ff26, -75px -108.6666666667px #ff0d00, 111px -253.6666666667px #00ffea, -47px -296.6666666667px #e6ff00, -35px -375.6666666667px #c400ff, 20px -24.6666666667px #ff0066, -145px -79.6666666667px #d5ff00, 215px -403.6666666667px #aa00ff, 241px -387.6666666667px #ffe600, -84px -397.6666666667px #b700ff, 177px 67.3333333333px #8cff00, -30px -122.6666666667px #00ff40, 2px -212.6666666667px #000dff, 138px -375.6666666667px #1a00ff, -179px -249.6666666667px #00ff09, -131px 24.3333333333px #ff00c4, -232px 61.3333333333px #00ffc4, -193px -317.6666666667px #37ff00, -8px -146.6666666667px #ff005e, 184px -85.6666666667px #4000ff, -211px -142.6666666667px #ff7300, 201px -52.6666666667px #ffbf00, 217px -336.6666666667px #00ffb7, -190px -50.6666666667px #ff0900, -56px -173.6666666667px #ffd000, -41px -333.6666666667px #cc00ff, -46px -182.6666666667px #ff0900, 229px 9.3333333333px #00ff33, 89px -224.6666666667px #4800ff, -175px -20.6666666667px #00eaff, -114px -143.6666666667px #5100ff, -222px -97.6666666667px #ffd900, -154px -165.6666666667px #ff00ae, 235px -357.6666666667px #002fff, -241px -392.6666666667px #00c8ff, 26px -127.6666666667px #ae00ff, 150px -184.6666666667px #6600ff, 94px -280.6666666667px #4800ff, 160px -307.6666666667px fuchsia, -131px -324.6666666667px #ff0095, 65px -258.6666666667px #aa00ff, -214px -99.6666666667px #0080ff, 129px -378.6666666667px #ff008c, 42px -302.6666666667px #00ff8c, -116px -394.6666666667px blue, -177px -347.6666666667px #00ffae, -82px -226.6666666667px #ff0077, 32px -257.6666666667px #00ff0d, 155px -277.6666666667px #ff0048, 159px -367.6666666667px #0091ff;
    }
}

@-moz-keyframes bang {
    to {
        box-shadow: -103px -280.6666666667px #04ff00, 75px -346.6666666667px #00ff26, -75px -108.6666666667px #ff0d00, 111px -253.6666666667px #00ffea, -47px -296.6666666667px #e6ff00, -35px -375.6666666667px #c400ff, 20px -24.6666666667px #ff0066, -145px -79.6666666667px #d5ff00, 215px -403.6666666667px #aa00ff, 241px -387.6666666667px #ffe600, -84px -397.6666666667px #b700ff, 177px 67.3333333333px #8cff00, -30px -122.6666666667px #00ff40, 2px -212.6666666667px #000dff, 138px -375.6666666667px #1a00ff, -179px -249.6666666667px #00ff09, -131px 24.3333333333px #ff00c4, -232px 61.3333333333px #00ffc4, -193px -317.6666666667px #37ff00, -8px -146.6666666667px #ff005e, 184px -85.6666666667px #4000ff, -211px -142.6666666667px #ff7300, 201px -52.6666666667px #ffbf00, 217px -336.6666666667px #00ffb7, -190px -50.6666666667px #ff0900, -56px -173.6666666667px #ffd000, -41px -333.6666666667px #cc00ff, -46px -182.6666666667px #ff0900, 229px 9.3333333333px #00ff33, 89px -224.6666666667px #4800ff, -175px -20.6666666667px #00eaff, -114px -143.6666666667px #5100ff, -222px -97.6666666667px #ffd900, -154px -165.6666666667px #ff00ae, 235px -357.6666666667px #002fff, -241px -392.6666666667px #00c8ff, 26px -127.6666666667px #ae00ff, 150px -184.6666666667px #6600ff, 94px -280.6666666667px #4800ff, 160px -307.6666666667px fuchsia, -131px -324.6666666667px #ff0095, 65px -258.6666666667px #aa00ff, -214px -99.6666666667px #0080ff, 129px -378.6666666667px #ff008c, 42px -302.6666666667px #00ff8c, -116px -394.6666666667px blue, -177px -347.6666666667px #00ffae, -82px -226.6666666667px #ff0077, 32px -257.6666666667px #00ff0d, 155px -277.6666666667px #ff0048, 159px -367.6666666667px #0091ff;
    }
}

@-o-keyframes bang {
    to {
        box-shadow: -103px -280.6666666667px #04ff00, 75px -346.6666666667px #00ff26, -75px -108.6666666667px #ff0d00, 111px -253.6666666667px #00ffea, -47px -296.6666666667px #e6ff00, -35px -375.6666666667px #c400ff, 20px -24.6666666667px #ff0066, -145px -79.6666666667px #d5ff00, 215px -403.6666666667px #aa00ff, 241px -387.6666666667px #ffe600, -84px -397.6666666667px #b700ff, 177px 67.3333333333px #8cff00, -30px -122.6666666667px #00ff40, 2px -212.6666666667px #000dff, 138px -375.6666666667px #1a00ff, -179px -249.6666666667px #00ff09, -131px 24.3333333333px #ff00c4, -232px 61.3333333333px #00ffc4, -193px -317.6666666667px #37ff00, -8px -146.6666666667px #ff005e, 184px -85.6666666667px #4000ff, -211px -142.6666666667px #ff7300, 201px -52.6666666667px #ffbf00, 217px -336.6666666667px #00ffb7, -190px -50.6666666667px #ff0900, -56px -173.6666666667px #ffd000, -41px -333.6666666667px #cc00ff, -46px -182.6666666667px #ff0900, 229px 9.3333333333px #00ff33, 89px -224.6666666667px #4800ff, -175px -20.6666666667px #00eaff, -114px -143.6666666667px #5100ff, -222px -97.6666666667px #ffd900, -154px -165.6666666667px #ff00ae, 235px -357.6666666667px #002fff, -241px -392.6666666667px #00c8ff, 26px -127.6666666667px #ae00ff, 150px -184.6666666667px #6600ff, 94px -280.6666666667px #4800ff, 160px -307.6666666667px fuchsia, -131px -324.6666666667px #ff0095, 65px -258.6666666667px #aa00ff, -214px -99.6666666667px #0080ff, 129px -378.6666666667px #ff008c, 42px -302.6666666667px #00ff8c, -116px -394.6666666667px blue, -177px -347.6666666667px #00ffae, -82px -226.6666666667px #ff0077, 32px -257.6666666667px #00ff0d, 155px -277.6666666667px #ff0048, 159px -367.6666666667px #0091ff;
    }
}

@-ms-keyframes bang {
    to {
        box-shadow: -103px -280.6666666667px #04ff00, 75px -346.6666666667px #00ff26, -75px -108.6666666667px #ff0d00, 111px -253.6666666667px #00ffea, -47px -296.6666666667px #e6ff00, -35px -375.6666666667px #c400ff, 20px -24.6666666667px #ff0066, -145px -79.6666666667px #d5ff00, 215px -403.6666666667px #aa00ff, 241px -387.6666666667px #ffe600, -84px -397.6666666667px #b700ff, 177px 67.3333333333px #8cff00, -30px -122.6666666667px #00ff40, 2px -212.6666666667px #000dff, 138px -375.6666666667px #1a00ff, -179px -249.6666666667px #00ff09, -131px 24.3333333333px #ff00c4, -232px 61.3333333333px #00ffc4, -193px -317.6666666667px #37ff00, -8px -146.6666666667px #ff005e, 184px -85.6666666667px #4000ff, -211px -142.6666666667px #ff7300, 201px -52.6666666667px #ffbf00, 217px -336.6666666667px #00ffb7, -190px -50.6666666667px #ff0900, -56px -173.6666666667px #ffd000, -41px -333.6666666667px #cc00ff, -46px -182.6666666667px #ff0900, 229px 9.3333333333px #00ff33, 89px -224.6666666667px #4800ff, -175px -20.6666666667px #00eaff, -114px -143.6666666667px #5100ff, -222px -97.6666666667px #ffd900, -154px -165.6666666667px #ff00ae, 235px -357.6666666667px #002fff, -241px -392.6666666667px #00c8ff, 26px -127.6666666667px #ae00ff, 150px -184.6666666667px #6600ff, 94px -280.6666666667px #4800ff, 160px -307.6666666667px fuchsia, -131px -324.6666666667px #ff0095, 65px -258.6666666667px #aa00ff, -214px -99.6666666667px #0080ff, 129px -378.6666666667px #ff008c, 42px -302.6666666667px #00ff8c, -116px -394.6666666667px blue, -177px -347.6666666667px #00ffae, -82px -226.6666666667px #ff0077, 32px -257.6666666667px #00ff0d, 155px -277.6666666667px #ff0048, 159px -367.6666666667px #0091ff;
    }
}

@keyframes bang {
    to {
        box-shadow: -103px -280.6666666667px #04ff00, 75px -346.6666666667px #00ff26, -75px -108.6666666667px #ff0d00, 111px -253.6666666667px #00ffea, -47px -296.6666666667px #e6ff00, -35px -375.6666666667px #c400ff, 20px -24.6666666667px #ff0066, -145px -79.6666666667px #d5ff00, 215px -403.6666666667px #aa00ff, 241px -387.6666666667px #ffe600, -84px -397.6666666667px #b700ff, 177px 67.3333333333px #8cff00, -30px -122.6666666667px #00ff40, 2px -212.6666666667px #000dff, 138px -375.6666666667px #1a00ff, -179px -249.6666666667px #00ff09, -131px 24.3333333333px #ff00c4, -232px 61.3333333333px #00ffc4, -193px -317.6666666667px #37ff00, -8px -146.6666666667px #ff005e, 184px -85.6666666667px #4000ff, -211px -142.6666666667px #ff7300, 201px -52.6666666667px #ffbf00, 217px -336.6666666667px #00ffb7, -190px -50.6666666667px #ff0900, -56px -173.6666666667px #ffd000, -41px -333.6666666667px #cc00ff, -46px -182.6666666667px #ff0900, 229px 9.3333333333px #00ff33, 89px -224.6666666667px #4800ff, -175px -20.6666666667px #00eaff, -114px -143.6666666667px #5100ff, -222px -97.6666666667px #ffd900, -154px -165.6666666667px #ff00ae, 235px -357.6666666667px #002fff, -241px -392.6666666667px #00c8ff, 26px -127.6666666667px #ae00ff, 150px -184.6666666667px #6600ff, 94px -280.6666666667px #4800ff, 160px -307.6666666667px fuchsia, -131px -324.6666666667px #ff0095, 65px -258.6666666667px #aa00ff, -214px -99.6666666667px #0080ff, 129px -378.6666666667px #ff008c, 42px -302.6666666667px #00ff8c, -116px -394.6666666667px blue, -177px -347.6666666667px #00ffae, -82px -226.6666666667px #ff0077, 32px -257.6666666667px #00ff0d, 155px -277.6666666667px #ff0048, 159px -367.6666666667px #0091ff;
    }
}

@-webkit-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-moz-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-o-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-ms-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-webkit-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@-moz-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@-o-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@-ms-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@media (max-width:575px) {
    .p-5 {
        padding: 2rem !important
    }
}