/* Prevent page shimmer by reserving scrollbar space */

/* hide the over flow scroling on body when the navbar open  */
body.nav-open {
  overflow: hidden;
}
/* bloge page css starting */
section.Bloge-listing {
  padding: 132px 0;
  padding-bottom: 32px;
}
.bloge-main-heading {
  padding-bottom: 48px;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 19px;
  .bloge-heaing {
    margin-bottom: 21px;

    h2 {
      color: #0a0a0a;
      font-size: 44px;
      font-weight: 700;
      font-family: Satoshi;
      margin-bottom: 0px;
    }
  }

  .bloge-tabs {
    gap: 8px;

    button.bloge-btn {
      background-color: transparent !important;
      padding: 6px 12px;
      border: none;
      color: #737373 !important;
      border-radius: 8px;
      outline: none !important;
      box-shadow: none !important;
      font-size: 14px;
      font-weight: 500;
      font-family: Satoshi;
    }

    button.bloge-btn.active {
      background-color: #fff4ec !important;
      color: #fb8f3f !important;
      padding: 6px 12px;
    }
  }
}
.bloge-list {
  padding: 0px 0px 40px 0px;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .type {
    background-color: #f4f4f5;
    color: #71717a;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 11px;
    border-radius: 4px;
    font-family: "Satoshi";
    border: none;
    margin-bottom: 17px;
    outline: none !important;
    box-shadow: none !important;
  }
  .type:active {
    background-color: #f4f4f5 !important;
    color: #71717a !important;
    border: none;
    outline: none !important;
    box-shadow: none !important;
  }
  .list-heading {
    h1 {
      font-size: 26px;
      color: #0a0a0a;
      font-weight: 700;
      font-family: "Satoshi";
    }
  }
  .lisi-para {
    p {
      font-size: 16px;
      color: #525252;
      font-weight: 400;
      font-family: "Satoshi";
    }
  }
  .list-about {
    display: flex;
    align-items: center;
    gap: 12px;
    h2 {
      color: #a3a3a3;
      font-size: 13px;
      font-weight: 500;
      font-family: "Satoshi";
      margin-bottom: 0px;
    }

    span {
      color: #e5e5e5;
      font-size: 16px;
      font-weight: 400;
    }
  }
  .blog-img {
    margin-top: 26px;
  }
}
button.disabled-btn {
  background-color: transparent;
  border: none;
  color: #bfbbbb;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 4px;
}
.pagination {
  padding-bottom: 0 !important;
  margin-top: 48px;
  margin-bottom: 5px;
}
button {
  background-color: transparent;
  border: none;
  color: #000;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 4px;
}
button.active {
  background-color: #ff944d;
  color: #fff;
  font-weight: 700;
}
button.disabled-btn {
  background-color: transparent;
  border: none;
  color: #bfbbbb;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 4px;
}
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 20px 0;
  font-family: Satoshi;
  padding-bottom: 28px;
  margin-bottom: 100px;
}
.pagination.button {
  min-width: 32px;
  height: 32px;
} /* navbar css is started */
button.view-more-blogs-button {
  color: #212121;
  font-size: 16px;
  font-weight: 400;
  border: none;
  outline: none !important;
  box-shadow: none !important;
  height: 32px;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px;
}
.view-more-blogs-button.active {
  color: white;
}
.dots{
  color : #FB8F3F !important;
}
button.view-more-blogs-button.disabled-btn {
  color: #bfbbbb;
}
img.ms-2.img-fluid.arrow-image {
  filter: brightness(0) saturate(100%) invert(12%) sepia(0%) saturate(0%)
    hue-rotate(0deg);
  margin-left: 6px;
}
.list-mini-heading {
  .btn {
    color: #71717a;
    font-size: 13px;
    font-weight: 500;
    background-color: #f5f5f5;
    border: none !important;
    margin-bottom: 17px;
  }
}
.no-blogs {
  width: 41%;
  margin: 0 auto;
  margin-top: 110px;
}
h4.nofound {
  color: #0a0a0a;
  font-size: 26px;
  font-weight: 700;
  font-family: "Inter";
  margin-bottom: 11px;
}
p.para-nofound {
  font-size: 16px;
  font-weight: 400;
  color: #525252;
  font-family: "inter";
}
button.bloge-btn.view-more-blogs-button.pagination-dotes {
    color: rgba(251, 143, 63, .82);
}
/* burger button hide for responcive */
@media (max-width: 768px) {
  /* section responcive start */
  section.Bloge-listing {
    padding: 34px 0;
    padding-top: 150px;
    .bloge-main-heading {
      padding-bottom: 16px;
    }
    .bloge-heaing {
      h2 {
        font-size: 28px;
        font-weight: 500;
      }
    }
    .bloge-tabs {
      gap: 8px;
      flex-direction: row;
      flex-wrap: nowrap !important;
      overflow: scroll;
      scrollbar-width: none;
    }
    .list-heading {
      h1 {
        font-size: 16px;
        margin-bottom: 5px;
      }
    }
    .lisi-para {
      p {
        font-size: 14px;
      }
    }
    .type {
      margin-bottom: 16px;
    }
    .bloge-list {
      position: relative;
      padding-bottom: 25px;
      margin-bottom: 24px;
    }
    img.img-fluid.arrow-img {
      width: 19px;
      height: 19px;
    }

    img.img-fluid.arrow-img {
      width: 19px;
      height: 19px;
    }

    .right-content {
      position: absolute;
      bottom: 58px;
    }
    .list-about {
      margin-top: 40px;
    }
  }
  button.bloge-btn {
    white-space: nowrap;
  }
  button.bloge-btn.active {
    white-space: nowrap;
  }
  .list-mini-heading {
    .btn {
      font-size: 12px;
    }
  }
  .pagination {
    margin-bottom: 50px;
  }
  button.view-more-blogs-button {
    font-size: 14px;
  }
  
.no-blogs {
  width: 100%;
  margin: 0 auto;
  margin-top: 60px;
}
h4.nofound {
  color: #0a0a0a;
  font-size: 16px;
  font-weight: 400;
  font-family: "Inter";
  margin-bottom: 11px;
}
p.para-nofound {
  font-size: 16px;
  font-weight: 400;
  color: #525252;
  font-family: "inter";
}
}