.continerCard {

  background: #1e1e1e;
  padding: 40px;
  border-radius: 16px;
  width: 600px;
  margin: 2.5vh 0px 0px 0px;
  height: 85vh;
  filter: drop-shadow(0 0 2px white);
  position: relative;
  isolation: isolate;
 
}

.conteudoCard {

  height: 100%; 
  overflow-y: auto;
  scroll-behavior: smooth;
  padding: 0px 10px 0px 0px;
  font-size: var(--fs6);
   
  font-size: 20px;
  font-weight: var(--fw400);
  line-height: 1.6;
   
}

.conteudoCard::-webkit-scrollbar {
    width: 8px; /* Largura da barra de rolagem */
}
  
.conteudoCard::-webkit-scrollbar-track {
    background: #f1f1f1; /* Cor do fundo da barra de rolagem */
    border-radius: 10px; /* Arredonda os cantos do fundo */
}
  
.conteudoCard::-webkit-scrollbar-thumb {
    background: #888; /* Cor da "polegar" da barra de rolagem */
    border-radius: 10px; /* Arredonda os cantos da "polegar" */
}
  
.conteudoCard::-webkit-scrollbar-thumb:hover {
    background: #555; /* Cor da "polegar" quando está sendo usada */
}

.CardTitulo {

  font-size: 40px;
  font-family: var(--fonte02);
  text-transform: uppercase;
  font-weight: bold;
    
}

.silver-line {

    margin: 30px 0px;
    height: 7px;
    width: 50px;
    background: linear-gradient(90deg, 
    #ffffff, #d9d9d9, #c0c0c0, #d9d9d9, #ffffff
  ); /* Gradiente prateado */
  background-size: 200%; /* Faz o gradiente se repetir */
  animation: silver-animation 3s linear infinite; /* Animação infinita */
  border-radius: 5px; /* Bordas arredondadas para suavizar */

}

.continerLinksNome {

    display: flex;
    flex-direction: column;
    align-items: center;

}

.CardSubtitulo {

    font-size: 25px;
    font-family: var(--fonte02);
    font-weight: 500;
    text-transform: uppercase;
    
    margin: 0px 0px 30px 0px;

}

.texto {
    
  word-wrap: break-word !important;
  font-size: 22px;
 
 
  

}

.Subtitulo {

    font-size: 45px;
    height: 60px;
    white-space: nowrap
   

}

.margemSubtitulo {

    margin: 60px 0px 30px 0px;

}

.TodoscardTecnologias {

    display: flex;
    gap: 20px;
    
}

.swiperEstilo {

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 20px !important;
  background: #282829 !important;
  border-radius: 16px !important;
  padding: 15px !important;
  width: 100px !important;
  margin: 0PX 0PX 35px 0Px;
  cursor: grab;

}

.swiper-pagination-bullet {

    background-color: white !important; /* cor cinza para bullets inativos */
}

.swiper-pagination-bullet-active {
    
    transform: scale(1.2) !important;
}

.cardTecnologias {

    background: #121212;
    width: 100px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    border-radius: 16px;
    border: 1px solid white;

}


.textoLink {

    margin: -20px auto 0px auto;
    text-align: center;
    margin: auto;

}

.links {

    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
    gap: 20px;

}



.cardLinks{
    
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-areas: "card";
    place-items: center;
    aspect-ratio: 4/5;
    border: 1px solid var(--surface-2);
    isolation: isolate;
    transition: border-color 200ms var(--ease-out);
    user-select: none;
    width: 250px;
    
    margin: 0px 0px 30px 0px;
    cursor: pointer;
  
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(
        circle at bottom left,
        transparent 55%,
        var(--surface-1)
      );
      pointer-events: none;
      box-shadow: var(--bg) -0.5cqi 0.5cqi 2.5cqi inset;
      transition: opacity 900ms var(--ease-out);
    }
  
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      margin: auto;
      aspect-ratio: 1;
      
      opacity: 0;
      transition: opacity 800ms var(--ease-out);
    }
  
    > * {
      grid-area: card;
    }
  
    svg {
      position: relative;
      z-index: 1;
      width: 30%;
      height: auto;
      color: var(--surface-3);
      transition: 300ms var(--ease-out);
      transition-property: color, scale;
    }
  
    button {
      opacity: 0;
    }
  
    &:focus-within {
      outline: 5px auto Highlight;
      outline: 5px auto -webkit-focus-ring-color;
    }
  
    &:where(:hover, :focus-within) {
      border-color: var(--active-color, var(--fg));
      transition: border-color 800ms var(--ease-in-out);
    }
  
    &:where(:hover, :focus-within) img {
      color: var(--active-color, var(--fg));
      scale: 1.1;
      transition: 300ms var(--ease-in-out);
    }
  
    &:where(:hover, :focus-within)::before {
      opacity: 0;
    }
  
    &:where(:hover, :focus-within)::after {
      opacity: 1;
    }
  }

@keyframes silver-animation {
    0% {
      background-position: 0% 50%;
    }
    100% {
      background-position: 100% 50%;
    }
}