body, html {
    height: 100%;
    background-image: url('img/home.jpeg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: sans-serif;
    margin: 0;
    position: relative;
    animation: fadeIn 1s ease-in;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }}

h1, p {
    color: rgb(234, 242, 241);
    padding: 10px;
    margin-left: 30px;
    
}

div {
    text-align: center;
}

h2 {
    color: white;
    font-size: 50px;
    
    padding: 10px 30px;
}

header {
    position: absolute;
    top: 20px;
    right: 20px;
}

button {
  font-size: 18px;
  font-weight: bold;
  color: white; /* Cor base das letras */
  background-color: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  letter-spacing: 1px;
  transition: color 0.3s ease, transform 0.3s ease, filter 0.3s ease; /* Transições suaves */
    
}

button:hover {
    color: #8a8888fe; /* Cor suave ao passar o mouse */
    transform: scale(1.1); /* Leve aumento de tamanho */
    filter: brightness(1.5); /* Efeito de brilho */
}

button.loaded::before {
    opacity: 1;
    transform: scale(1);
  }

.signup-button {
    background-color: #007bff; /* Cor azul */
    color: white; /* Texto branco */
    padding: 30px 45px; /* Aumentando o tamanho do botão */
    font-size: 20px; /* Aumentando o tamanho da fonte */
    border: none; /* Sem borda */
    border-radius: 10px; /* Bordas arredondadas */
    cursor: pointer; /* Muda o cursor ao passar o mouse */
    margin-top: 70px;/* Movendo 5 cm para baixo */
    transition: background-color 0.3s transform 0.3s; /* Transição suave para a cor de fundo */
    margin-left: 50px;
    
}

.signup-button:hover {
    background-color: #0056b3; /* Cor de fundo ao passar o mouse */
    transform: scale(1.1);
}


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600&display=swap');

:root {
    --color-neutral-0: #2c069f;
    --color-neutral-10: #041555;
    --color-neutral-30: #f7f4f2;
    --color-neutral-40: #baceca;
}

* {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    letter-spacing: 1px;
}

main {
    height: 80vh; /* Ajustar para dar espaço ao footer */
}

footer {
    width: 100%;
    color: white;
    background-color: #2c62a7;
    padding: 0px 0;
    
   
}

footer h3{

    color: white;
}


.footer-link {
    text-decoration: none;
    width: 50px;
   
}

#footer_content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 40px 40px;
    margin-top: -20px; /* Ajuste para mover o conteúdo para cima */
    
 
}

.footer-block h4 {
    margin-bottom: 0.75rem;
}

#footer_social_media {
    display: flex;
    gap: 1rem;
    margin-left: 175px;
    margin-top: 20px;
   
}

#footer_social_media .footer-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    width: 2.5rem;
    color: var(--color-neutral-40);
    border-radius: 50%;
    /*transition: all 0.4s;*/
}

#footer_social_media .footer-link i {
    font-size: 1.25rem;    
}

#footer_social_media .footer-link:hover {
    opacity: 0.8;
    transform: rotate(360deg);
}

#instagram {
    background: linear-gradient(#7f37c9, #ff2992, #ff9807);
}

#facebook {
    background-color: #4267b3;
}

#whatsapp {
    background-color: #25d366;
}

.footer-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none;
    margin-right: 0; /* Remover margem à direita para layout responsivo */
    margin-top: 10px;
}

.footer-list .footer-link {
    color: var(--color-neutral-30);
    transition: all 0.4s;
}

.footer-list .footer-link:hover {
    color: #eae5ff;
}

#footer_subscribe p {
    color: var(--color-neutral-30);
}

#input_group {
    display: flex;
    align-items: center;
    background-color: var(--color-neutral-0);
    border-radius: 4px;
}

#input_group input {
    all: unset;
    padding: 0.75rem;
    width: 100%;
}

#input_group button {
    background-color: #7f37c9;
    border: none;
    color: var(--color-neutral-40);
    padding: 0px 1.25rem;
    font-size: 1.125rem;
    height: 100%;
    border-radius: 0px 4px 4px 0px;
    cursor: pointer;
    transition: all 0.4s;
}

#input_group button:hover {
    opacity: 0.8;
}

#footer_copyright {
    display: flex;
    justify-content: center;
    background-color: var(--color-neutral-0);
    font-size: 0.9rem;
    padding: 1.5rem;
    font-weight: 100;
}

