#popup5 { /* POP UP PROZOR OD IZBORNIK GRAFIČKIH USLUGA PRINT,DIZAJN VIZITKI,PLAKATA I TD */
    position: fixed;
    display: none;
    width: 95%;
    height: 85%;
    top: 110px; /* Postavite udaljenost od vrha stranice na 200px */
    left: 50%;
    transform: translateX(-50%);
    
    background-color:rgb(223, 232, 226);
    color: #030303;
    border-radius: 10px;
    overflow: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 999;
    text-align: left;
    overflow-x: hidden;
}
#popup5 .usluge,
#popup5 .polje,
#popup5 .podnaslov,
#popup5 .ikone {
    background-color: #f6f1f1; /* MJENJANJE BOJE POZADINE */
}

#popup-header5 {
    background-color: #f5be1a;
    padding: 10px;
    position: sticky;
    top: 0;e
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 10px;
    margin: -17px;
    
}



#popup-title5 {
    flex-grow: 1;
    color: #fff;
    font-size: 18px;
    margin: 0;
    
}

#close-popup5 {
    cursor: pointer;
    font-size: 18px;
    color: #fff;
    margin-right: 20px;
    width: 30px;
    height: 30px;
}

#popup-content5 {
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
    background-color: #e8e7e6;
    margin-left: -18px;
    margin-right: -18px;
}

#popup3 {               /* POP UP PROZOR OD USLUGA */
    position: fixed;
    display: none;
    width: 95%;
    height: 70%;
    top: 200px; /* Postavite udaljenost od vrha stranice na 200px */
    left: 50%;
    transform: translateX(-50%);
    background-color:rgb(235, 235, 233);
    color: #030303;
    border-radius: 10px;
    overflow: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 999;
    text-align: left;
    overflow-x: hidden;
}

#popup-header3 {
    background-color: #1e72d1;
    padding: 10px;
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 10px;
    margin: -17px;
}

#popup-content3 {
    margin-left: -18px;
    margin-right: -18px;
}

#popup-title3 {
    flex-grow: 1;
    color: #ffffff;
    font-size: 18px;
    margin: 0;
}

#close-popup3 {
    cursor: pointer;
    font-size: 18px;
    color: #fff;
    margin-right: 20px;
    width: 30px;
    height: 30px;
}

#popup-content3 {
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
}










#popup4 {
    display: none;
    position: fixed;
    width: 75%;
    height: 30%;
    top: 45%; /* Postavite udaljenost od vrha stranice na px */
    left: 50%;
    transform: translateX(-50%);
    background: #fdfdfd;
    color: #161616;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 999;
    text-align: left;

}


#popup-header4 {
    background-color: #1e72d1;                                                                                          /* Boja pozadine HEDERA USLUGE */
   padding: 10px;
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    border-radius: 10px 10px 0px 0px
    
    
    
}

#popup-content4 {
    
        margin-left: 5px;
        margin-right: 0px;
    
}
.slicice-container-pozivi .slicica {
    margin-right: 10px; /* Dodavanje margine s desne strane svake sličice u pop up4 prozoru za pozive*/
    margin-top: 30px;
   
    justify-content: center; /* Centriranje po horizontali */
    align-items: center; /* Centriranje po vertikali */
}
#popup-title4 {
    flex-grow: 1;
    color: #ffffff;
    font-size: 18px;
    margin: 0px;

}

#close-popup4 {
    cursor: pointer;
    font-size: 18px;
    color: #fff;
    margin-right: 10px; /* Dodajte ovu liniju za odvajanje od desnog kraja */
   
    
}

#popup-content4 {
    padding: 20px;
    overflow-y: auto; /* Dodato za omogućavanje skrolovanja po Y osi */
    flex-grow: 1;
    
    /* kKRAJ ZA POP UP POZIVI */
} 











