:where([class^="ri-"])::before { content: "\f3c2"; }
    
    body {
        font-family: 'Inter', sans-serif;
    }
    body {
        overflow-x: hidden;
        overflow-y: auto;
      }
      
    
    .logo-animate {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: draw 3s ease-in-out forwards;
    }
    
    @keyframes draw {
        to {
            stroke-dashoffset: 0;
        }
    }
    
    .parallax {
        transform: translateZ(0);
        will-change: transform;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .glassmorphism {
        background: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.18);
    }
    
    .glow-button {
        box-shadow: 0 0 20px rgba(30, 61, 89, 0.3);
        transition: all 0.3s ease;
    }
    
    .glow-button:hover {
        box-shadow: 0 0 30px rgba(30, 61, 89, 0.5);
        transform: translateY(-2px);
    }
    
    .ripple {
        position: relative;
        overflow: hidden;
    }
    
    .ripple::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }
    
    .ripple:hover::before {
        width: 300px;
        height: 300px;
    }
    
    .scroll-animate {
        opacity: 0;
        transform: translateY(50px);
        transition: all 0.8s ease;
    }
    
    .scroll-animate.animate {
        opacity: 1;
        transform: translateY(0);
    }
    
    .masonry-grid {
        column-count: 3;
        column-gap: 1rem;
    }
    
    .masonry-item {
        break-inside: avoid;
        margin-bottom: 1rem;
        transition: transform 0.3s ease;
    }
    
    .masonry-item:hover {
        transform: scale(1.05);
    }
    
    @media (max-width: 768px) {
        .masonry-grid {
            column-count: 2;
        }
    }
    
    .timeline-item {
        opacity: 0;
        transform: scale(0.8);
        transition: all 0.5s ease;
    }
    
    .timeline-item.glow {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
    }
    
    .bounce-hover {
        transition: transform 0.3s ease;
    }
    
    .bounce-hover:hover {
        transform: translateY(-5px);
        animation: bounce 0.6s ease;
    }
    
    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% { transform: translateY(-5px); }
        40% { transform: translateY(-10px); }
        60% { transform: translateY(-7px); }
    }
    
    .fade-scale {
        opacity: 0;
        transform: scale(0.9);
        transition: all 0.5s ease;
    }
    
    .fade-scale.active {
        opacity: 1;
        transform: scale(1);
    }
    
    .fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
    }

    .fade-in.visible {
        opacity: 1;
        transform: translateY(0);
    }
    
    .card-hover {
        transition: all 0.3s ease;
    }
    
    .card-hover:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }
    .header-bg {
        background: rgba(253, 251, 247, 0.95);
        backdrop-filter: blur(10px);
    }