:root {
  --container-max-width: 1200px;
  --thumb-nav-max-width: 600px;
  --main-img-max-width: 500px; /* Adjusted max width for larger images */
  --thumb-img-max-width: 75px;
}

/* Center and Scale Main Image in Slider */
#project-detail .product-images .main-img-slider a img {
  display: block;
  max-width: var(--main-img-max-width);
  max-height: 100%; /* Fit image within slider */
  margin: 0 auto;
  object-fit: cover; /* Ensures the image scales to cover */
}

/* Slick Slider Main Image Alignment */
.slick-slide {
  display: flex !important;
  justify-content: center;
  align-items: center;
  height: auto;
  padding: 10px;
}

/* Center Thumbnail Navigation */
#project-detail .product-images .thumb-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; /* Add space between thumbnails */
  margin: 20px auto;
  max-width: var(--thumb-nav-max-width);
}

/* Thumbnail Sizing and Border */
#project-detail .product-images .thumb-nav li img {
  display: block;
  width: 100%;
  max-width: var(--thumb-img-max-width);
  height: auto;
  border: 2px solid #eee;
  transition: border-color 0.25s;
}

/* Active Thumbnail Border */
#project-detail .product-images .thumb-nav li.slick-current img {
  border-color: #d12f81;
}

/* Fancybox Styling for Centered and Fit Images */
.fancybox__content {
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 80vh; /* Limits height to viewport */
  overflow: hidden;
}

.fancybox__image {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover; /* Ensures image scales to cover the area */
  border-radius: 8px; /* Optional: rounded corners */
}

/* Slick Slider Controls */
.slick-slider .slick-prev,
.slick-slider .slick-next {
  z-index: 100;
  font-size: 2.5em;
  height: 40px;
  width: 40px;
  color: #000;
  opacity: 0.3;
  position: absolute;
  top: 50%;
  cursor: pointer;
  transition: opacity 0.25s;
  margin-top: -10px;
  text-align: center;
}

.slick-slider .slick-prev:hover,
.slick-slider .slick-next:hover {
  opacity: 0.65;
}

.slick-slider .slick-prev {
  left: 0;
}

.slick-slider .slick-next {
  right: 0;
}

/* Responsive Adjustments */
@media (max-width: 992px) { /* Tablet */
  #project-detail .product-images {
    padding: 15px;
  }
  #project-detail .product-images .main-img-slider a img {
    max-width: 100%;
  }
}

@media (max-width: 768px) { /* Mobile */
  #project-detail .product-images .thumb-nav {
    padding: 10px 5px;
    gap: 5px; /* Reduce gap for smaller screens */
  }
  #project-detail .product-images .thumb-nav li img {
    max-width: 50px; /* Smaller thumbnails for mobile */
  }
}