/* Blog stylesheet — used ONLY by blog-index.php + blog-post.php; one-place-per-component rule applies */

/* Width: reuse the site .container; this only adds the blog grid + padding */
.blog-wrap {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 30px;
      padding-top: 10px;
      padding-bottom: 64px
}


/* ---- Blog header nav (Home + top categories) replacing the action icons ---- */
.site-header__nav {
      display: flex;
      gap: 12px 22px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end
}

.site-header__nav a {
      color: var(--blue-color);
      text-decoration: none;
      font-weight: 700;
      font-size: 15px;
      padding: 5px 2px;
      border-bottom: 2px solid transparent;
      transition: .15s;
      white-space: nowrap
}

.site-header__nav a:hover {
      color: var(--main-color);
      border-bottom-color: var(--main-color)
}

/* Mobile hamburger — opens the site's existing slide-in sidebar (#skSidebar) */
.site-header__burger {
      display: none;
      background: none;
      border: 0;
      cursor: pointer;
      font-size: 22px;
      line-height: 1;
      color: var(--blue-color);
      padding: 6px 8px;
      align-items: center
}

.site-header__burger:hover {
      color: var(--main-color)
}

/* In-header search bar (pill-shaped, sits in nav row between links and hamburger) */
.site-header__blog-search {
      display: flex;
      align-items: center;
      gap: 6px;
      background: #f5f6fa;
      border: 1px solid #e6e8ee;
      border-radius: 7px;
      padding: 4px 4px 4px 14px;
      flex: 0 1 280px;
      min-width: 200px;
      transition: border-color .15s, background .15s
}

.site-header__blog-search:focus-within {
      border-color: var(--main-color);
      background: #fff
}

.site-header__blog-search i {
      color: #8a8f9c;
      font-size: 13px;
      flex: 0 0 auto
}

.site-header__blog-search input {
      flex: 1;
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      font-size: 13.5px;
      padding: 6px 4px;
      color: #1a1a2e
}

.site-header__blog-search input::placeholder {
      color: #9aa0ad
}

.site-header__blog-search button {
      flex: 0 0 auto;
      border: 0;
      background: linear-gradient(135deg, var(--main-color), #c2185b);
      color: #fff;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: .3px;
      padding: 7px 16px;
      border-radius: 7px;
      cursor: pointer;
      transition: filter .15s, transform .15s
}

.site-header__blog-search button:hover {
      filter: brightness(1.08);
      transform: translateY(-1px)
}

/* Mobile: hide the inline nav links + search, show the hamburger → site sidebar */


/* ---- Mobile toolbar: search + breadcrumb shown ONLY on mobile (≤860px), like the website city-page pattern ---- */
.blog-mobile-toolbar {
      display: none
}


/* ---- Index: pure image banner (empty div, no children — image is the whole hero) ---- */
.blog-hero {
      display: block;
      overflow: hidden;
      margin: 0 0 24px;
      /* banner image is set inline from admin (templates/blog-index.php); no hardcoded file here
         (the old /assets/images/blog/blog-banner.png didn't exist → 404). Solid brand-navy fallback. */
      background: #0a0f24 center/cover no-repeat;
      aspect-ratio: 1400 / 580;
      border: 1px solid rgba(0, 0, 0, .06)
}


/* ---- Page heading section — visible H1 + subtitle, lives below the hero ---- */
.blog-page-head {
      margin: 0 0 28px;
      padding: 0
}

.blog-page-head__kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--main-color);
      margin: 0 0 10px
}

.blog-page-head__kicker::before {
      content: "";
      width: 28px;
      height: 2px;
      background: var(--main-color);
      border-radius: 2px
}

.blog-page-head h1 {
      margin: 0 0 8px;
      font-size: clamp(28px, 4.4vw, 40px);
      font-weight: 800;
      letter-spacing: -.6px;
      line-height: 1.1;
      color: var(--blue-color)
}

.blog-page-head p {
      margin: 0;
      font-size: 16px;
      line-height: 1.55;
      color: #5a6172;
      max-width: 620px
}


