@import url("https://fonts.googleapis.com/css2?family=Atomic+Age&family=VT323&family=Wallpoet&display=swap");
@import url("https://fonts.googleapis.com/css2?family=VT323&family=Wallpoet&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Atomic+Age&family=Orbitron:wght@400..900&family=Syne+Mono&family=VT323&family=Wallpoet&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Atomic+Age&family=Julius+Sans+One&family=Orbitron:wght@400..900&family=Syne+Mono&family=VT323&family=Wallpoet&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  border: none;
  outline: none;
  scroll-behavior: smooth;
}
:root {
  --bg-color: #131313;
  --second-bg-color: #131313;
  --text-color: white;
  --main-color: #FB7E1B;
  --font-detalhes: "VT323", monospace;
  --font-segundodetalhes: "Atomic Age", system-ui;
}
html {
  font-size: 60%;
  overflow-x: hidden;
}
body {
  background: var(--bg-color); 
  color: var(--text-color); 
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden; */
  /* width: 100%;
        height: 100%; */
}
#particles-js {
  /* position: absolute; */
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: -100;
  top:0;
  left:0;
}
  /* width: 100%;
  height: 100%;
  display: table; 
  position: absolute;
  box-sizing: 100%; */ */
  /* overflow: hidden; */
  /* z-index: -1; */
  /* top: 0;
  left: 0; */
  /* background-size: cover;  */
  /* background-position: 100% 100%;  */
/* } */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  padding: 4rem 12% 4rem;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-family: "VT323", monospace;
  font-style: normal;
  font-weight: 400;
  font-size: 2.5rem;
  color: var(--text-color);
  font-weight: 800;
  cursor: pointer;
  transition: 0.4s ease;
  text-shadow: #FB7E1B 0.1em 0.3em;
  padding-left: 2%;
  padding-top: 2%;
}
.logo:hover {
  transform: scale(1.1);
}
.logo span {
  text-shadow: 0 0 25px var(--main-color);
}
.navbar {
  display: flex;
  /* Organiza os itens (links) em linha usando flexbox */
  justify-content: end;
  /* Alinha os links ao final (direita) do contêiner */
  padding-right: 0%;
  /* Adiciona espaçamento à direita da barra */
}

.navbar .logo {
  margin-right: auto;
  /* Move a logo para a extrema esquerda */
}

.logo-img {
  width: 60px;
  /* Define a largura da logo */
  height: auto;
  /* Mantém a proporção */
  cursor: pointer;
  /* Adiciona o cursor de "mãozinha" */
}

.navbar .logo img {
  border: none !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* Estilização da barra de navegação */
.navbar {
  display: flex;
  /* Organiza os itens (links) em linha usando flexbox */
  justify-content: end;
  /* Alinha os links ao final (direita) do contêiner */
  padding-right: 2%;
  /* Adiciona espaçamento à direita da barra */
  align-items: center;
  /* Alinha os itens verticalmente ao centro */
  /* background: rgba(0, 0.1, 0.2, 0.3); */
  /* Fundo translúcido removido */
}

/* Estilização da logo dentro da barra de navegação */
.navbar .logo {
  margin-right: auto;
  /* Move a logo para o início (esquerda) da barra */
  border: none;
  border-bottom: none;
}

.navbar .logo img {
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Estilização dos links dentro da barra de navegação */
.navbar a {
  font-family: "VT323", monospace;
  /* Define a fonte usada nos links */
  font-style: normal;
  /* Define o estilo da fonte como normal */
  font-weight: 400;
  /* Define o peso da fonte como regular */
  font-size: 3rem;
  /* Define o tamanho da fonte */
  color: var(--text-color);
  /* Aplica a cor do texto definida como variável */
  margin-left: 4rem;
  /* Adiciona espaçamento entre os links */
  transition: 0.3s ease;
  /* Adiciona uma transição suave para mudanças de estilo */
  border-bottom: 1px solid transparent;
  /* Cria uma borda inferior invisível para o efeito de destaque */
}

/* Remove completamente a borda ou estilos aplicados à logo */
.navbar .logo img {
  border: none !important;
  /* Remove bordas */
  border-bottom: none !important;
  /* Garante a remoção da borda inferior */
  margin-bottom: 0 !important;
  /* Elimina margens inferiores */
  padding-bottom: 0 !important;
  /* Elimina qualquer padding inferior */
  box-shadow: none !important;
  /* Remove sombras que podem parecer bordas */
  display: inline-block;
  /* Garante que o comportamento seja consistente */
  outline: none !important;
  /* Remove qualquer contorno */
  background: transparent !important;
  /* Remove qualquer fundo que possa simular uma linha */
}

/* Estilo ao passar o mouse (hover) ou no link ativo */
.navbar a:hover,
.navbar a.active {
  color: var(--main-color);
  /* Altera a cor do texto para a cor principal */
  border-bottom: 3px solid var(--main-color);
  /* Mostra a borda inferior com a cor principal */
}

/* Certifique-se de que apenas os links recebam a borda inferior */
.navbar a:not(.logo):hover,
.navbar a:not(.logo).active {
  border-bottom: 3px solid var(--main-color);
  /* Aplica borda apenas aos links */
}r-bottom: 3px solid var(--main-color);
}

/* Estilo padrão da navbar */
.navbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 1rem 2rem !important;
  background-color: var(--bg-color) !important;
}

