:root{ --brand:#7b49a3; }
html{scroll-behavior:smooth}
.py-6{padding-top:4rem;padding-bottom:4rem}
.hero{
  min-height: 70vh;
  background-image: url('../img/hero-mobile.webp');
  background-size: cover;
  background-position: center;
  position: relative;
}
@media (min-width:768px){
  .hero{background-image:url('../img/hero-desktop.webp');min-height:80vh}
}
.hero .hero-overlay{
  position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 100%);
}
.navbar{backdrop-filter:saturate(120%) blur(6px)}
.btn-primary{--bs-btn-bg:var(--brand);--bs-btn-border-color:var(--brand)}
.text-primary{color:var(--brand)!important}
.badge.text-bg-light{background:#fff;border:1px solid #eee}
.hover-rise{transition: transform .25s ease, box-shadow .25s ease}
.hover-rise:hover{transform:translateY(-4px);box-shadow:0 1rem 2rem rgba(0,0,0,.08)!important}
/* Animations */
[data-anim]{opacity:.001;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.in{opacity:1!important;transform:none!important}
/* Gallery helpers */
.aspect-square{aspect-ratio:1 / 1}
.object-cover{object-fit:cover}

/* Galerija — estetika i efekti */
.gallery-card { 
  position: relative; 
  aspect-ratio: 1 / 1; 
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}
.gallery-card img { 
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.gallery-card::after{ /* suptilni gradient overlay na hover */
  content:""; position:absolute; inset:0; 
  background:linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.08));
  opacity:0; transition:opacity .25s ease;
}
.gallery-card:hover { 
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,.12);
}
.gallery-card:hover::after{ opacity:1; }

/* Appear animacija */
.gallery-item.reveal {
  animation: gfade .5s ease forwards;
}
@keyframes gfade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* Hero fade-in efekt */
.hero h1, 
.hero p, 
.hero .btn {
  opacity: 0;
  transform: translateY(20px);
  animation: heroFade 1s ease-out forwards;
}

.hero h1 { animation-delay: 0.2s; }
.hero p { animation-delay: 0.4s; }
.hero .btn { animation-delay: 0.6s; }

@keyframes heroFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hover efekt na galerijske slike */
#galerija img {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

#galerija a:hover img {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}


/* Sticky navigacija s blur efektom */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  backdrop-filter: blur(12px);
  background-color: rgba(255,255,255,0.8) !important;
  transition: background-color 0.3s ease;
}

.navbar.scrolled {
  background-color: rgba(255,255,255,0.95) !important;
}

/* Gradient efekt na gumbe */
.btn-primary {
  background: linear-gradient(135deg, #8a2be2, #ff69b4);
  border: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.4s ease;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  background: linear-gradient(135deg, #ff69b4, #8a2be2);
}







/* Parallax efekt za hero background */
.hero {
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}


/* Rješavanje predugog teksta u hero sekciji na mobitelu */
.hero h1, 
.hero p {
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Ako želiš da se font automatski smanjuje na mobitelu */
@media (max-width: 576px) {
  .hero h1 {
    font-size: 1.6rem;
  }
  .hero p {
    font-size: 1rem;
  }
}