/* Nasi dodaci - iskljucivo ono cega u Lyzo template-u nema.
   Ucitava se POSLE svih template stilova i samo dodaje. */

/* WCAG 2.2 AA: template nema skip link ni vidljiv focus stil. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;padding:.875rem 1.5rem;background:#111;color:#fff;font-weight:700;text-decoration:none}
.skip-link:focus{left:0}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid currentColor;outline-offset:2px}

/* -----------------------------------------------------------------------------
   Kartice oblasti prava - jednaka visina

   Template daje .practice-item prirodnu visinu, pa se kartice u redu razlikuju
   kad su opisi razlicite duzine - dugme "Saznajte vise" tada lebdi na razlicitim
   visinama. Bootstrap red je vec flex, pa je dovoljno da kartica popuni kolonu
   i da dugme bude gurnuto na dno.
   -------------------------------------------------------------------------- */
.practice-area .row > [class*="col-"] {
  display: flex;
}
.practice-area .practice-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}
/* opis zauzima slobodan prostor -> dugme uvek na dnu kartice.
   font-size: 16px - opis usluge je citljiv sadrzaj, ne sme ispod 16px
   (template ga ostavlja na 14px). */
.practice-area .practice-item p {
  flex: 1 1 auto;
  font-size: 16px;
}

/* -----------------------------------------------------------------------------
   Kartice "Kako izgleda saradnja" - koraci procesa

   Sekcija je prenamenjena iz template-ovog tima. Template kartica je fotografija
   (270x359) sa belom kutijom preklopljenom preko dna - ali proces nema lica, pa
   su sivi placeholderi delovali polupano. Slike su uklonjene iz markup-a, a
   kartica je preradjena u cist numerisan korak: braon kruzni broj, naslov, opis.

   Ovde se ponistava template pozicioniranje racunato za fotografiju: .team-inner
   vise ne "visi" preko slike (margin-top: -40px, max-width: 85%), nego je
   samostalna kartica pune sirine. Template hover (cela kartica postaje braon)
   se zadrzava - samo broj tada invertuje boje.
   -------------------------------------------------------------------------- */
/* Traka sa podacima (.loaction-area) je template-om povucena navise za 100px
   (position: relative; top: -100px) i preklapa se sa ovom sekcijom. Razmak
   izmedju kartica i trake = padding-bottom minus tih 100px. 150px -> ~50px vazduha. */
.team-area {
  padding-bottom: 150px;
}
/* kolona flex -> sve kartice u redu iste visine */
.team-area .row > [class*="col-"] {
  display: flex;
}
.team-area .team-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}
/* samostalna kartica: bez preklopa, pun okvir, braon linija na vrhu */
.team-area .team-item .team-inner {
  flex: 1 1 auto;
  max-width: 100%;
  margin-top: 0;
  padding: 40px 24px 32px;
  border-top: 3px solid #8a7146;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* braon kruzni broj koraka */
.team-area .team-inner .korak-broj {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background-color: #8a7146;
  color: #ffffff;
  font-family: "Playfair Display", serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  transition: 0.5s all ease;
}
/* naslov koraka - broj je iznad, pa nema template padding-top */
.team-area .team-item .team-inner h3 {
  padding-top: 0;
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 600;
}
/* opis koraka - 16px, citljiv sadrzaj ne ide ispod te velicine */
.team-area .team-item .team-inner > span:not(.korak-broj) {
  font-size: 16px;
  line-height: 1.6;
}
/* hover: kartica je braon (template), pa broj invertuje u belo sa braon brojem */
.team-area .team-item:hover .korak-broj {
  background-color: #ffffff;
  color: #8a7146;
}
.team-area .team-item:hover .team-inner {
  border-top-color: #ffffff;
}

/* -----------------------------------------------------------------------------
   Kontakt forma - braon prekrivac preko pozadinske slike

   Klijentova fotografija je svetla i sa dosta detalja, pa se polja forme i
   tekst na njoj slabo citaju. Preko slike ide poluprovidan sloj u brend boji
   template-a (#8a7146 - 98 pojava u style.css, dakle njegova osnovna braon).

   Radi se preko ::before, ne menjanjem background-image, da slika ostane
   netaknuta i da se jacina prekrivaca menja jednim brojem.
   -------------------------------------------------------------------------- */
.contact-form {
  position: relative;
}
.contact-form::before {
  content: "";
  position: absolute;
  inset: 0;
  /* tamnija braon, opacity 70% */
  background: linear-gradient(
    180deg,
    rgba(38, 28, 17, .70) 0%,
    rgba(52, 39, 24, .70) 100%
  );
  pointer-events: none;
}
/* sadrzaj mora iznad prekrivaca */
.contact-form > * {
  position: relative;
  z-index: 1;
}

/* -----------------------------------------------------------------------------
   Help sekcija - razmak izmedju liste i dugmeta

   Dugme je bilo prilepljeno uz listu jer je izmedju njih stajao template-ov
   potpis (.help-signature), koji je uklonjen - bio je demo potpis sa tudjim
   imenom. Uklanjanjem bloka nestao je i njegov razmak.
   -------------------------------------------------------------------------- */
.help-area .help-right .cmn-btn,
.help-area .help-item .cmn-btn {
  margin-top: 35px;
}

/* -----------------------------------------------------------------------------
   Blog kartice - jednaka visina u karuselu

   Naslovi saveta se prelamaju u jedan ili dva reda, pa su kartice bile razlicite
   visine, a link "Procitajte vise" je lebdeo na razlicitim linijama. Owl karusel
   ne postavlja jednaku visinu sam - zato .owl-stage postaje flex red, stavke se
   razvlace na istu visinu, a opis uzima slobodan prostor da link ostane na dnu.
   -------------------------------------------------------------------------- */
.blog-slider.owl-carousel .owl-stage {
  display: flex;
}
.blog-slider.owl-carousel .owl-item {
  display: flex;
  height: auto;
}
.blog-slider .blog-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.blog-slider .blog-item .blog-inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
/* opis gura link "Procitajte vise" na dno kartice */
.blog-slider .blog-item .blog-inner p {
  flex: 1 1 auto;
}

/* Kategorija (pilula) - bocni razmak oko teksta

   Template daje pilulu fiksnu max-width: 165px i samo vertikalni padding, pa
   duzi naziv ("Porodicno pravo") popuni sirinu i slova se slepe uz zaobljene
   ivice. display: table skuplja pilulu na sirinu sadrzaja, margin auto je i
   dalje centrira (kao template), a bocni padding daje vazduh oko teksta. */
.blog-slider .blog-item .blog-inner span {
  display: table;
  max-width: none;
  padding-left: 22px;
  padding-right: 22px;
}

/* -----------------------------------------------------------------------------
   Sirina sadrzaja - 1280px

   Bootstrap .container se zaustavlja na 1140px (xl) i skace na 1320px (xxl,
   od 1400px). Trazena sirina je 1280px, pa se kap postavlja na velikim
   ekranima; ispod 1200px ostaje netaknuto Bootstrap stepenovanje (540/720/
   960). .container-fluid (header/nav preko cele sirine) se ne dira.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .container {
    max-width: 1280px;
  }
}

/* -----------------------------------------------------------------------------
   Footer - gornji razmak

   Newsletter blok je uklonjen (klijent ga ne zeli), a on je u template-u bio
   prvi element footera i davao gornji vazduh. Bez njega kolone footera dodiruju
   gornju ivicu, pa se vraca razmak (copyright traka ispod vec ima margin-top: 70px).
   -------------------------------------------------------------------------- */
footer {
  padding-top: 90px;
}

/* -----------------------------------------------------------------------------
   Kontakt traka - prelamanje email adrese

   Na 576px sirine email (kontakt@advokatmilenailic.rs) je dug niz bez razmaka
   koji se ne prelama, pa je virio 6px van ekrana i pravio horizontalni skrol
   cele strane. overflow-wrap dozvoljava prelom unutar niza kad nema gde drugde.
   -------------------------------------------------------------------------- */
.location-item ul li,
.location-item ul li a {
  overflow-wrap: anywhere;
}

/* Kartice sa podacima - jednaka visina.
   Na kontakt strani kartice imaju vidljiv okvir, pa razlicit broj redova
   (adresa ima tri, telefon dva) pravi stepenaste okvire. Kolona je vec flex
   red, dovoljno je da kartica popuni visinu kolone. */
.location-bg > [class*="col-"] {
  display: flex;
}
.location-bg .location-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* -----------------------------------------------------------------------------
   Kontakt strana - forma

   Template forma ima samo placeholder tekst, bez <label>. Placeholder nestaje
   cim se krene kucati i citaci ekrana ga ne tretiraju kao naziv polja, pa su
   dodate prave oznake (WCAG 2.2). Ostalo koristi template klase.
   -------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
   Naslovna traka strane - braon prekrivac preko fotografije

   Template ima svoj prekrivac (.page-title-area:before, sivi #333 na 90%), pa
   se ne dodaje novi sloj nego se postojecem menja boja: ista tamna braon i ista
   jacina kao na kontakt formi, da dva prekrivaca na strani budu usklađena.
   rgba u gradijentu + opacity: 1 daje tacno 70%.
   -------------------------------------------------------------------------- */
.page-title-area::before {
  background-color: transparent;
  background-image: linear-gradient(
    180deg,
    rgba(38, 28, 17, .70) 0%,
    rgba(52, 39, 24, .70) 100%
  );
  opacity: 1;
}
/* Pozadine naslovnih traka po stranama.

   Template ima samo jednu klasu (.title-img-one -> assets/img/about/1.jpg), pa
   bi sve strane delile istu sliku. Zato nase naslovne idu u assets/img/naslovne/
   sa jednom klasom po strani. Kontakt ostaje na template-ovoj .title-img-one. */
.naslovna-krivicno {
  background-image: url("../img/naslovne/krivicno-pravo.jpg");
}
.naslovna-porodicno {
  background-image: url("../img/naslovne/porodicno-pravo.jpg");
}
.naslovna-naknada {
  background-image: url("../img/naslovne/naknada-stete.jpg");
}
.naslovna-privredno {
  background-image: url("../img/naslovne/privredno-pravo.jpg");
}
.naslovna-nasledno {
  background-image: url("../img/naslovne/nasledno-pravo.jpg");
}
.naslovna-radno {
  background-image: url("../img/naslovne/radno-pravo.jpg");
}
.naslovna-oblasti {
  background-image: url("../img/naslovne/oblasti-prava.jpg");
}
.naslovna-nekretnine {
  background-image: url("../img/naslovne/nekretnine.jpg");
}
.naslovna-izvrsenje {
  background-image: url("../img/naslovne/izvrsenje.jpg");
}
.naslovna-prekrsajno {
  background-image: url("../img/naslovne/prekrsajno-pravo.jpg");
}
.naslovna-gradjansko {
  background-image: url("../img/naslovne/gradjansko-pravo.jpg");
}
.naslovna-upravno {
  background-image: url("../img/naslovne/upravno-pravo.jpg");
}
.naslovna-medjunarodno {
  background-image: url("../img/naslovne/medjunarodno-pravo.jpg");
}
.naslovna-intelektualna {
  background-image: url("../img/naslovne/intelektualna-svojina.jpg");
}

/* Template boji samo .page-title-text h2. Naslov strane je kod nas <h1>
   (svaka strana mora imati tacno jedan H1), pa je ostajao na globalnoj tamnoj
   boji - tamno na tamnom. Isti stil kao template-ov h2. */
.page-title-text h1 {
  font-weight: 900;
  font-size: 38px;
  font-family: "Playfair Display", serif;
  color: #ffffff;
  margin-bottom: 20px;
}

/* -----------------------------------------------------------------------------
   Traka sa podacima (kontakt strana) - puna boja umesto slike

   Template ovde koristi placeholder fotografiju (location-bg.jpg, "1100x320")
   koja se providela kroz prekrivac. Umesto slike ide puna tamna braon - ista
   porodica kao prekrivaci na hero-u i formi, pa traka deluje kao deo iste celine.
   Prekrivac se gasi jer bi inace prekrio boju.

   Isto vazi i za pocetnu (.loaction-area): tamo je placeholder + gold prekrivac
   (90%) davao svetli ton na kome je beli tekst padao na 2.44:1 (WCAG AA fail).
   Obe trake sada nose istu punu tamnu braon, pa su usklađene i citljive.
   -------------------------------------------------------------------------- */
.contact-form-four .location-bg,
.loaction-area .location-bg {
  background-image: none;
  background-color: #342718;
}
.contact-form-four .location-bg::before,
.loaction-area .location-bg::before {
  display: none;
}

.kontakt-uvod {
  max-width: 780px;
  margin: 0 auto 40px;
  text-align: center;
}
/* naslov je bio #333 na tamnoj pozadini - kontrast 1.61:1, palo je AA */
.kontakt-uvod h2 {
  margin-bottom: 14px;
  color: #ffffff;
}

/* -----------------------------------------------------------------------------
   Forma - panel umesto razlivanja preko cele sirine

   Template stavlja formu u .container-fluid, pa se na 1440px razvlacila na
   1416px i polja su delovala razbacano. Ovde dobija razumnu sirinu, blagu
   povrsinu i okvir - da se cita kao jedna celina, a ne kao niz polja u vazduhu.
   -------------------------------------------------------------------------- */
#upitForma {
  max-width: 1020px;
  margin: 0 auto;
  padding: 44px 38px 34px;
  background-color: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 8px;
}
#upitForma .form-group {
  margin-bottom: 26px;
}
/* nice-select (template zamenjuje <select>) je bio 234px dok su polja 461px */
#upitForma .nice-select {
  width: 100%;
  float: none;
}
/* Prilog - nase dugme umesto nativnog "Choose File".
   Nativni unos je vizuelno sakriven ali ostaje u toku fokusa (ne display:none),
   pa radi i tastatura i citac ekrana. */
