/* ======================================================
   Banner CSS – FINAL (Desktop + Mobile fixed)
   ====================================================== */

/* Desktop / Mobile visibility helpers */
._desktop1 {
  display: block;
}
._mobile21 {
  display: none;
}

/* Slick arrows */
._t52A6a .slick-prev {
  left: 25px !important;
}
._t52A6a .slick-next {
  right: 42px !important;
}
._t52A6a .slick-next::before,
._t52A6a .slick-prev::before {
  color: #35c31e !important;
  font-size: 40px !important;
}
._t52A6a .slick-next,
._t52A6a .slick-prev {
  z-index: 9;
}

/* ======================================================
   Banner container
   ====================================================== */
._banner111 {
  width: 100%;
  height: 550px;              /* desktop height */
  overflow: hidden;
}

/* Slick internal structure must fill banner */
._banner111 .slick-slider,
._banner111 .slick-list,
._banner111 .slick-track,
._banner111 .slick-slide,
._banner111 ._t4t6a {
  width: 100%;
  height: 100% !important;
}

/* Banner image – DESKTOP (NO CUTTING) */
._banner111 img {
  width: 100%;
  height: 100%;
  object-fit: contain;        /* ✅ FULL IMAGE, NO CROP */
  object-position: center;
  display: block;
  background: #000;           /* fills empty space cleanly */
}

/* ======================================================
   Mobile styles
   ====================================================== */
@media only screen and (max-width: 810px) {
  ._desktop1 {
    display: none;
  }
  ._mobile21 {
    display: block;
  }

  ._banner111 {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;     /* mobile ratio */
    overflow: hidden;
  }

  ._t4t6a {
    width: 100%;
    height: 215px !important;
  }

  /* Mobile banner keeps cover look */
  ._banner111 img {
    object-fit: cover;        /* mobile looks good */
    background: none;
  }
}