@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap');

    /* CSS Reset Basics */
    *, *::before, *::after {
      box-sizing: border-box;
    }
    body {
      font-family: 'Poppins', sans-serif;
      margin: 0; padding: 0;
      background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
      color: #6b7280;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-attachment: fixed;
    }

    /* Container */
    .container {
      max-width: 1200px;
      width: 100%;
      padding: 2rem 1rem 4rem 1rem;
    }

    /* Header */
    header {
      position: sticky;
      top: 0;
      background: rgba(255 255 255 / 0.85);
      backdrop-filter: saturate(180%) blur(10px);
      border-bottom: 1px solid #ddd6f3;
      width: 100%;
      z-index: 100;
      box-shadow: 0 2px 10px rgb(161 140 209 / 0.25);
    }
    .header-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 1rem 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .logo {
      font-weight: 700;
      font-size: 1.5rem;
      color: #4c3284;
      user-select: none;
      letter-spacing: 0.03em;
      text-shadow:
        0 0 6px #6d4cdf88;
    }
    nav.primary-nav {
      display: flex;
      gap: 1rem;
      align-items: center;
    }
    nav.primary-nav a {
      color: #6d4cdf;
      font-weight: 600;
      text-decoration: none;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      transition: background-color 0.3s ease;
      user-select: none;
      cursor: pointer;
    }
    nav.primary-nav a:hover,
    nav.primary-nav a:focus {
      background-color: #d3c6f9;
      outline: none;
    }

    /*lyrics*/
    .lyrics {
  font-style: italic;
  color: #999;
  font-size: 1.2rem;
  border-left: 3px solid #ccc;
  padding-left: 1rem;
  margin: 2rem;
}
.glow-lyric {
  font-size: 1.2rem;
  text-align: center;
  color: white;
  text-shadow: 0 0 10px #b19cd9, 0 0 20px #d8bfd8;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.glow-lyric.show {
  opacity: 1;
}


    /* Hero Section */
    .hero {
      text-align: center;
      padding: 3rem 1rem 4rem;
      max-width: 800px;
      margin: 0 auto;
      color: #3e2c63;
      text-shadow:
        0 2px 6px rgb(101 80 255 / 0.3);
    }
    .hero h1 {
      font-weight: 800;
      font-size: clamp(3rem, 7vw, 5rem);
      color: #4c3284;
      margin-bottom: 0.25rem;
      line-height: 1.1;
      letter-spacing: 0.02em;
    }
    .hero h2 {
      font-weight: 700;
      font-size: clamp(1.75rem, 3vw, 2.5rem);
      color: #7a57d1;
      margin-top: 0;
      user-select: none;
      text-shadow: 0 0 6px #a18cd1cc;
    }
    .hero p {
      max-width: 600px;
      margin: 1.5rem auto 2.5rem;
      font-weight: 600;
      font-size: 1.2rem;
      color: #6a5499;
      letter-spacing: 0.015em;
    }

    /* Card style for sections */
    section.card {
      background: rgba(255 255 255 / 0.88);
      padding: 3rem 3rem 3rem 3rem;
      margin: 3rem auto;
      border-radius: 0.75rem;
      box-shadow:
        0 12px 24px rgb(161 140 209 / 0.2),
        0 4px 8px rgb(161 140 209 / 0.1);
      max-width: 1000px;
      color: #5b4a8a;
      text-shadow: 0 0 2px #baa6e6aa;
      backdrop-filter: saturate(180%) blur(12px);
    }
    section.card h3 {
      font-weight: 700;
      font-size: 2.25rem;
      margin-bottom: 1.7rem;
      color: #3d3475;
      user-select: none;
      text-align: center;
      letter-spacing: 0.04em;
      text-shadow: 0 0 8px #8f79e3cc;
    }

    /* Song Section - placed at top */
    .audio-section {
      max-width: 600px;
      background: rgba(255 255 255 / 0.9);
      border-radius: 0.75rem;
      box-shadow:
        0 12px 30px #9677f7cc;
      margin: 3rem auto 2rem;
      padding: 2rem 2.5rem;
      text-align: center;
      color: #5a4790;
      user-select: none;
    }
    .audio-section h3 {
      font-weight: 800;
      font-size: 2rem;
      margin-bottom: 1.75rem;
      color: #4d34ae;
      letter-spacing: 0.02em;
      text-shadow: 0 0 8px #9f96ffcc;
    }
    .audio-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1.5rem;
      flex-wrap: wrap;
    }
    .audio-controls input[type="file"] {
      cursor: pointer;
      border-radius: 0.5rem;
      border: 2px solid #a59af8;
      background: #e7e1ff;
      padding: 0.65rem 1.2rem;
      font-weight: 600;
      font-size: 1rem;
      color: #5b48a8;
      transition: background-color 0.3s ease, border-color 0.3s ease;
      box-shadow: 0 0 6px #9e8ff7aa;
      user-select: text;
    }
    .audio-controls input[type="file"]:hover,
    .audio-controls input[type="file"]:focus {
      background-color: #d8d0ff;
      border-color: #7f6df6;
      outline: none;
      box-shadow: 0 0 12px #8d7cfacc;
    }
    button.play-pause-btn {
      background: #6d4cdf;
      border: none;
      border-radius: 0.5rem;
      color: white;
      font-weight: 700;
      padding: 0.75rem 2.2rem;
      font-size: 1.125rem;
      cursor: pointer;
      transition: background-color 0.3s ease;
      user-select: none;
      box-shadow: 0 6px 12px #6600ffaa;
    }
    button.play-pause-btn:hover:enabled {
      background: #532fcc;
    }
    button.play-pause-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      box-shadow: none;
    }
    audio#audioPlayer {
      margin-top: 1.8rem;
      width: 100%;
      border-radius: 0.5rem;
      box-shadow: 0 6px 18px #a28efcaa;
      outline: none;
      display: none;
    }
    audio#audioPlayer.show {
      display: block;
    }

    /* Gallery grid with quotes under each photo */
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
      gap: 2rem;
      max-width: 1000px;
      margin: 0 auto;
      border-radius: 0.75rem;
    }
    .gallery-item {
      background: rgba(255 255 255 / 0.9);
      border-radius: 0.75rem;
      box-shadow:
        0 10px 20px rgb(161 140 209 / 0.15),
        0 4px 8px rgb(161 140 209 / 0.1);
      padding: 1rem 1rem 2rem;
      color: #5b4a8a;
      text-align: center;
      user-select: none;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .gallery-image {
      background: linear-gradient(145deg, #c5b9e8, #9277d7);
      box-shadow:
        inset 4px 4px 8px #beadebab,
        inset -4px -4px 8px #a189d0bb,
        6px 6px 12px #8d74cda3;
      border-radius: 0.75rem;
      aspect-ratio: 1/1;
      width: 100%;
      max-width: 220px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #f1e7ff;
      font-weight: 700;
      font-size: 1.25rem;
      text-shadow: 0 0 6px #9e8ffccc;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      cursor: pointer;
      margin-bottom: 1rem;
    }
    .gallery-image:hover {
      transform: scale(1.06);
      box-shadow:
        inset 6px 6px 18px #b18ee6ee,
        inset -6px -6px 18px #a08ddaee,
        10px 10px 16px #9c7ee1ff;
      text-shadow: 0 0 10px #b9a5faff;
    }
    .gallery-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 0.75rem;
    }
    .quote-text {
      font-style: italic;
      color: #604d9a;
      font-weight: 600;
      font-size: 1.1rem;
      max-width: 220px;
      line-height: 1.4;
      user-select: text;
      text-shadow: 0 0 4px #bcb0f6cc;
    }
    .quote-author {
      margin-top: 0.4rem;
      color: #8e79d7;
      font-weight: 700;
      font-size: 0.9rem;
      letter-spacing: 0.06em;
      user-select: none;
    }

    /* Dance & Shayari section */
    .dance-shayari-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      justify-content: center;
      max-width: 900px;
      margin: 0 auto;
      color: #5a4790;
      text-shadow: 0 0 4px #cbbefcbb;
    }
    .dance-text, .shayari-text {
      background: rgba(255 255 255 / 0.9);
      border-radius: 0.75rem;
      box-shadow:
        0 8px 20px #8e78ddb0;
      padding: 2.2rem 3rem;
      flex: 1 1 360px;
      color: #604fa2;
      font-weight: 600;
      font-size: 1.175rem;
      line-height: 1.6;
      position: relative;
      user-select: text;
      transition: box-shadow 0.4s ease;
    }
    .dance-text h4, .shayari-text h4 {
      font-weight: 800;
      font-size: 1.95rem;
      margin-bottom: 1.4rem;
      color: #4b3397;
      letter-spacing: 0.03em;
      user-select: none;
      text-shadow: 0 0 8px #a49aeaff;
    }
    .shayari-text {
      cursor: text;
      min-height: 8rem;
      color: #9279da;
      font-style: italic;
      box-shadow:
        0 8px 24px #967de2c7;
      resize: vertical;
      overflow-y: auto;
    }
    .shayari-text:focus {
      outline: none;
      box-shadow:
        0 0 12px 3px #a79cfcaa;
      background: #f3eaffdd;
      color: #6a53bd;
      font-style: normal;
    }
    .shayari-text[contenteditable] {
      white-space: pre-wrap;
    }
    .redwine{
      color: #7B0323;
    }

    /* Clover leaf section */
    .clover-section {
      background: rgba(255 255 255 / 0.9);
      border-radius: 0.75rem;
      box-shadow: 0 10px 28px #906edeaa;
      max-width: 600px;
      margin: 3rem auto 0;
      padding: 2.8rem 2.5rem;
      text-align: center;
      color: #5c47a3;
      font-weight: 600;
      user-select: none;
    }
    .clover-svg {
      width: 72px;
      height: 72px;
      margin: 0 auto 1.5rem;
      fill: #9e8ef7;
      filter: drop-shadow(0 2px 4px #6656b8aa);
      transition: transform 0.3s ease;
      cursor: default;
    }
    .clover-svg:hover {
      transform: scale(1.1);
    }
    .clover-textarea {
      width: 100%;
      min-height: 6rem;
      border: 2px dashed #baa5f9;
      border-radius: 0.5rem;
      padding: 1.2rem 1.5rem;
      font-size: 1.125rem;
      color: #7f6fcb;
      font-family: 'Poppins', sans-serif;
      resize: vertical;
      background: rgba(255 255 255 / 0.8);
      box-shadow: inset 0 0 10px #c1b9ffcc;
      transition: box-shadow 0.3s ease;
      user-select: text;
    }
    .clover-textarea::placeholder {
      color: #c6b7fd;
      font-style: italic;
    }
    .clover-textarea:focus {
      outline: none;
      box-shadow: 0 0 14px 4px #a89bffdd;
      background: #f4eaff;
      color: #5a4792;
    }


    /*dreamy effect*/
.dancing-photo-container {
  position: relative;
  width: fit-content;
  margin: auto;
  padding: 20px;
}

.glow-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(255, 105, 180, 0.4), transparent 70%);
  border-radius: 50%;
  filter: blur(40px);
  z-index: 0;
}

.dancing-photo {
  position: relative;
  z-index: 1;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  width: 300px;
}
@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

.glow-effect {
  animation: pulseGlow 4s ease-in-out infinite;
}

/*floral design*/
.bloom-wrapper {
  position: relative;
  display: inline-block;
}

.flower-background {
 
  position: absolute;
  top: 50%;
  left: 50%;
  width: 380px;
  height: 380px;
  background: url("your-floral-image.png") no-repeat center/cover;
  transform: translate(-50%, -50%);
  z-index: 0;
  filter: brightness(1.4) saturate(1.2) blur(4px);
  animation: bloom 6s ease-in-out infinite alternate;
  box-shadow:
    0 0 60px 30px rgba(255, 200, 255, 0.5),
    0 0 100px 60px rgba(109, 15, 109, 0.3);
}

.glow-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(128, 0, 64, 0.4), transparent 70%);
  border-radius: 50%;
  z-index: -2;
  animation: pulse 5s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.1;
  }
}


.dancing-photo {
  position: relative;
  z-index: 2;
  border-radius: 16px;
}

/* Bloom animation */
@keyframes bloom {
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}