@keyframes swiper_img_anim {
    0% {
        scale: 0.6;
        opacity: 0.6;
        transform: translateX(-100px);
    }

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

.swiper_img_anim_css {
    animation: swiper_img_anim 1.3s forwards;
}




@keyframes swiper_text_anim {
    0% {
        scale: 1.2;
        opacity: 0;
        transform: translateX(-100px);
    }

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

.swiper_text_anim_css {
    animation: swiper_text_anim 1.5s forwards;
}



@keyframes swiper_btn_anim {
    0% {
        scale: 0;
    }

    70% {
        scale: 1.2;
    }

    100% {
        scale: 1;
    }
}

.swiper_btn_anim_css {
    animation: swiper_btn_anim 2s forwards;
}



@keyframes progress_full_100 {
    0% {
        width: 0%;
    }

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

.progress_full_100_css {
    animation: progress_full_100 2s forwards;
}


@keyframes progress_full_100 {
    0% {
        width: 0%;
    }

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

.progress_full_85_css {
    animation: progress_full_100 2s forwards;
}



@keyframes progress_full_100 {
    0% {
        width: 0%;
    }

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

.progress_full_100_css {
    animation: progress_full_100 2s forwards;
}



@keyframes progress_full_100 {
    0% {
        width: 0%;
    }

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

.progress_full_100_css {
    animation: progress_full_100 2s forwards;
}

@keyframes progress_full_100 {
    0% {
        width: 0%;
    }

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

.progress_full_100_css {
    animation: progress_full_100 2s forwards;
}


@keyframes services_jobs_anim {
    0% {
        opacity: 0;
        transform: translateY(60px);
    }

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

.services_jobs_anim_css {
    animation: services_jobs_anim 1s forwards;
}




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

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

.phone_anim_css {
    animation: phone_anim 1s forwards;
}


@keyframes products_anim {
    0% {
        opacity: 0;
        transform: translateY(60px);
    }

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

.products_anim_css {
    animation: products_anim 0.5s forwards;
}


@keyframes flip-animation {
    0% {
        transform: rotateY(120deg);
        opacity: 1;
    }

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

.flip {
    animation: flip-animation 1s forwards;
    backface-visibility: hidden;
    perspective: 1000px;
}