<footer class="bg-[#1c1c1c] text-white/80 pt-16 text-[14px] lg:text-[16px]">
  <div class="mx-auto px-6 lg:px-16">

    <!-- GRID (MOBILE: 2 cols, DESKTOP: 4 cols) -->
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-y-10 gap-x-10 pb-14">

      <!-- COLUMN 1 : QUICK LINKS (Row 1, Col 1 on mobile) -->
      <div class="order-1 lg:order-none">
        <p class="text-white font-medium text-[14px] lg:text-[18px] mb-4">Quick Links</p>
        <ul class="space-y-3">
          <li>
            <a href="{{ route('home') }}" wire:navigate
              class="relative inline-block after:absolute after:left-0 after:-bottom-[2px] after:h-[1px] after:w-0 after:bg-current after:transition-all after:duration-300 after:ease-out hover:text-[#f58220] hover:after:w-full">
              Home
            </a>
          </li>

          <li>
            <a href="{{ route('about') }}" wire:navigate
              class="relative inline-block after:absolute after:left-0 after:-bottom-[2px] after:h-[1px] after:w-0 after:bg-current after:transition-all after:duration-300 hover:text-[#f58220] hover:after:w-full">
              About Us
            </a>
          </li>

          <li>
            <a href="{{ route('services.index') }}" wire:navigate
              class="relative inline-block after:absolute after:left-0 after:-bottom-[2px] after:h-[1px] after:w-0 after:bg-current after:transition-all after:duration-300 hover:text-[#f58220] hover:after:w-full">
              Services
            </a>
          </li>

          <li>
            <a href="{{ route('blogs.index') }}" wire:navigate
              class="relative inline-block after:absolute after:left-0 after:-bottom-[2px] after:h-[1px] after:w-0 after:bg-current after:transition-all after:duration-300 hover:text-[#f58220] hover:after:w-full">
              Blogs
            </a>
          </li>

          <li>
            <a href="{{ route('contact') }}" wire:navigate
              class="relative inline-block after:absolute after:left-0 after:-bottom-[2px] after:h-[1px] after:w-0 after:bg-current after:transition-all after:duration-300 hover:text-[#f58220] hover:after:w-full">
              Contact
            </a>
          </li>
        </ul>
      </div>

      <!-- COLUMN 2 : OUR SERVICES (Row 1, Col 2 on mobile) -->
      <div class="order-2 lg:order-none">
        <p class="text-white font-medium text-[14px] lg:text-[18px] mb-4">Our Services</p>

        <ul class="space-y-3">
          @foreach ($megaMenuColumns as $column)
            @if ($column)
              <li>
                <a href="{{ route('services.category.view', $column->slug) }}"
                  class="relative inline-block after:absolute after:left-0 after:-bottom-[2px] after:h-[1px] after:w-0 after:bg-current after:transition-all after:duration-300 after:ease-out hover:text-[#f58220] hover:after:w-full">
                  {{ $column->name }}
                </a>
              </li>
            @endif
          @endforeach
        </ul>
      </div>

      <!-- COLUMN 3 : BUSINESS ENQUIRY (Row 2 FULL WIDTH on mobile) -->
      <div class="order-3 col-span-2 lg:col-span-1 lg:order-none space-y-4">
        <p class="text-white font-medium text-[14px] lg:text-[18px]">
          Business Enquiry
        </p>

        <div>
          <p class="mb-1">Sanjay</p>
          <div class="flex items-center gap-3">
            <i class="fa-solid fa-mobile-screen-button text-[15px] lg:text-[16px] tracking-tight hover:scale-110 transition"></i>
            <a href="tel:+919870787892"
              class="relative inline-block after:absolute after:left-0 after:-bottom-[2px] after:h-[1px] after:w-0 after:bg-current after:transition-all after:duration-300 hover:text-[#f58220] hover:after:w-full">
              +91 96536 72048
            </a>
          </div>
        </div>
        
         <div>
          <p class="mb-1">Melba</p>
          <div class="flex items-center gap-3">
            <i class="fa-solid fa-mobile-screen-button text-[15px] lg:text-[16px] tracking-tight hover:scale-110 transition"></i>
            <a href="tel:+919870787892"
              class="relative inline-block after:absolute after:left-0 after:-bottom-[2px] after:h-[1px] after:w-0 after:bg-current after:transition-all after:duration-300 hover:text-[#f58220] hover:after:w-full">
              +91 98707 87892
            </a>
          </div>
        </div>

        <div>
          <p class="mb-1">HR</p>
          <div class="flex items-center gap-3">
            <i class="fa-solid fa-mobile-screen-button text-[15px] lg:text-[16px] tracking-tight hover:scale-110 transition"></i>
            <a href="tel:+919870787883"
              class="relative inline-block after:absolute after:left-0 after:-bottom-[2px] after:h-[1px] after:w-0 after:bg-current after:transition-all after:duration-300 hover:text-[#f58220] hover:after:w-full">
              +91 98707 87883
            </a>
          </div>
        </div>

        <div class="flex items-center gap-3">
          <i class="fa-regular fa-envelope text-[14px] lg:text-[16px] hover:opacity-100 transition"></i>
          <a href="mailto:ourword@eggfirst.com"
            class="relative inline-block after:absolute after:left-0 after:-bottom-[2px] after:h-[1px] after:w-0 after:bg-current after:transition-all after:duration-300 hover:text-[#f58220] hover:after:w-full">
            ourword[at]eggfirst[dot]com
          </a>
        </div>

      </div>

      <!-- COLUMN 4 : OFFICE (Row 3 FULL WIDTH on mobile) -->
      <div class="order-4 col-span-2 lg:col-span-1 lg:order-none space-y-4">

        <p class="text-white font-medium">Office</p>

        <div class="flex items-center gap-3">
          <i class="fa-solid fa-phone text-[14px]"></i>
          <a href="tel:02242417200"
            class="relative inline-block after:absolute after:left-0 after:-bottom-[2px] after:h-[1px] after:w-0 after:bg-current after:transition-all after:duration-300 hover:text-[#f58220] hover:after:w-full">
            022 4241 7200
          </a>
        </div>

        <!-- DESKTOP ONLY ADDRESS -->
        <div class="hidden lg:flex items-start gap-3 bg-white/5 p-4 rounded-xl lg:bg-transparent lg:p-0 lg:rounded-none">
          <i class="fa-solid fa-location-dot mt-1 text-[14px] shrink-0"></i>
          <span class="leading-relaxed">
            <!--901, Synergy Business Park,<br>-->
            <!--Saharakarwadi (Vishweshwar Road),<br>-->
            <!--Goregaon (E), Mumbai,<br>-->
            <!--Maharashtra 400063-->
            
            9th Floor, Synergy Business Park, Vishveshwar Nagar Rd, ITT Bhatti, Saharakarwadi, Goregaon(E), Mumbai - 400063
          </span>
        </div>
        <!-- MOBILE ONLY: ADDRESS under Business Enquiry -->
        <div class="flex items-start gap-3 bg-white/5 p-4 rounded-xl lg:hidden">
          <i class="fa-solid fa-location-dot mt-1 text-[14px] shrink-0"></i>
          <span class="leading-relaxed">
            <!--901, Synergy Business Park,<br>-->
            <!--Saharakarwadi (Vishweshwar Road),<br>-->
            <!--Goregaon (E), Mumbai,<br>-->
            <!--Maharashtra 400063-->
            
            9th Floor, 901, Synergy Business Park, Vishveshwar Nagar Rd, ITT Bhatti, Saharakarwadi, Goregaon(E), Mumbai - 400063 
          </span>
        </div>

        <!-- CIN (NO OVERFLOW) -->
        <div class="flex items-start gap-3 bg-white/5 p-4 rounded-xl lg:bg-transparent lg:p-0 lg:rounded-none">
          <i class="fa-regular fa-file-lines text-[14px] shrink-0 mt-1"></i>
          <div class="min-w-0">
            <p class="text-white font-medium text-[14px] leading-5 m-0">CIN No.</p>
            <p class="text-white/80 text-[13px] leading-5 m-0 break-words">
              U74140MH2006PTC160356
            </p>
          </div>
        </div>

      </div>

    </div>

    <!-- DIVIDER -->
    <div class="border-t border-white/10"></div>

    <!-- SOCIAL -->
    <div class="flex justify-center gap-6 py-6">
      <a href="https://www.facebook.com/EggfirstAdvertisingandDigitalAgency/" class="group">
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/icon/fb.png" alt="Facebook"
          class="h-6 w-6 opacity-80 group-hover:opacity-100 transition">
      </a>

      <a href="https://x.com/eggfirst" class="group">
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/icon/x.png" alt="X / Twitter"
          class="h-6 w-6 opacity-80 group-hover:opacity-100 transition">
      </a>

      <a href="https://www.linkedin.com/company/eggfirst-advertising-and-digital-marketing-agency" class="group">
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/icon/linkedin.png" alt="LinkedIn"
          class="h-6 w-6 opacity-80 group-hover:opacity-100 transition">
      </a>

      <a href="https://instagram.com/eggfirstofficial/" class="group">
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/icon/instagram.png" alt="Instagram"
          class="h-6 w-6 opacity-80 group-hover:opacity-100 transition">
      </a>

      <a href="https://www.youtube.com/channel/UC7RVYq2hwerxvbi5-RAJ3tw" class="group">
        <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/icon/youtube.png" alt="YouTube"
          class="h-6 w-6 opacity-80 group-hover:opacity-100 transition">
      </a>
    </div>

    <!-- COPYRIGHT -->
    <p class="text-center text-[12px] text-white font-normal pb-6">
      ©2026 All Rights Reserved by Eggfirst Advertising and Digital Agency
    </p>

  </div>
</footer>
