<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EarthNest Packaging - Eco-Friendly Solutions</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'eco-green': {
                            50: '#f0fdf4',
                            100: '#dcfce7',
                            200: '#bbf7d0',
                            300: '#86efac',
                            400: '#4ade80',
                            500: '#22c55e',
                            600: '#16a34a',
                            700: '#15803d',
                            800: '#166534',
                            900: '#14532d',
                            950: '#052e16',
                        },
                        'kraft': {
                            50: '#fdfcfb',
                            100: '#f9f5f0',
                            200: '#f0e6d8',
                            300: '#e4d4be',
                            400: '#d4bc9a',
                            500: '#c4a57a',
                            600: '#b08d5a',
                            700: '#8b6d44',
                            800: '#6b5436',
                            900: '#4a3a25',
                        },
                        'beige': {
                            50: '#fefdfb',
                            100: '#fdfaf5',
                            200: '#faf6ed',
                            300: '#f5efe3',
                            400: '#ede4d3',
                        }
                    },
                    fontFamily: {
                        'inter': ['Inter', 'sans-serif'],
                        'poppins': ['Poppins', 'sans-serif'],
                    }
                }
            }
        }
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(180deg, #fdfaf5 0%, #f5efe3 100%);
            min-height: 100vh;
        }

        .hero-gradient {
            background: linear-gradient(135deg, #fdfaf5 0%, #f0e6d8 50%, #dcfce7 100%);
        }

        .kraft-texture {
            background-color: #f9f5f0;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23d4bc9a' fill-opacity='0.15'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }

        .product-card {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .product-card:hover {
            transform: translateY(-8px) scale(1.02);
        }

        .product-card:hover .product-image {
            transform: scale(1.05);
        }

        .product-image {
            transition: transform 0.5s ease;
        }

        .eco-badge {
            animation: pulse-soft 2s ease-in-out infinite;
        }

        @keyframes pulse-soft {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.8; }
        }

        .leaf-float {
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(5deg); }
        }

        .btn-primary {
            background: linear-gradient(135deg, #166534 0%, #15803d 100%);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .btn-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s ease;
        }

        .btn-primary:hover::before {
            left: 100%;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px -5px rgba(22, 101, 52, 0.4);
        }

        .stat-counter {
            background: linear-gradient(135deg, #166534, #22c55e);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .trust-badge {
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.8);
        }

        .scroll-indicator {
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
        }

        .nature-pattern {
            position: absolute;
            opacity: 0.05;
            pointer-events: none;
        }

        .gradient-border {
            background: linear-gradient(135deg, #166534, #22c55e, #166534);
            padding: 2px;
            border-radius: 14px;
        }

        .inner-card {
            background: #fdfaf5;
            border-radius: 12px;
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f5efe3;
        }

        ::-webkit-scrollbar-thumb {
            background: #15803d;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #166534;
        }

        .hero-image-container {
            position: relative;
        }

        .hero-image-container::before {
            content: '';
            position: absolute;
            inset: -10px;
            background: linear-gradient(135deg, rgba(22, 101, 52, 0.1), rgba(34, 197, 94, 0.1));
            border-radius: 50%;
            z-index: -1;
            animation: pulse 4s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 0.5; }
            50% { transform: scale(1.05); opacity: 0.8; }
        }

        .feature-icon {
            transition: all 0.3s ease;
        }

        .feature-card:hover .feature-icon {
            transform: scale(1.1) rotate(5deg);
        }

        .price-tag {
            position: relative;
        }

        .price-tag::before {
            content: '';
            position: absolute;
            left: -8px;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 70%;
            background: linear-gradient(180deg, #22c55e, #166534);
            border-radius: 2px;
        }

        .nav-link {
            position: relative;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, #166534, #22c55e);
            transition: width 0.3s ease;
        }

        .nav-link:hover::after {
            width: 100%;
        }

        .mobile-menu {
            transform: translateX(-100%);
            transition: transform 0.3s ease;
        }

        .mobile-menu.active {
            transform: translateX(0);
        }
    </style>
</head>
<body class="font-inter text-kraft-900">
    <!-- Navigation -->
    <nav class="fixed top-0 left-0 right-0 z-50 bg-beige-100/90 backdrop-blur-md border-b border-kraft-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16 md:h-20">
                <!-- Logo -->
                <div class="flex items-center gap-2">
                    <div class="w-10 h-10 md:w-12 md:h-12 bg-eco-green-700 rounded-xl flex items-center justify-center">
                        <svg class="w-6 h-6 md:w-7 md:h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>
                        </svg>
                    </div>
                    <div>
                        <h1 class="font-poppins font-bold text-lg md:text-xl text-eco-green-800">EarthNest</h1>
                        <p class="text-xs text-kraft-600 -mt-1 hidden sm:block">Packaging</p>
                    </div>
                </div>

                <!-- Desktop Navigation -->
                <div class="hidden md:flex items-center gap-8">
                    <a href="#" class="nav-link text-kraft-700 hover:text-eco-green-700 font-medium transition-colors">Products</a>
                    <a href="#" class="nav-link text-kraft-700 hover:text-eco-green-700 font-medium transition-colors">Solutions</a>
                    <a href="#" class="nav-link text-kraft-700 hover:text-eco-green-700 font-medium transition-colors">About Us</a>
                    <a href="#" class="nav-link text-kraft-700 hover:text-eco-green-700 font-medium transition-colors">Contact</a>
                </div>

                <!-- CTA Button -->
                <div class="hidden md:flex items-center gap-4">
                    <button class="text-kraft-700 hover:text-eco-green-700 font-medium transition-colors">
                        Login
                    </button>
                    <button class="btn-primary px-5 py-2.5 text-white font-semibold rounded-xl shadow-lg">
                        Get Quote
                    </button>
                </div>

                <!-- Mobile Menu Button -->
                <button id="mobile-menu-btn" class="md:hidden p-2 rounded-lg hover:bg-kraft-100 transition-colors">
                    <svg class="w-6 h-6 text-kraft-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                    </svg>
                </button>
            </div>
        </div>

        <!-- Mobile Menu -->
        <div id="mobile-menu" class="mobile-menu fixed inset-0 top-16 bg-beige-100 z-40 md:hidden">
            <div class="p-6 flex flex-col gap-4">
                <a href="#" class="text-lg text-kraft-800 hover:text-eco-green-700 font-medium py-3 border-b border-kraft-200">Products</a>
                <a href="#" class="text-lg text-kraft-800 hover:text-eco-green-700 font-medium py-3 border-b border-kraft-200">Solutions</a>
                <a href="#" class="text-lg text-kraft-800 hover:text-eco-green-700 font-medium py-3 border-b border-kraft-200">About Us</a>
                <a href="#" class="text-lg text-kraft-800 hover:text-eco-green-700 font-medium py-3 border-b border-kraft-200">Contact</a>
                <div class="flex flex-col gap-3 mt-4">
                    <button class="w-full py-3 text-kraft-700 font-medium border border-kraft-300 rounded-xl hover:bg-kraft-100 transition-colors">
                        Login
                    </button>
                    <button class="btn-primary w-full py-3 text-white font-semibold rounded-xl">
                        Get Quote
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero-gradient min-h-screen pt-20 md:pt-24 relative overflow-hidden">
        <!-- Nature Pattern Elements -->
        <div class="nature-pattern top-20 left-10 leaf-float">
            <svg class="w-32 h-32 text-eco-green-600" fill="currentColor" viewBox="0 0 24 24">
                <path d="M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 2,11.5 2,13.5C2,15.5 3.75,17.25 3.75,17.25C7,8 17,8 17,8Z"/>
            </svg>
        </div>
        <div class="nature-pattern bottom-40 right-20 leaf-float" style="animation-delay: -2s;">
            <svg class="w-24 h-24 text-eco-green-500" fill="currentColor" viewBox="0 0 24 24">
                <path d="M6.05,8.05C5.65,8.46 5.27,8.88 4.91,9.32C6.89,9.89 8.74,11.27 9.76,13.66C10.46,15.36 10.66,17.46 10.5,19.5L12,20L13.5,19.5C13.36,17.63 13.54,15.73 14.2,14.04C15.2,11.56 17.11,10.03 19.17,9.41C18.78,8.95 18.38,8.5 17.95,8.05C17.53,7.61 17.08,7.2 16.62,6.81C14.92,7.74 12.58,7.84 10.46,6.93C8.97,8 7.37,8.31 6.05,8.05M12,2C8.14,2 4.81,4.15 3.15,7.32C3.36,7.37 3.57,7.43 3.78,7.5C5.08,7.92 6.25,7.68 7.24,7.09C8.89,7.76 10.67,7.76 12.19,7.31C13.16,7.91 14.37,8.18 15.73,7.74C16.17,7.58 16.59,7.39 17,7.17C19.42,7.96 21.27,9.78 22,12.19V12C22,6.47 17.53,2 12,2Z"/>
            </svg>
        </div>
        <div class="nature-pattern top-1/2 left-1/4 leaf-float" style="animation-delay: -4s;">
            <svg class="w-16 h-16 text-kraft-400" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12,3L2,12H5V20H19V12H22L12,3M12,8.75A2.25,2.25 0 0,1 14.25,11A2.25,2.25 0 0,1 12,13.25A2.25,2.25 0 0,1 9.75,11A2.25,2.25 0 0,1 12,8.75Z"/>
            </svg>
        </div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-20">
            <div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
                <!-- Hero Content -->
                <div class="order-2 lg:order-1">
                    <div class="inline-flex items-center gap-2 bg-eco-green-100 text-eco-green-800 px-4 py-2 rounded-full text-sm font-medium mb-6">
                        <span class="w-2 h-2 bg-eco-green-500 rounded-full eco-badge"></span>
                        100% Sustainable Packaging
                    </div>
                    
                    <h1 class="font-poppins text-4xl md:text-5xl lg:text-6xl font-bold text-kraft-900 leading-tight mb-6">
                        Pack Your Products
                        <span class="block text-eco-green-700">With Purpose</span>
                    </h1>
                    
                    <p class="text-lg md:text-xl text-kraft-600 leading-relaxed mb-8 max-w-xl">
                        Premium eco-friendly packaging solutions for Indian D2C brands and small businesses. Make your brand stand out while protecting the planet.
                    </p>

                    <!-- CTA Buttons -->
                    <div class="flex flex-col sm:flex-row gap-4 mb-12">
                        <button class="btn-primary px-8 py-4 text-white font-semibold rounded-xl shadow-xl text-lg flex items-center justify-center gap-2">
                            <span>Explore Products</span>
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                            </svg>
                        </button>
                        <button class="px-8 py-4 bg-white text-eco-green-700 font-semibold rounded-xl shadow-lg border-2 border-eco-green-200 hover:border-eco-green-400 hover:bg-eco-green-50 transition-all text-lg flex items-center justify-center gap-2">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                            </svg>
                            <span>Talk to Expert</span>
                        </button>
                    </div>

                    <!-- Trust Badges -->
                    <div class="flex flex-wrap gap-4">
                        <div class="trust-badge flex items-center gap-2 px-4 py-2 rounded-xl shadow-sm">
                            <svg class="w-5 h-5 text-eco-green-600" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z"/>
                            </svg>
                            <span class="text-sm font-medium text-kraft-700">FSSAI Approved</span>
                        </div>
                        <div class="trust-badge flex items-center gap-2 px-4 py-2 rounded-xl shadow-sm">
                            <svg class="w-5 h-5 text-eco-green-600" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M11,17V16H9V14H13V13H10A1,1 0 0,1 9,12V9A1,1 0 0,1 10,8H11V7H13V8H15V10H11V11H14A1,1 0 0,1 15,12V15A1,1 0 0,1 14,16H13V17H11Z"/>
                            </svg>
                            <span class="text-sm font-medium text-kraft-700">Best Prices</span>
                        </div>
                        <div class="trust-badge flex items-center gap-2 px-4 py-2 rounded-xl shadow-sm">
                            <svg class="w-5 h-5 text-eco-green-600" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M18,18.5A1.5,1.5 0 0,1 16.5,17A1.5,1.5 0 0,1 18,15.5A1.5,1.5 0 0,1 19.5,17A1.5,1.5 0 0,1 18,18.5M19.5,9.5L21.46,12H17V9.5M6,18.5A1.5,1.5 0 0,1 4.5,17A1.5,1.5 0 0,1 6,15.5A1.5,1.5 0 0,1 7.5,17A1.5,1.5 0 0,1 6,18.5M20,8H17V4H3C1.89,4 1,4.89 1,6V17H3A3,3 0 0,0 6,20A3,3 0 0,0 9,17H15A3,3 0 0,0 18,20A3,3 0 0,0 21,17H23V12L20,8Z"/>
                            </svg>
                            <span class="text-sm font-medium text-kraft-700">Pan India Delivery</span>
                        </div>
                    </div>
                </div>

                <!-- Hero Image -->
                <div class="order-1 lg:order-2 flex justify-center">
                    <div class="hero-image-container relative">
                        <div class="w-72 h-72 md:w-96 md:h-96 lg:w-[450px] lg:h-[450px] relative">
                            <!-- Main Product Display -->
                            <div class="absolute inset-0 flex items-center justify-center">
                                <div class="kraft-texture rounded-3xl p-8 shadow-2xl transform rotate-3 hover:rotate-0 transition-transform duration-500">
                                    <div class="w-48 h-48 md:w-64 md:h-64 bg-gradient-to-br from-kraft-200 to-kraft-300 rounded-2xl flex items-center justify-center relative overflow-hidden">
                                        <!-- Package Illustration -->
                                        <svg class="w-32 h-32 md:w-40 md:h-40 text-kraft-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
                                        </svg>
                                        <!-- Eco Badge -->
                                        <div class="absolute top-4 right-4 bg-eco-green-600 text-white text-xs font-bold px-3 py-1 rounded-full">
                                            ECO
                                        </div>
                                        <!-- Leaf decoration -->
                                        <div class="absolute bottom-4 left-4">
                                            <svg class="w-8 h-8 text-eco-green-500" fill="currentColor" viewBox="0 0 24 24">
                                                <path d="M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 2,11.5 2,13.5C2,15.5 3.75,17.25 3.75,17.25C7,8 17,8 17,8Z"/>
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Floating Elements -->
                            <div class="absolute -top-4 -right-4 bg-white p-4 rounded-2xl shadow-xl leaf-float">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 bg-eco-green-100 rounded-full flex items-center justify-center">
                                        <svg class="w-5 h-5 text-eco-green-600" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M12,3L2,12H5V20H19V12H22L12,3M12,8.75A2.25,2.25 0 0,1 14.25,11A2.25,2.25 0 0,1 12,13.25A2.25,2.25 0 0,1 9.75,11A2.25,2.25 0 0,1 12,8.75Z"/>
                                        </svg>
                                    </div>
                                    <div>
                                        <p class="text-xs text-kraft-500">Carbon Neutral</p>
                                        <p class="text-sm font-bold text-eco-green-700">100%</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="absolute -bottom-4 -left-4 bg-white p-4 rounded-2xl shadow-xl leaf-float" style="animation-delay: -3s;">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 bg-kraft-200 rounded-full flex items-center justify-center">
                                        <svg class="w-5 h-5 text-kraft-600" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M10,17L5,12L6.41,10.59L10,14.17L17.59,6.58L19,8L10,17Z"/>
                                        </svg>
                                    </div>
                                    <div>
                                        <p class="text-xs text-kraft-500">Brands Trust Us</p>
                                        <p class="text-sm font-bold text-kraft-800">500+</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Scroll Indicator -->
        <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 scroll-indicator">
            <div class="flex flex-col items-center gap-2">
                <span class="text-xs text-kraft-500 font-medium">Scroll to explore</span>
                <svg class="w-6 h-6 text-eco-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
                </svg>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
                <div class="text-center">
                    <p class="stat-counter font-poppins text-4xl md:text-5xl font-bold mb-2" data-target="500">0</p>
                    <p class="text-kraft-600 font-medium">Happy Brands</p>
                </div>
                <div class="text-center">
                    <p class="stat-counter font-poppins text-4xl md:text-5xl font-bold mb-2" data-target="50">0</p>
                    <p class="text-kraft-600 font-medium">Product Types</p>
                </div>
                <div class="text-center">
                    <p class="stat-counter font-poppins text-4xl md:text-5xl font-bold mb-2" data-target="10">0</p>
                    <p class="text-kraft-600 font-medium">Lakh+ Units Sold</p>
                </div>
                <div class="text-center">
                    <p class="stat-counter font-poppins text-4xl md:text-5xl font-bold mb-2" data-target="100">0</p>
                    <p class="text-kraft-600 font-medium">% Eco-Friendly</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Product Showcase Section -->
    <section class="py-16 md:py-24 bg-beige-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Section Header -->
            <div class="text-center mb-12 md:mb-16">
                <div class="inline-flex items-center gap-2 bg-eco-green-100 text-eco-green-800 px-4 py-2 rounded-full text-sm font-medium mb-4">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12,3L2,12H5V20H19V12H22L12,3M12,8.75A2.25,2.25 0 0,1 14.25,11A2.25,2.25 0 0,1 12,13.25A2.25,2.25 0 0,1 9.75,11A2.25,2.25 0 0,1 12,8.75Z"/>
                    </svg>
                    Our Products
                </div>
                <h2 class="font-poppins text-3xl md:text-4xl lg:text-5xl font-bold text-kraft-900 mb-4">
                    Sustainable Packaging Solutions
                </h2>
                <p class="text-lg text-kraft-600 max-w-2xl mx-auto">
                    From boxes to bags, pouches to mailers — all designed with the planet in mind
                </p>
            </div>

            <!-- Product Grid -->
            <div class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 md:gap-8">
                <!-- Product Card 1 -->
                <div class="product-card kraft-texture rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl">
                    <div class="relative p-6 pb-4">
                        <!-- Eco Badge -->
                        <div class="absolute top-4 left-4 bg-eco-green-600 text-white text-xs font-bold px-3 py-1 rounded-full flex items-center gap-1">
                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 2,11.5 2,13.5C2,15.5 3.75,17.25 3.75,17.25C7,8 17,8 17,8Z"/>
                            </svg>
                            Biodegradable
                        </div>
                        <!-- Product Image -->
                        <div class="product-image bg-gradient-to-br from-kraft-100 to-kraft-200 rounded-xl h-48 flex items-center justify-center mb-4 mt-6">
                            <svg class="w-24 h-24 text-kraft-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
                            </svg>
                        </div>
                        <!-- Product Info -->
                        <h3 class="font-poppins font-semibold text-lg text-kraft-900 mb-2">Kraft Mailer Box</h3>
                        <p class="text-sm text-kraft-600 mb-4 flex items-center gap-1">
                            <svg class="w-4 h-4 text-eco-green-600" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/>
                            </svg>
                            100% Recycled Material
                        </p>
                        <!-- Price & MOQ -->
                        <div class="flex items-center justify-between mb-4">
                            <div class="price-tag pl-4">
                                <p class="text-xs text-kraft-500">Starting from</p>
                                <p class="font-bold text-eco-green-700 text-xl">₹12/pc</p>
                            </div>
                            <div class="text-right">
                                <p class="text-xs text-kraft-500">MOQ</p>
                                <p class="font-semibold text-kraft-700">100 pcs</p>
                            </div>
                        </div>
                        <!-- CTA Button -->
                        <button class="w-full btn-primary py-3 text-white font-semibold rounded-xl flex items-center justify-center gap-2">
                            <span>View Details</span>
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                            </svg>
                        </button>
                    </div>
                </div>

                <!-- Product Card 2 -->
                <div class="product-card kraft-texture rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl">
                    <div class="relative p-6 pb-4">
                        <div class="absolute top-4 left-4 bg-eco-green-600 text-white text-xs font-bold px-3 py-1 rounded-full flex items-center gap-1">
                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12,3L2,12H5V20H19V12H22L12,3M12,8.75A2.25,2.25 0 0,1 14.25,11A2.25,2.25 0 0,1 12,13.25A2.25,2.25 0 0,1 9.75,11A2.25,2.25 0 0,1 12,8.75Z"/>
                            </svg>
                            Plastic-Free
                        </div>
                        <div class="product-image bg-gradient-to-br from-kraft-100 to-kraft-200 rounded-xl h-48 flex items-center justify-center mb-4 mt-6">
                            <svg class="w-24 h-24 text-kraft-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
                            </svg>
                        </div>
                        <h3 class="font-poppins font-semibold text-lg text-kraft-900 mb-2">Paper Carry Bags</h3>
                        <p class="text-sm text-kraft-600 mb-4 flex items-center gap-1">
                            <svg class="w-4 h-4 text-eco-green-600" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/>
                            </svg>
                            Food Grade Safe
                        </p>
                        <div class="flex items-center justify-between mb-4">
                            <div class="price-tag pl-4">
                                <p class="text-xs text-kraft-500">Starting from</p>
                                <p class="font-bold text-eco-green-700 text-xl">₹8/pc</p>
                            </div>
                            <div class="text-right">
                                <p class="text-xs text-kraft-500">MOQ</p>
                                <p class="font-semibold text-kraft-700">250 pcs</p>
                            </div>
                        </div>
                        <button class="w-full btn-primary py-3 text-white font-semibold rounded-xl flex items-center justify-center gap-2">
                            <span>View Details</span>
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                            </svg>
                        </button>
                    </div>
                </div>

                <!-- Product Card 3 -->
                <div class="product-card kraft-texture rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl">
                    <div class="relative p-6 pb-4">
                        <div class="absolute top-4 left-4 bg-eco-green-600 text-white text-xs font-bold px-3 py-1 rounded-full flex items-center gap-1">
                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z"/>
                            </svg>
                            Compostable
                        </div>
                        <div class="product-image bg-gradient-to-br from-kraft-100 to-kraft-200 rounded-xl h-48 flex items-center justify-center mb-4 mt-6">
                            <svg class="w-24 h-24 text-kraft-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                            </svg>
                        </div>
                        <h3 class="font-poppins font-semibold text-lg text-kraft-900 mb-2">Kraft Stand-Up Pouches</h3>
                        <p class="text-sm text-kraft-600 mb-4 flex items-center gap-1">
                            <svg class="w-4 h-4 text-eco-green-600" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/>
                            </svg>
                            Resealable Zip Lock
                        </p>
                        <div class="flex items-center justify-between mb-4">
                            <div class="price-tag pl-4">
                                <p class="text-xs text-kraft-500">Starting from</p>
                                <p class="font-bold text-eco-green-700 text-xl">₹6/pc</p>
                            </div>
                            <div class="text-right">
                                <p class="text-xs text-kraft-500">MOQ</p>
                                <p class="font-semibold text-kraft-700">500 pcs</p>
                            </div>
                        </div>
                        <button class="w-full btn-primary py-3 text-white font-semibold rounded-xl flex items-center justify-center gap-2">
                            <span>View Details</span>
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                            </svg>
                        </button>
                    </div>
                </div>

                <!-- Product Card 4 -->
                <div class="product-card kraft-texture rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl">
                    <div class="relative p-6 pb-4">
                        <div class="absolute top-4 left-4 bg-eco-green-600 text-white text-xs font-bold px-3 py-1 rounded-full flex items-center gap-1">
                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4M9,9V15H15V9"/>
                            </svg>
                            Recyclable
                        </div>
                        <div class="product-image bg-gradient-to-br from-kraft-100 to-kraft-200 rounded-xl h-48 flex items-center justify-center mb-4 mt-6">
                            <svg class="w-24 h-24 text-kraft-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                            </svg>
                        </div>
                        <h3 class="font-poppins font-semibold text-lg text-kraft-900 mb-2">Eco Poly Mailers</h3>
                        <p class="text-sm text-kraft-600 mb-4 flex items-center gap-1">
                            <svg class="w-4 h-4 text-eco-green-600" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/>
                            </svg>
                            Water Resistant
                        </p>
                        <div class="flex items-center justify-between mb-4">
                            <div class="price-tag pl-4">
                                <p class="text-xs text-kraft-500">Starting from</p>
                                <p class="font-bold text-eco-green-700 text-xl">₹4/pc</p>
                            </div>
                            <div class="text-right">
                                <p class="text-xs text-kraft-500">MOQ</p>
                                <p class="font-semibold text-kraft-700">500 pcs</p>
                            </div>
                        </div>
                        <button class="w-full btn-primary py-3 text-white font-semibold rounded-xl flex items-center justify-center gap-2">
                            <span>View Details</span>
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>

            <!-- View All Button -->
            <div class="text-center mt-12">
                <button class="px-8 py-4 bg-white text-eco-green-700 font-semibold rounded-xl shadow-lg border-2 border-eco-green-200 hover:border-eco-green-400 hover:bg-eco-green-50 transition-all text-lg inline-flex items-center gap-2">
                    <span>View All Products</span>
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                    </svg>
                </button>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-16 md:py-24 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12 md:mb-16">
                <h2 class="font-poppins text-3xl md:text-4xl font-bold text-kraft-900 mb-4">
                    Why Choose EarthNest?
                </h2>
                <p class="text-lg text-kraft-600 max-w-2xl mx-auto">
                    We make it easy for Indian businesses to go green without compromising on quality
                </p>
            </div>

            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Feature 1 -->
                <div class="feature-card p-6 rounded-2xl bg-beige-100 hover:bg-beige-200 transition-colors">
                    <div class="feature-icon w-14 h-14 bg-eco-green-100 rounded-xl flex items-center justify-center mb-4">
                        <svg class="w-7 h-7 text-eco-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                        </svg>
                    </div>
                    <h3 class="font-poppins font-semibold text-xl text-kraft-900 mb-2">FSSAI Certified</h3>
                    <p class="text-kraft-600">All our food-grade packaging meets strict FSSAI safety standards</p>
                </div>

                <!-- Feature 2 -->
                <div class="feature-card p-6 rounded-2xl bg-beige-100 hover:bg-beige-200 transition-colors">
                    <div class="feature-icon w-14 h-14 bg-eco-green-100 rounded-xl flex items-center justify-center mb-4">
                        <svg class="w-7 h-7 text-eco-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <h3 class="font-poppins font-semibold text-xl text-kraft-900 mb-2">Affordable Pricing</h3>
                    <p class="text-kraft-600">Competitive prices with low MOQ perfect for small businesses</p>
                </div>

                <!-- Feature 3 -->
                <div class="feature-card p-6 rounded-2xl bg-beige-100 hover:bg-beige-200 transition-colors">
                    <div class="feature-icon w-14 h-14 bg-eco-green-100 rounded-xl flex items-center justify-center mb-4">
                        <svg class="w-7 h-7 text-eco-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
                        </svg>
                    </div>
                    <h3 class="font-poppins font-semibold text-xl text-kraft-900 mb-2">Custom Branding</h3>
                    <p class="text-kraft-600">Add your logo and designs to make packaging uniquely yours</p>
                </div>

                <!-- Feature 4 -->
                <div class="feature-card p-6 rounded-2xl bg-beige-100 hover:bg-beige-200 transition-colors">
                    <div class="feature-icon w-14 h-14 bg-eco-green-100 rounded-xl flex items-center justify-center mb-4">
                        <svg class="w-7 h-7 text-eco-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                        </svg>
                    </div>
                    <h3 class="font-poppins font-semibold text-xl text-kraft-900 mb-2">Fast Delivery</h3>
                    <p class="text-kraft-600">Quick turnaround with pan-India shipping within 5-7 days</p>
                </div>

                <!-- Feature 5 -->
                <div class="feature-card p-6 rounded-2xl bg-beige-100 hover:bg-beige-200 transition-colors">
                    <div class="feature-icon w-14 h-14 bg-eco-green-100 rounded-xl flex items-center justify-center mb-4">
                        <svg class="w-7 h-7 text-eco-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <h3 class="font-poppins font-semibold text-xl text-kraft-900 mb-2">100% Eco-Friendly</h3>
                    <p class="text-kraft-600">All materials are biodegradable, compostable, or recyclable</p>
                </div>

                <!-- Feature 6 -->
                <div class="feature-card p-6 rounded-2xl bg-beige-100 hover:bg-beige-200 transition-colors">
                    <div class="feature-icon w-14 h-14 bg-eco-green-100 rounded-xl flex items-center justify-center mb-4">
                        <svg class="w-7 h-7 text-eco-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/>
                        </svg>
                    </div>
                    <h3 class="font-poppins font-semibold text-xl text-kraft-900 mb-2">Dedicated Support</h3>
                    <p class="text-kraft-600">Expert team to help you choose the right packaging solution</p>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-16 md:py-24 bg-eco-green-800 relative overflow-hidden">
        <div class="absolute inset-0 opacity-10">
            <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
                <pattern id="leaf-pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                    <path d="M10,2 C5,5 2,10 2,10 C2,10 5,15 10,18 C15,15 18,10 18,10 C18,10 15,5 10,2 Z" fill="currentColor"/>
                </pattern>
                <rect width="100" height="100" fill="url(#leaf-pattern)"/>
            </svg>
        </div>
        
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
            <h2 class="font-poppins text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-6">
                Ready to Make Your Brand
                <span class="block">More Sustainable?</span>
            </h2>
            <p class="text-lg md:text-xl text-eco-green-100 mb-8 max-w-2xl mx-auto">
                Join 500+ Indian brands that have already made the switch to eco-friendly packaging
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <button class="px-8 py-4 bg-white text-eco-green-800 font-bold rounded-xl shadow-xl hover:bg-eco-green-50 transition-all text-lg flex items-center justify-center gap-2">
                    <span>Get Free Sample</span>
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"/>
                    </svg>
                </button>
                <button class="px-8 py-4 bg-transparent text-white font-bold rounded-xl border-2 border-white hover:bg-white/10 transition-all text-lg flex items-center justify-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                    </svg>
                    <span>Call: +91 98765 43210</span>
                </button>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-kraft-900 text-white py-12 md:py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
                <!-- Company Info -->
                <div>
                    <div class="flex items-center gap-2 mb-4">
                        <div class="w-10 h-10 bg-eco-green-600 rounded-xl flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>
                            </svg>
                        </div>
                        <div>
                            <h3 class="font-poppins font-bold text-lg">EarthNest</h3>
                            <p class="text-xs text-kraft-400">Packaging</p>
                        </div>
                    </div>
                    <p class="text-kraft-400 text-sm leading-relaxed">
                        Premium eco-friendly packaging solutions for Indian D2C brands and small businesses.
                    </p>
                </div>

                <!-- Quick Links -->
                <div>
                    <h4 class="font-semibold text-lg mb-4">Quick Links</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-kraft-400 hover:text-eco-green-400 transition-colors text-sm">Products</a></li>
                        <li><a href="#" class="text-kraft-400 hover:text-eco-green-400 transition-colors text-sm">Custom Solutions</a></li>
                        <li><a href="#" class="text-kraft-400 hover:text-eco-green-400 transition-colors text-sm">About Us</a></li>
                        <li><a href="#" class="text-kraft-400 hover:text-eco-green-400 transition-colors text-sm">Blog</a></li>
                    </ul>
                </div>

                <!-- Contact -->
                <div>
                    <h4 class="font-semibold text-lg mb-4">Contact Us</h4>
                    <ul class="space-y-2 text-sm text-kraft-400">
                        <li class="flex items-center gap-2">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                            </svg>
                            hello@earthnest.in
                        </li>
                        <li class="flex items-center gap-2">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                            </svg>
                            +91 98765 43210
                        </li>
                        <li class="flex items-start gap-2">
                            <svg class="w-4 h-4 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                            </svg>
                            Mumbai, Maharashtra, India
                        </li>
                    </ul>
                </div>

                <!-- Newsletter -->
                <div>
                    <h4 class="font-semibold text-lg mb-4">Stay Updated</h4>
                    <p class="text-kraft-400 text-sm mb-4">Get packaging tips and exclusive offers</p>
                    <div class="flex gap-2">
                        <input type="email" placeholder="Your email" class="flex-1 px-4 py-2 rounded-lg bg-kraft-800 border border-kraft-700 text-white placeholder-kraft-500 text-sm focus:outline-none focus:border-eco-green-500">
                        <button class="px-4 py-2 bg-eco-green-600 text-white rounded-lg hover:bg-eco-green-500 transition-colors">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>

            <div class="border-t border-kraft-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
                <p class="text-kraft-500 text-sm">© 2024 EarthNest Packaging. All rights reserved.</p>
                <div class="flex gap-4">
                    <a href="#" class="w-10 h-10 bg-kraft-800 rounded-full flex items-center justify-center hover:bg-eco-green-600 transition-colors">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                        </svg>
                    </a>
                    <a href="#" class="w-10 h-10 bg-kraft-800 rounded-full flex items-center justify-center hover:bg-eco-green-600 transition-colors">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"/>
                        </svg>
                    </a>
                    <a href="#" class="w-10 h-10 bg-kraft-800 rounded-full flex items-center justify-center hover:bg-eco-green-600 transition-colors">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4