Optimize hero section spacing between avatar and navigation

- Reduce margin between avatar and navigation button (md:mr-4 lg:mr-6)
- Adjust container width to bring elements closer proportionally
- Maintain responsive spacing consistency from mobile to desktop

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: josuejjv85

index.html

@@ -40,11 +40,11 @@ <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold bg-gradient-to-r from-gray
       <!-- Hero and Navigation Section -->
       <div id="hero" class="flex justify-center py-8 px-4 md:px-8 lg:py-12">
         <div
-          class="inline-flex flex-col md:flex-row items-center justify-between w-full max-w-3xl"
+          class="inline-flex flex-col md:flex-row items-center justify-between w-full max-w-2xl lg:max-w-3xl"
         >
           <!-- Hero Image Section -->
           <div
-            class="w-32 md:w-40 lg:w-48 mb-6 md:mb-0 md:mr-8 lg:mr-hero-lg p-2 md:p-hero"
+            class="w-32 md:w-40 lg:w-48 mb-6 md:mb-0 md:mr-4 lg:mr-6 p-2 md:p-3"
           >
             <img
               src="img/avatarholder.png"