/* Custom CSS for Swiper */
  .hero-section .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
  }
  
  .hero-section .swiper-pagination-bullet-active {
    background: white;
    transform: scale(1.2);
  }
  
  /* Ensure proper stacking context */
  .hero-section .swiper-slide {
    height: 100%;
  }
  
  /* Mobile optimizations */
  @media (max-width: 768px) {
    .hero-section .swiper-button-next,
    .hero-section .swiper-button-prev {
      display: none !important;
    }
    
    .hero-section .swiper-pagination {
      bottom: 10px !important;
    }
    
    /* Optional: Add overlay for better text readability on mobile */
    .hero-section .swiper-slide::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 30%;
      background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
    }
  }
  
  /* Desktop optimizations */
  @media (min-width: 1024px) {
    .hero-section .swiper-button-next {
      right: 20px;
    }
    
    .hero-section .swiper-button-prev {
      left: 20px;
    }
  }