Sustainable Navbar Component - Copy this Html, Tailwind Component to your project

Sustainability Website Navbar Design Layout & Structure: Logo (Left Aligned): Positioned on the far left, featuring a small, simple logo that reflects the environmental theme (e.g., a leaf or globe icon). Font: Clean and modern, such as Montserrat or Raleway. Navigation Links (Center Aligned): Center the following links horizontally across the navbar: Home About Us Initiatives Resources Get Involved Contact Use a light colored font (e.g., white or soft grey) with slight hover effects. On hover, change the font color to a brighter shade (green or blue) or underline the link. Call to Action Buttons (Right Aligned): Two buttons on the far right: Login (blue background with white text) Register (green background with white text) Both buttons should have rounded corners, with slight hover effects (color darkens or lightens slightly on hover). Ensure they are of medium size to stand out but not dominate the navbar. Responsiveness & Style: Mobile Version: On smaller screens, collapse the navigation links into a hamburger menu (three lines icon) on the right side, with the logo centered. Sticky Navbar: The navbar should remain fixed at the top as the user scrolls, ensuring easy access to navigation at all times. Apply a subtle shadow effect to the navbar for better visibility against the background image. Background & Colors: Transparent or semi transparent background with a subtle gradient, such as light green to teal, to blend seamlessly with the hero section while keeping the text and buttons readable.