﻿section {
    padding: 10rem 1rem 0.5rem 1rem;
}

.process-section {
    padding: 5rem 2rem;
    background: var(--navy)
}

    .process-section .section-label {
        color: var(--gold-light)
    }

    .process-section .section-title {
        color: #fff
    }

.process-grid {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 0;
    margin-top: 2.5rem;
    position: relative
}

    .process-grid::before {
        content: '';
        position: absolute;
        top: 36px;
        left: 8%;
        right: 8%;
        height: 2px;
        background: rgba(201,168,76,.25);
        z-index: 0
    }

.process-step {
    text-align: center;
    position: relative;
    z-index: 1
}

.ps-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--navy-soft);
    border: 2px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.3rem;
    box-shadow: 0 0 0 4px rgba(201,168,76,.15);
    position: relative
}

.ps-num {
    position: absolute;
    top: -6px;
    right: calc(50% - 44px);
    background: var(--gold);
    color: var(--navy);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: .65rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center
}

.process-step h4 {
    font-family: 'Playfair Display',serif;
    font-size: .88rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: .35rem
}

.process-step p {
    font-size: .76rem;
    color: rgba(255,255,255,.6);
    line-height: 1.5;
    padding: 0 .3rem
}
