PluginProbe ʕ •ᴥ•ʔ
Spider Elements – Premium Elementor Widgets & Addons Library / 1.1.0
Spider Elements – Premium Elementor Widgets & Addons Library v1.1.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 / scss / _Testimonial.scss
spider-elements / assets / scss Last commit date
admin 2 years ago _Accordion.scss 2 years ago _Alerts_box.scss 2 years ago _Animated_Headline.scss 2 years ago _Animation.scss 2 years ago _Before_after.scss 2 years ago _Buttons.scss 2 years ago _Cheat_sheet.scss 2 years ago _Common.scss 2 years ago _Counter.scss 2 years ago _Fullscreen_Slider.scss 2 years ago _Icon_box.scss 2 years ago _Instagram.scss 2 years ago _Integration.scss 2 years ago _List_item.scss 2 years ago _Mixins.scss 2 years ago _Pricing_Table.scss 2 years ago _Pricing_Table_Switcher.scss 2 years ago _Skill_Showcase.scss 2 years ago _Tabs.scss 2 years ago _Testimonial.scss 2 years ago _Timeline.scss 2 years ago _Variables.scss 2 years ago _Video.scss 2 years ago _Video_popup.scss 2 years ago _blog_grid.scss 2 years ago _framework.scss 2 years ago _prefix.scss 2 years ago _team.scss 2 years ago admin.css 2 years ago admin.css.map 2 years ago admin.scss 2 years ago main.css 2 years ago main.css.map 2 years ago main.scss 2 years ago
_Testimonial.scss
1564 lines
1 /*============ Start doc_feedback_area css ==========*/
2 .doc_feedback_info {
3 position: relative;
4 }
5
6 .slider_nav {
7 .arrow {
8 width: 25px;
9 height: 2px;
10 background: #989dad;
11 transition: all 0.3s ease-in-out;
12 display: block;
13 margin-top: 12px;
14
15 &:before,
16 &:after {
17 content: "";
18 position: absolute;
19 width: 15px;
20 height: 2px;
21 left: -2px;
22 background-color: #bdb4b4;
23 transition: all 0.3s ease-in-out;
24 }
25 }
26 .prev,
27 .next {
28 height: 25px;
29 width: 27px;
30 position: absolute;
31 top: 50%;
32 transform: translateY(-50%);
33 transition: all 0.3s ease-in-out;
34 cursor: pointer;
35
36 &:hover {
37 width: 40px;
38
39 .arrow {
40 width: 40px;
41 background: #d92c0a;
42
43 &:before,
44 &:after {
45 background: #d92c0a;
46 }
47 }
48 }
49 }
50
51 .prev {
52 left: 0;
53
54 .arrow {
55 &:before {
56 top: 17px;
57 transform: rotate(45deg);
58 }
59
60 &:after {
61 top: 7px;
62 transform: rotate(-45deg);
63 }
64 }
65
66 &:hover {
67 left: -20px;
68 }
69 }
70
71 .next {
72 right: 0;
73
74 .arrow {
75 &:before {
76 transform: rotate(-45deg);
77 right: -1px;
78 left: auto;
79 bottom: 6px;
80 }
81
82 &:after {
83 transform: rotate(45deg);
84 right: -1px;
85 left: auto;
86 top: 6px;
87 }
88 }
89
90 &:hover {
91 right: -20px;
92 }
93 }
94 }
95
96 .doc_feedback_slider {
97 max-width: 770px;
98 margin: 0 auto 0;
99 text-align: center;
100
101 .item {
102 .author_img {
103 border-radius: 50%;
104 width: 60px;
105 height: 60px;
106 overflow: hidden;
107 margin: 0 auto 43px;
108 }
109
110 p {
111 font-size: 18px;
112 color: #fff;
113 line-height: 30px;
114 margin-bottom: 38px;
115 font-weight: 300;
116 }
117
118 h5 {
119 font-size: 20px;
120 font-weight: 500;
121 color: #fff;
122 }
123
124 h6 {
125 font-size: 16px;
126 color: #989dad;
127 font-weight: 400;
128 margin-bottom: 0;
129 }
130 }
131 }
132
133 /*============ End doc_feedback_area css ==========*/
134
135 /*============ Start doc_action_area css ==========*/
136 .doc_action_area {
137 position: relative;
138 z-index: 1;
139 padding: 93px 0;
140
141 .overlay_bg {
142 background-image: linear-gradient(
143 180deg,
144 rgba(4, 133, 161, 0.6) 0%,
145 rgba(29, 39, 70, 0.6) 100%
146 );
147 }
148
149 .action_btn {
150 border: 1px solid var(--spe_brand_color);
151
152 &:hover {
153 background: transparent;
154 border-color: #fff;
155 color: #fff;
156 }
157 }
158 }
159
160 .action_text {
161 h2 {
162 color: #fff;
163 font-size: 40px;
164 font-weight: 500;
165 }
166
167 p {
168 font-size: 18px;
169 line-height: 28px;
170 color: #b4b9c8;
171 margin-bottom: 0;
172 }
173 }
174
175 /*============ End doc_action_area css ==========*/
176
177 /*============= spider_testimonial_area css ================*/
178 .doc_testimonial_slider {
179 padding-right: 100px;
180
181 .item {
182 padding-left: 15px;
183 position: relative;
184 padding-top: 10px;
185
186 &:before {
187 content: "";
188 font-weight: 400;
189 font-size: 150px;
190 color: #4c4cf1;
191 opacity: 0.1;
192 position: absolute;
193 left: -5px;
194 width: 38px;
195 height: 38px;
196 line-height: 130px;
197 top: 0;
198 z-index: 1;
199 }
200
201 h3 {
202 font-size: 34px;
203 line-height: 52px;
204 font-weight: 400;
205 margin-bottom: 20px;
206 margin-top: 0;
207 }
208
209 .name {
210 font-size: 14px;
211 font-weight: 700;
212 color: var(--black_500);
213 margin-bottom: 20px;
214 }
215 }
216 }
217
218 .doc_testimonial_slider {
219 padding-right: 100px;
220
221 .item {
222 padding-left: 15px;
223 position: relative;
224 padding-top: 10px;
225
226 &:before {
227 content: "";
228 font-weight: 400;
229 font-size: 150px;
230 color: #4c4cf1;
231 opacity: 0.1;
232 position: absolute;
233 left: -5px;
234 width: 38px;
235 height: 38px;
236 line-height: 130px;
237 top: 0;
238 z-index: 1;
239 }
240
241 h3 {
242 font-size: 34px;
243 line-height: 52px;
244 font-weight: 400;
245 margin-bottom: 20px;
246 margin-top: 0;
247 }
248
249 .name {
250 font-size: 14px;
251 font-weight: 700;
252 color: var(--black_500);
253 margin-bottom: 20px;
254
255 h5 {
256 font-size: 20px;
257 margin-bottom: 10px;
258 margin-top: 0;
259 text-transform: capitalize;
260 }
261
262 span {
263 font-weight: 400;
264 }
265 }
266
267 .sign {
268 display: inline-block;
269 }
270 }
271
272 .slick-dots {
273 position: relative;
274 bottom: 0;
275 text-align: left;
276 margin-top: 30px;
277 padding-left: 15px;
278
279 li {
280 width: auto;
281 height: auto;
282
283 button {
284 width: 8px;
285 height: 8px;
286 border-radius: 50%;
287 background: #dbdbfc;
288 transition: all 0.2s;
289
290 &:before {
291 display: none;
292 }
293 }
294
295 & :nth-child(even) {
296 button {
297 background: #a5a5f8;
298 }
299 }
300
301 &.slick-active {
302 button {
303 background: #4c4cf1;
304 }
305 }
306 }
307 }
308
309 .action_text {
310 h2 {
311 color: #fff;
312 font-size: 40px;
313 font-weight: 500;
314 }
315
316 p {
317 font-size: 18px;
318 line-height: 28px;
319 color: #b4b9c8;
320 margin-bottom: 0;
321 }
322 }
323 }
324
325 .doc_img_slider {
326 .item {
327 text-align: center;
328 position: relative;
329 padding-bottom: 25px;
330 z-index: 1;
331
332 img {
333 display: inline-block;
334 border-radius: 20px;
335 }
336
337 .dot {
338 border-radius: 0;
339 position: absolute;
340 left: 60px;
341 bottom: 0;
342 z-index: -1;
343 }
344
345 .round {
346 border-radius: 50%;
347 position: absolute;
348 z-index: -1;
349
350 &.one {
351 width: 150px;
352 height: 150px;
353 right: 60px;
354 top: 60px;
355 background-image: linear-gradient(
356 50deg,
357 rgb(87, 54, 254) 0%,
358 rgb(253, 64, 110) 100%
359 );
360 opacity: 0.1;
361 }
362
363 &.two {
364 width: 280px;
365 height: 280px;
366 right: 0;
367 top: 50%;
368 margin-top: -140px;
369 background-image: linear-gradient(
370 50deg,
371 rgb(87, 54, 254) 0%,
372 rgb(253, 64, 110) 100%
373 );
374 }
375 }
376
377 &.slick-active {
378 .one {
379 animation: zoomIn 0.8s linear both 0.4s;
380 }
381
382 .two {
383 animation: zoomIn 0.8s linear both 0.5s;
384 }
385 }
386 }
387 }
388
389 .slick-arrow.slick-hidden {
390 display: none;
391 }
392
393 /*============= Allfolio Testimonial Area CSS ================*/
394 // testimonial style 3 css
395 .testimonial_area_nine {
396 .navigation {
397 display: flex;
398 column-gap: 5px;
399 .swiper-button-prev,
400 .swiper-button-next {
401 width: 50px;
402 height: 50px;
403 background: #46454763;
404 color: #141414;
405 border-radius: 50%;
406 top: 65%;
407 transition: all 0.3s;
408 opacity: 0;
409
410 &:after {
411 font-size: 15px;
412 }
413
414 &:hover {
415 background: #e86a42;
416 color: #fff;
417 }
418 }
419
420 .swiper-button-prev {
421 left: -130px;
422 @media (max-width: 560px) {
423 position: relative;
424 left: 0 !important;
425 right: 0 !important;
426 opacity: 1 !important;
427 }
428 }
429
430 .swiper-button-next {
431 right: -130px;
432 @media (max-width: 560px) {
433 position: relative;
434 left: 0 !important;
435 right: 0 !important;
436 opacity: 1 !important;
437 }
438 }
439 }
440
441 &:hover {
442 .swiper-button-prev {
443 left: -100px;
444 opacity: 1;
445 @media (max-width: 1440px) {
446 left: -40px;
447 }
448 }
449
450 .swiper-button-next {
451 right: -100px;
452 opacity: 1;
453 @media (max-width: 1440px) {
454 right: -40px;
455 }
456 }
457 }
458 }
459
460 .testimonial-slider-inner {
461 overflow: hidden;
462
463 .testimonial-item {
464 display: flex;
465 border: 2px solid rgba(239, 72, 83, 0.1);
466 padding: 50px 110px 50px 50px;
467 border-radius: 8px;
468 margin-top: 280px;
469 align-items: flex-start;
470 margin-bottom: 78px;
471 flex-direction: row-reverse;
472 transition: 0.3s;
473 box-shadow: unset;
474 @media (max-width: 1200px) {
475 padding: 50px 30px;
476 }
477 @media (max-width: 991px) {
478 flex-direction: column;
479 }
480 @media (max-width: 560px) {
481 padding: 50px 24px;
482 }
483 &:hover{
484 box-shadow: unset !important;
485 }
486 p {
487 font-size: 26px;
488 font-weight: 500;
489 color: #e6e6e6;
490 letter-spacing: 0.01em;
491 font-family: "IBM Plex Sans", sans-serif;
492 margin-bottom: 30px;
493 line-height: 1.5;
494 margin-top: 30px;
495 @media (max-width: 1200px) {
496 font-size: 20px;
497 }
498 }
499
500 .quote-img-top {
501 margin-top: -150px;
502 width: fit-content;
503 @media (max-width: 991px) {
504 margin-top: 20px;
505 }
506 }
507
508 .quote-img-bottom {
509 position: absolute;
510 right: 50px;
511 bottom: 0px;
512 }
513 }
514
515 .testimonial-content {
516 flex: 1;
517 }
518
519 .author-info {
520 .author-name {
521 font-size: 18px;
522 color: #e8e6e6;
523 font-weight: 600;
524 letter-spacing: 0.01em;
525 font-family: var(--ibm);
526 margin-bottom: 0px;
527 }
528
529 .author-position {
530 font-size: 18px;
531 font-weight: 400;
532 color: #ccccce;
533 letter-spacing: 0.01em;
534 }
535 }
536
537 .author-image {
538 padding: 14px;
539 border-radius: 8px;
540 background: #2e2d31;
541 margin-left: 40px;
542 margin-top: -330px;
543 @media (max-width: 991px) {
544 margin-left: 0;
545 }
546 img {
547 border-radius: 8px;
548 width: revert-layer;
549 }
550 }
551 }
552
553 /*============ testimonial slider 4 ===========*/
554 .testimonial-area-4 {
555 overflow: hidden;
556
557 .section-tag {
558 padding-top: 0;
559
560 .heading {
561 padding-left: 0;
562 color: #b9b9ba;
563 }
564
565 .p {
566 padding-left: 0;
567 color: #b9b9ba;
568 }
569
570 .title-text {
571 padding-left: 13px;
572 }
573 }
574
575 :is(.swiper-button-next, .swiper-button-prev) {
576 --swiper-navigation-size: 15px;
577 --swiper-navigation-color: #9d9ca0;
578 -webkit-transition: 0.3s ease-out;
579 transition: 0.3s ease-out;
580 }
581
582 :is(.swiper-button-next, .swiper-button-prev)::before {
583 content: "";
584 top: 6px;
585 position: absolute;
586 width: 34px;
587 height: 3px;
588 background: #9d9ca0;
589 border-radius: 20px;
590 -webkit-transition: 0.3s ease-out;
591 transition: 0.3s ease-out;
592 }
593
594 :is(.swiper-button-next, .swiper-button-prev)::after {
595 font-family: "Font Awesome 5 Free";
596 font-weight: 900;
597 }
598
599 :is(.swiper-button-next, .swiper-button-prev):hover::before {
600 width: 43px;
601 }
602
603 :is(.swiper-button-next, .swiper-rtl .swiper-button-prev) {
604 right: -50px;
605 }
606
607 :is(.swiper-button-next, .swiper-rtl .swiper-button-prev)::after {
608 content: "\f054";
609 }
610
611 :is(.swiper-button-next, .swiper-rtl .swiper-button-prev)::before {
612 left: auto;
613 right: 3px;
614 }
615
616 :is(.swiper-button-next, .swiper-rtl .swiper-button-prev):hover {
617 right: -60px;
618 }
619
620 :is(.swiper-button-prev, .swiper-rtl .swiper-button-next) {
621 left: -55px;
622 }
623
624 :is(.swiper-button-prev, .swiper-rtl .swiper-button-next)::after {
625 content: "\f053";
626 }
627
628 :is(.swiper-button-prev, .swiper-rtl .swiper-button-next)::before {
629 left: 3px;
630 }
631
632 :is(.swiper-button-prev, .swiper-rtl .swiper-button-next):hover {
633 left: -65px;
634 }
635 }
636
637 :is(.testimonial-slide-4) {
638 .testimonial-slider-img {
639 img {
640 width: 100%;
641 }
642 }
643 }
644
645 @media screen and (min-width: 1200px) {
646 :is(.testimonial-slide-4) .testimonial-slider-img img {
647 width: auto;
648 }
649 }
650
651 :is(.testimonial-slide-4) .testimonial-content {
652 padding-top: 30px;
653 }
654
655 @media screen and (min-width: 768px) {
656 :is(.testimonial-slide-4) .testimonial-content {
657 padding-top: 0;
658 }
659 }
660
661 @media screen and (min-width: 1441px) {
662 :is(.testimonial-slide-4) .testimonial-content {
663 padding-right: 50px;
664 padding-left: 20px;
665 }
666 }
667
668 :is(.testimonial-slide-4) .testimonial-content .section-tag .heading {
669 padding-left: 0;
670 }
671
672 :is(.testimonial-slide-4) .testimonial-content p {
673 font-size: 16px;
674 line-height: 2;
675 font-style: italic;
676 padding-left: 0;
677 margin-bottom: 0;
678 }
679
680 @media screen and (min-width: 768px) {
681 :is(.testimonial-slide-4) .testimonial-content p {
682 font-size: 20px;
683 line-height: 35px;
684 }
685 }
686
687 :is(.testimonial-slide-4) .testimonial-content hr {
688 background: #e6e6e6;
689 width: 100%;
690 height: 1px;
691 margin: 0 0;
692 padding: 0;
693 border: none;
694 border-radius: 0;
695 opacity: 1;
696 margin-top: 2.8125rem;
697 }
698
699 :is(.testimonial-slide-4) .testimonial-content .testimonial-author-info {
700 display: flex;
701 align-items: center;
702 justify-content: space-between;
703 margin-top: 0.625rem;
704 }
705
706 :is(.testimonial-slide-4) .testimonial-content .author h5 {
707 margin-bottom: 0;
708 }
709
710 /*============ testimonial slider 6 ===========*/
711 .feedback_section_one {
712 .slick-arrow-one {
713 position: absolute;
714 right: 0;
715 top: -80px;
716 }
717 }
718
719 .feedback-slider-one {
720 margin-left: -15px;
721 margin-right: 15px;
722
723 .item {
724 margin-left: 15px;
725 margin-right: 15px;
726 }
727 }
728
729 .feedback-block-one {
730 background: #f9ffe1;
731 border: 2px solid #000;
732 border-radius: 30px;
733 padding: 40px 40px 45px;
734 transition: all 0.25s linear;
735
736 &:hover {
737 background: #d2f34c;
738 }
739
740 .logo {
741 height: 50px;
742
743 img {
744 max-height: 100%;
745 }
746 }
747
748 h3 {
749 font-size: 36px;
750 line-height: 1.3888em;
751 color: #000;
752 margin-top: 50px;
753 margin-bottom: 50px;
754 }
755
756 .name {
757 font-size: 16px;
758 margin-bottom: 0;
759
760 span {
761 font-weight: 500;
762 }
763 }
764
765 .review {
766 border-top: 2px solid #000;
767 padding-top: 40px;
768 @media (max-width: 1024px) {
769 margin-top: 30px !important;
770 padding-top: 20px !important;
771 }
772
773 .text-md {
774 font-size: 20px;
775 font-weight: 500;
776 }
777 }
778
779 .star-rating {
780 font-size: 15px;
781 font-family: eicons;
782 display: inline-block;
783
784 i {
785 font-style: normal;
786 position: relative;
787 display: inline-block;
788 color: #0000007a;
789
790 &::before {
791 content: "\e934";
792 display: block;
793 font-size: inherit;
794 font-family: inherit;
795 position: absolute;
796 overflow: hidden;
797 color: #000;
798 top: 0;
799 left: 0;
800 }
801 }
802
803 .elementor-star-empty:before {
804 content: none;
805 }
806
807 .elementor-star-1:before {
808 width: 10%;
809 }
810
811 .elementor-star-2:before {
812 width: 20%;
813 }
814
815 .elementor-star-3:before {
816 width: 30%;
817 }
818
819 .elementor-star-4:before {
820 width: 40%;
821 }
822
823 .elementor-star-5:before {
824 width: 50%;
825 }
826
827 .elementor-star-6:before {
828 width: 60%;
829 }
830
831 .elementor-star-7:before {
832 width: 70%;
833 }
834
835 .elementor-star-8:before {
836 width: 80%;
837 }
838
839 .elementor-star-9:before {
840 width: 90%;
841 }
842 }
843
844 &.color-two {
845 background: #755146;
846 border: none;
847
848 &:hover {
849 background: #249f47;
850 }
851
852 .review {
853 border-top: 1px solid #fff;
854
855 ul li a {
856 color: #fff;
857 }
858 }
859 }
860 }
861
862 /*========= feedback-slider-two css =============*/
863 .feedback-section-two {
864 .slick-dots {
865 margin: 40px 0 0 15px;
866 position: relative;
867 bottom: 0;
868 text-align: left;
869
870 li {
871 height: auto;
872 width: auto;
873 margin: 0px;
874
875 button {
876 text-indent: -50000px;
877 width: 8px;
878 height: 8px;
879 border-radius: 50%;
880 margin: 0 5px;
881 background: #e4e4e4;
882 transition: all 0.3s ease-in-out;
883 padding: 0px;
884 }
885
886 &.slick-active button {
887 background: #00bf58;
888 }
889 }
890 }
891 }
892
893 .feedback-slider-two {
894 .item {
895 margin: 50px 25px;
896 }
897 }
898
899 .feedback-block-two {
900 box-shadow: 0px 20px 35px rgba(0, 16, 34, 0.03);
901 background: #ffffff;
902 border-radius: 10px;
903 padding: 38px 45px 40px;
904 border: 0px;
905
906 &:hover {
907 background: #fff;
908 }
909
910 h3 {
911 font-size: 20px;
912 line-height: 2em;
913 color: #212529;
914 font-weight: 500;
915 margin-top: 30px;
916 margin-bottom: 45px;
917 }
918
919 .review {
920 border: 0px;
921 padding-top: 0;
922
923 .text-md {
924 font-size: 28px;
925 color: #00bf58;
926 line-height: 1;
927 }
928
929 .star-rating {
930 letter-spacing: 7px;
931
932 i {
933 &:before {
934 color: #ffcc4a;
935 }
936 }
937 }
938 }
939
940 .block-footer {
941 padding-top: 35px;
942 border-top: 1px solid #000;
943
944 .author-img {
945 width: 50px;
946 height: 50px;
947 }
948
949 .name {
950 margin-bottom: 0;
951 font-size: 18px;
952 font-weight: 500;
953 color: #212529;
954 line-height: 1;
955 }
956
957 span {
958 font-size: 16px;
959 }
960
961 .quote-icon {
962 width: 40px;
963 }
964 }
965 }
966
967 // feedback-section-five css
968
969 .feedback-section-five {
970 .slick-arrow-one {
971 position: absolute;
972 right: 0;
973 top: -80px;
974
975 li {
976 color: #fff;
977
978 &:hover {
979 background: #00bf58;
980 color: #fff;
981 }
982 }
983 }
984
985 .feedback-slider-one {
986 margin-left: -35px;
987 margin-right: -35px;
988
989 .item {
990 margin: 0 35px;
991 //@media (max-width: 1399px){
992 // margin: 0 15px;
993 //}
994 }
995 }
996 }
997
998 .feedback-block-three {
999 position: relative;
1000 padding: 45px 55px 40px;
1001 background: #fff;
1002 border-radius: 10px;
1003 border: 0;
1004
1005 .quote-icon {
1006 position: absolute;
1007 top: 58px;
1008 right: 55px;
1009 width: 41px;
1010 }
1011
1012 .review {
1013 border: 0;
1014 padding-top: 0;
1015
1016 .text-md {
1017 font-size: 28px;
1018 color: #00bf58;
1019 }
1020 }
1021
1022 .star-rating i {
1023 letter-spacing: 7px;
1024
1025 &:before {
1026 color: #ffcc4a;
1027 }
1028 }
1029
1030 h3 {
1031 font-size: 24px;
1032 line-height: 2em;
1033 font-weight: 400;
1034 color: #212529;
1035 }
1036
1037 .name {
1038 margin-bottom: 0;
1039 font-size: 20px;
1040 color: #212529;
1041 font-weight: 500;
1042
1043 span {
1044 opacity: 0.5;
1045 font-weight: 400;
1046 padding-left: 5px;
1047 }
1048 }
1049
1050 .author-img {
1051 width: 60px;
1052 height: 60px;
1053 }
1054
1055 &:hover {
1056 background: #fff;
1057 }
1058 }
1059
1060 /*==== testimonial 8 css ====*/
1061 #feedBack_carousel {
1062 position: relative;
1063
1064 .feedback_slider {
1065 max-width: 950px;
1066 margin: 0 auto;
1067 overflow: hidden;
1068 }
1069
1070 .carousel-inner {
1071 p {
1072 font-size: 36px;
1073 line-height: 1.888em;
1074 color: #000;
1075 margin-bottom: 55px;
1076 }
1077 }
1078
1079 .name {
1080 font-size: 22px;
1081 color: #000;
1082 font-weight: 500;
1083
1084 &:before {
1085 content: "";
1086 position: absolute;
1087 width: 30px;
1088 height: 2px;
1089 background: #000;
1090 left: -45px;
1091 top: 16px;
1092 }
1093
1094 span {
1095 font-weight: 400;
1096 }
1097 }
1098
1099 .carousel-indicators {
1100 position: static;
1101 width: 100%;
1102 margin: 60px 0 0;
1103 display: flex;
1104 justify-content: center;
1105
1106 button {
1107 width: 80px;
1108 height: 80px;
1109 border-radius: 50%;
1110 border: 3px solid transparent;
1111 opacity: 1;
1112 margin: 0 10px;
1113 transition: all 0.2s linear;
1114 text-indent: 0;
1115
1116 &:focus,
1117 &:hover {
1118 outline: none;
1119 border-color: #29503d;
1120 background: transparent;
1121 }
1122
1123 &.active {
1124 border-color: #29503d;
1125 }
1126 }
1127 }
1128
1129 .carousel-btn {
1130 top: 65px;
1131 width: 50px;
1132 height: 50px;
1133 border-radius: 50%;
1134 border: 1px solid rgba($color: #000000, $alpha: 0.15);
1135 opacity: 1;
1136 line-height: 48px;
1137 text-align: center;
1138 font-size: 30px;
1139 color: #000;
1140 padding: 0px;
1141 transition: all 0.3s linear;
1142 position: absolute;
1143
1144 &:hover,
1145 &:focus {
1146 border-color: #29503d;
1147 background: #29503d;
1148 color: #fff;
1149 }
1150
1151 &.carousel-control-next {
1152 right: 0;
1153 left: auto;
1154 }
1155 }
1156 }
1157
1158 // testimonial 10 css
1159 // FeedBack Section Four
1160 .feedback-section-four {
1161 @media (max-width:1024px) {
1162 .ezd-grid {
1163 display: block;
1164 }
1165 }
1166 .bg-wrapper {
1167 background: #1ea243;
1168 padding: 125px 150px 165px 110px;
1169 @media (min-width: 1200px) and (max-width: 1399px) {
1170 padding: 80px 100px 130px 70px;
1171 }
1172 @media (max-width: 1199px) {
1173 padding: 60px 70px 100px 35px;
1174 }
1175 @media (max-width: 991px) {
1176 padding: 45px 15px 100px;
1177 }
1178
1179 .icon {
1180 width: 80px;
1181 height: 80px;
1182 background: rgba($color: #fff, $alpha: 0.16);
1183 }
1184
1185 p {
1186 font-size: 40px;
1187 line-height: 1.7em;
1188 color: #fff;
1189 margin: 50px 0 95px;
1190 @media (min-width: 1200px) and (max-width: 1399px) {
1191 font-size: 35px;
1192 margin-bottom: 70px;
1193 }
1194 @media (min-width: 992px) and (max-width: 1199px) {
1195 font-size: 25px;
1196 margin-bottom: 70px;
1197 }
1198 @media (max-width: 991px) {
1199 font-size: 25px;
1200 margin: 30px 0 40px;
1201 }
1202 }
1203
1204 .name {
1205 font-size: 20px;
1206 }
1207
1208 .slider-arrows {
1209 position: absolute;
1210 left: 0;
1211 bottom: 0;
1212 margin-bottom: 0;
1213 list-style: none;
1214 @media (max-width: 991px) {
1215 right: 0;
1216 padding: 0;
1217 }
1218
1219 li {
1220 width: 60px;
1221 height: 60px;
1222 font-size: 22px;
1223 text-align: center;
1224 line-height: 65px;
1225 color: #fff;
1226 cursor: pointer;
1227 transition: all 0.2s linear;
1228 border-left: 1px solid rgba($color: #fff, $alpha: 0.14);
1229 background: rgba($color: #fff, $alpha: 0.13);
1230
1231 &:hover {
1232 background: #fff;
1233 color: #000;
1234 }
1235 }
1236 }
1237 }
1238 }
1239
1240 .feedback-section-four {
1241 .slider-wrapper {
1242
1243 position: absolute;
1244 width: 79vw;
1245 right: -40vw;
1246 bottom: 9%;
1247 @media (min-width: 1921px) {
1248 right: -28vw;
1249 width: 55vw;
1250 }
1251 @media (max-width: 1600px) {
1252 right: -30vw;
1253 }
1254 @media (max-width: 1400px) {
1255 right: -12vw;
1256 }
1257 @media (min-width: 992px) and (max-width: 1199px) {
1258 width: 75vw;
1259 bottom: 10%;
1260 right: -22vw;
1261 }
1262 @media (min-width: 1200px) and (max-width: 1399px) {
1263 right: -28vw;
1264 }
1265 @media (max-width: 991px) {
1266 width: 100%;
1267 position: static;
1268 }
1269
1270 .item {
1271 margin: 0 15px;
1272 }
1273
1274 .slick-dots {
1275 position: absolute;
1276 margin: 0;
1277 padding: 0;
1278 bottom: -14%;
1279 left: 20%;
1280 width: auto;
1281 @media (max-width: 1024px) {
1282 position: relative;
1283 margin-top: 15px;
1284 left: 0;
1285 bottom: 0;
1286 display: block;
1287 }
1288
1289 li {
1290 width: auto;
1291 height: auto;
1292 margin: 0 auto;
1293
1294 button {
1295 text-indent: -50000px;
1296 width: 8px;
1297 height: 8px;
1298 border-radius: 50%;
1299 margin: 0 5px;
1300 background: #e4e4e4;
1301 transition: all 0.3s ease-in-out;
1302 padding: 0px;
1303 }
1304
1305 &.slick-active {
1306 button {
1307 background: #00bf58;
1308 }
1309 }
1310 }
1311 }
1312 }
1313
1314
1315 .col-lg-6 {
1316 @media (min-width: 1400px) {
1317 flex: 0 0 auto;
1318 width: 58.33333333% !important;
1319 }
1320 @media (max-width: 1024px) {
1321 width: 100%;
1322 max-width: 100%;
1323 padding-left: 15px;
1324 padding-right: 15px;
1325 margin-bottom: 40px;
1326 }
1327 @media (min-width: 992px) {
1328 flex: 0 0 auto;
1329 width: 50%;
1330 }
1331 //@media (min-width: 992px) {
1332 // order: -1 !important;
1333 //}
1334 }
1335 }
1336
1337 // testimonial 11 css
1338 .testimonial-area {
1339 background-position: center;
1340 background-size: cover;
1341 position: relative;
1342 z-index: 1;
1343 color: #000000;
1344
1345 .bg-shape {
1346 .shape {
1347 position: absolute;
1348 left: 0;
1349 top: 0;
1350 z-index: -1;
1351 }
1352 }
1353
1354 span {
1355 font-family: "IBM Plex Sans", sans-serif;
1356 font-size: 16px;
1357 font-weight: 500;
1358 line-height: 16px;
1359 letter-spacing: 1px;
1360 text-transform: capitalize;
1361 color: #cecece;
1362 }
1363 .se_review_content{
1364 font-size: 36px;
1365 line-height: 1.5;
1366 margin: 0;
1367 padding: 0;
1368 }
1369 .se_title {
1370 margin-top: 70px;
1371 font-size: 18px;
1372 font-weight: 500;
1373 letter-spacing: 0;
1374 line-height: 1.5;
1375 display: block;
1376 margin-bottom: 0;
1377 color: #17161a;
1378 text-transform: capitalize;
1379 }
1380 .review-text {
1381 font-size: 36px;
1382 font-style: italic;
1383 font-weight: 400;
1384 line-height: 54px;
1385 letter-spacing: 1px;
1386 margin-bottom: 55px;
1387 margin-top: 50px;
1388 }
1389
1390 .author-name {
1391 display: flex;
1392 align-items: center;
1393 gap: 10px;
1394 margin-top: 30px;
1395 .author-img {
1396 border-radius: 10px;
1397 max-width: 100%;
1398 margin-left: auto;
1399 margin-left: 0;
1400 width: 30px;
1401 height: 30px;
1402 line-height: 30px;
1403 text-align: center;
1404 border-radius: 50%;
1405 margin-right: inherit;
1406 }
1407 }
1408
1409 .author-info {
1410 h5 {
1411 font-family: "IBM Plex Sans", sans-serif;
1412 font-size: 20px;
1413 font-weight: 500;
1414 line-height: 30px;
1415 color: #fff;
1416 margin-bottom: 2px;
1417 }
1418
1419 p {
1420 margin-bottom: 0;
1421 color: #b9b9ba;
1422 }
1423 }
1424
1425 .custom_slider_nav {
1426 position: absolute;
1427 bottom: 0;
1428 left: 40%;
1429 transform: translateX(-50%, 0);
1430
1431 .slide_info {
1432 display: flex;
1433 flex-direction: row;
1434 }
1435
1436 .total_slide {
1437 color: rgba(255, 255, 255, 0.7);
1438 }
1439 }
1440 }
1441
1442 .testimonial-slider {
1443 .arrow {
1444 width: 45px;
1445 height: 2px;
1446 background: #989dad;
1447 transition: all 0.3s ease-in-out;
1448 display: block;
1449 margin-top: 12px;
1450 position: relative;
1451
1452 &::before,
1453 &::after {
1454 content: "";
1455 position: absolute;
1456 width: 15px;
1457 height: 2px;
1458 left: -2px;
1459 background-color: #bdb4b4;
1460 transition: all 0.3s ease-in-out;
1461 }
1462
1463 &::before {
1464 transform: rotate(45deg);
1465 right: -1px;
1466 left: auto;
1467 bottom: 6px;
1468 }
1469
1470 &::after {
1471 transform: rotate(-45deg);
1472 right: -1px;
1473 left: auto;
1474 top: 6px;
1475 }
1476 }
1477
1478 .next {
1479 height: 25px;
1480 width: 27px;
1481 position: absolute;
1482 top: 50%;
1483 transform: translateY(-50%);
1484 transition: all 0.3s ease-in-out;
1485 right: -50px;
1486 cursor: pointer;
1487
1488 &:hover {
1489 right: -50px;
1490
1491 .arrow {
1492 width: 70px;
1493 }
1494 }
1495 }
1496 }
1497
1498 .testimonial-area {
1499 .testimonial-slider {
1500 .slick-prev.slick-arrow {
1501 display: none !important;
1502 }
1503 }
1504 }
1505
1506 .carousel {
1507 width: 100%;
1508 margin: 0 auto;
1509 overflow: hidden;
1510 }
1511
1512 .carousel-inner {
1513 display: flex;
1514 transition: transform 0.5s ease-in-out;
1515 }
1516
1517 .carousel-item {
1518 flex: 0 0 100%;
1519 // max-width: 950px;
1520 // margin: 0 auto;
1521 // overflow: hidden;
1522 }
1523
1524 .carousel img {
1525 width: 100%;
1526 height: auto;
1527 }
1528
1529 .testimonial-item {
1530 transition: 0.3s;
1531 background: var(--white);
1532 box-shadow: 0 5px 15px -3px rgba(131, 146, 167, 0.25);
1533 border-radius: 8px;
1534 padding: 40px;
1535 margin-bottom: 70px;
1536 transition: 0.3s ease-out;
1537 &:hover{
1538 box-shadow: 0 30px 60px -15px rgba(131, 146, 167, 0.3) !important;
1539 }
1540 }
1541
1542 // .carousel-control-prev,
1543 // .carousel-control-next {
1544 // width: 40px;
1545 // height: 40px;
1546 // background-color: #333;
1547 // text-align: center;
1548 // border-radius: 50%;
1549 // line-height: 40px;
1550 // color: #fff;
1551 // position: absolute;
1552 // top: 50%;
1553 // transform: translateY(-50%);
1554 // cursor: pointer;
1555 // }
1556
1557 // .carousel-control-prev {
1558 // left: 0;
1559 // }
1560
1561 // .carousel-control-next {
1562 // right: 0;
1563 // }
1564