:root {
    --black: #333333;
  --blue: #0045c7;
  --lblue: #a4c4ff;
  --white: #ffffff;
  --ligth-gray: #ecebf2;
  --bg: 0px 80px;
  --herobg: background-image: linear-gradient(to right top, #0045c7, #0042b8, #013fa9, #073c9a, #0e398b);  
--blue1: linear-gradient(186deg, rgba(0, 69, 199, 1) 0%, rgba(30, 99, 227, 1) 46%, rgba(54, 121, 245, 1) 100%); 
}
 
/* body { */
  /* font-family: "Ubuntu", sans-serif;
  font-style: normal;
  font-variation-settings: "wdth" 100; */
  /* font-weight: 400;
    font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal; */
  /* background-color: var(--ligth-gray); */
/* } */

/* Light theme variables */
    :root {
      --bg: #ffffff;
      --text: #111111;
      --header-bg: #f2f2f2;
      --header-text: #111111;
      --btn-bg: #111111;
      --btn-text: #ffffff;
    }

    /* Dark theme variables */
    .dark-theme {
      --bg: #1a1a1a;
      --text: #f1f1f1;
      --header-bg: #333333;
      --header-text: #f1f1f1;
      --btn-bg: #f1f1f1;
      --btn-text: #1a1a1a;
    }

    body {
      background: var(--bg);
      color: var(--text);
    }

    button {
      background: var(--btn-bg);
      color: var(--btn-text);
    }





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

.bg_gray{
  background-color: var(--ligth-gray);
    color: var(--black);
}

.bg_white{
  background-color: var(--white);
    color: var(--black);

}

.body_text {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;

  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.App {
  font-family: "Ubuntu", sans-serif;
  text-align: center;
}
/* .nata-sans-<uniquifier> {
  font-family: "Ubuntu", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
} */
.container {
  width: 100%;
  margin: auto;
  background-color: beige;
}
a.active {
  color: blue;
}
.bg-site {
  background-color: #ecebf2;
}