* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Inclui padding e border no cálculo da largura/altura dos elementos */
}


html, body {
  width: 100%; /* Define a largura do html e body para ocupar a tela inteira */
  max-width: 100%; /* Impede que o body seja maior que a tela */
  overflow-x: hidden; /* Previne o scroll horizontal caso algum elemento exceda a largura da tela */
}
body {
  min-height: 100vh; /* Isso irá assegurar que o body tenha pelo menos a altura da viewport */
  margin: 0;
  padding: 0;
	padding-bottom: 60px;
  background-image: url("../img/bg-mobile.jpg");
  background-size: cover;
  background-position: left top;
  background-repeat: no-repeat;
	font-family: urw-form, sans-serif !important;
font-weight: 400 !important;
font-style: normal;
	background-attachment: fixed !important;
}


/* Estilos para dispositivos entre 992px e 1919px */
@media (min-width: 992px) {
  body {
    background-image: url('../img/bg-full-hd.jpg');
  }
}

/* Estilos para dispositivos a partir de 1920px até 3839px */
@media (min-width: 1920px) {
  body {
    background-image: url('../img/bg-4k.jpg');
  }
}

/* Estilos para dispositivos de 3840px em diante */
@media (min-width: 3840px) {
  body {
    background-image: url('../img/bg-4k.jpg'); /* Você pode ter outra imagem para resoluções ainda maiores, se necessário */
  }
}
.pizzas {
  display: block; /* Pode usar flex se preferir mais controle */
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px; /* para o menor dispositivo */
}


/* Media query para dispositivos maiores */
@media only screen and (min-width: 992px) {
  .pizzas {
    margin-top: calc(5px + ((20 - 5) * ((100vw - 992px) / (1920 - 992)))); /* Interpolação linear entre 5px e 20px da margem superior */
  }
}

@media only screen and (min-width: 1920px) {
  .pizzas {
    margin-top: 20px; /* para dispositivos com resolução 1920px para cima */
  }
}

/* CSS para o container das pizzas */
.pizza-container {
  display: flex;
  justify-content: center; /* Centraliza horizontalmente */
  align-items: flex-start; /* Alinha ao topo, você pode mudar para 'center' se quiser que fique no meio verticalmente */
  height: auto; /* Assume a altura total da viewport */
  padding-top: 5px; /* Margem superior para dispositivos menores */
	padding-right: 60px;
}

/* Media query para dispositivos maiores */
@media only screen and (max-width: 767px) {
  .pizza-container {
    padding-top: calc(5px + ((20 - 5) * ((100vw - 992px) / (1920 - 992)))); /* Interpolação linear entre 5px e 20px */
	  padding-right: 0px;
  }
}
@media only screen and (min-width: 992px) {
  .pizza-container {
    padding-top: calc(5px + ((20 - 5) * ((100vw - 992px) / (1920 - 992)))); /* Interpolação linear entre 5px e 20px */
	  padding-right: 80px;
  }
}

@media only screen and (min-width: 1920px) {
  .pizza-container {
    padding-top: 20px; /* Margem superior fixa para dispositivos de alta resolução */
	  padding-right: 100px;
  }
}

@media only screen and (min-width: 3840px) {
  .pizza-container {
    padding-top: 20px; /* Margem superior fixa para dispositivos de alta resolução */
	  padding-right: 180px;
  }
}
/* Ajusta o tamanho da imagem para telas menores que 991px */
@media only screen and (max-width: 991px) {
  .pizza-container picture {
    width: 280px !important;
    height: auto;
  }
}
/* Ajusta o tamanho da imagem para telas menores que 479px */
@media only screen and (max-width: 767px) {
  .pizza-container picture {
    width: 320px !important;
    height: auto;
	  margin-top: 10px;
  }
}
/* Ajusta o tamanho da imagem para telas menores que 479px */
@media only screen and (max-width: 479px) {
  .pizza-container picture {
    width: 130% !important;
    height: auto;
	  margin-top: 10px;
  }
}
/* Ajusta o tamanho da imagem para telas menores que 479px */
@media only screen and (max-width: 479px) {
  .pizza-container picture {
    width: 130% !important;
    height: auto;
	  margin-top: 10px;
  }
}
/* CSS para o container que engloba o logo e os textos */
.container {
  position: relative;
  width: 100%;
  height: auto; /* Ajuste conforme necessário */
}

.container {
  position: relative;
  width: 100%;
  height: auto;
}

