/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* @import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,200;6..12,300;6..12,400;6..12,500&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@200;300;400;500&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600&display=swap'); */

#logo {
    width: 12.5vmax;
}

.width-50p {
    width: 80%;
}

.d-none {
    display: none;
}


.mobile-container {
    width: 361px;
    height: 510px;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(45px);
    -ms-transform: translateX(-50%) translateY(45px);
    transform: translateX(-50%) translateY(45px);
    background-color: transparent;
    position: relative;
}

.outer-border {
    width: 100%;
    height: 100%;
    border: 10px solid #efefef;
    border-radius: 15px;
    -webkit-box-shadow: 1px 1px 60px #e0f7ff;
    box-shadow: 1px 1px 60px #e0f7ff;
}

.inner-border {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    border: 10px solid transparent;
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ffffff;
}

.inner-border .top-logobg {
    position: relative;
    width: 106%;
    height: 66px;
    top: -10px;
    left: -9px;
    background: #ffffff;
    /* border-top-right-radius: 25px;
    border-top-left-radius: 25px; */
}

.ipadbg:hover .outer-border {
    -webkit-box-shadow: 0 0 40px #aaa;
    box-shadow: 0 0 40px #aaa;
    -webkit-transition: all 800ms ease;
    -o-transition: all 800ms ease;
    transition: all 800ms ease;
}




.ipadbg {
    /* background: url('../images/payment/web-fis-i-pad.png')no-repeat; */
    /* filter: drop-shadow(1px 1px 60px #ccdbfacf); */
    /* background: url('../images/payment/high-quality-ipad.png')no-repeat; */
    background-size: calc(555px) calc(634px);
    background-position: center;
    height: 634px;
}

.ipad-left {
    background: url('../images/ipad-left.webp')no-repeat;
    background-size: contain;
    background-position: center;
    top: 0px;
    left: -44px;
    width: 150px;
    height: 555px;
}


.ipad-logo {
    top: 63px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 50px;
    height: 49px;
    background: url('../images/chatbot-fis-logo.png')no-repeat;
    background-position: center;
    background-size: contain;
}

.ipad-right {
    top: 300px;
    right: -18px;
    -webkit-transform: rotate(16deg);
    -ms-transform: rotate(16deg);
    transform: rotate(16deg);
    width: 100px;
    height: 70px;
    border-radius: 50%;
}

.ipad-right-loader {
    position: relative;
    width: 180px;
    height: 180px;
    /* transform-style: preserve-3d;
    transform: perspective(500px) rotateX(60deg); */
}

.ipad-right-loader span {
    position: absolute;
    display: block;
    /* border: 2px solid #fff;
    box-shadow: 0 1px 0 #ccc,
    inset 0 1px 0 #ccc; */
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 50%;
}

.ipad-right-loader span:nth-child(1) {
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: perspective(500px) rotateX(60deg);
    transform: perspective(500px) rotateX(60deg);
    -webkit-animation: animat1 16s ease infinite;
    animation: animat1 16s ease infinite;
}

.ipad-right-loader span:nth-child(1) div {
    position: absolute;
    top: 25px;
    left: 25px;
    background: url('../images/tringle-1.png')no-repeat;
    background-position: center;
    background-size: contain;
    height: 25px;
    width: 25px;
    -webkit-animation: animate 3s ease-in-out infinite;
    animation: animate 3s ease-in-out infinite;
}

.ipad-right-loader span:nth-child(2) {
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: perspective(500px) rotateY(60deg);
    transform: perspective(500px) rotateY(60deg);
    -webkit-animation: animat2 6s ease infinite;
    animation: animat2 6s ease infinite;
}

.ipad-right-loader span:nth-child(2) div {
    position: absolute;
    top: 25px;
    left: 25px;
    background: url('../images/tringle-2.png')no-repeat;
    background-position: center;
    background-size: contain;
    height: 25px;
    width: 25px;
    -webkit-animation: animate 3s ease-in-out infinite;
    animation: animate 3s ease-in-out infinite;
}

