:root {
                   --blog-primary: #008f52;
                   --blog-primary-dark: #006c3e;
                   --blog-primary-light: #00b56a;
                   --blog-primary-soft: #eaf8f1;
                   --blog-text: #15241d;
                   --blog-body: #33443c;
                   --blog-muted: #65736c;
                   --blog-border: #e5ece8;
                   --blog-surface: #ffffff;
                   --blog-bg: #f6faf8;
                   --blog-image-bg: #edf4f0;
                   --blog-shadow-sm: 0 10px 30px rgba(28, 61, 45, 0.06);
                   --blog-shadow: 0 18px 45px rgba(21, 66, 45, 0.10);
                   --blog-radius-sm: 12px;
                   --blog-radius-md: 18px;
                   --blog-radius-lg: 22px;
               }
               
               .blog-hero {
                   position: relative;
                   overflow: hidden;
                   padding: 88px 0;
                   background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.22), transparent 28%), linear-gradient(135deg, #008f52, #00b56a);
                   color: #fff;
               }
               
               .blog-hero::before,
               .blog-hero::after {
                   content: "";
                   position: absolute;
                   border-radius: 50%;
                   background: rgba(255, 255, 255, 0.10);
               }
               
               .blog-hero::before {
                   width: 260px;
                   height: 260px;
                   top: -110px;
                   right: 8%;
               }
               
               .blog-hero::after {
                   width: 180px;
                   height: 180px;
                   bottom: -90px;
                   left: 8%;
               }
               
               .blog-hero-content {
                   position: relative;
                   z-index: 1;
                   max-width: 720px;
               }
               
               .blog-hero-label {
                   display: inline-flex;
                   align-items: center;
                   gap: 8px;
                   padding: 8px 14px;
                   margin-bottom: 18px;
                   border: 1px solid rgba(255, 255, 255, 0.35);
                   border-radius: 50px;
                   background: rgba(255, 255, 255, 0.13);
                   font-size: 13px;
                   font-weight: 700;
                   letter-spacing: .04em;
                   text-transform: uppercase;
               }
               
               .blog-hero h1 {
                   margin-bottom: 14px;
                   font-size: clamp(38px, 5vw, 64px);
                   line-height: 1.05;
                   font-weight: 800;
               }
               
               .blog-hero p {
                   max-width: 650px;
                   margin: 0;
                   color: rgba(255, 255, 255, .88);
                   font-size: 17px;
                   line-height: 1.75;
               }
               
               .blog-breadcrumb {
                   display: flex;
                   flex-wrap: wrap;
                   gap: 8px;
                   margin-top: 22px;
                   font-size: 14px;
               }
               
               .blog-breadcrumb a,
               .blog-breadcrumb span {
                   color: rgba(255, 255, 255, .92);
               }
               
               .blog-breadcrumb a:hover {
                   color: #fff;
                   text-decoration: underline;
               }
               
               .blog-listing-section {
                   padding: 72px 0;
                   background: var(--blog-bg);
               }
               
               .blog-listing-header {
                   display: flex;
                   align-items: flex-end;
                   justify-content: space-between;
                   gap: 20px;
                   margin-bottom: 28px;
               }
               
               .blog-listing-header h2 {
                   margin: 0 0 8px;
                   color: var(--blog-text);
                   font-size: clamp(28px, 3vw, 40px);
                   font-weight: 800;
               }
               
               .blog-listing-header p {
                   margin: 0;
                   color: var(--blog-muted);
               }
               
               .blog-card {
                   height: 100%;
                   overflow: hidden;
                   border: 1px solid var(--blog-border);
                   border-radius: 22px;
                   background: var(--blog-surface);
                   box-shadow: 0 10px 28px rgba(28, 61, 45, .06);
                   transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
               }
               
               .blog-card:hover {
                   transform: translateY(-7px);
                   border-color: rgba(0, 143, 82, .32);
                   box-shadow: var(--blog-shadow);
               }
               
               .blog-card-image {
                   position: relative;
                   height: 235px;
                   overflow: hidden;
                   /* background: #e9f3ee; */
               }
               
               .blog-card-image img {
                   width: 100%;
                   height: 400px;
                   object-fit: cover;
                   transition: transform .5s ease;
               }
               
               .blog-card:hover .blog-card-image img {
                   transform: scale(1.055);
               }
               
               .blog-category-badge {
                   position: relative;
                   left: 10px;
                   top: 10px;
                   display: inline-flex;
                   align-items: center;
                   min-height: 34px;
                   padding: 7px 13px;
                   border-radius: 50px;
                   background: rgba(0, 143, 82, .92);
                   color: #fff;
                   font-size: 12px;
                   font-weight: 700;
                   backdrop-filter: blur(8px);
               }
               
               .blog-card-body {
                   display: flex;
                   min-height: 260px;
                   flex-direction: column;
                   padding: 24px;
               }
               
               .blog-card-meta {
                   display: flex;
                   flex-wrap: wrap;
                   gap: 14px;
                   margin-bottom: 14px;
                   color: var(--blog-muted);
                   font-size: 13px;
               }
               
               .blog-card-meta span {
                   display: inline-flex;
                   align-items: center;
                   gap: 7px;
               }
               
               .blog-card-title {
                   margin-bottom: 13px;
                   color: var(--blog-text);
                   font-size: 21px;
                   line-height: 1.4;
                   font-weight: 800;
               }
               
               .blog-card-title a {
                   color: inherit;
               }
               
               .blog-card-title a:hover {
                   color: var(--blog-primary);
               }
               
               .blog-card-excerpt {
                   margin-bottom: 22px;
                   color: var(--blog-muted);
                   font-size: 14px;
                   line-height: 1.75;
               }
               
               .blog-read-more {
                   display: inline-flex;
                   align-items: center;
                   gap: 9px;
                   width: fit-content;
                   margin-top: auto;
                   color: var(--blog-primary);
                   font-size: 14px;
                   font-weight: 800;
               }
               
               .blog-read-more i {
                   transition: transform .2s ease;
               }
               
               .blog-read-more:hover {
                   color: var(--blog-primary-dark);
               }
               
               .blog-read-more:hover i {
                   transform: translateX(4px);
               }
               
               .blog-sidebar {
                   position: sticky;
                   top: 110px;
               }
               
               .blog-widget {
                   padding: 25px;
                   margin-bottom: 24px;
                   border: 1px solid var(--blog-border);
                   border-radius: 20px;
                   background: #fff;
                   box-shadow: 0 10px 30px rgba(28, 61, 45, .055);
               }
               
               .blog-widget-title {
                   position: relative;
                   padding-bottom: 13px;
                   margin-bottom: 20px;
                   color: var(--blog-text);
                   font-size: 20px;
                   font-weight: 800;
               }
               
               .blog-widget-title::after {
                   content: "";
                   position: absolute;
                   left: 0;
                   bottom: 0;
                   width: 42px;
                   height: 3px;
                   border-radius: 3px;
                   background: var(--blog-primary);
               }
               
               .blog-search-wrap {
                   position: relative;
               }
               
               .blog-search-box {
                   display: flex;
                   overflow: hidden;
                   border: 1px solid var(--blog-border);
                   border-radius: 14px;
                   background: #fff;
                   transition: border-color .2s ease, box-shadow .2s ease;
               }
               
               .blog-search-box:focus-within {
                   border-color: var(--blog-primary);
                   box-shadow: 0 0 0 4px rgba(0, 143, 82, .09);
               }
               
               .blog-search-box input {
                   width: 100%;
                   min-width: 0;
                   padding: 14px 15px;
                   border: 0;
                   outline: 0;
                   color: var(--blog-text);
                   background: transparent;
               }
               
               .blog-search-box button {
                   width: 52px;
                   border: 0;
                   color: #fff;
                   background: var(--blog-primary);
                   cursor: pointer;
               }
               
               .suggestions-box {
                   position: absolute;
                   z-index: 30;
                   top: calc(100% + 8px);
                   left: 0;
                   right: 0;
                   display: none;
                   max-height: 320px;
                   overflow-y: auto;
                   border: 1px solid var(--blog-border);
                   border-radius: 14px;
                   background: #fff;
                   box-shadow: var(--blog-shadow);
               }
               
               .suggestion-item,
               .suggestion-empty {
                   padding: 12px 14px;
                   color: var(--blog-text);
                   font-size: 13px;
                   line-height: 1.5;
               }
               
               .suggestion-item {
                   border-bottom: 1px solid var(--blog-border);
                   cursor: pointer;
               }
               
               .suggestion-item:last-child {
                   border-bottom: 0;
               }
               
               .suggestion-item:hover {
                   color: var(--blog-primary);
                   background: var(--blog-primary-soft);
               }
               
               .recent-post-item {
                   display: flex;
                   gap: 14px;
                   padding-bottom: 17px;
                   margin-bottom: 17px;
                   border-bottom: 1px solid var(--blog-border);
               }
               
               .recent-post-item:last-child {
                   padding-bottom: 0;
                   margin-bottom: 0;
                   border-bottom: 0;
               }
               
               .recent-post-image {
                   flex: 0 0 84px;
                   width: 84px;
                   height: 74px;
                   overflow: hidden;
                   border-radius: 12px;
                   background: #edf4f0;
               }
               
               .recent-post-image img {
                   width: 100%;
                   height: 100%;
                   object-fit: cover;
               }
               
               .recent-post-content {
                   min-width: 0;
               }
               
               .recent-post-date {
                   display: block;
                   margin-bottom: 5px;
                   color: var(--blog-muted);
                   font-size: 11px;
               }
               
               .recent-post-link {
                   display: -webkit-box;
                   overflow: hidden;
                   color: var(--blog-text);
                   font-size: 13px;
                   line-height: 1.45;
                   font-weight: 750;
                   -webkit-line-clamp: 3;
                   -webkit-box-orient: vertical;
               }
               
               .recent-post-link:hover {
                   color: var(--blog-primary);
               }
               
               .category-list {
                   padding: 0;
                   margin: 0;
                   list-style: none;
               }
               
               .category-list li+li {
                   margin-top: 8px;
               }
               
               .category-list a {
                   display: flex;
                   align-items: center;
                   justify-content: space-between;
                   gap: 12px;
                   padding: 11px 13px;
                   border-radius: 11px;
                   color: var(--blog-text);
                   font-size: 14px;
                   transition: .2s ease;
               }
               
               .category-list a:hover,
               .category-list a.active-cat {
                   color: var(--blog-primary-dark);
                   background: var(--blog-primary-soft);
               }
               
               .category-list a i {
                   color: var(--blog-primary);
                   font-size: 11px;
               }
               
               .blog-empty-state {
                   padding: 60px 30px;
                   border: 1px dashed #bfd7ca;
                   border-radius: 20px;
                   background: #fff;
                   text-align: center;
               }
               
               .blog-empty-state i {
                   margin-bottom: 15px;
                   color: var(--blog-primary);
                   font-size: 42px;
               }
               
               .blog-pagination {
                   display: flex;
                   flex-wrap: wrap;
                   justify-content: center;
                   gap: 8px;
                   margin-top: 38px;
               }
               
               .blog-pagination a,
               .blog-pagination span {
                   display: inline-flex;
                   align-items: center;
                   justify-content: center;
                   min-width: 42px;
                   height: 42px;
                   padding: 0 14px;
                   border: 1px solid var(--blog-border);
                   border-radius: 11px;
                   color: var(--blog-text);
                   background: #fff;
                   font-size: 14px;
                   font-weight: 700;
               }
               
               .blog-pagination a:hover,
               .blog-pagination .active {
                   border-color: var(--blog-primary);
                   color: #fff;
                   background: var(--blog-primary);
               }
               
               @media (max-width: 991.98px) {
                   .blog-sidebar {
                       position: static;
                       margin-top: 36px;
                   }
                   .blog-hero {
                       padding: 68px 0;
                   }
               }
               
               @media (max-width: 767.98px) {
                   .blog-listing-section {
                       padding: 50px 0;
                   }
                   .blog-card-image {
                       height: 220px;
                   }
                   .blog-listing-header {
                       align-items: flex-start;
                       flex-direction: column;
                   }
                   .blog-widget {
                       padding: 21px;
                   }
               }
               
               @media (max-width: 575.98px) {
                   .blog-hero {
                       padding: 56px 0;
                   }
                   .blog-card {
                       border-radius: 17px;
                   }
                   .blog-card-image {
                       height: 205px;
                   }
                   .blog-card-body {
                       min-height: 0;
                       padding: 20px;
                   }
                   .blog-card-title {
                       font-size: 19px;
                   }
               }
               
               .blog-detail-hero {
                   position: relative;
                   overflow: hidden;
                   padding: 74px 0 130px;
                   background: radial-gradient(circle at 88% 15%, rgba(255, 255, 255, .20), transparent 28%), linear-gradient(135deg, #007d48, #00b66a);
                   color: #fff;
               }
               
               .blog-detail-hero::before,
               .blog-detail-hero::after {
                   content: "";
                   position: absolute;
                   border-radius: 50%;
                   background: rgba(255, 255, 255, .09);
               }
               
               .blog-detail-hero::before {
                   width: 270px;
                   height: 270px;
                   top: -125px;
                   right: 8%;
               }
               
               .blog-detail-hero::after {
                   width: 170px;
                   height: 170px;
                   bottom: -85px;
                   left: 6%;
               }
               
               .blog-detail-hero-inner {
                   position: relative;
                   z-index: 1;
                   max-width: 900px;
                   margin: auto;
                   text-align: center;
               }
               
               .blog-detail-category {
                   display: inline-flex;
                   align-items: center;
                   gap: 8px;
                   padding: 8px 15px;
                   margin-bottom: 20px;
                   border: 1px solid rgba(255, 255, 255, .33);
                   border-radius: 50px;
                   color: #fff;
                   background: rgba(255, 255, 255, .13);
                   font-size: 13px;
                   font-weight: 750;
               }
               
               .blog-detail-hero h1 {
                   margin-bottom: 22px;
                   font-size: clamp(34px, 5vw, 60px);
                   line-height: 1.16;
                   font-weight: 850;
               }
               
               .blog-detail-meta {
                   display: flex;
                   flex-wrap: wrap;
                   justify-content: center;
                   gap: 18px;
                   color: rgba(255, 255, 255, .9);
                   font-size: 14px;
               }
               
               .blog-detail-meta span {
                   display: inline-flex;
                   align-items: center;
                   gap: 8px;
               }
               
               .blog-detail-breadcrumb {
                   display: flex;
                   flex-wrap: wrap;
                   justify-content: center;
                   gap: 8px;
                   margin-top: 24px;
                   font-size: 13px;
               }
               
               .blog-detail-breadcrumb a,
               .blog-detail-breadcrumb span {
                   color: rgba(255, 255, 255, .88);
               }
               
               .blog-detail-breadcrumb a:hover {
                   color: #fff;
                   text-decoration: underline;
               }
               
               .blog-detail-section {
                   padding: 0 0 75px;
                   background: var(--blog-bg);
               }
               
               .blog-detail-layout {
                   position: relative;
                   z-index: 2;
                   padding-top: 40px;
               }
               
               .blog-detail-main {
                   overflow: hidden;
                   border: 1px solid var(--blog-border);
                   border-radius: 24px;
                   background: var(--blog-surface);
                   box-shadow: var(--blog-shadow);
               }
               
               .blog-detail-featured {
                   position: relative;
                   min-height: 430px;
                   overflow: hidden;
                   background: #edf4f0;
               }
               
               .blog-detail-featured img {
                   width: 100%;
                   height: 100%;
                   min-height: 430px;
                   object-fit: cover;
               }
               
               .blog-detail-content {
                   padding: 42px;
                   color: #33443c;
                   font-size: 16px;
                   line-height: 1.9;
               }
               
               .blog-detail-content>*:first-child {
                   margin-top: 0;
               }
               
               .blog-detail-content h2,
               .blog-detail-content h3,
               .blog-detail-content h4 {
                   margin-top: 34px;
                   margin-bottom: 15px;
                   color: var(--blog-text);
                   line-height: 1.35;
                   font-weight: 820;
               }
               
               .blog-detail-content h2 {
                   font-size: clamp(25px, 3vw, 34px);
               }
               
               .blog-detail-content h3 {
                   font-size: 24px;
               }
               
               .blog-detail-content h4 {
                   font-size: 20px;
               }
               
               .blog-detail-content p {
                   margin-bottom: 20px;
               }
               
               .blog-detail-content ul,
               .blog-detail-content ol {
                   padding-left: 22px;
                   margin-bottom: 24px;
               }
               
               .blog-detail-content li {
                   margin-bottom: 9px;
               }
               
               .blog-detail-content a {
                   color: var(--blog-primary);
                   font-weight: 650;
                   text-decoration: underline;
                   text-underline-offset: 3px;
               }
               
               .blog-detail-content a:hover {
                   color: var(--blog-primary-dark);
               }
               
               .blog-detail-content img {
                   max-width: 100%;
                   height: auto;
                   margin: 22px 0;
                   border-radius: 16px;
               }
               
               .blog-detail-content blockquote {
                   padding: 22px 24px;
                   margin: 28px 0;
                   border-left: 4px solid var(--blog-primary);
                   border-radius: 0 14px 14px 0;
                   background: var(--blog-primary-soft);
                   color: var(--blog-text);
                   font-size: 18px;
                   font-style: italic;
               }
               
               .blog-detail-content table {
                   width: 100%;
                   margin: 26px 0;
                   border-collapse: collapse;
                   overflow: hidden;
                   border-radius: 12px;
               }
               
               .blog-detail-content th,
               .blog-detail-content td {
                   padding: 13px;
                   border: 1px solid var(--blog-border);
                   text-align: left;
               }
               
               .blog-detail-content th {
                   color: var(--blog-text);
                   background: var(--blog-primary-soft);
               }
               
               .blog-taxonomy {
                   display: flex;
                   flex-wrap: wrap;
                   align-items: flex-start;
                   gap: 12px;
                   padding: 26px 42px 38px;
                   border-top: 1px solid var(--blog-border);
               }
               
               .blog-taxonomy-title {
                   padding-top: 7px;
                   color: var(--blog-text);
                   font-size: 14px;
                   font-weight: 800;
               }
               
               .blog-taxonomy-items {
                   display: flex;
                   flex-wrap: wrap;
                   gap: 8px;
               }
               
               .blog-taxonomy-item {
                   display: inline-flex;
                   align-items: center;
                   padding: 7px 12px;
                   border: 1px solid var(--blog-border);
                   border-radius: 50px;
                   color: var(--blog-muted);
                   background: #fff;
                   font-size: 12px;
                   font-weight: 650;
               }
               
               .blog-taxonomy-item:hover {
                   border-color: var(--blog-primary);
                   color: var(--blog-primary-dark);
                   background: var(--blog-primary-soft);
               }
               
               .blog-author-box {
                   display: flex;
                   gap: 20px;
                   padding: 30px;
                   margin-top: 25px;
                   border: 1px solid var(--blog-border);
                   border-radius: 20px;
                   background: #fff;
                   box-shadow: 0 10px 30px rgba(22, 66, 45, .055);
               }
               
               .blog-author-icon {
                   display: inline-flex;
                   flex: 0 0 64px;
                   align-items: center;
                   justify-content: center;
                   width: 64px;
                   height: 64px;
                   border-radius: 50%;
                   color: #fff;
                   background: linear-gradient(135deg, var(--blog-primary), #00b96c);
                   font-size: 25px;
               }
               
               .blog-author-box h4 {
                   margin: 0 0 6px;
                   color: var(--blog-text);
                   font-size: 20px;
                   font-weight: 800;
               }
               
               .blog-author-box p {
                   margin: 0;
                   color: var(--blog-muted);
                   line-height: 1.7;
               }
               
               .blog-detail-sidebar {
                   position: sticky;
                   top: 105px;
               }
               
               .blog-detail-widget {
                   padding: 25px;
                   margin-bottom: 24px;
                   border: 1px solid var(--blog-border);
                   border-radius: 20px;
                   background: #fff;
                   box-shadow: 0 10px 30px rgba(22, 66, 45, .055);
               }
               
               .blog-detail-widget-title {
                   position: relative;
                   padding-bottom: 13px;
                   margin-bottom: 20px;
                   color: var(--blog-text);
                   font-size: 20px;
                   font-weight: 820;
               }
               
               .blog-detail-widget-title::after {
                   content: "";
                   position: absolute;
                   left: 0;
                   bottom: 0;
                   width: 42px;
                   height: 3px;
                   border-radius: 3px;
                   background: var(--blog-primary);
               }
               
               .detail-recent-item {
                   display: flex;
                   gap: 13px;
                   padding-bottom: 17px;
                   margin-bottom: 17px;
                   border-bottom: 1px solid var(--blog-border);
               }
               
               .detail-recent-item:last-child {
                   padding-bottom: 0;
                   margin-bottom: 0;
                   border-bottom: 0;
               }
               
               .detail-recent-image {
                   flex: 0 0 82px;
                   width: 82px;
                   height: 72px;
                   overflow: hidden;
                   border-radius: 11px;
                   background: #edf4f0;
               }
               
               .detail-recent-image img {
                   width: 100%;
                   height: 100%;
                   object-fit: cover;
               }
               
               .detail-recent-content {
                   min-width: 0;
               }
               
               .detail-recent-date {
                   display: block;
                   margin-bottom: 5px;
                   color: var(--blog-muted);
                   font-size: 11px;
               }
               
               .detail-recent-link {
                   display: -webkit-box;
                   overflow: hidden;
                   color: var(--blog-text);
                   font-size: 13px;
                   line-height: 1.45;
                   font-weight: 750;
                   -webkit-line-clamp: 3;
                   -webkit-box-orient: vertical;
               }
               
               .detail-recent-link:hover {
                   color: var(--blog-primary);
               }
               
               .detail-category-list {
                   padding: 0;
                   margin: 0;
                   list-style: none;
               }
               
               .detail-category-list li+li {
                   margin-top: 8px;
               }
               
               .detail-category-list a {
                   display: flex;
                   align-items: center;
                   justify-content: space-between;
                   gap: 12px;
                   padding: 11px 13px;
                   border-radius: 11px;
                   color: var(--blog-text);
                   font-size: 14px;
                   transition: .2s ease;
               }
               
               .detail-category-list a:hover,
               .detail-category-list a.active-category {
                   color: var(--blog-primary-dark);
                   background: var(--blog-primary-soft);
               }
               
               .detail-category-list i {
                   color: var(--blog-primary);
                   font-size: 11px;
               }
               
               .related-posts-section {
                   padding-top: 60px;
               }
               
               .related-posts-heading {
                   margin-bottom: 28px;
                   text-align: center;
               }
               
               .related-posts-heading span {
                   display: inline-block;
                   margin-bottom: 8px;
                   color: var(--blog-primary);
                   font-size: 13px;
                   font-weight: 800;
                   letter-spacing: .06em;
                   text-transform: uppercase;
               }
               
               .related-posts-heading h2 {
                   margin: 0;
                   color: var(--blog-text);
                   font-size: clamp(28px, 4vw, 40px);
                   font-weight: 850;
               }
               
               .related-card {
                   height: 100%;
                   overflow: hidden;
                   border: 1px solid var(--blog-border);
                   border-radius: 19px;
                   background: #fff;
                   box-shadow: 0 10px 28px rgba(22, 66, 45, .06);
                   transition: transform .25s ease, box-shadow .25s ease;
               }
               
               .related-card:hover {
                   transform: translateY(-6px);
                   box-shadow: var(--blog-shadow);
               }
               
               .related-card-image {
                   height: 205px;
                   overflow: hidden;
                   background: #edf4f0;
               }
               
               .related-card-image img {
                   width: 100%;
                   height: 100%;
                   object-fit: cover;
                   transition: transform .4s ease;
               }
               
               .related-card:hover .related-card-image img {
                   transform: scale(1.05);
               }
               
               .related-card-body {
                   padding: 22px;
               }
               
               .related-card-meta {
                   margin-bottom: 9px;
                   color: var(--blog-muted);
                   font-size: 12px;
               }
               
               .related-card-title {
                   margin-bottom: 11px;
                   color: var(--blog-text);
                   font-size: 18px;
                   line-height: 1.45;
                   font-weight: 800;
               }
               
               .related-card-title a {
                   color: inherit;
               }
               
               .related-card-title a:hover {
                   color: var(--blog-primary);
               }
               
               .related-card-text {
                   margin: 0 0 17px;
                   color: var(--blog-muted);
                   font-size: 13px;
                   line-height: 1.7;
               }
               
               .related-card-link {
                   display: inline-flex;
                   align-items: center;
                   gap: 7px;
                   color: var(--blog-primary);
                   font-size: 13px;
                   font-weight: 800;
               }
               
               @media (max-width: 991.98px) {
                   .blog-detail-sidebar {
                       position: static;
                       margin-top: 30px;
                   }
                   .blog-detail-featured,
                   .blog-detail-featured img {
                       min-height: 360px;
                   }
               }
               
               @media (max-width: 767.98px) {
                   .blog-detail-hero {
                       padding: 58px 0 110px;
                   }
                   .blog-detail-layout {
                       padding-top: -65px;
                   }
                   .blog-detail-main {
                       border-radius: 18px;
                   }
                   .blog-detail-featured,
                   .blog-detail-featured img {
                       min-height: 260px;
                   }
                   .blog-detail-content {
                       padding: 28px 22px;
                       font-size: 15px;
                   }
                   .blog-taxonomy {
                       padding: 22px;
                   }
                   .blog-author-box {
                       padding: 22px;
                   }
                   .blog-card-image img {
                       width: 100%;
                       height: 250px;
                       object-fit: contain;
                       object-fit: cover;
                       transition: transform .5s ease;
                   }
                   .font-weight-bolder {
                       font-weight: 700 !important;
                       font-size: 17px;
                       margin-bottom: -13px;
                   }
               }
               
               @media (max-width: 575.98px) {
                   .blog-detail-meta {
                       gap: 10px 15px;
                       font-size: 12px;
                   }
                   .blog-author-box {
                       flex-direction: column;
                   }
                   .blog-detail-widget {
                       padding: 21px;
                   }
               }
               /* =========================================================
   Shared blog listing and detail refinements
   ========================================================= */
               
               .blog-listing-section,
               .blog-detail-section {
                   background: var(--blog-bg);
               }
               
               .blog-card,
               .blog-widget,
               .blog-detail-main,
               .blog-detail-widget,
               .blog-author-box,
               .related-card {
                   border-color: var(--blog-border);
                   background: var(--blog-surface);
               }
               /* .blog-card-image,
     .recent-post-image,
     .detail-recent-image,
     .related-card-image,
     .blog-detail-featured {
         background: var(--blog-image-bg);
     } */
               
               .blog-card-title a,
               .recent-post-link,
               .detail-recent-link,
               .related-card-title a,
               .category-list a,
               .detail-category-list a {
                   text-decoration: none;
               }
               
               .blog-card-excerpt,
               .related-card-text,
               .blog-author-box p,
               .blog-listing-header p {
                   color: var(--blog-muted);
               }
               
               .blog-detail-content {
                   color: var(--blog-body);
                   overflow-wrap: anywhere;
               }
               
               .blog-detail-content iframe,
               .blog-detail-content video {
                   width: 100%;
                   max-width: 100%;
                   border: 0;
                   border-radius: 16px;
               }
               
               .blog-detail-content pre {
                   max-width: 100%;
                   overflow-x: auto;
                   padding: 18px;
                   border-radius: 12px;
                   background: #f0f5f2;
               }
               
               .blog-detail-content code {
                   overflow-wrap: anywhere;
               }
               
               .blog-detail-content figure {
                   max-width: 100%;
                   margin: 24px 0;
               }
               
               .blog-detail-content figure img {
                   margin: 0;
               }
               
               .blog-detail-content figcaption {
                   margin-top: 8px;
                   color: var(--blog-muted);
                   font-size: 13px;
                   text-align: center;
               }
               
               .blog-detail-content table {
                   display: block;
                   max-width: 100%;
                   overflow-x: auto;
                   white-space: nowrap;
               }
               
               .blog-detail-content strong {
                   color: var(--blog-text);
               }
               
               .blog-card-title,
               .related-card-title,
               .recent-post-link,
               .detail-recent-link {
                   overflow-wrap: anywhere;
               }
               
               .blog-widget,
               .blog-detail-widget {
                   box-shadow: var(--blog-shadow-sm);
               }
               
               .blog-read-more,
               .related-card-link {
                   text-decoration: none;
               }
               
               .blog-read-more:focus-visible,
               .related-card-link:focus-visible,
               .blog-card-title a:focus-visible,
               .category-list a:focus-visible,
               .detail-category-list a:focus-visible {
                   outline: 3px solid rgba(0, 143, 82, 0.22);
                   outline-offset: 3px;
               }
               
               .blog-search-box input::placeholder {
                   color: #87958e;
               }
               
               .blog-search-box button:hover {
                   background: var(--blog-primary-dark);
               }
               
               .blog-detail-featured img {
                   display: block;
               }
               
               @media (max-width: 991.98px) {
                   .blog-detail-layout {
                       padding-top: 30px;
                   }
                   .blog-detail-main {
                       border-radius: var(--blog-radius-md);
                   }
                   .blog-detail-featured,
                   .blog-detail-featured img {
                       min-height: 340px;
                   }
               }
               
               @media (max-width: 767.98px) {
                   .blog-listing-section,
                   .blog-detail-section {
                       padding-bottom: 50px;
                   }
                   .blog-detail-layout {
                       padding-top: 24px;
                   }
                   .blog-detail-hero {
                       padding: 54px 0 72px;
                   }
                   .blog-detail-hero h1 {
                       font-size: clamp(30px, 9vw, 44px);
                   }
                   .blog-detail-featured,
                   .blog-detail-featured img {
                       min-height: 240px;
                   }
                   .blog-detail-content {
                       padding: 26px 20px;
                   }
                   .blog-detail-content h2 {
                       font-size: 26px;
                   }
                   .blog-detail-content h3 {
                       font-size: 22px;
                   }
                   .blog-detail-content table {
                       font-size: 14px;
                   }
                   .blog-taxonomy {
                       padding: 22px 20px 28px;
                   }
                   .related-posts-section {
                       padding-top: 42px;
                   }
               }
               
               @media (max-width: 575.98px) {
                   .blog-card-image {
                       height: 210px;
                   }
                   .blog-category-badge {
                       left: 10px;
                       top: 10px;
                   }
                   .blog-detail-featured,
                   .blog-detail-featured img {
                       min-height: 205px;
                   }
                   .blog-detail-content {
                       padding: 22px 16px;
                       font-size: 15px;
                       line-height: 1.8;
                   }
                   .blog-detail-content blockquote {
                       padding: 18px;
                       font-size: 16px;
                   }
                   .blog-detail-meta {
                       justify-content: center;
                   }
                   .blog-detail-widget,
                   .blog-widget {
                       padding: 20px;
                   }
                   .related-card-image {
                       height: 190px;
                   }
               }
               
               .blog-meta {
                   display: flex;
                   align-items: center;
                   flex-wrap: wrap;
                   gap: 15px;
                   background: #fff;
                   padding: 14px 20px;
                   margin-top: -25px;
                   width: fit-content;
                   border-radius: 50px;
                   box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
                   position: relative;
                   left: 20px;
                   z-index: 10;
               }
               
               .meta-item {
                   display: flex;
                   align-items: center;
                   gap: 8px;
                   color: #555;
                   font-size: 15px;
                   font-weight: 500;
               }
               
               .meta-item i {
                   width: 34px;
                   height: 34px;
                   border-radius: 50%;
                   background: #00A052;
                   color: #fff;
                   display: flex;
                   align-items: center;
                   justify-content: center;
                   font-size: 14px;
               }
               
               .meta-divider {
                   width: 1px;
                   height: 22px;
                   background: #ddd;
               }
               
               .blog-error-card {
                   margin-top: 100px;
               }
               
               @media(max-width:576px) {
                   .blog-meta {
                       width: calc(100% - 20px);
                       left: 10px;
                       margin-top: -18px;
                       border-radius: 15px;
                       gap: 12px;
                       padding: 12px 15px;
                   }
                   .blog-error-card {
                       margin-top: 10px;
                   }
                   .meta-item {
                       font-size: 13px;
                   }
                   .meta-item i {
                       width: 30px;
                       height: 30px;
                       font-size: 12px;
                   }
                   .meta-divider {
                       display: none;
                   }
               }