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

/* Osnovni stilovi za telo stranice */
 body {
   font-family: sans-serif;
    background-color: beige;
}
.container {
    max-width: 90rem;
    padding: 0 1rem;
    margin: 0 auto;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    justify-content: space-between;
   
}
#preloader {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
  }
  
  #preloader img {
    max-width: 90%;
    max-height: 90%;
    width: auto;
    height: auto;
    animation: rotate 5s linear infinite;
  }
  
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
/* navigacija za velike ekrane */
 .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(50, 205, 50); /* Dodata zelena pozadina */
    padding: 5px 5px; /* Povećaj padding za veću navigaciju */
}

.logo img {
    display: block; /* Prikaz loga na velikim ekranima */
    max-width: 90px;
    max-height: 75px;
}

.menu {

    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

.menu li {
    margin: 15px; /* Povećaj razmak između stavki */
    position: relative;
}

.menu li a {
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-decoration: none;
    color: beige;
    font-size: 20px;
    position: relative;
    transition: color 0.3s; /* Animacija za hover */
}

.menu li a:hover {
    color: rgb(251, 249, 52); /* Promena boje na hover */
}

.menu li:first-child a {
    color: #fbf934; /* Početna u RGB(255, 204, 29) */
}

.menu li:first-child a:after {
    content: "";
    display: block;
    width: 100%;
    height: 3px; /* Povećaj debljinu linije ispod Početna */
    background: #fbf934; /* Linija ispod Početna */
    margin-top: 5px; /* Povećaj razmak od Početna */
    transition: transform 0.3s; /* Animacija za liniju */
}

.menu li:first-child a:hover:after {
    transform: scaleX(1.2); /* Skala efekat za liniju na hover */
}



.icon {
    display: none; /* Ikonica je sakrivena na velikim ekranima */
}

.icon i {
    font-size: 30px; /* Veličina ikone */
    color: beige; /* Boja ikone */
    cursor: pointer;
}

/* Stilovi za male ekrane */
@media (max-width: 768px) {
    .logo {
        display: none; /* Sakriva logo na malim ekranima */
    }
   
    
    .menu {
        flex-direction: column;
        align-items: center; /* Poravnanje menija na sredinu */
        transform: translateX(-100%); /* Sakrij meni izvan leve strane ekrana */
        position: fixed; /* Promenjeno iz absolute u fixed */
        top: 0; /* Postavljanje na vrh ekrana */
        left: 0; /* Postavljanje na levu stranu */
        background-color: #32cd32; /* Boja pozadine */
        width: 100%; /* Širina menija pokriva ceo ekran */
        height: 100%; /* Visina menija pokriva ceo ekran */
        justify-content: center;
        z-index: 1000; /* Osigurava da meni bude iznad drugih elemenata */
        transition: transform 0.5s ease; /* Dodaj animaciju za prikazivanje menija */
        gap: 20px;
    }
    

    .menu.open {
        transform: translateX(0); /* Prikazivanje menija */
    }
/* Stilovi za liniju ispod "Početna" na malim ekranima */ 
.menu li:first-child a:after { 
    width: 30%; /* Podesi širinu linije na 60% */ 
    margin: 0 auto; /* Centriraj liniju */ 
    left: 0;
     right: 0; } 


.menu li:first-child a:hover:after { 
    transform: scaleX(1.2); /* Ukloni efekat skale na hover */ }


    .menu li {
        margin-left: 0;
        margin-bottom: 10px;
        width: 100%; /* Osigurava da svaka stavka menija zauzima ceo red */
        text-align: center; /* Poravnanje teksta u centru */
    }

    .menu li:last-child {
        margin-right: 0; /* Resetovanje margine za poslednji element */
    }

    .menu li a {
        
        font-size: 30px;
        text-align: center; /* Poravnanje teksta u centru */
        display: block; /* Osigurava blok element za centriranje */
        width: 100%; /* Širina elementa da zauzima ceo red */
    }

    .icon {
        display: flex; /* Prikazuje ikonicu na malim ekranima */
        justify-content: flex-start; /* Postavljanje na levu stranu */
        width: auto; /* Podesi širinu ikone */
        z-index: 1100;
        
    }
}


/* HERO SEKCIJA */
.hero {
    position: relative;
    width: 100%;
    height: 100vh; /* Visina hero sekcije */
    overflow: hidden;
}
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Zatemnjeni overlay */
    top: 0;
    left: 0;
}
.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: opacity 1s;
}
.content {
    position: absolute; /* Fiksno pozicioniranje */
    top: 50%; /* Vertikalno centriranje */
    left: 50px; /* Horizontalna pozicija od leve strane */
    transform: translateY(-50%); /* Vertikalno poravnanje po centru */
    z-index: 3;
    max-width: 800px;
    color: beige;
    text-align: left; /* Tekst ostaje levo poravnat */
}
.content p {
   
    font-size: 20px; /* Veći font */
    color: beige; /* Svetlija nijansa koja asocira na svežinu */
    font-family: 'Lato', sans-serif; /* Promena fonta */
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 1s, transform 1s; /* Dodavanje tranzicije */
}

