/*=============================
    19. Blog
===============================*/
.blog-post-item {
    border: none;
    background: $white-color;
    border-radius: 0px;
    margin-bottom: 30px;
}
.blog-post-thumb {
    position: relative;
    border-radius: 0px;
    overflow: hidden;
    margin-bottom: 30px;
    img {
        width: 100%;
        height: 600px;
        object-fit: cover;
        @include xs {
            height: 350px;
        }
    }
}
.blog-post-content .title {
    font-size: 48px;
    font-weight: 600;
    letter-spacing: -0.96px;
    margin-bottom: 23px;
    text-transform: capitalize;
    a {
        color: $title-color;
    }
    @include ml {
        font-size: 40px;
    }
    @include lg {
        font-size: 32px;
        letter-spacing: normal;
    }
    @include xs {
        font-size: 24px;
    }
    @include vxs {
        font-size: 20px;
    }
}
  
.blog-post-meta {
    margin-bottom: 12px;
    .list-wrap {
        display: flex;
        align-items: center;
        gap: 15px 28px;
        flex-wrap: wrap;
        li {
            display: flex;
            align-items: center;
            gap: 8px;
            display: inline-block;    
            position: relative;
            font-size: 18px;
            font-weight: 400;
            font-family: $body-font;
            color: $title-color;
            margin-right: 0;
            a {
                color: $title-color;
            }
            i {
                font-size: 18px;
            }
            &:not(:first-child) {
                &:after {
                    content: '';
                    height: 4px;
                    width: 4px;
                    background-color: $body-color;
                    border-radius: 50%;
                    position: absolute;
                    top: 50%;
                    left: -15px;
                    margin-top: -3px;
                }
            }
        }
    }
}
/*blog post 2************/
.blog-post-item-two {
	margin-bottom: 30px;
    .blog-post-thumb img {
		height: auto;
	}
	.blog-post-content .title {
		font-size: 24px;
		letter-spacing: normal;
		@include vxs {
			font-size: 22px;
		}
	}
} 
.blog__inner-wrap .row .col-70 {
    width: 70.5%;
    flex: 0 0 auto;
}
@media (max-width: 1199.98px) {
    .blog__inner-wrap .row .col-70 {
      width: 67.5%;
    }
}
@media (max-width: 991.98px) {
    .blog__inner-wrap .row .col-70 {
        width: 100%;
    }
}
.blog__inner-wrap .row .col-30 {
    width: 29.5%;
    flex: 0 0 auto;
}
@media (max-width: 1199.98px) {
    .blog__inner-wrap .row .col-30 {
        width: 32.5%;
    }
}
@media (max-width: 991.98px) {
    .blog__inner-wrap .row .col-30 {
        width: 100%;
    }
}
.blog__sidebar {
    margin-left: 48px;
    @include xl {
        margin-left: 0;
    }
}
@media (max-width: 991.98px) {
    .blog__sidebar {
        margin-top: 100px;
    }
}

/*Blog Details Area**********/
.blog__details-thumb {
    margin-bottom: 44px;
    img {
        border-radius: 0px;
        min-height: 250px;
        object-fit: cover;
    }
}
.blog__details-content > .title {
    margin-bottom: 40px;
    font-size: 48px;
    font-weight: 600;
	line-height: 1.208;
    text-transform: capitalize;
}
@media (max-width: 1199.98px) {
    .blog__details-content > .title {
        font-size: 32px;
    }
}
@media (max-width: 767.98px) {
    .blog__details-content > .title {
        font-size: 28px;
    }
}
.blog__details-content .blog-post-meta {
    margin-bottom: 15px;
}
.blog__details-content > p {
    margin-bottom: 20px;
	font-size: 18px;
}
.blog__details-content .title-two {
    margin-bottom: 20px;
    font-size: 30px;
    font-weight: 600;
    text-transform: capitalize;
}
@media (max-width: 767.98px) {
    .blog__details-content .title-two {
        font-size: 26px;
    }
}
.blog__details-inner {
    margin: 40px 0;
}
.blog__details-inner-thumb {
    position: relative;
	img {
		width: 100%;
	}
}
@media (max-width: 767.98px) {
    .blog__details-inner-thumb {
        margin-bottom: 30px;
    }
}

.blog__details-inner-content .title {
    margin-bottom: 12px;
    font-size: 30px;
    font-weight: 600;
}
@media (max-width: 1199.98px) {
    .blog__details-inner-content .title {
        font-size: 26px;
    }
}
.blog__details-inner-content p {
    margin-bottom: 20px;
    width: 95%;
}
@media (max-width: 1199.98px) {
    .blog__details-inner-content p {
        width: 100%;
    }
}
.blog__details-bottom {
    margin-top: 35px;
    padding-bottom: 44px;
    border-bottom: 2px solid $title-color;
    .post-tags {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        .title {
            margin-bottom: 0;
            font-size: 14px;
        }
        .list-wrap {
            display: flex;
            gap: 13px 24px;
            flex-wrap: wrap;
            li {
                position: relative;
                a {
                    font-size: 18px;
                    background: transparent;
                    font-weight: 400;
                    color: $title-color;
                    display: block;
                }
                &:not(:last-child) {
                    &:after {
                        content: '';
                        background-color: $title-color;
                        position: absolute;
                        top: 50%;
                        transform: translate(0, -50%);
                        right: -14px;
                        width: 2px;
                        height: 16px;
                    }
                }
            }
        }
    }
    .post-share {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: flex-end;
        .title {
            margin-bottom: 0;
            font-size: 18px;
            font-weight: 400;
            font-family: $body-font;
            margin-right: 10px;
        }
        .social-btn {
            a {
                font-size: 18px;
            }
        }
    }
}  
@media (max-width: 767.98px) {
    .blog__details-bottom .post-share {
        justify-content: flex-start;
        margin-top: 20px;
    }
}