#popup2 {
    display: none;
    position: fixed;
    width: 95%;
    height: 70%;
    top: 200px; /* Postavite udaljenost od vrha stranice na 200px */
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    color: #030303;
    border-radius: 10px;
    overflow: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 999;
    text-align: left;
    overflow-x: hidden;
}


#popup-header2 {
    background-color: #1e72d1;
    /* Boja pozadine zaglavlja */
    padding: 10px;
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

#popup-title2 {
    flex-grow: 1;
    color: #fbf8f8;
    font-size: 18px;
    margin: 0;
}

#close-popup2 {
    cursor: pointer;
    font-size: 18px;
    color: #fff;
    margin-right: 10px; /* Dodajte ovu liniju za odvajanje od desnog kraja */
    
    width: 30px;
    height: 30px;
   
    
    
}

#popup-content2 {
    padding: 20px;
    overflow-y: auto; /* Dodato za omogućavanje skrolovanja po Y osi */
    flex-grow: 1;
    
    /* kKRAJ ZA POP UP MOJ CV */
} 

#popup {
    display: none;
    position: fixed;
    width: 90%;
    max-width: 600px;
    height: 55%;
    top: 2%;
    left: 30%;
    background: #333;;
    color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    
    flex-direction: column; /* Dodano */
    z-index: 999;
    
}

#popup-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px;
}
#popup-title {
flex-grow: 1; /* Omogućuje naslovu da zauzme preostali prostor na fleksibilnom kontejneru */
text-align: center; /* Centrira tekst */
margin: 0; /* Uklanja margine kako bi se spriječilo nepotrebno razmakivanje */
}
#close-popup {
    cursor: pointer;
    font-size: 18px;
    color: #fff;
    margin-left: auto;
}

#popup-content {
    padding: 20px;
    overflow-y: auto;
    height: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.field {
    margin-bottom: 10px;
    width: 120;
}

.field label {
    display: block;
    font-size: 14px;
    color: #fff;
    margin-bottom: 5px;
}

.field input,
.field textarea {
    width: 120% ;
    max-width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    margin-bottom: 10px;
    box-sizing: border-box;
}


input[type="submit"] {
    display: block;
    width: 100%;
    padding: 10px;
    font-size: 16px;
    background-color: #333;/* BOJA DUGMETA ZA SLANJE EMAILA*/
    box-shadow: 0 4px 6px rgba(3, 3, 3, 0.5);
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}


    
/* Osnovni stilovi */
body, html {
    font-family: Arial, sans-serif;
    background-color: #f1f0f0;                                             /* BOJA BODY TJELA STRANICE */
    margin: 0;
    padding: 0;
    overflow: hidden; /* Onemogući skrolovanje */
    height: 100%;
   
    margin-bottom: 20px;

}
.dugmad {
    background-color:#f0ec0a;                                                            /* BOJA DUGMADI O NAMA I USLUGE */
    width: 140px;
    height: 30px;
    box-shadow: 5px 5px 10px rgba(1, 1, 1, 0.712); /* Sijena oko dugmadi na vrhu */
    color: #000000;
    border-radius: 5px; /* Zaobljeni rubovi */
    border: none; /* Ukloni granicu */
    margin-top: 20px;
    margin-left: 1px;
    margin-right: 1px;
    height: 35px;
    
}
.dugmad:hover {
    background-color:#6d6c5d;                                                            /* BOJA DUGMETA ZA POZIV */
    box-shadow: 2px 2px 7px rgba(37, 37, 37, 0.7); /* Sijena oko dugmadi na vrhu */                                                           /* Boja dugmadi na vrhu */
    
}

#button {
    background-color:#f0ec0a;                                                            /* BOJA DUGMADI O NAMA I USLUGE */
    background-color:;                                                            /* BOJA DUGMADI O NAMA I USLUGE */
                                                              /* BOJA DUGMETA ZA POZIV */
   /* background-color:#1672c8;                                                            /* BOJA DUGMETA ZA POZIV */
    color: rgb(0, 0, 0);
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
    box-shadow: 10px 7px 10px rgba(0, 0, 0, 0.2);
    width: 200px;
}

