html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Sprečava horizontalni scroll na globalnom nivou */
    width: 100%;
}


body{
    background-color: #dadada !important; /* dadada */
    
}
.velikifon{
    text-align: center;
    font-size: xx-large;
    color: #1f00bb;
}
.dveSlike{
    width: 400px;
    height: 400px;
    text-align: center;
    max-width: 100%;
}
@media (max-width: 768px) {
    .dveSlike {
        max-width: 90%; /* Dodatno smanjuje slike na malim ekranima */
        margin: 5px auto; /* Poravnava slike centrirano sa manjim razmakom */
    }
}

h4{
    text-align: right;
    color: #f9f9f5;
}
h6{
    color: #006ae2;
}

p{
    margin-block-start: 1.2rem;
    margin-block-end: 0;
    font-size: larger;
    
    
}
.row{
    row-gap: 20px;
}

.card-img-top{
    height: auto;
    width: auto;
}
.navbar .navbar-nav .nav-link {
    padding: 10px 15px;
    font-size: 20px;
    transition: .5s;
   }
   .navbar{
		     background-color: #154a99 !important;/* #006ae2 ovde se menja boja skroz gore footer */
   }
   .nav-link{
    color: #000000 !important;
   
   }
   .nav-link:hover{
    color: #fff!important;
   }
   .active{
    color: #fff!important;
   }
   footer {
    position: relative;
    background-image: url('./img/MainKamion.png'); /* Ovo dole tu sam dodao sliku */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    padding: 60px 20px;
    text-align: center;
}

/* Tamni overlay */
footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Tamni overlay (60% providnosti) */
    z-index: 0;
}

/* Tekst i ostali sadržaji */
footer * {
    position: relative;
    z-index: 1; /* Tekst će biti iznad overlay-a */
}
   footer a {
    color: #ffffff; /* #ffffff Svetlo zelena za linkove */
    text-decoration: underline;
    margin: 5px 0;
    display: block;
   }
   footer a:hover {
    text-decoration: none;
   }
   footer h1{
    font-weight: bolder;
   }
   footer h1, footer h4 {
    color: #f1f1f1; /* Svetlo zelena boja za naslove #f1f1f1 */
    margin-bottom: 15px;
   }
   .footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
   }
   .footer-left {
    text-align: center;
    margin-bottom: 30px;
   }
   .footer-subscribe {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    padding: 5px;
    border-radius: 30px;
    max-width: 400px;
    margin: 20px auto;
   }
   .footer-subscribe input[type="email"] {
    border: none;
    padding: 10px;
    flex: 1;
    border-radius: 20px 0 0 20px;
    outline: none;
   }
   .footer-subscribe button {
    background-color: #ffffff;
    border: none;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 0 20px 20px 0;
    cursor: pointer;
   }
   .footer-subscribe button:hover {
    background-color: #8abb54;
   }
   .footer-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    margin-bottom: 30px;
   }
   .footer-column {
    flex: 1;
    margin: 10px;
    min-width: 200px;
   
   }
   .footer-column h4 {
    border-bottom: 1px solid #ffffff;
    padding-bottom: 10px;
    margin-bottom: 15px;
   }
   .footer-column p {
    margin-bottom: 10px;
   }
   .footer-social {
    text-align: center;
    margin-top: 20px;
   }
   .social-links {
    display: flex;
    gap: 15px;
    justify-content: center;
   }
   .social-links a {
    background-color: #81c408; /*#81c408*/
    padding: 10px;
    border-radius: 50%;
    text-align: center;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: bold;
   }
   .social-links a:hover {
    background-color: #8abb54; /*#8abb54*/
   }
   .payment-options img {
    width: 150px; /* 8abb54 Prilagodjena širina za slike načina plaćanja */
    margin-top: 10px;
   }
   #hero-section {
    background-color: #dadada !important; /* Svetlo siva boja pozadine */
    padding: 60px 0;
    }
    .organic-label {
        color: #ffa726; /* Narandžasta boja za oznaku "100% Organic Foods" */
        font-weight: bold;
        font-size: 2rem;
        }
        .hero-title {
        color: #81c408; /* Svetlo zelena boja naslova */
        font-size: 3rem;
        font-weight: bold;
        margin-top: 15px;
        }
        .carousel {
        margin-top: 20px;
        }
        .carousel-inner img {
        object-fit: cover;
        height: 300px; /* Prilagodi visinu slajdera */
        border-radius: 15px;
        }
        .carousel-caption {
        position: absolute;
        background-color: rgba(255, 152, 0, 0.8); /* Poluprovidna narandžasta */
        padding: 2px 2px;
        border-radius: 10px;
        color: #fff;
        font-weight: bold;
        font-size: xx-large;
        width: auto; /* Umesto da zauzima celu širinu, neka se prilagodi tekstu */
        white-space: nowrap; /* Sprečava prelazak teksta u novi red */
        }
        .carousel-control-prev-icon,
        .carousel-control-next-icon {
        filter: invert(100%);
        }
        .btn-success{
            background-color: #154a99;
            color: #f9f9f5;
            }
            .btn-success:hover{
            background-color: #0c2e55;
            color: #f9f9f5;
            border: #006ae2;
            }
            section {
            margin-top: 2rem;
            }
            .portfolio{
            background-color:#f9f9f5 !important ; /* f9f9f5 006ae2 */
            }
            .card{
            background-color: #f9f9f5;
            }
            .carousel-item img {
                opacity: 0;
                transition: opacity 1s ease-in-out; /* Kontrola trajanja i tipa tranzicije */
                }
                .carousel-item.active img {
                opacity: 1; /* Kada je aktivna, slika postaje potpuno vidljiva */
                }
                /* Osnovni stil */
