.orphior-gallery-wrapper {
  display: flex;
  gap: 20px;
  position: relative;
  max-width: 100%;
}

/* Make sure the thumbnail container allows scrolling */
.orphior-thumbnails {
  width: 100px;
  height: 400px;  /* Adjust the height to a reasonable value */
  overflow-y: auto; /* Allow vertical scrolling */
  display: block;
  position: relative;
  margin-right: 20px; /* Ensure space for the main image */
}

.orphior-thumbnails .swiper-wrapper {
  display: flex;
  flex-direction: column;
  height: auto;
}

.orphior-thumbnails .swiper-slide {
  margin-bottom: 10px; /* Space between thumbnails */
  opacity: 0.6;
  transition: opacity 0.3s;
}

.orphior-thumbnails .swiper-slide-thumb-active {
  opacity: 1;
  border: 2px solid #000;
}

/* Make sure the main image area takes up the remaining space */
.orphior-main-image {
  flex: 1;
  position: relative;
}

.orphior-main-image .swiper-slide {
  display: flex;
  justify-content: center;
/*   align-items: center; */
}

/* .orphior-main-image img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
} */
.orphior-main-image .swiper-slide img {
  width: 100%; /* Ensure images cover the full width of their container */
  height: 400px; /* Set a fixed height for all images (adjust as needed) */
  object-fit: cover; /* Make sure images maintain aspect ratio and cover the container */
  object-position: center; /* Center the image within the container */
	transition: transform 0.3s ease;
}
.orphior-main-image .orphior-image-zoom:hover img {
  transform: scale(1.05);
}



/* Dots for mobile */
.orphior-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
  display: none; /* Hide dots on desktop */
}

.orphior-dots .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #999;
  opacity: 0.7;
  margin: 0 5px;
  border-radius: 50%;
  display: inline-block;
}

.orphior-dots .swiper-pagination-bullet-active {
  background: #000;
  opacity: 1;
}
/* Magnifier Glass */
.orphior-zoom-icon {
    position: absolute;
    border-radius: 50%;
    cursor: none;
    width: 40px;
    height: 40px;
    z-index: 10;
    opacity: 0.6;
    background-color: #fff;
    color: #000;
    padding: 0px;
    top: 5px;
    right: 5px;
    border: none;
	cursor:pointer;
	display:none;
}
.orphior-zoom-icon:hover{
	background-color:#fff;
	
}
.orphior-main-image .swiper-slide.swiper-slide-active .orphior-zoom-icon{
	display:block;
}

/* PhotoSwipe UI Custom */
.pswp__button--arrow {
    
    top: 88% !important;
    
}
.pswp__button--arrow--next {
	position:absolute !important;
    right: 40% !important;
}
.pswp__button--arrow--prev {
    right: auto;
    left: 40% !important;
}
.pswp__button{
	background:#fff !important;
	background-image:none !important;
	width: 40px !important;
    height: 40px !important;
	border-radius: 50% !important;
}




/* Responsive */
@media screen and (max-width: 769px) {
  .orphior-gallery-wrapper {
    flex-direction: column;
    gap: 10px;
  }

  .orphior-thumbnails {
    display: none; /* Hide thumbnails on mobile */
  }

  .orphior-main-image {
    width: 100%;
  }

  /* Ensure the dots are horizontally aligned */
.orphior-dots {
  display: flex; /* Align the dots in a row */
  justify-content: flex-start; /* Align dots to the left */
  flex-wrap: nowrap; /* Prevent dots from wrapping */
  gap: 10px; /* Space between dots */
  margin-top: 10px; /* Space above the dots */
  overflow-x: auto; /* Allow horizontal scrolling if dots overflow */
  white-space: nowrap; /* Prevent line breaks between dots */
  max-width: 100%; /* Ensure the dots container doesn’t exceed parent width */
}

/* Prevent default vertical scrollbars */
.orphior-dots::-webkit-scrollbar {
  height: 6px; /* Adjust the scrollbar height */
	display:none;
}
	.orphior-main-image .swiper-slide {
    width: 90%;
    max-width: 100%;
		
  }

.orphior-dots::-webkit-scrollbar-thumb {
  display:none;
}

.orphior-dots::-webkit-scrollbar-track {
  display:none;
}

.orphior-dot {
  width: 10px; /* Size of each dot */
  height: 10px; /* Size of each dot */
  background-color: #bbb; /* Inactive dot color */
  border-radius: 50%; /* Make the dots round */
  cursor: pointer; /* Change the cursor on hover */
  transition: background-color 0.3s ease; /* Smooth transition on hover */
}
	.orphior-zoom-icon {
    top: 80%;
    
   
}
	.pswp__button--arrow--next {
	
    right: 25% !important;
}
.pswp__button--arrow--prev {
    
    left: 25% !important;
}

}