/* General styles for sections containers */
.sections-container,
.sections-container-cta {
    display: flex;
    flex-wrap: wrap;
    /* Allow items to wrap to the next line */
    justify-content: space-between;
    padding: 20px;
    gap: 20px;
    height: auto;
    /* Allow height to adjust based on content */
    overflow: auto;
    /* Allows scrolling if content exceeds the container's height */
    box-sizing: border-box;
    /* Ensures padding is included in the height calculation */
}

/* Individual section styles */
.section,
.section-cta {
    flex: 1 1 calc(33.333% - 40px);
    /* Adjust width with margin accounted for */
    padding: 20px;
    background-color: #f4f4f4;
    border-radius: 8px;
    /* Add a minimum width to prevent too small sections */
    min-width: 250px;
}

/* Announcement styles */
.announcements {
    width: 100%;
    /* Make the announcements section responsive */
    max-width: 800px;
    /* Optional: limit the maximum width */
    height: 600px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    background-color: #b6b6b84f;
    overflow: auto;
    text-align: center;
}

.announcements-content {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 10px;
}

.announcement-month h4 {
    font-size: 1.5em;
    font-weight: bold;
    color: #225566;
    margin-top: 20px;
    border-bottom: 2px solid #225566;
    padding-bottom: 5px;
}

.announcement-item h5 {
    font-size: 1.2em;
    font-weight: bold;
    color: #0a0a0a;
    margin-top: 10px;
    text-align: left;
}

.announcement-item p {
    font-size: 1em;
    color: #0a0a0a;
    margin-top: 10px;
    text-align: left;
}

/* Contact Us styles */
.contact-us {
    box-sizing: border-box;
    text-align: center;
    padding: 20px;
    background-color: #b6b6b84f;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    max-width: 600px;
    max-height: 600px;
}

.contact-us h2 {
    font-size: 24px;
    color: #2d302f;
    margin-bottom: 10px;
}

.contact-us p {
    font-size: 16px;
    color: #333333;
}

.contact-us i {
    color: #2d302f;
}

.pricing-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    /* Space between columns */
    flex-wrap: wrap;
    /* Wrap columns on smaller screens */
}

.pricing-column {
    flex: 1 1 45%;
    /* Each column takes up 45% of the row */
    max-width: 500px;
    /* Optional: Limit the max width of each column */
    margin-bottom: 20px;
    /* Space below each column */
}

@media (max-width: 768px) {
    .pricing-column {
        flex: 1 1 100%;
        /* Make each column take up full width on smaller screens */
    }
}