a{
  text-decoration: none;
  color: #002e57;
}
#textbkg{
  background-color: #002e57;
  color: white;
}

.textbkg{
  background-color: #002e57;
}

.btn:focus{
  outline: none!important;
  box-shadow: none!important;
}
.btn-link{
  color: #0a0a0a!important;
  
}

.btn-link:hover{
  background-color: darkorange;
  color: #002e57!important;
}

.product-item{
  border: 1px solid #ebebeb;
  border-radius: 1px;
  position: relative;
}

.product-img:hover::after{
  content: "";
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5%;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.linkcardSize{
  font-size: 15px;
}

#AssociateCard{
  width: 15rem;
}

/* Mobile: on small screens, override Isotope's absolute positioning so cards
   fall back into normal document flow and can be centered with flexbox.
   Isotope inline-styles win the CSS cascade normally — the !important flags
   are required to beat those inline styles. Filtering (show/hide) still works. */
@media (max-width: 767.98px) {
  /* Force the Isotope container back to normal flow.
     Isotope inline-styles the container with position:relative + a fixed height —
     override both, plus min-height, so cards sit in normal document flow below the title. */
  #product-list {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding-top: 1rem;   /* clear space between the title and the first card */
  }

  /* Force each card back to static positioning + center it */
  #product-list > [id="AssociateCard"] {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: 22rem;
    margin: 0 auto 1rem;
    float: none;
  }

  /* Center the logo image inside each card */
  #AssociateCard .product-item img.img-fluid {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  /* Center the address text and the "Visit Us" button */
  #AssociateCard .card-body,
  #AssociateCard .card-body .card-text,
  #AssociateCard .card-body > div {
    text-align: center;
  }
}