body {

    display: flex;

    flex-direction: column;

}



header {

    width: 100%;

    background: url("header.jpg") no-repeat top center/cover;

    background-color: #f2f2f2;

    padding: 20px 0;

    height: 250px;

    vertical-align: 50%;

}



.h1 {

    font-family: arial;

    font-size: 24px;

}



.top-banner {

    text-align: center;

    justify-content: center;

    max-width: 100%;

    display: block;

    margin: 0 auto;

}



.top-banner-image {

    width: 100%;

    height: auto;

}



.page-title {

    font-family: arial;

    font-size: 24px;

    margin: 10px 0;

    text-align: center;

    justify-content: center;

}



.sub-title {

    font-family: arial;

    font-size: 16px;

    margin: 10px 0;

    text-align: center;

    justify-content: center;

}



.container {

    max-width: 1920px;

    margin: 0 auto;

    padding: 10px;

    font-size: 12px;

    font-family: arial;

}



/* Navigation */

.navigation {

    display: flex;

    justify-content: space-around;

    background-color: #ddd;

    padding: 10px 0;

    position: sticky;

}



.navigation a {

    color: black;

    text-decoration: none;

    margin-right: 20px;

}



.navigation a:last-child {

    margin-right: 0;

}



/* Dropdown Navigation */

.dropdown {

    position: relative;

    display: inline-block;

}



.dropdown-content {

    display: none;

    position: absolute;

    background-color: #f9f9f9;

    min-width: 160px;

    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

    z-index: 1;

}



.dropdown-content a {

    color: black;

    padding: 12px 16px;

    text-decoration: none;

    display: block;

}



.dropdown:hover .dropdown-content {

    display: block;

}



.main-content {

    display: flex;

}



/* Side Navigation */

.side-navigation {

    width: 200px;

    padding: 20px;

    background-color: #ddd;

    overflow: auto;

    position: sticky;

    top: 0;

    height: 100vh;

}



.side-navigation a {

    display: block;

    color: black;

    text-decoration: none;

    margin-bottom: 20px;

    padding: 5px;

}



.side-navigation a:hover {

    background-color: #ddd;

}



.gallery-container {

    flex-grow: 1;

    width: 80%;

    margin: 20px 0;

}



.pagination {

    text-align: center;

    margin-top: 20px;

}



.pagination-button {

    display: inline-block;

    padding: 5px 10px;

    background-color: lightgray;

    color: black;

    text-decoration: none;

    margin-right: 5px;

}



.pagination-button:hover {

    background-color: gray;

}



.current-page {

    display: inline-block;

    padding: 5px 10px;

    background-color: gray;

    color: white;

    text-decoration: none;

    margin-right: 5px;

}



.centered-button {

    text-align: center;

    margin-top: 20px;

}



.button {

    padding: 10px 20px;

    background-color: blue;

    color: white;

    text-decoration: none;

}



.banner468-item {

    width: 468px;

    height: 80px;

    text-align: center;

    background-color: lightgray;

    margin: 20px auto;

    padding: 20px;

}



.banner728-item {

    width: 100%;

    height: 90px;

    text-align: center;

    background-color: #f2f2f2; /* Set the background color as needed */

    margin: 20px 0; /* Adjust the margin as needed */

    position: relative;

    z-index: 1; /* Ensure the banner appears above other elements */

}



.banner300-item {

    width: 300;

    height: 250px;

    text-align: center;

    background-color: #f2f2f2; /* Set the background color as needed */

    margin: 20px 0; /* Adjust the margin as needed */

    position: relative;

    z-index: 1; /* Ensure the banner appears above other elements */

}







.hamburger {

    display: none;

    flex-direction: column;

    justify-content: space-around;

    width: 2rem;

    height: 2rem;

    cursor: pointer;

}



.hamburger div {

    width: 2rem;

    height: 0.25rem;

    background-color: #333;

}



@media (max-width: 768px) {

    .navigation {

        position: absolute;

        height: 100vh;

        top: 0;

        right: 0;

        background: #ccc;

        width: 100%;

        transform: translateX(100%);

        transition: transform 0.3s ease-in-out;

    }



    .hamburger {

        display: flex;

    }



    .showNav {

        transform: translateX(0%);

    }

}



/* Simple Grid Layout */

.grid-item {

    width: 100%;

    margin-bottom: 20px;

}



.grid-sub-item {

    padding: 2px;

    font-size: 12px;

    font-family: arial;

    color: black;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    width: 100%;

}







.grid-item img {

    width: 100%;

    height: auto;

    display: block;

  border-radius: 12px;

  border: 1px solid #dedede;



}



/* Responsive */

@media (max-width: 768px) {

    .grid {

        column-count: 1;

    }



    .grid150 {

        column-count: 2;

    }

}



@media (min-width: 769px) and (max-width: 1024px) {

    .grid {

        column-count: 2;

        column-gap: 10px;

        max-width: 1024px;

        margin: 0 auto;

        padding: 10px;

    }



    .grid150 {

        column-count: 4;

        column-gap: 10px;

        max-width: 1024px;

        margin: 0 auto;

        padding: 10px;

    }

}



@media (min-width: 1025px) {

    .grid {

        column-count: 4;

        column-gap: 10px;

        max-width: 1024px;

        margin: 0 auto;

        padding: 10px;

    }



    .grid150 {

        column-count: 8;

        column-gap: 10px;

        max-width: 1200px;

        margin: 0 auto;

        padding: 10px;

    }

}



/* PIC.php styles ---- */

.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 20px;

}



.image-details {

    text-align: center;

}



.centered-image {

    display: flex;

    justify-content: center;

}



.centered-image img {

    max-width: 100%;

    height: auto;

    background-color: white;

    padding: 20px;

}



/* Footer */

footer {

    background-color: #f2f2f2;

    padding: 20px 0;

    text-align: center;

}



.footer-container {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: flex-start;

    max-width: 1200px;

    margin: 0 auto;

}



.column {

    flex-basis: