/* ==========================================================================
   D.J. MEDICAL GROUP - stilovi
   Vrednosti su izmerene na originalu (fontovi, boje, razmaci, prelomne tacke).
   Jedan skup pravila po sekciji; bez duplikata i bez nadjacavanja.
   ========================================================================== */

:root {
  --whyus-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 301"><g transform="translate(0,301) scale(0.05,-0.05)"><path d="M2118 5504 c-468 -272 -1046 -606 -1285 -744 l-433 -250 0 -1501 0 -1500 55 -32 c30 -17 321 -184 645 -372 1857 -1073 1888 -1090 1932 -1072 24 9 611 345 1305 747 l1263 729 0 1501 0 1500 -335 193 c-184 106 -765 441 -1291 745 -526 304 -967 551 -980 551 -13 -1 -407 -224 -876 -495z"/></g></svg>');
  --hex-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 347"><g transform="translate(0,347) scale(0.05,-0.05)"><path d="M1495 6074 l-1494 -864 4 -1738 5 -1737 1480 -857 c814 -471 1494 -856 1510 -856 17 0 696 385 1510 856 l1480 856 5 1738 4 1738 -1490 860 c-820 473 -1497 862 -1505 864 -8 2 -687 -385 -1509 -860z"/></g></svg>');
  --green: #0EBD66;
  --green-dark: #116506;
  --base: #021936;
  --text: #6A6A6A;
  --gray: #97A5B7;
  --white: #fff;
  --border: #DBDBDB;
  --font: "Lexend", sans-serif;
  --container: 1200px;
}

/* --- osnova ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 187.5%;
  font-weight: 500;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

/* kao .page-wrapper na originalu: sve sto viri van ekrana (slike, karuseli) se sece */
main { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color 400ms ease; }
button { font-family: inherit; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--base);
  font-family: var(--font);
  font-weight: 700;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}

@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1200px; } }

.icon { height: 1em; width: auto; fill: currentColor; flex: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- dugme ----------------------------------------------------------- */
.btn {
  display: inline-block;
  vertical-align: middle;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: var(--green);
  color: var(--white);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  line-height: 112.5%;
  letter-spacing: 0;
  padding: 19px 41.5px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: 500ms;
}

.btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: var(--base);
  transition: all 0.5s ease-in-out;
  z-index: -1;
}

.btn:hover { color: var(--white); background-color: var(--white); }
.btn:hover::before { width: 200%; height: 400px; top: -70%; left: -50%; }

/* hero dugme: beli krug, tamnoplavi tekst */
.btn--light::before { background-color: var(--white); }
.btn--light:hover { color: var(--base); }

/* --- zaglavlje ------------------------------------------------------- */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 11;
  background: transparent;
}

.site-header__inner {
  display: flex;
  align-items: center;
  position: relative;
  padding: 7px 15px 0;
  width: 100%;
}

.site-header__logo { display: flex; align-items: center; }
.site-header__logo img { width: 133px; height: 133px; }

/* telefon: logo manji (Marko 25.9.2026; original 133px) - sticky ostaje 90px */
@media (max-width: 767px) {
  .site-header__logo img { width: 100px; height: 100px; }
}

.site-nav { margin-left: 80px; }

.site-nav__list { display: flex; align-items: center; }

.site-nav__list > li { position: relative; padding: 55px 0; }
.site-nav__list > li + li { margin-left: 38px; }

.site-nav__list > li > a {
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  position: relative;
}

.site-nav__list > li:hover > a,
.site-nav__list > li.is-current > a { color: var(--green); text-shadow: 0 0 0.5px currentColor; }

.site-header__right { margin-left: auto; display: flex; align-items: center; }

/* hamburger */
.nav-toggle {
  width: 24px;
  display: none;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  margin-left: 20px;
}

.nav-toggle span {
  width: 100%;
  height: 2px;
  background-color: var(--white);
  transition: background-color 400ms ease;
}

.nav-toggle:hover span { background-color: var(--green); }

/* sticky varijanta istog zaglavlja: boje kao na originalu (.main-header--two.active: tamna
   pozadina, beli linkovi i hamburger), velicina manja od originala po odluci 24.9.2026 */
.site-header.is-stuck {
  position: fixed;
  background-color: var(--base);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
  animation: header-down 500ms ease forwards;
}

.site-header.is-stuck .site-header__inner { padding-top: 0; }
.site-header.is-stuck .site-header__logo img { width: 90px; height: 90px; }
.site-header.is-stuck .site-nav__list > li { padding: 20px 0; }

@keyframes header-down {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* --- mobilni meni ---------------------------------------------------- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition: opacity 400ms ease, visibility 400ms ease;
}

.mobile-nav.is-open { visibility: visible; opacity: 1; }

.mobile-nav__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  border: 0;
  padding: 0;
  width: 100%;
  cursor: pointer;
}

.mobile-nav__panel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 300px;
  background: #011126;
  padding: 30px 15px;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 400ms ease;
}

.mobile-nav.is-open .mobile-nav__panel { transform: translateX(0); }

/* x: na originalu je znak u redu visine 30 px (vrh 20 px), crtez pocinje na 28 px (izmereno 25.9.2026) */
.mobile-nav__close {
  position: absolute;
  top: 25px;
  right: 30px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--white);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}

.mobile-nav__logo img { width: 133px; height: 133px; margin-bottom: 50px; }

.mobile-nav__list li:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }

.mobile-nav__list a {
  color: var(--white);
  display: flex;
  align-items: center;
  height: 46px;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
}

.mobile-nav__list a:hover { color: var(--green); }

.mobile-nav__contact { margin: 20px 0; }
.mobile-nav__contact li { display: flex; align-items: center; color: var(--white); font-size: 14px; font-weight: 500; }
.mobile-nav__contact li + li { margin-top: 15px; }
.mobile-nav__contact__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-size: 14px;
}
.mobile-nav__contact a {
  color: inherit;
  background: linear-gradient(to right, currentColor 0%, currentColor 100%) 0 95% / 0 1px no-repeat;
  transition: all 500ms ease;
}

.mobile-nav__contact a:hover { color: var(--green); background-size: 100% 1px; }
.mobile-nav__close { transition: color 500ms ease; }
.mobile-nav__close:hover { color: var(--green); }

/* --- hero slajder ----------------------------------------------------- */
.hero { position: relative; overflow: hidden; }


.hero__slide {
  position: relative;
  z-index: 3;
  flex: 0 0 100%;
  min-width: 100%;
  background-color: var(--base);
  padding-top: 110px;
  padding-bottom: 75px;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: -1;
}

.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(2, 25, 54, 0.9);
}

.hero__row {
  display: flex;
  align-items: center;
  gap: 30px;
}

.hero__title-wrap { display: block; }

.hero__content { flex: 0 0 calc((100% - 30px) / 2); min-width: 0; position: relative; z-index: 2; }

.hero__title {
  color: var(--white);
  display: inline-block;
  font-size: 70px;
  font-weight: 600;
  line-height: 114.286%;
  letter-spacing: -2.1px;
  text-shadow: 0 0 1px currentColor;
  margin: 0 -20px 27px 0;
}

.hero__list { margin-top: -7px; display: inline-block; }

