* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: "DM Sans", sans-serif;
}

.no-scroll {
 overflow: hidden;
}

.gallery {
 /* background: #d9d8d3; */
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 gap: 20px;
 padding: 3rem 4rem;
}

.gallery img {
 border-radius: 8px;
 cursor: pointer;
 transition: transform 0.3s ease;
}

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

.popup-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 background: rgba(0, 0, 0, 0.8);
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 9999;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.4s ease, visibility 0.4s ease;
}

.popup-overlay.active {
 opacity: 1;
 visibility: visible;
}

.popup-content {
 position: relative;
 max-width: 90%;
 max-height: 85%;
 transform: scale(0.8);
 transition: transform 0.4s ease;
}

.popup-overlay.active .popup-content {
 transform: scale(1);
}

.popup-content img {
 width: 100%;
 height: auto;
 border-radius: 10px;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.close-btn-popup {
 position: absolute;
 top: -30px;
 right: -15px;
 background: white;
 color: black;
 font-size: 20px;
 border: none;
 border-radius: 50%;
 width: 35px;
 height: 35px;
 cursor: pointer;
 font-weight: bold;
 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

@media (max-width: 1400px) {
 .gallery {
  padding: 3rem 10px;
 }
}

@media (max-width: 600px) {
 .popup-content {
  max-width: 95%;
 }
}

@media (max-width: 320px) {
 .gallery img {
  width: 90%;
 }
}