html {
  scroll-behavior: smooth; /* Omogućava glatko pomeranje */
}
/* Osnovni stilovi za telo stranice */
body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #ffffff; /* Pozadina stranice je bijela */
}

/* Stil za header sekciju */
header {
  background-color: #3b2827; /* Tamno smedja pozadina za header */
  color: #c9a75b; /* Tekst u headeru boja */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 28px;
  min-height: 84px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Stil za brand link u headeru */
.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.brand-link:hover {
  transform: translateY(-2px);
  opacity: 0.95;
}

.brand-logo {
  width: auto;
  height: 100%;
  max-height: 56px;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.brand-text {
  font-family: 'Great Vibes', cursive;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #f5e4b3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Stil za navigaciju u headeru */
nav ul {
  list-style: none; /* Uklanja listu tačaka */
  display: flex;
  margin: 0 0 0 24px;
  padding: 0;
  cursor: pointer; /* Dodajemo kursor kao ruka */
}

/* Stil za svaki list item u navigaciji */
nav ul li {
  margin-right: 36px;
}

/* Stil za linkove u navigaciji */
nav ul li a {
  color: #c9a75b; /* Bež boja za tekst linkova */
  text-decoration: none;
  font-weight: 500;
  position: relative;
  padding-bottom: 5px;
  transition: color 0.3s ease;
  font-size: 23px;

}

/* Efekat na hover za linkove */
nav ul li a:hover {
  color: #c9a75b;
}

/* Animacija linije ispod linka prilikom hovera */
nav ul li a:hover::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #c9a75b;
  bottom: 0;
  left: 0;
}

/* Stil za dugme za jezik (ENG) */
.language-button button {
  background-color: transparent;
  color: #c9a75b; /* Bež boja */
  border: 1px solid #c9a75b; /* Bež okvir */
  font-size: 18px;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 30px; /* Zaobljeni kutovi dugmeta */
  transition: all 0.3s ease; /* Glatka animacija */
}

/* Hover efekat za dugme za jezik*/
.language-button button:hover {
  background-color: #c9a75b; /* Bež pozadina kad je hover */
  color: white; /* Promjena boje teksta */
  transform: scale(1.05); /* Lagano uvećanje dugmeta */
}
.language-button {
  position: relative; /* Potrebno da pozicioniramo jezički tekst */
}

.lang-message {
  display: none;
  position: absolute;
  top: 40px; /* Razmak od dugmeta */
  left: -150px;
  background-color: rgba(40, 22, 1, 0.7); /* Poluprovidna pozadina */
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  width: max-content;
  white-space: nowrap;
}

/* Hamburger meni */
.hamburger-menu {
display: none;
flex-direction: column;
justify-content: space-between;
width: 25px;
height: 20px;
margin-top: -5px;}

.hamburger-menu .bar {
background-color: #c9a75b;
height: 3px;
width: 100%;
border-radius: 5px;
}

/* Stil za navigaciju na mobilnim uređajima */
@media screen and (max-width: 768px) {
header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  min-height: 72px;
  position: fixed;
}

.lang-message {
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: min(220px, calc(100vw - 24px));
  text-align: center;
  white-space: normal;
  z-index: 1100;
}

.brand-link {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

header .language-button {
  position: static;
  margin-left: 8px;
  order: 3;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brand-text {
  display: none;
}

.brand-logo {
  width: auto;
  height: 100%;
  max-height: 48px;
}

/* Sakrij meni na početku */
nav ul {
    list-style: none;
    padding: 0;
    display: none; /* Početno sakrivanje menija */
    flex-direction: column;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    width: 100vw;
    margin: 0;
    background-color: #3b2827;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    border-radius: 0;
}

nav ul li {
    margin: 0;
    text-align: center;
}

/* Padajuci meni sa navigacijama */
nav ul li a {
    padding: 14px 16px;
    width: 100%;
    display: block;
    background-color: #3b2827;
    color: #c9a75b;
    font-size: 20px;
    box-sizing: border-box;
    text-align: center;
  }

/* Prikazivanje menija kada je aktiviran hamburger */
.hamburger-menu.active + ul {
    display: flex;
}

/* Prikazivanje hamburger menija */
.hamburger-menu {
  display: flex;
  margin-left: 8px;
  margin-right: 0;
  order: 2;
  align-items: center;
  flex-shrink: 0;
}

/* Ensure nav wraps hamburger + hidden menu nicely */
nav {
  display: flex;
  align-items: center;
}

/* Stil za dugme za jezik na mobilnim uređajima */
.language-button button {
    background-color: transparent;
    color: #c9a75b;
    border: 1px #c9a75b solid;
    font-size: 12px;
    padding: 10px 10px;
}
}

/* Hero sekcija na desktopu i tabletima */
.hero {
  height: calc(100vh - 84px);
  margin-top: 84px;
  background: url('images/image0.png') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  background-color: #2d1812;
  background-size: cover; /* Osigurava da slika pokrije celu sekciju */
  background-position: center center; /* Centriranje pozadinske slike */
}

/* Responzivnost za mobilne uređaje */
@media (max-width: 768px) {
  .hero {
      height: min(48vh, calc(100svh - 72px));
      min-height: 420px;
      margin-top: 72px;
      background-position: center 35%; /* Bolje pozicioniranje za mobilne uređaje */
      padding: 0 16px; /* Dodajemo marginu sa strane kako bi tekst bio čitljiviji */
      background-size: cover; /* Osigurava da slika ostane proporcionalna */
      box-sizing: border-box;
      margin-bottom: 100px;
  }
}

/* Responzivnost za landscape način (mobilni uređaji u horizontalnoj orijentaciji) */
@media (max-width: 768px) and (orientation: landscape) {
  .hero {
      height: 100vh; /* Puna visina ekrana u landscape načinu */
      background-position: center center; /* Centriranje pozadinske slike */
  }
}


/* Sekcije stranice */
section {
  padding: 60px 0px;
  background-color: #ddc89c;
}

/* O nama sekcija */
/* Glavni kontejner za sekciju */
#o-nama-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 100px auto;
  max-width: 1750px;
  height: 650px;
  background-color: transparent;
}
/* Pozadinske slike */
.background-img {
  position: absolute;
  width: 40%; /* Svaka slika zauzima 40% širine */
  height: 100%;
  object-fit: cover;
  opacity: 0.5; /* Blago providne */
  z-index: 0;
  border-radius: 10px;
}

.left-img {
  left: 0;
}

.right-img {
  right: 0;
}

/* Box sa tekstom */
#o-nama {
  position: relative;
  z-index: 1;
  max-width: 900px;
  height: 720px;
  padding: 35px;
  background-color: rgba(255, 255, 255, 0.9); /* Blago providna pozadina */
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(50, 30, 10, 0.1);
  transform: scale(1);
  transition: all 0.3s ease-in-out;
  text-align: center;
}
/* Hover efekt za box sa tekstom */
#o-nama:hover {
  background-color: rgba(255, 255, 255, 1); /* Povecajte neprozirnost pozadine */
  box-shadow: 0 10px 30px rgba(50, 30, 10, 0.3); /* Veća senka pri hoveru */
  transform: scale(1.03); /* Blago uvećanje box-a */
}
/* Stilovi za tekst */
#o-nama h1 {
  font-size: 3rem;
  color: #543515;
  margin-bottom: 20px;
}