.hero__list li { color: var(--white); font-size: 18px; font-weight: 500; line-height: 200%; }

/* ikona stoji kao glif iz fonta: bazna linija simbola je na 78% visine */
.hero__list .icon { display: inline; height: 18px; margin-right: 16px; vertical-align: -1.11px; color: var(--green); }

.hero__btn { margin-top: 30px; }

.hero__image { position: relative; z-index: 1; flex: 0 0 calc((100% - 30px) / 2); min-width: 0; }

.hero__image__item,
.hero__image__item-two {
  -webkit-mask: var(--hex-mask) top center / auto no-repeat;
  mask: var(--hex-mask) top center / auto no-repeat;
}

.hero__image__item { position: relative; width: 590px; height: 680px; margin: 0 -100px 0 100px; }
.hero__image__item-two { position: absolute; bottom: 50px; left: -5px; width: 218px; height: 251px; }

/* owl na originalu: slike u slajdu su sirine 100% */
.hero__image__item img,
.hero__image__item-two img { width: 100%; }

.hero__image__shape { position: absolute; top: -30px; left: 75px; z-index: -1; }
.hero__image__shape img { max-width: none; object-fit: cover; }
.hero__slide.is-active .hero__image__shape { animation: shape-scale3 4s ease-in-out infinite; }

.hero__shape {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

.hero__dots {
  position: absolute;
  bottom: 66px;
  left: 19.45%;
  display: flex;
  gap: 10px;
  z-index: 5;
}

.hero__dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.2);
  transition: background-color 400ms ease;
}

.hero__dots button.is-active,
.hero__dots button:hover { background-color: var(--white); }

.hero__nav {
  position: absolute;
  top: 50%;
  left: 70px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 5;
}

.hero__nav button {
  width: 31px;
  height: 36px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: #324B64;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 500ms ease-in-out;
}

.hero__nav button:hover { background: var(--green); }
.hero__nav .icon { height: 10px; transform: rotate(90deg); }

/* --- kartice usluga --------------------------------------------------- */
.services { padding: 120px 0; }

.services__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}

.services__item {
  min-width: 0;
  border: 1px solid var(--border);
  padding: 0 40px 40px;
}

