/*==================================================
    Floating Animation
==================================================*/

@keyframes floatY{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

.analytics-card{

    animation:floatY 5s ease-in-out infinite;

}

.lead-card{

    animation:floatY 6s ease-in-out infinite;

}

.review-card{

    animation:floatY 4.5s ease-in-out infinite;

}
/*==================================================
Hero Animations
==================================================*/

@keyframes floatOrb{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-30px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes scrollWheel{

    0%{

        opacity:1;

        transform:translate(-50%,0);

    }

    100%{

        opacity:0;

        transform:translate(-50%,18px);

    }

}
.dashboard-window{

    animation:dashboardFloat 7s ease-in-out infinite;

}

@keyframes dashboardFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}
/*==================================================
    TECHNOLOGY MARQUEE
==================================================*/

@keyframes technologyMarquee{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

/*==================================================
    Floating Logos
==================================================*/

@keyframes floatingLogo{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

/*==================================================
    Background Orbs
==================================================*/

@keyframes floatingOrb{

    0%{

        transform:translate3d(0,0,0);

    }

    50%{

        transform:translate3d(0,-35px,0);

    }

    100%{

        transform:translate3d(0,0,0);

    }

}

.tech-orb{

    animation:floatingOrb 12s ease-in-out infinite;

}

.tech-orb-2{

    animation-delay:3s;

}
@keyframes floatCard{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}
/*==================================================
SERVICES
==================================================*/

.service-row{

    overflow:hidden;

}

.service-content h3,
.service-content p,
.service-arrow,
.service-number{

    transition:all .4s ease;

}

.service-row:hover .service-content{

    transform:translateX(15px);

}

.service-row:hover .service-content p{

    color:#333;

}

.service-row:hover .service-arrow{

    transform:rotate(-45deg) scale(1.08);

}

.service-row:hover .service-number{

    transform:translateX(8px);

}
/*==================================================
PROCESS
==================================================*/

.process-item{

    transition:.4s;

}

.process-content{

    transition:

    transform .4s,

    box-shadow .4s;

}

.process-number{

    transition:

    background .4s,

    color .4s,

    transform .4s;

}

.process-item.active .process-number{

    background:var(--color-accent);

    color:#fff;

    border-color:var(--color-accent);

}

.process-item.active .process-content{

    box-shadow:

    0 35px 80px rgba(255,122,0,.12);

}
/*==================================================
PROCESS
==================================================*/

/* The base layout (utilities.css) is a 3-across CSS grid. Step down to
   2-across on tablets and 1-across (a simple vertical stack) on phones,
   hiding the connector line wherever it would point at nothing. */
@media(max-width:992px){

.process-heading{

margin-bottom:60px;

}

.process-heading h2{

font-size:42px;

}

.process-timeline{

grid-template-columns:repeat(2,1fr);

gap:60px 24px;

}

.process-item:nth-child(3n)::after{

display:block;

}

.process-item:nth-child(2n)::after{

display:none;

}

}

@media(max-width:576px){

.process-heading h2{

font-size:32px;

}

.process-heading p{

font-size:15px;

}

.process-timeline{

grid-template-columns:1fr;

gap:44px;

}

.process-item::after{

display:none;

}

.process-content{

padding:18px;

}

.process-content h3{

font-size:18px;

}

.process-number{

width:60px;

height:60px;

font-size:18px;

}

}