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

/* Osnovni stilovi za telo stranice */
 body {
   font-family: sans-serif;
    background-color: beige;
}
.container {
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    justify-content: space-between;
    align-items: center;
}
#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: #fff;
    text-align: left; /* Tekst ostaje levo poravnat */
}
.content p {
   
    font-size: 20px; /* Veći font */
    color: #ffffff; /* 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: #e6e6e6; /* 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: white; /* Bela pozadina */
    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: white; /* 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 white; /* Bela ivica oko dugmeta */
}

.transparent-button:hover {
    background-color: #ffffff; /* Zelena pozadina na hover */
}
/* Za ekrane do 600px (mobilni) */
@media (max-width: 600px) {
    .button, .transparent-button {
        font-size: 0.9em;       /* Smanjuje font */
        padding: 10px 18px;     /* Smanjuje padding */
        margin-top: 15px;       /* Manji razmak od vrha */
        display: block;          /* Dugmad jedno ispod drugog */
        width: 80%;              /* Širina da stane u ekran */
        text-align: center;      /* Centriraj tekst */
        margin-right: 0;         /* Uklanja desni margin */
    }
}


/* 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 */
    }
}



/* Kocke sekcija */
.kocke-sekcija  {
    width: 100%;
    display: flex;
    flex-wrap: wrap; /* Omogućava prelamanje elemenata */
    justify-content: center !important; /* Centriranje elemenata */ 
    justify-content: space-between;
    margin: 50px 0; /* Postavlja razmak iznad i ispod svake sekcije */

}

.kocka {
    width: 100%;
    max-width: 330px;
    height: 200px;
    border: 2px solid rgb(200, 220, 210); /* Tamnija nijansa okvira */
    border-radius: 20px 0 0 0; /* Jedan zaobljen ugao */
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2); /* Dodavanje senke */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Dodavanje tranzicija */
   
}

/* Hover efekti za kocke */
.kocka:hover {
    transform: translateY(-10px) scale(1.05); /* Blago podizanje i povećanje */
    box-shadow: 4px 8px 20px rgba(0, 0, 0, 0.3); /* Intenzivnija senka */
    border-color: #32CD32; /* Promena boje okvira na hover */
}

/* Animacija za ikonice unutar kocke */
.ikonica {
    width: 60px;
    height: 60px;
    margin: 20px auto 20px auto; /* Centriranje ikonice */
    background-size: contain;
    background-repeat: no-repeat;
    background-color: rgba(250, 245, 206, 0.8);
    border-radius: 20%;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Dodavanje tranzicija za ikonice */
}

.ikonica:hover {
    background-color:white; /* Promena boje ikonice na hover */
    transform: rotate(360deg); /* Animacija rotacije ikonice */
}

/* Animacija za tekst unutar kocke */
.kocka p {
    color:#32CD32;
    font-size: 18px;
    margin-top: 20px;
    transition: color 0.3s ease; /* Dodavanje tranzicije boje teksta */
}

.kocka:hover p {
    color: #32CD32; /* Promena boje teksta na hover */
}





/* Responzivni stilovi za ekrane ispod 1200px */
@media (max-width: 1200px) {
    .kocke-sekcija {
        flex-wrap: wrap; /* Prelamanje elemenata u sledeći red */
        justify-content: space-between; /* Ravnomerno raspoređivanje */
        padding: 15px; /* Smanji unutrašnji razmak */
        
    }

    .kocka {
        width:48%;
        margin: 15px; /* Vertikalni razmak između redova */
    }

    .ikonica {
        width: 60px; /* Prilagođena veličina ikonice */
        height: 60px;
    }

    .kocka p {
        font-size: 18px; /* Smanjena veličina fonta */
    }
}

/* Responzivni stilovi za ekrane ispod 768px */
@media (max-width: 768px) {
    .kocke-sekcija {
        justify-content: center !important;
        flex-direction: column; /* Redanje kocki po vertikali */
        align-items: center; /* Centriranje kocki */
      
    }

    .kocka {
        width: 100%; /* Kocke zauzimaju punu širinu */
        max-width: 768px;

        
    }

    .ikonica {
        width: 50px; /* Manja veličina ikonice za male ekrane */
        height: 50px;
    }

    .kocka p {
        font-size: 16px; /* Još manji font */
        text-align: center; /* Poravnanje teksta u centru */
    }
}






