/*=========== blog_top_post_area css ==========*/
.blog_top_post{
    box-shadow: 0 3px 6px 0 rgba(4, 73, 89, 0.06);
    border-radius: 6px;
    margin: 0;
    .p_top_img{
        position: relative;
        padding-right: 0;
        .p_img{
            position: absolute;
            padding-right: 0;
            height: 100%;
            top: 0;
            right: 0;
            width: 100%;
            background: url("../img/blog-grid/top_post.jpg");
            background-size: cover;
        }
    }
    .b_top_post_content{
        padding: 50px 30px 50px 50px;
        .post_tag{
            padding-bottom: 15px;   
        }
        h3{
            font-size: 26px;
            font-weight: 500;
            line-height: 36px;
            margin-bottom: 17px;
            transition: color 0.2s linear;
            &:hover{
                color: $blue;
            }
        }
        .learn_btn{
          color: #6b707f;
          &:hover {
            color: #41B782;
          }
        }
        p{
            margin-bottom: 22px;
        }
        .post_author{
            padding-top: 45px;
        }
    }
}
.post_tag{
    a{
        font-size: 14px;
        color: $p_color;
        display: inline-block;
        &.cat-Docly{
            color: #fd8d2a;
        }
        &.cat-megento {
            color: #f26322;
        }
        &.cat-woocommerce {
            color: #96588a;
        }
        &.c_blue{
            color: $blue;
        }
        &.cat-laravel{
            color: #ff2d20;
        }
        & + a{
            padding-left: 10px;
            &:before{
                content: "";
                width: 1px;
                height: 13px;
                background: #B7B9BE;
                display: inline-block;
                margin-right: 13px;
            }
        }
    }
}
.post_author{
    .round_img{
        border-radius: 50%;
        overflow: hidden;
        margin-right: 15px;
        img {
            height: 40px;
            width: auto;
        }
    }
    .author_text{
        margin-top: 5px;
        h4{
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 0;
            color: #1d2746;
        }
        .date{
            font-size: 13px;
            font-weight: 400;
            color: $p_color;
        }
    }
}
/*=========== blog_top_post_area css ==========*/

/*=========== Start blog_grid_area css ==========*/
.doc_blog_grid_area{ 
    padding-bottom: 100px;
}
.blog_grid_inner{
    border-top: 1px solid #e7edf0;
}
.blog_tab{
    .nav-item{
        margin-bottom: 0;
        .nav-link{
            padding: 17px 21px;
            border: 0;
            border-radius: 0;
            font-weight: 500;
            color: #858997;
            font-size: 14px;
            position: relative;
            background: transparent;
            transition: all 0.2s ease-in;
            &:before{
                content: "";
                width: 100%;
                position: absolute;
                top: 0;
                height: 2px;
                left: 0;
                background: $blue;
                transform: scale(0);
                transform-origin: 50% 50%;
                transition: all 0.3s ease-in;
            }
            &.active,&:hover{
                background: #e9f6f9;
                color: $blue;
                &:before{
                    transform: scale(1);
                }
            }
        }
        &.cat-laravel{
            .nav-link{
              &:hover{
                  background: rgba(255, 45, 32, .2);
                  color: rgba(255, 45, 32, 1);
              }
              &:before{
                  background: rgba(255, 45, 32, 1);
              }
            }
        }
        &.cat-Docly {
            .nav-link {
                &:hover {
                    background: rgba(253, 141, 42, 0.2);
                    color: rgba(253, 141, 42, 1);
                }
                &:before {
                    background: rgba(253, 141, 42, 1);
                }
            }
        }
        &.cat-megento {
            .nav-link {
                &:hover {
                    background: rgba(242, 99, 34, .2);
                    color: rgba(242, 99, 34, 1);
                }
                &:before {
                    background: rgba(242, 99, 34, 1);
                }
            }
        }
        &.cat-woocommerce {
            .nav-link {
                &:hover {
                    background: rgba(150, 88, 138, .2);
                    color: rgba(150, 88, 138, 1);
                }
                &:before {
                    background: rgba(150, 88, 138, 1);
                }
            }
        }
    }
}
.blog_grid_tab {
    padding-top: 60px;
    margin-bottom: -40px;
}
.b_title{
    font-size: 22px;
    font-weight: 500;
    line-height: 30px;
    transition: all 0.2s linear;
    &:hover{
        color: $blue;
    }
}
.blog_grid_post{
    border-radius: 4px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 3px 6px 0 rgba(4, 73, 89, 0.06);
    margin-bottom: 40px;
    transition: all 0.3s linear;
    overflow: hidden;
    cursor: pointer;
    .grid_post_content{
        padding: 20px 30px 25px;
        .post_tag{
            padding-bottom: 10px;
        }
        .b_title{
            margin-bottom: 18px;
        }
        .post_author{
            padding-top: 18px;
        }
    }
    &:hover{
        box-shadow: 0 20px 24px 0 rgba(4, 73, 89, 0.1);
    }
}

