body {
            font-family: 'Poppins', sans-serif;
            scroll-behavior: smooth;
        }
        /* Animation Classes */
        .animate-fade-in {
            opacity: 0;
            transition: all 0.8s ease-in-out;
        }
        .animate-slide-up {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-in-out;
        }
        .animate-fade-in.active,
        .animate-slide-up.active {
            opacity: 1;
            transform: translateY(0);
        }
        .animate-delay-1 {
            transition-delay: 0.2s;
        }
        .animate-delay-2 {
            transition-delay: 0.4s;
        }
        .animate-delay-3 {
            transition-delay: 0.6s;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #6B46C1 0%, #38B2AC 100%);
        }
        .project-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            transition: all 0.3s ease;
        }
        .video-container {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 */
            height: 0;
        }
        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .gallery-container {
            column-count: 3;
            column-gap: 1rem;
        }
        @media (max-width: 768px) {
            .gallery-container {
                column-count: 2;
            }
        }
        @media (max-width: 480px) {
            .gallery-container {
                column-count: 1;
            }
        }
        .gallery-item {
            break-inside: avoid;
            margin-bottom: 1rem;
        }
        .mobile-mockup {
            background: #f8fafc;
            border-radius: 30px;
            padding: 15px;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            display: inline-block;
            position: relative;
        }
        .mobile-mockup:before {
            content: "";
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 30%;
            height: 20px;
            background: #f8fafc;
            border-radius: 10px;
        }
@media (max-width: 767px) {
    .desktop-only {
        display: none;
    }
}