PageSourceSearch

https://gh-network.net/check-coverage

html gh-network.net collected 2026-10-08 17:30:48 UTC 54,797 bytes, 1,614 lines download raw bytes

1<!DOCTYPE html>
2<html lang="bn" dir="ltr">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta name="csrf-token" content="x4F9GyuD40WX6phiNu0xYGXsds1AmSW8J7BFMi2Q">
7    <meta http-equiv="Content-Language" content="bn">
8    <meta name="language" content="Bangla">
9
10    
11    <title>কভারেজ চেক করুন - GH NETWORK | GH NETWORK</title>
12
13    
14    <meta name="description" content="গাজীপুরের সেরা অপটিক্যাল ফাইবার ও IPv6 ব্রডব্যান্ড ইন্টারনেট সার্ভিস প্রদানকারী।">
15    <meta name="keywords" content="internet, broadband, gazipur, gh network, isp, optical fiber">
16    <meta name="author" content="GH NETWORK">
17    <meta name="robots" content="index, follow">
18    
19    
20    <!-- Canonical URL -->
21    <link rel="canonical" href="    https://gh-network.net/check-coverage
22" />
23
24    <!-- Open Graph / Facebook -->
25    <meta property="og:type" content="website">
26    <meta property="og:title" content="GH NETWORK - গাজীপুরের সেরা অপটিক্যাল ফাইবার ও IPv6 ব্রডব্যান্ড">
27    <meta property="og:description" content="গাজীপুরের সেরা অপটিক্যাল ফাইবার ও IPv6 ব্রডব্যান্ড ইন্টারনেট সার্ভিস প্রদানকারী।">
28    <meta property="og:image" content="https://gh-network.net/favicon.ico">
29    <meta property="og:url" content="https://gh-network.net/check-coverage">
30        <meta property="og:type" content="website">
31    <meta property="og:url" content="https://gh-network.net/check-coverage">
32    <meta property="og:title" content="কভারেজ চেক করুন - GH NETWORK">
33    <meta property="og:description" content="আপনার এলাকায় GH NETWORK-এর কভারেজ আছে কিনা চেক করুন।">
34    <meta property="og:image" content="https://gh-network.net/images/coverage-og.jpg">
35
36    <!-- Twitter -->
37    <meta name="twitter:card" content="summary_large_image">
38    <meta name="twitter:site" content="@ghnetwork">
39    <meta name="twitter:title" content="GH NETWORK - গাজীপুরের সেরা অপটিক্যাল ফাইবার ও IPv6 ব্রডব্যান্ড">
40    <meta name="twitter:description" content="গাজীপুরের সেরা অপটিক্যাল ফাইবার ও IPv6 ব্রডব্যান্ড ইন্টারনেট সার্ভিস প্রদানকারী।">
41    <meta name="twitter:image" content="https://gh-network.net/favicon.ico">
42        <meta property="twitter:card" content="summary_large_image">
43    <meta property="twitter:url" content="https://gh-network.net/check-coverage">
44    <meta property="twitter:title" content="কভারেজ চেক করুন - GH NETWORK">
45    <meta property="twitter:description" content="আপনার এলাকায় GH NETWORK-এর কভারেজ আছে কিনা চেক করুন।">
46    <meta property="twitter:image" content="https://gh-network.net/images/coverage-twitter.jpg">
47
48    <!-- Additional Meta Tags -->
49        <meta name="robots" content="index, follow">
50    <meta name="googlebot" content="index, follow">
51    <meta name="theme-color" content="#ffffff">
52
53    <!-- Structured Data / Schema.org markup -->
54    
55    <!-- Favicon -->
56    <link rel="icon" href="https://gh-network.net/favicon.ico" type="image/x-icon">
57
58    <!-- Font Awesome -->
59    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
60
61    <!-- Google Fonts - Anek Bangla -->
62    <link rel="preconnect" href="https://fonts.googleapis.com">
63    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
64    <link href="https://fonts.googleapis.com/css2?family=Anek+Bangla:wght@100;200;300;400;500;600;700;800&display=swap" rel="stylesheet">
65
66    <!-- Custom CSS -->
67    <link rel="stylesheet" href="https://gh-network.net/assets/css/light-theme.css">
68    <link rel="stylesheet" href="https://gh-network.net/assets/css/style.css">
69    <link rel="stylesheet" href="https://gh-network.net/assets/css/style_new.css">
70    <link rel="stylesheet" href="https://gh-network.net/assets/css/home_extra.css">
71    <link rel="stylesheet" href="https://gh-network.net/assets/css/footer.css">
72    <link rel="stylesheet" href="https://gh-network.net/assets/css/responsive-ui.css">
73
74    
75    
76    <!-- Preload Critical Fonts -->
77    <link rel="preload" href="https://fonts.gstatic.com/s/anekbangla/v1/NAmZKzYbHv9kGzKgJqQpCw.woff2" as="font" type="font/woff2" crossorigin>
78
79    <style>
80        /* Apply Anek Bangla font to all elements */
81        * {
82            font-family: "Anek Bangla", sans-serif;
83            font-optical-sizing: auto;
84            font-style: normal;
85            font-variation-settings: "wdth" 100;
86            -webkit-font-smoothing: antialiased;
87            -moz-osx-font-smoothing: grayscale;
88            text-rendering: optimizeLegibility;
89        }
90
91        /* Hide browser scrollbar and enable custom scrollbar for entire page */
92        html {
93            overflow: -moz-scrollbars-none; /* Firefox */
94            -ms-overflow-style: none; /* IE and Edge */
95            scrollbar-width: none; /* Firefox */
96        }
97
98        html::-webkit-scrollbar {
99            display: none; /* Chrome, Safari, Opera */
100        }
101
102        /* Anek Bangla - All Weights */
103        .anek-bangla-extralight { font-weight: 200; }
104        .anek-bangla-light { font-weight: 300; }
105        .anek-bangla-regular { font-weight: 400; }
106        .anek-bangla-medium { font-weight: 500; }
107        .anek-bangla-semibold { font-weight: 600; }
108        .anek-bangla-bold { font-weight: 700; }
109        .anek-bangla-extrabold { font-weight: 800; }
110
111        @font-face {
112            font-family: 'Anek Bangla';
113            font-weight: 200;
114            font-style: normal;
115            font-display: swap;
116            src: url('https://fonts.gstatic.com/s/anekbangla/v1/NAmZKzYbHv9kGzKgJqQpCw.woff2') format('woff2');
117            unicode-range: U+0980-09FF, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
118        }
119
120        @font-face {
121            font-family: 'Anek Bangla';
122            font-weight: 300;
123            font-style: normal;
124            font-display: swap;
125            src: url('https://fonts.gstatic.com/s/anekbangla/v1/NAmZKzYbHv9kGzKgJqQpCw.woff2') format('woff2');
126            unicode-range: U+0980-09FF, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
127        }
128
129        @font-face {
130            font-family: 'Anek Bangla';
131            font-weight: 400;
132            font-style: normal;
133            font-display: swap;
134            src: url('https://fonts.gstatic.com/s/anekbangla/v1/NAmZKzYbHv9kGzKgJqQpCw.woff2') format('woff2');
135            unicode-range: U+0980-09FF, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
136        }
137
138        @font-face {
139            font-family: 'Anek Bangla';
140            font-weight: 500;
141            font-style: normal;
142            font-display: swap;
143            src: url('https://fonts.gstatic.com/s/anekbangla/v1/NAmZKzYbHv9kGzKgJqQpCw.woff2') format('woff2');
144            unicode-range: U+0980-09FF, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
145        }
146
147        @font-face {
148            font-family: 'Anek Bangla';
149            font-weight: 600;
150            font-style: normal;
151            font-display: swap;
152            src: url('https://fonts.gstatic.com/s/anekbangla/v1/NAmZKzYbHv9kGzKgJqQpCw.woff2') format('woff2');
153            unicode-range: U+0980-09FF, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
154        }
155
156        @font-face {
157            font-family: 'Anek Bangla';
158            font-weight: 700;
159            font-style: normal;
160            font-display: swap;
161            src: url('https://fonts.gstatic.com/s/anekbangla/v1/NAmZKzYbHv9kGzKgJqQpCw.woff2') format('woff2');
162            unicode-range: U+0980-09FF, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
163        }
164
165        @font-face {
166            font-family: 'Anek Bangla';
167            font-weight: 800;
168            font-style: normal;
169            font-display: swap;
170            src: url('https://fonts.gstatic.com/s/anekbangla/v1/NAmZKzYbHv9kGzKgJqQpCw.woff2') format('woff2');
171            unicode-range: U+0980-09FF, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
172        }
173
174        body {
175            margin: 0;
176            font-family: "Anek Bangla", sans-serif;
177            font-optical-sizing: auto;
178            font-style: normal;
179            font-variation-settings: "wdth" 100;
180            line-height: 1.7;
181            color: #1e293b;
182            overflow-x: hidden;
183            overflow-y: scroll; /* Always show vertical space for custom scrollbar */
184            text-rendering: optimizeLegibility;
185            -webkit-font-smoothing: antialiased;
186            -moz-osx-font-smoothing: grayscale;
187            font-feature-settings: 'kern' 1, 'calt' 1, 'liga' 1;
188            padding-bottom: 0;
189            background-color: #f8fafc;
190        }
191
192        /* Custom Scrollbar Styles - Global */
193        ::-webkit-scrollbar {
194            width: 10px;
195            height: 10px;
196        }
197
198        ::-webkit-scrollbar-track {
199            background: #f1f5f9;
200            border-radius: 10px;
201        }
202
203        ::-webkit-scrollbar-thumb {
204            background: linear-gradient(180deg, #3b82f6, #8b5cf6);
205            border-radius: 10px;
206            border: 2px solid #f1f5f9;
207        }
208
209        ::-webkit-scrollbar-thumb:hover {
210            background: linear-gradient(180deg, #2563eb, #7c3aed);
211        }
212
213        /* Firefox custom scrollbar support */
214        * {
215            scrollbar-width: thin;
216            scrollbar-color: #3b82f6 #f1f5f9;
217        }
218
219        /* Custom scrollbar for scrollable containers */
220        .overflow-y-auto::-webkit-scrollbar,
221        .overflow-y-scroll::-webkit-scrollbar,
222        [style*="overflow-y: scroll"]::-webkit-scrollbar,
223        [style*="overflow-y: auto"]::-webkit-scrollbar,
224        .scrollable::-webkit-scrollbar,
225        .modal-content::-webkit-scrollbar,
226        .dropdown-menu::-webkit-scrollbar,
227        .sidebar::-webkit-scrollbar,
228        .content-area::-webkit-scrollbar {
229            width: 8px;
230        }
231
232        .overflow-y-auto::-webkit-scrollbar-track,
233        .overflow-y-scroll::-webkit-scrollbar-track,
234        [style*="overflow-y: scroll"]::-webkit-scrollbar-track,
235        [style*="overflow-y: auto"]::-webkit-scrollbar-track,
236        .scrollable::-webkit-scrollbar-track,
237        .modal-content::-webkit-scrollbar-track,
238        .dropdown-menu::-webkit-scrollbar-track,
239        .sidebar::-webkit-scrollbar-track,
240        .content-area::-webkit-scrollbar-track {
241            background: #f8fafc;
242            border-radius: 8px;
243        }
244
245        .overflow-y-auto::-webkit-scrollbar-thumb,
246        .overflow-y-scroll::-webkit-scrollbar-thumb,
247        [style*="overflow-y: scroll"]::-webkit-scrollbar-thumb,
248        [style*="overflow-y: auto"]::-webkit-scrollbar-thumb,
249        .scrollable::-webkit-scrollbar-thumb,
250        .modal-content::-webkit-scrollbar-thumb,
251        .dropdown-menu::-webkit-scrollbar-thumb,
252        .sidebar::-webkit-scrollbar-thumb,
253        .content-area::-webkit-scrollbar-thumb {
254            background: linear-gradient(180deg, #60a5fa, #a78bfa);
255            border-radius: 8px;
256            border: 2px solid #f8fafc;
257        }
258
259        .overflow-y-auto::-webkit-scrollbar-thumb:hover,
260        .overflow-y-scroll::-webkit-scrollbar-thumb:hover,
261        [style*="overflow-y: scroll"]::-webkit-scrollbar-thumb:hover,
262        [style*="overflow-y: auto"]::-webkit-scrollbar-thumb:hover,
263        .scrollable::-webkit-scrollbar-thumb:hover,
264        .modal-content::-webkit-scrollbar-thumb:hover,
265        .dropdown-menu::-webkit-scrollbar-thumb:hover,
266        .sidebar::-webkit-scrollbar-thumb:hover,
267        .content-area::-webkit-scrollbar-thumb:hover {
268            background: linear-gradient(180deg, #3b82f6, #8b5cf6);
269        }
270
271        /* Horizontal scrollbar styling */
272        .overflow-x-auto::-webkit-scrollbar,
273        .overflow-x-scroll::-webkit-scrollbar {
274            height: 8px;
275        }
276
277        .overflow-x-auto::-webkit-scrollbar-track,
278        .overflow-x-scroll::-webkit-scrollbar-track {
279            background: #f8fafc;
280            border-radius: 8px;
281        }
282
283        .overflow-x-auto::-webkit-scrollbar-thumb,
284        .overflow-x-scroll::-webkit-scrollbar-thumb {
285            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
286            border-radius: 8px;
287            border: 2px solid #f8fafc;
288        }
289
290        .overflow-x-auto::-webkit-scrollbar-thumb:hover,
291        .overflow-x-scroll::-webkit-scrollbar-thumb:hover {
292            background: linear-gradient(90deg, #2563eb, #7c3aed);
293        }
294
295        h1, h2, h3, h4, h5, h6 {
296            font-family: "Anek Bangla", sans-serif;
297            font-optical-sizing: auto;
298            font-style: normal;
299            font-variation-settings: "wdth" 100;
300            font-weight: 700;
301            line-height: 1.2;
302            margin-top: 0;
303        }
304
305        p {
306            font-family: "Anek Bangla", sans-serif;
307            font-optical-sizing: auto;
308            font-style: normal;
309            font-variation-settings: "wdth" 100;
310            font-weight: 400;
311        }
312
313        a, button, input, select, textarea {
314            font-family: "Anek Bangla", sans-serif;
315            font-optical-sizing: auto;
316            font-style: normal;
317            font-variation-settings: "wdth" 100;
318        }
319
320        /* Apply bottom padding only on mobile where bottom nav exists */
321        @media (max-width: 1024px) {
322            body {
323                padding-bottom: 120px;
324            }
325        }
326
327        .container {
328            width: 100%;
329            max-width: 1200px;
330            margin: 0 auto;
331            padding: 0 20px;
332        }
333    </style>
334
335    
336    <style>
337/* ============================================
338   COVERAGE CHECK PAGE - LIGHT THEME
339   ============================================ */
340
341:root {
342    --bg-primary: #ffffff;
343    --bg-secondary: #f8fafc;
344    --bg-tertiary: #f1f5f9;
345    --text-primary: #1e293b;
346    --text-secondary: #475569;
347    --text-muted: #64748b;
348    --accent-primary: #6D8BFF;
349    --accent-secondary: #9B70FF;
350    --border-color: #e2e8f0;
351    --success: #10b981;
352    --warning: #f59e0b;
353    --error: #ef4444;
354    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
355    --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
356}
357
358* {
359    margin: 0;
360    padding: 0;
361    box-sizing: border-box;
362}
363
364body {
365    background: var(--bg-primary);
366    color: var(--text-primary);
367    font-family: 'Poppins', 'Bangla', sans-serif;
368    line-height: 1.6;
369    overflow-x: hidden;
370}
371
372.container {
373    max-width: 1400px;
374    margin: 0 auto;
375    padding: 0 20px;
376}
377
378/* ============================================
379   SEARCH SECTION
380   ============================================ */
381.search-section {
382    padding: 3rem 0 2rem;
383    background: var(--bg-secondary);
384    border-bottom: 1px solid var(--border-color);
385}
386
387.search-container {
388    max-width: 700px;
389    margin: 0 auto;
390}
391
392.search-box {
393    background: var(--bg-primary);
394    border: 1px solid var(--border-color);
395    border-radius: 16px;
396    padding: 2rem;
397    box-shadow: var(--card-shadow);
398}
399
400.search-label {
401    display: block;
402    font-size: 1.1rem;
403    font-weight: 600;
404    color: var(--text-primary);
405    margin-bottom: 1rem;
406    text-align: center;
407}
408
409.search-label i {
410    color: var(--accent-primary);
411    margin-right: 0.5rem;
412}
413
414.search-input-wrapper {
415    display: flex;
416    gap: 1rem;
417}
418
419.search-input {
420    flex: 1;
421    padding: 1rem 1.5rem;
422    background: var(--bg-primary);
423    border: 2px solid var(--border-color);
424    border-radius: 12px;
425    color: var(--text-primary);
426    font-size: 1.1rem;
427    transition: all 0.3s ease;
428}
429
430.search-input:focus {
431    outline: none;
432    border-color: var(--accent-primary);
433    box-shadow: 0 0 0 3px rgba(109, 139, 255, 0.1);
434}
435
436.search-input::placeholder {
437    color: var(--text-muted);
438}
439
440.search-btn {
441    padding: 1rem 2.5rem;
442    background: var(--accent-primary);
443    color: white;
444    border: none;
445    border-radius: 12px;
446    font-size: 1rem;
447    font-weight: 600;
448    cursor: pointer;
449    transition: all 0.3s ease;
450    white-space: nowrap;
451}
452
453.search-btn:hover {
454    background: var(--accent-secondary);
455    transform: translateY(-1px);
456    box-shadow: 0 4px 12px rgba(109, 139, 255, 0.3);
457}
458
459/* ============================================
460   RESULT SECTION
461   ============================================ */
462.result-section {
463    padding: 2rem 0;
464    display: none;
465    background: var(--bg-secondary);
466}
467
468.result-section.show {
469    display: block;
470}
471
472.result-card {
473    max-width: 700px;
474    margin: 0 auto;
475    background: var(--bg-primary);
476    border: 1px solid var(--border-color);
477    border-radius: 16px;
478    padding: 2rem;
479    box-shadow: var(--card-shadow);
480    text-align: center;
481}
482
483.result-icon {
484    width: 80px;
485    height: 80px;
486    margin: 0 auto 1.5rem;
487    border-radius: 50%;
488    display: flex;
489    align-items: center;
490    justify-content: center;
491    font-size: 2.5rem;
492}
493
494.result-icon.available {
495    background: rgba(16, 185, 129, 0.1);
496    color: var(--success);
497}
498
499.result-icon.coming-soon {
500    background: rgba(245, 158, 11, 0.1);
501    color: var(--warning);
502}
503
504.result-icon.not-available {
505    background: rgba(239, 68, 68, 0.1);
506    color: var(--error);
507}
508
509.result-title {
510    font-size: 1.6rem;
511    font-weight: 700;
512    margin-bottom: 1rem;
513}
514
515.result-title.available {
516    color: var(--success);
517}
518
519.result-title.coming-soon {
520    color: var(--warning);
521}
522
523.result-title.not-available {
524    color: var(--error);
525}
526
527.result-message {
528    font-size: 1rem;
529    color: var(--text-secondary);
530    margin-bottom: 1.5rem;
531    line-height: 1.7;
532}
533
534.result-actions {
535    display: flex;
536    gap: 1rem;
537    justify-content: center;
538    flex-wrap: wrap;
539}
540
541.btn-result {
542    padding: 0.875rem 1.5rem;
543    border-radius: 10px;
544    font-weight: 600;
545    text-decoration: none;
546    display: inline-flex;
547    align-items: center;
548    gap: 0.5rem;
549    transition: all 0.3s ease;
550    font-size: 0.95rem;
551}
552
553.btn-result.primary {
554    background: var(--accent-primary);
555    color: white;
556}
557
558.btn-result.primary:hover {
559    background: var(--accent-secondary);
560    transform: translateY(-1px);
561}
562
563.btn-result.secondary {
564    background: var(--bg-tertiary);
565    color: var(--text-primary);
566    border: 1px solid var(--border-color);
567}
568
569.btn-result.secondary:hover {
570    background: var(--border-color);
571}
572
573/* ============================================
574   COVERAGE AREAS GRID
575   ============================================ */
576.coverage-areas {
577    padding: 3rem 0 4rem;
578    background: var(--bg-primary);
579}
580
581.section-header {
582    text-align: center;
583    margin-bottom: 2.5rem;
584}
585
586.section-tag {
587    display: inline-block;
588    padding: 0.5rem 1.25rem;
589    background: rgba(109, 139, 255, 0.1);
590    border: 1px solid rgba(109, 139, 255, 0.3);
591    border-radius: 50px;
592    color: var(--accent-primary);
593    font-size: 0.875rem;
594    font-weight: 600;
595    margin-bottom: 1rem;
596}
597
598.section-title {
599    font-size: 2rem;
600    font-weight: 700;
601    color: var(--text-primary);
602    margin-bottom: 0.75rem;
603}
604
605.section-subtitle {
606    color: var(--text-secondary);
607    font-size: 1rem;
608    max-width: 500px;
609    margin: 0 auto;
610}
611
612/* Grid Layout: 5 per row on desktop, 2 per row on mobile */
613.areas-grid {
614    display: grid;
615    grid-template-columns: repeat(5, 1fr);
616    gap: 1.25rem;
617}
618
619.area-box {
620    background: var(--bg-primary);
621    border: 1px solid var(--border-color);
622    border-radius: 12px;
623    padding: 1.25rem 1rem;
624    text-align: center;
625    transition: all 0.3s ease;
626    cursor: pointer;
627}
628
629.area-box:hover {
630    border-color: var(--accent-primary);
631    box-shadow: 0 10px 15px -3px rgba(109, 139, 255, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
632    transform: translateY(-2px);
633}
634
635.area-icon {
636    width: 48px;
637    height: 48px;
638    background: rgba(109, 139, 255, 0.1);
639    border-radius: 10px;
640    display: flex;
641    align-items: center;
642    justify-content: center;
643    font-size: 1.25rem;
644    color: var(--accent-primary);
645    margin: 0 auto 0.75rem;
646}
647
648.area-name {
649    font-size: 0.95rem;
650    font-weight: 600;
651    color: var(--text-primary);
652    margin-bottom: 0.25rem;
653    line-height: 1.4;
654}
655
656.area-location {
657    font-size: 0.8rem;
658    color: var(--text-muted);
659}
660
661.area-status {
662    display: inline-flex;
663    align-items: center;
664    gap: 0.35rem;
665    margin-top: 0.75rem;
666    padding: 0.35rem 0.75rem;
667    background: rgba(16, 185, 129, 0.1);
668    color: var(--success);
669    border-radius: 50px;
670    font-size: 0.75rem;
671    font-weight: 600;
672}
673
674/* ============================================
675   NO COVERAGE AREAS MESSAGE
676   ============================================ */
677.no-coverage-message {
678    text-align: center;
679    padding: 3rem 2rem;
680    color: var(--text-muted);
681}
682
683.no-coverage-message i {
684    font-size: 3rem;
685    margin-bottom: 1rem;
686    color: var(--border-color);
687}
688
689/* ============================================
690   RESPONSIVE DESIGN
691   ============================================ */
692@media (max-width: 1200px) {
693    .areas-grid {
694        grid-template-columns: repeat(4, 1fr);
695    }
696}
697
698@media (max-width: 992px) {
699    .areas-grid {
700        grid-template-columns: repeat(3, 1fr);
701    }
702}
703
704@media (max-width: 768px) {
705    .search-section {
706        padding: 2rem 0 1.5rem;
707    }
708    
709    .search-box {
710        padding: 1.5rem;
711    }
712    
713    .search-input-wrapper {
714        flex-direction: column;
715    }
716    
717    .search-btn {
718        width: 100%;
719    }
720    
721    .result-actions {
722        flex-direction: column;
723    }
724    
725    .btn-result {
726        width: 100%;
727        justify-content: center;
728    }
729    
730    .areas-grid {
731        grid-template-columns: repeat(2, 1fr);
732        gap: 1rem;
733    }
734    
735    .section-title {
736        font-size: 1.5rem;
737    }
738    
739    .area-box {
740        padding: 1rem 0.75rem;
741    }
742    
743    .area-icon {
744        width: 40px;
745        height: 40px;
746        font-size: 1rem;
747    }
748    
749    .area-name {
750        font-size: 0.875rem;
751    }
752}
753
754@media (max-width: 480px) {
755    .container {
756        padding: 0 15px;
757    }
758    
759    .areas-grid {
760        gap: 0.75rem;
761    }
762    
763    .area-box {
764        padding: 0.875rem 0.5rem;
765    }
766}
767</style>
768    </head>
769<body>
770
771    
772    <!-- Header Removed - All navigation moved to bottom floating bar -->
773<!-- Navigation is now handled by the floating bottom navigation bar -->
774
775    
776    <main id="main-content">
777        <!-- Search Section -->
778<section class="search-section">
779    <div class="container">
780        <div class="search-container">
781            <div class="search-box">
782                <label class="search-label" for="areaSearch">
783                    <i class="fas fa-search"></i>
784                    আপনার এলাকার নাম লিখুন
785                </label>
786                <div class="search-input-wrapper">
787                    <input 
788                        type="text" 
789                        id="areaSearch" 
790                        class="search-input" 
791                        placeholder="যেমন: চান্দনা, চৌরাস্তা, পালের মাঠ..."
792                        autocomplete="off"
793                    >
794                    <button class="search-btn" id="checkCoverageBtn">
795                        <i class="fas fa-search"></i>
796                        চেক করুন
797                    </button>
798                </div>
799            </div>
800        </div>
801    </div>
802</section>
803
804<!-- Result Section -->
805<section class="result-section" id="resultSection">
806    <div class="container">
807        <div class="result-card" id="resultCard">
808            <!-- Content will be dynamically inserted -->
809        </div>
810    </div>
811</section>
812
813<!-- Coverage Areas Grid -->
814<section class="coverage-areas">
815    <div class="container">
816        <div class="section-header">
817            <span class="section-tag">
818                <i class="fas fa-map-marked-alt"></i>
819                আমাদের কভারেজ এলাকা
820            </span>
821            <h2 class="section-title">যেসব এলাকায় আমরা সেবা দিচ্ছি</h2>
822            <p class="section-subtitle">নিচের তালিকা থেকে আপনার এলাকা খুঁজে দেখুন</p>
823        </div>
824        
825                    <div class="no-coverage-message">
826                <i class="fas fa-map-marked-alt"></i>
827                <p>কোনো কভারেজ এলাকা যোগ করা হয়নি।</p>
828            </div>
829            </div>
830</section>
831    </main>
832
833    
834    <!-- Simple Footer Component -->
835<footer class="footer">
836    <!-- Policy Links Only -->
837    <div class="footer-content">
838        <div class="policy-links">
839            <a href="https://gh-network.net/about-us">About Us</a>
840            <span class="separator">|</span>
841            <a href="https://gh-network.net/privacy-policy">Privacy and Policy</a>
842            <span class="separator">|</span>
843            <a href="https://gh-network.net/terms-and-conditions">Terms and Conditions</a>
844            <span class="separator">|</span>
845            <a href="https://gh-network.net/refund-policy">Return and Refund Policy</a>
846        </div>
847    </div>
848    
849    <!-- Payment Gateway Logo -->
850    <div class="payment-gateway">
851        <img src="https://securepay.sslcommerz.com/public/image/SSLCommerz-Pay-With-logo-All-Size-03.png" alt="SSLCommerz - Pay With" class="payment-logo">
852    </div>
853
854    <!-- Registered Address -->
855    <div class="footer-address">
856        <p>
857            <i class="fas fa-map-marker-alt"></i>
858            Registered Address: Holding no- 843/C, Ward no- 17, Bason PS, Gazipur - 1702, Bangladesh.
859        </p>
860    </div>
861
862    <!-- Footer Bottom -->
863    <div class="footer-bottom">
864        <div class="footer-bottom-content">
865            <p class="copyright"><span id="current-year">2026</span> GH NETWORK. All Rights Reserved.</p>
866            <p class="trade-license">Trade License Number: 9541</p>
867        </div>
868    </div>
869</footer>
870
871<style>
872    /* Simple Footer Styles */
873    .footer {
874        background: #1a1a2e;
875        color: #fff;
876        padding: 30px 0 0;
877        font-family: 'Anek Bangla', sans-serif;
878        width: 100vw;
879        position: relative;
880        left: 50%;
881        right: 50%;
882        margin-left: -50vw;
883        margin-right: -50vw;
884    }
885
886    .footer-content {
887        text-align: center;
888        margin-bottom: 25px;
889        width: 100%;
890        padding: 0 40px;
891    }
892
893    .policy-links {
894        display: flex;
895        justify-content: center;
896        align-items: center;
897        flex-wrap: wrap;
898        gap: 8px 16px;
899        width: 100%;
900    }
901
902    .policy-links a {
903        color: #60a5fa;
904        text-decoration: none;
905        font-size: 14px;
906        transition: color 0.3s ease;
907    }
908
909    .policy-links a:hover {
910        color: #fff;
911        text-decoration: underline;
912    }
913
914    .separator {
915        color: #475569;
916        font-size: 12px;
917    }
918
919    /* Payment Gateway Logo */
920    .payment-gateway {
921        text-align: center;
922        padding: 20px 40px;
923        border-top: 1px solid rgba(255, 255, 255, 0.1);
924        width: 100%;
925    }
926
927    .payment-logo {
928        width: auto;
929        height: auto;
930        max-height: 120px;
931        max-width: 100%;
932        object-fit: contain;
933    }
934
935    /* Registered Address */
936    .footer-address {
937        text-align: center;
938        padding: 15px 40px;
939        border-top: 1px solid rgba(255, 255, 255, 0.1);
940        width: 100%;
941    }
942
943    .footer-address p {
944        color: #94a3b8;
945        font-size: 13px;
946        margin: 0;
947    }
948
949    .footer-address i {
950        margin-right: 8px;
951        color: #60a5fa;
952    }
953
954    /* Footer Bottom */
955    .footer-bottom {
956        background: #16213e;
957        padding: 15px 0;
958        width: 100%;
959    }
960
961    .footer-bottom-content {
962        display: flex;
963        justify-content: center;
964        align-items: center;
965        flex-wrap: wrap;
966        gap: 10px 20px;
967        width: 100%;
968        padding: 0 40px;
969        text-align: center;
970    }
971
972    .footer-bottom p {
973        color: #94a3b8;
974        font-size: 13px;
975        margin: 0;
976    }
977
978    .copyright {
979        text-align: center;
980    }
981
982    .trade-license {
983        text-align: center;
984    }
985
986    /* Desktop Only - Hide footer on mobile/tablet */
987    @media (max-width: 1024px) {
988        .footer {
989            display: none !important;
990        }
991    }
992
993    /* Mobile - Hide trade license, center copyright */
994    @media (max-width: 768px) {
995        .trade-license {
996            display: none !important;
997        }
998
999        .footer-bottom-content {
1000            justify-content: center;
1001        }
1002
1003        .copyright {
1004            text-align: center;
1005        }
1006    }
1007</style>
1008
1009<script>
1010    // Update current year dynamically
1011    document.addEventListener('DOMContentLoaded', function() {
1012        const yearSpan = document.getElementById('current-year');
1013        if (yearSpan) {
1014            yearSpan.textContent = new Date().getFullYear();
1015        }
1016    });
1017</script>
1017
1018
1019    
1020    <!-- Core Scripts -->
1021<script src="https://gh-network.net/assets/js/mobile-menu.js"></script>
vendor: 1 bytes, line 1021
1021
1022<script src="https://gh-network.net/assets/js/header-control.js"></script>
vendor: 1 bytes, line 1022
1022
1023<script src="https://gh-network.net/assets/js/home.js"></script>
vendor: 1 bytes, line 1023
1023
1024<script src="https://gh-network.net/assets/js/services-tabs.js"></script>
vendor: 1 bytes, line 1024
1024
1025<script src="https://gh-network.net/assets/js/payment-handler.js"></script>
1025
1026
1027<!-- Font Awesome JS -->
1028<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
1028
1029
1030<!-- Particles.js Initialization -->
1031<script>
1032    // Initialize particles.js
1033    document.addEventListener('DOMContentLoaded', function() {
1034        if (typeof particlesJS !== 'undefined') {
1035            particlesJS('particles-js', {
1036                particles: {
1037                    number: {
1038                        value: 80,
1039                        density: {
1040                            enable: true,
1041                            value_area: 800
1042                        }
1043                    },
1044                    color: {
1045                        value: '#4f46e5'
1046                    },
1047                    shape: {
1048                        type: 'circle',
1049                        stroke: {
1050                            width: 0,
1051                            color: '#000000'
1052                        }
1053                    },
1054                    opacity: {
1055                        value: 0.3,
1056                        random: true,
1057                        anim: {
1058                            enable: true,
1059                            speed: 1,
1060                            opacity_min: 0.1,
1061                            sync: false
1062                        }
1063                    },
1064                    size: {
1065                        value: 3,
1066                        random: true,
1067                        anim: {
1068                            enable: true,
1069                            speed: 2,
1070                            size_min: 0.1,
1071                            sync: false
1072                        }
1073                    },
1074                    line_linked: {
1075                        enable: true,
1076                        distance: 150,
1077                        color: '#4f46e5',
1078                        opacity: 0.2,
1079                        width: 1
1080                    },
1081                    move: {
1082                        enable: true,
1083                        speed: 1.5,
1084                        direction: 'none',
1085                        random: true,
1086                        straight: false,
1087                        out_mode: 'out',
1088                        bounce: false
1089                    }
1090                },
1091                interactivity: {
1092                    detect_on: 'canvas',
1093                    events: {
1094                        onhover: {
1095                            enable: true,
1096                            mode: 'repulse'
1097                        },
1098                        onclick: {
1099                            enable: true,
1100                            mode: 'push'
1101                        },
1102                        resize: true
1103                    },
1104                    modes: {
1105                        repulse: {
1106                            distance: 70,
1107                            duration: 0.4
1108                        },
1109                        push: {
1110                            particles_nb: 3
1111                        }
1112                    }
1113                },
1114                retina_detect: true
1115            });
1116        }
1117    });
1118</script>
1118
1119
1120    
1121    
1121<script>
1122// ============================================
1123// COVERAGE DATA FROM DATABASE
1124// ============================================
1125const coverageAreas = [
1126    ];
1127
1128// ============================================
1129// SEARCH FUNCTIONALITY
1130// ============================================
1131const searchInput = document.getElementById('areaSearch');
1132const checkBtn = document.getElementById('checkCoverageBtn');
1133const resultSection = document.getElementById('resultSection');
1134const resultCard = document.getElementById('resultCard');
1135
1136if (searchInput && checkBtn) {
1137    // Check on button click
1138    checkBtn.addEventListener('click', checkCoverage);
1139    
1140    // Check on Enter key
1141    searchInput.addEventListener('keypress', function(e) {
1142        if (e.key === 'Enter') {
1143            checkCoverage();
1144        }
1145    });
1146}
1147
1148function checkCoverage() {
1149    const searchTerm = searchInput.value.trim().toLowerCase();
1150    
1151    if (!searchTerm) {
1152        alert('দয়া করে আপনার এলাকার নাম লিখুন');
1153        searchInput.focus();
1154        return;
1155    }
1156    
1157    // Search for matching area
1158    const matchedArea = coverageAreas.find(area => 
1159        area.variations.some(variation => 
1160            variation.toLowerCase().includes(searchTerm) || searchTerm.includes(variation.toLowerCase())
1161        )
1162    );
1163    
1164    // Display result
1165    displayResult(matchedArea, searchTerm);
1166    
1167    // Scroll to result
1168    setTimeout(() => {
1169        resultSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
1170    }, 100);
1171}
1172
1173function searchArea(areaName) {
1174    searchInput.value = areaName;
1175    checkCoverage();
1176}
1177
1178function displayResult(area, searchTerm) {
1179    resultSection.classList.add('show');
1180    
1181    if (area) {
1182        // Area found - Available
1183        resultCard.innerHTML = `
1184            <div class="result-icon available">
1185                <i class="fas fa-check-circle"></i>
1186            </div>
1187            <h2 class="result-title available">অভিনন্দন!</h2>
1188            <p class="result-message">${area.message}</p>
1189            <p class="result-message" style="font-size: 0.95rem;">${area.details}</p>
1190            <div class="result-actions">
1191                <a href="https://gh-network.net/new-connection" class="btn-result primary">
1192                    <i class="fas fa-plug"></i>
1193                    এখনই আবেদন করুন
1194                </a>
1195                <a href="tel:+8809639261498" class="btn-result secondary">
1196                    <i class="fas fa-phone-alt"></i>
1197                    কল করুন
1198                </a>
1199            </div>
1200        `;
1201    } else {
1202        // Check if it's coming soon or not available
1203        const comingSoonKeywords = ['gazipur', 'গাজীপুর', 'tongi', 'টঙ্গী', 'joydebpur', 'জয়দেবপুর'];
1204        const isComingSoon = comingSoonKeywords.some(keyword => searchTerm.includes(keyword));
1205        
1206        if (isComingSoon) {
1207            // Coming Soon
1208            resultCard.innerHTML = `
1209                <div class="result-icon coming-soon">
1210                    <i class="fas fa-clock"></i>
1211                </div>
1212                <h2 class="result-title coming-soon">শীঘ্রই আসছে!</h2>
1213                <p class="result-message">
1214                    আপনার এলাকায় GH_NETWORK এর কভারেজ খুব শীঘ্রই চালু হতে যাচ্ছে। 
1215                    আগ্রহ প্রকাশ করতে আমাদের সাথে যোগাযোগ করুন।
1216                </p>
1217                <div class="result-actions">
1218                    <a href="tel:+8809639261498" class="btn-result primary">
1219                        <i class="fas fa-phone-alt"></i>
1220                        যোগাযোগ করুন
1221                    </a>
1222                    <a href="#" class="btn-result secondary" onclick="alert('আপনার এলাকাটি নোট করা হয়েছে। ধন্যবাদ!'); return false;">
1223                        <i class="fas fa-bell"></i>
1224                        আমাকে জানান
1225                    </a>
1226                </div>
1227            `;
1228        } else {
1229            // Not Available
1230            resultCard.innerHTML = `
1231                <div class="result-icon not-available">
1232                    <i class="fas fa-times-circle"></i>
1233                </div>
1234                <h2 class="result-title not-available">দুঃখিত!</h2>
1235                <p class="result-message">
1236                    বর্তমানে আপনার উল্লিখিত এলাকায় "${searchTerm}" GH NETWORK-এর কভারেজ নেই। 
1237                    তবে আমরা দ্রুত আমাদের কভারেজ বাড়াচ্ছি।
1238                </p>
1239                <div class="result-actions">
1240                    <a href="tel:+8809639261498" class="btn-result primary">
1241                        <i class="fas fa-phone-alt"></i>
1242                        যোগাযোগ করুন
1243                    </a>
1244                    <a href="#" class="btn-result secondary" onclick="alert('আপনার এলাকাটি নোট করা হয়েছে। ধন্যবাদ!'); return false;">
1245                        <i class="fas fa-bell"></i>
1246                        কভারেজ চালু হলে জানান
1247                    </a>
1248                </div>
1249            `;
1250        }
1251    }
1252}
1253
1254// ============================================
1255// CLEAR RESULT ON NEW SEARCH
1256// ============================================
1257if (searchInput) {
1258    searchInput.addEventListener('input', function() {
1259        if (this.value.trim() === '') {
1260            resultSection.classList.remove('show');
1261        }
1262    });
1263}
1264</script>
1264
1265
1266    
1267    <nav class="nav-desktop " id="navDesktop" aria-label="Desktop Navigation">
1268    <div class="nav-desktop-bar">
1269
1270        
1271        <a href="https://gh-network.net" class="nav-logo">
1272            <div class="logo-icon"><i class="fas fa-wifi"></i></div>
1273            <div class="logo-text-group">
1274                <span class="logo-name">GH NETWORK</span>
1275                <span class="logo-sub">ফাইবার অপটিক ISP</span>
1276            </div>
1277        </a>
1278
1279        
1280        <div class="nav-links-section">
1281            <a href="https://gh-network.net" class="nav-link ">
1282                <i class="fas fa-home"></i><span>হোম</span>
1283            </a>
1284            <a href="https://gh-network.net/packages" class="nav-link ">
1285                <i class="fas fa-layer-group"></i><span>প্যাকেজ</span>
1286            </a>
1287            <a href="https://gh-network.net/ftp-servers" class="nav-link ">
1288                <i class="fas fa-server"></i><span>FTP</span>
1289            </a>
1290            <a href="https://gh-network.net/support" class="nav-link ">
1291                <i class="fas fa-headset"></i><span>সাপোর্ট</span>
1292            </a>
1293            <a href="https://gh-network.net/bill-payment" class="nav-link ">
1294                <i class="fas fa-file-invoice-dollar"></i><span>বিল পে</span>
1295            </a>
1296        </div>
1297
1298        
1299        <div class="nav-right-actions">
1300            <a href="https://gh-network.net/speed-test" class="nav-icon-pill speed" title="স্পিড টেস্ট">
1301                <i class="fas fa-tachometer-alt"></i><span>স্পিড</span>
1302            </a>
1303            <a href="tel:09647989898" class="nav-icon-pill call" title="কল করুন">
1304                <i class="fas fa-phone-alt"></i><span>কল</span>
1305            </a>
1306            <a href="https://wa.me/8801947111662" target="_blank" rel="noopener noreferrer" class="nav-icon-pill whatsapp" title="হোয়াটসঅ্যাপ">
1307                <i class="fab fa-whatsapp"></i><span>হোয়াটসঅ্যাপ</span>
1308            </a>
1309            <div class="nav-divider"></div>
1310                            <a href="https://gh-network.net/login" class="login-btn"><i class="fas fa-sign-in-alt"></i><span>লগইন</span></a>
1311                    </div>
1312    </div>
1313</nav>
1314
1315
1316<div class="mn-container " id="mobileNavContainer">
1317    <nav class="mn-bar" role="navigation">
1318        <div class="mn-gloss"></div>
1319
1320        <a href="https://gh-network.net" class="mn-tab ">
1321            <i class="fas fa-house-chimney"></i>
1322            <span>হোম</span>
1323        </a>
1324
1325        <a href="https://gh-network.net/packages" class="mn-tab ">
1326            <i class="fas fa-cubes"></i>
1327            <span>প্যাকেজ</span>
1328        </a>
1329
1330        <a href="https://gh-network.net/bill-payment" class="mn-tab ">
1331            <i class="fas fa-wallet"></i>
1332            <span>বিল পে</span>
1333        </a>
1334
1335        <a href="https://gh-network.net/support" class="mn-tab ">
1336            <i class="fas fa-headset"></i>
1337            <span>সাপোর্ট</span>
1338        </a>
1339
1340                    <a href="https://gh-network.net/login" class="mn-tab">
1341                <i class="fas fa-right-to-bracket"></i>
1342                <span>লগইন</span>
1343            </a>
1344            </nav>
1345</div>
1346
1347
1348<button class="m-contact-trigger " id="mobileContactTrigger" onclick="openContactSheet()" aria-label="Contact Us">
1349    <i class="fas fa-comment-dots"></i>
1350    <span class="m-trigger-dot"></span>
1351</button>
1352
1353
1354<div class="mn-overlay" id="mnOverlay"></div>
1355<div class="mn-sheet" id="mnSheet">
1356    <div class="mn-sheet-handle"></div>
1357    <div class="mn-sheet-header">যোগাযোগ</div>
1358    <div class="mn-sheet-content">
1359        <a href="tel:09647989898" class="mn-sheet-card">
1360            <div class="mn-card-icon" style="background:#ecfdf5; color:#10b981;"><i class="fas fa-phone-alt"></i></div>
1361            <div class="mn-card-body">
1362                <b>কল করুন</b>
1363                <span>09647989898</span>
1364            </div>
1365            <i class="fas fa-chevron-right mn-card-arrow"></i>
1366        </a>
1367        <a href="https://wa.me/8801947111662" target="_blank" rel="noopener noreferrer" class="mn-sheet-card">
1368            <div class="mn-card-icon" style="background:#f0fdf4; color:#22c55e;"><i class="fab fa-whatsapp"></i></div>
1369            <div class="mn-card-body">
1370                <b>হোয়াটসঅ্যাপ</b>
1371                <span>01947111662</span>
1372            </div>
1373            <i class="fas fa-chevron-right mn-card-arrow"></i>
1374        </a>
1375    </div>
1376</div>
1377
1378<style>
1379/* ── GLOBAL TOKENS ── */
1380:root {
1381    --mn-indigo: #6366f1;
1382    --mn-purple: #a855f7;
1383    --mn-glass-bg: rgba(255, 255, 255, 0.78);
1384    --mn-glass-border: rgba(255, 255, 255, 0.5);
1385    --mn-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
1386    --nav-h: 66px;
1387}
1388
1389/* ══════════════════════════════════════
1390   DESKTOP NAV — RESTORED & CLEAN
1391══════════════════════════════════════ */
1392.nav-desktop {
1393    position: fixed; top: 0; left: 0; right: 0;
1394    z-index: 1000;
1395    background: rgba(255,255,255,0.98);
1396    border-bottom: 1px solid rgba(226,232,240,0.9);
1397    backdrop-filter: blur(16px);
1398    -webkit-backdrop-filter: blur(16px);
1399    box-shadow: 0 1px 12px rgba(0,0,0,0.05);
1400}
1401
1402.nav-desktop-bar {
1403    display: flex; align-items: center; justify-content: space-between;
1404    height: var(--nav-h); padding: 0 40px;
1405    max-width: 1440px; margin: 0 auto;
1406}
1407
1408/* Hide mobile parts by default on Desktop */
1409.mn-container, .m-contact-trigger, .mn-overlay, .mn-sheet {
1410    display: none !important;
1411}
1412
1413.nav-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; }
1414.logo-icon { 
1415    width: 38px; height: 38px; 
1416    background: linear-gradient(135deg, #6366f1, #8b5cf6); 
1417    border-radius: 10px; display: flex; align-items: center; justify-content: center; 
1418    font-size: 16px; color: #fff; box-shadow: 0 4px 10px rgba(99,102,241,0.3);
1419}
1420.logo-text-group { display: flex; flex-direction: column; }
1421.logo-name { font-size: 15px; font-weight: 800; color: #0f172a; letter-spacing: -0.4px; line-height: 1.1; }
1422.logo-sub  { font-size: 10px; font-weight: 500; color: #94a3b8; }
1423
1424.nav-links-section { 
1425    display: flex; align-items: center; gap: 2px; 
1426    background: #f8fafc; border: 1px solid #e8edf3; 
1427    border-radius: 12px; padding: 5px; 
1428}
1429.nav-link { 
1430    display: flex; align-items: center; gap: 7px; padding: 7px 14px; 
1431    color: #64748b; text-decoration: none; font-size: 13.5px; font-weight: 500; 
1432    border-radius: 8px; transition: all 0.18s ease; white-space: nowrap; 
1433}
1434.nav-link:hover { color: #0f172a; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
1435.nav-link.active { color: #6366f1; background: #fff; box-shadow: 0 1px 6px rgba(99,102,241,0.12); font-weight: 600; }
1436
1437.nav-right-actions { display: flex; align-items: center; gap: 6px; }
1438.nav-icon-pill { 
1439    display: flex; align-items: center; gap: 6px; padding: 7px 13px; 
1440    border: 1.5px solid #e2e8f0; border-radius: 10px; font-size: 13px; 
1441    font-weight: 600; text-decoration: none; background: #f1f5f9; color: #64748b; 
1442    transition: all 0.18s ease; 
1443}
1444.nav-icon-pill.speed { color: #0891b2; }
1445.nav-icon-pill.call { color: #059669; }
1446.nav-icon-pill.whatsapp { color: #16a34a; }
1447.nav-divider { width: 1px; height: 28px; background: #e2e8f0; margin: 0 4px; }
1448.login-btn { 
1449    display: flex; align-items: center; gap: 8px; padding: 9px 18px; 
1450    background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; 
1451    border-radius: 10px; text-decoration: none; font-size: 13.5px; font-weight: 700; 
1452    box-shadow: 0 3px 10px rgba(99,102,241,0.3); transition: all 0.18s ease;
1453}
1454
1455@media (min-width: 1025px) {
1456    body { padding-top: var(--nav-h) !important; padding-bottom: 0 !important; }
1457}
1458
1459/* ══════════════════════════════════════
1460   MOBILE NAV — CLEAN & ISOLATED
1461══════════════════════════════════════ */
1462@media (max-width: 1024px) {
1463    .nav-desktop.hide-on-customer { display: none !important; }
1464    .mn-container.hide-on-customer { display: none !important; }
1465    .m-contact-trigger.hide-on-customer { display: none !important; }
1466    
1467    /* Hide body padding for customer dashboard pages */
1468    body:has(.portal-wrapper) {
1469        padding-bottom: 0 !important;
1470    }
1471    
1472    .nav-desktop { display: none !important; }
1473    
1474    body { 
1475        padding-top: 0 !important; 
1476        padding-bottom: calc(95px + env(safe-area-inset-bottom, 0px)) !important; 
1477    }
1478
1479    /* RE-SHOW MOBILE PARTS ONLY ON MOBILE */
1480    .mn-container { 
1481        display: block !important;
1482        position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
1483        padding: 0 16px calc(14px + env(safe-area-inset-bottom, 0px));
1484        pointer-events: none;
1485    }
1486    
1487    .mn-bar {
1488        position: relative; display: flex; align-items: center; justify-content: space-around;
1489        height: 72px; background: var(--mn-glass-bg); backdrop-filter: blur(28px) saturate(210%);
1490        -webkit-backdrop-filter: blur(28px) saturate(210%); border: 1px solid var(--mn-glass-border);
1491        border-radius: 32px; box-shadow: 0 12px 36px rgba(0,0,0,0.14);
1492        pointer-events: auto; overflow: hidden;
1493    }
1494
1495    .mn-tab {
1496        display: flex; flex-direction: column; align-items: center; justify-content: center;
1497        gap: 3px; flex: 1; height: 100%; text-decoration: none; -webkit-tap-highlight-color: transparent;
1498        position: relative; transition: all 0.4s var(--mn-spring);
1499    }
1500    .mn-tab:active { transform: scale(0.88) translateY(2px); }
1501
1502    .mn-tab i {
1503        font-size: 1.45rem; color: #64748b; 
1504        transition: all 0.4s var(--mn-spring); z-index: 2;
1505    }
1506    .mn-tab span {
1507        font-size: 0.65rem; font-weight: 600; color: #64748b;
1508        z-index: 2; transition: all 0.4s ease;
1509    }
1510
1511    /* PREMIUM ACTIVE STATE (Best UI) */
1512    .mn-tab.active i {
1513        background: linear-gradient(135deg, #6366f1, #a855f7);
1514        -webkit-background-clip: text;
1515        -webkit-text-fill-color: transparent;
1516        filter: drop-shadow(0 4px 10px rgba(99,102,241, 0.4));
1517        transform: translateY(-4px);
1518        animation: activeFloat 3s ease-in-out infinite, activeGlow 3s ease-in-out infinite;
1519    }
1520    .mn-tab.active span {
1521        color: #4f46e5; font-weight: 800; transform: scale(1.1);
1522    }
1523
1524    /* Active Indicator Line (Top) */
1525    .mn-tab.active::before {
1526        content: ''; position: absolute; top: 0; left: 50%;
1527        transform: translateX(-50%); width: 24px; height: 3px;
1528        background: linear-gradient(90deg, #6366f1, #a855f7);
1529        border-radius: 0 0 4px 4px;
1530        box-shadow: 0 2px 10px rgba(99,102,241, 0.6);
1531        animation: indicatorSlide 0.4s var(--mn-spring);
1532    }
1533
1534    /* Active Indicator Dot (Bottom) */
1535    .mn-tab.active::after {
1536        content: ''; position: absolute; bottom: 6px; width: 4px; height: 4px;
1537        background: #6366f1; border-radius: 50%;
1538        box-shadow: 0 0 12px rgba(99,102,241, 0.8);
1539    }
1540
1541    @keyframes activeFloat {
1542        0%, 100% { transform: translateY(-4px); }
1543        50% { transform: translateY(-7px); }
1544    }
1545    @keyframes activeGlow {
1546        0%, 100% { filter: drop-shadow(0 4px 10px rgba(99,102,241, 0.4)); }
1547        50% { filter: drop-shadow(0 6px 15px rgba(99,102,241, 0.6)); }
1548    }
1549    @keyframes indicatorSlide {
1550        from { width: 0; opacity: 0; }
1551        to { width: 24px; opacity: 1; }
1552    }
1553
1554    .m-contact-trigger {
1555        display: flex !important;
1556        position: fixed; bottom: 105px; right: 20px; z-index: 1000;
1557        width: 52px; height: 52px; background: var(--mn-glass-bg);
1558        backdrop-filter: blur(20px) saturate(210%); border: 1px solid var(--mn-glass-border);
1559        border-radius: 18px; color: var(--mn-indigo); font-size: 1.4rem;
1560        align-items: center; justify-content: center; box-shadow: 0 10px 25px rgba(0,0,0,0.12);
1561        animation: mContactWiggle 5s infinite;
1562    }
1563    @keyframes mContactWiggle {
1564        0%, 80%, 100% { transform: scale(1) rotate(0deg); }
1565        85% { transform: scale(1.1) rotate(-12deg); }
1566        90% { transform: scale(1.1) rotate(12deg); }
1567        95% { transform: scale(1.1) rotate(-12deg); }
1568    }
1569    .m-trigger-dot { position: absolute; top: 14px; right: 14px; width: 10px; height: 10px; background: #ef4444; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 8px rgba(239, 68, 68, 0.4); }
1570
1571    .mn-overlay.show { display: block !important; }
1572    .mn-sheet.show { display: block !important; transform: translateY(0) !important; }
1573    
1574    .mn-overlay { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(15,23,42,0.6); backdrop-filter: blur(4px); }
1575    .mn-sheet { 
1576        display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 2001; 
1577        background: #fff; border-radius: 32px 32px 0 0; transform: translateY(100%); 
1578        transition: transform 0.4s var(--mn-spring); padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); 
1579    }
1580    .mn-sheet-handle { width: 40px; height: 5px; background: #e2e8f0; border-radius: 10px; margin: 12px auto; }
1581    .mn-sheet-header { font-size: 0.85rem; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; text-align: center; margin-bottom: 12px; }
1582    .mn-sheet-card { display: flex; align-items: center; gap: 16px; padding: 16px; background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 20px; text-decoration: none; margin: 8px 16px; }
1583    .mn-card-icon { width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
1584    .mn-card-body { display: flex; flex-direction: column; flex: 1; }
1585    .mn-card-body b { font-size: 1rem; color: #0f172a; }
1586    .mn-card-body span { font-size: 0.85rem; color: #64748b; }
1587}
1588</style>
1589
1590<script>
1591function openContactSheet() {
1592    const overlay = document.getElementById('mnOverlay');
1593    const sheet = document.getElementById('mnSheet');
1594    if(overlay && sheet) {
1595        overlay.classList.add('show');
1596        sheet.classList.add('show');
1597        document.body.style.overflow = 'hidden';
1598    }
1599}
1600function closeContactSheet() {
1601    const overlay = document.getElementById('mnOverlay');
1602    const sheet = document.getElementById('mnSheet');
1603    if(overlay && sheet) {
1604        overlay.classList.remove('show');
1605        sheet.classList.remove('show');
1606        document.body.style.overflow = '';
1607    }
1608}
1609if(document.getElementById('mnOverlay')) {
1610    document.getElementById('mnOverlay').addEventListener('click', closeContactSheet);
1611}
1612</script>
1612
1613</body>
1614</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.