* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Arial", sans-serif;
}

.container {
  position: relative;
  background-color: rgba(250, 250, 250, 0.533);
  padding: 2rem; /* Espaçamento interno */
  margin: auto auto; /* Espaçamento externo e centralização */
  max-width: 100%; /* Largura máxima do site */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para destaque */
  z-index: 1;
}

.container::before {
  content: "";
  position: fixed;
  top: -5px; /* Ajusta para fora do container */
  left: -25px;
  right: -25px;
  bottom: -25px;
  border: 25px solid transparent; /* Define a largura da borda */
  background-image: url("../assets/img_pizza7.jpeg"); /* Imagem de fundo */
  background-size: cover;
  background-position: center;
  opacity: 0.3; /* Define a transparência da imagem de fundo */
  z-index: -1; /* Garante que a borda fique atrás do conteúdo */
}

/*--- HEADER ---*/

.header {
  display: flex;
  justify-content: center;
  padding: 20px;
  background-color: rgba(242, 164, 108, 0.556);
  border-radius: 10px;
}
.logo {
  margin: auto;
  display: block; /* Centraliza a imagem */
  width: 50%;
  border-radius: 10px;
  margin-bottom: 55px;
}

.navbar ul {
  display: flex; /* Coloca os itens em linha */
  list-style: none; /* Remove os marcadores de lista */
  padding: 10px;
  justify-content: center; /* Centraliza os itens */
  margin: 0; /* Remove a margem padrão */
}

.navbar li {
  display: flex;
  margin: 0 50px; /* Espaçamento entre os itens */
}

.navbar a {
  text-decoration: none; /* Remove o sublinhado dos links */
  color: rgb(62, 66, 62); /* Cor do texto */
  font-weight: bold;
  font-size: 30px;
  transition: color 0.3s ease;
}

.navbar a:hover {
  color: rgb(94, 122, 75); /* Cor ao passar o mouse */
  font-size: 30px;
  transition: color 0.3s ease, font-size 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra ao passar o mouse */
  border-radius: 10px; /* Arredonda os cantos ao passar o mouse */
  padding: 5px; /* Espaçamento interno ao passar o mouse */
  background-color: rgba(236, 244, 228, 0.478);
}

.login {
  margin-left: auto; /* Alinha à direita */
}

.banner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: rgb(94, 122, 75);
  text-align: center;
}

.banner h1 {
  font-size: 4rem;
  padding: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}

/**--- MENU ---*/

.menu-title {
  font-size: 40px; /* Tamanho do título */
  color: rgb(76, 70, 69); /* Cor do título */
  font-style: italic;
  margin-bottom: 10px; /* Espaçamento entre o título e o texto */
}

.menu-section {
  display: flex;
  flex-direction: column; /* Empilha os elementos verticalmente */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
  padding: 10px;
  width: 85%;
  color: rgb(9, 169, 118);
  background-color: #cecbcb71;
  border-radius: 10px;
  margin: 0 auto; /* Centraliza horizontalmente */
}

.menu {
  display: inline-block;
  padding: 30px;
  color: #555756;
  background-color: #ecf4e47a;
  border-radius: 10px;
  border: 2px solid #0e0e0f;
  margin: 10px 0; /* Espaçamento entre seções */
  width: 70%;
}

.pizza-item:hover {
  color: rgb(45, 167, 130);
  font-weight: bold;
  transition: color 0.3s ease, font-weight 0.3s ease, text-decoration 0.3s ease;
}

.price {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-size: 17px;
  color: rgb(9, 169, 118);
}

.pizza-item h2 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px; /* Espaço entre os elementos */
}

.action-group {
  display: flex;
  margin-left: auto;
  gap: 5px; /* Espaço entre o botão e a imagem */
}

