/*==========================================================================
FAQ CSS
==========================================================================*/
.faq__area {
    &-item {
        background: var(--color-6);
        margin-bottom: 20px;        
        border-radius: 5px;
        padding: 20px;
        &:last-child {
            margin: 0;
        }
        h6 {
            cursor: pointer;
        }
        .icon {
            position: relative;
            &::after {
                content: "\f067";
                font-family: 'Font Awesome 5 Pro';
                font-weight: 300;
                position: absolute;
                color: var(--primary-color-3);
                right: 0;
            }
            &:not(.collapsed)::after {
                content: "\f068";
            } 
            &.page::after {
                color: var(--primary-color-1);
            }
        }    
        &-body {
            p {
                margin: 0;
                margin-top: 10px;
            }
        }
    }
}
/*==========================================================================
FAQ Two CSS
==========================================================================*/
.faq__two {
    &-left {
        margin-right: 70px;
        &-image {
            position: relative;
            padding-bottom: 90px;
            &-one {
                position: absolute;
                right: 0;
                bottom: 0;
            }
            &-question {
                position: absolute;
                top: 35px;
                right: 70px;
                background: var(--bg-heading-color);
                padding: 30px;
                border-radius: 6px;
                display: flex;
                align-items: center;
                gap: 20px;
                h6 {
                    color: var(--text-white);
                    max-width: 150px;
                    text-transform: none;
                }
                &-icon {
                    i {
                        background: var(--primary-color-1);
                        width: 66px;
                        height: 66px;
                        display: inline-flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 50%;
                        color: var(--text-white);
                        font-size: 35px;
                        position: relative;
                        margin-bottom: 7px;
                        &::after {
                            position: absolute;
                            content: "";
                            left: 50%;
                            bottom: -12px;
                            display: block;
                            z-index: -1;
                            width: 20px;
                            height: 20px;
                            transform: translateX(-50%);
                            clip-path: polygon(100% 0, 0 0, 50% 100%);                
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 1399px) {
    .faq__two {
        &-left {
            margin-right: 0;
        }
    }
}
@media (max-width: 520px) {
    .faq__area-item {
        padding: 0 20px;
    }
    .faq__two {
        &-left {
            &-image {
                img {
                    max-width: 280px;
                }
                &-question {
                    right: 20px;
                }
            }
        }
    }
}