:root {
  --color-primary: #1a2744;
  --color-primary-dark: #0f1a2e;
  --color-accent: #4a6fa5;
  --color-text: #1a1a2e;
  --color-text-light: #5a6070;
  --color-bg: #f8f9fb;
  --color-bg-alt: #eceef3;
  --color-border: #d0d5df;
  --font-heading: 'Georgia', serif;
  --font-body: 'Open Sans', sans-serif;
}

.hero {
  background-image:
    linear-gradient(160deg, rgba(10,20,55,0.85) 0%, rgba(15,30,70,0.72) 60%, rgba(26,39,68,0.65) 100%),
    url('https://images.pexels.com/photos/5668882/pexels-photo-5668882.jpeg?auto=compress&cs=tinysrgb&w=1920');
  background-size: cover;
  background-position: center top;
  padding: 7rem 0;
}

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