.plus-icon,
.minus-icon {
  width: 30px; /* Ajuste o tamanho da imagem conforme necessário */
  height: 30px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.plus-icon:hover,
.minus-icon:hover {
  transform: scale(1.4); /* Aumenta o tamanho ao passar o mouse */
}

.simble-icon {
  display: flex;
  margin-left: auto;
  margin-right: 40px; /* Espaço entre o botão e a imagem */
  width: 20px; /* Ajuste o tamanho da imagem conforme necessário */
  height: 20px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

/*--- DRINKS ---*/

.drinks {
  padding: 30px;
  color: #555756;
  background-color: #ecf4e47a;
  border-radius: 10px;
  border: 2px solid #0e0e0f;
  margin: 10px auto; /* Centraliza horizontalmente */
  width: 70%; /* Define uma largura apropriada */
  max-width: 1200px; /* Define uma largura máxima */
}

.drinks-item h2 {
  display: flex;
  align-items: center;
  /* justify-content: flex-start;  Não precisa se usar margin-left: auto */
  gap: 10px;
}

.action-group {
  display: flex;
  margin-left: auto; /* Isso empurra os botões para a margem direita */
  gap: 5px;
}

.drinks-item:hover {
  color: rgb(45, 167, 130);
  font-weight: bold;
  transition: color 0.3s ease, font-weight 0.3s ease, text-decoration 0.3s ease;
}

.drinks-item .price {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-size: 15px;
  color: rgb(9, 169, 118);
}

.drinks-item h2 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px; /* Espaço entre os elementos */
}

/* --- TOTAL --- */

#total {
  display: flex;
  flex-direction: column; /* Empilha os elementos verticalmente */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
  padding: 10px;
  width: 75%;
  color: rgb(9, 169, 118);
  border-radius: 10px;
  margin: 0 auto; /* Centraliza horizontalmente */
}

.total-item {
  display: inline-block;
  padding: 30px;
  color: #435c40;
  background-color: #ecf4e47a;
  border-radius: 10px;
  border: 2px solid #0e0e0f;
  margin: 10px auto; /* Centraliza horizontalmente */
  width: 70%; /* Define uma largura apropriada */
  max-width: 1200px; /* Define uma largura máxima */
}

.order-button {
  background-color: tomato; /* Cor de fundo do botão */
  color: white; /* Cor do texto do botão */
  border: none; /* Remove a borda padrão */
  text-decoration: none;
  padding: 10px 20px; /* Espaçamento interno do botão */
  cursor: pointer; /* Muda o cursor ao passar sobre o botão */
  border-radius: 5px; /* Arredonda os cantos do botão */
  font-size: 16px; /* Tamanho da fonte do botão */
  font-weight: bold; /* Negrito */
  justify-content: center; /* Centraliza o texto no botão */
  display: flex; /* Necessário para o alinhamento do texto */
}

.order-button:hover {
  background-color: #d32f2f; /* Cor de fundo ao passar o mouse */
  transition: background-color 0.3s ease; /* Transição suave */
}

.total {
  margin-top: 20px;
}

/*--- FOOTER ---*/

.footer {
  display: inline-block;
  text-align: center;
  width: 100%;
  position: relative;
  padding: 20px;
  background-color: #639c62ab;
  color: white;
  margin-top: 20px;
  border-radius: 10px;
}

.social-icons {
  display: flex;
  justify-content: center; /* Centraliza horizontalmente */
  gap: 20px; /* Espaçamento entre os ícones */
}

.social-icons img {
  width: 40px; /* Ajuste o tamanho desejado */
  height: 40px; /* Ajuste o tamanho desejado */
  margin: 5px; /* Espaçamento entre os ícones */
}

.social-icons img:hover {
  transform: scale(1.2); /* Aumenta o tamanho ao passar o mouse */
  transition: transform 0.3s ease; /* Transição suave */
}

.whatsapp-link {
  position: fixed;
  bottom: 20px;
  right: 25px;
  z-index: 1000; /* Garante que o ícone fique acima de outros elementos */
}

.whatsapp-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.whatsapp-icon:hover {
  transform: scale(1.2);
}

@media (max-width: 430px) {
  .menu-section {
    width: 98%;
    padding: 5px;
  }
  .menu {
    width: 98%;
    padding: 10px;
    font-size: 16px;
    margin: 8px 0;
  }
  .pizza-item h2,
  .drinks-item h2 {
    font-size: 18px;
    gap: 5px;
  }
  .price {
    font-size: 15px;
  }
  .navbar ul {
    flex-direction: column;
    align-items: center;
    padding: 0;
  }
  .navbar li {
    margin: 8px 0;
  }
  .navbar a {
    font-size: 22px;
    padding: 6px 0;
  }
}

