/* Custom fixes for process section alignment */

/* Fix the process grid layout */
.grid-process-fourths {
    grid-template-areas: 
        "num1 num2 num3 num4"
        "circles circles circles circles"
        "content1 content2 content3 content4";
    grid-template-rows: auto 16px auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 32px;
}

/* Position each number in its designated area */
.text-process-four-number:nth-child(1) {
    grid-area: num1;
}

.text-process-four-number:nth-child(2) {
    grid-area: num2;
}

.text-process-four-number:nth-child(3) {
    grid-area: num3;
}

.text-process-four-number:nth-child(4) {
    grid-area: num4;
}

/* Position the circles wrapper to span all columns */
.wrap-circles-process {
    grid-area: circles;
    display: flex !important;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    position: relative;
}

/* Position each content section in its designated area */
.bottom-process-fourths:nth-child(6) {
    grid-area: content1;
}

.bottom-process-fourths:nth-child(7) {
    grid-area: content2;
}

.bottom-process-fourths:nth-child(8) {
    grid-area: content3;
}

.bottom-process-fourths:nth-child(9) {
    grid-area: content4;
}

/* Ensure circles are visible and properly spaced */
.circle-process-fourths {
    background-color: var(--color--accent);
    border-radius: 50%;
    flex: none;
    width: 16px;
    height: 16px;
    position: relative;
}

.line-circles-process-fourths {
    background-color: #f3f9ff66;
    width: 74%;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 13%;
    transform: translateY(-50%);
    z-index: -1;
}