.menu-esquerdo {
  padding: 15px;
  margin-top: 20px; /* Adiciona margem superior para descer o menu */
}

.user-menu {
  position: fixed; /* Fixa o ícone no canto da tela */
  top: 25px; /* Distância do topo */
  right: 25px; /* Distância do canto direito */
  z-index: 1000; /* Garante que ele fique acima de outros elementos */
  display: inline-block;
}

.user-icon {
  font-size: 24px;
  cursor: pointer;
}

.user-icon:hover {
  color: #970000; /* Opcional: altera a cor do ícone no hover */
  filter: drop-shadow(0 4px 8px rgba(255, 0, 0, 0.4)); /* Sombra com tom roxo */
  transition: filter 0.3s ease; /* Animação suave para a sombra */
}


.user-options {
  position: absolute;
  right: 0;
  top: 30px;
  background-color: #fff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  list-style: none;
  padding: 10px 0;
  min-width: 120px;
  z-index: 1000;
  overflow: hidden;
  transform-origin: top;
  transform: scaleY(0); /* Começa fechado */
  transition: transform 0.3s ease; /* Tempo normal de abertura/fechamento */
  opacity: 0; /* Oculto */
  pointer-events: none; /* Impede clique quando fechado */
}

.user-options.show {
  transform: scaleY(1); /* Abre */
  opacity: 1; /* Torna visível */
  pointer-events: auto; /* Permite clique quando aberto */
}

.user-options li {
  padding: 8px 16px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.user-options.show li {
  opacity: 1;
  transform: translateY(0);
}

.user-options li a {
  text-decoration: none;
  color: #333;
  display: block;
}

.user-options li:hover {
  background-color: #f2f2f2;
}


/* Animação para o efeito deslizante */
@keyframes slideIn {
  from {
      opacity: 0;
      transform: translateY(-10px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.menu-esquerdo .card1 {
  margin-top: 70px; /* Ajuste o valor conforme necessário */
}

/* Ajuste para telas menores (tablets) */
@media screen and (max-width: 1168px) {
  .video-center {
    max-width: 100%; /* O vídeo ocupa toda a largura disponível */
    margin: 0 auto; /* Centraliza o vídeo */
  }

  .video-center img {
    max-width: 100%;
    height: auto;
  }
}

/* Ajuste para celulares pequenos */
@media screen and (max-width: 480px) {
  .video-center {
    max-width: 100%; /* O vídeo ocupa toda a largura disponível */
    margin: 0 auto; /* Centraliza o vídeo */
  }

  .video-center img {
    max-width: 100%;
    height: auto;
  }
}