.services__icon {
  width: 100px;
  height: 92px;
  background: var(--green);
  clip-path: polygon(0 0, 100% 0, 100% 65%, 50% 100%, 0 65%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 50px;
  margin-bottom: 23px;
  transition: background 400ms ease-in-out;
}

.services__icon .icon { height: 50px; }
.services__item:hover .services__icon { background: var(--base); }

.services__title {
  color: var(--base);
  font-size: 24px;
  font-weight: 700;
  line-height: 125%;
  letter-spacing: -0.48px;
  margin-bottom: 15px;
}

.services__text { font-size: 16px; font-weight: 500; line-height: 187.5%; margin-bottom: -2px; }

@media (min-width: 991px) and (max-width: 1199px) {
  .services__item { padding: 0 20px 30px; }
}

@media (max-width: 991px) {
  .services { padding: 80px 0; }
}

/* pocetna: isti razmak slajder -> kartice -> "zasto mi" -> footer, 60 / 50 / 40 px (Marko 25.9.2026;
   original 120 / 240 / 120) - "zasto mi" zato nema gornji razmak */
body.page-home .services { padding: 60px 0; }

@media (max-width: 991px) {
  body.page-home .services { padding: 50px 0; }
}

@media (max-width: 767px) {
  body.page-home .services { padding: 40px 0; }
}

/* --- zasto mi (why-choose-us) ----------------------------------------- */
.whyus { padding: 0 0 60px; }

.whyus__row { display: flex; align-items: flex-start; gap: 30px; }

.whyus__left { flex: 0 0 calc((100% - 30px) / 2); min-width: 0; }

.whyus__top {
  border-bottom: 1px solid var(--border);
  padding-bottom: 15px;
  margin-bottom: 40px;
}

.sec-title { padding-bottom: 18px; margin-top: -1px; }

.sec-title__tagline {
  color: var(--green);
  font-size: 14px;
  font-weight: 500;
  line-height: 185%;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.sec-title__tagline img {
  width: 150px;
  height: 150px;
  display: inline;
  margin-right: 8px;
  vertical-align: middle;
}

.sec-title__heading {
  color: var(--base);
  font-size: 40px;
  font-weight: 700;
  line-height: 117%;
  letter-spacing: -0.8px;
  margin: 0;
}

.whyus__lead { font-size: 16px; font-weight: 500; line-height: 187.5%; margin-bottom: 24px; }

.whyus__features { display: flex; align-items: center; }

.whyus__feature:not(:last-child) {
  padding-right: 35px;
  border-right: 1px solid var(--border);
  margin-right: 40px;
}

.whyus__feature__icon {
  width: 53px;
  height: 64px;
  background: var(--green);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 26px;
  margin-bottom: 13px;
  transition: background 900ms ease-in-out, transform 900ms ease-in-out;
}

.whyus__feature__icon .icon { height: 26px; }
.whyus__feature:hover .whyus__feature__icon { background: var(--base); transform: rotateY(360deg); }

.whyus__feature__title {
  color: var(--base);
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.36px;
  margin-bottom: 8px;
}

.whyus__feature__text { font-size: 16px; font-weight: 500; line-height: 187.5%; }

.whyus__link { margin-top: 40px; }

.whyus__right { position: relative; flex: 0 0 calc((100% - 30px) / 2); min-width: 0; }

.whyus__image { position: relative; z-index: 1; text-align: right; }

/* slika je inline kao na originalu (vertical-align: middle), poravnata desno */
.whyus__image__item { position: relative; margin-right: -50px; }
.whyus__image__item img { display: inline; vertical-align: middle; max-width: none; }

/* mala slika u prirodnoj velicini, vidi se deo pod maskom 300x301 */
.whyus__image__item-two {
  position: absolute;
  bottom: -5%;
  left: 0;
  width: 300px;
  height: 301px;
  -webkit-mask: var(--whyus-mask) top center / auto no-repeat;
  mask: var(--whyus-mask) top center / auto no-repeat;
  animation: top-ani 4s ease-in-out infinite;
}

.whyus__image__item-two img { max-width: none; }

@media (max-width: 1199px) {
  .whyus__feature:not(:last-child) { padding-right: 25px; margin-right: 30px; }
}

@media (max-width: 991px) {
  .whyus { padding: 0 0 50px; }
  .whyus__image__item { margin-right: 0; }
  /* slika lekara u svojoj velicini (359 px), centrirana - na originalu razvucena na 690 px (Marko 25.9.2026) */
  .whyus__image { text-align: center; }
  .whyus__image__item img { width: auto; max-width: 100%; }
}

/* --- podnozje ---------------------------------------------------------
   Prepakovano po odluci 24.9.2026 (predlog A): cetiri kolone u kutiji
   1140px, proizvodi u dve kolone. Pozadina, oblici i traka su kao na
   originalu.                                                          */
.site-footer { background-color: var(--base); position: relative; overflow: hidden; }

.site-footer__shape {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  z-index: 0;
  pointer-events: none;
  animation: top-ani 4s ease-in-out infinite;
}

.site-footer__shape--right { left: auto; right: 0; animation: shape-scale 4s ease-in-out infinite; }

@keyframes shape-scale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* na originalu vazi druga (kasnija) definicija scale3: 0.5 -> 1 -> 0.5 */
@keyframes shape-scale3 {
  0%, 100% { transform: scale(0.5); }
  50% { transform: scale(1); }
}

.site-footer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 0.8fr 1.4fr 1.2fr;
  column-gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 30px;
}

.site-footer__col { min-width: 0; }

/* logo i tekst */
.footer-about__logo { display: inline-flex; margin-bottom: 25px; }
.footer-about__logo img { width: 100px; height: 100px; }

.footer-about__text {
  color: var(--gray);
  font-size: 14px;
  font-weight: 500;
  line-height: 214.286%;
  max-width: 315px;
  margin: 0;
}

/* naslovi kolona: svi u istom stilu */
.footer-title {
  color: var(--white);
  font-size: 20px;
  font-weight: 500;
  line-height: 147.036%;
  letter-spacing: -0.8px;
  margin: 0 0 14px;
}

/* korisni linkovi */
.footer-links li { color: var(--gray); font-size: 16px; font-weight: 500; line-height: 30px; }

.footer-links a {
  color: inherit;
  background: linear-gradient(to right, currentColor 0%, currentColor 100%) 0 95% / 0 1px no-repeat;
  transition: all 500ms ease;
}

.footer-links a:hover { color: var(--white); background-size: 100% 1px; }

/* kontakt: ikona u fiksnih 18px, drugi red teksta stoji ispod teksta */
.footer-contact li { display: flex; gap: 10px; color: var(--text); font-size: 16px; font-weight: 500; line-height: 30px; }
.footer-contact li + li { margin-top: 10px; }
.footer-contact .icon { flex: none; width: 18px; height: 16px; margin-top: 7px; color: var(--green); }
/* telefon: na originalu 1,5 px iznad sredine reda (izmereno 25.9.2026, tools/ikonice_poredjenje.py) */
.footer-contact li:nth-child(2) .icon { margin-top: 5.6px; }
.footer-contact a { color: var(--white); white-space: nowrap; }
.footer-contact a:hover { color: var(--green); }

/* proizvodi: jedna lista u dve kolone (redom po koloni) */
.footer-products { columns: 2; column-gap: 30px; }
.footer-products li { break-inside: avoid; line-height: 30px; }

.footer-products a {
  display: inline-flex;
  align-items: center;
  gap: 8.75px;
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  transition: color 700ms;
}

.footer-products a:hover { color: #076A0C; }
.footer-products .icon { height: 14px; color: var(--green-dark); }

.site-footer__bottom { position: relative; z-index: 1; background-color: #02142C; text-align: center; }

/* 404 je samo baner + footer (25.9.2026): footer stoji na dnu ekrana, baner popunjava prostor iznad
   njega i naslov ostaje na sredini; kad je strana duza od ekrana (telefon), sve je kao ranije */
body.page-404 { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.page-404 main { flex: 1 0 auto; display: flex; flex-direction: column; }
body.page-404 .page-header { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
.site-footer__bottom .container { padding-top: 30px; padding-bottom: 30px; }

.site-footer__bottom p {
  color: var(--gray);
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
}

@media (max-width: 1024px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 40px; padding: 50px 30px; }
}

@media (max-width: 767px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: 32px; padding: 40px 15px; }
}

/* --- nazad na vrh (sa originala: fiksirano dole desno, okrenuto, traka napretka) --- */
.scroll-top {
  position: fixed;
  right: -12px;
  bottom: 60px;
  z-index: 99;
  display: flex;
  align-items: center;
  height: 35px;
  opacity: 0;
  visibility: hidden;
  transform: rotate(-90deg);
  transition: all 0.2s ease;
}

.scroll-top.is-shown { opacity: 1; visibility: visible; bottom: 70px; }

.scroll-top__text {
  margin-right: 8px;
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.scroll-top__bar { position: relative; display: inline-block; width: 30px; height: 4px; overflow: hidden; background-color: var(--base); }
.scroll-top__progress { position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: var(--green); }

/* --- hero: smena slajdova i ulazne animacije --------------------------
   Sve vrednosti sa originala: slajd se utapa 1s (owl fadeIn/fadeOut, 5s),
   pa elementi aktivnog slajda ulaze sa zakasnjenjem; naslov i listu
   otkriva "zavesa" koja klizne udesno.                                   */
.hero__track { display: grid; }

.hero__slide {
  grid-area: 1 / 1;
  align-self: start;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1000ms ease, visibility 1000ms ease;
}

.hero__slide.is-active { opacity: 1; visibility: visible; z-index: 4; }

/* polazna stanja */
.hero__bg {
  opacity: 0;
  transform: translateY(50%) scaleY(2);
  transition: transform 1000ms ease, opacity 1000ms ease;
}

.hero__title {
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateX(200px);
  transition: transform 1200ms ease, opacity 1200ms ease;
}

.hero__list {
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateX(200px);
  transition: transform 1300ms ease, opacity 1300ms ease;
}

.hero__btn {
  overflow: hidden;
  opacity: 0;
  transform: perspective(400px) rotateY(0deg) translateY(80px);
  transform-origin: bottom;
  transition: all 1000ms ease;
}

.hero__image {
  opacity: 0;
  transform: translateX(200%);
  transition: transform 1300ms ease, opacity 1300ms ease;
}

.hero__shape { opacity: 0; transition: all 1500ms ease; }

/* zavesa */
.hero__title::after,
.hero__list::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 101%;
  height: 100%;
  z-index: 3;
  transform: translateX(-100%);
  transition: 1s cubic-bezier(0.858, 0.01, 0.068, 0.99);
  transition-delay: 1s;
}

.hero__title::after { background: currentColor; }
.hero__list::after { background: var(--white); }

/* aktivni slajd */
.hero__slide.is-active .hero__bg {
  opacity: 1;
  transform: translateY(0) scaleY(1);
  transition-delay: 1000ms;
}

.hero__slide.is-active .hero__image,
.hero__slide.is-active .hero__title,
.hero__slide.is-active .hero__list {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 1300ms;
}

.hero__slide.is-active .hero__title::after,
.hero__slide.is-active .hero__list::after {
  transform: translateX(1%);
  transition-delay: 1500ms;
}

.hero__slide.is-active .hero__list::after { opacity: 0; }

.hero__slide.is-active .hero__btn {
  opacity: 1;
  transform: perspective(400px) rotateY(0deg) translateY(0);
  transition-delay: 1300ms;
}

.hero__slide.is-active .hero__shape { opacity: 1; transition-delay: 1700ms; }

/* --- ulazne animacije (kao WOW + animate.css na originalu) -------------- */
[data-anim] { visibility: hidden; }
[data-anim].is-animated { visibility: visible; animation-duration: 1s; animation-fill-mode: both; }
[data-anim="fadeInUp"].is-animated { animation-name: fade-in-up; }
[data-anim="fadeInLeft"].is-animated { animation-name: fade-in-left; }
[data-anim="fadeInRight"].is-animated { animation-name: fade-in-right; }

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-left {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fade-in-right {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide, .hero__slide *, .hero__slide *::after { transition: none !important; }
  [data-anim] { visibility: visible; animation: none !important; }
  .site-footer__shape, .hero__image__shape, .whyus__image__item-two, .about__thumb::after, .about__shape { animation: none !important; }
}

.site-header__bar { width: 100%; }

/* ==========================================================================
   Responsive - prelomne tacke i vrednosti izmerene na originalu
   ========================================================================== */

/* --- ispod 1200px: meni prelazi u hamburger ---------------------------- */
@media (max-width: 1199px) {
  .site-nav { display: none; }
  .nav-toggle { display: flex; }
  .site-header__inner { padding-top: 20px; padding-bottom: 20px; }
  .hero__image__item { width: 100%; margin: 0 0 0 50px; }
}

@media (max-width: 1400px) {
  .hero__nav { left: 10px; }
}

@media (max-width: 1080px) {
  .hero__nav { display: none; }
}

@media (max-width: 575px) {
  .hero__image__item-two { bottom: 100px; width: 150px; height: 160px; }
}

/* --- do 991px: hero se slaze u kolonu ---------------------------------- */
@media (max-width: 991px) {
  .hero__slide { padding-top: 150px; padding-bottom: 60px; }

  .hero__row { flex-direction: column; align-items: stretch; gap: 0; }
  .hero__content { width: 100%; }
  .hero__title { font-size: 55px; }

  .hero__image { margin-top: 40px; }
  .hero__image__item { margin-left: auto; margin-right: auto; }
  .hero__image__shape { top: -10px; left: 0; }
  .hero__image__shape img { width: 100%; }
  .hero__shape { display: none; }

  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .whyus__row { flex-direction: column; gap: 30px; }
  .whyus__left, .whyus__right { width: 100%; }

}

/* --- do 767px: sve u jednu kolonu -------------------------------------- */
@media (max-width: 767px) {
  .hero__title { font-size: 50px; }

  .services__grid { grid-template-columns: 1fr; }

  .whyus { padding: 0 0 40px; }

  .whyus__features { flex-direction: column; align-items: flex-start; gap: 30px; }
  .whyus__feature:not(:last-child) { padding-right: 0; border-right: 0; margin-right: 0; }
  .whyus__image__item-two { width: 200px; height: 201px; }

}

/* tipografija po prelomnim tackama originala */
@media (max-width: 991px) {
  .services__title { font-size: 23px; }
}

@media (max-width: 768px) {
  .sec-title__heading { font-size: 30px; }
}

/* ==========================================================================
   Unutrasnje strane
   ========================================================================== */

/* --- zaglavlje strane -------------------------------------------------- */
/* naslov centriran na svim stranama (odluka 24.9.2026; na originalu levo, osim na 404) */
.page-header {
  position: relative;
  padding: 175px 0 165px;
  background-color: var(--base);
  text-align: center;
  z-index: 1;
}

.page-header__bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: -1;
}

.page-header__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(2, 25, 54, 0.75);
}

.page-header__title {
  color: var(--white);
  font-size: 50px;
  font-weight: 700;
  line-height: 94%;
  text-transform: capitalize;
  margin: 0;
}

@media (max-width: 991px) {
  .page-header { padding: 150px 0 140px; }
}

/* telefon: naslov ide ispod loga (zaglavlje sa logom 133px je visoko 173px); na originalu je
   gornji razmak 100px i logo prekriva naslov - ispravljeno 24.9.2026 */
@media (max-width: 767px) {
  .page-header { padding: 175px 0 100px; }
  .page-header__title { font-size: 40px; }
}

/* --- detalj proizvoda: bocna traka + sadrzaj --------------------------- */
.details { padding: 100px 0 120px; }

.details__inner { display: flex; width: 100%; max-width: 1140px; margin: 0 auto; }
.details__sidebar { width: 33.3333%; min-width: 0; padding-right: 15px; }

/* kolona sadrzaja: vidzeti (opis, akordeon, galerija) sa razmakom 20px kao Elementor */
.details__main,
.details-part { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.details__main { width: 66.6666%; padding-left: 15px; }

/* opis proizvoda: prazan podnaslov na originalu ostavlja 30px ispod teksta */
.details__single { padding-bottom: 30px; }

/* ostali modeli na strani (odluka 25.9.2026; na originalu naizmenicno levo / desno sa praznom polovinom):
   svaki u jednoj centriranoj koloni 855px (75% kutije 1140px; Marko 25.9.: "rasiri malo" sa 745); slika centrirana */
.details-more { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 1140px; margin: 0 auto; }
.details-part { width: 75%; margin: 0 auto; }
.details-part .details__thumb img { margin: 0 auto; }

/* akordeon van .details na originalu nema razmak iznad, a ima 100px ispod */
.details-part .accordion { padding-top: 0; margin-bottom: 100px; }

.sidebar-block + .sidebar-block { margin-top: 30px; }

.sidebar-block__title {
  position: relative;
  margin: 0;
  padding: 25px 30px;
  background-color: var(--base);
  color: var(--white);
  font-size: 24px;
  font-weight: 700;
  line-height: 108.333%;
}

.sidebar-block__title::after {
  content: "";
  width: 40px;
  height: 25px;
  position: absolute;
  bottom: -20px;
  left: 8%;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  background: var(--base);
}

.sidebar-nav {
  background: var(--green);
  padding: 40px 30px;
}

.sidebar-nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--white);
  color: var(--base);
  font-size: 16px;
  font-weight: 600;
  line-height: 162.5%;
  padding: 14px 30px;
  margin-bottom: 10px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all 500ms ease;
}

.sidebar-nav a::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  width: 0%;
  height: 100%;
  background-color: var(--base);
  z-index: -1;
  transition: all 500ms ease-in-out;
}

