<!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>
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="css/styles.css" rel="stylesheet">
    <!-- AOS -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
</head>
<body>
    <!-- Top Bar - Hidden on mobile, visible on md and up -->
    <div class="hidden md:block bg-gray-100 py-2 border-b border-gray-200">
        <div class="container mx-auto px-4">
            <!-- Desktop View (side by side) -->
            <div class="flex justify-between items-center">
                <!-- Contact Info -->
                <div class="flex items-center space-x-6">
                    <a href="#" class="flex items-center text-gray-600 hover:text-green-500 transition-colors group">
                        <div class="bg-white p-1.5 rounded-full group-hover:bg-green-50 transition-colors">
                            <i class="fas fa-map-marker-alt text-green-500"></i>
                        </div>
                        <span class="ml-2 text-sm">123 Street, New York, USA</span>
                    </a>
                    <a href="tel:+012345678" class="flex items-center text-gray-600 hover:text-green-500 transition-colors group">
                        <div class="bg-white p-1.5 rounded-full group-hover:bg-green-50 transition-colors">
                            <i class="fas fa-phone-alt text-green-500"></i>
                        </div>
                        <span class="ml-2 text-sm">+012 345 6789</span>
                    </a>
                    <a href="mailto:info@example.com" class="flex items-center text-gray-600 hover:text-green-500 transition-colors group">
                        <div class="bg-white p-1.5 rounded-full group-hover:bg-green-50 transition-colors">
                            <i class="fas fa-envelope text-green-500"></i>
                        </div>
                        <span class="ml-2 text-sm">info@example.com</span>
                    </a>
                </div>

                <!-- Social Links -->
                <div class="flex items-center space-x-4">
                    <span class="text-gray-600 text-sm">Follow us:</span>
                    <div class="flex space-x-3">
                        <a href="#" class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-600 hover:bg-green-500 hover:text-white transition-all transform hover:-translate-y-1 hover:shadow-md">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-600 hover:bg-green-500 hover:text-white transition-all transform hover:-translate-y-1 hover:shadow-md">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-600 hover:bg-green-500 hover:text-white transition-all transform hover:-translate-y-1 hover:shadow-md">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                        <a href="#" class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-600 hover:bg-green-500 hover:text-white transition-all transform hover:-translate-y-1 hover:shadow-md">
                            <i class="fab fa-instagram"></i>
                        </a>
                    </div>
                </div>
            </div>
        </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>

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

                <!-- Navigation Links -->
                <div class="hidden md:flex items-center space-x-8">
                    <a href="index.html" class="text-gray-700 hover:text-green-500 bg-green-50">Home</a>
                    <a href="about.html" class="text-gray-700 hover:text-green-500 transition-colors">About Us</a>
                    <a href="products.html" class="text-gray-700 hover:text-green-500 transition-colors">Products</a>
                    <div class="relative group">
                        <button class="text-gray-700 hover:text-green-500 transition-colors flex items-center">
                            Pages
                            <i class="fas fa-chevron-down ml-2 text-xs"></i>
                        </button>
                        <div class="absolute top-full left-0 mt-2 w-48 bg-white shadow-lg rounded-lg py-2 hidden group-hover:block">
                            <a href="products.html" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-500">Shop Grid</a>
                            <a href="cart.html" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-500">Shopping Cart</a>
                            <a href="signin.html" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-500">Sign In</a>
                        </div>
                    </div>
                    <a href="#contact" class="text-gray-700 hover:text-green-500 transition-colors">Contact Us</a>
                </div>

<!-- Right Icons -->
<div class="flex items-center space-x-4">
    <!-- Search Icon with Dropdown -->
    <div class="relative group">
        <button class="p-2 hover:bg-gray-100 rounded-full transition-colors">
            <i class="fas fa-search text-lg text-gray-700 group-hover:text-green-500 transition-colors"></i>
        </button>
        <!-- Search Dropdown -->
        <div class="absolute right-0 top-full mt-2 w-72 bg-white shadow-lg rounded-lg p-4 hidden group-hover:block">
            <form class="flex items-center">
                <input type="text" 
                    placeholder="Search here..." 
                    class="w-full px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:border-green-500">
                <button type="submit" class="px-4 py-2 bg-green-500 text-white rounded-r-lg hover:bg-green-600 transition-colors">
                    <i class="fas fa-search"></i>
                </button>
            </form>
        </div>
    </div>

    <!-- User Account Icon with Dropdown -->
    <div class="relative group">
        <button class="p-2 hover:bg-gray-100 rounded-full transition-colors">
            <i class="fas fa-user text-lg text-gray-700 group-hover:text-green-500 transition-colors"></i>
        </button>
        <!-- User Dropdown -->
        <div class="absolute right-0 top-full mt-2 w-48 bg-white shadow-lg rounded-lg py-2 hidden group-hover:block">
            <a href="signin.html" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-500 transition-colors">Sign In</a>
            <a href="signup.html" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-500 transition-colors">Sign Up</a>
        </div>
    </div>

    <!-- Shopping Cart Icon with Dropdown -->
    <div class="relative group">
        <button class="p-2 hover:bg-gray-100 rounded-full transition-colors">
            <i class="fas fa-shopping-bag text-lg text-gray-700 group-hover:text-green-500 transition-colors"></i>
            <span class="absolute -top-1 -right-1 bg-green-500 text-white text-xs w-5 h-5 rounded-full flex items-center justify-center cart-count">0</span>
        </button>
        <!-- Cart Dropdown -->
        <div class="absolute right-0 top-full mt-2 w-80 bg-white shadow-lg rounded-lg hidden group-hover:block">
            <div class="p-4 border-b">
                <h3 class="font-medium">Shopping Cart (<span class="cart-count">0</span> items)</h3>
            </div>
            <div class="cart-items max-h-64 overflow-y-auto">
                <!-- Cart items will be dynamically inserted here -->
            </div>
            <div class="p-4 border-t">
                <a href="cart.html" class="block w-full bg-green-500 text-white py-2 rounded text-center hover:bg-green-600 transition-colors">
                    View Cart
                </a>
            </div>
        </div>
    </div>
