/* font-family: "Inter", sans-serif;
 font-optical-sizing: auto;
 font-weight: <weight>;
 font-style: normal; */

/* font-family: "Montserrat", sans-serif;
 font-optical-sizing: auto;
 font-weight: <weight>;
 font-style: normal;   */

body{
margin: 0;
 padding: 0;
 /* height: 100px; */
}

a{
 font-size: large;
}

/* --- Header Padrão (Desktop) --- */
header {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 background-color: transparent; 
 color: white;
display: flex;
 justify-content: space-between;
 align-items: center;
z-index: 9999;
 transition: background-color 0.5s ease;
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: medium;
font-style: normal;
padding: 20px 60px;
}

/* Esconder o botão de menu em desktop e notebook */
.menu-toggle {
display: none;
}

/* ... (o restante do seu CSS do header padrão) ... */

/* Add a new class for the scrolled state */
header.scrolled {
background-color: black; /* Black background when scrolled */
}

/* Ajustes para o texto "HAML TECH" no header */
header img {
margin: 0; /* Remove margem padrão */
 padding-left: 0; /* Garante que não há padding esquerdo extra */
}

/* Ajustes para o div que contém a navegação */
#header {
 margin: 0; /* Remove margem padrão */
 padding-right: 0; /* Remove padding direito padrão */
}

#header nav ul {
 margin: 0; /* Remove margem padrão da lista */
padding: 0; /* Remove padding padrão da lista */
 list-style: none; /* Remove marcadores da lista */
 /* As classes flex gap-5 do Tailwind já devem cuidar do layout dos itens */
}


/* --- Banner --- */
#banner{
width: 100%;
height: 100%; /* Ajuste ou remova se estiver causando problemas de altura */
overflow: hidden;
display: flex;
 justify-content: center;
align-items: center;
 position: relative; /* Adicione esta linha */

 /* Fonte Inter */
font-family: "Inter", sans-serif;
}

#banner video{
 position: absolute;
top: 0;
left: 0;
object-fit: cover;
 width: 100%;
 height: 100%;
z-index: 0; /* Garante que o vídeo esteja atrás */
}

#banner #content {
 position: relative;
z-index: 1;
 max-width:900px;
 margin: 0 auto;
 text-align: center;
 color: #ffff;
/* Tailwind py-60 pb-80 px-4 devem estar atuando aqui */
}

#banner #content p{
margin: 0;
padding: 0;
font-size: 3em; /* Tamanho da fonte para desktop */
text-transform: uppercase;
}

#banner #content span{
font-size: 1em;
}

/* --- Seção Conteúdo --- */


#conteudo-titulo{
 font-family: 'Inter', sans-serif;
 width: 50%; /* Largura para desktop */
}

#conteudo-detalhes{
 font-family: 'Montserrat', sans-serif;
width: 80%; /* Largura para desktop */
}

#conteudo-detalhes .text-justify { /* Seletor corrigido para o span de texto */
 max-width: 700px; /* Adicionei uma largura máxima para o texto */
 margin: 0 auto; /* Centraliza o texto */
}


/* --- Seção Serviços --- */
#section-servicos-titulo{
 font-family: 'Inter', sans-serif;
}
#section-servicos-titulo > span{
font-family: 'Montserrat', sans-serif;
}

#section-servicos-cards-container{ /* Novo container para as duas linhas de cards */
 max-width: 85%; /* Largura para desktop */
}

#section-servicos-cards-row-1,
#section-servicos-cards-row-2 {
display: flex; /* Garante que os cards fiquem lado a lado */
 gap: 5; /* Espaçamento entre os cards */
 padding: 0 60px; /* Padding para as linhas de cards */
}

#section-servicos-cards-row-1 > div,
#section-servicos-cards-row-2 > div {
flex: 1; /* Faz com que os cards ocupem o mesmo espaço */
display: flex;
 flex-direction: column;
}


#section-servicos-cards-card-p{
 font-family: 'Inter', sans-serif;
}
#section-servicos-cards-card-ul{
 font-family: 'Montserrat', sans-serif;
}

#section-servicos-cards-row-1 img,
#section-servicos-cards-row-2 img {
 width: 100%;
height: 300px;
 object-fit: cover; /* Garante que a imagem preencha sem distorcer */
}

/* --- Seção Tecnologias --- */
#section-tecnologias-titulo > p{
 font-family: 'Inter', sans-serif;
}
#section-tecnologias-titulo > span{
font-family: 'Montserrat', sans-serif;
}

#section-tecnologias-cards-container{ /* Novo container para as duas linhas de cards */
 max-width: 85%; /* Largura para desktop */
}

#section-tecnologias-cards-row-1,
#section-tecnologias-cards-row-2 {
 display: flex; /* Garante que os cards fiquem lado a lado */
 gap: 5; /* Espaçamento entre os cards */
 padding: 0 60px; /* Padding para as linhas de cards */
}

#section-tecnologias-cards-row-1 > div,
#section-tecnologias-cards-row-2 > div {
width: 50%; /* Faz com que cada card ocupe metade do espaço */
 display: flex;
flex-direction: column;
}

#section-tecnologias-cards-card-p{
 font-family: 'Inter', sans-serif;
}
#section-tecnologias-cards-card-span{
 font-family: 'Montserrat', sans-serif;
}

#social-media a{
    text-decoration: none;
    color: white;
}

/* As imagens dos cards de tecnologia já têm h-56 e object-cover no HTML, então não precisam de CSS adicional aqui */


/* --- Rodapé --- */



