/* Define uma cor personalizada baseada na sua paleta original */
:root {
    --custom-teal: rgb(36, 127, 131);
}

body {
    /* Um fundo um pouco mais escuro para combinar com o tema dark do Bootstrap */
    background-color: #212529; 
}

/* Estilo para a imagem de perfil */
.profile-picture {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--custom-teal);
    padding: 5px; /* Espaçamento interno para a borda não colar na foto */
}

/* Estilo para o cartão que contém as informações */
.card {
    /* Define a largura máxima e a cor do card */
    max-width: 500px;
    background-color: #343a40;
    border: 1px solid #495057;
}

/* Estilo para destacar o texto, usando a cor personalizada */
.custom-highlight {
    color: var(--custom-teal);
    font-weight: bold;
}

/* Estilos personalizados para os botões */
.custom-btn {
    background-color: var(--custom-teal);
    border-color: var(--custom-teal);
    color: white;
    transition: background-color 0.2s ease-in-out, transform 0.2s ease;
}

/* Efeito hover para os botões */
.custom-btn:hover {
    background-color: rgb(45, 158, 163); /* Um tom um pouco mais claro */
    border-color: rgb(45, 158, 163);
    color: white;
    transform: scale(1.02); /* Leve aumento no tamanho */
}