.nav-links {
  display: flex !important;
  gap: 3rem !important;
  list-style: none !important;
}

.nav-links li a {
  text-decoration: none !important;
  color: var(--text-color) !important;
  font-family: "VT323", monospace !important;
  font-size: 3rem !important;
  transition: color 0.3s ease !important;
}

.nav-links li a:hover,
.nav-links li a.active {
  color: var(--main-color) !important;
}

/* Ícone do menu (hambúrguer) */
.menu-icon {
  display: none !important;
  font-size: 3rem !important;
  color: var(--main-color) !important;
  cursor: pointer !important;
}

/* Estilos para dispositivos móveis */
@media (max-width: 768px) {
  .nav-links {
    display: none !important; /* Esconde os links */
    flex-direction: column !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    background-color: var(--bg-color) !important;
    width: 100% !important;
    padding: 2rem !important;
    border-top: 2px solid var(--main-color) !important;
  }

  .nav-links.active {
    display: flex !important; /* Exibe os links quando ativo */
  }

  .menu-icon {
    display: block !important; /* Exibe o ícone do menu */
  }
}




















































.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--text-color);
  padding: 20px 30px;
  border: 3px solid var(--main-color);
  border-radius: 1.5rem;
  box-shadow: 0 0 30px var(--main-color);
  text-align: center;
  width: 80%;
  max-width: 500px;
}

.modal-content h2 {
  font-family: "VT323", monospace;
  font-size: 3rem;
  margin-bottom: 20px;
  color: var(--main-color);
}

.language-buttons {
  display: flex; /* Habilita o layout Flexbox */
  justify-content: center; /* Centraliza os botões horizontalmente */
  gap: 15px; /* Espaçamento uniforme entre os botões */
  flex-wrap: nowrap; /* Impede que os botões quebrem para a próxima linha */
}

.language-buttons button {
  font-family: "VT323", monospace;
  font-size: 1.8rem;
  color: var(--text-color);
  background: var(--main-color);
  border: 2px solid transparent;
  border-radius: 2rem;
  padding: 10px 20px;
  margin: 10px 0; /* Espaçamento vertical entre os botões */
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

.language-buttons button:hover {
  transform: scale(1.1);
  box-shadow: 0 0 15px var(--main-color);
}

.close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 2rem;
  color: var(--main-color);
  cursor: pointer;
  transition: color 0.3s;
}

.close:hover {
  color: var(--text-color);
}

/* Responsividade para dispositivos menores */
@media (max-width: 768px) {
  .language-buttons {
    flex-direction: column; /* Organiza os botões um abaixo do outro */
    gap: 10px; /* Reduz o espaçamento entre os botões */
  }

  .language-buttons button {
    width: 100%; /* Faz os botões ocuparem toda a largura disponível */
    max-width: 300px; /* Define uma largura máxima */
    margin: 5px auto; /* Centraliza os botões horizontalmente */
  }
}

























.about-me {
  display: flex;
  justify-content: flex-end; /* Alinha o conteúdo à direita */
  align-items: center; /* Centraliza verticalmente */
  padding: 40px 10%; /* Espaçamento interno (ajustável) */
  text-align: right; /* Alinha o texto à direita */
  background-color: transparent; /* Define o fundo como transparente */
}

.about-me-content {
  max-width: 600px; /* Limita a largura do texto */
  font-family: "Bahnschrift", sans-serif; /* Mesma fonte da seção anterior */
  color: var(--text-color); /* Cor do texto */
}

.about-me h1 {
  font-size: 4rem; /* Tamanho do título */
  margin-bottom: 20px; /* Espaçamento entre o título e o texto */
  color: var(--main-color); /* Cor de destaque para o título */
}

.about-me p {
  font-size: 1.8rem; /* Tamanho do texto */
  line-height: 1.6; /* Espaçamento entre linhas */
}



















#menu-icon {
  font-size: 3.6rem;
  color: var(--main-color);
  display: none;
}

.home {
  /* width: 100px; */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15rem;
  width: 100vw;
  height: 100vh;
}
.home-content {
  font-family: "Bahnschrift", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  text-align: left;
  justify-content: center;
  margin-top: 3rem;
  padding-left: 2%;
 
}

span {
  color: var(--main-color);
}
.logo span {
  color: var(--main-color);
}
.home-content h3 {
  margin-bottom: 2rem;
  margin-top: 1rem;
  font-size: 3.5rem;
}

.home-content h1 {
  font-size: 7rem;
  font-weight: 700;
  margin-top: 1.5rem;
  line-height: 1;
}
.home-img {
  border-radius: 0%;
  padding-right: 6%;
  padding-bottom: 8%;
}
@media (max-width: 768px) {
  .home-img {
    display: flex; /* Mantém o Flexbox para alinhamento */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente dentro do contêiner */
    margin: 0 auto; /* Garante que a imagem esteja centralizada no contêiner */
    padding-top: 50%;
  }

  .home-img img {

    display: block; /* Mantém o comportamento como bloco */
    margin: 0 auto; /* Centraliza horizontalmente */
    width: 200px; /* Ajusta o tamanho no mobile */
    height: auto; /* Mantém a proporção da imagem */
    box-shadow: 0 0 25px var(--main-color); /* Preserva o brilho */
    transition: 0.3s ease-in-out; /* Suaviza as transições (hover) */
  }

  .home-img img:hover {
    box-shadow: 0 0 30px var(--main-color), 0 0 60px var(--main-color); /* Intensifica o brilho no hover */
    transform: scale(1.05); /* Aumenta ligeiramente no hover */
  
    
    
  }
}