#o-nama h2 {
  font-size: 2.2rem;
  color: #664422;
  margin-bottom: 20px;
}

#o-nama p {
  font-size: 1.6rem;
  color: #664523;
  line-height: 1.7;
}

/* Responzivni dizajn */
@media screen and (max-width: 768px) {
  #o-nama-container {
    flex-direction: column;
    height: 70vh;
    margin-top: 0px; /* Smanjena gornja margina */
    padding: 0px; /* Smanjeni padding sa strane */
  }
   
  /* Lijeva slika */
  .left-img {
    display: block; /* Osigurajte da levo slika bude vidljiva */
    width: 100%; /* Podesite širinu leve slike da pokrije celu širinu */
    height: 95vh; /* Automatski podešava visinu */
    opacity: 1; /* Povećajte neprozirnost ako želite da bude jasnija */
    border-radius: 0; /* Uklonite zaobljeni ugao */
    margin-top: 2500px;
    display: none;
  }

  /* Desna slika */
  .right-img {
    display: block; /* Osigurajte da levo slika bude vidljiva */
    width: 100%; /* Podesite širinu leve slike da pokrije celu širinu */
    height: 95vh; /* Automatski podešava visinu */
    opacity: 1; /* Povećajte neprozirnost ako želite da bude jasnija */
    border-radius: 0; /* Uklonite zaobljeni ugao */
    /* margin-top: 1300px; */
  }

  /* Sakrij slike u landscape režimu */
