:root {
            --primary: white;
            --secondary: #C77DFF;
            --tertiary: #002466;
        }
        html {
         scroll-behavior: smooth;
        }
        body {
            font-family: 'Poppins', sans-serif;
            color: var(--tertiary);
                        font-family: 'Inter', sans-serif;
            background-color: #f8f9fa;
        }
        .bg-tertiary {
            background-color: var(--tertiary);
        }
        .text-secondary {
            color: var(--secondary);
        }
        .bg-secondary {
            background-color: var(--secondary);
        }
        .border-secondary {
            border-color: var(--secondary);
        }
        .ring-secondary:focus {
            --tw-ring-color: var(--secondary);
        }
        .hover\:bg-secondary:hover {
            background-color: var(--secondary);
        }
        .hover\:text-tertiary:hover {
            color: var(--tertiary);
        }
        .card {
            background-color: var(--primary);
            border-radius: 1.5rem;
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            transition: all 0.3s ease-in-out;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
        }
        .icon-bg {
            background-color: #e9d5ff;}
        .stacked-card-1 {
            transform: rotate(-5deg) translate(-250px, -220px);
            z-index: 4;
        }
        .stacked-card-2 {
            transform: rotate(0deg) translate(-100px, -110px);
            z-index: 3;
        }
        .stacked-card-3 {
            transform: rotate(5deg) translate(100px, 10px);
            z-index: 2;
        }
        .stacked-card-4 {
            transform: rotate(10deg) translate(300px, 110px);
            z-index: 1;
        }

        @keyframes blob {
            0% {
                transform: translate(0px, 0px) scale(1);
            }
            33% {
                transform: translate(30px, -50px) scale(1.1);
            }
            66% {
                transform: translate(-20px, 20px) scale(0.9);
            }
            100% {
                transform: translate(0px, 0px) scale(1);
            }
        }
        .animate-blob {
            animation: blob 7s infinite;
        }
        .animation-delay-2000 {
            animation-delay: 2s;
        }
        .animation-delay-4000 {
            animation-delay: 4s;
        }