.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .tonal-shift-bg {
            background: linear-gradient(180deg, #faf8ff 0%, #f3f2ff 100%);
        }
        .hero-gradient {
            background: linear-gradient(135deg, rgba(0, 10, 30, 0.92) 0%, rgba(0, 33, 71, 0.85) 100%);
        }

        /* Animation Classes */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .reveal.reveal-right {
            transform: translateX(40px);
        }
        .reveal.active {
            opacity: 1;
            transform: translate(0, 0);
        }

        .stagger-item {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .stagger-item.active {
            opacity: 1;
            transform: translateY(0);
        }

        .card-hover {
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
        }
        .card-hover:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }

        #hero-parallax {
            will-change: transform;
        }

        .nav-active {
            background-color: white !important;
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        }

        /* Mobile Menu styles */
        #mobile-menu {
            transition: transform 0.3s ease-in-out;
        }
        #mobile-menu.hidden-menu {
            transform: translateX(100%);
        }