.content p:first-child::after {
   
    position: absolute;
    transform: translateY(-50%);
    width: 6cm;
    height: 2px;
}

.content h1 {
    margin-top: 8px;
    font-size: 60px; /* Veći font */
    max-width: 800px;
    padding-bottom: 20px;
    color: beige; /* Boja teksta koja asocira na sok */
    font-family:'Times New Roman', Times, serif; /* Promena fonta */
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 1s, transform 1s; /* Dodavanje tranzicije */
}


/* Stil za prvo dugme */
.button {
    padding: 15px 24px; /* Novi padding za dugmad */
    border-radius: 30px;
    background-color: beige;
    color: #32CD32; /* Zelena boja slova */
    text-decoration: none;
    font-size: 1em;
    display: inline-block;
    margin-top: 90px; /* Novi margin top za dugmad */
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 1s, transform 1s, background-color 0.3s, color 0.3s; /* Dodavanje tranzicija */
    margin-right: 20px;
}

.button:hover {
    background-color: #32CD32; /* Zelena pozadina na hover */
    color: beige; /* Bela boja slova na hover */
}

/* Stil za drugo dugme ("Naši proizvodi") */
.transparent-button {
    padding: 15px 24px; /* Isti padding */
    border-radius: 30px;
    background-color: transparent; /* Providna pozadina */
    color: #FBF934; /* Žuta boja slova */
    text-decoration: none;
    font-size: 1em;
    display: inline-block;
    margin-top: 90px; /* Novi margin top za dugmad */
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 1s, transform 1s, background-color 0.3s, color 0.3s; /* Dodavanje tranzicija */
    border: none; /* Uklanja okvir */
    border: 2px solid beige; /* Bela ivica oko dugmeta */
}

.transparent-button:hover {
    background-color: beige; /* Zelena pozadina na hover */
}


/* Responzivni stilovi */
@media (max-width: 768px) {
    .content {
        left: 20px;
        right: 20px;
        transform: translateY(-50%);
    }
   
    .content h1 {
        font-size: 40px; /* Manji font za manje ekrane */
    }
    .content p {
        font-size: 15px; /* Manji font za manje ekrane */
    }
}

/* Kontejner za beskonačno skrolovanje */
.infinite-scroll {
    width: 100%; /* Pun ekran */
    overflow: hidden; /* Sakrivanje viška sadržaja */
    background-color: #32CD32; /* Pozadina u zelenoj boji */
    padding: 10px 0; /* Razmak oko teksta */
    box-sizing: border-box;
    white-space: nowrap; /* Sprečava prelamanje reči */
}

/* Sadržaj trake */
.scroll-content {
    display: inline-block;
    animation: scroll 30s linear infinite; /* Sporija animacija (15 sekundi) */
}

.scroll-content span {
    display: inline-block;
    margin: 0 70px; /* Povećan razmak između reči */
    font-size: 1.5rem; /* Lagano veći font */
    font-weight: bold;
    color: beige; /* Bela boja teksta */
}

/* Animacija skrolovanja */
@keyframes scroll {
    0% {
        transform: translateX(100%); /* Početak van vidljivog područja */
    }
    100% {
        transform: translateX(-100%); /* Kraj van vidljivog područja */
    }
}

/* Sekcija za tekst */
.dual-section {
    display: flex; /* Postavljanje elemenata u red */
    justify-content: space-between; /* Razdvajanje levo i desno */
    align-items: center; /* Vertikalno poravnanje */
    background-color: #FBF934; /* Žuta pozadina */
    padding: 50px; /* Unutrašnji razmak */
    border-radius: 10px; /* Zaobljeni uglovi */
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1); /* Blaga senka */
}

/* Levi deo sekcije */
.left-side h2 {
    font-size: 1.8rem; /* Veličina fonta */
    color: #32CD32; /* Zelena boja teksta */
    margin: 0; /* Bez dodatnih margina */
    text-align: left; /* Poravnanje levo */
}

/* Desni deo sekcije */
.right-side p {
    font-size: 20px; /* Veličina teksta */
    color: #32CD32; /* Zelena boja teksta */
    margin: 0; /* Bez dodatnih margina */
    text-align: right; /* Poravnanje desno */
}

/* Responzivnost za ekrane do 768px (tableti) */
@media (max-width: 768px) {
    .dual-section {
        flex-direction: column; /* Elementi jedan ispod drugog */
        text-align: center; /* Poravnanje centrirano za oba elementa */
        padding: 30px; /* Smanjeni unutrašnji razmak */
    }

    .left-side h2 {
        font-size: 1.5rem; /* Smanjena veličina naslova */
        text-align: center; /* Naslov centriran */
        margin-bottom: 20px; /* Razmak ispod naslova */
    }

    .right-side p {
        font-size: 18px; /* Smanjena veličina teksta */
        text-align: center; /* Centriran tekst */
    }
}

