/* BB GRADNJA — hero akcenti + logo u headeru */

/* Ujednačeni podnaslovi (.bb-kicker) i glavni naslovi sekcija (.section-title > h2) — Sora */
.section-title .bb-kicker {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin-bottom: 0.75rem;
  font-family: "Sora", sans-serif;
  font-size: 0.6875rem;
  line-height: 1.25;
}

.section-title .bb-kicker h6 {
  margin-bottom: 0 !important;
  font-family: inherit;
  font-size: 1em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #a00000;
  opacity: 1 !important;
}

.section-title > h2 {
  font-family: "Sora", sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-size: clamp(1.625rem, 1.15rem + 2.2vw, 3.4375rem);
  color: #181d4e;
  margin: 0;
}

.section-title > h2.text-white {
  color: #ffffff !important;
}

.section-title .bb-kicker__mark {
  flex-shrink: 0;
  display: block;
  width: 20px;
  min-width: 20px;
  height: 1em;
  align-self: center;
  background-color: #a00000;
  border-radius: 0;
  opacity: 1 !important;
}

.hero-bb {
  position: relative;
  background-color: #adadad;
  min-height: min(85vh, 720px);
  display: flex;
  align-items: center;
  padding: clamp(3.5rem, 10vw, 6rem) 0 clamp(3rem, 8vw, 5rem);
  overflow: hidden;
  font-family: "Sora", sans-serif;
}

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

.hero-bb__inner {
  max-width: 38rem;
  padding-left: 0.25rem;
}

.hero-bb__eyebrow {
  font-family: "Sora", sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 1.25rem;
}

.hero-bb__title {
  font-family: "Sora", sans-serif;
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0 0 1.35rem;
}

.hero-bb__lead {
  font-family: "Sora", sans-serif;
  font-size: clamp(1rem, 2vw, 1.125rem);
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  max-width: 32rem;
  margin: 0 0 2.25rem;
}

.hero-bb__cta {
  display: inline-block;
  font-family: "Sora", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff !important;
  background-color: #a00000;
  padding: 1rem 2.25rem;
  border-radius: 0;
  border: none;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.hero-bb__cta:hover {
  background-color: #860000;
  color: #ffffff !important;
}

/* Hero karusel — tri slajda, Unsplash pozadine + Owl */
.hero-bb.hero-bb--carousel {
  display: block;
  padding: 0;
  background-color: #1c1f26;
}

.hero-bb--carousel .hero-bb__slides.homepage-slides {
  width: 100%;
}

.hero-bb--carousel .hero-bb__slides .owl-stage-outer,
.hero-bb--carousel .hero-bb__slides .owl-stage,
.hero-bb--carousel .hero-bb__slides .owl-item {
  min-height: min(85vh, 720px);
}

.hero-bb__slide {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(85vh, 720px);
  padding: clamp(3.5rem, 10vw, 6rem) 0 clamp(3rem, 8vw, 5rem);
  overflow: hidden;
}

.hero-bb__slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  transform: scale(1.1);
  transform-origin: center center;
  will-change: transform;
}

.hero-bb__slide-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    105deg,
    rgba(14, 18, 28, 0.88) 0%,
    rgba(14, 18, 28, 0.55) 48%,
    rgba(14, 18, 28, 0.4) 100%
  );
  opacity: 0.9;
  will-change: opacity;
}

/* Aktivni slajd: pozadina (zoom-out) i scrim odvojeno od teksta (stagger-on nakon inicij. JS) */
.hero-bb--carousel.hero-bb--stagger-on:not(.hero-bb--motion-off) .hero-bb__slide:not(.hero-bb__slide--enter) .hero-bb__slide-bg {
  transform: scale(1.12);
  transition: none;
}

