/*=================================
        LEGAL PROCESS
=================================*/

.legal-process {

    background: #fff;

}

.process-grid {

    margin-top: 80px;

    display: grid;

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

    gap: 30px;

    position: relative;

}

.process-grid::before {

    content: "";

    position: absolute;

    top: 42px;

    left: 10%;

    width: 80%;

    height: 2px;

    background: rgba(176, 141, 87, .25);

}

.process-card {

    position: relative;

    z-index: 2;

    text-align: center;

}

.step-number {

    width: 85px;

    height: 85px;

    margin: auto;

    border-radius: 50%;

    background: #fff;

    border: 2px solid var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.4rem;

    font-weight: 700;

    color: var(--primary);

    font-family: "Cormorant Garamond", serif;

    transition: .35s;

}

.process-card:hover .step-number {

    background: var(--primary);

    color: #fff;

    transform: scale(1.08);

}

.process-card h3 {

    margin: 28px 0 15px;

    font-family: "Cormorant Garamond", serif;

    font-size: 1.55rem;

}

.process-card p {

    color: var(--text-light);

    line-height: 1.8;

}

/* =============================
      PROCESS MOBILE
============================= */

@media (max-width:700px) {

    .legal-process {

        padding: 70px 0;

    }

    .legal-process .section-title {

        font-size: 2rem;
        line-height: 1.15;

    }

    .legal-process .section-description {

        font-size: .92rem;
        line-height: 1.7;
        margin-top: 15px;

    }

    .process-grid {

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

    }

    .process-card {

        padding: 24px 22px;

        border-radius: 20px;

        text-align: center;

    }

    .step-number {

        width: 60px;
        height: 60px;

        margin: 0 auto 18px;

        font-size: 1.2rem;

        border-radius: 50%;

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

    }

    .process-card h3 {

        font-size: 1.45rem;

        margin-bottom: 12px;

    }

    .process-card p {

        font-size: .9rem;

        line-height: 1.7;

    }

}