.organic-label span {
    opacity: 0; /* Sakriva svaki span na početku */
    transform: translateY(10px); /* Postavlja lagani pomak prema dole za efekat */
    display: inline-block;
    animation: fadeInUp 0.5s forwards;
    }
    /* Animacija */
    @keyframes fadeInUp {
    from {
    opacity: 0;
    transform: translateY(10px);
    }
    to {
    opacity: 1;
    transform: translateY(0);
    }
    }
    /* Kašnjenje za svaki span */
    .organic-label span:nth-child(1) {
    animation-delay: 0s;
    }
    .organic-label span:nth-child(2) {
    animation-delay: 0.2s;
    }
    .organic-label span:nth-child(3) {
    animation-delay: 0.4s;
    }
    .organic-label span:nth-child(4) {
    animation-delay: 0.6s;
    }
    .organic-label span:nth-child(5) {
    animation-delay: 0.8s;
    }            
    h1{
        text-align: center;
    }
    ul {
        font-size: 18px; /* Povećanje fonta na 18px */
    }
    h2{
        text-align: center;
    }
    .floating-button {
        position: fixed;
        bottom: 20px; /* Razmak od donje ivice ekrana */
        left: 20px; /* Razmak od desne ivice ekrana */
        background-color: #ff0000; /* Crvena boja#ff0000 */
        color: #ffffff; /* Bela boja teksta */
        padding: 15px 20px;
        border: none;
        border-radius: 50%; /* Okruglo dugme */
        font-size: 18px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Blaga senka */
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        z-index: 1000; /* Održava dugme iznad ostalih elemenata */
    }

    .floating-button:hover {
        background-color: #cc0000; /* Tamnija crvena za hover efekat */
    }
	.floating-button {/* Slusalica da skace */
    cursor: pointer;
    animation: bounce 1s infinite alternate; /* Animacija koja traje 1 sekundu i ponavlja se */
}

/* Animacija skakanja */
@keyframes bounce {
    0% {
        transform: translateY(0); /* Početna pozicija */
    }
    50% {
        transform: translateY(-10px); /* Pomaknite ga 10px gore */
    }
    100% {
        transform: translateY(0); /* Povratak u početnu poziciju */
    }
}

    .content {
        padding: 20px;
    }
    .map-container{
        position: relative;
        width: 100%;
    }

    .contact-info{
        font-size: clamp(1rem, 2vw, 2rem);
    }
    .container{
        overflow-x: hidden;
        padding: 0;

        }
.locations-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Dve kolone */
  gap: 10px; /* Razmak između stavki */
}

.locations-list li {
  list-style-type: none;
}

.locations-list a {
  text-decoration: none;
  color: #FFFFFF; /* Bela boja linka */
  font-weight: bold;
  font-size: 12px; /* Smanjuje veličinu fonta */
}

.locations-list a:hover {
  color: #154a99; /* Tamnija crvena na hover */
}
.footer-slideshow {
  position: relative;
  height: 400px;
  overflow: hidden;
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sva 5 background sloja */
.footer-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: fadeSlideshow 25s infinite;
  z-index: 1;
}

.bg1 {
  background-image: url('img/bg1.png'); /* Prva slika */
  animation-delay: 0s;
}

.bg2 {
  background-image: url('img/bg2.png'); /* Druga slika */
  animation-delay: 5s;
}

.bg3 {
  background-image: url('img/bg3.jpg'); /* Treća slika */
  animation-delay: 10s;
}
.bg4 {
  background-image: url('img/bg4.jpg'); /* Cetvrta slika */
  animation-delay: 15s;
}
.bg5 {
  background-image: url('img/bg5.jpg'); /* Peta slika */
  animation-delay: 20s;
}

/* Fade animacija */
@keyframes fadeSlideshow {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  30%  { opacity: 1; }
  40%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes slideDown {
  0% {
    transform: translateY(-100%); /* Početna pozicija je iznad ekrana */
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(0); /* Tekst dolazi na svoju finalnu poziciju */
    opacity: 1;
  }
}

.footer-content {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 3;
  color: white;
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6);
  animation: slideDown 1s ease-out;
  padding: 0 1rem; /* Dodaj padding da tekst ne ide u ivicu */
  width: 90%; /* Ograniči širinu da ne izlazi van */
  max-width: 600px; /* Opcionalno, da ne bude preširok */
  
  /* Dodajemo animaciju */
  animation: slideDown 1s ease-out;
}

/* Overlay */
.footer-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4); /* Tamni prekrivač */
  z-index: 1; /* Niži z-index */
}
.slogan {
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  color: #0077ff;
  margin-top: 40px;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}

.slogan:hover {
  color: #154a99;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

#naslovAndric {
  text-align: center;
  font-size: 3.5rem; /* Povećan font za bolji izgled */
  color: #154a99; /* Tvoja plava boja */
  font-weight: bold;
  margin-bottom: 30px;
  letter-spacing: 1px; /* Razmak između slova za bolji vizuelni efekat */
  text-transform: uppercase; /* Svi tekstovi velika slova za isticanje */
  position: relative;
  animation: popIn 1s ease-out; /* Animacija za ulazak */
  border-bottom: 3px solid #154a99; /* Plava linija ispod naslova */
  padding-bottom: 10px;
}

#naslovAndric:hover {
  color: #1a68b9; /* Tamnija plava kada se pređe preko */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); /* Senka za dodatni efekat */
}

.dogovor-poruka {
  background-color: #154a99;
  color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  margin: 30px auto;
  max-width: 800px;
  font-size: 1.2rem;
}
.dogovor-poruka strong {
  color: #ffa726; /* istakni ključni deo poruke */
}