:root {
  --color-primary: #1e56a0;
  --color-primary-dark: #163d73;
  --color-accent: #4a90d9;
  --color-text: #1a1a2e;
  --color-text-light: #5a6070;
  --color-bg: #ffffff;
  --color-bg-alt: #f4f7fb;
  --color-border: #dce3ed;
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Open Sans', sans-serif;
}

.hero {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)),
    url('https://d24rugpqfx7kpb.b-cdn.net/STRPN/7EEB52FCD5DAFCFB516A70B73F3B4018/what-is-sytropin.jpg/2c4379b92e942654b761093a6fbf0cbc.webp');
  background-size: cover;
  background-position: center top;
}

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