.fence-card:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.group:hover .fence-card {
    animation: fadeInUp 0.5s ease-out;
}

#galleryModal {
    backdrop-filter: blur(5px);
}

#galleryModal.show {
    display: block !important;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


#galleryModal .overflow-auto {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

#galleryModal .overflow-auto::-webkit-scrollbar {
    width: 8px;
}

#galleryModal .overflow-auto::-webkit-scrollbar-track {
    background: transparent;
}

#galleryModal .overflow-auto::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

#galleryModal .overflow-auto::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.5);
}
.inline-style-1 { border: none; }
.inline-style-2 { height:380px; }
.inline-style-3 { width:100%; height:380px; border:none; border-radius:8px; }
.inline-style-4 { text-align:right; font-size:12px; color:#888; }
.inline-style-5 { color:#1976d2; text-decoration:underline; }

.navbar-blur {
            backdrop-filter: blur(12px) saturate(180%);
            -webkit-backdrop-filter: blur(12px) saturate(180%);
            background-color: rgba(255, 255, 255, 0.85);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }
        .navbar-normal {
            background-color: white;
            border-bottom: 1px solid #e5e7eb;
        }
        

        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.9);
        }
        .modal-content {
            margin: auto;
            display: block;
            max-width: 90%;
            max-height: 90%;
        }
        .modal-content img {
            width: 100%;
            height: auto;
        }
        .close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
        }
        .close:hover {
            color: #bbb;
        }
        

        .hamburger {
            width: 30px;
            height: 24px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
        }
        
        .hamburger-line {
            width: 100%;
            height: 3px;
            background: #374151;
            border-radius: 2px;
            transition: all 0.3s ease;
        }
        
        .hamburger.active .hamburger-line:nth-child(1) {
            transform: rotate(45deg) translate(6px, 6px);
        }
        
        .hamburger.active .hamburger-line:nth-child(2) {
            opacity: 0;
        }
        
        .hamburger.active .hamburger-line:nth-child(3) {
            transform: rotate(-45deg) translate(6px, -6px);
        }
        

        .mobile-menu {
            position: fixed;
            top: 0;
            right: -320px;
            width: 320px;
            height: 100vh;
            background: white;
            box-shadow: -4px 0 20px rgba(0,0,0,0.1);
            transition: right 0.3s ease;
            z-index: 100;
        }
        
        .mobile-menu.open {
            right: 0;
        }
        
        .mobile-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 99;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        
        .mobile-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        
        .mobile-menu-item {
            padding: 16px 24px;
            border-bottom: 1px solid #f3f4f6;
            transition: all 0.2s ease;
        }
        
        .mobile-menu-item:hover {
            background: #f8fafc;
            padding-left: 32px;
        }
        
        .mobile-menu-header {
            background: linear-gradient(135deg, #2563eb, #3b82f6);
            color: white;
            padding: 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .mobile-close-btn {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.2s ease;
        }
        
        .mobile-close-btn:hover {
            background: rgba(255,255,255,0.3);
        }
        
        @media (max-width: 768px) {
            .mobile-menu {
                width: 100%;
                right: -100%;
            }
        }