/* O S N O V N I   S T I L O V I */
* {
    box-sizing: border-box; /* Uključuje padding i border u ukupnu širinu/visinu elemenata */
    margin: 0; /* Uklanja sve zadane margine sa elemenata */
}

html,
body {
    height: 100%; /* Postavlja visinu stranice na punu visinu prozora */
    margin: 0; /* Uklanja praznine oko stranice */
}

body {
    display: flex; /* Omogućuje fleksibilno raspoređivanje sadržaja */
    flex-direction: column; /* Raspored elemenata u stupcu */
    background-size: cover; /* Slika pokriva cijelu pozadinu */
    background-attachment: fixed; /* Slika ostaje fiksna pri skrolanju */
}

header {
    color: white; /* Tekst u headeru bijele boje */
    width: 100%; /* Header zauzima punu širinu */
}

.inner-header {
    max-width: 1140px; /* Maksimalna širina sadržaja u headeru */
    margin: 0 auto; /* Centriranje po sredini */
    padding: 10px; /* Unutarnji razmak */
    display: flex; /* Flexbox za raspored loga i navigacije */
    align-items: center; /* Vertikalno poravnanje */
    justify-content: space-between; /* Raspoređuje elemente lijevo i desno */
}

#logo {
    height: 100px; /* Visina logotipa */
}

nav {
    display: flex; /* Prikaz navigacijskih linkova u jednom redu */
    gap: 12px; /* Razmak između linkova */
}

nav a {
    color: white; /* Boja teksta bijela */
    text-decoration: none; /* Uklanja podcrtavanje linka */
    font-size: 16px; /* Veličina fonta */
}

nav a:hover {
    transform: scale(1.05); /* Blago povećanje linka pri prelasku mišem */
    color: #dddddd; /* Svjetlija boja teksta pri hoveru */
}

main {
    flex: 1; /* Zauzima preostali prostor u fleks kontejneru */
    display: flex; /* Omogućuje fleksibilni raspored */
    flex-direction: column; /* Raspored u stupcu */
}

footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
    gap: 300px; /* Dodaj gap za razmak između elemenata */
}

footer p {
    color: white; /* Tekst bijele boje */
    text-align: center; /* Centrirani tekst */
}

/* I N D E X */

#prviDiv {
    width: 100%; /* Zauzima cijelu širinu */
    max-width: 1080px; /* Maksimalna širina */
    margin: 60px auto 0 auto; /* Centriranje i razmak od vrha */
    padding: 0 20px; /* Bočni razmaci */
    display: flex; /* Flexbox raspored */
    flex-wrap: wrap; /* Prelamanje elemenata */
    align-items: flex-end; /* Poravnanje na dno */
}

#prviNaslov {
    flex: 1 1 300px; /* Element zauzima fleksibilan prostor, s početnom i minimalnom širinom od 300px */
    color: white; /* Bijeli tekst */
    font-size: 45px; /* Veliki font */
    margin-bottom: 10px; /* Razmak ispod naslova */
    margin-left: 30px; /* Razmak s lijeve strane */
}

#tekst1 {
    flex: 1 1 300px; /* Fleksibilna širina */
    background-color: rgba(0, 0, 0, 0.8); /* Tamna prozirna pozadina */
    box-shadow: 0 0 20px rgba(0, 0, 0, 1); /* Sjena oko bloka */
    border-radius: 30px; /* Zaobljeni rubovi */
    color: white; /* Bijeli tekst */
    padding: 20px; /* Unutarnji razmak */
    margin-right: 15px; /* Razmak s desne strane */
    text-align: justify; /* Poravnanje teksta */
    font-size: 18px; /* Veličina fonta */
    opacity: 1; /* Potpuna vidljivost */
    text-align: justify; /* Poravnanje s obje strane */
}

#drugiDiv {
    max-width: 1000px; /* Maksimalna širina */
    width: 95%; /* Zauzima 95% širine */
    margin: 60px auto 0 auto; /* Centriranje s razmakom odozgo */
    display: flex; /* Flexbox */
    gap: 20px; /* Razmak između elemenata */
    flex-wrap: wrap; /* Prelamanje redova */
    margin-bottom: 40px; /* Razmak ispod bloka */
}

.tekst2 {
    flex: 1 1 300px; /* Fleksibilna širina */
    background-color: rgba(0, 0, 0, 0.8); /* Tamna pozadina */
    box-shadow: 0 0 20px rgba(0, 0, 0, 1); /* Sjena */
    color: white; /* Bijeli tekst */
    padding: 20px; /* Unutarnji razmak */
    border-radius: 15px; /* Zaobljeni rubovi */
    min-width: 250px; /* Minimalna širina */
    font-size: 17px; /* Veličina fonta */
    line-height: 1.4; /* Razmak između redova */
}