/* ---- Index: post cards ---- */
.blog-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px
}

.bcard {
      position: relative;
      isolation: isolate;
      background: #fff;
      border: 1px solid #ff7fb3;
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow-3d);
      transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease
}

.bcard:hover {
      border-color: #e988af94;
      box-shadow: var(--shadow-3d), 1px 8px 22px rgba(3, 23, 49, .08);
      transform: translateY(-3px)
}

.bcard:before {
      content: "";
      position: absolute;
      top: 0;
      left: -120%;
      width: 80%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
      transform: skewX(-25deg);
      transition: left .7s ease;
      pointer-events: none;
      z-index: 1
}

.bcard:hover:before {
      left: 140%
}

.bcard__img {
      display: block;
      aspect-ratio: 16/10;
      overflow: hidden;
      background: #0b1430
}

.bcard__img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
}

.bcard__body {
      padding: 18px 20px 20px;
      display: flex;
      flex-direction: column;
      flex: 1
}

/* Category badge — absolute overlay on image (sibling of .bcard__img, positioned within .bcard) */
.bcard__cat {
      position: absolute;
      top: 14px;
      left: 14px;
      z-index: 10;
      display: inline-block;
      opacity: 1;
      visibility: visible;
      font-size: 12.5px;
      font-weight: 600;
      color: #fff;
      background: var(--main-color);
      padding: 6px 14px;
      border-radius: 7px;
      text-decoration: none;
      letter-spacing: .2px;
      line-height: 1;
      box-shadow: 0 2px 6px rgba(201, 15, 83, .3);
      transition: background .15s
}

.bcard__cat:hover {
      background: #c0143b;
      color: #fff
}

/* Desktop body order: meta → title → excerpt → more */
.bcard__meta {
      order: 1;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      font-size: 13.5px;
      color: #8a8f9c;
      margin: 0 0 8px
}

.bcard__avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
      flex: 0 0 50px;
      background: #f3f4f7;
      border: 1px solid #e6e8ee;
      margin-right: 4px
}

.bcard__sep {
      color: #c5c9d2;
      opacity: .8
}

.bcard__title {
      order: 2;
      font-size: 21px;
      font-weight: 800;
      line-height: 1.32;
      margin: 0 0 11px
}

.bcard__excerpt {
      order: 3;
      font-size: 15.5px;
      color: #555;
      line-height: 1.65;
      margin: 0 0 16px;
      flex: 1
}

.bcard__more {
      order: 4;
      align-self: flex-start;
      font-size: 14px;
      font-weight: 700;
      color: var(--main-color);
      text-decoration: none;
      letter-spacing: .3px
}

.bcard__title a {
      color: var(--blue-color);
      text-decoration: none
}

.bcard__title a:hover {
      color: var(--main-color)
}

.bcard__author {
      color: inherit;
      text-decoration: none
}

.bcard__author:hover {
      color: var(--main-color);
      text-decoration: underline
}

.bcard__more i {
      font-size: 12px
}

/* Mobile body order: title → meta → excerpt → more */

.blog-empty {
      background: #fff;
      border: 1px solid #e6e8ee;
      border-radius: 12px;
      padding: 48px 20px;
      text-align: center;
      color: #666
}


/* ---- Landscape cards (3rd post onward): image left, content right ---- */
/* Uses the website listing-card shadow (var(--shadow-3d) from main.css) */
.blog-list-wide {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-top: 24px
}

