@charset "UTF-8";

/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/


/* ========================================== 
Prisilno gašenje automatskog invertiranja boja (tzv DARK MODE) na Android uređajima.
========================================== */
:root {
    color-scheme: light !important;
}

/* ========================================== 
Dodatna sigurnost: ako treba prisiljavanje bijele pozadine i/ili sivog fonta za tijelo stranice 
========================================== */
/* ========================================== 
body {
    background-color: #ffffff !important;
    color: #333333 !important;
}
========================================== */

h1, h2, h3, h4, h5, h6 {
    color: #333 !important; /* Sve naslove prebacuje u mekšu nijansu */
}


/* ========================================== 
Rješavanje vodoravnog skrolanja (Overflow-x) i popravak za Safari 
========================================== */
html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important; /* Zamjenjuje novi overflow-x: clip */
    position: relative !important; /* Prisiljava Safari da poštuje širinu ekrana */
}

/* ========================================== 
3. Osiguravanje ispravnog prikaza sekcija kao blok elemenata 
========================================== */
section {
    display: block !important;
}

/* ========================================== 
4. Sprječavanje pomicanja (skakanja) stranice ustranu kod otvaranja modala
========================================== */
body {
    padding-right: 0 !important;
    margin-right: 0 !important;
}




/* ============================================================================================================ */




/*  LOGO by tip */
/* ----------------------------------------------------------------
LOGO
-----------------------------------------------------------------*/

@media (min-width: 992px) { 
   .navbar{
      margin-top:0;
      top:45px;
	  margin-bottom:0px;
    }
}


/* ----------------------------------------------------------------------
	tip Imported Hovereffect
-------------------------------------------------------------------------*/

.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.6);
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: translate(460px, -100px) rotate(180deg);
  -ms-transform: translate(460px, -100px) rotate(180deg);
  transform: translate(460px, -100px) rotate(180deg);
  -webkit-transition: all 0.2s 0.4s ease-in-out;
  transition: all 0.2s 0.4s ease-in-out;
}

.hovereffect img {
  display: block;
  position: relative;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.hovereffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.6);
}