#slideshow {
    margin: auto; /* Centriranje */
    max-width: 1000px; /* Maksimalna širina */
    width: 90%; /* Širina */
    background-color: rgba(0, 0, 0, 0.8); /* Tamna pozadina */
    box-shadow: 0 0 20px rgba(0, 0, 0, 1); /* Sjena */
    border-radius: 10px; /* Zaobljeni rubovi */
    padding: 20px; /* Unutarnji razmak */
    box-sizing: border-box; /* Uključuje padding u dimenzije */
}

.slidefotke {
    max-width: 100%; /* Maksimalna širina slike */
    width: 100%; /* Puna širina */
    padding: 0; /* Nema unutarnjeg razmaka */
    margin: 20px auto; /* Razmak i centriranje */
    display: block; /* Blok element */
    border-radius: 10px; /* Zaobljeni rubovi */
}

#treciDiv {
    max-width: 1000px; /* Maksimalna širina */
    width: 95%; /* Širina kontejnera */
    margin: auto; /* Centriranje */
    display: flex; /* Flexbox */
    flex-wrap: wrap; /* Prelamanje */
    justify-content: space-between; /* Raspodjela prostora */
    gap: 40px; /* Razmak između elemenata */
    padding-bottom: 50px; /* Donji razmak */
}

#radnoVrijeme {
    background-color: rgba(0, 0, 0, 0.8); /* Tamna pozadina */
    box-shadow: 0 0 20px rgba(0, 0, 0, 1); /* Sjena */
    width: 100%; /* Puna širina */
    max-width: 480px; /* Maksimalna širina */
    color: white; /* Bijeli tekst */
    padding: 20px; /* Unutarnji razmak */
    border-radius: 30px; /* Zaobljeni rubovi */
    text-align: center; /* Centrirani tekst */
}

#lokacija {
    flex: 1; /* Fleksibilna širina */
    max-width: 1000px; /* Maksimalna širina */
    min-width: 250px; /* Minimalna širina */
    color: white; /* Bijeli tekst */
    background-color: rgba(0, 0, 0, 0.8); /* Tamna pozadina */
    box-shadow: 0 0 20px rgba(0, 0, 0, 1); /* Sjena */
    padding: 20px; /* Unutarnji razmak */
    border-radius: 30px; /* Zaobljeni rubovi */
    margin: 0 auto; /* Centriranje */
}

#lokacija iframe {
    width: 100%; /* Puna širina */
    height: 350px; /* Visina */
    border: none; /* Bez okvira */
    border-radius: 15px; /* Zaobljeni rubovi */
}

/* J E L O V N I K */
#jelovnik {
    max-width: 1000px; /* Maksimalna širina bloka */
    width: 100%; /* Puna širina unutar dozvoljene granice */
    margin: 50px auto; /* Centriranje i razmak od vrha i dna */
    background-color: rgba(0, 0, 0, 0.8); /* Tamna prozirna pozadina */
    box-shadow: 0 0 20px rgba(0, 0, 0, 1); /* Sjena oko okvira */
    color: white; /* Boja teksta bijela */
    padding: 5px; /* Unutarnji razmak */
    border-radius: 10px; /* Zaobljeni rubovi */
    margin-top: 20px; /* Gornji razmak */
    margin-bottom: 20px; /* Donji razmak */
}

.naslov {
    text-align: center; /* Centriranje naslova */
    color: white; /* Bijela boja teksta */
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; /* Debeli i upečatljiv font */
}

.info {
    display: flex; /* Flexbox raspored za red informacija o jelu */
    justify-content: space-between; /* Raspoređuje elemente lijevo-desno */
    align-items: center; /* Poravnanje po sredini po visini */
    flex-wrap: wrap; /* Prelamanje sadržaja */
    line-height: 2.2; /* Visina reda za čitljivost */
}

.sastojci {
    font-style: italic; /* Kurziv za sastojke */
}

.cijena {
    text-align: end; /* Poravnanje cijene desno */
}

/* W E B S H O P */
.container {
    max-width: 1000px; /* Maksimalna širina kontejnera */
    width: 100%; /* Puna širina */
    background-color: rgba(0, 0, 0, 0.8); /* Tamna pozadina */
    box-shadow: 0 0 20px rgba(0, 0, 0, 1); /* Sjena */
    padding: 10px; /* Unutarnji razmak */
    border-radius: 10px; /* Zaobljeni rubovi */
    color: #fff; /* Bijeli tekst */
    margin: auto; /* Centriranje */
    margin-top: 20px; /* Razmak odozgo */
    margin-bottom: 20px; /* Razmak odozdo */
}

.product-grid {
    display: flex; /* Prikaz proizvoda */
    flex-wrap: wrap; /* Prelamanje proizvoda */
    gap: 20px; /* Razmak između proizvoda */
    justify-content: center; /* Centriranje */
}

