html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

@font-face {
    font-family: 'AhsingRegular';
    src: 
        /* 1. Tenta carregar o WOFF2 (moderno) */
        url('/assets/fonts/AhsingRegular.woff2') format('woff2'),
        
        /* 2. Se não der, tenta o WOFF (compatível) */
        url('/assets/fonts/AhsingRegular.woff') format('woff'),
        
        /* 3. Por último, o OTF (fallback) */
        url('/assets/fonts/AhsingRegular.otf') format('opentype');

    /* Propriedades padrão para esta fonte */
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Melhora a performance de carregamento */
}


/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;

}
@import url("css/login.css");

 @keyframes fadeIn {
          from {
                opacity: 0;
                transform: translateY(20px); /* Opcional: faz o elemento subir suavemente */
          }
          to {
               opacity: 1;
               transform: translateY(0);
          }
     }

/* Estilo principal para a logo */
.Logo {
    /* Tamanho */
    height: 120px; /* Ajuste este valor conforme necessário */
    width: auto;
    
    /* Responsividade */
    max-width: 100%;
    
    /* Preparação para a animação de hover */
    transition: transform 0.3s ease;
}

/* Efeito ao passar o mouse sobre a logo */
.Logo:hover {
    transform: scale(1.1); /* Aumenta o tamanho em 10% */
}

 body {
           
            background-color: var(--cor-fundo);
        }
        header {
             display: flex ;
             justify-content: space-between ;
             align-items: center;
             width: 100%;
             height: 100px;
             background-image: url("../images/layouts/Fundo.jpg.png");
             background-repeat: repeat;
             background-position: center;          
             padding: 20px 0;
             position: relative;  
            
        }       
  

        nav {
            margin: 0;
            text-align: center;
            background-color: var(--cor-nav);   
            padding: 10px 0 ;         
        }
       nav a {
            color: white;             
            text-decoration: none;    
            font-size: 30px;          
            margin: 0 60px;          
            display: inline-block;    
            transition: transform 0.2s, color 0.2s; 
        }

        nav a:hover {
             transform: scale(1.2);    
        color: #ffb703;           
        }

                
       .botao-pedido {
           display: inline-block;
           background-color: #F37021;
           color: black;
           font-size: 25px;
           font-family: Arial Black, Impact, sans-serif;
           font-style: italic;
           font-weight: bold;
           padding: 12px 25px;  
           border-radius: 25px;
           border: 3px solid black;        
           margin-right: 200px;
           text-decoration: none;
           transition: transform 0.2s ease, background-color 0.3s ease;
          }

     .botao-pedido:hover {
          background-color:#d45e14;
          transform: scale(1.1);
     }
   
     .fade-in {
          animation: fadeIn 1s ease-in-out forwards;
     }


     .fade-in.delay-1 {
          animation-delay: 0.5s;
     }

     .fade-in.delay-2 {
          animation-delay: 1s;
     }

     .fade-in.delay-3 {
          animation-delay: 1.5s;
     }

    
footer {
    background-color: var(--cor-footer); 
    color: var(--texto-cor);
    padding: 40px 20px;
    font-family: Arial, sans-serif;
}

.footer-container {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between; 
    max-width: 1200px;
    margin: 0 auto;
}

.footer-column {
    flex: 1; 
    margin: 0 15px;
    min-width: 200px; 
}

.footer-column h4 {
    margin-bottom: 20px;
    font-size: 1.2em;
    color: #ff5722; 
}

.footer-column ul {
    list-style: none; 
    padding: 0;
}

.footer-column ul li {
    margin-bottom: 10px;
}

.footer-column ul li a {
    color: var(--texto-cor);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-column ul li a:hover {
    color: #ff5722;
}

.cupom {
color: #000000;

}
.social-icons a img {
    width: 30px;
    height: 30px;
    margin-right: 15px;
    transition: transform 0.3s;
}

.social-icons a img:hover {
    transform: scale(1.1); 
}


.footer-column form input[type="email"] {
    width: calc(100% - 100px);
    padding: 10px;
    border: none;
    border-radius: 5px;
    margin-bottom: 10px;
    margin-top: 5px;
}

.footer-column form button {
    width: 90px;
    padding: 10px;
    background-color: #ff5722;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.footer-column form button:hover {
    background-color: #e64a19;
}


.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #444; 
    margin-top: 20px;
}
.footer-logo{
     padding: 2px;
     width: 150px;
}

    /* animação para girar a pizza */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* O Painel de Controle de Cores */
/* Definição das variáveis para o Modo Claro (Padrão) */
:root {
    --cor-nav: #074f2a;    /* faixa verde abaixo da header */
    --cor-fundo: #FFFFFF;  /* faixa verde abaixo da página */
    --cor-footer: #ececec; /* rodapé da página */
    --texto-cor: #000000;  /* cor do texto principal*/
    --text-shadoow:          /* borda sombreada do texto principal*/
    1px 1px 1px #ffffff, 
    -1px 1px 1px #ffffff, 
    1px -1px 1px #ffffff,
    -1px -1px 1px #ffffff;  
}

/* Redefinição das variáveis para o Modo Escuro */

body.darkmode {                  /* Quando o JavaScript adiciona essa classe */
                                 /* na tag <body> , este seletor se torna ativo. */

    --cor-nav: #074f2a;       /* faixa verde abaixo da header */
    --cor-fundo: #000000;     /* faixa verde abaixo da página */
    --cor-footer: #333;       /* rodapé da página */
    --texto-cor: #ffffff;     /* cor do texto principal*/
    --text-shadoow:             /* borda sombreada do texto principal*/
    1px 1px 1px #710808, 
    -1px 1px 1px #710808, 
    1px -1px 1px #710808,
    -1px -1px 1px #710808;  
}

/* ---  CONFIG DO DARKMODE --- */
/* Estilo do botão */
#darkmode-button img {
    height: 70px; /* Ajuste o tamanho conforme desejar */
    width: auto;
}

/* --- LÓGICA DE TROCA DOS ÍCONES --- */

/* esconde a segunda imagem (ícone escuro.png).
    Apenas a primeira (claro.png) fica visível. */
#darkmode-button img:last-child {
    display: none;
}

/* Quando o ativa o modo ESCURO  */
body.darkmode #darkmode-button img:first-child {
    display: none; /* esconde a primeira imagem (claro.png). */
}

body.darkmode #darkmode-button img:last-child {
    display: block; /*  mostra a segunda imagem (escuro.png). */
}

/* --- ESTILOS RESPONSIVOS PARA O BOTÃO --- */
/* Aplica estas regras em telas com 768px de largura ou menos (tablets e celulares) */
@media (max-width: 768px) {



}