/*** ============================================= Testimonial Style1 Area Css ============================================= ***/ .testimonial-style1-area { position: relative; display: block; padding: 120px 0 120px; background: #ffffff; z-index: 10; } .testimonial-style1-area .shape { position: absolute; top: -30px; right: -30px; z-index: 2; } .testimonial-style1-area .shape img { opacity: 0.08; } .testimonial-style1-content { position: relative; display: block; z-index: 1; } .testimonial-style1-content .bg-color { position: absolute; top: -120px; left: 120px; bottom: -120px; right: -9999999px; background: var(--thm-primary); z-index: -1; } .single-testimonial-style1 { position: relative; display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; z-index: 11; } .single-testimonial-style1 .img-holder { position: relative; display: block; max-width: 480px; width: 100%; overflow: hidden; } .single-testimonial-style1 .img-holder:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--thm-primary); opacity: 0; transition-delay: .1s; transition-timing-function: ease-in-out; transition-duration: .7s; transition-property: all; z-index: 1; } .single-testimonial-style1:hover .img-holder:before { opacity: 0.70; } .single-testimonial-style1 .img-holder img { width: 100%; } .single-testimonial-style1:hover .img-holder img { transform: scale(1.1) rotate(2deg); } .single-testimonial-style1 .overlay-content { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: flex; align-items: center; justify-content: center; z-index: 3; } .single-testimonial-style1 .overlay-content .quote-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: var(--thm-base); border-radius: 50%; } .single-testimonial-style1 .overlay-content .quote-icon img { position: relative; display: inline-block; width: auto; } .single-testimonial-style1 .review-box { position: absolute; bottom: 0; right: 0; width: 140px; height: 50px; background: #ffffff; display: flex; align-items: center; justify-content: center; z-index: 3; } .single-testimonial-style1 .text-holder { position: relative; display: block; max-width: 570px; width: 100%; overflow: hidden; } .single-testimonial-style1 .text-holder .sec-title--style2 { padding-bottom: 38px; } .single-testimonial-style1 .text-holder .text { position: relative; display: block; } .single-testimonial-style1 .text-holder .text p { color: #9ea8db; font-size: 24px; line-height: 40px; margin: 0; } .single-testimonial-style1 .text-holder .text h3 { color: #ffffff; font-size: 18px; line-height: 24px; font-weight: 700; margin: 33px 0 0; } .single-testimonial-style1 .text-holder .text h3 span { color: #9ea8db; font-size: 16px; font-weight: 400; } .testimonial-carousel.owl-nav-style-one.owl-theme .owl-nav { position: absolute; bottom: 0; right: 0; z-index: 999; } /*** ============================================= Testimonial Page Css ============================================= ***/ .testimonial-page { position: relative; display: block; background: #ffffff; padding: 120px 0 70px; z-index: 10; } .testimonial-style2__single { position: relative; display: block; margin-bottom: 50px; } .testimonial-style2__single .img-holder { position: relative; display: block; width: 170px; height: 170px; overflow: hidden; margin: 0 auto 30px; border-radius: 50%; background-color: var(--thm-base); } .testimonial-style2__single .img-holder img { width: 100%; transition: all 500ms linear; transition-delay: 0.2s; } .testimonial-style2__single:hover .img-holder img { transform: scale(1.1) rotate(2deg); opacity: 0.20; transition: all 500ms linear; transition-delay: 0.1s; } .testimonial-style2__single .text-holder { position: relative; display: block; background: #ffffff; padding: 41px 30px 40px; box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07); border-top-left-radius: 60px; border-bottom-right-radius: 60px; transition: all 200ms linear; transition-delay: 0.1s; } .testimonial-style2__single:hover .text-holder { background: var(--thm-base); } .testimonial-style2__single .text-holder::before { position: absolute; top: -20px; left: 0; right: 0; width: 60px; margin: 0 auto; border-bottom: 20px solid #ffffff; border-left: 30px solid transparent; border-right: 30px solid transparent; transition: all 200ms linear; transition-delay: 0.1s; content: ""; } .testimonial-style2__single:hover .text-holder::before { border-bottom: 20px solid var(--thm-base); } .testimonial-style2__single .text-holder p { font-size: 18px; line-height: 32px; margin: 0 0 21px; transition: all 200ms linear; transition-delay: 0.1s; } .testimonial-style2__single:hover .text-holder p { color: #ffffff; } .testimonial-style2__single .text-holder .border-box { position: relative; display: block; width: 220px; height: 1px; background: #f2f3fa; margin: 0 auto; } .testimonial-style2__single .text-holder .border-box:before { content: ""; position: absolute; top: -5px; left: 0; right: 0; width: 11px; height: 11px; border-radius: 50%; margin: 0 auto; background: #ffffff; border: 1px solid var(--thm-base); } .testimonial-style2__single .text-holder .client-info { position: relative; display: block; margin-top: 23px; } .testimonial-style2__single .text-holder .client-info h3 { color: var(--thm-base); font-size: 20px; line-height: 28px; font-weight: 700; font-family: var(--thm-font); transition: all 200ms linear; transition-delay: 0.1s; } .testimonial-style2__single:hover .text-holder .client-info h3 { color: #ffffff; } .testimonial-style2__single .text-holder .client-info span { color: var(--thm-primary); font-size: 18px; line-height: 24px; font-weight: 700; transition: all 200ms linear; transition-delay: 0.1s; } .testimonial-style2__single:hover .text-holder .client-info span { color: var(--thm-primary); }