.ipad-right-loader span:nth-child(3) {
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: perspective(500px) rotateZ(60deg);
    transform: perspective(500px) rotateZ(60deg);
    -webkit-animation: animat3 16s ease infinite;
    animation: animat3 16s ease infinite;
}

.ipad-right-loader span:nth-child(3) div {
    position: absolute;
    top: 25px;
    left: 25px;
    background: url('../images/tringle-3.png')no-repeat;
    background-position: center;
    background-size: contain;
    height: 25px;
    width: 25px;
    -webkit-animation: animate 3s ease-in-out infinite;
    animation: animate 3s ease-in-out infinite;
}


@-webkit-keyframes animate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

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


@keyframes animate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

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

@-webkit-keyframes animat1 {
    0% {
        -webkit-transform: perspective(500px) rotateX(60deg) rotate(0deg);
        transform: perspective(500px) rotateX(60deg) rotate(0deg);
    }

    100% {
        -webkit-transform: perspective(500px) rotateX(60deg) rotate(-1440deg);
        transform: perspective(500px) rotateX(60deg) rotate(-1440deg);
    }
}

@keyframes animat1 {
    0% {
        -webkit-transform: perspective(500px) rotateX(60deg) rotate(0deg);
        transform: perspective(500px) rotateX(60deg) rotate(0deg);
    }

    100% {
        -webkit-transform: perspective(500px) rotateX(60deg) rotate(-1440deg);
        transform: perspective(500px) rotateX(60deg) rotate(-1440deg);
    }
}

@-webkit-keyframes animat2 {
    0% {
        -webkit-transform: perspective(500px) rotateY(60deg) rotate(0deg);
        transform: perspective(500px) rotateY(60deg) rotate(0deg);
    }

    100% {
        -webkit-transform: perspective(500px) rotateY(60deg) rotate(720deg);
        transform: perspective(500px) rotateY(60deg) rotate(720deg);
    }
}

@keyframes animat2 {
    0% {
        -webkit-transform: perspective(500px) rotateY(60deg) rotate(0deg);
        transform: perspective(500px) rotateY(60deg) rotate(0deg);
    }

    100% {
        -webkit-transform: perspective(500px) rotateY(60deg) rotate(720deg);
        transform: perspective(500px) rotateY(60deg) rotate(720deg);
    }
}

@-webkit-keyframes animat3 {
    0% {
        -webkit-transform: perspective(500px) rotateZ(60deg) rotate(0deg);
        transform: perspective(500px) rotateZ(60deg) rotate(0deg);
    }

    100% {
        -webkit-transform: perspective(500px) rotateZ(60deg) rotate(1440deg);
        transform: perspective(500px) rotateZ(60deg) rotate(1440deg);
    }
}

@keyframes animat3 {
    0% {
        -webkit-transform: perspective(500px) rotateZ(60deg) rotate(0deg);
        transform: perspective(500px) rotateZ(60deg) rotate(0deg);
    }

    100% {
        -webkit-transform: perspective(500px) rotateZ(60deg) rotate(1440deg);
        transform: perspective(500px) rotateZ(60deg) rotate(1440deg);
    }
}

.cube-box {
    min-height: 300px;
}

.grow-animation {
    position: absolute;
    top: 180px;
    left: -54px;
}

