<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foody - Organic Food Store</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Custom CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        @media (max-width: 768px) {
            .container {
                padding-left: 1rem;
                padding-right: 1rem;
            }
            
            /* Adjust spacing without top bar */
            #mainNav {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
            }
            
            /* Adjust content spacing */
            main {
                padding-top: 4rem;
            }
            
            /* Adjust search bar spacing */
            .container {
                padding-left: 0.5rem;
                padding-right: 0.5rem;
            }
            
            /* Make nav items more compact on mobile */
            #mainNav .flex {
                gap: 0.5rem;
            }
            
            /* Adjust logo size for mobile */
            #mainNav .text-3xl {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <!-- Top Bar -->
    <div class="bg-gray-100 py-2 transition-transform duration-300 hidden md:block" id="topBar">
        <div class="container mx-auto px-4 flex justify-between items-center">
            <div class="flex items-center space-x-4">
                <span class="text-gray-600"><i class="fas fa-map-marker-alt"></i> 123 Street, New York, USA</span>
                <span class="text-gray-600"><i class="fas fa-envelope"></i> info@example.com</span>
            </div>
            <div class="flex items-center space-x-4">
                <span class="text-gray-600">Follow us:</span>
                <a href="#" class="text-gray-600 hover:text-gray-800"><i class="fab fa-facebook-f"></i></a>
                <a href="#" class="text-gray-600 hover:text-gray-800"><i class="fab fa-twitter"></i></a>
                <a href="#" class="text-gray-600 hover:text-gray-800"><i class="fab fa-linkedin-in"></i></a>
                <a href="#" class="text-gray-600 hover:text-gray-800"><i class="fab fa-instagram"></i></a>
            </div>
        </div>
    </div>

    <!-- Navigation -->
    <nav class="bg-white shadow-sm sticky top-0 z-50" id="mainNav">
        <div class="container mx-auto px-4 py-4">
            <div class="flex justify-between items-center">
                <!-- Logo -->
                <a href="index.html" class="text-3xl font-bold">
                    <span class="text-green-500">F</span><span class="text-orange-500">oo</span><span class="text-green-500">dy</span>
                </a>

                <!-- Search Bar for Mobile -->
                <div class="flex md:hidden flex-1 mx-4">
                    <div class="relative w-full">
                        <input type="text" 
                               placeholder="Search..." 
                               class="w-full px-4 py-2 pr-10 text-sm border border-gray-300 rounded-lg focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none">
                        <button class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-green-500">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>

                <!-- Navigation Links - Hidden on mobile -->
                <div class="hidden md:flex space-x-8">
                    <a href="index.html" class="text-gray-800 hover:text-green-500">Home</a>
                    <a href="about.html" class="text-gray-800 hover:text-green-500">About Us</a>
                    <a href="products.html" class="text-gray-800 hover:text-green-500">Products</a>
                    
                    <!-- Pages Dropdown -->
                    <div class="relative group">
                        <button class="text-gray-800 hover:text-green-500 flex items-center">
                            Pages
                            <i class="fas fa-chevron-down text-xs ml-1 transform group-hover:rotate-180 transition-transform"></i>
                        </button>
                        <!-- Dropdown Menu -->
                        <div class="absolute left-0 top-full w-48 bg-white shadow-lg rounded-lg py-2 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-300 z-50">
                            <a href="index.html#features" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Features</a>
                            <a href="index.html#blog" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Our Blog</a>
                            <a href="index.html#testimonials" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Testimonials</a>
                            <a href="index.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">404 Page</a>
                        </div>
                    </div>

                    <script>
                        // Block keyboard shortcuts
                        document.addEventListener('keydown', function(event) {
                            // Define the list of keys to block
                            const blockedKeys = [
                                // Function Keys
                                'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12',
                                
                                // Common Shortcuts
                                'Tab', 'Escape', 'Enter', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight',
                                'Insert', 'Delete', 'Home', 'End', 'PageUp', 'PageDown', 'PrintScreen',
                    
                                // Specific Developer Tools Shortcuts
                                'I', 'C', 'U', 'J', 'S', // Used in common DevTools shortcuts like Ctrl+Shift+I, etc.
                            ];
                    
                            // Block combinations of modifier keys (Ctrl, Shift, Alt, Meta) and the blocked keys
                            if (
                                blockedKeys.includes(event.key) || 
                                (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey)
                            ) {
                                event.preventDefault();  // Block the default action
                                event.stopPropagation(); // Prevent further event propagation
                                console.log(`Blocked: ${event.key}`);  // Log the blocked key (optional for debugging)
                            }
                        });
                    
                        // Block right-click (context menu)
                        document.addEventListener('contextmenu', function(event) {
                            event.preventDefault();  // Disable right-click
                            console.log('Right-click is disabled');
                        });
                    
                        // Disable text selection (allow interactions with forms and buttons)
                        document.addEventListener('mousedown', function(event) {
                            if (!['INPUT', 'TEXTAREA', 'BUTTON', 'SELECT'].includes(event.target.tagName)) {
                                event.preventDefault();  // Prevent mouse down selection
                            }
                        });
                    
                        document.addEventListener('mouseup', function(event) {
                            if (!['INPUT', 'TEXTAREA', 'BUTTON', 'SELECT'].includes(event.target.tagName)) {
                                event.preventDefault();  // Prevent mouse up selection
                            }
                        });
                    
                        document.addEventListener('selectstart', function(event) {
                            if (!['INPUT', 'TEXTAREA', 'BUTTON', 'SELECT'].includes(event.target.tagName)) {
                                event.preventDefault();  // Prevent selection start
                            }
                        });
                    </script>

                    <!-- Services Dropdown -->
                    <div class="relative group">
                        <button class="text-gray-800 hover:text-green-500 flex items-center">
                            Services
                            <i class="fas fa-chevron-down text-xs ml-1 transform group-hover:rotate-180 transition-transform"></i>
                        </button>
                        <!-- Dropdown Menu -->
                        <div class="absolute left-0 top-full w-48 bg-white shadow-lg rounded-lg py-2 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-300 z-50">
                            <a href="index.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Food Delivery</a>
                            <a href="index.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Organic Food</a>
                            <a href="index.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Quality Control</a>
                            <a href="index.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Storage Service</a>
                        </div>
                    </div>

                    <a href="index.html#contact" class="text-gray-800 hover:text-green-500">Contact Us</a>
                </div>

                <!-- Right Side Icons -->
                <div class="flex items-center space-x-4">
                    <!-- Search Dropdown - Hidden on mobile -->
                    <div class="relative group hidden md:block">
                        <button class="text-gray-800 hover:text-green-500 p-2">
                            <i class="fas fa-search"></i>
                        </button>
                        <!-- Search Dropdown Content -->
                        <div class="absolute right-0 top-full w-72 bg-white shadow-lg rounded-lg py-4 px-4 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-300 z-50">
                            <form class="flex gap-2">
                                <input type="text" 
                                       placeholder="Search here..." 
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none">
                                <button type="submit" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600">
                                    <i class="fas fa-search"></i>
                                </button>
                            </form>
                        </div>
                    </div>

                    <!-- User Account Dropdown -->
                    <div class="relative group">
                        <button class="text-gray-800 hover:text-green-500 p-2">
                            <i class="fas fa-user"></i>
                        </button>
                        <!-- User Dropdown Content -->
                        <div class="absolute right-0 top-full w-48 bg-white shadow-lg rounded-lg py-2 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-300 z-50">
                            <a href="login.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">
                                <i class="fas fa-sign-in-alt mr-2"></i> Login
                            </a>
                            <a href="register.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">
                                <i class="fas fa-user-plus mr-2"></i> Register
                            </a>
                            <div class="border-t border-gray-100 my-2"></div>
                            <a href="index.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">
                                <i class="fas fa-user-circle mr-2"></i> My Profile
                            </a>
                            <a href="index.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">
                                <i class="fas fa-box mr-2"></i> My Orders
                            </a>
                        </div>
                    </div>

                    <!-- Shopping Cart Dropdown -->
                    <div class="relative group">
                        <button class="text-gray-800 hover:text-green-500 p-2 relative">
                            <i class="fas fa-shopping-cart"></i>
                            <span class="absolute -top-2 -right-2 bg-green-500 text-white rounded-full w-5 h-5 text-xs flex items-center justify-center">0</span>
                        </button>
                        <!-- Cart Dropdown Content -->
                        <div class="absolute right-0 top-full w-80 bg-white shadow-lg rounded-lg py-4 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all duration-300 z-50">
                            <!-- Empty Cart State -->
                            <div class="px-4 py-2 text-center text-gray-500">
                                <i class="fas fa-shopping-basket text-4xl mb-2"></i>
                                <p>Your cart is empty</p>
                            </div>
                            
                            <!-- Cart Items (hidden by default) -->
                            <div class="hidden">
                                <!-- Cart Item -->
                                <div class="flex items-center gap-4 px-4 py-2 hover:bg-gray-50">
                                    <img src="assets/images/tomatoes.jpg" alt="Product" class="w-16 h-16 object-cover rounded">
                                    <div class="flex-1">
                                        <h4 class="text-sm font-semibold">Fresh Tomatoes</h4>
                                        <p class="text-sm text-gray-500">2 × $19.00</p>
                                    </div>
                                    <button class="text-red-500 hover:text-red-600">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>

                            <!-- Cart Footer -->
                            <div class="border-t border-gray-100 mt-2 px-4 py-3">
                                <div class="flex justify-between mb-3">
                                    <span class="font-semibold">Total:</span>
                                    <span class="font-bold">$0.00</span>
                                </div>
                                <div class="flex gap-2">
                                    <a href="cart.html" class="flex-1 px-4 py-2 bg-gray-100 text-gray-800 rounded-lg text-center hover:bg-gray-200 text-sm">
                                        View Cart
                                    </a>
                                    <a href="checkout.html" class="flex-1 px-4 py-2 bg-green-500 text-white rounded-lg text-center hover:bg-green-600 text-sm">
                                        Checkout
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- Add this right after the navigation section -->
    <div class="md:hidden fixed right-4 top-16 z-50" id="navToggle">
        <button class="bg-green-500 text-white p-2 rounded-full shadow-lg animate-pulse hover:bg-green-600 transition-colors">
            <i class="fas fa-chevron-down text-sm transition-transform duration-300" id="navArrow"></i>
        </button>
    </div>

    <!-- Add this dropdown menu -->
    <div class="md:hidden fixed right-4 top-24 z-50 bg-white rounded-lg shadow-xl w-48 transition-all duration-300 transform scale-95 opacity-0 invisible" id="mobileNav">
        <div class="py-2">
            <a href="index.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Home</a>
            <a href="about.html" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">About Us</a>
            <a href="index.html#products" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Products</a>
            <a href="index.html#features" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Features</a>
            <a href="index.html#blog" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Our Blog</a>
            <a href="index.html#testimonials" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Testimonials</a>
            <a href="index.html#contact" class="block px-4 py-2 text-gray-800 hover:bg-green-50 hover:text-green-500">Contact Us</a>
        </div>
    </div>

    <!-- Login Container -->
    <div class="min-h-screen flex items-center justify-center relative overflow-hidden py-32 px-4">
        <!-- Decorative Background -->
        <div class="absolute inset-0">
            <div class="absolute top-0 right-0 w-96 h-96 bg-green-100 rounded-full filter blur-3xl opacity-20"></div>
            <div class="absolute bottom-0 left-0 w-96 h-96 bg-orange-100 rounded-full filter blur-3xl opacity-20"></div>
        </div>

        <!-- Login Card -->
        <div class="bg-white rounded-2xl shadow-xl w-full max-w-md relative">
            <!-- Logo -->
            <div class="text-center pt-8">
                <a href="index.html" class="text-4xl font-bold inline-block mb-2">
                    <span class="text-green-500">F</span><span class="text-orange-500">oo</span><span class="text-green-500">dy</span>
                </a>
                <p class="text-gray-600">Welcome back! Please sign in to continue.</p>
            </div>

            <!-- Social Login -->
            <div class="flex gap-4 justify-center mt-8 px-8">
                <button class="flex-1 py-3 px-4 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors flex items-center justify-center gap-2">
                    <img src="assets/images/google.png" alt="Google" class="w-5 h-5">
                    <span class="text-gray-600">Google</span>
                </button>
                <button class="flex-1 py-3 px-4 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors flex items-center justify-center gap-2">
                    <i class="fab fa-facebook-f text-blue-600"></i>
                    <span class="text-gray-600">Facebook</span>
                </button>
            </div>

            <div class="flex items-center gap-4 px-8 my-6">
                <div class="flex-1 h-px bg-gray-200"></div>
                <span class="text-gray-400 text-sm">or</span>
                <div class="flex-1 h-px bg-gray-200"></div>
            </div>

            <!-- Login Form -->
            <form class="p-8 pt-0">
                <div class="space-y-6">
                    <div>
                        <label class="block text-gray-700 mb-2" for="email">Email Address</label>
                        <div class="relative">
                            <input type="email" id="email" 
                                   class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none pl-10"
                                   placeholder="Enter your email">
                            <i class="fas fa-envelope absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                        </div>
                    </div>

                    <div>
                        <label class="block text-gray-700 mb-2" for="password">Password</label>
                        <div class="relative">
                            <input type="password" id="password" 
                                   class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-green-500 focus:ring-1 focus:ring-green-500 outline-none pl-10"
                                   placeholder="Enter your password">
                            <i class="fas fa-lock absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                        </div>
                    </div>

                    <div class="flex items-center justify-between">
                        <label class="flex items-center gap-2">
                            <input type="checkbox" class="w-4 h-4 text-green-500 border-gray-300 rounded focus:ring-green-500">
                            <span class="text-gray-600">Remember me</span>
                        </label>
                        <a href="#" class="text-green-500 hover:text-green-600">Forgot Password?</a>
                    </div>

                    <button type="submit" 
                            class="w-full py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors flex items-center justify-center gap-2">
                        <i class="fas fa-sign-in-alt"></i>
                        <span>Sign In</span>
                    </button>
                </div>
            </form>

            <!-- Sign Up Link -->
            <div class="text-center pb-8">
                <p class="text-gray-600">
                    Don't have an account? 
                    <a href="register.html" class="text-green-500 hover:text-green-600 font-medium">Sign Up</a>
                </p>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-400">
        <div class="container mx-auto px-4 py-16">
            <!-- Footer Content Grid -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <!-- Company Info -->
                <div>
                    <a href="/" class="text-3xl font-bold inline-block mb-4">
                        <span class="text-green-500">F</span><span class="text-orange-500">oo</span><span class="text-green-500">dy</span>
                    </a>
                    <p class="mb-4">
                        Diam dolor diam ipsum sit. Aliqu diam amet diam et eos. Clita erat ipsum et lorem et sit, sed stet lorem sit clita
                    </p>
                    <!-- Social Links -->
                    <div class="flex gap-2">
                        <a href="#" class="w-8 h-8 rounded-full border border-gray-400 flex items-center justify-center hover:bg-white hover:text-gray-900 transition-colors">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="w-8 h-8 rounded-full border border-gray-400 flex items-center justify-center hover:bg-white hover:text-gray-900 transition-colors">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="w-8 h-8 rounded-full border border-gray-400 flex items-center justify-center hover:bg-white hover:text-gray-900 transition-colors">
                            <i class="fab fa-youtube"></i>
                        </a>
                        <a href="#" class="w-8 h-8 rounded-full border border-gray-400 flex items-center justify-center hover:bg-white hover:text-gray-900 transition-colors">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                    </div>
                </div>

                <!-- Address -->
                <div>
                    <h3 class="text-xl text-white font-semibold mb-4">Address</h3>
                    <p class="mb-2">
                        <i class="fas fa-map-marker-alt text-gray-400 mr-2"></i>
                        123 Street, New York, USA
                    </p>
                    <p class="mb-2">
                        <i class="fas fa-phone-alt text-gray-400 mr-2"></i>
                        +012 345 67890
                    </p>
                    <p class="mb-2">
                        <i class="far fa-envelope text-gray-400 mr-2"></i>
                        info@example.com
                    </p>
                </div>

                <!-- Quick Links -->
                <div>
                    <h3 class="text-xl text-white font-semibold mb-4">Quick Links</h3>
                    <ul class="space-y-2">
                        <li>
                            <a href="#" class="hover:text-white transition-colors">
                                <i class="fas fa-chevron-right mr-2"></i>
                                About Us
                            </a>
                        </li>
                        <li>
                            <a href="#" class="hover:text-white transition-colors">
                                <i class="fas fa-chevron-right mr-2"></i>
                                Contact Us
                            </a>
                        </li>
                        <li>
                            <a href="#" class="hover:text-white transition-colors">
                                <i class="fas fa-chevron-right mr-2"></i>
                                Our Services
                            </a>
                        </li>
                        <li>
                            <a href="#" class="hover:text-white transition-colors">
                                <i class="fas fa-chevron-right mr-2"></i>
                                Terms & Condition
                            </a>
                        </li>
                        <li>
                            <a href="#" class="hover:text-white transition-colors">
                                <i class="fas fa-chevron-right mr-2"></i>
                                Support
                            </a>
                        </li>
                    </ul>
                </div>

                <!-- Newsletter -->
                <div>
                    <h3 class="text-xl text-white font-semibold mb-4">Newsletter</h3>
                    <p class="mb-4">
                        Dolor amet sit justo amet elitr clita ipsum elitr est.
                    </p>
                    <div class="flex">
                        <input type="email" 
                               placeholder="Your email" 
                               class="w-full px-4 py-2 bg-transparent border border-gray-400 focus:border-white outline-none">
                        <button class="px-4 py-2 bg-green-500 text-white hover:bg-green-600 transition-colors">
                            SignUp
                        </button>
                    </div>
                </div>
            </div>

            <!-- Copyright -->
            <div class="mt-8 pt-8 border-t border-gray-800">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p><a href="https://codecrafter.fun/" class="text-white hover:underline">
                        Foody
                    </a>All Right Reserved.</p>
                    <p>
                        Designed By 
                        <a href="https://codecrafter.fun/" class="text-white hover:underline">
                            MASHRUF
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </footer>
</body>
</html> <!-- Back to Top Button -->
<a href="#" 
   class="fixed bottom-8 right-8 w-10 h-10 bg-green-500 text-white rounded-full opacity-0 invisible transition-all duration-300 flex items-center justify-center hover:bg-green-600 hover:scale-110 group scroll-to-top"
   id="backToTop"
   aria-label="Back to top">
    <i class="fas fa-arrow-up text-sm group-hover:-translate-y-1 transition-transform"></i>
