:root {
    --primary-color: #0B3D91;
    --secondary-color: #00B4D8;
}
/* ==========================================
   BLOCO 1: HEADER DA PÁGINA SOBRE NÓS
   Responsabilidade: Estilizar cabeçalho principal com background e layout
   ========================================== */

   body{
    background-color: #ffffff;
   }

/* Cabeçalho da página sobre nós com altura proporcional */
.about-header {
    height: 50vh; /* 50% da altura da viewport - maior que termos */
    
    /* Background com imagem e overlay escuro para legibilidade */
    background-image: url('../imagens/fotos-banner/banner-sobre.png');
    background-size: cover; /* Cobrir toda a área */
    background-position: center; /* Centralizar imagem */
    
    /* Layout flexbox para centralização */
    display: flex;
    align-items: center; /* Centralização vertical */
    justify-content: center; /* Centralização horizontal */
    text-align: center; /* Texto centralizado */
    color: white; /* Texto branco */
}

/* ==========================================
   BLOCO 2: CONTEÚDO DO HEADER
   Responsabilidade: Estilizar texto dentro do header
   ========================================== */

/* Container do conteúdo do header com largura máxima */
.about-header-content {
    max-width: 800px; /* Limitar largura para legibilidade */
    padding: 0 20px; /* Espaçamento lateral responsivo */
}

/* Título principal do header com tamanho maior que termos */
.about-header-content h1 {
    font-size: 42px; /* Tamanho maior para impacto */
    margin-bottom: 15px; /* Espaçamento abaixo do título */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para destaque */
}

/* Parágrafo de descrição do header */
.about-header-content p {
    font-size: 18px; /* Tamanho moderado para descrição */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Sombra sutil */
}

/* ==========================================
   BLOCO 3: SEÇÃO PRINCIPAL SOBRE NÓS
   Responsabilidade: Container principal com espaçamento
   ========================================== */

/* Seção principal com espaçamento vertical generoso */
.about-section {
    padding: 80px 0; /* Espaçamento vertical maior que termos */
}

/* ==========================================
   BLOCO 4: SEÇÃO DE INTRODUÇÃO
   Responsabilidade: Apresentação da empresa centrada
   ========================================== */

/* Container da introdução centrado */
.about-intro {
    text-align: center; /* Centralização do texto */
    max-width: 900px; /* Largura máxima para legibilidade */
    margin: 0 auto 60px; /* Centralização horizontal e espaçamento abaixo */
}

/* Título da introdução com cor da marca */
.about-intro h2 {
    color: #0B3D91; /* Cor definida em variáveis CSS */
    font-size: 32px; /* Tamanho maior para destaque */
    margin-bottom: 20px; /* Espaçamento abaixo do título */
}

/* Parágrafo da introdução com formatação legível */
.about-intro p {
    font-size: 18px; /* Tamanho confortável para leitura */
    line-height: 1.7; /* Altura de linha para legibilidade */
    color: #555; /* Cinza escuro para conforto visual */
}

/* ==========================================
   BLOCO 5: SEÇÃO DE HISTÓRIA
   Responsabilidade: Layout em grid para texto e imagem
   ========================================== */

/* Container em grid para história da empresa */
.about-story {
    display: grid; /* Layout em grid moderno */
    grid-template-columns: 1fr 1fr; /* Duas colunas iguais */
    gap: 40px; /* Espaçamento entre colunas */
    align-items: center; /* Alinhamento vertical dos elementos */
    margin-bottom: 80px; /* Espaçamento abaixo da seção */
}

/* Conteúdo textual da história */
.about-story-content h2 {
    color: #0B3D91; /* Cor da marca */
    font-size: 28px; /* Tamanho intermediate */
    margin-bottom: 20px; /* Espaçamento abaixo do título */
}

/* Parágrafos da história */
.about-story-content p {
    margin-bottom: 15px; /* Espaçamento entre parágrafos */
    line-height: 1.7; /* Altura de linha para legibilidade */
    color: #555; /* Cinza escuro consistente */
}

/* ==========================================
   BLOCO 6: IMAGEM DA HISTÓRIA
   Responsabilidade: Estilizar imagem da seção história
   ========================================== */

/* Imagem da história responsiva */
.about-story-image img {
    width: 100%; /* Largura total do container */
    height: auto; /* Altura automática para manter proporção */
    border-radius: 8px; /* Cantos arredondados */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra sutil para profundidade */
}

/* ==========================================
   BLOCO 7: SEÇÃO MISSÃO, VISÃO E VALORES
   Responsabilidade: Seção com fundo diferenciado
   ========================================== */

/* Seção com fundo cinza claro */
.mission-values {
    background-color: #f5f5f5; /* Fundo cinza claro para separação */
    padding: 80px 0; /* Espaçamento vertical generoso */
}

/* ==========================================
   BLOCO 8: CONTAINER DA GRADE DE MISSÃO/VISÃO/VALORES
   Responsabilidade: Layout em grid para os três elementos
   ========================================== */

/* Container em grid com três colunas */
.mission-values-container {
    display: grid; /* Layout em grid moderno */
    grid-template-columns: repeat(3, 1fr); /* Três colunas iguais */
    gap: 30px; /* Espaçamento entre elementos */
}

/* ==========================================
   BLOCO 9: CAIXAS DE MISSÃO, VISÃO E VALORES
   Responsabilidade: Cards individuais com animação hover
   ========================================== */

