* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      background-color: #333;
      margin: 0;
      padding: 0;
     
      
    }
    

       .unique-banner-wrapper {
      position: relative;
      height: 80px;
      overflow: hidden;
      border-bottom: 3px solid #ff5e99;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      background-color: #FFE9A7;
      cursor: pointer;
    }

    canvas.bg-bubbles-canvas,
    canvas.burst-confetti-canvas {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
    }

    .unique-banner-text {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 5px 10px;
      margin: 0 auto;
      width: fit-content;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1rem;
      font-weight: bold;
      color: white;
      background: linear-gradient(90deg, #FF61D2, #FE9090);
      border-radius: 30px;
      box-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
    }

    .birthday-main-content {
      padding: 60px 20px;
      text-align: center;
      margin-left: 20px;
    }

    .birthday-main-content h1 {
      color: #ff4da6;
      font-size: 2.5rem;
      margin-bottom: 10px;
    }

    .birthday-main-content p {
      font-size: 1.1rem;
      color: #555;
    }

    @media (max-width: 768px) {
      .unique-banner-text {
        font-size: 0.9rem;
        padding: 5px 10px;
      }

      .birthday-main-content h1 {
        font-size: 1rem;
      }

      .birthday-main-content p {
        font-size: 1rem;
      }
    }

    /* ---------- Navbar ---------- */
    /* Container for navbar contents */


    /* ---------- Hero Section ---------- */
    .hero {
      background:rgb(226, 139, 152);
      color: white;
      padding: 5rem 2rem 8rem;
      position: relative;
      overflow: hidden;
      height:600px;
    }
   

    .hero-content {
      max-width: 1800px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }


    .hero-content h1 {
      font-size: 2.8rem;
      font-weight:bolder;
      font-family:cursive;
      line-height: 1.2;
      color:white;
      margin-bottom: 10px;
    }

    .hero-content h1 span {
      display: block;
    }

    .hero-content p {
      font-size: 1.1rem;
      margin-bottom: 2rem;
      max-width: 600px;
    }

    .hero-content .btn {
      background-color: white;
      color: #4f46e5;
      border: none;
      padding: 0.8rem 1.5rem;
      font-size: 1rem;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.3s ease;
      
    }
    

    .hero-content .btn:hover {
      background-color: aqua;
    }

   .hero-image {
  margin-top: 14rem;
  max-width: 100%;
  width: 300px;
  position: relative;
  z-index: 1;
  transform: translateY(-180px); /* <<< THIS will move it up */
}



    /* Wavy SVG at Bottom */
    .wave {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      overflow: hidden;
      line-height: 0;
      z-index: 0;
    }

    .wave svg {
      display: block;
      width: 100%;
      height: 100px;
    }

    .shape-fill {
      fill: #ffe0f0;
    }

    @media (min-width: 768px) {
      .wave svg {
        height: 100px;
      }
    }

    @media (min-width: 1024px) {
      .wave svg {
        height: 180px; /* Taller wave on large screens */
      }
    }

    /* Responsive Hero Layout */
    @media (min-width: 768px) {
      .hero-content {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
      }

      .hero-text {
        flex: 1;
        padding-right: 2rem;
      }

      
     .hero-image {
    transform: translateY(-310px); /* more upward on tablet/desktop */
  }
    }
    @media (min-width: 1024px) {
  .hero-content h1 {
    font-size: 4rem; /* Bigger heading on large screens */
  }

  .hero-content p {
    font-size: 1.3rem; /* Bigger paragraph on large screens */
    line-height: 1.6;
  }
}
@media (min-width: 1024px) {
  .hero-content {
    align-items: flex-start;
  }

  .hero-text {
    flex: 1.2; /* give more space to text */
    padding-right: 1rem;
  }

  .hero-content h1 {
    font-size: 4rem;
    text-align: left;
  }

  .hero-content p {
    font-size: 1.3rem;
    line-height: 1.6;
    text-align: left;
  }

  .hero-content .btn {
    font-size: 1.1rem;
  }

  .hero-image {
    flex: 0.8; /* slightly shrink image section */
  }
}

 #main-page-content {
        width: 100%; /* Take full width of body padding */
        max-width: 1810px; /* Set a consistent max-width for the entire content */
        box-sizing: border-box; /* Include padding in calculations */
    }

    /* --- Cake Section Styles (from previous version, slightly refined) --- */
    .cake-section {
        background-color: #ffe0f0;
        padding: 80px 20px;
        text-align: center;
        width: 100%; /* Ensure it takes full width of its parent (#main-page-content) */
       
        box-sizing: border-box;
    }

    .cake-section h2 {
        font-size: 2.5em;
        color: #d147a3;
        margin-bottom: 30px;
    }

    .cake-image-placeholder {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 40px;
        margin: 40px auto;
        max-width: 900px; /* Limiting the container for images */
        min-height: 250px;
        flex-wrap: wrap; /* Allows images to wrap */
    }

    .cake-vector-img,
    .additional-vector-img {
        max-width: 45%; /* Each image takes up less than half the width, accounting for gap */
        height: auto;
        max-height: 350px;
        display: block;
        object-fit: contain;
    }

    .cake-message {
        font-size: 1.5em;
        color: #d147a3;
        margin-top: 40px;
        font-weight: bold;
    }

    .blow-candle-btn {
        margin-top: 30px;
        margin-bottom: 30px;
        font-size: 1.2em;
        padding: 15px 35px;
        background-color: #ff69b4;
        color: white;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }

    .blow-candle-btn:hover {
        background-color: #e04b9b;
        transform: translateY(-3px);
    }

    .blessing-quote {
        font-size: 1.6em;
        color: #8b0000;
        margin-top: 20px;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        min-height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 10px;
        font-style: italic;
        line-height: 1.4;
        text-align: center;
    }

    .blessing-quote.show {
        opacity: 1;
        transform: translateY(0);
    }

    /* --- NEW: Memories Overview Section --- */
  




