/*---------------------------------------
    11. Faq
---------------------------------------*/

.faq-wrapper {}

.faq-contents {
    .faq-item {
        padding: 0;
        border: 1px solid var(--input-color);
        border-radius: 10px;
        &.open {
            border-radius: 10px;
            overflow: hidden;
            background-color: $white;
            padding: 0px;
            .faq-title {
                border-radius: 0;
                -webkit-box-shadow: none;
                box-shadow: none;
                &::after {
                    @include transform(translateY(-50%) rotate(90deg));
                }
            }
            .faq-panel {
                .faq-para {
                    color: var(--light-color);
                }
            }
        }
        &.active {
            .faq-panel {
                display: block;
            }
        }
        &:not(:first-child) {
            margin-top: 24px;
        }
        .faq-title {
            font-size: 20px;
            font-weight: 500;
            line-height: 28px;
            color: var(--heading-color);
            font-family: var(--heading-font);
            padding: 20px;
            background: none;
            border-radius: 10px;
            cursor: pointer;
            position: relative;
            z-index: 1;
            @include transition(300ms);
            margin-right: 30px;
            &::after {
                @include lineAwesome("\f105");
                position: absolute;
                right: -4px;
                top: 50%;
                transform: translateY(-50%);
                @include transition(300ms);
            }
            @include responsive(xl) {
                font-size: 24px;
                line-height: 32px;
            }
            @include responsive(lg) {
                font-size: 24px;
                line-height: 32px;
            }
            @include responsive(allPhone) {
                font-size: 22px;
                line-height: 28px;
            }
            @include responsive(xs) {
                font-size: 20px;
            }
            @include responsive(vxxs) {
                font-size: 18px;
            }
        }
        .faq-panel {
            padding: 20px;
            display: none;
            border-top: 1px solid var(--input-color);
            .faq-para {
                font-size: 16px;
                line-height: 30px;
                color: var(--light-color);
                @include responsive(sm) {
                    font-size: 15px;
                }
                @include responsive(vxxs) {
                    font-size: 14px;
                }
            }
        }
    }
}

.faq-question {
    &-border {
        border: 1px solid var(--input-color);
        padding: 20px;
    }
    &-title {
        font-size: 20px;
        font-weight: 600;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--input-color);
    }
}

.faq-question-form {
    .single-input {
        &:not(:first-child) {
            margin-top: 20px;
        }
    }
}