.home-img img {
  width: 300px; /* Define a largura */
  height: 300px; /* Define a altura, igual à largura para torná-la quadrada */
  object-fit: cover; /* Garante que a imagem preencha o quadrado sem distorção */
  border: 2px solid var(--main-color); /* Adiciona uma borda */
  box-shadow: 0 0 15px var(--main-color); /* Mantém o efeito de sombra */
  border-radius: 0; /* Remove o arredondamento */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
@media (max-width: 768px) {
  .home-img {
    width: 200px; /* Define a largura */
    height: 200px; /* Define a altura, igual à largura para torná-la quadrada */
      justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente dentro do contêiner */
    margin:  auto; /* Garante que a imagem esteja centralizada no contêiner */
    padding-top: 60%;
    margin-bottom: 15%;
  }
}

.home-img img:hover {
  transform: scale(1.1); /* Adiciona o efeito de zoom */
  box-shadow: 0 0 30px var(--main-color); /* Aumenta o brilho ao passar o mouse */
}
/* Responsividade para mobile */
/* Responsividade para mobile */










.home-content p {
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.8;
  max-width: 1000px;
}
.social-icons a {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 4.5rem;
  height: 4.5rem;
  background: transparent;
  border: 2px solid var(--main-color);
  font-size: 2.5rem;
  border-radius: 50%;
  color: var(--main-color);
  margin: 3rem 1.5rem 3rem 0;
  transition: 0.3s ease-in-out;
}
.social-icons a:hover {
  color: var(--text-color);
  transform: scale(1.3) translateY(-5px);
  box-shadow: 0 0 25px var(--main-color);
  background-color: var(--main-color);
}
.btn {
  position: relative;
  display: inline-block;
  padding: 1rem 2.8rem;
  background: var(--main-color);
  box-shadow: 0 0 25px var(--main-color);
  border-radius: 4rem;
  font-size: 1.6rem;
  color: black;
  border: 2px solid transparent;
  letter-spacing: 0.1rem;
  font-weight: 600;
  transition: 0.3s ease-in-out;
  cursor: pointer;
}
.btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 50px var(--main-color);
}
.btn-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.btn-group a:nth-of-type(2) {
  background-color: var(--bg-color);
  color: var(--main-color);
  border: 2px solid var(--main-color);
  box-shadow: 0 0 25px transparent;
}
.btn-group a:nth-of-type(2):hover {
  box-shadow: 0 0 25px var(--main-color);
  background-color: var(--main-color);
  color: var(--bg-color);
}
.text-animation {
  font-size: 34px;
  font-weight: 600;
  min-width: 280px;
}
.text-animation span {
  position: relative;
}
.text-animation span::before {
  content: "Web Developer";
  color: var(--main-color);
  animation: words 20s infinite;
}
.text-animation span::after {
  content: "";
  background-color: var(--bg-color);
  position: absolute;
  width: calc(100% + 8px);
  height: 100%;
  border-left: 3px solid var(--bg-color);
  right: -8px;
  animation: cursor 0.6s infinite, typing 20s steps(14) infinite;
}
@keyframes cursor {
  to {
    border-left: 2px solid var(--main-color);
  }
}
@keyframes words {
  0%,
  20% {
    content: " WEB DEVELOPER ";
  }
  21%,
  40% {
    content: " WEB DESIGNER";
  }
  41%,
  60% {
    content: " FULL-STACK DEVELOPER ";
  }
  61%,
  80% {
    content: " PRODUCT OWNER ";
  }
  81%,
  100% {
    content: " TECH ENTHUSIAST ";
  }
}
@keyframes typing {
  10%,
  15%,
  30%,
  35%,
  50%,
  55%,
  70%,
  75%,
  90%,
  95% {
    width: 0;
  }
  5%,
  20%,
  25%,
  40%,
  45%,
  60%,
  65%,
  80%,
  85% {
    width: calc(100% + 8px);
  }
}
/* educação */
.education-heading .heading {
  padding: 20px;
  margin-bottom: 20px;
  font-size: 6rem;
  font-family: "VT323", monospace;
  color: var(--text-color);
  text-align: center;
}
/* servoces */
.services-heading .heading {
  padding: 20px;
  margin-bottom: 20px;
  font-size: 6rem;
  font-family: "VT323", monospace;
  color: var(--text-color);
  text-align: center;
}
/* projects */
.projects-heading .heading {
  padding: 20px;
  margin-bottom: 20px;
  font-size: 6rem;
  font-family: "VT323", monospace;
  color: var(--text-color);
  text-align: center;
}

