*{
    box-sizing: border-box;
}
/*-------------------------------- b5a188  #D92323-------------------------------*/
body{
    background-color: #262626;
    min-width: 572px;
}
/*-------------------------------------*/
#naslov{
   font-size: 34px; 
}
/*Header*/
header{
    display: flex;
    justify-content: space-between;
    background-color: rgba(217, 90, 78);
    min-height: 50px;
    border-radius: 5px;
    align-items: center;
    box-shadow: 10px 5px 10px 5px;
    z-index: 1; 
    flex-wrap: wrap;
    position: sticky;
    top: 0;
}
/*-------------------------------------*/
.logo img{
    height: 140px;
    width:140px;
    border-radius: 20px;
    padding-left: 5px;
}
/*-------------------------------------*/
ul{
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;   
}
/*-------------------------------------*/
li{
    margin-left: 10px;
    margin-right: 60px; 
}
/*-------------------------------------*/
a{
    text-decoration: none;
    color: black;
    font-size: x-large;
}
/*Padajući izbornik*/
.dropdown .dropbtn {
    border: none;
    outline: none;
    color: black;
    font-size: x-large;
}

.dropdown-content {
    display: none;
    margin: auto;
    max-width: 100px;
}

.dropdown-content a {
    text-decoration: none;
    display: block;
    text-align: center;
}

.dropdown:hover .dropdown-content {
    display: block;
}
     
/*Efekt kada hovera se preko linkova*/
a:after {    
    
    content: "";
    display: block;
    height: 4px;
    left: 50%;
    background: black;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
  }
  a:hover:after { 
    width: 100%; 
    left: 0; 
  }

/*---------------------------------*/
/*Animacija kada se klikne link */
html {
	scroll-behavior: smooth;
}
/*-------------------------------------*/
section {
	height: 100vh;
}
/*-------------------------------------*/
nav ul {
	list-style-type: none;
	padding: 0;
	display: flex;
	justify-content: space-around;
}
/*-------------------------------------*/
nav ul li a {
	text-decoration: none;
	color: black;
	/*position: relative;*/
}
/*-------------------------------------*/
nav ul li a::before {
	content: "";
	bottom: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background-color: black;
	transition: width 0.3s ease-out;
}
/*-------------------------------------*/

nav ul li a:hover::before {
	width: 100%;
}
/*-------------------------------------*/
@keyframes smoothScroll {
	0% {
		transform: translateY(-100px);
	}
	100% {
		transform: translateY(0);
	}
}
/*kraj animacije*/
/*Kraj headera*/
/*Slider i slike slidera*/
.slider{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-top: 150px;
    -border: white dotted 5px;
}
/*-------------------------------------*/

#Slika4{
    max-width: 500px;
    max-height: 350px;
    flex-grow: 1;
    border-radius: 80px;
    padding: 10px;
    box-shadow: 5px 5px 10px 2px;
    background-color: #D95A4E;
    
}
#Slika4:hover{
    background-color: #F2F2F2;
    transition: 1s;
}
/*-------------------------------------*/
#Slika{
    max-width: 500px;
    max-height: 350px;
    flex-grow: 1;
    border-radius: 80px;
    padding: 10px;
    box-shadow: 5px 5px 10px 2px;
    background-color: #D95A4E;
    
    
}
#Slika:hover{
    background-color: #F2F2F2;
    transition: 1s;
}

/*-------------------------------------*/


#Slika3{
    max-width: 500px;
    max-height: 350px;
    flex-grow: 1;
    border-radius: 80px;
    padding: 10px;
    box-shadow: 10px 5px 10px 2px;
    background-color: #D95A4E;
    
}
#Slika3:hover{
    background-color: #F2F2F2;
    transition: 1s;
}

/*-------------------------------------*/

/*Kraj slidera*/
/*-------------------------------------*/
/*Main*/
main{
    flex-wrap: wrap;
    margin-top: 150px;
}
/*-------------------------------------*/
.row-art{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: rgba(217, 90, 78, 0.9);
    max-height: 600px;
    width: 100%;
    border-radius: 5px;
    box-shadow: 10px 5px 10px 5px;
    margin-top: 150px;
    text-align: center;
    flex-wrap: wrap;
    font-size: 20px;
   
}
.row-art:hover{
    border: #F2F2F2 10px solid;
    transition: 0.5s;
}
/*-------------------------------------*/
article h1{
    text-decoration: underline;
    flex-wrap: wrap;
}
/*-------------------------------------*/
#Slika2{
    flex-basis: 100px;
    height: 100px;
}

/*-------------------------------------*/
/*O nama*/
#Onama{
    margin-top: 80px;
    min-height: 200px;
    background-color: rgba(217, 90, 78, 0.9);
    font-size: 20px;
    border-radius: 5px;  
    width: 600px;
    box-shadow: 10px 5px 10px 8px;
    
}
/*-------------------------------------*/
.kontenjer2{
    display: flex;
    justify-content: space-around; 
    flex-wrap: wrap;  
} 
/*-------------------------------------*/
.artik2{
    padding-left: 50px;
}
#Onama:hover{
    transform: scale(1.1);
    transition: 1s;
}
/*-------------------------------------*/
#logo-onama{
    width: 250px;
    background-color: #D95A4E;
    border-radius: 20px;
    margin-top: 60px;
    box-shadow: 10px 5px 10px 5px;
}
/*-------------------------------------*/
h2{
   margin: auto;
   margin-top: 300px;
   font-size: 30px;
   text-align: center;
   background-color: #D95A4E;
   width: 200px;
   border-radius: 80px;
   text-decoration: underline;
   box-shadow: 10px 5px 10px 5px;
}
/*kraj o nama*/

