#sp-header-topbar .container-inner > .row {
  min-height: 120px;
}

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
  font-size: 1.125rem; /* 18px */
}

.sp-megamenu-parent > li > a {
  color: #5d5d5d;
}

.sp-megamenu-parent > li.active > a {
  font-weight: bold;
}

.sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li.active:hover > a {
  color: #024996;
}

p.provjera {
  margin-bottom: 0;
  text-align: center;
  background: #212e41;
  width: 170px;
  margin: auto;
  padding: 6px;
  border-radius: 30px;
  font-size: 0.875rem; /* 14px */
}

.provjera a {
  color:#fff !important; 
}

#sp-header-topbar a:hover {
  color: #04cfe8;
}

#sp-social {
  display: flex;
  justify-content: center;
}

.point-novosti .sppb-img-responsive {
  object-fit: cover;
  border-radius: 30px;
}

/* Wrapper = dimenzije + radius */
.point-novosti .sppb-article-img-wrap {
  position: relative;
  display: block;
  width: 400px;
  height: 400px;
  border-radius: 30px;
  overflow: hidden; /* potrebno zbog radiusa */
}

/* Slika popunjava wrapper */
.point-novosti .sppb-article-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 30px;
}

/* Fade sjena */
.point-novosti .sppb-article-img-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  border-radius: 30px;
  background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.84) 100% );
  pointer-events: none;
  z-index: 2;
}

.point-novosti .sppb-article-info-wrap {
  position: absolute;
  bottom: 20px;
  max-width: 400px;
  padding: 15px;
  z-index: 99;
  display: flex;
}

.point-novosti .sppb-article-info-wrap h3 {
  font-size: 1.1875rem; /* 19px */
  width: 85%;
  border-right: 2px solid white;
  padding-right: 10px;
}

.point-novosti .sppb-article-info-wrap h3 a {
  color: #fff !important;
} 

.point-novosti .sppb-meta-category {
  position: absolute;
  left: 0;
  margin-top: -5px !important;
  padding-left: 10px;
  top: 0;
}

.point-novosti .sppb-article-meta {
  margin: -5px -5px 5px;
  display: flex;
  align-items: center;
  text-align: center;
}

.point-novosti .sppb-meta-date {
  color: #fff !important;
  font-weight: bold;
} 

.point-novosti .sppb-meta-category a {
  color: #06CFE9 !important;
}

.form-control {
  border-radius: 30px;
}

.point-uvod { 
  background: #f9f9f9;
  padding: 40px;
  border-radius: 30px;
  font-size: 0.875rem; /* 14px */
}

.point-botuni_pocetna,
.point-grbovi {
  display: flex;
  justify-content: flex-start;
}

.point-grbovi img {
  width: 60px;
}

.point-grbovi p {
  padding-right: 80px
}

.point-botuni_pocetna p{
  border: 2px solid black;
  border-radius: 30px;
  padding: 10px;
  margin-right: 30px;
}

.point-botuni_pocetna {
  padding-top: 80px
}

.uvod-glavni .sppb-addon-title{
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
  margin-bottom: 22px;
}

.uvod-glavni .sppb-addon-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width: 140px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #1c394f, #dbe7f5);
  opacity: .25; /* ključ: da bude jedva */
}

/* desni uvodni blok */
.uvod-glavni .point-uvod {
  position: relative;
  background: #304256;
  border-radius: 28px;
  padding: 36px 40px 36px 52px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
  color: #fff;
}

/* vertikalna linija (optička “žila”) */
.uvod-glavni .point-uvod::before{
  content:"";
  position:absolute;
  top: 20px;
  bottom: 20px;
  left: 26px;
  width: 1.5px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    rgba(33,46,65,0.12),
    rgba(33,46,65,0.22),
    rgba(33,46,65,0.12)
  );
}

/* čvorići (konektori) */
.uvod-glavni .point-uvod::after{
  content:"";
  position:absolute;
  left: 22px;
  top: 64px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(33,46,65,0.35);

  /* dodatni čvorići niz liniju */
  box-shadow:
    0 140px 0 rgba(33,46,65,0.30),
    0 280px 0 rgba(33,46,65,0.25);
}

/* tekst iznad svega */
.uvod-glavni .point-uvod .sppb-addon-content{
  position: relative;
  z-index: 1;
}

.pozadinska img{
  position: relative;
  bottom: 0;
  right: -30px;
  top: -30px;
  filter: brightness(1.2) contrast(0.75) saturate(0.8);
  opacity: 0.8;
}

.point-novosti .sppb-addon-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 140px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #1c394f, #dbe7f5);
  opacity: .25;
  top: 40px;
} 

.article-details .article-ratings-social-share,
.article-details .article-info {
  display: none !important;
}

#sp-bottom {
  background: transparent;
}

#sp-footer {
  background: #002c41;
  color: #fff;
}

/* =========================
   LOGOI – responsive, clean, balanced
   HTML: <div class="point-logoi"><p>...<img>...</p>...</div>
   ========================= */

.point-logoi{
  /* grid je stabilniji od flexa za puno različitih logotipa */
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;

  width: min(1100px, 92%);
  margin: 0 auto;

  align-items: center;
}

/* makni default <p> margine da ne “šeta” visina */
.point-logoi p{
  margin: 0;
}

/* svaki logo u svom “slotu” centriran */
.point-logoi a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;

  /* malo prostora da sve izgleda pro */
  padding: 10px 8px;
  border-radius: 14px;

  /* diskretno, da ne izgleda kao gumbi, ali da ima ritam */
  background: rgba(33,46,65,0.03);
  border: 1px solid rgba(33,46,65,0.08);

  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.point-logoi a:hover{
  transform: translateY(-2px);
  background: rgba(33,46,65,0.06);
  border-color: rgba(2,73,150,0.18);
}

/* slike: nikad ne pucaju layout, zadrži proporcije */
.point-logoi img{
  display: block;
  max-width: 100%;
  height: 64px;         /* desktop default */
  width: auto;
  object-fit: contain;
}

/* posebna korekcija ako SAFU ima niži logo */
.point-logoi .safu img{
  height: 56px;
}

/* =========================
   RESPONSIVE BREAKPOINTS
   ========================= */

/* laptop / manji desktop */
@media (max-width: 1200px){
  .point-logoi{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }
  .point-logoi img{ height: 60px; }
  .point-logoi .safu img{ height: 54px; }
}

/* tablet */
@media (max-width: 991.98px){
  .point-logoi{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    width: min(900px, 92%);
  }
  .point-logoi a{
    padding: 10px 10px;
    border-radius: 12px;
  }
  .point-logoi img{ height: 56px; }
  .point-logoi .safu img{ height: 50px; }
}

/* mobitel */
@media (max-width: 575.98px){
  .point-logoi{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 94%;
  }
  .point-logoi a{
    padding: 10px 8px;
    border-radius: 12px;
  }
  .point-logoi img{ height: 52px; }
  .point-logoi .safu img{ height: 46px; }
}

/* baš mali mobiteli */
@media (max-width: 360px){
  .point-logoi{
    grid-template-columns: 1fr;
  }
  .point-logoi img{
    height: 54px;
  }
}


.point-novosti1 .sppb-addon-article-layout {
  box-shadow: 0 -5px 21px rgba(51,51,96,0.15);
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
}

.point-novosti1 .sppb-article-info-wrap h3 a {
  color: #5d5d5d !important;
}

.point-novosti1 .sppb-article-info-wrap h3  {
  font-size: 1.3125rem; /* 21px */
}

.point-novosti1 .sppb-article-info-wrap {
  display: flex;
  flex-direction: column;
}

.point-novosti1 .sppb-article-meta .sppb-meta-date{
  order: 1;
  border-right: 2px solid #ebebeb;
  padding-right: 10px;
}

.point-novosti1 .sppb-article-info-wrap h3 {
  order: 2;
}

.point-novosti1 .sppb-article-introtext {
  order: 3;
  font-size: 0.875rem; /* 14px */
}

.point-novosti1 .sppb-btn.btn-sm.sppb-btn-default {
  background: #002c41;
  border-radius: 30px;
  margin-top: 30px;
  color: white !important;
}

.point-novosti1 .sppb-addon-article-layout-content {
  border-radius: 8px;
}

.point-novosti1 .sppb-article-meta .sppb-meta-category a {
  color: #03c4e9 !important;
}

.pagenavigation {
  display: none;
}

#sp-main-body {
  padding: 50px 0;
}

.mod-breadcrumbs a {
  color: #024996;
}

.breadcrumb {
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  border-radius: 30px;
  font-size: 0.875rem; /* 14px */
}

.sp-megamenu-parent > li:hover > a {
  color: #024996;
}

