:root{
  --accent:#0f5132; /* elegant olive-green tone */
  --dark:#212529;
}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}
.section-title{font-weight:800;}
.section-lead{color:#6c757d}
.hero { position: relative; background: linear-gradient(120deg,#2b3035 0%, #495057 100%); }
.hero .hero-logo{max-width: 380px; width: 100%; filter: drop-shadow(0 8px 24px rgba(0,0,0,.3));}
.hero-gradient{position:absolute; inset:0; background: radial-gradient(60% 60% at 70% 20%, rgba(255,255,255,.12), transparent 60%); pointer-events:none}
.bg-gradient{background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);}
.icon-list { list-style:none; padding-left:0; }
.icon-list li{display:flex; align-items:center; gap:.5rem; margin:.4rem 0}
.icon-list i{color:var(--accent)}

.service-card{background:#fff; transition:transform .25s ease, box-shadow .25s ease}
.service-card:hover{transform:translateY(-3px); box-shadow:0 1rem 2rem rgba(0,0,0,.08)}

#gallery-grid img{width:100%; height:260px; object-fit:cover; border-radius:1rem}
#gallery-grid .col-6{animation: fadeIn .5s ease both}
.fade-in{animation: fadeIn .6s ease both}
@keyframes fadeIn{from{opacity:0; transform: translateY(6px)} to{opacity:1; transform:none}}

footer{color:#6c757d}

/* About media grid: kvadratne pločice, svi isti format */
.media-tile .tile-media {
  width: 100%;
  height: 100%;
  object-fit: cover;    /* reže višak, zadržava fokus */
  display: block;
}
.media-tile video.tile-media { background: #000; } /* dok ne krene playback */

/* Manji, responzivan logotip u navbaru */
.navbar-brand .brand-logo{
  height: clamp(24px, 2.6vw, 34px); /* bilo je 44px */
  width: auto;
  display: block;
}
@media (max-width: 991.98px){
  .navbar-brand .brand-logo{ height: 30px; }
}
@media (max-width: 575.98px){
  .navbar-brand .brand-logo{ height: 26px; }
}

/* malo kompaktniji navbar (po želji) */
.navbar.sticky-top{
  --bs-navbar-padding-y: .5rem;
}



/* Manji, responzivan logo u hero sekciji */
.hero .hero-logo{
  width: clamp(120px, 18vw, 200px); /* <<< glavna kontrola veličine */
  height: auto;
  display: inline-block;
}

/* dodatna finija kontrola po breakpointima (po želji) */
@media (max-width: 991.98px){  /* tablet */
  .hero .hero-logo{ width: clamp(110px, 24vw, 180px); }
}
@media (max-width: 575.98px){  /* mobitel */
  .hero .hero-logo{ width: clamp(100px, 30vw, 160px); }
}





/* Masonry layout bez rupa, bez kropanja */
.masonry {
  column-gap: .75rem;         /* razmak među stupcima */
  column-count: 2;            /* 2 stupca na mobu/tabletu */
}
@media (min-width: 992px){     /* desktop */
  .masonry { column-count: 2; }
}
.masonry-item {
  break-inside: avoid;         /* spriječi lom unutar “pločice” */
  margin: 0 0 .75rem;          /* vertikalni razmak */
}
.masonry-item img{
  width: 100%;
  height: auto;                /* zadrži omjer — “as is” */
  display: block;
}

.hero-logo-top{
  display:block;
  max-width:140px;
  height:auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
  opacity:.95;
}
@media (min-width: 992px){
  .hero-logo-top{ max-width:180px; }
}


.hero-logo-top{
  display:block;
  margin-inline:auto;      /* centriranje */
  max-width:160px;
  height:auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
  opacity:.95;
}
@media (min-width: 992px){
  .hero-logo-top{ max-width:180px; }
}