#button:hover{
background-color: #6d665d; 
box-shadow: 2px 2px 7px rgba(110, 106, 106, 0.7); /* Sijena oko dugmadi na vrhu */ 
}
nav {
    margin-left: -15px;/* pozicioniranje navigacije za o nama i usluge */
}

/* Stil za zaglavlje */
header {
    background-image: url('pozadina.jpg');                                                       /* BOJA ZAGLAVLJA*/
    height: 200px;
    color: white;
    text-align: center;
    padding: 10px;
    width: 100%; /* Postavljanje širine na 100% */
    position: relative;
    margin-top: 0px;
   
    background-size: cover; /* Podešavanje veličine slike da pokrije cijeli header */
background-position: center; /* Centriranje slike u headeru */
}
/* Stil za zaobljeni kontejner */
.zaobljeni-kontejner {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Početak kontejnera po vertikali */
    align-items: center; /* Postavljanje na sredinu po horizontali */
    height: calc(40% - 250px); /* 100% visine minus 250px od vrha stranice */
    width: 80%;
    border-radius: 0px 0px 10px 10px;
    padding: 0px;
    box-shadow: 0 0 10px rgba(144, 9, 9, 0.1);
    text-align: center;
    z-index: 1;
    position: relative;
    background-color: rgba(255, 255, 255, 0.9);                                                             /* BOJA KONTEJNERA */
    margin: auto;
    margin-top: auto; /* Postavljanje margine prema gore na auto */
    height: auto; /* Kontejner će se automatski prilagoditi visini sadržaja */  
    overflow-y: auto;
    overflow-x: hidden;/*blokiranje horizontalno skrolanja*/
    }


    .podatci {    /*PODATCI TELEFONSKI BROJ EMAIL WEB STRANICA*/
        display: flex;
        flex-direction: column; /* Postavljanje na stupce */
      }
      
      .telefonski, .email, .web {
        display: flex;
        align-items: center; /* Centriranje elemenata po vertikali */
      }
      
      .tel, .broj, .mail, .adresa, .web-stranica, .url {
        margin: 0; /* Ukloniti vanjske margine */
        padding: 2px;
      }
      .tel, .mail, .web-stranica{  /* parametri za prikaz telefonskog broja,e mail, web */
        color: #1a046b;
        font-weight: bold;
      }

/* Stil za navigaciju unutar zaglavlja */
nav {
    margin-top: 0px;
}

.icon-telephone {
    font-size: 17px; /* Promijenite veličinu ikone telefona prema vašim potrebama */
    margin-right: 10px; /* Razmak s lijeve strane ikone */
}

hr {
    border: 1px solid #ddd;
}



/* Stil za tablicu unutar kontejnera */
.tabela {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px; /* Prilagodite vrijednost prema vašim preferencijama */
margin-left: auto;
margin-right: auto;
display: block;
    padding-left: 10%;/* PODEŠAVANJE POČETKA TEKSTA */
}

td {
        padding-left: 40px;
    }

    .custom-cell th {
        text-align: left;
        padding-left:5%; /* PODEŠAVANJE POČETKA TEKSTA */
        white-space: nowrap;
    }
    h1{
        padding: 100px 500px;/* PODEŠAVANJE odmaknutog teksta ispod imena TEKSTA */
        white-space: nowrap;
    }

