/*---*\
Testimonials
\*---*/

.testimonials {
    --testimonials-surface-bg: var(--color-white);
    --testimonials-heading-color: var(--color-heading);
    --testimonials-body-color: var(--color-paragraph);
    --testimonials-accent-color: var(--color-secondary);
}

.testimonials.bg-white {
    --testimonials-surface-bg: var(--color-surface-light);
}

.testimonials .container-fluid {
    max-width: 1600px;
    padding-left: 21px;
    padding-right: 21px;
}

.testimonials__container {
    --color-text-body: var(--color-paragraph);
    --color-text-heading: var(--color-heading);
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-dark);
    --color-quote-bg: var(--color-surface-light);
    background-color: var(--testimonials-surface-bg);
    border-radius: 32px;
    padding-bottom: 32px;
    --sub-heading-bg: var(--color-white);
    --sub-heading-border: var(--color-surface-muted);
    --sub-heading-color: var(--color-secondary);
}

.testimonials.bg-white .testimonials__container {
    --color-quote-bg: var(--color-white);
}

.testimonials__container .btn:not(.btn-secondary):not(.btn-tertiary):not(.btn-primary-orange) {
    background-color: var(--color-secondary);
    color: var(--color-text-inverse);
}

.testimonials__container .btn:not(.btn-secondary):not(.btn-tertiary):not(.btn-primary-orange):hover,
.testimonials__container .btn:not(.btn-secondary):not(.btn-tertiary):not(.btn-primary-orange):focus-visible {
    background-color: var(--color-secondary-dark);
    color: var(--color-text-inverse);
}

.testimonials__container .btn-secondary {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px var(--color-secondary);
    color: var(--color-secondary);
}

.testimonials__container .btn-secondary:hover,
.testimonials__container .btn-secondary:focus-visible {
    background-color: var(--color-secondary-dark);
    box-shadow: inset 0 0 0 1px var(--color-secondary-dark);
    color: var(--color-text-inverse);
}

.testimonials__container .btn-tertiary {
    background: transparent;
    color: var(--color-primary);
}

.testimonials__container .btn-tertiary:hover,
.testimonials__container .btn-tertiary:focus-visible {
    background-color: transparent;
    color: var(--color-primary-dark);
}

.testimonials__container .btn-primary-orange {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.testimonials__container .btn-primary-orange:hover,
.testimonials__container .btn-primary-orange:focus-visible {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
}

.testimonials__slider .slick-list {
    transition: height 0.55s cubic-bezier(0.25, 1, 0.3, 1);
}

.testimonials__slider .slick-slide {
    height: auto;
    vertical-align: top;
}

.testimonials__card {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 32px 24px 0;
}

.testimonials__top {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.testimonials__content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.testimonials__intro,
.testimonials__content {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: var(--testimonials-heading-color);
    }
}

.testimonials__intro--orange {
    --testimonials-heading-color: var(--color-primary);
}

.testimonials__intro {
    color: var(--testimonials-body-color);
    font-family: var(--font-body);
    font-size: var(--font-size-body-large);
    line-height: var(--line-height-body-large);
}

.testimonials__intro > :last-child {
    margin-bottom: 0;
}

.testimonials__intro p:not(.sub-heading) {
    color: var(--testimonials-body-color);
}

.testimonials__intro blockquote p {
    color: inherit;
}

.testimonials__container blockquote::after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="96" viewBox="0 0 128 96" fill="none"><path d="M0 32L64 32C81.6731 32 96 46.3269 96 64L96 96L0 96L0 32Z" fill="white"/><path d="M0 8.72727C0 21.5804 10.4196 32 23.2727 32H32H0V0V8.72727Z" fill="white"/><path d="M96 72.7273C96 85.5804 106.42 96 119.273 96H128H96V64V72.7273Z" fill="white"/></svg>');
}

.testimonials.bg-white .testimonials__container blockquote::after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="96" viewBox="0 0 128 96" fill="none"><path d="M0 32L64 32C81.6731 32 96 46.3269 96 64L96 96L0 96L0 32Z" fill="%23F3F6FB"/><path d="M0 8.72727C0 21.5804 10.4196 32 23.2727 32H32H0V0V8.72727Z" fill="%23F3F6FB"/><path d="M96 72.7273C96 85.5804 106.42 96 119.273 96H128H96V64V72.7273Z" fill="%23F3F6FB"/></svg>');
}

