@media (max-width: 1000px) {

    /************** BLOG RESPONSIVE CSS Starts ********************************/
    .blog-header .blog-count {
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
    }
    .blog-header .blog-header_container{
      flex-direction: column;
      justify-content: flex-start;
        align-items: flex-start;
    }
    .blog-header .blog-count{
      margin-top: 5px;
    }
    .blog-nav li:last-child a{
      padding-right: 20px;
    }
    /************** BLOG RESPONSIVE CSS Ends ********************************/

      /************** BLOG RESPONSIVE CSS Starts ********************************/
  .blog-header .blog-count {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
  }
  .blog-header .blog-header_container{
    flex-direction: column;
    justify-content: flex-start;
      align-items: flex-start;
  }
  .blog-header .blog-count{
    margin-top: 5px;
  }
  .blog-nav li:last-child a{
    padding-right: 20px;
  }
  .blog-header .blog-nav {
    margin: 0;
    padding: 0;
    display: flex;
    gap: 24px;
    width: 100%;
    overflow-x: scroll;
    flex-wrap: nowrap;
    min-height: auto;
    text-wrap: nowrap;
}

  /************** BLOG RESPONSIVE CSS Starts ********************************/
  .blog-header .blog-count {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
  }
  .blog-header .blog-header_container{
    flex-direction: column;
    justify-content: flex-start;
      align-items: flex-start;
  }
  .blog-header .blog-count{
    margin-top: 5px;
  }
  .blog-nav li:last-child a{
    padding-right: 20px;
  }
  /************** BLOG RESPONSIVE CSS Ends ********************************/
  
      }
  

  
  @media (max-width: 768px) {
      /* blog-responsive */
        .single-blog-post_img-main {
          object-fit: contain;
        }
        .bb-section .blog-grid-cols-4 .single-blog-post .single-blog-post_img-main {
          height: 130px;
      }
        .single-blog-post-main .single-blog-post_img-main {
          height: 285px;
        }
        .single-blog-post .single-blog-post_content .title-main a {
          font-size: 20px;
          font-weight: 600;
          line-height: 40px;
        }
        .single-blog-post .single-blog-post_content p {
          font-size: 14px;
        }
        .hero-blog-section .container {
          padding-left: 0px;
          padding-right: 0px;
        }
        .single-blog-post_content-main {
          padding-left: 10px;
          padding-right: 10px;
        }
        .single-blog-post .single-blog-post_content .title a{
          font-size: 16px;
          line-height: 22px;
        }
        .bb-section .blog-grid-cols-4 .single-blog-post .title {
       
          line-height: 24px;
        }
        .bb-section .bb-title {
          font-size: 24px;
          margin-bottom: 18px;
        }

        .bb-section {
          padding: 15px 0px;
        }
        .bb-section .blog-grid-cols-4 {
          grid-column-gap: 15px;
        }
        .featured-blog {
          display: none;
        }
      
        .single-blog-post-main:nth-child(n+3) {
          display: none;
      }


    /* blog-responsive-end */

      /************** BLOG RESPONSIVE CSS Starts ********************************/
      .sidebar__realtedposts .single-blog-post .single-blog-post_img{
        min-width: 100px;
        width: 25%;
        height: auto;
        position: relative;
        overflow: hidden;
        margin: 0;
    }
      .blog-body-class .header, .blog-body-class .blog-header{
        position: fixed;
        top: 0;
        z-index: 999;
        width: 100%;
      }
      .blog-body-class .blog-header{
        top: 135px;
        z-index: 97;
      }
      .blog-body-class .page-content{
        margin-top: 260px;
      }
      .blog-header .blog-header_container{
        margin-bottom: 0px;
        padding-left: 16px;
        padding-right: 16px;
      }
      .blog-header .container{
        padding-left: 0px !important;
        padding-right: 0px !important;
      }
      /************** BLOG RESPONSIVE CSS Ends ********************************/

      /************** BLOG SINGLE RESPONSIVE CSS Starts ********************************/
    .single-blog-hero{
        padding: 40px 0px;
        padding-bottom: 32px
      }
      .single-blog-hero .sb-title{
        font-size: 26px;
        font-weight: 500;
        line-height: 38px;
        letter-spacing: -0.6px;
      }
      .sb-wrapper_content .sb-wrapper_content-fimg,.sb-img_block .sbimg-wrapper{
        height: auto;
        margin-bottom: 24px;
      }
      .sb-wrapper_content .sb-wrapper_content-fimg img,.sb-img_block .sbimg-wrapper .img-ab{
        position: relative;
        width: 100%;
        height: 100%;
      }
      .sb-wrapper_content-editor p{
        font-size: 16px !important;
        line-height: 26px !important;
      }
      .sb-wrapper_content-quote {
        padding: 56px 0px;
        margin: 24px 0px;
      }
      .sb-wrapper_content-quote .content p, .sb-wrapper_content-quote .content .quoted-person {
        font-size: 18px;
        font-weight: 400;
        line-height: 30px;
      }
      .sb-tt_block h2, .sb-tt_block h3, .sb-tt_block h4, .sb-tt_block h5, .sb-tt_block h6 {
        font-size: 20px;
        line-height: 28px;
      }
      .sb-tt_block p {
        font-size: 16px;
        line-height: 26px;
      }
      .sb-wrapper-content__footer {
        border-top: 1px solid #EAEAEA;
        margin: 40px 0px;
        margin-bottom: 0px;
        padding: 32px 0px;
      }
      .sb-wrapper-content__footer{
        flex-direction: column;
        justify-content: flex-start;
        gap: 20px;
      }
      .sb-wrapper-content__footer .sb-wrapper-content__col1{
        flex-wrap: wrap;
        width: 100%;
      }
      .sb-wrapper-content__footer .sb-wrapper-content__col2{
        width: 100%;
      }
      .sb-wrapper-content__footer .title{
        font-size: 14px;
        font-weight: 600;
        line-height: 22px;
      }
      .tags-list li a{
        font-size: 14px;
        line-height: 22px;
      }
      .sb-wrapper-content__actions .sb-wrapper-content__next > a, .sb-wrapper-content__actions .sb-wrapper-content__prev > a{
        font-size: 14px;
        line-height: 24px;
      }
      .sb-wrapper-content__actions .blog-post__single .img-wrapper{
        display: none;
      }
      .sb-wrapper-content__actions .blog-post__single h3,.sb-wrapper-content__actions .blog-post__single h3 a{
        font-size: 14px;
        font-weight: 600;
        line-height: 22px;
      }
      .sb-content__relatedposts .title{
        font-size: 28px;
        line-height: 34px;
      }
      .sb-content__relatedposts .ts-btn.simple{
        font-size: 14px;
      }
      .sb-content__relatedposts .single-blog-post{
        margin-bottom: 24px;
      }
      .sb-content__relatedposts{
        margin-bottom: 72px;
      }
  
      /************** BLOG SINGLE RESPONSIVE CSS Ends ********************************/
  
    }
    @media screen and (max-width: 375px) {
      .bb-section .bb-title{
        font-size: 22px;
      }
      .single-blog-post .single-blog-post_content .title-main a {
        font-size: 18px;
        font-weight: 600;
        line-height: 30px;
      }
      .bb-section {
        padding: 12px 0px;
      }
    }