:root{
  --bg: #0b0b0b;
  --panel: #0f0f0f;
  --muted: #9b9b9b;
  --accent: #26D07A; /* green */
  --white: #fff;
  --glass: rgba(255,255,255,0.04);
  --transition: 400ms cubic-bezier(.2,.9,.2,1);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%; margin:0; background: linear-gradient(180deg, var(--bg) 0%, #050505 100%); color:var(--white); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
a{color:inherit}

/* ================= Header ================= */

/* Base header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999; /* ensure always on top */
  pointer-events: auto;
  background: transparent;
  padding: 12px 20px;
  width: 100%;
  transition: transform 0.4s ease-in-out; /* Slide in/out transition */
}

/* Header inner container */
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  gap: 12px;
}

/* Left & Right groups */
.header-left,
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 120px;
  z-index: 1001;
}

/* Left icons */
.header-left .icon-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 18px;
  padding: 8px;
  border-radius: 10px;
  background: transparent;
  transition: var(--transition);
}
.header-left .icon-link:hover {
  color: var(--white);
  transform: translateY(-2px);
}

/* Center nav absolutely centered */
.main-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10002; /* higher than left/right */
  pointer-events: auto;
}

/* Nav list */
.main-nav ul {
  display: flex;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 8px 18px;
  background: linear-gradient(90deg, rgba(213, 204, 204, 0.02), rgba(255,255,255,0.01));
  border-radius: 14px;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 30px rgba(0,0,0,0.6);
}

/* Nav links */
.main-nav a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 6px 8px;
  border-radius: 8px;
  transition: color 220ms ease, transform 220ms ease;
  position: relative;
  z-index: 10003; /* always clickable */
  pointer-events: auto;
}

.main-nav a:hover {
  color: var(--white);
  transform: translateY(-2px);
}

.main-nav a.active {
  color: var(--accent);
  text-shadow: 0 4px 18px rgba(38,208,122,0.12);
}

/* Header Right: Logo & site name */
.logo {
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.6));
}

.site-name {
  text-align: left;
  line-height: 1;
  margin-left: 6px;
}

.site-name .title {
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--white);
}

