/* Table of Contents Container */
   .toc-box {
       background: radial-gradient(circle at top left, #fdf3ec, transparent 105%),
           #fef4ee;
       /* Light AliceBlue matches your image */
       border: 1px solid #fdf3ec;
       border-radius: 5px;
       padding: 20px;
       /* margin-bottom: 30px; */
       font-family: sans-serif;
       /* Matches the clean font in image */
   }

   .toc-box h4 {
       margin-top: 0;
       margin-bottom: 20px;
       font-weight: 700;
       color: #333;
       font-size: 20px;
   }

   /* List Items */
   .toc-list {
       list-style: none;
       /* Remove default HTML bullets */
       padding: 0;
       margin: 0;
   }

   .toc-list li {
       margin-bottom: 20px;
       line-height: 1.5;
   }

   .toc-list a {
       text-decoration: none;
       color: #444;
       /* Dark grey text */
       font-weight: 500;
       transition: color 0.2s;
   }

   .toc-list a:hover {
       color: #e5470e;
       /* Your brand color on hover */
       text-decoration: underline;
   }

   /* Hierarchy Indentation */
   .toc-h2 {
       margin-left: 0;
       font-weight: 600;
       font-size: 16px;
   }

   .toc-h3 {
       margin-left: 25px;
       font-size: 15px;
   }

   .toc-h4 {
       margin-left: 50px;
       font-size: 14px;
   }




   .mod-blog-wrapper {
       /* max-width: 1400px; */
       margin: 0 auto;
       padding: 40px 20px;
       display: grid;
       /* 3 Columns: Left Sidebar (260px) | Content (Auto fill) | Right Sidebar (300px) */
       grid-template-columns: 350px 1fr 380px;
       gap: 30px;
       align-items: start;
       /* Crucial for sticky behavior */
       background: #F3F5F7;
   }

   /* --- STICKY COLUMNS --- */
   .mod-blog-sidebar-left,
   .mod-blog-sidebar-right {
       position: sticky;
       top: 40px;
       /* Distance from top when scrolling */
       height: fit-content;
   }

   /* --- SHARED CARD STYLES --- */
   .mod-card {
       background: #FFFFFF;
       border-radius: 20px;
       /* Modern rounded corners */
       padding: 24px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
       /* Soft, subtle shadow */
       border: 1px solid rgba(0, 0, 0, 0.02);
       margin-bottom: 24px;
       overflow: hidden;
   }

   /* --- LEFT COLUMN STYLES --- */
   .mod-toc-header {
       /* font-size: 0.75rem; */
       text-transform: uppercase;
       letter-spacing: 1px;
       color: #888;
       margin-bottom: 15px;
       font-weight: 700;
   }

   .mod-toc-list {
       list-style: none;
   }

   .mod-toc-item {
       display: block;
       padding: 10px 12px;
       color: #555;
       text-decoration: none;
       /* font-size: 0.9rem; */
       font-weight: 600;
       border-radius: 8px;
       transition: all 0.2s ease;
       margin-bottom: 4px;
       cursor: pointer;
   }

   .mod-toc-item:hover {
       color: #000;
       background-color: #f7f7f7;
   }

   .mod-toc-item.active {
       background: radial-gradient(circle at top left, #fdf3ec, transparent 105%), #fef4ee;
       color: #f04d0c;
       font-weight: 600;
   }

   .mod-author-profile {
       display: flex;
       /* align-items: center; */
       gap: 12px;
       /* margin-bottom: 10px; */
       justify-content: space-between;
   }

   .mod-avatar {
       width: 48px;
       height: 48px;
       border-radius: 50%;
       object-fit: cover;
   }

   .mod-author-info h4 {
       /* font-size: 0.95rem; */
       margin-bottom: 2px;
   }

   .mod-author-info span {
       /* font-size: 0.8rem; */
       color: #ff3d00;
   }

   .mod-author-bio {
       /* font-size: 0.85rem; */
       color: #666;
       margin-top: 12px;
   }

   /* --- MIDDLE CONTENT STYLES --- */
   .mod-main-content {
       /* No sticky here, this scrolls naturally */
       min-height: 200vh;
       /* Ensuring enough scroll for demo */
   }

   .mod-article-meta {
       display: flex;
       justify-content: space-between;
       /* Pushes content to edges */
       align-items: center;
       /* Vertically aligns text with icons */
       margin-bottom: 16px;
       padding-bottom: 15px;
       border-bottom: 1px solid #f0f0f0;
       /* Optional: separates header from title */
   }

   .mod-meta-left {
       display: flex;
       align-items: center;
       gap: 10px;
       color: #666;
   }

   /* Wrapper for Right side (Social Icons) */
   .mod-meta-share {
       display: flex;
       align-items: center;
       gap: 3px;
       /* Spacing between icons */
   }

   /* Styling for your Social Icons to make them uniform */
   .mod-meta-share .social-icon {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 32px;
       height: 32px;
       border-radius: 50%;
       /* background: radial-gradient(circle at top left, #fdf3ec, transparent 105%),
        #fef4ee; */
       background: radial-gradient(circle at top left, #ff983c, transparent 105%), #c3a0a0;
       color: #555;
       font-size: 14px;
       text-decoration: none;
       transition: all 0.2s ease;
       border: none;
       /* Removes any default borders */
   }

   .mod-meta-share .social-icon:hover {
       background-color: #f04d0c;
       /* Your Brand Color */
       color: #fff;
   }

   /* Fix for the Custom Twitter/X Image */
   .mod-meta-share .custom-x-icon {
       width: 16px;
       /* Matches font-size of other icons */
       height: 16px;
       object-fit: contain;
       display: block;
   }

   .mod-tag {
       background: radial-gradient(circle at top left, #fdf3ec, transparent 105%), #fef4ee;
       ;
       color: #f04d0c;
       padding: 2px 8px;
       border-radius: 4px;
       font-size: 13PX;
       font-weight: 600;
       text-transform: uppercase;
   }

   .mod-article-title {
       /* font-size: 2.5rem; */
       font-weight: 800;
       line-height: 1.2;
       margin-bottom: 20px;
       letter-spacing: -1px;
   }

   .mod-article-subtitle {
       /* font-size: 1.2rem; */
       color: #666;
       margin-bottom: 30px;
   }

   .mod-hero-image {
       width: 100%;
       height: 400px;
       object-fit: cover;
       border-radius: 12px;
       /* margin-bottom: 40px; */
   }



   .mod-section-number {
       display: inline-block;
       background: #E0E7FF;
       color: #3730A3;
       width: 30px;
       height: 30px;
       text-align: center;
       line-height: 30px;
       border-radius: 8px;
       font-weight: 700;
       margin-right: 10px;
   }

   /* --- RIGHT COLUMN STYLES --- */
   .mod-visual-label {
       /* font-size: 0.75rem; */
       text-transform: uppercase;
       color: #888;
       margin-bottom: 15px;
       letter-spacing: 1px;
       display: block;
   }

   .mod-visual-card {
       padding: 0;
       /* Remove padding for image only cards */
       height: 280px;
       position: relative;
   }

   .mod-visual-img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   /* --- RESPONSIVE --- */
   @media (max-width: 1100px) {
       .mod-blog-wrapper {
           grid-template-columns: 220px 1fr;
           /* Drop right column */
       }

       .mod-blog-sidebar-right {
           display: none;
       }
   }

   @media (max-width: 768px) {

       .mod-blog-wrapper,
       .mod-article-meta {
           display: block;
           /* Stack everything */
       }

       .mod-blog-sidebar-left,
       .mod-blog-sidebar-right {
           position: static;
           width: 100%;
           margin-bottom: 30px;
       }

       .mod-article-title {
           /* font-size: 1.8rem; */
       }
   }

   .image_fade {
       border-radius: 12px;
       width: 100%;
       height: 200px;
       object-fit: cover;
       display: block;
   }