</div>
            </div>
        </div>
    </nav>

    <!-- Mobile Menu Button - Visible only on small devices -->
<div class="md:hidden">
    <button id="mobileMenuBtn" class="fixed top-20 right-4 w-12 h-12 bg-green-500 text-white rounded-full shadow-lg flex items-center justify-center animate-pulse z-50">
        <i class="fas fa-chevron-down text-xl transition-transform duration-300"></i>
    </button>

    <!-- Mobile Menu Popup -->
    <div id="mobileMenu" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden">
        <div class="absolute right-4 top-32 w-64 bg-white rounded-lg shadow-xl transform -translate-y-full opacity-0 transition-all duration-300">
            <div class="p-4 space-y-3">
                <a href="index.html" class="flex items-center space-x-2 p-3 hover:bg-green-50 rounded-lg group transition-colors">
                    <i class="fas fa-home text-green-500 group-hover:scale-110 transition-transform"></i>
                    <span>Home</span>
                </a>
                <a href="about.html" class="flex items-center space-x-2 p-3 hover:bg-green-50 rounded-lg group transition-colors">
                    <i class="fas fa-info-circle text-green-500 group-hover:scale-110 transition-transform"></i>
                    <span>About Us</span>
                </a>
                <a href="products.html" class="flex items-center space-x-2 p-3 hover:bg-green-50 rounded-lg group transition-colors">
                    <i class="fas fa-shopping-basket text-green-500 group-hover:scale-110 transition-transform"></i>
                    <span>Products</span>
                </a>
                <a href="#contact" class="flex items-center space-x-2 p-3 hover:bg-green-50 rounded-lg group transition-colors">
                    <i class="fas fa-envelope text-green-500 group-hover:scale-110 transition-transform"></i>
                    <span>Contact Us</span>
                </a>
            </div>
        </div>
    </div>
