/*SETTINGS OF IMAGES INSIDE THE CAROUSEL*/
.c-item {
  height: 350px;
}

.c-img {
  height: 100%;
  object-fit: cover;
  filter: brightness(0.9);
}
/*SETTINGS OF IMAGES INSIDE THE CAROUSEL*/
/* Modal popup settings*/

.ModelBckColor{
  background-color: #004b8d;
}

.Headerbkcolor {
  background-color: #002e57;
  color: rgb(250, 251, 252);
}

/* ---------- Compressor selection cards (RC2, RTM, RE, LT, RE-MI, RG) ---------- */
/* Scoped to #HanbellGroup so it doesn't affect modal cards or other .card
   elsewhere on the page. */

#HanbellGroup .col-md-2 > .card {
  max-width: 180px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #e5e5e5;
}

#HanbellGroup .col-md-2 > .card > .card-body {
  padding: 0.75rem 0.6rem;
}

#HanbellGroup .col-md-2 > .card > .card-body > .card-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: #002e57;
}

#HanbellGroup .col-md-2 > .card > .card-body > a img {
  max-width: 110px;
  height: auto;
  display: block;
  margin: 0.35rem auto;
}

#HanbellGroup .col-md-2 > .card > .card-body > a {
  font-size: 0.78rem;
  color: #002e57;
  line-height: 1.25;
}

/* Hover lift — only on devices that actually have a hover-capable pointer.
   Prevents mobile taps from getting stuck in a lifted/translated state. */
@media (hover: hover) and (pointer: fine) {
  #HanbellGroup .col-md-2 > .card {
    transition: box-shadow 0.15s ease;
  }
  #HanbellGroup .col-md-2 > .card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
}

/* On phones, tighten card sizing but keep Bootstrap grid behaviour intact.
   Do NOT override .col-md-3 width — Bootstrap already handles it correctly. */
@media (max-width: 767.98px) {
  #HanbellGroup .col-md-2 > .card {
    max-width: 220px;
  }
  #HanbellGroup .col-md-2 > .card > .card-body > a img {
    max-width: 100px;
  }
}

/* Center everything inside the six product cards */
#HanbellGroup .card-body {
    text-align: center;
    padding: 0.75rem 0.5rem;
}

/* Make all six images the same size, centered */
#HanbellGroup .card-body img {
    display: block;
    width: 100%;
    max-width: 110px;      /* tune this up/down to taste */
    height: auto;
    margin: 0.5rem auto;   /* auto = horizontal centering */
}

/* Keep the "Click for Documentation" link tidy underneath */
#HanbellGroup .card-body a {
    display: inline-block;
    font-size: 0.85rem;
    line-height: 1.2;
    text-decoration: none;
}