@charset "UTF-8";

.grid-gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr); 
    /* Uklanjamo grid-auto-rows: 1fr; jer koristimo aspect-ratio */
    grid-auto-flow: dense; 
    gap: 10px; 
    max-width: 1200px;
    margin: 0 auto;
}

.gallery-item {
    /* Uklanjamo fiksnu visinu koja je bila problem */
    height: 100%; 
    width: 100%;
    /* Obavezno: Osiguravamo da slika prekrije ceo prostor figure */
    overflow: hidden; 
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

.gallery-item {
    /* OBAVEZNO: Skriva delove slike koji "izlaze" van okvira */
    overflow: hidden; 
    
    /* Dodaje glatku tranziciju za transformaciju (zoom) */
    transition: transform 0.3s ease-in-out; 
    
    /* Opcionalno: malo podizanje elementa pri hoveru radi boljeg vizuelnog efekta */
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.2); */
}

/* Stil za sliku unutar gallery-item */
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    
    /* Tranzicija samo za transformaciju slike (zoom) */
    transition: transform 0.3s ease-in-out; 
}

/* ---------------------------------------------------- */
/* EFEKAT: Šta se dešava KADA PREĐETE MIŠEM preko gallery-item */
/* ---------------------------------------------------- */
.gallery-item:hover img {
    /* Povećava sliku na 110% njene originalne veličine unutar okvira */
    transform: scale(1.1); 
}

/* Opcionalno: Ako želite da se ceo "gallery-item" malo podigne/promeni */
/* .gallery-item:hover {
    transform: translateY(-5px); 
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
} */	
	
/* ---------------------------------------------------- */
/* DEFINICIJE VELIČINA (Omjer slike) SADA KORISTE ASPECT-RATIO */
/* ---------------------------------------------------- */

/* 1. 1:1 (Savršen Kvadrat) */
.size-1x1 {
    grid-column: span 1;
    /* Postavlja omjer širina/visina na 1/1 */
    aspect-ratio: 1 / 1; 
}

/* 2. 1:2 (Vertikalna: 1 kolona, 2 puta viša) */
.size-1x2 {
    grid-column: span 1;
    grid-row: span 2; 
    /* Postavlja omjer širina/visina na 1/2 */
    aspect-ratio: 1 / 2;
}

/* 3. 2:1 (Horizontalna: 2 kolone, 1 put viša) */
.size-2x1 {
    grid-column: span 2;
    grid-row: span 1;
    /* Postavlja omjer širina/visina na 2/1 */
    aspect-ratio: 2 / 1; 
}

/* ---------------------------------------------------- */
/* OPCIONALNO: Klasični Padding Trik za starije pretraživače */
/* Ako aspect-ratio ne radi (mada radi svuda), ovo je alternativa: */
/* .size-1x1 { padding-top: 100%; height: 0; } */
/* .size-1x2 { padding-top: 200%; height: 0; } */
/* .size-2x1 { padding-top: 50%; height: 0; } */
	
	
/* ---------------------------------------------------- */
/* RESPONSIVNOST (Automatska visina) */
/* ---------------------------------------------------- */

/* Da bi Grid funkcionisao ispravno sa '1fr' redovima, moramo
   postaviti visinu kontejnera. Najlakši način je paddingom,
   ali za Grid je najbolje koristiti JS, ili jednostavan fiksni trik: */

/* Trikovi za automatsku visinu Redova (kompleksnije, ali efikasnije) */
/* Koristimo minmax da osiguramo da se redovi prilagođavaju sadržaju */
@supports (grid-template-rows: repeat(auto-fill, minmax(200px, 1fr))) {
    .grid-gallery {
        /* Svaki red će biti minimalno 200px visok */
        grid-auto-rows: minmax(200px, 1fr); 
    }
}


/* Jednostavno rešenje za mobilne uređaje (prebacivanje na 2 kolone) */
@media (max-width: 768px) {
    .grid-gallery {
        grid-template-columns: repeat(2, 1fr); /* Samo 2 kolone na mobilnom */
    }
    /* Slike 1x2 i 2x1 i dalje pravilno zauzimaju 1x2 ili 2x1 jedinicu,
       ali sada su te jedinice veće. */
}

/* Stil za omotač */
.sadrzaj-container {
  max-width: 100%;
  margin: 15px auto;
  padding: 15px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  overflow: hidden; /* BITNO: Omotač skriva sve što je van definisane visine */
}

