/* SPS 2026: retain the homepage's fadeInLeft / background zoom animations. */
#swiperbanner .swiper-slide.banner10 .sliderimg {
  width: 100% !important;
  height: 100% !important;
  background-color: #052b58;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

#swiperbanner .swiper-slide.banner10 .bannertext {
  z-index: 13;
  pointer-events: none;
}

#swiperbanner .swiper-slide.banner10 .con {
  width: 100%;
}

/* Match slide 4's .t1 left padding; keep .tbox's existing animation. */
#swiperbanner .swiper-slide.banner10 .tbox {
  padding-left: 100px;
}

#swiperbanner .banner10 .sps-banner-card {
  position: relative;
  width: min(37.5vw, 672px);
  max-width: calc(100vw - 200px);
  aspect-ratio: 672 / 372;
  overflow: hidden;
}

/* The supplied PNG has cutout residue. Crop only its outside edges in CSS:
   source 720 x 424; clean region x=24, y=28, width=672, height=372. */
#swiperbanner .banner10 .sps-banner-card img {
  display: block;
  position: absolute;
  top: -7.52688172%;
  left: -3.57142857%;
  width: 107.14285714%;
  max-width: none;
  height: auto;
}

/* The existing tablet layout has no fixed carousel height. */
@media (min-width: 769px) and (max-width: 1199px) {
  .swiperbannerbox #swiperbanner {
    height: clamp(420px, 56.25vw, 640px) !important;
  }
  #swiperbanner > .swiper-wrapper > .swiper-slide {
    height: 100% !important;
    min-height: 0;
  }
  #swiperbanner .swiper-slide.banner10 .tbox {
    padding-left: 100px;
  }
  #swiperbanner .banner10 .sps-banner-card {
    width: min(48vw, 540px);
  }
  /* Once the carousel has a height, following sections must stay in flow. */
  .products-section .container,
  .news-section .container {
    top: auto;
    transform: none;
  }
}

@media (max-width: 768px) {
  #swiperbanner .swiper-slide.banner10 .con {
    top: 52%;
    transform: translateY(-50%);
  }
  #swiperbanner .swiper-slide.banner10 .tbox {
    padding-left: 15px;
  }
  #swiperbanner .banner10 .sps-banner-card {
    width: min(70vw, 460px);
    max-width: calc(100vw - 30px);
  }
  #swiperbanner .swiper-slide.banner10 .sliderimg {
    background-position: 64% center;
  }
}