/* ============================================
   TESTIMONIALS SECTION STYLES
   ============================================ */

.testimonials-section {
    width: 100%;
    display: flex;
    justify-content: center;
    background: #fff;
    padding: 120px 0;
}

.testimonials-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1122.94px;
    gap: 80px;
}

.testimonials-title {
    font-family: Costaline, serif;
    font-size: 64px;
    font-style: normal;
    font-weight: 100;
    line-height: 170%;
    color: var(--Black, #181818);
    text-align: center;
    margin: 0;
}

.testimonials-list {
    display: flex;
    flex-direction: row;
    gap: 33.995px;
    justify-content: center;
    flex-wrap: wrap;
}

.testimonial-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 351.65px;
    height: 523px;
    border-radius: 0;
    box-shadow: none;
    padding: 32px;
    gap: 27.893px;
    text-align: left;
    background-color: #f1f1f1;
    border: 0.872px solid #b4b2ad;
    transition: background-color 240ms ease, border-radius 240ms ease, box-shadow 240ms ease, border 240ms ease;
}

.testimonials-description {
    max-width: 867px;
    color: #181818;
    text-align: center;
    font-family: "General Sans Variable";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}


/* Hover behavior: apply center-card visuals when a card is hovered */
.testimonials-list .testimonial-card:hover,
.testimonial-card:hover {
    background-color: #f1f1f1;
    border: 0.872px solid #b4b2ad;
    border-radius: 87.167px 87.167px 0 0;
    z-index: 2;
}

.testimonials-list {
    align-items: center;
}

/* Shared Avatar Styles */
.testimonial-avatar {
    width: 287.65px;
    height: 328.56px;
    overflow: hidden;
}

.testimonial-avatar img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.testimonial-quote {
    font-family: "General Sans Variable", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--Black, #181818);
    text-align: left;
    margin: 0;
    width: 100%;
}

.testimonial-author {
    font-family: "General Sans Variable", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--Brown, #833C1E);
    margin-bottom: 4px;
}

.testimonial-role {
    font-family: "General Sans Variable", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--Black, #181818);
}

@media (max-width: 900px) {
    .testimonials-section {
        padding: 80px 0;
    }

    .testimonials-inner {
        gap: 56px;
    }

    .testimonials-title {
        font-family: Costaline;
        font-size: 32px;
        font-style: normal;
        font-weight: 100;
        line-height: 170%;
        color: var(--Black, #181818);
    }

    .testimonials-description {
        padding: 0 32px;
        color: var(--Black, #181818);
        text-align: center;
        font-family: "General Sans Variable";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .testimonials-list {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 23.098px;
        padding: 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .testimonials-list::before,
    .testimonials-list::after {
        content: '';
        flex: 0 0 auto;
        width: calc((100vw - 239.155px) / 2);
    }

    .testimonials-list::-webkit-scrollbar {
        display: none;
    }

    .testimonial-card {
        flex: 0 0 auto;
        scroll-snap-align: center;
        display: flex;
        height: 355.361px;
        padding: 21.743px;
        flex-direction: column;
        align-items: flex-start;
        gap: 18.953px;
        border: 0.592px solid var(--Grey-1, #B4B2AD);
        background: var(--Grey-2, #F1F1F1);
        width: 239.155px;
        box-sizing: border-box;
        border-radius: 0;
    }

    .testimonial-avatar {
        width: 195.449px;
        height: 223.247px;
        overflow: hidden;
    }

    .testimonial-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .testimonial-quote {
        font-family: "General Sans Variable", sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        color: var(--Black, #181818);
        text-align: left;
        margin: 0;
    }

    .testimonial-title {
        font-family: "General Sans Variable", sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        color: var(--Black, #181818);
        text-align: left;
        margin: 0;
    }

    .highlight {
        color: #833C1E;
    }
}

@media (max-width: 600px) {
    .testimonials-section {
        padding: 48px 0;
    }

    .testimonials-inner {
        gap: 24px;
    }

    .testimonials-title {
        font-family: Costaline;
        font-size: 32px;
        font-style: normal;
        font-weight: 100;
        line-height: 170%;
        /* 54.4px */
        color: var(--Black, #181818);
    }

    .testimonials-description {
        padding: 0 32px;
        color: var(--Black, #181818);
        text-align: center;
        font-family: "General Sans Variable";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin: 0 auto;
    }

    .testimonials-list {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 23.098px;
        padding: 0;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE and Edge */
    }

    .testimonials-list::before,
    .testimonials-list::after {
        content: '';
        flex: 0 0 auto;
        width: calc((100vw - 239.155px) / 2);
    }

    .testimonials-list::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, Opera */
    }

    .testimonial-card {
        flex: 0 0 auto;
        scroll-snap-align: center;
        display: flex;
        height: 355.361px;
        padding: 21.743px;
        flex-direction: column;
        align-items: flex-start;
        gap: 18.953px;
        border: 0.592px solid var(--Grey-1, #B4B2AD);
        background: var(--Grey-2, #F1F1F1);
        width: 239.155px;
        box-sizing: border-box;
        border-radius: 0;
    }

    .center-card {
        /* Deprecated in responsive: visuals applied on hover */
    }

    .testimonial-avatar {
        width: 195.449px;
        height: 223.247px;
        overflow: hidden;
    }

    .testimonial-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .testimonial-quote {
        font-family: "General Sans Variable", sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        color: var(--Black, #181818);
        text-align: left;
        margin: 0;
    }

    .testimonial-title {
        font-family: "General Sans Variable", sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        color: var(--Black, #181818);
        text-align: left;
        margin: 0;
    }

    .highlight {
        color: #833C1E;
    }
}

.testimonial-title {
    font-family: "General Sans Variable", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--Black, #181818);
    text-align: left;
    margin: 0;
    width: 100%;
}