.blog-showcase{
      text-align:center;
      margin:40px 0;
      width:100%;
    }

    .blog-showcase .blog_title-showcase{
      margin:0 0 30px;
      color:#666;
    }

    .blog-showcase .blog_wrapper-showcase{
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      gap:40px 20px;          /* spacing between cards */
      width:100%;
      justify-content:center;
      padding:0 20px;         /* small side padding for small screens */
    }

    .blog-showcase .blog_item-showcase{
      margin:0;               /* grid gap handles spacing */
      min-height:300px;
      background:#fff 50%;
      background-size:cover;
      border-radius:5px;
      text-decoration:none;
      box-shadow:8px 14px 38px rgba(39,44,49,.06), 1px 3px 8px rgba(39,44,49,.03);
      transition:all .5s ease;
      overflow:hidden;
    }

    .blog-showcase .blog_item-showcase a{
      color:inherit;
      text-decoration:none;
      display:block;          /* make the whole card clickable */
      height:100%;
    }

    .blog-showcase .blog_item-showcase .bi_img-showcase{
      height:200px;
      margin:0 0 20px;
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
      background:#f5f5f5;
    }

    .blog-showcase .blog_item-showcase .bi_img-showcase img{
      width:100%;
      height:100%;
      object-fit:cover;       /* ensures full-bleed image */
      display:block;
    }

    .blog-showcase .blog_item-showcase .bi_title-showcase{
      font-size:1.2rem;
      font-weight:500;
      margin:0 20px .5em;
      text-align:left;
    }

    .blog-showcase .blog_item-showcase .bi_content-showcase{
      padding:0 20px 10px;
      font-size:.9rem;
      text-align:justify;
      color:#666;             /* a bit darker for readability */
    }

    .blog-showcase .blog_item-showcase .reading_time-showcase{
      color:#738a94;
      font-size:.8rem;
      line-height:33px;
      letter-spacing:.5px;
      text-transform:uppercase;
      text-align:left;
      padding:0 20px 20px;
    }

    .blog-showcase .blog_item-showcase:hover{
      box-shadow:8px 28px 50px rgba(39,44,49,.07), 1px 6px 12px rgba(39,44,49,.04);
      transition:all .4s ease;
      transform:translate3D(0,-1px,0) scale(1.02);
    }

    .blog-showcase .blog_button-showcase a{
      text-decoration:none;
      display:block;
      width:200px;
      margin:24px auto;
      letter-spacing:1px;
      padding:15px 26px;
      background:#faaf30;
      color:#fff;
      outline-offset:-2px;
      transition:all .3s ease;
      border-radius:4px;
    }

    .blog-showcase .blog_button-showcase a:hover{
      background:#fff;
      color:#faaf30;
      box-shadow:inset 0 0 0 2px #faaf30;
    }

    /* Tablets */
    @media (max-width: 900px){
      .blog-showcase .blog_wrapper-showcase{grid-template-columns:1fr 1fr}
    }

    /* Phones */
    @media (max-width: 600px){
      .blog-showcase .blog_wrapper-showcase{grid-template-columns:1fr}
      .blog-showcase .blog_item-showcase .bi_title-showcase,
      .blog-showcase .blog_item-showcase .bi_content-showcase,
      .blog-showcase .blog_item-showcase .reading_time-showcase{margin-left:16px;margin-right:16px;padding-left:0;padding-right:0}
    }
    /* --- Call/WA CTA (NextBC) --- */
.nbc-contact-cta {
  width: min(1100px, 100%);
  min-height: 311px;
  margin: 0 auto;
  padding: 24px 16px;
  position: relative; /* allow absolute bottom bar */

  /* encode the space in the file name or rename file */
  background-image: url('/img/Nextbc-banner/next%20bc%20banner-03.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* bottom bar with buttons */
.nbc-contact-cta__wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;              /* distance from bottom */
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0 16px;           /* base side padding */
  z-index: 1;
}

/* Large screens: apply left offset ~655px */
@media (min-width: 1280px) {
  .nbc-contact-cta__wrap { padding-left: 725px; }
}

/* 1024–1279px: smaller offset */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nbc-contact-cta__wrap { padding-left: 723px; }
}

/* 768–1023px: modest offset */
@media (min-width: 768px) and (max-width: 1023px) {
  .nbc-contact-cta__wrap { padding-left: 654px; }
}

/* <768px: center buttons, no offset */
@media (max-width: 767px) {
  .nbc-contact-cta__wrap {
    justify-content: center;
    padding-left: 16px;      /* reset to base padding */
  }
}

.nbc-cta-btn {
  --nbc-brand: #faaf30;
  --nbc-brand-dark: #d8921f;
  --nbc-text-dark: #1c1c1c;

  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .2px;
  border: 2px solid var(--nbc-brand);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  box-shadow: 0 6px 16px rgba(250, 175, 48, 0.25);
  line-height: 1;
  background: #fff;          /* default for WA look */
  color: var(--nbc-text-dark);
}

.nbc-cta-btn__icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
  flex: 0 0 auto;
}

/* Call: filled brand pill */
.nbc-cta-btn--call {
  background: var(--nbc-brand);
}
.nbc-cta-btn--call:hover,
.nbc-cta-btn--call:focus-visible {
  background: var(--nbc-brand-dark);
  border-color: var(--nbc-brand-dark);
  transform: translateY(-1px);
  outline: none;
}

/* WhatsApp: subtle hover */
.nbc-cta-btn--wa:hover,
.nbc-cta-btn--wa:focus-visible {
  background: rgba(250, 175, 48, 0.1);
  transform: translateY(-1px);
  outline: none;
}

/* Small screens: full width buttons */
@media (max-width: 540px) {
  .nbc-cta-btn {
    width: 100%;
    justify-content: center;
  }
}

.project-strip-shell {
  max-width: 1080px;
  margin: 0 auto;
}

.project-strip-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding: 12px 0;
  scroll-snap-type: x mandatory;
  justify-content: center;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.project-strip-track::-webkit-scrollbar {
  display: none;
}

.project-card {
  flex: 0 0 320px;
  max-width: 320px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  background: #fff;
  scroll-snap-align: start;
}

@media (max-width: 992px) {
  .project-card {
    flex-basis: 280px;
  }
}