/* --- NEW: Memories Overview Section --- */
  /* --- Memories Overview Section --- */
    .memories-overview-section {
        width: 100%; /* Take full width of its parent (#main-page-content) */
        padding: 50px 20px;
        background-color: #fdfaf0;
        box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        text-align: center;
        box-sizing: border-box;
    }

    .memories-overview-section h1 {
        font-size: 3em;
        color: #4a4a4a;
        margin-bottom: 40px;
        letter-spacing: 2px;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        text-align: center;
    }

    .memories-content-wrapper {
        display: flex;
        justify-content: center; /* Center the items when they wrap or are on one line */
        align-items: flex-start;
        gap: 30px;
        flex-wrap: wrap; /* IMPORTANT: Allow items to wrap when space is limited */
    }

    .left-overview-area, .right-overview-area {
        flex: 1 1 45%; /* Allow growing/shrinking, start with 45% basis */
                       /* This ensures two columns with a gap, and wrapping for smaller screens */
        max-width: 550px; /* Limit their individual max width to prevent them from becoming too wide */
                          /* Adjust this value based on your desired visual balance */
        min-height: 450px; /* Use min-height here, allow to grow if content demands */
        height: auto; /* Allow height to adjust based on content */
        display: flex;
        flex-direction: column; /* Ensure internal content stacks */
        justify-content: center;
        align-items: center;
        background-color: #fdfaf0;
        border-radius: 8px;
        font-style: italic;
        color: #666;
        font-size: 1.1em;
        text-align: center;
        padding: 20px;
        box-sizing: border-box;
    }
    .right-overview-area {
        position: relative;
        cursor: pointer;
    }

    /* Add specific styling for images within overview areas */
    .overview-vector-img {
        max-width: 80%; /* Limit image size within its container */
        max-height: 80%; /* Limit image height within its container */
        height: auto;
        object-fit: contain; /* Ensure the whole image is visible */
        display: block; /* Remove extra space below image */
        margin: 0 auto; /* Center image if it doesn't take full width */
    }

    /* For the initial right box, align content vertically */
    .initial-vector {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #e0f2f7;
        border-radius: 8px; /* Match parent's border-radius */
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        display: flex; /* Make it a flex container */
        flex-direction: column; /* Stack image and text vertically */
        justify-content: center; /* Center items vertically */
        align-items: center; /* Center items horizontally */
        gap: 15px; /* Space between image and text */
        text-align: center; /* Center text */
        padding: 20px; /* Ensure padding for content inside */
        box-sizing: border-box;
        transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
    }

    .initial-vector p {
        font-size: 1.1em;
        color: #555;
        margin: 0; /* Reset default paragraph margin */
    }

    .initial-vector .initial-book-vector {
        max-width: 60%; /* Make the initial book vector slightly smaller */
        max-height: 60%;
    }

    .initial-vector.hidden {
        opacity: 0;
        transform: scale(0.8);
        pointer-events: none;
    }

    /* --- Book Styles (Integrated into right-overview-area) --- */
    .memory-book {
        width: 100%;
        height: 100%; /* The book should always fill its parent (.right-overview-area) */
        background-color: #fdfaf0;
        border: 1px solid #c9c9c9;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transform: scale(0.8);
        pointer-events: none;
        display: flex; /* Make memory-book a flex container */
        flex-direction: column; /* Stack its children (content and navigation) vertically */
        justify-content: space-between; /* Pushes content up, navigation down */
        padding: 25px; /* Generous padding around the content */
        box-sizing: border-box;
        transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
        overflow: hidden; /* Hide overflowing content during transitions */
    }

    .memory-book.visible {
        opacity: 1;
        transform: scale(1);
        pointer-events: all;
    }

    .book-content {
        flex-grow: 1; /* Allow content to take up available space */
        display: flex;
        flex-direction: column;
        justify-content: center; /* Center content vertically */
        align-items: center; /* Center content horizontally */
        text-align: center;
        font-size: 1.1em;
        line-height: 1.7;
        color: #444;
        position: relative;
        max-height: 100%; /* Ensure it doesn't push navigation out if content is too short */
    }

    .book-content h3 {
        margin-top: 0;
        color: #5a2c00;
        font-size: 1.8em;
        margin-bottom: 15px;
        word-break: break-word;
    }

    .book-content p {
        word-break: break-word;
        overflow-y: auto; /* Make paragraph scrollable if content is too long */
        max-height: 150px; /* Adjust this value to control scrollable area */
        padding: 0 5px; /* Small horizontal padding for scrollable text */
    }

    .book-navigation {
        display: flex;
        justify-content: space-between; /* Push buttons to opposite ends */
        width: 100%; /* Take full width of parent */
        margin-top: 20px; /* Space above buttons */
        flex-shrink: 0; /* Prevent navigation from shrinking */
        align-items: center; /* Vertically align buttons */
    }

    .book-navigation button {
        padding: 12px 25px; /* Increased padding for larger buttons */
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 1em; /* Standard font size */
        transition: background-color 0.3s ease, transform 0.2s ease;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        white-space: nowrap; /* Prevent button text from wrapping */
        flex-grow: 1; /* Allow buttons to grow to fill space */
        margin: 0 5px; /* Small margin between buttons if they are next to each other */
        max-width: 48%; /* Ensure they don't grow too much and maintain a gap */
    }

    .book-navigation button:first-child { /* Specific style for "Previous Page" button */
        margin-right: auto; /* Push it to the left */
        text-align: left; /* Align text to left */
    }

    .book-navigation button:last-child { /* Specific style for "Next Page" button */
        margin-left: auto; /* Push it to the right */
        text-align: right; /* Align text to right */
    }

    .book-navigation button:hover {
        background-color: #0056b3;
        transform: translateY(-2px);
    }

    .book-navigation button:disabled {
        background-color: #cccccc;
        cursor: not-allowed;
        transform: none;
    }

    /* --- Media Queries for Responsiveness (Memories Section Only) --- */

    /* Tablets and smaller desktops (e.g., 992px and below) */
    @media (max-width: 992px) {
        .memories-overview-section {
            padding: 60px 15px;
        }

        .memories-content-wrapper {
            justify-content: center; /* Ensures items are centered when they wrap */
            gap: 25px; /* Adjust gap */
        }

        .left-overview-area, .right-overview-area {
            flex: 1 1 48%; /* Adjust basis to allow two columns with small gap */
            max-width: 48%; /* Limit their individual max width more strictly */
            min-height: 400px; /* Ensure sufficient min-height */
            height: auto; /* Allow height to adjust */
        }

        .memories-overview-section h1 {
            font-size: 2.5em;
            margin-bottom: 30px;
        }

        /* Image adjustments for tablets */
        .overview-vector-img {
            max-width: 90%;
            max-height: 90%;
        }
        .initial-vector .initial-book-vector {
            max-width: 70%;
            max-height: 70%;
        }
        .initial-vector p {
            font-size: 1em;
        }
    }

    /* Mobile devices (e.g., 768px and below) */
    @media (max-width: 768px) {
        .memories-overview-section {
            padding: 40px 10px;
        }
        .memories-overview-section h1 {
            font-size: 2em;
            margin-bottom: 20px;
        }

        .memories-content-wrapper {
            flex-direction: column; /* Force items to stack vertically */
            align-items: center;    /* Center the stacked items horizontally */
            gap: 20px;
        }
        .left-overview-area, .right-overview-area {
            width: 100%; /* Take full width of parent's padding */
            max-width: 450px; /* Limit their max width even when stacked, for better readability */
            min-height: 350px; /* Set a fixed minimum height for both, allowing content to stretch it */
            height: auto; /* Allow height to adjust based on content if it exceeds min-height */
            min-width: unset; /* Important to allow shrinking */
            flex-direction: column; /* Stack internal content vertically */
            justify-content: center;
            align-items: center;
            padding: 15px;
        }

        .memory-book {
            padding: 20px; /* Reduce padding for smaller books */
        }
        .book-content h3 {
            font-size: 1.3em; /* Smaller title */
        }
        .book-content p {
            font-size: 0.9em; /* Smaller text */
            max-height: 120px; /* Adjust max-height if needed for smaller screens */
        }
        .book-navigation {
            flex-direction: row; /* Keep them in a row for better button layout */
            justify-content: space-between; /* Space out buttons */
            margin-top: 15px; /* Less space */
        }
        .book-navigation button {
            padding: 10px 15px; /* Smaller padding */
            font-size: 0.9em; /* Smaller font */
            flex-grow: 1; /* Allow them to grow */
            margin: 0 3px; /* Smaller margin between */
            max-width: 48%; /* Ensure two columns */
        }

        /* Image adjustments for mobile */
        .overview-vector-img {
            max-width: 85%;
            max-height: 85%;
        }
        .initial-vector .initial-book-vector {
            max-width: 60%;
            max-height: 60%;
        }
        .initial-vector p {
            font-size: 0.9em;
        }
    }

    /* Very small mobile devices (e.g., 480px and below) */
    @media (max-width: 480px) {
        .memories-overview-section {
            padding: 30px 5px;
        }
        .memories-overview-section h1 {
            font-size: 1.8em;
        }
        .left-overview-area, .right-overview-area {
            min-height: 300px; /* Ensure sufficient min-height for very small screens */
            height: auto; /* Allow height to adjust */
            max-width: 95%; /* Even for very small screens, keep a max-width */
        }
        .memory-book {
            padding: 15px;
        }
        .book-content h3 {
            font-size: 1.3em;
        }
        .book-content p {
            font-size: 0.9em;
            max-height: 100px; /* Further adjust max-height if needed */
        }
        .book-navigation button {
            padding: 8px 12px;
            font-size: 0.8em;
            max-width: 49%; /* Slightly more width for each button */
        }

        /* Image adjustments for very small mobile */
        .overview-vector-img {
            max-width: 95%;
            max-height: 95%;
        }
        .initial-vector .initial-book-vector {
            max-width: 70%;
            max-height: 70%;
        }
        .initial-vector p {
            font-size: 0.85em;
        }
    }

    .main-section-wrapper {
            width: 100%;
            max-width: 1810px; /* Increased max-width to accommodate all elements */
            margin: 0 auto; /* Center the wrapper */
            padding: 30px;
            background-color:lightpink; /* White background for the main section */
            border-radius: 15px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Deeper shadow */
            box-sizing: border-box;
            display: flex;
            flex-direction: column; /* Start with column layout for heading */
            align-items: flex-start; /* Align heading to left */
            gap: 30px; /* Space between heading and content */
        }

        .main-heading {
            font-size: 3em;
            color: #333;
            margin: 0; /* Remove default margin */
            align-self: flex-start; /* Ensure heading is left-aligned in column */
            width: 100%; /* Occupy full width for the heading */
            text-align: left; /* Explicitly align text left */
            padding-bottom: 10px;
            border-bottom: 3px solid #ff69b4; /* Pink underline for heading */
            line-height: 1.2;
        }

        .content-and-image-row {
            display: flex;
            flex-wrap: wrap; /* Allows sections to wrap on smaller screens */
            width: 100%;
            gap: 30px; /* Space between the three main columns */
            align-items: flex-start; /* Align items to the top */
        }

        .left-visual {
            flex: 1; /* Takes 1 part of available space */
            min-width: 280px; /* Minimum width for the camera image area */
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            box-sizing: border-box;
        }

        .left-visual img {
            max-width: 100%;
            height: auto;
            display: block;
            border-radius: 10px; /* Optional: if your image is square/rectangular */
        }

        .center-card {
            flex: 2; /* Takes 2 parts of available space */
            min-width: 350px; /* Minimum width for the card content */
            background-color: #fdfdfd;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            padding: 30px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 20px; /* Space between sub-containers */
        }

        .center-card h3 {
            font-size: 1.8em;
            color: #ff4500; /* Orange-red for sub-headings */
            margin-bottom: 15px;
            text-align: center; /* Center align sub-heading like in SS */
            font-style: italic; /* Italic like in SS */
        }

        .card-sub-container {
            margin-bottom: 0px; /* Removed bottom margin as gap handles it */
        }

        .card-sub-container p {
            color: #555;
            line-height: 1.7;
            font-size: 1.05em;
            background-color: #f9f9f9; /* Light background for text area */
            border: 1px dashed #e0e0e0; /* Dashed border for visual space */
            padding: 15px;
            min-height: 80px; /* Ensure visible space for paragraphs */
            border-radius: 8px;
            box-sizing: border-box;
        }

        .right-vector-space {
            flex: 1; /* Takes 1 part of available space */
            min-width: 250px; /* Minimum width for the right vector space */
            display: flex;
            justify-content: center;
            align-items: center;
            background-color:lightpink; /* Light blue background for visual distinction */
            border-radius: 12px;
            padding: 20px;
            box-sizing: border-box;
        }

        .right-vector-space img {
            max-width: 100%;
            height: auto;
            display: block;
            opacity: 0.8; /* Slightly translucent for a subtle effect */
        }

        /* Responsive adjustments */
        @media (max-width: 992px) {
            .content-and-image-row {
                flex-direction: column; /* Stack all columns on medium screens */
                align-items: center; /* Center items when stacked */
            }
            .left-visual, .center-card, .right-vector-space {
                width: 100%; /* Take full width when stacked */
                min-width: unset; /* Remove min-width constraints */
            }
            .left-visual {
                order: -2; /* Image on top */
            }
            .main-heading {
                text-align: center; /* Center heading on smaller screens */
            }
        }

        @media (max-width: 600px) {
            body {
                padding: 15px;
            }
            .main-section-wrapper {
                padding: 20px;
            }
            .main-heading {
                font-size: 2.2em;
            }
            .center-card h3 {
                font-size: 1.5em;
            }
            .card-sub-container p {
                font-size: 0.95em;
                min-height: 60px; /* Adjust min-height for smaller screens */
            }
        }

    /* WAIT SCREEN STYLING */
