@charset "UTF-8";
.navbar {
  background: rgba(0, 53, 138, 0.4588235294);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  height: 4.5rem;
  box-shadow: 0px 4px 38px -5px rgba(32, 32, 32, 0.4);
}
@media (max-width: 576px) {
  .navbar {
    height: 4.375rem;
  }
}

#Logo-Navbar {
  width: 10rem;
}

@media (max-width: 576px) {
  #Logo-Navbar {
    width: 8.125rem;
  }
}

#toggleNav {
  background-color: transparent; /* Or any color you prefer */
  color: #ffffff; /* Default text color */
  transition: color 0.3s; /* Smooth color transition */
}

#toggleNav.active {
  color: white; /* White text when active */
}

.navbar-btn {
  background-image: linear-gradient(90deg, #4382E1 -50%, #003694 80%);
  border-radius: 0.625rem;
  height: 2.813rem;
  width: 10rem;
  border: none;
  font-family: "Kinetica", "sans-serif";
  font-size: 1rem;
  text-align: center;
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 700;
  text-shadow: 0rem 0.125rem 0.125rem #202020;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3019607843), 0 0 #000, inset 1px 1px 0.25px rgba(255, 255, 255, 0.3019607843), inset 0 2px 1px rgba(255, 255, 255, 0.5019607843);
}
@media (max-width: 576px) {
  .navbar-btn {
    width: 8rem;
    font-size: 0.75rem;
    height: 3rem;
  }
}

.navbar-btn:hover {
  box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #82CA51 0 -3px 0 inset;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3019607843), 0 0 #000, inset 1px 1px 0.25px rgba(255, 255, 255, 0.3019607843), inset 0 2px 1px rgba(255, 255, 255, 0.5019607843);
  transform: translateY(-0.125rem);
}

.navbar-btn:active {
  box-shadow: #82CA51 0 3px 7px inset;
  transform: translateY(0.1875rem);
}

.pref-btn {
  font-family: "Kinetica", "sans-serif", sans-serif;
  font-size: 0.85rem;
  text-align: center;
  color: #2E613B;
  line-height: 2.5rem;
  text-transform: uppercase;
  font-weight: 700;
  background-image: #ffffff;
  border-radius: 0.625rem;
  height: 2.813rem;
  width: 10rem;
  border: none;
  background-color: #ffffff;
  font-weight: 700;
  box-shadow: 0 1px 3px #00368A, 0 0 #000, inset 1px 1px 0.25px rgba(134, 134, 134, 0.3019607843), inset 0 2px 1px rgba(151, 145, 145, 0.5019607843);
}
@media (max-width: 992px) {
  .pref-btn {
    font-size: 0.9rem;
    padding-top: 1.5rem;
    line-height: 1.75rem;
  }
}
@media (max-width: 992px) {
  .pref-btn {
    font-size: 0.75rem;
  }
}
@media (max-width: 768px) {
  .pref-btn {
    display: none !important;
  }
}

.pref-btn:hover {
  color: #2E613B;
  background-color: #ffffff;
  box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #82CA51 0 -3px 0 inset;
  transform: translateY(-0.125rem);
}

/* Manter o estilo original ao clicar */
.pref-btn:active,
.pref-btn:focus,
.pref-btn:focus-visible {
  background-color: #ffffff !important; /* Mantém o fundo branco */
  color: #2E613B !important; /* Mantém a cor do texto */
  outline: none !important; /* Remove o contorno azul do Bootstrap */
  transform: none !important; /* Evita deslocamento ao clicar */
}