@use '../utils' as *;

/*----------------------------------------*/
/*  19. faq css start
/*----------------------------------------*/
.it-faq {
    &-area {
        & .it-about-2-left {
            padding-left: 35px;
            padding-bottom: 55px;
            @media #{$md}{
                margin: 0 70px;
            }
            @media #{$xs}{
                padding-left: 0;
                padding-bottom: 0;
                margin-bottom: 0;
            }
        }
        & .it-about-2-thumb-sm {
            right: auto;
            left: -1.5%;
            bottom: 2%;
            border-left: none;
            border-top: 10px solid var(--it-common-white);
            border-right: 12px solid var(--it-common-white);
            animation: updown 1s infinite alternate;
            @media #{$xs}{
                left: 0;
                animation: unset;
            }
        }
        & .it-about-2-shape-7 {
            left: auto;
            right: -12%;
            animation: zoom 3s infinite;
        }
    }
    &-left {
        margin-right: 83px;
        @media #{$xl}{
           margin-right: 40px;
        }
        @media #{$lg}{
           margin-right: 0;
        }
        @media #{$md,$xs}{
           margin-right: 0;
           margin-bottom: 70px;
        }
        & .it-section-title-3 {
            @media #{$lg}{
                & br {
                    display: none;
                }            
            }
        }
    }
    &-shape {
        &-1 {
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        &-2 {
            position: absolute;
            z-index: -1;
            top: -25%;
            left: 0;
            @media #{$md,$xs}{
                display: none;
            }
        }
    }
    &-style-2 {
        & .it-custom-accordion .accordion-buttons {
            font-family: var(--it-ff-spartan-semibold);
        }
    }
    &-style-3 {
        & .it-custom-accordion .accordion-items {
            background-color: var(--it-gray-1);
        }
        & .it-about-2-thumb {
            & img {
                @media #{$xs}{
                    width: 100%;
                }
            }
        }
    }
    &-tab {
        &-box {
            & ul {
                padding: 16px 0;
                border-top: 1px solid rgba(121, 121, 121, 0.3);
                border-bottom: 1px solid rgba(121, 121, 121, 0.3);
                & li {
                    & button {
                        padding: 0;
                        font-size: 20px;
                        margin: 0 20px;
                        color: var(--it-text-body);
                        font-family: var(--it-ff-spartan-semibold);
                        &.active {
                            color: var(--it-theme-1);
                        }
                        &:hover {
                            color: var(--it-theme-1);
                        }
                    }
                }
            }
        }
        &-content {
            @media #{$xs}{
                margin-bottom: 50px;
            }
            & .it-details-title-sm {
                font-family: var(--it-ff-heading);
            }
            & ul {
                & li {
                    list-style-type: none;
                    &:not(:last-child){
                        margin-bottom: 14px;
                    }
                }
            }
        }
    }
    &-inner-style {
        & .it-custom-accordion {
            & .accordion-items {
                border-radius: 10px;
                background-color: var(--it-gray-1);
                border: 1px solid rgba(14, 32, 81, 0.1);
            }
            & .accordion-buttons {
                font-family: var(--it-ff-spartan-semibold);
                @media #{$md}{
                    font-size: 18px;
                }
                @media #{$xs}{
                    font-size: 16px;
                }
            }
            & .accordion-body {
                & p {
                    margin-right: 15px;
                    font-size: 16px;
                    @media #{$lg,$md,$xs}{
                        margin-right: 0;
                        font-size: 14px;
                    }
                }
            }
        }
    }
}