/* Centering the Title and Gallery */
.gallery-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  width: 100%;
  padding: 100px;
  background: linear-gradient(
    to right,
    rgba(9, 115, 183, 1),
    rgba(9, 115, 183, 0) 100%,
    transparent
  );
  justify-content: flex-start; /* Align to the left */
  padding-left: 20px; /* Optional: add some padding to the left */
}

.gallery-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 20px;
  padding-top: 100px;
}

.gallery-container {
  display: grid; /* Use grid layout */
  grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
  gap: 20px; /* Spacing between items */
  max-width: 100%; /* Full width for responsive design */
  grid-auto-rows: minmax(250px, auto); /* Ensure consistent card height */
  justify-items: start; /* Align grid items to the left */
}

.card {
  width: 100%; /* Card takes up full width of its container */
  max-width: 250px; /* Maximum width of the card */
  height: 260px; /* Fixed card height */
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s;
}

.card:hover {
  transform: scale(1.05);
}

.card img {
  width: 100%;
  height: 200px; /* Fixed image height */
  object-fit: cover; /* Maintain aspect ratio */
}

.card h2 {
  padding: 10px;
  margin: 0;
  font-size: 1.2rem;
  text-align: center;
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  width: 90%;
  position: relative;
  max-height: 80vh;
  overflow-y: auto;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 1.8rem;
  cursor: pointer;
  z-index: 1;
}

.close-btns {
  position: absolute;
  top: 20px;
  right: 40px;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 1;
  color: white;
}

.modal-images {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(5, 1fr);
}

.modal-images img {
  width: 100%; /* Make sure it fills the width of the grid cell */
  height: 200px; /* Fixed height for all images */
  object-fit: cover; /* Ensure images cover the area while maintaining aspect ratio */
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.3s ease;
  object-position: bottom;
}

.modal-images img:hover {
  transform: scale(1.05);
}

/* Lightbox Image */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.lightbox img {
  max-width: 90%;
  max-height: 80%;
}

.lightbox-content {
  max-width: 80%;
  max-height: 80%;
  border-radius: 10px; /* Optional: for rounded corners */
}

.nav-buttons {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%); /* Center vertically */
}

.nav-buttons button {
  background-color: rgba(0, 0, 0, 0.6);
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  padding: 10px;
}

.nav-buttons button:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Responsive Design */
@media screen and (max-width: 1200px) {
  .gallery-container {
    grid-template-columns: repeat(3, 1fr); /* Adjust to 3 columns */
  }

  .card {
    height: 220px; /* Adjust card height */
  }

  .card img {
    height: 160px; /* Adjust image height */
  }

  .modal-images {
    grid-template-columns: repeat(4, 1fr); /* Adjust to 4 columns */
  }

}

@media screen and (max-width: 992px) {
  .gallery-container {
    grid-template-columns: repeat(2, 1fr); /* Adjust to 2 columns */
  }

  .gallery-wrapper {
    padding: 50px; /* Reduce padding */
  }

  .gallery-title {
    font-size: 1.8rem; /* Adjust title font size */
  }

  .modal-images {
    grid-template-columns: repeat(3, 1fr); /* Adjust to 3 columns */
    gap: 15px; /* Reduce gap */
    margin-left: 20px;
    margin-right: 20px;
  }
}

@media screen and (max-width: 768px) {
  .gallery-container {
    grid-template-columns: repeat(2, 1fr); /* Single column for very small screens */
  }
  .card {
    height: 200px; /* Adjust card height */
  }

  .card h2 {
    font-size: 1rem; /* Further reduce text size */
  }

  .card img {
    height: 150px; /* Adjust image height */
  }

  .modal-content {
    width: 95%; /* Reduce modal width */
  }

  .nav-buttons button {
    font-size: 1.5rem; /* Adjust button size */
  }

  .modal-images {
    grid-template-columns: repeat(2, 1fr); /* Adjust to 2 columns */
    gap: 10px; /* Further reduce gap */
    margin-left: 20px;
    margin-right: 20px;
  }
}

@media screen and (max-width: 576px) {
  .gallery-container {
    grid-template-columns: repeat(2, 1fr); /* Single column for very small screens */
  }

  .gallery-wrapper {
    padding: 20px; /* Further reduce padding for very small devices */
  }

  .gallery-title {
    font-size: 1.5rem; /* Adjust title font size */
  }

  .card {
    height: 180px; /* Adjust card height */
  }

  .card h2 {
    font-size: 1rem; /* Smallest size for very small screens */
  }

  .card img {
    height: 120px; /* Adjust image height */
  }

  .modal-content {
    padding: 10px; /* Reduce modal padding */
  }

  .nav-buttons button {
    font-size: 1.2rem; /* Smaller buttons for tiny screens */
    padding: 5px;
  }

  .modal-images {
    grid-template-columns: 1fr; /* Single column for very small screens */
    gap: 15px; /* Minimal gap */
    margin-left: 20px;
    margin-right: 20px;
}
}