:root {
  --color-body-text: #3c4043;

  --color-primary-blue: #1e60ff;
  /* Main brand color – buttons, links */
  --color-dark-blue: #153e90;
  /* Headlines, text on light bg, depth */
  --color-sky-blue: #4ba3f2;
  /* Secondary, cards, icons, hover states */
  --color-soft-blue-tint: #eaf4ff;
  /* Backgrounds, subtle section shading */
  --color-accent-teal: #00ffc6;
  /* Call-to-action, highlights (used in logo arrow) */

  --color-light-gray: #f8f9fa;
  --color-medium-gray: #5f6368;
  --color-dark-gray: #202124;

  --body-font-family: "Inter", sans-serif;

  --bs-card-color: var(--color-body-text) !important;
  --bs-body-color: var(--color-body-text) !important;
  --bs-heading-color: var(--color-dark-gray) !important;
  --bs-card-title-color: var(--color-dark-gray) !important;
}

html,
body {
  padding-top: 44px;
  font-family: var(--body-font-family) !important;
  font-optical-sizing: auto;
  font-size: 16px;
  min-width: 300px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Sora", sans-serif;
  color: var(--color-dark-gray);
}

.color-highlight {
  color: var(--color-primary-blue) !important;
}

.background-color-tint {
  background-color: var(--color-soft-blue-tint) !important;
}

.background-color-light-gray {
  background-color: var(--color-light-gray) !important;
}

/* Button customization */
.btn-primary {
  background-color: var(--color-primary-blue);
  border-color: var(--color-primary-blue);
  color: white;
}

.btn-primary:hover {
  background-color: #164fc7; /* Darker primary blue for hover */
  border-color: #164fc7;
}

.btn-secondary {
  background-color: var(--color-sky-blue);
  border-color: var(--color-sky-blue);
  color: white;
}

.btn-secondary:hover {
  background-color: #3a8ec4; /* Darker sky blue for hover */
  border-color: #3a8ec4;
}

.btn-success {
  background-color: var(--color-accent-teal);
  border-color: var(--color-accent-teal);
  color: white;
}

.btn-success:hover {
  background-color: #00d2a1; /* Darker teal for hover */
  border-color: #00d2a1;
}

.btn-outline-primary {
  color: var(--color-primary-blue);
  border-color: var(--color-primary-blue);
}

.btn-outline-primary:hover {
  background-color: var(--color-primary-blue);
  color: white;
  border-color: var(--color-primary-blue);
}

.btn-outline-secondary {
  color: var(--color-sky-blue);
  border-color: var(--color-sky-blue);
}

.btn-outline-secondary:hover {
  background-color: var(--color-sky-blue);
  color: white;
  border-color: var(--color-sky-blue);
}

.ui-card .image img {
  width: 100%;
  min-width: 120px;
  max-width: 160px;
  height: auto;
}

.ui-card .image img {
  border-radius: 0.5rem;
}

@media (min-width: 992px) {
  .ui-card .image {
    width: 100%;
    height: 200px;
  }

  .ui-card .image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    height: 100%;
    object-fit: cover;
    border-width: 0 !important;
    border-radius: 0;
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
  }
}