:root {
        --brand-blue: #0046c7;
        --brand-light-blue: #f4f7fe;
        --brand-dark: #000d47;
        --text-muted-gray: #64748b;
        --learner-bg: #fafbfd;
    }

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: #1e293b;
    }

    .text-brand-blue {
        color: var(--brand-blue);
    }

    .bg-brand-blue {
        background-color: var(--brand-blue);
    }

    .bg-brand-light {
        background-color: var(--brand-light-blue);
    }

    .bg-brand-dark {
        background-color: var(--brand-dark);
    }

    .bg-learner {
        background-color: var(--learner-bg);
    }

    .text-gray {
        color: var(--text-muted-gray);
    }

    /* Buttons */
    .btn-brand {
        background-color: var(--brand-blue);
        color: white;
        padding: 10px 24px;
        font-weight: 500;
        border-radius: 6px;
        border: none;
        transition: all 0.3s ease;
    }

    .btn-brand:hover {
        background-color: #0036a3;
        color: white;
        box-shadow: 0 4px 12px rgba(0, 70, 199, 0.2);
    }

    /* Navigation active underline */
    .nav-link.active-link {
        color: var(--brand-blue) !important;
        border-bottom: 2px solid var(--brand-blue);
    }

    /* Feature Cards */
    .feature-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 24px;
        height: 100%;
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .feature-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 20px rgba(0, 70, 199, 0.04);
    }

    /* Knowledge Center Process line connection */
    .process-step {
        position: relative;
    }

    @media (min-width: 992px) {
        .process-step:not(:last-child)::after {
            content: '';
            position: absolute;
            top: 32px;
            left: 65%;
            width: 70%;
            border-top: 2px dashed #cbd5e1;
            z-index: 1;
        }
    }

    .process-icon-wrapper {
        position: relative;
        z-index: 2;
        background: white;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-color: #e2e8f0 !important;
    }

    /* Form Inputs */
    .form-control,
    .form-select {
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        padding: 10px 14px;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--brand-blue);
        box-shadow: 0 0 0 3px rgba(0, 70, 199, 0.1);
    }

    /* HERO SECTION - full bleed photo with dark gradient overlay */
    .hero-nexora {
        position: relative;
        min-height: 520px;
        display: flex;
        align-items: center;
        background-image: url('https://images.unsplash.com/photo-1781246081182-b8e658662ebd?q=80&w=1664&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
        background-size: cover;
        background-position: center;
        overflow: hidden;
    }

    .hero-nexora::before {
        content: '';
        position: absolute;
        inset: 0;
        /*background: linear-gradient(90deg, rgba(7, 15, 30, 1) 0%, rgba(7, 15, 30, 1) 40%, rgba(7, 15, 30, 0.65) 75%, rgba(7, 15, 30, 0.25) 100%);*/
        z-index: 1;
        background: linear-gradient(90deg, rgb(1 28 70) 0%,
                /* strong left overlay */
                rgba(1, 28, 70, 0.9) 25%,
                /* keep text readable */
                rgba(1, 28, 70, 0.8) 40%,
                /* smooth fade */
                rgba(1, 28, 70, 0.55) 75%,
                /* reveal image */
                rgba(1, 28, 70, 0.1) 100%
                /* almost transparent */
            )
    }

    .hero-nexora .container {
        position: relative;
        z-index: 2;
    }

    .hero-nexora h1,
    .hero-nexora p {
        color: #ffffff;
    }

    .hero-nexora .text-brand-blue {
        color: var(--brand-yellow);
    }

    @media (max-width: 991.98px) {
        .hero-nexora {
            min-height: 420px;
        }

        .hero-nexora::before {
            background: linear-gradient(180deg, rgba(0, 13, 71, 0.92) 0%, rgba(0, 13, 71, 0.88) 60%, rgba(0, 13, 71, 0.8) 100%);
        }
    }

    @media (max-width: 575.98px) {
        .hero-nexora {
            min-height: 380px;
        }

        .hero-nexora h1 {
            font-size: 2.1rem;
        }

        .display-6 {
            font-size: 1.6rem;
        }
    }

    /* General responsive tightening */
    @media (max-width: 767.98px) {
        .rounded-4.bg-brand-light.g-5 {
            padding: 1.5rem !important;
        }
    }

    #learner-guarantee {
        scroll-margin-top: 100px;
        /* adjust based on your header height */
    }