.elementor-25 .elementor-element.elementor-element-52e6e59{--display:flex;}/* Start custom CSS */<div id="ek-master-header" class="ek-nav-wrapper">
    <div class="ek-header-container">
        
        <div class="ek-logo-box">
            <a href="/">
                <img src="http://ek-elites.co.uk/wp-content/uploads/2026/02/logo.jpeg" alt="EK Elites" class="ek-shield">
            </a>
        </div>

        <nav class="ek-menu">
            <ul class="ek-nav-list">
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About & Careers</a></li>
                <li><a href="events.html">Events</a></li>
                <li><a href="gallery.html">Gallery</a></li>
                <li><a href="contact.html" class="ek-cta">Contact</a></li>
            </ul>
        </nav>
    </div>
</div>

<style>
/* 1. DESKTOP BASE (STAYS ON LEFT) */
.ek-nav-wrapper {
    position: fixed;
    top: 0; left: 0; width: 100%;
    height: 120px; 
    background: #050a14;
    border-bottom: 2px solid #c5a059;
    display: flex;
    align-items: center;
    z-index: 99999;
}

.ek-header-container {
    max-width: 1400px;
    margin: 0 auto; width: 100%;
    padding: 0 40px;
    display: flex; justify-content: flex-end; align-items: center;
    position: relative;
}

.ek-logo-box {
    position: absolute;
    top: 0; left: 60px; /* Desktop Left Alignment */
    transition: all 0.3s ease;
}

.ek-shield {
    height: 280px !important; 
    width: auto !important;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 2. MENU STYLES */
.ek-nav-list { display: flex; list-style: none; gap: 30px; margin: 0; padding: 0; }
.ek-nav-list a {
    text-decoration: none; color: white; font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 900; text-transform: uppercase;
    letter-spacing: 0.2em;
}
.ek-cta { background: #c5a059; color: #000 !important; padding: 12px 20px; border-radius: 4px; }

/* 3. FADE LOGIC */
.ek-nav-wrapper.faded .ek-shield {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-40px);
}

/* 4. MOBILE-ONLY RETHINK */
@media (max-width: 1024px) {
    .ek-nav-wrapper { height: 90px; }
    .ek-nav-list { display: none; }
    
    /* Centre the logo box on mobile */
    .ek-logo-box {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .ek-shield {
        height: 220px !important;
        transform: translateY(15px) !important;
    }

    /* Keep it centred when it fades */
    .ek-nav-wrapper.faded .ek-shield {
        transform: translateY(-40px) translateX(-50%) !important;
    }

    /* PUSH THE BODY DOWN ON MOBILE ONLY */
    /* This targets the main content area to create space for the big shield */
    body { 
        padding-top: 260px !important; 
    }
}
</style>

<script>
(function() {
    const handleScroll = () => {
        const header = document.getElementById('ek-master-header');
        const scrollPos = window.pageYOffset;
        const isMobile = window.innerWidth <= 1024;

        // On mobile, fade out very quickly (20px)
        // On desktop, wait until they scroll past the hero (500px)
        const threshold = isMobile ? 20 : 500;

        if (scrollPos > threshold) {
            header.classList.add('faded');
        } else {
            header.classList.remove('faded');
        }
    };
    window.addEventListener('scroll', handleScroll);
    handleScroll();
})();
</script>/* End custom CSS */