:root {
  /* Color */
  --clr-primary: #000087;
  --Blue: #000087;
  --Yellow: #FFCD00;
  --Black: #141219;
  --Cool-Gray: #C2C2C2;
  --Onyx: #0B0B0C;
  --Gray-Light: #F7F7F7;
  --clr-secondary: #FFCD00;
  --bg-secondary: #F7F7F7;
  --clr-neutral100: #ebeff4;
  --clr-neutral200: #f7fafb;

  --clr-white: #ffffff;
  --clr-black: #000000;
   
  /* Gradients */
  --grad-primary: linear-gradient(93deg, #000087 0.6%, #000A00 84.17%);
}

/* Texts and backgrounds classes */

.text-primary {
  color: var(--clr-primary) !important;
}
.text-gray {
    color: var(--Cool-Gray, #C2C2C2) !important;
}
.bg-primary {
  background-color: var(--clr-primary) !important;
}
.bg-footer {
    background-color: var(--Onyx, #0B0B0C) !important;
}
.text-secondary {
  color: var(--clr-secondary) !important;
}
.bg-secondary {
  background-color: var(--bg-secondary) !important;
}
.text-neutral100 {
  color: var(--clr-neutral100) !important;
}
.bg-neutral100 {
  background-color: var(--clr-neutral100) !important;
}
.text-neutral200 {
  color: var(--clr-neutral200) !important;
}
.bg-neutral200 {
  background-color: var(--clr-neutral200) !important;
}
.text-white {
  color: var(--clr-white) !important;
}
.bg-white {
  background-color: var(--clr-white) !important;
}
.bg-grad {
  background-image: var(--grad-primary) !important;
}
.text-black {
  color: var(--clr-black) !important;
}
.bg-black {
  background-color: var(--clr-black) !important;
}

body,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  color: var(--Black, #141219);
}