:root {
           --color-beige: #F5F2EE;
           --color-taupe: #8B735B;
           --color-dark: #1A1A1A;
           --color-brown: #4A3C31;
       }


       body {
           font-family: 'Inter', sans-serif;
           background-color: var(--color-beige);
           color: var(--color-dark);
           scroll-behavior: smooth;
       }


       h1, h2, h3, .nav-link {
           font-family: 'Playfair Display', serif;
       }


       .img-container {
           position: relative;
           overflow: hidden;
           aspect-ratio: 4/5;
           background-color: #e5e5e5;
           cursor: pointer;
       }


       .img-container img {
           transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
           width: 100%;
           height: 100%;
           object-fit: cover;
       }


       .img-container:hover img {
           transform: scale(1.05);
       }


       .category-overlay {
           background: rgba(26, 26, 26, 0.4);
           opacity: 0;
           transition: opacity 0.4s ease;
       }


       .img-container:hover .category-overlay {
           opacity: 1;
       }


       .filter-btn.active {
           color: var(--color-taupe);
           border-bottom: 1px solid var(--color-taupe);
       }


       /* Smooth page transition for filtering */
       .gallery-item {
           transition: all 0.5s ease-in-out;
       }


       .gallery-item.hidden {
           display: none;
           opacity: 0;
           transform: scale(0.95);
       }


       /* Custom Scrollbar */
       ::-webkit-scrollbar { width: 6px; }
       ::-webkit-scrollbar-track { background: var(--color-beige); }
       ::-webkit-scrollbar-thumb { background: var(--color-taupe); }

       /* Modal styles */
       .modal {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background-color: rgba(0, 0, 0, 0.9);
           display: flex;
           justify-content: center;
           align-items: center;
           z-index: 1000;
           opacity: 0;
           visibility: hidden;
           transition: opacity 0.3s ease, visibility 0.3s ease;
       }

       .modal.show {
           opacity: 1;
           visibility: visible;
       }

        .modal-content {
            width: 95vw;
            height: 95vh;
            object-fit: contain;
            transform: scale(0.96);
            transition: transform 0.3s ease;
        }
        
       .modal.show .modal-content {
           transform: scale(1);
       }

       .modal-close {
           position: absolute;
           top: 20px;
           right: 30px;
           color: white;
           font-size: 40px;
           cursor: pointer;
           z-index: 1001;
       }