background: #fffaf5; color: #333; } /* Gallery Section */ .gallery-section { padding: 70px 8%; text-align: center; } .gallery-subtitle { color: #c58b35; font-size: 16px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; } .gallery-title { font-size: 42px; color: #2d1b12; margin-bottom: 15px; } .gallery-description { max-width: 650px; margin: 0 auto 40px; color: #777; line-height: 1.7; } /* Gallery Grid */ .gallery { max-width: 1200px; margin: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .gallery-item { position: relative; overflow: hidden; border-radius: 12px; height: 250px; cursor: pointer; } .gallery-item.large { grid-column: span 2; height: 350px; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .gallery-item:hover img { transform: scale(1.08); } /* Overlay */ .overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; justify-content: center; align-items: center; opacity: 0; transition: 0.3s ease; } .gallery-item:hover .overlay { opacity: 1; } .overlay span { color: white; font-size: 35px; } /* Lightbox */ .lightbox { display: none; position: fixed; z-index: 9999; inset: 0; background: rgba(0, 0, 0, 0.9); justify-content: center; align-items: center; padding: 30px; } .lightbox img { max-width: 90%; max-height: 85vh; border-radius: 10px; } .close { position: absolute; top: 20px; right: 35px; color: white; font-size: 45px; cursor: pointer; } /* Mobile */ @media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } .gallery-item.large { grid-column: span 2; } .gallery-title { font-size: 34px; } } @media (max-width: 600px) { .gallery-section { padding: 50px 20px; } .gallery { grid-template-columns: 1fr; } .gallery-item, .gallery-item.large { grid-column: span 1; height: 250px; } .gallery-title { font-size: 30px; } }