:root {
  --color-primary: #1a3a5c;
  --color-primary-dark: #0f2340;
  --color-accent: #3d7ab5;
  --color-text: #1a1a2e;
  --color-text-light: #546e8a;
  --color-bg: #f8f9fc;
  --color-bg-alt: #eef1f7;
  --color-border: #d0d8e8;
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Open+Sans', sans-serif;
}

.hero {
  background-image: linear-gradient(rgba(10,20,40,0.80), rgba(10,20,40,0.75)), url('https://images.pexels.com/photos/3861969/pexels-photo-3861969.jpeg?auto=compress&cs=tinysrgb&w=1920');
  background-size: cover;
  background-position: center;
}

.hero h1,
.hero-sub {
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.hero .btn-primary {
  background: #3d7ab5;
  border-color: #3d7ab5;
}

.hero .btn-primary:hover {
  background: #2d6aa5;
  border-color: #2d6aa5;
}