.bcard-wide {
      position: relative;
      isolation: isolate;
      display: flex;
      background: #fff;
      border: 1px solid var(--ring, #e6e8ee);
      border-radius: 15px;
      overflow: hidden;
      box-shadow: var(--shadow-3d);
      transition: transform .2s ease, border-color .2s
}

.bcard-wide:hover {
      transform: translateY(-2px);
      border-color: rgba(201, 15, 83, .4)
}

.bcard-wide__img {
      flex: 0 0 38%;
      max-width: 340px;
      overflow: hidden;
      background: #0b1430;
      display: block
}

.bcard-wide__img img {
      width: 100%;
      height: 100%;
      min-height: 215px;
      object-fit: cover;
      display: block
}

.bcard-wide .bcard__body {
      justify-content: center;
      padding: 20px 24px
}


/* ---- Index: pagination ---- */
.blog-pag {
      display: flex;
      gap: 6px;
      justify-content: center;
      margin-top: 28px;
      flex-wrap: wrap
}

.blog-pag a,
.blog-pag span {
      min-width: 40px;
      text-align: center;
      padding: 9px 13px;
      border-radius: 8px;
      border: 1px solid #e6e8ee;
      background: #fff;
      color: var(--blue-color);
      text-decoration: none;
      font-size: 14px;
      font-weight: 700
}

.blog-pag .is-on {
      background: var(--main-color);
      color: #fff;
      border-color: var(--main-color)
}

/* ---- Single post ---- */
.bp-crumb {
      font-size: 14px;
      color: #8a8f9c;
      margin: 0 0 14px
}

.bp-crumb a {
      color: var(--main-color);
      text-decoration: none
}

.bp-cat {
      position: absolute;
      top: 16px;
      left: 16px;
      z-index: 2;
      display: inline-block;
      font-size: 13px;
      font-weight: 600;
      color: #fff;
      background: var(--main-color);
      padding: 7px 16px;
      border-radius: 7px;
      text-decoration: none;
      letter-spacing: .2px;
      line-height: 1;
      box-shadow: 0 2px 8px rgba(201, 15, 83, .35);
      transition: background .15s
}

.bp-cat:hover {
      background: #c0143b;
      color: #fff
}

.bp-title {
      font-size: 34px;
      font-weight: 800;
      color: var(--blue-color);
      line-height: 1.22;
      margin: 0 0 12px;
      letter-spacing: -.4px
}

.bp-meta {
      font-size: 14.5px;
      color: #8a8f9c;
      margin: 0 0 20px;
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      align-items: center
}

.bp-meta__author {
      display: inline-flex;
      align-items: center;
      gap: 7px
}

.bp-author-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
      flex: 0 0 auto;
      background: #f3f4f7;
      border: 1px solid #e6e8ee
}

.bp-author {
      color: inherit;
      text-decoration: none;
      font-weight: 600
}

.bp-author:hover {
      color: var(--main-color);
      text-decoration: underline
}

.bp-hero {
      position: relative;
      isolation: isolate;
      width: 100%;
      border-radius: 14px;
      overflow: hidden;
      margin: 0 0 24px;
      background: #0b1430
}

.bp-hero img {
      width: 100%;
      display: block;
      object-fit: cover;
      max-height: 460px
}

.bp-body {
      font-size: 17px;
      line-height: 1.8;
      color: #33384a
}

.bp-body h2 {
      font-size: 24px;
      font-weight: 800;
      color: var(--blue-color);
      margin: 30px 0 12px;
      clear: both
}

.bp-body h3 {
      font-size: 20px;
      font-weight: 700;
      color: var(--blue-color);
      margin: 24px 0 9px;
      clear: both
}

.bp-body p {
      margin: 0 0 18px
}

.bp-body ul,
.bp-body ol {
      margin: 0 0 18px 22px
}

.bp-body li {
      margin: 0 0 8px
}

.bp-body img {
      max-width: 100%;
      height: auto;
      border-radius: 10px;
      margin: 14px 0
}

.bp-body img[style*="float:left"],
.bp-body img[style*="float: left"] {
      margin: 4px 18px 10px 0
}

.bp-body img[style*="float:right"],
.bp-body img[style*="float: right"] {
      margin: 4px 0 10px 18px
}

.bp-body figure {
      margin: 18px 0;
      display: table;
      max-width: 100%
}

.bp-body figure[style*="float:left"],
.bp-body figure[style*="float: left"] {
      margin: 4px 18px 10px 0
}

.bp-body figure[style*="float:right"],
.bp-body figure[style*="float: right"] {
      margin: 4px 0 10px 18px
}

.bp-body figure img {
      margin: 0;
      border-radius: 10px 10px 0 0
}

