/* Feedback (testimonials slider) — the one stylesheet for this section, site-wide.
   Design reference: the Book a Demo page. Typography comes from the global sd-type-*
   classes in the markup; this file owns only layout, colours and spacing. The doubled
   class keeps it ahead of any page stylesheet without !important. */

/* The section resolves its own font, whatever page renders it. */
.feedback.feedback,
.feedback.feedback * {
    font-family: 'Google Sans Flex', sans-serif;
}

/* Spacing: inline --ns-* values (page field → Theme Settings → 80/80/48/48). */
.feedback.feedback {
    position: relative;
    padding-top: var(--ns-desktop-padding-top, 80px);
    padding-bottom: var(--ns-desktop-padding-bottom, 80px);
    background-color: #fff;
    color: #524f4f;
}

.feedback.feedback .feedback-inner {
    position: relative;
}

.feedback.feedback .feedback-header {
    max-width: 702px;
    margin-bottom: 48px;
}

.feedback.feedback .feedback-title {
    margin: 24px 0 0;
    color: #282828;
}

.feedback.feedback .feedback-title span {
    color: #409a65;
}

.feedback.feedback .feedback-desc {
    margin-top: 24px;
    color: rgba(0, 0, 0, 0.75);
}

.feedback.feedback .feedback-desc br {
    display: none;
}

/* Per-page Title/Description max width (feedback_title_max_width / feedback_desc_max_width). */
.feedback.feedback .compare-v2-text-width-control[data-compare-width="1"] {
    max-width: var(--compare-v2-max-width);
}

.feedback.feedback .splide__arrows:has(.feedback-arrows) {
    position: absolute;
    top: -100px;
    right: 0;
}

.feedback.feedback .feedback-arrows .splide__arrow:hover rect,
.feedback.feedback .feedback-arrows .splide__arrow:hover path {
    stroke: #333;
}

.feedback.feedback .splide__pagination {
    display: none;
}

.feedback.feedback .feedback-item {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 24px;
    border-radius: 16px;
    background: #f7f7f7;
}

.feedback.feedback .feedback-item__person {
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-bottom: 24px;
}

.feedback.feedback .feedback-item__person-soc {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 12px;
}

.feedback.feedback .feedback-item__avatar {
    width: 56px;
    height: 56px;
    border-radius: 100%;
    object-fit: cover;
}

.feedback.feedback .feedback-item__name {
    color: #282828;
}

.feedback.feedback .feedback-item__position {
    margin-bottom: 10px;
    color: rgba(0, 0, 0, 0.55);
}

.feedback.feedback .feedback-item__desc {
    color: rgba(0, 0, 0, 0.75);
}

@media (max-width: 1200px) {
    .feedback.feedback {
        padding-top: var(--ns-mobile-padding-top, 48px);
        padding-bottom: var(--ns-mobile-padding-bottom, 48px);
    }

    .feedback.feedback .feedback-title,
    .feedback.feedback .feedback-desc {
        margin-top: 16px;
    }

    .feedback.feedback .feedback-item__person {
        margin-bottom: 20px;
    }

    .feedback.feedback .splide-feedback {
        display: flex;
        flex-direction: column-reverse;
        gap: 32px;
    }

    .feedback.feedback .splide__arrows:has(.feedback-arrows) {
        position: static;
        display: flex;
        flex-direction: row-reverse;
    }
}

@media (max-width: 767px) {
    .feedback.feedback {
        overflow: hidden;
    }

    .feedback.feedback .feedback-header {
        margin-bottom: 32px;
    }

    .feedback.feedback .compare-v2-text-width-control[data-compare-width="1"] {
        max-width: unset;
    }

    .feedback.feedback .splide__arrows:has(.feedback-arrows) {
        display: none;
    }

    .feedback.feedback .splide__track {
        overflow: unset;
    }

    .feedback.feedback .feedback-arrows {
        display: flex;
        gap: 16px;
    }

    .feedback.feedback .splide__arrow {
        display: block;
        padding: 0;
    }

    .feedback.feedback .splide__arrow svg {
        width: 48px;
        height: 48px;
    }
}