/*
====================================================================
COMBINED PROCESS PAGE CSS - COMPLETED VERSION
====================================================================
Merged styles from process-page.css and process-shortcodes.css for the animated process page 
and process-related shortcodes/widgets. Includes interactive timeline, progress indicators, 
floating elements, modern animations, and enhanced Success Metrics Section.
====================================================================
*/

/* ===================================
   CSS VARIABLES & ROOT STYLES
   =================================== */
:root {
    --primary-blue: #1e40af;
    --secondary-purple: #7c3aed;
    --success-green: #10b981;
    --bg-light: #f8fafc;
    --text-dark: #1f2937;
    --text-light: #6b7280;
    --border-radius: 12px;
    --border-radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 10px 20px rgba(0, 0, 0, 0.15);
    --gradient-primary: linear-gradient(135deg, #1e40af, #7c3aed);
    --transition: all 0.3s ease;
}

/* ===================================
   PROCESS HERO SECTION
   =================================== */
.process-hero {
    background: #1e40af; /* Fallback */
    background: var(--gradient-primary);
    color: white;
    padding: 8rem 0 5rem 0;
    margin-top: 80px;
    position: relative;
    overflow: hidden;
    text-align: center;
    min-height: 100vh;
    display: flex;
    align-items: center;
    z-index: 1;
}

.process-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="process-bg" cx="50%" cy="50%"><stop offset="0%" stop-color="white" stop-opacity="0.1"/><stop offset="100%" stop-color="white" stop-opacity="0"/></radialGradient></defs><circle cx="200" cy="200" r="100" fill="url(%23process-bg)"/><circle cx="800" cy="400" r="150" fill="url(%23process-bg)"/><circle cx="400" cy="800" r="120" fill="url(%23process-bg)"/></svg>');
    animation: float 30s ease-in-out infinite;
}

.process-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    margin-bottom: 1.5rem;
    color: white;
    position: relative;
    z-index: 2;
    line-height: 1.2;
}

.process-subtitle {
    font-size: 1.25rem;
    margin-bottom: 4rem;
    opacity: 0.9;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 2;
}

/* Hero Content */
.hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
    text-align: center;
    padding: 2rem 0;
}

/* Container */
.container {
    position: relative;
    z-index: 10;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ===================================
   FLOATING ELEMENTS & PARTICLE SYSTEM
   =================================== */
.floating-elements {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

.floating-element {
    position: absolute;
    font-size: 2rem;
    opacity: 0.1;
    animation: float 6s ease-in-out infinite;
    filter: blur(0.5px);
    z-index: -1;
}

.floating-element.shield { top: 10%; left: 15%; animation-delay: 0s; }
.floating-element.certificate { top: 20%; right: 20%; animation-delay: 1s; }
.floating-element.gear { top: 60%; left: 10%; animation-delay: 2s; animation-duration: 8s; }
.floating-element.check { top: 70%; right: 15%; animation-delay: 3s; }
.floating-element.lock { top: 40%; left: 5%; animation-delay: 4s; }
.floating-element.chart { top: 80%; right: 25%; animation-delay: 5s; }

.particle-system {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -2;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: particleFloat var(--duration) linear infinite;
    animation-delay: var(--delay);
    z-index: -2;
}

.particle:nth-child(1) { left: 10%; }
.particle:nth-child(2) { left: 20%; }
.particle:nth-child(3) { left: 30%; }
.particle:nth-child(4) { left: 70%; }
.particle:nth-child(5) { left: 80%; }
.particle:nth-child(6) { left: 90%; }

/* Floating Shapes */
.floating-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -2;
}

.shape {
    position: absolute;
    opacity: 0.05;
    animation: shapeFloat 10s linear infinite;
    z-index: -2;
}

.circle-1 {
    width: 100px;
    height: 100px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    top: 15%;
    left: 80%;
    animation-delay: 0s;
}

.circle-2 {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    top: 75%;
    left: 5%;
    animation-delay: 3s;
}

.triangle-1 {
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 52px solid rgba(255, 255, 255, 0.1);
    top: 30%;
    right: 10%;
    animation-delay: 6s;
}

.square-1 {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(45deg);
    top: 50%;
    left: 85%;
    animation-delay: 8s;
}

.hexagon-1 {
    width: 50px;
    height: 28.87px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    top: 25%;
    left: 5%;
    animation-delay: 4s;
}

.hexagon-1:before,
.hexagon-1:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
}

.hexagon-1:before {
    bottom: 100%;
    border-bottom: 14.43px solid rgba(255, 255, 255, 0.1);
}

.hexagon-1:after {
    top: 100%;
    border-top: 14.43px solid rgba(255, 255, 255, 0.1);
}

/* Hide Floating Elements in Process Hero Section */
.floating-elements .floating-element,
.floating-elements .particle-system,
.floating-elements .floating-shapes {
    display: none;
}

/* Keep floating-elements container visible but hide only its children */
.floating-elements {
    display: block; /* Keep container visible */
}


/* ===================================
   PROCESS STATS GRID
   =================================== */
.process-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin: 3rem auto;
    max-width: 1000px;
    position: relative;
    z-index: 100; /* Increased z-index */
    visibility: visible !important;
    opacity: 1 !important;
}

.process-stats-grid.interactive-dashboard {
    position: relative;
    z-index: 100;
    display: grid !important;
}

/* Enhanced visibility for interactive stats */
.interactive-stat {
    position: relative;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(255, 255, 255, 0.4); /* More visible border */
    overflow: visible;
    /* ENHANCED: More opaque background for better visibility */
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 1rem;
    border-radius: 16px;
    text-align: center;
    min-height: 100px;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(15px)) {
    .interactive-stat {
        background: rgba(255, 255, 255, 0.3) !important;
        border: 2px solid rgba(255, 255, 255, 0.5);
    }
}

.interactive-stat:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.3) !important;
}

/* Make stat content more visible */
.stat-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    position: relative;
    z-index: 3;
}

.stat-number {
    font-size: 3rem;
    font-weight: 900;
    color: white;
    display: block;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 3;
}

.stat-label {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: white;
    position: relative;
    z-index: 3;
}

.stat-description {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9); /* More visible text */
    margin-top: 0.5rem;
    opacity: 1; /* Always visible */
    transform: translateY(0); /* Always in position */
    transition: all 0.3s ease;
    position: relative;
    z-index: 3;
}

/* Interactive Stats */
.interactive-stat {
    position: relative;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    overflow: visible;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: 16px;
    text-align: center;
}

.interactive-stat:hover {
    transform: translateY(-10px) scale(1.05);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.stat-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1));
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.interactive-stat:hover .stat-background {
    opacity: 1;
}

.stat-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.stat-number {
    font-size: 3rem;
    font-weight: 900;
    color: white;
    display: block;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: white;
}

.stat-description {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.5rem;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.interactive-stat:hover .stat-description {
    opacity: 1;
    transform: translateY(0);
}

/* Enhanced Tooltips */
/* ===================================
   ADAPTIVE TOOLTIP POSITIONING SYSTEM
   Smart positioning that adapts to screen space
   =================================== */

/* ===================================
   STAT TOOLTIPS ABOVE CARDS - COMPLETE FIX
   Replace your existing .stat-tooltip styles with this
   =================================== */

/* Enhanced Tooltips - White background, positioned ABOVE the cards */
.stat-tooltip {
    position: absolute;
    bottom: calc(100% + 15px); /* Position ABOVE the card */
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff !important; /* Force white background */
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    width: 320px;
    max-width: 90vw;
    z-index: 1000; /* Higher z-index to ensure it appears above everything */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-dark) !important;
    pointer-events: none; /* Prevent tooltip from interfering with hover */
}

/* Show tooltip on hover - applies to ALL stat cards */
.interactive-stat:hover .stat-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(-5px); /* Slight upward movement on hover */
}

/* Downward-pointing arrow (tooltip is above, arrow points down to card) */
.stat-tooltip::before {
    content: '';
    position: absolute;
    bottom: -9px; /* Position at bottom of tooltip */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #ffffff; /* Arrow pointing DOWN */
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}

