html { scroll-behavior: smooth; }
      body {
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
      }

      .partners-viewport { isolation: isolate; }

      /* Melhoria visual automática para os elementos que o JS injeta */
      #partnersGrid > * {
        flex: 0 0 auto;
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(148,163,184,.22);
        border-radius: 1.25rem;
        background: rgba(255,255,255,.94);
        box-shadow: 0 10px 30px rgba(15,23,42,.055);
        transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
      }

      #partnersGrid > *:hover {
        transform: translateY(-4px);
        border-color: rgba(59,130,246,.35);
        box-shadow: 0 18px 40px rgba(15,23,42,.10);
      }

      .dark #partnersGrid > * {
        background: rgba(21,28,42,.88);
        border-color: rgba(71,85,105,.35);
        box-shadow: 0 12px 34px rgba(0,0,0,.18);
      }

      .dark #partnersGrid > *:hover {
        border-color: rgba(96,165,250,.35);
        box-shadow: 0 18px 42px rgba(0,0,0,.28);
      }

      #partnersGrid img {
        max-width: 100%;
        max-height: 72px;
        width: auto;
        height: auto;
        object-fit: contain;
        display: block;
        filter: grayscale(.18) saturate(.9);
        opacity: .88;
        transition: filter .45s ease, opacity .45s ease, transform .45s ease;
      }

      #partnersGrid > *:hover img {
        filter: grayscale(0) saturate(1);
        opacity: 1;
        transform: scale(1.045);
      }

      @media (prefers-reduced-motion: reduce) {
        #partnersGrid > *,
        #partnersGrid img {
          transition: none !important;
        }
      }




body {
  font-family: 'Arial', sans-serif;
}

.async-hide {
opacity: 0 !important
}

.testimonials {
background: linear-gradient(145deg, #1e1e2f, #2b2b3c);
}


.text-muted {
color: rgba(255, 255, 255, 0.7) !important;
}

h2 {
font-size: 2rem;
}

p {
line-height: 1.6;
}


.avatar-container {
  width: 180px; /* Tamanho ajustado */
  height: 180px;
  margin: -50px auto 20px; /* Eleva o avatar e adiciona margem inferior */
  position: relative;
  overflow: hidden;
  border: 5px solid rgba(255, 255, 255, 0.3); /* Adiciona borda sutil */
  border-radius: 50%; /* Garante que o formato continue circular */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5); /* Sombra para destaque */
}

.avatar {
  width: 100%; /* Garante que a imagem ocupa todo o container */
  height: 100%; /* Garante que a imagem ocupa todo o container */
  object-fit: cover; /* Ajusta a imagem para preencher o círculo */
  object-position: center; /* Centraliza a imagem no caso de recortes */
}




/* Estilo do cabeçalho */
.header-container {
margin-bottom: 30px;
}

.header-title {
font-size: 36px; /* Tamanho grande para o título */
font-weight: bold;
color: #2e3a8c; /* Azul escuro */
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); /* Sombra suave no texto */
position: relative;
text-transform: uppercase;
text-align: left; /* Alinhamento do texto à esquerda */
transition: color 0.3s ease; /* Transição suave para a cor */
}

.header-title::after {
content: '';
display: block;
width: 100%; /* Linha ocupa 100% da largura do container */
height: 2px; /* Espessura da linha */
background-color: #007bff; /* Cor da linha */
margin-top: 8px; /* Espaçamento entre o texto e a linha */
}

/* Navbar com transição suave de fundo e bordas */
.navbar {
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Efeito de transição ao alternar entre as navegações */
.navbar-collapse {
transition: transform 0.4s ease-in-out; /* Transição suave do menu */
}

/* Navbar em estado fixo com sombra sutil */
.navbar.position-fixed {
background-color: rgba(0, 0, 0, 0.8);
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
}

/* Navbar normal */
.navbar-default {
background-color: transparent;
}

/* Navbar quando o item é ativo */
.navbar-nav .nav-item.active {
color: #007bff; /* Cor de destaque */
transition: color 0.3s ease-in-out;
}

/* Animação suave para os itens dropdown */
.dropdown-menu {
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease; /* Efeito de desvanecimento e movimento */
}

/* Quando o dropdown estiver visível */
.dropdown-menu.show {
opacity: 1;
transform: translateY(0); /* Move o menu para a posição normal */
}

/* Transição suave dos ícones de dropdown */
.navbar-nav .nav-item.dropdown:hover .dropdown-menu {
opacity: 1;
transform: translateY(0);
transition: all 0.3s ease;
}

/* Efeito de transição para o hover dos itens da navbar */
.navbar-nav .nav-item {
transition: transform 0.3s ease, color 0.3s ease;
}

.navbar-nav .nav-item:hover {
transform: translateY(-5px); /* Levanta o item ao passar o mouse */
color: #007bff; /* Destaca o item */
}

/* Animação suave ao passar o mouse no título do cabeçalho */
.header-title:hover {
color: #007bff; /* Cor de destaque ao passar o mouse */
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); /* Sombra suave ao passar o mouse */
}

/* Efeito de suavização nas transições de hover nos itens de menu */
.navbar-nav .nav-item {
transition: color 0.2s ease, transform 0.3s ease-in-out; /* Transição mais rápida */
}

.navbar-nav .nav-item:hover {
transform: scale(1.05); /* Aumenta ligeiramente o item */
color: #ff5722; /* Cor de destaque durante o hover */
}


.carousel-inner .carousel-item {
opacity: 0;
transition: opacity 3s ease-in-out; /* Ajuste o tempo de transição conforme necessário */
}

.carousel-inner .carousel-item.active {
opacity: 1;
transition: opacity 2s ease-in-out;
}

/* Desabilita o comportamento padrão de esconder os slides não ativos */
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev,
.carousel-inner .carousel-item.active.carousel-item-start,
.carousel-inner .carousel-item.active.carousel-item-end {
opacity: 0;
transition: opacity 2s ease-in-out;
}

/* Garante que apenas o slide ativo seja visível */
.carousel-inner .carousel-item-next.carousel-item-start,
.carousel-inner .carousel-item-prev.carousel-item-end {
opacity: 1;
}

/* Estilizando o input de imagem */
.image-upload {
  position: relative;
  display: inline-block;
}

#file-input {
  display: none; /* Oculta o input real */
}

#file-input + label {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

#file-input + label:hover {
  background-color: #0056b3;
}

.preview-container {
  margin-top: 10px;
}

.preview-container img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 5px;
  object-fit: cover;
}



/* Container de translação contínua dos parceiros */
.partners-viewport {
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.partners-track {
  display: flex;
  gap: 1.5rem; /* gap-6 */
  will-change: transform;
}

  /* ESTILOS PARA DROPDOWNS DESKTOP */
  .dropdown-menu {
    display: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
  }

  .dropdown-group:hover .dropdown-menu,
  .dropdown-group:focus-within .dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Área invisível de ponte para evitar que o menu feche ao passar o rato */
  .dropdown-group::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
  }


  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal.active {
    opacity: 1;
    transform: translateY(0);
  }
  .partners-viewport {
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  }