/* * --- FORMATION SECTION --- * */

#header-formation { /** Container do header*/
  text-align: center;
}

#header-formation h1 { /** Título do header*/
  font-size: 42px;
  font-weight: 400;
}

#header-formation p { /** Parágrafo do header*/
  font-size: 17.5px;
  color: #fcfcfc6b;
}

.academic-history-section { /** Container da história acadêmica*/
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
  margin-top: 42px;
  max-width: 1046px;
  margin: 0 auto;
}

/*! INICIO TIMELINE !*/

.timeline-section {
  position: relative;
  padding-left: 16px;
  margin-top: 40px;
}

.timeline-item { /** Item da timeline*/
  display: flex;
  align-items: flex-start;
  position: relative;
  margin-bottom: 42px;
}

.timeline-marker { /** Marker da timeline*/
  position: relative;
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline-year { /** Ano da timeline*/
  background: white;
  color: black;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.8em;
  font-weight: bold;
  margin-bottom: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.timeline-dot { /** Dot da timeline*/
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
  z-index: 2;

  display: flex;
  align-items: flex-start;
  position: relative;
  margin-bottom: 60px;
}

.timeline-line { /** Linha da timeline*/
  position: absolute;
  top: 20px;
  bottom: -148px;
  width: 4px;
  background: linear-gradient(to bottom, #ffffff33, #ffffff88, #ffffff33);
  z-index: 1;
}
.timeline-line-last { /** Última linha da timeline*/
  position: absolute;
  top: 20px;
  bottom: -90px;
  width: 4px;
  background: linear-gradient(to bottom, #ffffff33, #ffffff88, #ffffff33);
  z-index: 1;
}
/*!  FINAL TIMELINE !*/

.academic-card { /** Card da história acadêmica */ 
  background-color: #edeeef;
  border-radius: 20px;
  padding: 22px;
  width: 700px;
  height: 191px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  /* gap: 10px; */
  transition: transform 0.3s ease, box-shadow 0.6s ease;
  margin-bottom: 0;
}

.academic-card:hover { /** Hover do card da história acadêmica*/
  transform: scale(1.04);
}

.academic-card-header { /** Cabeçalho do card da história acadêmica*/
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.formation-duration { /** Duração do curso*/
  color: #757575;
  font-size: 0.8em;
  background-color: #f3f4f6;
  padding: 2px 8px;
  border-radius: 20px;
}

.academic-title { /** Título do curso*/
  color: #000000;
  font-size: 14px;
  font-weight: 400;
  margin: 0 0 5px 0;
  line-height: 1.3;
  /* margin-bottom: 10px; */
}

.academic-company { /** Empresa do curso*/
  color: #525252;
  font-size: 0.9em;
  margin: 0;
}

.academic-TCC { /** TCC do curso*/
  display: flex;
  align-items: center;
  gap: 10px;
  color: #505661c2;
  font-size: 0.7em;
  margin-bottom: 13px; /* Espaço antes do botão */
}

.academic-description { /** Descrição do curso*/
  display: flex;
  align-items: center;
  gap: 10px; /* Espaçamento entre ícone e texto */
  color: #364153;
  font-size: 0.9em;
  margin-top: 30px;
  margin-bottom: 13px; /* Espaço antes do botão */
}

/** MERITS SECTION **/

.merits-section { /** Container das qualidades*/
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
  margin-top: -26px;

}

/** Estilo para cada item de conquista (o card individual) **/
.merits-item { /** Item da qualidade*/
  background-color: #edeeef; 
  border-radius: 20px; 
  padding: 30px 40px;
  text-align: center; 
  width: 245px; /* Largura fixa para cada card (ajustar se necessário) */
  height: 119px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra suave */
  display: flex;
  flex-direction: column;
  align-items: center; 
  justify-content: space-between; 
}

.merits-item h3 { /** Título da qualidade*/
  color: #333; 
  font-size: 1em; 

  font-weight: 500;
}

.merits-item p { /** Parágrafo da qualidade*/
  color: #555; 
  font-size: 1.2em; 

  margin-top: 20px;
}