henztech commited on
Commit
6be2b80
·
verified ·
1 Parent(s): f0fe544

Upload 14 files

Browse files
Files changed (15) hide show
  1. .gitattributes +2 -0
  2. index.html +550 -18
  3. logo.png +0 -0
  4. pic1.jpg +0 -0
  5. pic10.jpg +0 -0
  6. pic2.jpg +3 -0
  7. pic3.jpg +3 -0
  8. pic4.jpg +0 -0
  9. pic5.jpg +0 -0
  10. pic6.jpg +0 -0
  11. pic7.jpg +0 -0
  12. pic8.jpg +0 -0
  13. pic9.jpg +0 -0
  14. script.js +257 -0
  15. style.css +1284 -18
.gitattributes CHANGED
@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
33
  *.zip filter=lfs diff=lfs merge=lfs -text
34
  *.zst filter=lfs diff=lfs merge=lfs -text
35
  *tfevents* filter=lfs diff=lfs merge=lfs -text
 
 
 
33
  *.zip filter=lfs diff=lfs merge=lfs -text
34
  *.zst filter=lfs diff=lfs merge=lfs -text
35
  *tfevents* filter=lfs diff=lfs merge=lfs -text
36
+ pic2.jpg filter=lfs diff=lfs merge=lfs -text
37
+ pic3.jpg filter=lfs diff=lfs merge=lfs -text
index.html CHANGED
@@ -1,19 +1,551 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Encrypted Recovery | Premier Cryptocurrency Recovery Service</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ </head>
10
+ <body>
11
+ <header>
12
+ <div class="container">
13
+ <div class="logo-container">
14
+ <div class="logo">
15
+ <!-- Logo will be added by client -->
16
+ <img src="logo.png" alt="Encrypted Recovery Logo">
17
+ </div>
18
+ <h1>Encrypted Recovery</h1>
19
+ </div>
20
+ <nav>
21
+ <ul>
22
+ <li><a href="#home" class="active">Home</a></li>
23
+ <li><a href="#about">About</a></li>
24
+ <li><a href="#services">Services</a></li>
25
+ <li><a href="#testimonials">Testimonials</a></li>
26
+ <li><a href="#contact" class="cta-button">Contact Us</a></li>
27
+ </ul>
28
+ <div class="mobile-menu-btn">
29
+ <span></span>
30
+ <span></span>
31
+ <span></span>
32
+ </div>
33
+ </nav>
34
+ </div>
35
+ </header>
36
+
37
+ <br>
38
+
39
+ <section id="home" class="hero">
40
+ <div class="container">
41
+ <div class="hero-content">
42
+ <h1 class="glowing-text">Recover Your Lost Cryptocurrency</h1>
43
+ <h2>The Premier Solution for Cryptocurrency Recovery</h2>
44
+ <p>We specialize in recovering stolen, locked, or misplaced cryptocurrency funds with industry-leading success rates.</p>
45
+ <div class="hero-buttons">
46
+ <a href="#contact" class="cta-button">Recover My Funds</a>
47
+ <a href="#about" class="secondary-button">Learn More</a>
48
+ </div>
49
+ </div>
50
+ <div class="hero-image">
51
+ <div class="crypto-animation">
52
+ <i class="fab fa-bitcoin"></i>
53
+ <i class="fab fa-ethereum"></i>
54
+ <i class="fas fa-lock-open"></i>
55
+ <i class="fas fa-shield-alt"></i>
56
+ </div>
57
+ </div>
58
+ </div>
59
+ <div class="hero-overlay"></div>
60
+ </section>
61
+
62
+ <section id="about" class="about">
63
+ <div class="container">
64
+ <div class="section-header">
65
+ <h2>About <span class="highlight">Encrypted Recovery</span></h2>
66
+ <div class="underline"></div>
67
+ </div>
68
+ <div class="about-content">
69
+ <div class="about-text">
70
+ <h3>The First & Best Cryptocurrency Recovery Service</h3>
71
+ <p>Encrypted Recovery is the industry pioneer in cryptocurrency and banking funds recovery. We've developed proprietary technology and methodologies to track, locate, and recover digital assets that have been:</p>
72
+ <ul>
73
+ <li><i class="fas fa-check-circle"></i> Stolen by sophisticated hackers</li>
74
+ <li><i class="fas fa-check-circle"></i> Locked due to lost keys or passwords</li>
75
+ <li><i class="fas fa-check-circle"></i> Transferred to incorrect addresses</li>
76
+ <li><i class="fas fa-check-circle"></i> Compromised through scams or fraud</li>
77
+ <li><i class="fas fa-check-circle"></i> Inaccessible due to exchange issues</li>
78
+ </ul>
79
+ <p>With a team of blockchain security experts, cryptographers, and digital forensics specialists, we've successfully recovered millions in digital assets for our clients worldwide.</p>
80
+ </div>
81
+ <div class="about-stats">
82
+ <div class="stat-box">
83
+ <div class="stat-number" data-count="95">0</div>
84
+ <div class="stat-label">Success Rate</div>
85
+ </div>
86
+ <div class="stat-box">
87
+ <div class="stat-number" data-count="1000">0</div>
88
+ <div class="stat-label">Cases Resolved</div>
89
+ </div>
90
+ <div class="stat-box">
91
+ <div class="stat-number" data-count="50">0</div>
92
+ <div class="stat-label">Million $ Recovered</div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ </section>
98
+
99
+ <section id="services" class="services">
100
+ <div class="container">
101
+ <div class="section-header">
102
+ <h2>Our <span class="highlight">Services</span></h2>
103
+ <div class="underline"></div>
104
+ </div>
105
+ <div class="services-grid">
106
+ <div class="service-card">
107
+ <div class="service-icon">
108
+ <i class="fas fa-key"></i>
109
+ </div>
110
+ <h3>Lost Key Recovery</h3>
111
+ <p>Recover access to wallets with lost or forgotten private keys and passwords.</p>
112
+ </div>
113
+ <div class="service-card">
114
+ <div class="service-icon">
115
+ <i class="fas fa-shield-alt"></i>
116
+ </div>
117
+ <h3>Theft Recovery</h3>
118
+ <p>Track and recover cryptocurrency stolen through hacks, phishing, or other malicious activities.</p>
119
+ </div>
120
+ <div class="service-card">
121
+ <div class="service-icon">
122
+ <i class="fas fa-exchange-alt"></i>
123
+ </div>
124
+ <h3>Exchange Issues</h3>
125
+ <p>Resolve issues with exchanges including frozen accounts and failed transactions.</p>
126
+ </div>
127
+ <div class="service-card">
128
+ <div class="service-icon">
129
+ <i class="fas fa-user-secret"></i>
130
+ </div>
131
+ <h3>Scam Recovery</h3>
132
+ <p>Specialized techniques to recover funds lost to investment scams and fraudulent schemes.</p>
133
+ </div>
134
+ <div class="service-card">
135
+ <div class="service-icon">
136
+ <i class="fas fa-university"></i>
137
+ </div>
138
+ <h3>Banking Recovery</h3>
139
+ <p>Recover traditional banking funds lost through wire fraud or unauthorized transfers.</p>
140
+ </div>
141
+ <div class="service-card">
142
+ <div class="service-icon">
143
+ <i class="fas fa-fingerprint"></i>
144
+ </div>
145
+ <h3>Forensic Analysis</h3>
146
+ <p>Advanced blockchain forensics to trace and recover misplaced or stolen digital assets.</p>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </section>
151
+
152
+ <section class="why-choose-us">
153
+ <div class="container">
154
+ <div class="section-header">
155
+ <h2>Why Choose <span class="highlight">Encrypted Recovery</span></h2>
156
+ <div class="underline"></div>
157
+ </div>
158
+ <div class="features">
159
+ <div class="feature">
160
+ <div class="feature-icon">
161
+ <i class="fas fa-trophy"></i>
162
+ </div>
163
+ <div class="feature-content">
164
+ <h3>Industry Pioneers</h3>
165
+ <p>The first and most trusted name in cryptocurrency recovery with years of proven success.</p>
166
+ </div>
167
+ </div>
168
+ <div class="feature">
169
+ <div class="feature-icon">
170
+ <i class="fas fa-lock"></i>
171
+ </div>
172
+ <div class="feature-content">
173
+ <h3>Proprietary Technology</h3>
174
+ <p>Exclusive recovery methods developed by our team of blockchain security experts.</p>
175
+ </div>
176
+ </div>
177
+ <div class="feature">
178
+ <div class="feature-icon">
179
+ <i class="fas fa-user-tie"></i>
180
+ </div>
181
+ <div class="feature-content">
182
+ <h3>Expert Team</h3>
183
+ <p>Cryptographers, forensic specialists, and blockchain analysts with decades of combined experience.</p>
184
+ </div>
185
+ </div>
186
+ <div class="feature">
187
+ <div class="feature-icon">
188
+ <i class="fas fa-handshake"></i>
189
+ </div>
190
+ <div class="feature-content">
191
+ <h3>No Recovery, No Fee</h3>
192
+ <p>We only charge if we successfully recover your funds, guaranteeing our commitment to results.</p>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </section>
198
+
199
+ <!-- NEW TESTIMONIAL GALLERY SECTION -->
200
+ <section id="testimonials" class="testimonials">
201
+ <div class="container">
202
+ <div class="section-header">
203
+ <h2>Client <span class="highlight">Testimonials</span></h2>
204
+ <div class="underline"></div>
205
+ </div>
206
+ <div class="testimonial-gallery">
207
+ <!-- Testimonial 1 -->
208
+ <div class="testimonial-item">
209
+ <div class="testimonial-image-container">
210
+ <img src="pic1.jpg" alt="Client Testimonial" class="testimonial-image">
211
+ <div class="testimonial-image-frame frame-1"></div>
212
+ </div>
213
+ <div class="testimonial-content">
214
+ <div class="testimonial-stars">
215
+ <i class="fas fa-star"></i>
216
+ <i class="fas fa-star"></i>
217
+ <i class="fas fa-star"></i>
218
+ <i class="fas fa-star"></i>
219
+ <i class="fas fa-star"></i>
220
+ </div>
221
+ <p class="testimonial-text">"After losing 5 BTC to a sophisticated phishing attack, I thought my funds were gone forever. Encrypted Recovery tracked and recovered every coin within 3 weeks."</p>
222
+ <h4 class="testimonial-author">Michael T.</h4>
223
+ <div class="testimonial-location">New York, USA</div>
224
+ </div>
225
+ <div class="testimonial-glow"></div>
226
+ </div>
227
+
228
+ <!-- Testimonial 2 -->
229
+ <div class="testimonial-item">
230
+ <div class="testimonial-image-container">
231
+ <img src="pic2.jpg" alt="Client Testimonial" class="testimonial-image">
232
+ <div class="testimonial-image-frame frame-2"></div>
233
+ </div>
234
+ <div class="testimonial-content">
235
+ <div class="testimonial-stars">
236
+ <i class="fas fa-star"></i>
237
+ <i class="fas fa-star"></i>
238
+ <i class="fas fa-star"></i>
239
+ <i class="fas fa-star"></i>
240
+ <i class="fas fa-star"></i>
241
+ </div>
242
+ <p class="testimonial-text">"My exchange account was frozen with over $100,000 in assets. After months of no response, Encrypted Recovery resolved the issue in just 10 days."</p>
243
+ <h4 class="testimonial-author">Sarah L.</h4>
244
+ <div class="testimonial-location">London, UK</div>
245
+ </div>
246
+ <div class="testimonial-glow"></div>
247
+ </div>
248
+
249
+ <!-- Testimonial 3 -->
250
+ <div class="testimonial-item">
251
+ <div class="testimonial-image-container">
252
+ <img src="pic3.jpg" alt="Client Testimonial" class="testimonial-image">
253
+ <div class="testimonial-image-frame frame-3"></div>
254
+ </div>
255
+ <div class="testimonial-content">
256
+ <div class="testimonial-stars">
257
+ <i class="fas fa-star"></i>
258
+ <i class="fas fa-star"></i>
259
+ <i class="fas fa-star"></i>
260
+ <i class="fas fa-star"></i>
261
+ <i class="fas fa-star"></i>
262
+ </div>
263
+ <p class="testimonial-text">"I lost access to my hardware wallet containing my life savings in Ethereum. Encrypted Recovery restored access without compromising security."</p>
264
+ <h4 class="testimonial-author">David K.</h4>
265
+ <div class="testimonial-location">Toronto, Canada</div>
266
+ </div>
267
+ <div class="testimonial-glow"></div>
268
+ </div>
269
+
270
+ <!-- Testimonial 4 -->
271
+ <div class="testimonial-item">
272
+ <div class="testimonial-image-container">
273
+ <img src="pic4.jpg" alt="Client Testimonial" class="testimonial-image">
274
+ <div class="testimonial-image-frame frame-4"></div>
275
+ </div>
276
+ <div class="testimonial-content">
277
+ <div class="testimonial-stars">
278
+ <i class="fas fa-star"></i>
279
+ <i class="fas fa-star"></i>
280
+ <i class="fas fa-star"></i>
281
+ <i class="fas fa-star"></i>
282
+ <i class="fas fa-star"></i>
283
+ </div>
284
+ <p class="testimonial-text">"After falling victim to a DeFi rug pull, Encrypted Recovery traced the funds through multiple wallets and recovered 85% of my initial investment."</p>
285
+ <h4 class="testimonial-author">Jennifer R.</h4>
286
+ <div class="testimonial-location">Singapore</div>
287
+ </div>
288
+ <div class="testimonial-glow"></div>
289
+ </div>
290
+
291
+ <!-- Testimonial 5 -->
292
+ <div class="testimonial-item">
293
+ <div class="testimonial-image-container">
294
+ <img src="pic5.jpg" alt="Client Testimonial" class="testimonial-image">
295
+ <div class="testimonial-image-frame frame-5"></div>
296
+ </div>
297
+ <div class="testimonial-content">
298
+ <div class="testimonial-stars">
299
+ <i class="fas fa-star"></i>
300
+ <i class="fas fa-star"></i>
301
+ <i class="fas fa-star"></i>
302
+ <i class="fas fa-star"></i>
303
+ <i class="fas fa-star"></i>
304
+ </div>
305
+ <p class="testimonial-text">"I accidentally sent a large amount of USDT to the wrong address. Encrypted Recovery not only traced the funds but negotiated the return with the recipient."</p>
306
+ <h4 class="testimonial-author">Robert M.</h4>
307
+ <div class="testimonial-location">Sydney, Australia</div>
308
+ </div>
309
+ <div class="testimonial-glow"></div>
310
+ </div>
311
+
312
+ <!-- Testimonial 6 -->
313
+ <div class="testimonial-item">
314
+ <div class="testimonial-image-container">
315
+ <img src="pic6.jpg" alt="Client Testimonial" class="testimonial-image">
316
+ <div class="testimonial-image-frame frame-6"></div>
317
+ </div>
318
+ <div class="testimonial-content">
319
+ <div class="testimonial-stars">
320
+ <i class="fas fa-star"></i>
321
+ <i class="fas fa-star"></i>
322
+ <i class="fas fa-star"></i>
323
+ <i class="fas fa-star"></i>
324
+ <i class="fas fa-star"></i>
325
+ </div>
326
+ <p class="testimonial-text">"Our company lost significant funds in a business email compromise. Encrypted Recovery worked with law enforcement to track and recover our assets."</p>
327
+ <h4 class="testimonial-author">Thomas H.</h4>
328
+ <div class="testimonial-location">Berlin, Germany</div>
329
+ </div>
330
+ <div class="testimonial-glow"></div>
331
+ </div>
332
+
333
+ <!-- Testimonial 7 -->
334
+ <div class="testimonial-item">
335
+ <div class="testimonial-image-container">
336
+ <img src="pic7.jpg" alt="Client Testimonial" class="testimonial-image">
337
+ <div class="testimonial-image-frame frame-7"></div>
338
+ </div>
339
+ <div class="testimonial-content">
340
+ <div class="testimonial-stars">
341
+ <i class="fas fa-star"></i>
342
+ <i class="fas fa-star"></i>
343
+ <i class="fas fa-star"></i>
344
+ <i class="fas fa-star"></i>
345
+ <i class="fas fa-star"></i>
346
+ </div>
347
+ <p class="testimonial-text">"After my father passed away, we couldn't access his crypto holdings. Encrypted Recovery helped us recover the family inheritance with sensitivity and professionalism."</p>
348
+ <h4 class="testimonial-author">Emily J.</h4>
349
+ <div class="testimonial-location">Chicago, USA</div>
350
+ </div>
351
+ <div class="testimonial-glow"></div>
352
+ </div>
353
+
354
+ <!-- Testimonial 8 -->
355
+ <div class="testimonial-item">
356
+ <div class="testimonial-image-container">
357
+ <img src="pic8.jpg" alt="Client Testimonial" class="testimonial-image">
358
+ <div class="testimonial-image-frame frame-8"></div>
359
+ </div>
360
+ <div class="testimonial-content">
361
+ <div class="testimonial-stars">
362
+ <i class="fas fa-star"></i>
363
+ <i class="fas fa-star"></i>
364
+ <i class="fas fa-star"></i>
365
+ <i class="fas fa-star"></i>
366
+ <i class="fas fa-star"></i>
367
+ </div>
368
+ <p class="testimonial-text">"I invested in what turned out to be a fraudulent ICO. Encrypted Recovery tracked down the operators and through legal pressure, recovered 70% of my investment."</p>
369
+ <h4 class="testimonial-author">Carlos P.</h4>
370
+ <div class="testimonial-location">Madrid, Spain</div>
371
+ </div>
372
+ <div class="testimonial-glow"></div>
373
+ </div>
374
+
375
+ <!-- Testimonial 9 -->
376
+ <div class="testimonial-item">
377
+ <div class="testimonial-image-container">
378
+ <img src="pic9.jpg" alt="Client Testimonial" class="testimonial-image">
379
+ <div class="testimonial-image-frame frame-9"></div>
380
+ </div>
381
+ <div class="testimonial-content">
382
+ <div class="testimonial-stars">
383
+ <i class="fas fa-star"></i>
384
+ <i class="fas fa-star"></i>
385
+ <i class="fas fa-star"></i>
386
+ <i class="fas fa-star"></i>
387
+ <i class="fas fa-star"></i>
388
+ </div>
389
+ <p class="testimonial-text">"My wallet was compromised in a SIM swap attack. Encrypted Recovery not only recovered my funds but helped improve my security to prevent future attacks."</p>
390
+ <h4 class="testimonial-author">Sophia L.</h4>
391
+ <div class="testimonial-location">Dubai, UAE</div>
392
+ </div>
393
+ <div class="testimonial-glow"></div>
394
+ </div>
395
+
396
+ <!-- Testimonial 10 -->
397
+ <div class="testimonial-item">
398
+ <div class="testimonial-image-container">
399
+ <img src="pic10.jpg" alt="Client Testimonial" class="testimonial-image">
400
+ <div class="testimonial-image-frame frame-10"></div>
401
+ </div>
402
+ <div class="testimonial-content">
403
+ <div class="testimonial-stars">
404
+ <i class="fas fa-star"></i>
405
+ <i class="fas fa-star"></i>
406
+ <i class="fas fa-star"></i>
407
+ <i class="fas fa-star"></i>
408
+ <i class="fas fa-star"></i>
409
+ </div>
410
+ <p class="testimonial-text">"I lost access to an old wallet from 2013 containing Bitcoin. Encrypted Recovery's specialized team recovered the private keys and helped me access what is now worth millions."</p>
411
+ <h4 class="testimonial-author">William T.</h4>
412
+ <div class="testimonial-location">Vancouver, Canada</div>
413
+ </div>
414
+ <div class="testimonial-glow"></div>
415
+ </div>
416
+ </div>
417
+ </div>
418
+ </section>
419
+
420
+ <section id="contact" class="contact">
421
+ <div class="container">
422
+ <div class="section-header">
423
+ <h2>Start Your <span class="highlight">Recovery</span></h2>
424
+ <div class="underline"></div>
425
+ </div>
426
+ <div class="contact-content">
427
+ <div class="contact-info">
428
+ <h3>Contact Information</h3>
429
+ <p>Our team of recovery specialists is ready to evaluate your case and provide a confidential consultation.</p>
430
+ <div class="info-item">
431
+ <i class="fas fa-envelope"></i>
432
+ <span>support@encryptedrecovery.com</span>
433
+ </div>
434
+ <div class="info-item">
435
+ <i class="fas fa-phone-alt"></i>
436
+ <span>+1 (706) 248-1811</span>
437
+ </div>
438
+ <div class="info-item">
439
+ <i class="fas fa-lock"></i>
440
+ <span>Secure & Confidential Process</span>
441
+ </div>
442
+ <div class="info-item">
443
+ <i class="fas fa-clock"></i>
444
+ <span>24/7 Emergency Response</span>
445
+ </div>
446
+ <div class="social-links">
447
+ <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
448
+ <a href="#" class="social-icon"><i class="fab fa-telegram"></i></a>
449
+ <a href="#" class="social-icon"><i class="fab fa-discord"></i></a>
450
+ <a href="#" class="social-icon"><i class="fab fa-linkedin"></i></a>
451
+ </div>
452
+ </div>
453
+ <div class="contact-form">
454
+ <h3>Request Recovery Consultation</h3>
455
+ <form id="recovery-form">
456
+ <div class="form-group">
457
+ <input type="text" id="name" name="name" placeholder="Your Name" required>
458
+ </div>
459
+ <div class="form-group">
460
+ <input type="email" id="email" name="email" placeholder="Your Email" required>
461
+ </div>
462
+ <div class="form-group">
463
+ <select id="issue-type" name="issue-type" required>
464
+ <option value="" disabled selected>Select Recovery Type</option>
465
+ <option value="theft">Theft Recovery</option>
466
+ <option value="lost-access">Lost Access/Keys</option>
467
+ <option value="scam">Scam Recovery</option>
468
+ <option value="exchange">Exchange Issues</option>
469
+ <option value="banking">Banking Fraud</option>
470
+ <option value="other">Other</option>
471
+ </select>
472
+ </div>
473
+ <div class="form-group">
474
+ <input type="text" id="amount" name="amount" placeholder="Approximate Amount (USD)" required>
475
+ </div>
476
+ <div class="form-group">
477
+ <textarea id="message" name="message" placeholder="Describe your situation in detail..." required></textarea>
478
+ </div>
479
+ <div class="form-group checkbox-group">
480
+ <input type="checkbox" id="confidentiality" name="confidentiality" required>
481
+ <label for="confidentiality">I understand that all information will be kept confidential</label>
482
+ </div>
483
+ <button type="submit" class="submit-button">Submit Recovery Request</button>
484
+ </form>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </section>
489
+
490
+ <footer>
491
+ <div class="container">
492
+ <div class="footer-content">
493
+ <div class="footer-logo">
494
+ <div class="logo">
495
+ <img src="logo.png" alt="Encrypted Recovery Logo">
496
+ </div>
497
+ <h2>Encrypted Recovery</h2>
498
+ <p>The Premier Cryptocurrency Recovery Service</p>
499
+ </div>
500
+ <div class="footer-links">
501
+ <div class="footer-column">
502
+ <h3>Services</h3>
503
+ <ul>
504
+ <li><a href="#services">Theft Recovery</a></li>
505
+ <li><a href="#services">Lost Key Recovery</a></li>
506
+ <li><a href="#services">Scam Recovery</a></li>
507
+ <li><a href="#services">Exchange Issues</a></li>
508
+ <li><a href="#services">Banking Recovery</a></li>
509
+ </ul>
510
+ </div>
511
+ <div class="footer-column">
512
+ <h3>Company</h3>
513
+ <ul>
514
+ <li><a href="#about">About Us</a></li>
515
+ <li><a href="#testimonials">Success Stories</a></li>
516
+ <li><a href="#">Privacy Policy</a></li>
517
+ <li><a href="#">Terms of Service</a></li>
518
+ <li><a href="#contact">Contact</a></li>
519
+ </ul>
520
+ </div>
521
+ <div class="footer-column">
522
+ <h3>Resources</h3>
523
+ <ul>
524
+ <li><a href="#">Crypto Security Guide</a></li>
525
+ <li><a href="#">Recovery FAQ</a></li>
526
+ <li><a href="#">Blog</a></li>
527
+ <li><a href="#">Case Studies</a></li>
528
+ <li><a href="#">Support</a></li>
529
+ </ul>
530
+ </div>
531
+ </div>
532
+ </div>
533
+ <div class="footer-bottom">
534
+ <p>&copy; 2023 Encrypted Recovery. All rights reserved.</p>
535
+ <div class="payment-methods">
536
+ <i class="fab fa-bitcoin"></i>
537
+ <i class="fab fa-ethereum"></i>
538
+ <i class="fab fa-cc-visa"></i>
539
+ <i class="fab fa-cc-mastercard"></i>
540
+ <i class="fab fa-cc-paypal"></i>
541
+ </div>
542
+ </div>
543
+ </div>
544
+ </footer>
545
+
546
+ <!-- Chatbot Area (for your custom chatbot integration) -->
547
+ <!-- Begin of Chaport Live Chat code --> <script type="text/javascript"> (function(w,d,v3){ w.chaportConfig = { appId : '6824b4c2cf5f32dbec0d30ee' }; if(w.chaport)return;v3=w.chaport={};v3._q=[];v3._l={};v3.q=function(){v3._q.push(arguments)};v3.on=function(e,fn){if(!v3._l[e])v3._l[e]=[];v3._l[e].push(fn)};var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://app.chaport.com/javascripts/insert.js';var ss=d.getElementsByTagName('script')[0];ss.parentNode.insertBefore(s,ss)})(window, document); </script> <!-- End of Chaport Live Chat code -->
548
+
549
+ <script src="script.js"></script>
550
+ </body>
551
  </html>
logo.png ADDED
pic1.jpg ADDED
pic10.jpg ADDED
pic2.jpg ADDED

Git LFS Details

  • SHA256: 501b41200d1609d9d8bd403e4ef7f15c2bef390c77c5cb6752e9647078b7c759
  • Pointer size: 131 Bytes
  • Size of remote file: 223 kB
pic3.jpg ADDED

Git LFS Details

  • SHA256: 69faa8eee940fad930cafb45c843bce4200496e1d782e05a247bae920f1f7ab9
  • Pointer size: 131 Bytes
  • Size of remote file: 142 kB
pic4.jpg ADDED
pic5.jpg ADDED
pic6.jpg ADDED
pic7.jpg ADDED
pic8.jpg ADDED
pic9.jpg ADDED
script.js ADDED
@@ -0,0 +1,257 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener("DOMContentLoaded", () => {
2
+ // Mobile Menu Toggle
3
+ const mobileMenuBtn = document.querySelector(".mobile-menu-btn")
4
+ const navMenu = document.querySelector("nav ul")
5
+
6
+ if (mobileMenuBtn) {
7
+ mobileMenuBtn.addEventListener("click", () => {
8
+ navMenu.classList.toggle("active")
9
+ mobileMenuBtn.classList.toggle("active")
10
+ })
11
+ }
12
+
13
+ // Sticky Header
14
+ const header = document.querySelector("header")
15
+ window.addEventListener("scroll", () => {
16
+ if (window.scrollY > 50) {
17
+ header.style.background = "rgba(6, 16, 24, 0.95)"
18
+ header.style.boxShadow = "0 5px 15px rgba(0, 0, 0, 0.1)"
19
+ } else {
20
+ header.style.background = "rgba(6, 16, 24, 0.9)"
21
+ header.style.boxShadow = "none"
22
+ }
23
+ })
24
+
25
+ // Testimonial Slider
26
+ const testimonialTrack = document.querySelector(".testimonial-track")
27
+ const testimonials = document.querySelectorAll(".testimonial")
28
+ const prevBtn = document.querySelector(".prev-btn")
29
+ const nextBtn = document.querySelector(".next-btn")
30
+ const dotsContainer = document.querySelector(".slider-dots")
31
+
32
+ if (testimonialTrack && testimonials.length > 0) {
33
+ let currentIndex = 0
34
+ let slideWidth = testimonials[0].offsetWidth
35
+ let slidesToShow = 1
36
+
37
+ // Responsive slidesToShow
38
+ function updateSlidesToShow() {
39
+ if (window.innerWidth >= 1024) {
40
+ slidesToShow = 3
41
+ } else if (window.innerWidth >= 768) {
42
+ slidesToShow = 2
43
+ } else {
44
+ slidesToShow = 1
45
+ }
46
+ updateSlider()
47
+ }
48
+
49
+ // Create dots
50
+ function createDots() {
51
+ dotsContainer.innerHTML = ""
52
+ const totalDots = Math.ceil(testimonials.length / slidesToShow)
53
+
54
+ for (let i = 0; i < totalDots; i++) {
55
+ const dot = document.createElement("div")
56
+ dot.classList.add("dot")
57
+ if (i === 0) dot.classList.add("active")
58
+ dot.addEventListener("click", () => {
59
+ goToSlide(i)
60
+ })
61
+ dotsContainer.appendChild(dot)
62
+ }
63
+ }
64
+
65
+ // Update slider position
66
+ function updateSlider() {
67
+ slideWidth = testimonials[0].offsetWidth
68
+ testimonialTrack.style.transform = `translateX(-${currentIndex * slideWidth * slidesToShow}px)`
69
+
70
+ // Update dots
71
+ const dots = document.querySelectorAll(".dot")
72
+ dots.forEach((dot, index) => {
73
+ dot.classList.toggle("active", index === Math.floor(currentIndex / slidesToShow))
74
+ })
75
+ }
76
+
77
+ // Go to specific slide
78
+ function goToSlide(index) {
79
+ currentIndex = index
80
+ updateSlider()
81
+ }
82
+
83
+ // Next slide
84
+ function nextSlide() {
85
+ if (currentIndex < Math.ceil(testimonials.length / slidesToShow) - 1) {
86
+ currentIndex++
87
+ } else {
88
+ currentIndex = 0
89
+ }
90
+ updateSlider()
91
+ }
92
+
93
+ // Previous slide
94
+ function prevSlide() {
95
+ if (currentIndex > 0) {
96
+ currentIndex--
97
+ } else {
98
+ currentIndex = Math.ceil(testimonials.length / slidesToShow) - 1
99
+ }
100
+ updateSlider()
101
+ }
102
+
103
+ // Event listeners
104
+ if (nextBtn) nextBtn.addEventListener("click", nextSlide)
105
+ if (prevBtn) prevBtn.addEventListener("click", prevSlide)
106
+
107
+ // Auto slide
108
+ let slideInterval = setInterval(nextSlide, 5000)
109
+
110
+ // Pause on hover
111
+ testimonialTrack.addEventListener("mouseenter", () => {
112
+ clearInterval(slideInterval)
113
+ })
114
+
115
+ testimonialTrack.addEventListener("mouseleave", () => {
116
+ slideInterval = setInterval(nextSlide, 5000)
117
+ })
118
+
119
+ // Initialize
120
+ window.addEventListener("resize", () => {
121
+ updateSlidesToShow()
122
+ createDots()
123
+ })
124
+
125
+ updateSlidesToShow()
126
+ createDots()
127
+ }
128
+
129
+ // Animated Counter
130
+ const statNumbers = document.querySelectorAll(".stat-number")
131
+
132
+ function animateCounter(el) {
133
+ const target = Number.parseInt(el.getAttribute("data-count"))
134
+ const duration = 2000 // 2 seconds
135
+ const step = target / (duration / 16) // 60fps
136
+ let current = 0
137
+
138
+ const timer = setInterval(() => {
139
+ current += step
140
+ if (current >= target) {
141
+ clearInterval(timer)
142
+ el.textContent = target
143
+ } else {
144
+ el.textContent = Math.floor(current)
145
+ }
146
+ }, 16)
147
+ }
148
+
149
+ // Intersection Observer for counter animation
150
+ const observerOptions = {
151
+ threshold: 0.5,
152
+ }
153
+
154
+ const observer = new IntersectionObserver((entries) => {
155
+ entries.forEach((entry) => {
156
+ if (entry.isIntersecting) {
157
+ animateCounter(entry.target)
158
+ observer.unobserve(entry.target)
159
+ }
160
+ })
161
+ }, observerOptions)
162
+
163
+ statNumbers.forEach((number) => {
164
+ observer.observe(number)
165
+ })
166
+
167
+ // Smooth scrolling for anchor links
168
+ document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
169
+ anchor.addEventListener("click", function (e) {
170
+ e.preventDefault()
171
+
172
+ const targetId = this.getAttribute("href")
173
+ if (targetId === "#") return
174
+
175
+ const targetElement = document.querySelector(targetId)
176
+ if (targetElement) {
177
+ // Close mobile menu if open
178
+ if (navMenu.classList.contains("active")) {
179
+ navMenu.classList.remove("active")
180
+ mobileMenuBtn.classList.remove("active")
181
+ }
182
+
183
+ window.scrollTo({
184
+ top: targetElement.offsetTop - 80,
185
+ behavior: "smooth",
186
+ })
187
+ }
188
+ })
189
+ })
190
+
191
+ // Form submission
192
+ const recoveryForm = document.getElementById("recovery-form")
193
+ if (recoveryForm) {
194
+ recoveryForm.addEventListener("submit", function (e) {
195
+ e.preventDefault()
196
+
197
+ // Simulate form submission
198
+ const submitButton = this.querySelector(".submit-button")
199
+ submitButton.textContent = "Submitting..."
200
+ submitButton.disabled = true
201
+
202
+ // Simulate API call
203
+ setTimeout(() => {
204
+ alert("Thank you for your submission! Our recovery specialists will contact you shortly.")
205
+ this.reset()
206
+ submitButton.textContent = "Submit Recovery Request"
207
+ submitButton.disabled = false
208
+ }, 1500)
209
+ })
210
+ }
211
+
212
+ // Floating CTA button animation
213
+ const floatingBtn = document.querySelector(".floating-button")
214
+ if (floatingBtn) {
215
+ setInterval(() => {
216
+ floatingBtn.classList.add("pulse")
217
+ setTimeout(() => {
218
+ floatingBtn.classList.remove("pulse")
219
+ }, 1000)
220
+ }, 3000)
221
+
222
+ floatingBtn.addEventListener("click", () => {
223
+ document.querySelector("#contact").scrollIntoView({
224
+ behavior: "smooth",
225
+ block: "start",
226
+ })
227
+ })
228
+ }
229
+
230
+ // Add active class to nav links based on scroll position
231
+ const sections = document.querySelectorAll("section[id]")
232
+ const navLinks = document.querySelectorAll("nav ul li a")
233
+
234
+ function highlightNavLink() {
235
+ const scrollPosition = window.scrollY + 100
236
+
237
+ sections.forEach((section) => {
238
+ const sectionTop = section.offsetTop
239
+ const sectionHeight = section.offsetHeight
240
+ const sectionId = section.getAttribute("id")
241
+
242
+ if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
243
+ navLinks.forEach((link) => {
244
+ link.classList.remove("active")
245
+ if (link.getAttribute("href") === `#${sectionId}`) {
246
+ link.classList.add("active")
247
+ }
248
+ })
249
+ }
250
+ })
251
+ }
252
+
253
+ window.addEventListener("scroll", highlightNavLink)
254
+
255
+ // Initial call to set active link
256
+ highlightNavLink()
257
+ })
style.css CHANGED
@@ -1,28 +1,1294 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
  }
 
