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

/* Body */
body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    color: #333;
    line-height: 1.6;
}

/* Navigacija */
header {
    background-color: #004aad; /* tamno plava */
    padding: 15px 0;
}

header nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 30px;
}

header nav ul li a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    transition: color 0.3s;
}

header nav ul li a:hover {
    color: #ffd700; /* zlatna boja na hover */
}

/* Sekcije */
section {
    padding: 60px 20px;
    text-align: center;
}

section#pocetna {
    background-color: #e6f0ff; /* svetlo plava */
}

section#usluge {
    background-color: #ffffff; /* bela */
}

h1, h2 {
    margin-bottom: 20px;
}

/* Footer */
footer {
    background-color: #004aad;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
}
/* Destinacije kao kocke */
.destinacije-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.destinacija {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    background-color: #004aad;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    border-radius: 10px;
    transition: transform 0.3s, background-color 0.3s;
}

.destinacija:hover {
    background-color: #ffd700;
    color: #004aad;
    transform: scale(1.1);
}
.banner img {
    width: 100%;      
    height: auto;      
    border-radius: 10px; 
    margin-bottom: 20px; 
    display: block;    
}
.destinacije {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.destinacija-kocka {
    width: 250px;
    border: 2px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: transform 0.3s, box-shadow 0.3s;
    background-color: #fff;
}

.destinacija-kocka img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.destinacija-kocka h3 {
    font-size: 1.5em;
    margin: 10px 0;
}

.destinacija-kocka p {
    font-size: 0.9em;
    padding: 0 10px 10px 10px;
}

.destinacija-kocka .dugme {
    display: inline-block;
    margin: 10px 0 15px 0;
    padding: 10px 20px;
    background-color: #FF5733;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.destinacija-kocka .dugme:hover {
    background-color: #e04e2c;
    cursor: pointer;
}

.destinacija-kocka:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}
.banner-sekcija {
    background-image: url('slike/banner.jpg'); 
    background-size: cover;      
    background-position: center; 
    height: 400px;               
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: white;
    text-align: center;
}

.banner-sekcija .overlay {
    background-color: rgba(0,0,0,0.4); 
    padding: 20px;
    border-radius: 10px;
}
.ruta-slika {
    width: 100%;
    max-width: 400px; 
    height: auto; 
    display: block;
    margin-bottom: 10px; 
    border-radius: 5px; 
}
.cena {
    background-color: #e0f0ff; 
    padding: 10px 15px;
    margin-top: 10px;
    border-left: 4px solid #007BFF; 
    font-weight: bold;
    border-radius: 5px;
    max-width: 300px;
}
/* ===== Grid za rute Crne Gore ===== */
.rute-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    justify-items: center;
    margin-top: 30px;
}

/* ===== Pojedinačna ruta kao kocka ===== */
.ruta-kocka {
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: transform 0.3s, box-shadow 0.3s;
    padding-bottom: 15px;
    width: 220px;
}

.ruta-kocka img {
    width: 100%;
    height: 140px;
    object-fit: cover;
}

.ruta-kocka h3 {
    font-size: 1.1em;
    margin: 10px 0;
}

.ruta-kocka .cena {
    background-color: #e0f0ff;
    padding: 8px 10px;
    margin-top: 10px;
    border-left: 4px solid #007BFF;
    font-weight: bold;
    border-radius: 5px;
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
}

.ruta-kocka .dugme {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 15px;
    background-color: #FF5733;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.ruta-kocka .dugme:hover {
    background-color: #e04e2c;
    cursor: pointer;
}

.ruta-kocka:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

/* ===== Opcionalno: responsive tekst za cenu i dugme ===== */
@media (max-width: 600px) {
    .ruta-kocka {
        width: 100%;
    }
}
.hrvatska-uvod {
    padding: 60px 20px;
}

