.header {
    position: fixed;
    top: 30px;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: center;
    transition: all 0.4s ease;
    pointer-events: none;
    /* Allow clicking through empty header area */
}

/* On scroll, maybe stick to top or keep floating? 
   Design implies it's always floating or maybe becomes full width? 
   Let's keep it floating pill as 'scrolled' usually implies change. 
   The user asked for exact matches to image. Image 1 is static hero.
   Let's make it stay pill but maybe darker background on scroll.
*/

.header-pill {
    background: rgba(255, 255, 255, 0.15);
    /* Glass effect */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0 20px;
    border-radius: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    width: fit-content;
    min-width: 554px;
    height: 55px;
    pointer-events: auto;
    /* Re-enable clicks on the pill */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
}

.header.scrolled {
    top: 10px;
}

.header-pill.scrolled-pill {
    background: rgba(0, 0, 0, 0.85);
    /* Darker on scroll */
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
}

.header-logo-img {
    height: 40px;
    width: auto;
}

.logo-text {
    font-family: var(--font-heading);
    /* Or custom font from image if known */
    font-weight: 700;
    color: white;
    font-size: 1.2rem;
    text-transform: lowercase;
    /* as per image 'eventbyakeem' */
}

.logo-text span {
    color: var(--color-gold);
}

/* Menu */
.nav-menu ul {
    display: flex;
    gap: 40px;
    margin: 0;
    padding: 0;
}

.mobile-only-btn {
    display: none;
}

.nav-menu a {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-transform: capitalize;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.nav-menu a:hover,
.nav-menu a.active {
    color: var(--color-gold);
    opacity: 1;
}

/* CTA */
.header-cta {
    display: block;
}

.btn-book-now {
    background-color: var(--color-black);
    color: white;
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.btn-book-now:hover {
    background-color: var(--color-gold);
    color: var(--color-black);
}

/* Button becomes Gold when header is scrolled (Black background) */
.header-pill.scrolled-pill .btn-book-now {
    background-color: var(--color-gold);
    color: var(--color-black);
}

/* Mobile Toggle */
.mobile-toggle {
    display: none;
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1002;
    /* Ensure above pill if needed */
}

/* Responsive */
@media (max-width: 900px) {
    .header-pill {
        padding: 10px 20px;
        width: 95%;
        min-width: unset;
        /* FIX: Prevent overflow on small screens */
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: black;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.4s;
        z-index: 999;
        flex-direction: column;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-menu ul {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .mobile-only-btn {
        display: block;
        margin-top: 20px;
    }

    /* Ensure existing button is hidden on mobile outside of menu if needed, 
       but currently .header-cta is displaying: none on mobile */

    .header-cta {
        display: none;
        /* Show inside menu on mobile? Or keep icon? */
    }

    .mobile-toggle {
        display: block;
        z-index: 1001;
        /* Above menu */
    }

    /* Ensure Header Pill doesn't overlap/hide the toggle inappropriately */
    .header-pill {
        justify-content: center;
        /* Logo centered */
        position: relative;
    }

    .logo {
        margin: 0 auto;
    }
}