/* Wrapper NE nosi klasu .form-control: template joj daje height: 60px preko
   .contact-wrap .form-group .form-control, pa je na uskom ekranu duze ime fajla
   ispadalo iz okvira i naletalo na tekst ispod. Izgled polja je preuzet ovde,
   a visina prati sadrzaj. */
.fajl-polje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  min-height: 60px;
  padding: 10px 30px;
  border: 1px solid #8a7146;
  background-color: transparent;
}
.fajl-polje:focus-within {
  border-color: #ffffff;
}
.fajl-unos {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.fajl-dugme {
  flex: 0 0 auto;
  margin: 0;
  padding: 9px 20px;
  border-radius: 4px;
  background-color: #8a7146;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: .3s all ease;
}
.fajl-dugme:hover {
  background-color: #9d855e;
}
/* fokus sa tastature mora da se vidi na dugmetu, jer je unos sakriven */
.fajl-unos:focus-visible + .fajl-dugme {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}
.fajl-ime {
  flex: 1 1 160px;
  min-width: 0;
  color: #e6ddd0;
  font-size: 15px;
  overflow-wrap: anywhere;
}

/* -----------------------------------------------------------------------------
   Oblast prava - hitan blok i bocna traka
   -------------------------------------------------------------------------- */
.hitno-blok {
  margin: 30px 0 40px;
  padding: 24px 28px;
  border-left: 4px solid #8a7146;
  background-color: #faf8f5;
}
.hitno-blok p {
  margin-bottom: 0;
}
.hitno-akcije {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  margin-top: 20px !important;
}
.hitno-veza {
  color: #8a7146;
  font-weight: 600;
  text-decoration: underline;
}
.hitno-veza:hover {
  color: #6f5a35;
}
/* Bocni boks nema pozadinu - stoji na beloj strani. Bez eksplicitne boje
   napomena je nasledjivala belu i bila nevidljiva. */
.hitno-napomena {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: #646464;
}
/* Bocna lista oblasti: tekuca je naglasena, a one cije strane jos ne postoje
   stoje kao tekst - da se ne prave mrtvi linkovi. Postaju linkovi cim se
   strana napravi (dovoljno je dodati url u front matteru). */
.blog-details-category .oblast-aktivna {
  font-weight: 600;
  /* #8a7146 je 2.60:1 na belom (pada AA); tamniji brend braon daje 4.63:1. */
  color: #8a7146;
}
.theme-dark .blog-details-category .oblast-aktivna {
  color: #d9c4a1;
}
.blog-details-category .oblast-uskoro {
  display: block;
  color: #6f6f6f;
  cursor: default;
}
.blog-details-category .oblast-uskoro i {
  opacity: .45;
}
/* Template puni stavku brend braon (#8a7146) i pise belo - to je 2.60:1,
   ispod AA praga od 4.5:1. Braon se na hover zatamnjuje da beli tekst bude
   citljiv (4.65:1). Mirna traka od 3px ostaje u brend boji.
   Ova lista postoji samo na stranama oblasti, pa nema uticaja na ostatak sajta. */
.blog-details-category ul li:hover:before {
  background-color: #8a7146;
}

/* Stavke bez strane nisu <a> pa ih template pravilo za hover ne hvata -
   ostajale su sive na braon podlozi. Dobijaju isti tretman: bela na braon. */
.blog-details-category ul li.oblast-bez-strane:hover .oblast-uskoro,
.blog-details-category ul li.oblast-bez-strane:hover i {
  color: #ffffff;
}
.blog-details-category ul li.oblast-bez-strane:hover i {
  opacity: 1;
}
.theme-dark .hitno-napomena {
  color: #b8b8b8;
}
.theme-dark .hitno-blok {
  background-color: #262320;
}

/* Naslov samo za citace ekrana - drzi hijerarhiju H1 > H2 > H3 kad naslov
   sekcije ne treba da se vidi. */
.samo-citac {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* saglasnost - kvadratic od 16px je bio premali za dodir */
#upitForma .form-check-input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: #8a7146;
  cursor: pointer;
}
#upitForma .agree-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
#upitForma .form-check-label {
  cursor: pointer;
  line-height: 1.6;
}
/* dugme - siri pogodak i jasniji naglasak */
#upitForma .contact-btn {
  min-width: 240px;
  padding: 16px 40px;
}
/* Forma stoji na tamnom braon prekrivacu, pa tekst mora biti svetao.
   Tamne boje su ovde padale na 1.6:1 i 1.3:1 - WCAG AA trazi 4.5:1. */
.polje-oznaka {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 15px;
  color: #ffffff;
}
.polje-pomoc {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: #e6ddd0;
}
/* Template ima .contact-wrap .form-group label { color: #333 } - specificnije
   od same klase, pa se mora nadjacati istim putem, ne !important-om. */
.contact-wrap .form-group label.polje-oznaka {
  color: #ffffff;
}
.contact-wrap .form-group .form-check-label {
  color: #ffffff;
}
.contact-wrap .form-group .form-check-label a {
  color: #e3c99b;
  text-decoration: underline;
}
/* obavezna polja - zvezdica u brend boji */
.polje-oznaka span,
.form-check-label span {
  color: #8a7146;
}
/* honeypot: sakriveno od ljudi, vidljivo botovima. Ne display:none - deo
   botova preskace takva polja, a ovo hvata i njih. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* napomena o advokatskoj tajni */
.poverljivost {
  max-width: 820px;
  margin: 10px auto 30px;
  padding: 18px 22px;
  border-left: 3px solid #8a7146;
  background-color: #faf8f5;
}
.poverljivost p {
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #4a4a4a;
}
.poverljivost i {
  color: #8a7146;
}
/* Tamna tema: template boji tekst u belo, pa je na ovoj svetloj podlozi
   napomena bila nevidljiva (1.06:1). Panel u tamnoj temi mora biti taman. */
