/* ---------------- animations ---------------   */

.text_anim {
    overflow: hidden;
    /* Ensure text doesn't overflow */
    /* white-space: nowrap; */
    /* Keep the text on one line */
    animation: typing 1s steps(10, end);
    /* Adjust animation duration and steps as needed */
}

@keyframes typing {
    from {
        width: 0;
        /* Start with no width */
    }

    to {
        width: 100%;
        /* End with full width */
    }
}


.right_to_left {
    animation-duration: 2s;
    animation-name: right_to_left_anim;
}

@keyframes right_to_left_anim {
    from {
        margin-left: 30%;
    }

    to {
        margin-left: 0%;
    }
}

.fade-in {
    -webkit-animation: fade-in 2s forwards;
    animation: fade-in 2s forwards;
}


@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.u-fade-type-left {
    transform: translateX(-100px);
    opacity: 0;
}

.u-fade-type-left.is-active {
    transition: 1s;
    transform: translateX(0);
    opacity: 1;
}


.u-fade-type-right {
    transform: translateX(100px);
    opacity: 0;
}


.u-fade-type-right.is-active {
    transition: 1s;
    transform: translateX(0);
    opacity: 1;
}


.u-fade-type-down {
    transform: translateY(100px);
    opacity: 0;
}

.u-fade-type-down.is-active {
    transition: 2s;
    transform: translateY(0);
    opacity: 1;
}

.u-fade-type-up {
    transform: translateY(-100px);
    opacity: 0;
}

.u-fade-type-up.is-active {
    transition: 2s;
    transform: translateY(0);
    opacity: 1;
}


.u-fade-type-static {
    opacity: 0;
}

.u-fade-type-static.is-active {
    transition: 2s;
    opacity: 1;
}