.slideTextFromRightAnim {
    animation: slideTextFromRight 0.3s forwards;
}

@keyframes slideTextFromRight {
    from {
        transform: translateX(20px);
        opacity: 0;
    }

    to {
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes slideText {
    from {
        transform: translateX(-20px);
        opacity: 0.2;
    }

    to {
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes slideText05 {
    from {
        transform: translateX(-20px);
        opacity: 0.2;
    }

    to {
        transform: translateX(0px);
        opacity: 0.5;
    }
}

@keyframes rotate_right {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotate_left {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(-360deg);
    }
}

@keyframes sliding {
    0% {
        /* transform: translateX(-50px); */
        opacity: 0;

    }

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



@keyframes processing {
    0% {
        color: #fff;
    }

    100% {
        color: #FF1C58;
    }
}

@keyframes scale_up {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

@keyframes fade-slide-in {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0px);
    }
}


/* NEW ANIMATION */


.anim-lock {
    animation: anim-lock 0.5s forwards infinite alternate-reverse ;
}

@keyframes anim-lock  {
    from {transform: scale(1)}

    to {transform: scale(1.1)}
}


.rotate {
    animation: rotate 0.5s forwards ;
}

@keyframes rotate {
    from {transform: rotate(0deg)}

    to {transform: rotate(-360deg)}
}

.fade-scale-up {
    scale: 1.45;
    animation: fade-scale-up 1s forwards;
}

@keyframes fade-scale-up {
    0% {
        opacity: 0;
        scale:  1.3;
    }

    70% {
        opacity: 1;
        scale:  1.5;
    }

    100% {
        opacity: 1;
        scale:  1.45;
    }

}

.fadeFooter {
    opacity: 0;
    animation: fadeFooter 0.5s forwards;
}

@keyframes fadeFooter {
    from {
        color: rgba(207, 224, 238, 0);
        transform: translateY(5px);
    }

    to {
        color:  var(--primary-color);
        transform: translateY(0);
    }
}

.fade {
    opacity: 0;
    animation: fade 0.3s forwards;
}

.fade-delay {
    opacity: 0;
    animation: fade 0.3s 0.4s forwards;
}


@keyframes fade {
    from {
        opacity: 0
    }

    to {
        opacity: 1;
    }
}

@keyframes fade05 {
    from {
        opacity: 0
    }

    to {
        opacity: 0.5;
    }
}

.fade-left {
    opacity: 0;
    animation: fade-left 0.5s forwards;
}

.fade-left03 {
    opacity: 0;
    animation: fade-left 0.3s forwards;
}


.fade05-left {
    opacity: 0;
    animation: fade05-left 0.5s forwards;
}

.fade08-left {
    opacity: 0;
    animation: fade08-left 0.5s forwards;
}

@keyframes fade-left {
    from {
        transform: translateX(-5px);
        opacity: 0
    }

    to {
        transform: translateX(0);
        opacity: 1;}
}

@keyframes fade05-left{
    from {
        transform: translateX(-5px);
        opacity: 0
    }

    to {
        transform: translateX(0);
        opacity: 0.5;}
}

@keyframes fade08-left{
    from {
        transform: translateX(-5px);
        opacity: 0
    }

    to {
        transform: translateX(0);
        opacity: 0.8;}
}

.fade-right {
    opacity: 0;
    animation: fade-right 0.5s forwards;
}

.fade-right03 {
    opacity: 0;
    animation: fade-right 0.3s forwards;
}

@keyframes fade-right {
    from {
        transform: translateX(5px);
        opacity: 0
    }

    to {
        transform: translateX(0);
        opacity: 1;}
}

.fade-up {
    opacity: 0;
    animation: fade-up 0.5s forwards;
}
.fade-up03 {
    opacity: 0;
    animation: fade-up 0.3s forwards;
}

@keyframes fade-up {
    from {
        transform: translateY(5px);
        opacity: 0
    }

    to {
        transform: translateX(0);
        opacity: 1;}
}
.fade-down {
    opacity: 0;
    animation: fade-down 0.5s forwards;
}

.fade-down03 {
    opacity: 0;
    animation: fade-down 0.3s forwards;
}

@keyframes fade-down {
    from {
        transform: translateY(-5px);
        opacity: 0
    }

    to {
        transform: translateX(0);
        opacity: 1;}
}

.fadeOut {
    opacity: 1;
    animation: fadeOut 0.5s forwards !important;
}

.fadeOut03 {
    opacity: 1;
    animation: fadeOut 0.3s forwards !important;
}

@keyframes fadeOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0;}
}


.fadeOut-left {
    opacity: 1;
    animation: fadeOut-left 0.5s forwards !important;
}

.fadeOut-left03 {
    opacity: 1;
    animation: fadeOut-left 0.3s forwards !important;
}

@keyframes fadeOut-left {
    from {
        transform: translateX(0);
        opacity: 1
    }

    to {
        transform: translateX(-5px);
        opacity: 0;}
}

.fadeOut-right {
    opacity: 1;
    animation: fadeOut-right 0.5s forwards;
}

.fadeOut-right03 {
    opacity: 1;
    animation: fadeOut-right 0.3s forwards;
}

@keyframes fadeOut-right {
    from {
        transform: translateX(0);
        opacity: 1
    }

    to {
        transform: translateX(5px);
        opacity: 0;}
}

.fadeOut-up {
    opacity: 1;
    animation: fadeOut-up 0.5s forwards;
}

.fadeOut-up03 {
    opacity: 1;
    animation: fadeOut-up 0.3s forwards;
}


@keyframes fadeOut-up {
    from {
        transform: translateY(0);
        opacity: 1
    }

    to {
        transform: translateY(-5px);
        opacity: 0;}
}

.fadeOut-down {
    opacity: 1;
    animation: fadeOut-down 0.5s forwards;
}

.fadeOut-down03 {
    opacity: 1;
    animation: fadeOut-down 0.3s forwards;
}


@keyframes fadeOut-down {
    from {
        transform: translateY(0);
        opacity: 1
    }

    to {
        transform: translateY(5px);
        opacity: 0;}
}

.networkConnected , .networkDisconnected {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.networkConnected>svg {
    animation: networkConnected 1s infinite alternate-reverse;
    margin: 0 10px;
}

@keyframes networkConnected {
    from {
        fill: var(--primary-color);
    }
    to {
        fill: #1f7fd2;
    }
}

.networkDisconnected>svg {
    animation: networkDisconnected 1s infinite alternate-reverse;
    margin: 0 10px;
}

@keyframes networkDisconnected {
    from {
        fill: var(--primary-color);
    }

    to {
        fill: #FF1C58;
    }
}

.flashing {
    animation: flashing 1s infinite alternate-reverse;
}

.flashing-opacity {
    animation: flashing-opacity 1s infinite alternate-reverse;
}


@keyframes flashing-opacity {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.5;
    }
}



@keyframes flashing {
    from {
        color: var(--primary-color);
    }

    to {
        color: #1f7fd2;
    }
}

@keyframes flashing-red {
    from {
        color: white;
    }

    to {
        color: #ff426f;
    }
}


.download-anim {
    animation: download 0.7s forwards;
}

@keyframes download {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    25% {
        transform: translateY(50px);
        opacity: 0;
    }


    50% {
        transform: translateY(-50px);
        opacity: 0;
    }

    75% {
        transform: translateY(0px);
        opacity: 1;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

.heartbeat {
    animation: heartbeat 0.7s infinite;
}

@keyframes heartbeat {
    from {scale: 1}
    to {scale: 1.1}
}

.expand-vertical {
    animation: expand-vertical 0.3s ease;
}

@keyframes expand-vertical {
    from {height: 0}
    to {height: var(--height)}
}

.outline-expand-infinite {
    animation: outline-expand 0.3s ease alternate-reverse infinite;
}

@keyframes outline-expand {
    from {
        outline: 2px solid var(--text-color);
        outline-offset: 5px;
    }

    to {
        outline: 2px solid var(--text-color);
        outline-offset: 10px;
    }
}


@keyframes outline-expand-small {
    from {
        outline: 1px solid var(--text-color);
        outline-offset: 2px;
    }

    to {
        outline: 1px solid var(--text-color);
        outline-offset: 6px;
    }
}

.inline-expand-small-infinite {
    animation: inline-expand-small 0.3s ease alternate-reverse infinite;
}

@keyframes inline-expand-small {

    from {
        outline: 1px solid var(--text-color);
        outline-offset: -2px;

    }

    to {
        outline: 1px solid var(--text-color);
        outline-offset: -6px;
    }
}

@keyframes pulse {
    from {
        outline: 1px solid var(--text-color);
        outline-offset: 2px;
    }

    to {
        outline: 1px solid transparent;
        outline-offset: 12px;
    }
}

@keyframes inputPulse {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(41, 92, 255, 0.1); }
}

.loading-anim-container {
    height: 100%;
    width: 100%;
    z-index: 100;
}

.loading-anim-container svg{
    height: auto;
    width: 100px;
}


/* ANIMATION SVG*/

.wave-container {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    overflow-x: hidden;
    height: 130px;
    z-index: -2;
}

.wave-container svg path {
    fill: rgba(34, 38, 46, 0.75);
    transition: fill 0.3s;
}


.wave {
    position: absolute;
    width: 200%;
    height: 100%;
    animation: waveMove 24s linear infinite;
}

/* Second wave starts after the first */
.wave1{
    left: 0;
}

.wave2 {
    left: 99.8%;
    animation-delay: 12s; /* Ensures seamless transition */
}

@keyframes waveMove {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}