.theme-dark .poverljivost {
  background-color: #262320;
}
.theme-dark .poverljivost p {
  color: #ddd5c9;
}
/* poruka posle slanja */
.upit-poruka {
  max-width: 820px;
  margin: 0 auto 30px;
  padding: 18px 22px;
  border-left: 3px solid #2e7d32;
  background-color: #f1f8f2;
}
.upit-poruka.greska {
  border-left-color: #c62828;
  background-color: #fdf3f3;
}
.upit-poruka p {
  margin-bottom: 0;
  color: #23331f;
}
.upit-poruka.greska p {
  color: #3a1f1f;
}
/* isti razlog kao kod napomene - u tamnoj temi tekst postaje beo */
.theme-dark .upit-poruka {
  background-color: #1f2a1e;
}
.theme-dark .upit-poruka.greska {
  background-color: #2c1d1d;
}
.theme-dark .upit-poruka p,
.theme-dark .upit-poruka.greska p {
  color: #e4ded4;
}
/* mapa - template joj ne zadaje visinu na svim stranama */
.map-area iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

/* -----------------------------------------------------------------------------
   Slika "O advokatu" - od okvira do okvira

   Template okvir je .expertise-image:before (border: 10px solid #8a7146 + siva
   pozadina #373535). Kontejner ima padding-top: 100px i ostavlja sliku prirodne
   velicine, pa se siva vidi svuda oko slike. Da slika ide tacno do zlatnog okvira:
   kontejner dobija simetrican padding od 10px (sirina okvira), a slika je puna
   sirina - tako sedi na unutrasnjoj ivici okvira i prekriva svu sivu.
   box-sizing: border-box je globalan (Bootstrap), pa okvir crta unutar padding-a.
   -------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
   Hero slika - zlatni okvir

   Prethodna hero fotografija je imala okvir ubacen u sam fajl (24px u izvoru,
   ~12px na ekranu). Nova slika (1240x1360, uspravna) ga nema, pa se okvir vraca
   preko CSS-a - u istoj brend zlatnoj koju koristi i okvir slike "O advokatu",
   da dva rama na strani budu usklađena. Template nema svoj border na ovoj slici.
   -------------------------------------------------------------------------- */
.banner-area .banner-right .banner-animation {
  border: 12px solid #8a7146;
}

.expertise-image {
  padding: 10px;
}
.expertise-image img {
  width: 100%;
  height: auto;
  display: block;
  bottom: 0;
}

/* Stavke menija bez strane - ispisuju se kao tekst dok se strana ne napravi.
   Prigusene su, ali citljive (5.02:1 na tamnoj traci menija). */
.navbar-nav .meni-bez-strane {
  color: #b9b9b9;
  cursor: default;
}
/* U mobilnom meniju meanmenu stilizuje samo <a>, pa su stavke bez strane
   stajale bez uvlacenja i bez linije. Preuzimaju isti raspored. */
.mean-container .mean-nav ul li .meni-bez-strane {
  display: block;
  float: left;
  width: 90%;
  padding: 1em 5%;
  margin: 0;
  text-align: left;
  border-top: 1px solid #DBEEFD;
}
.mean-container .mean-nav ul li li .meni-bez-strane {
  width: 80%;
  padding: 1em 10%;
}
/* Footer - stavke bez strane (isti princip kao u meniju i bocnoj listi) */
.podnozje-bez-strane {
  color: #c9c9c9;
  cursor: default;
}
.podnozje-bez-strane i {
  opacity: .5;
}
/* U tamnoj temi bocna lista stoji na tamnoj podlozi, pa prigusena siva pada
   na 3.35:1. Svetlija varijanta drzi AA i u tamnom rezimu. */
.theme-dark .blog-details-category .oblast-uskoro {
  color: #a8a8a8;
}

/* -----------------------------------------------------------------------------
   Koraci procesa na stranama oblasti - kartice umesto liste

   Duga strana teksta postaje monotona; tri koraka su prirodno mesto da se
   ritam prekine. Isti vizuelni jezik kao koraci na pocetnoj (braon kruzni broj),
   da sajt deluje kao jedna celina.

   <ol> jer su koraci redosledni. Broj se ispisuje iz CSS-a preko oznake i
   nosi aria-hidden, pa citac ekrana cita samo naslov i opis - redosled mu
   ionako daje sama <ol>.
   -------------------------------------------------------------------------- */
.practice-details-content .koraci {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0 0 45px;
  padding: 0;
  list-style: none;
}
.practice-details-content .korak-kartica {
  flex: 1 1 200px;
  margin: 0;
  padding: 32px 24px 28px;
  background-color: #faf8f5;
  border-top: 3px solid #8a7146;
  border-radius: 6px;
  text-align: center;
}
.korak-oznaka {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background-color: #8a7146;
  color: #ffffff;
  font-family: "Playfair Display", serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
}
.practice-details-content .korak-kartica h3 {
  margin-bottom: 10px;
  font-size: 19px;
  font-weight: 600;
}
.practice-details-content .korak-kartica p {
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.7;
  /* Boju na oblasti stranama daje .practice-details-item .practice-details-content p;
     kada .practice-details-content stoji sam (npr. koraci na O advokatu), te boje
     nema, pa se postavlja ovde da tekst ne nasledi belu body boju. */
  color: #4a4a4a;
}
.theme-dark .practice-details-content .korak-kartica {
  background-color: #262320;
}
.theme-dark .practice-details-content .korak-kartica p {
  color: #c4c4c4;
}

/* -----------------------------------------------------------------------------
   Naslovi sekcija na stranama oblasti - vazduh iznad

   Template daje .section-title margin-top: -7px i margin-bottom: 30px, pa je
   naslov bio 13px ispod prethodnog sadrzaja a 30px iznad svog - obrnuto od
   onoga kako treba. Naslov mora biti blizi onome sto uvodi nego onome sto
   ostavlja, inace strana deluje zbijeno.

   Prvi naslov ne dobija dodatni razmak jer iznad njega ide uvod.
   -------------------------------------------------------------------------- */
.practice-details-content .section-title {
  margin-top: 55px;
}
.practice-details-content > .section-title:first-child {
  margin-top: 0;
}

/* Poslednji pasus u istaknutim kutijama nosi template margin-bottom: 20px
   (.practice-details-item .practice-details-content p), pa je tekst delovao
   odgurnut nagore - 18px iznad, 38px ispod. Nadjacava se specificnoscu. */
.practice-details-item .practice-details-content .poverljivost p:last-child,
.practice-details-item .practice-details-content .hitno-blok p:last-child,
.practice-details-item .practice-details-content .korak-kartica p:last-child {
  margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
   Telo teksta 16px - na svim sirinama

   Template obara body na 14px ispod 1200px i uz to pinuje 13-15px na desetak
   pojedinacnih komponenti, na svim sirinama. Sadrzaj je zbog toga bio sitniji
   nego sto treba, a na telefonu i sitniji nego na desktopu.

   Zasto !important: template-ova pravila su duboka tri klase (na primer
   ".banner-area .banner-item .banner-left p"), pa bi ih trebalo nadmasivati
   selektor po selektor - krhko i tesko za odrzavanje. Ovde je jedno mesto sa
   spiskom elemenata koji nose citljiv sadrzaj.

   Namerno NIJE na spisku sitni UI: meni, datumi, oznake kategorija, mrvice.
   Njima manja velicina pripada i zadrzavaju template vrednosti.
   -------------------------------------------------------------------------- */
body {
  font-size: 16px;
}

.banner-left p,
.practice-item p,
.practice-details-content p,
.practice-details-content ul li,
.practice-details-content ol li,
.korak-kartica p,
.accordion li p,
.poverljivost p,
.hitno-blok p,
.hitno-napomena,
.portfolio-inner p,
.expertise-item p,
.help-inner-left ul li,
.help-inner-right ul li,
.team-inner span:not(.korak-broj),
.blog-inner p,
.blog-inner ul li,
.blog-inner ul li a,
.location-item ul li,
.location-item ul li a,
.practice-details-contact ul li,
.practice-details-contact ul li a,
.kontakt-uvod p,
.polje-oznaka,
.polje-pomoc,
.form-check-label,
footer .footer-logo p,
footer .footer-service ul li a,
footer .footer-find ul li,
.nice-select .list .option,
.nice-select .current,
.fajl-ime,
.banner-bottom p,
.banner-bottom span,
footer .copyright-item p{
  font-size: 16px !important;
}

/* -----------------------------------------------------------------------------
   Kontrast - nalazi iz skeniranja strane Nasledno pravo (23.07.2026)

   Sve ispod su template-ove boje koje ne prolaze WCAG 2.2 AA (4.5:1 za obican
   tekst). Popravke su minimalne: menja se samo boja, ne i raspored, i cuva se
   brend paleta - tamniji ton istog braon koji je vec u upotrebi (#8a7146).
   Vazi za ceo sajt, ne samo za ovu stranu.
   -------------------------------------------------------------------------- */

/* Glavno dugme: belo na brend braon #8a7146 je 2.60:1 - jedva citljivo na
   suncu i na losijim ekranima. Tamniji braon daje 4.63:1, a hover (crna
   zavesa #333) je i dalje 12.6:1. */
.cmn-btn {
  background-color: #8a7146;
}

/* Viber link stoji pored dugmeta: 4.37:1 je promasaj za 0.13. */
.hitno-veza {
  color: #7d663f;
}
.hitno-veza:hover {
  color: #5f4d2f;
}
.theme-dark .hitno-veza {
  color: #c9ae7e;
}

/* Bocni kontakt (telefon, mejl, adresa): #858585 na belom je 3.69:1.
   U tamnoj temi je ista boja ispravna, pa se tamo vraca svetlija. */
.practice-details-item .practice-details-contact ul li,
.practice-details-item .practice-details-contact ul li a {
  color: #646464;
}
.theme-dark .practice-details-item .practice-details-contact ul li,
.theme-dark .practice-details-item .practice-details-contact ul li a {
  color: #b0b0b0;
}

/* Tamna tema uopste ne pokriva liste u sadrzaju - ostajale su na #4a4a4a
   preko #1d1d1d, dakle 1.90:1 (prakticno nevidljivo). Span u stavci nasledjuje
   boju, pa ga isto pravilo hvata. */
.theme-dark .practice-details-item .practice-details-content ul li {
  color: #c4c4c4;
}

/* Otvoreno pitanje u FAQ-u: u svetloj temi je tamno na braon (5.9:1, prolazi),
   ali tamna tema forsira belo (#FFFFFF !important) pa pada na 2.60:1.
   Isti tamniji braon kao dugme resava i to. */
.theme-dark .accordion li a.active {
  background-color: #8a7146;
  border-color: #8a7146;
}

/* -----------------------------------------------------------------------------
   Kartice koraka - nikad dve u redu pa jedna ispod

   Sa `flex: 1 1 200px` broj kartica u redu zavisi od raspolozive sirine, pa se
   na 480-767px i na 992-1199px (kad se pojavi bocna kolona) dobijalo 2 + 1 -
   dve visoke kartice i jedna usamljena, vidno druge visine.

   Container query gleda sirinu same liste, ne prozora, pa hvata oba slucaja
   jednim pravilom: dok ima mesta za tri, ide tri; cim nema, ide jedna po red.
   Stariji pregledaci ignorisu blok i dobijaju dosadasnje ponasanje.
   -------------------------------------------------------------------------- */
.practice-details-content .koraci {
  container-type: inline-size;
}
/* 660px = tri kartice od 200px + dva razmaka od 24px (648), plus mala rezerva
   da se ne desi da "taman stanu" pa se prelome na 2 + 1. */
@container (max-width: 660px) {
  .practice-details-content .korak-kartica {
    flex: 1 1 100%;
  }
}

/* -----------------------------------------------------------------------------
   Kartice situacija - tamniji pojas ispod oznake

   Template-ov prekrivac ide od skoro crne na dnu do braon 29% na 56% visine,
   pa je oznaka kategorije (najsitniji tekst na kartici) padala na svetlijim
   fotografijama: izmereno 2.66:1 i 3.48:1 na kartici sa belom kucom i sa
   svetlim stolom, pri pragu od 4.5:1.

   Dodata je jos jedna tacka u gradijentu, tako da tamno drzi do oko trecine
   visine - tacno tamo gde stoje oznaka i naslov. Dno i vrh kartice izgledaju
   isto kao pre, pa se izgled ne menja, samo se tekst odvaja od pozadine.
   -------------------------------------------------------------------------- */
.portfolio-item:before {
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, .97) 0%,
    rgba(0, 0, 0, .80) 30%,
    rgba(182, 157, 116, .29) 62%
  );
}

