/* =========================================================
   PROCESS HOME
========================================================= */

.process-home {

    padding: 60px 40px;

    background: var(--color-white);

}

/* =========================================================
   HEADER
========================================================= */

.process-home__header {

    text-align: center;

    margin-bottom: 40px;

}

/* =========================================================
   TITLE
========================================================= */

.process-home__title {

    font-size: 30px;

    font-weight: 800;

    line-height: 1.3;

    color: var(--color-primary);

}

.process-home__title span {

    color: var(--color-secondary);

}

/* =========================================================
   GRID
========================================================= */

.process-home__grid {

    display: flex;

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

    gap: 18px;

    padding: 35px 30px;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);

    background: var(--color-white);

    box-shadow: var(--shadow-sm);

}

/* =========================================================
   ITEM
========================================================= */

.process-home__item {

    flex: 1;

    text-align: center;

}

/* =========================================================
   ICON
========================================================= */

.process-home__icon {

    width: 52px;
    height: 52px;

    margin: 0 auto 18px;

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

}

.process-home__icon svg {

    width: 36px;
    height: 36px;

    stroke: var(--color-primary);

    stroke-width: 1.8;

}

/* =========================================================
   H3
========================================================= */

.process-home__item h3 {

    font-size: 17px;

    font-weight: 700;

    line-height: 1.4;

    color: var(--color-primary);

    margin-bottom: 12px;

}

/* =========================================================
   TEXT
========================================================= */

.process-home__item p {

    font-size: 13px;

    line-height: 1.7;

    color: var(--color-text-muted);

}

/* =========================================================
   ARROW
========================================================= */

.process-home__arrow {

    display: flex;

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

    margin-top: 12px;

}

.process-home__arrow svg {

    width: 22px;
    height: 22px;

    stroke: #cbd5e1;

    stroke-width: 2;

}

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

@media (max-width: 1200px) {

    .process-home__grid {

        flex-wrap: wrap;

        gap: 35px;

    }

    .process-home__arrow {

        display: none;

    }

    .process-home__item {

        width: calc(50% - 18px);

        flex: initial;

    }

}

@media (max-width: 768px) {

    .process-home {

        padding: 50px 20px;

    }

    .process-home__title {

        font-size: 26px;

    }

    .process-home__grid {

        padding: 28px 22px;

    }

    .process-home__item {

        width: 100%;

    }

    .process-home__item h3 {

        font-size: 16px;

    }

    .process-home__item p {

        font-size: 13px;

    }

}