/* baza */
a[href$=".pdf"], a[href$=".doc"], a[href$=".docx"], a[href$=".xls"], a[href$=".xlsx"], a[href$=".ppt"], a[href$=".pptx"], a[href$=".zip"]{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* osnovno – ikona bez utjecaja na boju linka */
a[href$=".pdf"]::before,
a[href$=".doc"]::before,
a[href$=".docx"]::before,
a[href$=".xls"]::before,
a[href$=".xlsx"]::before,
a[href$=".ppt"]::before,
a[href$=".pptx"]::before,
a[href$=".zip"]::before{
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 0px;
  display: inline-block;
}

/* PDF – crvena */
a[href$=".pdf"]::before{
  content: "\f1c1";
  color: #e63946;
}

/* Word – plava */
a[href$=".doc"]::before,
a[href$=".docx"]::before{
  content: "\f1c2";
  color: #2b579a;
}

/* Excel – zelena */
a[href$=".xls"]::before,
a[href$=".xlsx"]::before{
  content: "\f1c3";
  color: #217346;
}

/* PowerPoint – narančasta */
a[href$=".ppt"]::before,
a[href$=".pptx"]::before{
  content: "\f1c4";
  color: #d24726;
}

/* ZIP – siva */
a[href$=".zip"]::before{
  content: "\f1c6";
  color: #6c757d;
}

a {
  color: #024996;
}

.article-details.novosti {
  max-width: 800px;
  margin: auto;
}

.novosti .article-header {
  margin-bottom: 40px;
  margin-top: 40px;
}

.novosti .article-header h1 {
  font-size: 2.125rem; /* 34px */
}

h2 {
    font-size: 2rem;
    color: #5d5d5d;
  }

#sp-footer ul.menu {
  display: flex;
  list-style: none;
  padding: 0;
    padding-right: 0px;
  margin: 0 -10px;
  flex-direction: column;
  text-align: right;
  font-size: 1.1rem;
  border-right: 1px solid white;
  padding-right: 20px;
}

#sp-footer ul.menu a {
	
	color: #fff;
	font-weight: bold;
}

#sp-footer ul.menu li a:hover {
  background: none;
  color: #8a8a8a;
}

#sp-footer ul.menu li:first-of-type {
	
	display: none;
}

#sp-footer ul.menu li {

  margin-bottom: 6px;
}

#sp-bottom {
  padding: 0px 0 0px;

}

.article-details {
  position: relative;
  max-width: 80%;
  margin: auto;
}

.article-details .article-header h1 {
	
	text-align: center;
	color: #5d5d5d;
}


.prikljucak h2{
	
	text-align: center;
}

@media (min-width:992px) and (max-width:1200px) {
	
	.logo-image {
  height: 60px !important;
}
.sp-megamenu-parent > li > a {
	
	font-size: 0.9rem;
}
}
.offcanvas-menu .offcanvas-inner ul.menu > li > a {
	
	opacity: 1;
}

.offcanvas-active .burger-icon > span {
	
	background: #fff;
}

#mod-custom119 p {
	
	margin-bottom:0px;
}


