/* ==============================================
Solution
============================================== */

.solution{

    background:#020617;

}

.pipeline{

    max-width:850px;

    margin:70px auto;

}

.pipeline-step{

    display:flex;

    align-items:center;

    gap:30px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

    padding:35px;

    border-radius:22px;

    transition:.35s;

}

.pipeline-step:hover{

transform:translateX(10px);

border-color:#2563EB;

box-shadow:

0 25px 60px rgba(0,0,0,.35);

}

.step-number{

width:80px;

height:80px;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

font-weight:800;

border-radius:18px;

background:#2563EB;

flex-shrink:0;

}

.blue-bg{

background:#0EA5E9;

}

.green-bg{

background:#10B981;

}

.purple-bg{

background:#7C3AED;

}

.pipeline-arrow{

text-align:center;

font-size:50px;

padding:25px;

color:#38BDF8;

animation:bounce 2s infinite;

}

.step-content h3{

margin-bottom:12px;

}

.step-content p{

color:#CBD5E1;

line-height:1.8;

}

@keyframes bounce{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(12px);

}

}

@media(max-width:768px){

.pipeline-step{

flex-direction:column;

text-align:center;

}

}