/* ================= Global Styles ================= */
* {margin:0;padding:0;box-sizing:border-box;}
body {
  font-family: "Inter", sans-serif;
  background: #0b0b0b;
  color: #fff;
  overflow-x: hidden;
}
a {text-decoration:none;color:inherit;}

/* ================= Banner ================= */
.banner-wrapper { height: 200vh; position: relative; }
.banner {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 1s ease;
}
.banner video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: brightness(0.85) contrast(1.1);
  transition: all 1s ease;
}
.banner .overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0,0,0,0.35), rgba(5,5,5,0.9));
  z-index: -1;
  transition: opacity 0.6s ease;
}
.banner .content {
  position: relative;
  z-index: 2;
  text-align: center;
  transition: all 1s ease;
  max-width: 800px;
  padding: 0 30px;
}
.banner h1 {
  font-family: "Playfair Display", serif;
  font-size: 3.7rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 600;
  background: linear-gradient(90deg,#e0b36b,#f5deb3,#ffe9b5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fadeDown 2s ease forwards;
  opacity: 0;
}
@keyframes fadeDown {0%{opacity:0;transform:translateY(-40px);}100%{opacity:1;transform:translateY(0);} }
.banner p {
  margin-top: 20px;
  font-size: 1.15rem;
  line-height: 1.7;
  font-weight: 300;
  color: #eaeaea;
  animation: fadeUp 2.5s ease forwards;
  opacity: 0;
}
@keyframes fadeUp {0%{opacity:0;transform:translateY(40px);}100%{opacity:1;transform:translateY(0);} }
.banner .cta {
  margin-top: 40px;
  display: flex;
  gap: 20px;
  justify-content: center;
  opacity: 0;
  animation: fadeUp 3s ease forwards;
  flex-wrap: wrap;
}
.banner .cta a {
  padding: 14px 32px;
  border-radius: 40px;
  background: linear-gradient(135deg, rgba(224,179,107,0.2), rgba(245,222,179,0.08));
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.2);
  color: #f5deb3;
  font-weight: 500;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}
.banner .cta a:hover {
  background: #e0b36b;
  color: #111;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(224,179,107,0.45);
}
.banner.shrink {
  justify-content: center;
  align-items: center;
  flex-direction: row-reverse;
  padding: 2% 8%;
  margin-top: 20px;
  height: 65vh;
  gap: 60px;
}
.banner.shrink video {
  position: relative;
  flex: 0 0 45%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}
.banner.shrink .overlay { opacity: 0; }
.banner.shrink .content {
  flex: 0 0 40%;
  text-align: left;
  max-width: 520px;
  padding-right: 0px;
}