/* -----------------------------------------------------------------------------
   Preostali sitan tekst - nalazi iz prolaza kroz sve strane (23.07.2026)

   Pravilo "telo teksta 16px" pokrivalo je liste i pasuse, ali ne i ove
   elemente: naslov i link na blog kartici, glavno dugme u hero sekciji i
   dugme za izbor fajla na kontaktu. Sve cetiri su sadrzaj koji se cita ili
   klikce, ne sitni UI.

   Namerno se NE diraju: nadnaslovi sekcija (".section-title span", verzalom,
   12-14px) i pilule kategorija na blog karticama - to su oznake, ne telo
   teksta, i vec su tako dogovorene.
   -------------------------------------------------------------------------- */
.blog-item .blog-inner h3 a,
.blog-item .blog-inner .blog-link,
.accordion a,
.fajl-dugme {
  font-size: 16px;
}

/* Dugmad: template ih ispod 1200px obara na 15px, a ispod 768px na 14px.
   Poziv na akciju je poslednje sto treba da se smanji na telefonu - tu je i
   najvazniji. Hero dugme na pocetnoj nema klasu, pa se hvata preko roditelja. */
.cmn-btn,
.banner-area .banner-item .banner-left a {
  font-size: 16px;
}

/* -----------------------------------------------------------------------------
   Hub oblasti prava - uvodni tekst i zavrsni CTA

   Strana koristi template-ov .practice-area grid (kao pocetna), pa kartice vec
   dobijaju jednaku visinu iz pravila gore. Ovde su samo uvod iznad mreze i
   zavrsni poziv na akciju: razmak izmedju pasusa i dugmeta, i vazduh oko uvoda.
   -------------------------------------------------------------------------- */
/* Uvod je sada u dve kolone (slika + tekst), pa razmak do prve grupe nosi red. */
.oblasti-uvod-red {
  margin-bottom: 70px;
}
.oblasti-uvod h2 {
  margin-bottom: 20px;
}
/* Template-ov body je bele boje (racuna na tamne pozadine), pa svaki <p> bez
   svoje boje nasledi belu. Pillar pasusi imaju template pravilo (#4a4a4a); ovi
   custom pasusi ga nemaju, pa se boja postavlja rucno na istu vrednost. Bez toga
   je belo na svetloj sekciji - 1.12:1, prakticno nevidljivo. */
.oblasti-uvod p {
  font-size: 16px;
  color: #4a4a4a;
}
.oblasti-uvod .cmn-btn {
  margin-top: 12px;
}
.theme-dark .oblasti-uvod p {
  color: #ffffff;
}

/* -----------------------------------------------------------------------------
   Slike na hubu - ram sa fiksnim odnosom

   object-fit: cover sa fiksnim aspect-ratio znaci da bilo koja dostavljena
   fotografija lepo iskadrira bez razvlacenja (za razliku od template-ovog
   object-fit: fill, gde odnos mora tacno da se poklopi). Naizmenicno levo/desno
   raspored je u markup-u, ovde je samo izgled rama.
   -------------------------------------------------------------------------- */
.oblasti-slika {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .10);
}
.oblasti-slika img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
/* uz FAQ ide uspravna slika, da bolje prati visinu akordeona */
.oblasti-slika--visoka img {
  aspect-ratio: 3 / 4;
}
/* na uskim ekranima slika dobija razmak od teksta ispod/iznad */
@media (max-width: 991px) {
  .oblasti-slika {
    margin-bottom: 30px;
  }
}

/* -----------------------------------------------------------------------------
   "Kako radim" - lista prednosti sa kvakicom
   -------------------------------------------------------------------------- */
.zasto-uvod {
  font-size: 16px;
  color: #4a4a4a;
  margin-bottom: 22px;
}
.theme-dark .zasto-uvod {
  color: #d8d8d8;
}
.zasto-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
.zasto-lista li {
  position: relative;
  padding-left: 40px;
  margin-bottom: 16px;
  font-size: 16px;
  color: #4a4a4a;
  line-height: 1.6;
}
.theme-dark .zasto-lista li {
  color: #eaeaea;
}
.zasto-lista li:last-child {
  margin-bottom: 0;
}
.zasto-lista li i {
  position: absolute;
  left: 0;
  top: 2px;
  color: #8a7146;
  font-size: 22px;
}
/* -----------------------------------------------------------------------------
   Zavrsni CTA - band preko fotografije

   Ceo blok je fotografija sa tamnim braon prekrivacem (isti ton kao naslovne
   trake i kontakt forma), pa tekst ide beo. Prekrivac je jak (~82%) da beli
   tekst i naslov sigurno prolaze AA i preko svetlijeg dela slike.
   -------------------------------------------------------------------------- */
.oblasti-cta {
  position: relative;
  z-index: 1;
  padding: 90px 0;
  background-image: url("../img/oblasti-hub/cta.jpg");
  background-size: cover;
  background-position: center;
}
.oblasti-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(38, 28, 17, .84) 0%,
    rgba(52, 39, 24, .84) 100%
  );
}
.oblasti-cta .section-title h2 {
  color: #ffffff;
}
.oblasti-cta .section-title span {
  color: #d9c4a1;
}
/* Jednak razmak naslov -> tekst -> dugme. Template .section-title nosi
   margin-bottom: 50px (naslov->tekst), a pasus 28px (tekst->dugme); oba na 30px. */
.oblasti-cta .section-title {
  margin-bottom: 30px;
}
.oblasti-cta p {
  margin: 0 auto 30px;
  max-width: 640px;
  font-size: 16px;
  color: #f1e9dd;
}

/* Grupe oblasti - razmak izmedju grupa i kratak opis ispod naslova grupe.
   .grupa-opis je plain <p>, pa nasledjuje belu boju template body-ja (isto kao
   uvod) - boja se postavlja rucno. Prva grupa ne dobija gornji razmak jer iznad
   nje stoji uvod. */
.oblasti-grupa + .oblasti-grupa {
  margin-top: 55px;
}
.grupa-opis {
  margin: -10px auto 30px;
  font-size: 16px;
  color: #4a4a4a;
}
.theme-dark .grupa-opis {
  color: #d8d8d8;
}
/* Naslov grupe je uzi razmak do kartica nego template-ov section-title (koji je
   racunat za velike razmake izmedju sekcija). */
.oblasti-grupa .section-title {
  margin-bottom: 18px;
}