/* Responzivnost za ekrane do 468px (mobilni uređaji) */
@media (max-width: 500px) {
    .dual-section {
        padding: 20px; /* Još manji unutrašnji razmak */
    }

    .left-side h2 {
        font-size: 1.2rem; /* Još manji naslov */
        margin-bottom: 15px; /* Manji razmak ispod naslova */
    }

    .right-side p {
        font-size: 16px; /* Još manji tekst */
    }
}

/* Responzivni stilovi za manje ekrane */
@media (max-width: 768px) {
    .dual-section {
        flex-direction: column; /* Prikaz elemenata jedan ispod drugog */
        text-align: center; /* Centriranje sadržaja */
        padding: 15px; /* Manji unutrašnji razmak */
    }

    .right-side p,
    .left-side h2 {
        text-align: center; /* Centriranje teksta na manjim ekranima */
        margin-bottom: 10px; /* Razmak između elemenata */
    }
}



/* Sekcija proizvoda */
.shop-section {
    padding: 40px 20px;
    background-color: beige;

  
}

.products-container {
    display: grid; /* Koristi grid sistem za raspored proizvoda */
    grid-template-columns: repeat(4, 1fr); /* 4 kolone u svakom redu */
    gap: 17px; /* Razmak između proizvoda */
    justify-content: center; /* Centriranje svih punih redova */
}

.products-container > .product-card:nth-last-child(1) {
    grid-column: span 1; /* Poslednji proizvod zauzima 1 kolonu */
    justify-self: start; /* Poravnanje poslednjeg proizvoda levo */
}

.product-card {
    width: 100%; /* Kartice se automatski prilagođavaju kolonama grida */
    max-width: 500px;
    border-radius: 10px;
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 20px;
    box-sizing: border-box;
}



.product-card:hover {
    transform: scale(1.05);
}

/* Slikanje proizvoda */
.product-image {
    width: 100%;
    height: 400px ;
    border-radius: 10px 10px 0 0;
    margin-bottom: 15px;
}

/* Informacije o proizvodu */
.product-name {
    display: flex;
    font-size: 1.2rem;
    color: #32CD32;
    margin: 10px 0;
}

.product-volume, .product-price {
    display: flex;
    font-size: 1rem;
    color: #333;
}

/* Sekcija za akcije ispod slike */
.product-actions {
    display: flex;
    justify-content: flex-end; /* Dugme na desnu stranu */
    align-items: center;
}

