<!DOCTYPE html>
<html lang="ne">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>शुभ विवाह | बिहे</title>
  <meta
    name="description"
    content="शुभ विवाह — हाम्रो विशेष दिनमा यहाँलाई हार्दिक निमन्त्रणा।"
  />
  <!-- Google Font -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap"
    rel="stylesheet"
  />
  <style>
    :root {
      --red: #8d1725;
      --red-dark: #5c0b16;
      --gold: #d5a23a;
      --gold-light: #f5d98b;
      --cream: #fffaf0;
      --cream-2: #f8edda;
      --text: #3c2422;
      --muted: #765e5b;
      --white: #fff;
      --shadow: 0 20px 60px rgba(70, 20, 20, .15);
      --radius: 24px;
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      font-family: "Noto Sans Devanagari", sans-serif;
      color: var(--text);
      background: var(--cream);
      overflow-x: hidden;
    }
    body.no-scroll {
      overflow: hidden;
    }
    a {
      color: inherit;
      text-decoration: none;
    }
    button {
      font: inherit;
    }
    /* =========================
       INTRO SCREEN
    ========================= */
    .intro {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: white;
      background:
        radial-gradient(circle at 50% 30%, rgba(213,162,58,.25), transparent 35%),
        linear-gradient(135deg, #5a0813, #8d1725 55%, #4d0711);
      transition: opacity .8s ease, visibility .8s ease;
    }
    .intro.hide {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    .intro-inner {
      padding: 30px;
      animation: introUp 1.2s ease;
    }
    .intro-symbol {
      width: 100px;
      height: 100px;
      margin: 0 auto 25px;
      border: 1px solid rgba(255,255,255,.5);
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: var(--gold-light);
      font-size: 42px;
      box-shadow: 0 0 0 12px rgba(213,162,58,.06);
    }
    .intro-small {
      color: #f8d98a;
      letter-spacing: 4px;
      font-size: 13px;
      margin-bottom: 10px;
    }
    .intro h1 {
      font-size: clamp(38px, 8vw, 75px);
      font-weight: 700;
      line-height: 1.15;
      margin-bottom: 15px;
    }
    .intro p {
      opacity: .85;
      font-size: 16px;
      margin-bottom: 35px;
    }
    .open-btn {
      border: 1px solid var(--gold-light);
      background: var(--gold);
      color: #4b0c13;
      padding: 14px 30px;
      border-radius: 100px;
      font-weight: 800;
      cursor: pointer;
      transition: .3s;
      box-shadow: 0 12px 35px rgba(0,0,0,.25);
    }
    .open-btn:hover {
      transform: translateY(-3px);
      background: #f0c968;
    }
    @keyframes introUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    /* =========================
       DECORATIONS
    ========================= */
    .mandala {
      position: absolute;
      width: 500px;
      height: 500px;
      border: 1px solid rgba(213,162,58,.25);
      border-radius: 50%;
      pointer-events: none;
    }
    .mandala::before,
    .mandala::after {
      content: "";
      position: absolute;
      inset: 35px;
      border: 1px dashed rgba(213,162,58,.25);
      border-radius: 50%;
    }
    .mandala::after {
      inset: 90px;
      border-style: solid;
    }
    .mandala-left {
      left: -270px;
      top: 40%;
    }
    .mandala-right {
      right: -270px;
      top: 20%;
    }
    .flower {
      position: absolute;
      font-size: 30px;
      animation: floatFlower 5s ease-in-out infinite;
      opacity: .75;
      pointer-events: none;
    }
    .f1 { left: 7%; top: 15%; }
    .f2 { right: 8%; top: 30%; animation-delay: 1s; }
    .f3 { left: 15%; bottom: 20%; animation-delay: 2s; }
    .f4 { right: 15%; bottom: 15%; animation-delay: 3s; }
    @keyframes floatFlower {
      0%, 100% { transform: translateY(0) rotate(0); }
      50% { transform: translateY(-15px) rotate(8deg); }
    }
    /* =========================
       NAVBAR
    ========================= */
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      padding: 18px 5%;
      transition: .35s;
    }
    .navbar.scrolled {
      background: rgba(255,250,240,.92);
      backdrop-filter: blur(15px);
      box-shadow: 0 5px 25px rgba(0,0,0,.08);
      padding: 12px 5%;
    }
    .nav-inner {
      max-width: 1150px;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .logo {
      font-size: 22px;
      font-weight: 800;
      color: var(--red);
    }
    .logo span {
      color: var(--gold);
    }
    .nav-links {
      display: flex;
      gap: 25px;
      list-style: none;
    }
    .nav-links a {
      font-size: 14px;
      font-weight: 600;
      transition: .25s;
    }
    .nav-links a:hover {
      color: var(--red);
    }
    .nav-actions {
      display: flex;
      gap: 8px;
    }
    .icon-btn {
      width: 40px;
      height: 40px;
      border: 1px solid rgba(141,23,37,.15);
      border-radius: 50%;
      background: transparent;
      cursor: pointer;
      display: grid;
      place-items: center;
      color: var(--red);
    }
    .menu-btn {
      display: none;
    }
    /* =========================
       HERO
    ========================= */
    .hero {
      min-height: 100vh;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow: hidden;
      background:
        linear-gradient(rgba(255,250,240,.75), rgba(255,250,240,.92)),
        radial-gradient(circle at center, #f8d98a 0, transparent 35%);
    }
    .hero-content {
      max-width: 900px;
      padding: 130px 25px 80px;
      position: relative;
      z-index: 2;
    }
    .eyebrow {
      color: var(--red);
      letter-spacing: 3px;
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 20px;
    }
    .hero h1 {
      font-size: clamp(48px, 9vw, 105px);
      line-height: 1.05;
      color: var(--red);
      margin-bottom: 20px;
      font-weight: 800;
    }
    .hero h1 span {
      color: var(--gold);
      display: block;
      font-family: "Playfair Display", serif;
      font-style: italic;
      font-size: .55em;
      margin: 12px 0;
    }
    .hero-subtitle {
      max-width: 650px;
      margin: auto;
      color: var(--muted);
      line-height: 2;
      font-size: 17px;
    }
    .date-pill {
      display: inline-flex;
      margin-top: 30px;
      padding: 12px 25px;
      border-radius: 100px;
      color: white;
      background: var(--red);
      box-shadow: 0 10px 30px rgba(141,23,37,.25);
      font-weight: 700;
    }
    .scroll-down {
      position: absolute;
      bottom: 25px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 12px;
      color: var(--muted);
      animation: bounce 2s infinite;
    }
    @keyframes bounce {
      0%,100% { transform: translate(-50%,0); }
      50% { transform: translate(-50%,8px); }
    }
    /* =========================
       SECTIONS
    ========================= */
    section {
      padding: 100px 6%;
      position: relative;
      overflow: hidden;
    }
    .section-inner {
      max-width: 1100px;
      margin: auto;
    }
    .section-title {
      text-align: center;
      margin-bottom: 60px;
    }
    .section-title .small {
      color: var(--gold);
      font-weight: 800;
      letter-spacing: 3px;
      font-size: 13px;
      margin-bottom: 10px;
    }
    .section-title h2 {
      font-size: clamp(30px, 5vw, 50px);
      color: var(--red);
      margin-bottom: 12px;
    }
    .section-title p {
      color: var(--muted);
    }
    /* =========================
       COUPLE
    ========================= */
    .couple {
      background: white;
    }
    .couple-grid {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 40px;
    }
    .person {
      text-align: center;
    }
    .person-photo {
      width: 230px;
      height: 230px;
      margin: 0 auto 25px;
      border-radius: 50%;
      padding: 7px;
      background: linear-gradient(135deg, var(--gold), #fff0b9, var(--gold));
      box-shadow: var(--shadow);
    }
    .person-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
      border: 5px solid white;
    }
    .person h3 {
      font-size: 27px;
      color: var(--red);
      margin-bottom: 5px;
    }
    .person p {
      color: var(--muted);
    }
    .heart {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: var(--red);
      color: white;
      display: grid;
      place-items: center;
      font-size: 28px;
      box-shadow: 0 10px 35px rgba(141,23,37,.3);
      animation: heartbeat 1.7s infinite;
    }
    @keyframes heartbeat {
      0%,100% { transform: scale(1); }
      15% { transform: scale(1.1); }
      30% { transform: scale(1); }
    }
    /* =========================
       COUNTDOWN
    ========================= */
    .countdown-section {
      background:
        linear-gradient(rgba(93,8,20,.93), rgba(93,8,20,.97)),
        radial-gradient(circle, var(--gold), transparent);
      color: white;
      text-align: center;
    }
    .countdown-section .section-title h2,
    .countdown-section .section-title p {
      color: white;
    }
    .countdown {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      max-width: 750px;
      margin: auto;
      gap: 15px;
    }
    .time-box {
      padding: 25px 10px;
      border: 1px solid rgba(255,255,255,.2);
      background: rgba(255,255,255,.07);
      backdrop-filter: blur(10px);
      border-radius: 18px;
    }
    .time-box strong {
      display: block;
      font-size: clamp(35px, 6vw, 60px);
      color: var(--gold-light);
      line-height: 1;
    }
    .time-box span {
      font-size: 12px;
      opacity: .75;
    }
    /* =========================
       EVENTS
    ========================= */
    .events {
      background: var(--cream);
    }
    .event-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .event-card {
      background: white;
      border-radius: var(--radius);
      padding: 35px 25px;
      text-align: center;
      box-shadow: 0 10px 40px rgba(90,20,20,.07);
      border: 1px solid rgba(213,162,58,.15);
      transition: .35s;
    }
    .event-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow);
    }
    .event-icon {
      width: 65px;
      height: 65px;
      border-radius: 50%;
      margin: 0 auto 20px;
      background: #fff4d8;
      color: var(--red);
      display: grid;
      place-items: center;
      font-size: 28px;
    }
    .event-card h3 {
      color: var(--red);
      margin-bottom: 12px;
      font-size: 21px;
    }
    .event-card .time {
      color: var(--gold);
      font-weight: 800;
      margin-bottom: 8px;
    }
    .event-card p {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.8;
    }
    /* =========================
       STORY
    ========================= */
    .story {
      background: white;
    }
    .story-content {
      max-width: 760px;
      margin: auto;
      text-align: center;
    }
    .story-content p {
      color: var(--muted);
      line-height: 2.1;
      font-size: 17px;
    }
    .quote {
      margin-top: 35px;
      padding: 30px;
      border-top: 1px solid #e7d8bb;
      border-bottom: 1px solid #e7d8bb;
      font-family: "Playfair Display", serif;
      font-style: italic;
      font-size: 25px;
      color: var(--red);
    }
    /* =========================
       GALLERY
    ========================= */
    .gallery {
      background: var(--cream-2);
    }
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
    }
    .gallery-item {
      height: 300px;
      overflow: hidden;
      border-radius: 18px;
      cursor: pointer;
      position: relative;
    }
    .gallery-item:nth-child(2) {
      height: 380px;
    }
    .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: .6s;
    }
    .gallery-item:hover img {
      transform: scale(1.08);
    }
    /* =========================
       LOCATION
    ========================= */
    .location {
      background: white;
    }
    .location-box {
      max-width: 850px;
      margin: auto;
      background: var(--cream);
      border-radius: 30px;
      padding: 45px;
      text-align: center;
      border: 1px solid #ead9b9;
    }
    .location-icon {
      font-size: 45px;
      margin-bottom: 15px;
    }
    .location-box h3 {
      color: var(--red);
      font-size: 28px;
      margin-bottom: 10px;
    }
    .location-box p {
      color: var(--muted);
      line-height: 1.9;
    }
    .map-btn {
      display: inline-flex;
      margin-top: 25px;
      background: var(--red);
      color: white;
      padding: 13px 25px;
      border-radius: 100px;
      font-weight: 700;
      transition: .3s;
    }
    .map-btn:hover {
      background: var(--red-dark);
      transform: translateY(-2px);
    }
    /* =========================
       RSVP
    ========================= */
    .rsvp {
      background:
        radial-gradient(circle at 20% 20%, rgba(213,162,58,.12), transparent 25%),
        var(--cream);
    }
    .rsvp-box {
      max-width: 700px;
      margin: auto;
      text-align: center;
    }
    .rsvp-box h2 {
      color: var(--red);
      font-size: 38px;
      margin-bottom: 15px;
    }
    .rsvp-box p {
      color: var(--muted);
      margin-bottom: 25px;
      line-height: 1.8;
    }
    .rsvp-btn {
      display: inline-flex;
      padding: 15px 30px;
      border-radius: 100px;
      background: var(--gold);
      color: #4d2913;
      font-weight: 800;
      box-shadow: 0 10px 30px rgba(213,162,58,.25);
      transition: .3s;
    }
    .rsvp-btn:hover {
      transform: translateY(-3px);
    }
    /* =========================
       FOOTER
    ========================= */
    footer {
      background: #4e0812;
      color: white;
      text-align: center;
      padding: 55px 20px;
    }
    footer .om {
      color: var(--gold-light);
      font-size: 35px;
      margin-bottom: 15px;
    }
    footer h3 {
      font-size: 27px;
      margin-bottom: 8px;
    }
    footer p {
      opacity: .7;
      font-size: 14px;
    }
    .footer-line {
      width: 70px;
      height: 1px;
      background: var(--gold);
      margin: 25px auto;
    }
    .made {
      margin-top: 25px;
      opacity: .5;
      font-size: 12px;
    }
    /* =========================
       REVEAL ANIMATION
    ========================= */
    .reveal {
      opacity: 0;
      transform: translateY(35px);
      transition: opacity .8s ease, transform .8s ease;
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }
    /* =========================
       MUSIC BUTTON
    ========================= */
    .music-btn {
      position: fixed;
      right: 20px;
      bottom: 20px;
      z-index: 999;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 0;
      color: white;
      background: var(--red);
      cursor: pointer;
      box-shadow: 0 10px 30px rgba(0,0,0,.2);
    }
    .music-btn.playing {
      animation: musicPulse 1.2s infinite;
    }
    @keyframes musicPulse {
      50% {
        box-shadow: 0 0 0 12px rgba(141,23,37,.1);
      }
    }
    /* =========================
       LIGHTBOX
    ========================= */
    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 9998;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(20,5,5,.92);
      opacity: 0;
      visibility: hidden;
      transition: .3s;
      padding: 20px;
    }
    .lightbox.active {
      opacity: 1;
      visibility: visible;
    }
    .lightbox img {
      max-width: 95%;
      max-height: 85vh;
      border-radius: 15px;
      object-fit: contain;
    }
    .lightbox-close {
      position: absolute;
      top: 20px;
      right: 25px;
      color: white;
      font-size: 35px;
      cursor: pointer;
    }
    /* =========================
       DARK MODE
    ========================= */
    body.dark {
      --cream: #160d0d;
      --cream-2: #211313;
      --text: #f8eadd;
      --muted: #cbb5ad;
      --white: #1e1212;
      background: #160d0d;
    }
    body.dark .navbar.scrolled,
    body.dark .couple,
    body.dark .story,
    body.dark .location {
      background: rgba(28,15,15,.94);
    }
    body.dark .event-card,
    body.dark .location-box {
      background: #241414;
      border-color: rgba(213,162,58,.15);
    }
    body.dark .navbar.scrolled .nav-links a,
    body.dark .logo {
      color: #f6dca2;
    }
    body.dark .icon-btn {
      color: #f6dca2;
      border-color: rgba(246,220,162,.2);
    }
    /* =========================
       MOBILE
    ========================= */
    @media (max-width: 800px) {
      .nav-links {
        position: fixed;
        top: 70px;
        left: 15px;
        right: 15px;
        padding: 25px;
        flex-direction: column;
        background: rgba(255,250,240,.98);
        border-radius: 20px;
        box-shadow: var(--shadow);
        transform: translateY(-20px);
        opacity: 0;
        pointer-events: none;
        transition: .3s;
      }
      .nav-links.open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
      }
      .dark .nav-links {
        background: #241414;
      }
      .menu-btn {
        display: grid;
      }
      .couple-grid {
        grid-template-columns: 1fr;
        gap: 25px;
      }
      .heart {
        margin: auto;
      }
      .event-grid {
        grid-template-columns: 1fr;
      }
      .gallery-grid {
        grid-template-columns: 1fr 1fr;
      }
      .gallery-item,
      .gallery-item:nth-child(2) {
        height: 220px;
      }
      .countdown {
        grid-template-columns: repeat(2, 1fr);
      }
      .location-box {
        padding: 30px 20px;
      }
    }
    @media (max-width: 500px) {
      section {
        padding: 75px 5%;
      }
      .hero-content {
        padding-top: 120px;
      }
      .person-photo {
        width: 190px;
        height: 190px;
      }
      .gallery-grid {
        grid-template-columns: 1fr;
      }
      .gallery-item,
      .gallery-item:nth-child(2) {
        height: 300px;
      }
      .mandala {
        display: none;
      }
    }
  </style>
