.containerGallery {
    min-height: 100vh;
    width: 100%;
    align-items: center;
}

.containerGallery h1 {
    font-size: 2.5rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 20px;
}

.years {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5%;
    padding-top: 50px;
}

.years select{
    width: 150px;
    text-align: center;
}

.Ttwo, .Tthree{
    display: none;
    flex-wrap: nowrap;
}

#anniversaries3, #anniversaries, #anniversaries2{
    padding-top: 20px;
}

.section {
    padding: 50px 0 0;
    text-align: center;
    position: relative;
}

.containermenu {
    margin: 10px auto 10vh auto;
    width: 90%;
}

.home-visit,
.monthly-meeting,
.techvoc,
.bogo,
.carcar,
.cebu,
.dumaguete,
.lapulapu,
.liloan,
.moalboal,
.ormoc,
.tacloban,
.toledo,
.may, .july,
.carcar23, .cebu23, .iloilo, .kabankalan, .kalibo, .mandaue, .matabas, .toledo23, .tubigon,
.bogo2, .dumaguete2, .lapulapu2{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Adjusted for 5 images per row */
    gap: 30px 20px;
}

.cabadiangan,
.carcar2,
.ormoc2,
.tacloban2,
.may, .july,
.lnhs, .techvoc3{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px 20px;
}

.gallery-item {
    overflow: hidden;
    height: 250px; /* Fixed height for each gallery item */
    border-radius: 10px;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%; /* Ensure images fill the grid item */
    object-fit: cover; 
    transition: all 0.3s ease-in;
}

.gallery-item.show::before {
    content: '';
    display: block;
    position: fixed;
    z-index: 555; /* Ensure this has higher z-index than navbar */
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
}

.gallery-item.show img {
    position: fixed;
    top: 0;
    left: 0;
    margin: 20px;
    align-self: center;
    object-fit: contain;
    z-index: 666; /* Ensure this has higher z-index than navbar */
    width: calc(100% - 50px);
    height: calc(100% - 50px);
    filter: drop-shadow(0 3px 15px black);
    cursor: url(close-button.png), grab;
}


.home-visit,
.monthly-meeting, .may, .july{
    display: none;
    flex-wrap: nowrap;
}

.bogo, .carcar, .cebu, .dumaguete, .lapulapu, .liloan,
.moalboal, .ormoc, .tacloban, .toledo,
.cebu23, .iloilo, .kabankalan, .kalibo, .mandaue, .matabas, .toledo23, .tubigon {
    display: none;
    flex-wrap: nowrap;
}

.cabadiangan, .carcar2, .ormoc2, .tacloban2, .dumaguete2, .lapulapu2{
        display: none;
    flex-wrap: nowrap;
}

.gallery-item:not(.show):hover img {
    transform: scale(1.3);
    opacity: 0.8;
}

.active .gallery-item:not(.show) img {
    filter: blur(3px);
}

.exit-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: none;
    border: none;
    border-radius: 50%;
    background: #EEEDEB;
    padding: 7px 16px;
    font-size: 1.5rem;
    font-weight: bolder;
}

.show-more-btn{
    background: none;
    border: none;
    outline: none;
    font-size: 1.6rem;
    transition: all 0.3s ease-in;
}

.show-more-btn:hover{
    transform: scale(1.1);
    font-weight: bolder;
}

.next-section-btn {
    position: relative;
    display: inline-block;
    background: rgba(76, 175, 80, 0.2); /* Faint green background */
    border: none;
    cursor: pointer;
    outline: none;
    border-radius: 10px;
    height: 60px;
    justify-content: center;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: rgba(76, 175, 80, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

.next-section-btn i {
    font-size: 4rem; /* Icon size */
    animation: shake 0.5s infinite; /* Shake animation */
    border: none;
    text-align: center;
}

@keyframes shake {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-5deg);
    }
    75% {
        transform: rotate(5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.next-section-btn:hover {
    background-color: #3E7C17; /* Darker background on hover */
    color: #fff;
    transform: scale(1.1);
}


/* Modal container */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    align-items: center;
    justify-content: center;
    overflow: hidden; 
    background-color: rgba(0,0,0,0.8); 
    padding-top: 30px;
}

/* Modal image */
.modal-content {
    height: 90vh;
    margin: auto;
    display: block;
    width: auto;
}

/* Close button */
.close {
    position: absolute;
    top: 15px;
    right: 15px; /* Adjusted to fit better on smaller screens */
    color: #fff;
    font-size: 36px; /* Slightly smaller for better fit on mobile */
    font-weight: bold;
    cursor: pointer;
}

/* Close button hover effect */
.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    outline: none;
}

/* Additional responsive design rules */
@media (max-width: 992px) {
    .modal{
        padding-top: 150px;  
    }
    .modal-content {
        height: auto;
        margin: auto;
        display: block;
        width: auto;
    }
    .close {
        top: 20px; /* Reduce top spacing for smaller screens */
        right: 20px; /* Reduce right spacing for smaller screens */
        font-size: 30px; /* Smaller font size for better fit */
    }
}

@media (max-width: 480px) {
    .modal{
        padding-top: 200px;  
    }
    /* Further adjustments for very small screens */
    .modal-content {
        height: auto;
        margin: auto;
        width: 90%;
    }

    .close {
        top: 10px; /* Reduce top spacing for very small screens */
        right: 10px; /* Reduce right spacing for very small screens */
        font-size: 28px; /* Further smaller font size */
    }
}


@media (max-width: 768px) {
    .section {
        padding: 0 20px; /* Adjusted padding with left and right margin */
    }

    .containerGallery{
        margin-top: 7%;
        padding: 90px 0;
    }

    .containerGallery h1 {
        font-size: 1.5rem; 
        margin-top: 20px;
    }

    .containermenu {
        width: calc(100% - 30px); /* Adjusted width with left and right margin */
        margin: 5px 20px 5vh; /* Adjusted margin */
    }

    .gallery-item {
        height: auto; 
    }

    .next-section-btn {
        bottom: 20px;
        right: 10px;
        height: 50px;
        width: 50px;
    }
    .next-section-btn i{
        font-size: 1.3rem;
    }
    .show-more-btn{
        font-size: 1.5rem;
    }
}