/* --- Custom Swiper Navigation Buttons --- */
.about-page-swiper-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10; /* Ensure buttons are above slides */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Override Swiper's default appearance */
  width: auto; /* Let content determine width */
  height: auto; /* Let content determine height */
  margin-top: 0; /* Remove swiper's default margin */
  background: none; /* No background color/image */
  color: rgba(255, 255, 255, 0.8); /* White arrow with slight transparency */
  transition: color 0.2s ease;
}

.about-page-swiper-button:hover {
  color: rgba(255, 255, 255, 1); /* Fully opaque on hover */
  background: unset;
}

/* Style the actual arrow icon (using Swiper's default ::after) */
.about-page-swiper-button::after {
  font-size: 2.5rem; /* Adjust size of the chevron arrow */
  font-weight: bold; /* Make it bolder if needed */
  /* Swiper uses 'swiper-icons' font-family by default */
  /* content property is automatically set by swiper ('next' or 'prev') */
}

/* Position the buttons */
.about-page-swiper-button-prev {
  left: 30px; /* Adjust distance from left edge */
}

.about-page-swiper-button-next {
  right: 20px; /* Adjust distance from right edge */
}

/* Hide default Swiper focus outline if desired */
.about-page-swiper-button:focus {
  outline: none;
  box-shadow: none;
}