/* Resetovanje margina i padding-a */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



/* Pozadinska boja i font za telo */

body {

    font-family: Arial, sans-serif;

    line-height: 1.6;

    background-color: #f4f4f4;

}



/* Stilizacija header-a */

header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background-color: #333;

    color: white;

    padding: 20px;

}



/* Logo stil */

.logo {

    font-size: 24px;

    font-weight: bold;

}



/* Navigacija stil */

nav {

    display: flex;

}



nav a {

    color: white;

    text-decoration: none;

    margin-left: 20px;

    font-size: 16px;

}



nav a:hover {

    text-decoration: underline;

}



/* Stilizacija glavnog sadržaja */

main {

    padding: 20px;

    text-align: center;

}



main h1 {

    font-size: 32px;

    color: #333;

}



main p {

    font-size: 18px;

    color: #666;

}



/* Footer stil */

footer {

    background-color: #333;

    color: white;

    text-align: center;

    padding: 10px;

    position: fixed;

    width: 100%;

    bottom: 0;

}

#mreze{

    display:flex;

    justify-content: end;

}

#mreze .bi{

    margin-right: 5px;

}

footer p {

    font-size: 14px;

}



.ikonice{

	display:flex;

}

.bi-instagram:hover{

	color:black;

}



.bi-facebook:hover{

	color:black;

}



.image-container {

    position: relative;

    width: 100%;

    height: auto;

}



.image-container img {

    width: 100%;

    height: auto;

}



.image-container .text-overlay{

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    color: white;

    font-size: 70px;

    font-weight: bold;

    text-align: center;

    padding: 10px 20px;

    border-radius: 8px;

}



.reservation-button {

    margin-top: 10px;

    padding: 10px 20px;

    font-size: 16px;

    color: white;

    background-color: red; /* Plava boja */

    border: none;

    border-radius: 5px;

    cursor: pointer;

    text-transform: uppercase;

    font-weight: bold;

}



.reservation-button:hover {

    background-color: #0056b3; /* Tamnija plava pri hover-u */

}



.full-width-image {

    width: 100%; /* Puna širina ekrana */

    height: auto; /* Automatski prilagođavanje visine */

}



.content-section {

    display: flex;

    align-items: center;

    margin: 20px auto; /* Razmak sa svih strana */

    max-width: 1200px; /* Maksimalna širina sadržaja */

}



.content-section img {

    width: 40%; /* Širina slike */

    height: auto;

    border-radius: 10px;

    margin: 0 20px;

}



.content-text {

    width: 50%; /* Širina teksta */

    font-family: Arial, sans-serif;

    color: #333;

    line-height: 1.6;

}



.content-text h2 {

    color: #007BFF;

    margin-bottom: 15px;

}







#kontakt {

  text-align: center;       /* Centriranje kontakt informacija */

  margin-bottom: 5px;      /* Razmak između kontakt informacija i naslova */

  margin-top: 60px;

}



#kontakt p {

  font-size: 20px;          /* Veličina fonta za kontakt informacije */

  margin: 10px ;            /* Razmak između svake linije */

  color: black;

}



#sredina {

  width: 100%;

  height:500px;

}



form{

    width: 500px;

    margin: 20px auto;

    border: 1px solid gray;

    border-radius: 5px;

}

p {

    margin: 0 30px;

}

input{

    display: block;

    padding: 8px 16px;

    margin: 10px auto;

    width: 90%;

    box-sizing: border-box;

    border-radius: 10px;

    border: 2px solid black

}

input[type="button"] {

    background-color: black;

    color: white;

}

input[type="button"]:hover {

    background-color: gray;

    color: black;

    cursor: pointer;

}

.content-section {

    display: flex;

    align-items: center;

    margin: 20px 0;

    padding: 20px;

    max-width: 1200px;

    margin: 20px auto;

}



.content-section:nth-child(even) {

    flex-direction: row-reverse; /* Menja redosled slike i teksta naizmenično */

}



.content-section img {

    width: 40%; /* Širina slike */

    height: auto;

    border-radius: 10px;

    margin: 0 20px;

}



.content-text {

    width: 50%; /* Širina tekstualnog dela */

    font-family: Arial, sans-serif;

    color: #333;

    line-height: 1.6;

}



.content-text h1 {

    color: red;/* Plava boja naslova */

    margin-bottom: 15px;

}

* {box-sizing: border-box}

body {font-family: Verdana, sans-serif; margin:0}

.mySlides {display: none}

img {vertical-align: middle;}



/* Slideshow container */

.slideshow-container {

  max-width: 1000px;

  position: relative;

  margin: auto;

}



.prev, .next {

  cursor: pointer;

  position: absolute;

  top: 50%;

  width: auto;

  padding: 16px;

  margin-top: -22px;

  color: white;

  font-weight: bold;

  font-size: 18px;

  transition: 0.6s ease;

  border-radius: 0 3px 3px 0;

  user-select: none;

}



.next {

  right: 0;

  border-radius: 3px 0 0 3px;

}



.prev:hover, .next:hover {

  background-color: rgba(0,0,0,0.8);

}



.dot {

  cursor: pointer;

  height: 15px;

  width: 15px;

  margin: 0 2px;

  background-color: #bbb;

  border-radius: 50%;

  display: inline-block;

  transition: background-color 0.6s ease;

}



.active, .dot:hover {

  background-color: #717171;

}



.fade {

  animation-name: fade;

  animation-duration: 1.5s;

}



@keyframes fade {

  from {opacity: .4} 

  to {opacity: 1}

}



@media only screen and (max-width: 300px) {

  .prev, .next,.text {font-size: 11px}

}