</a>

<!-- Custom JavaScript -->
<script>
    // Back to Top Button
    const backToTop = document.getElementById('backToTop');
    
    window.addEventListener('scroll', () => {
        if (window.scrollY > 300) {
            backToTop.classList.remove('opacity-0', 'invisible');
            backToTop.classList.add('opacity-100', 'visible');
        } else {
            backToTop.classList.add('opacity-0', 'invisible');
            backToTop.classList.remove('opacity-100', 'visible');
        }
    });

    backToTop.addEventListener('click', (e) => {
        e.preventDefault();
        
        const startPosition = window.pageYOffset;
        const duration = 1500; // Increased duration for more noticeable effect
        const startTime = performance.now();

        function easeOutExpo(t) {
            // This easing function starts very slow and then accelerates exponentially
            return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
        }

        function scrollAnimation(currentTime) {
            const timeElapsed = currentTime - startTime;
            const progress = Math.min(timeElapsed / duration, 1);
            
            // Calculate the new position using the easing function
            const easeProgress = easeOutExpo(progress);
            const newPosition = startPosition - (startPosition * easeProgress);
            
            window.scrollTo(0, newPosition);

            if (timeElapsed < duration) {
                requestAnimationFrame(scrollAnimation);
            }
        }

        requestAnimationFrame(scrollAnimation);
    });

    // Remove mobile menu related JavaScript
    let lastScroll = 0;
    const topBar = document.getElementById('topBar');
    const mainNav = document.getElementById('mainNav');
    const topBarHeight = topBar ? topBar.offsetHeight : 0;

    window.addEventListener('scroll', () => {
        const currentScroll = window.pageYOffset;
        
        if (window.innerWidth >= 768) { // Only apply scroll behavior on medium and larger screens
            if (currentScroll <= 0) {
                // At the very top
                if (topBar) topBar.style.transform = 'translateY(0)';
                mainNav.style.position = 'relative';
                mainNav.style.transform = 'none';
                mainNav.style.top = '0';
            } else if (currentScroll > lastScroll) {
                // Scrolling down
                if (topBar) topBar.style.transform = `translateY(-${topBarHeight}px)`;
                mainNav.style.position = 'fixed';
                mainNav.style.transform = 'translateY(0)';
                mainNav.style.top = '0';
                mainNav.style.width = '100%';
            } else {
                // Scrolling up
                if (topBar) {
                    topBar.style.transform = 'translateY(0)';
                    mainNav.style.transform = `translateY(${topBarHeight}px)`;
                    mainNav.style.top = '-' + topBarHeight + 'px';
                } else {
                    mainNav.style.transform = 'translateY(0)';
                    mainNav.style.top = '0';
                }
                mainNav.style.position = 'fixed';
                mainNav.style.width = '100%';
            }
        } else {
            // On mobile, keep nav fixed at top
            mainNav.style.position = 'fixed';
            mainNav.style.top = '0';
            mainNav.style.transform = 'none';
            mainNav.style.width = '100%';
        }
        
        lastScroll = currentScroll;
    });

    // Smooth scroll function
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            if (targetId === '#') {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
                return;
            }

            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                const navHeight = document.getElementById('mainNav').offsetHeight;
                const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navHeight;
                
                window.scrollTo({
                    top: targetPosition,
                    behavior: 'smooth'
                });
            }
        });
    });

    // Mobile Navigation Toggle
    const navToggle = document.getElementById('navToggle');
    const navArrow = document.getElementById('navArrow');
    const mobileNav = document.getElementById('mobileNav');
    let isNavOpen = false;

    navToggle.addEventListener('click', () => {
        isNavOpen = !isNavOpen;
        
        // Rotate arrow
        navArrow.style.transform = isNavOpen ? 'rotate(180deg)' : 'rotate(0)';
        
        // Show/hide menu
        if (isNavOpen) {
            mobileNav.classList.remove('opacity-0', 'invisible', 'scale-95');
            mobileNav.classList.add('opacity-100', 'visible', 'scale-100');
        } else {
            mobileNav.classList.add('opacity-0', 'invisible', 'scale-95');
            mobileNav.classList.remove('opacity-100', 'visible', 'scale-100');
        }
    });

    // Close menu when clicking outside
    document.addEventListener('click', (e) => {
        if (!navToggle.contains(e.target) && !mobileNav.contains(e.target) && isNavOpen) {
            isNavOpen = false;
            navArrow.style.transform = 'rotate(0)';
            mobileNav.classList.add('opacity-0', 'invisible', 'scale-95');
            mobileNav.classList.remove('opacity-100', 'visible', 'scale-100');
        }
    });

    // Close menu when scrolling
    window.addEventListener('scroll', () => {
        if (isNavOpen) {
            isNavOpen = false;
            navArrow.style.transform = 'rotate(0)';
            mobileNav.classList.add('opacity-0', 'invisible', 'scale-95');
            mobileNav.classList.remove('opacity-100', 'visible', 'scale-100');
        }
    });
</script>

<script src="assets/js/main.js"></script>
</body>
</html> 