/* 1. Reset e Variáveis Globais (Boas Práticas) */

:root {

    --cor-fundo:  #1d2a5a ;

    --cor-container: #009186;

    --cor-texto-primario: #000000;

    --cor-texto-secundario: #392ed4;

    --cor-acento: #0037ff ;

    --cor-acento-hover: #5b6098;

}

 

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

 

/* 2. Estilos do Corpo da Página (Layout Centralizado) */

body {

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    background: linear-gradient(90deg,rgba(118, 137, 196, 1) 0%, rgba(18, 27, 74, 1) 35%, rgba(0, 152, 186, 1) 100%);

    color: var(--cor-texto-primario);

   

    /* Usamos Flexbox para centralizar nosso container na tela */

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 100vh;

    padding: 20px;

}

 

/* 3. Estilos do Container Principal */

.container {

    width: 100%;

    max-width: 600px;

    background-color: var(--cor-container);

    padding: 30px;

    border-radius: 16px;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);

    text-align: center;

}

 

/* 4. Estilos do Cabeçalho (Perfil) */

.perfil {

    margin-bottom: 30px;

}

 

.perfil__foto {

    width: 120px;

    height: 120px;

    border-radius: 50%; /* Deixa a imagem redonda */

    border: 3px solid var(--cor-acento);

    object-fit: cover; /* Garante que a imagem não fique distorcida */

    margin-bottom: 15px;

}

 

.perfil__texto h1 {

    font-size: 1.8rem;
    
    margin-bottom: 5px;

}

 

.perfil__texto p {

    font-size: 1rem;

    color: black;

}



/* 5. Estilos da Seção de Links */

.links ul {

    list-style: none; /* Remove os pontos da lista */

}

 

.links li {

    margin-bottom: 15px;

}

 

.links a {

    display: block;

    background-color: var(--cor-acento);

    color: var(--cor-texto-primario);

    padding: 15px;

    text-decoration: none;

    font-weight: bold;

    border-radius: 8px;

    transition: background-color 0.3s ease, transform 0.2s ease;

}

 

.links a:hover {

    background-color: var(--cor-acento-hover);

    transform: scale(1.03); /* Efeito sutil de crescimento */

}

 

/* 6. Estilos do Rodapé */

.rodape {

    margin-top: 30px;

    font-size: 0.8rem;

    color: var(--cor-texto-secundario);

}

 

/* 7. Classe de Acessibilidade */

.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border-width: 0;

}

 

/* ================================================= */

/* 5. NOVOS ESTILOS PARA A PÁGINA DE CONTATO         */

/* ================================================= */

.contact-form-section h2 {

    font-size: 1.5rem;

    color: var(--cor-texto-primario);

    margin-bottom: 0.5rem;

}

.contact-intro {

    color:black;

    margin-bottom: 2rem;

}

.form-group {

    margin-bottom: 1.5rem;

    text-align: left;

}

.form-group label {

    display: block;

    margin-bottom: 0.5rem;

    font-size: 0.9rem;

    color: black;

}

.form-group input,

.form-group textarea {

    width: 100%;

    padding: 0.75rem;

   background-color: #571edb;

    border: 1px solid #444;

    border-radius: 6px;

    color: var(--cor-texto-primario);

    font-size: 0.8rem;

    transition: border-color 0.2s ease;

}

.form-group input:focus,

.form-group textarea:focus {

    outline: none;
    border-color: var(--cor-acento);

}

.form-group textarea {

    resize: vertical;
   
    min-height: 100px;

}

.form-group #message, #email, #name {
background-color: white;
}

.btn {

    display: block;

    width: 100%;

    background-color: var(--cor-acento);

    color: var(--cor-texto-primario);

    padding: 15px;

    text-decoration: none;

    font-weight: bold;

    border-radius: 8px;

    border: none;

    cursor: pointer;

    font-size: 1rem;

    transition: background-color 0.3s ease, transform 0.2s ease;

}

.btn:hover {

    background-color: var(--cor-acento-hover);

    transform: scale(1.02);

}

 

/* 6. Estilos do Rodapé (Adição de um estilo de link) */

.rodape {

    margin-top: 30px;

    font-size: 0.8rem;

    color: var(--cor-texto-secundario);

}

.rodape a {
    color: #000000;
    margin-top: 10px;

}


.rodape p {
    color: #000000;
    margin-top: 10px;

}

.nav-link , a{

    color: #0037ff;
    font-size: 0.9rem;
    text-decoration: none;

    font-weight: bold;

}

.nav-link:hover {
    color: #0037ff;
    text-decoration: underline;

}