.my-custom-gallery .container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* Ensures absolute positioning is relative to this container */
  height: 700px; /* Maximum height of the container */
  width: 1000px; /* Maximum width of the container */
  overflow: hidden; /* Ensures that any part of the image outside the bounds is not shown */
}

.my-custom-gallery img {
  position: absolute;
  max-height: 100%; /* Images will scale down if they exceed the container's height */
  max-width: 100%; /* Images will scale down if they exceed the container's width */
  opacity: 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  transition: opacity 0.8s;
  object-fit: contain; /* This makes the image scale correctly within its box */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the images */
}

.my-custom-gallery .show {
  opacity: 1;
}

.my-custom-gallery .prev-arrow, .my-custom-gallery .next-arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 10px 15px;
  font-size: 24px;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.my-custom-gallery .prev-arrow:hover, .my-custom-gallery .next-arrow:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.my-custom-gallery .prev-arrow {
  left: 10px;
}

.my-custom-gallery .next-arrow {
  right: 10px;
}



/* Styles for the left text block */
.left-block {
  /* Apply left margin only when the screen is wide enough */
  margin-left: 50%; /* Give some space from the right side */
}

/* Styles for the right text block */
.right-block {
  /* Apply right margin only when the screen is wide enough */
  margin-right: 50%; /* Give some space from the left side */
}

.center{
      /* Apply right margin only when the screen is wide enough */
  margin-right: 20%; /* Give some space from the left side */
  margin-left: 20%;
}

/* Responsive adjustments */
@media screen and (max-width: 1024px) {
  .left-block, .right-block {
    /* Reduce margin and font size on smaller screens */
    margin: 0 2%; /* More sensible margins on smaller screens */
    font-size: 90%; /* Slightly smaller font */
  }
}

@media screen and (max-width: 768px) {
  .left-block, .right-block {
    /* Further reduce margin and font size for tablets and mobile phones */
    margin: 0 1%; /* Even smaller margins for mobile */
    font-size: 80%; /* Even smaller font for better readability */
  }
}