@font-face {
  font-family: Bison-Light;
  src: url('../fonts/Bison-Light.ttf');
}

@font-face {
  font-family: PragmaticaCondBook;
  src: url('../fonts/PragmaticaCondBook.otf');
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Impede que elementos excedam a largura */
}

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden; /* Remove a rolagem horizontal */
  overflow-y: auto; /* Permite rolagem vertical */
  background-image: url('../img/bg_login_desktop_update.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.card {
  background-color: rgba(255,255,255,.3);
  border-radius: 0 0 20px 20px;
  color: white;
  width: 100%; /* Garante que o card ocupe 100% da largura */
  max-width: 100%; /* Impede que ultrapasse a tela */
  overflow: hidden; /* Impede que o conteúdo transborde */
}

.card input {
  background-color: white;
  color: black;
}

.card label {
  font-weight: bold;
}

.btn-link {
  color: white;
}

.btn-link:hover {
  color: white;
}

.input-detail {
  font-size: 12px;
  margin-top: -10px;
  margin-bottom: 15px;
}

.office-name {
  color: white;
  font-family: Bison-Light;
  font-size: 30pt;
  text-align: center;
  display: block;
  word-wrap: break-word;
}

.office-description {
  color: white;
  font-family: PragmaticaCondBook;
  margin-top: -14px;
  font-size: 12pt;
  letter-spacing: 1.9px;
  text-align: center;
  display: block;
  word-wrap: break-word;
}

@media (max-width: 600px) {
  html, body {
    background-image: url('../img/bg_login_mobile_update.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .card {
    width: 95%; /* Ajusta no mobile */
  }
}