:root{
  --bg:#ffffff;
  --surface:#f7fafb;
  --text:#0b2533;
  --muted:#556b7a;
  --brand:#007bff;
  --brand-2:#00c4b3;
  --border:#e5edf2;
}
html{scroll-behavior:smooth}
body{font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; background:var(--bg); color:var(--text)}
a{color:var(--brand)}
.navbar{background:rgba(255,255,255,.85)!important; backdrop-filter:saturate(120%) blur(6px); border-bottom:1px solid var(--border)}
.navbar .nav-link{color:#2c3e50}
.hero{min-height:62vh; display:flex; align-items:center; position:relative; background:
  linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 60%, rgba(255,255,255,1) 100%);
}
.hero .hero-img{border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.08)}
.section-title{color:#0b2533}
.text-muted{color:var(--muted)!important}
.card{background:#fff; color:var(--text); border:1px solid var(--border)}
.card .list-group-item{background:transparent; color:var(--text); border-color:var(--border)}
.accordion-button{background:#fff; color:var(--text)}
.accordion-button:not(.collapsed){background:linear-gradient(90deg, rgba(0,123,255,.08), rgba(0,196,179,.08))}
.btn-brand{background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#fff; border:0; font-weight:700}
.btn-brand:hover{opacity:.9; color:#fff}
.badge-soft{background:#eef6ff; color:#2466a8; border:1px solid #d7e8ff}
.gallery-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
@media(min-width:768px){ .gallery-grid{grid-template-columns:repeat(4,1fr)} }
.gallery-grid img{width:100%; height:170px; object-fit:cover; border-radius:12px; display:block}
.footer{background:#f4f7f9; color:#5e7482; border-top:1px solid var(--border)}
.small-caps{letter-spacing:.08em; text-transform:uppercase; font-weight:700; font-size:.8rem; color:#5e7482}

.hero {
  background-image: url("img/hero-background.jpg"); /* zamijeni putanju prema tvojoj slici */
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 70vh;
  position: relative;
  display: flex;
  align-items: center;
  color: white;
}

.hero-overlay {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 1;
}

.hero .container {
  position: relative;
  z-index: 2;
}

.hero-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  margin: 0 0 2rem;
  max-width: 800px;
}


.activity-info {
  padding: 4rem 0; /* prilagodi po visini */
}

.activity-info .section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
}

.activity-info .info-list li {
  display: flex;
  align-items: flex-start;
}

.activity-info .info-list .icon {
  font-size: 1.75rem;
  color: #00aaff; /* prilagodi boju ikone po brendu */
  margin-top: 0.25rem;
}

.activity-info .info-list strong {
  display: block;
  margin-bottom: 0.25rem;
}

@media (max-width: 767px) {
  .activity-info .info-list li {
    flex: 1 1 100%;
  }
}