Hugging Face's logo

Spaces:
manideepreddym
/
kritova
Running

App Files Community
manideepreddym commited on
Commit
ec9ebd6
·
verified ·
1 Parent(s): da10d5d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +1180 -714
index.html CHANGED
@@ -3,225 +3,345 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Kritova - A New Artificial Beginning</title>
 
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
 
8
  <style>
 
9
  :root {
10
- --primary: #4a00e0;
11
- --secondary: #8e2de2;
12
- --accent: #00c6fb;
13
- --dark: #1a1a2e;
14
- --light: #f8f9fa;
 
 
 
 
 
 
 
15
  }
16
 
17
  * {
18
  margin: 0;
19
  padding: 0;
20
  box-sizing: border-box;
21
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
22
  }
23
 
24
  body {
25
- background-color: #f5f7ff;
26
  color: var(--dark);
 
27
  overflow-x: hidden;
28
- line-height: 1.6;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
29
  }
30
 
31
- .gradient-bg {
32
- background: linear-gradient(135deg, var(--primary), var(--secondary));
 
 
33
  }
34
 
35
- /* Navigation */
 
 
 
 
 
36
  nav {
37
  position: fixed;
38
  top: 0;
39
  left: 0;
40
  width: 100%;
41
- padding: 1.5rem 5%;
42
  display: flex;
43
  justify-content: space-between;
44
  align-items: center;
45
  z-index: 1000;
46
- transition: all 0.3s ease;
47
- }
48
-
49
- nav.scrolled {
50
- background: rgba(255, 255, 255, 0.95);
51
- box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
52
- padding: 1rem 5%;
53
  }
54
 
55
  .logo {
56
  display: flex;
57
  align-items: center;
58
- font-weight: 700;
59
- font-size: 1.5rem;
60
- color: white;
61
  text-decoration: none;
62
  }
63
-
64
- nav.scrolled .logo {
65
- color: var(--primary);
 
66
  }
67
-
68
- .logo span {
69
- color: var(--accent);
 
 
 
 
70
  }
 
 
 
71
 
72
  .nav-links {
73
  display: flex;
74
  list-style: none;
 
75
  }
76
 
77
  .nav-links li {
78
- margin-left: 2.5rem;
79
  }
80
 
81
  .nav-links a {
82
- color: white;
83
  text-decoration: none;
84
  font-weight: 500;
85
  transition: all 0.3s ease;
 
 
 
86
  }
87
 
88
- nav.scrolled .nav-links a {
89
- color: var(--dark);
 
 
 
 
 
 
 
90
  }
91
 
92
- .nav-links a:hover {
93
- color: var(--accent);
 
 
 
 
94
  }
95
 
96
- .cta-btn {
97
- background-color: var(--accent);
98
- color: white;
99
- padding: 0.6rem 1.5rem;
100
  border-radius: 50px;
101
  font-weight: 600;
102
  transition: all 0.3s ease;
 
 
 
 
103
  }
104
 
105
  .cta-btn:hover {
106
  transform: translateY(-3px);
107
- box-shadow: 0 10px 20px rgba(0, 198, 251, 0.3);
108
- color: white;
 
 
 
109
  }
110
 
111
  .mobile-menu-btn {
112
  display: none;
113
  background: none;
114
  border: none;
115
- color: white;
116
- font-size: 1.5rem;
117
  cursor: pointer;
 
118
  }
119
-
120
- /* Hero Section */
121
  .hero {
122
- height: 100vh;
123
  display: flex;
124
  align-items: center;
125
- padding: 0 5%;
126
  position: relative;
127
  overflow: hidden;
128
- }
129
-
130
- .hero::before {
131
- content: '';
132
- position: absolute;
133
- top: 0;
134
- left: 0;
135
- width: 100%;
136
- height: 100%;
137
- background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
138
- z-index: 1;
139
  }
140
 
141
  .hero-content {
 
 
 
142
  position: relative;
143
  z-index: 2;
144
- max-width: 800px;
145
- color: white;
146
  }
147
 
148
  .hero h1 {
149
- font-size: 4rem;
150
  margin-bottom: 1.5rem;
151
- line-height: 1.2;
 
 
152
  }
153
 
154
  .hero h1 span {
155
- color: var(--accent);
 
 
 
156
  }
157
 
158
  .hero p {
159
- font-size: 1.2rem;
160
- margin-bottom: 2rem;
161
- opacity: 0.9;
 
162
  }
163
 
164
  .hero-btns {
165
  display: flex;
166
- gap: 1rem;
 
167
  }
168
 
169
- .primary-btn {
170
- background-color: var(--accent);
171
  color: white;
172
- padding: 0.8rem 2rem;
173
  border-radius: 50px;
174
  font-weight: 600;
175
  text-decoration: none;
176
  transition: all 0.3s ease;
 
 
 
177
  }
178
 
179
- .secondary-btn {
180
- background-color: transparent;
181
- color: white;
182
- padding: 0.8rem 2rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
183
  border-radius: 50px;
184
- border: 2px solid white;
185
  font-weight: 600;
186
  text-decoration: none;
187
  transition: all 0.3s ease;
 
 
188
  }
189
 
190
- .primary-btn:hover, .secondary-btn:hover {
 
191
  transform: translateY(-3px);
192
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
193
  }
194
-
195
- .secondary-btn:hover {
196
- background-color: rgba(255, 255, 255, 0.1);
197
  }
198
 
199
  .hero-image {
200
  position: absolute;
201
- right: 0;
202
- top: 0;
203
- height: 100%;
204
- width: 60%;
205
- object-fit: cover;
206
- z-index: -1;
 
 
 
 
 
 
 
207
  }
208
 
209
- /* About Section */
 
 
 
 
 
 
 
 
 
 
 
 
 
210
  .section {
211
- padding: 6rem 5%;
 
 
 
 
 
212
  }
213
 
214
  .section-title {
215
  text-align: center;
216
- margin-bottom: 4rem;
217
  }
218
 
219
  .section-title h2 {
220
- font-size: 2.5rem;
221
  color: var(--dark);
222
  position: relative;
223
  display: inline-block;
224
- padding-bottom: 1rem;
 
 
225
  }
226
 
227
  .section-title h2::after {
@@ -230,927 +350,1273 @@
230
  bottom: 0;
231
  left: 50%;
232
  transform: translateX(-50%);
233
- width: 100px;
234
- height: 4px;
235
- background: linear-gradient(to right, var(--primary), var(--accent));
236
  border-radius: 2px;
237
  }
238
 
 
 
 
 
 
 
 
 
239
  .about-content {
 
 
240
  display: flex;
 
241
  align-items: center;
242
- gap: 4rem;
243
  }
244
 
245
- .about-image {
246
  flex: 1;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
247
  position: relative;
248
  }
249
 
250
  .about-image img {
251
  width: 100%;
252
- border-radius: 10px;
253
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
254
- transition: all 0.3s ease;
 
255
  }
256
 
257
- .about-image img:hover {
258
- transform: scale(1.02);
259
  }
260
 
261
- .about-image::before {
262
  content: '';
263
  position: absolute;
264
- width: 80%;
265
- height: 80%;
266
- border: 10px solid var(--primary);
267
- right: -30px;
268
- top: -30px;
 
269
  z-index: -1;
270
- border-radius: 10px;
271
- opacity: 0.3;
272
- }
273
-
274
- .about-text {
275
- flex: 1;
276
- }
277
-
278
- .about-text h3 {
279
- font-size: 2rem;
280
- margin-bottom: 1.5rem;
281
- color: var(--primary);
282
  }
283
 
284
- .about-text p {
285
- margin-bottom: 1.5rem;
286
- color: #555;
 
287
  }
288
-
289
- .features {
290
- display: grid;
291
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 
292
  gap: 2rem;
293
- margin-top: 3rem;
 
294
  }
295
 
296
- .feature-item {
297
- background-color: white;
298
- padding: 2rem;
299
- border-radius: 10px;
300
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
 
 
301
  transition: all 0.3s ease;
 
 
302
  }
303
 
304
- .feature-item:hover {
305
- transform: translateY(-10px);
306
- box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
307
  }
308
 
309
- .feature-icon {
310
- font-size: 2.5rem;
311
- color: var(--primary);
312
- margin-bottom: 1rem;
 
 
 
 
 
 
 
 
 
313
  }
314
 
315
- .feature-item h4 {
316
- font-size: 1.3rem;
317
- margin-bottom: 1rem;
 
 
318
  }
319
 
320
- /* Services Section */
321
- .services {
322
- background-color: #f0f4ff;
323
  }
324
-
325
- .services-container {
 
326
  display: grid;
327
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
328
- gap: 2rem;
 
 
329
  }
330
 
331
- .service-card {
332
- background-color: white;
333
- border-radius: 10px;
334
  overflow: hidden;
335
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
336
- transition: all 0.3s ease;
 
 
 
337
  }
338
 
339
- .service-card:hover {
340
- transform: translateY(-10px);
341
- box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
342
  }
343
 
344
- .service-img {
345
- height: 200px;
346
  overflow: hidden;
 
347
  }
348
 
349
- .service-img img {
350
  width: 100%;
351
  height: 100%;
352
  object-fit: cover;
353
- transition: all 0.5s ease;
354
  }
355
 
356
- .service-card:hover .service-img img {
357
  transform: scale(1.1);
358
  }
359
 
360
- .service-content {
361
- padding: 2rem;
 
 
 
 
 
 
 
 
 
 
 
362
  }
363
 
364
- .service-content h3 {
365
- font-size: 1.5rem;
366
- margin-bottom: 1rem;
367
- color: var(--primary);
 
 
 
 
 
 
 
368
  }
369
 
370
- .service-content p {
371
- margin-bottom: 1.5rem;
372
- color: #555;
 
 
 
373
  }
374
 
375
- .read-more {
376
- color: var(--primary);
 
 
377
  font-weight: 600;
378
- text-decoration: none;
379
- display: inline-flex;
380
- align-items: center;
381
  }
382
 
383
- .read-more i {
384
- margin-left: 0.5rem;
385
- transition: all 0.3s ease;
 
 
386
  }
387
 
388
- .read-more:hover i {
389
- transform: translateX(5px);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
390
  }
391
 