.efeito-education {
  opacity: 0; /* Torna o texto invisível inicialmente */
  transform: translateY(50px); /* Desloca o texto para baixo */
  transition: opacity 0.5s ease, transform 0.5s ease; /* Suaviza a transição */
}




.education h2 {
  margin-bottom: 1rem !important;
  color: var(--text-color) !important;
  font-size: 6rem !important;
  font-family: var(--font-detalhes) !important;
  align-items: center !important;
  margin-left: 44% !important;
}

.circles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}











/* Estilo dos cards com fundo transparente */
.project-card {
  background: rgba(0, 0, 0, 0.5) !important; /* Fundo preto semi-transparente */
  border: 3px solid rgba(238, 238, 238, 0.2) !important; /* Borda com leve transparência */
  border-radius: 2rem !important;
  padding: 2rem !important;
  text-align: center !important;
  transition: transform 0.4s ease, box-shadow 0.4s ease !important;
  color: var(--text-color) !important;
  box-shadow: 0 4px 10px #FB7E1B !important; /* Sombra para destaque */
}
.rating {
  display: flex !important; /* Aplica o layout flexbox */
  justify-content: center !important; /* Centraliza os botões horizontalmente */
  gap: 1rem !important; /* Espaçamento entre os botões */
  flex-wrap: wrap !important; /* Permite quebrar linha caso necessário */
}

.rating .btn {
  margin: 0 !important; /* Remove margens extras dos botões */
  padding: 1rem 2rem !important; /* Ajusta o espaçamento interno dos botões */
  flex: none !important; /* Garante que os botões não se estiquem */
}

/* Imagem dentro dos cards */
.project-card img {
  width: 100% !important;
  border-radius: 1rem !important;
  margin-bottom: 1.5rem !important;
  box-shadow: 0 0 15px var(--main-color) !important;
}

/* Hover nos cards */
.project-card:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 0 30px var(--main-color) !important;
  background: rgba(0, 0, 0, 0.7) !important; /* Fundo mais escuro ao passar o mouse */
  box-shadow: 0 4px 10px #FB7E1B !important; /* Sombra para destaque */
}

/* Título dos cards */
.project-card h3 {
  font-size: 2.5rem !important;
  font-family: "VT323", monospace !important;
  margin-bottom: 1rem !important;
  color: var(--text-color) !important;
}

/* Texto dentro dos cards */
.project-card p {
  font-size: 1.6rem !important;
  font-family: "Inter", sans-serif !important;
  line-height: 1.5 !important;
  margin-bottom: 2rem !important;
  color: var(--text-color) !important;
}

/* Botões dentro dos cards */
.project-card .btn {
  display: inline-block !important;
  padding: 1rem 2rem !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: #000 !important;
  background: var(--main-color) !important;
  border-radius: 2rem !important;
  transition: all 0.3s ease-in-out !important;
  cursor: pointer !important;
  box-shadow: 0 0 15px var(--main-color) !important;
}

.project-card .btn:hover {
  transform: scale(1.1) !important;
  background: #fff !important;
  color: var(--main-color) !important;
  box-shadow: 0 0 30px var(--main-color) !important;
}

/* Container principal dos cards */
.projects-container {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 2rem !important;
  padding: 2rem !important;
}

/* Wrapper para organizar os cards */
.projects-wrapper {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 2rem !important;
  justify-items: center !important;
  align-items: start !important;
}

/* Título geral da seção */
.projects-heading {
  text-align: center !important;
  margin-bottom: 3rem !important;
}

projects-heading h2 {
  font-size: 6rem !important;
  font-family: "VT323", monospace !important;
  color: var(--text-color) !important;
  text-shadow: none !important; /* Remove o efeito de luz */
}

/* Efeitos visuais */
.effect-project1,
.effect-project2,
.effect-project3 {
  transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}

.effect-project1:hover,
.effect-project2:hover,
.effect-project3:hover {
  transform: translateY(-15px) !important;
  box-shadow: 0 0 40px var(--main-color) !important;
  background: rgba(0, 0, 0, 0.7) !important;
}

/* Ajuste para responsividade */
@media (max-width: 768px) {
  .projects-wrapper {
    grid-template-columns: 1fr !important;
  }

  .project-card {
    width: 90% !important;
    margin: 0 auto !important;
  }
}












:root {
  --primary-color: #212121; /* Cor primária usada no site */
  --background-color: #111; /* Cor de fundo principal */
  --font: sans-serif; /* Fonte padrão usada no site */
}

* {
  margin: 0; /* Remove margens padrão */
  padding: 0; /* Remove espaçamentos internos padrão */
  box-sizing: border-box; /* Inclui bordas e padding no tamanho total do elemento */
}

body {
  background: var(--background-color); /* Define a cor de fundo para o corpo */
  font-family: var(--font); /* Aplica a fonte padrão ao corpo */
  display: flex; /* Usa flexbox para centralizar o conteúdo */
  justify-content: center; /* Centraliza o conteúdo horizontalmente */
  align-items: center; /* Centraliza o conteúdo verticalmente */
  height: 100vh; /* Faz o corpo ocupar 100% da altura da janela */
}