.hero-bb--carousel.hero-bb--stagger-on:not(.hero-bb--motion-off) .hero-bb__slide--enter .hero-bb__slide-bg {
  transform: scale(1);
  transition: transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-bb--carousel.hero-bb--stagger-on:not(.hero-bb--motion-off) .hero-bb__slide:not(.hero-bb__slide--enter) .hero-bb__slide-scrim {
  opacity: 0.82;
  transition: none;
}

.hero-bb--carousel.hero-bb--stagger-on:not(.hero-bb--motion-off) .hero-bb__slide--enter .hero-bb__slide-scrim {
  opacity: 1;
  transition: opacity 0.85s ease 0.08s;
}

/* Tekst: inicijalno skriven; ulaz odozdo, jedan za drugim */
.hero-bb--carousel.hero-bb--stagger-on:not(.hero-bb--motion-off) .hero-bb__slide:not(.hero-bb__slide--enter) .hero-bb__inner > * {
  opacity: 0;
  transform: translateY(2.25rem);
  transition: none;
}

.hero-bb--carousel.hero-bb--stagger-on:not(.hero-bb--motion-off) .hero-bb__slide--enter .hero-bb__inner > * {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-bb--carousel.hero-bb--stagger-on:not(.hero-bb--motion-off) .hero-bb__slide--enter .hero-bb__eyebrow {
  transition-delay: 0.06s;
}

.hero-bb--carousel.hero-bb--stagger-on:not(.hero-bb--motion-off) .hero-bb__slide--enter .hero-bb__title {
  transition-delay: 0.2s;
}

.hero-bb--carousel.hero-bb--stagger-on:not(.hero-bb--motion-off) .hero-bb__slide--enter .hero-bb__lead {
  transition-delay: 0.36s;
}

.hero-bb--carousel.hero-bb--stagger-on:not(.hero-bb--motion-off) .hero-bb__slide--enter .hero-bb__cta {
  transition-delay: 0.52s;
}

/* prefers-reduced-motion + JS klasa hero-bb--motion-off */
.hero-bb--carousel.hero-bb--motion-off .hero-bb__slide .hero-bb__slide-bg,
.hero-bb--carousel.hero-bb--motion-off .hero-bb__slide .hero-bb__slide-scrim,
.hero-bb--carousel.hero-bb--motion-off .hero-bb__slide .hero-bb__inner > * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero-bb--carousel .hero-bb__slide .hero-bb__slide-bg,
  .hero-bb--carousel .hero-bb__slide .hero-bb__slide-scrim,
  .hero-bb--carousel .hero-bb__slide .hero-bb__inner > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

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

.hero-bb--carousel .homepage-slides .owl-nav {
  z-index: 11;
}

.hero-bb--carousel .homepage-slides .owl-nav button.owl-prev,
.hero-bb--carousel .homepage-slides .owl-nav button.owl-next {
  visibility: visible;
  opacity: 0.7;
  border-color: rgba(255, 255, 255, 0.9);
  color: #fff;
  background: rgba(0, 0, 0, 0.25);
}

.hero-bb--carousel .homepage-slides:hover .owl-nav button.owl-prev,
.hero-bb--carousel .homepage-slides:hover .owl-nav button.owl-next {
  opacity: 0.85;
}

.hero-bb--carousel .homepage-slides .owl-nav button.owl-prev:hover,
.hero-bb--carousel .homepage-slides .owl-nav button.owl-next:hover {
  opacity: 1;
  background: #a00000;
  border-color: #a00000;
  color: #fff;
}

.hero-bb--carousel .homepage-slides .owl-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 11;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.hero-bb--carousel .homepage-slides .owl-dots .owl-dot span {
  background: rgba(255, 255, 255, 0.45);
}

.hero-bb--carousel .homepage-slides .owl-dots .owl-dot.active span,
.hero-bb--carousel .homepage-slides .owl-dots .owl-dot:hover span {
  background: #a00000;
}

/* Logo u headeru — široki SVG bez zadane visine često nestane u layoutu */
.header-area .header-inner-box .logo a.navbar-brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.header-area .header-inner-box .logo img {
  display: block;
  height: 44px;
  width: auto;
  max-width: min(280px, 70vw);
  object-fit: contain;
}

@media (max-width: 767px) {
  .header-area .header-inner-box .logo img {
    height: 36px;
    max-width: min(220px, 62vw);
  }
}

/* Početna — sekcija Naše usluge: jedva vidljiva svijetlosiva */
#service-page.bb-service-home {
  background-color: #f9f9fa;
}

/* Početna — „Naše usluge“ ostaje u jednom redu */
#service-page.bb-service-home .section-title > h2 {
  white-space: nowrap;
}

#service-page.bb-service-home .bb-service-home__cta-row {
  margin-top: 2.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

