@use '../../utils' as *;

/*----------------------------------------*/
/*  4.8 FAq css
/*----------------------------------------*/

.rs-faq{
    &-one{
        position: relative;
        .rs-faq-wrapper{
            margin-inline-end: 50px;
            @media #{$laptop}{
                margin-inline-end: 0px;
            }
        }
        .rs-faq-bg-thumb{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            inset-inline-start: 0;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            z-index: -1;
            @include rtl{
                transform: rotateY(180deg);
            }
        }
        .rs-section-title{
            color: var(--rs-white);
        }
    }
    &-two{
        overflow-x: clip;
        .rs-faq-thumb{
            width: 640px;
            overflow: hidden;
            visibility: hidden;
            @media #{$laptop}{
                width: 100%;
                position: sticky;
                top: 110px;
            }
            @media #{$md}{
                position: relative;
                top: unset;
            }
            img{
                width: 100%;
                transition: unset;
            }
        }
        .rs-faq-content-wrapper{
            .descrip{
                margin: 20px 0 35px 0;
            }
        }
    }
    &-three{
        position: relative;
        z-index: 1;
        overflow-x: clip;
        .rs-faq-bg-thumb{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            inset-inline-start: 0;
            background-position: center right;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
            @include rtl {
                transform: rotateY(180deg);
            }
            @media #{$lg}{
                display: none;
            }
        }
        .rs-faq-shape{
            position: absolute;
            bottom: 0;
            inset-inline-start: 60px;
            @media #{$laptop}{
                inset-inline-start: 0px;
            }
            @media #{$lg}{
                display: none;
            }
        }
        .rs-faq-content-wrapper{
            margin-inline-end: 100px;
            @media #{$laptop}{
                margin-inline-end: 30px; 
            }
            @media #{$lg}{
                margin-inline-end: 0px; 
            }
            .descrip{
                margin: 20px 0 35px 0;
            }
        }
    }
    &-four{
        &.rs-faq-item{
                background: var(--rs-theme-deep-blue);
                padding: 35px 45px 45px 45px;
                border-radius: 2px 2px 2px 2px;
                @media #{$laptop}{
                    padding: 30px 30px 40px 30px;
                }
                @media #{$mobile}{
                    padding: 25px 25px 35px 25px;
                }
        }
        .rs-faq-title{
            color: var(--rs-white);
            font-size: 36px;
            @media #{$lg}{
                font-size: 30px;
            }
        }
        .descrip{
            color: var(--rs-white);
            margin: 20px 0 30px;
        }
        .has-theme-deep-blue{
            background: white;
            color: var(--rs-theme-deep-blue);
            @media #{$mobile}{
                padding: 15px 20px;
            }
            &:hover{
                &.has-icon{
                    .icon-box{
                        svg{
                            fill: var(--rs-white);
                        }
                    }
                }
            }
            &.has-icon{
                .icon-box{
                    svg{
                        fill: var(--rs-theme-deep-blue);
                    }
                }
            }
        }
    }
    &-five{
        .rs-faq-content-wrapper{
            margin-inline-end: 70px;
            @media #{$xl}{
                margin-inline-end: 0px;
            }
            .descrip{
                margin: 20px 0 35px 0;
            }
        } 
    }
}