/* -----------------------------------------------------------------------------
   Dvokolonske sekcije (uvod, "kako radim", FAQ) - vazduh oko kolona

   Template-ov razmak izmedju kolona je bio samo 24px (12px paddinga po koloni),
   pa su slika i tekst delovali slepljeni jedno uz drugo i uz ivicu. Na desktopu
   se padding kolona povecava, cime gutter izmedju slike i teksta raste na ~52px,
   a sadrzaj se odmakne od ivice. Na telefonu (kolone jedna ispod druge) ostaje
   template razmak, da se ne gubi sirina.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .oblasti-dvokolona > [class*="col-"] {
    padding-left: 26px;
    padding-right: 26px;
  }
}

/* -----------------------------------------------------------------------------
   "Kako radim" - naslov sekcije levo + tekst odmaknut od leve ivice

   Dve stvari koje su cinile da tekst deluje slepljen za ivicu:
   1) .section-title je template-om centriran; ovo je Bootstrap 5, gde ne postoji
      .text-left (klasa je .text-start), pa je nadnaslov i naslov ostajao
      centriran dok su pasus i lista levo - odatle utisak neporavnatosti.
   2) Ovo je jedina dvokolona gde je TEKST na spoljnoj strani (u druge dve je
      tamo slika, koja svojim ramom deluje uvuceno). Zato tekstualna kolona
      dobija dodatni levi padding, da se jasno odvoji od ivice.
   -------------------------------------------------------------------------- */
/* Gornji razmak: sekcija sa karticama iznad ima roze pozadinu, a ova je bela;
   bez gornjeg paddinga naslov "KAKO RADIM" sedi tacno na granici dve boje i
   deluje zalepljen za sekciju iznad. Padding ga odvaja unutar bele sekcije. */
.zasto-area {
  padding-top: 80px;
}
.zasto-tekst .section-title,
.zasto-tekst .section-title span,
.zasto-tekst .section-title h2 {
  text-align: left;
}
@media (min-width: 992px) {
  .zasto-tekst {
    padding-left: 40px;
  }
}
@media (min-width: 1200px) {
  .zasto-tekst {
    padding-left: 65px;
  }
}

/* =============================================================================
   PRAVNI SAVETI (blog) - listing, kartica, clanak, bocna traka
   (dodato 24.07.2026)

   Naslovi u meniju/hijerarhiji: strana ima jedan H1 (naslovna traka), pa su
   naslovi kartica H2, a bocni naslovi H2, naslovi u "Najnoviji tekstovi" H3.
   Template boji te elemente po TAGU (h3/h4), pa se izgled ovde replicira na
   ispravne tagove - hijerarhija ostaje uredna, a vizuelno je isto.

   Telo clanka (.clanak-telo) je unutar .blog-details-item, a NE unutar
   .practice-details-item, pa template pravila za boju teksta ne vaze. Zato se
   sve boje postavljaju ovde - inace bi tekst nasledio belu body boju.
   ============================================================================= */
.naslovna-clanak {
  background-image: url("../img/naslovne/pravni-saveti.jpg");
}

/* Template .blog-area nosi padding-bottom: 200px (razmak za owl tackice na
   pocetnoj) i po redosledu nadjacava klasu .pb-70 na listingu, pa iznad CTA
   trake zja 200px praznine - mnogo vise nego drugde. Listing nema karusel, pa
   se vraca na simetrican razmak sa vrhom sekcije (pt-70). */
.blog-area-two {
  padding-bottom: 70px;
}

/* --- Listing: kartica --- */
/* Izvorne slike su raznih odnosa (situacije ~0.92 portret, naslovne 3.2 baner).
   Template slici daje samo width:100%, pa bi svaka kartica bila druge visine, a
   width/height atributi (3:2) bi je sabili. Ujednacen thumbnail: fiksan odnos +
   object-fit cover (atributi 400x267 = 3:2, pa nema pomeranja rasporeda). */
.blog-item a img {
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
}
/* Jednaka visina kartica u redu: kolone su vec jednake (Bootstrap flex red), ali
   se kartica ne rasteze. Kartica postaje flex-kolona na punu visinu, a link
   "Procitajte" se gura na dno da poravnanje ne zavisi od duzine opisa. */
.blog-area-two .blog-item {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}
.blog-area-two .blog-item .blog-inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.blog-area-two .blog-item .blog-inner .blog-link {
  margin-top: auto;
}
/* Badge kategorije - isti tretman kao pilula na pocetnoj (.blog-slider): skuplja
   se na sadrzaj (display:table) uz bocni vazduh, umesto fiksne max-width:165px
   koja duzi naziv ("Porodicno pravo") slepi uz zaobljene ivice. margin auto iz
   template-a je i dalje centrira, margin-top:-20px i dalje penje preko slike. */
.blog-area-two .blog-item .blog-inner span {
  display: table;
  max-width: none;
  padding-left: 22px;
  padding-right: 22px;
}
/* Horizontalni i vertikalni razmak kartica ide preko Bootstrap gutter-a (g-4 u
   markup-u = 24px u oba smera), pa kartica sama ne nosi margin. g-4 daje redu
   negativnu marginu -12px, koliko je i padding .container-a, pa nema iscurivanja
   ni horizontalnog skrola na ivici breakpointa. */
.blog-item .blog-inner .clanak-kartica-naslov {
  margin-bottom: 18px;
  line-height: 1.4;
}
.blog-item .blog-inner .clanak-kartica-naslov a {
  display: block;
  font-weight: 600;
  font-size: 20px;
  font-family: "Playfair Display", serif;
  color: #111111;
}
.blog-item .blog-inner .clanak-kartica-naslov a:hover {
  color: #8a7146;
}

/* --- Clanak: istaknuta slika i meta --- */
.blog-details-item .blog-details-img img {
  border-radius: 8px;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}
/* Template daje meti #a8a7a5 (~2.5:1 na belom) - obara se na citljiv ton. */
.blog-details-item .blog-details-img ul.clanak-meta {
  margin-bottom: 30px;
}
.blog-details-item .blog-details-img ul.clanak-meta li {
  color: #5a5a5a;
  font-size: 16px;
}
.blog-details-item .blog-details-img ul.clanak-meta li a {
  color: #8a7146;
}
.blog-details-item .blog-details-img ul.clanak-meta li a:hover {
  color: #333333;
}
.blog-details-item .blog-details-img ul.clanak-meta li i {
  color: #8a7146;
}
.theme-dark .blog-details-item .blog-details-img ul.clanak-meta li {
  color: #cfcfcf;
}
.theme-dark .blog-details-item .blog-details-img ul.clanak-meta li a {
  color: #d9c4a1;
}

/* --- Bocni naslovi (H2, izgled template h3) --- */
.bocni-naslov {
  font-weight: 600;
  font-size: 22px;
  font-family: "Playfair Display", serif;
  color: #464646;
  margin-bottom: 20px;
}
.theme-dark .bocni-naslov {
  color: #f1f1f1;
}

/* --- Najnoviji tekstovi (naslov H3, izgled template h4) --- */
.blog-details-item .blog-details-search ul li img {
  width: 95px;
  height: 95px;
  object-fit: cover;
}
.blog-details-item .blog-details-search ul li .blog-details-recent {
  padding-left: 115px;
}
.blog-details-item .blog-details-search ul li .blog-details-recent h3 {
  color: #464646;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 8px;
}
.blog-details-item .blog-details-search ul li .blog-details-recent h3 a {
  display: block;
  color: #464646;
}
.blog-details-item .blog-details-search ul li .blog-details-recent h3 a:hover {
  color: #8a7146;
}
.theme-dark .blog-details-item .blog-details-search ul li .blog-details-recent h3,
.theme-dark .blog-details-item .blog-details-search ul li .blog-details-recent h3 a {
  color: #e6e6e6;
}

/* --- Telo clanka (Markdown) --- */
.clanak-telo,
.clanak-telo p {
  color: #4a4a4a;
}
.clanak-telo > :first-child {
  margin-top: 0;
}
.clanak-telo h2 {
  font-weight: 700;
  font-size: 36px;
  font-family: "Playfair Display", serif;
  color: #1a1a1a;
  line-height: 1.3;
  margin: 42px 0 16px;
}
.clanak-telo h3 {
  font-weight: 600;
  font-size: 21px;
  font-family: "Playfair Display", serif;
  color: #1a1a1a;
  margin: 32px 0 12px;
}
.clanak-telo ul,
.clanak-telo ol {
  margin: 0 0 20px;
  padding-left: 22px;
}
.clanak-telo ul {
  list-style: disc;
}
.clanak-telo ol {
  list-style: decimal;
}
.clanak-telo ul li,
.clanak-telo ol li {
  color: #4a4a4a;
  margin-bottom: 8px;
}
.clanak-telo a {
  color: #8a7146;
  text-decoration: underline;
}
.clanak-telo a:hover {
  color: #5f4e30;
}
.clanak-telo strong {
  color: #2a2a2a;
}
.clanak-telo blockquote {
  margin: 0 0 24px;
  padding: 16px 22px;
  border-left: 4px solid #8a7146;
  background: #f7f3ec;
  color: #4a4a4a;
  border-radius: 0 8px 8px 0;
}
.clanak-telo blockquote p:last-child {
  margin-bottom: 0;
}
.theme-dark .clanak-telo,
.theme-dark .clanak-telo p,
.theme-dark .clanak-telo ul li,
.theme-dark .clanak-telo ol li {
  color: #d8d8d8;
}
.theme-dark .clanak-telo h2,
.theme-dark .clanak-telo h3,
.theme-dark .clanak-telo strong {
  color: #ffffff;
}
.theme-dark .clanak-telo a {
  color: #d9c4a1;
}
.theme-dark .clanak-telo blockquote {
  background: rgba(255, 255, 255, .06);
  color: #d8d8d8;
}

/* Bocna kontakt kartica je u .blog-details-item (ne .practice-details-item),
   pa je postojeca kontrast-popravka ne hvata: tekst je nasledjivao belu body
   boju (nevidljiv), a link template gold #8a7146 (2.60:1). Isti tonovi kao na
   oblasti stranama. */
.blog-details-item .practice-details-contact ul li,
.blog-details-item .practice-details-contact ul li a {
  color: #646464;
}
.blog-details-item .practice-details-contact ul li a:hover {
  color: #8a7146;
}
.theme-dark .blog-details-item .practice-details-contact ul li,
.theme-dark .blog-details-item .practice-details-contact ul li a {
  color: #b0b0b0;
}