@media screen and (max-width: 1200px) {
    #footer_content {
        grid-template-columns: repeat(3, 1fr);
        padding: 2rem; /* Ajustar o padding */
    }
}

@media screen and (max-width: 900px) {
    #footer_content {
        grid-template-columns: repeat(2, 1fr);
        padding: 1.5rem; /* Ajustar o padding */
    }
    .footer-list {
        margin-right: 0;
        /* Remover margem para dispositivos menores */
    }
}

@media screen and (max-width: 600px) {
    #footer_content {
        grid-template-columns: 1fr; /* Coluna única */
        padding: 1rem; /* Ajustar o padding */
    }

    .signup-button {
        padding: 20px 30px; /* Ajustar o tamanho do botão */
        font-size: 1.2rem; /* Ajustar a fonte */
    }
}
.imagemclorida{
    filter: brightness(0) saturate(100%) sepia(100%) hue-rotate(180deg) brightness(1.2);
}
.services {
    text-align: center;
    margin-top: 50px; /* Distância do título para os serviços */
    color: black;
}

.services-container {
    display: flex;             /* Usando flexbox */
    justify-content: center;   /* Centraliza as colunas horizontalmente */
    gap: 30px;                 /* Espaço entre os itens */
    flex-wrap: wrap;           /* Permite que os itens se ajustem em várias linhas, se necessário */
    padding: 20px;
}

.service {
    text-align: center;        /* Centraliza o texto dentro de cada serviço */
    max-width: 450px;          /* Limita a largura de cada bloco de serviço */
    flex: 1 1 30%;             /* Garante que as colunas não ultrapassem o tamanho e fiquem flexíveis */
}

.service img {
    width: 100%;               /* Faz com que as imagens tenham 100% da largura do container */
    height: auto;              /* Mantém a proporção da imagem */
    max-width: 500px;          /* Limita o tamanho máximo das imagens */
    margin-bottom: 10px;       /* Espaço entre a imagem e o texto */
}


/* Efeito de zoom nas imagens */
.zoomable {
    transition: transform 0.2s ease, filter 0.2s ease;
    cursor: pointer; /* Muda o cursor para indicar que é interativo */
    border-radius: 15px;

}



/* Quando o mouse passar por cima da imagem */
.zoomable:hover {
    transform: scale(0.9); /* Aumenta a imagem */
    filter: brightness(1.2); /* Ajusta o brilho da imagem para um efeito visual mais impactante */
}
 
.service p{
    color: black;
}


footer h3{
    padding-left: 5cm;
    display: flex;
    height: 50px;
}


/* Estilo para o título 'Planejamento Patrimonial' (h4) */
.service h4 {
    font-size: 28px; /* Aumenta o tamanho da fonte */
    color: #DAEDF5; 
    
}

/* Estilo para o título 'Gestão de Investimentos' (h5) */
.service h5 {
    font-size: 26px; /* Aumenta o tamanho da fonte */
    color: #DAEDF5; 
}

/* Estilo para o título 'Consultoria Financeira' (h6) */
.service h6 {
    font-size: 24px; /* Aumenta o tamanho da fonte */
    color: #DAEDF5; /
    
}
 .black-test{
    color: black;
 }

 .services h2 {
   
    color: white; /* Cor padrão */
    transition: color 0.3s ease; /* Adiciona uma transição suave */
}

.services h2:hover {
    color: #b8b3af; /* Cor branca forte ao passar o mouse */
    transform: scale(1.1);
}

/* Estilo para o título h3 (O que a FinUp pode oferecer?) */
h3 {
    text-align: center; /* Centraliza o título */
    color: black; /* Cor do título para branco */
    font-size: 28px; /* Tamanho reduzido do título */
    font-weight: bold; /* Deixa o título em negrito */
    margin-top: 30px; /* Adiciona um espaço no topo */
    margin-bottom: 15px; /* Menos espaço abaixo do título */
}

/* Estilo para o parágrafo .finup-text */
.finup-text {
    color: black; /* Cor do texto do parágrafo em branco */
    text-align: justify; /* Justifica o texto */
    line-height: 1.4; /* Menos espaçamento entre as linhas */
    font-size: 16px; /* Tamanho ajustado da fonte */
    max-width: 800px; /* Limita a largura do texto para melhor leitura */
    margin: 0 auto 20px; /* Centraliza o parágrafo horizontalmente */
}

/* Estilizando o texto em negrito dentro do parágrafo */
.finup-text strong {
    color: #1a73e8; /* Cor do texto em negrito */
}