/* Custom Theme Colors mapped from the Tailwind design */
        :root {
            --brand-blue: #0f172a;   /* Slate 900 */
            --brand-accent: #2563eb; /* Blue 600 */
            --slate-800: #1e293b;
            --slate-700: #334155;
            --slate-300: #cbd5e1;
            --slate-400: #94a3b8;
        }

        body {
            font-family: system-ui, -apple-system, sans-serif;
            background-color: #f8f9fa;
            color: #212529;
        }

        /* Top Bar & Header Styles */
        .bg-brand-blue { background-color: var(--brand-blue); }
        .text-brand-accent { color: var(--brand-accent); }
        .bg-brand-accent { background-color: var(--brand-accent); }
        
        .header-logo-icon {
            padding: 10px 12px;
            background-color: var(--brand-accent);
            border-radius: 8px;
            color: #fff;
        }

        .nav-link {
            font-size: 0.875rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            color: #495057 !important;
            transition: color 0.2s ease;
        }
        .nav-link:hover {
            color: var(--brand-accent) !important;
        }

        .btn-brand {
            background-color: var(--brand-accent);
            color: white;
            font-weight: 600;
            padding: 8px 16px;
            border-radius: 6px;
            transition: background-color 0.2s ease;
            border: none;
        }
        .btn-brand:hover {
            background-color: #1d4ed8;
            color: white;
        }

        /* Hero Section */
        .hero-section {
            background: linear-gradient(to right, #0f172a, #1e293b);
            color: white;
            padding: 80px 0;
            position: relative;
            overflow: hidden;
        }
        .hero-badge {
            background-color: rgba(37, 99, 235, 0.3);
            color: #60a5fa;
            border: 1px solid rgba(37, 99, 235, 0.3);
            padding: 4px 12px;
            border-radius: 50px;
            font-size: 0.75rem;
            letter-spacing: 0.1em;
            font-weight: 600;
            display: inline-block;
        }
        .hero-card {
            background-color: rgba(30, 41, 59, 0.5);
            border: 1px solid var(--slate-700);
            backdrop-filter: blur(4px);
            border-radius: 12px;
            padding: 24px;
        }

        /* Section Accents */
        .heading-line-left {
            width: 64px;
            height: 4px;
            background-color: var(--brand-accent);
/*            margin: 0 auto;*/
            border-radius: 4px;
        }
        .heading-line {
            width: 64px;
            height: 4px;
            background-color: var(--brand-accent);
            margin: 0 auto;
            border-radius: 4px;
        }

        /* Interactive Product Cards */
        .product-card {
            background: white;
            padding: 24px;
            border-radius: 12px;
            border: 1px solid #dee2e6;
            text-align: center;
            transition: all 0.2s ease;
        }
        .product-card:hover {
            border-color: var(--brand-accent);
        }

        /* Ecosystem / AMC Blocks */
        .service-block {
            background-color: #f8f9fa;
            padding: 32px;
            border-radius: 16px;
            border: 1px solid #e9ecef;
        }

        /* Form styling adjustments */
        .form-control:focus {
            border-color: var(--brand-accent);
            box-shadow: none;
        }
        div{
            font-size: 14px;
        }