:root {
  --teal: #499fa4;
  --navy: #13344c
  --ivory: #f2f3ee;
  --text: #383F51;
  --white: #ffffff;
  --font-family: 'DM Sans', sans-serif;
}

body {
  font-family: var(--font-family);
  background-color: var(--white);
  color: var(--text);
}

.app-name {
  color: var(--teal);
}

/* Resized logo */
.app-name {
  text-align: left !important;
}

.app-name-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-start;  /* 🔽 ensures left alignment */
}

.app-name-link img {
  height: 100px;      /* or whatever size fits */
  width: auto;
  max-height: 100px;
  vertical-align: middle;
  margin-left: 10px;
}

/* Font Awesome Icon Styling */
i.fas, i.fa-solid, i.far, i.fab, i.fa-light, i.fa-duotone, i.fa-sharp {
  color: var(--navy);
  margin-right: 0.4em;
  vertical-align: middle;
}

/* Duotone icon color configuration */
.fa-duotone {
  --fa-primary-color: var(--navy);
  --fa-secondary-color: var(--teal);
  --fa-secondary-opacity: 0.8;
}