.sidebar-nav a:hover { color: var(--white); }
.sidebar-nav a:hover::before { width: 100%; left: 0; right: auto; }

/* na originalu strelica stoji na liniji teksta, 1,5 px iznad sredine (izmereno 25.9.2026) */
.sidebar-nav a .icon { height: 12px; color: var(--green); transition: all 500ms ease; position: relative; top: -1.5px; }

.sidebar-nav li:last-child a { margin-bottom: 0; }

.sidebar-contact {
  position: relative;
  background: var(--base);
  padding: 33px 30px 193px;
  overflow: hidden;
}

.sidebar-contact__title {
  color: var(--white);
  font-size: 30px;
  font-weight: 700;
  line-height: 133.333%;
  max-width: 230px;
  margin: -5px 0 42px;
  /* naslov preko slike doktora kao na originalu (na uskom ekranu se preklapaju) */
  position: relative;
  z-index: 2;
}

.sidebar-contact__btn {
  display: inline-block;
  background: var(--green);
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  line-height: 25.92px;
  padding: 7.5px 30px;
  vertical-align: middle;
  position: relative;
  z-index: 2;
  transition: background 400ms ease;
}

.sidebar-contact__btn { overflow: hidden; transition: 500ms; }

.sidebar-contact__btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--white);
  transition: all 0.5s ease-in-out;
  z-index: -1;
}