#service-page.bb-service-home .bb-service-home__all-btn {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
  padding: 1rem 2rem;
}

@media (max-width: 767px) {
  #service-page.bb-service-home .bb-service-home__cta-row {
    margin-top: 2rem;
  }
}

#service-page.bb-service-home .team-desc p {
  font-family: "Sora", sans-serif;
}

/* Stranica Usluge — mreža 2 kolone, tekst ispod slike (vizuel isti kao .single-service-item na početnoj) */
#service-page.bb-service-page .team-desc p {
  font-family: "Sora", sans-serif;
}

/* Slika puni širinu bloka (object-fit: cover) */
#service-page.bb-service-page .bb-service-page-item__visual {
  overflow: hidden;
}

#service-page.bb-service-page .bb-service-page-item__visual .service-img {
  width: 100%;
  max-width: 100%;
  display: block;
  line-height: 0;
}

#service-page.bb-service-page .bb-service-page-item__visual .service-img img {
  width: 100% !important;
  max-width: 100% !important;
  height: 360px !important;
  object-fit: cover;
  object-position: center;
  display: block !important;
}

@media (min-width: 992px) {
  #service-page.bb-service-page .bb-service-page-item__visual .service-img img {
    height: 400px !important;
  }
}

/* Naslov u overlayu na dnu slike — bez dodatnog razmaka ispod crvenog bloka */
#service-page.bb-service-page .service-content-bottom {
  margin-top: auto;
}

#service-page.bb-service-page .service-content-bottom .bb-service-card-title {
  margin-bottom: 0;
}

#service-page.bb-service-page .bb-service-page-item__body {
  padding-top: 1.15rem;
}

#service-page.bb-service-page .bb-service-page-item__body > p {
  font-family: "Sora", sans-serif;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #4a4d52;
  margin: 0;
}

/* Crveni blok naslova: h6 bez linka (stranica Usluge) — isti izgled kao <a> na početnoj */
#service-page.bb-service-home .bb-service-card-title > h6 {
  margin: 0;
  color: #fff !important;
  font-family: "Sora", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.125rem !important;
  line-height: 1.3;
}

@media (min-width: 992px) {
  #service-page.bb-service-home .bb-service-card-title > h6 {
    font-size: 1.1875rem !important;
  }
}

/* Kartice usluga — tamniji donji dio (gradient) ispod teksta + bold naslovi */
#service-page.bb-service-home .single-service-item::before {
  background: linear-gradient(
    to top,
    rgba(10, 12, 18, 0.88) 0%,
    rgba(10, 12, 18, 0.55) 32%,
    rgba(10, 12, 18, 0.2) 52%,
    transparent 72%
  );
  opacity: 1;
}

#service-page.bb-service-home .single-service-item:hover::before {
  opacity: 1;
  background: linear-gradient(
    to top,
    rgba(10, 12, 18, 0.92) 0%,
    rgba(10, 12, 18, 0.62) 38%,
    rgba(10, 12, 18, 0.22) 58%,
    transparent 76%
  );
}

#service-page.bb-service-home .single-service-item:hover::after {
  opacity: 0.22;
}

#service-page.bb-service-home .service-content-bottom h6,
#service-page.bb-service-home .service-content-bottom h6 a {
  font-family: "Sora", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

#service-page.bb-service-home .bb-service-card-title {
  display: inline-block;
  max-width: 100%;
  background-color: #a00000;
  padding: 0.5rem 1rem 0.55rem;
  margin: 0 0 0.75rem;
  box-shadow: 0 4px 14px rgba(160, 0, 0, 0.25);
}

#service-page.bb-service-home .bb-service-card-title h6 {
  margin: 0;
  line-height: 1.25;
}

#service-page.bb-service-home .bb-service-card-title h6 a {
  color: #fff !important;
  font-size: 1.125rem !important;
  line-height: 1.3;
  text-decoration: none;
  display: inline;
}

@media (min-width: 992px) {
  #service-page.bb-service-home .bb-service-card-title h6 a {
    font-size: 1.1875rem !important;
  }
}

#service-page.bb-service-home .bb-service-card-title h6 a:hover {
  color: #fff !important;
  opacity: 0.95;
}

#service-page.bb-service-home .service-content-bottom p {
  margin-top: 0;
}