.timeline {
  background: transparent; /* Remove qualquer fundo sólido */
  margin: 20px auto; /* Adiciona espaçamento vertical e centraliza horizontalmente */
  padding: 20px; /* Adiciona espaçamento interno */
  display: flex; /* Usa flexbox para organizar os elementos */
  flex-direction: column; /* Organiza os elementos em coluna */
  align-items: center; /* Centraliza os itens horizontalmente */
  width: 90%; /* Faz a timeline ocupar toda a largura disponível */
  max-width: 800px; /* Define uma largura máxima */
}

.card {
  position: relative; /* Define a posição relativa para manipular os pseudo-elementos (::before) */
  max-width: 980px; /* Define a largura máxima do card */
  width: 100%; /* Faz o card ocupar toda a largura do contêiner */
}

/* Padding alternado baseado em elementos ímpares */
.card:nth-child(odd) {
  padding: 30px 0 30px 30px; /* Adiciona padding na esquerda e espaçamentos internos */
}

/* Padding alternado baseado em elementos pares */
.card:nth-child(even) {
  padding: 30px 30px 30px 0; /* Adiciona padding na direita e espaçamentos internos */
}

/* Pseudo-elemento antes de cada card */
.card::before {
  content: ""; /* Insere conteúdo vazio */
  position: absolute; /* Posiciona o pseudo-elemento relativo ao card */
  width: 50%; /* Define a largura do pseudo-elemento */
  border: solid #FB7E1B; /* Adiciona uma borda com a cor definida */
}

/* Define as bordas para cards ímpares */
.card:nth-child(odd)::before {
  left: 0px; /* Alinha o pseudo-elemento à esquerda */
  top: -4.5px; /* Define a distância superior */
  bottom: -4.5px; /* Define a distância inferior */
  border-width: 5px 0 5px 5px; /* Define a largura das bordas */
  border-radius: 50px 0 0 50px; /* Adiciona bordas arredondadas */
}

/* Ajusta o pseudo-elemento em dispositivos menores */
@media only screen and (max-width: 400px) {
  .card:nth-child(odd)::before {
    top: -5px; /* Ajusta a distância superior */
    bottom: -5px; /* Ajusta a distância inferior */
  }
}

/* Define as bordas para cards pares */
.card:nth-child(even)::before {
  right: 0; /* Alinha o pseudo-elemento à direita */
  top: 0; /* Define a distância superior */
  bottom: 0; /* Define a distância inferior */
  border-width: 5px 5px 5px 0; /* Define a largura das bordas */
  border-radius: 0 50px 50px 0; /* Adiciona bordas arredondadas */
}

/* Remove a borda superior para o primeiro card */
.card:first-child::before {
  border-top: 0; /* Remove a borda superior */
  border-top-left-radius: 0; /* Remove o arredondamento superior esquerdo */
}

/* Remove a borda inferior para o último card ímpar */
.card:last-child:nth-child(odd)::before {
  border-bottom: 0; /* Remove a borda inferior */
  border-bottom-left-radius: 0; /* Remove o arredondamento inferior esquerdo */
}

/* Remove a borda inferior para o último card par */
.card:last-child:nth-child(even)::before {
  border-bottom: 0; /* Remove a borda inferior */
  border-bottom-right-radius: 0; /* Remove o arredondamento inferior direito */
}

/* Estilização das informações dentro dos cards */
.info {
  display: flex; /* Usa flexbox para organizar o conteúdo */
  flex-direction: column; /* Organiza os elementos em coluna */
  background: #131313; /* Define a cor de fundo */
  color: rgb(255, 255, 255); /* Define a cor do texto */
  border-radius: 10px; /* Adiciona bordas arredondadas */
  padding: 10px; /* Adiciona espaçamento interno */
  border: 2px solid #FB7E1B; /* Adiciona a borda laranja */
  box-shadow: 0 0 15px #FB7E1B, 
              0 0 15px #FB7E1B; /* Adiciona efeito de luz ao redor */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Suaviza transições de transformações */
}

.info:hover {
  transform: scale(1.03); /* Aumenta ligeiramente o tamanho para destacar */
  box-shadow: 0 0 30px #FB7E1B, 0 0 60px #FB7E1B; /* Intensifica o brilho */
}
/* Estado inicial - fora de visão */
.card {
  opacity: 0; /* Invisível inicialmente */
  transform: translateY(50px); /* Deslocado levemente para baixo */
  transition: opacity 0.6s ease, transform 0.6s ease; /* Animação suave */
}

/* Estado final - quando visível */
.card.visible {
  opacity: 1; /* Visível */
  transform: translateY(0); /* Volta à posição original */
}


/* Estilização do título dos cards */
.title {
  color: #fff; /* Define a cor do texto do título */
  font-family: "VT323", monospace;
  position: relative; /* Define a posição relativa para manipular pseudo-elementos */
  font-size: 30px;
}
/* Estilização do título dos cards */


