/* Resetovanje osnovnih stilova */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    padding-top: 155px;
}

/* Heder u beloj boji */
header {
    background-color: white; /* Bela pozadina za header */
    color: #89cced; /* Ovaj stil može ostati ili promeniti, zavisno od boje teksta */
    padding: 10px 0;
    position: relative; /* Potrebno za pozicioniranje hamburger menija */
    z-index: 10; /* Dodajemo z-index na header da bi bio ispred slajdova */
    border-bottom: 10px solid #2980b9; /* Linija ispod hedera visine 10px u boji #2980b9 */
    position: fixed; /* Postavlja header na vrh ekrana */
    width: 100%;
    top: 0;
    left: 0;
}


/* Raspored u header-u */
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;

}

/* Logo */
.logo img {
    max-height: 120px; /* Povećana visina logotipa */
    width: auto; /* Automatski prilagođava širinu prema visini */
    border-radius: 5px;
    border: 3px solid white; /* Okvir oko loga */
    padding: 5px;
}

/* Navigacija */
.navigation {
    display: flex; /* Za velike ekrane, navigacija je horizontalna */
    list-style: none;
    z-index: 20; /* Navigacija treba da ima veći z-index od slajdova */
}

/* Dugme za zatvaranje menija */
.close-btn {
    display: none; /* Po defaultu, dugme je skriveno */
    font-size: 30px;
    color: #2980b9;
    position: absolute;
    top: 10px; /* Pomerite dugme 10px od vrha menija */
    right: 10px; /* Pomerite dugme 10px od desnog ruba */
    cursor: pointer;
    z-index: 30; /* Dugme je ispred svih drugih elemenata menija */
}

/* Kada je meni otvoren, dugme postaje vidljivo */
.navigation.open .close-btn {
    display: block;
}

/* Navigacija za desktop (velike ekrane) */
.navigation {
    display: flex; /* Navigacija je horizontalna na velikim ekranima */
    list-style: none;
    z-index: 20; /* Navigacija treba da ima veći z-index od slajdova */
}

.navigation ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navigation ul li {
    margin-left: 20px;
}

/* Slova u meniju - boja #2980b9 */
.navigation ul li a {
    color: #2980b9; /* Boja teksta u meniju */
    text-decoration: none;
    font-size: 16px;
    padding: 10px 15px;
    transition: all 0.3s ease; /* Dodavanje glatke animacije */
}

/* Hover efekat - okvir u boji #2980b9 */
.navigation ul li a:hover {
    color: #ffffff;
    background-color: #2980b9; /* Bela pozadina kada se pređe mišem */
    border: 2px solid #202733; /* Dodavanje okvira u boji #2980b9 */
    border-radius: 4px; /* Zaobljeni ivici okvira */
}

/* Hamburger meni (samo za male ekrane) */
.hamburger {
    display: none; /* Skriveno na velikim ekranima */
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    position: absolute; /* Pozicioniraj hamburger meni u header */
    right: 20px; /* Pomeranje hamburger menija sa desne strane */
    top: 50%; /* Centriraj hamburger meni po visini */
    transform: translateY(-50%); /* Da bi bio tačno u centru */
}

.hamburger .line {
    background-color: #2980b9;
    height: 4px;
    width: 100%;
    border-radius: 5px;
}

/* Responsivnost - Mobilni uređaji (manje od 768px) */
@media (max-width: 768px) {
    .container {
        flex-direction: row; /* Drži logotip i hamburger meni u istoj liniji */
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }

    /* Kada je ekran manji od 768px, meni postaje vertikalan i sakriven */
    .navigation {
        display: none; /* Po defaultu, meni je sakriven */
        position: fixed; /* Pozicioniranje menija na ekranu */
        right: 0;
        top: 0;
        background-color: #2980b9;
        width: 250px;
        height: 100vh; /* Puna visina ekrana */
        transform: translateX(100%); /* Skriva meni sa desne strane */
        transition: transform 0.3s ease; /* Glatka animacija za otvaranje */
        flex-direction: column; /* Stavke će biti vertikalno */
    }

    /* Kada se doda klasa 'open', meni izlazi */
    .navigation.open {
        transform: translateX(0); /* Pomeri meni u prikazivanje */
        display: block; /* Dodajemo display: block da bi meni postao vidljiv */
        padding-top: 60px;
    }

    .navigation ul {
        display: block;
        padding: 0;
        margin: 0;
        list-style-type: none; /* Uklanjanje bullet tačaka */
    }

    .navigation ul li {
        margin-left: 0;
        margin-bottom: 10px;
        text-align: center; /* Poravnanje linkova na sredinu */
    }

    .navigation ul li a {
        display: block;
        padding: 15px;
        text-align: center;
        color: #ffffff; /* Boja teksta */
        text-decoration: none;
        font-size: 18px;
    }

    .navigation ul li a:hover {
        background-color: #2980b9; /* Bela pozadina kada je hover aktivan */
        border: 2px solid #ffffff; /* Okvir u boji #2980b9 */
        border-radius: 5px; /* Zaobljeni ivici okvira */
    }

    /* Prikazivanje hamburger menija */
    .hamburger {
        display: flex;
    }

    /* Dugme za zatvaranje menija */
    .close-btn {
        display: none; /* Po defaultu, dugme je skriveno */
        font-size: 30px;
        color: #ffffff;
        position: absolute;
        top: 10px; /* Pomerite dugme 10px od vrha menija */
        right: 10px; /* Pomerite dugme 10px od desnog ruba */
        cursor: pointer;
        z-index: 30; /* Dugme je ispred svih drugih elemenata menija */
    }

    /* Kada je meni otvoren, dugme postaje vidljivo */
    .navigation.open .close-btn {
        display: block;
    }
}


