<!-- BASS YAHI COPY KARNA HAI DOST - BODY TAG KE ANDAR WALA HISA -->
<!-- Fixed Bottom Navbar -->
<div class="fixed left-1/2 -translate-x-1/2 bottom-[calc(12px+env(safe-area-inset-bottom))] w-[calc(100%-24px)] max-w-[520px] z-[999]">
<!-- Glassmorphism Container with Theme Colors -->
<nav class="flex items-center justify-between gap-1 p-2 rounded-full bg-[#eff7ff]/70 dark:bg-slate-900/70 backdrop-blur-xl backdrop-saturate-200 border border-white/60 dark:border-white/10 shadow-[inset_0px_2px_4px_rgba(255,255,255,0.7),0_10px_30px_rgba(79,156,232,0.3)] dark:shadow-[inset_0px_2px_4px_rgba(255,255,255,0.05),0_10px_30px_rgba(0,0,0,0.6)] transition-colors duration-300">
<!-- 1. Home Item (Active State - Isko Highlight kiya hai) -->
<a href="#" class="flex flex-col items-center flex-1 min-w-0 py-2 px-1 rounded-full bg-white/60 dark:bg-white/10 text-[#4f9ce8] dark:text-white shadow-[inset_2px_2px_5px_-2px_rgba(255,255,255,0.8),inset_-2px_-1px_5px_0px_rgba(255,255,255,0.8)] dark:shadow-[inset_2px_2px_5px_-2px_rgba(255,255,255,0.2)] transition-all duration-300 scale-100">
<!-- Home Icon -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
<span class="text-[10px] font-bold mt-1 leading-none">Home</span>
</a>
<!-- 2. Search Item (Hover State Normal) -->
<a href="#" class="group flex flex-col items-center flex-1 min-w-0 py-2 px-1 rounded-full text-[#7faeed] dark:text-slate-400 hover:bg-white/40 dark:hover:bg-white/5 hover:text-[#4f9ce8] dark:hover:text-slate-200 transition-all duration-300 active:scale-95">
<!-- Search Icon -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6 group-hover:rotate-6 transition-transform duration-300">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>
<span class="text-[10px] font-bold mt-1 leading-none">Search</span>
</a>
<!-- 3. Create/Add Item (Middle) -->
<a href="#" class="group flex flex-col items-center flex-1 min-w-0 py-2 px-1 rounded-full text-[#7faeed] dark:text-slate-400 hover:bg-white/40 dark:hover:bg-white/5 hover:text-[#4f9ce8] dark:hover:text-slate-200 transition-all duration-300 active:scale-95">
<!-- Plus Icon -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6 group-hover:scale-110 transition-transform duration-300">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
<span class="text-[10px] font-bold mt-1 leading-none">Add</span>
</a>
<!-- 4. Notifications/Likes Item -->
<a href="#" class="group flex flex-col items-center flex-1 min-w-0 py-2 px-1 rounded-full text-[#7faeed] dark:text-slate-400 hover:bg-white/40 dark:hover:bg-white/5 hover:text-[#4f9ce8] dark:hover:text-slate-200 transition-all duration-300 active:scale-95">
<!-- Heart Icon -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6 group-hover:-rotate-6 transition-transform duration-300">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
</svg>
<span class="text-[10px] font-bold mt-1 leading-none">Likes</span>
</a>
<!-- 5. PROFILE ITEM (TUMHARI PROFILE PICTURE KE SATH) -->
<a href="#" class="group flex flex-col items-center flex-1 min-w-0 py-[6px] px-1 rounded-full text-[#7faeed] dark:text-slate-400 hover:bg-white/40 dark:hover:bg-white/5 hover:text-[#4f9ce8] dark:hover:text-slate-200 transition-all duration-300 active:scale-95">
<!-- Circular Profile Image -->
<div class="w-[26px] h-[26px] rounded-full overflow-hidden border-[2px] border-[#7faeed] dark:border-slate-500 group-hover:border-[#4f9ce8] dark:group-hover:border-white transition-colors duration-300">
<!-- Apna 'profile.webp' image ka path yaha daal dena -->
<img src="profile.webp" alt="Profile" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300" onerror="this.src='https://placehold.co/100x100/dae8f7/7faeed?text=P'">
</div>
<span class="text-[10px] font-bold mt-1 leading-none">Profile</span>
</a>
</nav>
</div>