/* ===================================== 3 Custome Animations CSS ===================================== */
[data-animation-in] {
    opacity: 0;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    transition: opacity 0.5s ease 0.3s;
    transition: 1s;
}
.reveal {
    position: relative;
    opacity: 0;
    transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.active {
    opacity: 1;
    transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.active.custom_fade_top {
    animation: custom_fade_top 1.5s ease;
}
.active.custom_fade_buttom {
    animation: custom_fade_buttom 1.5s ease;
}
.active.custom_fade_left {
    animation: custom_fade_left 1.5s ease;
}
.active.custom_fade_right {
    animation: custom_fade_right 1.5s ease;
}
.active.custom_zoom_in {
    animation: custom_zoom_in 1.5s ease;
}
.active.custom_zoom {
    animation: custom_zoom 1.5s ease;
}
.active.custom_zoom_in_bottom {
    animation: custom_zoom_in_bottom 1s cubic-bezier(.6, -.28, .735, .045);
}
.active.custom_lightSpeedInLeft {
    animation: custom_lightSpeedInLeft 1.5s ease-out;
}
.active.BlinkEffectPre {
    animation: BlinkEffectPre 1s ease;
}
.active.fixedheader {
    animation: fixedheader 1.5s ease;
}
.active.program_animi {
    animation: program_animi 1s ease;
}
.active.ball_notify {
    animation: ball_notify 1s ease;
}
.active.our_program_shap {
    animation: our_program_shap 1s ease;
}
.active.video_text {
    animation: video_text 1s ease;
}
.active.pulse512 {
    animation: pulse512 1.5s ease;
}
.active.errortext-skew {
    animation: errortext-skew 1.5s ease;
}
.active.errortext2 {
    animation: errortext2 1.5s ease;
}
.active.errortext {
    animation: errortext 1.5s ease;
}
.img-animation-style1,
.img-animation-style2,
.img-animation-style3,
.img-animation-style4,
.img-animation-style5,
.img-animation-style6 {
    display: inline-block;
    position: relative;
    overflow: hidden;
    transition: 2s cubic-bezier(0.5, 0.5, 0, 1);
}
.img-animation-style1 img,
.img-animation-style2 img,
.img-animation-style3 img,
.img-animation-style4 img,
.img-animation-style5 img,
.img-animation-style6 img {
    transform-origin: 50% 50%;
    transition: 2s cubic-bezier(0.5, 0.5, 0, 1);
}
.img-animation-style1.active,
.img-animation-style2.active,
.img-animation-style3.active,
.img-animation-style4.active,
.img-animation-style5.active,
.img-animation-style6.active {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.img-animation-style1.active img,
.img-animation-style2.active img,
.img-animation-style3.active img,
.img-animation-style4.active img,
.img-animation-style5.active img,
.img-animation-style6.active img {
    transform: scale(1) translate(0px, 0px);
}
.img-animation-style1 {
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.img-animation-style1 img {
    transform: scale(1.5) translate(-100px, 0px);
}
.img-animation-style2 {
    clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
}
.img-animation-style2 img {
    transform: scale(1.5) translate(100px, 0px);
}
.img-animation-style3 {
    clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0 100%);
}
.img-animation-style3 img {
    transform: scale(1.5) translate(0, 100px);
}
.img-animation-style4 {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
.img-animation-style4 img {
    transform: scale(1.5) translate(0, -100px);
}
.img-animation-style5 {
    clip-path: inset(0 15%);
    transform: translate3d(0, 150px, 0);
}
.img-animation-style5.active {
    clip-path: inset(0 0);
    transform: translate3d(0, 0, 0);
}
.img-animation-style5 img {
    transform: scale(1.5) translate(0, -10%);
}
.img-animation-style6 {
    clip-path: circle(15% at 50% 50%);
}
.img-animation-style6.active {
    clip-path: circle(100% at 50% 50%);
}
.img-animation-style6 img {
    transform: scale(1.5) translate(0, 0);
}


@keyframes custom_fade_top {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes custom_fade_buttom {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes custom_fade_left {
    from {
        transform: translateX(-100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes custom_fade_right {
    from {
        transform: translateX(100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes custom_zoom_in {
    from {
        transform: scale(.6);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes custom_zoom {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes custom_zoom_in_bottom {
    from {
        transform: translateZ(1);
        opacity: 0;
    }
    to {
        transform: translateZ(0);
        opacity: 1;
    }
}
@keyframes custom_lightSpeedInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-20%, 0, 0) skewX(30deg);
        transform: translate3d(-20%, 0, 0) skewX(30deg);
    }
    60% {
        opacity: 1;
        -webkit-transform: skewX(-20deg);
        transform: skewX(-20deg);
    }
    80% {
        -webkit-transform: skewX(5deg);
        transform: skewX(5deg);
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@keyframes BlinkEffectPre {
    0%,
    100% {
        transform: translate(0, 0);
    }
    8% {
        transform: translate(-5%, -10%);
    }
    18% {
        transform: translate(-15%, 5%);
    }
    27% {
        transform: translate(7%, -25%);
    }
    42% {
        transform: translate(-5%, 25%);
    }
    48% {
        transform: translate(-15%, 10%);
    }
    55% {
        transform: translate(15%, 0);
    }
    68% {
        transform: translate(0, 15%);
    }
    82% {
        transform: translate(3%, 25%);
    }
    92% {
        transform: translate(-10%, 10%);
    }
}
@keyframes loader-rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
@keyframes fixedheader {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}
@keyframes shine_slide_1 {
    100% {
        left: 125%;
    }
}
@keyframes shine_slide_2 {
    100% {
        left: 150%;
    }
}
@keyframes ball_notify {
    0%,
    100% {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);
    }
    20%,
    60% {
        -webkit-transform: rotate(6deg);
        -moz-transform: rotate(6deg);
        -ms-transform: rotate(6deg);
        -o-transform: rotate(6deg);
        transform: rotate(6deg);
    }
    40%,
    80% {
        -webkit-transform: rotate(-6deg);
        -moz-transform: rotate(-6deg);
        -ms-transform: rotate(-6deg);
        -o-transform: rotate(-6deg);
        transform: rotate(-6deg);
    }
}
@keyframes program_animi {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(10%, 0);
    }
    50% {
        transform: translate(10%, 10%);
    }
    75% {
        transform: translate(0%, 10%);
    }
    100% {
        transform: translate(0, 0);
    }
}
@keyframes our_program_shap {
    0% {
        clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    }
    50% {
        clip-path: polygon(100% 0, 100% 100%, 50% 100%, 50% 0);
    }
    100% {
        clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
    }
}
@keyframes progress-rotate {
    100% {
        transform: rotate(180deg);
    }
}
@keyframes video_text {
    0% {
        transform: rotate(0)
    }
    50% {
        transform: rotate(180deg)
    }
    100% {
        transform: rotate(360deg)
    }
}
@keyframes videocircle {
    0% {
        box-shadow: 0 0 0 0 hsl(21.57deg 100% 52.55%);
    }
    100% {
        box-shadow: 0 0 0 10px rgba(67, 58, 139, 0.01);
    }
}
@keyframes about_border {
    0% {
        width: 0px;
    }
    50% {
        width: 50px;
    }
    100% {
        width: 0px;
    }
}
@-webkit-keyframes about_border {
    0% {
        width: 0px;
    }
    50% {
        width: 50px;
    }
    100% {
        width: 0px;
    }
}
@keyframes custome_flash {
    0% {
        opacity: .4;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes custome_flash {
    0% {
        opacity: .4;
    }
    100% {
        opacity: 1;
    }
}
@keyframes marquee_right {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}
@keyframes tool1 {
    0% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(-60deg);
    }
}
@keyframes tool2 {
    100% {
        transform: translate3d(30px, 30px, 30px);
    }
}
@keyframes tool3 {
    0% {
        transform: translateY(15px);
    }
    100% {
        transform: translateY(-15px);
    }
}
@keyframes tool4 {
    0% {
        transform: scale(.7) rotate(25deg);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes slideInFromTop {
    from {
        transform: translateY(-80%);
        opacity: 0;
    }
    to {
        transform: translateY(0%);
        opacity: 1;
    }
}
@keyframes pulse512 {
    0% {
        box-shadow: 0 0 0 0 #ff640d;
    }
    70% {
        box-shadow: 0 0 0 10px rgb(218 103 68 / 0%);
    }
    100% {
        box-shadow: 0 0 0 0 rgb(218 103 68 / 0%);
    }
}
@keyframes errortext {
    0% {
        clip: rect(49px, 9999px, 31px, 0);
        -webkit-transform: skew(.04deg);
        transform: skew(.04deg)
    }
    5% {
        clip: rect(63px, 9999px, 92px, 0);
        -webkit-transform: skew(.18deg);
        transform: skew(.18deg)
    }
    10% {
        clip: rect(86px, 9999px, 74px, 0);
        -webkit-transform: skew(.4deg);
        transform: skew(.4deg)
    }
    15% {
        clip: rect(85px, 9999px, 19px, 0);
        -webkit-transform: skew(.57deg);
        transform: skew(.57deg)
    }
    20% {
        clip: rect(64px, 9999px, 75px, 0);
        -webkit-transform: skew(.96deg);
        transform: skew(.96deg)
    }
    25% {
        clip: rect(77px, 9999px, 17px, 0);
        -webkit-transform: skew(.61deg);
        transform: skew(.61deg)
    }
    30% {
        clip: rect(16px, 9999px, 76px, 0);
        -webkit-transform: skew(.81deg);
        transform: skew(.81deg)
    }
    35% {
        clip: rect(5px, 9999px, 61px, 0);
        -webkit-transform: skew(.56deg);
        transform: skew(.56deg)
    }
    40% {
        clip: rect(79px, 9999px, 81px, 0);
        -webkit-transform: skew(.05deg);
        transform: skew(.05deg)
    }
    45% {
        clip: rect(20px, 9999px, 97px, 0);
        -webkit-transform: skew(.56deg);
        transform: skew(.56deg)
    }
    50% {
        clip: rect(33px, 9999px, 100px, 0);
        -webkit-transform: skew(.16deg);
        transform: skew(.16deg)
    }
    55% {
        clip: rect(19px, 9999px, 76px, 0);
        -webkit-transform: skew(.93deg);
        transform: skew(.93deg)
    }
    60% {
        clip: rect(29px, 9999px, 59px, 0);
        -webkit-transform: skew(.58deg);
        transform: skew(.58deg)
    }
    65% {
        clip: rect(19px, 9999px, 95px, 0);
        -webkit-transform: skew(.83deg);
        transform: skew(.83deg)
    }
    70% {
        clip: rect(88px, 9999px, 30px, 0);
        -webkit-transform: skew(.39deg);
        transform: skew(.39deg)
    }
    75% {
        clip: rect(43px, 9999px, 45px, 0);
        -webkit-transform: skew(.6deg);
        transform: skew(.6deg)
    }
    80% {
        clip: rect(30px, 9999px, 4px, 0);
        -webkit-transform: skew(.89deg);
        transform: skew(.89deg)
    }
    85% {
        clip: rect(4px, 9999px, 96px, 0);
        -webkit-transform: skew(1deg);
        transform: skew(1deg)
    }
    90% {
        clip: rect(4px, 9999px, 91px, 0);
        -webkit-transform: skew(.2deg);
        transform: skew(.2deg)
    }
    95% {
        clip: rect(48px, 9999px, 80px, 0);
        -webkit-transform: skew(.41deg);
        transform: skew(.41deg)
    }
    100% {
        clip: rect(10px, 9999px, 58px, 0);
        -webkit-transform: skew(.91deg);
        transform: skew(.91deg)
    }
}
@keyframes errortext2 {
    0% {
        clip: rect(125px, 9999px, 1px, 0);
    }
    10% {
        clip: rect(120px, 9999px, 322px, 0);
    }
    20% {
        clip: rect(58px, 9999px, 235px, 0);
    }
    30% {
        clip: rect(30px, 9999px, 7px, 0);
    }
    40% {
        clip: rect(126px, 9999px, 528px, 0);
    }
    50% {
        clip: rect(42px, 9999px, 96px, 0);
    }
    60% {
        clip: rect(247px, 9999px, 620px, 0);
    }
    70% {
        clip: rect(728px, 9999px, 517px, 0);
    }
    80% {
        clip: rect(15px, 9999px, 66px, 0);
    }
    90% {
        clip: rect(923px, 9999px, 204px, 0);
    }
    100% {
        clip: rect(62px, 9999px, 6px, 0);
    }
}
@keyframes errortext-skew {
    0% {
        -webkit-transform: skew(3deg);
        transform: skew(3deg);
    }
    10% {
        -webkit-transform: skew(2deg);
        transform: skew(2deg);
    }
    20% {
        -webkit-transform: skew(0deg);
        transform: skew(0deg);
    }
    30% {
        -webkit-transform: skew(0deg);
        transform: skew(0deg);
    }
    40% {
        -webkit-transform: skew(2deg);
        transform: skew(2deg);
    }
    50% {
        -webkit-transform: skew(-1deg);
        transform: skew(-1deg);
    }
    60% {
        -webkit-transform: skew(-3deg);
        transform: skew(-3deg);
    }
    70% {
        -webkit-transform: skew(-1deg);
        transform: skew(-1deg);
    }
    80% {
        -webkit-transform: skew(-1deg);
        transform: skew(-1deg);
    }
    90% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg);
    }
    100% {
        -webkit-transform: skew(-3deg);
        transform: skew(-3deg);
    }
}
@keyframes error-left-to-right {
    0% {
        transform: translateX(-20px);
    }
    50% {
        transform: translate(0);
    }
    100% {
        transform: translateX(20px);
    }
}
@keyframes Up_Down_Blog_icon {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    49% {
        transform: translateY(50px);
        opacity: 0;
    }
    50% {
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes card_animi {
    0% {
        transform: translateX(10px);
    }
    100% {
        transform: translateX(0px);
    }
}
@keyframes stroke {
    100% {
        stroke-dashoffset: -400;
    }
}

/* Animation CSS */
.reveal.slidingfromleft,
.reveal.effectone {
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
    display: inline-block;
    position: relative;
    overflow: hidden;
    -webkit-transition: 2s cubic-bezier(0.5, 0.5, 0, 1);
    -o-transition: 2s cubic-bezier(0.5, 0.5, 0, 1);
    transition: 2s cubic-bezier(0.5, 0.5, 0, 1);
    opacity: 1;
}
.reveal.effectone {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}
.active.slidingfromleft,
.active.effectone {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.slidingfromleft img,
.effectone img {
    -webkit-transform: scale(1.5) translate(-100px, 0px);
    -ms-transform: scale(1.5) translate(-100px, 0px);
    transform: scale(1.5) translate(-100px, 0px);
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transition: 2s cubic-bezier(0.5, 0.5, 0, 1);
    -o-transition: 2s cubic-bezier(0.5, 0.5, 0, 1);
    transition: 2s cubic-bezier(0.5, 0.5, 0, 1);
}
.effectone img {
    -webkit-transition: 2s ease-out;
    -o-transition: 2s ease-out;
    transition: 2s ease-out;
}
.active.slidingfromleft img,
.active.effectone img {
    transform: scale(1) translate(0px, 0px);
    -webkit-transform: scale(1) translate(0px, 0px);
    -ms-transform: scale(1) translate(0px, 0px);
}