/* O nama sekcija */
.about-us {
    width: 100%;
    display: flex;
    flex-wrap: wrap; /* Omogućava prelamanje elemenata */
    justify-content: center;
    justify-content: space-between; /* Prostor između elemenata */
    box-sizing: border-box; /* Dodaj box model za precizne dimenzije */
    margin: 50px 0; /* Postavlja razmak iznad i ispod svake sekcije */


}

/* Levi deo */
.left-side {
    width: 48%; /* Isti raspored kao desni deo */
    box-sizing: border-box;
}

/* Stil za heading u levom delu */
.left-side h2 {
    font-size: 30px;
    color: #32CD32;
    margin-bottom: 25px;
    
}

/* Linije za heading */
.heading-line {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.heading-line h2 {
  font-size: 36px;
  color: #32CD32;
  margin: 0 10px;
  white-space: normal; /* dozvoljava prelom */
  word-break: break-word; /* ako treba, deli duge reči */
}

/* opcionalno - za mobilne ekrane */
@media (max-width: 600px) {
  .heading-line h2 {
    font-size: 24px;
    margin: 0 5px;
  }
}


.small-line {
    width: 20%;
    height: 2px;
    background-color: #32CD32;
    border: none;
}

.large-line {
    flex-grow: 1; /* Linija raste i smanjuje se */
    height: 2px;
    background-color: #32CD32;
    border: none;
}

/* Tekst unutar sekcije */
.left-side p {
    font-size: 18px;
    line-height: 1.6;
    color: #333;
}

/* Desni deo */
.right-side { 
    width: 48%; /* Isti raspored kao levi deo */
    display: flex; 
    justify-content: center; 
    align-items: center;
    box-sizing: border-box;
} 

/* Slika u desnom delu */
.main-image { 
    width: 100%; /* Širina slike da odgovara prostoru */
    margin: 0; /* Centriranje */
    border-radius: 80px 10px 10px 10px; /* Zaobljeni uglovi */
}

    


/* Responzivni stilovi */
@media (max-width: 1200px) {
    .about-us {
        width: 100%;
        padding: 15px; /* Smanji unutrašnji razmak */

    }

    .left-side, .right-side {
       width: 100%;
    }
    
    .right-side img {
        width: 100%;
        padding-bottom: 15px;

    }
}

@media (max-width: 768px) {
    .about-us {
        flex-direction: column;
        
    }

    .left-side, .right-side {
       width: 100%;

    }
    .right-side img {
        width: 100%;

    }
}




/* Naši proizvodi */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style-type: none;
  text-decoration: none;
}



/* Tanak, moderan scrollbar */
::-webkit-scrollbar {
    width: 8px; /* smanji sa 1.3rem na 8px ili 0.5rem */
}

::-webkit-scrollbar-thumb {
    border-radius: 1rem;
    background: #797979;
    transition: all 0.5s ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
    background: #222224;
}

::-webkit-scrollbar-track {
    background: #f9f9f9;
}



.container {
  max-width: 90rem;
  padding: 0 1rem;
  margin: 0 auto;

}

.text-center {
  text-align: center;
}

.heading-line h2{
    margin: 0;
    padding: 0;
}
.zvezdice {
    padding: 12px 24px; /* Unutrašnji razmak */
    font-size: 16px; /* Veličina fonta */
    font-family: 'Montserrat', sans-serif; /* Prilagođeni font */
    color: #ffffff; /* Boja teksta */
    background-color: #32CD32; /* Zelena boja pozadine */
    border: none; /* Uklanja okvir */
    border-radius: 30px; /* Zaobljeni uglovi */
    cursor: pointer; /* Kursor u obliku ruke */
    transition: all 0.3s ease; /* Dodavanje tranzicije za animacije */
    text-align: center;
    display: inline-block; /* Inline dugme */
}

/* Hover efekat */
.zvezdice:hover {
    background-color: #228B22; /* Tamnija zelena na hover */
    color: #ffffff; /* Bela boja teksta */
    transform: translateY(-3px); /* Blagi podizajući efekat */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Dodavanje senke */
}

#tranding {
  margin: 100px 0; /* Postavlja razmak iznad i ispod svake sekcije */


}


#tranding .tranding-slider {
  height: 45rem;
  padding: 2rem 0;
  position: relative;
}

@media (max-width:500px) {
  #tranding .tranding-slider {
    height: 45rem;
  }
}

.tranding-slide {
  width: 27rem;
  height: 35rem;
  position: relative;
}

