/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/


/* 
    Created on : 18-Nov-2021, 15:36:22
    Author     : Jafran Mjm
*/

@import 'config';

/*body:after{
    content: ' ';
    position: absolute;
    top: 730px;
    left: 0;
    width: 100%;
    height: calc(100% - 730px);
    background: #f0f0f0;
    z-index: -1;
}*/

.container{
    position: relative;
    #container-white-bg{
        position: absolute;
        width: 100%;
        z-index: -1;
        background: #fff;
    }
}

.banner {
    position: relative;
    .img {
        width: 100%;
        height: 643px;
        overflow: hidden;
        img {
            width: 100%;
            min-height: 100%;
        }
    }
    .text {
        display: none;
        height: 180px;
        background:  #e3f5fd;
        position: relative;
        padding: 41px;
        padding-bottom: 40px;
        .title{
            font-size: 26px;
            font-weight: 700;
            line-height: 26px;
            color: #00203e;
        }
        p{
            margin: 0;
        }
        .date-author{
            width: 100%;
            span {
                position: absolute;
                bottom: 41px;
                &.by{
                    left: 41px;
                    font-weight: bold;
                }
                &.date{
                    right: 41px;
                }
            }
        }
    }
    .owl-dots {
        display: none;
    }
    .owl-nav {
        button {
            width: 41px;
            height: 41px;
            position: absolute;
            bottom: 41px;
            @include opacityAnimation2;
            &.owl-prev {
                left: 41px;
                background: rgba(0,28,67,0.3) url(../img/banner-arrow-left.png) no-repeat center center;
                background-size: 30%;
            }
            &.owl-next {
                right: 41px;
                float: right;
                background: rgba(0,28,67,0.3)  url(../img/banner-arrow-right.png) no-repeat center center;
                background-size: 30%;
            }
        }
    }
}

.featured-posts {
    .post {
        float: left;
        width: calc(((100%) / 3));
        background: #fff;
        color: #000;
        padding: 37px 41px 54px 40px;
        position: relative;
        height: 250px;
        &:before {
            content: ' ';
            position: absolute;
            right: -2px;
            top: 50%;
            transform: translateY(-50%);
            height: calc(100% - 60px);
            border-left: 1px solid #e3f5fd;
        }
        h5 {
            font-size: 26px;
            font-weight: 700;
            line-height: 26px;
            color: #00203e;
        }
        p {
            font-size: 17px;
            line-height: 22px;
            color: #000;
            margin-top: 8px;
            margin-bottom: 38px;
        }
        &.active {
            background: #e3f5fd;
            &:before , &.after{
                display: none;
            }
        }
        &.post-3:before {
            display: none;
        }
        .by{
            position: absolute;
            left: 41px;
            bottom: 36px;
            font-weight: bold;
        }
        .date{
            position: absolute;
            right: 41px;
            bottom: 36px;
        }
    }
}

.content-sidebar .content .posts-readmore{
    display: inline-block;
    &.explore{
        float: left;
    }
    &.load-more{
        float: right;
    }
}

.sidebar{
    margin-bottom: 4.5px;
}