/* Stil za tekstualni DIV */
.sadrzaj-tekst {
  /* Početna, skraćena visina (npr. 150px) */
  max-height: 160px; 
  
  /* BITNO: Prelaz (tranzicija) za glatku animaciju visine */
  transition: max-height 0.5s ease-in-out; 
  
  overflow: hidden;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

/* Klasa koja se dodaje/uklanja pomoću JavaScripta */
.prosireno {
  /* Velika visina koja pokriva ceo sadržaj */
  max-height: 4000px; 
  /* (Koristite visoku vrednost, jer se max-height ne može animirati do 'auto') */
}

#brojac{display:none;}

/* Stil za dugme */
.dugme-toggle {
  display: block;
  margin-top: 10px;
  padding: 10px 15px;
  background-color: #1d2152;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* 1. Glavni kontejner koristi Flexbox za raspored slika/tekst */
.projekat-zaglavlje {
    display: flex;
    align-items: center; /* Vertikalno centriranje elemenata (slike i teksta) */
    gap: 15px; /* Razmak između slike i teksta */
    padding-bottom: 10px; /* Mali razmak pre HR linije */
}

/* 2. Stil za deo sa slikom/ikonom */
.projekat-slika img {
    width: 300px; /* Podesite željenu širinu ikone/slike */
    height: auto; /* Podesite željenu visinu ikone/slike */
    object-fit: contain; /* Osigurava da se slika pravilno uklopi */
}

/* 3. Stil za deo sa tekstom */
.projekat-tekst {
    /* Dozvoljava tekstu da zauzme sav preostali prostor desno */
    flex-grow: 1; 
}

/* 4. Stil za h6 naslov */
.projekat-tekst h6 {
    margin: 0;
}

/* 5. Stil za dodatni tekst */
.projekat-tekst p {
    margin: 3px 0 0 0; /* Mali gornji razmak od h6 */
    
}

/* 6. Stil za horizontalnu liniju */
.projekat-separator {
    border: none;
    border-top: 1px solid #ccc; /* Tanka siva linija */
    margin: 10px 0 20px 0; /* Margine iznad i ispod linije */
}


body {
	text-align: left;
    background-image: url(../img/1920x1080/pozadina.jpg);
    background-repeat: repeat-y;}

p{text-align: justify;}

.bijela{color:white;}

.footer {background-color: #3b536f;}

.header .navbar {border-bottom: 3px solid #4a83c7;background-color:rgba(0,0,0,0.30);}
.footer .footer-seperator{border-bottom: 7px solid #d1dfea;}
.carousel {height: 590px;}
.carousel-inner {height: 100%;}

hr{border:2px solid #ecf0f6; margin: 0;margin-top:9px;margin-bottom:0;}
hr.svjetlija {border: 0.8px solid #d8dadc;margin:0; margin-top:0px;margin-bottom:9px;padding: 0;}

.rounded-okvir{border: 1px solid #c0c1c1;border-radius: 10px;padding: 1%;background-color: #ffffff;width:31.5%;margin:0.5%;min-height: 355px;}
.bijela-pozad{background-color: white;}
.rounded{border-radius: 10px;}

.djelatnosti{border-radius: 6px;padding: 1%;background-color: #3b536f;color:white;width:18%;margin:0.5%;
height:143px;text-align: center; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.djelatnosti h5{text-align: center;}
.djelatnosti:hover{background-color: #375f8e;}


h5{font-size:20px; color:white;margin: 5px;}

.no-margin{margin: 0; padding: 2px;}

#d100 {display: inline-block; vertical-align: top; text-align: left;
		padding: 20px 0 20px 0;margin: 0;width: 100%; height: 100%; position: relative;}

@media (max-width: 992px){
	
	.header .navbar {border-bottom: 3px solid #4a83c7;background-color:rgba(255,255,255,1.00);}
	.carousel {height: 460px;}	
}

		
@media (max-width: 768px){
	
	.rounded-okvir{border: 1px solid #c0c1c1;border-radius: 10px;padding: 1%;background-color: #ffffff;width:94%;margin:2%;min-height: auto;}
	#sertifikat{display: inline-block; width: 47%;margin: 1% !important; padding: 0;}
	#standardi{display: inline-block; width: 30.3%;margin: 1% !important; padding: 0;}
	#wa-footer{display: inline-block; text-align: center; width: 96%;margin: 1% !important; padding: 0;}
	
	.sm-margin-b-50 {margin-bottom: 0px!important;}
	.djelatnosti{border-radius: 10px;padding: 1%;width:95%;margin:0.5%;height:auto;}

	
/* 1. Glavni kontejner koristi Flexbox za raspored slika/tekst */
.projekat-zaglavlje {
    flex-direction: column;
        align-items: flex-start; /* Poravnaj elemente na levo u koloni */
}

/* 2. Stil za deo sa slikom/ikonom */
.projekat-slika img {
    width: 250px; 
        height: auto;
        display: block;
}

/* 3. Stil za deo sa tekstom */
.projekat-tekst h6,
    .projekat-tekst p {
        text-align: left;
    }
	
	
}