/* =========================================================================== */
/* --- Responsividade para Mobile (max-width: 768px) --- */
/* =========================================================================== */
@media (max-width: 768px) {
/* Header - Ajustes para Mobile */
 header {
 flex-direction: row; /* Mantém logo e menu-toggle na mesma linha */
justify-content: space-between; /* Logo na esquerda, botão na direita */
 padding: 10px 15px; /* Deixa o header menor */
 }

 header img { /* Estilo para o texto "HAML TECH" */
 margin: 0;
 padding-left: 0;
        height: 30px; /* Altura menor para o logo em mobile */
 }

 /* Exibir o botão de menu em mobile */
 .menu-toggle {
display: block; /* Torna o botão visível */
 background: none;
 border: none;
 color: white; /* Cor do ícone */
font-size: 2rem; /* Tamanho do ícone */
 cursor: pointer;
 padding: 5px 10px;
 z-index: 10000; /* Garante que fique acima de outros elementos */
 }

 /* Esconder o div#header (container do menu) por padrão em mobile */
 #header {
 display: none; /* ESCONDE o menu por padrão */
 flex-direction: column; /* Para empilhar os itens quando visível */
 position: absolute; /* Posição absoluta para o menu quando aberto */
 top: 100%; /* Abaixo do header */
 left: 0;
 width: 100%;
 background-color: rgba(0, 0, 0, 0.9); /* Fundo escuro semi-transparente para o menu */
 box-shadow: 0 8px 16px rgba(0,0,0,0.2);
 padding: 20px 0;
 text-align: center;
 transition: transform 0.3s ease-out, opacity 0.3s ease-out; /* Transição para abertura */
transform: translateY(-10px); /* Começa um pouco acima */
 opacity: 0; /* Inicia invisível */
 }

 /* Quando o menu está 'ativo' (aberto), ele fica visível */
 #header.active {
 display: flex; /* EXIBE o menu */
transform: translateY(0); /* Volta para a posição normal */
opacity: 1; /* Torna-o totalmente visível */
 }

 #header nav ul {
flex-direction: column; /* Empilha os itens do menu verticalmente */
 align-items: center; /* Centraliza os itens */
gap: 15px; /* Espaçamento entre os itens do menu */
 width: 100%;
 margin: 0;
 padding: 0;
list-style: none;
 }

 #header nav ul li {
 width: 100%; /* Faz o item da lista ocupar a largura total */
 }

 #header nav ul li a {
 font-size: 1.1em; /* Deixa o texto do menu um pouco maior para facilitar o clique */
 padding: 10px 0; /* Aumenta o padding vertical para a área clicável */
 display: block; /* Faz o link ocupar toda a largura do li */
 color: white; /* Garante que a cor do link seja branca */
 text-decoration: none;
 }

 /* Banner */
 #banner {
        height: 80vh; /* Reduz um pouco a altura do banner em mobile */
    }

 #banner #content {
 padding-top: 50px; /* Reduz padding */
 padding-bottom: 50px; /* Reduz padding */
 padding-left: 15px;
 padding-right: 15px;
 max-width: 95%;
 }

 #banner #content p {
 font-size: 2em; /* Reduz mais o tamanho do texto principal */
}

#banner #content span {
font-size: 0.7em;
 }

 /* Seções de Conteúdo, Serviços, Tecnologias */
 #section-conteudo,
 #section-servicos,
#section-tecnologias {
 padding: 50px 20px;
 gap: 20px;
 }

 #conteudo-titulo {
 font-size: 1.8rem; /* Ajustado para um tamanho menor */
}
    #conteudo-detalhes .text-justify {
        max-width: 100%; /* Garante que o texto ocupe toda a largura disponível */
    }
    #conteudo-especifico {
        flex-direction: row; /* Volta a alinhar lado a lado em mobile, se houver espaço */
        flex-wrap: wrap; /* Permite que os itens quebrem linha se não couberem */
        justify-content: center; /* Centraliza os itens */
    }
    #conteudo-especifico > div {
        width: auto; /* Deixa a largura automática para cada item */
        text-align: center;
    }


 #section-servicos-titulo p,
 #section-tecnologias-titulo p {
font-size: 2rem; /* Ajustado para um tamanho menor */
 }

    #section-servicos-cards-container,
    #section-tecnologias-cards-container {
        padding: 0 15px; /* Reduz o padding lateral para mobile */
    }

 #section-servicos-cards-row-1,
 #section-servicos-cards-row-2,
 #section-tecnologias-cards-row-1,
 #section-tecnologias-cards-row-2 {
 padding: 0; /* Certifique-se de que não há padding extra aqui */
 gap: 15px; /* Espaçamento menor entre cards */
 }

 #section-servicos-cards-row-1 > div,
 #section-servicos-cards-row-2 > div,
 #section-tecnologias-cards-row-1 > div,
 #section-tecnologias-cards-row-2 > div {
 width: 100%; /* Faz cada card ocupar a largura total */
 max-width: none; /* Garante que não haja limite de largura */
 }

 #section-servicos-cards-row-1 img,
 #section-servicos-cards-row-2 img,
#section-tecnologias-cards-row-1 img,
 #section-tecnologias-cards-row-2 img {
 height: 180px; /* Reduz a altura das imagens dos cards */
 }

    #section-servicos-cards-card-p,
    #section-tecnologias-cards-card-p {
        font-size: 1.8rem; /* Reduz o tamanho da fonte dos títulos dos cards */
    }
    #section-servicos-cards-card-ul li,
    #section-tecnologias-cards-card-span {
        font-size: 0.9em; /* Ajusta o tamanho da fonte do texto dos cards */
    }


 /* Rodapé */
 footer {
padding: 30px 10px;
gap: 30px;
 }

 #info,
#merchandish,
 #form {
width: 95%; /* Ocupa ainda mais largura em mobile */
}
    #form form {
        padding: 0 10px; /* Adiciona um pequeno padding interno no formulário */
    }
}