.cube {
    position: relative;
    width: 70px;
    height: 70px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(-30deg);
    transform: rotateX(-30deg);
    -webkit-animation: animatecube 10s linear infinite;
    animation: animatecube 10s linear infinite;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.cube:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

@-webkit-keyframes animatecube {
    0% {
        -webkit-transform: rotateX(-10deg)rotateY(0deg);
        transform: rotateX(-10deg)rotateY(0deg);
    }

    100% {
        -webkit-transform: rotateX(-10deg)rotateY(360deg);
        transform: rotateX(-10deg)rotateY(360deg);
    }
}

@keyframes animatecube {
    0% {
        -webkit-transform: rotateX(-10deg)rotateY(0deg);
        transform: rotateX(-10deg)rotateY(0deg);
    }

    100% {
        -webkit-transform: rotateX(-10deg)rotateY(360deg);
        transform: rotateX(-10deg)rotateY(360deg);
    }
}

.cube div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.cube div span {
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: -webkit-gradient(linear, left top, left bottom, from(#aaeff5), to(#00ccec));
    background: -o-linear-gradient(#aaeff5, #00ccec);
    background: linear-gradient(#aaeff5, #00ccec);
    -webkit-box-shadow: inset 20px 20px 60px #aaeff5,
        inset -20px -20px 60px #00ccec;
    box-shadow: inset 20px 20px 60px #aaeff5,
        inset -20px -20px 60px #00ccec;
    -webkit-transform: rotateY(calc(90deg * var(--i))) translateZ(26px) translateX(0px);
    transform: rotateY(calc(90deg * var(--i))) translateZ(26px) translateX(0px);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation: animcolor linear 8s infinite;
    animation: animcolor linear 8s infinite;
    /* 300 /2 = 150; */
}

@-webkit-keyframes animcolor {
    0% {
        -webkit-filter: hue-rotate(0deg);
        filter: hue-rotate(0deg);
    }

    100% {
        -webkit-filter: hue-rotate(360deg);
        filter: hue-rotate(360deg);

    }

}

@keyframes animcolor {
    0% {
        -webkit-filter: hue-rotate(0deg);
        filter: hue-rotate(0deg);
    }

    100% {
        -webkit-filter: hue-rotate(360deg);
        filter: hue-rotate(360deg);

    }

}

.cube div span img {
    width: 200px;
}

.cube div span strong {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 300px;
    color: #444;
    font-size: 114px;
    -webkit-transform: rotateX(90deg) translateZ(262px) translateY(-165px);
    transform: rotateX(90deg) translateZ(262px) translateY(-165px);
}

.shw {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: rotateX(90deg) translateZ(0px) translateY(10px);
    transform: rotateX(90deg) translateZ(0px) translateY(10px);
}

.shw::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 49px;
    background: #777;
    -webkit-transform: translateZ(-131px);
    transform: translateZ(-131px);
    -webkit-filter: blur(20px);
    filter: blur(20px);
    -webkit-box-shadow: 0 0 120px 20px rgba(49, 51, 49, 0.63);
    box-shadow: 0 0 120px 20px rgba(49, 51, 49, 0.63)
}

/*.top-left {
    top: 0px;
    left: 0px;
    background: url('../images/payment/tringle-1.png')no-repeat;
    background-position: center;
    background-size: contain;
    height: 25px;
    width: 25px;
}

.top-right {
    top: 45px;
    right: 12px;
    background: url('../images/payment/tringle-3.png')no-repeat;
    background-position: center;
    background-size: contain;
    height: 25px;
    width: 25px;
}

.bottom-right {
    bottom: 0px;
    right: 0px;
    background: url('../images/payment/tringle-2.png')no-repeat;
    background-position: center;
    background-size: contain;
    height: 25px;
    width: 25px;
}*/

.clockwise {
    -webkit-animation: clockwise linear 8s infinite;
    animation: clockwise linear 8s infinite;
    /* animation-name: clockwise;
    animation-duration: 8s;
    animation-iteration-count: infinite; */
}

@-webkit-keyframes clockwise {

    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

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

}

@keyframes clockwise {

    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

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

}

.rain {
    -webkit-animation: rain linear 2000ms infinite;
    animation: rain linear 2000ms infinite;
}

@-webkit-keyframes rain {
    0% {
        -webkit-transform: translateY(-55px) translateX(-30px) scale(0.5) rotate(0deg);
        transform: translateY(-55px) translateX(-30px) scale(0.5) rotate(0deg);
    }

    50% {
        -webkit-transform: translateY(30px) translateX(-30px) scale(0.7) rotate(90deg);
        transform: translateY(30px) translateX(-30px) scale(0.7) rotate(90deg);

    }

    100% {
        -webkit-transform: translateY(80px) translateX(150px) scale(1.01) rotate(90deg);
        transform: translateY(80px) translateX(150px) scale(1.01) rotate(90deg);

    }

}

@keyframes rain {
    0% {
        -webkit-transform: translateY(-55px) translateX(-30px) scale(0.5) rotate(0deg);
        transform: translateY(-55px) translateX(-30px) scale(0.5) rotate(0deg);
    }

    50% {
        -webkit-transform: translateY(30px) translateX(-30px) scale(0.7) rotate(90deg);
        transform: translateY(30px) translateX(-30px) scale(0.7) rotate(90deg);

    }

    100% {
        -webkit-transform: translateY(80px) translateX(150px) scale(1.01) rotate(90deg);
        transform: translateY(80px) translateX(150px) scale(1.01) rotate(90deg);

    }

}

.rain2 {
    -webkit-animation: rain2 linear 2000ms infinite;
    animation: rain2 linear 2000ms infinite;
}

@-webkit-keyframes rain2 {
    0% {
        -webkit-transform: translateY(0px) translateX(-10px) scale(0.3) rotate(90deg);
        transform: translateY(0px) translateX(-10px) scale(0.3) rotate(90deg);
    }

    50% {
        -webkit-transform: translateY(-10px) translateX(50px) scale(0.4) rotate(90deg);
        transform: translateY(-10px) translateX(50px) scale(0.4) rotate(90deg);

    }

    89% {
        -webkit-transform: translateY(-28px) translateX(130px) scale(0.7) rotate(90deg);
        transform: translateY(-28px) translateX(130px) scale(0.7) rotate(90deg);

    }

    100% {
        -webkit-transform: translateY(-30px) translateX(180px) scale(0.9) rotate(90deg);
        transform: translateY(-30px) translateX(180px) scale(0.9) rotate(90deg);

    }

}

@keyframes rain2 {
    0% {
        -webkit-transform: translateY(0px) translateX(-10px) scale(0.3) rotate(90deg);
        transform: translateY(0px) translateX(-10px) scale(0.3) rotate(90deg);
    }

    50% {
        -webkit-transform: translateY(-10px) translateX(50px) scale(0.4) rotate(90deg);
        transform: translateY(-10px) translateX(50px) scale(0.4) rotate(90deg);

    }

    89% {
        -webkit-transform: translateY(-28px) translateX(130px) scale(0.7) rotate(90deg);
        transform: translateY(-28px) translateX(130px) scale(0.7) rotate(90deg);

    }

    100% {
        -webkit-transform: translateY(-30px) translateX(180px) scale(0.9) rotate(90deg);
        transform: translateY(-30px) translateX(180px) scale(0.9) rotate(90deg);

    }

}

.blink {
    -webkit-animation: blink linear 2800ms infinite;
    animation: blink linear 2800ms infinite;
}

@-webkit-keyframes blink {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

}

@keyframes blink {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

}

.hide {
    opacity: 0;
}

#mobcontainer {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-47%);
    -ms-transform: translateX(-50%) translateY(-47%);
    transform: translateX(-50%) translateY(-47%);
    width: 337px;
    height: 424px;
    margin: auto;
    background: -webkit-gradient(linear, left top, left bottom, from(#eae4d48c), to(#b5d1dc81));
    background: -o-linear-gradient(#eae4d48c, #b5d1dc81);
    background: linear-gradient(#eae4d48c, #b5d1dc81);
    overflow: hidden !important;
}

.sliding-text {
    position: relative;
    height: 1000px;
}

#sliding-textbox {
    top: 450px;
    /* background: #ebf4d8; */
    background: transparent;
    /* background: #fff6de; */
    /* background: #fbf3cc; */
    /* background: #f9edff; */
    /* background: #f3f9fd; */
    /* transition: all 500ms ease-in; */
}

.downtoup {
    -webkit-animation-name: downtoup;
    animation-name: downtoup;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

@-webkit-keyframes downtoup {
    0% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
        -webkit-filter: blur(10px);
        filter: blur(10px);
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-filter: blur(0px);
        filter: blur(0px);
    }
}

@keyframes downtoup {
    0% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
        -webkit-filter: blur(10px);
        filter: blur(10px);
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-filter: blur(0px);
        filter: blur(0px);
    }
}

.chatbot-icon {
    top: 40%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 1px;
}

.chatbot-text {
    top: 40%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 40px;
    max-width: 254px;
    /* background: #f8dc95; */
    /* background: #88abb7; */
    background: #ffffff;
    border-radius: 20px;
    padding: 13px 25px;
    /* color: #76590f; */
    color: #19354eeb;
    /* color: #92a6b8; */
    font-weight: 500;
    font-size: 14px;
    /* font-family: 'Lora', serif; */
    /* font-family: 'Roboto', sans-serif; */
    /* font-family: 'Poppins', sans-serif; */
    /* font-family: 'Ubuntu', sans-serif; */
    font-family: 'Nunito Sans', sans-serif;
    /* font-family: 'Fira Sans', sans-serif; */
    /* font-family: 'Quicksand', sans-serif; */
}

.chatbot-button {
    top: 40%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 40px;
    max-width: 254px;
    background: #ffffff;
    border-radius: 20px;
    padding: 20px 25px;
    /* color: #000; */
    font-size: 17px;
}

.btn-chatbot {
    /* background: #f78700; */
    /* background: #88abb7; */
    /* background: #899eb8; */
    /* background: #0066ff; */
    background: #2fc774;
    /* background: #1e4db7; */
    /* background: linear-gradient(145deg, #d9dc48, #eecf08);
    box-shadow: 5px 5px 30px #71644183,
        -5px -5px 30px #ece0c497; */
    border: none !important;
    /* border: 2px solid #76590f !important; */
    -webkit-box-shadow: inset;
    box-shadow: inset;
    color: #ffffff;
    font-weight: 500;
    /* border: none !important; */
}

.chatbot-icon-y {
    top: 40%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 1px;
}

.chatbot-text-y {
    top: 40%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 40px;
    max-width: 254px;
    text-align: left;
    background: #01c0c8;
    /* background: #1e4db7; */
    border-radius: 20px;
    padding: 13px 25px;
    color: #fff;
    font-size: 14px;
    /* font-family: 'Lora', serif; */
    /* font-family: 'Roboto', sans-serif; */
    /* font-family: 'Poppins', sans-serif; */
    /* font-family: 'Ubuntu', sans-serif; */
    font-family: 'Nunito Sans', sans-serif;
    /* font-family: 'Fira Sans', sans-serif; */
    /* font-family: 'Quicksand', sans-serif; */
}

/* .chat-boxes {
    box-shadow: none;
    transform: scale(1);
    transition: all 300ms ease;
}

.chat-boxes:hover {
    transform: scale(1.01);
    box-shadow: 1px 1px 10px #f4f4f4;
} */
.bobble {
    position: relative;
}

.bobble::after {
    position: absolute;
    bottom: -30px;
    left: 2%;
    background: -webkit-gradient(linear, left top, left bottom, from(#01c1c841), to(#2fc77321));
    background: -o-linear-gradient(#01c1c841, #2fc77321);
    background: linear-gradient(#01c1c841, #2fc77321);
    content: " ";
    height: 150px;
    width: 150px;
    border-radius: 50%;
    z-index: 1;
    -webkit-animation: bubbling linear 4s infinite 0s;
    animation: bubbling linear 4s infinite 0s;
}

.bubble {
    -webkit-animation: bubble linear 1s 1 0s;
    animation: bubble linear 1s 1 0s;
}

@keyframes bubble {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

.bobble::before {
    position: absolute;
    bottom: -30px;
    left: 2%;
    background: -webkit-gradient(linear, left top, left bottom, from(#2fc77335), to(#01c1c844));
    background: -o-linear-gradient(#2fc77335, #01c1c844);
    background: linear-gradient(#2fc77335, #01c1c844);
    content: " ";
    height: 150px;
    width: 150px;
    border-radius: 50%;
    z-index: 1;
    -webkit-animation: bubbling linear 4s infinite 1s;
    animation: bubbling linear 4s infinite 1s;
}

@-webkit-keyframes bubbling {

    0%,
    100% {
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
    }

    50% {
        -webkit-transform: scale(0.4);
        transform: scale(0.4);
    }

}

@keyframes bubbling {

    0%,
    100% {
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
    }

    50% {
        -webkit-transform: scale(0.4);
        transform: scale(0.4);
    }

}

.bank-to-books {
    position: relative;
    width: 100%;
    height: 500px;
}

#bank-transaction {
    background: url("../images/bank-transaction2.png")no-repeat;
    /* background: url("../images/bank-transaction2.webp")no-repeat; */
    background-size: contain;
    background-position: center;
    width: 597px;
    height: 410px;
    position: absolute;
    top: -60px;
    left: -39px;
    -webkit-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}

#bank-transaction div {
    position: relative;
    width: 100%;
    height: 100%;
}

#bank-transaction div span {
    position: absolute;
}

#bank-transaction div span:nth-child(1) {
    bottom: -1px;
    left: 40%;
    height: 90px;
    width: 90px;
    background: url('../images/cr-1.png')no-repeat;
    background-size: contain;
    background-position: center;
}


/* 
.bank-to-sink {
    position: absolute;
    width: 400px;
    height: 250px;
    top: 110px;
    left: -51px;
}

.bank-to-sink path {
    stroke: #666;
    stroke-width: 2;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: all 500ms ease-in-out;
} */

/* .walk {
    animation: walk linear 2s infinite;
} */

/* @keyframes walk {

    0% {
        stroke-dashoffset: 0;
        stroke-dasharray: 10;
    }

    100% {
        stroke-dashoffset: 500;
        stroke-dasharray: 300;
    }

}

.walk2 {
    animation: walk2 linear 2s infinite;
}

@keyframes walk2 {

    0% {
        stroke-dashoffset: 500;
        stroke-dasharray: 300;

    }

    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 10;
    }

} */
.zoom-in {
    -webkit-transform: sca;
    -ms-transform: sca;
    transform: sca;
}

/* #data-syncbg {
    position: absolute;
    right: 253px;
    top: 226px;
    height: 207px;
    width: 207px;
    background: url('../images/payment/data-sync-bg.png')no-repeat;
    background-position: center;
    background-size: contain;
    transition: all 300ms ease-in-out;
    transform: scale(0);
}

#data-sync {
    position: relative;
    display: block;
    right: -64px;
    top: 47px;
    height: 133px;
    width: 80px;
    background: url('../images/payment/data-sync.png')no-repeat;
    background-position: center;
    background-size: contain;
    transition: all 300ms ease-in-out;
    transform: scale(0);
} */


/* .sink-to-ledger {
    position: absolute;
    width: 400px;
    height: 250px;
    top: 218px;
    right: 1px;
}

.sink-to-ledger path {
    stroke: #666;
    stroke-width: 2;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: all 500ms ease-in-out;
} */
#bankCredit-card {
    position: absolute;
    left: -48px;
    bottom: -48px;
    height: 182px;
    width: 209px;
    background: url('../images/credit-card6.webp')no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}

#bankCredit-card div {
    position: relative;
    width: 100%;
    height: 100%;
}

#bankCredit-card div span {
    position: absolute;
}

#bankCredit-card div span:nth-child(1) {
    bottom: -1px;
    right: -10%;
    height: 90px;
    width: 90px;
    background: url('../images/cr-1.png')no-repeat;
    background-size: contain;
    background-position: center;
}

#ledger-sheet {
    position: absolute;
    right: -253px;
    bottom: -117px;
    height: 354px;
    width: 706px;
    background: url('../images/bank-ledgersheet3.webp')no-repeat;

    background-position: center;
    background-size: contain;
    -webkit-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}

#ledger-sheet b {
    position: relative;
}

#inner-logo {
    position: absolute;
    top: 61px;
    left: 315px;
    height: 21px;
    width: 71px;
    -webkit-transform: perspective(400px) translateY(20px);
    transform: perspective(400px) translateY(20px);
    /* background: url("../images/logo/fiscal50_logo.png")no-repeat; */
    background-position: center;
    background-size: contain;
}

#ledger-sheet b #ledger-sheet-inner {
    position: absolute;
    top: 97px;
    left: 287px;
    height: 116px;
    width: 138px;
    /* background: url('../images/payment/bank-ledgersheet-inner.png')no-repeat; */
    background-position: center;
    background-size: contain;
    -webkit-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}

#ledger-sheet-inner b {
    width: 138px;
    height: 50px;
    display: block;
    border-radius: 3px;
    box-shadow: 0px 0px 4px #aaaaaaa9;
    position: absolute;
    border: 1px solid #d7dee8;
    bottom: -37px;
}

/* 
#ledger-sheet-inner b:first-child {
    transform: perspective(400px) translateY(20px) rotateY(14deg);
}

#ledger-sheet-inner b:last-child {
    transform: perspective(400px) translateY(14px) rotateY(14deg) rotateX(0deg) rotateZ(-2deg);
} */


#debit-box {
    font-size: 11px;
    /* color: #6265da; */
    /* color: #6265da; */
    /* color: #3c8f7d; */
    /* color: #88a0b2; */
    color: #19354eeb;
    /* font-weight: 550; */
    /* background: #e0f7ffb8; */
    /* text-shadow: 1px 1px 5px #aaaaaad2; */
    /* color: #444; */
    position: relative;
    top: 29px;
}