@media (min-width: 431px) and (max-width: 768px) {
  .menu-section {
    width: 95%;
    padding: 8px;
  }
  .menu {
    width: 95%;
    padding: 18px;
    font-size: 18px;
    margin: 10px 0;
  }
  .pizza-item h2,
  .drinks-item h2 {
    font-size: 22px;
    gap: 8px;
  }
  .price {
    font-size: 17px;
  }
  .navbar ul {
    flex-direction: column;
    align-items: center;
    padding: 0;
  }
  .navbar li {
    margin: 10px 0;
  }
  .navbar a {
    font-size: 26px;
    padding: 8px 0;
  }
}

@media (max-width: 768px) {
  .navbar ul {
    flex-direction: column; /* Empilha os itens do menu em telas menores */
    align-items: center;
  }

  .banner h1 {
    font-size: 2rem; /* Reduz o tamanho do texto */
  }

  .pizzas {
    grid-template-columns: 1fr; /* Mostra uma pizza por linha */
  }
}

/*--- ABOUT US ---*/

.aboutContainer {
  position: relative;
  padding: 5px; /* Espaçamento interno */
  border-radius: 10px; /* Opcional: arredonda os cantos */
  color: rgb(51, 86, 51); /* Garante que o texto fique legível */
  z-index: 1;
  overflow: hidden;
}

#aboutTitle {
  font-size: 30px; /* Tamanho do título */
  color: rgb(243, 43, 3); /* Cor do título */
  text-align: left;
  font-style: italic;
  margin-bottom: 20px; /* Espaçamento entre o título e o texto */
}
.aboutText {
  position: relative; /* Necessário para o posicionamento absoluto do texto */
  z-index: 1; /* Garante que o texto fique acima da imagem de fundo */
  padding: 20px; /* Espaçamento interno */
  text-indent: 3em;

  border-radius: 10px; /* Opcional: arredonda os cantos do texto */
  background-color: #f8f9fab6; /* Cor de fundo */
  margin-bottom: 16px; /* Espaçamento entre o texto e o botão */
  font-size: 16px; /* Tamanho da fonte */
}

.aboutButton {
  background-color: tomato; /* Cor de fundo do botão */
  color: white; /* Cor do texto do botão */
  border: none; /* Remove a borda padrão */
  text-decoration: none;
  padding: 10px 20px; /* Espaçamento interno do botão */
  cursor: pointer; /* Muda o cursor ao passar sobre o botão */
  border-radius: 5px; /* Arredonda os cantos do botão */
  font-size: 16px; /* Tamanho da fonte do botão */
  font-weight: bold; /* Negrito */
  justify-content: center; /* Centraliza o texto no botão */
  display: flex; /* Necessário para o alinhamento do texto */
}

.aboutButton:hover {
  background-color: #d32f2f; /* Cor de fundo ao passar o mouse */
  transition: background-color 0.3s ease; /* Transição suave */
}

/* --- LOCATION --- */

.location {
  position: relative;
  padding: 20px; /* Espaçamento interno */
  border-radius: 10px; /* Opcional: arredonda os cantos */
  z-index: 1; /* Garante que o conteúdo fique acima do fundo */
  overflow: hidden; /* Garante que o fundo não ultrapasse os limites do contêiner */
}

.location::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img_pizza7.jpeg"); /* Caminho para a imagem */
  background-size: cover; /* Faz a imagem cobrir todo o contêiner */
  background-position: center; /* Centraliza a imagem */
  opacity: 0.5; /* Define a transparência do fundo */
  z-index: -1; /* Garante que o fundo fique atrás do conteúdo */
}

.adresse {
  font-size: 20px; /* Tamanho da fonte */
  color: rgb(51, 86, 51); /* Garante que o texto fique legível */
  text-align: center; /* Centraliza o texto */
  padding: 20px; /* Espaçamento interno */
  border-radius: 10px; /* Opcional: arredonda os cantos */
  background-color: #f8f9fab6; /* Cor de fundo */
  margin-bottom: 20px; /* Espaçamento entre o texto e o mapa */
}

