.fc_testimonial_slider {
    position: relative;
    background-color: #1A1A1A;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    color: #fff;

    &.bg_default {
        background-color: #1A1A1A;
    }
    &.bg_black {
        background-color: #000;
    }

    &.bg_white, &.bg_grey {
        background-color: #FFFFFF;

        .header {
            color: #07080A;
        }

        *:not(.button) {
            color: #07080A;
        }

        & .tns-controls button {
            background: no-repeat center / 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 13 22'%3E%3Cpath stroke='%2307080A' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m2 20 9-9-9-9'/%3E%3C/svg%3E");;
        }

        & .single_testimonial p.wp_content::after {
            background: no-repeat center url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="3" fill="none" viewBox="0 0 400 3"><path fill="%2307080A" d="M400 3V0l-20 .075-360 1.35L0 1.5l20 .075 360 1.35z"/></svg>');
        }

        div.tns-nav button {
            background-color: #a3a3a3;
            &.tns-nav-active {
                background-color: #07080A;
            }

        }

        &::before, &::after {
            background: center / 370px 280px no-repeat url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="645" height="531" fill="none" viewBox="0 0 645 531"><path fill="%231A1A1A" fill-opacity=".05" d="M645 531H333.944V263.064q0-66.81 23.659-110.654 24.357-44.54 61.933-73.77 38.274-29.228 84.897-46.627Q551.753 13.918 597.68 0l46.624 83.513q-34.794 13.222-59.845 27.141-24.356 13.222-40.361 29.229-15.31 16.006-22.964 36.885-6.959 20.182-6.959 48.02H645zm-333.248 0H0V263.064q0-66.81 23.66-110.654 24.355-44.54 62.629-73.77 38.273-29.228 84.896-46.627Q218.505 13.918 264.433 0l45.927 83.513q-34.793 13.222-59.845 27.141-24.356 13.222-40.361 29.229-15.309 16.006-22.963 36.885-6.96 20.182-6.959 48.02h131.52z"/></svg>');
            background-size: cover;
        }
        &::after {
            background: center / 370px 280px no-repeat url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="645" height="531" fill="none" viewBox="0 0 645 531"><path fill="%231A1A1A" fill-opacity=".05" d="M0 0h311.056v267.936q0 66.81-23.659 110.654-24.357 44.54-61.933 73.769-38.274 29.23-84.897 46.628Q93.247 517.081 47.32 531L.696 447.488q34.794-13.224 59.845-27.142 24.355-13.222 40.361-29.229 15.31-16.006 22.964-36.885 6.959-20.182 6.959-48.02H0zm333.248 0H645v267.936q0 66.81-23.66 110.654-24.355 44.54-62.629 73.769t-84.896 46.628q-47.32 18.094-93.248 32.013l-45.927-83.512q34.793-13.224 59.845-27.142 24.356-13.222 40.361-29.229 15.309-16.006 22.963-36.885 6.96-20.182 6.959-48.02h-131.52z"/></svg>');
            background-size: cover;
        }
    }

    &.bg_grey {
        background-color: #D9D9D9;

        div.tns-nav button {
            background-color: #b3b3b3;
        }
    }

    .header {
        text-align: center;
        color: #fff;

        span {
            color: #AC182D;
        }
    }

    &::before, &::after {
        content: '';
        display: block;
        width: 645px;
        height: 531px;
        background: center / 370px 280px no-repeat url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="645" height="531" fill="none" viewBox="0 0 645 531"><path fill="%23fff" fill-opacity=".05" d="M645 531H333.944V263.064q0-66.81 23.659-110.654 24.357-44.54 61.933-73.77 38.274-29.228 84.897-46.627Q551.753 13.918 597.68 0l46.624 83.513q-34.794 13.222-59.845 27.141-24.356 13.222-40.361 29.229-15.31 16.006-22.964 36.885-6.959 20.182-6.959 48.02H645zm-333.248 0H0V263.064q0-66.81 23.66-110.654 24.355-44.54 62.629-73.77 38.273-29.228 84.896-46.627Q218.505 13.918 264.433 0l45.927 83.513q-34.793 13.222-59.845 27.141-24.356 13.222-40.361 29.229-15.309 16.006-22.963 36.885-6.96 20.182-6.959 48.02h131.52z"/></svg>');
        background-size: cover;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
    }
    &::after {
        background: center / 370px 280px no-repeat url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="645" height="531" fill="none" viewBox="0 0 645 531"><path fill="%23fff" fill-opacity=".05" d="M0 0h311.056v267.936q0 66.81-23.659 110.654-24.357 44.54-61.933 73.769-38.274 29.23-84.897 46.628Q93.247 517.081 47.32 531L.696 447.488q34.794-13.224 59.845-27.142 24.355-13.222 40.361-29.229 15.31-16.006 22.964-36.885 6.959-20.182 6.959-48.02H0zm333.248 0H645v267.936q0 66.81-23.66 110.654-24.355 44.54-62.629 73.769t-84.896 46.628q-47.32 18.094-93.248 32.013l-45.927-83.512q34.793-13.224 59.845-27.142 24.356-13.222 40.361-29.229 15.309-16.006 22.963-36.885 6.96-20.182 6.959-48.02h-131.52z"/></svg>');
        background-size: cover;
        left: auto;
        top: auto;
        bottom: 0;
        right: 0;
    }
    * {
        z-index: 2;
        position: relative;
        margin: 0;
    }

    .tns-outer {
        flex-direction: column;
        gap: 40px;
        align-items: center;
        width: 100%;

        .tns-ovh {
            width: 100%;
        }

        .tns-visually-hidden {
            display: none;
        }

        .single_testimonial {
            position: relative;
            padding-inline: 124px;
            display: flex;
            align-items: center;
            flex-direction: column;
            text-align: center;

            .meta {
                margin: auto 0 0 0;
            }

            .wp_content::after {
                content: '';
                display: block;
                background: no-repeat center url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="3" fill="none" viewBox="0 0 400 3"><path fill="%23fff" d="M400 3V0l-20 .075-360 1.35L0 1.5l20 .075 360 1.35z"/></svg>');
                height: 3px;
                width: 100%;
                margin-block: 20px;
            }
        }

        .tns-nav {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            flex-wrap: wrap;

            button {
                width: 20px;
                height: 20px;
                border-radius: 15px;
                transition: .3s;
                background-color: #646464;
                border: #fff;

                &.tns-nav-active {
                    background-color: #fff;
                }
            }
        }
    }


    .tns-controls {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

        button {
            position: absolute;
            z-index: 3;
            top: 40%;
            margin: auto;
            left: -40px;
            width: 30px;
            height: 30px;
            border: none;
            text-indent: -99999px;
            overflow: hidden;
            background: no-repeat center / 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 13 22'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m2 20 9-9-9-9'/%3E%3C/svg%3E");;

            &:hover {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 13 22'%3E%3Cpath stroke='%23ac182d' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m2 20 9-9-9-9'/%3E%3C/svg%3E");
            }

            &:nth-child(2) {
                left: auto;
                right: -40px;
            }
        }
    }
}

@media (max-width: 1440px) {
    .fc_testimonial_slider {
        &::before, &::after {
            width: 300px;
            height: 300px;
        }
    }
}

@media (max-width: 1200px) {
    .fc_testimonial_slider {
        .tns-outer {
            .single_testimonial {
                padding-inline: 0;
            }
        }
    }
}

@media (max-width: 640px) {
    .fc_testimonial_slider {
        &::before, &::after {
            width: 150px;
            height: 150px;
        }
    }
}