PageSourceSearch

https://stockfundoo.com/contact.html

html stockfundoo.com collected 2026-10-08 03:11:00 UTC 72,410 bytes, 1,208 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en" x-data="{ darkMode: false, mobileMenuOpen: false }" x-init="darkMode = localStorage.getItem('darkMode') === 'true' || (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)" :class="{ 'dark': darkMode }">
3<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
4<head>
5    <title>Contact Us - Stock-Funds</title>
6    <meta charset="UTF-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <meta name="csrf-token" content="N7hWsOsAfPMFl9b48KKdALba3IcHb4clpS5fcq39">
9    <meta name="robots" content="index, follow">
10    <meta name="apple-mobile-web-app-title" content="Stock-Funds">
11    <meta name="application-name" content="Stock-Funds">
12    <meta name="description" content="Swift and Secure Money Transfer to any UK bank account will become a breeze with Stock-Funds.">
13    <link rel="shortcut icon" href="png/a5yduxdnpqq620a2jyzm25nowudad8vkd5tztf1v.png">
14    
15    <!-- Dark mode initialization -->
16    
16<script>
17        const isDarkMode = localStorage.getItem('darkMode') === 'true' || 
18                          (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches);
19        
20        if (isDarkMode) {
21            document.documentElement.classList.add('dark');
22        }
23    </script>
23
24    
25
26    
27    <!-- Tailwind CSS with custom color variables -->
28    
28<script src="https://cdn.tailwindcss.com/?plugins=forms,typography,aspect-ratio,line-clamp"></script>
28
29    
29<script>
30        tailwind.config = {
31            darkMode: 'class',
32            theme: {
33                extend: {
34                    colors: {
35                        primary: { // Dynamic primary colors from appearance settings
36                            50: '#f0f9ff',
37                            100: '#e0f2fe',
38                            200: '#bae6fd',
39                            300: '#7dd3fc',
40                            400: '#38bdf8',
41                            DEFAULT: '#0ea5e9',
42                            500: '#0ea5e9',
43                            600: '#0284c7',
44                            700: '#0369a1',
45                            foreground: '#ffffff',
46                        },
47                        secondary: { // Dynamic secondary colors from appearance settings
48                            50: '#f8fafc',
49                            100: '#f1f5f9',
50                            200: '#e2e8f0',
51                            300: '#cbd5e1',
52                            400: '#94a3b8',
53                            DEFAULT: '#64748b',
54                            500: '#64748b',
55                            600: '#475569',
56                            700: '#334155',
57                            foreground: '#0f172a',
58                        },
59                        accent: { // Dynamic accent colors from appearance settings
60                            50: '#fdf2f8',
61                            100: '#fce7f3',
62                            200: '#fbcfe8',
63                            300: '#f9a8d4',
64                            400: '#f472b6',
65                            DEFAULT: '#ec4899',
66                            500: '#ec4899',
67                            600: '#db2777',
68                            700: '#be185d',
69                            foreground: '#ffffff',
70                        },
71                        background: '#f8fafc',
72                        foreground: '#1e293b',
73                        card: {
74                            DEFAULT: '#ffffff',
75                            foreground: '#1e293b',
76                        },
77                        muted: {
78                            DEFAULT: '#f1f5f9',
79                            foreground: '#64748b',
80                        },
81                        border: '#e2e8f0',
82                        input: '#e2e8f0',
83                        ring: '#0ea5e9',
84                        
85                        // Specific colors from original design for gradients/highlights
86                        'gradient-pink-from': '#ec4899',
87                        'gradient-purple-via': '#a855f7',
88                        'gradient-indigo-to': '#4f46e5',
89                        
90                        'mobile-header-bg': '#1e293b', // Dark slate for mobile top section
91                        'mobile-header-text': '#f1f5f9', // Light text for mobile top section
92                        
93                        'yellow-action': '#facc15',
94                        'green-positive': '#22c55e',
95                        'red-negative': '#ef4444',
96                    },
97                    boxShadow: {
98                        'soft': '0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)',
99                        'top': '0 -4px 12px -1px rgba(0,0,0,0.05), 0 -2px 8px -1px rgba(0,0,0,0.03)',
100                    },
101                    borderRadius: {
102                        lg: '0.75rem',
103                        xl: '0.75rem', 
104                        '2xl': '1rem',
105                        '3xl': '1.5rem',
106                    },
107                    keyframes: {
108                        pulse: {
109                          '0%, 100%': { transform: 'scale(1)', boxShadow: '0 0 0 0 rgba(14, 165, 233, 0.4)' }, // primary color
110                          '50%': { transform: 'scale(1.05)', boxShadow: '0 0 0 10px rgba(14, 165, 233, 0)' },
111                        },
112                        shine: { 
113                          '0%': { transform: 'translateX(-100%) translateY(-100%) rotate(45deg)' },
114                          '100%': { transform: 'translateX(100%) translateY(100%) rotate(45deg)' },
115                        },
116                        float: {
117                          '0%, 100%': { transform: 'translateY(0px)' },
118                          '50%': { transform: 'translateY(-10px)' },
119                        },
120                        'float-delayed': {
121                          '0%, 100%': { transform: 'translateY(0px) rotate(0deg)' },
122                          '50%': { transform: 'translateY(-15px) rotate(180deg)' },
123                        }
124                    },
125                    animation: {
126                        'pulse-slow': 'pulse 2.5s infinite',
127                        'shine-once': 'shine 1.5s ease-in-out',
128                        'float': 'float 3s ease-in-out infinite',
129                        'float-delayed': 'float-delayed 4s ease-in-out infinite',
130                    }
131                }
132            }
133        }
134    </script>
134
135    
136    <!-- Alpine.js -->
137    
137<script defer src="js/cdn.min.js"></script>
137
138    
139    <!-- Font Awesome -->
140    <link rel="stylesheet" href="css/all.css">
141    
142    <!-- External Fonts -->
143    <link rel="preconnect" href="https://fonts.googleapis.com/">
144    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
145    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&amp;display=swap" rel="stylesheet">
146    
147        
148        
149
150    
151    <style>
152        body {
153            font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
154            background-color: theme('colors.background');
155            color: theme('colors.foreground');
156        }
157
158        ::-webkit-scrollbar { width: 8px; height: 8px; }
159        ::-webkit-scrollbar-track { background: #e2e8f0; } /* slate-200 */
160        ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; } /* slate-400 */
161        ::-webkit-scrollbar-thumb:hover { background: #64748b; } /* slate-500 */
162
163        .dark ::-webkit-scrollbar-track { background: #374151; } /* gray-700 */
164        .dark ::-webkit-scrollbar-thumb { background: #6b7280; } /* gray-500 */
165        .dark ::-webkit-scrollbar-thumb:hover { background: #9ca3af; } /* gray-400 */
166
167        .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
168        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
169        .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; } /* slate-300 */
170        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* slate-400 */
171
172        .dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #6b7280; } /* gray-500 */
173        .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #9ca3af; } /* gray-400 */
174
175        .shine-effect-container { position: relative; overflow: hidden; }
176        .shine-effect {
177            position: absolute; top: -50%; left: -50%;
178            width: 200%; height: 200%;
179            background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
180            transform: rotate(45deg); opacity: 0; transition: opacity 0.5s;
181        }
182        .shine-effect-container:hover .shine-effect { opacity: 1; animation: shine-once 1.5s ease-in-out; }
183
184        .fade-in-section { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
185        .fade-in-section.is-visible { opacity: 1; transform: translateY(0); }
186
187        /* Floating elements animation */
188        .floating {
189            animation: float 3s ease-in-out infinite;
190        }
191        .floating-slow {
192            animation: float 6s ease-in-out infinite;
193        }
194        .floating-slower {
195            animation: float 8s ease-in-out infinite;
196        }
197        
198        /* Float keyframes */
199        @keyframes  float {
200            0%, 100% { transform: translateY(0px); }
201            50% { transform: translateY(-10px); }
202        }
203        
204        /* Float with delay */
205        .animate-float {
206            animation: float 4s ease-in-out infinite;
207        }
208        
209        .animate-float-delayed {
210            animation: float 6s ease-in-out infinite;
211            animation-delay: 1s;
212        }
213        
214        /* Interactive elements */
215        .input-wrapper {
216            position: relative;
217            transition: all 0.3s ease;
218        }
219        
220        .input-wrapper:focus-within {
221            transform: translateY(-2px);
222        }
223        
224        .input-icon {
225            position: absolute;
226            top: 50%;
227            transform: translateY(-50%);
228            left: 1rem;
229            color: #94a3b8;
230            transition: color 0.3s ease;
231        }
232        
233        .input-wrapper:focus-within .input-icon {
234            color: var(--primary-color);
235        }
236        
237        input:focus + .input-toggle {
238            color: var(--primary-color);
239        }
240        
241        .dark .input-icon {
242            color: #6b7280;
243        }
244        
245        /* Dark mode toggle button styling */
246        .dark-mode-toggle {
247            transition: all 0.3s ease;
248        }
249        
250        .dark-mode-toggle:hover {
251            transform: scale(1.1);
252        }
253
254        /* Gradient backgrounds */
255        .gradient-bg {
256            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
257        }
258        
259        .gradient-primary {
260            background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
261        }
262        
263        .gradient-secondary {
264            background: linear-gradient(135deg, #64748b 0%, #475569 100%);
265        }
266
267
268
269        /* Mobile Fixed Buttons */
270        .mobile-fixed-buttons {
271            position: fixed;
272            bottom: 0;
273            left: 0;
274            right: 0;
275            margin: 0 auto;
276            z-index: 50;
277            display: flex;
278        }
279
280        @media (min-width: 1024px) {
281            .mobile-fixed-buttons {
282                display: none;
283            }
284        }
285
286
287    </style>
288    <!-- Web Application Manifest -->
289<link rel="manifest" href="json/manifest.json">
290<!-- Chrome for Android theme color -->
291<meta name="theme-color" content="#000000">
292
293<!-- Add to homescreen for Chrome on Android -->
294<meta name="mobile-web-app-capable" content="yes">
295<meta name="application-name" content="Stock-Funds">
296<link rel="icon" sizes="512x512" href="png/icon-512x512.png">
297
298<!-- Add to homescreen for Safari on iOS -->
299<meta name="apple-mobile-web-app-capable" content="yes">
300<meta name="apple-mobile-web-app-status-bar-style" content="black">
301<meta name="apple-mobile-web-app-title" content="Stock-Funds">
302<link rel="apple-touch-icon" href="png/icon-512x512.png">
303
304
305<link href="png/splash-640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
306<link href="png/splash-750x1334.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
307<link href="png/splash-1242x2208.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
308<link href="png/splash-1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
309<link href="png/splash-828x1792.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
310<link href="png/splash-1242x2688.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
311<link href="png/splash-1536x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
312<link href="png/splash-1668x2224.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
313<link href="png/splash-1668x2388.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
314<link href="png/splash-2048x2732.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
315
316<!-- Tile for Win8 -->
317<meta name="msapplication-TileColor" content="#ffffff">
318<meta name="msapplication-TileImage" content="/images/icons/icon-512x512.png">
319
320<script type="text/javascript">
321    // Initialize the service worker
322    if ('serviceWorker' in navigator) {
323        navigator.serviceWorker.register('js/serviceworker.js', {
324            scope: '.'
325        }).then(function (registration) {
326            // Registration was successful
327            console.log('Laravel PWA: ServiceWorker registration successful with scope: ', registration.scope);
328        }, function (err) {
329            // registration failed :(
330            console.log('Laravel PWA: ServiceWorker registration failed: ', err);
331        });
332    }
333</script>
333</head>
334
335<body class="font-sans bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
336
337
338    <!-- Mobile Fixed Login/Register Buttons -->
339    <div class="mobile-fixed-buttons">
340        <a href="login.html" class="flex-1 px-6 py-3 bg-white/90 dark:bg-gray-800/90 backdrop-blur-xl text-primary-600 dark:text-primary-400 font-semibold shadow-lg border border-primary-200 dark:border-primary-700 hover:bg-primary-50 dark:hover:bg-gray-700 transition-colors text-center">
341            <i class="fa-solid fa-sign-in-alt mr-2"></i>
342            Login
343        </a>
344        <a href="register.html" class="flex-1 px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white font-semibold shadow-lg transition-colors text-center">
345            <i class="fa-solid fa-user-plus mr-2"></i>
346            Register
347        </a>
348    </div>
349
350
351
352    <!-- Navigation Header -->
353    <nav class="relative bg-gradient-to-r from-white via-primary-50 to-white dark:from-gray-900 dark:via-primary-900 dark:to-gray-900 backdrop-blur-xl border-b border-gradient-to-r from-transparent via-primary-200/50 to-transparent dark:border-primary-700/30 sticky top-0 z-50 shadow-lg shadow-primary-500/5">
354        <!-- Animated Background Pattern -->
355        <div class="absolute inset-0 overflow-hidden">
356            <div class="absolute -top-10 -left-10 w-20 h-20 bg-primary-200/20 dark:bg-primary-800/20 rounded-full blur-xl animate-pulse"></div>
357            <div class="absolute -top-5 right-1/4 w-16 h-16 bg-teal-200/20 dark:bg-teal-800/20 rounded-full blur-lg animate-pulse" style="animation-delay: 1s;"></div>
358            <div class="absolute -bottom-10 -right-10 w-24 h-24 bg-purple-200/20 dark:bg-purple-800/20 rounded-full blur-xl animate-pulse" style="animation-delay: 2s;"></div>
359        </div>
360        
361        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
362            <div class="flex justify-between items-center h-16 lg:h-18">
363                <!-- Logo with glow effect -->
364                <div class="flex items-center group">
365                    <div class="relative">
366                        <div class="absolute inset-0 bg-primary-400/20 rounded-xl blur-lg group-hover:bg-primary-400/30 transition-all duration-300"></div>
367                        <img src="png/nwer6fb5g6pfz6hmwywt8bmy0bui6pbuvzhad6ks.png" alt="Stock-Funds" class="relative h-10 lg:h-10 w-auto">
368                    </div>
369                </div>
370
371                <!-- Desktop Navigation with modern styling -->
372                <div class="hidden lg:flex items-center space-x-1">
373                    <a href="index.html" class="relative px-4 py-2 text-gray-700 dark:text-gray-300 font-medium transition-all duration-300 hover:text-primary-600 dark:hover:text-primary-400 group">
374                        <span class="relative z-10">Home</span>
375                        <div class="absolute inset-0 bg-primary-50 dark:bg-primary-900/30 rounded-xl scale-0 group-hover:scale-100 transition-transform duration-300 origin-center"></div>
376                    </a>
377                    <a href="other/about" class="relative px-4 py-2 text-gray-700 dark:text-gray-300 font-medium transition-all duration-300 hover:text-primary-600 dark:hover:text-primary-400 group">
378                        <span class="relative z-10">About</span>
379                        <div class="absolute inset-0 bg-primary-50 dark:bg-primary-900/30 rounded-xl scale-0 group-hover:scale-100 transition-transform duration-300 origin-center"></div>
380                    </a>
381                    <div class="relative group">
382                        <button class="relative px-4 py-2 text-gray-700 dark:text-gray-300 font-medium transition-all duration-300 hover:text-primary-600 dark:hover:text-primary-400 flex items-center">
383                            <span class="relative z-10">Services</span>
384                            <i class="fa-solid fa-chevron-down ml-1 text-xs group-hover:rotate-180 transition-transform duration-300"></i>
385                            <div class="absolute inset-0 bg-primary-50 dark:bg-primary-900/30 rounded-xl scale-0 group-hover:scale-100 transition-transform duration-300 origin-center"></div>
386                        </button>
387                        <!-- Services Dropdown -->
388                        <div class="absolute top-full left-0 mt-2 w-64 bg-white dark:bg-gray-800 rounded-2xl shadow-2xl border border-gray-200 dark:border-gray-700 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50">
389                            <div class="p-2">
390                                <a href="other/chart" class="flex items-center px-4 py-3 text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/30 rounded-xl transition-all duration-300">
391                                    <i class="fa-solid fa-user mr-3 text-primary-500"></i>
392                                    Personal Banking
393                                </a>
394                                <a href="other/alerts" class="flex items-center px-4 py-3 text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/30 rounded-xl transition-all duration-300">
395                                    <i class="fa-solid fa-briefcase mr-3 text-blue-500"></i>
396                                    Business Banking
397                                </a>
398                                <a href="other/send-money" class="flex items-center px-4 py-3 text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/30 rounded-xl transition-all duration-300">
399                                    <i class="fa-solid fa-handshake mr-3 text-green-500"></i>
400                                    Loans & Credit
401                                </a>
402                                <a href="other/cards" class="flex items-center px-4 py-3 text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/30 rounded-xl transition-all duration-300">
403                                    <i class="fa-solid fa-credit-card mr-3 text-purple-500"></i>
404                                    Cards
405                                </a>
406                                <a href="other/grants" class="flex items-center px-4 py-3 text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/30 rounded-xl transition-all duration-300">
407                                    <i class="fa-solid fa-hand-holding-dollar mr-3 text-orange-500"></i>
408                                    Grants & Aid
409                                </a>
410                            </div>
411                        </div>
412                    </div>
413                    <a href="contact.html" class="relative px-4 py-2 text-gray-700 dark:text-gray-300 font-medium transition-all duration-300 hover:text-primary-600 dark:hover:text-primary-400 group">
414                        <span class="relative z-10">Contact</span>
415                        <div class="absolute inset-0 bg-primary-50 dark:bg-primary-900/30 rounded-xl scale-0 group-hover:scale-100 transition-transform duration-300 origin-center"></div>
416                    </a>
417                </div>
418
419                <!-- Desktop Action Buttons with enhanced styling -->
420                <div class="hidden lg:flex items-center space-x-3">
421                    
422
423                    <!-- Dark Mode Toggle with animation -->
424                    <button @click="darkMode = !darkMode; localStorage.setItem('darkMode', darkMode)" 
425                            class="relative p-3 rounded-2xl bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700 text-gray-600 dark:text-gray-300 hover:from-primary-50 hover:to-primary-100 dark:hover:from-primary-900/30 dark:hover:to-primary-800/30 transition-all duration-300 shadow-lg hover:shadow-xl hover:-translate-y-0.5 group">
426                        <i class="fa-solid fa-sun text-lg group-hover:rotate-180 transition-transform duration-500" x-show="darkMode"></i>
427                        <i class="fa-solid fa-moon text-lg group-hover:rotate-12 transition-transform duration-300" x-show="!darkMode"></i>
428                    </button>
429                    
430                    <!-- Login Button with hover effects -->
431                    <a href="login.html" class="relative px-4 py-2.5 text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-semibold transition-all duration-300 group">
432                        <span class="relative z-10">Login</span>
433                        <div class="absolute inset-0 bg-gradient-to-r from-primary-50 to-primary-100 dark:from-primary-900/30 dark:to-primary-800/30 rounded-xl scale-0 group-hover:scale-100 transition-transform duration-300"></div>
434                    </a>
435                    
436                    <!-- Open Account Button with premium styling -->
437                    <a href="register.html" class="relative px-6 py-2.5 bg-gradient-to-r from-primary-600 via-primary-500 to-primary-600 hover:from-primary-700 hover:via-primary-600 hover:to-primary-700 text-white font-semibold rounded-2xl transition-all duration-300 shadow-lg shadow-primary-600/25 hover:shadow-xl hover:shadow-primary-600/40 hover:-translate-y-0.5 group overflow-hidden">
438                        <span class="relative z-10 flex items-center">
439                            <i class="fa-solid fa-sparkles mr-2 group-hover:animate-spin"></i>
440                            Open Account
441                        </span>
442                        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700"></div>
443                    </a>
444                </div>
445
446                <!-- Mobile Menu Button with modern design -->
447                <button @click="mobileMenuOpen = !mobileMenuOpen" class="lg:hidden relative p-3 rounded-2xl bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700 text-gray-600 dark:text-gray-300 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-0.5">
448                    <i class="fa-solid fa-bars text-lg transition-transform duration-300" x-show="!mobileMenuOpen" :class="{'rotate-180': mobileMenuOpen}"></i>
449                    <i class="fa-solid fa-times text-lg transition-transform duration-300" x-show="mobileMenuOpen" :class="{'rotate-180': !mobileMenuOpen}"></i>
450                </button>
451            </div>
452        </div>
453
454        <!-- Enhanced Mobile Menu -->
455        <div x-show="mobileMenuOpen" 
456             x-transition:enter="transition ease-out duration-300"
457             x-transition:enter-start="opacity-0 -translate-y-4"
458             x-transition:enter-end="opacity-1 translate-y-0"
459             x-transition:leave="transition ease-in duration-200"
460             x-transition:leave-start="opacity-1 translate-y-0"
461             x-transition:leave-end="opacity-0 -translate-y-4"
462             class="lg:hidden absolute top-full left-0 right-0 bg-gradient-to-br from-white via-primary-50 to-white dark:from-gray-900 dark:via-primary-900 dark:to-gray-900 backdrop-blur-xl border-t border-primary-200/70 dark:border-primary-700/50 shadow-2xl shadow-primary-500/20">
463            
464            <!-- Mobile menu background pattern -->
465            <div class="absolute inset-0 overflow-hidden">
466                <div class="absolute top-0 left-1/4 w-32 h-32 bg-primary-200/20 dark:bg-primary-800/20 rounded-full blur-2xl"></div>
467                <div class="absolute bottom-0 right-1/4 w-24 h-24 bg-teal-200/20 dark:bg-teal-800/20 rounded-full blur-xl"></div>
468            </div>
469            
470            <div class="relative px-6 py-6 space-y-2">
471                <!-- Navigation Links with enhanced styling -->
472                <a href="index.html" class="flex items-center px-4 py-3 text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 font-medium transition-all duration-300 rounded-2xl hover:bg-gradient-to-r hover:from-primary-50 hover:to-primary-100 dark:hover:from-primary-900/30 dark:hover:to-primary-800/30 hover:shadow-lg hover:translate-x-2 group">
473                    <i class="fa-solid fa-home mr-4 text-primary-500 group-hover:scale-110 transition-transform duration-300"></i>
474                    <span>Home</span>
475                    <i class="fa-solid fa-chevron-right ml-auto text-xs opacity-0 group-hover:opacity-100 transition-all duration-300"></i>
476                </a>
477                <a href="other/about" class="flex items-center px-4 py-3 text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 font-medium transition-all duration-300 rounded-2xl hover:bg-gradient-to-r hover:from-primary-50 hover:to-primary-100 dark:hover:from-primary-900/30 dark:hover:to-primary-800/30 hover:shadow-lg hover:translate-x-2 group">
478                    <i class="fa-solid fa-info-circle mr-4 text-teal-500 group-hover:scale-110 transition-transform duration-300"></i>
479                    <span>About</span>
480                    <i class="fa-solid fa-chevron-right ml-auto text-xs opacity-0 group-hover:opacity-100 transition-all duration-300"></i>
481                </a>
482                
483                <!-- Services Submenu -->
484                <div x-data="{ servicesOpen: false }" class="space-y-2">
485                    <button @click="servicesOpen = !servicesOpen" class="flex items-center w-full px-4 py-3 text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 font-medium transition-all duration-300 rounded-2xl hover:bg-gradient-to-r hover:from-primary-50 hover:to-primary-100 dark:hover:from-primary-900/30 dark:hover:to-primary-800/30 hover:shadow-lg hover:translate-x-2 group">
486                        <i class="fa-solid fa-cogs mr-4 text-purple-500 group-hover:scale-110 transition-transform duration-300"></i>
487                        <span>Services</span>
488                        <i class="fa-solid fa-chevron-down ml-auto text-xs transition-transform duration-300" :class="{ 'rotate-180': servicesOpen }"></i>
489                    </button>
490                    <div x-show="servicesOpen" x-transition class="ml-8 space-y-1">
491                        <a href="other/chart" class="flex items-center px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 text-sm transition-all duration-300 rounded-xl hover:bg-gradient-to-r hover:from-primary-50 hover:to-primary-100 dark:hover:from-primary-900/30 dark:hover:to-primary-800/30">
492                            <i class="fa-solid fa-user mr-3 text-primary-400"></i>
493                            Personal Banking
494                        </a>
495                        <a href="other/alerts" class="flex items-center px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 text-sm transition-all duration-300 rounded-xl hover:bg-gradient-to-r hover:from-primary-50 hover:to-primary-100 dark:hover:from-primary-900/30 dark:hover:to-primary-800/30">
496                            <i class="fa-solid fa-briefcase mr-3 text-blue-400"></i>
497                            Business Banking
498                        </a>
499                        <a href="other/send-money" class="flex items-center px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 text-sm transition-all duration-300 rounded-xl hover:bg-gradient-to-r hover:from-primary-50 hover:to-primary-100 dark:hover:from-primary-900/30 dark:hover:to-primary-800/30">
500                            <i class="fa-solid fa-handshake mr-3 text-green-400"></i>
501                            Loans & Credit
502                        </a>
503                        <a href="other/cards" class="flex items-center px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 text-sm transition-all duration-300 rounded-xl hover:bg-gradient-to-r hover:from-primary-50 hover:to-primary-100 dark:hover:from-primary-900/30 dark:hover:to-primary-800/30">
504                            <i class="fa-solid fa-credit-card mr-3 text-purple-400"></i>
505                            Cards
506                        </a>
507                        <a href="other/grants" class="flex items-center px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 text-sm transition-all duration-300 rounded-xl hover:bg-gradient-to-r hover:from-primary-50 hover:to-primary-100 dark:hover:from-primary-900/30 dark:hover:to-primary-800/30">
508                            <i class="fa-solid fa-hand-holding-dollar mr-3 text-orange-400"></i>
509                            Grants & Aid
510                        </a>
511                    </div>
512                </div>
513                
514                <a href="contact.html" class="flex items-center px-4 py-3 text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 font-medium transition-all duration-300 rounded-2xl hover:bg-gradient-to-r hover:from-primary-50 hover:to-primary-100 dark:hover:from-primary-900/30 dark:hover:to-primary-800/30 hover:shadow-lg hover:translate-x-2 group">
515                    <i class="fa-solid fa-envelope mr-4 text-orange-500 group-hover:scale-110 transition-transform duration-300"></i>
516                    <span>Contact</span>
517                    <i class="fa-solid fa-chevron-right ml-auto text-xs opacity-0 group-hover:opacity-100 transition-all duration-300"></i>
518                </a>
519                
520                <!-- Additional Mobile Links -->
521                <a href="apps.html" class="flex items-center px-4 py-3 text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 font-medium transition-all duration-300 rounded-2xl hover:bg-gradient-to-r hover:from-primary-50 hover:to-primary-100 dark:hover:from-primary-900/30 dark:hover:to-primary-800/30 hover:shadow-lg hover:translate-x-2 group">
522                    <i class="fa-solid fa-mobile-alt mr-4 text-indigo-500 group-hover:scale-110 transition-transform duration-300"></i>
523                    <span>Mobile App</span>
524                    <i class="fa-solid fa-chevron-right ml-auto text-xs opacity-0 group-hover:opacity-100 transition-all duration-300"></i>
525                </a>
526                
527                <!-- Enhanced Dark Mode Toggle for Mobile -->
528                <div class="pt-4 mt-4 border-t border-primary-700/50">
529                    
530
531                    <button @click="darkMode = !darkMode; localStorage.setItem('darkMode', darkMode)" 
532                            class="flex items-center w-full px-4 py-3 text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 font-medium transition-all duration-300 rounded-2xl hover:bg-gradient-to-r hover:from-primary-50 hover:to-primary-100 dark:hover:from-primary-900/30 dark:hover:to-primary-800/30 hover:shadow-lg hover:translate-x-2 group">
533                        <div class="flex items-center justify-center w-8 h-8 mr-4 rounded-xl bg-gradient-to-br from-yellow-400 to-orange-500 dark:from-blue-500 dark:to-purple-600 group-hover:scale-110 transition-transform duration-300">
534                            <i class="fa-solid fa-sun text-white text-sm group-hover:rotate-180 transition-transform duration-500" x-show="darkMode"></i>
535                            <i class="fa-solid fa-moon text-white text-sm group-hover:rotate-12 transition-transform duration-300" x-show="!darkMode"></i>
536                        </div>
537                        <span x-text="darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'"></span>
538                        <i class="fa-solid fa-chevron-right ml-auto text-xs opacity-0 group-hover:opacity-100 transition-all duration-300"></i>
539                    </button>
540                </div>
541            </div>
542        </div>
543    </nav>
544
545    <!-- Contact Hero Section -->
546<section class="relative py-16 lg:py-20 bg-gradient-to-br from-slate-900 via-primary-900 to-gray-900 dark:from-gray-900 dark:via-primary-900 dark:to-black overflow-hidden">
547    <!-- Background Effects -->
548    <div class="absolute inset-0">
549        <div class="absolute inset-0 opacity-10">
550            <div class="absolute top-0 left-0 w-full h-full" style="background-image: radial-gradient(circle at 25% 25%, #ffffff 1px, transparent 1px), radial-gradient(circle at 75% 75%, #ffffff 1px, transparent 1px); background-size: 60px 60px; animation: float 20s ease-in-out infinite;"></div>
551        </div>
552        <div class="absolute top-20 left-20 w-96 h-96 bg-primary-500/20 rounded-full blur-3xl animate-pulse"></div>
553        <div class="absolute bottom-20 right-20 w-80 h-80 bg-teal-500/20 rounded-full blur-3xl animate-pulse delay-1000"></div>
554    </div>
555    
556    <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
557        <div class="text-center mb-12">
558            <div class="inline-flex items-center px-4 py-2 bg-white/10 backdrop-blur-sm text-white/90 rounded-full text-sm font-semibold mb-6 border border-white/20">
559                <i class="fa-solid fa-phone-volume mr-2 animate-pulse"></i>
560                Get In Touch
561            </div>
562            <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-4">
563                Contact Us
564            </h1>
565            <p class="text-xl text-gray-300 max-w-3xl mx-auto">
566                We're here to help with all your banking needs. Reach out to us anytime.
567            </p>
568        </div>
569    </div>
570</section>
571
572<!-- Contact Form & Info Section -->
573<section class="py-16 bg-white dark:bg-gray-900">
574    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
575        <div class="grid lg:grid-cols-2 gap-12">
576            <!-- Contact Form -->
577            <div class="bg-gray-50 dark:bg-gray-800 rounded-2xl p-8">
578                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Send us a Message</h2>
579                
580                <form action="https://www.stock-funds.online/homesendcontact" method="POST" class="space-y-6">
581                    <input type="hidden" name="_token" value="N7hWsOsAfPMFl9b48KKdALba3IcHb4clpS5fcq39">                    <div class="grid md:grid-cols-2 gap-6">
582                        <div>
583                            <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Full Name</label>
584                            <input type="text" id="name" name="name" required 
585                                   class="w-full px-4 py-3 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-transparent">
586                        </div>
587                        <div>
588                            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
589                            <input type="email" id="email" name="email" required 
590                                   class="w-full px-4 py-3 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-transparent">
591                        </div>
592                    </div>
593                    
594                    <div>
595                        <label for="subject" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Subject</label>
596                        <input type="text" id="subject" name="subject" required 
597                               class="w-full px-4 py-3 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-transparent">
598                    </div>
599                    
600                    <div>
601                        <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Message</label>
602                        <textarea id="message" name="message" rows="6" required 
603                                  class="w-full px-4 py-3 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-transparent"></textarea>
604                    </div>
605                    
606                    <button type="submit" 
607                            class="w-full bg-primary-600 hover:bg-primary-700 text-white font-bold py-4 px-6 rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl hover:-translate-y-1">
608                        <i class="fa-solid fa-paper-plane mr-2"></i>
609                        Send Message
610                    </button>
611                </form>
612            </div>
613
614            <!-- Contact Information -->
615            <div class="space-y-8">
616                <div>
617                    <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Get in Touch</h2>
618                    <p class="text-gray-600 dark:text-gray-300 mb-8">
619                        Have questions about our services? Need help with your account? Our team is ready to assist you.
620                    </p>
621                </div>
622
623                <div class="space-y-6">
624                    <!-- Phone -->
625                    <div class="flex items-start space-x-4">
626                        <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
627                            <i class="fa-solid fa-phone text-primary-600 dark:text-primary-400"></i>
628                        </div>
629                        <div>
630                            <h3 class="font-semibold text-gray-900 dark:text-white mb-1">Phone</h3>
631                            <p class="text-gray-600 dark:text-gray-300">1-800-BANKING</p>
632                            <p class="text-sm text-gray-500 dark:text-gray-400">Available 24/7</p>
633                        </div>
634                    </div>
635
636                    <!-- Email -->
637                    <div class="flex items-start space-x-4">
638                        <div class="w-12 h-12 bg-teal-100 dark:bg-teal-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
639                            <i class="fa-solid fa-envelope text-teal-600 dark:text-teal-400"></i>
640                        </div>
641                        <div>
642                            <h3 class="font-semibold text-gray-900 dark:text-white mb-1">Email</h3>
643                            <p class="text-gray-600 dark:text-gray-300">[email protected]</p>
644                            <p class="text-sm text-gray-500 dark:text-gray-400">Response within 24 hours</p>
645                        </div>
646                    </div>
647
648                    <!-- Address -->
649                    <div class="flex items-start space-x-4">
650                        <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
651                            <i class="fa-solid fa-map-marker-alt text-purple-600 dark:text-purple-400"></i>
652                        </div>
653                        <div>
654                            <h3 class="font-semibold text-gray-900 dark:text-white mb-1">Visit Us</h3>
655                            <p class="text-gray-600 dark:text-gray-300">
656                                123 Banking Street<br>
657                                Financial District<br>
658                                New York, NY 10001
659                            </p>
660                        </div>
661                    </div>
662
663                    <!-- Hours -->
664                    <div class="flex items-start space-x-4">
665                        <div class="w-12 h-12 bg-orange-100 dark:bg-orange-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
666                            <i class="fa-solid fa-clock text-orange-600 dark:text-orange-400"></i>
667                        </div>
668                        <div>
669                            <h3 class="font-semibold text-gray-900 dark:text-white mb-1">Banking Hours</h3>
670                            <p class="text-gray-600 dark:text-gray-300">
671                                Mon-Fri: 9AM-5PM<br>
672                                Sat: 9AM-1PM<br>
673                                Sun: Closed
674                            </p>
675                        </div>
676                    </div>
677                </div>
678            </div>
679        </div>
680    </div>
681</section>
682
683<!-- Map Section (Optional) -->
684<section class="py-16 bg-gray-50 dark:bg-gray-800">
685    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
686        <div class="text-center mb-8">
687            <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Find Our Locations</h2>
688            <p class="text-gray-600 dark:text-gray-300">Visit any of our convenient branch locations</p>
689        </div>
690        
691        <div class="bg-gray-300 dark:bg-gray-700 rounded-2xl h-96 flex items-center justify-center">
692            <div class="text-center">
693                <i class="fa-solid fa-map text-4xl text-gray-500 dark:text-gray-400 mb-4"></i>
694                <p class="text-gray-600 dark:text-gray-300">Interactive map would be integrated here</p>
695            </div>
696        </div>
697    </div>
698</section>
699    
700    <!-- Enhanced Footer -->
701    <footer class="relative bg-gradient-to-br from-slate-900 via-primary-900 to-slate-900 dark:from-gray-900 dark:via-primary-900 dark:to-gray-900 text-white py-16 mb-20 lg:mb-0 overflow-hidden">
702        <!-- Animated background elements -->
703        <div class="absolute inset-0 overflow-hidden">
704            <div class="absolute -top-20 -left-20 w-40 h-40 bg-primary-600/20 rounded-full blur-3xl animate-pulse"></div>
705            <div class="absolute top-1/2 -right-20 w-32 h-32 bg-teal-500/20 rounded-full blur-2xl animate-pulse" style="animation-delay: 1s;"></div>
706            <div class="absolute -bottom-20 left-1/3 w-36 h-36 bg-purple-600/20 rounded-full blur-3xl animate-pulse" style="animation-delay: 2s;"></div>
707            
708            <!-- Floating geometric shapes -->
709            <div class="absolute top-10 right-1/4 w-4 h-4 bg-white/10 rotate-45 animate-bounce" style="animation-delay: 0.5s;"></div>
710            <div class="absolute bottom-1/4 left-1/4 w-3 h-3 bg-primary-300/30 rounded-full animate-bounce" style="animation-delay: 1.5s;"></div>
711            <div class="absolute top-1/3 left-1/2 w-2 h-2 bg-teal-400/40 rotate-45 animate-bounce" style="animation-delay: 2.5s;"></div>
712        </div>
713        
714        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
715            <!-- Main Footer Content -->
716            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
717                <!-- Company Info with enhanced styling -->
718                <div class="lg:col-span-1">
719                    <div class="group mb-6">
720                        <div class="relative inline-block">
721                            <div class="absolute inset-0 bg-white/20 rounded-2xl blur-lg group-hover:bg-white/30 transition-all duration-300"></div>
722                            <img src="png/nwer6fb5g6pfz6hmwywt8bmy0bui6pbuvzhad6ks.png" alt="Stock-Funds" class="relative h-10 w-auto">
723                        </div>
724                    </div>
725                    <p class="text-primary-100 mb-6 text-sm leading-relaxed">
726                        Building financial strength together with personalized banking solutions for every member. Your trusted partner in financial growth.
727                    </p>
728                    
729                    <!-- Enhanced Social Links -->
730                    <div class="flex space-x-3">
731                        <a href="#" class="group relative w-10 h-10 bg-gradient-to-br from-primary-600 to-primary-700 hover:from-blue-600 hover:to-blue-700 rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-110 hover:-translate-y-1 shadow-lg hover:shadow-xl">
732                            <i class="fa-brands fa-facebook-f text-sm group-hover:scale-110 transition-transform duration-300"></i>
733                            <div class="absolute inset-0 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
734                        </a>
735                        <a href="#" class="group relative w-10 h-10 bg-gradient-to-br from-primary-600 to-primary-700 hover:from-sky-500 hover:to-sky-600 rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-110 hover:-translate-y-1 shadow-lg hover:shadow-xl">
736                            <i class="fa-brands fa-twitter text-sm group-hover:scale-110 transition-transform duration-300"></i>
737                            <div class="absolute inset-0 bg-gradient-to-br from-sky-400 to-sky-500 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
738                        </a>
739                        <a href="#" class="group relative w-10 h-10 bg-gradient-to-br from-primary-600 to-primary-700 hover:from-blue-700 hover:to-blue-800 rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-110 hover:-translate-y-1 shadow-lg hover:shadow-xl">
740                            <i class="fa-brands fa-linkedin-in text-sm group-hover:scale-110 transition-transform duration-300"></i>
741                            <div class="absolute inset-0 bg-gradient-to-br from-blue-600 to-blue-700 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
742                        </a>
743                        <a href="#" class="group relative w-10 h-10 bg-gradient-to-br from-primary-600 to-primary-700 hover:from-pink-600 hover:to-pink-700 rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-110 hover:-translate-y-1 shadow-lg hover:shadow-xl">
744                            <i class="fa-brands fa-instagram text-sm group-hover:scale-110 transition-transform duration-300"></i>
745                            <div class="absolute inset-0 bg-gradient-to-br from-pink-500 to-pink-600 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
746                        </a>
747                    </div>
748                </div>
749
750                <!-- Quick Links with modern styling -->
751                <div>
752                    <h4 class="font-bold mb-6 text-white flex items-center">
753                        <div class="w-1 h-6 bg-gradient-to-b from-primary-400 to-primary-600 rounded-full mr-3"></div>
754                        Quick Links
755                    </h4>
756                    <ul class="space-y-3">
757                        <li><a href="other/about" class="group flex items-center text-primary-100 hover:text-white transition-all duration-300 text-sm">
758                            <i class="fa-solid fa-chevron-right text-xs mr-3 text-primary-400 group-hover:translate-x-1 transition-transform duration-300"></i>
759                            <span class="group-hover:translate-x-1 transition-transform duration-300">About Us</span>
760                        </a></li>
761                        <li><a href="other/chart" class="group flex items-center text-primary-100 hover:text-white transition-all duration-300 text-sm">
762                            <i class="fa-solid fa-chevron-right text-xs mr-3 text-primary-400 group-hover:translate-x-1 transition-transform duration-300"></i>
763                            <span class="group-hover:translate-x-1 transition-transform duration-300">Services</span>
764                        </a></li>
765                        <li><a href="other/grants" class="group flex items-center text-primary-100 hover:text-white transition-all duration-300 text-sm">
766                            <i class="fa-solid fa-chevron-right text-xs mr-3 text-primary-400 group-hover:translate-x-1 transition-transform duration-300"></i>
767                            <span class="group-hover:translate-x-1 transition-transform duration-300">Grants & Aid</span>
768                        </a></li>
769                        <li><a href="contact.html" class="group flex items-center text-primary-100 hover:text-white transition-all duration-300 text-sm">
770                            <i class="fa-solid fa-chevron-right text-xs mr-3 text-primary-400 group-hover:translate-x-1 transition-transform duration-300"></i>
771                            <span class="group-hover:translate-x-1 transition-transform duration-300">Contact</span>
772                        </a></li>
773                    </ul>
774                </div>
775
776                <!-- Services -->
777                <div>
778                    <h4 class="font-bold mb-6 text-white flex items-center">
779                        <div class="w-1 h-6 bg-gradient-to-b from-teal-400 to-teal-600 rounded-full mr-3"></div>
780                        Services
781                    </h4>
782                    <ul class="space-y-3">
783                        <li><a href="other/chart" class="group flex items-center text-primary-100 hover:text-white transition-all duration-300 text-sm">
784                            <i class="fa-solid fa-chevron-right text-xs mr-3 text-teal-400 group-hover:translate-x-1 transition-transform duration-300"></i>
785                            <span class="group-hover:translate-x-1 transition-transform duration-300">Personal Banking</span>
786                        </a></li>
787                        <li><a href="other/alerts" class="group flex items-center text-primary-100 hover:text-white transition-all duration-300 text-sm">
788                            <i class="fa-solid fa-chevron-right text-xs mr-3 text-teal-400 group-hover:translate-x-1 transition-transform duration-300"></i>
789                            <span class="group-hover:translate-x-1 transition-transform duration-300">Business Banking</span>
790                        </a></li>
791                        <li><a href="other/send-money" class="group flex items-center text-primary-100 hover:text-white transition-all duration-300 text-sm">
792                            <i class="fa-solid fa-chevron-right text-xs mr-3 text-teal-400 group-hover:translate-x-1 transition-transform duration-300"></i>
793                            <span class="group-hover:translate-x-1 transition-transform duration-300">Loans & Credit</span>
794                        </a></li>
795                        <li><a href="other/cards" class="group flex items-center text-primary-100 hover:text-white transition-all duration-300 text-sm">
796                            <i class="fa-solid fa-chevron-right text-xs mr-3 text-teal-400 group-hover:translate-x-1 transition-transform duration-300"></i>
797                            <span class="group-hover:translate-x-1 transition-transform duration-300">Cards</span>
798                        </a></li>
799                    </ul>
800                </div>
801
802                <!-- Member Services -->
803                <div>
804                    <h4 class="font-bold mb-6 text-white flex items-center">
805                        <div class="w-1 h-6 bg-gradient-to-b from-purple-400 to-purple-600 rounded-full mr-3"></div>
806                        Member Services
807                    </h4>
808                    <ul class="space-y-3">
809                        <li><a href="login.html" class="group flex items-center text-primary-100 hover:text-white transition-all duration-300 text-sm">
810                            <i class="fa-solid fa-chevron-right text-xs mr-3 text-purple-400 group-hover:translate-x-1 transition-transform duration-300"></i>
811                            <span class="group-hover:translate-x-1 transition-transform duration-300">Online Banking</span>
812                        </a></li>
813                        <li><a href="apps.html" class="group flex items-center text-primary-100 hover:text-white transition-all duration-300 text-sm">
814                            <i class="fa-solid fa-chevron-right text-xs mr-3 text-purple-400 group-hover:translate-x-1 transition-transform duration-300"></i>
815                            <span class="group-hover:translate-x-1 transition-transform duration-300">Mobile App</span>
816                        </a></li>
817                        <li><a href="contact.html" class="group flex items-center text-primary-100 hover:text-white transition-all duration-300 text-sm">
818                            <i class="fa-solid fa-chevron-right text-xs mr-3 text-purple-400 group-hover:translate-x-1 transition-transform duration-300"></i>
819                            <span class="group-hover:translate-x-1 transition-transform duration-300">ATM Locations</span>
820                        </a></li>
821                        <li><a href="verify.html" class="group flex items-center text-primary-100 hover:text-white transition-all duration-300 text-sm">
822                            <i class="fa-solid fa-chevron-right text-xs mr-3 text-purple-400 group-hover:translate-x-1 transition-transform duration-300"></i>
823                            <span class="group-hover:translate-x-1 transition-transform duration-300">Security Center</span>
824                        </a></li>
825                    </ul>
826                </div>
827            </div>
828
829            <!-- Bottom Footer with enhanced styling -->
830            <div class="border-t border-primary-700/50 pt-8">
831                <div class="flex flex-col lg:flex-row justify-between items-center space-y-4 lg:space-y-0">
832                    <div class="flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 sm:space-x-6">
833                        <p class="text-primary-100 text-sm">
834                            © 2026 Stock-Funds. All rights reserved.
835                        </p>
836                        <div class="flex items-center space-x-2 text-primary-200 text-xs">
837                            <i class="fa-solid fa-shield-alt text-green-400"></i>
838                            <span>FDIC Insured</span>
839                            <span class="text-primary-400">•</span>
840                            <i class="fa-solid fa-lock text-blue-400"></i>
841                            <span>256-bit SSL</span>
842                        </div>
843                    </div>
844                    <div class="flex flex-wrap justify-center lg:justify-end space-x-6">
845                        <a href="privacy.html" class="text-primary-100 hover:text-white text-sm transition-colors duration-300 hover:underline">Privacy Policy</a>
846                        <a href="terms-of-service.html" class="text-primary-100 hover:text-white text-sm transition-colors duration-300 hover:underline">Terms of Service</a>
847                        <a href="contact.html" class="text-primary-100 hover:text-white text-sm transition-colors duration-300 hover:underline">Accessibility</a>
848                        <a href="index.html" class="text-primary-100 hover:text-white text-sm transition-colors duration-300 hover:underline">Sitemap</a>
849                    </div>
850                </div>
851            </div>
852                 </div>
853     </footer>
854
855     <!-- Mobile Fixed Login/Register Buttons -->
856    <div class="mobile-fixed-buttons">
857        <a href="login.html" class="flex-1 px-6 py-3 bg-white/90 dark:bg-gray-800/90 backdrop-blur-xl text-primary-600 dark:text-primary-400 font-semibold shadow-lg border border-primary-200 dark:border-primary-700 hover:bg-primary-50 dark:hover:bg-gray-700 transition-colors text-center">
858            <i class="fa-solid fa-sign-in-alt mr-2"></i>
859            Login
860        </a>
861        <a href="register.html" class="flex-1 px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white font-semibold shadow-lg transition-colors text-center">
862            <i class="fa-solid fa-user-plus mr-2"></i>
863            Register
864        </a>
865    </div>
866     
867     <!-- Additional Scripts -->
868     
869     <!-- Language Translation Script -->
870     
870<script type="text/javascript">
871         let currentLanguage = 'en';
872         
873         function changeLanguage(langCode) {
874             if (langCode === currentLanguage) return;
875             
876             currentLanguage = langCode;
877             updateFlagDisplay(langCode);
878             
879             // Store language preference
880             localStorage.setItem('selectedLanguage', langCode);
881             
882             // Use Microsoft Translator (more reliable than Google)
883             if (langCode === 'en') {
884                 // Reset to original language
885                 location.reload();
886             } else {
887                 // Redirect to Microsoft Translator
888                 const currentUrl = encodeURIComponent(window.location.href);
889                 const translateUrl = `https://www.microsofttranslator.com/bv.aspx?from=en&to=${langCode}&a=${currentUrl}`;
890                 window.open(translateUrl, '_blank');
891             }
892         }
893         
894         function updateFlagDisplay(langCode) {
895             const flags = {
896                 'en': '🇺🇸',
897                 'es': '🇪🇸', 
898                 'fr': '🇫🇷',
899                 'de': '🇩🇪',
900                 'it': '🇮🇹',
901                 'pt': '🇵🇹'
902             };
903             
904             // Update desktop flag
905             const desktopFlag = document.querySelector('.relative.group button span');
906             if (desktopFlag && flags[langCode]) {
907                 desktopFlag.textContent = flags[langCode];
908             }
909             
910             // Update mobile flag  
911             const mobileFlag = document.querySelector('[x-data*="languageOpen"] .bg-gradient-to-br span');
912             if (mobileFlag && flags[langCode]) {
913                 mobileFlag.textContent = flags[langCode];
914             }
915         }
916         
917         // Simple client-side translation using MyMemory API (free)
918         async function translatePage(langCode) {
919             if (langCode === 'en') {
920                 location.reload();
921                 return;
922             }
923             
924             try {
925                 // Show loading indicator
926                 showTranslationLoading();
927                 
928                 // Get all translatable text elements
929                 const textElements = document.querySelectorAll('h1, h2, h3, h4, h5, h6, p, span:not(.no-translate), button:not(.no-translate), a:not(.no-translate), div:not(.no-translate)');
930                 const textsToTranslate = [];
931                 
932                 textElements.forEach(element => {
933                     const text = element.textContent.trim();
934                     // Skip if empty, is a number, contains only symbols, or is marked as no-translate
935                     if (text && 
936                         text.length > 1 && 
937                         !element.classList.contains('no-translate') &&
938                         !element.closest('.no-translate') &&
939                         !/^[\d\s\$\€\£\¥\+\-\*\/\=\(\)\[\]\{\}\<\>\|\\\^\~\`\!\@\#\%\&\_\?\.\,\;\:\"\']+$/.test(text) &&
940                         !element.querySelector('input, select, textarea, img, svg') &&
941                         element.children.length === 0) {
942                         
943                         textsToTranslate.push({
944                             element: element,
945                             originalText: text
946                         });
947                     }
948                 });
949                 
950                 // Translate in batches to avoid API limits
951                 const batchSize = 10;
952                 for (let i = 0; i < textsToTranslate.length; i += batchSize) {
953                     const batch = textsToTranslate.slice(i, i + batchSize);
954                     await translateBatch(batch, langCode);
955                     
956                     // Small delay between batches
957                     if (i + batchSize < textsToTranslate.length) {
958                         await new Promise(resolve => setTimeout(resolve, 500));
959                     }
960                 }
961                 
962                 hideTranslationLoading();
963                 
964             } catch (error) {
965                 console.error('Translation error:', error);
966                 hideTranslationLoading();
967                 alert('translation%20service%20is%20currently%20unavailable.%20please%20try%20again%20later.html');
968             }
969         }
970         
971         async function translateBatch(batch, langCode) {
972             for (const item of batch) {
973                 try {
974                     const translatedText = await translateText(item.originalText, langCode);
975                     if (translatedText && translatedText !== item.originalText) {
976                         item.element.textContent = translatedText;
977                     }
978                 } catch (error) {
979                     console.error('Error translating text:', error);
980                     // Continue with next item if one fails
981                 }
982             }
983         }
984         
985         async function translateText(text, targetLang) {
986             try {
987                 // Use MyMemory API (free, no API key required)
988                 const response = await fetch(`https://api.mymemory.translated.net/get?q=${encodeURIComponent(text)}&langpair=en|${targetLang}`);
989                 const data = await response.json();
990                 
991                 if (data.responseStatus === 200 && data.responseData && data.responseData.translatedText) {
992                     return data.responseData.translatedText;
993                 }
994                 
995                 // Fallback: try LibreTranslate if MyMemory fails
996                 return await translateWithLibre(text, targetLang);
997                 
998             } catch (error) {
999                 console.error('Translation API error:', error);
1000                 // Fallback to basic dictionary for common words
1001                 return translateBasic(text, targetLang);
1002             }
1003         }
1004         
1005         async function translateWithLibre(text, targetLang) {
1006             try {
1007                 // LibreTranslate public instance (backup)
1008                 const response = await fetch('https://libretranslate.com/translate', {
1009                     method: 'POST',
1010                     headers: {
1011                         'Content-Type': 'application/json',
1012                     },
1013                     body: JSON.stringify({
1014                         q: text,
1015                         source: 'en',
1016                         target: targetLang,
1017                         format: 'text'
1018                     })
1019                 });
1020                 
1021                 const data = await response.json();
1022                 return data.translatedText || text;
1023                 
1024             } catch (error) {
1025                 console.error('LibreTranslate error:', error);
1026                 return text;
1027             }
1028         }
1029         
1030         function translateBasic(text, targetLang) {
1031             // Basic dictionary for common banking terms
1032             const dictionary = {
1033                 'es': {
1034                     'Home': 'Inicio',
1035                     'About': 'Acerca de',
1036                     'Services': 'Servicios',
1037                     'Contact': 'Contacto',
1038                     'Login': 'Iniciar Sesión',
1039                     'Register': 'Registrarse',
1040                     'Open Account': 'Abrir Cuenta',
1041                     'Banking': 'Banca',
1042                     'Personal Banking': 'Banca Personal',
1043                     'Business Banking': 'Banca Empresarial',
1044                     'Loans': 'Préstamos',
1045                     'Cards': 'Tarjetas',
1046                     'Language': 'Idioma'
1047                 },
1048                 'fr': {
1049                     'Home': 'Accueil',
1050                     'About': 'À propos',
1051                     'Services': 'Services',
1052                     'Contact': 'Contact',
1053                     'Login': 'Connexion',
1054                     'Register': 'S\'inscrire',
1055                     'Open Account': 'Ouvrir un Compte',
1056                     'Banking': 'Banque',
1057                     'Personal Banking': 'Banque Personnelle',
1058                     'Business Banking': 'Banque d\'Entreprise',
1059                     'Loans': 'Prêts',
1060                     'Cards': 'Cartes',
1061                     'Language': 'Langue'
1062                 },
1063                 'de': {
1064                     'Home': 'Startseite',
1065                     'About': 'Über uns',
1066                     'Services': 'Dienstleistungen',
1067                     'Contact': 'Kontakt',
1068                     'Login': 'Anmelden',
1069                     'Register': 'Registrieren',
1070                     'Open Account': 'Konto Eröffnen',
1071                     'Banking': 'Banking',
1072                     'Personal Banking': 'Privatkundengeschäft',
1073                     'Business Banking': 'Firmenkundengeschäft',
1074                     'Loans': 'Kredite',
1075                     'Cards': 'Karten',
1076                     'Language': 'Sprache'
1077                 },
1078                 'it': {
1079                     'Home': 'Casa',
1080                     'About': 'Chi siamo',
1081                     'Services': 'Servizi',
1082                     'Contact': 'Contatto',
1083                     'Login': 'Accedi',
1084                     'Register': 'Registrati',
1085                     'Open Account': 'Apri Conto',
1086                     'Banking': 'Banking',
1087                     'Personal Banking': 'Banking Personale',
1088                     'Business Banking': 'Banking Aziendale',
1089                     'Loans': 'Prestiti',
1090                     'Cards': 'Carte',
1091                     'Language': 'Lingua'
1092                 },
1093                 'pt': {
1094                     'Home': 'Início',
1095                     'About': 'Sobre',
1096                     'Services': 'Serviços',
1097                     'Contact': 'Contato',
1098                     'Login': 'Entrar',
1099                     'Register': 'Registrar',
1100                     'Open Account': 'Abrir Conta',
1101                     'Banking': 'Bancário',
1102                     'Personal Banking': 'Banco Pessoal',
1103                     'Business Banking': 'Banco Empresarial',
1104                     'Loans': 'Empréstimos',
1105                     'Cards': 'Cartões',
1106                     'Language': 'Idioma'
1107                 }
1108             };
1109             
1110             return dictionary[targetLang] && dictionary[targetLang][text] ? dictionary[targetLang][text] : text;
1111         }
1112         
1113         function getLanguageName(code) {
1114             const names = {
1115                 'es': 'Spanish',
1116                 'fr': 'French', 
1117                 'de': 'German',
1118                 'it': 'Italian',
1119                 'pt': 'Portuguese'
1120             };
1121             return names[code] || code;
1122         }
1123         
1124         function showTranslationLoading() {
1125             // Create loading overlay
1126             const overlay = document.createElement('div');
1127             overlay.id = 'translation-loading';
1128             overlay.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
1129             overlay.innerHTML = `
1130                 <div class="bg-white dark:bg-gray-800 rounded-2xl p-6 text-center">
1131                     <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600 mx-auto mb-4"></div>
1132                     <p class="text-gray-700 dark:text-gray-300">Translating page...</p>
1133                 </div>
1134             `;
1135             document.body.appendChild(overlay);
1136         }
1137         
1138         function hideTranslationLoading() {
1139             const overlay = document.getElementById('translation-loading');
1140             if (overlay) {
1141                 overlay.remove();
1142             }
1143         }
1144         
1145         // Initialize on page load
1146         document.addEventListener('DOMContentLoaded', function() {
1147             // Load saved language preference
1148             const savedLanguage = localStorage.getItem('selectedLanguage');
1149             if (savedLanguage && savedLanguage !== 'en') {
1150                 currentLanguage = savedLanguage;
1151                 updateFlagDisplay(savedLanguage);
1152             }
1153         });
1154         
1155         // Update the changeLanguage function to use the new approach
1156         window.changeLanguage = function(langCode) {
1157             currentLanguage = langCode;
1158             updateFlagDisplay(langCode);
1159             localStorage.setItem('selectedLanguage', langCode);
1160             
1161             if (langCode === 'en') {
1162                 location.reload();
1163             } else {
1164                 translatePage(langCode);
1165             }
1166         };
1167     </script>
1167
1168   
1169
1170<script type="text/javascript">
1171    (function () {
1172        var options = {
1173            whatsapp: "+4407345062911", // WhatsApp number
1174            call_to_action: "Message us", // Call to action
1175            position: "left", // Position may be 'right' or 'left'
1176            pre_filled_message: "Hello I am", // WhatsApp pre-filled message
1177        };
1178        var proto = document.location.protocol, host = "getbutton.io", url = proto + "//static." + host;
1179        var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
1180        s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
1181        var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
1182    })();
1183</script>
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207</body>
1208</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.