/* Stranica Usluge — CTA ispod mreže (Nextrin: .cta-section + tamnocrvena + ghost .white-btn) */
.bb-page-cta.cta-section.theme-bg {
  background: linear-gradient(118deg, #6e0808 0%, #8a0e12 42%, #a00000 100%);
  padding-top: clamp(2.65rem, 5.5vw, 3.85rem);
  padding-bottom: clamp(2.65rem, 5.5vw, 3.85rem);
}

.bb-page-cta__title {
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: clamp(1.45rem, 3.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
}

.bb-page-cta .bb-page-cta__btn.white-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Sora", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 1rem 2.35rem;
  background-color: transparent !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.bb-page-cta .bb-page-cta__btn.white-btn:hover {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #6e0808 !important;
}

@media (max-width: 991px) {
  .bb-page-cta__actions {
    padding-top: 0.15rem;
  }
}

/* Index — Uvod u O nama: zamjena progress barova icon box-ovima */
#o-nama-uvod .bb-about-icon-box-area {
  padding-top: 0.25rem;
}

#o-nama-uvod .bb-about-icon-box {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0;
}

#o-nama-uvod .bb-about-icon-box:not(:last-child) {
  border-bottom: 1px solid rgba(24, 29, 78, 0.12);
}

#o-nama-uvod .bb-about-icon-box__icon {
  width: 3.75rem;
  height: 3.75rem;
  background-color: #fde8e8;
  color: #a00000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.85rem;
  flex-shrink: 0;
}

#o-nama-uvod .bb-about-icon-box h5 {
  margin: 0;
  font-family: "Sora", sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #181d4e;
}

/*
 * Uvod O nama: theme drži .work-image-two kao position:absolute → ne učestvuje u visini,
 * pa slika „curi” u sekciju ispod. Vraćamo u normalan tok + negativni margin za isti vizuel preklopa.
 */
#o-nama-uvod .work-img-wrap {
  position: relative;
  z-index: 1;
}

#o-nama-uvod .work-img-wrap .work-image-one {
  position: relative;
  z-index: 1;
}

#o-nama-uvod .work-img-wrap .work-image-two {
  position: relative;
  top: auto;
  left: auto;
  bottom: auto;
  z-index: 2;
  margin-top: clamp(-6.5rem, -20vw, -4rem);
}

@media (min-width: 768px) {
  #o-nama-uvod .work-img-wrap .work-image-two {
    margin-top: clamp(-9rem, -24vw, -5.5rem);
  }
}

@media (min-width: 1200px) {
  #o-nama-uvod .work-img-wrap .work-image-two {
    margin-top: clamp(-10.5rem, -18vw, -7rem);
  }
}

/* Zašto odabrati nas — lokalni video (autoplay, autoplay) */
#video-3.video-section .video-inner-box {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; /* video se kroji na dimenzije sekcije */
}

#video-3.video-section .bb-why-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* crop kao background */
  object-position: center;
  z-index: 1;
}

#video-3.video-section .play-btn {
  display: none; /* više ne treba overlay play kad se video sam pušta */
}

#service-3.bb-why-choose.dark-bg {
  background: #0a1120 !important;
}

#service-3.bb-why-choose.dark-bg::before {
  background: #0a1120 !important;
}

/* Nakon uklanjanja .pt-60 sa početne: vertikalni padding „Zašto odabrati nas” = globalni .section-padding */

#service-3.bb-why-choose .bb-why-copy p {
  font-family: "Sora", sans-serif;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

#service-3.bb-why-choose .bb-why-copy p:last-child {
  margin-bottom: 0;
}

/* Zašto odabrati nas — 2×2 grid na manjim ekranima, 1×4 od lg; Line Awesome u brand crvenoj */
#service-3.bb-why-choose .bb-why-features-row .single-service-item .service-icon i.las:before {
  font-family: "Line Awesome Free", "Line Awesome Brands", sans-serif !important;
  font-weight: 400;
  font-size: 3.25rem;
  color: #a00000;
}

@media (min-width: 992px) {
  #service-3.bb-why-choose .bb-why-features-row .single-service-item .service-icon i.las:before {
    font-size: 3.75rem;
  }
}