.tekst-sa-slikom {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.tekst-sa-slikom .tekst {
    flex: 1 1 400px;
    font-size: 18px;
    line-height: 1.8;
}

.tekst-sa-slikom .slika {
    flex: 1 1 300px;
}

.tekst-sa-slikom img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.tekst-sa-slikom.obrnuto {
    flex-direction: row-reverse;
}

/* Rute u kockicama, 4 u redu */
.hrvatska-rute .destinacije {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.hrvatska-rute .destinacija-kocka {
    width: 250px;
    border: 2px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: transform 0.3s, box-shadow 0.3s;
    background-color: #fff;
}

.hrvatska-rute .destinacija-kocka img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.hrvatska-rute .destinacija-kocka h3 {
    font-size: 1.2em;
    margin: 10px 0;
}

.hrvatska-rute .destinacija-kocka .dugme {
    display: inline-block;
    margin: 10px 0 15px 0;
    padding: 8px 15px;
    background-color: #FF5733;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.hrvatska-rute .destinacija-kocka .dugme:hover {
    background-color: #e04e2c;
    cursor: pointer;
}

.hrvatska-rute .destinacija-kocka:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

.hrvatska-rute .cena {
    background-color: #e0f0ff;
    padding: 10px 15px;
    margin-top: 10px;
    border-left: 4px solid #007BFF;
    font-weight: bold;
    border-radius: 5px;
}
/* Uvodni tekst sa slikom u sivkastoj kocki */
.tekst-sa-slikom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.tekst-sa-slikom.obrnuto {
    flex-direction: row-reverse; /* slika levo, tekst desno */
}

.tekst-sa-slikom .slika img {
    max-width: 400px;       /* veličina slike */
    width: 100%;
    border-radius: 15px;
}

.tekst-kocka {
    background-color: #f0f0f0; /* svetlosiva pozadina */
    padding: 30px;             /* unutrašnji razmak */
    border-radius: 15px;       /* zaobljeni uglovi */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* blaga senka */
    font-size: 1.2em;          /* veći tekst */
    line-height: 1.8;          /* veći razmak između linija */
    min-width: 300px;
}
.kolona.leva .tekst-kocka p,
.kolona.desna .tekst-kocka p {
    margin-bottom: 15px; /* unutrašnji razmak između pasusa unutar kocke */
}
.pasusi-container {
    display: flex;
    gap: 20px;               /* razmak između kolona */
    justify-content: center;
    align-items: flex-start; /* važno da pasusi ne iste visine */
    flex-wrap: wrap;         /* za responsive */
}

.kolona.leva, .kolona.desna {
    display: flex;
    flex-direction: column; /* pasusi jedan ispod drugog */
    gap: 0;              /* razmak između pasusa */
    flex: 1;                /* obe kolone zauzimaju proporcionalno mesto */
    min-width: 300px;       /* za responsive */
}
@media (max-width: 800px) {
    .pasusi-container {
        flex-direction: column; /* kolone jedna ispod druge */
    }
}
/* Dodatni stilovi za stranicu aerodrom */
.aerodrom-uvod {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px;
}

.aerodrom-uvod h1 {
    font-size: 2.5em;
    color: #004aad;
    margin-bottom: 40px;
}

/* Osiguraj da se dugme vidi lepo i van kockica */
.dugme {
    display: inline-block;
    padding: 12px 25px;
    background-color: #FF5733;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 20px;
    transition: 0.3s;
}

.dugme:hover {
    background-color: #e04e2c;
    transform: scale(1.05);
}
/* Kontejner koji drži tekst i sliku u istoj liniji */
.tekst-sa-slikom {
    display: flex;
    align-items: center;      /* Centrira sadržaj vertikalno */
    justify-content: space-between;
    gap: 40px;                /* Razmak između teksta i slike */
    margin-bottom: 50px;      /* Razmak između blokova */
    text-align: left;
}

/* Obezbeđuje da tekst i slika zauzmu po pola širine */
.tekst-sa-slikom .tekst-kocka, 
.tekst-sa-slikom .slika {
    flex: 1;
}

/* Stil za sliku da uvek popuni svoj prostor */
.tekst-sa-slikom .slika img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    display: block;
}

/* KLJUČNA STVAR: Ova klasa okreće redosled (Slika levo, Tekst desno) */
.tekst-sa-slikom.obrnuto {
    flex-direction: row-reverse;
}

/* Da na mobilnom telefonu ipak ide jedno ispod drugog (responzivnost) */
@media (max-width: 768px) {
    .tekst-sa-slikom, 
    .tekst-sa-slikom.obrnuto {
        flex-direction: column;
    }
}
/* Stil za veliki banner na vrhu stranice Aerodrom */
.aerodrom-banner {
    background-image: url('slike/aerodrom-pozadina.jpg'); /* Ime slike u folderu */
    background-size: cover;           /* Slika ispunjava ceo prostor */
    background-position: center;      /* Fokus slike je u sredini */
    background-repeat: no-repeat;
    height: 400px;                    /* Visina bannera */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.aerodrom-banner .overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Tamni sloj da bi se bela slova videla */
    padding: 30px;
    border-radius: 15px;
    color: white;
    text-align: center;
    max-width: 800px;
}

.aerodrom-banner h1 {
    font-size: 2.8em;
    margin-bottom: 15px;
    color: #fff !important; /* Forsiramo belu boju naslova */
}

.aerodrom-banner p {
    font-size: 1.2em;
    line-height: 1.5;
}
/* --- Stil za Cenovnik --- */

.cenovnik-sekcija {
    padding: 40px 20px;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.tabela-cena {
    width: 100%;
    border-collapse: collapse; /* Ovo spaja linije tabele da budu tanke */
    margin-top: 20px;
    background-color: #fff;
}

.tabela-cena th {
    background-color: #004aad; /* Plava boja kao u zaglavlju */
    color: white;
    padding: 15px;
    text-align: left;
}

.tabela-cena td {
    padding: 15px;
    border-bottom: 1px solid #ddd; /* Tanka siva linija između redova */
    text-align: left;
}

/* Zebra efekat - svaki drugi red je svetlo siv za lakše čitanje */
.tabela-cena tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Efekat kada pređeš mišem preko reda */
.tabela-cena tr:hover {
    background-color: #f1f5ff;
}
/* Stilovi za mreže i kontakt */
.drustvene-kontakt {
    padding: 60px 20px;
    background-color: #f8f9fa; /* Svetlo siva pozadina da se odvoji sekcija */
    text-align: center;
}

.drustvene-kontakt h3 {
    margin-bottom: 25px;
    color: #004aad;
}

.ikonice {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.mreza-link {
    padding: 10px 25px;
    border-radius: 30px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    transition: 0.3s;
}

.fb { background-color: #3b5998; }
.ig { background-color: #e4405f; }

.mreza-link:hover {
    transform: translateY(-5px);
    opacity: 0.9;
}

/* Email i Telefon stil */
.email-link, .tel-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 1.5em;
    color: #FF5733; /* Narandžasta kao na uzoru */
    text-decoration: none;
    font-weight: bold;
}

.email-link:hover, .tel-link:hover {
    text-decoration: underline;
}
.fb { background-color: #3b5998; }
.ig { background-color: #e4405f; }
.wa { background-color: #25D366; } /* Zelena boja za WhatsApp */
/* Srbija Hero Banner */
.srbija-banner {
    background-image: url('slike/srbija-pozadina.jpg');
    background-size: cover;
    background-position: center;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
}

.srbija-banner .overlay {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 35px;
    border-radius: 15px;
    max-width: 800px;
}

/* Kartice za rute */
.ruta-kartica {
    background: white;
    width: 280px;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: 0.3s;
    text-align: center;
}

.ruta-kartica:hover {
    transform: translateY(-10px);
}

.ruta-kartica img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

.ruta-kartica h4 {
    margin: 10px 0;
    color: #333;
}

.cena-tag {
    font-size: 1.2em;
    font-weight: bold;
    color: #FF5733;
    margin: 10px 0;
}

.dugme-mala {
    display: inline-block;
    padding: 8px 18px;
    background-color: #004aad;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 0.9em;
}
/* Hero sekcija za rute */
.ruta-banner {
    background-size: cover;
    background-position: center;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
}

.ruta-banner .overlay {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 30px;
    border-radius: 10px;
    max-width: 700px;
}

/* Posebna slika za Novi Sad */
.novi-sad-bg {
    background-image: url('slike/novi-sad-pozadina.jpg');
}
/* Posebna slika za Niš banner */
.nis-bg {
    background-image: url('slike/nis-pozadina.jpg');
}
.kragujevac-bg {
    background-image: url('slike/kragujevac-pozadina.jpg');
}
.kopaonik-bg {
    background-image: url('slike/kopaonik-pozadina.jpg');
}
.zlatibor-bg {
    background-image: url('slike/zlatibor-pozadina.jpg');
}
/* Pozadina za Crnu Goru */
.cg-bg {
    background-image: url('slike/cg-pozadina.jpg'); /* Stavi neku sliku zaliva ili mora */
    background-size: cover;
    background-position: center;
}
/* Parallax sekcija sa slikom kombija */
.parallax-usluge {
    position: relative;
    background-image: linear-gradient(rgba(0, 32, 74, 0.8), rgba(0, 32, 74, 0.8)), url('slike/pozadina-kombi.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 20px;
    color: white;
}

.parallax-sadrzaj {
    max-width: 1300px;
    margin: 0 auto;
    text-align: center;
}

.parallax-sadrzaj h2 {
    font-size: 2.8em;
    margin-bottom: 60px;
    color: #ffffff;
}

/* Grid koji automatski slaže 5 kartica */
.usluge-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center; /* Centriranje donje dve kartice */
}

.usluga-kartica {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 35px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.4s ease;
    flex: 1 1 calc(33.333% - 30px); /* Tri kartice u redu */
    min-width: 300px;
    text-align: left;
}

.usluga-kartica:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.15);
    border-color: #ffcc00;
}

.usluga-kartica h3 {
    color: #ffcc00;
    margin-bottom: 20px;
    font-size: 1.5em;
    border-left: 4px solid #ffcc00;
    padding-left: 15px;
}

.usluga-kartica p {
    line-height: 1.7;
    font-size: 1.05em;
    color: #f0f0f0;
}

.link-usluga {
    display: inline-block;
    margin-top: 20px;
    color: #ffcc00;
    text-decoration: none;
    font-weight: bold;
}

/* Prilagođavanje za mobilne telefone */
@media (max-width: 1000px) {
    .usluga-kartica {
        flex: 1 1 calc(50% - 30px); /* Dve kartice u redu */
    }
}

@media (max-width: 700px) {
    .parallax-usluge { background-attachment: scroll; } /* Bolje performanse na mobilnom */
    .usluga-kartica {
        flex: 1 1 100%; /* Jedna kartica u redu */
    }
}
.parallax-usluge {
    position: relative;
    /* Smanjili smo belu sa 0.9 na 0.4 - sada se slika vidi 60% jasnije */
    background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url('slike/pozadina-kombi.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 20px;
}

.parallax-sadrzaj h2 {
    font-size: 3em;
    margin-bottom: 60px;
    color: #00204a; /* Tamno plava da "odskoči" od slike */
    text-shadow: 2px 2px 4px rgba(255,255,255,0.8); /* Beli sjaj oko slova za bolju čitljivost */
    text-align: center;
}

.usluga-kartica {
    /* Kartice su sada potpuno bele i neprovidne da bi tekst bio 100% čitljiv preko slike */
    background: #ffffff; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.2); /* Jača senka za dubinu */
    padding: 35px;
    border-radius: 20px;
    transition: all 0.4s ease;
    flex: 1 1 calc(33.333% - 30px);
    min-width: 300px;
    border-top: 6px solid #FF5733; 
}

.usluga-kartica:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 45px rgba(0,0,0,0.3);
}

.usluga-kartica h3 {
    color: #FF5733;
    margin-bottom: 20px;
    font-size: 1.5em;
    font-weight: bold;
}

.usluga-kartica p {
    color: #333; /* Tamniji tekst za maksimalnu čitljivost */
    line-height: 1.7;
}
/* Hero sekcija preko celog ekrana */
.hero-full {
    height: 100vh; /* Zauzima 100% visine ekrana */
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 50%, #00204a 50%); /* Zanimljiva podeljena pozadina */
    overflow: hidden;
    padding-top: 80px; /* Da navigacija ne prekriva sadržaj */
}

.hero-kontejner {
    display: flex;
    max-width: 1200px;
    width: 100%;
    align-items: center;
    padding: 0 20px;
}

/* Leva strana - Slika */
.hero-levo {
    flex: 1;
    text-align: center;
    animation: fadeInLeft 1s ease-out;
}

.hero-slika {
    max-width: 110%; /* Malo veća slika da izađe iz okvira */
    height: auto;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.2));
}

/* Desna strana - Tekst */
.hero-desno {
    flex: 1;
    padding-left: 50px;
    color: white;
    animation: fadeInRight 1s ease-out;
}

.hero-naslov {
    font-size: 4em;
    font-weight: 900;
    margin-bottom: 20px;
    line-height: 1.1;
    color: #FFcc00; /* Zlatna boja za ime */
}

.hero-podnaslov {
    font-size: 1.3em;
    line-height: 1.6;
    margin-bottom: 30px;
    opacity: 0.9;
}

/* Dugmići u Hero sekciji */
.hero-dugmici {
    display: flex;
    gap: 20px;
}

.dugme-hero {
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
    text-transform: uppercase;
    font-size: 0.9em;
}

.dugme-hero:first-child {
    background: #FF5733;
    color: white;
}

.dugme-hero.poziv {
    background: transparent;
    border: 2px solid white;
    color: white;
}

.dugme-hero:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Animacije za ulazak */
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Responzivnost za mobilni */
@media (max-width: 900px) {
    .hero-full {
        height: auto;
        padding: 100px 20px;
        background: #00204a; /* Na mobilnom bolje jedna tamna boja */
    }
    .hero-kontejner {
        flex-direction: column; /* Slika iznad teksta */
        text-align: center;
    }
    .hero-desno {
        padding-left: 0;
        margin-top: 40px;
    }
    .hero-naslov { font-size: 2.8em; }
    .hero-dugmici { justify-content: center; flex-direction: column; }
}
/* Stilovi za O nama */
.o-nama-hero {
    height: 400px;
    background: linear-gradient(rgba(0, 32, 74, 0.7), rgba(0, 32, 74, 0.7)), url('slike/o-nama-hero.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
}

.o-nama-hero h1 { font-size: 3.5em; margin-bottom: 10px; }

.o-nama-detaljno { padding: 80px 20px; max-width: 1200px; margin: 0 auto; }

.kontejner-flex {
    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}

.o-nama-tekst { flex: 1; min-width: 300px; }
.nadnaslov { color: #FF5733; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; }
.o-nama-tekst h2 { font-size: 2.5em; margin: 15px 0; color: #00204a; }
.o-nama-tekst p { line-height: 1.8; color: #555; margin-bottom: 15px; }

.o-nama-slika { flex: 1; min-width: 300px; }
.o-nama-slika img { width: 100%; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }

/* Statistika */
.statistika {
    background: #00204a;
    color: white;
    display: flex;
    justify-content: space-around;
    padding: 60px 20px;
    text-align: center;
    flex-wrap: wrap;
}

.stat-stavka { padding: 20px; }
.broj { display: block; font-size: 3em; font-weight: bold; color: #FFcc00; }
.opis { font-size: 1.1em; opacity: 0.8; }

/* Vrednosti */
.vrednosti { padding: 80px 20px; text-align: center; background: #f8f9fa; }
.vrednosti h2 { margin-bottom: 50px; font-size: 2.5em; color: #00204a; }

.vrednosti-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.vrednost-kartica {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: 0.3s;
}

.vrednost-kartica:hover { transform: translateY(-10px); }
.ikona { font-size: 3em; margin-bottom: 20px; display: block; }
.vrednost-kartica h3 { margin-bottom: 15px; color: #00204a; }

/* Dizajn Kontakt Stranice */
.kontakt-sekcija-nova {
    padding: 100px 20px;
    background-color: #fcfcfc; /* Veoma svetlo siva, skoro bela */
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.kontakt-kontejner {
    max-width: 1100px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

/* Leva kolona */
.kontakt-info h1 {
    font-size: 2.8em;
    color: #00204a;
    margin: 10px 0 20px;
}

.nadnaslov {
    color: #FF5733;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.kontakt-info p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 40px;
}

.info-stavke {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.stavka {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ikona-krug {
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.stavka h3 {
    font-size: 1.1em;
    color: #00204a;
    margin: 0;
}

.stavka p a {
    color: #666;
    text-decoration: none;
    transition: 0.3s;
}

.stavka p a:hover { color: #FF5733; }

/* Desna kolona (Forma) */
.kontakt-forma-okvir {
    background: #ffffff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

.polje-grupa {
    margin-bottom: 20px;
}

.polje-grupa label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
    font-size: 0.9em;
}

.polje-grupa input, 
.polje-grupa textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: inherit;
    transition: 0.3s;
}

.polje-grupa input:focus, 
.polje-grupa textarea:focus {
    border-color: #FF5733;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 87, 51, 0.1);
}

.dugme-slanje {
    width: 100%;
    padding: 15px;
    background: #00204a;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s;
}

.dugme-slanje:hover {
    background: #FF5733;
    transform: translateY(-2px);
}

/* Mobilna verzija */
@media (max-width: 900px) {
    .kontakt-kontejner {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .kontakt-info { text-align: center; }
    .stavka { justify-content: center; text-align: left; }
}

/* Blog Stranica */
.blog-hero {
    background: #00204a;
    color: white;
    padding: 80px 20px;
    text-align: center;
}

.blog-hero h1 { font-size: 3em; margin-bottom: 10px; color: #FFcc00; }

.blog-kontejner {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
}

.blog-mreza {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
}

.blog-kartica {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: 0.3s;
}

.blog-kartica:hover { transform: translateY(-10px); }

.blog-slika-okvir { position: relative; height: 220px; }
.blog-slika-okvir img { width: 100%; height: 100%; object-fit: cover; }

.blog-kategorija {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: #FF5733;
    color: white;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 0.8em;
    font-weight: bold;
}

.blog-sadrzaj { padding: 25px; }
.blog-sadrzaj h3 { color: #00204a; margin-bottom: 15px; font-size: 1.4em; }
.blog-sadrzaj p { color: #666; line-height: 1.6; font-size: 0.95em; margin-bottom: 20px; }

.procitaj-vise {
    color: #FF5733;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    border-bottom: 2px solid transparent;
    transition: 0.3s;
}

.procitaj-vise:hover { border-bottom: 2px solid #FF5733; }

.lista-drzava-sekcija {
    padding: 80px 20px;
    background: #fdfdfd;
}

.uvod-blog {
    font-size: 1.2em;
    color: #555;
    margin-bottom: 50px;
    border-bottom: 2px solid #FF5733;
    padding-bottom: 20px;
}

.drzava-kartica-tekst {
    margin-bottom: 40px;
}

.drzava-kartica-tekst h2 {
    color: #00204a;
    font-size: 2em;
    margin-bottom: 15px;
}

.drzava-kartica-tekst p {
    font-size: 1.1em;
    line-height: 1.7;
    color: #444;
    margin-bottom: 10px;
}

.poziv-kontakt {
    background: #00204a;
    color: white;
    padding: 40px;
    text-align: center;
    border-radius: 15px;
    margin-top: 60px;
}

.dugme-narandzasto {
    display: inline-block;
    padding: 12px 30px;
    background: #FF5733;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 15px;
}


/* Moderni Grid za Destinacije */
.destinacije-grid-sekcija {
    padding: 100px 20px;
    background: #f4f7f9;
}

.naslov-grupa {
    text-align: center;
    margin-bottom: 60px;
}

.naslov-grupa h1 {
    color: #00204a;
    font-size: 2.8em;
    margin-bottom: 10px;
}

.destinacije-mreza {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.drzava-kartica-moderna {
    background: #fff;
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: 0.3s;
    text-align: center;
    border-top: 5px solid #FF5733;
}

.drzava-kartica-moderna:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

.drzava-ikona {
    font-size: 3em;
    margin-bottom: 15px;
}

.drzava-kartica-moderna h3 {
    color: #00204a;
    font-size: 1.8em;
    margin-bottom: 25px;
}

.termin-okvir {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 15px;
    text-align: left;
}

.sezona {
    display: block;
    color: #FF5733;
    font-weight: bold;
    font-size: 0.9em;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.termin-okvir p {
    font-size: 0.95em;
    color: #666;
    margin: 0;
}

.centralna-akcija {
    text-align: center;
    margin-top: 60px;
}

.glavno-dugme {
    padding: 18px 40px;
    background: #00204a;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    font-size: 1.1em;
    transition: 0.3s;
}

.glavno-dugme:hover {
    background: #FF5733;
}


/* Dizajn Destinacija sa velikim slikama */
.destinacije-hero {
    background: #00204a;
    padding: 100px 20px;
    text-align: center;
    color: white;
}

.destinacije-mreza-slike {
    display: flex;
    flex-direction: column; /* Ređamo ih jednu ispod druge ali kao moćne blokove */
    gap: 15px;
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.drzava-kartica-velika {
    height: 350px;
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    display: flex;
    align-items: flex-end;
    padding: 40px;
    color: white;
    transition: 0.3s ease;
    cursor: pointer;
}

.drzava-kartica-velika:hover {
    transform: scale(1.01);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.info-preko-slike h2 {
    font-size: 2.5em;
    margin-bottom: 5px;
}

.vreme-bedz {
    display: inline-block;
    background: #FF5733;
    padding: 5px 15px;
    border-radius: 50px;
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 0.9em;
    text-transform: uppercase;
}

.info-preko-slike p {
    font-size: 1.1em;
    max-width: 600px;
    line-height: 1.5;
}

.akcija-kraj {
    text-align: center;
    padding: 60px 20px;
}

.dugme-poziv {
    background: #FF5733;
    color: white;
    padding: 15px 40px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    font-size: 1.2em;
}
.destinacija-tekst p {
    margin-bottom: 20px; /* Veći razmak između pasusa */
    text-align: justify; /* Da tekst bude poravnat sa obe strane, izgleda ozbiljnije */
}

.destinacija-tekst h2 {
    margin-top: 10px;
    line-height: 1.2;
}

.najbolje-vreme {
    background: #fff5f2; /* Blaga pozadina za termin da se istakne */
    padding: 10px;
    border-radius: 5px;
    border-left: 4px solid #FF5733;
}



.cik-cak-sekcija {
    padding: 60px 20px;
    max-width: 1300px; /* Povećavamo ukupnu širinu da popunimo ekran */
    margin: 0 auto;
}

.destinacija-red {
    display: flex;
    align-items: flex-start; /* Poravnanje uz vrh da tekst može da teče */
    gap: 40px; /* Smanjen razmak između slike i teksta */
    margin-bottom: 80px;
}

.destinacija-red.obrnuto {
    flex-direction: row-reverse;
}

.destinacija-slika {
    flex: 0 0 40%; /* Slika sada zauzima samo 40% širine, umesto pola */
    max-width: 450px; /* Ograničavamo maksimalnu veličinu slike */
}

.destinacija-slika img {
    width: 100%;
    height: 300px; /* Smanjena visina slike da ne zauzima previše vertikalnog prostora */
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.destinacija-tekst {
    flex: 1; /* Tekst sada zauzima preostalih 60% prostora */
    padding-top: 10px;
}

.destinacija-tekst h2 {
    color: #00204a;
    font-size: 2.2em;
    margin-bottom: 15px;
    border-bottom: 2px solid #FF5733; /* Podvlačimo naslov za bolji vizuelni efekat */
    display: inline-block;
}

.najbolje-vreme {
    background: #fff5f2;
    padding: 8px 15px;
    border-radius: 5px;
    color: #FF5733;
    font-weight: bold;
    margin-bottom: 20px;
    display: block;
    width: fit-content;
}

.destinacija-tekst p {
    color: #333;
    line-height: 1.6;
    font-size: 1.1em;
    margin-bottom: 15px;
    text-align: left; /* Promenjeno sa justify na left da izbegnemo velike rupe među rečima */
}

/* Prilagođavanje za manje ekrane */
@media (max-width: 900px) {
    .destinacija-red, .destinacija-red.obrnuto {
        flex-direction: column;
    }
    .destinacija-slika {
        flex: 1;
        max-width: 100%;
    }
}


.soping-hero-modern {
    background: #00204a;
    color: white;
    padding: 80px 20px;
    text-align: center;
}

.soping-sadrzaj-sekcija {
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.soping-red {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 100px;
}

.soping-red.obrnuto {
    flex-direction: row-reverse;
}

.soping-slika {
    flex: 0 0 45%;
}

.soping-slika img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.soping-tekst-blok {
    flex: 1;
}

.drzava-tag {
    color: #FF5733;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 1px;
}

.soping-tekst-blok h2 {
    font-size: 2.5em;
    color: #00204a;
    margin: 10px 0 20px 0;
}

.soping-tekst-blok p {
    font-size: 1.1em;
    line-height: 1.7;
    color: #444;
    margin-bottom: 15px;
}

.soping-poziv {
    background: #f4f7f9;
    padding: 80px 20px;
    text-align: center;
    border-top: 1px solid #eee;
}

.dugme-narandzasto {
    display: inline-block;
    background: #FF5733;
    color: white;
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    margin-top: 20px;
    transition: 0.3s;
}

.dugme-narandzasto:hover {
    background: #00204a;
}

@media (max-width: 850px) {
    .soping-red, .soping-red.obrnuto { flex-direction: column; text-align: center; }
    .soping-slika { flex: 1; width: 100%; }
}


/* --- ZIMOVANJE STRANICA --- */

.zimski-hero {
    background: linear-gradient(rgba(0,32,74,0.6), rgba(0,32,74,0.6)), url('slike/zimski-hero-bg.jpg');
    background-size: cover;
    background-position: center;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.hero-sadrzaj-zima h1 {
    font-size: 3.5em;
    margin-bottom: 20px;
    text-shadow: 2px 2px 15px rgba(0,0,0,0.5);
}

.hero-sadrzaj-zima p {
    font-size: 1.4em;
    font-weight: 300;
}

/* Stilovi za cik-cak sekciju su već ranije definisani, 
   ovde dodajemo samo zimske nijanse */

.najbolje-vreme {
    background: #eef6ff;
    padding: 10px 15px;
    border-radius: 5px;
    color: #00204a;
    display: inline-block;
    margin-bottom: 20px;
    border-left: 5px solid #00a8ff; /* Plava boja za zimu */
}

.zimska-akcija {
    background: #00204a;
    padding: 80px 20px;
    color: white;
    text-align: center;
}

.akcija-kontejner {
    max-width: 800px;
    margin: 0 auto;
}

.akcija-kontejner h2 {
    font-size: 2.8em;
    margin-bottom: 20px;
}

.dugme-zima-narandzasto {
    display: inline-block;
    background: #FF5733;
    color: white;
    padding: 18px 45px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    font-size: 1.2em;
    margin-top: 30px;
    transition: 0.3s;
}

.dugme-zima-narandzasto:hover {
    background: #e64a19;
    transform: scale(1.05);
}

.zimski-footer {
    text-align: center;
    padding: 30px;
    background: #001533;
    color: #888;
    font-size: 0.9em;
}

/* Responzivnost */
@media (max-width: 768px) {
    .hero-sadrzaj-zima h1 { font-size: 2.2em; }
    .zimski-hero { height: 300px; }
}


/* Glavni kontejner padajućeg menija */
.dropdown-content {
    display: none; /* Sakriveno dok se ne pređe mišem */
    position: absolute;
    background-color: #ffffff;
    width: 1100px; /* Širina da stanu svih 5 država */
    box-shadow: 0px 15px 35px rgba(0,0,0,0.2);
    z-index: 9999;
    padding: 30px;
    border-radius: 12px;
    left: 50%;
    transform: translateX(-50%); /* Centriranje u odnosu na roditelja */
    border-top: 5px solid #FF5733; /* Narandžasti akcenat na vrhu */
    align-items: flex-start; /* Poravnanje kolona uz vrh */
}

/* Prikazivanje na hover */
.dropdown:hover .dropdown-content {
    display: flex; /* Koristimo flex da poređamo države jednu pored druge */
    justify-content: space-between;
}

/* Stil za svaku državu (kolonu) */
.drzava-sekcija {
    flex: 1; /* Svaka država zauzima jednak deo prostora */
    padding: 0 10px;
    min-width: 180px; /* Sprečava da se kolone previše suze */
}

/* Naslov države unutar menija */
.drzava-naslov {
    display: block;
    font-size: 1.1em;
    font-weight: 800;
    color: #00204a;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f0f0f0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Lista linkova destinacija */
.sub-destinacije {
    display: flex;
    flex-direction: column; /* Linkovi idu jedan ispod drugog */
}

.sub-destinacije a {
    color: #444 !important; /* Tamno siva boja teksta */
    text-decoration: none;
    font-size: 0.95em;
    padding: 5px 0;
    transition: all 0.2s ease;
    display: block;
}

/* Efekat kada se pređe mišem preko destinacije */
.sub-destinacije a:hover {
    color: #FF5733 !important; /* Menja boju u narandžastu */
    padding-left: 8px; /* Blago se pomeri udesno */
}

/* Strelica pored reči "Destinacije" u navigaciji */
.strelica-dole {
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 2px;
    transform: rotate(45deg);
    margin-left: 5px;
    margin-bottom: 3px;
}

/* Prilagođavanje za manje ekrane (laptopove) */
@media (max-width: 1200px) {
    .dropdown-content {
        width: 95vw; /* Zauzima 95% širine ekrana na manjim rezolucijama */
    }
}

/* Prvi nivo - lista država */
.dropdown-vertikalni {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 200px;
    list-style: none;
    padding: 0;
    margin: 0;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
    z-index: 1000;
    border-top: 3px solid #FF5733;
}

/* Prikaži države kada pređeš preko 'Destinacije' */
.dropdown:hover .dropdown-vertikalni {
    display: block;
}

/* Svaka država u listi */
.drzava-stavka {
    position: relative; /* Ključno za pozicioniranje destinacija pored */
    border-bottom: 1px solid #f0f0f0;
}

.drzava-stavka a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    color: #333;
    text-decoration: none;
    font-weight: bold;
}

.drzava-stavka:hover > a {
    color: #FF5733;
    background-color: #f9f9f9;
}

/* Drugi nivo - lista konkretnih destinacija */
.podmeni-destinacije {
    display: none; /* Sakriveno */
    position: absolute;
    top: 0;
    left: 100%; /* Ovo ga gura DESNO od države */
    background-color: #fff;
    min-width: 220px;
    list-style: none;
    padding: 10px 0;
    box-shadow: 8px 8px 16px rgba(0,0,0,0.1);
    border-left: 2px solid #FF5733;
}

/* Prikaži destinacije kada pređeš preko države */
.drzava-stavka:hover .podmeni-destinacije {
    display: block;
}

.podmeni-destinacije li a {
    padding: 8px 20px;
    font-weight: normal;
    font-size: 0.9em;
    display: block;
}

.podmeni-destinacije li a:hover {
    background-color: #fff5f2;
    padding-left: 25px; /* Mali efekat pomeranja na desno */
}

/* Ikone strelica */
.strelica-desno {
    border: solid #ccc;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-45deg);
}

.drzava-stavka:hover .strelica-desno {
    border-color: #FF5733;
}

/* Cela sekcija destinacija */
#destinacije {
    background-color: #f8f9fa; /* Veoma svetla siva, tek da odvoji sekciju */
    padding: 60px 20px;
    text-align: center;
}

#destinacije h2 {
    margin-bottom: 40px;
    font-size: 2.5em;
    color: #00204a;
}

/* Kontejner za kocke */
.destinacije {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px; /* Razmak između kartica */
    max-width: 1200px; /* Ograničavamo širinu celog reda */
    margin: 0 auto;
}

/* Pojedinačna kartica - OVDE FIKSIRAMO VELIČINU */
.destinacija-kocka {
    background: white;
    width: 280px; /* Fiksna širina da ne bi rasle */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* Suptilna senka */
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    text-align: left; /* Tekst unutar kartice levo poravnat */
}

/* Hover efekat - podizanje kartice */
.destinacija-kocka:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

/* Slike unutar kockica */
.destinacija-kocka img {
    width: 100%;
    height: 180px; /* Fiksna visina slike */
    object-fit: cover; /* Sprečava razvlačenje slike */
}

/* Tekst i dugme unutar kartice */
.destinacija-kocka h3 {
    padding: 15px 15px 5px 15px;
    margin: 0;
    font-size: 1.3em;
}

.destinacija-kocka p {
    padding: 0 15px;
    font-size: 0.9em;
    color: #666;
    line-height: 1.4;
    flex-grow: 1; /* Gura dugme ka dnu ako je tekst kraći */
}

.destinacija-kocka .dugme {
    margin: 15px;
    padding: 10px;
    text-align: center;
    display: block;
    text-decoration: none;
    background: #00204a;
    color: white;
    border-radius: 5px;
    font-weight: bold;
    transition: 0.3s;
}

.destinacija-kocka .dugme:hover {
    background: #FF5733; /* Narandžasta na hover */
}

/* Prilagođavanje za telefone i tablete */
@media (max-width: 768px) {
    
    /* 1. Hero sekcija - tekst ide ispod slike umesto pored */
    .hero-kontejner {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .hero-levo, .hero-desno {
        width: 100%;
    }

    .hero-slika {
        max-width: 250px; /* Smanjujemo sliku kombija na telefonu */
        margin-bottom: 20px;
    }

    .hero-naslov {
        font-size: 2em;
    }

    /* 2. Destinacije - jedna kocka u redu umesto tri */
    .destinacije {
        flex-direction: column;
        align-items: center;
    }

    .destinacija-kocka {
        width: 90%; /* Kocka zauzima skoro ceo ekran telefona */
    }

    /* 3. Usluge - Grid postaje jedna kolona */
    .usluge-grid {
        grid-template-columns: 1fr !important;
        padding: 10px;
    }

    /* 4. Navigacija - Sklanjamo onaj komplikovani meni na mobilnom */
    /* NAPOMENA: Za pravi mobilni meni (hamburger) treba nam malo JavaScripta, 
       ali za početak ćemo samo složiti linkove jedan ispod drugog */
    nav ul {
        flex-direction: column;
        gap: 10px;
        padding: 20px 0;
    }

    .dropdown-vertikalni {
        position: static; /* Meni se više ne preklapa nego gura sadržaj dole */
        width: 100%;
        box-shadow: none;
    }
    
    .podmeni-destinacije {
        position: static;
        width: 100%;
    }
}

/* --- HAMBURGER STIL --- */
.hamburger-meni {
    display: none; /* Sakriveno na kompjuteru */
    flex-direction: column;
    cursor: pointer;
    padding: 15px;
    gap: 5px;
    z-index: 1100;
}

.hamburger-meni span {
    width: 30px;
    height: 4px;
    background-color: #FF5733; /* Narandžaste crtice */
    border-radius: 2px;
}

/* --- MOBILNA PRILAGODBA (Ispod 768px širine) --- */
@media (max-width: 768px) {
    .hamburger-meni {
        display: flex; /* Prikaži crtice na mobilnom */
    }

    /* Sakrivamo navigaciju i stavljamo je da klizi odozgo */
    #nav-lista {
        display: none; 
        flex-direction: column;
        position: absolute;
        top: 70px; /* Visina tvog zaglavlja */
        left: 0;
        width: 100%;
        background-color: #00204a; /* Tamno plava kao tvoj sajt */
        padding: 20px 0;
        z-index: 1000;
    }

    /* Klasa koju JavaScript pali/gasi */
    #nav-lista.aktivna {
        display: flex;
    }

    #nav-lista li {
        width: 100%;
        text-align: center;
        padding: 10px 0;
    }

    /* Sređujemo dropdown da se ne preklapa na mobilnom */
    .dropdown-vertikalni {
        position: static;
        display: block; /* Na mobilnom neka odmah vidi države */
        box-shadow: none;
        background: #003366;
        width: 100%;
    }

    .podmeni-destinacije {
        position: static; /* Destinacije idu ispod države, ne desno */
        display: none; /* Sakriveno dok se ne klikne na državu */
        width: 100%;
        background: #004080;
    }
    
    /* Prikazivanje destinacija na klik/hover države na mobilnom */
    .drzava-stavka:hover .podmeni-destinacije {
        display: block;
    }
}

/* Stil za veliko Viber dugme */
.viber-dugme-veliko {
    display: inline-block;
    background-color: #7360f2;
    color: white;
    padding: 18px 35px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 35px;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(115, 96, 242, 0.3);
}

.viber-dugme-veliko:hover {
    background-color: #5e4db2;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(115, 96, 242, 0.5);
}

/* Osiguraj da se dugmad u plavoj sekciji lepo slažu na mobilnom */
.dugme {
    display: inline-block;
    padding: 12px 20px;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    min-width: 180px; /* Da bi sva dugmad bila slične širine */
    text-align: center;
}

/* Specifično rešenje za mobilni prikaz na stranici Aerodrom Beograd */
@media screen and (max-width: 768px) {
    /* Ciljamo glavni kontejner na toj stranici */
    /* Ako se tvoj glavni kontejner zove drugačije (npr .hero), promeni ime */
    
    .aerodrom-sekcija, 
    main section:first-of-type,
    .content-wrapper {
        margin-top: 80px !important; /* Gura sadržaj ispod navbara */
        padding-top: 20px !important;
        display: block !important; /* Osigurava da se margin primeni */
    }

    /* Ako je tekst "Privatni transfer..." u h1 tagu, dajemo mu dodatni prostor */
    h1 {
        padding-top: 10px !important;
        line-height: 1.2 !important;
    }
}

/* Na desktopu je nevidljiv */
.mobilni-razmak {
    display: none;
}

/* Na mobilnom pravi "branu" da tekst ne ode pod navigaciju */
@media screen and (max-width: 768px) {
    .mobilni-razmak {
        display: block;
        height: 120px; /* Ovo je sigurna visina da preskočiš te 3 crtice */
    }
}

/* Media Query - Pravila koja važe SAMO za mobilne telefone i tablete */
@media screen and (max-width: 768px) {
    
    /* Menjamo boju imena država i gradova u padajućem meniju SAMO NA MOBILNOM */
    .dropdown-vertikalni a, 
    .podmeni-destinacije a {
        color: #ffffff !important; /* Bela slova za tamnu mobilnu pozadinu */
        font-weight: 500;
        display: block;
        padding: 12px 20px;
        text-decoration: none;
    }

    /* Strelica na mobilnom */
    .drzava-stavka i {
        color: #ffcc00 !important;
    }

    /* Hover efekat na mobilnom (kad se klikne) */
    .dropdown-vertikalni a:hover, 
    .podmeni-destinacije a:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: #ffcc00 !important;
    }

    /* Aktivna stranica na mobilnom */
    .active-sub {
        color: #ffcc00 !important;
        font-weight: bold !important;
    }
}

/* Ovdje možeš dodati pravila za desktop ako želiš da tamo slova budu crna */
@media screen and (min-width: 769px) {
    .dropdown-vertikalni a, 
    .podmeni-destinacije a {
        color: #333333; /* Tamno siva/crna slova za kompjuter */
    }
}
@media screen and (max-width: 768px) {
    /* Gađamo opisni tekst na početnoj stranici */
    /* Proveri da li tvoj div ima klasu npr. .hero-text ili .intro-text */
    
    .hero p, 
    .intro p, 
    section:first-of-type p {
        color: #1a1a1a !important; /* Tamno siva/crna za beli/svetli background */
        font-weight: 500 !important; /* Malo deblja slova radi čitljivosti */
        line-height: 1.5 !important;
        background-color: rgba(255, 255, 255, 0.4); /* Suptilna bela "oblačić" pozadina */
        padding: 10px;
        border-radius: 8px;
    }

    /* Ako je naslov "SuperKombi Prevoz" žut i slabo se vidi na svetlom */
    .hero h2, .intro h2 {
        color: #d9a300 !important; /* Malo tamnija nijansa žute/zlatne */
        text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    }
}

@media screen and (max-width: 768px) {
    /* Precizno gađamo dugme preko tvojih klasa */
    .dugme-hero.poziv {
        color: #003399 !important; /* Tamno plava slova */
        border: 2px solid #003399 !important; /* Tamno plavi okvir */
        background-color: transparent !important; /* Providna pozadina */
        font-weight: bold !important;
        text-transform: uppercase;
        padding: 12px 20px !important;
        display: block !important; /* Da zauzme ceo red na mobilnom radi lakšeg klika */
        width: 80% !important; /* Da ne bude baš od ivice do ivice */
        margin: 10px auto !important; /* Centrira ga i pravi razmak od gornjeg dugmeta */
        text-align: center;
        text-decoration: none;
        border-radius: 30px !important;
    }

    /* Opciono: Sređivanje prvog dugmeta (Pogledaj destinacije) da imaju isti razmak */
    .dugme-hero:not(.poziv) {
        display: block !important;
        width: 80% !important;
        margin: 20px auto 10px auto !important; /* Veći razmak iznad prvog dugmeta */
        text-align: center;
    }
}


@media screen and (max-width: 768px) {
    /* Glavni kontejner za ikonice */
    .ikonice {
        display: flex !important;
        flex-wrap: wrap !important; /* Ključno: prebacuje u novi red */
        justify-content: center !important; /* Centrira ikonice */
        gap: 10px !important; /* Razmak između njih */
        padding: 20px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Pojedinačni linkovi (dugmići) */
    .mreza-link {
        flex: 1 1 140px !important; /* Minimalna širina pre nego što pukne u novi red */
        max-width: 160px !important; /* Da ne budu preširoki na velikim telefonima */
        text-align: center !important;
        padding: 12px 5px !important;
        font-size: 14px !important;
        border-radius: 25px !important;
        text-decoration: none !important;
        display: inline-block !important;
    }
}

@media screen and (max-width: 768px) {
    /* Glavni boks (overlay) - ostaje svetao ali sa jasnim ivicama */
    .aerodrom-banner .overlay, 
    .overlay {
        background: rgba(255, 255, 255, 0.9) !important; /* Skoro čista bela podloga */
        padding: 25px 15px !important;
        border-radius: 15px !important;
        width: 85% !important;
        margin: 0 auto !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important; /* Blaga senka da boks "iskoči" */
        display: block !important;
    }

    /* NASLOV - stavljamo tamno plavu da se vidi na belom */
    .overlay h1, 
    .aerodrom-banner h1 {
        color: #003399 !important; /* Tamno plava boja tvog brenda */
        font-size: 22px !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }

    /* TEKST ISPOD - čista crna za maksimalan kontrast */
    .overlay p, 
    .aerodrom-banner p {
        color: #1a1a1a !important; 
        font-size: 16px !important;
        line-height: 1.4 !important;
        background: transparent !important; /* Brišemo onaj mali beli overlap zauvek */
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }
}

@media screen and (max-width: 768px) {
    /* 1. Pomeramo banner skroz gore uz navigaciju */
    section.aerodrom-banner {
        margin-top: 0 !important;
        padding-top: 10px !important; /* Minimalni razmak tek da ne dodiruje ivicu */
    }

    /* Ako smo ranije dodali onaj .mobilni-razmak div, smanjujemo mu visinu */
    .mobilni-razmak {
        height: 60px !important; /* Dovoljno samo da preskoči visinu fiksnog navbara */
        display: block;
    }

    /* 2. Povećavamo glavni naslov unutar bele kocke */
    .overlay h1, 
    .aerodrom-banner h1 {
        color: #003399 !important;
        font-size: 28px !important; /* Povećano sa 22px na 28px */
        line-height: 1.2 !important;
        font-weight: 800 !important; /* Ekstremno debela slova za bolji utisak */
        margin-bottom: 12px !important;
        text-transform: none; /* Da ne budu sva velika slova ako ne želiš */
    }

    /* Dodatno: Smanjujemo prazan prostor unutar overlay-a da ne bude preogroman */
    .overlay {
        padding: 15px !important;
        margin-top: 0 !important;
    }
}

@media screen and (max-width: 768px) {
    /* 1. Osiguravamo da roditeljska stavka može da primi fokus */
    .drzava-stavka {
        position: relative;
    }

    /* 2. Sakrivamo podmeni standardno */
    .podmeni-destinacije {
        display: none !important;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    /* 3. TRIK: Kada se klikne (fokusira) na link ili državu, prikaži podmeni */
    .drzava-stavka:focus-within .podmeni-destinacije,
    .drzava-stavka:active .podmeni-destinacije {
        display: block !important;
        visibility: visible;
        opacity: 1;
        position: static; /* Da pogura ostale stavke nadole, a ne da se preklapa */
    }

    /* 4. Opciono: Dodaj malu strelicu pored država koje imaju podmeni da ljudi znaju da kliknu */
    .drzava-stavka > a::after {
        content: ' ▼';
        font-size: 10px;
        vertical-align: middle;
    }
}

@media screen and (max-width: 768px) {
    /* Ciljamo SVAKI element unutar overlay-a koji bi mogao imati pozadinu */
    .overlay *, 
    .o-nama-overlay *, 
    .destinacija-hero-content * {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        display: block; /* Da tekstovi budu jedan ispod drugog */
        margin: 5px auto;
    }

    /* Vraćamo pozadinu SAMO glavnom okviru */
    .overlay, 
    .o-nama-overlay, 
    .destinacija-hero-content {
        background: rgba(255, 255, 255, 0.95) !important;
        padding: 25px 15px !important;
        border-radius: 15px !important;
        width: 85% !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
    }
}

/* Ovo potamnjuje pozadinu iza teksta da bi bela slova "iskočila" */
.o-nama-overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Crna boja sa 50% providnosti */
    padding: 20px;
    border-radius: 10px; /* Malo zaobljeni uglovi da lepše izgleda */
}

/* Ovo dodaje senku direktno na naslov za svaki slučaj */
.o-nama-hero h1 {
    color: #ffffff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
    margin-bottom: 10px;
}

.o-nama-hero p {
    color: #ffffff;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
}

@media (max-width: 480px) {
    .o-nama-hero h1 {
        font-size: 28px; /* Smanji broj dok ne stane u kocku */
        word-wrap: break-word; /* Ovo prisiljava dugačke reči da se preleme ako baš moraju */
    }
}

@media (max-width: 480px) {
    /* Sakrivamo onaj mali podmeni sa državama i gradovima na telefonu */
    .dropdown-vertikalni, .podmeni-destinacije {
        display: none !important;
    }

    /* Obezbeđujemo da glavni link "Destinacije" ostane vidljiv i klikabilan */
    .dropdown > a {
        pointer-events: auto; /* Dozvoljava klik */
    }
}

@media (max-width: 480px) {
    /* Sakrivamo strelicu pored reči Destinacije na telefonu */
    .strelica-dole, .strelica-desno {
        display: none !important;
    }
}