.quick-view {
    padding: 10px 15px;
    background-color: #32CD32;
    color: beige;
    font-size: 0.9rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.quick-view:hover {
    background-color: #228B22;
    transform: scale(1.1);
}


/* Popup detalji proizvoda */
.product-details {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* visoka vrednost da bude iznad svega */}


.details-content {
    position: relative;
    display: flex;
    background: beige;
    border-radius: 10px;
    overflow: hidden;
    padding: 20px;
    width: 80%;
    max-width: 800px;
}


.details-image {
    width: 50%;
    object-fit: cover;
    border-radius: 10px 0 0 10px;
}

.details-info {
    padding: 20px;
    width: 50%;
    text-align: left;
}

.details-name {
    font-size: 1.8rem;
    color: #32CD32;
    margin-bottom: 10px;
}

.details-description, .details-volume, .details-price {
    font-size: 1rem;
    color: #333;
    margin-bottom: 10px;
}

.close-details {
    position: absolute; /* Apsolutno pozicioniranje unutar kartice */
    top: 10px; /* Udaljenost od vrha kartice */
    right: 10px; /* Udaljenost od desne ivice kartice */
    background: none; /* Bez pozadinskih boja */
    color: #32CD32; /* Boja "X"-a */
    font-size: 40px; /* Veličina "X"-a */
    border: none; /* Bez ivice */
    cursor: pointer; /* Promena kursora pri prelasku */
}

.close-details:hover {
    color: rgb(0, 0, 0); /* Promena boje na hover */
}
/* Responzivnost za ekrane do 768px (tableti) */
@media (max-width: 768px) {
    .products-container {
        justify-content: center; /* Centriraj proizvode */
        gap: 10px; /* Povećaj razmak između kartica */
    }

    .product-card {
        width: calc(50% - 10px); /* Dve kartice po redu */
    }

  .close-details {
    top: 0 !important;
    right: 5px;
    
  } 

    .quick-view {
        font-size: 0.8rem; /* Smanji veličinu teksta na dugmetu */
        padding: 8px 10px; /* Smanji padding dugmeta */
    }
}

/* Responzivnost za ekrane do 468px (mobilni uređaji) */
@media (max-width: 500px) {
    .products-container {
        grid-template-columns: 1fr; /* Jedna kartica po redu */
    }

    .product-card {
        width: 100%; /* Kartica zauzima celu širinu */
        padding: 15px; /* Smanji padding */
    }

    

    .product-name {
        font-size: 1rem; /* Manji naslov */
    }

    .product-volume, .product-price {
        font-size: 0.9rem; /* Manji font za detalje */
    }

    .quick-view {
        font-size: 0.75rem; /* Još manji font za dugme */
        padding: 7px 8px; /* Kompaktan padding za dugme */
    }
}
/* Laptopi i manji desktop ekrani (do 1200px) */
@media (max-width: 1200px) {
    .products-container {
        grid-template-columns: repeat(3, 1fr); /* 3 proizvoda u redu */
    }

    .product-image {
        height: 450px; /* malo manja visina slike */
    }
}

/* Tableti (do 768px) */
@media (max-width: 768px) {
    .products-container {
        grid-template-columns: repeat(2, 1fr); /* 2 proizvoda u redu */
        gap: 15px;
    }

    .product-card {
        max-width: 100%;
        padding: 15px;
    }

    .product-image {
        height: 400px;
    }

    .details-content {
        flex-direction: column; /* popup info ispod slike */
        width: 90%;
    }

    .details-image, .details-info {
        width: 100%;
        border-radius: 10px 10px 0 0;
    }
}

/* Mobilni telefoni (do 500px) */
@media (max-width: 500px) {
    .products-container {
        grid-template-columns: 1fr; /* 1 proizvod u redu */
    }

    .product-card {
        padding: 10px;
    }

    .product-image {
        height: 350px;
    }

    .product-name {
        font-size: 1rem;
    }

    .product-volume, .product-price {
        font-size: 0.9rem;
    }

    .quick-view {
        font-size: 0.8rem;
        padding: 6px 8px;
    }

    .details-name {
        font-size: 1.4rem;
    }

    .details-description {
        font-size: 0.9rem;
    }
}

@media (max-width: 500px) {
    .product-details {
        padding: 10px; /* razmak od ivica ekrana */
        box-sizing: border-box;
    }

    .details-content {
        width: 90%;
        max-width: 600px; /* smanjeno za male ekrane */
        flex-direction: column; /* popup info ispod slike */
        flex-wrap: nowrap;
    }

   .details-image {
    width: 100%;
    height: auto;             /* automatska visina da slika ostane celovita */
    max-height: 60vh;         /* maksimalno 80% visine viewport-a */
    object-fit: contain;      /* slika se uklapa, ne seče se */
    border-radius: 10px 10px 0 0;
}


    .details-info {
        width: 100%;
        padding: 15px;
    }

    .close-details {
        top: 5px;
        right: 5px;
        font-size: 30px; /* smanjeno da se vidi */
        z-index: 10000;
    }
}

/* Kontakt sekcija */
.contact-section {
    background-color: #32CD32; /* Pozadinska boja */
    padding: 40px 20px;
    color: beige;
    margin: 100px 0 0 0;

}


.contact-part {
    flex: 1 1 23%; /* Četiri dela po 23% sa razmakom */
    margin: 10px;
    box-sizing: border-box;
}

.contact-part h3 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #FBF934;
}

.contact-part p,
.contact-part ul {
    margin-bottom: 20px;
}

.contact-part ul {
    list-style: none;
    padding: 0;
}

.contact-part ul li {
    margin-bottom: 10px;
}

.contact-part ul li a {
    color: beige;
    text-decoration: none;
    transition: color 0.3s;
}

.contact-part img {
    width: 50px;
    margin-bottom: 20px;
}

.contact-part ul li a:hover {
    color: #FBF934;
}