/* Stil za okruglu sliku */
.okrugla-slika {
    border-radius: 50%;
    border: 4px solid #ffffff;                                                             /* Boja okvira slike profila */
    box-shadow: 5px 5px 10px rgba(6, 6, 6, 0.2);
    width: 200px; /* Prilagodite dimenzije slike prema potrebi */
    height: 200px;
    object-fit: cover;
    margin-bottom: 20px;
    position: fixed; /* Promijenili smo poziciju na fixed kako bi bila iznad svih elemenata */
    top: 25%; /* Postavljamo vrh slike na 50% visine prozora */
    left: 50%; /* Postavljamo lijevu stranu slike na 50% širine prozora */
    transform: translate(-50%, -50%); /* Centriramo sliku na polu visine i polu širine prozora */
    z-index: 998; /* Postavljamo visok z-index kako bi bila iznad ostalih elemenata */
}
.slicice-container {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: center; 
    margin: 0px;
   
}

.slicice-container a, .slicice-container div {
    text-align: center; 
    margin: 2px; 
    
    display: flex; /* Dodajemo flexbox za pravilno poravnavanje */
    flex-direction: column; /* Stavljamo tekst ispod sličice */
    align-items: center; /* Poravnavanje teksta po centru */
    text-decoration: none; /* Uklanja podvlačenje teksta */
}

.slicice-container span {
    margin-top: 4px;
    font-size: 8px; /* Postavite željenu veličinu teksta */
    color: black; /* Postavite željenu boju teksta */
}

.slicice-container img {
    width: 35px; 
    height: 35px; 
   
}

.slicice-container-pozivi {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; /* Centriranje horizontalno */
    align-items: center; /* Centriranje vertikalno */
    height: 100%; /* Visina kontejnera */
}

.slicice-container-pozivi a, .slicice-container-pozivi div {
    text-align: center; 
    margin: 0px; 
    
    display: flex; /* Dodajemo flexbox za pravilno poravnavanje */
    flex-direction: column; /* Stavljamo tekst ispod sličice */
    align-items: center; /* Poravnavanje teksta po centru */
    text-decoration: none; /* Uklanja podvlačenje teksta */
}

.slicice-container-pozivi span {
    margin-top: 4px;
    font-size: 12px; /* Postavite željenu veličinu teksta */
    color: black; /* Postavite željenu boju teksta */
}

.slicice-container-pozivi img {
    width: 50px; 
    height: 50px; 
}


/* Media upit za mobilne uređaje */
@media only screen and (max-width: 600px) {
    /* Ovdje definirajte stilove koji će se primijeniti na mobitele srednjih veličina zaslona */
  
    header {
        height: 150px;
    }
body{
height: auto;
}
    .zaobljeni-kontejner {
        width: 80%; /* Prilagodite širinu kontejnera za mobilne uređaje */
        height: 63vh;
       
    }

    .okrugla-slika {
        width: 190px; /* Prilagodite dimenzije slike za mobilne uređaje */
        height: 190px; /* Prilagodite dimenzije slike za mobilne uređaje */
    }
}
#popup {
width: 80%; /* Prilagodite širinu pop-up prozora za mobilne uređaje */
height: auto; /* Prilagodite visinu na auto ili željenu vrijednost */
top: 50%; /* Centrirajte vrh na 50% visine ekrana */
left: 50%; /* Centrirajte lijevu stranu na 50% širine ekrana */
transform: translate(-50%, -50%); /* Centrirajte pop-up prozor */

}


 .url{
    font-size: 13px;
 }   

.doktor-nauka {
    margin-top: -140px; /* PODEŠAVANJE MARGINE DA BI BIO BLIŽE NASLOVU */
    margin-bottom: 40px; /* Dodajte odmak od dna stranice */
}

footer {

color: rgb(248, 248, 248);
text-align: center;
padding: 10px;
    background-color:#323536;                                                            /* BOJA ZAGLAVLJA*/
  font-size: 12px;
margin-top: 1%;
margin-left: 5%;
margin-right: 5%;
border-radius: 0px 0px 10px 10px;


}



.firma {
    color: #3c3b39;/* Boja teksta firme */
    padding: 5px;
    font-size: 13px;
    text-align: center;
}
.vip {
    color: #1a046b;/* Boja teksta firme */
    
    padding: 0px;
    font-size: 15px;
}
.info{
    color: #1a046b;/* Boja teksta firme */
    padding: 0px;
    font-size: 15px; 

}

