:root{
  --ss-navy-1: #071a33;
  --ss-navy-2: #0a2a4d;
  --ss-navy-3: #0d3768;

  --ss-hero-1: #0b2a52;
  --ss-hero-2: #0d3a6b;
  --ss-hero-3: #10518f;

  --ss-text: #31466b;
  --ss-muted: rgba(49,70,107, .64);
  --ss-line: rgba(49,70,107, .10);

  --ss-radius: 14px;
  --ss-section-title: var(--ss-text);
  --ss-bkg-1:
  radial-gradient(
    at 64.82219896956758% 30.056915762217105%,
    hsla(275.1428571428571, 38.04347826086957%, 36.07843137254902%, .8) 0%,
    hsla(275.1428571428571, 38.04347826086957%, 36.07843137254902%, 0) 100%
  ),
  radial-gradient(
    at 48.231492253821294% 13.850819426753592%,
    rgba(28, 145, 171, .8) 0%,
    hsla(190.9090909090909, 71.85929648241208%, 39.01960784313725%, 0) 100%
  ),
  radial-gradient(
    at 74.53771934189463% 90.37405572180829%,
    hsla(172.12121212121212, 60.7361963190184%, 31.960784313725487%, .8) 0%,
    hsla(172.12121212121212, 60.7361963190184%, 31.960784313725487%, 0) 100%
  ),
  radial-gradient(
    at 67.27333039105466% 73.15999202682102%,
    hsla(275.1428571428571, 38.04347826086957%, 36.07843137254902%, .8) 0%,
    hsla(275.1428571428571, 38.04347826086957%, 36.07843137254902%, 0) 100%
  ),
  radial-gradient(
    at 42.78247222097907% 52.46858475624651%,
    hsla(190.9090909090909, 71.85929648241208%, 39.01960784313725%, .8) 0%,
    hsla(190.9090909090909, 71.85929648241208%, 39.01960784313725%, 0) 100%
  ),
  radial-gradient(
    at 86.86736533219505% 92.4183242862222%,
    hsla(172.12121212121212, 60.7361963190184%, 31.960784313725487%, .8) 0%,
    hsla(172.12121212121212, 60.7361963190184%, 31.960784313725487%, 0) 100%
  ),
  radial-gradient(
    at 15.781753024202494% 62.74580863633531%,
    hsla(275.1428571428571, 38.04347826086957%, 36.07843137254902%, .8) 0%,
    hsla(275.1428571428571, 38.04347826086957%, 36.07843137254902%, 0) 100%
  ),
  radial-gradient(
    at 12.788485063716504% 38.671968441381836%,
    hsla(190.9090909090909, 71.85929648241208%, 39.01960784313725%, .8) 0%,
    hsla(190.9090909090909, 71.85929648241208%, 39.01960784313725%, 0) 100%
  ),
  radial-gradient(
    at 5.5335404402057975% 26.066688851611286%,
    hsla(172.12121212121212, 60.7361963190184%, 31.960784313725487%, .8) 0%,
    hsla(172.12121212121212, 60.7361963190184%, 31.960784313725487%, 0) 100%
  ),
  radial-gradient(
    at 14.209398732324651% 65.0962648574146%,
    hsla(275.1428571428571, 38.04347826086957%, 36.07843137254902%, .8) 0%,
    hsla(275.1428571428571, 38.04347826086957%, 36.07843137254902%, 0) 100%
  );

}

/* ===== Base ===== */
html, body{
  font-family: Comfortaa, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ss-text);
  background: #ffffff;
}
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{
  font-family: Comfortaa, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial !important;
}

/* ukloni “zvjezdice” iz freelancer teme */
hr.star-light, hr.star-dark{
  border: none !important;
  height: 0 !important;
  margin: 0 !important;
}

/* ===== NAV ===== */
#mainNav.navbar{
  padding-top: 12px;
  padding-bottom: 12px;
  background: var(--ss-bkg-1) !important;
  font-family: Comfortaa, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 10px 26px rgba(49,70,107, .16);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

#mainNav .navbar-brand{
  font-weight: 800;
  letter-spacing: .02em;
  font-size: 16px;
  color: rgba(255,255,255,.95) !important;
}

#mainNav .nav-link{
  font-family: Comfortaa, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial !important;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.86) !important;

}
#mainNav .navbar-nav li.nav-item a.nav-link:hover{
  color: rgba(255,255,255,.98) !important;
}

/* active – bez teal iz freelancera */
#mainNav .navbar-nav > li.nav-item > a.nav-link.active{
  color: rgba(255,255,255,.98) !important;
  background: rgba(255,255,255,.10) !important;
  border-radius: 10px;
}
@media (min-width: 992px){
  #mainNav .navbar-nav>li.nav-item>a.nav-link.active{
    background: rgba(255,255,255,.10) !important;
  }
}

