:root {
    --badge-background: #eceef0;
    --badge-text-color: #687076;
    --blue-10: #0081f1;
}
.w-40 {
    width: 40%;
}
.mr-20 {
    margin-right: 20px;
}
.mb-34 {
    margin-bottom: 34px;
}
.mb-32 {
    margin-bottom: 32px;
}
.text-blue-400 {
    color: var(--blue-10);
}
.gray-body {
    color: #687076;
}
.bold-500 {
    font-weight: 500;
    color: #11181c !important;
}
.bold-600 {
    font-weight: 600;
    color: #11181c !important;
}
.bold-700 {
    font-weight: 700;
    color: #11181c !important;
}
.bold-800 {
    font-weight: 800;
    color: #11181c !important;
}
.bold-900 {
    font-weight: 900;
    color: #11181c !important;
}

.mini-nav {
    margin-top: 114px;
}
.mini-nav .breadcrumb-item + .breadcrumb-item::before {
    content: ">";
    color: #687076;
}
.mini-nav .breadcrumb {
    background: transparent;
}
.mini-nav .active {
    color: var(--blue-10) !important;
}
.categories-filter {
    gap: 20px;
    margin-bottom: 64px;
    overflow-x: scroll;
}
.categories-filter::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}
.categories-filter a {
    background: var(--badge-background);
    border-radius: 24px;
    padding: 8px 16px;
    color: var(--badge-text-color);
    cursor: pointer;
    letter-spacing: 0.0015em;
}
.active-category {
    background: #cee7fe !important;
    color: var(--blue-10) !important;
}
/* .month-wise-posts h2, */
.most-viewed-posts h3,
.recommend-posts h3 {
    margin-bottom: 40px;
}
.month-wise-posts .card {
    border: none !important;
}
.month-wise-posts .card img {
    max-height: 164px;
    object-fit: cover;
}

.category-badge {
    padding: 4px 12px 4px 12px;
    background: var(--badge-background);
    border-radius: 24px;
    color: var(--badge-text-color);
    border: 0px;
}
.cat-topics{
    
        padding: 4px 12px 4px 12px;
        border: 1px solid #4382E9;
        background: transparent;
        border-radius: 24px;
        color: #4382E9;
       
    
}
.global-blog-section .card-body {
    padding: 0;
}
.post-date p {
    color: #7e868c !important;
}
.recommend-posts img {
    /* max-height: 252px;
    min-height: 162px; */
    object-fit: contain;
}
.latest-index .row {
    margin-bottom: 40px;
}
/*############ Full Blog Page ######################*/
.blog .post-date p:first-of-type {
    border-right: 2px solid #7e868c;
}
.blog i {
    font-size: 24px;
    color: var(--blue-10);
}
.blog-feature-img img,
.blog-feature-img {
    max-height: 516px;
    object-fit: cover;
}
.copy-link-btn {
    border: 1px solid var(--blue-10);
    border-radius: 24px;
    padding: 8px 16px;
    color: var(--blue-10);
}
.play-btn {
    border: none;
    outline: none;
}
.blue-box {
    background: #f5faff;
    border-left: 4px solid var(--blue-10);
    padding: 16px 24px;
}
.blog-body p {
    color: #687076;
}
.blog .label-xl-font {
    color: var(--blue-10);
}
/******************** *******************/
.all-blog-head {
    margin-top: 48px;
}
.review-img {
    margin-bottom: 38px;
}
.bread-cat a {
    text-transform: lowercase;
}
.lower-case {
    text-transform: lowercase;
}
.first-cap:first-letter {
    text-transform: uppercase;
}
img {
    max-width: 100%;
    height: auto;
}

.progress-container {
    position: fixed;
    top: 0;
    z-index: 9999;
    width: 100%;
  }
  
  /* The progress container (grey background) */
  .progress-container {
    width: 100%;
    height: 8px;
    background: #ccc;
  }
  
  /* The progress bar (scroll indicator) */
  .progress-bar {
    height: 8px;
    background: #0081F1;
    width: 0%;
  }
  button.btn.copy-link-btn.label-xl-font{
    display: flex;
  }

/* .blog-body p,
.blog-body h1,
.blog-body h2,
.blog-body h3,
.blog-body h4,
.blog-body h5,
.blog-body h6 {
    margin-bottom: 48px;
} */
@media screen and (max-width: 780px) {
    .month-wise-posts h2,
    .most-viewed-posts h3,
    .recommend-posts h3 {
        margin-bottom: 24px;
    }
    .headline-small-font {
        font-size: 20px;
    }
    .headline-large-font {
        font-size: 28px;
    }
    .headline-medium-font {
        font-size: 24px;
    }
    .categories-filter {
        margin-bottom: 48px;
    }

    .mini-nav {
        margin-top: 100px;
    }
    .latest-index .row {
        margin-bottom: 32px;
    }
    .review-img {
        margin-bottom: 16px;
    }
    .review-img img {
        width: 291px;
    }
    .month-wise-posts .card img{
        max-height:100%
    }
}