#debit-box::after {
    content: " ";
    position: absolute;
    height: 1px;
    width: 100%;
    top: 25px;
    left: 0px;
    background: #d7dee8;
}

#debit-box::before {
    content: " ";
    position: absolute;
    height: 49px;
    width: 1px;
    top: 0px;
    left: 74px;
    background: #d7dee8;
}

#debit-box #line {
    position: absolute;
    height: 49px;
    width: 1px;
    top: 0px;
    left: 104px;
    background: #d7dee8;
}

/* #debit-box span:nth-child(1) {
    position: absolute;
    left: 0px;
    top: 0px;
    display: inline-block;
    width: 15px;
    margin-right: 5px;
} */

#debit-box span:nth-child(1) {
    position: absolute;
    left: 5px;
    top: 5px;
}

#debit-box span:nth-child(2) {
    position: absolute;
    left: 5px;
    top: 29px;
}

#debit-box span:nth-child(3) {
    position: absolute;
    top: 5px;
    left: 107px;
}

#debit-box span:nth-child(4) {
    position: absolute;
    top: 29px;
    left: 78px;
}

#credit-box {
    font-size: 11px;
    /* color: #6265da; */
    /* color: #6265da; */
    /* color: #3c8f7d; */
    /* color: #88a0b2; */
    color: #19354eeb;
    /* font-weight: 550; */
    /* background: #e0f7ffb8; */
    /* text-shadow: 1px 1px 5px #aaaaaad2; */
    /* color: #444; */
    position: relative;
    bottom: 0;
}

