.accordion-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    max-width: 800px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 10px; /* Optional: Add padding if needed */
}

/* Styles for accordion buttons */
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 15px;
    border: none;
    border-radius: 4px;
    text-align: left;
    font-size: 15px;
    transition: 0.4s;
    box-sizing: border-box;
    width: calc(95%); /* Slightly smaller than the container */
    margin: 5px; /* Adds space around the button */
}

/* Style changes when a button is clicked or hovered */
.active, .accordion:hover {
    background-color: #ccc; 
}

/* Styles for the panel content */
.panel {
    padding: 5px 5px; /* Match horizontal padding with accordion buttons */
    display: none;
    overflow: hidden;
    text-align: left;
    width: calc(95%); /* Match width with accordion buttons */
    margin: 5px 5px; /* Align margin with accordion buttons */
    box-sizing: border-box;
}

.centered-box {
    width: 60%; /* Adjust the width as needed */
    margin: 0 auto; /* Horizontal centering */
    padding: 10px; /* Padding inside the box */
    text-align: center; /* Center-align the text */
    margin-top: 50px;
    max-width: 600px;

    /* Optional Styles */
    background-color: #f0f0f0; /* Background color of the box */
    border: 1px solid #ccc; /* Border around the box */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Box shadow for a subtle depth effect */

}