
         body {
         font-family: sans-serif;
         line-height: 1.6;
         margin: 20px;
         background-color: #fffacd;
         color: #333;
         }
         h1,
         h2,
         h3 {
         color: #800000;
         /* Maroon */
         text-align: center;
         background-color: #fffacd;
         }
         .event-details {
         margin-top: 20px;
         }
         .detail-item {
         margin-bottom: 15px;
         }
         .detail-label {
         font-weight: bold;
         color: #555;
         }
         .speaker {
         margin-top: 30px;
         background-color: #fffacd;
         text-align: center; /* Added for consistent centering */
         }
         .contact-info {
         margin-top: 30px;
         text-align: center;
         }
         .contact-info a {
         color: #007bff; /* Improved link color */
         text-decoration: none;
         }
         .contact-info a:hover {
         text-decoration: underline;
         }
         .important-note {
         margin-top: 30px;
         padding: 15px;
         background-color: #f8f9fa; /* Lighter background for emphasis */
         border: 1px solid #ddd;
         border-radius: 4px;
         color: #777;
         }
         /* Styles for better readability of speaker info */
         .speaker > div {
         margin-bottom: 10px;
         font-size: 0.9rem;
         color: #444;
         }
         .speaker > h3 {
         margin-bottom: 15px;
         }
         /* {
         box-sizing: border-box;
         }*/
         .row {
         display: flex;
         }
         /* Create three equal columns that sits next to each other */
         .column {
         flex: 33.33%;
         padding: 5px;
         }
         @media  screen and (min-width: 992px) {
         .tab-container {
         width: 800px; /* Adjust as needed */
         margin: 20px auto;
         border: 1px solid #ccc;
         border-radius: 8px; /* Optional: Add rounded corners to the main container */
         overflow: hidden; /* To contain rounded corners of buttons */
         }
         }
         .tab-container {
         width: 100%; /* Adjust as needed */
         margin: 20px auto;
         border: 1px solid #ccc;
         border-radius: 8px; /* Optional: Add rounded corners to the main container */
         overflow: auto; /* To contain rounded corners of buttons */ 
         }
         .tab-buttons {
         background-color: #fffacd;
         overflow: auto;
         border-bottom: 1px solid #ccc; /* Add a separator line */
         }
         .tab-button {
         background-color: inherit;
         float: left;
         border: none;
         outline: none;
         cursor: pointer;
         padding: 14px 16px;
         transition: 0.3s;
         border-top-left-radius: 8px; /* Rounded top-left corner */
         border-top-right-radius: 8px; /* Rounded top-right corner */
         margin-bottom: -1px; /* To overlap the bottom border of the buttons with the tab content top border */
         }
         .tab-button:hover {
         background-color: #ddd;
         }
         .tab-button.active {
         background-color: #ffc651;
         border-bottom: 1px solid #ccc; /* Keep the bottom border visible for the active tab */
         }
         .tab-content {
         display: none;
         padding: 10px;
         border-top: 1px solid #ccc;
         }
         .tab-content.active {
         display: block;
         }
         #food_amount_label,
         #food_contribution_amount {
         margin-top: 10px;
         }
         #food_amount_label,
         #food_contribution_amount {
         margin-top: 10px;
         }
         .rounded-button {
         padding: 10px 20px;
         border-radius: 25px;
         border: none;
         background-color: #4CAF50;
         color: white;
         cursor: pointer;
         }
         .section-images {
         margin: 0;
         }
         .section-images {
         text-align: center;
         }
         img {
         display: block;
         width: auto;
         height: auto;
         max-width: 70%;
         max-height: 70%;
         margin: 5px auto;
         }
         .center {
         margin-left: auto;
         margin-right: auto;
         }
         .dropdown-checklist {
         position: relative;
         }
         .dropdown-toggle {
         width: 100%;
         padding: 0.5rem 1rem;
         border: 1px solid #ccc;
         background-color: #f9f9f9;
         text-align: left;
         cursor: pointer;
         }
         .dropdown-menu {
         position: absolute;
         top: 100%;
         left: 0;
         z-index: 1000;
         display: none;
         min-width: 100%;
         padding: 0.5rem 0;
         margin: 0.125rem 0 0;
         font-size: 1rem;
         color: #212529;
         text-align: left;
         list-style: none;
         background-color: #fff;
         border: 1px solid rgba(0, 0, 0, 0.15);
         box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
         }
         .dropdown-item {
         display: block;
         width: 100%;
         padding: 0.25rem 1.5rem;
         clear: both;
         font-weight: 400;
         color: #212529;
         text-align: inherit;
         white-space: nowrap;
         background-color: transparent;
         border: 0;
         cursor: pointer;
         }
         .dropdown-item:hover,
         .dropdown-item:focus {
         color: #1e2125;
         background-color: #e9ecef;
         }
         .dropdown-item input[type="checkbox"] {
         margin-right: 0.5rem;
         }
         .dropdown-checklist.show .dropdown-menu {
         display: block;
         }
         .rsvp-content {
         width: 100%; /* Adjust as needed */
         margin: 20px auto;
         border: 1px solid #ccc;
         border-radius: 8px; /* Optional: Add rounded corners to the main container */
         overflow: auto; /* To contain rounded corners of buttons */
         }
         #submitBtn {
         padding: 10px 20px; /* Adjust padding for desired size */
         border: none;
         background-color: #007bff; /* Example background color */
         color: white;
         cursor: pointer;
         border-radius: 15px; /* Adjust this value for more or less rounded corners */
        }
        #submitBtn:disabled {
        background-color: gray; /* Background when disabled */
        cursor: not-allowed; /* Indicate it's not clickable */
        }
 