/* CSS Document */

:root {


  --color-primary: #006634;
  --color-primary-rgb: 0, 102, 52;

  --color-primary-dark: #005129;
  --color-primary-dark-rgb: 0, 81, 41;

  --color-secondary: #94C01F;
  --color-secondary-rgb: 148, 192, 31;

  --color-tertiary: #F6F8F6;
  /*ultra light green */
  --color-tertiary-rgb: 246, 248, 246;
  ;
  /*ultra light green */


  --color-white: #FCFFFF;
  --color-white-rgb: 252, 255, 255;
  --color-true-white: #FFF;
  --color-true-white-rgb: #255, 255, 255;
  --color-black: #202525;
  --color-true-black: #000;
  --color-true-black-rgb: 0, 0, 0;



  --color-font-light: var(--color-white);
  --color-font-dark: var(--color-black);



  --color-grey: var(--color-black);
  --color-grey--20: #fdfdfd;
  --color-grey--10: #fafafa;
  --color-grey-00: #f5f5f5;
  --color-grey-05: #e9e9e9;
  --color-grey-10: #e8e8ea;
  --color-grey-20: #dcdcdf;
  --color-grey-30: #bbbbbe;
  --color-grey-40: #d1d1d4;
  --color-grey-50: #a2a3a5;
  --color-grey-60: #8f9092;
  --color-grey-70: #737476;
  --color-grey-80: #575859;
  --color-grey-90: #3c3c3e;


  --color-accent: #FF8200;
  --color-accent-darker: #cb6600;



  /* --box-shadow: 0px 4px 10px rgba(var(--color-primary-rgb), 0.6); */
  --box-shadow: 0 7px 20px 0 rgba(var(--color-true-black-rgb), 0.07);
  --box-shadow-hover: 0 7px 20px 0 rgba(var(--color-primary-dark-rgb), 0.2);
  --layout_width_content: 1200px;
  --border-radius: 10px;
  --border-radius-small: 4px;

  --typography_size_html: 16px;
  --font-default-text-size: 16px;
  /* --font-default-text-size: 1.8rem; */

  --font-default-text-color: #161414;

  /*	Fonts*/
  --font-heading: 'Lufga', sans-serif;
  --font-text: 'Lufga', sans-serif;


  --color-validate-neutral: #1F81B9;
  --color-validate-ok: var(--color-primary);
  --color-validate-error: red;
}

:root .teroza-bedrijven {

  --color-primary: #1A95A7;
  --color-primary-rgb: 26, 149, 167;

  --color-primary-dark: #0B6472;
  --color-primary-dark-rgb: 11, 100, 114;

  --color-secondary: #9BD3DC;
  --color-secondary-rgb: 155, 211, 220;

  --color-tertiary: #F6F8F6;
  /*ultra light green */
  --color-tertiary-rgb: 246, 248, 246;
  ;
  /*ultra light green */
  z
}

.border-radius {
  border-radius: var(--border-radius);
}

/* Kleurklassen gebaseerd op variabelen */
.bg-transpart {
  background-color: transparen;
}

.bg-primary {
  background-color: var(--color-primary);
}

.bg-primary-dark {
  background-color: var(--color-primary-dark);
}

.bg-secondary {
  background-color: var(--color-secondary);
}

.bg-tertiary {
  background-color: var(--color-tertiary);
}

.bg-accent {
  background-color: var(--color-accent);
}

.bg-accent-darker {
  background-color: var(--color-accent-darker);
}

.bg-white {
  background-color: var(--color-white);
}

.bg-black {
  background-color: var(--color-black);
}

.bg-grey-00 {
  background-color: var(--color-grey-00);
}

.bg-grey-10 {
  background-color: var(--color-grey-10);
}

.bg-grey-20 {
  background-color: var(--color-grey-20);
}

.bg-grey-30 {
  background-color: var(--color-grey-30);
}

.bg-grey-40 {
  background-color: var(--color-grey-40);
}

.bg-grey-50 {
  background-color: var(--color-grey-50);
}

.bg-grey-60 {
  background-color: var(--color-grey-60);
}

.bg-grey-70 {
  background-color: var(--color-grey-70);
}

.bg-grey-80 {
  background-color: var(--color-grey-80);
}

.bg-grey-90 {
  background-color: var(--color-grey-90);
}

/* Tekstkleuren */
.text-primary {
  color: var(--color-primary);
}

.text-primary-dark {
  color: var(--color-primary-dark);
}

.text-secondary {
  color: var(--color-secondary);
}

.text-tertiary {
  color: var(--color-tertiary);
}

.text-accent {
  color: var(--color-accent);
}

.text-accent-darker {
  color: var(--color-accent-darker);
}

.text-white {
  color: var(--color-white);
}

.text-true-white {
  color: var(--color-true-white)
}

.text-black {
  color: var(--color-black);
}

.text-true-black {
  color: var(--color-true-black);
}

.text-grey-00 {
  color: var(--color-grey-00);
}

.text-grey-10 {
  color: var(--color-grey-10);
}

.text-grey-20 {
  color: var(--color-grey-20);
}

.text-grey-30 {
  color: var(--color-grey-30);
}

.text-grey-40 {
  color: var(--color-grey-40);
}

.text-grey-50 {
  color: var(--color-grey-50);
}

.text-grey-60 {
  color: var(--color-grey-60);
}

.text-grey-70 {
  color: var(--color-grey-70);
}