/* Pseudo-elemento antes do título (dot na timeline) */
.title::before {
  content: ""; /* Insere conteúdo vazio */
  position: absolute; /* Posiciona o pseudo-elemento relativo ao título */
  width: 15px; /* Define a largura do dot */
  height: 10px; /* Define a altura do dot */
  background: white; /* Define a cor de fundo do dot */
  border-radius: 999px; /* Deixa o dot completamente circular */
  border: 3px solid #FB7E1B; /* Adiciona uma borda ao dot */
  box-shadow: 0 0 10px #FB7E1B, 0 0 20px #FB7E1B; /* Adiciona o efeito de luz ao redor do dot */
  transition: none; /* Remove transições para evitar alterações no dot */
}

/* Garante que o hover no .title ou no .info não afete o dot */
.title:hover::before,
.info:hover .title::before {
  box-shadow: 0 0 10px #FB7E1B, 0 0 20px #FB7E1B; /* Mantém o estilo fixo do dot */
  transform: none; /* Garante que o dot permaneça estático */
}


.title:hover::before {
  box-shadow: 0 0 20px #FB7E1B, 0 0 40px #FB7E1B, 0 0 60px #FB7E1B; /* Intensifica o brilho ao passar o mouse */
}


/* Alinha o texto do título à direita para cards pares */
.card:nth-child(even) > .info > .title {
  text-align: right; /* Alinha o texto à direita */
}

/* Posiciona o dot à esquerda para cards ímpares */
.card:nth-child(odd) > .info > .title::before {
  left: -45px; /* Define a posição do dot à esquerda */
}

/* Posiciona o dot à direita para cards pares */
.card:nth-child(even) > .info > .title::before {
  right: -45px; /* Define a posição do dot à direita */
}
.sub-title {
  color: #FB7E1B !important; /* Define a cor do subtítulo */
  font-family: "VT323", monospace !important; /* Define a fonte */
  font-size: 18px !important; /* Define o tamanho do subtítulo */
  margin: 5px 0 10px !important; /* Define o espaçamento */
  text-align: left !important; /* Alinha o texto à esquerda por padrão */
}

/* Para itens pares (à direita da timeline) */
.card:nth-child(even) > .info > .sub-title {
  text-align: right !important; /* Alinha o subtítulo à direita */
}

/* Para itens ímpares (à esquerda da timeline) */
.card:nth-child(odd) > .info > .sub-title {
  text-align: left !important; /* Alinha o subtítulo à esquerda */
}































.circles li {
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  animation: animate 35s linear infinite;
  bottom: -150px;
}

.circles li:nth-child(1) {
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}

.circles li:nth-child(2) {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
}

.circles li:nth-child(3) {
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
}

.circles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
}

.circles li:nth-child(5) {
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}

.circles li:nth-child(6) {
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
}

.circles li:nth-child(7) {
  left: 35%;
  width: 150px;
  height: 150px;
  animation-delay: 7s;
}

.circles li:nth-child(8) {
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
}

.circles li:nth-child(9) {
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
}

.circles li:nth-child(10) {
  left: 85%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 11s;
}

@keyframes animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 0;
  }

  100% {
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
    border-radius: 50%;
  }
}

/* Resources */

.heading h2 {
  /* margin-bottom: 5rem; */
  font-family: "VT323", monospace;
  
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=VT323&display=swap'); /* Importa Inter e VT323 */

.timeline-date {
  font-size: 20px !important;
  color: #FB7E1B !important;
  margin-bottom: 5px !important;
  font-family: 'VT323', monospace !important; /* Usa VT323 para o ano */
}

.timeline-title {
  font-size: 25px !important;
  font-weight: bold !important;
  font-family: 'VT323', monospace !important; /* Usa VT323 para o título */
}

.timeline p {
  font-size: 14px !important;
  font-family: 'Inter', sans-serif !important; /* Usa Inter para o resto do texto */
}

.timeline-items {
  max-width: 1200px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.timeline-items::before {
  content: "";
  position: absolute;
  width: 5px;
  height: 100%;
  background-color: var(--main-color);
  left: calc(50% - 1px);
}
.timeline-item {
  margin-bottom: 40px;
  width: 100%;
  position: relative;
}
.timeline-item:last-child {
  margin-bottom: 0;
}
.timeline-item:nth-child(odd) {
  padding-right: calc(50% + 30px);
  text-align: right;
}
.timeline-item:nth-child(even) {
  padding-left: calc(50% + 30px);
}
.timeline-dot {
  height: 21px;
  width: 21px;
  background-color: var(--main-color);
  box-shadow: 0 0 25px var(--main-color), 0 0 50px var(--main-color);
  position: absolute;
  left: calc(50% - 8px);
  border-radius: 50%;
  top: 10px;
}
.timeline-date {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-color);
  margin: 6px 0 15px;
}
.timeline-content {
  background-color: var(--bg-color);
  border: 3px solid var(--main-color);
  padding: 30px 50px;
  border-radius: 4rem;
  box-shadow: 0 0 10px var(--main-color);
  cursor: pointer;
  transition: 0.3s ease-in-out;
}
.timeline-content:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px var(--main-color);
}
.timeline-content h3 {
  font-size: 20px;
  color: var(--text-color);
  margin: 0 0 10px;
  font-weight: 500;
}
.timeline-content p {
  color: var(--text-color);
  font-size: 16px;
  font-weight: 300;
  line-height: 22px;
}
::-webkit-scrollbar {
  width: 15px;
}
::-webkit-scrollbar-thumb {
  background-color: var(--main-color);
}
::-webkit-scrollbar-track {
  background-color: var(--bg-color);
  width: 50px;
}
/* fim dos estilos educacion */

