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

    body {
      font-family: 'Roboto', sans-serif;
      background: linear-gradient(180deg, #f8c8d4 0%, #f4b5c4 50%, #f0a2b4 100%);
      min-height: 100vh;
      overflow-x: hidden;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 40px 20px;
    }

    /* Hero Section */
    .hero-section {
      position: relative;
      margin-bottom: 60px;
    }

    .floral-decoration {
      position: absolute;
      top: -20px;
      left: 0;
      width: 300px;
      height: 200px;
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200"><defs><radialGradient id="rose" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="%23ff6b9d"/><stop offset="100%" stop-color="%23ff8fab"/></radialGradient></defs><circle cx="80" cy="80" r="25" fill="url(%23rose)"/><circle cx="150" cy="60" r="30" fill="url(%23rose)"/><circle cx="200" cy="100" r="20" fill="url(%23rose)"/><circle cx="120" cy="120" r="22" fill="url(%23rose)"/></svg>');
      opacity: 0.7;
    }

    .hero-title {
      font-family: 'Great Vibes', cursive;
      text-align: center;
      font-size: 48px;
      color: #8b2635;
      font-style: italic;
      font-weight: 400;
      margin-bottom: 20px;
      text-shadow: 2px 2px 4px rgba(139, 38, 53, 0.1);
    }

    .hero-subtitle {
      text-align: center;
      font-size: 28px;
      color: #8b2635;
      font-style: italic;
      font-weight: 400;
      margin-bottom: 30px;
    }

    .hero-description {
      text-align: center;
      font-size: 18px;
      color: #8b2635;
      font-style: italic;
      line-height: 1.6;
      margin-bottom: 15px;
    }

    .hero-heart {
      text-align: center;
      font-size: 24px;
      color: #d63384;
    }

    .buttons-container {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin: 40px 0;
    }

    .btn {
      padding: 12px 24px;
      border: none;
      border-radius: 25px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .btn-wishes {
      background: white;
      color: #8b2635;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .btn-gallery {
      background: #8b2635;
      color: white;
      box-shadow: 0 4px 12px rgba(139, 38, 53, 0.3);
    }

    .btn:hover {
      transform: scale(1.05) translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    }

    /* Gallery Section */
    .gallery-section {
      margin: 60px 0;
    }

    .section-title {
      text-align: center;
      font-size: 36px;
      color: #8b2635;
      font-style: italic;
      font-weight: 400;
      margin-bottom: 40px;
    }

    .photo-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 40px;
    }

    .photo-item {
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
      transition: transform 0.3s ease;
    }

    .photo-item:hover {
      transform: scale(1.05);
    }

    .photo-item img {
      width: 100%;
      height: auto;        /* keeps natural aspect */
      object-fit: contain; /* ensures full face shows */
      display: block;
    }

    .photo-large {
      grid-column: span 2;
    }

    /* Birthday Wishes Section */
    .wishes-section {
      margin: 60px 0;
    }

    .wishes-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 40px;
    }

    .wish-card {
      background: white;
      border-radius: 20px;
      padding: 25px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
    }

    .wish-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    }

    .wish-text {
      font-size: 14px;
      color: #333;
      line-height: 1.5;
      text-align: justify;
    }

    /* Footer */
    .footer {
      text-align: center;
      margin-top: 60px;
      padding: 30px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 20px;
    }

    .footer-message {
      font-size: 32px;
      color: #8b2635;
      font-style: italic;
      font-weight: 400;
      line-height: 1.4;
    }

    .signature {
      font-size: 28px;
      color: #8b2635;
      font-style: italic;
      margin-top: 20px;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
      .container {
        padding: 20px 15px;
      }

      .hero-title {
        font-size: 36px;
      }

      .hero-subtitle {
        font-size: 24px;
      }

      .photo-grid {
        grid-template-columns: 1fr;
      }

      .photo-large {
        grid-column: span 1;
      }

      .wishes-grid {
        grid-template-columns: 1fr;
      }

      .buttons-container {
        flex-direction: column;
        align-items: center;
      }

      .footer-message {
        font-size: 24px;
      }

      .signature {
        font-size: 22px;
      }

      .floral-decoration {
        width: 180px;
        height: 120px;
        top: -10px;
      }
    }

    /* Decorative elements */
    .floral-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: -1;
      opacity: 0.1;
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="5" fill="%23ff6b9d"/><circle cx="80" cy="30" r="7" fill="%23ff8fab"/><circle cx="60" cy="70" r="6" fill="%23ff6b9d"/><circle cx="30" cy="80" r="4" fill="%23ff8fab"/></svg>');
    }