/* css\carbio.css */

#carbio {
    /* 1. Define a imagem de fundo conforme sua instrução */
    background-image: url('../imagens/carbio/ImgEquipeCarbio.png');
    
    /* 2. Garante que a imagem cubra toda a área da seção */
    background-size: cover;
    
    /* 3. Centraliza a imagem perfeitamente */
    background-position: center center;
    
    /* 4. Evita que a imagem se repita */
    background-repeat: no-repeat;
    
    /* 5. Define uma altura mínima para garantir que a imagem 
          seja bem visualizada, especialmente em telas menores
          onde o texto pode não ocupar tanto espaço vertical. */
    min-height: 600px; 
}

/* 6. Define a cor ciano/teal para o nome "CARBIO" */
.text-carbio-brand {
    /* Cor extraída do seu design */
    color: #00F5F5; 
}

/* 7. Estiliza a linha separadora branca */
.carbio-divider {
    color: #ffffff; /* Cor branca */
    opacity: 1;    /* Remove a opacidade padrão de 0.25 do Bootstrap */
    width: 100px;  /* Largura fixa como no design */
    margin-bottom: 1.5rem; /* Espaçamento inferior (Bootstrap mb-3 é 1rem) */
    border-top-width: 2px; /* Linha um pouco mais espessa */
}

/* 8. Controla o alinhamento da linha (HR) para 
     corresponder às classes de alinhamento do Bootstrap no PAI.
*/

/* Alinha no centro em telas pequenas (quando .text-center está ativo) */
.text-center .carbio-divider {
    margin-left: auto;
    margin-right: auto;
}

/* Alinha à esquerda em telas médias ou maiores (quando .text-md-start está ativo) */
@media (min-width: 768px) {
    .text-md-start .carbio-divider {
        margin-left: 0;
    }
}