/* Only the existing home-page banner image and four indicator dots are affected. */
body[data-page="home"] .hero .hero-image .mapsa-hero-slide {
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  will-change:opacity;
  transition:opacity .75s ease;
  pointer-events:none;
}
body[data-page="home"] .hero .hero-image .mapsa-hero-slide-bottom {opacity:1;z-index:1}
body[data-page="home"] .hero .hero-image .mapsa-hero-slide-top {opacity:0;z-index:2}
body[data-page="home"] .hero .dots{z-index:4;left:50%;transform:translateX(-50%);align-items:center;}
body[data-page="home"] .hero .dots button{
  appearance:none;position:relative;width:9px;height:9px;border-radius:100%;
  background:rgba(255,255,255,.76);border:0;padding:0;min-width:0;
  box-shadow:none;transition:background .2s,transform .2s;
}
body[data-page="home"] .hero .dots button.selected{
  width:10px;height:10px;background:#11b8ad;transform:scale(1.08);
}
body[data-page="home"] .hero .dots button:disabled{opacity:.27;cursor:default;}
body[data-page="home"] .hero .dots button:focus-visible{outline:2px solid #fff;outline-offset:5px;}
body[data-page="home"] .hero .dots button.mapsa-progress::after{
  content:'';position:absolute;inset:-5px;border:1px solid #49d9d0;border-radius:50%;
  animation:mapsa-dot-progress 5s linear 1 both;pointer-events:none;
}
@keyframes mapsa-dot-progress {
  from {opacity:.22;transform:scale(.8)}
  50% {opacity:1;transform:scale(1.15)}
  to {opacity:.22;transform:scale(.8)}
}
@media(prefers-reduced-motion:reduce){
  body[data-page="home"] .hero .hero-image .mapsa-hero-slide{transition:none}
  body[data-page="home"] .hero .dots button.mapsa-progress::after{animation:none}
}