/* Cards individuais com fundo branco e sombra */
.mission-box, .vision-box, .values-box {
    background-color: white; /* Fundo branco para contraste */
    border-radius: 8px; /* Cantos arredondados */
    padding: 30px; /* Espaçamento interno generoso */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* Sombra muito sutil */
    text-align: center; /* Centralização do conteúdo */
    transition: transform 0.3s; /* Animação suave */
}

/* Efeito hover para elevar cards */
.mission-box:hover, .vision-box:hover, .values-box:hover {
    transform: translateY(-10px); /* Elevação no hover */
}

/* ==========================================
   BLOCO 10: ÍCONES DOS CARDS
   Responsabilidade: Círculos com ícones centralizados
   ========================================== */

/* Container circular para ícones */
.mission-icon, .vision-icon, .values-icon {
    width: 70px; /* Largura do círculo */
    height: 70px; /* Altura do círculo */
    background-color: #e6f7ff; /* Fundo azul muito claro */
    border-radius: 50%; /* Formato circular perfeito */
    display: flex; /* Layout flexbox para centralização */
    align-items: center; /* Centralização vertical */
    justify-content: center; /* Centralização horizontal */
    margin: 0 auto 20px; /* Centralização horizontal e espaçamento abaixo */
}

/* Ícones dentro dos círculos */
.mission-icon i, .vision-icon i, .values-icon i {
    font-size: 30px; /* Tamanho do ícone */
    color: #00B4D8; /* Cor secundária da marca */
}

/* ==========================================
   BLOCO 11: TÍTULOS DOS CARDS
   Responsabilidade: Hierarquia visual dos títulos
   ========================================== */

/* Títulos dos cards com cor da marca */
.mission-box h3, .vision-box h3, .values-box h3 {
    color: #0B3D91; /* Cor da marca */
    font-size: 22px; /* Tamanho intermediate */
    margin-bottom: 15px; /* Espaçamento abaixo do título */
}

/* ==========================================
   BLOCO 12: CONTEÚDO DOS CARDS MISSÃO E VISÃO
   Responsabilidade: Texto descritivo dos cards
   ========================================== */

/* Parágrafos dos cards missão e visão */
.mission-box p, .vision-box p {
    color: #555; /* Cinza escuro para legibilidade */
    line-height: 1.7; /* Altura de linha para conforto */
}

/* ==========================================
   BLOCO 13: LISTA DE VALORES
   Responsabilidade: Formatação especial para lista de valores
   ========================================== */

/* Container da lista de valores */
.values-list {
    text-align: left; /* Alinhamento à esquerda para lista */
    padding-left: 20px; /* Indentação da lista */
}

/* Itens da lista de valores */
.values-list li {
    margin-bottom: 10px; /* Espaçamento entre itens */
    color: #555; /* Cinza escuro consistente */
    line-height: 1.7; /* Altura de linha para legibilidade */
}

/* ==========================================
   BLOCO 14: RESPONSIVIDADE TABLET
   Responsabilidade: Adaptação para telas médias
   ========================================== */

/* Media query para tablets */
@media (max-width: 992px) {
    /* Mudar grid da história para coluna única */
    .about-story {
        grid-template-columns: 1fr; /* Uma coluna só */
    }

    /* Reordenar imagem da história para cima */
    .about-story-image {
        order: -1; /* Mover para primeira posição */
    }

    /* Mudar grid de missão/visão/valores para coluna única */
    .mission-values-container {
        grid-template-columns: 1fr; /* Uma coluna só */
    }
}

/* ==========================================
   BLOCO 15: RESPONSIVIDADE MOBILE
   Responsabilidade: Adaptação para smartphones
   ========================================== */

/* Media query para smartphones */
@media (max-width: 768px) {
    /* Reduzir tamanho do título do header */
    .about-header-content h1 {
        font-size: 32px; /* Tamanho menor para mobile */
    }

    /* Reduzir tamanho do título da introdução */
    .about-intro h2 {
        font-size: 28px; /* Tamanho menor para mobile */
    }

    /* Reduzir tamanho do parágrafo da introdução */
    .about-intro p {
        font-size: 16px; /* Tamanho menor para mobile */
    }
/* ==========================================
   BLOCO 16: SEÇÃO SOBRE OS DESENVOLVEDORES
   Responsabilidade: Estilizar seção dos desenvolvedores
   ========================================== */

.developers-section {
    padding: 80px 0;
    background-color: #f9f9f9;
}

.developers-section h2 {
    text-align: center;
    color: #0B3D91;
    font-size: 32px;
    margin-bottom: 40px;
}

.developers-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.developer-card {
    background-color: white;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s;
}

.developer-card:hover {
    transform: translateY(-10px);
}

.developer-card img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
    border: 4px solid #e6f7ff;
}

.developer-card h3 {
    color: #0B3D91;
    font-size: 22px;
    margin-bottom: 15px;
}

.developer-links {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.developer-links a {
    color: #00B4D8;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s;
}

.developer-links a:hover {
    color: #0B3D91;
}

.developer-links a i {
    margin-right: 5px;
}

/* ==========================================
   BLOCO 17: RESPONSIVIDADE PARA DESENVOLVEDORES
   ========================================== */

@media (max-width: 992px) {
    .developers-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .developers-section h2 {
        font-size: 28px;
    }

    .developer-card {
        padding: 20px;
    }

    .developer-card img {
        width: 100px;
        height: 100px;
    }

    .developer-links {
        flex-direction: column;
        gap: 10px;
    }
}
}