.testimonials-section { overflow: hidden; h1, h2, h3 { @extend .headline-lg; text-transform: uppercase; text-align: center; margin-bottom: 2rem; } .testimonials { padding: 0 2rem; position: relative; .slick-arrow { width: 60px; height: 55px; z-index: 99; img { @extend .change-black-to-red; width: 60px; height: 55px; } &.slick-next { right: 4rem; &:before { content: "" } } &.slick-prev { left: 4rem; &:before { content: "" } } } .slick-dots { bottom: 3rem; li { button { &:before { font-size: 20px; } } &.slick-active { button { &:before { color: $c-red; } } } } } .testimonial { background: $c-white; border-radius: 15px; box-shadow: 0 0 30px rgba($c-black, 0.1); margin: 1rem 3rem; width: calc(100% - 3rem) !important; transform: translateX(-1.5rem); .stars { background-image: url(/wp-content/themes/mccans-theme/assets/stars.svg); display: block; height: 40px; width: 0; margin: 2rem auto; &.stars-5 { width: 213px; } &.stars-4 { width: 170px; } &.stars-3 { width: 130px; } &.stars-2 { width: 90px; } &.stars-1 { width: 50px; } } .quote { text-align: center; font-size: 25px; line-height: 45px; padding: 0 4rem; margin-bottom: 3rem; } .person-details { display: flex; gap: 1rem; justify-content: center; align-items: center; padding-bottom: 8rem; font-size: 26px; line-height: 35px; .image-wrapper { width: 105px; height: 105px; border-radius: 50%; overflow: hidden; img { width: 100%; } } p { margin-bottom: 0; &.name { font-weight: bold; } } } } } }