.blog__avatar-wrap {
    margin-top: 100px;
    margin-bottom: 100px;
    display: flex;
    align-items: center;
    gap: 35px;
    @include md {
        margin-top: 80px;
        margin-bottom: 80px;
    }
    @include sm {
        display: block;
        .blog__avatar-img img {
            width: auto;
            margin-bottom: 30px;
        }
    }
}
.blog__avatar-img {
    flex: none;
    img {
        width: 100%;
        border-radius: 0;
    }
}
.blog__avatar-info {
    .name {
        font-size: 24px;
        font-weight: 600;
        font-family: $title-font;
        margin-bottom: 16px;
        a {
            color: $title-color;
        }
    }
    p {
        font-size: 18px;
        margin-bottom: 0;
        line-height: 1.66;
    }
}
/*Blockquote****************/ 
blockquote {
    position: relative;
    z-index: 1;
	display: flex;
	gap: 24px;
	align-items: start;
	margin: 40px 0;
	.blockquote-icon {
		flex: none;
	}
	p {
		font-size: 24px;
		font-weight: 400;
		font-family: $body-font;
		text-transform: capitalize;
		color: $title-color;
		line-height: 1.583;
		letter-spacing: -0.48px;
		margin-top: -0.3em;
		margin-bottom: -0.3em;
	}
    @include xs {
        display: block;
        .blockquote-icon {
            margin-bottom: 20px;
        }
    }
}
@media (max-width: 767.98px) {
    blockquote p {
      	font-size: 18px;
    }
}
/*sidebar-widget**************/
.sidebar__widget {
    border: none;
    padding: 0;
    border-radius: 0px;
    margin-bottom: 60px;
}
.sidebar__widget:last-child {
    margin-bottom: 0;
}
.sidebar__widget-search {
    border: none;
    padding: 0;
    border-radius: 0;
}
.sidebar__search form {
    position: relative;
    input {
        width: 100%;
        border-bottom: 1px solid $title-color;
        border-radius: 0px;
        background: transparent;
        font-size: 18px;
        color: $body-color;
        padding: 0px 60px 0px 0px;
        height: 60px;
        &::placeholder {
            color: rgba(10, 12, 0, 0.50);
            font-size: 18px;
        }
    }
    button {
        border: none;
        position: absolute;
        right: 0px;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border-radius: 0px;
        svg {
            color: $title-color;
            width: 20px;
        }

    }
}
.sidebar__widget-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 30px;
    position: relative;
    letter-spacing: -0.48px;
    margin-top: -0.2em;
}
.sidebar__cat-list {
    margin-top: -0.3em;
}
.sidebar__cat-list .list-wrap li {
    margin-bottom: 17px;
    a {
        display: flex;
        align-items: center;
        text-transform: capitalize;
        color: $body-color;
        font-size: 18px;
        font-weight: 400;
        gap: 5px;
    }
	&:last-child {
		margin-bottom: -0.4em;
	}
}
.sidebar__post-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    align-items: center;
	&:last-child {
		margin-bottom: 0;
	}
}
.sidebar__post-thumb {
    width: 80px;
    flex: 0 0 auto;
}
.sidebar__post-content .title {
    font-size: 16px;
    margin-bottom: 6px;
    font-weight: 600;
    text-transform: capitalize;
    margin-top: -0.3em;
	a {
		color: $title-color;
	}
}
.sidebar__post-content .date {
    display: flex;
    align-items: center;
    color: $title-color;
    font-size: 14px;
    margin-bottom: -0.5em;
}
.sidebar__tag-list {
    margin-top: -0.3em;
}
.sidebar__tag-list .list-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px 24px;
    overflow: hidden;
	li {
		position: relative;
		a {
			font-size: 18px;
			background: transparent;
			font-weight: 400;
			color: $title-color;
			display: block;
		}
		&:not(:last-child) {
			&:after {
				content: '';
				background-color: $title-color;
				position: absolute;
				top: 50%;
				transform: translate(0, -50%);
				right: -14px;
				width: 2px;
				height: 16px;
			}
		}
	}
}
/*Comment Area**************/  
.comments-wrap-title {
    font-size: 36px;
    margin-bottom: 35px;
    margin-top: -0.2em;
    @include sm {
        font-size: 26px;
    }
}
.comments-wrap .latest-comments {
    margin-bottom: 50px;
    .children {
        margin: 0 0 0 135px;
        padding: 0;
    }
}
@media (max-width: 767.98px) {
    .comments-wrap .latest-comments .children {
        margin: 0;
    }
}
.comments-box {
    display: flex;
    align-items: flex-start;
    padding-bottom: 48px;
    gap: 25px;
}
@media (max-width: 767.98px) {
    .comments-box {
        flex-wrap: wrap;
        gap: 20px;
    }
}
.comments-avatar {
    flex: 0 0 auto;
}
.comments-text {
    .avatar-name {
        margin-bottom: 15px;
        .name {
            margin-bottom: 0;
            font-size: 20px;
            font-weight: 600;
        }
        span {
            font-weight: 400;
            font-size: 18px;
            display: block;
            color: $title-color;
            margin-bottom: 6px;
        }
    }
    p {
        margin-bottom: 20px;
        font-size: 18px;
    }
}

.comment-reply-title {
    font-size: 36px;
    margin-bottom: 10px;
    margin-top: -0.2em;
}
@media (max-width: 767.98px) {
    .comment-reply-title {
        font-size: 26px;
    }
}
.comment-form {
    .comment-notes {
        margin-bottom: 35px;
        font-size: 18px;
    }
}
.list-wrap {
    margin: 0px;
    padding: 0px;
    li {
        list-style: none;
    }
}