/* Gallery Section wrapper remains the same */
#GallerySection {
    background-color: var(--secondary-color);
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* Container styling remains the same */
.GalleryContainer {
    background-color: #04164a;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

@media (min-width: 769px) {
    .GalleryContainer {
        max-height: 1000px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* for smoother scrolling on iOS */
    }
  }
  
  @media (max-width: 768px) {
    .GalleryContainer {
        max-height: none;
        overflow-y: visible;
    }
  }

/* Add transition for smooth filtering/layout changes */
.gallery-grid .isotope-item {
    transition-property: transform, opacity;
    transition-duration: 0.4s;
}

.gallery-grid {
  position: relative;
}


.gallery-item {
  box-sizing: border-box;
  width: 24%;
  float: left;
  margin-bottom: 10px;
  
}

.gallery-item img {
    border-radius: 10px;
}

/* 3) Tablet: 3 columns */
@media (max-width: 992px) {
  .gallery-item {
    width: 32%;
  }
}

/* 4) Phone: 2 columns */
@media (max-width: 576px) {
  .gallery-item {
    width: 31%;
  }
}

/* 5) Make sure images fill their item and keep aspect ratio */
.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
}