/* dropdown */
#mainNav .dropdown-menu{
  background: rgba(255,255,255,.98);
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(49,70,107, .10);
  box-shadow: 0 18px 40px rgba(49,70,107, .18);
}
#mainNav .dropdown-menu a{
  display:block;
  padding: 8px 10px;
  border-radius: 10px;
  color: rgba(49,70,107,.82) !important;
  font-size: 13px;
  letter-spacing: 0;
  text-decoration: none !important;
}
#mainNav .dropdown-menu a:hover{
  background: rgba(49,70,107,.05);
  color: rgba(49,70,107,.92) !important;
}
#mainNav .dropdown-menu a:active{
  background: rgba(49,70,107,.08);
}

.comfortaa{
  font-family: Comfortaa, sans-serif !important;
  font-style: normal;
}

/* ===== HERO (bez overlay-a) ===== */
header.masthead{
  padding-top: 110px;
  padding-bottom: 0px;
  /*background: radial-gradient(at 57.31804257753964% 31.519360308610047%, hsla(343.03664921465963, 95.97989949748745%, 60.98039215686274%, 1) 0%, hsla(343.03664921465963, 95.97989949748745%, 60.98039215686274%, 0) 100%), radial-gradient(at 49.238206514911006% 85.49822995465853%, hsla(307.8260869565217, 98.77300613496934%, 31.960784313725487%, 1) 0%, hsla(307.8260869565217, 98.77300613496934%, 31.960784313725487%, 0) 100%), radial-gradient(at 59.19710620500965% 43.43236666992737%, hsla(343.03664921465963, 95.97989949748745%, 60.98039215686274%, 1) 0%, hsla(343.03664921465963, 95.97989949748745%, 60.98039215686274%, 0) 100%), radial-gradient(at 50.36200170392364% 37.26430567756252%, hsla(307.8260869565217, 98.77300613496934%, 31.960784313725487%, 1) 0%, hsla(307.8260869565217, 98.77300613496934%, 31.960784313725487%, 0) 100%) !important;*/
  background: white !important;
}
header.masthead::before{ display:none !important; }

header.masthead h1{
  font-size: 44px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: .02em;
  margin-bottom: 10px;
  text-shadow: 0 10px 24px rgba(0,0,0,.18);
  color:var(--ss-text) !important;
}
header.masthead h2{
  font-size: 16px;
  font-weight: 600;
  color:var(--ss-text) !important;
}
@media (max-width: 575px){
  header.masthead{ padding-top: 100px; padding-bottom: 44px; }
  header.masthead h1{ font-size: 34px; }
  header.masthead h2{ font-size: 14px; }
}

/* ===== PAGE ===== */
.portfolio{
  padding-top: 28px;
  padding-bottom: 20px;
  background: #ffffff;
}
.ss-page{
  padding-top: 6px;
  padding-bottom: 6px;
}

/* ===== SKOLE – isti “panel” kao grafici ===== */
#ustanove{
  background: transparent !important;
  padding: 0px 0 !important; /* manje margine gore/dolje */
}

/* full-width kao chart paneli (Bootstrap container već ima istu širinu) */
#ustanove .ss-skole-panel{
  width: 100%;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: var(--ss-radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(49,70,107, .06);
  display: flex;
  flex-direction: column;
}

#ustanove .ss-skole-head{
  padding: 16px 16px 10px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, .06);

  background: var(--ss-bkg-1);
  color: rgba(255,255,255,.96);
}

#ustanove .ss-skole-head h3{
  margin: 0;
  font-weight: 900;
  letter-spacing: -.02em;
  font-size: 18px;
  text-transform: uppercase;
}

#ustanove .ss-skole-body{
  padding: 20px;
}

/* zbijenije nego ranije */
#ustanove .row{ margin-top: 10px; }
#ustanove .row:first-child{ margin-top: 6px; }

#ustanove .lead{
  font-size: 14px;
  line-height: 1.6;
  color: var(--ss-text) !important;
  margin-bottom: 0;
}

/* inputs + dugme */
#ustanove label{
  color: var(--ss-text);
  font-size: 12px;
  letter-spacing: .02em;
}
#ustanove .form-control{
  background: #fff;
  border: 1px solid rgba(49,70,107,.14);
  border-radius: 12px;
  height: 38px;
  font-size: 13px;
}
#ustanove .form-control:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(89,194,255,.18);
  border-color: rgba(89,194,255,.55);
}

