:root{
    --white: #ffffff;
    --color-border: #e3e6e1;
    --deep-green: #314143;
    --color-deep: #4c6669;
    --color-muted: #5a6660;
    --light-green: #8eb088;

    /*Shadows*/
    --shadow-sm: 0 2px 8px rgba(47, 74, 71, .06);
    --font-body: 'Overpass', sans-serif;
}

.load-more-wrapper .btn{
  text-align: center;
}
.blog-categories .container{
  max-width: 1640px;
}
.blog-categories .blog-cont-wrapper{
  padding: 0 40px;
}

.bc-sidebar {
  background: var(--white, #ffffff);
  border: 1px solid var(--color-border, #e3e6e1);
  border-radius: 10px;
  padding: 1.5rem 1.5rem .5rem;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(47, 74, 71, .06));
  font-family: var(--font-body);
}

.bc-sidebar__title {
  font-family: var(--font-body, inherit);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--deep-green, #314143);
  margin: 0 0 .5rem;
  padding-bottom: .85rem;
  border-bottom: 2px solid var(--color-border, #e3e6e1);
}

ul .bc-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li.bc-sidebar__item {
  border-bottom: 1px solid var(--color-border, #e3e6e1);
  list-style: none;
}

.bc-sidebar__item:last-child {
  border-bottom: none;
}

.bc-sidebar__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem .25rem;
  text-decoration: none;
  color: var(--color-muted, #5a6660);
  transition: color .2s ease, padding-left .2s ease;
}

.bc-sidebar__link:hover,
.bc-sidebar__link:focus {
  color: var(--color-deep, #4c6669);
  padding-left: .5rem;
}

.bc-sidebar__link.is-active {
  color: var(--color-deep, #4c6669);
  font-weight: 600;
}

.bc-sidebar__label {
  line-height: 1.3;
}

.bc-sidebar__arrow {
  flex-shrink: 0;
  color: var(--color-muted, #5a6660);
  font-size: 1.05rem;
  transition: transform .2s ease, color .2s ease;
}

.bc-sidebar__link:hover .bc-sidebar__arrow,
.bc-sidebar__link:focus .bc-sidebar__arrow,
.bc-sidebar__link.is-active .bc-sidebar__arrow {
  color: var(--light-green, #8eb088);
  transform: translateX(4px);
}

@media (max-width: 1100px) {
  .blog-categories .row.blog-layout-row{
    display: flex;
    flex-direction: column-reverse;
    gap: 40px;
  }
}
@media (max-width: 860px) {
  .bc-sidebar {
    margin-top: 2rem;
  }
}