/* LINHA FOOTER ANIMADA VIDRO */
  footer .linha-vidro {
  height: 5px;
  width: 100%;
  margin-top: -23px;
  position: relative;
  overflow: hidden; /* Esconde o overflow da animação */
  background: 
    rgba(255, 255, 255, 0.3),
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0) 100%),
    linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.6) 50%,
      rgba(255, 255, 255, 0) 100%),
    linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.8) 100%);
  
  background-size: 
    100% 100%,
    33% 100%,
    34% 100%,
    33% 100%;
  
  background-position: 
    0 0,
    0 0,
    33% 0,
    67% 0;
  
  background-repeat: no-repeat;
}

/* Efeito de luz que percorre a linha */
.linha-vidro::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.8) 50%, 
    transparent 100%);
  animation: luz-correndo 3s infinite ease-in-out;
}

@keyframes luz-correndo {
  0% {
    left: -30%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    left: 130%;
    opacity: 0;
  }
}

/* Efeito de brilho estático */
.linha-vidro::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.4);
}
/* FIM DO EFEITO VIDRO*/
    

/* SOCIAL ICONS*/
    .social-icons a i {
        margin-top: 0px;
        transition: all 0.3s ease;
    }

    /* Versão mais completa (recomendada) */
    .social-icons {
        margin-top: 15px;
    }

    .social-icons a {
        display: inline-block;
        margin-right: 15px;
        color: white;

        transition: transform 0.3s ease, opacity 0.3s ease;

        position: relative;
        color: white !important;
        background: rgba(0, 255, 255, 0.15) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 50%; /* Isso cria o círculo perfeito */
        padding: 5px 5px 5px 5px;
        text-decoration: none;
        transition: all 0.4s ease;
        overflow: hidden;
        z-index: 1;
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }


    .social-icons a:last-child {
        margin-right: 0;
    }

    .social-icons a:hover {
        transform: translateY(-3px);
        opacity: 0.8;

        background: rgba(0, 255, 255, 0.25) !important;
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    }

    .social-icons a i {
        font-size: 1.5rem; /* Tamanho similar ao fs-4 do Bootstrap */
        vertical-align: middle;
    }

    /* SOCIAL ICONS*/

    /* SCROLLTOP*/
    .scroll-top {
        position: fixed;
        bottom: 40px;
        right: 30px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 999;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
       
    }

    .scroll-top:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-3px);
        background: var(--cinza) !important;
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    }

    .scroll-top.active {
        opacity: 1;
        visibility: visible;
    }

    .scroll-top i {
        font-size: 1.2rem;
        transition: transform 0.3s ease;
        color: var(--primary-color);
    }

    .scroll-top:hover i {
        transform: translateY(-2px);
        color: var(--secondary-color);
        
    }
    /* SCROLLTOP*/
    


      .animated-footer li {
      list-style: none; /* Remove marcadores da lista */
      position: relative; /* Para posicionar o efeito */
      }

      .animated-footer a {
      color: white; /* Cor do texto */
      text-decoration: none; /* Remove sublinhado */
      transition: color 0.3s; /* Transição suave para a cor do texto */
      }

      /* Efeito Neon para os ícones */
      .animated-footer .bi {
      color: #003f47; /* Cor inicial do ícone */
      transition: transform 0.3s, color 0.3s, text-shadow 0.3s; /* Transições suaves */
      }

      /* Animação ao passar o mouse sobre o link */
      .animated-footer a:hover {
      color: #00BFFF; /* Muda a cor do texto ao passar o mouse */
      }

      /* Efeito para o ícone quando o mouse está sobre o link */
      .animated-footer a:hover .bi {
      transform: scale(1.2); /* Aumenta o ícone */
      color: white; /* Muda a cor do ícone ao passar o mouse */
      text-shadow: 0 0 5px #00BFFF, 0 0 10px #00BFFF; /* Efeito neon */
      }

      /* Para garantir que o ícone também tenha o efeito neon ao passar o mouse no link */
      .animated-footer a:hover .bi {
      text-shadow: 0 0 5px #00BFFF, 0 0 10px #00BFFF; /* Efeito neon */
      }


      /* Footer */
        footer {
          background-color: var(--primary-color) !important;
        }

        footer a {
          color: var(--white);
          text-decoration: none;
        }

        footer a:hover {
          color: var(--secondary-color);
        }


        footer .logo-branca{
        width: 50px;          /* Tamanho do círculo (ajuste conforme necessário) */
        height: 50px;         /* Altura igual à largura para formar um círculo */
        border: 0px solid rgba(255, 255, 255, 0.1); /* Borda branca com opacidade 0.2 */
        border-radius: 10%;    /* Transforma em círculo */
        background: transparent; /* Fundo transparente (opcional) */
        padding: 2px;
        margin: 2px;
        filter: brightness(1000%) contrast(100%);
        }


        .footer {
              background: var(--text-dark);
              color: white;
              padding: 2rem 0;
          }