@foreach ($firms as $firm)
  @if (!empty($firm->title))
    <div class="shadow-lg border rounded-b-md overflow-hidden flex flex-col justify-between h-full">
      <div>
        <div class="relative h-[160px]">  <!-- Reduced height from 200px to 160px -->
          <img
            src="{{ asset('assets/imges/main/sectors/' . $firm->Sector . '/Companies/' . $firm->direc . '/Products/1.png') }}"
            alt=""
            class="w-full h-full object-cover"
          />
         <img
    src="{{ asset('assets/imges/main/sectors/' . $firm->Sector . '/Companies/' . $firm->direc . '/logo.png') }}"
    alt=""
    class="absolute -bottom-6 left-4 w-12 h-12 object-contain bg-white rounded-full p-1 shadow-md"
/>

        </div>
        <div class="pt-10 pb-6 px-4 space-y-2">  <!-- Reduced padding and spacing -->
          <p class="text-xl font-semibold">{{ $firm->title }}</p>  <!-- Reduced text size from text-2xl to text-xl -->
          <p class="text-sm">{{ $firm->Brands }}</p>  <!-- Added text-sm for smaller text -->
        </div>
      </div>
      <div class="border-t rounded-b-md">
        <div class="p-3 flex items-center gap-3">  <!-- Reduced padding and gap -->
          <span class="p-1 bg-[#FCD900] rounded-full px-2 text-sm">  <!-- Added text-sm -->
            <i class="fa-solid fa-earth-americas"></i>
          </span>
          <p class="text-sm"><a href="{{ route('company_details.show', $firm->direc) }}">View Profile</a></p>  <!-- Added text-sm -->
        </div>
      </div>
    </div>
  @endif
@endforeach