/* For spaces between the header and the hero section */
@media (max-width: 768px) {
  main.container {
    padding-top: 30px !important; /* Match header height */
  }
}


/* Hero Section Styling */
.hero-section img, .about-hero img {
    object-fit: cover;
}

/* Button hover effects */
.btn-primary {
    transition: transform 0.3s ease;
}
.btn-primary:hover {
    transform: translateY(-3px);
}




/* News Section - Fixed Image Height */
.news .card-img-top {
    height: 225px; 
    object-fit: cover; /* Ensures images fill the space without stretching */
    width: 100%;
  }
  
  /* Optional: Add hover effect to cards */
  .news .card {
    transition: transform 0.3s;
  }
  .news .card:hover {
    transform: translateY(-5px);
  }


/* For Fade in effects on scroll */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}


/* For hover effects */
.btn-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}



/* Beter visibility for carousel control*/
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(100%); /* Turns white icons to black */
}

/* ===== Video-friendly carousel controls ===== */
#projectMediaCarousel {
  position: relative;
}

/* Shrink prev/next into small circular buttons at the sides */
#projectMediaCarousel .carousel-control-prev,
#projectMediaCarousel .carousel-control-next {
  width: 36px;
  height: 36px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.55);
  border-radius: 50%;
  opacity: 0.85;
  z-index: 10;
  transition: opacity 0.2s;
}
#projectMediaCarousel .carousel-control-prev:hover,
#projectMediaCarousel .carousel-control-next:hover {
  opacity: 1;
}
#projectMediaCarousel .carousel-control-prev {
  left: 8px;
}
#projectMediaCarousel .carousel-control-next {
  right: 8px;
}
#projectMediaCarousel .carousel-control-prev-icon,
#projectMediaCarousel .carousel-control-next-icon {
  width: 16px;
  height: 16px;
}

/* Ensure native video controls sit above everything */
#projectMediaCarousel video {
  position: relative;
  z-index: 5;
}

/* About Hero */
.about-hero img {
  filter: brightness(0.6);
}

.about-hero h1 {
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}


/* Timeline */
.timeline-connector {
  position: absolute;
  left: 50%;
  width: 2px;
  background: #dee2e6;
  height: 100%;
}

.timeline-badge {
  width: 60px;
  height: 60px;
  background: var(--charity-navy);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: -30px;
  top: 20px;
  font-weight: bold;
}

.timeline-card {
  position: relative;
  margin-left: 40px;
}

/* Alternate sides for milestones */
.col-md-6:nth-child(even) .timeline-card {
  margin-left: 0;
  margin-right: 40px;
}




/* Partners */
.partner-logos img {
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.3s;
}

.partner-logos img:hover {
  filter: grayscale(0);
  opacity: 1;
}



/* Mobile menu styling */
.navbar-collapse {
  z-index: 1000; /* Ensure it overlaps content */
}

@media (max-width: 768px) {
  .navbar-collapse {
    position: absolute;
    width: 100%;
    top: 80px; /* Match header height */
    left: 0;
  }
}


/* Fixed image height for project cards */
.project-grid .card-img-top {
  height: 200px;
  object-fit: cover;
}

/* Smooth transition for filtering */
.project-card {
  transition: all 0.3s ease;
  opacity: 1;
}


/* Mobile filter buttons */
@media (max-width: 991px) {
  .project-grid .btn {
    margin: 4px ; /* Add spacing between buttons */
    flex: 1 1 auto; /* Allow buttons to grow/shrink */
    white-space: nowrap; /* Prevent text wrapping */
  }
}


/* Pagination styling */
.pagination {
  gap: 8px; /* Space between page items */
}

.page-item.active .page-link {
  background-color: #1a365d;
  border-color: #1a365d;
}

.page-link {
  color: #1a365d;
}

.page-link:hover {
  color: #fff;
  background-color: #1a365d;
  border-color: #1a365d;
}





/* Loading spinner */
.spinner-border {
  width: 3rem;
  height: 3rem;
}



/* Mobile-first Modal Styling */
@media (max-width: 768px) {
  #projectModal .modal-dialog {
    margin: 0;
    height: 100vh;             /* fallback for older browsers */
    height: 100dvh;            /* dynamic viewport height — excludes browser UI */
    max-height: 100vh;
    max-height: 100dvh;
  }

  #projectModal .modal-content {
    height: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }

  #projectModal .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Ensure content is not clipped — add bottom padding for safe area */
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  .description-scroll {
    max-height: none !important;
    overflow-y: visible !important;
  }

  .modal-image-container {
    max-height: 30vh;
    overflow: hidden;
  }

  #projectModal .modal-footer {
    flex-shrink: 0;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Progress bar in modal matches card layout — text below the bar */




/*Styling for fixed image heights for the projects which already has some styling bootstrap classes in project-card.php */
.card-img-top {
  height: 266.4px;
  object-fit: cover;
}




/* styling for contact-us page */
.card {
  border-radius: 15px;
  border: none;
}

.form-control:focus, .form-select:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  border-color: #86b7fe;
}

@media (max-width: 768px) {
  .card {
      margin: 0 15px;
  }
}



/* styling for Donate page */
.qr-code {
  max-width: 250px;
  transition: transform 0.3s ease;
  border: 2px solid #dee2e6;
  border-radius: 10px;
  padding: 10px;
}

.qr-code:hover {
  transform: scale(1.05);
}

.bank-logo {
  max-height: 40px;
  width: auto;
}

.bank-logo-sm {
  max-height: 30px;
  width: auto;
}

.copy-btn {
  padding: 2px 8px;
}

.bank-detail dt {
  font-weight: 600;
  color: #2c3e50;
}

.bank-detail dd {
  margin-bottom: 1rem;
}

.card {
  border-radius: 15px;
}

@media (max-width: 768px) {
  .qr-code {
      max-width: 200px;
  }
  
  .bank-detail dt {
      margin-top: 0.5rem;
  }
}

.bullet-icon {
  position: absolute;
  left: 0;
  top: 0.2em;
  color: #0d6efd;
  font-weight: bold;
}

/* Improve alert styling */
.alert-info {
  border-left: 4px solid #0d6efd;
  border-radius: 8px;
}

.alert h5 {
  color: #0d6efd;
}

.alert li {
  line-height: 1.6;
}

/* Add transition to copy buttons */
.copy-btn {
  transition: all 0.3s ease;
}
.copy-btn.text-success {
  border-color: #198754 !important;
}

.fa-check {
  color: #198754;
}
.copy-btn:hover {
  transform: scale(1.1);
}


/* Stylings for ANBI image */
.anbi-badge {
  transition: transform 0.3s ease;
}
.anbi-badge:hover {
  transform: scale(1.05);
  cursor: pointer;
}


/* Stylings related with the section made for income and expense in projects page */
.report-card {
    border: 2px solid rgba(0,123,255,0.2);
    transition: transform 0.3s ease;
}

.report-card:hover {
    transform: translateY(-5px);
}

.download-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.download-btn:hover {
    padding-right: 2.5rem;
}

.download-btn i {
    transition: transform 0.3s ease;
}

.download-btn:hover i {
    transform: translateY(3px);
}

.icon-wrapper {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.embed-responsive {
    border-radius: 5px;
    overflow: hidden;
    background: #f8f9fa;
    min-height: 500px;
}