.social-icons {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.social-icons a {
    display: inline-block;
    margin-right: 10px;
    font-size: 30px; /* Veličina ikonica */
    color: beige; /* Boja ikonica */
    transition: color 0.3s;
    text-decoration: none;
}

.social-icons a:hover {
    color: #FBF934; /* Promena boje na hover */
}

.copyright {
    text-align: center;
    margin-top: 20px;
    font-size: 16px;
}


/* Responzivni stilovi */
@media (max-width: 1200px) { 
    .contact-part {
        flex: 1 1 48%; /* dva po redu na srednjim ekranima */
    }
}

@media (max-width: 768px) {
    .contact-part {
        flex: 1 1 100%; /* jedan po redu na mobilnim uređajima */
    }

    .social-icons {
        justify-content: flex-start; /* ikonice idu levo na malim ekranima */
        flex-wrap: wrap;
        gap: 10px;
    }
}


/* Sekcija sa dve kolone */
.left-right-section {
    justify-content: space-between;
    margin-top: 50px;
    display: flex;
    padding: 50px;
    flex-wrap: wrap; /* Omogućava prelamanje na manjim ekranima */
    border-radius: 10px; /* Zaobljeni uglovi */
}

/* Levi sadržaj */
.left-content {
    width:  48%; /* Levi deo zauzima 48% širine */
    color: #32CD32; /* Zelena boja teksta */
    text-align: left;
   
}

.left-content h2 {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.left-content .publication-date {
    font-size: 1rem;
    color: #555; /* Svetlija nijansa za datum */
    margin-bottom: 40px; /* Razmak ispod datuma */
}

/* Stil za opisni tekst */
.description p {
    font-size: 1rem;
    color: #333;
    line-height: 1.6; /* Prostor između redova */
    margin-bottom: 10px; /* Razmak između paragrafa */
}

/* Desni sadržaj */
.right-content {
    width: 48%; /* Desni deo zauzima 48% širine */
    text-align: center; /* Centriranje sadržaja */
}

/* Stil za thumbnail slike */
.video-thumbnail {
   margin-bottom: 20px;
    width: 100%;
    height: auto;
    border-radius: 10px; /* Zaobljeni uglovi */
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2); /* Senka */
    cursor: pointer; /* Promena kursora na ruku */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-thumbnail:hover {
    transform: scale(1.05); /* Blagi zoom efekat na hover */
    box-shadow: 4px 8px 16px rgba(0, 0, 0, 0.3); /* Intenzivnija senka */
}
.video-thumb .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px; /* veličina ikone */
    color: white; /* boja ikone */
    opacity: 0.8;
    pointer-events: none; /* da klik ide na div */
}
/* Tekstualni link ispod slike */
.video-link a {
    font-size: 1rem;
    color: #32CD32; /* Zelena boja linka */
    text-decoration: none; /* Bez podvlačenja */
    font-weight: bold;
}

.video-link a:hover {
    text-decoration: underline; /* Dodaj podvlačenje na hover */
}

/* Kontejner za blog postove */
.posts-container {
    display: block; /* Prikazuje elemente jedan ispod drugog */
}
/* Kontejner za video sa ikonom */
.video-thumb {
    position: relative; /* ključno za apsolutno pozicioniranje ikone */
    display: inline-block;
}

/* Play ikona preko slike */
.video-thumb .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 80px; /* veća ikona od default 60px */
    color: white; /* bela boja */
    opacity: 0.9;
    pointer-events: none; /* klik ide na sliku */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hover efekat ikone */
.video-thumb:hover .play-icon {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
}

/* Za ekrane do 768px (tableti) */
@media (max-width: 768px) {
    .left-right-section {
        flex-direction: column; /* Postavi elemente jedan ispod drugog */
        padding: 30px; /* Smanji padding za manje ekrane */
        text-align: center; /* Centriraj tekst za oba dela */
    }

    .left-content,
    .right-content {
        width: 100%; /* Svaki deo zauzima celu širinu */
        margin-bottom: 20px; /* Razmak između sekcija */
    }

    .left-content h2 {
        font-size: 1.5rem; /* Smanjena veličina naslova */
    }

    .description p {
        font-size: 0.9rem; /* Smanji veličinu teksta za lakše čitanje */
    }

    .video-thumbnail {
        margin-bottom: 20px; /* Manji razmak ispod slike */
    }
}

/* Za ekrane do 468px (mobilni uređaji) */
@media (max-width: 468px) {
    .left-right-section {
        padding: 20px; /* Još manji padding */
    }

    .left-content h2 {
        font-size: 1.2rem; /* Još manji naslov za mobilne uređaje */
    }

    .description p {
        font-size: 0.8rem; /* Još manji tekst za lakše čitanje na malim ekranima */
    }

    .video-thumbnail {
        width: 100%; /* Slika zauzima celu širinu na mobilnim uređajima */
        margin-bottom: 10px;
    }

    .video-link a {
        font-size: 0.9rem; /* Manji font za link */
    }
}


/* Blog sekcija */
.blog-section h2 {
    width: 100%;
    text-align: center;
    font-size: 2em;
    margin-bottom: 30px;
    color: #32CD32;
  }
  
  .blog-section {
    width: 100%;
    margin: 50px 0; /* Postavlja razmak iznad i ispod svake sekcije */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    justify-content: space-between;
    align-items: center;
  }
  
  .blog-post {
   justify-content: center;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    width: 30%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
  }
  
  .blog-post:hover {
    transform: scale(1.05);
  }
  
  .blog-post img {
    width: 100%;
    height: 300px;
    border-radius: 10px;
  }
  
  .blog-post h3 {
    margin-top: 10px;
  }
  
  .blog-post p {
    margin: 10px 0;
  }
  
  .read-more {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #32CD32;
    color: beige;
    text-decoration: none;
    border-radius: 5px;
  }
  
  .read-more:hover {
    background-color: #32CD32;
  }

  /* Nova Hero sekcija */
.custom-hero {
    width: 100%;
    height: 100vh; /* Sekcija zauzima punu visinu ekrana */
    background-image: url('images/IMG_7150.jpg'); /* Ubaci putanju do svoje slike */
    background-size: cover; /* Slika pokriva celu sekciju */
    background-position: center; /* Centriraj sliku */
    display: flex; /* Fleks za centriranje sadržaja */
    justify-content: center; /* Horizontalno centrirano */
    align-items: center; /* Vertikalno centrirano */
    text-align: center; /* Tekst u centru */
}

/* Sadržaj unutar nove Hero sekcije */
.custom-content {
    color: beige; /* Bela boja teksta */
    font-family: Arial, sans-serif; /* Osnovni font */
    padding: 20px; /* Unutrašnji razmak */
    border-radius: 10px; /* Zaobljeni uglovi */
}

.custom-content h1 {
    font-size: 3rem; /* Naslov srednje veličine */
    margin-bottom: 10px; /* Razmak ispod naslova */
}

/* Sekcija za lokaciju */
.location-section {
    display: flex; /* Postavljanje elemenata u red */
    flex-wrap: wrap; /* Prelamanje na manjim ekranima */
    align-items: center;
    margin: 50px 0;
    background-color: beige; /* Svetla pozadina */
}

/* Levi deo sa informacijama */
.location-info {
    width: 48%; /* Zauzima 40% širine na većim ekranima */
    max-width: 400px;
    color: #333;
    font-family: Arial, sans-serif;
    align-items: center;
}

.location-info h2 {
    font-size: 2rem;
    color: #32CD32; /* Zelena boja naslova */
    margin-bottom: 10px;
}

.location-info p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 10px;
}

