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

body,p{
margin:0;
    padding: 0;
    box-sizing: border-box;
font-family: 'Caviar Dreams', sans-serif;
}

h1,h2,h3,h4{
 font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

header {
background-color:#1F3A3A;
padding:16px 20px;
position: sticky;
top:0;
display:flex;
justify-content:space-between;
align-items:center;
z-index:1;
}

header h1{
font-size:25px;
color:white;
margin:0;
letter-spacing: 2px;
}

#menu{
display:flex;
gap:20px;
list-style:none;
margin:0;
}

#menu a{
color:white;
text-decoration:none;
}

a{
   color:white;
text-decoration:none; 
    }
    a:hover{ 
        color:#C46A2D
    }
#menu a:hover{
color:#C46A2D;
}

.hamburger{
display:none;
font-size:30px;
cursor:pointer;
color:white;
}

@media(max-width:1024px){
.hamburger{
	display:block;}
#menu{
display:none;
flex-direction:column;
background-color:#1F3A3A;
position:absolute;
top:60px;
left:0;
width:100%;
padding:15px 20px;
}
#menu.active{display:flex;}
}

.container {
display:flex;
background-image:linear-gradient(rgba(0,0,0,0.3)),url(img/foto.jpg);
background-size:cover;
background-position:center;
height:760px;
width:100%;
justify-content:center;
align-items:center;
}

.hero{
width:50%;
text-align:center;
display:flex;
flex-direction:column;
gap:30px;
}

h2 { color:white; font-size:9vh; }

p { color:white; padding:20px; font-size:18px; }

       button {
background-color:#1F3A3A;
border:1px solid #5E6B55;
border-radius:30px;
padding:10px 20px;
font-size:15px;
cursor:pointer;
color:#F3F1EC;
align-self:center;
width:auto;
font-family: 'Caviar Dreams', sans-serif;
}

         button:hover {
background-color:#162B2B;
border-color:#593D2D;
}

.onama{
display:flex;
justify-content:center;
width:100%;

}

.nama{
display:flex;
flex-direction:column;
align-items:center;
max-width:600px;
padding:60px 20px;
text-align:center;
border-radius:20px;
gap:20px;
}

#tekst{
color:#8E8A84;
margin:0;
}

#onama{
padding-top:60px;
    padding-left: 20px;
    padding-right: 20px;
color:#2B2A28;
font-size:45px;
text-align:center;
  
}

@keyframes slideFadeRight {
from { transform:translateX(-200px); opacity:0; }
to { transform:translateX(0); opacity:1; }
}

.onama { animation: slideFadeRight 2s forwards; }

.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:20px;
padding-left:40px;
padding-right:40px;
    padding-bottom:80px;
}

.img{
background:white;
border-radius:20px;
overflow:hidden;
text-align:center;
padding:0px 20px 40px 20px;
display:flex;
flex-direction:column;
gap:15px;
}

.img img{
width:100%;
height:450px;
object-fit:cover;
display:block;
border-radius:20px 20px 0 0;
transition:0.4s ease-in-out;
filter:grayscale(100%);
}

     .img img:hover{
filter:grayscale(0%);
transform:scale(1.05);
}

        .img h2{
color:#2B2A28;
font-size:24px;
margin:0;
}

.img p{
color:#8E8A84;
margin:0;
}

          .lightbox {
position:fixed;
top:0; left:0;
width:100%; height:100%;
background-color:rgba(0,0,0,0.8);
display:none;
justify-content:center;
align-items:center;
z-index:999;
}

           .lightbox img {
max-width:90%;
max-height:90%;
border-radius:10px;
}

        .lightbox .prev, .lightbox .next {
position:absolute;
top:50%;
transform:translateY(-50%);
background-color:rgba(0,0,0,0.7);
color:white;
border:none;
padding:10px;
cursor:pointer;
font-size:30px;
border-radius:5px;
}

        .lightbox .prev { left:10px; }
        .lightbox .next { right:10px; }

       .lightbox .close {
position:absolute;
top:10px;
right:10px;
background-color:rgba(0,0,0,0.7);
color:white;
border:none;
padding:10px;
cursor:pointer;
font-size:30px;
border-radius:5px;
}
	
#fotogalerija {
padding-top:60px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 40px;
color:#2B2A28;
font-size:45px;
text-align:center;
}
	
	footer {
    height: 450px;
    background-color: #1F3A3A;
    color: #c4b9b2;
    align-content: center;
    text-align: center;
}


    @font-face{
        font-family: 'Caviar Dreams';
  src: url('fonts/CaviarDreams.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
    }