/* --- CTA red ispod clanka --- */
.clanak-cta-red {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin: 32px 0 0;
}

/* =============================================================================
   Krugovi umesto blob oblika iza ikonica (dodato 24.07.2026)

   Template iza ikonica stavlja PNG "blob" (nepravilan oblik): home-one/11.png u
   .expertise-icon (sekcija "Zasto ja") i home-one/12.png u .location-icon (traka
   Adresa/Email/Telefon na pocetnoj). Deluje neozbiljno. Blob se sakriva, a
   kontejner postaje pravi krug sa suptilnom pozadinom; ikonica se centrira flex-om.

   Kontakt strana (.contact-form-four) NE dira se - tamo su ikonice vec obrubljeni
   krugovi, pa je scope namerno uzak (.expertise-item, .loaction-area).
   ============================================================================= */
.expertise-item ul li .expertise-icon,
.loaction-area .location-item .location-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.expertise-item ul li .expertise-icon img,
.loaction-area .location-item .location-icon img {
  display: none;
}
/* ikonica: ponistava se apsolutno pozicioniranje i template-ova 50x50 blok kutija
   sa line-height 20px (glif bi ostao pri VRHU kutije - "pobegao" na gore). Sad je
   sam <i> flex koji popuni krug i centrira glif i vodoravno i uspravno. */
.expertise-item ul li .expertise-icon i,
.loaction-area .location-item .location-icon i {
  position: static;
  left: auto;
  top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
}
/* Zasto ja - tamna sekcija: topli, suptilan krug, zlatna ikonica ostaje */
.expertise-item ul li .expertise-icon {
  width: 86px;
  height: 86px;
  background-color: rgba(182, 157, 116, .16);
}
/* Traka sa podacima - puna tamna braon: krug je suptilno svetliji od trake
   (tamni krug bi se izgubio), bela ikonica ostaje. */
.loaction-area .location-item .location-icon {
  width: 72px;
  height: 72px;
  background-color: rgba(255, 255, 255, .10);
}
/* Krug vertikalno centriran sa celim tekstom (naslov + podaci), ne pri vrhu, i
   odvojen od leve ivice kartice. Tekst dobija veci levi padding da napravi mesta
   (20 razmak + 72 krug + 20 razmak = 112). */
.loaction-area .location-item {
  padding-left: 112px;
}
.loaction-area .location-item .location-icon {
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}

/* -----------------------------------------------------------------------------
   Traka "Od 2017. / Advokatska komora Nis" (.banner-bottom)

   Bela kutija (li:last-child) je nesto niza od kvadrata sa ikonicom (li koji ima
   line-height: 100px). Celije su inline-block sa baseline poravnanjem, pa iznad
   bele kutije ostaje par piksela prozirnog razmaka kroz koji se providi tamna
   hero slika - deluje kao tanka crna linija na vrhu belog kontejnera.

   Flex izjednacava visine obe celije (nema procepa), a sadrzaj bele kutije se
   vertikalno centrira da tekst ostane na mestu.
   -------------------------------------------------------------------------- */
.banner-bottom ul {
  display: flex;
  align-items: stretch;
}
.banner-bottom ul li:last-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Braon je na samoj ikonici <i> (fiksnih ~100px), pa kad flex razvuce celiju
   na visinu bele kutije, <i> ne stigne do dna. Celija sa ikonicom postaje flex,
   a <i> se razvlaci na punu visinu i centrira glif. */
.banner-bottom ul li:first-child {
  display: flex;
}
.banner-bottom ul li:first-child i {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Nadnaslovi sekcija (.section-title span, npr. "BLOG", "ZASTO OVA KANCELARIJA")
   - na zahtev podignuti sa 14px na 16px. Vazi svuda gde se koristi .section-title. */
.section-title span {
  font-size: 16px;
}

/* =============================================================================
   O ADVOKATU (attorney-details)  (dodato 25.07.2026)

   Naslovi sekcija su H2 (leva kolona je prva u DOM-u posle H1, pa bi h3 napravio
   preskok H1->H3). Template stilove vezane za h3 repliciramo na h2. Gold #8a7146
   za naslove sadrzaja pada AA (2.6:1) -> tamniji brend braon #8a7146 (4.63:1).
   ============================================================================= */
.naslovna-oadvokatu {
  background-image: url("../img/naslovne/oblasti-prava.jpg");
}
.attor-details-item img {
  border-radius: 8px;
  margin-bottom: 30px;
  /* height atribut (1097) postaje CSS height:1097px; bez ovoga width:100% suzi
     sliku i iskrivi je. height:auto vraca pravi odnos. */
  height: auto;
}
/* Kontakt kutija: template daje padding-top: 0 (racunat da slika stoji unutra),
   a kod nas je slika iznad kutije - pa je gore bilo 0, dole 40px + margina dugmeta.
   Izjednacava se na 40px gore/dole, uz gasenje viska margine poslednjeg reda. */
.attor-details-item .attor-details-left {
  padding-top: 40px;
}
.attor-details-item .attor-details-left .hitno-akcije:last-child {
  margin-bottom: 0;
}
/* Citljiv sadrzaj (kontakt, radno vreme, bio, liste) - 16px i na mobilnom
   (template ga obara na 13-14px). */
.attor-details-item .attor-details-left .attor-social-details ul li,
.attor-details-item .attor-details-left .attor-social-details ul li a,
.attor-details-item .attor-details-left .attor-work ul li,
.attor-details-item .attor-details-right .attor-details-name p,
.attor-details-item .attor-details-right .attor-details-things p,
.attor-details-item .attor-details-right .attor-details-things ul li,
.attor-details-item .attor-details-right .attor-details-things ul li a {
  font-size: 16px !important;
}
/* leva kolona: naslovi (Kontakt, Radno vreme) - h2 u izgledu template h3 */
.attor-details-item .attor-details-left .attor-social-details h2,
.attor-details-item .attor-details-left .attor-work h2 {
  font-weight: 600;
  font-family: "Playfair Display", serif;
  font-size: 22px;
  margin-bottom: 20px;
}
/* desna kolona: naslovi sadrzaja - h2, tamniji braon (gold pada AA) */
.attor-details-item .attor-details-right .attor-details-things h2 {
  color: #8a7146;
  font-weight: 600;
  font-size: 22px;
  font-family: "Playfair Display", serif;
  margin-top: 34px;
  margin-bottom: 20px;
}
.attor-details-item .attor-details-right .attor-details-things:first-child h2 {
  margin-top: 0;
}
/* lead pasus - template #838383 (3.5:1) -> citljiviji taman */
.attor-details-item .attor-details-right .attor-details-name p {
  color: #4a4a4a;
  font-size: 16px;
}
/* Rolni nadnaslov ("Advokat · Član Advokatske komore Niš") - verzalni brend
   eyebrow kao ostali nadnaslovi sekcija, umesto blede sive. #8a7146 prolazi AA. */
.attor-details-item .attor-details-right .attor-details-name span {
  color: #8a7146;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.theme-dark .attor-details-item .attor-details-right .attor-details-name span {
  color: #d9c4a1;
}
/* linkovi u sadrzaju */
.attor-details-item .attor-details-right .attor-details-things a {
  color: #8a7146;
  text-decoration: underline;
}
.attor-details-item .attor-details-right .attor-details-things a:hover {
  color: #5f4e30;
}
/* lista oblasti u dve kolone (13 stavki) */
.attor-oblasti-lista {
  columns: 2;
  column-gap: 28px;
}
.attor-oblasti-lista li {
  break-inside: avoid;
}
/* tamna tema: attor-details tekst je #333 (nevidljiv na tamnoj) */
.theme-dark .attor-details-item .attor-details-left .attor-social-details ul li,
.theme-dark .attor-details-item .attor-details-left .attor-social-details ul li a,
.theme-dark .attor-details-item .attor-details-left .attor-work ul li,
.theme-dark .attor-details-item .attor-details-right .attor-details-things p,
.theme-dark .attor-details-item .attor-details-right .attor-details-things ul li,
.theme-dark .attor-details-item .attor-details-right .attor-details-name p {
  color: #d8d8d8;
}
.theme-dark .attor-details-item .attor-details-right .attor-details-things a {
  color: #d9c4a1;
}

/* O advokatu - "Za koga radim": zakljucak + CTA na dnu leve kolone, da sadrzaj
   ide celom visinom slike. */
.zasto-zakljucak {
  margin-top: 26px;
  margin-bottom: 24px;
  font-size: 16px;
  color: #4a4a4a;
}
.theme-dark .zasto-zakljucak {
  color: #d8d8d8;
}
.zasto-tekst .cmn-btn {
  display: inline-block;
}

/* -----------------------------------------------------------------------------
   Footer "Oblasti prava" - 13 stavki u jednom stubu pravilo je footer ogromnim
   (jedna kolona ~600px, ostale kratke). Lista ide u dve kolone (7+6), pa je
   footer upola nizi i uravnotezeniji. Kolona je i malo prosirena (col-lg-4).
   -------------------------------------------------------------------------- */
.footer-oblasti ul {
  columns: 2;
  column-gap: 26px;
}
.footer-oblasti ul li {
  break-inside: avoid;
}

/* =============================================================================
   SITUACIJE (edukativne "kako izgleda" strane)  (dodato 25.07.2026)
   Hub deli .portfolio-item kartice (kao na oblasti stranama), grupisane po
   oblasti. Detalj strane dele blog/clanak markup (.clanak-telo).
   ============================================================================= */
.naslovna-situacija {
  background-image: url("../img/naslovne/situacije.jpg");
}
.situacije-grupa + .situacije-grupa {
  margin-top: 55px;
}
.situacije-grupa .section-title {
  margin-bottom: 22px;
}
/* Kartice na hubu koriste blog-item stil (slika + bela kutija, jednaka visina,
   badge pilula) - sve to nasledjuju iz .blog-area-two pravila. */

/* Uvod na hubu: naslov (eyebrow + h2) + lead + brzi izbor oblasti (cip nav).
   Ranije je uvod bio samo jedan pasus u praznini - deluje siromasno. */
.situacije-uvod .section-title {
  margin-bottom: 18px;
}
.situacije-uvod p {
  font-size: 16px;
  color: #4a4a4a;
  line-height: 1.8;
  margin-bottom: 0;
}
.theme-dark .situacije-uvod p {
  color: #d8d8d8;
}
/* Brzi izbor oblasti - pilule koje skacu na grupe nize (sidra #oblast-*). */
.situacije-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 42px;
}
.situacije-nav a {
  display: inline-block;
  padding: 9px 20px;
  border: 1px solid #e2ddd3;
  border-radius: 30px;
  background: #faf8f4;
  color: #4a4a4a;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  transition: all .3s ease;
}
.situacije-nav a:hover,
.situacije-nav a:focus-visible {
  background: #8a7146;
  border-color: #8a7146;
  color: #ffffff;
}
.theme-dark .situacije-nav a {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .15);
  color: #d8d8d8;
}
.theme-dark .situacije-nav a:hover,
.theme-dark .situacije-nav a:focus-visible {
  background: #8a7146;
  border-color: #8a7146;
  color: #1a1a1a;
}
/* Sidra na grupe: da sticky header ne prekrije naslov pri skoku sa cipa. */
.situacije-grupa {
  scroll-margin-top: 100px;
}
/* Template nema klasu .pt-70 (samo .pb-70), pa je hub imao 0 gore i prva grupa
   se preklapala sa cip-navigacijom. Realan razmak izmedju uvoda i prve grupe. */