@media (max-width: 500px) {
    /* Prilagođavanje visine celog kontejnera */
    #tranding .tranding-slider {
        height: 40rem; /* Malo smanjena visina da ne zauzima ceo ekran */
        padding: 1rem 0;
    }

    /* Glavni kontejner slajda - koristimo max-width umesto fiksne širine */
    .tranding-slide {
        width: 85vw !important; /* Slajd zauzima 85% širine ekrana */
        height: 32rem !important;
    }

    /* Slika unutar slajda */
    .tranding-slide .tranding-slide-img img {
        width: 100% !important; /* Slika prati širinu roditelja */
        height: 32rem !important;
        object-fit: cover;
        box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* Blaga senka za dubinu */
    }

    /* Tekstualni sadržaj na dnu slajda */
    .tranding-slide-content .tranding-slide-content-bottom {
        width: 80%;
        padding: 10px;
        border-radius: 15px;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* Cena - bolje pozicioniranje na malom ekranu */
    .tranding-slide-content .food-price {
        top: 1rem !important;
        right: 1rem !important;
        padding: 5px 12px;
        border-radius: 20px;
        font-weight: bold;
        font-size: 0.9rem;
    }

    /* Kontrole (Strelice) - Da ne smetaju jedna drugoj */
    .tranding-slider-control {
        bottom: 0rem !important;
    }

    .tranding-slider-control .slider-arrow {
        width: 2.8rem !important; /* Manje strelice za mobilni */
        height: 2.8rem !important;
    }

    .tranding-slider-control .swiper-button-prev {
        left: 15% !important;
    }

    .tranding-slider-control .swiper-button-next {
        left: 85% !important;
    }

    .tranding-slider-control .swiper-pagination {
        width: 10rem !important;
    }
}

.tranding-slide .tranding-slide-img img {
  width: 27rem;
  height: 35rem;
  border-radius: 2rem;
  object-fit: cover;
}

