#steps{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 96px 111px;
}

#steps-container{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 72px;
    justify-content: center;
}

#steps-container > .card{
    width: 390px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
#steps-container > .card::before{
    /* width: 390px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px; */
    padding: 2px;
    background: var(--border-bg);
}

#steps-container > .card > img{
    width: 342px;
    height: 242px;
    border-radius: 20px;
}

#steps-container > .card > .card-text{
    width: 100%;
    text-align: center;
}

.card-text > span{
    width: 100%;
    font-family: Rubik;
    font-size: 48px;
    font-weight: 400;
    line-height: 57.6px;
    letter-spacing: var(--DisplayLargeTracking);
    text-align: center;
    background: linear-gradient(270deg, #2E9EFA 0%, #782EFA 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* Makes the text transparent to show the gradient */
    
}

.card-text > p{
    margin-top: 16px;
    font-family: Urbanist;
    font-size: 24px;
    font-weight: 500;
    line-height: 28.8px;
    text-align: center;
    color: #A4A5B6;
}