.bp-body hr {
      border: 0;
      border-top: 1px solid #d1d4dc;
      margin: 28px 0
}

.bp-body .ql-align-center {
      text-align: center
}

.bp-body .ql-align-right {
      text-align: right
}

.bp-body .ql-align-justify {
      text-align: justify
}

.bp-body .ql-indent-1 {
      padding-left: 3em
}

.bp-body .ql-indent-2 {
      padding-left: 6em
}

.bp-body .ql-indent-3 {
      padding-left: 9em
}

.bp-body .ql-indent-4 {
      padding-left: 12em
}

.bp-body .ql-indent-5 {
      padding-left: 15em
}

.bp-body .ql-indent-6 {
      padding-left: 18em
}

.bp-body .ql-indent-7 {
      padding-left: 21em
}

.bp-body .ql-indent-8 {
      padding-left: 24em
}

.bp-body figcaption {
      font-size: 14px;
      line-height: 1.5;
      color: #5d6378;
      padding: 8px 10px 10px;
      font-style: italic;
      text-align: center;
      background: #f8f9fb;
      border-radius: 0 0 10px 10px;
      border: 1px solid #eef0f4;
      border-top: 0
}

.bp-body a {
      color: var(--main-color);
      text-decoration: underline
}

/* "Explore by city" internal-link block at the foot of each post (SEO) */
.bp-explore {
      margin: 32px 0 8px;
      padding: 22px 24px;
      border: 1px solid #f0d6e2;
      border-radius: 14px;
      background: linear-gradient(135deg, #ffffff 0%, #fff5f9 100%);
}
.bp-explore__h {
      margin: 0 0 14px;
      font-size: 18px;
      font-weight: 800;
      color: var(--navy);
      display: flex;
      align-items: center;
      gap: 8px;
}
.bp-explore__h i { color: var(--main-color); }
.bp-explore__pills { display: flex; flex-wrap: wrap; gap: 9px; }
.bp-explore__pills a {
      display: inline-flex;
      align-items: center;
      padding: 8px 15px;
      border-radius: 9px;
      background: #fff;
      border: 1px solid #efe3ea;
      color: var(--navy);
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      transition: border-color .15s, color .15s, box-shadow .15s;
}
.bp-explore__pills a:hover { border-color: var(--main-color); color: var(--main-color); box-shadow: 0 4px 12px rgba(201,15,83,.1); }
.bp-explore__pills a.is-all { background: var(--navy); color: #fff; border-color: var(--navy); }
.bp-explore__pills a.is-all:hover { background: var(--main-color); border-color: var(--main-color); color: #fff; box-shadow: none; }

/* SEO intro paragraph at the top of a blog category page */
.blog-cat-intro {
      max-width: 860px;
      margin: 4px auto 30px;
      padding: 20px 24px;
      background: #fbfcfe;
      border: 1px solid #eef1f6;
      border-radius: 14px;
      color: #44515f;
      font-size: 16px;
      line-height: 1.75;
}
.blog-cat-intro p { margin: 0; }

.bp-body::after {
      content: "";
      display: block;
      clear: both
}

.bp-tags {
      margin: 26px 0 0;
      display: flex;
      flex-wrap: wrap;
      gap: 8px
}

.bp-tags a {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--blue-color);
      background: #f1f2f6;
      border: 1px solid #e6e8ee;
      padding: 6px 14px;
      border-radius: 7px;
      text-decoration: none
}

.bp-tags a:hover {
      border-color: var(--main-color);
      color: var(--main-color)
}

.bp-share {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 26px 0 0;
      padding: 18px 0;
      border-top: 1px solid #eef0f4;
      border-bottom: 1px solid #eef0f4
}

.bp-share span {
      font-weight: 700;
      color: var(--blue-color);
      font-size: 15px
}

.bp-share a {
      width: 38px;
      min-width: 38px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: #fff;
      color: var(--text-color);
      text-decoration: none;
      font-size: 15px;
      line-height: 1;
      transition: .18s ease
}

.bp-share a:hover {
      border-color: var(--main-color);
      color: var(--main-color);
      background: #fff7fb;
      transform: translateY(-2px)
}

.bp-related {
      margin: 42px 0 0
}

.bp-related h3 {
      font-size: 24px;
      font-weight: 700;
      color: #0c1224;
      margin: 0 0 22px;
      letter-spacing: -.3px
}

.bp-rel-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px
}

.bp-rel {
      background: #fff;
      border: 1px solid #eef0f4;
      border-radius: 14px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 2px 8px rgba(12, 18, 36, .04);
      transition: transform .25s, box-shadow .25s, border-color .25s
}

.bp-rel:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 26px rgba(12, 18, 36, .08);
      border-color: #e6e8ee
}

