/* ---------- Base / Utility ---------- */
    :root{
      --bg:#0b0b0c; --panel:#0f1113; --muted:#9aa0a6; --accent:#f59e0b; --white:#f8fafc;
      --container:1100px;
    }
    *{box-sizing:border-box}
    html,body{height:100%;margin:0;
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;color:var(--white);
   background: linear-gradient(180deg,#050506,#0b0b0c);




;-webkit-font-smoothing:antialiased}
    a{color:inherit;text-decoration:none}
    .container{max-width:var(--container);margin:0 auto;padding:0 20px}

    /* ---------- Header / Nav ---------- */
    header{position:sticky;top:0;z-index:60;background:linear-gradient(180deg,rgba(11,11,12,0.6),rgba(11,11,12,0.35));backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,0.04)}
    .nav{display:flex;align-items:center;justify-content:space-between;height:72px}
    .brand{display:flex;gap:10px;align-items:center;font-weight:700}
    .brand .logo{width:100px;height:44px;border-radius:8px;
    }
    nav .links{display:flex;gap:18px}
    nav .links a{color:var(--muted);font-size:14px;padding:8px;border-radius:8px}
    nav .links a:hover{color:var(--white);background:rgba(255,255,255,0.02)}
    .cta{display:flex;gap:12px;align-items:center}
    .btn{padding:10px 14px;border-radius:12px;border:none;cursor:pointer;font-weight:600}
    .btn.primary{background:var(--accent);color:#0b0b0c}
    .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}

    /* ---------- Hero ---------- */
    .hero{min-height:78vh;display:grid;align-items:center;padding:48px 0;position:relative}
    .hero::after{content:"";position:absolute;inset:0;background-image:url('https://images.unsplash.com/photo-1551776415-2f8c0a8efb2c?q=80&w=2400&auto=format&fit=crop');background-size:cover;background-position:center;filter:blur(0px) brightness(.45);z-index:0}
    .hero-inner{position:relative;z-index:2;color:var(--white)}
    .eyebrow{letter-spacing:.35em;text-transform:uppercase;color:#fbd38d;font-size:12px}
    h1{font-size:clamp(30px,6vw,56px);line-height:1.02;margin:14px 0}
    p.lead{color:var(--muted);max-width:720px}

    /* ---------- Section basics ---------- */
    section{padding:64px 0}
    .grid{display:grid;gap:20px}
    .cols-3{grid-template-columns:repeat(3,1fr)}
    .cols-2{grid-template-columns:repeat(2,1fr)}
    .card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);padding:18px;border-radius:14px}

    /* ---------- Rooms ---------- */
    .room-img{height:220px;border-radius:10px;background-size:cover;background-position:center}
    .room-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px}

    /* ---------- Gallery ---------- */
    .masonry{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
    .masonry img{width:100%;height:180px;object-fit:cover;border-radius:10px}

    /* ---------- Contact / Booking ---------- */
    form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    label{display:block;font-size:13px;color:var(--muted);margin-bottom:8px}
    input,textarea,select{width:100%;padding:10px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--white)}
    textarea{min-height:120px}

    /* ---------- Footer ---------- */
    footer{border-top:1px solid rgba(255,255,255,0.04);padding:28px 0;color:var(--muted);font-size:14px}

    /* ---------- Responsive ---------- */
/*    @media(max-width:900px){.cols-3{grid-template-columns:repeat(1,1fr)}.cols-2{grid-template-columns:1fr}.masonry{grid-template-columns:repeat(2,1fr)}.nav .links{display:none}}
    @media(max-width:500px){.masonry{grid-template-columns:repeat(1,1fr)}}
*/
.menu-toggle, .mobile-nav{display: none;}




/* Extra responsive adjustments */
@media(max-width:1200px){
  h1{font-size:48px}
  .hero{padding:36px 0}
  .menu-grid { grid-template-columns: repeat(3,1fr); }
 .about-content { grid-template-columns: 1fr; }
  .about-image { height: 300px; margin-top: 24px; }
  .about-cards { grid-template-columns: 1fr; }
  .staff-grid { grid-template-columns: repeat(2,1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2,1fr); }
  .testimonial-grid { grid-template-columns: repeat(2,1fr); }



}





@media(max-width:600px){

  .flyer {
    justify-content: flex-start;
    padding-left: 12px; /* small margin from screen edge */
  }

  h1{font-size:28px}
  .hero{padding:24px 0}
  .menu-grid { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; }
    .slide-content { left: 5%; bottom: 15%; }
  .slide-content h2 { font-size: 28px; }
  .masonry{grid-template-columns:1fr}
  .cta{display:none}          /* hide CTA buttons if too small */

  .staff-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }

.container h2 {
    font-size: 1.6rem;
  }

  .container > div {
    grid-template-columns: 1fr; /* Single column */
    gap: 16px;
  }

  .row {
    grid-template-columns: 1fr; /* Stack inputs vertically */
  }

  .container input,
  .container select,
  .container textarea {
    width: 100%;
    font-size: 0.95rem;
  }

  .container .btn {
    width: 100%; /* full-width buttons on mobile */
  }





}









/* ----- Responsive Navbar ----- */
.nav .links { display: flex; gap: 18px; }
.menu-toggle { display: none; font-size: 24px; background: none; border: none; cursor: pointer; color: var(--white); }





@media(max-width:900px){

  section.container > div {
    grid-template-columns: 1fr;
  }


  .menu-grid { grid-template-columns: repeat(2,1fr); }
.container > div {
    grid-template-columns: 1fr; /* Stack form + text */
  }

  .row {
    display: grid;
    grid-template-columns: 1fr 1fr; /* still 2 fields side by side */
    gap: 12px;
  }
   .cols-3{grid-template-columns:repeat(1,1fr)}
  .cols-2{grid-template-columns:1fr}
  .masonry{grid-template-columns:repeat(2,1fr)}
  .nav .links, .cta { display: none; }      /* hide desktop links & CTA */
  .menu-toggle { display: block; }          /* show hamburger */

  .mobile-nav {
    display: none;                           /* hidden by default */
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background: rgba(11,11,12,0.95);
    position: absolute;
    top: 72px;                               /* below header */
    left: 0;
    right: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .mobile-nav a {
    color: var(--white);
    padding: 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    text-align: center;
    font-size: 16px;
  }

  .mobile-nav a:hover {
    background: var(--accent);
    color: #0b0b0c;
  }

  .mobile-nav .btn { width: 100%; margin-top: 8px; }


.timeline::after { left: 8px; }
  .timeline-item {
    width: 100%;
    padding-left: 30px;
    padding-right: 0;
    margin-bottom: 24px;
  }
  .timeline-item.right {
    left: 0;
  }
  .timeline-item.left::after,
  .timeline-item.right::after {
    left: -10px;
    right: auto;
  }

  .about-container {
    text-align: center;
  }

  .about-container h2 {
    font-size: 2rem;
  }




}