@charset "utf-8";
/* CSS Document */

.bg-pastelred {
  background-color: #B76E95 !important;
}
.bg-pastelblue {
  background-color: #89D3F3 !important;
}
.bg-pastelyellow {
  background-color: #f3fab6 !important;
}
.bg-pastellilac {
  background-color: #B6A9ED !important;
}
.bg-pastelorange {
  background-color: #E5ACA4 !important;
}

/* ---- Card Styling Enhancements ---- */

.card {
  height: 100%;
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative; /* Required for stretched-link */
  overflow: hidden;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15);
}

.card-title a {
  text-decoration: none;
  color: #212529;
  transition: color 0.3s ease;
}

.card-title a:hover {
  color: #0d6efd;
}

.card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
}

.card-text {
  flex-grow: 1;
  margin-top: 0.5rem;
}

.card img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  display: block;
}

.card .btn {
  pointer-events: none; /* So full-card stretched-link works */
  margin-top: 1rem;
}
.qi-header {
  word-break: break-word;   /* break long words if needed */
  hyphens: auto;            /* optional */
}

@media (max-width: 1200px) {
  .qi-header {
    font-size: 1rem;        /* reduce font size only in this block */
  }
}