.wait-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
 background: linear-gradient(-45deg, #e04b9b, #ff6ec4, #c8b6ff, #b2c7d9, #d8bfd8);
  background-size: 400% 400%;
  animation: gradientBG 5s ease infinite;
  color: white;
  text-align: center;
  box-sizing: border-box;
  padding: 20px;
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


.wait-vector-img {
  max-width: 300px;
  height: auto;
  margin-bottom: 20px;
}

.wait-heading {
  font-size: 1.8rem;
  font-family: 'Pacifico', cursive;
  margin-bottom: 10px;
  color:#FFD700
}

.countdown-box {
  font-size: 2rem;
  font-weight: bold;
  margin-top: 10px;
  color:#FFD700;
}

/* RESPONSIVE */
@media screen and (max-width: 600px) {
  .wait-heading {
    font-size: 1.6rem;
  }

  .wait-vector-img {
    max-width: 200px;
  }

  .countdown-box {
    font-size: 2rem;
  }
}
@media (max-width: 600px) {
  .hero-image {
    width: 230px;
    transform: translateY(-300px);
    margin-left: 180px;
  }
}
 .hero-content .btn{
    margin-right: 120px;
 }

#shayari-section {
      display: flex;
      justify-content: center;
      align-items: center;
       background: linear-gradient(to right, #ffe0f0, #fff9fa);
      padding: 40px 20px;
    }
    

    .container {
      background: rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.1);
      display: flex;
      flex-wrap: wrap;
      max-width: 1100px;
      width: 100%;
      overflow: hidden;
      margin: 5rem 0 5rem 0;
    }

    .shayari-box {
      flex: 1 1 55%;
      padding: 30px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .shayari-card {
      position: relative;
      background: #fff;
      padding: 30px;
      border-radius: 20px;
      margin-bottom: 20px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
      min-height: 150px;
    }

    .emoji-badge {
      position: absolute;
      top: -10px;
      left: -10px;
      background: #ffe0ec;
      border: 2px solid white;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.2rem;
      box-shadow: 0 4px 10px rgba(255, 150, 180, 0.3);
    }

    .shayari-text {
      font-size: 1.4rem;
      line-height: 1.8;
      color: #5c005d;
    }

    .image-box {
      flex: 1 1 45%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff0f5;
      padding: 40px;
    }

    .image-box img {
      max-width: 100%;
      height: auto;
      border-radius: 15px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    }

    .buttons {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      position: relative;
    }

    .buttons button {
      padding: 5px 20px;
      border: none;
      border-radius: 50px;
      background: linear-gradient(135deg, #ff8ec7, #ffa8b5);
      color: white;
      font-weight: bold;
      font-size: 1rem;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(255, 118, 166, 0.4);
      transition: transform 0.2s, background 0.3s ease;
      position: relative;
    }

    .buttons button:hover {
      transform: scale(1.05);
      background: linear-gradient(135deg, #ff7bbd, #ff94a4);
    }

    .music-indicator {
      position: absolute;
      top: -10px;
      height: 5px;
      width: 60%;
      left: 20%;
      background: linear-gradient(90deg, #ff7bbd, #ff94a4);
      border-radius: 4px;
      animation: pulse 1.2s infinite ease-in-out;
      display: none;
    }

    .music-on .music-indicator {
      display: block;
    }

    @keyframes pulse {
      0% { transform: scaleX(1); opacity: 0.6; }
      50% { transform: scaleX(1.5); opacity: 1; }
      100% { transform: scaleX(1); opacity: 0.6; }
    }

    @keyframes fadeIn {
      0% { opacity: 0; transform: translateY(20px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    .fade-in {
      animation: fadeIn 2s ease;
    }

    @media (max-width: 768px) {
      .container {
        flex-direction: column;
      }

      .shayari-box, .image-box {
        padding: 20px;
        flex: 1 1 100%;
      }

      .shayari-card {
        padding: 20px;
      }

      .shayari-text {
        font-size: 1.2rem;
      }
    }

   .music-container {
  position: relative;
  width: 100%;
  background: linear-gradient(145deg, #f6d8f0, #d8c7ff);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
}

h1 {
  text-align: center;
  color: brown;
  font-size: 2rem;
  margin-bottom: 30px;
  z-index: 2;
  position: relative;
  font-style: oblique;
}

.inner {
  width: 100%;
  max-width: 1000px;
  min-height: 600px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 30px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  z-index: 2;
  position: relative;
  padding: 30px;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  margin:3rem 0 4rem 0 ;
}


.content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  width: 100%;
  flex-wrap: nowrap;
}

.left,
.right {
  flex: 1;
  min-width: 0;
}

.left {
  display: flex;
  justify-content: center;
  align-items: center;
}

.left img.vector {
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: 20px;
}

.right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* ✅ ADDED */
  text-align: left;
  padding: 10px;
}

.right h2 {
  font-size: 1.8rem;
  margin-bottom: 15px;
}

.right p {
  font-size: 1rem;
  line-height: 1.6;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.shape {
  position: absolute;
  animation: wave 10s ease-in-out infinite;
}

.shape:nth-of-type(1) {
  width: 200px;
  height: 200px;
  background: #A393BF; /* Dusty Mauve */
  top: 20%;
  left: 10%;
}

.shape:nth-of-type(2) {
  width: 400px;
  height: 400px;
  background: #C2B9A9; /* Light Taupe */
  top: -200px;
  left: -400px;

}

.shape:nth-of-type(3) {
  width: 300px;
  height: 300px;
  background: #9FBACD; /* Muted Cadet Blue */
  bottom: -25%;
  right: -5%;
 
}

.shape:nth-of-type(4) {
  width: 250px;
  height: 250px;
  background: #D6C6B9; /* Warm Sand */
  bottom: -120px;
  left: 50%;
;
}

.shape:nth-of-type(5) {
  width: 350px;
  height: 350px;
  background: #B98B82; /* Soft Rosy Cocoa */
  top: -8%;
  right: 10%;

}

.shape:nth-of-type(6),
.shape:nth-of-type(7) {
  width: 100px;
  height: 100px;
  background: #B8A4C9; /* Lilac Smoke */
  transform: rotate(90deg);

}

.shape:nth-of-type(6) {
  top: 40%;
  right: 25%;
}

.shape:nth-of-type(7) {
  top: 20%;
  right: 50%;
}


/* Hide on desktop */
.bubble-bg {
  display: none;
}

@media screen and (max-width: 600px) {
  /* Hide shape container on small screens */
  .background {
    display: none;
  }

  /* Show animated bubble background */
  .bubble-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    display: block;
  }

  .bubble-bg span {
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: bubbleFloat 20s linear infinite;
    bottom: -150px;
  }

  .bubble-bg span:nth-child(1) {
    left: 10%;
    width: 15px;
    height: 15px;
    animation-duration: 12s;
    background: rgba(183, 156, 217, 0.3);
  }
  .bubble-bg span:nth-child(2) {
    left: 25%;
    width: 25px;
    height: 25px;
    animation-duration: 18s;
    background: rgba(200, 180, 250, 0.3);
  }
  .bubble-bg span:nth-child(3) {
    left: 40%;
    animation-duration: 14s;
    background: rgba(180, 220, 255, 0.3);
  }
  .bubble-bg span:nth-child(4) {
    left: 60%;
    width: 18px;
    height: 18px;
    animation-duration: 16s;
    background: rgba(230, 200, 255, 0.3);
  }
  .bubble-bg span:nth-child(5) {
    left: 80%;
    width: 22px;
    height: 22px;
    animation-duration: 10s;
    background: rgba(240, 215, 255, 0.3);
  }

  @keyframes bubbleFloat {
    0% {
      transform: translateY(0) scale(1);
    }
    100% {
      transform: translateY(-100vh) scale(1.5);
    }
  }
}


@keyframes wave {
  0%,
  100% {
    border-radius: 66% 34% 37% 63% / 57% 31% 69% 43%;
  }

  50% {
    border-radius: 26% 74% 51% 49% / 22% 53% 47% 78%;
  }
}

@media (max-width: 768px) {
  .content {
    flex-direction: column;
  }

  .left,
  .right {
    width: 100%;
    text-align: center;
  }

  .right {
    padding-top: 20px;
    text-align: center;
  }

  .right h2 {
    font-size: 1.5rem;
  }

  .right p {
    font-size: 0.95rem;
  }

  h1 {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .inner {
    padding: 15px;
    min-height: 500px;
  }

  .left img.vector {
    max-width: 350px;
    margin-bottom: -45px;
  }
}

.music-player {
  width: 100%;
  max-width: 320px; /* ✅ ADDED */
  margin: 0 auto;   /* ✅ ADDED */
  background: linear-gradient(145deg, #f6d8f0, #d8c7ff);
  border-radius: 24px;
  padding: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.title-bar {
  background: rgba(255, 255, 255, 0.6);
  padding: 8px 16px;
  text-align: center;
  font-weight: bold;
  color: #6d4c8d;
  border-radius: 20px;
  font-size: 14px;
}

.image-box2 {
  width: 100%;
  height: 180px;
  border-radius: 20px;
  border: 2px solid #d4b6f0;
  overflow: hidden;
}

.image-box2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.controls {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: -5px;
  align-items: center;
}

.progress-bar input[type="range"] {
  width: 100%;
  appearance: none;
  height: 6px;
  background: #fff;
  border-radius: 4px;
  outline: none;
}

.progress-bar input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  height: 12px;
  width: 12px;
  background: #c85ae3;
  border-radius: 50%;
  cursor: pointer;
}

.button-row {
  display: flex;
  justify-content: center; /* ✅ Changed from space-between */
  align-items: center;
  width: 100%;
  gap: 12px;               /* ✅ Reduced space between buttons */
}


.btn {
  background: #fff;
  color: #b256c1;
  padding: 10px 14px;
  border: none;
  border-radius: 16px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  font-size: 16px;
  transition: transform 0.2s ease;
}

.btn:hover {
  transform: scale(1.1);
}

.hearts {
  display: flex;
  gap: 6px;
}

.heart {
  color: #f3a1bf;
  font-size: 18px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.heart:hover {
  transform: scale(1.2);
  color: #ff64a6;
}

audio {
  display: none;
}



    
    .ff-big-container {
      background: linear-gradient(135deg, #ffdde1, #e0f7fa);
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      position: relative;
      width: 100%;
    }

    .ff-container {
      display: flex;
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(15px);
      border-radius: 25px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      width: 100%;
      max-width: 900px;
      overflow: hidden;
      border: 2px solid rgba(255, 255, 255, 0.4);
      margin:5rem 0 5rem 0;
    }

    .ff-feedback-card {
      flex: 1;
      padding: 40px 30px;
      text-align: center;
      background: rgba(255, 240, 247, 0.6);
      backdrop-filter: blur(10px);
    }

    .ff-feedback-card h2 {
      font-size: 26px;
      color: #ff69b4;
      margin-bottom: 20px;
    }

    .ff-rating {
      display: flex;
      justify-content: center;
      margin: 20px 0;
      font-size: 32px;
    }

    .ff-rating span {
      cursor: pointer;
      margin: 0 8px;
      transition: transform 0.3s ease;
    }

    .ff-rating span:hover {
      transform: scale(1.4);
    }

    .ff-rating span.selected {
      transform: scale(1.6);
    }

    textarea {
      width: 100%;
      border: none;
      border-radius: 15px;
      background: #fff;
      padding: 15px;
      font-size: 16px;
      resize: none;
      box-shadow: inset 0 0 5px rgba(0,0,0,0.05);
      outline: none;
      margin-top: 10px;
    }

    button {
      background: #ffb6c1;
      color: white;
      border: none;
      padding: 12px 25px;
      font-size: 16px;
      border-radius: 50px;
      margin-top: 20px;
      cursor: pointer;
      transition: 0.3s ease;
    }

    button:hover {
      background: #ff69b4;
    }

    .ff-vector {
      flex: 1;
      padding: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      border-left: 2px solid rgba(255, 255, 255, 0.4);
    }

    .ff-vector img {
      width: 100%;
      max-width: 300px;
      border-radius: 20px;
    }

    .ff-popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.7);
      background: #fff0f7;
      border: 3px solid #ffb6c1;
      padding: 30px;
      border-radius: 25px;
      box-shadow: 0 10px 30px rgba(255, 105, 180, 0.3);
      z-index: 9999;
      text-align: center;
      opacity: 0;
      transition: all 0.4s ease;
      pointer-events: none;
    }

    .ff-popup.show {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
      pointer-events: all;
    }

    .ff-popup img {
      width: 60px;
      margin-bottom: 10px;
    }

    .ff-popup h3 {
      color: #ff69b4;
      font-size: 20px;
      font-weight: bold;
    }

    @media (max-width: 768px) {
      .ff-container {
        flex-direction: column;
        width: 95%;
      }

      .ff-feedback-card {
        padding: 25px 20px;
      }

      .ff-vector {
        border-left: none;
        border-top: 2px solid rgba(255, 255, 255, 0.4);
        padding: 10px;
      }

      .ff-vector img {
        max-width: 200px;
      }
    }