.site-name .byline {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* Ensure main content starts below header */
main {
  padding-top: 92px;
}

/* ================= Responsive ================= */
@media (max-width: 992px) {
  .main-nav ul {
    gap: 12px;
    padding: 6px 12px;
  }

  .main-nav a {
    padding: 4px 6px;
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .header-inner {
    flex-wrap: wrap; /* Allow items to wrap */
    justify-content: center; /* Center all items */
  }

  .header-left,
  .header-right {
    min-width: unset;
    justify-content: center; /* Center icons/logo */
  }

  .main-nav {
    position: static;
    transform: none;
    margin: 12px auto 0;
    text-align: center;
    order: 3; /* Move nav to the bottom */
    width: 100%; /* Take full width */
  }

  .main-nav ul {
    flex-direction: row; /* Keep nav horizontal */
    justify-content: center;
    flex-wrap: wrap; /* Wrap buttons if needed */
    gap: 8px;
    padding: 8px;
    border-radius: 12px;
  }
}

/* For smaller phones, stack the header items vertically */
@media (max-width: 480px) {
  .header-inner {
    flex-direction: column;
    gap: 10px;
  }

  .header-left, .header-right {
    order: 1;
    min-width: unset;
  }
  
  .main-nav {
    order: 2;
    margin-top: 0;
  }
  
  .site-name {
    margin-left: 0;
    text-align: center;
  }
}


/* ensure main content starts below header */
main{ padding-top:92px; }

/* Sections */
.section{ padding:80px 6vw; position:relative; min-height:420px; }

/* HERO */
.hero-grid{ display:grid; grid-template-columns: 1fr 420px; gap:48px; align-items:center; max-width:1200px; margin:0 auto; }
.headline{ font-size:44px; margin:0 0 12px; line-height:1.02; color:#fff; font-weight:800; }
.headline span{ color:var(--muted); font-weight:500; font-size:20px; display:block; margin-top:8px; }
.lead{ color:var(--muted); margin:16px 0 22px; max-width:48ch; }

/* Buttons */
.btn{ display:inline-block; text-decoration:none; border-radius:12px; padding:11px 18px; font-weight:700; border:1px solid transparent; transition:var(--transition); cursor:pointer; }
.btn-primary{ background:linear-gradient(180deg,var(--accent), #0fbf5f); color:#06110a; box-shadow: 0 10px 30px rgba(38,208,122,0.12); }
.btn-primary:hover{ transform:translateY(-6px); box-shadow: 0 22px 40px rgba(38,208,122,0.16) }
.btn-ghost{ background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--white); }

/* Hero right: 3D card */
.hero-right{ position:relative; display:flex; align-items:center; justify-content:center; min-height:420px; }
.card-3d{
  width:340px; height:460px; border-radius:20px; transform-style:preserve-3d; perspective:1400px;
  position:relative; cursor:grab; transition:transform 350ms cubic-bezier(.2,.9,.2,1);
  touch-action:none; /* allow pointermove */
}
.card-layer{ position:absolute; inset:0; border-radius:18px; overflow:hidden; box-shadow: 0 18px 60px rgba(0,0,0,0.7); transform-style:preserve-3d; }
.layer-back{ background:linear-gradient(135deg, rgba(38,208,122,0.06), rgba(255,255,255,0.02)); transform:translateZ(-40px) scale(.98); filter:blur(6px); }
.layer-photo img{ width:100%; height:100%; object-fit:cover; display:block; transform:translateZ(24px) scale(1.02); transition:transform 350ms ease; }
.layer-overlay{ background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.35)); color:var(--white); display:flex; align-items:flex-end; padding:18px; transform:translateZ(36px); transition:transform 350ms ease; }
.layer-overlay .meta{ backdrop-filter: blur(6px); padding:8px 12px; border-radius:10px; background:rgba(0,0,0,0.25); }
.layer-overlay .tag{ font-size:12px; color:var(--accent); font-weight:700 }

/* decorative rings */
.decor-rings{ position:absolute; right:-60px; top:10%; pointer-events:none; }
.ring{ border-radius:999px; border:2px solid rgba(38,208,122,0.06); width:180px; height:180px; position:absolute; transform:translateZ(0); }
.r1{ right:-20px; top:-40px; transform:rotate(12deg) }
.r2{ right:-80px; bottom:-20px; width:260px; height:260px; opacity:0.5; }

/* gallery */
.section-title{ font-size:20px; color:var(--white); margin-bottom:20px; font-weight:700; display:inline-block }
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:20px; max-width:1200px; margin-left: auto; margin-right: auto; } /* Centering the grid */
.thumb{ border-radius:12px; overflow:hidden; background:var(--panel); box-shadow: 0 8px 26px rgba(0,0,0,0.6); }
.thumb img{ width:100%; height:200px; object-fit:cover; display:block; transition:transform 350ms ease; }
.thumb figcaption{ padding:10px; color:var(--muted); font-size:13px; }

/* services */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px; max-width:1100px; }
.service-card{ background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:18px; border-radius:14px; min-height:160px; box-shadow: 0 12px 30px rgba(0,0,0,0.6); }
.svc-icon{ font-size:34px; margin-bottom:8px }

/* about, booking, contact */
.about-wrap{ max-width:900px; color:var(--muted); background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01)); padding:20px; border-radius:12px; }
.form{ max-width:720px; background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01)); padding:18px; border-radius:12px; box-shadow: 0 16px 40px rgba(0,0,0,0.6); }
.form-row{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.form-row label{ font-size:13px; color:var(--muted) }
.form-row input, .form-row textarea, .form-row select{
  background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--white); padding:10px 12px; border-radius:8px; outline:none;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{ border-color:rgba(38,208,122,0.9); box-shadow:0 8px 30px rgba(38,208,122,0.06) }

/* footer */
.site-footer{ padding:40px 6vw; display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(255,255,255,0.03); color:var(--muted) }

/* reveal animation */
.reveal{ opacity:0; transform:translateY(20px) scale(.995); transition:opacity 700ms ease, transform 700ms cubic-bezier(.2,.9,.2,1); will-change:opacity,transform; }
.reveal.visible{ opacity:1; transform:none }

/* responsive */
@media (max-width:1100px){
  .hero-grid{ grid-template-columns: 1fr 360px; gap:22px; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr) }
  .services-grid{ grid-template-columns:1fr; }
}
@media (max-width:700px){
  .hero-grid{ grid-template-columns:1fr; }
  .main-nav ul{ gap:8px; padding:6px 10px; font-size:13px; }
  .gallery-grid{ grid-template-columns:1fr }
  .decor-rings{ display:none }
  .header-left{ display:none }
  .header-inner{ padding-left:12px; padding-right:12px; }
}

/* New responsive adjustments for gallery */
@media (min-width: 1101px) {
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}