.testimonials__quote {
    color: var(--color-text-heading);
    font-family: var(--font-body);
    font-size: var(--font-size-body-large);
    line-height: var(--line-height-body-large);
    margin: 0;
}

.testimonials__quote [data-simplebar] {
    display: block;
    max-height: 240px;
    width: 100%;
}

.testimonials__quote [data-simplebar].simplebar-scrollable-y {
    padding-right: 16px;
}

.testimonials__quote .simplebar-wrapper,
.testimonials__quote .simplebar-mask,
.testimonials__quote .simplebar-offset,
.testimonials__quote .simplebar-content-wrapper {
    width: 100%;
}

.testimonials__quote .simplebar-track.simplebar-vertical {
    background-color: transparent;
    right: 0;
    width: 12px;
}

.testimonials__quote [data-simplebar].simplebar-scrollable-y .simplebar-track.simplebar-vertical {
    visibility: visible;
}

.testimonials__quote .simplebar-track.simplebar-vertical::before {
    background-color: rgb(28 53 94 / 25%);
    border-radius: 20px;
    bottom: 3px;
    content: '';
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 3px;
    width: 3px;
}

.testimonials__quote .simplebar-scrollbar::before {
    background-color: rgb(28 53 94 / 70%);
    border-radius: 20px;
    left: 0;
    opacity: 1;
    right: 0;
}

.testimonials__quote .simplebar-scrollbar.simplebar-visible::before {
    opacity: 1;
}

.testimonials__quote .simplebar-content::before {
    content: "“";
    display: inline;
}

.testimonials__quote .simplebar-content::after {
    content: "”";
    display: inline;
}

.testimonials__author {
    align-items: center;
    display: flex;
    gap: 10px;
}

.testimonials__author-image {
    border-radius: 50%;
    display: block;
    height: 78px;
    -o-object-fit: cover;
       object-fit: cover;
    width: 78px;
}

.testimonials__author-image--placeholder {
    background-color: var(--color-surface-muted);
    color: var(--color-heading);
    display: block;
    flex-shrink: 0;
    overflow: hidden;
}

.testimonials__author-image--placeholder svg {
    display: block;
    height: 100%;
    width: 100%;
}

.testimonials__author-image--placeholder .testimonials__author-avatar-bg {
    color: var(--color-surface-muted);
}

.testimonials__author-image--placeholder .testimonials__author-avatar-fg {
    color: rgb(28 53 94 / 70%);
}

.testimonials__author-text h3 {
    color: var(--testimonials-heading-color);
    font-family: var(--font-heading);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-heading);
    margin: 0;
}

.testimonials__author-text p {
    color: var(--testimonials-body-color);
    font-family: var(--font-body);
    font-size: var(--font-size-body-large);
    line-height: var(--line-height-body-large);
    margin: 0;
}

.testimonials__media {
    border-radius: 16px;
    display: none;
    overflow: hidden;
    position: relative;
    width: 100%;
}

/* View-all CTA overlays this overflow:hidden media; drop the global button lift/shadow so it is not clipped. */
.testimonials__media .btn:hover,
.testimonials__media .btn:focus-visible {
    box-shadow: none;
    transform: none;
}

.testimonials__media img {
    display: block;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -webkit-transform: scale(1) translate3d(0, 0, 0);
            transform: scale(1) translate3d(0, 0, 0);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    width: 100%;
}

.testimonials__media.is-media-in img {
    -webkit-animation: testimonials-media-in 0.9s cubic-bezier(0.25, 1, 0.3, 1) both;
            animation: testimonials-media-in 0.9s cubic-bezier(0.25, 1, 0.3, 1) both;
}

.testimonials__media.is-media-in.is-media-from-prev img {
    -webkit-animation-name: testimonials-media-in-prev;
            animation-name: testimonials-media-in-prev;
}

.testimonials__media-overlay-wrap {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: end;
    align-items: end;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.testimonials__media.is-media-in .testimonials__media-overlay-wrap {
    -webkit-animation: testimonials-media-overlay-in 0.55s cubic-bezier(0.25, 1, 0.3, 1) 0.28s both;
            animation: testimonials-media-overlay-in 0.55s cubic-bezier(0.25, 1, 0.3, 1) 0.28s both;
}

@-webkit-keyframes testimonials-media-in {
    from {
        -webkit-transform: scale(1.12) translate3d(6%, 0, 0);
                transform: scale(1.12) translate3d(6%, 0, 0);
    }

    to {
        -webkit-transform: scale(1) translate3d(0, 0, 0);
                transform: scale(1) translate3d(0, 0, 0);
    }
}

@keyframes testimonials-media-in {
    from {
        -webkit-transform: scale(1.12) translate3d(6%, 0, 0);
                transform: scale(1.12) translate3d(6%, 0, 0);
    }

    to {
        -webkit-transform: scale(1) translate3d(0, 0, 0);
                transform: scale(1) translate3d(0, 0, 0);
    }
}

@-webkit-keyframes testimonials-media-in-prev {
    from {
        -webkit-transform: scale(1.12) translate3d(-6%, 0, 0);
                transform: scale(1.12) translate3d(-6%, 0, 0);
    }

    to {
        -webkit-transform: scale(1) translate3d(0, 0, 0);
                transform: scale(1) translate3d(0, 0, 0);
    }
}

@keyframes testimonials-media-in-prev {
    from {
        -webkit-transform: scale(1.12) translate3d(-6%, 0, 0);
                transform: scale(1.12) translate3d(-6%, 0, 0);
    }

    to {
        -webkit-transform: scale(1) translate3d(0, 0, 0);
                transform: scale(1) translate3d(0, 0, 0);
    }
}

@-webkit-keyframes testimonials-media-overlay-in {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 12px, 0);
                transform: translate3d(0, 12px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
}

@keyframes testimonials-media-overlay-in {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 12px, 0);
                transform: translate3d(0, 12px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .testimonials__media.is-media-in img,
    .testimonials__media.is-media-in.is-media-from-prev img,
    .testimonials__media.is-media-in .testimonials__media-overlay-wrap {
        -webkit-animation: none;
                animation: none;
    }
}

.testimonials__media-overlay {
    align-items: flex-end;
    background-color: var(--testimonials-surface-bg);
    display: flex;
    justify-content: flex-end;
    padding: 16px 0 0 16px;
    border-radius: 16px 0 0 0;
}

.testimonials__media-overlay-wrap::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M32 8.72727C32 21.5804 21.5804 32 8.72727 32H0H32V0V8.72727Z" fill="%23FFFFFF"/></svg>');
    height: 32px;
    width: 32px;
}

.testimonials__media-overlay-wrap::after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M32 8.72727C32 21.5804 21.5804 32 8.72727 32H0H32V0V8.72727Z" fill="%23FFFFFF"/></svg>');
    height: 32px;
    width: 32px;
    position: absolute;
    top: -32px;
}

.testimonials.bg-white .testimonials__media-overlay-wrap::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M32 8.72727C32 21.5804 21.5804 32 8.72727 32H0H32V0V8.72727Z" fill="%23F3F6FB"/></svg>');
}

.testimonials.bg-white .testimonials__media-overlay-wrap::after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path d="M32 8.72727C32 21.5804 21.5804 32 8.72727 32H0H32V0V8.72727Z" fill="%23F3F6FB"/></svg>');
}

.testimonials__all-btn {
    margin: 0;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    border: none;
    border-radius: 4px 4px 16px 4px;
}

.testimonials__all-btn--mobile {
    display: inline-flex;
    border-radius: 4px;
}

.testimonials__divider {
    border: 0;
    border-top: 1px solid var(--color-surface-muted);
    margin: 0;
    width: 100%;
}

.testimonials__team {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.testimonials__team-title {
    color: var(--testimonials-heading-color);
    font-family: var(--font-heading);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-heading);
    margin: 0;
    max-width: 193px;
}

