/*===========================
     21. CONTACT css 
===========================*/


.faq-area{
    @media #{$md}{
        padding-top: 50px;
        padding-bottom: 100px;
    }
    @media #{$xs}{
        padding-top: 30px;
        padding-bottom: 80px;
    }
}

.faq-content{
    & .faq-collapse{
        & .accordion{
            & .card{
                margin-top: 30px;
                margin-bottom: 0;
                border: 2px solid rgba(72, 127, 255, 0.2);
                border-radius: 0;
                @include box-shadow (0px 8px 16px 0px rgba(72,127,255,0.1));
                
                & .card-header{
                    padding: 25px 30px;
                    background: none;
                    border-bottom: 0;
                    
                    @media #{$lg}{
                        padding: 15px 20px;
                    }
                    @media #{$xs}{
                        padding: 15px 20px;
                    }
                    @media #{$sm}{
                        padding: 25px 30px;
                    }
                    
                    & a{
                        font-size: 18px;
                        color: $heading-color;
                        display: block;
                        position: relative;
                        padding-right: 20px;
                        
                        @media #{$lg}{
                            font-size: 16px;
                        }
                        @media #{$xs}{
                            font-size: 14px;
                        }
                        @media #{$sm}{
                            font-size: 16px;
                        }
                        
                        & i{
                            font-size: 16px;
                            width: 20px;
                            height: 20px;
                            line-height: 18px;
                            text-align: center;
                            background-color: $theme-color;
                            border-radius: 50%;
                            color: $white;
                            @include transform(rotate(90deg) translate(-50%, 0%));
                            @include transition(0.3s);
                            position: absolute;
                            top: 50%;
                            right: 0;
                        }
                        
                        &.collapsed{
                            & i{
                                background-color: #d9e4ff;
                                color: $theme-color;
                                @include transform(rotate(0) translateY(-50%));
                            }
                        }
                    }
                }
                
                & .card-body{
                    padding: 0 30px 25px;
                    
                    @media #{$lg}{
                        padding: 0 20px 15px;
                    }
                    @media #{$xs}{
                        padding: 0 20px 15px;
                    }
                    @media #{$sm}{
                        padding: 0 30px 25px;
                    }
                    
                    & .text{
                    }
                }
            }
        }
    }
}


.faq-call{
    position: relative;
    margin-left: 45px;
    
    @media #{$lg}{
        margin-left: 25px;
    }
    @media #{$md}{
        margin-left: 0;
    }
    @media #{$xs}{
        margin-left: 0;
    }
    
    & .faq-call-image{
        position: relative;
        
        & img{
            width: 100%;
        }
        
        &::before{
            position: absolute;
            content: '';
            background-color: rgba(33, 40, 73, 0.45);
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
    }
    
    & .faq-content{
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        @include transform(translateY(-50%));
        padding: 50px;
        padding-right: 30px;
        
        @media #{$xs}{
            padding: 0 25px;
        }
        
        & i{
            font-size: 90px;
            color: $white;
            line-height: 80px;
            margin-bottom: 40px;
            
            @media #{$lg}{
                font-size: 70px;
                line-height: 60px;
            }
            @media #{$xs}{
                font-size: 50px;
                line-height: 45px;
                margin-bottom: 30px;
            }
        }
        & .faq-title{
            font-size: 50px;
            font-weight: 600;
            color: $white;
            padding-bottom: 10px;
            
            @media #{$lg}{
                font-size: 40px;
            }
            @media #{$xs}{
                font-size: 28px;
            }
        }
        & .main-btn{
            line-height: 60px;
            height: 60px;
            border-radius: 50px;
            margin-top: 25px;
                  
            @media #{$xs}{
                line-height: 50px;
                height: 50px;
            }
        }
    }
}