@media screen and (orientation: landscape) {
  .left-img,
  .right-img {
    display: none;
  }
}

#o-nama {
  width: 90%;
  padding: 20px;
}
#o-nama h1 {
font-size: 1.8rem; /* Smanjeno sa 3rem */
}

#o-nama h2 {
font-size: 1.2rem; /* Smanjeno sa 2.2rem */
}

#o-nama p {
font-size: 1rem; /* Smanjeno sa 1.6rem */
}
}

/* Slideshow stil */
.slideshow-section {
  padding: 40px 20px 60px;
  background-color: #ddc89c;
}

.slideshow-container {
  width: 80%;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide-track {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: visible;
  border-radius: 16px;
  background-color: transparent;
  box-shadow: none;
  cursor: grab;
  touch-action: none;
  user-select: none;
  min-height: 320px;
}

.slide-track.dragging {
  cursor: grabbing;
}

.mySlides {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.45s ease, filter 0.45s ease, opacity 0.45s ease;
  will-change: transform, opacity;
}

.mySlides img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 16px;
}

.mySlides.prev-slide,
.mySlides.next-slide {
  width: 70%;
  height: 78%;
  top: 11%;
  opacity: 0.85;
  filter: blur(2px);
  z-index: 1;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.mySlides.prev-slide {
  left: -8%;
  transform: rotate(-8deg);
}

.mySlides.next-slide {
  right: -8%;
  transform: rotate(8deg);
}

.mySlides.active-slide {
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: scale(1);
  filter: blur(0);
  opacity: 1;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

.mySlides.hidden-slide {
  display: none;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background-color: rgba(59, 40, 39, 0.8);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.carousel-btn:hover {
  background-color: rgba(59, 40, 39, 0.95);
}

.carousel-btn.prev {
  left: -34px;
}

.carousel-btn.next {
  right: -34px;
}

.fade {
  animation: fade 0.5s ease-in-out;
}

.mySlides.slide-out-left {
  animation: slideOutLeft 0.45s ease forwards;
  z-index: 3;
}

.mySlides.slide-out-right {
  animation: slideOutRight 0.45s ease forwards;
  z-index: 3;
}

.mySlides.slide-in-right {
  animation: slideInRight 0.45s ease forwards;
  z-index: 4;
}

.mySlides.slide-in-left {
  animation: slideInLeft 0.45s ease forwards;
  z-index: 4;
}

@keyframes fade {
  0% {
    opacity: 0;
    transform: translateX(24px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateX(-100%) scale(0.92);
    opacity: 0;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateX(100%) scale(0.92);
    opacity: 0;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%) scale(0.92);
    opacity: 0;
  }
  to {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%) scale(0.92);
    opacity: 0;
  }
  to {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

/* Stilovi za mobilne uređaje */
@media (max-width: 768px) {
  .slideshow-section {
    padding: 24px 12px 40px;
  }

  .slideshow-container {
    width: 92%;
  }

  .carousel-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .carousel-btn.prev {
    left: -28px;
  }

  .carousel-btn.next {
    right: -28px;
  }
}

/* Stil za dugme "JELOVNIK" */
#jelovnik {
  display: flex;                /* Omogućava flexbox raspored */
  justify-content: center;      /* Centriranje horizontalno */
  align-items: center;          /* Centriranje vertikalno */
}
#myBtn {
    background-color: #c9a75b; /* Zlatna boja pozadine dugmeta */
    color: white; /* Boja teksta */
    font-size: 24px; /* Veliki font za dugme */
    padding: 20px 40px; /* Prostor unutar dugmeta */
    border: none; /* Uklanja okvir */
    border-radius: 50px; /* Zaobljeni ivice */
    cursor: pointer; /* Prikazuje pokazivač miša kada pređe preko dugmeta */
    transition: all 0.3s ease; /* Animacija na svim promenama */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Sijenka oko dugmeta */    
}

/* Efekat kada korisnik pređe mišem (hover) */
#myBtn:hover {
    background-color: #3b2827; /* Tamnija pozadina na hover */
    transform: scale(1.1); /* Povećanje dugmeta na hover */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); /* Jača senka */
}

/* Efekat kada korisnik pritisne dugme (active) */
#myBtn:active {
    transform: scale(1.05); /* Malo smanjenje dugmeta prilikom klika */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* Manja senka kada je dugme kliknuto */
}