.hovereffect a.info {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid #fff;
  margin: 50px 0 0 0;
  background-color: transparent;
  -webkit-transform: translateY(-200px);
  -ms-transform: translateY(-200px);
  transform: translateY(-200px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.hovereffect a.info:hover {
  box-shadow: 0 0 5px #fff;
}

.hovereffect:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
}

.hovereffect:hover h2 {
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

.hovereffect:hover a.info {
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

/* ----------------------------------------------------------------------
	tip Added
-------------------------------------------------------------------------*/

.circle-btn {
  /* 1. Set button dimensions */
  width: 40px; /* Adjust as needed */
  height: 40px; /* Adjust as needed */

  /* 2. Create the circular shape */
  border-radius: 50%;

  /* 3. Center the image inside */
  display: inline-flex;
  justify-content: center;
  align-items: center;

  /* 4. Optional: Remove default button styles (orginialy = none)*/
  border: none;
  background-color: #414042; /* Example background */
  cursor: pointer;

  /* Optional: For the image inside */
  overflow: hidden; /* Ensures the image fits the circle */
}

.circle-btn img {
  /* Adjust image size to fit the button */
  width: 100%; /* Adjust as needed */
  height: 100%; /* Adjust as needed */
  object-fit: cover; /* Ensures the image covers the area without distortion */
}


/* ----------------------------------------------------------------------
POČETNE POSTAVKE ZA GLATKI PRIJELAZ 
-------------------------------------------------------------------------*/
.carousel-desktop, .carousel-mobile {
    transition: opacity 0.3s ease-in-out; /* Dodaje glatki prijelaz od 0.3 sekunde */
}

/* ----------------------------------------------------------------------
POSTAVKE ZA KARUSEL "IZ SADRŽAJA"
Na računalima i vodoravnom tabletu: 
desktop je vidljiv, mobilni je potpuno ugašen i skriven 
-------------------------------------------------------------------------*/
.carousel-desktop {
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
}
.carousel-mobile {
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* --- KADA SE EKRAN OKRENE OKOMITO (Ispod 991px) --- */
@media (max-width: 991px) {
    /* Sakrij verziju s 3 stupca (desktop) na čist i nevidljiv način */
    .carousel-desktop {
        opacity: 0 !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    /* Prikaži verziju s 2 stupca (mobile) glatko */
    .carousel-mobile {
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
    }
}


/* ----------------------------------------------------------------------
POSTAVKE ZA KARUSEL "ARHIVA" (4 -> 3 -> 2 -> 1)
-------------------------------------------------------------------------*/

.carousel-4-desktop, .carousel-2-mobile {
    transition: opacity 0.3s ease-in-out;
}

/* Stanje za velika računala (Desktop) */
.carousel-4-desktop {
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
}
.carousel-2-mobile {
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* 📐 KADA SE EKRAN SMANJI ISPOD 991px (Uključuje i okomiti tablet) */
@media (max-width: 991px) {
    /* Ugasi verziju s više slika */
    .carousel-4-desktop {
        opacity: 0 !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    /* Upali verziju koja na tabletu vrti 2, a na mobitelu 1 sliku */
    .carousel-2-mobile {
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
    }
}



/* ==================== ZA POSEBNU BOJU OKVIRA U FOOTERU ==================== */

@media (min-width: 992px) {
    .prilagodi-podlogu {
		height: max-content !important; 
        padding-bottom: 0px !important; /* Minimalni, elegantni razmak na dnu unutar okvira */
        
    }
}

.prilagodi-boju {
    background-color: #f1f1f3 !important; /* Primjer za prekrasnu, blagu bež boju #f4ece1 */
        
    }



/* ==================== KONTROLA LOGOTIPA U HEADU ZA SVE UREĐAJE ==================== */

/* 📱 Pravilo za MOBITELE i TABLETE (Ekran manji od 992px) */
.pomaknuti-logo {
    width: 240px !important;      /* Idealna širina za manje ekrane */
    max-width: 100% !important;   /* Sprječava iskakanje udesno pri sužavanju */
    height: auto !important;      /* Čuva proporcije slike */
    margin-top: -20px !important;   /* Ako -30px (zasad ćemo tako ostaviti) ne bi bilo dobro u tom slučaju ćemo umjesto -30px staviti 0 jer tako na mobitelu gasimo pomak prema gore kako logo ne bi pobjegao s ekrana */
    
    /* 🌟 Centriranje za mobitele i tablete */
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 🖥️ Pravilo SAMO ZA DESKTOP RAČUNALA (Ekran širi od 992px) */
@media (min-width: 992px) {
    .pomaknuti-logo {
        width: 350px !important;     /* Širina za veliki ekran */
        max-width: 100% !important;  /* Drži ga pod kontrolom i pri sužavanju desktop prozora */
        margin-top: -30px !important; /* Povlačimo logo prema gore za točno 30 piksela u prostor headera */
        
        /* 🌟 Centriranje za desktop računala */
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}



/* ==================== Stilovi za Read More efekt ==================== */

.sakriveni-tekst {
    display: none; /* Tekst je sakriven na početku */
}
.gumb-procitaj-vise {
    margin-top: 10px !important;
}




/* ==================== 
Primjenjuje se na iPhone vodoravno i iPad mini okomito (od 576px do 768px), a ne na iPad Air (okomito) 
jer ima logičku širinu od 820px... A iPhone vodoravno (cca 576px - 670px), iPad mini okomito (744px) 
==================== */

@media (min-width: 576px) and (max-width: 768px) {
    .container {
        max-width: 100% !important; /* Rasteže kontejner na manjim tabletima i mobitelima */
        padding-left: 35px !important;
        padding-right: 35px !important;
    }
    
    /* VARIJANTA 1: Blagi odmak (10px) */
    .mobile-odmak-txt-10 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
       /* VARIJANTA 2: Blagi odmak (20px) */
    .mobile-odmak-txt-20 {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
	/* VARIJANTA 3: Srednji odmak (30px) */
    .mobile-odmak-txt-30 {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
    
    /* VARIJANTA 4: Jači odmak (50px) */
    .mobile-odmak-txt-50 {
        padding-left: 50px !important;
        padding-right: 50px !important;
    }
}

/* ====================================================================== */
/* ========== Stil za Facebook placeholder (Responzivna verzija) ========== */
/* ====================================================================== */
.fb-placeholder-container {
    width: 100%;                  /* Rasteže se točno unutar col- stupca */
    max-width: 269px;             /* Poklapa se s maksimalnom širinom FB plugina */
    min-height: 424px;            /* Čuva visinu originalnog widgeta */
    background-color: #f1f1f3;
    border: 1px solid #dddfe2;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	padding: 0px;              /* Prilagođeno 24px našem Bootstrap ritmu */
    box-sizing: border-box;
    font-family: Helvetica, Arial, sans-serif;
    color: #1c1e21;
    text-align: center;
    margin: 0 auto;               /* Centrirano ako je kontejner širi */
}

/* Ikona ili početno slovo 'f' za vizualni dojam */
.fb-placeholder-container::before {
    content: "f";
    font-size: 50px;
    font-weight: bold;
    color: #007FCC; /* plava */
    margin-bottom: 15px;
}

.fb-placeholder-text {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 20px;
}

/* ====================================================================== */
/* ======== ISSUU (platform1 & social) gumb s obojanim logotipom ======== */
/* ====================================================================== */

/* 1. Glavni gumb (Krug) - prikazuje OBOJANU sliku */
.logo-button-platform1 {
    display: inline-block !important;       /* Ovo osigurava da se krug vidi na ekranu */
	width: 40px !important;                 /* Zaključavamo gumb na širinu kruga */
    height: 40px !important;                /* Zaključavamo gumb na visinu kruga */
    position: relative !important;          /* Ključno za pozicioniranje crne slike unutra */
    background-image: url('../img/issuu-logo-colour-100px.png') !important; /* Početna slika */
    background-size: contain !important;    /* Smanjuje logotip od 100px na točnih 40px */
    background-repeat: no-repeat !important;
    background-position: center !important; /* Centrirano u krugu */
    background-color: transparent !important; 
}

/* 2. Nevidljivi sloj iznad gumba - drži CRNU sliku spremnu u memoriji */
.logo-button-platform1::after {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('../img/issuu-logo-black-100px.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    opacity: 0 !important;                    /* Početno je crni logotip potpuno nevidljiv */
    transition: opacity 0.3s ease-in-out !important; /* Elegantno pretapanje prozirnosti */
}

/* 3. HOVER STANJE: Samo pretapamo prozirnost crne slike na 100% */
.logo-button-platform1:hover::after {
    opacity: 1 !important;                    /* Crna slika glatko sjeda preko obojane */
}

/* ====================================================================== */
/* ====== FlipHTML5 (platform2 & social) gumb s obojanim logotipom ====== */
/* ====================================================================== */

/* 1. Glavni gumb (Krug) - prikazuje OBOJANU sliku */
.logo-button-platform2 {
	display: inline-block !important;       /* Ovo osigurava da se krug vidi na ekranu */
    width: 40px !important;                 /* Zaključavamo gumb na širinu kruga */
    height: 40px !important;                /* Zaključavamo gumb na visinu kruga */
    position: relative !important;          /* Ključno za pozicioniranje crne slike unutra */
    background-image: url('../img/FlipHTML5-logo-colour-100px.png') !important; /* Početna slika */
    background-size: contain !important;    /* Smanjuje logotip od 100px na točnih 40px */
    background-repeat: no-repeat !important;
    background-position: center !important; /* Centrirano u krugu */
    background-color: transparent !important; 
}

/* 2. Nevidljivi sloj iznad gumba - drži CRNU sliku spremnu u memoriji */
.logo-button-platform2::after {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('../img/FlipHTML5-logo-black-100px.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    opacity: 0 !important;                    /* Početno je crni logotip potpuno nevidljiv */
    transition: opacity 0.3s ease-in-out !important; /* Elegantno pretapanje prozirnosti */
}

/* 3. HOVER STANJE: Samo pretapamo prozirnost crne slike na 100% */
.logo-button-platform2:hover::after {
    opacity: 1 !important;                    /* Crna slika glatko sjeda preko obojane */
}

/* ===================================================================== */
/* ============ Facebook (social) gumb s obojanim logotipom ============ */
/* ===================================================================== */

/* 1. Glavni gumb (Krug) - prikazuje OBOJANU sliku */
.logo-button-facebook {
	display: inline-block !important;       /* Ovo osigurava da se krug vidi na ekranu */
    width: 40px !important;                 /* Zaključavamo gumb na širinu kruga */
    height: 40px !important;                /* Zaključavamo gumb na visinu kruga */
    position: relative !important;          /* Ključno za pozicioniranje crne slike unutra */
    background-image: url('../img/Facebook-logo-colour-100px.png') !important; /* Početna slika */
    background-size: contain !important;    /* Smanjuje logotip od 100px na točnih 40px */
    background-repeat: no-repeat !important;
    background-position: center !important; /* Centrirano u krugu */
    background-color: transparent !important; 
}

/* 2. Nevidljivi sloj iznad gumba - drži CRNU sliku spremnu u memoriji */
.logo-button-facebook::after {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('../img/Facebook-logo-black-100px.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    opacity: 0 !important;                    /* Početno je crni logotip potpuno nevidljiv */
    transition: opacity 0.3s ease-in-out !important; /* Elegantno pretapanje prozirnosti */
}

/* 3. HOVER STANJE: Samo pretapamo prozirnost crne slike na 100% */
.logo-button-facebook:hover::after {
    opacity: 1 !important;                    /* Crna slika glatko sjeda preko obojane */
}

/* ===================================================================== */

/* Pravilo koje se aktivira samo na ekranima užim od 768px (mobiteli) */


/* @media (max-width: 767.98px) {  */
/*     .post-item-description,  */
/*     .post-item-description p {  */
/*         font-size: 16px !important; /* ili stavite 1.05rem / 1.1rem ovisno o želji */
/*         line-height: 1.6 !important; /* dodaje razmak između linija za lakše čitanje */
/*     }  */
/* }  */

@media (max-width: 767.98px) {
    .post-item-description p {
        font-size: 15px !important; /* Veličina za čitanje na mobitelima */
    }
}

/* ===================================================================== */
/* =========== custom-horizontal-btn (nije u upotrebi, zasad =========== */
/* ===================================================================== */

/* ==========================================
   1. DIZAJN ZA MOBITELE (Standardno stanje)
   ========================================== */

/* Glavni vodoravni gumb na mobitelu */
.custom-horizontal-btn {
    display: inline-block !important;       /* Daje praznom linku fizički oblik */
    width: 160px !important;                /* Širina prilagođena mobitelu */
    height: 35px !important;                /* 📱 Visina na mobitelu: 35px */
    position: relative !important;          /* Ključno za pozicioniranje sloja iznad */
    background-image: url('../img/gumb-pocetni.png') !important; /* Prva slika gumba */
    background-size: contain !important;    /* Automatski prilagođava sliku unutar zadanih dimenzija */
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: transparent !important; 
    border: none !important;     			/* Uklanja Bootstrap obrube ako smetaju */
    border-radius: 0px !important;          /* Malo manje zaobljenje za niži gumb */
    overflow: hidden !important;           /* Sprječava da slika "pobjegne" izvan zaobljenih rubova */
}

/* Nevidljivi sloj iznad na mobitelu */
.custom-horizontal-btn::after {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('../img/gumb-hover.png') !important; 
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    opacity: 0 !important;                  /* Početno je druga slika potpuno nevidljiva */
    transition: opacity 0.3s ease-in-out !important; /* Elegantno pretapanje od 0.3 sekunde */
    border-radius: 0px !important;         /* Ovaj broj MORA biti isti kao i gore (npr. 6px) */
}


/* ==========================================
   2. DIZAJN ZA DESKTOP (Ekrani širi od 992px)
   ========================================== */
@media (min-width: 992px) {
    .custom-horizontal-btn {
        width: 180px !important;            /* Veća širina za desktop */
        height: 40px !important;            /* 💻 Visina na desktopu: 40px */
        border-radius: 0px !important;      /* Nešto veće zaobljenje za viši gumb (npr. 8px) */
    }
    
    .custom-horizontal-btn::after {
        border-radius: 0px !important;      /* Prilagođavamo i hover sloj */
    }
}

/* ==========================================
   3. HOVER STANJE (Vrijedi za sve), glatko pretapamo prozirnost druge slike na 100%
   ========================================== */
.custom-horizontal-btn:hover::after {
    opacity: 1 !important;                  
}



/* ===================================================================== */
/* 1. POČETNO STANJE: Bijela podloga, crni tekst i crna ikona */
/* ===================================================================== */
/* ==========================================
   1. DIZAJN ZA MOBITELE (Standardno stanje)
   ========================================== */
.tip-text-btn {
    display: inline-flex !important;		/* Ovo drži tekst savršeno u sredini na mobitelu */
    align-items: center !important;           /* Centriranje po vertikali (od vrha do dna) */
    justify-content: center !important;       /* Centriranje po horizontali (lijevo-desno) */
    
    height: 35px !important;                  /* 📱 Visina gumba na mobitelu */
    padding: 0 15px !important;               /* Gornji/donji razmak je 0, lijevo/desno je 15px */
    font-size: 13px !important;               /* Malo manji font da lakše stane na mobitel */
    
    /* Izgled gumba (Bijela podloga, crna slova) */
    background-color: #ffffff !important;     /* ⚪ Bijela pozadina gumba */
    color: #000000 !important;                /* ⚫ Crni tekst (i crna ikona unutra) */
    border: 0px solid #000000 !important;     /* Crni obrub da se gumb vidi na bijeloj stranici */
    border-radius: 6px !important;            /* Blago zaobljenje rubova */
    text-decoration: none !important;         /* Uklanja podcrtavanje linka */
    font-weight: bold !important;
    
    /* Blokade za iPhone i glatki prijelaz */
    -webkit-user-select: none !important;  
    user-select: none !important;          
    -webkit-touch-callout: default !important; 
    transition: background-color 0.3s ease, color 0.3s ease !important; /* Glatki prijelaz boja koji traje 0.3 sekunde */
}

/* ==========================================
   2. DIZAJN ZA DESKTOP (Ekrani širi od 992px)
   ========================================== */
@media (min-width: 992px) {
    .tip-text-btn {
        height: 40px !important;              /* 💻 Visina gumba na desktopu */
        padding: 0 20px !important;           /* Širi razmak lijevo/desno za veći ekran */
        font-size: 13px !important;           /* Veličina fonta */
    }
}

/* ==========================================
   3. HOVER I IKONA STANJA (Vrijedi za sve)
   ========================================== */
.tip-text-btn:hover {
    background-color: #007FCC !important;     /* ⚫ Pozadina postaje tip-plava #007FCC */
    color: #ffffff !important;                /* Tekst i ikona postaju bijeli */
}

.tip-text-btn i {
    color: inherit !important;                /* Ikona obavezno prati boju teksta */
}


/* ===================================================================== */
/* 1. POČETNO STANJE: Crna podloga, bijeli tekst i bijela ikona */
/* ===================================================================== */
/* ==========================================
   1. DIZAJN ZA MOBITELE (Standardno stanje)
   ========================================== */
.tip2-text-btn {
    display: inline-flex !important;		/* Ovo drži tekst savršeno u sredini na mobitelu */
    align-items: center !important;           /* Centriranje po vertikali (od vrha do dna) */
    justify-content: center !important;       /* Centriranje po horizontali (lijevo-desno) */
    
    height: 35px !important;                  /* 📱 Visina gumba na mobitelu */
    padding: 0 15px !important;               /* Gornji/donji razmak je 0, lijevo/desno je 15px */
    font-size: 13px !important;               /* Malo manji font da lakše stane na mobitel */
    
    /* Izgled gumba (Bijela podloga, crna slova) */
    background-color: #333333 !important;     /* ⚫ Crna pozadina gumba */
    color: #ffffff !important;                /* ⚪ Bijeli tekst (i bijela ikona unutra) */
    border: 0px solid #000000 !important;     /* Crni obrub da se gumb vidi na bijeloj stranici */
    border-radius: 6px !important;            /* Blago zaobljenje rubova */
    text-decoration: none !important;         /* Uklanja podcrtavanje linka */
    font-weight: bold !important;
    
    /* Blokade za iPhone i glatki prijelaz */
    -webkit-user-select: none !important;  
    user-select: none !important;          
    -webkit-touch-callout: default !important; 
    transition: background-color 0.3s ease, color 0.3s ease !important; /* Glatki prijelaz boja koji traje 0.3 sekunde */
}

/* ==========================================
   2. DIZAJN ZA DESKTOP (Ekrani širi od 992px)
   ========================================== */
@media (min-width: 992px) {
    .tip2-text-btn {
        height: 40px !important;              /* 💻 Visina gumba na desktopu */
        padding: 0 20px !important;           /* Širi razmak lijevo/desno za veći ekran */
        font-size: 13px !important;           /* Veličina fonta */
    }
}

/* ==========================================
   3. HOVER I IKONA STANJA (Vrijedi za sve)
   ========================================== */
.tip2-text-btn:hover {
    background-color: #007FCC !important;     /* ⚫ Pozadina postaje tip-plava #007FCC */
    color: #ffffff !important;                /* Tekst i ikona postaju bijeli */
}

.tip2-text-btn i {
    color: inherit !important;                /* Ikona obavezno prati boju teksta */
}



/* ===================================================================== */
/* 1. POČETNO STANJE: Plava podloga, bijeli tekst i bijela ikona */
/* ===================================================================== */
/* ==========================================
   1. DIZAJN ZA MOBITELE (Standardno stanje)
   ========================================== */
.tip3-text-btn {
    display: inline-flex !important;		/* Ovo drži tekst savršeno u sredini na mobitelu */
    align-items: center !important;           /* Centriranje po vertikali (od vrha do dna) */
    justify-content: center !important;       /* Centriranje po horizontali (lijevo-desno) */
    
    height: 35px !important;                  /* 📱 Visina gumba na mobitelu */
    padding: 0 15px !important;               /* Gornji/donji razmak je 0, lijevo/desno je 15px */
    font-size: 13px !important;               /* Malo manji font da lakše stane na mobitel */
    
    /* Izgled gumba (Bijela podloga, crna slova) */
    background-color: #007FCC !important;     /* ⚫ Crna pozadina gumba */
    color: #ffffff !important;                /* ⚪ Bijeli tekst (i bijela ikona unutra) */
    border: 0px solid #000000 !important;     /* Crni obrub da se gumb vidi na bijeloj stranici */
    border-radius: 6px !important;            /* Blago zaobljenje rubova */
    text-decoration: none !important;         /* Uklanja podcrtavanje linka */
    font-weight: bold !important;
    
    /* Blokade za iPhone i glatki prijelaz */
    -webkit-user-select: none !important;  
    user-select: none !important;          
    -webkit-touch-callout: default !important; 
    transition: background-color 0.3s ease, color 0.3s ease !important; /* Glatki prijelaz boja koji traje 0.3 sekunde */
}

/* ==========================================
   2. DIZAJN ZA DESKTOP (Ekrani širi od 992px)
   ========================================== */
@media (min-width: 992px) {
    .tip3-text-btn {
        height: 40px !important;              /* 💻 Visina gumba na desktopu */
        padding: 0 20px !important;           /* Širi razmak lijevo/desno za veći ekran */
        font-size: 13px !important;           /* Veličina fonta */
    }
}

/* ==========================================
   3. HOVER I IKONA STANJA (Vrijedi za sve)
   ========================================== */
.tip3-text-btn:hover {
    background-color: #333333 !important;     /* ⚫ Pozadina postaje tip-plava #007FCC */
    color: #ffffff !important;                /* Tekst i ikona postaju bijeli */
}

.tip3-text-btn i {
    color: inherit !important;                /* Ikona obavezno prati boju teksta */
}



/* =======================================================
   PRILAGODBA HOVER BOJA ZA JEZIKE UNUTAR DROPDOWNA (JEZICI)
   ======================================================= */

/* 🔵 1. HRVATSKI - npr. Plava boja na hover */
.p-dropdown-content a.color-hr:hover,
.p-dropdown-content a.color-hr:hover * {
    color: #027cc5 !important;             /* 🎨 Upišite željenu boju za HR */
    background-color: transparent !important; /* Ako predložak dodaje pozadinu, ovako je gasimo */
}

/* 🔴 2. ENGLISH - npr. Crvena boja na hover */
.p-dropdown-content a.color-en:hover,
.p-dropdown-content a.color-en:hover * {
    color: #d12229 !important;             /* 🎨 Upišite željenu boju za EN */
    background-color: transparent !important;
}

/* ⚫ 3. DEUTSCH - npr. Tamno siva boja na hover */
.p-dropdown-content a.color-de:hover,
.p-dropdown-content a.color-de:hover * {
    color: #414042 !important;             /* 🎨 Upišite željenu boju za DE */
    background-color: transparent !important;
}

/* Ovo će obojiti tekst i ikone unutar tog dropdowna u vašu sivu boju */
.custom-dropdown-color, 
.custom-dropdown-color a, 
.custom-dropdown-color i {
    color: #AFAFAF !important;
}


/* =======================================================
   begin: ISTICANJE TRENUTNOG JEZIKA U DROPDOWNU + KVAČICA U BOJI
   ======================================================= */

/* 1. Izgled i prostor za aktivni jezik */
.p-dropdown-content a.trenutni-jezik {
    color: #AFAFAF !important;             
    background-color: #f5f5f5 !important;  
    display: flex !important;              
    justify-content: space-between !important; 
    align-items: center !important;
    padding-right: 15px !important;        
}

.p-dropdown-content a.trenutni-jezik * {
    color: #AFAFAF !important;             
}

/* 2. Struktura kvačice (Ovdje NE definiramo boju, samo oblik) */
.p-dropdown-content a.trenutni-jezik::after {
    font-family: "Font Awesome 5 Free", "FontAwesome" !important; 
    font-weight: 900 !important;           
    content: "\f00c" !important;           /* Kod za fa-check kvačicu */
    font-size: 11px !important;            
    margin-left: 10px !important;          
}

/* 🚀 3. PRILAGODBA BOJE KVAČICE PREMA JEZIKU */

/* Ako je trenutni jezik HRVATSKI -> Plava kvačica */
.p-dropdown-content a.color-hr.trenutni-jezik::after {
    color: #027cc5 !important;             /* 🔵 Plava */
}

/* Ako je trenutni jezik ENGLISH -> Crvena kvačica */
.p-dropdown-content a.color-en.trenutni-jezik::after {
    color: #d12229 !important;             /* 🔴 Crvena */
}

/* Ako je trenutni jezik DEUTSCH -> Tamno siva kvačica */
.p-dropdown-content a.color-de.trenutni-jezik::after {
    color: #414042 !important;             /* ⚫ Tamno siva */
}

/* 4. Zaključavanje hovera (Ostaje miran na dodir miša) */
.p-dropdown-content a.trenutni-jezik:hover,
.p-dropdown-content a.trenutni-jezik:hover * {
    color: #AFAFAF !important;
    cursor: default !important;
}

/* 🚀 OVO PONIŠTAVA ŠTAMPANA SLOVA SAMO ZA TAJ LINK */
.normalna-slova,
.normalna-slova * {
    text-transform: none !important; /* Poništava tvorničko "uppercase" pravilo menija */
}

/* =======================================================
   end: ISTICANJE TRENUTNOG JEZIKA U DROPDOWNU + KVAČICA U BOJI
   ======================================================= */

/* =======================================================
   begin: INFO ZNAK PORED "POSTAVKE KOLAČIĆA"
   ======================================================= */

/* Kontejner koji drži ikonu i skriveni tekst */
.tooltip-kontejner {
    position: relative;
    display: inline-flex; /* Promijenjeno u inline-flex za savršeno poravnanje u BS4/5 */
    align-items: center;
    cursor: pointer;
    vertical-align: middle;
}

/* Izgled malog sivog kružića sa slovom "i" */
.tooltip-ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background-color: #007FCC; /* Standardna siva boja (možete staviti i #0d6efd za BS5 plavu) */
    color: #ffffff;            
    border-radius: 50%;        
    font-size: 11px;
    font-weight: bold;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Moderni fontovi iz BS5 */
    line-height: 0;            /* Ključno za BS4/5 da slovo "i" bude točno u centru */
}

/* Skriveni oblačić s tekstom koji iskače iznad */
.tooltip-kontejner .tooltip-tekst {
    visibility: hidden;
    width: 270px;              
    background-color: #333333; /* Službena tamna boja iz Bootstrap 5 palete */
    color: #ffffff;
    text-align: center;
    border-radius: 0.375rem;   /* Zaobljeni rubovi usklađeni s BS5 standardom (rounded-3) */
    padding: 20px 20px;
    position: absolute;
    z-index: 1080;             /* Usklađeno s Bootstrap 5 z-indexom za izvorne tooltipe */
    bottom: calc(100% + 8px);  
    left: 50%;
    transform: translateX(-50%); 
    opacity: 0;
    transition: opacity 0.15s ease-in-out; /* Glatki prijelaz usklađen s Bootstrap animacijama */
    font-size: 0.875rem;       /* Veličina fonta usklađena s BS text-muted i small stilovima */
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.4;
    font-weight: 400;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Sjena u stilu BS5 'shadow' klase */
}

/* Mala strelica na dnu oblačića */
.tooltip-kontejner .tooltip-tekst::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #212529 transparent transparent transparent;
}

/* Prikazivanje na hover (miš) i fokus (mobiteli) */
.tooltip-kontejner:hover .tooltip-tekst,
.tooltip-kontejner:focus .tooltip-tekst {
    visibility: visible;
    opacity: 1;
}

/* =======================================================
   end: INFO ZNAK PORED "POSTAVKE KOLAČIĆA"
   ======================================================= */


/* ======================================================
   POPRAVAK ZA STABILNOST IKONA (FA-HOME)
======================================================= */
/* 1. Odmah zaključava točan prostor za kućicu da tekst ne skače */
.fa, .fas, .fab {
    display: inline-block !important;
    width: 1.25em !important; 
    text-align: center !important;
}

/* 2. Sakriva ružne prazne kvadratiće u prvoj sekundi učitavanja */
@font-face {
    font-family: "FontAwesome";
    font-display: block !important;
}

/* ======================================================
   end: POPRAVAK ZA STABILNOST IKONA (FA-HOME)
======================================================= */

/* ======================================================
   PRECIZNO BOJANJE LINKOVA SAMO UNUTAR TEKSTA I KOLAČIĆA
======================================================= */
/* 1. Ciljamo linkove koji se nalaze isključivo unutar običnih odlomaka teksta (p) */
p a, 
p a:link, 
p a:visited {
    color: #007FCC !important; /* Naša blaža, ugodna plava */
    text-decoration: none !important;
}

/* 2. Ciljamo linkove unutar svih tekstova i tablica Cookiebot deklaracije */
.mobilni-kolacici a,
.mobilni-kolacici a:link,
.mobilni-kolacici a:visited,
#CookieDeclaration div a,
#CookieDeclaration td a {
    color: #007FCC !important; /* Blaža plava samo za kolačiće */
   text-decoration: none !important;
}

/* 3. Hover efekt (prelazak mišem) samo za te odabrane tekstualne linkove */
p a:hover,
.mobilni-kolacici a:hover,
#CookieDeclaration div a:hover,
#CookieDeclaration td a:hover {
    color: #007FCC !important; /* Blaža tamnija nijansa na hover */
    text-decoration: underline !important;
}
/* ======================================================
   PRECIZNO BOJANJE LINKOVA SAMO UNUTAR TEKSTA I KOLAČIĆA
======================================================= */




/* ============================================================================================================ */




/* ==========================================
VRAĆANJE ORIGINALNIH BOJA LINKOVA zbog theme.css (zbog ljubičaste)
========================================== */

/* Hover u copyright sekciji podnožja (Plavo) */
.copyright-content a:hover {
    color: #027cc5 !important;
}


/* ==========================================================
   UKLANJANJE LJUBIČASTE BOJE S KLIZAČA (CAROUSEL DOTS & NAV)
   ========================================================== */

/* Strelice carousela na prijelaz mišem (Hover) */
.inspiro-slider .flickity-button:hover,
.carousel .flickity-button:hover {
    background-color: #027cc5 !important; /* Strelice na hover postaju plave */
    border-color: #027cc5 !important;
}

/* Ikone u portfelju / galerijama na hover (Kružići oko ikona) */
.portfolio-item .portfolio-description a:hover i,
.portfolio-item .grid-description a:hover i,
.portfolio-item .portfolio-links a:hover i,
.grid-item .portfolio-description a:hover i,
.grid-item .grid-description a:hover i,
.grid-item .portfolio-links a:hover i {
    background-color: #027cc5 !important;
    border-color: #027cc5 !important;
}

/* Gumb za povratak na vrh stranice (Scroll Top strelica) */
#scrollTop:after, 
#scrollTop:before {
    background-color: #027cc5 !important; /* Mijenja u vašu plavu */
}


/* ==========================================================
   STOPIRANJE BLJESKA (FOUC) NA LANGUAGE SWITCHERU
   ========================================================== */

/* Potpuno uklanjanje prijelaza i sjena koje uzrokuju sjenčani bljesak */
.header-extras .p-dropdown,
.header-extras .p-dropdown *,
.header-extras .p-dropdown-content {
    transition: none !important; /* Gasi animaciju koja uzrokuje bljesak */
    box-shadow: none !important;  /* Gasi sjenu koja se na trenutak pojavi */
    animation: none !important;   /* Gasi bilo kakvu ugrađenu POLO animaciju */
}

/* Osiguravamo da je sadržaj sakriven dok se na njega ne prijeđe mišem */
.header-extras .p-dropdown .p-dropdown-content {
    display: none;
}

/* Prikazivanje isključivo na hover, čisto preko CSS-a bez čekanja JS skripte */
.header-extras .p-dropdown:hover .p-dropdown-content {
    display: block !important;
}


/* ==========================================================
   KONAČNA LOGIKA ZA HOME IKONU (SIVA / BIJELA / PLAVI HOVER)
   ========================================================== */

/* 1. Opće stabiliziranje gumba - gasimo sve animacije i okvire da ništa ne trza i ne reže */
#mainMenu nav > ul > li > a,
#mainMenu nav > ul > li > a > i.fa-home {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    transition: none !important; /* Gasi ugrađenu glatku animaciju koja uzrokuje trzaj */
    transform: none !important; /* Sprječava bilo kakvo pomicanje na ekranu */
}
#mainMenu nav > ul > li > a:after {
    display: none !important; /* Trajno gasi ugrađenu crtu predloška koja reže ikonu */
}

/* 2. KADA STE NA POČETNOJ STRANICI (Klasa .current) - Kućica je fiksno siva */
#mainMenu nav > ul > li.current > a,
#mainMenu nav > ul > li.current > a > i.fa-home {
    color: #636363 !important; /* Vaša siva nijansa */
}

/* 3. KADA STE NA OSTALIM STRANICAMA - Kućica je fiksno bijela */
#mainMenu nav > ul > li:not(.current) > a,
#mainMenu nav > ul > li:not(.current) > a > i.fa-home {
    color: #ffffff !important; /* Fiksno bijela boja */
}

/* 4. HOVER EFEKT SVUGDJE - Tek kada se pojavi ručica miša, skače u plavu boju */
#mainMenu nav > ul > li > a:hover,
#mainMenu nav > ul > li > a:hover > i.fa-home {
    color: #027cc5 !important; /* Vaša plava nijansa */
}

/* 5. Poništavanje preranog aktiviranja preko <li> prostora */
#mainMenu nav > ul > li:hover > a,
#mainMenu nav > ul > li:hover > a > i.fa-home {
    border: none !important;
    outline: none !important;
}

/* ============================================================================================================ */


/* ==========================================================
   STABILIZACIJA JEZIČNIH GUMBA HR/EN/DE ispod logotipa (GAŠENJE SMANJIVANJA NA KLIK)
   ========================================================== */

/* Onemogućavamo bilo kakvo trzanje, skakanje i promjenu veličine gumba na klik i fokus */
.btn-light-tip-hr, .btn-light-tip-hr:focus, .btn-light-tip-hr:active,
.btn-light-tip-en, .btn-light-tip-en:focus, .btn-light-tip-en:active,
.btn-light-tip-de, .btn-light-tip-de:focus, .btn-light-tip-de:active {
    transform: none !important;          /* Isključuje efekt smanjivanja/potonuća gumba */
    scale: 1 !important;                 /* Prisila na fiksnu, prirodnu veličinu */
    box-shadow: none !important;         /* Gasi Bootstrap sjenu koja prividno širi gumb */
    outline: none !important;            /* Uklanja bilo kakve ugrađene okvire */
    transition: none !important;         /* Instantan prijelaz bez popratnog treperenja */
}

/* ==========================================================
   STILIZACIJA BOJA BREADCRUMB NAVIGACIJE (SIVA / BIJELA / PLAVA)
   ========================================================== */

/* 1. Stabilizacija linkova i ikona - gasimo okvire i animacije */
.breadcrumb ul li a,
.breadcrumb ul li a i {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    transition: none !important; /* Instantna promjena boje sprječava trzanje */
    text-decoration: none !important;
}

/* 2. Linkovi koji vode natrag (npr. kućica) - Fiksno BIJELA boja */
.breadcrumb ul li a,
.breadcrumb ul li a i {
    color: #ffffff !important;
}

/* 3. HOVER na linkovima - Tek kad se pojavi ručica miša, skače u PLAVU */
.breadcrumb ul li a:hover,
.breadcrumb ul li a:hover i {
    color: #027cc5 !important; /* Vaša plava nijansa */
}

/* 4. TRENUTNA STRANICA (Klasa .active) - Fiksno SIVA boja (ne reagira na hover) */
.breadcrumb ul li.active {
    color: #636363 !important; /* Vaša siva nijansa (#636363) */
    background: transparent !important; /* Poništava eventualnu ugrađenu pozadinu predloška */
}

/* ============================================================================================================ */