.doc_blog_grid_area_two{
    padding: 100px 0 120px;
}
/*=========== End blog_grid_area css ==========*/

/*=========== Start blog_area css ==========*/
.blog_area{
    padding: 100px 0 120px;
}
.blog_single_item{
    .blog_single_img{
        display: block;
        margin-bottom: 25px;
        img{
            max-width: 100%;
        }
    }
    p{
        font-size: 16px;
        line-height: 30px;
        margin-bottom: 26px;
        a{
            color: $blue;
            text-decoration: underline;
        }
    }
}
blockquote{
    background: #f3f8f9;
    border-left: 4px solid $blue;
    font-size: 20px;
    padding: 50px 40px;
    position: relative;
    z-index: 0;
    margin: 46px 0;
    &:before,&:after{
        content: "";
        position: absolute;
        z-index: -1;
    }
    &:before{
        background: url("../img/blog-classic/quote_top.png") no-repeat scroll left top;
        width: 132px;
        height: 81px;
        top: 0;
    }
    &:after{
        background: url("../img/blog-classic/quote_bottom.png") no-repeat scroll left bottom;
        width: 77px;
        height: 75px;
        right: 40px;
        bottom: 30px;
    }
    .c_head{
        color: $p_color;
        font-weight: 400;
        line-height: 34px;
        margin-bottom: 45px;
    }
    .author{
        font-weight: 500;
        font-size: 16px;
        color: $h_title;
    }
}
.single_post_two{
    padding-top: 10px;
    h2{
        font-size: 30px;
        font-weight: 500;
        margin-bottom: 15px;
    }
    img{
        margin-bottom: 25px;
        max-width: 100%;
    }
    p{
        margin-bottom: 28px;
    }
}
.blog_social{
    padding-top: 20px;
    h5{
        font-size: 16px;
        margin-bottom: 0;
    }
    .f_social_icon{
        display: inline-block;
        margin-top: 28px;
        position: relative;
        z-index: 0;
        padding-top: 0;
        padding-left: 24px;
        padding-right: 24px;
        &:before,&:after{
            content: "";
            width: 105%;
            position: absolute;
            top: 50%;
            height: 1px;
            background: #dde5e7;
        }
        &:before{
            left: -103%;
        }
        &:after{
            right: -103%;
        }
        li{
            a{
                margin-right: 0;
                border: 1px solid #e5edef;
                color: #989da9;
                width: 44px;
                height: 44px;
                line-height: 44px;
            }
            & + li{
                margin-left: 5px;
            }
        }
    }
}
.blog_post_author{
    background: #f3f8f9;
    padding: 40px;
    padding-right: 70px;
    margin-top: 35px;
    border-radius: 5px;
    .author_img{
        width: 70px;
        height: 70px;
        border-radius: 50%;
        margin-right: 30px;
        overflow: hidden;
    }
    .media-body{
        h5{
            font-weight: 500;
            font-size: 18px;
            margin-bottom: 20px;
        }
        p{
            margin-bottom: 0;
        }
    }
}
.comment_inner{   
    padding-top: 80px;
}
.comment_box{
    margin-bottom: 0;
    .post_comment{
        .comment_author{
            padding-top: 40px;
            .img_rounded{
                border-radius: 50%;
                margin-right: 30px;
            }
            .media-body{
                border-bottom: 1px solid #dde5e7;
                padding-bottom: 24px;
                .comment_info{
                    h3{
                        font-size: 16px;
                        font-weight: 500;
                        margin-bottom: 5px;
                    }
                    .comment_date{
                        font-size: 14px;
                        font-weight: 400;
                        color: #6b707f;
                        margin-bottom: 15px;
                    }
                }
                .comment_reply{
                    font-size: 14px;
                    font-weight: 500;
                    color: $h_title;
                    transition: all 0.2s linear;
                    i{
                        vertical-align: middle;
                        font-size: 18px;
                        position: relative;
                        top: -2px;
                        padding-right: 5px;
                    }
                    &:hover{
                        color: $blue;
                    }
                }
            }
        }
        .reply_comment{
            padding-left: 80px;
        }
    }
}
.blog_comment_box{
    padding-top: 80px;
    p{
        margin-bottom: 0;
    }
    .get_quote_form{
        padding-top: 40px;
        .form-group{
            margin-bottom: 30px;
            .form-control{
                height: 60px;
                border-radius: 4px;
                border: 1px solid #e1e8ea;
                font-size: 14px;
                line-height: 1.4;
                padding-left: 30px;
                @include placeholder{
                    color: $p_color;
                }
                &:focus{
                    box-shadow: 0 20px 30px 0 rgba(4, 73, 89, 0.1);
                    border-color: rgb(244, 248, 248);
                }
                &.message{
                    height: 160px;
                    padding-top: 22px;
                }
            }
        }
        .thm_btn{
            padding: 9px 35px;
            box-shadow: none;
            &:hover{
                box-shadow: 0 20px 30px 0 rgba(12, 118, 142, 0.24);
            }
        }
    }
}

