:root { 
  --background-color: #892523; /* Background color for the entire website, including individual sections */
  --default-color: #ffffff; /* Default color used for the majority of the text content across the entire website */
  --secondary-color: #892523;
  --heading-color: #111111; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #fbb03b; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #354d59; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #e7e7e6; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}
.bg-danger,
.bg-danger h1,
.btn.btn-danger {
  background-color: var(--background-color) !important;
  color: white !important;
}

.btn-outline-secondary{
  background-color: var(--accent-color);
  color:var(--background-color);
  border: none;
}

.btn.btn-accent {
  background-color: var(--accent-color);
  color: var(--surface-color);
  border-radius: 50px;
  padding: 5px 30px;
  font-weight: bold;
}
body {
  background: #343a40;
  color: #f1f3f5;
  background-image: url(./assets/css/img/textura.png);
  background-size: cover;
  background-blend-mode: soft-light;
}
#hero {
  height: 400px;
}
#hero .carousel-item {
  height: 400px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#hero .container-hero {
  height: 400px;
  padding: 60px;
  position: absolute;
  top: 0;
  text-align: center;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-indicators {
  list-style: none;
  margin: 0;
  padding: 0;
}

#hero .carousel-item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#hero .container-hero #logo-aedes-aegypti {
  max-height: 100%;
  max-width: 100%;
}
.table th, h1, h2, .fw-semibold:not(.navbar-brand) {
  color: var(--secondary-color) !important;
}
.bg-title {
  color: var(--secondary-color);
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif !important;
  font-size: 2.75rem;
  font-weight: 700;
  margin: 0;
  background-image: url("../img/bg-title.png");
  background-repeat: no-repeat;
  padding: 0;
  text-align: center;
  letter-spacing: 0px;
  background-size: 290px;
  background-position: center 0;
  width: 295px;
  height: 77px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-title > b {
  margin-top: -10px;
}

.thumb {
  width: 100%;
  height: 220px;
  object-fit: cover;
  background: #e9ecef;
  border-radius: 0.5rem;
}

.small-muted {
  color: #6c757d;
  font-size: 0.92rem;
}

.table-sticky {
  max-height: 360px;
  overflow: auto;
}
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.card,
.bg-white,
.alert,
.table,
.modal-content {
  color: #212529;
}
.small-muted {
  color: #6c757d;
}
.navbar {
  background-color: var(--background-color);
}
.navbar-brand {
  letter-spacing: 0.2px;
}
.textura {
  background-image: url(../img/textura.png);
  background-size: cover;
  background-blend-mode: soft-light;
}