@keyframes animateSvg {
    0% {
        stroke-dashoffset: 2000;
    }

    100% {
        stroke-dashoffset: 0px;
    }
}

.banner_wrapper-bgSvg path {
    stroke-dasharray: 2000;
    stroke-dashoffset: 0;
    animation: animateSvg 4s 0s forwards infinite;
}

.banner_wrapper-bgSvg {
    content: "";
    position: absolute;
    right: 0;
    width: auto;
    height: 94%;
    bottom: 0;
}

/* for removing old svg */
/* .banner_wrapper:after {
    display: none;
} */

/* animated svg */
.animated-image svg {
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* end */
.bounce-item {
    animation: bounce 1s ease infinite alternate;
}

@keyframes bounce {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(-30px);
    }
}

/* animated code */
.animatedImagefadeUp {
    opacity: 0;
    animation: fadeEleUp 1s 1s forwards;
}

@keyframes animatedImagefadeDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -30px, 0);
    }

    100% {
        opacity: 1;
        transform: translateZ(0);
    }
}

.animated-highlighted-layer {
    opacity: 0;
    animation: fadeEleUp 0.8s forwards;
}

.animatedImagefadeDown {
    opacity: 0;
    animation: fadeEleUp 0.8s 1.5s forwards, bounce 1s ease infinite alternate;
}

@keyframes dash {
    to {
        stroke-dashoffset: 0%;
    }
}

.animated-draw-line path {
    animation: dash 3s infinite forwards;
}

/* end of animation code */

.banner_bg svg {
    width: 100%;
    height: 100%;
}

@keyframes fadeEleRight {
    0% {
        opacity: 0;
        transform: translate3d(-50px, 0, 0);
    }

    100% {
        opacity: 1;
        transform: translateZ(0);
    }
}

.fade-ele-right {
    animation: fadeEleRight 2s 0s ease infinite;
}

@keyframes fadeEleUpRight {
    0% {
        opacity: 0;
        transform: translate3d(-50px, 50px, 0);
    }

    100% {
        opacity: 1;
        transform: translateZ(0);
    }
}

.fade-ele-up-right {
    animation: fadeEleUpRight 2s 0s ease infinite;
}

@keyframes fadeEleLeft {
    0% {
        opacity: 0;
        transform: translate3d(50px, 0, 0);
    }

    100% {
        opacity: 1;
        transform: translateZ(0);
    }
}

.fade-ele-left {
    animation: fadeEleLeft 2s 0s ease infinite;
}

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

    100% {
        opacity: 1;
    }
}

.fade-ele-in {
    animation: fadeEleIn 2s 0s ease infinite;
}

.crypto_section .bg-animate-item path {
    stroke-dasharray: 2000;
    stroke-dashoffset: 0;
    animation: animateSvg 4s 0s forwards infinite;
}

/* old svg remove */
/* .crypto_section::before {
    display: none;
} */

.crypto_section>.bg-animate-item {
    position: absolute;
    top: 50%;
    left: 32px;
    background-size: cover;
    content: "";
    width: 44%;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
}

/* old svg remove */
/* .integrations_section::after {
    display: none;
} */

.integrations_section>.bg-animate-item {
    position: absolute;
    top: 50%;
    right: 0;
    width: auto;
    transform: translate(0px, -50%);
    left: auto;
    text-align: end;
}

.integrations_section>.bg-animate-item path {
    stroke-dasharray: 2500;
    stroke-dashoffset: 0;
    animation: animateSvg2 4s 0s forwards infinite;
}

@keyframes animateSvg2 {
    0% {
        stroke-dashoffset: 2500;
    }

    100% {
        stroke-dashoffset: 0px;
    }
}

@keyframes fadeEleUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 50px, 0);
    }

    100% {
        opacity: 1;
        transform: translateZ(0);
    }
}

.fade-ele-up {
    animation: fadeEleUp 2s 0s ease infinite;
}

/* home banner svg animation code */
/* center elements animation code */
/* .highlighted-layer {
    opacity: 0;
} */

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

    100% {
        opacity: 1;
    }
}

/* .highlighted-layer {
    animation: fadeIn 0.8s 1s ease forwards;
} */

/* .center-box {
    opacity: 0;
} */

/* .center-box {
    opacity: 0;
    animation: fadeEleUp 0.8s 0.8s forwards;
} */

/* .center-item {
    opacity: 0;
} */

.center-item {
    animation: bounce 1s ease infinite alternate;
}

/* .main-item {
    animation: fadeEleUp 0.8s 1.4s forwards;
}


.main-item {
    opacity: 0;
} */

