/* ===== Breadcrumb Area ===== */
.tj-breadcrumb-area {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 230px 0 120px;
    overflow: hidden;
    position: relative;
    z-index: 1
}

.tj-breadcrumb-area::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgb(7 124 234 / .5);
    z-index: -2
}

.tj-breadcrumb-area::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgb(1 15 52 / .3);
    z-index: -1
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .tj-breadcrumb-area {
        padding: 200px 0 100px
    }
}

@media only screen and (min-width:576px) and (max-width:767px) {
    .tj-breadcrumb-area {
        padding: 180px 0 80px
    }
}

@media (max-width:575px) {
    .tj-breadcrumb-area {
        padding: 180px 0 80px
    }
}

.tj-breadcrumb-bg-shape {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translate(4%, -30%);
    -ms-transform: translate(4%, -30%);
    transform: translate(4%, -30%);
    z-index: -1
}

.tj-breadcrumb-title {
    color: var(--tj-color-common-white);
    font-weight: var(--tj-fw-bold);
    margin-bottom: 12px;
    font-size: var(--tj-fs-h2);
}

.tj-breadcrumb-body {
    font-family: var(--tj-ff-heading);
    font-weight: var(--tj-fw-medium);
    font-size: 18px;
    color: var(--tj-color-common-white);
    margin-bottom: 0
}

.tj-breadcrumb-body .spacing {
    margin: 0 10px 0
}
/* banner  closed */


.kv-hub-card.accent {
    border-left-color: #88bf6a !important;
    background: linear-gradient(145deg, #f8fff0, #ffffff);
}
.kv-knowledge-hub {
  padding:2rem 0;
  background: linear-gradient(180deg, #ffffff, #f7f9fb);
}

/* Header */
.kv-hub-header {
  text-align: center;
  margin-bottom: 3rem;
}

.kv-hub-header h1 {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.kv-hub-subtitle {
  font-size: 1.1rem;
  color: #1e88e5;
  margin-top: 0.5rem;
}

/* Sections */
.kv-hub-section {
  max-width: 1000px;
  margin: 0 auto 2.8rem;
}

.kv-hub-section h2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.kv-hub-section h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.kv-hub-section p {
  font-size: 1rem;
  line-height: 1.9;
  color: #373a3f;
  text-align: justify;
}

/* Cards */
.kv-hub-card {
  height: 100%;
  background: #fff;
  border-radius: 18px;
  padding: 2rem;
  border-left: 5px solid #077cea;
  box-shadow: 0 14px 35px rgba(55, 58, 63, 0.15);
  transition: all 0.35s ease;
}

.kv-hub-card.accent {
  border-left-color: #fedb5c;
  background: linear-gradient(145deg, #f8fff0, #ffffff);
}

/* Hover */
.kv-hub-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px #077ceab7;
}

/* Lists */
.kv-hub-card ul {
  padding-left: 1.2rem;
}

.kv-hub-card li {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 0.75rem;
  color: #373a3f;
  text-align: justify;
}

/* Conclusion */
.kv-hub-section.conclusion {
  text-align: center;
  margin-top: 3rem;
}

.kv-hub-section.conclusion p {
  max-width: 900px;
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 768px) {
  .kv-hub-header h1 {
    font-size: 2rem;
  }

  .kv-hub-section h2 {
    font-size: 1.4rem;
  }

  .kv-hub-section h3 {
    font-size: 1.25rem;
  }
}

.blog-scroll-wrapper {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 10px;
}

.category-list a:hover,
.category-list a.active {
  background: #1e88e5; /* BLUE */
  color: #fff;
}

.tj-blog-area {
  padding-bottom: 60px;
}

/* LEFT: CATEGORY SCROLL (HIDE SCROLLBAR) */
.blog-category-sticky {
  height: calc(100vh - 220px); /* header + breadcrumb */
  overflow-y: auto;
  padding: 20px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 35px rgba(0,0,0,0.08);
}

/* Hide scrollbar ONLY for categories */
.blog-category-sticky::-webkit-scrollbar { width: 0; }
.blog-category-sticky { scrollbar-width: none; } /* Firefox */

/* RIGHT: BLOG CARDS SCROLL (VISIBLE SCROLLBAR) */
.blog-scroll-wrapper {
  height: calc(100vh - 220px);
  overflow-y: auto;
  padding-right: 10px; /* space for scrollbar */
}

/* Keep scrollbar visible for cards */
.blog-scroll-wrapper::-webkit-scrollbar { width: 8px; }
.blog-scroll-wrapper::-webkit-scrollbar-thumb {
  background: #cfcfcf;
  border-radius: 10px;
}

/* CATEGORY LIST */
.category-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
}
.category-list { list-style: none; padding: 0; margin: 0; }
.category-list li { margin-bottom: 10px; }
.category-list a {
  display: block;
  padding: 10px 14px;
  background: #f5f5f5;
  border-radius: 8px;
  color: #222;
  font-weight: 500;
  transition: 0.3s;
}
.category-list a:hover,
.category-list a.active { background: #1e88e5; color: #fff; }

/* BLOG CARD */
.blog-card {
  background: #fff;
  border-radius: 14px;
  padding: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.07);
  margin-bottom: 30px;
}
.blog-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
}
.blog-meta {
  display: flex;
  justify-content: space-between;
  margin: 12px 0;
  font-size: 14px;
  color: #777;
}
.blog-meta .author { color: #1e88e5; font-weight: 600; }
.blog-card h4 { font-size: 18px; font-weight: 600; margin-bottom: 15px; }
.blog-card a { font-weight: 600; color: #000; }
.blog-card a:hover { color: #1e88e5; }
/* ===== BLUE SCROLLBAR (BLOG LIST) ===== */
.blog-scroll-wrapper {
  scrollbar-width: thin;                 /* Firefox */
  scrollbar-color: #1e88e5 #e3f0ff;       /* thumb | track */
}

/* Chrome, Edge, Safari */
.blog-scroll-wrapper::-webkit-scrollbar {
  width: 8px;
}

.blog-scroll-wrapper::-webkit-scrollbar-track {
  background: #e3f0ff;                   /* light blue track */
  border-radius: 10px;
}

.blog-scroll-wrapper::-webkit-scrollbar-thumb {
  background: #1e88e5;                   /* BLUE thumb */
  border-radius: 10px;
}

.blog-scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background: #1565c0;                   /* darker blue on hover */
}