.benefits-section {
    text-align: center;
    margin: 120px 0 0;
}

.benefits-section h2 {
    margin-bottom: 32px;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 auto;
}

.benefit-item {
    padding: 32px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.benefit-item .benefit-icon-image img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin-bottom: 10px;
}

.benefit-item p {
    color: #000;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    margin: 0;
}

/* ── Dotted vertical line — right side, NOT on last column ──────────────────── */
.benefit-item::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background-image: linear-gradient(to bottom, #ccc 8px, transparent 8px);
    background-size: 1px 15px;
    background-repeat: repeat-y;
}

/* Remove vertical line from last column (every 3rd item) */
.benefit-item:nth-child(3n)::before {
    content: none;
}

/* ── Dotted horizontal line — bottom, NOT on last row ───────────────────────── */
.benefit-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-image: linear-gradient(to right, #ccc 8px, transparent 8px);
    background-size: 15px 1px;
    background-repeat: repeat-x;
}


.benefit-item:nth-last-child(1)::after { content: none; }

/* 2nd from last loses bottom only if it's in same row (not 3n = last col of prev row) */
.benefit-item:nth-last-child(2)::after { content: none; }

/* 3rd from last loses bottom only if it starts a row (3n+1 = col1 of last row) */
.benefit-item:nth-last-child(3):nth-child(3n+1)::after { content: none; }

/* But restore bottom for 2nd-last if it IS the last item of a full previous row */
.benefit-item:nth-last-child(2):nth-child(3n)::after {
    content: '';
    background-image: linear-gradient(to right, #ccc 8px, transparent 8px);
    background-size: 15px 1px;
    background-repeat: repeat-x;
}
@media (max-width: 1199.98px) {
      .benefits-section {
        margin: 80px 0 0;
    } 

}
/* =============================================================================
   TABLET + MOBILE — 2 columns  (≤ 991px)
   ============================================================================= */
@media (max-width: 767.98px) {
    .benefits-section {
        margin: 60px 0 0;
    }

    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        margin: 32px 0 0 0;
    }

    .benefit-item p {
        font-size: 14px;
    }

    /* Reset desktop last-column vertical-line rule */
    .benefit-item:nth-child(3n)::before {
        content: '';
    }

    /* Vertical line — only odd items (col 1) */
    .benefit-item:nth-child(odd)::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 1px;
        background-image: linear-gradient(to bottom, #ccc 8px, transparent 8px);
        background-size: 1px 15px;
        background-repeat: repeat-y;
    }

    /* No vertical line on even items (right column) */
    .benefit-item:nth-child(even)::before {
        content: none;
    }

    /* Horizontal line on ALL items.
       Use !important to override desktop high-specificity last-row removals
       (e.g. :nth-last-child(3):nth-child(3n+1) at specificity 0,3,1)
       which would otherwise bleed into mobile and hide borders on middle rows. */
    .benefit-item::after {
        content: '' !important;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background-image: linear-gradient(to right, #ccc 8px, transparent 8px);
        background-size: 15px 1px;
        background-repeat: repeat-x;
    }

    /* Remove horizontal line from the last row only.
       Even total → last 2 items lose the line.
       Odd total  → only the single last item loses the line. */
    .benefit-item:nth-last-child(1)::after,
    .benefit-item:nth-last-child(2):nth-child(odd)::after {
        content: none !important;
    }
}