/* inicio dos estilos jobs */
/* Início dos estilos jobs */
.services .heading h2 {
  /* Comentário corrigido: */
  background-image: url(./img/gifservicos.gif);
  color: black;
  position: relative;
  display: flex;
  align-items: center;
}

.services h2 {
  margin-bottom: 1rem;
  color: var(--text-color);
  font-size: 6rem;
  font-family: var(--font-detalhes);
  align-items: center;
  margin-left: 44%;
}

.services-container {
  display: flex; /* Define um layout flexbox */
  flex-wrap: wrap; /* Permite que os itens quebrem linha, caso necessário */
  justify-content: center; /* Alinha os itens horizontalmente ao centro */
  align-items: center; /* Alinha os itens verticalmente ao centro */
  gap: 2rem; /* Adiciona espaçamento entre os itens */
  padding: 0 2rem; /* Espaçamento interno horizontal */
}

.services {
  padding: 2rem; /* Espaçamento interno geral */
}


.services-box {
  width: 100%; /* Faz com que cada box ocupe o espaço necessário */
  max-width: 280px; /* Define a largura máxima de cada box */
  text-align: center; /* Centraliza o texto dentro do box */
  padding: 1rem; /* Espaçamento interno */
  box-sizing: border-box; /* Garante que padding seja incluído no tamanho total */
}

.services-box {
  background-color: #FB7E1B;
  height: 330px; /* Altura fixa */
  max-width: 280px;
  border-radius: 3rem; /* Bordas arredondadas */
  border: 5px solid transparent;
  cursor: pointer;
  transition: 0.4s ease-in-out;
  margin-top: 15px;
  padding: 1rem; /* Espaçamento interno dos boxes */
  overflow: hidden; /* Garante que o conteúdo fique dentro do box */
}

.services-box:hover {
  background-image: url(./img/gifservicos.gif);
  color: var(--bg-color);
  border: 5px solid #49314667;
  transition: 1.4s;
  color: #ffffffb6;
}

.services-box .services-info {
  display: flex;
  flex-direction: column;
  text-align: left;
  justify-content: center;
  align-items: flex-start;
  padding: 1rem 2rem;
  height: 100%;
}

.services-info h4 {
  font-size: 3rem; /* Tamanho maior */
  font-weight: 800;
  line-height: 1.5;
  font-family: var(--font-detalhes);
  color: #ffffff; /* Cor do título */
  margin-bottom: 1rem;
}

.services-info p {
  position: relative;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.5;
  font-family: 'Inter', sans-serif; /* Aplica a fonte Inter apenas ao texto */
  margin: 0;
  overflow-wrap: break-word;
}
















/* Estilo base para a seção */
.base-section {
  background-position-x: center;
  width: 100%;
  height: 100vh; /* Ocupa toda a altura da tela */
  display: flex;
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
  position: relative;
}

/* Contêiner principal */
.base-box {
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* Título da seção */
.base-section .heading {
  padding: 20px;
  margin-bottom: 20px; /* Ajusta o espaçamento inferior */
  font-size: 6rem;
  font-family: "VT323", monospace; /* Fonte VT323 para títulos */
  color: var(--text-color);
  text-align: center; /* Centraliza o texto */
}

/* Imagem dentro da seção */
.base-box img {
  width: 25rem;
  overflow: hidden;
  box-shadow: 0 0 25px var(--main-color);
}

/* Grade de itens */
.base-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Três colunas por linha */
  gap: 3rem; /* Espaçamento entre os itens */
  justify-content: center; /* Centraliza os itens na grid */
}

/* Estilo individual dos itens */
.base-item {
  min-height: 400px;
  max-width: 300px;
  background: rgba(0, 0, 0, 0.7);
  border: 3px solid rgba(238, 238, 238, 0.2);
  border-radius: 2rem;
  margin: 0 1rem;
  padding: 20px 40px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  color: var(--text-color);
  transition: 0.4s ease-in-out;
}

/* Hover nos itens */
.base-item:hover {
  border: 3px solid var(--main-color);
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 0 50px var(--main-color);
}

/* Título dos itens */
.base-item h2 {
  font-size: 2.5rem; /* Tamanho do título ajustado */
  font-family: "VT323", monospace; /* Fonte VT323 para títulos */
  color: var(--text-color);
}

/* Texto dos itens */
.base-item p {
  font-size: 1.6rem; /* Tamanho do texto ajustado */
  font-family: "Inter", sans-serif; /* Fonte Inter para o texto */
  line-height: 1.5; /* Ajusta o espaçamento entre linhas */
  color: var(--text-color);
}























/* Centraliza o botão no rodapé */
.email-contact {
  text-align: center; /* Centraliza o botão horizontalmente */
  margin-bottom: 20px; /* Adiciona espaçamento abaixo do botão */
}


.contact {
padding-top: 10%;
  backdrop-filter:var(--second-bg-color);
  box-shadow: #080808;
  background-color: rgba(0, 0, 0, 0.3);
 background-position-Y: 55px;
 display: flex;
 position: relative;

}

