.blog .subpage-hero {padding: 60px 0;}
.blog .subpage-hero .intro {row-gap: 35px; display: flex; flex-direction: column;}
.blog .subpage-hero .intro h1 {font-size: 40px; line-height: 1.1; font-weight: 700; margin: 0; padding: 0; text-align: center;}
.blog .subpage-hero .intro .container {row-gap: 35px; display: flex; flex-direction: column;}
.blog .subpage-hero .text {margin: 0; padding: 0; text-align: center; color: var(--four-light); display: flex; flex-direction: column; gap: 35px;}
.blog .subpage-hero .text p {margin: 0; padding: 0;}
.blog .subpage-hero .intro:after {height: 3px; content: ''; width: 70px; background-color: var(--two);  display: block; margin: auto; top: 100%; display: table; left: 0; right: 0;}
.blog .search {display: flex; justify-content: flex-end; padding-top: 35px;}
.blog .search form {display: flex; align-items: center; gap: 15px;}
.blog .search form .search-field {padding: 5px 10px; border: 1px solid var(--four-lighted);  color: var(--four-light); width: 100%; display: inline-flex; font-size: 14px;}
.blog .search form .search-field::placeholder {color: var(--four-light);}
.blog .search form .search-submit {display: inline-flex; width: fit-content; padding: 4px 10px; background-color: transparent; color: var(--three);  border: solid 1px var(--three); font-size: 14px;}
.blog .search form .search-submit:hover {border: solid 1px var(--two); color: var(--two); background-color: transparent;}

.blog .blogposts .container {display: flex; flex-direction: column; gap: 35px;}
.blog .blogposts .single-blogpost {display: flex; background: #FFFFFF; box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.05); }
.blog .blogposts .single-blogpost .featured-img {width: 400px; height: auto; object-fit: cover; aspect-ratio: 16/9;}
.blog .blogposts .single-blogpost .post-details {padding: 20px; display: flex; flex-direction: column; gap: 20px; width: 100%; flex: 1;}
.blog .blogposts .single-blogpost .post-details .author-time {display: flex; flex-direction: column; gap: 20px;}
.blog .blogposts .single-blogpost .post-details .author {display: flex; font-size: 12px; align-items: center; gap: 10px;}
.blog .blogposts .single-blogpost .post-details .author a {line-height: 1.1; color: var(--four);}
.blog .blogposts .single-blogpost .post-details .author a:hover {opacity: 0.8;}
.blog .blogposts .single-blogpost .post-details .avatar-img {width: 37px; height: 37px; }
.blog .blogposts .single-blogpost .post-details .time {display: flex; gap: 20px; font-size: 12px;}
.blog .blogposts .single-blogpost .post-details .time .date {display: flex; gap: 15px; white-space: nowrap; line-height: 1; color: var(--four-lighter);}
.blog .blogposts .single-blogpost .post-details .time .date svg {min-width: 10px; min-height: 10px; width: 10px; height: 10px;}
.blog .blogposts .single-blogpost .post-details .time .date svg * {fill: var(--four-lighter);}
.blog .blogposts .single-blogpost .post-details .title {font-size: 24px; color: var(--three-dark); font-weight: 600; line-height: 1.2; }
.blog .blogposts .single-blogpost .post-details .title:hover {opacity: 0.8;}
.blog .blogposts .single-blogpost .post-details .excerpt {flex: 1;}
.blog .blogposts .single-blogpost .post-details .excerpt p {color: var(--four); margin: 0; padding: 0; letter-spacing: 0.2px; font-weight: 300; line-height: 1.8; }
.blog .blogposts .single-blogpost .post-details .read-more {padding: 8px 35px;  background-color: var(--three-dark); color: var(--zero); letter-spacing: 0.4px; font-weight: 300; width: fit-content; font-size: 14px; transition: background-color 0.3s ease; border: solid 1px var(--three-dark); display: inline-flex; align-items: center; justify-content: center; margin-top: 20px;}
.blog .blogposts .single-blogpost .post-details .read-more:hover {background-color: var(--three);}


.blog .pagination {padding: 60px 0;}
.blog .pagination a {display: flex; width: fit-content; padding: 15px 40px; background-color: transparent; color: var(--three);  border: solid 1px var(--three);}
.blog .pagination a:hover {border: solid 1px var(--two); color: var(--two); background-color: transparent;}

@media (max-width: 991.98px) {
	.blog .blogposts .single-blogpost .featured-img {width: 200px;}
}

@media (max-width: 767.98px) {
	.blog .search {justify-content: center;}
	.blog .blogposts .single-blogpost {flex-direction: column;}
	.blog .blogposts .single-blogpost .featured-img {width: 100%; height: 100px; }
	.blog .pagination .row {flex-direction: column; gap: 10px;}
	.blog .pagination a {width: 100%; justify-content: center;}
}

body.blog.ks-rounding-light .search form .search-field {border-radius: 8px;}
body.blog.ks-rounding-strong .search form .search-field {border-radius: 32px;}
body.blog.ks-rounding-light .search form .search-submit {border-radius: 8px;}
body.blog.ks-rounding-strong .search form .search-submit {border-radius: 32px;}
body.blog.ks-rounding-light .blogposts .single-blogpost .post-details .read-more {border-radius: 8px;}
body.blog.ks-rounding-strong .blogposts .single-blogpost .post-details .read-more {border-radius: 32px;}

body.blog.ks-rounding-light .blogposts .single-blogpost {overflow: hidden; border-radius: 8px;}
body.blog.ks-rounding-strong .blogposts .single-blogpost {overflow: hidden; border-radius: 32px;}
body.blog.ks-rounding-light .pagination a {border-radius: 8px;}
body.blog.ks-rounding-strong .pagination a {border-radius: 32px;}