.hero {
  background: url('../img/hero-desktop.webp') center/cover no-repeat;
  min-height: 60vh;
  color: #fff;
}
.hero .btn-outline-light {
  border-color: rgba(255,255,255,.6);
}
.object-fit-cover { object-fit: cover; }

/* Prije/Poslije compare */
.compare-wrap { position: relative; width: 100%; padding-top: 56.25%; background: #000; }
.compare-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare-slider { position: absolute; left: 0; right: 0; bottom: 1rem; width: 90%; margin: 0 auto; display: block; }
.compare-labels { position: absolute; top: .75rem; left: .75rem; right: .75rem; display: flex; justify-content: space-between; pointer-events: none; }


/* Hero responsive background for mobile */
@media (max-width: 576px) {
  .hero {
    background-image: url('../img/hero-mobile.webp');
  }
}

/* Poluprozirna podloga ispod naslova i opisa u hero sekciji */
.caption-wrap{
  display:inline-block;
  background: rgba(0,0,0,.45);
  color:#fff;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  max-width: 56rem;
}

.caption-wrap .lead,
.caption-wrap h1{ color:#fff; }

/* Malo jača pozadina na manjim ekranima radi čitljivosti */
@media (max-width: 576px){
  .caption-wrap{ background: rgba(0,0,0,.55); }
}

.caption-wrap .btn { margin-top: .25rem; }
.caption-wrap .btn-outline-light { border-color: rgba(255,255,255,.7); color: #fff; }
.caption-wrap .btn-outline-light:hover { background: rgba(255,255,255,.12); }