.modal {
    display: none; /* Escondido por padrão */
    position: fixed; /* Fica fixo na tela */
    z-index: 1; /* Fica no topo */
    left: 0;
    top: 0;
    width: 100%; /* Largura total */
    height: 100%; /* Altura total */
    overflow: auto; /* Habilita a rolagem se necessário */
    background-color: rgba(0,0,0,0.4); /* Cor de fundo com opacidade */
    backdrop-filter: blur(8px);
  }
  
  .modal-content {
    margin: 4% auto; /* 15% do topo e centralizado horizontalmente */
   /* padding: 20px;*/
    width: 56%; /* Largura do conteúdo */
    height: 70%;
  }
  
  .closeModal {
    color: #aaaaaa;
    margin-left: 60%;
    font-size: 40px;
    font-weight: bold;
  }
  
  .closeModal:hover,
  .closeModal:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }


  .modalNot {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.208);
    backdrop-filter: blur(8px);
}

  .modal-content-Not {
      display: flex; /* Adicionado para usar flexbox */
      flex-direction: column; /* Organiza os filhos em coluna */
      align-items: center; /* Centraliza horizontalmente os itens filhos */
      justify-content: center; /* Centraliza verticalmente os itens filhos, se necessário */
      position: relative;
      max-width: 1000px;
      width: 55%; /* Ajuste conforme necessário */
      height: auto;
  }

  .image-container {
      width: 100%; /* Ocupa toda a largura de .modal-content-Not */
      display: flex; /* Usa flexbox para centralizar a imagem */
      justify-content: center; /* Centraliza a imagem horizontalmente */
      align-items: center; /* Centraliza a imagem verticalmente, se for uma imagem alta */
  }

  .close-button-Not {
    color: #ff7b00;
    position: relative; /* Posicionamento absoluto */
    font-size: 60px;
    left: 16%;
  }
  
  .close-button-Not:hover,
  .close-button-Not:focus {
    color: rgb(42,61,153);
    text-decoration: none;
    cursor: pointer;
  }

  .titleNot{
    color: white;
    size:10px;
  }


  /*modal estilos*/
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 24px;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    transition: transform 0.2s;
}

.prev:hover, .next:hover {
    transform: translateY(-50%) scale(1.1);
}

.prev {
    left: 18%;
}

.next {
    right: 18%;
}

#modalImg {
    display: block;
    width: 100%;
    transition: opacity 0.5s ease;
}