/* Modal container */
  .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }

  /* Modal content */
  .modal-content {
    position: absolute;
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 95%;
    max-width: 1600px; /* Adjust this value as needed */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* Modal body */
  .modal-body {
    display: flex;
  }

  /* Left column */
  .modal-left {
    flex: 1;
    padding: 20px;
  }

  /* Right column */
  .modal-right {
    flex: 1;
    text-align: center;
    padding: 20px;
  }

  .modal-right img {
    max-width: 100%;
    height: auto;
  }

  /* Close button */
  .close {
    color: #aaa;
    float: right;
    font-size: 50px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: #000; /* Mudança de cor ao passar o mouse ou foco */
    text-decoration: none; /* Remove sublinhado ao passar o mouse ou foco */
    cursor: pointer; /* Altera o cursor para indicar que é clicável */
  }
  
  /* Estilo para remover bullets e tornar itens inline */
  ul.thumbnail-list {
    list-style-type: none; /* Remove os bullets */
    padding: 0; /* Remove o espaçamento padrão */
  }
  
  .thumbnail-list li {
    display: inline-block; /* Torna os itens de lista inline */
    margin-right: 10px; /* Espaçamento entre as imagens */
  }
  
  /* CSS for mobile devices (up to 767px width) */
  @media (max-width: 767px) {
    /* Ensure modal-body takes full width and is scrollable */
    .modal-body {
      display: flex;
      flex-direction: column;
      overflow-y: auto; /* Enable vertical scrolling */
      max-height: 80vh; /* Set maximum height for scrolling */
    }

    /* Adjust modal-left and modal-right */
    .modal-left, .modal-right {
      width: 100%; /* Full width for both columns */
    }
  }
  
  /* Image container styles */
  .image-container {
    position: relative;
  }

  .image-container img {
    display: block;
    transition: opacity 0.3s ease;
  }

  .image-container .hover-image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .image-container:hover .hover-image {
    opacity: 1;
  }

  .image-container:hover img:first-child {
    opacity: 0;
  }

  .image-container img {
    transition: opacity 0.5s ease-in-out;
    max-height: 650px;	
    margin: auto;
  }

  .image-container .hover-image {
    transition: opacity 0.5s ease-in-out;
  }

  .example-image-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 345px; /* Garante que a altura da âncora é 100% do contêiner pai */
  }

  .example-image-link img {
    max-width: 100%; /* Garante que a largura da imagem não ultrapasse o contêiner pai */
    max-height: 100%; /* Garante que a altura da imagem não ultrapasse o contêiner pai */
  }
  
  .bolinha-vermelha {
    width: 9px;
    height: 9px;
    background-color: red;
    border-radius: 50%;
    display: inline-block;
    margin-left: 10px;
  }