.testimonials__team-tags {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.testimonials__team-tags li {
    margin: 0;
    padding: 0;
}

.testimonials__team-tags li::before {
    content: none;
}

.testimonials__team-tag {
    align-items: center;
    background-color: var(--color-surface-light-alt);
    border-radius: 50px;
    color: var(--testimonials-accent-color);
    display: inline-flex;
    gap: 8px;
    padding: 4px 16px 4px 4px;
    text-decoration: none;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.testimonials__team-tag--alt {
    background-color: var(--color-surface-warm);
}

.testimonials__team-tag--accent {
    background-color: rgb(192 64 32 / 8%);
}

.testimonials__team-tag img {
    border-radius: 50%;
    display: block;
    height: 36px;
    -o-object-fit: cover;
       object-fit: cover;
    width: 36px;
}

.testimonials__team-tag span {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    line-height: var(--line-height-body);
}

.testimonials__pagination {
    align-items: center;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-top: 32px;
    width: 100%;
    padding: 0 32px;
}

.testimonials__arrow {
    background: transparent;
    border: 0;
    color: var(--testimonials-accent-color);
    cursor: pointer;
    display: inline-flex;
    height: 40px;
    padding: 0;
    width: 40px;
}

.testimonials__arrow svg path {
    fill: currentColor;
    transition: fill 0.35s cubic-bezier(0.25, 1, 0.3, 1);
}

.testimonials__arrow:hover,
.testimonials__arrow:focus-visible {
    color: var(--border-color-soft);
}

.testimonials__dots {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

.testimonials__dots .slick-dots {
    align-items: center;
    background-color: var(--color-surface-light-alt);
    border-radius: 50px;
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 100%;
}

.testimonials__dots .slick-dots li {
    background-color: transparent;
    border-radius: 50px;
    display: flex;
    flex: 1 1 0;
    height: 8px;
    margin: 0;
    padding: 0;
    -webkit-transform-origin: center;
            transform-origin: center;
    transition: background-color 0.35s cubic-bezier(0.25, 1, 0.3, 1),
        opacity 0.35s cubic-bezier(0.25, 1, 0.3, 1),
        -webkit-transform 0.35s cubic-bezier(0.25, 1, 0.3, 1);
    transition: background-color 0.35s cubic-bezier(0.25, 1, 0.3, 1),
        transform 0.35s cubic-bezier(0.25, 1, 0.3, 1),
        opacity 0.35s cubic-bezier(0.25, 1, 0.3, 1);
    transition: background-color 0.35s cubic-bezier(0.25, 1, 0.3, 1),
        transform 0.35s cubic-bezier(0.25, 1, 0.3, 1),
        opacity 0.35s cubic-bezier(0.25, 1, 0.3, 1),
        -webkit-transform 0.35s cubic-bezier(0.25, 1, 0.3, 1);
    width: auto;
}

.testimonials__dots .slick-dots li.slick-active {
    -webkit-animation: testimonials-slider-dot-active 0.35s cubic-bezier(0.25, 1, 0.3, 1);
            animation: testimonials-slider-dot-active 0.35s cubic-bezier(0.25, 1, 0.3, 1);
    background-color: var(--border-color-soft);
}

@-webkit-keyframes testimonials-slider-dot-active {
    from {
        opacity: 0.7;
        -webkit-transform: scaleX(0.85);
                transform: scaleX(0.85);
    }

    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
                transform: scaleX(1);
    }
}

@keyframes testimonials-slider-dot-active {
    from {
        opacity: 0.7;
        -webkit-transform: scaleX(0.85);
                transform: scaleX(0.85);
    }

    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
                transform: scaleX(1);
    }
}

.testimonials__dots .slick-dots button {
    background: transparent;
    border: 0;
    display: block;
    font-size: 0;
    height: 8px;
    line-height: 0;
    padding: 0;
    width: 100%;
}

.testimonials__dots .slick-dots button::before {
    content: none;
}

.testimonials__arrow.slick-disabled {
    cursor: not-allowed;
    opacity: 0.35;
}

.testimonials a:focus-visible,
.testimonials button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .testimonials .container-fluid {
        padding-left: 52px;
        padding-right: 52px;
    }

    .testimonials__card {
        padding: 32px 32px 0;
    }

    .testimonials__media {
        display: block;
        height: 346px;
    }

    .testimonials__all-btn--mobile {
        display: none;
    }

    .testimonials__team {
        align-items: center;
        flex-direction: row;
    }

    .testimonials__team-tags {
        flex: 1 1 auto;
        flex-direction: row;
        flex-wrap: wrap;
    }

}

@media (min-width: 1200px) {
    .testimonials__top {
        flex-direction: row;
        gap: 32px;
    }

    .testimonials__content {
        flex: 0 0 551px;
        max-width: 551px;
        min-width: 0;
        padding-right: 32px;
        padding-top: 16px;
    }

    .testimonials__author-image {
        height: 98px;
        width: 98px;
    }

    .testimonials__media {
        flex: 1 1 0;
        height: auto;
        max-height: 612px;
        min-width: 0;
        width: auto;
    }
}