.bp-rel__img {
      position: relative;
      display: block;
      aspect-ratio: 16/9;
      overflow: hidden;
      background: #0b1430
}

.bp-rel__img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .5s ease
}

.bp-rel:hover .bp-rel__img img {
      transform: scale(1.05)
}

.bp-rel__cat {
      position: absolute;
      top: 14px;
      left: 14px;
      background: var(--main-color);
      color: #fff;
      font-size: 12.5px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 7px;
      letter-spacing: .2px;
      line-height: 1;
      z-index: 2;
      box-shadow: 0 2px 6px rgba(201, 15, 83, .3)
}

.bp-rel__body {
      padding: 20px 22px 22px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex: 1
}

.bp-rel__title {
      display: block;
      font-size: 20px;
      font-weight: 700;
      color: #0c1224;
      line-height: 1.3;
      text-decoration: none;
      letter-spacing: -.2px
}

.bp-rel__title:hover {
      color: var(--main-color)
}

.bp-rel__meta {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      font-size: 13.5px;
      color: #7c8190
}

.bp-rel__avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      object-fit: cover;
      flex: 0 0 30px;
      background: #f3f4f7;
      border: 1px solid #e6e8ee
}

.bp-rel__author {
      font-weight: 500;
      color: #7c8190
}

.bp-rel__date {
      margin-left: auto;
      color: #9aa0ad;
      font-size: 13px
}

.bp-rel__excerpt {
      font-size: 14.5px;
      line-height: 1.65;
      color: #5d6378;
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden
}

.bp-rel__more {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-size: 13px;
      font-weight: 600;
      color: #0c1224;
      text-decoration: none;
      letter-spacing: .8px;
      text-transform: uppercase;
      margin-top: auto;
      padding-top: 4px
}

.bp-rel__arrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--main-color);
      color: #fff;
      font-size: 13px;
      transition: transform .2s, background .2s
}

.bp-rel__more:hover {
      color: var(--main-color)
}

.bp-rel__more:hover .bp-rel__arrow {
      transform: translateX(4px);
      background: #c0143b
}


/* ---- Sidebar (Latest Posts + Categories) ---- */
.blog-side__box {
      background: #fff;
      border: 1px solid #ff7fb3;
      border-radius: 12px;
      box-shadow: var(--shadow-3d);
      padding: 18px 18px 8px;
      margin-bottom: 20px
}

.blog-side__box h3 {
      margin: 0 0 14px;
      font-size: 22px;
      font-weight: 800;
      color: var(--blue-color);
      border-bottom: 2px solid var(--main-color);
      padding-bottom: 8px;
      display: inline-block
}

.blog-side__latest a {
      display: flex;
      gap: 10px;
      align-items: center;
      padding: 9px 0;
      border-bottom: 1px solid #06264748;
      text-decoration: none
}

.blog-side__latest a:last-child {
      border-bottom: 0
}

.blog-side__latest img {
      width: 76px;
      height: 56px;
      border-radius: 8px;
      object-fit: cover;
      flex: 0 0 56px
}

.blog-side__latest span {
      font-size: 16.5px;
      font-weight: 700;
      color: var(--blue-color);
      line-height: 1.4
}

.blog-side__latest a:hover span {
      color: var(--main-color)
}

.blog-side__cats {
      list-style: none;
      margin: 0;
      padding: 0
}

.blog-side__cats li {
      border-bottom: 1px solid #06264748
}

