/* Header */
header{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;padding:12px 5%;padding-top:calc(12px + env(safe-area-inset-top,0px));background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
header b{font-family:'Marcellus',serif;font-weight:400;font-size:1.3rem;letter-spacing:2px;white-space:nowrap}
nav{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
nav a{text-decoration:none;color:var(--mute);padding:6px 12px;border-radius:30px;font-size:.92rem;white-space:nowrap;transition:background .3s,color .3s}
nav a:hover{background:var(--bg2);color:var(--ink)}
#theme{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:1.15rem;cursor:pointer;transition:transform .6s cubic-bezier(.3,1.6,.5,1),background .3s}
#theme:hover{transform:rotate(25deg) scale(1.08)}
#theme span{display:inline-block;transition:transform .6s}
[data-theme=dark] #theme span{transform:rotate(360deg)}

/* Hero */
.hero{position:relative;overflow:hidden;text-align:center;color:#fff;padding:clamp(70px,11vw,130px) 6% clamp(90px,12vw,150px);background:linear-gradient(130deg,var(--hero1),var(--hero2),var(--hero3),var(--hero2));background-size:300% 300%;animation:flow 16s ease infinite}
.hero::before{content:"";position:absolute;left:50%;bottom:-12%;width:min(520px,85vw);aspect-ratio:3/4;transform:translateX(-50%);border-radius:999px 999px 0 0;border:2px solid rgba(255,255,255,.28);box-shadow:0 0 0 22px rgba(255,255,255,.05),0 0 0 44px rgba(255,255,255,.04),inset 0 0 80px rgba(255,255,255,.12);animation:glow 6s ease-in-out infinite}
.star{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;opacity:.7;animation:twinkle 4s ease-in-out infinite}
.hero>*:not(.star){position:relative}
.hero h1{font-size:clamp(2.2rem,7vw,4.6rem);letter-spacing:2px;text-shadow:0 6px 30px rgba(0,0,0,.35)}
.hero h1 span{display:inline-block;opacity:0;transform:translateY(40px) rotate(4deg);animation:letter .9s cubic-bezier(.2,.9,.3,1) forwards}
.hero p{max-width:560px;margin:18px auto 30px;font-weight:300;font-size:1.1rem;opacity:0;animation:fade 1s 1.1s forwards}
.btn{position:relative;overflow:hidden;display:inline-block;padding:14px 32px;border-radius:50px;background:#fff;color:#0B3B42;font-weight:600;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .3s,box-shadow .3s}
.hero .btn{opacity:0;animation:fade 1s 1.4s forwards}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(200,151,43,.45),transparent);transform:skewX(-20deg);animation:shine 3.5s 2.5s infinite}
.btn:hover{transform:translateY(-4px) scale(1.03)}

/* Sections */
section{padding:clamp(56px,8vw,96px) 5%}
section.alt{background:var(--bg2)}
section>h2{text-align:center;font-size:clamp(1.7rem,4vw,2.5rem);margin-bottom:44px}
section>h2::after{content:"";display:block;width:0;height:3px;margin:14px auto 0;border-radius:3px;background:linear-gradient(90deg,var(--teal),var(--gold));transition:width .9s .2s}
section.in>h2::after{width:90px}

/* Grid (aapke row-N classes) */
.grid{display:grid;gap:24px;grid-template-columns:1fr;max-width:1200px;margin:0 auto}
@media screen and (min-width: 768px) {
    .row-1{grid-template-columns:1fr}
    .row-2{grid-template-columns:1fr 1fr}
    .row-3{grid-template-columns:1fr 1fr 1fr}
    .row-4{grid-template-columns:1fr 1fr 1fr 1fr}
    .row-5{grid-template-columns:1fr 2fr 1fr 1fr}
    .row-6{grid-template-columns:1fr 3fr 1fr}
    .row-7{grid-template-columns:1fr 2fr 2fr 1fr}
    .row-8{grid-template-columns:2fr 2fr}
    .row-9{grid-template-columns:3fr 1fr}
}
.grid-item img{max-width:100%;height:auto;display:block;margin:0 auto}

/* Cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);opacity:0;transform:translateY(36px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.3,1),box-shadow .35s,border-color .35s}
.card.show{opacity:1;transform:none}
.card.show:hover{transform:translateY(-8px);border-color:var(--teal)}
.banner{position:relative;height:150px;display:grid;place-items:center;font-size:3.6rem;overflow:hidden}
.banner::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.25),transparent 45%),repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 2px,transparent 2px 14px)}
.banner i{font-style:normal;position:relative;animation:bob 5s ease-in-out infinite;filter:drop-shadow(0 8px 12px rgba(0,0,0,.3))}
.tile{height:110px;display:grid;place-items:center;font-size:2.6rem}
.body{padding:22px}
.body h3{font-size:1.3rem;margin-bottom:4px}
.body h4{font-size:1.1rem}
.body p{color:var(--mute);font-size:.95rem;margin-top:8px}
.meta{color:var(--gold);font-size:.9rem;letter-spacing:.5px}
.mini .body{text-align:center}
.ic{display:block;font-size:2.4rem;margin-bottom:8px;transition:transform .4s cubic-bezier(.3,1.7,.5,1)}
.card:hover .ic{transform:scale(1.25) rotate(-6deg)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.tags span,.badge{font-size:.78rem;padding:4px 12px;border-radius:30px;background:var(--bg2);border:1px solid var(--line);color:var(--teal)}
.badge{display:inline-block;margin:0 4px 8px 0}
.badge.hot{background:var(--gold);border-color:var(--gold);color:#1b1400;font-weight:600}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.acts a,.toggle{font:inherit;font-size:.88rem;font-weight:600;text-decoration:none;cursor:pointer;padding:9px 18px;border-radius:30px;border:0;transition:transform .25s,box-shadow .25s,filter .25s}
.acts a:hover,.toggle:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.2)}
.wa{background:#25D366;color:#06301a}
.yt{background:transparent;border:1.5px solid var(--teal)!important;color:var(--teal)}
.toggle{width:100%;background:linear-gradient(90deg,var(--teal),var(--teal2));color:#fff}
.toggle::after{content:"▾";display:inline-block;margin-left:8px;transition:transform .4s}
.card.open .toggle::after{transform:rotate(180deg)}
.rooms{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.8,.3,1)}
.card.open .rooms{grid-template-rows:1fr}
.rooms>div{overflow:hidden}
.room{margin-top:14px;padding:16px;border-radius:16px;background:var(--bg2);border-left:4px solid var(--gold)}
.room p{margin-top:4px}

/* Contact + footer */
.contact{text-align:center;font-size:1.1rem}
.contact .btn{background:#25D366;color:#06301a}
footer{text-align:center;padding:30px 5% 100px;color:var(--mute);border-top:1px solid var(--line)}
.fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#25D366;color:#06301a;font-size:1.5rem;text-decoration:none;box-shadow:0 10px 26px rgba(37,211,102,.5);animation:pulse 2.4s infinite}

@keyframes flow{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes glow{0%,100%{opacity:.7;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.04)}}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:.9;transform:scale(1.3)}}
@keyframes letter{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}
@keyframes shine{0%{left:-80%}40%,100%{left:140%}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%,100%{box-shadow:0 0 0 20px rgba(37,211,102,0)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.card,.hero h1 span,.hero p,.hero .btn{opacity:1!important;transform:none!important}}


.logo {
    display: block;
    margin: 0 auto;
    max-width: 1700px;
    height: auto;
  }
/* Navbar */


.topnav {
    overflow: hidden;
    background-color:#091416;
  }
  
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .topnav a.active {
    background-color: #0B4A4C;
    color: white;
  }
  
  .topnav .icon {
    display: none;
  }
  
  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }