/* Ajuste do layout principal */
main {
  display: flex;
  flex-direction: column;
  margin-bottom: 50px;
}

.quiosque-name h1{
  text-align: center;
  margin: 20px 0;
}

/* Estilo para o main-content (à esquerda) */
.main-content {
  flex: 0 0 75%; /* Ocupa 50% da largura */
  display: flex;
  flex-direction: column;
  max-width: 70%;
}

.meio{
  display: flex;
  justify-content: row;
}

.nome-imagem{
  margin-bottom: 100px;
  margin-top: 50px;
  display: flex;
  justify-content: center;
}

.uploaded-image{
  width: 50%;
}

/* Estilo para o info (à direita) */
.info {
  display: flex;
  flex-direction: column; /* Empilha os elementos na vertical */
}

.info-box {
  margin-bottom: 20px; /* Espaço entre o info-box e o info-box1 */
}

.info-box1 {
  margin-top: 0;
  max-width: 450px;
}

.info {
  flex: 0 0 50%; /* Garante que ocupe 50% da largura */
  display: flex;
  flex-direction: column;
  max-width: 50%; /* Limita a largura máxima a 50% */
}
  
  .info-box1, .info-box {
    background-color: #ffffff;
    padding-left: 30px; 
    border-radius: 15px; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
    transition: transform 0.3s;
    flex: 1; 
    margin: 20px; 
  }
  
  .info-box1 p, .info-box p {
    font-size: 20px; 
    color: #0056b3;
    margin: 5px 0;
    margin-top: 30px;
    line-height: 30px;
  }
  
  .info-box:hover, .info-box1:hover {
    transform: scale(1.03); /* Adiciona um leve efeito de zoom ao passar o mouse */
  }
  
.info-box {
  background-color: #f4f4f9; 
  border: 2px solid #e7fbff; 
  border-radius: 10px; 
  text-align: center; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
  max-width: 450px; 
}

.info-box p {
  font-size: 5rem; 
  font-weight: bold; 
  color: #0056b3; 
  margin-top: 150px;
}

.main-content {
  display: flex;
  gap: 20px;
  margin: 20px; 
}