/* BREADCRUMB */
.breadcrumb {background-color: #f5f5f5; padding-block: 8px; --_c-grey-600: #626568;}
.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 */
.post {padding-block: 30px;}
.post .content_wrap {display: grid; grid-template-columns: minmax(750px,850px) 289px; 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 > img {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 :where(h2, h3, h4, h5, h6) {font-size: var(--fs-base, 16px);}
.post .blog_content h2 {font-size: var(--fs-lg);}
.post .blog_content h3 {font-size: var(--fs-md)}
.post .blog_content h4 {font-size: calc(var(--fs-md) - 4px);}
.post .blog_content h5 {font-size: var(--fs-sm);}
.post .blog_content h6 {font-size: var(--fs-base);}
.post .blog_content :where(ul, ol) {margin-bottom: 15px;}
.post .blog_content :where(ul, ol) li {color: var(--c-tertiary); margin-block: 1px;}
.post .blog_content ul:not(.socail_icons) li {list-style: disc; list-style-position: inside;}
.post .blog_content ol li {list-style: decimal; list-style-position: inside;}
.post .blog_content p a:hover {color:var(--c-secondary);}
.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);}
<!--.post .blog_content table{border-collapse: collapse;}-->
<!--.post .blog_content table:first-child td{font-weight:bold}-->
<!--.post .blog_content table td{    border: 1px solid;padding:8px}-->
.post .blog_content  table { border-collapse: collapse !important; width: 100%; margin-bottom:20px; }
.post .blog_content  th,
.post .blog_content  td { border: 1px solid #000 !important; padding: 8px;}

/* Google Captcha Size Adjust */
.g-recaptcha > * {width: 266px !important;}
.g-recaptcha iframe {width: 270px;}
.rc-anchor-normal {width: 266px;}
.rc-anchor-content {width: 172px !important;}
.rc-anchor-container {width: 264px;}
.rc-anchor-normal .rc-anchor-checkbox-label {width: 120px !important;}
.rc-anchor-normal .rc-anchor-pt {width: 220px;}
 
/* MEDIA QUERIES */
@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%;}
}