.chakra-petch-light {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.chakra-petch-regular {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.chakra-petch-medium {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.chakra-petch-semibold {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.chakra-petch-bold {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.chakra-petch-light-italic {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.chakra-petch-regular-italic {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.chakra-petch-medium-italic {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.chakra-petch-semibold-italic {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.chakra-petch-bold-italic {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  font-style: italic;
}

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 1 to 1000

.sofia-sans-<uniquifier> {
  font-family: "Sofia Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.display-3 {
  font-size: calc(1.525rem + 3.3vw);
  font-weight: 300;
  line-height: 1.2;
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.display-4 {
  font-size: calc(1.525rem + 3.3vw);
  font-family: "Chakra Petch", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.container {
  background-color: #f8f4e9;
}

:root {
  --main-bg-color: #f8f4e9;
  --bs-body-bg: #f8f4e9;
  --bs-body-color: #056700;
}

.text-dark {
  --bs-text-opacity: 1;
  color: #056700(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
}

.navbar-brand {
  padding-top: var(--bs-navbar-brand-padding-y);
  padding-bottom: var(--bs-navbar-brand-padding-y);
  margin-right: var(--bs-navbar-brand-margin-end);
  font-size: var(--bs-navbar-brand-font-size);
  color: #676057(--bs-navbar-brand-color);
  text-decoration: none;
  white-space: nowrap;
  font-family: "Chakra Petch", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.nav-link {
  display: block;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  font-size: var(--bs-nav-link-font-size);
  font-weight: var(--bs-nav-link-font-weight);
  color: #676057(--bs-nav-link-color);
  text-decoration: none;
  background: 0 0;
  border: 0;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out;
  font-family: "Chakra Petch", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
  font-family: "Sofia Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
  font-family: "Sofia Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.bg-light {
  --bs-bg-opacity: 1;
  background-color: #f8f4e9(
    var(--bs-light-rgb),
    var(--bs-bg-opacity)
  ) !important;
}

.h3,
h3 {
  font-size: calc(1.3rem + 0.6vw);
  font-family: "Chakra Petch", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.h2,
h2 {
  font-size: calc(1.325rem + 0.9vw);
  font-family: "Chakra Petch", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.h1,
h1 {
  font-size: calc(1.375rem + 1.5vw);
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.h6,
h6 {
  font-family: "Sofia Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <10>;
  font-style: light;
}

.table {
  font-family: "Sofia Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <10>;
  font-style: light;
  color: #676057;
}

.c-item {
  height: 780px;
  width: 100%;
}

.c-img {
}