.location-info .map-link {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 15px;
    background-color: #32CD32;
    color: beige;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.location-info .map-link:hover {
    background-color: #228B22; /* Tamnija zelena na hover */
}

/* Desni deo sa mapom */
.location-map {
    width: 48%; /* Zauzima 60% širine na većim ekranima */
    max-width: 600px;
    text-align: center;
}

.location-map iframe {
    width: 100%;
    height: 300px;
    border-radius: 10px;
    border: none;
}

/* Sekcija za stavke */
.info-section {
    display: flex; /* Postavljanje stavki u jednom redu */
    flex-wrap: wrap; /* Omogućava prelamanje na manjim ekranima */
    gap: 20px; /* Razmak između stavki */
    justify-content: space-around; /* Raspoređuje stavke po širini */
   margin: 50px 0;
    background-color: beige; /* Svetla pozadina */
    border-radius: 10px; /* Zaobljeni uglovi */
    
}

/* Pojedinačne stavke */
.info-item {
    flex: 1 1 30%; /* Svaka stavka zauzima 30% prostora */
    max-width: 300px; /* Maksimalna širina */
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-item:hover {
    transform: scale(1.05); /* Blagi zoom efekat na hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Ikonice */
.info-item i {
    font-size: 2.5rem; /* Veličina ikonice */
    margin-bottom: 20px; /* Razmak ispod ikonice */
}

/* Naslovi stavki */
.info-item h3 {
    font-size: 1.2rem;
    color: #32CD32; /* Zelena boja naslova */
    margin-bottom: 10px;
}

/* Tekst stavki */
.info-item p {
    font-size: 1rem;
    color: #333; /* Tamnija boja za tekst */
    margin: 0; /* Bez dodatnih margina */
}
/* RESPONSIV ZA LOCATION I INFO SEKCIJU */

/* Za ekrane do 1024px (tableti) */
@media (max-width: 1024px) {
    .location-section {
        flex-direction: column; /* Levi i desni deo jedan ispod drugog */
        align-items: flex-start;
    }

    .location-info,
    .location-map {
        width: 100%; /* Svaka sekcija zauzima punu širinu */
        max-width: 100%;
        margin-bottom: 20px; /* Razmak između njih */
    }

    .info-section {
        gap: 15px; /* Smanjen razmak između stavki */
    }

    .info-item {
        flex: 1 1 45%; /* Dve stavke po redu */
        max-width: 45%;
    }
}

/* Za ekrane do 768px (mobilni) */
@media (max-width: 768px) {
    .location-section {
        flex-direction: column; /* Vertikalno */
    }

    .location-info,
    .location-map {
        width: 100%;
        max-width: 100%;
        margin-bottom: 15px;
    }

    .info-section {
        flex-direction: column; /* Stavke vertikalno */
        gap: 15px;
    }

    .info-item {
        flex: 1 1 100%; /* Jedna stavka po redu */
        max-width: 100%;
    }

    .info-item i {
        font-size: 2rem; /* Malo manja ikonice na mobilnim */
        margin-bottom: 15px;
    }

    .info-item h3 {
        font-size: 1.1rem;
    }

    .info-item p {
        font-size: 0.95rem;
    }

    .location-info h2 {
        font-size: 1.8rem;
    }

    .location-info p {
        font-size: 0.95rem;
    }

    .location-info .map-link {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
}

/* Za ekrane do 480px (mali mobilni) */
@media (max-width: 480px) {
    .info-item i {
        font-size: 1.8rem;
    }

    .info-item h3 {
        font-size: 1rem;
    }

    .info-item p {
        font-size: 0.9rem;
    }

    .location-info h2 {
        font-size: 1.5rem;
    }

    .location-info p {
        font-size: 0.9rem;
    }

    .location-info .map-link {
        padding: 6px 10px;
        font-size: 0.85rem;
    }
}

/* Sekcija recepta */
.recipe-section {
    max-width: 800px;
    margin-left: calc(50% - 635px); /* pomereno malo ulevo */
    padding: 20px;
    font-family: Arial, sans-serif;
}




/* Naslov recepta */
.recipe-title {
    font-size: 2rem;
    color: #32CD32;
    text-align: center;
    margin-bottom: 20px;
}

/* Uvodni tekst recepta */
.recipe-intro {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
    text-align: start;
    margin-bottom: 20px;
}

/* Slika recepta - manja i uklopljena između teksta */
.recipe-image {
    display: block;
    max-width: 100%;      /* smanjena širina da se uklopi između paragrafa */
    height: auto;
    margin: 20px auto;   /* centriranje sa vrha i dna */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* opcionalno za lepši izgled */
}


/* Sadržaj recepta */
.recipe-content {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 20px;
}

/* Saveti na kraju */
.recipe-tip {
    display: block;
    font-size: 1.1rem;
    font-style: italic;
    text-align: center;
    color: #555;
    margin-top: 30px;
    padding-top: 10px;
    border-top: 1px solid #ddd;
}

/* Tableti (max širina 992px) */
@media (max-width: 992px) {
  .recipe-section {
    max-width: 90%;
    margin: 0 auto;
  }

  .recipe-title {
    font-size: 1.8rem;
  }

  .recipe-intro,
  .recipe-content {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .recipe-image {
    max-width: 90%;
  }
}

/* Mobilni uređaji (max širina 768px) */
@media (max-width: 768px) {
  .recipe-section {
    padding: 15px;
    max-width: 95%;
  }

  .recipe-title {
    font-size: 1.6rem;
    margin-bottom: 15px;
  }

  .recipe-intro,
  .recipe-content {
    font-size: 0.9rem;
    margin-bottom: 15px;
  }

  .recipe-image {
    max-width: 100%;
    border-radius: 8px;
    margin: 15px auto;
  }

  .recipe-tip {
    font-size: 1rem;
    margin-top: 20px;
  }

  
}

/* Mali telefoni (max širina 480px) */
@media (max-width: 480px) {
  .recipe-title {
    font-size: 1.4rem;
  }

  .recipe-intro,
  .recipe-content {
    font-size: 0.85rem;
  }

  .recipe-image {
    max-width: 100%;
  }

  .recipe-tip {
    font-size: 0.9rem;
  }
}

 /* Responzivni stilovi */
 @media (max-width: 768px) {

    .blog-section{
        padding: 15px;
    }
    .blog-post {
      width: 48%; /* Prilagodjavanje širine za manje ekrane */
      
    }
  
  }
  
  @media (max-width: 500px) {
    .blog-post {
      width: 100%; /* Prilagodjavanje širine za mobilne uređaje */
      margin: 15px 0; /* Smanjenje margine */
    }
  
  }

.hero-static {
    position: relative;
    width: 100%;
    height: 550px;
    overflow: hidden;
}


.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    color: #fff;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 20px;
    text-align: left;
    max-width: 600px;
    margin-left: 8%;
}


.hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    animation: fadeInUp 1s ease-out;
}

/* Dodatno za hero meta sekciju */
.hero-category {
    font-size: 1rem; /* prilagodjeno veličini naslova */
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
    margin-bottom: 8px;
    animation: fadeInUp 1s ease-out;
}

.hero-date {
    font-size: 0.9rem;
    color: #fff;
    opacity: 0.7;
    animation: fadeInUp 1s ease-out;
}


@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.share-bar {
    display: flex;
    align-items: stretch;
    border: 1px solid #ddd;
    background-color: #fff;
    margin-bottom: 25px;
    max-width: 500px;
    font-family: 'Arial', sans-serif;
    margin-top: 110px; /* pomera traku na dole od hero slike */
    margin-left: calc(50% - 620px); /* prilagođeno da centriramo traku */
}

.share-count {
    background-color: #f8f8f8;
    padding: 10px 15px; /* manje paddinga da traka bude tanja */
    text-align: center;
    border-right: 1px solid #ddd;
}

.share-count .number {
    display: block;
    font-size: 20px; /* malo manji broj */
    font-weight: bold;
    color: #666;
}

.share-count .label {
    font-size: 9px; /* malo manja labela */
    color: #999;
    letter-spacing: 1px;
}

.share-buttons {
    display: flex;
    flex: 1;
}

.share-btn {
    flex: 1;
    text-align: center;
    padding: 10px 0; /* manja visina dugmadi */
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    display: flex;           /* da centriramo ikonice i tekst */
    align-items: center;     /* vertikalno centrirano */
    justify-content: center; /* horizontalno centrirano */
    transition: background-color 0.3s ease;
}

.share-btn.facebook {
    background-color: #3b5998;
}

.share-btn.instagram {
    background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}

.share-btn i {
    margin-right: 6px;
}

.share-btn:hover {
    opacity: 0.85;
}
.recipe-highlight {
    background-color: rgba(255, 255, 255, 0.1); /* blago prozirna pozadina preko hero sekcije ili bele pozadine */
    border-left: 4px solid #3b5998; /* plavi marker ili možeš promeniti boju */
    padding: 15px 20px;
    margin: 20px 0; /* razmak od ostalih paragrafa */
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.6;
    border-radius: 5px;
}
/* Link koji sadrži i logo i tekst */
.instagram-link {
    display: inline-flex;      /* Flex raspored za horizontalno poravnanje */
    align-items: center;       /* Vertikalno centriranje teksta sa logom */
    text-decoration: none;
    color: white;
    font-weight: bold;
    transition: opacity 0.3s ease;
}

.instagram-link:hover {
    opacity: 0.8;
}

/* Instagram logo */
.instagram-logo {
    width: 35px; /* veličina loga */
    height: auto;
    margin-right: 10px; /* razmak između loga i teksta */
}

/* Tekst pored loga */
.instagram-text {
    font-size: 2rem;
    line-height: 1; /* dodatno poravnavanje */
    margin-bottom: 30px;
}
/* Tekstualni link za jezik */
.language-switch a {
    color: white;
    font-weight: bold;
    text-decoration: none;
    margin: 0 5px;
}

.language-switch a:hover {
    text-decoration: underline;
}
/* ----------------------------- */
/* RESPONSIVE DESIGN - SHARE BAR */
/* ----------------------------- */

/* Tableti (max širina 992px) */
@media (max-width: 992px) {
  .share-bar {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column; /* dugmad i broj jedan ispod drugog */
    margin-top: 80px;       /* prilagodjeno za hero sekciju */
  }

  .share-count {
    border-right: none;
    border-bottom: 1px solid #ddd;
    padding: 8px 0;
  }

  .share-count .number {
    font-size: 18px;
  }

  .share-count .label {
    font-size: 8px;
  }

  .share-buttons {
    flex-direction: row;
  }

  .share-btn {
    padding: 8px 0;
    font-size: 0.9rem;
  }

  .instagram-text {
    font-size: 1.6rem;
    margin-bottom: 20px;
  }
}

/* Mobilni uređaji (max širina 768px) */
@media (max-width: 768px) {
  .share-bar {
    flex-direction: column;
    margin-top: 60px;
  }

  .share-count {
    padding: 6px 0;
  }

  .share-count .number {
    font-size: 16px;
  }

  .share-count .label {
    font-size: 7px;
  }

  .share-buttons {
    flex-direction: column;
  }

  .share-btn {
    padding: 10px 0;
    font-size: 0.85rem;
  }

  .instagram-text {
    font-size: 1.4rem;
    margin-bottom: 15px;
  }

  .language-switch a {
    font-size: 0.9rem;
  }
}

/* Mali telefoni (max širina 480px) */
@media (max-width: 480px) {
  .share-bar {
    margin-top: 40px;
    max-width: 95%;
  }

  .share-count {
    padding: 5px 0;
  }

  .share-count .number {
    font-size: 14px;
  }

  .share-count .label {
    font-size: 6px;
  }

  .share-buttons {
    flex-direction: column;
  }

  .share-btn {
    padding: 8px 0;
    font-size: 0.8rem;
  }

  .instagram-text {
    font-size: 1.2rem;
    margin-bottom: 10px;
  }

  .language-switch a {
    font-size: 0.8rem;
  }
}
/* Stil za H2 unutar sekcije recepta */
.recipe-section h2 {
    font-size: 1.8rem;      /* veličina naslova */
    color: #32CD32;         /* zelena boja da se slaže sa naslovom recepta */
    margin-top: 30px;       /* razmak od prethodnog sadržaja */
    margin-bottom: 15px;    /* razmak ispod naslova da se tekst ne lepi */
    padding-bottom: 10px;   /* dodatni padding unutar naslova ako želiš */
    border-bottom: 2px solid #ddd; /* opcionalno, linija ispod naslova */
}
@media (max-width: 992px) {
    .recipe-section h2 {
        font-size: 1.6rem;
        margin-top: 25px;
        margin-bottom: 12px;
        padding-bottom: 8px;
    }
   
}
@media (max-width: 768px) {
    .recipe-section h2 {
        font-size: 1.4rem;
        margin-top: 20px;
        margin-bottom: 10px;
        padding-bottom: 6px;
    }
   }
@media (max-width: 480px) {
    .recipe-section h2 {
        font-size: 1.2rem;
        margin-top: 15px;
        margin-bottom: 8px;
        padding-bottom: 4px;
    }
  }