392
- /* Stats Section */
393
- .stats {
394
- background: linear-gradient(rgba(74, 0, 224, 0.9), rgba(142, 45, 226, 0.9)), url('https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
395
  color: white;
396
- text-align: center;
397
- padding: 6rem 5%;
398
  }
399
 
400
- .stats-container {
401
- display: grid;
402
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
403
- gap: 3rem;
404
- margin-top: 3rem;
405
  }
406
 
407
- .stat-item {
408
- padding: 2rem;
 
 
 
 
 
 
 
409
  }
410
 
411
- .stat-number {
412
- font-size: 3.5rem;
413
- font-weight: 700;
414
- margin-bottom: 0.5rem;
415
- color: var(--accent);
 
 
 
 
 
416
  }
417
 
418
- .stat-text {
419
- font-size: 1.2rem;
420
- opacity: 0.9;
 
 
421
  }
422
 
423
- /* Testimonials */
424
- .testimonials {
 
425
  position: relative;
426
- padding: 6rem 5%;
 
 
 
 
 
 
 
 
 
 
 
 
427
  }
428
 
429
- .testimonial-container {
430
- max-width: 1200px;
431
- margin: 0 auto;
 
 
 
432
  position: relative;
 
 
433
  }
434
 
435
- .testimonial-slider {
436
- display: flex;
437
- overflow-x: auto;
438
- scroll-snap-type: x mandatory;
439
- scroll-behavior: smooth;
440
- -webkit-overflow-scrolling: touch;
441
- gap: 2rem;
442
- padding: 2rem 0;
443
- scrollbar-width: none;
 
444
  }
445
 
446
- .testimonial-slider::-webkit-scrollbar {
447
- display: none;
 
 
 
 
448
  }
449
 
450
- .testimonial-card {
451
- min-width: 350px;
452
- background-color: white;
453
- border-radius: 10px;
454
- padding: 2rem;
455
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
456
- scroll-snap-align: start;
457
  }
458
 
459
- .testimonial-header {
460
- display: flex;
461
- align-items: center;
462
- margin-bottom: 1.5rem;
463
  }
464
 
465
- .testimonial-img {
466
- width: 60px;
467
- height: 60px;
 
468
  border-radius: 50%;
469
- overflow: hidden;
470
- margin-right: 1rem;
 
 
471
  }
472
-
473
- .testimonial-img img {
474
- width: 100%;
475
- height: 100%;
476
- object-fit: cover;
477
  }
478
 
479
- .testimonial-author h4 {
480
- font-size: 1.2rem;
481
- margin-bottom: 0.3rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
482
  }
483
 
484
- .testimonial-author p {
485
- color: #777;
486
  font-size: 0.9rem;
487
  }
488
 
489
- .testimonial-rating {
490
- color: #ffc107;
491
- margin-top: 0.5rem;
 
 
 
 
 
 
 
 
 
 
 
 
492
  }
493
 
494
- .testimonial-content p {
495
- font-style: italic;
496
- color: #555;
 
 
 
 
 
 
 
497
  }
498
 
499
- .slider-nav {
500
- display: flex;
501
- justify-content: center;
502
- margin-top: 2rem;
503
  }
504
 
505
- .slider-dot {
506
- width: 12px;
507
- height: 12px;
508
- background-color: #ddd;
509
- border-radius: 50%;
510
- margin: 0 5px;
511
- cursor: pointer;
512
- transition: all 0.3s ease;
513
  }
514
 
515
- .slider-dot.active {
516
- background-color: var(--primary);
 
 
 
517
  }
518
 
519
- /* CTA Section */
520
- .cta-section {
521
- background: linear-gradient(135deg, var(--primary), var(--secondary));
522
- color: white;
523
- text-align: center;
524
- padding: 6rem 5%;
 
 
 
 
 
 
 
525
  position: relative;
526
  overflow: hidden;
 
527
  }
528
 
529
- .cta-section::before {
530
- content: '';
531
- position: absolute;
532
- top: -100px;
533
- right: -100px;
534
- width: 300px;
535
- height: 300px;
536
- border-radius: 50%;
537
- background: rgba(255, 255, 255, 0.1);
538
  }
539
 
540
- .cta-section::after {
541
- content: '';
542
- position: absolute;
543
- bottom: -50px;
544
- left: -50px;
545
- width: 200px;
546
- height: 200px;
547
- border-radius: 50%;
548
- background: rgba(255, 255, 255, 0.1);
 
 
549
  }
550
 
551
- .cta-content {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
552
  position: relative;
553
- z-index: 2;
554
- max-width: 800px;
555
- margin: 0 auto;
556
  }
557
 
558
- .cta-content h2 {
559
- font-size: 2.5rem;
560
  margin-bottom: 1.5rem;
 
 
561
  }
562
 
563
- .cta-content p {
564
- margin-bottom: 2rem;
 
 
565
  font-size: 1.1rem;
566
- opacity: 0.9;
567
  }
568
-
569
- /* Footer */
 
 
 
 
570
  footer {
571
- background-color: var(--dark);
572
- color: white;
573
- padding: 6rem 5% 3rem;
 
574
  }
575
-
576
  .footer-container {
577
  display: grid;
578
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
579
  gap: 3rem;
580
- margin-bottom: 4rem;
 
 
 
581
  }
582
 
583
  .footer-col h3 {
584
- font-size: 1.3rem;
585
  margin-bottom: 1.5rem;
586
  position: relative;
587
  display: inline-block;
 
 
588
  }
589
 
590
- .footer-col h3::after {
591
  content: '';
592
  position: absolute;
593
- bottom: -10px;
594
  left: 0;
595
- width: 50px;
596
- height: 3px;
597
- background: linear-gradient(to right, var(--primary), var(--accent));
598
  }
599
 
600
  .footer-col p {
601
  margin-bottom: 1.5rem;
602
- opacity: 0.8;
 
603
  }
604
 
605
  .social-links {
606
  display: flex;
607
- gap: 1rem;
608
  }
609
 
610
  .social-links a {
611
  display: flex;
612
  align-items: center;
613
  justify-content: center;
614
- width: 40px;
615
- height: 40px;
616
  border-radius: 50%;
617
- background-color: rgba(255, 255, 255, 0.1);
618
  color: white;
619
  transition: all 0.3s ease;
 
620
  }
621
 
622
  .social-links a:hover {
623
- background-color: var(--accent);
624
  transform: translateY(-3px);
625
  }
626
 
 
 
 
 
 
627
  .footer-links li {
628
- list-style: none;
629
- margin-bottom: 1rem;
630
  }
631
 
632
  .footer-links a {
633
- color: rgba(255, 255, 255, 0.7);
634
  text-decoration: none;
635
  transition: all 0.3s ease;
 
636
  }
637
 
638
  .footer-links a:hover {
639
- color: var(--accent);
640
  padding-left: 5px;
641
  }
642
 
643
  .footer-contact p {
644
  display: flex;
645
- align-items: center;
646
- margin-bottom: 1rem;
 
 
647
  }
648
 
649
  .footer-contact i {
650
- margin-right: 1rem;
651
- color: var(--accent);
 
 
 
652
  }
 
 
 
 
 
 
 
 
653
 
654
  .footer-bottom {
655
  text-align: center;
656
- padding-top: 3rem;
657
- border-top: 1px solid rgba(255, 255, 255, 0.1);
658
- opacity: 0.7;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
659
  }
660
 
661
- /* Responsive */
662
  @media (max-width: 992px) {
663
- .hero h1 {
664
- font-size: 3rem;
665
- }
666
-
667
- .about-content {
668
- flex-direction: column;
669
  }
670
-
671
- .about-image {
672
- margin-bottom: 3rem;
 
 
 
 
 
 
 
673
  }
 
 
 
 
 
674
 
675
- .about-image::before {
676
- right: -20px;
677
- top: -20px;
 
 
 
 
 
 
678
  }
679
  }
680
 
681
  @media (max-width: 768px) {
 
682
  .nav-links {
683
  position: fixed;
684
  top: 0;
685
- right: -100%;
686
- width: 80%;
687
- max-width: 350px;
688
  height: 100vh;
689
- background-color: white;
690
  flex-direction: column;
691
- align-items: center;
692
- justify-content: center;
693
- transition: all 0.5s ease;
694
- box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
695
- }
696
-
697
- .nav-links.active {
698
- right: 0;
699
  }
 
 
 
 
 
 
700
 
701
- .nav-links li {
702
- margin: 1.5rem 0;
703
- }
 
704
 
705
- .nav-links a {
706
- color: var(--dark);
707
- font-size: 1.2rem;
708
- }
709
-
710
- .mobile-menu-btn {
711
- display: block;
712
- z-index: 1001;
713
- }
714
-
715
- nav.scrolled .mobile-menu-btn {
716
- color: var(--dark);
717
- }
718
-
719
- .mobile-menu-btn.active {
720
- color: var(--dark);
721
- }
722
-
723
- .hero {
724
- text-align: center;
725
- }
726
-
727
- .hero-btns {
728
- justify-content: center;
729
- }
730
-
731
- .hero-image {
732
- width: 100%;
733
- opacity: 0.3;
734
- }
735
-
736
- .section-title h2 {
737
- font-size: 2rem;
738
- }
739
-
740
- .service-card {
741
- max-width: 350px;
742
- margin: 0 auto;
743
- }
744
  }
745
 
746
  @media (max-width: 576px) {
747
- .hero h1 {
748
- font-size: 2.5rem;
749
- }
750
-
751
- .hero p {
752
- font-size: 1rem;
753
- }
754
-
755
- .hero-btns {
756
- flex-direction: column;
757
- gap: 1rem;
758
- }
759
-
760
- .primary-btn, .secondary-btn {
761
- width: 100%;
762
- text-align: center;
763
- }
764
-
765
- .section {
766
- padding: 4rem 5%;
767
- }
768
-
769
- .stat-number {
770
- font-size: 2.5rem;
771
- }
772
-
773
- .stat-text {
774
- font-size: 1rem;
775
- }
776
-
777
- .testimonial-card {
778
- min-width: 280px;
779
- }
780
  }
 
781
  </style>
782
  </head>
783
  <body>
784
- <!-- Navigation -->
785
- <nav>
786
- <a href="#" class="logo">Krit<span>ova</span></a>
 
 
 
 
787
  <ul class="nav-links">
788
- <li><a href="#home">Home</a></li>
789
  <li><a href="#about">About</a></li>
790
- <li><a href="#services">Services</a></li>
791
- <li><a href="#testimonials">Testimonials</a></li>
 
 
 
792
  <li><a href="#contact">Contact</a></li>
793
- <li><a href="#" class="cta-btn">Get Started</a></li>
794
  </ul>
795
- <button class="mobile-menu-btn">
796
- <i class="fas fa-bars"></i>
797
  </button>
798
  </nav>
799
 
800
- <!-- Hero Section -->
801
- <section class="hero gradient-bg" id="home">
802
- <img src="https://images.unsplash.com/photo-1516321497487-e288fb19713f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="AI Technology" class="hero-image">
803
- <div class="hero-content">
804
- <h1>A New <span>Artificial</span> Beginning</h1>
805
- <p>Kritova is revolutionizing the way businesses leverage AI to drive innovation, efficiency, and growth. Our cutting-edge solutions are designed to transform your operations and help you stay ahead in the digital age.</p>
806
- <div class="hero-btns">
807
- <a href="#" class="primary-btn">Explore Solutions</a>
808
- <a href="#" class="secondary-btn">Learn More</a>
 
809
  </div>
810
- </div>
811
- </section>
 
 
 
812
 
813
- <!-- About Section -->
814
- <section class="section" id="about">
815
- <div class="section-title">
816
- <h2>Who We Are</h2>
817
- </div>
818
- <div class="about-content">
819
- <div class="about-image">
820
- <img src="https://images.unsplash.com/photo-1523961130370-4e2a61659a5f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="About Kritova">
821
  </div>
822
- <div class="about-text">
823
- <h3>Redefining Possibilities with AI</h3>
824
- <p>Founded in 2023, Kritova is at the forefront of artificial intelligence innovation. We combine deep technical expertise with a human-centered approach to create solutions that truly make a difference.</p>
825
- <p>Our team of AI specialists, data scientists, and industry experts work tirelessly to push the boundaries of what's possible with machine learning, natural language processing, and computer vision technologies.</p>
826
-
827
- <div class="features">
828
- <div class="feature-item">
829
- <div class="feature-icon">
830
- <i class="fas fa-brain"></i>
831
- </div>
832
- <h4>Advanced AI</h4>
833
- <p>State-of-the-art machine learning models tailored to your specific needs.</p>
834
- </div>
835
- <div class="feature-item">
836
- <div class="feature-icon">
837
- <i class="fas fa-rocket"></i>
838
- </div>
839
- <h4>Rapid Deployment</h4>
840
- <p>Quick implementation with minimal disruption to your operations.</p>
841
- </div>
842
- <div class="feature-item">
843
- <div class="feature-icon">
844
- <i class="fas fa-shield-alt"></i>
845
- </div>
846
- <h4>Secure Solutions</h4>
847
- <p>Enterprise-grade security to protect your data and assets.</p>
848
- </div>
849
  </div>
850
  </div>
851
- </div>
852
- </section>
853
 
854
- <!-- Services Section -->
855
- <section class="section services" id="services">
856
- <div class="section-title">
857
- <h2>Our Services</h2>
858
- </div>
859
- <div class="services-container">
860
- <div class="service-card">
861
- <div class="service-img">
862
- <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="AI Consulting">
 
 
863
  </div>
864
- <div class="service-content">
865
- <h3>AI Strategy Consulting</h3>
866
- <p>We help organizations identify high-impact AI opportunities and create a roadmap for successful implementation and adoption.</p>
867
- <a href="#" class="read-more">Learn more <i class="fas fa-arrow-right"></i></a>
868
  </div>
869
- </div>
870
- <div class="service-card">
871
- <div class="service-img">
872
- <img src="https://images.unsplash.com/photo-1504868584819-f8e8b4b6d7e3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Custom AI Solutions">
873
  </div>
874
- <div class="service-content">
875
- <h3>Custom AI Solutions</h3>
876
- <p>Our team designs and develops bespoke AI systems tailored to solve your unique business challenges and drive tangible results.</p>
877
- <a href="#" class="read-more">Learn more <i class="fas fa-arrow-right"></i></a>
878
  </div>
879
  </div>
880
- <div class="service-card">
881
- <div class="service-img">
882
- <img src="https://images.unsplash.com/photo-1434626881859-194d67b2b86f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="AI Integration">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
883
  </div>
884
- <div class="service-content">
885
- <h3>AI Integration Services</h3>
886
- <p>Seamlessly incorporate AI capabilities into your existing systems and workflows with our expert integration services.</p>
887
- <a href="#" class="read-more">Learn more <i class="fas fa-arrow-right"></i></a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
888
  </div>
889
  </div>
890
- </div>
891
- </section>
 
 
892
 
893
- <!-- Stats Section -->
894
- <section class="stats">
895
- <div class="section-title">
896
- <h2>By The Numbers</h2>
897
- </div>
898
- <div class="stats-container">
899
- <div class="stat-item">
900
- <div class="stat-number">150+</div>
901
- <div class="stat-text">Satisfied Clients</div>
902
  </div>
903
- <div class="stat-item">
904
- <div class="stat-number">40+</div>
905
- <div class="stat-text">AI Experts</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
906
  </div>
907
- <div class="stat-item">
908
- <div class="stat-number">98%</div>
909
- <div class="stat-text">Client Retention</div>
 
 
 
 
 
 
 
 
910
  </div>
911
- <div class="stat-item">
912
- <div class="stat-number">3x</div>
913
- <div class="stat-text">Average ROI</div>
 
 
 
 
 
 
 
 
914
  </div>
915
- </div>
916
- </section>
 
 
 
 
 
 
 
 
 
 
 
917
 
918
- <!-- Testimonials Section -->
919
- <section class="section testimonials" id="testimonials">
920
- <div class="section-title">
921
- <h2>What Our Clients Say</h2>
922
- </div>
923
- <div class="testimonial-container">
924
- <div class="testimonial-slider">
925
- <div class="testimonial-card">
926
- <div class="testimonial-header">
927
- <div class="testimonial-img">
928
- <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Client">
929
- </div>
930
- <div class="testimonial-author">
931
- <h4>Sarah Johnson</h4>
932
- <p>CEO, TechForward</p>
933
- <div class="testimonial-rating">
934
- <i class="fas fa-star"></i>
935
- <i class="fas fa-star"></i>
936
- <i class="fas fa-star"></i>
937
- <i class="fas fa-star"></i>
938
- <i class="fas fa-star"></i>
939
- </div>
940
- </div>
941
- </div>
942
- <div class="testimonial-content">
943
- <p>"Kritova's AI solutions transformed our customer service operations. We've seen a 70% reduction in response times and significantly improved customer satisfaction scores."</p>
944
  </div>
945
  </div>
946
- <div class="testimonial-card">
947
- <div class="testimonial-header">
948
- <div class="testimonial-img">
949
- <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client">
950
- </div>
951
- <div class="testimonial-author">
952
- <h4>Michael Chen</h4>
953
- <p>CTO, Global Retail</p>
954
- <div class="testimonial-rating">
955
- <i class="fas fa-star"></i>
956
- <i class="fas fa-star"></i>
957
- <i class="fas fa-star"></i>
958
- <i class="fas fa-star"></i>
959
- <i class="fas fa-star-half-alt"></i>
960
- </div>
961
- </div>
962
- </div>
963
- <div class="testimonial-content">
964
- <p>"The predictive analytics platform Kritova developed for us has revolutionized our inventory management, reducing waste by 45% while improving product availability."</p>
965
  </div>
966
  </div>
967
- <div class="testimonial-card">
968
- <div class="testimonial-header">
969
- <div class="testimonial-img">
970
- <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Client">
971
- </div>
972
- <div class="testimonial-author">
973
- <h4>Emily Rodriguez</h4>
974
- <p>Director, HealthFirst</p>
975
- <div class="testimonial-rating">
976
- <i class="fas fa-star"></i>
977
- <i class="fas fa-star"></i>
978
- <i class="fas fa-star"></i>
979
- <i class="fas fa-star"></i>
980
- <i class="fas fa-star"></i>
981
- </div>
982
- </div>
983
  </div>
984
- <div class="testimonial-content">
985
- <p>"Their natural language processing system has dramatically improved our patient record analysis, saving us thousands of hours while improving accuracy."</p>
 
 
 
 
 
 
986
  </div>
987
  </div>
988
- <div class="testimonial-card">
989
- <div class="testimonial-header">
990
- <div class="testimonial-img">
991
- <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Client">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
992
  </div>
993
- <div class="testimonial-author">
994
- <h4>David Wilson</h4>
995
- <p>VP Operations, FinSecure</p>
996
- <div class="testimonial-rating">
997
- <i class="fas fa-star"></i>
998
- <i class="fas fa-star"></i>
999
- <i class="fas fa-star"></i>
1000
- <i class="fas fa-star"></i>
1001
- <i class="far fa-star"></i>
1002
- </div>
1003
  </div>
1004
  </div>
1005
- <div class="testimonial-content">
1006
- <p>"The fraud detection AI Kritova implemented has saved us millions by identifying sophisticated patterns we never could have caught manually."</p>
 
1007
  </div>
1008
  </div>
1009
  </div>
1010
- <div class="slider-nav">
1011
- <div class="slider-dot active"></div>
1012
- <div class="slider-dot"></div>
1013
- <div class="slider-dot"></div>
1014
- <div class="slider-dot"></div>
1015
- </div>
1016
- </div>
1017
- </section>
1018
 
1019
- <!-- CTA Section -->
1020
- <section class="cta-section" id="contact">
1021
- <div class="cta-content">
1022
- <h2>Ready to Begin Your AI Journey?</h2>
1023
- <p>Schedule a consultation with our experts to discover how Kritova can help your business harness the power of artificial intelligence.</p>
1024
- <a href="#" class="primary-btn">Get Started Today</a>
1025
- </div>
1026
- </section>
1027
 
1028
- <!-- Footer -->
1029
  <footer>
1030
  <div class="footer-container">
 
1031
  <div class="footer-col">
1032
- <h3>Kritova</h3>
1033
- <p>A New Artificial Beginning. We're transforming businesses with cutting-edge AI solutions that drive real results.</p>
 
 
 
 
 
1034
  <div class="social-links">
1035
- <a href="#"><i class="fab fa-twitter"></i></a>
1036
- <a href="#"><i class="fab fa-linkedin-in"></i></a>
1037
- <a href="#"><i class="fab fa-facebook-f"></i></a>
1038
- <a href="#"><i class="fab fa-instagram"></i></a>
1039
  </div>
1040
  </div>
 
1041
  <div class="footer-col">
1042
  <h3>Quick Links</h3>
1043
  <ul class="footer-links">
1044
- <li><a href="#home">Home</a></li>
1045
- <li><a href="#about">About Us</a></li>
1046
- <li><a href="#services">Services</a></li>
1047
- <li><a href="#testimonials">Case Studies</a></li>
1048
- <li><a href="#">Blog</a></li>
 
1049
  </ul>
1050
  </div>
 
1051
  <div class="footer-col">
1052
- <h3>Services</h3>
1053
  <ul class="footer-links">
1054
- <li><a href="#">AI Consulting</a></li>
1055
- <li><a href="#">Custom AI Solutions</a></li>
1056
- <li><a href="#">AI Integration</a></li>
1057
- <li><a href="#">Data Analytics</a></li>
1058
- <li><a href="#">AI Training</a></li>
 
1059
  </ul>
1060
  </div>
 
1061
  <div class="footer-col footer-contact">
1062
  <h3>Contact Us</h3>
1063
- <p><i class="fas fa-map-marker-alt"></i> 123 AI Boulevard, San Francisco, CA 94107</p>
1064
- <p><i class="fas fa-phone-alt"></i> +1 (555) 123-4567</p>
1065
- <p><i class="fas fa-envelope"></i> hello@kritova.com</p>
1066
- </div>
1067
  </div>
 
1068
  <div class="footer-bottom">
1069
- <p>&copy; 2023 Kritova. All Rights Reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
 
1070
  </div>
1071
  </footer>
1072
 
 
1073
  <script>
1074
  // Mobile Menu Toggle
1075
- const menuBtn = document.querySelector('.mobile-menu-btn');
1076
  const navLinks = document.querySelector('.nav-links');
1077
-
1078
- menuBtn.addEventListener('click', () => {
 
 
 
 
1079
  navLinks.classList.toggle('active');
1080
- menuBtn.classList.toggle('active');
1081
-
1082
- // Change icon
1083
- const icon = menuBtn.querySelector('i');
1084
  if (navLinks.classList.contains('active')) {
1085
  icon.classList.remove('fa-bars');
1086
- icon.classList.add('fa-times');
1087
  } else {
1088
  icon.classList.remove('fa-times');
1089
  icon.classList.add('fa-bars');
1090
  }
1091
  });
1092
-
1093
- // Navbar Scroll Effect
1094
- window.addEventListener('scroll', () => {
1095
- const nav = document.querySelector('nav');
1096
- nav.classList.toggle('scrolled', window.scrollY > 50);
1097
- });
1098
-
1099
- // Testimonial Slider
1100
- const slider = document.querySelector('.testimonial-slider');
1101
- const dots = document.querySelectorAll('.slider-dot');
1102
- let currentSlide = 0;
1103
-
1104
- dots.forEach((dot, index) => {
1105
- dot.addEventListener('click', () => {
1106
- currentSlide = index;
1107
- updateSlider();
1108
  });
1109
  });
1110
 
1111
- function updateSlider() {
1112
- const slideWidth = document.querySelector('.testimonial-card').offsetWidth + 32; // card width + gap
1113
- slider.scrollTo({
1114
- left: currentSlide * slideWidth,
1115
- behavior: 'smooth'
1116
- });
1117
-
1118
- dots.forEach((dot, index) => {
1119
- dot.classList.toggle('active', index === currentSlide);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1120
  });
1121
- }
1122
-
1123
- // Auto slide testimonials
1124
- setInterval(() => {
1125
- currentSlide = (currentSlide + 1) % dots.length;
1126
- updateSlider();
1127
- }, 5000);
1128
-
1129
- // Smooth scrolling for all links
1130
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1131
  anchor.addEventListener('click', function (e) {
1132
- e.preventDefault();
1133
-
1134
- if (this.getAttribute('href') === '#') return;
1135
-
1136
- const targetId = this.getAttribute('href');
1137
- const targetElement = document.querySelector(targetId);
1138
-
1139
- if (targetElement) {
1140
- window.scrollTo({
1141
- top: targetElement.offsetTop - 80,
1142
- behavior: 'smooth'
1143
- });
1144
-
1145
- // Close mobile menu if open
1146
- if (navLinks.classList.contains('active')) {
1147
- navLinks.classList.remove('active');
1148
- menuBtn.querySelector('i').classList.remove('fa-times');
1149
- menuBtn.querySelector('i').classList.add('fa-bars');
1150
  }
1151
  }
1152
  });
1153
  });
 
