.cb-process {

    background: var(--cb-gray-50);

    padding: var(--cb-space-8) 0;

}

.cb-process__header {

    text-align: center;

    max-width: 640px;

    margin: 0 auto var(--cb-space-8);

}

.cb-process__eyebrow {

    color: #20B2AA;

    font-size: var(--cb-small);

    font-weight: 600;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    margin: 0 0 var(--cb-space-1);

}

.cb-process__heading {

    font-size: var(--cb-h2);

    color: #20B2AA;

    margin: 0 0 var(--cb-space-2);

}

.cb-process__intro {

    color: var(--cb-gray-600);

    font-size: var(--cb-body);

}

.cb-process__steps {

    position: relative;

    display: grid;

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

    gap: var(--cb-space-3);

}

.cb-process__steps::before {

    content: '';

    position: absolute;

    top: 46px;

    left: 10%;

    right: 10%;

    height: 1px;

    background: #20B2AA;

    z-index: 1;

}

.cb-process__step {

    position: relative;

    z-index: 2;

    text-align: center;

}

.cb-process__icon-circle {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid #20B2AA;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #20B2AA;
    margin: 0 auto;
    position: relative;
}

/* Small inner circle */

.cb-process__icon-circle::before {

    content: '';

    position: absolute;

    width: 64px;

    height: 64px;

    border-radius: 50%;

    border: 1px solid #20B2AA;

}

/* Icon */

.cb-process__icon-circle svg {

    width: 30px;

    height: 30px;

    color: #20B2AA;

    stroke: #20B2AA;

    position: relative;

    z-index: 2;

}

.cb-process__step-title {

    font-size: var(--cb-h4);

    color: var(--cb-teal-bright);

    margin: var(--cb-space-2);

}

.cb-process__step-description {

    color: var(--cb-gray-600);

    font-size: var(--cb-small);

    line-height: 1.6;

    margin: 0;

}

@media (max-width: 900px) {

    .cb-process__steps {

        grid-template-columns: 1fr;

        gap: var(--cb-space-6);

    }

    .cb-process__steps::before {

        top: 0;

        bottom: 0;

        left: 32px;

        right: auto;

        width: 2px;

        height: auto;

        background: #20B2AA;

    }

    .cb-process__step {

        display: flex;

        align-items: flex-start;

        gap: var(--cb-space-3);

        text-align: left;

    }

    .cb-process__icon-circle {

        margin: 0;

        flex-shrink: 0;

    }

}