/* You can remove this @import because you already load fonts in global.css */
/* @import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Merriweather:ital,wght@0,300;1,300&display=swap"); */

.card-img-custom {
  max-width: 100%;
  max-height: 100%;
  align-self: center;
  margin-top: 0;               /* was 20%, which pushed images too far down */
}
.col {
  display: flex;
}

/* Main project card */
.card-home {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
position: relative;
  margin: 25px auto;
  background-color: #FFFFFF;   /* was #4E4E56 – now white to match your site */
  border-color: #EAE4FA;       /* soft lavender border instead of dark gray */
  border-width: 1px;
  border-style: solid;
  width: 100%;
  max-width: 320px;            /* keeps the nice vertical card feel */
  padding: 8px;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);  /* same style as other cards */
}

/* New pill buttons that match the rest of your site */
.card-home .btn {
  display: inline-block;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: #EAE4FA;
  color: var(--foreground-accent);
  border: none;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  margin: 5px auto 10px;       /* centers nicely inside the card */
}
.card-home:hover {
  transform: translateY(-4px);
  transition: transform 0.25s ease;
}

.card-home .btn:hover,
.card-home .btn:focus-visible {
  background: #CBBBE0;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(143,116,181,0.2);
}

.card-logo-wrapper {
  height: 140px;                 /* same logo area for every card */
  display: flex;
  align-items: center;           /* center vertically */
  justify-content: center;       /* center horizontally */        /* space above/below logo */
}

.card-logo {
  max-height: 100%;              /* fill the 140px box, but not bigger */
  max-width: 100%;               /* don’t overflow horizontally */
  width: auto;                   /* keep aspect ratio */
  object-fit: contain;           /* no cropping/stretching */
  display: block;
  padding: 15px;
}

.page-title{
  padding: 30px;
}

.card-body {
  flex: 0 0 auto !important;
  padding-bottom: 0px;
}

.card-text-wrapper {
 height: 140px;                 /* same logo area for every card */
  display: flex;
  align-items: center;           /* center vertically */
  justify-content: center;       /* center horizontally */
  margin: 1.5rem 0 1rem;         /* space above/below logo */
}