@use "../utilities" as *;

/**----------------------------------------
START: Faq CSS
----------------------------------------*/

.faq-img-wrap{
    max-width: 515px;
    width: 100%;
    height: 542px;
    position: relative;
    @include breakpoint(md){
        margin: 0 auto;
    }
    .faq-img{
        max-width: 435px;
        height: 542px;
        width: 100%;
        position: absolute;
        top: 0;
        right: 0;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 20px;
        }
    }
    .faq-text-box{
        background-color: var(--ed-color-common-white);
        box-shadow: 0px 4px 18px rgba(158, 165, 177, 0.23);
        border-radius: 10px;
        padding: 30px;
        position: absolute;
        bottom: 100px;
        left: 0;
        .faq-thumb-list{
            display: flex;
            align-items: center;
            margin-top: 10px;
            li{
                height: 56px;
                width: 56px;
                @include flex-center;
                border: 4px solid var(--ed-color-common-white);
                border-radius: 50%;
                &:not(:last-of-type){
                    margin-right: -30px;
                }
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                &.number{
                    background-color: var(--ed-color-theme-primary);
                    color: var(--ed-color-common-white);
                    font-weight: 600;
                }
            }
        }
    }
}

.faq-content{
    @include breakpoint(md){
        margin-top: 40px;
    }
    &.content-1{
        max-width: 613px;
        width: 100%;
        padding-left: 40px;
        @include breakpoint(md){
            padding-left: 0;
        }
    }
    .faq-accordion{
        .accordion-item{
            border: none;
            .accordion-button{
                padding-left: 0;
                padding-right: 0;
                background-color: transparent;
                border: none;
                box-shadow: none;
                border-bottom: 1px solid transparent;
                font-size: 18px;
                font-weight: 600;
                color: var(--ed-color-heading-primary);
                &:not(.collapsed){
                    border-bottom: 1px solid #E0E5EB;
                }
                span{
                    color: var(--ed-color-text-body);
                    margin-right: 10px;
                }
            }
            .accordion-body{
                padding-left: 0;
                padding-right: 0;
                p{
                    color: #6C706F;
                }
            }
        }
    }
}


// Faq 2

.faq-img-wrap-2{
    max-width: 577px;
    width: 100%;
    height: 511px;
    position: relative;
    z-index: 1;
    @include breakpoint(md){
        margin: 0 auto;
    }
    .faq-img-1{
        max-width: 281px;
        width: 100%;
        height: 402px;
        border-radius: 0 60px 0 60px;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        z-index: 1;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .faq-img-2{
        max-width: 270px;
        width: 100%;
        height: 241px;
        border-radius: 60px 0 60px 0;
        position: absolute;
        top: 0;
        right: 0;
        overflow: hidden;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .faq-img-3{
        max-width: 270px;
        width: 100%;
        height: 245px;
        border-radius: 60px 0 60px 0;
        position: absolute;
        bottom: 0;
        right: 0;
        overflow: hidden;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .faq-text-box{
        background-color: var(--ed-color-common-white);
        box-shadow: 0px 4px 18px rgba(158, 165, 177, 0.23);
        border-radius: 10px;
        padding: 30px;
        position: absolute;
        bottom: 50px;
        left: 60px;
        z-index: 2;
        .faq-thumb-list-wrap{
            @include flex-vertical-center;
            column-gap: 10px;
            margin-top: 10px;
            flex-wrap: wrap;
            row-gap: 15px;
            .faq-thumb-list{
                display: flex;
                align-items: center;
                li{
                    height: 56px;
                    width: 56px;
                    @include flex-center;
                    border: 4px solid var(--ed-color-common-white);
                    border-radius: 50%;
                    &:not(:last-of-type){
                        margin-right: -20px;
                    }
                    &.number{
                        background-color: var(--ed-color-theme-primary);
                        color: var(--ed-color-common-white);
                        font-weight: 600;
                    }
                }
            }
            p{
                color: var(--ed-color-heading-primary);
                font-size: 18px;
                font-weight: 400;
                margin-bottom: 0;
                line-height: 1;
                span{
                    color: var(--ed-color-theme-primary);
                    font-weight: 700;
                }
            }
        }
    }
}


/* !END:  Faq CSS */