/* Stil za dugme na mobilnim uređajima (može se prilagoditi prema potrebi) */
@media screen and (max-width: 768px) {
    #myBtn {
        font-size: 20px; /* Manji font na mobilnim uređajima */
        padding: 15px 30px; /* Manje paddinga na mobilnim uređajima */
    }
}

/* JELOVNIK The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1100; /* Above the sticky header */
    left: 0;
    top: 84px;
    width: 100%; /* Full width */
    height: calc(100% - 84px); /* Leave space below the sticky header */
    overflow-y: auto; /* Omogućava vertikalno pomeranje sadržaja u modal-u */
    padding: 20px 0 30px;
    background-color: rgba(0,0,0,0.4); /* Pozadina iza modala crna sa providnom */
    box-sizing: border-box;
  }
  /* Modal Header */
  .modal-header {
    padding: 50px 16px;
    border-radius: 50px; /* Zaobljene ivice */
    background-color: #ffffff48; /* Pozadinska boja */
    color: #3b2827;              /* Boja slova */
    text-align: center;        /* Centriranje teksta */
  }

  /* Stilizovanje h2 unutar modal-header */
  .modal-header h2 {
    font-size: 2.5em; /* Veliki font za naslov */
    font-weight: bold; /* Boldovanje teksta */
    color: #3b2827;      /* Boja slova (možeš promeniti po želji) */
    margin: 0;         /* Uklanjanje margina oko h2 */
    font-family: 'Montserrat', sans-serif;
    display: inline-block; /* Blok element */
    border-bottom: 3px solid #3b2827;

  }

/* Stil za h3 unutar modala */
.modal-body h3 {
    font-size: 24px;  /* Veličina fonta */
    font-weight: bold;  /* Podebljana slova */
    color: #3b2827;  /* Siva boja teksta */
    margin: 20px 0;  /* Razmak iznad i ispod h3 */
    font-family: 'Montserrat', sans-serif;
}
  /* Modal Body */
  .modal-body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    padding: 20px;
    color: #3b2827;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    gap: 16px;
    align-items: start;
}
  
 /* Modal Content */
.modal-content {
    position: relative;
    background-color: #f2e9d7db;
    border-radius: 50px; /* Zaobljene ivice */
    margin: 0 auto 24px;
    padding: 50px; /* Prostor unutar modala */
    width: min(90%, 1100px);
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    animation-name: animatetop;
    animation-duration: 0.4s
  }
  
  /* Dodavanje Animacije */
  @keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
  }
  
  /* The Close Button */
  .close {
    color: #C9A85B;
    float: right;
    font-size: 45px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

  /* Collapsible stil */
.collapsible-container {
  margin-bottom: 0;
}

.collapsible {
  background-color: #e3c98b;
  color: #4a2f1d;
  cursor: pointer;
  padding: 8px 18px;
  width: 100%;
  text-align: left;
  font-size: 18px;
  margin: 4px 0;
  border-radius: 50px; /* Zaobljene ivice */
  box-sizing: border-box;
  border: 2px solid #d0b06b;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.collapsible:hover {
  background-color: #dcc07a;
}

.collapsible-content {
  padding: 0 18px;
  display: none;
  overflow-y: auto; /* Omogućava vertikalno pomeranje sadržaja u modal-u */
  background-color: #e7dac0;
}

/* Responsiveness for smaller screens (Mobile) */
@media (max-width: 768px) {
  /* Center modal background */
  .modal {
      top: 72px;
      height: calc(100% - 72px);
      padding: 16px 0 24px;
      overflow-y: auto; /* Omogućava vertikalno pomeranje sadržaja u modal-u */
  }

  /* Modal content adjustments */
  .modal-content {
      width: min(94%, 420px); /* Smanjujemo širinu modala */
      padding: 15px; /* Smanjujemo padding za manje uređaje */
      border-radius: 20px; /* Možete podesiti i zaobljene ivice */
  }

  .modal-body {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      grid-auto-flow: row;
      gap: 12px;
  }

  .collapsible {
      padding: 12px 14px;
      margin: 6px 0;
      border-width: 2px;
  }

  /* Optional: Adjust modal header text size */
  .modal-header h2 {
      font-size: 1.8em; /* Manja veličina fonta za mobilne uređaje */
  }

  /* Optional: Adjust modal body text size */
  .modal-body h3 {
      font-size: 1.5em; /* Manja veličina fonta za telo modala */
  }
}

/* Flex container za kartice */
.flip-card-container {
  display: flex; /* Koristi Flexbox za horizontalni raspored */
  flex-wrap: wrap; /* Omogućava prelazak na sledeći red ako je potrebno */
  gap: 110px; /* Razmak između kartica */
  justify-content: center; /* Prostor između kartica */
}

/* Flip kartica dizajn prednja strana - slika */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px; 
}

