/* Estilos gerais */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    padding-top: 80px; /* Ajuste para compensar a altura do cabeçalho fixo */
}

header {
    background-color: rgba(156, 39, 176, 0.8); /* Roxo clarinho translúcido */
    color: #fff;
    padding: 10px 20px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000; /* Garantir que o cabeçalho fique sobre outros elementos */
    text-align: center; /* Centraliza o conteúdo do cabeçalho */
}

header .container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}

.title, .subtitle {
    margin: 0;
    text-align: center; /* Garante que o texto esteja centralizado */
    font-family: 'Great Vibes', cursive; /* Fonte cursiva */
    color: #fff; /* Cor do texto */
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; /* Borda preta fina */
}

.title {
    font-size: 2.5em; /* Diminuído de 3em para 2.5em */
    font-family: 'Great Vibes', cursive; /* Mantém a fonte cursiva */
    color: #fff;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3); /* Sombra suave para destacar */
    letter-spacing: 2px; /* Ajusta o espaçamento entre as letras */
    margin-bottom: 0;
    text-align: center;
}

.subtitle {
    font-size: 1.5em; /* Diminuído de 1.8em para 1.5em */
    font-family: 'Great Vibes', cursive; /* Mesma fonte cursiva para consistência */
    color: rgba(255, 255, 255, 0.8); /* Cor mais suave para não competir com o título principal */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Sombra leve para dar destaque */
    letter-spacing: 1px; /* Espaçamento menor para o subtítulo */
    text-align: center;
    margin-top: -10px; /* Aproxima do título principal para parecer uma unidade */
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* Centraliza os itens do menu */
}

nav ul li a {
    font-family: 'Dancing Script', cursive; /* Fonte cursiva */
    font-size: 1.2em; /* Mantendo o tamanho original */
    color: #ffffff; /* Cor branca para contraste com o fundo roxo */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4); /* Sombra sutil para destacar no menu */
    padding: 10px 20px;
    transition: color 0.3s ease, transform 0.3s ease; /* Suave transição ao passar o mouse */
    text-decoration: none; /* Remove o sublinhado padrão */
}

nav ul li a:hover {
    color: #e0b3ff; /* Cor levemente mais clara ao passar o mouse */
    transform: scale(1.05); /* Leve aumento de tamanho para interatividade */
}

.hero {
    margin-top: 80px; /* Espaço para o header fixo */
    background-image: url('imagem-destaque.jpg'); /* Substitua pela imagem de destaque */
    background-size: cover;
    background-position: center;
    color: hsl(0, 2%, 9%);
    height: 400px; /* Ajuste a altura conforme necessário */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-content {
    max-width: 800px;
}

.hero h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

.hero p {
    font-size: 1.2em;
}

section {
    padding: 60px 20px; /* Ajusta o padding */
    text-align: center;
}

/* Seção Portfolio */
.portfolio {
    padding-top: 20px; /* Reduzi o espaço acima da galeria */
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.gallery img {
    width: 300px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Seção Contato */
#contact {
    background-color: #f5f5f5;
    padding: 60px;
    text-align: center;
}

.contact-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.contact-icons a {
    display: flex;
    align-items: center;
}

.contact-icons img {
    width: 50px;
    height: 50px;
}

.contact-icons p {
    margin-top: 20px;
    font-size: 18px;
    color: #333;
}

/* Rodapé */
footer {
    background-color: #4a3f73;
    color: white;
    padding: 20px;
    text-align: center;
}




/* Adicione esse CSS ao existente para a página de serviços */
.services {
    padding: 80px 20px; /* Ajusta o padding para não ficar grudado no cabeçalho */
    background-color: #f5f5f5;
    text-align: center;
}

.services h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

.services ul {
    list-style-type: none;
    padding: 0;
}

.services li {
    font-size: 1.2em;
    margin: 10px 0;
}

.services p {
    font-size: 1.2em;
    margin-top: 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Ajuste para a página de portfólio */
/* Ajuste para a página de portfólio */
/* Ajuste para a página de portfólio */
.portfolio {
    padding: 100px 20px; /* Adiciona um espaçamento adequado abaixo do cabeçalho */
    background-color: #f5f5f5;
    text-align: center;
}

.portfolio h2 {
    font-family: 'Great Vibes', cursive; /* Fonte cursiva */
    font-size: 2.5em;
    margin-bottom: 20px;
}

.portfolio .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Três colunas iguais */
    gap: 15px; /* Espaço entre as fotos */
    justify-content: center; /* Centraliza o grid */
    margin: 0 auto; /* Centraliza o grid dentro da seção */
}

.portfolio .gallery .gallery-item {
    position: relative;
    overflow: hidden; /* Garante que a imagem não ultrapasse o contêiner */
    text-align: center; /* Centraliza o texto */
}

.portfolio .gallery img {
    width: 100%; /* Garante que a imagem preencha a largura do contêiner */
    height: 200px; /* Define uma altura fixa para as imagens */
    object-fit: cover; /* Faz com que a imagem cubra o contêiner, mantendo a proporção */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.portfolio .gallery h3 {
    margin-top: 10px;
    font-size: 1.2em;
    font-family: 'Great Vibes', cursive; /* Fonte cursiva para os títulos */
}


.Instagramport {
    text-align: center;
}

.txt {
    text-align: center;
    color: gold;
}