prernajeet01 commited on
Commit
28c7af1
·
verified ·
1 Parent(s): 07fa7f2

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +1023 -0
index.html ADDED
@@ -0,0 +1,1023 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Amy - Your Audit Copilot</title>
7
+ <style>
8
+ :root {
9
+ --primary-color: #e74c3c;
10
+ --primary-dark: #c0392b;
11
+ --secondary-color: #ffffff;
12
+ --accent-color: #ff9f87;
13
+ --text-dark: #333333;
14
+ --text-light: #ffffff;
15
+ --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
16
+ --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
17
+ --glass-bg: rgba(255, 255, 255, 0.8);
18
+ }
19
+
20
+ * {
21
+ margin: 0;
22
+ padding: 0;
23
+ box-sizing: border-box;
24
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
25
+ }
26
+
27
+ body {
28
+ background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
29
+ position: relative;
30
+ min-height: 100vh;
31
+ color: var(--text-dark);
32
+ overflow-x: hidden;
33
+ }
34
+
35
+ .background-pattern {
36
+ position: fixed;
37
+ top: 0;
38
+ left: 0;
39
+ width: 100%;
40
+ height: 100%;
41
+ background-image:
42
+ radial-gradient(var(--accent-color) 1px, transparent 1px),
43
+ radial-gradient(var(--accent-color) 1px, transparent 1px);
44
+ background-size: 50px 50px;
45
+ background-position: 0 0, 25px 25px;
46
+ opacity: 0.05;
47
+ z-index: -1;
48
+ }
49
+
50
+ header {
51
+ background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
52
+ padding: 1.5rem 0;
53
+ box-shadow: var(--shadow);
54
+ position: relative;
55
+ overflow: hidden;
56
+ }
57
+
58
+ .header-content {
59
+ max-width: 1200px;
60
+ margin: 0 auto;
61
+ display: flex;
62
+ justify-content: space-between;
63
+ align-items: center;
64
+ padding: 0 2rem;
65
+ position: relative;
66
+ z-index: 2;
67
+ }
68
+
69
+ .logo {
70
+ display: flex;
71
+ align-items: center;
72
+ gap: 1rem;
73
+ }
74
+
75
+ .logo-icon {
76
+ width: 50px;
77
+ height: 50px;
78
+ background-color: var(--secondary-color);
79
+ border-radius: 50%;
80
+ display: flex;
81
+ align-items: center;
82
+ justify-content: center;
83
+ color: var(--primary-color);
84
+ font-weight: bold;
85
+ font-size: 1.5rem;
86
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
87
+ position: relative;
88
+ overflow: hidden;
89
+ }
90
+
91
+ .logo-icon::after {
92
+ content: '';
93
+ position: absolute;
94
+ width: 100%;
95
+ height: 100%;
96
+ background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.4) 100%);
97
+ top: 0;
98
+ left: 0;
99
+ }
100
+
101
+ .logo-text {
102
+ font-size: 2.5rem;
103
+ font-weight: 700;
104
+ color: var(--secondary-color);
105
+ letter-spacing: 1px;
106
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
107
+ }
108
+
109
+ .tagline {
110
+ color: var(--secondary-color);
111
+ opacity: 0.9;
112
+ font-size: 1.2rem;
113
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
114
+ }
115
+
116
+ nav ul {
117
+ display: flex;
118
+ gap: 2rem;
119
+ list-style: none;
120
+ }
121
+
122
+ nav a {
123
+ color: var(--secondary-color);
124
+ text-decoration: none;
125
+ font-size: 1.1rem;
126
+ font-weight: 500;
127
+ padding: 0.5rem 1rem;
128
+ border-radius: 30px;
129
+ transition: var(--transition);
130
+ position: relative;
131
+ z-index: 1;
132
+ overflow: hidden;
133
+ }
134
+
135
+ nav a::before {
136
+ content: '';
137
+ position: absolute;
138
+ top: 0;
139
+ left: 0;
140
+ width: 0%;
141
+ height: 100%;
142
+ background-color: rgba(255, 255, 255, 0.2);
143
+ transition: var(--transition);
144
+ z-index: -1;
145
+ border-radius: 30px;
146
+ }
147
+
148
+ nav a:hover::before {
149
+ width: 100%;
150
+ }
151
+
152
+ nav a:hover {
153
+ transform: translateY(-3px);
154
+ }
155
+
156
+ .wave-container {
157
+ position: absolute;
158
+ bottom: -2px;
159
+ left: 0;
160
+ width: 100%;
161
+ overflow: hidden;
162
+ line-height: 0;
163
+ }
164
+
165
+ .wave-container svg {
166
+ position: relative;
167
+ display: block;
168
+ width: calc(100% + 1.3px);
169
+ height: 70px;
170
+ }
171
+
172
+ .wave-container .shape-fill {
173
+ fill: #FFF5F5;
174
+ }
175
+
176
+ .hero {
177
+ padding: 8rem 2rem 6rem;
178
+ max-width: 1200px;
179
+ margin: 0 auto;
180
+ display: flex;
181
+ align-items: center;
182
+ justify-content: space-between;
183
+ gap: 3rem;
184
+ position: relative;
185
+ }
186
+
187
+ .hero-content {
188
+ flex: 1;
189
+ animation: fadeInLeft 1s ease;
190
+ }
191
+
192
+ .hero h1 {
193
+ font-size: 4rem;
194
+ margin-bottom: 1.5rem;
195
+ color: var(--primary-color);
196
+ line-height: 1.2;
197
+ font-weight: 800;
198
+ }
199
+
200
+ .hero p {
201
+ font-size: 1.3rem;
202
+ margin-bottom: 2.5rem;
203
+ line-height: 1.6;
204
+ color: var(--text-dark);
205
+ }
206
+
207
+ .hero-image {
208
+ flex: 1;
209
+ position: relative;
210
+ animation: float 6s ease-in-out infinite, fadeInRight 1s ease;
211
+ }
212
+
213
+ .hero-image img {
214
+ width: 100%;
215
+ height: auto;
216
+ max-width: 500px;
217
+ filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
218
+ }
219
+
220
+ .highlight {
221
+ color: var(--primary-color);
222
+ font-weight: 700;
223
+ position: relative;
224
+ display: inline-block;
225
+ }
226
+
227
+ .highlight::after {
228
+ content: '';
229
+ position: absolute;
230
+ bottom: 5px;
231
+ left: 0;
232
+ width: 100%;
233
+ height: 8px;
234
+ background-color: rgba(231, 76, 60, 0.2);
235
+ z-index: -1;
236
+ border-radius: 4px;
237
+ }
238
+
239
+ .btn {
240
+ display: inline-block;
241
+ background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
242
+ color: var(--secondary-color);
243
+ padding: 1.2rem 2.5rem;
244
+ font-size: 1.1rem;
245
+ font-weight: 600;
246
+ border-radius: 50px;
247
+ text-decoration: none;
248
+ box-shadow: 0 10px 20px rgba(231, 76, 60, 0.3);
249
+ transition: var(--transition);
250
+ border: none;
251
+ cursor: pointer;
252
+ position: relative;
253
+ overflow: hidden;
254
+ z-index: 1;
255
+ }
256
+
257
+ .btn::before {
258
+ content: '';
259
+ position: absolute;
260
+ top: 0;
261
+ left: 0;
262
+ width: 0%;
263
+ height: 100%;
264
+ background-color: rgba(0, 0, 0, 0.1);
265
+ transition: var(--transition);
266
+ z-index: -1;
267
+ border-radius: 50px;
268
+ }
269
+
270
+ .btn:hover::before {
271
+ width: 100%;
272
+ }
273
+
274
+ .btn:hover {
275
+ transform: translateY(-5px);
276
+ box-shadow: 0 15px 30px rgba(231, 76, 60, 0.4);
277
+ }
278
+
279
+ .btn i {
280
+ margin-left: 8px;
281
+ transition: var(--transition);
282
+ }
283
+
284
+ .btn:hover i {
285
+ transform: translateX(5px);
286
+ }
287
+
288
+ .features {
289
+ padding: 8rem 2rem;
290
+ max-width: 1200px;
291
+ margin: 0 auto;
292
+ position: relative;
293
+ }
294
+
295
+ .section-title {
296
+ text-align: center;
297
+ font-size: 2.8rem;
298
+ margin-bottom: 1rem;
299
+ color: var(--primary-color);
300
+ position: relative;
301
+ font-weight: 800;
302
+ }
303
+
304
+ .section-subtitle {
305
+ text-align: center;
306
+ font-size: 1.2rem;
307
+ margin-bottom: 4rem;
308
+ max-width: 700px;
309
+ margin-left: auto;
310
+ margin-right: auto;
311
+ color: #666;
312
+ }
313
+
314
+ .feature-grid {
315
+ display: grid;
316
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
317
+ gap: 3rem;
318
+ }
319
+
320
+ .feature-card {
321
+ background-color: var(--glass-bg);
322
+ backdrop-filter: blur(10px);
323
+ border-radius: 20px;
324
+ padding: 3rem 2rem;
325
+ box-shadow: var(--shadow);
326
+ text-align: center;
327
+ transition: var(--transition);
328
+ position: relative;
329
+ overflow: hidden;
330
+ z-index: 1;
331
+ border: 1px solid rgba(255, 255, 255, 0.5);
332
+ }
333
+
334
+ .feature-card:hover {
335
+ transform: translateY(-15px);
336
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
337
+ }
338
+
339
+ .feature-icon {
340
+ width: 90px;
341
+ height: 90px;
342
+ margin: 0 auto 2rem;
343
+ display: flex;
344
+ align-items: center;
345
+ justify-content: center;
346
+ background: linear-gradient(135deg, rgba(231, 76, 60, 0.1) 0%, rgba(231, 76, 60, 0.2) 100%);
347
+ border-radius: 50%;
348
+ color: var(--primary-color);
349
+ font-size: 2.5rem;
350
+ position: relative;
351
+ transition: var(--transition);
352
+ }
353
+
354
+ .feature-card:hover .feature-icon {
355
+ background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
356
+ color: var(--secondary-color);
357
+ transform: scale(1.1);
358
+ }
359
+
360
+ .feature-icon::after {
361
+ content: '';
362
+ position: absolute;
363
+ width: 100%;
364
+ height: 100%;
365
+ border-radius: 50%;
366
+ border: 2px dashed var(--primary-color);
367
+ top: 0;
368
+ left: 0;
369
+ animation: spin 10s linear infinite;
370
+ }
371
+
372
+ .feature-card:hover .feature-icon::after {
373
+ border-color: var(--secondary-color);
374
+ }
375
+
376
+ .feature-card h3 {
377
+ font-size: 1.8rem;
378
+ margin-bottom: 1rem;
379
+ color: var(--text-dark);
380
+ font-weight: 700;
381
+ }
382
+
383
+ .feature-card p {
384
+ color: #666;
385
+ line-height: 1.7;
386
+ font-size: 1.05rem;
387
+ }
388
+
389
+ .chatbot-section {
390
+ padding: 8rem 2rem;
391
+ max-width: 1200px;
392
+ margin: 0 auto;
393
+ display: flex;
394
+ align-items: center;
395
+ gap: 4rem;
396
+ flex-wrap: wrap;
397
+ position: relative;
398
+ }
399
+
400
+ .chatbot-content {
401
+ flex: 1;
402
+ min-width: 320px;
403
+ }
404
+
405
+ .chatbot-content h2 {
406
+ font-size: 2.8rem;
407
+ margin-bottom: 1.5rem;
408
+ color: var(--primary-color);
409
+ font-weight: 800;
410
+ line-height: 1.2;
411
+ }
412
+
413
+ .chatbot-content p {
414
+ font-size: 1.1rem;
415
+ line-height: 1.7;
416
+ margin-bottom: 2rem;
417
+ color: var(--text-dark);
418
+ }
419
+
420
+ .chatbot-image {
421
+ flex: 1;
422
+ min-width: 320px;
423
+ position: relative;
424
+ }
425
+
426
+ .chatbot-demo {
427
+ width: 100%;
428
+ height: 450px;
429
+ background-color: var(--glass-bg);
430
+ backdrop-filter: blur(10px);
431
+ border-radius: 20px;
432
+ box-shadow: var(--shadow);
433
+ overflow: hidden;
434
+ position: relative;
435
+ border: 1px solid rgba(255, 255, 255, 0.5);
436
+ transform: perspective(1000px) rotateY(-5deg);
437
+ transition: var(--transition);
438
+ }
439
+
440
+ .chatbot-demo:hover {
441
+ transform: perspective(1000px) rotateY(0deg);
442
+ }
443
+
444
+ .chat-header {
445
+ background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
446
+ padding: 1.5rem;
447
+ color: var(--secondary-color);
448
+ display: flex;
449
+ align-items: center;
450
+ gap: 1rem;
451
+ position: relative;
452
+ overflow: hidden;
453
+ }
454
+
455
+ .chat-header::before {
456
+ content: '';
457
+ position: absolute;
458
+ top: 0;
459
+ right: 0;
460
+ width: 300px;
461
+ height: 100%;
462
+ background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 100%);
463
+ transform: skewX(-30deg);
464
+ }
465
+
466
+ .chat-avatar {
467
+ width: 48px;
468
+ height: 48px;
469
+ background-color: var(--secondary-color);
470
+ border-radius: 50%;
471
+ display: flex;
472
+ align-items: center;
473
+ justify-content: center;
474
+ color: var(--primary-color);
475
+ font-weight: bold;
476
+ font-size: 1.5rem;
477
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
478
+ position: relative;
479
+ overflow: hidden;
480
+ }
481
+
482
+ .chat-avatar::after {
483
+ content: '';
484
+ position: absolute;
485
+ width: 100%;
486
+ height: 100%;
487
+ background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.4) 100%);
488
+ top: 0;
489
+ left: 0;
490
+ }
491
+
492
+ .chat-status {
493
+ display: flex;
494
+ align-items: center;
495
+ gap: 6px;
496
+ font-size: 0.9rem;
497
+ opacity: 0.8;
498
+ }
499
+
500
+ .status-dot {
501
+ width: 8px;
502
+ height: 8px;
503
+ background-color: #2ecc71;
504
+ border-radius: 50%;
505
+ position: relative;
506
+ }
507
+
508
+ .status-dot::after {
509
+ content: '';
510
+ position: absolute;
511
+ width: 100%;
512
+ height: 100%;
513
+ border-radius: 50%;
514
+ background-color: #2ecc71;
515
+ opacity: 0.5;
516
+ animation: pulse 1.5s ease infinite;
517
+ }
518
+
519
+ .chat-name {
520
+ font-size: 1.3rem;
521
+ font-weight: 600;
522
+ }
523
+
524
+ .chat-content {
525
+ padding: 1.5rem;
526
+ height: calc(450px - 80px);
527
+ overflow-y: auto;
528
+ display: flex;
529
+ flex-direction: column;
530
+ gap: 1.2rem;
531
+ scrollbar-width: thin;
532
+ scrollbar-color: var(--primary-color) #f1f1f1;
533
+ }
534
+
535
+ .chat-content::-webkit-scrollbar {
536
+ width: 8px;
537
+ }
538
+
539
+ .chat-content::-webkit-scrollbar-track {
540
+ background: #f1f1f1;
541
+ }
542
+
543
+ .chat-content::-webkit-scrollbar-thumb {
544
+ background-color: var(--primary-color);
545
+ border-radius: 10px;
546
+ }
547
+
548
+ .chat-message {
549
+ max-width: 80%;
550
+ padding: 1.2rem;
551
+ border-radius: 18px;
552
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
553
+ animation: fadeIn 0.5s ease;
554
+ position: relative;
555
+ line-height: 1.6;
556
+ }
557
+
558
+ .bot-message {
559
+ background-color: rgba(255, 255, 255, 0.9);
560
+ align-self: flex-start;
561
+ border-top-left-radius: 0;
562
+ }
563
+
564
+ .bot-message::after {
565
+ content: '';
566
+ position: absolute;
567
+ bottom: 0;
568
+ left: 0;
569
+ width: 100%;
570
+ height: 3px;
571
+ background: linear-gradient(90deg, var(--primary-color) 0%, transparent 100%);
572
+ border-bottom-left-radius: 18px;
573
+ border-bottom-right-radius: 18px;
574
+ }
575
+
576
+ .user-message {
577
+ background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
578
+ color: white;
579
+ align-self: flex-end;
580
+ border-top-right-radius: 0;
581
+ }
582
+
583
+ .stats-section {
584
+ padding: 6rem 2rem;
585
+ background-color: #fff1f0;
586
+ position: relative;
587
+ overflow: hidden;
588
+ }
589
+
590
+ .stats-container {
591
+ max-width: 1200px;
592
+ margin: 0 auto;
593
+ display: grid;
594
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
595
+ gap: 2rem;
596
+ }
597
+
598
+ .stat-item {
599
+ text-align: center;
600
+ padding: 2rem;
601
+ transition: var(--transition);
602
+ }
603
+
604
+ .stat-number {
605
+ font-size: 3.5rem;
606
+ font-weight: 800;
607
+ color: var(--primary-color);
608
+ margin-bottom: 0.5rem;
609
+ line-height: 1;
610
+ }
611
+
612
+ .stat-label {
613
+ font-size: 1.1rem;
614
+ color: #666;
615
+ font-weight: 500;
616
+ }
617
+
618
+ .testimonials {
619
+ padding: 8rem 2rem;
620
+ max-width: 1200px;
621
+ margin: 0 auto;
622
+ }
623
+
624
+ .testimonial-cards {
625
+ display: flex;
626
+ gap: 2rem;
627
+ overflow-x: auto;
628
+ padding: 2rem 0;
629
+ scroll-snap-type: x mandatory;
630
+ scrollbar-width: none;
631
+ }
632
+
633
+ .testimonial-cards::-webkit-scrollbar {
634
+ display: none;
635
+ }
636
+
637
+ .testimonial-card {
638
+ flex: 0 0 400px;
639
+ padding: 2.5rem;
640
+ background-color: var(--glass-bg);
641
+ backdrop-filter: blur(10px);
642
+ border-radius: 20px;
643
+ box-shadow: var(--shadow);
644
+ scroll-snap-align: start;
645
+ border: 1px solid rgba(255, 255, 255, 0.5);
646
+ position: relative;
647
+ }
648
+
649
+ .testimonial-card::before {
650
+ content: '"';
651
+ position: absolute;
652
+ top: 20px;
653
+ left: 20px;
654
+ font-size: 5rem;
655
+ color: rgba(231, 76, 60, 0.1);
656
+ font-weight: 700;
657
+ font-family: Georgia, serif;
658
+ line-height: 1;
659
+ }
660
+
661
+ .testimonial-content {
662
+ font-size: 1.1rem;
663
+ line-height: 1.7;
664
+ color: #555;
665
+ margin-bottom: 1.5rem;
666
+ position: relative;
667
+ z-index: 1;
668
+ }
669
+
670
+ .testimonial-author {
671
+ display: flex;
672
+ align-items: center;
673
+ gap: 1rem;
674
+ }
675
+
676
+ .author-avatar {
677
+ width: 50px;
678
+ height: 50px;
679
+ border-radius: 50%;
680
+ background-color: var(--primary-color);
681
+ color: white;
682
+ display: flex;
683
+ align-items: center;
684
+ justify-content: center;
685
+ font-weight: 600;
686
+ font-size: 1.2rem;
687
+ }
688
+
689
+ .author-info h4 {
690
+ font-size: 1.1rem;
691
+ color: var(--text-dark);
692
+ margin-bottom: 4px;
693
+ }
694
+
695
+ .author-info p {
696
+ font-size: 0.9rem;
697
+ color: #777;
698
+ }
699
+
700
+ .cta-section {
701
+ padding: 6rem 2rem;
702
+ background: linear-gradient(135deg, rgba(231, 76, 60, 0.05) 0%, rgba(231, 76, 60, 0.1) 100%);
703
+ position: relative;
704
+ overflow: hidden;
705
+ }
706
+
707
+ .cta-container {
708
+ max-width: 900px;
709
+ margin: 0 auto;
710
+ text-align: center;
711
+ position: relative;
712
+ z-index: 1;
713
+ }
714
+
715
+ .cta-heading {
716
+ font-size: 3rem;
717
+ color: var(--primary-color);
718
+ margin-bottom: 1.5rem;
719
+ font-weight: 800;
720
+ }
721
+
722
+ .cta-text {
723
+ font-size: 1.2rem;
724
+ color: #555;
725
+ max-width: 700px;
726
+ margin: 0 auto 2rem;
727
+ line-height: 1.6;
728
+ }
729
+
730
+ .shape {
731
+ position: absolute;
732
+ opacity: 0.15;
733
+ z-index: 0;
734
+ }
735
+
736
+ .shape-1 {
737
+ top: 10%;
738
+ left: 5%;
739
+ width: 200px;
740
+ height: 200px;
741
+ border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
742
+ background-color: var(--primary-color);
743
+ animation: morphing 10s ease-in-out infinite;
744
+ }
745
+
746
+ .shape-2 {
747
+ bottom: 10%;
748
+ right: 5%;
749
+ width: 250px;
750
+ height: 250px;
751
+ border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
752
+ background-color: var(--primary-color);
753
+ animation: morphing 12s ease-in-out infinite;
754
+ animation-delay: 2s;
755
+ }
756
+
757
+ footer {
758
+ background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
759
+ color: var(--secondary-color);
760
+ padding: 5rem 2rem 3rem;
761
+ text-align: center;
762
+ position: relative;
763
+ overflow: hidden;
764
+ }
765
+
766
+ .footer-wave {
767
+ position: absolute;
768
+ top: 0;
769
+ left: 0;
770
+ width: 100%;
771
+ overflow: hidden;
772
+ line-height: 0;
773
+ transform: rotate(180deg);
774
+ }
775
+
776
+ .footer-wave svg {
777
+ position: relative;
778
+ display: block;
779
+ width: calc(100% + 1.3px);
780
+ height: 70px;
781
+ }
782
+
783
+ .footer-wave .shape-fill {
784
+ fill: #FFF5F5;
785
+ }
786
+
787
+ .footer-content {
788
+ max-width: 1200px;
789
+ margin: 0 auto;
790
+ position: relative;
791
+ z-index: 1;
792
+ }
793
+
794
+ .footer-logo {
795
+ display: flex;
796
+ align-items: center;
797
+ justify-content: center;
798
+ gap: 1rem;
799
+ margin-bottom: 2.5rem;
800
+ }
801
+
802
+ .footer-links {
803
+ display: flex;
804
+ justify-content: center;
805
+ gap: 2.5rem;
806
+ margin-bottom: 3rem;
807
+ flex-wrap: wrap;
808
+ }
809
+
810
+ .footer-links a {
811
+ color: var(--secondary-color);
812
+ text-decoration: none;
813
+ transition: var(--transition);
814
+ font-size: 1.1rem;
815
+ position: relative;
816
+ }
817
+
818
+ .footer-links a::after {
819
+ content: '';
820
+ position: absolute;
821
+ left: 0;
822
+ bottom: -5px;
823
+ width: 0;
824
+ height: 2px;
825
+ background-color: var(--secondary-color);
826
+ transition: var(--transition);
827
+ }
828
+
829
+ .footer-links a:hover::after {
830
+ width: 100%;
831
+ }
832
+
833
+ .social-icons {
834
+ display: flex;
835
+ justify-content: center;
836
+ gap: 1.5rem;
837
+ margin-bottom: 2.5rem;
838
+ }
839
+
840
+ .social-icon {
841
+ width: 40px;
842
+ height: 40px;
843
+ border-radius: 50%;
844
+ background-color: rgba(255, 255, 255, 0.1);
845
+ display: flex;
846
+ align-items: center;
847
+ justify-content: center;
848
+ color: var(--secondary-color);
849
+ transition: var(--transition);
850
+ }
851
+
852
+ .social-icon:hover {
853
+ background-color: var(--secondary-color);
854
+ color: var(--primary-color);
855
+ transform: translateY(-5px);
856
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
857
+ }
858
+
859
+ .copyright {
860
+ opacity: 0.7;
861
+ font-size: 0.9rem;
862
+ margin-top: 1rem;
863
+ }
864
+
865
+ /* Animations */
866
+ @keyframes fadeInUp {
867
+ from {
868
+ opacity: 0;
869
+ transform: translateY(30px);
870
+ }
871
+ to {
872
+ opacity: 1;
873
+ transform: translateY(0);
874
+ }
875
+ }
876
+
877
+ @keyframes fadeInLeft {
878
+ from {
879
+ opacity: 0;
880
+ transform: translateX(-50px);
881
+ }
882
+ to {
883
+ opacity: 1;
884
+ transform: translateX(0);
885
+ }
886
+ }
887
+
888
+ @keyframes fadeInRight {
889
+ from {
890
+ opacity: 0;
891
+ transform: translateX(50px);
892
+ }
893
+ to {
894
+ opacity: 1;
895
+ transform: translateX(0);
896
+ }
897
+ }
898
+
899
+ @keyframes fadeIn {
900
+ from {
901
+ opacity: 0;
902
+ }
903
+ to {
904
+ opacity: 1;
905
+ }
906
+ }
907
+
908
+ @keyframes float {
909
+ 0%, 100% {
910
+ transform: translateY(0);
911
+ }
912
+ 50% {
913
+ transform: translateY(-20px);
914
+ }
915
+ }
916
+
917
+ @keyframes spin {
918
+ 0% {
919
+ transform: rotate(0deg);
920
+ }
921
+ 100% {
922
+ transform: rotate(360deg);
923
+ }
924
+ }
925
+
926
+ @keyframes pulse {
927
+ 0% {
928
+ transform: scale(1);
929
+ opacity: 0.5;
930
+ }
931
+ 50% {
932
+ transform: scale(1.5);
933
+ opacity: 0;
934
+ }
935
+ 100% {
936
+ transform: scale(1);
937
+ opacity: 0;
938
+ }
939
+ }
940
+
941
+ @keyframes morphing {
942
+ 0% {
943
+ border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
944
+ }
945
+ 25% {
946
+ border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
947
+ }
948
+ 50% {
949
+ border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
950
+ }
951
+ 75% {
952
+ border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
953
+ }
954
+ 100% {
955
+ border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
956
+ }
957
+ }
958
+
959
+ .animate-in {
960
+ opacity: 0;
961
+ transform: translateY(30px);
962
+ transition: opacity 0.8s ease, transform 0.8s ease;
963
+ }
964
+
965
+ .animate-in.visible {
966
+ opacity: 1;
967
+ transform: translateY(0);
968
+ }
969
+
970
+ /* Responsive */
971
+ @media (max-width: 992px) {
972
+ .hero {
973
+ flex-direction: column;
974
+ text-align: center;
975
+ padding-top: 6rem;
976
+ }
977
+
978
+ .hero h1 {
979
+ font-size: 3rem;
980
+ }
981
+
982
+ .chatbot-section {
983
+ flex-direction: column;
984
+ gap: 4rem;
985
+ }
986
+
987
+ .testimonial-cards {
988
+ padding-bottom: 2.5rem;
989
+ }
990
+
991
+ .feature-grid {
992
+ gap: 2rem;
993
+ }
994
+ }
995
+
996
+ @media (max-width: 768px) {
997
+ .header-content {
998
+ flex-direction: column;
999
+ gap: 1.5rem;
1000
+ text-align: center;
1001
+ padding: 1rem 2rem;
1002
+ }
1003
+
1004
+ .logo {
1005
+ justify-content: center;
1006
+ }
1007
+
1008
+ nav ul {
1009
+ gap: 1rem;
1010
+ justify-content: center;
1011
+ flex-wrap: wrap;
1012
+ }
1013
+
1014
+ .hero h1 {
1015
+ font-size: 2.5rem;
1016
+ }
1017
+
1018
+ .section-title {
1019
+ font-size: 2.2rem;
1020
+ }
1021
+
1022
+ .chatbot-content h2 {
1023
+ font-size: