:root{--bg:#f3f4f6;--ink:#0e2236;--ink-2:#3a556f;--paper:#ffffff;--accent:#0a7bdc;--accent-2:#084e8a;--footer:#c1121f}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{margin:0;min-height:100%;display:flex;flex-direction:column;font-size:18px;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:#f7fafc}
.site-main{flex:1 0 auto}
.container{max-width:1100px;margin-inline:auto;padding:0 16px}

/* Header + Nav */
.site-header {
  position: sticky;
  top: 0;
  background: #c1121f;  /* crveni navbar */
  border-bottom: none;
  z-index: 1000;
  padding: 4px 0;
}
.nav-wrap{display:flex;align-items:center;gap:16px;padding:0;height: 52px;}
.logo img{display:block}
.nav-toggle{display:none; color: #c1121f;}
.menu{list-style:none;margin:0;padding:0;display:flex;gap:32px;align-items:center}
.menu > li{position:relative}
.menu a {
  display: inline-block;
  padding: 10px 0;
  text-decoration: none;
  color: #fff;          
}

.site-header,
.site-header .menu a,
.site-header .dropdown a,
.site-header .nav-toggle {
  font-weight: 700;
  font-size: 18px;
}

.menu a:hover {
  color: #ffd9d9;      
}
.with-caret::after{content:"▾";display:inline-block;margin-left:6px;font-size:.8em}
.has-dropdown { position: relative; }

.has-dropdown .dropdown {
  position: absolute;
  left: 0;
  top: 100%;       
  min-width: 240px;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  background: #c1121f;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 1001;

  /* sakrij po defaultu bez skakanja */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .15s, transform .15s, visibility .15s;
}

.has-dropdown:hover .dropdown,
.has-dropdown .dropdown:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.has-dropdown .dropdown li a {
  display: block;
  padding: 10px 14px;
  color: #fff;
  text-decoration: none;
}

.has-dropdown .dropdown li a:hover {
  background: #a50e1a;
}
/*.has-dropdown .dropdown{position:absolute;left:0;top:calc(100% + 10px);background:var(--paper);border:1px solid #eef2f7;border-radius:12px;min-width:240px;list-style:none;margin:0;padding:8px 0;display:none;box-shadow:0 8px 24px rgba(0,0,0,.08)} */
.has-dropdown .dropdown li a{display:block;padding:10px 14px}
.has-dropdown .dropdown li a:hover {
  background: #a50e1a;
}

@media (min-width:761px){.has-dropdown:hover .dropdown{display:block}}
.menu.open{display:flex}

/* Hero */
.hero{background:linear-gradient(180deg,#e6f2ff,transparent);padding:80px 0 60px}
.hero .lead{font-size:1.125rem;color:var(--ink-2)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;border:1px solid var(--accent);text-decoration:none}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-2)}

.article-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Sections */
.section{padding:64px 0}
.section h2{margin-top:0}
.grid.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

/* kartica */
.grid.services .card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  overflow: hidden;  
}

.grid.services .card .article-image {
  margin: -16px -16px 16px;  
}

.grid.services .card .article-image img {
  width: 100%;
  height: 220px;          
  object-fit: cover;
  display: block;
}

/* tekst unutar kartice */
.grid.services .card h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 700;
}

.grid.services .card ul,
.grid.services .card p {
  margin: 0 0 8px;
}

/* gumb dolje poravnan */
.grid.services .card p:last-child {
  margin-top: auto;
  padding-top: 12px;
}


/* ===== Osnova ===== */
*{box-sizing:border-box}
:root{--ink:#111827;--border:#e5e7eb;--bg:#f6f8fb}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.45}
.container{max-width:1200px;margin:0 auto;padding:24px}

/* ===== Kontakt HERO ===== */
.section{padding:48px 0}
.contact-hero{background:var(--section-bg);padding:48px 0;color:#111827}
.contact-hero .contact-hero-wrap{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:32px;
  align-items:start;
}

/* Kartica forme */
.contact-card{
  background:#fff;
  color:var(--ink);
  border:1px solid var(--border);
  border-radius:12px;
  padding:20px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.contact-card h2{margin:0 0 12px}

/* Polja */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid label{display:flex;flex-direction:column;gap:6px;font-weight:600}
.form-grid label.full{grid-column:1/-1}
.contact-card input,
.contact-card select,
.contact-card textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  font:inherit;
  color:var(--ink);
  background:#fff;
}
.contact-card textarea{resize:vertical;min-height:140px}

/* red s checkboxom */
.agree-row{
  display:flex;
  align-items:center;   /* vertikalno poravnanje */
  gap:10px;
  margin:12px 0;
  flex-wrap:nowrap;
}
.agree-row input{width:16px;height:16px;margin:0}
.agree-row label{margin:0;font-weight:500;line-height:1.2}

/* Gumb */
.btn.primary{
  display:inline-block;border:0;border-radius:10px;padding:10px 16px;
  background:#0a7bdc;color:#fff;font-weight:600;cursor:pointer
}
.btn.primary:disabled{opacity:.6;cursor:not-allowed}

.btn.red {
  display: inline-block;
  background: #c1121f;
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.2s;
}

.btn.red:hover {
  background: #a50e1a;
}

/* Desni info panel – jednaka boja fonta */
.contact-info-panel h2,
.contact-info-panel h3,
.contact-info-panel p,
.contact-info-panel li{color:var(--ink)}
.contact-info-panel h2{font-size:2rem;margin:0 0 12px}
.contact-info-panel h2 span{color:inherit} 
.contact-info-panel .info-block{margin:18px 0}
.contact-info-panel .info-block h3{margin:0 0 6px}
.contact-info-panel ul{margin:0;padding-left:18px}

.location-card.combined{
  display:grid;
  grid-template-columns: 1.2fr 1fr;  
  gap:24px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:20px;
  box-shadow:0 8px 24px rgba(0,0,0,.07);
  color:var(--ink);
}

/* Lijevo: karta ispuni visinu kućice */
.map-embed{
  display:flex;
  min-height:380px;             
}
.map-embed iframe{
  flex:1;
  display:block;
  width:100%;
  height:100%;
  border:0;
  border-radius:8px;
}

/* Desno: sadržaj bez dodatnih obruba */
.location-content h2{margin:0 0 10px}
.location-content h2 span{color:inherit}
.location-content h3{margin:16px 0 6px}
.worktime{margin:0;padding-left:18px}

/* Responsive */
@media (max-width:960px){
  .location-card.combined{
    grid-template-columns:1fr;   
  }
  .map-embed{min-height:260px}
}

/* Back to top */
#backToTop{position:fixed;right:16px;bottom:16px;padding:10px 14px;border-radius:50%;border:0;background:#000;color:#fff;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;box-shadow:0 4px 16px rgb(0 0 0 /.2)}
#backToTop.show{opacity:1;pointer-events:auto}
#backToTop:hover{transform:translateY(-2px)}

/* Responsive */
@media (max-width:1100px){
  .contact-hero .contact-hero-wrap{grid-template-columns:1fr}
  .location-grid{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .menu{display:none;flex-direction:column;align-items:flex-start;background:#c1121f;position:absolute;right:16px;top:64px;border:1px solid #e5e7eb;border-radius:12px;padding:8px;width:min(92vw,320px)}
  .nav-toggle{display:inline-block;border:1px solid #e5e7eb;border-radius:10px;background:#fff;padding:8px 10px}
  .nav-wrap{justify-content:space-between}
  .nav .menu.open{display:flex}
}

/* GUMBI svi*/
.btn,
.btn.primary,
.btn.red {
  display: inline-block;
  background: #c1121f;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.2s;
}

.btn:hover,
.btn.primary:hover,
.btn.red:hover {
  background: #a50e1a;
}

/* Kartica za sve kategorije usluga */
.service-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  padding:20px;
}

.service-card h2{ margin:0 0 12px; }
.service-card h3{ margin:16px 0 8px; }
.service-card ul{ margin:0; padding-left:18px; }

/* razmak između sekcija */
.section{ padding:12px 0; }  /* već imaš; ostavi ili postavi na 48 */

/* Footer */
.footer-main.red {
  background: #c1121f;
  color: #fff;
  padding: 20px 0 10px; 
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;   
  gap: 24px;
}

.footer-col {
  flex: 1;
}

.footer-col-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-logo {
  width: 300px;
  height: auto;
  display: block;
}

.footer-main h3,
.footer-main h4,
.footer-main li {
  color: #fff;
  margin: 0 0 6px;
}

.footer-main ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-main a {
  color: #fff;
  text-decoration: none;
}

.footer-main a:hover {
  text-decoration: underline;
}

.footer-col-links {
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: flex-end;
}

.footer-col-links h4 {
  margin-bottom: 6px;
}

.footer-col-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer .footer-bottom.red {
  background: #c1121f;
  color: #fff;
  padding: 4px 16px;
}

.footer-bottom p {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}

.footer-bottom .container {
  display: flex;
  justify-content: space-between;
  align-items: center; 
  padding: 4px 16px;
}

.footer-bottom .pelion {
  display: flex;
  align-items: right;
  justify-content: flex-end;
}

.footer-bottom .pelion img {
  width: 28px;
  height: auto;
  display: block;
  opacity: .95;
}

@media (max-width: 768px) {
  .footer-grid {
    flex-direction: column;     
    align-items: flex-start;
    gap: 16px;
  }

  .footer-col,
  .footer-col-logo,
  .footer-col-links {
    width: 100%;
  }

  .footer-col-logo {
    justify-content: flex-start; 
  }

  .footer-col-links {
    text-align: left;
    align-items: flex-start;
  }
}


.hero {
  position: relative;
  width: 100%;
  height: 70vh;              
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
}

.hero-bg img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          
  z-index: 0;
}

.hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45); 
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: left;
  max-width: 800px;
}

.hero-content h1 {
  font-size: 1.8rem;
  margin-bottom: 16px;
  line-height: 1.3;
}

.hero-content p {
  font-size: 1.1rem;
  margin-bottom: 24px;
}

/* Galerija unutar .service-card */
.usluge.img {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  overflow-x: auto;     
  padding-bottom: 8px;
}

.usluge.img img {
  flex: 0 0 260px;      
  height: 180px;       
  object-fit: cover;  
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.usluge.img img:hover {
  transform: scale(1.03);
}

/* Lightbox overlay */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: none;                 /* skriven po defaultu */
  align-items: center;
  justify-content: center;
  z-index: 3000;
}

/* Kad je aktivan */
.lightbox.open {
  display: flex;
}

/* Slika u lightboxu */
.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 8px;
}

/* Close gumb */
.lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 32px;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
}

/* Prev/next strelice */
.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 32px;
  background: rgba(0,0,0,0.4);
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
}

.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.nav-image img {
  display: block;
  height: 62px;
  width: auto;
  object-fit: contain;
}

/* opcionalno: na manjim ekranima sakrij desnu sliku */
@media (max-width: 760px) {
  .nav-image {
    display: none;
  }
}