.map-container {
  width: 100%;
  max-width: 800px; /* Define uma largura máxima */
  margin: 20px auto; /* Centraliza o mapa */
  border-radius: 10px; /* Arredonda os cantos */
  overflow: hidden; /* Garante que o iframe respeite os cantos arredondados */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adiciona uma sombra */
}

.locationButton {
  background-color: tomato; /* Cor de fundo do botão */
  color: white; /* Cor do texto do botão */
  border: none; /* Remove a borda padrão */
  text-decoration: none;
  padding: 10px 20px; /* Espaçamento interno do botão */
  cursor: pointer; /* Muda o cursor ao passar sobre o botão */
  border-radius: 5px; /* Arredonda os cantos do botão */
  font-size: 16px; /* Tamanho da fonte do botão */
  font-weight: bold; /* Negrito */
  justify-content: center; /* Centraliza o texto no botão */
  display: flex; /* Necessário para o alinhamento do texto */
  margin-bottom: 40px;
}
.locationButton:hover {
  background-color: #d32f2f; /* Cor de fundo ao passar o mouse */
  transition: background-color 0.3s ease; /* Transição suave */
}

/* --- CONTACT US --- */

.contact {
  margin-top: 20px;
}
.contactContainer {
  display: flex; /* Ativa o Flexbox */
  align-items: center; /* Alinha verticalmente ao centro */
  gap: 20px; /* Espaçamento entre a imagem e o texto */
  padding: 20px; /* Espaçamento interno */
}

.contactTitle {
  font-size: 50px; /* Tamanho do título */
  font-style: italic;
  margin-bottom: 20px; /* Espaçamento entre o título e o texto */
}

#contactText {
  font-size: 35px; /* Tamanho do título */
  text-align: left;
  font-style: italic;
  margin-bottom: 20px; /* Espaçamento entre o título e o texto */
}
.contactText {
  flex: 1; /* Faz o texto ocupar o restante do espaço */
  z-index: 1; /* Garante que o texto fique acima da imagem de fundo */
  padding: 20px; /* Espaçamento interno */
  text-indent: 3em;
  border-radius: 10px; /* Opcional: arredonda os cantos do texto */
  background-color: #f8f9fab6; /* Cor de fundo */
  margin-bottom: 16px; /* Espaçamento entre o texto e o botão */
  font-size: 23px; /* Tamanho da fonte */
}

.call1 {
  width: 350px; /* Ajuste o tamanho da imagem */
  height: auto; /* Mantém a proporção da imagem */
  border-radius: 10px; /* Opcional: arredonda os cantos */
}

.contactButton {
  background-color: tomato; /* Cor de fundo do botão */
  color: white; /* Cor do texto do botão */
  border: none; /* Remove a borda padrão */
  text-decoration: none;
  padding: 10px 20px; /* Espaçamento interno do botão */
  cursor: pointer; /* Muda o cursor ao passar sobre o botão */
  border-radius: 5px; /* Arredonda os cantos do botão */
  font-size: 16px; /* Tamanho da fonte do botão */
  font-weight: bold; /* Negrito */
  justify-content: center; /* Centraliza o texto no botão */
  display: flex; /* Necessário para o alinhamento do texto */
}

.contactButton:hover {
  background-color: #d32f2f; /* Cor de fundo ao passar o mouse */
  transition: background-color 0.3s ease; /* Transição suave */
}

/*  --- LOGIN --- */

.login-section {
  display: flex; /* Ativa o Flexbox */
  flex-direction: column; /* Coloca os itens em coluna */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Alinha verticalmente ao centro */
  gap: 20px; /* Espaçamento entre a imagem e o texto */
  padding: 20px; /* Espaçamento interno */
}

.welcome {
  display: flex; /* Ativa o Flexbox */
  justify-content: center;
  font-size: 50px; /* Tamanho do título */
  font-style: italic;
  margin-bottom: 20px; /* Espaçamento entre o título e o texto */
}

#username,
#password {
  width: 100%; /* Largura total do campo */
  padding: 10px; /* Espaçamento interno */
  border-radius: 5px; /* Arredonda os cantos */
  border: 1px solid #ccc; /* Borda padrão */
  font-size: 16px; /* Tamanho da fonte */
}

