/* Pinegrow generated Design Panel Extra Rules Begin */



/*-------------------------------------------------------------------------------------------------------
                                   Animações de gradiente e background
--------------------------------------------------------------------------------------------------------*/
  /*------ gradient animation -------*/
  .animate-gradient {
    background-size: 200% 200%;
    animation: gradient-animation 10s infinite alternate;
  }

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


    /*------ ball effect animation ---------*/
    .animate-ball {
      animation: float 15s infinite alternate;
    }
    
    @keyframes float {
      0%, 100% {
        transform: translateY(0px);
      }
      50% {
        transform: translateY(30px);
      }
    }
    





/*-------------------------------------------------------------------------------------------------------
                              Classe que é adicionada à segunda navbar do header flowbite
--------------------------------------------------------------------------------------------------------*/
.sticky-nav {
  position: fixed;
  top: 0; /* Começa oculto */
  left: 0;
  width: 100%;
  z-index: 50;
  background: rgba(255, 255, 255, 0.75); /* Fundo semi-transparente */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: top 0.6s ease-in-out, opacity 0.6s ease-in-out;
  opacity: 100;
}

.sticky-nav.show {
  top: 0;  /* Move para o topo suavemente */
  opacity: 1;
}

.dark .sticky-nav {
  background: rgba(24, 24, 24, 0.95); /* Ajusta para o tema escuro */
}


/*-------------------------------------------------------------------------------------------------------
                                     Definir efeito no botão Cadastrar do Header
--------------------------------------------------------------------------------------------------------*/

a.btn-hover {
    position: relative;
    display: inline-block;
    color: rgb(255, 255, 255); /* Texto */
    background-color: #4a209b; /* Cor */
    font-family: inherit;
    font-weight: 500;
    font-size: 1.125rem; /* Tamanho 18px */
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-align: center;
    overflow: hidden; /* Importante para o efeito */
    z-index: 0;
    transition: color 0.3s ease; /* Transição para cor */
  }
  
  /* Hover básico para escurecer o texto */
  a.btn-hover:hover {
    color: #ffffff; /* Mantém texto visível */
  }
  
  /* Criando o pseudo-elemento para o efeito */
  a.btn-hover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #a27aee, #4a209b);
    z-index: -1; /* Coloca o efeito atrás do texto */
    transform: translateY(100%); /* Começa fora da área visível */
    transition: transform 0.3s ease-in-out; /* Animação suave */
  }
  
  /* Quando hover, o efeito se move para cima */
  a.btn-hover:hover::before {
    transform: translateY(0); /* Move para a área visível */
  }
  
  /* Foco para acessibilidade */
  a.btn-hover:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(66, 153, 225, 0.6); /* Anel de foco */
  }
  
  /* Responsividade para telas menores que 768px */
  @media (max-width: 768px) {
    a.btn-hover {
      font-size: 0.875rem; /* Tamanho menor: 14px */
      padding: 0.5rem 1rem; /* Reduz o padding */
      margin: 0.5rem; /* Adiciona margem menor */
    }
  }



/*-------------------------------------------------------------------------------------------------------
                                     imagem background seção PERFORMANCE
--------------------------------------------------------------------------------------------------------*/
.bg-performance {
  position: relative;
  background-image: url('../assets/images/style3d.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.5s ease-in-out;
}

/* Overlay para escurecer a imagem */
.bg-performance::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* Ajuste a opacidade conforme necessário */
  z-index: 1;
}

/* Quando ativar o modo escuro */
/*  .dark .bg-performance {
  background-image: url('../assets/images/dark-style3d.webp') !important;
} */

/* Garante que o conteúdo dentro da seção fique acima do overlay */
.bg-performance > * {
  position: relative;
  z-index: 2;
}



/*-------------------------------------------------------------------------------------------------------
                                                     Body
--------------------------------------------------------------------------------------------------------*/
body{
  text-decoration: none;
}