appscms-tools-theme 4.2.0 → 4.2.2

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,1381 @@
1
+ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&display=swap");
2
+
3
+ * {
4
+ box-sizing: border-box;
5
+ font-family: "Inter", sans-serif;
6
+ }
7
+ .contenttool-bg-lite{
8
+ background: linear-gradient(180deg, #eff7ff, transparent);
9
+ height: 100vh;
10
+ width: 100vw;
11
+ position: absolute;
12
+ top: 0;
13
+ left: 0;
14
+ z-index: -9999;
15
+ }
16
+ body {
17
+ padding: 0;
18
+ margin: 0;
19
+ -webkit-font-smoothing: antialiased;
20
+ font-family: var(--font-family);
21
+ overflow-x: hidden;
22
+ background: #fafafa !important;
23
+ }
24
+ /* appscms navbar */
25
+ .appscms-navbar {
26
+ background-color: var(--white-color);
27
+ height: 45px;
28
+ position: sticky;
29
+ top: 0;
30
+ z-index: 999;
31
+ }
32
+
33
+ .appscms-navbar-nav {
34
+ display: flex;
35
+ width: 100%;
36
+ height: 100%;
37
+ justify-content: space-between;
38
+ }
39
+ .appscms-navbar-nav a {
40
+ display: flex;
41
+ align-items: center;
42
+ }
43
+ .appscms-navbar-nav-links {
44
+ width: 100%;
45
+ height: 100%;
46
+ display: flex;
47
+ justify-content: flex-end;
48
+ gap: 45px;
49
+ align-items: center;
50
+ }
51
+
52
+ .appscms-nav-link {
53
+ font-size: 15px;
54
+ color: var(--black-light);
55
+ font-weight: 450;
56
+ }
57
+ .appscms-nav-link:hover {
58
+ color: var(--black-color);
59
+ text-decoration: underline;
60
+ }
61
+ .arrow-svg {
62
+ display: none;
63
+ }
64
+
65
+ .appscms-toolbar {
66
+ background-color: #2f79f2;
67
+ box-shadow: 1px 4px 10 #00000026;
68
+ position: sticky;
69
+ z-index: 999;
70
+ top: 45px;
71
+ }
72
+
73
+ .appscms-toolbar .appscms-toolbar-list {
74
+ list-style: none;
75
+ display: flex;
76
+ padding: 0;
77
+ margin: 0;
78
+ height: 40px;
79
+ gap: 59px;
80
+ }
81
+
82
+ .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item {
83
+ color: var(--black-light);
84
+ display: block;
85
+ font-size: 16px;
86
+ line-height: 24px;
87
+ padding: 10px;
88
+ position: relative;
89
+ text-decoration: none;
90
+ display: flex;
91
+ align-items: center;
92
+ justify-content: center;
93
+ cursor: pointer;
94
+ }
95
+ .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item:first-child {
96
+ padding-left: 0px;
97
+ }
98
+ .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item:first-child {
99
+ padding-right: 0px;
100
+ }
101
+ .appscms-toolbar
102
+ .appscms-toolbar-list
103
+ .appscms-toolbar-list-item:hover
104
+ > .list-item-dropdown {
105
+ display: block;
106
+ opacity: 1;
107
+ }
108
+
109
+ .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item:hover {
110
+ border-bottom: 2px solid white;
111
+ padding-bottom: 8px;
112
+ position: relative;
113
+ }
114
+
115
+ /* smooth scrolling code */
116
+ .appscms-toolbar-list {
117
+ overflow-y: hidden;
118
+ overflow-x: auto;
119
+ }
120
+
121
+ .appscms-toolbar-list::-webkit-scrollbar {
122
+ width: 0;
123
+ height: 0;
124
+ }
125
+
126
+ .appscms-toolbar-list::-webkit-scrollbar-track {
127
+ background-color: transparent;
128
+ }
129
+
130
+ .appscms-toolbar-list::-webkit-scrollbar-thumb {
131
+ background-color: transparent;
132
+ }
133
+
134
+ .appscms-toolbar .list-item-dropdown {
135
+ left: 0px;
136
+ position: fixed;
137
+ top: 85px;
138
+ min-width: 500px;
139
+ width: 90vw;
140
+ box-shadow: 3px 10px 40px rgba(24, 29, 32, 0.05);
141
+ z-index: 200;
142
+ border-bottom-left-radius: 10px;
143
+ border-bottom-right-radius: 10px;
144
+ padding: 25px 50px 50px 50px;
145
+ display: none;
146
+ background-color: var(--white-color);
147
+ }
148
+
149
+ .list-item-dropdown-heading {
150
+ font-weight: 600;
151
+ font-size: 13px;
152
+ color: var(--black-light);
153
+ margin-bottom: 8px;
154
+ }
155
+ .list-item-dropdown li {
156
+ padding-top: 1px;
157
+ padding-bottom: 1px;
158
+ list-style: none;
159
+ }
160
+ .list-item-dropdown li .toolbar-link {
161
+ font-weight: 600;
162
+ line-height: 1.7;
163
+ color: var(--dark-gray);
164
+ padding-top: 10px;
165
+ padding-bottom: 8px;
166
+ align-items: center;
167
+ width: 100%;
168
+ font-size: 16px;
169
+ text-decoration: none;
170
+ text-transform: capitalize;
171
+ white-space: nowrap;
172
+ }
173
+
174
+ .list-item-dropdown li .toolbar-link:hover {
175
+ background-color: rgba(241, 241, 241, 0.279);
176
+ box-shadow: 0px 0px 5px rgba(241, 241, 241, 0.279);
177
+ border-radius: 5px;
178
+ color: #323232;
179
+ }
180
+ .appscms-toolbar-list-item-span {
181
+ color: var(--white-color);
182
+ display: block;
183
+ font-size: 15px;
184
+ line-height: 24px;
185
+ width: 100%;
186
+ white-space: nowrap;
187
+ padding: 8px 0;
188
+ position: relative;
189
+ text-decoration: none;
190
+ }
191
+ .hamburger {
192
+ display: none;
193
+ }
194
+
195
+ .appscms-faq-section {
196
+ max-width: 1140px;
197
+ }
198
+
199
+ .appscms-contenttool-container {
200
+ display: grid;
201
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
202
+ gap: 16px;
203
+ }
204
+
205
+ .appscms-contenttool-tool {
206
+ background-color: white;
207
+ box-shadow: 1px 2px 10px rgba(179, 179, 179, 0.468);
208
+ padding: 21px;
209
+ border-radius: 13px;
210
+ }
211
+
212
+ .contentool-tool-image-background {
213
+ background-color: rgba(158, 97, 255, 0.270);
214
+ width: 58px;
215
+ height: 58px;
216
+ display: flex;
217
+ align-items: center;
218
+ justify-content: center;
219
+ border-radius: 12px;
220
+ }
221
+
222
+ #contenttool-icon-img{
223
+ width: 45px;
224
+ }
225
+
226
+ .background img {
227
+ width: 100%;
228
+ height: auto;
229
+ border-radius: 10px;
230
+ }
231
+
232
+ .contenttool-tool-heading {
233
+ font-weight: 600;
234
+ font-size: 16px;
235
+ color: #141414;
236
+ margin-top: 10px;
237
+ }
238
+
239
+ .contenttool-tool-text{
240
+ font-weight: 500;
241
+ font-size: 13px;
242
+ color: rgb(151, 151, 151);
243
+ margin-top: -5px;
244
+ }
245
+ #exlpore-btn{
246
+ display: none;
247
+ }
248
+ @media (max-width: 768px) {
249
+ #landing-main-svg{
250
+ display:none;
251
+ }
252
+ .close-nav-ham {
253
+ display: flex !important;
254
+ justify-content: end;
255
+ }
256
+ .hamburger {
257
+ display: block;
258
+ cursor: pointer;
259
+ position: absolute;
260
+ right: -20px;
261
+ /* top: 5px; */
262
+ z-index: 9999;
263
+ }
264
+ .appscms-toolbar {
265
+ background-color: var(--black-color);
266
+ box-shadow: 1px 4px 10 #00000026;
267
+ overflow-x: hidden;
268
+ }
269
+ .appscms-navbar-nav-links {
270
+ display: none;
271
+ }
272
+ .appscms-toolbar {
273
+ top: 0px;
274
+ position: fixed;
275
+ transition: all 0.3s ease;
276
+ width: 272px;
277
+ right: -272px;
278
+ display: none;
279
+ z-index: 1000;
280
+ }
281
+ .appscms-toolbar .appscms-toolbar-list {
282
+ height: 100vh;
283
+ flex-direction: column;
284
+ gap: 0px;
285
+ overflow-y: scroll;
286
+ overflow-x: hidden;
287
+ }
288
+ .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item {
289
+ align-items: flex-start;
290
+ flex-direction: column;
291
+ }
292
+ .appscms-toolbar
293
+ .appscms-toolbar-list
294
+ .appscms-toolbar-list-item:first-child {
295
+ padding-left: 10px;
296
+ }
297
+ .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item:hover {
298
+ border-bottom: none;
299
+ padding-bottom: 10px;
300
+ }
301
+
302
+ .appscms-toolbar
303
+ .appscms-toolbar-list
304
+ .appscms-toolbar-list-item:first-child {
305
+ padding-right: 10px;
306
+ }
307
+ .list-item-dropdown li .toolbar-link {
308
+ color: var(--white-color);
309
+ font-size: 15px;
310
+ }
311
+ .appscms-toolbar-list-item-span {
312
+ font-size: 17px;
313
+ font-weight: 600;
314
+ }
315
+ .list-item-dropdown-heading {
316
+ display: none;
317
+ }
318
+ .appscms-toolbar .list-item-dropdown {
319
+ padding: 0px;
320
+ width: 100%;
321
+ position: static;
322
+ display: block;
323
+ overflow: hidden;
324
+ transition: all 0.3s ease;
325
+ background-color: transparent;
326
+ opacity: 0;
327
+ height: 0px;
328
+ max-height: 0px;
329
+ }
330
+ .appscms-toolbar
331
+ .appscms-toolbar-list-item:nth-child(1)
332
+ > .list-item-dropdown {
333
+ opacity: 1;
334
+ height: auto;
335
+ max-height: 200px;
336
+ }
337
+
338
+ .arrow-svg {
339
+ display: block;
340
+ }
341
+ }
342
+ .bg-primary {
343
+ background-color: #1b2fe7;
344
+ }
345
+ /* headings section */
346
+ .appscms-h1,
347
+ .success-msg {
348
+ font-size: 50px;
349
+ font-weight: 799;
350
+ font-family: "inter", sans-serif;
351
+ margin: 20px 0px;
352
+ color: #2F79F2;
353
+ }
354
+ .contenttool-landing-h1{
355
+ font-size: 60px;
356
+ }
357
+
358
+ #contenttool-line-top{
359
+ transform: scale(1.4);
360
+ position: absolute;
361
+ right: 53px;
362
+ top: 7;
363
+ z-index: -997;
364
+ }
365
+ #contenttool-line-left-bottom{
366
+ position: absolute;
367
+ left: 0px;
368
+ top: 45vh;
369
+ z-index: -996;
370
+ }
371
+
372
+ .appscms-h3 {
373
+ font-size: 30px;
374
+ color: var(--mid-gray);
375
+ }
376
+ .appscms-h2 {
377
+ font-size: 17px;
378
+ padding-top: 8px;
379
+ font-weight: 500;
380
+ color: var(--light-gray);
381
+ }
382
+ #landing-main-svg{
383
+ width: 400px;
384
+ }
385
+ .heading-landing-text{
386
+ padding-top: 40px;
387
+ }
388
+
389
+ .grid-contentttool-h1{
390
+ max-width: 80vw;
391
+ display: grid;
392
+ grid-template-columns: 60% 400px;
393
+ }
394
+
395
+ /* searchbar */
396
+ #appscms-searchbar {
397
+ border-radius: 15px;
398
+ padding: 5px;
399
+ background-color: rgb(228 237 255);
400
+ border: 2px solid #2C8DFF;
401
+ color: #2C8DFF;
402
+ }
403
+
404
+ .form-control{
405
+ background-color: transparent;
406
+ color: #2C8DFF;
407
+ font-weight: 600;
408
+ }
409
+
410
+ .form-control::placeholder {
411
+ color: #2C8DFF;
412
+ font-weight: 600;
413
+ }
414
+
415
+ .form-control:focus {
416
+ background-color: transparent;
417
+ box-shadow: none;
418
+ }
419
+ .btn-search:hover {
420
+ transform: scale(1.2);
421
+ }
422
+ .btn-search:focus,
423
+ .btn-search:active {
424
+ background-color: transparent;
425
+ border-color: transparent;
426
+ box-shadow: none;
427
+ }
428
+ /* category section */
429
+ .toolfilters {
430
+ margin-top: 80px;
431
+ cursor: pointer;
432
+ background-color: rgb(255, 255, 255);
433
+ display: flex;
434
+ height: 30px;
435
+ box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.15);
436
+ height: 53px;
437
+ align-items: center;
438
+ border-radius: 27px;
439
+ overflow: hidden;
440
+ margin: 20px;
441
+ color: #000;
442
+ }
443
+ .toolfilter {
444
+ margin: auto;
445
+ padding: 0px 30px;
446
+ }
447
+ /* test scroll */
448
+ .toolfilters {
449
+ overflow-y: hidden;
450
+ overflow-x: auto;
451
+ }
452
+
453
+ .toolfilters::-webkit-scrollbar {
454
+ width: 0;
455
+ height: 0;
456
+ }
457
+
458
+ .toolfilters::-webkit-scrollbar-track {
459
+ background-color: transparent;
460
+ }
461
+
462
+ .toolfilters::-webkit-scrollbar-thumb {
463
+ background-color: transparent;
464
+ }
465
+ /* margin: 4px; */
466
+ /* overflow: hidden; */
467
+
468
+ .toolfilter:hover {
469
+ background-color: var(--primary-color);
470
+ color: white;
471
+ height: 90%;
472
+ border-radius: 26px;
473
+ display: flex;
474
+ align-items: center;
475
+ }
476
+
477
+ /* tools section */
478
+ .appscms-tool-container:nth-child(even) .appscms-tool .tool-top {
479
+ background-color: rgb(233, 107, 34);
480
+ }
481
+
482
+ #appscms-tools-section {
483
+ max-width: 900px;
484
+ padding-top: 50px;
485
+ }
486
+
487
+ .appscms-tool {
488
+ border-radius: 10px;
489
+ box-shadow: 2px 3px 7px 2px rgba(0, 0, 0, 0.158);
490
+ cursor: pointer;
491
+ height: 169px;
492
+ margin-bottom: 25px;
493
+ background-color: rgba(255, 255, 255, 0.7);
494
+ transition: all 0.2s ease;
495
+ }
496
+
497
+ .appscms-tool:hover {
498
+ transform: translate(0, -4px) scale(1.01);
499
+ box-shadow: 2px 5px 7px 2px rgba(0, 0, 0, 0.236);
500
+ }
501
+
502
+ .appscms-tool .tool-top {
503
+ background: #4b5cf4;
504
+ overflow: hidden;
505
+ height: calc(171px - 57px);
506
+ border-top-right-radius: 10px;
507
+ border-top-left-radius: 10px;
508
+ display: flex;
509
+ align-items: center;
510
+ transition: all 0.5s ease;
511
+ }
512
+
513
+ .appscms-tool .tool-top:hover {
514
+ transform: translate(0, 0px) scale(1.001);
515
+ animation: moveGradient 10s linear infinite;
516
+ filter: hue-rotate(15deg) saturate(125%) brightness(104%);
517
+ }
518
+ .appscms-tool .tool-top:active {
519
+ transform: translate(0, 0px) scale(1.003);
520
+ animation: moveGradient 10s linear infinite;
521
+ filter: hue-rotate(-15deg) saturate(105%) brightness(95%);
522
+ }
523
+
524
+ @keyframes moveGradient {
525
+ 0% {
526
+ background-position: 0% 50%;
527
+ }
528
+ 100% {
529
+ background-position: 100% 50%;
530
+ }
531
+ }
532
+ .appscms-tool .tool-top .tool-img {
533
+ padding: 0px;
534
+ margin-right: 21px;
535
+ background: rgba(255, 255, 255, 25%);
536
+ border-radius: 300px;
537
+ margin-left: 20px;
538
+ height: 58px;
539
+ width: 58px;
540
+ display: flex;
541
+ align-items: center;
542
+ border: 1px solid #ffffff12;
543
+ }
544
+
545
+ .appscms-tool .tool-top .tool-img img {
546
+ height: 34px;
547
+ width: 72px;
548
+ transition: filter 0.3s ease-in-out; /* Smooth transitions for transform and box-shadow */
549
+ }
550
+
551
+ .appscms-tool .tool-top .tool-img img:hover {
552
+ transform: scale(1.001); /* Slightly scale up the image on hover */
553
+ filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.355));
554
+ }
555
+
556
+ .appscms-tool .tool-text {
557
+ color: var(--white-color);
558
+ padding-right: 33px;
559
+ font-weight: 300;
560
+ font-size: 16px;
561
+ line-height: 20.57px;
562
+ }
563
+ .appscms-tool .tool-heading {
564
+ padding-top: 14px;
565
+ padding-bottom: 19px;
566
+ color: var(--dark-gray);
567
+ height: 57px;
568
+ font-weight: 500;
569
+ font-size: 17px;
570
+ text-align: center;
571
+ }
572
+ .text-primary {
573
+ font-size: 30px;
574
+ font-weight: 600;
575
+ }
576
+
577
+ .description {
578
+ font-size: 12px;
579
+ line-height: 0.2;
580
+ }
581
+
582
+ /* blog section */
583
+ .appscms-blogs {
584
+ border-radius: 10px;
585
+ padding-top: 20px;
586
+ background-color: rgba(255, 255, 255, 0.494);
587
+ }
588
+
589
+ .contenttool-img-wrap-blog{
590
+ padding: 14px;
591
+ }
592
+ .appscms-blog-cards {
593
+ box-shadow: 1px 2px 9px rgba(0, 0, 0, 0.16);
594
+ margin-bottom: 10px;
595
+ border-radius: 10px !important;
596
+ /* max-width: 340px; */
597
+ /* min-width: 300px; */
598
+
599
+ }
600
+ .extrapaddingforimg{
601
+ padding: 15px;
602
+ }
603
+ .card-title{
604
+ font-size: 16px;
605
+ }
606
+
607
+ .card-footer{
608
+ border-radius: 10px !important;
609
+ }
610
+
611
+ .post-read-more{
612
+ font-size: 13px;
613
+ }
614
+ .appscms-blog-cards img {
615
+ border-radius: 10px;
616
+ height: auto;
617
+ }
618
+ .card-body {
619
+ display: flex;
620
+ flex-direction: column;
621
+ }
622
+
623
+ @media (min-width: 768px) {
624
+ .appscms-h1 {
625
+ margin-top: 50px;
626
+ }
627
+ }
628
+
629
+ /* recent post blog heading */
630
+
631
+ /* author in blog */
632
+ .wrapfooter {
633
+ display: flex;
634
+ align-items: center;
635
+ margin-bottom: -0px;
636
+ }
637
+ .wrapfooter img {
638
+ width: 42px;
639
+ height: 42px;
640
+ border-radius: 50%;
641
+ }
642
+ .wrapfooter .author-meta {
643
+ padding: 0px 15px 0px 10px;
644
+ }
645
+ .wrapfooter .author-meta a {
646
+ font-size: 15px;
647
+ font-weight: 500;
648
+ color: #3e3e3e;
649
+ text-transform: capitalize;
650
+ text-decoration: none;
651
+ }
652
+ .post-date {
653
+ color: #878787;
654
+ font-size: 12px;
655
+ font-weight: 500;
656
+ display: block;
657
+ text-align: left;
658
+ }
659
+
660
+ /* footer */
661
+ #copyright-text {
662
+ font-size: 13px !important;
663
+ }
664
+ .footer-prducts-div-heading {
665
+ }
666
+
667
+ .appscms-product-footer {
668
+ background-color: #F0F5FA;
669
+ margin-top: 50px;
670
+ }
671
+ .appscms-footer-products {
672
+ opacity: 100%;
673
+ }
674
+
675
+ .footer-product-link {
676
+ font-size: 15px;
677
+ }
678
+ .appscms-footer-products a {
679
+ text-decoration: none;
680
+ color: #000;
681
+ }
682
+ /* footer i89 modal css */
683
+ .privacy-links-item {
684
+ font-stretch: 400;
685
+ font-weight: 400;
686
+ font-size: 16px;
687
+ line-height: 24px;
688
+ color: rgba(26, 26, 26, 1);
689
+ margin: 0 20px;
690
+ }
691
+ .privacy-links-item:last-child {
692
+ margin-right: 0;
693
+ }
694
+ .drop-down-btn {
695
+ cursor: pointer;
696
+ outline: 0px;
697
+ border: 0px;
698
+ width: auto;
699
+ overflow: visible;
700
+ display: flex;
701
+ -webkit-box-align: center;
702
+ align-items: center;
703
+ background-color: transparent;
704
+ transition: background-color 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
705
+ font-weight: 400;
706
+ font-size: 13px;
707
+ line-height: 24px;
708
+ color: rgb(26, 26, 26);
709
+ }
710
+ .language-drop-down-menu {
711
+ display: flex;
712
+ justify-content: space-between;
713
+ margin: 0;
714
+ padding: 0;
715
+ flex-wrap: wrap;
716
+ }
717
+ .language-drop-down-item {
718
+ list-style: none;
719
+ width: 50%;
720
+ padding: 10px 12px 0px 0px;
721
+ text-align: center;
722
+ font-size: 15px;
723
+ margin-bottom: 0;
724
+ }
725
+ .language-drop-down-item a:hover {
726
+ background: var(--secondary-color-3);
727
+ border-radius: 3px;
728
+ }
729
+ .language-drop-down-item a {
730
+ text-decoration: none;
731
+ display: flex;
732
+ width: 100%;
733
+ align-items: center;
734
+ padding: 9px 9px;
735
+ color: #1e1e1e;
736
+ font-size: 13px;
737
+ border-bottom: 1px solid rgb(224, 224, 224);
738
+ }
739
+
740
+ @media (max-width: 575.98px) {
741
+ #contenttool-line-top{
742
+ display:none;
743
+ }
744
+ body {
745
+ background: var(--secondary-color);
746
+ }
747
+ .appscms-h1,
748
+ .success-msg {
749
+ font-size: 30px;
750
+ font-weight: 799;
751
+ }
752
+ .appscms-h2 {
753
+ font-size: 12px;
754
+ font-weight: 400;
755
+ color: var(--mid-gray);
756
+ }
757
+ #appscms-tools-section {
758
+ margin-top: 50px;
759
+ padding-top: 10px;
760
+ }
761
+ /* category section */
762
+
763
+ .toolfilters {
764
+ font-size: 10px;
765
+ height: 30px;
766
+ padding: 3px;
767
+ }
768
+ .toolfilter {
769
+ margin: auto;
770
+ padding: 0px 15px;
771
+ }
772
+ /* search bar */
773
+ #appscms-searchbar {
774
+ border-radius: 50px;
775
+ padding: 0px;
776
+ font-size: 8px;
777
+ }
778
+ #searchbar-placeholder {
779
+ font-size: 12px;
780
+ }
781
+ .text-primary {
782
+ font-size: 20px;
783
+ font-weight: 600;
784
+ }
785
+
786
+ .description {
787
+ font-size: 12px;
788
+ line-height: 0.2;
789
+ }
790
+ .footer-product-link {
791
+ font-size: 12px;
792
+ }
793
+
794
+ /* recent post and blog section phone */
795
+ /* blog section */
796
+ .appscms-blogs {
797
+ border-radius: 10px;
798
+ padding-top: 20px;
799
+ background-color: rgba(255, 255, 255, 0.494);
800
+ }
801
+
802
+ .appscms-blog-cards {
803
+ box-shadow: rgba(0, 0, 0, 0.15);
804
+ margin-bottom: 20px;
805
+ border-radius: 10px;
806
+ /* max-width: 340px; */
807
+ /* min-width: 300px; */
808
+ }
809
+
810
+ .card-img-top{
811
+ border-radius: 10px;
812
+ }
813
+
814
+ .appscms-blog-cards img {
815
+ border-radius: 10px;
816
+ height: 180px;
817
+ }
818
+ .card-body {
819
+ display: flex;
820
+ flex-direction: column;
821
+ justify-content: space-between;
822
+ }
823
+
824
+ /* recent post blog heading */
825
+
826
+ /* author in blog */
827
+ .wrapfooter {
828
+ display: flex;
829
+ margin-bottom: -0px;
830
+ }
831
+
832
+ .wrapfooter img {
833
+ width: 42px;
834
+ height: 42px;
835
+ border-radius: 50%;
836
+ }
837
+ .wrapfooter .author-meta {
838
+ padding: 0px 15px 0px 10px;
839
+ }
840
+ .wrapfooter .author-meta a {
841
+ font-size: 15px;
842
+ font-weight: 500;
843
+ color: #3e3e3e;
844
+ text-transform: capitalize;
845
+ text-decoration: none;
846
+ }
847
+ .post-date {
848
+ color: #878787;
849
+ font-size: 12px;
850
+ font-weight: 500;
851
+ display: block;
852
+ text-align: left;
853
+ }
854
+ }
855
+ /* Small devices (tablets) */
856
+ @media (min-width: 576px) and (max-width: 767.98px) {
857
+ .toolfilters {
858
+ font-size: 10px;
859
+ height: 40px;
860
+ padding: 1px;
861
+ }
862
+ #searchbar-placeholder {
863
+ font-size: 14px;
864
+ }
865
+ #appscms-searchbar {
866
+ padding: 3px;
867
+ }
868
+ /*
869
+ toolfilter {
870
+ margin: auto;
871
+ padding: 0px 20px;
872
+ } */
873
+ }
874
+
875
+ /* Medium devices (desktops) */
876
+ @media (max-width: 768px) {
877
+ #appscms-tools-section-row {
878
+ gap: 15px;
879
+ justify-content: center;
880
+ margin-top: 35px;
881
+ }
882
+ .appscms-tool .tool-top .tool-img img {
883
+ border-radius: 0;
884
+ }
885
+
886
+ .appscms-tool .tool-top .tool-img {
887
+ justify-content: center;
888
+ background: unset;
889
+ border: 5px solid #ffffff08;
890
+ }
891
+ .appscms-tool {
892
+ box-shadow: none;
893
+ margin-bottom: 25px;
894
+ height: auto;
895
+ background-color: transparent;
896
+ display: flex;
897
+ flex-direction: column;
898
+ align-items: center;
899
+ }
900
+
901
+ .appscms-tool:hover {
902
+ box-shadow: unset;
903
+ }
904
+
905
+ .appscms-tool .tool-top {
906
+ background-color: transparent;
907
+ flex-direction: column;
908
+ justify-content: center;
909
+ border-radius: 10px;
910
+ height: 64px;
911
+ width: 64px;
912
+ border-radius: 21px;
913
+ }
914
+ .appscms-tool .tool-img {
915
+ padding: 0px !important;
916
+ }
917
+
918
+ .appscms-tool .tool-img img {
919
+ height: 38px !important;
920
+ width: 38px !important;
921
+ }
922
+
923
+ .appscms-tool .tool-text {
924
+ display: none;
925
+ }
926
+
927
+ .appscms-tool .tool-heading {
928
+ font-size: 12px;
929
+ line-height: 14.52px;
930
+ margin-top: 14px;
931
+ padding: 0px;
932
+ height: 15px;
933
+ font-weight: 400;
934
+ }
935
+
936
+ .appscms-tool-container {
937
+ /* margin: 0 auto; */
938
+ width: auto !important;
939
+ }
940
+ .appscms-tool-container:nth-child(even) .appscms-tool .tool-top {
941
+ background-color: transparent;
942
+ }
943
+ }
944
+ @media (min-width: 768px) and (max-width: 991.98px) {
945
+ .toolfilters {
946
+ font-size: 12px;
947
+ }
948
+ }
949
+
950
+ /* Large devices (desktops) */
951
+
952
+ @media (min-width: 992px) and (max-width: 1199.98px) {
953
+ /* Insert CSS code here */
954
+
955
+ }
956
+
957
+ /* Extra Large devices (large desktops) */
958
+ @media (min-width: 1200px) and (max-width: 1399.98px) {
959
+ /* Insert CSS code here */
960
+ }
961
+
962
+ /* Extra Extra Large devices (larger desktops) */
963
+ @media (min-width: 1400px) {
964
+ /* Insert CSS code here */
965
+ }
966
+
967
+ /* animations */
968
+
969
+ .appscms-product-footer li {
970
+ list-style: none;
971
+ }
972
+
973
+ .footer-product-link {
974
+ border-radius: 5px;
975
+ color: #5e5e5f;
976
+ display: block;
977
+ font-weight: 500;
978
+ font-size: 14px;
979
+ line-height: 19px;
980
+ padding: 15px 20px 14px 10px;
981
+ position: relative;
982
+ transition: none;
983
+ }
984
+ .footer-product-link:hover {
985
+ background-color: #f3f3f451;
986
+ color: #262628;
987
+ text-decoration: none;
988
+ }
989
+
990
+ .appscms-footer {
991
+ background-color: #F0F5FA;
992
+ padding: 44px 10px 10px 10px;
993
+ }
994
+
995
+ .appscms-footer-link {
996
+ list-style: none;
997
+ }
998
+
999
+ .appscms-footer-link a {
1000
+ color: #6b6b6b;
1001
+ display: block;
1002
+ margin-top: 18px;
1003
+ font-size: 14px;
1004
+ font-weight: 500;
1005
+ line-height: 18px;
1006
+ }
1007
+ .appscms-footer-link a:hover {
1008
+ color: var(--black-color);
1009
+ }
1010
+ .appscms-footer-category {
1011
+ font-size: 14px;
1012
+ padding-bottom: 12px;
1013
+ font-weight: 700;
1014
+ line-height: 12px;
1015
+ color: var(--mid-gray);
1016
+ list-style: none;
1017
+ }
1018
+
1019
+ .upload-from-drives {
1020
+ display: flex;
1021
+ gap: 20px;
1022
+ margin-top: 10px;
1023
+ }
1024
+ .upload-from-drives img {
1025
+ cursor: pointer;
1026
+ }
1027
+ #appscms-tools-section a {
1028
+ text-decoration: none;
1029
+ }
1030
+ .success-msg {
1031
+ text-align: center;
1032
+ margin: 30px 0px;
1033
+ color: var(--primary-color);
1034
+ }
1035
+ .go-back-block {
1036
+ display: flex;
1037
+ align-items: center;
1038
+ justify-content: center;
1039
+ margin: 30px 0px;
1040
+ }
1041
+ .go-back-block button {
1042
+ background-color: var(--primary-color);
1043
+ color: var(--white-color);
1044
+ border: none;
1045
+ border-radius: 10px;
1046
+ padding: 10px 15px;
1047
+ font-size: 15px;
1048
+ height: 48px;
1049
+ min-width: 212px;
1050
+ }
1051
+ .go-back-block button i {
1052
+ color: var(--black-color);
1053
+ background-color: var(--white-color);
1054
+ padding: 8px;
1055
+ border-radius: 50%;
1056
+ font-size: 12px;
1057
+ }
1058
+ #rating-img {
1059
+ height: 1px;
1060
+ width: 1px;
1061
+ filter: brightness();
1062
+ filter: brightness(100);
1063
+ position: absolute;
1064
+ }
1065
+ .rating-tool {
1066
+ display: flex;
1067
+ justify-content: center;
1068
+ align-items: center;
1069
+ background-color: rgb(252, 252, 252);
1070
+ border-radius: 50px;
1071
+ height: 70px;
1072
+ margin: 40px 0px;
1073
+ }
1074
+ #rating {
1075
+ font-size: 25px;
1076
+ font-weight: 600;
1077
+ }
1078
+ .rating-text {
1079
+ font-size: 16px;
1080
+ }
1081
+
1082
+ .rating-stars {
1083
+ padding: 0px 10px;
1084
+ display: flex;
1085
+ justify-content: space-between;
1086
+ gap: 4px;
1087
+ }
1088
+
1089
+ .rating-stars i {
1090
+ font-size: 20px;
1091
+ }
1092
+ .download-social-share {
1093
+ background: #d0d3ed;
1094
+ padding: 40px 0px;
1095
+ display: flex;
1096
+ justify-content: space-between;
1097
+ }
1098
+ .share-icons {
1099
+ display: flex;
1100
+ gap: 30px;
1101
+ justify-content: end;
1102
+ }
1103
+ .download-social-share a {
1104
+ color: #000;
1105
+ font-size: 17px;
1106
+ height: 40px;
1107
+ width: 40px;
1108
+ display: flex;
1109
+ align-items: center;
1110
+ justify-content: center;
1111
+ padding: 10px 10px;
1112
+ border: 2px solid var(--black-color);
1113
+ border-radius: 50%;
1114
+ }
1115
+ .appscms-heading {
1116
+ font-size: 25px;
1117
+ text-align: center;
1118
+ font-weight: 500;
1119
+ }
1120
+ .website-img {
1121
+ height: 50px;
1122
+ width: 50px;
1123
+ }
1124
+ .website-showcases {
1125
+ padding: 50px 0px;
1126
+ }
1127
+ .website-showcase {
1128
+ display: flex;
1129
+ flex-direction: column;
1130
+ justify-content: center;
1131
+ align-items: center;
1132
+ margin-bottom: 25px;
1133
+ overflow: hidden;
1134
+ }
1135
+ .website-showcase a {
1136
+ color: var(--black-color);
1137
+ font-size: 15px;
1138
+ margin-top: 10px;
1139
+ }
1140
+ .feature-showcase {
1141
+ padding: 50px 0px;
1142
+ }
1143
+ .feature-showcase-div {
1144
+ display: flex;
1145
+ flex-direction: column;
1146
+ justify-content: center;
1147
+ align-items: center;
1148
+ margin-bottom: 25px;
1149
+ }
1150
+ .feature-showcase-div img {
1151
+ height: 45px;
1152
+ width: 45px;
1153
+ }
1154
+ .feature-showcase a span {
1155
+ margin-top: 15px;
1156
+ font-size: 14px;
1157
+ }
1158
+ .feature-showcase a {
1159
+ color: var(--black-color);
1160
+ }
1161
+
1162
+ .video-h1,
1163
+ .audio-h1 {
1164
+ font-weight: 600;
1165
+ font-size: 53px;
1166
+ }
1167
+
1168
+ .video-h2,
1169
+ .audio-h2 {
1170
+ font-size: 22px;
1171
+ }
1172
+ .shareModal {
1173
+ display: none;
1174
+ position: fixed;
1175
+ z-index: 100000000000;
1176
+ left: 0;
1177
+ top: 0;
1178
+ width: 100%;
1179
+ height: 100%;
1180
+ overflow: auto;
1181
+ background-color: rgba(0, 0, 0, 0.5);
1182
+ }
1183
+
1184
+ .shareModal .share-modal-content {
1185
+ background-color: #fefefe;
1186
+ margin: 15% auto;
1187
+ padding: 20px;
1188
+ /* border: 1px solid #888; */
1189
+ width: 70%;
1190
+ height: 200px;
1191
+ text-align: center;
1192
+ }
1193
+
1194
+ .shareModal .close-share-modal {
1195
+ color: #aaa;
1196
+ float: right;
1197
+ display: none;
1198
+ font-size: 28px;
1199
+ font-weight: bold;
1200
+ }
1201
+ .shareModal h5 {
1202
+ color: #000;
1203
+ padding-top: 10px;
1204
+ font-weight: 700;
1205
+ }
1206
+ .shareModal .close-share-modal:hover,
1207
+ .shareModal .close-share-modal:focus {
1208
+ color: black;
1209
+ text-decoration: none;
1210
+ cursor: pointer;
1211
+ }
1212
+
1213
+ .share-modal-social {
1214
+ display: flex;
1215
+ gap: 30px;
1216
+ height: 100%;
1217
+ padding-bottom: 60px;
1218
+ align-items: center;
1219
+ justify-content: center;
1220
+ }
1221
+ .share-modal-social a {
1222
+ color: #000;
1223
+ }
1224
+ .share-modal-social a i {
1225
+ font-size: 30px;
1226
+ }
1227
+ .authors-list a {
1228
+ color: var(--dark-gray);
1229
+ }
1230
+ .featurePageAuthor {
1231
+ display: flex;
1232
+ flex-direction: column;
1233
+ width: 100%;
1234
+ justify-content: center;
1235
+ }
1236
+
1237
+ .featurePageAuthor .author-meta {
1238
+ width: 500px;
1239
+ margin: 0 auto;
1240
+ padding-bottom: 5rem;
1241
+ }
1242
+
1243
+ .featurePageAuthor .author-meta .authorName {
1244
+ font-size: 20px;
1245
+ padding: 1rem 0px;
1246
+ font-weight: 900;
1247
+ text-align: center;
1248
+ }
1249
+
1250
+ .featurePageAuthor .author-img {
1251
+ width: 100px;
1252
+ height: 100px;
1253
+ border-radius: 100%;
1254
+ }
1255
+
1256
+ .featurePageAuthor .author_bio {
1257
+ font-size: 16px;
1258
+ }
1259
+
1260
+ @media (max-width: 768px) {
1261
+ .authors-list {
1262
+ padding: 25px;
1263
+ }
1264
+
1265
+ .featurePageAuthor .author-meta {
1266
+ width: 100%;
1267
+ }
1268
+ }
1269
+ .contributor {
1270
+ width: 100px;
1271
+ }
1272
+ .contributor .contributor-name {
1273
+ font-size: 13px;
1274
+ margin-top: 8px;
1275
+ text-transform: capitalize;
1276
+ }
1277
+ .infographics_section {
1278
+ width: 100%;
1279
+ padding: 50px 0px 50px 0px;
1280
+ }
1281
+
1282
+ .infographics_section .infographics-desc {
1283
+ position: absolute;
1284
+ color: #000;
1285
+ bottom: 0;
1286
+ }
1287
+
1288
+ .infographics_section .slider {
1289
+ position: relative;
1290
+ max-width: 40rem;
1291
+ height: 26.625rem;
1292
+ margin: 0 auto;
1293
+ overflow: hidden;
1294
+ }
1295
+
1296
+ .infographics_section .slide {
1297
+ position: absolute;
1298
+ top: 0;
1299
+ width: 100%;
1300
+ height: 26.625rem;
1301
+ display: flex;
1302
+ align-items: center;
1303
+ justify-content: center;
1304
+ transition: transform 1s;
1305
+ }
1306
+
1307
+ .infographics_section .slide img {
1308
+ width: 200px;
1309
+ height: 100%;
1310
+ transition-duration: 0.27s;
1311
+ /* object-fit: contain; */
1312
+ }
1313
+
1314
+ .infographics_section button {
1315
+ background: none;
1316
+ border: none;
1317
+ }
1318
+
1319
+ .infographics_section button .fas {
1320
+ color: #000;
1321
+ }
1322
+
1323
+ .infographics_section .btn-slide {
1324
+ position: absolute;
1325
+ top: 50%;
1326
+ z-index: 10;
1327
+ height: 5.5rem;
1328
+ width: 5.5rem;
1329
+ cursor: pointer;
1330
+ }
1331
+
1332
+ .infographics_section .prev {
1333
+ left: 3rem;
1334
+ transform: translate(-50%, -50%);
1335
+ }
1336
+
1337
+ .infographics_section .next {
1338
+ right: 3rem;
1339
+ transform: translate(50%, -50%);
1340
+ }
1341
+
1342
+ .infographics_section .dots-container {
1343
+ display: flex;
1344
+ justify-content: center;
1345
+ align-items: center;
1346
+ position: relative;
1347
+ }
1348
+
1349
+ .infographics_section .dot {
1350
+ width: 25px;
1351
+ height: 5px;
1352
+ margin: 15px 5px;
1353
+ border-radius: 0.5rem;
1354
+ background: rgba(39, 39, 39, 0.5);
1355
+ cursor: pointer;
1356
+ }
1357
+
1358
+ .infographics_section .dot.active {
1359
+ background: #272727;
1360
+ }
1361
+ .slide img {
1362
+ transition-duration: 0.27s;
1363
+ }
1364
+ .slide img:hover {
1365
+ transform: scale(1.1);
1366
+ box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.12);
1367
+ }
1368
+ .no-result-found-msg {
1369
+ font-size: 20px;
1370
+ color: var(--black-light);
1371
+ text-align: center;
1372
+ width: 100%;
1373
+ font-weight: 500;
1374
+ }
1375
+ .close-nav-ham {
1376
+ display: none;
1377
+ }
1378
+ .active-lang {
1379
+ background: #f4f5ff;
1380
+ border-radius: 3px;
1381
+ }