.process{

    position:relative;
    padding:140px 0;
    background:#0b0b0b;
    overflow:hidden;

}

.process-container{

    display:grid;
    grid-template-columns:420px 1fr;
    gap:80px;
    align-items:start;

}

.process-left{

    position:sticky;
    top:120px;

}

.process-left h2{

    font-size:60px;
    color:#fff;
    margin:20px 0;

}

.process-left p{

    color:#aaa;
    line-height:1.8;

}
.process-left  img{

    width:100%;
    height:1300px;
    margin-top:40px;

}

.process-right{

    display:flex;
    flex-direction:column;
    gap:25px;

}

.step-card{

    background:#121212;
    border:1px solid rgba(255,255,255,.08);
    border-radius:25px;
    padding:35px;
    transition:.45s;

    transform:translateX(100px);
    opacity:0;

}

.step-card.show{

    transform:translateX(0);
    opacity:1;

}

.step-card:hover{

    transform:translateX(20px) scale(1.03);

    background:linear-gradient(
        135deg,
        #990011,
        #2563EB
    );

}

.step-card span{

    display:inline-flex;

    width:55px;
    height:55px;

    border-radius:50%;

    justify-content:center;
    align-items:center;

    background:#fff;
    color:#111;

    font-weight:700;

    margin-bottom:20px;

}

.step-card h3{

    color:#fff;
    margin-bottom:12px;
    font-size:28px;

}

.step-card p{

    color:#ddd;
    line-height:1.8;

}

.step-card{

    position:relative;
    overflow:hidden;

}

.step-card::before{

    content:"";

    position:absolute;

    width:250px;
    height:250px;

    left:var(--x);
    top:var(--y);

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

    background:radial-gradient(circle,
    rgba(37,99,235,.35),
    transparent 70%);

    opacity:0;

    transition:.3s;

    pointer-events:none;

}

.step-card:hover::before{

    opacity:1;

}

/*=========================================
        PROCESS RESPONSIVE
=========================================*/

@media (max-width:1200px){

.process-container{

    grid-template-columns:1fr;
    gap:60px;

}

.process-left{

    position:static;
    text-align:center;

}

.process-left h2{

    font-size:52px;

}

}

@media (max-width:992px){

.process{

    padding:100px 0;

}

.process-left h2{

    font-size:44px;

}

.step-card{

    padding:30px;

}

.step-card h3{

    font-size:24px;

}

}

@media (max-width:768px){

.process{

    padding:80px 0;

}

.process-container{

    gap:40px;

}

.process-left h2{

    font-size:36px;
    line-height:1.2;

}

.process-left p{

    font-size:16px;

}

.step-card{

    padding:25px;
    border-radius:20px;

}

.step-card span{

    width:50px;
    height:50px;
    font-size:16px;

}

.step-card h3{

    font-size:22px;

}

.step-card p{

    font-size:15px;
    line-height:1.7;

}

}

@media (max-width:576px){

.process{

    padding:70px 0;

}

.process-left h2{

    font-size:30px;

}

.process-left p{

    font-size:15px;

}

.step-card{

    padding:22px;

}

.step-card span{

    width:45px;
    height:45px;
    margin-bottom:15px;

}

.step-card h3{

    font-size:20px;

}

.step-card p{

    font-size:14px;

}

}