/************************************/
/***      19. Blog Single css     ***/
/************************************/

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

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

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

.post-image figure,
.post-image img{
	aspect-ratio: 1 / 0.50;
	border-radius: 40px;
	object-fit: cover;
}

.post-content{
	width: 100%;
	max-width: 1100px;
	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: 700;
	line-height: 1.2em;
	margin: 0 0 0.6em;
}

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

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

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

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

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

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

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

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

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

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

.post-entry ol li{
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
}

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

.post-entry ul li{
	font-size: 18px;
    font-weight: 500;
    color: var(--text-color);
    position: relative;
    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: url(../../images/icon-blockquote.svg), var(--secondary-color);
	background-repeat: no-repeat;
	background-position: 35px 30px;
    background-size: 58px;
    border-radius: 30px;
    padding: 30px 30px 30px 100px;
    margin-bottom: 30px;
}

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

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

.tag-links{
	font-size: 20px;
	font-weight: 700;
	color: var(--heading-color);
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

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

.post-tags .tag-links a:hover{
	background: var(--secondary-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(--white-color);
	border-radius: 10px;
    width: 36px;
    height: 36px;
    transition: all 0.3s ease-in-out;
}

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

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


/************************************/
/***       Responsive css        ***/
/************************************/

@media only screen and (max-width: 991px) {
    .page-single-post {
        padding: 50px 0;
    }

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

    .post-entry blockquote {
        background-position: 25px 25px;
        background-size: 50px;
        padding: 25px 25px 25px 90px;
        margin-bottom: 20px;
    }

    .post-entry blockquote p {
        font-size: 18px;
    }

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

    .post-entry ul li {
        font-size: 16px;
    }

    .post-tags {
        margin-bottom: 20px;
    }

    .post-social-sharing ul {
        text-align: left;
    }

    .tag-links {
        font-size: 22px;
    }

    .post-tags .tag-links a {
        font-size: 16px;
        padding: 6px 15px;
    }

}

@media only screen and (max-width: 767px) {
    .post-image figure,
	.post-image img {
        aspect-ratio: 1 / 0.70;
        border-radius: 30px;
    }

    .post-entry blockquote {
        background-position: 15px 15px;
        padding: 65px 15px 15px 15px;
    }

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

    .tag-links {
        font-size: 20px;
    }

}
