/*=========================================
            BLOG GRID
==========================================*/

.blog-grid-section{
    background:#fff;
    padding:15px 0 50px;
}

.blog-grid-section .row{
    row-gap:24px;
}


/*=========================================
            BLOG CARD
==========================================*/

.blog-card{

    background:#fff;

    border:1px solid #edf1f5;

    border-radius:2px;

    box-shadow:0 6px 20px rgba(0,51,102,.07);

    transition:.3s ease;

    height:100%;
}

.blog-card:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 35px rgba(0,51,102,.12);

}

.blog-card .card-body{

    padding:22px 22px 12px;

}

.blog-card .card-footer{

    background:#fff;

    border:none;

    padding:0 22px 22px;

}


/*=========================================
                TITLE
==========================================*/

.blog-card-title{

    color:var(--brand-navy-main);

    font-size:20px;

    font-weight:700;

    line-height:1.35;

    margin:0 0 12px;

}


/*=========================================
            DESCRIPTION
==========================================*/

.blog-card-text{

    color:#5d6b7b;

    font-size:15px;

    line-height:1.8;

    margin:0;

}


/*=========================================
                BUTTON
==========================================*/

.blog-btn{

    display:inline-block;

    margin-top:18px;

    padding:10px 28px;

    border:1px solid var(--brand-navy-main);

    border-radius:40px;

    background:transparent;

    color:var(--brand-navy-main);

    font-size:12px;

    font-weight:700;

    letter-spacing:.8px;

    text-decoration:none;

    transition:.3s;
}

.blog-btn:hover{

    background:var(--brand-navy-main);

    color:#fff;

}


/*=========================================
            PAGINATION
==========================================*/

.custom-pagination{

    gap:14px;

    margin:45px 0 15px;
}

.custom-pagination .page-link{

    width:42px;
    height:42px;

    display:flex;
    justify-content:center;
    align-items:center;

    border:none;

    border-radius:50% !important;

    background:#edf2f7;

    color:#64748b;

    transition:.3s;
}

.custom-pagination .page-item.active .page-link{

    background:var(--brand-navy-main);

    color:#fff;

}

.custom-pagination .page-link:hover{

    background:var(--brand-steel-blue);

    color:#fff;

}

.custom-pagination .page-link:focus{

    box-shadow:none;

}


/*=========================================
            RESPONSIVE
==========================================*/

@media (max-width:992px){

    .blog-card-title{

        font-size:18px;

    }

}

@media (max-width:768px){

    .blog-grid-section{

        padding-bottom:35px;

    }

    .blog-card .card-body{

        padding:18px 18px 10px;

    }

    .blog-card .card-footer{

        padding:0 18px 18px;

    }

    .blog-card-title{

        font-size:17px;

        margin-bottom:10px;

    }

    .blog-card-text{

        font-size:14px;

        line-height:1.7;

    }

    .blog-btn{

        margin-top:15px;

    }

}