body { font-family: 'Hind', sans-serif; font-weight: 500; background-color: #ffffff; margin: 0; display: flex; flex-direction: column; align-items: center; }
h1 { font-weight: 700; color: #fa6117; text-align: center; }
    .container { display: flex; width: 100%; max-width: 1200px; gap: 20px; }
    .top-bottom { width: 100%; max-width: 1200px; gap: 20px; }
    .form-section, .preview-section { flex: 1; background-color: #104059; padding: 10px 20px 10px 20px; border-radius: 8px; }
    .preview-wrapper { background-color: #104059; padding: 20px; border-radius: 8px; }
    .form-section h2 { color: #ff9800; text-align: center; }
    .form-group { margin-bottom: 6px; display: flex; align-items: center; gap: 10px; text-align: left; }
    .form-group input, .form-group select { padding: 5px 10px 5px 10px; border: none; border-radius: 4px; font-family: 'Hind', sans-serif; font-weight: 500; }
    .form-group .label-field { width: 25%; }
    .form-group .input-field { width: 75%; }
    .form-group .btn-add, .form-group .btn-remove { background-color: #ff9800; color: #fff; border: none; padding: 5px 10px; cursor: pointer; border-radius: 4px; font-size: 16px; font-family: 'Hind', sans-serif; font-weight: 500; }
    .form-group .btn-remove { background-color: #a5150b; }
    .update-btn { display: block; margin: 20px auto; padding: 10px 20px; background-color: #2196f3; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-family: 'Hind', sans-serif; font-weight: 500; }
    .image-upload { display: block; margin: 10px 0; text-align: center; }
    .image-upload label { display: inline-block; padding: 10px 20px; background-color: #eeeeee; color: #000000; border-radius: 4px; cursor: pointer; font-family: 'Hind', sans-serif; font-weight: 500; }
    .image-upload input[type="file"] { display: none; }
    .preview-section { background-size: cover; background-position: top; position: relative; overflow: hidden; font-family: 'Hind', sans-serif !important; }
    .ganapati-image-container { position: absolute; top: 25px; left: 25px; width: 100px; height: 100px; z-index: 1; overflow: hidden; }
    .ganapati-image { width: 100%; height: 100%; object-fit: contain; object-position: center; }
    .groom-image-container { position: absolute; top: 185px; right: 20px; width: 180px; height: 250px; z-index: 1; border-radius: 30px; overflow: hidden; }
    .groom-image { width: 100%; height: 100%; object-fit: cover; object-position: center; }
    .preview-content { padding: 2px 20px 20px 20px; color: #000; font-family: 'Hind', sans-serif !important; font-weight: 500; position: relative; z-index: 0; }
    .preview-content h3 { color: #d81b60; margin-bottom: 20px; text-align: center; font-weight: 700; font-family: 'Hind', sans-serif !important; }
    #previewTopText { color: #000000; font-weight: 600; margin-bottom: 20px; text-align: center; font-family: 'Hind', sans-serif !important; margin-block-start: 5px; margin-block-end: 5px;    }
    #previewHeadline1 { font-size: 27px; font-family: 'Hind', sans-serif !important; margin-block-start: 10px; }
    #previewHeadline2 { font-size: 27px; font-family: 'Hind', sans-serif !important; }
    #parichaypatrika { font-size: 30px; font-family: 'Hind', sans-serif !important; margin-block-start: 5px; margin-block-end: 5px; }
    .preview-content .preview-row { display: flex; margin: 5px 0; font-size: 17px; text-align: left; font-family: 'Hind', sans-serif !important; }
    .preview-row .label-part { width: 25%; font-weight: 600; font-family: 'Hind', sans-serif !important; }
    .preview-row .value-part { width: 75%; font-family: 'Hind', sans-serif !important; }
    .preview-wrapper { flex: 1; display: flex; flex-direction: column; align-items: stretch; }
    .button-row { display: flex; justify-content: space-between; margin-top: 20px; width: 100%; }
    .button-row button { padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-family: 'Hind', sans-serif; font-weight: 500; }
    .button-row .download-btn { background-color: #2196f3; color: #fff; }
    .button-row .payment-btn { background-color: #ff9800; color: #fff; }
    .button-column { display: flex; flex-direction: column; align-items: center; }
    #previewText { padding-top: 1px; font-family: 'Hind', sans-serif !important; }
    /* Popup Styles */
    .popup-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);
      z-index: 1000; justify-content: center; align-items: center; }
    .popup-content { background-color: #fff; padding: 20px; border-radius: 8px; text-align: center; max-width: 400px; width: 90%; position: relative;
    }
    .popup-content h3 { color: #ff9800; margin-bottom: 15px; font-family: 'Hind', sans-serif; font-weight: 600; }
    .popup-content img { max-width: 200px; width: 100%; margin: 10px 0; }
    .popup-content p { color: #000; margin: 10px 0; font-family: 'Hind', sans-serif; font-weight: 500; }
    .popup-content .close-btn { position: absolute; top: 10px; right: 10px; background-color: #f44336; color: #fff; border: none; padding: 5px 10px;
      cursor: pointer; border-radius: 4px; font-family: 'Hind', sans-serif; font-weight: 500; }
    /* Mobile Styles */
    @media (max-width: 767px)
      { body { padding: 10px; }
      h1 { font-size: 35px; margin-bottom: 10px; }
      .container { flex-direction: column; gap: 15px; }
      .form-section, .preview-section { padding: 10px; }
      .preview-wrapper { padding: 20px 5px;}
      .form-section h2 { font-size: 18px; }
      .form-group { flex-wrap: wrap; gap: 8px; }
      .form-group input, .form-group select { padding: 8px; font-size: 14px; }
      .form-group .label-field { width: 30%; min-width: 80px; }
      .form-group .input-field { flex: 1; min-width: 120px; }
      .form-group .btn-add, .form-group .btn-remove { padding: 8px 12px; font-size: 14px; }
      .update-btn { width: 100%; max-width: 200px; padding: 10px; font-size: 14px; }
      .image-upload label { padding: 8px 16px; font-size: 14px; }
      .preview-section { min-height: 400px; }
      .ganapati-image-container { top: 15px; left: 15px; width: 80px; height: 80px; }
      .groom-image-container { top: 150px; right: 10px; width: 120px; height: 160px; border-radius: 15px; }
      .preview-content { padding: 10px; }
      .preview-content h3 { font-size: 18px; margin-bottom: 10px; }
      #previewTopText { font-size: 16px; margin-bottom: 10px; }
      #parichaypatrika { font-size: 20px; }
      #previewHeadline1, #previewHeadline2 { font-size: 18px; }
      .preview-content .preview-row { font-size: 14px; }
      .preview-row .label-part { width: 30%; }
      .preview-row .value-part { width: 70%; }
      .button-row { flex-direction: column; gap: 10px; align-items: center; }
      .button-row button { width: 100%; max-width: 200px; padding: 10px; font-size: 14px; }
      /* Popup Mobile Styles */
      .popup-content { width: 80%; padding: 15px; }
      .popup-content h3 { font-size: 18px; }
      .popup-content img { max-width: 150px; }
      .popup-content p { font-size: 14px; }
      .popup-content .close-btn { padding: 4px 8px; font-size: 14px; }
    }