:root {
  --bs-white: #ffffff;
  --bs-red: #ff4c4f;
  --bs-dark-red: #712425;
  --bs-teal: #04958e;
  --bs-dark-green: #265728;
  --bs-yellow: #fcd434;
  --bs-cold-grey: #1f2630;
  --bs-black: #060606;
  --bs-light: #f8f9fa;
  --bs-white: #ffffff;
  --bs-primary: #007bff;
  --bs-dark-grey: #252726;
  --bs-dark-orange: #ba7d1a;
  --bs-orange: #f7a825;
  --bs-grey: #555656;
  --bs-medium-grey: #3e403f;
  --bs-dark: #343a40;
  --bg-dark: #1f2933;
  --color-light-grey: #e0e0e0;
  --accent: #ff8a00;
  --muted: #9aa3ab;
  --card-bg: #ffffff;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.bg-orange-cl {
  background: var(--bs-orange);
}

.bg-dark-orange-cl {
  background-color: var(--bs-dark-orange);
}

.bg-medium-grey-cl {
  background-color: var(--bs-medium-grey);
}

.bg-dark-grey-cl {
  background-color: var(--bs-dark-grey) !important;
}

.bg-cold-grey-cl {
  background-color: var(--bs-cold-grey);
}

.bg-teal-cl {
  background-color: var(--bs-teal);
}

.bg-red-cl {
  background-color: var(--bs-red);
}

.bg-yellow-cl {
  background-color: var(--bs-yellow);
}

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

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

/* Classes para cor da fonte (color) */

.cl-deep {
  color: var(--bs-dark-grey);
}

.cl-orange {
  color: var(--bs-orange);
}

.cl-dark-orange {
  color: var(--bs-dark-orange);
}

.cl-accent {
  color: var(--bs-orange); /* Usando a mesma variável para consistência */
}

.cl-medium-grey {
  color: var(--bs-medium-grey);
}

.cl-dark-grey {
  color: var(--bs-dark-grey);
}

.cl-cold-grey {
  color: var(--bs-cold-grey);
}

.cl-red {
  color: var(--bs-red);
}

.cl-yellow {
  color: var(--bs-yellow);
}

.cl-teal {
  color: var(--bs-teal);
}

.cl-black {
  color: var(--bs-black);
}

.cl-white {
  color: var(--bs-white);
}

/* Classes de estado "active" */

.cl-deep.active,
.cl-orange.active,
.cl-medium-grey.active {
  text-decoration: none;
  padding: 20px;
  font-weight: 600;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: var(--bs-medium-grey);
  padding: 4px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--bs-orange);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--bs-dark-orange);
}

.fs-6 {
  font-size: 10pt !important;
}
.fs-5 {
  font-size: 13pt !important;
}
.fs-4 {
  font-size: 16pt !important;
}

.normal-link {
  color: var(--bs-orange) !important;
  font-size: 15px;
  font-weight: normal;
  text-transform: capitalize;
  transition: 0.3s;
}

.normal-link:hover {
  text-decoration: underline;
}

.logo-img {
  height: 120px;
  width: 120px;
  max-width: 150px;
  object-fit: contain;
  border-radius: 100%;
}