/* 1. ESTILOS GLOBAIS E RESET                        */


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*Inserindo variaveis de cores para facilitar a manutenção do código*/

:root {

    --cor-primaria: #007bff;

    --cor-escura: #343a40;

    --cor-clara: #f8f9fa;

    --cor-branca: #ffffff;

    --cor-texto: #333;

}

 

/* A MÁGICA DO SCROLL SUAVE */

html {

    scroll-behavior:smooth;/* Suaviza a rolagem ao clicar em links internos */

}

 

body {

    font-family: Arial, sans-serif;/* Fonte padrão */

    margin: 0;/* Remover margens padrão */

    line-height: 1.6;/* Espaçamento entre linhas */

}

.container {

    max-width: 1100px;/* Largura máxima para o conteúdo */

    margin: 0 auto;/* Centralizar horizontalmente */

    padding: 0 20px;/* Espaçamento interno horizontal */

}

.section-title {

    text-align: center;/* Centralizar o título */

    font-size: 2.2rem;/* Tamanho da fonte */

    color: transparent;/* Cor do título */

    margin-bottom: 40px;/* Espaçamento abaixo do título */
    

}

section {

    padding: 60px 0; /* Espaçamento vertical padrão entre as seções */

}



/* 2. HEADER E NAVEGAÇÃO (DO PROJETO 4)              */

.main-header {

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

    padding: 15px 0; /* Espaçamento vertical */

    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.603); /* Sombra sutil */

    position: sticky; /* Cabeçalho que "gruda" no topo */

    top: 0;/* Fica no topo da página */

    z-index: 1000;/* Garantir que fique acima de outros elementos */

}

.main-header .container { 
    display: flex; 
    justify-content: space-between;
     align-items: center; }

.logo { 
    font-size: 1.8rem;
     font-weight: bold; color: var(--cor-escura);
      text-decoration: none; }

.main-nav ul { 
    margin: 0;
     padding: 0; 
     list-style: none;
      display: flex; gap: 25px; 
      
    }

.main-nav a { 
    text-decoration: none; 
    color: #555; 
    font-weight: 500; 
}

.main-nav a:hover { 
    color: var(--cor-primaria);
 }

 

/* 3. SEÇÃO HERO (DO PROJETO 5)                      */


.hero-section {

    background-color: transparent;

    color: var(--cor-escura);

    min-height: 60vh; /* Altura um pouco menor para se adequar a uma página com mais conteúdo */

    display: flex;/* Usar Flexbox para centralizar o conteúdo */

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 40px 20px;

    background-image: url(/assets/gif.gif);
        background-size: cover; 
         color: var(--cor-branca); 
        animation: textAnimation 3s infinite alternate;

}

.hero-title { 
    font-size: 3rem;
     margin-bottom: 20px;
     }/* Título maior para destaque */

.hero-subtitle { 
    font-size: 1.25rem; 
    margin-bottom: 40px; 
}

.hero-button { 
    background-color: var(--cor-primaria);
     color: var(--cor-branca);
      padding: 15px 30px; 
      text-decoration: none;
       border-radius: 5px; 
       font-weight: bold; }


/* 4. SEÇÃO GALERIA (DO PROJETO 6)                   */


.gallery-section { /* Seção da galeria */
    background-color: var(--cor-clara ); /* Fundo claro para a galeria */
}

.gallery-grid { /* Layout em grid para a galeria */
    display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;  
     }

.gallery-item { /* Estilo para cada item da galeria */
    border-radius: 8px; 
    overflow: hidden; 

}

.gallery-item img { /* Estilo para as imagens da galeria */
    
    width: 100%;
     height: 100%;
      object-fit: cover;
       display: block; 
       transition: transform 0.3s ease;}/* Imagem responsiva com efeito de zoom */

 
.gallery-item img:hover { 
    transform:rotate(55deg); 
    }/* Efeito de zoom ao passar o mouse */

/* 5. SEÇÃO DEPOIMENTOS (DO PROJETO 8)               */



.testimonials-grid { display: flex; 
    flex-wrap: wrap; /* Permitir que os depoimentos quebrem linha se necessário */
    justify-content: center;/* Centralizar os depoimentos */
    gap: 30px; /* Grid flexível para os depoimentos */
}

.testimonial-card {
     background-color: var(--cor-branca);/* Fundo branco */
      padding: 30px;/* Espaçamento interno */
       border-radius: 8px;/* Bordas arredondadas */
        box-shadow: 0 4px 15px rgba(0,0,0,0.07);/* Sombra sutil */
         text-align: center; flex: 1 1 300px;/* Flexível para responsividade */
          max-width: 350px; /* Cartão de depoimento */
        }

.testimonial-avatar { 
    width: 80px;
     height: 80px;
      border-radius: 50%; 
      object-fit: cover; 
      margin-bottom: 20px;/* Estilo para a imagem do avatar */
     }

.testimonial-card blockquote { 
    font-style: italic; 
    color: #6c757d;
     margin: 0; 
    }/* Estilo para o texto do depoimento */

.testimonial-card cite { 
    display: block; 
    margin-top: 20px;
     font-weight: bold; 
     font-style: normal; 
    
    }

 



/* 6. SEÇÃO CONTATO (DO PROJETO 7)                   */



.contact-section { 
    background-color: var(--cor-clara); 
}

.form-container { 
    background-color: var(--cor-branca);
     padding: 40px; 
     border-radius: 8px;
      max-width: 500px;
       margin: 0 auto;
    }

.form-group { 
    margin-bottom: 20px; 
    text-align: left; 
}

.form-group label {
     display: block; 
     margin-bottom: 8px;
     }

.form-group input {
     width: 100%; 
     padding: 12px;
      border: 1px solid #ccc; 
      border-radius: 4px; 
    }

.submit-button { width: 100%; 
    padding: 15px; 
    background-color: var(--cor-primaria); 
    color: white;
     border: none;
      border-radius: 4px; 
      font-size: 1.1rem; 
      cursor: pointer; 
    }

 



/* 7. RODAPÉ                                         */



.main-footer {

    text-align: center;

    padding: 20px;

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

    color: var(--cor-clara);

      background-image: url(/assets/gif.gif);
        background-size: cover; 
         color: var(--cor-branca); 
        animation: textAnimation 3s infinite alternate;

}

.section-title{
color: var(--cor-escura);
}