</div>

    <!-- Hero Section -->
    <div class="relative bg-gradient-to-br from-gray-50 to-gray-100 overflow-hidden">
        <!-- Background Image Container -->
        <div class="absolute inset-0 z-0">
            <div class="absolute inset-0 bg-gradient-to-r from-white via-white/90 to-transparent z-10"></div>
            <img src="images/hero-vegetables.png" alt="" class="w-full h-full object-cover object-center">
        </div>

        <!-- Content Container -->
        <div class="container mx-auto px-4 py-20 md:py-32 relative z-20">
            <div class="flex flex-col md:flex-row items-center">
                <!-- Hero Content -->
                <div class="w-full md:w-1/2 text-center md:text-left">
                    <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold leading-tight mb-6">
                        Organic Food Is<br>Good For Health
                    </h1>
                    <p class="text-gray-600 text-lg mb-8 max-w-xl mx-auto md:mx-0">
                        Experience the finest selection of organic produce, delivered fresh to your doorstep.
                    </p>
                    <div class="flex flex-col sm:flex-row justify-center md:justify-start space-y-4 sm:space-y-0 sm:space-x-4">
                        <a href="#products" class="bg-green-500 text-white px-10 py-4 rounded-full hover:bg-green-600 transition-colors transform hover:-translate-y-1 hover:shadow-lg duration-300 flex items-center justify-center">
                            Products
                            <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                        <a href="#our-services" class="bg-orange-500 text-white px-10 py-4 rounded-full hover:bg-orange-600 transition-colors transform hover:-translate-y-1 hover:shadow-lg duration-300 flex items-center justify-center scroll-smooth">
                            Services
                            <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Best Organic Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row items-center gap-12">
                <!-- Image Section -->
                <div class="w-full md:w-1/2">
                    <div class="relative rounded-lg overflow-hidden shadow-xl">
                        <img src="images/farmer.jpg" alt="Organic Farmer" class="w-full h-auto transform hover:scale-105 transition-transform duration-500">
                    </div>
                </div>

                <!-- Content Section -->
                <div class="w-full md:w-1/2">
                    <h2 class="text-4xl md:text-5xl font-bold mb-6">
                        Best Organic Fruits And Vegetables
                    </h2>
                    <p class="text-gray-600 mb-8">
                        Tempor erat elitr rebum at clita. Diam dolor diam ipsum sit. Aliqu diam amet diam et eos. Clita erat ipsum et lorem et sit, sed stet lorem sit clita duo justo magna dolore erat amet
                    </p>

                    <!-- Features List -->
                    <div class="space-y-4 mb-8">
                        <div class="flex items-center space-x-3">
                            <div class="flex-shrink-0">
                                <i class="fas fa-check text-green-500 bg-green-100 p-2 rounded-full"></i>
                            </div>
                            <p class="text-gray-600">Tempor erat elitr rebum at clita</p>
                        </div>
                        <div class="flex items-center space-x-3">
                            <div class="flex-shrink-0">
                                <i class="fas fa-check text-green-500 bg-green-100 p-2 rounded-full"></i>
                            </div>
                            <p class="text-gray-600">Aliqu diam amet diam et eos</p>
                        </div>
                        <div class="flex items-center space-x-3">
                            <div class="flex-shrink-0">
                                <i class="fas fa-check text-green-500 bg-green-100 p-2 rounded-full"></i>
                            </div>
                            <p class="text-gray-600">Clita duo justo magna dolore erat amet</p>
                        </div>
                    </div>

                    <!-- Read More Button -->
                    <a href="#" class="inline-flex items-center bg-green-500 text-white px-8 py-3 rounded-full hover:bg-green-600 transition-colors transform hover:-translate-y-1 hover:shadow-lg duration-300">
                        Read More
                        <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Products Section -->
    <section id="products" class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <!-- Section Header -->
            <div class="text-center mb-12">
                    <h2 class="text-4xl font-bold mb-4">Our Products</h2>
                <p class="text-gray-600">Fresh & Organic Products For Your Health</p>
            </div>

            <!-- Category Buttons -->
            <div class="flex flex-wrap justify-center gap-4 mb-12">
                <button class="category-btn px-6 py-2 rounded-full bg-green-500 text-white hover:bg-green-600 transition-colors" data-category="all">
                        All Products
                    </button>
                    <button class="category-btn px-6 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-green-500 hover:text-white transition-colors" data-category="vegetables">
                        Vegetables
                    </button>
                    <button class="category-btn px-6 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-green-500 hover:text-white transition-colors" data-category="fruits">
                        Fruits
                    </button>
                    <button class="category-btn px-6 py-2 rounded-full bg-gray-200 text-gray-700 hover:bg-green-500 hover:text-white transition-colors" data-category="meat">
                        Meat
                    </button>
            </div>

            <!-- Products Grid -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- Product Card 1 -->
                <div data-aos="zoom-in" data-aos-delay="100" class="product-card bg-white rounded-lg shadow-md overflow-hidden" data-category="vegetables" data-product-id="1">
                    <div class="relative">
                        <img src="images/tomatoes.jpg" alt="Fresh Tomatoes" class="w-full h-64 object-cover">
                        <span class="absolute top-4 right-4 bg-green-500 text-white px-2 py-1 rounded-full text-sm">New</span>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">Fresh Tomatoes</h3>
                        <div class="flex items-center mb-4">
                            <span class="text-green-500 text-xl font-bold">$4.99</span>
                            <span class="text-gray-400 line-through ml-2">$6.99</span>
                        </div>
                        <div class="flex space-x-2">
                            <button class="flex-1 bg-green-500 text-white py-2 rounded-full hover:bg-green-600 transition-colors add-to-cart-btn">
                                Add to Cart
                            </button>
                            <button class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center hover:bg-gray-300 transition-colors view-product-btn">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Product Card 2 -->
                <div data-aos="zoom-in" data-aos-delay="200" class="product-card bg-white rounded-lg shadow-md overflow-hidden" data-category="fruits" data-product-id="2">
                    <div class="relative">
                        <img src="images/tomatoes.jpg" alt="Fresh Apples" class="w-full h-64 object-cover">
                        <span class="absolute top-4 right-4 bg-orange-500 text-white px-2 py-1 rounded-full text-sm">-15%</span>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">Fresh Apples</h3>
                        <div class="flex items-center mb-4">
                            <span class="text-green-500 text-xl font-bold">$3.99</span>
                            <span class="text-gray-400 line-through ml-2">$4.99</span>
                        </div>
                        <div class="flex space-x-2">
                            <button class="flex-1 bg-green-500 text-white py-2 rounded-full hover:bg-green-600 transition-colors add-to-cart-btn">
                                Add to Cart
                            </button>
                            <button class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center hover:bg-gray-300 transition-colors view-product-btn">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Product Card 3 -->
                <div data-aos="zoom-in" data-aos-delay="300" class="product-card bg-white rounded-lg shadow-md overflow-hidden" data-category="meat" data-product-id="3">
                    <div class="relative">
                        <img src="images/tomatoes.jpg" alt="Fresh Chicken" class="w-full h-64 object-cover">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">Fresh Chicken</h3>
                        <div class="flex items-center mb-4">
                            <span class="text-green-500 text-xl font-bold">$9.99</span>
                            <span class="text-gray-400 line-through ml-2">$12.99</span>
                        </div>
                        <div class="flex space-x-2">
                            <button class="flex-1 bg-green-500 text-white py-2 rounded-full hover:bg-green-600 transition-colors add-to-cart-btn">
                                Add to Cart
                            </button>
                            <button class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center hover:bg-gray-300 transition-colors view-product-btn">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Product Card 4 -->
                <div data-aos="zoom-in" data-aos-delay="400" class="product-card bg-white rounded-lg shadow-md overflow-hidden" data-category="vegetables" data-product-id="4">
                    <div class="relative">
                        <img src="images/tomatoes.jpg" alt="Fresh Carrots" class="w-full h-64 object-cover">
                        <span class="absolute top-4 right-4 bg-green-500 text-white px-2 py-1 rounded-full text-sm">New</span>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">Fresh Carrots</h3>
                        <div class="flex items-center mb-4">
                            <span class="text-green-500 text-xl font-bold">$2.99</span>
                            <span class="text-gray-400 line-through ml-2">$3.99</span>
                        </div>
                        <div class="flex space-x-2">
                            <button class="flex-1 bg-green-500 text-white py-2 rounded-full hover:bg-green-600 transition-colors add-to-cart-btn">
                                Add to Cart
                            </button>
                            <button class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center hover:bg-gray-300 transition-colors view-product-btn">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- View More Products Button -->
            <div class="text-center mt-12">
                <a href="products.html" class="inline-flex items-center px-8 py-3 bg-green-500 text-white rounded-full hover:bg-green-600 transition-colors group">
                    View More Products
                    <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- Visit Our Firm Section -->
    <section class="bg-green-500 py-20">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <!-- Content -->
                <div class="w-full md:w-2/3 text-white mb-8 md:mb-0">
                    <h2 class="text-4xl md:text-5xl font-bold mb-6">Visit Our Firm</h2>
                    <p class="text-white/90 text-lg max-w-2xl">
                        Tempor erat elitr rebum at clita. Diam dolor diam ipsum sit. Aliqu diam amet diam et eos. Clita erat ipsum et lorem et sit, sed stet lorem sit clita duo justo magna dolore erat amet. Diam dolor diam ipsum sit. Aliqu diam amet diam et eos.
                    </p>
                </div>

                <!-- Button -->
                <div class="w-full md:w-auto">
                    <a href="#" class="inline-block bg-orange-500 text-white px-8 py-4 rounded-full hover:bg-orange-600 transition-colors transform hover:-translate-y-1 hover:shadow-lg duration-300">
                        Visit Now
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Customer Reviews Section -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <!-- Section Header -->
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">Customer Reviews</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">
                    What our happy customers say about us
                </p>
            </div>

            <!-- Reviews Slider Container -->
            <div class="relative max-w-6xl mx-auto px-4">
                <!-- Reviews Wrapper -->
                <div class="overflow-hidden">
                    <div id="reviewsContainer" class="flex transition-transform duration-300 ease-in-out">
                        <!-- Review Card 1 -->
                        <div class="w-full md:w-1/2 lg:w-1/3 flex-shrink-0 px-4">
                            <div class="bg-white rounded-xl shadow-lg p-6 md:p-8 h-full transform hover:-translate-y-1 transition-transform duration-300">
                                <div class="flex items-center mb-6">
                                    <img src="images/tomatoes.jpg" alt="Customer" class="w-16 h-16 rounded-full object-cover border-4 border-green-50">
                                    <div class="ml-4">
                                        <h4 class="text-xl font-semibold text-gray-800">John Doe</h4>
                                        <div class="flex items-center mt-1">
                                            <div class="flex text-yellow-400">
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                            </div>
                                            <span class="text-gray-600 text-sm ml-2">(5.0)</span>
                                        </div>
                                    </div>
                                </div>
                                <p class="text-gray-600 leading-relaxed">
                                    "The quality of organic produce is amazing. I love the freshness and taste of everything I've ordered. The delivery is always on time, and the staff is very professional."
                                </p>
                                <div class="mt-6 flex items-center text-green-500">
                                    <i class="fas fa-quote-right text-3xl opacity-20"></i>
                                </div>
                            </div>
                        </div>

                        <!-- Review Card 2 -->
                        <div class="w-full md:w-1/2 lg:w-1/3 flex-shrink-0 px-4">
                            <div class="bg-white rounded-xl shadow-lg p-6 md:p-8 h-full transform hover:-translate-y-1 transition-transform duration-300">
                                <div class="flex items-center mb-6">
                                    <img src="images/tomatoes.jpg" alt="Customer" class="w-16 h-16 rounded-full object-cover border-4 border-green-50">
                                    <div class="ml-4">
                                        <h4 class="text-xl font-semibold text-gray-800">Sarah Johnson</h4>
                                        <div class="flex items-center mt-1">
                                            <div class="flex text-yellow-400">
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star-half-alt"></i>
                                            </div>
                                            <span class="text-gray-600 text-sm ml-2">(4.5)</span>
                                        </div>
                                    </div>
                                </div>
                                <p class="text-gray-600 leading-relaxed">
                                    "Great selection of organic products! The website is easy to navigate, and the checkout process is smooth. Will definitely be ordering again."
                                </p>
                                <div class="mt-6 flex items-center text-green-500">
                                    <i class="fas fa-quote-right text-3xl opacity-20"></i>
                                </div>
                            </div>
                        </div>

                        <!-- Review Card 3 -->
                        <div class="w-full md:w-1/2 lg:w-1/3 flex-shrink-0 px-4">
                            <div class="bg-white rounded-xl shadow-lg p-6 md:p-8 h-full transform hover:-translate-y-1 transition-transform duration-300">
                                <div class="flex items-center mb-6">
                                    <img src="images/tomatoes.jpg" alt="Customer" class="w-16 h-16 rounded-full object-cover border-4 border-green-50">
                                    <div class="ml-4">
                                        <h4 class="text-xl font-semibold text-gray-800">Mike Wilson</h4>
                                        <div class="flex items-center mt-1">
                                            <div class="flex text-yellow-400">
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                            </div>
                                            <span class="text-gray-600 text-sm ml-2">(5.0)</span>
                                        </div>
                                    </div>
                                </div>
                                <p class="text-gray-600 leading-relaxed">
                                    "Exceptional customer service! They went above and beyond to help me with my special dietary requirements. The products are always fresh and well-packaged."
                                </p>
                                <div class="mt-6 flex items-center text-green-500">
                                    <i class="fas fa-quote-right text-3xl opacity-20"></i>
                                </div>
                            </div>
                        </div>

                        <!-- Review Card 4 -->
                        <div class="w-full md:w-1/2 lg:w-1/3 flex-shrink-0 px-4">
                            <div class="bg-white rounded-xl shadow-lg p-6 md:p-8 h-full transform hover:-translate-y-1 transition-transform duration-300">
                                <div class="flex items-center mb-6">
                                    <img src="images/tomatoes.jpg" alt="Customer" class="w-16 h-16 rounded-full object-cover border-4 border-green-50">
                                    <div class="ml-4">
                                        <h4 class="text-xl font-semibold text-gray-800">Emily Parker</h4>
                                        <div class="flex items-center mt-1">
                                            <div class="flex text-yellow-400">
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                            </div>
                                            <span class="text-gray-600 text-sm ml-2">(5.0)</span>
                                        </div>
                                    </div>
                                </div>
                                <p class="text-gray-600 leading-relaxed">
                                    "The organic selection is amazing! I love how they source local produce. The mobile app makes ordering so convenient, and the delivery is always prompt."
                                </p>
                                <div class="mt-6 flex items-center text-green-500">
                                    <i class="fas fa-quote-right text-3xl opacity-20"></i>
                                </div>
                            </div>
                        </div>

                        <!-- Review Card 5 -->
                        <div class="w-full md:w-1/2 lg:w-1/3 flex-shrink-0 px-4">
                            <div class="bg-white rounded-xl shadow-lg p-6 md:p-8 h-full transform hover:-translate-y-1 transition-transform duration-300">
                                <div class="flex items-center mb-6">
                                    <img src="images/tomatoes.jpg" alt="Customer" class="w-16 h-16 rounded-full object-cover border-4 border-green-50">
                                    <div class="ml-4">
                                        <h4 class="text-xl font-semibold text-gray-800">David Chen</h4>
                                        <div class="flex items-center mt-1">
                                            <div class="flex text-yellow-400">
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star-half-alt"></i>
                                            </div>
                                            <span class="text-gray-600 text-sm ml-2">(4.5)</span>
                                        </div>
                                    </div>
                                </div>
                                <p class="text-gray-600 leading-relaxed">
                                    "Their weekly organic box subscription has transformed how we eat. The variety is great and it's helped us discover new vegetables we'd never tried before!"
                                </p>
                                <div class="mt-6 flex items-center text-green-500">
                                    <i class="fas fa-quote-right text-3xl opacity-20"></i>
                                </div>
                            </div>
                        </div>

                        <!-- Review Card 6 -->
                        <div class="w-full md:w-1/2 lg:w-1/3 flex-shrink-0 px-4">
                            <div class="bg-white rounded-xl shadow-lg p-6 md:p-8 h-full transform hover:-translate-y-1 transition-transform duration-300">
                                <div class="flex items-center mb-6">
                                    <img src="images/tomatoes.jpg" alt="Customer" class="w-16 h-16 rounded-full object-cover border-4 border-green-50">
                                    <div class="ml-4">
                                        <h4 class="text-xl font-semibold text-gray-800">Sophie Turner</h4>
                                        <div class="flex items-center mt-1">
                                            <div class="flex text-yellow-400">
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                            </div>
                                            <span class="text-gray-600 text-sm ml-2">(5.0)</span>
                                        </div>
                                    </div>
                                </div>
                                <p class="text-gray-600 leading-relaxed">
                                    "The quality of their organic products is unmatched. I appreciate their commitment to sustainable packaging and the seasonal recipe suggestions!"
                                </p>
                                <div class="mt-6 flex items-center text-green-500">
                                    <i class="fas fa-quote-right text-3xl opacity-20"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Navigation Buttons - Updated styles -->
                <button id="prevReview" class="absolute top-1/2 -left-4 md:-left-8 transform -translate-y-1/2 bg-white p-3 rounded-full shadow-lg text-gray-800 hover:text-green-500 hover:scale-110 transition-all duration-300 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed">
                    <i class="fas fa-chevron-left text-xl"></i>
                </button>
                <button id="nextReview" class="absolute top-1/2 -right-4 md:-right-8 transform -translate-y-1/2 bg-white p-3 rounded-full shadow-lg text-gray-800 hover:text-green-500 hover:scale-110 transition-all duration-300 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed">
                    <i class="fas fa-chevron-right text-xl"></i>
                </button>

                <!-- Dots Navigation -->
                <div class="flex justify-center items-center space-x-3 mt-8">
                    <button class="w-3 h-3 rounded-full bg-green-500 review-dot transition-all duration-300 hover:scale-125"></button>
                    <button class="w-3 h-3 rounded-full bg-gray-300 review-dot transition-all duration-300 hover:scale-125"></button>
                    <button class="w-3 h-3 rounded-full bg-gray-300 review-dot transition-all duration-300 hover:scale-125"></button>
                    <button class="w-3 h-3 rounded-full bg-gray-300 review-dot transition-all duration-300 hover:scale-125"></button>
                    <button class="w-3 h-3 rounded-full bg-gray-300 review-dot transition-all duration-300 hover:scale-125"></button>
                    <button class="w-3 h-3 rounded-full bg-gray-300 review-dot transition-all duration-300 hover:scale-125"></button>
                </div>
            </div>
        </div>
    </section>

    <!-- Our Services Section -->
    <section id="our-services" class="py-16 bg-white scroll-mt-20">
        <div class="container mx-auto px-4">
            <!-- Section Header -->
            <div class="text-center mb-12">
                <span class="text-green-500 text-sm font-semibold tracking-wider uppercase">What We Offer</span>
                <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4">Our Services</h2>
                <div class="w-24 h-1 bg-orange-500 mx-auto"></div>
            </div>

            <!-- Services Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Service Card 1 -->
                <div class="group bg-white rounded-xl shadow-lg p-8 hover:bg-green-500 transition-all duration-300 transform hover:-translate-y-2">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6 group-hover:bg-white transition-colors">
                        <i class="fas fa-truck text-2xl text-green-500"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-4 group-hover:text-white">Free Delivery</h3>
                    <p class="text-gray-600 group-hover:text-white/90">
                        Enjoy free delivery on all orders above $50. We ensure quick and reliable delivery to your doorstep.
                    </p>
                </div>

                <!-- Service Card 2 -->
                <div class="group bg-white rounded-xl shadow-lg p-8 hover:bg-green-500 transition-all duration-300 transform hover:-translate-y-2">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6 group-hover:bg-white transition-colors">
                        <i class="fas fa-leaf text-2xl text-green-500"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-4 group-hover:text-white">100% Organic</h3>
                    <p class="text-gray-600 group-hover:text-white/90">
                        All our products are certified organic, sourced from trusted local farmers and producers.
                    </p>
                </div>

                <!-- Service Card 3 -->
                <div class="group bg-white rounded-xl shadow-lg p-8 hover:bg-green-500 transition-all duration-300 transform hover:-translate-y-2">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6 group-hover:bg-white transition-colors">
                        <i class="fas fa-headset text-2xl text-green-500"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-4 group-hover:text-white">24/7 Support</h3>
                    <p class="text-gray-600 group-hover:text-white/90">
                        Our customer support team is available round the clock to assist you with any queries.
                    </p>
                </div>

                <!-- Service Card 4 -->
                <div class="group bg-white rounded-xl shadow-lg p-8 hover:bg-green-500 transition-all duration-300 transform hover:-translate-y-2">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6 group-hover:bg-white transition-colors">
                        <i class="fas fa-undo text-2xl text-green-500"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-4 group-hover:text-white">Easy Returns</h3>
                    <p class="text-gray-600 group-hover:text-white/90">
                        Not satisfied? Return your products within 30 days for a full refund, no questions asked.
                    </p>
                </div>

                <!-- Service Card 5 -->
                <div class="group bg-white rounded-xl shadow-lg p-8 hover:bg-green-500 transition-all duration-300 transform hover:-translate-y-2">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6 group-hover:bg-white transition-colors">
                        <i class="fas fa-shield-alt text-2xl text-green-500"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-4 group-hover:text-white">Secure Payment</h3>
                    <p class="text-gray-600 group-hover:text-white/90">
                        Shop with confidence using our secure payment gateway with multiple payment options.
                    </p>
                </div>

                <!-- Service Card 6 -->
                <div class="group bg-white rounded-xl shadow-lg p-8 hover:bg-green-500 transition-all duration-300 transform hover:-translate-y-2">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6 group-hover:bg-white transition-colors">
                        <i class="fas fa-gift text-2xl text-green-500"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-4 group-hover:text-white">Special Offers</h3>
                    <p class="text-gray-600 group-hover:text-white/90">
                        Regular discounts and special offers on seasonal products and bulk purchases.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Latest Blog Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <!-- Section Header -->
            <div class="text-center mb-12">
                <div class="w-24 h-1 bg-green-500 mx-auto mb-4"></div>
                <h2 class="text-4xl font-bold mb-4">Latest Blog</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">
                    Tempor ut dolore lorem kasd vero ipsum sit eirmod sit. Ipsum diam justo sed rebum vero dolor duo.
                </p>
            </div>

            <!-- Blog Grid -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Blog Card 1 -->
                <div class="bg-white rounded-lg shadow-md group hover:shadow-xl transition-all duration-300">
                    <div class="relative overflow-hidden">
                        <img src="images/blog.jpg" alt="Organic Farming" class="w-full h-64 object-cover transform group-hover:scale-105 transition-transform duration-500">
                        <div class="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/70 to-transparent">
                            <div class="flex items-center text-white text-sm">
                                <div class="flex items-center">
                                    <i class="far fa-user mr-2"></i>
                                    <span>Admin</span>
                                </div>
                                <div class="mx-4">|</div>
                                <div class="flex items-center">
                                    <i class="far fa-calendar mr-2"></i>
                                    <span>01 Jan, 2045</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-4 group-hover:text-green-500 transition-colors">
                            How to cultivate organic fruits and vegetables in own firm
                        </h3>
                        <p class="text-gray-600 mb-4">
                            Tempor ut dolore lorem kasd vero ipsum sit eirmod sit. Ipsum diam justo sed rebum vero dolor duo.
                        </p>
                        <a href="#" class="inline-flex items-center text-green-500 hover:text-green-600 transition-colors">
                            Read More
                            <i class="fas fa-arrow-right ml-2 group-hover:translate-x-2 transition-transform"></i>
                        </a>
                    </div>
                </div>

                <!-- Blog Card 2 -->
                <div class="bg-white rounded-lg shadow-md group hover:shadow-xl transition-all duration-300">
                    <div class="relative overflow-hidden">
                        <img src="images/blog.jpg" alt="Organic Farming" class="w-full h-64 object-cover transform group-hover:scale-105 transition-transform duration-500">
                        <div class="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/70 to-transparent">
                            <div class="flex items-center text-white text-sm">
                                <div class="flex items-center">
                                    <i class="far fa-user mr-2"></i>
                                    <span>Admin</span>
                                </div>
                                <div class="mx-4">|</div>
                                <div class="flex items-center">
                                    <i class="far fa-calendar mr-2"></i>
                                    <span>01 Jan, 2045</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-4 group-hover:text-green-500 transition-colors">
                            How to cultivate organic fruits and vegetables in own firm
                        </h3>
                        <p class="text-gray-600 mb-4">
                            Tempor ut dolore lorem kasd vero ipsum sit eirmod sit. Ipsum diam justo sed rebum vero dolor duo.
                        </p>
                        <a href="#" class="inline-flex items-center text-green-500 hover:text-green-600 transition-colors">
                            Read More
                            <i class="fas fa-arrow-right ml-2 group-hover:translate-x-2 transition-transform"></i>
                        </a>
                    </div>
                </div>

                <!-- Blog Card 3 -->
                <div class="bg-white rounded-lg shadow-md group hover:shadow-xl transition-all duration-300">
                    <div class="relative overflow-hidden">
                        <img src="images/blog.jpg" alt="Organic Farming" class="w-full h-64 object-cover transform group-hover:scale-105 transition-transform duration-500">
                        <div class="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/70 to-transparent">
                            <div class="flex items-center text-white text-sm">
                                <div class="flex items-center">
                                    <i class="far fa-user mr-2"></i>
                                    <span>Admin</span>
                                </div>
                                <div class="mx-4">|</div>
                                <div class="flex items-center">
                                    <i class="far fa-calendar mr-2"></i>
                                    <span>01 Jan, 2045</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-4 group-hover:text-green-500 transition-colors">
                            How to cultivate organic fruits and vegetables in own firm
                        </h3>
                        <p class="text-gray-600 mb-4">
                            Tempor ut dolore lorem kasd vero ipsum sit eirmod sit. Ipsum diam justo sed rebum vero dolor duo.
                        </p>
                        <a href="#" class="inline-flex items-center text-green-500 hover:text-green-600 transition-colors">
                            Read More
                            <i class="fas fa-arrow-right ml-2 group-hover:translate-x-2 transition-transform"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <span class="text-green-500 text-sm font-semibold tracking-wider uppercase">Get In Touch</span>
                <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4">Contact Us</h2>
                <div class="w-24 h-1 bg-orange-500 mx-auto"></div>
            </div>

            <div class="flex flex-col lg:flex-row gap-12">
                <!-- Contact Information -->
                <div class="w-full lg:w-1/3 space-y-8">
                    <!-- Contact Cards -->
                    <div class="bg-white rounded-xl shadow-lg p-6 transition-transform hover:-translate-y-1">
                        <div class="flex items-center space-x-4">
                            <div class="w-12 h-12 bg-green-50 rounded-full flex items-center justify-center">
                                <i class="fas fa-map-marker-alt text-xl text-green-500"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold mb-1">Our Location</h3>
                                <p class="text-gray-600">123 Street, New York, USA</p>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl shadow-lg p-6 transition-transform hover:-translate-y-1">
                        <div class="flex items-center space-x-4">
                            <div class="w-12 h-12 bg-green-50 rounded-full flex items-center justify-center">
                                <i class="fas fa-phone-alt text-xl text-green-500"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold mb-1">Call Us</h3>
                                <p class="text-gray-600">+012 345 67890</p>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-xl shadow-lg p-6 transition-transform hover:-translate-y-1">
                        <div class="flex items-center space-x-4">
                            <div class="w-12 h-12 bg-green-50 rounded-full flex items-center justify-center">
                                <i class="fas fa-envelope text-xl text-green-500"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold mb-1">Email Us</h3>
                                <p class="text-gray-600">info@example.com</p>
                            </div>
                        </div>
                    </div>

                    <!-- Social Media Links -->
                    <div class="bg-white rounded-xl shadow-lg p-6">
                        <h3 class="text-lg font-semibold mb-4">Follow Us</h3>
                        <div class="flex space-x-4">
                            <a href="#" class="w-10 h-10 bg-blue-500 text-white rounded-full flex items-center justify-center hover:bg-blue-600 transition-colors">
                                <i class="fab fa-facebook-f"></i>
                            </a>
                            <a href="#" class="w-10 h-10 bg-sky-500 text-white rounded-full flex items-center justify-center hover:bg-sky-600 transition-colors">
                                <i class="fab fa-twitter"></i>
                            </a>
                            <a href="#" class="w-10 h-10 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition-colors">
                                <i class="fab fa-youtube"></i>
                            </a>
                            <a href="#" class="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center hover:bg-blue-700 transition-colors">
                                <i class="fab fa-linkedin-in"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Contact Form -->
                <div class="w-full lg:w-2/3">
                    <div class="bg-white rounded-xl shadow-lg p-8">
                        <form id="contactForm" class="space-y-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <!-- Name Input -->
                                <div class="relative">
                                    <label class="text-gray-600 mb-2 block">Your Name</label>
                                    <div class="relative">
                                        <input type="text" 
                                            required
                                            class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-green-500 transition-colors pl-10" 
                                            placeholder="John Doe">
                                        <i class="fas fa-user absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                                    </div>
                                </div>

                                <!-- Email Input -->
                                <div class="relative">
                                    <label class="text-gray-600 mb-2 block">Your Email</label>
                                    <div class="relative">
                                        <input type="email" 
                                            required
                                            class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-green-500 transition-colors 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>

                            <!-- Subject Input -->
                            <div class="relative">
                                <label class="text-gray-600 mb-2 block">Subject</label>
                                <div class="relative">
                                    <input type="text" 
                                        required
                                        class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-green-500 transition-colors pl-10" 
                                        placeholder="How can we help?">
                                    <i class="fas fa-tag absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                                </div>
                            </div>

                            <!-- Message Input -->
                            <div class="relative">
                                <label class="text-gray-600 mb-2 block">Message</label>
                                <div class="relative">
                                    <textarea 
                                        required
                                        rows="5" 
                                        class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-green-500 transition-colors pl-10" 
                                        placeholder="Write your message here..."></textarea>
                                    <i class="fas fa-pencil-alt absolute left-3 top-6 text-gray-400"></i>
                                </div>
                            </div>

                            <!-- Submit Button -->
                            <button type="submit" 
                                class="w-full bg-green-500 text-white py-3 rounded-lg hover:bg-green-600 transition-colors flex items-center justify-center space-x-2 group">
                                <span>Send Message</span>
                                <i class="fas fa-paper-plane transition-transform group-hover:translate-x-1"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer Section -->
    <footer class="bg-gray-900 text-gray-300">
        <div class="container mx-auto px-4 pt-16 pb-8">
            <!-- Footer Grid -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
                <!-- About Section -->
                <div class="space-y-4">
                    <h3 class="text-2xl font-bold">
                        <span class="text-green-500">F</span><span class="text-orange-500">oody</span>
                    </h3>
                    <p class="text-gray-400">
                        Diam dolor diam ipsum sit. Aliqu diam amet diam et eos. Clita erat ipsum et lorem et sit, sed stet lorem sit clita duo justo magna dolore erat amet
                    </p>
                    <div class="flex space-x-3">
                        <a href="#" class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center hover:bg-green-600 transition-colors">
                            <i class="fab fa-twitter text-white"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center hover:bg-green-600 transition-colors">
                            <i class="fab fa-facebook-f text-white"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center hover:bg-green-600 transition-colors">
                            <i class="fab fa-youtube text-white"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center hover:bg-green-600 transition-colors">
                            <i class="fab fa-linkedin-in text-white"></i>
                        </a>
                    </div>
                </div>

                <!-- Address Section -->
                <div class="space-y-4">
                    <h4 class="text-xl font-semibold mb-3">Address</h4>
                    <p class="flex items-center">
                        <i class="fas fa-map-marker-alt text-green-500 mr-3"></i>
                        123 Street, New York, USA
                    </p>
                    <p class="flex items-center">
                        <i class="fas fa-phone-alt text-green-500 mr-3"></i>
                        +012 345 67890
                    </p>
                    <p class="flex items-center">
                        <i class="fas fa-envelope text-green-500 mr-3"></i>
                        info@example.com
                    </p>
                </div>

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

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

            <!-- Copyright -->
            <div class="border-t border-gray-800 pt-8">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p>© <a href="#" class="text-green-500">CodeCrafter</a>. All Right Reserved.</p>
                    <p class="mt-2 md:mt-0">
                        Designed By <a href="#" class="text-green-500">MASHRUF</a>
                    </p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Scroll to Top Button -->
    <button id="scrollTopBtn" class="fixed bottom-8 right-8 bg-green-500 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg cursor-pointer hover:bg-green-600 transition-all duration-300 opacity-0 invisible">
        <i class="fas fa-arrow-up text-xl"></i>
    </button>

    <!-- JavaScript -->
    <script src="js/main.js"></script>
    <script src="js/cart.js"></script>
    <script src="js/modal.js"></script>
    <script src="js/category.js"></script>
    <script src="js/contact.js"></script>
    <script src="js/cursor.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            new CustomCursor();
        });
    </script>

    <!-- Product Details Modal -->
    <div id="productModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl mx-4 relative overflow-y-auto max-h-[90vh]">
                <!-- Close Button -->
                <button id="closeModal" class="absolute top-2 right-2 p-2 bg-white rounded-full shadow-lg text-gray-600 hover:text-red-500 hover:bg-red-50 transition-all duration-300 transform hover:scale-110 z-10">
                    <i class="fas fa-times text-xl"></i>
                </button>
                
                <!-- Modal Content -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 p-4 md:p-8">
                    <!-- Product Image -->
                    <div class="relative">
                        <img id="modalProductImage" src="" alt="Product" 
                            class="w-full h-48 sm:h-64 md:h-96 object-cover rounded-lg">
                        <span class="absolute top-4 left-4 bg-orange-500 text-white text-sm px-2 py-1 rounded-full">
                            New
                        </span>
                    </div>
                    
                    <!-- Product Details -->
                    <div class="space-y-4">
                        <h2 id="modalProductName" class="text-2xl md:text-3xl font-bold"></h2>
                        <div class="flex items-center space-x-2">
                            <span id="modalProductPrice" class="text-xl md:text-2xl font-bold text-green-500"></span>
                            <span id="modalProductOldPrice" class="text-base md:text-lg text-gray-400 line-through"></span>
                        </div>
                        
                        <p class="text-gray-600 text-sm md:text-base">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                        
                        <div class="space-y-4">
                            <!-- Quantity -->
                            <div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
                                <span class="text-gray-600">Quantity:</span>
                                <div class="flex items-center border rounded max-w-[150px]">
                                    <button class="px-3 py-1 hover:bg-gray-100" id="decreaseQuantity">-</button>
                                    <span class="px-3 py-1 border-x min-w-[40px] text-center" id="modalQuantity">1</span>
                                    <button class="px-3 py-1 hover:bg-gray-100" id="increaseQuantity">+</button>
                                </div>
                            </div>
                            
                            <!-- Add to Cart Button -->
                            <button id="modalAddToCart" class="w-full bg-green-500 text-white py-3 rounded-full hover:bg-green-600 transition-colors">
                                Add to Cart
                            </button>
                        </div>
                        
                        <!-- Additional Info -->
                        <div class="border-t pt-4 mt-6">
                            <div class="grid grid-cols-1 sm:grid-cols-3 gap-2 text-sm text-gray-600">
                                <span class="flex items-center">
                                    <i class="fas fa-check-circle text-green-500 mr-1"></i>
                                    In Stock
                                </span>
                                <span class="flex items-center">
                                    <i class="fas fa-truck text-green-500 mr-1"></i>
                                    Free Delivery
                                </span>
                                <span class="flex items-center">
                                    <i class="fas fa-undo text-green-500 mr-1"></i>
                                    30 Day Return
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html> 