/* Estilos específicos para a página de história */
.history-section {
    padding: 3rem 1.5rem;
    background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(20, 20, 20, 0.9)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23222" opacity="0.5"/><path d="M0 0L100 100M100 0L0 100" stroke="%23333" stroke-width="1"/></svg>');
}

.history-section h1 {
    font-family: "Alfa Slab One", cursive;
    color: white;
    font-size: 3.0rem;
    text-align: center;
    margin-bottom: 2.5rem;
    text-shadow: 0 0 10px rgba(179, 179, 177, 0.3);
}

.history-content {
    max-width: 900px;
    margin: 0 auto;
}

.history-text {
    color: #ddd;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 2rem;
    text-align: left;
}

.figures-side-by-side {
    display: flex; /* Ativa o Flexbox */
    justify-content: space-around; /* Distribui o espaço ao redor dos itens. Pode usar 'space-between' ou 'center' também */
    align-items: flex-start; /* Alinha os itens ao topo. Ajuste conforme necessário */
    gap: 1rem; /* Espaço entre as figuras, opcional */
    margin-bottom: 2rem; /* Mantém uma margem inferior similar à da classe .history-text */
}

.figures-side-by-side figure {
    flex: 1; /* Permite que as figuras cresçam e ocupem o espaço disponível igualmente */
    max-width: 48%; /* Define uma largura máxima para cada figura, para que caibam duas lado a lado com um gap. Ajuste conforme o gap. */
    /* Você pode adicionar outras estilizações específicas para as figuras aqui, se necessário */
}

.figures-side-by-side figure img {
    width: 100%; /* Faz a imagem ocupar toda a largura da figure */
    height: auto; /* Mantém a proporção da imagem */
    /* Adicione mais estilos à imagem se precisar, como bordas ou sombras */
}

/* Para garantir que em telas menores as figuras voltem a ficar uma embaixo da outra */
@media (max-width: 768px) {
    .figures-side-by-side {
        flex-direction: column; /* Muda a direção do flex para coluna */
        align-items: center; /* Centraliza os itens na visualização em coluna */
    }

    .figures-side-by-side figure {
        max-width: 90%; /* Ajusta a largura máxima para telas menores */
        margin-bottom: 1.5rem; /* Adiciona um espaço entre as figuras empilhadas */
    }

    .figures-side-by-side figure:last-child {
        margin-bottom: 0; /* Remove a margem do último item para não duplicar com a margem do container */
    }
}


.image-caption {
    text-align: center;
    font-style: italic;
    color: #aaa;
    font-size: 0.9rem;
}

.departments-section {
    background-color: #1a1a1a;
    padding: 3rem 1.5rem;
    border-top: 3px solid #444;
}

.departments-section h2 {
    font-family: "Alfa Slab One", cursive;
    color: white;
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 2rem;
}

.department-card {
    background: rgba(30, 30, 30, 0.8);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 2rem;
    border: 1px solid #444;
    transition: transform 0.3s, box-shadow 0.3s;
}

.department-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    border-color: white;
}

.department-image {
    height: 200px;
    overflow: hidden;
    background-color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
}

.department-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.department-content {
    padding: 1.5rem;
}

.department-content h3 {
    color: white;
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    font-family: 'Roboto Slab', serif;
}

.department-content p {
    color: #ccc;
    line-height: 1.6;
}

/* Estilos para a seção de fundadores */
.founders-section {
    padding: 3rem 1.5rem;
    background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(20, 20, 20, 0.9)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23222" opacity="0.5"/><path d="M0 0L100 100M100 0L0 100" stroke="%23333" stroke-width="1"/></svg>');
    border-top: 3px solid #444;
}

.founders-section h2 {
    font-family: "Alfa Slab One", cursive;
    color: white;
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 2rem;
}

.founders-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.founder-item {
    text-align: center;
    flex: 0 0 calc(20% - 20px);
    max-width: calc(20% - 20px);
}

.founder-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 2px solid #444;
    transition: transform 0.3s, border-color 0.3s;
}

.founder-item img:hover {
    transform: scale(1.05);
    border-color: white;
}

.founder-caption {
    color: white;
    margin-top: 10px;
    font-size: 1rem;
    font-family: 'Roboto Slab', serif;
}

/* Âncoras no final da história */
.history-anchors {
    margin: 2rem 0;
    text-align: center;
}

.history-anchors .button {
    background-color: transparent;
    color: white;
    border-color: white;
    font-weight: bold;
    transition: all 0.3s;
}

.history-anchors .button:hover {
    background-color: white;
    color: white;
}

/* Responsividade */
@media (max-width: 1023px) {
    .founder-item {
        flex: 0 0 calc(33.333% - 20px);
        max-width: calc(33.333% - 20px);
    }
}

@media (max-width: 768px) {
    .founder-item {
        flex: 0 0 calc(50% - 20px);
        max-width: calc(50% - 20px);
    }
}

@media (max-width: 480px) {
    .founder-item {
        flex: 0 0 calc(100% - 20px);
        max-width: calc(100% - 20px);
    }
}