@media (max-width: 768px) {
  /* Responsive Banner Slider CSS */
  .swiper-container#slider {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
  }

  #top-line{position: relative;}

  .swiper-container#slider .swiper-slide {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio - adjust as needed */
    position: relative;
    background-size: cover;
    background-position: center;
  }

  .swiper-container#slider .slide-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

/* Media queries for different screen sizes */

  .swiper-container#slider .swiper-slide {
    padding-bottom: 75%; /* Taller aspect ratio for mobile */
  }
  
  .swiper-container#slider .swiper-button-next,
  .swiper-container#slider .swiper-button-prev {
    transform: scale(0.7); /* Smaller navigation buttons on mobile */
  }

  .slide-inner .header-text {top: 134px;}
  
  .slide-inner .header-text h2{font-size: 26px; line-height: 30px; margin-bottom: 15px;}
  .slide-inner .header-text .div-dec{margin-bottom: 15px;}
}

@media (max-width: 480px) {
  .swiper-container#slider .swiper-slide {
    padding-bottom: 75%; /* Square aspect ratio for small mobile */
  }
}