.btn-custom {
  background-color: #253746;
  color: #fff;
  border-color: #253746;
  border-radius: 16px;
}
.btn-custom:hover,
.btn-custom:focus {
  background-color: #17222b;
  border-color: #17222b;
  color: #fff;
}
.bg-custom {
  background-color: #253746;
  color: #fff;
}
  :root{
    --card-radius: 12px;
    --card-bg: #fff;
    --card-border: #fff;
    --panel-bg-top: #fff;
    --panel-bg-bottom: #fff;
    --divider-color: #253746;     /* custom colour for dividers */
    --divider-thickness: 8px;     /* thickness for both vertical and horizontal dividers */
    --card-min-height: 240px;
    --gap: 16px;
  }

  /* Row wrapper that holds cards and vertical dividers as separate flex items */
  .cards-row {
    display: flex;
    align-items: stretch; /* makes cards equal height */
    gap: var(--gap);
    /* max-width: 1100px; */
    margin: 20px;
  }

  /* Each card container (flex:1 to share available width equally) */
  .card {
    flex: 1 1 0;
    min-height: var(--card-min-height);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    overflow: hidden; /* keeps rounding and hides inner divider overflow */
    display: grid;
    --top-fr: 3fr;
    --bottom-fr: 4fr;
    grid-template-rows: var(--top-fr) var(--divider-thickness) var(--bottom-fr);
    box-shadow: 0 6px 18px rgba(20,30,40,0.06);
  }

  .card .panel {
    display: flex;
    justify-content: center;
    padding: 16px;
  }
  .card .panel.top {
    background: var(--panel-bg-top);
    grid-row: 1;
  }
  .card .panel.bottom {
    background: var(--panel-bg-bottom);
    grid-row: 3;
  }

  /* Thick horizontal divider between the two panels inside each card */
  .card .inner-divider {
    height: var(--divider-thickness);
    background: var(--divider-color);
    width: 100%;
    grid-row: 2;
  }

  /* Vertical divider as its own flex item between cards */
  .v-divider {
    width: var(--divider-thickness);
    background: var(--divider-color);
    border-radius: calc(var(--divider-thickness) / 2);
    flex: 0 0 var(--divider-thickness);
    align-self: stretch;
    /* prevent pointer events (decorative) */
    pointer-events: none;
  }

@media (max-width: 760px) {
    .cards-row { flex-direction: column; }

    .card {
      height: auto; /* allow card to grow */
      grid-template-rows: auto var(--divider-thickness) auto;
    }

    .card { min-height: 30em; }

  }