:root{
      --cream:#faf7f2;
      --warm:#c7a389;
      --accent:#2b2b2b;
      --bg:#f0ece7;
      --glass: rgba(255,255,255,0.6);
      --max-width:1200px;
    }
    *{box-sizing:border-box}
    body{margin:0;font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto; color:var(--accent);background:var(--bg)}

    header{position:fixed;top:0;left:0;right:0;z-index:20;backdrop-filter:blur(10px);background:rgba(255,255,255,0.7);display:flex;justify-content:space-between;align-items:center;padding:14px 28px;}
    .logo{font-family:Playfair Display,serif;font-size:24px;color:var(--accent);font-weight:700}
 .logo a {
  color: var(--accent);
  text-decoration: none;
  font-family: Playfair Display, serif;
  font-size: 24px;
  font-weight: 700;
}   
    nav a{margin-left:24px;color:var(--accent);text-decoration:none;font-weight:600;position:relative}
    nav a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--warm);transition:.3s}
    nav a:hover::after{width:100%}

    .hero{height:100vh;background:url('slike/bg1.webp?3') center/cover no-repeat;display:flex;align-items:center;justify-content:center;position:relative}
    .hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,0.45)}
    .hero-content{position:relative;max-width:800px;text-align:center;color:var(--cream);padding:0 16px}
    .hero h1{font-family:Playfair Display,serif;font-size:56px;margin-bottom:16px}
    .hero p{font-size:20px;line-height:1.6;margin-bottom:24px}
    .cta{background:var(--warm);color:white;padding:14px 28px;border-radius:50px;font-weight:600;text-decoration:none;transition:.3s;z-index:999}
    .cta:hover{background:#a8836e}



 
    
.hero::after {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
  z-index: 1; /* Add this */
}

.hero-content {
  position: relative;
  z-index: 2; /* Make sure content is above the overlay */
}

    .hero2{height:40vh}

    
    main{max-width:var(--max-width);margin:0 auto;padding:80px 12px;display:grid;gap:60px}
    section{text-align:center}
    section h2{font-family:Playfair Display,serif;font-size:36px;margin-bottom:16px}
    section p{max-width:720px;margin:0 auto;font-size:18px;line-height:1.6;color:#444}


    .gallery img{width:100%;height:auto;object-fit:cover;border-radius:12px;box-shadow:0 4px 10px rgba(0,0,0,0.1)}

    footer{background:#2b2b2b;color:#eee;text-align:center;padding:24px;margin-top:40px;font-size:14px}

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

@media(max-width:700px){
  .hero h1{font-size:40px}
  .hero p{font-size:16px}

  .gallery img {
    width: 100%;
    margin: 5px auto;
    display: block;
  }
}

/* Skupni meni (desktop privzeto) */
nav {
  display: flex;
  gap: 24px;
  align-items: center;
  position: relative;
}

.hamburger {
  display: none;
  font-size: 28px;
  cursor: pointer;
}

/* X gumb skrij na desktopu */
.closebtn {
  display: none;
}




@media(max-width: 700px){
  .hamburger {
    display: block;
    z-index: 40;
  }

  nav {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 220px;
    background: #fff;
    backdrop-filter: blur(12px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    transition: right .3s ease;
    font-size:150%;
    font-family:Playfair Display,serif;
  }

  nav .closebtn {
    display: block;
    position: absolute;
    top: 0;
    right: 30px;
    font-size: 50px;
    cursor: pointer;
    color: var(--accent);
    font-weight: bold;
  }

  /* Ko je odprt meni */
  body.menu-open nav {
    right: 0;
  }

  body.menu-open .hamburger {
    opacity:0
  }
}

.video video {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  display: block;
}

@media(max-width:700px){
  .video video {
    max-height: 300px;
  }
}