.tranding-slide .tranding-slide-content {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.tranding-slide-content .food-price {
  position: absolute;
  top: 2rem;
  right: 2rem;
  color:beige;
}

.tranding-slide-content .tranding-slide-content-bottom {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  color: beige;
}
@media (max-width: 768px) {
    .tranding-slide-content .tranding-slide-content-bottom {
        position: absolute;   /* ostaje apsolutno unutar slajda */
        bottom: 1rem;         /* razmak od dna */
        left: 50%;            /* centriranje po širini */
        transform: translateX(-50%); /* horizontalno centriranje */
        text-align: center;
        color: beige;
        display: flex;
        flex-direction: column; /* ime i zvezdice jedna ispod druge */
        gap: 0.2rem;           /* razmak između elemenata */
        align-items: center;    /* horizontalno centriranje unutar flex kolone */
    }

    .tranding-slide-content .food-name {
        font-size: 0.9rem;    /* manji font na mobilnom */
    }

    .food-rating ion-icon {
        font-size: 0.8rem;    /* smanjene zvezdice */
    }
}


.food-rating {
  padding-top: 1rem;
  display: flex;
  gap: 1rem;
}

.rating ion-icon {
  color:#FBF934;
  
}

.swiper-slide-shadow-left,
.swiper-slide-shadow-right {
  display: none;
}

.tranding-slider-control {
  position: relative;
  bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tranding-slider-control .swiper-button-next {
  left: 58% !important;
  transform: translateX(-58%) !important;
}

@media (max-width:990px) {
  .tranding-slider-control .swiper-button-next {
    left: 70% !important;
    transform: translateX(-70%) !important;
  }
}

@media (max-width:450px) {
  .tranding-slider-control .swiper-button-next {
    left: 80% !important;
    transform: translateX(-80%) !important;
  }
}

@media (max-width:990px) {
  .tranding-slider-control .swiper-button-prev {
    left: 30% !important;
    transform: translateX(-30%) !important;
  }
}

@media (max-width:450px) {
  .tranding-slider-control .swiper-button-prev {
    left: 20% !important;
    transform: translateX(-20%) !important;
  }
}
@media (max-width:350px) {
  .tranding-slider-control .swiper-button-prev {
    left: 10% !important;
    transform: translateX(-10%) !important;
  }
}
.tranding-slider-control .slider-arrow {
  background: var(--white);
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  left: 42%;
  transform: translateX(-42%);
  filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
}

.tranding-slider-control .slider-arrow ion-icon {
  font-size: 2rem;
  color: #222224;
}

.tranding-slider-control .slider-arrow::after {
  content: '';
}

.tranding-slider-control .swiper-pagination {
  position: relative;
  width: 15rem;
  bottom: 1rem;
}

.tranding-slider-control .swiper-pagination .swiper-pagination-bullet {
  filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
}

.tranding-slider-control .swiper-pagination .swiper-pagination-bullet-active {
  background: var(--primary);
}
        



/* Galerija sekcija */
.custom-section {
    padding: 20px; /* Margina unutar sekcije */
    background-color:#32CD32; /* Pozadinska boja sekcije */
    margin: 50px 0; /* Postavlja razmak iznad i ispod svake sekcije */
    max-width: 1600px; /* Maksimalna širina sekcije */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Blaga senka */
}

.custom-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.custom-col {
    flex: 0 0 32%;
    box-sizing: border-box;
   
}

.custom-image {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Blaga senka na slikama */
    margin: 20px;
}

.custom-image:hover {
    transform: scale(1.05); /* Efekat zumiranja pri hover */
}

/* Specifične veličine za slike */
.custom-image-1 {
    height: 450px;
    border-radius: 10px 10px 10px 40px; /* Zaobljenje u jednom uglu */
}

.custom-image-2 {
    width: 60%;
    margin-left:45%;
    border-radius: 40px 10px 10px 10px; /* Zaobljenje u jednom uglu */
}

.custom-image-4 {
    width: 100%;
    border-radius: 10px 10px 10px 10px; /* Zaobljenje u jednom uglu */
}

.custom-image-5 {
    height: 450px;
    border-radius: 10px 40px 10px 10px; /* Zaobljenje u jednom uglu */
}

.custom-image-6 {
    width: 60%;
    border-radius: 10px 10px 40px 10px; /* Zaobljenje u jednom uglu */
}

/* Srednji ekrani (Tableti) */
@media (max-width: 1200px) {
    .custom-section {
        padding: 40px 20px; /* Malo više prostora gore-dole za bolji "dah" */
    }

    .custom-col {
        flex: 0 0 48%;
    }

    .custom-image-2, .custom-image-6 {
        width: 100%; /* Na tabletima je bolje da popune svoju kolonu */
        margin-left: 0;
    }
}

/* Mobilni uređaji (Telefoni) */
@media (max-width: 768px) {
    .custom-section {
        padding: 30px 15px;
    }

    .custom-row {
        flex-direction: column;
        gap: 20px; /* Razmak između glavnih blokova */
    }

    .custom-col {
        flex: 0 0 100%;
        width: 100%;
    }

    .custom-image {
        width: 100% !important; /* Slika ide od ivice do ivice (unutar paddinga) */
        max-width: 450px;       /* Sprečava da slika postane ogromna na velikim telefonima */
        height: auto;
        border-radius: 15px;    /* Zaobljeni uglovi daju moderan izgled */
        box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Blaga senka za dubinu */
        margin: 15px 0 !important;
    }

    /* Resetuj sve specifične margine za slike 2 i 6 */
    .custom-image-2,
    .custom-image-6 {
        margin: 15px 0 !important;
        width: 100% !important;
        transform: none; /* Ako si imao neki tilt ili pomeraj, ovde ga poništavaš */
    }

    /* Centriranje teksta unutar kolona na mobilnom (opciono, ali preporučljivo) */
    .custom-col h2, 
    .custom-col p {
        text-align: center;
        padding: 0 10px;
    }
}

/* Veoma mali ekrani (Iphone SE i stariji) */
@media (max-width: 380px) {
    .custom-section {
        padding: 20px 10px;
    }
    
    .custom-image {
        margin: 10px 0 !important;
    }
}



/* Testimonijali sekcija */  

.container-pressno{
    position: relative;
    width: 100%;
    min-height: 450px;

}
.container-pressno .contents-wraper{
    width: 70%;
    min-height: inherit;
    margin: 30px auto;
    text-align: center;
}


.contents-wraper .testRow{
    width: 100%;
    min-height: inherit;
    position: relative;
    overflow: hidden;
}
.testRow .testItem{
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.testRow .testItem:not(.active){
    top: 0;
    left: -100%;
}

.testRow .testItem h3{
    font-size: 30px;
    font-style: italic;
    padding: 30px;
    color: #32CD32;
}

.testRow .testItem p{
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 1.2;
    padding: 30px;
}
.contents-wraper .indicators{
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px;
    cursor: pointer;
}
.contents-wraper .indicators .dot{
    width: 15px;
    height: 15px;
    margin: 0px 3px;
    border: 3px solid #aaa;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.5s ease;
}

@keyframes next1{
    from{
        left: 0%;
    }
    to{
        left: -100%;
    }
}
@keyframes next2{
    from{
        left: 100%;
    }
    to{
        left: 0%;
    }
}

@keyframes prev1{
    from{
        left: 0%;
    }
    to{
        left: 100%;
    }
}
@keyframes prev2{
    from{
        left: -100%;
    }
    to{
        left: 0%;
    }
}

@media(max-width: 550px){
    .container .contents-wraper{
        width: 90%;
    }
    .contents-wraper .header h1{
        font-size: 32px;
    }
    .testRow .testItem h3{
        font-size: 26px;
    }
    .testRow .testItem p{
        font-size: 16px;
        letter-spacing: initial;
        line-height: initial;
    }

}
/* testimonijali sekcija se zavrsava */

/* Blog sekcija */
.blog-section h2 {
    width: 100%;
    text-align: center;
    font-size: 2em;
    margin-bottom: 30px;
    color: #32CD32;
  }
  
  .blog-section {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    justify-content: space-between;
    align-items: center;
    margin: 100px 0;
  }
  
  .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: white;
    text-decoration: none;
    border-radius: 5px;
  }
  
  .read-more:hover {
    background-color: #32CD32;
  }
  
  /* Kontakt sekcija */
  .contact-section {
      background-color: #32CD32; /* Pozadinska boja */
      padding: 40px 20px;
      color: white;
      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: white;
      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;
  }
  
  .social-icons a {
      display: inline-block;
      margin-right: 10px;
      font-size: 30px; /* Veličina ikonica */
      color: white; /* Boja ikonica */
      transition: color 0.3s;
  }
  
  .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) {

    .blog-section{
        padding: 15px;
    }
    .blog-post {
      width: 48%; /* Prilagodjavanje širine za manje ekrane */
      
    }
  
    .contact-part {
      flex: 1 1 48%; /* Prilagodjavanje širine za manje ekrane */
      
    }
  }
/* 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;
}

  @media (max-width: 768px) {
    .blog-post {
      width: 100%; /* Prilagodjavanje širine za mobilne uređaje */
      margin: 15px 0; /* Smanjenje margine */
    }
  
    .contact-part {
      flex: 1 1 100%; /* Prilagodjavanje širine za mobilne uređaje */
    }
  
    
  }


