.mara-service-navigation {
    align-items:stretch;
    background:linear-gradient(110deg,
        color-mix(in srgb,var(--mara-teal) 7%,var(--mara-paper)),
        color-mix(in srgb,var(--mara-paper) 96%,var(--mara-peach)),
        color-mix(in srgb,var(--mara-peach) 12%,var(--mara-paper))
    );
    border:1px solid color-mix(in srgb,var(--mara-ink) 9%,transparent);
    border-radius:var(--mara-radius);
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    margin-top:1.65rem;
    overflow:hidden;
    width:100%;
}

.mara-service-navigation__item {
    align-items:center;
    color:var(--mara-ink);
    display:flex;
    justify-content:center;
    min-height:4.55rem;
    padding:.85rem 1rem;
    position:relative;
    text-align:center;
    text-decoration:none;
    transition:color .22s ease,background-color .22s ease;
}

.mara-service-navigation__item + .mara-service-navigation__item::before {
    background:color-mix(in srgb,var(--mara-ink) 18%,transparent);
    content:"";
    height:58%;
    left:0;
    position:absolute;
    top:21%;
    width:1px;
}

.mara-service-navigation__label {
    font-size:.92rem;
    font-weight:700;
    line-height:1.25;
    position:relative;
}

.mara-service-navigation__label::after {
    background:var(--mara-teal);
    bottom:-.42rem;
    content:"";
    height:2px;
    left:0;
    position:absolute;
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .22s ease;
    width:100%;
}

.mara-service-navigation__item:hover,
.mara-service-navigation__item:focus-visible {
    background:color-mix(in srgb,var(--mara-teal) 5%,transparent);
    color:var(--mara-teal-deep);
}

.mara-service-navigation__item:hover .mara-service-navigation__label::after,
.mara-service-navigation__item:focus-visible .mara-service-navigation__label::after {
    transform:scaleX(1);
}

.mara-service-navigation__item:focus-visible {
    outline:2px solid var(--mara-teal);
    outline-offset:-3px;
}

.mara-service-page #lichni-dumi,
.mara-service-page #stilove-i-paketi,
.mara-service-page #podbrani-kadri {
    scroll-margin-top:7rem;
}

@media (max-width:700px) {
    .mara-service-navigation {
        margin-top:1.35rem;
    }

    .mara-service-navigation__item {
        min-height:4.35rem;
        padding:.75rem .45rem;
    }

    .mara-service-navigation__label {
        font-size:clamp(.72rem,2.6vw,.88rem);
    }
}

@media (max-width:380px) {
    .mara-service-navigation__item {
        min-height:4.55rem;
        padding-inline:.25rem;
    }

    .mara-service-navigation__label {
        font-size:.7rem;
        line-height:1.2;
    }
}