:root {
  /* Navbar heights by breakpoint */
  --nav-height-lg: 80px;   /* desktop */
  --nav-height-md: 74px;   /* tablet */
  --nav-height-sm: 68px;   /* phone */

  /* Logo heights */
  --logo-height-lg: 64px;
  --logo-height-md: 58px;
  --logo-height-sm: 52px;

  --brand-color: #0964ff;
  --brand-color-dark: #084fc1;
  --teaser-bg: #f5f8ff;
  --teaser-border: #c6d9ff;
  --text-color: #333;
}

/* Reset */
body {
  font-family: 'Montserrat', Arial, sans-serif;
  margin: 0;
  color: var(--text-color);
}

/* Reserve space under fixed navbar */
body::before {
  content: "";
  display: block;
  height: var(--nav-height-lg);
}
@media (max-width: 991.98px) { body::before { height: var(--nav-height-md); } }
@media (max-width: 575.98px) { body::before { height: var(--nav-height-sm); } }

/* Navbar */
.navbar {
  min-height: var(--nav-height-lg);
  padding-top: .25rem;
  padding-bottom: .25rem;
}
@media (max-width: 991.98px) { .navbar { min-height: var(--nav-height-md); } }
@media (max-width: 575.98px) { .navbar { min-height: var(--nav-height-sm); } }

.navbar-brand {
  display: flex;
  align-items: center;
  margin-right: 1rem;
}

.navbar-logo {
  height: var(--logo-height-lg);
  width: auto;
}
@media (max-width: 991.98px) { .navbar-logo { height: var(--logo-height-md); } }
@media (max-width: 575.98px) { .navbar-logo { height: var(--logo-height-sm); } }

.navbar .nav-link {
  font-weight: 500;
  color: #333;
}
.navbar .nav-link.active,
.navbar .nav-link:hover {
  color: var(--brand-color);
}

/* Teaser boxes */
.teaser-box {
  background: var(--teaser-bg);
  border: 1px solid var(--teaser-border);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.teaser-box h3 { color: var(--brand-color); font-weight: 700; font-size: 1.2rem; }
.teaser-box p { font-size: .95rem; margin: 0 0 1rem 0; }
.teaser-box .btn-link {
  background: var(--brand-color);
  color: #fff;
  padding: 8px 18px;
  border-radius: 5px;
  text-decoration: none;
}
.teaser-box .btn-link:hover { background: var(--brand-color-dark); }

/* Modal images */
.content-side-image {
  max-width: 100%;
  border-radius: 8px;
  cursor: pointer;
}