/* Cores */

:root {
    --azul-marinho: #002855;
    --azul-claro: #0073e6;
    --cinza-claro: #f4f4f4;
    --cinza-medio: #555555;
    --cinza-escuro: #333333;
    --branco: #ffffff;
    --laranja: #ffa500;
}

/* Estilos Gerais */

body {
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--cinza-medio);
    color: var(--cinza-escuro);
}

main {
    margin-top: 70px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 30px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
    font-weight: 700;
    margin: 0 0 10px 0;
}



.img-center {
    max-width: 400px;
    /* Ajusta para não ultrapassar o tamanho do container */
    height: auto;
    /* Mantém a proporção original da imagem */
    margin: 20px auto;
    /* Centraliza com margem automática */
    display: block;
    /* Garante que a imagem seja tratada como um bloco */

}

.img-center-larger {
    max-width: 800px;
    /* Ajusta para não ultrapassar o tamanho do container */
    height: auto;
    /* Mantém a proporção original da imagem */
    margin: 20px auto;
    /* Centraliza com margem automática */
    display: block;
    /* Garante que a imagem seja tratada como um bloco */

}


h1,
h2.title-page {
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    font-size: 3rem;
    color: var(--branco);
    display: inline-block;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 20px;
}


p {
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

.text-image-flex {
    display: flex;
    align-items: flex-start;
    /* Alinha a imagem e o texto pelo topo */
    gap: 20px;
    /* Espaçamento entre a imagem e o parágrafo */
}

.img-flex {
    max-width: 200px;
    /* Define o tamanho máximo da imagem */
    height: auto;
    /* Mantém a proporção da imagem */
}

.text-image-flex p {
    text-align: justify;
    /* Justifica o texto */
    font-size: 1rem;
    line-height: 1.6;
}

/* Header */

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--laranja);
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px;
    /* Altura é determinada dinamicamente pelo padding */
}

header .logo {
    font-size: 1.5rem;
    color: var(--azul-marinho);
    font-weight: bold;
    text-transform: uppercase;
}

nav {
    margin-right: 20px;
    /* Adiciona um espaço entre o menu e o canto direito */
}


nav ul {
    list-style: none;
    display: flex;
    /* Organiza os itens do menu lado a lado */
    margin: 0;
    padding: 0;
}

nav ul li {
    margin: 0 10px;
}

nav ul li a {
    color: var(--branco);
    text-decoration: none;
    padding: 5px 10px;
    transition: background-color 0.3s;
}

nav ul li a:hover {
    background-color: var(--azul-claro);
    border-radius: 5px;
}