.logo {
  position: absolute;
  top: 100%; /* Coloca o topo do logo na parte inferior das pizzas */
  left: 50%;
  transform: translate(-50%, -100%); /* Ajusta para que o logo suba e se centralize exatamente na parte inferior das pizzas */
  width: auto; /* Ou um valor fixo, se necessário */
  max-width: 100%;
}

/* Ajustando a margem superior negativa para diferentes resoluções */
@media only screen and (min-width: 3840px) {
  .logo {
    margin-top: -50px;
  }
}

@media only screen and (min-width: 1920px) and (max-width: 3839px) {
  .logo {
    margin-top: 30px;
  }
}

@media only screen and (max-width: 991px) {
  .logo {
    margin-top: 15px;
  }
}

.logo img {
  display: block; /* Isso pode ajudar a remover qualquer espaço extra abaixo da imagem */
  width: auto; /* Defina como 'auto' por padrão se o tamanho variável não for necessário para telas maiores */
  max-width: 100%; /* Isto irá garantir que o logo não exceda o tamanho do seu container */
}

/* Para telas menores que 991px */
@media only screen and (max-width: 991px) {
  .logo img {
    width: 220px; /* Tamanho do logo para telas de até 991px de largura */
  }
}

/* Para telas menores que 479px */
@media only screen and (max-width: 479px) {
  .logo img {
    width: 220px; /* Tamanho do logo para telas de até 479px de largura */
  }
}

/* Posicionamento padrão */
.tele-entrega {
  position: absolute;
  top: 50%; /* Centraliza verticalmente - ajuste de acordo com o necessário */
  left: 50%; /* Começa com o centro */
  transform: translate(-50%, -50%) translateX(-100px); /* Deslocamento para a esquerda */
  /* O translateX será ajustado nas media queries abaixo */
}

/* Para telas acima de 768px */
@media (min-width: 768px) {
  .tele-entrega {
    transform: translate(-50%, -50%) translateX(-210px); /* Ajuste o valor negativo para deslocar à esquerda */
  top: 80%; /* Centraliza verticalmente - ajuste de acordo com o necessário */
  }
	 .tele-entrega img {
		 width: 80%;
  }
}

/* Para telas acima de 991px */
@media (min-width: 991px) {
  .tele-entrega {
    transform: translate(-50%, -50%) translateX(-235px); /* Ajuste o valor negativo para deslocar à esquerda */
  top: 82%; /* Centraliza verticalmente - ajuste de acordo com o necessário */
  left: 50%; /* Começa com o centro */
  }
	 .tele-entrega img {
		 width: 90%;
  }
}

/* Para telas acima de 1920px */
@media (min-width: 1920px) {
  .tele-entrega {
    transform: translate(-50%, -50%) translateX(-300px); /* Ajuste o valor negativo para deslocar à esquerda */
  top: 89%; /* Centraliza verticalmente - ajuste de acordo com o necessário */
  left: 50%; /* Começa com o centro */
  }
			 .tele-entrega img {
		 width: 110%;
  }
}

/* Para telas acima de 3840px */
@media (min-width: 3840px) {
  .tele-entrega {
    transform: translate(-50%, -50%) translateX(-650px); /* Ajuste o valor negativo para deslocar à esquerda */
  top: 75%; /* Centraliza verticalmente - ajuste de acordo com o necessário */
  }
		 .tele-entrega img {
		 width: 170%;
  }
}

/* Oculta o texto abaixo de 767px */
@media only screen and (max-width: 767px) {
  .tele-entrega {
    display: none;
  }
}

/* Posicionamento padrão para o iFood */
.ifood {
  position: absolute;
  top: 50%; /* Inicia centralizado verticalmente - ajuste conforme necessário */
  left: 50%; /* Inicia centralizado horizontalmente */
  transform: translate(-50%, -50%) translateX(100px); /* Desloca para a direita */
  /* Ajustará translateX nas media queries abaixo */
}

/* Para telas acima de 768px */
@media (min-width: 768px) {
  .ifood {
    transform: translate(-50%, -50%) translateX(235px); /* Ajusta para a direita */
    top: 80%; /* Centraliza verticalmente - ajuste conforme necessário */
  }
	 .ifood img {
		 width: 90%;
  }
}