/* Pozicioniranje prednje i zadnje strane */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Pozicioniranje prednje i zadnje strane */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    font-size: 16px; /* Veličina fonta */
    font-weight: bold; /* Podebljan tekst */
    line-height: 0.7; /* Povećan razmak između redova */
  background-color: transparent;
  color: #3b2827;
}

/* Stil back side kartice */
.flip-card-back {
  background-color: #cbaf68;
  color: white;
  border-radius: 20px;
  padding: 20px 20px;   /* Tekst biranje koliko ce biti odvojen od ivica */
  transform: rotateY(180deg);
}

/* Responsivnost: na manjim ekranima kartice se postavljaju vertikalno */
@media (max-width: 768px) {
  .flip-card-container {
    flex-direction: column; /* Kartice se postavljaju u kolonu */
    align-items: center; /* Poravnanje kartica na sredinu */
  }

  .flip-card {
    margin-bottom: 20px; /* Razmak između kartica na mobilnim uređajima */
  }

  .flip-card-back {
    margin-left: -7%;
  }
}

 /* Sekcija sa uslugama */
 #usluge {
  background-color: #fff;
  padding: 60px 20px;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-top: 30px;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.container {
  max-width: 1200px;
  width: 100%;
  text-align: center;
  margin: 0 auto;  /* Centriranje kontejnera na stranici */
}

.section-title {
  font-size: 2.5em;
  color: #6f4d2b;
  margin-bottom: 40px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  width: 100%;
  justify-items: center;
}

.service-item {
  background: linear-gradient(135deg, #f7e8c6 0%, #e7c98d 100%);
  padding: 30px;
  border-radius: 12px;
  border: 1px solid rgba(111, 77, 43, 0.18);
  box-shadow: 0 10px 24px rgba(84, 53, 21, 0.16);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
  max-width: 500px;
}

.service-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 14px 28px rgba(84, 53, 21, 0.22);
}

.service-title {
  font-size: 1.8em;
  color: #5d4322;
  margin-bottom: 20px;
  font-weight: bold;
}

/* Stil za opis usluge */
.service-description {
  font-size: 1.1em;
  color: #4a3a2a;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* Stil za liste (ul) */
.event-list, .service-list {
  list-style: none;
  padding: 0;
  text-align: left;
}

/* Stil za liste */
.event-list li, .service-list li {
  font-size: 1.1em;
  color: #4d3f2f;
  margin-bottom: 12px;
}
/* Stil za tačkice ispred svake stavke u listi */
.event-list li::before, .service-list li::before {
  content: "•";
  color: #a78255;
  margin-right: 8px;
}

@media (max-width: 768px) {
  .section-title {
      font-size: 2em;
      margin-right: 10%;
      margin-top: -10%;

  }

  .service-title {
      font-size: 1.5em;
  }

  .service-description {
      font-size: 1em;
  }

  .service-grid {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Dodano za centriranje */
    width: 100%;
    max-width: 500px; /* Ograničava širinu kako bi sadržaj bio lepo prikazan */
    margin: 0 auto; /* Centriranje na stranici */
    padding: 0 15px; /* Dodan padding da se spreči preveliko pomeranje ka ivicama */
    box-sizing: border-box; /* Sprečava probleme sa padding-om */
}


  .service-item {
      width: 70%; /* Da ne bude previše široko na mobilnim uređajima */
      max-width: 350px;
  }
}
/* Kontakt sekcija */
#kontakt {
  background-color: #3b2827; /* Tamna braon boja */
  padding: 40px 20px;
  text-align: center;
  color: #fff; /* Bijeli tekst */
  margin-top: 60px;
}

.kontakt-header {
  margin-bottom: 40px;
}

.kontakt-header h2 {
  font-size: 36px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 10px;
}

.kontakt-header p {
  font-size: 21px;
  color: #c9a75b; /* Laka, siva boja za tekst */
}

