/** {
    outline: 1px solid #f00 !important;
}*/

.blog-area {
    padding: 100px 0;
}

    .blog-area .blog-box {
        border: 1px solid #eeeeee;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        border-radius: 6px;
        -webkit-transition: 0.2s ease;
        -moz-transition: 0.2s ease;
        -ms-transition: 0.2s ease;
        -o-transition: 0.2s ease;
        transition: 0.2s ease;
        margin-bottom: 30px;
        max-height: 500px;
        
    }

        .blog-area .blog-box .blog-img {
            position: relative;
        }

            .blog-area .blog-box .blog-img img {
                -webkit-border-radius: 6px;
                -moz-border-radius: 6px;
                -ms-border-radius: 6px;
                border-radius: 6px;
                width:100%;
                height:200px;
                object-fit:cover;
            }

            .blog-area .blog-box .blog-img span {
                position: absolute;
                top: 15px;
                left: 15px;
                background: rgba(255, 255, 255, 0.8);
                color: #081c63;
                width: 60px;
                height: 65px;
                font-size: 30px;
                font-weight: 600;
                text-align: center;
                -webkit-border-radius: 6px;
                -moz-border-radius: 6px;
                -ms-border-radius: 6px;
                border-radius: 6px;
            }

                .blog-area .blog-box .blog-img span small {
                    display: block;
                    font-size: 14px;
                    font-weight: 600;
                    margin-top: -10px;
                }

        .blog-area .blog-box .img-content {
            padding: 20px 25px;
           
        }

            .blog-area .blog-box .img-content h6 {
                margin-bottom: 10px;
            }

                .blog-area .blog-box .img-content h6 a {
                    color: #444444;
                    font-weight: 600;
                    line-height: 20px;
                }

                    .blog-area .blog-box .img-content h6 a:hover {
                        color: #081c63;
                    }

            .blog-area .blog-box .img-content p {
                font-size: 15px;
                color: #666666;
              
                
                text-align: justify;
                text-overflow: ellipsis;
                overflow: hidden;
                display: -webkit-box !important;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
                white-space: normal;
            }

            .blog-area .blog-box .img-content ul {
                padding-top: 12px;
            }

                .blog-area .blog-box .img-content ul li a {
                    font-size: 14px;
                    color: #969696;
                }

                    .blog-area .blog-box .img-content ul li a i {
                        font-size: 15px;
                        color: #c08a11;
                        margin-left: 5px;
                    }

                    .blog-area .blog-box .img-content ul li a:hover {
                        color: #c08a11;
                    }

        .blog-area .blog-box:hover {
            -webkit-box-shadow: 0 18px 38px rgba(0, 0, 0, 0.2);
            box-shadow: 0 18px 38px rgba(0, 0, 0, 0.2);
        }

    .blog-area .pagination-box {
        margin-top: 15px;
    }

        .blog-area .pagination-box ul li a {
            font-size: 15px;
            color: #567ed2;
            display: inline-block;
            width: 35px;
            height: 35px;
            font-weight: 600;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            -ms-border-radius: 30px;
            border-radius: 30px;
            padding-top: 7px;
        }

        .blog-area .pagination-box ul li.active a {
            background: #567ed2;
            color: #fff;
        }