/*
      OUR PROCESS — Diagonal Beam Background
 */

.process-beam-section{

    background:#081527;

}

.beam-stripes{

    position:absolute;

    inset:0;

    background:repeating-linear-gradient(

    115deg,

    transparent 0px,

    transparent 60px,

    rgba(255,255,255,.025) 60px,

    rgba(255,255,255,.025) 62px

    );

    pointer-events:none;

}

.beam-glow{

    position:absolute;

    top:50%;

    left:50%;

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

    width:900px;

    height:340px;

    background:linear-gradient(

    90deg,

    rgba(46,164,255,.14),

    rgba(241,101,41,.14));

    filter:blur(120px);

    border-radius:50%;

    pointer-events:none;

}

/*
      Steps Track
 */

.process-beam-track{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    flex-wrap:nowrap;

}

.process-beam-step{

    flex:1;

    text-align:center;

    padding:32px 20px;

    border-radius:22px;

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

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

    backdrop-filter:blur(14px);

    transition:.4s ease;

}

.process-beam-step:hover{

    transform:translateY(-6px);

    border-color:rgba(var(--step-color-rgb),.45);

    box-shadow:0 18px 40px rgba(0,0,0,.3), 0 0 26px rgba(var(--step-color-rgb),.18);

}

.beam-circle{

    width:64px;

    height:64px;

    margin:0 auto;

    border-radius:50%;

    border:2px solid var(--step-color);

    display:flex;

    justify-content:center;

    align-items:center;

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

    box-shadow:0 0 20px rgba(var(--step-color-rgb),.3);

    transition:.4s ease;

}

.process-beam-step:hover .beam-circle{

    transform:scale(1.08);

    box-shadow:0 0 28px rgba(var(--step-color-rgb),.5);

}

.beam-circle span{

    color:var(--step-color);

    font-weight:800;

    font-size:18px;

}

.process-beam-step h4{

    margin-top:18px;

    font-size:18px;

    font-weight:700;

    color:#fff;

}

.process-beam-step p{

    margin-top:8px;

    color:#94A3B8;

    font-size:13.5px;

    line-height:1.7;

}

.beam-arrow{

    color:rgba(255,255,255,.2);

    font-size:20px;

    flex-shrink:0;

}

/*
      Tablet
*/

@media(max-width:1024px){

.process-beam-track{

    flex-direction:column;

    gap:14px;

}

.process-beam-step{

    width:100%;

}

.beam-glow{

    width:600px;

    height:600px;

}

}

/* 
      Mobile
 */

@media(max-width:640px){

.process-beam-step{

    padding:26px 18px;

}

.beam-circle{

    width:54px;

    height:54px;

}

.process-beam-step h4{

    font-size:16px;

}

.process-beam-step p{

    font-size:13px;

}

}