@media (max-width: 992px){

  :root{
    /* BOJA SCENE */
    --oc-bg: #0e1a29;

    /* ŠIRINA MENIJA */
    --oc-menu-w: clamp(175px, 60vw, 320px);

    /* RAZMACI */
    --oc-gap-h: 18px;     /* lijevo */
    --oc-gap-v: 100px;    /* GORE + DOLJE (KAKO SI TRAŽIO) */

    /* KARTICA */
    --oc-scale: 0.92;
    --oc-push: 40vw;
    --oc-radius: 28px;
  }

  /* ===== SCENA ===== */
  body.offcanvas-active{
    background: var(--oc-bg) !important;
    overflow: hidden !important;
  }

  /* ===== OFFCANVAS MENU (DESNO) ===== */
  body.offcanvas-active .offcanvas-menu{
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: var(--oc-menu-w) !important;

    background: transparent !important;
    padding: 22px 5px !important;
    overflow: auto !important;

    z-index: 9500 !important;

    display: flex !important;
    align-items: center !important; /* vertikalno centriranje */
  }

  body.offcanvas-active .offcanvas-menu .offcanvas-inner{
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    width: 100%;
    min-height: 100%;

    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
  }

  body.offcanvas-active .offcanvas-menu a{
    color: #fff !important;
  }

  /* SMANJEN FONT MENIJA */
  body.offcanvas-active .offcanvas-menu .mod-menu > li > a{
    font-size: 16px !important;
    line-height: 1.25 !important;
    padding: 10px 0 !important;
  }

  body.offcanvas-active .offcanvas-menu ul.mod-menu{
    margin: 0 !important;
    padding: 0 !important;
  }

  body.offcanvas-active .offcanvas-menu .mod-menu > li{
    margin: 6px 0 !important;
  }

  /* ===== KARTICA STRANICE ===== */
  body.offcanvas-active .body-innerwrapper{
    position: fixed !important;

    /* PROSTOR GORE / DOLJE */
    top: var(--oc-gap-v) !important;
    bottom: var(--oc-gap-v) !important;

    /* LIJEVI RUB */
    left: var(--oc-gap-h) !important;

    /* OSTAVI MJESTO ZA MENI */
    right: calc(var(--oc-menu-w) * 0.35) !important;

    margin: 0 !important;

    /* EFEKT GURANJA */
    transform: translate3d(calc(-1 * var(--oc-push)), 0, 0) scale(var(--oc-scale)) !important;
    transform-origin: left center !important;

    background: #fff !important;
    border-radius: var(--oc-radius) !important;
    box-shadow: 0 30px 90px rgba(0,0,0,.55) !important;
    overflow: hidden !important;

    z-index: 9999 !important;

    transition: transform .42s cubic-bezier(.2,.9,.2,1),
                border-radius .42s cubic-bezier(.2,.9,.2,1),
                box-shadow .42s cubic-bezier(.2,.9,.2,1) !important;
  }

  /* ===== "DRUGA KARTICA" IZA ===== */
body.offcanvas-active .body-innerwrapper::before{
  content: "";
  position: absolute;

  /* malo veća od glavne stranice */
  inset: -10px;

  border-radius: calc(var(--oc-radius) + 6px);

  /* BIJELA “druga stranica” */
  background: rgba(255,255,255,0.85);

  /* Nije shadow nego dubina */
  box-shadow:
    0 12px 30px rgba(0,0,0,0.18),
    0 2px 8px rgba(0,0,0,0.12);

  /* lagani offset – kao da viri iza */
  transform: translate3d(22px, 18px, 0);

  /* BLAGI blur samo tog sloja */
  filter: blur(3px);

  z-index: -1;
  pointer-events: none;
}


  /* ===== MAKNI HELIX OVERLAY ===== */
  body.offcanvas-active .offcanvas-overlay,
  body.offcanvas-active .offcanvas-overlay.active{
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* ===== OFFCANVAS HEADER: SAKRI, ALI OSTAVI X ===== */
  body.offcanvas-active .offcanvas-menu > .d-flex{
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
  }

  body.offcanvas-active .offcanvas-menu > .d-flex .close-offcanvas{
    display: block !important;
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 12000 !important;
    width: 44px;
    height: 44px;
  }

  body.offcanvas-active .offcanvas-menu > .d-flex .close-offcanvas .burger-icon{
    transform: none !important;
  }
}

@media (max-width: 992px){

  /* "DRUGA STRANICA" – paper stack efekt */
  body.offcanvas-active .body-wrapper::before{
    content: "";
    position: fixed;

    /* malo manja po visini */
   top: calc(var(--oc-gap-v) + 26px) !important;
bottom: calc(var(--oc-gap-v) + 26px) !important;

    /* ista lijeva linija */
    left: var(--oc-gap-h) !important;

    /* ista desna linija kao kartica */
    right: calc(var(--oc-menu-w) * 0.35) !important;

    /* SAMO DESNO – nema Y pomaka */
    transform:
      translate3d(calc(-1 * var(--oc-push) + 22px), 0, 0)
      scale(var(--oc-scale)) !important;

    transform-origin: left center !important;

    border-radius: calc(var(--oc-radius) + 6px) !important;

    /* bijela pozadina druge stranice */
    background: rgba(255,255,255,0.88) !important;

    /* suptilna dubina – nije klasičan shadow */
    box-shadow:
      0 10px 26px rgba(0,0,0,0.16),
      0 2px 6px rgba(0,0,0,0.10) !important;

    /* MANJI BLUR */
    filter: blur(1.5px) !important;

    z-index: 9998 !important;
    pointer-events: none !important;
  }

  /* sigurnosno – ništa unutar kartice */
  body.offcanvas-active .body-innerwrapper::before{
    content: none !important;
  }
}

@media (max-width: 992px){

  /* offcanvas-inner neka bude referenca (nije nužno za fixed, ali ok) */
  body.offcanvas-active .offcanvas-menu .offcanvas-inner{
    position: relative !important;
  }

  /* LOGO modul (zadnji sp-module) -> fiksno gore, centrirano po ekranu */
  body.offcanvas-active .offcanvas-menu .offcanvas-inner > .sp-module:last-child{
    position: fixed !important;
    top: 18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 12050 !important; /* iznad svega */
    width: auto;
    text-align: center;
    pointer-events: none; /* da ne “krade” klikove */
  }

  /* logo slika – responsivna */
  body.offcanvas-active .offcanvas-menu .offcanvas-inner > .sp-module:last-child img{
    display: block;
    width: 150px; /* uvijek stane */
    height: auto;
    margin: 0 auto;
  }


}


@media (max-width: 992px){

  body.offcanvas-active .offcanvas-menu .mod-menu > li > a{
    position: relative;
    padding-left: 36px !important;
    display: inline-flex;
    align-items: center;
  }

  body.offcanvas-active .offcanvas-menu .mod-menu > li > a::before{
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 18px;
    background-color: #ffffff; /* boja ikone */
    opacity: .9;

    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-size: contain;
            mask-repeat: no-repeat;
            mask-position: center;

    transition: transform .2s ease, opacity .2s ease;
  }

  body.offcanvas-active .offcanvas-menu .mod-menu > li > a:hover::before{
    opacity: 1;
    transform: translateX(3px);
  }

  body.offcanvas-active .mod-menu > li.active > a::before{
    opacity: 1;
    transform: translateX(4px);
  }
}
@media (max-width: 992px){

  /* Početna */
  body.offcanvas-active .mod-menu .item-101 > a::before{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3z'/%3E%3C/svg%3E");
  }

body.offcanvas-active .mod-menu .item-103 > a::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 3a2 2 0 100 4 2 2 0 000-4zm14 0a2 2 0 100 4 2 2 0 000-4zM5 17a2 2 0 100 4 2 2 0 000-4zm14 0a2 2 0 100 4 2 2 0 000-4zM7 5h10v2H7zm0 12h10v2H7zM5 7v10h2V7zm12 0v10h2V7z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 3a2 2 0 100 4 2 2 0 000-4zm14 0a2 2 0 100 4 2 2 0 000-4zM5 17a2 2 0 100 4 2 2 0 000-4zm14 0a2 2 0 100 4 2 2 0 000-4zM7 5h10v2H7zm0 12h10v2H7zM5 7v10h2V7zm12 0v10h2V7z'/%3E%3C/svg%3E");
}


  /* Najčešća pitanja */
  body.offcanvas-active .mod-menu .item-104 > a::before{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 18h2v2h-2zm1-16C6.9 2 4 4.9 4 8h2c0-2.2 1.8-4 4-4s4 1.8 4 4c0 4-4 3.5-4 7h2c0-2.5 4-3 4-7 0-3.1-2.9-6-6-6z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 18h2v2h-2zm1-16C6.9 2 4 4.9 4 8h2c0-2.2 1.8-4 4-4s4 1.8 4 4c0 4-4 3.5-4 7h2c0-2.5 4-3 4-7 0-3.1-2.9-6-6-6z'/%3E%3C/svg%3E");
  }

  /* Provjera dostupnosti */
  body.offcanvas-active .mod-menu .item-105 > a::before{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2l-3.5-3.5L4 14.2 9 19l12-12-1.5-1.5z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2l-3.5-3.5L4 14.2 9 19l12-12-1.5-1.5z'/%3E%3C/svg%3E");
  }

  /* Zatraži priključak */
  body.offcanvas-active .mod-menu .item-115 > a::before{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19 11H13V5h-2v6H5v2h6v6h2v-6h6z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19 11H13V5h-2v6H5v2h6v6h2v-6h6z'/%3E%3C/svg%3E");
  }

  /* Dokumenti */
  body.offcanvas-active .mod-menu .item-106 > a::before{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h9l5 5v15a2 2 0 01-2 2H6a2 2 0 01-2-2V4a2 2 0 012-2zm8 1.5V8h4.5z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h9l5 5v15a2 2 0 01-2 2H6a2 2 0 01-2-2V4a2 2 0 012-2zm8 1.5V8h4.5z'/%3E%3C/svg%3E");
  }
}

