.breadcrumb {
    background-color: var(--_c-bg);
    padding: 6px;
    margin-top: 11px;
    --_c-light: #AAA1A1;
    --_c-bg: #D9D9D933
}

.breadcrumb li {
    display: inline-flex;
    align-items: center
}

.breadcrumb li:not(:first-child):before {
    content: "/";
    margin-right: 3px;
    color: var(--_c-light)
}

.breadcrumb li>* {
    font-size: var(--fs-xs)
}

.breadcrumb li a {
    color: var(--_c-light)
}

.breadcrumb li a:hover {
    color: #000
}

.breadcrumb li span {
    color: var(--c-primary)
}

.testimonials {
    padding-block: 31px 54px
}

.testimonials .title {
    margin-bottom: 35px;
    text-align: center
}

.testimonials .title :first-child {
    font-size: calc(var(--fs-xl, 36px) + 6px);
    font-weight: 600;
    line-height: var(--lh-xl)
}

.testimonials .wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 27px;
    margin-bottom: 40px
}

.testimonials .review {
    background-color: var(--c-bg);
    border-radius: 20px;
    padding: 26px
}

.testimonials .review>:first-child {
    display: block;
    font-size: var(--fs-base, 16px);
    font-weight: 700;
    line-height: var(--lh-xl)
}

.testimonials .review ul {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 23px
}

.testimonials .review>:nth-child(3) {
    font-size: calc(var(--fs-md, 24px) + 2px);
    font-weight: 600;
    line-height: var(--lh-df);
    margin-bottom: 16px;
    max-width: 300px
}

@supports (display:-webkit-box) {
    .testimonials .review>:nth-child(3) {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis
    }
}

.testimonials .review>p {
    height: 174px
}

.testimonials .wrapper + .button {
    display: block;
    width: 141px;
    margin-inline: auto
}

.testimonials :where(.title :first-child, .wrapper, .review, .review *) {
    transition: var(--transition)
}

.testimonials .overlay {
    display: none;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, .8);
    z-index: 100;
    transition: var(--transition)
}

.testimonials .overlay form {
    --_c-placeholder: #747474;
    --_c-border: #D9D9D9;
    --_c-input-bg: #e3e3e3;
    --_c-input-bg-drk: #cfcfcf;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    max-width: 500px;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
}

.testimonials .overlay form > :first-child {
    position: relative;
    width: 100%;
    font-size: var(--fs-lg, 30px);
    color: #000;
    text-align: center;
    margin-bottom: 20px;
}

.testimonials .overlay form > :first-child::before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 140px;
    height: 2px;
    background-color: var(--c-primary);
    border-radius: 10px;
    margin-inline: auto;
    content: '';
}

.testimonials .overlay form #close-feedback {
    position: absolute;
    top: -10px;
    right: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: var(--c-primary);
    color: #fff;
    border-radius: 50%;
}

.testimonials .overlay form :where(input, select, textarea, label[for="avatar"]) {
    height: 40px;
    color: #000;
    padding: 7px 11px;
    border: 1px solid var(--_c-border);
    border-radius: 5px;
    background-color: #fff;
    font-size: var(--fs-xs, 14px);
}

.testimonials .overlay form :where(input, textarea)::placeholder {
    color: var(--_c-placeholder);
}

.testimonials .overlay form :where(input, select) {
    width: calc(50% - 6px);
}

.testimonials .overlay form select {
    color: var(--_c-placeholder);
    appearance: none;
}

.testimonials .overlay form textarea {
    width: 100%;
    height: 100px;
    resize: none;
}

.testimonials .overlay form label[for="avatar"] {
    width: calc(50% - 6px);
}

.testimonials .overlay form label[for="avatar"] span {
    font-size: calc(var(--fs-xs, 14px) - 2px);
    font-weight: 500;
    background-color: var(--_c-input-bg);
    color: #000;
    padding: 3px 8px;
    border: 1px solid var(--_c-border);
    border-radius: 4px;
    cursor: pointer;
}

.testimonials .overlay form label[for="avatar"] span:hover {
    background-color: var(--_c-input-bg-drk);
}

.testimonials .overlay form input[type="file"] {
    display: none;
}

.testimonials .overlay form label[for="captcha"] {
    width: calc(50% - 6px);
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-xs, 14px);
    font-weight: 700;
}

.testimonials .overlay form label[for="captcha"] span {
    font-weight: 400;
    letter-spacing: 4px;
}

.testimonials .overlay form input[id="captcha"] {
    margin-left: auto;
}

.testimonials .overlay form button[type="submit"] {
    width: 100%;
    max-width: 140px;
    padding-block: 5px;
    margin: 10px auto 0;
}


@media only screen and (width <=1200px) {
    .testimonials {
        --fs-md: 22px
    }
}

@media only screen and (width <=991px) {
    .testimonials .wrapper {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media only screen and (width <=767px) {
    .testimonials {
        --fs-md: 20px
    }

    .testimonials .wrapper {
        gap: 20px
    }

    .testimonials .review {
        padding: 20px
    }

    .testimonials .review ul {
        margin-bottom: 10px
    }
}

@media only screen and (width <=575px) {
    .testimonials {
        --fs-xl: 26px;
        --fs-md: 18px
    }

    .testimonials .wrapper {
        grid-template-columns: 1fr
    }

    .testimonials .review>:nth-child(3) {
        max-width: 100%
    }

    .testimonials .review>p {
        height: 96px
    }
}

@media only screen and (width <=475px) {
    .testimonials {
        --fs-xl: 22px
    }
}