//testimonial section css .testimonial-content-wrap{ position: relative; .testimonial-tb-shape{ position: absolute; &.shape-top{ top: -60px; right: 20%; } &.shape-bottom{ bottom: -88px; right: 50%; } } // testimonial quote .testimonial-shape{ &:before{ content: ""; position: absolute; top: 60px; left: 20px; width: 99%; height: 69%; background: $warning; -webkit-transform: rotate(-6deg); transform: rotate(-6deg); z-index: -1; border-radius: 4px; } .testimonial-quote-wrap{ background: $accent; padding: 30px 40px; z-index: 4; margin-top: 30px; border-radius: 4px; .author-info{ .author-img { border-radius: 4px; border: 4px solid $white; width: 100px; position: absolute; top: 0; } .media-body{ position: relative; left: 120px; } i{ font-size: 40px; } } } } } //testimonial two style .single-review-wrap{ border-radius: 20px; .review-body{ p{ height: 106px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } } @media (min-width: 320px) and (max-width: 768px){ .review-body{ p{ height: 96px; } } } .review-top{ span.ratting-color{ font-size: 16px; font-weight: $font-weight-bold; color: $warning; } } .review-author{ margin-left: 15px; .author-avatar{ width: 64px; height: 64px; line-height: 64px; margin-right: 10px; position: relative; span{ background-color: $accent; width: 32px; height: 32px; display: flex; align-content: center; justify-content: center; color: $white; line-height: 55px; border-radius: 100%; font-size: 48px; position: absolute; top: 0; left: -16px; } } } } @media (min-width: 320px) and (max-width: 1199px){ .testimonial-content-wrap .testimonial-tb-shape.shape-top, .testimonial-content-wrap .testimonial-tb-shape.shape-bottom{ display: none; } } @media (min-width: 320px) and (max-width: 991px){ .author-info i, .testimonial-shape:before{ display: none; } }