/* ================= Scroll Section ================= */
.scroll-section { display: flex; height: 500vh; width: 100%; }
.text-col { flex: 0 0 50%; padding: 70px 50px; background: linear-gradient(180deg, rgba(0,0,0,0.95), rgba(25,25,25,0.9)); position: relative; }
.text-col::before {
  content: "";
  position: absolute; inset: 0;
  background: url("https://www.transparenttextures.com/patterns/white-wall.png");
  opacity: 0.05;
  pointer-events: none;
}
.text-block { height: 100vh; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(40px); transition: all 1s ease-out; }
.text-block.active { opacity: 1; transform: translateY(0); }
.text-block h2 { font-family: "Playfair Display", serif; font-size: 2.8rem; margin-bottom: 12px; color: #e0b36b; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; }
.divider { width: 70px; height: 4px; background: linear-gradient(90deg, #e0b36b, transparent); margin-bottom: 25px; }
.text-block p { font-size: 1.1rem; line-height: 1.8; color: #ddd; font-weight: 300; }

.image-col { position: sticky; top: 0; flex: 0 0 50%; height: 100vh; overflow: hidden; background: #000; }
.image-track { display: flex; height: 100%; transform: translateX(0); transition: transform 0.6s ease-out; }
.image-track img { width: 50vw; height: 100%; object-fit: cover; flex-shrink: 0; filter: brightness(0.7) blur(1px); opacity: 0.7; transform: scale(1); transition: transform 1s ease, filter 1s ease, opacity 1s ease; border-radius: 10px; }
.image-track img.active { transform: scale(1.05); filter: brightness(1) blur(0); opacity: 1; }

 /* ================= Hanging Gallery ================= */
    :root{--rope-color:#3a2b1f;--pin-color:#f2d7a1;--pin-border:#5c4225;}
    .hang-gallery { position: relative; width:100%; min-height:100vh; display:flex; align-items:center; justify-content:start; overflow:hidden; padding:5rem 1rem; }
    .hang-gallery::before {
      content:""; position:absolute; inset:0;
      background-image: url("https://images.unsplash.com/photo-1601041295918-4c4d16a2f1a7?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80");
      background-size:cover; background-position:center;
      filter: brightness(0.65) contrast(1.05) saturate(0.95); z-index:0;
    }
    .hang-gallery::after {
      content:""; position:absolute; inset:0;
      background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.8) 100%);
      z-index:1;
    }
    .gallery-heading {
  position: absolute;
  top: 2rem;      /* top se distance adjust kar sakte ho */
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;     /* overlay ke upar aa jaye */
  text-align: center;
}

.gallery-heading h2 {
  font-family: "Playfair Display", serif;
  font-size: 3rem;
  color: #e0b36b;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 0.5rem;
}

.gallery-heading p {
  font-size: 1.2rem;
  color: #ddd;
  font-weight: 300;
}


    .ropes { position:relative; z-index:2; width:100%; max-width:1200px; display:flex; flex-direction:column; gap:3rem; align-items:center; margin-top: 150px; }
    .rope-row { width:100%; position:relative; display:flex; justify-content:space-around; align-items:flex-start; gap:1.5rem; padding:0 2rem; }
    .rope-row::before { content:""; position:absolute; top:42px; left:2rem; right:2rem; height:4px; background: var(--rope-color); border-radius:2px; box-shadow:0 2px 4px rgba(0,0,0,0.6) inset; z-index:0; }
    .hang { width:calc(100%/6 - 1rem); max-width:220px; min-width:140px; position:relative; transform-origin: top center; cursor:pointer; }
    .hang .pin { position:absolute; top:-22px; left:50%; transform:translateX(-50%) rotate(45deg); width:26px; height:26px; z-index:3; background: var(--pin-color); border:2px solid var(--pin-border); border-radius:4px; box-shadow:0 2px 6px rgba(0,0,0,0.6), inset 0 1px 2px rgba(255,255,255,0.4); }
    .hang .cord { position:absolute; top:-60px; left:50%; transform:translateX(-50%); width:2px; height:45px; background: linear-gradient(#cbb98b,#6d4c2d); z-index:2; }
    .hang img { display:block; width:650px; height:350px; border-radius:12px; box-shadow:0 14px 32px rgba(0,0,0,0.6); transition: transform .3s ease, box-shadow .3s ease; border:6px solid rgba(255,255,255,0.05); }
    .hang:hover img { transform:translateY(-6px) scale(1.04); box-shadow:0 22px 50px rgba(0,0,0,0.75); }
    @keyframes swing {0%{transform:rotate(-4deg);}50%{transform:rotate(4deg);}100%{transform:rotate(-4deg);} }
    .hang[data-i="1"]{animation:swing 6s ease-in-out infinite;}
    .hang[data-i="2"]{animation:swing 7s ease-in-out infinite;}
    .hang[data-i="3"]{animation:swing 5.8s ease-in-out infinite;}
    .hang[data-i="4"]{animation:swing 6.5s ease-in-out infinite;}
    .hang[data-i="5"]{animation:swing 7.2s ease-in-out infinite;}
    .hang[data-i="6"]{animation:swing 6.8s ease-in-out infinite;}
    .modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.88); z-index:9999; opacity:0; pointer-events:none; transition: opacity .3s ease;}
    .modal.open {opacity:1; pointer-events:auto;}
    .modal .modal-inner {max-width:92vw; max-height:92vh; border-radius:12px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,0.8); background:#111;}
    .modal img {display:block; width:100%; height:auto;}
    .modal .close {position:absolute; top:20px; right:22px; z-index:10001; background: rgba(255,255,255,0.08); color:#fff; border-radius:8px; padding:8px 12px; cursor:pointer; font-weight:700; border:1px solid rgba(255,255,255,0.12); transition: background .25s;}
    .modal .close:hover {background: rgba(255,255,255,0.2);}

/* ================= Footer ================= */
footer { background: #0a0a0a; color: #aaa; text-align:center; padding:45px 20px; font-size:0.95rem; border-top:1px solid rgba(255,255,255,0.1); }
footer a { color:#e0b36b; }
footer a:hover { text-decoration:underline; }

/* ================= Consultation Form ================= */
:root{
  --bg: #0f0f10;
  --card: #151617;
  --text: #eaeaea;
  --muted: #a9a9a9;
  --border: #2a2b2e;
  --focus: #5c87ff;
  --gold: #d6b36a;
  --gold-press: #c49f50;
  --danger: #ff5d5d;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

.wrap{ max-width: 980px; margin: 0 auto; padding: 64px 20px 120px; }
.title{ font-family: "Playfair Display", serif; font-weight: 800; font-size: clamp(36px, 5vw, 64px); letter-spacing: .3px; text-align:center; margin: 18px 0 6px; }
.subtitle{ text-align:center; color: var(--muted); font-weight: 400; margin-bottom: 36px; font-size: clamp(14px, 2.5vw, 18px); }
.card{ background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; }
.steps{ display:flex; gap:10px; align-items:center; justify-content:center; margin: 6px 0 26px; user-select:none; }
.dot{ width: 34px; height: 34px; display:grid; place-items:center; border-radius: 999px; border:1px solid var(--border); background: #111214; color: var(--muted); font-weight: 600; transition: all .25s ease; }
.dot.active{ background: #1c1d20; color: var(--text); border-color: #3a3b3f; box-shadow: inset 0 0 0 2px #222, 0 0 0 3px rgba(214,179,106,.25); }
.dash{ width:44px; height:2px; background:#2c2d31; border-radius:2px; }

.grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px){ .grid{ grid-template-columns: 1fr; } }

label{ display:block; font-size: 13px; color: var(--muted); margin: 6px 2px 8px; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea{
  width:100%; padding: 14px 14px; background:#0f1012; border:1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); outline:none; transition: border-color .2s ease, box-shadow .2s ease, transform .03s ease;
}
textarea{ min-height: 140px; resize: vertical; }
input::placeholder, textarea::placeholder{ color:#7e7f84; }
input:focus, select:focus, textarea:focus{ border-color: #3d5cff; box-shadow: 0 0 0 3px rgba(93,132,255,.18); }

.row{display:flex; gap:16px}
.row > *{flex:1}

.choices{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin-top: 4px; }
@media (max-width: 720px){ .choices{ grid-template-columns: 1fr } }
.choice{ display:flex; align-items:center; gap:10px; color:#d8d8d8; font-size:14px; padding: 2px 0; }
.choice input[type="checkbox"], .choice input[type="radio"]{ width:18px; height:18px; accent-color: var(--gold); cursor:pointer; }

.btnbar{ display:flex; justify-content: space-between; align-items:center; gap:12px; margin-top: 18px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; min-width: 160px; padding: 13px 18px; border-radius: 12px; border:1px solid #3b2f16; background: linear-gradient(180deg, var(--gold), var(--gold-press)); color: #1a1205; font-weight: 700; letter-spacing: .2px; cursor: pointer; transition: transform .03s ease, filter .2s ease; text-decoration:none; user-select:none; }
.btn:hover{ filter: brightness(1.05) }
.btn:active{ transform: translateY(1px) }
.btn.secondary{ background: transparent; border-color: var(--border); color: var(--text); font-weight:600; min-width: 110px; }
.btn.secondary:hover{ border-color: #3a3b3f; background:#121316; }
.note{ text-align:center; color:#8f8f8f; font-size:13px; margin-top: 18px; }

/* small helper bits */
.required{ color: #e07e54; margin-left: 2px }
.char-row{ display:flex; justify-content: space-between; align-items:center; gap:10px; margin-top:6px; color:#8a8a8a; font-size:12px; }
.error{ color: var(--danger); font-size: 12px; margin-top: 6px; display:none }
.hidden{ display:none !important }

/* ================= Responsive ================= */
@media(max-width:900px){
  .banner h1 { font-size:2.4rem; letter-spacing:1px;}
  .banner p { font-size:1rem; line-height:1.5;}
  .banner .cta a { flex:1; text-align:center;}
  .banner.shrink { flex-direction:column; height:auto; padding:40px 20px; gap:30px;}
  .banner.shrink video, .banner.shrink .content { flex:unset; width:100%; max-width:100%; }
  .banner.shrink .content{text-align:center;}
  .scroll-section { flex-direction:column; height:auto; }
  .text-col, .image-col { flex:unset; width:100%; position:relative; height:auto; }
  .text-block { height:auto; padding:60px 20px; text-align:center; }
  .text-block h2{font-size:2rem;}
  .image-track {flex-direction:column;}
  .image-track img {width:100%; height:auto; border-radius:0;}
  .hang-gallery {padding:3rem 1rem;}
  .hang {width:45%; max-width:220px;}
  .hang img {width:100%;}
}