@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap'); /* Importa a fonte 'Share Tech Mono' para um estilo mais tecnológico */

/* NOVA PALETA TECH */
:root {
    --primaria: #0a192f;
    --secundaria: #112240;
    --cinza-claro: #1a2332;
    --texto-escuro: #e6f1ff; /* Mantido para texto geral, mas usaremos destaque para títulos */
    --destaque: #00e6e6; /* Turquesa/Ciano mais vibrante */
    --destaque-hover: #00cccc; /* Um tom ligeiramente mais escuro para hover */
    --bs-light-rgb: 10,25,47 !important;
    --bs-info-rgb: 0,230,230 !important; /* Cor info do Bootstrap ajustada para o novo destaque */
    --bs-secondary-rgb: 17,34,64 !important;
    --bs-warning-rgb: 0,230,230 !important; /* Cor warning do Bootstrap ajustada para o novo destaque */
}

body {
    background-color: var(--cinza-claro);
    color: var(--texto-escuro);
    transition: background-color 0.3s, color 0.3s;
    font-family: 'Inter', 'Segoe UI', 'Roboto', 'Arial', sans-serif; /* Fonte Inter adicionada */
    position: relative; /* Necessário para posicionar as estrelas fixas */
    overflow-x: hidden; /* Evita barra de rolagem horizontal devido às estrelas */
}

/* Cores de fundo */
.bg-primaria {
    background-color: var(--primaria) !important;
}

.bg-secundaria {
    background-color: var(--secundaria) !important;
}

/* Cores de texto */
.text-muted {
    color: #8892b0 !important;
}

.text-info {
    color: var(--destaque) !important;
}

/* Links e botões */
a, .btn-link {
    color: var(--destaque);
}
a:hover, .btn-link:hover {
    color: var(--destaque-hover);
}

/* Estilo para o logo na Navbar */
.navbar-logo {
    width: 50px;
    height: 50px;
    fill: var(--destaque);
    margin-left: -10px; /* Ajuste fino para centralizar o logo */
    margin-right: 10px; /* Adiciona espaço entre logo e título */
}

/* Efeito neon para os títulos das seções */
    h2.text-info {
      text-shadow: 0 0 5px rgba(13, 202, 240, 0.8),
                   0 0 10px rgba(13, 202, 240, 0.6);
    }

    /* Estilo para o botão do acordeão em mobile */
    @media (max-width: 991.98px) {
      /* Garante que o texto da habilidade seja exibido em mobile */
      .skill-item-content span {
        display: inline !important;
      }

      .accordion-button {
        background-color: var(--secundaria) !important;
        color: var(--destaque) !important;
        font-weight: 700;
        border-radius: 16px !important;
        padding: 1.5rem;
        box-shadow: 0 8px 30px rgba(0,0,0,0.2);
        border: 1px solid rgba(0,230,230,0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem; /* Espaçamento entre os botões */
      }

      .accordion-button:not(.collapsed) {
        background-color: var(--primaria) !important;
        color: var(--destaque-hover) !important;
        box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 20px rgba(0,230,230,0.4);
        border-color: var(--destaque);
      }

      .accordion-button::after {
        filter: brightness(0) invert(1); /* Ícone branco para contraste */
      }

      .accordion-item {
        background-color: transparent !important;
        border: none !important;
        margin-bottom: 1.5rem; /* Espaçamento entre os itens do acordeão */
      }

      .accordion-body {
        background-color: var(--secundaria);
        border-radius: 16px;
        padding: 1.5rem;
        box-shadow: 0 8px 30px rgba(0,0,0,0.2);
        border: 1px solid rgba(0,230,230,0.1);
      }

      /* Ajuste para o padding das seções quando minimizadas */
      section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
      }
    }
    
/* Estilo do texto "MARINANI DEVELOPER" na navbar */
.navbar-brand .navbar-text {
  font-family: 'Share Tech Mono', monospace; /* Fonte tecnológica/robotizada */
  text-shadow:
    0 0 6px rgba(0, 230, 230, 0.5), /* Brilho interno suave */
    0 0 10px rgba(0, 230, 230, 0.8), /* Brilho externo */
    0 0 14px rgba(0, 230, 230, 0.5); /* Brilho extra */
  transition: text-shadow 0.3s ease; /* Transição para o efeito hover */
}

.navbar-brand .navbar-text:hover {
  text-shadow:
    0 0 8px rgba(0, 204, 204, 0.7),
    0 0 15px rgba(0, 204, 204, 1),
    0 0 20px rgba(0, 204, 204, 0.7);
}

/* Estilo da imagem do herói com contorno neon */
.img-fluid.hero-foto {
  max-width: 75%;
  height: auto;
  filter: drop-shadow(0 0 8px rgba(0,230,230,0.9)) drop-shadow(0 0 16px rgba(0,230,230,0.7));
  transition: filter 0.3s ease; /* Adiciona transição para o hover */
}

.img-fluid.hero-foto:hover {
    filter: drop-shadow(0 0 12px rgba(0,204,204,1)) drop-shadow(0 0 24px rgba(0,204,204,0.8));
}


/* ===== SEÇÃO SOBRE (VISUAL TECH) ===== */
#sobre {
  background: linear-gradient(135deg, var(--primaria) 60%, var(--secundaria) 100%);
  color: var(--texto-escuro);
  padding: 90px 0 70px 0;
  position: relative;
  overflow: hidden;
}

#sobre .container {
  max-width: 1100px; /* Mantido para o container geral da seção */
  position: relative;
  z-index: 2;
}

/* Wrapper para o card 'Sobre' */
.sobre-card-wrapper {
  max-width: 1000px; /* Aumentado para deixar o card mais largo */
  margin: 0 auto;
}

#sobre .sobre-card {
  background: rgba(17,34,64,0.98);
  border-radius: 22px;
  box-shadow: 0 8px 40px 0 rgba(0,230,230,0.10), 0 1.5px 0 0 #00cccc33;
  padding: 48px 40px 36px 40px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  border: 1.5px solid #233554;
  transition: border 0.3s;
  position: relative;
  overflow: visible;
  text-align: start;
}

#sobre .row.align-items-start {
  align-items: flex-start;
  gap: 0;
}

#sobre .foto-sobre {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  height: 100%;
}

/* Imagem de perfil na seção 'Sobre' */
.about-profile-img {
  width:350px;
  height:300px;
  float:left;
  margin:0 25px 15px 0;
  border-radius:18px;
  border:4px solid var(--destaque);
  box-shadow:0 0 30px #00cccc33;
  object-fit: cover;
}

#sobre .foto-sobre img:hover {
  box-shadow: 0 0 48px 0 #00cccc77, 0 0 0 8px #112240;
  border-color: var(--destaque-hover);
}

/* Títulos da seção Sobre */
#sobre h2 {
  color: var(--destaque);
  font-weight: 700;
  margin-bottom: 2.5rem;
  letter-spacing: 1.5px;
  text-shadow: 0 0 16px #00cccc33;
  text-align: center;
}

#sobre h4 {
  color: var(--destaque);
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 1.2rem;
  text-align: left;
}

#sobre .sobre-info {
  font-size: 1.08rem;
  color: #e6f1ff;
  margin-bottom: 1.2rem;
  line-height: 1.7;
}

/* Container para os detalhes (Informações e Princípios) */
/* Estilos para os cards de princípios na seção "Sobre Mim" */
.py-5 {
    background-color: var(--secundaria); /* Cor de fundo da seção */
}
.principle-card {
    display: flex;
    align-items: flex-start;
    background-color: var(--secundaria); /* Cor de fundo do card */
    padding: 1.5rem; /* Espaçamento interno */
    border-radius: 10px; /* Bordas arredondadas */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Sombra para profundidade */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição suave para hover */
    height: 100%; /* Garante que os cards tenham a mesma altura na linha */
}

.principle-card:hover {
    transform: translateY(-5px); /* Eleva o card no hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 15px var(--destaque); /* Sombra e brilho no hover */
}

.principle-card i {
    font-size: 1.8rem; /* Tamanho do ícone */
    margin-right: 1rem; /* Espaçamento à direita do ícone */
    color: var(--destaque); /* Cor do ícone */
}

.principle-card h6 {
    color: var(--texto-escuro); /* Cor do título do card */
    font-weight: 700; /* Peso da fonte do título */
    margin-bottom: 0.5rem; /* Espaçamento abaixo do título */
}

.principle-card p {
    font-size: 0.95rem; /* Tamanho da fonte do parágrafo */
    color: #a3b2cc; /* Cor do texto do parágrafo */
    margin-bottom: 0; /* Remove margem inferior padrão do parágrafo */
}

/* Responsividade para telas menores */
@media (max-width: 991.98px) {
    .principle-card {
        padding: 1rem; /* Ajusta o padding em telas menores */
        flex-direction: column; /* Empilha o ícone e o texto verticalmente */
        align-items: center; /* Centraliza itens */
        text-align: center; /* Centraliza o texto */
    }

    .principle-card i {
        margin-right: 0; /* Remove margem lateral do ícone */
        margin-bottom: 0.5rem; /* Adiciona margem inferior ao ícone */
    }
}


.sobre-detalhes {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0,230,230,0.1); /* Separador visual */
}

.sobre-detalhes h5 {
  color: var(--destaque);
  font-weight: 600;
  margin-bottom: 0.8rem;
}

.sobre-info-list, .sobre-principios-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1rem;
}

.sobre-info-list li, .sobre-principios-list li {
  font-size: 1rem;
  color: var(--texto-escuro);
  margin-bottom: 0.5rem;
  line-height: 1.5;
  display: flex;
  align-items: flex-start; /* Alinha o ícone e o texto no topo */
}

.sobre-info-list li strong, .sobre-principios-list li strong {
  color: var(--destaque);
  font-weight: 600;
}

.sobre-info-list li i {
  font-size: 1rem;
  margin-top: 0.2rem; /* Ajusta a posição vertical do ícone */
  margin-right: 0.5rem;
}

/* Estilos para a seção de educação integrada no Sobre Mim */
.sobre-educacao-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0,230,230,0.1); /* Separador visual */
}

.sobre-edu-item {
  background: rgba(0,0,0,0.1);
  border-left: 3px solid var(--destaque);
  padding: 1rem 1.5rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.sobre-edu-item:hover {
  background: rgba(0,0,0,0.2);
  border-left-color: var(--destaque-hover);
  transform: translateY(-3px);
}

.sobre-edu-item .edu-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.sobre-edu-item .edu-logo-wrap {
  background: var(--destaque);
  border-radius: 50%;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  flex-shrink: 0;
}

.sobre-edu-item .edu-logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  filter: invert(1); /* Para logos brancos em fundo colorido */
}

.sobre-edu-item .edu-info h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--destaque);
  margin-bottom: 0.1rem;
}

.sobre-edu-item .edu-info h4 {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--texto-escuro);
  margin-bottom: 0.1rem;
}

.sobre-edu-item .edu-period {
  font-size: 0.85rem;
  color: #8892b0;
  margin-bottom: 0.5rem;
}

.sobre-edu-item .edu-details-list {
  list-style: disc; /* Usar marcadores de disco */
  padding-left: 1.2rem;
  font-size: 0.95rem;
  color: #e6f1ff;
}

.sobre-edu-item .edu-details-list li {
  margin-bottom: 0.3rem;
  line-height: 1.4;
}

/* Estilos para o canvas de fundo da seção Sobre */
.sobre-canvas-bg {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}

/* General style for all card section background canvases */
.card-section-bg-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* Ensures it's behind content */
  pointer-events: none; /* Allows clicks to pass through */
  opacity: 0.1; /* Adjust opacity as needed */
  filter: blur(0.5px); /* Subtle blur */
}

/* Media queries para a seção Sobre */
@media (max-width: 992px) {
  #sobre .sobre-card {
    padding: 24px 10px 18px 10px;
  }
  #sobre .about-profile-img {
    width: 150px; /* Aumentado para melhor visualização em tablets */
    height: 200px;
  }
}
@media (max-width: 768px) {
  #sobre .sobre-card {
    padding: 12px 2px 10px 2px;
  }
  #sobre .about-profile-img {
    width: 180px; /* Aumentado para maior destaque em mobile */
    height: 240px;
    margin: 0; /* Reseta a margem para não interferir no alinhamento do flex */
    float: none; /* Remove o float para o layout de coluna única */
  }
  #sobre .row.align-items-center {
    flex-direction: column; /* Empilha a imagem e o texto em telas pequenas */
  }
  #sobre .col-md-8 {
    text-align: center; /* Centraliza o texto em telas pequenas */
  }
  #sobre h4, #sobre h5 {
    text-align: center; /* Centraliza os títulos internos */
  }
  .sobre-info-list, .sobre-principios-list, .sobre-edu-item .edu-details-list {
    padding-left: 1rem; /* Ajusta padding para listas */
    text-align: left;
  }
  .sobre-info-list li, .sobre-principios-list li {
    justify-content: center;
  }
  /* Centraliza os cards de educação em telas menores */
  .sobre-educacao-container {
    align-items: center;
  }
  .sobre-edu-item {
    width: 90%; /* Garante que o item ocupe a maior parte da largura */
    margin: 0 auto; /* Centraliza o item individualmente */
  }
}

/* ===== EFEITO HOVER DA NAVBAR ===== */
/* Estilização aprimorada da barra de navegação */
.navbar {
  background: linear-gradient(135deg, var(--primaria) 80%, var(--secundaria) 100%); /* Gradiente sutil */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Sombra suave */
  padding: 0.5rem 1.5rem; /* Reduz o preenchimento para tornar a barra menor */
  border-bottom: 1px solid rgba(0,230,230,0.1); /* Linha sutil na parte inferior */
}

.navbar-brand {
  font-weight: 700; /* Título mais ousado */
  font-size: 1.2rem; /* Reduz o tamanho da fonte para se adequar à barra menor */
  color: var(--destaque); /* Cor neon principal */
  /* Remove text-shadow daqui para aplicar somente em .navbar-brand .navbar-text */
  transition: text-shadow 0.3s ease; /* Transição para o efeito hover */
}

.navbar-brand:hover {
  /* Remove text-shadow daqui para aplicar somente em .navbar-brand .navbar-text */
}


.navbar-nav .nav-link {
  position: relative;
  color: var(--texto-escuro);
  transition: color 0.18s;
  z-index: 1;
  background: none;
  font-weight: 600; /* Links mais ousados */
  margin-left: 6px; /* Espaço entre os links, ajustado para menor */
  padding: 0.3rem 0.7rem; /* Aumenta a área clicável, ajustado para menor */
  border-radius: 8px; /* Bordas arredondadas nos links */
  font-size: 0.9rem; /* Reduz o tamanho da fonte dos links */
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--destaque);
  background-color: rgba(0,230,230,0.1); /* Feedback visual no hover */
}

.navbar-nav .nav-link::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px; /* Move a linha do efeito hover um pouco para baixo, ajustado para menor */
  height: 2px; /* Aumenta a espessura da linha, ajustado para menor */
  background: linear-gradient(90deg, var(--destaque), var(--destaque-hover)); /* Gradiente para a linha */
  border-radius: 3px;
  transform: scaleX(0);
  transition: transform 0.22s cubic-bezier(.77,0,.18,1);
  z-index: 0;
}

.navbar-nav .nav-link:not(.active)::after {
  opacity: 0 !important;
  transform: scaleX(0) !important;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link:focus::after {
  transform: scaleX(1);
}

/* ===== INDICADOR DE SEÇÃO ATIVA DA NAVBAR ===== */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.active:focus {
  color: var(--destaque) !important;
  background-color: rgba(0,230,230,0.2) !important; /* Background mais destacado para o link ativo */
}

.navbar-nav .nav-link.active::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px; /* Ajustado para menor */
  height: 2.5px; /* Ajustado para menor */
  background: linear-gradient(90deg, var(--destaque), var(--destaque-hover));
  /* Ajuste para remover o highlight ao clicar */
  border-radius: 3px;
  transform: scaleX(1) !important;
  opacity: 1 !important;
  box-shadow: 0 0 8px rgba(0,230,230,0.6); /* Adiciona uma sombra sutil para destacar o link ativo */

  transition: none !important;
  z-index: 1;
  pointer-events: none;
}

/* Garante que apenas o ativo mostra a linha, mesmo se hover sair */
.navbar-nav .nav-link:not(.active)::after {
  opacity: 0 !important;
  transform-origin: left;
  transform: scaleX(0) !important;
}

/* Hero/Início estilizado */
#inicio.hero {
  position: relative;
  min-height: 100vh; /* Mantido para ocupar a altura total da viewport */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Mantido para evitar que a próxima seção apareça */
  background: radial-gradient(ellipse at 50% 40%, #112240 0%, #0a192f 80%);
  box-shadow: 0 0 80px 0 rgba(0,230,230,0.33) inset;
  padding-top: 70px; /* Adicionado para compensar a navbar fixa em desktop */
  padding-bottom: 20px; /* Adicionado para espaço na parte inferior */
}

/* In your assets/css/main.css */
@media (max-width: 767.98px) { /* For small devices */
    #inicio .display-1 {
        font-size: 3rem; /* Adjust as needed */
        white-space: nowrap; /* Ensure it stays on one line */
        overflow: hidden; /* Hide overflow if it still occurs */
        text-overflow: ellipsis; /* Add ellipsis for overflowed text */
    }
}

@media (min-width: 768px) and (max-width: 991.98px) { /* For medium devices */
    #inicio .display-1 {
        font-size: 4rem; /* Adjust as needed */
        white-space: nowrap;
    }
}

/* Ajuste para o nome em telas muito pequenas */
@media (max-width: 576px) { /* Extra small devices (phones) */
    #inicio .display-1 {
        font-size: 2.5rem; /* Reduz ainda mais o tamanho da fonte */
    }
}


#inicio .display-1 {
    white-space: nowrap; /* Apply nowrap by default as well */
}

/* Ajustes para telas menores (mobile) */
@media (max-width: 991.98px) {
  #inicio.hero {
    padding-top: 60px; /* Ajuste para a navbar em mobile */
    padding-bottom: 15px; /* Ajuste para mobile */
    /* Você pode adicionar mais ajustes de fonte ou imagem aqui se o conteúdo ainda estiver grande demais */
  }

  /* Ajustes de fonte para títulos e texto principal em mobile */
  #inicio.hero .display-1 {
    font-size: 3.0rem; /* Reduz o tamanho do h1 para mobile */
  }

  #inicio.hero .jarvis-sub {
    font-size: 1.5rem; /* Reduz o tamanho do h2 para mobile */
  }

  #inicio.hero .lead.jarvis-lead {
    font-size: 1rem; /* Reduz o tamanho do parágrafo para mobile */
  }

  /* Ajustes para a imagem de perfil em mobile */
  #inicio.hero .hero-foto {
    max-width: 70%; /* Reduz a largura da imagem para ocupar menos espaço */
    height: auto; /* Mantém a proporção */
  }

  /* Centraliza o texto e os ícones sociais em mobile */
  #inicio.hero .hero-content-wrapper .text-lg-start {
    text-align: center !important;
  }
  #inicio.hero .social-icons.justify-content-lg-start {
    justify-content: center !important;
  }
}

/* Fundo de linhas de circuito animado (desativado/removido) */
.jarvis-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 40%, rgba(0,230,230,0.10) 0%, transparent 70%);
  animation: none;
} /* Remove o efeito de brilho de fundo do jarvis-hero */

/* Efeito de brilho para o texto principal */
.jarvis-glow {
  color: var(--destaque);
  letter-spacing: 2px;
  text-shadow:
    0 0 12px #00e6e6,
    0 0 32px #00cccc,
    0 0 2px #fff;
  animation: jarvis-glow 2.5s ease-in-out infinite alternate;
}

@keyframes jarvis-glow {
  from { text-shadow: 0 0 12px #00e6e6, 0 0 32px #00cccc, 0 0 2px #fff; }
  to   { text-shadow: 0 0 32px #00e6e6, 0 0 64px #00cccc, 0 0 8px #fff; }
}

.jarvis-sub {
  color: #7ee7e7;
  text-shadow: 0 0 8px #00cccc44;
  letter-spacing: 1px;
}

.jarvis-lead {
  color: #e6f1ff;
  text-shadow: 0 0 6px #00cccc22;
}

.jarvis-btn {
  border-color: var(--destaque);
  color: var(--destaque);
  font-weight: 600;
  background: rgba(10,25,47,0.2);
  box-shadow: 0 0 16px 0 #00cccc44;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.jarvis-btn:hover {
  background: var(--destaque);
  color: var(--primaria);
  box-shadow: 0 0 16px 0 rgba(0,230,230,0.99); /* Sombra simplificada */
}

.jarvis-icons a i {
  color: var(--destaque);
  text-shadow: 0 0 8px #00cccc66;
  transition: color 0.2s, text-shadow 0.2s;
}
.jarvis-icons a i:hover {
  color: var(--destaque-hover);
  text-shadow: 0 0 16px #00cccc;
}

/* Remover círculos e losangos decorativos (se existirem) */
.jarvis-circles,
.jarvis-circle,
.jarvis-circle1,
.jarvis-circle2,
.jarvis-circle3 {
  display: none !important;
}

/* Remover linhas de circuito do fundo animado (se existirem) */
.jarvis-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 40%, rgba(0,230,230,0.10) 0%, transparent 70%);
  animation: none;
}

