-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
1046 lines (840 loc) · 85.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html class="h-full" lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jio - Best Prepaid, Postpaid Plans, Broadband Connection, Apps, & More</title>
<link rel="icon" type="images/x-icon" href="images/favicon.ico" >
<link rel="stylesheet" type="text/css" href="css/all.css">
<link rel="stylesheet" type="text/css" href="css/brands.css">
<link rel="stylesheet" type="text/css" href="css/fontawesome.css">
<link rel="stylesheet" type="text/css" href="css/regular.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<link rel="stylesheet" type="text/css" href="css/solid.css">
<link rel="stylesheet" type="text/css" href="css/owl.theme.default.css">
<link rel="stylesheet" type="text/css" href="css/owl.theme.green.css">
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css">
<script src="https://cdn.tailwindcss.com"></script>
<style type="text/css">
body {
-webkit-transition: background-color 800ms ease;
transition: background-color 800ms ease;
}
body.dark {
background-color: #1e293b;
color: #fff;
}
body.dark .ham{
background-color: #1e293b;
}
body.dark table tr td{
color: white !important;
}
body.dark table tr td:hover{
color: black !important;
}
body.dark .foot p{
color: white !important;
}
body.dark .foot li{
color: white !important;
}
</style>
</head>
<body class="m-0 p-0 h-full scroll-smooth box-border ">
<!-- RESPONSIVE NAVIGATION BAR STARTS-->
<nav class="bg-blue-700 px-4 py-3 fixed z-20 w-full">
<div class="flex justify-between lg:justify-around">
<div class="flex items-center space-x- lg:space-x-10 justify-center ">
<i onclick="icons()" class="fa-solid fa-bars text-white text-xl lg:hidden cursor-pointer hover:bg-blue-800 p-3 px-3.5 rounded-full " id="icon" ></i>
<img src="https://1000logos.net/wp-content/uploads/2021/07/Jio-Logo-768x483.png" alt="error loading image" title="jio" class="w-15 h-9 text-white" />
<div class="hidden lg:block">
<ul class="flex space-x-12 text-white font-bold">
<li class="hover:text-blue-300"><a href="#">Mobile</a></li>
<li class="hover:text-blue-300"><a href="#">Fibre</a></li>
<li class="hover:text-blue-300"><a href="#">Business</a></li>
<li class="hover:text-blue-300"><a href="#">Shops</a></li>
<li class="hover:text-blue-300"><a href="#">Apps</a></li>
</ul>
</div>
</div>
<div class="flex space-x-4 items-center font-[helvetica] ">
<form>
<div class="flex items-center">
<i class="fa-solid fa-magnifying-glass text-white bg-blue-900 p-3 rounded-l-3xl"></i>
<input type="text" autocomplete name="search" class="bg-blue-900 text-white px-1 py-2 rounded-r-3xl font-bold focus:outline-none" placeholder="Search" />
</div>
</form>
<a href="#"><i class="fa-solid fa-message hidden lg:block text-white rounded-full text-xl p-3 lg:hover:bg-blue-900"></i></a>
<a href="#"><i class="fa-solid fa-cart-shopping hidden lg:block text-white rounded-full text-xl p-3 lg:hover:bg-blue-900 "></i></a>
<a href="#"><i class="fa-solid fa-user bg-white text-blue-700 rounded-full text-md p-3"></i></a>
<button class="dark-button text-slate-300"> <i class="fa-solid fa-moon"></i></button>
<button class="light-button pl-4" hidden="hidden"> <i class="fa-solid fa-sun"></i></button>
</div>
</div>
</nav>
<!-- RESPONSIVE NAVBAR ENDS -->
<!-- HAMBURGER MENU STARTS -->
<div class="w-3/4 px-5 h-screen overflow-y-auto hidden res fixed top-[4.2rem] z-10 bg-white shadow-lg shadow-black ham ">
<div class="border-b-2 border-gray-300 border-solid font-bold py-3 items-center flex justify-between">
Mobile <i onclick="iconsyo1(this)" class="fa-solid fa-plus text-2xl text-blue-500 cursor-pointer hover:bg-purple-100 px-2.5 py-2 rounded-full" id="i1" ></i>
</div>
<div class="px-8 w hidden menu">
<div class="py-3 font-sans font-semibold border-b-2 border-gray-300 border-solid">Discover</div>
<div class="border-b-2 border-gray-300 border-solid py-3 font-sans font-semibold">Prepaid</div>
<div class="border-b-2 border-gray-300 border-solid py-3 font-sans font-semibold">postpaid</div>
<div class="border-b-2 border-gray-300 border-solid py-3 font-sans font-semibold">Intrnational Services</div>
<div class="border-b-2 border-gray-300 border-solid py-3 font-sans font-semibold">Get Jio Sim</div>
<div class="border-b-2 border-gray-300 border-solid py-3 font-sans font-semibold">Recharge</div>
<div class="border-b-2 border-gray-300 border-solid py-3 font-sans font-semibold">Pay Bills</div>
</div>
<div class="border-b-2 border-gray-300 border-solid font-bold py-3 flex justify-between items-center">
Jiofibre <i onclick="iconsyo2(this)" class="fa-solid fa-plus text-2xl text-blue-500 cursor-pointer hover:bg-purple-100 px-2.5 py-2 rounded-full" id="i2"></i>
</div>
<div class="px-8 r hidden menu ">
<div class="py-3 font-sans font-semibold border-b-2 border-gray-300 border-solid">Discover</div>
<div class="border-b-2 border-gray-300 border-solid py-3 font-sans font-semibold">Prepaid</div>
<div class="border-b-2 border-gray-300 border-solid py-3 font-sans font-semibold">postpaid</div>
<div class="border-b-2 border-gray-300 border-solid py-3 font-sans font-semibold">Intrnational Services</div>
<div class="border-b-2 border-gray-300 border-solid py-3 font-sans font-semibold">Get Jio Sim</div>
<div class="border-b-2 border-gray-300 border-solid py-3 font-sans font-semibold">Recharge</div>
<div class="border-b-2 border-gray-300 border-solid py-3 font-sans font-semibold">Pay Bills</div>
<div class="border-b-2 border-gray-300 border-solid py-3 font-sans font-semibold">Services</div>
</div>
<div class="border-b-2 border-gray-300 border-solid font-bold py-3 flex justify-between items-center">
Business <i onclick="iconsyo3(this)" class="fa-solid fa-plus text-2xl text-blue-500 cursor-pointer hover:bg-purple-100 px-2.5 py-2 rounded-full" id="i3"></i>
</div>
<div class="px-8 y hidden menu ">
<div class="py-3 font-sans font-semibold border-b-2 border-gray-300 border-solid">Discover</div>
<div class="border-b-2 border-gray-300 border-solid py-5 font-sans font-semibold">Jio Business Solution </div>
<div class="border-b-2 border-gray-300 border-solid py-3 font-sans font-semibold">Plans</div>
<div class="border-b-2 border-gray-300 border-solid py-3 font-sans font-semibold">Service</div>
<div class="border-b-2 border-gray-300 border-solid py-3 font-sans font-semibold">Enquire</div>
<div class="border-b-2 border-gray-300 border-solid py-3 font-sans font-semibold">Resources</div>
<div class="border-b-2 border-gray-300 border-solid py-3 font-sans font-semibold">Contact Us</div>
</div>
<div class="border-b-2 border-gray-300 border-solid font-bold py-3 flex justify-between items-center">
Shops<i onclick="iconsyo4(this)" class="fa-solid fa-plus text-2xl text-blue-500 cursor-pointer hover:bg-purple-100 px-2.5 py-2 rounded-full" id="i4"></i>
</div>
<div class="px-8 i hidden menu ">
<div class="py-3 font-sans font-semibold border-b-2 border-gray-300 border-solid">Smart Phone</div>
<div class="border-b-2 border-gray-300 border-solid py-3 font-sans font-semibold">Smart Devices </div>
<div class="border-b-2 border-gray-300 border-solid py-3 font-sans font-semibold">Accessories</div>
</div>
<div class="border-b-2 border-gray-300 border-solid font-bold py-3 flex justify-between">
Apps
</div>
<div class="border-b-2 border-gray-300 border-solid font-bold py-3 flex justify-between">
Support
</div>
</div>
<!-- HAMBURGER MENU ENDS -->
<!-- SLIDER STARTS -->
<div class="swiper mySwiper h-3/4">
<div class="swiper-wrapper">
<div class="swiper-slide flex items-center">
<img src="images/a.jpg" class="w-full h-full" alt="error loading image" title="sliderimg">
<div class="absolute left-0 px-10 w-11/12 md:w-3/5 lg:px-32">
<p class="text-white text-4xl font-black text-left lg:text-6xl">The Best Thing In Life Are FREE</p>
<p class="text-gray-300 text-start mt-5 font-semibold text-lg">High speed connectivity, digital delights, and many priceless moments.</p>
<div class="mt-5 text-start flex space-x-4 items-center ">
<button class="rounded-3xl bg-blue-700 text-white font-bold px-5 py-3 hover:bg-blue-500">Get Jio Sim</button>
<button class="text-white border-2 border-solid border-slate-400 rounded-3xl px-4 py-2.5 hover:border-slate-200">Let's celebrate <i class="fa-solid fa-circle-play"></i> </button>
</div>
</div>
</div>
<div class="swiper-slide flex items-center">
<img src="images/s.jpg" class="w-full h-full" alt="error loading image" title="sliderimg">
<div class="absolute left-0 px-10 w-11/12 md:w-3/5 lg:px-32">
<p class="text-white text-4xl font-black text-left lg:text-6xl ">Digital life for every Indian</p>
<p class="text-gray-300 text-start mt-5 font-semibold text-lg ">Creater with Google,your Jiophone Next us a fully-featured 4G smartphone.</p>
<div class="mt-5 text-start flex space-x-4 items-center">
<button class="rounded-3xl bg-blue-700 text-white font-bold px-5 py-3 hover:bg-blue-500">Get for ₹4499</button>
<button class="text-white border-2 border-solid border-slate-400 rounded-3xl px-4 py-2.5 hover:border-slate-200">Experience Now <i class="fa-solid fa-circle-play"></i> </button>
</div>
</div>
</div>
<div class="swiper-slide flex items-center">
<img src="images/1.png" class="w-full h-full" alt="error loading image" title="sliderimg">
<div class="absolute left-0 px-10 w-11/12 md:w-3/5 lg:px-32">
<p class="text-white text-4xl font-black text-left lg:text-6xl">The future of connnected living</p>
<p class="text-gray-300 text-start mt-5 font-semibold text-lg">Superfast home internet with unlimited data, FREE Jio Set-top Box, and more.</p>
<div class=" text-start flex space-x-4 items-center mt-5">
<button class="rounded-3xl bg-blue-700 text-white font-bold px-5 py-3 hover:bg-blue-500">Get Jio Fibre</button>
<button class="text-white border-2 border-solid border-slate-400 rounded-3xl px-4 py-2.5 hover:border-slate-200">Surprise Inside <i class="fa-solid fa-circle-play "></i> </button>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<!-- SLIDER ENDS -->
<div class="grid grid-rows-2 grid-cols-3 w-11/12 my-12 mx-auto gap-x-10 font-[helvetica] grid-flow-row-dense md:grid-rows-1 md:grid-cols-6 lg:w-1/2 justify-items-center">
<div class=" w-max py-3 px-7 flex flex-col space-y-3 items-center rounded-2xl transition transition-colors hover:bg-slate-200 hover:text-black duration-300 ease-in-out" >
<i class="fa-solid fa-clipboard-user rounded-full text-4xl text-blue-700 bg-slate-200 px-5 py-3.5 "></i>
<p class="font-sans font-bold text-sm ">Recharge</p>
</div>
<div class=" w-max py-3 px-7 flex flex-col space-y-3 items-center rounded-2xl transition transition-colors hover:bg-slate-200 hover:text-black duration-300 ease-in-out " >
<i class="fa-solid fa-indian-rupee-sign rounded-full text-4xl text-blue-700 bg-slate-200 px-5 py-3.5 "></i>
<p class="font-sans font-bold text-sm">Pay Bills</p>
</div>
<div class=" w-max py-3 px-7 flex flex-col space-y-3 items-center rounded-2xl transition transition-colors hover:bg-slate-200 hover:text-black duration-300 ease-in-out " >
<i class="fa-solid fa-sim-card rounded-full text-4xl text-blue-700 bg-slate-200 px-5 py-3.5 "></i>
<p class="font-sans font-bold text-sm">Get Jio SIM</p>
</div>
<div class=" w-max py-3 px-7 flex flex-col space-y-3 items-center rounded-2xl transition transition-colors hover:bg-slate-200 hover:text-black duration-300 ease-in-out" >
<i class="fa-solid fa-sim-card rounded-full text-4xl text-blue-700 bg-slate-200 px-5 py-3.5 "></i>
<p class="font-sans font-bold text-sm">Port to Jio</p>
</div>
<div class=" w-max py-3 px-7 flex flex-col space-y-3 items-center rounded-2xl transition transition-colors hover:bg-slate-200 hover:text-black duration-300 ease-in-out " >
<i class="fa-solid fa-wifi rounded-full text-3xl text-blue-700 bg-slate-200 px-3 py-4 " ></i>
<p class="font-sans font-bold text-sm pt-1">Get JioFibre</p>
</div>
<div class=" w-max py-3 px-7 flex flex-col space-y-3 items-center rounded-2xl transition transition-colors hover:bg-slate-200 hover:text-black duration-300 ease-in-out " >
<i class="fa-solid fa-question rounded-full text-4xl text-blue-700 bg-slate-200 px-5 py-3.5 " ></i>
<p class="font-sans font-bold text-sm">Support</p>
</div>
</div>
<div class="my-12">
<div class="px-8 ">
<p class="font-black text-4xl text-left md:text-center lg:text-6xl">In the spotlight</p>
<p class="text-gray-500 text-lg font-semibold py-4 md:text-center">The best deals, new launches, and top-selling products right now.</p>
</div>
<center>
<div class="mt-4 mb-20 px-7 rounded-2xl mx-3 font-sans bg-white/100 shadow-2xl shadow-slate-800 w-3/4 mx-auto lg:grid lg:grid-cols-2 lg:grid-rows-1 items-center" >
<div class="lg:col-start-2 lg:col-end-3 lg:row-start-1 lg:row-start-2 py-7 ">
<center>
<video src="video/jio1.mp4" type="video/mp4" loop autoplay muted preload="auto"> your browser does not support the video tag</video>
</center>
</div>
<div class="pt-6 w-11/12 lg:row-start-1 lg:row-start-2 lg:col-start-1 lg:col-end-2 ">
<p class="font-black text-4xl md:text-4xl lg:text-5xl text-left tracking-tight text-black">Say "Cheese!" India's Favourite selfie phone is here</p>
<p class="text-neutral-500 font-semibold text-md lg:text-xl pt-5 text-left">Get a JioPhone Next now for only ₹ 4499.</p>
<button class="text-white bg-blue-700 rounded-3xl px-5 hover:bg-blue-900 my-4 font-bold py-3 ">Explore now</button>
</div>
</div>
</center>
</div>
<!-- UP ANGLE ICON -->
<i class="fa-solid fa-angles-up fixed bottom-4 right-4 text-2xl py-3 px-4 rounded-full bg-indigo-300 cursor-pointer border-4 border-solid border-indigo-400 animate-bounce up z-50"></i>
<!-- UP ANGLE ICON ENDS -->
<div class="flex-column space-y-3 sm:grid md:grid-cols-3 md:grid-rows-1 md:w-5/6 mx-auto md:items-center my-12">
<div class=" rounded-2xl bg-[#0f3cc9] h-max w-9/12 mx-auto relative">
<img src="images/q.png" title="groceries" class="w-full h-2/5 rounded-2xl" alt="error loading image" />
<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="absolute top-[182px] px-0">
<path fill="#0f3cc9" fill-opacity="1" d="M0,224L120,213.3C240,203,480,181,720,181.3C960,181,1200,203,1320,213.3L1440,224L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"></path>
</svg> -->
<div class="px-10 pb-5 ">
<p class="text-blue-700 bg-blue-200 rounded-md px-4 py-1.5 w-max font-bold my-3" >JIOMART</p>
<P class="text-white font-extrabold text-3xl my-2.5">Buy Groceries on the go</P>
<p class="text-lg text-indigo-200 font-semibold my-3">Lowest price free home delivery</p>
<button class="text-black px-5 py-1.5 rounded-2xl bg-indigo-300 font-bold hover:bg-indigo-400">Shop at jioMart</button>
</div>
</div>
<div class=" rounded-2xl bg-[#0f3cc9] h-max w-9/12 mx-auto relative">
<img src="images/w.png" title="groceries" class="w-full h-2/5 rounded-2xl" alt="error loading image" />
<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="absolute top-[182px] px-0">
<path fill="#0f3cc9" fill-opacity="1" d="M0,224L120,213.3C240,203,480,181,720,181.3C960,181,1200,203,1320,213.3L1440,224L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"></path>
</svg> -->
<div class="px-10 pb-5 ">
<p class="text-blue-700 bg-blue-200 rounded-md px-4 py-1.5 w-max font-bold my-3" >FURNITURE & MORE</p>
<P class="text-white font-extrabold text-3xl my-2.5">Best deals on furniture</P>
<p class="text-lg text-indigo-200 font-semibold my-3">Up to 70% off at Urban Ladder.</p>
<button class="text-black px-5 py-1.5 rounded-2xl bg-indigo-300 font-bold hover:bg-indigo-400">Start shopping</button>
</div>
</div>
<div class=" rounded-2xl bg-[#0f3cc9] h-max w-9/12 mx-auto relative">
<img src="images/e.png" title="groceries" class="w-full h-2/5 rounded-2xl" alt="error loading image" />
<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="absolute top-[182px] px-0">
<path fill="#0f3cc9" fill-opacity="1" d="M0,224L120,213.3C240,203,480,181,720,181.3C960,181,1200,203,1320,213.3L1440,224L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"></path>
</svg> -->
<div class="px-10 pb-5 ">
<p class="text-blue-700 bg-blue-200 rounded-md px-4 py-1.5 w-max font-bold my-3" >PARTNER BRANDS</p>
<P class="text-white font-extrabold text-3xl my-2.5">Save on partner brands</P>
<p class="text-lg text-indigo-200 font-semibold my-3">Voucher, cashbacks and more</p>
<button class="text-black px-5 py-1.5 rounded-2xl bg-indigo-300 font-bold hover:bg-indigo-400">Check partner offers</button>
</div>
</div>
</div>
<div class="my-12">
<p class="text-4xl font-black text-center pb-4 lg:text-6xl">Enrich your digital life</p>
<p class="text-zinc-500 font-bold text-center text-lg pb-4 ">Stream, shop, connect, and do much more on the go with Jio apps.
</p>
<div >
<div class="absolute pt-16 px-4 z-10 w-11/12 sm:w-1/2 md:w-11/12 md:pt-32 md:pl-20 lg:pt-72 xl:pt-96">
<p class="text-white text-4xl font-black md:text-5xl lg:text-6xl lg:w-3/4 ">Be on the top of your style game with all things trendy</p>
<button class="bg-blue-700 text-white font-bold px-4 py-3 rounded-3xl mt-3 md:mt-12">Fashion up now</button>
</div>
<div class="video-player">
<div class=" video-viewport">
<video width="100%" height="100" playsinline autoplay loop muted poster="/sites/Satellite?blobcol=urldata&blobkey=id&blobtable=MungoBlobs&blobwhere=1610007172151&ssbinary=true">
<source src="https://jep-asset.akamaized.net/jio/welcome-page/ajio-new.mp4" type="video/mp4" />
<source src="https://jep-asset.akamaized.net/jio/welcome-page/ajio-new.mp4" type="video/webm" />
</video>
</div>
</div>
</div>
</div>
<!-- OWL CAROUSEL THEME -->
<DIV class="my-12">
<div class="w-11/12 mx-auto owl-carousel owl-theme loop">
<div class=" mx-auto my-8 bg-blue-700 rounded-2xl px-5 pt-4 relative h-64 sm:h-72 md:h-[17.5rem] lg:h-80 xl:h-64 " >
<div class="grid grid-cols-5 grid-rows-3 items-center justify-center justify-content-center ">
<div class="col-span-4 ">
<p class="font-extrabold text-white text-3xl">JioCloud</p>
</div>
<div class="row-span-2">
<i class="fa-solid fa-cloud text-5xl sm:text-3xl md:text-4xl mx-auto text-white bg-orange-500 px-3 py-4 rounded-full "></i>
</div>
<div class="col-span-4">
<p class="text-white font-bold ">Stores all document, photos, videos, contacts and messages safely and access anytime, anywhere</p>
</div>
</div>
<div>
<button class=" rounded-3xl bg-blue-200 text-blue-800 hover:bg-blue-300 font-bold px-3 py-2 absolute bottom-10 ">Find Out More</button>
</div>
</div>
<div class=" mx-auto my-8 bg-emerald-300 rounded-2xl relative px-5 pt-6 h-64 sm:h-72 md:h-[17.5rem] lg:h-80 xl:h-64 " >
<div class="grid grid-cols-5 grid-rows-3 items-center justify-center justify-content-center ">
<div class="col-span-4 ">
<p class="font-extrabold text-black text-3xl">JioSaavn</p>
</div>
<div class="row-span-2">
<i class="fa-solid fa-guitar text-5xl sm:text-3xl md:text-4xl mx-auto text-white bg-green-700 px-4 py-4 rounded-full "></i>
</div>
<div class="col-span-4">
<p class="text-black font-bold pr-3 py-3 ">Play over 18 million song over 16 languages across genres.</p>
</div>
</div>
<div>
<button class="rounded-3xl bg-green-600 text-green-100 hover:bg-green-800 font-bold px-3 py-2 absolute bottom-10">Check it out</button>
</div>
</div>
<div class=" mx-auto my-8 bg-cyan-500 rounded-2xl px-5 pt-6 relative h-64 sm:h-72 md:h-[17.5rem] lg:h-80 xl:h-64 " >
<div class="grid grid-cols-5 grid-rows-3 items-center justify-center justify-content-center ">
<div class="col-span-4 ">
<p class="font-extrabold text-white text-3xl">JioMart</p>
</div>
<div class="row-span-2">
<i class="fa-solid fa-bag-shopping text-5xl sm:text-3xl md:text-4xl mx-auto text-white bg-cyan-700 px-5 py-[1.125rem] rounded-full "></i>
</div>
<div class="col-span-4">
<p class="text-white font-bold pr-12 ">Shop for groceries, dairy products, farm-fresh items, and more.</p>
</div>
</div>
<div>
<button class="rounded-3xl bg-sky-300 text-sky-800 hover:bg-sky-500 font-bold px-4 py-2 absolute bottom-10 ">Explore</button>
</div>
</div>
<div class=" mx-auto my-8 bg-orange-500 rounded-2xl px-5 pt-6 relative h-64 sm:h-72 md:h-[17.5rem] lg:h-80 xl:h-64 " >
<div class="grid grid-cols-5 grid-rows-3 items-center justify-center justify-content-center ">
<div class="col-span-4 ">
<p class="font-extrabold text-white text-3xl">JioMeet</p>
</div>
<div class="row-span-2">
<i class="fa-solid fa-video text-5xl sm:text-3xl md:text-4xl mx-auto text-white bg-orange-700 px-3 py-4 rounded-full "></i>
</div>
<div class="col-span-4">
<p class="text-white font-bold pr-12 "> A world-class video conferencing app to securely host business meetings and calls..</p>
</div>
</div>
<div>
<button class="rounded-3xl bg-sky-300 text-sky-800 hover:bg-sky-500 font-bold px-4 py-2 absolute bottom-10 ">Learn more</button>
</div>
</div>
<div class=" mx-auto my-8 bg-blue-500 rounded-2xl px-5 pt-6 relative h-64 sm:h-72 md:h-[17.5rem] lg:h-80 xl:h-64 " >
<div class="grid grid-cols-5 grid-rows-3 items-center justify-center justify-content-center ">
<div class="col-span-4 ">
<p class="font-extrabold text-white text-3xl"> JioNews</p>
</div>
<div class="row-span-2">
<i class="fa-solid fa-newspaper text-5xl sm:text-3xl md:text-4xl mx-auto text-white bg-blue-700 px-5 py-[1.125rem] rounded-full "></i>
</div>
<div class="col-span-4">
<p class="text-white font-bold pr-12 "> Breaking news, epapers, emagazines, live news channels, and more.</p>
</div>
</div>
<div>
<button class="rounded-3xl bg-sky-300 text-sky-800 hover:bg-sky-500 font-bold px-4 py-2 absolute bottom-10 ">Explore</button>
</div>
</div>
<div class=" mx-auto my-8 bg-green-500 rounded-2xl px-5 pt-6 relative h-64 sm:h-72 md:h-[17.5rem] lg:h-80 xl:h-64 " >
<div class="grid grid-cols-5 grid-rows-3 items-center justify-center justify-content-center ">
<div class="col-span-4 ">
<p class="font-extrabold text-white text-3xl"> JioGames</p>
</div>
<div class="row-span-2">
<i class="fa-solid fa-gamepad text-5xl sm:text-3xl md:text-4xl mx-auto text-white bg-green-700 px-4 py-5 rounded-full "></i>
</div>
<div class="col-span-4">
<p class="text-white font-bold pr-12 "> Now participate in live esports tournaments and casual games to earn exciting rewards.</p>
</div>
</div>
<div>
<button class="rounded-3xl bg-sky-300 text-sky-800 hover:bg-sky-500 font-bold px-4 py-2 absolute bottom-10 ">Read more</button>
</div>
</div>
</div>
<center>
<button class="text-blue-700 font-bold text-center px-5 py-2 rounded-3xl border-2 border-solid border-slate-200 w-11/12 mt-3 hover:border-slate-600 sm:w-max ">View all apps</button>
</center>
</DIV>
<!-- OWL CAROUSEL THEME ENDS -->
<div class="my-12">
<div class=" w-11/12 mx-auto">
<p class="text-5xl font-black text-start pb-4 lg:text-6xl sm:text-center">Discover new possibilities</p>
<p class="text-zinc-500 font-bold text-start text-lg pb-4 sm:text-center ">Planning a digital transformation for home, business, or personal experiences? You're just a step away.
</p>
</div >
<div class="sm:grid sm:grid-cols-3 sm:grid-rows-1">
<div class="w-11/12 mx-auto px-4 py-4 mt-10 w-full ">
<center>
<i class="fa-solid fa-mobile text-5xl text-blue-700 lg:text-6xl"></i>
<p class="font-black text-4xl mt-4 lg:text-5xl">Mobile</p>
<p class="text-slate-500 mt-4 text-md">Free SIM, calls, and SMS with invaluable digital experiences</p>
<button class="bg-blue-700 text-white font-bold rounded-3xl px-5 hover:bg-blue-900 py-2 mt-4"> Find out more</button>
</center>
</div>
<div class="w-11/12 mx-auto px-4 py-4 mt-10 w-full ">
<center>
<i class="fa-solid fa-house-signal text-5xl text-blue-700 lg:text-6xl"></i>
<p class="font-black text-4xl mt-4 lg:text-5xl">JioFiber</p>
<p class="text-slate-500 mt-4 text-md">Connected living experiences with superfast home internet.</p>
<button class="bg-blue-700 text-white font-bold rounded-3xl px-5 hover:bg-blue-900 py-2 mt-4"> Know more</button>
</center>
</div>
<div class="w-11/12 mx-auto px-4 py-4 mt-10 w-full ">
<center>
<i class="fa-solid fa-business-time text-5xl text-blue-700 lg:text-6xl"></i>
<p class="font-black text-4xl mt-4 lg:text-5xl">Business</p>
<p class="text-slate-500 mt-4 text-md">Enterprise-grade digital services to meet all your business needs.</p>
<button class="bg-blue-700 text-white font-bold rounded-3xl px-5 hover:bg-blue-900 py-2 mt-4"> Explore</button>
</center>
</div>
</div>
</div>
<div class="my-12"><svg viewBox="0 0 1440 282" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M280.642 271.014C280.642 265.264 275.98 260.602 270.23 260.602C264.48 260.602 259.818 265.264 259.818 271.014C259.818 276.765 264.48 281.426 270.23 281.426C275.98 281.426 280.642 276.765 280.642 271.014Z" fill="#0F3CC9" class="a-color delay-04"></path>
<path d="M332.701 271.014C332.701 265.264 328.04 260.602 322.29 260.602C316.539 260.602 311.878 265.264 311.878 271.014C311.878 276.765 316.539 281.426 322.29 281.426C328.04 281.426 332.701 276.765 332.701 271.014Z" fill="#000093" class="b-color delay-01"></path>
<path d="M384.761 271.014C384.761 265.264 380.1 260.602 374.349 260.602C368.599 260.602 363.938 265.264 363.938 271.014C363.938 276.765 368.599 281.426 374.349 281.426C380.1 281.426 384.761 276.765 384.761 271.014Z" fill="#0078AD" class="c-color delay-05"></path>
<path d="M20.8236 271.014C20.8236 265.264 16.1621 260.602 10.4118 260.602C4.66153 260.602 -7.06469e-07 265.264 -4.55115e-07 271.014C-2.03762e-07 276.765 4.66153 281.426 10.4118 281.426C16.1621 281.426 20.8237 276.765 20.8236 271.014Z" fill="#0078AD" class="c-color delay-03"></path>
<path d="M436.817 271.014C436.817 265.264 432.156 260.602 426.406 260.602C420.655 260.602 415.994 265.264 415.994 271.014C415.994 276.765 420.655 281.426 426.406 281.426C432.156 281.426 436.817 276.765 436.817 271.014Z" fill="#0F3CC9" class="a-color delay-02"></path>
<path d="M72.8803 271.014C72.8803 265.264 68.2188 260.602 62.4685 260.602C56.7182 260.602 52.0566 265.264 52.0566 271.014C52.0566 276.765 56.7182 281.426 62.4685 281.426C68.2188 281.426 72.8803 276.765 72.8803 271.014Z" fill="#0F3CC9" class="a-color delay-01"></path>
<path d="M488.881 271.014C488.881 265.264 484.219 260.602 478.469 260.602C472.719 260.602 468.057 265.264 468.057 271.014C468.057 276.765 472.719 281.426 478.469 281.426C484.219 281.426 488.881 276.765 488.881 271.014Z" fill="#0F3CC9" class="a-color delay-03"></path>
<path d="M124.943 271.014C124.943 265.264 120.282 260.602 114.531 260.602C108.781 260.602 104.12 265.264 104.12 271.014C104.12 276.765 108.781 281.426 114.531 281.426C120.282 281.426 124.943 276.765 124.943 271.014Z" fill="#0F3CC9" class="a-color delay-01"></path>
<path d="M540.937 271.014C540.937 265.264 536.275 260.602 530.525 260.602C524.775 260.602 520.113 265.264 520.113 271.014C520.113 276.765 524.775 281.426 530.525 281.426C536.275 281.426 540.937 276.765 540.937 271.014Z" fill="#000093" class="b-color delay-01"></path>
<path d="M177 271.014C177 265.264 172.338 260.602 166.588 260.602C160.838 260.602 156.176 265.264 156.176 271.014C156.176 276.765 160.838 281.426 166.588 281.426C172.338 281.426 177 276.765 177 271.014Z" fill="#000093" class="b-color delay-03"></path>
<path d="M593 271.014C593 265.264 588.339 260.602 582.588 260.602C576.838 260.602 572.176 265.264 572.176 271.014C572.176 276.765 576.838 281.426 582.588 281.426C588.339 281.426 593 276.765 593 271.014Z" fill="#0078AD" class="c-color delay-05"></path>
<path d="M229.063 271.014C229.063 265.264 224.401 260.602 218.651 260.602C212.901 260.602 208.239 265.264 208.239 271.014C208.239 276.765 212.901 281.426 218.651 281.426C224.401 281.426 229.063 276.765 229.063 271.014Z" fill="#0078AD" class="c-color delay-03"></path>
<path d="M280.642 218.956C280.642 213.206 275.98 208.544 270.23 208.544C264.479 208.544 259.818 213.206 259.818 218.956C259.818 224.706 264.479 229.368 270.23 229.368C275.98 229.368 280.642 224.706 280.642 218.956Z" fill="#000093" class="b-color delay-01"></path>
<path d="M332.701 218.956C332.701 213.206 328.04 208.544 322.29 208.544C316.539 208.544 311.878 213.206 311.878 218.956C311.878 224.706 316.539 229.368 322.29 229.368C328.04 229.368 332.701 224.706 332.701 218.956Z" fill="#000093" class="b-color delay-04"></path>
<path d="M384.761 218.956C384.761 213.206 380.099 208.544 374.349 208.544C368.599 208.544 363.937 213.206 363.937 218.956C363.937 224.706 368.599 229.368 374.349 229.368C380.099 229.368 384.761 224.706 384.761 218.956Z" fill="#0F3CC9" class="a-color delay-05"></path>
<path d="M20.8236 218.956C20.8236 213.206 16.1621 208.544 10.4118 208.544C4.66153 208.544 -7.06469e-07 213.206 -4.55115e-07 218.956C-2.03762e-07 224.706 4.66153 229.368 10.4118 229.368C16.1621 229.368 20.8237 224.706 20.8236 218.956Z" fill="#0F3CC9" class="a-color delay-02"></path>
<path d="M436.817 218.956C436.817 213.206 432.156 208.544 426.405 208.544C420.655 208.544 415.994 213.206 415.994 218.956C415.994 224.706 420.655 229.368 426.405 229.368C432.156 229.368 436.817 224.706 436.817 218.956Z" fill="#000093" class="b-color delay-01"></path>
<path d="M72.8803 218.956C72.8803 213.206 68.2188 208.544 62.4685 208.544C56.7182 208.544 52.0566 213.206 52.0566 218.956C52.0566 224.706 56.7182 229.368 62.4685 229.368C68.2188 229.368 72.8803 224.706 72.8803 218.956Z" fill="#000093" class="b-color delay-03"></path>
<path d="M488.88 218.956C488.88 213.206 484.219 208.544 478.469 208.544C472.718 208.544 468.057 213.206 468.057 218.956C468.057 224.706 472.718 229.368 478.469 229.368C484.219 229.368 488.88 224.706 488.88 218.956Z" fill="#0F3CC9" class="a-color delay-04"></path>
<path d="M124.943 218.956C124.943 213.206 120.282 208.544 114.531 208.544C108.781 208.544 104.12 213.206 104.12 218.956C104.12 224.706 108.781 229.368 114.531 229.368C120.282 229.368 124.943 224.706 124.943 218.956Z" fill="#0F3CC9" class="a-color delay-05"></path>
<path d="M540.937 218.956C540.937 213.206 536.275 208.544 530.525 208.544C524.775 208.544 520.113 213.206 520.113 218.956C520.113 224.706 524.775 229.368 530.525 229.368C536.275 229.368 540.937 224.706 540.937 218.956Z" fill="#0F3CC9" class="a-color delay-02"></path>
<path d="M177 218.956C177 213.206 172.338 208.544 166.588 208.544C160.838 208.544 156.176 213.206 156.176 218.956C156.176 224.706 160.838 229.368 166.588 229.368C172.338 229.368 177 224.706 177 218.956Z" fill="#0F3CC9" class="a-color delay-04"></path>
<path d="M593 218.956C593 213.206 588.339 208.544 582.588 208.544C576.838 208.544 572.176 213.206 572.176 218.956C572.176 224.706 576.838 229.368 582.588 229.368C588.339 229.368 593 224.706 593 218.956Z" fill="#0078AD" class="c-color delay-02"></path>
<path d="M229.063 218.956C229.063 213.206 224.401 208.544 218.651 208.544C212.901 208.544 208.239 213.206 208.239 218.956C208.239 224.706 212.901 229.368 218.651 229.368C224.401 229.368 229.063 224.706 229.063 218.956Z" fill="#0078AD" class="c-color delay-05"></path>
<path d="M280.642 166.895C280.642 161.145 275.98 156.483 270.23 156.483C264.479 156.483 259.818 161.145 259.818 166.895C259.818 172.645 264.479 177.307 270.23 177.307C275.98 177.307 280.642 172.645 280.642 166.895Z" fill="#000093" class="b-color delay-02"></path>
<path d="M332.701 166.895C332.701 161.145 328.04 156.483 322.29 156.483C316.539 156.483 311.878 161.145 311.878 166.895C311.878 172.645 316.539 177.307 322.29 177.307C328.04 177.307 332.701 172.645 332.701 166.895Z" fill="#0078AD" class="c-color delay-05"></path>
<path d="M384.761 166.895C384.761 161.145 380.099 156.483 374.349 156.483C368.599 156.483 363.937 161.145 363.937 166.895C363.937 172.645 368.599 177.307 374.349 177.307C380.099 177.307 384.761 172.645 384.761 166.895Z" fill="#0F3CC9" class="a-color delay-03"></path>
<path d="M20.8236 166.895C20.8236 161.145 16.1621 156.483 10.4118 156.483C4.66153 156.483 -7.06469e-07 161.145 -4.55115e-07 166.895C-2.03762e-07 172.645 4.66153 177.307 10.4118 177.307C16.1621 177.307 20.8237 172.645 20.8236 166.895Z" fill="#0F3CC9" class="a-color delay-02"></path>
<path d="M436.817 166.895C436.817 161.145 432.156 156.483 426.405 156.483C420.655 156.483 415.994 161.145 415.994 166.895C415.994 172.645 420.655 177.307 426.405 177.307C432.156 177.307 436.817 172.645 436.817 166.895Z" fill="#0F3CC9" class="a-color delay-01"></path>
<path d="M72.8803 166.895C72.8803 161.145 68.2188 156.483 62.4685 156.483C56.7182 156.483 52.0566 161.145 52.0566 166.895C52.0566 172.645 56.7182 177.307 62.4685 177.307C68.2188 177.307 72.8803 172.645 72.8803 166.895Z" fill="#0F3CC9" class="a-color delay-02"></path>
<path d="M488.88 166.895C488.88 161.145 484.219 156.483 478.469 156.483C472.718 156.483 468.057 161.145 468.057 166.895C468.057 172.645 472.718 177.307 478.469 177.307C484.219 177.307 488.88 172.645 488.88 166.895Z" fill="#0F3CC9" class="a-color delay-04"></path>
<path d="M124.943 166.895C124.943 161.145 120.282 156.483 114.531 156.483C108.781 156.483 104.12 161.145 104.12 166.895C104.12 172.645 108.781 177.307 114.531 177.307C120.282 177.307 124.943 172.645 124.943 166.895Z" fill="#0F3CC9" class="a-color delay-03"></path>
<path d="M540.937 166.895C540.937 161.145 536.275 156.483 530.525 156.483C524.775 156.483 520.113 161.145 520.113 166.895C520.113 172.645 524.775 177.307 530.525 177.307C536.275 177.307 540.937 172.645 540.937 166.895Z" fill="#000093" class="b-color delay-01"></path>
<path d="M177 166.895C177 161.145 172.338 156.483 166.588 156.483C160.838 156.483 156.176 161.145 156.176 166.895C156.176 172.645 160.838 177.307 166.588 177.307C172.338 177.307 177 172.645 177 166.895Z" fill="#000093" class="b-color delay-03"></path>
<path d="M593 166.895C593 161.145 588.339 156.483 582.588 156.483C576.838 156.483 572.176 161.145 572.176 166.895C572.176 172.645 576.838 177.307 582.588 177.307C588.339 177.307 593 172.645 593 166.895Z" fill="#0F3CC9" class="a-color delay-05"></path>
<path d="M229.063 166.895C229.063 161.145 224.401 156.483 218.651 156.483C212.901 156.483 208.239 161.145 208.239 166.895C208.239 172.645 212.901 177.307 218.651 177.307C224.401 177.307 229.063 172.645 229.063 166.895Z" fill="#0F3CC9" class="a-color delay-01"></path>
<path d="M280.642 115.302C280.642 109.551 275.98 104.89 270.23 104.89C264.48 104.89 259.818 109.551 259.818 115.302C259.818 121.052 264.48 125.713 270.23 125.713C275.98 125.713 280.642 121.052 280.642 115.302Z" fill="#0F3CC9" class="a-color delay-04"></path>
<path d="M332.701 115.302C332.701 109.551 328.04 104.89 322.29 104.89C316.539 104.89 311.878 109.551 311.878 115.302C311.878 121.052 316.539 125.713 322.29 125.713C328.04 125.713 332.701 121.052 332.701 115.302Z" fill="#000093" class="b-color delay-03"></path>
<path d="M384.761 115.302C384.761 109.551 380.1 104.89 374.349 104.89C368.599 104.89 363.938 109.551 363.938 115.302C363.938 121.052 368.599 125.713 374.349 125.713C380.1 125.713 384.761 121.052 384.761 115.302Z" fill="#0078AD" class="c-color delay-05"></path>
<path d="M20.8236 115.302C20.8236 109.551 16.1621 104.89 10.4118 104.89C4.66153 104.89 -7.06469e-07 109.551 -4.55115e-07 115.302C-2.03762e-07 121.052 4.66153 125.713 10.4118 125.713C16.1621 125.713 20.8237 121.052 20.8236 115.302Z" fill="#0078AD" class="c-color delay-01"></path>
<path d="M436.817 115.302C436.817 109.551 432.156 104.89 426.406 104.89C420.655 104.89 415.994 109.551 415.994 115.302C415.994 121.052 420.655 125.713 426.406 125.713C432.156 125.713 436.817 121.052 436.817 115.302Z" fill="#0F3CC9" class="a-color delay-01"></path>
<path d="M72.8803 115.302C72.8803 109.551 68.2188 104.89 62.4685 104.89C56.7182 104.89 52.0566 109.551 52.0566 115.302C52.0566 121.052 56.7182 125.713 62.4685 125.713C68.2188 125.713 72.8803 121.052 72.8803 115.302Z" fill="#0F3CC9" class="a-color delay-05"></path>
<path d="M488.881 115.302C488.881 109.551 484.219 104.89 478.469 104.89C472.719 104.89 468.057 109.551 468.057 115.302C468.057 121.052 472.719 125.713 478.469 125.713C484.219 125.713 488.881 121.052 488.881 115.302Z" fill="#0F3CC9" class="a-color delay-03"></path>
<path d="M124.943 115.302C124.943 109.551 120.282 104.89 114.531 104.89C108.781 104.89 104.12 109.551 104.12 115.302C104.12 121.052 108.781 125.713 114.531 125.713C120.282 125.713 124.943 121.052 124.943 115.302Z" fill="#0F3CC9" class="a-color delay-02"></path>
<path d="M540.937 115.302C540.937 109.551 536.275 104.89 530.525 104.89C524.775 104.89 520.113 109.551 520.113 115.302C520.113 121.052 524.775 125.713 530.525 125.713C536.275 125.713 540.937 121.052 540.937 115.302Z" fill="#000093" class="b-color delay-02"></path>
<path d="M177 115.302C177 109.551 172.338 104.89 166.588 104.89C160.838 104.89 156.176 109.551 156.176 115.302C156.176 121.052 160.838 125.713 166.588 125.713C172.338 125.713 177 121.052 177 115.302Z" fill="#000093" class="b-color delay-01"></path>
<path d="M593 115.302C593 109.551 588.339 104.89 582.588 104.89C576.838 104.89 572.177 109.551 572.177 115.302C572.177 121.052 576.838 125.713 582.588 125.713C588.339 125.713 593 121.052 593 115.302Z" fill="#0078AD" class="c-color delay-05"></path>
<path d="M229.063 115.302C229.063 109.551 224.401 104.89 218.651 104.89C212.901 104.89 208.239 109.551 208.239 115.302C208.239 121.052 212.901 125.713 218.651 125.713C224.401 125.713 229.063 121.052 229.063 115.302Z" fill="#0078AD" class="c-color delay-03"></path>
<path d="M280.642 63.2433C280.642 57.493 275.98 52.8315 270.23 52.8315C264.479 52.8315 259.818 57.493 259.818 63.2433C259.818 68.9936 264.479 73.6551 270.23 73.6551C275.98 73.6551 280.642 68.9936 280.642 63.2433Z" fill="#000093" class="b-color delay-05"></path>
<path d="M332.701 63.2433C332.701 57.493 328.04 52.8315 322.29 52.8315C316.539 52.8315 311.878 57.493 311.878 63.2433C311.878 68.9936 316.539 73.6551 322.29 73.6551C328.04 73.6551 332.701 68.9936 332.701 63.2433Z" fill="#000093" class="b-color delay-02"></path>
<path d="M384.761 63.2433C384.761 57.493 380.099 52.8315 374.349 52.8315C368.599 52.8315 363.937 57.493 363.937 63.2433C363.937 68.9936 368.599 73.6551 374.349 73.6551C380.099 73.6551 384.761 68.9936 384.761 63.2433Z" fill="#0F3CC9" class="a-color delay-02"></path>
<path d="M20.8236 63.2433C20.8236 57.493 16.1621 52.8315 10.4118 52.8315C4.66153 52.8315 -7.06469e-07 57.493 -4.55115e-07 63.2433C-2.03762e-07 68.9936 4.66153 73.6551 10.4118 73.6551C16.1621 73.6551 20.8237 68.9936 20.8236 63.2433Z" fill="#0F3CC9" class="a-color delay-04"></path>
<path d="M436.817 63.2433C436.817 57.493 432.156 52.8315 426.405 52.8315C420.655 52.8315 415.994 57.493 415.994 63.2433C415.994 68.9936 420.655 73.6551 426.405 73.6551C432.156 73.6551 436.817 68.9936 436.817 63.2433Z" fill="#000093" class="b-color delay-04"></path>
<path d="M72.8803 63.2433C72.8803 57.493 68.2188 52.8315 62.4685 52.8315C56.7182 52.8315 52.0566 57.493 52.0566 63.2433C52.0566 68.9936 56.7182 73.6551 62.4685 73.6551C68.2188 73.6551 72.8803 68.9936 72.8803 63.2433Z" fill="#000093" class="b-color delay-02"></path>
<path d="M488.88 63.2433C488.88 57.493 484.219 52.8315 478.469 52.8315C472.718 52.8315 468.057 57.493 468.057 63.2433C468.057 68.9936 472.718 73.6551 478.469 73.6551C484.219 73.6551 488.88 68.9936 488.88 63.2433Z" fill="#0F3CC9" class="a-color delay-05"></path>
<path d="M124.943 63.2433C124.943 57.493 120.282 52.8315 114.531 52.8315C108.781 52.8315 104.12 57.493 104.12 63.2433C104.12 68.9936 108.781 73.6551 114.531 73.6551C120.282 73.6551 124.943 68.9936 124.943 63.2433Z" fill="#0F3CC9" class="a-color delay-01"></path>
<path d="M540.937 63.2433C540.937 57.493 536.275 52.8315 530.525 52.8315C524.775 52.8315 520.113 57.493 520.113 63.2433C520.113 68.9936 524.775 73.6551 530.525 73.6551C536.275 73.6551 540.937 68.9936 540.937 63.2433Z" fill="#0F3CC9" class="a-color delay-03"></path>
<path d="M177 63.2433C177 57.493 172.338 52.8315 166.588 52.8315C160.838 52.8315 156.176 57.493 156.176 63.2433C156.176 68.9936 160.838 73.6551 166.588 73.6551C172.338 73.6551 177 68.9936 177 63.2433Z" fill="#0F3CC9" class="a-color delay-04"></path>
<path d="M593 63.2433C593 57.493 588.339 52.8315 582.588 52.8315C576.838 52.8315 572.176 57.493 572.176 63.2433C572.176 68.9936 576.838 73.6551 582.588 73.6551C588.339 73.6551 593 68.9936 593 63.2433Z" fill="#0078AD" class="c-color delay-01"></path>
<path d="M229.063 63.2433C229.063 57.493 224.401 52.8315 218.651 52.8315C212.901 52.8315 208.239 57.493 208.239 63.2433C208.239 68.9936 212.901 73.6551 218.651 73.6551C224.401 73.6551 229.063 68.9936 229.063 63.2433Z" fill="#0078AD" class="c-color delay-02"></path>
<path d="M280.642 11.1824C280.642 5.43209 275.98 0.770557 270.23 0.770557C264.479 0.770557 259.818 5.43209 259.818 11.1824C259.818 16.9327 264.479 21.5942 270.23 21.5942C275.98 21.5942 280.642 16.9327 280.642 11.1824Z" fill="#000093" class="b-color delay-03"></path>
<path d="M332.701 11.1824C332.701 5.43209 328.04 0.770557 322.29 0.770557C316.539 0.770557 311.878 5.43209 311.878 11.1824C311.878 16.9327 316.539 21.5942 322.29 21.5942C328.04 21.5942 332.701 16.9327 332.701 11.1824Z" fill="#0078AD" class="c-color delay-05"></path>
<path d="M384.761 11.1823C384.761 5.43203 380.099 0.770496 374.349 0.770496C368.599 0.770496 363.937 5.43203 363.937 11.1823C363.937 16.9326 368.599 21.5941 374.349 21.5941C380.099 21.5941 384.761 16.9326 384.761 11.1823Z" fill="#0F3CC9" class="a-color delay-01"></path>
<path d="M20.8236 11.1823C20.8236 5.43203 16.1621 0.770496 10.4118 0.770496C4.66153 0.770496 -7.06469e-07 5.43203 -4.55115e-07 11.1823C-2.03762e-07 16.9326 4.66153 21.5941 10.4118 21.5941C16.1621 21.5941 20.8237 16.9326 20.8236 11.1823Z" fill="#0F3CC9" class="a-color delay-02"></path>
<path d="M436.817 11.1823C436.817 5.43203 432.156 0.770496 426.405 0.770496C420.655 0.770496 415.994 5.43203 415.994 11.1823C415.994 16.9326 420.655 21.5941 426.405 21.5941C432.156 21.5941 436.817 16.9326 436.817 11.1823Z" fill="#0F3CC9" class="a-color delay-03"></path>
<path d="M72.8803 11.1823C72.8803 5.43203 68.2188 0.770496 62.4685 0.770496C56.7182 0.770496 52.0566 5.43203 52.0566 11.1823C52.0566 16.9326 56.7182 21.5941 62.4685 21.5941C68.2188 21.5941 72.8803 16.9326 72.8803 11.1823Z" fill="#0F3CC9" class="a-color delay-01"></path>
<path d="M488.88 11.1824C488.88 5.43209 484.219 0.770557 478.469 0.770557C472.718 0.770557 468.057 5.43209 468.057 11.1824C468.057 16.9327 472.718 21.5942 478.469 21.5942C484.219 21.5942 488.88 16.9327 488.88 11.1824Z" fill="#0F3CC9" class="a-color delay-04"></path>
<path d="M124.943 11.1824C124.943 5.43209 120.282 0.770557 114.531 0.770557C108.781 0.770557 104.12 5.43209 104.12 11.1824C104.12 16.9327 108.781 21.5942 114.531 21.5942C120.282 21.5942 124.943 16.9327 124.943 11.1824Z" fill="#0F3CC9" class="a-color delay-02"></path>
<path d="M540.937 11.1824C540.937 5.43209 536.275 0.770557 530.525 0.770557C524.775 0.770557 520.113 5.43209 520.113 11.1824C520.113 16.9327 524.775 21.5942 530.525 21.5942C536.275 21.5942 540.937 16.9327 540.937 11.1824Z" fill="#000093" class="b-color delay-05"></path>
<path d="M177 11.1824C177 5.43209 172.338 0.770557 166.588 0.770557C160.838 0.770557 156.176 5.43209 156.176 11.1824C156.176 16.9327 160.838 21.5942 166.588 21.5942C172.338 21.5942 177 16.9327 177 11.1824Z" fill="#000093" class="b-color delay-02"></path>
<path d="M593 11.1823C593 5.43203 588.339 0.770496 582.588 0.770496C576.838 0.770496 572.176 5.43203 572.176 11.1823C572.176 16.9326 576.838 21.5941 582.588 21.5941C588.339 21.5941 593 16.9326 593 11.1823Z" fill="#0F3CC9" class="a-color delay-01"></path>
<path d="M229.063 11.1823C229.063 5.43203 224.401 0.770496 218.651 0.770496C212.901 0.770496 208.239 5.43203 208.239 11.1823C208.239 16.9326 212.901 21.5941 218.651 21.5941C224.401 21.5941 229.063 16.9326 229.063 11.1823Z" fill="#0F3CC9" class="a-color delay-04"></path>
<path d="M904.642 271.014C904.642 265.264 899.98 260.602 894.23 260.602C888.48 260.602 883.818 265.264 883.818 271.014C883.818 276.765 888.48 281.426 894.23 281.426C899.98 281.426 904.642 276.765 904.642 271.014Z" fill="#0F3CC9" class="a-color delay-02"></path>
<path d="M956.701 271.014C956.701 265.264 952.04 260.602 946.29 260.602C940.539 260.602 935.878 265.264 935.878 271.014C935.878 276.765 940.539 281.426 946.29 281.426C952.04 281.426 956.701 276.765 956.701 271.014Z" fill="#000093" class="b-color delay-01"></path>
<path d="M1008.76 271.014C1008.76 265.264 1004.1 260.602 998.349 260.602C992.599 260.602 987.938 265.264 987.938 271.014C987.938 276.765 992.599 281.426 998.349 281.426C1004.1 281.426 1008.76 276.765 1008.76 271.014Z" fill="#0078AD" class="c-color delay-03"></path>
<path d="M644.824 271.014C644.824 265.264 640.162 260.602 634.412 260.602C628.662 260.602 624 265.264 624 271.014C624 276.765 628.662 281.426 634.412 281.426C640.162 281.426 644.824 276.765 644.824 271.014Z" fill="#0078AD" class="c-color delay-02"></path>
<path d="M1060.82 271.014C1060.82 265.264 1056.16 260.602 1050.41 260.602C1044.66 260.602 1039.99 265.264 1039.99 271.014C1039.99 276.765 1044.66 281.426 1050.41 281.426C1056.16 281.426 1060.82 276.765 1060.82 271.014Z" fill="#0F3CC9" class="a-color delay-04"></path>
<path d="M696.88 271.014C696.88 265.264 692.219 260.602 686.468 260.602C680.718 260.602 676.057 265.264 676.057 271.014C676.057 276.765 680.718 281.426 686.468 281.426C692.219 281.426 696.88 276.765 696.88 271.014Z" fill="#0F3CC9" class="a-color delay-03"></path>
<path d="M1112.88 271.014C1112.88 265.264 1108.22 260.602 1102.47 260.602C1096.72 260.602 1092.06 265.264 1092.06 271.014C1092.06 276.765 1096.72 281.426 1102.47 281.426C1108.22 281.426 1112.88 276.765 1112.88 271.014Z" fill="#0F3CC9" class="a-color delay-01"></path>
<path d="M748.943 271.014C748.943 265.264 744.282 260.602 738.531 260.602C732.781 260.602 728.12 265.264 728.12 271.014C728.12 276.765 732.781 281.426 738.531 281.426C744.282 281.426 748.943 276.765 748.943 271.014Z" fill="#0F3CC9" class="a-color delay-04"></path>
<path d="M1164.94 271.014C1164.94 265.264 1160.28 260.602 1154.52 260.602C1148.77 260.602 1144.11 265.264 1144.11 271.014C1144.11 276.765 1148.77 281.426 1154.52 281.426C1160.28 281.426 1164.94 276.765 1164.94 271.014Z" fill="#000093" class="b-color delay-05"></path>
<path d="M801 271.014C801 265.264 796.338 260.602 790.588 260.602C784.837 260.602 780.176 265.264 780.176 271.014C780.176 276.765 784.837 281.426 790.588 281.426C796.338 281.426 801 276.765 801 271.014Z" fill="#000093" class="b-color delay-01"></path>
<path d="M1217 271.014C1217 265.264 1212.34 260.602 1206.59 260.602C1200.84 260.602 1196.18 265.264 1196.18 271.014C1196.18 276.765 1200.84 281.426 1206.59 281.426C1212.34 281.426 1217 276.765 1217 271.014Z" fill="#0078AD" class="c-color delay-05"></path>
<path d="M853.063 271.014C853.063 265.264 848.401 260.602 842.651 260.602C836.901 260.602 832.239 265.264 832.239 271.014C832.239 276.765 836.901 281.426 842.651 281.426C848.401 281.426 853.063 276.765 853.063 271.014Z" fill="#0078AD" class="c-color delay-04"></path>
<path d="M904.642 218.956C904.642 213.206 899.98 208.544 894.23 208.544C888.479 208.544 883.818 213.206 883.818 218.956C883.818 224.706 888.479 229.368 894.23 229.368C899.98 229.368 904.642 224.706 904.642 218.956Z" fill="#000093" class="b-color delay-01"></path>
<path d="M956.701 218.956C956.701 213.206 952.04 208.544 946.29 208.544C940.539 208.544 935.878 213.206 935.878 218.956C935.878 224.706 940.539 229.368 946.29 229.368C952.04 229.368 956.701 224.706 956.701 218.956Z" fill="#000093" class="b-color delay-03"></path>
<path d="M1008.76 218.956C1008.76 213.206 1004.1 208.544 998.349 208.544C992.599 208.544 987.937 213.206 987.937 218.956C987.937 224.706 992.599 229.368 998.349 229.368C1004.1 229.368 1008.76 224.706 1008.76 218.956Z" fill="#0F3CC9" class="a-color delay-01"></path>
<path d="M644.824 218.956C644.824 213.206 640.162 208.544 634.412 208.544C628.662 208.544 624 213.206 624 218.956C624 224.706 628.662 229.368 634.412 229.368C640.162 229.368 644.824 224.706 644.824 218.956Z" fill="#0F3CC9" class="a-color delay-03"></path>
<path d="M1060.82 218.956C1060.82 213.206 1056.16 208.544 1050.41 208.544C1044.66 208.544 1039.99 213.206 1039.99 218.956C1039.99 224.706 1044.66 229.368 1050.41 229.368C1056.16 229.368 1060.82 224.706 1060.82 218.956Z" fill="#000093" class="b-color delay-01"></path>
<path d="M696.88 218.956C696.88 213.206 692.219 208.544 686.468 208.544C680.718 208.544 676.057 213.206 676.057 218.956C676.057 224.706 680.718 229.368 686.468 229.368C692.219 229.368 696.88 224.706 696.88 218.956Z" fill="#000093" class="b-color delay-02"></path>
<path d="M1112.88 218.956C1112.88 213.206 1108.22 208.544 1102.47 208.544C1096.72 208.544 1092.06 213.206 1092.06 218.956C1092.06 224.706 1096.72 229.368 1102.47 229.368C1108.22 229.368 1112.88 224.706 1112.88 218.956Z" fill="#0F3CC9" class="a-color delay-05"></path>
<path d="M748.943 218.956C748.943 213.206 744.282 208.544 738.531 208.544C732.781 208.544 728.12 213.206 728.12 218.956C728.12 224.706 732.781 229.368 738.531 229.368C744.282 229.368 748.943 224.706 748.943 218.956Z" fill="#0F3CC9" class="a-color delay-02"></path>
<path d="M1164.94 218.956C1164.94 213.206 1160.28 208.544 1154.52 208.544C1148.77 208.544 1144.11 213.206 1144.11 218.956C1144.11 224.706 1148.77 229.368 1154.52 229.368C1160.28 229.368 1164.94 224.706 1164.94 218.956Z" fill="#0F3CC9" class="a-color delay-01"></path>
<path d="M801 218.956C801 213.206 796.338 208.544 790.588 208.544C784.837 208.544 780.176 213.206 780.176 218.956C780.176 224.706 784.837 229.368 790.588 229.368C796.338 229.368 801 224.706 801 218.956Z" fill="#0F3CC9" class="a-color delay-02"></path>
<path d="M1217 218.956C1217 213.206 1212.34 208.544 1206.59 208.544C1200.84 208.544 1196.18 213.206 1196.18 218.956C1196.18 224.706 1200.84 229.368 1206.59 229.368C1212.34 229.368 1217 224.706 1217 218.956Z" fill="#0078AD" class="c-color delay-05"></path>
<path d="M853.063 218.956C853.063 213.206 848.401 208.544 842.651 208.544C836.901 208.544 832.239 213.206 832.239 218.956C832.239 224.706 836.901 229.368 842.651 229.368C848.401 229.368 853.063 224.706 853.063 218.956Z" fill="#0078AD" class="c-color delay-01"></path>
<path d="M904.642 166.895C904.642 161.145 899.98 156.483 894.23 156.483C888.479 156.483 883.818 161.145 883.818 166.895C883.818 172.645 888.479 177.307 894.23 177.307C899.98 177.307 904.642 172.645 904.642 166.895Z" fill="#000093" class="b-color delay-04"></path>
<path d="M956.701 166.895C956.701 161.145 952.04 156.483 946.29 156.483C940.539 156.483 935.878 161.145 935.878 166.895C935.878 172.645 940.539 177.307 946.29 177.307C952.04 177.307 956.701 172.645 956.701 166.895Z" fill="#0078AD" class="c-color delay-02"></path>
<path d="M1008.76 166.895C1008.76 161.145 1004.1 156.483 998.349 156.483C992.599 156.483 987.937 161.145 987.937 166.895C987.937 172.645 992.599 177.307 998.349 177.307C1004.1 177.307 1008.76 172.645 1008.76 166.895Z" fill="#0F3CC9" class="a-color delay-05"></path>
<path d="M644.824 166.895C644.824 161.145 640.162 156.483 634.412 156.483C628.662 156.483 624 161.145 624 166.895C624 172.645 628.662 177.307 634.412 177.307C640.162 177.307 644.824 172.645 644.824 166.895Z" fill="#0F3CC9" class="a-color delay-03"></path>
<path d="M1060.82 166.895C1060.82 161.145 1056.16 156.483 1050.41 156.483C1044.66 156.483 1039.99 161.145 1039.99 166.895C1039.99 172.645 1044.66 177.307 1050.41 177.307C1056.16 177.307 1060.82 172.645 1060.82 166.895Z" fill="#0F3CC9" class="a-color delay-02"></path>
<path d="M696.88 166.895C696.88 161.145 692.219 156.483 686.468 156.483C680.718 156.483 676.057 161.145 676.057 166.895C676.057 172.645 680.718 177.307 686.468 177.307C692.219 177.307 696.88 172.645 696.88 166.895Z" fill="#0F3CC9" class="a-color delay-04"></path>
<path d="M1112.88 166.895C1112.88 161.145 1108.22 156.483 1102.47 156.483C1096.72 156.483 1092.06 161.145 1092.06 166.895C1092.06 172.645 1096.72 177.307 1102.47 177.307C1108.22 177.307 1112.88 172.645 1112.88 166.895Z" fill="#0F3CC9" class="a-color delay-03"></path>
<path d="M748.943 166.895C748.943 161.145 744.282 156.483 738.531 156.483C732.781 156.483 728.12 161.145 728.12 166.895C728.12 172.645 732.781 177.307 738.531 177.307C744.282 177.307 748.943 172.645 748.943 166.895Z" fill="#0F3CC9" class="a-color delay-02"></path>
<path d="M1164.94 166.895C1164.94 161.145 1160.28 156.483 1154.52 156.483C1148.77 156.483 1144.11 161.145 1144.11 166.895C1144.11 172.645 1148.77 177.307 1154.52 177.307C1160.28 177.307 1164.94 172.645 1164.94 166.895Z" fill="#000093" class="b-color delay-01"></path>
<path d="M801 166.895C801 161.145 796.338 156.483 790.588 156.483C784.837 156.483 780.176 161.145 780.176 166.895C780.176 172.645 784.837 177.307 790.588 177.307C796.338 177.307 801 172.645 801 166.895Z" fill="#000093" class="b-color delay-04"></path>
<path d="M1217 166.895C1217 161.145 1212.34 156.483 1206.59 156.483C1200.84 156.483 1196.18 161.145 1196.18 166.895C1196.18 172.645 1200.84 177.307 1206.59 177.307C1212.34 177.307 1217 172.645 1217 166.895Z" fill="#0F3CC9" class="a-color delay-01"></path>
<path d="M853.063 166.895C853.063 161.145 848.401 156.483 842.651 156.483C836.901 156.483 832.239 161.145 832.239 166.895C832.239 172.645 836.901 177.307 842.651 177.307C848.401 177.307 853.063 172.645 853.063 166.895Z" fill="#0F3CC9" class="a-color delay-03"></path>
<path d="M904.642 115.302C904.642 109.551 899.98 104.89 894.23 104.89C888.48 104.89 883.818 109.551 883.818 115.302C883.818 121.052 888.48 125.713 894.23 125.713C899.98 125.713 904.642 121.052 904.642 115.302Z" fill="#0F3CC9" class="a-color delay-03"></path>
<path d="M956.701 115.302C956.701 109.551 952.04 104.89 946.29 104.89C940.539 104.89 935.878 109.551 935.878 115.302C935.878 121.052 940.539 125.713 946.29 125.713C952.04 125.713 956.701 121.052 956.701 115.302Z" fill="#000093" class="b-color delay-05"></path>
<path d="M1008.76 115.302C1008.76 109.551 1004.1 104.89 998.349 104.89C992.599 104.89 987.938 109.551 987.938 115.302C987.938 121.052 992.599 125.713 998.349 125.713C1004.1 125.713 1008.76 121.052 1008.76 115.302Z" fill="#0078AD" class="c-color delay-05"></path>
<path d="M644.824 115.302C644.824 109.551 640.162 104.89 634.412 104.89C628.662 104.89 624 109.551 624 115.302C624 121.052 628.662 125.713 634.412 125.713C640.162 125.713 644.824 121.052 644.824 115.302Z" fill="#0078AD" class="c-color delay-01"></path>
<path d="M1060.82 115.302C1060.82 109.551 1056.16 104.89 1050.41 104.89C1044.66 104.89 1039.99 109.551 1039.99 115.302C1039.99 121.052 1044.66 125.713 1050.41 125.713C1056.16 125.713 1060.82 121.052 1060.82 115.302Z" fill="#0F3CC9" class="a-color delay-02"></path>
<path d="M696.88 115.302C696.88 109.551 692.219 104.89 686.468 104.89C680.718 104.89 676.057 109.551 676.057 115.302C676.057 121.052 680.718 125.713 686.468 125.713C692.219 125.713 696.88 121.052 696.88 115.302Z" fill="#0F3CC9" class="a-color delay-01"></path>
<path d="M1112.88 115.302C1112.88 109.551 1108.22 104.89 1102.47 104.89C1096.72 104.89 1092.06 109.551 1092.06 115.302C1092.06 121.052 1096.72 125.713 1102.47 125.713C1108.22 125.713 1112.88 121.052 1112.88 115.302Z" fill="#0F3CC9" class="a-color delay-04"></path>
<path d="M748.943 115.302C748.943 109.551 744.282 104.89 738.531 104.89C732.781 104.89 728.12 109.551 728.12 115.302C728.12 121.052 732.781 125.713 738.531 125.713C744.282 125.713 748.943 121.052 748.943 115.302Z" fill="#0F3CC9" class="a-color delay-03"></path>
<path d="M1164.94 115.302C1164.94 109.551 1160.28 104.89 1154.53 104.89C1148.77 104.89 1144.11 109.551 1144.11 115.302C1144.11 121.052 1148.77 125.713 1154.53 125.713C1160.28 125.713 1164.94 121.052 1164.94 115.302Z" fill="#000093" class="b-color delay-01"></path>
<path d="M801 115.302C801 109.551 796.338 104.89 790.588 104.89C784.837 104.89 780.176 109.551 780.176 115.302C780.176 121.052 784.837 125.713 790.588 125.713C796.338 125.713 801 121.052 801 115.302Z" fill="#000093" class="b-color delay-02"></path>
<path d="M1217 115.302C1217 109.551 1212.34 104.89 1206.59 104.89C1200.84 104.89 1196.18 109.551 1196.18 115.302C1196.18 121.052 1200.84 125.713 1206.59 125.713C1212.34 125.713 1217 121.052 1217 115.302Z" fill="#0078AD" class="c-color delay-02"></path>
<path d="M853.063 115.302C853.063 109.551 848.401 104.89 842.651 104.89C836.901 104.89 832.239 109.551 832.239 115.302C832.239 121.052 836.901 125.713 842.651 125.713C848.401 125.713 853.063 121.052 853.063 115.302Z" fill="#0078AD" class="c-color delay-04"></path>
<path d="M904.642 63.2433C904.642 57.493 899.98 52.8315 894.23 52.8315C888.479 52.8315 883.818 57.493 883.818 63.2433C883.818 68.9936 888.479 73.6551 894.23 73.6551C899.98 73.6551 904.642 68.9936 904.642 63.2433Z" fill="#000093" class="b-color delay-01"></path>
<path d="M956.701 63.2433C956.701 57.493 952.04 52.8315 946.29 52.8315C940.539 52.8315 935.878 57.493 935.878 63.2433C935.878 68.9936 940.539 73.6551 946.29 73.6551C952.04 73.6551 956.701 68.9936 956.701 63.2433Z" fill="#000093" class="b-color delay-05"></path>
<path d="M1008.76 63.2433C1008.76 57.493 1004.1 52.8315 998.349 52.8315C992.599 52.8315 987.937 57.493 987.937 63.2433C987.937 68.9936 992.599 73.6551 998.349 73.6551C1004.1 73.6551 1008.76 68.9936 1008.76 63.2433Z" fill="#0F3CC9" class="a-color delay-04"></path>
<path d="M644.824 63.2433C644.824 57.493 640.162 52.8315 634.412 52.8315C628.662 52.8315 624 57.493 624 63.2433C624 68.9936 628.662 73.6551 634.412 73.6551C640.162 73.6551 644.824 68.9936 644.824 63.2433Z" fill="#0F3CC9" class="a-color delay-01"></path>
<path d="M1060.82 63.2433C1060.82 57.493 1056.16 52.8315 1050.41 52.8315C1044.66 52.8315 1039.99 57.493 1039.99 63.2433C1039.99 68.9936 1044.66 73.6551 1050.41 73.6551C1056.16 73.6551 1060.82 68.9936 1060.82 63.2433Z" fill="#000093" class="b-color delay-03"></path>
<path d="M696.88 63.2433C696.88 57.493 692.219 52.8315 686.468 52.8315C680.718 52.8315 676.057 57.493 676.057 63.2433C676.057 68.9936 680.718 73.6551 686.468 73.6551C692.219 73.6551 696.88 68.9936 696.88 63.2433Z" fill="#000093" class="b-color delay-02"></path>
<path d="M1112.88 63.2433C1112.88 57.493 1108.22 52.8315 1102.47 52.8315C1096.72 52.8315 1092.06 57.493 1092.06 63.2433C1092.06 68.9936 1096.72 73.6551 1102.47 73.6551C1108.22 73.6551 1112.88 68.9936 1112.88 63.2433Z" fill="#0F3CC9" class="a-color delay-04"></path>
<path d="M748.943 63.2433C748.943 57.493 744.282 52.8315 738.531 52.8315C732.781 52.8315 728.12 57.493 728.12 63.2433C728.12 68.9936 732.781 73.6551 738.531 73.6551C744.282 73.6551 748.943 68.9936 748.943 63.2433Z" fill="#0F3CC9" class="a-color delay-02"></path>
<path d="M1164.94 63.2433C1164.94 57.493 1160.28 52.8315 1154.52 52.8315C1148.77 52.8315 1144.11 57.493 1144.11 63.2433C1144.11 68.9936 1148.77 73.6551 1154.52 73.6551C1160.28 73.6551 1164.94 68.9936 1164.94 63.2433Z" fill="#0F3CC9" class="a-color delay-03"></path>
<path d="M801 63.2433C801 57.493 796.338 52.8315 790.588 52.8315C784.837 52.8315 780.176 57.493 780.176 63.2433C780.176 68.9936 784.837 73.6551 790.588 73.6551C796.338 73.6551 801 68.9936 801 63.2433Z" fill="#0F3CC9" class="a-color delay-02"></path>
<path d="M1217 63.2433C1217 57.493 1212.34 52.8315 1206.59 52.8315C1200.84 52.8315 1196.18 57.493 1196.18 63.2433C1196.18 68.9936 1200.84 73.6551 1206.59 73.6551C1212.34 73.6551 1217 68.9936 1217 63.2433Z" fill="#0078AD" class="c-color delay-05"></path>
<path d="M853.063 63.2433C853.063 57.493 848.401 52.8315 842.651 52.8315C836.901 52.8315 832.239 57.493 832.239 63.2433C832.239 68.9936 836.901 73.6551 842.651 73.6551C848.401 73.6551 853.063 68.9936 853.063 63.2433Z" fill="#0078AD" class="c-color delay-01"></path>
<path d="M904.642 11.1824C904.642 5.43209 899.98 0.770557 894.23 0.770557C888.479 0.770557 883.818 5.43209 883.818 11.1824C883.818 16.9327 888.479 21.5942 894.23 21.5942C899.98 21.5942 904.642 16.9327 904.642 11.1824Z" fill="#000093" class="b-color delay-05"></path>
<path d="M956.701 11.1824C956.701 5.43209 952.04 0.770557 946.29 0.770557C940.539 0.770557 935.878 5.43209 935.878 11.1824C935.878 16.9327 940.539 21.5942 946.29 21.5942C952.04 21.5942 956.701 16.9327 956.701 11.1824Z" fill="#0078AD" class="c-color delay-03"></path>
<path d="M1008.76 11.1823C1008.76 5.43203 1004.1 0.770496 998.349 0.770496C992.599 0.770496 987.937 5.43203 987.937 11.1823C987.937 16.9326 992.599 21.5941 998.349 21.5941C1004.1 21.5941 1008.76 16.9326 1008.76 11.1823Z" fill="#0F3CC9" class="a-color delay-04"></path>
<path d="M644.824 11.1823C644.824 5.43203 640.162 0.770496 634.412 0.770496C628.662 0.770496 624 5.43203 624 11.1823C624 16.9326 628.662 21.5941 634.412 21.5941C640.162 21.5941 644.824 16.9326 644.824 11.1823Z" fill="#0F3CC9" class="a-color delay-01"></path>
<path d="M1060.82 11.1823C1060.82 5.43203 1056.16 0.770496 1050.41 0.770496C1044.66 0.770496 1039.99 5.43203 1039.99 11.1823C1039.99 16.9326 1044.66 21.5941 1050.41 21.5941C1056.16 21.5941 1060.82 16.9326 1060.82 11.1823Z" fill="#0F3CC9" class="a-color delay-02"></path>
<path d="M696.88 11.1823C696.88 5.43203 692.219 0.770496 686.468 0.770496C680.718 0.770496 676.057 5.43203 676.057 11.1823C676.057 16.9326 680.718 21.5941 686.468 21.5941C692.219 21.5941 696.88 16.9326 696.88 11.1823Z" fill="#0F3CC9" class="a-color delay-01"></path>
<path d="M1112.88 11.1824C1112.88 5.43209 1108.22 0.770557 1102.47 0.770557C1096.72 0.770557 1092.06 5.43209 1092.06 11.1824C1092.06 16.9327 1096.72 21.5942 1102.47 21.5942C1108.22 21.5942 1112.88 16.9327 1112.88 11.1824Z" fill="#0F3CC9" class="a-color delay-03"></path>
<path d="M748.943 11.1824C748.943 5.43209 744.282 0.770557 738.531 0.770557C732.781 0.770557 728.12 5.43209 728.12 11.1824C728.12 16.9327 732.781 21.5942 738.531 21.5942C744.282 21.5942 748.943 16.9327 748.943 11.1824Z" fill="#0F3CC9" class="a-color delay-04"></path>
<path d="M1164.94 11.1824C1164.94 5.43209 1160.28 0.770557 1154.52 0.770557C1148.77 0.770557 1144.11 5.43209 1144.11 11.1824C1144.11 16.9327 1148.77 21.5942 1154.52 21.5942C1160.28 21.5942 1164.94 16.9327 1164.94 11.1824Z" fill="#000093" class="b-color delay-05"></path>
<path d="M801 11.1824C801 5.43209 796.338 0.770557 790.588 0.770557C784.837 0.770557 780.176 5.43209 780.176 11.1824C780.176 16.9327 784.837 21.5942 790.588 21.5942C796.338 21.5942 801 16.9327 801 11.1824Z" fill="#000093" class="b-color delay-01"></path>
<path d="M1217 11.1823C1217 5.43203 1212.34 0.770496 1206.59 0.770496C1200.84 0.770496 1196.18 5.43203 1196.18 11.1823C1196.18 16.9326 1200.84 21.5941 1206.59 21.5941C1212.34 21.5941 1217 16.9326 1217 11.1823Z" fill="#0F3CC9" class="a-color delay-04"></path>
<path d="M853.063 11.1823C853.063 5.43203 848.401 0.770496 842.651 0.770496C836.901 0.770496 832.239 5.43203 832.239 11.1823C832.239 16.9326 836.901 21.5941 842.651 21.5941C848.401 21.5941 853.063 16.9326 853.063 11.1823Z" fill="#0F3CC9" class="a-color delay-02"></path>
<path d="M1268.82 271.014C1268.82 265.264 1264.16 260.602 1258.41 260.602C1252.66 260.602 1248 265.264 1248 271.014C1248 276.765 1252.66 281.426 1258.41 281.426C1264.16 281.426 1268.82 276.765 1268.82 271.014Z" fill="#0078AD" class="c-color delay-02"></path>
<path d="M1320.88 271.014C1320.88 265.264 1316.22 260.602 1310.47 260.602C1304.72 260.602 1300.06 265.264 1300.06 271.014C1300.06 276.765 1304.72 281.426 1310.47 281.426C1316.22 281.426 1320.88 276.765 1320.88 271.014Z" fill="#0F3CC9" class="a-color delay-01"></path>
<path d="M1372.94 271.014C1372.94 265.264 1368.28 260.602 1362.53 260.602C1356.78 260.602 1352.12 265.264 1352.12 271.014C1352.12 276.765 1356.78 281.426 1362.53 281.426C1368.28 281.426 1372.94 276.765 1372.94 271.014Z" fill="#0F3CC9" class="a-color delay-03"></path>
<path d="M1425 271.014C1425 265.264 1420.34 260.602 1414.59 260.602C1408.84 260.602 1404.18 265.264 1404.18 271.014C1404.18 276.765 1408.84 281.426 1414.59 281.426C1420.34 281.426 1425 276.765 1425 271.014Z" fill="#000093" class="b-color delay-03"></path>
<path d="M1268.82 218.956C1268.82 213.206 1264.16 208.544 1258.41 208.544C1252.66 208.544 1248 213.206 1248 218.956C1248 224.706 1252.66 229.368 1258.41 229.368C1264.16 229.368 1268.82 224.706 1268.82 218.956Z" fill="#0F3CC9" class="a-color delay-05"></path>
<path d="M1320.88 218.956C1320.88 213.206 1316.22 208.544 1310.47 208.544C1304.72 208.544 1300.06 213.206 1300.06 218.956C1300.06 224.706 1304.72 229.368 1310.47 229.368C1316.22 229.368 1320.88 224.706 1320.88 218.956Z" fill="#000093" class="b-color delay-02"></path>
<path d="M1372.94 218.956C1372.94 213.206 1368.28 208.544 1362.53 208.544C1356.78 208.544 1352.12 213.206 1352.12 218.956C1352.12 224.706 1356.78 229.368 1362.53 229.368C1368.28 229.368 1372.94 224.706 1372.94 218.956Z" fill="#0F3CC9" class="a-color delay-02"></path>
<path d="M1425 218.956C1425 213.206 1420.34 208.544 1414.59 208.544C1408.84 208.544 1404.18 213.206 1404.18 218.956C1404.18 224.706 1408.84 229.368 1414.59 229.368C1420.34 229.368 1425 224.706 1425 218.956Z" fill="#0F3CC9" class="a-color delay-01"></path>
<path d="M1268.82 166.895C1268.82 161.145 1264.16 156.483 1258.41 156.483C1252.66 156.483 1248 161.145 1248 166.895C1248 172.645 1252.66 177.307 1258.41 177.307C1264.16 177.307 1268.82 172.645 1268.82 166.895Z" fill="#0F3CC9" class="a-color delay-05"></path>
<path d="M1320.88 166.895C1320.88 161.145 1316.22 156.483 1310.47 156.483C1304.72 156.483 1300.06 161.145 1300.06 166.895C1300.06 172.645 1304.72 177.307 1310.47 177.307C1316.22 177.307 1320.88 172.645 1320.88 166.895Z" fill="#0F3CC9" class="a-color delay-03"></path>
<path d="M1372.94 166.895C1372.94 161.145 1368.28 156.483 1362.53 156.483C1356.78 156.483 1352.12 161.145 1352.12 166.895C1352.12 172.645 1356.78 177.307 1362.53 177.307C1368.28 177.307 1372.94 172.645 1372.94 166.895Z" fill="#0F3CC9" class="a-color delay-02"></path>
<path d="M1425 166.895C1425 161.145 1420.34 156.483 1414.59 156.483C1408.84 156.483 1404.18 161.145 1404.18 166.895C1404.18 172.645 1408.84 177.307 1414.59 177.307C1420.34 177.307 1425 172.645 1425 166.895Z" fill="#000093" class="b-color delay-01"></path>
<path d="M1268.82 115.302C1268.82 109.551 1264.16 104.89 1258.41 104.89C1252.66 104.89 1248 109.551 1248 115.302C1248 121.052 1252.66 125.713 1258.41 125.713C1264.16 125.713 1268.82 121.052 1268.82 115.302Z" fill="#0078AD" class="c-color delay-03"></path>
<path d="M1320.88 115.302C1320.88 109.551 1316.22 104.89 1310.47 104.89C1304.72 104.89 1300.06 109.551 1300.06 115.302C1300.06 121.052 1304.72 125.713 1310.47 125.713C1316.22 125.713 1320.88 121.052 1320.88 115.302Z" fill="#0F3CC9" class="a-color delay-04"></path>
<path d="M1372.94 115.302C1372.94 109.551 1368.28 104.89 1362.53 104.89C1356.78 104.89 1352.12 109.551 1352.12 115.302C1352.12 121.052 1356.78 125.713 1362.53 125.713C1368.28 125.713 1372.94 121.052 1372.94 115.302Z" fill="#0F3CC9" class="a-color delay-02"></path>
<path d="M1425 115.302C1425 109.551 1420.34 104.89 1414.59 104.89C1408.84 104.89 1404.18 109.551 1404.18 115.302C1404.18 121.052 1408.84 125.713 1414.59 125.713C1420.34 125.713 1425 121.052 1425 115.302Z" fill="#000093" class="b-color delay-04"></path>
<path d="M1268.82 63.2433C1268.82 57.493 1264.16 52.8315 1258.41 52.8315C1252.66 52.8315 1248 57.493 1248 63.2433C1248 68.9936 1252.66 73.6551 1258.41 73.6551C1264.16 73.6551 1268.82 68.9936 1268.82 63.2433Z" fill="#0F3CC9" class="a-color delay-01"></path>
<path d="M1320.88 63.2433C1320.88 57.493 1316.22 52.8315 1310.47 52.8315C1304.72 52.8315 1300.06 57.493 1300.06 63.2433C1300.06 68.9936 1304.72 73.6551 1310.47 73.6551C1316.22 73.6551 1320.88 68.9936 1320.88 63.2433Z" fill="#000093" class="b-color delay-01"></path>
<path d="M1372.94 63.2433C1372.94 57.493 1368.28 52.8315 1362.53 52.8315C1356.78 52.8315 1352.12 57.493 1352.12 63.2433C1352.12 68.9936 1356.78 73.6551 1362.53 73.6551C1368.28 73.6551 1372.94 68.9936 1372.94 63.2433Z" fill="#0F3CC9" class="a-color delay-04"></path>
<path d="M1425 63.2433C1425 57.493 1420.34 52.8315 1414.59 52.8315C1408.84 52.8315 1404.18 57.493 1404.18 63.2433C1404.18 68.9936 1408.84 73.6551 1414.59 73.6551C1420.34 73.6551 1425 68.9936 1425 63.2433Z" fill="#0F3CC9" class="a-color delay-05"></path>
<path d="M1268.82 11.1823C1268.82 5.43203 1264.16 0.770496 1258.41 0.770496C1252.66 0.770496 1248 5.43203 1248 11.1823C1248 16.9326 1252.66 21.5941 1258.41 21.5941C1264.16 21.5941 1268.82 16.9326 1268.82 11.1823Z" fill="#0F3CC9" class="a-color delay-02"></path>
<path d="M1320.88 11.1823C1320.88 5.43203 1316.22 0.770496 1310.47 0.770496C1304.72 0.770496 1300.06 5.43203 1300.06 11.1823C1300.06 16.9326 1304.72 21.5941 1310.47 21.5941C1316.22 21.5941 1320.88 16.9326 1320.88 11.1823Z" fill="#0F3CC9" class="a-color delay-05"></path>
<path d="M1372.94 11.1824C1372.94 5.43209 1368.28 0.770557 1362.53 0.770557C1356.78 0.770557 1352.12 5.43209 1352.12 11.1824C1352.12 16.9327 1356.78 21.5942 1362.53 21.5942C1368.28 21.5942 1372.94 16.9327 1372.94 11.1824Z" fill="#0F3CC9" class="a-color delay-02"></path>
<path d="M1425 11.1824C1425 5.43209 1420.34 0.770557 1414.59 0.770557C1408.84 0.770557 1404.18 5.43209 1404.18 11.1824C1404.18 16.9327 1408.84 21.5942 1414.59 21.5942C1420.34 21.5942 1425 16.9327 1425 11.1824Z" fill="#000093" class="b-color delay-02"></path>
</svg>
</div>
<div class="my-12">
<div class=" w-11/12 mx-auto">
<p class="text-4xl font-black text-start pb-4 lg:text-6xl sm:text-center">Latest and trending devices</p>
<p class="text-zinc-500 font-bold text-start text-lg pb-4 sm:text-center ">Get the best deals on all the latest devices on your wish list.
</p>
</div >
<div class="sm:grid sm:grid-cols-3 sm:grid-rows-1 w-4/5 mx-auto ">
<div class="w-11/12 mx-auto my-6 shadow-lg shadow-slate-500 px-6 py-6 rounded-lg">
<button class="w-max text-white text-bold bg-green-800 float-left px-5 rounded-sm "> HOT-SELLING</button>
<img class="w-full" src="images/3.png " title="Jio phone next" alt="error loading image " />
<p class=" text-lg font-bold">Jio phone next</p>
<p class="text-gray-500 font-bold">At ₹ 4,499 </p>
</div>
<div class="w-11/12 relative mx-auto my-6 shadow-lg shadow-slate-500 px-6 py-6 rounded-lg">
<img class="w-full" src="images/4.png " title="Jio phone next" alt="error loading image " />
<div class="absolute bottom-5">
<p class="text-lg font-bold">Apple Watch Series 7</p>
<p class="text-gray-500 font-bold">From ₹ 41,900 </p>
</div>
</div>
<div class="w-11/12 relative mx-auto my-6 shadow-lg shadow-slate-500 px-6 py-6 rounded-lg">
<img class="w-full" src="images/5.jpg " title="Jio phone next" alt="error loading image " />
<div class="absolute bottom-5">
<p class=" text-lg font-bold">WiFi Mesh Extender</p>
<p class="text-gray-500 font-bold">From ₹ 2,499 </p>
</div>
</div>
</div>
</div>
<center>
<button class="text-blue-700 font-bold text-center px-5 py-2 rounded-3xl border-2 border-solid border-slate-200 w-11/12 mt-3 hover:border-slate-600 sm:w-max ">View all products</button>
</center>
<div class="relative my-12 w-11/12 p mx-auto ">
<div class="absolute bottom-[10%] md:bottom-[20%] flex flex-col px-20 space-y-6">
<p class="text-white text-3xl font-black md:text-5xl lg:text-7xl lg:w-3/5 " >Supercharge your business</p>
<p class="text-gray-300 text-sm font-bold lg:text-lg">End to end digital solution to streamline processes and accelerate growth</p>
<button class="text-white font-bold px-5 py-2 rounded-3xl bg-blue-700 w-max hover:bg-blue-900">Explore JioBusiness</button>
</div>
<div class="">
<img src="images/z.png" title="image" alt="error loading image" class=" w-full h-96" />
</div>
</div>
<div class=" my-12 ">
<div class=" w-11/12 mx-auto">
<p class="text-4xl font-black text-start pb-4 lg:text-6xl sm:text-center">Making a difference</p>
<p class="text-zinc-500 font-bold text-start text-lg pb-4 sm:text-center ">Here is a handful of the many success stories.
</p>
</div >
<div class="md:grid md:grid-cols-3 md:grid-rows-1 w-11/12 mx-auto">
<div class="shadow-lg shadow-slate-500 rounded-3xl mx-3 my-4 w-11/12">
<img src="images/b.jpg" alt="error loading image" title="image" class="rounded-2xl w-full">
<p class="font-extrabold px-5 py-2 ">LIVE darshan of Char Dham </p>
<p class="text-gray-500 px-5 py-2 text-sm">Online broadcast of aarti, LIVE telecast of Char Dham and more with Jio 4G.</p>
<button class="text-blue-700 mx-4 font-bold hover:bg-blue-300 px-4 py-2 mb-6 rounded-3xl">Find out more</button>
</div>
<div class="shadow-lg shadow-slate-500 rounded-3xl mx-3 my-4 w-11/12">
<img src="images/n.jpg" alt="error loading image" title="image" class="rounded-2xl w-full">
<p class="font-extrabold px-5 py-2 ">Expanding 4G network in Kerala </p>
<p class="text-gray-500 px-5 py-2 text-sm">Jio enhances connectivity across 40 towns in Kerala</p>
<button class="text-blue-700 mx-4 font-bold hover:bg-blue-300 px-4 py-2 mb-6 rounded-3xl">Know more</button>
</div>
<div class="shadow-lg shadow-slate-500 rounded-3xl mx-3 my-4 w-11/12">
<img src="images/m.jpg" alt="error loading image" title="image" class="rounded-2xl w-full">
<p class="font-extrabold px-5 py-2 ">LIVE telecast of three melas of Punjab </p>
<p class="text-gray-500 px-5 py-2 text-sm">Digitising Shaheedi Jor Mela, Hola Mohalla, and Maghi Mela with Jio 4G.</p>
<button class="text-blue-700 mx-4 font-bold hover:bg-blue-300 px-4 py-2 mb-6 rounded-3xl">Explore</button>
</div>
</div>
</div>
<center>
<button class="text-blue-700 font-bold text-center px-5 py-2 rounded-3xl border-2 border-solid border-slate-200 w-11/12 mt-3 hover:border-slate-600 sm:w-max ">View all </button>
</center>
<div class="w-11/12 mx-auto bg-blue-700 rounded-2xl shadow-slate-700 shadow-lg md:grid md:grid-rows-1 md:grid-cols-2 my-12">
<div class="md:row-start-1 md:col-start-2">
<img src="images/x.png" alt="error loading image " title="ladies" class="w-full h-full" />
</div>
<div class="px-5 py-10 flex flex-col xl:px-10 space-y-6 md:col-start-1">
<p class="text-white font-black text-4xl lg:text-6xl ">Create your opportunities with us</p>
<p class="text-indigo-200"> Join our mission to digitally transform India.</p>
<button class="bg-purple-100 text-blue-900 font-bold hover:bg-purple-300 px-6 py-2 rounded-3xl w-max">View job openings</button>
</div>
</div>
<div class="bg-indigo-300 mt-12 px-8 py-9">
<center>
<div class="grid grid-cols-2 items-center mx-auto space-x-3">
<img src="https://jep-asset.akamaized.net/jio/svg/logo/myjio-n.svg" alt="error loading-image " title="image" class="w-14 h-14 justify-self-end" />
<p class="text-black font-black text-2xl justify-self-start">MyJio</p>
</div>
<p class="font-black text-4xl w-3/4 md:w-1/2 md:text-6xl mt-4">One app for everything Jio</p>
<p class="text-gray-500 pt-6 text-lg lg:hidden">A super app packed with all the Jio services and exciting offers.</p>
<p class="text-gray-500 pt-6 text-lg hidden lg:block">Scan the QR code, download MyJio, and enjoy all the exciting Jio services in just one app.</p>
<button class="bg-blue-700 text-white rounded-3xl font-bold px-4 py-2 hover:bg-blue-800 my-6 lg:hidden">Get Now</button>
<img src="https://jep-asset.akamaized.net/jiostaticresources/v05/images/barcode-myjio-new.png" class="hidden w-40 my-6 h-40 rounded-lg lg:block" alt="error loading image" title="barcode" >
</center>
</div>
<div class="bg-blue-700 w-full h-max py-12 md:py-20">
<center>
<p class="text-white text-4xl font-black md:text-6xl ">Need guidance ?</p>
<p class="text-indigo-200 md:text-lg mt-4">We'd love to help you</p>
<div class="grid grid-col-1 grid-row-4 gap-3 sm:grid-cols-4 md:w-3/4 lg:w-1/2 mx-auto sm:grid-rows-1 mt-6 w-11/12 sm:flex-row">
<button class="border-[1px] px-6 py-3 text-indigo-300 border-solid border-indigo-300 hover:border-white rounded-3xl text-center text-lg font-bold "> <i class="fa-solid fa-circle-question"></i> Support </button>
<button class="border-[1px] px-6 py-3 text-indigo-300 border-solid border-indigo-300 hover:border-white rounded-3xl text-center text-lg font-bold "> <i class="fa-solid fa-comment-dots"></i> Chat with us </button>
<button class="border-[1px] px-6 py-3 text-indigo-300 border-solid border-indigo-300 hover:border-white rounded-3xl text-center text-lg font-bold "> <i class="fa-solid fa-phone"></i> Call us </button>
<button class="border-[1px] px-6 py-3 text-indigo-300 border-solid border-indigo-300 hover:border-white rounded-3xl text-center text-lg font-bold"> <i class="fa-solid fa-store"></i> Find a store </button>
</div>
</center>
</div>
<!-- FOOTER STARTS -1 -->
<div class="lg:hidden">
<div class="w-11/12 px-5 mx-auto pt-5 ">
<div class="border-b-2 border-gray-300 border-solid font-bold py-3 items-center flex justify-between">
Our offerings <i onclick="iconsyo5(this)" class="fa-solid fa-plus text-2xl text-blue-500 a cursor-pointer hover:bg-purple-100 px-2.5 py-2 rounded-full" id="i5" ></i>
</div>
<div class="px-8 s hidden menu">
<div class="font-sans font-semibold py-2">Mobile</div>
<div class="font-sans font-semibold py-2">Fiber</div>
<div class="font-sans font-semibold py-2">Business</div>
<div class="font-sans font-semibold py-2">Apps</div>
<div class="font-sans font-semibold py-2">Shop</div>
</div>
<div class="border-b-2 border-gray-300 border-solid font-bold py-3 flex justify-between items-center">
Support <i onclick="iconsyo6(this)" class="fa-solid fa-plus text-2xl text-blue-500 d cursor-pointer hover:bg-purple-100 px-2.5 py-2 rounded-full" id="i6"></i>
</div>
<div class="px-8 f hidden menu ">
<div class="py-2 font-sans font-semibold ">Explore Support</div>
<div class=" py-2 font-sans font-semibold">Locate us</div>
<div class=" py-2 font-sans font-semibold">FAQ</div>
<div class=" py-2 font-sans font-semibold">Track order</div>
<div class=" py-2 font-sans font-semibold"> Contact us</div>
</div>
<div class="border-b-2 border-gray-300 border-solid font-bold py-3 flex justify-between items-center">
our Company <i onclick="iconsyo7(this)" class="fa-solid fa-plus text-2xl text-blue-500 g cursor-pointer hover:bg-purple-100 px-2.5 py-2 rounded-full" id="i7"></i>
</div>
<div class="px-8 h hidden menu ">
<div class="py-2 font-sans font-semibold ">Reliance Industries</div>
<div class=" py-2 font-sans font-semibold">Reliance Foundation</div>
<div class=" py-2 font-sans font-semibold">JioLife</div>
<div class=" py-2 font-sans font-semibold">Careers</div>
<div class="py-2 font-sans font-semibold">Investor relations</div>
</div>
<div class="border-b-2 border-gray-300 border-solid font-bold py-3 flex justify-between items-center">
Useful Links<i onclick="iconsyo8(this)" class="fa-solid fa-plus text-2xl text-blue-500 j cursor-pointer hover:bg-purple-100 px-2.5 py-2 rounded-full" id="i8"></i>
</div>
<div class="px-8 k hidden menu ">
<div class="py-2 font-sans font-semibold ">Get Jio SIM</div>
<div class=" py-2 font-sans font-semibold">Get JioFiber </div>
<div class=" py-2 font-sans font-semibold">Recharge</div>
<div class=" py-2 font-sans font-semibold">Pay Bills</div>
<div class=" py-2 font-sans font-semibold">Login</div>
</div>
</div>
<div class="px-9 mt-7">
<p class="font-bold text-3xl text-start">Connect with us</p>
<div class="w-2/5 grid grid-cols-5 grid-rows-1 gap-16 lg:gap-0 lg:w-1/3 my-6 lg:hidden">
<i class="fa-brands fa-twitter text-lg text-white px-3 py-3 rounded-full bg-blue-700 hover:bg-blue-900 cursor-pointer"></i>
<i class="fa-brands fa-instagram text-lg text-white px-3.5 py-3 rounded-full bg-blue-700 hover:bg-blue-900 cursor-pointer"></i>
<i class="fa-brands fa-facebook-f text-lg text-white px-4 py-3 rounded-full bg-blue-700 hover:bg-blue-900 cursor-pointer"></i>
<i class="fa-brands fa-youtube text-lg text-white px-3 py-3 rounded-full bg-blue-700 hover:bg-blue-900 cursor-pointer"></i>
<i class="fa-brands fa-linkedin-in text-lg text-white px-3.5 py-3 rounded-full bg-blue-700 hover:bg-blue-900 cursor-pointer"></i>
</div>
<p class="font-bold text-3xl text-start ">Download MyJio</p>
<div class="flex flex-row space-x-5 mt-4">
<img src="https://jep-asset.akamaized.net/jio/svg/android-ios-logo/G-Play.svg" alt="error loading image" title="playstore" >
<img src="https://jep-asset.akamaized.net/jio/svg/android-ios-logo/AppStore.svg" alt="error loading image" title="appstore">
</div>
</div>
</div>
<div class=" hidden w-4/5 mx-auto my-12 lg:block lg:grid grid-cols-3 grid-rows-1 ">
<table class=" col-span-2 text-sm">
<thead>
<tr>
<th class="text-start text-lg font-black">our offerings</th>
<th class="text-start text-lg font-black">Support</th>
<th class="text-start text-lg font-black">our company</th>
<th class="text-start text-lg font-black">useful links</th>
</tr>
</thead>
<tbody>
<tr class="text-gray-600 ">
<td class="hover:bg-gray-200 px-4"><a href="#">Mobile</a></td>
<td class="hover:bg-gray-200 px-4"><a href="#">Explore Support</a></td>
<td class="hover:bg-gray-200 px-4"><a href="#">Reliance Industries</a></td>
<td class="hover:bg-gray-200 px-4"><a href="#">Get Jio SIM</a></td>
</tr>
<tr class="text-gray-600 ">
<td class="hover:bg-gray-200 px-4"><a href="#">Fiber</a></td>
<td class="hover:bg-gray-200 px-4"><a href="#">Locate us</a></td>
<td class="hover:bg-gray-200 px-4"><a href="#">Reliance Foundation</a></td>
<td class="hover:bg-gray-200 px-4"><a href="#">Get JioFiber</a></td>
</tr>
<tr class="text-gray-600 ">
<td class="hover:bg-gray-200 px-4"><a href="#">Business</a></td>
<td class="hover:bg-gray-200 px-4"><a href="#">FAQ</a></td>
<td class="hover:bg-gray-200 px-4"><a href="#">JioLife</a></td>
<td class="hover:bg-gray-200 px-4"><a href="#">Recharge</a></td>
</tr>
<tr class="text-gray-600 ">
<td class="hover:bg-gray-200 px-4"><a href="#">Apps</a></td>
<td class="hover:bg-gray-200 px-4"><a href="#">Track order</a></td>
<td class="hover:bg-gray-200 px-4"><a href="#">Careers</a></td>
<td class="hover:bg-gray-200 px-4"><a href="#">Pay Bills</a></td>
</tr>
<tr class="text-gray-600 ">
<td class="hover:bg-gray-200 px-4"><a href="#">Shop</a></td>
<td class="hover:bg-gray-200 px-4"><a href="#">Contact us</a></td>
<td class="hover:bg-gray-200 px-4"><a href="#">Investor relations</a></td>
<td class="hover:bg-gray-200 px-4"><a href="#">Login</a></td>
</tr>
</tbody>
</table>
<div class="px-9 mt-7">
<p class="font-bold text-3xl text-start">Connect with us</p>
<div class="w-3/4 grid grid-cols-5 grid-rows-1 gap-16 lg:gap-5 my-6 ">
<i class="fa-brands fa-twitter text-lg text-white px-3 py-3 rounded-full bg-blue-700 hover:bg-blue-900 cursor-pointer"></i>
<i class="fa-brands fa-instagram text-lg text-white px-3.5 py-3 rounded-full bg-blue-700 hover:bg-blue-900 cursor-pointer"></i>