.c27-donation {
    margin: 0 auto!important;
  }
  
  .c27-donation .wpforms-submit-container{
    margin: 0 auto!important;
  }

  /* Base styles for all fieldsets using c27-donate-btn */
  .c27-donate-btn ul {
    display: flex !important;
    flex-wrap: wrap !important; /* Allow items to wrap onto new rows */
    justify-content: space-between !important; /* Distribute items evenly */
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    gap: 0 !important; /* Remove any extra gaps */
  }
  
  /* Default styling for items (fallback) */
  .c27-donate-btn ul li {
    flex: 1 1 calc(100% / 4 - 1px) !important; /* Default for 4 items per row */
    text-align: center !important;
    box-sizing: border-box !important; /* Include borders and padding in size */
    margin: 0 !important; /* Remove spacing between items */
    padding: 0 !important; /* Remove extra padding */
  }
  
  /* Specific styles for 3-column layout (.c27-3col) */
  .c27-donate-btn.c27-3col ul li {
    flex: 1 1 calc(100% / 3 - 1px) !important; /* Divide into 3 columns */
  }
  
  /* Specific styles for 4-column layout (.c27-4col) */
  .c27-donate-btn.c27-4col ul li {
    flex: 1 1 calc(100% / 4 - 1px) !important; /* Divide into 4 columns */
  }
  
  /* Specific styles for 5-column layout (.c27-5col) */
  .c27-donate-btn.c27-5col ul li {
    flex: 1 1 calc(100% / 5 - 1px) !important; /* Divide into 5 columns */
  }
  
  /* Specific styles for 6-column layout (.c27-6col) */
  .c27-donate-btn.c27-6col ul li {
    flex: 1 1 calc(100% / 6 - 1px) !important; /* Divide into 6 columns */
  }
  
  /* Adjustments for .c27-last-child */
  .c27-donate-btn.c27-last-child ul li:last-child {
    flex: 0 1 calc(50% - 1px) !important; /* Last item takes 40% width */
    margin: 10px auto 0 auto !important; /* Center the last item horizontally */
    order: 1 !important; /* Push the last item to the next row */
    text-align: center !important;
  }
  
  /* Radius and border for the last item */
  .c27-donate-btn.c27-last-child ul li:last-child label {
    border-top-left-radius: 13px !important; /* Top-left corner radius */
    border-bottom-left-radius: 13px !important; /* Bottom-left corner radius */
    border-top-right-radius: 13px !important; /* Top-right corner radius */
    border-bottom-right-radius: 13px !important; /* Bottom-right corner radius */
    border-left: 1px solid #ccc !important; /* Add left border */
  }
  
  /* Styling for the second-to-last item */
  .c27-donate-btn.c27-last-child ul li:nth-last-child(2) label {
    border-top-right-radius: 13px !important; /* Top-right corner radius */
    border-bottom-right-radius: 13px !important; /* Bottom-right corner radius */
  }
  
  /* Hide radio inputs */
  .c27-donate-btn input[type="radio"] {
    display: none !important;
  }
  
  /* Style the labels as buttons */
  .c27-donate-btn label {
    display: flex !important; /* Use flex to ensure consistent height */
    align-items: center !important; /* Center text vertically */
    justify-content: center !important; /* Center text horizontally */
    padding: 15px 0 !important;
    cursor: pointer !important;
    background-color: white !important;
    border: 1px solid #ccc !important;
    border-left: 0 !important;
    border-radius: 0px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    width: 100% !important; /* Ensure the label fills its parent container */
    box-sizing: border-box !important; /* Include padding and border in size */
  }
  
  /* Hover effect for labels */
  .c27-donate-btn label:hover {
    background-color: #e5e5e5 !important;
  }
  
  /* Selected state */
  .c27-donate-btn input[type="radio"]:checked + label,
  .c27-donate-btn .wpforms-selected label {
    background-color: #1300c1 !important;
    color: white !important;
    border: 1px solid #1300c1 !important;
    border-left: 0 !important;
  }
  /* Border radius for the first list item */
  .c27-donate-btn ul li:first-child label {
    border-top-left-radius: 13px!important;
    border-bottom-left-radius: 13px!important;
    border: 1px solid #ccc !important;
  }
  
  /* Border radius for the last list item */
  .c27-donate-btn ul li:last-child label {
    border-top-right-radius: 13px!important;
    border-bottom-right-radius: 13px!important;
  }

  .c27-donation button[type="submit"].c27-submit {
    position: absolute!important;
    top:-56px;
    right:0;
  }
  
  
  
  
  .c27-amount .wpforms-price {
    display: flex!important;
    font-size: 30px!important;
    font-weight: bold!important;
    color: #1300c1;
    background-color: #fff!important;
    border: 1px solid #ccc !important;
    padding: 10px 10px!important;
  }
  
  
  /* Target the specific input field */
  .c27-amount-field input[type="text"] {
    font-size: 30px !important;
    font-weight: bold !important;
    color: #1300c1 !important; /* Replace #1300c1 with the actual color value */
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    padding: 30px 10px !important;
    width: 100% !important; /* Ensure it stretches to fill the parent container */
    box-sizing: border-box !important; /* Include padding and border in the total width */
    border-radius: 5px !important; /* Optional: Add rounded corners for a polished look */
  }
  .c27-amount .wpforms-payment-total {
    font-size: 30px !important;
    font-weight: bold !important;
    color: #1300c1 !important; /* Replace #1300c1 with the actual color value */
  }
  
  /* Style the surrounding container for better alignment */
  .c27-amount-field {
    margin-bottom: 0 !important; /* Add space below the field */
    padding-bottom: 0 !important;
  }
  .c27-amount {
    margin-bottom: 0 !important; /* Add space below the field */
    padding-bottom: 18px !important;
  }
  
  /* Style the label (if needed, for visibility) */
  .c27-amount-field label {
    font-size: 16px !important;
    color: #333 !important;
    display: block !important;
    margin-bottom: 5px !important;
  }
  /* Style the label (if needed, for visibility) */
  .c27-amount label { 
    font-size: 16px !important;
    color: #333 !important;
    display: block !important;
    margin-bottom: 5px !important;
  }
  
  /* Style the field description */
  .c27-amount-field .wpforms-field-description {
    font-size: 14px !important;
    color: #666 !important;
    margin-top: 5px !important;
  }