/* Targeted fix for the small gap at the bottom of hero slider */

/* Fix for desktop view */
.hero-section {
    margin-bottom: -1px !important; /* Negative margin to eliminate the small gap */
  }
  
  /* Fix for the next section */
  .about-section,
  .features-section,
  .news-section,
  .testimonials-section,
  .cta-section,
  section:not(.hero-section) {
    margin-top: 0 !important;
    padding-top: 60px !important; /* Add padding to the top of the next section instead */
    position: relative;
    z-index: 5; /* Ensure it's above the hero section */
  }
  
  /* Fix for any container that might be causing the gap */
  .hero-section .container,
  .hero-slider .container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Fix for row elements */
  .hero-section .row,
  .hero-slider .row {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Fix for any potential overflow issues */
  .hero-slide-desktop,
  .hero-slide-mobile {
    overflow: hidden;
  }
  
  /* Fix for mobile view - revert to previous working heights */
  @media (max-width: 767px) {
    .hero-slider {
      height: 450px !important; /* Fixed height for mobile */
      min-height: auto !important;
      max-height: none !important;
    }
  }
  
  @media (max-width: 480px) {
    .hero-slider {
      height: 400px !important; /* Fixed height for small mobile */
    }
  }