/* =========================
   Certificates Section
========================= */

/* =========================
   Text Contrast Fix
========================= */

/* =========================
   Certificates Carousel Images
========================= */

/* Image styling inside carousel */
.certificate-img {
  border-radius: 0.75rem; /* rounded corners */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); /* subtle shadow for depth */
  max-height: 500px; /* limits image height */
  object-fit: contain; /* scales image while preserving aspect ratio */
  width: 100%; /* full width container */
  height: auto;
  background: none; /* removes any background fill */
}

/* =========================
   Carousel Controls (Arrows)
========================= */

/* Light mode arrows - black */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: brightness(0) saturate(100%); /* ensures pure black arrows */
}

/* Dark mode arrows - white */
body.dark-mode .carousel-control-prev-icon,
body.dark-mode .carousel-control-next-icon {
  filter: brightness(0) invert(1); /* inverts color to pure white */
}

/* =========================
     Responsive spacing
========================= */
@media (max-width: 575.98px) {
  .certificates-section .container {
    padding-left: 3rem;
    padding-right: 3rem; /* better spacing on small screens */
  }
}