@media (max-width: 992px){

  :root{ --oc-anim: 420ms; }

  /* Uvijek pripremljen transition (bitno je da uključimo i inset) */
  .body-innerwrapper{
    transition:
      transform var(--oc-anim) cubic-bezier(.2,.9,.2,1),
      border-radius var(--oc-anim) cubic-bezier(.2,.9,.2,1),
      box-shadow var(--oc-anim) cubic-bezier(.2,.9,.2,1),
      top var(--oc-anim) cubic-bezier(.2,.9,.2,1),
      right var(--oc-anim) cubic-bezier(.2,.9,.2,1),
      bottom var(--oc-anim) cubic-bezier(.2,.9,.2,1),
      left var(--oc-anim) cubic-bezier(.2,.9,.2,1) !important;
    will-change: transform, top, right, bottom, left;
  }

  /* Offcanvas da ne fleša bijelo */
  .offcanvas-menu,
  .offcanvas-menu .offcanvas-inner{
    background: transparent !important;
  }

  /* ===== CLOSE: 2-phase ===== */
  body.oc-closing{
    background: var(--oc-bg) !important;
    overflow: hidden !important;
  }

  /* FAZA 1: "zamrzni" točno otvoreno stanje (da start bude identičan open-u) */
  body.oc-closing.oc-close-start .body-innerwrapper{
    position: fixed !important;
    top: var(--oc-gap-v) !important;
    bottom: var(--oc-gap-v) !important;
    left: var(--oc-gap-h) !important;
    right: calc(var(--oc-menu-w) * 0.35) !important;

    transform: translate3d(calc(-1 * var(--oc-push)), 0, 0) scale(var(--oc-scale)) !important;
    transform-origin: left center !important;

    border-radius: var(--oc-radius) !important;
    box-shadow: 0 30px 90px rgba(0,0,0,.55) !important;
    background: #fff !important;
    overflow: hidden !important;
    z-index: 9999 !important;
  }

  /* FAZA 2: animiraj u full screen (nema skoka jer smo i dalje fixed) */
  body.oc-closing.oc-close-end .body-innerwrapper{
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    transform: translate3d(0,0,0) scale(1) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Paper/dupla stranica neka se ugasi tokom zatvaranja */
  body.oc-closing .body-wrapper::before{
    opacity: 0 !important;
    transition: opacity 180ms ease !important;
  }

  /* Meni neka se ugasi smooth */
  body.oc-closing .offcanvas-menu{
    opacity: 0 !important;
    transition: opacity 220ms ease !important;
  }
}

@media (max-width: 992px){
	
	#sp-header.lg-header .sp-column {
		
		justify-content: center !important;
	}
	
	#sp-header-topbar .container-inner > .row {
		
		min-height: unset;
	}

  /* Dok se zatvara i vraća na full screen – wrapper mora ODMAH biti bijel */
  body.oc-closing.oc-close-end .body-innerwrapper{
    background: #fff !important;
  }

  /* Sigurnosno: i tijekom cijelog closing-a neka ostane bijel (sprječava flash na vrhu) */
  body.oc-closing .body-innerwrapper{
    background: #fff !important;
  }

  /* Još jedan safety: vanjski wrapper neka ne bude transparentan kad closing krene */
  body.oc-closing .body-wrapper{
    background: #fff !important;
  }
}

