/* 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;
  }
}





.active-no-filled-no:focus-within {
   
    border: 2px solid var(--color-primitive-primary-primary, #2d7d95) !important;
    border-radius: var(--radius-sm, 4px) !important;
}



.text-wrapper:focus-within::placeholder {
    color: transparent !important;
}

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

  .blog-card-author-name, .blog-card-date{
  color: #1a1a1a !important ;

  }
 .author-name, .post-date {

   color: #424242 !important;
 }

    .blog-title, .blog-card-title h1, .blog-card-title h2, .blog-card-description p  {
  color: #1a1a1a !important ;

  }
.active-no-filled-no{
background-color: #fff !important;
padding: 12px 24px !important;
}
.blog-card-description-container{
 overflow: hidden;
}
.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 #153485;
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 16px;
  border: 1px solid var(--color-primitive-secondary-secondary,#424242);
  border-radius: 4px;
  font-size: 16px;
  color: #333;
  text-decoration: none;
  background: #FFF ;
  transition: all 0.3s ease;
  font-weight: 400;
  margin-right: 4px;
}

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

}
.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-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) {
  .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: 4px; /* 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{
    display: block;
    height: 100%;
    max-width: -webkit-fill-available;
    width: auto;
    margin: 0px;
}
  .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 var(--color-primitive-primary-primary, #2562ff) !important;
    color:  var(--color-primitive-primary-primary, #2562ff);
    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(37, 98, 255, 0.2);
}



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

.load-more-btn-1:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 98, 255, 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:var(--color-primitive-primary-primary, #2562ff);
}

.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(37, 98, 255, 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 var(--color-primitive-secondary-secondary,#424242) !important;
    background-color: white c;
    line-height: 16px;
    text-transform:CAPITALIZE !important;
    color: var(--color-primitive-secondary-secondary,#424242); !important;
    font-weight: 400 !important;
}
  
  .all-blog-posts-title {
    color:var(--color-alias-text-primary, #1A1A1A) !important;
   
  }


  .blog-card {
    border: .25px solid var(--color-primitive-secondary-secondary, #424242) !important ;
    height:544px;
  }
  .blog-card {

    height:544px;
  }
  .small-blog-card{
height:196px;
}
.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) {
.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;
        font-weight: 500;
        line-height: 24px !important;
        margin-bottom: 4px ;
        height: 48px ! important;
    }
    .btn-filled, .btn-outline{
   width: auto !important;
  }
}
.btn-1{
  min-width: 119px !important;
}

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

}

/* 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: 40px;
        height: 40px;
        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;
}
.load-more-btn-1 .text-wrapper-1{

  font-size: 14px !important;
}

.load-more-container{

 margin-top: 10px !important; 


}
@media (max-width: 998px) {
    .section-blog-card {
        padding-top: 24px !important;
    }
  
  .categories-header {
   margin-bottom: 0px !important;
    margin-top: 0px;
   display: flex;
   align-items: center;
   gap: 15px;  
   flex-wrap: wrap; /* ensures wrapping on smaller screens */
  }

  .category-card-container {
   margin-bottom: 0px !important;
  }
   .blog-card { 
        
        height: 149px !important;
        
    }
  
  .blog-media-image {
    
        height: 149px !important;
        
    }

    .small-blog-card .text-content .blog-title {
 
    display: block !important;
  
  }
   .advertisement-section {
    
    padding-left: 22px !important;
}
}