.notification-and-updates{
    width: 100%;
    /* height: 350px; */
}

.gallery-grid {
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
    /* gap: 20px;
    padding: 20px; */
    max-width: 1400px;
    margin: 0 auto;
}

.gallery-item {
position: relative;
overflow: hidden;
border-radius: 8px;
cursor: pointer;
transition: transform 0.3s ease;
}

.gallery-item img {
width: 100%;
/* height: 300px; */
object-fit: cover;
display: block;
border-radius: 8px;
transition: opacity 0.3s ease;
loading: lazy;
}

.gallery-item:hover img {
opacity: 0.8;
}

.gallery-item:hover {
transform: scale(1.03);
}

.modal {
display: none;
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
/* background-color: #000; */
background: rgba(0, 0, 0, 0.93);
transition: background-color 0.3s ease;
}

.modal-image-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
max-width: 90%;
max-height: 80%;
overflow: hidden;
}

.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
border: none;
padding: 0;
box-shadow: none;
opacity: 1;
transition: opacity 0.35s ease-in-out, transform 0.35s ease-in-out; /* Crossfade with scale */
}

.modal-content.out {
opacity: 0;
transform: translate(-50%, -50%) scale(0.9); /* Slight scale down on fade-out */
}

.modal-image-container.fullscreen {
max-width: 100%;
max-height: 100%;
}

.modal-image-container.fullscreen .modal-content {
border-radius: 0;
}

.modal-controls {
position: absolute;
top: 20px;
right: 20px;
display: flex;
gap: 10px;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1001;
}

.modal:hover .modal-controls, .modal:hover .nav-button {
opacity: 1;
}

.close, .fullscreen-btn, .nav-button {
color: white;
cursor: pointer;
background: rgba(0, 0, 0, 0.7);
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 50%;
transition: background 0.3s, color 0.3s, opacity 0.3s ease;
}


.close:hover, .fullscreen-btn:hover, .nav-button:hover {
background: rgba(0, 0, 0, 0.8);
color: #bbb;
}

.close svg, .fullscreen-btn svg, .nav-button svg {
width: 16px;
height: 16px;
vertical-align: middle;
}

.nav-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
opacity: 0;
z-index: 1001;
}

.nav-button.disabled {
pointer-events: none;
opacity: 0.5;
}

.prev {
left: 20px;
}

.next {
right: 20px;
}

@media (max-width: 600px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 10px;
        padding: 10px;
    }

    .gallery-item img {
        height: 200px;
    }

    .modal-image-container {
        max-width: 85%;
        max-height: 70%;
    }

    .close, .fullscreen-btn, .nav-button {
        width: 44px;
        height: 44px;
        line-height: 44px;
    }
    .nav-button{
        margin:0 20px;
    }
}


/* Team Area images */

.team-area .gallery-item{
    border-radius: 0;
}
.team-area .gallery-item img{
    border-radius: 0;
}