PluginProbe ʕ •ᴥ•ʔ
Spider Elements – Premium Elementor Widgets & Addons Library / 1.5.0
Spider Elements – Premium Elementor Widgets & Addons Library v1.5.0
trunk 1.0.0 1.1.0 1.5.0 1.6.0 1.6.1 1.6.2 1.6.3 1.6.4 1.6.5 1.6.6 1.6.7 1.7.0 1.8.0 1.9.0
spider-elements / assets / css / main.css
spider-elements / assets / css Last commit date
admin.css 1 year ago admin.css.map 1 year ago elementor-editor.css 1 year ago extension.css 1 year ago extension.css.map 1 year ago main.css 1 year ago main.css.map 1 year ago rtl.css 1 year ago rtl.css.map 1 year ago
main.css
12907 lines
1 @charset "UTF-8";
2 /*----------------------------------------------------
3 @File: Default Styles
4
5 This file contains the styling for the actual template, this
6 is the file you need to edit to change the look of the
7 template.
8 ---------------------------------------------------- */
9 /*=====================================================================
10 @Template Name: Spider Elements
11
12 @Default Styles
13 Table of Content:
14 01/ Mixins
15 02/ prefix
16 02/ Common
17 04/ framework
18 05/ Accordion
19 06/ Tabs
20 07/ Testimonial
21 08/ Video
22 09/ Alerts_box
23 10/ Animation
24 11/ List_Item
25 12/ Cheat_sheet
26 13/ Team
27 14/ Integration
28 15/ Blog_grid
29 16/ Before_after
30 17/ Timeline
31 18/ Buttons
32 19/ Animated_Headline
33 20/ video_popup
34 21/ Counter
35 22/ Instagram
36 23/ Fullscreen_Slider
37 24/ Icon_box
38 25/ Pricing_Table
39 26/ Pricing_Table_Switcher
40
41
42 =====================================================================*/
43 /* Base margin classes */
44 .spel-m-0 {
45 margin: 0 !important;
46 }
47
48 .spel-m-4 {
49 margin: 4px !important;
50 }
51
52 .spel-m-8 {
53 margin: 8px !important;
54 }
55
56 .spel-m-12 {
57 margin: 12px !important;
58 }
59
60 .spel-m-16 {
61 margin: 16px !important;
62 }
63
64 .spel-m-20 {
65 margin: 20px !important;
66 }
67
68 .spel-m-24 {
69 margin: 24px !important;
70 }
71
72 .spel-m-28 {
73 margin: 28px !important;
74 }
75
76 .spel-m-32 {
77 margin: 32px !important;
78 }
79
80 .spel-m-36 {
81 margin: 36px !important;
82 }
83
84 .spel-m-40 {
85 margin: 40px !important;
86 }
87
88 .spel-m-44 {
89 margin: 44px !important;
90 }
91
92 .spel-m-48 {
93 margin: 48px !important;
94 }
95
96 .spel-m-52 {
97 margin: 52px !important;
98 }
99
100 .spel-m-56 {
101 margin: 56px !important;
102 }
103
104 .spel-m-60 {
105 margin: 60px !important;
106 }
107
108 .spel-m-64 {
109 margin: 64px !important;
110 }
111
112 .spel-m-68 {
113 margin: 68px !important;
114 }
115
116 .spel-m-72 {
117 margin: 72px !important;
118 }
119
120 .spel-m-76 {
121 margin: 76px !important;
122 }
123
124 .spel-m-80 {
125 margin: 80px !important;
126 }
127
128 .spel-m-84 {
129 margin: 84px !important;
130 }
131
132 .spel-m-88 {
133 margin: 88px !important;
134 }
135
136 .spel-m-92 {
137 margin: 92px !important;
138 }
139
140 .spel-m-96 {
141 margin: 96px !important;
142 }
143
144 .spel-m-100 {
145 margin: 100px !important;
146 }
147
148 /* Base padding classes */
149 .spel-p-0 {
150 padding: 0 !important;
151 }
152
153 .spel-p-4 {
154 padding: 4px !important;
155 }
156
157 .spel-p-8 {
158 padding: 8px !important;
159 }
160
161 .spel-p-12 {
162 padding: 12px !important;
163 }
164
165 .spel-p-16 {
166 padding: 16px !important;
167 }
168
169 .spel-p-20 {
170 padding: 20px !important;
171 }
172
173 .spel-p-24 {
174 padding: 24px !important;
175 }
176
177 .spel-p-28 {
178 padding: 28px !important;
179 }
180
181 .spel-p-32 {
182 padding: 32px !important;
183 }
184
185 .spel-p-36 {
186 padding: 36px !important;
187 }
188
189 .spel-p-40 {
190 padding: 40px !important;
191 }
192
193 .spel-p-44 {
194 padding: 44px !important;
195 }
196
197 .spel-p-48 {
198 padding: 48px !important;
199 }
200
201 .spel-p-52 {
202 padding: 52px !important;
203 }
204
205 .spel-p-56 {
206 padding: 56px !important;
207 }
208
209 .spel-p-60 {
210 padding: 60px !important;
211 }
212
213 .spel-p-64 {
214 padding: 64px !important;
215 }
216
217 .spel-p-68 {
218 padding: 68px !important;
219 }
220
221 .spel-p-72 {
222 padding: 72px !important;
223 }
224
225 .spel-p-76 {
226 padding: 76px !important;
227 }
228
229 .spel-p-80 {
230 padding: 80px !important;
231 }
232
233 .spel-p-84 {
234 padding: 84px !important;
235 }
236
237 .spel-p-88 {
238 padding: 88px !important;
239 }
240
241 .spel-p-92 {
242 padding: 92px !important;
243 }
244
245 .spel-p-96 {
246 padding: 96px !important;
247 }
248
249 .spel-p-100 {
250 padding: 100px !important;
251 }
252
253 /* Margin classes for each side */
254 .spel-mt-0 {
255 margin-top: 0 !important;
256 }
257
258 .spel-mt-4 {
259 margin-top: 4px !important;
260 }
261
262 .spel-mt-8 {
263 margin-top: 8px !important;
264 }
265
266 .spel-mt-12 {
267 margin-top: 12px !important;
268 }
269
270 .spel-mt-16 {
271 margin-top: 16px !important;
272 }
273
274 .spel-mt-20 {
275 margin-top: 20px !important;
276 }
277
278 .spel-mt-24 {
279 margin-top: 24px !important;
280 }
281
282 .spel-mt-28 {
283 margin-top: 28px !important;
284 }
285
286 .spel-mt-32 {
287 margin-top: 32px !important;
288 }
289
290 .spel-mt-36 {
291 margin-top: 36px !important;
292 }
293
294 .spel-mt-40 {
295 margin-top: 40px !important;
296 }
297
298 .spel-mt-44 {
299 margin-top: 44px !important;
300 }
301
302 .spel-mt-48 {
303 margin-top: 48px !important;
304 }
305
306 .spel-mt-52 {
307 margin-top: 52px !important;
308 }
309
310 .spel-mt-56 {
311 margin-top: 56px !important;
312 }
313
314 .spel-mt-60 {
315 margin-top: 60px !important;
316 }
317
318 .spel-mt-64 {
319 margin-top: 64px !important;
320 }
321
322 .spel-mt-68 {
323 margin-top: 68px !important;
324 }
325
326 .spel-mt-72 {
327 margin-top: 72px !important;
328 }
329
330 .spel-mt-76 {
331 margin-top: 76px !important;
332 }
333
334 .spel-mt-80 {
335 margin-top: 80px !important;
336 }
337
338 .spel-mt-84 {
339 margin-top: 84px !important;
340 }
341
342 .spel-mt-88 {
343 margin-top: 88px !important;
344 }
345
346 .spel-mt-92 {
347 margin-top: 92px !important;
348 }
349
350 .spel-mt-96 {
351 margin-top: 96px !important;
352 }
353
354 .spel-mt-100 {
355 margin-top: 100px !important;
356 }
357
358 .spel-mr-0 {
359 margin-right: 0 !important;
360 }
361
362 .spel-mr-4 {
363 margin-right: 4px !important;
364 }
365
366 .spel-mr-8 {
367 margin-right: 8px !important;
368 }
369
370 .spel-mr-12 {
371 margin-right: 12px !important;
372 }
373
374 .spel-mr-16 {
375 margin-right: 16px !important;
376 }
377
378 .spel-mr-20 {
379 margin-right: 20px !important;
380 }
381
382 .spel-mr-24 {
383 margin-right: 24px !important;
384 }
385
386 .spel-mr-28 {
387 margin-right: 28px !important;
388 }
389
390 .spel-mr-32 {
391 margin-right: 32px !important;
392 }
393
394 .spel-mr-36 {
395 margin-right: 36px !important;
396 }
397
398 .spel-mr-40 {
399 margin-right: 40px !important;
400 }
401
402 .spel-mr-44 {
403 margin-right: 44px !important;
404 }
405
406 .spel-mr-48 {
407 margin-right: 48px !important;
408 }
409
410 .spel-mr-52 {
411 margin-right: 52px !important;
412 }
413
414 .spel-mr-56 {
415 margin-right: 56px !important;
416 }
417
418 .spel-mr-60 {
419 margin-right: 60px !important;
420 }
421
422 .spel-mr-64 {
423 margin-right: 64px !important;
424 }
425
426 .spel-mr-68 {
427 margin-right: 68px !important;
428 }
429
430 .spel-mr-72 {
431 margin-right: 72px !important;
432 }
433
434 .spel-mr-76 {
435 margin-right: 76px !important;
436 }
437
438 .spel-mr-80 {
439 margin-right: 80px !important;
440 }
441
442 .spel-mr-84 {
443 margin-right: 84px !important;
444 }
445
446 .spel-mr-88 {
447 margin-right: 88px !important;
448 }
449
450 .spel-mr-92 {
451 margin-right: 92px !important;
452 }
453
454 .spel-mr-96 {
455 margin-right: 96px !important;
456 }
457
458 .spel-mr-100 {
459 margin-right: 100px !important;
460 }
461
462 .spel-mb-0 {
463 margin-bottom: 0 !important;
464 }
465
466 .spel-mb-4 {
467 margin-bottom: 4px !important;
468 }
469
470 .spel-mb-8 {
471 margin-bottom: 8px !important;
472 }
473
474 .spel-mb-12 {
475 margin-bottom: 12px !important;
476 }
477
478 .spel-mb-16 {
479 margin-bottom: 16px !important;
480 }
481
482 .spel-mb-20 {
483 margin-bottom: 20px !important;
484 }
485
486 .spel-mb-24 {
487 margin-bottom: 24px !important;
488 }
489
490 .spel-mb-28 {
491 margin-bottom: 28px !important;
492 }
493
494 .spel-mb-32 {
495 margin-bottom: 32px !important;
496 }
497
498 .spel-mb-36 {
499 margin-bottom: 36px !important;
500 }
501
502 .spel-mb-40 {
503 margin-bottom: 40px !important;
504 }
505
506 .spel-mb-44 {
507 margin-bottom: 44px !important;
508 }
509
510 .spel-mb-48 {
511 margin-bottom: 48px !important;
512 }
513
514 .spel-mb-52 {
515 margin-bottom: 52px !important;
516 }
517
518 .spel-mb-56 {
519 margin-bottom: 56px !important;
520 }
521
522 .spel-mb-60 {
523 margin-bottom: 60px !important;
524 }
525
526 .spel-mb-64 {
527 margin-bottom: 64px !important;
528 }
529
530 .spel-mb-68 {
531 margin-bottom: 68px !important;
532 }
533
534 .spel-mb-72 {
535 margin-bottom: 72px !important;
536 }
537
538 .spel-mb-76 {
539 margin-bottom: 76px !important;
540 }
541
542 .spel-mb-80 {
543 margin-bottom: 80px !important;
544 }
545
546 .spel-mb-84 {
547 margin-bottom: 84px !important;
548 }
549
550 .spel-mb-88 {
551 margin-bottom: 88px !important;
552 }
553
554 .spel-mb-92 {
555 margin-bottom: 92px !important;
556 }
557
558 .spel-mb-96 {
559 margin-bottom: 96px !important;
560 }
561
562 .spel-mb-100 {
563 margin-bottom: 100px !important;
564 }
565
566 .spel-ml-0 {
567 margin-left: 0 !important;
568 }
569
570 .spel-ml-4 {
571 margin-left: 4px !important;
572 }
573
574 .spel-ml-8 {
575 margin-left: 8px !important;
576 }
577
578 .spel-ml-12 {
579 margin-left: 12px !important;
580 }
581
582 .spel-ml-16 {
583 margin-left: 16px !important;
584 }
585
586 .spel-ml-20 {
587 margin-left: 20px !important;
588 }
589
590 .spel-ml-24 {
591 margin-left: 24px !important;
592 }
593
594 .spel-ml-28 {
595 margin-left: 28px !important;
596 }
597
598 .spel-ml-32 {
599 margin-left: 32px !important;
600 }
601
602 .spel-ml-36 {
603 margin-left: 36px !important;
604 }
605
606 .spel-ml-40 {
607 margin-left: 40px !important;
608 }
609
610 .spel-ml-44 {
611 margin-left: 44px !important;
612 }
613
614 .spel-ml-48 {
615 margin-left: 48px !important;
616 }
617
618 .spel-ml-52 {
619 margin-left: 52px !important;
620 }
621
622 .spel-ml-56 {
623 margin-left: 56px !important;
624 }
625
626 .spel-ml-60 {
627 margin-left: 60px !important;
628 }
629
630 .spel-ml-64 {
631 margin-left: 64px !important;
632 }
633
634 .spel-ml-68 {
635 margin-left: 68px !important;
636 }
637
638 .spel-ml-72 {
639 margin-left: 72px !important;
640 }
641
642 .spel-ml-76 {
643 margin-left: 76px !important;
644 }
645
646 .spel-ml-80 {
647 margin-left: 80px !important;
648 }
649
650 .spel-ml-84 {
651 margin-left: 84px !important;
652 }
653
654 .spel-ml-88 {
655 margin-left: 88px !important;
656 }
657
658 .spel-ml-92 {
659 margin-left: 92px !important;
660 }
661
662 .spel-ml-96 {
663 margin-left: 96px !important;
664 }
665
666 .spel-ml-100 {
667 margin-left: 100px !important;
668 }
669
670 /* Padding classes for each side */
671 .spel-pt-0 {
672 padding-top: 0 !important;
673 }
674
675 .spel-pt-4 {
676 padding-top: 4px !important;
677 }
678
679 .spel-pt-8 {
680 padding-top: 8px !important;
681 }
682
683 .spel-pt-12 {
684 padding-top: 12px !important;
685 }
686
687 .spel-pt-16 {
688 padding-top: 16px !important;
689 }
690
691 .spel-pt-20 {
692 padding-top: 20px !important;
693 }
694
695 .spel-pt-24 {
696 padding-top: 24px !important;
697 }
698
699 .spel-pt-28 {
700 padding-top: 28px !important;
701 }
702
703 .spel-pt-32 {
704 padding-top: 32px !important;
705 }
706
707 .spel-pt-36 {
708 padding-top: 36px !important;
709 }
710
711 .spel-pt-40 {
712 padding-top: 40px !important;
713 }
714
715 .spel-pt-44 {
716 padding-top: 44px !important;
717 }
718
719 .spel-pt-48 {
720 padding-top: 48px !important;
721 }
722
723 .spel-pt-52 {
724 padding-top: 52px !important;
725 }
726
727 .spel-pt-56 {
728 padding-top: 56px !important;
729 }
730
731 .spel-pt-60 {
732 padding-top: 60px !important;
733 }
734
735 .spel-pt-64 {
736 padding-top: 64px !important;
737 }
738
739 .spel-pt-68 {
740 padding-top: 68px !important;
741 }
742
743 .spel-pt-72 {
744 padding-top: 72px !important;
745 }
746
747 .spel-pt-76 {
748 padding-top: 76px !important;
749 }
750
751 .spel-pt-80 {
752 padding-top: 80px !important;
753 }
754
755 .spel-pt-84 {
756 padding-top: 84px !important;
757 }
758
759 .spel-pt-88 {
760 padding-top: 88px !important;
761 }
762
763 .spel-pt-92 {
764 padding-top: 92px !important;
765 }
766
767 .spel-pt-96 {
768 padding-top: 96px !important;
769 }
770
771 .spel-pt-100 {
772 padding-top: 100px !important;
773 }
774
775 .spel-pr-0 {
776 padding-right: 0 !important;
777 }
778
779 .spel-pr-4 {
780 padding-right: 4px !important;
781 }
782
783 .spel-pr-8 {
784 padding-right: 8px !important;
785 }
786
787 .spel-pr-12 {
788 padding-right: 12px !important;
789 }
790
791 .spel-pr-16 {
792 padding-right: 16px !important;
793 }
794
795 .spel-pr-20 {
796 padding-right: 20px !important;
797 }
798
799 .spel-pr-24 {
800 padding-right: 24px !important;
801 }
802
803 .spel-pr-28 {
804 padding-right: 28px !important;
805 }
806
807 .spel-pr-32 {
808 padding-right: 32px !important;
809 }
810
811 .spel-pr-36 {
812 padding-right: 36px !important;
813 }
814
815 .spel-pr-40 {
816 padding-right: 40px !important;
817 }
818
819 .spel-pr-44 {
820 padding-right: 44px !important;
821 }
822
823 .spel-pr-48 {
824 padding-right: 48px !important;
825 }
826
827 .spel-pr-52 {
828 padding-right: 52px !important;
829 }
830
831 .spel-pr-56 {
832 padding-right: 56px !important;
833 }
834
835 .spel-pr-60 {
836 padding-right: 60px !important;
837 }
838
839 .spel-pr-64 {
840 padding-right: 64px !important;
841 }
842
843 .spel-pr-68 {
844 padding-right: 68px !important;
845 }
846
847 .spel-pr-72 {
848 padding-right: 72px !important;
849 }
850
851 .spel-pr-76 {
852 padding-right: 76px !important;
853 }
854
855 .spel-pr-80 {
856 padding-right: 80px !important;
857 }
858
859 .spel-pr-84 {
860 padding-right: 84px !important;
861 }
862
863 .spel-pr-88 {
864 padding-right: 88px !important;
865 }
866
867 .spel-pr-92 {
868 padding-right: 92px !important;
869 }
870
871 .spel-pr-96 {
872 padding-right: 96px !important;
873 }
874
875 .spel-pr-100 {
876 padding-right: 100px !important;
877 }
878
879 .spel-pb-0 {
880 padding-bottom: 0 !important;
881 }
882
883 .spel-pb-4 {
884 padding-bottom: 4px !important;
885 }
886
887 .spel-pb-8 {
888 padding-bottom: 8px !important;
889 }
890
891 .spel-pb-12 {
892 padding-bottom: 12px !important;
893 }
894
895 .spel-pb-16 {
896 padding-bottom: 16px !important;
897 }
898
899 .spel-pb-20 {
900 padding-bottom: 20px !important;
901 }
902
903 .spel-pb-24 {
904 padding-bottom: 24px !important;
905 }
906
907 .spel-pb-28 {
908 padding-bottom: 28px !important;
909 }
910
911 .spel-pb-32 {
912 padding-bottom: 32px !important;
913 }
914
915 .spel-pb-36 {
916 padding-bottom: 36px !important;
917 }
918
919 .spel-pb-40 {
920 padding-bottom: 40px !important;
921 }
922
923 .spel-pb-44 {
924 padding-bottom: 44px !important;
925 }
926
927 .spel-pb-48 {
928 padding-bottom: 48px !important;
929 }
930
931 .spel-pb-52 {
932 padding-bottom: 52px !important;
933 }
934
935 .spel-pb-56 {
936 padding-bottom: 56px !important;
937 }
938
939 .spel-pb-60 {
940 padding-bottom: 60px !important;
941 }
942
943 .spel-pb-64 {
944 padding-bottom: 64px !important;
945 }
946
947 .spel-pb-68 {
948 padding-bottom: 68px !important;
949 }
950
951 .spel-pb-72 {
952 padding-bottom: 72px !important;
953 }
954
955 .spel-pb-76 {
956 padding-bottom: 76px !important;
957 }
958
959 .spel-pb-80 {
960 padding-bottom: 80px !important;
961 }
962
963 .spel-pb-84 {
964 padding-bottom: 84px !important;
965 }
966
967 .spel-pb-88 {
968 padding-bottom: 88px !important;
969 }
970
971 .spel-pb-92 {
972 padding-bottom: 92px !important;
973 }
974
975 .spel-pb-96 {
976 padding-bottom: 96px !important;
977 }
978
979 .spel-pb-100 {
980 padding-bottom: 100px !important;
981 }
982
983 .spel-pl-0 {
984 padding-left: 0 !important;
985 }
986
987 .spel-pl-4 {
988 padding-left: 4px !important;
989 }
990
991 .spel-pl-8 {
992 padding-left: 8px !important;
993 }
994
995 .spel-pl-12 {
996 padding-left: 12px !important;
997 }
998
999 .spel-pl-16 {
1000 padding-left: 16px !important;
1001 }
1002
1003 .spel-pl-20 {
1004 padding-left: 20px !important;
1005 }
1006
1007 .spel-pl-24 {
1008 padding-left: 24px !important;
1009 }
1010
1011 .spel-pl-28 {
1012 padding-left: 28px !important;
1013 }
1014
1015 .spel-pl-32 {
1016 padding-left: 32px !important;
1017 }
1018
1019 .spel-pl-36 {
1020 padding-left: 36px !important;
1021 }
1022
1023 .spel-pl-40 {
1024 padding-left: 40px !important;
1025 }
1026
1027 .spel-pl-44 {
1028 padding-left: 44px !important;
1029 }
1030
1031 .spel-pl-48 {
1032 padding-left: 48px !important;
1033 }
1034
1035 .spel-pl-52 {
1036 padding-left: 52px !important;
1037 }
1038
1039 .spel-pl-56 {
1040 padding-left: 56px !important;
1041 }
1042
1043 .spel-pl-60 {
1044 padding-left: 60px !important;
1045 }
1046
1047 .spel-pl-64 {
1048 padding-left: 64px !important;
1049 }
1050
1051 .spel-pl-68 {
1052 padding-left: 68px !important;
1053 }
1054
1055 .spel-pl-72 {
1056 padding-left: 72px !important;
1057 }
1058
1059 .spel-pl-76 {
1060 padding-left: 76px !important;
1061 }
1062
1063 .spel-pl-80 {
1064 padding-left: 80px !important;
1065 }
1066
1067 .spel-pl-84 {
1068 padding-left: 84px !important;
1069 }
1070
1071 .spel-pl-88 {
1072 padding-left: 88px !important;
1073 }
1074
1075 .spel-pl-92 {
1076 padding-left: 92px !important;
1077 }
1078
1079 .spel-pl-96 {
1080 padding-left: 96px !important;
1081 }
1082
1083 .spel-pl-100 {
1084 padding-left: 100px !important;
1085 }
1086
1087 /* Responsive classes for small screens */
1088 @media (min-width: 576px) {
1089 .spel-sm-m-0 {
1090 margin: 0 !important;
1091 }
1092 .spel-sm-m-4 {
1093 margin: 4px !important;
1094 }
1095 .spel-sm-m-8 {
1096 margin: 8px !important;
1097 }
1098 .spel-sm-m-12 {
1099 margin: 12px !important;
1100 }
1101 .spel-sm-m-16 {
1102 margin: 16px !important;
1103 }
1104 .spel-sm-m-20 {
1105 margin: 20px !important;
1106 }
1107 .spel-sm-m-24 {
1108 margin: 24px !important;
1109 }
1110 .spel-sm-m-28 {
1111 margin: 28px !important;
1112 }
1113 .spel-sm-m-32 {
1114 margin: 32px !important;
1115 }
1116 .spel-sm-m-36 {
1117 margin: 36px !important;
1118 }
1119 .spel-sm-m-40 {
1120 margin: 40px !important;
1121 }
1122 .spel-sm-m-44 {
1123 margin: 44px !important;
1124 }
1125 .spel-sm-m-48 {
1126 margin: 48px !important;
1127 }
1128 .spel-sm-m-52 {
1129 margin: 52px !important;
1130 }
1131 .spel-sm-m-56 {
1132 margin: 56px !important;
1133 }
1134 .spel-sm-m-60 {
1135 margin: 60px !important;
1136 }
1137 .spel-sm-m-64 {
1138 margin: 64px !important;
1139 }
1140 .spel-sm-m-68 {
1141 margin: 68px !important;
1142 }
1143 .spel-sm-m-72 {
1144 margin: 72px !important;
1145 }
1146 .spel-sm-m-76 {
1147 margin: 76px !important;
1148 }
1149 .spel-sm-m-80 {
1150 margin: 80px !important;
1151 }
1152 .spel-sm-m-84 {
1153 margin: 84px !important;
1154 }
1155 .spel-sm-m-88 {
1156 margin: 88px !important;
1157 }
1158 .spel-sm-m-92 {
1159 margin: 92px !important;
1160 }
1161 .spel-sm-m-96 {
1162 margin: 96px !important;
1163 }
1164 .spel-sm-m-100 {
1165 margin: 100px !important;
1166 }
1167 .spel-sm-p-0 {
1168 padding: 0 !important;
1169 }
1170 .spel-sm-p-4 {
1171 padding: 4px !important;
1172 }
1173 .spel-sm-p-8 {
1174 padding: 8px !important;
1175 }
1176 .spel-sm-p-12 {
1177 padding: 12px !important;
1178 }
1179 .spel-sm-p-16 {
1180 padding: 16px !important;
1181 }
1182 .spel-sm-p-20 {
1183 padding: 20px !important;
1184 }
1185 .spel-sm-p-24 {
1186 padding: 24px !important;
1187 }
1188 .spel-sm-p-28 {
1189 padding: 28px !important;
1190 }
1191 .spel-sm-p-32 {
1192 padding: 32px !important;
1193 }
1194 .spel-sm-p-36 {
1195 padding: 36px !important;
1196 }
1197 .spel-sm-p-40 {
1198 padding: 40px !important;
1199 }
1200 .spel-sm-p-44 {
1201 padding: 44px !important;
1202 }
1203 .spel-sm-p-48 {
1204 padding: 48px !important;
1205 }
1206 .spel-sm-p-52 {
1207 padding: 52px !important;
1208 }
1209 .spel-sm-p-56 {
1210 padding: 56px !important;
1211 }
1212 .spel-sm-p-60 {
1213 padding: 60px !important;
1214 }
1215 .spel-sm-p-64 {
1216 padding: 64px !important;
1217 }
1218 .spel-sm-p-68 {
1219 padding: 68px !important;
1220 }
1221 .spel-sm-p-72 {
1222 padding: 72px !important;
1223 }
1224 .spel-sm-p-76 {
1225 padding: 76px !important;
1226 }
1227 .spel-sm-p-80 {
1228 padding: 80px !important;
1229 }
1230 .spel-sm-p-84 {
1231 padding: 84px !important;
1232 }
1233 .spel-sm-p-88 {
1234 padding: 88px !important;
1235 }
1236 .spel-sm-p-92 {
1237 padding: 92px !important;
1238 }
1239 .spel-sm-p-96 {
1240 padding: 96px !important;
1241 }
1242 .spel-sm-p-100 {
1243 padding: 100px !important;
1244 }
1245 .spel-sm-mt-0 {
1246 margin-top: 0 !important;
1247 }
1248 .spel-sm-mt-4 {
1249 margin-top: 4px !important;
1250 }
1251 .spel-sm-mt-8 {
1252 margin-top: 8px !important;
1253 }
1254 .spel-sm-mt-12 {
1255 margin-top: 12px !important;
1256 }
1257 .spel-sm-mt-16 {
1258 margin-top: 16px !important;
1259 }
1260 .spel-sm-mt-20 {
1261 margin-top: 20px !important;
1262 }
1263 .spel-sm-mt-24 {
1264 margin-top: 24px !important;
1265 }
1266 .spel-sm-mt-28 {
1267 margin-top: 28px !important;
1268 }
1269 .spel-sm-mt-32 {
1270 margin-top: 32px !important;
1271 }
1272 .spel-sm-mt-36 {
1273 margin-top: 36px !important;
1274 }
1275 .spel-sm-mt-40 {
1276 margin-top: 40px !important;
1277 }
1278 .spel-sm-mt-44 {
1279 margin-top: 44px !important;
1280 }
1281 .spel-sm-mt-48 {
1282 margin-top: 48px !important;
1283 }
1284 .spel-sm-mt-52 {
1285 margin-top: 52px !important;
1286 }
1287 .spel-sm-mt-56 {
1288 margin-top: 56px !important;
1289 }
1290 .spel-sm-mt-60 {
1291 margin-top: 60px !important;
1292 }
1293 .spel-sm-mt-64 {
1294 margin-top: 64px !important;
1295 }
1296 .spel-sm-mt-68 {
1297 margin-top: 68px !important;
1298 }
1299 .spel-sm-mt-72 {
1300 margin-top: 72px !important;
1301 }
1302 .spel-sm-mt-76 {
1303 margin-top: 76px !important;
1304 }
1305 .spel-sm-mt-80 {
1306 margin-top: 80px !important;
1307 }
1308 .spel-sm-mt-84 {
1309 margin-top: 84px !important;
1310 }
1311 .spel-sm-mt-88 {
1312 margin-top: 88px !important;
1313 }
1314 .spel-sm-mt-92 {
1315 margin-top: 92px !important;
1316 }
1317 .spel-sm-mt-96 {
1318 margin-top: 96px !important;
1319 }
1320 .spel-sm-mt-100 {
1321 margin-top: 100px !important;
1322 }
1323 .spel-sm-mr-0 {
1324 margin-right: 0 !important;
1325 }
1326 .spel-sm-mr-4 {
1327 margin-right: 4px !important;
1328 }
1329 .spel-sm-mr-8 {
1330 margin-right: 8px !important;
1331 }
1332 .spel-sm-mr-12 {
1333 margin-right: 12px !important;
1334 }
1335 .spel-sm-mr-16 {
1336 margin-right: 16px !important;
1337 }
1338 .spel-sm-mr-20 {
1339 margin-right: 20px !important;
1340 }
1341 .spel-sm-mr-24 {
1342 margin-right: 24px !important;
1343 }
1344 .spel-sm-mr-28 {
1345 margin-right: 28px !important;
1346 }
1347 .spel-sm-mr-32 {
1348 margin-right: 32px !important;
1349 }
1350 .spel-sm-mr-36 {
1351 margin-right: 36px !important;
1352 }
1353 .spel-sm-mr-40 {
1354 margin-right: 40px !important;
1355 }
1356 .spel-sm-mr-44 {
1357 margin-right: 44px !important;
1358 }
1359 .spel-sm-mr-48 {
1360 margin-right: 48px !important;
1361 }
1362 .spel-sm-mr-52 {
1363 margin-right: 52px !important;
1364 }
1365 .spel-sm-mr-56 {
1366 margin-right: 56px !important;
1367 }
1368 .spel-sm-mr-60 {
1369 margin-right: 60px !important;
1370 }
1371 .spel-sm-mr-64 {
1372 margin-right: 64px !important;
1373 }
1374 .spel-sm-mr-68 {
1375 margin-right: 68px !important;
1376 }
1377 .spel-sm-mr-72 {
1378 margin-right: 72px !important;
1379 }
1380 .spel-sm-mr-76 {
1381 margin-right: 76px !important;
1382 }
1383 .spel-sm-mr-80 {
1384 margin-right: 80px !important;
1385 }
1386 .spel-sm-mr-84 {
1387 margin-right: 84px !important;
1388 }
1389 .spel-sm-mr-88 {
1390 margin-right: 88px !important;
1391 }
1392 .spel-sm-mr-92 {
1393 margin-right: 92px !important;
1394 }
1395 .spel-sm-mr-96 {
1396 margin-right: 96px !important;
1397 }
1398 .spel-sm-mr-100 {
1399 margin-right: 100px !important;
1400 }
1401 .spel-sm-mb-0 {
1402 margin-bottom: 0 !important;
1403 }
1404 .spel-sm-mb-4 {
1405 margin-bottom: 4px !important;
1406 }
1407 .spel-sm-mb-8 {
1408 margin-bottom: 8px !important;
1409 }
1410 .spel-sm-mb-12 {
1411 margin-bottom: 12px !important;
1412 }
1413 .spel-sm-mb-16 {
1414 margin-bottom: 16px !important;
1415 }
1416 .spel-sm-mb-20 {
1417 margin-bottom: 20px !important;
1418 }
1419 .spel-sm-mb-24 {
1420 margin-bottom: 24px !important;
1421 }
1422 .spel-sm-mb-28 {
1423 margin-bottom: 28px !important;
1424 }
1425 .spel-sm-mb-32 {
1426 margin-bottom: 32px !important;
1427 }
1428 .spel-sm-mb-36 {
1429 margin-bottom: 36px !important;
1430 }
1431 .spel-sm-mb-40 {
1432 margin-bottom: 40px !important;
1433 }
1434 .spel-sm-mb-44 {
1435 margin-bottom: 44px !important;
1436 }
1437 .spel-sm-mb-48 {
1438 margin-bottom: 48px !important;
1439 }
1440 .spel-sm-mb-52 {
1441 margin-bottom: 52px !important;
1442 }
1443 .spel-sm-mb-56 {
1444 margin-bottom: 56px !important;
1445 }
1446 .spel-sm-mb-60 {
1447 margin-bottom: 60px !important;
1448 }
1449 .spel-sm-mb-64 {
1450 margin-bottom: 64px !important;
1451 }
1452 .spel-sm-mb-68 {
1453 margin-bottom: 68px !important;
1454 }
1455 .spel-sm-mb-72 {
1456 margin-bottom: 72px !important;
1457 }
1458 .spel-sm-mb-76 {
1459 margin-bottom: 76px !important;
1460 }
1461 .spel-sm-mb-80 {
1462 margin-bottom: 80px !important;
1463 }
1464 .spel-sm-mb-84 {
1465 margin-bottom: 84px !important;
1466 }
1467 .spel-sm-mb-88 {
1468 margin-bottom: 88px !important;
1469 }
1470 .spel-sm-mb-92 {
1471 margin-bottom: 92px !important;
1472 }
1473 .spel-sm-mb-96 {
1474 margin-bottom: 96px !important;
1475 }
1476 .spel-sm-mb-100 {
1477 margin-bottom: 100px !important;
1478 }
1479 .spel-sm-ml-0 {
1480 margin-left: 0 !important;
1481 }
1482 .spel-sm-ml-4 {
1483 margin-left: 4px !important;
1484 }
1485 .spel-sm-ml-8 {
1486 margin-left: 8px !important;
1487 }
1488 .spel-sm-ml-12 {
1489 margin-left: 12px !important;
1490 }
1491 .spel-sm-ml-16 {
1492 margin-left: 16px !important;
1493 }
1494 .spel-sm-ml-20 {
1495 margin-left: 20px !important;
1496 }
1497 .spel-sm-ml-24 {
1498 margin-left: 24px !important;
1499 }
1500 .spel-sm-ml-28 {
1501 margin-left: 28px !important;
1502 }
1503 .spel-sm-ml-32 {
1504 margin-left: 32px !important;
1505 }
1506 .spel-sm-ml-36 {
1507 margin-left: 36px !important;
1508 }
1509 .spel-sm-ml-40 {
1510 margin-left: 40px !important;
1511 }
1512 .spel-sm-ml-44 {
1513 margin-left: 44px !important;
1514 }
1515 .spel-sm-ml-48 {
1516 margin-left: 48px !important;
1517 }
1518 .spel-sm-ml-52 {
1519 margin-left: 52px !important;
1520 }
1521 .spel-sm-ml-56 {
1522 margin-left: 56px !important;
1523 }
1524 .spel-sm-ml-60 {
1525 margin-left: 60px !important;
1526 }
1527 .spel-sm-ml-64 {
1528 margin-left: 64px !important;
1529 }
1530 .spel-sm-ml-68 {
1531 margin-left: 68px !important;
1532 }
1533 .spel-sm-ml-72 {
1534 margin-left: 72px !important;
1535 }
1536 .spel-sm-ml-76 {
1537 margin-left: 76px !important;
1538 }
1539 .spel-sm-ml-80 {
1540 margin-left: 80px !important;
1541 }
1542 .spel-sm-ml-84 {
1543 margin-left: 84px !important;
1544 }
1545 .spel-sm-ml-88 {
1546 margin-left: 88px !important;
1547 }
1548 .spel-sm-ml-92 {
1549 margin-left: 92px !important;
1550 }
1551 .spel-sm-ml-96 {
1552 margin-left: 96px !important;
1553 }
1554 .spel-sm-ml-100 {
1555 margin-left: 100px !important;
1556 }
1557 }
1558 /* Responsive classes for medium screens */
1559 @media (min-width: 768px) {
1560 .spel-md-m-0 {
1561 margin: 0 !important;
1562 }
1563 .spel-md-m-4 {
1564 margin: 4px !important;
1565 }
1566 .spel-md-m-8 {
1567 margin: 8px !important;
1568 }
1569 .spel-md-m-12 {
1570 margin: 12px !important;
1571 }
1572 .spel-md-m-16 {
1573 margin: 16px !important;
1574 }
1575 .spel-md-m-20 {
1576 margin: 20px !important;
1577 }
1578 .spel-md-m-24 {
1579 margin: 24px !important;
1580 }
1581 .spel-md-m-28 {
1582 margin: 28px !important;
1583 }
1584 .spel-md-m-32 {
1585 margin: 32px !important;
1586 }
1587 .spel-md-m-36 {
1588 margin: 36px !important;
1589 }
1590 .spel-md-m-40 {
1591 margin: 40px !important;
1592 }
1593 .spel-md-m-44 {
1594 margin: 44px !important;
1595 }
1596 .spel-md-m-48 {
1597 margin: 48px !important;
1598 }
1599 .spel-md-m-52 {
1600 margin: 52px !important;
1601 }
1602 .spel-md-m-56 {
1603 margin: 56px !important;
1604 }
1605 .spel-md-m-60 {
1606 margin: 60px !important;
1607 }
1608 .spel-md-m-64 {
1609 margin: 64px !important;
1610 }
1611 .spel-md-m-68 {
1612 margin: 68px !important;
1613 }
1614 .spel-md-m-72 {
1615 margin: 72px !important;
1616 }
1617 .spel-md-m-76 {
1618 margin: 76px !important;
1619 }
1620 .spel-md-m-80 {
1621 margin: 80px !important;
1622 }
1623 .spel-md-m-84 {
1624 margin: 84px !important;
1625 }
1626 .spel-md-m-88 {
1627 margin: 88px !important;
1628 }
1629 .spel-md-m-92 {
1630 margin: 92px !important;
1631 }
1632 .spel-md-m-96 {
1633 margin: 96px !important;
1634 }
1635 .spel-md-m-100 {
1636 margin: 100px !important;
1637 }
1638 .spel-md-p-0 {
1639 padding: 0 !important;
1640 }
1641 .spel-md-p-4 {
1642 padding: 4px !important;
1643 }
1644 .spel-md-p-8 {
1645 padding: 8px !important;
1646 }
1647 .spel-md-p-12 {
1648 padding: 12px !important;
1649 }
1650 .spel-md-p-16 {
1651 padding: 16px !important;
1652 }
1653 .spel-md-p-20 {
1654 padding: 20px !important;
1655 }
1656 .spel-md-p-24 {
1657 padding: 24px !important;
1658 }
1659 .spel-md-p-28 {
1660 padding: 28px !important;
1661 }
1662 .spel-md-p-32 {
1663 padding: 32px !important;
1664 }
1665 .spel-md-p-36 {
1666 padding: 36px !important;
1667 }
1668 .spel-md-p-40 {
1669 padding: 40px !important;
1670 }
1671 .spel-md-p-44 {
1672 padding: 44px !important;
1673 }
1674 .spel-md-p-48 {
1675 padding: 48px !important;
1676 }
1677 .spel-md-p-52 {
1678 padding: 52px !important;
1679 }
1680 .spel-md-p-56 {
1681 padding: 56px !important;
1682 }
1683 .spel-md-p-60 {
1684 padding: 60px !important;
1685 }
1686 .spel-md-p-64 {
1687 padding: 64px !important;
1688 }
1689 .spel-md-p-68 {
1690 padding: 68px !important;
1691 }
1692 .spel-md-p-72 {
1693 padding: 72px !important;
1694 }
1695 .spel-md-p-76 {
1696 padding: 76px !important;
1697 }
1698 .spel-md-p-80 {
1699 padding: 80px !important;
1700 }
1701 .spel-md-p-84 {
1702 padding: 84px !important;
1703 }
1704 .spel-md-p-88 {
1705 padding: 88px !important;
1706 }
1707 .spel-md-p-92 {
1708 padding: 92px !important;
1709 }
1710 .spel-md-p-96 {
1711 padding: 96px !important;
1712 }
1713 .spel-md-p-100 {
1714 padding: 100px !important;
1715 }
1716 .spel-md-mt-0 {
1717 margin-top: 0 !important;
1718 }
1719 .spel-md-mt-4 {
1720 margin-top: 4px !important;
1721 }
1722 .spel-md-mt-8 {
1723 margin-top: 8px !important;
1724 }
1725 .spel-md-mt-12 {
1726 margin-top: 12px !important;
1727 }
1728 .spel-md-mt-16 {
1729 margin-top: 16px !important;
1730 }
1731 .spel-md-mt-20 {
1732 margin-top: 20px !important;
1733 }
1734 .spel-md-mt-24 {
1735 margin-top: 24px !important;
1736 }
1737 .spel-md-mt-28 {
1738 margin-top: 28px !important;
1739 }
1740 .spel-md-mt-32 {
1741 margin-top: 32px !important;
1742 }
1743 .spel-md-mt-36 {
1744 margin-top: 36px !important;
1745 }
1746 .spel-md-mt-40 {
1747 margin-top: 40px !important;
1748 }
1749 .spel-md-mt-44 {
1750 margin-top: 44px !important;
1751 }
1752 .spel-md-mt-48 {
1753 margin-top: 48px !important;
1754 }
1755 .spel-md-mt-52 {
1756 margin-top: 52px !important;
1757 }
1758 .spel-md-mt-56 {
1759 margin-top: 56px !important;
1760 }
1761 .spel-md-mt-60 {
1762 margin-top: 60px !important;
1763 }
1764 .spel-md-mt-64 {
1765 margin-top: 64px !important;
1766 }
1767 .spel-md-mt-68 {
1768 margin-top: 68px !important;
1769 }
1770 .spel-md-mt-72 {
1771 margin-top: 72px !important;
1772 }
1773 .spel-md-mt-76 {
1774 margin-top: 76px !important;
1775 }
1776 .spel-md-mt-80 {
1777 margin-top: 80px !important;
1778 }
1779 .spel-md-mt-84 {
1780 margin-top: 84px !important;
1781 }
1782 .spel-md-mt-88 {
1783 margin-top: 88px !important;
1784 }
1785 .spel-md-mt-92 {
1786 margin-top: 92px !important;
1787 }
1788 .spel-md-mt-96 {
1789 margin-top: 96px !important;
1790 }
1791 .spel-md-mt-100 {
1792 margin-top: 100px !important;
1793 }
1794 .spel-md-mr-0 {
1795 margin-right: 0 !important;
1796 }
1797 .spel-md-mr-4 {
1798 margin-right: 4px !important;
1799 }
1800 .spel-md-mr-8 {
1801 margin-right: 8px !important;
1802 }
1803 .spel-md-mr-12 {
1804 margin-right: 12px !important;
1805 }
1806 .spel-md-mr-16 {
1807 margin-right: 16px !important;
1808 }
1809 .spel-md-mr-20 {
1810 margin-right: 20px !important;
1811 }
1812 .spel-md-mr-24 {
1813 margin-right: 24px !important;
1814 }
1815 .spel-md-mr-28 {
1816 margin-right: 28px !important;
1817 }
1818 .spel-md-mr-32 {
1819 margin-right: 32px !important;
1820 }
1821 .spel-md-mr-36 {
1822 margin-right: 36px !important;
1823 }
1824 .spel-md-mr-40 {
1825 margin-right: 40px !important;
1826 }
1827 .spel-md-mr-44 {
1828 margin-right: 44px !important;
1829 }
1830 .spel-md-mr-48 {
1831 margin-right: 48px !important;
1832 }
1833 .spel-md-mr-52 {
1834 margin-right: 52px !important;
1835 }
1836 .spel-md-mr-56 {
1837 margin-right: 56px !important;
1838 }
1839 .spel-md-mr-60 {
1840 margin-right: 60px !important;
1841 }
1842 .spel-md-mr-64 {
1843 margin-right: 64px !important;
1844 }
1845 .spel-md-mr-68 {
1846 margin-right: 68px !important;
1847 }
1848 .spel-md-mr-72 {
1849 margin-right: 72px !important;
1850 }
1851 .spel-md-mr-76 {
1852 margin-right: 76px !important;
1853 }
1854 .spel-md-mr-80 {
1855 margin-right: 80px !important;
1856 }
1857 .spel-md-mr-84 {
1858 margin-right: 84px !important;
1859 }
1860 .spel-md-mr-88 {
1861 margin-right: 88px !important;
1862 }
1863 .spel-md-mr-92 {
1864 margin-right: 92px !important;
1865 }
1866 .spel-md-mr-96 {
1867 margin-right: 96px !important;
1868 }
1869 .spel-md-mr-100 {
1870 margin-right: 100px !important;
1871 }
1872 .spel-md-mb-0 {
1873 margin-bottom: 0 !important;
1874 }
1875 .spel-md-mb-4 {
1876 margin-bottom: 4px !important;
1877 }
1878 .spel-md-mb-8 {
1879 margin-bottom: 8px !important;
1880 }
1881 .spel-md-mb-12 {
1882 margin-bottom: 12px !important;
1883 }
1884 .spel-md-mb-16 {
1885 margin-bottom: 16px !important;
1886 }
1887 .spel-md-mb-20 {
1888 margin-bottom: 20px !important;
1889 }
1890 .spel-md-mb-24 {
1891 margin-bottom: 24px !important;
1892 }
1893 .spel-md-mb-28 {
1894 margin-bottom: 28px !important;
1895 }
1896 .spel-md-mb-32 {
1897 margin-bottom: 32px !important;
1898 }
1899 .spel-md-mb-36 {
1900 margin-bottom: 36px !important;
1901 }
1902 .spel-md-mb-40 {
1903 margin-bottom: 40px !important;
1904 }
1905 .spel-md-mb-44 {
1906 margin-bottom: 44px !important;
1907 }
1908 .spel-md-mb-48 {
1909 margin-bottom: 48px !important;
1910 }
1911 .spel-md-mb-52 {
1912 margin-bottom: 52px !important;
1913 }
1914 .spel-md-mb-56 {
1915 margin-bottom: 56px !important;
1916 }
1917 .spel-md-mb-60 {
1918 margin-bottom: 60px !important;
1919 }
1920 .spel-md-mb-64 {
1921 margin-bottom: 64px !important;
1922 }
1923 .spel-md-mb-68 {
1924 margin-bottom: 68px !important;
1925 }
1926 .spel-md-mb-72 {
1927 margin-bottom: 72px !important;
1928 }
1929 .spel-md-mb-76 {
1930 margin-bottom: 76px !important;
1931 }
1932 .spel-md-mb-80 {
1933 margin-bottom: 80px !important;
1934 }
1935 .spel-md-mb-84 {
1936 margin-bottom: 84px !important;
1937 }
1938 .spel-md-mb-88 {
1939 margin-bottom: 88px !important;
1940 }
1941 .spel-md-mb-92 {
1942 margin-bottom: 92px !important;
1943 }
1944 .spel-md-mb-96 {
1945 margin-bottom: 96px !important;
1946 }
1947 .spel-md-mb-100 {
1948 margin-bottom: 100px !important;
1949 }
1950 .spel-md-ml-0 {
1951 margin-left: 0 !important;
1952 }
1953 .spel-md-ml-4 {
1954 margin-left: 4px !important;
1955 }
1956 .spel-md-ml-8 {
1957 margin-left: 8px !important;
1958 }
1959 .spel-md-ml-12 {
1960 margin-left: 12px !important;
1961 }
1962 .spel-md-ml-16 {
1963 margin-left: 16px !important;
1964 }
1965 .spel-md-ml-20 {
1966 margin-left: 20px !important;
1967 }
1968 .spel-md-ml-24 {
1969 margin-left: 24px !important;
1970 }
1971 .spel-md-ml-28 {
1972 margin-left: 28px !important;
1973 }
1974 .spel-md-ml-32 {
1975 margin-left: 32px !important;
1976 }
1977 .spel-md-ml-36 {
1978 margin-left: 36px !important;
1979 }
1980 .spel-md-ml-40 {
1981 margin-left: 40px !important;
1982 }
1983 .spel-md-ml-44 {
1984 margin-left: 44px !important;
1985 }
1986 .spel-md-ml-48 {
1987 margin-left: 48px !important;
1988 }
1989 .spel-md-ml-52 {
1990 margin-left: 52px !important;
1991 }
1992 .spel-md-ml-56 {
1993 margin-left: 56px !important;
1994 }
1995 .spel-md-ml-60 {
1996 margin-left: 60px !important;
1997 }
1998 .spel-md-ml-64 {
1999 margin-left: 64px !important;
2000 }
2001 .spel-md-ml-68 {
2002 margin-left: 68px !important;
2003 }
2004 .spel-md-ml-72 {
2005 margin-left: 72px !important;
2006 }
2007 .spel-md-ml-76 {
2008 margin-left: 76px !important;
2009 }
2010 .spel-md-ml-80 {
2011 margin-left: 80px !important;
2012 }
2013 .spel-md-ml-84 {
2014 margin-left: 84px !important;
2015 }
2016 .spel-md-ml-88 {
2017 margin-left: 88px !important;
2018 }
2019 .spel-md-ml-92 {
2020 margin-left: 92px !important;
2021 }
2022 .spel-md-ml-96 {
2023 margin-left: 96px !important;
2024 }
2025 .spel-md-ml-100 {
2026 margin-left: 100px !important;
2027 }
2028 }
2029 /* Responsive classes for large screens */
2030 @media (min-width: 992px) {
2031 .spel-lg-m-0 {
2032 margin: 0 !important;
2033 }
2034 .spel-lg-m-4 {
2035 margin: 4px !important;
2036 }
2037 .spel-lg-m-8 {
2038 margin: 8px !important;
2039 }
2040 .spel-lg-m-12 {
2041 margin: 12px !important;
2042 }
2043 .spel-lg-m-16 {
2044 margin: 16px !important;
2045 }
2046 .spel-lg-m-20 {
2047 margin: 20px !important;
2048 }
2049 .spel-lg-m-24 {
2050 margin: 24px !important;
2051 }
2052 .spel-lg-m-28 {
2053 margin: 28px !important;
2054 }
2055 .spel-lg-m-32 {
2056 margin: 32px !important;
2057 }
2058 .spel-lg-m-36 {
2059 margin: 36px !important;
2060 }
2061 .spel-lg-m-40 {
2062 margin: 40px !important;
2063 }
2064 .spel-lg-m-44 {
2065 margin: 44px !important;
2066 }
2067 .spel-lg-m-48 {
2068 margin: 48px !important;
2069 }
2070 .spel-lg-m-52 {
2071 margin: 52px !important;
2072 }
2073 .spel-lg-m-56 {
2074 margin: 56px !important;
2075 }
2076 .spel-lg-m-60 {
2077 margin: 60px !important;
2078 }
2079 .spel-lg-m-64 {
2080 margin: 64px !important;
2081 }
2082 .spel-lg-m-68 {
2083 margin: 68px !important;
2084 }
2085 .spel-lg-m-72 {
2086 margin: 72px !important;
2087 }
2088 .spel-lg-m-76 {
2089 margin: 76px !important;
2090 }
2091 .spel-lg-m-80 {
2092 margin: 80px !important;
2093 }
2094 .spel-lg-m-84 {
2095 margin: 84px !important;
2096 }
2097 .spel-lg-m-88 {
2098 margin: 88px !important;
2099 }
2100 .spel-lg-m-92 {
2101 margin: 92px !important;
2102 }
2103 .spel-lg-m-96 {
2104 margin: 96px !important;
2105 }
2106 .spel-lg-m-100 {
2107 margin: 100px !important;
2108 }
2109 .spel-lg-p-0 {
2110 padding: 0 !important;
2111 }
2112 .spel-lg-p-4 {
2113 padding: 4px !important;
2114 }
2115 .spel-lg-p-8 {
2116 padding: 8px !important;
2117 }
2118 .spel-lg-p-12 {
2119 padding: 12px !important;
2120 }
2121 .spel-lg-p-16 {
2122 padding: 16px !important;
2123 }
2124 .spel-lg-p-20 {
2125 padding: 20px !important;
2126 }
2127 .spel-lg-p-24 {
2128 padding: 24px !important;
2129 }
2130 .spel-lg-p-28 {
2131 padding: 28px !important;
2132 }
2133 .spel-lg-p-32 {
2134 padding: 32px !important;
2135 }
2136 .spel-lg-p-36 {
2137 padding: 36px !important;
2138 }
2139 .spel-lg-p-40 {
2140 padding: 40px !important;
2141 }
2142 .spel-lg-p-44 {
2143 padding: 44px !important;
2144 }
2145 .spel-lg-p-48 {
2146 padding: 48px !important;
2147 }
2148 .spel-lg-p-52 {
2149 padding: 52px !important;
2150 }
2151 .spel-lg-p-56 {
2152 padding: 56px !important;
2153 }
2154 .spel-lg-p-60 {
2155 padding: 60px !important;
2156 }
2157 .spel-lg-p-64 {
2158 padding: 64px !important;
2159 }
2160 .spel-lg-p-68 {
2161 padding: 68px !important;
2162 }
2163 .spel-lg-p-72 {
2164 padding: 72px !important;
2165 }
2166 .spel-lg-p-76 {
2167 padding: 76px !important;
2168 }
2169 .spel-lg-p-80 {
2170 padding: 80px !important;
2171 }
2172 .spel-lg-p-84 {
2173 padding: 84px !important;
2174 }
2175 .spel-lg-p-88 {
2176 padding: 88px !important;
2177 }
2178 .spel-lg-p-92 {
2179 padding: 92px !important;
2180 }
2181 .spel-lg-p-96 {
2182 padding: 96px !important;
2183 }
2184 .spel-lg-p-100 {
2185 padding: 100px !important;
2186 }
2187 .spel-lg-mt-0 {
2188 margin-top: 0 !important;
2189 }
2190 .spel-lg-mt-4 {
2191 margin-top: 4px !important;
2192 }
2193 .spel-lg-mt-8 {
2194 margin-top: 8px !important;
2195 }
2196 .spel-lg-mt-12 {
2197 margin-top: 12px !important;
2198 }
2199 .spel-lg-mt-16 {
2200 margin-top: 16px !important;
2201 }
2202 .spel-lg-mt-20 {
2203 margin-top: 20px !important;
2204 }
2205 .spel-lg-mt-24 {
2206 margin-top: 24px !important;
2207 }
2208 .spel-lg-mt-28 {
2209 margin-top: 28px !important;
2210 }
2211 .spel-lg-mt-32 {
2212 margin-top: 32px !important;
2213 }
2214 .spel-lg-mt-36 {
2215 margin-top: 36px !important;
2216 }
2217 .spel-lg-mt-40 {
2218 margin-top: 40px !important;
2219 }
2220 .spel-lg-mt-44 {
2221 margin-top: 44px !important;
2222 }
2223 .spel-lg-mt-48 {
2224 margin-top: 48px !important;
2225 }
2226 .spel-lg-mt-52 {
2227 margin-top: 52px !important;
2228 }
2229 .spel-lg-mt-56 {
2230 margin-top: 56px !important;
2231 }
2232 .spel-lg-mt-60 {
2233 margin-top: 60px !important;
2234 }
2235 .spel-lg-mt-64 {
2236 margin-top: 64px !important;
2237 }
2238 .spel-lg-mt-68 {
2239 margin-top: 68px !important;
2240 }
2241 .spel-lg-mt-72 {
2242 margin-top: 72px !important;
2243 }
2244 .spel-lg-mt-76 {
2245 margin-top: 76px !important;
2246 }
2247 .spel-lg-mt-80 {
2248 margin-top: 80px !important;
2249 }
2250 .spel-lg-mt-84 {
2251 margin-top: 84px !important;
2252 }
2253 .spel-lg-mt-88 {
2254 margin-top: 88px !important;
2255 }
2256 .spel-lg-mt-92 {
2257 margin-top: 92px !important;
2258 }
2259 .spel-lg-mt-96 {
2260 margin-top: 96px !important;
2261 }
2262 .spel-lg-mt-100 {
2263 margin-top: 100px !important;
2264 }
2265 .spel-lg-mr-0 {
2266 margin-right: 0 !important;
2267 }
2268 .spel-lg-mr-4 {
2269 margin-right: 4px !important;
2270 }
2271 .spel-lg-mr-8 {
2272 margin-right: 8px !important;
2273 }
2274 .spel-lg-mr-12 {
2275 margin-right: 12px !important;
2276 }
2277 .spel-lg-mr-16 {
2278 margin-right: 16px !important;
2279 }
2280 .spel-lg-mr-20 {
2281 margin-right: 20px !important;
2282 }
2283 .spel-lg-mr-24 {
2284 margin-right: 24px !important;
2285 }
2286 .spel-lg-mr-28 {
2287 margin-right: 28px !important;
2288 }
2289 .spel-lg-mr-32 {
2290 margin-right: 32px !important;
2291 }
2292 .spel-lg-mr-36 {
2293 margin-right: 36px !important;
2294 }
2295 .spel-lg-mr-40 {
2296 margin-right: 40px !important;
2297 }
2298 .spel-lg-mr-44 {
2299 margin-right: 44px !important;
2300 }
2301 .spel-lg-mr-48 {
2302 margin-right: 48px !important;
2303 }
2304 .spel-lg-mr-52 {
2305 margin-right: 52px !important;
2306 }
2307 .spel-lg-mr-56 {
2308 margin-right: 56px !important;
2309 }
2310 .spel-lg-mr-60 {
2311 margin-right: 60px !important;
2312 }
2313 .spel-lg-mr-64 {
2314 margin-right: 64px !important;
2315 }
2316 .spel-lg-mr-68 {
2317 margin-right: 68px !important;
2318 }
2319 .spel-lg-mr-72 {
2320 margin-right: 72px !important;
2321 }
2322 .spel-lg-mr-76 {
2323 margin-right: 76px !important;
2324 }
2325 .spel-lg-mr-80 {
2326 margin-right: 80px !important;
2327 }
2328 .spel-lg-mr-84 {
2329 margin-right: 84px !important;
2330 }
2331 .spel-lg-mr-88 {
2332 margin-right: 88px !important;
2333 }
2334 .spel-lg-mr-92 {
2335 margin-right: 92px !important;
2336 }
2337 .spel-lg-mr-96 {
2338 margin-right: 96px !important;
2339 }
2340 .spel-lg-mr-100 {
2341 margin-right: 100px !important;
2342 }
2343 .spel-lg-mb-0 {
2344 margin-bottom: 0 !important;
2345 }
2346 .spel-lg-mb-4 {
2347 margin-bottom: 4px !important;
2348 }
2349 .spel-lg-mb-8 {
2350 margin-bottom: 8px !important;
2351 }
2352 .spel-lg-mb-12 {
2353 margin-bottom: 12px !important;
2354 }
2355 .spel-lg-mb-16 {
2356 margin-bottom: 16px !important;
2357 }
2358 .spel-lg-mb-20 {
2359 margin-bottom: 20px !important;
2360 }
2361 .spel-lg-mb-24 {
2362 margin-bottom: 24px !important;
2363 }
2364 .spel-lg-mb-28 {
2365 margin-bottom: 28px !important;
2366 }
2367 .spel-lg-mb-32 {
2368 margin-bottom: 32px !important;
2369 }
2370 .spel-lg-mb-36 {
2371 margin-bottom: 36px !important;
2372 }
2373 .spel-lg-mb-40 {
2374 margin-bottom: 40px !important;
2375 }
2376 .spel-lg-mb-44 {
2377 margin-bottom: 44px !important;
2378 }
2379 .spel-lg-mb-48 {
2380 margin-bottom: 48px !important;
2381 }
2382 .spel-lg-mb-52 {
2383 margin-bottom: 52px !important;
2384 }
2385 .spel-lg-mb-56 {
2386 margin-bottom: 56px !important;
2387 }
2388 .spel-lg-mb-60 {
2389 margin-bottom: 60px !important;
2390 }
2391 .spel-lg-mb-64 {
2392 margin-bottom: 64px !important;
2393 }
2394 .spel-lg-mb-68 {
2395 margin-bottom: 68px !important;
2396 }
2397 .spel-lg-mb-72 {
2398 margin-bottom: 72px !important;
2399 }
2400 .spel-lg-mb-76 {
2401 margin-bottom: 76px !important;
2402 }
2403 .spel-lg-mb-80 {
2404 margin-bottom: 80px !important;
2405 }
2406 .spel-lg-mb-84 {
2407 margin-bottom: 84px !important;
2408 }
2409 .spel-lg-mb-88 {
2410 margin-bottom: 88px !important;
2411 }
2412 .spel-lg-mb-92 {
2413 margin-bottom: 92px !important;
2414 }
2415 .spel-lg-mb-96 {
2416 margin-bottom: 96px !important;
2417 }
2418 .spel-lg-mb-100 {
2419 margin-bottom: 100px !important;
2420 }
2421 .spel-lg-ml-0 {
2422 margin-left: 0 !important;
2423 }
2424 .spel-lg-ml-4 {
2425 margin-left: 4px !important;
2426 }
2427 .spel-lg-ml-8 {
2428 margin-left: 8px !important;
2429 }
2430 .spel-lg-ml-12 {
2431 margin-left: 12px !important;
2432 }
2433 .spel-lg-ml-16 {
2434 margin-left: 16px !important;
2435 }
2436 .spel-lg-ml-20 {
2437 margin-left: 20px !important;
2438 }
2439 .spel-lg-ml-24 {
2440 margin-left: 24px !important;
2441 }
2442 .spel-lg-ml-28 {
2443 margin-left: 28px !important;
2444 }
2445 .spel-lg-ml-32 {
2446 margin-left: 32px !important;
2447 }
2448 .spel-lg-ml-36 {
2449 margin-left: 36px !important;
2450 }
2451 .spel-lg-ml-40 {
2452 margin-left: 40px !important;
2453 }
2454 .spel-lg-ml-44 {
2455 margin-left: 44px !important;
2456 }
2457 .spel-lg-ml-48 {
2458 margin-left: 48px !important;
2459 }
2460 .spel-lg-ml-52 {
2461 margin-left: 52px !important;
2462 }
2463 .spel-lg-ml-56 {
2464 margin-left: 56px !important;
2465 }
2466 .spel-lg-ml-60 {
2467 margin-left: 60px !important;
2468 }
2469 .spel-lg-ml-64 {
2470 margin-left: 64px !important;
2471 }
2472 .spel-lg-ml-68 {
2473 margin-left: 68px !important;
2474 }
2475 .spel-lg-ml-72 {
2476 margin-left: 72px !important;
2477 }
2478 .spel-lg-ml-76 {
2479 margin-left: 76px !important;
2480 }
2481 .spel-lg-ml-80 {
2482 margin-left: 80px !important;
2483 }
2484 .spel-lg-ml-84 {
2485 margin-left: 84px !important;
2486 }
2487 .spel-lg-ml-88 {
2488 margin-left: 88px !important;
2489 }
2490 .spel-lg-ml-92 {
2491 margin-left: 92px !important;
2492 }
2493 .spel-lg-ml-96 {
2494 margin-left: 96px !important;
2495 }
2496 .spel-lg-ml-100 {
2497 margin-left: 100px !important;
2498 }
2499 }
2500 /* Responsive classes for extra-large screens */
2501 @media (min-width: 1200px) {
2502 .spel-xl-m-0 {
2503 margin: 0 !important;
2504 }
2505 .spel-xl-m-4 {
2506 margin: 4px !important;
2507 }
2508 .spel-xl-m-8 {
2509 margin: 8px !important;
2510 }
2511 .spel-xl-m-12 {
2512 margin: 12px !important;
2513 }
2514 .spel-xl-m-16 {
2515 margin: 16px !important;
2516 }
2517 .spel-xl-m-20 {
2518 margin: 20px !important;
2519 }
2520 .spel-xl-m-24 {
2521 margin: 24px !important;
2522 }
2523 .spel-xl-m-28 {
2524 margin: 28px !important;
2525 }
2526 .spel-xl-m-32 {
2527 margin: 32px !important;
2528 }
2529 .spel-xl-m-36 {
2530 margin: 36px !important;
2531 }
2532 .spel-xl-m-40 {
2533 margin: 40px !important;
2534 }
2535 .spel-xl-m-44 {
2536 margin: 44px !important;
2537 }
2538 .spel-xl-m-48 {
2539 margin: 48px !important;
2540 }
2541 .spel-xl-m-52 {
2542 margin: 52px !important;
2543 }
2544 .spel-xl-m-56 {
2545 margin: 56px !important;
2546 }
2547 .spel-xl-m-60 {
2548 margin: 60px !important;
2549 }
2550 .spel-xl-m-64 {
2551 margin: 64px !important;
2552 }
2553 .spel-xl-m-68 {
2554 margin: 68px !important;
2555 }
2556 .spel-xl-m-72 {
2557 margin: 72px !important;
2558 }
2559 .spel-xl-m-76 {
2560 margin: 76px !important;
2561 }
2562 .spel-xl-m-80 {
2563 margin: 80px !important;
2564 }
2565 .spel-xl-m-84 {
2566 margin: 84px !important;
2567 }
2568 .spel-xl-m-88 {
2569 margin: 88px !important;
2570 }
2571 .spel-xl-m-92 {
2572 margin: 92px !important;
2573 }
2574 .spel-xl-m-96 {
2575 margin: 96px !important;
2576 }
2577 .spel-xl-m-100 {
2578 margin: 100px !important;
2579 }
2580 .spel-xl-p-0 {
2581 padding: 0 !important;
2582 }
2583 .spel-xl-p-4 {
2584 padding: 4px !important;
2585 }
2586 .spel-xl-p-8 {
2587 padding: 8px !important;
2588 }
2589 .spel-xl-p-12 {
2590 padding: 12px !important;
2591 }
2592 .spel-xl-p-16 {
2593 padding: 16px !important;
2594 }
2595 .spel-xl-p-20 {
2596 padding: 20px !important;
2597 }
2598 .spel-xl-p-24 {
2599 padding: 24px !important;
2600 }
2601 .spel-xl-p-28 {
2602 padding: 28px !important;
2603 }
2604 .spel-xl-p-32 {
2605 padding: 32px !important;
2606 }
2607 .spel-xl-p-36 {
2608 padding: 36px !important;
2609 }
2610 .spel-xl-p-40 {
2611 padding: 40px !important;
2612 }
2613 .spel-xl-p-44 {
2614 padding: 44px !important;
2615 }
2616 .spel-xl-p-48 {
2617 padding: 48px !important;
2618 }
2619 .spel-xl-p-52 {
2620 padding: 52px !important;
2621 }
2622 .spel-xl-p-56 {
2623 padding: 56px !important;
2624 }
2625 .spel-xl-p-60 {
2626 padding: 60px !important;
2627 }
2628 .spel-xl-p-64 {
2629 padding: 64px !important;
2630 }
2631 .spel-xl-p-68 {
2632 padding: 68px !important;
2633 }
2634 .spel-xl-p-72 {
2635 padding: 72px !important;
2636 }
2637 .spel-xl-p-76 {
2638 padding: 76px !important;
2639 }
2640 .spel-xl-p-80 {
2641 padding: 80px !important;
2642 }
2643 .spel-xl-p-84 {
2644 padding: 84px !important;
2645 }
2646 .spel-xl-p-88 {
2647 padding: 88px !important;
2648 }
2649 .spel-xl-p-92 {
2650 padding: 92px !important;
2651 }
2652 .spel-xl-p-96 {
2653 padding: 96px !important;
2654 }
2655 .spel-xl-p-100 {
2656 padding: 100px !important;
2657 }
2658 .spel-xl-mt-0 {
2659 margin-top: 0 !important;
2660 }
2661 .spel-xl-mt-4 {
2662 margin-top: 4px !important;
2663 }
2664 .spel-xl-mt-8 {
2665 margin-top: 8px !important;
2666 }
2667 .spel-xl-mt-12 {
2668 margin-top: 12px !important;
2669 }
2670 .spel-xl-mt-16 {
2671 margin-top: 16px !important;
2672 }
2673 .spel-xl-mt-20 {
2674 margin-top: 20px !important;
2675 }
2676 .spel-xl-mt-24 {
2677 margin-top: 24px !important;
2678 }
2679 .spel-xl-mt-28 {
2680 margin-top: 28px !important;
2681 }
2682 .spel-xl-mt-32 {
2683 margin-top: 32px !important;
2684 }
2685 .spel-xl-mt-36 {
2686 margin-top: 36px !important;
2687 }
2688 .spel-xl-mt-40 {
2689 margin-top: 40px !important;
2690 }
2691 .spel-xl-mt-44 {
2692 margin-top: 44px !important;
2693 }
2694 .spel-xl-mt-48 {
2695 margin-top: 48px !important;
2696 }
2697 .spel-xl-mt-52 {
2698 margin-top: 52px !important;
2699 }
2700 .spel-xl-mt-56 {
2701 margin-top: 56px !important;
2702 }
2703 .spel-xl-mt-60 {
2704 margin-top: 60px !important;
2705 }
2706 .spel-xl-mt-64 {
2707 margin-top: 64px !important;
2708 }
2709 .spel-xl-mt-68 {
2710 margin-top: 68px !important;
2711 }
2712 .spel-xl-mt-72 {
2713 margin-top: 72px !important;
2714 }
2715 .spel-xl-mt-76 {
2716 margin-top: 76px !important;
2717 }
2718 .spel-xl-mt-80 {
2719 margin-top: 80px !important;
2720 }
2721 .spel-xl-mt-84 {
2722 margin-top: 84px !important;
2723 }
2724 .spel-xl-mt-88 {
2725 margin-top: 88px !important;
2726 }
2727 .spel-xl-mt-92 {
2728 margin-top: 92px !important;
2729 }
2730 .spel-xl-mt-96 {
2731 margin-top: 96px !important;
2732 }
2733 .spel-xl-mt-100 {
2734 margin-top: 100px !important;
2735 }
2736 .spel-xl-mr-0 {
2737 margin-right: 0 !important;
2738 }
2739 .spel-xl-mr-4 {
2740 margin-right: 4px !important;
2741 }
2742 .spel-xl-mr-8 {
2743 margin-right: 8px !important;
2744 }
2745 .spel-xl-mr-12 {
2746 margin-right: 12px !important;
2747 }
2748 .spel-xl-mr-16 {
2749 margin-right: 16px !important;
2750 }
2751 .spel-xl-mr-20 {
2752 margin-right: 20px !important;
2753 }
2754 .spel-xl-mr-24 {
2755 margin-right: 24px !important;
2756 }
2757 .spel-xl-mr-28 {
2758 margin-right: 28px !important;
2759 }
2760 .spel-xl-mr-32 {
2761 margin-right: 32px !important;
2762 }
2763 .spel-xl-mr-36 {
2764 margin-right: 36px !important;
2765 }
2766 .spel-xl-mr-40 {
2767 margin-right: 40px !important;
2768 }
2769 .spel-xl-mr-44 {
2770 margin-right: 44px !important;
2771 }
2772 .spel-xl-mr-48 {
2773 margin-right: 48px !important;
2774 }
2775 .spel-xl-mr-52 {
2776 margin-right: 52px !important;
2777 }
2778 .spel-xl-mr-56 {
2779 margin-right: 56px !important;
2780 }
2781 .spel-xl-mr-60 {
2782 margin-right: 60px !important;
2783 }
2784 .spel-xl-mr-64 {
2785 margin-right: 64px !important;
2786 }
2787 .spel-xl-mr-68 {
2788 margin-right: 68px !important;
2789 }
2790 .spel-xl-mr-72 {
2791 margin-right: 72px !important;
2792 }
2793 .spel-xl-mr-76 {
2794 margin-right: 76px !important;
2795 }
2796 .spel-xl-mr-80 {
2797 margin-right: 80px !important;
2798 }
2799 .spel-xl-mr-84 {
2800 margin-right: 84px !important;
2801 }
2802 .spel-xl-mr-88 {
2803 margin-right: 88px !important;
2804 }
2805 .spel-xl-mr-92 {
2806 margin-right: 92px !important;
2807 }
2808 .spel-xl-mr-96 {
2809 margin-right: 96px !important;
2810 }
2811 .spel-xl-mr-100 {
2812 margin-right: 100px !important;
2813 }
2814 .spel-xl-mb-0 {
2815 margin-bottom: 0 !important;
2816 }
2817 .spel-xl-mb-4 {
2818 margin-bottom: 4px !important;
2819 }
2820 .spel-xl-mb-8 {
2821 margin-bottom: 8px !important;
2822 }
2823 .spel-xl-mb-12 {
2824 margin-bottom: 12px !important;
2825 }
2826 .spel-xl-mb-16 {
2827 margin-bottom: 16px !important;
2828 }
2829 .spel-xl-mb-20 {
2830 margin-bottom: 20px !important;
2831 }
2832 .spel-xl-mb-24 {
2833 margin-bottom: 24px !important;
2834 }
2835 .spel-xl-mb-28 {
2836 margin-bottom: 28px !important;
2837 }
2838 .spel-xl-mb-32 {
2839 margin-bottom: 32px !important;
2840 }
2841 .spel-xl-mb-36 {
2842 margin-bottom: 36px !important;
2843 }
2844 .spel-xl-mb-40 {
2845 margin-bottom: 40px !important;
2846 }
2847 .spel-xl-mb-44 {
2848 margin-bottom: 44px !important;
2849 }
2850 .spel-xl-mb-48 {
2851 margin-bottom: 48px !important;
2852 }
2853 .spel-xl-mb-52 {
2854 margin-bottom: 52px !important;
2855 }
2856 .spel-xl-mb-56 {
2857 margin-bottom: 56px !important;
2858 }
2859 .spel-xl-mb-60 {
2860 margin-bottom: 60px !important;
2861 }
2862 .spel-xl-mb-64 {
2863 margin-bottom: 64px !important;
2864 }
2865 .spel-xl-mb-68 {
2866 margin-bottom: 68px !important;
2867 }
2868 .spel-xl-mb-72 {
2869 margin-bottom: 72px !important;
2870 }
2871 .spel-xl-mb-76 {
2872 margin-bottom: 76px !important;
2873 }
2874 .spel-xl-mb-80 {
2875 margin-bottom: 80px !important;
2876 }
2877 .spel-xl-mb-84 {
2878 margin-bottom: 84px !important;
2879 }
2880 .spel-xl-mb-88 {
2881 margin-bottom: 88px !important;
2882 }
2883 .spel-xl-mb-92 {
2884 margin-bottom: 92px !important;
2885 }
2886 .spel-xl-mb-96 {
2887 margin-bottom: 96px !important;
2888 }
2889 .spel-xl-mb-100 {
2890 margin-bottom: 100px !important;
2891 }
2892 .spel-xl-ml-0 {
2893 margin-left: 0 !important;
2894 }
2895 .spel-xl-ml-4 {
2896 margin-left: 4px !important;
2897 }
2898 .spel-xl-ml-8 {
2899 margin-left: 8px !important;
2900 }
2901 .spel-xl-ml-12 {
2902 margin-left: 12px !important;
2903 }
2904 .spel-xl-ml-16 {
2905 margin-left: 16px !important;
2906 }
2907 .spel-xl-ml-20 {
2908 margin-left: 20px !important;
2909 }
2910 .spel-xl-ml-24 {
2911 margin-left: 24px !important;
2912 }
2913 .spel-xl-ml-28 {
2914 margin-left: 28px !important;
2915 }
2916 .spel-xl-ml-32 {
2917 margin-left: 32px !important;
2918 }
2919 .spel-xl-ml-36 {
2920 margin-left: 36px !important;
2921 }
2922 .spel-xl-ml-40 {
2923 margin-left: 40px !important;
2924 }
2925 .spel-xl-ml-44 {
2926 margin-left: 44px !important;
2927 }
2928 .spel-xl-ml-48 {
2929 margin-left: 48px !important;
2930 }
2931 .spel-xl-ml-52 {
2932 margin-left: 52px !important;
2933 }
2934 .spel-xl-ml-56 {
2935 margin-left: 56px !important;
2936 }
2937 .spel-xl-ml-60 {
2938 margin-left: 60px !important;
2939 }
2940 .spel-xl-ml-64 {
2941 margin-left: 64px !important;
2942 }
2943 .spel-xl-ml-68 {
2944 margin-left: 68px !important;
2945 }
2946 .spel-xl-ml-72 {
2947 margin-left: 72px !important;
2948 }
2949 .spel-xl-ml-76 {
2950 margin-left: 76px !important;
2951 }
2952 .spel-xl-ml-80 {
2953 margin-left: 80px !important;
2954 }
2955 .spel-xl-ml-84 {
2956 margin-left: 84px !important;
2957 }
2958 .spel-xl-ml-88 {
2959 margin-left: 88px !important;
2960 }
2961 .spel-xl-ml-92 {
2962 margin-left: 92px !important;
2963 }
2964 .spel-xl-ml-96 {
2965 margin-left: 96px !important;
2966 }
2967 .spel-xl-ml-100 {
2968 margin-left: 100px !important;
2969 }
2970 }
2971 /* Spider Elements common CSS */
2972 .fade {
2973 transition: opacity 0.15s linear;
2974 }
2975
2976 a:hover, a:focus {
2977 outline: none;
2978 text-decoration: none;
2979 }
2980
2981 .ezd-grid {
2982 display: grid;
2983 grid-template-columns: repeat(3, 1fr);
2984 grid-column-gap: 25px;
2985 }
2986 .ezd-grid.ezd-column-1 {
2987 grid-template-columns: repeat(1, 1fr);
2988 }
2989 .ezd-grid.ezd-column-2 {
2990 grid-template-columns: repeat(2, 1fr);
2991 }
2992 @media (max-width: 600px) {
2993 .ezd-grid.ezd-column-2 {
2994 grid-template-columns: repeat(1, 1fr);
2995 }
2996 }
2997 .ezd-grid.ezd-column-4 {
2998 grid-template-columns: repeat(4, 1fr);
2999 }
3000 @media (max-width: 991px) {
3001 .ezd-grid.ezd-column-4 {
3002 grid-template-columns: repeat(2, 1fr);
3003 }
3004 }
3005 @media (max-width: 600px) {
3006 .ezd-grid.ezd-column-4 {
3007 grid-template-columns: repeat(1, 1fr);
3008 }
3009 }
3010 .ezd-grid.ezd-column-3 {
3011 grid-template-columns: repeat(3, 1fr);
3012 }
3013 @media (max-width: 991px) {
3014 .ezd-grid.ezd-column-3 {
3015 grid-template-columns: repeat(2, 1fr);
3016 }
3017 }
3018 @media (max-width: 600px) {
3019 .ezd-grid.ezd-column-3 {
3020 grid-template-columns: repeat(1, 1fr);
3021 }
3022 }
3023 .ezd-grid.ezd-column-5 {
3024 grid-template-columns: repeat(5, 1fr);
3025 }
3026 @media (max-width: 991px) {
3027 .ezd-grid.ezd-column-5 {
3028 grid-template-columns: repeat(3, 1fr);
3029 }
3030 }
3031 @media (max-width: 600px) {
3032 .ezd-grid.ezd-column-5 {
3033 grid-template-columns: repeat(1, 1fr);
3034 }
3035 }
3036 .ezd-grid.ezd-column-6 {
3037 grid-template-columns: repeat(6, 1fr);
3038 }
3039 @media (max-width: 991px) {
3040 .ezd-grid.ezd-column-6 {
3041 grid-template-columns: repeat(2, 1fr);
3042 }
3043 }
3044 @media (max-width: 600px) {
3045 .ezd-grid.ezd-column-6 {
3046 grid-template-columns: repeat(1, 1fr);
3047 }
3048 }
3049
3050 .ezd-grid-cols-12 {
3051 grid-template-columns: repeat(12, minmax(0, 1fr));
3052 }
3053
3054 .ezd-grid-column-full,
3055 [class^=ezd-lg-col],
3056 [class^=ezd-md-col],
3057 [class^=ezd-sm-col] {
3058 grid-column: 1/-1;
3059 }
3060
3061 @media (max-width: 991px) {
3062 [class^=ezd-lg-col] {
3063 grid-column: 1/-1;
3064 }
3065 }
3066 @media (min-width: 576px) {
3067 .ezd-sm-col-4 {
3068 grid-column: span 4/span 4;
3069 }
3070 .ezd-sm-col-3 {
3071 grid-column: span 3/span 3;
3072 }
3073 .ezd-sm-col-5 {
3074 grid-column: span 5/span 5;
3075 }
3076 .ezd-sm-col-6 {
3077 grid-column: span 6/span 6;
3078 }
3079 .ezd-sm-col-7 {
3080 grid-column: span 7/span 7;
3081 }
3082 .ezd-sm-col-8 {
3083 grid-column: span 8/span 8;
3084 }
3085 .ezd-sm-col-9 {
3086 grid-column: span 9/span 9;
3087 }
3088 .ezd-sm-col-10 {
3089 grid-column: span 10/span 10;
3090 }
3091 .ezd-sm-col-2 {
3092 grid-column: span 2/span 2;
3093 }
3094 .ezd-sm-col-11 {
3095 grid-column: span 11/span 11;
3096 }
3097 .ezd-sm-col-12 {
3098 grid-column: span 12/span 12;
3099 }
3100 .ezd-justify-content-sm-between {
3101 justify-content: space-between !important;
3102 }
3103 }
3104 @media (min-width: 768px) {
3105 .ezd-md-col-4 {
3106 grid-column: span 4/span 4;
3107 }
3108 .ezd-md-col-3 {
3109 grid-column: span 3/span 3;
3110 }
3111 .ezd-md-col-5 {
3112 grid-column: span 5/span 5;
3113 }
3114 .ezd-md-col-6 {
3115 grid-column: span 6/span 6;
3116 }
3117 .ezd-md-col-7 {
3118 grid-column: span 7/span 7;
3119 }
3120 .ezd-md-col-8 {
3121 grid-column: span 8/span 8;
3122 }
3123 .ezd-md-col-9 {
3124 grid-column: span 9/span 9;
3125 }
3126 .ezd-md-col-10 {
3127 grid-column: span 10/span 10;
3128 }
3129 .ezd-md-col-11 {
3130 grid-column: span 11/span 11;
3131 }
3132 .ezd-md-col-12 {
3133 grid-column: span 12/span 12;
3134 }
3135 .ezd-md-col-2 {
3136 grid-column: span 2/span 2;
3137 }
3138 }
3139 @media (min-width: 992px) {
3140 .ezd-lg-col-4 {
3141 grid-column: span 4/span 4;
3142 }
3143 .ezd-lg-col-3 {
3144 grid-column: span 3/span 3;
3145 }
3146 .ezd-lg-col-5 {
3147 grid-column: span 5/span 5;
3148 }
3149 .ezd-lg-col-6 {
3150 grid-column: span 6/span 6;
3151 }
3152 .ezd-lg-col-8 {
3153 grid-column: span 8/span 8;
3154 }
3155 .ezd-lg-col-7 {
3156 grid-column: span 7/span 7;
3157 }
3158 .ezd-lg-col-9 {
3159 grid-column: span 9/span 9;
3160 }
3161 .ezd-lg-col-10 {
3162 grid-column: span 10/span 10;
3163 }
3164 .ezd-lg-col-11 {
3165 grid-column: span 11/span 11;
3166 }
3167 .ezd-lg-col-12 {
3168 grid-column: span 12/span 12;
3169 }
3170 .ezd-lg-col-2 {
3171 grid-column: span 2/span 2;
3172 }
3173 .ezd-d-lg-block {
3174 display: block !important;
3175 }
3176 }
3177 @media (min-width: 1200px) {
3178 .ezd-xl-col-4 {
3179 grid-column: span 4/span 4;
3180 }
3181 .ezd-xl-col-3 {
3182 grid-column: span 3/span 3;
3183 }
3184 .ezd-xl-col-5 {
3185 grid-column: span 5/span 5;
3186 }
3187 .ezd-xl-col-6 {
3188 grid-column: span 6/span 6;
3189 }
3190 .ezd-xl-col-8 {
3191 grid-column: span 8/span 8;
3192 }
3193 .ezd-xl-col-7 {
3194 grid-column: span 7/span 7;
3195 }
3196 .ezd-xl-col-9 {
3197 grid-column: span 9/span 9;
3198 }
3199 .ezd-xl-col-10 {
3200 grid-column: span 10/span 10;
3201 }
3202 .ezd-xl-col-11 {
3203 grid-column: span 11/span 11;
3204 }
3205 .ezd-xl-col-12 {
3206 grid-column: span 12/span 12;
3207 }
3208 .ezd-xl-col-2 {
3209 grid-column: span 2/span 2;
3210 }
3211 }
3212 .ezd-list-unstyled {
3213 list-style: none !important;
3214 padding: 0;
3215 }
3216
3217 .ezd-tab-content {
3218 display: block;
3219 }
3220
3221 .ezd-btn-circle {
3222 border-radius: 15px;
3223 }
3224
3225 .ezd-rounded-circle {
3226 border-radius: 50% !important;
3227 }
3228
3229 .ezd-ms-3 {
3230 margin-left: 1rem;
3231 }
3232
3233 .ezd-order-lg-last {
3234 order: 6 !important;
3235 }
3236
3237 .ezd-order-lg-first {
3238 order: -1 !important;
3239 }
3240
3241 .ezd-custom-container.ezd-container {
3242 width: 100%;
3243 }
3244 @media (min-width: 1300px) {
3245 .ezd-custom-container.ezd-container {
3246 max-width: 1240px;
3247 }
3248 }
3249 @media (min-width: 1500px) {
3250 .ezd-custom-container.ezd-container {
3251 max-width: 1470px;
3252 }
3253 }
3254
3255 .ezd-container {
3256 padding-left: 0.75rem;
3257 padding-right: 0.75rem;
3258 }
3259 @media (min-width: 1200px) {
3260 .ezd-container {
3261 max-width: 1140px;
3262 }
3263 }
3264 @media (min-width: 992px) {
3265 .ezd-container {
3266 max-width: 960px;
3267 }
3268 }
3269
3270 .eazydocs_shortcode .ezd-container,
3271 .ezd-container {
3272 width: 100%;
3273 margin-right: auto;
3274 margin-left: auto;
3275 }
3276 @media (min-width: 1200px) {
3277 .eazydocs_shortcode .ezd-container,
3278 .ezd-container {
3279 max-width: 1200px;
3280 }
3281 }
3282
3283 .modal {
3284 position: fixed;
3285 top: 0;
3286 left: 0;
3287 z-index: 1055;
3288 display: none;
3289 width: 100%;
3290 height: 100%;
3291 overflow-x: hidden;
3292 overflow-y: auto;
3293 outline: 0;
3294 }
3295
3296 .modal-dialog {
3297 position: relative;
3298 width: auto;
3299 margin: 0.5rem;
3300 pointer-events: none;
3301 }
3302
3303 .modal-content {
3304 position: relative;
3305 display: flex;
3306 flex-direction: column;
3307 width: 100%;
3308 pointer-events: auto;
3309 background-color: #fff;
3310 background-clip: padding-box;
3311 border: 1px solid rgba(0, 0, 0, 0.2);
3312 border-radius: 0.3rem;
3313 outline: 0;
3314 }
3315
3316 .modal.is-visible {
3317 visibility: visible;
3318 display: block;
3319 }
3320
3321 .modal-overlay {
3322 position: fixed;
3323 z-index: 10;
3324 top: 0;
3325 left: 0;
3326 width: 100%;
3327 height: 100%;
3328 transition: visibility 0s linear 0.3s, opacity 0.3s;
3329 }
3330
3331 @media (min-width: 576px) {
3332 .modal-dialog {
3333 margin: 1.75rem auto;
3334 }
3335 }
3336 /** === Utility Classes === **/
3337 .ezd-d-flex {
3338 display: flex;
3339 }
3340
3341 .ezd-circle {
3342 border-radius: 50% !important;
3343 }
3344
3345 .ezd-align-items-center {
3346 align-items: center;
3347 }
3348
3349 .ezd-align-items-start {
3350 align-items: start;
3351 }
3352
3353 .ezd-align-items-end {
3354 align-items: end;
3355 }
3356
3357 .ezd-justify-content-between {
3358 justify-content: space-between;
3359 }
3360
3361 .ezd-justify-content-center {
3362 justify-content: center;
3363 }
3364
3365 .ezd-justify-content-start {
3366 justify-content: start;
3367 }
3368
3369 .ezd-position-relative {
3370 position: relative;
3371 }
3372
3373 .ezd-position-absolute {
3374 position: absolute;
3375 }
3376
3377 .ezd-d-inline-block {
3378 display: inline-block;
3379 }
3380
3381 .ezd-text-center {
3382 text-align: center;
3383 }
3384
3385 .ezd-shadow-lg {
3386 box-shadow: 0 1rem 1.2rem rgba(0, 0, 0, 0.175) !important;
3387 }
3388
3389 .ezd-m-auto {
3390 margin-left: auto;
3391 margin-right: auto;
3392 }
3393
3394 .ezd-ms-auto {
3395 margin-left: auto;
3396 margin-right: 0;
3397 }
3398
3399 .ezd-me-auto {
3400 margin-left: 0;
3401 margin-right: auto;
3402 }
3403
3404 [type=button]:focus,
3405 [type=submit]:focus,
3406 button:focus {
3407 outline: 0 auto -webkit-focus-ring-color;
3408 }
3409
3410 @media (min-width: 992px) {
3411 .ezd-d-md-block {
3412 display: block;
3413 }
3414 }
3415
3416 .spel-accordion .card {
3417 border: 0;
3418 overflow: hidden;
3419 border-radius: unset;
3420 margin-bottom: 1rem;
3421 background: unset;
3422 }
3423 .spel-accordion .card:last-child {
3424 margin-bottom: 0;
3425 }
3426 .spel-accordion .card.border-bottom-none {
3427 border: unset !important;
3428 }
3429 .spel-accordion .card .card-header {
3430 border-radius: 0;
3431 border: 0;
3432 background: transparent;
3433 padding: 0;
3434 }
3435 .spel-accordion .card .card-header .title {
3436 padding: 0;
3437 margin: 0;
3438 background: unset;
3439 }
3440 .spel-accordion .card .card-header .btn-link {
3441 padding: 12px 30px;
3442 border: unset;
3443 border-radius: unset;
3444 text-align: left;
3445 width: 100%;
3446 font-size: unset;
3447 font-weight: 500;
3448 background: #ebebeb;
3449 text-decoration: none;
3450 position: relative;
3451 box-shadow: none;
3452 border: 0;
3453 display: flex;
3454 align-items: center;
3455 }
3456 .spel-accordion .card .card-header .btn-link:focus {
3457 box-shadow: none;
3458 outline: none;
3459 }
3460 .spel-accordion .card .card-header .btn-link .collapsed .collapsed-icon {
3461 display: none;
3462 }
3463 .spel-accordion .card .card-header .btn-link .icon-wrapper {
3464 position: absolute;
3465 right: 0;
3466 }
3467 .spel-accordion .card .card-header .btn-link .icon-wrapper svg {
3468 position: absolute;
3469 right: 0;
3470 top: 0;
3471 transform: unset;
3472 transition: all 0.2s linear;
3473 width: 16px;
3474 height: 16px;
3475 }
3476 .spel-accordion .card .card-header .btn-link .icon-wrapper svg + svg {
3477 display: block;
3478 }
3479 .spel-accordion .card .card-header .btn-link .icon-wrapper .expanded-icon {
3480 display: block;
3481 line-height: 0;
3482 }
3483 .spel-accordion .card .card-header .btn-link .icon-wrapper .collapsed-icon {
3484 display: none;
3485 line-height: 0;
3486 }
3487 .spel-accordion .card .card-header .btn-link.icon-align-left {
3488 padding-left: 60px;
3489 }
3490 .spel-accordion .card .card-header .btn-link.icon-align-left .icon-wrapper {
3491 left: 0;
3492 right: auto;
3493 }
3494 .spel-accordion .card .card-body {
3495 border-style: none;
3496 border-radius: 0;
3497 padding: 18px 30px 24px;
3498 line-height: 26px;
3499 background: #ffffff;
3500 }
3501 @media only screen and (min-width: 320px) and (max-width: 425px) {
3502 .spel-accordion .card .card-body {
3503 padding: 18px 15px 24px;
3504 }
3505 }
3506 .spel-accordion .card .card-body p {
3507 font-size: 16px;
3508 font-weight: 400;
3509 }
3510 .spel-accordion .card .card-body p:last-child {
3511 margin-bottom: 0;
3512 }
3513 .spel-accordion .card.collapsed .card-header .btn-link .icon-wrapper .expanded-icon {
3514 display: none;
3515 }
3516 .spel-accordion .card.collapsed .card-header .btn-link .icon-wrapper .collapsed-icon {
3517 display: block;
3518 }
3519
3520 /*============== Tab Styles ==========*/
3521 .spel-tabs .tab-content {
3522 display: block;
3523 color: #6A737C;
3524 padding: 25px 30px;
3525 border: 1px solid #ebebeb;
3526 border-radius: 0 5px 5px 5px;
3527 background-color: #fff;
3528 position: relative;
3529 margin-top: -1px;
3530 }
3531 .spel-tabs .tab-content p {
3532 margin: 0;
3533 }
3534 .spel-tabs .tab-content .tab_arrow_btn {
3535 background: #0dcaf0;
3536 border-color: #0dcaf0;
3537 color: #fff;
3538 }
3539 .spel-tabs .tab-content .tab_arrow_btn.previous, .spel-tabs .tab-content .tab_arrow_btn.next {
3540 position: absolute;
3541 top: 50%;
3542 transform: translateY(-50%);
3543 padding: 0;
3544 border-radius: 0;
3545 background: #e1ebf0;
3546 border: 0;
3547 color: #4c4cf1;
3548 outline: none;
3549 box-shadow: none;
3550 transition: all 0.4s linear;
3551 height: 32px;
3552 width: 19px;
3553 text-align: center;
3554 opacity: 0;
3555 }
3556 .spel-tabs .tab-content .tab_arrow_btn.previous:hover, .spel-tabs .tab-content .tab_arrow_btn.next:hover {
3557 background: #A77DEF;
3558 color: #fff;
3559 }
3560 .spel-tabs .tab-content .tab_arrow_btn.previous {
3561 left: 0;
3562 }
3563 .spel-tabs .tab-content .tab_arrow_btn.next {
3564 right: 0;
3565 }
3566 .spel-tabs .tab-content:hover .previous,
3567 .spel-tabs .tab-content:hover .next {
3568 opacity: 1;
3569 }
3570
3571 .tab_shortcode {
3572 margin-bottom: 0 !important;
3573 }
3574
3575 .header_tab_items .nav-tabs .numb,
3576 .tab_shortcode .nav-tabs .numb {
3577 width: 20px;
3578 height: 20px;
3579 border-radius: 50%;
3580 background: #A77DEF;
3581 display: inline-block;
3582 text-align: center;
3583 line-height: 20px;
3584 font-size: 12px;
3585 margin-right: 10px;
3586 transition: all 0.2s linear;
3587 color: #ffffff;
3588 }
3589
3590 .header_tab_items .nav-tabs .nav-item .nav-link {
3591 display: flex;
3592 align-items: center;
3593 border: none;
3594 box-shadow: none;
3595 background: transparent;
3596 border-radius: 0;
3597 text-align: center;
3598 font-size: 14px;
3599 font-weight: 400;
3600 color: #fff;
3601 padding: 10px 30px;
3602 text-decoration: none;
3603 transition: all 300ms linear 0s;
3604 gap: 8px;
3605 }
3606 .header_tab_items .nav-tabs .nav-item .nav-link.active {
3607 background: #ffffff;
3608 color: #A77DEF;
3609 }
3610
3611 /* Sticky Tab Styles */
3612 .process_tab_shortcode .previous,
3613 .process_tab_shortcode .next {
3614 position: absolute;
3615 top: 56%;
3616 transform: translateY(-50%);
3617 padding: 0;
3618 border-radius: 0;
3619 background: #e1ebf0;
3620 border: 0;
3621 color: #A77DEF;
3622 outline: none;
3623 box-shadow: none;
3624 transition: all 0.4s linear;
3625 height: 32px;
3626 width: 19px;
3627 text-align: center;
3628 }
3629 .process_tab_shortcode .previous:focus,
3630 .process_tab_shortcode .next:focus {
3631 outline: none;
3632 box-shadow: none;
3633 }
3634 .process_tab_shortcode .previous:hover,
3635 .process_tab_shortcode .next:hover {
3636 background: #A77DEF;
3637 color: #fff;
3638 border-color: transparent #ebebeb;
3639 }
3640 .process_tab_shortcode .next {
3641 right: -30px;
3642 border-radius: 5px 0 0 5px;
3643 }
3644 .process_tab_shortcode .previous {
3645 left: -30px;
3646 border-radius: 0 5px 5px 0;
3647 }
3648 .process_tab_shortcode:hover .next {
3649 right: 0;
3650 }
3651 .process_tab_shortcode:hover .previous {
3652 left: 0;
3653 }
3654
3655 /* Vertical Menu Styles */
3656 .v_menu {
3657 border-bottom: 1px solid #e8ecee;
3658 padding-bottom: 20px;
3659 padding-top: 5px;
3660 margin-bottom: 20px;
3661 }
3662 .v_menu .nav-item {
3663 display: inline-block;
3664 }
3665 .v_menu .nav-item .nav-link {
3666 font-size: 16px;
3667 color: #6A737C;
3668 transition: all 0.2s linear;
3669 padding: 0;
3670 border: 0;
3671 border-radius: 0;
3672 }
3673 .v_menu .nav-item .nav-link span {
3674 width: 20px;
3675 height: 20px;
3676 border-radius: 50%;
3677 background: #e1e3eb;
3678 display: inline-block;
3679 text-align: center;
3680 line-height: 20px;
3681 font-size: 12px;
3682 margin-right: 10px;
3683 transition: all 0.2s linear;
3684 position: relative;
3685 top: -2px;
3686 }
3687 .v_menu .nav-item .nav-link.active, .v_menu .nav-item .nav-link:hover {
3688 color: #A77DEF;
3689 border: 0;
3690 background: transparent;
3691 }
3692 .v_menu .nav-item .nav-link.active span, .v_menu .nav-item .nav-link:hover span {
3693 background: #A77DEF;
3694 color: #fff;
3695 }
3696 .v_menu .nav-item + li {
3697 margin-left: 55px;
3698 }
3699
3700 /* Sticky Tab in Admin Bar */
3701 body.admin-bar .sticky_tab.tab_fixed.sticky_tab_item {
3702 top: -38px;
3703 }
3704
3705 /* Sticky Tab Fixed Position */
3706 .sticky_tab.tab_fixed.sticky_tab_item {
3707 position: fixed;
3708 width: 100%;
3709 top: -70px;
3710 left: 0;
3711 right: 0;
3712 background: #031933;
3713 transform: translateY(70px);
3714 transition: transform 500ms ease, background 500ms ease;
3715 z-index: 30;
3716 }
3717
3718 /* Tabs Slider Styles */
3719 .tabs_sliders {
3720 position: relative;
3721 overflow: hidden;
3722 }
3723 .tabs_sliders .scroller-btn {
3724 position: absolute;
3725 top: 50%;
3726 color: #A77DEF;
3727 font-size: 20px;
3728 cursor: pointer;
3729 transform: translateY(-50%);
3730 left: 0;
3731 width: 40px;
3732 background: #f9f9f9;
3733 box-shadow: 4px 0 9px 1px rgba(0, 0, 0, 0.03);
3734 line-height: 44px;
3735 z-index: 9;
3736 text-align: center;
3737 }
3738 .tabs_sliders .scroller-btn.right {
3739 right: 0;
3740 left: auto;
3741 }
3742 .tabs_sliders .scroller-btn.right::before {
3743 left: -20px;
3744 right: auto;
3745 }
3746 .tabs_sliders .scroller-btn.inactive-left-arrow {
3747 display: none;
3748 }
3749 .tabs_sliders .scroller-btn.inactive-right-arrow {
3750 display: none;
3751 }
3752 .tabs_sliders ul.nav-tabs {
3753 display: flex;
3754 flex-wrap: nowrap;
3755 overflow: hidden;
3756 margin-bottom: -1px;
3757 border: 0;
3758 }
3759 .tabs_sliders ul.nav-tabs .nav-item {
3760 margin: 0;
3761 min-width: fit-content;
3762 }
3763 .tabs_sliders ul.nav-tabs .nav-item .nav-link {
3764 font-size: 16px;
3765 color: #6A737C;
3766 border-radius: 0;
3767 padding: 9px 20px;
3768 background: #f9f9f9;
3769 border: 1px solid #ebebeb;
3770 position: relative;
3771 text-decoration: none;
3772 margin-bottom: 0 !important;
3773 display: flex;
3774 gap: 8px;
3775 align-items: center;
3776 transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
3777 }
3778 .tabs_sliders ul.nav-tabs .nav-item .nav-link::before {
3779 content: "";
3780 width: 0;
3781 height: 2.1px;
3782 background: #A77DEF;
3783 position: absolute;
3784 top: 0;
3785 left: 0;
3786 opacity: 0;
3787 transition: width 0.2s linear;
3788 }
3789 .tabs_sliders ul.nav-tabs .nav-item .nav-link.active {
3790 background: #fff;
3791 color: #242729;
3792 border-color: #ebebeb;
3793 border-bottom-color: transparent;
3794 z-index: 1;
3795 }
3796 .tabs_sliders ul.nav-tabs .nav-item .nav-link.active::before {
3797 opacity: 1;
3798 width: 100%;
3799 }
3800 .tabs_sliders ul.nav-tabs .nav-item .nav-link.active .tab_progress .progress-bar {
3801 background: #a77def;
3802 height: 2px;
3803 }
3804 .tabs_sliders ul.nav-tabs .nav-item .nav-link .tab_progress .progress-bar {
3805 background: transparent;
3806 height: 2px;
3807 }
3808 .tabs_sliders ul.nav-tabs .nav-item:last-child .nav-link {
3809 border-right: 1px solid #ebebeb;
3810 }
3811
3812 /* Process Tab Shortcode */
3813 .process_tab_shortcode .version {
3814 background: #f9f9f9;
3815 padding: 30px;
3816 font-size: 15px;
3817 margin-bottom: 28px;
3818 }
3819 .process_tab_shortcode .version p {
3820 margin-bottom: 20px;
3821 font-size: 15px;
3822 color: #6b707f;
3823 }
3824 .process_tab_shortcode .version p:last-child {
3825 margin-bottom: 0;
3826 }
3827 .process_tab_shortcode .version .v_head {
3828 padding-bottom: 24px;
3829 }
3830 .process_tab_shortcode .version .v_middle p {
3831 margin-bottom: 0;
3832 font-size: 15px;
3833 }
3834 .process_tab_shortcode .version .v_middle p .red {
3835 color: #f12249;
3836 }
3837 .process_tab_shortcode .version .v_middle p .green {
3838 color: #11c52f;
3839 }
3840 .process_tab_shortcode .version .v_footer {
3841 padding-top: 25px;
3842 }
3843 .process_tab_shortcode .version .v_footer p {
3844 margin-bottom: 0;
3845 }
3846
3847 /* Process Tab Shortcode */
3848 .process_tab_shortcode .previous,
3849 .process_tab_shortcode .next {
3850 position: absolute;
3851 top: 56%;
3852 transform: translateY(-50%);
3853 padding: 0;
3854 border-radius: 0;
3855 background: #e1ebf0;
3856 border: 0;
3857 color: #A77DEF;
3858 outline: none;
3859 box-shadow: none;
3860 transition: all 0.4s linear;
3861 height: 32px;
3862 width: 19px;
3863 text-align: center;
3864 }
3865 .process_tab_shortcode .previous:focus,
3866 .process_tab_shortcode .next:focus {
3867 outline: none;
3868 box-shadow: none;
3869 }
3870 .process_tab_shortcode .previous:hover,
3871 .process_tab_shortcode .next:hover {
3872 outline: none;
3873 box-shadow: none;
3874 background: #A77DEF;
3875 color: #fff;
3876 }
3877 .process_tab_shortcode .next {
3878 right: -30px;
3879 border-radius: 5px 0 0 5px;
3880 }
3881 .process_tab_shortcode .previous {
3882 left: -30px;
3883 border-radius: 0 5px 5px 0;
3884 }
3885 .process_tab_shortcode:hover .next {
3886 right: 0;
3887 }
3888 .process_tab_shortcode:hover .previous {
3889 left: 0;
3890 }
3891
3892 /* Sticky Tab Styles */
3893 body.remove .tab_fixed.header_tab_items {
3894 transform: translateY(144px);
3895 }
3896
3897 /* Header Tab Items */
3898 .header_tab_items {
3899 background: #031933;
3900 }
3901 .header_tab_items.tab_fixed .nav.nav-tabs li a svg,
3902 .header_tab_items.tab_fixed .nav.nav-tabs li a i,
3903 .header_tab_items.tab_fixed .nav.nav-tabs li a img {
3904 display: inline-block;
3905 margin-bottom: 0;
3906 position: relative;
3907 margin-right: 4px;
3908 }
3909 .header_tab_items.tab_fixed .header_tab_content {
3910 margin-top: 61px;
3911 }
3912 .header_tab_items.tab_fixed .header_tab_content .tab-pane {
3913 padding: 0;
3914 }
3915 .header_tab_items .nav.nav-tabs {
3916 justify-content: center;
3917 border: none;
3918 }
3919 .header_tab_items .nav.nav-tabs li {
3920 margin-bottom: 0;
3921 }
3922 .header_tab_items .nav.nav-tabs li a {
3923 border: none;
3924 box-shadow: none;
3925 background: transparent;
3926 border-radius: 0;
3927 text-align: center;
3928 font-size: 14px;
3929 font-weight: 400;
3930 color: #fff;
3931 padding: 10px 30px;
3932 text-decoration: none;
3933 }
3934 .header_tab_items .nav.nav-tabs li a svg,
3935 .header_tab_items .nav.nav-tabs li a i,
3936 .header_tab_items .nav.nav-tabs li a img {
3937 display: block;
3938 margin-bottom: 2px;
3939 }
3940 .header_tab_items .nav.nav-tabs li a:hover {
3941 background: #ebebeb;
3942 color: #6A737C;
3943 }
3944 .header_tab_items .nav.nav-tabs li a:hover svg path {
3945 fill: #6A737C;
3946 }
3947 .header_tab_items .nav.nav-tabs li a.active {
3948 background-color: #fff;
3949 color: #A77DEF;
3950 }
3951 .header_tab_items .nav.nav-tabs li a.active svg path {
3952 fill: #A77DEF;
3953 }
3954
3955 /* Auto Tabs Styles */
3956 .tab_shortcode .tab_auto_play .nav-item .nav-link,
3957 .header_tab_items .tab_auto_play .nav-item .nav-link {
3958 position: relative;
3959 overflow: hidden;
3960 }
3961 .tab_shortcode .tab_auto_play .nav-item .nav-link::before,
3962 .header_tab_items .tab_auto_play .nav-item .nav-link::before {
3963 display: none;
3964 }
3965 .tab_shortcode .tab_auto_play .nav-item .nav-link .tab_progress,
3966 .header_tab_items .tab_auto_play .nav-item .nav-link .tab_progress {
3967 position: absolute;
3968 top: 0;
3969 left: 0;
3970 width: 100%;
3971 height: 2px;
3972 }
3973 .tab_shortcode .tab_auto_play .nav-item .nav-link .tab_progress::before,
3974 .header_tab_items .tab_auto_play .nav-item .nav-link .tab_progress::before {
3975 content: "";
3976 position: absolute;
3977 width: 100%;
3978 height: 100%;
3979 left: 0;
3980 top: 0;
3981 opacity: 0.4;
3982 }
3983
3984 /*============ Start doc_feedback_area css ==========*/
3985 .doc_feedback_info {
3986 position: relative;
3987 }
3988
3989 .slider_nav .arrow {
3990 width: 25px;
3991 height: 2px;
3992 background: #989dad;
3993 transition: all 0.3s ease-in-out;
3994 display: block;
3995 margin-top: 12px;
3996 }
3997 .slider_nav .arrow:before, .slider_nav .arrow:after {
3998 content: "";
3999 position: absolute;
4000 width: 15px;
4001 height: 2px;
4002 left: -2px;
4003 background-color: #bdb4b4;
4004 transition: all 0.3s ease-in-out;
4005 }
4006 .slider_nav .prev,
4007 .slider_nav .next {
4008 height: 25px;
4009 width: 27px;
4010 position: absolute;
4011 top: 50%;
4012 transform: translateY(-50%);
4013 transition: all 0.3s ease-in-out;
4014 cursor: pointer;
4015 }
4016 .slider_nav .prev:hover,
4017 .slider_nav .next:hover {
4018 width: 40px;
4019 }
4020 .slider_nav .prev:hover .arrow,
4021 .slider_nav .next:hover .arrow {
4022 width: 40px;
4023 background: #d92c0a;
4024 }
4025 .slider_nav .prev:hover .arrow:before, .slider_nav .prev:hover .arrow:after,
4026 .slider_nav .next:hover .arrow:before,
4027 .slider_nav .next:hover .arrow:after {
4028 background: #d92c0a;
4029 }
4030 .slider_nav .prev {
4031 left: 0;
4032 }
4033 .slider_nav .prev .arrow:before {
4034 top: 17px;
4035 transform: rotate(45deg);
4036 }
4037 .slider_nav .prev .arrow:after {
4038 top: 7px;
4039 transform: rotate(-45deg);
4040 }
4041 .slider_nav .prev:hover {
4042 left: -20px;
4043 }
4044 .slider_nav .next {
4045 right: 0;
4046 }
4047 .slider_nav .next .arrow:before {
4048 transform: rotate(-45deg);
4049 right: -1px;
4050 left: auto;
4051 bottom: 6px;
4052 }
4053 .slider_nav .next .arrow:after {
4054 transform: rotate(45deg);
4055 right: -1px;
4056 left: auto;
4057 top: 6px;
4058 }
4059 .slider_nav .next:hover {
4060 right: -20px;
4061 }
4062
4063 .doc_feedback_slider {
4064 max-width: 770px;
4065 margin: 0 auto 0;
4066 text-align: center;
4067 }
4068 .doc_feedback_slider .item .author_img {
4069 border-radius: 50%;
4070 width: 60px;
4071 height: 60px;
4072 overflow: hidden;
4073 margin: 0 auto 43px;
4074 }
4075 .doc_feedback_slider .item p {
4076 font-size: 18px;
4077 color: #000;
4078 line-height: 30px;
4079 margin-bottom: 38px;
4080 font-weight: 300;
4081 }
4082 .doc_feedback_slider .item h5 {
4083 font-size: 20px;
4084 font-weight: 500;
4085 color: rgba(0, 0, 0, 0);
4086 }
4087 .doc_feedback_slider .item h6 {
4088 font-size: 16px;
4089 color: #989dad;
4090 font-weight: 400;
4091 margin-bottom: 0;
4092 }
4093
4094 /*============ End doc_feedback_area css ==========*/
4095 /*============ Start doc_action_area css ==========*/
4096 .doc_action_area {
4097 position: relative;
4098 z-index: 1;
4099 padding: 93px 0;
4100 }
4101 .doc_action_area .overlay_bg {
4102 background-image: linear-gradient(180deg, rgba(4, 133, 161, 0.6) 0%, rgba(29, 39, 70, 0.6) 100%);
4103 }
4104 .doc_action_area .action_btn {
4105 border: 1px solid #A77DEF;
4106 }
4107 .doc_action_area .action_btn:hover {
4108 background: transparent;
4109 border-color: #fff;
4110 color: #fff;
4111 }
4112
4113 .action_text h2 {
4114 color: #fff;
4115 font-size: 40px;
4116 font-weight: 500;
4117 }
4118 .action_text p {
4119 font-size: 18px;
4120 line-height: 28px;
4121 color: #b4b9c8;
4122 margin-bottom: 0;
4123 }
4124
4125 /*============ End doc_action_area css ==========*/
4126 /*============= spider_testimonial_area css ================*/
4127 .doc_testimonial_slider {
4128 padding-right: 100px;
4129 }
4130 .doc_testimonial_slider .item {
4131 padding-left: 15px;
4132 position: relative;
4133 padding-top: 10px;
4134 }
4135 .doc_testimonial_slider .item:before {
4136 content: "";
4137 font-weight: 400;
4138 font-size: 150px;
4139 color: #4c4cf1;
4140 opacity: 0.1;
4141 position: absolute;
4142 left: -5px;
4143 width: 38px;
4144 height: 38px;
4145 line-height: 130px;
4146 top: 0;
4147 z-index: 1;
4148 }
4149 .doc_testimonial_slider .item h3 {
4150 font-size: 34px;
4151 line-height: 52px;
4152 font-weight: 400;
4153 margin-bottom: 20px;
4154 margin-top: 0;
4155 }
4156 .doc_testimonial_slider .item .name {
4157 font-size: 14px;
4158 font-weight: 700;
4159 color: #6a737c;
4160 margin-bottom: 20px;
4161 }
4162
4163 .doc_testimonial_slider {
4164 padding-right: 100px;
4165 }
4166 .doc_testimonial_slider .item {
4167 padding-left: 15px;
4168 position: relative;
4169 padding-top: 10px;
4170 }
4171 .doc_testimonial_slider .item:before {
4172 content: "";
4173 font-weight: 400;
4174 font-size: 150px;
4175 color: #4c4cf1;
4176 opacity: 0.1;
4177 position: absolute;
4178 left: -5px;
4179 width: 38px;
4180 height: 38px;
4181 line-height: 130px;
4182 top: 0;
4183 z-index: 1;
4184 }
4185 .doc_testimonial_slider .item h3 {
4186 font-size: 34px;
4187 line-height: 52px;
4188 font-weight: 400;
4189 margin-bottom: 20px;
4190 margin-top: 0;
4191 }
4192 .doc_testimonial_slider .item .name {
4193 font-size: 14px;
4194 font-weight: 700;
4195 color: #6a737c;
4196 margin-bottom: 20px;
4197 }
4198 .doc_testimonial_slider .item .name h5 {
4199 font-size: 20px;
4200 margin-bottom: 10px;
4201 margin-top: 0;
4202 text-transform: capitalize;
4203 }
4204 .doc_testimonial_slider .item .name span {
4205 font-weight: 400;
4206 }
4207 .doc_testimonial_slider .item .sign {
4208 display: inline-block;
4209 }
4210 .doc_testimonial_slider .slick-dots {
4211 position: relative;
4212 bottom: 0;
4213 text-align: left;
4214 margin-top: 30px;
4215 padding-left: 15px;
4216 }
4217 .doc_testimonial_slider .slick-dots li {
4218 width: auto;
4219 height: auto;
4220 }
4221 .doc_testimonial_slider .slick-dots li button {
4222 width: 8px;
4223 height: 8px;
4224 border-radius: 50%;
4225 background: #dbdbfc;
4226 transition: all 0.2s;
4227 }
4228 .doc_testimonial_slider .slick-dots li button:before {
4229 display: none;
4230 }
4231 .doc_testimonial_slider .slick-dots li :nth-child(even) button {
4232 background: #a5a5f8;
4233 }
4234 .doc_testimonial_slider .slick-dots li.slick-active button {
4235 background: #4c4cf1;
4236 }
4237 .doc_testimonial_slider .action_text h2 {
4238 color: #fff;
4239 font-size: 40px;
4240 font-weight: 500;
4241 }
4242 .doc_testimonial_slider .action_text p {
4243 font-size: 18px;
4244 line-height: 28px;
4245 color: #b4b9c8;
4246 margin-bottom: 0;
4247 }
4248
4249 .doc_img_slider .item {
4250 text-align: center;
4251 position: relative;
4252 padding-bottom: 25px;
4253 z-index: 1;
4254 }
4255 .doc_img_slider .item img {
4256 display: inline-block;
4257 border-radius: 20px;
4258 }
4259 .doc_img_slider .item .dot {
4260 border-radius: 0;
4261 position: absolute;
4262 left: 60px;
4263 bottom: 0;
4264 z-index: -1;
4265 }
4266 .doc_img_slider .item .round {
4267 border-radius: 50%;
4268 position: absolute;
4269 z-index: -1;
4270 }
4271 .doc_img_slider .item .round.one {
4272 width: 150px;
4273 height: 150px;
4274 right: 60px;
4275 top: 60px;
4276 background-image: linear-gradient(50deg, rgb(87, 54, 254) 0%, rgb(253, 64, 110) 100%);
4277 opacity: 0.1;
4278 }
4279 .doc_img_slider .item .round.two {
4280 width: 280px;
4281 height: 280px;
4282 right: 0;
4283 top: 50%;
4284 margin-top: -140px;
4285 background-image: linear-gradient(50deg, rgb(87, 54, 254) 0%, rgb(253, 64, 110) 100%);
4286 }
4287 .doc_img_slider .item.slick-active .one {
4288 animation: zoomIn 0.8s linear both 0.4s;
4289 }
4290 .doc_img_slider .item.slick-active .two {
4291 animation: zoomIn 0.8s linear both 0.5s;
4292 }
4293
4294 .slick-arrow.slick-hidden {
4295 display: none;
4296 }
4297
4298 /*============= Allfolio Testimonial Area CSS ================*/
4299 .testimonial_area_nine .navigation {
4300 display: flex;
4301 column-gap: 5px;
4302 }
4303 .testimonial_area_nine .navigation .swiper-button-prev,
4304 .testimonial_area_nine .navigation .swiper-button-next {
4305 width: 50px;
4306 height: 50px;
4307 background: rgba(70, 69, 71, 0.3882352941);
4308 color: #141414;
4309 border-radius: 50%;
4310 top: 65%;
4311 transition: all 0.3s;
4312 opacity: 0;
4313 }
4314 .testimonial_area_nine .navigation .swiper-button-prev:after,
4315 .testimonial_area_nine .navigation .swiper-button-next:after {
4316 font-size: 15px;
4317 }
4318 .testimonial_area_nine .navigation .swiper-button-prev:hover,
4319 .testimonial_area_nine .navigation .swiper-button-next:hover {
4320 background: #e86a42;
4321 color: #fff;
4322 }
4323 .testimonial_area_nine .navigation .swiper-button-prev {
4324 left: -130px;
4325 }
4326 @media (max-width: 560px) {
4327 .testimonial_area_nine .navigation .swiper-button-prev {
4328 position: relative;
4329 left: 0 !important;
4330 right: 0 !important;
4331 opacity: 1 !important;
4332 }
4333 }
4334 .testimonial_area_nine .navigation .swiper-button-next {
4335 right: -130px;
4336 }
4337 @media (max-width: 560px) {
4338 .testimonial_area_nine .navigation .swiper-button-next {
4339 position: relative;
4340 left: 0 !important;
4341 right: 0 !important;
4342 opacity: 1 !important;
4343 }
4344 }
4345 .testimonial_area_nine:hover .swiper-button-prev {
4346 left: -100px;
4347 opacity: 1;
4348 }
4349 @media (max-width: 1440px) {
4350 .testimonial_area_nine:hover .swiper-button-prev {
4351 left: -40px;
4352 }
4353 }
4354 .testimonial_area_nine:hover .swiper-button-next {
4355 right: -100px;
4356 opacity: 1;
4357 }
4358 @media (max-width: 1440px) {
4359 .testimonial_area_nine:hover .swiper-button-next {
4360 right: -40px;
4361 }
4362 }
4363
4364 .testimonial-slider-inner {
4365 overflow: hidden;
4366 }
4367 .testimonial-slider-inner .testimonial-item {
4368 display: flex;
4369 border: 2px solid rgba(239, 72, 83, 0.1);
4370 padding: 50px 110px 50px 50px;
4371 border-radius: 8px;
4372 margin-top: 280px;
4373 align-items: flex-start;
4374 margin-bottom: 78px;
4375 flex-direction: row-reverse;
4376 transition: 0.3s;
4377 box-shadow: unset;
4378 background: transparent;
4379 }
4380 @media (max-width: 1200px) {
4381 .testimonial-slider-inner .testimonial-item {
4382 padding: 50px 30px;
4383 }
4384 }
4385 @media (max-width: 991px) {
4386 .testimonial-slider-inner .testimonial-item {
4387 flex-direction: column;
4388 }
4389 }
4390 @media (max-width: 560px) {
4391 .testimonial-slider-inner .testimonial-item {
4392 padding: 50px 24px;
4393 }
4394 }
4395 .testimonial-slider-inner .testimonial-item:hover {
4396 box-shadow: unset !important;
4397 }
4398 .testimonial-slider-inner .testimonial-item p {
4399 font-size: 26px;
4400 font-weight: 500;
4401 color: #626060;
4402 letter-spacing: 0.01em;
4403 font-family: "IBM Plex Sans", sans-serif;
4404 margin-bottom: 30px;
4405 line-height: 1.5;
4406 margin-top: 30px;
4407 }
4408 @media (max-width: 1200px) {
4409 .testimonial-slider-inner .testimonial-item p {
4410 font-size: 20px;
4411 }
4412 }
4413 .testimonial-slider-inner .testimonial-item .quote-img-top {
4414 margin-top: -150px;
4415 width: fit-content;
4416 }
4417 @media (max-width: 991px) {
4418 .testimonial-slider-inner .testimonial-item .quote-img-top {
4419 margin-top: 20px;
4420 }
4421 }
4422 .testimonial-slider-inner .testimonial-item .quote-img-bottom {
4423 position: absolute;
4424 right: 50px;
4425 bottom: 0;
4426 }
4427 .testimonial-slider-inner .testimonial-content {
4428 flex: 1;
4429 }
4430 .testimonial-slider-inner .author-info .author-name {
4431 font-size: 18px;
4432 color: #7f7e7e;
4433 font-weight: 600;
4434 letter-spacing: 0.01em;
4435 margin-bottom: 0;
4436 }
4437 .testimonial-slider-inner .author-info .author-position {
4438 font-size: 18px;
4439 font-weight: 400;
4440 color: #646464;
4441 letter-spacing: 0.01em;
4442 }
4443 .testimonial-slider-inner .author-image {
4444 padding: 14px;
4445 border-radius: 8px;
4446 background: #2e2d31;
4447 margin-left: 40px;
4448 margin-top: -330px;
4449 }
4450 @media (max-width: 991px) {
4451 .testimonial-slider-inner .author-image {
4452 margin-left: 0;
4453 }
4454 }
4455 .testimonial-slider-inner .author-image img {
4456 border-radius: 8px;
4457 width: revert-layer;
4458 }
4459
4460 /*============ testimonial slider 4 ===========*/
4461 .testimonial-area-4 .section-tag {
4462 padding-top: 0;
4463 }
4464 .testimonial-area-4 .section-tag .heading {
4465 padding-left: 0;
4466 color: #b9b9ba;
4467 }
4468 .testimonial-area-4 .section-tag .p {
4469 padding-left: 0;
4470 color: #b9b9ba;
4471 }
4472 .testimonial-area-4 .section-tag .title-text {
4473 padding-left: 13px;
4474 }
4475 .testimonial-area-4 :is(.swiper-button-next, .swiper-button-prev) {
4476 --swiper-navigation-size: 17px;
4477 --swiper-navigation-color: #9d9ca0;
4478 -webkit-transition: 0.3s ease-out;
4479 transition: 0.3s ease-out;
4480 }
4481 .testimonial-area-4 :is(.swiper-button-next, .swiper-button-prev)::before {
4482 content: "";
4483 top: 20.5px;
4484 position: absolute;
4485 width: 34px;
4486 height: 3px;
4487 background: #9d9ca0;
4488 border-radius: 20px;
4489 -webkit-transition: 0.3s ease-out;
4490 transition: 0.3s ease-out;
4491 }
4492 .testimonial-area-4 :is(.swiper-button-next, .swiper-button-prev)::after {
4493 font-family: "Font Awesome 5 Free";
4494 font-weight: 900;
4495 }
4496 .testimonial-area-4 :is(.swiper-button-next, .swiper-button-prev):hover::before {
4497 width: 43px;
4498 }
4499 .testimonial-area-4 :is(.swiper-button-next, .swiper-rtl .swiper-button-prev) {
4500 right: -50px;
4501 }
4502 .testimonial-area-4 :is(.swiper-button-next, .swiper-rtl .swiper-button-prev)::after {
4503 content: "\f054";
4504 }
4505 .testimonial-area-4 :is(.swiper-button-next, .swiper-rtl .swiper-button-prev)::before {
4506 left: auto;
4507 right: 12px;
4508 }
4509 .testimonial-area-4 :is(.swiper-button-next, .swiper-rtl .swiper-button-prev):hover {
4510 right: -60px;
4511 }
4512 .testimonial-area-4 :is(.swiper-button-prev, .swiper-rtl .swiper-button-next) {
4513 left: -55px;
4514 }
4515 .testimonial-area-4 :is(.swiper-button-prev, .swiper-rtl .swiper-button-next)::after {
4516 content: "\f053";
4517 }
4518 .testimonial-area-4 :is(.swiper-button-prev, .swiper-rtl .swiper-button-next)::before {
4519 left: 12px;
4520 }
4521 .testimonial-area-4 :is(.swiper-button-prev, .swiper-rtl .swiper-button-next):hover {
4522 left: -65px;
4523 }
4524
4525 :is(.testimonial-slide-4) .testimonial-slider-img img {
4526 width: 100%;
4527 }
4528
4529 @media screen and (min-width: 1200px) {
4530 :is(.testimonial-slide-4) .testimonial-slider-img img {
4531 width: auto;
4532 }
4533 }
4534 :is(.testimonial-slide-4) .testimonial-content {
4535 padding-top: 30px;
4536 }
4537
4538 @media screen and (min-width: 768px) {
4539 :is(.testimonial-slide-4) .testimonial-content {
4540 padding-top: 0;
4541 }
4542 }
4543 @media screen and (min-width: 1441px) {
4544 :is(.testimonial-slide-4) .testimonial-content {
4545 padding-right: 50px;
4546 padding-left: 20px;
4547 }
4548 }
4549 :is(.testimonial-slide-4) .testimonial-content .section-tag .heading {
4550 padding-left: 0;
4551 }
4552
4553 :is(.testimonial-slide-4) .testimonial-content p {
4554 font-size: 16px;
4555 line-height: 2;
4556 font-style: italic;
4557 padding-left: 0;
4558 margin-bottom: 0;
4559 }
4560
4561 @media screen and (min-width: 768px) {
4562 :is(.testimonial-slide-4) .testimonial-content p {
4563 font-size: 20px;
4564 line-height: 35px;
4565 }
4566 }
4567 :is(.testimonial-slide-4) .testimonial-content hr {
4568 background: #e6e6e6;
4569 width: 100%;
4570 height: 1px;
4571 margin: 0 0;
4572 padding: 0;
4573 border: none;
4574 border-radius: 0;
4575 opacity: 1;
4576 margin-top: 2.8125rem;
4577 }
4578
4579 :is(.testimonial-slide-4) .testimonial-content .testimonial-author-info {
4580 display: flex;
4581 align-items: center;
4582 justify-content: space-between;
4583 margin-top: 0.625rem;
4584 }
4585
4586 :is(.testimonial-slide-4) .testimonial-content .author h5 {
4587 margin-bottom: 0;
4588 }
4589
4590 /*============ testimonial slider 6 ===========*/
4591 .feedback_section_one .slick-arrow-one {
4592 position: absolute;
4593 right: 0;
4594 top: -80px;
4595 }
4596
4597 .feedback-slider-one {
4598 margin-left: -15px;
4599 margin-right: 15px;
4600 }
4601 .feedback-slider-one .item {
4602 margin-left: 15px;
4603 margin-right: 15px;
4604 }
4605
4606 .feedback-block-one {
4607 background: #f9ffe1;
4608 border: 2px solid #000;
4609 border-radius: 30px;
4610 padding: 40px 40px 45px;
4611 transition: all 0.25s linear;
4612 }
4613 .feedback-block-one:hover {
4614 background: #d2f34c;
4615 }
4616 .feedback-block-one .logo {
4617 height: 50px;
4618 }
4619 .feedback-block-one .logo img {
4620 max-height: 100%;
4621 }
4622 .feedback-block-one h3 {
4623 font-size: 36px;
4624 line-height: 1.3888em;
4625 color: #000;
4626 margin-top: 50px;
4627 margin-bottom: 50px;
4628 }
4629 .feedback-block-one .name {
4630 font-size: 16px;
4631 margin-bottom: 0;
4632 }
4633 .feedback-block-one .name span {
4634 font-weight: 500;
4635 }
4636 .feedback-block-one .review {
4637 border-top: 2px solid #000;
4638 padding-top: 40px;
4639 }
4640 @media (max-width: 1024px) {
4641 .feedback-block-one .review {
4642 margin-top: 30px !important;
4643 padding-top: 20px !important;
4644 }
4645 }
4646 .feedback-block-one .review .text-md {
4647 font-size: 20px;
4648 font-weight: 500;
4649 }
4650 .feedback-block-one .star-rating {
4651 font-size: 15px;
4652 font-family: eicons;
4653 display: inline-block;
4654 }
4655 .feedback-block-one .star-rating i {
4656 font-style: normal;
4657 position: relative;
4658 display: inline-block;
4659 color: rgba(0, 0, 0, 0.4784313725);
4660 }
4661 .feedback-block-one .star-rating i::before {
4662 content: "\e934";
4663 display: block;
4664 font-size: inherit;
4665 font-family: inherit;
4666 position: absolute;
4667 overflow: hidden;
4668 color: #000;
4669 top: 0;
4670 left: 0;
4671 }
4672 .feedback-block-one .star-rating .elementor-star-empty:before {
4673 content: none;
4674 }
4675 .feedback-block-one .star-rating .elementor-star-1:before {
4676 width: 10%;
4677 }
4678 .feedback-block-one .star-rating .elementor-star-2:before {
4679 width: 20%;
4680 }
4681 .feedback-block-one .star-rating .elementor-star-3:before {
4682 width: 30%;
4683 }
4684 .feedback-block-one .star-rating .elementor-star-4:before {
4685 width: 40%;
4686 }
4687 .feedback-block-one .star-rating .elementor-star-5:before {
4688 width: 50%;
4689 }
4690 .feedback-block-one .star-rating .elementor-star-6:before {
4691 width: 60%;
4692 }
4693 .feedback-block-one .star-rating .elementor-star-7:before {
4694 width: 70%;
4695 }
4696 .feedback-block-one .star-rating .elementor-star-8:before {
4697 width: 80%;
4698 }
4699 .feedback-block-one .star-rating .elementor-star-9:before {
4700 width: 90%;
4701 }
4702 .feedback-block-one.color-two {
4703 background: #755146;
4704 border: none;
4705 }
4706 .feedback-block-one.color-two:hover {
4707 background: #249f47;
4708 }
4709 .feedback-block-one.color-two .review {
4710 border-top: 1px solid #fff;
4711 }
4712 .feedback-block-one.color-two .review ul li a {
4713 color: #fff;
4714 }
4715
4716 /*========= feedback-slider-two css =============*/
4717 .feedback-section-two .slick-dots {
4718 margin: 40px 0 0 15px;
4719 position: relative;
4720 bottom: 0;
4721 text-align: left;
4722 }
4723 .feedback-section-two .slick-dots li {
4724 height: auto;
4725 width: auto;
4726 margin: 0;
4727 }
4728 .feedback-section-two .slick-dots li button {
4729 text-indent: -50000px;
4730 width: 8px;
4731 height: 8px;
4732 border-radius: 50%;
4733 margin: 0 5px;
4734 background: #e4e4e4;
4735 transition: all 0.3s ease-in-out;
4736 padding: 0;
4737 }
4738 .feedback-section-two .slick-dots li.slick-active button {
4739 background: #00bf58;
4740 }
4741
4742 .feedback-slider-two .item {
4743 margin: 50px 25px;
4744 }
4745
4746 .feedback-block-two {
4747 box-shadow: 0 20px 35px rgba(0, 16, 34, 0.03);
4748 background: #ffffff;
4749 border-radius: 10px;
4750 padding: 38px 45px 40px;
4751 border: 0;
4752 }
4753 .feedback-block-two:hover {
4754 background: #fff;
4755 }
4756 .feedback-block-two h3 {
4757 font-size: 20px;
4758 line-height: 2em;
4759 color: #212529;
4760 font-weight: 500;
4761 margin-top: 30px;
4762 margin-bottom: 45px;
4763 }
4764 .feedback-block-two .review {
4765 border: 0;
4766 padding-top: 0;
4767 }
4768 .feedback-block-two .review .text-md {
4769 font-size: 28px;
4770 color: #00bf58;
4771 line-height: 1;
4772 }
4773 .feedback-block-two .review .star-rating {
4774 letter-spacing: 7px;
4775 }
4776 .feedback-block-two .review .star-rating i:before {
4777 color: #ffcc4a;
4778 }
4779 .feedback-block-two .block-footer {
4780 padding-top: 35px;
4781 border-top: 1px solid #000;
4782 }
4783 .feedback-block-two .block-footer .author-img {
4784 width: 50px;
4785 height: 50px;
4786 }
4787 .feedback-block-two .block-footer .name {
4788 margin-bottom: 0;
4789 font-size: 18px;
4790 font-weight: 500;
4791 color: #212529;
4792 line-height: 1;
4793 }
4794 .feedback-block-two .block-footer span {
4795 font-size: 16px;
4796 }
4797 .feedback-block-two .block-footer .quote-icon {
4798 width: 40px;
4799 }
4800
4801 .feedback-section-seven .slick-arrow-one {
4802 position: absolute;
4803 right: 0;
4804 top: -80px;
4805 }
4806 .feedback-section-seven .slick-arrow-one li {
4807 color: #000;
4808 }
4809 .feedback-section-seven .slick-arrow-one li:hover {
4810 background: #00bf58;
4811 color: #fff;
4812 }
4813 .feedback-section-seven .feedback-slider-one {
4814 margin-left: -35px;
4815 margin-right: -35px;
4816 }
4817 .feedback-section-seven .feedback-slider-one .item {
4818 margin: 0 35px;
4819 }
4820 @media (max-width: 1024px) {
4821 .feedback-section-seven .feedback-slider-one .item .feedback-block-one .review {
4822 margin-top: 0 !important;
4823 padding-top: 0 !important;
4824 }
4825 }
4826
4827 .feedback-block-three {
4828 position: relative;
4829 padding: 45px 55px 40px;
4830 background: #FAFAFA;
4831 border-radius: 10px;
4832 border: 0;
4833 }
4834 .feedback-block-three .quote-icon {
4835 position: absolute;
4836 top: 58px;
4837 right: 55px;
4838 width: 41px;
4839 }
4840 .feedback-block-three .review {
4841 border: 0;
4842 padding-top: 0;
4843 }
4844 .feedback-block-three .review .text-md {
4845 font-size: 28px;
4846 color: #00bf58;
4847 }
4848 .feedback-block-three .star-rating i {
4849 letter-spacing: 7px;
4850 }
4851 .feedback-block-three .star-rating i:before {
4852 color: #ffcc4a;
4853 }
4854 .feedback-block-three h3 {
4855 font-size: 24px;
4856 line-height: 2em;
4857 font-weight: 400;
4858 color: #212529;
4859 }
4860 .feedback-block-three .name {
4861 margin-bottom: 0;
4862 font-size: 20px;
4863 color: #212529;
4864 font-weight: 500;
4865 }
4866 .feedback-block-three .name span {
4867 opacity: 0.5;
4868 font-weight: 400;
4869 padding-left: 5px;
4870 }
4871 .feedback-block-three .author-img {
4872 width: 60px;
4873 height: 60px;
4874 }
4875 .feedback-block-three:hover {
4876 background: #fff;
4877 }
4878
4879 /*==== testimonial 8 css ====*/
4880 .feedback-section-three {
4881 position: relative;
4882 }
4883 .feedback-section-three .feedback_slider {
4884 max-width: 950px;
4885 margin: 0 auto;
4886 overflow: hidden;
4887 }
4888 .feedback-section-three .carousel-inner p {
4889 font-size: 36px;
4890 line-height: 1.888em;
4891 color: #000;
4892 margin-bottom: 55px;
4893 }
4894 .feedback-section-three .name {
4895 font-size: 22px;
4896 color: #000;
4897 font-weight: 500;
4898 }
4899 .feedback-section-three .name:before {
4900 content: "";
4901 position: absolute;
4902 width: 30px;
4903 height: 2px;
4904 background: #000;
4905 left: -45px;
4906 top: 16px;
4907 }
4908 .feedback-section-three .name span {
4909 font-weight: 400;
4910 }
4911 .feedback-section-three .carousel-indicators {
4912 position: static;
4913 width: 100%;
4914 margin: 60px 0 0;
4915 display: flex;
4916 justify-content: center;
4917 }
4918 .feedback-section-three .carousel-indicators button {
4919 width: 80px;
4920 height: 80px;
4921 border-radius: 50%;
4922 border: 3px solid transparent;
4923 opacity: 1;
4924 margin: 0 10px;
4925 transition: all 0.2s linear;
4926 text-indent: 0;
4927 padding: 0;
4928 }
4929 .feedback-section-three .carousel-indicators button:focus, .feedback-section-three .carousel-indicators button:hover {
4930 outline: none;
4931 border-color: #29503d;
4932 background: transparent;
4933 }
4934 .feedback-section-three .carousel-indicators button.active {
4935 border-color: #29503d;
4936 }
4937 .feedback-section-three .carousel-btn {
4938 top: 65px;
4939 width: 50px;
4940 height: 50px;
4941 border-radius: 50%;
4942 border: 1px solid rgba(0, 0, 0, 0.15);
4943 opacity: 1;
4944 line-height: 48px;
4945 text-align: center;
4946 font-size: 30px;
4947 color: #000;
4948 padding: 0;
4949 transition: all 0.3s linear;
4950 position: absolute;
4951 }
4952 .feedback-section-three .carousel-btn:hover, .feedback-section-three .carousel-btn:focus {
4953 border-color: #29503d;
4954 background: #29503d;
4955 color: #fff;
4956 }
4957 .feedback-section-three .carousel-btn.carousel-control-next {
4958 right: 0;
4959 left: auto;
4960 }
4961
4962 @media (max-width: 1024px) {
4963 .feedback-section-four .ezd-grid {
4964 display: block;
4965 }
4966 }
4967 .feedback-section-four .bg-wrapper {
4968 background: #1ea243;
4969 padding: 125px 110px 165px 110px;
4970 transition: 0.3s;
4971 }
4972 @media (min-width: 1200px) and (max-width: 1399px) {
4973 .feedback-section-four .bg-wrapper {
4974 padding: 80px 100px 130px 70px;
4975 }
4976 }
4977 @media (max-width: 1199px) {
4978 .feedback-section-four .bg-wrapper {
4979 padding: 60px 70px 100px 35px;
4980 }
4981 }
4982 @media (max-width: 991px) {
4983 .feedback-section-four .bg-wrapper {
4984 padding: 45px 15px 100px;
4985 }
4986 }
4987 .feedback-section-four .bg-wrapper .icon {
4988 width: 80px;
4989 height: 80px;
4990 background: rgba(255, 255, 255, 0.16);
4991 }
4992 .feedback-section-four .bg-wrapper p {
4993 font-size: 40px;
4994 color: #fff;
4995 line-height: 1.7em;
4996 margin: 50px 0 95px;
4997 transition: 0.3s;
4998 }
4999 @media (min-width: 1200px) and (max-width: 1399px) {
5000 .feedback-section-four .bg-wrapper p {
5001 font-size: 35px;
5002 margin-bottom: 70px;
5003 }
5004 }
5005 @media (min-width: 992px) and (max-width: 1199px) {
5006 .feedback-section-four .bg-wrapper p {
5007 font-size: 25px;
5008 margin-bottom: 70px;
5009 }
5010 }
5011 @media (max-width: 991px) {
5012 .feedback-section-four .bg-wrapper p {
5013 font-size: 25px;
5014 margin: 30px 0 40px;
5015 }
5016 }
5017 .feedback-section-four .bg-wrapper .name {
5018 font-size: 20px;
5019 transition: 0.3s;
5020 }
5021 .feedback-section-four .bg-wrapper .slider-arrows {
5022 display: flex;
5023 position: absolute;
5024 left: 0;
5025 bottom: 0;
5026 margin-bottom: 0;
5027 list-style: none;
5028 }
5029 @media (max-width: 991px) {
5030 .feedback-section-four .bg-wrapper .slider-arrows {
5031 right: 0;
5032 padding: 0;
5033 }
5034 }
5035 .feedback-section-four .bg-wrapper .slider-arrows li {
5036 width: 60px;
5037 height: 60px;
5038 font-size: 22px;
5039 text-align: center;
5040 line-height: 65px;
5041 color: #fff;
5042 cursor: pointer;
5043 transition: all 0.2s linear;
5044 border-left: 1px solid rgba(255, 255, 255, 0.14);
5045 background: rgba(255, 255, 255, 0.13);
5046 }
5047 .feedback-section-four .bg-wrapper .slider-arrows li:hover {
5048 background: #fff;
5049 color: #000;
5050 }
5051
5052 .feedback-section-four .slider-wrapper {
5053 position: absolute;
5054 width: 79vw;
5055 right: -42vw;
5056 bottom: 10%;
5057 }
5058 @media (min-width: 1921px) {
5059 .feedback-section-four .slider-wrapper {
5060 right: -28vw;
5061 width: 55vw;
5062 }
5063 }
5064 @media (max-width: 1600px) {
5065 .feedback-section-four .slider-wrapper {
5066 right: -30vw;
5067 }
5068 }
5069 @media (max-width: 1400px) {
5070 .feedback-section-four .slider-wrapper {
5071 right: -12vw;
5072 }
5073 }
5074 @media (min-width: 992px) and (max-width: 1199px) {
5075 .feedback-section-four .slider-wrapper {
5076 width: 75vw;
5077 bottom: 10%;
5078 right: -22vw;
5079 }
5080 }
5081 @media (min-width: 1200px) and (max-width: 1399px) {
5082 .feedback-section-four .slider-wrapper {
5083 right: -28vw;
5084 }
5085 }
5086 @media (max-width: 991px) {
5087 .feedback-section-four .slider-wrapper {
5088 width: 100%;
5089 position: static;
5090 }
5091 }
5092 .feedback-section-four .slider-wrapper .item {
5093 margin: 0 15px;
5094 }
5095 .feedback-section-four .slider-wrapper .slick-dots {
5096 position: absolute;
5097 margin: 0;
5098 padding: 0;
5099 bottom: -14%;
5100 left: 20%;
5101 width: auto;
5102 }
5103 @media (max-width: 1024px) {
5104 .feedback-section-four .slider-wrapper .slick-dots {
5105 position: relative;
5106 margin-top: 15px;
5107 left: 0;
5108 bottom: 0;
5109 display: block;
5110 }
5111 }
5112 .feedback-section-four .slider-wrapper .slick-dots li {
5113 width: auto;
5114 height: auto;
5115 margin: 0 auto;
5116 }
5117 .feedback-section-four .slider-wrapper .slick-dots li button {
5118 text-indent: -50000px;
5119 width: 8px;
5120 height: 8px;
5121 border-radius: 50%;
5122 margin: 0 5px;
5123 background: #e4e4e4;
5124 transition: all 0.3s ease-in-out;
5125 padding: 0;
5126 }
5127 .feedback-section-four .slider-wrapper .slick-dots li.slick-active button {
5128 background: #00bf58;
5129 }
5130 @media (min-width: 1400px) {
5131 .feedback-section-four .col-lg-6 {
5132 flex: 0 0 auto;
5133 width: 58.33333333% !important;
5134 }
5135 }
5136 @media (max-width: 1024px) {
5137 .feedback-section-four .col-lg-6 {
5138 width: 100%;
5139 max-width: 100%;
5140 padding-left: 15px;
5141 padding-right: 15px;
5142 margin-bottom: 40px;
5143 }
5144 }
5145 @media (min-width: 992px) {
5146 .feedback-section-four .col-lg-6 {
5147 flex: 0 0 auto;
5148 width: 50%;
5149 }
5150 }
5151
5152 .testimonial-area.testimonial-area-8 {
5153 position: relative;
5154 z-index: 1;
5155 }
5156 .testimonial-area.testimonial-area-8 .navigation {
5157 max-width: 1610px;
5158 position: relative;
5159 padding-top: 15px;
5160 overflow: hidden;
5161 margin-left: 0;
5162 margin-right: 0;
5163 }
5164 .testimonial-area.testimonial-area-8 .navigation::after {
5165 content: "";
5166 position: absolute;
5167 bottom: 7px;
5168 left: 120px;
5169 width: 100%;
5170 height: 1px;
5171 max-width: 1500px;
5172 background: #d6d9dc;
5173 }
5174 .testimonial-area.testimonial-area-8 .swiper-button-prev,
5175 .testimonial-area.testimonial-area-8 .swiper-button-next {
5176 --swiper-navigation-size: 14px;
5177 --swiper-navigation-color: #0c0d0e;
5178 top: auto;
5179 bottom: auto;
5180 left: 0;
5181 }
5182 .testimonial-area.testimonial-area-8 .swiper-button-prev::after,
5183 .testimonial-area.testimonial-area-8 .swiper-button-next::after {
5184 transform: translateY(-50%);
5185 }
5186 .testimonial-area.testimonial-area-8 .swiper-button-prev:hover,
5187 .testimonial-area.testimonial-area-8 .swiper-button-next:hover {
5188 color: #ef4953;
5189 }
5190 .testimonial-area.testimonial-area-8 .swiper-button-prev:hover::before,
5191 .testimonial-area.testimonial-area-8 .swiper-button-next:hover::before {
5192 background: #ef4953;
5193 }
5194 .testimonial-area.testimonial-area-8 .swiper-button-prev::before {
5195 content: "";
5196 top: 34%;
5197 right: -10px;
5198 position: absolute;
5199 width: 20px;
5200 height: 1px;
5201 background: #0c0d0e;
5202 transform: translateY(-50%);
5203 -webkit-transition: 0.3s ease-out;
5204 transition: 0.3s ease-out;
5205 }
5206 .testimonial-area.testimonial-area-8 .swiper-button-next {
5207 left: 80px;
5208 }
5209 .testimonial-area.testimonial-area-8 .swiper-button-next::before {
5210 content: "";
5211 top: 34%;
5212 left: -10px;
5213 position: absolute;
5214 width: 20px;
5215 height: 1px;
5216 background: #0c0d0e;
5217 transform: translateY(-50%);
5218 -webkit-transition: 0.3s ease-out;
5219 transition: 0.3s ease-out;
5220 }
5221 .testimonial-area.testimonial-area-8 .testimonial-slider-active {
5222 padding: 0 15px;
5223 }
5224 .testimonial-area.testimonial-area-8 .spel_review_content {
5225 font-size: 36px;
5226 color: #3d3d4e;
5227 line-height: 1.5;
5228 margin-top: 10px;
5229 font-family: "Playfair Display", serif;
5230 }
5231
5232 /*----------------- Video Playlist Widget CSS ------------------*/
5233 .ycp .belah .luhur {
5234 height: 74px;
5235 }
5236 .ycp .belah .luhur span.about {
5237 display: none;
5238 }
5239 .ycp .belah .luhur span.tombol {
5240 font-size: 14px;
5241 }
5242 .ycp .belah .luhur span.tombol.vid-next {
5243 float: right;
5244 margin-right: 0;
5245 }
5246
5247 .video_list_area.bg_gradient {
5248 background: linear-gradient(180deg, #ffffff 0%, #f0f3f7 100%);
5249 }
5250 .video_list_area.bg_gradient .accordion .card {
5251 box-shadow: 0 0.3px 0.9px rgba(29, 56, 70, 0.1), 0 1.6px 3.6px rgba(29, 56, 70, 0.13);
5252 }
5253 .video_list_area .art-video-player .art-bottom {
5254 overflow: visible;
5255 }
5256 .video_list_area .art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-highlight span {
5257 background: transparent !important;
5258 }
5259 .video_list_area .art-video-player .art-state {
5260 width: 80px;
5261 height: 80px;
5262 }
5263 .video_list_area .art-video-player .art-state ion-icon {
5264 font-size: 28px;
5265 }
5266 .video_list_area .art-video-player .art-mask-show.add_icon .art-danmuku:before {
5267 content: "";
5268 background: rgba(54, 56, 149, 0.5);
5269 border-radius: 5px 5px 0 0;
5270 position: absolute;
5271 left: 0;
5272 top: 0;
5273 height: 100%;
5274 width: 100%;
5275 z-index: 11;
5276 }
5277 .video_list_area.theatermode {
5278 overflow: hidden;
5279 }
5280 .video_list_area.theatermode .row > * {
5281 flex: 0 0 100%;
5282 max-width: 100%;
5283 transition: all 0.3s linear 0s;
5284 }
5285 .video_list_area.theatermode .video_list {
5286 width: 100%;
5287 margin-top: 100px;
5288 }
5289 .video_list_area.theatermode .video_list .video_list_inner .card .card-body .nav li {
5290 width: 100%;
5291 display: block;
5292 }
5293
5294 .art-auto-size {
5295 height: 530px !important;
5296 align-items: flex-start !important;
5297 }
5298
5299 .art-video-player.art-subtitle-show.art-layer-show.art-control-show.art-mask-show.art-fullscreen:hover .art-bottom {
5300 bottom: 0 !important;
5301 }
5302
5303 .art-video-player.art-fullscreen-web {
5304 height: 100% !important;
5305 position: relative !important;
5306 z-index: 10 !important;
5307 }
5308
5309 .art-video-player {
5310 width: 100% !important;
5311 }
5312
5313 .mCSB_scrollTools {
5314 width: 8px;
5315 background: #fff;
5316 border-radius: 4px;
5317 }
5318 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
5319 width: 8px;
5320 background: #b8c3cc;
5321 }
5322 .mCSB_scrollTools .mCSB_draggerRail {
5323 width: 8px;
5324 background: #fff;
5325 }
5326
5327 .video_list .play_list_title {
5328 color: #1d2746;
5329 margin-bottom: 32px;
5330 }
5331 .video_list .mCustomScrollBox {
5332 padding-right: 20px;
5333 }
5334 .video_list .mCSB_scrollTools {
5335 width: 8px;
5336 background: #fff;
5337 border-radius: 4px;
5338 }
5339 .video_list .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
5340 width: 8px;
5341 background: #b8c3cc;
5342 }
5343 .video_list .mCSB_scrollTools .mCSB_draggerRail {
5344 width: 8px;
5345 background: #fff;
5346 }
5347 .video_list .video_list_inner {
5348 max-height: 472px;
5349 padding-right: 0;
5350 }
5351 .video_list .video_list_inner .accordion {
5352 display: grid;
5353 row-gap: 12px;
5354 }
5355 .video_list .video_list_inner .accordion .accordion-panel {
5356 border: none;
5357 border-radius: 0 5px 5px 5px !important;
5358 overflow: hidden;
5359 margin-bottom: 0;
5360 }
5361 .video_list .video_list_inner .accordion .accordion-panel .spe-accordion {
5362 border: none;
5363 border-radius: 0 !important;
5364 background-color: transparent;
5365 margin-bottom: 0;
5366 }
5367 .video_list .video_list_inner .accordion .accordion-panel .spe-accordion:last-child {
5368 margin-bottom: 0;
5369 }
5370 .video_list .video_list_inner .accordion .accordion-panel .spe-accordion .card-header {
5371 border: none !important;
5372 background: transparent;
5373 padding: 0;
5374 }
5375 .video_list .video_list_inner .accordion .accordion-panel .spe-accordion .card-header .list_title {
5376 font-weight: 700;
5377 font-family: "Roboto", sans-serif;
5378 }
5379 .video_list .video_list_inner .accordion .accordion-panel .spe-accordion .card-header button {
5380 padding: 16px 30px 16px 30px;
5381 font-size: 18px;
5382 color: #242729;
5383 font-weight: 500;
5384 text-decoration: none;
5385 margin-bottom: 0;
5386 border: none;
5387 outline: none;
5388 text-transform: inherit;
5389 display: flex;
5390 align-items: center;
5391 background: rgba(255, 255, 255, 0);
5392 }
5393 .video_list .video_list_inner .accordion .accordion-panel .spe-accordion .card-header button .list_count {
5394 color: #7f8493;
5395 font-size: 14px;
5396 font-weight: 400;
5397 position: relative;
5398 margin-left: 11px;
5399 background: transparent;
5400 height: 22px;
5401 display: flex;
5402 align-items: center;
5403 line-height: 1.2;
5404 padding: 3px 7px 5px 7px;
5405 transition: all 0.3s;
5406 min-width: 20px;
5407 border-radius: 2em;
5408 }
5409 .video_list .video_list_inner .accordion .accordion-panel .spe-accordion .card-header button .plus-minus {
5410 margin-left: auto;
5411 right: 20px;
5412 position: absolute;
5413 }
5414 .video_list .video_list_inner .accordion .accordion-panel .spe-accordion .card-header button .plus-minus svg {
5415 line-height: 26px;
5416 color: #425466;
5417 }
5418
5419 .video_list .video_list_inner .accordion .accordion-panel .spe-accordion .card-header button #plus {
5420 display: block;
5421 }
5422
5423 .video_list .video_list_inner .accordion .spe-collapsed .spe-accordion .card-header button #plus {
5424 display: none;
5425 }
5426
5427 .video_list .video_list_inner .accordion .spe-collapsed .spe-accordion .card-header button #minus {
5428 display: block !important;
5429 }
5430
5431 .video_list .video_list_inner .accordion .accordion-panel .spe-accordion .card-header button #minus {
5432 display: none;
5433 }
5434
5435 .video_list .video_list_inner .card .card-body {
5436 padding: 8px 35px 25px 35px;
5437 }
5438 .video_list .video_list_inner .card .card-body .nav {
5439 border: none;
5440 }
5441 .video_list .video_list_inner .card .card-body .nav li {
5442 margin-bottom: 20px;
5443 }
5444 .video_list .video_list_inner .card .card-body .nav li a {
5445 padding: 0;
5446 border: none;
5447 text-decoration: none;
5448 }
5449 .video_list .video_list_inner .card .card-body .nav li a .media .ezd-d-flex {
5450 padding-right: 20px;
5451 }
5452 .video_list .video_list_inner .card .card-body .nav li a .media .ezd-d-flex .video_tab_img {
5453 border-radius: 5px;
5454 position: relative;
5455 overflow: hidden;
5456 }
5457 .video_list .video_list_inner .card .card-body .nav li a .media .ezd-d-flex .video_tab_img img {
5458 height: 100%;
5459 }
5460 .video_list .video_list_inner .card .card-body .nav li a .media .ezd-d-flex .video_tab_img:before {
5461 content: "";
5462 background: rgba(29, 39, 70, 0.55);
5463 position: absolute;
5464 left: 0;
5465 top: 0;
5466 width: 100%;
5467 height: 100%;
5468 opacity: 0;
5469 transition: all 300ms linear 0s;
5470 }
5471 .video_list .video_list_inner .card .card-body .nav li a .media .ezd-d-flex .video_tab_img:after {
5472 content: "\f215";
5473 font: normal normal normal 20px/1 ionicons;
5474 left: 0;
5475 top: 50%;
5476 transform: translateY(-50%);
5477 width: 100%;
5478 text-align: center;
5479 position: absolute;
5480 color: #fff;
5481 opacity: 0;
5482 transition: all 300ms linear 0s;
5483 }
5484 .video_list .video_list_inner .card .card-body .nav li a .media .media-body h4 {
5485 color: #1d2746;
5486 font-size: 14px;
5487 font-weight: 500;
5488 margin-bottom: 3px;
5489 transition: all 300ms linear 0s;
5490 margin-top: 0;
5491 }
5492 .video_list .video_list_inner .card .card-body .nav li a .media .media-body .list {
5493 line-height: 1;
5494 }
5495 .video_list .video_list_inner .card .card-body .nav li a .media .media-body .list div {
5496 display: inline-block;
5497 color: #7f8493;
5498 font-weight: 400;
5499 font-size: 12px;
5500 margin-right: 20px;
5501 }
5502 .video_list .video_list_inner .card .card-body .nav li a .media .media-body .list div:last-child {
5503 margin-right: 0;
5504 }
5505 .video_list .video_list_inner .card .card-body .nav li a .media .media-body .list .dot {
5506 position: relative;
5507 }
5508 .video_list .video_list_inner .card .card-body .nav li a .media .media-body .list .dot::before {
5509 content: "";
5510 width: 3px;
5511 height: 3px;
5512 background: #7f8493;
5513 border-radius: 50%;
5514 position: absolute;
5515 left: -12px;
5516 top: 62%;
5517 transform: translateY(-62%);
5518 }
5519 .video_list .video_list_inner .card .card-body .nav li a:hover .media.d-flex .video_tab_img:before, .video_list .video_list_inner .card .card-body .nav li a:hover .media.d-flex .video_tab_img:after, .video_list .video_list_inner .card .card-body .nav li a.active .media.d-flex .video_tab_img:before, .video_list .video_list_inner .card .card-body .nav li a.active .media.d-flex .video_tab_img:after {
5520 opacity: 1;
5521 }
5522 .video_list .video_list_inner .card .card-body .nav li a:hover .media.d-flex .media-body h4, .video_list .video_list_inner .card .card-body .nav li a.active .media.d-flex .media-body h4 {
5523 color: #4c4cf1;
5524 }
5525 .video_list .video_list_inner .card .card-body .nav li:hover .media.d-flex .media-body h4 {
5526 text-decoration-color: #4c4cf1;
5527 text-decoration: underline;
5528 text-underline-offset: 4px;
5529 }
5530 .video_list .video_list_inner .card .card-body .nav li:last-child {
5531 margin-bottom: 0;
5532 }
5533
5534 .art-video-player.art-layer-show .art-layers {
5535 display: none !important;
5536 }
5537
5538 .art-control.art-control-control13.art-control-onlyText {
5539 display: none;
5540 }
5541
5542 /* End Video Area css
5543 ============================================================================================ */
5544 /* Video Slider Area css
5545 ============================================================================================ */
5546 .gallery-thumbs {
5547 margin-top: 0;
5548 padding-left: 20px;
5549 padding-right: 20px;
5550 }
5551 .gallery-thumbs .item {
5552 padding-left: 10px;
5553 padding-right: 10px;
5554 }
5555 .gallery-thumbs .item img {
5556 max-width: 100%;
5557 }
5558 .gallery-thumbs .item .caption_text {
5559 padding-left: 15px;
5560 padding-right: 15px;
5561 }
5562 .gallery-thumbs .item .caption_text svg {
5563 width: 23px;
5564 height: 23px;
5565 }
5566 .gallery-thumbs .item .caption_text h4 {
5567 font-size: 12px;
5568 margin-top: 8px;
5569 }
5570
5571 .next svg,
5572 .prev svg {
5573 width: 10px;
5574 }
5575
5576 .prev {
5577 left: 8px;
5578 }
5579
5580 .next {
5581 right: 8px;
5582 }
5583
5584 .video_slider_area .gallery_inner_thumb {
5585 position: relative;
5586 border-radius: 5px;
5587 overflow: hidden;
5588 }
5589 .video_slider_area .gallery_inner_thumb:before {
5590 content: "";
5591 height: 100%;
5592 width: 100%;
5593 background: linear-gradient(180deg, rgba(44, 44, 81, 0) 0%, rgba(44, 44, 81, 0.9) 73.67%);
5594 position: absolute;
5595 left: 0;
5596 bottom: 0;
5597 border-radius: 5px;
5598 top: 7px;
5599 }
5600 .video_slider_area .gallery-top .art-video-player.art-auto-size {
5601 height: 410px !important;
5602 }
5603 .video_slider_area .gallery-top .art-video-player.art-auto-size:hover .art-bottom {
5604 transform: translateY(0);
5605 }
5606 .video_slider_area .gallery-top .art-video-player {
5607 border-radius: 10px;
5608 overflow: hidden;
5609 }
5610 .video_slider_area .gallery-top .art-video-player .art-bottom {
5611 bottom: 0;
5612 background: rgba(235, 245, 250, 0.1);
5613 border-radius: 0 0 5px 5px;
5614 transform: translateY(48px);
5615 overflow: visible !important;
5616 }
5617 .video_slider_area .gallery-top .art-video-player .art-bottom .art-controls .art-control {
5618 color: #fff;
5619 }
5620 .video_slider_area .gallery-top .art-video-player .art-bottom .art-controls .art-control.art-control-subtitle[aria-label="Hide subtitle"] svg {
5621 fill: rgba(235, 245, 250, 0.5);
5622 }
5623 .video_slider_area .gallery-top .art-video-player .art-bottom .art-controls .art-control.art-control-subtitle[aria-label="Show subtitle"] svg {
5624 fill: #fff;
5625 }
5626 .video_slider_area .gallery-top .art-video-player .art-bottom .art-controls .art-control.art-control-setting[aria-label="Hide subtitle"] svg {
5627 fill: #fff;
5628 }
5629 .video_slider_area .gallery-top .art-video-player .art-bottom .art-controls .art-control.art-control-setting[aria-label="Show subtitle"] svg {
5630 fill: rgba(235, 245, 250, 0.5);
5631 }
5632 .video_slider_area .gallery-top .art-video-player .art-bottom .art-controls .art-control.art-control-control13.art-control-onlyText {
5633 display: none;
5634 }
5635 .video_slider_area .gallery-top .art-video-player .art-bottom .art-controls .art-control .art-icon svg {
5636 fill: rgba(235, 245, 250, 0.5);
5637 }
5638 .video_slider_area .gallery-top .art-video-player .art-bottom .art-controls .art-control .art-icon svg:hover {
5639 fill: #fff !important;
5640 }
5641 .video_slider_area .gallery-top .art-video-player .art-bottom .art-controls .art-control-volume .art-volume-panel .art-volume-slider-handle {
5642 background: #fff;
5643 }
5644 .video_slider_area .gallery-top .art-video-player .art-bottom .art-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:after {
5645 background: rgba(235, 245, 250, 0.5);
5646 }
5647 .video_slider_area .gallery-top .art-video-player .art-bottom .art-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before, .video_slider_area .gallery-top .art-video-player .art-bottom .art-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:after {
5648 background: #fff;
5649 }
5650 .video_slider_area .gallery-top .art-video-player .art-bottom .art-progress {
5651 background: rgba(235, 245, 250, 0.1);
5652 }
5653 .video_slider_area .gallery-top .art-video-player .art-bottom .art-progress .art-control-progress {
5654 height: 2px;
5655 transition: all 300ms linear 0s;
5656 }
5657 .video_slider_area .gallery-top .art-video-player .art-bottom .art-progress .art-control-progress:hover {
5658 height: 4px;
5659 margin-top: -2px;
5660 }
5661 .video_slider_area.theatermode .gallery-top .artplayer-app,
5662 .video_slider_area.theatermode .gallery-top .art-video-player {
5663 height: 717px !important;
5664 }
5665 .video_slider_area.theatermode .gallery-top .slide_text {
5666 margin-top: 30px;
5667 padding-left: 0;
5668 padding-bottom: 4px;
5669 }
5670 .video_slider_area.theatermode .gallery-top .slide_text p {
5671 max-width: 100%;
5672 }
5673
5674 .slide_text {
5675 padding-left: 8px;
5676 transition: all 300ms linear 0s;
5677 }
5678 .slide_text a {
5679 text-decoration: none !important;
5680 }
5681 .slide_text a .video_title {
5682 font-size: 26px;
5683 font-weight: 500;
5684 margin: 0;
5685 }
5686 .slide_text p {
5687 font-size: 16px;
5688 color: #54595d;
5689 max-width: 420px;
5690 margin: 25px 0 12px;
5691 transition: all 300ms linear 0s;
5692 }
5693 .slide_text .video_user a {
5694 color: #425466;
5695 font-size: 14px;
5696 margin-right: 15px;
5697 display: inline-block;
5698 }
5699 .slide_text .video_user img {
5700 width: auto;
5701 max-width: 100%;
5702 display: inline-block;
5703 position: relative;
5704 top: -1px;
5705 }
5706 .slide_text .video_user ion-icon {
5707 position: relative;
5708 top: 2px;
5709 }
5710
5711 .gallery_main_area {
5712 position: relative;
5713 }
5714 .gallery_main_area .prev,
5715 .gallery_main_area .next {
5716 position: absolute;
5717 top: 50%;
5718 transform: translateY(-50%);
5719 cursor: pointer;
5720 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 4px 8px 0 rgba(0, 0, 0, 0.2);
5721 height: 36px;
5722 width: 36px;
5723 border-radius: 50%;
5724 border: 1px solid #dfe1e5;
5725 z-index: 0;
5726 color: #848d95;
5727 background-color: #fff;
5728 display: flex !important;
5729 justify-content: center;
5730 align-items: center;
5731 }
5732 .gallery_main_area .prev:hover svg path,
5733 .gallery_main_area .next:hover svg path {
5734 fill: #4c4cf1;
5735 }
5736 .gallery_main_area .prev.slick-disabled,
5737 .gallery_main_area .next.slick-disabled {
5738 display: none !important;
5739 }
5740 .gallery_main_area .prev.prev,
5741 .gallery_main_area .next.prev {
5742 left: -20px;
5743 }
5744 .gallery_main_area .prev.next,
5745 .gallery_main_area .next.next {
5746 right: -20px;
5747 }
5748 .gallery_main_area .prev:hover,
5749 .gallery_main_area .next:hover {
5750 color: #3c4146;
5751 }
5752 .gallery_main_area .gallery-thumbs .slick-track {
5753 margin: 0 -15px;
5754 }
5755
5756 .gallery_main_area {
5757 position: relative;
5758 }
5759 .gallery_main_area .prev,
5760 .gallery_main_area .next {
5761 position: absolute;
5762 top: 50%;
5763 transform: translateY(-50%);
5764 cursor: pointer;
5765 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 4px 8px 0 rgba(0, 0, 0, 0.2);
5766 height: 36px;
5767 width: 36px;
5768 border-radius: 50%;
5769 border: 1px solid #dfe1e5;
5770 z-index: 0;
5771 color: #848d95;
5772 background-color: #fff;
5773 display: flex !important;
5774 justify-content: center;
5775 align-items: center;
5776 }
5777 .gallery_main_area .prev:hover svg path,
5778 .gallery_main_area .next:hover svg path {
5779 fill: #4c4cf1;
5780 }
5781 .gallery_main_area .prev.slick-disabled,
5782 .gallery_main_area .next.slick-disabled {
5783 display: none !important;
5784 }
5785 .gallery_main_area .prev.prev,
5786 .gallery_main_area .next.prev {
5787 left: -20px;
5788 }
5789 .gallery_main_area .prev.next,
5790 .gallery_main_area .next.next {
5791 right: -20px;
5792 }
5793 .gallery_main_area .prev:hover, .gallery_main_area .prev.slick-current,
5794 .gallery_main_area .next:hover,
5795 .gallery_main_area .next.slick-current {
5796 color: #3c4146;
5797 }
5798 .gallery_main_area .gallery-thumbs {
5799 margin-top: 45px;
5800 }
5801 .gallery_main_area .gallery-thumbs .slick-track {
5802 margin: 0 -15px;
5803 }
5804 .gallery_main_area .gallery-thumbs .item {
5805 padding: 0 15px;
5806 position: relative;
5807 cursor: pointer;
5808 }
5809 .gallery_main_area .gallery-thumbs .item > img {
5810 width: 100%;
5811 }
5812 .gallery_main_area .gallery-thumbs .item .caption_text .play-icon {
5813 position: absolute;
5814 right: 0;
5815 top: 50%;
5816 transform: translateY(-50%) translateX(-50%);
5817 text-align: center;
5818 left: 50%;
5819 display: none;
5820 }
5821 .gallery_main_area .gallery-thumbs .item .caption_text .play-icon ion-icon {
5822 font-size: 18px;
5823 }
5824 .gallery_main_area .gallery-thumbs .item .caption_text img {
5825 margin: auto !important;
5826 }
5827 .gallery_main_area .gallery-thumbs .item .caption_text .thumbnail_title {
5828 color: #fff;
5829 font-size: 14px;
5830 font-weight: 400;
5831 margin-bottom: 0;
5832 text-align: center;
5833 position: absolute;
5834 bottom: 15px;
5835 transform: translateX(-50%);
5836 left: 50%;
5837 width: 95%;
5838 }
5839 .gallery_main_area .gallery-thumbs .item .caption_text svg {
5840 opacity: 0;
5841 }
5842 .gallery_main_area .gallery-thumbs .item:hover .caption_text svg {
5843 opacity: 1;
5844 }
5845 .gallery_main_area .gallery-thumbs .item.slick-current .caption_text svg {
5846 opacity: 1;
5847 }
5848 .gallery_main_area .gallery-thumbs .item.slick-current .caption_text .play-icon {
5849 display: flex;
5850 }
5851 .gallery_main_area .gallery-thumbs .slick-prev,
5852 .gallery_main_area .gallery-thumbs .slick-next {
5853 z-index: 5;
5854 }
5855 .gallery_main_area .gallery-thumbs .slick-prev::before,
5856 .gallery_main_area .gallery-thumbs .slick-next::before {
5857 content: "";
5858 font-size: 60px;
5859 color: #425466;
5860 opacity: 1;
5861 background-image: url(../img/svg/arrow_left.svg);
5862 }
5863 .gallery_main_area .gallery-thumbs .slick-prev {
5864 left: 0;
5865 }
5866 .gallery_main_area .gallery-thumbs .slick-next {
5867 right: 0;
5868 }
5869
5870 .social_option {
5871 margin-top: 32px;
5872 }
5873
5874 .social_option .count_div.active i {
5875 color: #4c4cf1;
5876 }
5877
5878 .social_option .count_div {
5879 display: inline-block;
5880 line-height: 40px;
5881 font-size: 14px;
5882 margin-right: 15px;
5883 color: #425466;
5884 }
5885
5886 .social_option .count_div a,
5887 .social_option .count_div ion-icon {
5888 color: #425466;
5889 margin-right: 2px;
5890 }
5891
5892 .social_option .share_gropu {
5893 position: relative;
5894 display: inline-block;
5895 width: 160px;
5896 transition: all 300ms linear 0s;
5897 }
5898
5899 .social_option .share_gropu .nav {
5900 position: absolute;
5901 left: 0;
5902 top: 0;
5903 transition: all 300ms linear 0s;
5904 transform: perspective(1px) translateZ(0);
5905 transform-origin: 0 50%;
5906 transition-property: transform;
5907 transform: scaleX(0);
5908 }
5909
5910 .social_option .share_gropu.active {
5911 width: 150px;
5912 }
5913
5914 .social_option .share_gropu.active .nav {
5915 transform: scaleX(1);
5916 }
5917
5918 .social_option .nav {
5919 background: rgba(76, 76, 241, 0.2);
5920 border-radius: 20px;
5921 box-shadow: 0 0.3px 0.9px rgba(29, 56, 70, 0.1), 0 1.6px 3.6px rgba(29, 56, 70, 0.13);
5922 padding-right: 12px;
5923 }
5924
5925 .social_option .nav li {
5926 display: inline-block;
5927 margin-right: 10px;
5928 }
5929
5930 .social_option .nav li ion-icon {
5931 color: #3c4146;
5932 }
5933
5934 .social_option .nav li:first-child a {
5935 background: #fafcfc;
5936 box-shadow: 0 0 3.6px rgba(29, 56, 70, 0.1);
5937 border-radius: 20px;
5938 height: 42px;
5939 width: 42px;
5940 text-align: center;
5941 }
5942
5943 .social_option .nav li a {
5944 color: #373b46;
5945 display: inline-block;
5946 line-height: 42px;
5947 }
5948
5949 .social_option .nav li a ion-icon {
5950 position: relative;
5951 top: 2px;
5952 }
5953
5954 .social_option .nav li:hover a {
5955 color: #4c4cf1;
5956 }
5957
5958 .status_area {
5959 margin-top: 125px;
5960 }
5961 .status_area .status_inner {
5962 background: #ffffff;
5963 box-shadow: 0 1px 3px rgba(12, 0, 46, 0.1);
5964 border-radius: 5px;
5965 padding: 25px 50px;
5966 }
5967 .status_area .status_inner .media {
5968 align-self: center;
5969 align-items: center;
5970 }
5971 .status_area .status_inner .media .d-flex {
5972 margin-right: 86px;
5973 }
5974 .status_area .status_inner .media .media-body {
5975 align-self: center;
5976 }
5977 .status_area .status_inner .media .media-body h4 {
5978 font-size: 30px;
5979 font-weight: 700;
5980 margin-bottom: 0;
5981 }
5982 .status_area .status_inner .media .media-right .main_btn {
5983 background: #4c4cf1;
5984 color: #fff;
5985 line-height: 60px;
5986 padding: 0 37px;
5987 font-size: 20px;
5988 font-weight: 700;
5989 }
5990 .status_area .status_inner .media .media-right .main_btn:hover {
5991 color: #fff;
5992 background: #4c4cf1;
5993 }
5994
5995 .art-state,
5996 .play-icon {
5997 width: 40px;
5998 height: 40px;
5999 background: #fff;
6000 border-radius: 50%;
6001 display: flex;
6002 justify-content: center;
6003 align-items: center;
6004 }
6005
6006 .art-state ion-icon,
6007 .play-icon ion-icon {
6008 text-shadow: 0 6px 12px rgba(76, 76, 241, 0.5);
6009 color: #4c4cf1;
6010 }
6011
6012 .video_popup_slider {
6013 padding: 120px 0;
6014 background: #ffffff;
6015 }
6016 .video_popup_slider .container {
6017 position: relative;
6018 }
6019 .video_popup_slider .prev1,
6020 .video_popup_slider .next1 {
6021 position: absolute;
6022 top: 50%;
6023 transform: translateY(-50%);
6024 height: 50px;
6025 width: 50px;
6026 background: #54595d;
6027 opacity: 0.5;
6028 border-radius: 50%;
6029 transition: all 300ms linear 0s;
6030 cursor: pointer;
6031 text-align: center;
6032 }
6033 .video_popup_slider .prev1 ion-icon,
6034 .video_popup_slider .next1 ion-icon {
6035 color: #fff;
6036 font-size: 30px;
6037 position: relative;
6038 top: 10px;
6039 }
6040 .video_popup_slider .prev1:hover,
6041 .video_popup_slider .next1:hover {
6042 opacity: 1;
6043 }
6044 .video_popup_slider .prev1.slick-disabled,
6045 .video_popup_slider .next1.slick-disabled {
6046 opacity: 0;
6047 visibility: hidden;
6048 }
6049 .video_popup_slider .prev1 {
6050 left: 25px;
6051 }
6052 .video_popup_slider .next1 {
6053 right: 25px;
6054 }
6055 .video_popup_slider .popup_slick {
6056 margin-left: -15px;
6057 margin-right: -15px;
6058 }
6059 .video_popup_slider .popup_slick .item {
6060 padding-left: 15px;
6061 padding-right: 15px;
6062 border-radius: 5px;
6063 overflow: hidden;
6064 text-align: center;
6065 cursor: pointer;
6066 }
6067 .video_popup_slider .popup_slick .item img {
6068 max-width: 100%;
6069 }
6070 .video_popup_slider .popup_slick .item:hover .item_modal_box .text svg {
6071 opacity: 1;
6072 transform: scale(1);
6073 }
6074 .video_popup_slider .popup_slick .item .item_modal_box {
6075 position: relative;
6076 border-radius: 5px;
6077 overflow: hidden;
6078 height: 320px;
6079 }
6080 .video_popup_slider .popup_slick .item .item_modal_box video::-moz-range-track {
6081 display: none !important;
6082 }
6083 .video_popup_slider .popup_slick .item .item_modal_box video::-moz-range-thumb {
6084 display: none !important;
6085 }
6086 .video_popup_slider .popup_slick .item .item_modal_box:before {
6087 content: "";
6088 position: absolute;
6089 left: 0;
6090 width: 100%;
6091 bottom: 0;
6092 height: 145px;
6093 background: linear-gradient(180deg, rgba(29, 56, 70, 0) 0%, rgba(29, 56, 70, 0.8) 100%);
6094 }
6095 .video_popup_slider .popup_slick .item .item_modal_box video {
6096 height: 320px;
6097 width: 100%;
6098 z-index: 3;
6099 }
6100 .video_popup_slider .popup_slick .item .item_modal_box .text {
6101 bottom: 0;
6102 left: 0;
6103 width: 100%;
6104 text-align: center;
6105 z-index: 2;
6106 padding: 0 15px;
6107 }
6108 .video_popup_slider .popup_slick .item .item_modal_box .text svg,
6109 .video_popup_slider .popup_slick .item .item_modal_box .text img {
6110 position: absolute;
6111 left: 50%;
6112 top: 39%;
6113 margin-left: -20px;
6114 margin-top: -20px;
6115 opacity: 0;
6116 transform: scale(0.8);
6117 transition: all 300ms linear 0s;
6118 }
6119 .video_popup_slider .popup_slick .item .item_modal_box .text h4 {
6120 color: #fff;
6121 font-size: 16px;
6122 font-weight: 400;
6123 margin-bottom: 17px;
6124 position: absolute;
6125 width: 100%;
6126 bottom: 0;
6127 text-align: center;
6128 padding: 0 15px;
6129 left: 0;
6130 }
6131 .video_popup_slider .popup_slick .item .item_modal_box .text img:hover {
6132 transform: scale(1);
6133 opacity: 1;
6134 }
6135
6136 .modal_slider_css .modal-dialog {
6137 max-width: 100%;
6138 margin: 0;
6139 }
6140 .modal_slider_css .modal-dialog .modal-content {
6141 background: #4b5155;
6142 min-height: 100vh;
6143 }
6144 .modal_slider_css .modal-dialog .modal-content .modal-header {
6145 border: none;
6146 padding: 0;
6147 padding-top: 25px;
6148 width: 100%;
6149 height: 76px;
6150 position: relative;
6151 }
6152 .modal_slider_css .modal-dialog .modal-content .modal-header .button_social {
6153 position: absolute;
6154 right: 0;
6155 }
6156 .modal_slider_css .modal-dialog .modal-content .modal-header .close {
6157 height: 50px;
6158 width: 50px;
6159 background: #41484d;
6160 text-align: center;
6161 border-radius: 50%;
6162 font-size: 20px;
6163 color: #fff;
6164 opacity: 1;
6165 margin: 0;
6166 margin-right: 25px;
6167 float: none;
6168 display: inline-block;
6169 transition: all 300ms linear 0s;
6170 }
6171 .modal_slider_css .modal-dialog .modal-content .modal-header .close ion-icon {
6172 position: relative;
6173 left: -1px;
6174 top: -1px;
6175 }
6176 .modal_slider_css .modal-dialog .modal-content .modal-header .close:hover {
6177 background: #4c4cf1;
6178 }
6179 .modal_slider_css .modal-dialog .modal-content .modal-header .share_icon {
6180 height: 50px;
6181 width: 50px;
6182 background: #41484d;
6183 text-align: center;
6184 border-radius: 50%;
6185 font-size: 20px;
6186 display: inline-block;
6187 color: #fff;
6188 opacity: 1;
6189 margin: 0;
6190 margin-right: 27px;
6191 padding: 1rem 1rem;
6192 cursor: pointer;
6193 transition: all 300ms linear 0s;
6194 }
6195 .modal_slider_css .modal-dialog .modal-content .modal-header .share_icon ion-icon {
6196 position: relative;
6197 left: -1px;
6198 top: -1px;
6199 }
6200 .modal_slider_css .modal-dialog .modal-content .modal-header .share_icon:hover {
6201 background: #4c4cf1;
6202 }
6203 .modal_slider_css .modal-dialog .modal-content .modal-header .modal_social {
6204 position: absolute;
6205 right: 106px;
6206 top: 0;
6207 background: #393d40;
6208 width: 171px;
6209 border-radius: 25px;
6210 justify-content: flex-end;
6211 box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
6212 transform-origin: 100% 50%;
6213 transition-property: transform;
6214 transform: scaleX(0);
6215 transition: all 300ms linear 0s;
6216 }
6217 .modal_slider_css .modal-dialog .modal-content .modal-header .modal_social li a {
6218 display: inline-block;
6219 margin-right: 15px;
6220 color: rgba(255, 255, 255, 0.5);
6221 transition: all 300ms linear 0s;
6222 line-height: 50px;
6223 font-size: 18px;
6224 }
6225 .modal_slider_css .modal-dialog .modal-content .modal-header .modal_social li a i {
6226 position: relative;
6227 top: 2px;
6228 }
6229 .modal_slider_css .modal-dialog .modal-content .modal-header .modal_social li a:hover {
6230 color: #fff;
6231 }
6232 .modal_slider_css .modal-dialog .modal-content .modal-header .modal_social li:last-child a {
6233 height: 50px;
6234 width: 50px;
6235 border-radius: 50%;
6236 text-align: center;
6237 background: #41484d;
6238 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.2);
6239 font-size: 22px;
6240 line-height: 56px;
6241 margin-right: 0;
6242 }
6243 .modal_slider_css .modal-dialog .modal-content .modal-header .modal_social.active {
6244 transform: scaleX(1);
6245 }
6246 .modal_slider_css .modal-dialog .modal-content .modal-body {
6247 padding-left: 0;
6248 padding-right: 0;
6249 }
6250 .modal_slider_css .modal-dialog .modal-content .modal-body #modal_slider {
6251 padding-left: 0;
6252 }
6253 .modal_slider_css .modal-dialog .modal-content .modal-body .posting {
6254 position: relative;
6255 max-width: 1350px;
6256 margin: auto;
6257 }
6258 .modal_slider_css .modal-dialog .modal-content .modal-body .posting .video_item {
6259 transform: scale(0.8);
6260 margin: 0 20px;
6261 transition: all 300ms linear 0s;
6262 border-radius: 10px;
6263 overflow: hidden;
6264 position: relative;
6265 }
6266 .modal_slider_css .modal-dialog .modal-content .modal-body .posting .video_item h4 {
6267 position: absolute;
6268 left: 0;
6269 bottom: 10px;
6270 width: 100%;
6271 text-align: center;
6272 color: #fff;
6273 font-size: 20px;
6274 font-weight: 400;
6275 opacity: 0;
6276 visibility: hidden;
6277 z-index: 3;
6278 }
6279 .modal_slider_css .modal-dialog .modal-content .modal-body .posting .video_item .video-js {
6280 max-width: 100%;
6281 height: 669px;
6282 border-radius: 5px;
6283 overflow: hidden;
6284 }
6285 .modal_slider_css .modal-dialog .modal-content .modal-body .posting .video_item .video-js .vjs-poster {
6286 background-size: cover;
6287 }
6288 .modal_slider_css .modal-dialog .modal-content .modal-body .posting .video_item .video-js .vjs-progress-control.vjs-control {
6289 margin: 0;
6290 margin-right: -40px;
6291 }
6292 .modal_slider_css .modal-dialog .modal-content .modal-body .posting .video_item .video-js .vjs-time-tooltip {
6293 display: none;
6294 }
6295 .modal_slider_css .modal-dialog .modal-content .modal-body .posting .video_item .video-js .vjs-progress-control .vjs-play-progress {
6296 background-color: #fff;
6297 height: 5px;
6298 }
6299 .modal_slider_css .modal-dialog .modal-content .modal-body .posting .video_item .video-js .vjs-progress-control .vjs-play-progress:before {
6300 display: none;
6301 }
6302 .modal_slider_css .modal-dialog .modal-content .modal-body .posting .video_item .video-js .vjs-progress-control .vjs-load-progress {
6303 background-color: #9da2a6;
6304 height: 5px;
6305 }
6306 .modal_slider_css .modal-dialog .modal-content .modal-body .posting .video_item .video-js .vjs-progress-control .vjs-slider:before {
6307 height: 5px;
6308 background: #9da2a6;
6309 }
6310 .modal_slider_css .modal-dialog .modal-content .modal-body .posting .video_item .video-js .vjs-big-play-button {
6311 background: url(../img/play-button.png) no-repeat;
6312 border: none;
6313 display: none;
6314 }
6315 .modal_slider_css .modal-dialog .modal-content .modal-body .posting .video_item .video-js .vjs-control-bar {
6316 position: absolute;
6317 top: 0;
6318 left: 0;
6319 width: 100%;
6320 background-color: transparent;
6321 height: 5px;
6322 }
6323 .modal_slider_css .modal-dialog .modal-content .modal-body .posting .video_item .video-js .vjs-control-bar .vjs-button {
6324 display: none;
6325 }
6326 .modal_slider_css .modal-dialog .modal-content .modal-body .posting .video_item .video-js .vjs-control-bar .vjs-current-time {
6327 display: none;
6328 }
6329 .modal_slider_css .modal-dialog .modal-content .modal-body .posting .video_item .video-js .vjs-control-bar .vjs-duration {
6330 display: none;
6331 }
6332 .modal_slider_css .modal-dialog .modal-content .modal-body .posting .video_item video {
6333 border-radius: 5px;
6334 overflow: hidden;
6335 }
6336 .modal_slider_css .modal-dialog .modal-content .modal-body .posting .video_item img {
6337 max-width: 100%;
6338 }
6339 .modal_slider_css .modal-dialog .modal-content .modal-body .posting li .video_item {
6340 position: relative;
6341 filter: blur(5px);
6342 transition: all 300ms linear 0s;
6343 }
6344 .modal_slider_css .modal-dialog .modal-content .modal-body .posting li .video_item:before {
6345 content: "";
6346 position: absolute;
6347 left: 0;
6348 top: 0;
6349 width: 100%;
6350 height: 100%;
6351 z-index: 2;
6352 background: rgba(107, 112, 127, 0.5);
6353 opacity: 0;
6354 transition: all 300ms linear 0s;
6355 }
6356 .modal_slider_css .modal-dialog .modal-content .modal-body .posting li .video_item:hover {
6357 filter: blur(0);
6358 }
6359 .modal_slider_css .modal-dialog .modal-content .modal-body .posting li .video_item:hover:before {
6360 opacity: 1;
6361 }
6362 .modal_slider_css .modal-dialog .modal-content .modal-body .posting li.slick-current .video_item {
6363 transform: scale(1);
6364 filter: blur(0);
6365 border-radius: 0 0 5px 5px;
6366 }
6367 .modal_slider_css .modal-dialog .modal-content .modal-body .posting li.slick-current .video_item:before {
6368 display: none;
6369 }
6370 .modal_slider_css .modal-dialog .modal-content .modal-body .posting li.slick-current .video_item:after {
6371 content: "";
6372 background: linear-gradient(180deg, rgba(29, 56, 70, 0) 0%, rgba(29, 56, 70, 0.8) 100%);
6373 position: absolute;
6374 left: 0;
6375 bottom: 0;
6376 height: 285px;
6377 width: 100%;
6378 }
6379 .modal_slider_css .modal-dialog .modal-content .modal-body .posting li.slick-current .video_item h4 {
6380 visibility: visible;
6381 opacity: 1;
6382 }
6383 .modal_slider_css .modal-dialog .modal-content .modal-body .posting li.slick-current .video_item .vjs-big-play-button {
6384 display: block;
6385 }
6386 .modal_slider_css .modal-dialog .modal-content .modal-body .posting li.slick-current .video_item .vjs-playing .vjs-big-play-button {
6387 display: none;
6388 }
6389 .modal_slider_css .modal-dialog .modal-content .modal-body .posting li.slick-current .video_item .vjs-has-started .vjs-big-play-button {
6390 display: none;
6391 }
6392 .modal_slider_css .modal-dialog .modal-content .modal-body .posting li.slick-current .video_item .vjs-ended .vjs-big-play-button {
6393 display: block;
6394 }
6395 .modal_slider_css .modal-dialog .modal-content .modal-body .posting li.slick-current .video_item .vjs-paused .vjs-big-play-button {
6396 display: block;
6397 }
6398 .modal_slider_css .modal-dialog .modal-content .modal-body .posting li.slick-current + .slick-active .video_item {
6399 filter: blur(5px);
6400 transition: all 300ms linear 0s;
6401 }
6402 .modal_slider_css .modal-dialog .modal-content .modal-body .posting li.slick-current + .slick-active .video_item:hover {
6403 filter: blur(0);
6404 }
6405 .modal_slider_css .modal-dialog .modal-content .modal-body .posting li.slick-current + .slick-active .video_item:hover:before {
6406 opacity: 1;
6407 }
6408 .modal_slider_css .modal-dialog .modal-content .modal-body .quesiton_slider {
6409 position: relative;
6410 }
6411 .modal_slider_css .modal-dialog .modal-content .modal-body .prev_modal {
6412 position: absolute;
6413 top: 50%;
6414 height: 50px;
6415 width: 50px;
6416 background: rgba(166, 174, 179, 0.5);
6417 border-radius: 50%;
6418 transition: all 300ms linear 0s;
6419 color: #c0c3cc;
6420 text-align: center;
6421 line-height: 60px;
6422 cursor: pointer;
6423 transform: translateY(-50%);
6424 z-index: 5;
6425 left: 60px;
6426 }
6427 .modal_slider_css .modal-dialog .modal-content .modal-body .prev_modal:hover {
6428 background: #4c4cf1;
6429 }
6430 .modal_slider_css .modal-dialog .modal-content .modal-body .prev_modal ion-icon {
6431 font-size: 20px;
6432 }
6433 .modal_slider_css .modal-dialog .modal-content .modal-body .next_modal {
6434 position: absolute;
6435 top: 50%;
6436 height: 50px;
6437 width: 50px;
6438 background: rgba(166, 174, 179, 0.5);
6439 border-radius: 50%;
6440 transition: all 300ms linear 0s;
6441 color: #c0c3cc;
6442 text-align: center;
6443 line-height: 60px;
6444 cursor: pointer;
6445 transform: translateY(-50%);
6446 z-index: 5;
6447 right: 60px;
6448 }
6449 .modal_slider_css .modal-dialog .modal-content .modal-body .next_modal:hover {
6450 background: #4c4cf1;
6451 }
6452 .modal_slider_css .modal-dialog .modal-content .modal-body .next_modal ion-icon {
6453 font-size: 20px;
6454 }
6455 .modal_slider_css .modal-dialog .modal-content .modal-body .prev_modal.slick-disabled {
6456 opacity: 0;
6457 visibility: hidden;
6458 }
6459 .modal_slider_css .modal-dialog .modal-content .modal-body .next_modal.slick-disabled {
6460 opacity: 0;
6461 visibility: hidden;
6462 }
6463 .modal_slider_css .modal-dialog .modal-content .modal-body h3 {
6464 color: #fff;
6465 font-size: 20px;
6466 font-weight: 400;
6467 margin-left: 50px;
6468 margin-bottom: 18px;
6469 margin-top: 50px;
6470 }
6471 .modal_slider_css .modal-dialog .modal-content .modal-body .main_div_carousel {
6472 position: relative;
6473 }
6474 .modal_slider_css .modal-dialog .modal-content .modal-body .main_div_carousel .prev_car {
6475 position: absolute;
6476 top: 50%;
6477 height: 50px;
6478 width: 50px;
6479 background: rgba(34, 37, 38, 0.9);
6480 border-radius: 50%;
6481 transition: all 300ms linear 0s;
6482 color: #c0c3cc;
6483 text-align: center;
6484 line-height: 60px;
6485 cursor: pointer;
6486 transform: translateY(-50%);
6487 opacity: 0;
6488 left: 60px;
6489 }
6490 .modal_slider_css .modal-dialog .modal-content .modal-body .main_div_carousel .prev_car ion-icon {
6491 font-size: 20px;
6492 }
6493 .modal_slider_css .modal-dialog .modal-content .modal-body .main_div_carousel .prev_car:hover {
6494 background: #000;
6495 }
6496 .modal_slider_css .modal-dialog .modal-content .modal-body .main_div_carousel .next_car {
6497 position: absolute;
6498 top: 50%;
6499 height: 50px;
6500 width: 50px;
6501 background: rgba(34, 37, 38, 0.9);
6502 border-radius: 50%;
6503 transition: all 300ms linear 0s;
6504 color: #c0c3cc;
6505 text-align: center;
6506 line-height: 60px;
6507 cursor: pointer;
6508 transform: translateY(-50%);
6509 opacity: 0;
6510 right: 60px;
6511 }
6512 .modal_slider_css .modal-dialog .modal-content .modal-body .main_div_carousel .next_car ion-icon {
6513 font-size: 20px;
6514 }
6515 .modal_slider_css .modal-dialog .modal-content .modal-body .main_div_carousel .next_car:hover {
6516 background: #000;
6517 }
6518 .modal_slider_css .modal-dialog .modal-content .modal-body .main_div_carousel .prev_car.slick-disabled {
6519 opacity: 0;
6520 visibility: hidden;
6521 }
6522 .modal_slider_css .modal-dialog .modal-content .modal-body .main_div_carousel .next_car.slick-disabled {
6523 opacity: 0;
6524 visibility: hidden;
6525 }
6526 .modal_slider_css .modal-dialog .modal-content .modal-body .main_div_carousel:hover .prev_car {
6527 opacity: 1;
6528 }
6529 .modal_slider_css .modal-dialog .modal-content .modal-body .main_div_carousel:hover .next_car {
6530 opacity: 1;
6531 }
6532 .modal_slider_css .modal-dialog .modal-content .modal-body .main_div_carousel .slick-current .text_item {
6533 background: #393d40;
6534 }
6535 .modal_slider_css .modal-dialog .modal-content .modal-body .main_div_carousel .slick-current .text_item h4 {
6536 color: #fff;
6537 }
6538 .modal_slider_css .modal-dialog .modal-content .modal-body #modal_carousel {
6539 margin-bottom: 0;
6540 }
6541 .modal_slider_css .modal-dialog .modal-content .modal-body #modal_carousel li {
6542 padding-left: 10px;
6543 padding-right: 10px;
6544 }
6545 .modal_slider_css .modal-dialog .modal-content .modal-body #modal_carousel .slick-list {
6546 padding: 0 27% 0 0 !important;
6547 }
6548 .modal_slider_css .modal-dialog .modal-content .modal-body .text_item {
6549 background: #393d40;
6550 padding: 13px 24px;
6551 border-radius: 5px;
6552 }
6553 .modal_slider_css .modal-dialog .modal-content .modal-body .text_item h4 {
6554 color: #8a8e99;
6555 font-size: 18px;
6556 font-weight: 400;
6557 line-height: 27px;
6558 margin-bottom: 0;
6559 }
6560
6561 .video_slider_area {
6562 position: relative;
6563 }
6564 .video_slider_area #video_loader {
6565 position: absolute;
6566 top: 0;
6567 left: 0;
6568 width: 100%;
6569 height: 100%;
6570 background-color: #f3f3f3;
6571 z-index: 9999;
6572 }
6573 .video_slider_area #video_loader #loader {
6574 border: 6px solid rgba(152, 149, 149, 0.614);
6575 border-top: 6px solid #A77DEF;
6576 border-radius: 50%;
6577 width: 60px;
6578 height: 60px;
6579 position: absolute;
6580 top: 50%;
6581 left: 50%;
6582 margin-top: -60px;
6583 margin-left: -60px;
6584 animation: spin 2s linear infinite;
6585 }
6586 .video_slider_area.loaded #video_loader {
6587 display: none;
6588 }
6589 .video_slider_area .video-js {
6590 min-height: 414px;
6591 border-radius: 5px;
6592 overflow: hidden;
6593 }
6594 .video_slider_area .video-js:before {
6595 content: "";
6596 position: absolute;
6597 left: 0;
6598 top: 0;
6599 background: rgba(44, 44, 81, 0.6);
6600 border-radius: 5px;
6601 width: 100%;
6602 height: 100%;
6603 z-index: 1;
6604 }
6605 .video_slider_area .video-js .vjs-big-play-button {
6606 border: none;
6607 }
6608 .video_slider_area .video-js .vjs-control-bar {
6609 transform: translateY(45px);
6610 }
6611 .video_slider_area .video-js .vjs-control-bar .vjs-button {
6612 color: rgba(235, 245, 250, 0.5);
6613 transition: all 300ms linear 0s;
6614 }
6615 .video_slider_area .video-js .vjs-control-bar .vjs-button:hover {
6616 color: #fff;
6617 }
6618 .video_slider_area .video-js .vjs-control.vjs-button.vjs-control-button.vjs-mode-control span {
6619 border-color: rgba(235, 245, 250, 0.5);
6620 transition: all 300ms linear 0s;
6621 }
6622 .video_slider_area .video-js .vjs-control.vjs-button.vjs-control-button.vjs-mode-control:hover span {
6623 border-color: #fff;
6624 }
6625 .video_slider_area .video-js:hover .vjs-control-bar {
6626 transform: translateY(0);
6627 }
6628 .video_slider_area .video-js.vjs-has-started:before {
6629 opacity: 0;
6630 visibility: hidden;
6631 }
6632
6633 @keyframes spin {
6634 0% {
6635 transform: rotate(0deg);
6636 }
6637 100% {
6638 transform: rotate(360deg);
6639 }
6640 }
6641 /* End Video Area css
6642 ============================================================================================ */
6643 /* 3d video Slider Area css
6644 ============================================================================================ */
6645 .flipvideo_area .slider-wrapper.no-padding .js-slider--main {
6646 padding-top: 7px;
6647 }
6648 .flipvideo_area .slider-wrapper.no-padding .js-slider--main .swiper-slide-shadow-left {
6649 background-image: unset;
6650 }
6651 .flipvideo_area .slider-wrapper.no-padding .js-slider--main .swiper-slide-shadow-right {
6652 background-image: unset;
6653 }
6654 .flipvideo_area .slider-wrapper.no-padding .js-slider--main .swiper-slide.swiper-slide-prev {
6655 position: relative;
6656 }
6657 .flipvideo_area .slider-wrapper.no-padding .js-slider--main .swiper-slide.swiper-slide-prev:before {
6658 content: "";
6659 background: rgba(0, 0, 0, 0.6);
6660 position: absolute;
6661 left: 0;
6662 top: 3px;
6663 width: 100%;
6664 height: 98%;
6665 }
6666 .flipvideo_area .slider-wrapper.no-padding .js-slider--main .swiper-slide.swiper-slide-next {
6667 position: relative;
6668 }
6669 .flipvideo_area .slider-wrapper.no-padding .js-slider--main .swiper-slide.swiper-slide-next:before {
6670 content: "";
6671 background: rgba(0, 0, 0, 0.6);
6672 position: absolute;
6673 left: 0;
6674 top: 3px;
6675 width: 100%;
6676 height: 98%;
6677 }
6678 .flipvideo_area .slider-wrapper.no-padding .swiper-container.js-slider--nav {
6679 padding-bottom: 0;
6680 }
6681 .flipvideo_area .slider-wrapper.no-padding .swiper-container.js-slider--nav .swiper-button-prev {
6682 left: 0;
6683 border-top-right-radius: 3px;
6684 border-bottom-right-radius: 3px;
6685 opacity: 0;
6686 transition: all 300ms linear 0s;
6687 background: #4c4cf1;
6688 }
6689 .flipvideo_area .slider-wrapper.no-padding .swiper-container.js-slider--nav .swiper-button-prev:after {
6690 font-size: 16px;
6691 }
6692 .flipvideo_area .slider-wrapper.no-padding .swiper-container.js-slider--nav .swiper-button-next {
6693 right: 0;
6694 border-top-left-radius: 3px;
6695 border-bottom-left-radius: 3px;
6696 opacity: 0;
6697 transition: all 300ms linear 0s;
6698 background: #4c4cf1;
6699 }
6700 .flipvideo_area .slider-wrapper.no-padding .swiper-container.js-slider--nav .swiper-button-next:after {
6701 font-size: 16px;
6702 }
6703 .flipvideo_area .slider-wrapper.no-padding .swiper-container.js-slider--nav:hover .swiper-button-prev {
6704 opacity: 1;
6705 }
6706 .flipvideo_area .slider-wrapper.no-padding .swiper-container.js-slider--nav:hover .swiper-button-next {
6707 opacity: 1;
6708 }
6709
6710 .swiper-pagination-bullet {
6711 border: 1px solid #1da1f2;
6712 }
6713
6714 .swiper-pagination-bullet-active {
6715 background: #1da1f2;
6716 }
6717
6718 .swiper-container {
6719 margin-left: auto;
6720 margin-right: auto;
6721 position: relative;
6722 overflow: hidden;
6723 z-index: 1;
6724 }
6725
6726 .swiper-container-no-flexbox .swiper-slide {
6727 float: left;
6728 }
6729
6730 .swiper-container-vertical > .swiper-wrapper {
6731 flex-direction: column;
6732 }
6733
6734 .swiper-wrapper {
6735 position: relative;
6736 width: 100%;
6737 height: 100%;
6738 z-index: 1;
6739 display: flex;
6740 box-sizing: content-box;
6741 }
6742
6743 .swiper-container-android .swiper-slide,
6744 .swiper-wrapper {
6745 transform: translate3d(0, 0, 0);
6746 }
6747
6748 .swiper-container-multirow > .swiper-wrapper {
6749 flex-wrap: wrap;
6750 }
6751
6752 .swiper-container-free-mode > .swiper-wrapper {
6753 transition-timing-function: ease-out;
6754 margin: 0 auto;
6755 }
6756
6757 .swiper-slide {
6758 flex: 0 0 auto;
6759 flex-negative: 0;
6760 flex-shrink: 0;
6761 width: 100%;
6762 height: 100%;
6763 position: relative;
6764 }
6765
6766 .swiper-container-autoheight,
6767 .swiper-container-autoheight .swiper-slide {
6768 height: auto;
6769 }
6770
6771 .swiper-container-autoheight .swiper-wrapper {
6772 align-items: flex-start;
6773 transition-property: transform, height;
6774 }
6775
6776 .swiper-container .swiper-notification {
6777 position: absolute;
6778 left: 0;
6779 top: 0;
6780 pointer-events: none;
6781 opacity: 0;
6782 z-index: -1000;
6783 }
6784
6785 .swiper-wp8-horizontal {
6786 -ms-touch-action: pan-y;
6787 touch-action: pan-y;
6788 }
6789
6790 .swiper-wp8-vertical {
6791 -ms-touch-action: pan-x;
6792 touch-action: pan-x;
6793 }
6794
6795 .swiper-button-next,
6796 .swiper-button-prev {
6797 position: absolute;
6798 top: 50%;
6799 width: 27px;
6800 height: 44px;
6801 margin-top: -22px;
6802 z-index: 10;
6803 cursor: pointer;
6804 background-size: 27px 44px;
6805 background-position: center;
6806 background-repeat: no-repeat;
6807 }
6808
6809 .swiper-button-next.swiper-button-disabled,
6810 .swiper-button-prev.swiper-button-disabled {
6811 opacity: 0.35;
6812 cursor: auto;
6813 pointer-events: none;
6814 }
6815
6816 .swiper-pagination {
6817 position: absolute;
6818 text-align: center;
6819 transition: 0.3s;
6820 transform: translate3d(0, 0, 0);
6821 z-index: 10;
6822 }
6823
6824 .swiper-pagination.swiper-pagination-hidden {
6825 opacity: 0;
6826 }
6827
6828 .swiper-container-horizontal > .swiper-pagination-bullets,
6829 .swiper-pagination-custom,
6830 .swiper-pagination-fraction {
6831 bottom: 10px;
6832 left: 0;
6833 width: 100%;
6834 }
6835
6836 .swiper-pagination-bullet {
6837 width: 8px;
6838 height: 8px;
6839 display: inline-block;
6840 border-radius: 100%;
6841 background: #000;
6842 opacity: 0.2;
6843 }
6844
6845 button.swiper-pagination-bullet {
6846 border: none;
6847 margin: 0;
6848 padding: 0;
6849 box-shadow: none;
6850 appearance: none;
6851 }
6852
6853 .swiper-pagination-clickable .swiper-pagination-bullet {
6854 cursor: pointer;
6855 }
6856
6857 .swiper-pagination-white .swiper-pagination-bullet {
6858 background: #fff;
6859 }
6860
6861 .swiper-pagination-bullet-active {
6862 opacity: 1;
6863 background: #007aff;
6864 }
6865
6866 .swiper-pagination-white .swiper-pagination-bullet-active {
6867 background: #fff;
6868 }
6869
6870 .swiper-pagination-black .swiper-pagination-bullet-active {
6871 background: #000;
6872 }
6873
6874 .swiper-container-vertical > .swiper-pagination-bullets {
6875 right: 10px;
6876 top: 50%;
6877 transform: translate3d(0, -50%, 0);
6878 }
6879
6880 .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
6881 margin: 5px 0;
6882 display: block;
6883 }
6884
6885 .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
6886 margin: 0 5px;
6887 }
6888
6889 .swiper-pagination-progress {
6890 background: rgba(0, 0, 0, 0.25);
6891 position: absolute;
6892 }
6893
6894 .swiper-pagination-progress .swiper-pagination-progressbar {
6895 background: #007aff;
6896 position: absolute;
6897 left: 0;
6898 top: 0;
6899 width: 100%;
6900 height: 100%;
6901 transform: scale(0);
6902 transform-origin: left top;
6903 }
6904
6905 .swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {
6906 transform-origin: right top;
6907 }
6908
6909 .swiper-container-horizontal > .swiper-pagination-progress {
6910 width: 100%;
6911 height: 4px;
6912 left: 0;
6913 top: 0;
6914 }
6915
6916 .swiper-container-vertical > .swiper-pagination-progress {
6917 width: 4px;
6918 height: 100%;
6919 left: 0;
6920 top: 0;
6921 }
6922
6923 .swiper-pagination-progress.swiper-pagination-white {
6924 background: rgba(255, 255, 255, 0.5);
6925 }
6926
6927 .swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {
6928 background: #fff;
6929 }
6930
6931 .swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {
6932 background: #000;
6933 }
6934
6935 .swiper-container-3d {
6936 perspective: 1200px;
6937 }
6938
6939 .swiper-container-3d .swiper-cube-shadow,
6940 .swiper-container-3d .swiper-slide,
6941 .swiper-container-3d .swiper-slide-shadow-bottom,
6942 .swiper-container-3d .swiper-slide-shadow-left,
6943 .swiper-container-3d .swiper-slide-shadow-right,
6944 .swiper-container-3d .swiper-slide-shadow-top,
6945 .swiper-container-3d .swiper-wrapper {
6946 transform-style: preserve-3d;
6947 }
6948
6949 .swiper-container-3d .swiper-slide-shadow-bottom,
6950 .swiper-container-3d .swiper-slide-shadow-left,
6951 .swiper-container-3d .swiper-slide-shadow-right,
6952 .swiper-container-3d .swiper-slide-shadow-top {
6953 position: absolute;
6954 left: 0;
6955 top: 0;
6956 width: 100%;
6957 height: 100%;
6958 pointer-events: none;
6959 z-index: 10;
6960 }
6961
6962 .swiper-container-coverflow .swiper-wrapper,
6963 .swiper-container-flip .swiper-wrapper {
6964 -ms-perspective: 1200px;
6965 }
6966
6967 .swiper-container-cube,
6968 .swiper-container-flip {
6969 overflow: visible;
6970 }
6971
6972 .swiper-container-cube .swiper-slide,
6973 .swiper-container-flip .swiper-slide {
6974 pointer-events: none;
6975 backface-visibility: hidden;
6976 z-index: 1;
6977 }
6978
6979 .swiper-container-cube .swiper-slide .swiper-slide,
6980 .swiper-container-flip .swiper-slide .swiper-slide {
6981 pointer-events: none;
6982 }
6983
6984 .swiper-container-cube .swiper-slide-active,
6985 .swiper-container-cube .swiper-slide-active .swiper-slide-active,
6986 .swiper-container-flip .swiper-slide-active,
6987 .swiper-container-flip .swiper-slide-active .swiper-slide-active {
6988 pointer-events: auto;
6989 }
6990
6991 .swiper-container-cube .swiper-slide-shadow-bottom,
6992 .swiper-container-cube .swiper-slide-shadow-left,
6993 .swiper-container-cube .swiper-slide-shadow-right,
6994 .swiper-container-cube .swiper-slide-shadow-top,
6995 .swiper-container-flip .swiper-slide-shadow-bottom,
6996 .swiper-container-flip .swiper-slide-shadow-left,
6997 .swiper-container-flip .swiper-slide-shadow-right,
6998 .swiper-container-flip .swiper-slide-shadow-top {
6999 z-index: 0;
7000 backface-visibility: hidden;
7001 }
7002
7003 .swiper-container-cube .swiper-slide {
7004 visibility: hidden;
7005 transform-origin: 0 0;
7006 width: 100%;
7007 height: 100%;
7008 }
7009
7010 .swiper-container-cube.swiper-container-rtl .swiper-slide {
7011 transform-origin: 100% 0;
7012 }
7013
7014 .swiper-container-cube .swiper-slide-active,
7015 .swiper-container-cube .swiper-slide-next,
7016 .swiper-container-cube .swiper-slide-next + .swiper-slide,
7017 .swiper-container-cube .swiper-slide-prev {
7018 pointer-events: auto;
7019 visibility: visible;
7020 }
7021
7022 .swiper-container-cube .swiper-cube-shadow {
7023 position: absolute;
7024 left: 0;
7025 bottom: 0;
7026 width: 100%;
7027 height: 100%;
7028 background: #000;
7029 opacity: 0.6;
7030 filter: blur(50px);
7031 z-index: 0;
7032 }
7033
7034 .swiper-container-fade.swiper-container-free-mode .swiper-slide {
7035 transition-timing-function: ease-out;
7036 }
7037
7038 .swiper-container-fade .swiper-slide {
7039 pointer-events: none;
7040 transition-property: opacity;
7041 }
7042
7043 .swiper-container-fade .swiper-slide .swiper-slide {
7044 pointer-events: none;
7045 }
7046
7047 .swiper-container-fade .swiper-slide-active,
7048 .swiper-container-fade .swiper-slide-active .swiper-slide-active {
7049 pointer-events: auto;
7050 }
7051
7052 .swiper-zoom-container {
7053 width: 100%;
7054 height: 100%;
7055 display: flex;
7056 justify-content: center;
7057 align-items: center;
7058 text-align: center;
7059 }
7060
7061 .swiper-zoom-container > canvas,
7062 .swiper-zoom-container > img,
7063 .swiper-zoom-container > svg {
7064 max-width: 100%;
7065 max-height: 100%;
7066 -o-object-fit: contain;
7067 object-fit: contain;
7068 }
7069
7070 .swiper-scrollbar {
7071 border-radius: 10px;
7072 position: relative;
7073 -ms-touch-action: none;
7074 background: rgba(0, 0, 0, 0.1);
7075 }
7076
7077 .swiper-container-horizontal > .swiper-scrollbar {
7078 position: absolute;
7079 left: 1%;
7080 bottom: 3px;
7081 z-index: 50;
7082 height: 5px;
7083 width: 98%;
7084 }
7085
7086 .swiper-container-vertical > .swiper-scrollbar {
7087 position: absolute;
7088 right: 3px;
7089 top: 1%;
7090 z-index: 50;
7091 width: 5px;
7092 height: 98%;
7093 }
7094
7095 .swiper-scrollbar-drag {
7096 height: 100%;
7097 width: 100%;
7098 position: relative;
7099 background: rgba(0, 0, 0, 0.5);
7100 border-radius: 10px;
7101 left: 0;
7102 top: 0;
7103 }
7104
7105 .swiper-scrollbar-cursor-drag {
7106 cursor: move;
7107 }
7108
7109 .swiper-lazy-preloader {
7110 width: 42px;
7111 height: 42px;
7112 position: absolute;
7113 left: 50%;
7114 top: 50%;
7115 margin-left: -21px;
7116 margin-top: -21px;
7117 z-index: 10;
7118 transform-origin: 50%;
7119 animation: swiper-preloader-spin 1s steps(12, end) infinite;
7120 }
7121
7122 @-webkit-keyframes swiper-preloader-spin {
7123 100% {
7124 -webkit-transform: rotate(360deg);
7125 }
7126 }
7127 @keyframes swiper-preloader-spin {
7128 100% {
7129 transform: rotate(360deg);
7130 }
7131 }
7132 .swiper-container.one {
7133 padding-top: 40px;
7134 text-align: center;
7135 }
7136
7137 .swiper-container.one .swiper-slide {
7138 padding: 0 43px;
7139 }
7140
7141 .swiper-container {
7142 width: 100%;
7143 padding-bottom: 60px;
7144 }
7145
7146 .swiper-slide img {
7147 display: block;
7148 margin: auto;
7149 max-width: 100%;
7150 }
7151
7152 .js-slider--main .swiper-slide {
7153 width: 390px;
7154 height: auto;
7155 padding: 0 0;
7156 }
7157
7158 .swiper-slide .slider-image .preview-icon {
7159 z-index: -1;
7160 width: calc(100% - 30px);
7161 }
7162
7163 .swiper-slide.swiper-slide-active .slider-image:hover .preview-icon {
7164 opacity: 1;
7165 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
7166 z-index: 1;
7167 }
7168
7169 .swiper-container-horizontal > .swiper-pagination-bullets,
7170 .swiper-pagination-custom,
7171 .swiper-pagination-fraction {
7172 bottom: 0;
7173 }
7174
7175 .swiper-pagination-bullet {
7176 background: transparent none repeat scroll 0 0;
7177 border: 1px solid #ee0f6f;
7178 border-radius: 10px;
7179 display: inline-block;
7180 height: 10px;
7181 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
7182 opacity: 1;
7183 width: 26px;
7184 transition: 0.2s;
7185 }
7186
7187 .swiper-pagination-bullet-active {
7188 background: rgba(0, 0, 0, 0) linear-gradient(to right, #ee0f6f 0%, #f89482 100%) repeat scroll 0 0;
7189 border: medium none;
7190 height: 12px;
7191 opacity: 1;
7192 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
7193 width: 12px;
7194 }
7195
7196 .art-video-player .art-mask .art-state {
7197 width: 80px !important;
7198 height: 80px !important;
7199 bottom: 0 !important;
7200 right: 0 !important;
7201 left: 0 !important;
7202 top: 0 !important;
7203 margin: auto;
7204 overflow: hidden;
7205 transform: unset !important;
7206 }
7207
7208 .art-video-player .art-mask .art-state i svg {
7209 fill: white;
7210 width: 100px;
7211 height: 100px;
7212 background: blue;
7213 }
7214
7215 .accordion-panel .accordion-content.show #minus {
7216 display: inline-block;
7217 }
7218
7219 .accordion-panel .accordion-header.active::before {
7220 content: "-";
7221 }
7222
7223 .spe_accordion_inner:not(.spe-collapsed) #plus {
7224 display: none;
7225 }
7226
7227 .accordion-panel .accordion-content {
7228 overflow: hidden;
7229 }
7230
7231 .accordion-header {
7232 cursor: pointer;
7233 }
7234
7235 .video_player .tab-content {
7236 display: block;
7237 }
7238
7239 .art-undercover {
7240 background: #000;
7241 position: fixed;
7242 top: 0;
7243 left: 0;
7244 display: none;
7245 height: 100%;
7246 width: 100%;
7247 opacity: 0.9;
7248 z-index: 10;
7249 }
7250
7251 @media (max-width: 576px) {
7252 .video_list_area .art-video-player {
7253 height: 396px !important;
7254 }
7255 }
7256 @media (max-width: 450px) {
7257 .video_list_area .art-video-player {
7258 height: 277px !important;
7259 }
7260 }
7261 /*=========== message_alert Shortcode css ========*/
7262 .message_alert {
7263 display: flex;
7264 border: 1px solid #ebebeb;
7265 border-radius: 4px;
7266 background: rgba(243, 243, 243, 0.24);
7267 padding: 32px 40px 30px;
7268 margin-bottom: 0;
7269 }
7270 .message_alert i {
7271 font-size: 24px;
7272 color: #abb0c0;
7273 margin-right: 25px;
7274 }
7275 .message_alert h5 {
7276 font-size: 16px;
7277 color: #031933;
7278 font-weight: 500;
7279 margin-bottom: 0;
7280 margin-top: 0;
7281 }
7282 .message_alert p {
7283 margin-bottom: 0;
7284 margin-top: 12px;
7285 }
7286 .message_alert .close {
7287 position: absolute;
7288 right: 14px;
7289 top: 12px;
7290 font-size: 24px;
7291 opacity: 1;
7292 border: none;
7293 background: transparent;
7294 }
7295 .message_alert .close i {
7296 margin-right: 0;
7297 }
7298
7299 .alert-danger {
7300 background: rgba(255, 243, 244, 0.7);
7301 border-color: #fbadb3;
7302 }
7303 .alert-danger i,
7304 .alert-danger h5 {
7305 color: #fa303e;
7306 }
7307
7308 .alert-success {
7309 background: rgba(241, 253, 243, 0.7);
7310 border-color: #94e3a1;
7311 }
7312 .alert-success i,
7313 .alert-success h5 {
7314 color: #10d631;
7315 }
7316
7317 .alert-warning {
7318 background: #fefbf1;
7319 border-color: #f2dca0;
7320 }
7321 .alert-warning i,
7322 .alert-warning h5 {
7323 color: #f6ba18;
7324 }
7325
7326 .alert-info {
7327 background: #f1fbfd;
7328 border-color: #a0e3f2;
7329 }
7330 .alert-info i,
7331 .alert-info h5 {
7332 color: #A77DEF;
7333 }
7334
7335 .notice-box {
7336 border-left: 10px solid;
7337 padding: 30px 40px;
7338 margin-bottom: 0;
7339 margin-top: 0;
7340 }
7341 .notice-box:before, .notice-box:after {
7342 display: none;
7343 }
7344 .notice-box i {
7345 font-size: 24px;
7346 margin-right: 25px;
7347 }
7348 .notice-box h5 {
7349 font-size: 20px;
7350 font-weight: 500;
7351 margin-bottom: 16px;
7352 }
7353 .notice-box p {
7354 font-size: 18px;
7355 font-weight: 400;
7356 margin-bottom: 0;
7357 color: #6b707f;
7358 line-height: 34px;
7359 }
7360 .notice-box p span {
7361 padding: 1px 10px;
7362 background: #fff;
7363 color: #ed2937;
7364 }
7365
7366 .notice-success {
7367 background: #459e6d;
7368 border-color: #30845e;
7369 }
7370
7371 .notice-warning {
7372 background: #fefaed;
7373 border-color: #f6ba18;
7374 }
7375 .notice-warning i {
7376 color: #f6ba18;
7377 padding-top: 4px;
7378 }
7379
7380 .notice-danger {
7381 background: #ffeff0;
7382 border-color: #fa303e;
7383 }
7384 .notice-danger i {
7385 color: #fa303e;
7386 }
7387
7388 .explanation {
7389 position: relative;
7390 background: linear-gradient(90deg, #fff, rgba(117, 227, 251, 0.6196078431));
7391 border: 10px solid #fff;
7392 padding: 1rem 2rem;
7393 border-radius: 16px;
7394 }
7395 .explanation::before {
7396 content: "";
7397 position: absolute;
7398 top: -10px;
7399 left: -10px;
7400 right: -10px;
7401 bottom: -10px;
7402 border: 1px solid #e6edf0;
7403 border-radius: 8px;
7404 pointer-events: none;
7405 }
7406 .explanation::after {
7407 font-family: "Roboto", sans-serif;
7408 content: "Hey!";
7409 text-transform: uppercase;
7410 font-weight: 700;
7411 top: -19px;
7412 left: 1rem;
7413 padding: 0 0.5rem;
7414 font-size: 0.6rem;
7415 position: absolute;
7416 z-index: 1;
7417 color: #000;
7418 background: #fff;
7419 }
7420
7421 .note-with-icon {
7422 margin: 0;
7423 padding-left: 20px;
7424 position: relative;
7425 }
7426 .note-with-icon .nic-content-wrap .info-tab .icon-wrapper::before {
7427 content: "";
7428 display: inline-block;
7429 position: absolute;
7430 left: 0;
7431 transform: rotateX(60deg);
7432 }
7433 .note-with-icon .nic-content-wrap .info-tab .icon-wrapper i {
7434 position: absolute;
7435 top: 0;
7436 bottom: 0;
7437 margin: auto;
7438 display: block;
7439 left: 0;
7440 right: 0;
7441 text-align: center;
7442 height: 20px;
7443 color: white;
7444 }
7445 .note-with-icon .nic-content-wrap .info-tab .icon-wrapper::after {
7446 content: "";
7447 display: inline-block;
7448 position: absolute;
7449 left: 0;
7450 transform: rotateX(60deg);
7451 background-color: #3b3f4c;
7452 width: 20px;
7453 height: 20px;
7454 border: 12px solid transparent;
7455 border-bottom-color: #fff;
7456 border-left-color: #fff;
7457 bottom: -18px;
7458 box-shadow: inset 12px 0 13px rgba(0, 0, 0, 0.5);
7459 }
7460
7461 .note-with-icon .nic-content-wrap {
7462 margin: 0 0 0 4px;
7463 }
7464
7465 .nic-content-wrap .nic-alert {
7466 padding: 3px;
7467 margin: 15px 0 20px;
7468 }
7469
7470 .nic-alert .nic-content-wrap .note-box {
7471 color: #144261;
7472 background: #d5e9f6;
7473 padding: 30px 40px;
7474 border: 1px solid rgba(255, 255, 255, 0);
7475 }
7476
7477 .nic-alert .nic-content-wrap .note-box h5.title {
7478 margin-bottom: 16px;
7479 }
7480
7481 .nic-alert .nic-content-wrap .note-box p {
7482 margin-bottom: 3px;
7483 }
7484
7485 .nic-alert .nic-content-wrap .note-icon {
7486 width: 40px;
7487 height: 40px;
7488 display: inline-block;
7489 position: absolute;
7490 top: 20px;
7491 left: 0;
7492 color: white;
7493 }
7494
7495 /* ALERT [MESSAGE && INFO] */
7496 .nic-alert.nic-alert-info .nic-content-wrap .note-box,
7497 .nic-alert.nic-alert-message .nic-content-wrap .note-box {
7498 background: rgba(76, 76, 241, 0.05);
7499 }
7500
7501 .nic-alert.nic-alert-info .nic-content-wrap .note-icon,
7502 .nic-alert.nic-alert-message .nic-content-wrap .note-icon {
7503 background: #4c5267;
7504 }
7505
7506 .nic-alert-message .note-icon .icon-wrapper::after,
7507 .nic-alert-info .note-icon .icon-wrapper::after {
7508 background: #3b3f4c;
7509 }
7510
7511 /* ALERT [WARNING] */
7512 .nic-alert.nic-alert-warning .nic-content-wrap .note-box {
7513 background: #fefbf1;
7514 }
7515
7516 .nic-alert.nic-alert-warning .nic-content-wrap .note-icon {
7517 background: #f6ba18;
7518 }
7519
7520 .nic-alert.nic-alert-warning .note-icon .icon-wrapper::after {
7521 background: #e1aa17;
7522 }
7523
7524 /* ALERT [SUCCESS] */
7525 .nic-alert.nic-alert-success .nic-content-wrap .note-box {
7526 background: #459e6d;
7527 }
7528
7529 .nic-alert.nic-alert-success .nic-content-wrap .note-icon {
7530 background: #30845e;
7531 }
7532
7533 .nic-alert.nic-alert-success .note-icon .icon-wrapper::after {
7534 background: #2d7655;
7535 }
7536
7537 /* ALERT [DANGER] */
7538 .nic-alert.nic-alert-danger .nic-content-wrap .note-box {
7539 background: #ffeff0;
7540 }
7541
7542 .nic-alert.nic-alert-danger .nic-content-wrap .note-icon {
7543 background: #fa303e;
7544 }
7545
7546 .nic-alert.nic-alert-danger .note-icon .icon-wrapper::after {
7547 background: #fa303e;
7548 }
7549
7550 .dual-box-wrapper {
7551 position: relative;
7552 border-width: 2.5px;
7553 border-radius: 8px;
7554 border-style: solid;
7555 }
7556
7557 .dual-box-wrapper.bottom-right,
7558 .dual-box-wrapper.top-right {
7559 right: -8px;
7560 }
7561
7562 .dual-box-wrapper .dual-box-content {
7563 bottom: 10px;
7564 left: 10px;
7565 border-width: 2.5px;
7566 border-radius: 8px;
7567 border-style: solid;
7568 background: #fff;
7569 position: relative;
7570 padding: 20px;
7571 box-sizing: border-box;
7572 }
7573 .dual-box-wrapper .dual-box-content.top-left {
7574 top: 10px;
7575 left: 10px;
7576 }
7577 .dual-box-wrapper .dual-box-content.top-right {
7578 top: 10px;
7579 right: 10px;
7580 left: unset;
7581 }
7582 .dual-box-wrapper .dual-box-content.bottom-right {
7583 bottom: 10px;
7584 right: 10px;
7585 left: unset;
7586 }
7587 .dual-box-wrapper .dual-box-content .notice-box {
7588 display: flex;
7589 border: none;
7590 border-radius: 6px;
7591 margin: 0;
7592 padding: 20px;
7593 }
7594 .dual-box-wrapper .dual-box-content.notice-warning .dual-box-content {
7595 border-color: #f6ba18;
7596 }
7597 .dual-box-wrapper .dual-box-content.notice-success .dual-box-content {
7598 border-color: #30845e;
7599 }
7600 .dual-box-wrapper .dual-box-content.notice-danger .dual-box-content {
7601 border-color: #fa303e;
7602 }
7603 .dual-box-wrapper .dual-box-content.notice-success .dual-box-content i {
7604 color: #459e6d;
7605 }
7606 .dual-box-wrapper .dual-box-content p {
7607 color: #535a60;
7608 }
7609
7610 .block-notice-wrapper {
7611 position: relative;
7612 padding: 20px 40px;
7613 margin: 0 0 5px;
7614 box-sizing: border-box;
7615 }
7616 .block-notice-wrapper::before {
7617 content: "";
7618 display: block;
7619 clear: both;
7620 width: 1rem;
7621 height: 100%;
7622 border-bottom-width: 1px;
7623 border-left-width: 1px;
7624 border-top-width: 1px;
7625 border-style: solid;
7626 border-color: #8cafd3;
7627 position: absolute;
7628 left: 0;
7629 top: 0;
7630 border-right: none;
7631 }
7632 .block-notice-wrapper::after {
7633 content: "";
7634 display: block;
7635 clear: both;
7636 width: 1rem;
7637 height: 100%;
7638 border-bottom-width: 1px;
7639 border-right-width: 1px;
7640 border-top-width: 1px;
7641 border-style: solid;
7642 border-color: #8cafd3;
7643 position: absolute;
7644 right: 0;
7645 top: 0;
7646 border-left: none;
7647 }
7648
7649 .block-notice-content-wrapper {
7650 background: white;
7651 position: relative;
7652 }
7653
7654 .block-notice-wrapper .block-notice-icon {
7655 width: 60px;
7656 height: 60px;
7657 border-radius: 50%;
7658 background: #fff;
7659 position: absolute;
7660 left: -28px;
7661 top: 15px;
7662 border: 10px solid white;
7663 }
7664 .block-notice-wrapper .block-notice-icon svg {
7665 width: auto;
7666 position: absolute;
7667 right: -2px;
7668 max-width: 2.5rem;
7669 top: -2px;
7670 z-index: 9999;
7671 }
7672
7673 .dual-box-wrapper .dual-box-content .notice-box i {
7674 width: auto;
7675 padding: 0;
7676 box-sizing: border-box;
7677 margin-right: 15px;
7678 }
7679 .dual-box-wrapper .dual-box-content .notice-box svg {
7680 width: auto;
7681 padding: 0;
7682 height: auto;
7683 max-height: 30px;
7684 margin-top: 5px;
7685 max-width: 3rem;
7686 margin-right: 15px;
7687 }
7688
7689 .block-notice-wrapper .block-notice-icon i {
7690 position: absolute;
7691 font-size: 22px;
7692 bottom: 0;
7693 margin: auto;
7694 display: block;
7695 text-align: center;
7696 height: 0;
7697 top: -22px;
7698 z-index: 9999;
7699 }
7700 .block-notice-wrapper .block-notice-body h5 {
7701 margin-bottom: 20px;
7702 }
7703 .block-notice-wrapper .block-notice-body p {
7704 margin: 0;
7705 }
7706 .block-notice-wrapper .block-notice-icon:after {
7707 content: "";
7708 display: block;
7709 clear: both;
7710 width: 100%;
7711 height: 100%;
7712 position: absolute;
7713 border-radius: 50%;
7714 }
7715 .block-notice-wrapper.block-notice-message .block-notice-icon:after {
7716 background: rgba(76, 76, 241, 0.05);
7717 }
7718 .block-notice-wrapper.block-notice-warning .block-notice-icon:after {
7719 background: #fefbf1;
7720 }
7721 .block-notice-wrapper.block-notice-info .block-notice-icon:after {
7722 background: #f6f6fe;
7723 }
7724 .block-notice-wrapper.block-notice-success .block-notice-icon:after {
7725 background: #459e6d;
7726 }
7727 .block-notice-wrapper.block-notice-danger .block-notice-icon:after {
7728 background: #ffeff0;
7729 }
7730 .block-notice-wrapper.block-notice-message:before, .block-notice-wrapper.block-notice-message:after {
7731 border-color: #4c5267;
7732 }
7733 .block-notice-wrapper.block-notice-warning:before, .block-notice-wrapper.block-notice-warning:after {
7734 border-color: #f6ba18;
7735 }
7736 .block-notice-wrapper.block-notice-info:before, .block-notice-wrapper.block-notice-info:after {
7737 border-color: #4c5267;
7738 }
7739 .block-notice-wrapper.block-notice-success:before, .block-notice-wrapper.block-notice-success:after {
7740 border-color: #30845e;
7741 }
7742 .block-notice-wrapper.block-notice-danger:before, .block-notice-wrapper.block-notice-danger:after {
7743 border-color: #fa303e;
7744 }
7745 .block-notice-wrapper.block-notice-success .block-notice-icon i {
7746 color: #fff;
7747 }
7748
7749 @-webkit-keyframes fadeIn {
7750 0% {
7751 opacity: 0;
7752 }
7753 100% {
7754 opacity: 1;
7755 }
7756 }
7757 @keyframes fadeIn {
7758 0% {
7759 opacity: 0;
7760 }
7761 100% {
7762 opacity: 1;
7763 }
7764 }
7765 .fadeIn {
7766 animation-name: fadeIn;
7767 }
7768
7769 @-webkit-keyframes fadeInDown {
7770 0% {
7771 opacity: 0;
7772 -webkit-transform: translateY(-20px);
7773 transform: translateY(-20px);
7774 }
7775 100% {
7776 opacity: 1;
7777 -webkit-transform: translateY(0);
7778 transform: translateY(0);
7779 }
7780 }
7781 @keyframes fadeInDown {
7782 0% {
7783 opacity: 0;
7784 -webkit-transform: translateY(-20px);
7785 -ms-transform: translateY(-20px);
7786 transform: translateY(-20px);
7787 }
7788 100% {
7789 opacity: 1;
7790 -webkit-transform: translateY(0);
7791 -ms-transform: translateY(0);
7792 transform: translateY(0);
7793 }
7794 }
7795 .fadeInDown {
7796 -webkit-animation-name: fadeInDown;
7797 animation-name: fadeInDown;
7798 }
7799
7800 @-webkit-keyframes height {
7801 0% {
7802 opacity: 0;
7803 height: 0;
7804 }
7805 100% {
7806 opacity: 0.1;
7807 height: 50%;
7808 }
7809 }
7810 @keyframes height {
7811 0% {
7812 opacity: 0;
7813 height: 0;
7814 transition: all 0.6s linear;
7815 }
7816 100% {
7817 opacity: 0.3;
7818 height: 50%;
7819 }
7820 }
7821 .height {
7822 -webkit-animation-name: height;
7823 animation-name: height;
7824 }
7825
7826 @-webkit-keyframes fadeInDown2 {
7827 0% {
7828 -webkit-transform: translateY(-40px);
7829 -ms-transform: translateY(-40px);
7830 transform: translateY(-40px);
7831 opacity: 0;
7832 }
7833 100% {
7834 -webkit-transform: translateY(0);
7835 transform: translateY(0);
7836 opacity: 0.2;
7837 }
7838 }
7839 @keyframes fadeInDown2 {
7840 0% {
7841 -webkit-transform: translateY(-40px);
7842 -ms-transform: translateY(-40px);
7843 transform: translateY(-40px);
7844 opacity: 0;
7845 }
7846 100% {
7847 -webkit-transform: translateY(0);
7848 -ms-transform: translateY(0);
7849 transform: translateY(0);
7850 opacity: 0.2;
7851 }
7852 }
7853 .fadeInDown2 {
7854 -webkit-animation-name: fadeInDown2;
7855 animation-name: fadeInDown2;
7856 }
7857
7858 @-webkit-keyframes fadeInDownBig {
7859 0% {
7860 opacity: 0;
7861 -webkit-transform: translateY(-2000px);
7862 transform: translateY(-2000px);
7863 }
7864 100% {
7865 opacity: 1;
7866 -webkit-transform: translateY(0);
7867 transform: translateY(0);
7868 }
7869 }
7870 @keyframes fadeInDownBig {
7871 0% {
7872 opacity: 0;
7873 -webkit-transform: translateY(-2000px);
7874 -ms-transform: translateY(-2000px);
7875 transform: translateY(-2000px);
7876 }
7877 100% {
7878 opacity: 1;
7879 -webkit-transform: translateY(0);
7880 -ms-transform: translateY(0);
7881 transform: translateY(0);
7882 }
7883 }
7884 .fadeInDownBig {
7885 -webkit-animation-name: fadeInDownBig;
7886 animation-name: fadeInDownBig;
7887 }
7888
7889 @-webkit-keyframes fadeInLeft {
7890 0% {
7891 opacity: 0;
7892 -webkit-transform: translateX(-20px);
7893 transform: translateX(-20px);
7894 }
7895 100% {
7896 opacity: 1;
7897 -webkit-transform: translateX(0);
7898 transform: translateX(0);
7899 }
7900 }
7901 @keyframes fadeInLeft {
7902 0% {
7903 opacity: 0;
7904 -webkit-transform: translateX(-20px);
7905 -ms-transform: translateX(-20px);
7906 transform: translateX(-20px);
7907 }
7908 100% {
7909 opacity: 1;
7910 -webkit-transform: translateX(0);
7911 -ms-transform: translateX(0);
7912 transform: translateX(0);
7913 }
7914 }
7915 .fadeInLeft {
7916 -webkit-animation-name: fadeInLeft;
7917 animation-name: fadeInLeft;
7918 }
7919
7920 @-webkit-keyframes fadeInLeftBig {
7921 0% {
7922 opacity: 0;
7923 -webkit-transform: translateX(-2000px);
7924 transform: translateX(-2000px);
7925 }
7926 100% {
7927 opacity: 1;
7928 -webkit-transform: translateX(0);
7929 transform: translateX(0);
7930 }
7931 }
7932 @keyframes fadeInLeftBig {
7933 0% {
7934 opacity: 0;
7935 -webkit-transform: translateX(-2000px);
7936 -ms-transform: translateX(-2000px);
7937 transform: translateX(-2000px);
7938 }
7939 100% {
7940 opacity: 1;
7941 -webkit-transform: translateX(0);
7942 -ms-transform: translateX(0);
7943 transform: translateX(0);
7944 }
7945 }
7946 .fadeInLeftBig {
7947 -webkit-animation-name: fadeInLeftBig;
7948 animation-name: fadeInLeftBig;
7949 }
7950
7951 @-webkit-keyframes fadeInRight {
7952 0% {
7953 opacity: 0;
7954 -webkit-transform: translateX(20px);
7955 transform: translateX(20px);
7956 }
7957 100% {
7958 opacity: 1;
7959 -webkit-transform: translateX(0);
7960 transform: translateX(0);
7961 }
7962 }
7963 @keyframes fadeInRight {
7964 0% {
7965 opacity: 0;
7966 -webkit-transform: translateX(20px);
7967 -ms-transform: translateX(20px);
7968 transform: translateX(20px);
7969 }
7970 100% {
7971 opacity: 1;
7972 -webkit-transform: translateX(0);
7973 -ms-transform: translateX(0);
7974 transform: translateX(0);
7975 }
7976 }
7977 .fadeInRight {
7978 -webkit-animation-name: fadeInRight;
7979 animation-name: fadeInRight;
7980 }
7981
7982 @-webkit-keyframes fadeInRightBig {
7983 0% {
7984 opacity: 0;
7985 -webkit-transform: translateX(2000px);
7986 transform: translateX(2000px);
7987 }
7988 100% {
7989 opacity: 1;
7990 -webkit-transform: translateX(0);
7991 transform: translateX(0);
7992 }
7993 }
7994 @keyframes fadeInRightBig {
7995 0% {
7996 opacity: 0;
7997 -webkit-transform: translateX(2000px);
7998 -ms-transform: translateX(2000px);
7999 transform: translateX(2000px);
8000 }
8001 100% {
8002 opacity: 1;
8003 -webkit-transform: translateX(0);
8004 -ms-transform: translateX(0);
8005 transform: translateX(0);
8006 }
8007 }
8008 .fadeInRightBig {
8009 -webkit-animation-name: fadeInRightBig;
8010 animation-name: fadeInRightBig;
8011 }
8012
8013 @-webkit-keyframes fadeInUp {
8014 0% {
8015 opacity: 0;
8016 -webkit-transform: translateY(20px);
8017 transform: translateY(20px);
8018 }
8019 100% {
8020 opacity: 1;
8021 -webkit-transform: translateY(0);
8022 transform: translateY(0);
8023 }
8024 }
8025 @keyframes fadeInUp {
8026 0% {
8027 opacity: 0;
8028 -webkit-transform: translateY(20px);
8029 -ms-transform: translateY(20px);
8030 transform: translateY(20px);
8031 }
8032 100% {
8033 opacity: 1;
8034 -webkit-transform: translateY(0);
8035 -ms-transform: translateY(0);
8036 transform: translateY(0);
8037 }
8038 }
8039 .fadeInUp {
8040 -webkit-animation-name: fadeInUp;
8041 animation-name: fadeInUp;
8042 }
8043
8044 @-webkit-keyframes fadeInUp2 {
8045 0% {
8046 opacity: 0;
8047 -webkit-transform: translateY(20px);
8048 transform: translateY(20px);
8049 }
8050 100% {
8051 opacity: 0.2;
8052 -webkit-transform: translateY(0);
8053 transform: translateY(0);
8054 }
8055 }
8056 @keyframes fadeInUp2 {
8057 0% {
8058 opacity: 0;
8059 -webkit-transform: translateY(20px);
8060 -ms-transform: translateY(20px);
8061 transform: translateY(20px);
8062 }
8063 100% {
8064 opacity: 0.2;
8065 -webkit-transform: translateY(0);
8066 -ms-transform: translateY(0);
8067 transform: translateY(0);
8068 }
8069 }
8070 .fadeInUp2 {
8071 -webkit-animation-name: fadeInUp2;
8072 animation-name: fadeInUp2;
8073 }
8074
8075 @-webkit-keyframes fadeInUpBig {
8076 0% {
8077 opacity: 0;
8078 -webkit-transform: translateY(2000px);
8079 transform: translateY(2000px);
8080 }
8081 100% {
8082 opacity: 1;
8083 -webkit-transform: translateY(0);
8084 transform: translateY(0);
8085 }
8086 }
8087 @keyframes fadeInUpBig {
8088 0% {
8089 opacity: 0;
8090 -webkit-transform: translateY(2000px);
8091 -ms-transform: translateY(2000px);
8092 transform: translateY(2000px);
8093 }
8094 100% {
8095 opacity: 1;
8096 -webkit-transform: translateY(0);
8097 -ms-transform: translateY(0);
8098 transform: translateY(0);
8099 }
8100 }
8101 .fadeInUpBig {
8102 -webkit-animation-name: fadeInUpBig;
8103 animation-name: fadeInUpBig;
8104 }
8105
8106 @-webkit-keyframes fadeOut {
8107 0% {
8108 opacity: 1;
8109 }
8110 100% {
8111 opacity: 0;
8112 }
8113 }
8114 @keyframes fadeOut {
8115 0% {
8116 opacity: 1;
8117 }
8118 100% {
8119 opacity: 0;
8120 }
8121 }
8122 .fadeOut {
8123 -webkit-animation-name: fadeOut;
8124 animation-name: fadeOut;
8125 }
8126
8127 @-webkit-keyframes fadeOutDown {
8128 0% {
8129 opacity: 1;
8130 -webkit-transform: translateY(0);
8131 transform: translateY(0);
8132 }
8133 100% {
8134 opacity: 0;
8135 -webkit-transform: translateY(20px);
8136 transform: translateY(20px);
8137 }
8138 }
8139 @keyframes fadeOutDown {
8140 0% {
8141 opacity: 1;
8142 -webkit-transform: translateY(0);
8143 -ms-transform: translateY(0);
8144 transform: translateY(0);
8145 }
8146 100% {
8147 opacity: 0;
8148 -webkit-transform: translateY(20px);
8149 -ms-transform: translateY(20px);
8150 transform: translateY(20px);
8151 }
8152 }
8153 .fadeOutDown {
8154 -webkit-animation-name: fadeOutDown;
8155 animation-name: fadeOutDown;
8156 }
8157
8158 @-webkit-keyframes fadeOutDownBig {
8159 0% {
8160 opacity: 1;
8161 -webkit-transform: translateY(0);
8162 transform: translateY(0);
8163 }
8164 100% {
8165 opacity: 0;
8166 -webkit-transform: translateY(2000px);
8167 transform: translateY(2000px);
8168 }
8169 }
8170 @keyframes fadeOutDownBig {
8171 0% {
8172 opacity: 1;
8173 -webkit-transform: translateY(0);
8174 -ms-transform: translateY(0);
8175 transform: translateY(0);
8176 }
8177 100% {
8178 opacity: 0;
8179 -webkit-transform: translateY(2000px);
8180 -ms-transform: translateY(2000px);
8181 transform: translateY(2000px);
8182 }
8183 }
8184 .fadeOutDownBig {
8185 -webkit-animation-name: fadeOutDownBig;
8186 animation-name: fadeOutDownBig;
8187 }
8188
8189 @-webkit-keyframes fadeOutLeft {
8190 0% {
8191 opacity: 1;
8192 -webkit-transform: translateX(0);
8193 transform: translateX(0);
8194 }
8195 100% {
8196 opacity: 0;
8197 -webkit-transform: translateX(-20px);
8198 transform: translateX(-20px);
8199 }
8200 }
8201 @keyframes fadeOutLeft {
8202 0% {
8203 opacity: 1;
8204 -webkit-transform: translateX(0);
8205 -ms-transform: translateX(0);
8206 transform: translateX(0);
8207 }
8208 100% {
8209 opacity: 0;
8210 -webkit-transform: translateX(-20px);
8211 -ms-transform: translateX(-20px);
8212 transform: translateX(-20px);
8213 }
8214 }
8215 .fadeOutLeft {
8216 -webkit-animation-name: fadeOutLeft;
8217 animation-name: fadeOutLeft;
8218 }
8219
8220 @-webkit-keyframes fadeOutLeftBig {
8221 0% {
8222 opacity: 1;
8223 -webkit-transform: translateX(0);
8224 transform: translateX(0);
8225 }
8226 100% {
8227 opacity: 0;
8228 -webkit-transform: translateX(-2000px);
8229 transform: translateX(-2000px);
8230 }
8231 }
8232 @keyframes fadeOutLeftBig {
8233 0% {
8234 opacity: 1;
8235 -webkit-transform: translateX(0);
8236 -ms-transform: translateX(0);
8237 transform: translateX(0);
8238 }
8239 100% {
8240 opacity: 0;
8241 -webkit-transform: translateX(-2000px);
8242 -ms-transform: translateX(-2000px);
8243 transform: translateX(-2000px);
8244 }
8245 }
8246 .fadeOutLeftBig {
8247 -webkit-animation-name: fadeOutLeftBig;
8248 animation-name: fadeOutLeftBig;
8249 }
8250
8251 @-webkit-keyframes fadeOutRight {
8252 0% {
8253 opacity: 1;
8254 -webkit-transform: translateX(0);
8255 transform: translateX(0);
8256 }
8257 100% {
8258 opacity: 0;
8259 -webkit-transform: translateX(20px);
8260 transform: translateX(20px);
8261 }
8262 }
8263 @keyframes fadeOutRight {
8264 0% {
8265 opacity: 1;
8266 -webkit-transform: translateX(0);
8267 -ms-transform: translateX(0);
8268 transform: translateX(0);
8269 }
8270 100% {
8271 opacity: 0;
8272 -webkit-transform: translateX(20px);
8273 -ms-transform: translateX(20px);
8274 transform: translateX(20px);
8275 }
8276 }
8277 .fadeOutRight {
8278 -webkit-animation-name: fadeOutRight;
8279 animation-name: fadeOutRight;
8280 }
8281
8282 @-webkit-keyframes fadeOutRightBig {
8283 0% {
8284 opacity: 1;
8285 -webkit-transform: translateX(0);
8286 transform: translateX(0);
8287 }
8288 100% {
8289 opacity: 0;
8290 -webkit-transform: translateX(2000px);
8291 transform: translateX(2000px);
8292 }
8293 }
8294 @keyframes fadeOutRightBig {
8295 0% {
8296 opacity: 1;
8297 -webkit-transform: translateX(0);
8298 -ms-transform: translateX(0);
8299 transform: translateX(0);
8300 }
8301 100% {
8302 opacity: 0;
8303 -webkit-transform: translateX(2000px);
8304 -ms-transform: translateX(2000px);
8305 transform: translateX(2000px);
8306 }
8307 }
8308 .fadeOutRightBig {
8309 -webkit-animation-name: fadeOutRightBig;
8310 animation-name: fadeOutRightBig;
8311 }
8312
8313 @-webkit-keyframes fadeOutUp {
8314 0% {
8315 opacity: 1;
8316 -webkit-transform: translateY(0);
8317 transform: translateY(0);
8318 }
8319 100% {
8320 opacity: 0;
8321 -webkit-transform: translateY(-20px);
8322 transform: translateY(-20px);
8323 }
8324 }
8325 @keyframes fadeOutUp {
8326 0% {
8327 opacity: 1;
8328 -webkit-transform: translateY(0);
8329 -ms-transform: translateY(0);
8330 transform: translateY(0);
8331 }
8332 100% {
8333 opacity: 0;
8334 -webkit-transform: translateY(-20px);
8335 -ms-transform: translateY(-20px);
8336 transform: translateY(-20px);
8337 }
8338 }
8339 .fadeOutUp {
8340 -webkit-animation-name: fadeOutUp;
8341 animation-name: fadeOutUp;
8342 }
8343
8344 @-webkit-keyframes fadeOutUpBig {
8345 0% {
8346 opacity: 1;
8347 -webkit-transform: translateY(0);
8348 transform: translateY(0);
8349 }
8350 100% {
8351 opacity: 0;
8352 -webkit-transform: translateY(-2000px);
8353 transform: translateY(-2000px);
8354 }
8355 }
8356 @keyframes fadeOutUpBig {
8357 0% {
8358 opacity: 1;
8359 -webkit-transform: translateY(0);
8360 -ms-transform: translateY(0);
8361 transform: translateY(0);
8362 }
8363 100% {
8364 opacity: 0;
8365 -webkit-transform: translateY(-2000px);
8366 -ms-transform: translateY(-2000px);
8367 transform: translateY(-2000px);
8368 }
8369 }
8370 .fadeOutUpBig {
8371 -webkit-animation-name: fadeOutUpBig;
8372 animation-name: fadeOutUpBig;
8373 }
8374
8375 .app-pricing-area {
8376 position: relative;
8377 background-size: cover;
8378 background-position: center;
8379 background-repeat: no-repeat;
8380 z-index: 1;
8381 }
8382
8383 .app-pricing-area .shape {
8384 position: absolute;
8385 z-index: -1;
8386 }
8387
8388 .app-pricing-area .shape:nth-child(1) {
8389 width: 10px;
8390 height: 10px;
8391 top: 7%;
8392 left: 15%;
8393 position: absolute;
8394 border-radius: 50%;
8395 background: #37bd8a;
8396 animation: zoomIn 3s linear infinite both alternate-reverse;
8397 }
8398
8399 .app-pricing-area .shape:nth-child(2) {
8400 width: 25px;
8401 height: 25px;
8402 top: 10%;
8403 left: 7%;
8404 position: absolute;
8405 border-radius: 50%;
8406 background: #bbc0c4;
8407 animation: zoomIn 6s linear infinite both alternate-reverse;
8408 }
8409
8410 .app-pricing-area .shape:nth-child(3) {
8411 width: 10px;
8412 height: 10px;
8413 top: 18%;
8414 right: 26%;
8415 position: absolute;
8416 border-radius: 50%;
8417 background: #37bd8a;
8418 animation: zoomIn 4s linear infinite both alternate-reverse;
8419 }
8420
8421 .app-pricing-area .shape:nth-child(4) {
8422 width: 25px;
8423 height: 25px;
8424 top: 10%;
8425 right: 12%;
8426 position: absolute;
8427 border-radius: 50%;
8428 background: #bbc0c4;
8429 animation: zoomIn 5s linear infinite both alternate-reverse;
8430 }
8431
8432 .app-pricing-area .shape:nth-child(5) {
8433 top: 16%;
8434 left: 24%;
8435 position: absolute;
8436 }
8437
8438 .app-pricing-area .shape:nth-child(6) {
8439 right: 20%;
8440 bottom: 12%;
8441 position: absolute;
8442 }
8443
8444 .steps-panel {
8445 box-shadow: 0 3px 6px 0 rgba(4, 73, 89, 0.02);
8446 border: 1px solid rgb(235, 235, 235);
8447 border-radius: 10px;
8448 padding-right: 10px;
8449 }
8450
8451 ul.ordered-list li::before {
8452 content: "h";
8453 font-family: "ElegantIcons";
8454 font-size: 10px;
8455 }
8456
8457 .ordered-list {
8458 position: relative;
8459 list-style: none;
8460 padding-left: 20px;
8461 margin: 30px 0;
8462 }
8463 .ordered-list::before {
8464 content: "";
8465 position: absolute;
8466 left: 32px;
8467 top: 0;
8468 bottom: 0;
8469 width: 1px;
8470 background-color: #c4cdd5;
8471 }
8472 .ordered-list::after {
8473 content: "";
8474 position: absolute;
8475 left: 32px;
8476 top: 0;
8477 bottom: 0;
8478 width: 1px;
8479 background-color: #c4cdd5;
8480 }
8481 .ordered-list li {
8482 font-size: 16px;
8483 font-weight: 400;
8484 line-height: 25px;
8485 margin: 16px 0;
8486 position: relative;
8487 padding-left: 35px;
8488 counter-increment: a;
8489 z-index: 1;
8490 }
8491 .ordered-list li::before {
8492 content: counter(a);
8493 position: absolute;
8494 color: #fff;
8495 height: 32px;
8496 width: 32px;
8497 border-radius: 50%;
8498 font-weight: 500;
8499 font-size: 12px;
8500 background-color: rgb(76, 76, 241);
8501 text-align: center;
8502 line-height: 23px;
8503 top: -4px;
8504 left: -4px;
8505 border: 5px solid #ffffff;
8506 }
8507 .ordered-list li:last-child {
8508 padding-bottom: 0;
8509 }
8510
8511 .direction_steps {
8512 display: inline-flex;
8513 align-items: center;
8514 }
8515 .direction_steps .direction_step {
8516 padding: 0 8px;
8517 font-size: 13px;
8518 border-radius: 4px;
8519 background: rgba(127, 130, 248, 0.8);
8520 color: #fff;
8521 position: relative;
8522 line-height: 20px;
8523 }
8524 .direction_steps .direction_step + .direction_step {
8525 margin-left: 26px;
8526 }
8527 .direction_steps .direction_step + .direction_step:before {
8528 content: "$";
8529 font-family: eleganticons;
8530 position: absolute;
8531 left: -20px;
8532 color: rgba(127, 130, 248, 0.8);
8533 }
8534
8535 /*========== cheatsheet_info css =========*/
8536 .cheatsheet_info + .cheatsheet_info {
8537 margin-top: 30px;
8538 }
8539
8540 .cheatsheet_accordion .card {
8541 border: 0;
8542 padding: 0;
8543 overflow: visible;
8544 margin-top: 0;
8545 background: transparent;
8546 }
8547 .cheatsheet_accordion .card .card-header {
8548 padding: 0;
8549 border: 0;
8550 background: transparent;
8551 }
8552 .cheatsheet_accordion .card .card-header button {
8553 padding: 0;
8554 font-size: 20px;
8555 font-weight: 600;
8556 margin-bottom: 30px;
8557 background: transparent;
8558 color: rgb(29, 39, 70);
8559 text-decoration: none;
8560 margin-left: 8px;
8561 border: none;
8562 }
8563 .cheatsheet_accordion .card .card-header button .minus {
8564 display: inline-block;
8565 }
8566 .cheatsheet_accordion .card .card-header button .pluse {
8567 display: none;
8568 }
8569 .cheatsheet_accordion .card .card-header button.active .pluse {
8570 display: inline-block;
8571 }
8572 .cheatsheet_accordion .card .card-header button.active .minus {
8573 display: none;
8574 }
8575 .cheatsheet_accordion .collapse.show {
8576 display: block;
8577 }
8578
8579 .cheatsheet_item {
8580 text-align: left;
8581 padding: 20px 20px 30px;
8582 margin-bottom: 0;
8583 transition: all 0.3s linear;
8584 background: #ffffff;
8585 box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
8586 }
8587 .cheatsheet_item:hover {
8588 box-shadow: 0 20px 27px 0 rgba(4, 73, 89, 0.08);
8589 }
8590 .cheatsheet_item .cheatsheet_num {
8591 text-align: right;
8592 transition: 0.3s;
8593 }
8594 .cheatsheet_item p {
8595 margin-bottom: 0;
8596 transition: 0.3s;
8597 }
8598 .cheatsheet_item h5 {
8599 margin-bottom: 0;
8600 color: rgb(76, 76, 241);
8601 transition: 0.3s;
8602 }
8603
8604 .light-header {
8605 position: absolute;
8606 bottom: -23px;
8607 left: 0;
8608 width: 100%;
8609 text-align: center;
8610 }
8611 @media (max-width: 768px) {
8612 .light-header {
8613 bottom: -10px;
8614 }
8615 }
8616 .light-header .title-light {
8617 color: #eff4f7;
8618 font-size: 60px;
8619 font-weight: 700;
8620 line-height: 1;
8621 margin: 0;
8622 }
8623 @media (max-width: 768px) {
8624 .light-header .title-light {
8625 font-size: 30px;
8626 bottom: -10px;
8627 }
8628 }
8629
8630 .cheat-info-box {
8631 display: flex;
8632 align-items: start;
8633 padding: 10px;
8634 background-color: #f7e2cf;
8635 border-radius: 5px;
8636 transition: 0.3s;
8637 position: relative;
8638 }
8639 .cheat-info-box .cheatsheet_num {
8640 position: absolute;
8641 right: 20px;
8642 }
8643 .cheat-info-box .outline {
8644 position: relative;
8645 }
8646 .cheat-info-box .outline:before {
8647 content: "";
8648 position: absolute;
8649 top: 20px;
8650 left: 60px;
8651 width: 48px;
8652 height: 3px;
8653 background-color: #d9534f;
8654 }
8655 .cheat-info-box .outline .info-box-number {
8656 background-color: #d9534f;
8657 border-radius: 50%;
8658 min-width: 72px;
8659 height: 72px;
8660 display: flex;
8661 align-items: center;
8662 justify-content: center;
8663 overflow: hidden;
8664 }
8665 .cheat-info-box .outline .info-box-number .number-circle {
8666 background-color: #fff;
8667 color: #d9534f;
8668 border-radius: 50%;
8669 min-width: 50px;
8670 height: 50px;
8671 display: flex;
8672 align-items: center;
8673 justify-content: center;
8674 font-size: 22px;
8675 font-weight: 500;
8676 box-shadow: 15px 20px 0 rgba(0, 0, 0, 0.1);
8677 }
8678 .cheat-info-box .cheat-info-content {
8679 padding: 10px 0 0 15px;
8680 display: inline-block;
8681 }
8682 .cheat-info-box .cheat-info-content .info-box-heading {
8683 font-size: 20px;
8684 font-weight: 700;
8685 color: #d9534f;
8686 transition: 0.3s;
8687 margin: 0 0 0 24px;
8688 }
8689 .cheat-info-box .cheat-info-content .info-box-description {
8690 font-size: 14px;
8691 color: #333;
8692 transition: 0.3s;
8693 }
8694
8695 .smooth-show-hide {
8696 display: none;
8697 opacity: 0;
8698 transition: opacity 0.5s ease-in-out; /* Smooth transition */
8699 }
8700
8701 .smooth-show-hide.visible {
8702 display: block;
8703 opacity: 1;
8704 }
8705
8706 /*========== cheatsheet-3 css =========*/
8707 .cs-items3-gap {
8708 grid-gap: 30px;
8709 }
8710 .cs-items3-gap .cs-items3 {
8711 padding: 20px 20px 25px;
8712 border-radius: 10px;
8713 overflow: hidden;
8714 transition: 0.3s;
8715 box-shadow: 0 5px 15px 5px rgba(0, 0, 0, 0.075);
8716 }
8717 .cs-items3-gap .cs-items3 .cs-outline3 {
8718 display: flex;
8719 position: relative;
8720 align-items: center;
8721 column-gap: 42px;
8722 transition: 0.3s;
8723 }
8724 .cs-items3-gap .cs-items3 .cs-outline3:before {
8725 content: "";
8726 position: absolute;
8727 top: 15px;
8728 left: 35px;
8729 width: 25px;
8730 height: 2px;
8731 background-color: #f6ba18;
8732 transition: 0.3s;
8733 }
8734 .cs-items3-gap .cs-items3 .cs-outline3 .serial-number {
8735 line-height: 1.3;
8736 font-size: 24px;
8737 font-weight: 700;
8738 color: #245749;
8739 transition: 0.3s;
8740 }
8741 .cs-items3-gap .cs-items3 .cs-outline3 .cs3-title {
8742 font-size: 24px;
8743 font-weight: 700;
8744 color: #245749;
8745 margin: 0;
8746 transition: 0.3s;
8747 }
8748 .cs-items3-gap .cs-items3 .cs-info-desc {
8749 color: #1a3830;
8750 transition: 0.3s;
8751 margin: 10px 0 15px;
8752 }
8753
8754 .expert-slider-one .item {
8755 margin: 0 15px;
8756 }
8757
8758 .card-style-three .name {
8759 font-weight: 500;
8760 font-size: 20px;
8761 color: #212529;
8762 cursor: pointer;
8763 }
8764 .card-style-three .name:hover {
8765 color: #244034;
8766 text-decoration: underline;
8767 }
8768 .card-style-three .img-meta {
8769 margin-bottom: 20px;
8770 }
8771 .card-style-three .img-meta img {
8772 border-radius: 200px;
8773 }
8774
8775 .card-style-three .post {
8776 color: rgba(0, 0, 0, 0.5);
8777 }
8778
8779 .expert-section-one .slick-arrow-one {
8780 position: absolute;
8781 right: 0;
8782 top: -100px;
8783 }
8784
8785 .slick-arrow-one {
8786 margin-left: -2px;
8787 margin-right: -2px;
8788 }
8789 .slick-arrow-one li {
8790 cursor: pointer;
8791 width: 50px;
8792 height: 50px;
8793 border-radius: 50%;
8794 color: #000;
8795 text-align: center;
8796 line-height: 50px;
8797 font-size: 22px;
8798 transition: all 0.2s linear;
8799 display: flex;
8800 align-items: center;
8801 justify-content: center;
8802 }
8803 .slick-arrow-one li:hover {
8804 background: #d2f34c;
8805 }
8806 .slick-arrow-one.color-two li:hover {
8807 background: #d2f34c;
8808 color: #fff;
8809 }
8810
8811 .expert-slider-two {
8812 margin-left: -15px;
8813 margin-right: -15px;
8814 }
8815 .expert-slider-two .slick-slide {
8816 margin: 0 15px;
8817 }
8818 .expert-slider-two .slick-dots {
8819 position: relative;
8820 padding: 0;
8821 margin: 65px 0 0;
8822 justify-content: center;
8823 bottom: 0;
8824 display: flex;
8825 }
8826 .expert-slider-two .slick-dots:after, .expert-slider-two .slick-dots::before {
8827 content: "";
8828 position: absolute;
8829 width: 44%;
8830 height: 1px;
8831 background: #e0e0e0;
8832 top: 4px;
8833 left: 0;
8834 }
8835 .expert-slider-two .slick-dots::before {
8836 left: auto;
8837 right: 0;
8838 }
8839 .expert-slider-two .slick-dots li {
8840 margin: 0;
8841 padding: 0;
8842 width: auto;
8843 height: auto;
8844 }
8845 .expert-slider-two .slick-dots li button {
8846 text-indent: -50000px;
8847 width: 8px;
8848 height: 8px;
8849 border-radius: 50%;
8850 margin: 0 5px;
8851 background: #e4e4e4;
8852 transition: all 0.3s ease-in-out;
8853 }
8854 .expert-slider-two .slick-dots li.slick-active button {
8855 background: #00bf58;
8856 }
8857
8858 .card-style-eight .img-meta {
8859 position: relative;
8860 overflow: hidden;
8861 margin-bottom: 20px;
8862 }
8863 .card-style-eight .img-meta::before {
8864 content: "";
8865 position: absolute;
8866 width: 50px;
8867 height: 50px;
8868 background: #fff;
8869 right: -25px;
8870 bottom: -25px;
8871 transform: rotate(45deg);
8872 }
8873 .card-style-eight .img-meta img {
8874 width: 100%;
8875 }
8876
8877 .card-style-eight .name {
8878 font-size: 18px;
8879 color: #000;
8880 font-weight: 500;
8881 }
8882 .card-style-eight .name:hover {
8883 color: #00bf58;
8884 }
8885 .card-style-eight .post {
8886 font-size: 16px;
8887 color: rgba(0, 0, 0, 0.7);
8888 }
8889
8890 .big-circle {
8891 width: 490px;
8892 height: 490px;
8893 z-index: 1;
8894 border: 1px solid #EEEEEE;
8895 border-radius: 50%;
8896 margin: 0 !important;
8897 }
8898 .big-circle .inner-circle {
8899 width: 51%;
8900 height: 51%;
8901 border: 1px solid #EEEEEE;
8902 }
8903 .big-circle .shape_01 {
8904 right: -7%;
8905 bottom: 30%;
8906 }
8907 .big-circle .brand-icon {
8908 background: rgba(255, 255, 255, 0);
8909 position: absolute;
8910 z-index: 2;
8911 border: 1px solid #EEEEEE;
8912 overflow: hidden;
8913 }
8914 .big-circle .brand-icon:nth-child(1) {
8915 width: 51%;
8916 height: 51%;
8917 border: 1px solid #EEEEEE;
8918 position: relative;
8919 }
8920 .big-circle .brand-icon:nth-child(2) {
8921 width: 65px;
8922 height: 65px;
8923 top: -25px;
8924 left: 50%;
8925 animation: jumpTwo 8s infinite linear;
8926 }
8927 .big-circle .brand-icon:nth-child(3) {
8928 width: 100px;
8929 height: 100px;
8930 top: 19%;
8931 right: -4%;
8932 animation: jumpThree 8s infinite linear;
8933 }
8934 .big-circle .brand-icon:nth-child(4) {
8935 width: 140px;
8936 height: 140px;
8937 bottom: -8%;
8938 right: 10%;
8939 animation: jumpFour 8s infinite linear;
8940 }
8941 .big-circle .brand-icon:nth-child(5) {
8942 width: 80px;
8943 height: 80px;
8944 bottom: 8%;
8945 left: 4%;
8946 animation: jumpTwo 8s infinite linear;
8947 }
8948 .big-circle .brand-icon:nth-child(6) {
8949 width: 100px;
8950 height: 100px;
8951 top: 22%;
8952 left: -5%;
8953 animation: jumpThree 8s infinite linear;
8954 }
8955
8956 /* Custome Animation */
8957 @-webkit-keyframes jump {
8958 0% {
8959 -webkit-transform: translate3d(0, 0, 0);
8960 transform: translate3d(0, 0, 0);
8961 }
8962 40% {
8963 -webkit-transform: translate3d(0, 50%, 0);
8964 transform: translate3d(0, 50%, 0);
8965 }
8966 100% {
8967 -webkit-transform: translate3d(0, 0, 0);
8968 transform: translate3d(0, 0, 0);
8969 }
8970 }
8971 @keyframes jump {
8972 0% {
8973 -webkit-transform: translate3d(0, 0, 0);
8974 transform: translate3d(0, 0, 0);
8975 }
8976 40% {
8977 -webkit-transform: translate3d(0, 50%, 0);
8978 transform: translate3d(0, 50%, 0);
8979 }
8980 100% {
8981 -webkit-transform: translate3d(0, 0, 0);
8982 transform: translate3d(0, 0, 0);
8983 }
8984 }
8985 @-webkit-keyframes jumpTwo {
8986 0% {
8987 -webkit-transform: translate3d(0, 0, 0);
8988 transform: translate3d(0, 0, 0);
8989 }
8990 40% {
8991 -webkit-transform: translate3d(0, 20px, 0);
8992 transform: translate3d(0, 20px, 0);
8993 }
8994 100% {
8995 -webkit-transform: translate3d(0, 0, 0);
8996 transform: translate3d(0, 0, 0);
8997 }
8998 }
8999 @keyframes jumpTwo {
9000 0% {
9001 -webkit-transform: translate3d(0, 0, 0);
9002 transform: translate3d(0, 0, 0);
9003 }
9004 40% {
9005 -webkit-transform: translate3d(0, 20px, 0);
9006 transform: translate3d(0, 20px, 0);
9007 }
9008 100% {
9009 -webkit-transform: translate3d(0, 0, 0);
9010 transform: translate3d(0, 0, 0);
9011 }
9012 }
9013 @-webkit-keyframes jumpThree {
9014 0% {
9015 -webkit-transform: translate3d(0, 0, 0);
9016 transform: translate3d(0, 0, 0);
9017 }
9018 40% {
9019 -webkit-transform: translate3d(0, -20px, 0);
9020 transform: translate3d(0, -20px, 0);
9021 }
9022 100% {
9023 -webkit-transform: translate3d(0, 0, 0);
9024 transform: translate3d(0, 0, 0);
9025 }
9026 }
9027 @keyframes jumpThree {
9028 0% {
9029 -webkit-transform: translate3d(0, 0, 0);
9030 transform: translate3d(0, 0, 0);
9031 }
9032 40% {
9033 -webkit-transform: translate3d(0, -20px, 0);
9034 transform: translate3d(0, -20px, 0);
9035 }
9036 100% {
9037 -webkit-transform: translate3d(0, 0, 0);
9038 transform: translate3d(0, 0, 0);
9039 }
9040 }
9041 @-webkit-keyframes jumpFour {
9042 0% {
9043 -webkit-transform: translate3d(0, 0, 0);
9044 transform: translate3d(0, 0, 0);
9045 }
9046 50% {
9047 -webkit-transform: translate3d(0, -10px, 0);
9048 transform: translate3d(0, -10px, 0);
9049 }
9050 100% {
9051 -webkit-transform: translate3d(0, 0, 0);
9052 transform: translate3d(0, 0, 0);
9053 }
9054 }
9055 @keyframes jumpFour {
9056 0% {
9057 -webkit-transform: translate3d(0, 0, 0);
9058 transform: translate3d(0, 0, 0);
9059 }
9060 50% {
9061 -webkit-transform: translate3d(0, -10px, 0);
9062 transform: translate3d(0, -10px, 0);
9063 }
9064 100% {
9065 -webkit-transform: translate3d(0, 0, 0);
9066 transform: translate3d(0, 0, 0);
9067 }
9068 }
9069 @-webkit-keyframes jumpFive {
9070 0% {
9071 -webkit-transform: translate3d(0, 0, 0);
9072 transform: translate3d(0, 0, 0);
9073 }
9074 50% {
9075 -webkit-transform: translate3d(0, 10px, 0);
9076 transform: translate3d(0, 10px, 0);
9077 }
9078 100% {
9079 -webkit-transform: translate3d(0, 0, 0);
9080 transform: translate3d(0, 0, 0);
9081 }
9082 }
9083 @keyframes jumpFive {
9084 0% {
9085 -webkit-transform: translate3d(0, 0, 0);
9086 transform: translate3d(0, 0, 0);
9087 }
9088 50% {
9089 -webkit-transform: translate3d(0, 10px, 0);
9090 transform: translate3d(0, 10px, 0);
9091 }
9092 100% {
9093 -webkit-transform: translate3d(0, 0, 0);
9094 transform: translate3d(0, 0, 0);
9095 }
9096 }
9097 .integration_style_two {
9098 background: url("../images/bg_shape_02.png") no-repeat scroll center center;
9099 border: 0;
9100 }
9101 .integration_style_two .brand-icon {
9102 position: absolute;
9103 background: #fff;
9104 }
9105 .integration_style_two .brand-icon:nth-child(1) {
9106 width: 155px;
9107 height: 155px;
9108 position: absolute;
9109 top: 50%;
9110 left: 50%;
9111 transform: translate(-50%, -50%);
9112 }
9113 .integration_style_two .brand-icon:nth-child(2) {
9114 width: 55px;
9115 height: 55px;
9116 top: 2%;
9117 left: 50%;
9118 animation: jumpTwo 8s infinite linear;
9119 }
9120 .integration_style_two .brand-icon:nth-child(3) {
9121 width: 88px;
9122 height: 88px;
9123 top: 20%;
9124 right: 2%;
9125 animation: jumpThree 8s infinite linear;
9126 }
9127 .integration_style_two .brand-icon:nth-child(4) {
9128 width: 110px;
9129 height: 110px;
9130 bottom: -2%;
9131 right: 23%;
9132 animation: jumpFour 8s infinite linear;
9133 }
9134 .integration_style_two .brand-icon:nth-child(5) {
9135 width: 68px;
9136 height: 68px;
9137 bottom: 17%;
9138 left: 7%;
9139 animation: jumpTwo 8s infinite linear;
9140 }
9141 .integration_style_two .brand-icon:nth-child(6) {
9142 width: 88px;
9143 height: 88px;
9144 top: 20%;
9145 left: 2%;
9146 animation: jumpThree 8s infinite linear;
9147 }
9148
9149 @media (max-width: 1199px) {
9150 .big-circle .brand-icon {
9151 max-height: 105px;
9152 max-width: 105px;
9153 padding: 15px;
9154 }
9155 }
9156 @media (max-width: 991px) {
9157 .big-circle {
9158 margin: 60px auto 0;
9159 }
9160 .integration_style_two {
9161 margin-top: 0;
9162 background-size: contain !important;
9163 }
9164 }
9165 @media (max-width: 767px) {
9166 .big-circle {
9167 width: 370px;
9168 height: 370px;
9169 }
9170 }
9171 @media (max-width: 576px) {
9172 .big-circle .brand-icon:nth-child(2) {
9173 right: 1%;
9174 }
9175 .big-circle .brand-icon:nth-child(6) {
9176 left: 1%;
9177 }
9178 }
9179 .blog_grid_gap {
9180 row-gap: 50px;
9181 }
9182
9183 .blog-meta-two {
9184 transition: 0.3s;
9185 margin-bottom: 0;
9186 }
9187 .blog-meta-two .post-img {
9188 display: inline-block;
9189 position: relative;
9190 margin-bottom: unset !important;
9191 overflow: hidden;
9192 padding: 0;
9193 }
9194 .blog-meta-two .post-img a {
9195 overflow: hidden;
9196 }
9197 .blog-meta-two .post-img a img {
9198 transition: all 0.4s ease-in-out;
9199 }
9200 .blog-meta-two .post-img .tags {
9201 font-size: 11px;
9202 letter-spacing: 0.5px;
9203 border-radius: 13px;
9204 padding: 5px 18px;
9205 color: #fff;
9206 text-transform: uppercase;
9207 background: #00bf58;
9208 position: absolute;
9209 left: 30px;
9210 bottom: 30px;
9211 }
9212 .blog-meta-two .post-img .tags:hover {
9213 text-decoration: none;
9214 }
9215 .blog-meta-two .post-data .blog-one-title:hover {
9216 text-decoration: none;
9217 }
9218 .blog-meta-two:hover .post-img img {
9219 transform: scale3d(1.1, 1.1, 1);
9220 }
9221 .blog-meta-two .fw-500 {
9222 font-weight: 500;
9223 }
9224 .blog-meta-two .date a {
9225 color: #aaaaaa;
9226 }
9227 .blog-meta-two .date a:hover {
9228 color: #000;
9229 text-decoration: underline;
9230 }
9231 .blog-meta-two .blog-title {
9232 font-family: "gordita";
9233 font-size: 32px;
9234 line-height: 1.28em;
9235 margin: 25px 0;
9236 font-weight: 500;
9237 color: #000000;
9238 transition: all 0.3s ease-in-out;
9239 }
9240 .blog-meta-two .blog-title:hover {
9241 color: #00bf58;
9242 }
9243 .blog-meta-two .blog-title.two {
9244 font-size: 24px;
9245 line-height: 1.428em;
9246 margin-top: 10px;
9247 margin-bottom: 30px;
9248 }
9249 .blog-meta-two .continue-btn {
9250 font-size: 18px;
9251 color: #000;
9252 letter-spacing: -1px;
9253 vertical-align: middle;
9254 font-weight: 500;
9255 transition: all 0.3s linear;
9256 }
9257 .blog-meta-two .continue-btn i {
9258 margin-left: 5px;
9259 }
9260 .blog-meta-two .continue-btn:hover {
9261 color: #00bf58;
9262 text-decoration: none;
9263 }
9264 .blog-meta-two .continue-btn.btn-seven {
9265 font-weight: 500;
9266 padding: 13px 36px;
9267 text-align: center;
9268 border-radius: 50px;
9269 color: #00bf58;
9270 border: 1px solid #00bf58;
9271 transition: all 0.3s ease-in-out 0s;
9272 display: inline-block;
9273 text-align: center;
9274 }
9275 .blog-meta-two .continue-btn.btn-seven:hover {
9276 background: #244034;
9277 border-color: #244034;
9278 color: #fff;
9279 }
9280 .blog-meta-two.box-layout {
9281 background: #fff;
9282 border-radius: 20px;
9283 padding: 20px 25px 50px;
9284 }
9285 .blog-meta-two.box-layout .post-img {
9286 border-radius: 15px;
9287 }
9288
9289 .blog_item a:hover {
9290 text-decoration: none !important;
9291 }
9292
9293 .blog-meta-one {
9294 margin-top: 0;
9295 transition: 0.3s;
9296 }
9297 .blog-meta-one .post-img {
9298 overflow: hidden;
9299 display: inline-block;
9300 padding: 0;
9301 }
9302 .blog-meta-one .post-img img {
9303 transition: all 0.3s ease-in-out;
9304 }
9305 .blog-meta-one .post-data {
9306 margin-top: 25px;
9307 }
9308 .blog-meta-one .post-data .by-author {
9309 font-family: "IBM Plex Sans", sans-serif;
9310 font-size: 15px;
9311 font-weight: 400;
9312 line-height: 18px;
9313 color: rgba(0, 0, 0, 0.7019607843);
9314 margin-bottom: 0;
9315 padding-left: 0;
9316 text-transform: capitalize;
9317 }
9318 .blog-meta-one .post-data .by-author .author-name {
9319 font-size: 16px;
9320 color: #212529;
9321 font-weight: 600;
9322 }
9323 .blog-meta-one .post-data .by-author .author-name:hover {
9324 text-decoration: underline;
9325 }
9326 .blog-meta-one .date {
9327 font-size: 14px;
9328 color: rgba(0, 0, 0, 0.5);
9329 }
9330 .blog-meta-one .date .fw-500 {
9331 font-weight: 500;
9332 }
9333 .blog-meta-one .date a {
9334 color: rgba(0, 0, 0, 0.5);
9335 }
9336 .blog-meta-one .date a:hover {
9337 text-decoration: underline;
9338 }
9339 .blog-meta-one .blog-title {
9340 font-family: "gordita";
9341 font-size: 24px;
9342 line-height: 1.4em;
9343 color: #000;
9344 margin: 6px 0 10px 0;
9345 transition: all 0.3s ease-in-out;
9346 }
9347 .blog-meta-one .blog-title:hover {
9348 color: #00bf58;
9349 }
9350 .blog-meta-one p {
9351 font-family: "gordita";
9352 font-size: 16px;
9353 color: rgba(0, 0, 0, 0.7);
9354 margin-bottom: 20px;
9355 }
9356 .blog-meta-one .continue-btn {
9357 font-size: 30px;
9358 color: #000;
9359 }
9360 .blog-meta-one .continue-btn:hover {
9361 text-decoration: none;
9362 }
9363 .blog-meta-one .author {
9364 font-size: 16px;
9365 color: rgba(0, 0, 0, 0.7);
9366 }
9367 .blog-meta-one .author a {
9368 font-weight: 500;
9369 color: #000;
9370 transition: all 0.2s linear;
9371 }
9372 .blog-meta-one .author a:hover {
9373 text-decoration: underline;
9374 }
9375 .blog-meta-one:hover .post-img img {
9376 transform: scale3d(1.1, 1.1, 1);
9377 }
9378 .blog-meta-one .blog-tow-title:hover {
9379 text-decoration: none;
9380 }
9381
9382 .blog-meta-one .tags {
9383 font-size: 15px;
9384 color: rgba(0, 0, 0, 0.4);
9385 transition: all 0.2s linear;
9386 }
9387 .blog-meta-one .tags:hover {
9388 color: #000;
9389 text-decoration: none;
9390 }
9391
9392 .item-margin {
9393 margin: 0 12px;
9394 }
9395
9396 .card-style-six {
9397 background-position: center;
9398 background-repeat: no-repeat;
9399 background-size: cover;
9400 z-index: 1;
9401 height: 350px;
9402 }
9403 .card-style-six:before {
9404 content: "";
9405 width: 100%;
9406 height: 30%;
9407 bottom: 0;
9408 left: 0;
9409 z-index: -1;
9410 position: absolute;
9411 background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
9412 -webkit-transition: all 0.2s ease-in-out 0s;
9413 -moz-transition: all 0.2s ease-in-out 0s;
9414 -ms-transition: all 0.2s ease-in-out 0s;
9415 -o-transition: all 0.2s ease-in-out 0s;
9416 transition: all 0.2s ease-in-out 0s;
9417 }
9418 .card-style-six:hover:before {
9419 height: 100%;
9420 }
9421 .card-style-six .blog-item-six {
9422 padding: 0 0 20px 24px;
9423 text-decoration: none !important;
9424 }
9425 .card-style-six .blog-item-six .blog-six-title {
9426 font-family: "gordita";
9427 font-size: 22px;
9428 line-height: 1.3em;
9429 font-weight: 500;
9430 color: #fff;
9431 }
9432
9433 .blog-slider-arrows {
9434 position: absolute;
9435 top: -110px;
9436 right: -2px;
9437 }
9438 @media (min-width: 992px) and (max-width: 1201px) {
9439 .blog-slider-arrows {
9440 top: -100px;
9441 }
9442 }
9443 @media (min-width: 541px) and (max-width: 991px) {
9444 .blog-slider-arrows {
9445 top: -80px;
9446 }
9447 }
9448 @media only screen and (max-width: 540px) {
9449 .blog-slider-arrows {
9450 position: static;
9451 margin-top: 20px;
9452 }
9453 }
9454 .blog-slider-arrows .blog-slick-arrow {
9455 width: 40px;
9456 height: 35px;
9457 cursor: pointer;
9458 border: 1px solid #f5f5f5;
9459 text-align: center;
9460 line-height: 31px;
9461 font-size: 17px;
9462 color: black;
9463 display: flex;
9464 justify-content: center;
9465 align-items: center;
9466 transition: all 0.2s ease-in-out 0s;
9467 }
9468 .blog-slider-arrows .blog-slick-arrow:hover {
9469 background: #f5f5f5;
9470 color: #005025;
9471 }
9472
9473 .spel-pagination {
9474 display: flex;
9475 align-items: center;
9476 }
9477 .spel-pagination .current {
9478 width: 35px;
9479 height: 35px;
9480 text-align: center;
9481 line-height: 35px;
9482 border-radius: 50%;
9483 font-size: 17px;
9484 font-weight: 500;
9485 color: #fff;
9486 background: #31795a;
9487 }
9488 .spel-pagination a {
9489 width: 35px;
9490 height: 35px;
9491 text-align: center;
9492 line-height: 35px;
9493 border-radius: 50%;
9494 font-size: 17px;
9495 font-weight: 500;
9496 color: #31795a;
9497 }
9498 .spel-pagination a:hover {
9499 text-decoration: none;
9500 }
9501 .spel-pagination a.prev, .spel-pagination a.next {
9502 display: flex;
9503 align-items: center;
9504 width: auto;
9505 height: auto;
9506 }
9507
9508 .before-after-banner {
9509 position: relative;
9510 }
9511 @media (min-width: 1080px) {
9512 .before-after-banner {
9513 max-height: 100vh;
9514 }
9515 }
9516 .before-after-banner #beforeAfter {
9517 height: 100%;
9518 }
9519 .before-after-banner img {
9520 max-width: inherit;
9521 width: 100%;
9522 }
9523 @media (min-width: 1080px) {
9524 .before-after-banner img {
9525 max-height: 100vh;
9526 }
9527 }
9528 .before-after-banner .indicator {
9529 font-size: 16px;
9530 font-weight: 500;
9531 line-height: 28px;
9532 color: #17161a;
9533 background-color: #fff;
9534 padding: 6px 20px;
9535 border-radius: 4px;
9536 display: inline-block;
9537 position: absolute;
9538 bottom: 30px;
9539 z-index: 1;
9540 }
9541 .before-after-banner .indicator.after {
9542 right: 60px;
9543 }
9544 .before-after-banner .indicator.before {
9545 left: 60px;
9546 }
9547
9548 .timeline-widget {
9549 list-style: none;
9550 padding: 0;
9551 position: relative;
9552 }
9553 .timeline-widget::before {
9554 top: 0;
9555 bottom: 0;
9556 position: absolute;
9557 content: " ";
9558 width: 5px;
9559 background-color: #f5f5f5;
9560 left: 50%;
9561 margin-left: -1.5px;
9562 border-radius: 2.5px;
9563 }
9564
9565 .timeline-wrapper {
9566 display: block;
9567 margin-bottom: 40px;
9568 position: relative;
9569 width: 100%;
9570 padding-right: 90px;
9571 }
9572 .timeline-wrapper.timeline-inverted {
9573 padding-right: 0;
9574 padding-left: 90px;
9575 }
9576 .timeline-wrapper.timeline-inverted .timeline-panel {
9577 margin-left: auto;
9578 margin-right: 10%;
9579 text-align: left;
9580 }
9581 .timeline-wrapper.timeline-inverted .timeline-panel p::after {
9582 left: inherit;
9583 right: calc(100% + 75px);
9584 }
9585 .timeline-wrapper.timeline-inverted .timestamp {
9586 left: inherit;
9587 right: calc(50% + 30px);
9588 }
9589 .timeline-wrapper.timeline-inverted .timestamp::after {
9590 right: inherit;
9591 left: 100%;
9592 border-right: none;
9593 border-left: 11px solid #f5f5f5;
9594 }
9595 .timeline-wrapper::after {
9596 content: "";
9597 width: 15px;
9598 height: 15px;
9599 position: absolute;
9600 top: 16px;
9601 left: calc(50% - 7px);
9602 z-index: 0;
9603 border-radius: 50%;
9604 border: 3px solid #3d3d4e;
9605 }
9606 .timeline-wrapper .timeline-panel {
9607 position: relative;
9608 width: 40%;
9609 text-align: right;
9610 margin-left: 10%;
9611 }
9612 .timeline-wrapper .timeline-panel h3 {
9613 font-family: "IBM Plex Sans", sans-serif;
9614 font-size: 24px;
9615 font-weight: 500;
9616 line-height: 30px;
9617 color: #17161a;
9618 }
9619 .timeline-wrapper .timeline-panel span,
9620 .timeline-wrapper .timeline-panel p {
9621 font-family: "IBM Plex Sans", sans-serif;
9622 font-size: 16px;
9623 font-weight: 400;
9624 line-height: 28px;
9625 color: #3d3d4e;
9626 }
9627 .timeline-wrapper .timeline-panel p {
9628 margin-top: 20px;
9629 position: relative;
9630 }
9631 .timeline-wrapper .timeline-panel p::after {
9632 content: "";
9633 width: 100%;
9634 height: 100%;
9635 background-image: url("../images/timeline-bg.png");
9636 background-position: center;
9637 background-size: cover;
9638 position: absolute;
9639 left: calc(100% + 75px);
9640 top: 0;
9641 }
9642 .timeline-wrapper .timestamp {
9643 position: absolute;
9644 top: 9px;
9645 left: calc(50% + 30px);
9646 z-index: 0;
9647 background: #f5f5f5;
9648 border-radius: 3px;
9649 padding: 2px 9px;
9650 font-family: "IBM Plex Sans", sans-serif;
9651 font-size: 12px;
9652 font-weight: 400;
9653 }
9654 .timeline-wrapper .timestamp::after {
9655 position: absolute;
9656 right: 100%;
9657 content: "";
9658 width: 0;
9659 height: 0;
9660 border-top: 7px solid transparent;
9661 border-bottom: 7px solid transparent;
9662 border-right: 11px solid #f5f5f5;
9663 top: 50%;
9664 transform: translateY(-50%);
9665 }
9666
9667 .timeline-roadmap .icon {
9668 position: relative;
9669 z-index: 1;
9670 height: 100%;
9671 display: inline-block;
9672 overflow: hidden;
9673 }
9674 .timeline-roadmap .icon.animated::after {
9675 transform: scaleY(1);
9676 }
9677 .timeline-roadmap .icon.no-line::after {
9678 display: none;
9679 }
9680 .timeline-roadmap .icon img {
9681 border-radius: 50%;
9682 padding: 15px;
9683 border: 1px solid #ccccce;
9684 background: #f5f5f5;
9685 display: inline-flex;
9686 overflow: hidden;
9687 }
9688 .timeline-roadmap .icon::after {
9689 content: "";
9690 position: absolute;
9691 border-left: 1px solid #ccccce;
9692 z-index: -1;
9693 height: 100%;
9694 left: 50%;
9695 top: 10%;
9696 transform: scaleY(0);
9697 transform-origin: top;
9698 transition: transform 1s linear;
9699 }
9700 .timeline-roadmap h4 {
9701 margin-bottom: 30px;
9702 margin-top: 15px;
9703 }
9704 .timeline-roadmap h4 a {
9705 font-family: "IBM Plex Sans", sans-serif;
9706 color: #17161a;
9707 }
9708 .timeline-roadmap .timeline div {
9709 padding: 0;
9710 height: 40px;
9711 }
9712 .timeline-roadmap .curve {
9713 display: flex;
9714 overflow: hidden;
9715 }
9716 .timeline-roadmap .corner {
9717 border: 1px solid #ccccce;
9718 width: 100%;
9719 position: relative;
9720 border-radius: 10px;
9721 transform: scaleX(0);
9722 transform-origin: left;
9723 transition: transform 1s linear;
9724 }
9725 .timeline-roadmap .corner.top-right {
9726 left: 43px;
9727 top: -50%;
9728 transition-delay: 1s;
9729 }
9730 .timeline-roadmap .corner.top-left {
9731 right: 42px;
9732 top: -50%;
9733 transform-origin: right;
9734 transition-delay: 1s;
9735 }
9736 .timeline-roadmap .corner.right-bottom {
9737 left: 43px;
9738 top: calc(50% - 1px);
9739 transform-origin: right;
9740 transition-delay: 4s;
9741 }
9742 .timeline-roadmap .corner.left-bottom {
9743 right: 43px;
9744 top: calc(50% - 1px);
9745 transition-delay: 4s;
9746 }
9747 .timeline-roadmap .animated hr {
9748 transform: scale(1);
9749 transition-delay: 2s;
9750 }
9751 .timeline-roadmap .animated .corner {
9752 transform: scale(1);
9753 }
9754 .timeline-roadmap hr {
9755 border-top: 1px solid #ccccce;
9756 margin: 0;
9757 top: 19px;
9758 position: relative;
9759 opacity: 1;
9760 transform: scaleX(0);
9761 transform-origin: left;
9762 transition: transform 2s linear;
9763 }
9764 .timeline-roadmap .animate-reverse hr {
9765 transform-origin: right;
9766 }
9767
9768 .keyword-tag {
9769 display: flex;
9770 gap: 10px;
9771 flex-wrap: wrap;
9772 margin-bottom: 30px;
9773 }
9774 .keyword-tag a {
9775 display: inline-block;
9776 color: #17161a;
9777 padding: 1px 10px;
9778 background-color: #fff;
9779 box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.0509803922);
9780 color: #17161a;
9781 border-radius: 3px;
9782 }
9783 .keyword-tag a:hover {
9784 background-color: #d92c0a;
9785 color: #fff;
9786 box-shadow: none;
9787 }
9788
9789 .scroll-down-one {
9790 display: inline-block;
9791 }
9792 .scroll-down-one .circle {
9793 height: 25px;
9794 width: 18px;
9795 border-radius: 9px;
9796 position: relative;
9797 border: 1px solid #fff;
9798 box-sizing: border-box;
9799 }
9800 .scroll-down-one .circle::after {
9801 content: "";
9802 position: absolute;
9803 top: 50%;
9804 left: 50%;
9805 transform: translate(-50%, -50%);
9806 height: 6px;
9807 width: 1px;
9808 background-color: #fff;
9809 }
9810 .scroll-down-one .arrow-cont {
9811 cursor: pointer;
9812 position: relative;
9813 display: inline-block;
9814 height: 20px;
9815 width: 20px;
9816 }
9817 .scroll-down-one .arrow-cont i {
9818 position: absolute;
9819 bottom: 0;
9820 background-size: contain;
9821 top: 2px;
9822 left: 0%;
9823 font-size: 17px;
9824 color: #fff;
9825 }
9826 .scroll-down-one .arrow-cont i:nth-child(2) {
9827 margin-top: 5.5px;
9828 }
9829 .scroll-down-one .arrow-cont i:nth-child(3) {
9830 margin-top: 11.5px;
9831 }
9832 .scroll-down-one:hover i {
9833 animation-name: bounceAlphaUpper;
9834 animation-duration: 1.4s;
9835 animation-iteration-count: infinite;
9836 animation-timing-function: linear;
9837 }
9838 .scroll-down-one:hover i:nth-child(1) {
9839 animation-delay: 0.4s;
9840 }
9841 .scroll-down-one:hover i:nth-child(2) {
9842 animation-delay: 0.2s;
9843 }
9844
9845 .banner-content-typing h1 {
9846 font-family: "Playfair Display", serif;
9847 font-size: 68px;
9848 color: #e6e6e6;
9849 letter-spacing: 0;
9850 font-weight: 700;
9851 }
9852 .banner-content-typing p {
9853 color: #b9b9ba;
9854 font-size: 36px;
9855 font-weight: 500;
9856 margin-top: 15px;
9857 font-family: "IBM Plex Sans", sans-serif;
9858 }
9859 .banner-content-typing .allfolio-btn-group {
9860 margin-top: 65px;
9861 }
9862 .banner-content-typing .allfolio-btn-group .theme-btn {
9863 font-family: "IBM Plex Sans", sans-serif;
9864 font-weight: 600;
9865 font-size: 18px;
9866 letter-spacing: 0.01em;
9867 text-transform: capitalize;
9868 }
9869 .banner-content-typing .allfolio-btn-group .theme-btn + .theme-btn {
9870 margin-left: 20px;
9871 }
9872
9873 .single-headline {
9874 position: relative;
9875 display: inline-block;
9876 vertical-align: top;
9877 font-size: 68px;
9878 line-height: 1.2;
9879 font-family: "Playfair Display", serif;
9880 font-weight: 700;
9881 text-transform: capitalize;
9882 margin-bottom: 0;
9883 }
9884 .single-headline:after {
9885 position: absolute;
9886 content: "";
9887 width: 2px;
9888 height: 100%;
9889 top: 0;
9890 right: 0;
9891 background: #fff;
9892 }
9893 .single-headline span {
9894 opacity: 0;
9895 display: inline-block;
9896 position: absolute;
9897 white-space: nowrap;
9898 left: 0;
9899 top: 0;
9900 font-style: normal;
9901 }
9902 .single-headline span b {
9903 color: #e86a42;
9904 }
9905 .single-headline span.is-visible {
9906 position: relative;
9907 opacity: 1;
9908 visibility: visible;
9909 }
9910
9911 @media (max-width: 1300px) {
9912 .banner-content-typing h1,
9913 .banner-content-typing .single-headline {
9914 font-size: 50px;
9915 line-height: 1.2;
9916 }
9917 }
9918 @media (max-width: 575px) {
9919 .banner-content-typing h1,
9920 .banner-content-typing .single-headline {
9921 font-size: 45px;
9922 line-height: 50px;
9923 }
9924 }
9925 /*======== video popup 1 ========*/
9926 .video-icon {
9927 width: 120px;
9928 height: 120px;
9929 line-height: 120px;
9930 color: #fff;
9931 font-size: 35px;
9932 background: #00bf58;
9933 display: inline-flex;
9934 align-items: center;
9935 justify-content: center;
9936 z-index: 1;
9937 }
9938 .video-icon:hover {
9939 text-decoration: none !important;
9940 }
9941
9942 /*======== video popup 1========*/
9943 @keyframes pulse-white {
9944 0% {
9945 box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
9946 }
9947 70% {
9948 box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
9949 }
9950 100% {
9951 box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
9952 }
9953 }
9954 @keyframes pulse-red {
9955 0% {
9956 box-shadow: 0 0 0 0 rgb(217, 44, 10);
9957 }
9958 80% {
9959 box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
9960 }
9961 100% {
9962 box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
9963 }
9964 }
9965 /*======== video popup 1(with wave) ========*/
9966 .wave a::before {
9967 animation: pulse-red 2s infinite;
9968 width: 110px;
9969 height: 110px;
9970 }
9971 .wave a {
9972 width: 90px;
9973 transition: 0.3s ease-out;
9974 }
9975 .wave a::before {
9976 content: "";
9977 width: 110px;
9978 height: 110px;
9979 top: -10px;
9980 left: -10px;
9981 position: absolute;
9982 border-radius: 50%;
9983 }
9984
9985 /*======== video popup 1(with hover wave) ========*/
9986 .hover_wave a {
9987 width: 90px;
9988 height: 90px;
9989 line-height: 90px;
9990 border-radius: 50%;
9991 color: #d92c0a;
9992 background: #fff;
9993 display: block;
9994 text-align: center;
9995 font-size: 40px;
9996 padding-top: 5px;
9997 transition: 0.3s ease-out;
9998 }
9999 .hover_wave a::before {
10000 content: "";
10001 width: 110px;
10002 height: 110px;
10003 top: -10px;
10004 left: -10px;
10005 position: absolute;
10006 border-radius: 50%;
10007 }
10008 .hover_wave a:hover::before {
10009 animation: pulse-white 2s infinite;
10010 }
10011
10012 /*======== video popup 2========*/
10013 .play-button2 .video2-icon {
10014 display: flex;
10015 justify-content: center;
10016 align-items: center;
10017 background: #fff;
10018 color: #d92c0a;
10019 width: 50px;
10020 height: 50px;
10021 font-size: 25px;
10022 z-index: 1;
10023 position: relative;
10024 border-radius: 50%;
10025 transition: 0.3s ease-out;
10026 text-decoration: none !important;
10027 }
10028 @media screen and (min-width: 768px) {
10029 .play-button2 .video2-icon {
10030 width: 78px;
10031 height: 78px;
10032 }
10033 }
10034 .play-button2 .video2-icon::before {
10035 content: "";
10036 position: absolute;
10037 border-radius: 50%;
10038 background: rgba(255, 255, 255, 0.3);
10039 z-index: -1;
10040 top: -15px;
10041 left: -15px;
10042 width: calc(100% + 30px);
10043 height: calc(100% + 30px);
10044 animation: pulse-white 2s infinite;
10045 }
10046 @media screen and (min-width: 768px) {
10047 .play-button2 .video2-icon::before {
10048 width: calc(100% + 28px);
10049 height: calc(100% + 28px);
10050 }
10051 }
10052 .play-button2 .video2-icon::after {
10053 content: "";
10054 position: absolute;
10055 border-radius: 50%;
10056 background: rgba(255, 255, 255, 0.3);
10057 z-index: -1;
10058 top: -30px;
10059 left: -30px;
10060 width: calc(100% + 60px);
10061 height: calc(100% + 60px);
10062 animation: pulse-white 2s infinite;
10063 animation-delay: 1.3s;
10064 }
10065 @media screen and (min-width: 768px) {
10066 .play-button2 .video2-icon::after {
10067 width: calc(100% + 58px);
10068 height: calc(100% + 58px);
10069 }
10070 }
10071
10072 /*======== video popup 3========*/
10073 .btn-circle {
10074 width: 180px;
10075 height: 180px;
10076 border-radius: 50%;
10077 display: flex;
10078 justify-content: center;
10079 align-items: center;
10080 position: absolute;
10081 cursor: pointer;
10082 }
10083 .btn-circle .text {
10084 position: absolute;
10085 height: 100%;
10086 margin-top: 0;
10087 animation: rotate 8s linear infinite;
10088 color: #B9B9BA;
10089 }
10090 .btn-circle .text p {
10091 font-size: 30px;
10092 text-transform: uppercase;
10093 margin-top: -20px;
10094 margin-left: 0;
10095 }
10096 .btn-circle .text p span {
10097 position: absolute;
10098 left: 50%;
10099 font-size: 0.8em;
10100 transform-origin: 0 12vmin;
10101 }
10102 .btn-circle .youtube_logo {
10103 color: #B9B9BA;
10104 }
10105 .btn-circle .youtube_logo:focus {
10106 color: #fff;
10107 }
10108
10109 .youtube_logo {
10110 position: absolute;
10111 width: 230px;
10112 height: 230px;
10113 background: linear-gradient(143deg, rgba(86, 86, 86, 0.25) 0%, rgba(212, 212, 212, 0) 100%);
10114 border: 1px solid rgba(232, 230, 230, 0.11);
10115 color: #B9B9BA;
10116 border-radius: 50%;
10117 filter: contrast(1.5);
10118 transition: all 0.3s;
10119 font-size: 30px;
10120 display: flex;
10121 align-items: center;
10122 justify-content: center;
10123 z-index: 0;
10124 animation: none;
10125 }
10126
10127 @keyframes rotate {
10128 from {
10129 transform: rotate(360deg);
10130 -webkit-filter: blur(0.2px);
10131 }
10132 to {
10133 transform: rotate(0);
10134 -webkit-filter: blur(0);
10135 }
10136 }
10137 svg.radial-progress {
10138 height: auto;
10139 padding: 0.5em;
10140 transform: rotate(-90deg);
10141 }
10142
10143 svg.radial-progress circle {
10144 fill: transparent;
10145 stroke-dashoffset: 219.9114857513;
10146 stroke-width: 6px;
10147 }
10148
10149 svg.radial-progress circle.complete {
10150 stroke-dasharray: 219.9114857513;
10151 }
10152
10153 svg.radial-progress text {
10154 font-size: 16px;
10155 font-weight: 500;
10156 text-anchor: middle;
10157 }
10158
10159 svg .complete {
10160 stroke: #D31E1E;
10161 stroke-linecap: round;
10162 }
10163
10164 svg .incomplete {
10165 stroke: rgba(213, 166, 166, 0.431372549);
10166 }
10167
10168 .skill_item_two .radial-progress {
10169 background: linear-gradient(rgb(79, 248, 186) 0%, rgb(0, 204, 255) 100%);
10170 border-radius: 50%;
10171 }
10172 .skill_item_two .radial-progress circle {
10173 stroke-width: 4px;
10174 }
10175 .skill_item_two .radial-progress circle.incomplete {
10176 stroke: rgba(255, 255, 255, 0.5);
10177 }
10178 .skill_item_two .radial-progress circle.complete {
10179 stroke: #fff;
10180 }
10181 .skill_item_two .skill_pr {
10182 position: relative;
10183 }
10184 .skill_item_two .skill_pr .counter2-wrap {
10185 display: flex;
10186 align-items: center;
10187 justify-content: center;
10188 color: #fff;
10189 font-size: 28px;
10190 top: 50%;
10191 left: 0;
10192 width: 100%;
10193 position: absolute;
10194 transform: translateY(-50%);
10195 }
10196
10197 .counters-container {
10198 text-align: center;
10199 }
10200 .counters-container .skill_item {
10201 position: relative;
10202 }
10203 .counters-container .skill_item .counter-wrap {
10204 display: flex;
10205 align-items: center;
10206 justify-content: center;
10207 color: #000000;
10208 font-size: 18px;
10209 top: 50%;
10210 width: 100%;
10211 position: absolute;
10212 transform: translateY(-50%);
10213 }
10214 .counters-container h6 {
10215 margin: 0;
10216 }
10217
10218 .instagram-area {
10219 transform: translateY(-50%);
10220 position: relative;
10221 z-index: 1;
10222 }
10223
10224 .instagram-feed-item {
10225 position: relative;
10226 z-index: 1;
10227 height: 196px;
10228 }
10229 .instagram-feed-item img {
10230 width: 100%;
10231 height: 100%;
10232 object-fit: cover;
10233 }
10234 .instagram-feed-item .icon-link {
10235 inset: 0;
10236 position: absolute;
10237 width: 100%;
10238 height: 100%;
10239 font-size: 35px;
10240 color: #fff;
10241 background: rgba(0, 0, 0, 0.4);
10242 display: flex;
10243 align-items: center;
10244 justify-content: center;
10245 opacity: 0;
10246 visibility: hidden;
10247 }
10248
10249 .instagram-wrapper {
10250 position: relative;
10251 }
10252 .instagram-wrapper :is(.swiper-button-prev, .swiper-button-next) {
10253 opacity: 0;
10254 visibility: hidden;
10255 width: 36px;
10256 height: 36px;
10257 line-height: 36px;
10258 text-align: center;
10259 border-radius: 50%;
10260 background: #fff;
10261 -webkit-transition: 0.3s ease-out;
10262 transition: 0.3s ease-out;
10263 }
10264 .instagram-wrapper :is(.swiper-button-prev, .swiper-button-next)::after {
10265 font-size: 12px;
10266 color: #838586;
10267 -webkit-transition: 0.3s ease-out;
10268 transition: 0.3s ease-out;
10269 font-family: "Font Awesome 5 Free";
10270 font-weight: 900;
10271 display: block;
10272 width: 36px;
10273 height: 36px;
10274 line-height: 36px;
10275 text-align: center;
10276 border-radius: 50%;
10277 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 4px 8px 0 rgba(0, 0, 0, 0.2);
10278 }
10279
10280 .banner-area-2 {
10281 position: relative;
10282 z-index: 1;
10283 background-image: url(../img/home_two/banner-bg.png);
10284 background-size: cover;
10285 background-position: center;
10286 }
10287 .banner-area-2 .banner-shapes img {
10288 position: absolute;
10289 bottom: 0;
10290 left: 0;
10291 z-index: -1;
10292 }
10293 .banner-area-2 .banner-shapes img:nth-child(2) {
10294 right: 0;
10295 }
10296 .banner-area-2 .banner-content p {
10297 font-size: 18px;
10298 font-weight: 400;
10299 line-height: 36px;
10300 color: #fff;
10301 }
10302 .banner-area-2 .banner-img {
10303 display: inline-block;
10304 position: relative;
10305 }
10306 .banner-area-2 .banner-img .shape img {
10307 max-width: inherit;
10308 }
10309 .banner-area-2 .banner-img .shape + .shape {
10310 position: absolute;
10311 }
10312 .banner-area-2 .banner-img .shape:nth-child(2) {
10313 left: 77px;
10314 top: -134px;
10315 }
10316 .banner-area-2 .banner-img .shape:nth-child(3) {
10317 right: -15px;
10318 top: 56px;
10319 z-index: -1;
10320 }
10321 .banner-area-2 .banner-img .shape:nth-child(4) {
10322 right: 0;
10323 bottom: -130px;
10324 }
10325 .banner-area-2 .banner-img .shape:nth-child(5) {
10326 top: -110px;
10327 left: 25px;
10328 }
10329 .banner-area-2 .banner-img .shape:nth-child(6) {
10330 top: -130px;
10331 left: -100px;
10332 background-color: #fff;
10333 height: 24px;
10334 width: 24px;
10335 }
10336 .banner-area-2 .banner-img .shape:nth-child(7) {
10337 height: 28px;
10338 width: 28px;
10339 background-color: #fff;
10340 top: 0;
10341 left: -65px;
10342 }
10343 .banner-area-2 .banner-img .shape:nth-child(8) {
10344 top: -127px;
10345 left: 115px;
10346 height: 12px;
10347 background-color: #fff;
10348 width: 12px;
10349 }
10350 .banner-area-2 .banner-img .shape:nth-child(9) {
10351 top: -25px;
10352 right: 40px;
10353 height: 10px;
10354 background-color: #ffb4a5;
10355 width: 10px;
10356 }
10357 .banner-area-2 .banner-img .shape:nth-child(10) {
10358 top: -50px;
10359 left: -165px;
10360 height: 17px;
10361 background-color: #ffb4a5;
10362 width: 17px;
10363 }
10364 .banner-area-2 .banner-img .shape:nth-child(11) {
10365 top: -100px;
10366 right: -25px;
10367 height: 30px;
10368 background-color: #fff;
10369 width: 30px;
10370 }
10371 .banner-area-2 .banner-img .shape:nth-child(12) {
10372 top: -25px;
10373 right: -45px;
10374 height: 15px;
10375 background-color: #ffb4a5;
10376 width: 15px;
10377 }
10378 .banner-area-2 .banner-img .shape:nth-child(13) {
10379 border-radius: 50%;
10380 bottom: -35px;
10381 right: 110px;
10382 height: 25px;
10383 background-color: #fff;
10384 width: 25px;
10385 }
10386 .banner-area-2 .banner-img .shape:nth-child(14) {
10387 border-radius: 50%;
10388 bottom: -65px;
10389 right: 85px;
10390 height: 19px;
10391 background-color: #ffb4a5;
10392 width: 19px;
10393 }
10394
10395 .banner-area-6 {
10396 position: relative;
10397 z-index: 1;
10398 background: rgba(24, 9, 48, 0.2);
10399 }
10400 .banner-area-6 .swiper-slide {
10401 height: 100vh;
10402 display: flex;
10403 align-items: center;
10404 justify-content: center;
10405 position: relative;
10406 z-index: 1;
10407 }
10408 .banner-area-6 .banner-thumbnails {
10409 width: 600px;
10410 height: 70px;
10411 }
10412 .banner-area-6 .banner-thumbnails .swiper-slide {
10413 height: 70px;
10414 transform: translateY(17px);
10415 }
10416
10417 .theme-btn {
10418 font-size: 16px;
10419 font-weight: 500;
10420 color: #fff;
10421 font-family: IBM Plex Sans;
10422 border-radius: 5px;
10423 background: #4c4cf1;
10424 display: inline-block;
10425 padding: 10px 25px;
10426 text-transform: uppercase;
10427 text-decoration: none;
10428 transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.18s ease-in-out;
10429 border: 1px solid rgba(249, 249, 249, 0.2588235294);
10430 margin-top: 20px;
10431 }
10432 .theme-btn:hover {
10433 background-color: #eb3a17;
10434 border-color: #eb3a17;
10435 color: #fff;
10436 }
10437 .theme-btn:hover i:not(.left-icon) {
10438 transform: translateX(4px);
10439 }
10440 .theme-btn.btn-small {
10441 padding: 6px 20px;
10442 }
10443 .theme-btn.btn-small-two {
10444 padding: 5px 10px;
10445 }
10446 .theme-btn.btn-big {
10447 padding: 12.5px 30px;
10448 }
10449 .theme-btn.btn-big-two {
10450 padding: 20px 25px;
10451 }
10452 .theme-btn.theme-btn-outline {
10453 border-color: #ebebeb;
10454 border-radius: 5px;
10455 background-color: transparent;
10456 color: #17161a;
10457 }
10458 .theme-btn.theme-btn-outline.btn-outline-black {
10459 border-color: #bbc0c4;
10460 }
10461 .theme-btn.theme-btn-outline:hover {
10462 background-color: #242729;
10463 color: #fff;
10464 }
10465 .theme-btn.theme-btn-outline-white {
10466 border-color: rgba(249, 249, 249, 0.26);
10467 border-radius: 5px;
10468 background-color: transparent;
10469 color: #fff;
10470 }
10471 .theme-btn.theme-btn-outline-white:hover {
10472 background-color: #fff;
10473 color: #17161A;
10474 border-color: #fff;
10475 text-decoration: none;
10476 }
10477 .theme-btn i {
10478 font-size: 16px;
10479 transition: all 0.3s ease;
10480 display: inline-block;
10481 vertical-align: middle;
10482 padding-left: 5px;
10483 }
10484 .theme-btn.theme-btn-alt {
10485 background-color: #fff;
10486 color: rgba(249, 249, 249, 0.26);
10487 border-color: #fff;
10488 }
10489 .theme-btn.theme-btn-alt:hover {
10490 background-color: rgba(249, 249, 249, 0.26);
10491 color: #fff;
10492 border-color: rgba(249, 249, 249, 0.26);
10493 }
10494
10495 .banner-area-6 .banner-main .swiper-slide::before {
10496 content: "";
10497 inset: 0;
10498 position: absolute;
10499 background: rgba(0, 0, 0, 0.4);
10500 z-index: -1;
10501 }
10502
10503 .banner-area-2 .banner-content p {
10504 font-size: 20px;
10505 font-weight: 400;
10506 line-height: 36px;
10507 color: #fff;
10508 font-family: IBM Plex Sans;
10509 margin-top: 70px;
10510 }
10511
10512 .banner-content h1 {
10513 font-size: 90px;
10514 line-height: 1.2;
10515 padding: 10px 30px;
10516 font-family: Playfair Display;
10517 font-weight: 700;
10518 letter-spacing: 1px;
10519 color: #fff;
10520 }
10521 .banner-content .text-stroke {
10522 color: black;
10523 -webkit-text-stroke: 1px #fff;
10524 -webkit-text-fill-color: transparent;
10525 }
10526
10527 .icon_box {
10528 transition: 0.3s;
10529 background-color: #fff;
10530 border: 1px solid #F0E9FC;
10531 border-radius: 6px;
10532 overflow: hidden;
10533 }
10534 .icon_box:hover {
10535 background-color: #7460FF;
10536 border-color: transparent;
10537 }
10538 .icon_box:hover .box_icon .box_main_icon {
10539 color: #fff;
10540 }
10541 .icon_box:hover .box_title {
10542 color: #fff;
10543 }
10544 .icon_box:hover .icon_box_description {
10545 color: #fff;
10546 }
10547 .icon_box:hover .icon_box_button .button_items {
10548 color: #fff;
10549 }
10550 .icon_box .box_bg_shape {
10551 display: flex;
10552 transition: 0.3s;
10553 background-repeat: no-repeat;
10554 padding: 20px 20px 20px 55px;
10555 }
10556 .icon_box .full_box_link {
10557 text-decoration: none;
10558 }
10559 .icon_box .full_box_link:hover {
10560 text-decoration: none;
10561 }
10562 .icon_box .box_title {
10563 font-weight: 500;
10564 line-height: 28px;
10565 color: #00000E;
10566 transition: 0.3s;
10567 margin: 0;
10568 }
10569 .icon_box .icon_box_description {
10570 font-size: 14px;
10571 font-weight: 400;
10572 line-height: 28px;
10573 color: #6A737C;
10574 transition: 0.3s;
10575 margin: 0;
10576 padding: 0;
10577 }
10578 .icon_box .box_icon {
10579 line-height: normal;
10580 height: 100%;
10581 }
10582 .icon_box .box_icon .box_main_icon {
10583 font-size: 50px;
10584 transition: 0.3s;
10585 color: #69727d;
10586 }
10587 .icon_box .box_icon .box_main_icon svg path {
10588 transition: 0.3s;
10589 }
10590 .icon_box .box_button {
10591 transition: 0.3s;
10592 line-height: 18px;
10593 }
10594 .icon_box .icon_box_button .button_items {
10595 display: flex;
10596 align-items: center;
10597 gap: 3px;
10598 color: #E9336B;
10599 font-size: 14px;
10600 font-weight: 500;
10601 line-height: 28px;
10602 text-decoration: none;
10603 }
10604 .icon_box .icon_box_button .button_items:hover {
10605 text-decoration: none;
10606 }
10607 .icon_box .icon_box_button .button_items .box_button {
10608 transition: 0.3s;
10609 }
10610 .icon_box .icon_box_button .button_items i {
10611 transition: 0.3s;
10612 }
10613
10614 .icon_box_two {
10615 border-radius: 8px;
10616 transition: 0.3s;
10617 overflow: hidden;
10618 box-shadow: 0 1.6px 3.6px 0 rgba(51, 77, 114, 0.2078431373);
10619 }
10620 .icon_box_two:hover {
10621 background-color: #9A6FFF;
10622 box-shadow: 0 20px 45px 0 rgba(51, 77, 114, 0.1450980392);
10623 }
10624 .icon_box_two:hover .box_main_icon {
10625 background: rgba(255, 255, 255, 0.1254901961);
10626 color: #fff;
10627 }
10628 .icon_box_two:hover .box_two_title {
10629 color: #fff;
10630 }
10631 .icon_box_two .box2_bg_shape {
10632 padding: 32px;
10633 transition: 0.3s;
10634 background-repeat: no-repeat;
10635 }
10636 .icon_box_two .box2_bg_shape svg path {
10637 transition: 0.3s;
10638 }
10639 .icon_box_two .box2_url {
10640 display: block;
10641 text-decoration: none !important;
10642 }
10643 .icon_box_two .box_main_icon {
10644 display: inline-flex;
10645 padding: 14px 12px;
10646 background: #F0E9FC;
10647 border-radius: 100px;
10648 color: #cf7272;
10649 font-size: 45px;
10650 transition: 0.3s;
10651 }
10652 .icon_box_two .box_pro_icon {
10653 color: #FAA629;
10654 position: absolute;
10655 top: 25px;
10656 right: 25px;
10657 }
10658 .icon_box_two .box_two_title {
10659 transition: 0.3s;
10660 margin: 0;
10661 }
10662
10663 .pricing-area.section-padding {
10664 padding-top: 6.25rem;
10665 padding-bottom: 0;
10666 }
10667 @media screen and (min-width: 768px) {
10668 .pricing-area.section-padding {
10669 padding-top: 7.8125rem;
10670 padding-bottom: 4.375rem;
10671 }
10672 }
10673 .pricing-area.section-padding-2 {
10674 padding: 5rem 0 4.6875rem;
10675 }
10676 @media screen and (min-width: 576px) {
10677 .pricing-area.section-padding-2 {
10678 padding: 7.5rem 0 7.1875rem;
10679 }
10680 }
10681 @media screen and (min-width: 992px) {
10682 .pricing-area.section-padding-2 {
10683 padding: 8.75rem 0 8.4375rem;
10684 }
10685 }
10686 .pricing-area .section-title-center {
10687 padding-bottom: 4.0625rem;
10688 }
10689 @media screen and (min-width: 992px) {
10690 .pricing-area .section-title-center h2 {
10691 font-size: 2.5rem;
10692 line-height: 1.2;
10693 max-width: 52%;
10694 margin-left: auto;
10695 margin-right: auto;
10696 }
10697 }
10698 .pricing-area .tex {
10699 font-size: 1.125rem;
10700 color: #5d5d66;
10701 margin-top: 3.75rem;
10702 }
10703 .pricing-area .nav-item {
10704 width: 100%;
10705 }
10706 @media screen and (min-width: 576px) {
10707 .pricing-area .nav-item {
10708 width: auto;
10709 }
10710 }
10711 .pricing-area .nav-item .nav-link {
10712 width: 100%;
10713 }
10714 @media screen and (min-width: 576px) {
10715 .pricing-area .nav-item .nav-link {
10716 width: auto;
10717 }
10718 }
10719
10720 .pricing-area-two {
10721 position: relative;
10722 }
10723 .pricing-area-two .section-title-center {
10724 padding-bottom: 50px;
10725 }
10726 .pricing-area-two .section-title-center p {
10727 font-size: 20px;
10728 line-height: 1.6;
10729 padding-top: 15px;
10730 width: 100%;
10731 }
10732 @media screen and (min-width: 992px) {
10733 .pricing-area-two .section-title-center p {
10734 width: 50%;
10735 }
10736 }
10737 @media screen and (min-width: 992px) {
10738 .pricing-area-two .ps-28 {
10739 padding-left: 28px;
10740 }
10741 .pricing-area-two .pe-28 {
10742 padding-right: 28px;
10743 }
10744 }
10745 .pricing-area-two .tab-pane {
10746 padding-top: 80px;
10747 }
10748
10749 .pricing-currency {
10750 border: 1px solid #a0a1a3;
10751 font-size: 1rem;
10752 text-transform: uppercase;
10753 color: #6d6d6d;
10754 border-radius: 0.625rem;
10755 float: right;
10756 padding: 15px;
10757 position: relative;
10758 width: auto;
10759 }
10760 .pricing-currency:focus {
10761 border: 1px solid #a0a1a3;
10762 }
10763 .pricing-currency .icon {
10764 width: 15px;
10765 height: 100%;
10766 background: red;
10767 }
10768
10769 .pricing-tabs {
10770 border: none;
10771 padding: 0.625rem;
10772 border-radius: 0.625rem;
10773 background: #f9f9f9;
10774 display: inline-flex;
10775 }
10776 .pricing-tabs .nav-link {
10777 padding: 0.3125rem 1.125rem;
10778 border-radius: 0.375rem;
10779 font-size: 1rem;
10780 color: #6d6d6d;
10781 border-color: transparent;
10782 background: transparent;
10783 line-height: 25px;
10784 }
10785 .pricing-tabs .nav-link.active {
10786 border-color: transparent;
10787 background-color: #ec595a !important;
10788 color: #fff;
10789 font-weight: 600;
10790 }
10791 .pricing-tabs .nav-link:hover {
10792 border-color: transparent;
10793 color: unset;
10794 }
10795
10796 .pricing-tabs-two {
10797 display: inline-flex;
10798 border-radius: 18px;
10799 overflow: hidden;
10800 border: 1px solid #676099;
10801 }
10802 .pricing-tabs-two li {
10803 display: inline-block;
10804 }
10805 .pricing-tabs-two li:first-child .nav-link {
10806 padding-left: 40px;
10807 }
10808 .pricing-tabs-two li:first-child .nav-link::before {
10809 transform-origin: right;
10810 border-top-right-radius: 0;
10811 border-bottom-right-radius: 0;
10812 border-top-left-radius: 18px;
10813 border-bottom-left-radius: 18px;
10814 }
10815 .pricing-tabs-two li:last-child .nav-link {
10816 padding-right: 40px;
10817 }
10818 .pricing-tabs-two li .nav-link {
10819 padding: 10px 29px;
10820 font-family: "Inter", sans-serif;
10821 font-size: 16px;
10822 font-weight: 400;
10823 line-height: 16px;
10824 color: #4f4f4f;
10825 border: none;
10826 border-radius: 0;
10827 position: relative;
10828 z-index: 1;
10829 }
10830 .pricing-tabs-two li .nav-link::before {
10831 content: "";
10832 position: absolute;
10833 left: 0;
10834 top: 0;
10835 height: 100%;
10836 width: 100%;
10837 transform: scaleX(0);
10838 transform-origin: left;
10839 background-color: transparent;
10840 z-index: -1;
10841 transition: all 0.2s linear;
10842 border-top-right-radius: 18px;
10843 border-bottom-right-radius: 18px;
10844 }
10845 .pricing-tabs-two li .nav-link.active {
10846 font-weight: 600;
10847 color: #ffffff;
10848 border-radius: 0;
10849 background-color: transparent;
10850 }
10851 .pricing-tabs-two li .nav-link.active::before {
10852 background-color: #473d8d;
10853 transform: scaleX(1);
10854 }
10855
10856 .pricing-tabs-content {
10857 display: block;
10858 }
10859 .pricing-tabs-content .tab-pane {
10860 position: relative;
10861 }
10862 .pricing-tabs-content .tab-pane .popular {
10863 top: -40px;
10864 right: 35%;
10865 position: absolute;
10866 }
10867 @media screen and (min-width: 992px) {
10868 .pricing-tabs-content .tab-pane {
10869 padding-top: 0.25rem;
10870 }
10871 }
10872
10873 .pricing-item {
10874 background: #fafafa;
10875 border-radius: 1.25rem;
10876 padding: 3.75rem 1.375rem 2.5rem;
10877 margin-top: 1.875rem;
10878 position: relative;
10879 border: 2px solid transparent;
10880 text-align: center;
10881 transition: 0.3s ease-out;
10882 }
10883 .pricing-item p {
10884 margin: 0;
10885 font-size: 17px;
10886 }
10887
10888 .pricing-item:hover {
10889 background: rgba(255, 227, 218, 0.5);
10890 border-color: #171717;
10891 }
10892
10893 @media screen and (min-width: 576px) {
10894 .pricing-item {
10895 text-align: left;
10896 }
10897 }
10898 @media screen and (min-width: 992px) {
10899 .pricing-item {
10900 text-align: center;
10901 }
10902 }
10903 @media screen and (min-width: 1200px) {
10904 .pricing-item {
10905 text-align: left;
10906 }
10907 }
10908 .pricing-item .badge {
10909 top: -2px;
10910 right: 0;
10911 left: 0;
10912 position: absolute;
10913 width: 7.8125rem;
10914 margin: 0 auto;
10915 border-radius: 0;
10916 border-bottom-left-radius: 0.625rem;
10917 border-bottom-right-radius: 0.625rem;
10918 padding: 8px 25px;
10919 background: #ec595a;
10920 color: #fff;
10921 font-size: 1rem;
10922 font-weight: 600;
10923 line-height: 1;
10924 height: 30px;
10925 text-align: center;
10926 }
10927 .pricing-item .pricing-title {
10928 margin: 0;
10929 font-size: 1.625rem;
10930 font-weight: 500;
10931 }
10932 .pricing-item .price {
10933 font-size: 1.875rem;
10934 color: #ec595a;
10935 margin-top: 0.9375rem;
10936 }
10937 .pricing-item .price .dollar {
10938 display: inline-block;
10939 }
10940 .pricing-item .price .euro {
10941 display: none;
10942 }
10943 .pricing-item .price sup {
10944 font-size: 0.875rem;
10945 color: #171717;
10946 font-weight: 400;
10947 }
10948 .pricing-item .pricing-item-user {
10949 font-size: 0.875rem;
10950 display: block;
10951 margin-top: 0.625rem;
10952 }
10953 .pricing-item .pricing-btn {
10954 display: inline-block;
10955 border: 2px solid #ec595a;
10956 background: #ffe3da;
10957 color: #ec595a;
10958 border-radius: 0.375rem;
10959 text-decoration: none;
10960 font-size: 1.125rem;
10961 font-weight: 500;
10962 padding: 0.8125rem 1.875rem;
10963 margin-top: 2.1875rem;
10964 transition: 0.3s ease-out;
10965 margin-bottom: 20px;
10966 }
10967 .pricing-item .pricing-btn:hover {
10968 background: #ec595a;
10969 color: #fff;
10970 border-color: #2c2c2c;
10971 text-decoration: none;
10972 }
10973 .pricing-item ul {
10974 padding-top: 20px;
10975 list-style: none;
10976 padding-left: 0;
10977 }
10978 .pricing-item ul li {
10979 font-size: 0.9375rem;
10980 padding-top: 15px;
10981 font-weight: 500;
10982 }
10983 .pricing-item ul li.text-gray-100 {
10984 color: #999;
10985 }
10986 .pricing-item.active {
10987 background: rgba(255, 227, 218, 0.5);
10988 border-color: #171717;
10989 }
10990 .pricing-item.active .pricing-item-user {
10991 color: #ec595a;
10992 }
10993 .pricing-item.active .pricing-btn {
10994 background: #ec595a;
10995 color: #fff;
10996 border: 2px solid #2c2c2c;
10997 }
10998 .pricing-item.bg-yellow-200 {
10999 background: #fff7dd;
11000 }
11001
11002 .tab-content .fade {
11003 transition: opacity 0.15s linear;
11004 opacity: 1;
11005 }
11006
11007 .current-price {
11008 font-weight: 700;
11009 font-size: 28px;
11010 line-height: 44px;
11011 display: inline-block;
11012 vertical-align: middle;
11013 }
11014
11015 .saving-price {
11016 background-color: #fff;
11017 border-radius: 1px;
11018 color: #171717;
11019 display: inline-block;
11020 font-size: 14px;
11021 line-height: 14px;
11022 padding: 6px 8px;
11023 }
11024
11025 .price-format {
11026 font-family: "Inter", sans-serif;
11027 font-size: 12px;
11028 line-height: 12px;
11029 margin-bottom: 25px;
11030 }
11031
11032 .subscribe-btn {
11033 border-radius: 2px;
11034 display: inline-block;
11035 font-weight: 500;
11036 font-size: 20px;
11037 line-height: 20px;
11038 background-color: #ec595a;
11039 padding: 12px 24px;
11040 margin-bottom: 8px;
11041 transition: all 0.3s ease-in-out;
11042 }
11043 .subscribe-btn:hover {
11044 background-color: #171717;
11045 color: #ec595a;
11046 }
11047
11048 .price-note {
11049 font-family: "Inter", sans-serif;
11050 font-size: 14px;
11051 line-height: 22px;
11052 width: 60%;
11053 }
11054
11055 .pricing-compare-table > table {
11056 margin: 0;
11057 }
11058 .pricing-compare-table .table-bg {
11059 background: #2c3563;
11060 }
11061 .pricing-compare-table .table-bg2 {
11062 background: #202647;
11063 }
11064 .pricing-compare-table .table-title-bg {
11065 background: #252c53;
11066 }
11067 .pricing-compare-table .red-top {
11068 border-top: 1px solid #ec595a;
11069 }
11070 .pricing-compare-table .red-bottom {
11071 border-bottom: 1px solid #ec595a;
11072 }
11073 .pricing-compare-table .gray-bottom {
11074 border-bottom: 1px solid #c6c6c6;
11075 }
11076 .pricing-compare-table .plan-title {
11077 color: #fff;
11078 font-weight: 600;
11079 font-size: 20px;
11080 line-height: 32px;
11081 margin-bottom: 30px;
11082 }
11083 .pricing-compare-table .nav-tabs {
11084 border-bottom: none;
11085 justify-content: center;
11086 }
11087 .pricing-compare-table .nav-tabs .nav-link {
11088 border: 1px solid #c6c6c6;
11089 border-radius: 2px;
11090 color: #fff;
11091 font-weight: 700;
11092 font-size: 14px;
11093 line-height: 22px;
11094 padding: 4px 5px;
11095 margin: 0 5px;
11096 }
11097 .pricing-compare-table .nav-tabs .nav-link.active {
11098 color: #171717;
11099 }
11100 .pricing-compare-table .tab-pane {
11101 padding-top: 8px;
11102 }
11103 .pricing-compare-table .old-price {
11104 font-size: 14px;
11105 font-weight: 700;
11106 line-height: 22px;
11107 color: #c6c6c6;
11108 }
11109 .pricing-compare-table .current-price {
11110 font-size: 14px;
11111 line-height: 22px;
11112 margin: 10px 0;
11113 }
11114 .pricing-compare-table .current-price span {
11115 font-size: 18px;
11116 }
11117 .pricing-compare-table .price-format {
11118 margin-bottom: 10px;
11119 }
11120 .pricing-compare-table .saving-price {
11121 margin-bottom: 15px;
11122 }
11123 .pricing-compare-table .subscribe-btn {
11124 background-color: #fff;
11125 color: #171717;
11126 display: block;
11127 font-size: 16px;
11128 line-height: 26px;
11129 padding: 5px 24px;
11130 margin-bottom: 20px;
11131 }
11132 .pricing-compare-table .subscribe-btn:hover {
11133 background-color: #ec595a;
11134 color: #fff;
11135 }
11136 .pricing-compare-table .price-note {
11137 color: #c6c6c6;
11138 width: 100%;
11139 }
11140 .pricing-compare-table .feature-title {
11141 width: 45%;
11142 padding: 25px 0;
11143 box-shadow: -10px 5px 30px 0 #191e38;
11144 }
11145 .pricing-compare-table .feature {
11146 width: 25%;
11147 text-align: center;
11148 }
11149 .pricing-compare-table .feature .feature-text p {
11150 color: #fff;
11151 font-size: 14px;
11152 line-height: 20px;
11153 padding: 0 32px;
11154 }
11155 .pricing-compare-table .feature .feature-text i {
11156 color: #fff;
11157 font-size: 27px;
11158 }
11159 .pricing-compare-table .feature-btn {
11160 color: #fff;
11161 font-size: 20px;
11162 line-height: 30px;
11163 text-align: left;
11164 padding-left: 60px;
11165 position: relative;
11166 }
11167 .pricing-compare-table .feature-btn:before {
11168 content: "L";
11169 font-family: "ElegantIcons";
11170 font-weight: 400;
11171 position: absolute;
11172 left: 15px;
11173 }
11174 .pricing-compare-table .feature-btn.collapsed:before {
11175 content: "K";
11176 }
11177
11178 .pricing-compare-table .feature-title {
11179 padding: 15px 20px;
11180 background: #f7f7f7;
11181 color: #333;
11182 font-size: 24px;
11183 font-weight: 700;
11184 text-align: center;
11185 position: relative;
11186 box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
11187 }
11188 .pricing-compare-table .feature-row {
11189 display: flex;
11190 flex-direction: row;
11191 align-items: center;
11192 justify-content: center;
11193 border-bottom: 1px solid #eee;
11194 position: relative;
11195 }
11196 .pricing-compare-table .feature-row:last-of-type {
11197 border-bottom: none;
11198 }
11199 .pricing-compare-table .feature-row .feature-type {
11200 text-align: center;
11201 }
11202 .pricing-compare-table .feature-row .feature-type .section-text {
11203 color: #ec595a;
11204 text-align: center;
11205 font-weight: 600;
11206 font-size: 22px;
11207 line-height: 30px;
11208 letter-spacing: 0.5px;
11209 transform: rotate(180deg);
11210 writing-mode: tb-rl;
11211 }
11212 .pricing-compare-table .feature-row .feature-body {
11213 display: flex;
11214 flex-direction: row;
11215 align-items: center;
11216 justify-content: center;
11217 flex-wrap: wrap;
11218 width: 100%;
11219 }
11220 .pricing-compare-table .feature-row .feature-body p {
11221 color: #fff;
11222 font-size: 14px;
11223 line-height: 20px;
11224 padding: 12px 65px 0 60px;
11225 }
11226 .pricing-compare-table .feature-row .feature-body:last-of-type p {
11227 padding-bottom: 12px;
11228 }
11229 .pricing-compare-table .feature-row .feature-btn {
11230 position: absolute;
11231 right: 20px;
11232 top: 50%;
11233 transform: translateY(-50%);
11234 padding-left: 40px;
11235 }
11236 .pricing-compare-table .feature-row .feature-btn:before {
11237 content: "";
11238 position: absolute;
11239 left: -20px;
11240 top: 50%;
11241 transform: translateY(-50%);
11242 width: 10px;
11243 height: 10px;
11244 border-radius: 50%;
11245 background-color: #ec595a;
11246 }
11247 .pricing-compare-table.mobile .feature-title {
11248 width: 100%;
11249 padding: 5px 0;
11250 box-shadow: none;
11251 text-align: left;
11252 }
11253 .pricing-compare-table.mobile .sub-padding {
11254 padding: 20px 25px 15px;
11255 }
11256 .pricing-compare-table.mobile .product-plan {
11257 margin-bottom: 30px;
11258 }
11259 .pricing-compare-table.mobile .feature-body p {
11260 padding: 12px 0 0 20px;
11261 }
11262 .pricing-compare-table.mobile .feature-btn {
11263 padding-left: 20px;
11264 }
11265 .pricing-compare-table.mobile .feature-btn:before {
11266 left: 0;
11267 }
11268
11269 .ezd-tab-box {
11270 display: none;
11271 }
11272 .ezd-tab-box.active {
11273 display: block;
11274 }
11275
11276 @media (min-width: 768px) {
11277 .nav .nav-link {
11278 font-size: 1.375rem;
11279 padding: 0.625rem 1.875rem;
11280 font-family: "Poppins", sans-serif;
11281 font-weight: 500;
11282 }
11283 }
11284 .section-title-center {
11285 padding-bottom: 45px;
11286 text-align: center;
11287 }
11288 .section-title-center .title {
11289 margin: 0;
11290 font-size: 50px;
11291 font-family: "Poppins", sans-serif;
11292 color: #171717;
11293 font-weight: 700;
11294 line-height: 1.4;
11295 }
11296
11297 button {
11298 border: none;
11299 background: transparent;
11300 outline: none;
11301 cursor: pointer;
11302 }
11303
11304 .cloud-pricing-wrapp .nav .nav-link {
11305 font-family: "Inter", sans-serif;
11306 font-size: 17px;
11307 font-weight: 400;
11308 line-height: 28px;
11309 border: transparent;
11310 background-color: transparent;
11311 padding: 0;
11312 margin-right: 30px;
11313 margin-bottom: 40px;
11314 color: #848d95;
11315 }
11316 .cloud-pricing-wrapp .nav .nav-link.active {
11317 color: #171717;
11318 }
11319 .cloud-pricing-wrapp .nav .nav-link span {
11320 width: 12px;
11321 height: 12px;
11322 border: 1px solid #848d95;
11323 border-radius: 50%;
11324 display: inline-block;
11325 position: relative;
11326 margin-right: 5px;
11327 }
11328 .cloud-pricing-wrapp .nav .nav-link span:before {
11329 content: "";
11330 width: 0;
11331 height: 9px;
11332 border-radius: 50%;
11333 background-color: #ec595a;
11334 position: absolute;
11335 left: 50%;
11336 top: 50%;
11337 transform: translate(-50%, -50%);
11338 }
11339 .cloud-pricing-wrapp .nav .nav-link.active span:before {
11340 width: 9px;
11341 }
11342 .cloud-pricing-wrapp .tab-pane {
11343 padding-top: 0;
11344 }
11345 .cloud-pricing-wrapp-item {
11346 cursor: pointer;
11347 background-color: #fff;
11348 border-radius: 10px;
11349 display: flex;
11350 flex-wrap: wrap;
11351 align-items: center;
11352 padding: 30px 40px;
11353 margin-bottom: 15px;
11354 transition: all 0.3s linear;
11355 }
11356 .cloud-pricing-wrapp-item .plan {
11357 width: 25%;
11358 }
11359 .cloud-pricing-wrapp-item .label {
11360 font-size: 15px;
11361 line-height: 27px;
11362 color: #171717;
11363 margin-bottom: 0;
11364 font-family: "inter", sans-serif;
11365 font-family: 15px;
11366 }
11367 .cloud-pricing-wrapp-item .space {
11368 color: #171717;
11369 font-family: "Poppins", sans-serif;
11370 font-size: 22px;
11371 font-weight: 600;
11372 line-height: 30px;
11373 letter-spacing: 0.5px;
11374 }
11375 .cloud-pricing-wrapp-item .price {
11376 width: 25%;
11377 padding-left: 60px;
11378 }
11379 .cloud-pricing-wrapp-item .type {
11380 font-family: "inter", sans-serif;
11381 font-size: 17px;
11382 color: #171717;
11383 font-weight: 700;
11384 line-height: 30px;
11385 margin-bottom: 0;
11386 }
11387 .cloud-pricing-wrapp-item .btn-purchase {
11388 border-radius: 5px;
11389 background-color: #ec595a;
11390 color: #fff;
11391 transition: all 0.4s ease-in-out;
11392 font-size: 15px;
11393 font-weight: 500;
11394 line-height: 22px;
11395 padding: 4px 21px;
11396 margin-top: 6px;
11397 font-family: "inter", sans-serif;
11398 }
11399 .cloud-pricing-wrapp-item .btn-purchase:hover {
11400 background-color: #171717;
11401 color: #ec595a;
11402 text-decoration: none;
11403 }
11404
11405 .cloud-heading-2 {
11406 font-size: 50px;
11407 line-height: 1.24;
11408 margin-top: 0;
11409 font-family: "poppins", sans-serif;
11410 }
11411
11412 .app-pricing-area .pricing-title span {
11413 position: relative;
11414 }
11415 .app-pricing-area .pricing-title span .border-shape {
11416 bottom: -2px;
11417 left: 50%;
11418 position: absolute;
11419 width: 110px;
11420 }
11421 .app-pricing-area .title-text {
11422 margin-top: 0;
11423 font-size: 17px;
11424 font-family: "inter", sans-serif;
11425 color: #5d5d66;
11426 }
11427 .app-pricing-area .title-text .offer {
11428 font-family: "Kalam", cursive;
11429 font-weight: 700;
11430 color: #ec595a;
11431 }
11432 .app-pricing-area .pricing-switcher.nav .nav-link {
11433 font-size: 16px;
11434 font-weight: 600;
11435 border-radius: 22.5px;
11436 border: 1px solid;
11437 padding: 3px 16px;
11438 margin: 0 10px;
11439 color: #848d95;
11440 }
11441 .app-pricing-area .pricing-switcher.nav .nav-link.active {
11442 color: #171717;
11443 font-weight: 600;
11444 }
11445
11446 .app-pricing-item {
11447 background: #fff;
11448 border-radius: 10px;
11449 border: 1px solid #f0f0f0;
11450 text-align: center;
11451 transition: all 0.3s ease-in-out;
11452 padding: 38px 35px 50px;
11453 }
11454
11455 .app-pricing-item.active {
11456 position: relative;
11457 }
11458
11459 .app-pricing-item.active .popular-shape {
11460 top: -13%;
11461 right: -18%;
11462 position: absolute;
11463 z-index: 1;
11464 }
11465
11466 .app-pricing-item:hover {
11467 box-shadow: 0 20px 50px 0 rgba(23, 23, 23, 0.08);
11468 }
11469
11470 .app-pricing-item .item-title {
11471 font-size: 30px;
11472 line-height: 36px;
11473 margin-bottom: 14px;
11474 }
11475
11476 .app-pricing-item .item-label {
11477 font-size: 20px;
11478 line-height: 1.2;
11479 margin-bottom: 18px;
11480 }
11481
11482 .app-pricing-item .item-price {
11483 margin-bottom: 33px;
11484 }
11485
11486 .app-pricing-item .item-price .dollar {
11487 color: #ec595a;
11488 font-size: 30px;
11489 line-height: 36px;
11490 font-weight: 700;
11491 position: relative;
11492 }
11493
11494 .app-pricing-item .item-price .dollar svg {
11495 bottom: 0;
11496 left: 0;
11497 position: absolute;
11498 }
11499
11500 .app-pricing-item .item-price .time {
11501 color: #9199a1;
11502 font-size: 18px;
11503 line-height: 36px;
11504 }
11505
11506 .app-pricing-item .item-price .border-shape {
11507 bottom: 0;
11508 left: 0;
11509 position: absolute;
11510 width: 41px;
11511 }
11512
11513 .app-pricing-item ul {
11514 border-top: 1px solid #f0f0f0;
11515 padding-top: 33px;
11516 margin-bottom: 45px;
11517 }
11518
11519 .app-pricing-item ul li {
11520 font-size: 15px;
11521 line-height: 40px;
11522 }
11523
11524 .app-pricing-item .btn {
11525 border-color: #ec595a;
11526 color: #ec595a;
11527 }
11528
11529 .app-pricing-item .btn:hover {
11530 background: #ec595a;
11531 color: #fff;
11532 text-decoration: none;
11533 }
11534
11535 .app-pricing-question .question-title {
11536 font-size: 22px;
11537 font-weight: 600;
11538 line-height: 30px;
11539 letter-spacing: 0.5px;
11540 }
11541
11542 .app-pricing-question .question-text {
11543 color: #171717;
11544 padding: 0 15px;
11545 }
11546
11547 .app-pricing-question .question-text a {
11548 color: #ec595a;
11549 text-decoration: underline;
11550 }
11551
11552 .choose-plan-area-three .pricing-switcher {
11553 padding-bottom: 80px;
11554 }
11555
11556 .choose-plan-area-three .pricing-switcher .nav-link::after {
11557 background: #435bcc;
11558 }
11559
11560 .choose-plan-area-three .tab-pane {
11561 padding-top: 0;
11562 }
11563
11564 .choose-plan-area-three .pricing-item {
11565 border-radius: 15px;
11566 background-color: #fff;
11567 box-shadow: 0 5px 16px 0 rgba(32, 32, 32, 0.1);
11568 padding: 65px 50px 70px;
11569 margin-top: 0;
11570 border: none;
11571 transition: all 0.3s linear;
11572 }
11573
11574 .choose-plan-area-three .pricing-item.active,
11575 .choose-plan-area-three .pricing-item:hover {
11576 box-shadow: 0 50px 80px 0 rgba(53, 42, 67, 0.1);
11577 transform: translateY(-20px);
11578 border: none;
11579 }
11580
11581 .choose-plan-area-three .pricing-item.active h4,
11582 .choose-plan-area-three .pricing-item:hover h4 {
11583 color: #3c73f0;
11584 }
11585
11586 .choose-plan-area-three .pricing-item.active .btn,
11587 .choose-plan-area-three .pricing-item:hover .btn {
11588 color: #fff;
11589 background-color: #356eef;
11590 }
11591
11592 .choose-plan-area-three .pricing-item h4 {
11593 font-size: 24px;
11594 font-weight: 600;
11595 line-height: 1.25;
11596 letter-spacing: 0.5px;
11597 margin-bottom: 20px;
11598 transition: all 0.3s linear;
11599 }
11600
11601 .choose-plan-area-three .pricing-item .price {
11602 font-size: 40px;
11603 font-family: "Poppins", sans-serif;
11604 font-weight: 500;
11605 line-height: 1.2;
11606 margin-bottom: 40px;
11607 margin-top: 0;
11608 color: #171717;
11609 }
11610
11611 .choose-plan-area-three .pricing-item .price span {
11612 color: #8d8d8d;
11613 font-size: 20px;
11614 }
11615
11616 .choose-plan-area-three .pricing-item .list-wrapp {
11617 margin-bottom: 50px;
11618 }
11619
11620 .choose-plan-area-three .pricing-item .list-wrapp .list-title {
11621 font-size: 18px;
11622 line-height: 160%;
11623 font-weight: 700;
11624 color: #171717;
11625 margin-bottom: 20px;
11626 }
11627
11628 .choose-plan-area-three .pricing-item .list-wrapp ul {
11629 padding-top: 0;
11630 }
11631
11632 .choose-plan-area-three .pricing-item .list-wrapp ul li {
11633 display: flex;
11634 font-size: 17px;
11635 line-height: 1;
11636 text-align: left;
11637 padding: 0;
11638 margin-bottom: 20px;
11639 }
11640
11641 .choose-plan-area-three .pricing-item .list-wrapp ul li.disable {
11642 color: rgba(23, 23, 23, 0.5);
11643 }
11644
11645 .choose-plan-area-three .pricing-item .list-wrapp ul li .icon-check {
11646 color: #45c260;
11647 margin-right: 10px;
11648 font-size: 20px;
11649 }
11650
11651 .choose-plan-area-three .pricing-item .list-wrapp ul li .icon-close {
11652 color: #c1c1c1;
11653 margin-right: 10px;
11654 font-size: 20px;
11655 }
11656
11657 .choose-plan-area-three .pricing-item .btn {
11658 border: 1px solid #356eef;
11659 border-radius: 26px;
11660 padding: 10px 0;
11661 font-family: "Poppins", sans-serif;
11662 color: #171717;
11663 font-size: 20px;
11664 font-weight: 600;
11665 line-height: 30px;
11666 letter-spacing: 0.5px;
11667 display: block;
11668 height: 52px;
11669 width: 190px;
11670 margin: 0 auto;
11671 text-align: center;
11672 transition: all 0.3s linear;
11673 }
11674
11675 .choose-plan-area-three .pricing-item .btn:hover {
11676 color: #fff;
11677 background-color: #356eef;
11678 text-decoration: none;
11679 }
11680
11681 .pricing-tabs .nav-link {
11682 padding: 0.3125rem 1.125rem;
11683 border-radius: 0.375rem;
11684 font-size: 1rem;
11685 color: #6d6d6d;
11686 }
11687
11688 .pricing-tabs .nav-link.active {
11689 border-color: transparent;
11690 background: #ec595a;
11691 color: #fff;
11692 }
11693
11694 .pricing-tabs .nav-link:hover {
11695 border-color: transparent;
11696 }
11697
11698 @media (max-width: 480px) {
11699 .cloud-pricing-wrapp .nav .nav-link {
11700 margin-right: 15px;
11701 margin-bottom: 15px;
11702 }
11703 }
11704 .tab-content .fade {
11705 transition: opacity 0.1s linear;
11706 }
11707
11708 .pricing-item-2 {
11709 box-shadow: 0 10px 25px 0 rgba(191, 191, 191, 0.2509803922);
11710 background-color: #fff;
11711 border-radius: 20px;
11712 padding: 40px;
11713 transition: all 0.3s linear;
11714 }
11715 .pricing-item-2.active, .pricing-item-2:hover {
11716 box-shadow: 0 20px 50px 0 rgba(191, 191, 191, 0.5019607843);
11717 transform: translateY(-30px);
11718 }
11719 .pricing-item-2 h4 {
11720 font-family: "Poppins", sans-serif;
11721 font-size: 32px;
11722 font-weight: 500;
11723 line-height: 32px;
11724 letter-spacing: 0.5px;
11725 color: #171717;
11726 margin-top: 45px;
11727 margin-bottom: 20px;
11728 }
11729 .pricing-item-2 p {
11730 font-family: "Inter", sans-serif;
11731 font-size: 16px;
11732 font-weight: 400;
11733 line-height: 26px;
11734 letter-spacing: 0.5px;
11735 color: #70717b;
11736 margin-bottom: 72px;
11737 }
11738 .pricing-item-2 .price {
11739 font-family: "Poppins", sans-serif;
11740 font-size: 20px;
11741 font-weight: 500;
11742 line-height: 26px;
11743 letter-spacing: 0.5px;
11744 color: #333;
11745 margin-bottom: 10px;
11746 }
11747 .pricing-item-2 .pack-feature {
11748 font-family: "Inter", sans-serif;
11749 font-size: 16px;
11750 font-weight: 400;
11751 line-height: 16px;
11752 letter-spacing: 0.5px;
11753 color: #828282;
11754 }
11755 .pricing-item-2 .btn {
11756 border-radius: 5px;
11757 padding: 17px 0;
11758 width: 95%;
11759 margin-top: 33px;
11760 }
11761 .pricing-item-2 .btn:hover {
11762 color: #fff;
11763 background-color: #eb5757;
11764 border-color: #eb5757;
11765 text-decoration: none;
11766 }
11767
11768 .pricing-item-3 {
11769 box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.0509803922);
11770 border-radius: 20px;
11771 overflow: hidden;
11772 background-color: #fff;
11773 transition: all 0.3s ease-out;
11774 }
11775 .pricing-item-3:hover {
11776 box-shadow: 0 50px 80px 0 rgba(53, 42, 67, 0.1019607843);
11777 }
11778 .pricing-item-3 .price-body {
11779 display: flex;
11780 justify-content: center;
11781 flex-direction: column;
11782 }
11783 .pricing-item-3 .price-body p {
11784 margin-bottom: 0;
11785 font-size: 17px;
11786 font-family: "inter", sans-serif;
11787 }
11788 .pricing-item-3.middle .price {
11789 padding-top: 71px;
11790 }
11791 .pricing-item-3 h5 {
11792 font-family: "Inter", sans-serif;
11793 font-size: 22px;
11794 line-height: 18px;
11795 text-align: center;
11796 padding: 36px 0;
11797 box-shadow: 0 1px 1px 0 rgba(71, 61, 141, 0.1019607843);
11798 margin-bottom: 0;
11799 margin-top: 0;
11800 text-transform: capitalize;
11801 }
11802 .pricing-item-3 .price {
11803 font-family: "Inter", sans-serif;
11804 font-size: 25px;
11805 font-weight: 700;
11806 line-height: 18px;
11807 color: #473d8d;
11808 padding-top: 44px;
11809 padding-bottom: 58px;
11810 text-align: center;
11811 }
11812 .pricing-item-3 .price span {
11813 color: #c6c6c6;
11814 font-size: 18px;
11815 font-weight: 700;
11816 line-height: 18px;
11817 }
11818 .pricing-item-3 .price span:first-child {
11819 color: #473d8d;
11820 }
11821 .pricing-item-3 ul {
11822 margin-left: auto;
11823 margin-right: auto;
11824 }
11825 .pricing-item-3 ul li {
11826 font-family: "Inter", sans-serif;
11827 font-size: 17px;
11828 font-weight: 400;
11829 line-height: 28px;
11830 color: #8d8d8d;
11831 margin-top: 15px;
11832 }
11833 .pricing-item-3 ul li:first-child {
11834 margin-top: 0;
11835 }
11836 .pricing-item-3 ul li span {
11837 width: 22px;
11838 height: 22px;
11839 font-size: 9px;
11840 color: #a0a1a3;
11841 border: 1px solid #a0a1a3;
11842 border-radius: 50%;
11843 background-color: transparent;
11844 margin-right: 20px;
11845 display: inline-flex;
11846 align-items: center;
11847 justify-content: center;
11848 }
11849 .pricing-item-3 ul li span i {
11850 display: inline-block;
11851 }
11852 .pricing-item-3 ul li.checked {
11853 color: #171717;
11854 }
11855 .pricing-item-3 ul li.checked span {
11856 background-color: #473d8d;
11857 border-color: #473d8d;
11858 color: #fff;
11859 }
11860 .pricing-item-3 .btn {
11861 margin-left: auto;
11862 margin-right: auto;
11863 padding: 10px 76px;
11864 border: 1px solid #473d8d;
11865 border-radius: 25px;
11866 font-family: "Inter", sans-serif;
11867 font-size: 16px;
11868 font-weight: 500;
11869 margin-bottom: 42px;
11870 margin-top: 33px;
11871 line-height: 1.5;
11872 text-transform: capitalize;
11873 position: relative;
11874 text-decoration: none;
11875 display: inline-block;
11876 overflow: hidden;
11877 text-align: center;
11878 cursor: pointer;
11879 transition: 0.3s ease-out;
11880 color: #212529;
11881 }
11882 .pricing-item-3 .btn:hover {
11883 background-color: #473d8d;
11884 font-weight: 700;
11885 color: #fff;
11886 text-decoration: none;
11887 }
11888
11889 .pricing-switcher {
11890 position: relative;
11891 z-index: 99;
11892 justify-content: space-between;
11893 text-align: center;
11894 }
11895 .pricing-switcher .nav-link {
11896 color: #828282;
11897 text-transform: capitalize;
11898 padding: 5px 10px;
11899 display: inline-block;
11900 position: relative;
11901 font-family: "Poppins", sans-serif;
11902 font-size: 16px;
11903 font-weight: 600;
11904 }
11905 .pricing-switcher .nav-link:hover {
11906 color: unset;
11907 }
11908 .pricing-switcher .nav-link:before {
11909 position: absolute;
11910 content: "";
11911 border: 1px solid rgba(79, 79, 79, 0.2);
11912 width: 100px;
11913 height: 40px;
11914 background: transparent;
11915 border-radius: 25px;
11916 right: -51px;
11917 top: 50%;
11918 margin-top: -20px;
11919 }
11920 .pricing-switcher .nav-link:after {
11921 position: absolute;
11922 content: "";
11923 width: 31px;
11924 height: 31px;
11925 background: #eb5757;
11926 border-radius: 50%;
11927 margin-top: -15.5px;
11928 z-index: 1;
11929 top: 50%;
11930 right: -47px;
11931 transition: all ease 0.3s;
11932 animation-name: fadeInLeft;
11933 animation-duration: 0.3s;
11934 }
11935 .pricing-switcher .nav-link:after.fadeInLeft {
11936 animation-name: fadeInLeft;
11937 animation-duration: 0.3s;
11938 }
11939 .pricing-switcher .nav-link:nth-child(odd) {
11940 padding-right: 80px;
11941 }
11942 .pricing-switcher .nav-link:nth-child(even) {
11943 text-align: right;
11944 padding-left: 80px;
11945 }
11946 .pricing-switcher .nav-link:nth-child(even):before {
11947 left: -49px;
11948 right: auto;
11949 }
11950 .pricing-switcher .nav-link:nth-child(even):after {
11951 right: auto;
11952 left: -45px;
11953 animation-name: fadeInRight;
11954 animation-duration: 0.3s;
11955 }
11956 .pricing-switcher .nav-link:nth-child(even):after.fadeInRight {
11957 animation-name: fadeInRight;
11958 animation-duration: 0.3s;
11959 }
11960 .pricing-switcher .nav-link.active {
11961 color: #333333;
11962 font-weight: 600;
11963 }
11964 .pricing-switcher .nav-link.active::after, .pricing-switcher .nav-link.active::before {
11965 display: none;
11966 z-index: -9;
11967 }
11968
11969 /*================================================
11970 Pricing Two CSS
11971 =================================================*/
11972 .bg-price {
11973 background-color: #f7f7f7;
11974 }
11975
11976 .pricing-menu {
11977 position: static;
11978 background-color: #fff;
11979 }
11980 .pricing-menu.navbar_fixed {
11981 position: fixed;
11982 }
11983
11984 .pricing-banner-2 .pricing-switcher-2 {
11985 background-color: #ec595a;
11986 border-radius: 23px;
11987 border: none;
11988 display: inline-flex;
11989 padding: 4px;
11990 position: relative;
11991 z-index: 1;
11992 width: fit-content;
11993 }
11994 .pricing-banner-2 .pricing-switcher-2 .switcher-bg {
11995 content: "";
11996 width: 50%;
11997 height: auto;
11998 background: #fff;
11999 position: absolute;
12000 display: inline-block;
12001 left: 3px;
12002 top: 3px;
12003 bottom: 3px;
12004 border-radius: 23px;
12005 z-index: -1;
12006 transition: all 0.4s ease-out;
12007 }
12008 .pricing-banner-2 .pricing-switcher-2 .switcher-bg.right {
12009 left: 48%;
12010 }
12011 .pricing-banner-2 .pricing-switcher-2 .nav-link {
12012 border-radius: 23px;
12013 font-weight: 700;
12014 font-size: 16px;
12015 line-height: 16px;
12016 border: none;
12017 color: #fff;
12018 padding: 6px 23px;
12019 }
12020 .pricing-banner-2 .pricing-switcher-2 .nav-link.active {
12021 background-color: transparent;
12022 color: #171717;
12023 }
12024 .pricing-banner-2 .tab-pane {
12025 padding-top: 20px;
12026 }
12027
12028 .old-price,
12029 .current-price,
12030 .price-format,
12031 .subscribe-btn,
12032 .price-note {
12033 color: #fff;
12034 font-family: "Poppins", sans-serif;
12035 }
12036
12037 .old-price {
12038 font-size: 22px;
12039 line-height: 36px;
12040 text-decoration: line-through;
12041 }
12042
12043 .current-price {
12044 font-weight: 700;
12045 font-size: 28px;
12046 line-height: 44px;
12047 display: inline-block;
12048 vertical-align: middle;
12049 }
12050
12051 .saving-price {
12052 background-color: #fff;
12053 border-radius: 1px;
12054 color: #171717;
12055 display: inline-block;
12056 font-size: 14px;
12057 line-height: 14px;
12058 padding: 6px 8px;
12059 }
12060
12061 .price-format {
12062 font-family: "Inter", sans-serif;
12063 font-size: 12px;
12064 line-height: 12px;
12065 margin-bottom: 25px;
12066 }
12067
12068 .subscribe-btn {
12069 border-radius: 2px;
12070 display: inline-block;
12071 font-weight: 500;
12072 font-size: 20px;
12073 line-height: 20px;
12074 background-color: #ec595a;
12075 padding: 12px 24px;
12076 margin-bottom: 8px;
12077 transition: all 0.3s ease-in-out;
12078 }
12079 .subscribe-btn:hover {
12080 background-color: #171717;
12081 color: #ec595a;
12082 }
12083
12084 .price-note {
12085 font-family: "Inter", sans-serif;
12086 font-size: 14px;
12087 line-height: 22px;
12088 width: 60%;
12089 }
12090
12091 .pricing-compare-table > table {
12092 margin: 0;
12093 }
12094
12095 .pricing-compare-table .table-bg {
12096 background: #2c3563;
12097 }
12098 .pricing-compare-table .table-bg2 {
12099 background: #202647;
12100 }
12101 .pricing-compare-table .table-title-bg {
12102 background: #252c53;
12103 }
12104 .pricing-compare-table .red-top {
12105 border-top: 1px solid #ec595a;
12106 }
12107 .pricing-compare-table .red-bottom {
12108 border-bottom: 1px solid #ec595a;
12109 }
12110 .pricing-compare-table .gray-bottom {
12111 border-bottom: 1px solid #c6c6c6;
12112 }
12113 .pricing-compare-table .plan-title {
12114 color: #fff;
12115 font-weight: 600;
12116 font-size: 20px;
12117 line-height: 32px;
12118 margin-bottom: 30px;
12119 }
12120 .pricing-compare-table .nav-tabs {
12121 border-bottom: none;
12122 justify-content: center;
12123 }
12124 .pricing-compare-table .nav-tabs .nav-link {
12125 border: 1px solid #c6c6c6;
12126 border-radius: 2px;
12127 color: #fff;
12128 font-weight: 700;
12129 font-size: 14px;
12130 line-height: 22px;
12131 padding: 4px 5px;
12132 margin: 0 5px;
12133 }
12134 .pricing-compare-table .nav-tabs .nav-link.active {
12135 color: #171717;
12136 }
12137 .pricing-compare-table .tab-pane {
12138 padding-top: 8px;
12139 }
12140 .pricing-compare-table .old-price {
12141 font-size: 14px;
12142 font-weight: 700;
12143 line-height: 22px;
12144 color: #c6c6c6;
12145 margin-bottom: 0;
12146 }
12147 .pricing-compare-table .current-price {
12148 font-size: 14px;
12149 line-height: 22px;
12150 margin: 10px 0;
12151 }
12152 .pricing-compare-table .current-price span {
12153 font-size: 18px;
12154 }
12155 .pricing-compare-table .price-format {
12156 margin-bottom: 10px;
12157 }
12158 .pricing-compare-table .saving-price {
12159 margin-bottom: 15px;
12160 }
12161 .pricing-compare-table .subscribe-btn {
12162 background-color: #fff;
12163 color: #171717;
12164 display: block;
12165 font-size: 16px;
12166 line-height: 26px;
12167 padding: 5px 24px;
12168 margin-bottom: 20px;
12169 }
12170 .pricing-compare-table .subscribe-btn:hover {
12171 background-color: #ec595a;
12172 color: #fff;
12173 }
12174
12175 .pricing-compare-table .price-note {
12176 color: #c6c6c6;
12177 width: 100%;
12178 }
12179 .pricing-compare-table .feature-title {
12180 width: 45%;
12181 padding: 25px 0;
12182 box-shadow: -10px 5px 30px 0 #191e38;
12183 }
12184 .pricing-compare-table .feature {
12185 width: 25%;
12186 text-align: center;
12187 }
12188 .pricing-compare-table .feature-text p {
12189 color: #fff;
12190 font-size: 14px;
12191 line-height: 20px;
12192 padding: 0 32px;
12193 }
12194 .pricing-compare-table .feature-text i {
12195 color: #fff;
12196 font-size: 27px;
12197 }
12198 .pricing-compare-table .feature-btn {
12199 color: #fff;
12200 font-size: 20px;
12201 line-height: 30px;
12202 text-align: left;
12203 padding-left: 60px;
12204 position: relative;
12205 }
12206 .pricing-compare-table .feature-btn:before {
12207 content: "L";
12208 font-family: "ElegantIcons";
12209 font-weight: 400;
12210 position: absolute;
12211 left: 15px;
12212 }
12213 .pricing-compare-table .feature-btn.collapsed:before {
12214 content: "K";
12215 }
12216 .pricing-compare-table .feature-body p {
12217 color: #fff;
12218 font-size: 14px;
12219 line-height: 20px;
12220 padding: 12px 65px 0 60px;
12221 }
12222 .pricing-compare-table .feature-row .feature-type {
12223 text-align: center;
12224 }
12225 .pricing-compare-table .feature-row .feature-type .section-text {
12226 color: #ec595a;
12227 text-align: center;
12228 font-weight: 600;
12229 font-size: 22px;
12230 line-height: 30px;
12231 letter-spacing: 0.5px;
12232 transform: rotate(180deg);
12233 writing-mode: tb-rl;
12234 }
12235 .pricing-compare-table.mobile .feature-title {
12236 width: 100%;
12237 padding: 5px 0;
12238 box-shadow: none;
12239 text-align: left;
12240 }
12241 .pricing-compare-table.mobile .sub-padding {
12242 padding: 20px 25px 15px;
12243 }
12244 .pricing-compare-table.mobile .product-plan {
12245 margin-bottom: 30px;
12246 }
12247 .pricing-compare-table.mobile .feature-body p {
12248 padding: 12px 0 0 20px;
12249 }
12250 .pricing-compare-table.mobile .feature-btn {
12251 padding-left: 20px;
12252 }
12253 .pricing-compare-table.mobile .feature-btn:before {
12254 left: 0;
12255 }
12256
12257 /*================================================
12258 Pricing Two CSS
12259 =================================================*/
12260 .bg-price {
12261 background-color: #f7f7f7;
12262 }
12263
12264 .pricing-menu {
12265 position: static;
12266 background-color: #fff;
12267 }
12268 .pricing-menu.navbar_fixed {
12269 position: fixed;
12270 }
12271
12272 .pricing-compare-table .feature-title {
12273 padding: 15px 20px;
12274 background: #f7f7f7;
12275 color: #333;
12276 font-size: 24px;
12277 font-weight: 700;
12278 text-align: center;
12279 position: relative;
12280 box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
12281 }
12282 .pricing-compare-table .feature-row {
12283 display: flex;
12284 flex-direction: row;
12285 align-items: center;
12286 justify-content: center;
12287 border-bottom: 1px solid #eee;
12288 position: relative;
12289 }
12290 .pricing-compare-table .feature-row:last-of-type {
12291 border-bottom: none;
12292 }
12293 .pricing-compare-table .feature-row .feature-type {
12294 text-align: center;
12295 }
12296 .pricing-compare-table .feature-row .feature-type .section-text {
12297 color: #ec595a;
12298 text-align: center;
12299 font-weight: 600;
12300 font-size: 22px;
12301 line-height: 30px;
12302 letter-spacing: 0.5px;
12303 transform: rotate(180deg);
12304 writing-mode: tb-rl;
12305 }
12306 .pricing-compare-table .feature-row .feature-body {
12307 display: flex;
12308 flex-direction: row;
12309 align-items: center;
12310 justify-content: center;
12311 flex-wrap: wrap;
12312 width: 100%;
12313 }
12314 .pricing-compare-table .feature-row .feature-body p {
12315 color: #fff;
12316 font-size: 14px;
12317 line-height: 20px;
12318 padding: 12px 65px 0 60px;
12319 }
12320 .pricing-compare-table .feature-row .feature-body:last-of-type p {
12321 padding-bottom: 12px;
12322 }
12323 .pricing-compare-table .feature-row .feature-btn {
12324 position: absolute;
12325 right: 20px;
12326 top: 50%;
12327 transform: translateY(-50%);
12328 padding-left: 40px;
12329 }
12330 .pricing-compare-table .feature-row .feature-btn:before {
12331 content: "";
12332 position: absolute;
12333 left: -20px;
12334 top: 50%;
12335 transform: translateY(-50%);
12336 width: 10px;
12337 height: 10px;
12338 border-radius: 50%;
12339 background-color: #ec595a;
12340 }
12341 .pricing-compare-table.mobile .feature-title {
12342 width: 100%;
12343 padding: 5px 0;
12344 box-shadow: none;
12345 text-align: left;
12346 }
12347 .pricing-compare-table.mobile .sub-padding {
12348 padding: 20px 25px 15px;
12349 }
12350 .pricing-compare-table.mobile .product-plan {
12351 margin-bottom: 30px;
12352 }
12353 .pricing-compare-table.mobile .feature-body p {
12354 padding: 12px 0 0 20px;
12355 }
12356 .pricing-compare-table.mobile .feature-btn {
12357 padding-left: 20px;
12358 }
12359 .pricing-compare-table.mobile .feature-btn:before {
12360 left: 0;
12361 }
12362
12363 .pricing-item-2 .btn {
12364 position: relative;
12365 font-size: 1.125rem;
12366 font-weight: 500;
12367 line-height: 1.5;
12368 text-transform: capitalize;
12369 text-decoration: none;
12370 border: 2px solid #171717;
12371 border-radius: 0.375rem;
12372 padding: 0.8125rem 2rem;
12373 margin: 0 0;
12374 display: inline-block;
12375 overflow: hidden;
12376 text-align: center;
12377 cursor: pointer;
12378 transition: 0.3s ease-out;
12379 color: #212529;
12380 font-family: "Inter", sans-serif;
12381 margin-top: 30px;
12382 }
12383
12384 .cloud-pricing-wrapp .nav {
12385 border: none;
12386 }
12387 .cloud-pricing-wrapp .nav .nav-link {
12388 font-family: "Inter", sans-serif;
12389 font-size: 17px;
12390 font-weight: 400;
12391 line-height: 28px;
12392 border: transparent;
12393 background-color: transparent;
12394 padding: 0;
12395 margin-right: 30px;
12396 margin-bottom: 40px;
12397 color: #848d95;
12398 }
12399 .cloud-pricing-wrapp .nav .nav-link.active {
12400 color: #171717;
12401 }
12402 .cloud-pricing-wrapp .nav .nav-link span {
12403 width: 12px;
12404 height: 12px;
12405 border: 1px solid #848d95;
12406 border-radius: 50%;
12407 display: inline-block;
12408 position: relative;
12409 margin-right: 5px;
12410 }
12411 .cloud-pricing-wrapp .nav .nav-link span:before {
12412 content: "";
12413 width: 0;
12414 height: 9px;
12415 border-radius: 50%;
12416 background-color: #ec595a;
12417 position: absolute;
12418 left: 50%;
12419 top: 50%;
12420 transform: translate(-50%, -50%);
12421 }
12422 .cloud-pricing-wrapp .nav .nav-link.active span:before {
12423 width: 9px;
12424 }
12425 .cloud-pricing-wrapp .tab-pane {
12426 padding-top: 0;
12427 }
12428 .cloud-pricing-wrapp-item {
12429 cursor: pointer;
12430 background-color: #fff;
12431 border-radius: 10px;
12432 display: flex;
12433 flex-wrap: wrap;
12434 align-items: center;
12435 padding: 30px 40px;
12436 margin-bottom: 15px;
12437 transition: all 0.3s linear;
12438 }
12439 .cloud-pricing-wrapp-item .plan {
12440 width: 25%;
12441 }
12442 .cloud-pricing-wrapp-item .label {
12443 font-size: 15px;
12444 line-height: 27px;
12445 color: #171717;
12446 margin-bottom: 0;
12447 font-family: "inter", sans-serif;
12448 font-family: 15px;
12449 }
12450 .cloud-pricing-wrapp-item .space {
12451 color: #171717;
12452 font-family: "Poppins", sans-serif;
12453 font-size: 22px;
12454 font-weight: 600;
12455 line-height: 30px;
12456 letter-spacing: 0.5px;
12457 }
12458 .cloud-pricing-wrapp-item .price {
12459 width: 25%;
12460 padding-left: 60px;
12461 }
12462 .cloud-pricing-wrapp-item .type {
12463 font-family: "inter", sans-serif;
12464 font-size: 17px;
12465 color: #171717;
12466 font-weight: 700;
12467 line-height: 30px;
12468 margin-bottom: 0;
12469 }
12470 .cloud-pricing-wrapp-item .btn-purchase {
12471 border-radius: 5px;
12472 background-color: #ec595a;
12473 color: #fff;
12474 transition: all 0.4s ease-in-out;
12475 font-size: 15px;
12476 font-weight: 500;
12477 line-height: 22px;
12478 padding: 4px 21px;
12479 margin-top: 6px;
12480 font-family: "inter", sans-serif;
12481 }
12482 .cloud-pricing-wrapp-item .btn-purchase:hover {
12483 background-color: #171717;
12484 color: #ec595a;
12485 text-decoration: none;
12486 }
12487
12488 .cloud-heading-2 {
12489 font-size: 50px;
12490 line-height: 1.24;
12491 margin-top: 0;
12492 font-family: "poppins", sans-serif;
12493 }
12494
12495 .cloud-pricing-wrapp .nav .nav-link span {
12496 width: 12px;
12497 height: 12px;
12498 border: 1px solid #848d95;
12499 border-radius: 50%;
12500 display: inline-block;
12501 position: relative;
12502 margin-right: 5px;
12503 }
12504
12505 .cloud-pricing-wrapp .nav .nav-link span:before {
12506 content: "";
12507 width: 0;
12508 height: 9px;
12509 border-radius: 50%;
12510 background-color: #ec595a;
12511 position: absolute;
12512 left: 50%;
12513 top: 50%;
12514 transform: translate(-50%, -50%);
12515 }
12516
12517 .cloud-pricing-wrapp .nav .nav-link.active span {
12518 border-color: #171717;
12519 }
12520
12521 .cloud-pricing-wrapp .nav .nav-link.active {
12522 background-color: transparent;
12523 }
12524
12525 .cloud-pricing-wrapp .nav .nav-link.active span:before {
12526 width: 9px;
12527 }
12528
12529 .cloud-pricing-wrapp .tab-pane {
12530 padding-top: 0;
12531 width: 100%;
12532 }
12533
12534 .cloud-pricing-item {
12535 cursor: pointer;
12536 background-color: #fff;
12537 border-radius: 10px;
12538 display: flex;
12539 flex-wrap: wrap;
12540 align-items: center;
12541 padding: 30px 40px;
12542 margin-bottom: 15px;
12543 transition: all 0.3s linear;
12544 }
12545
12546 .cloud-pricing-item .plan {
12547 width: 25%;
12548 }
12549
12550 .cloud-pricing-item .content {
12551 width: 50%;
12552 }
12553
12554 .cloud-pricing-item .price {
12555 width: 25%;
12556 padding-left: 60px;
12557 }
12558
12559 .cloud-pricing-item .label {
12560 font-size: 15px;
12561 line-height: 27px;
12562 color: #171717;
12563 margin-bottom: 0;
12564 font-family: "inter", sans-serif;
12565 }
12566
12567 .cloud-pricing-item .label .tag {
12568 color: #ec595a;
12569 margin-left: 8px;
12570 }
12571
12572 .cloud-pricing-item .space {
12573 color: #171717;
12574 font-family: "Poppins", sans-serif;
12575 font-size: 22px;
12576 font-weight: 600;
12577 line-height: 30px;
12578 letter-spacing: 0.5px;
12579 margin-bottom: 0;
12580 }
12581
12582 .cloud-pricing-item .plan-text {
12583 font-size: 15px;
12584 line-height: 22px;
12585 }
12586
12587 .cloud-pricing-item .type {
12588 color: #171717;
12589 font-weight: 700;
12590 line-height: 30px;
12591 margin-bottom: 5px;
12592 font-family: "inter", sans-serif;
12593 font-size: 17px;
12594 }
12595
12596 .cloud-pricing-item .btn-purchase {
12597 border-radius: 5px;
12598 background-color: #ec595a;
12599 color: #fff;
12600 transition: all 0.4s ease-in-out;
12601 font-size: 15px;
12602 font-family: "inter", sans-serif;
12603 font-weight: 500;
12604 line-height: 22px;
12605 padding: 4px 21px;
12606 margin-top: 6px;
12607 }
12608
12609 .cloud-pricing-item .btn-purchase:hover {
12610 background-color: #171717;
12611 color: #ec595a;
12612 text-decoration: none;
12613 }
12614
12615 .cloud-pricing-item:hover {
12616 box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 0.1);
12617 }
12618
12619 .app-pricing-area .pricing-title span {
12620 position: relative;
12621 }
12622 .app-pricing-area .pricing-title span .border-shape {
12623 bottom: -2px;
12624 left: 50%;
12625 position: absolute;
12626 width: 110px;
12627 }
12628 .app-pricing-area .title-text {
12629 margin-top: 0;
12630 font-size: 17px;
12631 font-family: "inter", sans-serif;
12632 color: #5d5d66;
12633 }
12634 .app-pricing-area .title-text .offer {
12635 font-family: "Kalam", cursive;
12636 font-weight: 700;
12637 color: #ec595a;
12638 }
12639 .app-pricing-area .pricing-switcher.nav .nav-link {
12640 font-size: 16px;
12641 font-weight: 600;
12642 border-radius: 22.5px;
12643 border: 1px solid;
12644 padding: 3px 16px;
12645 margin: 0 10px;
12646 color: #848d95;
12647 }
12648 .app-pricing-area .pricing-switcher.nav .nav-link.active {
12649 color: #171717;
12650 font-weight: 600;
12651 }
12652
12653 .app-pricing-switcher.nav .nav-link {
12654 font-size: 16px;
12655 font-weight: 600;
12656 border-radius: 22.5px;
12657 border: 1px solid;
12658 padding: 3px 16px;
12659 margin: 0 10px;
12660 color: #848d95;
12661 font-family: "poppins", sans-serif;
12662 }
12663
12664 .app-pricing-switcher.nav .nav-link.active {
12665 color: #171717;
12666 }
12667
12668 .app-pricing-item {
12669 background: #fff;
12670 border-radius: 10px;
12671 border: 1px solid #f0f0f0;
12672 text-align: center;
12673 transition: all 0.3s ease-in-out;
12674 padding: 38px 35px 50px;
12675 }
12676
12677 .app-pricing-item .btn {
12678 position: relative;
12679 font-size: 1.125rem;
12680 font-weight: 500;
12681 line-height: 1.5;
12682 text-transform: capitalize;
12683 text-decoration: none;
12684 border: 2px solid #171717;
12685 border-radius: 0.375rem;
12686 padding: 0.8125rem 2rem;
12687 margin: 0 0;
12688 display: inline-block;
12689 overflow: hidden;
12690 text-align: center;
12691 cursor: pointer;
12692 transition: 0.3s ease-out;
12693 color: #212529;
12694 font-family: "Inter", sans-serif;
12695 }
12696
12697 .app-pricing-item.active {
12698 position: relative;
12699 }
12700 .app-pricing-item.active .popular-shape {
12701 top: -13%;
12702 right: -18%;
12703 position: absolute;
12704 z-index: 1;
12705 }
12706
12707 .app-pricing-item:hover {
12708 box-shadow: 0 20px 50px 0 rgba(23, 23, 23, 0.08);
12709 }
12710 .app-pricing-item .item-title {
12711 font-size: 30px;
12712 line-height: 36px;
12713 margin-bottom: 14px;
12714 }
12715 .app-pricing-item .item-label {
12716 font-size: 20px;
12717 line-height: 1.2;
12718 margin-bottom: 18px;
12719 }
12720 .app-pricing-item .item-price {
12721 margin-bottom: 33px;
12722 }
12723 .app-pricing-item .item-price .dollar {
12724 color: #ec595a;
12725 font-size: 30px;
12726 line-height: 36px;
12727 font-weight: 700;
12728 position: relative;
12729 }
12730 .app-pricing-item .item-price .dollar svg {
12731 bottom: 0;
12732 left: 0;
12733 position: absolute;
12734 }
12735 .app-pricing-item .item-price .time {
12736 color: #9199a1;
12737 font-size: 18px;
12738 line-height: 36px;
12739 }
12740 .app-pricing-item .item-price .border-shape {
12741 bottom: 0;
12742 left: 0;
12743 position: absolute;
12744 width: 41px;
12745 }
12746 .app-pricing-item ul {
12747 border-top: 1px solid #f0f0f0;
12748 padding-top: 33px;
12749 margin-bottom: 45px;
12750 }
12751 .app-pricing-item ul li {
12752 font-size: 15px;
12753 line-height: 40px;
12754 }
12755 .app-pricing-item .btn {
12756 border-color: #ec595a;
12757 color: #ec595a;
12758 }
12759 .app-pricing-item .btn:hover {
12760 background: #ec595a;
12761 color: #fff;
12762 text-decoration: none;
12763 }
12764
12765 .choose-plan-area-three .pricing-switcher {
12766 padding-bottom: 80px;
12767 }
12768 .choose-plan-area-three .pricing-switcher .nav-link::after {
12769 background: #435bcc;
12770 }
12771 .choose-plan-area-three .tab-pane {
12772 padding-top: 0;
12773 }
12774 .choose-plan-area-three .pricing-item {
12775 border-radius: 15px;
12776 background-color: #fff;
12777 box-shadow: 0 5px 16px 0 rgba(32, 32, 32, 0.1);
12778 padding: 65px 50px 70px;
12779 margin-top: 0;
12780 border: none;
12781 transition: all 0.3s linear;
12782 }
12783 .choose-plan-area-three .pricing-item:hover {
12784 box-shadow: 0 50px 80px 0 rgba(53, 42, 67, 0.1);
12785 transform: translateY(-20px);
12786 border: none;
12787 }
12788 .choose-plan-area-three .pricing-item:hover h4 {
12789 color: #3c73f0;
12790 }
12791 .choose-plan-area-three .pricing-item:hover .btn {
12792 color: #fff;
12793 background-color: #356eef;
12794 }
12795 .choose-plan-area-three .pricing-item h4 {
12796 font-size: 24px;
12797 font-weight: 600;
12798 line-height: 1.25;
12799 letter-spacing: 0.5px;
12800 margin-bottom: 20px;
12801 transition: all 0.3s linear;
12802 font-family: "poppins", sans-serif;
12803 }
12804 .choose-plan-area-three .pricing-item .price {
12805 font-size: 40px;
12806 font-family: "Poppins", sans-serif;
12807 font-weight: 500;
12808 line-height: 1.2;
12809 margin-bottom: 40px;
12810 margin-top: 0;
12811 color: #171717;
12812 }
12813 .choose-plan-area-three .pricing-item .price span {
12814 color: #8d8d8d;
12815 font-size: 20px;
12816 }
12817 .choose-plan-area-three .pricing-item .list-wrapp {
12818 margin-bottom: 50px;
12819 }
12820 .choose-plan-area-three .pricing-item .list-wrapp ul {
12821 padding-left: 0;
12822 }
12823 .choose-plan-area-three .pricing-item .list-wrapp .list-title {
12824 font-size: 18px;
12825 line-height: 160%;
12826 font-weight: 700;
12827 color: #171717;
12828 margin-bottom: 20px;
12829 }
12830 .choose-plan-area-three .pricing-item .list-wrapp ul {
12831 padding-top: 0;
12832 }
12833 .choose-plan-area-three .pricing-item .list-wrapp ul li {
12834 display: flex;
12835 font-size: 17px;
12836 line-height: 1;
12837 text-align: left;
12838 padding: 0;
12839 margin-bottom: 20px;
12840 }
12841 .choose-plan-area-three .pricing-item .list-wrapp ul li .icon-check {
12842 color: #45c260;
12843 margin-right: 10px;
12844 font-size: 20px;
12845 }
12846 .choose-plan-area-three .pricing-item .list-wrapp ul li .icon-close {
12847 color: #c1c1c1;
12848 margin-right: 10px;
12849 font-size: 20px;
12850 }
12851 .choose-plan-area-three .pricing-item .list-wrapp ul li.disable {
12852 color: rgba(23, 23, 23, 0.5);
12853 }
12854 .choose-plan-area-three .pricing-item .btn {
12855 border: 1px solid #356eef;
12856 border-radius: 26px;
12857 padding: 10px 0;
12858 font-family: "Poppins", sans-serif;
12859 color: #171717;
12860 font-size: 20px;
12861 font-weight: 600;
12862 line-height: 30px;
12863 letter-spacing: 0.5px;
12864 display: block;
12865 height: 52px;
12866 width: 190px;
12867 margin: 0 auto;
12868 text-align: center;
12869 transition: all 0.3s linear;
12870 }
12871 .choose-plan-area-three .pricing-item .btn:hover {
12872 color: #fff;
12873 background-color: #356eef;
12874 text-decoration: none;
12875 }
12876 .choose-plan-area-three .pricing-item.active {
12877 box-shadow: 0 50px 80px 0 rgba(53, 42, 67, 0.1);
12878 transform: translateY(-20px);
12879 border: none;
12880 }
12881 .choose-plan-area-three .pricing-item.active h4 {
12882 color: #3c73f0;
12883 }
12884 .choose-plan-area-three .pricing-item.active .btn {
12885 color: #fff;
12886 background-color: #356eef;
12887 }
12888
12889 @media (max-width: 991px) {
12890 .cloud-pricing-wrapp .nav {
12891 justify-content: center;
12892 }
12893 }
12894 @media (max-width: 480px) {
12895 .pricing-switcher .nav-link:nth-child(odd) {
12896 padding-right: 60px;
12897 }
12898 .pricing-switcher .nav-link:nth-child(even) {
12899 padding-left: 60px;
12900 }
12901 .pricing-banner-2 .current-price {
12902 font-size: 24px;
12903 }
12904 }
12905
12906 /*# sourceMappingURL=main.css.map */
12907