/* ===== glightbox ==== */
/* GLightbox Styling */
.glightbox-container {
  background-color: rgba(0, 0, 0, 0.8);
}

/* front page */
.front-page {
  max-height: 75vh;
  max-width: 100%
}

/* ===== General Styles ===== */

.header-container {
  padding: 10px 15px;
}

.header-image {
  max-width: 250px;
  width: 100%;
  height: auto;
}


.gslide-title {
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .header-image {
    max-width: 450px;
    width: 450px;
    margin-left: -1rem;
  }
}

@media (max-width: 767px) {
  .header-container {
    padding: 5px 10px;
  }
}

@media (max-width: 375px) {
  .header-image {
    max-width: 180px;
  }
}

/* Reset margins and paddings, set min-height and flex layout */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Make the .container-fluid flex-grow to fill the available space */
.container-fluid {
  flex: 1;
}

/* ===== Typography ===== */

/* Category title styles */
.category-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0;
  margin-left: 1rem;
}

@media (min-width: 768px) {
  .category-title {
    margin-left: 0rem !important;
  }
}

/* Link styles */
a {
  color: #000000;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #333333;
}

/* ===== Footer ===== */
footer {
  margin-top: auto;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  color: #6c757d;
}

footer > div {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background-color: rgba(248, 249, 250, 0.8);
  border-radius: 0.25rem;
}

/* ===== Photo Grid ===== */

/* Photo grid layout */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  margin-top: 1rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Photo item styles */
.photo-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* Photo image styles */
.photo-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Photo image hover effect */
.photo-item:hover img {
  transform: scale(1.1);
  filter: blur(2px);
}

/* Photo overlay styles */
.photo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Photo overlay hover effect */
.photo-item:hover .photo-overlay {
  opacity: 1;
}

/* Photo overlay heading styles */
.photo-overlay h3 {
  margin: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  text-align: center;
  max-width: 100%;
  padding: 0 0.5rem;
}

.photo-overlay p {
  margin: 0.25rem 1rem;
  font-size: 0.875rem;
  text-align: center;
}

/* Square thumbnails for photo grid on mobile devices */
@media (max-width: 767.98px) {
  /* Adjust photo grid layout for mobile devices */
  .photo-grid {
    grid-template-columns: repeat(2, 1fr); /* Display 2 items per row on mobile */
  }

  /* Make photo items square on mobile devices */
  .photo-item {
    aspect-ratio: 1 / 1; /* Set aspect ratio to 1:1 (square) */
  }

  /* Adjust photo image styles for mobile devices */
  .photo-item img {
    height: 100%; /* Make the image fill the square container */
    object-fit: cover; /* Crop the image to fit the square container */
  }

  /* Smaller text on mobile overlays */
  .photo-overlay h3 {
    font-size: 0.875rem;
    margin: 0.25rem 0.5rem;
    padding: 0 0.25rem;
  }

  .photo-overlay p {
    font-size: 0.75rem;
    margin: 0.125rem 0.5rem;
  }
}

/* ===== Modal ===== */

/* Modal dialog styles */
.modal-dialog {
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease-out; /* Add transition for modal */
}

/* Modal content styles */
.modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: transparent;
  transition: transform 0.3s ease-out; /* Add transition for modal content */
}

/* Modal backdrop styles */
.modal-backdrop {
  backdrop-filter: blur(5px);
  background-color: rgba(0, 0, 0, 0.5);
}

/* Modal body styles */
.modal-body {
  padding: 0;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: transparent;
}

/* Modal carousel item transition */
.carousel-item {
  transition: transform 0.6s ease-in-out;
  backface-visibility: hidden; /* Improve performance for transitions */
}

/* Modal carousel item positioning */
.carousel-item-next,
.carousel-item-prev {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

/* Modal carousel item transitions */
.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
  transform: translateX(0);
}

.carousel-item-next,
.active.carousel-item-right {
  transform: translateX(100%);
}

.carousel-item-prev,
.active.carousel-item-left {
  transform: translateX(-100%);
}

.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
  transform: translateX(0);
}