.situacije-hub {
  padding-top: 70px;
}
/* Prvi eyebrow grupe da malo odahne od naslova ispod. */
.situacije-grupa .section-title span,
.blog-kategorija .section-title span {
  margin-bottom: 10px;
}

/* -----------------------------------------------------------------------------
   Blog (Pravni saveti) - grupe po kategoriji + brojcana paginacija
   -------------------------------------------------------------------------- */
.blog-kategorija {
  scroll-margin-top: 100px;
}
.blog-kategorija + .blog-kategorija {
  margin-top: 55px;
}
.blog-kategorija .section-title {
  margin-bottom: 22px;
}
/* Brojcana paginacija (JS je otkriva kad kategorija ima >4 teksta). */
.blog-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}
.blog-pager button {
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #e2ddd3;
  border-radius: 8px;
  background: #faf8f4;
  color: #4a4a4a;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all .3s ease;
}
.blog-pager button:hover,
.blog-pager button:focus-visible {
  border-color: #8a7146;
  color: #8a7146;
}
.blog-pager button.aktivna {
  background: #8a7146;
  border-color: #8a7146;
  color: #ffffff;
}
.theme-dark .blog-pager button {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .15);
  color: #d8d8d8;
}
.theme-dark .blog-pager button:hover,
.theme-dark .blog-pager button:focus-visible {
  border-color: #8a7146;
  color: #8a7146;
}
.theme-dark .blog-pager button.aktivna {
  background: #8a7146;
  border-color: #8a7146;
  color: #1a1a1a;
}

/* Situacije kartice na OBLASTI stranama (.practice-details-case) sad koriste
   iste 16:9 heroje kao hub/detalj. Template im daje samo width:100% (prirodna
   visina), pa bi 4 slike raznih odnosa dale 4 razne visine. Fiksan 16:9 +
   object-fit cover = ujednacen ram, tekst overlay (.portfolio-inner) uvek na dnu
   iste visine. Kolone su col-lg-6 (2x2), pa 16:9 lepo popuni red. */
.practice-details-case .portfolio-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* Dugme "Pogledajte sve situacije" ispod kartica - vodi na hub. */
.situacije-vise {
  margin-top: 45px;
}

/* -----------------------------------------------------------------------------
   Bocni kontakt na situacije/blog stranama ("Imate ovakvu situaciju?").
   Blok je u .blog-details-item (ne .practice-details-item), pa ga template stil
   ne hvata - delovao je go i prazan. Pravi card: topla podloga, okvir, ikonice
   u zlatnim kruzicima, dugme preko cele sirine + linija o advokatskoj tajni.
   -------------------------------------------------------------------------- */
.blog-details-item .practice-details-contact {
  background: #faf8f4;
  border: 1px solid #ece6da;
  border-radius: 10px;
  padding: 32px 30px;
  margin-top: 10px;
}
.theme-dark .blog-details-item .practice-details-contact {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .10);
}
.blog-details-item .practice-details-contact .bocni-naslov {
  margin-bottom: 24px;
}
.blog-details-item .practice-details-contact ul {
  margin: 0 0 22px;
  padding: 0;
}
.blog-details-item .practice-details-contact ul li {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
  color: #4a4a4a;
  font-size: 16px;
  line-height: 1.5;
  /* dugacak mejl/adresa mora da se prelomi, ne da probije card u uskom bocnom stubu */
  min-width: 0;
  overflow-wrap: anywhere;
}
.blog-details-item .practice-details-contact ul li a {
  min-width: 0;
  overflow-wrap: anywhere;
}
.blog-details-item .practice-details-contact ul li:last-child {
  margin-bottom: 0;
}
.blog-details-item .practice-details-contact ul li a {
  color: #4a4a4a;
  transition: color .3s ease;
}
.blog-details-item .practice-details-contact ul li a:hover {
  color: #8a7146;
}
/* ikonice u zlatnim kruzicima (flaticon glif se centrira preko flex-a) */
.blog-details-item .practice-details-contact ul li i {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #8a7146;
  color: #ffffff;
  font-size: 16px;
}
.blog-details-item .practice-details-contact .hitno-napomena {
  margin-bottom: 22px;
  color: #4a4a4a;
  line-height: 1.7;
}
.blog-details-item .practice-details-contact .cmn-btn {
  display: block;
  width: 100%;
  text-align: center;
}
/* mikro-linija o poverljivosti ispod dugmeta */
.kontakt-poverljivost {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  font-size: 14px !important;
  color: #7a7161;
  line-height: 1.5;
}
.kontakt-poverljivost i {
  color: #8a7146;
  font-size: 15px;
}
.theme-dark .blog-details-item .practice-details-contact ul li,
.theme-dark .blog-details-item .practice-details-contact ul li a,
.theme-dark .blog-details-item .practice-details-contact .hitno-napomena {
  color: #d8d8d8;
}
.theme-dark .kontakt-poverljivost {
  color: #b8b0a2;
}

/* =============================================================================
   PRAVNE STRANE (Politika privatnosti, Uslovi, Politika kolacica, Impresum)
   Jednostavna citljiva kolona; telo je Markdown pa vaze .clanak-telo pravila.
   ============================================================================= */