@media (max-width: 991.98px) {
  #service-3.bb-why-choose .bb-why-features-row .single-service-item {
    border-right: none !important;
    padding: 1.75rem 0.85rem 1.5rem;
    height: 100%;
  }

  #service-3.bb-why-choose .bb-why-features-row > [class*="col-"]:nth-child(odd) .single-service-item {
    border-right: 1px solid #191c42 !important;
  }

  #service-3.bb-why-choose .bb-why-features-row > [class*="col-"]:nth-child(-n + 2) .single-service-item {
    border-bottom: 1px solid #191c42;
    padding-bottom: 1.75rem;
  }

  #service-3.bb-why-choose .bb-why-features-row .single-service-item .service-title h4 {
    font-size: 1.05rem;
    line-height: 1.35;
    margin-top: 1.25rem !important;
    margin-bottom: 0 !important;
  }
}

@media (min-width: 992px) {
  #service-3.bb-why-choose .bb-why-features-row > [class*="col-"]:not(:last-child) .single-service-item {
    border-right: 1px solid #191c42 !important;
  }

  #service-3.bb-why-choose .bb-why-features-row > [class*="col-"]:last-child .single-service-item {
    border-right: none !important;
  }
}

#service-3.bb-why-choose.dark-bg .bb-why-features-row .single-service-item:hover .service-icon i.las:before {
  color: #fff !important;
}

/* Kontakt blok — isti vertikalni padding kao ostale .section-padding sekcije */

.client-section .bb-client-form.contact-form-wrap input:not([type="submit"]),
.client-section .bb-client-form.contact-form-wrap textarea {
  background-color: #f8f8f9 !important;
  border: 1px solid #efeff0 !important;
  padding: 0.875rem 1.125rem !important;
  border-radius: 2px;
  color: #181d4e;
}

.client-section .bb-client-form.contact-form-wrap input:not([type="submit"])::placeholder,
.client-section .bb-client-form.contact-form-wrap textarea::placeholder {
  color: #9a9da0;
}

.client-section .bb-client-form.contact-form-wrap textarea {
  min-height: 8rem;
  resize: vertical;
}

/* Kontakt sekcija na početnoj — forma u desnoj koloni */
.client-section .bb-client-form.contact-form-wrap {
  width: 100%;
  max-width: 100%;
  padding: 0 0 0 2rem;
}

@media (max-width: 991px) {
  .client-section .bb-client-form.contact-form-wrap {
    padding: 2.5rem 0 0;
  }
}

.client-section .bb-client-form.contact-form-wrap input[type="submit"] {
  width: 100%;
  max-width: 100%;
}

/* Stranica Kontakt — tri kartice (adresa, e-mail, telefon): manji padding, veći tekst (mobilno i desktop) */
.contact-info-wrapper .single-contact-info {
  height: auto;
  min-height: 0;
  padding: 1.2rem 1rem;
  margin-bottom: 1.15rem;
}

.contact-info-wrapper .single-contact-info .contact-icon {
  margin-bottom: 0.85rem;
}

.contact-info-wrapper .single-contact-info p,
.contact-info-wrapper .single-contact-info p a {
  font-family: "Sora", sans-serif;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.5;
  color: #181d4e;
}