/* Remover o core pulsante (se existir) */
.jarvis-pulse-core { display: none !important; }

/* Matrix/cascata de números estilo algoritmo */
.jarvis-matrix { /* Esta classe está no contêiner, não no próprio canvas */
  position: absolute;
  inset: 0;
  z-index: 0; /* Alterado de 2 para 0 */
  pointer-events: none;
  overflow: hidden;
}

.jarvis-matrix-canvas {
  width: 100vw;
  height: 100vh;
  display: block;
  position: absolute;
  top: 0; left: 0;
  opacity: 0.18;
  filter: blur(0.2px); /* Reduz o desfoque para tornar os caracteres mais nítidos */
  pointer-events: none;
  z-index: 0; /* Adicionado z-index: 0 para o próprio canvas */
}

/* Estilização da cascata com cores neon e brilho */
.jarvis-matrix-canvas {
  /* Mantém as propriedades básicas */
  /* ... */

  /* Adiciona o efeito neon */
  color: #00e6e6; /* Cor neon principal */
  text-shadow:
    0 0 5px rgba(0, 230, 230, 0.5), /* Brilho interno suave */
    0 0 10px rgba(0, 230, 230, 0.8), /* Brilho externo */
    0 0 15px rgba(0, 230, 230, 0.5); /* Brilho extra */
  /* Aumenta a intensidade do brilho ao longo do tempo */
  animation: neon-matrix-glow 2s infinite alternate;
}

@keyframes neon-matrix-glow {
  from {
    text-shadow: 0 0 3px rgba(0, 230, 230, 0.3), 0 0 7px rgba(0, 230, 230, 0.5), 0 0 10px rgba(0, 230, 230, 0.3);
  }
  to {
    text-shadow: 0 0 8px rgba(0, 230, 230, 0.7), 0 0 15px rgba(0, 230, 230, 0.9), 0 0 20px rgba(0, 230, 230, 0.5);
  }
}
/* Cards de Experiência */
.exp-card-container {
  display: flex;
  flex-wrap: wrap; /* Permite que os cards quebrem para a próxima linha */
  gap: 2.5rem;
  justify-content: center; /* Centraliza os cards na linha */
  margin-top: 2rem;
  /* align-items: center; Removido, não é necessário para layout de grade */
}
.exp-card {
  position: relative;
  /* width: 340px; Removido para permitir que o Bootstrap controle a largura */
  min-height: 420px; /* Aumentado para acomodar imagem maior */
  padding: 2.2em 2em 1.5em 2em;
  color: #fff;
  border-radius: 20px;
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.1s ease, box-shadow 0.2s;
  font-family: 'Inter', sans-serif; /* Fonte Inter adicionada */
  z-index: 1;
  margin-bottom: 0;
  border: none;
  display: flex; /* Adicionado para flexbox interno */
  flex-direction: column; /* Conteúdo em coluna */
  justify-content: space-between; /* Espaça o conteúdo */
}

.exp-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem; /* Espaçamento abaixo do cabeçalho */
}

.exp-logo-wrap {
  background-color: none; /* Fundo do círculo do logo */
  border-radius: 30%;
  width: 100px; /* Tamanho do círculo */
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1.5rem; /* Aumentado para mais espaço */
  flex-shrink: 0; /* Impede que o logo encolha */
  box-shadow: 0 0 10px rgba(0,230,230,0.5); /* Sombra neon */
}

.exp-logo {
  width: 100px; /* Tamanho da imagem dentro do círculo */
  height: 100px;
  object-fit: contain; /* Garante que a imagem se ajuste */
  border-radius: 30%; /* Mantém a imagem circular */
}

.exp-info {
  flex-grow: 1; /* Permite que o texto ocupe o espaço restante */
}

.exp-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://grainy-gradients.vercel.app/noise.svg');
  opacity: 0.06;
  pointer-events: none;
  z-index: 1;
}
.exp-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 2px;
  background: linear-gradient(var(--angle, 135deg), rgba(0,230,230,0.13), rgba(255,255,255,0));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  transition: background 0.2s;
}
.exp-card h3 {
  font-size: 1.18rem;
  font-weight: 600;
  margin-bottom: 0.2em;
  color: var(--destaque);
  letter-spacing: 0.5px;
}
.exp-card h4 {
  font-size: 1.01rem;
  font-weight: 400;
  margin-bottom: 0.5em;
  color: #fff;
  opacity: 0.85;
}
.exp-card .exp-period {
  font-size: 0.97rem;
  color: #b6eaff;
  margin-bottom: 0.7em;
  font-weight: 500;
}
.exp-card ul {
  text-align: left;
  margin-bottom: 1em;
  padding-left: 1.2em;
  font-size: 0.97rem;
  color: #e6f1ff;
}
.exp-card ul li {
  margin-bottom: 0.5em;
  line-height: 1.5;
}
.exp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: auto; /* Empurra os badges para o final do card */
}
.exp-badges .badge {
  background: var(--destaque);
  color: #141e30;
  font-weight: 600;
  border-radius: 12px;
  padding: 4px 12px;
  font-size: 0.93rem;
  box-shadow: 0 2px 8px rgba(0,230,195,0.08);
  border: none;
}
/* Efeito de brilho consolidado para cards */
.exp-card .glow,
.edu-card .glow {
  position: absolute;
  top: var(--y, 50%);
  left: var(--x, 50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at center, rgba(0,230,200,0.18), transparent 80%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.06s;
  z-index: 10;
}
.exp-card:hover .glow,
.edu-card:hover .glow {
  opacity: 1;
}
.exp-card:active {
  transform: scale(0.98);
}
@media (max-width: 900px) {
  .exp-card {
    width: 90%; /* Ocupa a maior parte da largura em telas menores */
    margin: 0 auto; /* Centraliza o card individualmente */
    max-width: 340px; /* Limite de largura para não ficar muito grande em tablets */
  }
  .exp-card-container {
    gap: 1.2rem;
  }
}

@media (max-width: 768px) {
  .exp-card-header {
    flex-direction: column;
    text-align: center;
  }

  .exp-logo-wrap,
  .exp-logo {
    width: 80px;
    height: 80px;
  }

  .exp-logo-wrap {
    margin-right: 0;
    margin-bottom: 1rem;
  }
}

/* Seção Habilidades e Ferramentas */
#skills {
  background-color: var(--primaria);
  padding: 80px 0;
}

#skills h2 {
  color: var(--destaque);
  font-weight: 700;
  margin-bottom: 2.5rem;
  letter-spacing: 1.5px;
  text-shadow: 0 0 16px rgba(0,230,230,0.33);
  text-align: center;
}

.skill-category-card {
  background: var(--secundaria);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  border: 1px solid rgba(0,230,230,0.1);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.skill-category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 20px rgba(0,230,230,0.4);
  border-color: var(--destaque);
}

.skill-category-card h5 {
  color: var(--destaque);
  font-weight: 700;
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-shadow: 0 0 8px rgba(0,230,230,0.3);
}

.skill-category-card h5 i {
  font-size: 1.6rem;
  color: var(--destaque);
}

.skill-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.skill-list li {
  background-color: var(--primaria);
  padding: 0.7rem 1rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  color: var(--texto-escuro);
  font-size: 1rem;
  font-weight: 500;
  border: 1px solid rgba(0,230,230,0.08);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.skill-list li:hover {
  background-color: rgba(10,25,47,0.7);
  border-color: var(--destaque-hover);
}

.skill-list li .skill-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--destaque);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
  color: var(--primaria);
}

@media (max-width: 992px) {
  .skill-category-card {
    padding: 1.2rem;
  }
  .skill-category-card h5 {
    font-size: 1.2rem;
    margin-bottom: 1.2rem;
  }
  .skill-category-card h5 i {
    font-size: 1.5rem;
  }
  .skill-list {
    gap: 0.6rem;
  }
  .skill-list li {
    font-size: 0.85rem;
    padding: 0.6rem 0.8rem;
  }
  .skill-list li .skill-icon {
    font-size: 1.6rem;
  }
}

@media (max-width: 768px) {
  .skill-category-card {
    padding: 1rem;
  }

  .skill-category-card h5 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
  }

  .skill-category-card h5 i {
    font-size: 1.4rem;
  }

  .skill-list {
    gap: 0.5rem;
  }

  .skill-list li {
    font-size: 0.8rem;
    padding: 0.5rem 0.7rem;
  }

  .skill-list li .skill-icon {
    font-size: 1.4rem;
  }
}

.skill-item-content {
  background-color: var(--secundaria); /* Darker background for the item */
  border: 1px solid rgba(0, 230, 230, 0.2); /* Subtle border using a transparent highlight color */
  border-radius: 10px; /* Rounded corners */
  padding: 0.8em 1.2em; /* Padding inside the item */
  display: flex;
  align-items: center;
  gap: 0.8em; /* Space between icon and text */
  transition: all 0.3s ease; /* Smooth transition for hover effects */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  height: 100%; /* Ensure consistent height in grid */
  justify-content: flex-start; /* Align content to start */
}

.skill-item-content:hover {
  transform: translateY(-3px); /* Slight lift effect */
  box-shadow: 0 6px 20px rgba(0, 230, 230, 0.3); /* More prominent glow on hover */
  border-color: var(--destaque); /* Highlight border on hover */
}

.skill-item-content .skill-icon {
  color: var(--destaque); /* Icon color */
  font-size: 1.2em; /* Slightly larger icon */
}

/* Cards de Serviços */
#servicos {
  background-color: var(--cinza-claro);
  padding: 80px 0;
}

#servicos h2 {
  color: var(--destaque);
  font-weight: 700;
  margin-bottom: 2.5rem;
  letter-spacing: 1.5px;
  text-shadow: 0 0 16px rgba(0,230,230,0.33);
}

.service-card {
  background: var(--secundaria);
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(0,230,230,0.1);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 20px rgba(0,230,230,0.4);
  border-color: var(--destaque);
}

.service-card h5 {
  color: var(--destaque);
  font-weight: 700;
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}

.service-card .service-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--destaque);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
  color: var(--primaria);
}

.service-card p {
  color: var(--texto-escuro);
  font-size: 1rem;
  line-height: 1.6;
}

/* Cards de Portfólio */
#portfolio {
  padding: 80px 0;
}

#portfolio h2 {
  color: var(--destaque);
  font-weight: 700;
  margin-bottom: 2.5rem;
  letter-spacing: 1.5px;
  text-shadow: 0 0 16px rgba(0,230,230,0.33);
}

.portfolio-cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.portfolio-card {
  background: var(--secundaria);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0,230,230,0.1);
}

