/* ====================================================
   1 . Global Reset
   ==================================================== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  /* text-decoration:none;  ← uncomment if you really need it */
}

/* ====================================================
   2 . Banner
   ==================================================== */
.banner{
  width:calc(100% - 40px);
  margin:0 auto;
  border-radius:7px;
  overflow:hidden;
}
.banner .item{
  height:250px;
  margin-top:-50px;
  background:whitesmoke;
}
/* Transparent hover for any buttons inside a banner */
.banner button:hover,
.banner button:focus,
.banner .button:hover,
.banner .button:focus{
  background-color:transparent!important;
}

/* ====================================================
   3 . Bootstrap Carousel Overrides
   ==================================================== */
.carousel{
  border-radius:10px;
  overflow:hidden;
}
.carousel-inner{max-height:500px!important;}
.carousel-inner .carousel-item img{
  width:100%;
  max-height:500px;
  object-fit:cover;
}
.carousel-indicators{margin-bottom:0!important;}
.carousel-control-prev,
.carousel-control-next{width:15%!important;}        /* mobile default */
a.active{background:red;}

/* ====================================================
   4 . Owl Carousel Overrides
   ==================================================== */
.owl-carousel .owl-prev,
.owl-carousel .owl-next{
  width:40px;
  position:absolute;
  top:calc(50% - 22px);        /* centre vertically */
}
.owl-carousel .owl-prev{left:0;}
.owl-carousel .owl-next{right:0;}

.owl-carousel .owl-prev span,
.owl-carousel .owl-next span{
  position:absolute;
  top:-8px;
  font-size:40px;
}
.owl-carousel .owl-prev span{left:13px;}
.owl-carousel .owl-next span{right:13px;}

.owl-theme .owl-nav [class*="owl-"]{
  color:#fff;
  font-size:39px;
  background:rgba(0,0,0,.1);
  border-radius:3px;
}
.owl-theme .owl-nav [class*="owl-"]:hover{
  background:rgba(0,0,0,.4);
}

/* Dot navigation */
.owl-theme .owl-dots{
  position:absolute;
  left:50%;
  margin-top:-25px;
  transform:translateX(-50%);
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span{
  background:orangered;
}

/* Utility tweaks */
.owl-carousel .owl-stage{padding-left:0!important;}                /* remove default left padding  */
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next{color:#000!important;}      /* make arrows visible */

/* ====================================================
   5 . Responsive Tweaks  (mobile-first)
   ==================================================== */
/* Carousel arrow hit-area width */
@media (min-width:426px){
  .carousel-control-prev,
  .carousel-control-next{width:10%!important;}
}
@media (min-width:721px){
  .carousel-control-prev,
  .carousel-control-next{width:5%!important;}
}

/* Banner / image heights */
@media (max-width:374px){                /* ≤ 374 px */
  .banner,
  .banner .carousel-item img, .banner-error, .not-found-data img{height:81px;}
}
@media (min-width:375px) and (max-width:423px){
  .banner,
  .banner .carousel-item img, .banner-error, .not-found-data img{height:100px;}
}
@media (min-width:424px) and (max-width:575px){
  .banner,
  .banner .carousel-item img, .banner-error, .not-found-data img{height:120px;}
}
@media (min-width:576px) and (max-width:767px){
  .banner,
  .banner .carousel-item img, .banner-error, .not-found-data img{height:150px;}
}
@media (min-width:768px) and (max-width:991px){
  .banner,
  .banner .carousel-item img, .banner-error, .not-found-data img{height:250px;}
}
@media (min-width: 992px){
  .banner, .banner-error {
    height: 350px;
  }
  
  .banner .carousel-item img, .not-found-data img {
    width: 100%;
    height: 350px;
    object-fit: cover; /* or 'contain' depending on your needs */
    object-position: center; /* this centers the image */
  }
}

/* layout for showing two images per slide */
.carousel-item.double{display:flex;}
.carousel-item.double img{
  width:50%;
  object-fit:cover;
}
.carousel-item.double img:first-child{border-right:2px solid #fff;}