/* --- Utility Classes --- */

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1rem; /* Padding for smaller screens */
}

.section-padding {
    padding: 4rem 0;
}

.bg-light { /* Uses inverted theme colors for a 'light' effect */
    background-color: #2A4F4F; /* Secondary Background */
    color: #FFFFFF; /* Heading Text Color for contrast on secondary background */
}

.text-center {
    text-align: center;
}

.img-responsive {
    max-width: 100%;
    height: auto;
}

.rounded {
    border-radius: 8px;
}

.shadow {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.shadow-sm {
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}

.section-title {
    text-align: center;
    margin-bottom: 2.5rem;
    font-weight: 700;
}

.section-footer {
    margin-top: 2rem;
}

/* Utility class to make an item span the full width of a grid */
.grid-full-width-item {
    grid-column: 1 / -1; /* Span all columns */
    /* text-align: center; is often used with this, applied separately */
    margin-top: 1rem; /* Optional: Add some spacing */
    margin-bottom: 1rem; /* Optional: Add some spacing */
}

/* Utility class to hide elements */
.hidden {
    display: none !important; /* Use !important to ensure it overrides other display properties if necessary */
}