#goSchool.btn{
  height: 38px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 12px;
  border: 0;
  color: rgba(255,255,255,.95);
  background: var(--ss-bkg-1);
  box-shadow: 0 10px 22px rgba(49,70,107,.14);
  transition: transform .12s ease, filter .12s ease;
}
#goSchool.btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
#goSchool.btn:active{ transform: translateY(0); }
#goSchool.btn:focus{ outline:none; box-shadow: 0 0 0 4px rgba(89,194,255,.22); }

/* ===== BANERI ===== */
#baneri{
  background:#fff;
  padding: 28px 0;
}
#baneri img{
  max-width: 100%;
  height: auto;
  filter: saturate(0.95);
}

/* ===== FOOTER ===== */
footer.footer{
  /*background: radial-gradient(at 57.31804257753964% 31.519360308610047%, hsla(343.03664921465963, 95.97989949748745%, 60.98039215686274%, 1) 0%, hsla(343.03664921465963, 95.97989949748745%, 60.98039215686274%, 0) 100%), radial-gradient(at 49.238206514911006% 85.49822995465853%, hsla(307.8260869565217, 98.77300613496934%, 31.960784313725487%, 1) 0%, hsla(307.8260869565217, 98.77300613496934%, 31.960784313725487%, 0) 100%), radial-gradient(at 59.19710620500965% 43.43236666992737%, hsla(343.03664921465963, 95.97989949748745%, 60.98039215686274%, 1) 0%, hsla(343.03664921465963, 95.97989949748745%, 60.98039215686274%, 0) 100%), radial-gradient(at 50.36200170392364% 37.26430567756252%, hsla(307.8260869565217, 98.77300613496934%, 31.960784313725487%, 1) 0%, hsla(307.8260869565217, 98.77300613496934%, 31.960784313725487%, 0) 100%) !important;*/
  background: white !important;
  padding-top: 40px;
  padding-bottom: 40px;
}
footer.footer .lead,
footer.footer p{
  font-size: 13px;
  line-height: 1.55;
  color:var(--ss-text) !important;
}
footer.footer h4{
  font-size: 13px;
  letter-spacing: .10em;
  color:var(--ss-text) !important;
}

/* copyright ostaje navy */
.copyright{
  background: var(--ss-bkg-1);
  padding-top: 10px !important;
  padding-bottom: 18px !important;
}
.copyright small{
  color: rgba(255,255,255,.90);
  font-size: 12px;
}
.navbar-toggler-btn{background: rgba(255, 255, 255, .10) !important;}
.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group>.btn:last-child:not(:first-child):not(.dropdown-toggle) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.btn-group-sm>.btn, .btn-sm{
  padding: .25rem .25rem !important;
}

.btn-group>.btn, .btn-sm{
  padding: .25rem .25rem !important;
}

.scroll-to-top a {
  width: 3.5rem;
  height: 3.5rem;
  background: rgba(65, 196, 224, 0.6);
  background: linear-gradient(0deg,rgba(65, 196, 224, 0.6) 0%, rgba(245, 50, 218, 0.6) 100%) !important;
  line-height: 3.1rem;
}

/* Footer separator – varijacija ss-subline */
.ss-footer-sep{
  width: 100%;
  height: 1px;
  margin: 0 0 0;
  background: linear-gradient(
    90deg,
    rgba(49,70,107,.02),
    rgba(49,70,107,.12),
    rgba(49,70,107,.02)
  );
}

/* Brand logo u navbar-u */
#mainNav .navbar-brand.ss-brand{
  display:flex;
  align-items:center;
  line-height:1;
}

/* ===== Export dugmici (Excel/PNG/CSV) – u ss-text stilu ===== */
/* ===== Export dugmići – čisti, flat, ss-text ===== */
.ss-btns .btn.btn-outline-secondary{
  background: transparent !important;
  color: var(--ss-text) !important;
  border: 1px solid rgba(49,70,107,.35) !important;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 10px;
  padding: .28rem .45rem !important;
  line-height: 1.1;
  box-shadow: none !important;
  transition: background .12s ease, border-color .12s ease;
}

/* hover – samo blagi naglasak */
.ss-btns .btn.btn-outline-secondary:hover{
  background: rgba(49,70,107,.06) !important;
  border-color: rgba(49,70,107,.55) !important;
}

/* active – jedva primjetno */
.ss-btns .btn.btn-outline-secondary:active{
  background: rgba(49,70,107,.10) !important;
  border-color: rgba(49,70,107,.65) !important;
}

/* focus – čisto, bez halo efekta */
.ss-btns .btn.btn-outline-secondary:focus,
.ss-btns .btn.btn-outline-secondary:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* btn-group ostaje neutralan */
.ss-btns .btn-group{
  background: transparent;
  border: 0;
}