#credit-box::after {
    content: " ";
    position: absolute;
    height: 1px;
    width: 100%;
    top: 25px;
    left: 0px;
    background: #d7dee8;
}

#credit-box::before {
    content: " ";
    position: absolute;
    height: 49px;
    width: 1px;
    top: 0px;
    left: 74px;
    background: #d7dee8;
}

#credit-box #line {
    position: absolute;
    height: 49px;
    width: 1px;
    top: 0px;
    left: 104px;
    background: #d7dee8;
}


/* #credit-box span:nth-child(1) {
    position: absolute;
    left: 0px;
    top: 0px;
    display: inline-block;
    width: 15px;
    margin-right: 5px;
} */

#credit-box span:nth-child(1) {
    position: absolute;
    left: 5px;
    top: 5px;
}

#credit-box span:nth-child(2) {
    position: absolute;
    left: 5px;
    top: 29px;
}

#credit-box span:nth-child(3) {
    position: absolute;
    left: 76px;
    top: 7px;
}

#credit-box span:nth-child(4) {
    position: absolute;
    left: 107px;
    top: 29px;
}


.write {
    -webkit-animation: write linear 3s infinite;
    animation: write linear 3s infinite;
}

@-webkit-keyframes write {

    0%,
    100% {
        width: 0px;
        opacity: 0;
    }

    50% {
        width: 103px;
        opacity: 1;
    }

}

