/************************************/
/***       15. Our Blog css       ***/
/************************************/

.our-blog{
    padding: 100px 0 70px;
}

.post-item{
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

.post-featured-image{
    position: relative;
    margin-bottom: 20px;
}

.post-featured-image a{
    cursor: none;
    display: block;
    border-radius: 20px;
    overflow: hidden;
}

.post-featured-image figure{
    display: block;
}

.post-featured-image img{
    width: 100%;
    aspect-ratio: 1 / 0.766;
    object-fit: cover;
    transition: all 0.6s ease-in-out;
    height: auto;
}

.post-item:hover .post-featured-image img{
    transform: scale(1.08);
}

.post-item-content{
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 25px;
    padding-bottom: 25px;
}

.post-item-content h2{
    font-size: 20px;
    line-height: 1.4em;
}

.post-item-content h2 a{
    display: inline-block;
    color: inherit;
}

.post-item-content p{
    margin: 15px 0 0;
}

/************************************/
/***    19. Blog Archive css      ***/
/************************************/

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

.page-pagination{
    margin-top: 30px;
    text-align: center;
}

.page-pagination ul{
    justify-content: center;
    padding: 0;
    margin: 0;
}

.page-pagination ul li a,
.page-pagination ul li span{
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    background: var(--secondary-color);
    color: var(--primary-color);
    border-radius: 10px;
    width: 40px;
    height: 40px;
    margin: 0 5px;
    font-weight: 600;
    line-height: 1em;
    transition: all 0.3s ease-in-out;
}

.page-pagination ul li.active span, 
.page-pagination ul li a:hover{
    background: var(--accent-color);
}


/************************************/
/***     20. Blog Single css      ***/
/************************************/

.page-single-post{
    padding: 100px 0;
}

.post-single-meta{
    margin-top: 5px;
}

.post-single-meta ol li{
    font-size: 18px;
    color: var(--white-color);
    margin-right: 15px;
}

.post-single-meta ol li:last-child{
    margin-right: 0;
}

.post-single-meta ol li i{
    font-size: 18px;
    color: var(--white-color);
    margin-right: 5px;
}

.post-image{
    position: relative;
    margin-bottom: 30px;
}

.post-image figure{
    display: block; 
    border-radius: 20px;
    overflow: hidden;
}

.post-image img{
    width: 100%;
    aspect-ratio: 1 / 0.50;
    object-fit: cover;
    border-radius: 20px;
}

.post-content{
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}

.post-entry{
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.post-entry:after{
    content: '';
    display: block;
    clear: both;
}

.post-entry a{
    color: var(--accent-color);
}

.post-entry h1,
.post-entry h2,
.post-entry h3,
.post-entry h4,
.post-entry h5,
.post-entry h6{
    font-weight: 600;
    line-height: 1.1em;
    margin: 0 0 0.42em;
}

.post-entry h1{
    font-size: 86px;
}

.post-entry h2{
    font-size: 48px;
}

.post-entry h3{
    font-size: 40px;
}

.post-entry h4{
    font-size: 30px;
}

.post-entry h5{
    font-size: 24px;
}

.post-entry h6{
    font-size: 20px;
}

.post-entry p{
    margin-bottom: 20px;
}

.post-entry p:last-child{
    margin-bottom: 0;
}

.post-entry p strong{
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 600;
}

.post-entry ol{
    margin: 0 0 30px;
}

.post-entry ul{
    padding: 0;
    margin: 20px 0 20px;
    padding-left: 20px;
}

.post-entry ol li,
.post-entry ul li{
    position: relative;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5em;
    color: var(--text-color);
    margin-bottom: 15px;
}

.post-entry ul li:last-child{
    margin-bottom: 0;
}

.post-entry ul ul,
.post-entry ul ol,
.post-entry ol ol,
.post-entry ol ul{
    margin-top: 20px;
    margin-bottom: 0;
}

.post-entry ul ul li:last-child,
.post-entry ul ol li:last-child,
.post-entry ol ol li:last-child,
.post-entry ol ul li:last-child{
    margin-bottom: 0;
}

.post-entry blockquote{
    background: var(--accent-color) url('../images/icon-blockquote.svg');
    background-repeat: no-repeat;
    background-position: 30px 30px;
    background-size: 45px;
    border-radius: 10px;
    padding: 30px 30px 30px 90px;
    margin-bottom: 30px;
}

.post-entry blockquote p{
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4em;
    color: var(--primary-color);
}

.post-entry blockquote p:last-child{
    margin-bottom: 0;
}

.tag-links{
    font-size: 20px;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.post-tags .tag-links a{
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 1em;
    background: var(--accent-color);
    color: var(--primary-color);
    border-radius: 10px;
    padding: 12px 20px;
    transition: all 0.4s ease-in-out;
}

.post-tags .tag-links a:hover{
    background: var(--primary-color);
    color: var(--white-color);
}

.post-social-sharing{
    text-align: right;
}

.post-social-sharing ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.post-social-sharing ul li{
    display: inline-block;
    margin-right: 10px;
}

.post-social-sharing ul li:last-child{
    margin-right: 0;
}

.post-social-sharing ul li a{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--accent-color);
    color: var(--primary-color);
    border-radius: 10px;
    width: 40px;
    height: 40px;
    transition: all 0.4s ease-in-out;
}

.post-social-sharing ul li:hover a{
    background: var(--primary-color);
    color: var(--white-color);
}

.post-social-sharing ul li a i{
    font-size: 18px;
    color: inherit;
}