@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css");

:root {
  /* Brand colours */
  --primary: #015480;
  --secondary: #f9a632;
  --black: #000;
  --white: #fff;

  /* Bootstrap overrides */
  --bs-primary: #015480;
  --bs-primary-rgb: 1, 84, 128;

  --bs-secondary: #f9a632;
  --bs-secondary-rgb: 249, 166, 50;

  --bs-black: #000;
  --bs-black-rgb: 0, 0, 0;

  --bs-white: #fff;
  --bs-white-rgb: 254, 254, 254;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  color: var(--secondary);
  text-decoration: none;
}

.btn-primary {
  background-color: var(--primary);
  color: #fff;
}

.btn-secondary {
  background-color: var(--secondary);
  color: #000;
}




/* ------------------------------------ */
/* Links */
/* ------------------------------------ */
a {
  text-decoration: none;
}

/* ------------------------------------ */
/* Cookies */
/* ------------------------------------ */
.cookie-container {
  display: none;
}

.cookie-container.active {
  display: block;
}

/* ------------------------------------ */
/* Utilities */
/* ------------------------------------ */

.logo {
  max-height: 15vh;
}

.spacer {
  padding: 15vh 0;
}

.hero-video {
    height: 50vh; /* 25% of viewport height */
    object-fit: cover;
    object-position: center;
}

.hero-img {
    height: 25vh;                  /* fixed hero height */
    background-position: center;   /* center the image */
    background-size: cover;        /* fill the container */
    background-repeat: no-repeat;  /* no tiling */
    background-attachment: fixed;  /* parallax effect */
}

.sidebar-nav img {
  max-width: 100%;
  height: auto;
  display: block;
}
.sidebar-nav {
  width: 100%; /* or whatever fits your design */
  background: #ff0000;
}

ul li::marker {
  font-size: 1.2rem; /* make bullets larger */
  color: var(--secondary); /* Bootstrap primary color */
  
}

.nav-link {
  font-size: 1.2rem;
  color: var(--primary); /* Bootstrap primary color */
  font-weight: 600;
}

.dropdown-menu {
  background: var(--primary);
}

.dropdown-item {
    font-size: 1.1rem;
  color: var(--white); /* Bootstrap primary color */
}