// HOSTIE FAQ AREA CSS
.rts-faq {
    background: var(--accordion-section);
    &__first {
        position: relative;
        .title {
            font-size: 36px;
            font-weight: var(--bold);
            margin-bottom: 40px;
            width: 380px;
            color: var(--color-secondary);
        }

        p {
            font-family: var(--font-secondary);
            width: 420px;
            margin-bottom: 50px;
        }

        img {
            margin-left: 30px;
        }

        &--shape {
            .shape-one,
            .shape-two {
                padding: 8px 13px;
                background: rgba(128, 0, 255, 0.10);
                border-radius: 30px;
                color: var(--color-secondary);
                display: inline-block;
                line-height: 100%;
                text-transform: capitalize;
            }
            .shape-one {
                position: absolute;
                top: 48%;
                left: 35%;
            }
            
            .shape-two {
                position: absolute;
                right: 25%;
                bottom: 10%;
            }
            
            .img {
                position: absolute;
                left: -5%;
                bottom: 15%;
            }
        }
    }

    &__accordion {        
        & .accordion {
            .accordion-item {
                // margin-bottom: 30px;
                padding: 30px 25px;
                border-bottom: 1px solid var(--light-border);
                .accordion-header {
                    .accordion-button {
                        cursor: pointer;
                        font-size: 20px;
                        padding: 0;
                        font-weight: var(--semibold);
                        background: transparent;
                        &:not(.collapsed) {
                            background: transparent;
                            color: var(--color-secondary);
                            box-shadow: none;

                            &::after {
                                content: '\f068';
                                font-family: var(--fontawesome);
                            }
                        }

                        &::after {
                            content: '\2b';
                            font-family: var(--fontawesome);
                            background-image: none;
                            height: 26px;
                            width: 26px;
                            border-radius: 50%;
                            border: 1px solid var(--border-color);
                            font-size: 14px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }

                    }
                }

                .accordion-body {
                    padding: 0;
                    margin-top: 20px;
                }

                &.active {
                    background: var(--accordion-active);
                    box-shadow: var(--accordion-box-shadow);
                    border: 1px solid var(--border-color);
                    border-radius: 10px;
                    border-top: none;
                }
            }
        }
    }
}