.menu-highlight {
    position: relative;
    display: inline-block;
    color: #07d39a;
    font-weight: bold;
}

.menu-highlight-text {
    display: inline-block;
    position: relative;
    background: linear-gradient(
        108deg,
        transparent 0 55%,
        hsl(0 0% 100% / 0.75) 55% 60%,
        transparent 60% 70%,
        hsl(0 0% 100% / 0.75) 70% 85%,
        transparent 85%
    ) calc(var(--pos, 0) * -200%) 0% / 200% 100%, #07d39a;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: glareSlide 3s linear infinite;
}

@keyframes glareSlide {
    0% {
        background-position: 200% 0%;
    }
    100% {
        background-position: -200% 0%;
    }
}

/* Sparkle stars */
.menu-highlight .sparkle {
    position: absolute;
    width: 8px;
    aspect-ratio: 1;
    z-index: 3;
    pointer-events: none;
    animation: sparkle 0.75s calc((0.15 * var(--d)) * 1s) infinite;
}

@keyframes sparkle {
    0%, 100% {
        transform: translate(-50%, -50%) scale(0);
    }
    50% {
        transform: translate(-50%, -50%) scale(var(--s, 1));
    }
}

.menu-highlight .sparkle svg {
    width: 100%;
    height: 100%;
}

.menu-highlight .sparkle svg path {
    fill: hsl(0 0% 100% / 0.75);
}

.menu-highlight .sparkle:nth-of-type(1) {
    --x: 0;
    --y: 20;
    --s: 1.1;
    --d: 1;
    top: calc(var(--y) * 1%);
    left: calc(var(--x) * 1%);
}

.menu-highlight .sparkle:nth-of-type(2) {
    --x: 15;
    --y: 80;
    --s: 1.25;
    --d: 2;
    top: calc(var(--y) * 1%);
    left: calc(var(--x) * 1%);
}

.menu-highlight .sparkle:nth-of-type(3) {
    --x: 45;
    --y: 40;
    --s: 1.1;
    --d: 3;
    top: calc(var(--y) * 1%);
    left: calc(var(--x) * 1%);
}

.menu-highlight .sparkle:nth-of-type(4) {
    --x: 75;
    --y: 60;
    --s: 0.9;
    --d: 2;
    top: calc(var(--y) * 1%);
    left: calc(var(--x) * 1%);
}

.menu-highlight .sparkle:nth-of-type(5) {
    --x: 100;
    --y: 30;
    --s: 0.8;
    --d: 4;
    top: calc(var(--y) * 1%);
    left: calc(var(--x) * 1%);
}

/* Search box styles */
.search-box {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border-radius: 25px;
    padding: 5px 15px;
    width: 100%;
    box-shadow: 1px 1px 1px 1px #bab6b6;
}

.search-box input {
    border: none;
    background: transparent;
    outline: none;
    flex: 1;
    padding: 8px 24px;
    font-size: 14px;
}

.search-box button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.search-box button img {
    width: 20px;
    height: 20px;
}

/* Mobile menu search box */
.navbar-side .search-box {
    margin: 15px;
    max-width: calc(100% - 30px);
    box-shadow: 1px 1px 1px 1px #bab6b6;
}

.navbar-side .search-box input {
    width: 100%;
    font-size: 16px;
}