@keyframes write {

    0%,
    100% {
        width: 0px;
        opacity: 0;
    }

    50% {
        width: 103px;
        opacity: 1;
    }

}

.top-4 {
    position: relative;
    top: -74px;
}

.lappy-bg {
    position: relative;
}

.lappy-bg:after {
    position: absolute;
    content: " ";
    background: url('../images/web-fis-img-3ssbg.webp')no-repeat;
    background-size: contain;
    background-position: center;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 0;
    height: 500px;
}

.lappy {
    position: relative;
    width: 108%;
    height: 555px;
    display: block;
    left: -31px;
    top: 12px;
    z-index: 99;
    background: url('../images/web-fis-img-3sslappy2.webp')no-repeat;
    background-size: contain;
    background-position: center;
    -webkit-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
    -webkit-filter: drop-shadow(0px 0px 20px #cdeaf0);
    filter: drop-shadow(0px 0px 20px #cdeaf0);
}

.lappy:hover {
    -webkit-filter: drop-shadow(0px 0px 40px #aaaaaab3);
    filter: drop-shadow(0px 0px 40px #aaaaaab3);

}

.footer-dark-v3::before {
    display: none;
}

#shet-heading {
    position: relative;
}

#shet-heading span {
    position: absolute;
    font-size: 11px;
    /* color: #88a0b2; */
    color: #19354eeb;
}

#shet-heading span:nth-child(1) {
    top: 12px;
    left: 86px;
}

#shet-heading span:nth-child(2) {
    top: 12px;
    left: 115px;
}