1154
  </script>
1155
- <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
1156
- </html>
 
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Kritova - Artificial New Beginnings | AI Learning & Innovation</title>
7
+
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
10
+
11
  <style>
12
+ /* --- Base Styles & Variables --- */
13
  :root {
14
+ --primary: #7CB342; /* Kritova Green */
15
+ --primary-dark: #689F38; /* Darker Kritova Green */
16
+ --secondary: #556B2F; /* Dark Olive Green - Complementary */
17
+ --accent: #e74c3c;
18
+ --dark: #2c3e50; /* Dark Blue-Gray */
19
+ --light: #ecf0f1; /* Light Gray */
20
+ --gradient: linear-gradient(135deg, var(--primary), var(--primary-dark));
21
+
22
+ --tech-green: var(--primary-dark);
23
+ --organic-green: var(--primary);
24
+ --circuit-dark: var(--dark);
25
+ --growth-light: var(--light);
26
  }
27
 
28
  * {
29
  margin: 0;
30
  padding: 0;
31
  box-sizing: border-box;
32
+ font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
33
  }
34
 
35
  body {
36
+ background-color: #fdfdfd;
37
  color: var(--dark);
38
+ line-height: 1.7;
39
  overflow-x: hidden;
40
+ position: relative;
41
+ }
42
+
43
+ body::before {
44
+ content: '';
45
+ position: fixed;
46
+ top: 0;
47
+ left: 0;
48
+ width: 100%;
49
+ height: 100%;
50
+ background-image:
51
+ url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M0,20 L20,20 L20,40 L40,40 L40,60 L60,60 L60,80 L80,80 L80,100" fill="none" stroke="%237CB342" stroke-width="0.3" opacity="0.05"/></svg>'),
52
+ url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M30,50 Q50,20 70,50 T90,50" fill="none" stroke="%23689F38" stroke-width="0.3" opacity="0.05"/></svg>');
53
+ background-repeat: repeat, repeat;
54
+ pointer-events: none;
55
+ z-index: -1;
56
+ }
57
+
58
+ main {
59
+ position: relative;
60
+ z-index: 1;
61
+ }
62
+
63
+ section {
64
+ position: relative;
65
+ overflow: hidden;
66
+ }
67
+
68
+ /* --- Animations --- */
69
+ @keyframes float {
70
+ 0% { transform: translateY(0px); }
71
+ 50% { transform: translateY(-15px); }
72
+ 100% { transform: translateY(0px); }
73
  }