.contact h2 {
 
  color: var(--text-color);
  font-size: 6rem;
  font-family: var(--font-detalhes);
  align-items: center;
  padding-left: 2%;
  padding-top: 2%;

}

.contact form {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  margin: 5rem auto;
  text-align: center;
}
input.bnt{
    font-size: 15px;
    color: #FB7E1B;
    border-radius: 10%;
    border-color:  #FB7E1B;
    margin: 2rem;
    padding-bottom: 2rem;
    padding-top: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border:5rem;
    cursor: pointer;
    background-color: #131313;
    border: #FB7E1B;
}

input.bnt:hover{
    color:#080808;
    background-color: #FB7E1B;
}

.contact form .input-box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.contact form .input-box input,
.contact form textarea {
  width: 100%;
  padding: 2.5rem;
  font-size: 1.8rem;
  color: var(--text-color);
  background: var(--second-bg-color);
  border-radius: 2rem;
  border: 2px solid var(--main-color);
  margin: 1.5rem 0;
  resize: none;
}
.contact form .btn {
  margin-top: 2rem;
}
.footer {
  position: relative;
  bottom: 0;
  width: 100%;
  padding: 40px 0;
  background-color: var(--second-bg-color);
}
.footer .social {
  text-align: center;
  padding-bottom: 25px;
  color: var(--main-color);
}
.footer .social a {
  font-size: 25px;
  color: var(--main-color);
  border: 2px solid var(--main-color);
  width: 42px;
  height: 42px;
  line-height: 42px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  margin: 0 10px;
  transition: 0.3s ease-in-out;
}
.footer .social a:hover {
  transform: scale(1.2) translateY(-10px);
  background-color: var(--main-color);
  color: var(--bg-color);
  box-shadow: 0 0 25px var(--main-color);
}
.footer ul {
  margin-top: 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 0;
  text-align: center;
}
.footer ul li a {
  color: var(--text-color);
  border-bottom: 3px solid transparent;
  transition: 0.3s ease-in-out;
}
.footer ul li a:hove {
  border-bottom: 3px solid var(--main-color);
}
.footer ul li {
  display: inline-block;
  padding: 0 15px;
}
.footer .copyright {
  margin-top: 50px;
  text-align: center;
  font-size: 16px;
  color: var(--text-color);
}
.copyright {
  color: #FB7E1B;
  border-radius: 8px;
}
/* final do footer */

/* Responsividade */

@media(max-width: 1285px) {
  html {
    font-size: 55%;
  }






  

@media (max-width: 991px) {
  header {
    padding: 2rem 3%;
  }
  section {
    padding: 10rem 3% 2rem;
  
    
  }

.home .home-content {
  margin-top: -22%;
}

.home .home-content h1{
  font-size: 15px;
}
.home .home-content  p{
  font-size: 15px;
  align-items: center;
  margin: 5%;
}

/* .home-content{
  margin-bottom: 25%;} */
.education{
  justify-content: left;
}
  .timeline-items::before {
    left: 7px;
   
  }
  .timeline-item:nth-child(odd) {
    padding-right: 0;
    text-align: left;
  
  }
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    padding-left: 37px;
    
  }
  .timeline-dot {
    left: 0;
  }

  .projetos .wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
  .contact form {
    flex-direction: column;
  }
  .footer {
    padding: 2rem 3%;
  }
}
@media (max-width:895px) {
  #menu-icon {
    display: block;
  }

  
  .home {
    flex-direction: column-reverse;
    margin: 25rem 2rem;
    margin-top: -2rem;
  }
  .home-content h3 {
    font-size: 2.6rem;
  }
  .home-content h1 {
    font-size: 8rem;
    margin-top: 3rem;
  }
  .home-content p {
    max-width: 600px;
    margin: 0 auto;
  }
  .home-img img {
    width: 76vw;
  }
  .timeline-item{
   justify-content: left; 
   padding: 0px 0px 0px 0px;
   width: 90vw;
  }
  .education{
    width: 1%;
    justify-content: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9px, 1fr));
    background-color: black;
    color: #444;
    padding-right: 150%;
    padding-left: 1%;
   
  }

  }
  .btn {
    margin-bottom: 10px;
    flex-direction: row;
  }






}
.about {
  min-height: 100vh;
  padding: 6rem 6rem 2rem;
  display: flex;
  flex-direction: row;
  gap: 9rem;
}
.about-sobre {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.about-sobre h2 {
  font-family: "VT323", monospace;
  display: flex;
  align-items: baseline;
  text-align: left;
  justify-content: center;
  margin-top: 3rem;
  font-weight: 900;
   font-size: 7.5rem;
  margin-top: 1.5rem;
  flex-direction: column;
  gap: 5rem;
  color: #FB7E1B;
}
.about-sobre p {
  font-weight: 700;
  font-size: 3.5rem;
  margin-top: 1.5rem;
  flex-direction: column;
  padding-bottom: 50%;
}
ol {
  margin-bottom: 50px;
  font-family: "Julius Sans One", sans-serif;
  font-size: 22px;
}

.about-img {
  padding-top: 350px;
}
.about-img img {
  width: 300%;
  float: left;
  flex-direction: row;
}