/* Base */
:root{
  --brand:#0053b1;
  --brand-2:#00a0ff;
  --soft: 24px;
}
body{scroll-behavior:smooth}
.section-title{font-weight:700}

/* Brand badge (inspired by Portadekor pill) */
.brand-badge{
  display:inline-grid;place-items:center;
  width:32px;height:32px;border-radius:12px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;font-weight:800;
}

/* Hero */
.hero-section{position:relative;min-height:70vh;overflow:hidden}
.hero-bg{
  position:absolute;inset:0;
  background:radial-gradient(80rem 40rem at 20% -10%, rgba(0,160,255,.25), transparent),
             radial-gradient(60rem 30rem at 120% 10%, rgba(0,83,177,.25), transparent),
             linear-gradient(180deg, #0d6efd, #2ea3ff);
  filter:saturate(90%);
  z-index:-1;
}
.hero-card{border-radius:1.25rem}

/* Feature cards */
.feature-card{
  border-radius:1rem;background:#fff;border:1px solid rgba(0,0,0,.05);
  box-shadow:0 1px 2px rgba(0,0,0,.03);
  transition:.25s ease;
}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,.08)}
.icon-wrap{
  width:56px;height:56px;border-radius:16px;
  display:grid;place-items:center;font-size:24px;
  background:linear-gradient(135deg, #f0f7ff, #e7f3ff);color:#0d6efd
}

/* Buttons */
.btn-gradient{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));border:0;
}
.btn-gradient:hover{filter:brightness(.95)}

/* Cards hover (Portadekor-style lift) */
.hover-lift{transition:transform .25s ease, box-shadow .25s ease}
.hover-lift:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(0,0,0,.12)}

/* Placeholder image boxes */
.placeholder-img{border-radius:.75rem; background:linear-gradient(135deg,#f8fbff,#eef6ff)}

/* Carousel controls to edges */
#reviewsCarousel .carousel-control-prev,
#reviewsCarousel .carousel-control-next{
  width:8%;opacity:.9
}
#reviewsCarousel .carousel-control-prev{justify-content:flex-start;padding-left:.5rem}
#reviewsCarousel .carousel-control-next{justify-content:flex-end;padding-right:.5rem}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1; transform:none}

/* Product grid filters */
.filter-btn.active{background:#f0f6ff;border-color:#d6e8ff}

/* Footer */
footer{background:#fff}

/* Small tweaks */
.navbar .btn{border-radius:.8rem}
.card{border-radius:1rem}
img{max-width:100%;height:auto;display:block}

/* HERO wrapper */
.hero-section{
  position: relative;
  min-height: 72vh;
  color: #fff;
  overflow: hidden;
}

/* Pozadinska slika hero-a */
.hero-bg{
  position: absolute;
  inset: 0;
  background-image: url("../img/hero-roletarstvodona.webp"); /* NOVO */
  background-size: cover;
  background-position: center;
  will-change: transform;
}

/* Tamni overlay radi čitljivosti teksta */
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.25));
}

/* Kartica u heru */
.hero-card{
  border: 0;
}

/* Malo “odmaka” na manjim ekranima */
@media (max-width: 576px){
  .hero-section .container{ padding-top: 3rem; padding-bottom: 2rem; }
}

#galerija img{
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: .5rem;
}

.prod-img {
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform .4s ease;
}

.prod-card:hover .prod-img {
  transform: scale(1.05);
}

.prod-card {
  transition: box-shadow .3s ease;
}

.prod-card:hover {
  box-shadow: 0 .75rem 1.25rem rgba(0,0,0,.15);
}
.logo-navbar {
  height: 36px;     /* visina kao do sada */
  width: auto;      /* zadrži proporcije */
  max-width: 180px; /* limitiraj širinu za navbar */
}

/* Logo u navbaru – točna visina i kontrola širine */
.navbar .brand-logo{
  height: 36px !important;
  max-height: 36px !important;
  width: auto !important;
  object-fit: contain;
  display: block;
}

/* Manji padding oko branda da navbar ne bude visok */
.navbar .navbar-brand{
  padding-top: .25rem;
  padding-bottom: .25rem;
  line-height: 1;
}

/* Po želji dodatno suzi na mobitelu */
@media (max-width: 991.98px){
  .navbar .brand-logo{ height: 32px !important; }
}