74
 
75
+ @keyframes pulse {
76
+ 0% { transform: scale(1); opacity: 0.2; }
77
+ 50% { transform: scale(1.05); opacity: 0.3; }
78
+ 100% { transform: scale(1); opacity: 0.2; }
79
  }
80
 
81
+ @keyframes fadeIn {
82
+ from { opacity: 0; transform: translateY(10px); }
83
+ to { opacity: 1; transform: translateY(0); }
84
+ }
85
+
86
+ /* --- Navigation --- */
87
  nav {
88
  position: fixed;
89
  top: 0;
90
  left: 0;
91
  width: 100%;
92
+ padding: 1rem 5%;
93
  display: flex;
94
  justify-content: space-between;
95
  align-items: center;
96
  z-index: 1000;
97
+ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
98
+ background: rgba(255,255,255,0.98);
99
+ box-shadow: 0 2px 15px rgba(0,0,0,0.06);
100
+ backdrop-filter: blur(5px);
 
 
 
101
  }
102
 
103
  .logo {
104
  display: flex;
105
  align-items: center;
 
 
 
106
  text-decoration: none;
107
  }
108
+
109
+ .logo img {
110
+ height: 35px; /* Adjust size as needed */
111
+ width: auto;
112
  }
113
+
114
+ /* Fallback text style if image fails or isn't used */
115
+ .logo-text {
116
+ font-weight: 700;
117
+ font-size: 1.6rem;
118
+ color: var(--dark);
119
+ letter-spacing: -0.5px;
120
  }
121
+ .logo-text span {
122
+ color: var(--primary);
123
+ }
124
 
125
  .nav-links {
126
  display: flex;
127
  list-style: none;
128
+ align-items: center; /* Align items vertically */
129
  }
130
 
131
  .nav-links li {
132
+ margin-left: 2rem;
133
  }
134
 
135
  .nav-links a {
136
+ color: var(--dark);
137
  text-decoration: none;
138
  font-weight: 500;
139
  transition: all 0.3s ease;
140
+ position: relative;
141
+ display: inline-block;
142
+ padding-bottom: 5px;
143
  }
144
 
145
+ .nav-links a::after {
146
+ content: '';
147
+ position: absolute;
148
+ bottom: 0;
149
+ left: 0;
150
+ width: 0;
151
+ height: 2px;
152
+ background: var(--gradient);
153
+ transition: width 0.3s ease;
154
  }
155
 
156
+ .nav-links a:hover, .nav-links a.active {
157
+ color: var(--primary);
158
+ }
159
+
160
+ .nav-links a:hover::after, .nav-links a.active::after {
161
+ width: 100%;
162
  }
163
 
164
+ .cta-btn { /* Navigation CTA Button */
165
+ background: var(--gradient);
166
+ color: white !important;
167
+ padding: 0.6rem 1.5rem;
168
  border-radius: 50px;
169
  font-weight: 600;
170
  transition: all 0.3s ease;
171
+ box-shadow: 0 4px 15px rgba(124, 179, 66, 0.3);
172
+ text-decoration: none;
173
+ display: inline-block;
174
+ margin-left: 2rem;
175
  }
176
 
177
  .cta-btn:hover {
178
  transform: translateY(-3px);
179
+ box-shadow: 0 8px 25px rgba(124, 179, 66, 0.4);
180
+ color: white !important;
181
+ }
182
+ .cta-btn::after {
183
+ display: none;
184
  }
185
 
186
  .mobile-menu-btn {
187
  display: none;
188
  background: none;
189
  border: none;
190
+ color: var(--primary);
191
+ font-size: 1.8rem;
192
  cursor: pointer;
193
+ z-index: 1001;
194
  }
195
+
196
+ /* --- Hero Section --- */
197
  .hero {
198
+ min-height: 100vh;
199
  display: flex;
200
  align-items: center;
201
+ padding: 120px 8% 60px; /* Increased horizontal padding */
202
  position: relative;
203
  overflow: hidden;
204
+ background: linear-gradient(135deg, rgba(124, 179, 66, 0.03), rgba(85, 107, 47, 0.03));
 
 
 
 
 
 
 
 
 
 
205
  }
206
 
207
  .hero-content {
208
+ flex: 1; /* Allow text content to take available space */
209
+ max-width: 55%; /* Limit text width to prevent overlap */
210
+ padding-right: 4%; /* Add padding between text and image area */
211
  position: relative;
212
  z-index: 2;
 
 
213
  }
214
 
215
  .hero h1 {
216
+ font-size: 3.2rem;
217
  margin-bottom: 1.5rem;
218
+ line-height: 1.3; /* Adjusted line height */
219
+ color: var(--dark);
220
+ font-weight: 800;
221
  }
222
 
223
  .hero h1 span {
224
+ background: var(--gradient);
225
+ -webkit-background-clip: text;
226
+ background-clip: text;
227
+ color: transparent;
228
  }
229
 
230
  .hero p {
231
+ font-size: 1.15rem;
232
+ margin-bottom: 2.5rem;
233
+ color: #555;
234
+ font-weight: 400;
235
  }
236
 
237
  .hero-btns {
238
  display: flex;
239
+ gap: 1rem;
240
+ align-items: center;
241
  }
242
 
243
+ .primary-btn { /* Hero Primary Button */
244
+ background: var(--gradient);
245
  color: white;
246
+ padding: 0.9rem 2.2rem;
247
  border-radius: 50px;
248
  font-weight: 600;
249
  text-decoration: none;
250
  transition: all 0.3s ease;
251
+ box-shadow: 0 4px 15px rgba(124, 179, 66, 0.3);
252
+ display: inline-flex;
253
+ align-items: center;
254
  }
255
 
256
+ .primary-btn i {
257
+ margin-left: 0.5rem;
258
+ transition: transform 0.3s ease;
259
+ }
260
+
261
+ .primary-btn:hover {
262
+ transform: translateY(-3px);
263
+ box-shadow: 0 10px 25px rgba(124, 179, 66, 0.4);
264
+ }
265
+
266
+ .primary-btn:hover i {
267
+ transform: translateX(5px);
268
+ }
269
+
270
+ .secondary-btn { /* Hero Secondary Button */
271
+ background: transparent;
272
+ color: var(--primary);
273
+ padding: 0.9rem 2.2rem;
274
  border-radius: 50px;
275
+ border: 2px solid var(--primary);
276
  font-weight: 600;
277
  text-decoration: none;
278
  transition: all 0.3s ease;
279
+ display: inline-flex;
280
+ align-items: center;
281
  }
282
 
283
+ .secondary-btn:hover {
284
+ background: rgba(124, 179, 66, 0.05);
285
  transform: translateY(-3px);
286
+ box-shadow: 0 5px 15px rgba(124, 179, 66, 0.2);
287
  }
288
+ .secondary-btn i {
289
+ margin-left: 0.5rem;
 
290
  }
291
 
292
  .hero-image {
293
  position: absolute;
294
+ right: 8%; /* Adjusted position */
295
+ top: 50%;
296
+ transform: translateY(-50%);
297
+ width: 38%; /* Adjusted size */
298
+ max-width: 550px; /* Adjusted max size */
299
+ animation: float 6s ease-in-out infinite;
300
+ filter: drop-shadow(0 15px 25px rgba(0,0,0,0.1));
301
+ z-index: 1; /* Ensure image is behind text if necessary */
302
+ }
303
+ .hero-image img {
304
+ width: 100%;
305
+ height: auto;
306
+ border-radius: 15px;
307
  }
308
 
309
+ .hero-image::before { /* Background pulse effect */
310
+ content: '';
311
+ position: absolute;
312
+ width: 120%;
313
+ height: 120%;
314
+ top: -10%;
315
+ left: -10%;
316
+ background: radial-gradient(circle, rgba(124, 179, 66, 0.2) 0%, rgba(255,255,255,0) 70%);
317
+ border-radius: 50%;
318
+ z-index: -1;
319
+ animation: pulse 8s ease-in-out infinite;
320
+ }
321
+
322
+ /* --- General Section Styles --- */
323
  .section {
324
+ padding: 6rem 5%;
325
+ position: relative;
326
+ }
327
+
328
+ .section-dark {
329
+ background: rgba(236, 240, 241, 0.4);
330
  }
331
 
332
  .section-title {
333
  text-align: center;
334
+ margin-bottom: 4rem;
335
  }
336
 
337
  .section-title h2 {
338
+ font-size: 2.5rem;
339
  color: var(--dark);
340
  position: relative;
341
  display: inline-block;
342
+ padding-bottom: 1rem;
343
+ font-weight: 700;
344
+ margin-bottom: 1rem;
345
  }
346
 
347
  .section-title h2::after {
 
350
  bottom: 0;
351
  left: 50%;
352
  transform: translateX(-50%);
353
+ width: 80px;
354
+ height: 3px;
355
+ background: var(--gradient);
356
  border-radius: 2px;
357
  }
358
 
359
+ .section-title p { /* Subtitle */
360
+ max-width: 700px;
361
+ margin: 0 auto;
362
+ color: #666;
363
+ font-size: 1.1rem;
364
+ }
365
+
366
+ /* --- About Section --- */
367
  .about-content {
368
+ max-width: 1100px;
369
+ margin: 0 auto;
370
  display: flex;
371
+ gap: 4rem;
372
  align-items: center;
 
373
  }
374
 
375
+ .about-text {
376
  flex: 1;
377
+ }
378
+
379
+ .about-text h3 {
380
+ font-size: 1.8rem;
381
+ margin-bottom: 1.5rem;
382
+ color: var(--dark);
383
+ font-weight: 600;
384
+ line-height: 1.3;
385
+ }
386
+
387
+ .about-text p {
388
+ margin-bottom: 1.2rem;
389
+ color: #555;
390
+ font-size: 1.05rem;
391
+ }
392
+
393
+ .about-image {
394
+ flex: 0 0 45%;
395
  position: relative;
396
  }
397
 
398
  .about-image img {
399
  width: 100%;
400
+ height: auto;
401
+ border-radius: 15px;
402
+ box-shadow: 0 20px 40px rgba(0,0,0,0.1);
403
+ transition: transform 0.5s ease;
404
  }
405
 
406
+ .about-image:hover img {
407
+ transform: scale(1.03);
408
  }
409
 
410
+ .about-image::before { /* Decorative border */
411
  content: '';
412
  position: absolute;
413
+ width: 100%;
414
+ height: 100%;
415
+ border: 3px solid var(--primary);
416
+ border-radius: 15px;
417
+ top: -15px;
418
+ left: -15px;
419
  z-index: -1;
420
+ transition: all 0.5s ease;
421
+ opacity: 0.5;
 
 
 
 
 
 
 
 
 
 
422
  }
423
 
424
+ .about-image:hover::before {
425
+ top: -20px;
426
+ left: -20px;
427
+ opacity: 0.8;
428
  }