/* Para telas acima de 991px */
@media (min-width: 991px) {
  .ifood {
    transform: translate(-50%, -50%) translateX(235px); /* Ajusta para a direita */
    top: 84%; /* Centraliza verticalmente - ajuste conforme necessário */
  }			 
	
}

/* Para telas acima de 1920px */
@media (min-width: 1920px) {
  .ifood {
    transform: translate(-50%, -50%) translateX(300px); /* Ajusta para a direita */
    top: 90%; /* Centraliza verticalmente - ajuste conforme necessário */
  }
			 .ifood img {
		width: 120% !important;
        right: 13% !important;
        position: relative;
  }
}

/* Para telas acima de 3840px */
@media (min-width: 3840px) {
  .ifood {
    transform: translate(-50%, -50%) translateX(650px); /* Ajusta para a direita */
    top: 75%; /* Centraliza verticalmente - ajuste conforme necessário */
  }
		 .ifood img {
		width: 120% !important;
        right: 25% !important;
        position: relative;
  }
}

/* Oculta o texto abaixo de 767px */
@media only screen and (max-width: 767px) {
  .ifood {
    display: none;
  }
}




.container-texto-mobile {
  position: relative;
  padding: 0 15px; /* Aplica padding nas laterais */
}
@media only screen and (min-width: 768px) {
.container-texto-mobile {
	display: none;
}
}

.tagline-container {
  text-align: center; /* Centraliza o conteúdo da div */
  padding-top: 40px; /* Espaço acima da tagline, ajuste conforme necessário */
}

.tagline {
  max-width: calc(100% - 30px); /* Subtrai o padding total (15px + 15px) da largura */
  height: auto; /* Mantém a proporção da imagem */
  display: inline-block; /* Isso pode ajudar com problemas de alinhamento */
  margin: 0 auto; /* Isso pode ajudar a centralizar caso `text-align: center;` não seja suficiente */
}

/* Oculta a tagline por padrão */
.tagline {
  display: none;
}

/* Exibe a tagline apenas entre 479px e 767px */
@media only screen and (min-width: 479px) and (max-width: 767px) {
  .tagline {
    display: block;
    width: 80%; /* Faz a imagem preencher a largura do container */
    max-width: 80%; /* Impede que a imagem ultrapasse a largura do container */
    height: auto; /* Mantém a proporção da imagem */
  }
}

/* Oculta a nova tagline por padrão */
.tagline-mobile-3-linhas {
  display: none;
}

/* Exibe a tagline-mobile-3-linhas apenas em telas menores que 479px */
@media only screen and (max-width: 478px) {
  .tagline-mobile-3-linhas {
    display: block;
    width: 70%; /* Faz a imagem preencher a largura do container */
    max-width: 70%; /* Impede que a imagem ultrapasse a largura do container */
    height: auto; /* Mantém a proporção da imagem */
    margin: 0 auto; /* Centraliza a imagem */
	  margin-top: 20px;
    margin-bottom: 10px;
  }
	.tagline-container {
  text-align: center; /* Centraliza o conteúdo da div */
  padding-top: 20px; /* Espaço acima da tagline, ajuste conforme necessário */
}
}

.container-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px; /* Espaço entre os botões */
  padding: 20px 0; /* Espaço ao redor do container */
  width: 100%; /* Faz com que o container dos botões ocupe a largura total */
  box-sizing: border-box; /* Inclui padding no cálculo da largura */
}

.container-btns .ifood-btn {
  /* Estilos padrão do botão */
  background-color: #FFD600;
  border: none;
  border-radius: 200px;
  color: #800000;
  font-size: 1.2rem;
  padding: 10px 30px;
  cursor: pointer;
  transition: all 0.3s ease; /* Transição suave para sombra e cor de fundo */
  width: 90%; /* Largura como porcentagem do container dos botões */
  margin: 10px auto; /* Centraliza os botões horizontalmente */
  font-family: "urw-form", sans-serif;
  font-weight: 800;
  font-style: normal;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35); /* Sombra suave */
}

.container-btns .ifood-btn:hover {
  background-color: #E6C300; /* Um amarelo mais escuro ao passar o mouse */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); /* Sombra mais suave e mais próxima para simular pressão */
}