/* Estilos gerais do menu */
.menu {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.menu>li {
    position: relative;
    /* Necessário para o submenu */
    margin: 0 10px;
}

.menu>li>a {
    color: var(--branco);
    text-decoration: none;
    padding: 5px 10px;
    transition: background-color 0.3s;
}

.menu>li>a:hover {
    background-color: var(--azul-claro);
    border-radius: 5px;
}

/* Submenu */
.submenu-items {
    list-style: none;
    position: absolute;
    /* Fica relativo ao pai (li) */
    top: 100%;
    /* Abaixo do item principal */
    left: 0;
    background-color: var(--cinza-claro);
    display: none;
    /* Esconde o submenu por padrão */
    padding: 10px 0;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

/* Exibe o submenu ao passar o mouse */
.submenu:hover .submenu-items,
.submenu:focus-within .submenu-items {
    display: block;
}

/* Estilos dos itens do submenu */
.submenu-items li {
    margin: 0;
}

.submenu-items li a {
    display: block;
    padding: 5px 20px;
    color: var(--azul-marinho);
    text-decoration: none;
    transition: background-color 0.3s;
}

.submenu-items li a:hover {
    background-color: var(--azul-claro);
    color: var(--branco);
}


body.index .hero {
    background-image: url('../images/banner-index.png');
}

body.contato .hero {
    background-image: url('../images/banner-contato.png');
}

body.estojo .hero {
    background-image: url('../images/banner-estojo.jpeg');
}

body.prisioneiros .hero {
    background-image: url('../images/banner-prisioneiros.jpeg');
}

body.grampou .hero {
    background-image: url('../images/banner-grampoU.jpeg');
}

body.porcas .hero {
    background-image: url('../images/banner-porcas.jpeg');
}

body.arruelas .hero {
    background-image: url('../images/banner-arruelas.jpeg');
}



.hero {
    background-size: cover;
    /* Ajusta a imagem para cobrir toda a área da seção */
    background-position: center;
    /* Centraliza a imagem no plano de fundo */
    background-repeat: no-repeat;
    /* Evita a repetição da imagem */
    color: var(--branco);
    /* Garante que o texto fique visível no banner */
    padding-top: 70px;
    /* Compensa a altura do header fixo */
    padding-bottom: 50px;
    text-align: center;
    position: relative;
    min-height: 300px;
    /* Define uma altura mínima para a seção */
}

.hero .hero-logo {
    position: absolute;
    top: 20px;
    left: 20px;
}

.hero .hero-logo img {
    width: 200px;
    height: auto;
}

/* Produtos */

.produtos {
    padding: 20px;
    background: var(--branco);
}

.produtos .cards {
    display: flex;
    flex-wrap: wrap;
    /* Permite que os cards quebrem para uma nova linha */
    gap: 20px;
    /* Espaço entre os cards */
    justify-content: center;
    /* Espaçamento uniforme entre os cards */
}




.produtos .card:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.produtos .card-link {
    text-decoration: none;
    /* Remove o sublinhado padrão do link */
    color: inherit;
    /* Garante que a cor do texto siga o estilo interno da div */
    display: block;
    /* Faz com que o link cubra toda a área do card */
}

.produtos .card {

    background-color: var(--cinza-claro);
    border-radius: 8px;
    text-align: center;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    width: 300px;
    /* Define uma largura fixa para todos os cards */
    height: 400px;
    /* Define uma altura fixa para uniformidade */
    display: flex;
    flex-direction: column;
    /* Alinha conteúdo em coluna */
    justify-content: space-between;
    /* Distribui espaço entre os elementos */
}

.produtos .card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* Mantém a proporção quadrada */
    object-fit: cover;
    /* Garante que a imagem cubra toda a área */
    border-radius: 8px;
    /* Bordas arredondadas */
    margin-bottom: 10px;
}

.produtos .card h3 {
    font-size: 1.25rem;
    /* Aumenta o tamanho do título */
    margin: 10px 0;
}

.produtos .card p {
    font-size: 1rem;
    /* Ajusta o tamanho do texto para melhor visibilidade */
    line-height: 1.4;
    color: var(--azul-marinho);
}


/* Footer */

footer {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 0.875rem;
    color: var(--azul-marinho);
    /* Mantém a cor do texto */
    background-color: var(--laranja);
    /* Mantém a cor de fundo */
    padding: 20px;
    /* Aumenta o padding para maior espaçamento */
    display: flex;
    justify-content: center;
}

.footer-container {
    display: flex;
    /* Layout flexbox */
    align-items: center;
    /* Centraliza os itens verticalmente */
    gap: 20px;
    /* Espaçamento entre imagem e texto */
    text-align: left;
    /* Texto alinhado à esquerda */
}

.footer-logo img {
    max-width: 150px;
    /* Limita a largura da imagem */
    height: auto;
    /* Mantém a proporção da imagem */
}

.footer-text {
    font-size: 0.875rem;
    /* Mantém o tamanho da fonte */
    line-height: 1.6;
    /* Espaçamento entre linhas */
}

@media (max-width: 600px) {
    .footer-container {
        flex-direction: column;
        /* Empilha a imagem e o texto em telas menores */
        text-align: center;
        /* Centraliza o texto no modo responsivo */
    }

    .footer-logo img {
        margin-bottom: 10px;
        /* Espaço abaixo da imagem */
    }
}

.company-info {
    padding: 20px;
    max-width: 600px;
    margin: 20px auto;
    background-color: var(--cinza-claro);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.company-info h2 {
    font-family: 'Oswald', Arial, sans-serif;
    font-size: 1.8rem;
    color: var(--azul-marinho);
    margin-bottom: 20px;
}

.company-info p {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

.company-info a {
    color: var(--azul-claro);
    text-decoration: none;
    transition: color 0.3s;
}

.company-info a:hover {
    color: var(--azul-marinho);
}

.tabela-medidas table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-family: 'Poppins', Arial, sans-serif;
    margin-top: 20px;
}



.tabela-medidas th,
.tabela-medidas td {
    border: 1px solid #ccc;
    padding: 10px;
}

.tabela-medidas thead tr {
    background-color: #002855;
    color: #ffffff;
}

.tabela-medidas tbody tr:nth-child(even) {
    background-color: #f4f4f4;
}

.tabela-medidas tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

.tabela-container {
    display: flex;
    flex-wrap: wrap;
    /* Permite que as tabelas quebrem em linhas */
    gap: 20px;
    /* Espaço entre as tabelas */
    justify-content: space-between;
    /* Distribui os itens uniformemente */
    padding: 20px;
}

.tabela-item {
    display: flex;
    /* Torna o contêiner um Flexbox */
    flex-direction: column;
    /* Organiza os itens em coluna */
    align-items: center;
    /* Centraliza horizontalmente */
    justify-content: flex-start;
    /* Centraliza verticalmente */
    flex: 1 1 calc(33.33% - 20px);
    /* Responsividade com 3 tabelas por linha */
    min-width: 250px;
    /* Define um tamanho mínimo */
    max-width: 100%;
    /* Garante que o item não ultrapasse o limite */
    background-color: lightsteelblue;
    /* Cor de fundo */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Adiciona sombra */
    text-align: center;
    /* Centraliza o texto */
    box-sizing: border-box;
    /* Inclui o padding e borda no cálculo do tamanho */
}

/* Layout de duas colunas */
.conteudo {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

/* Coluna principal */
.principal {
    flex: 3;
    /* Ocupa 75% do espaço */
}

/* Coluna da tabela */
.tabela-coluna {
    flex: 1;
    /* Ocupa 25% do espaço */
    background-color: var(--branco);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Estilização da tabela */
.tabela-coluna table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Poppins', Arial, sans-serif;
    text-align: center;
    margin-top: 10px;
}

.tabela-coluna th,
.tabela-coluna td {
    border: 1px solid var(--branco);
    padding: 10px;
}

.tabela-coluna thead tr {
    background-color: var(--azul-marinho);
    color: var(--branco);
}

.tabela-coluna tbody tr:nth-child(even) {
    background-color: var(--azul-claro);
}

.tabela-coluna tbody tr:nth-child(odd) {
    background-color: var(--branco);
}