.text-image-fill{
  background-image:url("/dacraft-new/img/flag.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;

  /* outline */
  -webkit-text-stroke:1px #e5e7eb;           /* try 1–3px */
}

/* For solid buttons (e.g., .btn-primary) */
.btn-no-hover,
.btn-no-hover:hover,
.btn-no-hover:focus,
.btn-no-hover:active {
  background-color: var(--bs-primary) !important; /* or your exact color */
  border-color: var(--bs-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
  transition: none !important;
}

/* For outline buttons (e.g., .btn-outline-primary) */
.btn-no-hover-outline,
.btn-no-hover-outline:hover,
.btn-no-hover-outline:focus,
.btn-no-hover-outline:active {
  background-color: transparent !important;
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;
  box-shadow: none !important;
  transition: none !important;
}
/* Make the image fill its box */
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Remove any vertical padding inside this block */
.products-row .section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Desktop: make both columns equal height */
@media (min-width: 992px) {
  .products-row > [class*="col-"] { display: flex; }
  .products-row > [class*="col-"] > * { flex: 1 1 auto; }
}

/* Mobile: limit the image (and thus gray bg) height to 200px */
@media (max-width: 575.98px) {
  .products-row .products-hero {
    height: 200px !important;
  }
}