.btn:focus, .btn:active, button:focus, button:active {
      outline: none !important;
      box-shadow: none !important;
  }

  #image-gallery .modal-footer{
      display: block;
  }

  .thumb {
      margin-top: 15px;
      margin-bottom: 15px;
      overflow: hidden; / Hide the overflowing part of the image /
      position: relative; / Needed for the overlay /
  }

  .thumbnail {
      display: block;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 4px;
      height: 200px; / Fixed height for all thumbnails /
      transition: all 0.3s ease;
  }

  .thumbnail:hover {
      transform: scale(1.05); / Zoom in effect /
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
  }

  .thumbnail img.img-thumbnail {
      width: 100%;
      height: 100%;
      object-fit: cover; / This is the magic property /
      object-position: center;
  }

  /*/ Add a caption overlay on hover /*/
  .thumbnail::after {
      content: attr(data-title); / Use the title from the data attribute /
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: rgba(0, 0, 0, 0.6);
      color: white;
      padding: 10px;
      text-align: center;
      opacity: 0;
      transition: opacity 0.3s ease;
      font-size: 14px;
  }

  .thumbnail:hover::after {
      opacity: 1;
  }

  /*/ Modal animation /*/
  .modal.fade .modal-dialog {
      transform: translate(0, -25%);
      transition: transform 0.3s ease-out;
  }

  .modal.show .modal-dialog {
      transform: translate(0, 0);
  }