-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
1444 lines (1341 loc) · 151 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>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<meta name="description" content="E-learning - Online Course Single Page HTML Template.Using HTMl CSS Javascript Tailwind css jquery" />
<title>E-learning - Online Course</title>
<!-- favicon -->
<link rel="icon" type="image/x-icon" href="./img/favicon-16x16.png">
<!-- <link rel="icon" type="image/x-icon" href="./img/favicon-16x16.png"> -->
<!-- <link rel="shortcut icon" type="image/jpg" href="./img/favicon-16x16.png" /> -->
<!-- favicon -->
<!-- css link -->
<link href="./public/plugins/css/animate.css" rel="stylesheet">
<link href="./public/plugins/css/swipper.css" rel="stylesheet">
<link href="./public/plugins/css/aos.css" rel="stylesheet">
<link href="./public/tailwind.css" rel="stylesheet">
<link href="./public/styles.css" rel="stylesheet">
<link href="./public/responsive.css" rel="stylesheet">
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- header area -->
<header id="header-sticky">
<div class="py-6 bg-white border-b border-gray-50">
<div class="container flex justify-between items-center px-4 sm:px-6 2xl:px-0">
<!-- logo -->
<div>
<a href="#">
<img src="./public/assets/img/logo.png" alt="">
</a>
</div>
<!-- logo -->
<!-- menu -->
<ul class="xl:flex items-center capitalize hidden">
<li class="">
<a class="menu-link font-display font-semibold text-base leading-6 text-primary-500 transition duration-500 px-6 py-3" href="#">home</a>
</li>
<li class="">
<a class="menu-link font-display font-semibold text-base leading-6 text-gray-500 hover:text-primary-500 transition duration-500 px-6 py-3" href="#about">about</a>
</li>
<li class="">
<a class="menu-link font-display font-semibold text-base leading-6 text-gray-500 hover:text-primary-500 transition duration-500 px-6 py-3" href="#workprocess">course</a>
</li>
<li class="">
<a class="menu-link font-display font-semibold text-base leading-6 text-gray-500 hover:text-primary-500 transition duration-500 px-6 py-3" href="#portfolio">blog</a>
</li>
<li class="">
<a class="menu-link font-display font-semibold text-base leading-6 text-gray-500 hover:text-primary-500 transition duration-500 px-6 py-3" href="#blog">contact</a>
</li>
</ul>
<!-- menu end -->
<!-- right menu -->
<div class="flex items-center gap-6">
<a href="" class="flex items-center gap-2 text-base font-display font-medium text-gray-500 hover:text-primary-500 transition duration-500">
<span class="flex justify-center items-center">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.5 8.25H4.5C4.08579 8.25 3.75 8.58579 3.75 9V19.5C3.75 19.9142 4.08579 20.25 4.5 20.25H19.5C19.9142 20.25 20.25 19.9142 20.25 19.5V9C20.25 8.58579 19.9142 8.25 19.5 8.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M8.625 8.25V4.875C8.625 3.97989 8.98058 3.12145 9.61351 2.48851C10.2465 1.85558 11.1049 1.5 12 1.5C12.8951 1.5 13.7535 1.85558 14.3865 2.48851C15.0194 3.12145 15.375 3.97989 15.375 4.875V8.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M12 15.375C12.6213 15.375 13.125 14.8713 13.125 14.25C13.125 13.6287 12.6213 13.125 12 13.125C11.3787 13.125 10.875 13.6287 10.875 14.25C10.875 14.8713 11.3787 15.375 12 15.375Z" fill="currentColor" />
</svg>
</span>
<span>Login</span>
</a>
<a href="#" class="hidden xl:inline-block btn-primary">
<span>Sign up for Free</span>
</a>
<div class="xl:hidden inline-block hamburger-btn" id="hamburger-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- right menu end -->
</div>
</div>
</header>
<!-- Mobile Menu Area Start -->
<div class="nav-menu" id="nav-menu">
<div class="flex justify-between items-center p-6 mb-8">
<div>
<a href="#">
<img src="./public/assets/img/logo.png" alt="">
</a>
</div>
<div>
<button class="hamburger-btn-close bg-[#F7F7F9] text-primary-900 hover:bg-primary-500 w-[44px] h-[44px] rounded-full flex items-center justify-center hover:text-white" id="hamburger-btn-close">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 1L1 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M1 1L11 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
</div>
</div>
<!-- menu -->
<ul class="flex flex-col capitalize px-6 mb-6">
<li class="mb-2">
<a class="nav-link inline-block font-display font-semibold text-base leading-6 text-gray-500 hover:text-primary-500 transition-all duration-500" href="#">home</a>
</li>
<li class="mb-2">
<a class="nav-link inline-block font-display font-semibold text-base leading-6 text-gray-500 hover:text-primary-500 transition-all duration-500" href="#about">about</a>
</li>
<li class="mb-2">
<a class="nav-link inline-block font-display font-semibold text-base leading-6 text-gray-500 hover:text-primary-500 transition-all duration-500" href="#workprocess">course</a>
</li>
<li class="mb-2">
<a class="nav-link inline-block font-display font-semibold text-base leading-6 text-gray-500 hover:text-primary-500 transition-all duration-500" href="#portfolio">blog</a>
</li>
<li class="">
<a class="nav-link inline-block font-display font-semibold text-base leading-6 text-gray-500 hover:text-primary-500 transition-all duration-500" href="#blog">contact</a>
</li>
</ul>
<div class="px-6 mb-8">
<a href="#" class="btn-primary">
<span>Sign up for Free</span>
</a>
</div>
</div>
<!-- Mobile Menu Area End -->
<div class="overlay" id="overlay"></div>
<!-- header area end -->
<!-- banner area -->
<section class="bg-white relative">
<!-- svg icon start -->
<span class="absolute animate-bounce left-[240px] top-[102px] hidden 2xl:inline-block">
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.5046 24.6797L16.8046 32.0063C16.7247 32.2216 16.5808 32.4073 16.3923 32.5384C16.2038 32.6695 15.9796 32.7398 15.75 32.7398C15.5203 32.7398 15.2962 32.6695 15.1076 32.5384C14.9191 32.4073 14.7752 32.2216 14.6953 32.0063L11.9953 24.6797C11.9383 24.5251 11.8484 24.3846 11.7319 24.2681C11.6154 24.1516 11.4749 24.0617 11.3203 24.0047L3.99371 21.3047C3.77841 21.2248 3.59273 21.0809 3.4616 20.8924C3.33048 20.7038 3.26019 20.4797 3.26019 20.25C3.26019 20.0204 3.33048 19.7962 3.4616 19.6077C3.59273 19.4191 3.77841 19.2752 3.99371 19.1953L11.3203 16.4953C11.4749 16.4384 11.6154 16.3485 11.7319 16.232C11.8484 16.1154 11.9383 15.975 11.9953 15.8203L14.6953 8.49377C14.7752 8.27847 14.9191 8.09279 15.1076 7.96166C15.2962 7.83054 15.5203 7.76025 15.75 7.76025C15.9796 7.76025 16.2038 7.83054 16.3923 7.96166C16.5808 8.09279 16.7247 8.27847 16.8046 8.49377L19.5046 15.8203C19.5616 15.975 19.6515 16.1154 19.768 16.232C19.8846 16.3485 20.025 16.4384 20.1796 16.4953L27.5062 19.1953C27.7215 19.2752 27.9072 19.4191 28.0383 19.6077C28.1694 19.7962 28.2397 20.0204 28.2397 20.25C28.2397 20.4797 28.1694 20.7038 28.0383 20.8924C27.9072 21.0809 27.7215 21.2248 27.5062 21.3047L20.1796 24.0047C20.025 24.0617 19.8846 24.1516 19.768 24.2681C19.6515 24.3846 19.5616 24.5251 19.5046 24.6797Z" fill="#1A906B" />
<path d="M24.75 2.25V9" stroke="#1A906B" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" />
<path d="M28.125 5.625H21.375" stroke="#1A906B" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" />
<path d="M31.5 10.125V14.625" stroke="#1A906B" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" />
<path d="M33.75 12.375H29.25" stroke="#1A906B" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<span class="absolute animate-pulse left-[752px] top-[160px] hidden 2xl:inline-block">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="6" cy="6" r="6" fill="#6D39E9" />
</svg>
</span>
<span class="absolute animate-spin right-[926px] top-[120px] hidden 2xl:inline-block">
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.991 29.4259L29.5453 40.3888C29.5087 40.6523 29.3925 40.8983 29.212 41.0937C29.0316 41.2892 28.7957 41.4248 28.5359 41.4822C28.2762 41.5396 28.0051 41.5162 27.7591 41.4151C27.5131 41.3139 27.3039 41.1399 27.1596 40.9164L21.2258 31.5856C21.1226 31.4249 20.9859 31.2886 20.8249 31.1859C20.664 31.0833 20.4827 31.0168 20.2935 30.991L9.33059 29.5453C9.06711 29.5088 8.82111 29.3925 8.62566 29.2121C8.4302 29.0316 8.29465 28.7957 8.2372 28.536C8.17976 28.2762 8.20318 28.0051 8.30432 27.7591C8.40546 27.5131 8.57948 27.3039 8.80298 27.1597L18.1338 21.2258C18.2945 21.1227 18.4308 20.9859 18.5335 20.825C18.6361 20.664 18.7026 20.4827 18.7284 20.2936L20.1741 9.33062C20.2106 9.06714 20.3269 8.82114 20.5073 8.62569C20.6878 8.43023 20.9237 8.29468 21.1834 8.23723C21.4432 8.17979 21.7143 8.20321 21.9603 8.30435C22.2063 8.40549 22.4155 8.5795 22.5597 8.80301L28.4936 18.1339C28.5967 18.2945 28.7335 18.4309 28.8944 18.5335C29.0554 18.6362 29.2367 18.7027 29.4258 18.7284L40.3888 20.1741C40.6523 20.2107 40.8983 20.3269 41.0937 20.5074C41.2892 20.6878 41.4247 20.9237 41.4822 21.1835C41.5396 21.4432 41.5162 21.7143 41.415 21.9603C41.3139 22.2063 41.1399 22.4155 40.9164 22.5598L31.5855 28.4936C31.4249 28.5968 31.2885 28.7335 31.1859 28.8945C31.0832 29.0554 31.0167 29.2367 30.991 29.4259V29.4259Z" fill="#FFC27A" />
</svg>
</span>
<span class="absolute animate-ping right-[21.35%] top-[24px] hidden 2xl:inline-block">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="7.5" r="7.5" fill="#FFC27A" />
</svg>
</span>
<span class="absolute animate-ping left-[34px] top-[548px] hidden 2xl:inline-block">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="5" cy="5" r="5" fill="#ED4459" />
</svg>
</span>
<span class="absolute animate-bounce bottom-[131px] right-[649px] hidden 2xl:inline-block">
<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.5" cy="8.02197" r="7.5" fill="#6D39E9" />
</svg>
</span>
<!-- svg icon end -->
<!-- banner wrapper start -->
<div class="banner-wrapper pb-8 xl:pb-[180px]">
<div class="container px-4 sm:px-6 2xl:px-0">
<div class="flex flex-wrap justify-center 2xl:justify-between">
<!-- left -->
<div class="2xl:pt-[150px] pt-5">
<div class="2xl:w-[677px] w-full">
<h2 class="font-display text-primary-500 font-semibold 2xl:text-2xl md:text-lg text-sm pb-2 2xl:pb-6" data-aos="fade-down" data-aos-duration="1000">START TO SUCCESS
</h2>
<h1 class="capitalize mb-4 lg:mb-6 font-display font-semibold md:text-3xl text-2xl 2xl:text-[56px] 2xl:leading-[72px] text-primary-900" data-aos="fade-down" data-aos-duration="1000">
Access To <span class="text-primary-500 after-svg banner_5000">5000+</span> Courses
from <span class="text-primary-500 after-svg banner_300">300</span> Instructors
& Institutions
</h1>
<p class="text-gray-500 font-normal font-display lg:text-[20px] md:text-base text-sm lg:leading-7 mb-8 pt-4 xl:pt-0" data-aos="fade-down" data-aos-duration="1000">Various versions have
evolved over the years, sometimes by accident,</p>
<form action="" data-aos="fade-down" data-aos-duration="1000">
<div class="flex justify-between items-center ">
<div class="relative w-full xl:max-w-[648px]">
<input type="text" class="px-6 py-6 block w-full shadow-[-4px_-4px_44px_rgba(0,0,0,0.08)] rounded focus:outline-none focus:ring-1 focus:ring-primary-500 transition duration-300 ease-in-out" placeholder="What do want to learn?">
<span class="absolute top-6 right-6">
<svg class="" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.875 18.75C15.2242 18.75 18.75 15.2242 18.75 10.875C18.75 6.52576 15.2242 3 10.875 3C6.52576 3 3 6.52576 3 10.875C3 15.2242 6.52576 18.75 10.875 18.75Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M16.4437 16.4437L21 21" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</div>
</div>
</form>
</div>
</div>
<!-- left -->
<!-- right -->
<div class="mt-5 2xl:mt-[156px] relative">
<div class="2xl:absolute 2xl:right-[-20%] 2xl:top-[-17%] 2xl:h-[444px] 2xl:w-[623px] w-full z-20">
<img src="./public/assets/img/banner_img.png" alt="" class="">
</div>
<div class="bg-white xl:px-5 xl:w-[197px] md:px-3 px-2 xl:py-[18px] md:py-2.5 py-1.5 rounded-lg shadow-2xl flex items-center md:gap-3 gap-2 xl:max-w-[197px] absolute z-50 xl:right-[-90px] right-[10px] xl:top-[73%] top-3/4">
<span>
<svg width="44" height="45" viewBox="0 0 44 45" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect y="0.521973" width="44" height="44" rx="6" fill="#E9F8F3" />
<path d="M22.4125 28.4001L27.1375 31.4001C27.7469 31.7845 28.4969 31.2126 28.3187 30.5095L26.95 25.1282C26.913 24.9791 26.9189 24.8225 26.967 24.6765C27.0151 24.5306 27.1034 24.4012 27.2219 24.3032L31.4594 20.7688C32.0125 20.3095 31.7312 19.3813 31.0094 19.3345L25.4781 18.9782C25.3272 18.9694 25.1821 18.9169 25.0606 18.827C24.939 18.7371 24.8463 18.6137 24.7937 18.472L22.7312 13.2782C22.6767 13.1281 22.5772 12.9985 22.4464 12.9069C22.3156 12.8152 22.1597 12.7661 22 12.7661C21.8403 12.7661 21.6844 12.8152 21.5536 12.9069C21.4228 12.9985 21.3233 13.1281 21.2687 13.2782L19.2062 18.472C19.1537 18.6137 19.061 18.7371 18.9394 18.827C18.8179 18.9169 18.6728 18.9694 18.5219 18.9782L12.9906 19.3345C12.2687 19.3813 11.9875 20.3095 12.5406 20.7688L16.7781 24.3032C16.8966 24.4012 16.9849 24.5306 17.033 24.6765C17.0811 24.8225 17.087 24.9791 17.05 25.1282L15.7844 30.1157C15.5687 30.9595 16.4687 31.6438 17.1906 31.1845L21.5875 28.4001C21.7108 28.3217 21.8539 28.2801 22 28.2801C22.1461 28.2801 22.2892 28.3217 22.4125 28.4001Z" fill="#20B486" stroke="#20B486" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<span class="text-xl text-gray-600">5.0 Rating</span>
</div>
<span class="2xl:absolute 2xl:top-[55px] 2xl:right-[-90px] z-10 animate-pulse hidden 2xl:inline-block">
<svg width="133" height="123" viewBox="0 0 133 123" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M129.565 3.0665C122.861 35.2321 103.672 88.7725 80.5502 45.6094C51.6481 -8.34447 46.9199 63.7019 44.5824 95.5299C44.7666 93.6398 41.0855 165.407 3.60982 68.6392" stroke="#FFC27A" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</div>
<!-- right -->
</div>
</div>
</div>
<!-- banner wrapper end -->
</section>
<!-- banner area end -->
<!-- course area start -->
<section class="section-padding course-section bg-primary-50/70">
<div class="container px-4 sm:px-6 xl:px-0">
<div class="xl:flex items-center">
<div class="xl:w-1/4">
<h2 class="capitalize font-display font-semibold text-2xl xl:text-[56px] xl:leading-[72px] text-primary-900">
Most <span class="text-primary-500 after-svg popular">Popular</span> Course
</h2>
</div>
<div class="2xl:w-3/4">
<div class="swiper courseSwipper relative">
<div class="swiper-wrapper py-4 2xl:pr-[29.3%]">
<!-- course item -->
<div class="swiper-slide">
<div class="course-card ">
<div class="bg-gray-white rounded-xl">
<div class="course-content px-4 py-4 ">
<div class="overflow-hidden rounded-lg inline-block relative">
<a href="#" class="inline-block">
<img src="./public/assets/img/1.png" alt="" class="w-full h-full relative z-10">
</a>
<p class="absolute top-[7px] left-2 z-20 badge text-base text-gray-black px-[13px] py-[6px] rounded-md bg-white/60 ml-2 mt-2">HTML</p>
</div>
<h4 class="font-display text-gray-700 text-[20px] leading-7 font-medium mt-4 hover:text-primary-500 transition duration-300 ease-linear">
<a href="#">Various versions have</a>
</h4>
<div class="flex gap-3 mt-4">
<ul class="flex gap-2 items-center">
<li>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.3437 14.8985L14.2812 17.3985C14.7891 17.7188 15.4141 17.2422 15.2656 16.6563L14.125 12.1719C14.0942 12.0476 14.0991 11.9171 14.1391 11.7955C14.1792 11.6738 14.2529 11.566 14.3516 11.4844L17.8828 8.53908C18.3437 8.15627 18.1094 7.38283 17.5078 7.34377L12.8984 7.04689C12.7727 7.03958 12.6518 6.99578 12.5505 6.92086C12.4492 6.84594 12.3719 6.74314 12.3281 6.62502L10.6094 2.29689C10.5639 2.17182 10.481 2.06377 10.372 1.98742C10.263 1.91107 10.1331 1.87012 10 1.87012C9.8669 1.87012 9.73703 1.91107 9.62802 1.98742C9.519 2.06377 9.43612 2.17182 9.39062 2.29689L7.67187 6.62502C7.62807 6.74314 7.5508 6.84594 7.44952 6.92086C7.34824 6.99578 7.22733 7.03958 7.10156 7.04689L2.49218 7.34377C1.89062 7.38283 1.65625 8.15627 2.11718 8.53908L5.64843 11.4844C5.74713 11.566 5.82077 11.6738 5.86085 11.7955C5.90094 11.9171 5.90584 12.0476 5.875 12.1719L4.82031 16.3281C4.64062 17.0313 5.39062 17.6016 5.99218 17.2188L9.65625 14.8985C9.75899 14.8331 9.87823 14.7984 10 14.7984C10.1218 14.7984 10.241 14.8331 10.3437 14.8985V14.8985Z" fill="#FFC27A" />
</svg>
</li>
<li>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.3437 14.8985L14.2812 17.3985C14.7891 17.7188 15.4141 17.2422 15.2656 16.6563L14.125 12.1719C14.0942 12.0476 14.0991 11.9171 14.1391 11.7955C14.1792 11.6738 14.2529 11.566 14.3516 11.4844L17.8828 8.53908C18.3437 8.15627 18.1094 7.38283 17.5078 7.34377L12.8984 7.04689C12.7727 7.03958 12.6518 6.99578 12.5505 6.92086C12.4492 6.84594 12.3719 6.74314 12.3281 6.62502L10.6094 2.29689C10.5639 2.17182 10.481 2.06377 10.372 1.98742C10.263 1.91107 10.1331 1.87012 10 1.87012C9.8669 1.87012 9.73703 1.91107 9.62802 1.98742C9.519 2.06377 9.43612 2.17182 9.39062 2.29689L7.67187 6.62502C7.62807 6.74314 7.5508 6.84594 7.44952 6.92086C7.34824 6.99578 7.22733 7.03958 7.10156 7.04689L2.49218 7.34377C1.89062 7.38283 1.65625 8.15627 2.11718 8.53908L5.64843 11.4844C5.74713 11.566 5.82077 11.6738 5.86085 11.7955C5.90094 11.9171 5.90584 12.0476 5.875 12.1719L4.82031 16.3281C4.64062 17.0313 5.39062 17.6016 5.99218 17.2188L9.65625 14.8985C9.75899 14.8331 9.87823 14.7984 10 14.7984C10.1218 14.7984 10.241 14.8331 10.3437 14.8985V14.8985Z" fill="#FFC27A" />
</svg>
</li>
<li>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.3437 14.8985L14.2812 17.3985C14.7891 17.7188 15.4141 17.2422 15.2656 16.6563L14.125 12.1719C14.0942 12.0476 14.0991 11.9171 14.1391 11.7955C14.1792 11.6738 14.2529 11.566 14.3516 11.4844L17.8828 8.53908C18.3437 8.15627 18.1094 7.38283 17.5078 7.34377L12.8984 7.04689C12.7727 7.03958 12.6518 6.99578 12.5505 6.92086C12.4492 6.84594 12.3719 6.74314 12.3281 6.62502L10.6094 2.29689C10.5639 2.17182 10.481 2.06377 10.372 1.98742C10.263 1.91107 10.1331 1.87012 10 1.87012C9.8669 1.87012 9.73703 1.91107 9.62802 1.98742C9.519 2.06377 9.43612 2.17182 9.39062 2.29689L7.67187 6.62502C7.62807 6.74314 7.5508 6.84594 7.44952 6.92086C7.34824 6.99578 7.22733 7.03958 7.10156 7.04689L2.49218 7.34377C1.89062 7.38283 1.65625 8.15627 2.11718 8.53908L5.64843 11.4844C5.74713 11.566 5.82077 11.6738 5.86085 11.7955C5.90094 11.9171 5.90584 12.0476 5.875 12.1719L4.82031 16.3281C4.64062 17.0313 5.39062 17.6016 5.99218 17.2188L9.65625 14.8985C9.75899 14.8331 9.87823 14.7984 10 14.7984C10.1218 14.7984 10.241 14.8331 10.3437 14.8985V14.8985Z" fill="#FFC27A" />
</svg>
</li>
<li>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.3437 14.8985L14.2812 17.3985C14.7891 17.7188 15.4141 17.2422 15.2656 16.6563L14.125 12.1719C14.0942 12.0476 14.0991 11.9171 14.1391 11.7955C14.1792 11.6738 14.2529 11.566 14.3516 11.4844L17.8828 8.53908C18.3437 8.15627 18.1094 7.38283 17.5078 7.34377L12.8984 7.04689C12.7727 7.03958 12.6518 6.99578 12.5505 6.92086C12.4492 6.84594 12.3719 6.74314 12.3281 6.62502L10.6094 2.29689C10.5639 2.17182 10.481 2.06377 10.372 1.98742C10.263 1.91107 10.1331 1.87012 10 1.87012C9.8669 1.87012 9.73703 1.91107 9.62802 1.98742C9.519 2.06377 9.43612 2.17182 9.39062 2.29689L7.67187 6.62502C7.62807 6.74314 7.5508 6.84594 7.44952 6.92086C7.34824 6.99578 7.22733 7.03958 7.10156 7.04689L2.49218 7.34377C1.89062 7.38283 1.65625 8.15627 2.11718 8.53908L5.64843 11.4844C5.74713 11.566 5.82077 11.6738 5.86085 11.7955C5.90094 11.9171 5.90584 12.0476 5.875 12.1719L4.82031 16.3281C4.64062 17.0313 5.39062 17.6016 5.99218 17.2188L9.65625 14.8985C9.75899 14.8331 9.87823 14.7984 10 14.7984C10.1218 14.7984 10.241 14.8331 10.3437 14.8985V14.8985Z" fill="#FFC27A" />
</svg>
</li>
<li class="">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.3437 14.8985L14.2812 17.3985C14.7891 17.7188 15.4141 17.2422 15.2656 16.6563L14.125 12.1719C14.0942 12.0476 14.0991 11.9171 14.1391 11.7955C14.1792 11.6738 14.2529 11.566 14.3516 11.4844L17.8828 8.53908C18.3437 8.15627 18.1094 7.38283 17.5078 7.34377L12.8984 7.04689C12.7727 7.03958 12.6518 6.99578 12.5505 6.92086C12.4492 6.84594 12.3719 6.74314 12.3281 6.62502L10.6094 2.29689C10.5639 2.17182 10.481 2.06377 10.372 1.98742C10.263 1.91107 10.1331 1.87012 10 1.87012C9.8669 1.87012 9.73703 1.91107 9.62802 1.98742C9.519 2.06377 9.43612 2.17182 9.39062 2.29689L7.67187 6.62502C7.62807 6.74314 7.5508 6.84594 7.44952 6.92086C7.34824 6.99578 7.22733 7.03958 7.10156 7.04689L2.49218 7.34377C1.89062 7.38283 1.65625 8.15627 2.11718 8.53908L5.64843 11.4844C5.74713 11.566 5.82077 11.6738 5.86085 11.7955C5.90094 11.9171 5.90584 12.0476 5.875 12.1719L4.82031 16.3281C4.64062 17.0313 5.39062 17.6016 5.99218 17.2188L9.65625 14.8985C9.75899 14.8331 9.87823 14.7984 10 14.7984C10.1218 14.7984 10.241 14.8331 10.3437 14.8985V14.8985Z" fill="#FFC27A" />
</svg>
</li>
</ul>
<p>( 15 )</p>
</div>
</div>
<div class="border-b border-gray-50 h-1 w-full"></div>
<div class="course-info px-4 py-4">
<div class="flex justify-between items-center">
<h4 class="text-gray-black font-semibold font-display text-2xl">$ 500</h4>
<a href="#" class="link bg-gray-white px-[10px] py-[10px] rounded-[8px] shadow-[0px_3px_12px_rgba(75,75,75,0.08)]">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 18L18 6" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M8.25 6H18V15.75" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- course item end -->
<!-- course item -->
<div class="swiper-slide">
<div class="course-card ">
<div class="bg-gray-white rounded-xl">
<div class="course-content px-4 py-4">
<div class="overflow-hidden rounded-lg inline-block relative">
<a href="#" class="inline-block overflow-hidden">
<img src="./public/assets/img/2.png" alt="" class="w-full h-full relative">
</a>
<p class="absolute top-[7px] left-2 z-20 badge text-base text-gray-black px-[13px] py-[6px] rounded-md bg-white/60 ml-2 mt-2">Design</p>
</div>
<h4 class="font-display text-gray-700 text-[20px] leading-7 font-medium mt-4 hover:text-primary-500 transition duration-300 ease-linear">
<a href="#">Various versions have</a>
</h4>
<div class="flex gap-3 mt-4">
<ul class="flex gap-2 items-center">
<li>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.3437 14.8985L14.2812 17.3985C14.7891 17.7188 15.4141 17.2422 15.2656 16.6563L14.125 12.1719C14.0942 12.0476 14.0991 11.9171 14.1391 11.7955C14.1792 11.6738 14.2529 11.566 14.3516 11.4844L17.8828 8.53908C18.3437 8.15627 18.1094 7.38283 17.5078 7.34377L12.8984 7.04689C12.7727 7.03958 12.6518 6.99578 12.5505 6.92086C12.4492 6.84594 12.3719 6.74314 12.3281 6.62502L10.6094 2.29689C10.5639 2.17182 10.481 2.06377 10.372 1.98742C10.263 1.91107 10.1331 1.87012 10 1.87012C9.8669 1.87012 9.73703 1.91107 9.62802 1.98742C9.519 2.06377 9.43612 2.17182 9.39062 2.29689L7.67187 6.62502C7.62807 6.74314 7.5508 6.84594 7.44952 6.92086C7.34824 6.99578 7.22733 7.03958 7.10156 7.04689L2.49218 7.34377C1.89062 7.38283 1.65625 8.15627 2.11718 8.53908L5.64843 11.4844C5.74713 11.566 5.82077 11.6738 5.86085 11.7955C5.90094 11.9171 5.90584 12.0476 5.875 12.1719L4.82031 16.3281C4.64062 17.0313 5.39062 17.6016 5.99218 17.2188L9.65625 14.8985C9.75899 14.8331 9.87823 14.7984 10 14.7984C10.1218 14.7984 10.241 14.8331 10.3437 14.8985V14.8985Z" fill="#FFC27A" />
</svg>
</li>
<li>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.3437 14.8985L14.2812 17.3985C14.7891 17.7188 15.4141 17.2422 15.2656 16.6563L14.125 12.1719C14.0942 12.0476 14.0991 11.9171 14.1391 11.7955C14.1792 11.6738 14.2529 11.566 14.3516 11.4844L17.8828 8.53908C18.3437 8.15627 18.1094 7.38283 17.5078 7.34377L12.8984 7.04689C12.7727 7.03958 12.6518 6.99578 12.5505 6.92086C12.4492 6.84594 12.3719 6.74314 12.3281 6.62502L10.6094 2.29689C10.5639 2.17182 10.481 2.06377 10.372 1.98742C10.263 1.91107 10.1331 1.87012 10 1.87012C9.8669 1.87012 9.73703 1.91107 9.62802 1.98742C9.519 2.06377 9.43612 2.17182 9.39062 2.29689L7.67187 6.62502C7.62807 6.74314 7.5508 6.84594 7.44952 6.92086C7.34824 6.99578 7.22733 7.03958 7.10156 7.04689L2.49218 7.34377C1.89062 7.38283 1.65625 8.15627 2.11718 8.53908L5.64843 11.4844C5.74713 11.566 5.82077 11.6738 5.86085 11.7955C5.90094 11.9171 5.90584 12.0476 5.875 12.1719L4.82031 16.3281C4.64062 17.0313 5.39062 17.6016 5.99218 17.2188L9.65625 14.8985C9.75899 14.8331 9.87823 14.7984 10 14.7984C10.1218 14.7984 10.241 14.8331 10.3437 14.8985V14.8985Z" fill="#FFC27A" />
</svg>
</li>
<li>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.3437 14.8985L14.2812 17.3985C14.7891 17.7188 15.4141 17.2422 15.2656 16.6563L14.125 12.1719C14.0942 12.0476 14.0991 11.9171 14.1391 11.7955C14.1792 11.6738 14.2529 11.566 14.3516 11.4844L17.8828 8.53908C18.3437 8.15627 18.1094 7.38283 17.5078 7.34377L12.8984 7.04689C12.7727 7.03958 12.6518 6.99578 12.5505 6.92086C12.4492 6.84594 12.3719 6.74314 12.3281 6.62502L10.6094 2.29689C10.5639 2.17182 10.481 2.06377 10.372 1.98742C10.263 1.91107 10.1331 1.87012 10 1.87012C9.8669 1.87012 9.73703 1.91107 9.62802 1.98742C9.519 2.06377 9.43612 2.17182 9.39062 2.29689L7.67187 6.62502C7.62807 6.74314 7.5508 6.84594 7.44952 6.92086C7.34824 6.99578 7.22733 7.03958 7.10156 7.04689L2.49218 7.34377C1.89062 7.38283 1.65625 8.15627 2.11718 8.53908L5.64843 11.4844C5.74713 11.566 5.82077 11.6738 5.86085 11.7955C5.90094 11.9171 5.90584 12.0476 5.875 12.1719L4.82031 16.3281C4.64062 17.0313 5.39062 17.6016 5.99218 17.2188L9.65625 14.8985C9.75899 14.8331 9.87823 14.7984 10 14.7984C10.1218 14.7984 10.241 14.8331 10.3437 14.8985V14.8985Z" fill="#FFC27A" />
</svg>
</li>
<li>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.3437 14.8985L14.2812 17.3985C14.7891 17.7188 15.4141 17.2422 15.2656 16.6563L14.125 12.1719C14.0942 12.0476 14.0991 11.9171 14.1391 11.7955C14.1792 11.6738 14.2529 11.566 14.3516 11.4844L17.8828 8.53908C18.3437 8.15627 18.1094 7.38283 17.5078 7.34377L12.8984 7.04689C12.7727 7.03958 12.6518 6.99578 12.5505 6.92086C12.4492 6.84594 12.3719 6.74314 12.3281 6.62502L10.6094 2.29689C10.5639 2.17182 10.481 2.06377 10.372 1.98742C10.263 1.91107 10.1331 1.87012 10 1.87012C9.8669 1.87012 9.73703 1.91107 9.62802 1.98742C9.519 2.06377 9.43612 2.17182 9.39062 2.29689L7.67187 6.62502C7.62807 6.74314 7.5508 6.84594 7.44952 6.92086C7.34824 6.99578 7.22733 7.03958 7.10156 7.04689L2.49218 7.34377C1.89062 7.38283 1.65625 8.15627 2.11718 8.53908L5.64843 11.4844C5.74713 11.566 5.82077 11.6738 5.86085 11.7955C5.90094 11.9171 5.90584 12.0476 5.875 12.1719L4.82031 16.3281C4.64062 17.0313 5.39062 17.6016 5.99218 17.2188L9.65625 14.8985C9.75899 14.8331 9.87823 14.7984 10 14.7984C10.1218 14.7984 10.241 14.8331 10.3437 14.8985V14.8985Z" fill="#FFC27A" />
</svg>
</li>
<li class="">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.3437 14.8985L14.2812 17.3985C14.7891 17.7188 15.4141 17.2422 15.2656 16.6563L14.125 12.1719C14.0942 12.0476 14.0991 11.9171 14.1391 11.7955C14.1792 11.6738 14.2529 11.566 14.3516 11.4844L17.8828 8.53908C18.3437 8.15627 18.1094 7.38283 17.5078 7.34377L12.8984 7.04689C12.7727 7.03958 12.6518 6.99578 12.5505 6.92086C12.4492 6.84594 12.3719 6.74314 12.3281 6.62502L10.6094 2.29689C10.5639 2.17182 10.481 2.06377 10.372 1.98742C10.263 1.91107 10.1331 1.87012 10 1.87012C9.8669 1.87012 9.73703 1.91107 9.62802 1.98742C9.519 2.06377 9.43612 2.17182 9.39062 2.29689L7.67187 6.62502C7.62807 6.74314 7.5508 6.84594 7.44952 6.92086C7.34824 6.99578 7.22733 7.03958 7.10156 7.04689L2.49218 7.34377C1.89062 7.38283 1.65625 8.15627 2.11718 8.53908L5.64843 11.4844C5.74713 11.566 5.82077 11.6738 5.86085 11.7955C5.90094 11.9171 5.90584 12.0476 5.875 12.1719L4.82031 16.3281C4.64062 17.0313 5.39062 17.6016 5.99218 17.2188L9.65625 14.8985C9.75899 14.8331 9.87823 14.7984 10 14.7984C10.1218 14.7984 10.241 14.8331 10.3437 14.8985V14.8985Z" fill="#FFC27A" />
</svg>
</li>
</ul>
<p>( 15 )</p>
</div>
</div>
<div class="border-b border-gray-50 h-1 w-full"></div>
<div class="course-info px-4 py-4">
<div class="flex justify-between items-center">
<h4 class="text-gray-black font-semibold font-display text-2xl">$ 500</h4>
<a href="#" class="link bg-gray-white px-[10px] py-[10px] rounded-[8px] shadow-[0px_3px_12px_rgba(75,75,75,0.08)]">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 18L18 6" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M8.25 6H18V15.75" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- course item end -->
<!-- course item -->
<div class="swiper-slide">
<div class="course-card ">
<div class="bg-gray-white rounded-xl">
<div class="course-content px-4 py-4">
<div class="overflow-hidden rounded-lg inline-block relative">
<a href="#" class="inline-block">
<img src="./public/assets/img/3.png" alt="" class="w-full h-full relative">
</a>
<p class="absolute top-[7px] left-2 z-20 badge text-base text-gray-black px-[13px] py-[6px] rounded-md bg-white/60 ml-2 mt-2">Business</p>
</div>
<h4 class="font-display text-gray-700 text-[20px] leading-7 font-medium mt-4 hover:text-primary-500 transition duration-300 ease-linear">
<a href="#">Various versions have</a>
</h4>
<div class="flex gap-3 mt-4">
<ul class="flex gap-2 items-center">
<li>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.3437 14.8985L14.2812 17.3985C14.7891 17.7188 15.4141 17.2422 15.2656 16.6563L14.125 12.1719C14.0942 12.0476 14.0991 11.9171 14.1391 11.7955C14.1792 11.6738 14.2529 11.566 14.3516 11.4844L17.8828 8.53908C18.3437 8.15627 18.1094 7.38283 17.5078 7.34377L12.8984 7.04689C12.7727 7.03958 12.6518 6.99578 12.5505 6.92086C12.4492 6.84594 12.3719 6.74314 12.3281 6.62502L10.6094 2.29689C10.5639 2.17182 10.481 2.06377 10.372 1.98742C10.263 1.91107 10.1331 1.87012 10 1.87012C9.8669 1.87012 9.73703 1.91107 9.62802 1.98742C9.519 2.06377 9.43612 2.17182 9.39062 2.29689L7.67187 6.62502C7.62807 6.74314 7.5508 6.84594 7.44952 6.92086C7.34824 6.99578 7.22733 7.03958 7.10156 7.04689L2.49218 7.34377C1.89062 7.38283 1.65625 8.15627 2.11718 8.53908L5.64843 11.4844C5.74713 11.566 5.82077 11.6738 5.86085 11.7955C5.90094 11.9171 5.90584 12.0476 5.875 12.1719L4.82031 16.3281C4.64062 17.0313 5.39062 17.6016 5.99218 17.2188L9.65625 14.8985C9.75899 14.8331 9.87823 14.7984 10 14.7984C10.1218 14.7984 10.241 14.8331 10.3437 14.8985V14.8985Z" fill="#FFC27A" />
</svg>
</li>
<li>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.3437 14.8985L14.2812 17.3985C14.7891 17.7188 15.4141 17.2422 15.2656 16.6563L14.125 12.1719C14.0942 12.0476 14.0991 11.9171 14.1391 11.7955C14.1792 11.6738 14.2529 11.566 14.3516 11.4844L17.8828 8.53908C18.3437 8.15627 18.1094 7.38283 17.5078 7.34377L12.8984 7.04689C12.7727 7.03958 12.6518 6.99578 12.5505 6.92086C12.4492 6.84594 12.3719 6.74314 12.3281 6.62502L10.6094 2.29689C10.5639 2.17182 10.481 2.06377 10.372 1.98742C10.263 1.91107 10.1331 1.87012 10 1.87012C9.8669 1.87012 9.73703 1.91107 9.62802 1.98742C9.519 2.06377 9.43612 2.17182 9.39062 2.29689L7.67187 6.62502C7.62807 6.74314 7.5508 6.84594 7.44952 6.92086C7.34824 6.99578 7.22733 7.03958 7.10156 7.04689L2.49218 7.34377C1.89062 7.38283 1.65625 8.15627 2.11718 8.53908L5.64843 11.4844C5.74713 11.566 5.82077 11.6738 5.86085 11.7955C5.90094 11.9171 5.90584 12.0476 5.875 12.1719L4.82031 16.3281C4.64062 17.0313 5.39062 17.6016 5.99218 17.2188L9.65625 14.8985C9.75899 14.8331 9.87823 14.7984 10 14.7984C10.1218 14.7984 10.241 14.8331 10.3437 14.8985V14.8985Z" fill="#FFC27A" />
</svg>
</li>
<li>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.3437 14.8985L14.2812 17.3985C14.7891 17.7188 15.4141 17.2422 15.2656 16.6563L14.125 12.1719C14.0942 12.0476 14.0991 11.9171 14.1391 11.7955C14.1792 11.6738 14.2529 11.566 14.3516 11.4844L17.8828 8.53908C18.3437 8.15627 18.1094 7.38283 17.5078 7.34377L12.8984 7.04689C12.7727 7.03958 12.6518 6.99578 12.5505 6.92086C12.4492 6.84594 12.3719 6.74314 12.3281 6.62502L10.6094 2.29689C10.5639 2.17182 10.481 2.06377 10.372 1.98742C10.263 1.91107 10.1331 1.87012 10 1.87012C9.8669 1.87012 9.73703 1.91107 9.62802 1.98742C9.519 2.06377 9.43612 2.17182 9.39062 2.29689L7.67187 6.62502C7.62807 6.74314 7.5508 6.84594 7.44952 6.92086C7.34824 6.99578 7.22733 7.03958 7.10156 7.04689L2.49218 7.34377C1.89062 7.38283 1.65625 8.15627 2.11718 8.53908L5.64843 11.4844C5.74713 11.566 5.82077 11.6738 5.86085 11.7955C5.90094 11.9171 5.90584 12.0476 5.875 12.1719L4.82031 16.3281C4.64062 17.0313 5.39062 17.6016 5.99218 17.2188L9.65625 14.8985C9.75899 14.8331 9.87823 14.7984 10 14.7984C10.1218 14.7984 10.241 14.8331 10.3437 14.8985V14.8985Z" fill="#FFC27A" />
</svg>
</li>
<li>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.3437 14.8985L14.2812 17.3985C14.7891 17.7188 15.4141 17.2422 15.2656 16.6563L14.125 12.1719C14.0942 12.0476 14.0991 11.9171 14.1391 11.7955C14.1792 11.6738 14.2529 11.566 14.3516 11.4844L17.8828 8.53908C18.3437 8.15627 18.1094 7.38283 17.5078 7.34377L12.8984 7.04689C12.7727 7.03958 12.6518 6.99578 12.5505 6.92086C12.4492 6.84594 12.3719 6.74314 12.3281 6.62502L10.6094 2.29689C10.5639 2.17182 10.481 2.06377 10.372 1.98742C10.263 1.91107 10.1331 1.87012 10 1.87012C9.8669 1.87012 9.73703 1.91107 9.62802 1.98742C9.519 2.06377 9.43612 2.17182 9.39062 2.29689L7.67187 6.62502C7.62807 6.74314 7.5508 6.84594 7.44952 6.92086C7.34824 6.99578 7.22733 7.03958 7.10156 7.04689L2.49218 7.34377C1.89062 7.38283 1.65625 8.15627 2.11718 8.53908L5.64843 11.4844C5.74713 11.566 5.82077 11.6738 5.86085 11.7955C5.90094 11.9171 5.90584 12.0476 5.875 12.1719L4.82031 16.3281C4.64062 17.0313 5.39062 17.6016 5.99218 17.2188L9.65625 14.8985C9.75899 14.8331 9.87823 14.7984 10 14.7984C10.1218 14.7984 10.241 14.8331 10.3437 14.8985V14.8985Z" fill="#FFC27A" />
</svg>
</li>
<li class="">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.3437 14.8985L14.2812 17.3985C14.7891 17.7188 15.4141 17.2422 15.2656 16.6563L14.125 12.1719C14.0942 12.0476 14.0991 11.9171 14.1391 11.7955C14.1792 11.6738 14.2529 11.566 14.3516 11.4844L17.8828 8.53908C18.3437 8.15627 18.1094 7.38283 17.5078 7.34377L12.8984 7.04689C12.7727 7.03958 12.6518 6.99578 12.5505 6.92086C12.4492 6.84594 12.3719 6.74314 12.3281 6.62502L10.6094 2.29689C10.5639 2.17182 10.481 2.06377 10.372 1.98742C10.263 1.91107 10.1331 1.87012 10 1.87012C9.8669 1.87012 9.73703 1.91107 9.62802 1.98742C9.519 2.06377 9.43612 2.17182 9.39062 2.29689L7.67187 6.62502C7.62807 6.74314 7.5508 6.84594 7.44952 6.92086C7.34824 6.99578 7.22733 7.03958 7.10156 7.04689L2.49218 7.34377C1.89062 7.38283 1.65625 8.15627 2.11718 8.53908L5.64843 11.4844C5.74713 11.566 5.82077 11.6738 5.86085 11.7955C5.90094 11.9171 5.90584 12.0476 5.875 12.1719L4.82031 16.3281C4.64062 17.0313 5.39062 17.6016 5.99218 17.2188L9.65625 14.8985C9.75899 14.8331 9.87823 14.7984 10 14.7984C10.1218 14.7984 10.241 14.8331 10.3437 14.8985V14.8985Z" fill="#FFC27A" />
</svg>
</li>
</ul>
<p>( 15 )</p>
</div>
</div>
<div class="border-b border-gray-50 h-1 w-full"></div>
<div class="course-info px-4 py-4">
<div class="flex justify-between items-center">
<h4 class="text-gray-black font-semibold font-display text-2xl">$ 500</h4>
<a href="#" class="link bg-gray-white px-[10px] py-[10px] rounded-[8px] shadow-[0px_3px_12px_rgba(75,75,75,0.08)]">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 18L18 6" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M8.25 6H18V15.75" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- course item end -->
<!-- course item -->
<div class="swiper-slide">
<div class="course-card ">
<div class="bg-gray-white rounded-xl">
<div class="course-content px-4 py-4">
<div class="overflow-hidden rounded-lg inline-block relative">
<a href="#" class="inline-block">
<img src="./public/assets/img/4.png" alt="" class="w-full h-full relative">
</a>
<p class="absolute top-[7px] left-2 z-20 badge text-base text-gray-black px-[13px] py-[6px] rounded-md bg-white/60 ml-2 mt-2">Social Media</p>
</div>
<h4 class="font-display text-gray-700 text-[20px] leading-7 font-medium mt-4 hover:text-primary-500 transition duration-300 ease-linear">
<a href="#">Various versions have</a>
</h4>
<div class="flex gap-3 mt-4">
<ul class="flex gap-2 items-center">
<li>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.3437 14.8985L14.2812 17.3985C14.7891 17.7188 15.4141 17.2422 15.2656 16.6563L14.125 12.1719C14.0942 12.0476 14.0991 11.9171 14.1391 11.7955C14.1792 11.6738 14.2529 11.566 14.3516 11.4844L17.8828 8.53908C18.3437 8.15627 18.1094 7.38283 17.5078 7.34377L12.8984 7.04689C12.7727 7.03958 12.6518 6.99578 12.5505 6.92086C12.4492 6.84594 12.3719 6.74314 12.3281 6.62502L10.6094 2.29689C10.5639 2.17182 10.481 2.06377 10.372 1.98742C10.263 1.91107 10.1331 1.87012 10 1.87012C9.8669 1.87012 9.73703 1.91107 9.62802 1.98742C9.519 2.06377 9.43612 2.17182 9.39062 2.29689L7.67187 6.62502C7.62807 6.74314 7.5508 6.84594 7.44952 6.92086C7.34824 6.99578 7.22733 7.03958 7.10156 7.04689L2.49218 7.34377C1.89062 7.38283 1.65625 8.15627 2.11718 8.53908L5.64843 11.4844C5.74713 11.566 5.82077 11.6738 5.86085 11.7955C5.90094 11.9171 5.90584 12.0476 5.875 12.1719L4.82031 16.3281C4.64062 17.0313 5.39062 17.6016 5.99218 17.2188L9.65625 14.8985C9.75899 14.8331 9.87823 14.7984 10 14.7984C10.1218 14.7984 10.241 14.8331 10.3437 14.8985V14.8985Z" fill="#FFC27A" />
</svg>
</li>
<li>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.3437 14.8985L14.2812 17.3985C14.7891 17.7188 15.4141 17.2422 15.2656 16.6563L14.125 12.1719C14.0942 12.0476 14.0991 11.9171 14.1391 11.7955C14.1792 11.6738 14.2529 11.566 14.3516 11.4844L17.8828 8.53908C18.3437 8.15627 18.1094 7.38283 17.5078 7.34377L12.8984 7.04689C12.7727 7.03958 12.6518 6.99578 12.5505 6.92086C12.4492 6.84594 12.3719 6.74314 12.3281 6.62502L10.6094 2.29689C10.5639 2.17182 10.481 2.06377 10.372 1.98742C10.263 1.91107 10.1331 1.87012 10 1.87012C9.8669 1.87012 9.73703 1.91107 9.62802 1.98742C9.519 2.06377 9.43612 2.17182 9.39062 2.29689L7.67187 6.62502C7.62807 6.74314 7.5508 6.84594 7.44952 6.92086C7.34824 6.99578 7.22733 7.03958 7.10156 7.04689L2.49218 7.34377C1.89062 7.38283 1.65625 8.15627 2.11718 8.53908L5.64843 11.4844C5.74713 11.566 5.82077 11.6738 5.86085 11.7955C5.90094 11.9171 5.90584 12.0476 5.875 12.1719L4.82031 16.3281C4.64062 17.0313 5.39062 17.6016 5.99218 17.2188L9.65625 14.8985C9.75899 14.8331 9.87823 14.7984 10 14.7984C10.1218 14.7984 10.241 14.8331 10.3437 14.8985V14.8985Z" fill="#FFC27A" />
</svg>
</li>
<li>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.3437 14.8985L14.2812 17.3985C14.7891 17.7188 15.4141 17.2422 15.2656 16.6563L14.125 12.1719C14.0942 12.0476 14.0991 11.9171 14.1391 11.7955C14.1792 11.6738 14.2529 11.566 14.3516 11.4844L17.8828 8.53908C18.3437 8.15627 18.1094 7.38283 17.5078 7.34377L12.8984 7.04689C12.7727 7.03958 12.6518 6.99578 12.5505 6.92086C12.4492 6.84594 12.3719 6.74314 12.3281 6.62502L10.6094 2.29689C10.5639 2.17182 10.481 2.06377 10.372 1.98742C10.263 1.91107 10.1331 1.87012 10 1.87012C9.8669 1.87012 9.73703 1.91107 9.62802 1.98742C9.519 2.06377 9.43612 2.17182 9.39062 2.29689L7.67187 6.62502C7.62807 6.74314 7.5508 6.84594 7.44952 6.92086C7.34824 6.99578 7.22733 7.03958 7.10156 7.04689L2.49218 7.34377C1.89062 7.38283 1.65625 8.15627 2.11718 8.53908L5.64843 11.4844C5.74713 11.566 5.82077 11.6738 5.86085 11.7955C5.90094 11.9171 5.90584 12.0476 5.875 12.1719L4.82031 16.3281C4.64062 17.0313 5.39062 17.6016 5.99218 17.2188L9.65625 14.8985C9.75899 14.8331 9.87823 14.7984 10 14.7984C10.1218 14.7984 10.241 14.8331 10.3437 14.8985V14.8985Z" fill="#FFC27A" />
</svg>
</li>
<li>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.3437 14.8985L14.2812 17.3985C14.7891 17.7188 15.4141 17.2422 15.2656 16.6563L14.125 12.1719C14.0942 12.0476 14.0991 11.9171 14.1391 11.7955C14.1792 11.6738 14.2529 11.566 14.3516 11.4844L17.8828 8.53908C18.3437 8.15627 18.1094 7.38283 17.5078 7.34377L12.8984 7.04689C12.7727 7.03958 12.6518 6.99578 12.5505 6.92086C12.4492 6.84594 12.3719 6.74314 12.3281 6.62502L10.6094 2.29689C10.5639 2.17182 10.481 2.06377 10.372 1.98742C10.263 1.91107 10.1331 1.87012 10 1.87012C9.8669 1.87012 9.73703 1.91107 9.62802 1.98742C9.519 2.06377 9.43612 2.17182 9.39062 2.29689L7.67187 6.62502C7.62807 6.74314 7.5508 6.84594 7.44952 6.92086C7.34824 6.99578 7.22733 7.03958 7.10156 7.04689L2.49218 7.34377C1.89062 7.38283 1.65625 8.15627 2.11718 8.53908L5.64843 11.4844C5.74713 11.566 5.82077 11.6738 5.86085 11.7955C5.90094 11.9171 5.90584 12.0476 5.875 12.1719L4.82031 16.3281C4.64062 17.0313 5.39062 17.6016 5.99218 17.2188L9.65625 14.8985C9.75899 14.8331 9.87823 14.7984 10 14.7984C10.1218 14.7984 10.241 14.8331 10.3437 14.8985V14.8985Z" fill="#FFC27A" />
</svg>
</li>
<li class="">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.3437 14.8985L14.2812 17.3985C14.7891 17.7188 15.4141 17.2422 15.2656 16.6563L14.125 12.1719C14.0942 12.0476 14.0991 11.9171 14.1391 11.7955C14.1792 11.6738 14.2529 11.566 14.3516 11.4844L17.8828 8.53908C18.3437 8.15627 18.1094 7.38283 17.5078 7.34377L12.8984 7.04689C12.7727 7.03958 12.6518 6.99578 12.5505 6.92086C12.4492 6.84594 12.3719 6.74314 12.3281 6.62502L10.6094 2.29689C10.5639 2.17182 10.481 2.06377 10.372 1.98742C10.263 1.91107 10.1331 1.87012 10 1.87012C9.8669 1.87012 9.73703 1.91107 9.62802 1.98742C9.519 2.06377 9.43612 2.17182 9.39062 2.29689L7.67187 6.62502C7.62807 6.74314 7.5508 6.84594 7.44952 6.92086C7.34824 6.99578 7.22733 7.03958 7.10156 7.04689L2.49218 7.34377C1.89062 7.38283 1.65625 8.15627 2.11718 8.53908L5.64843 11.4844C5.74713 11.566 5.82077 11.6738 5.86085 11.7955C5.90094 11.9171 5.90584 12.0476 5.875 12.1719L4.82031 16.3281C4.64062 17.0313 5.39062 17.6016 5.99218 17.2188L9.65625 14.8985C9.75899 14.8331 9.87823 14.7984 10 14.7984C10.1218 14.7984 10.241 14.8331 10.3437 14.8985V14.8985Z" fill="#FFC27A" />
</svg>
</li>
</ul>
<p>( 15 )</p>
</div>
</div>
<div class="border-b border-gray-50 h-1 w-full"></div>
<div class="course-info px-4 py-4">
<div class="flex justify-between items-center">
<h4 class="text-gray-black font-semibold font-display text-2xl">$ 500</h4>
<a href="#" class="link bg-gray-white px-[10px] py-[10px] rounded-[8px] shadow-[0px_3px_12px_rgba(75,75,75,0.08)]">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 18L18 6" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M8.25 6H18V15.75" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- course item end -->
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
</section>
<!-- course area end -->
<!-- popular category area start -->
<section class="section-padding bg-gray-white">
<div class="container px-4 sm:px-6 2xl:px-0">
<div class="pt-8 xl:pt-0">
<h2 class="capitalize font-display font-semibold xl:text-[40px] xl:leading-[48px] md:text-3xl text-2xl text-primary-900 inline-block mb-4">
Most <span class="text-primary-500 after-svg popular"> Popular Categorys</span>
</h2>
<p class="text-gray-500 font-display xl:text-[20px] leading-7">Various versions have
evolved over the years, sometimes by accident,</p>
</div>
<div class="flex justify-center flex-wrap gap-6 mt-4 xl:mt-[50px] w-full">
<!-- item -->
<div data-aos="fade-down" data-aos-duration="1000">
<div class="category-card px-6 py-4 rounded-lg shadow-[0px_3px_12px_rgba(75,75,75,0.08)] w-[312px] transition-all relative duration-300">
<div class="category-item flex justify-between items-center">
<div class="category-item-left flex items-center gap-4">
<span class="left-icon transition-all relative duration-300">
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.2188 23.75C18.8583 23.75 20.1875 22.4208 20.1875 20.7812C20.1875 19.1417 18.8583 17.8125 17.2188 17.8125C15.5792 17.8125 14.25 19.1417 14.25 20.7812C14.25 22.4208 15.5792 23.75 17.2188 23.75Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M4.75 33.25L15.1258 22.8743" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M4.75 33.25L25.457 29.8063C25.6614 29.7714 25.8529 29.6829 26.0119 29.55C26.171 29.417 26.292 29.2442 26.3625 29.0492L29.6875 20.1875L17.8125 8.3125L8.95078 11.6375C8.7555 11.7119 8.58298 11.8359 8.45023 11.9973C8.31748 12.1587 8.22908 12.3519 8.19375 12.5578L4.75 33.25Z" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M29.6875 20.1875L33.5914 16.2836C33.7036 16.1731 33.7927 16.0414 33.8535 15.8961C33.9143 15.7509 33.9457 15.595 33.9457 15.4375C33.9457 15.28 33.9143 15.1241 33.8535 14.9789C33.7927 14.8336 33.7036 14.7019 33.5914 14.5914L23.4086 4.40859C23.2981 4.29638 23.1664 4.20728 23.0211 4.14646C22.8759 4.08564 22.72 4.05432 22.5625 4.05432C22.405 4.05432 22.2491 4.08564 22.1039 4.14646C21.9586 4.20728 21.8269 4.29638 21.7164 4.40859L17.8125 8.31249" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<a href="#">Design</a>
</div>
<div class="category-item-right">
<a href="#" class="right-icon bg-gray-white rounded-[8px] text-primary-500 inline-block transition-all relative duration-300">
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="44" height="44" rx="8" fill="none" />
<path d="M16 28L28 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M18.25 16H28V25.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</div>
</div>
</div>
<!-- item end-->
<!-- item -->
<div data-aos="fade-down" data-aos-duration="1000">
<div class="category-card px-6 py-4 rounded-lg shadow-[0px_3px_12px_rgba(75,75,75,0.08)] w-[312px] transition-all relative duration-300">
<div class="category-item flex justify-between items-center">
<div class="category-item-left flex items-center gap-4">
<span class="left-icon transition-all relative duration-300">
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.8125 26.125H13.0625" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M15.4375 32.0625V26.125" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M5.34375 26.125V32.0625" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M9.5 26.125V32.0625" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M5.34375 29.0938H9.5" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M31.4688 26.125V32.0625H35.0312" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M21.375 32.0625V26.125L24.3438 30.2812L27.3125 26.125V32.0625" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M7.125 20.1875V5.9375C7.125 5.62256 7.25011 5.32051 7.47281 5.09781C7.69551 4.87511 7.99756 4.75 8.3125 4.75H22.5625L30.875 13.0625V20.1875" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M22.5625 4.75V13.0625H30.875" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<a href="#">Development</a>
</div>
<div class="category-item-right">
<a href="#" class="right-icon bg-gray-white rounded-[8px] text-primary-500 inline-block transition-all relative duration-300">
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="44" height="44" rx="8" fill="none" />
<path d="M16 28L28 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M18.25 16H28V25.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</div>
</div>
</div>
<!-- item end-->
<!-- item -->
<div data-aos="fade-down" data-aos-duration="1000">
<div class="category-card px-6 py-4 rounded-lg shadow-[0px_3px_12px_rgba(75,75,75,0.08)] w-[312px] transition-all relative duration-300">
<div class="category-item flex justify-between items-center">
<div class="category-item-left flex items-center gap-4">
<span class="left-icon transition-all relative duration-300">
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24.9375 22.5625C30.1842 22.5625 34.4375 18.3092 34.4375 13.0625C34.4375 7.81579 30.1842 3.5625 24.9375 3.5625C19.6908 3.5625 15.4375 7.81579 15.4375 13.0625C15.4375 18.3092 19.6908 22.5625 24.9375 22.5625Z" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M31.6617 19.7867L18.2133 6.33826" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M14.8438 23.1562L13.0625 24.9375" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M15.5563 14.532L4.17109 30.0585C3.99995 30.2864 3.91762 30.5687 3.93947 30.8528C3.96133 31.1369 4.08587 31.4033 4.28984 31.6023L6.39766 33.7101C6.59662 33.9141 6.86305 34.0386 7.14715 34.0605C7.43125 34.0823 7.71359 34 7.94141 33.8289L23.468 22.4437" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<a href="#">Marketing</a>
</div>
<div class="category-item-right">
<a href="#" class="right-icon bg-gray-white rounded-[8px] text-primary-500 inline-block transition-all relative duration-300">
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="44" height="44" rx="8" fill="none" />
<path d="M16 28L28 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M18.25 16H28V25.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</div>
</div>
</div>
<!-- item end-->
<!-- item -->
<div data-aos="fade-down" data-aos-duration="1000">
<div class="category-card px-6 py-4 rounded-lg shadow-[0px_3px_12px_rgba(75,75,75,0.08)] w-[312px] transition-all relative duration-300">
<div class="category-item flex justify-between items-center">
<div class="category-item-left flex items-center gap-4">
<span class="left-icon transition-all relative duration-300">
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M32.0625 10.6875H5.9375C5.28166 10.6875 4.75 11.2192 4.75 11.875V30.875C4.75 31.5308 5.28166 32.0625 5.9375 32.0625H32.0625C32.7183 32.0625 33.25 31.5308 33.25 30.875V11.875C33.25 11.2192 32.7183 10.6875 32.0625 10.6875Z" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M24.9375 10.6875V8.3125C24.9375 7.68261 24.6873 7.07852 24.2419 6.63312C23.7965 6.18772 23.1924 5.9375 22.5625 5.9375H15.4375C14.8076 5.9375 14.2035 6.18772 13.7581 6.63312C13.3127 7.07852 13.0625 7.68261 13.0625 8.3125V10.6875" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M33.25 18.7477C28.919 21.2525 24.0031 22.5685 19 22.5625C13.9959 22.5755 9.07825 21.259 4.75 18.7477" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M17.2188 17.8125H20.7812" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<a href="#">Business</a>
</div>
<div class="category-item-right">
<a href="#" class="right-icon bg-gray-white rounded-[8px] text-primary-500 inline-block transition-all relative duration-300">
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="44" height="44" rx="8" fill="none" />
<path d="M16 28L28 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M18.25 16H28V25.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</div>
</div>
</div>
<!-- item end-->
<!-- item -->
<div data-aos="fade-down" data-aos-duration="1000">
<div class="category-card px-6 py-4 rounded-lg shadow-[0px_3px_12px_rgba(75,75,75,0.08)] w-[312px] transition-all relative duration-300">
<div class="category-item flex justify-between items-center">
<div class="category-item-left flex items-center gap-4">
<span class="left-icon transition-all relative duration-300">
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.775 8.75781L12.632 6.01172" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M6.38281 16.1501L3.63672 15.0071" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M31.6172 16.1501L34.3633 15.0071" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M24.225 8.75781L25.3679 6.01172" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M35.625 23.75H2.375" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M30.875 29.6875H7.125" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M10.4203 23.75C10.0518 22.4268 9.99429 21.0364 10.2523 19.6873C10.5103 18.3383 11.0769 17.0672 11.9076 15.9734C12.7384 14.8796 13.8109 13.9928 15.0412 13.3823C16.2716 12.7718 17.6265 12.4541 19 12.4541C20.3735 12.4541 21.7284 12.7718 22.9588 13.3823C24.1891 13.9928 25.2616 14.8796 26.0924 15.9734C26.9232 17.0672 27.4897 18.3383 27.7477 19.6873C28.0057 21.0364 27.9482 22.4268 27.5797 23.75" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<a href="#">Lifestyle</a>
</div>
<div class="category-item-right">
<a href="#" class="right-icon bg-gray-white rounded-[8px] text-primary-500 inline-block transition-all relative duration-300">
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="44" height="44" rx="8" fill="none" />
<path d="M16 28L28 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M18.25 16H28V25.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</div>
</div>
</div>
<!-- item end-->
<!-- item -->
<div data-aos="fade-down" data-aos-duration="1000">
<div class="category-card px-6 py-4 rounded-lg shadow-[0px_3px_12px_rgba(75,75,75,0.08)] w-[312px] transition-all relative duration-300">
<div class="category-item flex justify-between items-center">
<div class="category-item-left flex items-center gap-4">
<span class="left-icon transition-all relative duration-300">
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.875 30.875H7.125C6.49511 30.875 5.89102 30.6248 5.44562 30.1794C5.00022 29.734 4.75 29.1299 4.75 28.5V11.875C4.75 11.2451 5.00022 10.641 5.44562 10.1956C5.89102 9.75022 6.49511 9.5 7.125 9.5H11.875L14.25 5.9375H23.75L26.125 9.5H30.875C31.5049 9.5 32.109 9.75022 32.5544 10.1956C32.9998 10.641 33.25 11.2451 33.25 11.875V28.5C33.25 29.1299 32.9998 29.734 32.5544 30.1794C32.109 30.6248 31.5049 30.875 30.875 30.875Z" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M19 24.9375C21.9513 24.9375 24.3438 22.545 24.3438 19.5938C24.3438 16.6425 21.9513 14.25 19 14.25C16.0487 14.25 13.6562 16.6425 13.6562 19.5938C13.6562 22.545 16.0487 24.9375 19 24.9375Z" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<a href="#">Photography</a>
</div>
<div class="category-item-right">
<a href="#" class="right-icon bg-gray-white rounded-[8px] text-primary-500 inline-block transition-all relative duration-300">
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="44" height="44" rx="8" fill="none" />
<path d="M16 28L28 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M18.25 16H28V25.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</div>
</div>
</div>
<!-- item end-->
<!-- item -->
<div data-aos="fade-down" data-aos-duration="1000">
<div class="category-card px-6 py-4 rounded-lg shadow-[0px_3px_12px_rgba(75,75,75,0.08)] w-[312px] transition-all relative duration-300">
<div class="category-item flex justify-between items-center">
<div class="category-item-left flex items-center gap-4">
<span class="left-icon transition-all relative duration-300">
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.0625 33.25C16.3417 33.25 19 30.5917 19 27.3125C19 24.0333 16.3417 21.375 13.0625 21.375C9.78331 21.375 7.125 24.0333 7.125 27.3125C7.125 30.5917 9.78331 33.25 13.0625 33.25Z" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M19 27.3125V5.9375L30.875 9.5V16.625L19 13.0625" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<a href="#">Music</a>
</div>
<div class="category-item-right">
<a href="#" class="right-icon bg-gray-white rounded-[8px] text-primary-500 inline-block transition-all relative duration-300">
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="44" height="44" rx="8" fill="none" />
<path d="M16 28L28 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M18.25 16H28V25.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</div>
</div>
</div>
<!-- item end-->
<!-- item -->
<div data-aos="fade-down" data-aos-duration="1000">
<div class="category-card px-6 py-4 rounded-lg shadow-[0px_3px_12px_rgba(75,75,75,0.08)] w-[312px] transition-all relative duration-300">
<div class="category-item flex justify-between items-center">
<div class="category-item-left flex items-center gap-4">
<span class="left-icon transition-all relative duration-300">
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 19C26.2142 19 32.0625 15.81 32.0625 11.875C32.0625 7.93997 26.2142 4.75 19 4.75C11.7858 4.75 5.9375 7.93997 5.9375 11.875C5.9375 15.81 11.7858 19 19 19Z" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M5.9375 11.875V19C5.9375 22.9336 11.7859 26.125 19 26.125C26.2141 26.125 32.0625 22.9336 32.0625 19V11.875" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M5.9375 19V26.125C5.9375 30.0586 11.7859 33.25 19 33.25C26.2141 33.25 32.0625 30.0586 32.0625 26.125V19" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<a href="#">Data Science</a>
</div>
<div class="category-item-right">
<a href="#" class="right-icon bg-gray-white rounded-[8px] text-primary-500 inline-block transition-all relative duration-300">
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="44" height="44" rx="8" fill="none" />
<path d="M16 28L28 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M18.25 16H28V25.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</div>
</div>
</div>
<!-- item end -->
<!-- item -->
<div data-aos="fade-down" data-aos-duration="1000">
<div class="category-card px-6 py-4 rounded-lg shadow-[0px_3px_12px_rgba(75,75,75,0.08)] w-[312px] transition-all relative duration-300">
<div class="category-item flex justify-between items-center">
<div class="category-item-left flex items-center gap-4">
<span class="left-icon transition-all relative duration-300">
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.0625 34.4375H24.9375" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M11.682 24.7891C10.2683 23.6899 9.1233 22.2833 8.33376 20.6759C7.54423 19.0685 7.13087 17.3026 7.125 15.5118C7.09532 9.06957 12.2758 3.71098 18.718 3.56254C21.2112 3.50344 23.6598 4.23081 25.7164 5.64151C27.7731 7.0522 29.3334 9.0746 30.176 11.4219C31.0187 13.7692 31.1009 16.3222 30.4111 18.7188C29.7213 21.1155 28.2944 23.2341 26.3328 24.7743C25.8995 25.1092 25.5485 25.5388 25.3067 26.0302C25.0648 26.5216 24.9386 27.0617 24.9375 27.6094V28.5C24.9375 28.815 24.8124 29.117 24.5897 29.3397C24.367 29.5624 24.0649 29.6875 23.75 29.6875H14.25C13.9351 29.6875 13.633 29.5624 13.4103 29.3397C13.1876 29.117 13.0625 28.815 13.0625 28.5V27.6094C13.0588 27.0659 12.9328 26.5301 12.6938 26.0419C12.4548 25.5537 12.109 25.1255 11.682 24.7891V24.7891Z" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M20.2023 8.43127C21.6537 8.67731 22.993 9.36777 24.0352 10.4074C25.0775 11.447 25.7713 12.7844 26.0211 14.2352" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<a href="#">Personal Develop</a>
</div>
<div class="category-item-right">
<a href="#" class="right-icon bg-gray-white rounded-[8px] text-primary-500 inline-block transition-all relative duration-300">
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="44" height="44" rx="8" fill="none" />
<path d="M16 28L28 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M18.25 16H28V25.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</div>
</div>
</div>
<!-- item end-->
<!-- item -->
<div data-aos="fade-down" data-aos-duration="1000">
<div class="category-card px-6 py-4 rounded-lg shadow-[0px_3px_12px_rgba(75,75,75,0.08)] w-[312px] transition-all relative duration-300">
<div class="category-item flex justify-between items-center">
<div class="category-item-left flex items-center gap-4">
<span class="left-icon transition-all relative duration-300">
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.75 19H10.6875L13.0625 15.4375L17.8125 22.5625L20.1875 19H23.75" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M4.17109 14.25C4.15625 14.057 4.15625 13.8492 4.15625 13.6563C4.15625 11.8719 4.77448 10.1426 5.90577 8.76266C7.03705 7.38272 8.61149 6.43735 10.3612 6.0874C12.111 5.73746 13.9279 6.00455 15.5029 6.84323C17.0779 7.68192 18.3137 9.04039 19 10.6875V10.6875C19.6863 9.04039 20.9221 7.68192 22.4971 6.84323C24.0721 6.00455 25.889 5.73746 27.6388 6.0874C29.3885 6.43735 30.963 7.38272 32.0942 8.76266C33.2255 10.1426 33.8438 11.8719 33.8438 13.6563C33.8438 23.75 19 32.0625 19 32.0625C19 32.0625 13.0773 28.7375 8.71328 23.75" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<a href="#">Helth & Fitness</a>
</div>
<div class="category-item-right">
<a href="#" class="right-icon bg-gray-white rounded-[8px] text-primary-500 inline-block transition-all relative duration-300">
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="44" height="44" rx="8" fill="none" />
<path d="M16 28L28 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M18.25 16H28V25.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</div>
</div>
</div>
<!-- item end-->
<!-- item -->
<div data-aos="fade-down" data-aos-duration="1000">
<div class="category-card px-6 py-4 rounded-lg shadow-[0px_3px_12px_rgba(75,75,75,0.08)] w-[312px] transition-all relative duration-300">
<div class="category-item flex justify-between items-center">
<div class="category-item-left flex items-center gap-4">
<span class="left-icon transition-all relative duration-300">
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 22.5625C20.9675 22.5625 22.5625 20.9675 22.5625 19C22.5625 17.0325 20.9675 15.4375 19 15.4375C17.0325 15.4375 15.4375 17.0325 15.4375 19C15.4375 20.9675 17.0325 22.5625 19 22.5625Z" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M14.25 11.875C16.2175 11.875 17.8125 10.28 17.8125 8.3125C17.8125 6.34499 16.2175 4.75 14.25 4.75C12.2825 4.75 10.6875 6.34499 10.6875 8.3125C10.6875 10.28 12.2825 11.875 14.25 11.875Z" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M29.6875 19C31.655 19 33.25 17.405 33.25 15.4375C33.25 13.47 31.655 11.875 29.6875 11.875C27.72 11.875 26.125 13.47 26.125 15.4375C26.125 17.405 27.72 19 29.6875 19Z" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M29.6875 30.875C31.655 30.875 33.25 29.28 33.25 27.3125C33.25 25.345 31.655 23.75 29.6875 23.75C27.72 23.75 26.125 25.345 26.125 27.3125C26.125 29.28 27.72 30.875 29.6875 30.875Z" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M8.3125 32.0625C10.28 32.0625 11.875 30.4675 11.875 28.5C11.875 26.5325 10.28 24.9375 8.3125 24.9375C6.34499 24.9375 4.75 26.5325 4.75 28.5C4.75 30.4675 6.34499 32.0625 8.3125 32.0625Z" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M17.5602 15.7492L15.6898 11.5632" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M26.3031 16.5657L22.3844 17.8719" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M26.882 25.1304L21.8055 21.182" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M16.343 21.3601L10.9695 26.1398" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<a href="#">Finance</a>
</div>
<div class="category-item-right">
<a href="#" class="right-icon bg-gray-white rounded-[8px] text-primary-500 inline-block transition-all relative duration-300">
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="44" height="44" rx="8" fill="none" />
<path d="M16 28L28 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M18.25 16H28V25.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</div>
</div>
</div>
<!-- item end-->
<!-- item -->
<div data-aos="fade-down" data-aos-duration="1000">
<div class="category-card px-6 py-4 rounded-lg shadow-[0px_3px_12px_rgba(75,75,75,0.08)] w-[312px] transition-all relative duration-300">
<div class="category-item flex justify-between items-center">
<div class="category-item-left flex items-center gap-4">
<span class="left-icon transition-all relative duration-300">
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.2812 30.875C13.5767 30.875 15.4375 29.0142 15.4375 26.7188C15.4375 24.4233 13.5767 22.5625 11.2812 22.5625C8.98582 22.5625 7.125 24.4233 7.125 26.7188C7.125 29.0142 8.98582 30.875 11.2812 30.875Z" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M26.7188 30.875C29.0142 30.875 30.875 29.0142 30.875 26.7188C30.875 24.4233 29.0142 22.5625 26.7188 22.5625C24.4233 22.5625 22.5625 24.4233 22.5625 26.7188C22.5625 29.0142 24.4233 30.875 26.7188 30.875Z" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M15.4375 26.7188H22.5625" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M1.1875 17.8125H36.8125" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M5.9375 17.8126L13.2555 7.36256C13.3657 7.20418 13.5129 7.07506 13.6843 6.98637C13.8557 6.89768 14.0461 6.85209 14.2391 6.85355C14.432 6.85501 14.6217 6.90348 14.7918 6.99476C14.9618 7.08603 15.107 7.21737 15.2148 7.3774L18.0055 11.5782C18.1134 11.7436 18.2608 11.8794 18.4345 11.9735C18.6081 12.0675 18.8025 12.1168 19 12.1168C19.1975 12.1168 19.3919 12.0675 19.5655 11.9735C19.7392 11.8794 19.8866 11.7436 19.9945 11.5782L22.7852 7.3774C22.893 7.21737 23.0382 7.08603 23.2082 6.99476C23.3783 6.90348 23.568 6.85501 23.7609 6.85355C23.9539 6.85209 24.1443 6.89768 24.3157 6.98637C24.4871 7.07506 24.6343 7.20418 24.7445 7.36256L32.0625 17.8126" stroke="#6D737A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<a href="#">Teaching</a>
</div>
<div class="category-item-right">
<a href="#" class="right-icon bg-gray-white rounded-[8px] text-primary-500 inline-block transition-all relative duration-300">
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="44" height="44" rx="8" fill="none" />
<path d="M16 28L28 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M18.25 16H28V25.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</div>
</div>
</div>
<!-- item end-->
</div>
</div>
</section>
<!-- popular category area end -->
<!-- intructor section start -->
<section class="section-padding instructor-section bg-secondary-50">
<div class="container px-4 2xl:px-0">
<h2 class="text-primary-900 xl:text-[40px] xl:leading-[48px] md:text-3xl text-2xl font-semibold font-display mb-4">Our Best <span class="text-primary-500 after-svg instructor">Instructor</span></h2>
<p class="text-gray-500 text-xl mb-0">Various versions have evolved over the years, sometimes by accident,</p>
</div>
<div class="slider-container mx-auto px-4 2xl:px-0">
<div class="swiper instructorSwipper relative">
<div class="swiper-wrapper 2xl:pr-[22%] lg:py-[50px] py-8">
<div class="swiper-slide">
<div class="p-4 bg-white shadow-sm rounded-2xl instructor-card">
<div class="mb-4 overflow-hidden rounded-lg w-full">
<a href="#"><img src="./public/images/instructor-01.png" alt="" class="w-full rounded-lg"></a>
</div>
<div>
<h2 class="mb-1.5 font-display text-xl text-gray-black text-center"><a href="#">Jacob Jones</a></h2>
<h4 class="mb-0 text-base font-display text-gray-500 text-center"><a href="#">UI-UX Design Expart</a></h4>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="p-4 bg-white shadow-sm rounded-2xl instructor-card">
<div class="mb-4 overflow-hidden rounded-lg">
<a href="#"><img src="./public/images/instructor-02.png" alt="" class="w-full rounded-lg"></a>
</div>
<div>
<h2 class="mb-1.5 font-display text-xl text-gray-black text-center"><a href="#">Jacob Jones</a></h2>
<h4 class="mb-0 text-base font-display text-gray-500 text-center"><a href="#">UI-UX Design Expart</a></h4>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="p-4 bg-white shadow-sm rounded-2xl instructor-card">
<div class="mb-4 overflow-hidden rounded-lg">
<a href="#"><img src="./public/images/instructor-03.png" alt="" class="w-full rounded-lg"></a>
</div>
<div>
<h2 class="mb-1.5 font-display text-xl text-gray-black text-center"><a href="#">Jacob Jones</a></h2>
<h4 class="mb-0 text-base font-display text-gray-500 text-center"><a href="#">UI-UX Design Expart</a></h4>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="p-4 bg-white shadow-sm rounded-2xl instructor-card">
<div class="mb-4 overflow-hidden rounded-lg">
<a href="#"><img src="./public/images/instructor-04.png" alt="" class="w-full rounded-lg"></a>
</div>
<div>
<h2 class="mb-1.5 font-display text-xl text-gray-black text-center"><a href="#">Jacob Jones</a></h2>
<h4 class="mb-0 text-base font-display text-gray-500 text-center"><a href="#">UI-UX Design Expart</a></h4>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="p-4 bg-white shadow-sm rounded-2xl instructor-card">
<div class="mb-4 overflow-hidden rounded-lg">
<a href="#"><img src="./public/images/instructor-03.png" alt="" class="w-full rounded-lg"></a>