body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #fcfcf5;
}

/* Styling for the interactive sections */
.interactive-section {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 50px;
    background-color: rgba(245, 245, 220, .97); /* Same as banner with slight opacity */
    margin: 10px 0;
    color: #2c3691;
    text-align: center;
    box-sizing: border-box;
}

.interactive-section-dev-proc{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-self: center;
        padding: 50px;
        
        margin: 0 auto; /* Centers the section horizontally */
        background-color: rgba(245, 245, 220, .97);
        color: #2c3691;
        text-align: center;
        box-sizing: border-box;    
}

/* Style for the left column (interactive feature) */
.interactive-feature {

    /* margin: 20px; Adds spacing between the two columns */


    padding: 20px;
    color: #2c3691;
    /* background-color: #c1f5fc;  */
}

.interactive-feature-dev-proc {

    /* margin: 20px; Adds spacing between the two columns */

    max-width: none;
    padding: 20px;
    color: #2c3691;
    /* background-color: #c1f5fc;  */
}

.interactive-feature p {
    color: #2c3691;
}

/* Style for the right column (text) */
.interactive-text {
    /*flex: 1;  Takes up the other half of the width */
    padding: 20px;
    color: #2c3691;
    background-color: #F5C98C; /* Optional background color for the text */
    border-radius: 10px;
    border: 4px solid #978fa0;
}