.bento-item {
            transition: all 0.3s ease;
            border: solid 1px #333333;

        }

        .bento-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgb(39 39 42 / 0.1), 0 4px 6px -2px rgb(39 39 42 / 0.05);
        }

        .gradient-text {
            background: linear-gradient(90deg, #00b6ff, #22a7da);
            -webkit-background-clip: text;
            background-clip: text;

            -webkit-text-fill-color: transparent;
        }

        .dark .gradient-text {
            background: linear-gradient(90deg, #00b6ff, #22a7da);
            -webkit-background-clip: text;
            background-clip: text;

            -webkit-text-fill-color: transparent;
        }

        .feature-icon {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 16px;
            margin-bottom: 1rem;
        }

        .loan-card {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        }

        .loan-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 25px -5px rgb(39 39 42 / 0.1), 0 10px 10px -5px rgb(39 39 42 / 0.04);
        }

        .testimonial-card {
            transition: all 0.3s ease;

        }

        .testimonial-card:hover {
            transform: scale(1.02);
        }

        .step-number {
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            font-weight: 700;
            font-size: 1.25rem;
            margin: 0.5rem;

        }

        .stats-card {
            transition: all 0.3s ease;

        }

        .stats-card:hover {
            transform: translateY(-5px);
        }

        .calculator-input {
            background-color: #fafafa;
            border: 1px solid #e4e4e7;
            border-radius: 12px;
            padding: 1rem;
            transition: all 0.3s ease;
        }

        .dark .calculator-input {
            background-color: #27272a;
            border-color: #3f3f46;
            color: #fafafa;
        }

        .calculator-input:focus {
            border-color: #00b6ff;
            box-shadow: 0 0 0 3px rgb(59 130 246 / 0.2);
        }

        .summary-card {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            border-radius: 16px;
            padding: 1.5rem;
        }

        .dark .summary-card {
            background: linear-gradient(135deg, #27272a 0%, #18181b 100%);
        }

        .hero-pattern {
            background-image: radial-gradient(#b1d3ff 1px, transparent 1px);
            background-size: 20px 20px;
        }

        .dark .hero-pattern {
            background-image: radial-gradient(#27272a 1px, transparent 1px);
        }

        .mobile-menu {
            animation: slideDown 0.3s ease-out forwards;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }