/***

==================================================================
	News section
==================================================================

***/

.news-section{
    position: relative;
    background-color: var(--bg-theme-color3);
    padding: 120px 0 70px;
    &.light-bg{
        background-color: var(--theme-color-light);
    }
    &.style-two{
        .news-block{
            .inner-box{
                .image-box{
                    .date{
                        background-color: var(--bg-theme-color4);
                    }
                }
                .content-box{
                    .title{
                        a:hover{
                            color: var(--theme-color4);
                        }
                    }
                }
            }
        }
    }
}

.news-block{
    margin-bottom: 50px;
    .inner-box{
        &:hover{
            .image-box{
                img{
                    transform: scale(1.1);
                }
                .image{
                    a:after {
                        left: 0;
                        right: 0;
                        opacity: 0;
                        transition: all 400ms linear;
                    }
                }
            }
        }
        .image-box{
            position: relative;
            border: 1px solid #e1e1e1;
            padding: 14px;
            .image{
                position: relative;
                overflow: hidden;
                a:after {
                    background: rgba(255, 255, 255, .3);
                    bottom: 0;
                    content: "";
                    left: 50%;
                    position: absolute;
                    right: 51%;
                    top: 0;
                    opacity: 1;
                    pointer-events: none;
                    transition: all 400ms linear;
                }
                img{
                    width: 100%;
                    transition: all 0.3s ease;
                }
            }
            .date{
                position: absolute;
                left: 50%;
                bottom: 14px;
                transform: translateX(-50%);
                font-size: 14px;
                height: 35px;
                width: 137px;
                line-height: 35px;
                text-align: center;
                background-color: var(--theme-color1);
                color: var(--theme-color-light);
            }
        }
        .content-box{
            text-align: center;
            padding-top: 19px;
            .post-meta{
                display: flex;
                justify-content: center;
                margin-bottom: 13px;
                li{
                    position: relative;
                    margin-left: 30px;
                    font-size: 14px;
                    color: var(--text-color);
                    &::before{
                        content: "";
                        position: absolute;
                        top: 13px;
                        left: -15px;
                        width: 3px;
                        height: 3px;
                        background-color: var(--theme-color1);

                    }
                    &:first-child{
                        margin-left: 0;
                        color: var(--theme-color-dark);
                        &:first-child{
                            &::before{
                                display: none;
                            }
                        }
                    }
                }
            }
            .title {
                font-weight: 500;
                margin-bottom: 0;
                a:hover {
                    color: var(--theme-color1);
                }
            }
        }
    }
}