.portfolio-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 20px rgba(0,230,230,0.3);
  border-color: var(--destaque);
}

.portfolio-image {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.portfolio-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.portfolio-card:hover .portfolio-image img {
  transform: scale(1.08);
}

.portfolio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10,25,47,0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.portfolio-card:hover .portfolio-overlay {
  opacity: 1;
}

.portfolio-overlay h5 {
  color: var(--destaque);
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.portfolio-overlay .btn-primary {
  background-color: var(--destaque);
  border-color: var(--destaque);
  color: var(--primaria);
  font-weight: 600;
  padding: 0.6rem 1.5rem;
  border-radius: 8px;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.portfolio-overlay .btn-primary:hover {
  background-color: var(--destaque-hover);
  border-color: var(--destaque-hover);
}

.portfolio-content {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.portfolio-content h5 {
  color: var(--texto-escuro);
  font-weight: 600;
  margin-bottom: 0.8rem;
  font-size: 1.25rem;
}

.portfolio-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.tech-icon {
  background-color: rgba(0,230,230,0.15);
  color: var(--destaque);
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.tech-icon i {
  margin-right: 0.4rem;
  font-size: 1rem;
}

.portfolio-meta {
  font-size: 0.9rem;
  color: #8892b0;
  margin-bottom: 1rem;
}

.portfolio-meta .project-date {
  font-weight: 500;
  color: var(--destaque);
}

.portfolio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
}

.tag {
  background-color: rgba(136,146,176,0.1);
  color: #8892b0;
  padding: 0.3rem 0.7rem;
  border-radius: 4px;
  font-size: 0.75rem;
}

@media (max-width: 768px) {
  .portfolio-card {
    width: 90%;
    margin: 0 auto;
    max-width: 340px;
  }
}

/* Seção Clientes/Testemunhos */
#clientes {
  background-color: var(--cinza-claro);
  padding: 80px 0;
  text-align: center;
}

#clientes h2 {
  color: var(--destaque);
  font-weight: 700;
  margin-bottom: 2.5rem;
  letter-spacing: 1.5px;
  text-shadow: 0 0 16px rgba(0,230,230,0.33);
}

/* Base style for client cards */
.clientes-card {
  background: var(--secundaria);
  border-radius: 18px;
  padding: 1.8em;
  box-shadow: 0 5px 25px rgba(0,0,0,0.3);
  border: 1px solid rgba(100,255,218,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
}

.clientes-card .card-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.2em;
}

.clientes-card .client-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 1em;
  border: 3px solid var(--destaque);
  box-shadow: 0 0 15px rgba(100,255,218,0.4);
}

.clientes-card .client-info {
  flex-grow: 1;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.clientes-card .client-details {
  overflow: hidden; /* Garante que o text-overflow funcione */
}

.clientes-card .client-social-link a {
  color: #8892b0; /* Cor padrão do ícone */
  font-size: 1.2rem;
  transition: color 0.3s ease;
  margin-left: 0.5rem; /* Espaçamento do texto */
}

.clientes-card .client-social-link a:hover {
  color: var(--destaque); /* Cor de destaque no hover */
}

/* Estilo para o nome do cliente no card de feedback */
.clientes-card .client-name {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--destaque);
  margin-bottom: 0.2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clientes-card .client-title {
  font-size: 0.9em;
  color: #a3b2cc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Estilo do texto do depoimento */
.clientes-card .testimonial-text {
  font-size: 1em;
  color: var(--texto-escuro);
  line-height: 1.6;
  margin-bottom: 1.5em;
  flex-grow: 1;
  font-style: italic;
}

/* Ajuste para exibir 3 cards de clientes em uma única linha em telas grandes */
@media (min-width: 992px) {
  #clientes .row {
    flex-wrap: wrap;
    overflow-x: hidden;
    justify-content: center;
    gap: 1.5rem;
  }
}

/* Seção Contato */
#contato {
  padding: 80px 0;
  background-color: transparent;
  position: relative; /* Necessário para posicionar o conteúdo da seção acima das estrelas */
  overflow: hidden; /* Garante que o conteúdo da seção não ultrapasse seus limites */
}

/* Estilos para a imagem do robô na seção de contato */
.contact-robot-img {
  filter: drop-shadow(0 0 8px rgba(0,230,230,0.9)) drop-shadow(0 0 16px rgba(0,230,230,0.7));
  transition: filter 0.3s ease; /* Adiciona transição para o hover */
}

.contact-robot-img:hover {
  filter: drop-shadow(0 0 12px rgba(0,204,204,1)) drop-shadow(0 0 24px rgba(0,204,204,0.8));
}

/* Estilização do formulário de contato */
.contact-form {
  background-color: var(--secundaria);
  border: 1px solid rgba(0,230,230,0.1);
}

.contact-form .form-label {
  color: var(--texto-escuro);
  font-weight: 500;
}

.contact-form .form-control {
  background-color: var(--primaria);
  color: var(--texto-escuro);
  border: 1px solid rgba(0,230,230,0.2);
  padding: 0.75rem 1rem;
}

.contact-form .form-control::placeholder {
  color: #8892b0;
}

.contact-form .form-control:focus {
  background-color: var(--primaria);
  color: var(--texto-escuro);
  border-color: var(--destaque);
  box-shadow: 0 0 0 0.25rem rgba(0, 230, 230, 0.25);
}

@media (max-width: 768px) {
  .contact-robot-img {
    max-width: 200px; /* Reduz o tamanho do robô em telas menores */
  }
}

/* Botão Voltar ao Topo */
.back-to-top-btn {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 50px;
  height: 50px;
  background-color: var(--destaque);
  color: var(--primaria);
  text-align: center;
  line-height: 50px;
  font-size: 1.5rem;
  border-radius: 50%;
  z-index: 1050;
  box-shadow: 0 4px 15px rgba(0, 230, 230, 0.4);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, background-color 0.3s ease;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}

.back-to-top-btn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top-btn:hover {
  background-color: var(--destaque-hover);
  transform: scale(1.1);
}

.back-to-top-btn:active {
  background-color: #00b3b3; /* Tom mais escuro para feedback de clique */
  transform: scale(0.95);
  transition: transform 0.1s ease;
}

/* Estilos para as estrelas no fundo */
.stars {
  position: fixed; /* Fixa as estrelas na viewport */
  top: 0;
  left: 0;
  width: 100vw; /* Ocupa 100% da largura da viewport */
  height: 100vh; /* Ocupa 100% da altura da viewport */
  background: transparent;
  pointer-events: none;
  z-index: -1; /* Garante que as estrelas fiquem atrás de todo o conteúdo */
}

.stars-small {
  width: 2px; /* Aumentado o tamanho */
  height: 2px; /* Aumentado o tamanho */
  background: #fff; /* Branco sólido para melhor visibilidade */
  border-radius: 50%; /* Tornar circular */
  box-shadow:
    /* Uma distribuição mais esparsa para garantir visibilidade e desempenho */
    100px 150px #fff, 250px 300px #fff, 400px 50px #fff, 550px 200px #fff, 700px 400px #fff,
    850px 100px #fff, 1000px 250px #fff, 1150px 350px #fff, 1300px 50px #fff, 1450px 200px #fff,
    1600px 300px #fff, 1750px 150px #fff, 1900px 250px #fff, 50px 450px #fff, 200px 600px #fff,
    350px 750px #fff, 500px 500px #fff, 650px 800px #fff, 800px 650px #fff, 950px 900px #fff,
    1100px 700px #fff, 1250px 950px #fff, 1400px 800px #fff, 1550px 600px #fff, 1700px 750px #fff,
    1850px 900px #fff, 100px 1050px #fff, 250px 1200px #fff, 400px 1350px #fff, 550px 1100px #fff,
    700px 1250px #fff, 850px 1400px #fff, 1000px 1150px #fff, 1150px 1300px #fff, 1300px 1450px #fff,
    1450px 1000px #fff, 1600px 1150px #fff, 1750px 1300px #fff, 1900px 1450px #fff, 50px 1600px #fff,
    200px 1750px #fff, 350px 1900px #fff, 500px 1650px #fff, 650px 1800px #fff, 800px 1950px #fff,
    950px 1700px #fff, 1100px 1850px #fff, 1250px 1600px #fff, 1400px 1750px #fff, 1550px 1900px #fff,
    1700px 1650px #fff, 1850px 1800px #fff;

  animation: animStar 40s linear infinite; /* Duração ajustada */
}

.stars-medium {
  width: 3px; /* Aumentado o tamanho */
  height: 3px; /* Aumentado o tamanho */
  background: #fff; /* Branco sólido para melhor visibilidade */
  border-radius: 50%; /* Tornar circular */
  box-shadow:
    /* Uma distribuição mais esparsa */
    120px 200px #fff, 300px 400px #fff, 480px 100px #fff, 660px 300px #fff, 840px 500px #fff,
    1020px 200px #fff, 1200px 400px #fff, 1380px 600px #fff, 1560px 100px #fff, 1740px 300px #fff,
    1920px 500px #fff, 120px 700px #fff, 300px 900px #fff, 480px 1100px #fff, 660px 800px #fff,
    840px 1000px #fff, 1020px 1200px #fff, 1200px 900px #fff, 1380px 1100px #fff, 1560px 1300px #fff,
    1740px 1000px #fff, 1920px 1200px #fff;
  animation: animStar 80s linear infinite; /* Duração ajustada */
}

.stars-large {
  width: 4px; /* Aumentado o tamanho */
  height: 4px; /* Aumentado o tamanho */
  background: #fff; /* Branco sólido para melhor visibilidade */
  border-radius: 50%; /* Tornar circular */
  box-shadow:
    /* Uma distribuição mais esparsa */
    150px 250px #fff, 350px 500px #fff, 550px 150px #fff, 750px 400px #fff, 950px 650px #fff,
    1150px 250px #fff, 1350px 500px #fff, 1550px 750px #fff, 1750px 250px #fff, 1950px 500px #fff;
  animation: animStar 120s linear infinite; /* Duração ajustada */
}

/* Animação das estrelas */
@keyframes animStar {
  from { transform: translateY(-100vh); } /* Começa fora da tela, acima */
  to { transform: translateY(100vh); } /* Termina fora da tela, abaixo */
}

/* Ajuste de contraste para telas menores */
@media (max-width: 768px) {
  /* Aumenta o contraste de textos secundários para melhor legibilidade */
  .text-muted,
  .principle-card p,
  .portfolio-meta,
  .tag,
  .clientes-card .client-title,
  .clientes-card .card-footer-social a {
    color: var(--texto-escuro) !important; /* Cor de texto principal para maior contraste */
    opacity: 0.85; /* Leve opacidade para diferenciar do texto primário */
  }
}