<!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="index.html#about" class="text-gray-800 hover:text-green-500">About Us</a>
                    <a href="index.html#products" 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>

                    <!-- 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"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>

    <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>

    <!-- 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>
    <!-- Registration Container -->
    <div class="min-h-screen flex items-center justify-center relative overflow-hidden py-16 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>

        <!-- Registration 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">Create your account to get started.</p>
            </div>

            <!-- Registration Form -->
            <form class="p-8">
                <div class="space-y-6">
                    <!-- Name Fields -->
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-gray-700 mb-2" for="firstName">First Name</label>
                            <div class="relative">
                                <input type="text" id="firstName" 
                                       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="John">
                                <i class="fas fa-user 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="lastName">Last Name</label>
                            <div class="relative">
                                <input type="text" id="lastName" 
                                       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="Doe">
                                <i class="fas fa-user absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                            </div>
                        </div>
                    </div>

                    <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="john@example.com">
                            <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="Create a password">
                            <i class="fas fa-lock 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="confirmPassword">Confirm Password</label>
                        <div class="relative">
                            <input type="password" id="confirmPassword" 
                                   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="Confirm 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-start gap-2">
                        <input type="checkbox" id="terms" class="mt-1 w-4 h-4 text-green-500 border-gray-300 rounded focus:ring-green-500">
                        <label for="terms" class="text-gray-600">
                            I agree to the <a href="#" class="text-green-500 hover:text-green-600">Terms of Service</a> and 
                            <a href="#" class="text-green-500 hover:text-green-600">Privacy Policy</a>
                        </label>
                    </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-user-plus"></i>
                        <span>Create Account</span>
                    </button>
                </div>
            </form>

            <!-- Sign In Link -->
            <div class="text-center pb-8">
                <p class="text-gray-600">
                    Already have an account? 
                    <a href="login.html" class="text-green-500 hover:text-green-600 font-medium">Sign In</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>

<!-- 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> 