.container-btns .whatsapp-btn {
  background-color: #29a357; /* Verde do WhatsApp */
  color: #FFFFFF; /* Texto branco */
  padding: 10px 30px;
  font-size: 1.2rem;
  border-radius: 200px;
  text-decoration: none;
  display: block; /* Ou inline-block, dependendo do layout desejado */
  text-align: center;
  margin: 10px auto;
  width: 90%;
  font-family: "urw-form", sans-serif;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
	.sp-divider {
    width: 90%; /* Largura fixa entre 1180px e 1920px */
  }

.container-btns .whatsapp-btn:hover {
  background-color: #218345; /* Um verde um pouco mais escuro para o efeito de hover */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Sombra mais suave para simular pressão */
}

.endereco-loja {
  font-size: 1rem; /* Tamanho inicial da fonte */
  color: #fff; /* Cor branca para o texto, ajuste conforme o design */
  text-align: center; /* Centraliza o texto */
  font-family: "urw-form", sans-serif; /* A fonte usada em todo o site */
	margin-top: -12px;
	width: 80%;
}
.copyright-text {
  font-size: 0.8rem;
  font-weight: 800;
  text-align: center;
  color: rgba(255, 255, 255, 0.6); /* Cor branca com opacidade de 0.4 */
  margin-bottom: 60px; /* Espaço de 60px abaixo do texto */
  font-family: "urw-form", sans-serif;
}
.sp-divider::before,
.sp-divider::after {
  content: "";
  flex: 1;
  height: 2px; /* Altura da linha */
  background: #FFFFFF; /* Cor da linha */
  margin: 0 15px; /* Espaçamento horizontal */
}
@media only screen and (min-width: 2360px) {
.copyright-text {
  font-size: 1.1rem;
}
}


@media only screen and (max-width: 899px) {
  .container-btns .ifood-btn,
  .container-btns .whatsapp-btn {    
  font-size: 1.2rem;
  }
}
@media only screen and (max-width: 479px) {
	.container-btns {
  padding: 20px 0; /* Espaço ao redor do container */
}
  .container-btns .ifood-btn,
  .container-btns .whatsapp-btn,
	.sp-divider {
    width: 85% !important; /* Largura fixa entre 1180px e 1920px */
  }
		.endereco-loja {
  width: 80%;
}
}
@media only screen and (max-width: 320px) {
	.container-btns {
  padding: 20px 0; /* Espaço ao redor do container */
}
  .container-btns .ifood-btn,
  .container-btns .whatsapp-btn,
	.sp-divider {
    width: 90% !important; /* Largura fixa entre 1180px e 1920px */
  }
}

@media only screen and (min-width: 900px) and (max-width: 1179px) {
	.container-btns {
  padding: 20px 0; /* Espaço ao redor do container */
}
  .container-btns .ifood-btn,
  .container-btns .whatsapp-btn,
	.sp-divider {
    width: 70% !important; /* Largura fixa entre 1180px e 1920px */
  }
}

@media only screen and (min-width: 1180px) and (max-width: 1919px) {

  .container-btns .ifood-btn,
  .container-btns .whatsapp-btn,
	.sp-divider {
    width: 700px !important; /* Largura fixa entre 1180px e 1920px */	  
    font-size: 1.2rem;
  }
}

@media only screen and (min-width: 1920px) and (max-width: 2359px) {
			.container-btns {
  padding: 40px 0; /* Espaço ao redor do container */	
}
  .container-btns .ifood-btn,
  .container-btns .whatsapp-btn,
	.sp-divider {
    width: 1000px; /* Largura de 90% entre 1920px e 2360px */  
    font-size: 1.4rem;
  }
	.endereco-loja {
  font-size: 1.2rem; /* Tamanho inicial da fonte */
  font-family: "urw-form", sans-serif; /* A fonte usada em todo o site */
	margin-top: -15px;
	margin-bottom: 10px;
}
}

@media only screen and (min-width: 2360px) {
			.container-btns {
  padding: 50px 0; /* Espaço ao redor do container */	  
}
  .container-btns .ifood-btn,
  .container-btns .whatsapp-btn,
	.sp-divider {
    width: 1200px; /* Largura fixa a partir de 2360px */
    font-size: 1.5rem;
  }
}
/* Botão de ligação - oculto por padrão */
.call-btn {
  display: none; /* O botão fica oculto por padrão */
  /* Estilos adicionais do botão, se necessário */
}

/* Media query para telas abaixo de 767px */
@media only screen and (max-width: 767px) {
  .call-btn {
    display: block; /* O botão é exibido em telas pequenas */
    width: 90%; /* Largura padrão, como os outros botões */
    margin: 10px auto; /* Margem para espaçamento */
    /* Repita quaisquer estilos necessários dos outros botões, como cores, padding, etc. */
  }
}


#cookieConsent {
    position: fixed;
    bottom: 20px; /* Margem inferior */
    left: 50%; /* Centraliza o elemento na página */
    transform: translateX(-50%); /* Desloca o elemento para a esquerda pela metade de sua largura */
    text-align: center;
    padding: 20px;
    z-index: 1000;
    border-radius: 5px;
    width: calc(100vw - 40px); /* Usa 100vw como a largura total da viewport e subtrai 40px para as margens */
    box-sizing: border-box; /* Inclui padding no cálculo da largura */
    background-color: rgba(102, 2, 2, 0.9);
    color: white;
}


