*{
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Arial', sans-serif;
  background: #f9f9f9;
  color: #333;
  margin: 0;
  
}

header {
  display: flex;
  flex-direction: column; /* organiza em coluna */
  align-items: center;    /* centraliza horizontalmente */
  justify-content: center;/* centraliza verticalmente */
  background: url("header.jpg") no-repeat center center;
  background-size: cover;
  color: white;
  text-align: center;
  padding: 3rem 3rem;
  margin-top: 1rem;
  
}
header {
  text-align: center; /* mantém título e subtítulo centralizados */
}

header .dev-info {
  font-size: 0.9rem;        /* letra menor */

  text-align: left;         /* força alinhamento à esquerda */
  background: none;         /* sem fundo */
  color: #e5dddd;              /* cor discreta */
  font-style: italic; /* deixa em itálico */
  display: block;           /* ocupa toda a largura */
  width: 100%;              /* garante espaço para alinhar */
}
header h1, header p {
  background-color: rgba(0,0,0,0.5); /* fundo semitransparente para contraste */
  border-radius: 5px;
  margin: 0.5rem 0;
}

main {
  padding: 2rem 3rem;
  }

h2 {
  margin-top: 1rem;
  color: #3B3B3B;
  margin-bottom: 1rem;
}
.timeline {
  position: relative;
  margin: 2rem auto;
  padding: 2rem 0;
  width: 100%; /* controla a largura total */
}

.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #333; /* grafite */
  transform: translateX(-50%);
}

.timeline-item {
  position: relative;
  width: 45%;
  padding: 1rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  margin: 2rem 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* animação suave */
}

.timeline-item:hover {
  transform: scale(1.05); /* aumenta em 5% */
  box-shadow: 0 6px 12px rgba(0,0,0,0.2); /* sombra mais forte no hover */
}


.timeline-item:nth-child(odd) {
  left: 0; /* itens ímpares à esquerda */
}

.timeline-item:nth-child(even) {
  left: 53%; /* itens pares à direita */
}

.timeline-item::before {
  content: '';
  position: absolute;
  top: 50%;                      /* coloca no meio vertical da caixa */
  transform: translateY(-50%);   /* ajusta para centralizar exatamente */
  width: 15px;
  height: 15px;
  background: #333;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #333;
}

.timeline-item:nth-child(odd)::before {
  right: -32px;   /* marcador encostado na linha central */
}

.timeline-item:nth-child(even)::before {
  left: -32px;    /* mesmo valor para simetria */
}


.timeline-item h3 {
  margin-bottom: 0.5rem;
  color: #0066cc;
}

.timeline-item p {
  margin-bottom: 0.5rem;
}
/* Responsividade para telas menores */
@media screen and (max-width: 768px) {
  .timeline {
    width: 100%;
    padding-left: 0;
  }

  .timeline::before {
    left: 20px; /* linha encostada à esquerda */
  }

  .timeline-item {
    width: calc(100% - 60px);
    left: 40px !important; /* força todos os itens para a direita da linha */
  }

  .timeline-item::before {
    left: -30px; /* marcador sempre à esquerda */
    right: auto;
  }
}
footer {
  background: #3B3B3B;   /* grafite */
  color: #fff;           /* texto branco */
  text-align: center;    /* centraliza o conteúdo */
   margin-top: 1rem;
}
/* Importando uma fonte bonita do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap');

.site-footer {
  background-color: #111;       /* fundo escuro para contraste */
  color: #f1f1f1;               /* texto claro */
  text-align: center;           /* centralizar frase */
  padding: 20px;
  font-family: 'Playfair Display', serif; /* fonte elegante */
  font-size: 1.2rem;
  letter-spacing: 1px;
}

.site-footer p {
  margin: 0;
  font-style: italic;           /* dá um charme extra */
}


/* CSS */
.whatsapp-link {
  display: inline-block;
  padding: 30px 60px 30px 20px; /* espaço para o ícone */
  background: url('https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg') 
              no-repeat right center;
  background-size: 70px; /* tamanho do ícone */
  color: #25D366; /* cor característica do WhatsApp */
  text-decoration: none;
  font-weight: bold;

}
#backToTop {
  position: fixed;       /* fixa na tela */
  bottom: 70px;          /* distância da borda inferior */
  right: 20px;           /* distância da borda direita */
  display: inline-block;;         /* começa escondido, JS controla */
  padding: 10px 20px 15px 20px;
  background: #3B3B3B;
  color: #fff;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 20px; 
  z-index: 1000;         /* garante que fique acima de outros elementos */
}