.blog-side__cats li:last-child {
      border-bottom: 0
}

.blog-side__cats a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 2px;
      text-decoration: none;
      color: var(--blue-color);
      font-size: 20px;
      font-weight: 800
}

.blog-side__cats a:hover {
      color: var(--main-color)
}

.blog-side__cats .cnt {
      background: var(--blue-color);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      min-width: 28px;
      text-align: center;
      padding: 3px 8px;
      border-radius: 7px
}

/* ---- Blog mobile sidebar (reuses .site-sidebar* from main.css) ---- */
/* Brand stack: CT Finder / India / Blog (extend the 2-row grid to 3 rows) */
/* INDIA + BLOG inline on one row next to the name (website-style meta) */
#skBlogSidebar .blog-sb-meta {
      grid-row: 2;
      grid-column: 2;
      align-self: start;
      display: flex;
      align-items: center;
      gap: 8px
}

#skBlogSidebar .blog-sb-meta .site-sidebar__country {
      display: inline
}

#skBlogSidebar .blog-sb-tag {
      display: inline-flex;
      align-items: center;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--main-color)
}

#skBlogSidebar .blog-sb-tag::before {
      content: "•";
      margin-right: 8px;
      color: #c9ced9;
      font-weight: 700
}

/* Desktop header brand: show "Blog" next to "India" (blog pages only) */
.site-header__blogtag {
      display: inline-flex;
      align-items: center;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--blue-color)
}

.site-header__blogtag::before {
      content: "•";
      margin-right: 8px;
      color: #c9ced9;
      font-weight: 700
}

/* Count pill */
#skBlogSidebar .blog-sb-cnt {
      background: var(--blue-color);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      min-width: 24px;
      text-align: center;
      padding: 2px 7px;
      border-radius: 7px
}

/* Category accordion */
#skBlogSidebar .blog-cat {
      border-bottom: 1px solid #f1f2f4
}

#skBlogSidebar .blog-cat__head {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 4px;
      background: none;
      border: 0;
      cursor: pointer;
      font: inherit;
      font-size: 14px;
      font-weight: 600;
      color: #1a1a2e;
      text-align: left
}

#skBlogSidebar .blog-cat__head>i.fa-regular {
      color: #9aa0ad;
      font-size: 15px
}

#skBlogSidebar .blog-cat__name {
      flex: 1;
      min-width: 0
}

#skBlogSidebar .blog-cat__chev {
      font-size: 11px;
      color: #9aa0ad;
      transition: transform .2s
}

#skBlogSidebar .blog-cat.is-open>.blog-cat__head {
      color: var(--main-color)
}

#skBlogSidebar .blog-cat.is-open>.blog-cat__head .blog-cat__chev {
      transform: rotate(180deg);
      color: var(--main-color)
}

#skBlogSidebar .blog-cat__panel {
      display: none;
      padding: 2px 0 12px 32px
}

#skBlogSidebar .blog-cat.is-open>.blog-cat__panel {
      display: block;
      animation: bcatIn .18s ease
}

@keyframes bcatIn {
      from {
            opacity: 0;
            transform: translateY(-4px)
      }

      to {
            opacity: 1;
            transform: none
      }
}

#skBlogSidebar .blog-cat__post {
      display: flex;
      gap: 9px;
      align-items: flex-start;
      padding: 7px 0;
      font-size: 13px;
      color: #5a5f6e;
      text-decoration: none;
      line-height: 1.4
}

#skBlogSidebar .blog-cat__post i {
      color: #cfd3db;
      font-size: 12px;
      flex: 0 0 auto;
      margin-top: 3px
}

#skBlogSidebar .blog-cat__post:hover {
      color: var(--main-color)
}

#skBlogSidebar .blog-cat__post:hover i {
      color: var(--main-color)
}

#skBlogSidebar .blog-cat__all {
      display: inline-block;
      margin: 8px 0 2px;
      font-size: 12px;
      font-weight: 800;
      color: var(--main-color);
      text-decoration: none;
      letter-spacing: .2px
}