.video-banner video { object-fit: cover; position: absolute; left: 0; top: 0;   z-index: 99; }

#top-bar { height: auto; }

/*.xzoom-gallery, .xzoom-gallery2, .xzoom-gallery3, .xzoom-gallery4, .xzoom-gallery5 { height: 350px; object-fit: cover; margin: 0 25px 25px 25px; }*/
.xzoom-gallery5 { height: 300px; object-fit: cover; margin: 0 25px 25px 25px; width: 300px !important; }
.mfp-bg { z-index:999999; }
.mfp-wrap { z-index:999999; }

.hidden-div { display: none; padding: 20px; background-color: lightblue; border: 1px solid #ccc; margin-top: 20px; margin-bottom: 50px; }

.gallery-nav button { padding: 8px 20px; margin: 5px; font-size: 16px; background: #333; color: #fff;  border: none;  cursor: pointer;  }
.gallery-nav button:hover {  background: #555; }

/*@media (max-width: 1599px) { .xzoom-thumbs img { width: 310px; height: 310px; } }
@media (max-width: 1399px) { .xzoom-thumbs img { width: 260px; height: 260px; } }
@media (max-width: 1199px) { .xzoom-thumbs img { width: 220px; height: 220px; margin: 0 6px 20px 6px; } }
@media (max-width: 991px) { .xzoom-thumbs img { width: 160px; height: 160px; } }
@media (max-width: 767px) { .xzoom-thumbs img { width: 120px; height: 120px; margin: 0 3px 10px 3px; } }
@media (max-width: 575px) { .xzoom-thumbs img { width: 60px; height: 60px; } }
*/
/* Image container - relative positioning to contain sub-images */
.image-container { position: relative; display: inline-block; }

/* Sub-image overlay container - positioned at the bottom of the main image */
.sub-images-overlay {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: none; /* Initially hidden */
  background-color: white; /* White background for the overlay */
  padding: 5px; /* Padding around the sub-images */
  border-radius: 8px; /* Rounded corners, you can adjust as needed */
  border: 2px solid #ddd; /* Light grey border */
}

/* Show sub-images when hovering over the main image */
.image-container:hover .sub-images-overlay {
  display: block; /* Make sub-images visible on hover */
}

/* Style for each sub-image */
.sub-image {
  width: 90px !important; /* Set the size for square images */
  height: 90px !important; /* Set the height same as width for a square shape */
  object-fit: cover; /* Ensures the image covers the square area without distortion */
  margin-right: 10px; /* Space between sub-images */
  border: 2px solid #ddd; /* Light grey border around each sub-image */
  background-color: white; /* White background for each sub-image */
  border-radius: 5px; /* Optional: Rounded corners for sub-images */
  margin: 0 5px 0 0;
}

/* Optionally, add a hover effect for sub-images */
.sub-image:hover {
  border-color: #3498db; /* Blue border on hover */
  cursor: pointer; /* Change cursor to indicate it's clickable */
}

.sub-images-overlay .sub-image:last-child {
    margin-right: 0;
}