.submit {
  background-color: rgb(23, 203, 71); /* Cor de fundo do botão */
  color: white; /* Cor do texto do botão */
  border: none; /* Remove a borda padrão */
  text-decoration: none;
  padding: 10px 20px; /* Espaçamento interno do botão */
  cursor: pointer; /* Muda o cursor ao passar sobre o botão */
  border-radius: 5px; /* Arredonda os cantos do botão */
  font-size: 16px; /* Tamanho da fonte do botão */
  font-weight: bold; /* Negrito */
  justify-content: center; /* Centraliza o texto no botão */
  display: flex; /* Necessário para o alinhamento do texto */
}

.submit:hover {
  background-color: #148907; /* Cor de fundo ao passar o mouse */
  transition: background-color 0.3s ease; /* Transição suave */
}

.newRegistration {
  font-size: 20px; /* Tamanho do texto */
  color: rgb(22, 205, 71); /* Cor do texto */
  text-align: center; /* Centraliza o texto */
  padding: 30px; /* Espaçamento interno */
  border-radius: 10px; /* Opcional: arredonda os cantos */
  background-color: #f4d0c4b6; /* Cor de fundo */
  border-style: double;
  font-weight: bold;
  margin-bottom: 20px; /* Espaçamento entre o texto e o botão */
  text-decoration: none;
  margin-left: 25px;
}

.newRegistration:hover {
  background-color: rgb(22, 205, 71); /* Cor de fundo ao passar o mouse */
  transition: background-color 0.3s ease; /* Transição suave */
  color: white; /* Cor do texto ao passar o mouse */
}

.homeButton {
  background-color: tomato; /* Cor de fundo do botão */
  color: white; /* Cor do texto do botão */
  border: none; /* Remove a borda padrão */
  text-decoration: none;
  padding: 10px 20px; /* Espaçamento interno do botão */
  cursor: pointer; /* Muda o cursor ao passar sobre o botão */
  border-radius: 5px; /* Arredonda os cantos do botão */
  font-size: 16px; /* Tamanho da fonte do botão */
  font-weight: bold; /* Negrito */
  justify-content: center; /* Centraliza o texto no botão */
  display: flex; /* Necessário para o alinhamento do texto */
}

.homeButton:hover {
  background-color: #d32f2f; /* Cor de fundo ao passar o mouse */
  transition: background-color 0.3s ease; /* Transição suave */
}

/* --- REGISTRATION --- */

.register-section {
  display: flex; /* Ativa o Flexbox */
  flex-direction: column; /* Coloca os itens em coluna */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Alinha verticalmente ao centro */
  gap: 20px; /* Espaçamento entre a imagem e o texto */
  padding: 20px; /* Espaçamento interno */
  margin-top: 20px; /* Espaçamento superior */
}

.register-form {
  display: flex;
  flex-direction: column;
  gap: 15px; /* Espaçamento uniforme entre os campos */
}

.register-form label {
  font-size: 16px; /* Tamanho consistente para os rótulos */
  margin-bottom: 5px; /* Espaçamento entre o rótulo e o campo */
}

.register-form input {
  width: 100%; /* Faz os campos ocuparem toda a largura disponível */
  padding: 10px; /* Espaçamento interno consistente */
  font-size: 16px; /* Tamanho da fonte consistente */
  border: 1px solid #ccc; /* Borda padrão */
  border-radius: 5px; /* Bordas arredondadas */
  box-sizing: border-box; /* Inclui padding e borda no tamanho total */
}

.registrationButton {
  background-color: tomato; /* Cor de fundo do botão */
  color: white; /* Cor do texto do botão */
  border: none; /* Remove a borda padrão */
  text-decoration: none;
  padding: 10px 20px; /* Espaçamento interno do botão */
  cursor: pointer; /* Muda o cursor ao passar sobre o botão */
  border-radius: 5px; /* Arredonda os cantos do botão */
  font-size: 16px; /* Tamanho da fonte do botão */
  font-weight: bold; /* Negrito */
  justify-content: center; /* Centraliza o texto no botão */
  display: flex; /* Necessário para o alinhamento do texto */
}

.registrationButton:hover {
  background-color: #d32f2f; /* Cor de fundo ao passar o mouse */
  transition: background-color 0.3s ease; /* Transição suave */
}