/*===========================
     10.BLOG css 
===========================*/


.blog-area{
    @media #{$md}{
        padding-top: 95px;
        padding-bottom: 100px;
    }
    @media #{$xs}{
        padding-top: 75px;
        padding-bottom: 80px;
    }
}


.single-blog{
    & .blog-thumb{
        overflow: hidden;
        & a{
            display: block;
            
            & img{
                width: 100%;
                @include transition(0.3s);
            }
        }
    }
    & .blog-content{
        padding: 20px;
        border: 5px solid rgba(72, 127, 255, 0.1);
        border-top: 0;
        background-color: $white;
        @include transition(0.3s);
        
        & .sub-title{
            font-size: 14px;
            font-weight: 400;
            color: $theme-color;
            
            @media #{$sm}{
                font-size: 16px;
            }
        }
        & .title{
            & a{
                font-size: 20px;
                font-weight: 600;
                color: $heading-color;
                margin-top: 15px;
                
                @media #{$sm}{
                    font-size: 24px;
                }
            }
        }
        & .more{
            font-size: 14px;
            text-transform: uppercase;
            color: $theme-color;
            font-weight: 500;
            margin-top: 15px;
            
            & i{
                margin-right: 5px;
            }
        }
    }
    
    &:hover{
        & .blog-thumb{
            & a{
                & img{
                    @include transform(scale(1.2));
                }
            }
        }
        
        & .blog-content{
            border-color: $white;
            @include box-shadow (0px 0px 16px 0px rgba(72,127,255,0.21));
        }
    }
}








.blog-tow-area{
    @media #{$md}{
        padding-top: 50px;
        padding-bottom: 70px;
    }
    @media #{$xs}{
        padding-top: 30px;
        padding-bottom: 50px;
    }
    
    & .section-title{
        padding-bottom: 120px;
        
        @media #{$md}{
            padding-bottom: 70px;
        }
        @media #{$xs}{
            padding-bottom: 70px;
        }
    }
}





.blog-tow-active{
    & .slick-arrow{
        position: absolute;
        z-index: 5;
        left: -365px;
        bottom: 110px;
        
        @media #{$lg}{
            left: -305px;
        }
        @media #{$md}{
            left: 15px;
            top: -60px;
            bottom: auto;
        }
        @media #{$xs}{
            left: 15px;
            top: -60px;
            bottom: auto;
        }
                
        &.next{
            left: -290px;
            
            @media #{$lg}{
                left: -240px;
            }
            
            @media #{$md}{
                left: 90px;
            }
            @media #{$xs}{
                left: 90px;
            }
        }
        
        & i{
            width: 55px;
            height: 55px;
            line-height: 55px;
            text-align: center;
            background-color: $gray-2;
            border-radius: 50%;
            cursor: pointer;
            font-size: 16px;
            color: $theme-color;
            @include transition(0.3s);
            
            @media #{$lg}{
                width: 45px;
                height: 45px;
                line-height: 45px;
            }
            
            &:hover{
                background-color: $theme-color;
                color: $white;
            }
        }
    }
}