.product {
    flex: 1 1 300px; /* Fleksibilna širina */
    max-width: 32%; /* Najveća širina elementa */
    background-color: #242424; /* Tamno siva pozadina proizvoda */
    border-radius: 10px; /* Zaobljeni rubovi */
    padding: 15px; /* Unutarnji razmak */
    text-align: center; /* Centrirani tekst */
    box-sizing: border-box; /* Uključuje padding i border u širinu */
}

.product img {
    width: 100%; /* Slika ispunjava širinu proizvoda */
    max-height: 200px; /* Ograničenje visine */
    object-fit: cover; /* Slika se popunjava bez izobličenja */
    border-radius: 8px; /* Zaobljeni rubovi slike */
}

.popust-label {
    position: absolute; /* Apsolutno pozicioniranje oznake */
    top: -1px; /* Pomak prema gore */
    right: -5px; /* Pomak udesno */
    width: 70px; /* Širina oznake */
    height: 70px; /* Visina oznake */
    border-radius: 50%; /* Okrugli oblik */
    object-fit: contain; /* Prikaz slike bez izrezivanja */
    max-height: unset; /* Nema ograničenja visine */
    width: 70px !important; /* Forsirana širina oznake */
}

.price {
    margin: 10px 0; /* Razmak iznad i ispod */
    font-size: 16px; /* Veličina fonta */
    font-weight: bold; /* Debeli font */
    color: white; /* Bijela boja */
    font-family: Arial, Helvetica, sans-serif; /* Font */
}

.btn {
    background-color: rgb(5, 5, 5); /* Tamna pozadina gumba */
    color: white; /* Bijeli tekst */
    border: none; /* Bez okvira */
    padding: 10px 20px; /* Unutarnji razmak */
    border-radius: 5px; /* Zaobljeni rubovi */
    font-weight: 900; /* Vrlo podebljani tekst */
    text-align: center; /* Centrirani tekst */
}

.btn:hover {
    transform: scale(1.05); /* Efekt povećanja gumba pri hoveru */
}

.image-wrapper {
    position: relative; /* Relativno pozicioniranje za oznake */
    width: 100%; /* Puna širina */
    max-width: 300px; /* Maksimalna širina slike */
    border-radius: 10px; /* Zaobljeni rubovi */
    overflow: hidden; /* Sakriva sadržaj izvan granica */
}

.pizza-image {
    width: 100%; /* Puna širina slike */
    display: block; /* Prikaz slike kao bloka */
    border-radius: 10px; /* Zaobljeni rubovi slike */
}

/* G A L E R I J A */
#galerija {
    max-width: 1300px; /* Maksimalna širina galerije */
    margin: 50px auto; /* Centriranje i razmak odozgo i odozdo */
    display: flex; /* Prikaz u fleks redovima */
    flex-wrap: wrap; /* Prelamanje slika */
    gap: 20px; /* Razmak između slika */
    justify-content: center; /* Centriranje slika */
}

.slika {
    padding: 5px; /* Unutarnji razmak */
    box-sizing: border-box; /* Uključuje padding i border u širinu */
    width: 350px; /* Širina bloka sa slikom */
    height: 250px; /* Visina bloka sa slikom */
    border-radius: 20px; /* Zaobljeni rubovi */
    background-color: rgba(0, 0, 0, 0.8); /* Tamna pozadina */
    box-shadow: 0 0 20px rgba(0, 0, 0, 1); /* Sjena */
}

.slika:hover {
    transform: scale(1.03); /* Efekt povećanja slike pri hoveru */
}

.slika img {
    width: 330px; /* Širina slike */
    height: 230px; /* Visina slike */
    display: block; /* Prikaz kao blok */
    object-fit: cover; /* Ispunjavanje bez izobličenja */
    margin: auto; /* Cijela slika centrirana */
    margin-top: 5px; /* Gornji razmak */
    border-radius: 20px; /* Zaobljeni rubovi slike */
}

/* R E G I S T R A C I J A */
#forma {
    width: 490px; /* Širina forme */
    height: 450px; /* Visina forme */
    background-color: rgba(0, 0, 0, 0.8); /* Tamna pozadina */
    box-shadow: 0 0 20px rgba(0, 0, 0, 1); /* Sjena */
    margin: 0 auto; /* Centriranje */
    margin-top: 100px; /* Razmak odozgo */
    margin-bottom: 70px; /* Razmak odozdo */
    text-align: center; /* Centrirani sadržaj */
    border-radius: 20px; /* Zaobljeni rubovi */
}

h1 {
    color: white; /* Bijela boja naslova */
    margin-top: 70px; /* Razmak odozgo */
}

.input {
    width: 200px; /* Širina input polja */
    height: 25px; /* Visina inputa */
    text-align: center; /* Centriran tekst unutar inputa */
    border-radius: 10px; /* Zaobljeni rubovi */
    margin-top: 20px; /* Razmak između polja */
    color: white; /* Bijeli tekst */
}

.input:hover {
    background-color: rgb(32, 32, 32); /* Promjena boje pozadine pri hoveru */
    transform: scale(1.05); /* Efekt povećanja inputa */
}