/* Tooltip content styling */
.stat-tooltip h4 {
    font-size: 1.25rem !important;
    margin-bottom: 1rem !important;
    color: var(--primary-blue) !important;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.stat-tooltip p {
    font-size: 0.9rem !important;
    color: #4a5568 !important;
    margin-bottom: 1rem !important;
    line-height: 1.6;
    text-align: left;
}

.stat-tooltip ul,
.stat-tooltip .success-breakdown,
.stat-tooltip .phases-list,
.stat-tooltip .company-breakdown {
    font-size: 0.875rem;
    color: var(--text-dark) !important;
}

.stat-tooltip ul li {
    margin-bottom: 0.5rem;
    padding: 0.25rem 0;
    color: #4a5568 !important;
    position: relative;
    padding-left: 1rem;
}

.stat-tooltip ul li::before {
    content: '•';
    color: var(--primary-blue);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Breakdown items styling */
.breakdown-item,
.phase-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: #f8fafc !important;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    border: 1px solid #e2e8f0;
}

.phase-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.phase-number {
    width: 28px;
    height: 28px;
    background: var(--primary-blue) !important;
    color: white !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
}

.phase-info {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.phase-name {
    font-weight: 600;
    color: var(--text-dark) !important;
}

.phase-duration {
    font-size: 0.75rem;
    color: #6b7280 !important;
    background: white !important;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    border: 1px solid #d1d5db;
}

/* Success breakdown styling */
.success-breakdown {
    background: #f0f9ff !important;
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1rem;
    border: 1px solid #bae6fd;
}

.breakdown-item .cert-type {
    font-weight: 600;
    color: var(--text-dark) !important;
}

.breakdown-item .cert-rate {
    color: #059669 !important;
    font-weight: 700;
    background: #d1fae5 !important;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    border: 1px solid #a7f3d0;
}

/* Company breakdown chart - specifically for companies card */
.company-breakdown {
    margin-top: 1rem;
    background: #fefefe !important;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.breakdown-chart {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.chart-segment {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
}

.chart-segment.saas { 
    background: #dbeafe !important; 
    color: #1e40af !important;
    border-left: 4px solid #3b82f6;
}
.chart-segment.healthcare { 
    background: #d1fae5 !important; 
    color: #065f46 !important;
    border-left: 4px solid #10b981;
}
.chart-segment.fintech { 
    background: #fef3c7 !important; 
    color: #92400e !important;
    border-left: 4px solid #f59e0b;
}
.chart-segment.automotive { 
    background: #fee2e2 !important; 
    color: #991b1b !important;
    border-left: 4px solid #ef4444;
}

.segment-label {
    font-weight: 600;
}

/* Specific fix for all stat cards to ensure tooltips appear above */
.interactive-stat[data-category="timeline"] .stat-tooltip,
.interactive-stat[data-category="success"] .stat-tooltip,
.interactive-stat[data-category="phases"] .stat-tooltip,
.interactive-stat[data-category="companies"] .stat-tooltip {
    position: absolute !important;
    bottom: calc(100% + 15px) !important; /* All tooltips above */
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #ffffff !important;
    z-index: 1000 !important;
}

.interactive-stat[data-category="timeline"]:hover .stat-tooltip,
.interactive-stat[data-category="success"]:hover .stat-tooltip,
.interactive-stat[data-category="phases"]:hover .stat-tooltip,
.interactive-stat[data-category="companies"]:hover .stat-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(-5px) !important;
}

/* Mobile responsive tooltips */
@media (max-width: 768px) {
    .stat-tooltip {
        width: 300px;
        max-width: 95vw;
        padding: 1.25rem;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .stat-tooltip h4 {
        font-size: 1.1rem !important;
    }
    
    .stat-tooltip p {
        font-size: 0.85rem !important;
    }
    
    .phase-item {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    
    .phase-info {
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
        text-align: center;
    }
    
    .breakdown-item {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    
    .chart-segment {
        flex-direction: column;
        gap: 0.25rem;
        text-align: center;
    }
}

/* Ensure tooltips stay visible when hovering and positioned correctly */
.interactive-stat {
    position: relative;
    overflow: visible; /* Allow tooltips to extend beyond card boundaries */
}

.interactive-stat:hover {
    overflow: visible;
}

/* Remove any conflicting styles that might make tooltips appear below */
.process-stats-grid .stat-tooltip {
    background: #ffffff !important;
    opacity: 1 !important;
    bottom: calc(100% + 15px) !important;
    top: auto !important;
}

.process-stats-grid .interactive-stat:hover .stat-tooltip {
    background: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    bottom: calc(100% + 15px) !important;
    top: auto !important;
}

/* Override any existing top positioning */
.stat-tooltip[style*="top"] {
    top: auto !important;
    bottom: calc(100% + 15px) !important;
}

/* Force arrow to point downward for all tooltips */
.stat-tooltip::before {
    top: auto !important;
    bottom: -9px !important;
    border-top: 9px solid #ffffff !important;
    border-bottom: none !important;
}

/* ===================================
   ADAPTIVE POSITIONING CLASSES
   Applied by JavaScript based on screen position
   =================================== */

/* Position Above (when not enough space below) */
.stat-tooltip.position-above {
    top: auto;
    bottom: calc(100% + 15px);
    transform: translateX(-50%);
}

.stat-tooltip.position-above::before {
    top: auto;
    bottom: -9px;
    border-top: 9px solid #ffffff;
    border-bottom: none;
}

/* Position Left (when too close to right edge) */
.stat-tooltip.position-left {
    left: auto;
    right: 0;
    transform: translateX(0);
}

.stat-tooltip.position-left::before {
    left: auto;
    right: 20px;
    transform: translateX(0);
}

/* Position Right (when too close to left edge) */
.stat-tooltip.position-right {
    left: 0;
    right: auto;
    transform: translateX(0);
}

.stat-tooltip.position-right::before {
    left: 20px;
    right: auto;
    transform: translateX(0);
}

/* Position Above + Left */
.stat-tooltip.position-above.position-left {
    bottom: calc(100% + 15px);
    right: 0;
    transform: translateX(0);
}

.stat-tooltip.position-above.position-left::before {
    bottom: -9px;
    right: 20px;
    left: auto;
    border-top: 9px solid #ffffff;
    border-bottom: none;
}

/* Position Above + Right */
.stat-tooltip.position-above.position-right {
    bottom: calc(100% + 15px);
    left: 0;
    transform: translateX(0);
}

.stat-tooltip.position-above.position-right::before {
    bottom: -9px;
    left: 20px;
    right: auto;
    border-top: 9px solid #ffffff;
    border-bottom: none;
}

/* Mobile adaptive positioning */
@media (max-width: 768px) {
    .stat-tooltip {
        width: 280px;
        max-width: 95vw;
        padding: 1.25rem;
    }
    
    /* On mobile, always center horizontally if possible */
    .stat-tooltip.mobile-center {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }
    
    .stat-tooltip.mobile-center::before {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }
    
    /* Mobile full-width option for very small screens */
    .stat-tooltip.mobile-fullwidth {
        left: 5px !important;
        right: 5px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
    }
    
    .stat-tooltip.mobile-fullwidth::before {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

/* ===================================
   VIEWPORT EDGE DETECTION STYLES
   =================================== */

/* When tooltip would go off left edge */
.stat-tooltip.edge-left {
    left: 10px !important;
    transform: translateX(0) !important;
}

.stat-tooltip.edge-left::before {
    left: 30px !important;
    transform: translateX(0) !important;
}

/* When tooltip would go off right edge */
.stat-tooltip.edge-right {
    right: 10px !important;
    left: auto !important;
    transform: translateX(0) !important;
}

.stat-tooltip.edge-right::before {
    right: 30px !important;
    left: auto !important;
    transform: translateX(0) !important;
}

/* ===================================
   ANIMATION VARIANTS FOR DIFFERENT POSITIONS
   =================================== */

/* Smooth transitions for position changes */
.interactive-stat:hover .stat-tooltip.position-above {
    transform: translateX(-50%) translateY(-5px);
}

.interactive-stat:hover .stat-tooltip.position-left {
    transform: translateX(-10px);
}

.interactive-stat:hover .stat-tooltip.position-right {
    transform: translateX(10px);
}

.interactive-stat:hover .stat-tooltip.position-above.position-left {
    transform: translateX(-10px) translateY(-5px);
}

.interactive-stat:hover .stat-tooltip.position-above.position-right {
    transform: translateX(10px) translateY(-5px);
}

/* ===================================
   TOOLTIP CONTENT STYLES
   =================================== */

.stat-tooltip h4 {
    font-size: 1.25rem !important;
    margin-bottom: 1rem !important;
    color: var(--primary-blue) !important;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.stat-tooltip p {
    font-size: 0.9rem !important;
    color: #4a5568 !important;
    margin-bottom: 1rem !important;
    line-height: 1.6;
    text-align: left;
}

.stat-tooltip ul li {
    margin-bottom: 0.5rem;
    padding: 0.25rem 0;
    color: #4a5568 !important;
    position: relative;
    padding-left: 1rem;
}

.stat-tooltip ul li::before {
    content: '•';
    color: var(--primary-blue);
    position: absolute;
    left: 0;
    font-weight: bold;
}

.breakdown-item,
.phase-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: #f8fafc !important;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    border: 1px solid #e2e8f0;
}

.phase-number {
    width: 28px;
    height: 28px;
    background: var(--primary-blue) !important;
    color: white !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
}

.success-breakdown {
    background: #f0f9ff !important;
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1rem;
    border: 1px solid #bae6fd;
}

.breakdown-item .cert-rate {
    color: #059669 !important;
    font-weight: 700;
    background: #d1fae5 !important;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    border: 1px solid #a7f3d0;
}

.company-breakdown {
    margin-top: 1rem;
    background: #fefefe !important;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.chart-segment {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.chart-segment.saas { 
    background: #dbeafe !important; 
    color: #1e40af !important;
    border-left: 4px solid #3b82f6;
}

.chart-segment.healthcare { 
    background: #d1fae5 !important; 
    color: #065f46 !important;
    border-left: 4px solid #10b981;
}

.chart-segment.fintech { 
    background: #fef3c7 !important; 
    color: #92400e !important;
    border-left: 4px solid #f59e0b;
}

.chart-segment.automotive { 
    background: #fee2e2 !important; 
    color: #991b1b !important;
    border-left: 4px solid #ef4444;
}


/* Dashboard Controls */
.dashboard-controls {
    grid-column: 1 / -1;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 100;
    visibility: visible !important;
    opacity: 1 !important;
    flex-wrap: wrap;
}

.dashboard-control {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    /* ENHANCED: More visible background */
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 25px;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    position: relative;
    z-index: 3;
}

/* Fallback for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(10px)) {
    .dashboard-control {
        background: rgba(255, 255, 255, 0.35) !important;
        border: 2px solid rgba(255, 255, 255, 0.5);
    }
}

.dashboard-control:hover,
.dashboard-control.active {
    background: rgba(255, 255, 255, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.control-icon {
    font-size: 1rem;
}

.control-label {
    font-weight: 600;
}

/* ===================================
   RESPONSIVE FIXES
   =================================== */

@media (max-width: 768px) {
    .process-stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin: 2rem auto;
    }
    
    .dashboard-controls {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .dashboard-control {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
    
    .interactive-stat {
        padding: 1.5rem;
        min-height: 150px;
    }
}
.process-stats-grid {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.interactive-stat {
    background: rgba(255, 255, 255, 0.25) !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
}

.dashboard-controls {
    display: flex !important;
    visibility: visible !important;
}
/* Process Navigation */
.process-navigation {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 3rem;
}

.process-nav-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 0.75rem 1.5rem;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: var(--transition);
}

.process-nav-btn:hover,
.process-nav-btn.active {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
}

.nav-number {
    width: 24px;
    height: 24px;
    background: white;
    color: var(--primary-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
}

.nav-text {
    font-size: 0.875rem;
    font-weight: 600;
}

/* ===================================
   INTERACTIVE TIMELINE SECTION
   =================================== */
.interactive-timeline-section {
    padding: 6rem 0;
    background: var(--bg-light);
    width: 100%;
    min-height: 100vh; /* Ensure full viewport height */
}

.interactive-timeline-section .container {
    max-width: 100%; /* Remove width constraint */
    width: 95%; /* Use most of the available width */
    margin: 0 auto;
    padding: 0 2rem;
}

.timeline-progress-container {
    max-width: 100%; /* Remove 900px constraint */
    width: 100%;
    margin: 0 auto 4rem;
}

.timeline-progress-track {
    background: #e5e7eb;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}

.timeline-progress-fill {
    background: var(--primary-blue);
    height: 100%;
    width: 0;
    transition: width 0.5s ease;
}

.timeline-milestones {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}

.milestone {
    text-align: center;
    flex: 1;
    position: relative;
}

.milestone-number {
    width: 32px;
    height: 32px;
    background: #e5e7eb;
    color: var(--text-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem;
    font-weight: 600;
    transition: var(--transition);
}

.milestone.active .milestone-number {
    background: var(--primary-blue);
    color: white;
}

.milestone-label {
    font-size: 0.875rem;
    color: var(--text-light);
}

.milestone.active .milestone-label {
    color: var(--text-dark);
    font-weight: 600;
}


.step-content {
    background: white;
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
}

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

.step-icon {
    font-size: 2.5rem;
}

.step-title-area {
    flex: 1;
}

.step-title-area h2 {
    font-size: 1.75rem;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.step-duration {
    font-size: 0.875rem;
    color: var(--text-light);
    display: block;
}

.step-tags {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.step-tag {
    background: #e5e7eb;
    color: var(--text-dark);
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
}

.step-tag.critical {
    background: var(--primary-blue);
    color: white;
}

.step-progress {
    position: relative;
}

.progress-circle {
    position: relative;
    width: 60px;
    height: 60px;
}

.progress-ring-circle {
    stroke: #e5e7eb;
    stroke-width: 4;
    transition: stroke-dashoffset 0.5s ease;
}

.progress-percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-dark);
}

.step-description p {
    font-size: 1rem;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
}

.step-details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem;
    margin-bottom: 2rem;
    width: 100%;
    align-items: stretch;
}

.detail-card {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    min-width: 0;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.detail-card ul {
    flex: 1;
}

.detail-card h4 {
    font-size: 1.25rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-card ul {
    list-style: none;
    padding: 0;
}

.detail-card ul li {
    font-size: 0.875rem;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    position: relative;
    padding-left: 1.5rem;
}

.detail-card ul li:before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--primary-blue);
    font-size: 1.25rem;
}

.interactive-checklist {
    margin-top: 2rem;
}

.interactive-checklist h4 {
    font-size: 1.25rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.checklist-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.checklist-item:hover {
    background: #e5e7eb;
}

.checklist-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-blue);
}

.checklist-item label {
    flex: 1;
    font-size: 0.875rem;
    color: var(--text-dark);
}

.activity-duration {
    font-size: 0.75rem;
    color: var(--text-light);
}

/* ===================================
   SUCCESS METRICS SECTION
   =================================== */
.success-metrics-section {
    padding: 6rem 0;
    background: white;
    text-align: center;
}

.section-title {
    font-size: clamp(2rem, 4vw, 2.5rem);
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.25rem;
    color: var(--text-light);
    margin-bottom: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.metrics-interactive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto 3rem;
}

.metric-card {
    background: white;
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    text-align: center;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
    cursor: pointer;
}

.metric-card:hover,
.metric-card:focus {
    transform: translateY(-10px) scale(1.05);
    box-shadow: var(--shadow-xl);
}

.metric-card.animated {
    animation: fadeInUp 0.6s ease forwards;
}

.metric-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-primary);
    opacity: 0;
    border-radius: inherit;
    transition: opacity 0.3s ease;
}

.metric-card:hover .metric-background {
    opacity: 0.05;
}

.metric-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--primary-blue);
}

.metric-value {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.metric-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.metric-description {
    font-size: 0.875rem;
    color: var(--text-light);
}

.metric-progress-bar {
    margin-top: 1rem;
}

.progress-bar-track {
    background: #e5e7eb;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    background: var(--success-green);
    height: 100%;
    width: 0;
    transition: width 1s ease;
}

.industry-breakdown {
    max-width: 900px;
    margin: 0 auto;
}

.industry-breakdown h3 {
    font-size: 1.75rem;
    color: var(--text-dark);
    margin-bottom: 2rem;
}

.industry-charts {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.industry-chart {
    text-align: left;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.industry-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.industry-percentage {
    font-size: 0.875rem;
    color: var(--text-light);
}

.chart-bar {
    background: #e5e7eb;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
}

.chart-fill {
    background: var(--primary-blue);
    height: 100%;
    width: 0;
    transition: width 1s ease;
}

/* ===================================
   PROCESS CTA SECTION
   =================================== */
.process-cta-section {
    padding: 6rem 0;
    background: var(--gradient-primary);
    color: white;
    text-align: center;
}

.cta-content {
    max-width: 900px;
    margin: 0 auto;
}

.cta-content h2 {
    font-size: clamp(2rem, 4vw, 2.5rem);
    margin-bottom: 1rem;
}

.cta-content p {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 3rem;
}

.cta-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.cta-option {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    transition: var(--transition);
}

.cta-option:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-10px);
}

.cta-option.primary {
    border: 2px solid var(--success-green);
}

.cta-option.secondary {
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.option-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.cta-option h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.cta-option p {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: 1.5rem;
}

.cta-primary,
.cta-secondary {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.cta-primary {
    background: var(--success-green);
    color: white;
}

.cta-primary:hover {
    background: #059669;
}

.cta-secondary {
    background: transparent;
    border: 2px solid white;
    color: white;
}

.cta-secondary:hover {
    background: white;
    color: var(--primary-blue);
}

.guarantee-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
}

.guarantee-icon {
    font-size: 1.25rem;
}

/* ===================================
   ANIMATIONS
   =================================== */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

@keyframes particleFloat {
    0% { transform: translateY(0); opacity: 0.2; }
    50% { opacity: 0.5; }
    100% { transform: translateY(-100vh); opacity: 0; }
}

@keyframes shapeFloat {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(180deg); }
    100% { transform: translateY(0) rotate(360deg); }
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

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

/* ===================================
   RESPONSIVE DESIGN
   =================================== */
@media (max-width: 1024px) {
    .process-hero {
        padding: 6rem 0 4rem;
    }

    .process-title {
        font-size: clamp(2rem, 4vw, 3rem);
    }

    .process-subtitle {
        font-size: 1rem;
    }

    .process-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 1.5rem;
    }

    .interactive-stat {
        padding: 1.5rem;
    }

    .stat-number {
        font-size: 2.5rem;
    }

    .metrics-interactive-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .metric-card {
        padding: 1.5rem;
    }

    .metric-value {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }

    .process-hero {
        padding: 5rem 0 3rem;
        min-height: auto;
    }

    .process-title {
        font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    }

    .process-subtitle {
        font-size: 0.875rem;
        margin-bottom: 2rem;
    }

    .process-stats-grid {
        grid-template-columns: 1fr;
    }

    .interactive-stat {
        padding: 1rem;
    }

    .stat-number {
        font-size: 2rem;
    }

    .stat-tooltip {
        width: 100%;
        left: 0;
        transform: translateY(-100%);
        padding: 1rem;
    }

    .interactive-stat:hover .stat-tooltip {
        transform: translateY(-110%);
    }

    .dashboard-controls {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .process-navigation {
        flex-wrap: wrap;
    }

    .process-nav-btn {
        flex: 1 1 45%;
    }

    .timeline-milestones {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .milestone {
        flex: 1 1 45%;
    }

    .step-details-grid {
        grid-template-columns: 1fr;
    }

    .metrics-interactive-grid {
        grid-template-columns: 1fr;
    }

    .metric-card {
        padding: 1rem;
    }

    .cta-options {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .process-title {
        font-size: clamp(1.5rem, 3vw, 2rem);
    }

    .section-title {
        font-size: clamp(1.75rem, 3.5vw, 2rem);
    }

    .section-subtitle {
        font-size: 1rem;
    }

    .metric-value {
        font-size: 1.75rem;
    }

    .metric-label {
        font-size: 1rem;
    }
}

/* ===================================
   ACCESSIBILITY
   =================================== */
:focus {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

[role="button"]:focus,
[tabindex="0"]:focus {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* ===================================
   PRINT STYLES
   =================================== */
@media print {
    .process-hero,
    .floating-elements,
    .particle-system,
    .floating-shapes {
        display: none;
    }

    .process-stats-grid,
    .metrics-interactive-grid,
    .cta-options {
        grid-template-columns: 1fr;
    }

    .interactive-stat,
    .metric-card,
    .cta-option {
        box-shadow: none;
        border: 1px solid #000;
    }

    .progress-bar-fill,
    .chart-fill {
        background: #000;
    }
}
/* ===================================
   PROCESS NAVIGATION INTEGRATION CSS
   ADD THESE STYLES TO YOUR process-page.css
   =================================== */

/* Enhanced Process Steps Container */
.process-steps-container {
    max-width: 100%; /* Remove 900px constraint */
    width: 100%;
    margin: 0 auto;
    position: relative;
    min-height: 800px; /* Increased minimum height */
    overflow: visible; /* Changed from hidden */
    padding: 2rem 0;
}

/* Process Step Base Styles */
.process-step {
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; /* Changed from absolute */
    width: 100%;
    background: white;
    border-radius: var(--border-radius-lg);
    padding: 4rem; /* Increased padding */
    margin-bottom: 2rem;
    box-shadow: var(--shadow-xl);
    border-top: 5px solid transparent;
    background-image: linear-gradient(white, white), var(--gradient-primary);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    min-height: 600px; /* Ensure adequate height */
}

/* Active Step Styles */
.process-step.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    position: relative; /* Ensure relative positioning */
    display: block !important;
    animation: slideInFromRight 0.8s ease-out;
    z-index: 10;
}
.process-step:not(.active) {
    display: none !important;
}

/* Step Exit Animations */
.process-step.exit-left {
    transform: translateX(-50px);
    opacity: 0;
}

.process-step.exit-right {
    transform: translateX(50px);
    opacity: 0;
}

/* Enhanced Step Header */
.step-header {
    display: flex;
    align-items: flex-start;
    gap: 3rem; /* Increased gap */
    margin-bottom: 4rem; /* Increased margin */
    padding-bottom: 3rem; /* Increased padding */
    border-bottom: 2px solid var(--bg-light);
    position: relative;
}

.step-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--gradient-primary);
    animation: expandLine 0.8s ease-out 0.5s both;
}

.step-icon {
    font-size: 5rem; /* Increased icon size */
    flex-shrink: 0;
    animation: bounceIn 1s ease-out 0.3s both;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.step-title-area h2 {
    font-size: 3rem; /* Increased title size */
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 1rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: fadeInUp 0.8s ease-out 0.4s both;
    line-height: 1.2;
}

.step-description p {
    font-size: 1.4rem; /* Increased font size */
    line-height: 1.8;
    color: var(--text-light);
    margin-bottom: 3rem; /* Increased margin */
}

.step-duration {
    display: inline-block;
    background: var(--primary-blue);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    animation: slideInFromLeft 0.6s ease-out 0.6s both;
}

.step-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    animation: fadeInUp 0.8s ease-out 0.7s both;
}

/* Enhanced Step Progress Circle */
.step-progress {
    flex-shrink: 0;
    animation: scaleIn 0.8s ease-out 0.5s both;
}

.progress-circle {
    position: relative;
    width: 80px;
    height: 80px;
}

.progress-ring {
    transform: rotate(-90deg);
    filter: drop-shadow(0 2px 4px rgba(30, 64, 175, 0.3));
}

.progress-ring-circle {
    stroke: var(--bg-light);
    stroke-dasharray: 251;
    stroke-dashoffset: 251;
    transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    stroke-width: 6;
}

.process-step.active .progress-ring-circle {
    stroke: var(--primary-blue);
    stroke-dashoffset: 0;
}

.progress-percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 900;
    color: var(--primary-blue);
    font-size: 1.1rem;
}

/* Enhanced Step Body */
.step-body {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease-out 0.8s both;
}

.step-description p {
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--text-light);
    margin-bottom: 2rem;
}

/* Step Highlights Grid */
.step-highlights,
.step-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.highlight-card,
.detail-card {
    background: var(--bg-light);
    padding: 2rem;
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
    border-left: 4px solid var(--primary-blue);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out both;
}

.process-step.active .highlight-card:nth-child(1),
.process-step.active .detail-card:nth-child(1) {
    animation-delay: 1s;
}

.process-step.active .highlight-card:nth-child(2),
.process-step.active .detail-card:nth-child(2) {
    animation-delay: 1.1s;
}

.process-step.active .highlight-card:nth-child(3),
.process-step.active .detail-card:nth-child(3) {
    animation-delay: 1.2s;
}

.highlight-card:hover,
.detail-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-left-color: var(--secondary-purple);
}

/* Enhanced Step Navigation */
.step-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--bg-light);
    animation: fadeInUp 0.8s ease-out 1.3s both;
}

.nav-btn,
.nav-btn-prev,
.nav-btn-next {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    font-family: inherit;
    font-size: 0.9rem;
    position: relative;
    overflow: hidden;
}

.nav-btn::before,
.nav-btn-prev::before,
.nav-btn-next::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.nav-btn:hover::before,
.nav-btn-prev:hover::before,
.nav-btn-next:hover::before {
    left: 100%;
}

.nav-btn:hover,
.nav-btn-prev:hover,
.nav-btn-next:hover {
    background: var(--secondary-purple);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(30, 64, 175, 0.4);
}

.nav-btn:disabled,
.nav-btn-prev:disabled,
.nav-btn-next:disabled {
    background: var(--bg-light);
    color: var(--text-light);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.nav-btn:disabled::before,
.nav-btn-prev:disabled::before,
.nav-btn-next:disabled::before {
    display: none;
}

.step-counter {
    background: var(--bg-light);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    color: var(--text-dark);
    font-weight: 600;
    border: 2px solid transparent;
    background-image: linear-gradient(var(--bg-light), var(--bg-light)), var(--gradient-primary);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* Enhanced Process Navigation Buttons */
.process-nav-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.process-nav-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s ease;
}

.process-nav-btn:hover::before {
    left: 100%;
}

.process-nav-btn.active {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.process-nav-btn.active .nav-number {
    background: white;
    color: var(--primary-blue);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    animation: pulseGlow 2s infinite;
}

/* Animations */
@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(-20px);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes expandLine {
    from {
        width: 0;
    }
    to {
        width: 60px;
    }
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
    }
}

/* Interactive Checklist Enhancement */
.interactive-checklist {
    background: var(--bg-light);
    padding: 2rem;
    border-radius: var(--border-radius);
    margin-top: 2rem;
    border: 1px solid rgba(30, 64, 175, 0.1);
    animation: fadeInUp 0.8s ease-out 1.4s both;
}

.checklist-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid transparent;
}

.checklist-item:hover {
    transform: translateX(10px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-blue);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .process-steps-container {
        min-height: auto;
        padding: 1rem 0;
    }

    .process-step {
        padding: 2rem 1rem;
        position: static;
    }

    .step-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .step-title-area h2 {
        font-size: 2rem;
    }

    .step-highlights,
    .step-details-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .step-navigation {
        flex-direction: column;
        gap: 1rem;
    }

    .nav-btn,
    .nav-btn-prev,
    .nav-btn-next {
        width: 100%;
        justify-content: center;
    }

    .process-nav-btn {
        flex-direction: row;
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .process-step {
        padding: 1.5rem 1rem;
    }

    .step-icon {
        font-size: 3rem;
    }

    .step-title-area h2 {
        font-size: 1.75rem;
    }

    .highlight-card,
    .detail-card {
        padding: 1.5rem;
    }
}

/* Print Styles */
@media print {
    .process-navigation,
    .step-navigation {
        display: none;
    }

    .process-step {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        page-break-inside: avoid;
        margin-bottom: 2rem;
    }

    .process-steps-container {
        min-height: auto;
    }
}
/* FORCE HIDE ALL STEPS BY DEFAULT */
.process-step {
    display: none !important;
    opacity: 0 !important;
}

/* FORCE SHOW ONLY ACTIVE STEP */
.process-step.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ENSURE ACTIVE NAVIGATION BUTTON IS HIGHLIGHTED */
.process-nav-btn.active {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px) scale(1.05) !important;
}
/* Responsive Design - Better Mobile Experience */
@media (max-width: 1200px) {
    .interactive-timeline-section .container {
        width: 98%;
        padding: 0 1rem;
    }
    
    .process-step {
        padding: 3rem 2rem;
    }
    
    .step-title-area h2 {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .interactive-timeline-section .container {
        width: 100%;
        padding: 0 1rem;
    }
    
    .process-step {
        padding: 2rem 1.5rem;
        min-height: 500px;
    }
    
    .step-header {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }
    
    .step-title-area h2 {
        font-size: 2rem;
    }
    
    .step-description p {
        font-size: 1.2rem;
    }
}
/* ========================================
   EMERGENCY LAYOUT FIX - ADDED [TODAY'S DATE]
   ======================================== */

/* Override any existing process-step styles */
.process-step {
    /* Reset positioning that might cause layout issues */
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    float: none !important;
    
    /* Force proper dimensions */
    width: 100% !important;
    max-width: none !important;
    min-width: auto !important;
    
    /* Force proper spacing */
    margin: 0 auto 2rem auto !important;
    padding: 4rem !important;
    box-sizing: border-box !important;
    
    /* Reset display - hide all by default */
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    
    /* Ensure proper stacking */
    z-index: auto !important;
}

/* Show active and first step */
.process-step.active,
.process-step:first-child {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force container layouts */
.interactive-timeline-section {
    width: 100% !important;
    max-width: none !important;
    overflow-x: visible !important;
}

.interactive-timeline-section .container {
    width: 95% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
}

.process-steps-container {
    width: 100% !important;
    max-width: none !important;
    position: relative !important;
    overflow: visible !important;
    min-height: 600px !important;
}

/* Fix step content layout */
.process-step .step-header {
    display: flex !important;
    gap: 2rem !important;
    margin-bottom: 3rem !important;
    width: 100% !important;
}

.process-step .step-details-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 2rem !important;
    width: 100% !important;
}

/* End Emergency Fix */
/* ===================================
   SCROLL ANIMATION ENHANCEMENTS
   Add these styles to your process-page.css
   =================================== */

/* Base animation styles for all animate-on-scroll elements */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Enhanced Success Metrics Section Animations */
.success-metrics-section {
    overflow: hidden; /* Prevent animation overflow */
}

.section-title.animate-on-scroll {
    transform: translateY(50px) scale(0.9);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-title.animate-on-scroll.animated {
    transform: translateY(0) scale(1);
}

.section-subtitle.animate-on-scroll {
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

/* Enhanced Metric Card Animations */
.metric-card.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px) scale(0.8);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.metric-card.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: metricCardEntrance 0.8s ease-out forwards;
}

.metric-card:hover {
    transform: translateY(-10px) scale(1.05) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Metric Value Counter Animation */
.metric-value {
    display: inline-block;
    transition: all 0.3s ease;
    font-variant-numeric: tabular-nums;
}

.metric-value.counting {
    color: var(--primary-blue);
    text-shadow: 0 0 10px rgba(30, 64, 175, 0.3);
}

/* Enhanced Industry Breakdown Animations */
.industry-breakdown.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.industry-breakdown.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

.industry-breakdown h3 {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.industry-breakdown.animated h3 {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.3s;
}

/* Industry Chart Animations */
.industry-chart {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.industry-chart.animated {
    opacity: 1;
    transform: translateX(0);
}

.industry-chart:nth-child(1) { transition-delay: 0.1s; }
.industry-chart:nth-child(2) { transition-delay: 0.2s; }
.industry-chart:nth-child(3) { transition-delay: 0.3s; }
.industry-chart:nth-child(4) { transition-delay: 0.4s; }

/* Chart Bar Animation */
.chart-bar {
    overflow: hidden;
    position: relative;
}

.chart-fill {
    width: 0 !important;
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background: linear-gradient(90deg, var(--primary-blue), var(--secondary-purple));
}

.chart-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 2s ease-in-out infinite;
}

.chart-fill.animated {
    width: var(--target-width, 0%) !important;
}

/* Chart Header Animation */
.chart-header {
    transform: translateY(-10px);
    opacity: 0;
    transition: all 0.5s ease;
}

.industry-chart.animated .chart-header {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 0.2s;
}

.industry-percentage {
    display: inline-block;
    transition: all 0.3s ease;
}

.industry-chart.animated .industry-percentage {
    animation: pulse 2s ease-in-out infinite;
}

/* Progress Bar Enhancements */
.progress-bar-fill {
    background: linear-gradient(90deg, var(--success-green), var(--primary-blue));
    position: relative;
    overflow: hidden;
}

.progress-bar-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: progressShine 2s ease-in-out infinite;
}

/* New Animation Keyframes */
@keyframes metricCardEntrance {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.8) rotateX(20deg);
    }
    50% {
        opacity: 0.8;
        transform: translateY(-10px) scale(1.05) rotateX(0deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg);
    }
}

@keyframes shimmer {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

@keyframes progressShine {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blinkCursor {
    from, to { border-color: transparent; }
    50% { border-color: var(--primary-blue); }
}

/* Staggered Animation Delays for Groups */
.metrics-interactive-grid .metric-card:nth-child(1) { transition-delay: 0s; }
.metrics-interactive-grid .metric-card:nth-child(2) { transition-delay: 0.15s; }
.metrics-interactive-grid .metric-card:nth-child(3) { transition-delay: 0.3s; }
.metrics-interactive-grid .metric-card:nth-child(4) { transition-delay: 0.45s; }

/* Hover Enhancements */
.metric-card.animated:hover {
    box-shadow: 0 20px 40px rgba(30, 64, 175, 0.2);
    transform: translateY(-15px) scale(1.08);
}

.metric-card.animated:hover .metric-icon {
    animation: bounce 0.6s ease-in-out;
}

.metric-card.animated:hover .metric-value {
    color: var(--primary-blue);
    text-shadow: 0 0 20px rgba(30, 64, 175, 0.4);
}

/* Industry Chart Hover Effects */
.industry-chart:hover .chart-fill {
    filter: brightness(1.1);
    box-shadow: 0 0 15px rgba(30, 64, 175, 0.3);
}

.industry-chart:hover .industry-name {
    color: var(--primary-blue);
    font-weight: 700;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .animate-on-scroll {
        transform: translateY(20px);
    }
    
    .metric-card.animate-on-scroll {
        transform: translateY(30px) scale(0.9);
    }
    
    .industry-chart {
        transform: translateY(15px);
    }
    
    /* Reduce animation delays on mobile */
    .metrics-interactive-grid .metric-card:nth-child(n) {
        transition-delay: 0s;
    }
    
    .industry-chart:nth-child(n) {
        transition-delay: 0.1s;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll,
    .metric-card,
    .industry-chart,
    .chart-fill {
        transition: opacity 0.3s ease !important;
        animation: none !important;
    }
    
    .animate-on-scroll.animated {
        opacity: 1;
        transform: none;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .metric-card {
        border: 2px solid var(--text-dark);
    }
    
    .chart-fill {
        background: var(--text-dark) !important;
    }
}

/* Focus Visible for Accessibility */
.metric-card:focus-visible,
.industry-chart:focus-visible {
    outline: 3px solid var(--primary-blue);
    outline-offset: 2px;
}

/* Loading State */
.animate-on-scroll:not(.animated) {
    pointer-events: none;
}

.animate-on-scroll.loading {
    opacity: 0.3;
}

.animate-on-scroll.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--primary-blue);
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes bounce {
    0%, 20%, 60%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    80% {
        transform: translateY(-5px);
    }
}
/* ===================================
   SCROLL ANIMATION ENHANCEMENTS
   =================================== */

/* Base animation styles for all animate-on-scroll elements */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Enhanced Success Metrics Section Animations */
.success-metrics-section {
    overflow: hidden;
}

.section-title.animate-on-scroll {
    transform: translateY(50px) scale(0.9);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-title.animate-on-scroll.animated {
    transform: translateY(0) scale(1);
}

.section-subtitle.animate-on-scroll {
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

/* Enhanced Metric Card Animations */
.metric-card.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px) scale(0.8);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.metric-card.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: metricCardEntrance 0.8s ease-out forwards;
}

.metric-card:hover {
    transform: translateY(-10px) scale(1.05) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Metric Value Counter Animation */
.metric-value {
    display: inline-block;
    transition: all 0.3s ease;
    font-variant-numeric: tabular-nums;
}

.metric-value.counting {
    color: var(--primary-blue);
    text-shadow: 0 0 10px rgba(30, 64, 175, 0.3);
}

/* Enhanced Industry Breakdown Animations */
.industry-breakdown.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.industry-breakdown.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

.industry-breakdown h3 {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.industry-breakdown.animated h3 {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.3s;
}

/* Industry Chart Enhancements */
.industry-chart {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 1.5rem;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-left: 4px solid transparent;
    margin-bottom: 1rem;
}

.industry-chart.animated {
    opacity: 1;
    transform: translateX(0);
}

.industry-chart:hover {
    transform: translateX(10px);
    box-shadow: var(--shadow-lg);
    border-left-color: var(--primary-blue);
}

.industry-chart:nth-child(1) { transition-delay: 0.1s; }
.industry-chart:nth-child(2) { transition-delay: 0.3s; }
.industry-chart:nth-child(3) { transition-delay: 0.5s; }
.industry-chart:nth-child(4) { transition-delay: 0.7s; }

/* Chart Header */
.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.industry-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.industry-icon {
    font-size: 1.5rem;
}

.industry-percentage {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-blue);
    padding: 0.25rem 0.75rem;
    background: rgba(30, 64, 175, 0.1);
    border-radius: 20px;
    min-width: 60px;
    text-align: center;
}

/* Chart Bar Animation */
.chart-bar {
    background: #e5e7eb;
    height: 16px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    margin-bottom: 0.5rem;
}

.chart-fill {
    width: 0 !important;
    height: 100%;
    border-radius: inherit;
    position: relative;
    overflow: hidden;
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.chart-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 2s ease-in-out infinite;
}

.chart-fill.animated {
    width: var(--target-width, 0%) !important;
}

/* Chart Stats */
.chart-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: var(--text-light);
}

.companies-count {
    font-weight: 600;
}

.success-rate {
    color: var(--success-green);
    font-weight: 600;
}

/* Staggered Animation Delays for Groups */
.metrics-interactive-grid .metric-card:nth-child(1) { transition-delay: 0s; }
.metrics-interactive-grid .metric-card:nth-child(2) { transition-delay: 0.15s; }
.metrics-interactive-grid .metric-card:nth-child(3) { transition-delay: 0.3s; }
.metrics-interactive-grid .metric-card:nth-child(4) { transition-delay: 0.45s; }

/* Animation Keyframes */
@keyframes metricCardEntrance {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.8);
    }
    50% {
        opacity: 0.8;
        transform: translateY(-10px) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes shimmer {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

.industry-percentage.pulsing {
    animation: pulse 2s ease-in-out infinite;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .animate-on-scroll {
        transform: translateY(20px);
    }
    
    .metric-card.animate-on-scroll {
        transform: translateY(30px) scale(0.9);
    }
    
    .industry-chart {
        transform: translateY(15px);
        padding: 1rem;
    }
    
    .chart-header {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    
    .industry-name {
        justify-content: center;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll,
    .metric-card,
    .industry-chart,
    .chart-fill {
        transition: opacity 0.3s ease !important;
        animation: none !important;
    }
    
    .animate-on-scroll.animated {
        opacity: 1;
        transform: none;
    }
}


/* Enhanced Dashboard Controls Styling */
/* Enhanced Dashboard Controls Styling */
.dashboard-controls {
    display: flex !important;
    justify-content: center;
    align-items: stretch;
    gap: 1rem;
    margin-top: 2rem;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    flex-wrap: wrap;
}

.dashboard-control {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    color: white;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    min-width: 140px;
    text-align: center;
}

.dashboard-control:hover,
.dashboard-control.active {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.control-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.control-content {
    text-align: center;
    flex: 1;
}

.control-label {
    font-weight: 700;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 0.25rem;
}

.control-description {
    font-size: 0.75rem;
    opacity: 0.8;
    display: block;
    line-height: 1.3;
}

.control-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.control-badge.pulse {
    background: #10b981;
    animation: pulse 2s infinite;
}

.control-badge.success {
    background: #059669;
}

.control-badge.highlight {
    background: linear-gradient(45deg, #f59e0b, #d97706);
}

.control-badge.new {
    background: #ef4444;
    animation: pulse 1.5s infinite;
}

/* Dashboard Content Panels - HIDDEN BY DEFAULT */
.dashboard-content-panels {
    margin-top: 3rem;
    min-height: 400px;
}

.content-panel {
    display: none !important; /* FORCE HIDDEN */
    opacity: 0 !important;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.content-panel.active {
    display: block !important; /* SHOW WHEN ACTIVE */
    opacity: 1 !important;
    transform: translateY(0);
}

.panel-header {
    text-align: center;
    margin-bottom: 2rem;
    color: white;
}

.panel-header h3 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    font-weight: 800;
}

.panel-header p {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Overview Panel Styles */
.overview-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.highlight-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: all 0.3s ease;
}

.highlight-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
}

.highlight-icon {
    font-size: 3rem;
    flex-shrink: 0;
}

.highlight-content h4 {
    color: white;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.highlight-content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.highlight-stat {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-block;
}

/* Timeline Panel Styles */
.timeline-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.timeline-phase {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.timeline-phase:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
}

.phase-timeline {
    background: #1e40af;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.8rem;
    margin-bottom: 1rem;
    display: inline-block;
}

.phase-title {
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.phase-details ul {
    list-style: none;
    padding: 0;
    text-align: left;
    margin-bottom: 1rem;
}

.phase-details li {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
}

.phase-details li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: bold;
}

.phase-outcome {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 15px;
    font-weight: 600;
    font-size: 0.8rem;
}

.phase-outcome.success {
    background: #10b981;
}

/* Success Metrics Panel */
.success-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.success-metric {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.chart-circle {
    width: 80px;
    height: 80px;
    border: 4px solid #10b981;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chart-percentage {
    color: white;
    font-weight: 900;
    font-size: 1.5rem;
}

.chart-unit {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.7rem;
}

.metric-info h4 {
    color: white;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.metric-info p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.metric-comparison {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}

/* Client Panel Styles */
.client-stats-row {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.client-stat {
    text-align: center;
    color: white;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 900;
    color: #10b981;
    display: block;
}

.stat-label {
    font-size: 0.9rem;
    opacity: 0.9;
}

.industry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.industry-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.industry-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.15);
}

.industry-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.industry-name {
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.industry-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.percentage {
    color: #10b981;
    font-weight: 700;
    font-size: 1.1rem;
}

.companies {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
}

/* ROI Calculator */
.roi-calculator {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
}

.calculator-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.input-group label {
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 0.5rem;
}

.calculator-select {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-weight: 600;
}

.roi-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.roi-metric {
    text-align: center;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.roi-metric.highlight {
    background: linear-gradient(135deg, #10b981, #059669);
}

.roi-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.roi-value {
    color: white;
    font-size: 2rem;
    font-weight: 900;
    display: block;
    margin-bottom: 0.25rem;
}

.roi-timeframe {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
}

.opportunity-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.opportunity-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.opportunity-icon {
    font-size: 1.5rem;
}

.opportunity-text {
    flex: 1;
    color: white;
    font-weight: 500;
}

.opportunity-value {
    color: #10b981;
    font-weight: 700;
    font-size: 1.1rem;
}

/* Additional Testimonial Styles */
.testimonial-preview {
    margin-top: 2rem;
}

.testimonial-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    border-left: 4px solid #10b981;
}

.testimonial-quote {
    color: white;
    font-size: 1.1rem;
    font-style: italic;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.testimonial-author {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.author-name {
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
}

.author-title {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
}

.company-logo {
    font-size: 2rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .dashboard-controls {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .dashboard-control {
        flex-direction: row;
        padding: 1rem 1.5rem;
        text-align: left;
    }
    
    .control-icon {
        font-size: 1.5rem;
        margin-bottom: 0;
    }
    
    .overview-highlights,
    .timeline-breakdown,
    .success-metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .client-stats-row {
        flex-direction: column;
        gap: 1rem;
    }
}
/* ===================================
   DASHBOARD CONTENT PANELS - FULL WIDTH FIX
   Add this CSS to your process-page.css file
   =================================== */

/* Force full-width layout for dashboard content */
.dashboard-content-panels {
    margin-top: 3rem;
    min-height: 400px;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    position: relative;
    z-index: 1;
}

/* Ensure content panels use full available width */
.content-panel {
    display: none !important;
    opacity: 0 !important;
    transform: translateY(20px);
    transition: all 0.6s ease;
    width: 100% !important;
    max-width: none !important;
    padding: 2rem 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}

.content-panel.active {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0);
}

/* Panel headers - full width */
.panel-header {
    text-align: center;
    margin-bottom: 3rem;
    color: white;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 2rem;
}

.panel-header h3 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    margin-bottom: 1rem;
    font-weight: 800;
}

.panel-header p {
    font-size: clamp(1rem, 2vw, 1.25rem);
    opacity: 0.9;
    max-width: 800px;
    margin: 0 auto;
}

/* ===================================
   OVERVIEW PANEL - FULL WIDTH
   =================================== */
.overview-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
}

.highlight-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: all 0.3s ease;
    min-height: 160px;
}

.highlight-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
}

.highlight-icon {
    font-size: 3.5rem;
    flex-shrink: 0;
}

.highlight-content {
    flex: 1;
}

.highlight-content h4 {
    color: white;
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
    line-height: 1.3;
}

.highlight-content p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.highlight-stat {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 25px;
    font-weight: 700;
    font-size: 1rem;
    display: inline-block;
}

/* ===================================
   TIMELINE PANEL - FULL WIDTH
   =================================== */
.timeline-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
}

.timeline-phase {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.timeline-phase:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.phase-timeline {
    background: #1e40af;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    display: inline-block;
}

.phase-title {
    color: white;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.phase-details {
    flex: 1;
    margin-bottom: 1.5rem;
}

.phase-details ul {
    list-style: none;
    padding: 0;
    text-align: left;
    margin: 0;
}

.phase-details li {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    padding-left: 2rem;
    position: relative;
    line-height: 1.4;
}

.phase-details li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: bold;
    font-size: 1.1rem;
}

.phase-outcome {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: auto;
}

.phase-outcome.success {
    background: #10b981;
}

/* ===================================
   SUCCESS METRICS PANEL - FULL WIDTH
   =================================== */
.success-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
}

.success-metric {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    transition: all 0.3s ease;
    min-height: 180px;
}

.success-metric:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.chart-circle {
    width: 100px;
    height: 100px;
    border: 4px solid #10b981;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chart-percentage {
    color: white;
    font-weight: 900;
    font-size: 1.8rem;
    line-height: 1;
}

.chart-unit {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.metric-info {
    flex: 1;
}

.metric-info h4 {
    color: white;
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
    line-height: 1.3;
}

.metric-info p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.metric-comparison {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-block;
}

/* ===================================
   CLIENTS PANEL - FULL WIDTH
   =================================== */
.client-showcase {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
}

.client-stats-row {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.client-stat {
    text-align: center;
    color: white;
    min-width: 150px;
}

.stat-number {
    font-size: 3rem;
    font-weight: 900;
    color: #10b981;
    display: block;
    line-height: 1;
}

.stat-label {
    font-size: 1rem;
    opacity: 0.9;
    margin-top: 0.5rem;
}

.industry-breakdown-enhanced {
    margin-bottom: 3rem;
}

.industry-breakdown-enhanced h4 {
    color: white;
    font-size: 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
    font-weight: 700;
}

.industry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.industry-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.industry-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.industry-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.industry-name {
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.industry-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.percentage {
    color: #10b981;
    font-weight: 700;
    font-size: 1.4rem;
}

.companies {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    text-align: right;
    line-height: 1.3;
}

/* Testimonial */
.testimonial-preview {
    margin-top: 3rem;
}

.testimonial-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2.5rem;
    border-left: 5px solid #10b981;
    max-width: 800px;
    margin: 0 auto;
}

.testimonial-quote {
    color: white;
    font-size: 1.3rem;
    font-style: italic;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.testimonial-author {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.author-name {
    color: white;
    font-weight: 700;
    font-size: 1rem;
}

.author-title {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.company-logo {
    font-size: 2.5rem;
}

/* ===================================
   ROI CALCULATOR - FULL WIDTH
   =================================== */
.roi-calculator {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.calculator-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.input-group label {
    color: white;
    font-weight: 600;
    font-size: 1rem;
    display: block;
    margin-bottom: 0.75rem;
}

.calculator-select {
    width: 100%;
    padding: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.calculator-select:focus {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.15);
    outline: none;
}

.roi-results {
    width: 100%;
}

.roi-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.roi-metric {
    text-align: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.roi-metric:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
}

.roi-metric.highlight {
    background: linear-gradient(135deg, #10b981, #059669);
}

.roi-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.roi-value {
    color: white;
    font-size: 2.5rem;
    font-weight: 900;
    display: block;
    margin-bottom: 0.5rem;
    line-height: 1;
}

.roi-timeframe {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

.roi-breakdown h4 {
    color: white;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 700;
}

.opportunity-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}

.opportunity-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.opportunity-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.opportunity-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.opportunity-text {
    flex: 1;
    color: white;
    font-weight: 500;
    font-size: 1.1rem;
}

.opportunity-value {
    color: #10b981;
    font-weight: 700;
    font-size: 1.3rem;
    flex-shrink: 0;
}

/* ===================================
   MOBILE RESPONSIVE
   =================================== */
@media (max-width: 1024px) {
    .panel-header,
    .overview-highlights,
    .timeline-breakdown,
    .success-metrics-grid,
    .client-showcase,
    .roi-calculator {
        padding: 0 1.5rem;
    }
    
    .highlight-content h4 {
        font-size: 1.2rem;
    }
    
    .timeline-phase {
        min-height: auto;
        padding: 1.5rem;
    }
    
    .success-metric {
        padding: 2rem;
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
    
    .chart-circle {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 768px) {
    .panel-header,
    .overview-highlights,
    .timeline-breakdown,
    .success-metrics-grid,
    .client-showcase,
    .roi-calculator {
        padding: 0 1rem;
    }
    
    .content-panel {
        padding: 1.5rem 0 !important;
    }
    
    .overview-highlights,
    .timeline-breakdown,
    .success-metrics-grid,
    .industry-grid {
        grid-template-columns: 1fr;
    }
    
    .client-stats-row {
        flex-direction: column;
        gap: 2rem;
    }
    
    .highlight-card,
    .timeline-phase,
    .success-metric,
    .industry-card {
        padding: 1.5rem;
    }
    
    .highlight-card {
        flex-direction: column;
        text-align: center;
    }
    
    .testimonial-author {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .calculator-inputs,
    .roi-summary {
        grid-template-columns: 1fr;
    }
    
    .opportunity-item {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
}

/* ===================================
   OVERRIDE ANY CONTAINER CONSTRAINTS
   =================================== */
.process-hero .dashboard-content-panels,
.process-hero .content-panel {
    max-width: none !important;
    width: 100% !important;
}

/* Ensure no parent containers constrain the width */
.dashboard-content-panels * {
    box-sizing: border-box;
}

/* Force break out of any narrow containers */
.dashboard-content-panels {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: 100vw;
}

.dashboard-content-panels > .content-panel {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: 100vw;
    padding-left: 2rem;
    padding-right: 2rem;
}
/* ===================================
   SMALLER STAT TOOLTIPS - COMPACT VERSION
   Add this CSS to your process-page.css (after existing tooltip styles)
   =================================== */

/* Make tooltips smaller and more compact */
.stat-tooltip {
    position: absolute;
    bottom: calc(100% + 10px); /* Reduced spacing from 15px */
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px !important; /* Reduced from 12px */
    
    /* REDUCED SIZE AND PADDING */
    padding: 1rem !important; /* Reduced from 1.5rem */
    width: 240px !important; /* Reduced from 320px */
    max-width: 85vw !important; /* Reduced from 90vw */
    
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important; /* Reduced shadow */
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-dark) !important;
    pointer-events: none;
}

/* Smaller arrow */
.stat-tooltip::before {
    content: '';
    position: absolute;
    bottom: -6px !important; /* Reduced from -9px */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent !important; /* Reduced from 9px */
    border-right: 6px solid transparent !important;
    border-top: 6px solid #ffffff !important; /* Reduced from 9px */
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

/* Smaller tooltip content */
.stat-tooltip h4 {
    font-size: 1rem !important; /* Reduced from 1.25rem */
    margin-bottom: 0.75rem !important; /* Reduced from 1rem */
    color: var(--primary-blue) !important;
    border-bottom: 1px solid #f0f0f0 !important; /* Thinner border */
    padding-bottom: 0.5rem !important; /* Reduced from 0.75rem */
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
}

.stat-tooltip p {
    font-size: 0.8rem !important; /* Reduced from 0.9rem */
    color: #4a5568 !important;
    margin-bottom: 0.75rem !important; /* Reduced from 1rem */
    line-height: 1.4 !important; /* Tighter line height */
    text-align: left;
}

/* Smaller list items */
.stat-tooltip ul li {
    margin-bottom: 0.4rem !important; /* Reduced from 0.5rem */
    padding: 0.15rem 0 !important; /* Reduced from 0.25rem */
    color: #4a5568 !important;
    position: relative;
    padding-left: 0.8rem !important; /* Reduced from 1rem */
    font-size: 0.75rem !important; /* Smaller text */
    line-height: 1.3;
}

.stat-tooltip ul li::before {
    content: '•';
    color: var(--primary-blue);
    position: absolute;
    left: 0;
    font-weight: bold;
    font-size: 0.8rem; /* Smaller bullet */
}

/* Smaller breakdown items */
.breakdown-item,
.phase-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem !important; /* Reduced from 0.75rem */
    background: #f8fafc !important;
    border-radius: 6px !important; /* Reduced from 8px */
    margin-bottom: 0.5rem !important; /* Reduced from 0.75rem */
    border: 1px solid #e2e8f0;
    font-size: 0.75rem !important; /* Smaller text */
}

.phase-item {
    gap: 0.75rem !important; /* Reduced from 1rem */
}

/* Smaller phase numbers */
.phase-number {
    width: 22px !important; /* Reduced from 28px */
    height: 22px !important;
    background: var(--primary-blue) !important;
    color: white !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem !important; /* Reduced from 0.875rem */
    font-weight: 700;
    flex-shrink: 0;
}

/* Smaller phase duration badges */
.phase-duration {
    font-size: 0.65rem !important; /* Reduced from 0.75rem */
    color: #6b7280 !important;
    background: white !important;
    padding: 0.2rem 0.5rem !important; /* Reduced padding */
    border-radius: 8px !important; /* Reduced from 12px */
    border: 1px solid #d1d5db;
}

/* Smaller success breakdown */
.success-breakdown {
    background: #f0f9ff !important;
    padding: 0.75rem !important; /* Reduced from 1rem */
    border-radius: 6px !important; /* Reduced from 8px */
    margin-top: 0.75rem !important; /* Reduced from 1rem */
    border: 1px solid #bae6fd;
}

/* Smaller certification rate badges */
.breakdown-item .cert-rate {
    color: #059669 !important;
    font-weight: 700;
    background: #d1fae5 !important;
    padding: 0.2rem 0.5rem !important; /* Reduced padding */
    border-radius: 8px !important; /* Reduced from 12px */
    font-size: 0.65rem !important; /* Reduced from 0.8rem */
    border: 1px solid #a7f3d0;
}

/* Smaller company breakdown */
.company-breakdown {
    margin-top: 0.75rem !important; /* Reduced from 1rem */
    background: #fefefe !important;
    padding: 0.75rem !important; /* Reduced from 1rem */
    border-radius: 6px !important; /* Reduced from 8px */
    border: 1px solid #e5e7eb;
}

.breakdown-chart {
    display: flex;
    flex-direction: column;
    gap: 0.5rem !important; /* Reduced from 0.75rem */
}

/* Smaller chart segments */
.chart-segment {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.6rem !important; /* Reduced padding */
    border-radius: 4px !important; /* Reduced from 6px */
    font-size: 0.7rem !important; /* Reduced from 0.85rem */
    font-weight: 600;
    border-left-width: 3px !important; /* Thinner border */
}

/* Ultra-compact version - add this class for even smaller tooltips */
.stat-tooltip.ultra-compact {
    width: 200px !important;
    padding: 0.75rem !important;
}

.stat-tooltip.ultra-compact h4 {
    font-size: 0.9rem !important;
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.4rem !important;
}

.stat-tooltip.ultra-compact p {
    font-size: 0.7rem !important;
    margin-bottom: 0.5rem !important;
}

.stat-tooltip.ultra-compact .breakdown-item,
.stat-tooltip.ultra-compact .phase-item {
    padding: 0.4rem !important;
    margin-bottom: 0.4rem !important;
    font-size: 0.65rem !important;
}

.stat-tooltip.ultra-compact .phase-number {
    width: 18px !important;
    height: 18px !important;
    font-size: 0.6rem !important;
}

/* Mobile responsive - even smaller on mobile */
@media (max-width: 768px) {
    .stat-tooltip {
        width: 200px !important; /* Even smaller on mobile */
        max-width: 80vw !important;
        padding: 0.8rem !important;
        bottom: calc(100% + 8px) !important; /* Less spacing */
    }
    
    .stat-tooltip h4 {
        font-size: 0.9rem !important;
        margin-bottom: 0.6rem !important;
    }
    
    .stat-tooltip p {
        font-size: 0.75rem !important;
        margin-bottom: 0.6rem !important;
    }
    
    .stat-tooltip ul li {
        font-size: 0.7rem !important;
        margin-bottom: 0.3rem !important;
        padding-left: 0.7rem !important;
    }
    
    .breakdown-item,
    .phase-item {
        padding: 0.4rem !important;
        margin-bottom: 0.4rem !important;
        font-size: 0.65rem !important;
        flex-direction: column !important;
        gap: 0.3rem !important;
        text-align: center;
    }
    
    .phase-number {
        width: 20px !important;
        height: 20px !important;
        font-size: 0.65rem !important;
    }
    
    .phase-info {
        flex-direction: column;
        gap: 0.2rem;
        width: 100%;
        text-align: center;
    }
    
    .chart-segment {
        padding: 0.3rem 0.4rem !important;
        font-size: 0.65rem !important;
        flex-direction: column !important;
        gap: 0.2rem;
        text-align: center;
    }
}

/* Extra small mobile */
@media (max-width: 480px) {
    .stat-tooltip {
        width: 180px !important;
        padding: 0.6rem !important;
    }
    
    .stat-tooltip h4 {
        font-size: 0.85rem !important;
    }
    
    .stat-tooltip p {
        font-size: 0.7rem !important;
    }
    
    .stat-tooltip ul li {
        font-size: 0.65rem !important;
    }
}

/* Specific targeting for all tooltip types to ensure consistency */
.interactive-stat[data-category="timeline"] .stat-tooltip,
.interactive-stat[data-category="success"] .stat-tooltip,
.interactive-stat[data-category="phases"] .stat-tooltip,
.interactive-stat[data-category="companies"] .stat-tooltip {
    width: 240px !important;
    padding: 1rem !important;
    border-radius: 8px !important;
}

/* Override any existing larger sizes */
.stat-tooltip[style*="width"] {
    width: 240px !important;
}

.stat-tooltip[style*="padding"] {
    padding: 1rem !important;
}

/* ===================================
   DASHBOARD CONTROLS WITH CONTENT TOOLTIPS
   =================================== */

/* Enhanced Dashboard Controls */
.dashboard-controls {
    display: flex !important;
    justify-content: center;
    align-items: stretch;
    gap: 1rem;
    margin-top: 2rem;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    flex-wrap: wrap;
    position: relative;
    z-index: 100;
}

.dashboard-control {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    color: white;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    position: relative;
    overflow: visible; /* Allow tooltips to extend beyond */
    min-width: 140px;
    text-align: center;
}

.dashboard-control:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

/* Control content (existing styles) */
.control-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.control-content {
    text-align: center;
    flex: 1;
}

.control-label {
    font-weight: 700;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 0.25rem;
}

.control-description {
    font-size: 0.75rem;
    opacity: 0.8;
    display: block;
    line-height: 1.3;
}

.control-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.control-badge.pulse {
    background: #10b981;
    animation: pulse 2s infinite;
}

.control-badge.success {
    background: #059669;
}

.control-badge.highlight {
    background: linear-gradient(45deg, #f59e0b, #d97706);
}

.control-badge.new {
    background: #ef4444;
    animation: pulse 1.5s infinite;
}

/* ===================================
   DASHBOARD TOOLTIPS
   =================================== */

.dashboard-tooltip {
    position: absolute;
    top: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    width: 320px;
    max-width: 90vw;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #1f2937;
    pointer-events: none;
}

.dashboard-control:hover .dashboard-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(5px);
    pointer-events: auto;
}

/* Tooltip arrow */
.dashboard-tooltip::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #ffffff;
    filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.1));
}

/* Tooltip header */
.tooltip-header {
    text-align: center;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 1rem;
}

.tooltip-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e40af;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.tooltip-header p {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0;
}

/* Tooltip content */
.tooltip-content {
    font-size: 0.85rem;
    line-height: 1.4;
}

/* ===================================
   OVERVIEW TOOLTIP CONTENT
   =================================== */

.overview-highlights-compact {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 4px solid #1e40af;
}

.highlight-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.highlight-text {
    flex: 1;
}

.highlight-text strong {
    display: block;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.highlight-text span {
    display: block;
    color: #6b7280;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

.highlight-stat {
    display: inline-block;
    background: #1e40af;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ===================================
   TIMELINE TOOLTIP CONTENT
   =================================== */

.timeline-phases-compact {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.phase-compact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: #f8fafc;
    border-radius: 6px;
}

.phase-compact .phase-number {
    width: 24px;
    height: 24px;
    background: #1e40af;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.phase-compact .phase-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.phase-title {
    font-weight: 600;
    color: #1f2937;
}

.phase-duration {
    font-size: 0.75rem;
    color: #6b7280;
    background: white;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.timeline-summary {
    padding: 0.75rem;
    background: #f0f9ff;
    border-radius: 6px;
    border-left: 4px solid #10b981;
    font-size: 0.8rem;
    color: #1f2937;
}

/* ===================================
   SUCCESS METRICS TOOLTIP CONTENT
   =================================== */

.success-metrics-compact {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.metric-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
    text-align: center;
}

.metric-number {
    font-size: 1.75rem;
    font-weight: 900;
    color: #1e40af;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.metric-label {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
}

.metric-comparison {
    font-size: 0.75rem;
    color: #6b7280;
    background: white;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

/* ===================================
   CLIENT PORTFOLIO TOOLTIP CONTENT
   =================================== */

.client-stats-compact {
    display: flex;
    justify-content: space-around;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.stat-item {
    text-align: center;
}

.stat-item .stat-number {
    display: block;
    font-size: 1.25rem;
    font-weight: 900;
    color: #10b981;
    line-height: 1;
}

.stat-item .stat-label {
    font-size: 0.7rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

.industry-breakdown-compact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.industry-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    background: #f8fafc;
    border-radius: 6px;
}

.industry-icon {
    font-size: 1.25rem;
    margin-right: 0.5rem;
}

.industry-name {
    flex: 1;
    font-weight: 500;
    color: #1f2937;
    font-size: 0.8rem;
}

.industry-percentage {
    font-weight: 700;
    color: #10b981;
    font-size: 0.85rem;
}

/* ===================================
   ROI CALCULATOR TOOLTIP CONTENT
   =================================== */

.roi-preview-compact {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.roi-metric-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: #f8fafc;
    border-radius: 6px;
}

.roi-metric-compact.highlight {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.roi-metric-compact.highlight .roi-label,
.roi-metric-compact.highlight .roi-value {
    color: white;
}

.roi-label {
    font-weight: 500;
    color: #6b7280;
    font-size: 0.8rem;
}

.roi-value {
    font-weight: 700;
    color: #1f2937;
    font-size: 0.9rem;
}

.roi-opportunities-compact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.opportunity-compact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: #f8fafc;
    border-radius: 6px;
}

.opp-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.opp-text {
    flex: 1;
    font-weight: 500;
    color: #1f2937;
    font-size: 0.8rem;
}

.opp-value {
    font-weight: 700;
    color: #10b981;
    font-size: 0.85rem;
}

.tooltip-cta {
    text-align: center;
    padding: 0.5rem;
    background: #f0f9ff;
    border-radius: 6px;
    border: 1px solid #bae6fd;
}

.tooltip-cta small {
    color: #0369a1;
    font-weight: 500;
    font-size: 0.75rem;
}

/* ===================================
   MOBILE RESPONSIVE
   =================================== */

@media (max-width: 768px) {
    .dashboard-tooltip {
        width: 280px;
        max-width: 95vw;
        padding: 1.25rem;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .dashboard-control:hover .dashboard-tooltip {
        transform: translateX(-50%) translateY(5px);
    }
    
    .dashboard-controls {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .dashboard-control {
        flex-direction: row;
        padding: 1rem 1.5rem;
        text-align: left;
        width: 100%;
        max-width: none;
    }
    
    .control-icon {
        font-size: 1.5rem;
        margin-bottom: 0;
    }
    
    .client-stats-compact {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    
    .phase-compact .phase-info {
        flex-direction: column;
        gap: 0.25rem;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .dashboard-tooltip {
        width: 260px;
        padding: 1rem;
    }
    
    .tooltip-header h3 {
        font-size: 1.1rem;
    }
    
    .tooltip-content {
        font-size: 0.8rem;
    }
}

/* Hide original content panels */
.dashboard-content-panels {
    display: none !important;
}
/* ===================================
   SMALLER DASHBOARD TOOLTIPS - COMPACT VERSION
   Add this CSS to your process-page.css (after existing tooltip styles)
   =================================== */

/* Make dashboard tooltips smaller and more compact */
.dashboard-tooltip {
    position: absolute;
    top: calc(100% + 10px); /* Reduced spacing from 15px */
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px !important; /* Reduced from 12px */
    
    /* REDUCED SIZE AND PADDING */
    padding: 1rem !important; /* Reduced from 1.5rem */
    width: 240px !important; /* Reduced from 320px */
    max-width: 85vw !important; /* Reduced from 90vw */
    
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important; /* Reduced shadow */
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #1f2937;
    pointer-events: none;
}

.dashboard-control:hover .dashboard-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(3px); /* Reduced movement */
    pointer-events: auto;
}

/* Smaller tooltip arrow */
.dashboard-tooltip::before {
    content: '';
    position: absolute;
    top: -6px !important; /* Reduced from -8px */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent !important; /* Reduced from 8px */
    border-right: 6px solid transparent !important;
    border-bottom: 6px solid #ffffff !important; /* Reduced from 8px */
    filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.1));
}

/* Smaller tooltip header */
.tooltip-header {
    text-align: center;
    margin-bottom: 1rem !important; /* Reduced from 1.5rem */
    border-bottom: 1px solid #f0f0f0 !important; /* Thinner border */
    padding-bottom: 0.75rem !important; /* Reduced from 1rem */
}

.tooltip-header h3 {
    font-size: 1rem !important; /* Reduced from 1.25rem */
    font-weight: 700;
    color: #1e40af;
    margin-bottom: 0.4rem !important; /* Reduced from 0.5rem */
    line-height: 1.2;
}

.tooltip-header p {
    font-size: 0.75rem !important; /* Reduced from 0.9rem */
    color: #6b7280;
    margin: 0;
    line-height: 1.3;
}

/* Smaller tooltip content */
.tooltip-content {
    font-size: 0.75rem !important; /* Reduced from 0.85rem */
    line-height: 1.3 !important; /* Tighter line height */
}

/* ===================================
   SMALLER OVERVIEW TOOLTIP CONTENT
   =================================== */

.overview-highlights-compact {
    display: flex;
    flex-direction: column;
    gap: 0.75rem !important; /* Reduced from 1rem */
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: 0.75rem !important; /* Reduced from 1rem */
    padding: 0.5rem !important; /* Reduced from 0.75rem */
    background: #f8fafc;
    border-radius: 6px !important; /* Reduced from 8px */
    border-left: 3px solid #1e40af !important; /* Thinner border */
}

.highlight-icon {
    font-size: 1.25rem !important; /* Reduced from 1.5rem */
    flex-shrink: 0;
}

.highlight-text strong {
    display: block;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.2rem !important; /* Reduced from 0.25rem */
    font-size: 0.8rem !important;
}

.highlight-text span {
    display: block;
    color: #6b7280;
    font-size: 0.7rem !important; /* Reduced from 0.8rem */
    margin-bottom: 0.4rem !important; /* Reduced from 0.5rem */
}

.highlight-stat {
    display: inline-block;
    background: #1e40af;
    color: white;
    padding: 0.2rem 0.5rem !important; /* Reduced padding */
    border-radius: 8px !important; /* Reduced from 12px */
    font-size: 0.65rem !important; /* Reduced from 0.75rem */
    font-weight: 600;
}

/* ===================================
   SMALLER TIMELINE TOOLTIP CONTENT
   =================================== */

.timeline-phases-compact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem !important; /* Reduced from 0.75rem */
    margin-bottom: 0.75rem !important; /* Reduced from 1rem */
}

.phase-compact {
    display: flex;
    align-items: center;
    gap: 0.5rem !important; /* Reduced from 0.75rem */
    padding: 0.4rem !important; /* Reduced from 0.5rem */
    background: #f8fafc;
    border-radius: 4px !important; /* Reduced from 6px */
}

.phase-compact .phase-number {
    width: 20px !important; /* Reduced from 24px */
    height: 20px !important;
    background: #1e40af;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem !important; /* Reduced from 0.8rem */
    font-weight: 700;
    flex-shrink: 0;
}

.phase-title {
    font-weight: 600;
    color: #1f2937;
    font-size: 0.75rem !important;
}

.phase-duration {
    font-size: 0.65rem !important; /* Reduced from 0.75rem */
    color: #6b7280;
    background: white;
    padding: 0.2rem 0.4rem !important; /* Reduced padding */
    border-radius: 6px !important; /* Reduced from 8px */
    border: 1px solid #e5e7eb;
}

.timeline-summary {
    padding: 0.5rem !important; /* Reduced from 0.75rem */
    background: #f0f9ff;
    border-radius: 4px !important; /* Reduced from 6px */
    border-left: 3px solid #10b981 !important; /* Thinner border */
    font-size: 0.7rem !important; /* Reduced from 0.8rem */
    color: #1f2937;
    line-height: 1.3;
}

/* ===================================
   SMALLER SUCCESS METRICS TOOLTIP CONTENT
   =================================== */

.success-metrics-compact {
    display: flex;
    flex-direction: column;
    gap: 0.75rem !important; /* Reduced from 1rem */
}

.metric-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem !important; /* Reduced from 1rem */
    background: #f8fafc;
    border-radius: 6px !important; /* Reduced from 8px */
    text-align: center;
}

.metric-number {
    font-size: 1.5rem !important; /* Reduced from 1.75rem */
    font-weight: 900;
    color: #1e40af;
    line-height: 1;
    margin-bottom: 0.4rem !important; /* Reduced from 0.5rem */
}

.metric-label {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.2rem !important; /* Reduced from 0.25rem */
    font-size: 0.75rem !important; /* Reduced from 0.85rem */
}

.metric-comparison {
    font-size: 0.65rem !important; /* Reduced from 0.75rem */
    color: #6b7280;
    background: white;
    padding: 0.2rem 0.4rem !important; /* Reduced padding */
    border-radius: 6px !important; /* Reduced from 8px */
    border: 1px solid #e5e7eb;
}

/* ===================================
   SMALLER CLIENT PORTFOLIO TOOLTIP CONTENT
   =================================== */

.client-stats-compact {
    display: flex;
    justify-content: space-around;
    margin-bottom: 0.75rem !important; /* Reduced from 1rem */
    padding-bottom: 0.75rem !important; /* Reduced from 1rem */
    border-bottom: 1px solid #e5e7eb;
}

.stat-item .stat-number {
    display: block;
    font-size: 1rem !important; /* Reduced from 1.25rem */
    font-weight: 900;
    color: #10b981;
    line-height: 1;
}

.stat-item .stat-label {
    font-size: 0.65rem !important; /* Reduced from 0.7rem */
    color: #6b7280;
    margin-top: 0.2rem !important; /* Reduced from 0.25rem */
}

.industry-breakdown-compact {
    display: flex;
    flex-direction: column;
    gap: 0.4rem !important; /* Reduced from 0.5rem */
}

.industry-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem !important; /* Reduced from 0.5rem */
    background: #f8fafc;
    border-radius: 4px !important; /* Reduced from 6px */
}

.industry-icon {
    font-size: 1rem !important; /* Reduced from 1.25rem */
    margin-right: 0.4rem !important; /* Reduced from 0.5rem */
}

.industry-name {
    flex: 1;
    font-weight: 500;
    color: #1f2937;
    font-size: 0.7rem !important; /* Reduced from 0.8rem */
}

.industry-percentage {
    font-weight: 700;
    color: #10b981;
    font-size: 0.75rem !important; /* Reduced from 0.85rem */
}

/* ===================================
   SMALLER ROI CALCULATOR TOOLTIP CONTENT
   =================================== */

.roi-preview-compact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem !important; /* Reduced from 0.75rem */
    margin-bottom: 0.75rem !important; /* Reduced from 1rem */
    padding-bottom: 0.75rem !important; /* Reduced from 1rem */
    border-bottom: 1px solid #e5e7eb;
}

.roi-metric-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem !important; /* Reduced from 0.5rem */
    background: #f8fafc;
    border-radius: 4px !important; /* Reduced from 6px */
}

.roi-label {
    font-weight: 500;
    color: #6b7280;
    font-size: 0.7rem !important; /* Reduced from 0.8rem */
}

.roi-value {
    font-weight: 700;
    color: #1f2937;
    font-size: 0.8rem !important; /* Reduced from 0.9rem */
}

.roi-opportunities-compact {
    display: flex;
    flex-direction: column;
    gap: 0.4rem !important; /* Reduced from 0.5rem */
    margin-bottom: 0.75rem !important; /* Reduced from 1rem */
}

.opportunity-compact {
    display: flex;
    align-items: center;
    gap: 0.5rem !important; /* Reduced from 0.75rem */
    padding: 0.4rem !important; /* Reduced from 0.5rem */
    background: #f8fafc;
    border-radius: 4px !important; /* Reduced from 6px */
}

.opp-icon {
    font-size: 1rem !important; /* Reduced from 1.25rem */
    flex-shrink: 0;
}

.opp-text {
    flex: 1;
    font-weight: 500;
    color: #1f2937;
    font-size: 0.7rem !important; /* Reduced from 0.8rem */
}

.opp-value {
    font-weight: 700;
    color: #10b981;
    font-size: 0.75rem !important; /* Reduced from 0.85rem */
}

.tooltip-cta {
    text-align: center;
    padding: 0.4rem !important; /* Reduced from 0.5rem */
    background: #f0f9ff;
    border-radius: 4px !important; /* Reduced from 6px */
    border: 1px solid #bae6fd;
}

.tooltip-cta small {
    color: #0369a1;
    font-weight: 500;
    font-size: 0.65rem !important; /* Reduced from 0.75rem */
}

/* ===================================
   ULTRA COMPACT VERSION (OPTIONAL)
   Add this class for even smaller tooltips
   =================================== */

.dashboard-tooltip.ultra-compact {
    width: 200px !important;
    padding: 0.75rem !important;
}

.dashboard-tooltip.ultra-compact .tooltip-header h3 {
    font-size: 0.9rem !important;
    margin-bottom: 0.3rem !important;
}

.dashboard-tooltip.ultra-compact .tooltip-header p {
    font-size: 0.7rem !important;
}

.dashboard-tooltip.ultra-compact .tooltip-content {
    font-size: 0.7rem !important;
}

.dashboard-tooltip.ultra-compact .highlight-item,
.dashboard-tooltip.ultra-compact .phase-compact,
.dashboard-tooltip.ultra-compact .metric-compact,
.dashboard-tooltip.ultra-compact .industry-item,
.dashboard-tooltip.ultra-compact .roi-metric-compact {
    padding: 0.3rem !important;
    gap: 0.4rem !important;
}

.dashboard-tooltip.ultra-compact .highlight-icon,
.dashboard-tooltip.ultra-compact .industry-icon,
.dashboard-tooltip.ultra-compact .opp-icon {
    font-size: 1rem !important;
}

.dashboard-tooltip.ultra-compact .phase-number {
    width: 18px !important;
    height: 18px !important;
    font-size: 0.65rem !important;
}

/* ===================================
   MOBILE RESPONSIVE - EVEN SMALLER
   =================================== */

@media (max-width: 768px) {
    .dashboard-tooltip {
        width: 200px !important; /* Even smaller on mobile */
        max-width: 80vw !important;
        padding: 0.8rem !important;
        top: calc(100% + 8px) !important; /* Less spacing */
    }
    
    .dashboard-control:hover .dashboard-tooltip {
        transform: translateX(-50%) translateY(2px);
    }
    
    .tooltip-header h3 {
        font-size: 0.9rem !important;
        margin-bottom: 0.3rem !important;
    }
    
    .tooltip-header p {
        font-size: 0.7rem !important;
    }
    
    .tooltip-content {
        font-size: 0.7rem !important;
    }
    
    .highlight-item,
    .phase-compact,
    .metric-compact,
    .industry-item,
    .roi-metric-compact,
    .opportunity-compact {
        padding: 0.3rem !important;
        gap: 0.4rem !important;
    }
    
    .phase-compact .phase-info {
        flex-direction: column;
        gap: 0.2rem;
        align-items: flex-start;
    }
    
    .client-stats-compact {
        flex-direction: column;
        gap: 0.4rem;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .dashboard-tooltip {
        width: 180px !important;
        padding: 0.6rem !important;
    }
    
    .tooltip-header h3 {
        font-size: 0.85rem !important;
    }
    
    .tooltip-content {
        font-size: 0.65rem !important;
    }
    
    .highlight-text strong,
    .phase-title,
    .metric-label,
    .industry-name,
    .opp-text {
        font-size: 0.65rem !important;
    }
    
    .highlight-stat,
    .phase-duration,
    .metric-comparison,
    .industry-percentage,
    .opp-value {
        font-size: 0.6rem !important;
    }
}

/* Override any existing larger sizes */
.dashboard-tooltip[style*="width"] {
    width: 240px !important;
}

.dashboard-tooltip[style*="padding"] {
    padding: 1rem !important;
}

/* Reduce process-stats-grid height - Compact */
.process-stats-grid {
    gap: 0.75rem !important;
    margin: 1.5rem auto !important;
}

.interactive-stat {
    min-height: 120px !important;
    padding: 1rem !important;
}

.stat-icon {
    font-size: 2rem !important;
    margin-bottom: 0.5rem !important;
}

.stat-number {
    font-size: 2rem !important;
    margin-bottom: 0.3rem !important;
}

.stat-label {
    font-size: 0.9rem !important;
    margin-bottom: 0.3rem !important;
}

.stat-description {
    font-size: 0.8rem !important; /* Reduced from 0.875rem */
}
/* Ultra-Compact process-stats-grid - 30% smaller than compact */
.process-stats-grid {
    gap: 0.5rem !important; /* Reduced from 0.75rem (30% reduction) */
    margin: 1rem auto !important; /* Reduced from 1.5rem (30% reduction) */
}

.interactive-stat {
    min-height: 84px !important; /* Reduced from 120px (30% reduction) */
    padding: 0.7rem !important; /* Reduced from 1rem (30% reduction) */
    justify-content: flex-start !important;
}

.stat-icon {
    font-size: 1.4rem !important; /* Reduced from 2rem (30% reduction) */
    margin-bottom: 0.35rem !important; /* Reduced from 0.5rem (30% reduction) */
}

.stat-number {
    font-size: 1.4rem !important; /* Reduced from 2rem (30% reduction) */
    margin-bottom: 0.2rem !important; /* Reduced from 0.3rem (30% reduction) */
    line-height: 1.1;
}

.stat-label {
    font-size: 0.75rem !important; /* Reduced from 0.9rem (30% reduction) */
    margin-bottom: 0.2rem !important; /* Reduced from 0.3rem (30% reduction) */
    line-height: 1.2;
}

.stat-description {
    font-size: 0.65rem !important; /* Reduced from 0.8rem (30% reduction) */
    line-height: 1.3;
    margin-top: 0.2rem !important;
}

/* Adjust tooltip positioning for smaller cards */
.stat-tooltip {
    bottom: calc(100% + 8px) !important; /* Reduced spacing */
    width: 200px !important; /* Smaller tooltip to match smaller cards */
    padding: 0.8rem !important;
}

.stat-tooltip h4 {
    font-size: 0.9rem !important;
    margin-bottom: 0.6rem !important;
}

.stat-tooltip p {
    font-size: 0.7rem !important;
    margin-bottom: 0.6rem !important;
}

/* Mobile adjustments for ultra-compact design */
@media (max-width: 768px) {
    .process-stats-grid {
        grid-template-columns: 1fr 1fr !important; /* 2 columns on mobile */
        gap: 0.4rem !important;
        margin: 0.75rem auto !important;
    }
    
    .interactive-stat {
        min-height: 70px !important;
        padding: 0.5rem !important;
    }
    
    .stat-icon {
        font-size: 1.2rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .stat-number {
        font-size: 1.2rem !important;
        margin-bottom: 0.15rem !important;
    }
    
    .stat-label {
        font-size: 0.7rem !important;
        margin-bottom: 0.15rem !important;
    }
    
    .stat-description {
        font-size: 0.6rem !important;
    }
}

@media (max-width: 480px) {
    .process-stats-grid {
        grid-template-columns: 1fr !important; /* Single column on very small screens */
        gap: 0.3rem !important;
    }
    
    .interactive-stat {
        min-height: 60px !important;
        padding: 0.4rem !important;
        flex-direction: row !important; /* Horizontal layout */
        text-align: left !important;
    }
    
    .stat-icon {
        font-size: 1rem !important;
        margin-bottom: 0 !important;
        margin-right: 0.5rem !important;
        flex-shrink: 0;
    }
    
    .stat-content {
        display: flex;
        flex-direction: column;
        flex: 1;
    }
    
    .stat-number {
        font-size: 1rem !important;
    }
    
    .stat-label {
        font-size: 0.65rem !important;
    }
    
    .stat-description {
        font-size: 0.55rem !important;
    }
}

/* Ensure progress rings are proportionally smaller */
.stat-progress-ring {
    transform: scale(0.7) !important;
}

.progress-ring {
    width: 84px !important; /* Reduced from 120px */
    height: 84px !important;
}

.progress-ring-progress,
.progress-ring-track {
    r: 38 !important; /* Reduced radius proportionally */
}
/* ===================================
   DASHBOARD TOOLTIPS POSITIONED ABOVE
   =================================== */

/* Position tooltips ABOVE the controls */
.dashboard-tooltip {
    position: absolute;
    bottom: calc(100% + 10px) !important; /* Changed from top to bottom */
    top: auto !important; /* Reset top positioning */
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 1rem;
    width: 240px;
    max-width: 85vw;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #1f2937;
    pointer-events: none;
}

.dashboard-control:hover .dashboard-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px) !important; /* Move upward on hover */
    pointer-events: auto;
}

/* Arrow pointing DOWN (since tooltip is above) */
.dashboard-tooltip::before {
    content: '';
    position: absolute;
    top: 100% !important; /* Position at bottom of tooltip */
    bottom: auto !important; /* Reset bottom positioning */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #ffffff !important; /* Arrow pointing DOWN */
    border-bottom: none !important; /* Remove bottom border */
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

/* ===================================
   RESPONSIVE POSITIONING FOR ABOVE TOOLTIPS
   =================================== */

/* Edge detection for tooltips positioned above */
.dashboard-tooltip.edge-left {
    left: 10px !important;
    transform: translateX(0) translateY(-5px) !important;
}

.dashboard-tooltip.edge-left::before {
    left: 30px !important;
    transform: translateX(0) !important;
}

.dashboard-tooltip.edge-right {
    right: 10px !important;
    left: auto !important;
    transform: translateX(0) translateY(-5px) !important;
}

.dashboard-tooltip.edge-right::before {
    right: 30px !important;
    left: auto !important;
    transform: translateX(0) !important;
}

/* Mobile responsive for above positioning */
@media (max-width: 768px) {
    .dashboard-tooltip {
        width: 200px !important;
        max-width: 80vw !important;
        padding: 0.8rem !important;
        bottom: calc(100% + 8px) !important;
    }
    
    .dashboard-control:hover .dashboard-tooltip {
        transform: translateX(-50%) translateY(-3px) !important;
    }
    
    /* Mobile center positioning */
    .dashboard-tooltip.mobile-center {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) translateY(-3px) !important;
    }
    
    .dashboard-tooltip.mobile-center::before {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }
    
    /* Mobile full-width option */
    .dashboard-tooltip.mobile-fullwidth {
        left: 5px !important;
        right: 5px !important;
        width: auto !important;
        max-width: none !important;
        transform: translateY(-3px) !important;
    }
    
    .dashboard-tooltip.mobile-fullwidth::before {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

@media (max-width: 480px) {
    .dashboard-tooltip {
        width: 180px !important;
        padding: 0.6rem !important;
        bottom: calc(100% + 6px) !important;
    }
    
    .dashboard-control:hover .dashboard-tooltip {
        transform: translateX(-50%) translateY(-2px) !important;
    }
}

/* ===================================
   ENSURE HIGH Z-INDEX FOR ABOVE POSITIONING
   =================================== */

/* Make sure tooltips appear above all other content */
.dashboard-controls {
    position: relative;
    z-index: 500; /* Lower than tooltip */
}

.dashboard-tooltip {
    z-index: 1000 !important; /* Higher than everything else */
}

/* Ensure tooltips don't get clipped by parent containers */
.process-hero {
    overflow: visible !important;
}

.hero-content {
    overflow: visible !important;
}

/* ===================================
   ALTERNATIVE: SMART POSITIONING
   If you want tooltips to automatically choose above/below based on space
   =================================== */

/* 
Uncomment this section if you want smart positioning that automatically
chooses above or below based on available space:

.dashboard-tooltip.auto-position-above {
    bottom: calc(100% + 10px) !important;
    top: auto !important;
}

.dashboard-tooltip.auto-position-above::before {
    top: 100% !important;
    bottom: auto !important;
    border-top: 6px solid #ffffff !important;
    border-bottom: none !important;
}

.dashboard-tooltip.auto-position-below {
    top: calc(100% + 10px) !important;
    bottom: auto !important;
}

.dashboard-tooltip.auto-position-below::before {
    bottom: 100% !important;
    top: auto !important;
    border-bottom: 6px solid #ffffff !important;
    border-top: none !important;
}
*/

/* ===================================
   FIX DASHBOARD CONTROLS OVERFLOW
   =================================== */

/* Ensure the dashboard controls container allows tooltips to extend above */
.dashboard-controls {
    margin-top: 3rem !important; /* Increased to give space for above tooltips */
    margin-bottom: 2rem !important;
    overflow: visible !important;
    padding-top: 200px !important; /* Space for tooltips above */
    padding-bottom: 2rem !important;
}

/* Adjust the process hero section to accommodate above tooltips */
.process-hero {
    padding-bottom: 6rem !important; /* Increased bottom padding */
    overflow: visible !important;
}
/* ===================================
   RESTORE PROCESS NAVIGATION BUTTONS TO PROPER SIZE
   =================================== */

/* Reset and enhance process navigation buttons */
.process-nav-btn {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50px !important;
    padding: 1rem 1.75rem !important; /* Increased padding */
    color: white !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    gap: 0.75rem !important; /* Increased gap */
    transition: all 0.3s ease !important;
    font-size: 0.95rem !important; /* Explicit font size */
    font-weight: 600 !important;
    min-height: 50px !important; /* Minimum height */
    min-width: 140px !important; /* Minimum width */
    justify-content: center;
    text-align: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    position: relative;
    z-index: 10;
    opacity: 1 !important; /* Ensure visibility */
    visibility: visible !important;
}

/* Hover and active states */
.process-nav-btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
}

.process-nav-btn.active {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    transform: translateY(-3px) scale(1.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

/* Button number styling */
.nav-number {
    width: 32px !important; /* Increased from 24px */
    height: 32px !important;
    background: white !important;
    color: #1e40af !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important; /* Increased font size */
    font-weight: 700 !important;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Button text styling */
.nav-text {
    font-size: 0.95rem !important; /* Increased font size */
    font-weight: 600 !important;
    line-height: 1.2;
    white-space: nowrap;
}

/* Process navigation container */
.process-navigation {
    display: flex !important;
    justify-content: center !important;
    gap: 1.25rem !important; /* Increased gap */
    margin-top: 3rem !important;
    flex-wrap: wrap !important;
    padding: 1rem !important; /* Added padding */
    position: relative;
    z-index: 10;
}

/* Enhanced active state with glow effect */
.process-nav-btn.active .nav-number {
    background: white !important;
    color: #1e40af !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8) !important;
    animation: pulseGlow 2s infinite !important;
}

/* Pulse animation for active button */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
    }
}

/* ===================================
   TABLET RESPONSIVE (768px - 1024px)
   =================================== */
@media (max-width: 1024px) and (min-width: 769px) {
    .process-nav-btn {
        padding: 0.9rem 1.5rem !important;
        min-width: 130px !important;
        font-size: 0.9rem !important;
    }
    
    .nav-number {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.95rem !important;
    }
    
    .nav-text {
        font-size: 0.9rem !important;
    }
}

/* ===================================
   MOBILE RESPONSIVE (up to 768px)
   =================================== */
@media (max-width: 768px) {
    .process-navigation {
        gap: 1rem !important;
        margin-top: 2rem !important;
        padding: 0.75rem !important;
    }
    
    .process-nav-btn {
        flex-direction: row !important;
        padding: 0.85rem 1.25rem !important;
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
        min-height: 45px !important;
        font-size: 0.9rem !important;
        text-align: left !important;
        justify-content: flex-start !important;
    }
    
    .nav-number {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.9rem !important;
        margin-right: 0.75rem !important;
    }
    
    .nav-text {
        font-size: 0.9rem !important;
        flex: 1;
    }
}

/* ===================================
   SMALL MOBILE (up to 480px)
   =================================== */
@media (max-width: 480px) {
    .process-navigation {
        gap: 0.75rem !important;
        margin-top: 1.5rem !important;
    }
    
    .process-nav-btn {
        padding: 0.75rem 1rem !important;
        max-width: 100% !important;
        min-height: 42px !important;
        font-size: 0.85rem !important;
    }
    
    .nav-number {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.85rem !important;
    }
    
    .nav-text {
        font-size: 0.85rem !important;
    }
}

/* ===================================
   ENSURE BUTTONS ARE ALWAYS VISIBLE
   =================================== */

/* Override any conflicting styles that might hide buttons */
.process-nav-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Ensure container doesn't hide buttons */
.process-navigation {
    overflow: visible !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Fallback styling for browsers that don't support backdrop-filter */
@supports not (backdrop-filter: blur(10px)) {
    .process-nav-btn {
        background: rgba(255, 255, 255, 0.2) !important;
        border: 2px solid rgba(255, 255, 255, 0.4) !important;
    }
    
    .process-nav-btn:hover {
        background: rgba(255, 255, 255, 0.3) !important;
        border-color: rgba(255, 255, 255, 0.6) !important;
    }
    
    .process-nav-btn.active {
        background: rgba(255, 255, 255, 0.35) !important;
        border-color: rgba(255, 255, 255, 0.7) !important;
    }
}

/* ===================================
   SEPARATE NAVIGATION SECTION
   =================================== */

.process-navigation-section {
    background: linear-gradient(135deg, #1e40af 0%, #7c3aed 100%);
    padding: 3rem 0;
    position: relative;
    z-index: 100;
}

.process-navigation-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Horizontal Navigation Buttons */
.process-navigation {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2rem !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.process-nav-btn {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50px !important;
    padding: 1.25rem 2rem !important;
    color: white !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    transition: all 0.3s ease !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    min-height: 60px !important;
    min-width: 160px !important;
    justify-content: center !important;
    text-align: center !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    position: relative;
    z-index: 10;
    opacity: 1 !important;
    visibility: visible !important;
    flex-shrink: 0; /* Prevent shrinking */
}

.process-nav-btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
}

.process-nav-btn.active {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    transform: translateY(-3px) scale(1.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

.nav-number {
    width: 36px !important;
    height: 36px !important;
    background: white !important;
    color: #1e40af !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.nav-text {
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.2;
    white-space: nowrap;
}

/* ===================================
   SEPARATE DASHBOARD SECTION
   =================================== */

.process-dashboard-section {
    background: linear-gradient(135deg, #1e40af 0%, #7c3aed 100%);
    padding: 4rem 0;
    position: relative;
    z-index: 50;
}

.process-dashboard-section .container {
    max-width: 1400px !important; /* Larger container */
    margin: 0 auto;
    padding: 0 2rem;
}

/* LARGER Dashboard Stats Grid */
.process-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; /* Larger minimum width */
    gap: 2rem !important; /* Larger gaps */
    margin: 0 auto 4rem auto !important; /* Larger bottom margin */
    max-width: 1300px !important; /* Larger max width */
    position: relative;
    z-index: 100;
    visibility: visible !important;
    opacity: 1 !important;
}

.interactive-stat {
    position: relative;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(255, 255, 255, 0.4);
    overflow: visible;
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 2.5rem !important; /* Larger padding */
    border-radius: 20px !important; /* Larger border radius */
    text-align: center;
    min-height: 200px !important; /* Larger minimum height */
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.interactive-stat:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.3) !important;
}

.stat-icon {
    font-size: 4rem !important; /* Larger icons */
    margin-bottom: 1.5rem !important;
    display: block;
    position: relative;
    z-index: 3;
}

.stat-number {
    font-size: 3.5rem !important; /* Larger numbers */
    font-weight: 900;
    color: white;
    display: block;
    margin-bottom: 0.75rem !important;
    position: relative;
    z-index: 3;
}

.stat-label {
    font-size: 1.25rem !important; /* Larger labels */
    font-weight: 600;
    margin-bottom: 0.75rem !important;
    color: white;
    position: relative;
    z-index: 3;
}

.stat-description {
    font-size: 1rem !important; /* Larger descriptions */
    color: rgba(255, 255, 255, 0.9);
    margin-top: 0.75rem !important;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease;
    position: relative;
    z-index: 3;
}

/* LARGER Dashboard Controls */
.dashboard-controls {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 1.5rem !important; /* Larger gaps */
    margin-top: 0 !important; /* Remove top margin since it's in separate section */
    padding: 3rem 2rem !important; /* Larger padding */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 25px !important; /* Larger border radius */
    backdrop-filter: blur(10px);
    flex-wrap: wrap;
    position: relative;
    z-index: 100;
    max-width: 1200px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.dashboard-control {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 1rem !important; /* Larger gaps */
    padding: 2rem 1.5rem !important; /* Larger padding */
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px !important; /* Larger border radius */
    color: white;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    position: relative;
    overflow: visible;
    min-width: 180px !important; /* Larger minimum width */
    text-align: center;
}

.control-icon {
    font-size: 2.5rem !important; /* Larger icons */
    margin-bottom: 0.75rem !important;
}

.control-label {
    font-weight: 700;
    font-size: 1rem !important; /* Larger text */
    display: block;
    margin-bottom: 0.5rem !important;
}

.control-description {
    font-size: 0.85rem !important; /* Larger text */
    opacity: 0.8;
    display: block;
    line-height: 1.4;
}

/* ===================================
   RESPONSIVE DESIGN FOR NEW STRUCTURE
   =================================== */

@media (max-width: 1200px) {
    .process-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
        gap: 1.5rem !important;
    }
    
    .interactive-stat {
        padding: 2rem !important;
        min-height: 180px !important;
    }
    
    .stat-icon {
        font-size: 3.5rem !important;
    }
    
    .stat-number {
        font-size: 3rem !important;
    }
}

@media (max-width: 768px) {
    .process-navigation {
        gap: 1rem !important;
        flex-direction: column !important; /* Stack vertically on mobile */
        align-items: center !important;
    }
    
    .process-nav-btn {
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto !important;
        justify-content: center !important;
    }
    
    .process-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .interactive-stat {
        padding: 1.5rem !important;
        min-height: 150px !important;
    }
    
    .dashboard-controls {
        flex-direction: column !important;
        gap: 1rem !important;
        padding: 2rem 1rem !important;
    }
    
    .dashboard-control {
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 480px) {
    .process-navigation-section {
        padding: 2rem 0;
    }
    
    .process-dashboard-section {
        padding: 3rem 0;
    }
    
    .process-nav-btn {
        padding: 1rem 1.5rem !important;
        min-height: 50px !important;
        min-width: 140px !important;
    }
    
    .nav-number {
        width: 30px !important;
        height: 30px !important;
        font-size: 1rem !important;
    }
    
    .nav-text {
        font-size: 0.9rem !important;
    }
}

/* ===================================
   ENSURE PROPER SPACING BETWEEN SECTIONS
   =================================== */

.process-hero {
    margin-bottom: 0 !important; /* Remove margin since next section has its own background */
}

.process-navigation-section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.process-dashboard-section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Connect the gradient backgrounds seamlessly */
.process-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(135deg, #1e40af 0%, #7c3aed 100%);
}

/* ===================================
   LARGER CONTAINER FOR 5 DASHBOARD CONTROLS
   =================================== */

/* Increase main container width */
.process-dashboard-section .container {
    max-width: 1600px !important; /* Increased from 1400px */
    margin: 0 auto;
    padding: 0 2rem;
    width: 100% !important;
}

/* Larger dashboard controls container */
.dashboard-controls {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 1.25rem !important; /* Optimized gap for 5 controls */
    margin-top: 0 !important;
    padding: 3rem 1.5rem !important; /* Adjusted padding */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 25px !important;
    backdrop-filter: blur(10px);
    flex-wrap: nowrap !important; /* Prevent wrapping */
    position: relative;
    z-index: 100;
    max-width: 1500px !important; /* Larger max-width */
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    overflow-x: auto !important; /* Allow horizontal scroll if needed */
}

/* Optimized dashboard control size for 5 controls */
.dashboard-control {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem !important; /* Slightly reduced gap */
    padding: 1.75rem 1.25rem !important; /* Optimized padding */
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 18px !important;
    color: white;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    position: relative;
    overflow: visible;
    
    /* Optimized width for 5 controls */
    min-width: 160px !important; /* Reduced from 180px */
    max-width: 200px !important; /* Set max-width */
    flex: 1 1 160px !important; /* Flex grow/shrink */
    
    text-align: center;
}

.dashboard-control:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-5px) scale(1.03) !important; /* Slightly reduced scale */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.dashboard-control.active {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-5px) scale(1.05) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

/* Optimized control content */
.control-icon {
    font-size: 2.25rem !important; /* Slightly smaller icons */
    margin-bottom: 0.6rem !important;
}

.control-label {
    font-weight: 700;
    font-size: 0.9rem !important; /* Slightly smaller text */
    display: block;
    margin-bottom: 0.4rem !important;
    line-height: 1.2;
}

.control-description {
    font-size: 0.8rem !important; /* Smaller description */
    opacity: 0.8;
    display: block;
    line-height: 1.3;
    text-align: center;
}

.control-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.2rem 0.6rem !important; /* Smaller padding */
    border-radius: 12px;
    font-size: 0.65rem !important; /* Smaller badge text */
    font-weight: 600;
    margin-top: 0.4rem !important;
}

/* ===================================
   RESPONSIVE BREAKPOINTS FOR 5 CONTROLS
   =================================== */

/* Large screens - all 5 controls in one line */
@media (min-width: 1400px) {
    .dashboard-controls {
        gap: 1.5rem !important;
        padding: 3rem 2rem !important;
    }
    
    .dashboard-control {
        min-width: 180px !important;
        max-width: 220px !important;
        padding: 2rem 1.5rem !important;
    }
    
    .control-icon {
        font-size: 2.5rem !important;
    }
    
    .control-label {
        font-size: 1rem !important;
    }
    
    .control-description {
        font-size: 0.85rem !important;
    }
}

/* Medium-large screens - keep 5 controls but smaller */
@media (min-width: 1200px) and (max-width: 1399px) {
    .dashboard-controls {
        gap: 1rem !important;
        padding: 2.5rem 1.5rem !important;
    }
    
    .dashboard-control {
        min-width: 150px !important;
        max-width: 180px !important;
        padding: 1.5rem 1rem !important;
    }
    
    .control-icon {
        font-size: 2rem !important;
    }
    
    .control-label {
        font-size: 0.85rem !important;
    }
    
    .control-description {
        font-size: 0.75rem !important;
    }
}

/* Tablet screens - still try to fit 5 controls */
@media (min-width: 900px) and (max-width: 1199px) {
    .dashboard-controls {
        gap: 0.75rem !important;
        padding: 2rem 1rem !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .dashboard-control {
        min-width: 140px !important;
        max-width: 160px !important;
        padding: 1.25rem 0.75rem !important;
        flex-shrink: 0 !important; /* Prevent shrinking */
    }
    
    .control-icon {
        font-size: 1.75rem !important;
    }
    
    .control-label {
        font-size: 0.8rem !important;
    }
    
    .control-description {
        font-size: 0.7rem !important;
    }
}

/* Mobile screens - stack vertically or horizontal scroll */
@media (max-width: 899px) {
    .dashboard-controls {
        flex-direction: column !important;
        gap: 1rem !important;
        padding: 2rem 1rem !important;
        align-items: center !important;
    }
    
    .dashboard-control {
        width: 100% !important;
        max-width: 300px !important;
        min-width: auto !important;
        margin: 0 auto !important;
        flex-direction: row !important;
        text-align: left !important;
        justify-content: flex-start !important;
        padding: 1rem 1.5rem !important;
    }
    
    .control-icon {
        font-size: 1.5rem !important;
        margin-bottom: 0 !important;
        margin-right: 1rem !important;
        flex-shrink: 0;
    }
    
    .control-content {
        flex: 1;
        text-align: left;
    }
    
    .control-label {
        font-size: 0.9rem !important;
        text-align: left;
    }
    
    .control-description {
        font-size: 0.8rem !important;
        text-align: left;
    }
}

/* ===================================
   LARGER PROCESS STATS GRID TO MATCH
   =================================== */

.process-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; /* Larger minimum width */
    gap: 2rem !important;
    margin: 0 auto 4rem auto !important;
    max-width: 1500px !important; /* Increased to match dashboard */
    position: relative;
    z-index: 100;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
}

/* ===================================
   HORIZONTAL SCROLL INDICATOR (OPTIONAL)
   For tablets when controls might overflow
   =================================== */

@media (min-width: 900px) and (max-width: 1199px) {
    .dashboard-controls::before {
        content: '';
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 20px;
        height: 40px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1));
        pointer-events: none;
        border-radius: 10px 0 0 10px;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .dashboard-controls:hover::before {
        opacity: 1;
    }
    
    .dashboard-controls::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 20px;
        height: 40px;
        background: linear-gradient(270deg, transparent, rgba(255, 255, 255, 0.1));
        pointer-events: none;
        border-radius: 0 10px 10px 0;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .dashboard-controls:hover::after {
        opacity: 1;
    }
}

/* ===================================
   ENSURE NO WRAPPING ON LARGE SCREENS
   =================================== */

/* Force single line layout on screens that can accommodate it */
@media (min-width: 1200px) {
    .dashboard-controls {
        flex-wrap: nowrap !important;
        white-space: nowrap;
    }
    
    .dashboard-control {
        white-space: normal;
    }
}

/* ===================================
   ULTRA-WIDE SCREEN OPTIMIZATION
   =================================== */

@media (min-width: 1600px) {
    .process-dashboard-section .container {
        max-width: 1800px !important;
    }
    
    .dashboard-controls {
        max-width: 1700px !important;
        gap: 2rem !important;
        padding: 4rem 3rem !important;
    }
    
    .dashboard-control {
        min-width: 200px !important;
        max-width: 250px !important;
        padding: 2.5rem 2rem !important;
    }
    
    .control-icon {
        font-size: 3rem !important;
    }
    
    .control-label {
        font-size: 1.1rem !important;
    }
    
    .control-description {
        font-size: 0.9rem !important;
    }
}
/* ===================================
   EXTRA SMALL INTERACTIVE PROCESS STATS
   =================================== */

/* Even smaller stats grid */
.process-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.75rem !important; /* Reduced gap further */
    margin: 0 auto 2rem auto !important; /* Reduced bottom margin */
    max-width: 1200px !important; /* Smaller max-width */
    position: relative;
    z-index: 100;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
}

/* Extra compact stat cards */
.interactive-stat {
    position: relative;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(255, 255, 255, 0.4);
    overflow: visible;
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    /* EXTRA COMPACT SIZING */
    padding: 1rem 0.75rem !important; /* Further reduced padding */
    border-radius: 12px !important; /* Smaller border radius */
    text-align: center;
    min-height: 110px !important; /* Much smaller height */
    
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.interactive-stat:hover {
    transform: translateY(-4px) scale(1.02) !important; /* Subtle hover effect */
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.3) !important;
}

/* Much smaller icons */
.stat-icon {
    font-size: 1.75rem !important; /* Much smaller icons */
    margin-bottom: 0.5rem !important;
    display: block;
    position: relative;
    z-index: 3;
}

/* Much smaller numbers */
.stat-number {
    font-size: 1.75rem !important; /* Much smaller numbers */
    font-weight: 900;
    color: white;
    display: block;
    margin-bottom: 0.3rem !important;
    position: relative;
    z-index: 3;
    line-height: 1;
}

/* Much smaller labels */
.stat-label {
    font-size: 0.75rem !important; /* Much smaller labels */
    font-weight: 600;
    margin-bottom: 0.25rem !important;
    color: white;
    position: relative;
    z-index: 3;
    line-height: 1.1;
}

/* Much smaller descriptions */
.stat-description {
    font-size: 0.65rem !important; /* Much smaller descriptions */
    color: rgba(255, 255, 255, 0.85);
    margin-top: 0.25rem !important;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease;
    position: relative;
    z-index: 3;
    line-height: 1.2;
}

/* Hide progress rings to save space */
.stat-progress-ring {
    display: none !important;
}

/* ===================================
   MINI TOOLTIPS FOR SMALLER STATS
   =================================== */

/* Much smaller tooltips */
.stat-tooltip {
    bottom: calc(100% + 6px) !important;
    width: 180px !important; /* Much smaller tooltips */
    padding: 0.75rem !important;
    border-radius: 6px !important;
}

.stat-tooltip h4 {
    font-size: 0.85rem !important;
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.4rem !important;
}

.stat-tooltip p {
    font-size: 0.7rem !important;
    margin-bottom: 0.5rem !important;
}

.stat-tooltip ul li {
    font-size: 0.65rem !important;
    margin-bottom: 0.3rem !important;
    padding-left: 0.7rem !important;
}

.breakdown-item,
.phase-item {
    padding: 0.4rem !important;
    margin-bottom: 0.4rem !important;
    font-size: 0.65rem !important;
    border-radius: 4px !important;
}

.phase-number {
    width: 18px !important;
    height: 18px !important;
    font-size: 0.6rem !important;
}

.phase-duration {
    font-size: 0.6rem !important;
    padding: 0.15rem 0.4rem !important;
    border-radius: 6px !important;
}

/* ===================================
   RESPONSIVE FOR EXTRA SMALL STATS
   =================================== */

/* Large screens */
@media (min-width: 1200px) {
    .process-stats-grid {
        gap: 1rem !important;
        max-width: 1300px !important;
    }
    
    .interactive-stat {
        padding: 1.25rem 1rem !important;
        min-height: 120px !important;
    }
    
    .stat-icon {
        font-size: 2rem !important;
    }
    
    .stat-number {
        font-size: 2rem !important;
    }
    
    .stat-label {
        font-size: 0.8rem !important;
    }
    
    .stat-description {
        font-size: 0.7rem !important;
    }
}

/* Medium screens */
@media (min-width: 900px) and (max-width: 1199px) {
    .process-stats-grid {
        gap: 0.6rem !important;
        max-width: 1000px !important;
    }
    
    .interactive-stat {
        padding: 1rem 0.75rem !important;
        min-height: 100px !important;
    }
    
    .stat-icon {
        font-size: 1.5rem !important;
        margin-bottom: 0.4rem !important;
    }
    
    .stat-number {
        font-size: 1.5rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .stat-label {
        font-size: 0.7rem !important;
        margin-bottom: 0.2rem !important;
    }
    
    .stat-description {
        font-size: 0.6rem !important;
    }
}

/* Tablet screens - 2x2 grid */
@media (min-width: 600px) and (max-width: 899px) {
    .process-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
        max-width: 500px !important;
    }
    
    .interactive-stat {
        padding: 1rem !important;
        min-height: 110px !important;
    }
    
    .stat-icon {
        font-size: 1.75rem !important;
    }
    
    .stat-number {
        font-size: 1.75rem !important;
    }
    
    .stat-label {
        font-size: 0.75rem !important;
    }
    
    .stat-description {
        font-size: 0.65rem !important;
    }
}

/* Mobile screens - single column with horizontal layout */
@media (max-width: 599px) {
    .process-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        max-width: 320px !important;
    }
    
    .interactive-stat {
        padding: 0.75rem !important;
        min-height: 80px !important;
        flex-direction: row !important;
        text-align: left !important;
        justify-content: flex-start !important;
    }
    
    .stat-icon {
        font-size: 1.25rem !important;
        margin-bottom: 0 !important;
        margin-right: 0.75rem !important;
        flex-shrink: 0;
    }
    
    .stat-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        text-align: left;
    }
    
    .stat-number {
        font-size: 1.25rem !important;
        margin-bottom: 0.15rem !important;
    }
    
    .stat-label {
        font-size: 0.7rem !important;
        margin-bottom: 0.15rem !important;
    }
    
    .stat-description {
        font-size: 0.6rem !important;
        margin-top: 0.15rem !important;
    }
}

/* ===================================
   ULTRA-MINI VERSION (OPTIONAL)
   Uncomment this for extremely compact stats
   =================================== */

/*
.process-stats-grid.ultra-mini .interactive-stat {
    padding: 0.75rem 0.5rem !important;
    min-height: 90px !important;
}

.process-stats-grid.ultra-mini .stat-icon {
    font-size: 1.5rem !important;
    margin-bottom: 0.4rem !important;
}

.process-stats-grid.ultra-mini .stat-number {
    font-size: 1.5rem !important;
    margin-bottom: 0.25rem !important;
}

.process-stats-grid.ultra-mini .stat-label {
    font-size: 0.65rem !important;
    margin-bottom: 0.2rem !important;
}

.process-stats-grid.ultra-mini .stat-description {
    font-size: 0.55rem !important;
}

.process-stats-grid.ultra-mini .stat-tooltip {
    width: 150px !important;
    padding: 0.5rem !important;
}
*/
/* ===================================
   FIX DASHBOARD TOOLTIPS Z-INDEX
   Force tooltips to appear above all content
   =================================== */

/* Increase z-index for dashboard tooltips */
.dashboard-tooltip {
    z-index: 9999 !important; /* Much higher z-index */
    position: fixed !important; /* Use fixed positioning for better stacking */
}

/* Ensure dashboard controls have proper stacking context */
.dashboard-controls {
    position: relative !important;
    z-index: 500 !important;
}

.dashboard-control {
    position: relative !important;
    z-index: 501 !important;
}

/* Force tooltips to be above everything */
.dashboard-control:hover .dashboard-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 9999 !important;
    transform: translateX(-50%) translateY(-5px) !important;
    pointer-events: auto !important;
    position: fixed !important; /* Force fixed positioning */
}

/* Override any parent containers that might interfere */
.process-dashboard-section {
    position: relative !important;
    z-index: 50 !important;
}

.process-dashboard-section .container {
    position: relative !important;
    z-index: 60 !important;
}

/* Ensure hero sections don't interfere */
.process-hero,
.process-navigation-section {
    z-index: 10 !important;
}

/* Make sure tooltips appear above page content */
.dashboard-tooltip {
    background: #ffffff !important;
    border: 2px solid #e5e7eb !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important; /* Stronger shadow */
    backdrop-filter: none !important; /* Remove backdrop filter for better visibility */
    -webkit-backdrop-filter: none !important;
}

/* Alternative positioning method for problematic cases */
.dashboard-control {
    overflow: visible !important;
}

.dashboard-control:hover {
    z-index: 10000 !important;
}

/* Force create new stacking context */
.dashboard-control:hover .dashboard-tooltip {
    position: absolute !important;
    bottom: calc(100% + 10px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10001 !important;
    isolation: isolate !important; /* Create new stacking context */
}

/* ===================================
   ENHANCED TOOLTIP VISIBILITY
   =================================== */

/* Make tooltips more visible with better contrast */
.dashboard-tooltip {
    border: 3px solid rgba(30, 64, 175, 0.3) !important; /* Blue border for visibility */
    background: #ffffff !important;
    color: #1f2937 !important;
    font-weight: 500 !important;
}

.dashboard-tooltip::before {
    border-top: 8px solid rgba(30, 64, 175, 0.3) !important; /* Match border color */
    z-index: 10002 !important;
}

.dashboard-tooltip::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 6px solid transparent !important;
    border-right: 6px solid transparent !important;
    border-top: 6px solid #ffffff !important;
    z-index: 10003 !important;
    margin-top: -1px !important;
}

/* ===================================
   DEBUGGING STYLES (TEMPORARY)
   Uncomment to see tooltip boundaries
   =================================== */

/*
.dashboard-tooltip {
    border: 3px solid red !important;
    background: yellow !important;
    color: black !important;
}

.dashboard-control:hover .dashboard-tooltip {
    outline: 5px solid blue !important;
    outline-offset: 2px !important;
}
*/

/* ===================================
   FORCE OVERRIDE ANY CONFLICTING STYLES
   =================================== */

/* Override WordPress or theme styles that might interfere */
body .dashboard-tooltip,
html .dashboard-tooltip,
* .dashboard-tooltip {
    z-index: 99999 !important;
    position: absolute !important;
}

/* Make sure no parent elements hide the tooltips */
.process-dashboard-section,
.process-dashboard-section *,
.dashboard-controls,
.dashboard-controls * {
    overflow: visible !important;
}

/* Reset any transform-style that might cause stacking issues */
.dashboard-controls,
.dashboard-control {
    transform-style: flat !important;
}

/* ===================================
   MOBILE RESPONSIVE Z-INDEX FIXES
   =================================== */

@media (max-width: 768px) {
    .dashboard-tooltip {
        z-index: 99999 !important;
        position: fixed !important;
        bottom: auto !important;
        top: 10px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
    }
    
    .dashboard-control:hover .dashboard-tooltip {
        position: fixed !important;
        top: 10px !important;
        left: 10px !important;
        right: 10px !important;
        transform: none !important;
        z-index: 99999 !important;
    }
    
    .dashboard-tooltip::before,
    .dashboard-tooltip::after {
        display: none !important; /* Hide arrows on mobile */
    }
}

/* ===================================
   JAVASCRIPT FALLBACK POSITIONING
   =================================== */

/* If CSS positioning fails, this ensures visibility */
.dashboard-tooltip.js-positioned {
    position: fixed !important;
    z-index: 999999 !important;
    top: 50px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: 90vw !important;
}
/* ===================================
   PROCESS STEPS VISIBILITY CONTROL
   =================================== */

/* HIDE ALL STEPS BY DEFAULT */
.process-step {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    position: relative !important;
    width: 100% !important;
    padding: 4rem !important;
    margin-bottom: 2rem !important;
    background: white !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* SHOW STEP-1 BY DEFAULT */
#step-1,
.process-step[data-step="1"],
.process-step:first-child {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* SHOW ACTIVE STEP */
.process-step.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* HIDE INACTIVE STEPS */
.process-step:not(.active):not(#step-1):not([data-step="1"]):not(:first-child) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ===================================
   STEP CONTENT VISIBILITY
   =================================== */

/* Ensure all step content is visible when step is active */
.process-step.active .step-header,
.process-step.active .step-body,
.process-step.active .step-details-grid,
.process-step.active .interactive-checklist,
#step-1 .step-header,
#step-1 .step-body,
#step-1 .step-details-grid,
#step-1 .interactive-checklist {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Step Header */
.step-header {
    display: flex !important;
    align-items: flex-start !important;
    gap: 3rem !important;
    margin-bottom: 4rem !important;
    padding-bottom: 3rem !important;
    border-bottom: 2px solid #f8fafc !important;
    position: relative !important;
}

/* Step Body */
.step-body {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Step Details Grid */
.step-details-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 2rem !important;
    margin-bottom: 2rem !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Interactive Checklist */
.interactive-checklist {
    display: block !important;
    background: #f8fafc !important;
    padding: 2rem !important;
    border-radius: 12px !important;
    margin-top: 2rem !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ===================================
   NAVIGATION BUTTON STATES
   =================================== */

/* Default navigation button state */
.process-nav-btn {
    opacity: 0.7 !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Active navigation button (step-1 active by default) */
.process-nav-btn[data-step="1"],
.process-nav-btn.active {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    transform: translateY(-3px) scale(1.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

/* Hover states for inactive buttons */
.process-nav-btn:not(.active):hover {
    opacity: 0.9 !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) scale(1.02) !important;
}

/* ===================================
   STEP ANIMATIONS
   =================================== */

/* Entrance animation for steps */
.process-step.active {
    animation: stepFadeIn 0.6s ease-out forwards !important;
}

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

/* ===================================
   RESPONSIVE ADJUSTMENTS
   =================================== */

@media (max-width: 768px) {
    .process-step {
        padding: 2rem 1rem !important;
    }
    
    .step-header {
        flex-direction: column !important;
        gap: 1.5rem !important;
        text-align: center !important;
    }
    
    .step-details-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

/* ===================================
   FORCE VISIBILITY FOR STEP-1
   =================================== */

/* Ensure step-1 is always visible on page load */
#step-1,
.process-step[data-step="1"] {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
}

/* Force step-1 button to be active */
.process-nav-btn[data-step="1"] {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    transform: translateY(-3px) scale(1.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}
/* ===================================
   STEP VISIBILITY CONTROL CSS
   Add this to your process-page.css file
   =================================== */

/* FORCE HIDE ALL STEPS BY DEFAULT */
.process-step {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    position: relative !important;
    width: 100% !important;
    padding: 4rem !important;
    margin-bottom: 2rem !important;
    background: white !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.4s ease !important;
    transform: translateY(20px) !important;
    min-height: 600px !important;
}

/* STEP 1 ALWAYS VISIBLE - HIGHEST PRIORITY */
#step-1,
.process-step[data-step="1"],
.process-step:first-of-type {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    position: relative !important;
}

/* ACTIVE STEP VISIBLE */
.process-step.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    animation: slideInStep 0.5s ease-out forwards !important;
    position: relative !important;
    z-index: 10 !important;
}

/* FORCE INACTIVE STEPS TO BE HIDDEN */
.process-step:not(.active):not(#step-1):not([data-step="1"]):not(:first-of-type) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(20px) !important;
    z-index: 1 !important;
}

/* ENSURE STEP CONTENT IS VISIBLE WHEN STEP IS ACTIVE */
.process-step.active .step-header,
.process-step.active .step-body,
.process-step.active .step-details-grid,
.process-step.active .interactive-checklist,
#step-1 .step-header,
#step-1 .step-body,
#step-1 .step-details-grid,
#step-1 .interactive-checklist {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* STEP DETAILS GRID - FORCE 3 COLUMNS */
.process-step.active .step-details-grid,
#step-1 .step-details-grid,
.step-details-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
    margin-bottom: 2rem !important;
    width: 100% !important;
    align-items: stretch !important;
}

/* DETAIL CARDS FORCE HORIZONTAL */
.process-step.active .detail-card,
#step-1 .detail-card,
.detail-card {
    background: #f8fafc !important;
    padding: 1.5rem !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    border-left: 4px solid #1e40af !important;
    flex: 1 1 0 !important;
}

/* NAVIGATION BUTTON STATES */
.process-nav-btn {
    opacity: 0.7 !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

/* ACTIVE BUTTON STATE */
.process-nav-btn.active,
.process-nav-btn[data-step="1"] {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

/* HOVER EFFECT FOR INACTIVE BUTTONS */
.process-nav-btn:not(.active):hover {
    opacity: 0.9 !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px) scale(1.02) !important;
}

/* SLIDE IN ANIMATION */
@keyframes slideInStep {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* FORCE STEP CONTAINER LAYOUT */
.process-steps-container {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    overflow: visible !important;
    min-height: 600px !important;
}

/* RESPONSIVE - KEEP 3 COLUMNS UNTIL MOBILE */
@media (min-width: 700px) {
    .step-details-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* MOBILE - STACK DETAIL CARDS */
@media (max-width: 699px) {
    .step-details-grid {
        grid-template-columns: 1fr !important;
    }
    
    .process-step {
        padding: 2rem 1rem !important;
    }
}