/*============= doc_blog_classic_area css ==============*/
.doc_blog_classic_area{
    blockquote{
        margin-top: 0;
        margin-bottom: 50px;
    }
}
.blog_classic_item{
    overflow: hidden;
    margin-bottom: 50px;
    transition: all 0.2s linear;
    cursor: pointer;
    .b_top_post_content{
        padding: 26px 40px 30px;
        .post_tag{
            padding-bottom: 10px;
        }
        .p_bottom{
            align-items: center;
            .learn_btn {
                color: #1d2746;
                &:hover{
                    color: $blue;
                }
            }
        }
        .post_author{
            padding-top: 0;
            align-items: center;
        }
    }
    &:hover{
        box-shadow: 0 20px 24px 0 rgba(4, 73, 89, 0.1);
    }
}
.video_post{
    position: relative;
    z-index: 1;
    &:before{
        content: "";
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(9, 16, 50, 0.20);
        position: absolute;
        z-index: 0;
    }
}
.video_icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: white;
    box-shadow: 0 20px 40px 0 rgba(1, 16, 58, 0.14);
    text-align: center;
    line-height: 75px;
    font-size: 30px;
    position: absolute;
    transition: all 0.3s linear;
    display: inline-block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    &:before{
        content: "";
        width: 100%;
        height: 100%;
        border: 0.2px solid #fff;
        border-radius: 50%;
        opacity: 0.60;
        position: absolute;
        left: 0;
        transform: scale(1.5);
    }
    i{
        color: $blue;
        text-shadow: 0 6px 13px  rgba(12, 118, 142, 0.6);
        position: relative;
        &:after{
            width: 300%;
            height: 300%;
            position: absolute;
            left: 50%;
            top: 50%;
            border-radius: 50%;
            box-shadow: 0 1px 15px 1px rgba(255, 255, 255, 0.5);
            content: "";
            -webkit-animation: pulse 2s infinite;
            -webkit-transform: scale(8);
            -ms-transform: scale(8);
            transform: scale(8);
            animation: pulse 2s infinite;
        }
    }
}
.blog_link_post{
    background: #f3f8f9;
    border-left: 4px solid $blue;
    padding: 45px 40px;
    line-height: 34px;
    position: relative;
    overflow: hidden;
    margin-bottom: 50px;
    &:before,&:after{
        content: "";
        position: absolute;
    }
    &:before{
        background: url("../img/blog-classic/icon_01.png") no-repeat;
        top: 5px;
        left: 40px;
        width: 42px;
        height: 41px;
    }
    &:after{
        background: url("../img/blog-classic/icon_02.png") no-repeat;
        bottom: -35px;
        right: 30px;
        width: 100px;
        height: 100px;
    }
    p{
        font-size: 20px;
        color: $p_color;
        margin-bottom: 0;
        transition: color 0.2s linear;
        &:hover{
            color: $blue;
        }
    }
}

.blog_related_post{
    padding-top: 80px;
    .c_head{
        margin-bottom: 45px;
    }
    .row{
        margin-bottom: -40px;
    }
    .blog_grid_post {
        box-shadow: none;
        img{
            border-radius: 4px;
            max-width: 100%;
        }
    }
    .grid_post_content{
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
        .post_tag{
            padding-bottom: 4px;
        } 
        .b_title{
            font-size: 18px;
            line-height: 24px;
        }
        p{
            margin-bottom: 0;
        }
    }
}
/*============ keyframes animation  =============*/
@-webkit-keyframes pulse {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2);
  }
}

