.fw-process1-section {
    position: relative;
    overflow: hidden;
}

.fw-process1-content {
    position: relative;
    z-index: 2;
}

.fw-dec-image1 {
    z-index: 0;
    pointer-events: none;
}

.fw-dec-image2 {
    z-index: 0;
    pointer-events: none;
}

/* Cím méret visszaállítás desktopon */
@media (min-width: 992px) {
    .fw-text-lg-40-px {
        font-size: 40px !important;
    }
}

.process-step-polygon {
    --w:125px;
    clip-path: polygon(25% 0%,
    75% 0%,
    100% 50%,
    75% 100%,
    25% 100%,
    0% 50%);
    overflow: hidden;
    display: flex;
    justify-content: center;
    height: calc(var(--w)* 0.866) ;
    text-align: center;
    width: var(--w);
    align-items: center;
    position: relative;
    background-color: var(--primary);
    transition: all 0.2s ease-in-out;
    color: var(--primary);
}

.process-step-polygon-inner {
    --w:120px;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    align-items: center;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    height: calc(var(--w)* 0.866) ;
    color: var(--primary);
    width: var(--w);
}

.process-step-polygon-inner :hover {
    height: 100%;
    align-items: center;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: var(--primary) !important;
    color: #fff !important;
}

/*
 * Connector vonalak: egyetlen összefüggő vonal hexagonok közt.
 * left:  calc(50% + 70.5px)  → 8px-rel a hex jobb éle után kezd  (62.5px félszél + 8px rés)
 * right: calc(-50% + 70.5px) → szimmetrikusan 8px-rel a következő hex bal éle előtt ér véget
 * width: auto                → a two constraint határozza meg a szélességet
 */
.process .process-step::before {
    --w:125px;
    content: '';
    height: 2px;
    background-color: #B7B7B7;
    position: absolute;
    top: calc((var(--w) * 0.866)/ 2);
    display: none;
}

.process1-step-title{
    min-height: 55px;
}

/* Mobile (<768px, 2 per sor): csak az odd elemeken (1,3,5…), ha nem utolsók */
@media (max-width: 768px) {
    .process1-step-title{
        min-height: 70px;
    }
    .process .process-step:nth-child(2n+1):not(:last-child)::before {
        display: block;
        left: calc(50% + 70.5px);
        right: calc(-50% + 70.5px);
        width: auto;
    }
}

/* Tablet (768–991px, 3 per sor): nem sor-végi és nem utolsó elemeken (1,2,4,5) */
@media (min-width: 769px) and (max-width: 1024px) {
    .process .process-step:not(:nth-child(3n)):not(:last-child)::before {
        display: block;
        left: calc(50% + 70.5px);
        right: calc(-50% + 70.5px);
        width: auto;
    }
}

/* Desktop (≥992px, 6 per sor): minden elemen kivéve az utolsón */
@media (min-width: 1025px) {
    .process .process-step:not(:last-child)::before {
        display: block;
        left: calc(50% + 70.5px);
        right: calc(-50% + 70.5px);
        width: auto;
    }
}

@media (min-width: 1000px) and (max-width: 1760px) {
    .process-step-circle-content {
        font-size: 28px !important;
    }

    .process1-step-description p {
        font-size: 15.4px !important;
    }

    .process1-step-title {
        font-size: 16.8px !important;
    }

    .process-step-polygon{
        --w:85px;
        width: var(--w);
        height: calc((var(--w) * 0.866));
    }

    .process-step-polygon-inner {
        --w:80px;
        width: var(--w);
        height: calc((var(--w) * 0.866));
    }

    .process .process-step::before {
        --w:85px;
        content: '';
        height: 2px;
        background-color: #B7B7B7;
        position: absolute;
        top: calc((var(--w) * 0.866)/ 2);
        display: none;
    }
}