/*==========================================================================
Faq CSS
==========================================================================*/
.faq__area {
    position: relative;
    z-index: 1;
    background: var(--color-10);
    &-title {
        .subtitle__two {
            color: var(--white);
        }
        h2 {
            color: var(--white);
            margin-bottom: 20px;
        }
        p {
            color: var(--color-3);
            max-width: 430px;
        }
        &-shape {
            display: inline-block;
            margin-left: 20px;
        }
    }
    &-left {
        background: var(--heading-color);
        &-item {
            border-bottom: 1px solid var(--border-color-3);
            &-card {
                &-header {  
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border: none;
                    cursor: pointer;
                    padding: 20px 30px;  
                    h5 {
                        color: var(--white);
                    }
                    i {
                        color: var(--color-2);
                        font-size: 20px;
                    }
                    &-content {
                        padding: 0 30px 35px 30px;
                        p {
                            color: var(--color-2);
                            margin: 0;
                            max-width: 570px;
                        }
                    }          
                }
            }
        }
    }
}
@media (max-width: 1199px) {
    .faq__area {
        &-left {
            &-item {
                &-card {
                    &-header {  
                        h5 {
                            font-size: 16px;
                            line-height: 26px;
                            font-weight: 500;
                        }         
                    }
                }
            }
        }
    }
}
@media (max-width: 991px) {
    .faq__area {
        &-title {
            .subtitle__two {
                color: var(--white);
            }
            h2 {
                color: var(--white);
                margin-bottom: 20px;
            }
            p {
                color: var(--color-3);
                max-width: 430px;
            }
            &-shape {
                display: none;
            }
        }
    }
}
@media (max-width: 575px) {
    .faq__area {
        &-left {
            &-item {
                &-card {
                    &-header {
                        padding: 20px;
                        i {
                            font-size: 16px;
                        }
                        &-content {
                            padding: 0 20px 30px 20px;
                        }          
                    }
                }
            }
        }
    }
}