.text-grey-80 {
  color: var(--color-grey-80);
}

.text-grey-90 {
  color: var(--color-grey-90);
}

/* Randkleuren */
.border-primary {
  border-color: var(--color-primary);
}

.border-secondary {
  border-color: var(--color-secondary);
}

.border-accent {
  border-color: var(--color-accent);
}

.border-black {
  border-color: var(--color-black);
}

.border-white {
  border-color: var(--color-white);
}


/* -----------------------------
   Margin Utilities
----------------------------- */
.m-xxs {
  margin: 0.5rem;
}

.m-xs {
  margin: 1rem;
}

.m-sm {
  margin: 2rem;
}

.m-md {
  margin: 4rem;
}

.m-lg {
  margin: 6rem;
}

.m-xl {
  margin: 8rem;
}

.m-xxl {
  margin: 12rem;
}

.m-xxxl {
  margin: 16rem;
}

.mt-xxs {
  margin-top: 0.5rem;
}

.mt-xs {
  margin-top: 1rem;
}

.mt-sm {
  margin-top: 2rem;
}

.mt-md {
  margin-top: 4rem;
}

.mt-lg {
  margin-top: 6rem;
}

.mt-xl {
  margin-top: 8rem;
}

.mt-xxl {
  margin-top: 12rem;
}

.mt-xxxl {
  margin-top: 16rem;
}

.mr-xxs {
  margin-right: 0.5rem;
}

.mr-xs {
  margin-right: 1rem;
}

.mr-sm {
  margin-right: 2rem;
}

.mr-md {
  margin-right: 4rem;
}

.mr-lg {
  margin-right: 6rem;
}

.mr-xl {
  margin-right: 8rem;
}

.mr-xxl {
  margin-right: 12rem;
}

.mr-xxxl {
  margin-right: 16rem;
}

.mb-xxs {
  margin-bottom: 0.5rem;
}

.mb-xs {
  margin-bottom: 1rem;
}

.mb-sm {
  margin-bottom: 2rem;
}

.mb-md {
  margin-bottom: 4rem;
}

.mb-lg {
  margin-bottom: 6rem;
}

.mb-xl {
  margin-bottom: 8rem;
}

.mb-xxl {
  margin-bottom: 12rem;
}

.mb-xxxl {
  margin-bottom: 16rem;
}

.ml-xxs {
  margin-left: 0.5rem;
}

.ml-xs {
  margin-left: 1rem;
}

.ml-sm {
  margin-left: 2rem;
}

.ml-md {
  margin-left: 4rem;
}

.ml-lg {
  margin-left: 6rem;
}

.ml-xl {
  margin-left: 8rem;
}

.ml-xxl {
  margin-left: 12rem;
}

.ml-xxxl {
  margin-left: 16rem;
}

/* -----------------------------
   Padding Utilities
----------------------------- */
.p-xxs {
  padding: 0.5rem;
}

.p-xs {
  padding: 1rem;
}

.p-sm {
  padding: 2rem;
}

.p-md {
  padding: 4rem;
}

.p-lg {
  padding: 6rem;
}

.p-xl {
  padding: 8rem;
}

.p-xxl {
  padding: 12rem;
}

.p-xxxl {
  padding: 16rem;
}

.pt-xxs {
  padding-top: 0.5rem;
}

.pt-xs {
  padding-top: 1rem;
}

.pt-sm {
  padding-top: 2rem;
}

.pt-md {
  padding-top: 4rem;
}

.pt-lg {
  padding-top: 6rem;
}

.pt-xl {
  padding-top: 8rem;
}

.pt-xxl {
  padding-top: 12rem;
}

.pt-xxxl {
  padding-top: 16rem;
}

.pr-xxs {
  padding-right: 0.5rem;
}

.pr-xs {
  padding-right: 1rem;
}

.pr-sm {
  padding-right: 2rem;
}

.pr-md {
  padding-right: 4rem;
}

.pr-lg {
  padding-right: 6rem;
}

.pr-xl {
  padding-right: 8rem;
}

.pr-xxl {
  padding-right: 12rem;
}

.pr-xxxl {
  padding-right: 16rem;
}

.pb-xxs {
  padding-bottom: 0.5rem;
}

.pb-xs {
  padding-bottom: 1rem;
}

.pb-sm {
  padding-bottom: 2rem;
}

.pb-md {
  padding-bottom: 4rem;
}

.pb-lg {
  padding-bottom: 6rem;
}

.pb-xl {
  padding-bottom: 8rem;
}

.pb-xxl {
  padding-bottom: 12rem;
}

.pb-xxxl {
  padding-bottom: 16rem;
}

.pl-xxs {
  padding-left: 0.5rem;
}

.pl-xs {
  padding-left: 1rem;
}

.pl-sm {
  padding-left: 2rem;
}

.pl-md {
  padding-left: 4rem;
}

.pl-lg {
  padding-left: 6rem;
}

.pl-xl {
  padding-left: 8rem;
}

.pl-xxl {
  padding-left: 12rem;
}

.pl-xxxl {
  padding-left: 16rem;
}

/* Font sizes  */

.fs-sm {
  font-size: 1.4rem;
}

.fs-md {
  font-size: 1.6rem;
  /* regular (16px) */
}

.fs-lg {
  font-size: 2.0rem;
}

.fs-xl {
  font-size: 2.6rem;
}

.fs-xxl {
  font-size: 3.4rem;
}

.fs-xxxl {
  font-size: 4.4rem;
}