/*meni*/
#meni{
    border-radius: 5px; 
    margin-top: 60px;
    font-size: x-large;
    background-color: rgba(77, 74, 74, 0.3);
    display: flex;
    justify-content: space-evenly;
    color: #d8d3d3; 
    flex-wrap: wrap;  
    text-align: center;  
    text-shadow: 2px 2px black;
}
/*-------------------------------------*/
#Naslov-meni{
    margin-top: 300px;
}
/*-------------------------------------*/
h3{
    color: #d8d3d3;
    text-decoration:  underline #F2F2F2;
    text-shadow: 2px 2px black;
}
/*-------------------------------------*/
#meni img{
    width: 160px;
    height: 140px;
    border-radius: 20px;
    display: flex;
    margin: auto;
}
/*-------------------------------------*/
/*Button effekti i boje*/
         
button{
    background-image: linear-gradient(to right, #000000 0%, #e74c3c  51%, #000000  100%);
    margin: 10px;
    padding: 15px 45px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    border-radius: 10px;
    box-shadow: 0 0 20px black;
    color: white;
}

button:hover {
    background-position: right center; 
    text-decoration: none;
    box-shadow: 0 0 20px #eee;
}

/*-------------------------------------*/
.article-meni{
    flex-basis: 600px;   
}
/*Hover effekt preko menija*/
.article-meni:hover{
    transform: scale(1.05);
    transition: 1s;
}
/*kraji menija*/
/*-------------------------------------*/
/*gelrija*/
.h1{
    margin: auto;
    margin-top: 150px;
    text-align: center;
    background-color: #D95A4E;
    width: 300px;
    border-radius: 80px;
    text-decoration: underline;
    box-shadow: 10px 5px 10px 5px;
 }
.galerija{
    margin-top: 150px;
    padding-top: 10px;
    background-color: rgba(77, 74, 74, 0.3);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
/*-------------------------------------*/
.slike{
    width: 400px;
    height: 350px;
    padding: 10px;
    border-radius: 60px;
}
/*-------------------------------------*/
.slike:hover{
    transform: scale(1.1);
    transition: 1s;
}
/*-------------------------------------*/
/*kraj galeriji*/
/*lokacija*/
.lokacija{
    display: flex;
    margin-top: 150px;
    justify-content: space-between;
    align-items: center;
   font-size: 30px;
   min-height: 450px;
   background-color: rgba(217, 90, 78, 0.9);
   flex-wrap: wrap;
   border-radius: 10px;
   min-width: 450px;
}


.lokacija p{
    flex-basis: 400px;
}
/*kraj lokacija*/
/*-------------------------------------*/
/*rezervacija*/
.rezervacija{
    margin-top: 150px;
    background-color: rgba(217, 90, 78, 0.9);
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    border-radius: 10px;
    font-size: large;

}
/*-------------------------------------*/
input{
    min-width: 400px;
    height: 40px;
}
/*-------------------------------------*/
.rezervacija button{
    margin-top: 50px;
    width: 300px;
    height: 40px;
}
/*kraj rezervacija*/
/*-------------------------------------*/
/*recenzije*/
.recenzije{
    margin-top: 150px;
    min-height: 300px;
    background-color: #D95A4E;
    flex-wrap: wrap;
    display: flex;
    justify-content: space-evenly; 
    padding: 5px;
}
/*Paragrafi recenzija*/
.box1{
    background-color: #262626;
    width: 400px;
    flex-wrap: wrap;
    border-radius: 20px;
    color: rgb(185, 183, 183);
}
/*-------------------------------------*/
.box2{
    background-color: #262626;
    width: 400px;
    flex-wrap: wrap;
    border-radius: 20px;
    color: rgb(185, 183, 183);
}
/*-------------------------------------*/
.box3{
    background-color: #262626;
    width: 400px;
    flex-wrap: wrap;
    border-radius: 20px;
    color: rgb(185, 183, 183);
}
/*-------------------------------------*/
.box4{
    background-color: #262626;
    width: 400px;
    flex-wrap: wrap;
    border-radius: 20px;
    color: rgb(185, 183, 183);
}
/*-------------------------------------*/
.box5{
    background-color: #262626;
    width: 400px;
    flex-wrap: wrap;
    border-radius: 20px;
    color: rgb(185, 183, 183);
}
/*-------------------------------------*/
/*kraj  recenzija*/
/* kraj maina*/

footer{
    margin-top: 150px;
    min-height: 100px;
    background-color: #D95A4E;
    font-size: 25px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.ikone{
    width: 70px;
    padding-left: 3px;
}