429
+
430
+ /* --- How It Works Section --- */
431
+ .process {
432
+ display: grid;
433
+ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
434
  gap: 2rem;
435
+ max-width: 1200px;
436
+ margin: 0 auto;
437
  }
438
 
439
+ .process-step {
440
+ text-align: center;
441
+ position: relative;
442
+ padding: 2.5rem 1.5rem;
443
+ background: white;
444
+ border-radius: 15px;
445
+ box-shadow: 0 8px 25px rgba(0,0,0,0.04);
446
  transition: all 0.3s ease;
447
+ z-index: 1;
448
+ border-top: 4px solid var(--primary);
449
  }
450
 
451
+ .process-step:hover {
452
+ transform: translateY(-8px);
453
+ box-shadow: 0 12px 35px rgba(0,0,0,0.08);
454
  }
455
 
456
+ .step-number {
457
+ width: 45px;
458
+ height: 45px;
459
+ background: var(--gradient);
460
+ color: white;
461
+ border-radius: 50%;
462
+ display: flex;
463
+ align-items: center;
464
+ justify-content: center;
465
+ font-size: 1.3rem;
466
+ font-weight: 600;
467
+ margin: 0 auto 1.5rem;
468
+ box-shadow: 0 4px 10px rgba(124, 179, 66, 0.3);
469
  }
470
 
471
+ .process-step h4 {
472
+ font-size: 1.2rem;
473
+ margin-bottom: 0.8rem;
474
+ color: var(--dark);
475
+ font-weight: 600;
476
  }
477
 
478
+ .process-step p {
479
+ color: #666;
480
+ font-size: 0.9rem;
481
  }
482
+
483
+ /* --- Projects Section --- */
484
+ .projects {
485
  display: grid;
486
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
487
+ gap: 2.5rem;
488
+ max-width: 1200px;
489
+ margin: 0 auto;
490
  }
491
 
492
+ .project-card {
493
+ background: white;
494
+ border-radius: 15px;
495
  overflow: hidden;
496
+ box-shadow: 0 10px 30px rgba(0,0,0,0.05);
497
+ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
498
+ position: relative;
499
+ display: flex;
500
+ flex-direction: column;
501
  }
502
 
503
+ .project-card:hover {
504
+ transform: translateY(-10px) scale(1.02);
505
+ box-shadow: 0 18px 45px rgba(0,0,0,0.1);
506
  }
507
 
508
+ .project-img {
509
+ height: 220px;
510
  overflow: hidden;
511
+ position: relative;
512
  }
513
 
514
+ .project-img img {
515
  width: 100%;
516
  height: 100%;
517
  object-fit: cover;
518
+ transition: transform 0.5s ease;
519
  }
520
 
521
+ .project-card:hover .project-img img {
522
  transform: scale(1.1);
523
  }
524
 
525
+ .project-img::after { /* Gradient overlay */
526
+ content: '';
527
+ position: absolute;
528
+ bottom: 0;
529
+ left: 0;
530
+ width: 100%;
531
+ height: 70%;
532
+ background: linear-gradient(to top, rgba(44, 62, 80, 0.7), transparent);
533
+ z-index: 1;
534
+ transition: opacity 0.3s ease;
535
+ }
536
+ .project-card:hover .project-img::after {
537
+ opacity: 0.8;
538
  }
539
 
540
+ .project-logo { /* Use an icon or simple text */
541
+ position: absolute;
542
+ bottom: 1rem;
543
+ left: 1.5rem;
544
+ z-index: 2;
545
+ color: white;
546
+ font-weight: 600;
547
+ font-size: 1.1rem;
548
+ background-color: rgba(0,0,0,0.4);
549
+ padding: 0.2rem 0.6rem;
550
+ border-radius: 5px;
551
  }
552
 
553
+ .project-content {
554
+ padding: 1.5rem;
555
+ flex-grow: 1;
556
+ display: flex;
557
+ flex-direction: column;
558
+ justify-content: space-between;
559
  }
560
 
561
+ .project-content h4 {
562
+ font-size: 1.2rem;
563
+ margin-bottom: 0.5rem;
564
+ color: var(--dark);
565
  font-weight: 600;
 
 
 
566
  }
567
 
568
+ .project-content p {
569
+ color: #666;
570
+ margin-bottom: 1.5rem;
571
+ font-size: 0.9rem;
572
+ flex-grow: 1;
573
  }
574
 
575
+ .project-card .secondary-btn { /* Button styling */
576
+ padding: 0.6rem 1.5rem;
577
+ font-size: 0.9rem;
578
+ align-self: flex-start;
579
+ }
580
+
581
+ /* --- Audience Section --- */
582
+ .audience-tabs {
583
+ display: flex;
584
+ justify-content: center;
585
+ gap: 1rem;
586
+ margin-bottom: 3rem;
587
+ flex-wrap: wrap;
588
+ }
589
+
590
+ .audience-tab {
591
+ padding: 0.8rem 1.8rem;
592
+ background: white;
593
+ border-radius: 50px;
594
+ cursor: pointer;
595
+ transition: all 0.3s ease;
596
+ box-shadow: 0 5px 15px rgba(0,0,0,0.05);
597
+ font-weight: 500;
598
+ border: 2px solid #eee;
599
+ color: #555;
600
+ display: inline-flex; /* Align icon and text */
601
+ align-items: center;
602
  }
603
 
604
+ .audience-tab.active {
605
+ background: var(--gradient);
 
606
  color: white;
607
+ box-shadow: 0 5px 20px rgba(124, 179, 66, 0.3);
608
+ border-color: transparent;
609
  }
610
 
611
+ .audience-tab:not(.active):hover {
612
+ border-color: var(--primary);
613
+ color: var(--primary);
614
+ transform: translateY(-2px);
 
615
  }
616
 
617
+ .audience-content {
618
+ max-width: 900px;
619
+ margin: 0 auto;
620
+ display: none;
621
+ background: white;
622
+ padding: 2.5rem;
623
+ border-radius: 15px;
624
+ box-shadow: 0 10px 30px rgba(0,0,0,0.05);
625
+ border-left: 5px solid var(--primary);
626
  }
627
 
628
+ .audience-content.active {
629
+ display: block;
630
+ animation: fadeIn 0.5s ease;
631
+ }
632
+
633
+ .audience-content h3 {
634
+ font-size: 1.8rem;
635
+ margin-bottom: 1.5rem;
636
+ color: var(--dark);
637
+ font-weight: 600;
638
  }
639
 
640
+ .audience-content ul {
641
+ margin-left: 0; /* Remove default margin */
642
+ margin-bottom: 2rem;
643
+ list-style: none;
644
+ padding-left: 0;
645
  }
646
 
647
+ .audience-content ul li {
648
+ margin-bottom: 0.7rem;
649
+ color: #555;
650
  position: relative;
651
+ padding-left: 1.8rem; /* Space for custom bullet */
652
+ font-size: 1rem; /* Ensure readability */
653
+ }
654
+ /* Custom list bullet */
655
+ .audience-content ul li::before {
656
+ content: '\f00c'; /* Font Awesome check icon */
657
+ font-family: 'Font Awesome 6 Free';
658
+ font-weight: 900;
659
+ color: var(--primary);
660
+ position: absolute;
661
+ left: 0;
662
+ top: 4px; /* Adjust vertical alignment */
663
+ font-size: 0.9em; /* Adjust icon size */
664
  }
665
 
666
+ .audience-content .primary-btn {
667
+ margin-top: 1rem;
668
+ }
669
+
670
+ /* --- Vision (Timeline) Section --- */
671
+ .timeline {
672
  position: relative;
673
+ max-width: 900px;
674
+ margin: 4rem auto 0;
675
  }
676
 
677
+ .timeline::before { /* Central line */
678
+ content: '';
679
+ position: absolute;
680
+ width: 3px;
681
+ background: var(--primary);
682
+ opacity: 0.3;
683
+ top: 0;
684
+ bottom: 0;
685
+ left: 50%;
686
+ margin-left: -1.5px;
687
  }
688
 
689
+ .timeline-item {
690
+ padding: 10px 40px;
691
+ position: relative;
692
+ width: 50%;
693
+ box-sizing: border-box;
694
+ margin-bottom: 2.5rem;
695
  }
696
 
697
+ .timeline-item:nth-child(odd) {
698
+ left: 0;
699
+ padding-right: 30px; /* Increased padding */
 
 
 
 
700
  }
701
 
702
+ .timeline-item:nth-child(even) {
703
+ left: 50%;
704
+ padding-left: 30px; /* Increased padding */
 
705
  }
706
 
707
+ .timeline-dot {
708
+ position: absolute;
709
+ width: 18px;
710
+ height: 18px;
711
  border-radius: 50%;
712
+ background: white;
713
+ border: 4px solid var(--primary);
714
+ top: 20px;
715
+ z-index: 1;
716
  }
717
+ .timeline-item:nth-child(odd) .timeline-dot {
718
+ right: -11px;
719
+ }
720
+ .timeline-item:nth-child(even) .timeline-dot {
721
+ left: -11px;
722
  }
723
 
724
+ .timeline-content {
725
+ padding: 1.8rem;
726
+ background: white;
727
+ border-radius: 10px;
728
+ box-shadow: 0 8px 25px rgba(0,0,0,0.05);
729
+ position: relative;
730
+ transition: transform 0.3s ease, box-shadow 0.3s ease; /* Added box-shadow transition */
731
+ }
732
+ .timeline-item:hover .timeline-content {
733
+ transform: scale(1.03);
734
+ box-shadow: 0 12px 35px rgba(0,0,0,0.08); /* Enhance shadow on hover */
735
+ }
736
+
737
+ /* Arrow pointing to timeline */
738
+ .timeline-content::after {
739
+ content: '';
740
+ position: absolute;
741
+ top: 22px; /* Adjusted position */
742
+ width: 0;
743
+ height: 0;
744
+ border-style: solid;
745
+ border-width: 8px; /* Smaller arrow */
746
+ }
747
+ .timeline-item:nth-child(odd) .timeline-content::after {
748
+ right: -16px; /* Adjusted position */
749
+ border-color: transparent transparent transparent white;
750
+ }
751
+ .timeline-item:nth-child(even) .timeline-content::after {
752
+ left: -16px; /* Adjusted position */
753
+ border-color: transparent white transparent transparent;
754
+ }
755
+
756
+ .timeline-content h4 {
757
+ margin-bottom: 0.8rem;
758
+ color: var(--primary-dark);
759
+ font-weight: 600;
760
+ font-size: 1.1rem;
761
  }
762
 
763
+ .timeline-content p {
764
+ color: #666;
765
  font-size: 0.9rem;
766
  }
767
 
768
+ .timeline-date {
769
+ font-weight: 600;
770
+ color: var(--secondary);
771
+ margin-bottom: 0.5rem;
772
+ display: block;
773
+ font-size: 0.9rem;
774
+ }
775
+
776
+ /* --- Principles Section --- */
777
+ .principles {
778
+ display: grid;
779
+ grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); /* Adjusted minmax */
780
+ gap: 2rem;
781
+ max-width: 1200px;
782
+ margin: 0 auto;
783
  }
784
 
785
+ .principle-card {
786
+ background: white;
787
+ border-radius: 15px;
788
+ padding: 2rem;
789
+ box-shadow: 0 8px 25px rgba(0,0,0,0.04);
790
+ transition: all 0.4s ease;
791
+ border-top: 4px solid transparent;
792
+ position: relative;
793
+ overflow: hidden;
794
+ text-align: center;
795
  }
796
 
797
+ .principle-card:hover {
798
+ transform: translateY(-8px);
799
+ box-shadow: 0 12px 35px rgba(0,0,0,0.08);
800
+ border-top-color: var(--primary);
801
  }
802
 
803
+ .principle-icon {
804
+ font-size: 2.5rem;
805
+ margin-bottom: 1rem;
806
+ background: var(--gradient);
807
+ -webkit-background-clip: text;
808
+ background-clip: text;
809
+ color: transparent;
810
+ display: inline-block;
811
  }
812
 
