:root{
  --okvir: #FBFCFE;
  --bela: #F1F6FF;
  --tamno-plava: #1B3058;
  --svetlo-plava: #7E8FAB;
  --tekst: #000000;
  --container-width: 1350px;
  --font-naslov: 'Work Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-obican: 'Space Grotesk', 'Work Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

body{
  background-color: var(--okvir);
  margin: 0;
  padding: 2%;
  font-family: var(--font-obican);
  color: var(--tekst);
}
main{
  border-left: 5px solid var(--svetlo-plava);
  border-right: 5px solid var(--svetlo-plava);
  background:var( --bela)
}
footer{
  border-left: 5px solid var(--svetlo-plava);
  border-right: 5px solid var(--svetlo-plava);
  border-bottom: 5px solid var(--svetlo-plava);
  background:var( --bela)
} 
/* Prevent flash of untranslated content (FOUC) for i18n: hide elements marked with data-i18n until translations finish */
.pre-i18n [data-i18n]{ visibility: hidden; }

/* Smooth scrolling for anchor links */
html{ scroll-behavior: smooth; }
:root{ --header-height: 120px; }

/* Ensure target sections won't be hidden under fixed header */
section{ scroll-margin-top: calc(var(--header-height) + 12px); }

/* Reveal animation for sections */
.sekcija-anim{ opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease; }
.sekcija-anim.in-view{ opacity:1; transform:none; }


.zaglavlje{
  border: 5px solid var(--svetlo-plava);
  height: 120px;
  border-bottom: none;
  background-color: var(--tamno-plava);
  color: white;
}
.zaglavlje-unutrasnjost{
  display:flex;
  align-items:center;
  gap:20px;
  height:100%;
  padding: 0 40px;
}

@media (max-width:1024px){
  .zaglavlje-unutrasnjost{ padding: 0 30px; }
}

@media (max-width:600px){
  .zaglavlje-unutrasnjost{ padding: 0 20px; }
}

@media (max-width:425px){
  .zaglavlje-unutrasnjost{ padding: 0 15px; }
}

@media (max-width:350px){
  .zaglavlje-unutrasnjost{ padding: 0 12px; }
}
.logo{ font-weight:700; font-size:1.125rem; letter-spacing:1px; display:block; flex-shrink: 0;}
.logo img{ width:232px; max-width:100%; height:auto; display:block; }

@media (max-width:500px){
  .logo img{ width:45px; height:60px; object-fit:cover; object-position:left; clip-path:rect(0, 60px, 120px, 0); }
}
.akcije-zaglavlja{ display:flex; gap:12px; align-items:center; flex-shrink: 0; position:relative; margin-left:auto; }

@media (max-width:1024px){
  .akcije-zaglavlja{ width:auto; }
}
.glavna-navigacija{flex: 1;display: flex;justify-content: center;}

@media (max-width:1024px){
  .glavna-navigacija{ display:none; }
}

.promena-jezika{ background:transparent; color:#fff; border:0; cursor:pointer;display: flex; align-items: center; gap: 8px;}
.lang-label{ display:inline; }

@media (max-width:1024px){
  .lang-label{ display:none; }
}

.glavna-navigacija ul{ display:flex; gap:24px; list-style:none; margin:0; padding:0; }
.glavna-navigacija a{ color:white; text-decoration:none; }


/* Language dropdown styling */
.jezik-meni{ position:absolute; left:0; top:calc(100% + 8px); background:#fff; color:var(--tamno-plava); border-radius:6px; box-shadow:0 8px 24px rgba(11,23,40,0.15); padding:6px 0; list-style:none; margin:0; z-index:1200; }
.jezik-meni[hidden]{ display:none; }
.jezik-meni li{ padding:0; }
.jezik-meni button{ display:block; width:100%; text-align:left; padding:8px 12px; border:0; background:transparent; color:inherit; cursor:pointer; font-size:0.95rem; }
.jezik-meni button[aria-checked="true"]{ background:rgba(27,48,88,0.06); font-weight:700; }

/* Kontakt dugme style */
.kontakt-dugme{ background:#fff; color:var(--tamno-plava); padding: 10px 15px; text-decoration:none; font-weight:700; border:0; display:inline-block; }
.kontakt-dugme:hover{ opacity:0.95; }

/* Hamburger & mobile nav */
.dugme-hamburger{ display:none; background:transparent; border:0; color:var(--svetlo-plava); font-size:1.4rem; padding:6px 8px; cursor:pointer; }

@media (max-width:1024px){
  .glavna-navigacija{ position:fixed; top:0; right:0; width:100%; height:100%; background:var(--tamno-plava); transform:translateX(100%); transition:transform .28s ease; z-index:1000; display:flex; flex-direction:column; overflow-y:auto; }
  .glavna-navigacija ul{ display:flex; flex-direction:column; padding:20px 30px; gap:12px; }
  .glavna-navigacija li{ margin-bottom:8px; }
  .glavna-navigacija a{ color:#fff; font-size:1.05rem; display:block; padding:12px 10px; }
  .glavna-navigacija.otvorena{ transform:translateX(0); display:flex !important; }
  .dugme-hamburger{ display:inline-block; }
  .akcije-zaglavlja .kontakt-dugme{ display:none; }
}


.kontejner{
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 30px;
}

@media (max-width:1024px){
  .kontejner{ padding: 0 24px; }
}

@media (max-width:800px){
  .kontejner{ padding: 0 20px; }
}

@media (max-width:600px){
  .kontejner{ padding: 0 15px; }
}

@media (max-width:425px){
  .kontejner{ padding: 0 12px; }
}

@media (max-width:350px){
  .kontejner{ padding: 0 8px; }
} 

h1{
  font-weight: 600!important;
}
h2,h3,h4,h5,h6,.naslov-heroja{
  font-family: var(--font-naslov);
  font-weight: 700;
  margin: 0;
}






















/* Hero statistics — layout + number effect */
.hero-sekcija{ padding: 56px 0; }
.hero-unutrasnjost{ text-align:center; max-width: var(--container-width); margin: 0 auto; padding: 40px 16px; }
.hero-unutrasnjost .naslov-heroja{ font-size:72px; }
@media (max-width:800px){ .hero-unutrasnjost .naslov-heroja{ font-size:2.5rem; } }
@media (max-width:425px){ .hero-unutrasnjost .naslov-heroja{ font-size:2rem; } }
@media (max-width:350px){ .hero-unutrasnjost .naslov-heroja{ font-size:1.5rem; } }

.uvod-heroja{ max-width:840px; margin:0 auto; }

.hero-statistike{ display:flex; gap:40px; justify-content: space-between; align-items: center; margin-top:40px; flex-wrap:wrap; }
.hero-statistike .stat{ flex: 1 1 20%; min-width:140px; text-align:center; }
.stat-broj{ font-family: var(--font-naslov); font-size:52px; font-weight:600; color:#000; position:relative; }
.stat-broj::after{ content: none; }
.stat-opis{ margin-top:0; color:#000; font-size:16px; }
/* remove hover animation */
.stat:hover .stat-broj,
.stat:hover .stat-broj::after { transform: none; color: inherit; }


@media (max-width:800px){
  .hero-statistike{ flex-direction:column; gap:18px; align-items:flex-start; text-align:left; }
  .hero-statistike .stat{ width:100%; }
  .hero-sekcija{ padding:36px 0; }
}

/* Services section */
.usluge{
  background: #eef6fb;
  border-top: 2px solid var(--accent);
  padding: 56px 0;
}
.usluge h2{ text-align:center; font-size:3.375rem; margin-bottom:6px; max-width:1070px; margin-left:auto; margin-right:auto; }
.usluge .section-lead{ max-width:840px; margin:0 auto; text-align:center; line-height:1.6; margin-bottom:24px; }
.mreza-usluga{ display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; margin-top:24px; }
.kartica-usluge{ padding:30px; min-height:auto; max-height:242px; border:1px solid #000000; background:#dfeaf5; display:flex; flex-direction:column; justify-content:space-between;}
.kartica-usluge.svetlo{ background:#7E8FAB; color:black; }
.kartica-usluge.tamno{ background:var(--tamno-plava); color: #fff; }
.kartica-usluge h3{ font-size:1.5rem; margin:0 0 8px 0; font-family: var(--font-obican); /* display controlled by wrapper */ }
.kartica-usluge p{ margin:0; line-height:1.5; color:inherit; opacity:0.95; font-size:0.95rem; }
.naziv-usluge{ display:flex; align-items:center; gap:8px; }
.ikona-usluge{ font-size:1.5rem; width:1.5rem; height:1.5rem; margin:0; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ikona-usluge img,
.ikona-usluge svg{ width:100%; height:100%; }

@media (max-width:800px){
  .usluge{ padding:36px 0; }
  .usluge h2{ font-size:2.5rem; word-wrap: break-word; word-break: break-word; }
  .kartica-usluge{ padding:24px; max-height:auto; }
  .kartica-usluge h3{ font-size:1.25rem; }
}

@media (max-width:600px){
  .mreza-usluga{ grid-template-columns:1fr; gap:16px; }
  .kartica-usluge{ padding:20px; }
  .kartica-usluge h3{ font-size:1.1rem; }
}

@media (max-width:425px){
  .usluge h2{ font-size:2rem; word-wrap: break-word; word-break: break-word; }
  .kartica-usluge{ padding:16px; }
  .kartica-usluge h3{ font-size:1rem; }
}

@media (max-width:350px){
  .usluge h2{ font-size:1.5rem; word-wrap: break-word; word-break: break-word; }
} 

/* Products section */
.proizvodi{
  background: var(--tamno-plava);
  color: #fff;
  padding: 56px 0;
  border-top: 2px solid rgba(255,255,255,0.03);
}
.proizvodi-vrh{ display:flex; align-items:flex-start; gap:24px; justify-content:space-between; }
.proizvodi h2{ font-size:3.375rem; margin:0; margin-left:30px; margin-right:15px; }
.proizvodi-vrh{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.karakteristike-proizvoda{  display:flex; flex-wrap:wrap; gap:24px; list-style:none; margin:0; padding:0; align-items:center; margin-left: 32px !important;}
.karakteristike-proizvoda li{ display:flex; align-items:center; gap:12px; }
.karakteristike-proizvoda .square{ width:32px; height:32px; background:#fff; flex-shrink:0; }
.karakteristike-proizvoda .feat-text{ color: rgba(255,255,255,0.9); font-size:1rem; font-family: var(--font-obican); }

.karakteristike-proizvoda{ display:flex; gap:32px; list-style:none; margin:0; padding:0; align-items:center; }
.karakteristike-proizvoda li{ display:flex; gap:12px; align-items:flex-start; max-width:260px; }
.karakteristike-proizvoda .square{ width:14px; height:14px; background:#fff; display:inline-block; flex:0 0 14px; margin-top:4px; }
.karakteristike-proizvoda .feat-text{ color: rgba(255,255,255,0.9); font-size:0.92rem; }

.products-showcase{ padding-top:28px; margin-left:30px; margin-right:15px; }
.platno-proizvoda{ background:#fff; width:100%; max-width:1230px; aspect-ratio:1230/756; min-height:756px; }
.proizvodi{ min-height:1180px; }


@media (max-width:1024px){
  .karakteristike-proizvoda{ gap:20px; }
  .platno-proizvoda{ max-width:100%; aspect-ratio:inherit; }
} 

@media (max-width:800px){
  .proizvodi-vrh{ flex-direction:column; align-items:flex-start; gap:12px; }
  .karakteristike-proizvoda{ flex-direction:column; align-items:flex-start; }
  .karakteristike-proizvoda li{ margin-bottom:10px; }
  .platno-proizvoda{ max-width:100%; aspect-ratio:inherit; }
  .proizvodi h2{ font-size:2.5rem; word-wrap: break-word; word-break: break-word; }
}

@media (max-width:425px){
  .proizvodi h2{ font-size:2rem; word-wrap: break-word; word-break: break-word; }
}

@media (max-width:350px){
  .proizvodi h2{ font-size:1.5rem; word-wrap: break-word; word-break: break-word; }
} 

/* Recommendations */
.preporuke{ padding:100px 0; }
.preporuke h2{ font-size:3.375rem; margin-bottom:20px; margin-right: 15px; }
.mreza-preporuka{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:30px; justify-content: center;}
.kartica-preporuke{ background:var(--tamno-plava); color:#fff; padding:28px; box-shadow:0 0 0 8px rgba(16,46,80,0.06) inset; display:flex; flex-direction:column; justify-content:space-between; height:500px; margin:0; }
.kartica-preporuke p{ margin:0 0 18px 0; line-height:1.5; opacity:0.95; font-weight:600; font-size:1rem; }
.preporuka-podnozje{ display:flex; flex-direction:column; gap:6px; font-size:1rem; color:rgba(255,255,255,0.9); font-weight:500; }
.preporuka-podnozje strong{ font-weight:500; }
.preporuka-podnozje span{ font-weight:400; }

@media (max-width:1350px){
  /* no change for grid */
}
@media (max-width:990px){
  /* no change */
}
@media (max-width:800px){
  .preporuke h2{ font-size:2.5rem; word-wrap: break-word; word-break: break-word; }
}
@media (max-width:425px){
  .preporuke h2{ font-size:2rem; margin-bottom:30px; word-wrap: break-word; word-break: break-word; margin-right: 15px; }
  .mreza-preporuka{ grid-template-columns:1fr; gap:20px; }
  .kartica-preporuke{ padding:18px; height:auto; min-height:380px; }
}
@media (max-width:350px){
  .preporuke h2{ font-size:1.5rem; word-wrap: break-word; word-break: break-word; margin-right: 15px; }
}
@media (max-width:660px){
  .preporuke{ padding:36px 0; }
} 












/* Contact section */
.kontakt{ background:#eef6fb; padding:56px 0; border-top:2px solid var(--accent); }
.kontakt h2{ font-size:3.375rem; margin:0 0 8px; }
.contact-lead{ max-width:720px; color:#455; margin-bottom:18px; }
.forma-kontakt{ margin-top:16px; }
/* grid layout for wide screens */
.mreza-kontakta{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start;
  grid-template-areas:
    "fullName message"
    "email message"
    "info message";
}
.form-row{ display:flex; flex-direction:column; }
.form-row.full-name{ grid-area: fullName; }
.form-row.email{ grid-area: email; }
.form-row.message{ grid-area: message; }
.kontakt-osoba{ grid-area: info; }
.form-row label{ font-size:0.9rem; color:#333; margin-bottom:6px; }
.mreza-kontakta input[type="text"],
.mreza-kontakta input[type="email"],
.mreza-kontakta textarea{
  padding:10px 12px;
  border:2px solid rgba(16,46,80,0.6);
  background:transparent;
  border-radius:2px;
  font-family:var(--font-base);
}
.mreza-kontakta input::placeholder,
.mreza-kontakta textarea::placeholder{ color:rgba(16,46,80,0.4); }
.kontakt-osoba{ margin-top:18px; font-size:16px; color:var(--text); }
.kontakt-osoba p{ margin:6px 0; }
.mreza-kontakta textarea{ min-height:360px; resize:none; }
.contact-actions{ margin-top:18px; text-align:right; }
.posalji-dugme{ padding:10px 18px; background:var(--tamno-plava); color:#fff; border:0; border-radius:2px; font-weight:700; cursor:pointer; }
.posalji-dugme:hover{ opacity:0.95; }
.sr-only{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

@media (max-width:900px){
  .kontakt-desno textarea{ min-height:260px; }
}
@media (max-width:800px){
  .mreza-kontakta{
    grid-template-columns:1fr;
    grid-template-areas:
      "fullName"
      "email"
      "message"
      "info";
  }
  .mreza-kontakta textarea{ min-height:200px; }
  .contact-actions{ text-align:left; }
  .kontakt h2{ font-size:2.5rem; word-wrap: break-word; word-break: break-word; }
}

@media (max-width:425px){
  .kontakt h2{ font-size:2rem; word-wrap: break-word; word-break: break-word; }
}

@media (max-width:350px){
  .kontakt h2{ font-size:1.5rem; word-wrap: break-word; word-break: break-word; }
} 

/* Footer */
.dno{ background:#eef6fb; padding:56px 0; border-top:2px solid var(--accent); text-align:center; position:relative; overflow:hidden; min-height:400px; }
.dno-unutrasnjost{ display:flex; flex-direction:column; align-items:center; gap:22px; position:relative; z-index:10; }
.navigacija-dna ul{ display:flex; gap:28px; list-style:none; margin:0; padding:0;}
.navigacija-dna a{ color:var(--tamno-plava); text-decoration:none; font-weight:600; }
  .logo-dna-wrap{ position:absolute; bottom:0; left:0; width:100%; height:100%; display:flex; justify-content:center; align-items:flex-end; pointer-events:none; }
  /* make the footer logo opaque and fill available width */
  .logo-dna{ width:100%; max-width:none; opacity:1; display:block; height:auto;
    /* invert the white SVG artwork so it shows on the pale footer */
    filter: invert(1) brightness(0.8);
  }
  /* hide the copyright text if present */
  .tekst-dna{ display:none; }
.tekst-dna{ color:#6b7686; font-size:0.9rem; }

@media (max-width:900px){
  .logo-dna{ width:550px; }
  .navigacija-dna ul{ gap:18px; flex-wrap:wrap; }
}

@media (max-width:520px){
  .logo-dna{ width:400px; }
  .navigacija-dna ul{ gap:12px; font-size:0.95rem; }
  .dno{ min-height:320px; }
}

@media (max-width:350px){
  .logo-dna{ width:300px; }
  .dno{ min-height:280px; }

}
.navigacija-dna{
display:flex;
gap:80px;
justify-content: start;
text-align: left;
}

.footer-kolona{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-direction:column;
gap:12px;
}

.navigacija-dna a{
color:var(--tamno-plava);
text-decoration:none;
font-weight:600;
}
.logo-dna-wrap{
position:absolute;
bottom:0;
left:0;
width:100%;
display:flex;
justify-content:center;
align-items:flex-end;
pointer-events:none;
}

.logo-dna{
width:1200px
}
.dno{
  background:#eef6fb;
  padding:56px 0;
  border-top:2px solid var(--accent);
  text-align:center;
  position:relative;
  overflow:hidden;
  min-height:420px;
}
.logo-dna-wrap{
  position:absolute;
  left:50%;
  bottom:-120px;
  transform:translateX(-50%);
  width:1400px;
  pointer-events:none;
}
.logo-dna{
  width:100%;
  height:auto;
}
.dno-unutrasnjost{
  position:relative;
  z-index:2;
}