/* Primarna boja – navy blue */
:root {
  --bs-primary: #0b2a5b;
  --bs-primary-rgb: 11, 42, 91;
}

/* nema više gapa ispod navbara */
body {
  margin: 0;
  padding-top: 0;
}

.bg-soft-blue {
  background: #e9f2ff;
}

/* hero = cijeli viewport; navbar je preko */
.hero-100vh .carousel-item {
  height: 100vh;
}

/* eventualno malo sjenilo na navbaru za čitljivost */
.navbar.fixed-top {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.section-title {
  letter-spacing: .02em;
  margin-bottom: .75rem;
}

.lead-tight {
  line-height: 1.65;
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), .9);
  --bs-btn-hover-border-color: rgba(var(--bs-primary-rgb), .9);
  --bs-btn-active-bg: rgba(var(--bs-primary-rgb), 1);
  --bs-btn-active-border-color: rgba(var(--bs-primary-rgb), 1);
}

/* --- Carousel čitljivost teksta --- */
.hero-100vh .carousel-item {
  position: relative;
  /* za overlay */
}

/* 1) global overlay preko slike (par % zatamni sve fotke) */
.hero-100vh .carousel-item::before {
  content: "";
  position: absolute;
  inset: 0;
  /* kombinacija: blagi top gradient + tamnija univerzalna sjenka */
  background:
    linear-gradient(to top, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 35%),
    rgba(0, 0, 0, .25);
  pointer-events: none;
  z-index: 1;
}

/* 2) “glass” pozadina iza natpisa + text-shadow */
.hero-100vh .carousel-caption {
  z-index: 2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
  max-width: 46rem;
  padding: 1.25rem 1.5rem;
  border-radius: .6rem;
  background: rgba(0, 0, 0, .30);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);

  /* — FLOATING EFFECT — */
  transform: translateY(-10%);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
}

/* malo veći naslov na većim ekranima */
@media (min-width: 992px) {
  .hero-100vh .carousel-caption h1 {
    font-size: clamp(1.8rem, 2.6vw, 3rem);
  }
}

.margine {
  margin-top: 30px;
}


/* iOS / mobilni fix za visinu hero sekcije */
.hero-100vh {
  min-height: 100vh; /* fallback */
}

/* ako browser zna za dynamic viewport, koristi to umjesto klasičnog 100vh */
@supports (height: 100dvh) {
  .hero-100vh {
    min-height: 100dvh;
  }
}

/* Mobilni layout – uži i niže spušten tekst */
@media (max-width: 767.98px) {

  .hero-100vh .carousel-caption {
    bottom: 15%;
    padding: 1rem 1.25rem;
  }

  .hero-100vh .carousel-caption h1 {
    font-size: 1.4rem;       /* malo manji naslov na mobu */
  }

  .hero-100vh .carousel-caption p {
    font-size: 0.95rem;      /* i tekst mrvicu manji */
  }
}



/* -------------------------------------
   ABOUT — specifični stilovi
------------------------------------- */

/* Kartice usluga */
.service-card {
  background: #fff;
  border-radius: .5rem;
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
  transition: transform .15s ease, box-shadow .15s ease;
}

.service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}

/* Parallax grid (4 slike u širini, fixed background) */
.bg-soft-blue {
  background: #f6f9ff;
}

/* PARALLAX – mobilno-friendly (bez background-attachment: fixed) */
.parallax-section {
    position: relative;
    background-image: url("about/parallax.jpg");
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    min-height: 45vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Tamni overlay za eleganciju */
.parallax-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 34, 51, 0.45);
    z-index: 1;
}

.parallax-content {
    position: relative;
    z-index: 2;
}

/* Za mobilne uređaje (gdje background-attachment: fixed zna bugat) */
@media (max-width: 992px) {
    .parallax-section {
        background-attachment: scroll;
        min-height: 30vh;
    }
}

/* iOS/Safari fallback – disable fixed na starijim mobilnim browserima */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 991.98px) {
    .parallax-tile {
      background-attachment: scroll;
    }
  }
}

/* -------------------------------------
   TEAM — kartice osoba
------------------------------------- */

.person-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: .6rem;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
  transition: transform .12s ease, box-shadow .12s ease;
}

.person-card.slim {
  max-width: 520px;
  margin-inline: auto;
}

/* manje kartice, ljepše u gridu */
.person-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .08);
}

.person-photo {
  height: 220px;
  /* manja visina */
  background: #f5f7ff;
  overflow: hidden;
}

@media (max-width: 991.98px) {
  .person-photo {
    height: 180px;
  }
}

@media (max-width: 575.98px) {
  .person-photo {
    height: 160px;
  }
}

.person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.person-body {
  padding: .85rem .9rem 1rem;
}

.person-body .badge {
  font-weight: 500;
  border: 1px solid rgba(0, 0, 0, .06);
}

/* text link toggle instead of button */
.contact-toggle {
  font-size: .85rem;
  font-weight: 600;
  color: var(--bs-primary);
  text-decoration: none;
  cursor: pointer;
  padding: .1rem .2rem;
  transition: opacity .2s ease;
}

.contact-toggle:hover {
  color: rgba(var(--bs-primary-rgb), .75);
}

/* arrow icon in toggle */
.toggle-icon {
  transition: transform .2s ease;
  font-size: .85rem;
}

/* when opened: arrow rotates down */
.contact-toggle:not(.collapsed) .toggle-icon {
  transform: rotate(90deg);
}

/* icon color */
.contact-icon {
  color: var(--bs-primary);
  font-size: 1rem;
}

/* link clean */
.contact-link {
  color: var(--bs-primary);
  text-decoration: none;
  transition: color .2s ease;
}

.contact-link:hover {
  color: rgba(var(--bs-primary-rgb), .75);
}

/* -------------------------------------
   KONTAKT
------------------------------------- */

/* Kontakt — mapa responsive visina */
.map-embed {
  height: 320px;
}

@media (min-width: 992px) {
  .map-embed {
    height: 380px;
  }
}

/* Linkovi u kontakt kartici – bez underline, blagi hover */
.link-primary {
  color: var(--bs-primary);
}

.link-primary:hover {
  color: rgba(var(--bs-primary-rgb), .75);
}