/* =========================
   TOPBAR: mobile layout (button | divider | EU logo)
   ========================= */

/* EU blok ti je skriven preko d-none d-lg-flex -> vrati ga svugdje */
#sp-header-topbar .header-modules.d-none.d-lg-flex{
  display: flex !important;
}

/* Osnovno poravnanje */
#sp-header-topbar .container-inner > .row{
  align-items: center;
}

/* Uredi EU logo da bude responzivan */
#sp-header-topbar .header-modules img{
  height: auto;
  max-width: 200px;
  width: 100%;
}

/* MOBITEL/TABLET: botun + EU logo u istom redu */
@media (max-width: 991.98px){

  /* Makni višak praznog prostora i “nabacani” look */
  #sp-header-topbar{
    padding: 0;
  }

  /* Lijevi i desni stupac neka ostanu pola-pola */
  #sp-header-topbar #sp-contact,
  #sp-header-topbar #sp-social{
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Lijevo: botun centriran u svoj dio */
  #sp-header-topbar #sp-contact{
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Desno: EU logo centriran u svoj dio */
  #sp-header-topbar #sp-social .sp-column{
    width: 100%;
    justify-content: center !important;
    align-items: center;
    position: relative;
  }

  /* Sakrij social-wrap ako je prazan */
  #sp-header-topbar .social-wrap{
    display: none !important;
  }

  /* Header-modules (EU logo) neka bude u sredini desnog dijela */
  #sp-header-topbar .header-modules{
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 0;
  }

  /* FINA CRTA između lijevog i desnog dijela */
  #sp-header-topbar #sp-social .sp-column::before{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 34px;
    background: rgba(33, 46, 65, 0.18); /* #212e41 ali diskretno */
  }

  /* Botun: malo “premium” i kompaktno */
  #sp-header-topbar p.provjera{
    margin: 0;
    width: auto;              /* makni fiksnih 170px ako imaš */
    padding: 0;               /* kontroliramo link */
    background: transparent;  /* kontroliramo link */
  }

  #sp-header-topbar p.provjera a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 999px;
    background: #212e41;
    color: #fff !important;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
  }

  /* EU logo: neka ne bude prevelik, ali da bude čitljiv */
  #sp-header-topbar .header-modules img{
    max-width: 185px;
  }
}

/* EXTRA: baš mali mobiteli (npr. 360px) – malo stisni */
@media (max-width: 380px){
  #sp-header-topbar p.provjera a{
    padding: 9px 12px;
    font-size: 13px;
  }
  #sp-header-topbar .header-modules img{
    max-width: 160px;
  }
  #sp-header-topbar #sp-social .sp-column::before{
    height: 30px;
  }
}

@media (max-width: 576px) {
  .logo-image {
    height: 60px !important;
  }
  
    #sp-header {
    height: 65px;
    margin-bottom: 10px;
    box-shadow: unset !important;
  }
}

/* =========================
   CLEAN + MODERN BURGER (stable, no absolute)
   HTML: <div class="burger-icon"><span></span><span></span><span></span></div>
   ========================= */

/* reset + button look */
.burger-icon{
  width: 46px;
  height: 46px;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  padding: 0 !important;
  position: relative !important;

  border-radius: 14px;
  background: rgba(33,46,65,.06);
  border: 1px solid rgba(33,46,65,.14);
  backdrop-filter: blur(6px);

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

/* hard reset za spanove (ovo ti popravlja “pobjegle” crtice) */
.burger-icon > span{
  display: block !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;

  width: 22px !important;
  height: 2px !important;
  border-radius: 999px !important;

  background: #212e41 !important;
  opacity: 1 !important;

  transform: none !important;
  transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .18s ease, width .18s ease, box-shadow .18s ease;
}

/* malo “tech” karaktera: gornja i donja kraća */
.burger-icon > span:nth-child(1){ width: 18px !important; }
.burger-icon > span:nth-child(3){ width: 14px !important; }

/* hover */
.burger-icon:hover{
  background: rgba(33,46,65,.10);
  border-color: rgba(2,73,150,.30);
  transform: translateY(-1px);
}
.burger-icon:hover > span{
  box-shadow: 0 0 10px rgba(2,73,150,.20);
}
.burger-icon:hover > span:nth-child(1),
.burger-icon:hover > span:nth-child(3){
  width: 22px !important;
}

/* active tap */
.burger-icon:active{
  transform: translateY(0) scale(.98);
}

/* OPEN state -> X (dodaj .is-open na burger-icon kad je meni otvoren) */
.burger-icon.is-open{
  background: rgba(33,46,65,.12);
  border-color: rgba(2,73,150,.35);
}
.burger-icon.is-open > span:nth-child(1){
  width: 22px !important;
  transform: translateY(8px) rotate(45deg) !important;
}
.burger-icon.is-open > span:nth-child(2){
  opacity: 0 !important;
}
.burger-icon.is-open > span:nth-child(3){
  width: 22px !important;
  transform: translateY(-8px) rotate(-45deg) !important;
}

/* =========================
   OFFCANVAS OPEN -> X STATE
   body.offcanvas-active.full-offcanvas
   ========================= */

body.offcanvas-active.full-offcanvas .burger-icon{
  background: rgba(33,46,65,.12);
  border-color: rgba(2,73,150,.35);
}

body.offcanvas-active.full-offcanvas .burger-icon > span:nth-child(1){
  width: 22px !important;
  transform: translateY(8px) rotate(45deg) !important;
}

body.offcanvas-active.full-offcanvas .burger-icon > span:nth-child(2){
  opacity: 0 !important;
}

body.offcanvas-active.full-offcanvas .burger-icon > span:nth-child(3){
  width: 22px !important;
  transform: translateY(-8px) rotate(-45deg) !important;
}
/* =========================
   OFFCANVAS OPEN -> WHITE X
   ========================= */

body.offcanvas-active.full-offcanvas .burger-icon > span{
  background: #ffffff !important;
  box-shadow: 0 0 10px rgba(255,255,255,.25);
}


/* =========================
   POINT FOOTER – RESET pristup
   (desktop NE diramo layout)
   ========================= */

/* osnovno (ne diramo širine ni grid) */
.point-footer{
  padding: 56px 0 48px;
  color: #fff;
}

/* malo zraka između kolona na desktopu (bez mijenjanja širina) */
@media (min-width: 992px){

  /* samo padding u kolonama da ne budu “zbijene” */
  .point-footer .sppb-row-column{
    padding-left: 28px;
    padding-right: 28px;
  }

  /* vertikalne crte između 3 bloka (vizualno ljepo) */
  .point-footer .sppb-row-column{
    position: relative;
  }



  /* kontakti lijevo */
  .point-footer #column-wrap-id-cec32fcd-cafd-4973-aec7-cd4af63a76e2{
    text-align: left;
  }

  /* EU logo centar */
  .point-footer #column-wrap-id-eb01e253-d05b-4ebd-a144-4ca1f802d9c3{
    text-align: center;
  }

  /* menu desno (desktop) */
  .point-footer #column-wrap-id-91536d48-5435-4527-96f6-e94ee1cef941{
    text-align: right;
  }

  /* menu lista neka izgleda uredno (bez desnog “rasipanja”) */
  .point-footer .footer-menu ul.menu{
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .point-footer .footer-menu ul.menu li{
    margin: 0 0 8px;
  }
}