/* Slideshow */
.slideshow {
    max-width: 100%;
    position: relative;
    margin-top: 20px; /* Razmak između hedera i slideshow-a */
    z-index: 1; /* Slajdovi sada imaju manji z-index od menija */
}

.slideshow-container {
    position: relative;
    max-width: 100%;
    overflow: hidden;
}

.slide {

    display: none;
    text-align: center; /* Centriramo slike unutar slajda */
    position: relative; /* Neophodno za postavljanje ::before */

}

/* Dodavanje zatamnjenja preko slika */
.slide::before {
    content: ''; /* Prazan sadržaj za pseudo-element */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3); /* Bela boja sa prozirnošću */
    z-index: 2; /* Postavljanje pseudo-elementa iznad slike */

}

/* Slike sa zaobljenim ivicama */
.slide img {
    width: 90%; /* Smanjujemo širinu slika */
    height: 300px; /* Smanjujemo visinu slika */
    object-fit: cover; /* Ovaj stil osigurava da slike popune prostor */
    border-radius: 15px; /* Dodajemo zaobljene ivice */
    margin: 0 auto; /* Centriramo slike */
    display: block;
    z-index: 1; /* Postavljamo sliku ispod zatamnjenja */
}

/* Stil za liniju sa tekstom */
.line-with-text {
    width: 100%; /* Linija treba da bude u širini cele stranice */
    height: 50px; /* Postavite visinu linije isto kao header */
    background-color: #2980b9; /* Linija u boji #2980b9 */
    display: flex; /* Koristimo flexbox za poravnavanje teksta */
    align-items: center; /* Centriramo tekst vertikalno unutar linije */
    justify-content: center; /* Poravnanje teksta horizontalno */
    margin: 20px 0; /* Razmak iznad i ispod linije */
}

/* Stil za tekst unutar linije */
.line-with-text span {
    font-size: 20px; /* Veličina teksta */
    color: white; /* Boja teksta */
    font-weight: bold; /* Podebljan tekst */
    text-align: center;
    text-transform: uppercase; /* Velika slova */
}


/* Horizontalna linija */
.line-with-text::before {
    content: ''; /* Kreira prazni element pre teksta */
    position: absolute; /* Pozicionirajte liniju */
    left: 0;
    width: 100%; /* Širina linije */
    border-bottom: 2px solid #2980b9; /* Linija u boji #2980b9 */
    z-index: -1; /* Stavljamo liniju ispod teksta */
}

/* Stil za pasus */
.pasus {
    max-width: 1200px; /* Maksimalna širina pasusa */
    margin: 20px auto; /* Centriranje pasusa i razmak sa drugih elemenata */
    padding: 20px;
}

/* Stil za tekst unutar pasusa */
.pasus1 {
    font-size: 16px; /* Veličina teksta */
    color: #202733; /* Boja teksta */
    line-height: 2; /* Razmak između redova */
    text-align: justify; /* Poravnanje teksta sa obe strane */
}

/* Stil za podebljan tekst */
.pasus1 b {
    font-weight: bold; /* Povećanje težine fonta za <b> tag */
}

/* Stil za liniju sa tekstom */
.line-with-text2 {
    width: 100%; /* Linija treba da bude u širini cele stranice */
    height: 50px; /* Postavite visinu linije isto kao header */
    background-color: #2980b9; /* Linija u boji #2980b9 */
    display: flex; /* Koristimo flexbox za poravnavanje teksta */
    align-items: center; /* Centriramo tekst vertikalno unutar linije */
    justify-content: center; /* Poravnanje teksta horizontalno */
    margin: 20px 0; /* Razmak iznad i ispod linije */
}

/* Stil za tekst unutar linije */
.line-with-text2 span {
    font-size: 20px; /* Veličina teksta */
    color: white; /* Boja teksta */
    font-weight: bold; /* Podebljan tekst */
    text-align: center;
    text-transform: uppercase; /* Velika slova */
}


/* Horizontalna linija */
.line-with-text2::before {
    content: ''; /* Kreira prazni element pre teksta */
    position: absolute; /* Pozicionirajte liniju */
    left: 0;
    width: 100%; /* Širina linije */
    border-bottom: 2px solid #2980b9; /* Linija u boji #2980b9 */
    z-index: -1; /* Stavljamo liniju ispod teksta */
}

