:root {
  --primary-colour: #19b59b;
  --primary-colour-hover: #149e87;
  --primary-colour-active: #108774;

  --x-teal: #19b59b;
  --x-teal-hover: #149e87;
  --x-teal-active: #108774;

  --secondary-colour: #184c88;
  --secondary-colour-hover: #173774;
  --secondary-colour-active: #0d1f3f;

  --x-navy: #1b2b4b;
  --x-navy-700: #142038;

  --error-colour: #fa7a86;
}

.hero {
  min-height: 100svh;
  background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
  overflow-x: clip;
}

.btn-primary {
  background-color: var(--primary-colour);
  color: white;
  border-color: var(--primary-colour);
}

.btn-primary:hover {
  background-color: var(--primary-colour-hover);
  border-color: var(--primary-colour-hover);
}

.btn-primary:active {
  background-color: var(--primary-colour-active);
  border-color: var(--primary-colour-active);
}

.btn-outline-primary {
  background-color: transparent;
  color: var(--primary-colour);
  border-color: var(--primary-colour);
}

.btn-outline-primary:hover {
  background-color: var(--primary-colour-hover);
  border-color: var(--primary-colour-hover);
  color: white;
}

.btn-outline-primary:active {
  background-color: var(--primary-colour-active) !important;
  border-color: var(--primary-colour-active) !important;
  color: white;
}

.form-label[type = checkbox] {
  cursor: pointer;
}

@keyframes slideUp {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  50% {
    transform: translateY(-10px);
    opacity: 1;
  }
  80% {
    transform: translateY(5px);
    opacity: 1;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

.slideUp {
  opacity: 0;
  animation: slideUp 1s ease-in-out 1 forwards;
}

@keyframes slideLeft {
  0% {
    transform: translateX(-800px);
    opacity: 0;;
  }
  100% {
    transform: translateX(0px);
    opacity: 0.03;
  }
}

.slideLeft {
  opacity: 0;
  animation: slideLeft 3s ease 1 forwards;
}

@keyframes pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.pop {
  opacity: 0;
  animation: pop 1s ease 1 forwards;
}

html {
  background-color: var(--x-navy-700);
}

footer {
  background-color: var(--x-navy-700);
  color: white;
}

h1, h2, .lead {
  color: var(--x-navy);
}

input::placeholder {
  opacity: 0.3 !important;
}

.bi-check2 {
  color: var(--primary-colour);

}

.bi-x-lg {
  color: var(--error-colour);
}


svg.loader {
 width: 3.25em;
 transform-origin: center;
 animation: rotate4 2s linear infinite;
}

.btn svg.loader {
 width: 1.25em;
 vertical-align: -0.25em;
}

.btn svg.loader circle {
 stroke: currentColor;
}

circle {
 fill: none;
 stroke: var(--primary-colour);
 stroke-width: 2;
 stroke-dasharray: 1, 200;
 stroke-dashoffset: 0;
 stroke-linecap: round;
 animation: dash4 1.5s ease-in-out infinite;
}

@keyframes rotate4 {
 100% {
  transform: rotate(360deg);
 }
}

@keyframes dash4 {
 0% {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
 }

 50% {
  stroke-dasharray: 90, 200;
  stroke-dashoffset: -35px;
 }

 100% {
  stroke-dashoffset: -125px;
 }
}