1
+ /* Base Styles and Variables */
2
+ :root {
3
+ --primary-color: #00c4ff;
4
+ --primary-dark: #0099cc;
5
+ --secondary-color: #7b3dff;
6
+ --accent-color: #ff3d77;
7
+ --dark-bg: #0a1929;
8
+ --darker-bg: #061018;
9
+ --light-text: #f0f8ff;
10
+ --gray-text: #a0b0c0;
11
+ --card-bg: rgba(16, 32, 48, 0.7);
12
+ --card-border: rgba(0, 196, 255, 0.2);
13
+ --success-color: #00e676;
14
+ --warning-color: #ffab00;
15
+ --error-color: #ff5252;
16
+ --gradient-bg: linear-gradient(135deg, var(--dark-bg), var(--darker-bg));
17
+ --glow-shadow: 0 0 15px rgba(0, 196, 255, 0.5);
18
+ --card-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
19
+ --transition-speed: 0.3s;
20
+ }
21
+
22
+ * {
23
+ margin: 0;
24
+ padding: 0;
25
+ box-sizing: border-box;
26
+ }
27
+
28
+ html {
29
+ scroll-behavior: smooth;
30
+ }
31
+
32
  body {
33
+ font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
34
+ background: var(--gradient-bg);
35
+ color: var(--light-text);
36
+ line-height: 1.6;
37
+ overflow-x: hidden;
38
+ }
39
+
40
+ .container {
41
+ width: 100%;
42
+ max-width: 1200px;
43
+ margin: 0 auto;
44
+ padding: 0 20px;
45
+ }
46
+
47
+ a {
48
+ text-decoration: none;
49
+ color: var(--light-text);
50
+ transition: color var(--transition-speed);
51
+ }
52
+
53
+ a:hover {
54
+ color: var(--primary-color);
55
+ }
56
+
57
+ ul {
58
+ list-style: none;
59
+ }
60
+
61
+ img {
62
+ max-width: 100%;
63
+ }
64
+
65
+ .section-header {
66
+ text-align: center;
67
+ margin-bottom: 50px;
68
+ }
69
+
70
+ .section-header h2 {
71
+ font-size: 2.5rem;
72
+ margin-bottom: 15px;
73
+ position: relative;
74
+ display: inline-block;
75
+ }
76
+
77
+ .highlight {
78
+ color: var(--primary-color);
79
+ position: relative;
80
+ }
81
+
82
+ .underline {
83
+ height: 4px;
84
+ width: 80px;
85
+ background: var(--primary-color);
86
+ margin: 0 auto;
87
+ position: relative;
88
+ border-radius: 2px;
89
+ }
90
+
91
+ .underline::before {
92
+ content: "";
93
+ position: absolute;
94
+ height: 4px;
95
+ width: 40px;
96
+ background: var(--secondary-color);
97
+ left: -20px;
98
+ border-radius: 2px;
99
+ }
100
+
101
+ /* Buttons */
102
+ .cta-button {
103
+ display: inline-block;
104
+ background: var(--primary-color);
105
+ color: var(--dark-bg);
106
+ padding: 12px 30px;
107
+ border-radius: 30px;
108
+ font-weight: 600;
109
+ transition: all var(--transition-speed);
110
+ border: 2px solid var(--primary-color);
111
+ box-shadow: var(--glow-shadow);
112
+ text-transform: uppercase;
113
+ letter-spacing: 1px;
114
+ font-size: 0.9rem;
115
+ }
116
+
117
+ .cta-button:hover {
118
+ background: transparent;
119
+ color: var(--primary-color);
120
+ transform: translateY(-3px);
121
+ }
122
+
123
+ .secondary-button {
124
+ display: inline-block;
125
+ background: transparent;
126
+ color: var(--light-text);
127
+ padding: 12px 30px;
128
+ border-radius: 30px;
129
+ font-weight: 600;
130
+ transition: all var(--transition-speed);
131
+ border: 2px solid var(--light-text);
132
+ text-transform: uppercase;
133
+ letter-spacing: 1px;
134
+ font-size: 0.9rem;
135
+ }
136
+
137
+ .secondary-button:hover {
138
+ background: var(--light-text);
139
+ color: var(--dark-bg);
140
+ transform: translateY(-3px);
141
+ }
142
+
143
+ .submit-button {
144
+ width: 100%;
145
+ background: var(--primary-color);
146
+ color: var(--dark-bg);
147
+ padding: 14px;
148
+ border: none;
149
+ border-radius: 5px;
150
+ font-weight: 600;
151
+ cursor: pointer;
152
+ transition: all var(--transition-speed);
153
+ text-transform: uppercase;
154
+ letter-spacing: 1px;
155
+ font-size: 1rem;
156
+ box-shadow: var(--glow-shadow);
157
+ }
158
+
159
+ .submit-button:hover {
160
+ background: var(--primary-dark);
161
+ transform: translateY(-2px);
162
+ }
163
+
164
+ /* Header */
165
+ header {
166
+ position: fixed;
167
+ top: 0;
168
+ left: 0;
169
+ width: 100%;
170
+ z-index: 1000;
171
+ background: rgba(6, 16, 24, 0.9);
172
+ backdrop-filter: blur(10px);
173
+ border-bottom: 1px solid rgba(0, 196, 255, 0.1);
174
+ transition: all var(--transition-speed);
175
+ }
176
+
177
+ header .container {
178
+ display: flex;
179
+ justify-content: space-between;
180
+ align-items: center;
181
+ padding: 15px 20px;
182
+ }
183
+
184
+ .logo-container {
185
+ display: flex;
186
+ align-items: center;
187
+ }
188
+
189
+ .logo {
190
+ width: 50px;
191
+ height: 50px;
192
+ margin-right: 15px;
193
+ position: relative;
194
+ border-radius: 10px;
195
+ overflow: hidden;
196
+ box-shadow: var(--glow-shadow);
197
+ }
198
+
199
+ .logo img {
200
+ width: 100%;
201
+ height: 100%;
202
+ object-fit: cover;
203
+ display: block;
204
+ }
205
+
206
+ .logo-container h1 {
207
+ font-size: 1.5rem;
208
+ font-weight: 700;
209
+ color: var(--light-text);
210
+ }
211
+
212
+ nav ul {
213
+ display: flex;
214
+ }
215
+
216
+ nav ul li {
217
+ margin-left: 30px;
218
+ }
219
+
220
+ nav ul li a {
221
+ font-weight: 500;
222
+ position: relative;
223
+ padding: 5px 0;
224
+ }
225
+
226
+ nav ul li a::after {
227
+ content: "";
228
+ position: absolute;
229
+ bottom: 0;
230
+ left: 0;
231
+ width: 0;
232
+ height: 2px;
233
+ background: var(--primary-color);
234
+ transition: width var(--transition-speed);
235
+ }
236
+
237
+ nav ul li a:hover::after,
238
+ nav ul li a.active::after {
239
+ width: 100%;
240
+ }
241
+
242
+ nav ul li a.cta-button {
243
+ padding: 8px 20px;
244
+ }
245
+
246
+ nav ul li a.cta-button::after {
247
+ display: none;
248
+ }
249
+
250
+ .mobile-menu-btn {
251
+ display: none;
252
+ flex-direction: column;
253
+ cursor: pointer;
254
+ }
255
+
256
+ .mobile-menu-btn span {
257
+ width: 30px;
258
+ height: 3px;
259
+ background: var(--light-text);
260
+ margin: 3px 0;
261
+ border-radius: 3px;
262
+ transition: all var(--transition-speed);
263
+ }
264
+
265
+ /* Hero Section */
266
+ .hero {
267
+ height: 100vh;
268
+ display: flex;
269
+ align-items: center;
270
+ position: relative;
271
+ padding: 100px 0;
272
+ overflow: hidden;
273
+ background: url("https://images.unsplash.com/photo-1639762681057-408e52192e55?auto=format&fit=crop&q=80&w=2232&ixlib=rb-4.0.3")
274
+ no-repeat center center;
275
+ background-size: cover;
276
+ }
277
+
278
+ .hero-overlay {
279
+ position: absolute;
280
+ top: 0;
281
+ left: 0;
282
+ width: 100%;
283
+ height: 100%;
284
+ background: rgba(6, 16, 24, 0.85);
285
+ z-index: 1;
286
+ }
287
+
288
+ .hero .container {
289
+ position: relative;
290
+ z-index: 2;
291
+ display: flex;
292
+ justify-content: space-between;
293
+ align-items: center;
294
+ }
295
+
296
+ .hero-content {
297
+ max-width: 600px;
298
+ }
299
+
300
+ .hero-content h1 {
301
+ font-size: 3.5rem;
302
+ margin-bottom: 20px;
303
+ line-height: 1.2;
304
+ }
305
+
306
+ .glowing-text {
307
+ text-shadow: 0 0 10px rgba(0, 196, 255, 0.7);
308
+ color: var(--light-text);
309
+ }
310
+
311
+ .hero-content h2 {
312
+ font-size: 1.8rem;
313
+ margin-bottom: 20px;
314
+ color: var(--primary-color);
315
+ }
316
+
317
+ .hero-content p {
318
+ font-size: 1.2rem;
319
+ margin-bottom: 30px;
320
+ color: var(--gray-text);
321
+ }
322
+
323
+ .hero-buttons {
324
+ display: flex;
325
+ gap: 20px;
326
+ }
327
+
328
+ .hero-image {
329
+ flex: 0 0 40%;
330
+ position: relative;
331
+ }
332
+
333
+ .crypto-animation {
334
+ position: relative;
335
+ width: 300px;
336
+ height: 300px;
337
+ display: flex;
338
+ align-items: center;
339
+ justify-content: center;
340
+ }
341
+
342
+ .crypto-animation i {
343
+ position: absolute;
344
+ font-size: 4rem;
345
+ color: var(--primary-color);
346
+ opacity: 0.8;
347
+ animation: float 6s infinite ease-in-out;
348
+ }
349
+
350
+ .crypto-animation i:nth-child(1) {
351
+ top: 20%;
352
+ left: 20%;
353
+ animation-delay: 0s;
354
+ }
355
+
356
+ .crypto-animation i:nth-child(2) {
357
+ top: 60%;
358
+ left: 30%;
359
+ animation-delay: 1.5s;
360
+ }
361
+
362
+ .crypto-animation i:nth-child(3) {
363
+ top: 30%;
364
+ right: 20%;
365
+ animation-delay: 3s;
366
+ }
367
+
368
+ .crypto-animation i:nth-child(4) {
369
+ bottom: 20%;
370
+ right: 30%;
371
+ animation-delay: 4.5s;
372
+ }
373
+
374
+ @keyframes float {
375
+ 0%,
376
+ 100% {
377
+ transform: translateY(0) rotate(0deg);
378
+ }
379
+ 50% {
380
+ transform: translateY(-20px) rotate(10deg);
381
+ }
382
+ }
383
+
384
+ /* About Section */
385
+ .about {
386
+ padding: 100px 0;
387
+ background: var(--darker-bg);
388
+ position: relative;
389
+ }
390
+
391
+ .about::before {
392
+ content: "";
393
+ position: absolute;
394
+ top: 0;
395
+ left: 0;
396
+ width: 100%;
397
+ height: 100%;
398
+ background: url("https://images.unsplash.com/photo-1639322537228-f710d846310a?auto=format&fit=crop&q=80&w=2232&ixlib=rb-4.0.3")
399
+ no-repeat center center;
400
+ background-size: cover;
401
+ opacity: 0.05;
402
+ z-index: 0;
403
+ }
404
+
405
+ .about-content {
406
+ display: flex;
407
+ flex-wrap: wrap;
408
+ gap: 50px;
409
+ position: relative;
410
+ z-index: 1;
411
+ }
412
+
413
+ .about-text {
414
+ flex: 1;
415
+ min-width: 300px;
416
+ }
417
+
418
+ .about-text h3 {
419
+ font-size: 1.8rem;
420
+ margin-bottom: 20px;
421
+ color: var(--primary-color);
422
+ }
423
+
424
+ .about-text p {
425
+ margin-bottom: 20px;
426
+ color: var(--gray-text);
427
+ font-size: 1.1rem;
428
+ }
429
+
430
+ .about-text ul {
431
+ margin-bottom: 20px;
432
+ }
433
+
434
+ .about-text ul li {
435
+ margin-bottom: 10px;
436
+ display: flex;
437
+ align-items: center;
438
+ }
439
+
440
+ .about-text ul li i {
441
+ color: var(--success-color);
442
+ margin-right: 10px;
443
+ font-size: 1.2rem;
444
+ }
445
+
446
+ .about-stats {
447
+ display: flex;
448
+ flex-wrap: wrap;
449
+ gap: 30px;
450
+ justify-content: center;
451
+ }
452
+
453
+ .stat-box {
454
+ background: var(--card-bg);
455
+ border: 1px solid var(--card-border);
456
+ border-radius: 10px;
457
+ padding: 30px;
458
+ text-align: center;
459
+ min-width: 200px;
460
+ flex: 1;
461
+ box-shadow: var(--card-shadow);
462
+ transition: transform var(--transition-speed);
463
+ }
464
+
465
+ .stat-box:hover {
466
+ transform: translateY(-10px);
467
+ }
468
+
469
+ .stat-number {
470
+ font-size: 3rem;
471
+ font-weight: 700;
472
+ margin-bottom: 10px;
473
+ color: var(--primary-color);
474
+ position: relative;
475
+ }
476
+
477
+ .stat-number::after {
478
+ content: "%";
479
+ font-size: 1.5rem;
480
+ position: absolute;
481
+ top: 10px;
482
+ right: -20px;
483
+ }
484
+
485
+ .stat-box:nth-child(2) .stat-number::after {
486
+ content: "+";
487
+ }
488
+
489
+ .stat-box:nth-child(3) .stat-number::after {
490
+ content: "M+";
491
+ }
492
+
493
+ .stat-label {
494
+ font-size: 1.2rem;
495
+ color: var(--gray-text);
496
+ }
497
+
498
+ /* Services Section */
499
+ .services {
500
+ padding: 100px 0;
501
+ background: var(--dark-bg);
502
+ position: relative;
503
+ }
504
+
505
+ .services-grid {
506
+ display: grid;
507
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
508
+ gap: 30px;
509
+ }
510
+
511
+ .service-card {
512
+ background: var(--card-bg);
513
+ border: 1px solid var(--card-border);
514
+ border-radius: 10px;
515
+ padding: 30px;
516
+ text-align: center;
517
+ transition: all var(--transition-speed);
518
+ box-shadow: var(--card-shadow);
519
+ }
520
+
521
+ .service-card:hover {
522
+ transform: translateY(-10px);
523
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
524
+ border-color: var(--primary-color);
525
+ }
526
+
527
+ .service-icon {
528
+ width: 80px;
529
+ height: 80px;
530
+ background: rgba(0, 196, 255, 0.1);
531
+ border-radius: 50%;
532
+ display: flex;
533
+ align-items: center;
534
+ justify-content: center;
535
+ margin: 0 auto 20px;
536
+ transition: all var(--transition-speed);
537
+ }
538
+
539
+ .service-card:hover .service-icon {
540
+ background: var(--primary-color);
541
+ }
542
+
543
+ .service-icon i {
544
+ font-size: 2rem;
545
+ color: var(--primary-color);
546
+ transition: all var(--transition-speed);
547
+ }
548
+
549
+ .service-card:hover .service-icon i {
550
+ color: var(--dark-bg);
551
+ }
552
+
553
+ .service-card h3 {
554
+ font-size: 1.5rem;
555
+ margin-bottom: 15px;
556
+ color: var(--light-text);
557
+ }
558
+
559
+ .service-card p {
560
+ color: var(--gray-text);
561
+ }
562
+
563
+ /* Why Choose Us Section */
564
+ .why-choose-us {
565
+ padding: 100px 0;
566
+ background: var(--darker-bg);
567
+ position: relative;
568
+ }
569
+
570
+ .features {
571
+ display: grid;
572
+ grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
573
+ gap: 30px;
574
+ }
575
+
576
+ .feature {
577
+ display: flex;
578
+ align-items: flex-start;
579
+ background: var(--card-bg);
580
+ border: 1px solid var(--card-border);
581
+ border-radius: 10px;
582
+ padding: 30px;
583
+ transition: all var(--transition-speed);
584
+ box-shadow: var(--card-shadow);
585
+ }
586
+
587
+ .feature:hover {
588
+ transform: translateY(-5px);
589
+ border-color: var(--primary-color);
590
+ }
591
+
592
+ .feature-icon {
593
+ flex: 0 0 60px;
594
+ height: 60px;
595
+ background: rgba(0, 196, 255, 0.1);
596
+ border-radius: 50%;
597
+ display: flex;
598
+ align-items: center;
599
+ justify-content: center;
600
+ margin-right: 20px;
601
+ transition: all var(--transition-speed);
602
+ }
603
+
604
+ .feature:hover .feature-icon {
605
+ background: var(--primary-color);
606
+ }
607
+
608
+ .feature-icon i {
609
+ font-size: 1.5rem;
610
+ color: var(--primary-color);
611
+ transition: all var(--transition-speed);
612
+ }
613
+
614
+ .feature:hover .feature-icon i {
615
+ color: var(--dark-bg);
616
+ }
617
+
618
+ .feature-content h3 {
619
+ font-size: 1.3rem;
620
+ margin-bottom: 10px;
621
+ color: var(--light-text);
622
+ }
623
+
624
+ .feature-content p {
625
+ color: var(--gray-text);
626
+ }
627
+
628
+ /* Testimonials Section - NEW GALLERY STYLE */
629
+ .testimonials {
630
+ padding: 100px 0;
631
+ background: var(--dark-bg);
632
+ position: relative;
633
+ }
634
+
635
+ .testimonials::before {
636
+ content: "";
637
+ position: absolute;
638
+ top: 0;
639
+ left: 0;
640
+ width: 100%;
641
+ height: 100%;
642
+ background: url("https://images.unsplash.com/photo-1639322537228-f710d846310a?auto=format&fit=crop&q=80&w=2232&ixlib=rb-4.0.3")
643
+ no-repeat center center;
644
+ background-size: cover;
645
+ opacity: 0.03;
646
+ z-index: 0;
647
+ }
648
+
649
+ .testimonial-gallery {
650
+ display: grid;
651
+ grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
652
+ gap: 30px;
653
+ position: relative;
654
+ z-index: 1;
655
+ }
656
+
657
+ .testimonial-item {
658
+ background: var(--card-bg);
659
+ border: 1px solid var(--card-border);
660
+ border-radius: 15px;
661
+ overflow: hidden;
662
+ transition: all 0.4s ease;
663
+ box-shadow: var(--card-shadow);
664
+ position: relative;
665
+ }
666
+
667
+ .testimonial-item:hover {
668
+ transform: translateY(-10px);
669
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
670
+ border-color: var(--primary-color);
671
+ }
672
+
673
+ .testimonial-image-container {
674
+ position: relative;
675
+ width: 100%;
676
+ height: 300px;
677
+ overflow: hidden;
678
+ }
679
+
680
+ .testimonial-image-frame {
681
+ position: absolute;
682
+ top: 0;
683
+ left: 0;
684
+ width: 100%;
685
+ height: 100%;
686
+ z-index: 2;
687
+ pointer-events: none;
688
+ border: 2px solid var(--primary-color);
689
+ box-shadow: inset 0 0 20px rgba(0, 196, 255, 0.3);
690
+ }
691
+
692
+ .testimonial-image-frame::before {
693
+ content: "";
694
+ position: absolute;
695
+ top: -2px;
696
+ left: -2px;
697
+ right: -2px;
698
+ bottom: -2px;
699
+ border: 2px solid transparent;
700
+ border-image: linear-gradient(
701
+ 45deg,
702
+ var(--primary-color),
703
+ var(--secondary-color),
704
+ var(--accent-color),
705
+ var(--primary-color)
706
+ )
707
+ 1;
708
+ animation: border-rotate 8s linear infinite;
709
+ z-index: 1;
710
+ }
711
+
712
+ .testimonial-image-frame::after {
713
+ content: "";
714
+ position: absolute;
715
+ top: 0;
716
+ left: 0;
717
+ width: 100%;
718
+ height: 100%;
719
+ background: linear-gradient(to bottom, transparent 80%, rgba(6, 16, 24, 0.8) 100%);
720
+ z-index: 2;
721
+ }
722
+
723
+ .testimonial-image {
724
+ width: 100%;
725
+ height: 100%;
726
+ object-fit: cover;
727
+ transition: transform 0.5s ease;
728
+ }
729
+
730
+ .testimonial-item:hover .testimonial-image {
731
+ transform: scale(1.05);
732
+ }
733
+
734
+ .testimonial-content {
735
+ padding: 20px;
736
+ text-align: center;
737
+ }
738
+
739
+ .testimonial-stars {
740
+ margin-bottom: 15px;
741
+ }
742
+
743
+ .testimonial-stars i {
744
+ color: #ffab00;
745
+ font-size: 1.2rem;
746
+ margin: 0 2px;
747
+ }
748
+
749
+ .testimonial-text {
750
+ color: var(--gray-text);
751
+ font-style: italic;
752
+ margin-bottom: 15px;
753
+ font-size: 1rem;
754
+ line-height: 1.6;
755
+ }
756
+
757
+ .testimonial-author {
758
+ font-weight: 600;
759
+ color: var(--light-text);
760
+ font-size: 1.1rem;
761
+ margin-bottom: 5px;
762
+ }
763
+
764
+ .testimonial-location {
765
+ color: var(--primary-color);
766
+ font-size: 0.9rem;
767
+ }
768
+
769
+ .testimonial-glow {
770
+ position: absolute;
771
+ top: 0;
772
+ left: 0;
773
+ width: 100%;
774
+ height: 100%;
775
+ pointer-events: none;
776
+ z-index: 3;
777
+ border-radius: 15px;
778
+ box-shadow: 0 0 20px rgba(0, 196, 255, 0);
779
+ transition: box-shadow 0.4s ease;
780
+ }
781
+
782
+ .testimonial-item:hover .testimonial-glow {
783
+ box-shadow: 0 0 20px rgba(0, 196, 255, 0.5);
784
+ }
785
+
786
+ @keyframes border-rotate {
787
+ 0% {
788
+ border-image-source: linear-gradient(
789
+ 0deg,
790
+ var(--primary-color),
791
+ var(--secondary-color),
792
+ var(--accent-color),
793
+ var(--primary-color)
794
+ );
795
+ }
796
+ 100% {
797
+ border-image-source: linear-gradient(
798
+ 360deg,
799
+ var(--primary-color),
800
+ var(--secondary-color),
801
+ var(--accent-color),
802
+ var(--primary-color)
803
+ );
804
+ }
805
+ }
806
+
807
+ /* Contact Section */
808
+ .contact {
809
+ padding: 100px 0;
810
+ background: var(--darker-bg);
811
+ position: relative;
812
+ }
813
+
814
+ .contact::before {
815
+ content: "";
816
+ position: absolute;
817
+ top: 0;
818
+ left: 0;
819
+ width: 100%;
820
+ height: 100%;
821
+ background: url("https://images.unsplash.com/photo-1639322537228-f710d846310a?auto=format&fit=crop&q=80&w=2232&ixlib=rb-4.0.3")
822
+ no-repeat center center;
823
+ background-size: cover;
824
+ opacity: 0.05;
825
+ z-index: 0;
826
+ }
827
+
828
+ .contact-content {
829
+ display: flex;
830
+ flex-wrap: wrap;
831
+ gap: 50px;
832
+ position: relative;
833
+ z-index: 1;
834
+ }
835
+
836
+ .contact-info {
837
+ flex: 1;
838
+ min-width: 300px;
839
+ }
840
+
841
+ .contact-info h3 {
842
+ font-size: 1.8rem;
843
+ margin-bottom: 20px;
844
+ color: var(--primary-color);
845
+ }
846
+
847
+ .contact-info p {
848
+ margin-bottom: 30px;
849
+ color: var(--gray-text);
850
+ }
851
+
852
+ .info-item {
853
+ display: flex;
854
+ align-items: center;
855
+ margin-bottom: 20px;
856
+ }
857
+
858
+ .info-item i {
859
+ width: 40px;
860
+ height: 40px;
861
+ background: rgba(0, 196, 255, 0.1);
862
+ border-radius: 50%;
863
+ display: flex;
864
+ align-items: center;
865
+ justify-content: center;
866
+ margin-right: 15px;
867
+ color: var(--primary-color);
868
+ font-size: 1.2rem;
869
+ }
870
+
871
+ .info-item span {
872
+ color: var(--light-text);
873
+ }
874
+
875
+ .social-links {
876
+ display: flex;
877
+ gap: 15px;
878
+ margin-top: 30px;
879
+ }
880
+
881
+ .social-icon {
882
+ width: 40px;
883
+ height: 40px;
884
+ background: rgba(0, 196, 255, 0.1);
885
+ border-radius: 50%;
886
+ display: flex;
887
+ align-items: center;
888
+ justify-content: center;
889
+ color: var(--primary-color);
890
+ transition: all var(--transition-speed);
891
+ }
892
+
893
+ .social-icon:hover {
894
+ background: var(--primary-color);
895
+ color: var(--dark-bg);
896
+ transform: translateY(-5px);
897
+ }
898
+
899
+ .contact-form {
900
+ flex: 1;
901
+ min-width: 300px;
902
+ background: var(--card-bg);
903
+ border: 1px solid var(--card-border);
904
+ border-radius: 10px;
905
+ padding: 30px;
906
+ box-shadow: var(--card-shadow);
907
+ }
908
+
909
+ .contact-form h3 {
910
+ font-size: 1.5rem;
911
+ margin-bottom: 20px;
912
+ color: var(--light-text);
913
+ text-align: center;
914
+ }
915
+
916
+ .form-group {
917
+ margin-bottom: 20px;
918
+ }
919
+
920
+ .form-group input,
921
+ .form-group select,
922
+ .form-group textarea {
923
+ width: 100%;
924
+ padding: 12px 15px;
925
+ background: rgba(255, 255, 255, 0.05);
926
+ border: 1px solid rgba(255, 255, 255, 0.1);
927
+ border-radius: 5px;
928
+ color: var(--light-text);
929
+ font-size: 1rem;
930
+ transition: all var(--transition-speed);
931
+ }
932
+
933
+ .form-group input:focus,
934
+ .form-group select:focus,
935
+ .form-group textarea:focus {
936
+ outline: none;
937
+ border-color: var(--primary-color);
938
+ box-shadow: 0 0 0 2px rgba(0, 196, 255, 0.2);
939
+ }
940
+
941
+ .form-group textarea {
942
+ height: 120px;
943
+ resize: none;
944
+ }
945
+
946
+ .checkbox-group {
947
+ display: flex;
948
+ align-items: center;
949
+ }
950
+
951
+ .checkbox-group input {
952
+ width: auto;
953
+ margin-right: 10px;
954
+ }
955
+
956
+ .checkbox-group label {
957
+ color: var(--gray-text);
958
+ font-size: 0.9rem;
959
+ }
960
+
961
+ /* Footer */
962
+ footer {
963
+ background: var(--darker-bg);
964
+ padding: 70px 0 20px;
965
+ border-top: 1px solid rgba(0, 196, 255, 0.1);
966
+ }
967
+
968
+ .footer-content {
969
+ display: flex;
970
+ flex-wrap: wrap;
971
+ gap: 50px;
972
+ margin-bottom: 50px;
973
+ }
974
+
975
+ .footer-logo {
976
+ flex: 1;
977
+ min-width: 250px;
978
+ }
979
+
980
+ .footer-logo .logo {
981
+ width: 60px;
982
+ height: 60px;
983
+ margin-bottom: 15px;
984
+ }
985
+
986
+ .footer-logo h2 {
987
+ font-size: 1.5rem;
988
+ margin-bottom: 10px;
989
+ }
990
+
991
+ .footer-logo p {
992
+ color: var(--gray-text);
993
+ }
994
+
995
+ .footer-links {
996
+ flex: 2;
997
+ display: flex;
998
+ flex-wrap: wrap;
999
+ gap: 30px;
1000
+ }
1001
+
1002
+ .footer-column {
1003
+ flex: 1;
1004
+ min-width: 150px;
1005
+ }
1006
+
1007
+ .footer-column h3 {
1008
+ font-size: 1.2rem;
1009
+ margin-bottom: 20px;
1010
+ color: var(--primary-color);
1011
+ }
1012
+
1013
+ .footer-column ul li {
1014
+ margin-bottom: 10px;
1015
+ }
1016
+
1017
+ .footer-column ul li a {
1018
+ color: var(--gray-text);
1019
+ transition: all var(--transition-speed);
1020
+ }
1021
+
1022
+ .footer-column ul li a:hover {
1023
+ color: var(--primary-color);
1024
+ padding-left: 5px;
1025
+ }
1026
+
1027
+ .footer-bottom {
1028
+ display: flex;
1029
+ justify-content: space-between;
1030
+ align-items: center;
1031
+ padding-top: 20px;
1032
+ border-top: 1px solid rgba(255, 255, 255, 0.05);
1033
+ }
1034
+
1035
+ .footer-bottom p {
1036
+ color: var(--gray-text);
1037
+ font-size: 0.9rem;
1038
+ }
1039
+
1040
+ .payment-methods {
1041
+ display: flex;
1042
+ gap: 15px;
1043
+ }
1044
+
1045
+ .payment-methods i {
1046
+ font-size: 1.5rem;
1047
+ color: var(--gray-text);
1048
+ transition: all var(--transition-speed);
1049
+ }
1050
+
1051
+ .payment-methods i:hover {
1052
+ color: var(--primary-color);
1053
+ }
1054
+
1055
+ /* Chatbot Area (Replacing Floating CTA) */
1056
+ .chatbot-area {
1057
+ position: fixed;
1058
+ bottom: 30px;
1059
+ right: 30px;
1060
+ z-index: 999;
1061
+ }
1062
+
1063
+ .chatbot-button {
1064
+ display: flex;
1065
+ align-items: center;
1066
+ justify-content: center;
1067
+ width: 60px;
1068
+ height: 60px;
1069
+ background: var(--accent-color);
1070
+ color: white;
1071
+ border: none;
1072
+ border-radius: 50%;
1073
+ font-weight: 600;
1074
+ cursor: pointer;
1075
+ box-shadow: 0 5px 15px rgba(255, 61, 119, 0.4);
1076
+ transition: all var(--transition-speed);
1077
+ }
1078
+
1079
+ .chatbot-button:hover {
1080
+ transform: translateY(-5px) scale(1.05);
1081
+ box-shadow: 0 8px 20px rgba(255, 61, 119, 0.6);
1082
+ }
1083
+
1084
+ .chatbot-button i {
1085
+ font-size: 1.5rem;
1086
+ }
1087
+
1088
+ /* Responsive Styles */
1089
+ @media (max-width: 1024px) {
1090
+ .hero-content h1 {
1091
+ font-size: 3rem;
1092
+ }
1093
+
1094
+ .hero-content h2 {
1095
+ font-size: 1.5rem;
1096
+ }
1097
+
1098
+ .features {
1099
+ grid-template-columns: 1fr;
1100
+ }
1101
+
1102
+ .testimonial-gallery {
1103
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
1104
+ }
1105
+ }
1106
+
1107
+ @media (max-width: 768px) {
1108
+ header .container {
1109
+ padding: 10px 20px;
1110
+ }
1111
+
1112
+ nav ul {
1113
+ position: fixed;
1114
+ top: 80px;
1115
+ left: -100%;
1116
+ width: 100%;
1117
+ height: calc(100vh - 80px);
1118
+ background: var(--darker-bg);
1119
+ flex-direction: column;
1120
+ align-items: center;
1121
+ justify-content: center;
1122
+ transition: left var(--transition-speed);
1123
+ }
1124
+
1125
+ nav ul.active {
1126
+ left: 0;
1127
+ }
1128
+
1129
+ nav ul li {
1130
+ margin: 15px 0;
1131
+ }
1132
+
1133
+ .mobile-menu-btn {
1134
+ display: flex;
1135
+ }
1136
+
1137
+ .hero .container {
1138
+ flex-direction: column;
1139
+ text-align: center;
1140
+ }
1141
+
1142
+ .hero-content {
1143
+ margin-bottom: 50px;
1144
+ }
1145
+
1146
+ .hero-content h1 {
1147
+ font-size: 2.5rem;
1148
+ }
1149
+
1150
+ .hero-buttons {
1151
+ justify-content: center;
1152
+ }
1153
+
1154
+ .about-content,
1155
+ .contact-content {
1156
+ flex-direction: column;
1157
+ }
1158
+
1159
+ .stat-box {
1160
+ min-width: 100%;
1161
+ }
1162
+
1163
+ .services-grid {
1164
+ grid-template-columns: 1fr;
1165
+ }
1166
+
1167
+ .testimonial-gallery {
1168
+ grid-template-columns: 1fr;
1169
+ }
1170
+
1171
+ .footer-content {
1172
+ flex-direction: column;
1173
+ gap: 30px;
1174
+ }
1175
+
1176
+ .footer-bottom {
1177
+ flex-direction: column;
1178
+ gap: 20px;
1179
+ text-align: center;
1180
+ }
1181
+ }
1182
+
1183
+ @media (max-width: 480px) {
1184
+ .hero-content h1 {
1185
+ font-size: 2rem;
1186
+ }
1187
+
1188
+ .hero-content h2 {
1189
+ font-size: 1.2rem;
1190
+ }
1191
+
1192
+ .section-header h2 {
1193
+ font-size: 2rem;
1194
+ }
1195
+
1196
+ .hero-buttons {
1197
+ flex-direction: column;
1198
+ gap: 15px;
1199
+ }
1200
+
1201
+ .cta-button,
1202
+ .secondary-button {
1203
+ width: 100%;
1204
+ text-align: center;
1205
+ }
1206
+
1207
+ .testimonial-image-container {
1208
+ height: 250px;
1209
+ }
1210
+ }
1211
+
1212
+ /* Animations */
1213
+ @keyframes fadeIn {
1214
+ from {
1215
+ opacity: 0;
1216
+ transform: translateY(20px);
1217
+ }
1218
+ to {
1219
+ opacity: 1;
1220
+ transform: translateY(0);
1221
+ }
1222
+ }
1223
+
1224
+ .fade-in {
1225
+ animation: fadeIn 1s ease forwards;
1226
+ }
1227
+
1228
+ .delay-1 {
1229
+ animation-delay: 0.2s;
1230
+ }
1231
+
1232
+ .delay-2 {
1233
+ animation-delay: 0.4s;
1234
+ }
1235
+
1236
+ .delay-3 {
1237
+ animation-delay: 0.6s;
1238
+ }
1239
+
1240
+ /* Testimonial Frame Animations */
1241
+ @keyframes glow-pulse {
1242
+ 0%,
1243
+ 100% {
1244
+ box-shadow: 0 0 10px rgba(0, 196, 255, 0.5), 0 0 20px rgba(0, 196, 255, 0.2);
1245
+ }
1246
+ 50% {
1247
+ box-shadow: 0 0 15px rgba(0, 196, 255, 0.7), 0 0 30px rgba(0, 196, 255, 0.4);
1248
+ }
1249
+ }
1250
+
1251
+ .frame-glow {
1252
+ animation: glow-pulse 3s infinite;
1253
+ }
1254
+
1255
+ /* Special frame styles for each testimonial */
1256
+ .frame-1 {
1257
+ border-color: var(--primary-color);
1258
+ }
1259
+
1260
+ .frame-2 {
1261
+ border-color: var(--secondary-color);
1262
+ }
1263
+
1264
+ .frame-3 {
1265
+ border-color: var(--accent-color);
1266
+ }
1267
+
1268
+ .frame-4 {
1269
+ border-image: linear-gradient(45deg, var(--primary-color), var(--secondary-color)) 1;
1270
+ }
1271
+
1272
+ .frame-5 {
1273
+ border-image: linear-gradient(to right, var(--primary-color), var(--accent-color)) 1;
1274
+ }
1275
+
1276
+ .frame-6 {
1277
+ border-image: linear-gradient(to bottom, var(--secondary-color), var(--primary-color)) 1;
1278
  }
1279
 
1280
+ .frame-7 {
1281
+ border-image: linear-gradient(135deg, var(--accent-color), var(--primary-color)) 1;
 
1282
  }
1283
 
1284
+ .frame-8 {
1285
+ border-image: linear-gradient(to left, var(--primary-color), var(--secondary-color)) 1;
 
 
 
1286
  }
1287
 
1288
+ .frame-9 {
1289
+ border-image: linear-gradient(to top, var(--secondary-color), var(--accent-color)) 1;
 
 
 
 
1290
  }
1291
 
1292
+ .frame-10 {
1293
+ border-image: linear-gradient(225deg, var(--primary-color), var(--accent-color)) 1;
1294
  }