813
+ .principle-card h4 {
814
+ font-size: 1.2rem; /* Adjusted size */
815
+ margin-bottom: 0.8rem;
816
+ color: var(--dark);
817
+ font-weight: 600;
818
  }
819
 
820
+ .principle-card p {
821
+ color: #666;
822
+ font-size: 0.85rem; /* Slightly smaller text */
823
+ }
824
+
825
+ /* --- Investors Section --- */
826
+ .investor-container {
827
+ max-width: 900px;
828
+ margin: 0 auto;
829
+ background: white;
830
+ border-radius: 15px;
831
+ padding: 3rem;
832
+ box-shadow: 0 10px 30px rgba(0,0,0,0.05);
833
  position: relative;
834
  overflow: hidden;
835
+ border-left: 5px solid var(--primary);
836
  }
837
 
838
+ .investor-content h3 {
839
+ font-size: 1.8rem;
840
+ margin-bottom: 1.5rem;
841
+ color: var(--dark);
842
+ font-weight: 600;
 
 
 
 
843
  }
844
 
845
+ .investor-content p {
846
+ margin-bottom: 1.5rem;
847
+ color: #555;
848
+ font-size: 1.05rem;
849
+ }
850
+
851
+ .investor-highlights {
852
+ margin-top: 2rem;
853
+ display: grid;
854
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
855
+ gap: 1.5rem;
856
  }
857
 
858
+ .highlight-card {
859
+ background: rgba(124, 179, 66, 0.05);
860
+ border-radius: 10px;
861
+ padding: 1.5rem;
862
+ text-align: center;
863
+ border-left: none;
864
+ border-bottom: 3px solid var(--primary);
865
+ }
866
+
867
+ .highlight-card h4 {
868
+ font-size: 1.8rem; /* Larger number */
869
+ color: var(--primary-dark);
870
+ margin-bottom: 0.3rem; /* Less margin */
871
+ font-weight: 700;
872
+ }
873
+
874
+ .highlight-card p {
875
+ color: #666;
876
+ font-size: 0.9rem;
877
+ margin-bottom: 0;
878
+ }
879
+ .investor-content .primary-btn {
880
+ margin-top: 2.5rem;
881
+ }
882
+
883
+ /* --- CTA Section --- */
884
+ .cta-section {
885
+ text-align: center;
886
+ padding: 6rem 5%;
887
+ background: linear-gradient(135deg, rgba(124, 179, 66, 0.05), rgba(85, 107, 47, 0.05));
888
  position: relative;
889
+ overflow: hidden;
 
 
890
  }
891
 
892
+ .cta-section h2 {
893
+ font-size: 2.5rem;
894
  margin-bottom: 1.5rem;
895
+ color: var(--dark);
896
+ font-weight: 700;
897
  }
898
 
899
+ .cta-section p {
900
+ max-width: 650px;
901
+ margin: 0 auto 2.5rem;
902
+ color: #666;
903
  font-size: 1.1rem;
 
904
  }
905
+ .cta-section .primary-btn { /* Style main CTA button */
906
+ font-size: 1.1rem;
907
+ padding: 1rem 2.5rem;
908
+ }
909
+
910
+ /* --- Footer --- */
911
  footer {
912
+ background: var(--dark);
913
+ color: rgba(255,255,255,0.8);
914
+ padding: 5rem 5% 2rem;
915
+ position: relative;
916
  }
917
+
918
  .footer-container {
919
  display: grid;
920
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
921
  gap: 3rem;
922
+ max-width: 1200px;
923
+ margin: 0 auto;
924
+ position: relative;
925
+ z-index: 1;
926
  }
927
 
928
  .footer-col h3 {
929
+ font-size: 1.3rem;
930
  margin-bottom: 1.5rem;
931
  position: relative;
932
  display: inline-block;
933
+ color: white;
934
+ font-weight: 600;
935
  }
936
 
937
+ .footer-col h3::after { /* Underline for footer headings */
938
  content: '';
939
  position: absolute;
940
+ bottom: -8px;
941
  left: 0;
942
+ width: 40px;
943
+ height: 2px;
944
+ background: var(--gradient);
945
  }
946
 
947
  .footer-col p {
948
  margin-bottom: 1.5rem;
949
+ color: rgba(255,255,255,0.7);
950
+ font-size: 0.9rem;
951
  }
952
 
953
  .social-links {
954
  display: flex;
955
+ gap: 0.8rem;
956
  }
957
 
958
  .social-links a {
959
  display: flex;
960
  align-items: center;
961
  justify-content: center;
962
+ width: 36px;
963
+ height: 36px;
964
  border-radius: 50%;
965
+ background: rgba(255,255,255,0.1);
966
  color: white;
967
  transition: all 0.3s ease;
968
+ font-size: 0.9rem;
969
  }
970
 
971
  .social-links a:hover {
972
+ background: var(--gradient);
973
  transform: translateY(-3px);
974
  }
975
 
976
+ .footer-links {
977
+ padding-left: 0; /* Remove padding */
978
+ list-style: none; /* Remove bullets */
979
+ }
980
+
981
  .footer-links li {
982
+ margin-bottom: 0.8rem;
 
983
  }
984
 
985
  .footer-links a {
986
+ color: rgba(255,255,255,0.7);
987
  text-decoration: none;
988
  transition: all 0.3s ease;
989
+ font-size: 0.9rem;
990
  }
991
 
992
  .footer-links a:hover {
993
+ color: var(--primary);
994
  padding-left: 5px;
995
  }
996
 
997
  .footer-contact p {
998
  display: flex;
999
+ align-items: flex-start;
1000
+ margin-bottom: 0.8rem;
1001
+ font-size: 0.9rem;
1002
+ color: rgba(255,255,255,0.7); /* Ensure text color */
1003
  }
1004
 
1005
  .footer-contact i {
1006
+ margin-right: 0.8rem;
1007
+ color: var(--primary);
1008
+ margin-top: 3px;
1009
+ width: 16px;
1010
+ text-align: center;
1011
  }
1012
+ .footer-contact a { /* Style email link */
1013
+ color: rgba(255,255,255,0.7);
1014
+ text-decoration: none;
1015
+ transition: color 0.3s ease;
1016
+ }
1017
+ .footer-contact a:hover {
1018
+ color: var(--primary);
1019
+ }
1020
 
1021
  .footer-bottom {
1022
  text-align: center;
1023
+ padding-top: 2.5rem;
1024
+ margin-top: 2.5rem;
1025
+ border-top: 1px solid rgba(255,255,255,0.1);
1026
+ color: rgba(255,255,255,0.5);
1027
+ font-size: 0.85rem;
1028
+ }
1029
+ .footer-bottom a {
1030
+ color: rgba(255,255,255,0.5);
1031
+ text-decoration: none;
1032
+ transition: color 0.3s ease;
1033
+ margin: 0 0.5rem; /* Add spacing */
1034
+ }
1035
+ .footer-bottom a:hover {
1036
+ color: var(--primary);
1037
+ }
1038
+
1039
+
1040
+ /* --- Responsive Adjustments --- */
1041
+ @media (max-width: 1200px) {
1042
+ .hero h1 { font-size: 3rem; }
1043
+ .about-content { gap: 3rem; }
1044
  }
1045
 
 
1046
  @media (max-width: 992px) {
1047
+ .hero {
1048
+ text-align: center;
1049
+ padding: 120px 5% 60px;
1050
+ min-height: auto;
1051
+ flex-direction: column;
 
1052
  }
1053
+ .hero-content { margin: 0 auto; max-width: 100%; padding-right: 0; flex: none; } /* Adjust content width */
1054
+ .hero-btns { justify-content: center; }
1055
+ .hero-image {
1056
+ position: relative;
1057
+ left: auto; right: auto; top: auto;
1058
+ transform: none;
1059
+ margin: 3rem auto 0;
1060
+ width: 70%;
1061
+ max-width: 450px;
1062
+ animation: none;
1063
  }
1064
+ .hero-image::before { display: none; }
1065
+
1066
+ .about-content { flex-direction: column; }
1067
+ .about-text, .about-image { flex: none; width: 100%; max-width: 600px; margin: 0 auto; }
1068
+ .about-image { margin-top: 3rem; }
1069
 
1070
+ .timeline::before { left: 20px; margin-left: -1.5px; }
1071
+ .timeline-item { width: 100%; padding-left: 55px; padding-right: 15px; }
1072
+ .timeline-item:nth-child(even) { left: 0; }
1073
+ .timeline-dot { left: 11px; }
1074
+ .timeline-item:nth-child(odd) .timeline-content::after,
1075
+ .timeline-item:nth-child(even) .timeline-content::after {
1076
+ left: -16px;
1077
+ border-width: 8px; /* Match arrow size */
1078
+ border-color: transparent white transparent transparent;
1079
  }
1080
  }
1081
 
