/* 1. Reset and Smooth Scroll */
    html {
        scroll-behavior: smooth;
    }

    body {
        margin: 0;
        padding: 0;
    }

    /* 2. Sticky Container */
    .nav-sticky-holder {
        position: sticky;
        top: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        padding-top: 15px;
        padding-bottom: 15px;
        z-index: 100000;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%);
        pointer-events: none;
    }

    /* 3. The Central Pill */
    .floating-pill-center {
        direction: rtl;
        pointer-events: auto;
        background: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 30px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: row;
        align-items: center;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        max-height: 50px;
        padding: 0 12px;
    }

    /* 4. The Toggle Button (Mobile) */
    .menu-trigger-center {
        width: 44px;
        height: 50px;
        border: none;
        background: none;
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        color: #111;
    }

    /* 5. Navigation Links */
    .nav-content-center {
        display: flex;
        flex-direction: row;
        list-style: none;
        margin: 0;
        padding: 0;
        white-space: nowrap;
    }

    .nav-content-center li {
        list-style: none;
    }

    .nav-content-center li a {
        text-decoration: none;
        color: #111;
        font-size: 0.8rem;
        /* Slightly smaller to fit 7 items comfortably */
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        padding: 12px 14px;
        display: block;
        transition: all 0.3s ease;
    }

    .nav-content-center li a:hover {
        background: rgba(0, 0, 0, 0.05);
        border-radius: 20px;
    }

    /* 6. RESPONSIVE LOGIC */
    @media (max-width: 950px) {

        /* Increased breakpoint for the extra item */
        .floating-pill-center {
            flex-direction: column;
            max-height: 50px;
            width: 55px;
            padding: 0;
        }

        .menu-trigger-center {
            display: flex;
        }

        .nav-content-center {
            flex-direction: column;
            width: 100%;
            opacity: 0;
            padding: 10px 0;
            transition: opacity 0.2s ease;
            text-align: center;
        }

        .floating-pill-center.expanded {
            max-height: 550px;
            /* Increased for 7 items */
            width: 200px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.98);
        }

        .floating-pill-center.expanded .nav-content-center {
            opacity: 1;
        }
    }

    /* 7. Scroll Offset */
    [id] {
        scroll-margin-top: 100px;
    }