.sidebar-contact__btn:hover { color: #000; background-color: var(--white); }
/* varijanta --submite na originalu: krug 200% x 200% */
.sidebar-contact__btn:hover::before { width: 200%; height: 200%; top: -50%; left: -50%; }

.sidebar-contact__image {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 229px;
}

.sidebar-contact__shape {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  width: 370px;
  max-width: none;
}

/* --- sadrzaj proizvoda -------------------------------------------------- */
.details__thumb { margin-bottom: 40px; }
.details__thumb img { max-width: 100%; width: auto; height: auto; }

/* galerija proizvoda na vrhu glavne kolone (forma A, odluka Fable 24.9.2026; "top_gallery" u
   products.json): okvir 3:2, slika "contain" bez uvecanja preko rezolucije, slicice ispod */
.pgal { margin-bottom: 40px; }

.pgal__main {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
}

/* apsolutno: WebKit ne racuna max-height: 100% kad visina okvira dolazi iz aspect-ratio (uspravna slika je
   ispadala iz okvira - puna provera 25.9.2026); slika se ne uvecava preko svoje velicine */
.pgal__main img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  max-width: 100%; max-height: 100%; width: auto; height: auto; }

.pgal__thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }

.pgal__thumb {
  width: 96px;
  height: 72px;
  padding: 4px;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.pgal__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pgal__thumb:hover,
.pgal__thumb.is-active { border-color: var(--green); }

@media (max-width: 575px) {
  .pgal__thumb { width: 80px; height: 60px; }
}

.details__title {
  color: var(--base);
  font-size: 30px;
  font-weight: 700;
  line-height: 46.8px;
  letter-spacing: -0.6px;
  margin: 0 0 15px;
}

.details__text {
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
  margin: 0;
}

.details__text--plain { line-height: 29.92px; }

.details__list { margin-bottom: 32px; }

.details__list li {
  position: relative;
  padding-left: 26px;
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
}

.details__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 8px;
  height: 8px;
  background: var(--green);
  border-radius: 50%;
}

/* --- akordeon ----------------------------------------------------------- */
.accordion { padding-top: 20px; margin-bottom: 0; }

.accordion__item { border: 1px solid var(--border); }
.accordion__item + .accordion__item { margin-top: 20px; }

.accordion__title {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 25px 70px 18px 30px;
  cursor: pointer;
  font-family: var(--font);
}

.accordion__title-text {
  position: relative;
  display: block;
  margin-bottom: 8px;
  color: var(--base);
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
}

.accordion__icon {
  width: 34px;
  height: 34px;
  position: absolute;
  top: 50%;
  right: -35px;
  border-radius: 50%;
  background: #F3F3F3;
  transform: translateY(-50%);
  transition: background 400ms ease;
}

.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--base);
  transform: translate(-50%, -50%);
  transition: all 500ms ease;
}

.accordion__icon::before { width: 2.5px; height: 12px; }
.accordion__icon::after { width: 12px; height: 2px; }

.accordion__item.is-open .accordion__icon { background-color: var(--green); }
.accordion__item.is-open .accordion__icon::before { opacity: 0; }
.accordion__item.is-open .accordion__icon::after { background-color: var(--white); }

.accordion__content { display: none; padding: 3px 54px 22px 30px; margin-top: -3px; }
.accordion__item.is-open .accordion__content { display: block; }

.accordion__content p { color: var(--text); font-size: 16px; line-height: 187.5%; margin-bottom: 0; }

.accordion__content ul { list-style: disc; margin: 0 0 8px 48px; padding-left: 16px; }

.accordion__content li {
  color: var(--text);
  font-size: 16px;
  line-height: 29.92px;
  display: list-item;
}

.accordion__content table { border-collapse: collapse; width: 100%; margin-bottom: 15px; }
.accordion__content td, .accordion__content th {
  border: 1px solid var(--border);
  padding: 8px 12px;
  font-size: 15px;
  line-height: 26px;
  text-align: left;
}

@media (min-width: 992px) and (max-width: 1200px) {
  .sidebar-nav { padding: 30px 20px; }
  .sidebar-nav a { font-size: 14px; }
}

@media (max-width: 1024px) {
  .details__inner { flex-wrap: wrap; }
  .details__sidebar { width: 100%; padding: 0 30px; }
  .details__main,
  .details-part { width: 100%; margin-top: 50px; padding: 0 30px; }

  /* sa galerijom na vrhu proizvod ide prvi, meni i kontakt na dno (odluka 24.9.2026) */
  .details--gal .details__main { margin-top: 0; }
  .details--gal .details__sidebar { order: 2; margin-top: 50px; }
}

@media (max-width: 991px) {
  .sidebar-contact__title { font-size: 25px; }
}

@media (max-width: 767px) {
  .details { padding: 60px 0 80px; }
  .details__sidebar, .details__main, .details-part { padding: 0 15px; }
}

/* prva sekcija proizvoda odmah ispod zaglavlja: 60 / 50 / 40 px */
.page-header + .details { padding-top: 60px; }

@media (max-width: 1024px) {
  /* bocna traka je tada iznad sadrzaja: galerija na njenom vrhu bez razmaka odozgo */
  .page-header + .details .details__sidebar > .gallery:first-child { padding-top: 0; }
}

@media (max-width: 991px) {
  .page-header + .details { padding-top: 50px; }
}

@media (max-width: 767px) {
  .page-header + .details { padding-top: 40px; }
}

@media (max-width: 575px) {
  .sidebar-block__title { font-size: 20px; }
  .sidebar-nav { padding: 30px 20px; }
  .sidebar-nav a { font-size: 14px; }
}

/* --- galerija (slajder slika) ------------------------------------------ */
.gallery { padding: 120px 0; }

/* galerija ispod sadrzaja stoji u kutiji od 1140px */
.gallery-section { max-width: 1140px; margin: 0 auto; }

.carousel { position: relative; overflow: hidden; }

.carousel__track {
  display: flex;
  gap: 30px;
  transition: transform 700ms ease;
  will-change: transform;
}

.carousel__item { flex: 0 0 calc((100% - 60px) / 3); min-width: 0; }
/* owl na originalu: slika u stavci je sirine 100% */
.carousel__item img { width: 100%; height: auto; display: block; }

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 60px;
}

.carousel__dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  margin: 0;
  border: 2px solid var(--white);
  border-radius: 30px;
  background-color: #000;
  box-shadow: 0 0 1px rgba(0, 0, 0, 1);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.carousel__dots button.is-active,
.carousel__dots button:hover { background-color: #000; border-color: #000; }

@media (max-width: 991px) {
  .carousel__item { flex-basis: calc((100% - 30px) / 2); }
}

@media (max-width: 767px) {
  .carousel__track { gap: 0; }
  .carousel__item { flex-basis: 100%; }
}

/* --- mreza kategorija proizvoda ---------------------------------------
   Spojeno iz snippeta 3058, 3066 i 3070 (na originalu se preklapaju):
   jedna kartica, jedan hover sloj, jedno mobilno ponasanje.            */
/* na originalu omotac teme .blog-one: 120 / 100 / 80 gore i dole */
.categories { padding: 60px 0 120px; }

.categories__head { text-align: center; }
/* znak levo od naslova, 40px do kartica (odluka 24.9.2026; na originalu znak i natpis
   "medicinska oprema" iznad naslova, 62px do kartica) */
.categories__head .sec-title { padding-bottom: 40px; }

.categories__head .sec-title--znak { display: flex; align-items: center; justify-content: center; gap: 18px; }
.categories__head .sec-title__znak { flex: none; width: 99px; height: auto; }
.categories__head .sec-title__heading { color: #000; text-align: left; margin: 0; }

.categories__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  padding: 0 15px;
}

.category-card { position: relative; overflow: hidden; }

.category-card__thumb {
  position: relative;
  width: 100%;
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  overflow: hidden;
  border-radius: 10px;
}

.category-card__thumb img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* tamni sloj preko slike */
.category-card__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(2, 25, 54, 0.7);
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease-in-out;
}

