.breakdance .nav-menu-items .nav-menu-link[data-state=active]:before {
    content: "";
    position: absolute;
    top: 0;
    right: -8px;
    bottom: 0;
    left: -8px;
    border: 1px solid currentColor;
    border-radius: 4px;
}

@media (hover: hover) {
    .breakdance .nav-menu-items .nav-menu-link:hover:before {
        content: "";
        position: absolute;
        top: 0;
        right: -8px;
        bottom: 0;
        left: -8px;
        border: 1px solid currentColor;
        border-radius: 4px;
    }
}

@media (hover: hover) {
    .breakdance .nav-menu-items .nav-menu-link:hover {
        transform: translate(8px);
        transition-delay: 0s 0.3s;
    }
}

.breakdance .nav-menu-items {
    display: grid;
    justify-items: start;
}

.breakdance .nav-menu-items.direction-vertical
 {
    grid-auto-flow: row;
    gap: 4px;
}

.breakdance .nav-menu-link[data-state=active] {
    transform: translate(8px);
}

.breakdance .mobilenav .navlist .navitem.navItemActive:before {
    content: "";
    position: absolute;
    top: 0;
    right: -8px;
    bottom: 0;
    left: -8px;
    border: 1px solid currentColor;
    border-radius: 4px;
}

.breakdance .mobilenav .navlist .navitem.navItemActive {
    opacity: 1;
}
@media (min-width: 1024px) {
    .breakdance .mobilenav {
        display: none;
    }
}
.breakdance .sidebar-nav{
    display: none;
}
@media (min-width: 1024px) {
    
  .breakdance .sidebar-nav{
        display: inline-block;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        max-width: var(--helper-non-active-space-width);
        z-index: 20;
        padding: 20px 0 20px max(var(--global-container-padding), (100vw - 1660px) / 2 + var(--global-container-padding));
    }
}


.breakdance .side-Nav-sticky {
    display: none;
}



@media (min-width: 1024px) {
    .breakdance .side-Nav-sticky {
display: grid;
    }
}


.breakdance .side-Nav-sticky {
    position: sticky;
    top: 50%;
    transform: translateY(-50%);
    grid-row: 2;
    grid-column: 1 / span 2;
    align-self: flex-start;
    gap: 40px;
    padding-top: 10vh;
}

.breakdance .mobilenav {
    width: 100vw;
    position: absolute;
    top: calc((var(--config-canvas-height) - var(--config-slide-size)) / 4);
    z-index: 20;
    overflow-x: hidden;
    transform: translateY(100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 40px, black 30%, black 60%, transparent calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, transparent 40px, black 30%, black 60%, transparent calc(100% - 40px), transparent 100%);
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.navitem {
  will-change: auto;
}

.breakdance .mobilenav .navlist .navitem {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
}

.breakdance .mobilenav .navlist .navitem {
    scroll-snap-align: center;
    white-space: nowrap;
    position: relative;
    padding: 4px 0;
    color: #fff;
}

.breakdance .mobilenav .navlist .navitem.navItemActive:before {
    content: "";
    position: absolute;
    top: 0;
    right: -8px;
    bottom: 0;
    left: -8px;
    border: 1px solid currentColor;
    border-radius: 4px;
}