1082
  @media (max-width: 768px) {
1083
+ nav { padding: 1rem 5%; }
1084
  .nav-links {
1085
  position: fixed;
1086
  top: 0;
1087
+ right: -100%;
1088
+ width: 70%;
1089
+ max-width: 280px;
1090
  height: 100vh;
1091
+ background: white;
1092
  flex-direction: column;
1093
+ align-items: flex-start;
1094
+ justify-content: flex-start;
1095
+ transition: right 0.5s ease;
1096
+ box-shadow: -5px 0 20px rgba(0,0,0,0.1);
1097
+ padding-top: 5rem;
1098
+ padding-left: 2rem;
1099
+ z-index: 999; /* Ensure menu is below nav bar */
 
1100
  }
1101
+ .nav-links.active { right: 0; }
1102
+ .nav-links li { margin: 1rem 0; width: 100%; } /* Ensure full width for alignment */
1103
+ .nav-links a { display: block; padding: 0.5rem 0;} /* Make links block */
1104
+ .nav-links a::after { display: none; } /* Hide underline in mobile menu */
1105
+ .nav-links .cta-btn { margin-left: 0; margin-top: 1.5rem; display: block; text-align: center; width: calc(100% - 2rem); }
1106
+ .mobile-menu-btn { display: block; z-index: 1001; /* Ensure button is above menu */}
1107
 
1108
+ .hero h1 { font-size: 2.5rem; }
1109
+ .hero p { font-size: 1.05rem; }
1110
+ .hero-btns { flex-direction: column; gap: 1rem; }
1111
+ .primary-btn, .secondary-btn { width: 100%; max-width: 300px; margin: 0 auto; justify-content: center; }
1112
 
1113
+ .section-title h2 { font-size: 2rem; }
1114
+ .section { padding: 4rem 5%; }
1115
+ .process { grid-template-columns: 1fr; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1116
  }
1117
 
1118
  @media (max-width: 576px) {
1119
+ .hero h1 { font-size: 2.1rem; }
1120
+ .hero p { font-size: 1rem; }
1121
+ .section-title h2 { font-size: 1.8rem; }
1122
+ .section-title p { font-size: 1rem; }
1123
+
1124
+ .principles, .projects { grid-template-columns: 1fr; }
1125
+ .timeline-content { padding: 1.5rem; }
1126
+ .investor-container { padding: 2rem; }
1127
+ .audience-tab { width: calc(50% - 0.5rem); text-align: center; padding: 0.7rem 1rem; font-size: 0.9rem;}
1128
+ .audience-content { padding: 2rem; }
1129
+ .footer-container { grid-template-columns: 1fr; text-align: center; }
1130
+ .footer-col h3::after { left: 50%; transform: translateX(-50%); }
1131
+ .social-links { justify-content: center; }
1132
+ .footer-contact p { justify-content: center; text-align: left; } /* Align text left but center block */
1133
+ .footer-contact i { margin-top: 5px; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1134
  }
1135
+
1136
  </style>
1137
  </head>
1138
  <body>
1139
+
1140
+ <nav id="navbar">
1141
+ <a href="#" class="logo">
1142
+ <img src="https://placehold.co/150x35/ffffff/7CB342?text=KRITOVA&font=poppins"
1143
+ alt="Kritova Logo"
1144
+ onerror="this.onerror=null; this.parentElement.innerHTML = '<span class=\'logo-text\'>Krit<span>ova</span></span>';">
1145
+ </a>
1146
  <ul class="nav-links">
 
1147
  <li><a href="#about">About</a></li>
1148
+ <li><a href="#process">How It Works</a></li>
1149
+ <li><a href="#projects">Projects</a></li>
1150
+ <li><a href="#audience">For You</a></li>
1151
+ <li><a href="#vision">Vision</a></li>
1152
+ <li><a href="#investors-section">Investors</a></li>
1153
  <li><a href="#contact">Contact</a></li>
1154
+ <li><a href="#" class="cta-btn">Join Us</a></li>
1155
  </ul>
1156
+ <button class="mobile-menu-btn" aria-label="Toggle Menu" aria-expanded="false">
1157
+ <i class="fas fa-bars"></i>
1158
  </button>
1159
  </nav>
1160
 
1161
+ <main>
1162
+
1163
+ <section class="hero">
1164
+ <div class="hero-content">
1165
+ <h1>Artificial <span>New Beginnings</span> Start Here.</h1>
1166
+ <p>Kritova empowers your AI journey through mentorship-driven collaboration, real-world projects, and market-ready solutions. Join us to turn knowledge into innovation.</p>
1167
+ <div class="hero-btns">
1168
+ <a href="#projects" class="primary-btn">Explore Projects <i class="fas fa-arrow-right"></i></a>
1169
+ <a href="#process" class="secondary-btn">How It Works <i class="fas fa-info-circle"></i></a>
1170
+ </div>
1171
  </div>
1172
+ <div class="hero-image">
1173
+ <img src="https://placehold.co/600x450/E8F5E9/2E7D32?text=AI+Collaboration+%26+Growth&font=poppins"
1174
+ alt="Abstract visual representing AI collaboration and growth"
1175
+ onerror="this.style.display='none';"> </div>
1176
+ </section>
1177
 
1178
+
1179
+ <section class="section" id="about">
1180
+ <div class="section-title">
1181
+ <h2>About Kritova</h2>
1182
+ <p>Founded in 2025, we're more than a tech company—we're a platform where ambition meets opportunity through AI innovation.</p>
 
 
 
1183
  </div>
1184
+ <div class="about-content">
1185
+ <div class="about-text">
1186
+ <h3>A Creative Force With Spartan Spirit</h3>
1187
+ <p>Kritova is an AI-driven startup fuelled by a diverse team of over 20 passionate engineers, developers, analysts, architects, and strategists.</p>
1188
+ <p>We blend seasoned expertise with fresh talent, fostering a unique ecosystem where learners develop practical skills by building tangible AI solutions alongside experienced mentors.</p>
1189
+ <p>Our disciplined, resourceful approach ensures we deliver efficiently and originally, reducing reliance on external resources and proving our model rapidly—like our lead-generating chatbot launching April 19, 2025.</p>
1190
+ <a href="#" class="secondary-btn" style="margin-top: 1rem;">Learn More About Us</a>
1191
+ </div>
1192
+ <div class="about-image">
1193
+ <img src="https://placehold.co/500x350/CFD8DC/37474F?text=Team+Collaboration&font=poppins"
1194
+ alt="Diverse team collaborating on a project"
1195
+ onerror="this.style.display='none';">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1196
  </div>
1197
  </div>
1198
+ </section>
 
1199
 
1200
+
1201
+ <section class="section section-dark" id="process">
1202
+ <div class="section-title">
1203
+ <h2>How Kritova Works</h2>
1204
+ <p>Our four-step process bridges the gap between learning and real-world AI application.</p>
1205
+ </div>
1206
+ <div class="process">
1207
+ <div class="process-step">
1208
+ <div class="step-number">1</div>
1209
+ <h4>Choose Your Project</h4>
1210
+ <p>Select from curated AI challenges like chatbots, voice assistants, and content generators based on your interests.</p>
1211
  </div>
1212
+ <div class="process-step">
1213
+ <div class="step-number">2</div>
1214
+ <h4>Collaborate & Learn</h4>
1215
+ <p>Work with peers and experienced mentors in structured sprints, gaining practical knowledge through hands-on building.</p>
1216
  </div>
1217
+ <div class="process-step">
1218
+ <div class="step-number">3</div>
1219
+ <h4>Build Real Solutions</h4>
1220
+ <p>Develop functional AI applications addressing actual business needs, powered by our in-house tools and guidance.</p>
1221
  </div>
1222
+ <div class="process-step">
1223
+ <div class="step-number">4</div>
1224
+ <h4>Launch & Grow</h4>
1225
+ <p>Incubate successful projects into prototypes or leverage your experience for career advancement and new opportunities.</p>
1226
  </div>
1227
  </div>
1228
+ </section>
1229
+
1230
+
1231
+ <section class="section" id="projects">
1232
+ <div class="section-title">
1233
+ <h2>Featured Projects</h2>
1234
+ <p>Join our active development sprints and contribute to impactful AI solutions.</p>
1235
+ </div>
1236
+ <div class="projects">
1237
+
1238
+ <div class="project-card">
1239
+ <div class="project-img">
1240
+ <img src="https://placehold.co/400x220/A5D6A7/37474F?text=LeadGen+AI+Chatbot&font=poppins"
1241
+ alt="AI Chatbot Project"
1242
+ onerror="this.style.backgroundColor='#A5D6A7';"> <div class="project-logo"><i class="fas fa-comments" style="margin-right: 5px;"></i> LeadGen AI</div>
1243
+ </div>
1244
+ <div class="project-content">
1245
+ <h4>Smart Lead Generation Chatbot</h4>
1246
+ <p>Build an AI chatbot that qualifies leads 24/7 using NLP and adaptive learning. Launching April 2025!</p>
1247
+ <a href="#" class="secondary-btn">Details <i class="fas fa-info-circle"></i></a>
1248
+ </div>
1249
  </div>
1250
+
1251
+ <div class="project-card">
1252
+ <div class="project-img">
1253
+ <img src="https://placehold.co/400x220/C5E1A5/37474F?text=VoiceX+Assistant&font=poppins"
1254
+ alt="Voice Assistant Project"
1255
+ onerror="this.style.backgroundColor='#C5E1A5';">
1256
+ <div class="project-logo"><i class="fas fa-microphone-alt" style="margin-right: 5px;"></i> VoiceX</div>
1257
+ </div>
1258
+ <div class="project-content">
1259
+ <h4>Custom Voice Assistant</h4>
1260
+ <p>Develop an affordable voice command system tailored for small business operations and customer interactions.</p>
1261
+ <a href="#" class="secondary-btn">Details <i class="fas fa-info-circle"></i></a>
1262
+ </div>
1263
+ </div>
1264
+
1265
+ <div class="project-card">
1266
+ <div class="project-img">
1267
+ <img src="https://placehold.co/400x220/DCEDC8/37474F?text=ContentCraft+AI&font=poppins"
1268
+ alt="Content Generator Project"
1269
+ onerror="this.style.backgroundColor='#DCEDC8';">
1270
+ <div class="project-logo"><i class="fas fa-pencil-alt" style="margin-right: 5px;"></i> ContentCraft</div>
1271
+ </div>
1272
+ <div class="project-content">
1273
+ <h4>AI Content Generator</h4>
1274
+ <p>Create a multi-modal content tool producing text, images, and layouts from brief inputs using generative AI.</p>
1275
+ <a href="#" class="secondary-btn">Details <i class="fas fa-info-circle"></i></a>
1276
+ </div>
1277
  </div>
1278
  </div>
1279
+ <div style="text-align: center; margin-top: 3rem;">
1280
+ <a href="#" class="primary-btn">View All Projects <i class="fas fa-arrow-right"></i></a>
1281
+ </div>
1282
+ </section>
1283
 
1284
+
1285
+ <section class="section section-dark" id="audience">
1286
+ <div class="section-title">
1287
+ <h2>Who Is Kritova For?</h2>
1288
+ <p>Our platform creates value for diverse participants in the AI ecosystem.</p>
 
 
 
 
1289
  </div>
1290
+ <div class="audience-tabs">
1291
+ <div class="audience-tab active" data-target="learners"><i class="fas fa-user-graduate" style="margin-right: 8px;"></i>Learners</div>
1292
+ <div class="audience-tab" data-target="mentors"><i class="fas fa-chalkboard-teacher" style="margin-right: 8px;"></i>Mentors</div>
1293
+ <div class="audience-tab" data-target="investors"><i class="fas fa-chart-line" style="margin-right: 8px;"></i>Investors</div>
1294
+ <div class="audience-tab" data-target="businesses"><i class="fas fa-building" style="margin-right: 8px;"></i>Businesses</div>
1295
+ </div>
1296
+
1297
+ <div class="audience-content active" id="learners">
1298
+ <h3>Launch Your AI Career</h3>
1299
+ <p>For students, career changers, and upskilling professionals:</p>
1300
+ <ul>
1301
+ <li>Gain real-world experience building production-grade AI.</li>
1302
+ <li>Learn directly from industry veterans via hands-on collaboration.</li>
1303
+ <li>Build a professional portfolio of tangible, impactful projects.</li>
1304
+ <li>Accelerate your transition into AI roles or elevate your current position.</li>
1305
+ <li>Explore incubating your own AI business concept within our ecosystem.</li>
1306
+ </ul>
1307
+ <a href="#" class="primary-btn">Apply as Learner <i class="fas fa-arrow-right"></i></a>
1308
  </div>
1309
+ <div class="audience-content" id="mentors">
1310
+ <h3>Amplify Your Impact</h3>
1311
+ <p>For experienced AI professionals and domain experts:</p>
1312
+ <ul>
1313
+ <li>Share your knowledge and shape the next generation on a structured platform.</li>
1314
+ <li>Earn compensation through revenue sharing and potential equity.</li>
1315
+ <li>Access and guide promising projects with commercial potential.</li>
1316
+ <li>Enhance your leadership skills through teaching and guidance.</li>
1317
+ <li>Engage flexibly based on your availability and interests.</li>
1318
+ </ul>
1319
+ <a href="#" class="primary-btn">Become a Mentor <i class="fas fa-arrow-right"></i></a>
1320
  </div>
1321
+ <div class="audience-content" id="investors">
1322
+ <h3>Invest in Talent & Innovation</h3>
1323
+ <p>Kritova offers a unique dual opportunity for investors:</p>
1324
+ <ul>
1325
+ <li>Fund the development of market-ready AI products with clear use cases.</li>
1326
+ <li>Access a pipeline of vetted AI talent for portfolio companies.</li>
1327
+ <li>Benefit from revenue sharing on successful incubated projects.</li>
1328
+ <li>Gain early access to potential spin-off business opportunities.</li>
1329
+ <li>Support a model addressing the critical AI skills gap.</li>
1330
+ </ul>
1331
+ <a href="#investors-section" class="primary-btn">Investor Details <i class="fas fa-arrow-right"></i></a>
1332
  </div>
1333
+ <div class="audience-content" id="businesses">
1334
+ <h3>AI Solutions Tailored For You</h3>
1335
+ <p>Engage with Kritova to accelerate your AI adoption:</p>
1336
+ <ul>
1337
+ <li>Sponsor custom AI tool development for your specific operational needs.</li>
1338
+ <li>Recruit pre-vetted AI talent emerging from our programs.</li>
1339
+ <li>License completed, market-tested AI solutions from our portfolio.</li>
1340
+ <li>Partner on targeted R&D initiatives with expert mentorship oversight.</li>
1341
+ <li>Co-develop specialized training programs aligned with your tech stack.</li>
1342
+ </ul>
1343
+ <a href="#contact" class="primary-btn">Discuss Partnerships <i class="fas fa-arrow-right"></i></a>
1344
+ </div>
1345
+ </section>
1346
 
1347
+
1348
+ <section class="section" id="vision">
1349
+ <div class="section-title">
1350
+ <h2>Our Vision & Roadmap</h2>
1351
+ <p>By 2026, Kritova will be the premier platform for AI-driven learning and innovation.</p>
1352
+ </div>
1353
+ <div class="timeline">
1354
+
1355
+ <div class="timeline-item">
1356
+ <div class="timeline-dot"></div>
1357
+ <div class="timeline-content">
1358
+ <span class="timeline-date">2025 Q1 - Foundation</span>
1359
+ <h4>Platform Launch</h4>
1360
+ <p>Initial platform goes live, onboarding 50+ learners & 10 mentors for flagship projects, including the LeadGen AI chatbot.</p>
 
 
 
 
 
 
 
 
 
 
 
 
1361
  </div>
1362
  </div>
1363
+
1364
+ <div class="timeline-item">
1365
+ <div class="timeline-dot"></div>
1366
+ <div class="timeline-content">
1367
+ <span class="timeline-date">2025 Q2 - Traction</span>
1368
+ <h4>First Products & Revenue</h4>
1369
+ <p>LeadGen AI chatbot launches commercially. VoiceX assistant prototype completed. First subscription and product revenue generated.</p>
 
 
 
 
 
 
 
 
 
 
 
 
1370
  </div>
1371
  </div>
1372
+
1373
+ <div class="timeline-item">
1374
+ <div class="timeline-dot"></div>
1375
+ <div class="timeline-content">
1376
+ <span class="timeline-date">2025 Q4 - Scaling</span>
1377
+ <h4>Expansion Phase</h4>
1378
+ <p>Targeting 300+ active participants across 15+ projects. ContentCraft generator & Fitness simulation prototypes launched.</p>
 
 
 
 
 
 
 
 
 
1379
  </div>
1380
+ </div>
1381
+
1382
+ <div class="timeline-item">
1383
+ <div class="timeline-dot"></div>
1384
+ <div class="timeline-content">
1385
+ <span class="timeline-date">2026 - Leadership</span>
1386
+ <h4>Market Recognition</h4>
1387
+ <p>Established as the premier platform for practical AI learning, talent development, and product incubation ("Kritovians").</p>
1388
  </div>
1389
  </div>
1390
+ </div>
1391
+ </section>
1392
+
1393
+
1394
+ <section class="section section-dark" id="principles">
1395
+ <div class="section-title">
1396
+ <h2>Core Principles</h2>
1397
+ <p>The foundation guiding everything we build at Kritova.</p>
1398
+ </div>
1399
+ <div class="principles">
1400
+
1401
+ <div class="principle-card">
1402
+ <div class="principle-icon"><i class="fas fa-eye"></i></div>
1403
+ <h4>Clarity in Action</h4>
1404
+ <p>Real-time projects solve real problems with tangible outcomes and measurable progress.</p>
1405
+ </div>
1406
+
1407
+ <div class="principle-card">
1408
+ <div class="principle-icon"><i class="fas fa-rocket"></i></div>
1409
+ <h4>Results-Driven</h4>
1410
+ <p>We deliver proof over promises, launching functional products rapidly and effectively.</p>
1411
+ </div>
1412
+
1413
+ <div class="principle-card">
1414
+ <div class="principle-icon"><i class="fas fa-shield-alt"></i></div>
1415
+ <h4>Creative Resilience</h4>
1416
+ <p>We craft unique solutions in-house with discipline, ingenuity, and resourcefulness.</p>
1417
+ </div>
1418
+
1419
+ <div class="principle-card">
1420
+ <div class="principle-icon"><i class="fas fa-seedling"></i></div>
1421
+ <h4>Collective Growth</h4>
1422
+ <p>Experienced mentors guide learners in a symbiotic ecosystem that elevates skills and outcomes for all.</p>
1423
+ </div>
1424
+
1425
+ <div class="principle-card">
1426
+ <div class="principle-icon"><i class="fas fa-gem"></i></div>
1427
+ <h4>Scalable Value</h4>
1428
+ <p>Our platform simultaneously trains top AI talent and builds commercially viable products.</p>
1429
+ </div>
1430
+ </div>
1431
+ </section>
1432
+
1433
+
1434
+ <section class="section" id="investors-section">
1435
+ <div class="section-title">
1436
+ <h2>For Investors</h2>
1437
+ <p>A dual-opportunity investment: talent incubator meets product accelerator.</p>
1438
+ </div>
1439
+ <div class="investor-container">
1440
+ <div class="investor-content">
1441
+ <h3>Fueling The Next Wave of AI Innovation</h3>
1442
+ <p>Kritova offers a unique model generating returns through both talent development and product commercialization. With an initial **$150,000** seed investment, we will scale the platform, complete 3 flagship projects by mid-2025, and launch additional prototypes.</p>
1443
+ <p>Our diverse revenue streams (subscriptions, product sales, licensing) target significant traction within six months, projecting strong ROI potential while addressing the critical AI skills gap.</p>
1444
+
1445
+ <div class="investor-highlights">
1446
+ <div class="highlight-card">
1447
+ <h4>$150K</h4>
1448
+ <p>Seed Funding Target</p>
1449
+ </div>
1450
+ <div class="highlight-card">
1451
+ <h4>3+</h4>
1452
+ <p>Products by Q2 2025</p>
1453
  </div>
1454
+ <div class="highlight-card">
1455
+ <h4>6 Months</h4>
1456
+ <p>Target to Traction</p>
 
 
 
 
 
 
 
1457
  </div>
1458
  </div>
1459
+
1460
+ <div style="margin-top: 2.5rem;">
1461
+ <a href="#" class="primary-btn">Request Prospectus <i class="fas fa-file-download" style="margin-left: 10px;"></i></a>
1462
  </div>
1463
  </div>
1464
  </div>
1465
+ </section>
 
 
 
 
 
 
 
1466
 
1467
+
1468
+ <section class="cta-section" id="contact">
1469
+ <h2>Ready For Your Artificial New Beginning?</h2>
1470
+ <p>Whether you're looking to learn, mentor, invest, or partner, Kritova offers unique opportunities to shape the future of AI.</p>
1471
+ <a href="#" class="primary-btn" style="font-size: 1.1rem; padding: 1rem 2.5rem;">Join Us Today <i class="fas fa-arrow-right"></i></a>
1472
+ </section>
1473
+ </main>
 
1474
 
1475
+
1476
  <footer>
1477
  <div class="footer-container">
1478
+
1479
  <div class="footer-col">
1480
+ <a href="#" class="logo" style="margin-bottom: 1.5rem; display: inline-block;">
1481
+ <img src="https://placehold.co/150x35/ffffff/7CB342?text=KRITOVA&font=poppins"
1482
+ alt="Kritova Logo Footer"
1483
+ style="height: 30px;"
1484
+ onerror="this.onerror=null; this.parentElement.innerHTML = '<span class=\'logo-text\'>Krit<span>ova</span></span>';">
1485
+ </a>
1486
+ <p>Where ambition meets opportunity through AI-driven innovation. Empowering talent, building solutions.</p>
1487
  <div class="social-links">
1488
+ <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
1489
+ <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
1490
+ <a href="#" aria-label="GitHub"><i class="fab fa-github"></i></a>
 
1491
  </div>
1492
  </div>
1493
+
1494
  <div class="footer-col">
1495
  <h3>Quick Links</h3>
1496
  <ul class="footer-links">
1497
+ <li><a href="#about">About Kritova</a></li>
1498
+ <li><a href="#process">How It Works</a></li>
1499
+ <li><a href="#projects">Projects</a></li>
1500
+ <li><a href="#audience">For Learners</a></li>
1501
+ <li><a href="#audience">For Mentors</a></li>
1502
+ <li><a href="#investors-section">For Investors</a></li>
1503
  </ul>
1504
  </div>
1505
+
1506
  <div class="footer-col">
1507
+ <h3>Resources</h3>
1508
  <ul class="footer-links">
1509
+ <li><a href="#">Blog</a></li>
1510
+ <li><a href="#">Case Studies</a></li>
1511
+ <li><a href="#">FAQ</a></li>
1512
+ <li><a href="#">Careers</a></li>
1513
+ <li><a href="#">Privacy Policy</a></li>
1514
+ <li><a href="#">Terms of Service</a></li>
1515
  </ul>
1516
  </div>
1517
+
1518
  <div class="footer-col footer-contact">
1519
  <h3>Contact Us</h3>
1520
+ <p><i class="fas fa-map-marker-alt"></i> Hayward, CA, United States</p>
1521
+ <p><i class="fas fa-envelope"></i> <a href="mailto:info@kritova.com">info@kritova.com</a></p>
1522
+ </div>
 
1523
  </div>
1524
+
1525
  <div class="footer-bottom">
1526
+ &copy; 2025 Kritova. All rights reserved.
1527
+ <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a>
1528
  </div>
1529
  </footer>
1530
 
1531
+
1532
  <script>
1533
  // Mobile Menu Toggle
1534
+ const menuButton = document.querySelector('.mobile-menu-btn');
1535
  const navLinks = document.querySelector('.nav-links');
1536
+ const nav = document.getElementById('navbar');
1537
+
1538
+ menuButton.addEventListener('click', (e) => {
1539
+ e.stopPropagation(); // Prevent click from immediately closing menu
1540
+ const expanded = menuButton.getAttribute('aria-expanded') === 'true' || false;
1541
+ menuButton.setAttribute('aria-expanded', !expanded);
1542
  navLinks.classList.toggle('active');
1543
+ const icon = menuButton.querySelector('i');
 
 
 
1544
  if (navLinks.classList.contains('active')) {
1545
  icon.classList.remove('fa-bars');
1546
+ icon.classList.add('fa-times');
1547
  } else {
1548
  icon.classList.remove('fa-times');
1549
  icon.classList.add('fa-bars');
1550
  }
1551
  });
1552
+
1553
+ // Close mobile menu when a link is clicked
1554
+ navLinks.querySelectorAll('a').forEach(link => {
1555
+ link.addEventListener('click', () => {
1556
+ if (navLinks.classList.contains('active')) {
1557
+ menuButton.setAttribute('aria-expanded', 'false');
1558
+ navLinks.classList.remove('active');
1559
+ const icon = menuButton.querySelector('i');
1560
+ icon.classList.remove('fa-times');
1561
+ icon.classList.add('fa-bars');
1562
+ }
 
 
 
 
 
1563
  });
1564
  });
1565
 
1566
+ // Close mobile menu if clicking outside of it
1567
+ document.addEventListener('click', (event) => {
1568
+ // Check if the click is outside the nav element entirely AND the menu is active
1569
+ if (!nav.contains(event.target) && navLinks.classList.contains('active')) {
1570
+ menuButton.setAttribute('aria-expanded', 'false');
1571
+ navLinks.classList.remove('active');
1572
+ const icon = menuButton.querySelector('i');
1573
+ icon.classList.remove('fa-times');
1574
+ icon.classList.add('fa-bars');
1575
+ }
1576
+ });
1577
+
1578
+
1579
+ // Audience Tabs Functionality
1580
+ const tabs = document.querySelectorAll('.audience-tab');
1581
+ const contents = document.querySelectorAll('.audience-content');
1582
+
1583
+ tabs.forEach(tab => {
1584
+ tab.addEventListener('click', () => {
1585
+ tabs.forEach(t => t.classList.remove('active'));
1586
+ contents.forEach(c => c.classList.remove('active'));
1587
+
1588
+ tab.classList.add('active');
1589
+ const targetId = tab.getAttribute('data-target');
1590
+ const targetContent = document.getElementById(targetId);
1591
+ if (targetContent) {
1592
+ targetContent.classList.add('active');
1593
+ }
1594
  });
1595
+ });
1596
+
1597
+ // Smooth scrolling for anchor links
 
 
 
 
 
 
1598
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1599
  anchor.addEventListener('click', function (e) {
1600
+ const href = this.getAttribute('href');
1601
+ // Ensure it's a valid internal link and not just "#"
1602
+ if (href && href.startsWith('#') && href.length > 1) {
1603
+ const targetElement = document.querySelector(href);
1604
+ if(targetElement) {
1605
+ e.preventDefault(); // Prevent default jump only if target exists
1606
+ const navbarHeight = document.getElementById('navbar').offsetHeight;
1607
+ const elementPosition = targetElement.getBoundingClientRect().top;
1608
+ const offsetPosition = elementPosition + window.pageYOffset - navbarHeight - 20; // Extra buffer
1609
+
1610
+ window.scrollTo({
1611
+ top: offsetPosition,
1612
+ behavior: "smooth"
1613
+ });
 
 
 
 
1614
  }
1615
  }
1616
  });
1617
  });
1618
+
1619
  </script>
1620
+
1621
+ </body>
1622
+ </html>