.blog-header {
         background: linear-gradient(to right, #2980ff, #4f9cff);
         padding: 80px 0 60px;
         margin-bottom: 50px;
     }

     .back-btn {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         color: #000000ff;
         text-decoration: none;
         font-size: 16px;
         margin-bottom: 30px;
         transition: all 0.3s ease;
     }

     .back-btn:hover {
         color: #2980ff;
         gap: 12px;
     }

     .blog-date {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         color: rgba(34, 34, 34, 0.95);
         font-size: 15px;
         margin-bottom: 20px;
     }

     .blog-title {
         font-size: 48px;
         font-weight: 700;
         color: #222222ff;
         margin-bottom: 0;
         line-height: 1.2;
     }

     .blog-content-section {
         background-color: #ffffffff;
         padding: 0 0 80px;
     }

     .main-image {
         width: 100%;
         height: 500px;
         object-fit: cover;
         border-radius: 12px;
         box-shadow: 0 10px 30px rgba(41, 128, 255, 0.3);
     }

     .blog-text {
         font-size: 18px;
         line-height: 1.8;
         color: rgba(31, 31, 31, 0.9);
         margin-bottom: 24px;
         text-align: justify;
     }

     .sidebar-section {
         position: sticky;
         top: 120px;
     }

     .sidebar-title {
         font-size: 24px;
         font-weight: 700;
         color: #202020ff;
         margin-bottom: 25px;
         padding-bottom: 15px;
         border-bottom: 3px solid;
         border-image: linear-gradient(to right, #2980ff, #4f9cff) 1;
     }

     .related-blog-card {
         background: #ffffffff;
         border-radius: 12px;
         overflow: hidden;
         margin-bottom: 20px;
         transition: all 0.3s ease;
         border: 1px solid #222;
         display: flex;
     }

     .related-blog-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 8px 25px rgba(41, 128, 255, 0.3);
         border-color: #2980ff;
     }

     .related-blog-img {
         width: 120px;
         height: auto;
         object-fit: cover;
     }

     .related-blog-content {
         padding: 15px;
     }

     .related-blog-title {
         font-size: 16px;
         font-weight: 600;
         color: #303030ff;
         margin-bottom: 8px;
         line-height: 1.4;
     }

     .related-blog-date {
         font-size: 13px;
         color: rgba(0, 0, 0, 0.6);
         display: flex;
         align-items: center;
         gap: 6px;
     }

     .related-blog-link {
         text-decoration: none;
         color: inherit;
         display: block;
     }

     .category-badge {
         display: inline-block;
         background: linear-gradient(to right, #2980ff, #4f9cff);
         color: #f5f5f5ff;
         padding: 4px 12px;
         border-radius: 20px;
         font-size: 12px;
         font-weight: 600;
         margin-bottom: 10px;
     }

     .divider {
         height: 2px;
         background: linear-gradient(to right, #2980ff, #4f9cff);
         margin: 40px 0;
         border: none;
     }

     @media (max-width: 991px) {
         .blog-title {
             font-size: 36px;
         }

         .main-image {
             height: 350px;
             margin-bottom: 30px;
         }

         .sidebar-section {
             position: static;
             margin-top: 50px;
         }
     }

     @media (max-width: 768px) {
         .blog-title {
             font-size: 28px;
         }

         .blog-text {
             font-size: 16px;
         }

         .blog-header {
             padding: 60px 0 40px;
         }

         .main-image {
             height: 250px;
         }
     }

  
        .blog-card {
          border: none;
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 0 2px 8px rgba(0,0,0,0.1);
          transition: all 0.3s ease;
          height: 100%;
        }
        
        .blog-card:hover {
          transform: translateY(-8px);
          box-shadow: 0 8px 24px rgba(0,0,0,0.15);
        }
        
        .blog-img-wrapper {
          position: relative;
          height: 240px;
          overflow: hidden;
        }
        
        .blog-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.5s ease;
        }
        
        .blog-card:hover .blog-img {
          transform: scale(1.1);
        }
        
        .category-badge {
          position: absolute;
          top: 16px;
          left: 16px;
          background: rgba(0, 0, 0, 0.95);
          color: #fdfdfdff;
          padding: 6px 16px;
          border-radius: 20px;
          font-size: 13px;
          font-weight: 600;
          z-index: 1;
        }
        
        .blog-content {
          padding: 24px;
        }
        
        .blog-title {
          font-size: 20px;
          font-weight: 700;
          color: #212529;
          margin-bottom: 12px;
          line-height: 1.4;
          transition: color 0.3s ease;
          text-decoration: none;
        }
        
        .blog-card:hover .blog-title {
          color: #0d6efd;
        }
        
        .blog-excerpt {
          color: #6c757d;
          font-size: 15px;
          line-height: 1.6;
          margin-bottom: 16px;
        }
        
        .read-more {
          color: #0d6efd;
          text-decoration: none;
          font-weight: 600;
          font-size: 14px;
          display: inline-flex;
          align-items: center;
          transition: all 0.3s ease;
        }
        
        .read-more:hover {
          color: #0a58ca;
          gap: 8px;
        }
        
   
        
        .read-more:hover::after {
          margin-left: 8px;
        }
        
        .page-header {
          background: linear-gradient(135deg, #000000ff 0%, #272727ff 100%);
          color: white;
          padding: 80px 0;
          margin-bottom: 60px;
        }
        
        .page-title {
          font-size: 48px;
          font-weight: 700;
          margin-bottom: 16px;
        }
        
        .page-subtitle {
          font-size: 20px;
          opacity: 0.95;
        }