/*<span style="font-size: 50px; display: inline-block;" > 🏢</span >*/
/*data-animate="typewriter" class="typewriter"*/
/*<h1 data-animate="typewriter" class="typewriter" data-wow-delay=".2s" style="font-size: 48px; text-shadow: 10px 10px 10px black;justify-self:center;text-align:center" > </h1 >*/
/*<div class="animate-fade-in-down" data-animate="fade-in-down" style="animation-delay: 0.4s;" >*/
[data-animate] {
    opacity: 0;
}


.typewriter {
    overflow: hidden;
    white-space: nowrap;
    width: 0;
}

/* این فقط زمانی اعمال میشه که عنصر دیده بشه */
.animate-typewriter {
    animation: typewriter 2s steps(80, end) forwards;
}
@keyframes typewriter {
    from {
        opacity: 1;
        width: 0;
    }

    to {
        opacity: 1;
        width: 100%;
    }
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/*حرکت از بالا به پایین*/

.fade-in-down {
    opacity: 0;
    transform: translateY(-10px);
}

.animate-fade-in-down {
    animation: fade-in-down 0.5s linear forwards;
}
@keyframes fade-in-down {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* حرکت از پایین به بالا */
.fade-in-up {
    opacity: 0;
    transform: translateY(500px); /* مخفی شده پایین صفحه */
}

.animate-fade-in-up {
    animation: fade-in-up 0.5s ease-out forwards;
}

@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(100px); /* شروع پایین‌تر */
    }

    100% {
        opacity: 1;
        transform: translateY(0); /* به جای اصلی می‌رسد */
    }
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* حرکت از چپ به راست */

.fade-in-left {
    opacity: 0;
    transform: translateX(-500px);
}

.animate-fade-in-left {
    animation: fade-in-left 0.5s ease-out forwards;
}

@keyframes fade-in-left {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* حرکت از راست به چپ */
.fade-in-right {
    opacity: 0;
    transform: translateX(500px); /* شروع از سمت راست خارج صفحه */
}

.animate-fade-in-right {
    animation: fade-in-right 0.5s linear forwards;
}

@keyframes fade-in-right {
    0% {
        opacity: 0;
        transform: translateX(100px); /* شروع پایین‌تر */
    }

    100% {
        opacity: 1;
        transform: translateX(0); /* جای اصلی */
    }
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*Zoom Out و بعد حرکت از راست به چپ */
.fade-in-right-zoom {
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1.5); /* بزرگ و وسط */
}

.animate-fade-in-right-zoom {
    animation: fade-in-right-zoom 0.5s ease-out forwards;
}

@keyframes fade-in-right-zoom {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2); /* بزرگ در مرکز */
    }
    25% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1); /* بزرگ در مرکز */
    }

    50% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1); /* اندازه نرمال در مرکز */
    }

   

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1); /* رفته به راست */
    }
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/*Zoom In*/

.ZoomIn {
    opacity: 1;
    transform: scale(0);
}

.animate-ZoomIn {
    animation: ZoomIn 1s linear forwards;
}

@keyframes ZoomIn {
    0%,25% {
        opacity: 1;
        transform: scale(0);
    }

   50%,100% {
        opacity: 1;
        transform: scale(1);
    }
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/