/* text writer css */
.textwriter {
    animation: text1;
}
.textwriter1 {
    animation: text2;
}
.textwriter {
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    position: relative;
    animation-duration: 5s;
    top: 15px;
    animation-timing-function: steps(25, end);
    animation-iteration-count: infinite;
}
.textwriter1 {
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    position: relative;
    animation-duration: 5s;
    top: 26px;
    animation-timing-function: steps(25, end);
    animation-iteration-count: infinite;
}
.count-animation{
    animation: text3;
}
.count-animation
{
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    position: relative;
    animation-duration: 5s;
    /* top: 26px; */
    animation-timing-function: steps(25, end);
    animation-iteration-count: infinite;
}

@keyframes text1 {

    0%,
    50%,
    100% {
        width: 0;
    }

    60%,
    90% {
        width: 3.9em;
    }
}
@keyframes text2 {

    0%,
    50%,
    100% {
        width: 0;
    }

    60%,
    90% {
        width: 7em;
    }
}
@keyframes text3 {

    0%,
    50%,
    100% {
        width: 0;
    }

    60%,
    90% {
        width: 4em;
    }
}

/* ===============End text writer======== */

@-webkit-keyframes right_to_left {
    from {
        opacity: 0;
        -webkit-transform: translate(-300px);
        transform: translate(-300px);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes right_to_left {
    from {
        opacity: 0;
        -webkit-transform: translate(-300px);
        transform: translate(-300px);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }

}
.left-to-right  {
    -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-name: right_to_left;
        animation-name: right_to_left;
        -webkit-animation-delay: 0.5s;
        -moz-animation-delay: 0.5s;
        animation-delay: 0.5s;
}
@keyframes banner{
    0%{
        -webkit-transform: translateY(0);
        transform: translateY(0);
        transition: transform 500ms ease-in-out 25ms;
    }
    50%{
        -webkit-transform: translateY(0);
        transform: translateY(20px);
        transition: transform 500ms ease-in-out 25ms;
    }
    100%{
        -webkit-transform: translateY(0);
         transform: translateY(0);
        transition: transform 500ms ease-in-out 25ms;
    }
}
.hero-right-block img {
    animation: banner 3s infinite;
}
@keyframes starani{
    from {
            opacity: 1;
        }
    
        to {
            opacity: .5;
            fill: #68e9de;
        }
}
/* .view-more a:before {
    animation: underline 2s ease-in-out  infinite;

} */
@keyframes underline{
    0%{
        transform: scaleX(0);
        transform-origin: right;
    }
    50%{
        transform: scaleX(1);
            transform-origin: left;
    }
        99% {
            transform: scaleX(0);
            transform-origin: right;
        }
}
/* textwriter */

.star-d-animation{
    /* animation-duration: 2s; */
        /* animation-name: starb; */
        /* animation-iteration-count: infinite; */
        animation: starb 2s ease infinite;
       
}
@keyframes starb {
    from {
        opacity: 1;
    }

    to {
        opacity: .5;
        
    }
}
.logo-animation{
 animation: logo 4s ease infinite;
}
@keyframes logo{
    form{
        opacity:0 ;

    }
    to{
        opacity: 1;fill: #ffff;
       
    }
}
.line-animation svg g path{
        stroke-dasharray: 1100px;
            stroke-dashoffset: 1100px;  
    /* -webkit-animation: dash 10s linear forwards;
     animation: dash 10s linear forwards; */
    animation: 3s linear 1s infinite alternate dash;
     stroke: rgb(147, 60, 233);
}
@keyframes dash {
    from {
        stroke-dashoffset: 1100px;
        stroke: #0068FF;
    }

    to {
        stroke-dashoffset: 0;
    }
}
    .view-more a i{
        animation: arrow 2s infinite;transform: rotate(45deg);
    }
@keyframes arrow {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0) rotate(45deg);
    }

    50% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px)rotate(45deg);
        
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)rotate(45deg) ;
    }
}
.tech-logo svg g path{
    stroke-dasharray: 1100px;
        stroke-dashoffset: 1100px;
        /* -webkit-animation: dash 10s linear forwards;
         animation: dash 10s linear forwards; */
        animation: 3s linear 1s infinite alternate tech;
        /* fill: rgb(147, 60, 233); */
}
@keyframes tech {
    from {
            stroke-dashoffset: 1100px;
            fill: #fff;
        }
    
        to {
            stroke-dashoffset: 0;
        }
}
.our-solution-body{
    animation: banner 5s infinite;transition: 0.3s ease-in-out;transition: transform 500ms ease-in-out 25ms;
}
.our-solution-body:hover{
    animation: none;
}
.dice{
    animation-delay: 0.3s;
}