@use "../utilities" as *;

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

.faq-img {
    border-radius: 0 80px 0 80px;
    overflow: hidden;
    height: 100%;
    padding-right: 15px;
    @include breakpoint(md) {
        padding-right: 0;
    }
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.faq-content {
    padding-left: 15px;
    @include breakpoint(md) {
        padding-left: 0;
        margin-top: 40px;
    }
    .accordion-item {
        .accordion-header {
            .accordion-button {
                font-family: var(--mt-ff-body);
                color: var(--mt-color-text-body);
                font-size: 17px;
                font-weight: 500;
                height: 80px;
                @include flex-vertical-center;
                column-gap: 20px;
                box-shadow: none;
                @include transition(all 0.3s ease-in-out);
                @include breakpoint(sm){
                    font-size: 15px;
                }
                i {
                    color: var(--mt-color-theme-secondary);
                }
                &:after {
                    background-image: none;
                    font-family: "Font Awesome 6 Pro";
                    color: var(--mt-color-theme-secondary);
                    content: "\f078";
                    height: auto;
                    width: auto;
                }
                &:not(.collapsed) {
                    background-color: var(--mt-color-theme-primary);
                    color: var(--mt-color-common-white);
                    height: 50px;
                    i,
                    &:after {
                        color: var(--mt-color-common-white);
                    }
                }
                .number{
                    font-family: var(--mt-ff-body);
                    font-size: 27px;
                    color: var(--mt-color-common-white);    
                    -webkit-text-fill-color: transparent;
                    -webkit-text-stroke-width: 1px;
                    -webkit-text-stroke-color: var(--mt-color-common-white);
                    opacity: 0.7;
                }
            }
        }
        .accordion-body {
            position: relative;
            p {
                font-family: var(--mt-ff-body);
                font-size: 15px;
                max-width: 390px;
                width: 100%;
                margin-bottom: 0;
                padding: 10px 0;
                @include breakpoint(md) {
                    max-width: 430px;
                }
                @include breakpoint(sm){
                    max-width: 230px;
                }
            }
            .body-img {
                position: absolute;
                right: 0;
                bottom: 0;
            }
        }
    }
}

/* !END: Theme Faq CSS */