.category-card:hover .category-card__thumb::after { opacity: 1; visibility: visible; }

/* zeleni panel: u mirovanju je ispod kartice (margin -100% sirine + sopstvena visina) */
.category-card__hover {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--green);
  clip-path: polygon(50% 0%, 100% 35%, 100% 100%, 0 100%, 0 35%);
  margin-bottom: -100%;
  transform: translateY(100%);
  transition: all 0.3s ease;
}

.category-card:hover .category-card__hover { margin-bottom: 0; transform: translateY(0); }

.category-card__icon {
  color: var(--white);
  font-size: 70px;
  line-height: 0;
  opacity: 0.7;
  margin-bottom: 15px;
}

.category-card__icon .icon { height: 70px; }

.category-card__title {
  color: #000;
  font-size: 30px;
  font-weight: 700;
  line-height: 46.8px;
  letter-spacing: -0.6px;
  margin: 0 0 16px;
}

/* cela kartica je link (odluka 24.9.2026); ime proizvoda zadrzava podvlacenje na hover */
.category-card__link { display: block; }

.category-card__title span {
  color: inherit;
  background: linear-gradient(to right, currentColor 0%, currentColor 100%) 0 95% / 0 1px no-repeat;
  transition: all 500ms ease;
}

.category-card__title span:hover { background-size: 100% 1px; }

/* opis centriran kao ikona i naslov (odluka 24.9.2026; na originalu levo, pa je opis u dva reda
   stajao uz levu ivicu) */
.category-card__text {
  color: var(--white);
  font-size: 20px;
  font-weight: 500;
  line-height: 235%;
  letter-spacing: -0.4px;
  text-align: center;
  margin: 11px;
}

@media (max-width: 991px) {
  .categories { padding: 50px 0 100px; }
  .categories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .categories__head .sec-title { padding-bottom: 30px; }
  .categories__head .sec-title--znak { gap: 14px; }
  .categories__head .sec-title__znak { width: 76px; }
  .categories__grid { grid-template-columns: 1fr; padding: 0; }
}

/* uzak telefon: naslov u dva reda, okvir naslova tesno uz tekst da znak i naslov ostanu centrirani */
@media (max-width: 480px) {
  .categories__head .sec-title--znak .sec-title__heading { width: min-content; }
}