/* EU logo da se ne “izgubi” */
.point-footer .sppb-addon-single-image img{
  max-width: 320px;
  width: 100%;
  height: auto;
}

/* =========================
   TABLET + MOB: sve centriraj i složi menu u grid
   ========================= */
@media (max-width: 991.98px){

  .point-footer{
    text-align: center;
    padding: 42px 0 36px;
  }

  /* makni crte na manjim ekranima */
  .point-footer .sppb-row-column::after{
    display: none !important;
  }

  /* makni bočne paddings da ne izgleda stisnuto */
  .point-footer .sppb-row-column{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* menu centriraš (ovo ti rješava problem “ostao desno”) */
  .point-footer #column-wrap-id-91536d48-5435-4527-96f6-e94ee1cef941{
    text-align: center !important;
  }

  .point-footer .footer-menu{
    display: flex;
    justify-content: center;
  }

  .point-footer .footer-menu ul.menu{
    list-style: none;
    margin: 0;
    padding: 0;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;

    width: min(420px, 100%);
    justify-items: center;
  }

  .point-footer .footer-menu ul.menu li{
    margin: 0;
  }
}

@media (max-width: 360px){
  .point-footer .footer-menu ul.menu{
    grid-template-columns: 1fr;
  }
  .point-footer-info {
	  
	  padding-bottom: 50px;
  }
}

/* =========================
   Mobile scroll box for long text
   ========================= */
@media (max-width: 991.98px){

  .point-readmore{
    position: relative;
  }

  /* sklopljeno: box određene visine, scroll unutra */
  .point-readmore .sppb-addon-content{
    max-height: 220px;          /* visina u sklopljenom stanju */
    overflow: auto;
    -webkit-overflow-scrolling: touch; /* iOS “momentum” */
    padding-right: 10px;        /* malo mjesta da scrollbar ne reže tekst */
    scrollbar-width: thin;      /* Firefox */
    scroll-behavior: smooth;
    transition: max-height .25s ease;
  }

  /* otvoreno: samo povećaj box (i dalje skrol u njemu) */
  .point-readmore.is-open .sppb-addon-content{
    max-height: 520px;          /* visina u otvorenom stanju */
  }



  /* gumb */
  .point-readmore .rm-toggle{
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(33,46,65,.22);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
  }
}