.kontakt-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.kontakt-container > div {
  width: 100%;
  max-width: 100%;
}

.kontakt-item {
  background-color: #8b6f47; /* Dobar kontrast sa tamno braonom */
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center; /* Centriranje sadržaja unutar kvadratića */
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.kontakt-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.kontakt-item h3 {
  font-size: 24px;
  color: #f6e5c6; /* Žuti naslov */
  margin-bottom: 10px;
}

.kontakt-item p {
  font-size: 21px;
  margin-bottom: 10px;
}

.kontakt-item p strong {
  color: #fff; /* Bijeli tekst za jake informacije */
}

.kontakt-item a {
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.kontakt-item a:hover {
  color: #feeeac; /* Žuti hover efekt za linkove */
}

.maps-cta {
  display: block;
  width: 100%;
  max-width: 260px;
  margin: 12px auto 0;
  padding: 12px 20px;
  border: 3px solid #3b2827;
  border-radius: 999px;
  background-color: #c9a75b;
  color: #3b2827;
  font-family: inherit;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  box-shadow: 0 0 0 3px #f7e7bf, 0 6px 14px rgba(0, 0, 0, 0.16);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.maps-cta:hover {
  background-color: #e0b85f;
  box-shadow: 0 0 0 3px #fff3d0, 0 8px 16px rgba(0, 0, 0, 0.22);
  transform: translateY(-2px);
}

.maps-cta:focus-visible {
  outline: 3px solid #fff3d0;
  outline-offset: 2px;
}

/* Google Maps container */
.maps-container {
  margin-top: 60px;
  text-align: center;
}

.maps-container h2 {
  font-size: 35px;
  color: #c9a75b; /* Žuti naslov */
  margin-bottom: 17px;
  font-weight: bold;
}
.maps-container h3 {
  font-size: 25px;
  color: #fef2e1; /* Žuti naslov */
  margin-bottom: 20px;
  font-weight: bold;
}

.maps-container iframe {
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


/* Responsive dizajn za mobilne uređaje */
@media (max-width: 768px) {
  #scrollToTopBtn {
      display: block; /* Prikazivanje dugmeta na mobilnim uređajima */
  }
}

#kontakt {
  padding: 30px 15px; /* Manji padding sa strane */
}

.kontakt-container {
  gap: 20px;
}

.maps-container iframe {
  height: 350px; /* Manja visina na mobilnim uređajima */
}

/* Stil za dugme za povratak na vrh stranice */
#scrollToTopBtn {
  position: fixed;
  bottom: 20px;  /* Na dnu stranice */
  right: 20px;   /* Na desnoj strani */
  background-color: #8b4513bf;  /* Smeđa boja */
  color: white;
  border: none;
  border-radius: 50%;  /* Okrugli oblik */
  width: 50px;  /* Širina dugmeta */
  height: 50px;  /* Visina dugmeta */
  font-size: 22px;  /* Veličina strelice */
  display: none;  /* Početno skriveno */
  cursor: pointer;
  text-align: center;
  line-height: 50px;  /* Centriranje strelice */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);  /* Lagana sjena */
  transition: all 0.3s ease;
}

#scrollToTopBtn:hover {
  background-color: #83471c;  /* Tamnija smeđa boja pri hoveru */
  transform: scale(1.1);  /* Lagano povećanje pri hoveru */
}

#scrollToTopBtn:focus {
  outline: none;  /* Uklanja fokusni okvir */
}

/* Stil za animaciju */
@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

/* Stil za mobilne uređaje */
@media (max-width: 768px) {
#scrollToTopBtn {
  background-color: rgba(139, 69, 19, 0.7);  /* Smeđa boja sa prozirnošću */
    height: fit-content;  /* Veće dugme na mobilnim uređajima */
    font-size: 19px;  /* Veća strelica na mobilnim uređajima */
    z-index: 1;
}

}
/* Stil za animaciju */
@keyframes fadeIn {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}

/* Spriječavanje horizontalnog pomjeranja */
html, body {
overflow-x: hidden; /* Onemogućava horizontalno pomeranje */
width: 100%; /* Osigurava da širina bude 100% ekrana */
}

/* Opcionalno, dodajte na specifične elemente koji mogu izazvati problem */
.container, .service-grid, .modal-content {
width: 100%;
box-sizing: border-box; /* Uključuje padding i marginu u ukupnu širinu */
}