PageSourceSearch

https://camtel.cm/agencies

html camtel.cm collected 2026-10-01 10:14:46 UTC 720,895 bytes, 8,127 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4        <!-- Google tag (gtag.js) -->
vendor: 68 bytes, lines 4-5
4
5    <script async src="https://www.googletagmanager.com/gtag/js?id=
5G-EJ6LY98TMF
vendor: 16 bytes, lines 5-6
5"></script>
6    
6<script>
7    
vendor: 140 bytes, lines 7-11
7window.dataLayer = window.dataLayer || [];
8    function gtag(){dataLayer.push(arguments);}
9    gtag('js', new Date());
10
11    gtag('config', '
11G-EJ6LY98TMF
vendor: 8 bytes, lines 11-12
11');
12    
12</script>
12
13    
14    <meta charset="utf-8">
15    <meta name="viewport" content="width=device-width, initial-scale=1">
16    <meta name="csrf-token" content="5K8PXh9ElWImVJ74vKxqWUDfz2VcHis0y2QM73Ci">
17
18    <title>Camtel Site</title>
19
20    <!-- Favicon -->
21    <link rel="icon" type="image/png" sizes="16x16" href="https://camtel.cm/favicons/favicone-16.png">
22    <link rel="icon" type="image/png" sizes="32x32" href="https://camtel.cm/favicons/favicone-32.png">
23    <link rel="icon" type="image/png" sizes="48x48" href="https://camtel.cm/favicons/favicone-48.png">
24    <link rel="icon" type="image/png" sizes="64x64" href="https://camtel.cm/favicons/favicone-64.png">
25    <link rel="icon" type="image/png" sizes="96x96" href="https://camtel.cm/favicons/favicone-96.png">
26    <link rel="icon" type="image/png" sizes="128x128" href="https://camtel.cm/favicons/favicone-128.png">
27    <link rel="icon" type="image/png" sizes="180x180" href="https://camtel.cm/favicons/favicone-180.png">
28    <link rel="icon" type="image/png" sizes="192x192" href="https://camtel.cm/favicons/favicone-192.png">
29    <link rel="icon" type="image/png" sizes="256x256" href="https://camtel.cm/favicons/favicone-256.png">
30    <link rel="icon" type="image/png" sizes="512x512" href="https://camtel.cm/favicons/favicone-512.png">
31    <link rel="apple-touch-icon" sizes="180x180" href="https://camtel.cm/favicons/favicone-180.png">
32
33    <!-- Fonts -->
34    <link rel="preconnect" href="https://fonts.bunny.net">
35    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
36
37    <!-- Font Awesome -->
38    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
39
40    <!-- Scripts -->
41    <link rel="preload" as="style" href="https://camtel.cm/build/assets/app-C7XRgiy8.css" /><link rel="modulepreload" as="script" href="https://camtel.cm/build/assets/app-T1DpEqax.js" /><link rel="stylesheet" href="https://camtel.cm/build/assets/app-C7XRgiy8.css" data-navigate-track="reload" />
41<script type="module" src="https://camtel.cm/build/assets/app-T1DpEqax.js" data-navigate-track="reload"></script>
41
42    <!-- Livewire Styles -->
43    <!-- Livewire Styles --><style >[wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {display: none;}[wire\:offline][wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #2299dd;}[x-cloak] {display: none !important;}[wire\:cloak] {display: none !important;}</style>
44
45    <!-- Alpine.js is bundled with Livewire v3; avoid double-including to prevent conflicts -->
46    
47    
48
49    <!-- Swiper CSS -->
50    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
51
52    <!-- AOS Animation Library -->
53    <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
54    
54<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
54
55
56    
56<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.js"></script>
56
57
58    <!-- Additional Mobile Responsiveness CSS -->
59    <style>
60        html, body {
61            overflow-x: hidden;
62            max-width: 100vw;
63        }
64        .hero-buttons {
65            width: 100%;
66            max-width: 100%;
67            flex-wrap: wrap;
68        }
69        .carousel-image2 {
70            width: 100%;
71            height: 100%;
72            object-fit: cover;
73            object-position: center;
74        }
75    </style>
76
77    </head>
78<body class="font-sans antialiased bg-gray-50 overflow-x-hidden">
79    <div class="min-h-screen flex flex-col">
80        <div class="w-full border-b border-gray-100 py-3 shadow-sm sm:bg-white hidden lg:block">
81    <div class="max-w-7xl mx-auto flex items-center justify-between px-4 lg:px-8">
82        <!-- Logo -->
83        <a href="https://camtel.cm" class="flex items-center flex-shrink-0">
84            <img src="https://camtel.cm/images/logo.png" alt="Camtel" class="w-12 h-12 sm:w-16 sm:h-16 p-1">
85        </a>
86        
87        <!-- Search - Hidden on mobile, shown on desktop -->
88        <div class="flex flex-1 justify-center max-w-3xl mx-8">
89            <form action="https://camtel.cm/search" method="GET" class="w-full max-w-2xl">
90                <div class="relative group">
91                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
92                        <svg class="w-5 h-5 text-gray-400 group-focus-within:text-primary transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
93                            <circle cx="11" cy="11" r="8" stroke-width="2"/>
94                            <line x1="21" y1="21" x2="16.65" y2="16.65" stroke-width="2"/>
95                        </svg>
96                    </div>
97                    <input 
98                        type="search" 
99                        name="q" 
100                        placeholder="Search products, services, news..." 
101                        autocomplete="off"
102                        class="w-full pl-12 pr-4 py-3.5 rounded-2xl text-gray-900 bg-gray-50 border-2 border-gray-200 placeholder-gray-500 focus:bg-white focus:border-primary focus:ring-4 focus:ring-primary/10 transition-all duration-300 text-sm font-medium shadow-sm hover:shadow-md"
103                        required
104                    >
105                </div>
106            </form>
107        </div>
108        
109        <!-- Action Buttons -->
110        <div class="flex items-center space-x-2 sm:space-x-4">
111            <!-- Live Chat -->
112            <button onclick="Livewire.dispatch('open-chatbot')" class="group relative bg-primary text-white px-2 py-2 sm:px-4 sm:py-3 rounded-xl transition-all duration-300 shadow-lg hover:border-white hover:-translate-y-0.5 focus:outline-none focus:ring-4 focus:ring-primary/20">
113                <div class="flex items-center space-x-1 sm:space-x-2">
114                    <div class="relative">
115                        <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
116                            <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"/>
117                        </svg>
118                        <!-- <div class="absolute -top-1 -right-1 w-3 h-3 bg-green-400 rounded-full animate-pulse"></div> -->
119                    </div>
120                    <span class="hidden sm:inline text-sm font-semibold">Live Chat</span>
121                </div>
122            </button>
123            
124            <!-- Agencies -->
125            <a href="https://camtel.cm/agencies" class="group bg-white hover:bg-gray-50 border-2 border-gray-200 text-gray-700 px-2 py-2 sm:px-4 sm:py-3 rounded-xl hover:-translate-y-0.5">
126                <div class="flex items-center space-x-1 sm:space-x-2">
127                    <svg class="w-4 h-4 sm:w-5 sm:h-5 transition-colors duration-200" fill="currentColor" viewBox="0 0 24 24">
128                        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
129                    </svg>
130                    <span class="hidden sm:inline text-sm font-semibold">Our Agencies</span>
131                </div>
132            </a>
133            
134            <!-- Language Switcher -->
135            <div class="relative z-[120]">
136                <!-- Desktop Language Switcher -->
137    <div x-data="{ open: false }" class="relative z-[120] relative">
138        <button @click="open = !open" 
139                class="group bg-white hover:bg-gray-50 text-gray-700 hover:text-primary px-2 py-1 transition-all duration-300  transform hover:-translate-y-0.5 focus:outline-none focus:ring-4 focus:ring-primary/20">
140            <div class="flex items-center space-x-2">
141                <span class="text-lg"></span>
142                <span class="text-sm font-semibold">EN</span>
143                <svg class="w-4 h-4 transition-transform duration-200" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
144                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
145                </svg>
146            </div>
147        </button>
148
149        <!-- Dropdown Menu -->
150        <div x-cloak x-show="open" 
151             @click.away="open = false"
152             x-transition:enter="transition ease-out duration-200"
153             x-transition:enter-start="transform opacity-0 scale-95 translate-y-2"
154             x-transition:enter-end="transform opacity-100 scale-100 translate-y-0"
155             x-transition:leave="transition ease-in duration-150"
156             x-transition:leave-start="transform opacity-100 scale-100 translate-y-0"
157             x-transition:leave-end="transform opacity-0 scale-95 translate-y-2"
158             class="absolute right-0 mt-2 w-48 bg-white rounded-xl shadow-xl border border-gray-200 py-2 z-[130] backdrop-blur-sm">
159                            <a href="https://camtel.cm/language/en" 
160                   class="flex items-center px-4 py-3 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-all duration-200 first:rounded-t-xl last:rounded-b-xl bg-primary/10 text-primary font-semibold">
161                    <span class="text-lg mr-3"></span>
162                    <span class="font-medium">English</span>
163                                            <svg class="w-4 h-4 ml-auto text-primary" fill="currentColor" viewBox="0 0 20 20">
164                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
165                        </svg>
166                                    </a>
167                            <a href="https://camtel.cm/language/fr" 
168                   class="flex items-center px-4 py-3 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-all duration-200 first:rounded-t-xl last:rounded-b-xl ">
169                    <span class="text-lg mr-3"></span>
170                    <span class="font-medium">Français</span>
171                                    </a>
172                    </div>
173    </div>
174             </div>
175        </div>
176    </div>
177</div> <nav x-data="{ isOpen: false, megaMenuOpen: false, megaMenu: null, hasMegaMenu: false }" class="bg-white dark:bg-white shadow-lg w-full relative z-50 border-b border-gray-200 sticky top-0">
178    <div class="mx-auto px-3 sm:px-4 lg:px-6 xl:px-8">
179        <!-- Mobile Header with Hamburger Menu -->
180        <div class="lg:hidden flex items-center justify-between h-16 border-b border-gray-200">
181            <!-- Mobile Logo -->
182            <div class="flex items-center">
183                <a href="https://camtel.cm" class="flex-shrink-0">
184                    <img src="https://camtel.cm/images/logo.png" alt="Camtel" class="w-10 h-10">
185                </a>
186            </div>
187            
188            <!-- Mobile hamburger menu button -->
189            
190            <div class="flex items-center">
191                <!-- Mobile Language Switcher -->
192    <div class="px-3 py-2 border-t border-gray-200">
193        <div class="flex items-center justify-between">
194            <div class="flex items-center space-x-2">
195                                    <a href="https://camtel.cm/language/en" 
196                       class="flex items-center px-3 py-2 rounded-lg transition-colors duration-200 bg-primary text-white">
197                        <span class="text-sm font-medium">EN</span>
198                    </a>
199                                    <a href="https://camtel.cm/language/fr" 
200                       class="flex items-center px-3 py-2 rounded-lg transition-colors duration-200 text-gray-600 hover:text-gray-900 hover:bg-gray-50">
201                        <span class="text-sm font-medium">FR</span>
202                    </a>
203                            </div>
204        </div>
205    </div>
206                 <button @click="isOpen = !isOpen" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary" aria-controls="mobile-menu" aria-expanded="false">
207                    <span class="sr-only">Open main menu</span>
208                    <!-- Hamburger icon -->
209                    <svg x-show="!isOpen" class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
210                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
211                    </svg>
212                    <!-- Close icon -->
213                    <svg x-show="isOpen" class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
214                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
215                    </svg>
216                </button>
217            </div>
218        </div>
219
220        <!-- Main Nav Row - Desktop -->
221        <div class="hidden lg:flex justify-center border-t border-b border-gray-200 py-2 bg-white">
222            <div class="flex space-x-8">
223                <div x-data="{ show: false }" class="relative" 
224    @mouseenter="megaMenuOpen = false;"
225    @mouseleave=""
226>
227    <a href="https://camtel.cm" 
228              class="flex items-center px-2 sm:px-3 py-2 sm:py-2.5 text-sm sm:text-base font-bold rounded-md transition-colors duration-200 text-gray-700 hover:bg-gray-100 hover:text-primary"
229    >
230        
231        <span class="flex-1">Home</span>
232
233        
234            </a>
235</div>
236
237
238
239    <div x-data="{ show: false }" class="relative" 
240    @mouseenter="if (window.innerWidth &gt;= 1024) { megaMenuOpen = true; megaMenu = &#039;about&#039;; hasMegaMenu = true }"
241    @mouseleave="if (window.innerWidth &gt;= 1024) { setTimeout(() =&gt; { if (!hasMegaMenu) megaMenuOpen = false }, 100) }"
242>
243    <a href="https://camtel.cm/about" 
244        @click="if (window.innerWidth >= 1024) { megaMenuOpen = !megaMenuOpen; megaMenu = 'about'; hasMegaMenu = true; }"        class="flex items-center px-2 sm:px-3 py-2 sm:py-2.5 text-sm sm:text-base font-bold rounded-md transition-colors duration-200 text-gray-700 hover:bg-gray-100 hover:text-primary"
245    >
246        
247        <span class="flex-1">About Us</span>
248
249        
250                    <svg class="hidden lg:inline-block ml-1 sm:ml-2 h-4 w-4 sm:h-5 sm:w-5 text-primary" viewBox="0 0 20 20" fill="currentColor">
251                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
252            </svg>
253            </a>
254</div>
255
256
257
258    <div x-data="{ show: false }" class="relative" 
259    @mouseenter="if (window.innerWidth &gt;= 1024) { megaMenuOpen = true; megaMenu = &#039;services&#039;; hasMegaMenu = true }"
260    @mouseleave="if (window.innerWidth &gt;= 1024) { setTimeout(() =&gt; { if (!hasMegaMenu) megaMenuOpen = false }, 100) }"
261>
262    <a href="https://camtel.cm/services" 
263        @click="if (window.innerWidth >= 1024) { megaMenuOpen = !megaMenuOpen; megaMenu = 'services'; hasMegaMenu = true; }"        class="flex items-center px-2 sm:px-3 py-2 sm:py-2.5 text-sm sm:text-base font-bold rounded-md transition-colors duration-200 text-gray-700 hover:bg-gray-100 hover:text-primary"
264    >
265        
266        <span class="flex-1">Our Services</span>
267
268        
269                    <svg class="hidden lg:inline-block ml-1 sm:ml-2 h-4 w-4 sm:h-5 sm:w-5 text-primary" viewBox="0 0 20 20" fill="currentColor">
270                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
271            </svg>
272            </a>
273</div>
274
275
276
277    <!--
278    <div x-data="{ show: false }" class="relative" 
279    @mouseenter="if (window.innerWidth &gt;= 1024) { megaMenuOpen = true; megaMenu = &#039;blue-shop&#039;; hasMegaMenu = true }"
280    @mouseleave="if (window.innerWidth &gt;= 1024) { setTimeout(() =&gt; { if (!hasMegaMenu) megaMenuOpen = false }, 100) }"
281>
282    <a href="https://camtel.cm/blue-shop" 
283        @click="if (window.innerWidth >= 1024) { megaMenuOpen = !megaMenuOpen; megaMenu = 'blue-shop'; hasMegaMenu = true; }"        class="flex items-center px-2 sm:px-3 py-2 sm:py-2.5 text-sm sm:text-base font-bold rounded-md transition-colors duration-200 text-gray-700 hover:bg-gray-100 hover:text-primary"
284    >
285        
286        <span class="flex-1">Blue Shop</span>
287
288        
289                    <svg class="hidden lg:inline-block ml-1 sm:ml-2 h-4 w-4 sm:h-5 sm:w-5 text-primary" viewBox="0 0 20 20" fill="currentColor">
290                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
291            </svg>
292            </a>
293</div>
294
295
296    -->
297    <div x-data="{ show: false }" class="relative" 
298    @mouseenter="if (window.innerWidth &gt;= 1024) { megaMenuOpen = true; megaMenu = &#039;news&#039;; hasMegaMenu = true }"
299    @mouseleave="if (window.innerWidth &gt;= 1024) { setTimeout(() =&gt; { if (!hasMegaMenu) megaMenuOpen = false }, 100) }"
300>
301    <a href="https://camtel.cm/news" 
302        @click="if (window.innerWidth >= 1024) { megaMenuOpen = !megaMenuOpen; megaMenu = 'news'; hasMegaMenu = true; }"        class="flex items-center px-2 sm:px-3 py-2 sm:py-2.5 text-sm sm:text-base font-bold rounded-md transition-colors duration-200 text-gray-700 hover:bg-gray-100 hover:text-primary"
303    >
304        
305        <span class="flex-1">News</span>
306
307        
308                    <svg class="hidden lg:inline-block ml-1 sm:ml-2 h-4 w-4 sm:h-5 sm:w-5 text-primary" viewBox="0 0 20 20" fill="currentColor">
309                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
310            </svg>
311            </a>
312</div>
313
314
315
316    <div x-data="{ show: false }" class="relative" 
317    @mouseenter="if (window.innerWidth &gt;= 1024) { megaMenuOpen = true; megaMenu = &#039;support&#039;; hasMegaMenu = true }"
318    @mouseleave="if (window.innerWidth &gt;= 1024) { setTimeout(() =&gt; { if (!hasMegaMenu) megaMenuOpen = false }, 100) }"
319>
320    <a href="https://camtel.cm/support" 
321        @click="if (window.innerWidth >= 1024) { megaMenuOpen = !megaMenuOpen; megaMenu = 'support'; hasMegaMenu = true; }"        class="flex items-center px-2 sm:px-3 py-2 sm:py-2.5 text-sm sm:text-base font-bold rounded-md transition-colors duration-200 text-gray-700 hover:bg-gray-100 hover:text-primary"
322    >
323        
324        <span class="flex-1">Support</span>
325
326        
327                    <svg class="hidden lg:inline-block ml-1 sm:ml-2 h-4 w-4 sm:h-5 sm:w-5 text-primary" viewBox="0 0 20 20" fill="currentColor">
328                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
329            </svg>
330            </a>
331</div>
332
333
334
335    <div x-data="{ show: false }" class="relative" 
336    @mouseenter="megaMenuOpen = false;"
337    @mouseleave=""
338>
339    <a href="https://career.camtel.cm/" 
340              class="flex items-center px-2 sm:px-3 py-2 sm:py-2.5 text-sm sm:text-base font-bold rounded-md transition-colors duration-200 text-gray-700 hover:bg-gray-100 hover:text-primary" target="_blank" rel="noopener noreferrer"
341    >
342        
343        <span class="flex-1">Careers</span>
344
345        
346            </a>
347</div>
348            </div>
349        </div>
350        
351        <!-- Mega Menu -->
352        <div x-cloak x-show="megaMenuOpen && (megaMenu === 'services' || megaMenu === 'products' || megaMenu === 'support' || megaMenu === 'business' || megaMenu === 'search' || megaMenu === 'about' || megaMenu === 'blue-shop' || megaMenu === 'news')" 
353        @mouseenter="megaMenuOpen = true; hasMegaMenu = true"
354        @mouseleave="megaMenuOpen = false; hasMegaMenu = false"
355        x-transition:enter="transition ease-out duration-200"
356        x-transition:enter-start="opacity-0 -translate-y-1"
357        x-transition:enter-end="opacity-100 translate-y-0"
358        x-transition:leave="transition ease-in duration-150"
359        x-transition:leave-start="opacity-100 translate-y-0"
360        x-transition:leave-end="opacity-0 -translate-y-1"
361        class="hidden lg:block absolute left-0 w-full bg-white shadow-xl z-50 border-b border-gray-200">
362    <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 xl:px-8 py-6 sm:py-8">
363        <div x-cloak x-show="hasMegaMenu" 
364             x-transition:enter="transition ease-out duration-200"
365             x-transition:enter-start="opacity-0 transform -translate-y-2"
366             x-transition:enter-end="opacity-100 transform translate-y-0"
367             x-transition:leave="transition ease-in duration-150"
368             x-transition:leave-start="opacity-100 transform translate-y-0"
369             x-transition:leave-end="opacity-0 transform -translate-y-2">
370        </div>
371        
372        <!-- About Us Section -->
373        <div x-cloak x-show="megaMenu === 'about'" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
374            <div class="space-y-3 sm:space-y-4">
375                <div class="flex items-center space-x-2 sm:space-x-3">
376                    <svg class="h-6 w-6 sm:h-8 sm:w-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
377                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
378                    </svg>
379                    <h3 class="text-lg sm:text-xl font-bold text-gray-900">Who are we?</h3>
380                </div>
381                <p class="text-sm sm:text-base text-gray-600">Discover our history, our missions, our values, …</p>
382                <ul class="space-y-1 sm:space-y-2">
383                    <li><a href="https://camtel.cm/about" class="block p-2 text-sm sm:text-base text-gray-600 hover:bg-gray-100 text-primary rounded">Camtel in nutshell</a></li>
384                </ul>
385            </div>
386            <div class="space-y-3 sm:space-y-4">
387                <div class="flex items-center space-x-2 sm:space-x-3">
388                    <svg class="h-6 w-6 sm:h-8 sm:w-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
389                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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 
3890 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
390                    </svg>
391                    <h3 class="text-lg sm:text-xl font-bold text-gray-900">Our network coverage</h3>
392                </div>
393                <p class="text-sm sm:text-base text-gray-600">Explore our network coverage across Cameroon.</p>
394                <ul class="space-y-1 sm:space-y-2">
395                    <li><a href="https://camtel.cm/coverage" class="block p-2 text-sm sm:text-base text-gray-600 hover:bg-gray-100 text-primary rounded">Coverage Overview</a></li>
396                </ul>
397            </div>
398            <div class="space-y-3 sm:space-y-4">
399                <div class="flex items-center space-x-2 sm:space-x-3">
400                    <svg class="h-6 w-6 sm:h-8 sm:w-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
401                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
402                    </svg>
403                    <h3 class="text-lg sm:text-xl font-bold text-gray-900">Documentation</h3>
404                </div>
405                <p class="text-sm sm:text-base text-gray-600">Read and download our communiques and official documents.</p>
406                <ul class="space-y-1 sm:space-y-2">
407                    <li><a href="https://camtel.cm/documentation" class="block p-2 text-sm sm:text-base text-gray-600 hover:bg-gray-100 text-primary rounded">Access Documentation</a></li>
408                </ul>
409            </div>
410        </div>
411        <!-- End About Us Section -->
412
413        <!-- Services Section -->
414        <div x-cloak x-show="megaMenu === 'services'" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8">
415            <!-- Mobile Service -->
416            <div class="space-y-3 sm:space-y-4">
417                <div class="flex items-center space-x-2 sm:space-x-3">
418                    <svg class="h-6 w-6 sm:h-8 sm:w-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
419                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
420                    </svg>
421                    <h3 class="text-lg sm:text-xl font-bold text-gray-900">Mobile</h3>
422                </div>
423                <p class="text-sm sm:text-base text-gray-600">Stay tuned everywhere with blue, the 100% Cameroonian mobile network. National/international calls &amp; sms, broadband mobile internet, local roaming, and more!</p>
424                <ul class="space-y-1 sm:space-y-2">
425                    <li><a href="https://camtel.cm/services#mobile" class="block p-2 text-sm sm:text-base text-gray-600 hover:bg-gray-100 text-primary rounded">Discover our mobile bundles</a></li>
426                </ul>
427            </div>
428
429            <!-- Fixed Service --> 
430            <div class="space-y-3 sm:space-y-4">
431                <div class="flex items-center space-x-2 sm:space-x-3">
432                    <svg class="h-6 w-6 sm:h-8 sm:w-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
433                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
434                    </svg>
435                    <h3 class="text-lg sm:text-xl font-bold text-gray-900">Landline</h3>
436                </div>
437                <p class="text-sm sm:text-base text-gray-600">Take full advantage of the potential of fibre at home. Unlimited Internet up to 50 Mbps!</p>
438                <ul class="space-y-1 sm:space-y-2">
439                    <li><a href="https://camtel.cm/services#fiber" class="block p-2 text-sm sm:text-base text-gray-600 hover:bg-gray-100 text-primary rounded">Read more</a></li>
440                </ul>
441            </div>
442
443            <!-- Transport Service -->
444            <div class="space-y-3 sm:space-y-4">
445                <a href="https://carrier.camtel.cm/" target="_blank" rel="noopener noreferrer">
446                <div class="flex items-center space-x-2 sm:space-x-3">
447                    <svg class="h-6 w-6 sm:h-8 sm:w-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
448                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
449                    </svg>
450                    <h3 class="text-lg sm:text-xl font-bold text-gray-900">Transport</h3>
451                </div>
452                <p class="text-sm sm:text-base text-gray-600">We are the first-class partner for connectivity at the heart of Africa from the Americas.</p>
453                <ul class="space-y-1 sm:space-y-2">
454                    <li><a href="https://carrier.camtel.cm/" target="_blank" rel="noopener noreferrer" class="block p-2 text-sm sm:text-base text-gray-600 hover:bg-gray-100 text-primary rounded">Read more</a></li>
455                </ul>
456            </div>
457
458            <!-- Data Center Service -->
459            <div class="space-y-3 sm:space-y-4">
460                <div class="flex items-center space-x-2 sm:space-x-3">
461                    <svg class="h-6 w-6 sm:h-8 sm:w-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
462                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
463                    </svg>
464                    <h3 class="text-lg sm:text-xl font-bold text-gray-900">Data Storage</h3>
465                </div>
466                <p class="text-sm sm:text-base text-gray-600">Thanks to our Tier 3 certified datacentre, we guarantee you: a secure backup and restoration, servers and applications, 24/7 availability.</p>
467                <ul class="space-y-1 sm:space-y-2">
468                    <li><a href="https://camtel.cm/services#storage" class="block p-2 text-sm sm:text-base text-gray-600 hover:bg-gray-100 text-primary rounded">Discover our offers</a></li>
469                </ul>
470                
471            </div>
472        </div>
473
474        <!-- Blue Shop Section -->
475        <div x-cloak x-show="megaMenu === 'blue-shop'" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
476            <div class="space-y-3 sm:space-y-4">
477                <div class="flex items-center space-x-2 sm:space-x-3">
478                    <svg class="h-6 w-6 sm:h-8 sm:w-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
479                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
480                    </svg>
481                    <h3 class="text-lg sm:text-xl font-bold text-gray-900">Subscribe</h3>
482                </div>
483                <p class="text-sm sm:text-base text-gray-600">To subscribe to blue, contact an agency, a sale point or an authorised distributor with your national identity card.</p>
484                <ul class="space-y-1 sm:space-y-2">
485                    <li>
486                        <a href="https://camtel.cm/agencies"
487                           class="block p-2 text-sm sm:text-base text-gray-600 hover:bg-gray-100 text-primary rounded">
488                            Our Agencie1s
489                        </a>
490                    </li>
491                    <li>
492                        <a href="https://camtel.cm/coverage/mobile-map"
493                           class="block p-2 text-sm sm:text-base text-gray-600 hover:bg-gray-100 text-primary rounded">
494                            Mobile network coverage
495                        </a>
496                    </li>
497                </ul>
498            </div>
499            <div class="space-y-3 sm:space-y-4">
500                <div class="flex items-center space-x-2 sm:space-x-3">
501                    <svg class="h-6 w-6 sm:h-8 sm:w-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
502                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m1.6 8L5 3H3m4 10v1a2 2 0 002 2h10a2 2 0 002-2v-1M7 13v-1a2 2 0 012-2h6a2 2 0 012 2v1" />
503                    </svg>
504                    <h3 class="text-lg sm:text-xl font-bold text-gray-900">Purchase a terminal</h3>
505                </div>
506                <p class="text-sm sm:text-base text-gray-600">You can purchase your smartphones, modems, routers, Internet modems, accessories.</p>
507                <ul class="space-y-1 sm:space-y-2">
508                    <li><a href="#" class="block p-2 text-sm sm:text-base text-gray-600 hover:bg-gray-100 text-primary rounded">Our terminals</a></li>
509                </ul>
510            </div>
511            <div class="space-y-3 sm:space-y-4">
512                <div class="flex items-center space-x-2 sm:space-x-3">
513                    <svg class="h-6 w-6 sm:h-8 sm:w-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
514                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
515                    </svg>
516                    <h3 class="text-lg sm:text-xl font-bold text-gray-900">Activate a Bundle</h3>
517                </div>
518                <p class="text-sm sm:text-base text-gray-600">Choose and activate a Voice or Data Bundle.</p>
519                <ul class="space-y-1 sm:space-y-2">
520                    <li><a href="https://camtel.cm/services#mobile" class="block p-2 text-sm sm:text-base text-gray-600 hover:bg-gray-100 text-primary rounded">Activate a plan</a></li>
521                </ul>
522            </div>
523        </div>
524        <!-- End Blue Shop Section -->
525
526        <!-- News Section -->
527        <div x-cloak x-show="megaMenu === 'news'" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
528            <!-- News -->
529            <div class="space-y-3 sm:space-y-4">
530                <div class="flex items-center space-x-2 sm:space-x-3">
531                    <svg class="h-6 w-6 sm:h-8 sm:w-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
532                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
533                    </svg>
534                    <h3 class="text-lg sm:text-xl font-bold text-gray-900">Events</h3>    
535                </div>
536                <p class="text-sm sm:text-base text-gray-600">Stay up to date with CAMTEL news.</p>
537                <ul class="space-y-1 sm:space-y-2">
538                    <li><a href="https://camtel.cm/news?type[]=event" class="block p-2 text-sm sm:text-base text-gray-600 hover:bg-gray-100 text-primary rounded">Events</a></li>
539                </ul>
540            </div>
541            <!-- Podcasts -->
542            <div class="space-y-3 sm:space-y-4">
543                <div class="flex items-center space-x-2 sm:space-x-3">
544                    <svg class="h-6 w-6 sm:h-8 sm:w-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
545                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
546                    </svg>
547                    <h3 class="text-lg sm:text-xl font-bold text-gray-900">Podcasts</h3>
548                </div>
549                <p class="text-sm sm:text-base text-gray-600">Listen to Camtel Actu, our radio program.</p>
550                <ul class="space-y-1 sm:space-y-2">
551                    <li><a href="https://camtel.cm/news?type[]=podcast" class="block p-2 text-sm sm:text-base text-gray-600 hover:bg-gray-100 text-primary rounded">Podcasts</a></li>
552                </ul>
553            </div>
554            <!-- Media library -->
555            <div class="space-y-3 sm:space-y-4">
556                <div class="flex items-center space-x-2 sm:space-x-3">
557                    <svg class="h-6 w-6 sm:h-8 sm:w-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
558                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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" />
559                    </svg>
560                    <h3 class="text-lg sm:text-xl font-bold text-gray-900">Media library</h3>
561                </div>
562                <p class="text-sm sm:text-base text-gray-600">Relive the highlights of the company&#039;s life in pictures!</p>
563                <ul class="space-y-1 sm:space-y-2">
564                    <li><a href="https://camtel.cm/news?type[]=media-library" class="block p-2 text-sm sm:text-base text-gray-600 hover:bg-gray-100 text-primary rounded">Browse our gallery</a></li>
565                </ul>
566            </div>
567        </div>
568        <!-- End News Section -->
569
570        <!-- Support Section -->
571        <div x-cloak x-show="megaMenu === 'support'" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8">
572            <!-- Help Center -->
573            <div class="space-y-3 sm:space-y-4">
574                <div class="flex items-center space-x-2 sm:space-x-3">
575                    <svg class="h-6 w-6 sm:h-8 sm:w-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
576                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
577                    </svg>
578                    <h3 class="text-lg sm:text-xl font-bold text-gray-900">Help Center</h3>
579                </div>
580                <p class="text-sm sm:text-base text-gray-600">Find answers to common questions.</p>
581                <ul class="space-y-1 sm:space-y-2">
582                    <li><a href="https://camtel.cm/support#faqs" class="block p-2 text-sm sm:text-base text-gray-600 hover:bg-gray-100 text-primary rounded">FAQs</a></li>
583                   </ul>
584            </div>
585
586            <!-- Contact Us -->
587            <div class="space-y-3 sm:space-y-4">
588                <div class="flex items-center space-x-2 sm:space-x-3">
589                    <svg class="h-6 w-6 sm:h-8 sm:w-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
590                        <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" />
591                    </svg>
592                    <h3 class="text-lg sm:text-xl font-bold text-gray-900">Contact Us</h3>
593                </div>
594                <p class="text-sm sm:text-base text-gray-600">Our support team is at your disposal.</p>
595                <ul class="space-y-1 sm:space-y-2">
596                    <li><a href="#" data-action="open-chatbot" onclick="event.preventDefault(); Livewire.dispatch('open-chatbot');" class="block p-2 text-sm sm:text-base text-gray-600 hover:bg-gray-100 text-primary rounded cursor-pointer">Live Chat</a></li>
597                    <li><a href="https://camtel.cm/support#contact-form" class="block p-2 text-sm sm:text-base text-gray-600 hover:bg-gray-100 text-primary rounded">Leave us a message</a></li>
598                   </ul>
599            </div>
600
601            <!-- Service Centers -->
602            <div class="space-y-3 sm:space-y-4">
603                <div class="flex items-center space-x-2 sm:space-x-3">
604                    <svg class="h-6 w-6 sm:h-8 sm:w-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
605                        <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" />
606                        <path stroke-line
606cap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
607                    </svg>
608                    <h3 class="text-lg sm:text-xl font-bold text-gray-900">In your Vicinity</h3>
609                </div>
610                <p class="text-sm sm:text-base text-gray-600">Find a sales point near you.</p>
611                <ul class="space-y-1 sm:space-y-2">
612                    <li><a href="https://camtel.cm/agencies" class="block p-2 text-sm sm:text-base text-gray-600 hover:bg-gray-100 text-primary rounded">Agency Locations</a></li>
613                </ul>
614            </div>
615
616            <!-- Support Features -->
617            <div class="space-y-3 sm:space-y-4">
618                <div class="flex items-center space-x-2 sm:space-x-3">
619                    <svg class="h-6 w-6 sm:h-8 sm:w-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
620                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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" />
621                    </svg>
622                    <h3 class="text-lg sm:text-xl font-bold text-gray-900">Support Features</h3>
623                </div>
624                <div class="space-y-3 sm:space-y-4">
625                    <div class="bg-gray-100 rounded-lg p-3 sm:p-4">
626                        <h4 class="text-gray-900 font-semibold text-sm sm:text-base">Business Hours Support</h4>
627                        <p class="text-gray-600 text-xs sm:text-sm">Monday to Friday, 8:00 AM to 3:30 PM (GMT+1)</p>
628                    </div>
629                    <div class="bg-gray-100 rounded-lg p-3 sm:p-4">
630                        <h4 class="text-gray-900 font-semibold text-sm sm:text-base">Online Chat</h4>
631                        <p class="text-gray-600 text-xs sm:text-sm">Instant help available</p>
632                    </div>
633                </div>
634            </div>
635        </div>
636        <!-- End Support Section -->
637    </div>
638</div>
639    </div>
640    
641    <!-- Mobile menu -->
642    <div x-cloak x-show="isOpen" 
643         @click.outside="isOpen = false"
644         x-transition:enter="transition ease-out duration-200"
645         x-transition:enter-start="opacity-0 -translate-y-1"
646         x-transition:enter-end="opacity-100 translate-y-0"
647         x-transition:leave="transition ease-in duration-150"
648         x-transition:leave-start="opacity-100 translate-y-0"
649         x-transition:leave-end="opacity-0 -translate-y-1"
650         class="lg:hidden bg-white shadow-lg border-t border-gray-200 absolute left-0 right-0 top-full z-40">
651        <div class="px-4 pt-2 pb-3 space-y-1 max-h-[calc(100vh-200px)] overflow-y-auto">
652            <!-- Mobile Search -->
653            <div class="border-b border-gray-200 pb-3 mb-3">
654                <form action="https://camtel.cm/search" method="GET" class="w-full">
655                    <div class="relative">
656                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
657                            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
658                                <circle cx="11" cy="11" r="8" stroke-width="2"/>
659                                <line x1="21" y1="21" x2="16.65" y2="16.65" stroke-width="2"/>
660                            </svg>
661                        </div>
662                        <input 
663                            type="search" 
664                            name="q" 
665                            placeholder="Search products, services, news..." 
666                            autocomplete="off"
667                            class="w-full pl-10 pr-4 py-3 rounded-lg text-gray-900 bg-gray-50 border border-gray-200 placeholder-gray-500 focus:bg-white focus:border-primary focus:ring-2 focus:ring-primary/10 transition-all duration-200"
668                        >
669                    </div>
670                </form>
671            </div>
672            
673            <!-- Navigation Items -->
674            <div class="space-y-1">
675                <div @click="isOpen = false">
676            <!-- Home -->
677            <div x-data="{ show: false }" class="relative" 
678    @mouseenter="megaMenuOpen = false;"
679    @mouseleave=""
680>
681    <a href="https://camtel.cm" 
682              class="flex items-center px-2 sm:px-3 py-2 sm:py-2.5 text-sm sm:text-base font-bold rounded-md transition-colors duration-200 text-gray-700 hover:bg-gray-100 hover:text-primary"
683    >
684        
685        <span class="flex-1">Home</span>
686
687        
688            </a>
689</div>
690
691
692            
693            <!-- About Us with dropdown -->
694            <div x-data="{ aboutOpen: false }" class="space-y-1" @click.stop>
695                <button @click="aboutOpen = !aboutOpen" class="w-full flex items-center justify-between px-3 py-2 text-left text-gray-700 hover:bg-gray-100 hover:text-primary rounded-md transition-colors duration-200">
696                    <span class="font-bold">About Us</span>
697                    <svg class="h-5 w-5 transition-transform duration-200" :class="{ 'rotate-180': aboutOpen }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
698                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
699                    </svg>
700                </button>
701                <div x-show="aboutOpen" x-transition class="ml-4 space-y-1">
702                    <a href="https://camtel.cm/about" @click="isOpen = false" class="block px-3 py-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded-md">Camtel in nutshell</a>
703                    <a href="https://camtel.cm/coverage" @click="isOpen = false" class="block px-3 py-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded-md">Our network coverage</a>
704                    <a href="https://camtel.cm/documentation" @click="isOpen = false" class="block px-3 py-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded-md">Access Documentation</a>
705                    <a href="http://bluedynamiccoveragemap.camtel.cm/" target="_blank" rel="noopener noreferrer" @click="isOpen = false" class="block px-3 py-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded-md">Mobile Network Coverage</a>
706                </div>
707            </div>
708            
709            <!-- Services -->
710            <div x-data="{ show: false }" class="relative" 
711    @mouseenter="megaMenuOpen = false;"
712    @mouseleave=""
713>
714    <a href="https://camtel.cm/services" 
715              class="flex items-center px-2 sm:px-3 py-2 sm:py-2.5 text-sm sm:text-base font-bold rounded-md transition-colors duration-200 text-gray-700 hover:bg-gray-100 hover:text-primary"
716    >
717        
718        <span class="flex-1">Our Services</span>
719
720        
721            </a>
722</div>
723
724
725            
726            <!-- Blue Shop -->
727             <!--
728                <div x-data="{ show: false }" class="relative" 
729    @mouseenter="megaMenuOpen = false;"
730    @mouseleave=""
731>
732    <a href="https://camtel.cm/blue-shop" 
733              class="flex items-center px-2 sm:px-3 py-2 sm:py-2.5 text-sm sm:text-base font-bold rounded-md transition-colors duration-200 text-gray-700 hover:bg-gray-100 hover:text-primary"
734    >
735        
736        <span class="flex-1">Blue Shop</span>
737
738        
739            </a>
740</div>
741
742
743            -->
744            <!-- News -->
745            <div x-data="{ show: false }" class="relative" 
746    @mouseenter="megaMenuOpen = false;"
747    @mouseleave=""
748>
749    <a href="https://camtel.cm/news" 
750              class="flex items-center px-2 sm:px-3 py-2 sm:py-2.5 text-sm sm:text-base font-bold rounded-md transition-colors duration-200 text-gray-700 hover:bg-gray-100 hover:text-primary"
751    >
752        
753        <span class="flex-1">News</span>
754
755        
756            </a>
757</div>
758
759
760            
761            <!-- Support -->
762            <div x-data="{ show: false }" class="relative" 
763    @mouseenter="megaMenuOpen = false;"
764    @mouseleave=""
765>
766    <a href="https://camtel.cm/support" 
767              class="flex items-center px-2 sm:px-3 py-2 sm:py-2.5 text-sm sm:text-base font-bold rounded-md transition-colors duration-200 text-gray-700 hover:bg-gray-100 hover:text-primary"
768    >
769        
770        <span class="flex-1">Support</span>
771
772        
773            </a>
774</div>
775
776
777            
778            <!-- Careers -->
779            <div x-data="{ show: false }" class="relative" 
780    @mouseenter="megaMenuOpen = false;"
781    @mouseleave=""
782>
783    <a href="https://career.camtel.cm/" 
784              class="flex items-center px-2 sm:px-3 py-2 sm:py-2.5 text-sm sm:text-base font-bold rounded-md transition-colors duration-200 text-gray-700 hover:bg-gray-100 hover:text-primary" target="_blank" rel="noopener noreferrer"
785    >
786        
787        <span class="flex-1">Careers</span>
788
789        
790            </a>
791</div>
792
793
794            
795            <!-- Our Agencies -->
796            <div x-data="{ show: false }" class="relative" 
797    @mouseenter="megaMenuOpen = false;"
798    @mouseleave=""
799>
800    <a href="https://camtel.cm/agencies" 
801              class="flex items-center px-2 sm:px-3 py-2 sm:py-2.5 text-sm sm:text-base font-bold rounded-md transition-colors duration-200 bg-primary/10 text-primary hover:bg-primary/20"
802    >
803        
804        <span class="flex-1">Our Agencies</span>
805
806        
807            </a>
808</div>
809
810
811        </div>
812            </div>
813            
814            <!-- Quick Actions -->
815            <div class="border-t border-gray-200 pt-3 mt-3">
816                <div class="grid grid-cols-2 gap-3">
817                    <!-- Live Chat -->
818                    <button onclick="Livewire.dispatch('open-chatbot'); isOpen = false" class="flex items-center justify-center space-x-2 bg-primary text-white px-4 py-3 rounded-lg font-medium">
819                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
820                            <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"/>
821                        </svg>
822                        <span>Live Chat</span>
823                    </button>
824                    
825                    <!-- Agencies -->
826                    <a href="https://camtel.cm/agencies" class="flex items-center justify-center space-x-2 bg-gray-100 text-gray-700 px-4 py-3 rounded-lg font-medium">
827                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
828                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
829                        </svg>
830                        <span>Agencies</span>
831                    </a>
832                </div>
833            </div>
834        </div>
835    </div>
836</nav>
837
838 
839        <!-- Page Content -->
840        <main class="flex-1 w-full">
841            
842            
843            
844    <div>
845        
846    <section class="relative flex flex-col justify-center items-center overflow-hidden hero-section w-full aspect-video">
847                    <style>
848    .carousel {
849        position: absolute;
850        width: 100%;
851        height: 100%;
852        overflow: hidden;
853    }
854    .carousel .slides {
855        position: relative;
856        width: 100%;
857        height: 100%;
858    }
859    .carousel .slide {
860        position: absolute;
861        inset: 0;
862        opacity: 0;
863        transform: translateZ(0);
864        transition: opacity var(--transition-duration, 1000ms) ease, transform var(--transition-duration, 1000ms) ease;
865        display: flex;
866    }
867    .carousel .slide img {
868        width: 100%;
869        height: auto;
870        object-fit: cover;
871        display: block;
872    }
873    .carousel .slide.active {
874        opacity: 1;
875        z-index: 2;
876    }
877    /* Controls */
878    .carousel .control {
879        position: absolute;
880        top: 50%;
881        transform: translateY(-50%);
882        background: rgba(0,0,0,0.4);
883        color: #fff;
884        border: 0;
885        width: 40px;
886        height: 40px;
887        border-radius: 9999px;
888        cursor: pointer;
889        display: grid;
890        place-items: center;
891        z-index: 3;
892    }
893    .carousel .control:hover {
894        background: rgba(0,0,0,0.6);
895    }
896    .carousel .control.prev {
897        left: 8px;
898    }
899    .carousel .control.next {
900        right: 8px;
901    }
902    /* Indicators */
903    .carousel .indicators {
904        position: absolute;
905        left: 50%;
906        transform: translateX(-50%);
907        bottom: 10px;
908        display: flex;
909        gap: 8px;
910        z-index: 3;
911    }
912    .carousel .indicator {
913        width: 8px;
914        height: 8px;
915        border-radius: 9999px;
916        background: rgba(255,255,255,0.5);
917        cursor: pointer;
918        border: 1px solid rgba(0,0,0,0.15);
919    }
920    .carousel .indicator.active {
921        background: #fff;
922    }
923    /* Animation helpers */
924    .anim-fade-in { animation: fadeIn var(--transition-duration, 600ms) ease both; }
925    .anim-zoom-in { animation: zoomIn var(--transition-duration, 600ms) ease both; }
926    .anim-rotate-in { animation: rotateIn var(--transition-duration, 600ms) ease both; }
927    .anim-flip-in { animation: flipIn var(--transition-duration, 600ms) ease both; }
928    .anim-bounce-in { animation: bounceIn var(--transition-duration, 600ms) ease both; }
929    .anim-scale-in { animation: scaleIn var(--transition-duration, 600ms) ease both; }
930    .anim-slide-left-in { animation: slideLeftIn var(--transition-duration, 600ms) ease both; }
931    .anim-slide-right-in { animation: slideRightIn var(--transition-duration, 600ms) ease both; }
932    .anim-slide-up-in { animation: slideUpIn var(--transition-duration, 600ms) ease both; }
933    .anim-slide-down-in { animation: slideDownIn var(--transition-duration, 600ms) ease both; }
934    @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
935    @keyframes zoomIn { from { opacity: 0; transform: scale(1.05) } to { opacity: 1; transform: scale(1) } }
936    @keyframes rotateIn { from { opacity: 0; transform: rotate(-8deg) scale(1.02) } to { opacity: 1; transform: rotate(0) scale(1) } }
937    @keyframes flipIn { from { opacity: 0; transform: rotateY(70deg) } to { opacity: 1; transform: rotateY(0) } }
938    @keyframes bounceIn { 0% { opacity: 0; transform: translateY(20px) } 60% { opacity: 1; transform: translateY(-6px) } 100% { transform: translateY(0) } }
939    @keyframes scaleIn { from { opacity: 0; transform: scale(0.98) } to { opacity: 1; transform: scale(1) } }
940    @keyframes slideLeftIn { from { opacity: 0; transform: translateX(20px) } to { opacity: 1; transform: translateX(0) } }
941    @keyframes slideRightIn { from { opacity: 0; transform: translateX(-20px) } to { opacity: 1; transform: translateX(0) } }
942    @keyframes slideUpIn { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } }
943    @keyframes slideDownIn { from { opacity: 0; transform: translateY(-20px) } to { opacity: 1; transform: translateY(0) } }
944</style>
945
946<div
947    id="carousel_6abe3281d7f0d"
948    class="carousel bg-primary"
949    data-animation="fade"
950    data-interval="5000"
951    data-transition-duration="1000"
952    style="--transition-duration: 1000ms;"
953>
954    <div class="slides">
955                    <div class="slide active">
956                <img
957                    src="https://camtel.cm/images/slide1.png"
958                    alt="Slide 1"
959                >
960                </div>
961                    </div>
962    </div>
963
964<script>
965    (function () {
966        var root = document.getElementById("carousel_6abe3281d7f0d");
967        if (!root) return;
968        var slides = Array.prototype.slice.call(root.querySelectorAll('.slide'));
969        if (slides.length === 0) return;
970        var indicators = Array.prototype.slice.call(root.querySelectorAll('.indicator'));
971        var prevBtn = root.querySelector('.control.prev');
972        var nextBtn = root.querySelector('.control.next');
973        var animation = root.getAttribute('data-animation') || 'fade';
974        var intervalMs = parseInt(root.getAttribute('data-interval') || '5000', 10);
975        var transitionDuration = parseInt(root.getAttribute('data-transition-duration') || '1000', 10);
976        var current = 0;
977        var timer = null;
978
979        function clearAnimClasses(el) {
980            var classes = [
981                'anim-fade-in', 'anim-zoom-in', 'anim-rotate-in', 'anim-flip-in', 'anim-bounce-in', 'anim-scale-in',
982                'anim-slide-left-in', 'anim-slide-right-in', 'anim-slide-up-in', 'anim-slide-down-in'
983            ];
984            classes.forEach(function (c) { el.classList.remove(c); });
985        }
986
987        function animClassFor(animation) {
988            switch (animation) {
989                case 'fade': return 'anim-fade-in';
990                case 'zoom': return 'anim-zoom-in';
991                case 'rotate': return 'anim-rotate-in';
992                case 'flip': return 'anim-flip-in';
993                case 'bounce': return 'anim-bounce-in';
994                case 'scale': return 'anim-scale-in';
995                case 'slide-left': return 'anim-slide-left-in';
996                case 'slide-right': return 'anim-slide-right-in';
997                case 'slide-up': return 'anim-slide-up-in';
998                case 'slide-down': return 'anim-slide-down-in';
999                case 'slide': return 'anim-slide-left-in';
1000                default: return 'anim-fade-in';
1001            }
1002        }
1003
1004        function show(index) {
1005            if (index === current) return;
1006            var prev = slides[current];
1007            var next = slides[index];
1008            if (!next) return;
1009
1010            prev.classList.remove('active');
1011            clearAnimClasses(prev);
1012
1013            next.classList.add('active');
1014            clearAnimClasses(next);
1015            next.classList.add(animClassFor(animation));
1016
1017            indicators.forEach(function (ind) { ind.classList.remove('active'); });
1018            if (indicators[index]) indicators[index].classList.add('active');
1019
1020            current = index;
1021        }
1022
1023        function next() { show((current + 1) % slides.length); }
1024        function prev() { show((current - 1 + slides.length) % slides.length); }
1025
1026        function start() { if (timer) stop(); timer = setInterval(next, intervalMs); }
1027        function stop() { if (timer) { clearInterval(timer); timer = null; } }
1028
1029        if (nextBtn) nextBtn.addEventListener('click', function () { stop(); next(); start(); });
1030        if (prevBtn) prevBtn.addEventListener('click', function () { stop(); prev(); start(); });
1031        indicators.forEach(function (ind) {
1032            ind.addEventListener('click', function () {
1033                var idx = parseInt(ind.getAttribute('data-index'), 10);
1034                if (!isNaN(idx)) { stop(); show(idx); start(); }
1035            });
1036        });
1037
1038        // Touch support
1039        var startX = 0, endX = 0;
1040        root.addEventListener('touchstart', function (e) { startX = e.changedTouches[0].screenX; }, { passive: true });
1041        root.addEventListener('touchend', function (e) {
1042            endX = e.changedTouches[0].screenX;
1043            var delta = endX - startX;
1044            if (Math.abs(delta) > 30) { stop(); (delta < 0 ? next : prev)(); start(); }
1045        });
1046
1047        // Initialize
1048        slides[0].classList.add('active');
1049        if (indicators[0]) indicators[0].classList.add('active');
1050        if (slides.length > 1) start();
1051})();
1052</script>
1052                
1053                    <div class="absolute inset-0 bg-black opacity-70 pointer-events-none" style="z-index: 20; background-color: rgba(0, 0, 0, 0.5) !important;"></div>
1054                
1055        
1056                
1057                    <div class="flex justify-center relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full" style="z-index: 30;">
1058                    <div class="w-full lg:w-2/3 flex flex-col justify-center items-center text-center">        
1059                                <div class="max-w-4xl mx-auto">
1060                    <h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-extrabold font-roboto text-white mb-4 sm:mb-6 leading-tight">Agency Locator</h1>
1061                    <p class="text-lg sm:text-xl md:text-2xl lg:text-3xl text-gray-200 mb-6 sm:mb-8 font-roboto leading-relaxed">Find the nearest Camtel agency</p>
1062                </div>
1063                                                <div class="flex flex-col sm:flex-row justify-center items-center gap-3 sm:gap-4 lg:gap-6 w-full max-w-md 
1063sm:max-w-none hero-buttons">          
1064                                            
1065                                                        </div>
1066                            </div>
1067        </div>
1068    </section> 
1069
1070    <!-- Modal Advert Popup -->
1071    <div id="hero-advert-modal" class="hidden fixed inset-0 z-50 items-center justify-center">
1072        <div class="absolute inset-0 bg-black/60 transition-opacity duration-300"></div>
1073        <div class="relative bg-white rounded-3xl max-w-5xl w-full mx-4 p-6 sm:p-8 lg:p-10 shadow-2xl transform scale-95 opacity-0 transition-all duration-300">
1074            <!-- Close Button -->
1075            <button id="hero-advert-close" class="absolute top-6 right-6 text-gray-400 hover:text-gray-600 transition-colors duration-200 z-10">
1076                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1077                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
1078                </svg>
1079            </button>
1080            
1081            <!-- Body: image + content layout -->
1082            <div class="grid md:grid-cols-2 gap-6 lg:gap-8 items-center">
1083                <!-- Image Container (Optional) -->
1084                <div id="hero-advert-image" class="overflow-hidden rounded-2xl shadow-xl h-80 md:h-96"></div>
1085
1086                <!-- Content -->
1087                <div class="text-center md:text-left">
1088                    <h3 id="hero-advert-title" class="text-2xl sm:text-3xl font-extrabold mb-3 text-gray-900 tracking-tight"></h3>
1089                    <div id="hero-advert-content" class="text-base sm:text-lg lg:text-xl text-gray-600 leading-relaxed mb-6"></div>
1090                    
1091                    <!-- CTA Button -->
1092                    <div class="flex justify-center md:justify-start">
1093                        <a id="hero-advert-cta" href="#" class="inline-block w-full md:w-auto bg-primary text-white font-extrabold text-lg sm:text-xl px-6 sm:px-8 lg:px-10 py-4 sm:py-4 lg:py-5 rounded-2xl hover:bg-primary-dark transition-all duration-200 transform hover:scale-105 shadow-xl"></a>
1094                    </div>
1095                </div>
1096            </div>
1097        </div>
1098    </div>
1099
1100     
1101</div>    
1102    
1103<div class="container mx-auto py-8 sm:py-12 px-4 sm:px-6 lg:px-8">
1104    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8 lg:gap-12">
1105        <!-- Enhanced Map Container -->
1106        <div class="order-2 lg:order-1 lg:sticky lg:top-6">
1107            <div class="relative">
1108                <div id="map" class="rounded-2xl shadow-2xl border border-gray-100" style="height: 400px; sm:height: 500px; lg:height: 700px;"></div>
1109                <div class="absolute top-4 left-4 bg-white/90 backdrop-blur-sm rounded-xl p-3 shadow-lg">
1110                    <div class="flex items-center space-x-2">
1111                        <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
1112                        <span class="text-sm font-medium text-gray-700">102 Agencies</span>
1113                    </div>
1114                </div>
1115            </div>
1116        </div>
1117
1118        <!-- Modern Agency List -->
1119        <div class="order-1 lg:order-2 bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
1120            <!-- Enhanced Search Header -->
1121            <div class="sticky top-0 bg-white/95 backdrop-blur-sm p-4 sm:p-6 border-b border-gray-100 z-20">
1122                <div class="relative">
1123                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
1124                        <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1125                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
1126                        </svg>
1127                    </div>
1128                    <input type="text" 
1129                           id="search" 
1130                           class="w-full pl-12 pr-4 py-3 sm:py-4 border-0 rounded-xl bg-gray-50 focus:bg-white focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all duration-300 text-gray-700 placeholder-gray-500 text-sm sm:text-base" 
1131                           placeholder="Search agencies by name, city, or address..."
1132                           autocomplete="off">
1133                </div>
1134                <div class="mt-3 flex flex-col sm:flex-row sm:items-center sm:justify-between text-sm text-gray-500 gap-2 sm:gap-0">
1135                    <span>Found 102 agencies</span>
1136                    <div class="flex items-center space-x-1">
1137                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1138                            <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"/>
1139                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
1140                        </svg>
1141                        <span>Interactive Map</span>
1142                    </div>
1143                </div>
1144            </div>
1145
1146            <!-- Enhanced Agency List -->
1147            <div class="overflow-y-auto" style="max-height: 400px; sm:max-height: 500px; lg:max-height: 600px;">
1148                <ul id="agency-list" class="divide-y divide-gray-100">
1149                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
1150                            data-lat="3.85" 
1151                            data-lng="11.50"
1152                            data-name="Camtel Head Office"
1153                            data-address="Boulevard de la Liberté"
1154                            data-city="Yaoundé"
1155                            data-phone="+237 222 22 22 22">
1156                            <div class="flex items-start space-x-3 sm:space-x-4">
1157                                <!-- Agency Icon -->
1158                                <div class="flex-shrink-0">
1159                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
1160                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1161                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1162                                        </svg>
1163                                    </div>
1164                                </div>
1165
1166                                <!-- Agency Details -->
1167                                <div class="flex-1 min-w-0">
1168                                    <div class="flex items-start justify-between">
1169                                        <div class="flex-1">
1170                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
1171                                                Camtel Head Office
1172                                            </h3>
1173                                            <div class="mt-2 space-y-1">
1174                                                <div class="flex items-start text-gray-600">
1175                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1176                                                        <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"/>
1177                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
1178                                                    </svg>
1179                                                    <span class="text-xs sm:text-sm break-words">Boulevard de la Liberté</span>
1180                                                </div>
1181                                                <div class="flex items-center text-gray-600">
1182                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1183                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1184                                                    </svg>
1185                                                    <span class="text-xs sm:text-sm font-medium">Yaoundé</span>
1186                                                </div>
1187                                                <div class="flex items-center text-gray-600">
1188                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1189                                                        <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"/>
1190                                                    </svg>
1191                                                    <span class="text-xs sm:text-sm">+237 222 22 22 22</span>
1192                                                </div>
1193                                            </div>
1194                                        </div>
1195
1196                                        <!-- Action Button -->
1197                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
1198                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
1199                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1200                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
1201                                                </svg>
1202                                            </button>
1203                                        </div>
1204                                    </div>
1205                                </div>
1206                            </div>
1207                        </li>
1208                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
1209                            data-lat="4.05" 
1210                            data-lng="9.77"
1211                            data-name="Camtel Douala Central"
1212                            data-address="Boulevard de la République"
1213                            data-city="Douala"
1214                            data-phone="+237 233 42 42 42">
1215                            <div class="flex items-start space-x-3 sm:space-x-4">
1216                                <!-- Agency Icon -->
1217                                <div class="flex-shrink-0">
1218                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
1219                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1220                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1221                                        </svg>
1222                                    </div>
1223                                </div>
1224
1225                                <!-- Agency Details -->
1226                                <div class="flex-1 min-w-0">
1227                                    <div class="flex items-start justify-between">
1228                                        <div class="flex-1">
1229                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
1230                                                Camtel Douala Central
1231                                            </h3>
1232                                            <div class="mt-2 space-y-1">
1233                                                <div class="flex items-start text-gray-600">
1234                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1235                                                        <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"/>
1236                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
1237                                                    </svg>
1238                                                    <span class="text-xs sm:text-sm break-words">Boulevard de la République</span>
1239                                                </div>
1240                                                <div class="flex items-center text-gray-600">
1241                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1242                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1243                                                    </svg>
1244                                                    <span class="text-xs sm:text-sm font-medium">Douala</span>
1245                                                </div>
1246                                                <div class="flex items-center text-gray-600">
1247                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1248                                                        <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"/>
1249                                                    </svg>
1250                                                    <span class="text-xs sm:text-sm">+237 233 42 42 42</span>
1251                                                </div>
1252                                            </div>
1253                                        </div>
1254
1255                                        <!-- Action Button -->
1256                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
1257                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
1258                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1259                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
1260                                                </svg>
1261                                            </button>
1262                                        </div>
1263                                    </div>
1264                                </div>
1265                            </div>
1266                        </li>
1267                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
1268                            data-lat="5.96" 
1269                            data-lng="10.15"
1270                            data-name="Camtel Bamenda"
1271                            data-address="Commercial Avenue"
1272                            data-city="Bamenda"
1273                            data-phone="+237 233 36 36 36">
1274                            <div class="flex items-start space-x-3 sm:space-x-4">
1275                                <!-- Agency Icon -->
1276                                <div class="flex-shrink-0">
1277                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
1278                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1279                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1280                                        </svg>
1281                                    </div>
1282                                </div>
1283
1284                                <!-- Agency Details -->
1285                                <div class="flex-1 min-w-0">
1286                                    <div class="flex items-start justify-between">
1287                                        <div class="flex-1">
1288                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
1289                                                Camtel Bamenda
1290                                            </h3>
1291                                            <div class="mt-2 space-y-1">
1292                                                <div class="flex items-start text-gray-600">
1293                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1294                                                        <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"/>
1295                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
1296                                                    </svg>
1297                                                    <span class="text-xs sm:text-sm break-words">Commercial Avenue</span>
1298                                                </div>
1299                                                <div class="flex items-center text-gray-600">
1300                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1301                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1302                                                    </svg>
1303                                                    <span class="text-xs sm:text-sm font-medium">Bamenda</span>
1304                                                </div>
1305                                                <div class="flex items-center text-gray-600">
1306                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1307                                                        <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"/>
1308                                                    </svg>
1309                                                    <span class="text-xs sm:text-sm">+237 233 36 36 36</span>
1310                                                </div>
1311                                            </div>
1312                                        </div>
1313
1314                                        <!-- Action Button -->
1315                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
1316                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
1317                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1318                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
1319                                                </svg>
1320                                            </button>
1321                                        </div>
1322                                    </div>
1323                                </div>
1324                            </div>
1325                        </li>
1326                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
1327                            data-lat="5.47" 
1328                            data-lng="10.42"
1329                            data-name="Camtel Bafoussam"
1330                            data-address="Avenue des Banques"
1331                            data-city="Bafoussam"
1332                            data-phone="+237 233 46 46 46">
1333                            <div class="flex items-start space-x-3 sm:space-x-4">
1334                                <!-- Agency Icon -->
1335                                <div class="flex-shrink-0">
1336                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
1337                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1338                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1339                                        </svg>
1340                                    </div>
1341                                </div>
1342
1343                                <!-- Agency Details -->
1344                                <div class="flex-1 min-w-0">
1345                                    <div class="flex items-start justify-between">
1346                                        <div class="flex-1">
1347                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
1348                                                Camtel Bafoussam
1349                                            </h3>
1350                                            <div class="mt-2 space-y-1">
1351                                                <div class="flex items-start text-gray-600">
1352                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1353                                                        <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"/>
1354                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
1355                                                    </svg>
1356                                                    <span class="text-xs sm:text-sm break-words">Avenue des Banques</span>
1357                                                </div>
1358                                                <div class="flex items-center text-gray-600">
1359                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1360                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1361                                                    </svg>
1362                                                    <span class="text-xs sm:text-sm font-medium">Bafoussam</span>
1363                                                </div>
1364                                                <div class="flex items-center text-gray-600">
1365                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1366                                                        <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"/>
1367                                                    </svg>
1368                                                    <span class="text-xs sm:text-sm">+237 233 46 46 46</span>
1369                                                </div>
1370                                            </div>
1371                                        </div>
1372
1373                                        <!-- Action Button -->
1374                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
1375                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
1376                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1377                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
1378                                                </svg>
1379                                            </button>
1380                                        </div>
1381                                    </div>
1382                                </div>
1383                            </div>
1384                        </li>
1385                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
1386                            data-lat="9.30" 
1387                            data-lng="13.40"
1388                            data-name="Camtel Garoua"
1389                            data-address="Boulevard Principal"
1390                            data-city="Garoua"
1391                            data-phone="+237 233 27 27 27">
1392                            <div class="flex items-start space-x-3 sm:space-x-4">
1393                                <!-- Agency Icon -->
1394                                <div class="flex-shrink-0">
1395                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
1396                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1397                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1398                                        </svg>
1399                                    </div>
1400                                </div>
1401
1402                                <!-- Agency Details -->
1403                                <div class="flex-1 min-w-0">
1404                                    <div class="flex items-start justify-between">
1405                                        <div class="flex-1">
1406                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
1407                                                Camtel Garoua
1408                                            </h3>
1409                                            <div class="mt-2 space-y-1">
1410                                                <div class="flex items-start text-gray-600">
1411                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1412                                                        <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"/>
1413                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
1414                                                    </svg>
1415                                                    <span class="text-xs sm:text-sm break-words">Boulevard Principal</span>
1416                                                </div>
1417                                                <div class="flex items-center text-gray-600">
1418                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1419                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1420                                                    </svg>
1421                                                    <span class="text-xs sm:text-sm font-medium">Garoua</span>
1422                                                </div>
1423                                                <div class="flex items-center text-gray-600">
1424                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1425                                                        <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"/>
1426                                                    </svg>
1427                                                    <span class="text-xs sm:text-sm">+237 233 27 27 27</span>
1428                                                </div>
1429                                            </div>
1430                                        </div>
1431
1432                                        <!-- Action Button -->
1433                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
1434                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
1435                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1436                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
1437                                                </svg>
1438                                            </button>
1439                                        </div>
1440                                    </div>
1441                                </div>
1442                            </div>
1443                        </li>
1444                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
1445                            data-lat="10.59" 
1446                            data-lng="14.32"
1447                            data-name="Camtel Maroua"
1448                            data-address="Avenue du Marché"
1449                            data-city="Maroua"
1450                            data-phone="+237 233 29 29 29">
1451                            <div class="flex items-start space-x-3 sm:space-x-4">
1452                                <!-- Agency Icon -->
1453                                <div class="flex-shrink-0">
1454                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
1455                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1456                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1457                                        </svg>
1458                                    </div>
1459                                </div>
1460
1461                                <!-- Agency Details -->
1462                                <div class="flex-1 min-w-0">
1463                                    <div class="flex items-start justify-between">
1464                                        <div class="flex-1">
1465                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
1466                                                Camtel Maroua
1467                                            </h3>
1468                                            <div class="mt-2 space-y-1">
1469                                                <div class="flex items-start text-gray-600">
1470                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1471                                                        <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"/>
1472                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
1473                                                    </svg>
1474                                                    <span class="text-xs sm:text-sm break-words">Avenue du Marché</span>
1475                                                </div>
1476                                                <div class="flex items-center text-gray-600">
1477                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1478                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1479                                                    </svg>
1480                                                    <span class="text-xs sm:text-sm font-medium">Maroua</span>
1481                                                </div>
1482                                                <div class="flex items-center text-gray-600">
1483                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1484                                                        <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"/>
1485                                                    </svg>
1486                                                    <span class="text-xs sm:text-sm">+237 233 29 29 29</span>
1487                                                </div>
1488                                            </div>
1489                                        </div>
1490
1491                                        <!-- Action Button -->
1492                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
1493                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
1494                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1495                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
1496                                                </svg>
1497                                            </button>
1498                                        </div>
1499                                    </div>
1500                                </div>
1501                            </div>
1502                        </li>
1503                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
1504                            data-lat="2.93" 
1505                            data-lng="9.92"
1506                            data-name="Camtel Kribi"
1507                            data-address="Boulevard Maritime"
1508                            data-city="Kribi"
1509                            data-phone="+237 233 32 32 32">
1510                            <div class="flex items-start space-x-3 sm:space-x-4">
1511                                <!-- Agency Icon -->
1512                                <div class="flex-shrink-0">
1513                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
1514                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1515                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1516                                        </svg>
1517                                    </div>
1518                                </div>
1519
1520                                <!-- Agency Details -->
1521                                <div class="flex-1 min-w-0">
1522                                    <div class="flex items-start justify-between">
1523                                        <div class="flex-1">
1524                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
1525                                                Camtel Kribi
1526                                            </h3>
1527                                            <div class="mt-2 space-y-1">
1528                                                <div class="flex items-start text-gray-600">
1529                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1530                                                        <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"/>
1531                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
1532                                                    </svg>
1533                                                    <span class="text-xs sm:text-sm break-words">Boulevard Maritime</span>
1534                                                </div>
1535                                                <div class="flex items-center text-gray-600">
1536                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1537                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1538                                                    </svg>
1539                                                    <span class="text-xs sm:text-sm font-medium">Kribi</span>
1540                                                </div>
1541                                                <div class="flex items-center text-gray-600">
1542                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1543                                                        <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"/>
1544                                                    </svg>
1545                                                    <span class="text-xs sm:text-sm">+237 233 32 32 32</span>
1546                                                </div>
1547                                            </div>
1548                                        </div>
1549
1550                                        <!-- Action Button -->
1551                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
1552                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
1553                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1554                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
1555                                                </svg>
1556                                            </button>
1557                                        </div>
1558                                    </div>
1559                                </div>
1560                            </div>
1561                        </li>
1562                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
1563                            data-lat="2.93" 
1564                            data-lng="9.92"
1565                            data-name="Camtel Kribi"
1566                            data-address="Boulevard Maritime"
1567                            data-city="Kribi"
1568                            data-phone="+237 233 32 32 32">
1569                            <div class="flex items-start space-x-3 sm:space-x-4">
1570                                <!-- Agency Icon -->
1571                                <div class="flex-shrink-0">
1572                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
1573                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1574                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1575                                        </svg>
1576                                    </div>
1577                                </div>
1578
1579                                <!-- Agency Details -->
1580                                <div class="flex-1 min-w-0">
1581                                    <div class="flex items-start justify-between">
1582                                        <div class="flex-1">
1583                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
1584                                                Camtel Kribi
1585                                            </h3>
1586                                            <div class="mt-2 space-y-1">
1587                                                <div class="flex items-start text-gray-600">
1588                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1589                                                        <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"/>
1590                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
1591                                                    </svg>
1592                                                    <span class="text-xs sm:text-sm break-words">Boulevard Maritime</span>
1593                                                </div>
1594                                                <div class="flex items-center text-gray-600">
1595                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1596                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1597                                                    </svg>
1598                                                    <span class="text-xs sm:text-sm font-medium">Kribi</span>
1599                                                </div>
1600                                                <div class="flex items-center text-gray-600">
1601                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1602                                                        <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"/>
1603                                                    </svg>
1604                                                    <span class="text-xs sm:text-sm">+237 233 32 32 32</span>
1605                                                </div>
1606                                            </div>
1607                                        </div>
1608
1609                                        <!-- Action Button -->
1610                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
1611                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
1612                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1613                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
1614                                                </svg>
1615                                            </button>
1616                                        </div>
1617                                    </div>
1618                                </div>
1619                            </div>
1620                        </li>
1621                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
1622                            data-lat="4.17" 
1623                            data-lng="9.23"
1624                            data-name="Camtel Buea"
1625                            data-address="Mile 17 Road"
1626                            data-city="Buea"
1627                            data-phone="+237 233 33 33 33">
1628                            <div class="flex items-start space-x-3 sm:space-x-4">
1629                                <!-- Agency Icon -->
1630                                <div class="flex-shrink-0">
1631                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
1632                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1633                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1634                                        </svg>
1635                                    </div>
1636                                </div>
1637
1638                                <!-- Agency Details -->
1639                                <div class="flex-1 min-w-0">
1640                                    <div class="flex items-start justify-between">
1641                                        <div class="flex-1">
1642                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
1643                                                Camtel Buea
1644                                            </h3>
1645                                            <div class="mt-2 space-y-1">
1646                                                <div class="flex items-start text-gray-600">
1647                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1648                                                        <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"/>
1649                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
1650                                                    </svg>
1651                                                    <span class="text-xs sm:text-sm break-words">Mile 17 Road</span>
1652                                                </div>
1653                                                <div class="flex items-center text-gray-600">
1654                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1655                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1656                                                    </svg>
1657                                                    <span class="text-xs sm:text-sm font-medium">Buea</span>
1658                                                </div>
1659                                                <div class="flex items-center text-gray-600">
1660                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1661                                                        <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"/>
1662                                                    </svg>
1663                                                    <span class="text-xs sm:text-sm">+237 233 33 33 33</span>
1664                                                </div>
1665                                            </div>
1666                                        </div>
1667
1668                                        <!-- Action Button -->
1669                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
1670                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
1671                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1672                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
1673                                                </svg>
1674                                            </button>
1675                                        </div>
1676                                    </div>
1677                                </div>
1678                            </div>
1679                        </li>
1680                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
1681                            data-lat="4.58" 
1682                            data-lng="13.68"
1683                            data-name="Camtel Bertoua"
1684                            data-address="Avenue Centrale"
1685                            data-city="Bertoua"
1686                            data-phone="+237 233 22 22 22">
1687                            <div class="flex items-start space-x-3 sm:space-x-4">
1688                                <!-- Agency Icon -->
1689                                <div class="flex-shrink-0">
1690                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
1691                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1692                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1693                                        </svg>
1694                                    </div>
1695                                </div>
1696
1697                                <!-- Agency Details -->
1698                                <div class="flex-1 min-w-0">
1699                                    <div class="flex items-start justify-between">
1700                                        <div class="flex-1">
1701                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
1702                                                Camtel Bertoua
1703                                            </h3>
1704                                            <div class="mt-2 space-y-1">
1705                                                <div class="flex items-start text-gray-600">
1706                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1707                                                        <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"/>
1708                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
1709                                                    </svg>
1710                                                    <span class="text-xs sm:text-sm break-words">Avenue Centrale</span>
1711                                                </div>
1712                                                <div class="flex items-center text-gray-600">
1713                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1714                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1715                                                    </svg>
1716                                                    <span class="text-xs sm:text-sm font-medium">Bertoua</span>
1717                                                </div>
1718                                                <div class="flex items-center text-gray-600">
1719                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1720                                                        <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"/>
1721                                                    </svg>
1722                                                    <span class="text-xs sm:text-sm">+237 233 22 22 22</span>
1723                                                </div>
1724                                            </div>
1725                                        </div>
1726
1727                                        <!-- Action Button -->
1728                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
1729                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
1730                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1731                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
1732                                                </svg>
1733                                            </button>
1734                                        </div>
1735                                    </div>
1736                                </div>
1737                            </div>
1738                        </li>
1739                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
1740                            data-lat="2.90" 
1741                            data-lng="11.15"
1742                            data-name="Camtel Ebolowa"
1743                            data-address="Route Nationale"
1744                            data-city="Ebolowa"
1745                            data-phone="+237 233 44 44 44">
1746                            <div class="flex items-start space-x-3 sm:space-x-4">
1747                                <!-- Agency Icon -->
1748                                <div class="flex-shrink-0">
1749                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
1750                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1751                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1752                                        </svg>
1753                                    </div>
1754                                </div>
1755
1756                                <!-- Agency Details -->
1757                                <div class="flex-1 min-w-0">
1758                                    <div class="flex items-start justify-between">
1759                                        <div class="flex-1">
1760                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
1761                                                Camtel Ebolowa
1762                                            </h3>
1763                                            <div class="mt-2 space-y-1">
1764                                                <div class="flex items-start text-gray-600">
1765                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1766                                                        <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"/>
1767                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
1768                                                    </svg>
1769                                                    <span class="text-xs sm:text-sm break-words">Route Nationale</span>
1770                                                </div>
1771                                                <div class="flex items-center text-gray-600">
1772                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1773                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1774                                                    </svg>
1775                                                    <span class="text-xs sm:text-sm font-medium">Ebolowa</span>
1776                                                </div>
1777                                                <div class="flex items-center text-gray-600">
1778                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1779                                                        <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"/>
1780                                                    </svg>
1781                                                    <span class="text-xs sm:text-sm">+237 233 44 44 44</span>
1782                                                </div>
1783                                            </div>
1784                                        </div>
1785
1786                                        <!-- Action Button -->
1787                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
1788                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
1789                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1790                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
1791                                                </svg>
1792                                            </button>
1793                                        </div>
1794                                    </div>
1795                                </div>
1796                            </div>
1797                        </li>
1798                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
1799                            data-lat="7.32" 
1800                            data-lng="13.58"
1801                            data-name="Camtel Ngaoundéré"
1802                            data-address="Boulevard Principal"
1803                            data-city="Ngaoundéré"
1804                            data-phone="+237 233 25 25 25">
1805                            <div class="flex items-start space-x-3 sm:space-x-4">
1806                                <!-- Agency Icon -->
1807                                <div class="flex-shrink-0">
1808                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
1809                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1810                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1811                                        </svg>
1812                                    </div>
1813                                </div>
1814
1815                                <!-- Agency Details -->
1816                                <div class="flex-1 min-w-0">
1817                                    <div class="flex items-start justify-between">
1818                                        <div class="flex-1">
1819                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
1820                                                Camtel Ngaoundéré
1821                                            </h3>
1822                                            <div class="mt-2 space-y-1">
1823                                                <div class="flex items-start text-gray-600">
1824                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1825                                                        <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"/>
1826                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
1827                                                    </svg>
1828                                                    <span class="text-xs sm:text-sm break-words">Boulevard Principal</span>
1829                                                </div>
1830                                                <div class="flex items-center text-gray-600">
1831                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1832                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1833                                                    </svg>
1834                                                    <span class="text-xs sm:text-sm font-medium">Ngaoundéré</span>
1835                                                </div>
1836                                                <div class="flex items-center text-gray-600">
1837                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1838                                                        <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"/>
1839                                                    </svg>
1840                                                    <span class="text-xs sm:text-sm">+237 233 25 25 25</span>
1841                                                </div>
1842                                            </div>
1843                                        </div>
1844
1845                                        <!-- Action Button -->
1846                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
1847                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
1848                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1849                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
1850                                                </svg>
1851                                            </button>
1852                                        </div>
1853                                    </div>
1854                                </div>
1855                            </div>
1856                        </li>
1857                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
1858                            data-lat="3.80" 
1859                            data-lng="10.13"
1860                            data-name="Camtel Edea"
1861                            data-address="Route Industrielle"
1862                            data-city="Edea"
1863                            data-phone="+237 233 42 42 42">
1864                            <div class="flex items-start space-x-3 sm:space-x-4">
1865                                <!-- Agency Icon -->
1866                                <div class="flex-shrink-0">
1867                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
1868                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1869                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1870                                        </svg>
1871                                    </div>
1872                                </div>
1873
1874                                <!-- Agency Details -->
1875                                <div class="flex-1 min-w-0">
1876                                    <div class="flex items-start justify-between">
1877                                        <div class="flex-1">
1878                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
1879                                                Camtel Edea
1880                                            </h3>
1881                                            <div class="mt-2 space-y-1">
1882                                                <div class="flex items-start text-gray-600">
1883                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1884                                                        <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"/>
1885                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
1886                                                    </svg>
1887                                                    <span class="text-xs sm:text-sm break-words">Route Industrielle</span>
1888                                                </div>
1889                                                <div class="flex items-center text-gray-600">
1890                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1891                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1892                                                    </svg>
1893                                                    <span class="text-xs sm:text-sm font-medium">Edea</span>
1894                                                </div>
1895                                                <div class="flex items-center text-gray-600">
1896                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1897                                                        <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"/>
1898                                                    </svg>
1899                                                    <span class="text-xs sm:text-sm">+237 233 42 42 42</span>
1900                                                </div>
1901                                            </div>
1902                                        </div>
1903
1904                                        <!-- Action Button -->
1905                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
1906                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
1907                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1908                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
1909                                                </svg>
1910                                            </button>
1911                                        </div>
1912                                    </div>
1913                                </div>
1914                            </div>
1915                        </li>
1916                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
1917                            data-lat="12.08" 
1918                            data-lng="15.03"
1919                            data-name="Camtel Kousseri"
1920                            data-address="Avenue du Marché"
1921                            data-city="Kousseri"
1922                            data-phone="+237 233 28 28 28">
1923                            <div class="flex items-start space-x-3 sm:space-x-4">
1924                                <!-- Agency Icon -->
1925                                <div class="flex-shrink-0">
1926                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
1927                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1928                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1929                                        </svg>
1930                                    </div>
1931                                </div>
1932
1933                                <!-- Agency Details -->
1934                                <div class="flex-1 min-w-0">
1935                                    <div class="flex items-start justify-between">
1936                                        <div class="flex-1">
1937                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
1938                                                Camtel Kousseri
1939                                            </h3>
1940                                            <div class="mt-2 space-y-1">
1941                                                <div class="flex items-start text-gray-600">
1942                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1943                                                        <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"/>
1944                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
1945                                                    </svg>
1946                                                    <span class="text-xs sm:text-sm break-words">Avenue du Marché</span>
1947                                                </div>
1948                                                <div class="flex items-center text-gray-600">
1949                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1950                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1951                                                    </svg>
1952                                                    <span class="text-xs sm:text-sm font-medium">Kousseri</span>
1953                                                </div>
1954                                                <div class="flex items-center text-gray-600">
1955                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1956                                                        <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"/>
1957                                                    </svg>
1958                                                    <span class="text-xs sm:text-sm">+237 233 28 28 28</span>
1959                                                </div>
1960                                            </div>
1961                                        </div>
1962
1963                                        <!-- Action Button -->
1964                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
1965                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
1966                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1967                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
1968                                                </svg>
1969                                            </button>
1970                                        </div>
1971                                    </div>
1972                                </div>
1973                            </div>
1974                        </li>
1975                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
1976                            data-lat="5.72" 
1977                            data-lng="10.92"
1978                            data-name="Camtel Foumban"
1979                            data-address="Avenue du Palais"
1980                            data-city="Foumban"
1981                            data-phone="+237 233 45 45 45">
1982                            <div class="flex items-start space-x-3 sm:space-x-4">
1983                                <!-- Agency Icon -->
1984                                <div class="flex-shrink-0">
1985                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
1986                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1987                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
1988                                        </svg>
1989                                    </div>
1990                                </div>
1991
1992                                <!-- Agency Details -->
1993                                <div class="flex-1 min-w-0">
1994                                    <div class="flex items-start justify-between">
1995                                        <div class="flex-1">
1996                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
1997                                                Camtel Foumban
1998                                            </h3>
1999                                            <div class="mt-2 space-y-1">
2000                                                <div class="flex items-start text-gray-600">
2001                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2002                                                        <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"/>
2003                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
2004                                                    </svg>
2005                                                    <span class="text-xs sm:text-sm break-words">Avenue du Palais</span>
2006                                                </div>
2007                                                <div class="flex items-center text-gray-600">
2008                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2009                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2010                                                    </svg>
2011                                                    <span class="text-xs sm:text-sm font-medium">Foumban</span>
2012                                                </div>
2013                                                <div class="flex items-center text-gray-600">
2014                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2015                                                        <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"/>
2016                                                    </svg>
2017                                                    <span class="text-xs sm:text-sm">+237 233 45 45 45</span>
2018                                                </div>
2019                                            </div>
2020                                        </div>
2021
2022                                        <!-- Action Button -->
2023                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
2024                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
2025                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2026                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
2027                                                </svg>
2028                                            </button>
2029                                        </div>
2030                                    </div>
2031                                </div>
2032                            </div>
2033                        </li>
2034                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
2035                            data-lat="4.63" 
2036                            data-lng="9.45"
2037                            data-name="Camtel Kumba"
2038                            data-address="Commercial Road"
2039                            data-city="Kumba"
2040                            data-phone="+237 233 34 34 34">
2041                            <div class="flex items-start space-x-3 sm:space-x-4">
2042                                <!-- Agency Icon -->
2043                                <div class="flex-shrink-0">
2044                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
2045                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2046                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2047                                        </svg>
2048                                    </div>
2049                                </div>
2050
2051                                <!-- Agency Details -->
2052                                <div class="flex-1 min-w-0">
2053                                    <div class="flex items-start justify-between">
2054                                        <div class="flex-1">
2055                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
2056                                                Camtel Kumba
2057                                            </h3>
2058                                            <div class="mt-2 space-y-1">
2059                                                <div class="flex items-start text-gray-600">
2060                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2061                                                        <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"/>
2062                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
2063                                                    </svg>
2064                                                    <span class="text-xs sm:text-sm break-words">Commercial Road</span>
2065                                                </div>
2066                                                <div class="flex items-center text-gray-600">
2067                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2068                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2069                                                    </svg>
2070                                                    <span class="text-xs sm:text-sm font-medium">Kumba</span>
2071                                                </div>
2072                                                <div class="flex items-center text-gray-600">
2073                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2074                                                        <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"/>
2075                                                    </svg>
2076                                                    <span class="text-xs sm:text-sm">+237 233 34 34 34</span>
2077                                                </div>
2078                                            </div>
2079                                        </div>
2080
2081                                        <!-- Action Button -->
2082                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
2083                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
2084                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2085                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
2086                                                </svg>
2087                                            </button>
2088                                        </div>
2089                                    </div>
2090                                </div>
2091                            </div>
2092                        </li>
2093                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
2094                            data-lat="5.15" 
2095                            data-lng="10.18"
2096                            data-name="Camtel Bafang"
2097                            data-address="Route Principale"
2098                            data-city="Bafang"
2099                            data-phone="+237 233 47 47 47">
2100                            <div class="flex items-start space-x-3 sm:space-x-4">
2101                                <!-- Agency Icon -->
2102                                <div class="flex-shrink-0">
2103                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
2104                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2105                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2106                                        </svg>
2107                                    </div>
2108                                </div>
2109
2110                                <!-- Agency Details -->
2111                                <div class="flex-1 min-w-0">
2112                                    <div class="flex items-start justify-between">
2113                                        <div class="flex-1">
2114                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
2115                                                Camtel Bafang
2116                                            </h3>
2117                                            <div class="mt-2 space-y-1">
2118                                                <div class="flex items-start text-gray-600">
2119                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2120                                                        <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"/>
2121                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
2122                                                    </svg>
2123                                                    <span class="text-xs sm:text-sm break-words">Route Principale</span>
2124                                                </div>
2125                                                <div class="flex items-center text-gray-600">
2126                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2127                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2128                                                    </svg>
2129                                                    <span class="text-xs sm:text-sm font-medium">Bafang</span>
2130                                                </div>
2131                                                <div class="flex items-center text-gray-600">
2132                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2133                                                        <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"/>
2134                                                    </svg>
2135                                                    <span class="text-xs sm:text-sm">+237 233 47 47 47</span>
2136                                                </div>
2137                                            </div>
2138                                        </div>
2139
2140                                        <!-- Action Button -->
2141                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
2142                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
2143                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2144                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
2145                                                </svg>
2146                                            </button>
2147                                        </div>
2148                                    </div>
2149                                </div>
2150                            </div>
2151                        </li>
2152                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
2153                            data-lat="3.52" 
2154                            data-lng="11.50"
2155                            data-name="Camtel Mbalmayo"
2156                            data-address="Avenue Centrale"
2157                            data-city="Mbalmayo"
2158                            data-phone="+237 233 43 43 43">
2159                            <div class="flex items-start space-x-3 sm:space-x-4">
2160                                <!-- Agency Icon -->
2161                                <div class="flex-shrink-0">
2162                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
2163                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2164                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2165                                        </svg>
2166                                    </div>
2167                                </div>
2168
2169                                <!-- Agency Details -->
2170                                <div class="flex-1 min-w-0">
2171                                    <div class="flex items-start justify-between">
2172                                        <div class="flex-1">
2173                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
2174                                                Camtel Mbalmayo
2175                                            </h3>
2176                                            <div class="mt-2 space-y-1">
2177                                                <div class="flex items-start text-gray-600">
2178                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2179                                                        <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"/>
2180                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
2181                                                    </svg>
2182                                                    <span class="text-xs sm:text-sm break-words">Avenue Centrale</span>
2183                                                </div>
2184                                                <div class="flex items-center text-gray-600">
2185                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2186                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2187                                                    </svg>
2188                                                    <span class="text-xs sm:text-sm font-medium">Mbalmayo</span>
2189                                                </div>
2190                                                <div class="flex items-center text-gray-600">
2191                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2192                                                        <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"/>
2193                                                    </svg>
2194                                                    <span class="text-xs sm:text-sm">+237 233 43 43 43</span>
2195                                                </div>
2196                                            </div>
2197                                        </div>
2198
2199                                        <!-- Action Button -->
2200                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
2201                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
2202                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2203                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
2204                                                </svg>
2205                                            </button>
2206                                        </div>
2207                                    </div>
2208                                </div>
2209                            </div>
2210                        </li>
2211                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
2212                            data-lat="2.93" 
2213                            data-lng="11.98"
2214                            data-name="Camtel Sangmelima"
2215                            data-address="Route Nationale"
2216                            data-city="Sangmelima"
2217                            data-phone="+237 233 41 41 41">
2218                            <div class="flex items-start space-x-3 sm:space-x-4">
2219                                <!-- Agency Icon -->
2220                                <div class="flex-shrink-0">
2221                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
2222                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2223                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2224                                        </svg>
2225                                    </div>
2226                                </div>
2227
2228                                <!-- Agency Details -->
2229                                <div class="flex-1 min-w-0">
2230                                    <div class="flex items-start justify-between">
2231                                        <div class="flex-1">
2232                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
2233                                                Camtel Sangmelima
2234                                            </h3>
2235                                            <div class="mt-2 space-y-1">
2236                                                <div class="flex items-start text-gray-600">
2237                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2238                                                        <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"/>
2239                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
2240                                                    </svg>
2241                                                    <span class="text-xs sm:text-sm break-words">Route Nationale</span>
2242                                                </div>
2243                                                <div class="flex items-center text-gray-600">
2244                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2245                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2246                                                    </svg>
2247                                                    <span class="text-xs sm:text-sm font-medium">Sangmelima</span>
2248                                                </div>
2249                                                <div class="flex items-center text-gray-600">
2250                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2251                                                        <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"/>
2252                                                    </svg>
2253                                                    <span class="text-xs sm:text-sm">+237 233 41 41 41</span>
2254                                                </div>
2255                                            </div>
2256                                        </div>
2257
2258                                        <!-- Action Button -->
2259                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
2260                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
2261                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2262                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
2263                                                </svg>
2264                                            </button>
2265                                        </div>
2266                                    </div>
2267                                </div>
2268                            </div>
2269                        </li>
2270                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
2271                            data-lat="4.95" 
2272                            data-lng="9.93"
2273                            data-name="Camtel Nkongsamba"
2274                            data-address="Boulevard Principal"
2275                            data-city="Nkongsamba"
2276                            data-phone="+237 233 35 35 35">
2277                            <div class="flex items-start space-x-3 sm:space-x-4">
2278                                <!-- Agency Icon -->
2279                                <div class="flex-shrink-0">
2280                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
2281                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2282                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2283                                        </svg>
2284                                    </div>
2285                                </div>
2286
2287                                <!-- Agency Details -->
2288                                <div class="flex-1 min-w-0">
2289                                    <div class="flex items-start justify-between">
2290                                        <div class="flex-1">
2291                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
2292                                                Camtel Nkongsamba
2293                                            </h3>
2294                                            <div class="mt-2 space-y-1">
2295                                                <div class="flex items-start text-gray-600">
2296                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2297                                                        <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"/>
2298                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
2299                                                    </svg>
2300                                                    <span class="text-xs sm:text-sm break-words">Boulevard Principal</span>
2301                                                </div>
2302                                                <div class="flex items-center text-gray-600">
2303                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2304                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2305                                                    </svg>
2306                                                    <span class="text-xs sm:text-sm font-medium">Nkongsamba</span>
2307                                                </div>
2308                                                <div class="flex items-center text-gray-600">
2309                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2310                                                        <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"/>
2311                                                    </svg>
2312                                                    <span class="text-xs sm:text-sm">+237 233 35 35 35</span>
2313                                                </div>
2314                                            </div>
2315                                        </div>
2316
2317                                        <!-- Action Button -->
2318                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
2319                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
2320                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2321                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
2322                                                </svg>
2323                                            </button>
2324                                        </div>
2325                                    </div>
2326                                </div>
2327                            </div>
2328                        </li>
2329                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
2330                            data-lat="3.83" 
2331                            data-lng="11.49"
2332                            data-name="AC BIYEM ASSI"
2333                            data-address="BIYEM ASSI"
2334                            data-city="Yaoundé"
2335                            data-phone="">
2336                            <div class="flex items-start space-x-3 sm:space-x-4">
2337                                <!-- Agency Icon -->
2338                                <div class="flex-shrink-0">
2339                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
2340                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2341                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2342                                        </svg>
2343                                    </div>
2344                                </div>
2345
2346                                <!-- Agency Details -->
2347                                <div class="flex-1 min-w-0">
2348                                    <div class="flex items-start justify-between">
2349                                        <div class="flex-1">
2350                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
2351                                                AC BIYEM ASSI
2352                                            </h3>
2353                                            <div class="mt-2 space-y-1">
2354                                                <div class="flex items-start text-gray-600">
2355                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2356                                                        <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"/>
2357                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
2358                                                    </svg>
2359                                                    <span class="text-xs sm:text-sm break-words">BIYEM ASSI</span>
2360                                                </div>
2361                                                <div class="flex items-center text-gray-600">
2362                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2363                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2364                                                    </svg>
2365                                                    <span class="text-xs sm:text-sm font-medium">Yaoundé</span>
2366                                                </div>
2367                                                <div class="flex items-center text-gray-600">
2368                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2369                                                        <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"/>
2370                                                    </svg>
2371                                                    <span class="text-xs sm:text-sm"></span>
2372                                                </div>
2373                                            </div>
2374                                        </div>
2375
2376                                        <!-- Action Button -->
2377                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
2378                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
2379                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2380                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
2381                                                </svg>
2382                                            </button>
2383                                        </div>
2384                                    </div>
2385                                </div>
2386                            </div>
2387                        </li>
2388                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
2389                            data-lat="3.87" 
2390                            data-lng="11.51"
2391                            data-name="BLUE STORE -WARDA"
2392                            data-address="BLUE STORE -WARDA"
2393                            data-city="Yaoundé"
2394                            data-phone="">
2395                            <div class="flex items-start space-x-3 sm:space-x-4">
2396                                <!-- Agency Icon -->
2397                                <div class="flex-shrink-0">
2398                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
2399                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2400                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2401                                        </svg>
2402                                    </div>
2403                                </div>
2404
2405                                <!-- Agency Details -->
2406                                <div class="flex-1 min-w-0">
2407                                    <div class="flex items-start justify-between">
2408                                        <div class="flex-1">
2409                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
2410                                                BLUE STORE -WARDA
2411                                            </h3>
2412                                            <div class="mt-2 space-y-1">
2413                                                <div class="flex items-start text-gray-600">
2414                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2415                                                        <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"/>
2416                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
2417                                                    </svg>
2418                                                    <span class="text-xs sm:text-sm break-words">BLUE STORE -WARDA</span>
2419                                                </div>
2420                                                <div class="flex items-center text-gray-600">
2421                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2422                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2423                                                    </svg>
2424                                                    <span class="text-xs sm:text-sm font-medium">Yaoundé</span>
2425                                                </div>
2426                                                <div class="flex items-center text-gray-600">
2427                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2428                                                        <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"/>
2429                                                    </svg>
2430                                                    <span class="text-xs sm:text-sm"></span>
2431                                                </div>
2432                                            </div>
2433                                        </div>
2434
2435                                        <!-- Action Button -->
2436                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
2437                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
2438                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2439                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
2440                                                </svg>
2441                                            </button>
2442                                        </div>
2443                                    </div>
2444                                </div>
2445                            </div>
2446                        </li>
2447                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
2448                            data-lat="3.86" 
2449                            data-lng="11.52"
2450                            data-name=" ENTREPRISES YAOUNDE"
2451                            data-address=" ENTREPRISES YAOUNDE"
2452                            data-city=""
2453                            data-phone="">
2454                            <div class="flex items-start space-x-3 sm:space-x-4">
2455                                <!-- Agency Icon -->
2456                                <div class="flex-shrink-0">
2457                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
2458                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2459                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2460                                        </svg>
2461                                    </div>
2462                                </div>
2463
2464                                <!-- Agency Details -->
2465                                <div class="flex-1 min-w-0">
2466                                    <div class="flex items-start justify-between">
2467                                        <div class="flex-1">
2468                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
2469                                                 ENTREPRISES YAOUNDE
2470                                            </h3>
2471                                            <div class="mt-2 space-y-1">
2472                                                <div class="flex items-start text-gray-600">
2473                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2474                                                        <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"/>
2475                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
2476                                                    </svg>
2477                                                    <span class="text-xs sm:text-sm break-words"> ENTREPRISES YAOUNDE</span>
2478                                                </div>
2479                                                <div class="flex items-center text-gray-600">
2480                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2481                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2482                                                    </svg>
2483                                                    <span class="text-xs sm:text-sm font-medium"></span>
2484                                                </div>
2485                                                <div class="flex items-center text-gray-600">
2486                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2487                                                        <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"/>
2488                                                    </svg>
2489                                                    <span class="text-xs sm:text-sm"></span>
2490                                                </div>
2491                                            </div>
2492                                        </div>
2493
2494                                        <!-- Action Button -->
2495                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
2496                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
2497                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2498                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
2499                                                </svg>
2500                                            </button>
2501                                        </div>
2502                                    </div>
2503                                </div>
2504                            </div>
2505                        </li>
2506                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
2507                            data-lat="3.90" 
2508                            data-lng="11.52"
2509                            data-name="JAMOT"
2510                            data-address="."
2511                            data-city="Yaoundé"
2512                            data-phone="">
2513                            <div class="flex items-start space-x-3 sm:space-x-4">
2514                                <!-- Agency Icon -->
2515                                <div class="flex-shrink-0">
2516                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
2517                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2518                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2519                                        </svg>
2520                                    </div>
2521                                </div>
2522
2523                                <!-- Agency Details -->
2524                                <div class="flex-1 min-w-0">
2525                                    <div class="flex items-start justify-between">
2526                                        <div class="flex-1">
2527                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
2528                                                JAMOT
2529                                            </h3>
2530                                            <div class="mt-2 space-y-1">
2531                                                <div class="flex items-start text-gray-600">
2532                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2533                                                        <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"/>
2534                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
2535                                                    </svg>
2536                                                    <span class="text-xs sm:text-sm break-words">.</span>
2537                                                </div>
2538                                                <div class="flex items-center text-gray-600">
2539                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2540                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2541                                                    </svg>
2542                                                    <span class="text-xs sm:text-sm font-medium">Yaoundé</span>
2543                                                </div>
2544                                                <div class="flex items-center text-gray-600">
2545                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2546                                                        <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"/>
2547                                                    </svg>
2548                                                    <span class="text-xs sm:text-sm"></span>
2549                                                </div>
2550                                            </div>
2551                                        </div>
2552
2553                                        <!-- Action Button -->
2554                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
2555                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
2556                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2557                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
2558                                                </svg>
2559                                            </button>
2560                                        </div>
2561                                    </div>
2562                                </div>
2563                            </div>
2564                        </li>
2565                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
2566                            data-lat="3.85" 
2567                            data-lng="11.55"
2568                            data-name="NKOMO"
2569                            data-address="."
2570                            data-city="Yaoundé"
2571                            data-phone="">
2572                            <div class="flex items-start space-x-3 sm:space-x-4">
2573                                <!-- Agency Icon -->
2574                                <div class="flex-shrink-0">
2575                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
2576                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2577                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2578                                        </svg>
2579                                    </div>
2580                                </div>
2581
2582                                <!-- Agency Details -->
2583                                <div class="flex-1 min-w-0">
2584                                    <div class="flex items-start justify-between">
2585                                        <div class="flex-1">
2586                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
2587                                                NKOMO
2588                                            </h3>
2589                                            <div class="mt-2 space-y-1">
2590                                                <div class="flex items-start text-gray-600">
2591                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2592                                                        <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"/>
2593                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
2594                                                    </svg>
2595                                                    <span class="text-xs sm:text-sm break-words">.</span>
2596                                                </div>
2597                                                <div class="flex items-center text-gray-600">
2598                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2599                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2600                                                    </svg>
2601                                                    <span class="text-xs sm:text-sm font-medium">Yaoundé</span>
2602                                                </div>
2603                                                <div class="flex items-center text-gray-600">
2604                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2605                                                        <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"/>
2606                                                    </svg>
2607                                                    <span class="text-xs sm:text-sm"></span>
2608                                                </div>
2609                                            </div>
2610                                        </div>
2611
2612                                        <!-- Action Button -->
2613                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
2614                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
2615                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2616                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
2617                                                </svg>
2618                                            </button>
2619                                        </div>
2620                                    </div>
2621                                </div>
2622                            </div>
2623                        </li>
2624                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
2625                            data-lat="3.77" 
2626                            data-lng="12.25"
2627                            data-name="AKONOLINGA"
2628                            data-address="AKONOLINGA"
2629                            data-city="AKONOLINGA"
2630                            data-phone="">
2631                            <div class="flex items-start space-x-3 sm:space-x-4">
2632                                <!-- Agency Icon -->
2633                                <div class="flex-shrink-0">
2634                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
2635                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2636                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2637                                        </svg>
2638                                    </div>
2639                                </div>
2640
2641                                <!-- Agency Details -->
2642                                <div class="flex-1 min-w-0">
2643                                    <div class="flex items-start justify-between">
2644                                        <div class="flex-1">
2645                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
2646                                                AKONOLINGA
2647                                            </h3>
2648                                            <div class="mt-2 space-y-1">
2649                                                <div class="flex items-start text-gray-600">
2650                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2651                                                        <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"/>
2652                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
2653                                                    </svg>
2654                                                    <span class="text-xs sm:text-sm break-words">AKONOLINGA</span>
2655                                                </div>
2656                                                <div class="flex items-center text-gray-600">
2657                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2658                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2659                                                    </svg>
2660                                                    <span class="text-xs sm:text-sm font-medium">AKONOLINGA</span>
2661                                                </div>
2662                                                <div class="flex items-center text-gray-600">
2663                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2664                                                        <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"/>
2665                                                    </svg>
2666                                                    <span class="text-xs sm:text-sm"></span>
2667                                                </div>
2668                                            </div>
2669                                        </div>
2670
2671                                        <!-- Action Button -->
2672                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
2673                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
2674                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2675                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
2676                                                </svg>
2677                                            </button>
2678                                        </div>
2679                                    </div>
2680                                </div>
2681                            </div>
2682                        </li>
2683                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
2684                            data-lat="3.90" 
2685                            data-lng="12.52"
2686                            data-name="AYOS"
2687                            data-address="AYOS"
2688                            data-city="AYOS"
2689                            data-phone="">
2690                            <div class="flex items-start space-x-3 sm:space-x-4">
2691                                <!-- Agency Icon -->
2692                                <div class="flex-shrink-0">
2693                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
2694                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2695                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2696                                        </svg>
2697                                    </div>
2698                                </div>
2699
2700                                <!-- Agency Details -->
2701                                <div class="flex-1 min-w-0">
2702                                    <div class="flex items-start justify-between">
2703                                        <div class="flex-1">
2704                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
2705                                                AYOS
2706                                            </h3>
2707                                            <div class="mt-2 space-y-1">
2708                                                <div class="flex items-start text-gray-600">
2709                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2710                                                        <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"/>
2711                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
2712                                                    </svg>
2713                                                    <span class="text-xs sm:text-sm break-words">AYOS</span>
2714                                                </div>
2715                                                <div class="flex items-center text-gray-600">
2716                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2717                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2718                                                    </svg>
2719                                                    <span class="text-xs sm:text-sm font-medium">AYOS</span>
2720                                                </div>
2721                                                <div class="flex items-center text-gray-600">
2722                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2723                                                        <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"/>
2724                                                    </svg>
2725                                                    <span class="text-xs sm:text-sm"></span>
2726                                                </div>
2727                                            </div>
2728                                        </div>
2729
2730                                        <!-- Action Button -->
2731                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
2732                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
2733                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2734                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
2735                                                </svg>
2736                                            </button>
2737                                        </div>
2738                                    </div>
2739                                </div>
2740                            </div>
2741                        </li>
2742                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
2743                            data-lat="4.74" 
2744                            data-lng="11.22"
2745                            data-name="BAFIA"
2746                            data-address=". "
2747                            data-city="BAFIA"
2748                            data-phone="">
2749                            <div class="flex items-start space-x-3 sm:space-x-4">
2750                                <!-- Agency Icon -->
2751                                <div class="flex-shrink-0">
2752                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
2753                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2754                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2755                                        </svg>
2756                                    </div>
2757                                </div>
2758
2759                                <!-- Agency Details -->
2760                                <div class="flex-1 min-w-0">
2761                                    <div class="flex items-start justify-between">
2762                                        <div class="flex-1">
2763                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
2764                                                BAFIA
2765                                            </h3>
2766                                            <div class="mt-2 space-y-1">
2767                                                <div class="flex items-start text-gray-600">
2768                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2769                                                        <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"/>
2770                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
2771                                                    </svg>
2772                                                    <span class="text-xs sm:text-sm break-words">. </span>
2773                                                </div>
2774                                                <div class="flex items-center text-gray-600">
2775                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2776                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2777                                                    </svg>
2778                                                    <span class="text-xs sm:text-sm font-medium">BAFIA</span>
2779                                                </div>
2780                                                <div class="flex items-center text-gray-600">
2781                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2782                                                        <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"/>
2783                                                    </svg>
2784                                                    <span class="text-xs sm:text-sm"></span>
2785                                                </div>
2786                                            </div>
2787                                        </div>
2788
2789                                        <!-- Action Button -->
2790                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
2791                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
2792                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2793                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
2794                                                </svg>
2795                                            </button>
2796                                        </div>
2797                                    </div>
2798                                </div>
2799                            </div>
2800                        </li>
2801                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
2802                            data-lat="3.88" 
2803                            data-lng="10.85"
2804                            data-name="PC BOUMNYEBEL"
2805                            data-address="."
2806                            data-city="BOUMNYEBEL"
2807                            data-phone="">
2808                            <div class="flex items-start space-x-3 sm:space-x-4">
2809                                <!-- Agency Icon -->
2810                                <div class="flex-shrink-0">
2811                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
2812                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2813                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2814                                        </svg>
2815                                    </div>
2816                                </div>
2817
2818                                <!-- Agency Details -->
2819                                <div class="flex-1 min-w-0">
2820                                    <div class="flex items-start justify-between">
2821                                        <div class="flex-1">
2822                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
2823                                                PC BOUMNYEBEL
2824                                            </h3>
2825                                            <div class="mt-2 space-y-1">
2826                                                <div class="flex items-start text-gray-600">
2827                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2828                                                        <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"/>
2829                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
2830                                                    </svg>
2831                                                    <span class="text-xs sm:text-sm break-words">.</span>
2832                                                </div>
2833                                                <div class="flex items-center text-gray-600">
2834                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2835                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2836                                                    </svg>
2837                                                    <span class="text-xs sm:text-sm font-medium">BOUMNYEBEL</span>
2838                                                </div>
2839                                                <div class="flex items-center text-gray-600">
2840                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2841                                                        <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"/>
2842                                                    </svg>
2843                                                    <span class="text-xs sm:text-sm"></span>
2844                                                </div>
2845                                            </div>
2846                                        </div>
2847
2848                                        <!-- Action Button -->
2849                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
2850                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
2851                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2852                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
2853                                                </svg>
2854                                            </button>
2855                                        </div>
2856                                    </div>
2857                                </div>
2858                            </div>
2859                        </li>
2860                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
2861                            data-lat="3.64" 
2862                            data-lng="10.77"
2863                            data-name="PC ESEKA"
2864                            data-address="."
2865                            data-city="ESEKA"
2866                            data-phone="">
2867                            <div class="flex items-start space-x-3 sm:space-x-4">
2868                                <!-- Agency Icon -->
2869                                <div class="flex-shrink-0">
2870                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
2871                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2872                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2873                                        </svg>
2874                                    </div>
2875                                </div>
2876
2877                                <!-- Agency Details -->
2878                                <div class="flex-1 min-w-0">
2879                                    <div class="flex items-start justify-between">
2880                                        <div class="flex-1">
2881                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
2882                                                PC ESEKA
2883                                            </h3>
2884                                            <div class="mt-2 space-y-1">
2885                                                <div class="flex items-start text-gray-600">
2886                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2887                                                        <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"/>
2888                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
2889                                                    </svg>
2890                                                    <span class="text-xs sm:text-sm break-words">.</span>
2891                                                </div>
2892                                                <div class="flex items-center text-gray-600">
2893                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2894                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2895                                                    </svg>
2896                                                    <span class="text-xs sm:text-sm font-medium">ESEKA</span>
2897                                                </div>
2898                                                <div class="flex items-center text-gray-600">
2899                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2900                                                        <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"/>
2901                                                    </svg>
2902                                                    <span class="text-xs sm:text-sm"></span>
2903                                                </div>
2904                                            </div>
2905                                        </div>
2906
2907                                        <!-- Action Button -->
2908                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
2909                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
2910                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2911                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
2912                                                </svg>
2913                                            </button>
2914                                        </div>
2915                                    </div>
2916                                </div>
2917                            </div>
2918                        </li>
2919                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
2920                            data-lat="4.88" 
2921                            data-lng="10.81"
2922                            data-name="PC MAKENENE"
2923                            data-address="."
2924                            data-city="MAKENENE"
2925                            data-phone="">
2926                            <div class="flex items-start space-x-3 sm:space-x-4">
2927                                <!-- Agency Icon -->
2928                                <div class="flex-shrink-0">
2929                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
2930                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2931                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2932                                        </svg>
2933                                    </div>
2934                                </div>
2935
2936                                <!-- Agency Details -->
2937                                <div class="flex-1 min-w-0">
2938                                    <div class="flex items-start justify-between">
2939                                        <div class="flex-1">
2940                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
2941                                                PC MAKENENE
2942                                            </h3>
2943                                            <div class="mt-2 space-y-1">
2944                                                <div class="flex items-start text-gray-600">
2945                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2946                                                        <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"/>
2947                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
2948                                                    </svg>
2949                                                    <span class="text-xs sm:text-sm break-words">.</span>
2950                                                </div>
2951                                                <div class="flex items-center text-gray-600">
2952                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2953                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2954                                                    </svg>
2955                                                    <span class="text-xs sm:text-sm font-medium">MAKENENE</span>
2956                                                </div>
2957                                                <div class="flex items-center text-gray-600">
2958                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2959                                                        <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"/>
2960                                                    </svg>
2961                                                    <span class="text-xs sm:text-sm"></span>
2962                                                </div>
2963                                            </div>
2964                                        </div>
2965
2966                                        <!-- Action Button -->
2967                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
2968                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
2969                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2970                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
2971                                                </svg>
2972                                            </button>
2973                                        </div>
2974                                    </div>
2975                                </div>
2976                            </div>
2977                        </li>
2978                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
2979                            data-lat="3.52" 
2980                            data-lng="11.50"
2981                            data-name="PC MBALMAYO"
2982                            data-address="."
2983                            data-city="MBALMAYO"
2984                            data-phone="">
2985                            <div class="flex items-start space-x-3 sm:space-x-4">
2986                                <!-- Agency Icon -->
2987                                <div class="flex-shrink-0">
2988                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
2989                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2990                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
2991                                        </svg>
2992                                    </div>
2993                                </div>
2994
2995                                <!-- Agency Details -->
2996                                <div class="flex-1 min-w-0">
2997                                    <div class="flex items-start justify-between">
2998                                        <div class="flex-1">
2999                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
3000                                                PC MBALMAYO
3001                                            </h3>
3002                                            <div class="mt-2 space-y-1">
3003                                                <div class="flex items-start text-gray-600">
3004                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3005                                                        <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"/>
3006                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
3007                                                    </svg>
3008                                                    <span class="text-xs sm:text-sm break-words">.</span>
3009                                                </div>
3010                                                <div class="flex items-center text-gray-600">
3011                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3012                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3013                                                    </svg>
3014                                                    <span class="text-xs sm:text-sm font-medium">MBALMAYO</span>
3015                                                </div>
3016                                                <div class="flex items-center text-gray-600">
3017                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3018                                                        <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"/>
3019                                                    </svg>
3020                                                    <span class="text-xs sm:text-sm"></span>
3021                                                </div>
3022                                            </div>
3023                                        </div>
3024
3025                                        <!-- Action Button -->
3026                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
3027                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
3028                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3029                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
3030                                                </svg>
3031                                            </button>
3032                                        </div>
3033                                    </div>
3034                                </div>
3035                            </div>
3036                        </li>
3037                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
3038                            data-lat="3.44" 
3039                            data-lng="11.77"
3040                            data-name="PC METET"
3041                            data-address="."
3042                            data-city="METET"
3043                            data-phone="">
3044                            <div class="flex items-start space-x-3 sm:space-x-4">
3045                                <!-- Agency Icon -->
3046                                <div class="flex-shrink-0">
3047                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
3048                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3049                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3050                                        </svg>
3051                                    </div>
3052                                </div>
3053
3054                                <!-- Agency Details -->
3055                                <div class="flex-1 min-w-0">
3056                                    <div class="flex items-start justify-between">
3057                                        <div class="flex-1">
3058                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
3059                                                PC METET
3060                                            </h3>
3061                                            <div class="mt-2 space-y-1">
3062                                                <div class="flex items-start text-gray-600">
3063                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3064                                                        <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"/>
3065                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
3066                                                    </svg>
3067                                                    <span class="text-xs sm:text-sm break-words">.</span>
3068                                                </div>
3069                                                <div class="flex items-center text-gray-600">
3070                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3071                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3072                                                    </svg>
3073                                                    <span class="text-xs sm:text-sm font-medium">METET</span>
3074                                                </div>
3075                                                <div class="flex items-center text-gray-600">
3076                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3077                                                        <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"/>
3078                                                    </svg>
3079                                                    <span class="text-xs sm:text-sm"></span>
3080                                                </div>
3081                                            </div>
3082                                        </div>
3083
3084                                        <!-- Action Button -->
3085                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
3086                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
3087                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3088                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
3089                                                </svg>
3090                                            </button>
3091                                        </div>
3092                                    </div>
3093                                </div>
3094                            </div>
3095                        </li>
3096                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
3097                            data-lat="3.72" 
3098                            data-lng="11.64"
3099                            data-name="PC MFOU"
3100                            data-address="."
3101                            data-city="Yaoundé"
3102                            data-phone="">
3103                            <div class="flex items-start space-x-3 sm:space-x-4">
3104                                <!-- Agency Icon -->
3105                                <div class="flex-shrink-0">
3106                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
3107                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3108                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3109                                        </svg>
3110                                    </div>
3111                                </div>
3112
3113                                <!-- Agency Details -->
3114                                <div class="flex-1 min-w-0">
3115                                    <div class="flex items-start justify-between">
3116                                        <div class="flex-1">
3117                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
3118                                                PC MFOU
3119                                            </h3>
3120                                            <div class="mt-2 space-y-1">
3121                                                <div class="flex items-start text-gray-600">
3122                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3123                                                        <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"/>
3124                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
3125                                                    </svg>
3126                                                    <span class="text-xs sm:text-sm break-words">.</span>
3127                                                </div>
3128                                                <div class="flex items-center text-gray-600">
3129                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3130                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3131                                                    </svg>
3132                                                    <span class="text-xs sm:text-sm font-medium">Yaoundé</span>
3133                                                </div>
3134                                                <div class="flex items-center text-gray-600">
3135                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3136                                                        <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"/>
3137                                                    </svg>
3138                                                    <span class="text-xs sm:text-sm"></span>
3139                                                </div>
3140                                            </div>
3141                                        </div>
3142
3143                                        <!-- Action Button -->
3144                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
3145                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
3146                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3147                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
3148                                                </svg>
3149                                            </button>
3150                                        </div>
3151                                    </div>
3152                                </div>
3153                            </div>
3154                        </li>
3155                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
3156                            data-lat="3.86" 
3157                            data-lng="11.56"
3158                            data-name="PC MIMBOMAN"
3159                            data-address="."
3160                            data-city="Yaoundé"
3161                            data-phone="">
3162                            <div class="flex items-start space-x-3 sm:space-x-4">
3163                                <!-- Agency Icon -->
3164                                <div class="flex-shrink-0">
3165                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
3166                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3167                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3168                                        </svg>
3169                                    </div>
3170                                </div>
3171
3172                                <!-- Agency Details -->
3173                                <div class="flex-1 min-w-0">
3174                                    <div class="flex items-start justify-between">
3175                                        <div class="flex-1">
3176                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
3177                                                PC MIMBOMAN
3178                                            </h3>
3179                                            <div class="mt-2 space-y-1">
3180                                                <div class="flex items-start text-gray-600">
3181                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3182                                                        <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"/>
3183                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
3184                                                    </svg>
3185                                                    <span class="text-xs sm:text-sm break-words">.</span>
3186                                                </div>
3187                                                <div class="flex items-center text-gray-600">
3188                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3189                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3190                                                    </svg>
3191                                                    <span class="text-xs sm:text-sm font-medium">Yaoundé</span>
3192                                                </div>
3193                                                <div class="flex items-center text-gray-600">
3194                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3195                                                        <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"/>
3196                                                    </svg>
3197                                                    <span class="text-xs sm:text-sm"></span>
3198                                                </div>
3199                                            </div>
3200                                        </div>
3201
3202                                        <!-- Action Button -->
3203                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
3204                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
3205                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3206                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
3207                                                </svg>
3208                                            </button>
3209                                        </div>
3210                                    </div>
3211                                </div>
3212                            </div>
3213                        </li>
3214                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
3215                            data-lat="4.26" 
3216                            data-lng="11.20"
3217                            data-name="MONATELE"
3218                            data-address="."
3219                            data-city="MONATELE"
3220                            data-phone="">
3221                            <div class="flex items-start space-x-3 sm:space-x-4">
3222                                <!-- Agency Icon -->
3223                                <div class="flex-shrink-0">
3224                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
3225                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3226                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3227                                        </svg>
3228                                    </div>
3229                                </div>
3230
3231                                <!-- Agency Details -->
3232                                <div class="flex-1 min-w-0">
3233                                    <div class="flex items-start justify-between">
3234                                        <div class="flex-1">
3235                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
3236                                                MONATELE
3237                                            </h3>
3238                                            <div class="mt-2 space-y-1">
3239                                                <div class="flex items-start text-gray-600">
3240                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3241                                                        <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"/>
3242                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
3243                                                    </svg>
3244                                                    <span class="text-xs sm:text-sm break-words">.</span>
3245                                                </div>
3246                                                <div class="flex items-center text-gray-600">
3247                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3248                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3249                                                    </svg>
3250                                                    <span class="text-xs sm:text-sm font-medium">MONATELE</span>
3251                                                </div>
3252                                                <div class="flex items-center text-gray-600">
3253                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3254                                                        <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"/>
3255                                                    </svg>
3256                                                    <span class="text-xs sm:text-sm"></span>
3257                                                </div>
3258                                            </div>
3259                                        </div>
3260
3261                                        <!-- Action Button -->
3262                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
3263                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
3264                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3265                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
3266                                                </svg>
3267                                            </button>
3268                                        </div>
3269                                    </div>
3270                                </div>
3271                            </div>
3272                        </li>
3273                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
3274                            data-lat="3.82" 
3275                            data-lng="11.52"
3276                            data-name="MVAN"
3277                            data-address="."
3278                            data-city=""
3279                            data-phone="">
3280                            <div class="flex items-start space-x-3 sm:space-x-4">
3281                                <!-- Agency Icon -->
3282                                <div class="flex-shrink-0">
3283                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
3284                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3285                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3286                                        </svg>
3287                                    </div>
3288                                </div>
3289
3290                                <!-- Agency Details -->
3291                                <div class="flex-1 min-w-0">
3292                                    <div class="flex items-start justify-between">
3293                                        <div class="flex-1">
3294                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
3295                                                MVAN
3296                                            </h3>
3297                                            <div class="mt-2 space-y-1">
3298                                                <div class="flex items-start text-gray-600">
3299                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3300                                                        <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"/>
3301                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
3302                                                    </svg>
3303                                                    <span class="text-xs sm:text-sm break-words">.</span>
3304                                                </div>
3305                                                <div class="flex items-center text-gray-600">
3306                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3307                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3308                                                    </svg>
3309                                                    <span class="text-xs sm:text-sm font-medium"></span>
3310                                                </div>
3311                                                <div class="flex items-center text-gray-600">
3312                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3313                                                        <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"/>
3314                                                    </svg>
3315                                                    <span class="text-xs sm:text-sm"></span>
3316                                                </div>
3317                                            </div>
3318                                        </div>
3319
3320                                        <!-- Action Button -->
3321                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
3322                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
3323                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3324                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
3325                                                </svg>
3326                                            </button>
3327                                        </div>
3328                                    </div>
3329                                </div>
3330                            </div>
3331                        </li>
3332                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
3333                            data-lat="4.67" 
3334                            data-lng="12.37"
3335                            data-name="NANGA EBOKO"
3336                            data-address="."
3337                            data-city=""
3338                            data-phone="">
3339                            <div class="flex items-start space-x-3 sm:space-x-4">
3340                                <!-- Agency Icon -->
3341                                <div class="flex-shrink-0">
3342                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
3343                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3344                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3345                                        </svg>
3346                                    </div>
3347                                </div>
3348
3349                                <!-- Agency Details -->
3350                                <div class="flex-1 min-w-0">
3351                                    <div class="flex items-start justify-between">
3352                                        <div class="flex-1">
3353                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
3354                                                NANGA EBOKO
3355                                            </h3>
3356                                            <div class="mt-2 space-y-1">
3357                                                <div class="flex items-start text-gray-600">
3358                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3359                                                        <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"/>
3360                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
3361                                                    </svg>
3362                                                    <span class="text-xs sm:text-sm break-words">.</span>
3363                                                </div>
3364                                                <div class="flex items-center text-gray-600">
3365                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3366                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3367                                                    </svg>
3368                                                    <span class="text-xs sm:text-sm font-medium"></span>
3369                                                </div>
3370                                                <div class="flex items-center text-gray-600">
3371                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3372                                                        <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"/>
3373                                                    </svg>
3374                                                    <span class="text-xs sm:text-sm"></span>
3375                                                </div>
3376                                            </div>
3377                                        </div>
3378
3379                                        <!-- Action Button -->
3380                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
3381                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
3382                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3383                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
3384                                                </svg>
3385                                            </button>
3386                                        </div>
3387                                    </div>
3388                                </div>
3389                            </div>
3390                        </li>
3391                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
3392                            data-lat="3.91" 
3393                            data-lng="11.54"
3394                            data-name="NGOUSSO"
3395                            data-address="."
3396                            data-city=""
3397                            data-phone="">
3398                            <div class="flex items-start space-x-3 sm:space-x-4">
3399                                <!-- Agency Icon -->
3400                                <div class="flex-shrink-0">
3401                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
3402                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3403                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3404                                        </svg>
3405                                    </div>
3406                                </div>
3407
3408                                <!-- Agency Details -->
3409                                <div class="flex-1 min-w-0">
3410                                    <div class="flex items-start justify-between">
3411                                        <div class="flex-1">
3412                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
3413                                                NGOUSSO
3414                                            </h3>
3415                                            <div class="mt-2 space-y-1">
3416                                                <div class="flex items-start text-gray-600">
3417                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3418                                                        <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"/>
3419                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
3420                                                    </svg>
3421                                                    <span class="text-xs sm:text-sm break-words">.</span>
3422                                                </div>
3423                                                <div class="flex items-center text-gray-600">
3424                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3425                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3426                                                    </svg>
3427                                                    <span class="text-xs sm:text-sm font-medium"></span>
3428                                                </div>
3429                                                <div class="flex items-center text-gray-600">
3430                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3431                                                        <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"/>
3432                                                    </svg>
3433                                                    <span class="text-xs sm:text-sm"></span>
3434                                                </div>
3435                                            </div>
3436                                        </div>
3437
3438                                        <!-- Action Button -->
3439                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
3440                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
3441                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3442                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
3443                                                </svg>
3444                                            </button>
3445                                        </div>
3446                                    </div>
3447                                </div>
3448                            </div>
3449                        </li>
3450                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
3451                            data-lat="3.87" 
3452                            data-lng="11.46"
3453                            data-name="NKOLBISSON"
3454                            data-address="."
3455                            data-city=""
3456                            data-phone="">
3457                            <div class="flex items-start space-x-3 sm:space-x-4">
3458                                <!-- Agency Icon -->
3459                                <div class="flex-shrink-0">
3460                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
3461                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3462                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3463                                        </svg>
3464                                    </div>
3465                                </div>
3466
3467                                <!-- Agency Details -->
3468                                <div class="flex-1 min-w-0">
3469                                    <div class="flex items-start justify-between">
3470                                        <div class="flex-1">
3471                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
3472                                                NKOLBISSON
3473                                            </h3>
3474                                            <div class="mt-2 space-y-1">
3475                                                <div class="flex items-start text-gray-600">
3476                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3477                                                        <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"/>
3478                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
3479                                                    </svg>
3480                                                    <span class="text-xs sm:text-sm break-words">.</span>
3481                                                </div>
3482                                                <div class="flex items-center text-gray-600">
3483                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3484                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3485                                                    </svg>
3486                                                    <span class="text-xs sm:text-sm font-medium"></span>
3487                                                </div>
3488                                                <div class="flex items-center text-gray-600">
3489                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3490                                                        <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"/>
3491                                                    </svg>
3492                                                    <span class="text-xs sm:text-sm"></span>
3493                                                </div>
3494                                            </div>
3495                                        </div>
3496
3497                                        <!-- Action Button -->
3498                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
3499                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
3500                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3501                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
3502                                                </svg>
3503                                            </button>
3504                                        </div>
3505                                    </div>
3506                                </div>
3507                            </div>
3508                        </li>
3509                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
3510                            data-lat="4.20" 
3511                            data-lng="12.90"
3512                            data-name="NGOUMOU"
3513                            data-address="."
3514                            data-city=""
3515                            data-phone="">
3516                            <div class="flex items-start space-x-3 sm:space-x-4">
3517                                <!-- Agency Icon -->
3518                                <div class="flex-shrink-0">
3519                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
3520                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3521                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3522                                        </svg>
3523                                    </div>
3524                                </div>
3525
3526                                <!-- Agency Details -->
3527                                <div class="flex-1 min-w-0">
3528                                    <div class="flex items-start justify-between">
3529                                        <div class="flex-1">
3530                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
3531                                                NGOUMOU
3532                                            </h3>
3533                                            <div class="mt-2 space-y-1">
3534                                                <div class="flex items-start text-gray-600">
3535                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3536                                                        <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"/>
3537                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
3538                                                    </svg>
3539                                                    <span class="text-xs sm:text-sm break-words">.</span>
3540                                                </div>
3541                                                <div class="flex items-center text-gray-600">
3542                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3543                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3544                                                    </svg>
3545                                                    <span class="text-xs sm:text-sm font-medium"></span>
3546                                                </div>
3547                                                <div class="flex items-center text-gray-600">
3548                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3549                                                        <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"/>
3550                                                    </svg>
3551                                                    <span class="text-xs sm:text-sm"></span>
3552                                                </div>
3553                                            </div>
3554                                        </div>
3555
3556                                        <!-- Action Button -->
3557                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
3558                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
3559                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3560                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
3561                                                </svg>
3562                                            </button>
3563                                        </div>
3564                                    </div>
3565                                </div>
3566                            </div>
3567                        </li>
3568                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
3569                            data-lat="4.45" 
3570                            data-lng="11.63"
3571                            data-name="NTUI"
3572                            data-address="."
3573                            data-city=""
3574                            data-phone="">
3575                            <div class="flex items-start space-x-3 sm:space-x-4">
3576                                <!-- Agency Icon -->
3577                                <div class="flex-shrink-0">
3578                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
3579                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3580                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3581                                        </svg>
3582                                    </div>
3583                                </div>
3584
3585                                <!-- Agency Details -->
3586                                <div class="flex-1 min-w-0">
3587                                    <div class="flex items-start justify-between">
3588                                        <div class="flex-1">
3589                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
3590                                                NTUI
3591                                            </h3>
3592                                            <div class="mt-2 space-y-1">
3593                                                <div class="flex items-start text-gray-600">
3594                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3595                                                        <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"/>
3596                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
3597                                                    </svg>
3598                                                    <span class="text-xs sm:text-sm break-words">.</span>
3599                                                </div>
3600                                                <div class="flex items-center text-gray-600">
3601                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3602                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3603                                                    </svg>
3604                                                    <span class="text-xs sm:text-sm font-medium"></span>
3605                                                </div>
3606                                                <div class="flex items-center text-gray-600">
3607                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3608                                                        <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"/>
3609                                                    </svg>
3610                                                    <span class="text-xs sm:text-sm"></span>
3611                                                </div>
3612                                            </div>
3613                                        </div>
3614
3615                                        <!-- Action Button -->
3616                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
3617                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
3618                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3619                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
3620                                                </svg>
3621                                            </button>
3622                                        </div>
3623                                    </div>
3624                                </div>
3625                            </div>
3626                        </li>
3627                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
3628                            data-lat="3.72" 
3629                            data-lng="11.55"
3630                            data-name="NSIMALEN"
3631                            data-address="."
3632                            data-city=""
3633                            data-phone="">
3634                            <div class="flex items-start space-x-3 sm:space-x-4">
3635                                <!-- Agency Icon -->
3636                                <div class="flex-shrink-0">
3637                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
3638                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3639                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3640                                        </svg>
3641                                    </div>
3642                                </div>
3643
3644                                <!-- Agency Details -->
3645                                <div class="flex-1 min-w-0">
3646                                    <div class="flex items-start justify-between">
3647                                        <div class="flex-1">
3648                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
3649                                                NSIMALEN
3650                                            </h3>
3651                                            <div class="mt-2 space-y-1">
3652                                                <div class="flex items-start text-gray-600">
3653                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3654                                                        <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"/>
3655                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
3656                                                    </svg>
3657                                                    <span class="text-xs sm:text-sm break-words">.</span>
3658                                                </div>
3659                                                <div class="flex items-center text-gray-600">
3660                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3661                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3662                                                    </svg>
3663                                                    <span class="text-xs sm:text-sm font-medium"></span>
3664                                                </div>
3665                                                <div class="flex items-center text-gray-600">
3666                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3667                                                        <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"/>
3668                                                    </svg>
3669                                                    <span class="text-xs sm:text-sm"></span>
3670                                                </div>
3671                                            </div>
3672                                        </div>
3673
3674                                        <!-- Action Button -->
3675                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
3676                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
3677                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3678                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
3679                                                </svg>
3680                                            </button>
3681                                        </div>
3682                                    </div>
3683                                </div>
3684                            </div>
3685                        </li>
3686                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
3687                            data-lat="4.17" 
3688                            data-lng="11.53"
3689                            data-name="OBALA"
3690                            data-address="."
3691                            data-city=""
3692                            data-phone="">
3693                            <div class="flex items-start space-x-3 sm:space-x-4">
3694                                <!-- Agency Icon -->
3695                                <div class="flex-shrink-0">
3696                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
3697                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3698                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3699                                        </svg>
3700                                    </div>
3701                                </div>
3702
3703                                <!-- Agency Details -->
3704                                <div class="flex-1 min-w-0">
3705                                    <div class="flex items-start justify-between">
3706                                        <div class="flex-1">
3707                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
3708                                                OBALA
3709                                            </h3>
3710                                            <div class="mt-2 space-y-1">
3711                                                <div class="flex items-start text-gray-600">
3712                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3713                                                        <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"/>
3714                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
3715                                                    </svg>
3716                                                    <span class="text-xs sm:text-sm break-words">.</span>
3717                                                </div>
3718                                                <div class="flex items-center text-gray-600">
3719                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3720                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3721                                                    </svg>
3722                                                    <span class="text-xs sm:text-sm font-medium"></span>
3723                                                </div>
3724                                                <div class="flex items-center text-gray-600">
3725                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3726                                                        <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"/>
3727                                                    </svg>
3728                                                    <span class="text-xs sm:text-sm"></span>
3729                                                </div>
3730                                            </div>
3731                                        </div>
3732
3733                                        <!-- Action Button -->
3734                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
3735                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
3736                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3737                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
3738                                                </svg>
3739                                            </button>
3740                                        </div>
3741                                    </div>
3742                                </div>
3743                            </div>
3744                        </li>
3745                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
3746                            data-lat="3.98" 
3747                            data-lng="11.59"
3748                            data-name="SOA"
3749                            data-address="."
3750                            data-city=""
3751                            data-phone="">
3752                            <div class="flex items-start space-x-3 sm:space-x-4">
3753                                <!-- Agency Icon -->
3754                                <div class="flex-shrink-0">
3755                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
3756                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3757                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3758                                        </svg>
3759                                    </div>
3760                                </div>
3761
3762                                <!-- Agency Details -->
3763                                <div class="flex-1 min-w-0">
3764                                    <div class="flex items-start justify-between">
3765                                        <div class="flex-1">
3766                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
3767                                                SOA
3768                                            </h3>
3769                                            <div class="mt-2 space-y-1">
3770                                                <div class="flex items-start text-gray-600">
3771                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3772                                                        <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"/>
3773                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
3774                                                    </svg>
3775                                                    <span class="text-xs sm:text-sm break-words">.</span>
3776                                                </div>
3777                                                <div class="flex items-center text-gray-600">
3778                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3779                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3780                                                    </svg>
3781                                                    <span class="text-xs sm:text-sm font-medium"></span>
3782                                                </div>
3783                                                <div class="flex items-center text-gray-600">
3784                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3785                                                        <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"/>
3786                                                    </svg>
3787                                                    <span class="text-xs sm:text-sm"></span>
3788                                                </div>
3789                                            </div>
3790                                        </div>
3791
3792                                        <!-- Action Button -->
3793                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
3794                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
3795                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3796                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
3797                                                </svg>
3798                                            </button>
3799                                        </div>
3800                                    </div>
3801                                </div>
3802                            </div>
3803                        </li>
3804                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
3805                            data-lat="4.05" 
3806                            data-lng="9.69"
3807                            data-name="AKWA CENTRE"
3808                            data-address="."
3809                            data-city=""
3810                            data-phone="">
3811                            <div class="flex items-start space-x-3 sm:space-x-4">
3812                                <!-- Agency Icon -->
3813                                <div class="flex-shrink-0">
3814                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
3815                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3816                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3817                                        </svg>
3818                                    </div>
3819                                </div>
3820
3821                                <!-- Agency Details -->
3822                                <div class="flex-1 min-w-0">
3823                                    <div class="flex items-start justify-between">
3824                                        <div class="flex-1">
3825                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
3826                                                AKWA CENTRE
3827                                            </h3>
3828                                            <div class="mt-2 space-y-1">
3829                                                <div class="flex items-start text-gray-600">
3830                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3831                                                        <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"/>
3832                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
3833                                                    </svg>
3834                                                    <span class="text-xs sm:text-sm break-words">.</span>
3835                                                </div>
3836                                                <div class="flex items-center text-gray-600">
3837                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3838                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3839                                                    </svg>
3840                                                    <span class="text-xs sm:text-sm font-medium"></span>
3841                                                </div>
3842                                                <div class="flex items-center text-gray-600">
3843                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3844                                                        <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"/>
3845                                                    </svg>
3846                                                    <span class="text-xs sm:text-sm"></span>
3847                                                </div>
3848                                            </div>
3849                                        </div>
3850
3851                                        <!-- Action Button -->
3852                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
3853                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
3854                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3855                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
3856                                                </svg>
3857                                            </button>
3858                                        </div>
3859                                    </div>
3860                                </div>
3861                            </div>
3862                        </li>
3863                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
3864                            data-lat="4.05" 
3865                            data-lng="9.69"
3866                            data-name="AC ENTREPRISE"
3867                            data-address="."
3868                            data-city=""
3869                            data-phone="">
3870                            <div class="flex items-start space-x-3 sm:space-x-4">
3871                                <!-- Agency Icon -->
3872                                <div class="flex-shrink-0">
3873                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
3874                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3875                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3876                                        </svg>
3877                                    </div>
3878                                </div>
3879
3880                                <!-- Agency Details -->
3881                                <div class="flex-1 min-w-0">
3882                                    <div class="flex items-start justify-between">
3883                                        <div class="flex-1">
3884                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
3885                                                AC ENTREPRISE
3886                                            </h3>
3887                                            <div class="mt-2 space-y-1">
3888                                                <div class="flex items-start text-gray-600">
3889                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3890                                                        <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"/>
3891                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
3892                                                    </svg>
3893                                                    <span class="text-xs sm:text-sm break-words">.</span>
3894                                                </div>
3895                                                <div class="flex items-center text-gray-600">
3896                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3897                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3898                                                    </svg>
3899                                                    <span class="text-xs sm:text-sm font-medium"></span>
3900                                                </div>
3901                                                <div class="flex items-center text-gray-600">
3902                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3903                                                        <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"/>
3904                                                    </svg>
3905                                                    <span class="text-xs sm:text-sm"></span>
3906                                                </div>
3907                                            </div>
3908                                        </div>
3909
3910                                        <!-- Action Button -->
3911                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
3912                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
3913                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3914                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
3915                                                </svg>
3916                                            </button>
3917                                        </div>
3918                                    </div>
3919                                </div>
3920                            </div>
3921                        </li>
3922                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
3923                            data-lat="4.05" 
3924                            data-lng="9.69"
3925                            data-name="BONAPRISO"
3926                            data-address="."
3927                            data-city=""
3928                            data-phone="">
3929                            <div class="flex items-start space-x-3 sm:space-x-4">
3930                                <!-- Agency Icon -->
3931                                <div class="flex-shrink-0">
3932                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
3933                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3934                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3935                                        </svg>
3936                                    </div>
3937                                </div>
3938
3939                                <!-- Agency Details -->
3940                                <div class="flex-1 min-w-0">
3941                                    <div class="flex items-start justify-between">
3942                                        <div class="flex-1">
3943                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
3944                                                BONAPRISO
3945                                            </h3>
3946                                            <div class="mt-2 space-y-1">
3947                                                <div class="flex items-start text-gray-600">
3948                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3949                                                        <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"/>
3950                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
3951                                                    </svg>
3952                                                    <span class="text-xs sm:text-sm break-words">.</span>
3953                                                </div>
3954                                                <div class="flex items-center text-gray-600">
3955                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3956                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3957                                                    </svg>
3958                                                    <span class="text-xs sm:text-sm font-medium"></span>
3959                                                </div>
3960                                                <div class="flex items-center text-gray-600">
3961                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3962                                                        <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"/>
3963                                                    </svg>
3964                                                    <span class="text-xs sm:text-sm"></span>
3965                                                </div>
3966                                            </div>
3967                                        </div>
3968
3969                                        <!-- Action Button -->
3970                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
3971                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
3972                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3973                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
3974                                                </svg>
3975                                            </button>
3976                                        </div>
3977                                    </div>
3978                                </div>
3979                            </div>
3980                        </li>
3981                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
3982                            data-lat="4.08" 
3983                            data-lng="9.75"
3984                            data-name="AKWA NORD"
3985                            data-address="."
3986                            data-city=""
3987                            data-phone="">
3988                            <div class="flex items-start space-x-3 sm:space-x-4">
3989                                <!-- Agency Icon -->
3990                                <div class="flex-shrink-0">
3991                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
3992                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
3993                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
3994                                        </svg>
3995                                    </div>
3996                                </div>
3997
3998                                <!-- Agency Details -->
3999                                <div class="flex-1 min-w-0">
4000                                    <div class="flex items-start justify-between">
4001                                        <div class="flex-1">
4002                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
4003                                                AKWA NORD
4004                                            </h3>
4005                                            <div class="mt-2 space-y-1">
4006                                                <div class="flex items-start text-gray-600">
4007                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4008                                                        <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"/>
4009                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
4010                                                    </svg>
4011                                                    <span class="text-xs sm:text-sm break-words">.</span>
4012                                                </div>
4013                                                <div class="flex items-center text-gray-600">
4014                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4015                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4016                                                    </svg>
4017                                                    <span class="text-xs sm:text-sm font-medium"></span>
4018                                                </div>
4019                                                <div class="flex items-center text-gray-600">
4020                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4021                                                        <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"/>
4022                                                    </svg>
4023                                                    <span class="text-xs sm:text-sm"></span>
4024                                                </div>
4025                                            </div>
4026                                        </div>
4027
4028                                        <!-- Action Button -->
4029                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
4030                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
4031                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4032                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
4033                                                </svg>
4034                                            </button>
4035                                        </div>
4036                                    </div>
4037                                </div>
4038                            </div>
4039                        </li>
4040                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
4041                            data-lat="4.04" 
4042                            data-lng="9.76"
4043                            data-name="BASSA"
4044                            data-address="."
4045                            data-city=""
4046                            data-phone="">
4047                            <div class="flex items-start space-x-3 sm:space-x-4">
4048                                <!-- Agency Icon -->
4049                                <div class="flex-shrink-0">
4050                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
4051                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4052                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4053                                        </svg>
4054                                    </div>
4055                                </div>
4056
4057                                <!-- Agency Details -->
4058                                <div class="flex-1 min-w-0">
4059                                    <div class="flex items-start justify-between">
4060                                        <div class="flex-1">
4061                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
4062                                                BASSA
4063                                            </h3>
4064                                            <div class="mt-2 space-y-1">
4065                                                <div class="flex items-start text-gray-600">
4066                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4067                                                        <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"/>
4068                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
4069                                                    </svg>
4070                                                    <span class="text-xs sm:text-sm break-words">.</span>
4071                                                </div>
4072                                                <div class="flex items-center text-gray-600">
4073                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4074                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4075                                                    </svg>
4076                                                    <span class="text-xs sm:text-sm font-medium"></span>
4077                                                </div>
4078                                                <div class="flex items-center text-gray-600">
4079                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4080                                                        <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"/>
4081                                                    </svg>
4082                                                    <span class="text-xs sm:text-sm"></span>
4083                                                </div>
4084                                            </div>
4085                                        </div>
4086
4087                                        <!-- Action Button -->
4088                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
4089                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
4090                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4091                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
4092                                                </svg>
4093                                            </button>
4094                                        </div>
4095                                    </div>
4096                                </div>
4097                            </div>
4098                        </li>
4099                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
4100                            data-lat="4.06" 
4101                            data-lng="9.73"
4102                            data-name="BEPANDA"
4103                            data-address="."
4104                            data-city=""
4105                            data-phone="">
4106                            <div class="flex items-start space-x-3 sm:space-x-4">
4107                                <!-- Agency Icon -->
4108                                <div class="flex-shrink-0">
4109                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
4110                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4111                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4112                                        </svg>
4113                                    </div>
4114                                </div>
4115
4116                                <!-- Agency Details -->
4117                                <div class="flex-1 min-w-0">
4118                                    <div class="flex items-start justify-between">
4119                                        <div class="flex-1">
4120                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
4121                                                BEPANDA
4122                                            </h3>
4123                                            <div class="mt-2 space-y-1">
4124                                                <div class="flex items-start text-gray-600">
4125                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4126                                                        <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"/>
4127                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
4128                                                    </svg>
4129                                                    <span class="text-xs sm:text-sm break-words">.</span>
4130                                                </div>
4131                                                <div class="flex items-center text-gray-600">
4132                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4133                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4134                                                    </svg>
4135                                                    <span class="text-xs sm:text-sm font-medium"></span>
4136                                                </div>
4137                                                <div class="flex items-center text-gray-600">
4138                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4139                                                        <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"/>
4140                                                    </svg>
4141                                                    <span class="text-xs sm:text-sm"></span>
4142                                                </div>
4143                                            </div>
4144                                        </div>
4145
4146                                        <!-- Action Button -->
4147                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
4148                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
4149                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4150                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
4151                                                </svg>
4152                                            </button>
4153                                        </div>
4154                                    </div>
4155                                </div>
4156                            </div>
4157                        </li>
4158                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
4159                            data-lat="4.10" 
4160                            data-lng="9.65"
4161                            data-name="BONABERI"
4162                            data-address="."
4163                            data-city=""
4164                            data-phone="">
4165                            <div class="flex items-start space-x-3 sm:space-x-4">
4166                                <!-- Agency Icon -->
4167                                <div class="flex-shrink-0">
4168                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
4169                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4170                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4171                                        </svg>
4172                                    </div>
4173                                </div>
4174
4175                                <!-- Agency Details -->
4176                                <div class="flex-1 min-w-0">
4177                                    <div class="flex items-start justify-between">
4178                                        <div class="flex-1">
4179                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
4180                                                BONABERI
4181                                            </h3>
4182                                            <div class="mt-2 space-y-1">
4183                                                <div class="flex items-start text-gray-600">
4184                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4185                                                        <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"/>
4186                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
4187                                                    </svg>
4188                                                    <span class="text-xs sm:text-sm break-words">.</span>
4189                                                </div>
4190                                                <div class="flex items-center text-gray-600">
4191                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4192                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4193                                                    </svg>
4194                                                    <span class="text-xs sm:text-sm font-medium"></span>
4195                                                </div>
4196                                                <div class="flex items-center text-gray-600">
4197                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4198                                                        <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"/>
4199                                                    </svg>
4200                                                    <span class="text-xs sm:text-sm"></span>
4201                                                </div>
4202                                            </div>
4203                                        </div>
4204
4205                                        <!-- Action Button -->
4206                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
4207                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
4208                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4209                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
4210                                                </svg>
4211                                            </button>
4212                                        </div>
4213                                    </div>
4214                                </div>
4215                            </div>
4216                        </li>
4217                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
4218                            data-lat="4.04" 
4219                            data-lng="9.69"
4220                            data-name="BONANJO"
4221                            data-address="."
4222                            data-city=""
4223                            data-phone="">
4224                            <div class="flex items-start space-x-3 sm:space-x-4">
4225                                <!-- Agency Icon -->
4226                                <div class="flex-shrink-0">
4227                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
4228                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4229                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4230                                        </svg>
4231                                    </div>
4232                                </div>
4233
4234                                <!-- Agency Details -->
4235                                <div class="flex-1 min-w-0">
4236                                    <div class="flex items-start justify-between">
4237                                        <div class="flex-1">
4238                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
4239                                                BONANJO
4240                                            </h3>
4241                                            <div class="mt-2 space-y-1">
4242                                                <div class="flex items-start text-gray-600">
4243                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4244                                                        <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"/>
4245                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
4246                                                    </svg>
4247                                                    <span class="text-xs sm:text-sm break-words">.</span>
4248                                                </div>
4249                                                <div class="flex items-center text-gray-600">
4250                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4251                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4252                                                    </svg>
4253                                                    <span class="text-xs sm:text-sm font-medium"></span>
4254                                                </div>
4255                                                <div class="flex items-center text-gray-600">
4256                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4257                                                        <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"/>
4258                                                    </svg>
4259                                                    <span class="text-xs sm:text-sm"></span>
4260                                                </div>
4261                                            </div>
4262                                        </div>
4263
4264                                        <!-- Action Button -->
4265                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
4266                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
4267                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4268                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
4269                                                </svg>
4270                                            </button>
4271                                        </div>
4272                                    </div>
4273                                </div>
4274                            </div>
4275                        </li>
4276                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
4277                            data-lat="3.80" 
4278                            data-lng="10.13"
4279                            data-name="EDEA"
4280                            data-address="."
4281                            data-city=""
4282                            data-phone="">
4283                            <div class="flex items-start space-x-3 sm:space-x-4">
4284                                <!-- Agency Icon -->
4285                                <div class="flex-shrink-0">
4286                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
4287                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4288                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4289                                        </svg>
4290                                    </div>
4291                                </div>
4292
4293                                <!-- Agency Details -->
4294                                <div class="flex-1 min-w-0">
4295                                    <div class="flex items-start justify-between">
4296                                        <div class="flex-1">
4297                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
4298                                                EDEA
4299                                            </h3>
4300                                            <div class="mt-2 space-y-1">
4301                                                <div class="flex items-start text-gray-600">
4302                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4303                                                        <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"/>
4304                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
4305                                                    </svg>
4306                                                    <span class="text-xs sm:text-sm break-words">.</span>
4307                                                </div>
4308                                                <div class="flex items-center text-gray-600">
4309                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4310                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4311                                                    </svg>
4312                                                    <span class="text-xs sm:text-sm font-medium"></span>
4313                                                </div>
4314                                                <div class="flex items-center text-gray-600">
4315                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4316                                                        <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"/>
4317                                                    </svg>
4318                                                    <span class="text-xs sm:text-sm"></span>
4319                                                </div>
4320                                            </div>
4321                                        </div>
4322
4323                                        <!-- Action Button -->
4324                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
4325                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
4326                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4327                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
4328                                                </svg>
4329                                            </button>
4330                                        </div>
4331                                    </div>
4332                                </div>
4333                            </div>
4334                        </li>
4335                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
4336                            data-lat="4.03" 
4337                            data-lng="9.74"
4338                            data-name="VILLAGE"
4339                            data-address="."
4340                            data-city=""
4341                            data-phone="">
4342                            <div class="flex items-start space-x-3 sm:space-x-4">
4343                                <!-- Agency Icon -->
4344                                <div class="flex-shrink-0">
4345                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
4346                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4347                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4348                                        </svg>
4349                                    </div>
4350                                </div>
4351
4352                                <!-- Agency Details -->
4353                                <div class="flex-1 min-w-0">
4354                                    <div class="flex items-start justify-between">
4355                                        <div class="flex-1">
4356                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
4357                                                VILLAGE
4358                                            </h3>
4359                                            <div class="mt-2 space-y-1">
4360                                                <div class="flex items-start text-gray-600">
4361                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4362                                                        <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"/>
4363                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
4364                                                    </svg>
4365                                                    <span class="text-xs sm:text-sm break-words">.</span>
4366                                                </div>
4367                                                <div class="flex items-center text-gray-600">
4368                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4369                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4370                                                    </svg>
4371                                                    <span class="text-xs sm:text-sm font-medium"></span>
4372                                                </div>
4373                                                <div class="flex items-center text-gray-600">
4374                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4375                                                        <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"/>
4376                                                    </svg>
4377                                                    <span class="text-xs sm:text-sm"></span>
4378                                                </div>
4379                                            </div>
4380                                        </div>
4381
4382                                        <!-- Action Button -->
4383                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
4384                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
4385                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4386                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
4387                                                </svg>
4388                                            </button>
4389                                        </div>
4390                                    </div>
4391                                </div>
4392                            </div>
4393                        </li>
4394                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
4395                            data-lat="4.05" 
4396                            data-lng="9.76"
4397                            data-name="CITE DES PALMIERS"
4398                            data-address="."
4399                            data-city=""
4400                            data-phone="">
4401                            <div class="flex items-start space-x-3 sm:space-x-4">
4402                                <!-- Agency Icon -->
4403                                <div class="flex-shrink-0">
4404                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
4405                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4406                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4407                                        </svg>
4408                                    </div>
4409                                </div>
4410
4411                                <!-- Agency Details -->
4412                                <div class="flex-1 min-w-0">
4413                                    <div class="flex items-start justify-between">
4414                                        <div class="flex-1">
4415                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
4416                                                CITE DES PALMIERS
4417                                            </h3>
4418                                            <div class="mt-2 space-y-1">
4419                                                <div class="flex items-start text-gray-600">
4420                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4421                                                        <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"/>
4422                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
4423                                                    </svg>
4424                                                    <span class="text-xs sm:text-sm break-words">.</span>
4425                                                </div>
4426                                                <div class="flex items-center text-gray-600">
4427                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4428                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4429                                                    </svg>
4430                                                    <span class="text-xs sm:text-sm font-medium"></span>
4431                                                </div>
4432                                                <div class="flex items-center text-gray-600">
4433                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4434                                                        <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"/>
4435                                                    </svg>
4436                                                    <span class="text-xs sm:text-sm"></span>
4437                                                </div>
4438                                            </div>
4439                                        </div>
4440
4441                                        <!-- Action Button -->
4442                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
4443                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
4444                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4445                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
4446                                                </svg>
4447                                            </button>
4448                                        </div>
4449                                    </div>
4450                                </div>
4451                            </div>
4452                        </li>
4453                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
4454                            data-lat="4.96" 
4455                            data-lng="9.94"
4456                            data-name="NKONGSAMBA"
4457                            data-address="."
4458                            data-city=""
4459                            data-phone="">
4460                            <div class="flex items-start space-x-3 sm:space-x-4">
4461                                <!-- Agency Icon -->
4462                                <div class="flex-shrink-0">
4463                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
4464                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4465                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4466                                        </svg>
4467                                    </div>
4468                                </div>
4469
4470                                <!-- Agency Details -->
4471                                <div class="flex-1 min-w-0">
4472                                    <div class="flex items-start justify-between">
4473                                        <div class="flex-1">
4474                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
4475                                                NKONGSAMBA
4476                                            </h3>
4477                                            <div class="mt-2 space-y-1">
4478                                                <div class="flex items-start text-gray-600">
4479                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4480                                                        <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"/>
4481                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
4482                                                    </svg>
4483                                                    <span class="text-xs sm:text-sm break-words">.</span>
4484                                                </div>
4485                                                <div class="flex items-center text-gray-600">
4486                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4487                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4488                                                    </svg>
4489                                                    <span class="text-xs sm:text-sm font-medium"></span>
4490                                                </div>
4491                                                <div class="flex items-center text-gray-600">
4492                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4493                                                        <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"/>
4494                                                    </svg>
4495                                                    <span class="text-xs sm:text-sm"></span>
4496                                                </div>
4497                                            </div>
4498                                        </div>
4499
4500                                        <!-- Action Button -->
4501                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
4502                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
4503                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4504                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
4505                                                </svg>
4506                                            </button>
4507                                        </div>
4508                                    </div>
4509                                </div>
4510                            </div>
4511                        </li>
4512                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
4513                            data-lat="6.52" 
4514                            data-lng="14.29"
4515                            data-name="MEIGANGA"
4516                            data-address="."
4517                            data-city=""
4518                            data-phone="">
4519                            <div class="flex items-start space-x-3 sm:space-x-4">
4520                                <!-- Agency Icon -->
4521                                <div class="flex-shrink-0">
4522                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
4523                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4524                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4525                                        </svg>
4526                                    </div>
4527                                </div>
4528
4529                                <!-- Agency Details -->
4530                                <div class="flex-1 min-w-0">
4531                                    <div class="flex items-start justify-between">
4532                                        <div class="flex-1">
4533                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
4534                                                MEIGANGA
4535                                            </h3>
4536                                            <div class="mt-2 space-y-1">
4537                                                <div class="flex items-start text-gray-600">
4538                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4539                                                        <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"/>
4540                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
4541                                                    </svg>
4542                                                    <span class="text-xs sm:text-sm break-words">.</span>
4543                                                </div>
4544                                                <div class="flex items-center text-gray-600">
4545                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4546                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4547                                                    </svg>
4548                                                    <span class="text-xs sm:text-sm font-medium"></span>
4549                                                </div>
4550                                                <div class="flex items-center text-gray-600">
4551                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4552                                                        <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"/>
4553                                                    </svg>
4554                                                    <span class="text-xs sm:text-sm"></span>
4555                                                </div>
4556                                            </div>
4557                                        </div>
4558
4559                                        <!-- Action Button -->
4560                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
4561                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
4562                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4563                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
4564                                                </svg>
4565                                            </button>
4566                                        </div>
4567                                    </div>
4568                                </div>
4569                            </div>
4570                        </li>
4571                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
4572                            data-lat="7.32" 
4573                            data-lng="13.58"
4574                            data-name="NGAOUNDERE"
4575                            data-address="."
4576                            data-city=""
4577                            data-phone="">
4578                            <div class="flex items-start space-x-3 sm:space-x-4">
4579                                <!-- Agency Icon -->
4580                                <div class="flex-shrink-0">
4581                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
4582                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4583                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4584                                        </svg>
4585                                    </div>
4586                                </div>
4587
4588                                <!-- Agency Details -->
4589                                <div class="flex-1 min-w-0">
4590                                    <div class="flex items-start justify-between">
4591                                        <div class="flex-1">
4592                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
4593                                                NGAOUNDERE
4594                                            </h3>
4595                                            <div class="mt-2 space-y-1">
4596                                                <div class="flex items-start text-gray-600">
4597                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4598                                                        <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"/>
4599                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
4600                                                    </svg>
4601                                                    <span class="text-xs sm:text-sm break-words">.</span>
4602                                                </div>
4603                                                <div class="flex items-center text-gray-600">
4604                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4605                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4606                                                    </svg>
4607                                                    <span class="text-xs sm:text-sm font-medium"></span>
4608                                                </div>
4609                                                <div class="flex items-center text-gray-600">
4610                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4611                                                        <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"/>
4612                                                    </svg>
4613                                                    <span class="text-xs sm:text-sm"></span>
4614                                                </div>
4615                                            </div>
4616                                        </div>
4617
4618                                        <!-- Action Button -->
4619                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
4620                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
4621                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4622                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
4623                                                </svg>
4624                                            </button>
4625                                        </div>
4626                                    </div>
4627                                </div>
4628                            </div>
4629                        </li>
4630                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
4631                            data-lat="6.76" 
4632                            data-lng="11.81"
4633                            data-name="BANYO"
4634                            data-address="."
4635                            data-city=""
4636                            data-phone="">
4637                            <div class="flex items-start space-x-3 sm:space-x-4">
4638                                <!-- Agency Icon -->
4639                                <div class="flex-shrink-0">
4640                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
4641                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4642                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4643                                        </svg>
4644                                    </div>
4645                                </div>
4646
4647                                <!-- Agency Details -->
4648                                <div class="flex-1 min-w-0">
4649                                    <div class="flex items-start justify-between">
4650                                        <div class="flex-1">
4651                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
4652                                                BANYO
4653                                            </h3>
4654                                            <div class="mt-2 space-y-1">
4655                                                <div class="flex items-start text-gray-600">
4656                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4657                                                        <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"/>
4658                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
4659                                                    </svg>
4660                                                    <span class="text-xs sm:text-sm break-words">.</span>
4661                                                </div>
4662                                                <div class="flex items-center text-gray-600">
4663                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4664                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4665                                                    </svg>
4666                                                    <span class="text-xs sm:text-sm font-medium"></span>
4667                                                </div>
4668                                                <div class="flex items-center text-gray-600">
4669                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4670                                                        <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"/>
4671                                                    </svg>
4672                                                    <span class="text-xs sm:text-sm"></span>
4673                                                </div>
4674                                            </div>
4675                                        </div>
4676
4677                                        <!-- Action Button -->
4678                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
4679                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
4680                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4681                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
4682                                                </svg>
4683                                            </button>
4684                                        </div>
4685                                    </div>
4686                                </div>
4687                            </div>
4688                        </li>
4689                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
4690                            data-lat="7.42" 
4691                            data-lng="13.55"
4692                            data-name="DANG"
4693                            data-address="."
4694                            data-city=""
4695                            data-phone="">
4696                            <div class="flex items-start space-x-3 sm:space-x-4">
4697                                <!-- Agency Icon -->
4698                                <div class="flex-shrink-0">
4699                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
4700                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4701                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4702                                        </svg>
4703                                    </div>
4704                                </div>
4705
4706                                <!-- Agency Details -->
4707                                <div class="flex-1 min-w-0">
4708                                    <div class="flex items-start justify-between">
4709                                        <div class="flex-1">
4710                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
4711                                                DANG
4712                                            </h3>
4713                                            <div class="mt-2 space-y-1">
4714                                                <div class="flex items-start text-gray-600">
4715                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4716                                                        <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"/>
4717                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
4718                                                    </svg>
4719                                                    <span class="text-xs sm:text-sm break-words">.</span>
4720                                                </div>
4721                                                <div class="flex items-center text-gray-600">
4722                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4723                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4724                                                    </svg>
4725                                                    <span class="text-xs sm:text-sm font-medium"></span>
4726                                                </div>
4727                                                <div class="flex items-center text-gray-600">
4728                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4729                                                        <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"/>
4730                                                    </svg>
4731                                                    <span class="text-xs sm:text-sm"></span>
4732                                                </div>
4733                                            </div>
4734                                        </div>
4735
4736                                        <!-- Action Button -->
4737                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
4738                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
4739                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4740                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
4741                                                </svg>
4742                                            </button>
4743                                        </div>
4744                                    </div>
4745                                </div>
4746                            </div>
4747                        </li>
4748                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
4749                            data-lat="7.34" 
4750                            data-lng="13.59"
4751                            data-name="GARE"
4752                            data-address="."
4753                            data-city=""
4754                            data-phone="">
4755                            <div class="flex items-start space-x-3 sm:space-x-4">
4756                                <!-- Agency Icon -->
4757                                <div class="flex-shrink-0">
4758                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
4759                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4760                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4761                                        </svg>
4762                                    </div>
4763                                </div>
4764
4765                                <!-- Agency Details -->
4766                                <div class="flex-1 min-w-0">
4767                                    <div class="flex items-start justify-between">
4768                                        <div class="flex-1">
4769                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
4770                                                GARE
4771                                            </h3>
4772                                            <div class="mt-2 space-y-1">
4773                                                <div class="flex items-start text-gray-600">
4774                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4775                                                        <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"/>
4776                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
4777                                                    </svg>
4778                                                    <span class="text-xs sm:text-sm break-words">.</span>
4779                                                </div>
4780                                                <div class="flex items-center text-gray-600">
4781                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4782                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4783                                                    </svg>
4784                                                    <span class="text-xs sm:text-sm font-medium"></span>
4785                                                </div>
4786                                                <div class="flex items-center text-gray-600">
4787                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4788                                                        <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"/>
4789                                                    </svg>
4790                                                    <span class="text-xs sm:text-sm"></span>
4791                                                </div>
4792                                            </div>
4793                                        </div>
4794
4795                                        <!-- Action Button -->
4796                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
4797                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
4798                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4799                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
4800                                                </svg>
4801                                            </button>
4802                                        </div>
4803                                    </div>
4804                                </div>
4805                            </div>
4806                        </li>
4807                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
4808                            data-lat="6.47" 
4809                            data-lng="12.62"
4810                            data-name="TIBATI"
4811                            data-address="."
4812                            data-city=""
4813                            data-phone="">
4814                            <div class="flex items-start space-x-3 sm:space-x-4">
4815                                <!-- Agency Icon -->
4816                                <div class="flex-shrink-0">
4817                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
4818                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4819                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4820                                        </svg>
4821                                    </div>
4822                                </div>
4823
4824                                <!-- Agency Details -->
4825                                <div class="flex-1 min-w-0">
4826                                    <div class="flex items-start justify-between">
4827                                        <div class="flex-1">
4828                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
4829                                                TIBATI
4830                                            </h3>
4831                                            <div class="mt-2 space-y-1">
4832                                                <div class="flex items-start text-gray-600">
4833                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4834                                                        <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"/>
4835                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
4836                                                    </svg>
4837                                                    <span class="text-xs sm:text-sm break-words">.</span>
4838                                                </div>
4839                                                <div class="flex items-center text-gray-600">
4840                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4841                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4842                                                    </svg>
4843                                                    <span class="text-xs sm:text-sm font-medium"></span>
4844                                                </div>
4845                                                <div class="flex items-center text-gray-600">
4846                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4847                                                        <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"/>
4848                                                    </svg>
4849                                                    <span class="text-xs sm:text-sm"></span>
4850                                                </div>
4851                                            </div>
4852                                        </div>
4853
4854                                        <!-- Action Button -->
4855                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
4856                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
4857                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4858                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
4859                                                </svg>
4860                                            </button>
4861                                        </div>
4862                                    </div>
4863                                </div>
4864                            </div>
4865                        </li>
4866                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
4867                            data-lat="7.37" 
4868                            data-lng="12.66"
4869                            data-name="TIGNERE"
4870                            data-address="."
4871                            data-city=""
4872                            data-phone="">
4873                            <div class="flex items-start space-x-3 sm:space-x-4">
4874                                <!-- Agency Icon -->
4875                                <div class="flex-shrink-0">
4876                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
4877                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4878                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4879                                        </svg>
4880                                    </div>
4881                                </div>
4882
4883                                <!-- Agency Details -->
4884                                <div class="flex-1 min-w-0">
4885                                    <div class="flex items-start justify-between">
4886                                        <div class="flex-1">
4887                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
4888                                                TIGNERE
4889                                            </h3>
4890                                            <div class="mt-2 space-y-1">
4891                                                <div class="flex items-start text-gray-600">
4892                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4893                                                        <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"/>
4894                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
4895                                                    </svg>
4896                                                    <span class="text-xs sm:text-sm break-words">.</span>
4897                                                </div>
4898                                                <div class="flex items-center text-gray-600">
4899                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4900                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4901                                                    </svg>
4902                                                    <span class="text-xs sm:text-sm font-medium"></span>
4903                                                </div>
4904                                                <div class="flex items-center text-gray-600">
4905                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4906                                                        <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"/>
4907                                                    </svg>
4908                                                    <span class="text-xs sm:text-sm"></span>
4909                                                </div>
4910                                            </div>
4911                                        </div>
4912
4913                                        <!-- Action Button -->
4914                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
4915                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
4916                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4917                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
4918                                                </svg>
4919                                            </button>
4920                                        </div>
4921                                    </div>
4922                                </div>
4923                            </div>
4924                        </li>
4925                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
4926                            data-lat="3.98" 
4927                            data-lng="13.19"
4928                            data-name="ABONG-MBONG"
4929                            data-address="."
4930                            data-city=""
4931                            data-phone="">
4932                            <div class="flex items-start space-x-3 sm:space-x-4">
4933                                <!-- Agency Icon -->
4934                                <div class="flex-shrink-0">
4935                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
4936                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4937                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4938                                        </svg>
4939                                    </div>
4940                                </div>
4941
4942                                <!-- Agency Details -->
4943                                <div class="flex-1 min-w-0">
4944                                    <div class="flex items-start justify-between">
4945                                        <div class="flex-1">
4946                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
4947                                                ABONG-MBONG
4948                                            </h3>
4949                                            <div class="mt-2 space-y-1">
4950                                                <div class="flex items-start text-gray-600">
4951                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4952                                                        <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"/>
4953                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
4954                                                    </svg>
4955                                                    <span class="text-xs sm:text-sm break-words">.</span>
4956                                                </div>
4957                                                <div class="flex items-center text-gray-600">
4958                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4959                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4960                                                    </svg>
4961                                                    <span class="text-xs sm:text-sm font-medium"></span>
4962                                                </div>
4963                                                <div class="flex items-center text-gray-600">
4964                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4965                                                        <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"/>
4966                                                    </svg>
4967                                                    <span class="text-xs sm:text-sm"></span>
4968                                                </div>
4969                                            </div>
4970                                        </div>
4971
4972                                        <!-- Action Button -->
4973                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
4974                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
4975                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4976                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
4977                                                </svg>
4978                                            </button>
4979                                        </div>
4980                                    </div>
4981                                </div>
4982                            </div>
4983                        </li>
4984                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
4985                            data-lat="4.58" 
4986                            data-lng="13.64"
4987                            data-name="BERTOUA"
4988                            data-address="."
4989                            data-city=""
4990                            data-phone="">
4991                            <div class="flex items-start space-x-3 sm:space-x-4">
4992                                <!-- Agency Icon -->
4993                                <div class="flex-shrink-0">
4994                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
4995                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4996                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
4997                                        </svg>
4998                                    </div>
4999                                </div>
5000
5001                                <!-- Agency Details -->
5002                                <div class="flex-1 min-w-0">
5003                                    <div class="flex items-start justify-between">
5004                                        <div class="flex-1">
5005                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
5006                                                BERTOUA
5007                                            </h3>
5008                                            <div class="mt-2 space-y-1">
5009                                                <div class="flex items-start text-gray-600">
5010                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5011                                                        <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"/>
5012                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
5013                                                    </svg>
5014                                                    <span class="text-xs sm:text-sm break-words">.</span>
5015                                                </div>
5016                                                <div class="flex items-center text-gray-600">
5017                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5018                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5019                                                    </svg>
5020                                                    <span class="text-xs sm:text-sm font-medium"></span>
5021                                                </div>
5022                                                <div class="flex items-center text-gray-600">
5023                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5024                                                        <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"/>
5025                                                    </svg>
5026                                                    <span class="text-xs sm:text-sm"></span>
5027                                                </div>
5028                                            </div>
5029                                        </div>
5030
5031                                        <!-- Action Button -->
5032                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
5033                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
5034                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5035                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
5036                                                </svg>
5037                                            </button>
5038                                        </div>
5039                                    </div>
5040                                </div>
5041                            </div>
5042                        </li>
5043                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
5044                            data-lat="4.44" 
5045                            data-lng="14.37"
5046                            data-name="BELABO"
5047                            data-address="."
5048                            data-city=""
5049                            data-phone="">
5050                            <div class="flex items-start space-x-3 sm:space-x-4">
5051                                <!-- Agency Icon -->
5052                                <div class="flex-shrink-0">
5053                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
5054                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5055                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5056                                        </svg>
5057                                    </div>
5058                                </div>
5059
5060                                <!-- Agency Details -->
5061                                <div class="flex-1 min-w-0">
5062                                    <div class="flex items-start justify-between">
5063                                        <div class="flex-1">
5064                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
5065                                                BELABO
5066                                            </h3>
5067                                            <div class="mt-2 space-y-1">
5068                                                <div class="flex items-start text-gray-600">
5069                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5070                                                        <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"/>
5071                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
5072                                                    </svg>
5073                                                    <span class="text-xs sm:text-sm break-words">.</span>
5074                                                </div>
5075                                                <div class="flex items-center text-gray-600">
5076                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5077                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5078                                                    </svg>
5079                                                    <span class="text-xs sm:text-sm font-medium"></span>
5080                                                </div>
5081                                                <div class="flex items-center text-gray-600">
5082                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5083                                                        <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"/>
5084                                                    </svg>
5085                                                    <span class="text-xs sm:text-sm"></span>
5086                                                </div>
5087                                            </div>
5088                                        </div>
5089
5090                                        <!-- Action Button -->
5091                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
5092                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
5093                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5094                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
5095                                                </svg>
5096                                            </button>
5097                                        </div>
5098                                    </div>
5099                                </div>
5100                            </div>
5101                        </li>
5102                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
5103                            data-lat="4.57" 
5104                            data-lng="13.68"
5105                            data-name="DABADJI"
5106                            data-address="."
5107                            data-city=""
5108                            data-phone="">
5109                            <div class="flex items-start space-x-3 sm:space-x-4">
5110                                <!-- Agency Icon -->
5111                                <div class="flex-shrink-0">
5112                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
5113                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5114                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5115                                        </svg>
5116                                    </div>
5117                                </div>
5118
5119                                <!-- Agency Details -->
5120                                <div class="flex-1 min-w-0">
5121                                    <div class="flex items-start justify-between">
5122                                        <div class="flex-1">
5123                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
5124                                                DABADJI
5125                                            </h3>
5126                                            <div class="mt-2 space-y-1">
5127                                                <div class="flex items-start text-gray-600">
5128                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5129                                                        <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"/>
5130                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
5131                                                    </svg>
5132                                                    <span class="text-xs sm:text-sm break-words">.</span>
5133                                                </div>
5134                                                <div class="flex items-center text-gray-600">
5135                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5136                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5137                                                    </svg>
5138                                                    <span class="text-xs sm:text-sm font-medium"></span>
5139                                                </div>
5140                                                <div class="flex items-center text-gray-600">
5141                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5142                                                        <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"/>
5143                                                    </svg>
5144                                                    <span class="text-xs sm:text-sm"></span>
5145                                                </div>
5146                                            </div>
5147                                        </div>
5148
5149                                        <!-- Action Button -->
5150                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
5151                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
5152                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5153                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
5154                                                </svg>
5155                                            </button>
5156                                        </div>
5157                                    </div>
5158                                </div>
5159                            </div>
5160                        </li>
5161                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
5162                            data-lat="4.58" 
5163                            data-lng="13.68"
5164                            data-name="FACE A FACE"
5165                            data-address="."
5166                            data-city=""
5167                            data-phone="">
5168                            <div class="flex items-start space-x-3 sm:space-x-4">
5169                                <!-- Agency Icon -->
5170                                <div class="flex-shrink-0">
5171                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
5172                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5173                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5174                                        </svg>
5175                                    </div>
5176                                </div>
5177
5178                                <!-- Agency Details -->
5179                                <div class="flex-1 min-w-0">
5180                                    <div class="flex items-start justify-between">
5181                                        <div class="flex-1">
5182                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
5183                                                FACE A FACE
5184                                            </h3>
5185                                            <div class="mt-2 space-y-1">
5186                                                <div class="flex items-start text-gray-600">
5187                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5188                                                        <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"/>
5189                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
5190                                                    </svg>
5191                                                    <span class="text-xs sm:text-sm break-words">.</span>
5192                                                </div>
5193                                                <div class="flex items-center text-gray-600">
5194                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5195                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5196                                                    </svg>
5197                                                    <span class="text-xs sm:text-sm font-medium"></span>
5198                                                </div>
5199                                                <div class="flex items-center text-gray-600">
5200                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5201                                                        <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"/>
5202                                                    </svg>
5203                                                    <span class="text-xs sm:text-sm"></span>
5204                                                </div>
5205                                            </div>
5206                                        </div>
5207
5208                                        <!-- Action Button -->
5209                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
5210                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
5211                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5212                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
5213                                                </svg>
5214                                            </button>
5215                                        </div>
5216                                    </div>
5217                                </div>
5218                            </div>
5219                        </li>
5220                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
5221                            data-lat="4.92" 
5222                            data-lng="13.29"
5223                            data-name="GAROUA BOULAI"
5224                            data-address="."
5225                            data-city=""
5226                            data-phone="">
5227                            <div class="flex items-start space-x-3 sm:space-x-4">
5228                                <!-- Agency Icon -->
5229                                <div class="flex-shrink-0">
5230                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
5231                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5232                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5233                                        </svg>
5234                                    </div>
5235                                </div>
5236
5237                                <!-- Agency Details -->
5238                                <div class="flex-1 min-w-0">
5239                                    <div class="flex items-start justify-between">
5240                                        <div class="flex-1">
5241                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
5242                                                GAROUA BOULAI
5243                                            </h3>
5244                                            <div class="mt-2 space-y-1">
5245                                                <div class="flex items-start text-gray-600">
5246                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5247                                                        <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"/>
5248                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
5249                                                    </svg>
5250                                                    <span class="text-xs sm:text-sm break-words">.</span>
5251                                                </div>
5252                                                <div class="flex items-center text-gray-600">
5253                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5254                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5255                                                    </svg>
5256                                                    <span class="text-xs sm:text-sm font-medium"></span>
5257                                                </div>
5258                                                <div class="flex items-center text-gray-600">
5259                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5260                                                        <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"/>
5261                                                    </svg>
5262                                                    <span class="text-xs sm:text-sm"></span>
5263                                                </div>
5264                                            </div>
5265                                        </div>
5266
5267                                        <!-- Action Button -->
5268                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
5269                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
5270                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5271                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
5272                                                </svg>
5273                                            </button>
5274                                        </div>
5275                                    </div>
5276                                </div>
5277                            </div>
5278                        </li>
5279                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
5280                            data-lat="4.58" 
5281                            data-lng="13.68"
5282                            data-name="MOKOLO"
5283                            data-address="."
5284                            data-city=""
5285                            data-phone="">
5286                            <div class="flex items-start space-x-3 sm:space-x-4">
5287                                <!-- Agency Icon -->
5288                                <div class="flex-shrink-0">
5289                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
5290                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5291                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5292                                        </svg>
5293                                    </div>
5294                                </div>
5295
5296                                <!-- Agency Details -->
5297                                <div class="flex-1 min-w-0">
5298                                    <div class="flex items-start justify-between">
5299                                        <div class="flex-1">
5300                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
5301                                                MOKOLO
5302                                            </h3>
5303                                            <div class="mt-2 space-y-1">
5304                                                <div class="flex items-start text-gray-600">
5305                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5306                                                        <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"/>
5307                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
5308                                                    </svg>
5309                                                    <span class="text-xs sm:text-sm break-words">.</span>
5310                                                </div>
5311                                                <div class="flex items-center text-gray-600">
5312                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5313                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5314                                                    </svg>
5315                                                    <span class="text-xs sm:text-sm font-medium"></span>
5316                                                </div>
5317                                                <div class="flex items-center text-gray-600">
5318                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5319                                                        <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"/>
5320                                                    </svg>
5321                                                    <span class="text-xs sm:text-sm"></span>
5322                                                </div>
5323                                            </div>
5324                                        </div>
5325
5326                                        <!-- Action Button -->
5327                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
5328                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
5329                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5330                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
5331                                                </svg>
5332                                            </button>
5333                                        </div>
5334                                    </div>
5335                                </div>
5336                            </div>
5337                        </li>
5338                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
5339                            data-lat="3.51" 
5340                            data-lng="15.05"
5341                            data-name="YOKADOUMA"
5342                            data-address="."
5343                            data-city=""
5344                            data-phone="">
5345                            <div class="flex items-start space-x-3 sm:space-x-4">
5346                                <!-- Agency Icon -->
5347                                <div class="flex-shrink-0">
5348                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
5349                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5350                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5351                                        </svg>
5352                                    </div>
5353                                </div>
5354
5355                                <!-- Agency Details -->
5356                                <div class="flex-1 min-w-0">
5357                                    <div class="flex items-start justify-between">
5358                                        <div class="flex-1">
5359                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
5360                                                YOKADOUMA
5361                                            </h3>
5362                                            <div class="mt-2 space-y-1">
5363                                                <div class="flex items-start text-gray-600">
5364                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5365                                                        <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"/>
5366                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
5367                                                    </svg>
5368                                                    <span class="text-xs sm:text-sm break-words">.</span>
5369                                                </div>
5370                                                <div class="flex items-center text-gray-600">
5371                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5372                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5373                                                    </svg>
5374                                                    <span class="text-xs sm:text-sm font-medium"></span>
5375                                                </div>
5376                                                <div class="flex items-center text-gray-600">
5377                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5378                                                        <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"/>
5379                                                    </svg>
5380                                                    <span class="text-xs sm:text-sm"></span>
5381                                                </div>
5382                                            </div>
5383                                        </div>
5384
5385                                        <!-- Action Button -->
5386                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
5387                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
5388                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5389                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
5390                                                </svg>
5391                                            </button>
5392                                        </div>
5393                                    </div>
5394                                </div>
5395                            </div>
5396                        </li>
5397                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
5398                            data-lat="10.11" 
5399                            data-lng="14.45"
5400                            data-name="KAELE"
5401                            data-address="."
5402                            data-city=""
5403                            data-phone="">
5404                            <div class="flex items-start space-x-3 sm:space-x-4">
5405                                <!-- Agency Icon -->
5406                                <div class="flex-shrink-0">
5407                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
5408                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5409                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5410                                        </svg>
5411                                    </div>
5412                                </div>
5413
5414                                <!-- Agency Details -->
5415                                <div class="flex-1 min-w-0">
5416                                    <div class="flex items-start justify-between">
5417                                        <div class="flex-1">
5418                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
5419                                                KAELE
5420                                            </h3>
5421                                            <div class="mt-2 space-y-1">
5422                                                <div class="flex items-start text-gray-600">
5423                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5424                                                        <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"/>
5425                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
5426                                                    </svg>
5427                                                    <span class="text-xs sm:text-sm break-words">.</span>
5428                                                </div>
5429                                                <div class="flex items-center text-gray-600">
5430                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5431                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5432                                                    </svg>
5433                                                    <span class="text-xs sm:text-sm font-medium"></span>
5434                                                </div>
5435                                                <div class="flex items-center text-gray-600">
5436                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5437                                                        <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"/>
5438                                                    </svg>
5439                                                    <span class="text-xs sm:text-sm"></span>
5440                                                </div>
5441                                            </div>
5442                                        </div>
5443
5444                                        <!-- Action Button -->
5445                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
5446                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
5447                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5448                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
5449                                                </svg>
5450                                            </button>
5451                                        </div>
5452                                    </div>
5453                                </div>
5454                            </div>
5455                        </li>
5456                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
5457                            data-lat="12.08" 
5458                            data-lng="15.03"
5459                            data-name="KOUSSERI"
5460                            data-address="."
5461                            data-city=""
5462                            data-phone="">
5463                            <div class="flex items-start space-x-3 sm:space-x-4">
5464                                <!-- Agency Icon -->
5465                                <div class="flex-shrink-0">
5466                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
5467                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5468                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5469                                        </svg>
5470                                    </div>
5471                                </div>
5472
5473                                <!-- Agency Details -->
5474                                <div class="flex-1 min-w-0">
5475                                    <div class="flex items-start justify-between">
5476                                        <div class="flex-1">
5477                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
5478                                                KOUSSERI
5479                                            </h3>
5480                                            <div class="mt-2 space-y-1">
5481                                                <div class="flex items-start text-gray-600">
5482                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5483                                                        <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"/>
5484                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
5485                                                    </svg>
5486                                                    <span class="text-xs sm:text-sm break-words">.</span>
5487                                                </div>
5488                                                <div class="flex items-center text-gray-600">
5489                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5490                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5491                                                    </svg>
5492                                                    <span class="text-xs sm:text-sm font-medium"></span>
5493                                                </div>
5494                                                <div class="flex items-center text-gray-600">
5495                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5496                                                        <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"/>
5497                                                    </svg>
5498                                                    <span class="text-xs sm:text-sm"></span>
5499                                                </div>
5500                                            </div>
5501                                        </div>
5502
5503                                        <!-- Action Button -->
5504                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
5505                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
5506                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5507                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
5508                                                </svg>
5509                                            </button>
5510                                        </div>
5511                                    </div>
5512                                </div>
5513                            </div>
5514                        </li>
5515                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
5516                            data-lat="10.60" 
5517                            data-lng="14.32"
5518                            data-name="MAROUA"
5519                            data-address="."
5520                            data-city=""
5521                            data-phone="">
5522                            <div class="flex items-start space-x-3 sm:space-x-4">
5523                                <!-- Agency Icon -->
5524                                <div class="flex-shrink-0">
5525                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
5526                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5527                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5528                                        </svg>
5529                                    </div>
5530                                </div>
5531
5532                                <!-- Agency Details -->
5533                                <div class="flex-1 min-w-0">
5534                                    <div class="flex items-start justify-between">
5535                                        <div class="flex-1">
5536                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
5537                                                MAROUA
5538                                            </h3>
5539                                            <div class="mt-2 space-y-1">
5540                                                <div class="flex items-start text-gray-600">
5541                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5542                                                        <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"/>
5543                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
5544                                                    </svg>
5545                                                    <span class="text-xs sm:text-sm break-words">.</span>
5546                                                </div>
5547                                                <div class="flex items-center text-gray-600">
5548                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5549                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5550                                                    </svg>
5551                                                    <span class="text-xs sm:text-sm font-medium"></span>
5552                                                </div>
5553                                                <div class="flex items-center text-gray-600">
5554                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5555                                                        <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"/>
5556                                                    </svg>
5557                                                    <span class="text-xs sm:text-sm"></span>
5558                                                </div>
5559                                            </div>
5560                                        </div>
5561
5562                                        <!-- Action Button -->
5563                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
5564                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
5565                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5566                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
5567                                                </svg>
5568                                            </button>
5569                                        </div>
5570                                    </div>
5571                                </div>
5572                            </div>
5573                        </li>
5574                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
5575                            data-lat="11.05" 
5576                            data-lng="14.14"
5577                            data-name="MORA"
5578                            data-address="."
5579                            data-city=""
5580                            data-phone="">
5581                            <div class="flex items-start space-x-3 sm:space-x-4">
5582                                <!-- Agency Icon -->
5583                                <div class="flex-shrink-0">
5584                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
5585                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5586                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5587                                        </svg>
5588                                    </div>
5589                                </div>
5590
5591                                <!-- Agency Details -->
5592                                <div class="flex-1 min-w-0">
5593                                    <div class="flex items-start justify-between">
5594                                        <div class="flex-1">
5595                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
5596                                                MORA
5597                                            </h3>
5598                                            <div class="mt-2 space-y-1">
5599                                                <div class="flex items-start text-gray-600">
5600                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5601                                                        <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"/>
5602                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
5603                                                    </svg>
5604                                                    <span class="text-xs sm:text-sm break-words">.</span>
5605                                                </div>
5606                                                <div class="flex items-center text-gray-600">
5607                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5608                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5609                                                    </svg>
5610                                                    <span class="text-xs sm:text-sm font-medium"></span>
5611                                                </div>
5612                                                <div class="flex items-center text-gray-600">
5613                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5614                                                        <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"/>
5615                                                    </svg>
5616                                                    <span class="text-xs sm:text-sm"></span>
5617                                                </div>
5618                                            </div>
5619                                        </div>
5620
5621                                        <!-- Action Button -->
5622                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
5623                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
5624                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5625                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
5626                                                </svg>
5627                                            </button>
5628                                        </div>
5629                                    </div>
5630                                </div>
5631                            </div>
5632                        </li>
5633                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
5634                            data-lat="10.34" 
5635                            data-lng="15.23"
5636                            data-name="YAGOUA"
5637                            data-address="."
5638                            data-city=""
5639                            data-phone="">
5640                            <div class="flex items-start space-x-3 sm:space-x-4">
5641                                <!-- Agency Icon -->
5642                                <div class="flex-shrink-0">
5643                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
5644                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5645                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5646                                        </svg>
5647                                    </div>
5648                                </div>
5649
5650                                <!-- Agency Details -->
5651                                <div class="flex-1 min-w-0">
5652                                    <div class="flex items-start justify-between">
5653                                        <div class="flex-1">
5654                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
5655                                                YAGOUA
5656                                            </h3>
5657                                            <div class="mt-2 space-y-1">
5658                                                <div class="flex items-start text-gray-600">
5659                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5660                                                        <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"/>
5661                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
5662                                                    </svg>
5663                                                    <span class="text-xs sm:text-sm break-words">.</span>
5664                                                </div>
5665                                                <div class="flex items-center text-gray-600">
5666                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5667                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5668                                                    </svg>
5669                                                    <span class="text-xs sm:text-sm font-medium"></span>
5670                                                </div>
5671                                                <div class="flex items-center text-gray-600">
5672                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5673                                                        <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"/>
5674                                                    </svg>
5675                                                    <span class="text-xs sm:text-sm"></span>
5676                                                </div>
5677                                            </div>
5678                                        </div>
5679
5680                                        <!-- Action Button -->
5681                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
5682                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
5683                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5684                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
5685                                                </svg>
5686                                            </button>
5687                                        </div>
5688                                    </div>
5689                                </div>
5690                            </div>
5691                        </li>
5692                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
5693                            data-lat="9.76" 
5694                            data-lng="13.96"
5695                            data-name="FIGUIL"
5696                            data-address="."
5697                            data-city=""
5698                            data-phone="">
5699                            <div class="flex items-start space-x-3 sm:space-x-4">
5700                                <!-- Agency Icon -->
5701                                <div class="flex-shrink-0">
5702                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
5703                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5704                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5705                                        </svg>
5706                                    </div>
5707                                </div>
5708
5709                                <!-- Agency Details -->
5710                                <div class="flex-1 min-w-0">
5711                                    <div class="flex items-start justify-between">
5712                                        <div class="flex-1">
5713                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
5714                                                FIGUIL
5715                                            </h3>
5716                                            <div class="mt-2 space-y-1">
5717                                                <div class="flex items-start text-gray-600">
5718                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5719                                                        <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"/>
5720                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
5721                                                    </svg>
5722                                                    <span class="text-xs sm:text-sm break-words">.</span>
5723                                                </div>
5724                                                <div class="flex items-center text-gray-600">
5725                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5726                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5727                                                    </svg>
5728                                                    <span class="text-xs sm:text-sm font-medium"></span>
5729                                                </div>
5730                                                <div class="flex items-center text-gray-600">
5731                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5732                                                        <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"/>
5733                                                    </svg>
5734                                                    <span class="text-xs sm:text-sm"></span>
5735                                                </div>
5736                                            </div>
5737                                        </div>
5738
5739                                        <!-- Action Button -->
5740                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
5741                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
5742                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5743                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
5744                                                </svg>
5745                                            </button>
5746                                        </div>
5747                                    </div>
5748                                </div>
5749                            </div>
5750                        </li>
5751                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
5752                            data-lat="9.31" 
5753                            data-lng="13.39"
5754                            data-name="GAROUA BOULEVARD"
5755                            data-address="."
5756                            data-city=""
5757                            data-phone="">
5758                            <div class="flex items-start space-x-3 sm:space-x-4">
5759                                <!-- Agency Icon -->
5760                                <div class="flex-shrink-0">
5761                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
5762                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5763                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5764                                        </svg>
5765                                    </div>
5766                                </div>
5767
5768                                <!-- Agency Details -->
5769                                <div class="flex-1 min-w-0">
5770                                    <div class="flex items-start justify-between">
5771                                        <div class="flex-1">
5772                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
5773                                                GAROUA BOULEVARD
5774                                            </h3>
5775                                            <div class="mt-2 space-y-1">
5776                                                <div class="flex items-start text-gray-600">
5777                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5778                                                        <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"/>
5779                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
5780                                                    </svg>
5781                                                    <span class="text-xs sm:text-sm break-words">.</span>
5782                                                </div>
5783                                                <div class="flex items-center text-gray-600">
5784                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5785                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5786                                                    </svg>
5787                                                    <span class="text-xs sm:text-sm font-medium"></span>
5788                                                </div>
5789                                                <div class="flex items-center text-gray-600">
5790                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5791                                                        <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"/>
5792                                                    </svg>
5793                                                    <span class="text-xs sm:text-sm"></span>
5794                                                </div>
5795                                            </div>
5796                                        </div>
5797
5798                                        <!-- Action Button -->
5799                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
5800                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
5801                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5802                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
5803                                                </svg>
5804                                            </button>
5805                                        </div>
5806                                    </div>
5807                                </div>
5808                            </div>
5809                        </li>
5810                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
5811                            data-lat="9.94" 
5812                            data-lng="13.95"
5813                            data-name="GUIDER"
5814                            data-address="."
5815                            data-city=""
5816                            data-phone="">
5817                            <div class="flex items-start space-x-3 sm:space-x-4">
5818                                <!-- Agency Icon -->
5819                                <div class="flex-shrink-0">
5820                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
5821                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5822                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5823                                        </svg>
5824                                    </div>
5825                                </div>
5826
5827                                <!-- Agency Details -->
5828                                <div class="flex-1 min-w-0">
5829                                    <div class="flex items-start justify-between">
5830                                        <div class="flex-1">
5831                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
5832                                                GUIDER
5833                                            </h3>
5834                                            <div class="mt-2 space-y-1">
5835                                                <div class="flex items-start text-gray-600">
5836                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5837                                                        <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"/>
5838                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
5839                                                    </svg>
5840                                                    <span class="text-xs sm:text-sm break-words">.</span>
5841                                                </div>
5842                                                <div class="flex items-center text-gray-600">
5843                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5844                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5845                                                    </svg>
5846                                                    <span class="text-xs sm:text-sm font-medium"></span>
5847                                                </div>
5848                                                <div class="flex items-center text-gray-600">
5849                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5850                                                        <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"/>
5851                                                    </svg>
5852                                                    <span class="text-xs sm:text-sm"></span>
5853                                                </div>
5854                                            </div>
5855                                        </div>
5856
5857                                        <!-- Action Button -->
5858                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
5859                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
5860                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5861                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
5862                                                </svg>
5863                                            </button>
5864                                        </div>
5865                                    </div>
5866                                </div>
5867                            </div>
5868                        </li>
5869                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
5870                            data-lat="9.97" 
5871                            data-lng="13.61"
5872                            data-name="MAYO OULO"
5873                            data-address="."
5874                            data-city=""
5875                            data-phone="">
5876                            <div class="flex items-start space-x-3 sm:space-x-4">
5877                                <!-- Agency Icon -->
5878                                <div class="flex-shrink-0">
5879                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
5880                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5881                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5882                                        </svg>
5883                                    </div>
5884                                </div>
5885
5886                                <!-- Agency Details -->
5887                                <div class="flex-1 min-w-0">
5888                                    <div class="flex items-start justify-between">
5889                                        <div class="flex-1">
5890                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
5891                                                MAYO OULO
5892                                            </h3>
5893                                            <div class="mt-2 space-y-1">
5894                                                <div class="flex items-start text-gray-600">
5895                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5896                                                        <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"/>
5897                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
5898                                                    </svg>
5899                                                    <span class="text-xs sm:text-sm break-words">.</span>
5900                                                </div>
5901                                                <div class="flex items-center text-gray-600">
5902                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5903                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5904                                                    </svg>
5905                                                    <span class="text-xs sm:text-sm font-medium"></span>
5906                                                </div>
5907                                                <div class="flex items-center text-gray-600">
5908                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5909                                                        <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"/>
5910                                                    </svg>
5911                                                    <span class="text-xs sm:text-sm"></span>
5912                                                </div>
5913                                            </div>
5914                                        </div>
5915
5916                                        <!-- Action Button -->
5917                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
5918                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
5919                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5920                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
5921                                                </svg>
5922                                            </button>
5923                                        </div>
5924                                    </div>
5925                                </div>
5926                            </div>
5927                        </li>
5928                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
5929                            data-lat="8.40" 
5930                            data-lng="14.17"
5931                            data-name="TCHOLLIRE"
5932                            data-address="."
5933                            data-city=""
5934                            data-phone="">
5935                            <div class="flex items-start space-x-3 sm:space-x-4">
5936                                <!-- Agency Icon -->
5937                                <div class="flex-shrink-0">
5938                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
5939                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5940                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5941                                        </svg>
5942                                    </div>
5943                                </div>
5944
5945                                <!-- Agency Details -->
5946                                <div class="flex-1 min-w-0">
5947                                    <div class="flex items-start justify-between">
5948                                        <div class="flex-1">
5949                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
5950                                                TCHOLLIRE
5951                                            </h3>
5952                                            <div class="mt-2 space-y-1">
5953                                                <div class="flex items-start text-gray-600">
5954                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5955                                                        <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"/>
5956                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
5957                                                    </svg>
5958                                                    <span class="text-xs sm:text-sm break-words">.</span>
5959                                                </div>
5960                                                <div class="flex items-center text-gray-600">
5961                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5962                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
5963                                                    </svg>
5964                                                    <span class="text-xs sm:text-sm font-medium"></span>
5965                                                </div>
5966                                                <div class="flex items-center text-gray-600">
5967                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5968                                                        <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"/>
5969                                                    </svg>
5970                                                    <span class="text-xs sm:text-sm"></span>
5971                                                </div>
5972                                            </div>
5973                                        </div>
5974
5975                                        <!-- Action Button -->
5976                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
5977                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
5978                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5979                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
5980                                                </svg>
5981                                            </button>
5982                                        </div>
5983                                    </div>
5984                                </div>
5985                            </div>
5986                        </li>
5987                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
5988                            data-lat="5.96" 
5989                            data-lng="10.15"
5990                            data-name="BAMENDA"
5991                            data-address="."
5992                            data-city=""
5993                            data-phone="">
5994                            <div class="flex items-start space-x-3 sm:space-x-4">
5995                                <!-- Agency Icon -->
5996                                <div class="flex-shrink-0">
5997                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
5998                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
5999                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6000                                        </svg>
6001                                    </div>
6002                                </div>
6003
6004                                <!-- Agency Details -->
6005                                <div class="flex-1 min-w-0">
6006                                    <div class="flex items-start justify-between">
6007                                        <div class="flex-1">
6008                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
6009                                                BAMENDA
6010                                            </h3>
6011                                            <div class="mt-2 space-y-1">
6012                                                <div class="flex items-start text-gray-600">
6013                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6014                                                        <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"/>
6015                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
6016                                                    </svg>
6017                                                    <span class="text-xs sm:text-sm break-words">.</span>
6018                                                </div>
6019                                                <div class="flex items-center text-gray-600">
6020                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6021                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6022                                                    </svg>
6023                                                    <span class="text-xs sm:text-sm font-medium"></span>
6024                                                </div>
6025                                                <div class="flex items-center text-gray-600">
6026                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6027                                                        <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"/>
6028                                                    </svg>
6029                                                    <span class="text-xs sm:text-sm"></span>
6030                                                </div>
6031                                            </div>
6032                                        </div>
6033
6034                                        <!-- Action Button -->
6035                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
6036                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
6037                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6038                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
6039                                                </svg>
6040                                            </button>
6041                                        </div>
6042                                    </div>
6043                                </div>
6044                            </div>
6045                        </li>
6046                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
6047                            data-lat="6.00" 
6048                            data-lng="10.26"
6049                            data-name="BAMBILI"
6050                            data-address="."
6051                            data-city=""
6052                            data-phone="">
6053                            <div class="flex items-start space-x-3 sm:space-x-4">
6054                                <!-- Agency Icon -->
6055                                <div class="flex-shrink-0">
6056                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
6057                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6058                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6059                                        </svg>
6060                                    </div>
6061                                </div>
6062
6063                                <!-- Agency Details -->
6064                                <div class="flex-1 min-w-0">
6065                                    <div class="flex items-start justify-between">
6066                                        <div class="flex-1">
6067                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
6068                                                BAMBILI
6069                                            </h3>
6070                                            <div class="mt-2 space-y-1">
6071                                                <div class="flex items-start text-gray-600">
6072                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6073                                                        <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"/>
6074                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
6075                                                    </svg>
6076                                                    <span class="text-xs sm:text-sm break-words">.</span>
6077                                                </div>
6078                                                <div class="flex items-center text-gray-600">
6079                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6080                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6081                                                    </svg>
6082                                                    <span class="text-xs sm:text-sm font-medium"></span>
6083                                                </div>
6084                                                <div class="flex items-center text-gray-600">
6085                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6086                                                        <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"/>
6087                                                    </svg>
6088                                                    <span class="text-xs sm:text-sm"></span>
6089                                                </div>
6090                                            </div>
6091                                        </div>
6092
6093                                        <!-- Action Button -->
6094                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
6095                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
6096                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6097                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
6098                                                </svg>
6099                                            </button>
6100                                        </div>
6101                                    </div>
6102                                </div>
6103                            </div>
6104                        </li>
6105                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
6106                            data-lat="6.58" 
6107                            data-lng="10.71"
6108                            data-name="NKAMBE"
6109                            data-address="."
6110                            data-city=""
6111                            data-phone="">
6112                            <div class="flex items-start space-x-3 sm:space-x-4">
6113                                <!-- Agency Icon -->
6114                                <div class="flex-shrink-0">
6115                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
6116                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6117                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6118                                        </svg>
6119                                    </div>
6120                                </div>
6121
6122                                <!-- Agency Details -->
6123                                <div class="flex-1 min-w-0">
6124                                    <div class="flex items-start justify-between">
6125                                        <div class="flex-1">
6126                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
6127                                                NKAMBE
6128                                            </h3>
6129                                            <div class="mt-2 space-y-1">
6130                                                <div class="flex items-start text-gray-600">
6131                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6132                                                        <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"/>
6133                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
6134                                                    </svg>
6135                                                    <span class="text-xs sm:text-sm break-words">.</span>
6136                                                </div>
6137                                                <div class="flex items-center text-gray-600">
6138                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6139                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6140                                                    </svg>
6141                                                    <span class="text-xs sm:text-sm font-medium"></span>
6142                                                </div>
6143                                                <div class="flex items-center text-gray-600">
6144                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6145                                                        <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"/>
6146                                                    </svg>
6147                                                    <span class="text-xs sm:text-sm"></span>
6148                                                </div>
6149                                            </div>
6150                                        </div>
6151
6152                                        <!-- Action Button -->
6153                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
6154                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
6155                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6156                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
6157                                                </svg>
6158                                            </button>
6159                                        </div>
6160                                    </div>
6161                                </div>
6162                            </div>
6163                        </li>
6164                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
6165                            data-lat="5.95" 
6166                            data-lng="10.16"
6167                            data-name="BAMENDA UP STATION"
6168                            data-address="."
6169                            data-city=""
6170                            data-phone="">
6171                            <div class="flex items-start space-x-3 sm:space-x-4">
6172                                <!-- Agency Icon -->
6173                                <div class="flex-shrink-0">
6174                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
6175                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6176                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6177                                        </svg>
6178                                    </div>
6179                                </div>
6180
6181                                <!-- Agency Details -->
6182                                <div class="flex-1 min-w-0">
6183                                    <div class="flex items-start justify-between">
6184                                        <div class="flex-1">
6185                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
6186                                                BAMENDA UP STATION
6187                                            </h3>
6188                                            <div class="mt-2 space-y-1">
6189                                                <div class="flex items-start text-gray-600">
6190                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6191                                                        <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"/>
6192                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
6193                                                    </svg>
6194                                                    <span class="text-xs sm:text-sm break-words">.</span>
6195                                                </div>
6196                                                <div class="flex items-center text-gray-600">
6197                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6198                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6199                                                    </svg>
6200                                                    <span class="text-xs sm:text-sm font-medium"></span>
6201                                                </div>
6202                                                <div class="flex items-center text-gray-600">
6203                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6204                                                        <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"/>
6205                                                    </svg>
6206                                                    <span class="text-xs sm:text-sm"></span>
6207                                                </div>
6208                                            </div>
6209                                        </div>
6210
6211                                        <!-- Action Button -->
6212                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
6213                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
6214                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6215                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
6216                                                </svg>
6217                                            </button>
6218                                        </div>
6219                                    </div>
6220                                </div>
6221                            </div>
6222                        </li>
6223                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
6224                            data-lat="5.15" 
6225                            data-lng="10.17"
6226                            data-name="BAFANG"
6227                            data-address="."
6228                            data-city=""
6229                            data-phone="">
6230                            <div class="flex items-start space-x-3 sm:space-x-4">
6231                                <!-- Agency Icon -->
6232                                <div class="flex-shrink-0">
6233                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
6234                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6235                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6236                                        </svg>
6237                                    </div>
6238                                </div>
6239
6240                                <!-- Agency Details -->
6241                                <div class="flex-1 min-w-0">
6242                                    <div class="flex items-start justify-between">
6243                                        <div class="flex-1">
6244                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
6245                                                BAFANG
6246                                            </h3>
6247                                            <div class="mt-2 space-y-1">
6248                                                <div class="flex items-start text-gray-600">
6249                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6250                                                        <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"/>
6251                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
6252                                                    </svg>
6253                                                    <span class="text-xs sm:text-sm break-words">.</span>
6254                                                </div>
6255                                                <div class="flex items-center text-gray-600">
6256                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6257                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6258                                                    </svg>
6259                                                    <span class="text-xs sm:text-sm font-medium"></span>
6260                                                </div>
6261                                                <div class="flex items-center text-gray-600">
6262                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6263                                                        <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"/>
6264                                                    </svg>
6265                                                    <span class="text-xs sm:text-sm"></span>
6266                                                </div>
6267                                            </div>
6268                                        </div>
6269
6270                                        <!-- Action Button -->
6271                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
6272                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
6273                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6274                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
6275                                                </svg>
6276                                            </button>
6277                                        </div>
6278                                    </div>
6279                                </div>
6280                            </div>
6281                        </li>
6282                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
6283                            data-lat="5.47" 
6284                            data-lng="10.42"
6285                            data-name="BAFOUSSAM"
6286                            data-address="."
6287                            data-city=""
6288                            data-phone="">
6289                            <div class="flex items-start space-x-3 sm:space-x-4">
6290                                <!-- Agency Icon -->
6291                                <div class="flex-shrink-0">
6292                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
6293                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6294                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6295                                        </svg>
6296                                    </div>
6297                                </div>
6298
6299                                <!-- Agency Details -->
6300                                <div class="flex-1 min-w-0">
6301                                    <div class="flex items-start justify-between">
6302                                        <div class="flex-1">
6303                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
6304                                                BAFOUSSAM
6305                                            </h3>
6306                                            <div class="mt-2 space-y-1">
6307                                                <div class="flex items-start text-gray-600">
6308                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6309                                                        <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"/>
6310                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
6311                                                    </svg>
6312                                                    <span class="text-xs sm:text-sm break-words">.</span>
6313                                                </div>
6314                                                <div class="flex items-center text-gray-600">
6315                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6316                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6317                                                    </svg>
6318                                                    <span class="text-xs sm:text-sm font-medium"></span>
6319                                                </div>
6320                                                <div class="flex items-center text-gray-600">
6321                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6322                                                        <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"/>
6323                                                    </svg>
6324                                                    <span class="text-xs sm:text-sm"></span>
6325                                                </div>
6326                                            </div>
6327                                        </div>
6328
6329                                        <!-- Action Button -->
6330                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
6331                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
6332                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6333                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
6334                                                </svg>
6335                                            </button>
6336                                        </div>
6337                                    </div>
6338                                </div>
6339                            </div>
6340                        </li>
6341                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
6342                            data-lat="5.14" 
6343                            data-lng="10.53"
6344                            data-name="BANGANGTE"
6345                            data-address="."
6346                            data-city=""
6347                            data-phone="">
6348                            <div class="flex items-start space-x-3 sm:space-x-4">
6349                                <!-- Agency Icon -->
6350                                <div class="flex-shrink-0">
6351                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
6352                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6353                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6354                                        </svg>
6355                                    </div>
6356                                </div>
6357
6358                                <!-- Agency Details -->
6359                                <div class="flex-1 min-w-0">
6360                                    <div class="flex items-start justify-between">
6361                                        <div class="flex-1">
6362                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
6363                                                BANGANGTE
6364                                            </h3>
6365                                            <div class="mt-2 space-y-1">
6366                                                <div class="flex items-start text-gray-600">
6367                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6368                                                        <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"/>
6369                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
6370                                                    </svg>
6371                                                    <span class="text-xs sm:text-sm break-words">.</span>
6372                                                </div>
6373                                                <div class="flex items-center text-gray-600">
6374                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6375                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6376                                                    </svg>
6377                                                    <span class="text-xs sm:text-sm font-medium"></span>
6378                                                </div>
6379                                                <div class="flex items-center text-gray-600">
6380                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6381                                                        <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"/>
6382                                                    </svg>
6383                                                    <span class="text-xs sm:text-sm"></span>
6384                                                </div>
6385                                            </div>
6386                                        </div>
6387
6388                                        <!-- Action Button -->
6389                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
6390                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
6391                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6392                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
6393                                                </svg>
6394                                            </button>
6395                                        </div>
6396                                    </div>
6397                                </div>
6398                            </div>
6399                        </li>
6400                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
6401                            data-lat="5.45" 
6402                            data-lng="10.06"
6403                            data-name="DSCHANG"
6404                            data-address="."
6405                            data-city=""
6406                            data-phone="">
6407                            <div class="flex items-start space-x-3 sm:space-x-4">
6408                                <!-- Agency Icon -->
6409                                <div class="flex-shrink-0">
6410                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
6411                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6412                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6413                                        </svg>
6414                                    </div>
6415                                </div>
6416
6417                                <!-- Agency Details -->
6418                                <div class="flex-1 min-w-0">
6419                                    <div class="flex items-start justify-between">
6420                                        <div class="flex-1">
6421                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
6422                                                DSCHANG
6423                                            </h3>
6424                                            <div class="mt-2 space-y-1">
6425                                                <div class="flex items-start text-gray-600">
6426                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6427                                                        <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"/>
6428                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
6429                                                    </svg>
6430                                                    <span class="text-xs sm:text-sm break-words">.</span>
6431                                                </div>
6432                                                <div class="flex items-center text-gray-600">
6433                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6434                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6435                                                    </svg>
6436                                                    <span class="text-xs sm:text-sm font-medium"></span>
6437                                                </div>
6438                                                <div class="flex items-center text-gray-600">
6439                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6440                                                        <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"/>
6441                                                    </svg>
6442                                                    <span class="text-xs sm:text-sm"></span>
6443                                                </div>
6444                                            </div>
6445                                        </div>
6446
6447                                        <!-- Action Button -->
6448                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
6449                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
6450                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6451                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
6452                                                </svg>
6453                                            </button>
6454                                        </div>
6455                                    </div>
6456                                </div>
6457                            </div>
6458                        </li>
6459                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
6460                            data-lat="5.73" 
6461                            data-lng="10.90"
6462                            data-name="FOUMBAN"
6463                            data-address="."
6464                            data-city=""
6465                            data-phone="">
6466                            <div class="flex items-start space-x-3 sm:space-x-4">
6467                                <!-- Agency Icon -->
6468                                <div class="flex-shrink-0">
6469                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
6470                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6471                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6472                                        </svg>
6473                                    </div>
6474                                </div>
6475
6476                                <!-- Agency Details -->
6477                                <div class="flex-1 min-w-0">
6478                                    <div class="flex items-start justify-between">
6479                                        <div class="flex-1">
6480                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
6481                                                FOUMBAN
6482                                            </h3>
6483                                            <div class="mt-2 space-y-1">
6484                                                <div class="flex items-start text-gray-600">
6485                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6486                                                        <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"/>
6487                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
6488                                                    </svg>
6489                                                    <span class="text-xs sm:text-sm break-words">.</span>
6490                                                </div>
6491                                                <div class="flex items-center text-gray-600">
6492                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6493                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6494                                                    </svg>
6495                                                    <span class="text-xs sm:text-sm font-medium"></span>
6496                                                </div>
6497                                                <div class="flex items-center text-gray-600">
6498                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6499                                                        <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"/>
6500                                                    </svg>
6501                                                    <span class="text-xs sm:text-sm"></span>
6502                                                </div>
6503                                            </div>
6504                                        </div>
6505
6506                                        <!-- Action Button -->
6507                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
6508                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
6509                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6510                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
6511                                                </svg>
6512                                            </button>
6513                                        </div>
6514                                    </div>
6515                                </div>
6516                            </div>
6517                        </li>
6518                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
6519                            data-lat="5.63" 
6520                            data-lng="10.25"
6521                            data-name="MBOUDA"
6522                            data-address="."
6523                            data-city=""
6524                            data-phone="">
6525                            <div class="flex items-start space-x-3 sm:space-x-4">
6526                                <!-- Agency Icon -->
6527                                <div class="flex-shrink-0">
6528                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
6529                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6530                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6531                                        </svg>
6532                                    </div>
6533                                </div>
6534
6535                                <!-- Agency Details -->
6536                                <div class="flex-1 min-w-0">
6537                                    <div class="flex items-start justify-between">
6538                                        <div class="flex-1">
6539                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
6540                                                MBOUDA
6541                                            </h3>
6542                                            <div class="mt-2 space-y-1">
6543                                                <div class="flex items-start text-gray-600">
6544                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6545                                                        <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"/>
6546                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
6547                                                    </svg>
6548                                                    <span class="text-xs sm:text-sm break-words">.</span>
6549                                                </div>
6550                                                <div class="flex items-center text-gray-600">
6551                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6552                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6553                                                    </svg>
6554                                                    <span class="text-xs sm:text-sm font-medium"></span>
6555                                                </div>
6556                                                <div class="flex items-center text-gray-600">
6557                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6558                                                        <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"/>
6559                                                    </svg>
6560                                                    <span class="text-xs sm:text-sm"></span>
6561                                                </div>
6562                                            </div>
6563                                        </div>
6564
6565                                        <!-- Action Button -->
6566                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
6567                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
6568                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6569                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
6570                                                </svg>
6571                                            </button>
6572                                        </div>
6573                                    </div>
6574                                </div>
6575                            </div>
6576                        </li>
6577                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
6578                            data-lat="5.48" 
6579                            data-lng="10.43"
6580                            data-name="BAFOUSSAM"
6581                            data-address="."
6582                            data-city=""
6583                            data-phone="">
6584                            <div class="flex items-start space-x-3 sm:space-x-4">
6585                                <!-- Agency Icon -->
6586                                <div class="flex-shrink-0">
6587                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
6588                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6589                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6590                                        </svg>
6591                                    </div>
6592                                </div>
6593
6594                                <!-- Agency Details -->
6595                                <div class="flex-1 min-w-0">
6596                                    <div class="flex items-start justify-between">
6597                                        <div class="flex-1">
6598                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
6599                                                BAFOUSSAM
6600                                            </h3>
6601                                            <div class="mt-2 space-y-1">
6602                                                <div class="flex items-start text-gray-600">
6603                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6604                                                        <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"/>
6605                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
6606                                                    </svg>
6607                                                    <span class="text-xs sm:text-sm break-words">.</span>
6608                                                </div>
6609                                                <div class="flex items-center text-gray-600">
6610                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6611                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6612                                                    </svg>
6613                                                    <span class="text-xs sm:text-sm font-medium"></span>
6614                                                </div>
6615                                                <div class="flex items-center text-gray-600">
6616                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6617                                                        <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"/>
6618                                                    </svg>
6619                                                    <span class="text-xs sm:text-sm"></span>
6620                                                </div>
6621                                            </div>
6622                                        </div>
6623
6624                                        <!-- Action Button -->
6625                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
6626                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
6627                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6628                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
6629                                                </svg>
6630                                            </button>
6631                                        </div>
6632                                    </div>
6633                                </div>
6634                            </div>
6635                        </li>
6636                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
6637                            data-lat="5.37" 
6638                            data-lng="10.41"
6639                            data-name="BANDJOUN"
6640                            data-address="."
6641                            data-city=""
6642                            data-phone="">
6643                            <div class="flex items-start space-x-3 sm:space-x-4">
6644                                <!-- Agency Icon -->
6645                                <div class="flex-shrink-0">
6646                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
6647                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6648                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6649                                        </svg>
6650                                    </div>
6651                                </div>
6652
6653                                <!-- Agency Details -->
6654                                <div class="flex-1 min-w-0">
6655                                    <div class="flex items-start justify-between">
6656                                        <div class="flex-1">
6657                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
6658                                                BANDJOUN
6659                                            </h3>
6660                                            <div class="mt-2 space-y-1">
6661                                                <div class="flex items-start text-gray-600">
6662                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6663                                                        <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"/>
6664                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
6665                                                    </svg>
6666                                                    <span class="text-xs sm:text-sm break-words">.</span>
6667                                                </div>
6668                                                <div class="flex items-center text-gray-600">
6669                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6670                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6671                                                    </svg>
6672                                                    <span class="text-xs sm:text-sm font-medium"></span>
6673                                                </div>
6674                                                <div class="flex items-center text-gray-600">
6675                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6676                                                        <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"/>
6677                                                    </svg>
6678                                                    <span class="text-xs sm:text-sm"></span>
6679                                                </div>
6680                                            </div>
6681                                        </div>
6682
6683                                        <!-- Action Button -->
6684                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
6685                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
6686                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6687                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
6688                                                </svg>
6689                                            </button>
6690                                        </div>
6691                                    </div>
6692                                </div>
6693                            </div>
6694                        </li>
6695                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
6696                            data-lat="5.51" 
6697                            data-lng="10.64"
6698                            data-name="FOUMBOT"
6699                            data-address="."
6700                            data-city=""
6701                            data-phone="">
6702                            <div class="flex items-start space-x-3 sm:space-x-4">
6703                                <!-- Agency Icon -->
6704                                <div class="flex-shrink-0">
6705                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
6706                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6707                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6708                                        </svg>
6709                                    </div>
6710                                </div>
6711
6712                                <!-- Agency Details -->
6713                                <div class="flex-1 min-w-0">
6714                                    <div class="flex items-start justify-between">
6715                                        <div class="flex-1">
6716                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
6717                                                FOUMBOT
6718                                            </h3>
6719                                            <div class="mt-2 space-y-1">
6720                                                <div class="flex items-start text-gray-600">
6721                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6722                                                        <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"/>
6723                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
6724                                                    </svg>
6725                                                    <span class="text-xs sm:text-sm break-words">.</span>
6726                                                </div>
6727                                                <div class="flex items-center text-gray-600">
6728                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6729                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6730                                                    </svg>
6731                                                    <span class="text-xs sm:text-sm font-medium"></span>
6732                                                </div>
6733                                                <div class="flex items-center text-gray-600">
6734                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6735                                                        <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"/>
6736                                                    </svg>
6737                                                    <span class="text-xs sm:text-sm"></span>
6738                                                </div>
6739                                            </div>
6740                                        </div>
6741
6742                                        <!-- Action Button -->
6743                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
6744                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
6745                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6746                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
6747                                                </svg>
6748                                            </button>
6749                                        </div>
6750                                    </div>
6751                                </div>
6752                            </div>
6753                        </li>
6754                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
6755                            data-lat="2.91" 
6756                            data-lng="11.17"
6757                            data-name="EBOLOWA"
6758                            data-address="."
6759                            data-city=""
6760                            data-phone="">
6761                            <div class="flex items-start space-x-3 sm:space-x-4">
6762                                <!-- Agency Icon -->
6763                                <div class="flex-shrink-0">
6764                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
6765                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6766                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6767                                        </svg>
6768                                    </div>
6769                                </div>
6770
6771                                <!-- Agency Details -->
6772                                <div class="flex-1 min-w-0">
6773                                    <div class="flex items-start justify-between">
6774                                        <div class="flex-1">
6775                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
6776                                                EBOLOWA
6777                                            </h3>
6778                                            <div class="mt-2 space-y-1">
6779                                                <div class="flex items-start text-gray-600">
6780                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6781                                                        <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"/>
6782                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
6783                                                    </svg>
6784                                                    <span class="text-xs sm:text-sm break-words">.</span>
6785                                                </div>
6786                                                <div class="flex items-center text-gray-600">
6787                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6788                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6789                                                    </svg>
6790                                                    <span class="text-xs sm:text-sm font-medium"></span>
6791                                                </div>
6792                                                <div class="flex items-center text-gray-600">
6793                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6794                                                        <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"/>
6795                                                    </svg>
6796                                                    <span class="text-xs sm:text-sm"></span>
6797                                                </div>
6798                                            </div>
6799                                        </div>
6800
6801                                        <!-- Action Button -->
6802                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
6803                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
6804                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6805                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
6806                                                </svg>
6807                                            </button>
6808                                        </div>
6809                                    </div>
6810                                </div>
6811                            </div>
6812                        </li>
6813                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
6814                            data-lat="2.94" 
6815                            data-lng="9.91"
6816                            data-name="KRIBI"
6817                            data-address="."
6818                            data-city=""
6819                            data-phone="">
6820                            <div class="flex items-start space-x-3 sm:space-x-4">
6821                                <!-- Agency Icon -->
6822                                <div class="flex-shrink-0">
6823                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
6824                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6825                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6826                                        </svg>
6827                                    </div>
6828                                </div>
6829
6830                                <!-- Agency Details -->
6831                                <div class="flex-1 min-w-0">
6832                                    <div class="flex items-start justify-between">
6833                                        <div class="flex-1">
6834                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
6835                                                KRIBI
6836                                            </h3>
6837                                            <div class="mt-2 space-y-1">
6838                                                <div class="flex items-start text-gray-600">
6839                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6840                                                        <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"/>
6841                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
6842                                                    </svg>
6843                                                    <span class="text-xs sm:text-sm break-words">.</span>
6844                                                </div>
6845                                                <div class="flex items-center text-gray-600">
6846                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6847                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6848                                                    </svg>
6849                                                    <span class="text-xs sm:text-sm font-medium"></span>
6850                                                </div>
6851                                                <div class="flex items-center text-gray-600">
6852                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6853                                                        <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"/>
6854                                                    </svg>
6855                                                    <span class="text-xs sm:text-sm"></span>
6856                                                </div>
6857                                            </div>
6858                                        </div>
6859
6860                                        <!-- Action Button -->
6861                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
6862                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
6863                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6864                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
6865                                                </svg>
6866                                            </button>
6867                                        </div>
6868                                    </div>
6869                                </div>
6870                            </div>
6871                        </li>
6872                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
6873                            data-lat="2.94" 
6874                            data-lng="9.91"
6875                            data-name="KRIBI PORT"
6876                            data-address="."
6877                            data-city=""
6878                            data-phone="">
6879                            <div class="flex items-start space-x-3 sm:space-x-4">
6880                                <!-- Agency Icon -->
6881                                <div class="flex-shrink-0">
6882                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
6883                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6884                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6885                                        </svg>
6886                                    </div>
6887                                </div>
6888
6889                                <!-- Agency Details -->
6890                                <div class="flex-1 min-w-0">
6891                                    <div class="flex items-start justify-between">
6892                                        <div class="flex-1">
6893                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
6894                                                KRIBI PORT
6895                                            </h3>
6896                                            <div class="mt-2 space-y-1">
6897                                                <div class="flex items-start text-gray-600">
6898                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6899                                                        <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"/>
6900                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
6901                                                    </svg>
6902                                                    <span class="text-xs sm:text-sm break-words">.</span>
6903                                                </div>
6904                                                <div class="flex items-center text-gray-600">
6905                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6906                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6907                                                    </svg>
6908                                                    <span class="text-xs sm:text-sm font-medium"></span>
6909                                                </div>
6910                                                <div class="flex items-center text-gray-600">
6911                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6912                                                        <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"/>
6913                                                    </svg>
6914                                                    <span class="text-xs sm:text-sm"></span>
6915                                                </div>
6916                                            </div>
6917                                        </div>
6918
6919                                        <!-- Action Button -->
6920                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
6921                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
6922                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6923                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
6924                                                </svg>
6925                                            </button>
6926                                        </div>
6927                                    </div>
6928                                </div>
6929                            </div>
6930                        </li>
6931                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
6932                            data-lat="2.94" 
6933                            data-lng="9.91"
6934                            data-name="NIETE"
6935                            data-address="."
6936                            data-city=""
6937                            data-phone="">
6938                            <div class="flex items-start space-x-3 sm:space-x-4">
6939                                <!-- Agency Icon -->
6940                                <div class="flex-shrink-0">
6941                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
6942                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6943                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6944                                        </svg>
6945                                    </div>
6946                                </div>
6947
6948                                <!-- Agency Details -->
6949                                <div class="flex-1 min-w-0">
6950                                    <div class="flex items-start justify-between">
6951                                        <div class="flex-1">
6952                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
6953                                                NIETE
6954                                            </h3>
6955                                            <div class="mt-2 space-y-1">
6956                                                <div class="flex items-start text-gray-600">
6957                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6958                                                        <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"/>
6959                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
6960                                                    </svg>
6961                                                    <span class="text-xs sm:text-sm break-words">.</span>
6962                                                </div>
6963                                                <div class="flex items-center text-gray-600">
6964                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6965                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
6966                                                    </svg>
6967                                                    <span class="text-xs sm:text-sm font-medium"></span>
6968                                                </div>
6969                                                <div class="flex items-center text-gray-600">
6970                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6971                                                        <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"/>
6972                                                    </svg>
6973                                                    <span class="text-xs sm:text-sm"></span>
6974                                                </div>
6975                                            </div>
6976                                        </div>
6977
6978                                        <!-- Action Button -->
6979                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
6980                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
6981                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
6982                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
6983                                                </svg>
6984                                            </button>
6985                                        </div>
6986                                    </div>
6987                                </div>
6988                            </div>
6989                        </li>
6990                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
6991                            data-lat="3.11" 
6992                            data-lng="12.27"
6993                            data-name="MEYOMESSALA"
6994                            data-address="."
6995                            data-city=""
6996                            data-phone="">
6997                            <div class="flex items-start space-x-3 sm:space-x-4">
6998                                <!-- Agency Icon -->
6999                                <div class="flex-shrink-0">
7000                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
7001                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
7002                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
7003                                        </svg>
7004                                    </div>
7005                                </div>
7006
7007                                <!-- Agency Details -->
7008                                <div class="flex-1 min-w-0">
7009                                    <div class="flex items-start justify-between">
7010                                        <div class="flex-1">
7011                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
7012                                                MEYOMESSALA
7013                                            </h3>
7014                                            <div class="mt-2 space-y-1">
7015                                                <div class="flex items-start text-gray-600">
7016                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
7017                                                        <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"/>
7018                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
7019                                                    </svg>
7020                                                    <span class="text-xs sm:text-sm break-words">.</span>
7021                                                </div>
7022                                                <div class="flex items-center text-gray-600">
7023                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
7024                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
7025                                                    </svg>
7026                                                    <span class="text-xs sm:text-sm font-medium"></span>
7027                                                </div>
7028                                                <div class="flex items-center text-gray-600">
7029                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
7030                                                        <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"/>
7031                                                    </svg>
7032                                                    <span class="text-xs sm:text-sm"></span>
7033                                                </div>
7034                                            </div>
7035                                        </div>
7036
7037                                        <!-- Action Button -->
7038                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
7039                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
7040                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
7041                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
7042                                                </svg>
7043                                            </button>
7044                                        </div>
7045                                    </div>
7046                                </div>
7047                            </div>
7048                        </li>
7049                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
7050                            data-lat="2.93" 
7051                            data-lng="11.98"
7052                            data-name="SANGMELIMA"
7053                            data-address="."
7054                            data-city=""
7055                            data-phone="">
7056                            <div class="flex items-start space-x-3 sm:space-x-4">
7057                                <!-- Agency Icon -->
7058                                <div class="flex-shrink-0">
7059                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
7060                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
7061                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
7062                                        </svg>
7063                                    </div>
7064                                </div>
7065
7066                                <!-- Agency Details -->
7067                                <div class="flex-1 min-w-0">
7068                                    <div class="flex items-start justify-between">
7069                                        <div class="flex-1">
7070                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
7071                                                SANGMELIMA
7072                                            </h3>
7073                                            <div class="mt-2 space-y-1">
7074                                                <div class="flex items-start text-gray-600">
7075                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
7076                                                        <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"/>
7077                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
7078                                                    </svg>
7079                                                    <span class="text-xs sm:text-sm break-words">.</span>
7080                                                </div>
7081                                                <div class="flex items-center text-gray-600">
7082                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
7083                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
7084                                                    </svg>
7085                                                    <span class="text-xs sm:text-sm font-medium"></span>
7086                                                </div>
7087                                                <div class="flex items-center text-gray-600">
7088                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
7089                                                        <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"/>
7090                                                    </svg>
7091                                                    <span class="text-xs sm:text-sm"></span>
7092                                                </div>
7093                                            </div>
7094                                        </div>
7095
7096                                        <!-- Action Button -->
7097                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
7098                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
7099                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
7100                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
7101                                                </svg>
7102                                            </button>
7103                                        </div>
7104                                    </div>
7105                                </div>
7106                            </div>
7107                        </li>
7108                                            <li class="group p-4 sm:p-6 hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent cursor-pointer transition-all duration-300 border-l-4 border-transparent hover:border-primary"
7109                            data-lat="2.38" 
7110                            data-lng="11.27"
7111                            data-name="AMBAM"
7112                            data-address="."
7113                            data-city=""
7114                            data-phone="">
7115                            <div class="flex items-start space-x-3 sm:space-x-4">
7116                                <!-- Agency Icon -->
7117                                <div class="flex-shrink-0">
7118                                    <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-primary to-primary-dark rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
7119                                        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
7120                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
7121                                        </svg>
7122                                    </div>
7123                                </div>
7124
7125                                <!-- Agency Details -->
7126                                <div class="flex-1 min-w-0">
7127                                    <div class="flex items-start justify-between">
7128                                        <div class="flex-1">
7129                                            <h3 class="text-base sm:text-lg font-bold text-gray-900 group-hover:text-primary transition-colors duration-300 break-words">
7130                                                AMBAM
7131                                            </h3>
7132                                            <div class="mt-2 space-y-1">
7133                                                <div class="flex items-start text-gray-600">
7134                                                    <svg class="w-4 h-4 mr-2 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
7135                                                        <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"/>
7136                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
7137                                                    </svg>
7138                                                    <span class="text-xs sm:text-sm break-words">.</span>
7139                                                </div>
7140                                                <div class="flex items-center text-gray-600">
7141                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
7142                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
7143                                                    </svg>
7144                                                    <span class="text-xs sm:text-sm font-medium"></span>
7145                                                </div>
7146                                                <div class="flex items-center text-gray-600">
7147                                                    <svg class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
7148                                                        <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"/>
7149                                                    </svg>
7150                                                    <span class="text-xs sm:text-sm"></span>
7151                                                </div>
7152                                            </div>
7153                                        </div>
7154
7155                                        <!-- Action Button -->
7156                                        <div class="flex-shrink-0 ml-2 sm:ml-4">
7157                                            <button class="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all duration-300 group-hover:scale-110" title="Show on map">
7158                                                <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
7159                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
7160                                                </svg>
7161                                            </button>
7162                                        </div>
7163                                    </div>
7164                                </div>
7165                            </div>
7166                        </li>
7167                                    </ul>
7168            </div>
7169        </div>
7170    </div>
7171</div>
7172        </main>
7173
7174        <!-- Footer -->
7175        <div class="bg-primary-dark text-white ">
7176    <!-- Main Footer Content -->
7177    <div class="py-12 px-4 sm:px-6 lg:px-8">
7178        <div class="max-w-7xl mx-auto">
7179            <!-- Centered Logo Section -->
7180            <div class="flex justify-center mb-12">
7181                <img src="https://camtel.cm/images/logo.png" alt="Camtel Logo" class="h-16 w-auto">
7182            </div>
7183            
7184            <!-- Footer Sections Grid -->
7185            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
7186                <!-- About CAMTEL Section -->
7187                <div class="text-center md:text-left">
7188                    <h3 class="text-lg font-semibold uppercase tracking-wide mb-4 relative">
7189                        About CAMTEL
7190                            <span class="hidden md:block absolute bottom-0 left-0 w-10 h-0.5 bg-primary"></span>
7191                    </h3>
7192                    <p class="text-gray-300 text-sm leading-relaxed">
7193                        CAMTEL (Cameroon Telecommunications) has been Cameroon's incumbent telecommunications operator since 1998.
7194                    </p>
7195                </div>
7196
7197                <!-- Quick Links Section -->
7198                <div class="text-center md:text-left">
7199                    <h3 class="text-lg font-semibold uppercase tracking-wide mb-4 relative">
7200                        Quick Links
7201                        <span class="hidden md:block absolute bottom-0 left-0 w-10 h-0.5 bg-primary"></span>
7202                    </h3>
7203                    <ul class="space-y-2">
7204                        <li><a href="https://camtel.cm" class="text-gray-300 hover:text-blue-400 transition-colors duration-200 text-sm flex items-center justify-center md:justify-start">
7205                            <span class="mr-2 text-primary">→</span>Home
7206                        </a></li>
7207                        <li><a href="https://camtel.cm/about" class="text-gray-300 hover:text-blue-400 transition-colors duration-200 text-sm flex items-center justify-center md:justify-start">
7208                            <span class="mr-2 text-primary">→</span>About Us
7209                        </a></li>
7210                        <li><a href="https://camtel.cm/documentation" class="text-gray-300 hover:text-blue-400 transition-colors duration-200 text-sm flex items-center justify-center md:justify-start">
7211                            <span class="mr-2 text-primary">→</span>Documentation
7212                        </a></li>
7213                        <li><a href="https://camtel.cm/agencies" class="text-gray-300 hover:text-blue-400 transition-colors duration-200 text-sm flex items-center justify-center md:justify-start">
7214                            <span class="mr-2 text-primary">→</span>Agencies
7215                        </a></li>
7216                        <li><a href="https://camtel.cm/about#contact" class="text-gray-300 hover:text-blue-400 transition-colors duration-200 text-sm flex items-center justify-center md:justify-start">
7217                            <span class="mr-2 text-primary">→</span>Contact
7218                        </a></li>
7219                        <li><a href="https://camtel.cm/services" class="text-gray-300 hover:text-blue-400 transition-colors duration-200 text-sm flex items-center justify-center md:justify-start">
7220                            <span class="mr-2 text-primary">→</span>Services
7221                        </a></li>
7222                    </ul>
7223                </div>
7224
7225                <!-- Contact Information -->
7226                <div class="text-center md:text-left">
7227                    <h3 class="text-lg font-semibold uppercase tracking-wide mb-4 relative">
7228                        Contact
7229                        <span class="hidden md:block absolute bottom-0 left-0 w-10 h-0.5 bg-primary"></span>
7230                    </h3>
7231                    <div class="space-y-3">
7232                        <p class="text-gray-300 text-sm">Contact us via</p>
7233                        <div class="space-y-2">
7234                            <div class="flex items-center justify-center md:justify-start">
7235                                <span class="mr-2">📞</span>
7236                                <span class="text-gray-300 text-sm">+ 237 2 22 23 40 65</span>
7237                            </div>
7238                            <div class="flex items-center justify-center md:justify-start">
7239                                <span class="mr-2">✉️</span>
7240                                <a href="mailto:[email protected]" class="text-white hover:text-blue-300 transition-colors duration-200 text-sm">
7241                                    [email protected]
7242                                </a>
7243                            </div>
7244                        </div>
7245                    </div>
7246                </div>
7247
7248                <!-- Social Media -->
7249                <div class="text-center md:text-left">
7250                    <h3 class="text-lg font-semibold uppercase tracking-wide mb-4 relative">
7251                        Follow Us
7252                        <span class="hidden md:block absolute bottom-0 left-0 w-10 h-0.5 bg-primary"></span>
7253                    </h3>
7254                    <div class="flex justify-center md:justify-start space-x-3">
7255                        <a href="https://www.facebook.com/camtelonline/" target="_blank" rel="noopener noreferrer" class="w-10 h-10 bg-gray-700 hover:bg-primary rounded-full flex items-center justify-center transition-all duration-200 hover:scale-110" aria-label="Facebook">
7256                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
7257                                <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"/>
7258                            </svg>
7259                        </a>
7260                        <a href="https://x.com/camtelonline" target="_blank" rel="noopener noreferrer" class="w-10 h-10 bg-gray-700 hover:bg-primary rounded-full flex items-center justify-center transition-all duration-200 hover:scale-110" aria-label="X">
7261                            <!-- X (formerly Twitter) logo SVG -->
7262                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
7263                                <path d="M17.53 3H21.5l-7.19 8.21L22.5 21h-7.19l-5.66-6.47L3.5 21H.5l7.69-8.78L1.5 3h7.19l5.13 5.87L17.53 3zm-2.02 15h2.13L8.47 5.97H6.34L15.51 18z"/>
7264                            </svg>
7265                        </a>
7266                        <a href="https://www.linkedin.com/company/camtel-cm/" target="_blank" rel="noopener noreferrer" class="w-10 h-10 bg-gray-700 hover:bg-primary rounded-full flex items-center justify-center transition-all duration-200 hover:scale-110" aria-label="LinkedIn">
7267                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
7268                                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
7269                            </svg>
7270                        </a>
7271                        <a href="https://www.youtube.com/channel/UC
7271QbkxS6Ky72QW8hAzM--gaA/videos" target="_blank" rel="noopener noreferrer" class="w-10 h-10 bg-gray-700 hover:bg-primary rounded-full flex items-center justify-center transition-all duration-200 hover:scale-110" aria-label="YouTube">
7272                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
7273                                <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
7274                            </svg>
7275                        </a>
7276                    </div>
7277                </div>
7278            </div>
7279        </div>
7280    </div>
7281
7282    <!-- Copyright Footer -->
7283    <div class="bg-gray-950 border-t border-gray-800 py-6">
7284        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
7285            <div class="text-center">
7286                <p class="text-gray-400 text-sm">
7287                    &copy; 2026 Cameroon Telecommunications. All rights reserved. | Powered by
7288                    <a href="https://camtel.cm" target="_blank" rel="noopener noreferrer" class="text-blue-400 hover:text-blue-300 transition-colors duration-200">
7289                        CAMTEL Silicon Valley
7290                    </a>
7291                </p>
7292            </div>
7293        </div>
7294    </div>
7295</div>
7296
7297<!-- Scroll to Top Button -->
7298<button id="scrollToTop" class="fixed bottom-8 left-1/2 transform -translate-x-1/2 w-12 h-12 bg-primary hover:bg-primary-dark text-white rounded-full shadow-lg transition-all duration-300 opacity-0 invisible hover:scale-110 z-50">
7299    <svg class="w-6 h-6 mx-auto" fill="currentColor" viewBox="0 0 24 24">
7300        <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/>
7301    </svg>
7302</button>
7303
7304<script>
7305document.addEventListener('DOMContentLoaded', function() {
7306    const scrollToTopBtn = document.getElementById('scrollToTop');
7307    
7308    // Show/hide scroll to top button
7309    window.addEventListener('scroll', function() {
7310        if (window.pageYOffset > 300) {
7311            scrollToTopBtn.classList.remove('opacity-0', 'invisible');
7312            scrollToTopBtn.classList.add('opacity-100', 'visible');
7313        } else {
7314            scrollToTopBtn.classList.add('opacity-0', 'invisible');
7315            scrollToTopBtn.classList.remove('opacity-100', 'visible');
7316        }
7317    });
7318    
7319    // Smooth scroll to top
7320    scrollToTopBtn.addEventListener('click', function() {
7321        window.scrollTo({
7322            top: 0,
7323            behavior: 'smooth'
7324        });
7325    });
7326});
7327</script>
7327     </div>
7328
7329    <!-- Swiper JS -->
7330    
7330<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
7330
7331
7332    <!-- Initialize AOS -->
7333    
7333<script>
7334        AOS.init({
7335            duration: 800,
7336            easing: 'ease-in-out',
7337            once: true,
7338            mirror: false
7339        });
7340    </script>
7340
7341
7342        
7342<script>
7343    (function(){
7344        const slides = document.querySelectorAll('[data-hero-slide]');
7345        if (slides.length > 1) {
7346            let idx = 0;
7347            setInterval(() => {
7348                slides[idx].classList.remove('opacity-100');
7349                slides[idx].classList.add('opacity-0');
7350                idx = (idx + 1) % slides.length;
7351                slides[idx].classList.remove('opacity-0');
7352                slides[idx].classList.add('opacity-100');
7353            }, 4000);
7354        }
7355
7356        const KEY='hero_ad_seen_at';
7357        const now=Date.now();
7358        const last=localStorage.getItem(KEY);
7359        const dayMs=24*60*60*1000;
7360        if(last && (now-parseInt(last,10))<dayMs){
7361            return;
7362        }
7363
7364        fetch("https://camtel.cm/api/featured-advert")
7365            .then(r=>r.ok?r.json():null)
7366            .then(data=>{
7367                if(!data || !data.slug){
7368                    return;
7369                }
7370                const modal=document.getElementById('hero-advert-modal');
7371                const titleEl=document.getElementById('hero-advert-title');
7372                const contentEl=document.getElementById('hero-advert-content');
7373                const imgEl=document.getElementById('hero-advert-image');
7374                const cta=document.getElementById('hero-advert-cta');
7375                const close=document.getElementById('hero-advert-close');
7376
7377                titleEl.textContent=data.title||'';
7378                contentEl.innerHTML=data.description||'';
7379                if (data.image) {
7380                    imgEl.innerHTML = `<img src="${data.image}" class="w-full h-80 md:h-96 object-cover rounded-2xl" alt="${data.title||'Advert'}">`;
7381                    imgEl.style.display = 'block';
7382                } else {
7383                    imgEl.style.display = 'none';
7384                }
7385                cta.textContent = data.buttonText || 'View';
7386                cta.href = data.url;
7387
7388                modal.classList.remove('hidden');
7389                modal.classList.add('flex');
7390                document.body.classList.add('overflow-hidden');
7391                setTimeout(() => {
7392                    const backdrop = modal.querySelector('.bg-black\\/60');
7393                    const content = modal.querySelector('.bg-white');
7394                    if (backdrop) backdrop.style.opacity = '1';
7395                    if (content) {
7396                        content.style.opacity = '1';
7397                        content.style.transform = 'scale(1)';
7398                    }
7399                }, 10);
7400
7401                function hide(){ 
7402                    const backdrop = modal.querySelector('.bg-black\\/60');
7403                    const content = modal.querySelector('.bg-white');
7404                    if (backdrop) backdrop.style.opacity = '0';
7405                    if (content) {
7406                        content.style.opacity = '0';
7407                        content.style.transform = 'scale(0.95)';
7408                    }
7409                    setTimeout(() => {
7410                        modal.classList.add('hidden'); 
7411                        modal.classList.remove('flex'); 
7412                        localStorage.setItem(KEY, String(Date.now())); 
7413                        document.body.classList.remove('overflow-hidden');
7414                    }, 300);
7415                }
7416                close.addEventListener('click', hide);
7417            }).catch(()=>{});
7418    })();
7419    </script>
7419
7420    <!-- OpenLayers CSS -->
7421<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css" type="text/css">
7422<!-- OpenLayers JavaScript -->
7423<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
vendor: 1 bytes, line 7423
7423
7424<script>
7425    let map;
7426    let markers = [];
7427    const agencies = [{"id":1,"name_en":"Camtel Head Office","name_fr":"Camtel Yaound\u00e9","address_en":"Boulevard de la Libert\u00e9","address_fr":"Boulevard de la Libert\u00e9","city":"Yaound\u00e9","phone":"+237 222 22 22 22","latitude":"3.85","longitude":"11.50","created_at":"2025-08-29T16:09:29.000000Z","updated_at":"2025-08-29T16:09:29.000000Z"},{"id":2,"name_en":"Camtel Douala Central","name_fr":"Camtel Douala Central","address_en":"Boulevard de la R\u00e9publique","address_fr":"Boulevard de la R\u00e9publique","city":"Douala","phone":"+237 233 42 42 42","latitude":"4.05","longitude":"9.77","created_at":"2025-08-29T16:09:29.000000Z","updated_at":"2025-08-29T16:09:29.000000Z"},{"id":3,"name_en":"Camtel Bamenda","name_fr":"Camtel Bamenda","address_en":"Commercial Avenue","address_fr":"Commercial Avenue","city":"Bamenda","phone":"+237 233 36 36 36","latitude":"5.96","longitude":"10.15","created_at":"2025-08-29T16:09:29.000000Z","updated_at":"2025-08-29T16:09:29.000000Z"},{"id":4,"name_en":"Camtel Bafoussam","name_fr":"Camtel Bafoussam","address_en":"Avenue des Banques","address_fr":"Avenue des Banques","city":"Bafoussam","phone":"+237 233 46 46 46","latitude":"5.47","longitude":"10.42","created_at":"2025-08-29T16:09:29.000000Z","updated_at":"2025-08-29T16:09:29.000000Z"},{"id":5,"name_en":"Camtel Garoua","name_fr":"Camtel Garoua","address_en":"Boulevard Principal","address_fr":"Boulevard Principal","city":"Garoua","phone":"+237 233 27 27 27","latitude":"9.30","longitude":"13.40","created_at":"2025-08-29T16:09:29.000000Z","updated_at":"2025-08-29T16:09:29.000000Z"},{"id":6,"name_en":"Camtel Maroua","name_fr":"Camtel Maroua","address_en":"Avenue du March\u00e9","address_fr":"Avenue du March\u00e9","city":"Maroua","phone":"+237 233 29 29 29","latitude":"10.59","longitude":"14.32","created_at":"2025-08-29T16:09:29.000000Z","updated_at":"2025-08-29T16:09:29.000000Z"},{"id":7,"name_en":"Camtel Kribi","name_fr":"Camtel Kribi","address_en":"Boulevard Maritime","address_fr":"Boulevard Maritime","city":"Kribi","phone":"+237 233 32 32 32","latitude":"2.93","longitude":"9.92","created_at":"2025-08-29T16:09:29.000000Z","updated_at":"2025-08-29T16:09:29.000000Z"},{"id":8,"name_en":"Camtel Kribi","name_fr":"Camtel Kribi","address_en":"Boulevard Maritime","address_fr":"Boulevard Maritime","city":"Kribi","phone":"+237 233 32 32 32","latitude":"2.93","longitude":"9.92","created_at":"2025-08-29T16:09:29.000000Z","updated_at":"2025-08-29T16:09:29.000000Z"},{"id":9,"name_en":"Camtel Buea","name_fr":"Camtel Buea","address_en":"Mile 17 Road","address_fr":"Mile 17 Road","city":"Buea","phone":"+237 233 33 33 33","latitude":"4.17","longitude":"9.23","created_at":"2025-08-29T16:09:29.000000Z","updated_at":"2025-08-29T16:09:29.000000Z"},{"id":10,"name_en":"Camtel Bertoua","name_fr":"Camtel Bertoua","address_en":"Avenue Centrale","address_fr":"Avenue Centrale","city":"Bertoua","phone":"+237 233 22 22 22","latitude":"4.58","longitude":"13.68","created_at":"2025-08-29T16:09:29.000000Z","updated_at":"2025-08-29T16:09:29.000000Z"},{"id":11,"name_en":"Camtel Ebolowa","name_fr":"Camtel Ebolowa","address_en":"Route Nationale","address_fr":"Route Nationale","city":"Ebolowa","phone":"+237 233 44 44 44","latitude":"2.90","longitude":"11.15","created_at":"2025-08-29T16:09:29.000000Z","updated_at":"2025-08-29T16:09:29.000000Z"},{"id":12,"name_en":"Camtel Ngaound\u00e9r\u00e9","name_fr":"Camtel Ngaound\u00e9r\u00e9","address_en":"Boulevard Principal","address_fr":"Boulevard Principal","city":"Ngaound\u00e9r\u00e9","phone":"+237 233 25 25 25","latitude":"7.32","longitude":"13.58","created_at":"2025-08-29T16:09:29.000000Z","updated_at":"2025-08-29T16:09:29.000000Z"},{"id":13,"name_en":"Camtel Edea","name_fr":"Camtel Edea","address_en":"Route Industrielle","address_fr":"Route Industrielle","city":"Edea","phone":"+237 233 42 42 42","latitude":"3.80","longitude":"10.13","created_at":"2025-08-29T16:09:29.000000Z","updated_at":"2025-08-29T16:09:29.000000Z"},{"id":14,"name_en":"Camtel Kousseri","name_fr":"Camtel Kousseri","address_en":"Avenue du March\u00e9","address_fr":"Avenue du March\u00e9","city":"Kousseri","phone":"+237 233 28 28 28","latitude":"12.08","longitude":"15.03","created_at":"2025-08-29T16:09:29.000000Z","updated_at":"2025-08-29T16:09:29.000000Z"},{"id":15,"name_en":"Camtel Foumban","name_fr":"Camtel Foumban","address_en":"Avenue du Palais","address_fr":"Avenue du Palais","city":"Foumban","phone":"+237 233 45 45 45","latitude":"5.72","longitude":"10.92","created_at":"2025-08-29T16:09:29.000000Z","updated_at":"2025-08-29T16:09:29.000000Z"},{"id":16,"name_en":"Camtel Kumba","name_fr":"Camtel Kumba","address_en":"Commercial Road","address_fr":"Commercial Road","city":"Kumba","phone":"+237 233 34 34 34","latitude":"4.63","longitude":"9.45","created_at":"2025-08-29T16:09:29.000000Z","updated_at":"2025-08-29T16:09:29.000000Z"},{"id":17,"name_en":"Camtel Bafang","name_fr":"Camtel Bafang","address_en":"Route Principale","address_fr":"Route Principale","city":"Bafang","phone":"+237 233 47 47 47","latitude":"5.15","longitude":"10.18","created_at":"2025-08-29T16:09:29.000000Z","updated_at":"2025-08-29T16:09:29.000000Z"},{"id":18,"name_en":"Camtel Mbalmayo","name_fr":"Camtel Mbalmayo","address_en":"Avenue Centrale","address_fr":"Avenue Centrale","city":"Mbalmayo","phone":"+237 233 43 43 43","latitude":"3.52","longitude":"11.50","created_at":"2025-08-29T16:09:29.000000Z","updated_at":"2025-08-29T16:09:29.000000Z"},{"id":19,"name_en":"Camtel Sangmelima","name_fr":"Camtel Sangmelima","address_en":"Route Nationale","address_fr":"Route Nationale","city":"Sangmelima","phone":"+237 233 41 41 41","latitude":"2.93","longitude":"11.98","created_at":"2025-08-29T16:09:29.000000Z","updated_at":"2025-08-29T16:09:29.000000Z"},{"id":20,"name_en":"Camtel Nkongsamba","name_fr":"Camtel Nkongsamba","address_en":"Boulevard Principal","address_fr":"Boulevard Principal","city":"Nkongsamba","phone":"+237 233 35 35 35","latitude":"4.95","longitude":"9.93","created_at":"2025-08-29T16:09:29.000000Z","updated_at":"2025-08-29T16:09:29.000000Z"},{"id":21,"name_en":"AC BIYEM ASSI","name_fr":"AC BIYEM ASSI","address_en":"BIYEM ASSI","address_fr":"BIYEM ASSI","city":"Yaound\u00e9","phone":null,"latitude":"3.83","longitude":"11.49","created_at":"2025-09-30T12:30:08.000000Z","updated_at":"2025-09-30T12:32:21.000000Z"},{"id":22,"name_en":"BLUE STORE -WARDA","name_fr":"BLUE STORE -WARDA","address_en":"BLUE STORE -WARDA","address_fr":"BLUE STORE -WARDA","city":"Yaound\u00e9","phone":null,"latitude":"3.87","longitude":"11.51","created_at":"2025-10-02T11:19:24.000000Z","updated_at":"2025-10-02T11:22:32.000000Z"},{"id":23,"name_en":" ENTREPRISES YAOUNDE","name_fr":" ENTREPRISES YAOUNDE","address_en":" ENTREPRISES YAOUNDE","address_fr":" ENTREPRISES YAOUNDE","city":null,"phone":null,"latitude":"3.86","longitude":"11.52","created_at":"2025-10-07T13:43:27.000000Z","updated_at":"2025-10-07T13:43:27.000000Z"},{"id":24,"name_en":"JAMOT","name_fr":"JAMOT","address_en":".","address_fr":".","city":"Yaound\u00e9","phone":null,"latitude":"3.90","longitude":"11.52","created_at":"2025-10-07T13:44:35.000000Z","updated_at":"2025-10-07T13:44:35.000000Z"},{"id":25,"name_en":"NKOMO","name_fr":"NKOMO","address_en":".","address_fr":".","city":"Yaound\u00e9","phone":null,"latitude":"3.85","longitude":"11.55","created_at":"2025-10-07T13:45:19.000000Z","updated_at":"2025-10-07T13:45:19.000000Z"},{"id":26,"name_en":"AKONOLINGA","name_fr":"AKONOLINGA","address_en":"AKONOLINGA","address_fr":"AKONOLINGA","city":"AKONOLINGA","phone":null,"latitude":"3.77","longitude":"12.25","created_at":"2025-10-07T13:46:21.000000Z","updated_at":"2025-10-07T13:46:21.000000Z"},{"id":27,"name_en":"AYOS","name_fr":"AYOS","address_en":"AYOS","address_fr":"AYOS","city":"AYOS","phone":null,"latitude":"3.90","longitude":"12.52","created_at":"2025-10-07T13:46:45.000000Z","updated_at":"2025-10-07T13:46:45.000000Z"},{"id":28,"name_en":"BAFIA","name_fr":"BAFIA","address_en":". ","address_fr":". ","city":"BAFIA","phone":null,"latitude":"4.74","longitude":"11.22","created_at":"2025-10-07T13:49:09.000000Z","updated_at":"2025-10-07T13:49:09.000000Z"},{"id":29,"name_en":"PC BOUMNYEBEL","name_fr":"PC BOUMNYEBEL","address_en":".","address_fr":".","city":"BOUMNYEBEL","phone":null,"latitude":"3.88","longitude":"10.85","created_at":"2025-10-07T13:50:07.000000Z","updated_at":"2025-10-07T13:50:07.000000Z"},{"id":30,"name_en":"PC ESEKA","name_fr":"PC ESEKA","address_en":".","address_fr":".","city":"ESEKA","phone":null,"latitude":"3.64","longitude":"10.77","created_at":"2025-10-07T13:50:46.000000Z","updated_at":"2025-10-07T13:50:46.000000Z"},{"id":31,"name_en":"PC MAKENENE","name_fr":"PC MAKENENE","address_en":".","address_fr":".","city":"MAKENENE","phone":null,"latitude":"4.88","longitude":"10.81","created_at":"2025-10-07T13:51:17.000000Z","updated_at":"2025-10-07T13:51:17.000000Z"},{"id":32,"name_en":"PC MBALMAYO","name_fr":"PC MBALMAYO","address_en":".","address_fr":".","city":"MBALMAYO","phone":null,"latitude":"3.52","longitude":"11.50","created_at":"2025-10-07T13:51:49.000000Z","updated_at":"2025-10-07T13:51:49.000000Z"},{"id":33,"name_en":"PC METET","name_fr":"PC METET","address_en":".","address_fr":".","city":"METET","phone":null,"latitude":"3.44","longitude":"11.77","created_at":"2025-10-07T13:52:23.000000Z","updated_at":"2025-10-07T13:52:23.000000Z"},{"id":34,"name_en":"PC MFOU","name_fr":"PC MFOU","address_en":".","address_fr":".","city":"Yaound\u00e9","phone":null,"latitude":"3.72","longitude":"11.64","created_at":"2025-10-07T13:52:57.000000Z","updated_at":"2025-10-07T13:52:57.000000Z"},{"id":35,"name_en":"PC MIMBOMAN","name_fr":"PC MIMBOMAN","address_en":".","address_fr":".","city":"Yaound\u00e9","phone":null,"latitude":"3.86","longitude":"11.56","created_at":"2025-10-07T13:53:32.000000Z","updated_at":"2025-10-07T13:53:32.000000Z"},{"id":36,"name_en":"MONATELE","name_fr":"MONATELE","address_en":".","address_fr":".","city":"MONATELE","phone":null,"latitude":"4.26","longitude":"11.20","created_at":"2025-10-16T10:00:22.000000Z","updated_at":"2025-10-16T10:00:22.000000Z"},{"id":37,"name_en":"MVAN","name_fr":"MVAN","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"3.82","longitude":"11.52","created_at":"2025-10-16T10:00:51.
7427000000Z","updated_at":"2025-10-16T10:00:51.000000Z"},{"id":38,"name_en":"NANGA EBOKO","name_fr":"NANGA EBOKO","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"4.67","longitude":"12.37","created_at":"2025-10-16T10:02:20.000000Z","updated_at":"2025-10-16T10:02:20.000000Z"},{"id":39,"name_en":"NGOUSSO","name_fr":"NGOUSSO","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"3.91","longitude":"11.54","created_at":"2025-10-16T10:03:10.000000Z","updated_at":"2025-10-16T10:03:10.000000Z"},{"id":40,"name_en":"NKOLBISSON","name_fr":"NKOLBISSON","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"3.87","longitude":"11.46","created_at":"2025-10-16T10:03:37.000000Z","updated_at":"2025-10-16T10:03:37.000000Z"},{"id":41,"name_en":"NGOUMOU","name_fr":"NGOUMOU","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"4.20","longitude":"12.90","created_at":"2025-10-16T10:03:59.000000Z","updated_at":"2025-10-16T10:03:59.000000Z"},{"id":42,"name_en":"NTUI","name_fr":"NTUI","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"4.45","longitude":"11.63","created_at":"2025-10-16T10:04:33.000000Z","updated_at":"2025-10-16T10:04:33.000000Z"},{"id":43,"name_en":"NSIMALEN","name_fr":"NSIMALEN","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"3.72","longitude":"11.55","created_at":"2025-10-16T10:05:05.000000Z","updated_at":"2025-10-16T10:05:05.000000Z"},{"id":44,"name_en":"OBALA","name_fr":"OBALA","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"4.17","longitude":"11.53","created_at":"2025-10-16T10:05:30.000000Z","updated_at":"2025-10-16T10:05:30.000000Z"},{"id":45,"name_en":"SOA","name_fr":"SOA","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"3.98","longitude":"11.59","created_at":"2025-10-16T10:05:53.000000Z","updated_at":"2025-10-16T10:05:53.000000Z"},{"id":46,"name_en":"AKWA CENTRE","name_fr":"AKWA CENTRE","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"4.05","longitude":"9.69","created_at":"2025-10-16T10:06:39.000000Z","updated_at":"2025-10-16T10:06:39.000000Z"},{"id":47,"name_en":"AC ENTREPRISE","name_fr":"AC ENTREPRISE","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"4.05","longitude":"9.69","created_at":"2025-10-16T10:07:06.000000Z","updated_at":"2025-10-16T10:07:06.000000Z"},{"id":48,"name_en":"BONAPRISO","name_fr":"BONAPRISO","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"4.05","longitude":"9.69","created_at":"2025-10-16T10:08:56.000000Z","updated_at":"2025-10-16T10:08:56.000000Z"},{"id":49,"name_en":"AKWA NORD","name_fr":"AKWA NORD","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"4.08","longitude":"9.75","created_at":"2025-10-16T10:09:24.000000Z","updated_at":"2025-10-16T10:09:24.000000Z"},{"id":50,"name_en":"BASSA","name_fr":"BASSA","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"4.04","longitude":"9.76","created_at":"2025-10-16T10:09:52.000000Z","updated_at":"2025-10-16T10:09:52.000000Z"},{"id":51,"name_en":"BEPANDA","name_fr":"BEPANDA","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"4.06","longitude":"9.73","created_at":"2025-10-16T10:10:16.000000Z","updated_at":"2025-10-16T10:10:16.000000Z"},{"id":52,"name_en":"BONABERI","name_fr":"BONABERI","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"4.10","longitude":"9.65","created_at":"2025-10-16T10:10:46.000000Z","updated_at":"2025-10-16T10:10:46.000000Z"},{"id":53,"name_en":"BONANJO","name_fr":"BONANJO","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"4.04","longitude":"9.69","created_at":"2025-10-16T10:11:10.000000Z","updated_at":"2025-10-16T10:11:10.000000Z"},{"id":54,"name_en":"EDEA","name_fr":"EDEA","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"3.80","longitude":"10.13","created_at":"2025-10-16T10:11:33.000000Z","updated_at":"2025-10-16T10:11:33.000000Z"},{"id":55,"name_en":"VILLAGE","name_fr":"VILLAGE","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"4.03","longitude":"9.74","created_at":"2025-10-16T10:13:47.000000Z","updated_at":"2025-10-16T10:13:47.000000Z"},{"id":56,"name_en":"CITE DES PALMIERS","name_fr":"CITE DES PALMIERS ","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"4.05","longitude":"9.76","created_at":"2025-10-16T10:16:32.000000Z","updated_at":"2025-10-16T10:16:32.000000Z"},{"id":57,"name_en":"NKONGSAMBA","name_fr":"NKONGSAMBA","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"4.96","longitude":"9.94","created_at":"2025-10-16T10:17:10.000000Z","updated_at":"2025-10-16T10:17:10.000000Z"},{"id":58,"name_en":"MEIGANGA","name_fr":"MEIGANGA","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"6.52","longitude":"14.29","created_at":"2025-10-16T10:18:14.000000Z","updated_at":"2025-10-16T10:18:14.000000Z"},{"id":59,"name_en":"NGAOUNDERE","name_fr":"NGAOUNDERE","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"7.32","longitude":"13.58","created_at":"2025-10-16T10:19:12.000000Z","updated_at":"2025-10-16T10:19:12.000000Z"},{"id":60,"name_en":"BANYO","name_fr":"BANYO","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"6.76","longitude":"11.81","created_at":"2025-10-16T10:19:36.000000Z","updated_at":"2025-10-16T10:19:36.000000Z"},{"id":61,"name_en":"DANG","name_fr":"DANG","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"7.42","longitude":"13.55","created_at":"2025-10-16T10:20:01.000000Z","updated_at":"2025-10-16T10:20:01.000000Z"},{"id":62,"name_en":"GARE","name_fr":"GARE","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"7.34","longitude":"13.59","created_at":"2025-10-16T10:23:45.000000Z","updated_at":"2025-10-16T10:23:45.000000Z"},{"id":63,"name_en":"TIBATI","name_fr":"TIBATI ","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"6.47","longitude":"12.62","created_at":"2025-10-16T10:24:38.000000Z","updated_at":"2025-10-16T10:24:38.000000Z"},{"id":64,"name_en":"TIGNERE","name_fr":"TIGNERE","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"7.37","longitude":"12.66","created_at":"2025-10-16T10:25:02.000000Z","updated_at":"2025-10-16T10:25:02.000000Z"},{"id":65,"name_en":"ABONG-MBONG","name_fr":"ABONG-MBONG","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"3.98","longitude":"13.19","created_at":"2025-10-16T10:25:26.000000Z","updated_at":"2025-10-16T10:25:26.000000Z"},{"id":66,"name_en":"BERTOUA","name_fr":"BERTOUA","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"4.58","longitude":"13.64","created_at":"2025-10-16T10:25:50.
7427000000Z","updated_at":"2025-10-16T10:25:50.000000Z"},{"id":67,"name_en":"BELABO","name_fr":"BELABO","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"4.44","longitude":"14.37","created_at":"2025-10-16T10:30:55.000000Z","updated_at":"2025-10-16T10:30:55.000000Z"},{"id":68,"name_en":"DABADJI","name_fr":"DABADJI","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"4.57","longitude":"13.68","created_at":"2025-10-16T10:31:22.000000Z","updated_at":"2025-10-16T10:31:22.000000Z"},{"id":69,"name_en":"FACE A FACE","name_fr":"FACE A FACE","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"4.58","longitude":"13.68","created_at":"2025-10-16T10:31:45.000000Z","updated_at":"2025-10-16T10:31:45.000000Z"},{"id":70,"name_en":"GAROUA BOULAI","name_fr":"GAROUA BOULAI","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"4.92","longitude":"13.29","created_at":"2025-10-16T10:32:09.000000Z","updated_at":"2025-10-16T10:32:09.000000Z"},{"id":71,"name_en":"MOKOLO","name_fr":"MOKOLO","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"4.58","longitude":"13.68","created_at":"2025-10-16T10:35:21.000000Z","updated_at":"2025-10-16T10:35:21.000000Z"},{"id":72,"name_en":"YOKADOUMA","name_fr":"YOKADOUMA","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"3.51","longitude":"15.05","created_at":"2025-10-16T10:35:47.000000Z","updated_at":"2025-10-16T10:35:47.000000Z"},{"id":73,"name_en":"KAELE","name_fr":"KAELE","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"10.11","longitude":"14.45","created_at":"2025-10-16T10:36:31.000000Z","updated_at":"2025-10-16T10:36:31.000000Z"},{"id":74,"name_en":"KOUSSERI","name_fr":"KOUSSERI","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"12.08","longitude":"15.03","created_at":"2025-10-16T10:37:01.000000Z","updated_at":"2025-10-16T10:37:01.000000Z"},{"id":75,"name_en":"MAROUA","name_fr":"MAROUA","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"10.60","longitude":"14.32","created_at":"2025-10-16T10:38:25.000000Z","updated_at":"2025-10-16T10:38:25.000000Z"},{"id":76,"name_en":"MORA","name_fr":"MORA","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"11.05","longitude":"14.14","created_at":"2025-10-16T10:38:51.000000Z","updated_at":"2025-10-16T10:38:51.000000Z"},{"id":77,"name_en":"YAGOUA","name_fr":"YAGOUA","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"10.34","longitude":"15.23","created_at":"2025-10-16T10:39:22.000000Z","updated_at":"2025-10-16T10:39:22.000000Z"},{"id":78,"name_en":"FIGUIL","name_fr":"FIGUIL","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"9.76","longitude":"13.96","created_at":"2025-10-16T10:40:16.000000Z","updated_at":"2025-10-16T10:40:16.000000Z"},{"id":79,"name_en":"GAROUA BOULEVARD","name_fr":"GAROUA BOULEVARD","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"9.31","longitude":"13.39","created_at":"2025-10-16T10:40:45.000000Z","updated_at":"2025-10-16T10:40:45.000000Z"},{"id":80,"name_en":"GUIDER","name_fr":"GUIDER","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"9.94","longitude":"13.95","created_at":"2025-10-16T10:41:04.000000Z","updated_at":"2025-10-16T10:41:04.000000Z"},{"id":81,"name_en":"MAYO OULO","name_fr":"MAYO OULO","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"9.97","longitude":"13.61","created_at":"2025-10-16T10:42:13.000000Z","updated_at":"2025-10-16T10:42:13.000000Z"},{"id":82,"name_en":"TCHOLLIRE","name_fr":"TCHOLLIRE","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"8.40","longitude":"14.17","created_at":"2025-10-16T10:42:30.000000Z","updated_at":"2025-10-16T10:42:30.000000Z"},{"id":83,"name_en":"BAMENDA","name_fr":"BAMENDA","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"5.96","longitude":"10.15","created_at":"2025-10-16T10:43:06.000000Z","updated_at":"2025-10-16T10:43:06.000000Z"},{"id":84,"name_en":"BAMBILI","name_fr":"BAMBILI","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"6.00","longitude":"10.26","created_at":"2025-10-16T10:43:42.000000Z","updated_at":"2025-10-16T10:43:42.000000Z"},{"id":85,"name_en":"NKAMBE","name_fr":"NKAMBE","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"6.58","longitude":"10.71","created_at":"2025-10-16T10:44:04.000000Z","updated_at":"2025-10-16T10:44:04.000000Z"},{"id":86,"name_en":"BAMENDA UP STATION","name_fr":"BAMENDA UP STATION","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"5.95","longitude":"10.16","created_at":"2025-10-16T10:44:26.000000Z","updated_at":"2025-10-16T10:44:26.000000Z"},{"id":87,"name_en":"BAFANG","name_fr":"BAFANG","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"5.15","longitude":"10.17","created_at":"2025-10-16T10:45:01.000000Z","updated_at":"2025-10-16T10:45:01.000000Z"},{"id":88,"name_en":"BAFOUSSAM","name_fr":"BAFOUSSAM","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"5.47","longitude":"10.42","created_at":"2025-10-16T10:45:45.000000Z","updated_at":"2025-10-16T10:45:45.000000Z"},{"id":89,"name_en":"BANGANGTE","name_fr":"BANGANGTE","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"5.14","longitude":"10.53","created_at":"2025-10-16T10:49:09.000000Z","updated_at":"2025-10-16T10:49:09.000000Z"},{"id":90,"name_en":"DSCHANG","name_fr":"DSCHANG","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"5.45","longitude":"10.06","created_at":"2025-10-16T10:49:27.000000Z","updated_at":"2025-10-16T10:49:27.000000Z"},{"id":91,"name_en":"FOUMBAN","name_fr":"FOUMBAN","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"5.73","longitude":"10.90","created_at":"2025-10-16T10:49:42.000000Z","updated_at":"2025-10-16T10:49:42.000000Z"},{"id":92,"name_en":"MBOUDA","name_fr":"MBOUDA","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"5.63","longitude":"10.25","created_at":"2025-10-16T10:49:58.000000Z","updated_at":"2025-10-16T10:49:58.000000Z"},{"id":93,"name_en":"BAFOUSSAM","name_fr":"BAFOUSSAM","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"5.48","longitude":"10.43","created_at":"2025-10-16T10:50:14.000000Z","updated_at":"2025-10-16T10:50:14.000000Z"},{"id":94,"name_en":"BANDJOUN","name_fr":"BANDJOUN","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"5.37","longitude":"10.41","created_at":"2025-10-16T10:50:31.000000Z","updated_at":"2025-10-16T10:50:31.000000Z"},{"id":95,"name_en":"FOUMBOT","name_fr":"FOUMBOT","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"5.51","longitude":"10.64","created_at":"2025-10-16T10:50:46.000000Z","updated_at":"2025-10-16T10:50:46.000000Z"},{"id":96,"name_en":"EBOLOWA","name_fr":"EBOLOWA","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"2.91","longitude":"11.17","created_at":"2025-10-16T10:51:04.000000Z","updated_at":"2025-10-16T10:51:04.000000Z"},{"id":97,"name_en":"KRIBI","name_fr":"KRIBI","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"2.94","longitude":"9.91","created_at":"2025-10-16T10:51:24.000000Z","updated_at":"2025-10-16T10:51:24.000000Z"},{"id":98,"name_en":"KRIBI PORT","name_fr":"KRIBI PORT","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"2.94","longitude":"9.91","created_at":"2025-10-16T10:51:41.000000Z","updated_at":"2025-10-16T10:51:41.000000Z"},{"id":99,"name_en":"NIETE","name_fr":"NIETE","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"2.94","longitude":"9.91","created_at":"2025-10-16T10:51:57.000000Z","updated_at":"2025-10-16T10:51:57.000000Z"}
7427,{"id":100,"name_en":"MEYOMESSALA","name_fr":"MEYOMESSALA","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"3.11","longitude":"12.27","created_at":"2025-10-16T10:52:14.000000Z","updated_at":"2025-10-16T10:52:14.000000Z"},{"id":101,"name_en":"SANGMELIMA","name_fr":"SANGMELIMA","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"2.93","longitude":"11.98","created_at":"2025-10-16T10:52:28.000000Z","updated_at":"2025-10-16T10:52:28.000000Z"},{"id":102,"name_en":"AMBAM","name_fr":"AMBAM","address_en":".","address_fr":".","city":null,"phone":null,"latitude":"2.38","longitude":"11.27","created_at":"2025-10-16T10:52:43.000000Z","updated_at":"2025-10-16T10:52:43.000000Z"}];
7428    const language = "en";
7429    const cameroonCenter = [9.7679, 4.0511]; // OpenLayers uses [longitude, latitude]
7430
7431    // Wait for both DOM and OpenLayers to be ready
7432    function waitForOpenLayers(callback, maxAttempts = 10) {
7433        if (typeof ol !== 'undefined') {
7434            callback();
7435            return;
7436        }
7437        
7438        if (maxAttempts <= 0) {
7439            console.error('OpenLayers failed to load after multiple attempts');
7440            document.getElementById('map').innerHTML = '<div class="flex items-center justify-center h-full bg-gray-100 text-gray-500">OpenLayers failed to load. Please refresh the page.</div>';
7441            return;
7442        }
7443        
7444        setTimeout(() => waitForOpenLayers(callback, maxAttempts - 1), 500);
7445    }
7446
7447    function initAgenciesMap() {
7448        
7449        try {
7450            // Import and use geographic projection for longitude/latitude coordinates
7451            ol.proj.useGeographic();
7452            
7453            
7454            // Initialize the map
7455            map = new ol.Map({
7456                target: 'map',
7457                layers: [
7458                    new ol.layer.Tile({
7459                        source: new ol.source.OSM()
7460                    })
7461                ],
7462                view: new ol.View({
7463                    center: cameroonCenter,
7464                    zoom: 7
7465                })
7466            });
7467            
7468
7469            // Create vector source for markers
7470            const markerSource = new ol.source.Vector();
7471            const markerLayer = new ol.layer.Vector({
7472                source: markerSource,
7473                style: function(feature) {
7474                    return new ol.style.Style({
7475                        image: new ol.style.Circle({
7476                            radius: 8,
7477                            fill: new ol.style.Fill({
7478                                color: '#09aeef'
7479                            }),
7480                            stroke: new ol.style.Stroke({
7481                                color: '#ffffff',
7482                                width: 2
7483                            })
7484                        })
7485                    });
7486                }
7487            });
7488
7489            map.addLayer(markerLayer);
7490
7491            // Add markers for each agency
7492            agencies.forEach((agency, index) => {
7493                const coordinates = [parseFloat(agency.longitude), parseFloat(agency.latitude)];
7494                
7495                // Get language-specific data
7496                const agencyName = language === 'fr' ? agency.name_fr : agency.name_en;
7497                const agencyAddress = language === 'fr' ? agency.address_fr : agency.address_en;
7498                const agencyCity =  agency.city ;
7499                const agencyPhone =  agency.phone ;
7500                
7501                
7502                // Create marker feature
7503                const markerFeature = new ol.Feature({
7504                    geometry: new ol.geom.Point(coordinates),
7505                    name: agencyName,
7506                    address: agencyAddress,
7507                    city: agencyCity,
7508                    phone: agencyPhone,
7509                    index: index
7510                });
7511
7512                markerSource.addFeature(markerFeature);
7513
7514                // Create popup for this marker
7515                const popup = document.createElement('div');
7516                popup.className = 'ol-popup';
7517                popup.style.cssText = `
7518                    position: absolute;
7519                    background: white;
7520                    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
7521                    padding: 15px;
7522                    border-radius: 10px;
7523                    border: 1px solid #cccccc;
7524                    bottom: 12px;
7525                    left: -50px;
7526                    min-width: 250px;
7527                    z-index: 1000;
7528                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
7529                `;
7530                popup.innerHTML = `
7531                    <div class="popup-content">
7532                        <h3 style="margin: 0 0 8px 0; color: #09aeef; font-weight: bold;">${agencyName}</h3>
7533                        <p style="margin: 0 0 5px 0; font-size: 14px;">${agencyAddress}</p>
7534                        <p style="margin: 0 0 5px 0; font-size: 14px;">${agencyCity}</p>
7535                        <p style="margin: 0; font-size: 14px; color: #666;">${agencyPhone}</p>
7536                    </div>
7537                    <div class="popup-closer" style="position: absolute; top: 2px; right: 8px; cursor: pointer; font-size: 16px; color: #999;">&times;</div>
7538                `;
7539
7540                // Create overlay for popup
7541                const overlay = new ol.Overlay({
7542                    element: popup,
7543                    positioning: 'bottom-center',
7544                    stopEvent: false
7545                });
7546
7547                map.addOverlay(overlay);
7548
7549                // Store marker info
7550                markers.push({ 
7551                    feature: markerFeature, 
7552                    overlay: overlay, 
7553                    coordinates: coordinates,
7554                    index: index
7555                });
7556
7557                // Close popup when clicking the X
7558                popup.querySelector('.popup-closer').addEventListener('click', function() {
7559                    overlay.setPosition(undefined);
7560                });
7561            });
7562            
7563
7564            // Handle marker clicks
7565            map.on('click', function(evt) {
7566                const feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
7567                    return feature;
7568                });
7569                
7570                if (feature) {
7571                    // Close all other popups
7572                    markers.forEach(m => m.overlay.setPosition(undefined));
7573                    
7574                    // Find the marker and show its popup
7575                    const marker = markers.find(m => m.feature === feature);
7576                    if (marker) {
7577                        marker.overlay.setPosition(marker.coordinates);
7578                        highlightListItem(marker.index);
7579                    }
7580                }
7581            });
7582
7583            // List click handler
7584            document.querySelectorAll('#agency-list li').forEach((item, index) => {
7585                item.addEventListener('click', () => {
7586                    const lat = parseFloat(item.dataset.lat);
7587                    const lng = parseFloat(item.dataset.lng);
7588                    
7589                    // Center map
7590                    map.getView().setCenter([lng, lat]);
7591                    map.getView().setZoom(15);
7592                    
7593                    // Close all popups
7594                    markers.forEach(m => m.overlay.setPosition(undefined));
7595                    
7596                    // Show popup for this agency
7597                    const marker = markers.find(m => m.index === index);
7598                    if (marker) {
7599                        marker.overlay.setPosition(marker.coordinates);
7600                    }
7601                    
7602                    // Highlight list item
7603                    highlightListItem(index);
7604                });
7605            });
7606
7607            // Search functionality
7608            document.getElementById('search').addEventListener('input', function() {
7609                const val = this.value.toLowerCase();
7610                document.querySelectorAll('#agency-list li').forEach((item, index) => {
7611                    const text = item.textContent.toLowerCase();
7612                    item.style.display = text.includes(val) ? '' : 'none';
7613                });
7614            });
7615
7616            
7617            // Force a map update and ensure it's visible
7618            setTimeout(() => {
7619                map.updateSize();
7620                // Ensure the map container is visible
7621                const mapElement = document.getElementById('map');
7622                if (mapElement) {
7623                    mapElement.style.display = 'block';
7624                    mapElement.style.visibility = 'visible';
7625                }
7626            }, 200);
7627            
7628        } catch (error) {
7629            console.error('Error initializing agencies map:', error);
7630            console.error('Error details:', error.message, error.stack);
7631            // Fallback: show a simple message
7632            document.getElementById('map').innerHTML = '<div class="flex items-center justify-center h-full bg-gray-100 text-gray-500">Map initialization failed. Please refresh the page.</div>';
7633        }
7634    }
7635
7636    function highlightListItem(index) {
7637        document.querySelectorAll('#agency-list li').forEach((li, i) => {
7638            li.classList.remove('bg-gray-50', 'border-camtel');
7639            if (i === index) {
7640                li.classList.add('bg-gray-50', 'border-camtel');
7641                li.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
7642            }
7643        });
7644    }
7645
7646    // Start initialization when DOM is ready
7647    document.addEventListener('DOMContentLoaded', function() {
7648        waitForOpenLayers(initAgenciesMap);
7649    });
7650</script>
7650
7651
7652<style>
7653.ol-popup {
7654    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
7655}
7656
7657.ol-popup .popup-closer:hover {
7658    color: #333;
7659}
7660
7661#map {
7662    border-radius: 16px;
7663    overflow: hidden;
7664    min-height: 400px;
7665    width: 100%;
7666    height: 100%;
7667    position: relative;
7668}
7669
7670.ol-attribution {
7671    font-size: 11px;
7672    color: #666;
7673}
7674
7675/* Ensure the map container is visible */
7676#map:empty::before {
7677    content: 'Loading OpenLayers map...';
7678    display: flex;
7679    align-items: center;
7680    justify-content: center;
7681    height: 400px;
7682    background-color: #f3f4f6;
7683    color: #6b7280;
7684    font-size: 14px;
7685}
7686</style>
7687<script>
7688
7689</script>
7689
7690        <div wire:snapshot="{&quot;data&quot;:{&quot;isOpen&quot;:false,&quot;input&quot;:&quot;&quot;,&quot;isLoading&quot;:false,&quot;token&quot;:&quot;visitor_6abe3281de2ee_1790849665&quot;,&quot;visitor&quot;:[null,{&quot;class&quot;:&quot;App\\Models\\Visitor&quot;,&quot;key&quot;:3819046,&quot;s&quot;:&quot;mdl&quot;}],&quot;isAskingForName&quot;:true,&quot;showInfoForm&quot;:false,&quot;formData&quot;:[{&quot;name&quot;:&quot;&quot;,&quot;phone&quot;:&quot;&quot;},{&quot;s&quot;:&quot;arr&quot;}],&quot;autoRefreshInterval&quot;:null,&quot;lastMessageId&quot;:0,&quot;attachedFile&quot;:null,&quot;fileName&quot;:&quot;&quot;,&quot;fileSize&quot;:0,&quot;fileType&quot;:&quot;&quot;,&quot;showCategorizationButtons&quot;:false,&quot;isEscalated&quot;:false,&quot;allowContinuedConversation&quot;:false,&quot;currentCategory&quot;:&quot;&quot;,&quot;agentActive&quot;:false,&quot;inputKey&quot;:0,&quot;showNavigationButtons&quot;:false,&quot;showFeedbackButtons&quot;:false,&quot;showSubOptions&quot;:false,&quot;dbCategories&quot;:[[[{&quot;key&quot;:&quot;mobile_services&quot;,&quot;label&quot;:&quot;\ud83d\udcf1 Mobile Services&quot;},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;key&quot;:&quot;fixed_internet&quot;,&quot;label&quot;:&quot;\ud83c\udf10 Fixed Internet&quot;},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;key&quot;:&quot;transport&quot;,&quot;label&quot;:&quot;\ud83c\udf0d Transport&quot;},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;key&quot;:&quot;data_center&quot;,&quot;label&quot;:&quot;\ud83c\udfe2 Data Center&quot;},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;key&quot;:&quot;general_inquiry&quot;,&quot;label&quot;:&quot;\ud83d\udcac General Inquiry&quot;},{&quot;s&quot;:&quot;arr&quot;}]],{&quot;s&quot;:&quot;arr&quot;}],&quot;showFileInput&quot;:false,&quot;subOptions&quot;:[{&quot;mobile_services&quot;:[[[{&quot;key&quot;:&quot;mobile.data&quot;,&quot;label&quot;:&quot;\ud83d\udcf6 Data Bundles &amp; Plans&quot;},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;key&quot;:&quot;mobile.sim&quot;,&quot;label&quot;:&quot;\ud83e\udeaa SIM Cards &amp; Registration&quot;},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;key&quot;:&quot;mobile.money&quot;,&quot;label&quot;:&quot;\ud83d\udcb3 Blue Money Services&quot;},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;key&quot;:&quot;mobile.roaming&quot;,&quot;label&quot;:&quot;\ud83c\udf0d Roaming &amp; Travel&quot;},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;key&quot;:&quot;mobile.support&quot;,&quot;label&quot;:&quot;\ud83d\udd27 Technical Support&quot;},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;key&quot;:&quot;mobile.rates&quot;,&quot;label&quot;:&quot;\ud83d\udcde Call &amp; SMS Rates&quot;},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;key&quot;:&quot;mobile.devices&quot;,&quot;label&quot;:&quot;\ud83d\udcf1 Phones &amp; Devices&quot;},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;key&quot;:&quot;agent&quot;,&quot;label&quot;:&quot;\ud83d\udc68\u200d\ud83d\udcbc Talk to an Agent&quot;},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;key&quot;:&quot;done&quot;,&quot;label&quot;:&quot;\u2705 End Conversation&quot;},{&quot;s&quot;:&quot;arr&quot;}]],{&quot;s&quot;:&quot;arr&quot;}],&quot;fixed_internet&quot;:[[[{&quot;key&quot;:&quot;internet.availability&quot;,&quot;label&quot;:&quot;\ud83d\udccd Check Availability&quot;},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;key&quot;:&quot;internet.install&quot;,&quot;label&quot;:&quot;\ud83d\udee0 Installation Process&quot;},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;key&quot;:&quot;internet.pricing&quot;,&quot;label&quot;:&quot;\ud83d\udcb5 Plans &amp; Pricing&quot;},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;key&quot;:&quot;internet.equipment&quot;,&quot;label&quot;:&quot;\ud83d\udce1 Equipment &amp; Setup&quot;},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;key&quot;:&quot;internet.support&quot;,&quot;label&quot;:&quot;\ud83d\udd27 Internet Support&quot;},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;key&quot;:&quot;internet.business&quot;,&quot;label&quot;:&quot;\ud83d\udcbc Business Solutions&quot;},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;key&quot;:&quot;agent&quot;,&quot;label&quot;:&quot;\ud83d\udc68\u200d\ud83d\udcbc Talk to an Agent&quot;},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;key&quot;:&quot;done&quot;,&quot;label&quot;:&quot;\u2705 End Conversation&quot;},{&quot;s&quot;:&quot;arr&quot;}]],{&quot;s&quot;:&quot;arr&quot;}],&quot;transport&quot;:[[[{&quot;key&quot;:&quot;agent&quot;,&quot;label&quot;:&quot;\ud83d\udc68\u200d\ud83d\udcbc Talk to an Agent&quot;},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;key&quot;:&quot;done&quot;,&quot;label&quot;:&quot;\u2705 End Conversation&quot;},{&quot;s&quot;:&quot;arr&quot;}]],{&quot;s&quot;:&quot;arr&quot;}],&quot;data_center&quot;:[[[{&quot;key&quot;:&quot;agent&quot;,&quot;label&quot;:&quot;\ud83d\udc68\u200d\ud83d\udcbc Talk to an Agent&quot;},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;key&quot;:&quot;done&quot;,&quot;label&quot;:&quot;\u2705 End Conversation&quot;},{&quot;s&quot;:&quot;arr&quot;}]],{&quot;s&quot;:&quot;arr&quot;}],&quot;general_inquiry&quot;:[[[{&quot;key&quot;:&quot;agent&quot;,&quot;label&quot;:&quot;\ud83d\udc68\u200d\ud83d\udcbc Talk to an Agent&quot;},{&quot;s&quot;:&quot;arr&quot;}],[{&quot;key&quot;:&quot;done&quot;,&quot;label&quot;:&quot;\u2705 End Conversation&quot;},{&quot;s&quot;:&quot;arr&quot;}]],{&quot;s&quot;:&quot;arr&quot;}]},{&quot;s&quot;:&quot;arr&quot;}]},&quot;memo&quot;:{&quot;id&quot;:&quot;3GdjowOfw3WfRdqNXI5w&quot;,&quot;name&quot;:&quot;chatbot&quot;,&quot;path&quot;:&quot;agencies&quot;,&quot;method&quot;:&quot;GET&quot;,&quot;children&quot;:[],&quot;scripts&quot;:[],&quot;assets&quot;:[],&quot;errors&quot;:[],&quot;locale&quot;:&quot;en&quot;},&quot;checksum&quot;:&quot;04f1357642bc332f7aa2292d2e06d62a606dc12f6b030290970f8aea031a0504&quot;}" wire:effects="{&quot;dispatches&quot;:[{&quot;name&quot;:&quot;$refresh&quot;,&quot;params&quot;:[]},{&quot;name&quot;:&quot;messagesUpdated&quot;,&quot;params&quot;:[]}]}" wire:id="3GdjowOfw3WfRdqNXI5w" class="fixed bottom-4 right-4 z-50 w-auto max-w-[calc(100vw-2rem)]">
7691    <!-- Chatbot Toggle Button -->
7692    <button wire:click="toggleChat" class="text-white p-3 sm:p-4 roun
7692ded-full shadow-lg transition-colors relative" style="background-color:#02b7f0;">
7693        <i class="fas fa-comments text-lg sm:text-xl"></i>
7694        <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
7695    </button>
7696    
7697    <!-- Chatbot Window -->
7698    <div id="chatbot-window" class="hidden bg-white rounded-lg shadow-xl w-80 sm:w-96 h-[500px] sm:h-[600px] flex flex-col mt-3 max-w-[calc(100vw-2rem)]">
7699        <!-- Modern Chat Header -->
7700        <div class="p-4 border-b text-white" style="background-color:#02b7f0;">
7701            <div class="flex items-center justify-between">
7702                <div class="flex items-center space-x-3">
7703                    <div class="relative">
7704                        <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
7705                            <i class="fas fa-robot text-white text-lg"></i>
7706                        </div>
7707                        <div class="absolute -bottom-1 -right-1 w-3 h-3 bg-green-400 rounded-full border-2 border-white"></div>
7708                    </div>
7709                    <div>
7710                        <h3 class="font-semibold text-lg">Camtel Assistant</h3>
7711                        <p class="text-sm opacity-90">Support Bot</p>
7712                    </div>
7713                </div>
7714                <div class="flex items-center space-x-2">
7715                    <button wire:click="startNewChatSession" class="p-2 hover:bg-white/10 rounded-full transition-colors" title="Start Fresh Chat">
7716                        🆕
7717                    </button>
7718                    <button wire:click="toggleChat" class="p-2 hover:bg-white/10 rounded-full transition-colors">
7719                        <i class="fas fa-times"></i>
7720                    </button>
7721                </div>
7722            </div>
7723        </div>
7724        
7725        <!-- Chat Messages Area -->
7726        <div id="chatbot-messages" class="flex-1 p-4 overflow-y-auto bg-gray-50"  wire:poll.5s="checkForNewMessages">
7727            <!--[if BLOCK]><![endif]-->                <!-- Existing Messages -->
7728                <!--[if BLOCK]><![endif]-->                    <!--[if BLOCK]><![endif]-->                        <div class="flex items-start space-x-3 mb-4">
7729                            <div class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0" style="background-color:#02b7f0;">
7730                                <i class="fas fa-robot text-white text-sm"></i>
7731                            </div>
7732                            <div class="bg-white rounded-lg p-3 shadow-sm max-w-[80%]">
7733                                Hello, I&#039;m Ngonda, CAMTEL&#039;s virtual assistant! 👋<br />
7734<br />
7735I&#039;m here to help you with all things CAMTEL - from mobile services to internet solutions.
7736                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
7737                                <!--[if ENDBLOCK]><![endif]-->
7738                                <!--[if ENDBLOCK]><![endif]-->
7739                                <!--[if ENDBLOCK]><![endif]-->
7740                                <!--[if ENDBLOCK]><![endif]-->
7741                                <!--[if ENDBLOCK]><![endif]-->
7742                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
7743                                
7744                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
7745                            </div>
7746                        </div>
7747                        
7748                        <!-- Show visitor information form when asking for info -->
7749                        <!--[if BLOCK]><![endif]-->                            <div class="flex items-start space-x-3 mb-4">
7750                                <div class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0" style="background-color:#02b7f0;">
7751                                    <i class="fas fa-robot text-white text-sm"></i>
7752                                </div>
7753                                <div class="bg-white rounded-lg p-3 shadow-sm max-w-[80%]">
7754                                    <form wire:submit="submitVisitorInfo" class="space-y-3">
7755                                        <div>
7756                                            <label for="visitor-name" class="block text-sm font-medium text-gray-700 mb-1">
7757                                                Your Full Name *
7758                                            </label>
7759                                            <input 
7760                                                type="text" 
7761                                                id="visitor-name"
7762                                                wire:model="formData.name"
7763                                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 transition-colors"
7764                                                style="--tw-ring-color:#02b7f0;"
7765                                                placeholder="Enter your full name"
7766                                                required
7767                                            >
7768                                            <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
7769                                        </div>
7770                                        
7771                                        <div>
7772                                            <label for="visitor-phone" class="block text-sm font-medium text-gray-700 mb-1">
7773                                                Your Phone Number *
7774                                            </label>
7775                                            <input 
7776                                                type="tel" 
7777                                                id="visitor-phone"
7778                                                wire:model="formData.phone"
7779                                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 transition-colors"
7780                                                style="--tw-ring-color:#02b7f0;"
7781                                                placeholder="Enter your phone number"
7782                                                required
7783                                            >
7784                                            <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
7785                                        </div>
7786                                        
7787                                        <div class="pt-2">
7788                                            <button
7789                                                type="submit"
7790                                                class="w-full text-white py-2 px-4 roun
7790ded-lg transition-colors flex items-center justify-center"
7791                                                style="background-color:#02b7f0;"
7792                                                
7793                                            >
7794                                                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
7795                                                <i class="fas fa-check mr-2"></i>
7796                                                Submit Information
7797                                            </button>
7798                                        </div>
7799                                    </form>
7800                                    
7801                                    <div class="mt-3 p-2 bg-blue-50 border border-blue-200 rounded-lg" style="background-color:#e6f9ff;border-color:#bfefff;">
7802                                        <div class="flex items-center text-blue-700 text-xs" style="color:#027aa0;">
7803                                            <i class="fas fa-info-circle mr-2"></i>
7804                                            <span>Please fill out the form above to continue. The chat input will appear once you submit your information.</span>
7805                                        </div>
7806                                    </div>
7807                                </div>
7808                            </div>
7809                        <!--[if ENDBLOCK]><![endif]-->
7810                    <!--[if ENDBLOCK]><![endif]-->
7811                <!--[if ENDBLOCK]><![endif]-->
7812            <!--[if ENDBLOCK]><![endif]-->
7813
7814            <!-- Show categorization buttons when appropriate -->
7815            <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
7816        </div>
7817        
7818        <!-- Chat Input Area -->
7819        <div class="p-4 border-t bg-white">
7820            <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
7821            
7822            <form wire:submit.prevent="sendMessage" class="flex items-center space-x-2">
7823                <div class="flex-1 relative">
7824                    <input 
7825                        type="text" 
7826                        id="chatbot-input"
7827                        wire:model="input"
7828                        wire:keydown.enter="sendMessage"
7829                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 transition-colors"
7830                        style="--tw-ring-color:#02b7f0;"
7831                        placeholder="Type your message here..."
7832                        
7833                    >
7834
7835                    
7836                </div>
7837                
7838                <!-- Send Button -->
7839                <button 
7840                    type="submit" 
7841                    class="text-white p-3 rounded-lg transition-colors "
7842                    style="background-color:#02b7f0;"
7843                    
7844                    wire:loading.attr="disabled"
7845                    wire:target="attachedFile, uploadFile"
7846                >
7847                    <i class="fas fa-paper-plane text-lg"></i>
7848                </button>
7849                
7850               
7851            </form>
7852
7853            <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
7854            
7855            <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
7856
7857            <!-- Uploading Indicator -->
7858            <div class="mt-2 flex items-center text-xs text-gray-500" wire:loading wire:target="attachedFile, uploadFile">
7859                <div class="animate-spin rounded-full h-3 w-3 border-b-2 mr-2" style="border-color:#02b7f0;"></div>
7860                Uploading file...
7861            </div>
7862
7863            <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
7864        </div>
7865    </div>
7866
7867</div>
7868
7869<script>
7870    document.addEventListener('DOMContentLoaded', function() {
7871        const searchVoiceInputBtn = document.getElementById('search-voice-input');
7872        const chatInput = document.getElementById('chatbot-input');
7873        const messagesContainer = document.getElementById('chatbot-messages');
7874        const chatbotContainer = document.querySelector('.fixed.bottom-4.right-4');
7875        const chatbotWindow = document.getElementById('chatbot-window');
7876        const toggleButton = chatbotContainer.querySelector('button[wire\\:click="toggleChat"]');
7877
7878        // Function to scroll to bottom of messages
7879        function scrollToBottom() {
7880            if (messagesContainer) {
7881                messagesContainer.scrollTop = messagesContainer.scrollHeight;
7882            }
7883        }
7884
7885        // Click outside functionality
7886        document.addEventListener('click', function(event) {
7887            // Check if chatbot is open
7888            if (chatbotWindow && chatbotWindow.classList.contains('block')) {
7889                // Check if click is outside the chatbot container
7890                if (!chatbotContainer.contains(event.target)) {
7891                    // Close the chatbot
7892                    if (typeof Livewire !== 'undefined') {
7893                        Livewire.find(chatbotContainer.closest('[wire\\:id]')?.getAttribute('wire:id')).call('toggleChat');
7894                    }
7895                }
7896            }
7897        });
7898
7899        // Prevent toggle button from closing when clicked (since it's inside the container)
7900        if (toggleButton) {
7901            toggleButton.addEventListener('click', function(event) {
7902                event.stopPropagation();
7903            });
7904        }
7905
7906        // Listen for Livewire events
7907        Livewire.on('message-sent', () => {
7908            setTimeout(scrollToBottom, 100);
7909            // Don't clear input field here - let Livewire handle it
7910        });
7911
7912        // Allow other parts of the site to open the chatbot
7913        Livewire.on('open-chatbot', () => {
7914            const id = chatbotContainer.closest('[wire\\:id]')?.getAttribute('wire:id');
7915            if (id) {
7916                Livewire.find(id).call('openChat');
7917                setTimeout(scrollToBottom, 150);
7918            }
7919        });
7920
7921        // Listen for new messages from auto-refresh
7922        Livewire.on('new-messages-received', () => {
7923            setTimeout(scrollToBottom, 100);
7924            // Don't clear input field - let Livewire handle it
7925            
7926            // Show notification if chat is not focused
7927            if (!document.hasFocus()) {
7928                showNewMessageNotification();
7929            }
7930        });
7931        
7932        // Listen for chat state changes
7933        Livewire.on('chat-opened', () => {
7934            startAutoRefresh();
7935            // Smooth open animation
7936            if (chatbotWindow) {
7937                chatbotWindow.style.transform = 'scale(0.95)';
7938                chatbotWindow.style.opacity = '0';
7939                setTimeout(() => {
7940                    chatbotWindow.style.transition = 'all 0.3s ease-out';
7941                    chatbotWindow.style.transform = 'scale(1)';
7942                    chatbotWindow.style.opacity = '1';
7943                }, 10);
7944            }
7945        });
7946        
7947        Livewire.on('chat-closed', () => {
7948            stopAutoRefresh();
7949        });
7950        
7951        // Listen for escalated message updates
7952        Livewire.on('escalated-messages-updated', (event) => {
7953            // Update the escalated message badge if it exists
7954            const badge = document.querySelector('.bg-red-500.text-white.text-xs.rounded-full');
7955            if (badge) {
7956                badge.textContent = event.count;
7957            }
7958        });
7959
7960        // Auto-refresh functionality
7961        let autoRefreshInterval;
7962        
7963        function startAutoRefresh() {
7964            if (autoRefreshInterval) {
7965                clearInterval(autoRefreshInterval);
7966            }
7967            autoRefreshInterval = setInterval(() => {
7968                if (chatbotWindow && chatbotWindow.classList.contains('block')) {
7969                    // Trigger Livewire refresh
7970                    if (typeof Livewire !== 'undefined') {
7971                        const id = chatbotContainer.closest('[wire\\:id]')?.getAttribute('wire\\:id');
7972                        if (id) {
7973                            Livewire.find(id).call('checkForNewMessages');
7974                        }
7975                    }
7976                }
7977            }, 5000); // Check every 5 seconds
7978        }
7979        
7980        function stopAutoRefresh() {
7981            if (autoRefreshInterval) {
7982                clearInterval(autoRefreshInterval);
7983                autoRefreshInterval = null;
7984            }
7985        }
7986
7987        // New message notification
7988        function showNewMessageNotification() {
7989            if (Notification.permission === 'granted') {
7990                new Notification('CAMTEL Assistant', {
7991                    body: 'You have a new message',
7992                    icon: '/favicon.ico'
7993                });
7994            }
7995        }
7996
7997        // Request notification permission
7998        if (Notification.permission === 'default') {
7999            Notification.requestPermission();
8000        }
8001
8002        // Handle Enter key in chat input
8003        if (chatInput) {
8004            chatInput.addEventListener('keydown', function(e) {
8005                if (e.key === 'Enter' && !e.shiftKey) {
8006                    e.preventDefault();
8007                    
8008                    // Check if chat is escalated
8009                    const isEscalated = document.querySelector('.bg-blue-50') !== null;
8010                    const allowContinuedConversation = document.querySelector('.bg-blue-50 .text-xs')?.textContent.includes('you can continue typing');
8011                    
8012                    if (isEscalated && !allowContinuedConversation) {
8013                        return; // Don't submit if escalated and continued conversation not allowed
8014                    }
8015                    
8016                    const form = chatInput.closest('form');
8017                    if (form) {
8018                        form.dispatchEvent(new Event('submit', { bubbles: true }));
8019                    }
8020                }
8021            });
8022        }
8023
8024        // Handle form submission to clear input
8025        const chatForm = document.querySelector('form[wire\\:submit="sendMessage"]');
8026        if (chatForm) {
8027            chatForm.addEventListener('submit', (e) => {
8028                // Clear input field IMMEDIATELY after form submission
8029                if (chatInput) {
8030                    chatInput.value = '';
8031                    // Trigger Livewire input update
8032                    chatInput.dispatchEvent(new Event('input', { bubbles: true }));
8033                }
8034                
8035                // Call the global clear function
8036                if (window.clearChatInput) {
8037                    window.clearChatInput();
8038                }
8039                
8040                // Additional clearing with multiple timeouts for reliability
8041                setTimeout(() => {
8042                    if (chatInput) {
8043                        chatInput.value = '';
8044                        chatInput.dispatchEvent(new Event('input', { bubbles: true }));
8045                    }
8046                }, 10);
8047                
8048                setTimeout(() => {
8049                    if (chatInput) {
8050                        chatInput.value = '';
8051                        chatInput.dispatchEvent(new Event('input', { bubbles: true }));
8052                    }
8053                }, 50);
8054                
8055                setTimeout(() => {
8056                    if (chatInput) {
8057                        chatInput.value = '';
8058                        chatInput.dispatchEvent(new Event('input', { bubbles: true }));
8059                    }
8060                }, 100);
8061            });
8062        }
8063
8064        // Initial scroll to bottom
8065        scrollToBottom();
8066
8067        // Listen for Livewire updates and force clear input
8068        Livewire.on('$refresh', () => {
8069            // Force clear input after any Livewire refresh
8070            setTimeout(() => {
8071                const chatInput = document.getElementById('chatbot-input');
8072                if (chatInput) {
8073                    chatInput.value = '';
8074                    chatInput.dispatchEvent(new Event('input', { bubbles: true }));
8075                    console.log('Input cleared on $refresh event');
8076                }
8077            }, 10);
8078        });
8079
8080        // Listen for Livewire component updates
8081        Livewire.on('$updated', () => {
8082            // Force clear input after component updates
8083            setTimeout(() => {
8084                const chatInput = document.getElementById('chatbot-input');
8085                if (chatInput) {
8086                    chatInput.value = '';
8087                    chatInput.dispatchEvent(new Event('input', { bubbles: true }));
8088                    console.log('Input cleared on $updated event');
8089                }
8090            }, 10);
8091        });
8092
8093        // Listen for any Livewire event and clear input
8094        Livewire.on('*', () => {
8095            // Clear input on any Livewire event
8096            setTimeout(() => {
8097                const chatInput = document.getElementById('chatbot-input');
8098                if (chatInput) {
8099                    chatInput.value = '';
8100                    chatInput.dispatchEvent(new Event('input', { bubbles: true }));
8101                }
8102            }, 5);
8103        });
8104    });
8105</script>
8105    
8106    <!-- Chatbot Event Handler -->
8107    
8107<script>
8108        document.addEventListener('DOMContentLoaded', function() {
8109            document.addEventListener('click', function(e) {
8110                if (
8111                    e.target.matches('[data-action="open-chatbot"]') ||
8112                    (e.target.closest('a') && e.target.closest('a').getAttribute('onclick') &&
8113                        e.target.closest('a').getAttribute('onclick').includes('open-chatbot'))
8114                ) {
8115                    e.preventDefault();
8116                    if (typeof Livewire !== 'undefined') {
8117                        Livewire.dispatch('open-chatbot');
8118                    }
8119                }
8120            });
8121        });
8122    </script>
8122
8123
8124    <!-- Livewire Scripts -->
8125    
8125<script src="/livewire/livewire.min.js?id=df3a17f2"   data-csrf="5K8PXh9ElWImVJ74vKxqWUDfz2VcHis0y2QM73Ci" data-update-uri="/livewire/update" data-navigate-once="true"></script>
8125
8126</body>
8127</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.