/* ==========================================================================
   GERMAN RESOURCES COMPANY (German Resources Company) - STRIPE & LINEAR TECH DESIGN SYSTEM 2026
   Headquarters: Germany
   Architectural Guidelines: Ambient Lighting, Glassmorphism, Tactile 3D, Cairo Typography
   ========================================================================== */

/* --- 1. DESIGN TOKENS & VARIABLES --- */
:root {
    /* Brand Core Colors */
    --grc-navy-950: #080D1A;
    --grc-navy-900: #111C35;
    --grc-navy-800: #1E293B;
    --grc-navy-700: #334155;
    --grc-slate-500: #526174;
    --grc-slate-400: #94A3B8;
    --grc-slate-200: #E2E8F0;
    --grc-slate-100: #F1F5F9;
    --grc-slate-50:  #F4F7FB;
    --grc-pure-white: #FFFFFF;
    --grc-graphite-dark: #0B132B;
    --grc-graphite-muted: rgba(255, 255, 255, 0.14);

    /* Phase U.6 Unified Global Surface & Text Tokens (Cooperation Reference Standard) */
    --grc-page-bg: #F4F7FB;
    --grc-card-bg: #FFFFFF;
    --grc-navy: #111C35;
    --grc-text-primary: #172033;
    --grc-text-secondary: #526174;
    --grc-border: #E2E8F0;
    --grc-amber: #D97706;

    /* Tech Accents (Stripe / Linear) — Synced to Central Design Tokens */
    --grc-blue-600: var(--color-primary, #1D4ED8);
    --grc-blue-500: var(--color-primary, #2563EB);
    --grc-blue-400: #60A5FA;
    --grc-indigo-600: var(--color-primary-hover, #1E40AF);
    --grc-indigo-500: #6366F1;
    --grc-gold-600: var(--color-accent, #D97706);
    --grc-gold-500: #F59E0B;
    --grc-emerald-600: var(--color-success, #059669);
    --grc-emerald-500: #10B981;
    --grc-rose-600: var(--color-danger, #E11D48);

    /* Multi-layered Ambient Shadows */
    --shadow-tactile: 
        0 1px 2px rgba(15, 23, 42, 0.03),
        0 4px 12px -2px rgba(15, 23, 42, 0.05),
        0 16px 28px -6px rgba(15, 23, 42, 0.07);
    --shadow-tactile-hover: 
        0 1px 3px rgba(15, 23, 42, 0.04),
        0 8px 24px -4px rgba(15, 23, 42, 0.08),
        0 24px 44px -8px rgba(15, 23, 42, 0.12);
    --shadow-blue-glow: 0 8px 24px -4px rgba(37, 99, 235, 0.35);
    --shadow-emerald-glow: 0 8px 24px -4px rgba(5, 150, 105, 0.35);
    --shadow-gold-glow: 0 8px 24px -4px rgba(217, 119, 6, 0.35);

    /* Glass Surfaces */
    --glass-surface: rgba(255, 255, 255, 0.88);
    --glass-border: rgba(255, 255, 255, 0.95);
    --glass-inner-specular: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* --- 2. GLOBAL RESET & AMBIENT AURA BACKGROUND --- */
html {
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

body {
    font-family: 'Cairo', 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--grc-text-primary, #172033);
    background-color: var(--grc-page-bg, #F4F7FB);
    background-image: none;
    line-height: 1.7;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: clip;
    width: 100%;
    max-width: 100%;
    position: relative;
}

/* Subtle Clean Background Overlay */
.bg-ambient-grid {
    background-image: none !important;
}

/* German Heritage Tri-color Ribbon */
.german-ribbon {
    height: 3.5px;
    width: 100%;
    background: linear-gradient(90deg, #000000 0%, #000000 33.33%, #DD0000 33.33%, #DD0000 66.66%, #FFCC00 66.66%, #FFCC00 100%);
    position: relative;
    z-index: 1050;
}

/* --- 3. TYPOGRAPHY & GRADIENT TEXT (Cairo & Inter) --- */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cairo', sans-serif;
    letter-spacing: -0.015em;
    font-weight: 700;
    color: var(--grc-navy, #111C35);
}

.heading-gradient-dark {
    background: linear-gradient(135deg, #0F172A 0%, #334155 60%, #1E293B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.heading-gradient-blue {
    background: linear-gradient(135deg, #2563EB 0%, #4F46E5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.heading-gradient-gold {
    background: linear-gradient(135deg, #D97706 0%, #F59E0B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Pill Badges (Stripe / Linear Meta Tags) */
.badge-tech-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.95rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 9999px;
    background: rgba(37, 99, 235, 0.08);
    color: var(--grc-blue-600);
    border: 1px solid rgba(37, 99, 235, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    backdrop-filter: blur(8px);
}

.badge-tech-pill.badge-gold {
    background: rgba(217, 119, 6, 0.08);
    color: var(--grc-gold-600);
    border-color: rgba(217, 119, 6, 0.25);
}

.badge-tech-pill.badge-emerald {
    background: rgba(5, 150, 105, 0.08);
    color: var(--grc-emerald-600);
    border-color: rgba(5, 150, 105, 0.25);
}

/* --- 4. TACTILE 3D BUTTONS (Tactile Physical Feel) --- */
.btn-tactile-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 0.9375rem;
    color: #FFFFFF !important;
    background: linear-gradient(180deg, #2563EB 0%, #1D4ED8 100%);
    border: 1px solid #1D4ED8;
    border-radius: 14px;
    padding: 0.75rem 1.65rem;
    text-decoration: none;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 4px 12px -2px rgba(37, 99, 235, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    overflow: hidden;
}

.btn-tactile-primary:hover {
    background: linear-gradient(180deg, #1D4ED8 0%, #1E40AF 100%);
    transform: translateY(-2px);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 8px 24px -4px rgba(37, 99, 235, 0.45);
    color: #FFFFFF !important;
}

.btn-tactile-primary:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.25),
        0 2px 6px rgba(37, 99, 235, 0.2);
}

/* Shimmer Light Scan on Tactile Button */
.btn-tactile-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: skewX(-20deg);
    transition: none;
    animation: btnShimmerScan 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes btnShimmerScan {
    0% { left: -120%; }
    25% { left: 180%; }
    100% { left: 180%; }
}

/* Secondary Frosted Tactile Button */
.btn-tactile-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--grc-navy-900) !important;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 14px;
    padding: 0.75rem 1.65rem;
    text-decoration: none;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 2px 6px rgba(15, 23, 42, 0.04);
    backdrop-filter: blur(12px);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.btn-tactile-secondary:hover {
    background: #FFFFFF;
    color: var(--grc-blue-600) !important;
    border-color: rgba(191, 219, 254, 0.9);
    transform: translateY(-2px);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 6px 18px -3px rgba(15, 23, 42, 0.08);
}

.btn-tactile-secondary:active {
    transform: translateY(1px) scale(0.98);
}

/* Tactile Gold Button */
.btn-tactile-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 0.9375rem;
    color: #FFFFFF !important;
    background: linear-gradient(180deg, #D97706 0%, #B45309 100%);
    border: 1px solid #B45309;
    border-radius: 14px;
    padding: 0.75rem 1.65rem;
    text-decoration: none;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        var(--shadow-gold-glow);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.btn-tactile-gold:hover {
    background: linear-gradient(180deg, #B45309 0%, #92400E 100%);
    transform: translateY(-2px);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 10px 28px -4px rgba(217, 119, 6, 0.45);
    color: #FFFFFF !important;
}

.btn-tactile-gold:active {
    transform: translateY(1px) scale(0.98);
}

/* GRC Brand Gold Action Button (Service Inquiry & Action CTAs) */
.btn-grc-gold,
.btn.btn-grc-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    color: #0F172A !important;
    background: linear-gradient(180deg, #F59E0B 0%, #D97706 100%);
    border: 1px solid #D97706;
    border-radius: 50rem;
    padding: 0.65rem 1.65rem;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 4px 14px -2px rgba(217, 119, 6, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.5;
    white-space: normal;
    text-align: center;
    max-width: 100%;
}

.btn-grc-gold:hover,
.btn.btn-grc-gold:hover {
    background: linear-gradient(180deg, #D97706 0%, #B45309 100%);
    color: #FFFFFF !important;
    border-color: #B45309;
    transform: translateY(-2px);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 8px 24px -4px rgba(217, 119, 6, 0.45);
}

.btn-grc-gold:active,
.btn.btn-grc-gold:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.2),
        0 2px 6px rgba(217, 119, 6, 0.25);
}

.btn-grc-gold:focus-visible,
.btn.btn-grc-gold:focus-visible {
    outline: 2px solid #F59E0B;
    outline-offset: 2px;
}

.btn-grc-gold.btn-lg,
.btn.btn-grc-gold.btn-lg {
    padding: 0.75rem 2rem;
    font-size: 1.05rem;
    border-radius: 50rem;
}

.btn-grc-gold.btn-sm,
.btn.btn-grc-gold.btn-sm {
    padding: 0.4rem 1.15rem;
    font-size: 0.85rem;
    border-radius: 50rem;
}

.btn-grc-gold i,
.btn.btn-grc-gold i {
    font-size: 1.1em;
    line-height: 1;
    display: inline-block;
}

/* Tactile Emerald (WhatsApp) Button */
.btn-tactile-emerald {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 0.9375rem;
    color: #FFFFFF !important;
    background: linear-gradient(180deg, #059669 0%, #047857 100%);
    border: 1px solid #047857;
    border-radius: 14px;
    padding: 0.75rem 1.65rem;
    text-decoration: none;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        var(--shadow-emerald-glow);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.btn-tactile-emerald:hover {
    background: linear-gradient(180deg, #047857 0%, #065F46 100%);
    transform: translateY(-2px);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 10px 28px -4px rgba(5, 150, 105, 0.45);
    color: #FFFFFF !important;
}

.btn-tactile-emerald:active {
    transform: translateY(1px) scale(0.98);
}

/* Large Grand CTA Button */
.btn-tactile-xl {
    padding: 0.75rem 1.6rem;
    font-size: 0.95rem;
    border-radius: 10px;
    height: 48px;
}

/* --- 5. ENTERPRISE CORPORATE DESIGN SYSTEM (GRC GERMAN STANDARD 2026) --- */

/* 5.1 Hero Architecture */
.hero-corp-section {
    min-height: auto;
    display: block;
    background: transparent;
}

.hero-headline,
h1.display-4 {
    font-family: 'Cairo', system-ui, sans-serif !important;
    font-size: clamp(1.85rem, 2.7vw, 2.5rem) !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
    text-wrap: balance !important;
}

.hero-corp-section .col-xl-9,
.hero-corp-section .col-xl-10,
.hero-corp-section .col-xl-11,
section.position-relative.py-5 .col-xl-9 {
    max-width: 1240px !important;
    width: 100% !important;
}

.hero-subtitle {
    max-width: 860px;
    font-size: 1.125rem;
    line-height: 1.8;
    color: #475569;
}

/* 5.2 Badges & Official Seals */
.corp-seal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #92400E;
    background: #FEF3C7;
    border: 1px solid #FDE68A;
    border-radius: 8px;
    padding: 0.35rem 0.85rem;
}

.corp-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #1D4ED8;
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    border-radius: 8px;
    padding: 0.35rem 0.85rem;
}

.corp-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #F8FAFC;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 0.35rem 0.85rem;
}

/* 5.3 Corporate Unified Action Buttons */
.hero-action-cluster {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
}

.btn-corp-primary, .btn-corp-secondary, .btn-corp-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-family: 'Cairo', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.9375rem;
    border-radius: 10px;
    height: 48px;
    padding: 0 1.5rem;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    white-space: nowrap;
}

.btn-corp-primary {
    background: #1D4ED8;
    color: #FFFFFF !important;
    border: 1px solid #1E40AF;
    box-shadow: 0 2px 8px rgba(29, 78, 216, 0.25);
}

.btn-corp-primary:hover {
    background: #1E40AF;
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(29, 78, 216, 0.35);
}

.btn-corp-secondary {
    background: #FFFFFF;
    color: #0F172A !important;
    border: 1.5px solid #CBD5E1;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.btn-corp-secondary:hover {
    background: #F8FAFC;
    border-color: #94A3B8;
    color: #1D4ED8 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.btn-corp-whatsapp {
    background: #047857;
    color: #FFFFFF !important;
    border: 1px solid #065F46;
    box-shadow: 0 2px 8px rgba(4, 120, 87, 0.25);
}

.btn-corp-whatsapp:hover {
    background: #065F46;
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(4, 120, 87, 0.35);
}

.btn-corp-lg {
    height: 48px;
    padding: 0 1.65rem;
    font-size: 0.95rem;
}

/* 5.4 Structured Corporate Trust Bar */
.corp-trust-bar {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 0.85rem 1.25rem;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
    max-width: 980px;
    margin: 0 auto;
}

.corp-trust-col {
    padding: 0.5rem 0.75rem;
    border-inline-end: 1px solid #F1F5F9;
}

@media (max-width: 767.98px) {
    .corp-trust-col:nth-child(2) {
        border-inline-end: none;
    }
    .corp-trust-col:nth-child(1),
    .corp-trust-col:nth-child(2) {
        border-bottom: 1px solid #F1F5F9;
    }
}

.corp-trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.corp-trust-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.corp-trust-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.25;
}

.corp-trust-sub {
    font-size: 0.75rem;
    color: #64748B;
}

/* 5.5 Services Showcase Architecture */
.section-services-showcase {
    background-color: #FAFAFC;
    border-top: 1px solid #E2E8F0;
}

.corporate-flagship-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-top: 3px solid #1D4ED8;
    border-radius: 14px;
    padding: 2.25rem;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.corporate-flagship-card:hover {
    border-color: #CBD5E1;
    border-top-color: #1D4ED8;
    box-shadow: 0 8px 28px -4px rgba(15, 23, 42, 0.08);
}

.flagship-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.3;
}

.flagship-desc {
    font-size: 0.9375rem;
    line-height: 1.75;
    color: #475569;
}

.flagship-action-box {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 4 Symmetrical Corporate Pillar Cards */
.corp-service-pillar-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.03);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.corp-service-pillar-card:hover {
    transform: translateY(-3px);
    border-color: #93C5FD;
    box-shadow: 0 10px 24px -4px rgba(15, 23, 42, 0.08);
}

.corp-pillar-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    color: #1D4ED8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
    transition: all 0.2s ease;
}

.corp-service-pillar-card:hover .corp-pillar-icon {
    background: #1D4ED8;
    color: #FFFFFF;
    border-color: #1D4ED8;
}

.corp-pillar-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 0.65rem;
    line-height: 1.4;
}

.corp-pillar-desc {
    font-size: 0.875rem;
    color: #64748B;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.corp-pillar-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #F1F5F9;
}

.corp-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #1D4ED8;
    text-decoration: none;
    transition: all 0.15s ease;
}

.corp-card-link:hover {
    color: #1E40AF;
    gap: 0.65rem;
}

/* 5.6 Process Roadmap Step Cards */
.section-process-roadmap {
    background: #FFFFFF;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
}

.corp-process-step-card {
    background: #FAFAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 1.5rem 1.25rem;
    height: 100%;
    transition: all 0.2s ease;
}

.corp-process-step-card:hover {
    background: #FFFFFF;
    border-color: #CBD5E1;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.corp-step-num {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    color: #1D4ED8;
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

/* 5.7 Executive Grand CTA Banner */
.corp-grand-cta {
    background: #0B1120;
    border: 1px solid #1E293B;
    border-radius: 16px;
    padding: 3.5rem 2rem;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.15);
}

/* Legacy Fallbacks & Active DOM Corporate Calibration */
.glass-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}

/* Trust Bar Icons - Unified German Corporate Blue */
.glass-card .bi-geo-alt-fill,
.glass-card .bi-file-earmark-check-fill,
.glass-card .bi-shield-fill-check,
.glass-card .bi-headset {
    color: #1D4ED8 !important;
}

.glass-card .d-flex.align-items-center.justify-content-center.gap-2 > i {
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
    background: #EFF6FF !important;
    border: 1px solid #DBEAFE !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
    flex-shrink: 0 !important;
}

.glass-card .border-slate-200 {
    border-color: #F1F5F9 !important;
}

/* Hero Button Triple Cluster (Balanced Row) */
.d-flex.flex-wrap.justify-content-center.align-items-center.gap-3.mb-5 > .btn-tactile-primary,
.d-flex.flex-wrap.justify-content-center.align-items-center.gap-3.mb-5 > .btn-tactile-secondary,
.d-flex.flex-wrap.justify-content-center.align-items-center.gap-3.mb-5 > .btn-tactile-emerald {
    height: 48px !important;
    padding: 0 1.5rem !important;
    border-radius: 10px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
}

/* Timeline Process Step Badges (Unified Corporate German Standard) */
.section-number-badge {
    background: #EFF6FF !important;
    border: 1px solid #DBEAFE !important;
    color: #1D4ED8 !important;
    box-shadow: none !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 1rem !important;
}

.row.g-4.text-center > .col-md-3 > .p-3 {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 1.5rem 1.25rem !important;
    height: 100% !important;
    box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.2s ease !important;
}

.row.g-4.text-center > .col-md-3 > .p-3:hover {
    border-color: #CBD5E1 !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06) !important;
}

/* Grand CTA Banner Corporate Clean */
.glass-card[style*="linear-gradient(135deg, #0B1120"] {
    background: #0B1120 !important;
    border: 1px solid #1E293B !important;
    border-radius: 16px !important;
    padding: 3.5rem 2rem !important;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.15) !important;
}

.glass-card[style*="linear-gradient(135deg, #0B1120"] div[style*="radial-gradient"] {
    display: none !important;
}

/* --- 6. NAVIGATION & HEADER (Modern GRC Corporate Standard 2026) --- */

/* 6.1 Top Bar */
.top-header-bar {
    background: #0B1120;
    color: #94A3B8;
    font-size: 0.8125rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 1040;
}

.top-header-bar a {
    color: #CBD5E1;
    text-decoration: none;
    transition: all 0.15s ease;
}

.topbar-item {
    font-size: 0.8rem;
    line-height: 1.4;
    white-space: nowrap;
}

.topbar-contact-link:hover {
    color: #38BDF8 !important;
}

.topbar-divider {
    display: inline-block;
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 0.15rem;
    vertical-align: middle;
}

.topbar-badge-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.76rem;
    font-weight: 600;
    color: #FBBF24 !important;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.28);
    transition: all 0.2s ease;
}

.topbar-badge-link:hover {
    background: rgba(245, 158, 11, 0.24);
    border-color: rgba(245, 158, 11, 0.5);
    color: #FDE68A !important;
    transform: translateY(-1px);
}

.topbar-whatsapp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.76rem;
    font-weight: 600;
    color: #4ADE80 !important;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
    transition: all 0.2s ease;
}

.topbar-whatsapp-btn:hover {
    background: rgba(34, 197, 94, 0.22);
    border-color: rgba(34, 197, 94, 0.45);
    color: #86EFAC !important;
    transform: translateY(-1px);
}

header.sticky-top {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1040 !important;
    width: 100% !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* 6.2 Main Navbar */
.navbar-grc {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid #E2E8F0;
    padding: 0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.2s ease, background 0.2s ease;
}

.grc-nav-header-row {
    padding: 0.45rem 0 0.35rem 0;
    transition: padding 0.2s ease;
}

header.sticky-top.header-scrolled .grc-nav-header-row {
    padding: 0.25rem 0 0.2rem 0;
}

/* Scrolled elevation state */
header.sticky-top.header-scrolled {
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.1), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

header.sticky-top.header-scrolled .navbar-grc {
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom-color: rgba(226, 232, 240, 0.8) !important;
}

header.sticky-top.header-scrolled .navbar-brand-logo {
    height: 36px !important;
}

/* Zone 1: Logo */
.navbar-brand-logo {
    height: 42px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.04));
    transition: transform 0.2s ease, height 0.2s ease;
}

.navbar-brand:hover .navbar-brand-logo {
    transform: scale(1.02);
}

@media (max-width: 1199.98px) {
    .navbar-brand-logo {
        height: 38px;
        max-width: 145px;
    }
}

@media (max-width: 575.98px) {
    .navbar-brand-logo {
        height: 32px;
        max-width: 125px;
    }
}

/* Zone 2: Navigation Links (Tier 2 on Desktop) */
@media (min-width: 1200px) {
    .grc-navbar-collapse {
        border-top: 1px solid rgba(226, 232, 240, 0.7);
        padding: 0.2rem 0 0.35rem 0;
        transition: padding 0.2s ease;
    }

    header.sticky-top.header-scrolled .grc-navbar-collapse {
        padding: 0.15rem 0 0.25rem 0;
    }

    .grc-navbar-nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0.12rem;
    }
}

.nav-link-grc {
    font-family: 'Cairo', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 0.835rem;
    color: #334155 !important;
    padding: 0.35rem 0.52rem !important;
    border-radius: 6px;
    white-space: nowrap;
    position: relative;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .nav-link-grc {
        font-size: 0.795rem !important;
        padding: 0.28rem 0.38rem !important;
    }
}

.nav-link-grc:hover {
    color: #1D4ED8 !important;
    background: #F1F5F9;
}

.nav-link-grc.active,
.dropdown-mega > .nav-link-grc.show,
.dropdown-mega > .nav-link-grc[aria-expanded="true"] {
    color: #1D4ED8 !important;
    background: transparent !important;
    font-weight: 700;
    position: relative;
}

@media (min-width: 1200px) {
    .nav-link-grc.active::after,
    .dropdown-mega > .nav-link-grc.show::after,
    .dropdown-mega > .nav-link-grc[aria-expanded="true"]::after {
        content: '';
        position: absolute;
        bottom: -3px;
        left: 0.38rem;
        right: 0.38rem;
        height: 2.5px;
        background: #1D4ED8;
        border-radius: 2px;
    }
}

/* Remove default Bootstrap caret from nav dropdown */
.navbar-grc .dropdown-toggle::after {
    display: none !important;
}

.nav-dropdown-arrow {
    font-size: 0.65rem;
    margin-inline-start: 0.35rem;
    transition: transform 0.2s ease;
    display: inline-block;
    color: #64748B;
}

.dropdown.show .nav-dropdown-arrow,
.dropdown-mega > .nav-link-grc.show .nav-dropdown-arrow,
.dropdown-mega > .nav-link-grc[aria-expanded="true"] .nav-dropdown-arrow {
    transform: rotate(180deg);
    color: #2563EB;
}

.navbar-grc .dropdown-menu {
    border-radius: 12px;
    box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.12), 0 4px 6px -2px rgba(15, 23, 42, 0.05);
    border: 1px solid #E2E8F0;
    padding: 0.4rem;
    min-width: 240px;
    animation: grcDropdownFade 0.2s ease;
}

@keyframes grcDropdownFade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.navbar-grc .dropdown-item {
    font-size: 0.84rem;
    font-weight: 500;
    color: #334155;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
}

.navbar-grc .dropdown-item:hover {
    color: #1D4ED8;
    background: #F1F5F9;
    padding-inline-start: 0.95rem;
}

/* --- Services Mega Menu (Categorized 3-Column Enterprise Dropdown 2026) --- */
@media (min-width: 1200px) {
    .dropdown-mega {
        position: static !important;
    }

    .grc-exec-nav-dock {
        position: relative !important;
    }

    .dropdown-menu-mega,
    .navbar-grc .dropdown-menu[aria-labelledby="servicesDropdown"] {
        position: absolute !important;
        top: 100% !important;
        inset-inline: 0 !important;
        margin-inline: auto !important;
        width: min(990px, calc(100% - 24px)) !important;
        max-width: 990px !important;
        border-radius: 16px !important;
        background: #FFFFFF !important;
        border: 1px solid #E2E8F0 !important;
        box-shadow: 0 20px 40px -8px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
        overflow: hidden !important;
        animation: grcDropdownFade 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        margin-top: 0.5rem !important;
        z-index: 1060 !important;
        transform: none !important;
        left: 0 !important;
        right: 0 !important;
    }

    [dir="rtl"] .dropdown-menu-mega,
    [dir="rtl"] .navbar-grc .dropdown-menu[aria-labelledby="servicesDropdown"] {
        direction: rtl !important;
        text-align: right !important;
    }

    [dir="ltr"] .dropdown-menu-mega,
    [dir="ltr"] .navbar-grc .dropdown-menu[aria-labelledby="servicesDropdown"] {
        direction: ltr !important;
        text-align: left !important;
    }

    /* Open exclusively on click via Bootstrap .show state (hover disabled) */
    .dropdown-mega > .dropdown-menu-mega.show,
    .navbar-grc .dropdown-menu[aria-labelledby="servicesDropdown"].show {
        display: block !important;
    }

    /* Support legacy/uncompiled <ul> by rendering it as a 3-column grid */
    .navbar-grc ul.dropdown-menu[aria-labelledby="servicesDropdown"].show {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.35rem 0.65rem !important;
        padding: 1.25rem !important;
    }

    .navbar-grc ul.dropdown-menu[aria-labelledby="servicesDropdown"] > li {
        list-style: none !important;
    }

    .navbar-grc ul.dropdown-menu[aria-labelledby="servicesDropdown"] .dropdown-item {
        display: flex !important;
        align-items: center !important;
        gap: 0.65rem !important;
        padding: 0.5rem 0.65rem !important;
        border-radius: 10px !important;
        font-size: 0.835rem !important;
        font-weight: 600 !important;
        color: #1E293B !important;
        transition: all 0.18s ease !important;
        white-space: normal !important;
        line-height: 1.35 !important;
    }

    .navbar-grc ul.dropdown-menu[aria-labelledby="servicesDropdown"] .dropdown-item:hover {
        background: #F1F5F9 !important;
        color: #1D4ED8 !important;
        transform: translateX(-3px);
    }

    [dir="ltr"] .navbar-grc ul.dropdown-menu[aria-labelledby="servicesDropdown"] .dropdown-item:hover {
        transform: translateX(3px);
    }

    .navbar-grc ul.dropdown-menu[aria-labelledby="servicesDropdown"] .dropdown-item i {
        width: 30px !important;
        height: 30px !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.95rem !important;
        background: rgba(37, 99, 235, 0.08) !important;
        color: #2563EB !important;
        flex-shrink: 0 !important;
    }

    .bi-handshake::before {
        content: "\f2b5" !important;
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;
    }

    /* Replace legacy text "عرض صفحة كافة الخدمات" with "عرض الكل" */
    .navbar-grc ul.dropdown-menu[aria-labelledby="servicesDropdown"] > li:last-child {
        grid-column: 1 / -1 !important;
        border-top: 1px solid #E2E8F0 !important;
        margin-top: 0.5rem !important;
        padding-top: 0.65rem !important;
    }

    .navbar-grc ul.dropdown-menu[aria-labelledby="servicesDropdown"] > li:last-child .dropdown-item {
        background: #F8FAFC !important;
        color: #1D4ED8 !important;
        font-weight: 700 !important;
        justify-content: center !important;
        font-size: 0 !important;
    }

    .navbar-grc ul.dropdown-menu[aria-labelledby="servicesDropdown"] > li:last-child .dropdown-item::after {
        content: "عرض الكل ←" !important;
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        color: #1D4ED8 !important;
    }

    [dir="ltr"] .navbar-grc ul.dropdown-menu[aria-labelledby="servicesDropdown"] > li:last-child .dropdown-item::after {
        content: "View All →" !important;
    }

    .navbar-grc ul.dropdown-menu[aria-labelledby="servicesDropdown"] > li:has(.dropdown-divider) {
        display: none !important;
    }

    .mega-menu-row,
    .mega-menu-body > .row {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 1.5rem !important;
        margin: 0 !important;
    }

    .mega-col {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .mega-col:not(:last-child) {
        border-inline-end: 1px solid #F1F5F9 !important;
        padding-inline-end: 1.5rem !important;
    }
}

.mega-menu-body {
    background: #FFFFFF;
    padding: 1.25rem 1.35rem !important;
}

.mega-col-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.86rem;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: 0.01em;
    font-family: 'Cairo', system-ui, sans-serif;
    padding-bottom: 0.55rem !important;
    margin-bottom: 0.65rem !important;
    border-bottom: 1px solid #F1F5F9 !important;
    min-width: 0;
}

.mega-header-title,
.mega-col-header > span:not(.mega-header-icon) {
    min-width: 0;
    flex: 1 1 auto;
    white-space: normal;
    line-height: 1.35;
    word-break: normal;
    overflow-wrap: break-word;
}

.mega-header-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.mega-header-icon.text-primary { background: rgba(37, 99, 235, 0.1); color: #2563EB !important; }
.mega-header-icon.text-indigo { background: rgba(79, 70, 229, 0.1); color: #4F46E5 !important; }
.mega-header-icon.text-emerald { background: rgba(5, 150, 105, 0.1); color: #059669 !important; }

.mega-links-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1 1 auto;
}

.mega-menu-link {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.45rem 0.55rem;
    border-radius: 9px;
    text-decoration: none;
    color: #1E293B;
    background: transparent;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    min-width: 0;
    height: auto;
}

.mega-menu-link:hover {
    background: #F8FAFC;
    transform: translateX(-3px);
}

[dir="ltr"] .mega-menu-link:hover {
    transform: translateX(3px);
}

.mega-item-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.92rem;
    flex-shrink: 0;
    margin-top: 2px;
    transition: transform 0.18s ease, background 0.18s ease;
}

.mega-menu-link:hover .mega-item-icon {
    transform: scale(1.06);
}

.mega-item-icon.icon-blue,
.mega-item-icon.icon-primary {
    background: rgba(37, 99, 235, 0.08);
    color: #2563EB;
}

.mega-menu-link:hover .mega-item-icon.icon-blue,
.mega-menu-link:hover .mega-item-icon.icon-primary {
    background: rgba(37, 99, 235, 0.14);
}

.mega-item-icon.icon-indigo {
    background: rgba(79, 70, 229, 0.08);
    color: #4F46E5;
}

.mega-menu-link:hover .mega-item-icon.icon-indigo {
    background: rgba(79, 70, 229, 0.14);
}

.mega-item-icon.icon-emerald {
    background: rgba(5, 150, 105, 0.08);
    color: #059669;
}

.mega-menu-link:hover .mega-item-icon.icon-emerald {
    background: rgba(5, 150, 105, 0.14);
}

.mega-item-content,
.mega-menu-link > div {
    min-width: 0;
    flex: 1 1 auto;
}

/* Service Item Title: Crisp, bold, auto wrapping */
.mega-item-title {
    font-size: 0.835rem;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.35;
    margin-bottom: 2px;
    font-family: 'Cairo', system-ui, sans-serif;
    transition: color 0.15s ease;
    white-space: normal !important;
    word-break: normal;
    overflow-wrap: break-word;
    display: block;
}

.mega-menu-link:hover .mega-item-title {
    color: #1D4ED8;
}

/* Service Short Description: Softer, smaller, auto wrapping */
.mega-item-desc,
.mega-menu-link .text-muted.text-xs {
    font-size: 0.72rem !important;
    color: #64748B !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    display: block !important;
    letter-spacing: normal !important;
    white-space: normal !important;
    word-break: normal;
    overflow-wrap: break-word;
}

.mega-menu-footer {
    background: #F8FAFC;
    border-top: 1px solid #E2E8F0;
    padding: 0.65rem 1.35rem !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.mega-footer-trust {
    font-size: 0.74rem !important;
    color: #64748B !important;
    font-weight: 600 !important;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1 1 280px;
    min-width: 0;
    line-height: 1.35;
}

.mega-footer-trust i {
    font-size: 0.85rem !important;
    flex-shrink: 0;
}

.mega-footer-link {
    font-size: 0.785rem;
    font-weight: 700;
    color: #1D4ED8;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.18);
    text-decoration: none;
    padding: 0.35rem 0.85rem;
    border-radius: 8px;
    transition: all 0.18s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.mega-footer-link:hover {
    color: #FFFFFF;
    background: #1D4ED8;
    border-color: #1D4ED8;
    box-shadow: 0 2px 6px rgba(29, 78, 216, 0.25);
}

.mega-footer-link i {
    transition: transform 0.18s ease;
    display: inline-block;
}

.mega-footer-link:hover i {
    transform: translateX(-3px);
}

[dir="ltr"] .mega-footer-link:hover i {
    transform: translateX(3px);
}

@media (max-width: 1199.98px) {
    .dropdown-menu-mega {
        position: static !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        box-shadow: none !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 12px !important;
        background: #F8FAFC !important;
        padding: 0.75rem !important;
        margin-top: 0.35rem !important;
        margin-bottom: 0.5rem !important;
        max-height: 480px;
        overflow-y: auto;
    }
    .mega-menu-body {
        padding: 0.25rem !important;
        background: transparent !important;
    }
    .mega-menu-row,
    .mega-menu-body > .row {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.25rem !important;
        margin: 0 !important;
    }
    .mega-col {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
        padding: 0 !important;
        border-inline-end: none !important;
        margin-bottom: 0.5rem;
    }
    .mega-col:not(:last-child) {
        border-bottom: 1px solid #E2E8F0 !important;
        padding-bottom: 1rem !important;
        border-inline-end: none !important;
        padding-inline-end: 0 !important;
    }
    .mega-menu-link {
        background: #FFFFFF;
        border: 1px solid #EEF2F6;
        margin-bottom: 0.25rem;
        padding: 0.6rem 0.75rem;
    }
    .mega-menu-link:hover {
        background: #F1F5F9;
        transform: none !important;
    }
    .mega-menu-footer {
        background: #FFFFFF !important;
        border-radius: 8px;
        margin-top: 0.75rem;
        flex-direction: column;
        gap: 0.6rem;
        align-items: stretch !important;
        text-align: center;
        padding: 0.75rem !important;
    }
    .mega-footer-link {
        justify-content: center;
        width: 100%;
    }
    .mega-footer-trust {
        justify-content: center;
        text-align: center;
    }
}

/* Zone 3: Actions (End) */
@media (min-width: 1200px) {
    .navbar-actions-group {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 0.45rem !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 1199.98px) {
    .navbar-actions-group {
        display: none !important;
    }
}

/* Expandable Search Box */
.navbar-search-wrapper {
    position: relative;
}

.navbar-search-box {
    display: flex;
    align-items: center;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 9999px;
    height: 36px;
    padding: 2px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-search-btn {
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748B;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    padding: 0;
}

.navbar-search-btn:hover {
    color: #2563EB;
    background: rgba(37, 99, 235, 0.08);
}

.navbar-search-input,
#navbarSearchInput,
.grc-exec-search-box .navbar-search-input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.84rem;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    caret-color: #111827 !important;
    width: 145px;
    padding: 0 0.5rem;
    opacity: 1 !important;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, padding 0.25s ease;
}

.navbar-search-input:focus,
#navbarSearchInput:focus,
.grc-exec-search-box .navbar-search-input:focus {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    caret-color: #111827 !important;
    opacity: 1 !important;
}

.navbar-search-input::placeholder,
#navbarSearchInput::placeholder,
.grc-exec-search-box .navbar-search-input::placeholder {
    color: #64748B !important;
    -webkit-text-fill-color: #64748B !important;
    opacity: 1 !important;
}

.navbar-search-input::selection,
#navbarSearchInput::selection {
    background-color: rgba(37, 99, 235, 0.2);
    color: #111827;
    -webkit-text-fill-color: #111827;
}

.navbar-search-box.is-open,
.navbar-search-box:focus-within,
.grc-exec-search-box.is-open,
.grc-exec-search-box:focus-within {
    background: #FFFFFF;
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.navbar-search-box.is-open .navbar-search-input,
.navbar-search-box:focus-within .navbar-search-input,
.grc-exec-search-box.is-open .navbar-search-input,
.grc-exec-search-box:focus-within .navbar-search-input {
    width: 145px;
    padding: 0 0.5rem;
    opacity: 1 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

/* Language Switcher Dropdown */
.navbar-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 36px;
    padding: 0 0.65rem;
    border-radius: 8px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
    transition: all 0.15s ease;
    cursor: pointer;
}

.navbar-lang-btn:hover {
    background: #F1F5F9;
    border-color: #CBD5E1;
    color: #0F172A;
}

.navbar-lang-btn .lang-flag {
    font-size: 0.95rem;
    line-height: 1;
}

.navbar-lang-btn .lang-name {
    font-size: 0.78rem;
}

.navbar-lang-dropdown .dropdown-toggle::after {
    font-size: 0.6rem;
    margin-inline-start: 0.25rem;
    vertical-align: middle;
    display: inline-block !important;
}

.navbar-lang-dropdown .dropdown-menu {
    min-width: 155px;
    border-radius: 10px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.1);
    padding: 0.35rem;
}

.navbar-lang-dropdown .dropdown-item {
    border-radius: 6px;
    font-size: 0.8rem;
    padding: 0.45rem 0.65rem;
    color: #334155;
    transition: all 0.15s ease;
}

.navbar-lang-dropdown .dropdown-item:hover {
    background: #F1F5F9;
    color: #1D4ED8;
}

.navbar-lang-dropdown .dropdown-item.active {
    background: rgba(37, 99, 235, 0.08);
    color: #1D4ED8;
    font-weight: 700;
}

/* Compact CTA Button (Corporate Blue) */
.navbar-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 36px;
    padding: 0 0.85rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 700;
    font-family: 'Cairo', system-ui, -apple-system, sans-serif;
    text-decoration: none;
    white-space: nowrap;
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    border: 1px solid #1D4ED8;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-cta-btn:hover {
    background: linear-gradient(135deg, #1D4ED8 0%, #1E40AF 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);
    color: #FFFFFF !important;
}

.navbar-cta-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2);
}

.navbar-cta-btn i {
    font-size: 0.85rem;
}

/* Responsive Rules for Header & Navbar */
.grc-navbar-toggler {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 8px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.grc-navbar-toggler:hover,
.grc-navbar-toggler:focus {
    background: #F1F5F9;
    border-color: #CBD5E1 !important;
}

.grc-toggler-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 18px;
    height: 14px;
}

.grc-toggler-line {
    display: block;
    width: 100%;
    height: 2px;
    background: #1E293B;
    border-radius: 2px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.grc-navbar-toggler[aria-expanded="true"] .grc-toggler-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.grc-navbar-toggler[aria-expanded="true"] .grc-toggler-line:nth-child(2) {
    opacity: 0;
}

.grc-navbar-toggler[aria-expanded="true"] .grc-toggler-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 1399.98px) {
    .navbar-cta-btn {
        padding: 0 0.65rem !important;
        font-size: 0.78rem !important;
        height: 34px !important;
    }
    .navbar-lang-btn {
        padding: 0 0.5rem !important;
        font-size: 0.76rem !important;
        height: 34px !important;
    }
    .navbar-search-box {
        height: 34px !important;
    }
    .navbar-search-btn {
        width: 30px !important;
        height: 30px !important;
    }
}

@media (max-width: 1199.98px) {
    .grc-navbar-collapse {
        background: #FFFFFF;
        border-radius: 14px;
        padding: 1rem 1.15rem;
        border: 1px solid #E2E8F0;
        box-shadow: 0 14px 34px -6px rgba(15, 23, 42, 0.12), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
        margin-top: 0.5rem;
        margin-bottom: 0.75rem;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }

    .grc-navbar-nav {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.25rem !important;
    }

    .grc-navbar-nav .nav-link-grc {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.6rem 0.85rem !important;
        font-size: 0.92rem !important;
        border-radius: 8px;
        color: #1E293B !important;
        white-space: normal !important;
        text-align: start;
    }

    .grc-navbar-nav .nav-link-grc:hover,
    .grc-navbar-nav .nav-link-grc:focus {
        background: #F1F5F9;
        color: #1D4ED8 !important;
    }

    .grc-navbar-nav .nav-link-grc.active {
        background: rgba(37, 99, 235, 0.08) !important;
        color: #1D4ED8 !important;
        font-weight: 700;
    }

    .grc-navbar-nav .nav-link-grc.active::after {
        display: none !important;
    }

    .grc-mobile-search-box {
        background: #F8FAFC;
        border: 1.5px solid #E2E8F0;
        border-radius: 9999px;
        padding: 0.25rem 0.75rem;
        transition: all 0.2s ease;
    }

    .grc-mobile-search-box:focus-within {
        background: #FFFFFF;
        border-color: #2563EB;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    .grc-mobile-search-btn {
        background: none;
        border: none;
        color: #64748B;
        padding: 0.35rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .grc-mobile-search-input,
    .grc-mobile-search-input:focus {
        border: none;
        background: transparent;
        outline: none;
        font-size: 0.88rem;
        padding: 0.35rem 0.5rem;
        color: #111827 !important;
        -webkit-text-fill-color: #111827 !important;
        caret-color: #111827 !important;
        opacity: 1 !important;
    }

    .grc-mobile-search-input::placeholder {
        color: #64748B !important;
        -webkit-text-fill-color: #64748B !important;
        opacity: 1 !important;
    }

    .grc-mobile-cta-wrapper a.btn-primary {
        background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
        border: 1px solid #1D4ED8 !important;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
        color: #FFFFFF !important;
        font-size: 0.92rem;
        font-weight: 700;
    }

    .navbar-lang-dropdown .dropdown-menu {
        max-width: calc(100vw - 24px);
    }
}

@media (max-width: 575.98px) {
    .top-header-bar {
        font-size: 0.72rem;
        padding: 0.25rem 0;
    }
    .topbar-location span {
        max-width: 140px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .topbar-badge-link {
        font-size: 0.7rem;
        padding: 0.12rem 0.45rem;
    }
    .topbar-whatsapp-btn {
        font-size: 0.7rem;
        padding: 0.12rem 0.45rem;
    }
    .navbar-brand-logo {
        height: 32px;
    }
}

/* --- 7. FORM CONTROLS & MODERN CLOUD DROPZONES (Linear Style) --- */
.form-section-card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 22px;
    padding: 2.25rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-tactile);
    transition: all 0.2s ease;
}

@media (min-width: 768px) {
    .form-section-card {
        padding: 2.75rem 3rem;
    }
}

.form-section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.section-number-badge {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.15rem;
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    flex-shrink: 0;
}

/* Inputs, Selects & Textareas Overrides */
.form-control, .form-select {
    font-family: 'Cairo', 'Inter', sans-serif;
    background-color: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 13px !important;
    padding: 0.72rem 1.05rem !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    color: #0F172A !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.form-control:focus, .form-select:focus {
    background-color: #FFFFFF !important;
    border-color: #3B82F6 !important;
    outline: none !important;
    box-shadow: 
        0 0 0 4px rgba(59, 130, 246, 0.15),
        0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.form-label {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--grc-navy-900);
    margin-bottom: 0.45rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.form-label .text-danger {
    color: #EF4444 !important;
    font-size: 1.1rem;
    line-height: 0.8;
}

/* Modern Cloud Dropzone (Linear Style File Input) */
.cloud-dropzone {
    position: relative;
    border: 1.5px dashed #CBD5E1;
    border-radius: 18px;
    background: #F8FAFC;
    padding: 1.5rem 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 155px;
}

.cloud-dropzone:hover {
    border-color: var(--grc-blue-500);
    background: #F0F7FF;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.08);
}

.cloud-dropzone.has-file {
    border-color: var(--grc-emerald-500);
    background: #F0FDF4;
    border-style: solid;
}

.cloud-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.08);
    color: var(--grc-blue-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
}

.cloud-dropzone:hover .cloud-icon-circle {
    background: var(--grc-blue-600);
    color: #FFFFFF;
    transform: scale(1.08);
}

.cloud-dropzone.has-file .cloud-icon-circle {
    background: var(--grc-emerald-600);
    color: #FFFFFF;
}

.file-preview-pill {
    display: none;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.35rem 0.9rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 700;
    background: rgba(5, 150, 105, 0.12);
    color: #047857;
    border: 1px solid rgba(5, 150, 105, 0.25);
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cloud-dropzone.has-file .file-preview-pill {
    display: inline-flex;
}

/* Custom Declaration Tile (Checkboxes) */
.declaration-tile {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 0.85rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    cursor: pointer;
}

.declaration-tile:hover {
    border-color: #93C5FD;
    background: #F8FAFC;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.04);
}

.declaration-tile input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 6px;
    margin-top: 0.25rem;
    flex-shrink: 0;
    accent-color: var(--grc-blue-600);
    cursor: pointer;
}

/* Stepper Pill Cards (Linear Progress) */
.stepper-glow-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    transition: all 0.2s ease;
    height: 100%;
}

.stepper-glow-card.active {
    border-color: #2563EB;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15), 0 8px 24px -4px rgba(37, 99, 235, 0.1);
}

.stepper-glow-card.completed {
    border-color: #10B981;
    background: #F0FDF4;
}

.stepper-num {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
    background: #F1F5F9;
    color: var(--grc-slate-500);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.stepper-glow-card.active .stepper-num {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.stepper-glow-card.completed .stepper-num,
.stepper-glow-card.is-completed .stepper-num {
    background: #10B981;
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}

.stepper-glow-card.is-active {
    border-color: #2563EB;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15), 0 8px 24px -4px rgba(37, 99, 235, 0.1);
}

.stepper-glow-card.is-active .stepper-num {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.stepper-glow-card.is-completed {
    border-color: #10B981;
    background: #F0FDF4;
}

.stepper-glow-card.locked,
.stepper-glow-card.is-locked {
    opacity: 0.5;
    cursor: not-allowed !important;
    background: #F8FAFC !important;
    border-color: #E2E8F0 !important;
    box-shadow: none !important;
}

.stepper-glow-card.locked:hover,
.stepper-glow-card.is-locked:hover {
    transform: none !important;
    box-shadow: none !important;
}

.stepper-glow-card:not(.locked):not(.is-locked) {
    cursor: pointer;
}

.stepper-glow-card.active,
.stepper-glow-card.is-active {
    cursor: default;
}

/* Step Wizard Elements */
.equivalency-step-pane {
    animation: fadeInStep 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@@keyframes fadeInStep {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.step-nav-buttons {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    border: 1px solid #E2E8F0;
    margin-top: 2rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.step-btn-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.85rem 2rem;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 12px;
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: #FFFFFF !important;
    border: none;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.step-btn-next:hover {
    background: linear-gradient(135deg, #1D4ED8 0%, #1E40AF 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

.step-btn-prev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.85rem 1.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 12px;
    background: #FFFFFF;
    color: #475569 !important;
    border: 1.5px solid #CBD5E1;
    transition: all 0.2s ease;
    cursor: pointer;
}

.step-btn-prev:hover {
    background: #F8FAFC;
    color: #0F172A !important;
    border-color: #94A3B8;
}

/* --- 8. FOOTER (Deep Tech Navy) --- */
.footer-grc {
    background: #080D1A;
    color: #94A3B8;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-grc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 350px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.footer-grc h5 {
    color: #FFFFFF;
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 1.25rem;
}

.footer-grc a {
    color: #94A3B8;
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-grc a:hover {
    color: #FFFFFF;
}

.footer-trust-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.6rem 1rem;
    font-size: 0.8125rem;
    color: #CBD5E1;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-contact-link {
    color: #94A3B8 !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.footer-contact-link:hover {
    color: #38BDF8 !important;
    transform: translateY(-1px);
}
/* --- 8.5. UNIFIED CORPORATE SERVICE FORM ARCHITECTURE (Equivalency & CV Standards) --- */
.equivalency-page-bg {
    background-color: var(--grc-ivory, #F8FAFC);
    min-height: 90vh;
}

.equivalency-main-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.06), 0 4px 10px -2px rgba(15, 23, 42, 0.03);
    overflow: hidden;
}

.equivalency-card-header {
    background-color: var(--grc-graphite-dark, #0F172A);
    padding: 2.25rem 2rem;
    position: relative;
    text-align: center;
}

.equivalency-card-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--grc-burgundy, #2563EB);
}

.equivalency-card-header h1,
.equivalency-card-header h2,
.equivalency-card-header h4 {
    color: #FFFFFF !important;
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    margin-bottom: 0.45rem !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.equivalency-card-header p {
    color: #E2E8F0 !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    opacity: 0.95;
    margin-bottom: 0 !important;
}

.equivalency-card-body {
    padding: 2.5rem;
}

@media (max-width: 768px) {
    .equivalency-card-header {
        padding: 1.75rem 1.25rem;
    }
    .equivalency-card-body {
        padding: 1.5rem 1.25rem;
    }
}

.form-section-card {
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 14px !important;
    padding: 0 !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
    overflow: hidden;
    transition: all 0.25s ease;
}

.form-section-card:hover {
    border-color: #CBD5E1 !important;
}

.form-section-card.is-active {
    border-color: #BFDBFE !important;
    box-shadow: 0 4px 16px -2px rgba(37, 99, 235, 0.06) !important;
}

.section-header-clickable {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.15rem 1.35rem;
    background: #FFFFFF;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.section-header-clickable:hover {
    background-color: #F8FAFC;
}

.section-title-group {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.section-number-badge {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background-color: var(--grc-burgundy-soft, #EFF6FF) !important;
    color: var(--grc-burgundy, #2563EB) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    flex-shrink: 0;
    border: 1px solid #BFDBFE !important;
}

.section-collapse-controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.collapse-hint-text {
    font-size: 0.75rem;
    color: #64748B;
    font-weight: 500;
}

.collapse-toggle-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #F1F5F9;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
}

.section-header-clickable:hover .collapse-toggle-icon {
    background-color: #E2E8F0;
    color: #0F172A;
}

.section-header-clickable[aria-expanded="false"] .collapse-toggle-icon {
    transform: rotate(-180deg);
}

.section-content-body {
    padding: 1.5rem 1.5rem 1.75rem 1.5rem;
    border-top: 1px solid #F1F5F9;
    background: #FFFFFF;
}

@media (max-width: 768px) {
    .section-header-clickable {
        padding: 1rem 1.15rem;
    }
    .section-content-body {
        padding: 1.15rem;
    }
}

.grc-custom-input-group {
    border-radius: 10px;
    transition: box-shadow 0.2s ease;
}

.grc-custom-input-group .input-group-text {
    background-color: #F8FAFC !important;
    border: 1.5px solid #CBD5E1 !important;
    color: #64748B !important;
    font-size: 1.05rem !important;
    padding: 0 14px !important;
    transition: all 0.2s ease;
}

.grc-custom-input-group .form-control,
.grc-custom-input-group .form-select {
    border: 1.5px solid #CBD5E1 !important;
    background-color: #FFFFFF !important;
    font-size: 0.92rem !important;
    height: 48px !important;
    color: #0F172A !important;
    transition: all 0.2s ease;
}

[dir="rtl"] .grc-custom-input-group .input-group-text {
    border-left: none !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

[dir="rtl"] .grc-custom-input-group .form-control,
[dir="rtl"] .grc-custom-input-group .form-select {
    border-right: none !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}

[dir="ltr"] .grc-custom-input-group .input-group-text {
    border-right: none !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}

[dir="ltr"] .grc-custom-input-group .form-control,
[dir="ltr"] .grc-custom-input-group .form-select {
    border-left: none !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

.grc-custom-input-group:focus-within {
    box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.12) !important;
}

.grc-custom-input-group:focus-within .input-group-text {
    border-color: #2563EB !important;
    color: #2563EB !important;
    background-color: #EFF6FF !important;
}

.grc-custom-input-group:focus-within .form-control,
.grc-custom-input-group:focus-within .form-select {
    border-color: #2563EB !important;
    outline: none !important;
    box-shadow: none !important;
}

.reassurance-banner {
    background-color: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 12px;
    padding: 0.95rem 1.35rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 2rem;
}

.reassurance-icon {
    font-size: 1.4rem;
    color: #16A34A;
    flex-shrink: 0;
}

.reassurance-text {
    font-size: 0.86rem;
    font-weight: 600;
    color: #166534;
    margin: 0;
    line-height: 1.55;
}

.direct-support-strip {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 1.15rem;
    margin-top: 2rem;
}

.support-pill-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    color: #334155;
}

.support-pill-link:hover {
    border-color: #CBD5E1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
    color: #2563EB;
}

.equivalency-submit-btn {
    min-height: 56px;
    padding: 0.85rem 2rem !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #1E40AF 0%, #2563EB 50%, #1D4ED8 100%) !important;
    border: 1.5px solid #1D4ED8 !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    color: #FFFFFF !important;
    box-shadow: 0 10px 25px -4px rgba(37, 99, 235, 0.45), 0 4px 10px -2px rgba(37, 99, 235, 0.2) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.equivalency-submit-btn:hover {
    background: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 50%, #2563EB 100%) !important;
    box-shadow: 0 14px 32px -2px rgba(37, 99, 235, 0.6), 0 6px 14px -2px rgba(37, 99, 235, 0.3) !important;
    transform: translateY(-2px) !important;
    color: #FFFFFF !important;
}

.equivalency-submit-btn:active {
    transform: translateY(1px) !important;
    box-shadow: 0 6px 16px -2px rgba(37, 99, 235, 0.4) !important;
}

.equivalency-submit-btn i {
    font-size: 1.35rem !important;
    line-height: 1;
    transition: transform 0.2s ease;
}

.equivalency-submit-btn:hover i {
    transform: scale(1.15);
}

/* --- 9. RESUME / CV PAGES UNIFIED STYLING (Corporate Standard 2026) --- */

.grc-page-wrapper {
    background-color: #FAFAFC;
    min-height: 100vh;
}

.grc-main-card {
    background-color: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.02) !important;
}

.grc-sidebar-card {
    background-color: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02) !important;
    z-index: 10;
}

.grc-sidebar-card.sticky-top {
    top: 90px !important;
    z-index: 10 !important;
}

@media (max-width: 991.98px) {
    .grc-sidebar-card.sticky-top {
        position: static !important;
    }
}

/* Light Form Inputs (Unified with Site Standards) */
.form-control, .form-select {
    font-family: 'Cairo', 'Inter', system-ui, sans-serif;
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 8px !important;
    font-size: 0.92rem !important;
    padding: 0.6rem 0.95rem !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.form-control::placeholder {
    color: #94A3B8 !important;
    opacity: 1 !important;
}

.form-control:hover, .form-select:hover {
    border-color: #94A3B8 !important;
}

.form-control:focus, .form-select:focus {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    border-color: #2563EB !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
    outline: none !important;
}

select.form-select {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    cursor: pointer !important;
}

select.form-select option {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    padding: 8px 12px;
}

input[type="date"].form-control::-webkit-calendar-picker-indicator {
    filter: none !important;
    cursor: pointer !important;
    opacity: 0.65;
    transition: opacity 0.2s;
}

input[type="date"].form-control:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

/* Form Validation States */
.form-control.is-invalid, .form-select.is-invalid {
    border-color: #EF4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* Notice Banners & Controls */
.grc-notice-banner {
    border: 1px solid #E2E8F0 !important;
    background-color: #FFFFFF !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.2s ease !important;
}

.grc-notice-banner:hover {
    background-color: #F8FAFC !important;
    border-color: #CBD5E1 !important;
}

.grc-notice-btn {
    background-color: #F1F5F9 !important;
    color: #334155 !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 8px !important;
    width: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    padding: 0 !important;
}

.grc-notice-btn:hover {
    background-color: #E2E8F0 !important;
    color: #1D4ED8 !important;
    border-color: #94A3B8 !important;
}

.grc-notice-btn.active {
    background-color: rgba(37, 99, 235, 0.1) !important;
    border-color: rgba(37, 99, 235, 0.3) !important;
    color: #2563EB !important;
}

/* Stepper Component (Clean Corporate Blue & Slate) */
.grc-stepper-container {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 24px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

.grc-stepper-track {
    position: absolute;
    top: 32px;
    left: 36px;
    right: 36px;
    height: 3px;
    background-color: #E2E8F0;
    z-index: 1;
}

.grc-stepper-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #1D4ED8 0%, #2563EB 100%);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.grc-stepper-node {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 65px;
    cursor: default;
}

.grc-step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    font-family: 'Inter', system-ui, sans-serif;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid;
}

.grc-step-label {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 600;
    max-width: 85px;
    line-height: 1.3;
    transition: color 0.2s;
}

/* Active Step: Corporate Primary Blue */
.grc-stepper-node.active .grc-step-circle {
    background-color: #2563EB;
    color: #FFFFFF;
    border-color: #1D4ED8;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
    transform: scale(1.08);
}
.grc-stepper-node.active .step-check { display: none; }
.grc-stepper-node.active .step-num { display: inline; }
.grc-stepper-node.active .grc-step-label {
    color: #1D4ED8;
    font-weight: 800;
}

/* Completed Step: Deep Navy with Cyan/Blue Check */
.grc-stepper-node.completed .grc-step-circle {
    background-color: #0F172A;
    color: #FFFFFF;
    border-color: #0F172A;
}
.grc-stepper-node.completed .step-check {
    display: inline;
    font-size: 15px;
    font-weight: 900;
    color: #60A5FA;
}
.grc-stepper-node.completed .step-num { display: none; }
.grc-stepper-node.completed .grc-step-label {
    color: #334155;
    font-weight: 600;
}

/* Upcoming Step: Muted Slate / Gray */
.grc-stepper-node.upcoming .grc-step-circle {
    background-color: #F8FAFC;
    color: #94A3B8;
    border-color: #CBD5E1;
}
.grc-stepper-node.upcoming .step-check { display: none; }
.grc-stepper-node.upcoming .step-num { display: inline; }
.grc-stepper-node.upcoming .grc-step-label {
    color: #94A3B8;
    font-weight: 500;
}

/* Button Sizing inside CV Forms */
.grc-main-card .btn-tactile-primary,
.grc-main-card .btn-tactile-secondary {
    padding: 0.65rem 1.6rem !important;
    font-size: 0.92rem !important;
    border-radius: 10px !important;
    min-width: 105px;
}

/* Hide inner ribbon within CV forms per user requirement */
.grc-main-card .german-ribbon-line {
    display: none !important;
}

/* Responsive adjustments */
@media (max-width: 575.98px) {
    .grc-main-card {
        padding: 1.25rem 1rem !important;
        border-radius: 14px !important;
    }
    .grc-stepper-container {
        padding: 12px 10px !important;
    }
    .grc-main-card .btn-tactile-primary,
    .grc-main-card .btn-tactile-secondary {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
}

/* Sidebar Notice smooth expansion */
.grc-sidebar-notice-content {
    animation: grcNoticeFade 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes grcNoticeFade {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 9.1. CV / RESUME PROFESSIONAL REDESIGN (Corporate Standard) --- */

.cv-page-container {
    max-width: 1320px !important;
    width: 96% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(0.75rem, 2vw, 1.25rem);
    padding-right: clamp(0.75rem, 2vw, 1.25rem);
}

@media (min-width: 1200px) {
    .cv-page-container {
        max-width: 1320px !important;
    }
}

@media (min-width: 1440px) {
    .cv-page-container {
        max-width: 1320px !important;
    }
}

/* Desktop Two-Column Proportions:
   Main CV Form (~72–73.5%) | Important Notice Sidebar (~26.5–28%) */
@media (min-width: 992px) {
    .cv-page-container .cv-main-col {
        flex: 0 0 auto;
        width: 72% !important;
    }

    .cv-page-container .cv-sidebar-col {
        flex: 0 0 auto;
        width: 28% !important;
    }
}

@media (min-width: 1280px) {
    .cv-page-container .cv-main-col {
        flex: 0 0 auto;
        width: 73.5% !important;
    }

    .cv-page-container .cv-sidebar-col {
        flex: 0 0 auto;
        width: 26.5% !important;
    }
}

/* Application Type Selection Cards */
.cv-app-type-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border: 2px solid #E2E8F0;
    border-radius: 14px;
    background: #FFFFFF;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    height: 100%;
    position: relative;
    user-select: none;
}

.cv-app-type-card:hover {
    border-color: #93C5FD;
    background-color: #F8FAFC;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.06);
}

.cv-app-type-card.is-selected {
    border-color: #2563EB !important;
    background-color: #EFF6FF !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14), 0 4px 14px rgba(37, 99, 235, 0.08) !important;
}

.cv-app-type-card.is-selected-volunteering {
    border-color: #E11D48 !important;
    background-color: #FFF1F2 !important;
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.14), 0 4px 14px rgba(225, 29, 72, 0.08) !important;
}

.cv-app-type-radio {
    width: 20px;
    height: 20px;
    margin: 0 !important;
    flex-shrink: 0;
    cursor: pointer;
}

.cv-app-type-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #F1F5F9;
    color: #2563EB;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.cv-app-type-card.is-selected .cv-app-type-icon-box {
    background: #2563EB;
    color: #FFFFFF;
}

.cv-app-type-icon-volunteering {
    color: #E11D48;
}

.cv-app-type-card.is-selected-volunteering .cv-app-type-icon-box {
    background: #E11D48;
    color: #FFFFFF;
}

.cv-app-type-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #0F172A;
    line-height: 1.4;
}

/* Stepper Modern Responsive Styling */
.cv-stepper-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.cv-stepper-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 14px !important;
    padding: 0.85rem 0.45rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.48rem !important;
    transition: all 0.2s ease;
    cursor: pointer;
    min-height: 88px;
    justify-content: center !important;
}

.cv-stepper-card:hover:not(.locked):not(.is-locked) {
    border-color: #93C5FD;
    background: #F8FAFC;
    transform: translateY(-1px);
}

.cv-stepper-card.active,
.cv-stepper-card.is-active {
    border-color: #2563EB;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15), 0 4px 12px rgba(37, 99, 235, 0.08);
}

.cv-stepper-card.completed,
.cv-stepper-card.is-completed {
    border-color: #10B981;
    background: #F0FDF4;
}

.cv-stepper-card.locked,
.cv-stepper-card.is-locked {
    opacity: 0.55;
    cursor: not-allowed !important;
    background: #F8FAFC;
    border-color: #E2E8F0;
}

.cv-stepper-card-num,
.cv-stepper-card .stepper-num {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.92rem !important;
    background: #F1F5F9;
    color: #475569;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.cv-stepper-card.active .cv-stepper-card-num,
.cv-stepper-card.is-active .cv-stepper-card-num,
.cv-stepper-card.active .stepper-num,
.cv-stepper-card.is-active .stepper-num {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.cv-stepper-card.completed .cv-stepper-card-num,
.cv-stepper-card.is-completed .cv-stepper-card-num,
.cv-stepper-card.completed .stepper-num,
.cv-stepper-card.is-completed .stepper-num {
    background: #10B981;
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.cv-stepper-card-title,
.cv-stepper-card .stepper-meta-title {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word;
    text-align: center !important;
    display: block;
    width: 100%;
}

.cv-stepper-card .stepper-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.15rem;
    width: 100%;
}

.cv-stepper-card .stepper-meta-step {
    font-size: 0.68rem;
    font-weight: 700;
    color: #64748B;
    line-height: 1.1;
}

@media (max-width: 1199.98px) and (min-width: 768px) {
    .cv-stepper-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .cv-stepper-grid {
        display: none !important;
    }
}

/* Mobile Stepper Tracker */
.cv-mobile-tracker {
    display: none;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 1rem 1.15rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

@media (max-width: 767.98px) {
    .cv-mobile-tracker {
        display: block;
    }
}

.cv-mobile-progress-bar-wrap {
    height: 6px;
    background-color: #F1F5F9;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 0.65rem;
}

.cv-mobile-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #2563EB 0%, #1D4ED8 100%);
    border-radius: 999px;
    transition: width 0.3s ease;
}

/* Form Density & Field Styling */
.cv-section-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1.5px solid #F1F5F9;
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.cv-section-title i {
    color: #2563EB;
}

.cv-field-label {
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    color: #1E293B !important;
    margin-bottom: 0.45rem !important;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.cv-form-control,
.cv-form-select {
    height: 48px !important;
    min-height: 48px !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 10px !important;
    font-size: 0.93rem !important;
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    padding: 0.65rem 1rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.cv-form-control:focus,
.cv-form-select:focus {
    border-color: #2563EB !important;
    box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.15) !important;
    outline: none !important;
}

textarea.cv-form-control {
    height: auto !important;
    min-height: 110px !important;
}

/* Dedicated Bottom Action Bar */
.cv-step-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1.5px solid #F1F5F9;
}

@media (max-width: 575.98px) {
    .cv-step-nav {
        flex-direction: column-reverse;
        gap: 0.75rem;
    }
    .cv-step-nav .step-btn-prev,
    .cv-step-nav .step-btn-next,
    .cv-step-nav .equivalency-submit-btn {
        width: 100% !important;
        justify-content: center;
    }
}

/* ==========================================================================
   2026 LINEAR & STRIPE JOBS SUBSYSTEM AESTHETICS (GRC Corporate)
   ========================================================================== */

/* 1. Ambient Hero Header with localized aura */
.hero-jobs-aura {
    position: relative;
    background: 
        radial-gradient(ellipse at 50% -20%, rgba(37, 99, 235, 0.12) 0%, transparent 65%),
        radial-gradient(circle at 10% 30%, rgba(99, 102, 241, 0.07) 0%, transparent 45%),
        radial-gradient(circle at 90% 40%, rgba(217, 119, 6, 0.04) 0%, transparent 45%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.75) 100%);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

/* 2. Floating Search & Filter Bar */
.floating-search-bar {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 20px;
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.02),
        0 20px 30px -6px rgba(15, 23, 42, 0.07),
        0 0 0 1px rgba(255, 255, 255, 0.9);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.floating-search-bar:focus-within {
    border-color: rgba(37, 99, 235, 0.4);
    box-shadow: 
        0 8px 12px -2px rgba(37, 99, 235, 0.05),
        0 24px 38px -6px rgba(15, 23, 42, 0.1),
        0 0 0 3px rgba(37, 99, 235, 0.08);
}

.floating-input {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    font-size: 0.875rem;
    color: #0F172A;
    transition: all 0.2s ease;
}

.floating-input:focus {
    background: #FFFFFF;
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* 3. Linear-style Bento Job Cards */
.job-card-linear {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.85);
    border-radius: 20px;
    box-shadow: 
        0 2px 4px rgba(15, 23, 42, 0.02),
        0 12px 24px -4px rgba(15, 23, 42, 0.04),
        0 0 0 1px rgba(255, 255, 255, 0.9);
    transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.26s ease, border-color 0.26s ease;
    position: relative;
    overflow: hidden;
}

.job-card-linear:hover {
    transform: translateY(-4px);
    border-color: rgba(37, 99, 235, 0.3);
    box-shadow: 
        0 8px 16px -2px rgba(37, 99, 235, 0.06),
        0 24px 36px -6px rgba(15, 23, 42, 0.09),
        0 0 0 1px rgba(37, 99, 235, 0.15);
}

.job-card-linear::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, rgba(37, 99, 235, 0.6) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.job-card-linear:hover::before {
    opacity: 1;
}

.job-card-closed {
    background: rgba(248, 250, 252, 0.88) !important;
    border-color: rgba(226, 232, 240, 0.9) !important;
}

.job-card-closed:hover {
    transform: translateY(-2px);
    border-color: rgba(203, 213, 225, 1);
    box-shadow: 0 8px 18px -4px rgba(15, 23, 42, 0.05);
}

/* 4. Live Pulsing Status Dots & Pills */
.status-pill-open {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(16, 185, 129, 0.1);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.status-pill-closed {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(244, 63, 94, 0.08);
    color: #BE123C;
    border: 1px solid rgba(244, 63, 94, 0.2);
}

.pulse-dot-green {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #10B981;
    position: relative;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: pulse-green 2s infinite cubic-bezier(0.45, 0, 0.55, 1);
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.pulse-dot-red {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #F43F5E;
}

/* 5. Tactile 3D Buttons */
.btn-tactile-3d-primary {
    background: linear-gradient(180deg, #2563EB 0%, #1D4ED8 100%);
    color: #FFFFFF !important;
    border: 1px solid #1E40AF;
    border-radius: 14px;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 4px 10px rgba(37, 99, 235, 0.25);
    font-weight: 700;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.btn-tactile-3d-primary:hover {
    background: linear-gradient(180deg, #3B82F6 0%, #1D4ED8 100%);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 6px 16px rgba(37, 99, 235, 0.35);
    transform: translateY(-1px);
}

.btn-tactile-3d-primary:active {
    transform: scale(0.98) translateY(1px);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(37, 99, 235, 0.15);
}

.btn-tactile-3d-gold {
    background: linear-gradient(180deg, #F59E0B 0%, #D97706 100%);
    color: #FFFFFF !important;
    border: 1px solid #B45309;
    border-radius: 14px;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 4px 12px rgba(217, 119, 6, 0.28);
    font-weight: 700;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-tactile-3d-gold:hover {
    background: linear-gradient(180deg, #FBBF24 0%, #D97706 100%);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 6px 18px rgba(217, 119, 6, 0.38);
    transform: translateY(-1px);
}

.btn-tactile-3d-gold:active {
    transform: scale(0.98) translateY(1px);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(217, 119, 6, 0.2);
}

/* 6. Cloud Dropzone for Resume Upload */
.cloud-dropzone-box {
    border: 2px dashed #CBD5E1;
    background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
    border-radius: 20px;
    padding: 2.25rem 1.5rem;
    text-align: center;
    transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    position: relative;
}

.cloud-dropzone-box:hover,
.cloud-dropzone-box.dragover {
    border-color: #2563EB;
    background: #EFF6FF;
    transform: scale(1.01);
}

.cloud-dropzone-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: #FFFFFF;
    color: #2563EB;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 1rem;
    transition: transform 0.2s ease;
}

.cloud-dropzone-box:hover .cloud-dropzone-icon {
    transform: translateY(-3px) scale(1.05);
}

/* 7. Shimmer Sweep Animation */
.shimmer-badge {
    position: relative;
    overflow: hidden;
}

.shimmer-badge::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: shimmerSweep 3.5s infinite;
}

@keyframes shimmerSweep {
    0% { transform: translateX(-100%); }
    25% { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}





/* ==========================================================================
   ULTRA-PREMIUM 2026 JOB CARD & COMPANY LOGO SYSTEM (Linear & Stripe Aesthetics)
   ========================================================================== */

/* 1. Ultra-Premium Job Card (.job-card-ultra) */
.job-card-ultra {
    background: #FFFFFF;
    border: 1px solid rgba(226, 232, 240, 0.85);
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 8px 24px -4px rgba(15, 23, 42, 0.04);
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.job-card-ultra:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(37, 99, 235, 0.2);
    border-color: rgba(37, 99, 235, 0.3);
}

.job-card-ultra-closed {
    background: #F8FAFC !important;
    border-color: rgba(226, 232, 240, 0.9) !important;
    opacity: 0.92;
}

.job-card-ultra-closed:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 20px -4px rgba(15, 23, 42, 0.05);
}

/* 2. Company Logo Container (56px x 56px) */
.company-logo-box-56 {
    width: 56px;
    height: 56px;
    min-width: 56px;
    max-width: 56px;
    border-radius: 14px;
    background: #F8FAFC;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03), 0 2px 4px rgba(15, 23, 42, 0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.company-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    transition: transform 0.2s ease;
}

.job-card-ultra:hover .company-logo-img {
    transform: scale(1.06);
}

/* 3. Luxury Avatar Placeholder */
.company-avatar-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cairo', 'Inter', system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    line-height: 1;
    letter-spacing: -0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    border-radius: 13px;
}

/* 4. Minimalist Glass Pills */
.pill-glass-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #F8FAFC;
    color: #475569;
    border: 1px solid rgba(226, 232, 240, 0.9);
    transition: all 0.18s ease;
}

.pill-glass-meta:hover {
    background: #F1F5F9;
    color: #0F172A;
}

.pill-glass-sector {
    background: rgba(37, 99, 235, 0.06);
    color: #1D4ED8;
    border: 1px solid rgba(37, 99, 235, 0.18);
}

.pill-glass-remote {
    background: rgba(14, 165, 233, 0.08);
    color: #0369A1;
    border: 1px solid rgba(14, 165, 233, 0.22);
}

.pill-glass-open {
    background: rgba(16, 185, 129, 0.08);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.22);
    font-weight: 700;
}

.pill-glass-closed {
    background: rgba(244, 63, 94, 0.07);
    color: #BE123C;
    border: 1px solid rgba(244, 63, 94, 0.2);
    font-weight: 700;
}

/* 5. Minimalist Action Button with Hover Slide */
.btn-ultra-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border-radius: 12px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0F172A;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
}

.btn-ultra-action:hover {
    background: #0F172A;
    color: #FFFFFF !important;
    border-color: #0F172A;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.btn-ultra-action .arrow-icon {
    transition: transform 0.2s ease;
}

.btn-ultra-action:hover .arrow-icon {
    transform: translateX(-4px);
}

[dir="ltr"] .btn-ultra-action:hover .arrow-icon {
    transform: translateX(4px);
}


/* ==========================================================================
   2026 EXECUTIVE RE-LAYOUT FOR JOBS (Filter Bar, Job Cards, Editorial Details)
   ========================================================================== */

/* 1. Filter Bar */
.filter-bar-executive {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 6px 16px -4px rgba(15, 23, 42, 0.03);
}

.filter-input-48 {
    height: 48px !important;
    border-radius: 12px !important;
    border: 1px solid #CBD5E1 !important;
    background-color: #FFFFFF !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #1E293B !important;
    transition: all 0.2s ease !important;
}

.filter-input-48:focus {
    border-color: #2563EB !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
    outline: none !important;
}

.filter-btn-royal {
    height: 48px;
    background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 100%);
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 0.875rem;
    border: none;
    border-radius: 12px;
    padding: 0 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
    white-space: nowrap;
    text-decoration: none;
}

.filter-btn-royal:hover {
    background: linear-gradient(135deg, #1E40AF 0%, #1D4ED8 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
    color: #FFFFFF !important;
}

.filter-btn-reset {
    height: 48px;
    width: 48px;
    border-radius: 12px;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
    color: #64748B;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    text-decoration: none;
}

.filter-btn-reset:hover {
    background: #E2E8F0;
    color: #0F172A;
}

/* Modern Executive Search Console */
.jobs-search-box {
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 16px;
    padding: 1.6rem 1.75rem 1.4rem 1.75rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.jobs-search-box:hover {
    border-color: #CBD5E1;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

.search-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #E2E8F0;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.search-box-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    color: #2563EB;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    border: 1px solid #BFDBFE;
}

.search-box-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0;
    letter-spacing: -0.01em;
}

.search-box-subtitle {
    font-size: 0.82rem;
    color: #64748B;
    font-weight: 500;
    display: block;
    margin-top: 2px;
}

.search-field-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 0.45rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.grc-filter-input-group {
    border-radius: 10px;
    background: #FFFFFF;
    transition: box-shadow 0.2s ease;
}

.grc-filter-input-group .input-group-text {
    background-color: #F8FAFC !important;
    border: 1.5px solid #CBD5E1 !important;
    color: #64748B !important;
    font-size: 0.95rem !important;
    padding: 0 13px !important;
    transition: all 0.2s ease;
}

.grc-filter-input-group .form-control,
.grc-filter-input-group .form-select {
    border: 1.5px solid #CBD5E1 !important;
    background-color: #FFFFFF !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    height: 46px !important;
    color: #0F172A !important;
    transition: all 0.2s ease;
}

.grc-filter-input-group .form-control::placeholder {
    color: #94A3B8 !important;
    font-size: 0.82rem !important;
}

[dir="rtl"] .grc-filter-input-group .input-group-text {
    border-left: none !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

[dir="rtl"] .grc-filter-input-group .form-control,
[dir="rtl"] .grc-filter-input-group .form-select {
    border-right: none !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}

[dir="ltr"] .grc-filter-input-group .input-group-text {
    border-right: none !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}

[dir="ltr"] .grc-filter-input-group .form-control,
[dir="ltr"] .grc-filter-input-group .form-select {
    border-left: none !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

.grc-filter-input-group:focus-within {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
    border-radius: 10px;
}

.grc-filter-input-group:focus-within .input-group-text {
    border-color: #2563EB !important;
    color: #2563EB !important;
    background-color: #EFF6FF !important;
}

.grc-filter-input-group:focus-within .form-control,
.grc-filter-input-group:focus-within .form-select {
    border-color: #2563EB !important;
    outline: none !important;
    box-shadow: none !important;
}

.remote-toggle-capsule {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    padding: 0.45rem 0.95rem;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease;
}

.remote-toggle-capsule:hover {
    border-color: #CBD5E1;
    background: #F8FAFC;
}

.remote-toggle-capsule .form-check-input {
    cursor: pointer;
    width: 2.2rem;
    height: 1.15rem;
}

.remote-toggle-capsule .form-check-input:checked {
    background-color: #2563EB;
    border-color: #2563EB;
}

.filter-btn-search {
    height: 46px;
    background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 100%);
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 0.88rem;
    border: none;
    border-radius: 10px;
    padding: 0 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.22);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.filter-btn-search:hover {
    background: linear-gradient(135deg, #1E40AF 0%, #1D4ED8 100%);
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(37, 99, 235, 0.32);
    color: #FFFFFF !important;
}

.filter-btn-reset-text {
    height: 46px;
    border-radius: 10px;
    border: 1.5px solid #CBD5E1;
    background: #FFFFFF;
    color: #64748B;
    font-weight: 600;
    font-size: 0.86rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0 1.15rem;
    transition: all 0.2s ease;
    text-decoration: none;
}

.filter-btn-reset-text:hover {
    background: #F1F5F9;
    border-color: #94A3B8;
    color: #0F172A;
}

/* 2. Executive Job Card */
.job-card-executive {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    padding: 1.35rem 1.65rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
    transition: all 0.22s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.job-card-executive:hover {
    border-color: #93C5FD;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -4px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(37, 99, 235, 0.15);
}

.job-card-executive.closed {
    background: #F8FAFC;
    border-color: #E2E8F0;
    opacity: 0.92;
}

.job-card-executive.closed:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.05);
}

/* 60x60 Logo Container */
.job-logo-60 {
    width: 60px;
    height: 60px;
    min-width: 60px;
    max-width: 60px;
    border-radius: 14px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 6px;
    position: relative;
    flex-shrink: 0;
}

.job-logo-60 img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.job-logo-avatar {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    border-radius: 12px;
}

/* Card Content Details */
.job-company-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
}

.job-company-name {
    color: #64748B;
    font-size: 0.85rem;
    font-weight: 600;
}

.job-status-pill-soft {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
}

.job-status-pill-soft.open {
    background: #ECFDF5;
    color: #047857;
    border: 1px solid #A7F3D0;
}

.job-status-pill-soft.closed {
    background: #FEF2F2;
    color: #B91C1C;
    border: 1px solid #FECACA;
}

.job-title-link {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.15s ease;
    display: block;
    margin-bottom: 0.5rem;
}

.job-title-link:hover {
    color: #1D4ED8;
}

.job-pill-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 8px;
    font-size: 0.775rem;
    font-weight: 600;
    background: #F1F5F9;
    color: #475569;
    border: 1px solid #E2E8F0;
}

.job-pill-tag.sector {
    background: rgba(37, 99, 235, 0.06);
    color: #1D4ED8;
    border-color: rgba(37, 99, 235, 0.16);
}

.job-pill-tag.remote {
    background: rgba(14, 165, 233, 0.08);
    color: #0369A1;
    border-color: rgba(14, 165, 233, 0.2);
}

/* Action Button */
.btn-job-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.65rem 1.35rem;
    height: 44px;
    background: #EFF6FF;
    color: #1D4ED8 !important;
    border: 1px solid #BFDBFE;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-job-action:hover {
    background: #1D4ED8;
    color: #FFFFFF !important;
    border-color: #1D4ED8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.22);
}

.btn-job-action.closed-btn {
    background: #F8FAFC;
    color: #64748B !important;
    border-color: #E2E8F0;
}

.btn-job-action.closed-btn:hover {
    background: #64748B;
    color: #FFFFFF !important;
    border-color: #64748B;
}

@media (max-width: 767.98px) {
    .job-card-executive {
        flex-direction: column;
        align-items: stretch;
        gap: 1.15rem;
        padding: 1.15rem;
    }
    .btn-job-action {
        width: 100%;
    }
}

/* 3. Editorial Layout for Details Page */
.editorial-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 2.25rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

.job-meta-clean {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: #64748B;
    font-weight: 500;
}

.meta-clean-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.meta-clean-dot {
    color: #CBD5E1;
}

.editorial-section {
    margin-bottom: 2.25rem;
}

.editorial-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 1rem;
    font-family: 'Cairo', sans-serif;
}

.editorial-accent-bar {
    width: 4px;
    height: 22px;
    background: linear-gradient(180deg, #2563EB 0%, #1D4ED8 100%);
    border-radius: 4px;
    display: inline-block;
    flex-shrink: 0;
}

.editorial-body {
    color: #334155;
    font-size: 0.975rem;
    line-height: 1.85;
    font-weight: 500;
}

.editorial-paragraph {
    margin-bottom: 0.85rem;
    color: #334155;
}

.editorial-bullet-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
}

.editorial-bullet-list li {
    position: relative;
    padding-right: 1.5rem;
    margin-bottom: 0.6rem;
    color: #334155;
    line-height: 1.75;
}

[dir="ltr"] .editorial-bullet-list li {
    padding-right: 0;
    padding-left: 1.5rem;
}

.editorial-bullet-list li::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0.65rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2563EB;
}

[dir="ltr"] .editorial-bullet-list li::before {
    right: auto;
    left: 0;
}

/* Share Pill Buttons */
.share-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.95rem;
    border-radius: 10px;
    font-size: 0.775rem;
    font-weight: 700;
    background: #F8FAFC;
    color: #475569;
    border: 1px solid #E2E8F0;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.share-pill-btn:hover {
    background: #0F172A;
    color: #FFFFFF !important;
    border-color: #0F172A;
}

.share-pill-btn.whatsapp:hover {
    background: #16A34A;
    color: #FFFFFF !important;
    border-color: #16A34A;
}

.share-pill-btn.linkedin:hover {
    background: #0A66C2;
    color: #FFFFFF !important;
    border-color: #0A66C2;
}

/* Royal Blue Apply Button (Corporate Identity - No Orange) */
.btn-royal-blue {
    background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 100%);
    color: #FFFFFF !important;
    border: none;
    font-weight: 800;
    font-size: 0.95rem;
    border-radius: 12px;
    padding: 0.85rem 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
    text-decoration: none;
}

.btn-royal-blue:hover {
    background: linear-gradient(135deg, #1E40AF 0%, #1D4ED8 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.4);
    color: #FFFFFF !important;
}

/* Sidebar Key-Value Snapshot */
.snapshot-clean-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.snapshot-clean-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #F1F5F9;
    font-size: 0.85rem;
}

.snapshot-clean-item:last-child {
    border-bottom: none;
}

.snapshot-clean-key {
    color: #64748B;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 500;
}

.snapshot-clean-val {
    color: #0F172A;
    font-weight: 700;
}

/* ==========================================================================
   Services Directory Executive Grid (Corporate Standard 2026)
   ========================================================================== */

.hero-services-header {
    background: 
        radial-gradient(ellipse at 50% -20%, rgba(37, 99, 235, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    border-bottom: 1px solid #E2E8F0;
    padding: 3.5rem 0 3rem;
    margin-bottom: 2.5rem;
}

.service-card-executive {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 1.85rem 1.65rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.03);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.service-card-executive::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    transition: background 0.25s ease;
}

.service-card-executive:hover {
    transform: translateY(-4px);
    border-color: #93C5FD;
    box-shadow: 0 16px 32px -4px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(37, 99, 235, 0.04);
}

.service-card-executive:hover::before {
    background: #1D4ED8;
}

.service-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.service-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    color: #1D4ED8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.service-card-executive:hover .service-card-icon {
    background: #1D4ED8;
    color: #FFFFFF;
    border-color: #1D4ED8;
    transform: scale(1.05);
}

.service-card-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 0.65rem;
    line-height: 1.4;
    transition: color 0.18s ease;
}

.service-card-title a {
    color: inherit;
    text-decoration: none;
}

.service-card-executive:hover .service-card-title a {
    color: #1D4ED8;
}

.service-card-desc {
    font-size: 0.885rem;
    color: #64748B;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.service-card-footer {
    margin-top: auto;
    padding-top: 1.15rem;
    border-top: 1px solid #F1F5F9;
}

.service-card-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    color: #1D4ED8;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card-action i {
    font-size: 0.95rem;
    transition: transform 0.2s ease;
}

.service-card-executive:hover .service-card-action {
    background: #1D4ED8;
    color: #FFFFFF;
    border-color: #1D4ED8;
}

[dir="rtl"] .service-card-executive:hover .service-card-action i {
    transform: translateX(-4px);
}

[dir="ltr"] .service-card-executive:hover .service-card-action i {
    transform: translateX(4px);
}

/* ==========================================================================
   GRC REUSABLE "OTHER" CONDITIONAL INPUT PATTERN
   Quiet, modern transition, accessible focus states, RTL/LTR compliant
   ========================================================================== */
.grc-other-container {
    margin-top: 0.5rem;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.grc-other-container.grc-other-visible {
    animation: grcOtherFadeIn 0.25s ease forwards;
}

@keyframes grcOtherFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.grc-other-container .form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.25rem;
}

.grc-other-container .grc-other-input {
    border-radius: 0.5rem;
    font-size: 0.875rem;
    border: 1px solid #cbd5e1;
    background-color: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.grc-other-container .grc-other-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    outline: none;
}

.grc-other-container .grc-other-val {
    font-size: 0.75rem;
    margin-top: 0.25rem;
    display: block;
}

/* ==========================================================================
   GRC HOME PAGE EXECUTIVE DESIGN SYSTEM
   High-Contrast German Institutional Visual Standard
   ========================================================================== */

/* 1. Hero German Identity Badge */
.grc-hero-badge {
    background: #0F172A;
    color: #F8FAFC;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
    font-size: 0.84rem;
    letter-spacing: 0.02em;
}

.de-flag-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.de-flag-dots .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.de-flag-dots .de-black { background: #000000; }
.de-flag-dots .de-red   { background: #DD0000; }
.de-flag-dots .de-gold  { background: #FFCE00; }

.grc-portals-wrapper {
    margin-top: 2.25rem;
}

.grc-portals-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #E2E8F0;
    padding: 0.4rem 1.15rem;
    border-radius: 9999px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}

/* 2. Hero 3 Portals Cards */
.grc-portal-card {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 20px;
    padding: 1.85rem 1.65rem 1.5rem 1.65rem;
    position: relative;
    overflow: hidden;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
}

.grc-portal-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    transition: all 0.25s ease;
}

.portal-individuals::before { background: linear-gradient(90deg, #1D4ED8, #3B82F6); }
.portal-employers::before   { background: linear-gradient(90deg, #0F172A, #334155); }
.portal-institutions::before { background: linear-gradient(90deg, #0284C7, #06B6D4); }

.grc-portal-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.1);
}

.portal-individuals:hover { border-color: #93C5FD; }
.portal-employers:hover   { border-color: #94A3B8; }
.portal-institutions:hover { border-color: #7DD3FC; }

.portal-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.portal-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.grc-portal-card:hover .portal-icon-box {
    transform: scale(1.06);
}

.portal-icon-blue  { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
.portal-icon-slate { background: #F1F5F9; color: #0F172A; border: 1px solid #CBD5E1; }
.portal-icon-cyan  { background: #F0FDF4; color: #0284C7; border: 1px solid #BAE6FD; }

.portal-category-pill {
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    letter-spacing: 0.01em;
}

.pill-blue  { background: #EFF6FF; color: #1D4ED8; }
.pill-slate { background: #F8FAFC; color: #334155; border: 1px solid #E2E8F0; }
.pill-cyan  { background: #F0F9FF; color: #0369A1; }

.portal-title {
    font-size: 1.22rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 0.6rem;
    letter-spacing: -0.01em;
}

.portal-desc {
    font-size: 0.9rem;
    color: #64748B;
    line-height: 1.65;
    margin-bottom: 1.35rem;
}

.portal-card-footer {
    margin-top: auto;
    padding-top: 0.95rem;
    border-top: 1px solid #F1F5F9;
}

.portal-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.portal-arrow {
    transition: transform 0.2s ease;
}

[dir="rtl"] .grc-portal-card:hover .portal-arrow { transform: translateX(-4px); }
[dir="ltr"] .grc-portal-card:hover .portal-arrow { transform: translateX(4px); }

/* 3. Hero Action Cluster */
.grc-hero-actions {
    margin-top: 2rem;
}

/* 4. German Trust Strip */
.grc-trust-strip {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 18px;
    padding: 1.25rem 1.65rem;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04);
}

.grc-trust-col {
    padding: 0.6rem 0.85rem;
}

@media (min-width: 768px) {
    .grc-trust-col:not(:last-child) {
        border-inline-end: 1px solid #E2E8F0;
    }
}

.grc-trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
}

.grc-trust-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.bg-blue-soft    { background: #EFF6FF; border: 1px solid #BFDBFE; }
.bg-amber-soft   { background: #FEF3C7; border: 1px solid #FDE68A; }
.bg-emerald-soft { background: #ECFDF5; border: 1px solid #A7F3D0; }
.bg-slate-soft   { background: #F1F5F9; border: 1px solid #CBD5E1; }
.bg-cyan-soft    { background: #F0F9FF; border: 1px solid #BAE6FD; }

.grc-trust-title {
    font-size: 0.9rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.3;
}

.grc-trust-sub {
    font-size: 0.78rem;
    color: #64748B;
    font-weight: 500;
}

/* 5. Section Badges */
.grc-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #1D4ED8;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    padding: 0.35rem 0.95rem;
    border-radius: 9999px;
}

/* 6. Solution Track Cards */
.grc-track-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 20px;
    padding: 2.25rem 1.85rem;
    position: relative;
    overflow: hidden;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.03);
}

.grc-track-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.track-blue::before  { background: linear-gradient(90deg, #1D4ED8, #3B82F6); }
.track-slate::before { background: linear-gradient(90deg, #0F172A, #475569); }
.track-cyan::before  { background: linear-gradient(90deg, #0284C7, #06B6D4); }

.grc-track-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.08);
}

.track-blue:hover  { border-color: #93C5FD; }
.track-slate:hover { border-color: #94A3B8; }
.track-cyan:hover  { border-color: #7DD3FC; }

.track-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.track-icon-box {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.track-kicker {
    font-size: 0.75rem;
    font-weight: 700;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}

.track-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0;
}

.track-summary {
    font-size: 0.9rem;
    color: #64748B;
    line-height: 1.65;
    margin-bottom: 1.35rem;
}

.track-features {
    padding: 0;
}

.track-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.88rem;
    color: #334155;
    line-height: 1.6;
    margin-bottom: 0.85rem;
}

.track-features li i {
    font-size: 1.15rem;
    margin-top: 1px;
    flex-shrink: 0;
}

/* 7. Feature Capsules (2x2 Grid) */
.grc-feature-capsule {
    display: flex;
    align-items: flex-start;
    gap: 0.95rem;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 16px;
    padding: 1.25rem;
    height: 100%;
    transition: all 0.2s ease;
}

.grc-feature-capsule:hover {
    border-color: #CBD5E1;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

.feature-capsule-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #1D4ED8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.feature-capsule-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 0.3rem;
}

.feature-capsule-desc {
    font-size: 0.82rem;
    color: #64748B;
    line-height: 1.55;
    margin: 0;
}

/* 8. German Institutional Certificate Card */
.grc-certificate-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 22px;
    padding: 2.25rem 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 32px -4px rgba(15, 23, 42, 0.07);
}

.certificate-top-ribbon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #000000 0%, #000000 33%, #DD0000 33%, #DD0000 66%, #FFCE00 66%, #FFCE00 100%);
}

.certificate-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1.25rem;
    border-bottom: 1.5px solid #F1F5F9;
    margin-bottom: 1.35rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.certificate-seal-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #1D4ED8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.certificate-title {
    font-size: 1.18rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0;
    letter-spacing: -0.01em;
}

.certificate-subtitle {
    font-size: 0.8rem;
    color: #64748B;
    font-weight: 600;
    display: block;
    margin-top: 2px;
}

.certificate-body {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
}

.cert-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: #F8FAFC;
    border: 1px solid #F1F5F9;
    font-size: 0.88rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cert-label {
    color: #64748B;
    font-weight: 600;
}

.cert-value {
    color: #0F172A;
    font-weight: 800;
}

.certificate-footer {
    margin-top: 1.35rem;
    padding-top: 1rem;
    border-top: 1px solid #F1F5F9;
    font-size: 0.8rem;
    color: #64748B;
    line-height: 1.5;
    display: flex;
    align-items: center;
}

/* 9. 5-Pillar Showcase Cards */
.grc-pillar-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 20px;
    padding: 2rem 1.75rem;
    position: relative;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.03);
}

.grc-pillar-card:hover {
    transform: translateY(-4px);
    border-color: #93C5FD;
    box-shadow: 0 16px 34px -4px rgba(15, 23, 42, 0.08);
}

.pillar-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.pillar-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.bg-blue-subtle    { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
.bg-emerald-subtle { background: #ECFDF5; color: #059669; border: 1px solid #A7F3D0; }
.bg-amber-subtle   { background: #FEF3C7; color: #B45309; border: 1px solid #FDE68A; }
.bg-rose-subtle    { background: #FFF1F2; color: #E11D48; border: 1px solid #FECDD3; }
.bg-cyan-subtle    { background: #F0F9FF; color: #0284C7; border: 1px solid #BAE6FD; }

.pillar-number {
    font-size: 1.4rem;
    font-weight: 900;
    color: #CBD5E1;
    font-family: 'Inter', system-ui, sans-serif;
    letter-spacing: -0.02em;
}

.pillar-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 0.65rem;
    line-height: 1.35;
}

.pillar-desc {
    font-size: 0.9rem;
    color: #64748B;
    line-height: 1.65;
    margin-bottom: 1.35rem;
}

.pillar-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.pillar-arrow {
    transition: transform 0.2s ease;
}

[dir="rtl"] .grc-pillar-card:hover .pillar-arrow { transform: translateX(-4px); }
[dir="ltr"] .grc-pillar-card:hover .pillar-arrow { transform: translateX(4px); }

/* 10. Step Roadmap Cards */
.grc-step-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 20px;
    padding: 2rem 1.65rem;
    position: relative;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.03);
}

.grc-step-card:hover {
    border-color: #93C5FD;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -4px rgba(37, 99, 235, 0.09);
}

.step-card-num {
    font-size: 2.4rem;
    font-weight: 900;
    color: #2563EB;
    opacity: 0.25;
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1;
    margin-bottom: 0.75rem;
    transition: opacity 0.2s ease;
}

.grc-step-card:hover .step-card-num {
    opacity: 0.9;
}

.step-card-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2563EB;
    margin-bottom: 0.95rem;
}

.step-card-title {
    font-size: 1.08rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 0.6rem;
}

.step-card-desc {
    font-size: 0.88rem;
    color: #64748B;
    line-height: 1.6;
    margin: 0;
}

/* ==========================================================================
   ABOUT PAGE (من نحن) EXECUTIVE DESIGN SYSTEM
   High-Contrast German Institutional Visual Standard
   ========================================================================== */
.about-container {
    max-width: 1240px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

.max-w-4xl[style*="max-width: 960px"],
.max-w-4xl.mx-auto {
    max-width: 1240px !important;
}

/* Bridge enhancements for About page cards */
div.container.section-padding.py-5 .card.border-0.shadow-sm.rounded-4 {
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 24px !important;
    padding: 2.5rem !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.25s ease !important;
    position: relative;
    overflow: hidden;
}

div.container.section-padding.py-5 .card.border-0.shadow-sm.rounded-4:hover {
    border-color: #CBD5E1 !important;
    box-shadow: 0 12px 32px -4px rgba(15, 23, 42, 0.08) !important;
}

div.container.section-padding.py-5 .p-4.bg-slate-50.rounded-4.border {
    background: radial-gradient(circle at top right, #1E293B, #0F172A) !important;
    color: #F8FAFC !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12) !important;
}

div.container.section-padding.py-5 .p-4.bg-slate-50.rounded-4.border .text-dark {
    color: #FFFFFF !important;
}

div.container.section-padding.py-5 .p-4.bg-slate-50.rounded-4.border .text-muted {
    color: #94A3B8 !important;
}

div.container.section-padding.py-5 .p-4.bg-slate-50.rounded-4.border .display-4 {
    color: #60A5FA !important;
}

div.container.section-padding.py-5 .p-3.bg-light.rounded-3 {
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    transition: all 0.22s ease !important;
}

div.container.section-padding.py-5 .p-3.bg-light.rounded-3:hover {
    background: #FFFFFF !important;
    border-color: #93C5FD !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -2px rgba(15, 23, 42, 0.06);
}

div.container.section-padding.py-5 .p-3.border.rounded-3 {
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 18px !important;
    padding: 1.75rem 1.5rem !important;
    transition: all 0.25s ease !important;
}

div.container.section-padding.py-5 .p-3.border.rounded-3:hover {
    border-color: #93C5FD !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -4px rgba(37, 99, 235, 0.08);
}

.about-hero-badge {
    background: #0F172A;
    color: #F8FAFC;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
    font-size: 0.84rem;
    letter-spacing: 0.02em;
}

.about-hero-title {
    font-size: clamp(1.85rem, 3.5vw + 0.5rem, 2.85rem) !important;
    line-height: 1.3 !important;
}

.about-hero-desc {
    font-size: clamp(0.95rem, 1.2vw + 0.5rem, 1.25rem) !important;
    line-height: 1.85 !important;
}

/* Primary Elevated Cards */
.about-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 20px;
    padding: 1.5rem 1.25rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04);
    transition: all 0.25s ease;
    margin-bottom: 1.75rem;
}

@media (min-width: 768px) {
    .about-card {
        border-radius: 24px;
        padding: 2.25rem 2rem;
        margin-bottom: 2.25rem;
    }
}

@media (min-width: 992px) {
    .about-card {
        padding: 2.75rem 2.5rem;
        margin-bottom: 2.5rem;
    }
}

.about-card:hover {
    border-color: #CBD5E1;
    box-shadow: 0 12px 32px -4px rgba(15, 23, 42, 0.07);
}

.about-card-top-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}
.accent-blue { background: linear-gradient(90deg, #1D4ED8, #3B82F6); }
.accent-german { background: linear-gradient(90deg, #000000 0%, #000000 33%, #DD0000 33%, #DD0000 66%, #FFCE00 66%, #FFCE00 100%); }
.accent-emerald { background: linear-gradient(90deg, #059669, #10B981); }
.accent-slate { background: linear-gradient(90deg, #0F172A, #475569); }
.accent-cyan { background: linear-gradient(90deg, #0284C7, #06B6D4); }

.about-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.35rem 0.95rem;
    border-radius: 9999px;
    margin-bottom: 1.25rem;
}
.tag-blue { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
.tag-emerald { background: #ECFDF5; color: #059669; border: 1px solid #A7F3D0; }
.tag-amber { background: #FEF3C7; color: #B45309; border: 1px solid #FDE68A; }
.tag-slate { background: #F1F5F9; color: #334155; border: 1px solid #CBD5E1; }
.tag-cyan { background: #F0F9FF; color: #0284C7; border: 1px solid #BAE6FD; }

/* Frankfurt Institutional Side Card */
.about-frankfurt-box {
    background: radial-gradient(circle at top right, #1E293B, #0F172A);
    color: #F8FAFC;
    border-radius: 20px;
    padding: 1.5rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .about-frankfurt-box {
        padding: 2.25rem 2rem;
    }
}

.about-frankfurt-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #000000 0%, #000000 33%, #DD0000 33%, #DD0000 66%, #FFCE00 66%, #FFCE00 100%);
}

.frankfurt-box-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #60A5FA;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 1.25rem;
}

/* Core Values 3-Grid Cards */
.about-value-card {
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 18px;
    padding: 1.75rem 1.5rem;
    height: 100%;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
}

.about-value-card:hover {
    background: #FFFFFF;
    border-color: #93C5FD;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -2px rgba(15, 23, 42, 0.06);
}

.value-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: 1.15rem;
}

/* 4-Step Methodology Roadmap */
.about-step-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 18px;
    padding: 1.75rem 1.4rem;
    height: 100%;
    transition: all 0.25s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.about-step-card:hover {
    border-color: #93C5FD;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -4px rgba(37, 99, 235, 0.09);
}

.about-step-num {
    font-size: 2.2rem;
    font-weight: 900;
    color: #2563EB;
    opacity: 0.3;
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1;
    margin-bottom: 0.65rem;
    transition: opacity 0.2s ease;
}

.about-step-card:hover .about-step-num {
    opacity: 0.9;
}

.about-step-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.about-step-desc {
    font-size: 0.86rem;
    color: #64748B;
    line-height: 1.6;
    margin: 0;
}

/* Audience Cards (لمن نقدم خدماتنا) */
.about-audience-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 20px;
    padding: 2rem 1.75rem;
    height: 100%;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.about-audience-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.08);
}

.about-audience-card.audience-individuals:hover { border-color: #93C5FD; }
.about-audience-card.audience-employers:hover   { border-color: #94A3B8; }
.about-audience-card.audience-institutions:hover { border-color: #7DD3FC; }

.audience-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    margin-bottom: 1.25rem;
}

/* Vital Sectors Capsules */
.about-sector-capsule {
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 16px;
    padding: 1.25rem 1.4rem;
    height: 100%;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 1.15rem;
}

.about-sector-capsule:hover {
    background: #FFFFFF;
    border-color: #93C5FD;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -2px rgba(15, 23, 42, 0.06);
}

.sector-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

/* Bottom Executive CTA Box */
.about-cta-banner {
    background: radial-gradient(circle at 50% 0%, #1E293B, #0F172A);
    color: #F8FAFC;
    border-radius: 20px;
    padding: 2.25rem 1.25rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.2);
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .about-cta-banner {
        padding: 3rem 2rem;
        border-radius: 24px;
    }
}

@media (min-width: 992px) {
    .about-cta-banner {
        padding: 3.5rem 2.5rem;
    }
}

@media (max-width: 575.98px) {
    .about-sector-capsule {
        padding: 1rem 0.95rem;
        gap: 0.85rem;
    }
    .sector-icon-box {
        width: 42px;
        height: 42px;
        font-size: 1.2rem;
    }
}

.about-card .badge {
    white-space: normal;
    text-align: start;
    line-height: 1.4;
}

.about-cta-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1D4ED8, #3B82F6, #FFCE00);
}

/* ==========================================================================
   INDIVIDUALS PORTAL (بوابة الأفراد والمهنيين والطلاب)
   German Institutional Visual Standard
   ========================================================================== */
.individuals-container {
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

/* Bridge rules for Individuals Portal */
div.container.py-5:has(.grc-cv-banner),
div.container.py-5:has(.card.bg-primary.text-white) {
    max-width: 1240px !important;
}

div.container.py-5 .card.border-0.rounded-4.bg-primary.text-white {
    background: radial-gradient(circle at 85% 20%, #1E3A8A 0%, #0F172A 75%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 24px !important;
    box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.18) !important;
    padding: 3rem 2.75rem !important;
}

div.container.py-5 .card.h-100.border.rounded-4.p-4 {
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 22px !important;
    padding: 2.25rem 2rem !important;
    box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

div.container.py-5 .card.h-100.border.rounded-4.p-4:hover {
    border-color: #93C5FD !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.1) !important;
}

div.container.py-5 .mt-5.p-4.p-md-5.rounded-4.bg-slate-50.border.text-center {
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 24px !important;
    padding: 3rem 2.5rem !important;
    box-shadow: 0 8px 28px -4px rgba(15, 23, 42, 0.05) !important;
}

/* CV Builder Feature Banner */
.grc-cv-banner {
    background: radial-gradient(circle at 85% 20%, #1E3A8A 0%, #0F172A 75%);
    color: #FFFFFF;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 3rem 2.75rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.18);
    margin-bottom: 3.5rem;
}

.grc-cv-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #000000 0%, #000000 33%, #DD0000 33%, #DD0000 66%, #FFCE00 66%, #FFCE00 100%);
}

.grc-cv-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #F8FAFC;
    padding: 0.35rem 0.95rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.grc-cv-title {
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.35;
    margin-bottom: 0.75rem;
}

.grc-cv-desc {
    color: #94A3B8;
    font-size: 0.96rem;
    line-height: 1.75;
    margin-bottom: 1.25rem;
}

.grc-cv-features-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.grc-cv-features-list li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.84rem;
    color: #E2E8F0;
    background: rgba(255, 255, 255, 0.06);
    padding: 0.35rem 0.85rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.grc-cv-features-list li i {
    color: #60A5FA;
}

/* Individual 5-Track Cards */
.grc-indiv-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 22px;
    padding: 2.25rem 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.04);
}

.grc-indiv-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.1);
}

.grc-indiv-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    transition: all 0.25s ease;
}

.track-accent-blue::before    { background: linear-gradient(90deg, #1D4ED8, #3B82F6); }
.track-accent-emerald::before { background: linear-gradient(90deg, #059669, #10B981); }
.track-accent-amber::before   { background: linear-gradient(90deg, #D97706, #F59E0B); }
.track-accent-cyan::before    { background: linear-gradient(90deg, #0284C7, #06B6D4); }
.track-accent-indigo::before  { background: linear-gradient(90deg, #4F46E5, #6366F1); }

.track-accent-blue:hover    { border-color: #93C5FD; }
.track-accent-emerald:hover { border-color: #A7F3D0; }
.track-accent-amber:hover   { border-color: #FDE68A; }
.track-accent-cyan:hover    { border-color: #BAE6FD; }
.track-accent-indigo:hover  { border-color: #C7D2FE; }

.indiv-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.indiv-icon-box {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.grc-indiv-card:hover .indiv-icon-box {
    transform: scale(1.06);
}

.indiv-track-num {
    font-size: 1.6rem;
    font-weight: 900;
    color: #CBD5E1;
    font-family: 'Inter', system-ui, sans-serif;
    letter-spacing: -0.02em;
}

.indiv-track-pill {
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 0.75rem;
    letter-spacing: 0.01em;
}

.indiv-track-title {
    font-size: 1.22rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 0.65rem;
    line-height: 1.35;
}

.indiv-track-summary {
    font-size: 0.9rem;
    color: #64748B;
    line-height: 1.65;
    margin-bottom: 1.25rem;
}

.indiv-track-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.indiv-track-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.86rem;
    color: #334155;
    line-height: 1.55;
}

.indiv-track-bullets li i {
    color: #10B981;
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.indiv-card-footer {
    margin-top: auto;
    padding-top: 1.15rem;
    border-top: 1px solid #F1F5F9;
}

/* Wide Track Inner Columns for Row 2 */
.indiv-wide-card {
    padding: 2.5rem 2.25rem;
}

/* Assessment & Consultation Callout */
.grc-consult-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 24px;
    padding: 3rem 2.5rem;
    box-shadow: 0 8px 28px -4px rgba(15, 23, 42, 0.05);
    margin-top: 4rem;
    position: relative;
    overflow: hidden;
}

.grc-consult-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1D4ED8, #3B82F6, #10B981);
}

.consult-icon-shield {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #1D4ED8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    margin-bottom: 1.25rem;
}

/* ==========================================================================
   EMPLOYERS PORTAL (بوابة الشركات وأصحاب العمل)
   German Institutional Visual Standard
   ========================================================================== */
.employers-container {
    max-width: 1320px !important;
    width: 96% !important;
    margin-inline: auto !important;
    padding-inline: clamp(0.75rem, 2vw, 1.25rem) !important;
}

/* Bridge rules for Employers Portal */
div.container.py-5:has(form[action*="Employers"]),
div.container.py-5:has(.card:has(form)) {
    max-width: 1320px !important;
    width: 96% !important;
}

div.container.py-5 .card.border-0.rounded-4.shadow-sm.bg-white {
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 24px !important;
    box-shadow: 0 4px 24px -2px rgba(15, 23, 42, 0.05) !important;
    padding: 2.75rem 2.5rem !important;
}

div.container.py-5 .p-4.rounded-4.bg-slate-50.border.mb-4 {
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 22px !important;
    padding: 2.25rem 2rem !important;
    box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.04) !important;
}

div.container.py-5 .p-4.rounded-4.bg-primary.text-white {
    background: radial-gradient(circle at top right, #1E293B, #0F172A) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 22px !important;
    padding: 2.25rem 2rem !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16) !important;
    position: relative;
    overflow: hidden;
}

div.container.py-5 .p-4.rounded-4.bg-primary.text-white::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #000000 0%, #000000 33%, #DD0000 33%, #DD0000 66%, #FFCE00 66%, #FFCE00 100%);
}

.employers-hero {
    background: radial-gradient(ellipse at 50% 0%, #1E293B 0%, #0F172A 100%);
    color: #FFFFFF;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.employers-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #000000 0%, #000000 33%, #DD0000 33%, #DD0000 66%, #FFCE00 66%, #FFCE00 100%);
}

/* Form Card */
.grc-form-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 24px;
    padding: 2.75rem 2.5rem;
    box-shadow: 0 4px 24px -2px rgba(15, 23, 42, 0.05);
    position: relative;
    overflow: hidden;
}

.grc-form-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1D4ED8, #3B82F6);
}

.form-group-section {
    padding-bottom: 1.5rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid #F1F5F9;
}

.form-section-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 1rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 1.25rem;
}

.form-section-title i {
    color: #2563EB;
    font-size: 1.15rem;
}

.grc-form-label {
    font-size: 0.86rem;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 0.45rem;
    display: block;
}

.grc-form-control {
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 0.92rem;
    color: #0F172A;
    background-color: #F8FAFC;
    transition: all 0.2s ease;
}

.grc-form-control:focus {
    background-color: #FFFFFF;
    border-color: #3B82F6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
    outline: none;
}

.grc-form-control::placeholder {
    color: #94A3B8;
    font-size: 0.88rem;
}

/* Sidebar Value Card */
.grc-b2b-sidebar-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 22px;
    padding: 2.25rem 2rem;
    box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.04);
    margin-bottom: 1.75rem;
}

.b2b-feature-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #F1F5F9;
}

.b2b-feature-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.b2b-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* B2B Direct Contact Box */
.grc-b2b-contact-box {
    background: radial-gradient(circle at top right, #1E293B, #0F172A);
    color: #FFFFFF;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    padding: 2.25rem 2rem;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
    position: relative;
    overflow: hidden;
}

.b2b-contact-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #F8FAFC;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    font-weight: 600;
}

.b2b-contact-link:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #60A5FA;
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* Institutional & Portal Responsive Standards (2026 Enterprise) */
.portal-hero-title {
    font-size: clamp(1.75rem, 3.2vw, 2.35rem) !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    letter-spacing: -0.02em !important;
    line-height: 1.35 !important;
}

.portal-hero-desc {
    font-size: clamp(0.925rem, 1.25vw, 1.05rem) !important;
    color: #CBD5E1 !important;
    line-height: 1.8 !important;
    max-width: 800px;
}

.portal-trust-pills {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.25rem;
}

.portal-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 9999px;
    font-size: 0.8rem;
    color: #E2E8F0;
    font-weight: 600;
    backdrop-filter: blur(4px);
    transition: all 0.2s ease;
}

.portal-trust-pill:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
}

.portal-trust-pill i {
    color: #60A5FA;
    font-size: 0.85rem;
}

/* Professional File Upload Dropzone */
.grc-upload-box {
    position: relative;
    border: 1.5px dashed #CBD5E1;
    border-radius: 14px;
    background: #F8FAFC;
    padding: 1.25rem 1rem;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.grc-upload-box:hover {
    border-color: #3B82F6;
    background: rgba(59, 130, 246, 0.04);
}

.grc-file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.grc-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    margin: 0;
    pointer-events: none;
}

.grc-upload-icon {
    font-size: 1.85rem;
    color: #2563EB;
}

.grc-upload-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1E293B;
}

.grc-upload-subtitle {
    font-size: 0.76rem;
    color: #64748B;
}

/* Compliance Card */
.grc-compliance-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.03);
    margin-top: 1.5rem;
}

.grc-compliance-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.92rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 0.65rem;
}

.grc-compliance-badge {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

/* Responsive Adaptive Fine-Tuning for Tablet & Laptops */
@media (max-width: 1199.98px) {
    .employers-container {
        padding-inline: 1.25rem;
    }

    .grc-form-card {
        padding: 2rem 1.75rem !important;
        border-radius: 20px !important;
    }

    .grc-b2b-sidebar-card,
    .grc-b2b-contact-box {
        padding: 1.75rem 1.5rem !important;
        border-radius: 20px !important;
    }

    .form-group-section {
        padding-bottom: 1.25rem !important;
        margin-bottom: 1.5rem !important;
    }
}

@media (max-width: 767.98px) {
    .employers-container {
        padding-inline: 1rem;
    }

    .grc-form-card {
        padding: 1.5rem 1.25rem !important;
        border-radius: 16px !important;
    }

    .grc-b2b-sidebar-card,
    .grc-b2b-contact-box,
    .grc-compliance-card {
        padding: 1.35rem 1.15rem !important;
        border-radius: 16px !important;
    }
}

/* ==========================================================================
   SERVICES CATALOG PAGE (دليل الخدمات المعتمدة)
   Clean, Premium Corporate Layout
   ========================================================================== */
.services-catalog-container {
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

/* Category Filter Bar */
.services-filter-nav {
    display: inline-flex;
    align-items: center;
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 9999px;
    padding: 4px;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.services-filter-btn {
    border: none;
    background: transparent;
    color: #475569;
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.45rem 1.15rem;
    border-radius: 9999px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    cursor: pointer;
}

.services-filter-btn:hover {
    color: #1D4ED8;
    background: rgba(37, 99, 235, 0.06);
}

.services-filter-btn.active {
    background: #FFFFFF;
    color: #1D4ED8;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

/* Service Catalog Card */
.service-catalog-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 20px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.03);
}

.service-catalog-card:hover {
    transform: translateY(-4px);
    border-color: #CBD5E1;
    box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.09);
}

.service-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.service-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.service-card-tag {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.22rem 0.65rem;
    border-radius: 9999px;
    font-family: 'Cairo', sans-serif;
}

.service-card-title {
    font-size: 1.08rem;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.45;
    margin-bottom: 0.65rem;
    font-family: 'Cairo', sans-serif;
}

.service-card-desc {
    font-size: 0.875rem;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.service-card-footer {
    padding-top: 1rem;
    border-top: 1px solid #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.service-badge-pill {
    font-size: 0.75rem;
    color: #64748B;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* 12th Card - Custom Consultation Card */
.service-catalog-card.card-custom-consultation {
    background: radial-gradient(circle at top right, #1E293B, #0F172A);
    border-color: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
}

.service-catalog-card.card-custom-consultation .service-card-title {
    color: #FFFFFF;
}

.service-catalog-card.card-custom-consultation .service-card-desc {
    color: #CBD5E1;
}

.service-catalog-card.card-custom-consultation .service-card-footer {
    border-top-color: rgba(255, 255, 255, 0.12);
}

.service-catalog-card.card-custom-consultation:hover {
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 20px 40px -4px rgba(15, 23, 42, 0.25);
}

/* Filtering animation */
.service-catalog-item {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.service-catalog-item.filter-hidden {
    display: none !important;
}

/* ==========================================================================
   COMPREHENSIVE RESPONSIVE AUDIT & ADAPTIVE RULES (Mobile, Tablet, Desktop)
   ========================================================================== */

/* 1. Mobile Filter Bar Touch Scroll for Services */
@media (max-width: 767.98px) {
    .services-filter-nav {
        display: flex !important;
        overflow-x: auto !important;
        max-width: 100% !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 16px !important;
        padding: 4px !important;
        justify-content: flex-start !important;
    }
    .services-filter-nav::-webkit-scrollbar {
        display: none !important;
    }
    .services-filter-btn {
        padding: 0.4rem 0.85rem !important;
        font-size: 0.8rem !important;
    }
}

/* 2. Responsive Hero Typography Across All Portals & Pages */
.employers-hero h1,
.employers-hero .display-5,
.portal-hero-title,
div.py-5.border-bottom h1.display-5 {
    font-size: clamp(1.65rem, 3.2vw, 2.35rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.35 !important;
}

.employers-hero p,
.employers-hero .fs-5,
.portal-hero-desc,
div.py-5.border-bottom p.fs-5 {
    font-size: clamp(0.92rem, 1.25vw, 1.05rem) !important;
    line-height: 1.8 !important;
}

/* 3. Individuals Portal CV Banner Responsive Scaling */
@media (max-width: 991.98px) {
    .grc-cv-banner {
        padding: 2.25rem 1.75rem !important;
        border-radius: 20px !important;
        margin-bottom: 2.5rem !important;
    }
}

@media (max-width: 575.98px) {
    .grc-cv-banner {
        padding: 1.5rem 1.15rem !important;
        border-radius: 16px !important;
    }
    .grc-cv-title {
        font-size: 1.25rem !important;
    }
    .grc-cv-features-list {
        font-size: 0.85rem !important;
    }
}



/* 5. Touch Friendly Form Elements on Mobile */
@media (max-width: 575.98px) {
    .grc-form-control,
    .form-select.grc-form-control {
        font-size: 0.88rem !important;
        padding: 0.65rem 0.85rem !important;
    }
    .grc-form-label {
        font-size: 0.82rem !important;
    }
}

/* ==========================================================================
   PROJECTS & COOPERATION PAGE (المشاريع والشراكات المؤسسية)
   German Institutional Visual Standard
   ========================================================================== */
.grc-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.85rem;
    border-bottom: 1.5px solid #E2E8F0;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.grc-category-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.grc-category-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.grc-category-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0;
    font-family: 'Cairo', system-ui, sans-serif;
}

/* Partner Card */
.grc-partner-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 16px;
    padding: 1.35rem 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
    position: relative;
    overflow: hidden;
}

.grc-partner-card:hover {
    transform: translateY(-3px);
    border-color: #CBD5E1;
    box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.08);
}

.partner-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.partner-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.partner-card-title {
    font-size: 0.935rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 0.45rem;
    line-height: 1.45;
    font-family: 'Cairo', system-ui, sans-serif;
}

.partner-card-desc {
    font-size: 0.815rem;
    color: #64748B;
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
}

/* Initiative / Event Card */
.grc-initiative-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 20px;
    padding: 2rem 1.85rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.03);
}

.grc-initiative-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.initiative-medical::before   { background: linear-gradient(90deg, #E11D48, #F43F5E); }
.initiative-ausbildung::before{ background: linear-gradient(90deg, #D97706, #F59E0B); }
.initiative-academic::before  { background: linear-gradient(90deg, #059669, #10B981); }
.initiative-career::before    { background: linear-gradient(90deg, #1D4ED8, #3B82F6); }

.grc-initiative-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.09);
}

.initiative-medical:hover   { border-color: #FECDD3; }
.initiative-ausbildung:hover{ border-color: #FDE68A; }
.initiative-academic:hover  { border-color: #A7F3D0; }
.initiative-career:hover    { border-color: #93C5FD; }

.initiative-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.initiative-card-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 0.75rem;
    line-height: 1.45;
    font-family: 'Cairo', system-ui, sans-serif;
}

.initiative-card-desc {
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.75;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.initiative-card-footer {
    padding-top: 1rem;
    border-top: 1px solid #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.initiative-action-link {
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: all 0.2s ease;
}

.initiative-action-link:hover {
    opacity: 0.85;
}

/* ==========================================================================
   SERVICES UNIFIED CONSULTATION SECTION (دمج كرت الاستشارة والضمانات)
   ========================================================================= */
.grc-unified-consult-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 24px;
    padding: 2.75rem 2.5rem;
    box-shadow: 0 8px 30px -4px rgba(15, 23, 42, 0.05);
    position: relative;
    overflow: hidden;
}

.grc-unified-consult-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4.5px;
    background: linear-gradient(90deg, #1D4ED8 0%, #3B82F6 30%, #10B981 65%, #F59E0B 100%);
}

.consult-panel-guarantee {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    padding: 1.75rem;
    height: 100%;
}

.consult-icon-shield-sm {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #1D4ED8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.consult-guarantee-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: #334155;
    line-height: 1.55;
    margin-bottom: 0.65rem;
}

.consult-guarantee-item:last-child {
    margin-bottom: 0;
}

.consult-guarantee-item i {
    font-size: 0.95rem;
    margin-top: 1px;
    flex-shrink: 0;
}

@media (max-width: 991.98px) {
    .grc-unified-consult-card {
        padding: 2rem 1.5rem !important;
        border-radius: 20px !important;
    }
}

@media (max-width: 575.98px) {
    .grc-unified-consult-card {
        padding: 1.5rem 1.15rem !important;
        border-radius: 16px !important;
    }
    .consult-panel-guarantee {
        padding: 1.25rem 1rem !important;
    }
    .grc-initiative-card {
        padding: 1.5rem 1.25rem !important;
    }
}

/* ==========================================================================
   JOBS & RECRUITMENT PORTAL (بوابة شواغر التوظيف المعتمدة ودليل الكفاءات)
   German Institutional Visual Standard
   ========================================================================== */

/* Filter Hub Card */
.grc-filter-hub-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 20px;
    padding: 1.65rem 1.75rem;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04);
    position: relative;
}

.grc-hub-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.grc-hub-input-wrap .hub-icon {
    position: absolute;
    color: #94A3B8;
    font-size: 0.95rem;
    pointer-events: none;
    z-index: 5;
}

[dir="rtl"] .grc-hub-input-wrap .hub-icon {
    right: 14px;
}
[dir="ltr"] .grc-hub-input-wrap .hub-icon {
    left: 14px;
}

.grc-hub-input {
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 12px !important;
    font-size: 0.875rem !important;
    padding: 0.65rem 1rem !important;
    background-color: #F8FAFC !important;
    transition: all 0.2s ease !important;
    height: 44px;
}

[dir="rtl"] .grc-hub-input.with-icon {
    padding-right: 2.5rem !important;
}
[dir="ltr"] .grc-hub-input.with-icon {
    padding-left: 2.5rem !important;
}

.grc-hub-input:focus {
    background-color: #FFFFFF !important;
    border-color: #2563EB !important;
    box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.12) !important;
}

.grc-hub-select {
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 12px !important;
    font-size: 0.875rem !important;
    padding: 0.65rem 1rem !important;
    background-color: #F8FAFC !important;
    height: 44px;
    cursor: pointer;
}

.grc-hub-select:focus {
    background-color: #FFFFFF !important;
    border-color: #2563EB !important;
    box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.12) !important;
}

.grc-hub-btn {
    border-radius: 12px !important;
    height: 44px;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
    transition: all 0.2s ease;
}

.grc-hub-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

/* Quick Filter Pills */
.quick-filter-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    border-radius: 50rem;
    font-size: 0.79rem;
    font-weight: 600;
    color: #475569;
    background: #F1F5F9;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.quick-filter-pill:hover {
    background: #EFF6FF;
    color: #1D4ED8;
    border-color: #BFDBFE;
    transform: translateY(-1px);
}

.quick-filter-pill.active {
    background: #1D4ED8;
    color: #FFFFFF;
    border-color: #1D4ED8;
    box-shadow: 0 2px 8px rgba(29, 78, 216, 0.25);
}

.quick-filter-pill.active i {
    color: #FFFFFF !important;
}

/* Modern Job Card V2 */
.grc-job-card-v2 {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 20px;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.03);
}

.grc-job-card-v2:hover {
    transform: translateY(-4px);
    border-color: #CBD5E1;
    box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.09);
}

.job-card-top-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.grc-sector-pill {
    padding: 0.3rem 0.75rem;
    border-radius: 50rem;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.grc-sector-pill.sector-medical {
    background: #FFF1F2;
    color: #E11D48;
    border: 1px solid #FFE4E6;
}

.grc-sector-pill.sector-tech {
    background: #EFF6FF;
    color: #2563EB;
    border: 1px solid #DBEAFE;
}

.grc-sector-pill.sector-craft {
    background: #FFFBEB;
    color: #D97706;
    border: 1px solid #FEF3C7;
}

.grc-sector-pill.sector-ausbildung {
    background: #ECFDF5;
    color: #059669;
    border: 1px solid #D1FAE5;
}

.grc-sector-pill.sector-default {
    background: #F1F5F9;
    color: #475569;
    border: 1px solid #E2E8F0;
}

.grc-status-pill {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 50rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.grc-status-pill.status-open {
    background: #ECFDF5;
    color: #059669;
    border: 1px solid #A7F3D0;
}

.grc-status-pill.status-closed {
    background: #FEF2F2;
    color: #DC2626;
    border: 1px solid #FECACA;
}

.pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #10B981;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.job-card-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0;
    line-height: 1.45;
    font-family: 'Cairo', system-ui, sans-serif;
}

.job-card-title a {
    color: #0F172A;
    text-decoration: none;
    transition: color 0.2s ease;
}

.job-card-title a:hover {
    color: #2563EB;
}

.job-company-meta {
    font-size: 0.825rem;
    color: #64748B;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.job-company-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.job-company-meta .meta-separator {
    color: #CBD5E1;
}

.job-card-desc {
    font-size: 0.84rem;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 1rem;
    flex-grow: 1;
}

.job-salary-box {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 0.7rem 0.95rem;
    margin-bottom: 1.25rem;
}

.job-card-footer-actions {
    padding-top: 1rem;
    border-top: 1px solid #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-top: auto;
}

.btn-job-detail {
    border-radius: 50rem !important;
    padding: 0.45rem 1rem !important;
    font-size: 0.785rem !important;
    font-weight: 700 !important;
    border-color: #CBD5E1 !important;
    color: #475569 !important;
    transition: all 0.2s ease;
}

.btn-job-detail:hover {
    background-color: #F1F5F9 !important;
    color: #0F172A !important;
    border-color: #94A3B8 !important;
}

.btn-job-apply {
    border-radius: 50rem !important;
    padding: 0.45rem 1.25rem !important;
    font-size: 0.785rem !important;
    font-weight: 700 !important;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
}

.btn-job-apply:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Candidate Roadmap 4-Step Pipeline */
.roadmap-step-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 20px;
    padding: 1.75rem 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.03);
}

.roadmap-step-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.step-1-card::before { background: linear-gradient(90deg, #2563EB, #3B82F6); }
.step-2-card::before { background: linear-gradient(90deg, #D97706, #F59E0B); }
.step-3-card::before { background: linear-gradient(90deg, #059669, #10B981); }
.step-4-card::before { background: linear-gradient(90deg, #7C3AED, #8B5CF6); }

.roadmap-step-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.08);
}

.step-number-badge {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.step-1-card .step-number-badge { background: #EFF6FF; color: #2563EB; }
.step-2-card .step-number-badge { background: #FFFBEB; color: #D97706; }
.step-3-card .step-number-badge { background: #ECFDF5; color: #059669; }
.step-4-card .step-number-badge { background: #F5F3FF; color: #7C3AED; }

.roadmap-step-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 0.65rem;
    font-family: 'Cairo', system-ui, sans-serif;
}

.roadmap-step-desc {
    font-size: 0.835rem;
    color: #64748B;
    line-height: 1.65;
    margin: 0;
}

/* Modern Institutional Accordion */
.grc-clean-accordion .accordion-item {
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 16px !important;
    margin-bottom: 1rem;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
    transition: all 0.2s ease;
}

.grc-clean-accordion .accordion-item:hover {
    border-color: #CBD5E1 !important;
}

.grc-clean-accordion .accordion-button {
    background: #FFFFFF;
    font-size: 0.975rem;
    font-weight: 700;
    color: #0F172A;
    padding: 1.15rem 1.5rem;
    box-shadow: none !important;
}

.grc-clean-accordion .accordion-button:not(.collapsed) {
    background: #F8FAFC;
    color: #1D4ED8;
    border-bottom: 1px solid #E2E8F0;
}

.grc-clean-accordion .accordion-body {
    padding: 1.5rem;
    color: #475569;
    font-size: 0.875rem;
    line-height: 1.8;
}

/* 18-Documents Checklist Cards */
.doc-group-container {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 20px;
    padding: 1.75rem 1.5rem;
    height: 100%;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
}

.doc-group-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding-bottom: 1rem;
    border-bottom: 1.5px solid #F1F5F9;
    margin-bottom: 1.25rem;
}

.doc-group-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.doc-group-title {
    font-size: 0.975rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0;
    font-family: 'Cairo', system-ui, sans-serif;
}

.doc-check-row {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.825rem;
    font-weight: 600;
    color: #334155;
    transition: all 0.2s ease;
}

.doc-check-row:hover {
    background: #FFFFFF;
    border-color: #CBD5E1;
    transform: translateX(-2px);
}

.doc-check-icon {
    color: #10B981;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Talent Conversion Banner */
.grc-talent-cta-card {
    background: radial-gradient(ellipse at 50% 0%, #1E293B 0%, #0F172A 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 3rem 2.5rem;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.35);
}

.grc-talent-cta-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #000000 0%, #000000 33%, #DD0000 33%, #DD0000 66%, #FFCE00 66%, #FFCE00 100%);
}

@media (max-width: 767.98px) {
    .grc-filter-hub-card {
        padding: 1.25rem 1rem !important;
    }
}

/* Candidate Roadmap 4-Step Pipeline */
.roadmap-step-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 20px;
    padding: 1.75rem 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.03);
}

.roadmap-step-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.step-1-card::before { background: linear-gradient(90deg, #2563EB, #3B82F6); }
.step-2-card::before { background: linear-gradient(90deg, #D97706, #F59E0B); }
.step-3-card::before { background: linear-gradient(90deg, #059669, #10B981); }
.step-4-card::before { background: linear-gradient(90deg, #7C3AED, #8B5CF6); }

.roadmap-step-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.08);
}

.step-number-badge {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.step-1-card .step-number-badge { background: #EFF6FF; color: #2563EB; }
.step-2-card .step-number-badge { background: #FFFBEB; color: #D97706; }
.step-3-card .step-number-badge { background: #ECFDF5; color: #059669; }
.step-4-card .step-number-badge { background: #F5F3FF; color: #7C3AED; }

.roadmap-step-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 0.65rem;
    font-family: 'Cairo', system-ui, sans-serif;
}

.roadmap-step-desc {
    font-size: 0.835rem;
    color: #64748B;
    line-height: 1.65;
    margin: 0;
}

/* Modern Institutional Accordion */
.grc-clean-accordion .accordion-item {
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 16px !important;
    margin-bottom: 1rem;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
    transition: all 0.2s ease;
}

.grc-clean-accordion .accordion-item:hover {
    border-color: #CBD5E1 !important;
}

.grc-clean-accordion .accordion-button {
    background: #FFFFFF;
    font-size: 0.975rem;
    font-weight: 700;
    color: #0F172A;
    padding: 1.15rem 1.5rem;
    box-shadow: none !important;
}

.grc-clean-accordion .accordion-button:not(.collapsed) {
    background: #F8FAFC;
    color: #1D4ED8;
    border-bottom: 1px solid #E2E8F0;
}

.grc-clean-accordion .accordion-body {
    padding: 1.5rem;
    color: #475569;
    font-size: 0.875rem;
    line-height: 1.8;
}

/* 18-Documents Checklist Cards */
.doc-group-container {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 20px;
    padding: 1.75rem 1.5rem;
    height: 100%;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
}

.doc-group-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding-bottom: 1rem;
    border-bottom: 1.5px solid #F1F5F9;
    margin-bottom: 1.25rem;
}

.doc-group-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.doc-group-title {
    font-size: 0.975rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0;
    font-family: 'Cairo', system-ui, sans-serif;
}

.doc-check-row {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.825rem;
    font-weight: 600;
    color: #334155;
    transition: all 0.2s ease;
}

.doc-check-row:hover {
    background: #FFFFFF;
    border-color: #CBD5E1;
    transform: translateX(-2px);
}

.doc-check-icon {
    color: #10B981;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Talent Conversion Banner */
.grc-talent-cta-card {
    background: radial-gradient(ellipse at 50% 0%, #1E293B 0%, #0F172A 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 3rem 2.5rem;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.35);
}

.grc-talent-cta-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #000000 0%, #000000 33%, #DD0000 33%, #DD0000 66%, #FFCE00 66%, #FFCE00 100%);
}

@media (max-width: 767.98px) {
    .grc-filter-hub-card {
        padding: 1.25rem 1rem !important;
    }
    .grc-job-card-v2 {
        padding: 1.35rem 1.15rem !important;
    }
    .grc-talent-cta-card {
        padding: 2rem 1.25rem !important;
    }
}

/* Load More Jobs Button */
.btn-load-more-jobs {
    border-radius: 50rem !important;
    padding: 0.65rem 1.85rem !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    border: 1.5px solid #BFDBFE !important;
    color: #1D4ED8 !important;
    background-color: #EFF6FF !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.08) !important;
}

.btn-load-more-jobs:hover {
    background-color: #1D4ED8 !important;
    color: #FFFFFF !important;
    border-color: #1D4ED8 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(29, 78, 216, 0.25) !important;
}

.btn-load-more-jobs i {
    font-size: 0.95rem;
    transition: transform 0.25s ease;
}

/* ==========================================================================
   HOME HERO SECTION - CINEMATIC BACKGROUND SHOWCASE
   Frankfurt Corporate Image as atmospheric background for top hero
   ========================================================================== */
.hero-corp-section {
    display: block !important;
    min-height: auto !important;
    padding-top: 0 !important;
    background: transparent !important;
}

.home-hero-cinematic-bg {
    position: relative;
    width: 100%;
    background-color: #0F172A;
    background-image: 
        linear-gradient(180deg, rgba(15, 23, 42, 0.78) 0%, rgba(15, 23, 42, 0.72) 45%, rgba(10, 18, 32, 0.92) 100%),
        url('/images/hero-frankfurt-corp.jpg');
    background-position: center 30%;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 4.75rem 0 4.25rem 0;
    margin-bottom: 3rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.2);
    box-shadow: inset 0 -30px 40px -15px rgba(10, 18, 32, 0.5);
}

.home-hero-badge-glass {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
    padding: 0.45rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.85rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    transition: all 0.25s ease;
}

.home-hero-badge-glass:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
}

.home-hero-cinema-headline {
    font-family: 'Cairo', system-ui, sans-serif !important;
    font-size: clamp(1.95rem, 3.2vw, 2.85rem) !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    color: #FFFFFF !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
    letter-spacing: -0.015em;
    margin-bottom: 1.25rem;
}

.text-highlight-cyan {
    color: #38BDF8 !important;
    text-shadow: 0 2px 20px rgba(56, 189, 248, 0.45);
}

.home-hero-cinema-subtitle {
    font-size: clamp(1.02rem, 1.25vw, 1.15rem);
    line-height: 1.85;
    color: #F1F5F9 !important;
    max-width: 860px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
    margin-bottom: 2rem;
}

.btn-corp-glass {
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: #FFFFFF !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-corp-glass:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: #FFFFFF;
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

.home-hero-cinema-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #E2E8F0;
    margin-top: 1.25rem;
}

.home-hero-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 0.35rem 0.95rem;
    border-radius: 9999px;
}

@media (max-width: 767.98px) {
    .home-hero-cinematic-bg {
        padding: 3.25rem 0 3rem 0;
        margin-bottom: 2rem;
    }
    .home-hero-cinema-headline {
        font-size: 1.65rem !important;
        line-height: 1.35 !important;
    }
    .home-hero-cinema-subtitle {
        font-size: 0.95rem;
    }
    .home-hero-badge-glass {
        font-size: 0.75rem;
        padding: 0.35rem 0.9rem;
    }
}

/* Ensure grc-trust-strip is full width and does not flex horizontally */
.grc-trust-strip { width: 100% !important; display: block !important; clear: both !important; }

/* =========================================================================
   PROJECTS & PARTNERSHIPS PAGE DESIGN SYSTEM
   Corporate German Institutional Standard
   ========================================================================= */

.portal-hero-title {
    font-size: clamp(2rem, 3.8vw, 2.75rem);
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.portal-hero-desc {
    color: #CBD5E1;
    font-size: 1.1rem;
    line-height: 1.8;
}

.portal-trust-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
    align-items: center;
}

.portal-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.1rem;
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #E2E8F0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.portal-trust-pill:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
    transform: translateY(-2px);
}

.portal-trust-pill i {
    color: #38BDF8;
    font-size: 0.95rem;
}

/* Section Tags */
.about-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 1rem;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.about-section-tag.tag-blue {
    background: #EFF6FF;
    color: #1D4ED8;
    border: 1px solid #BFDBFE;
}

.about-section-tag.tag-emerald {
    background: #ECFDF5;
    color: #047857;
    border: 1px solid #A7F3D0;
}

/* Partner Cards */
.grc-partner-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.04);
    position: relative;
    overflow: hidden;
}

.grc-partner-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #CBD5E1;
    transition: background 0.25s ease, height 0.25s ease;
}

.grc-partner-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 28px -6px rgba(15, 23, 42, 0.09);
    border-color: #94A3B8;
}

.grc-partner-card:hover::before {
    height: 4px;
    background: #2563EB;
}

.partner-card-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.22rem 0.65rem;
    border-radius: 9999px;
    background: #F1F5F9;
    color: #475569;
    margin-bottom: 0.75rem;
    width: fit-content;
}

.partner-card-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8rem;
}

.partner-card-name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.partner-card-name a:hover {
    color: #2563EB;
}

.partner-card-desc {
    font-size: 0.865rem;
    color: #64748B;
    line-height: 1.65;
    margin-bottom: 1.15rem;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 4.2rem;
}

.partner-card-footer {
    border-top: 1px solid #F1F5F9;
    padding-top: 0.85rem;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.partner-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    width: 100%;
}

.grc-details-action-btn {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.35rem 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.grc-details-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.15);
}

.partner-card-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: #334155;
    background: #F8FAFC;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    border: 1px solid #E2E8F0;
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.partner-website-btn {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1E40AF;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.2s ease;
    margin-inline-start: auto;
}

.partner-website-btn:hover {
    background: #DBEAFE;
    color: #1D4ED8;
    border-color: #93C5FD;
}

/* Category Icons */
.partner-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Flagship Initiative Cards */
.grc-initiative-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.grc-initiative-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #94A3B8;
    transition: height 0.25s ease;
}

.grc-initiative-card.initiative-medical::before { background: #E11D48; }
.grc-initiative-card.initiative-ausbildung::before { background: #D97706; }
.grc-initiative-card.initiative-academic::before { background: #059669; }
.grc-initiative-card.initiative-career::before { background: #2563EB; }

.grc-initiative-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 36px -8px rgba(15, 23, 42, 0.1);
    border-color: #CBD5E1;
}

.grc-initiative-card:hover::before {
    height: 5px;
}

.initiative-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.initiative-card-title {
    font-size: 1.22rem;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.45;
    margin-bottom: 0.65rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.5rem;
}

.initiative-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.initiative-card-title a:hover {
    color: #2563EB;
}

.initiative-card-desc {
    font-size: 0.925rem;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 4.6rem;
}

.initiative-card-footer {
    padding-top: 1rem;
    border-top: 1px solid #F1F5F9;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.initiative-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    width: 100%;
}

/* =========================================================================
   GRAND INSTITUTIONAL PARTNERSHIP CTA
   Executive German Corporate Standard
   ========================================================================= */

.grc-grand-partnership-cta {
    background: linear-gradient(145deg, #0B132B 0%, #111D3E 50%, #0F172A 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 48px -12px rgba(11, 19, 43, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    position: relative;
    overflow: hidden;
    padding: 3.5rem 2rem;
}

/* German Flag Top Trim */
.grc-grand-partnership-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #000000 0%, #000000 33%, #DD0000 33%, #DD0000 66%, #FFCE00 66%, #FFCE00 100%);
    z-index: 3;
}

/* Atmospheric Ambient Radial Glow */
.grc-grand-partnership-cta::after {
    content: "";
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 650px;
    height: 350px;
    background: radial-gradient(ellipse, rgba(37, 99, 235, 0.22) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.grc-grand-cta-badge {
    background: rgba(255, 206, 0, 0.12);
    color: #FCD34D;
    border: 1px solid rgba(255, 206, 0, 0.32);
    box-shadow: 0 2px 8px rgba(255, 206, 0, 0.15);
    backdrop-filter: blur(8px);
}

.grc-grand-cta-badge i {
    color: #FFCE00;
}

.grc-grand-partnership-cta h2 {
    color: #FFFFFF !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.grc-grand-partnership-cta p {
    color: #CBD5E1 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.grc-grand-partnership-cta .btn-primary {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    border: 1px solid #3B82F6;
    color: #FFFFFF !important;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45);
    transition: all 0.25s ease;
}

.grc-grand-partnership-cta .btn-primary:hover {
    background: linear-gradient(135deg, #1D4ED8 0%, #1E40AF 100%);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.6);
    transform: translateY(-2px);
}

.grc-grand-partnership-cta .btn-outline-light {
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    color: #FFFFFF !important;
    font-weight: 600;
    backdrop-filter: blur(8px);
    transition: all 0.25s ease;
}

.grc-grand-partnership-cta .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: #FFFFFF;
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255, 255, 255, 0.15);
}

/* Fallback variable bindings & selector aliases for live rendering */
:root {
    --grc-graphite-dark: #0B132B;
    --grc-graphite-muted: rgba(255, 255, 255, 0.14);
}

.bg-burgundy,
span.badge.bg-burgundy {
    background: rgba(255, 206, 0, 0.12) !important;
    color: #FCD34D !important;
    border: 1px solid rgba(255, 206, 0, 0.32) !important;
    box-shadow: 0 2px 8px rgba(255, 206, 0, 0.15) !important;
    backdrop-filter: blur(8px) !important;
    font-weight: 700 !important;
}

.bg-burgundy i {
    color: #FFCE00 !important;
}

[style*="--grc-graphite-dark"],
div[style*="var(--grc-graphite-dark)"] {
    background: linear-gradient(145deg, #0B132B 0%, #111D3E 50%, #0F172A 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 48px -12px rgba(11, 19, 43, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 3.5rem 2rem !important;
}

[style*="--grc-graphite-dark"]::before,
div[style*="var(--grc-graphite-dark)"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #000000 0%, #000000 33%, #DD0000 33%, #DD0000 66%, #FFCE00 66%, #FFCE00 100%);
    z-index: 3;
}

[style*="--grc-graphite-dark"]::after,
div[style*="var(--grc-graphite-dark)"]::after {
    content: "";
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 650px;
    height: 350px;
    background: radial-gradient(ellipse, rgba(37, 99, 235, 0.22) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

[style*="--grc-graphite-dark"] h2,
div[style*="var(--grc-graphite-dark)"] h2 {
    color: #FFFFFF !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

[style*="--grc-graphite-dark"] p,
div[style*="var(--grc-graphite-dark)"] p {
    color: #CBD5E1 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* =========================================================================
   Corporate CV Dropzone Component (Jobs/Apply)
   ========================================================================= */
.corporate-cv-dropzone {
    border: 2px dashed #93C5FD !important;
    background: linear-gradient(180deg, #F8FAFC 0%, #EFF6FF 100%) !important;
    border-radius: 16px !important;
    padding: 2.25rem 1.5rem !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.04) !important;
}

.corporate-cv-dropzone:hover,
.corporate-cv-dropzone.dragover {
    border-color: #2563EB !important;
    background: #EBF5FF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px -4px rgba(37, 99, 235, 0.15) !important;
}

.corporate-cv-icon {
    width: 68px !important;
    height: 68px !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    color: #2563EB !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2rem !important;
    margin-bottom: 1rem !important;
    transition: all 0.25s ease !important;
}

.corporate-cv-dropzone:hover .corporate-cv-icon {
    transform: scale(1.1) translateY(-2px) !important;
    background: #2563EB !important;
    color: #FFFFFF !important;
}

.corporate-file-chip {
    background: #F0FDF4 !important;
    border: 1.5px solid #86EFAC !important;
    border-radius: 14px !important;
    padding: 1rem 1.25rem !important;
    margin-top: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.08) !important;
}

.corporate-file-chip.d-none {
    display: none !important;
}

/* ==========================================================================
   ASP.NET Core Validation Summary & Bootstrap Alert Integration
   Ensures that asp-validation-summary containers styled as Bootstrap alerts
   remain completely hidden when valid (initial GET or no errors) and only
   display when validation errors are present.
   ========================================================================== */
.validation-summary-valid,
div[data-valmsg-summary="true"].validation-summary-valid,
.alert.validation-summary-valid,
.alert[data-valmsg-summary="true"]:not(.validation-summary-errors) {
    display: none !important;
}

.validation-summary-errors,
div[data-valmsg-summary="true"].validation-summary-errors,
.alert.validation-summary-errors {
    display: block !important;
}

.validation-summary-errors ul {
    margin-bottom: 0;
    padding-inline-start: 1.25rem;
}

/* =========================================================================
   10. GRC UNIFIED DESIGN SYSTEM & FULL RESPONSIVE FOUNDATION 2026
   ========================================================================= */

/* --- 10.1 Global Viewport & Container Safety (Root Cause Anti-Overflow) --- */
img, svg, video, canvas, audio, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

pre, code, kbd, samp {
    max-width: 100%;
    overflow-x: auto;
}

.d-flex, .d-inline-flex {
    min-width: 0;
}

.row {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.row > * {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    min-width: 0;
}

/* --- 10.2 Unified Page Container & Background System --- */
.grc-page-bg,
.equivalency-page-bg,
.consultation-page-bg,
.grc-form-page,
.grc-cooperation-page {
    background: #F8FAFC !important;
    min-height: 85vh;
    padding-top: 2.5rem;
    padding-bottom: 4rem;
}

.grc-page-container {
    width: 100%;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* --- 10.3 Unified Card Architecture (Corporate Glass & Solid Standard) --- */
.grc-unified-card,
.equivalency-main-card,
.consultation-card,
.grc-form-card,
.grc-cooperation-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.06), 0 4px 10px -2px rgba(15, 23, 42, 0.03) !important;
    overflow: hidden !important;
}

/* Unified Main Card Header */
.grc-unified-header,
.equivalency-card-header,
.consultation-card-header,
.grc-form-header-sky,
.grc-cooperation-header {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important;
    padding: 2.25rem 2rem !important;
    position: relative !important;
    text-align: center !important;
    color: #FFFFFF !important;
}

.grc-unified-header::after,
.equivalency-card-header::after,
.consultation-card-header::after,
.grc-form-header-sky::after,
.grc-cooperation-header::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3.5px !important;
    background: linear-gradient(90deg, #000000 0%, #000000 33.33%, #DD0000 33.33%, #DD0000 66.66%, #FFCC00 66.66%, #FFCC00 100%) !important;
}

.grc-unified-header h1,
.grc-unified-header h2,
.grc-unified-header h4,
.equivalency-card-header h1,
.equivalency-card-header h2,
.equivalency-card-header h4,
.consultation-card-header h4,
.grc-form-header-sky h1,
.grc-form-header-sky h2,
.grc-cooperation-header h1,
.grc-cooperation-header h2 {
    color: #FFFFFF !important;
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 0.45rem !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.grc-unified-header p,
.equivalency-card-header p,
.consultation-card-header p,
.grc-form-header-sky p,
.grc-cooperation-header p {
    color: #E2E8F0 !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    opacity: 0.95 !important;
    margin-bottom: 0 !important;
}

/* Unified Card Body */
.grc-unified-body,
.equivalency-card-body,
.consultation-card-body,
.grc-form-body {
    padding: 2.25rem !important;
}

/* --- 10.4 Unified Form Section Cards --- */
.grc-unified-section,
.form-section-card,
.form-section-block,
.grc-section-box,
.grc-cooperation-section {
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 14px !important;
    margin-bottom: 1.5rem !important;
    transition: all 0.25s ease !important;
    overflow: hidden !important;
}

.grc-unified-section:hover,
.form-section-card:hover,
.form-section-block:hover,
.grc-section-box:hover,
.grc-cooperation-section:hover {
    border-color: #CBD5E1 !important;
}

.grc-unified-section.is-active,
.form-section-card.is-active,
.form-section-block.is-active {
    border-color: #BFDBFE !important;
    box-shadow: 0 4px 16px -2px rgba(37, 99, 235, 0.06) !important;
}

.section-header-clickable {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1.15rem 1.35rem !important;
    background: #FFFFFF !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background-color 0.2s ease !important;
}

.section-header-clickable:hover {
    background-color: #F8FAFC !important;
}

.section-number-badge {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background-color: #EFF6FF !important;
    color: #2563EB !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    flex-shrink: 0 !important;
    border: 1px solid #BFDBFE !important;
}

.section-content-body {
    padding: 1.5rem 1.5rem 1.75rem 1.5rem !important;
    border-top: 1px solid #F1F5F9 !important;
    background: #FFFFFF !important;
}

/* --- 10.5 Unified Form Controls (Inputs, Selects, Textareas, Labels) --- */
.grc-form-control,
.form-control,
.form-select {
    font-family: 'Cairo', 'Inter', system-ui, sans-serif !important;
    background-color: #F8FAFC !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 10px !important;
    padding: 0.65rem 1rem !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    color: #0F172A !important;
    min-height: 44px !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

.grc-form-control:focus,
.form-control:focus,
.form-select:focus {
    background-color: #FFFFFF !important;
    border-color: #2563EB !important;
    outline: none !important;
    box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.15) !important;
}

textarea.form-control,
textarea.grc-form-control {
    min-height: 110px !important;
    line-height: 1.6 !important;
    resize: vertical !important;
}

.grc-form-label,
.form-label,
.grc-field-label {
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    color: #1E293B !important;
    margin-bottom: 0.4rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
}

.form-label .text-danger,
.grc-form-label .text-danger,
.grc-field-label .text-danger {
    color: #EF4444 !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    line-height: 1 !important;
}

/* Modern Checkbox & Radio Alignment */
.form-check {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.6rem !important;
    padding-inline-start: 0 !important;
    margin-bottom: 0.75rem !important;
}

.form-check-input {
    width: 1.25rem !important;
    height: 1.25rem !important;
    min-width: 1.25rem !important;
    border: 1.5px solid #94A3B8 !important;
    border-radius: 6px !important;
    margin-top: 0.15rem !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0.5rem !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

.form-check-input:checked {
    background-color: #2563EB !important;
    border-color: #2563EB !important;
}

.form-check-input:focus {
    border-color: #2563EB !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
}

.form-check-label {
    font-size: 0.88rem !important;
    color: #334155 !important;
    line-height: 1.6 !important;
    cursor: pointer !important;
}

/* --- 10.6 Unified Dropzones & File Upload Areas --- */
.grc-upload-box,
.cloud-dropzone {
    border: 2px dashed #CBD5E1 !important;
    border-radius: 14px !important;
    padding: 1.75rem 1.25rem !important;
    text-align: center !important;
    background: #F8FAFC !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    min-height: 135px !important;
}

.grc-upload-box:hover,
.cloud-dropzone:hover {
    border-color: #2563EB !important;
    background: #EFF6FF !important;
    transform: translateY(-1px) !important;
}

/* --- 10.7 Unified Button System --- */
.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    font-family: 'Cairo', 'Inter', system-ui, sans-serif !important;
    min-height: 44px !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    line-height: 1.4 !important;
    border-radius: 12px !important;
    padding: 0.65rem 1.45rem !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

.btn.rounded-pill {
    border-radius: 9999px !important;
}

.btn-sm,
.btn-sm.rounded-pill {
    min-height: 36px !important;
    padding: 0.4rem 1rem !important;
    font-size: 0.82rem !important;
}

.btn-lg,
.btn-lg.rounded-pill {
    min-height: 50px !important;
    padding: 0.85rem 2rem !important;
    font-size: 1.05rem !important;
}

/* Primary Button Styling */
.btn-primary,
.btn-grc-submit,
.btn-grc-submit-sky {
    background: linear-gradient(180deg, #2563EB 0%, #1D4ED8 100%) !important;
    border: 1px solid #1D4ED8 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px -2px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.btn-primary:hover,
.btn-grc-submit:hover,
.btn-grc-submit-sky:hover {
    background: linear-gradient(180deg, #1D4ED8 0%, #1E40AF 100%) !important;
    border-color: #1E40AF !important;
    color: #FFFFFF !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.45) !important;
}

.btn-primary:active,
.btn-grc-submit:active,
.btn-grc-submit-sky:active {
    transform: translateY(0.5px) scale(0.99) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Secondary Button Styling */
.btn-secondary,
.btn-tactile-secondary {
    background: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
    color: #1E293B !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04), inset 0 1px 0 #FFFFFF !important;
}

.btn-secondary:hover,
.btn-tactile-secondary:hover {
    background: #F8FAFC !important;
    border-color: #94A3B8 !important;
    color: #0F172A !important;
    transform: translateY(-1px) !important;
}

/* Outline Primary */
.btn-outline-primary {
    background: transparent !important;
    border: 1.5px solid #2563EB !important;
    color: #2563EB !important;
}

.btn-outline-primary:hover {
    background: #2563EB !important;
    color: #FFFFFF !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}

/* Step Navigation Buttons Container */
.step-nav-buttons {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 1rem !important;
    margin-top: 2rem !important;
    flex-wrap: wrap !important;
}

/* --- 10.8 Tables & Horizontal Scroll Container --- */
.table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 14px !important;
    background: #FFFFFF !important;
    margin-bottom: 1.5rem !important;
}

.table-responsive table {
    margin-bottom: 0 !important;
    min-width: 600px;
}

/* --- 10.9 Responsive Matrix Across Breakpoints --- */

/* Mobile Breakpoint: 320px - 575.98px */
@media (max-width: 575.98px) {
    .top-header-bar .container {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.25rem 0.65rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .topbar-group {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 0.35rem 0.5rem !important;
    }

    .topbar-item {
        font-size: 0.72rem !important;
    }

    .grc-page-bg,
    .equivalency-page-bg,
    .consultation-page-bg,
    .grc-form-page,
    .grc-cooperation-page {
        padding-top: 1.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .grc-unified-card,
    .equivalency-main-card,
    .consultation-card,
    .grc-form-card,
    .grc-cooperation-card {
        border-radius: 16px !important;
    }

    .grc-unified-header,
    .equivalency-card-header,
    .consultation-card-header,
    .grc-form-header-sky,
    .grc-cooperation-header {
        padding: 1.5rem 1rem !important;
    }

    .grc-unified-header h1,
    .grc-unified-header h2,
    .grc-unified-header h4,
    .equivalency-card-header h1,
    .equivalency-card-header h2,
    .equivalency-card-header h4,
    .consultation-card-header h4,
    .grc-form-header-sky h1,
    .grc-form-header-sky h2,
    .grc-cooperation-header h1,
    .grc-cooperation-header h2 {
        font-size: 1.25rem !important;
    }

    .grc-unified-body,
    .equivalency-card-body,
    .consultation-card-body,
    .grc-form-body {
        padding: 1.25rem 1rem !important;
    }

    .section-content-body {
        padding: 1rem 0.85rem !important;
    }

    .section-header-clickable {
        padding: 0.9rem 1rem !important;
    }

    .section-number-badge {
        width: 30px !important;
        height: 30px !important;
        border-radius: 8px !important;
        font-size: 0.85rem !important;
    }

    /* Stepper Mobile Optimization: prevent text crunch & height mismatch */
    .stepper-glow-card {
        padding: 0.65rem 0.85rem !important;
        gap: 0.65rem !important;
        border-radius: 12px !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        hyphens: auto !important;
    }

    .stepper-num {
        width: 28px !important;
        height: 28px !important;
        border-radius: 8px !important;
        font-size: 0.8rem !important;
        flex-shrink: 0 !important;
    }

    .stepper-glow-card .small {
        font-size: 0.78rem !important;
        line-height: 1.3 !important;
    }

    /* Step Navigation Buttons: Stack vertically with full touch width and 44px touch target */
    .step-nav-buttons {
        flex-direction: column-reverse !important;
        gap: 0.75rem !important;
    }

    .step-nav-buttons .btn {
        width: 100% !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Tablet & Mobile Nav Collapse Breakpoint: max-width 1199.98px */
@media (max-width: 1199.98px) {
    .dropdown-menu-mega {
        width: 100% !important;
        max-height: 440px !important;
        overflow-y: auto !important;
    }
}

/* Desktop Max Widths */
@media (min-width: 1200px) {
    .container, .container-lg, .container-xl, .container-xxl {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container-wide {
        max-width: 1320px;
    }
}

/* --- 10.10 Unified Breadcrumb System (RTL & LTR Responsive) --- */
.breadcrumb {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.35rem 0.5rem !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    font-size: 0.85rem !important;
    font-family: 'Cairo', 'Inter', system-ui, sans-serif !important;
    font-weight: 500 !important;
}

.breadcrumb-item {
    display: inline-flex !important;
    align-items: center !important;
    color: #64748B !important;
    white-space: nowrap !important;
}

.breadcrumb-item a {
    color: #64748B !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.breadcrumb-item a:hover {
    color: #2563EB !important;
    text-decoration: underline !important;
}

.breadcrumb-item.active {
    color: #0F172A !important;
    font-weight: 700 !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    display: inline-block !important;
    color: #94A3B8 !important;
    content: "/" !important;
    padding-inline-start: 0.25rem !important;
    padding-inline-end: 0.5rem !important;
}

[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    content: "\\" !important;
}

/* --- 10.11 Unified Page Header Component --- */
.grc-page-header {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important;
    color: #FFFFFF !important;
    position: relative !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.grc-page-header::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3.5px !important;
    background: linear-gradient(90deg, #000000 0%, #000000 33.33%, #DD0000 33.33%, #DD0000 66.66%, #FFCC00 66.66%, #FFCC00 100%) !important;
    z-index: 2 !important;
}

.grc-page-header h1,
.grc-page-header .display-5,
.grc-page-header .display-6 {
    color: #FFFFFF !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
}

.grc-page-header p.lead,
.grc-page-header p.text-light,
.grc-page-header p.text-slate-300 {
    color: #CBD5E1 !important;
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
}

/* --- 10.12 Unified Modals System --- */
.modal-content {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.2) !important;
    overflow: hidden !important;
}

.modal-header {
    background: #F8FAFC !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 1.25rem 1.75rem !important;
}

.modal-body {
    padding: 1.75rem !important;
}

.modal-footer {
    background: #F8FAFC !important;
    border-top: 1px solid #E2E8F0 !important;
    padding: 1rem 1.75rem !important;
}

/* --- 10.13 Unified Pagination System --- */
.pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    margin: 0 !important;
    list-style: none !important;
    padding: 0 !important;
}

.page-item .page-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #334155 !important;
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.page-item .page-link.rounded-circle {
    border-radius: 50% !important;
}

.page-item.active .page-link {
    background-color: #2563EB !important;
    border-color: #2563EB !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 10px -2px rgba(37, 99, 235, 0.35) !important;
}

.page-item .page-link:hover:not(.active) {
    background-color: #F8FAFC !important;
    border-color: #94A3B8 !important;
    color: #0F172A !important;
    transform: translateY(-1px) !important;
}

.page-item.disabled .page-link {
    background-color: #F1F5F9 !important;
    border-color: #E2E8F0 !important;
    color: #94A3B8 !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
    transform: none !important;
}

/* --- 10.14 Unified Empty States System --- */
.grc-empty-state {
    text-align: center !important;
    padding: 3.5rem 1.5rem !important;
    background: #FFFFFF !important;
    border: 1.5px dashed #CBD5E1 !important;
    border-radius: 20px !important;
    max-width: 600px !important;
    margin: 2rem auto !important;
}

.grc-empty-icon {
    width: 68px !important;
    height: 68px !important;
    border-radius: 50% !important;
    background-color: #F1F5F9 !important;
    color: #64748B !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2rem !important;
    margin-bottom: 1.25rem !important;
}

.grc-empty-title {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    margin-bottom: 0.5rem !important;
}

.grc-empty-desc {
    color: #64748B !important;
    font-size: 0.92rem !important;
    max-width: 440px !important;
    margin: 0 auto 1.5rem !important;
    line-height: 1.6 !important;
}

/* --- 10.15 In-Page Sticky Elements & Mobile Clearance --- */
main .sticky-top:not(header) {
    top: 96px !important;
    z-index: 20 !important;
}

@media (max-width: 991.98px) {
    main .sticky-top:not(header) {
        position: static !important;
    }
}

/* --- 10.16 Alerts & Validation Non-Empty Guard --- */
.alert:empty,
.alert-danger:empty,
.validation-summary-valid,
div[data-valmsg-summary="true"].validation-summary-valid,
.alert.validation-summary-valid,
.alert[data-valmsg-summary="true"]:not(.validation-summary-errors) {
    display: none !important;
}

/* --- 10.17 Unified Badges & Tags --- */
.badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    font-family: 'Cairo', 'Inter', system-ui, sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    border-radius: 9999px !important;
    letter-spacing: 0.01em !important;
}

/* Breadcrumbs in Hero & Dark Sections */
.text-white .breadcrumb-item a,
.position-relative.text-white .breadcrumb-item a,
[class*="hero"] .breadcrumb-item a,
.employers-hero .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.85) !important;
}

.text-white .breadcrumb-item.active,
.position-relative.text-white .breadcrumb-item.active,
[class*="hero"] .breadcrumb-item.active,
.employers-hero .breadcrumb-item.active {
    color: #FFFFFF !important;
}

.text-white .breadcrumb-item + .breadcrumb-item::before,
.position-relative.text-white .breadcrumb-item + .breadcrumb-item::before,
[class*="hero"] .breadcrumb-item + .breadcrumb-item::before,
.employers-hero .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* --- 10.18 Unified Request Form Cards (FileCoordination, Insurance, Marketing Requests) --- */
.max-w-4xl > .card.rounded-4,
.max-w-4xl > .card.shadow-sm.rounded-4 {
    border: 1px solid #E2E8F0 !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.06), 0 4px 10px -2px rgba(15, 23, 42, 0.03) !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: #FFFFFF !important;
}

.max-w-4xl > .card.rounded-4 > .text-center.mb-4,
.max-w-4xl > .card.shadow-sm.rounded-4 > .text-center.mb-4 {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important;
    padding: 2.25rem 2rem !important;
    margin-bottom: 0 !important;
    position: relative !important;
    color: #FFFFFF !important;
}

.max-w-4xl > .card.rounded-4 > .text-center.mb-4::after,
.max-w-4xl > .card.shadow-sm.rounded-4 > .text-center.mb-4::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3.5px !important;
    background: linear-gradient(90deg, #000000 0%, #000000 33.33%, #DD0000 33.33%, #DD0000 66.66%, #FFCC00 66.66%, #FFCC00 100%) !important;
}

.max-w-4xl > .card.rounded-4 > .text-center.mb-4 h2,
.max-w-4xl > .card.shadow-sm.rounded-4 > .text-center.mb-4 h2 {
    color: #FFFFFF !important;
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 0.45rem !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.max-w-4xl > .card.rounded-4 > .text-center.mb-4 p,
.max-w-4xl > .card.shadow-sm.rounded-4 > .text-center.mb-4 p {
    color: #E2E8F0 !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    opacity: 0.95 !important;
    margin-bottom: 0 !important;
}

.max-w-4xl > .card.rounded-4 > form,
.max-w-4xl > .card.shadow-sm.rounded-4 > form {
    padding: 2.25rem !important;
}

@media (max-width: 575.98px) {
    .max-w-4xl > .card.rounded-4 > .text-center.mb-4,
    .max-w-4xl > .card.shadow-sm.rounded-4 > .text-center.mb-4 {
        padding: 1.5rem 1rem !important;
    }
    .max-w-4xl > .card.rounded-4 > .text-center.mb-4 h2,
    .max-w-4xl > .card.shadow-sm.rounded-4 > .text-center.mb-4 h2 {
        font-size: 1.25rem !important;
    }
    .max-w-4xl > .card.rounded-4 > form,
    .max-w-4xl > .card.shadow-sm.rounded-4 > form {
        padding: 1.25rem 1rem !important;
    }
}

/* ==========================================================================
   10.19 GRC Service Pages Visual Consistency System (Showcase & Form Pages)
   ========================================================================== */
.grc-service-showcase.grc-inner-split-hero {
    background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%) !important;
    color: #0F172A !important;
    border-bottom: none !important;
    padding: 2.5rem 0 4.5rem 0 !important;
}

.grc-service-showcase.grc-inner-split-hero::before {
    display: none !important;
}

.grc-service-showcase.grc-inner-split-hero p {
    color: #475569 !important;
    border-inline-start: none !important;
    padding-inline-start: 0 !important;
    max-width: none !important;
}

.grc-service-showcase.grc-inner-split-hero h1,
.grc-service-showcase.grc-inner-split-hero .display-4,
.grc-service-showcase.grc-inner-split-hero .display-5 {
    color: #0F172A !important;
}

.grc-service-showcase-container {
    max-width: 1440px !important;
    width: 96% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.grc-service-form-container {
    max-width: 1320px !important;
    width: 96% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Dark Corporate Hero Banner inside Showcase Pages */
.grc-showcase-hero-card {
    background: linear-gradient(135deg, #0B132B 0%, #1E293B 55%, #0F172A 100%) !important;
    border-radius: 22px !important;
    padding: 3rem 2.5rem !important;
    margin-bottom: 2.75rem !important;
    position: relative !important;
    overflow: hidden !important;
    border-bottom: 4px solid #D97706 !important;
    box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.18) !important;
    text-align: center;
    color: #FFFFFF !important;
}

.grc-showcase-hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}

.grc-showcase-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.45rem 1.2rem !important;
    background: rgba(245, 158, 11, 0.16) !important;
    border: 1px solid rgba(245, 158, 11, 0.45) !important;
    border-radius: 999px !important;
    color: #FBBF24 !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    margin-bottom: 1.15rem !important;
    position: relative;
    z-index: 1;
}

.grc-service-showcase.grc-inner-split-hero .grc-showcase-hero-card h1,
.grc-service-showcase.grc-inner-split-hero .grc-showcase-hero-card .display-4,
.grc-service-showcase.grc-inner-split-hero .grc-showcase-hero-card .display-5,
.grc-showcase-hero-card h1,
.grc-showcase-hero-card .display-4,
.grc-showcase-hero-card .display-5 {
    color: #FFFFFF !important;
    font-size: clamp(1.75rem, 2.6vw, 2.45rem) !important;
    font-weight: 800 !important;
    line-height: 1.28 !important;
    letter-spacing: -0.015em !important;
    margin-bottom: 1rem !important;
    text-align: inherit !important;
    position: relative;
    z-index: 1;
}

.grc-service-showcase.grc-inner-split-hero .grc-showcase-hero-card p,
.grc-service-showcase.grc-inner-split-hero .grc-showcase-hero-card .lead,
.grc-showcase-hero-card p,
.grc-showcase-hero-card .lead {
    color: #E2E8F0 !important;
    font-size: 1.04rem !important;
    line-height: 1.75 !important;
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
    border-inline-start: none !important;
    padding-inline-start: 0 !important;
    text-align: inherit !important;
    position: relative;
    z-index: 1;
}

/* Section Headers */
.grc-showcase-section-header {
    text-align: center;
    margin-bottom: 2.25rem;
}

.grc-showcase-section-header h2 {
    color: #0F172A !important;
    font-size: clamp(1.4rem, 2vw, 1.85rem) !important;
    font-weight: 800 !important;
    margin-bottom: 0.65rem !important;
}

.grc-showcase-section-header .grc-divider-bar {
    width: 64px;
    height: 4px;
    background: linear-gradient(90deg, #D97706 0%, #2563EB 100%);
    border-radius: 999px;
    margin: 0 auto 0.85rem auto;
}

/* Elevated Corporate Service Cards */
.grc-showcase-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-top: 4px solid #2563EB !important;
    border-radius: 18px !important;
    padding: 2rem !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05), 0 4px 10px -3px rgba(15, 23, 42, 0.03) !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.grc-showcase-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 35px -8px rgba(15, 23, 42, 0.1), 0 6px 14px -4px rgba(15, 23, 42, 0.05) !important;
}

.grc-showcase-card.accent-gold {
    border-top-color: #D97706 !important;
}

.grc-showcase-card.accent-emerald {
    border-top-color: #059669 !important;
}

.grc-showcase-card.accent-indigo {
    border-top-color: #4F46E5 !important;
}

.grc-showcase-card h3,
.grc-showcase-card h4,
.grc-showcase-card h5 {
    color: var(--grc-navy, #111C35) !important;
    font-weight: 800 !important;
}

.grc-showcase-card p {
    color: var(--grc-text-secondary, #526174) !important;
    line-height: 1.72 !important;
}

.grc-showcase-icon-box {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    flex-shrink: 0;
    background: rgba(37, 99, 235, 0.09);
    color: #1D4ED8;
}

.grc-showcase-icon-box.gold {
    background: rgba(217, 119, 6, 0.12);
    color: #D97706;
}

.grc-showcase-icon-box.emerald {
    background: rgba(5, 150, 105, 0.12);
    color: #059669;
}

/* Dark Corporate Bottom CTA Banner */
.grc-showcase-cta-banner {
    background: linear-gradient(135deg, #0B132B 0%, #1E293B 100%) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-top: 4px solid #D97706 !important;
    padding: 2.75rem 2.25rem !important;
    color: #FFFFFF !important;
    box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.18) !important;
    text-align: center;
}

.grc-showcase-cta-banner h2,
.grc-showcase-cta-banner h3,
.grc-showcase-cta-banner h4 {
    color: #FFFFFF !important;
    font-weight: 800 !important;
}

.grc-showcase-cta-banner p {
    color: #E2E8F0 !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.75 !important;
}

@media (max-width: 767.98px) {
    .grc-showcase-hero-card {
        padding: 2rem 1.25rem !important;
        margin-bottom: 2rem !important;
    }
    .grc-showcase-card {
        padding: 1.5rem 1.25rem !important;
    }
    .grc-showcase-cta-banner {
        padding: 2rem 1.25rem !important;
    }
}

/* ==========================================================================
   UNIFIED BRAND FALLBACK IMAGE SYSTEM (German Resources Company Official Standard)
   Consistent, Professional GRC Logo Placeholders Across All Sections
   ========================================================================== */
.grc-img-fallback-container {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #F8FAFC 0%, #F1F5F9 100%) !important;
    border: 1px solid #E2E8F0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 1.25rem !important;
    user-select: none !important;
    box-sizing: border-box !important;
    transition: background-color 0.25s ease, border-color 0.25s ease !important;
}

.grc-img-fallback-container.d-none {
    display: none !important;
}

.grc-img-fallback-logo {
    max-width: 65% !important;
    max-height: 55% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.08)) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: block !important;
    margin: auto !important;
}

.grc-img-fallback-container:hover .grc-img-fallback-logo,
.grc-partner-card:hover .grc-img-fallback-logo,
.grc-initiative-card:hover .grc-img-fallback-logo,
.grc-article-card:hover .grc-img-fallback-logo,
.grc-editorial-article-card:hover .grc-img-fallback-logo {
    transform: scale(1.04) !important;
}

.grc-img-fallback-brand {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    color: #64748B !important;
    margin-top: 0.45rem !important;
    text-align: center !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 90% !important;
}

/* Dark mode compatibility if theme applied */
[data-bs-theme="dark"] .grc-img-fallback-container,
.dark .grc-img-fallback-container {
    background: linear-gradient(145deg, #0F172A 0%, #1E293B 100%) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .grc-img-fallback-brand,
.dark .grc-img-fallback-brand {
    color: #94A3B8 !important;
}

/* Suppress zoom badge overlay and disable modal trigger when displaying fallback logo */
.partner-card-media:has(.grc-img-fallback-logo) .badge,
.partner-card-media.grc-img-fallback-container .badge,
.grc-gallery-trigger:has(.grc-img-fallback-logo) .badge {
    display: none !important;
}

.partner-card-media:has(.grc-img-fallback-logo) .grc-gallery-trigger,
.grc-gallery-trigger:has(.grc-img-fallback-logo) {
    pointer-events: none !important;
    cursor: default !important;
}