@keyframes draw {
    0% {
        stroke-dashoffset: 1031.0313720703125;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

.center-box-line {
    stroke-dasharray: 1031.0313720703125;
    stroke-dashoffset: 1031.0313720703125;
}

.center-box-line {
    animation: draw 3s forwards;
}

/* top left elements animation */
@keyframes draw2 {
    0% {
        stroke-dashoffset: 203.0060272216797;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes draw3 {
    0% {
        stroke-dashoffset: 1031.026611328125;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

.top-left-cover-line {
    stroke-dasharray: 203.0060272216797;
    stroke-dashoffset: 203.0060272216797;
}

.top-left-cover-line {
    animation: draw2 1s forwards;
}

.top-left-box-line {
    stroke-dasharray: 1031.026611328125;
    stroke-dashoffset: 1031.026611328125;
}

.top-left-box-line {
    animation: draw3 3s forwards;
}

/* .top-left-box {
    animation: fadeEleUp 0.8s forwards;
} */

/* .top-left-box {
    opacity: 0;
} */

/* .top-left-item {
    opacity: 0;
}

.top-left-item {
    animation: fadeEleUp 0.8s forwards, bounce 1s ease infinite alternate;
} */

/* top Right elements animation */

@keyframes draw4 {
    0% {
        stroke-dashoffset: 201.79029846191406;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

.top-right-cover-line {
    stroke-dasharray: 201.79029846191406;
    stroke-dashoffset: 201.79029846191406;
}

.top-right-cover-line {
    animation: draw4 1s forwards;
}

@keyframes draw5 {
    0% {
        stroke-dashoffset: 1031.037353515625;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

.top-right-box-line {
    stroke-dasharray: 1031.037353515625;
    stroke-dashoffset: 1031.037353515625;
}

.top-right-box-line {
    animation: draw5 3s forwards;
}

/* .top-right-box {
    opacity: 0;
} */

/* .top-right-box {
    animation: fadeEleUp 0.8s forwards;
} */

/* .top-right-item {
    opacity: 0;
}

.top-right-item {
    animation: fadeEleUp 0.8s forwards, bounce 1s ease infinite alternate;
} */

/* bottom right animation code */
@keyframes draw6 {
    0% {
        stroke-dashoffset: 241.25051879882812;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes draw7 {
    0% {
        stroke-dashoffset: 1031.0399169921875;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

.bottom-right-cover-line {
    stroke-dasharray: 241.25051879882812;
    stroke-dashoffset: 241.25051879882812;
}

.bottom-right-cover-line {
    animation: draw6 1s forwards;
}

.bottom-right-box-line {
    stroke-dasharray: 1031.0399169921875;
    stroke-dashoffset: 1031.0399169921875;
}

.bottom-right-box-line {
    animation: draw7 3s forwards;
}

/* .bottom-right-box {
    opacity: 0;
} */

/* .bottom-right-box {
    animation: fadeEleUp 0.8s forwards;
} */

/* .bottom-right-item {
    opacity: 0;
} */

/* .bottom-right-item {
    animation: fadeEleUp 0.8s forwards, bounce 1s ease infinite alternate;
} */


/* bottom left animation code */
@keyframes draw8 {
    0% {
        stroke-dashoffset: 263.35498046875;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes draw9 {
    0% {
        stroke-dashoffset: 1031.02587890625;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

.bottom-left-cover-line {
    stroke-dasharray: 263.35498046875;
    stroke-dashoffset: 263.35498046875;
}

.bottom-left-cover-line {
    animation: draw8 1s forwards;
}

.bottom-left-box-line {
    stroke-dasharray: 1031.02587890625;
    stroke-dashoffset: 1031.02587890625;
}

.bottom-left-box-line {
    animation: draw9 3s forwards;
}

/* .bottom-left-box {
    opacity: 0;
} */

/* .bottom-left-box {
    animation: fadeEleUp 0.8s 0.8s forwards;
} */

.bottom-left-item {
    opacity: 0;
}

/* .bottom-left-item {
    animation: fadeEleUp 0.8s forwards, bounce 1s ease infinite alternate;
} */

/* .main-box {
    opacity: 0;
    animation: fadeEleUp 0.8s 0.8s forwards;
} */

@keyframes movingRightBox {
    0% {
        transform: translate(0);
    }

    25% {
        transform: translate(-42%, 0px);
    }

    50% {
        transform: translate(-42%, 38%);
    }

    75% {
        transform: translate(0%, 38%);
    }

    100% {
        transform: translate(0);
    }
}

/* .top-right-box {
    animation: movingRightBox 7s 3s infinite;
} */

@keyframes movingLeftBox {
    0% {
        transform: translate(0);
    }

    25% {
        transform: translate(0, 38%);
    }

    50% {
        transform: translate(42%, 38%);
    }


    75% {
        transform: translate(42%, 0%);
    }

    100% {
        transform: translate(0);
    }
}

/* .top-left-box {
    animation: movingLeftBox 7s 3s infinite;
} */

@keyframes movingBottomLeftBox {
    0% {
        transform: translate(0);
    }

    25% {
        transform: translate(42%, 0);
    }

    50% {
        transform: translate(42%, -38%);
    }


    75% {
        transform: translate(0, -38%);
    }

    100% {
        transform: translate(0);
    }
}

/* .bottom-left-box {
    animation: movingBottomLeftBox 7s 3s infinite;
} */

@keyframes movingBottomRightBox {
    0% {
        transform: translate(0);
    }

    25% {
        transform: translate(0, -38%);
    }

    50% {
        transform: translate(-42%, -38%);
    }


    75% {
        transform: translate(-42%, 0);
    }

    100% {
        transform: translate(0);
    }
}

/* .bottom-right-box {
    animation: movingBottomRightBox 7s 3s infinite;
} */