/* do 768px panel stoji ispod slike, bez efekta (kao na originalu) */
@media (max-width: 768px) {
  .categories { padding: 40px 0 80px; }
  .category-card { max-width: 400px; margin: 0 auto; width: 100%; }
  .category-card__thumb::after { content: none; }

  .category-card__hover {
    position: static;
    height: auto;
    background: transparent;
    clip-path: none;
    margin: 0;
    transform: none;
    transition: none;
    padding: 15px 20px 35px;
    text-align: center;
  }

  .category-card__icon { display: none; }
  .category-card__title { margin: 0 0 8px; }
  .category-card__title span { color: #071b3a; font-size: 18px; transition: none; }
  .category-card__text { color: #555; font-size: 14px; line-height: 1.5; margin: 0; }
}

/* --- o nama -------------------------------------------------------------
   Na originalu su sve sekcije ove strane u omotacu teme (.blog-one): kutija
   sirine kontejnera sa 120/100/80px gore i dole. Zato su tamne sekcije
   uokvirene, a sadrzaj je 15px uvuceniji nego na ostalim stranama.
   Naslovi u tom omotacu su crni sa 16px ispod (pravilo teme .blog-details). */
.page-body > section { padding-left: 15px; padding-right: 15px; }

/* "o nama" */
.about { position: relative; z-index: 1; padding-top: 60px; padding-bottom: 120px; background: var(--white); }

.about__row,
.join__top,
.join__items,
.choose__row { display: flex; flex-wrap: wrap; gap: 0 30px; }

.about__col,
.join__top__col,
.join__item,
.choose__col { flex: 0 0 calc((100% - 30px) / 2); min-width: 0; }

.about__left { margin: 0 50px 0 -50px; }

.about__thumb { position: relative; }

.about__thumb::after {
  content: "";
  position: absolute;
  top: 0;
  left: -70px;
  width: 40px;
  height: 324px;
  background: var(--green);
  animation: top-ani 4s ease-in-out infinite;
}

.about__thumb__item { position: relative; z-index: 1; }
.about__thumb__item img { max-width: none; object-fit: cover; }
.about__thumb__item--two { margin: -175px 0 0 -99px; }

.about__shape {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  max-width: none;
  animation: border-scale 4s ease-in-out infinite;
}

.about__top { margin-bottom: 63px; }
.about__top .sec-title { padding-bottom: 25px; }
.about .sec-title__tagline { color: #61CE70; margin-bottom: 16px; }
.about .sec-title__heading { color: #000; margin-bottom: 16px; }
.about__text { color: var(--text); font-size: 16px; font-weight: 500; line-height: 187.5%; margin: 0; }

.about__features { display: flex; align-items: center; margin-bottom: 39px; }

.about__feature {
  padding: 0 30px 20px;
  background: var(--white);
  transition: all 0.4s ease-in-out;
}

.about__feature:first-child { border: 1px solid var(--border); border-right: 0; }
.about__feature:last-child { background-color: #F3F3F3; border: 1px solid #F3F3F3; }
.about__feature:hover { background-color: #F3F3F3; }
.about__feature:first-child:hover { border-color: #F3F3F3; }
.about__feature:last-child:hover { background-color: var(--white); }

.about__feature__icon {
  position: relative;
  width: 59px;
  height: 69px;
  margin: -33px 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  color: var(--white);
  transition: all 1s ease-in-out;
}

.about__feature__icon .icon { height: 30px; }
.about__feature:hover .about__feature__icon { background-color: var(--base); transform: rotateY(360deg); }

.about__feature__title { color: #000; font-size: 18px; font-weight: 600; line-height: normal; margin-bottom: 16px; }
.about__feature__text { color: var(--text); font-size: 14px; font-weight: 500; line-height: 185.714%; margin: 0; }

.about__list { margin-bottom: 8px; }
.about__list li { color: var(--base); font-size: 16px; font-weight: 500; line-height: normal; }
.about__list li + li { margin-top: 20px; }
.about__list .icon { height: 18px; margin-right: 10px; color: var(--green); vertical-align: -2.1px; }

/* "istorija firme": tamna podloga do 85% visine, kartice je preklapaju */
.join { position: relative; z-index: 1; padding-top: 120px; }

.join__bg,
.join::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 85%;
  z-index: -1;
}

.join__bg { overflow: hidden; filter: grayscale(100%); }

/* parallax (speed 0.3) po putanji jarallax-a, ali je slika apsolutna u okviru i JS je pomera,
   pa je uvek poravnata sa okvirom i centrirana. Na originalu je "fixed" slika zbog filtera na
   roditelju vezana za okvir i pomerena udesno i nadole - ispravljeno 24.9.2026. */
.join__bg__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}
.join::after { content: ""; background: rgba(2, 25, 54, 0.9); }

/* tekst preko cele sirine kao uvodni pasus, dugme ispod njega (predlog A, 24.9.2026);
   na originalu je tekst naslov od 40px u levoj polovini, a u desnoj je samo dugme */
.join__top { padding-bottom: 57px; }
.join__top__col { flex-basis: 100%; }
.join .sec-title { padding-bottom: 30px; }
.join .sec-title__tagline { color: #61CE70; margin-bottom: 16px; }

.join .sec-title__heading {
  color: var(--white);
  font-size: 28px;
  font-weight: 600;
  line-height: 143%;
  letter-spacing: -0.4px;
  margin-bottom: 16px;
}

.join__link { text-align: left; }

.join__items { align-items: flex-start; }
.join__item { margin-top: 70px; background-color: var(--white); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06); }

.join__content {
  position: relative;
  z-index: 1;
  padding: 1px 50px 30px;
  transition: all 0.4s ease-in-out;
}

.join__content:hover { background-color: var(--green); }

.join__icon {
  position: relative;
  width: 102px;
  height: 121px;
  margin: -50px 0 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  clip-path: polygon(50% 0.04%, 100% 24.83%, 100% 74.42%, 50% 99.21%, 0 74.42%, 0 24.83%);
  color: var(--white);
  transition: all 0.4s ease-in-out;
}

.join__icon .icon { height: 60px; }
.join__content:hover .join__icon { background-color: var(--base); }

.join__title {
  color: #000;
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.48px;
  margin-bottom: 16px;
  transition: all 500ms ease;
}

.join__text { color: var(--text); font-size: 16px; font-weight: 500; line-height: 187.5%; margin: 0; transition: all 0.4s ease-in-out; }
.join__content:hover .join__title,
.join__content:hover .join__text { color: var(--white); }

.join__shape { position: absolute; top: 0; right: 0; z-index: -1; }

/* "zasto izabrati" (predlog A, 24.9.2026): uvod i brojac levo, slika desno, tri kartice
   preko cele sirine ispod; na originalu je sve u levoj polovini, a slika visi desno gore */
.choose { position: relative; z-index: 1; padding-bottom: 120px; }

.choose__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.choose__row { align-items: center; }
.choose__left { padding: 40px 0; }

/* crtez loga (u slici 150px sa providnim rubom) 14px od natpisa */
.choose .sec-title__tagline img { margin-right: -25px; }
.choose__top .sec-title { padding-bottom: 18px; }
.choose .sec-title__tagline { color: #61CE70; margin-bottom: 16px; }
.choose .sec-title__heading { color: var(--white); margin-bottom: 16px; }
.choose__text { color: var(--gray); font-size: 16px; font-weight: 500; line-height: 187.5%; margin: 0; }

/* heksagon viri 51px iznad kartice; vrh heksagona 30px ispod slike */
.choose__features { display: flex; margin-top: 81px; }

.choose__feature { flex: 1 1 0; min-width: 0; background: #011126; padding: 10px 36px 30px; }
.choose__feature + .choose__feature { border-left: 1px solid rgba(255, 255, 255, 0.1); }

/* heksagon 180x203; slika je u prirodnoj velicini, vidi se samo deo u heksagonu */
.choose__feature__thumb {
  position: relative;
  width: 180px;
  height: 203px;
  margin: -51px 0 30px;
  clip-path: polygon(50% 0.5%, 100% 25.3%, 100% 75.1%, 50% 99.9%, 0 75.1%, 0 25.3%);
}

.choose__feature__thumb img { max-width: none; }

.choose__feature__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(2, 25, 54, 0.7);
  visibility: hidden;
  opacity: 0;
  transition: all 0.4s ease-in-out;
}

.choose__feature:hover .choose__feature__thumb::after { visibility: visible; opacity: 1; }

/* na originalu su naslovi i broj crni (pravilo teme) i ne vide se na tamnoj podlozi;
   ovde su u bojama koje tema predvidja - vidi pitanja.md */
.choose__feature__title { color: var(--white); font-size: 18px; font-weight: 600; line-height: normal; margin-bottom: 16px; }
.choose__feature__text { color: var(--gray); font-size: 16px; font-weight: 500; line-height: 187.5%; margin: 0; }

/* slika je na originalu odsecena ravno po dnu: donjih 20% se utapa u pozadinu (odluka 24.9.2026) */
.choose__thumb img {
  width: 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}

/* kartice usluga u omotacu: crni naslov sa 16px ispod */
.page-body .services__title { color: #000; margin-bottom: 16px; }

/* isti razmak iznad i ispod kartica: 60 / 50 / 40 px (odluka 24.9.2026; na originalu 120 gore,
   240 dole) - samo levi/desni razmak sekcije ostaje iz .page-body > section */
.page-body .services { padding-top: 60px; padding-bottom: 60px; }

@media (max-width: 991px) {
  .page-body .services { padding-top: 50px; padding-bottom: 50px; }
}

@media (max-width: 767px) {
  .page-body .services { padding-top: 40px; padding-bottom: 40px; }
}

@keyframes top-ani {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes border-scale {
  0%, 100% { transform: scale(0.8); }
  50% { transform: scale(1); }
}

@media (max-width: 1199px) {
  .about__left { margin: 0; }
  .about__thumb__item--two { margin: -100px 0 0 -60px; }
  .about__thumb__item--two img { width: 100%; max-width: 260px; height: auto; }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .about__thumb__item:first-child img { width: 100%; height: auto; }
}

@media (min-width: 767px) and (max-width: 1199px) {
  .choose__feature { padding: 10px 25px 25px; }
}

@media (max-width: 991px) {
  .about { padding-top: 50px; padding-bottom: 100px; }
  .about__col, .join__top__col, .join__item, .choose__col { flex-basis: 100%; }
  .about__right { margin-top: 40px; }
  .about__shape { display: none; }
  .join { padding-top: 100px; }
  .join__top { padding-bottom: 30px; }
  .join .sec-title__heading { font-size: 24px; }
  .choose { padding-bottom: 100px; }
  .choose__left { padding: 100px 0 0; }
  .choose__thumb { margin-top: 30px; }
}

@media (max-width: 768px) {
  .choose__features { flex-direction: column; gap: 70px; }
}

@media (max-width: 767px) {
  .about { padding-top: 40px; padding-bottom: 80px; }
  .about__thumb__item img { width: 100%; height: auto; }
  .join { padding-top: 80px; }
  .join .sec-title__heading { font-size: 20px; line-height: 150%; }
  .choose { padding-bottom: 80px; }
  .choose__left { padding-top: 80px; }
}

@media (max-width: 575px) {
  .about__features { flex-direction: column; gap: 50px; }
  .join__content { padding: 1px 30px 30px; }
}

/* --- kontakt ------------------------------------------------------------ */
.contact { padding: 60px 0 120px; }

/* na >=1200 original stoji u okviru od 1140px (kolone 445 + 665) */
.contact__row { display: flex; align-items: flex-start; padding: 0 30px; }

.contact__content {
  flex: 0 0 395px;
  min-width: 0;
  position: relative;
  background: var(--green);
  padding: 40px 40px 0;
  margin-right: 80px;
  text-align: center;
}

.contact-info { text-align: left; margin-bottom: 47px; }
.contact-info__item { display: flex; align-items: center; gap: 20px; }
.contact-info__item + .contact-info__item { margin-top: 30px; }

.contact-info__icon {
  width: 50px;
  height: 50px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: all 0.5s ease-in-out;
}

.contact-info__item:hover .contact-info__icon { background: rgba(2, 25, 54, 0.2); }
.contact-info__icon .icon { height: 20px; }

.contact-info__label {
  color: #DBDBDB;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 3px;
}

.contact-info__title {
  color: var(--white);
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
  margin: 0 0 -3px;
}

.contact-info__title a {
  color: inherit;
  background: linear-gradient(to right, currentColor 0%, currentColor 100%) 0 95% / 0 1px no-repeat;
  transition: all 500ms ease;
}

.contact-info__title a:hover { color: var(--base); background-size: 100% 1px; }

/* beli blok sa kvacicom ispod slike je uklonjen (Marko 25.9.2026); slika staje na donju ivicu
   zelenog panela - negativna margina (-70px) je sluzila samo tom bloku */
.contact__thumb img { position: relative; margin: 0 auto; }

.contact__left { flex: 0 0 635px; min-width: 0; }
.contact__top .sec-title { padding-bottom: 46px; }

@media (max-width: 1199px) {
  .contact__row { padding: 0; }
  .contact__content { flex: 0 0 39.78%; margin-right: 30px; }
  .contact__left { flex: 1 1 auto; }
  .contact__thumb img { max-width: 100%; }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .contact__content { padding: 25px 25px 0; }
}

@media (max-width: 991px) {
  .contact { padding: 50px 0 100px; }
  .contact__row { flex-direction: column; align-items: stretch; }
  .contact__content { flex: 0 0 auto; width: 100%; max-width: 420px; margin: 0 auto; }
  .contact__left { flex: 0 0 auto; width: 100%; }
  .contact__top { margin-top: 70px; }
}

@media (max-width: 768px) {
  .contact { padding: 40px 0 80px; }
}

@media (max-width: 767px) {
  .contact__top .sec-title { padding-bottom: 50px; }
}

@media (max-width: 575px) {
  .contact__content { padding: 25px 25px 0; }
  .contact-info__title br { display: none; }
}

.form__group { display: flex; flex-wrap: wrap; gap: 20px; }
.form__control { width: 100%; }

.form input[type="text"],
.form input[type="email"],
.form textarea {
  width: 100%;
  background: #F3F3F3;
  border: 0;
  outline: none;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  height: 60px;
  padding: 3px 20px 3px 30px;
  display: block;
}

.form textarea { height: 317px; padding: 20px 20px 3px 30px; resize: vertical; }
.form ::placeholder { color: var(--text); opacity: 1; }

/* dugme je na originalu podrazumevano (nestilizovano) - preneto 1:1, vidi pitanja.md */
.form button[type="submit"] {
  background: #ECEAE0;
  border: 1px solid #ECEAE0;
  color: rgba(0, 0, 0, 0.8);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  padding: 19px 41.5px;
  cursor: pointer;
}

.form button[type="submit"] { transition: 0.5s; }
.form button[type="submit"]::before { display: none; }
.form button[type="submit"]:hover { background: var(--white); color: var(--white); }

.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status { margin-top: 15px; font-size: 16px; line-height: 187.5%; }
.form__status:empty { display: none; }
.form__status--ok { color: var(--green); }
.form__status--error { color: #c0392b; }

/* na mobilnom original ima dvostruki razmak sa strana (sekcija 15px + kolona 15px) */
@media (max-width: 767px) {
  .categories .container { padding: 0 30px; }
}

/* --- mapa na kontaktu --- */
.map { line-height: 0; }
.map iframe { display: block; width: 100%; height: 300px; border: 0; }



/* --- kartica u galeriji (crna podloga + hover, kao na originalu) -------- */
.gallery__card { position: relative; overflow: hidden; background-color: #000; }

.gallery__card img {
  display: block;
  max-width: 100%;
  height: auto;
  transform: scale(1);
  opacity: 1;
  transition: transform 500ms ease, opacity 500ms ease;
}

.gallery__card:hover img { transform: scale(1.05); opacity: 0.9; mix-blend-mode: screen; }

.gallery__card__hover {
  position: absolute;
  inset: 0;
  background-color: rgba(2, 25, 54, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(1, 0);
  transform-origin: bottom center;
  transition: transform 500ms ease;
}

.gallery__card:hover .gallery__card__hover { transform-origin: top center; transform: scale(1, 1); }

.gallery__card__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--green);
  transition: all 0.5s ease-in-out;
}

.gallery__card__icon:hover { background: var(--base); }

.gallery__card__icon__item { width: 30px; height: 30px; display: block; position: relative; }

.gallery__card__icon__item::before,
.gallery__card__icon__item::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 100%;
  background-color: var(--white);
  transform: translate(-50%, -50%);
}

.gallery__card__icon__item::after { transform: translate(-50%, -50%) rotate(90deg); }

/* uvecanje slike (zamena za magnific-popup sa originala) */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(2, 25, 54, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms ease;
}

.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; }

.lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: 0;
  color: var(--white);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

.accordion__content .accordion__sub { color: var(--text); font-size: 16px; line-height: 29.92px; margin: 0; }


/* ispod 1200px original gasi negativnu marginu slike u "why-choose-us" */

/* sekcije u kojima slike namerno vire van kontejnera seku visak po sirini ekrana */
.whyus { overflow-x: hidden; }


/* kad se red prelomi u kolonu, flex-basis bi vazio za visinu - gasi se */
@media (max-width: 991px) {
  .hero__content, .hero__image,
  .whyus__left, .whyus__right { flex: 0 0 auto; width: 100%; }
}


/* --- preloader (sa originala; logo uvecan na 280 px, na telefonu 72vw) -- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9991;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  transition: opacity 400ms ease, visibility 400ms ease;   /* fadeOut() na originalu = 400 ms */
}

.preloader.is-done { opacity: 0; visibility: hidden; }

.preloader__image {
  width: 100%;
  height: 100%;
  background: url(/img/preloader-logo.png) center center / min(280px, 72vw) auto no-repeat;
  animation: flipInY 2s both infinite;
}

/* keyframe-ovi preuzeti iz animate.css sa originala */
@keyframes flipInY {
  0% { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); animation-timing-function: ease-in; opacity: 0; }
  40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); animation-timing-function: ease-in; }
  60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; }
  80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  100% { transform: perspective(400px); }
}

@media (prefers-reduced-motion: reduce) {
  .preloader__image { animation: none; }
}

/* --- hover efekti sa originala: kartice ------------------------------- */

/* naslov kartice usluga (na originalu link): podvlaka raste */
.services__title span {
  background: linear-gradient(to right, currentColor 0%, currentColor 100%) 0 95% / 0 1px no-repeat;
  transition: all 500ms ease;
}

.services__title span:hover { background-size: 100% 1px; }