/*  Breadcrum */
.breadcrumb {background-color: #f5f5f5; padding-block: 8px; --_c-grey-600: #6c757d;}
.breadcrumb li {display: inline-flex; align-items: center;}
.breadcrumb li:not(:last-child)::after {margin-inline: 8px; content: '/';}
.breadcrumb li a {color: var(--c-tertiary);}
.breadcrumb li a:hover {color: var(--c-primary);}
.breadcrumb li a svg {margin-right: 3px;}
.breadcrumb li .active {color: var(--_c-grey-600);}
.breadcrumb * {transition: var(--transition);}

/*  Blog */
.quote-form { max-width: unset !important; }
.blog {padding-block: 30px; --_c-dark-600: #767676; --_c-light-100: #eee;}
.blog .blog_wrapper {display: grid; grid-template-columns:minmax(700px, 857px) minmax(289px, 356px); gap: 30px;}
.blog .blog_post {height: fit-content; display: grid; grid-template-columns: repeat(2 ,1fr); gap: 30px;}
.blog .blog_detail > :nth-child(2) {height: 26px; margin-block: 10px 30px; font-size: calc(var(--fs-sm, 18px) + 1px ); color: var( --c-secondary);}
.blog .author_details {margin-bottom: 5px; display: flex; justify-content: space-between;}
.blog .author_details > * {display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--_c-dark-600);}
.blog .blog_detail p {height: 48px; display: -webkit-box; -webkit-box-orient: vertical; overflow-y: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; word-break: break-all; margin-bottom: 16px;}
.blog .blog_detail button {font-weight: 600; text-transform: capitalize; float: right; padding-inline: 20px;}
.blog .popular_blog > :first-child {display: block; font-size: var(--fs-sm, 18px); padding-bottom: 4px; border-bottom: 1px solid var(--c-secondary);}
.blog .popular_blog > a {display: flex; gap: 15px; padding-bottom: 15px; margin-block: 15px; border-bottom: solid 1px var(--_c-light-100);}
.blog .popular_blog > a > :nth-child(2) {height: 63px; font-size: var(--fs-xs, 14px); font-weight: 500; line-height: 18px; color: var(--c-tertiary); display: -webkit-box; -webkit-box-orient: vertical; overflow-y: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3;}
.blog .popular_blog > a:hover > :nth-child(2) {color: var(--c-secondary);}
:where(.blog, .blog :where(.blog_wrapper, .blog_post, .blog_detail, .blog_detail *)) {transition: var(--transition);}
.pagination {display: flex; align-items: center; justify-content: flex-end; margin-top: 30px; --_-c-light-100: #e9e9e9; grid-column: 1/3;}
.pagination li {border: 1px solid var(--_-c-light-100);}
.pagination :where(a, span) {display: block; background-color: #fff; color: var(--c-tertiary); padding: 8px 12px;}
.pagination a:hover {color: var(--c-secondary);}
.pagination a[aria-hidden="true"] {display: none;}
:where(.pagination, .pagination *) {transition: var(--transition);}
.blog .custom__btn { padding: 6px 14px; float: right; }

@media only screen and (max-width: 1200px){
.blog .blog_wrapper {grid-template-columns: minmax(650px, 857px) 250px;}
}

@media only screen and (max-width: 991px) {
.blog .blog_wrapper { grid-template-columns: 1fr;}
.blog .blog_post img {width: 100%;}
.quote-form form .group {flex-wrap: nowrap;}
.quote-form form :is(input[id="quantity"], input[id="contact"]) {width: auto;}
.blog .popular_blog > a {width: 100%; padding-bottom: 10px; margin-block: 10px;}
.blog .popular_blog > a > :nth-child(2) {height: 58px; font-size: var(--fs-base, 16px);}
}

@media only screen and (max-width: 767px) {
.blog {padding-block: 20px;}
.blog .author_details {flex-wrap: wrap; gap: 5px;}
}

@media only screen and (max-width: 575px){
.blog .blog_post {gap: 15px;}
.blog .blog_detail > :nth-child(2) {margin-block:20px;}
.blog .blog_detail button {padding: 8px 10px;}
}

@media only screen and (max-width: 475px) {
.blog .blog_post {grid-template-columns: 1fr;}
.quote-form form .group {flex-wrap: wrap;}
.quote-form form :is(input[id="quantity"], input[id="contact"]) {width: 100%;}
.pagination {grid-column: 1/2; margin-top: 20px;}
}