/*=================
  IMAGE GALLERY SQUARE
=================*/

.image-gallery-square {
  background: var(--color-s);
  padding: var(--space-7) 0;
  /* Add overflow-x hidden to the section to prevent horizontal scrollbars */
  overflow-x: hidden;
}

.image-gallery-square .swiper {
  height: 700px;
  margin-bottom: var(--space-2);
}

.image-gallery-square .swiper-wrapper {
    /* Align items to the center vertically */
    align-items: center;
}

.image-gallery-square .swiper-slide {
    /* Define the width for non-active slides */
    width: 500px;
    height: 408px;
    transition: width 0.4s ease, height 0.4s ease;
}

.image-gallery-square .swiper-slide-active {
    /* Define the width for the active slide */
    width: 700px;
    height: 700px;
}

.image-gallery-square .swiper-slide .image {
  /* Let the image fill its container (.swiper-slide) */
  width: 100%;
  height: 100%;
  border-radius: 5px;
  transition: 0.3s;
}

.image-gallery-square .navigation {
  display: flex;
  justify-content: space-between;
  width: 700px;
  max-width: 90%; /* Prevent overflow on smaller screens */
  color: var(--color-p);
  margin: 0 auto;
}

.image-gallery-square .navigation .buttons {
  display: flex;
  gap: 10px; /* Use gap for spacing */
}

.image-gallery-square .navigation .buttons .slider-next {
  rotate: 180deg;
}

.image-gallery-square .navigation .buttons svg {
  cursor: pointer;
}

.image-gallery-square .navigation .buttons svg:hover {
  fill: var(--color-a);
}

.image-gallery-square .navigation .buttons svg:hover .arrow {
  stroke: var(--color-n-white);
}


/*=================
  RESPONSIVE
=================*/

@media only screen and (max-width: 992px) {
  .image-gallery-square {
    padding: var(--space-6) 0;
  }

  .image-gallery-square .swiper-slide {
      width: 400px; /* Adjust non-active slide width */
      height: 340px;
  }

  .image-gallery-square .swiper,
  .image-gallery-square .swiper-slide-active {
    height: 600px;
    width: 600px;
  }
}

@media only screen and (max-width: 768px) {
  .image-gallery-square {
    padding: var(--space-5) 0;
  }
  
  .image-gallery-square .swiper-slide {
    width: 280px; /* Adjust non-active slide width */
    height: 250px;
  }

  .image-gallery-square .swiper,
  .image-gallery-square .swiper-slide-active {
    height: 380px;
    width: 380px;
  }

  .image-gallery-square .navigation {
    width: 100%;
    max-width: 100%; /* Allow full width */
    padding: 0 15px;
  }
}