:root {
  /* Brand colours */
  --colour1: #2A97C6;
  --colour1-light: #c5e0f4;
  --colour1-dark: #103d75;

  --colour2: #43A047; 
  --colour2-light: #e6fad3;
  --colour2-dark: #436d1b;

  --colour3: goldenrod;
  --colour3-light: rgba(252, 243, 0, 0.5);

  --colour4: #f26430;
  --colour4-light: #ffa352;

  --colour5: rgb(195, 66, 63);

  --colour6: #a848a8;

  /* Neutral palette */
  --black: rgb(33, 37, 41);
  --back-black: #0b0f0c;
  --half-black: rgba(0, 0, 0, 0.5);
  --white: #fff;
  --light-white: rgba(255, 255, 255, 0.1);
  --dull-white: rgba(255, 255, 255, 0.8);
  --grey: #e5e7eb;
  --light-grey: #eef2f5;
  --bs-text-opacity:1;

  /* Glass/overlay */
  --glass-rgb: 255, 255, 255;
  --bs-emphasis-color-rgb: 255, 255, 255;
}

[data-bs-theme="dark"] {
  --black: #fff;
  --white: #0b0f0c;
  --dull-white: #0b0f0c;
  --back-black: #fff;
  --bs-white-rgb: 0, 0, 0;
  --bs-light-rgb: 0, 0, 0;
  --bs-black-rgb:255,255,255;
  --bs-heading-color: rgba(255, 255, 255, 0.8);
  --bs-dark-rgb: 255,255,255;
  --light-grey: rgb(184 186 184 / 22%);
  --colour1-light: #103d75;
  --colour1-dark: #c5e0f4;
  --colour2-light: #436d1b;
  --colour2-dark: #e6fad3;
  --grey:rgb(199 200 202 / 47%);
  --bs-text-opacity:0.7;
}

body {
  color: var(--white);
  background: var(--back-black);
}

svg, img {            
  max-width: 100%;
}

/*---------------- Header ----------------*/
.glass {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  z-index: 99;
  background: rgba(var(--glass-rgb), 0.08);
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.navbar-toggler-icon {
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-brand {
  color: var(--white);
}

/*---------------- Hero ----------------*/
.hero-parallax {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 75vh;
  max-height: 90vh;
  color: #fff;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  will-change: transform;
  transition: transform .2s linear;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
}

.hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(var(--glass-rgb), .10), rgba(var(--glass-rgb), .04));
  backdrop-filter: blur(6px);
}
.hero::after {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(700px 320px at 5% 0%, rgba(2, 136, 209, .22), transparent 60%),
    radial-gradient(600px 300px at 95% 0%, rgba(67, 160, 71, .18), transparent 60%);
  mask: linear-gradient(#000, transparent 80%);
}
.lead {
  backdrop-filter: blur(20px);
  border-radius: 20px;
}
/*---------------- Components ----------------*/
.section-title { letter-spacing: 0.4px; }

.btn-primary {
  background: linear-gradient(170deg, var(--colour1), var(--colour2));
  color: #fff;
  border: none;
}
.btn-outline-primary {
  --bs-btn-color: var(--colour1);
  --bs-btn-border-color: var(--colour1);
  --bs-btn-hover-bg: var(--colour1);
  --bs-btn-hover-border-color: var(--colour1);
}

.badge-gradient {
  background: linear-gradient(90deg, var(--colour1), var(--colour2));
}

.card {
  background: rgba(255, 255, 255, 0.06);
  border: 4px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  transition: all 0.3s ease;
}
.card:hover {
  border-color: rgba(2, 136, 209, 0.5);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transform: translateY(-4px);
}
.card-img-top {
  height: 160px;
  object-fit: cover;
}
.footer a { color: var(--dull-white); }

/*---------------- Utilities ----------------*/
.hidden { display: none !important; }
.visible { display: block !important; }

.tag-imp-2,
.tag-imp-3,
.tag-imp-4,
.tag-imp-5 {
  font-weight: bold;
  text-decoration: underline;
}
.tag-qual--2,
.tag-qual--3 {
  text-decoration: line-through;
}

.badge {
  margin: 2px;
  padding: 0 0.6em;
  border-radius: 10rem;
  font-weight: 400;
  color: var(--black);
  background-color: var(--white)
}