.carousel-item-next.carousel-item-start,
.carousel-item-prev.carousel-item-end {
  transform: translateX(0);
}

.carousel-item-next,
.active.carousel-item-end {
  transform: translateX(-100%);
}

.carousel-item-prev,
.active.carousel-item-start {
  transform: translateX(100%);
}

/* Modal header styles */
.modal-header {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1rem;
  border: none;
  z-index: 1050;
}

/* Modal close button styles */
.modal-header .close {
  padding: 0;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.modal-header .close:hover {
  opacity: 1;
}

/* Modal image container styles */
.modal-image-container {
  position: relative;
  max-width: 100%;
  max-height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  touch-action: none;
}

/* Modal image styles */
.modal-image {
  max-width: 100%;
  max-height: 90vh;
  transition: transform 0.3s ease; /* Smooth image resizing transition */
}

/* Modal footer styles */
.modal-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.7);
}

/* Image info styles */
.image-info {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.image-info p {
  margin: 0;
  padding: 0 5px;
  font-size: 12px;
  line-height: 1.2;
  color: #fff;
}

/* ===== Navigation ===== */

/* Previous and next button styles */
.prev,
.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  z-index: 1051; /* Increase the z-index to appear on top */
  transition: opacity 0.3s ease; /* Smooth opacity transition */
}

.prev {
  left: 1rem;
}

.next {
  right: 1rem;
}

/* Disabled button styles */
.prev.disabled,
.next.disabled {
  opacity: 0.5; /* Reduce opacity for disabled state */
  cursor: not-allowed;
}

/* Desktop styles */
#mainImage {
  max-width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  #mainImage {
    width: 100%;
    height: calc(100vh - 60px); /* Adjust the value (60px) as needed */
    object-fit: cover;
    object-position: center;
  }
}

/* ===== Responsive Styles ===== */

@media (min-width: 768px) {
  /* Adjust column width for larger screens */
  .col-md-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 15%;
  }

  /* Adjust photo grid layout for larger screens */
  .photo-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Hide mobile menu toggle and keep navbar collapse visible */
  .mobile-menu-toggle {
    display: none;
  }

  #navbarCollapse {
    display: block !important;
  }

  .close-btn {
    display: none;
  }
}

@media (max-width: 767.98px) {
  /* Add margin-top for modal on smaller screens */
  .modal {
    margin-top: 3rem;
  }


  #mainImage {
    max-width: 100%;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
  }

  /* Adjust modal transition for smaller screens */
  .modal-dialog,
  .modal-content {
    transition: none; /* Remove transition for better performance */
  }

  /* Color for btn-link on smaller screens */
  .btn-link {
    color: black;
  }

  /* Mobile menu toggle styles */
  .mobile-menu-toggle {
    position: static;
    margin-left: auto;
  }

  #toggleButton {
    padding: 0.5rem;
    background-color: transparent;
    border: none;
  }

  /* Navbar collapse styles for smaller screens */
  #navbarCollapse {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 999;
    overflow-y: auto;
    padding: 4rem 1rem 1rem;
    display: none;
  }

  #navbarCollapse.show {
    display: block;
  }

  #navbarCollapse .nav {
    background-color: #fff;
    padding: 1rem;
    border-radius: 0.25rem;
    max-width: 300px;
    margin: 0 auto;
  }

  /* Close button styles for smaller screens */
  .close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.5rem;
    background-color: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
  }
}

@media (max-width: 576px) {
  /* Adjust font size for image info on smaller screens */
  .image-info p {
    font-size: 10px;
  }

  /* Override margin styles for smaller screens */
  .ml-3,
  .mx-3 {
    margin-left: 0rem !important;
  }
}

/* GLightbox caption styling */
.glightbox-container .gslide-description {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.85) 100%);
  padding: 10px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  text-align: center;
}

.glightbox-container .gslide-title {
  color: #fff;
  margin-bottom: 5px;
  font-size: 14px;
  line-height: 1.4;
}

.glightbox-container .gslide-desc {
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
}

/* Mobile captions - hidden via JS, no styling needed */