/* Gallery Section Styles */
.gallery-section {
    padding: 2rem 0; /* Padding for the section */
    background-color: #f9f9f9; /* Light background color */
}

.gallery-title {
    font-size: 2rem; /* Title font size */
    margin-bottom: 1rem; /* Space below the title */
    text-align: center; /* Center the title */
}

.gallery-description {
    text-align: center; /* Center the description */
    margin-bottom: 2rem; /* Space below the description */
    font-size: 1.1rem; /* Description font size */
    color: #555; /* Description text color */
}

.gallery-grid {
    display: grid; /* Use grid layout */
    grid-template-columns: repeat(4, 1fr); /* 4 columns */
    gap: 1rem; /* Space between items */
}

.gallery-item {
    cursor: pointer; /* Pointer cursor on hover */
}

.gallery-item img {
    width: 100%; /* Full width */
    border-radius: 10px; /* Rounded corners */
}

/* Mobile Navigation Styles */
#mobile-nav {
    background-color: white; /* Background color for mobile menu */
    position: absolute; /* Position it below the header */
    top: 100%; /* Align it below the header */
    left: 0;
    right: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Shadow for the dropdown */
    z-index: 100; /* Ensure it appears above other content */
}

#mobile-nav a {
    padding: 1rem 2rem; /* Padding for mobile links */
    border-bottom: 1px solid #eaeaea; /* Divider between links */
}

#mobile-nav a:last-child {
    border-bottom: none; /* Remove border from last link */
}

/* Modal Styles */
#imageModal {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000; /* Ensure modal is above other content */
}

#modalImage {
    max-width: 90%;
    max-height: 90%;
}

/* Ensure the notice section is scrollable */
#notices {
    max-height: 300px; /* Set a max height for the notice section */
    overflow-y: auto; /* Enable vertical scrolling */
}