.rate-us-section {
    padding-bottom: 60px;
    text-align: center;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.rate-container {
    max-width: 800px;
    margin: 0 auto;
}

.rate-content h2 {
    font-size: 2rem;
    color: #32CD32;;
    margin-bottom: 15px;
    font-weight: 700;
}

.rate-content p {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 25px;
}

.stars-display {
    margin-bottom: 30px;
}

.stars-display ion-icon {
    font-size: 2.5rem;
    color: #ffcc00; /* Zlatna boja zvezdica */
    margin: 0 5px;
}

.rate-btn {
    display: inline-block;
    padding: 15px 35px;
    background-color: #32CD32;; /* Boja tvog brenda */
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.rate-btn:hover {
    background-color: #1a252f;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
/* 1. TABLETI (ekrani širine do 992px) */
@media (max-width: 992px) {
    .rate-container {
        max-width: 90%; /* Kontejner zauzima više širine */
        padding: 0 20px;
    }

    .rate-content h2 {
        font-size: 1.8rem;
    }

    .stars-display ion-icon {
        font-size: 2.2rem; /* Blago smanjene zvezdice */
    }
}

/* 2. TELEFONI (ekrani širine do 600px) */
@media (max-width: 600px) {
    .rate-us-section {
        padding: 40px 15px; /* Manji vertikalni razmak na mobilnom */
    }

    .rate-content h2 {
        font-size: 1.5rem; /* Naslov prilagođen širini ekrana */
        margin-bottom: 12px;
    }

    .rate-content p {
        font-size: 1rem;
        padding: 0 10px; /* Da tekst ne udara u ivice */
        line-height: 1.5;
    }

    .stars-display {
        margin-bottom: 20px;
    }

    .stars-display ion-icon {
        font-size: 1.8rem; /* Dovoljno male da uvek stanu u jedan red */
        margin: 0 2px;
    }

    .rate-btn {
        display: block; /* Dugme postaje "block" da bi popunilo širinu */
        width: 100%;
        max-width: 300px;
        margin: 0 auto; /* Centriranje dugmeta */
        padding: 14px 20px;
        font-size: 1rem;
    }
}