</head>
<body class="no-scroll">
  <!-- =========================
       INTRO
  ========================== -->
  <div class="intro" id="intro">
    <div class="intro-inner">
      <div class="intro-symbol">ॐ</div>
      <div class="intro-small">शुभ विवाह</div>
      <h1 id="introNames">
        हाम्रो बिहे
      </h1>
      <p>मायाको यो सुन्दर यात्रामा तपाईंलाई हार्दिक निमन्त्रणा।</p>
      <button class="open-btn" id="openInvitation">
        💌 निमन्त्रणा खोल्नुहोस्
      </button>
    </div>
  </div>
  <!-- =========================
       NAVBAR
  ========================== -->
  <header class="navbar" id="navbar">
    <div class="nav-inner">
      <a href="#home" class="logo">
        हाम्रो <span>बिहे</span>
      </a>
      <ul class="nav-links" id="navLinks">
        <li><a href="#home">गृहपृष्ठ</a></li>
        <li><a href="#couple">वर–वधू</a></li>
        <li><a href="#events">कार्यक्रम</a></li>
        <li><a href="#gallery">तस्बिरहरू</a></li>
        <li><a href="#location">स्थान</a></li>
      </ul>
      <div class="nav-actions">
        <button class="icon-btn" id="themeBtn" aria-label="Dark mode">
          ☾
        </button>
        <button class="icon-btn menu-btn" id="menuBtn" aria-label="Menu">
          ☰
        </button>
      </div>
    </div>
  </header>
  <!-- =========================
       HERO
  ========================== -->
  <main>
    <section class="hero" id="home">
      <div class="mandala mandala-left"></div>
      <div class="mandala mandala-right"></div>
      <div class="flower f1">🌸</div>
      <div class="flower f2">🌺</div>
      <div class="flower f3">🌼</div>
      <div class="flower f4">🌸</div>
      <div class="hero-content reveal">
        <div class="eyebrow">
          ॐ श्री गणेशाय नमः
        </div>
        <h1>
          <span>दुई मुटु</span>
          एक जीवन
        </h1>
        <p class="hero-subtitle">
          दुई आत्मा, एउटै सपना र जीवनभरको साथ।
          हाम्रो जीवनको सबैभन्दा विशेष दिनमा
          यहाँको उपस्थितिले हाम्रो खुसी अझ विशेष बनाउनेछ।
        </p>
        <div class="date-pill" id="heroDate">
          २०८३ साल — शुभ विवाह
        </div>
      </div>
      <div class="scroll-down">
        ↓ तल हेर्नुहोस्
      </div>
    </section>
    <!-- =========================
         COUPLE
    ========================== -->
    <section class="couple" id="couple">
      <div class="section-inner">
        <div class="section-title reveal">
          <div class="small">THE HAPPY COUPLE</div>
          <h2>हाम्रो मिलन</h2>
          <p>दुई परिवार, एउटा नयाँ सुरुवात।</p>
        </div>
        <div class="couple-grid">
          <div class="person reveal">
            <div class="person-photo">
              <img
                id="groomImage"
                src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=700&q=80"
                alt="वर"
              />
            </div>
            <h3 id="groomName">प्रबिन</h3>
            <p>वर</p>
          </div>
          <div class="heart">♥</div>
          <div class="person reveal">
            <div class="person-photo">
              <img
                id="brideImage"
                src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=700&q=80"
                alt="वधू"
              />
            </div>
            <h3 id="brideName">प्रियंका</h3>
            <p>वधू</p>
          </div>
        </div>
      </div>
    </section>
    <!-- =========================
         COUNTDOWN
    ========================== -->
    <section class="countdown-section">
      <div class="section-inner">
        <div class="section-title reveal">
          <div class="small">COUNTING THE DAYS</div>
          <h2>हाम्रो विशेष दिन</h2>
          <p>अब धेरै समय बाँकी छैन...</p>
        </div>
        <div class="countdown reveal">
          <div class="time-box">
            <strong id="days">00</strong>
            <span>दिन</span>
          </div>
          <div class="time-box">
            <strong id="hours">00</strong>
            <span>घण्टा</span>
          </div>
          <div class="time-box">
            <strong id="minutes">00</strong>
            <span>मिनेट</span>
          </div>
          <div class="time-box">
            <strong id="seconds">00</strong>
            <span>सेकेन्ड</span>
          </div>
        </div>
      </div>
    </section>
    <!-- =========================
         EVENTS
    ========================== -->
    <section class="events" id="events">
      <div class="section-inner">
        <div class="section-title reveal">
          <div class="small">WEDDING EVENTS</div>
          <h2>विवाह कार्यक्रम</h2>
          <p>हाम्रो विशेष दिनका केही महत्वपूर्ण क्षणहरू।</p>
        </div>
        <div class="event-grid">
          <article class="event-card reveal">
            <div class="event-icon">🌿</div>
            <h3>मेहन्दी</h3>
            <div class="time">
              बिहान १०:०० बजे
            </div>
            <p>
              प्रेम र खुसीका रंगहरूसँग
              मेहन्दी कार्यक्रम।
            </p>
          </article>
          <article class="event-card reveal">
            <div class="event-icon">💍</div>
            <h3>विवाह समारोह</h3>
            <div class="time">
              दिउँसो २:०० बजे
            </div>
            <p>
              शुभ मुहूर्तमा वैवाहिक संस्कार
              तथा शुभ विवाह समारोह।
            </p>
          </article>
          <article class="event-card reveal">
            <div class="event-icon">🍽️</div>
            <h3>विवाह भोज</h3>
            <div class="time">
              साँझ ६:०० बजे
            </div>
            <p>
              आफन्त तथा प्रियजनसँग
              रमाइलो भेटघाट र भोज।
            </p>
          </article>
        </div>
      </div>
    </section>
    <!-- =========================
         STORY
    ========================== -->
    <section class="story">
      <div class="section-inner">
        <div class="section-title reveal">
          <div class="small">OUR STORY</div>
          <h2>हाम्रो कथा</h2>
        </div>
        <div class="story-content reveal">
          <p>
            कहिलेकाहीँ जीवनमा आउने एउटा व्यक्ति नै
            सम्पूर्ण संसार जस्तै लाग्न थाल्छ।
            हाम्रो भेटबाट सुरु भएको यो सुन्दर यात्रा
            आज जीवनभर सँगै हिँड्ने वाचासम्म आइपुगेको छ।
          </p>
          <div class="quote">
            “जहाँ प्रेम हुन्छ, त्यहाँ हरेक दिन
            नयाँ सुरुवात हुन्छ।”
          </div>
        </div>
      </div>
    </section>
    <!-- =========================
         GALLERY
    ========================== -->
    <section class="gallery" id="gallery">
      <div class="section-inner">
        <div class="section-title reveal">
          <div class="small">MEMORIES</div>
          <h2>हाम्रा सम्झनाहरू</h2>
          <p>केही सुन्दर क्षणहरू, सधैँका लागि।</p>
        </div>
        <div class="gallery-grid">
          <div class="gallery-item reveal">
            <img
              src="https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=1000&q=85"
              alt="Wedding"
            />
          </div>
          <div class="gallery-item reveal">
            <img
              src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?auto=format&fit=crop&w=1000&q=85"
              alt="Wedding couple"
            />
          </div>
          <div class="gallery-item reveal">
            <img
              src="https://images.unsplash.com/photo-1469371670807-013ccf25f16a?auto=format&fit=crop&w=1000&q=85"
              alt="Wedding ceremony"
            />
          </div>
          <div class="gallery-item reveal">
            <img
              src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?auto=format&fit=crop&w=1000&q=85"
              alt="Wedding flowers"
            />
          </div>
          <div class="gallery-item reveal">
            <img
              src="https://images.unsplash.com/photo-1606800052052-a08af7148866?auto=format&fit=crop&w=1000&q=85"
              alt="Bride"
            />
          </div>
          <div class="gallery-item reveal">
            <img
              src="https://images.unsplash.com/photo-1520854221256-17451cc331bf?auto=format&fit=crop&w=1000&q=85"
              alt="Wedding rings"
            />
          </div>
        </div>
      </div>
    </section>
    <!-- =========================
         LOCATION
    ========================== -->
    <section class="location" id="location">
      <div class="section-inner">
        <div class="section-title reveal">
          <div class="small">JOIN US</div>
          <h2>विवाह स्थल</h2>
          <p>यहाँलाई भेट्न हामी आतुर छौँ।</p>
        </div>
        <div class="location-box reveal">
          <div class="location-icon">📍</div>
          <h3 id="venueName">
            काठमाडौं विवाह मण्डप
          </h3>
          <p id="venueAddress">
            काठमाडौं, नेपाल<br>
            विशेष विवाह समारोह स्थल
          </p>
          <a
            class="map-btn"
            id="mapLink"
            href="https://maps.google.com/"
            target="_blank"
            rel="noopener"
          >
            📍 Google Maps मा हेर्नुहोस्
          </a>
        </div>
      </div>
    </section>
    <!-- =========================
         RSVP
    ========================== -->
    <section class="rsvp">
      <div class="rsvp-box reveal">
        <h2>तपाईंलाई पर्खिरहेका छौँ ❤️</h2>
        <p>
          हाम्रो खुसीको क्षणमा तपाईंको उपस्थिति नै
          हाम्रो लागि सबैभन्दा ठूलो उपहार हुनेछ।
        </p>
        <a
          href="tel:+9779800000000"
          class="rsvp-btn"
          id="rsvpLink"
        >
          📞 उपस्थितिको जानकारी दिनुहोस्
        </a>
      </div>
    </section>
  </main>
  <!-- =========================
       FOOTER
  ========================== -->
  <footer>
    <div class="om">ॐ</div>
    <h3 id="footerNames">
      प्रबिन & प्रियंका
    </h3>
    <div class="footer-line"></div>
    <p>
      शुभ विवाह • शुभ मंगल • शुभ जीवन
    </p>
    <p class="made">
      प्रेमले बनाइएको हाम्रो सानो डिजिटल निमन्त्रणा ❤️
    </p>
  </footer>
  <!-- MUSIC -->
  <button class="music-btn" id="musicBtn" aria-label="Music">
    🎵
  </button>
  <!-- Put your music file here -->
  <audio id="weddingMusic" loop preload="none">
    <source src="wedding-music.mp3" type="audio/mpeg">
  </audio>
  <!-- LIGHTBOX -->
  <div class="lightbox" id="lightbox">
    <div class="lightbox-close" id="lightboxClose">×</div>
    <img id="lightboxImage" src="" alt="Gallery preview">
  </div>
  <script>
    /* =====================================================
       ✨ WEDDING WEBSITE CONFIGURATION
       Change ONLY these values to customize the website.
    ====================================================== */
    const CONFIG = {
      // Names
      groom: "प्रबिन",
      bride: "प्रियंका",
      // Wedding date
      // Format: YYYY-MM-DDTHH:mm:ss
      weddingDate: "2027-01-15T14:00:00",
      // Display date
      displayDate: "१५ माघ २०८३",
      // Venue
      venue: "काठमाडौं विवाह मण्डप",
      address: "काठमाडौं, नेपाल",
      // Google Maps
      mapUrl: "https://maps.google.com/?q=Kathmandu,Nepal",
      // RSVP phone
      phone: "+9779800000000",
      // Couple photos
      groomPhoto:
        "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=700&q=80",
      bridePhoto:
        "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=700&q=80"
    };
    /* =====================================================
       APPLY CONFIG
    ====================================================== */
    document.title =
      `शुभ विवाह | ${CONFIG.groom} & ${CONFIG.bride}`;
    document.getElementById("introNames").textContent =
      `${CONFIG.groom} & ${CONFIG.bride}`;
    document.getElementById("groomName").textContent =
      CONFIG.groom;
    document.getElementById("brideName").textContent =
      CONFIG.bride;
    document.getElementById("footerNames").textContent =
      `${CONFIG.groom} & ${CONFIG.bride}`;
    document.getElementById("heroDate").textContent =
      `${CONFIG.displayDate} — शुभ विवाह`;
    document.getElementById("venueName").textContent =
      CONFIG.venue;
    document.getElementById("venueAddress").innerHTML =
      `${CONFIG.address}<br>विशेष विवाह समारोह स्थल`;
    document.getElementById("mapLink").href =
      CONFIG.mapUrl;
    document.getElementById("rsvpLink").href =
      `tel:${CONFIG.phone}`;
    document.getElementById("groomImage").src =
      CONFIG.groomPhoto;
    document.getElementById("brideImage").src =
      CONFIG.bridePhoto;
    /* =====================================================
       INTRO
    ====================================================== */
    const intro = document.getElementById("intro");
    const openInvitation =
      document.getElementById("openInvitation");
    openInvitation.addEventListener("click", () => {
      intro.classList.add("hide");
      document.body.classList.remove("no-scroll");
      // Try to start music after user interaction
      const music =
        document.getElementById("weddingMusic");
      music.play()
        .then(() => {
          musicBtn.textContent = "🔊";
          musicBtn.classList.add("playing");
        })
        .catch(() => {});
    });
    /* =====================================================
       NAVIGATION
    ====================================================== */
    const navbar =
      document.getElementById("navbar");
    const navLinks =
      document.getElementById("navLinks");
    const menuBtn =
      document.getElementById("menuBtn");
    menuBtn.addEventListener("click", () => {
      navLinks.classList.toggle("open");
      menuBtn.textContent =
        navLinks.classList.contains("open")
          ? "×"
          : "☰";
    });
    document.querySelectorAll(".nav-links a")
      .forEach(link => {
        link.addEventListener("click", () => {
          navLinks.classList.remove("open");
          menuBtn.textContent = "☰";
        });
      });
    window.addEventListener("scroll", () => {
      if (window.scrollY > 40) {
        navbar.classList.add("scrolled");
      } else {
        navbar.classList.remove("scrolled");
      }
    });
    /* =====================================================
       COUNTDOWN
    ====================================================== */
    const weddingTime =
      new Date(CONFIG.weddingDate).getTime();
    function updateCountdown() {
      const now = new Date().getTime();
      const distance =
        weddingTime - now;
      if (distance <= 0) {
        document.getElementById("days").textContent = "00";
        document.getElementById("hours").textContent = "00";
        document.getElementById("minutes").textContent = "00";
        document.getElementById("seconds").textContent = "00";
        return;
      }
      const days =
        Math.floor(distance / (1000 * 60 * 60 * 24));
      const hours =
        Math.floor(
          (distance % (1000 * 60 * 60 * 24)) /
          (1000 * 60 * 60)
        );
      const minutes =
        Math.floor(
          (distance % (1000 * 60 * 60)) /
          (1000 * 60)
        );
      const seconds =
        Math.floor(
          (distance % (1000 * 60)) /
          1000
        );
      document.getElementById("days").textContent =
        String(days).padStart(2, "0");
      document.getElementById("hours").textContent =
        String(hours).padStart(2, "0");
      document.getElementById("minutes").textContent =
        String(minutes).padStart(2, "0");
      document.getElementById("seconds").textContent =
        String(seconds).padStart(2, "0");
    }
    updateCountdown();
    setInterval(updateCountdown, 1000);
    /* =====================================================
       SCROLL REVEAL
    ====================================================== */
    const revealObserver =
      new IntersectionObserver(
        entries => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              entry.target.classList.add("visible");
              revealObserver.unobserve(entry.target);
            }
          });
        },
        {
          threshold: 0.12
        }
      );
    document.querySelectorAll(".reveal")
      .forEach(el => revealObserver.observe(el));
    /* =====================================================
       DARK MODE
    ====================================================== */
    const themeBtn =
      document.getElementById("themeBtn");
    const savedTheme =
      localStorage.getItem("wedding-theme");
    if (savedTheme === "dark") {
      document.body.classList.add("dark");
      themeBtn.textContent = "☀";
    }
    themeBtn.addEventListener("click", () => {
      document.body.classList.toggle("dark");
      const dark =
        document.body.classList.contains("dark");
      themeBtn.textContent =
        dark ? "☀" : "☾";
      localStorage.setItem(
        "wedding-theme",
        dark ? "dark" : "light"
      );
    });
    /* =====================================================
       MUSIC
    ====================================================== */
    const music =
      document.getElementById("weddingMusic");
    const musicBtn =
      document.getElementById("musicBtn");
    musicBtn.addEventListener("click", () => {
      if (music.paused) {
        music.play()
          .then(() => {
            musicBtn.textContent = "🔊";
            musicBtn.classList.add("playing");
          })
          .catch(() => {
            alert(
              "कृपया wedding-music.mp3 फाइल राख्नुहोस्।"
            );
          });
      } else {
        music.pause();
        musicBtn.textContent = "🎵";
        musicBtn.classList.remove("playing");
      }
    });
    /* =====================================================
       GALLERY LIGHTBOX
    ====================================================== */
    const lightbox =
      document.getElementById("lightbox");
    const lightboxImage =
      document.getElementById("lightboxImage");
    const lightboxClose =
      document.getElementById("lightboxClose");
    document.querySelectorAll(".gallery-item img")
      .forEach(image => {
        image.addEventListener("click", () => {
          lightboxImage.src = image.src;
          lightbox.classList.add("active");
        });
      });
    function closeLightbox() {
      lightbox.classList.remove("active");
    }
    lightboxClose.addEventListener(
      "click",
      closeLightbox
    );
    lightbox.addEventListener("click", event => {
      if (event.target === lightbox) {
        closeLightbox();
      }
    });
    document.addEventListener("keydown", event => {
      if (event.key === "Escape") {
        closeLightbox();
      }
    });
    /* =====================================================
       PREVENT BROKEN IMAGE EXPERIENCE
    ====================================================== */
    document.querySelectorAll("img")
      .forEach(img => {
        img.addEventListener("error", () => {
          img.style.background =
            "linear-gradient(135deg,#8d1725,#d5a23a)";
          img.removeAttribute("src");
        });
      });
    /* =====================================================
       CONSOLE
    ====================================================== */
    console.log(
      "%c💍 शुभ विवाह!",
      "color:#8d1725;font-size:25px;font-weight:bold;"
    );
    console.log(
      `❤️ ${CONFIG.groom} & ${CONFIG.bride}`
    );
  </script>
</body>
</html>

Customize these first

At the bottom of the file, edit this section:

const CONFIG = {
  groom: "प्रबिन",
  bride: "प्रियंका",
  weddingDate: "2027-01-15T14:00:00",
  displayDate: "१५ माघ २०८३",
  venue: "काठमाडौं विवाह मण्डप",
  address: "काठमाडौं, नेपाल",
  mapUrl: "https://maps.google.com/?q=Kathmandu,Nepal",
  phone: "+9779800000000",
  groomPhoto: "YOUR_GROOM_PHOTO_URL",
  bridePhoto: "YOUR_BRIDE_PHOTO_URL"
};