:root {
  /* Color */
  --clr-primary: #208EF5;
  --clr-secondary: #003466;
	
  --clr-blue-50: #F1F9FF;
  --clr-blue-100: #E0F2FF;
  --clr-blue-200: #BCE4FE;
  --clr-blue-300: #8FD2FD;
  --clr-blue-500: #208EF5;
  --clr-blue-600: #005CA1;
  --clr-blue-700: #00457A;
  --clr-blue-800: #003466;
  --clr-blue-900: #024;

	
  --clr-white: #ffffff;
	
  --clr-purple-700: #5925DC;
  --clr-purple-50: #F4F3FF;
	
  --clr-orange-700: #B54708;
  --clr-orange-50: #FFFAEB;
	
  --clr-green-700: #027A48;
  --clr-green-50: #ECFDF3; 

  --clr-yellow-800: #FC0;

  --clr-gray-900: #181D27;
  --clr-gray-800: #252B37;
  --clr-gray-600: #535862;
  --clr-gray-500: #717680;
  --clr-gray-300: #D5D7DA;
  --clr-gray-200: #E9EAEB;
  --clr-gray-50: #FAFAFA;



  --clr-neutral100: #ebeff4;
  --clr-neutral200: #f7fafb;

  --clr-black: #000000;

  /* Gradients */
  --grad-primary: linear-gradient(
    233.64deg,
    rgba(255, 255, 255, 0) 18.77%,
    #6c82a6 84.43%
  );
}

/* Texts and backgrounds classes */

.text-primary {
  color: var(--clr-primary) !important;
}
.bg-primary {
  background-color: var(--clr-primary) !important;
}
.text-secondary {
  color: var(--clr-secondary) !important;
}
.bg-secondary {
  background-color: var(--clr-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;
}