/* Categories wrapper */
.active-no-filled-no {
    display: flex;
    
    height: 56px;
    padding: var(--spacing-alias-padding-sm, 8px) var(--spacing-alias-padding-lg, 16px);
    align-items: center;
    gap: var(--spacing-alias-vertical-gap-lg, 16px);
    flex-shrink: 0;
    border-radius: var(--radius-sm, 4px);
    border: 0.25px solid var(--color-primitive-surface-outline, #181611);
    background: var(--color-primitive-secondary-secondary-container, #EEF5F7);
    margin-bottom: 40px;
  }
  
  .active-no-filled-no .img {
    display: flex;
    width: 1.5rem;
    height: 1.5rem;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
  }
  
  .active-no-filled-no .text-wrapper {
    flex: 1 0 0;
    color: var(--color-primitive-surface-on-surface, #181611);
    border: none !important;
    outline: none;
    background: transparent !important;
    padding: 0;
    width: 100%;
    font-family: var(--typography-font-body, "DM Sans");
    font-size: var(--typography-font-size-body-sm, 1rem);
    font-style: normal;
    font-weight: var(--typography-font-weight-body, 300);
    line-height: var(--typography-line-height-body-sm, 1.5rem);
    text-align: left;
  }
  
  .active-no-filled-no .text-wrapper::placeholder {
    flex: 1 0 0;
    color: var(--color-primitive-surface-on-surface, #181611);
    text-align: left;

    /* body-sm */
    font-family: var(--typography-font-body, "DM Sans");
    font-size: var(--typography-font-size-body-sm, 16px);
    font-style: normal;
    font-weight: var(--typography-font-weight-body, 300);
    line-height: var(--typography-line-height-body-sm, 24px); /* 150% */
  }
  
  .active-no-filled-no .avatar {
    position: relative;
    width: 1.875rem;
    height: 1.875rem;
    flex-shrink: 0;
    background-color: #b3edf7;
    border-radius: 15px;
    overflow: hidden;
  }
  
  .active-no-filled-no .initial {
    display: flex;
    width: 1.875rem;
    height: 1.875rem;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-primitive-primary-on-primary-container, #001F28);
    text-align: center;

    /* label-sm */
    font-family: var(--typography-font-label, "DM Sans");
    font-size: var(--typography-font-size-label-sm, 1rem);
    font-style: normal;
    font-weight: var(--typography-font-weight-label, 500);
    line-height: var(--typography-line-height-label-sm, 1.5rem); /* 150% */
  }
  
.active-no-filled-no:focus-within {
  border-radius: var(--radius-sm, 4px);
  border: 2px solid var(--color-primitive-primary-primary, #2D7D95);
  background: var(--color-primitive-secondary-secondary-container, #EEF5F7);
}
@media (max-width: 998px) {
  .all-blog-posts.search-box-MT{
    margin-top:48px;
  }
}

.category-name-cr{
 font-size: 48px;
 font-weight: 500;
 line-height: 60px;
  margin-bottom: 15px;
  color: #0B0C0B !important;
}

.load-more-btn-1 .text-wrapper-1{

font-size: 15px !important;
}


.active-no-filled-no .text-wrapper{
font-weight: 400 !important;


}

.active-no-filled-no {
  border: 0.25px solid #5F615E !important;
 
}

.media-1 a img{
 margin: 0px !important;
}

  .blog-card-author-name, .blog-card-date{
 
  color: #0B0C0B !important ;
  }
 
.blog-card-author-name {
   font-weight: 600 !important;
   color: #0B0C0B !important;
   
 }
.post-date {
    color: #0B0C0B !important ;
   font-weight: 400 !important;
 }
.blog-title{
font-weight: 600 !important;
}

    .blog-title, .blog-card-title h1, .blog-card-title h2, .blog-card-description p  {
  color: #0B0C0B !important ;
  
  }

  .blog-card-description p{

font-weight: 400 !important;
}

.blog-card-date{
font-weight: 400 !important;

}
.active-no-filled-no{
background-color: #fff !important;
padding: 12px 24px !important;
}

.blog-card-description-container .blog-card-image{
box-shadow: none !important;
height: 412px !important;
}
.blog-card-description-container .blog-card-image img{
  object-fit: cover;
  height: 100%;
}

.btn-label.active {
 
  background-color: #E9EFFF;
  color: #153485;
  border-radius: 4px;
  border: 1px solid #000;
padding-left: 43px
}
.btn-label.active::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_5_1042)'%3E%3Cpath d='M4.5 12.75L10.5 18.75L19.5 5.25' stroke='%23153485' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_5_1042'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat center;
  background-size: 16px 16px;
}


.blog-card-description-container{
border: .25px solid var(--color-primitive-secondary-secondary,#424242);
border-radius: 8px;

}


.categories-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 20px 0;
  flex-wrap: wrap; /* ensures wrapping on smaller screens */
}

/* "Categories" text */
.categories-title {
  font-weight: 600;
  font-size: var(--typography-font-size-body-sm, 16px);
  color: #222;
  margin-right: 10px;
}

/* Tag button container */
.label-btn-main {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Individual tag button */
.btn-label {
  position: relative;
  display: inline-block;
  padding: 8px 16px 8px 24px;
  border: 1px solid #000;
  border-radius: 4px;
  font-size: 16px;
  color: #333;
  text-decoration: none;
  background: #FFF ;
  transition: all 0.3s ease;
  font-weight: 300;
}

.btn-label:hover {
  color: #82bc00;
}

.category-card-container{
 margin-bottom:48px;
}

/* Root blog hero: ~70% hero card / ~30% dynamic posts rail */
@media (min-width: 992px) {
  .root-blog-hero-layout .blog-card-container {
    align-items: flex-start;
    gap: 48px;
  }

  .root-blog-hero-layout .blog-card-left {
    flex: 7 1 0;
    max-width: none;
    padding-right: 0;
    min-width: 0;
  }

  .root-blog-hero-layout .blog-card-right {
    flex: 3 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
  }
}
.banner {
    position: relative;
    width: 100%;
    min-height: 304px;
    display: flex;
    align-items: center;       /* vertical center */
    justify-content: center;   /* horizontal center */
    text-align: center;        /* center text */
    overflow: hidden;
   margin-bottom:17px;
}
.banner-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 33, 79, 0.8);
    z-index: 2;
    pointer-events: none;
}
.banner-content {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 60px 20px; /* keep some padding for spacing */
    display: flex;
    flex-direction: column;
    align-items: center;       /* center inside flexbox */
    justify-content: center;   /* center vertically inside */
}

.banner-text {
    max-width: 650px;
    color: var(--color-primitive-surface-surface);
    animation: fadeInUp 0.8s ease-out;
}

.banner-title {
    color:  #fff;
    font-size: var(--typography-font-size-headline, 48px);
    font-weight: 600;
    line-height:  68px;
    /* 118.75% */
    letter-spacing: -1.28px;
    margin-bottom: 8px;
}

.banner-description {
    margin-top: 20px;
    max-width: 650px;
    color:  #fff;
    font-size: var(--typography-font-size-body-md, 24px);
    font-weight: var(--typography-font-weight-body, 300);
    line-height:  34px;
    /* 140% */
}
.load-more-container {
    display: flex;
    justify-content: left;
    /* margin-top: 40px; */
    margin-bottom: 22px;
    width: 100%;
    margin-top: 32px;
}
@media (max-width: 767px) {
  
 .blog-card-title h1  {
  
      font-size: 28px !important;     
      line-height: 36px !important; 
  }
  
  
 .banner-content {
    justify-content: flex-start; /* push to left */
    text-align: left; /* align text to left */
    padding: 20px; /* add spacing so it’s not flush to edge */
  }

  .banner-text {
    margin: 0; /* remove auto-centering */
    max-width: 100%;
  }

  .banner-title {
  
    font-size:  32px;
    font-weight: 600;
    line-height:  40px;    
    letter-spacing: 0%;
    
}
  .banner-description {
    text-align: left;     
    font-size:  20px;
    font-weight:  300;
    line-height:  28px;
    
  }
  .categories-slider {
  display: flex;
  gap: 10px; /* space between buttons */
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
  padding-bottom: 6px; /* little breathing space */
}


.categories-slider::-webkit-scrollbar {
  display: none; /* hide scrollbar on mobile */
}
  .banner-background img,
  .root-blog-banner-bg__image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    margin: 0;
}
  .banner{
     margin: 0px;
    padding: 47px 0px;
  }
}
/* Load More Button Styles */
.load-more-container {
    display: flex;
    justify-content: left;
    /* margin-top: 40px; */
    margin-bottom: 22px;
    width: 100%;
    margin-top: 32px;
}

.load-more-btn-1 {
    background: transparent;
    border: 2px solid #82bc00 !important;
    color:  #82bc00;
    font-family: var(--typography-font-label, Figtree);
    font-size: var(--typography-font-size-label-md, 20px);
    font-weight: var(--typography-font-weight-label, 500);
    line-height: var(--typography-line-height-label-md, 26px);
    padding: 12px 24px;
    border-radius: var(--radius-primitive-md, 8px);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 193px !important;
    height: 56px;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.load-more-btn-1:hover {
   
    
    box-shadow: 0 2px 8px rgba(130, 188, 0, 0.2);
}



.load-more-btn-1:active {
    transform: translateY(1px);
    box-shadow: 0 1px 4px rgba(130, 188, 0, 0.2);
}

.load-more-btn-1:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(130, 188, 0, 0.3);
}

.load-more-btn-1 .button-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.load-more-btn-1 .icon-plus,
.load-more-btn-1 .icon-minus {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.load-more-btn-1 .text-wrapper-1 {
    font-family: var(--typography-font-label, Figtree);
    font-size: var(--typography-font-size-label-md, 20px);
    font-weight: var(--typography-font-weight-label, 500);
    line-height: var(--typography-line-height-label-md, 26px);
    color: #82bc00;
}

.load-more-btn-1 .state-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--radius-primitive-md, 8px);
    background: transparent;
    transition: background-color 0.2s ease;
}

.load-more-btn-1:active .state-layer {
    background: rgba(130, 188, 0, 0.1);
}
@media (max-width: 767px) {
  
   
  .load-more-btn-1 {
    width: 100% !important;      /* stretch full width */
    max-width: 100% !important;  /* prevent capping */
    min-width: unset !important; /* remove any min constraint */
    flex: 1 1 auto !important;   /* allow flex to grow */
  }

  .load-more-container {
    width: 100% !important;
    display: flex;
    justify-content: center;     /* center inside container */
  }
    .load-more-container a {
    width: 100%      
  }
  .blog-category-chip, .category-chip {
    width: 128px ! important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: fit-content;
    content: attr(data-first-word);
}
}
.blog-category-chip, .category-chip {
    width: 128px ! important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: fit-content;
    content: attr(data-first-word);
    border: 1px solid #0072B5 !important;
    background-color: white !important;
    line-height: 16px;
    text-transform:CAPITALIZE !important;
    color: #0072B5; !important;
    margin-bottom: 12px !important;
}
  
  .all-blog-posts-title {
    color: #0B0C0B;
     font-size: 48px !important;
    font-weight: 500 !important;
    line-height: 60px !important;
    margin-bottom: 24px !important;
  }


  .blog-card {
    border: .25px solid #5F615E !important ;
    height:544px;
  }

  .small-blog-card{
    height:196px;
    border: 0.25px solid #5F615E !important;
}
.blog-category-chip, .category-chip {
 letter-spacing: 0px !important;
}
.blog-author-top-post{
font-family: REM !important;
color:var(--color-alias-text-primary, #1A1A1A) !important;
}
.blog-author-all-post {
font-family: REM !important;
color:var(--color-alias-text-primary, #1A1A1A) !important;
}
@media (max-width: 767px) {
  
  
  .blog-card { 
        
        height: 149px !important;
        
    }
  
  .blog-media-image {
    
        height: 149px !important;
        
    }

    .small-blog-card .text-content .blog-title {
 
    display: block !important;
  
  }
  
   .small-blog-card{
    height:172px;
    border: 0.25px solid #5F615E !important;
}
  
  
  
  
    .all-blog-posts-title {
      color: #0B0C0B;
      font-size: 32px !important;
      font-weight: 500 !important;
      line-height: 40px !important;
      margin-bottom: 24px !important;
      padding-top: 24px;
  }
  
.category-card-container {
 padding-right: 0px !important;
 margin-bottom:15px;
 margin-left: 0px !important; 
  }

  .media-1 a img{
 margin: 0 auto !important;
}
.blog-title {
        font-size: 20px !important;
        font-weight: 600 !important;
        line-height: 24px !important;
        margin-bottom: 4px !important ;
        height: 48px ! important;
    }
  
  .btn-filled, .btn-outline{
   width: auto !important;
  }
}
.btn-1{
  min-width: 119px !important;
}

.cta-button{
  margin-top: 10px;
  padding-top: 12px;

}
.blog-supporting-text{
 font-weight: 400 !important;

}

/* PGINATION   css */

.pagination__button--nav svg path {
    stroke: currentColor !important;
    fill: none !important;
}

.pagination-wrapper {
    /* background: white; */
    padding: 30px 40px;
    border-radius: 8px;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); */
}

.pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.pagination__button {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background: white;
    color: #374151;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    line-height: 16px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination__button:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

.pagination__button--active {
    background: #2563eb;
    color: white;
    border-color: #2563eb;
    font-weight: 600;
}

.pagination__button--active:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: white;
}

.pagination__button--nav {
    min-width: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination__button--nav svg {
    display: block;
}

.pagination__ellipsis {
    color: #6b7280;
    font-size: 24px;
    font-weight: 700;
    padding: 0 4px;
    display: inline-block;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 40px;
    line-height: 1;
    user-select: none;
    text-align: center;
    vertical-align: middle;
    letter-spacing: 1px;
}

/* Disabled state */
.pagination__button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Focus styles for accessibility */
.pagination__button:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Active state click effect */
.pagination__button:active {
    transform: scale(0.96);
}

/* Responsive design */
@media (max-width: 640px) {
    .pagination__button {
        min-width: 36px;
        height: 36px;
        font-size: 14px;
        padding: 0 10px;
    }
    
    .pagination {
        gap: 6px;
    }
    
    .pagination-wrapper {
        padding: 20px;
    }
    
    .pagination__ellipsis {
        height: 36px;
        min-width: 28px;
        font-size: 20px;
        line-height: 1;
    }
}

@media (max-width: 480px) {
    .pagination__button {
        min-width: 32px;
        height: 32px;
        font-size: 13px;
        padding: 0 8px;
    }
    
    .pagination {
        gap: 4px;
    }
    
    .pagination__button--nav svg {
        width: 14px;
        height: 14px;
    }
    
    .pagination__ellipsis {
        height: 32px;
        min-width: 24px;
        font-size: 18px;
        line-height: 1;
    }
}

/* Extra small devices (250px and up) */
@media (max-width: 360px) {
    .pagination__button {
        min-width: 28px;
        height: 28px;
        font-size: 12px;
        padding: 0 6px;
        border-width: 1px;
    }
    
    .pagination {
        gap: 3px;
    }
    
    .pagination-wrapper {
        padding: 15px 10px;
    }
    
    .pagination__button--nav svg {
        width: 12px;
        height: 12px;
    }
    
    .pagination__ellipsis {
        height: 28px;
        min-width: 20px;
        font-size: 16px;
        line-height: 1;
        padding: 0 2px;
    }
}

/* Ultra small devices (250px) */
@media (max-width: 280px) {
    .pagination__button {
        min-width: 24px;
        height: 24px;
        font-size: 11px;
        padding: 0 4px;
        border-radius: 4px;
    }
    
    .pagination {
        gap: 2px;
        flex-wrap: nowrap;
    }
    
    .pagination-wrapper {
        padding: 10px 5px;
    }
    
    .pagination__button--nav {
        min-width: 24px;
    }
    
    .pagination__button--nav svg {
        width: 10px;
        height: 10px;
    }
    
    .pagination__ellipsis {
        height: 24px;
        min-width: 16px;
        font-size: 14px;
        line-height: 1;
        padding: 0 1px;
    }
    
    .pagination__button:focus-visible {
        outline-width: 1px;
        outline-offset: 1px;
    }
}

/* Animation on load */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pagination-wrapper {
    animation: fadeIn 0.4s ease;
}