#shet-heading span:nth-child(3) {
    bottom: -103px;
    left: 86px;
}

#shet-heading span:nth-child(4) {
    bottom: -103px;
    left: 115px;
}

#togglebtn1 {
    display: block;
}

#togglebtn2 {
    display: none;
}

.modalposition {
    top: 150px;
}

.f50_Err {
    position: absolute;
    bottom: -15px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px 10px;
    right: 14px;
    z-index: 1 !important;
    box-shadow: 0px 3px 5px #ccc;
    color: #dc3545;
    font-size: 0.875rem !important;
}

.img-fluid {
    max-width: 60% !important;
}

.f50-from label {
    font-size: 14px;
    margin: 10px 0 10px 0;
}

.f50-from label.frm-label {
    font-size: 15px !important;
    margin: 10px 0 10px 0;
    font-weight: 500;
    color: #4074F2;
}

.bg-torquise {
    --bs-bg-opacity: 1;
    background-color: #2E4DB7;
}

.btn-torquise {
    --bs-btn-color: #fff;
    --bs-btn-bg: #01c0c8;
    --bs-btn-border-color: #01c0c8;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #02a8af;
    --bs-btn-hover-border-color: #02a8af;
    --bs-btn-focus-shadow-rgb: 89, 217, 140;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #02a8af;
    --bs-btn-active-border-color: #02a8af;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #16ccd3;
    --bs-btn-disabled-border-color: #16ccd3;
}

.btn-outline-fiscal50 {
    --bs-btn-color: #E8BA05;
    --bs-btn-border-color: #E8BA05;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #E8BA05;
    --bs-btn-hover-border-color: #E8BA05;
    --bs-btn-focus-shadow-rgb: 16, 45, 71;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #E8BA05;
    --bs-btn-active-border-color: #E8BA05;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #E8BA05;
    --bs-btn-disabled-bg: transparent;
    --bs-gradient: none;
}



.marginbottom {
    margin-bottom: 10px;
}