.naslovna-pravna {
  background-image: url("../img/naslovne/oblasti-prava.jpg");
}
.pravna-telo {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.pravna-datum {
  font-size: 14px;
  color: #8a8172;
  margin-bottom: 34px;
  padding-bottom: 18px;
  border-bottom: 1px solid #ece6da;
}
.theme-dark .pravna-datum {
  color: #b8b0a2;
  border-bottom-color: rgba(255, 255, 255, .12);
}

/* --- Podnozje: pravni linkovi --- */
.podnozje-pravno {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  justify-content: flex-end;
  align-items: center;
}
.copyright-item.copyright-right .podnozje-pravno a,
.podnozje-pravno .podnozje-kolacici {
  color: #c8c2b6;
  font-size: 14px;
  text-decoration: none;
  transition: color .2s ease;
}
.podnozje-pravno .podnozje-kolacici {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.copyright-item.copyright-right .podnozje-pravno a:hover,
.podnozje-pravno .podnozje-kolacici:hover,
.podnozje-pravno .podnozje-kolacici:focus-visible {
  color: #d9c4a1;
  text-decoration: underline;
}
@media (max-width: 767px) {
  .podnozje-pravno {
    justify-content: center;
    margin-top: 12px;
  }
}

/* =============================================================================
   BANER ZA KOLACICE (delovi/kolacici.njk)
   ============================================================================= */
.kolacici-baner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1050;
  background: #1f1710;
  color: #ece6da;
  border: 1px solid #3a2e1e;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .32);
  padding: 20px 24px;
}
.kolacici-baner[hidden] {
  display: none;
}
.kolacici-sadrzaj {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  max-width: 1100px;
  margin: 0 auto;
}
.kolacici-tekst {
  flex: 1 1 340px;
  min-width: 0;
}
.kolacici-naslov {
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  margin: 0 0 4px;
}
.kolacici-tekst p:last-child {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #cfc7b8;
}
.kolacici-tekst a {
  color: #d9c4a1;
  text-decoration: underline;
}
.kolacici-dugmad {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.kolacici-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  padding: 11px 22px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.kolacici-prihvati {
  background: #8a7146;
  color: #fff;
  border-color: #8a7146;
}
.kolacici-prihvati:hover,
.kolacici-prihvati:focus-visible {
  background: #a08553;
  border-color: #a08553;
}
.kolacici-odbij {
  background: transparent;
  color: #ece6da;
  border-color: #5a4c37;
}
.kolacici-odbij:hover,
.kolacici-odbij:focus-visible {
  border-color: #d9c4a1;
  color: #fff;
}
@media (max-width: 575px) {
  .kolacici-dugmad {
    width: 100%;
  }
  .kolacici-btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* =============================================================================
   BLIZANAC (povezani blog <-> situacija) - kontekstualni link na dnu teksta.
   Stoji u .blog-details-item, pa boje idu eksplicitno (inace nasledi belu).
   ============================================================================= */
.clanak-blizanac {
  margin: 0 0 30px;
  border: 1px solid #e2ddd3;
  border-left: 4px solid #8a7146;
  border-radius: 10px;
  background: #faf8f4;
  padding: 20px 24px;
}
.clanak-blizanac-oznaka {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a7146;
  margin-bottom: 8px;
}
.clanak-blizanac a {
  display: block;
  text-decoration: none;
}
.clanak-blizanac-naslov {
  display: block;
  font-family: "Playfair Display", serif;
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.35;
  margin-bottom: 6px;
}
.clanak-blizanac a:hover .clanak-blizanac-naslov,
.clanak-blizanac a:focus-visible .clanak-blizanac-naslov {
  color: #8a7146;
}
.clanak-blizanac-opis {
  display: block;
  font-size: 15px;
  color: #5f5f5f;
}
.clanak-blizanac-opis i {
  color: #8a7146;
  margin-left: 4px;
}
.theme-dark .clanak-blizanac {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .14);
  border-left-color: #b89a5f;
}
.theme-dark .clanak-blizanac-oznaka { color: #d9c4a1; }
.theme-dark .clanak-blizanac-naslov { color: #fff; }
.theme-dark .clanak-blizanac-opis { color: #cfc7b8; }

/* =============================================================================
   CENOVNIK (Advokatska tarifa) - kartice "kako se formira cena" + tabele.
   ============================================================================= */
.cenovnik-kartica {
  height: 100%;
  background: #faf8f4;
  border: 1px solid #ece6da;
  border-radius: 12px;
  padding: 26px 24px;
}
.cenovnik-kartica .cenovnik-broj {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #8a7146;
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 16px;
}
.cenovnik-kartica h3 {
  font-family: "Playfair Display", serif;
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 10px;
}
.cenovnik-kartica p {
  font-size: 15px;
  color: #5f5f5f;
  margin: 0;
  line-height: 1.6;
}
.cenovnik-grupa {
  margin-bottom: 50px;
}
.cenovnik-grupa .section-title {
  margin-bottom: 14px;
}
.cenovnik-opis {
  color: #5f5f5f;
  margin-bottom: 22px;
  max-width: 820px;
}
/* Tabela: horizontalni skrol na uskim ekranima, bez loma rasporeda strane */
.tarifa-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #ece6da;
  border-radius: 12px;
}
.tarifa-tabela {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
  background: #fff;
}
.tarifa-tabela-dve {
  min-width: 420px;
}
.tarifa-tabela thead th {
  background: #2a2118;
  color: #f3eee4;
  font-weight: 600;
  font-size: 14px;
  text-align: left;
  padding: 14px 18px;
  white-space: nowrap;
}
.tarifa-tabela tbody th,
.tarifa-tabela tbody td {
  padding: 13px 18px;
  border-top: 1px solid #ece6da;
  font-size: 15px;
  vertical-align: top;
}
.tarifa-tabela tbody th {
  font-weight: 600;
  color: #2a2a2a;
  text-align: left;
}
.tarifa-tabela tbody td {
  color: #4a4a4a;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tarifa-tabela tbody td:not(:first-child) {
  font-weight: 600;
  color: #6f5b34;
}
.tarifa-tabela-dve tbody td {
  white-space: normal;
}
.tarifa-tabela tbody tr:nth-child(even) th,
.tarifa-tabela tbody tr:nth-child(even) td {
  background: #faf8f4;
}
.cenovnik-napomena {
  background: #f7f3ec;
  border-left: 4px solid #8a7146;
  border-radius: 0 10px 10px 0;
  padding: 20px 24px;
  margin-top: 10px;
}
.cenovnik-napomena p {
  margin: 0;
  font-size: 15px;
  color: #5f5f5f;
  line-height: 1.65;
}
.cenovnik-napomena i {
  color: #8a7146;
  margin-right: 6px;
}
.cenovnik-napomena a {
  color: #8a7146;
  text-decoration: underline;
}
.cenovnik-napomena a:hover {
  color: #5f4e30;
}
/* dark */
.theme-dark .cenovnik-kartica {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
}
.theme-dark .cenovnik-kartica h3 { color: #fff; }
.theme-dark .cenovnik-kartica p,
.theme-dark .cenovnik-opis { color: #cfc7b8; }
.theme-dark .tarifa-scroll { border-color: rgba(255, 255, 255, .12); }
.theme-dark .tarifa-tabela { background: #241d15; }
.theme-dark .tarifa-tabela tbody th { color: #f0ece3; }
.theme-dark .tarifa-tabela tbody td { color: #cfc7b8; }
.theme-dark .tarifa-tabela tbody td:not(:first-child) { color: #d9c4a1; }
.theme-dark .tarifa-tabela tbody th,
.theme-dark .tarifa-tabela tbody td { border-top-color: rgba(255, 255, 255, .10); }
.theme-dark .tarifa-tabela tbody tr:nth-child(even) th,
.theme-dark .tarifa-tabela tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .04); }
.theme-dark .cenovnik-napomena {
  background: rgba(255, 255, 255, .05);
}
.theme-dark .cenovnik-napomena p { color: #cfc7b8; }
.theme-dark .cenovnik-napomena a { color: #d9c4a1; }

/* =============================================================================
   Dark mode uklonjen: prekidac teme (koji custom.js ubacuje) se sakriva.
   Tema je zakljucana na svetlu (forsira se u base.njk pre custom.js).
   ============================================================================= */
.switch-box {
  display: none !important;
}

/* Cenovnik: vazduh izmedju uvodnog teksta i kartica + centriran telo-tekst */
.cenovnik-kako {
  padding-top: 45px;
}
.cenovnik-kartica {
  text-align: center;
}
.cenovnik-kartica .cenovnik-broj {
  margin-left: auto;
  margin-right: auto;
}
.cenovnik-opis {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Podnozje: kredit izrade sajta */
.podnozje-izrada {
  margin-top: 6px;
  font-size: 13px;
  opacity: .8;
}
.copyright-item .podnozje-izrada a {
  color: #d9c4a1;
  text-decoration: none;
}
.copyright-item .podnozje-izrada a:hover,
.copyright-item .podnozje-izrada a:focus-visible {
  text-decoration: underline;
}

/* =============================================================================
   Logo (horizontalni lockup MI + "Milena N. Ilić" + ADVOKAT, svetli tekst).
   Header i footer su tamni, pa ista svetla verzija radi na oba. Lockup je siri
   od template placeholdera, pa mu se zadaje visina (sirina auto), bez max-width.
   ============================================================================= */
.navbar-brand img,
.mobile-nav .logo img {
  height: 46px;
  width: auto;
  max-width: none;
}
footer .footer-item .footer-logo a img {
  height: 56px;
  width: auto;
  max-width: none;
  margin-bottom: 18px;
}
@media (max-width: 991px) {
  .navbar-brand img,
  .mobile-nav .logo img {
    height: 42px;
  }
}

/* Footer: linkovi se ne "rastezu" na hover (template dodaje letter-spacing:1px).
   Zadrzava se samo promena boje. */
footer .footer-item .footer-find ul li a:hover,
footer .footer-item .footer-service ul li a:hover {
  letter-spacing: normal;
}

/* Kontakt baner (.location-item): hover boja linka je bila #333 (nevidljiva na
   tamnoj podlozi) -> svetlo zlatna, citljiva. */
.location-item ul li a:hover {
  color: #d9c4a1;
}

/* =============================================================================
   Eyebrow (.section-title span) - AA kontrast zavisi od podloge.
   #8a7146 prolazi na beloj (4.67:1) ali pada na bež sekcijama (~4.1:1) i na
   tamnim (~3.75:1). Zato: svetle/bež sekcije -> tamniji zlatni; tamne -> svetliji.
   ============================================================================= */
.section-title span,
.oblasti-uvod span,
.situacije-uvod span {
  color: #7a6538;
}
.expertise-area .section-title span {
  color: #d9c4a1;
}

/* =============================================================================
   Kontakt forma je na TAMNOJ podlozi (contact-bg.png, bele labele). Uneti tekst
   je bio #333 (necitljiv na tamnom) -> svetao; placeholder svetliji; fajl-dugme
   belo na zlatnom (bilo #333 = 2.71:1).
   ============================================================================= */
.contact-form-four .form-group .form-control,
.contact-form-four .form-group textarea.form-control {
  color: #f5efe5;
}
.contact-form-four .form-group .form-control::placeholder {
  color: #c9bfad;
  opacity: 1;
}
.contact-form-four .fajl-polje .fajl-dugme {
  color: #ffffff;
}

/* =============================================================================
   Uklonjene kontinuirane "float" animacije sa slika pocetne:
   - hero portret (.banner-animation) se pomerao 10s u krug
   - zlatni ram help slike (.help-left:before) je driftovao 30px
   Nepotrebno za premium ton; slike sada stoje mirno i uredno pozicionirane.
   ============================================================================= */
.banner-item .banner-right .banner-animation,
.help-left::before {
  animation: none !important;
  transform: none !important;
}

/* =============================================================================
   MOBILNE DORADE (<=767px)
   ============================================================================= */
@media only screen and (max-width: 767px) {
  /* 1. Ram i slika centrirani (template ih drzi ofsetovane/uz desnu ivicu) */
  .help-left {
    margin-left: auto;
    margin-right: auto;
    /* 2. Vazduh ispod slike (pre teksta "Radite direktno sa advokatom") */
    margin-bottom: 35px;
  }
  .help-left:before {
    left: 0;
  }
  .expertise-image {
    margin-left: auto;
    margin-right: auto;
  }

  /* 4. Manji padding kontakt forme (#upitForma je imao 38px sa svake strane) */
  #upitForma {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* 3. Kontakt info: email da stane u jedan red (bez usamljenog "s").
     !important jer opsti "16px" pravilo iznad nosi !important. */
  .location-item ul li,
  .location-item ul li a {
    font-size: 14px !important;
  }
}