html,
body {
  background: #f9faff;
}

nav.abidi-navbar {
  top: 0 !important;
}

main {
  padding-top: 166px;
  padding-bottom: 80px;
}

.filter-box {
  margin-top: 30px;
}

.filter-box #header {
  display: flex;
  align-items: center;
}

.filter-box #header span {
  margin: 0 8px;
  color: #313131;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 14px;
}

.filter-box #body {
  padding: 16px 20px;
}

.form-check {
  margin-bottom: 12px;
}
.wp-block-categories-list li {
  margin-bottom: 12px;
}
.wp-block-categories-list a {
  color: #3e3e3e;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
}
.blogs #header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--primary-1);
  margin-bottom: 32px;
}

.blogs #header-mobile {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--primary-1);
  margin-bottom: 32px;
}

.blogs #header h1 {
  color: #313131;
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 0;
}

.blogs #header h6 {
  color: #313131;
  font-size: 14px;
  line-height: normal;
  margin-bottom: 0;
  margin-left: 8px;
}

.filter-menu {
  padding: 0;
  margin-bottom: 0;
}

.filter-menu {
  display: flex;
  align-items: center;
}

.filter-menu li a {
  color: #686868;
  text-align: right;
  font-size: 14px;
  line-height: normal;
}

.filter-menu li.active a {
  color: var(--primary-1);
  font-weight: 700;
}

.filter-menu li:not(:last-of-type) {
  margin-left: 20px;
}

.article {
  position: relative;
  display: flex;
  align-items: flex-start;
  height: 100%;
  margin-bottom: 16px;
}

.article::before {
  position: absolute;
  left: -12px;
  top: 0;
  content: url(../../images/article-curve-top.svg);
}

.article::after {
  position: absolute;
  left: -12px;
  bottom: 0;
  content: url(../../images/article-curve-bottom.svg);
}

.article #img {
  height: 100%;
  width: 100%;
  max-height: 164px;
  object-fit: cover;
  border-radius: 6px;
  margin-left: 16px;
}

.article .title {
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: #313131;
  margin-bottom: 16px;
  cursor: default;
}

.article .desc {
  font-weight: 300;
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 19px;
  color: #3e3e3e;
  cursor: default;
}

.article .date-label {
  font-weight: 400;
  font-size: 12px;
  line-height: 19px;
  color: #686868;
  display: flex;
  align-items: center;
}

.pagination {
  margin-top: 48px;
}

.pagination-hr {
  width: 100%;
  height: 1px;
  background: var(--primary-1);
}

.date-dot {
  width: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary-1);
  margin: 0 4px;
}

#header-mobile h5 {
  margin-left: 16px;
}

@media only screen and (max-width: 992px) {
  main {
    padding-top: 100px;
    padding-bottom: 40px;
  }

  .article #img {
    max-height: 179px;
    margin-left: 0;
  }

  .article::before {
    content: url(../../images/article-curve-bottom-right.svg);
    right: -8px;
    top: unset;
    bottom: 0;
  }

  .article::after {
    left: -8px;
    top: unset;
    bottom: 0;
  }

  .blogs #header-mobile h1 {
    margin-bottom: 32px;
  }

  .blogs #header-mobile h6 {
    font-weight: 400;
    margin-left: 8px;
    margin-left: 0;
  }

  .blogs #body {
    padding: 0 26px;
  }

  .select-container {
    margin-bottom: 32px;
    padding: 0 22px;
    position: relative;
  }

  .select-container:after{
    content: url("../../images/arrow-down.svg");
    position: absolute;
    left: 35px;
  }

  .select-container select {
    flex-grow: 1;
    margin-right: 23px;
    appearance: none;
  }

}