body {
        /* This is explicitly set in Tailwind config for body: bg-light-cream */
        color: #1a1a1a;
        overflow-x: hidden;
    }
    
    /* Custom Scrollbar */
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    /* Hide scrollbar for IE, Edge and Firefox */
    .no-scrollbar {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }

    ::-webkit-scrollbar {
        width: 8px;
    }
    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    ::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #ef4444; /* neon-red */
    }

    /* Text Gradient for Hero Section */
    .text-gradient {
        background: linear-gradient(to right, #ef4444, #22c55e);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* Card Hover Effect */
    .card-hover:hover .card-content {
        transform: translateY(0);
        opacity: 1;
    }
    
    .card-content {
        /* Starts hidden and slightly below */
        transform: translateY(20px);
        opacity: 0;
        transition: all 0.3s ease-in-out;
    }

    /* Glitch Effect on Hover (Used for the logo and hero text) */
    .glitch-hover {
        position: relative;
    }

    .glitch-hover:hover {
        /* Applies the animation on hover */
        animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
        color: #ef4444; /* neon-red */
    }

    @keyframes glitch {
        0% { transform: translate(0) }
        20% { transform: translate(-2px, 2px) }
        40% { transform: translate(-2px, -2px) }
        60% { transform: translate(2px, 2px) }
        80% { transform: translate(2px, -2px) }
        100% { transform: translate(0) }
    }

    /* Slider styles */
    .collab-slide {
        animation: fadeIn 0.5s ease-in-out;
    }

    .slider-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .slider-dot:hover {
        transform: scale(1.2);
    }