.contact-info-wrapper .single-contact-info p a {
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-info-wrapper .single-contact-info p a:hover {
  color: #a00000;
}

@media (min-width: 576px) {
  .contact-info-wrapper .single-contact-info {
    padding: 1.35rem 1.15rem;
  }

  .contact-info-wrapper .single-contact-info p,
  .contact-info-wrapper .single-contact-info p a {
    font-size: 1.125rem;
  }
}

@media (min-width: 992px) {
  .contact-info-wrapper .single-contact-info {
    padding: 1.5rem 1.35rem;
    margin-bottom: 1.35rem;
  }

  .contact-info-wrapper .single-contact-info p,
  .contact-info-wrapper .single-contact-info p a {
    font-size: 1.1875rem;
    line-height: 1.55;
  }
}

/* Unutarnje stranice — hero naslov (tamni overlay, centar, chevron, akcent) */
.breadcrumb-area.bb-page-hero {
  min-height: clamp(280px, 38vh, 420px);
  height: auto;
  background-image: linear-gradient(
      rgba(6, 12, 28, 0.82),
      rgba(6, 12, 28, 0.68)
    ),
    url(../img/bread-bg.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Hero naslov — posebne pozadine po stranici (slide slike) */
.breadcrumb-area.bb-page-hero.bb-page-hero--slide1 {
  background-image: linear-gradient(
      rgba(6, 12, 28, 0.82),
      rgba(6, 12, 28, 0.68)
    ),
    url(../img/slide1.jpg);
}

.breadcrumb-area.bb-page-hero.bb-page-hero--slide2 {
  background-image: linear-gradient(
      rgba(6, 12, 28, 0.82),
      rgba(6, 12, 28, 0.68)
    ),
    url(../img/slide2.jpg);
}

.breadcrumb-area.bb-page-hero.bb-page-hero--slide3 {
  background-image: linear-gradient(
      rgba(6, 12, 28, 0.82),
      rgba(6, 12, 28, 0.68)
    ),
    url(../img/slide3.jpg);
}

.breadcrumb-area.bb-page-hero .container {
  position: relative;
  z-index: 2;
  /* Iznad eventualnog pogrešnog ugniježđenja: .header-area .container ima #fff */
  background-color: transparent;
}

.breadcrumb-area.bb-page-hero .breadcrumb-title {
  margin-top: 0;
}

.breadcrumb-area.bb-page-hero .breadcrumb-title h1 {
  font-family: "Sora", sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.25rem);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.45);
}

.breadcrumb-area.bb-page-hero .breadcrumb-icon {
  margin-top: 0.35rem;
}

.breadcrumb-area.bb-page-hero .breadcrumb-icon i {
  font-size: 1.35rem;
  color: rgba(255, 255, 255, 0.92);
  margin-top: 0.75rem;
  display: inline-block;
  animation: bb-page-hero-chevron 2.2s ease-in-out infinite;
}

@keyframes bb-page-hero-chevron {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.85;
  }
  50% {
    transform: translateY(6px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .breadcrumb-area.bb-page-hero .breadcrumb-icon i {
    animation: none;
  }
}

/* O nama — lijeva kolona: ista HTML struktura i isti vizuel kao kartica na usluge.html
   (Selektori #service-page.* ne vrijede ovdje — preslikano pod #bb-about-intro.) */
#bb-about-intro .bb-service-page-item__visual {
  overflow: hidden;
}

#bb-about-intro .bb-service-page-item__visual .service-img {
  width: 100%;
  max-width: 100%;
  display: block;
  line-height: 0;
}

#bb-about-intro .bb-service-page-item__visual .service-img img {
  width: 100% !important;
  max-width: 100% !important;
  height: 540px !important;
  object-fit: cover;
  object-position: center;
  display: block !important;
}

@media (min-width: 992px) {
  #bb-about-intro .bb-service-page-item__visual .service-img img {
    height: 640px !important;
  }
}

#bb-about-intro .single-service-item {
  position: relative;
  z-index: 1;
}

/* Kao #service-page .single-service-item:before / :after (style.css) */
#bb-about-intro .single-service-item:before {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 100%);
  opacity: 0.6;
  transition: opacity 0.3s ease;
  will-change: opacity;
  z-index: 2;
  pointer-events: none;
}

#bb-about-intro .single-service-item:after {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: opacity;
  z-index: 2;
  pointer-events: none;
}

#bb-about-intro .single-service-item:hover::before {
  opacity: 0;
}

#bb-about-intro .single-service-item:hover::after {
  opacity: 0.6;
}

/* Overlay: crveni blok centriran horizontalno uz donji rub slike */
#bb-about-intro .bb-about-intro__service-content.service-content-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 0;
  height: 100%;
  z-index: 9;
}

#bb-about-intro .bb-about-intro__service-content .service-content-top {
  display: none;
}

#bb-about-intro .service-content-bottom {
  margin-top: auto;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 0.75rem 0.75rem;
  box-sizing: border-box;
}

#bb-about-intro .service-content-bottom .bb-service-card-title {
  margin-bottom: 0;
}

/* Kao #service-page.bb-service-home .bb-service-card-title + h6 — prilagođeno za „25+“ */
#bb-about-intro .bb-service-card-title {
  display: inline-block;
  max-width: min(100%, 22rem);
  background-color: #a00000;
  padding: 0.75rem 1.35rem 0.85rem;
  margin: 0;
  box-shadow: 0 4px 14px rgba(160, 0, 0, 0.25);
}