#cookieConsent p {
    margin: 0;
    padding: 0;
    display: inline-block;
    font-size: 16px;
}

#cookieConsent button {
    margin-left: 20px;
    padding: 10px 20px;
    background-color: #ffd600;
    color: #800000;
	font-weight: 800;
    border: none;
    cursor: pointer;
    font-size: 16px;
	border-radius: 200px;
}

#cookieConsent button:hover {
    background-color: #E6C300;
}

@media only screen and (max-width: 1115px) {
#cookieConsent button {
    margin-top: 20px;
}
}
.privacidade-link {
    color: #ffd600; /* Ou um amarelo específico, como #FFFF00 ou rgba(255, 255, 0, 1) */
    font-weight: 400; /* Opcional: torna o texto em negrito */
    text-decoration: none; /* Opcional: remove o sublinhado do link */
}

.privacidade-link:hover {
    text-decoration: underline; /* Opcional: adiciona sublinhado ao passar o mouse */
}


.modal-container {
  display: none; /* Esconde a modal por padrão */
  position: fixed; /* Fica acima de tudo */
  z-index: 1001; /* Garante que a modal fique acima do cookie consent */
  left: 0;
  top: 0;
  width: 100%; /* Largura total */
  height: 100%; /* Altura total */
  overflow: auto; /* Habilita scroll se necessário */
  background-color: rgba(0,0,0,0.4); /* Cor de fundo com opacidade */
}

.modal-content {
  background-image: url("../img/bg-mobile.jpg"); /* Adapte o caminho conforme seu projeto */
  background-size: cover;
  margin: 30px auto; /* Margem para centralizar */
  padding: 40px;
  width: 80%; /* Largura da modal */
	color: #FFFFFF;
    border-radius: 10px;
}
.modal-content p {
	margin-bottom: 10px;
}
.modal-content a {
    color: #ffd600; /* Ou um amarelo específico, como #FFFF00 ou rgba(255, 255, 0, 1) */
    font-weight: 400; /* Opcional: torna o texto em negrito */
    text-decoration: none; /* Opcional: remove o sublinhado do link */
}

.modal-content a:hover {
    text-decoration: underline; /* Opcional: adiciona sublinhado ao passar o mouse */
}

/* Estilo para o botão de fechar */
.close-modal {
  color: #ffd600;
    float: right;
    font-size: 58px;
    font-weight: 400;
    margin-top: -40px;
    margin-right: -10px;
	 transition: color 0.5s ease, transform 0.5s ease; /* Adiciona transição suave para cor e transformação */
}

.close-modal:hover,
.close-modal:focus {
  color: rgba(255,214,0,0.50);
  text-decoration: none;
  cursor: pointer;
	transform: scale(1.2); /* Aumenta o tamanho do ícone em 10% */
}


.close-modal-btn  {
    padding: 10px 20px;
    background-color: #ffd600;
    color: #800000;
	font-weight: 800;
    border: none;
    cursor: pointer;
    font-size: 1rem;
	border-radius: 200px;
	 transition: color 0.5s ease; /* Adiciona transição suave para cor e transformação */
	margin-top: 15px;
}

.close-modal-btn:hover,
.close-modal-btn:focus {
    background-color: #E6C300;
}

.sp-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF; /* Cor do texto */
  font-family: "urw-form", sans-serif;
  font-weight: 800;
  font-size: 1.2rem; /* Tamanho do texto */
  margin: 30px 0; /* Espaçamento vertical */
}

.sp-divider::before,
.sp-divider::after {
  content: "";
  flex: 1;
  height: 2px; /* Altura da linha */
  background: #FFFFFF; /* Cor da linha */
  margin: 0 15px; /* Espaçamento horizontal */
}