<header

class="fixed top-0 left-0 w-full px-[5%] py-4 bg-white flex justify-between items-center z-[1000] shadow-sm transition-all duration-300">

<div class="logo">

<a href="./"><img src="assets/images/logo.webp" alt="GAAP Spices & Super Food Logo"

class="h-16 w-auto mix-blend-multiply"></a>

</div>

<nav

class="nav-links hidden md:flex items-center gap-8 absolute md:static top-16 left-0 w-full md:w-auto bg-white md:bg-transparent shadow-md md:shadow-none flex-col md:flex-row p-4 md:p-0 transition-all duration-300 transform origin-top lg:transform-none">

<a href="./"

class="font-medium px-4 py-2 md:p-0 w-full md:w-auto text-center hover:bg-gray-50 md:hover:bg-transparent pb-[5px] transition-colors duration-300 text-text-dark hover:text-accent-gold"

data-nav="./">Home</a>

<a href="about.html"

class="font-medium px-4 py-2 md:p-0 w-full md:w-auto text-center hover:bg-gray-50 md:hover:bg-transparent pb-[5px] transition-colors duration-300 text-text-dark hover:text-accent-gold"

data-nav="about.html">About us</a>

<a href="products.html"

class="font-medium px-4 py-2 md:p-0 w-full md:w-auto text-center hover:bg-gray-50 md:hover:bg-transparent pb-[5px] transition-colors duration-300 text-text-dark hover:text-accent-gold"

data-nav="products.html">Products</a>

<a href="certifications.html"

class="font-medium px-4 py-2 md:p-0 w-full md:w-auto text-center hover:bg-gray-50 md:hover:bg-transparent pb-[5px] transition-colors duration-300 text-text-dark hover:text-accent-gold"

data-nav="certifications.html">Certifications</a>

<a href="contact.html"

class="font-medium px-4 py-2 md:p-0 w-full md:w-auto text-center hover:bg-gray-50 md:hover:bg-transparent pb-[5px] transition-colors duration-300 text-text-dark hover:text-accent-gold"

data-nav="contact.html">Contact</a>

</nav>

<div class="menu-toggle flex md:hidden flex-col gap-[5px] cursor-pointer z-[1001]" id="mobile-menu">

<span class="w-[25px] h-[3px] bg-primary-green rounded-[2px] transition-all"></span>

<span class="w-[25px] h-[3px] bg-primary-green rounded-[2px] transition-all"></span>

<span class="w-[25px] h-[3px] bg-primary-green rounded-[2px] transition-all"></span>

</div>

<a href="contact.html"

class="hidden md:inline-block px-6 py-2 bg-accent-gold text-white font-semibold rounded hover:bg-active-gold transition-all duration-300 shadow-md">Enquiry</a>

</header>