#bb-about-intro .bb-service-card-title > h6 {
  margin: 0;
  color: #fff !important;
  font-family: "Sora", sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: clamp(2.25rem, 6vw, 3.35rem) !important;
  line-height: 1;
  text-align: center;
}

/* Broj + opis u istom crvenom bloku — sve centrirano */
#bb-about-intro .bb-about-intro__stat-block {
  text-align: center;
}

#bb-about-intro .bb-about-intro__stat-caption {
  font-family: "Sora", sans-serif;
  font-size: clamp(0.8125rem, 2.1vw, 0.9375rem);
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.95) !important;
  margin: 0.55rem 0 0;
  max-width: 18rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.bb-about-intro__lead {
  font-family: "Sora", sans-serif;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #4a4d52;
  margin: 0 0 1.75rem;
  max-width: 36rem;
}

.bb-about-intro__features {
  --bb-about-feature-gap: 1.5rem;
  margin-bottom: 0.25rem;
}

.bb-about-intro__features > [class*="col-"]:first-child .bb-about-feature {
  margin-bottom: var(--bb-about-feature-gap);
}

@media (min-width: 576px) {
  .bb-about-intro__features > [class*="col-"]:first-child .bb-about-feature {
    margin-bottom: 0;
  }
}

.bb-about-feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  margin-bottom: 1rem;
  background-color: #fde8e8;
  color: #a00000;
  font-size: 1.85rem;
  line-height: 1;
}

.bb-about-feature__title {
  font-family: "Sora", sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #181d4e;
  margin: 0 0 0.5rem;
  line-height: 1.25;
}

.bb-about-feature__text {
  font-family: "Sora", sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #6b6e72;
  margin: 0;
  max-width: 17rem;
}

/* Gornji top bar — ista veličina teksta (globalno `a` je 12px, link izgleda manji) */
.header-top-area {
  font-family: "Sora", sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

.header-top-area span a {
  font-size: inherit;
  font-weight: 400;
}

/* Gornji top bar (.dark-bg) — tamna traka: ikone ne #A00000 (slab kontrast), nego svijetle */
.header-top-area.dark-bg span i {
  color: rgba(255, 255, 255, 0.88);
}

.header-top-area.dark-bg span a {
  color: rgba(255, 255, 255, 0.98);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.header-top-area.dark-bg span a:hover {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.4);
}

.header-top-area.dark-bg .social-area a i:hover {
  color: #ffc8c2;
}

/* Footer — pravni podaci */
.bb-footer-legal {
  font-family: "Sora", sans-serif;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #6b6e72;
  margin: 1rem 0 0;
  max-width: 22rem;
}

/* Donji red (.footer-bottom) je izvan <footer class="footer-area"> — linkovi ne smiju ostati #181D4E */
.footer-bottom .privacy a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.footer-bottom .privacy a:hover {
  color: #ffc8c2;
  border-bottom-color: rgba(255, 200, 200, 0.45);
}

.footer-area .phone-number a {
  color: #e8eaee;
}

.footer-area .phone-number a:hover {
  color: #ffffff;
}

.footer-area .social-area a {
  color: #c8cdd4;
}

.footer-area .social-area a:hover {
  color: #ffc8c2;
}

.footer-area .footer-up ul li a {
  color: #b8c0cb;
}

.footer-area .footer-up ul li a:hover {
  color: #ffffff;
  opacity: 1;
}

/* Pravne stranice (politika, uslovi) */
.bb-legal-page {
  font-family: "Sora", sans-serif;
}

.bb-legal-page .bb-legal-meta {
  font-size: 0.875rem;
  color: #6b6e72;
  margin-bottom: 1.5rem;
}

.bb-legal-page h2 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 0.65rem;
  color: #181d4e;
}

.bb-legal-page h2:first-of-type {
  margin-top: 0.5rem;
}

.bb-legal-page p,
.bb-legal-page li {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #4a4d52;
  margin-bottom: 0.75rem;
}

.bb-legal-page ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  list-style: disc;
}

.bb-legal-page a {
  color: #a00000;
  font-size: inherit;
  font-weight: 500;
}

.bb-legal-page strong {
  font-weight: 600;
  color: #181d4e;
}