@keyframes pulse {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2);
  }
}

/*============= doc_blog_classic_area css ==============*/

.pagination{
    .page-numbers{
        width: 36px;
        height: 36px;
        display: inline-flex;
        border-radius: 4px;
        border: 1px solid #a7e1ed;
        text-align: center;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        vertical-align: middle;
        color: $blue;
        transition: all 0.2s linear;
        i{
            font-size: 24px;
        }
        & + .page-numbers{
            margin-left: 10px;
        }
        &:hover,&.current{
            background-color: rgb(16, 179, 214);
            border-color: rgb(16, 179, 214);
            box-shadow: 0 20px 30px 0 rgba(12, 118, 142, 0.24);
            color: #fff;
        }
        &.current{
            box-shadow: none;
        }
    }
}
/*=========== End blog_area css ==========*/



/*=========== Start blog_sidebar css ==========*/
.blog_sidebar{
}

.widget{
    .c_head{
        margin-bottom: 35px;
    }
    & + .widget{
        margin-top: 53px;
    }
    > ul.list-unstyled{
        margin-top: -10px;
    }
} 
.about_widget{
    .img{
        border: 1px solid #e5edef;
        padding: 8px;
        border-radius: 4px;
        img{
            max-width: 100%;
        }
    }
    .text{
        padding-top: 28px;
        h3{
            font-family: $great;
            font-size: 40px;
            font-weight: 400;
            margin-bottom: 12px;
        }
        p{
            margin-bottom: 0;
        }
    }
}
.categorie_widget{
}
.categorie_list{
    margin-bottom: 0;
    li{
        a{
            font-size: 16px;
            font-weight: 400;
            color: $h_title;
            position: relative;
            padding-left: 20px;
            &:before{
                content: "";
                width: 6px;
                height: 6px;
                background: #aab0c0;
                position: absolute;
                left: 0;
                top: 6.5px;
            }
            span{
                padding-left: 10px;
            }
            &:hover{
                color: $blue;
                &:before{
                    background: $blue;
                }
            }
        }
        & + li{
            margin-top: 8px;
        }
    }
}
.recent_post_item{
    align-items: center;
    img{
        border-radius: 4px;
        margin-right: 20px;
    }
    .media-body{
        h5{
            font-size: 16px;
            line-height: 20px;
            font-weight: 500;
            transition: color 0.2s linear;
            &:hover{
                color: $blue;
            }
        }
        .entry_post_date{
            font-size: 14px;
            color: $p_color;
        }
    }
    & + .recent_post_item{
        margin-top: 20px;
    }
}

.tag_widget{
        
}
.w_tag_list{
    display: flex;
    flex-wrap: wrap;
    margin: -5px;
    li{
        margin: 4px;
        a{
            color: $p_color;
            padding: 2px 18px;
            display: inline-block;
            background: #f3f8f9;
            font-size: 14px;
            border-radius: 4px;
            transition: all 0.2s linear;
            &:hover{
                box-shadow: 0 10px 20px 0 rgba(12, 118, 142, 0.24);
                background: $blue;
                color: #fff;
            }
        }
    }
}
.comments_widget{
    margin-bottom: 0;
    li{
        h6{
            font-size: 13px;
            font-weight: 500;
            color: $h_title;
            margin-bottom: 12px;
            i{
                color: #6b707f;
                padding-right: 8px;
            }
        }
        .text{
            display: block;
            background-color: rgb(243, 248, 249);
            border: 1px solid rgb(231, 237, 238);
            border-radius: 4px;
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            color: #686d7d;
            padding: 8px 24px;
        }
        & + li{
            margin-top: 23px;
        }
    }
}
.instragram_info{
    margin: -5px;
    display: flex;
    flex-wrap: wrap;
    .instragram_item{
        display: block;
        margin: 5px;
        position: relative;
        z-index: 0;
        border-radius: 4px;
        overflow: hidden;
        transition: all 0.1s linear;
        width: calc(90% / 3);
        img{
            max-width: 100%;
        }
        &:before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(29, 39, 70, 0.50);
            z-index: 0;
            opacity: 0;
            transition: all 0.2s linear;
        }
        &:hover{
            &:before{
                opacity: 1;
            }
        }
    }
}
/*=========== End blog_sidebar css ==========*/