/* Stil za raspored fotografija i pasusa */
.photo-grid {
    display: flex;
    flex-wrap: wrap; /* Omogućava prelamanje reda */
    justify-content: space-between; /* Razmak između stavki */
    gap: 20px; /* Razmak između fotografija */
    max-width: 1200px; /* Maksimalna širina celog grida */
    margin: 20px auto; /* Centriranje na stranici */
    padding: 10px;
}

/* Stil za raspored fotografija i pasusa */
.photo-grid {
    display: flex;
    flex-wrap: wrap; /* Omogućava prelamanje reda */
    gap: 20px; /* Razmak između stavki */
    max-width: 1200px; /* Maksimalna širina celog grida */
    margin: 20px auto; /* Centriranje na stranici */
    padding: 10px;
    justify-content: space-between; /* Razmak između stavki */
}

/* Stil za svaku fotografiju i njen opis */
.photo-item {
    flex: 1 1 calc(50% - 20px); /* Dve stavke po redu */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Dodavanje senke */
    border-radius: 10px; /* Zaobljene ivice */
    padding: 10px;
    background-color: #202733; /* Svetla pozadina */
}

/* Stil za slike */
.photo-item img {
    width: 15%;
    height: auto;
    max-height: 300px; /* Maksimalna visina slika */
    border-radius: 10px; /* Zaobljene ivice slika */
    object-fit: cover;
}

/* Stil za tekst ispod slika */
.photo-item p {
    margin-top: 10px;
    font-size: 14px;
    color: #fff; /* Boja teksta */
    line-height: 2;
}

/* Klasa za deo sa plavom pozadinom */
.plavi-deo {
    background-color: #2980b9; /* Plava boja pozadine */
    color: white; /* Bela boja teksta za bolju čitljivost */
    padding: 20px; /* Razmak unutar sekcije */
    border-radius: 10px; /* Zaobljene ivice */
    margin: 0px 0px; /* Razmak iznad i ispod sekcije */
}

/* Stil za footer */
.site-footer {
    background-color: #202733; /* Boja pozadine */
    color: #ffffff; /* Boja teksta */
    text-align: center; 
    padding: 20px 0;
    font-size: 14px;
}

/* Stil za potpis dizajnera */
.designer-signature {
    font-size: 12px; /* Manja veličina teksta za potpis */
    margin-top: 5px; /* Razmak između glavnog teksta i potpisa */
    color: #2980b9; /* Boja teksta kao i donja linija */
}

/* Stil za link dizajnera */
.designer-signature a {
    color: #2980b9; 
    text-decoration: none; 
}

.designer-signature a:hover {
    text-decoration: underline; 
}

/* Osiguraj da telo stranice ima minimalnu visinu 100vh (100% visine ekrana) */
html, body {
    height: 100%;
}

/* Ako koristiš main element, možeš dodati i ovo */
main {
    min-height: calc(100vh - 120px); /* Ukupna visina ekrana minus visina hedera i footera */
    padding-bottom: 20px; /* Razmak između sadržaja i footera */
}

/* Pozicioniranje dugmadi na levoj strani stranice */
.side-buttons {
    position: fixed; /* Fiksira dugmadi sa strane */
    left: 0; /* Drži dugmadi sa leve strane */
    top: 40%; /* Postavlja dugmadi vertikalno u sredinu */
    transform: translateY(-50%); /* Poravnava vertikalno na sredinu */
    display: flex; /* Koristimo flexbox za raspored dugmadi */
    flex-direction: column; /* Stavke će biti vertikalno raspoređene */
    gap: 20px; /* Razmak između dugmadi */
    z-index: 1000; /* Osigurava da dugmadi budu ispred drugih elemenata */
    margin-left: 10px;
}

.button {
    display: block; /* Osigurava da su dugmadi blokovi */
    background-color: #2db45a; /* Pozadina dugmadi */
    padding: 10px;
    border-radius: 20%; /* Zaobljeni dugmadi */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Dodavanje senke za efekat */
    transition: background-color 0.3s ease; /* Glatka promena boje */
}

.button2 {
    display: block; /* Osigurava da su dugmadi blokovi */
    background-color: #db3450; /* Pozadina dugmadi */
    padding: 10px;
    border-radius: 20%; /* Zaobljeni dugmadi */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Dodavanje senke za efekat */
    transition: background-color 0.3s ease; /* Glatka promena boje */
}

.button:hover {
    background-color: #202733; /* Svetlija boja pri hover-u */
}

.button2:hover {
    background-color: #202733; /* Svetlija boja pri hover-u */
}

.icon {
    width: 35px; /* Veličina ikona */
    height: 35px;
    object-fit: contain; /* Da ikona bude u potpunosti unutar dugmeta */
    background-color: transparent; /* Pozadina dugmadi */
    
}