/* CSS para o botão "ORÇAMENTO EM 1 CLIQUE" */
#Kinder {
  background: #e84545;
  /* Laranja vibrante */
  border: 2px solid #e84545;
  /* Mesma cor da borda */
  color: #ffffff;
  /* Texto branco */
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  /* Sombra suave */
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  cursor: pointer;
  outline: none;
}

#Kinder:hover {
  background: #eb3535;
  /* Laranja mais claro no hover */
  transform: translateY(-2px);
  /* “Lift” ao passar o mouse */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  /* Sombra um pouco mais intensa */
}

/* Estado ativo (ao clicar): ligeiro escurecimento e “apertar” */
#Kinder:active {
  background: #eb3535;
  transform: translateY(0);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}


.Kinder2 {
  background-color: transparent;
  /* Fundo transparente */
  color: #e84545;
  /* Cor do texto */
  padding: 10px 20px;
  /* Espaçamento interno do botão */
  font-size: 20px;
  /* Tamanho do texto */
  border: 2px solid #e84545;
  /* Borda branca */
  cursor: pointer;
  /* Cursor em forma de ponteiro */
  text-transform: uppercase;
  /* Texto em maiúsculas */
  font-weight: bold;
  /* Negrito no texto */
  display: flex;
  /* Habilita o uso de flexbox para o alinhamento do conteúdo */
  align-items: center;
  /* Centraliza o conteúdo verticalmente */
  justify-content: center;
  /* Centraliza o conteúdo horizontalmente */
  text-decoration: none;
  /* Sem sublinhado no texto */
  border-radius: 5px;
  /* Bordas arredondadas */
  transition: all 0.3s ease;
  /* Transição suave para efeitos */
  margin: 0px;
  /* Margem em torno do botão */
  outline: none;
  /* Remove o contorno quando focado (para navegadores que aplicam por padrão) */
  min-width: 150px;
  /* Tamanho mínimo lateral */
  max-width: 250px;
  height: 75px;
  /* Altura fixa, se você desejar que todos os botões tenham a mesma altura */
  display: none;
}

.Kinder2:hover {
  background-color: #e84545;
  /* Cor de fundo ao passar o mouse */
  border-color: rgb(255, 255, 255);
  /* Borda da mesma cor do fundo ao passar o mouse */
  color: #ffffff;
  /* Cor do texto */
}

.Kinder2Mobile {
  display: none;
  /* Garante que o botão está oculto por padrão */
  background-color: transparent;
  /* Fundo transparente */
  color: #e84545;
  /* Cor do texto */
  padding: 10px 20px;
  /* Espaçamento interno do botão */
  font-size: 20px;
  /* Tamanho do texto */
  border: 2px solid #e84545;
  /* Borda branca */
  cursor: pointer;
  /* Cursor em forma de ponteiro */
  text-transform: uppercase;
  /* Texto em maiúsculas */
  font-weight: bold;
  /* Negrito no texto */
  display: flex;
  /* Habilita o uso de flexbox para o alinhamento do conteúdo */
  align-items: center;
  /* Centraliza o conteúdo verticalmente */
  justify-content: center;
  /* Centraliza o conteúdo horizontalmente */
  text-decoration: none;
  /* Sem sublinhado no texto */
  border-radius: 5px;
  /* Bordas arredondadas */
  transition: all 0.3s ease;
  /* Transição suave para efeitos */
  margin: 0px;
  /* Margem em torno do botão */
  outline: none;
  /* Remove o contorno quando focado (para navegadores que aplicam por padrão) */
  min-width: 150px;
  /* Tamanho mínimo lateral */
  max-width: 250px;
  height: 75px;
  /* Altura fixa, se você desejar que todos os botões tenham a mesma altura */
}

.Kinder2Mobile:hover {
  background-color: #e84545;
  /* Cor de fundo ao passar o mouse */
  border-color: rgb(255, 255, 255);
  /* Borda da mesma cor do fundo ao passar o mouse */
  color: #ffffff;
  /* Cor do texto */
}

.Btn_Page {
  background-color: transparent;
  /* Fundo transparente */
  color: white;
  /* Cor do texto */
  padding: 10px 20px;
  /* Espaçamento interno do botão */
  font-size: 16px;
  /* Tamanho do texto */
  border: 3px solid white;
  /* Borda branca */
  cursor: pointer;
  /* Cursor em forma de ponteiro */
  text-transform: uppercase;
  /* Texto em maiúsculas */
  font-weight: bold;
  /* Negrito no texto */
  display: flex;
  /* Habilita o uso de flexbox para o alinhamento do conteúdo */
  align-items: center;
  /* Centraliza o conteúdo verticalmente */
  justify-content: center;
  /* Centraliza o conteúdo horizontalmente */
  text-decoration: none;
  /* Sem sublinhado no texto */
  border-radius: 5px;
  /* Bordas arredondadas */
  transition: all 0.3s ease;
  /* Transição suave para efeitos */
  margin: 0px;
  /* Margem em torno do botão */
  outline: none;
  /* Remove o contorno quando focado (para navegadores que aplicam por padrão) */
  min-width: 150px;
  /* Tamanho mínimo lateral */
  max-width: 200px;
  height: 50px;
  /* Altura fixa */
}

.Btn_Page:hover {
  background-color: #e84545;
  /* Cor de fundo ao passar o mouse */
  border-color: #fff;
  /* Borda branca ao passar o mouse */
}

.selected {
  background-color: #e84545;
  /* Cor de fundo para o botão selecionado */
  color: white;
}

/* General adjustments for buttons */
.button-group {
  display: flex;
  justify-content: center;
  gap: 100px;
  /* Wider gap between buttons on desktop */
}

@media (max-width: 768px) {
  .button-group {
    gap: 10px;
    /* Espaçamento entre os botões no mobile */
    flex-wrap: nowrap;
    /* Prevent wrapping */
  }

  .Btn_Page {
    flex: 0 1 calc(50% - 10px);
    /* 50% menos o gap para garantir que cabem lado a lado */
    height: 60px;
    /* Altura ajustada para mobile */
  }
}



/* MOBILE */

@media (max-width: 600px) {
  a#Kinder {
    display: flex;
    /* Muda para flex para permitir alinhamento total */
    justify-content: center;
    /* Alinha horizontalmente ao centro */
    align-items: center;
    /* Alinha verticalmente ao centro, se necessário */
    width: 100%;
    /* Ocupa a largura total do container pai */
    margin: 0 auto;
    /* Margem automática para centralização horizontal */
    text-align: center;
    /* Assegura que o texto também fique centralizado, se for um elemento de bloco */
  }
}