.monthly-galleries {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.folder-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin-bottom: 20px;
}

.folder {
  text-align: center;
  flex: 1;
  margin: 0 10px;
}

.folder-icon {
  max-width: 100px;
  cursor: pointer;
}

.folder-name {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
}

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


/* Center the entire vertical navigation menu */
.site-navigation .menu {
    display: flex;
    flex-direction: column; /* Ensure the menu items stack vertically */
    align-items: center; /* Center all menu items horizontally */
    padding-left: 0; /* Remove default padding */
    padding-right: 0; /* Remove default padding */
}

/* Center each menu item */
.site-navigation .menu > li {
    width: 100%; /* Make each menu item take up the full width */
    text-align: center; /* Center text within each menu item */
    margin-bottom: 10px; /* Add space between menu items */
}

/* Prevent "Testimonials" from wrapping */
.site-navigation .menu > li a {
    white-space: nowrap; /* Prevent text from wrapping */
}

/* Remove extra margin from the last menu item */
.site-navigation .menu > li:last-child {
    margin-bottom: 0;
}



#menu-item-221 {
    margin-left: -25px; /* Adjust the value to move the item left */
}


/* THIS IS WHERE THE first TESTIMONIAL PAGE STARTS */


/* First Grid and Testimonial */
.image-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns for the first grid */
    grid-gap: 20px;
    text-align: center;
    margin-bottom: 15px; /* Space between grid and testimonial */
}

.grid-item img {
    width: 188px;
    height: 244px;
    object-fit: cover;
    border-radius: 8px;
}

.year {
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
}

.testimonial {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.testimonial .author {
    margin-top: 15px;
    font-size: 16px;
    font-weight: bold;
    text-align: right;
    color: #555;
}

/* Mobile Optimization for First Grid */
@media (max-width: 768px) {
    .image-grid {
        grid-template-columns: 1fr; /* Stack items vertically on mobile */
        grid-gap: 20px;
    }

    .grid-item img {
        width: 100%; /* Responsive image */
        max-width: 188px; /* Prevent image from exceeding original size */
        height: auto; /* Maintain aspect ratio */
    }
}


/* Second Grid and Testimonial */
/* Second Grid and Testimonial */
.second-grid {
    display: grid;
    grid-template-columns: repeat(2, auto); /* Use auto to fit content */
    justify-content: center; /* Center the grid within the container */
    grid-gap: 5px; /* Very small gap between images */
    margin-top: 40px; /* Space between the first grid and the second grid */
    text-align: center;
    margin-bottom: 15px; /* Space between grid and testimonial */
}

.second-grid .grid-item {
    width: auto; /* Automatically size based on content */
    max-width: 188px; /* Set max width to match image size */
    height: auto;
}

.second-grid .grid-item img {
    width: 188px;
    height: 244px;
    object-fit: cover;
    border-radius: 8px;
}

.second-grid .year {
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
}

.second-testimonial {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.second-testimonial .author {
    margin-top: 15px;
    font-size: 16px;
    font-weight: bold;
    text-align: right;
    color: #555;
}

/* Mobile Optimization for Second Grid */
/* Mobile Optimization for Second Grid */
@media (max-width: 768px) {
    .second-grid {
        grid-template-columns: 1fr; /* Stack items vertically on mobile */
        grid-gap: 10px; /* Adjust gap for mobile */
        justify-items: center; /* Center items horizontally */
    }

    .second-grid .grid-item img {
        width: 100%; /* Responsive image */
        max-width: 188px; /* Prevent image from exceeding original size */
        height: auto; /* Maintain aspect ratio */
    }
}


/* Third Grid and Testimonial */
.third-grid {
    display: grid;
    grid-template-columns: repeat(2, auto); /* 2 columns for the third grid */
    justify-content: center; /* Center the grid within the container */
    grid-gap: 5px; /* Small gap between images */
    margin-top: 40px; /* Space between the second grid and the third grid */
    text-align: center;
    margin-bottom: 15px; /* Space between grid and testimonial */
}

.third-grid .grid-item {
    width: auto; /* Automatically size based on content */
    max-width: 188px; /* Set max width to match image size */
    height: auto;
}

.third-grid .grid-item img {
    width: 188px;
    height: 244px;
    object-fit: cover;
    border-radius: 8px;
}

.third-grid .year {
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
}

.third-testimonial {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.third-testimonial .author {
    margin-top: 15px;
    font-size: 16px;
    font-weight: bold;
    text-align: right;
    color: #555;
}

/* Mobile Optimization for Third Grid */
@media (max-width: 768px) {
    .third-grid {
        grid-template-columns: 1fr; /* Stack items vertically on mobile */
        grid-gap: 10px; /* Adjust gap for mobile */
        justify-items: center; /* Center items horizontally */
    }

    .third-grid .grid-item img {
        width: 100%; /* Responsive image */
        max-width: 188px; /* Prevent image from exceeding original size */
        height: auto; /* Maintain aspect ratio */
    }
}


/* Single Image Testimonial */
.single-image-grid {
    display: flex;
    justify-content: center; /* Center the single image */
    margin-top: 40px; /* Space above the grid */
    text-align: center;
    margin-bottom: 15px; /* Space between grid and testimonial */
}

.single-image-grid .grid-item {
    width: auto;
    max-width: 400px; /* Max width to keep the image reasonable in size */
    height: auto;
}

.single-image-grid .grid-item img {
    width: 100%; /* Ensure the image is responsive */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Optional: Add border-radius for a softer look */
}

.single-image-grid .year {
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
}

.single-image-testimonial {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.single-image-testimonial .author {
    margin-top: 15px;
    font-size: 16px;
    font-weight: bold;
    text-align: right;
    color: #555;
}

/* Mobile Optimization for Single Image */
@media (max-width: 768px) {
    .single-image-grid .grid-item img {
        width: 100%; /* Ensure the image stays responsive on mobile */
        max-width: 300px; /* Adjust max-width for smaller screens */
        height: auto;
    }
}


/* Fourth Testimonial */
.fourth-grid {
    display: flex;
    justify-content: center; /* Center the single image */
    margin-top: 40px; /* Space above the grid */
    text-align: center;
    margin-bottom: 15px; /* Space between grid and testimonial */
}

.fourth-grid .grid-item {
    width: auto;
    max-width: 400px; /* Max width to keep the image reasonable in size */
    height: auto;
}

.fourth-grid .grid-item img {
    width: 100%; /* Ensure the image is responsive */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Optional: Add border-radius for a softer look */
}

.fourth-grid .year {
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
}

.fourth-testimonial {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.fourth-testimonial .author {
    margin-top: 15px;
    font-size: 16px;
    font-weight: bold;
    text-align: right;
    color: #555;
}

/* Mobile Optimization for Fourth Testimonial */
@media (max-width: 768px) {
    .fourth-grid .grid-item img {
        width: 100%; /* Ensure the image stays responsive on mobile */
        max-width: 300px; /* Adjust max-width for smaller screens */
        height: auto;
    }
}