.usluge{ /* DIJELOVI KOJI SE ODNOSE NA GRAFIČKI DIZAJN U POP UP USLUGE*/
  
    background-color: rgb(245, 245, 242);
    text-align: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 20px;
    margin-bottom: 0px;
    padding: 17px;
    color: aliceblue;
    letter-spacing: 2px;
    
}

.tekstnaslov {
    color: rgb(251, 250, 250);
    text-align: center;
    padding: 20px;
   
   
}
.podnaslov {
    text-align: center;
    background-color: rgb(245, 245, 242);
   
    
}

.podnaslov img {
    display: inline-block; /* Postavlja slike kao inline blokove */
    margin: 0 5px;
    display: inline-block; /* Postavlja slike kao inline blokove */
    margin: 0 15px;
  padding-left: 0px;
  padding-right: 0px;
  border-radius: 5px;
  box-shadow: 3px 3px 3px rgba(12, 12, 12, 0.197);
    width: 140px;
    
    margin-bottom: 20px

}
.podnaslov img:hover {

    box-shadow: 0px 0px 10px rgba(5, 44, 122, 0.5); /* Promjena sjene */
    transition: transform 0.1s ease, box-shadow 0.1s ease; /* Dodavanje prijelaza */}
.ikone {
    text-align: center;
    background-color: rgb(245, 245, 242);
}

.ikone img {
    display: inline-block; /* Postavlja slike kao inline blokove */
    margin: 0 15px;
  padding-left:0px;
  padding-right: 0px;
   border-radius: 5px 5px 5px 5px;
   box-shadow: 3px 3px 3px rgba(12, 12, 12, 0.197);
    width: 140px;
    margin-bottom: 20px
}


.tekstpodnaslov {
    
    color: rgb(62, 61, 60);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    
   
}
.tekstslika {
    margin-top: -17px;
    background-color: rgb(245, 245, 242);
}

.slika1 {
    float: left;
    margin-right: 10px;
    width: 30%; /* Postavlja širinu slike na 50% širine roditeljskog elementa */
    
 
    height: auto; /* Automatski određuje visinu kako bi zadržala omjer */
}

.clear {
    clear: both;
} /* Završava graičke usluge pop up prozor */

.sadrzaj {
    margin-left: 50px;    /* Postavljanje udaljenosti sadrzaja usluga čišćenje,peglanje... */
    padding-left: 50px;
    margin-top: 20px;
    



}

.sadrzaj h2 {
    font-size: 16px;
    color: #0c0c0c;
    display: inline-block;
    padding: 10px 20px;
    background-color: #d3e50d; /* Boja pozadine NASLOVA  */
    border-radius: 5px; /* Zaobljeni rubovi "dugmeta" */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sjenčanje za efekt podignutosti */
}
.sadrzaj li {
    font-size: 14px;
     
}

.container2 {
    width: 90%;
    margin: 50px auto 0;
    text-align: center; /* Centrira tekst unutar kontejnera */
    background-color: #77d4f6;
    border-radius: 5px;
    overflow: hidden;
    }
    .header2 {
    background-color: rgb(45, 115, 165);
    color: white;
    padding: 5px;
    text-align: center;
    }
    .content2 {
        display: flex;
        padding: 5px;
        justify-content: flex-start; /* Tekst će biti centriran horizontalno */
    }
    .content2 ul li {
        margin-bottom: 5px;
        text-align: left; 
    }
    .content2 img {
    width: 30%;
    height: 150px;
    
    margin-right: 20px;
    
    }
    .content2 p {
    flex: 1;
    
    
    }
    .nabrajanje {
        color: rgb(2, 2, 2);
        font-family: 'Times New Roman', Times, serif;
        font-size: 14px;}