/*  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);}

/*  Post */
.quote-form { max-width: unset !important; }
.post {padding-block: 30px;}
.post .content_wrap {display: grid; grid-template-columns: minmax(750px,850px) 359px; gap: 30px;}
.post .blog_content > :first-child {font-size: calc(var(--fs-lg, 30px) + 2px); color: var(--c-secondary); margin-bottom: 10px;}
.post .blog_content p {margin-top: 10px; margin-bottom: 16px; color: var(--c-tertiary); font-weight: 400;}
.post .blog_content :where(h2, h3, h4, h5, h6) {margin-bottom: 10px;}
.post .blog_content :where(h2, h3, h4, h5, h6):has(+ :where(h2, h3, h4, h5, h6)) {margin-bottom: 30px;}
.post .blog_content h2 {font-size: var(--fs-lg, 30px);}
.post .blog_content h3 {font-size: calc(var(--fs-lg, 30px) - 3px);}
.post .blog_content h4 {font-size: var(--fs-md, 24px);}
.post .blog_content h5 {font-size: calc(var(--fs-sm, 18px) + 3px);}
.post .blog_content h6 {font-size: var(--fs-sm, 18px);}
.post .blog_content :where(ul, ol):not(.socail_icons) {padding-left: 16px; margin-bottom: 15px;}
.post .blog_content ul:not(.socail_icons) li {list-style: disc;}
.post .blog_content ol li {list-style: decimal;}
.post .blog_content li {margin-block: 1px;}
.post .blog_content a {display: inline; color: var(--c-primary); text-decoration: underline;}
.post .socail_icons {display: flex; align-items: center; margin-top: 20px;}
.post .socail_icons li {margin-right: 15px; list-style: none;}
.post .socail_icons li a { color: var(--c-tertiary);}
.post .socail_icons li:hover svg {fill: var(--c-primary);}
.post .blog_content > :nth-last-child(2) {display: block; margin-block: 20px; color: var(--c-tertiary);}
.post .popular_blog > :first-child {display: block; font-size: var(--fs-sm, 18px); padding-bottom: 4px; border-bottom: 1px solid var(--c-secondary);}
.post .popular_blog > a {display: flex; gap: 15px; padding-bottom: 15px; margin-block: 15px; border-bottom: solid 1px var(--_c-light-100);}
.post .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;}
.post .popular_blog > a:hover > :nth-child(2) {color: var(--c-secondary);}
:where(.post, .post :where(.content_wrap, .blog_content, .blog_content *, .popular_blog, .popular_blog *)) {transition: var(--transition);}


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

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

@media only screen and (max-width: 767px) {
.post {padding-block: 20px;}
}

@media only screen and (max-width: 475px) {
.quote-form form .group {flex-wrap: wrap;}
.quote-form form :is(input[id="quantity"], input[id="contact"]) {width: 100%;}
}