/* Small responsive layout fixes to improve mobile appearance */

@media (max-width: 768px) {
  .slider_section {
    padding: 40px 0;
  }
  .slider_section .detail-box h2 {
    font-size: 1.6rem;
  }
  .heading_container h2 {
    font-size: 1.8rem;
  }
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Ensure slider images scale smoothly */
.slider_img.img-fluid {
  width: 100%;
  height: auto;
  max-height: 450px;
}

/* Ensure mission image is responsive inside its box */
.mision-img-box img.img-fluid {
  width: 100%;
  height: auto;
}

/* Slightly reduce large heading spacing on narrow screens */
@media (max-width: 480px) {
  .heading_container {
    margin-bottom: 28px;
  }
  .heading_container h2 {
    font-size: 1.4rem;
    padding-bottom: 10px;
  }
}

/* Gallery modal: place navigation arrows outside image bounds and adapt on small screens */
#gallery_section .modal-content {
  overflow: visible; /* allow arrows to sit outside the modal image */
  position: relative;
}

#prevBtn, #nextBtn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  font-size: 2rem !important;
  color: #fff !important;
  z-index: 3 !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#prevBtn { left: -52px !important; }
#nextBtn { right: -52px !important; }

/* On very small screens keep arrows below image to avoid covering content */
@media (max-width: 576px) {
  #prevBtn, #nextBtn {
    position: static !important;
    transform: none !important;
    font-size: 1.6rem !important;
    margin: 8px !important;
    color: #fff !important;
  }
  #gallery_section .modal-content .p-3 {
    padding-bottom: 8px !important;
  }
}