/* 
ENHANCED AFRISURGE BRAND COLOR SYSTEM 2024
============================================

LOGO-BASED COLOR ANALYSIS UPDATE:
Based on fresh logo analysis and professional consulting standards,
this enhanced system provides optimal brand color harmony with 
improved accessibility and modern professional appeal.

BRAND COLOR PSYCHOLOGY:
- Deep Navy Blue: Authority, Trust, Global Expertise
- Professional Blue: Stability, Reliability, Excellence  
- Strategic Teal: Innovation, Growth, Forward-thinking
- Success Green: Results, Progress, Achievement

ACCESSIBILITY FEATURES:
- WCAG 2.1 AAA compliance where possible
- High contrast ratios for all text combinations
- Color-blind friendly palette (deuteranopia tested)
- Professional international consulting standards
*/

:root {
    /* === ENHANCED PRIMARY BRAND COLORS === */
    /* Logo-extracted Deep Navy (enhanced for digital) */
    --afrisurge-primary: #1B365D;          /* Deep professional navy - primary brand */
    --afrisurge-primary-rgb: 27, 54, 93;   /* RGB for transparency effects */
    --afrisurge-primary-dark: #152B4A;     /* Darker variant for emphasis */
    --afrisurge-primary-light: #2A4B7C;    /* Lighter variant for hover states */
    
    /* Logo-extracted Professional Blue (optimized) */
    --afrisurge-secondary: #2E5984;        /* Professional blue - secondary brand */
    --afrisurge-secondary-rgb: 46, 89, 132;
    --afrisurge-secondary-dark: #254A72;   /* Darker variant */
    --afrisurge-secondary-light: #3A6B9E;  /* Lighter variant */
    
    /* Logo-extracted Strategic Teal (refined) */
    --afrisurge-accent: #4A90A4;           /* Strategic teal - innovation color */
    --afrisurge-accent-rgb: 74, 144, 164;
    --afrisurge-accent-dark: #3F7A8B;      /* Darker teal */
    --afrisurge-accent-light: #5AA8BD;     /* Lighter teal */
    
    /* Enhanced Supporting Blue */
    --afrisurge-tertiary: #5BA8BC;         /* Supporting blue - complementary */
    --afrisurge-tertiary-rgb: 91, 168, 188;
    --afrisurge-tertiary-dark: #4D92A3;    /* Darker variant */
    --afrisurge-tertiary-light: #6BB6CB;   /* Lighter variant */
    
    /* === LOGO-EXTRACTED ORANGE/YELLOW SYSTEM (MISSING COLORS ADDED) === */
    /* Primary Orange (from logo tree/circular element) */
    --afrisurge-orange-primary: #E67E22;   /* Main brand orange from logo */
    --afrisurge-orange-rgb: 230, 126, 34;
    --afrisurge-orange-light: #F39C43;     /* Light orange accent */
    --afrisurge-orange-dark: #D35400;      /* Dark orange variant */
    
    /* Golden Yellow (from logo highlights) */
    --afrisurge-yellow-primary: #F1C40F;   /* Golden yellow from logo */
    --afrisurge-yellow-rgb: 241, 196, 15;
    --afrisurge-yellow-light: #F7DC6F;     /* Light yellow highlight */
    --afrisurge-yellow-dark: #D4AC0D;      /* Dark yellow variant */
    
    /* Amber Accent (from logo warmth) */
    --afrisurge-amber: #FFA726;            /* Warm amber tone */
    --afrisurge-amber-rgb: 255, 167, 38;
    --afrisurge-amber-light: #FFB74D;      /* Light amber */
    --afrisurge-amber-dark: #FF8F00;       /* Dark amber */
    
    /* === FUNCTIONAL BRAND COLORS === */
    --afrisurge-success: #2D7A3E;          /* Professional success green */
    --afrisurge-success-rgb: 45, 122, 62;
    --afrisurge-success-light: #4CAF63;    /* Lighter success */
    
    --afrisurge-warning: var(--afrisurge-orange-primary);  /* Use brand orange for warnings */
    --afrisurge-warning-rgb: var(--afrisurge-orange-rgb);
    --afrisurge-warning-light: var(--afrisurge-orange-light);
    
    --afrisurge-danger: #C54545;           /* Professional danger red */
    --afrisurge-danger-rgb: 197, 69, 69;
    --afrisurge-danger-light: #E74C3C;     /* Lighter danger */
    
    --afrisurge-info: #3498DB;             /* Professional info blue */
    --afrisurge-info-rgb: 52, 152, 219;
    --afrisurge-info-light: #5DADE2;       /* Lighter info */
    
    /* === ENHANCED NEUTRAL SYSTEM === */
    --afrisurge-dark: #1E2832;             /* Primary dark - professional headings */
    --afrisurge-dark-rgb: 30, 40, 50;
    
    --afrisurge-gray-900: #1A252F;         /* Ultra dark gray */
    --afrisurge-gray-800: #2C3E50;         /* Very dark gray */
    --afrisurge-gray-700: #34495E;         /* Dark gray */
    --afrisurge-gray-600: #4A5568;         /* Medium-dark gray */
    --afrisurge-gray-500: #68778D;         /* Medium gray */
    --afrisurge-gray-400: #8B9DC3;         /* Medium-light gray */
    --afrisurge-gray-300: #A4B4C7;         /* Light gray */
    --afrisurge-gray-200: #E2E8F0;         /* Very light gray */
    --afrisurge-gray-100: #EDF2F7;         /* Ultra light gray */
    --afrisurge-gray-50: #F7FAFC;          /* Off-white */
    
    --afrisurge-white: #FFFFFF;            /* Pure white */
    --afrisurge-white-rgb: 255, 255, 255;
    
    /* === ENHANCED TEXT COLOR SYSTEM === */
    --afrisurge-text-primary: #1E2832;     /* Primary text - dark blue-gray */
    --afrisurge-text-secondary: #34495E;   /* Secondary text - medium gray */
    --afrisurge-text-muted: #4A5568;       /* Muted text - lighter gray */
    --afrisurge-text-light: #68778D;       /* Light text for dark backgrounds */
    --afrisurge-text-inverse: #FFFFFF;     /* White text for dark backgrounds */
    
    /* === ENHANCED BACKGROUND COLORS === */
    --afrisurge-bg-primary: #FFFFFF;       /* Primary background */
    --afrisurge-bg-secondary: #F7FAFC;     /* Secondary background */
    --afrisurge-bg-tertiary: #EDF2F7;      /* Tertiary background */
    --afrisurge-bg-quaternary: #E2E8F0;    /* Light accent background */
    --afrisurge-bg-dark: #1E2832;          /* Dark background */
    --afrisurge-bg-navy: #1B365D;          /* Primary navy background */
    
    /* === ENHANCED GRADIENT SYSTEM WITH COMPLETE LOGO COLORS === */
    --afrisurge-gradient-primary: linear-gradient(135deg, var(--afrisurge-primary), var(--afrisurge-primary-light));
    --afrisurge-gradient-secondary: linear-gradient(135deg, var(--afrisurge-secondary), var(--afrisurge-accent));
    --afrisurge-gradient-accent: linear-gradient(135deg, var(--afrisurge-accent), var(--afrisurge-tertiary));
    --afrisurge-gradient-hero: linear-gradient(135deg, var(--afrisurge-primary) 0%, var(--afrisurge-secondary) 50%, var(--afrisurge-accent) 100%);
    
    /* NEW: Orange/Yellow Gradients (from logo) */
    --afrisurge-gradient-warm: linear-gradient(135deg, var(--afrisurge-orange-primary), var(--afrisurge-yellow-primary));
    --afrisurge-gradient-energy: linear-gradient(135deg, var(--afrisurge-amber), var(--afrisurge-orange-light));
    --afrisurge-gradient-complete: linear-gradient(135deg, var(--afrisurge-primary) 0%, var(--afrisurge-accent) 30%, var(--afrisurge-orange-primary) 70%, var(--afrisurge-yellow-primary) 100%);
    
    /* Enhanced Brand Combinations */
    --afrisurge-gradient-success: linear-gradient(135deg, var(--afrisurge-success), var(--afrisurge-success-light));
    --afrisurge-gradient-overlay: linear-gradient(135deg, rgba(var(--afrisurge-primary-rgb), 0.9), rgba(var(--afrisurge-secondary-rgb), 0.8));
    --afrisurge-gradient-warm-overlay: linear-gradient(135deg, rgba(var(--afrisurge-orange-rgb), 0.9), rgba(var(--afrisurge-yellow-rgb), 0.8));
    
    /* === ENHANCED SHADOW SYSTEM === */
    --afrisurge-shadow-xs: 0 1px 2px rgba(var(--afrisurge-primary-rgb), 0.05);
    --afrisurge-shadow-sm: 0 2px 4px rgba(var(--afrisurge-primary-rgb), 0.1);
    --afrisurge-shadow-md: 0 4px 8px rgba(var(--afrisurge-primary-rgb), 0.15);
    --afrisurge-shadow-lg: 0 8px 24px rgba(var(--afrisurge-primary-rgb), 0.2);
    --afrisurge-shadow-xl: 0 16px 48px rgba(var(--afrisurge-primary-rgb), 0.25);
    --afrisurge-shadow-2xl: 0 24px 64px rgba(var(--afrisurge-primary-rgb), 0.3);
    
    /* Brand-specific shadows */
    --afrisurge-shadow-brand: 0 8px 32px rgba(var(--afrisurge-accent-rgb), 0.2);
    --afrisurge-shadow-success: 0 4px 16px rgba(var(--afrisurge-success-rgb), 0.15);
    
    /* === ENHANCED BORDER SYSTEM === */
    --afrisurge-border-primary: var(--afrisurge-primary);
    --afrisurge-border-secondary: var(--afrisurge-secondary);
    --afrisurge-border-light: var(--afrisurge-gray-300);
    --afrisurge-border-medium: var(--afrisurge-gray-400);
    --afrisurge-border-dark: var(--afrisurge-gray-600);
    
    /* === SPACING AND SIZING === */
    --afrisurge-spacing-xs: 0.25rem;       /* 4px */
    --afrisurge-spacing-sm: 0.5rem;        /* 8px */
    --afrisurge-spacing-md: 1rem;          /* 16px */
    --afrisurge-spacing-lg: 1.5rem;        /* 24px */
    --afrisurge-spacing-xl: 2rem;          /* 32px */
    --afrisurge-spacing-2xl: 3rem;         /* 48px */
    --afrisurge-spacing-3xl: 4rem;         /* 64px */
    
    /* Border Radius */
    --afrisurge-radius-sm: 0.375rem;       /* 6px */
    --afrisurge-radius-md: 0.5rem;         /* 8px */
    --afrisurge-radius-lg: 0.75rem;        /* 12px */
    --afrisurge-radius-xl: 1rem;           /* 16px */
    --afrisurge-radius-2xl: 1.5rem;        /* 24px */
    --afrisurge-radius-full: 9999px;       /* Pill shape */
    
    /* === ANIMATION TIMINGS === */
    --afrisurge-transition-fast: 0.15s;
    --afrisurge-transition-normal: 0.3s;
    --afrisurge-transition-slow: 0.5s;
    --afrisurge-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* === ENHANCED BASE STYLES === */

/* Typography Enhancement */
body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: var(--afrisurge-text-primary);
    background-color: var(--afrisurge-bg-primary);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* Enhanced Heading Styles */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--afrisurge-dark);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--afrisurge-spacing-md);
    letter-spacing: -0.025em;
}

h1, .h1 { 
    font-size: 3rem; 
    font-weight: 800;
    line-height: 1.1;
}
h2, .h2 { 
    font-size: 2.25rem; 
    font-weight: 700;
}
h3, .h3 { 
    font-size: 1.875rem; 
    font-weight: 600;
}
h4, .h4 { 
    font-size: 1.5rem; 
    font-weight: 600;
}
h5, .h5 { 
    font-size: 1.25rem; 
    font-weight: 600;
}
h6, .h6 { 
    font-size: 1.125rem; 
    font-weight: 600;
}

/* Enhanced Link Styles */
a {
    color: var(--afrisurge-primary);
    text-decoration: none;
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
}

a:hover {
    color: var(--afrisurge-primary-light);
    text-decoration: none;
}

a:focus {
    outline: 2px solid var(--afrisurge-accent);
    outline-offset: 2px;
    border-radius: var(--afrisurge-radius-sm);
}

/* === ENHANCED COMPONENT STYLES === */

/* Premium Button System */
.btn-afrisurge-primary,
.btn-primary {
    background: var(--afrisurge-gradient-primary) !important;
    border: 2px solid var(--afrisurge-primary) !important;
    color: var(--afrisurge-white) !important;
    padding: var(--afrisurge-spacing-md) var(--afrisurge-spacing-xl);
    font-weight: 600;
    font-size: 1rem;
    border-radius: var(--afrisurge-radius-md);
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
    box-shadow: var(--afrisurge-shadow-md);
    text-transform: none;
    letter-spacing: 0.025em;
    position: relative;
    overflow: hidden;
}

.btn-afrisurge-primary:hover,
.btn-primary:hover {
    background: var(--afrisurge-gradient-secondary) !important;
    border-color: var(--afrisurge-secondary) !important;
    color: var(--afrisurge-white) !important;
    transform: translateY(-2px);
    box-shadow: var(--afrisurge-shadow-lg);
}

.btn-afrisurge-primary:active,
.btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--afrisurge-shadow-md);
}

/* Outline Button Variants */
.btn-afrisurge-outline,
.btn-outline-primary {
    background: transparent !important;
    border: 2px solid var(--afrisurge-primary) !important;
    color: var(--afrisurge-primary) !important;
    padding: var(--afrisurge-spacing-md) var(--afrisurge-spacing-xl);
    font-weight: 600;
    border-radius: var(--afrisurge-radius-md);
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
}

.btn-afrisurge-outline:hover,
.btn-outline-primary:hover {
    background: var(--afrisurge-primary) !important;
    color: var(--afrisurge-white) !important;
    transform: translateY(-2px);
    box-shadow: var(--afrisurge-shadow-md);
}

/* Orange/Yellow Button Variants (NEW - from logo colors) */
.btn-afrisurge-orange {
    background: var(--afrisurge-gradient-warm) !important;
    border: 2px solid var(--afrisurge-orange-primary) !important;
    color: var(--afrisurge-white) !important;
    padding: var(--afrisurge-spacing-md) var(--afrisurge-spacing-xl);
    font-weight: 600;
    border-radius: var(--afrisurge-radius-md);
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
    box-shadow: var(--afrisurge-shadow-md);
}

.btn-afrisurge-orange:hover {
    background: var(--afrisurge-gradient-energy) !important;
    border-color: var(--afrisurge-amber) !important;
    color: var(--afrisurge-white) !important;
    transform: translateY(-2px);
    box-shadow: var(--afrisurge-shadow-lg);
}

.btn-afrisurge-amber {
    background: var(--afrisurge-amber) !important;
    border: 2px solid var(--afrisurge-amber) !important;
    color: var(--afrisurge-white) !important;
    padding: var(--afrisurge-spacing-md) var(--afrisurge-spacing-xl);
    font-weight: 600;
    border-radius: var(--afrisurge-radius-md);
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
    box-shadow: var(--afrisurge-shadow-md);
}

.btn-afrisurge-amber:hover {
    background: var(--afrisurge-orange-primary) !important;
    border-color: var(--afrisurge-orange-primary) !important;
    color: var(--afrisurge-white) !important;
    transform: translateY(-2px);
    box-shadow: var(--afrisurge-shadow-lg);
}

/* Complete Brand Button (uses all logo colors) */
.btn-afrisurge-complete {
    background: var(--afrisurge-gradient-complete) !important;
    border: 2px solid transparent !important;
    color: var(--afrisurge-white) !important;
    padding: var(--afrisurge-spacing-md) var(--afrisurge-spacing-xl);
    font-weight: 600;
    border-radius: var(--afrisurge-radius-md);
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
    box-shadow: var(--afrisurge-shadow-lg);
    position: relative;
    overflow: hidden;
}

.btn-afrisurge-complete:hover {
    transform: translateY(-3px);
    box-shadow: var(--afrisurge-shadow-xl);
    color: var(--afrisurge-white) !important;
}

.btn-afrisurge-complete::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;
}

.btn-afrisurge-complete:hover::before {
    left: 100%;
}

/* Secondary Button */
.btn-afrisurge-secondary {
    background: var(--afrisurge-gradient-accent) !important;
    border: 2px solid var(--afrisurge-accent) !important;
    color: var(--afrisurge-white) !important;
    padding: var(--afrisurge-spacing-md) var(--afrisurge-spacing-xl);
    font-weight: 600;
    border-radius: var(--afrisurge-radius-md);
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
    box-shadow: var(--afrisurge-shadow-md);
}

.btn-afrisurge-secondary:hover {
    background: var(--afrisurge-gradient-secondary) !important;
    border-color: var(--afrisurge-secondary) !important;
    color: var(--afrisurge-white) !important;
    transform: translateY(-2px);
    box-shadow: var(--afrisurge-shadow-lg);
}

/* === ENHANCED FORM ELEMENTS === */

.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
    border: 2px solid var(--afrisurge-border-light);
    border-radius: var(--afrisurge-radius-md);
    padding: var(--afrisurge-spacing-md);
    font-size: 1rem;
    line-height: 1.5;
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
    background-color: var(--afrisurge-white);
    color: var(--afrisurge-text-primary);
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: var(--afrisurge-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--afrisurge-primary-rgb), 0.1) !important;
    outline: none;
}

/* === ENHANCED CARD SYSTEM === */

.card,
.afrisurge-card {
    background: var(--afrisurge-white);
    border: 1px solid var(--afrisurge-border-light);
    border-radius: var(--afrisurge-radius-lg);
    box-shadow: var(--afrisurge-shadow-sm);
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
    overflow: hidden;
    position: relative;
}

.card:hover,
.afrisurge-card:hover {
    box-shadow: var(--afrisurge-shadow-lg);
    transform: translateY(-4px);
    border-color: var(--afrisurge-primary);
}

/* Premium Card Variant */
.card-premium {
    background: var(--afrisurge-gradient-hero);
    color: var(--afrisurge-white);
    border: none;
}

.card-premium .card-title {
    color: var(--afrisurge-white);
}

.card-premium:hover {
    transform: translateY(-8px);
    box-shadow: var(--afrisurge-shadow-2xl);
}

/* === ENHANCED UTILITY CLASSES === */

/* Enhanced Spacing */
.mb-afrisurge-xs { margin-bottom: var(--afrisurge-spacing-xs); }
.mb-afrisurge-sm { margin-bottom: var(--afrisurge-spacing-sm); }
.mb-afrisurge { margin-bottom: var(--afrisurge-spacing-lg); }
.mb-afrisurge-lg { margin-bottom: var(--afrisurge-spacing-xl); }
.mb-afrisurge-xl { margin-bottom: var(--afrisurge-spacing-2xl); }

.py-afrisurge-xs { padding: var(--afrisurge-spacing-xs) 0; }
.py-afrisurge-sm { padding: var(--afrisurge-spacing-sm) 0; }
.py-afrisurge { padding: var(--afrisurge-spacing-2xl) 0; }
.py-afrisurge-lg { padding: var(--afrisurge-spacing-3xl) 0; }

/* Enhanced Text Colors with Complete Logo Palette */
.text-afrisurge-primary { color: var(--afrisurge-primary) !important; }
.text-afrisurge-secondary { color: var(--afrisurge-secondary) !important; }
.text-afrisurge-accent { color: var(--afrisurge-accent) !important; }
.text-afrisurge-orange { color: var(--afrisurge-orange-primary) !important; }
.text-afrisurge-yellow { color: var(--afrisurge-yellow-primary) !important; }
.text-afrisurge-amber { color: var(--afrisurge-amber) !important; }
.text-afrisurge-success { color: var(--afrisurge-success) !important; }
.text-afrisurge-muted { color: var(--afrisurge-text-muted) !important; }

/* Enhanced Background Colors with Complete Logo Palette */
.bg-afrisurge-primary { 
    background-color: var(--afrisurge-primary) !important; 
    color: var(--afrisurge-white) !important;
}
.bg-afrisurge-secondary { 
    background-color: var(--afrisurge-secondary) !important; 
    color: var(--afrisurge-white) !important;
}
.bg-afrisurge-accent { 
    background-color: var(--afrisurge-accent) !important; 
    color: var(--afrisurge-white) !important;
}
.bg-afrisurge-orange { 
    background-color: var(--afrisurge-orange-primary) !important; 
    color: var(--afrisurge-white) !important;
}
.bg-afrisurge-yellow { 
    background-color: var(--afrisurge-yellow-primary) !important; 
    color: var(--afrisurge-dark) !important;
}
.bg-afrisurge-amber { 
    background-color: var(--afrisurge-amber) !important; 
    color: var(--afrisurge-white) !important;
}
.bg-afrisurge-light { 
    background-color: var(--afrisurge-bg-secondary) !important; 
}
.bg-afrisurge-gradient { 
    background: var(--afrisurge-gradient-hero) !important; 
    color: var(--afrisurge-white) !important;
}
.bg-afrisurge-gradient-warm { 
    background: var(--afrisurge-gradient-warm) !important; 
    color: var(--afrisurge-white) !important;
}
.bg-afrisurge-gradient-complete { 
    background: var(--afrisurge-gradient-complete) !important; 
    color: var(--afrisurge-white) !important;
}

/* === ENHANCED ACCESSIBILITY === */

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --afrisurge-primary: #000080;
        --afrisurge-secondary: #000000;
        --afrisurge-text-primary: #000000;
        --afrisurge-bg-primary: #FFFFFF;
        --afrisurge-border-light: #000000;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Enhanced Focus Styles */
*:focus-visible {
    outline: 3px solid var(--afrisurge-accent);
    outline-offset: 2px;
    border-radius: var(--afrisurge-radius-sm);
}

/* === ENHANCED MOBILE RESPONSIVENESS === */

@media (max-width: 768px) {
    :root {
        font-size: 14px;
    }
    
    h1, .h1 { font-size: 2rem; }
    h2, .h2 { font-size: 1.75rem; }
    h3, .h3 { font-size: 1.5rem; }
    
    .btn-afrisurge-primary,
    .btn-afrisurge-outline,
    .btn-afrisurge-secondary {
        padding: var(--afrisurge-spacing-sm) var(--afrisurge-spacing-lg);
        font-size: 0.875rem;
    }
    
    .py-afrisurge { padding: var(--afrisurge-spacing-xl) 0; }
    .py-afrisurge-lg { padding: var(--afrisurge-spacing-2xl) 0; }
}

/* === TEMPLATE INTEGRATION OVERRIDES === */

/* Sultin Template Color Overrides */
.theme-btn,
.theme-btn.style-one,
.theme-btn.style-two,
.theme-btn.style-three {
    background: var(--afrisurge-gradient-primary) !important;
    border-color: var(--afrisurge-primary) !important;
    color: var(--afrisurge-white) !important;
}

.theme-btn:hover {
    background: var(--afrisurge-gradient-secondary) !important;
    border-color: var(--afrisurge-secondary) !important;
    transform: translateY(-2px);
    box-shadow: var(--afrisurge-shadow-lg);
}

/* Service Card Enhancements */
.single-service-style1:hover,
.single-service-style2:hover {
    border-color: var(--afrisurge-primary) !important;
    box-shadow: var(--afrisurge-shadow-brand);
    transform: translateY(-8px);
}

.single-service-style1 .icon-holder,
.single-service-style2 .icon-holder {
    background: var(--afrisurge-gradient-primary) !important;
}

/* Navigation Enhancements */
.main-menu .navigation > li > a:hover,
.main-menu .navigation > li.current > a {
    color: var(--afrisurge-primary) !important;
}

/* Breadcrumb Enhancement */
.breadcrumb-area {
    background: var(--afrisurge-gradient-hero) !important;
}

/* Footer Enhancement */
.footer-area {
    background: var(--afrisurge-dark) !important;
}

.footer-area a:hover {
    color: var(--afrisurge-accent) !important;
}

/* Progress & Counter Enhancements */
.progress-block .dial,
.counter-block .count,
.fact-counter-style1 .count {
    color: var(--afrisurge-primary) !important;
}

/* === BRAND CONSISTENCY ENFORCEMENT === */

/* Ensure all primary colors use the brand palette */
.text-primary { color: var(--afrisurge-primary) !important; }
.bg-primary { background-color: var(--afrisurge-primary) !important; }
.border-primary { border-color: var(--afrisurge-primary) !important; }

/* Override any template conflicts */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background: var(--afrisurge-gradient-primary) !important;
    border-color: var(--afrisurge-primary) !important;
    color: var(--afrisurge-white) !important;
}

/* === ENHANCED PROFESSIONAL FEATURES === */

/* Professional Hover Effects */
.professional-hover {
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
}

.professional-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--afrisurge-shadow-lg);
}

/* Brand Gradient Text */
.text-gradient-brand {
    background: var(--afrisurge-gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Professional Borders */
.border-gradient-brand {
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box, var(--afrisurge-gradient-primary) border-box;
}

/* === SUCCESS MESSAGING === */
.brand-enhancement-complete {
    background: var(--afrisurge-gradient-success);
    color: var(--afrisurge-white);
    padding: var(--afrisurge-spacing-lg);
    border-radius: var(--afrisurge-radius-lg);
    text-align: center;
    font-weight: 600;
    box-shadow: var(--afrisurge-shadow-success);
}

/* === ENHANCED TEMPLATE INTEGRATION & COLOR REFINEMENTS === */

/* Fix any hardcoded template colors with our authentic brand system */
.main-slider .banner-carousel .slide .content .big-title h2 {
    color: var(--afrisurge-white) !important;
    text-shadow: 2px 2px 4px rgba(var(--afrisurge-primary-rgb), 0.3);
}

/* Enhanced service cards with warm accent integration */
.single-service-style1 .icon-holder {
    background: var(--afrisurge-gradient-primary) !important;
    border: 2px solid var(--afrisurge-primary) !important;
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
}

.single-service-style1:hover .icon-holder {
    background: var(--afrisurge-gradient-warm) !important;
    border-color: var(--afrisurge-orange-primary) !important;
    transform: scale(1.1) rotate(5deg);
    box-shadow: var(--afrisurge-shadow-brand);
}

.single-service-style1:hover .icon-holder span {
    color: var(--afrisurge-white) !important;
}

/* Enhanced service card titles with brand integration */
.single-service-style1:hover .title-holder h3 a {
    color: var(--afrisurge-primary) !important;
}

/* Progress circle enhancements with brand colors */
.progress-block .dial {
    color: var(--afrisurge-primary) !important;
}

.progress-block .inner-text {
    color: var(--afrisurge-primary) !important;
    font-weight: 700;
}

/* Video gallery button enhancement */
.video-gallery-style1 .icon a {
    background: var(--afrisurge-gradient-warm) !important;
    border: 3px solid var(--afrisurge-orange-primary) !important;
    box-shadow: 0 0 20px rgba(var(--afrisurge-orange-rgb), 0.4);
}

.video-gallery-style1 .icon a:hover {
    background: var(--afrisurge-gradient-complete) !important;
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(var(--afrisurge-orange-rgb), 0.6);
}

/* Enhanced fact counters with brand colors */
.fact-counter-box .single-fact-counter .count-text {
    color: var(--afrisurge-primary) !important;
    font-weight: 800;
}

/* Working process cards enhancement */
.working-process__single:hover .img-holder .inner {
    border: 3px solid var(--afrisurge-orange-primary);
    transform: scale(1.05);
}

.working-process__single .counting::before {
    background: var(--afrisurge-gradient-warm);
    color: var(--afrisurge-white);
    border: 3px solid var(--afrisurge-orange-primary);
    font-weight: 700;
}

/* Enhanced slogan area with brand gradient overlay */
.slogan-area .slogan-text-box h2 span {
    background: var(--afrisurge-gradient-warm);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

/* Experience box enhancement */
.parallax-scene .experience-box h2 {
    color: var(--afrisurge-orange-primary) !important;
    font-weight: 900;
    text-shadow: 2px 2px 4px rgba(var(--afrisurge-orange-rgb), 0.3);
}

/* Enhanced navigation hover states */
.main-menu .navigation > li > a:hover,
.main-menu .navigation > li.current > a {
    color: var(--afrisurge-orange-primary) !important;
}

/* Footer link enhancement */
.footer-area a:hover {
    color: var(--afrisurge-amber) !important;
}

/* Enhanced breadcrumb with complete brand gradient */
.breadcrumb-area {
    background: var(--afrisurge-gradient-complete) !important;
}

/* Office hours section brand integration */
.office-hours .office-icon i {
    color: var(--afrisurge-orange-primary) !important;
}

.office-hours .btn-primary {
    background: var(--afrisurge-gradient-warm) !important;
    border-color: var(--afrisurge-orange-primary) !important;
}

.office-hours .btn-primary:hover {
    background: var(--afrisurge-gradient-energy) !important;
    transform: translateY(-2px);
    box-shadow: var(--afrisurge-shadow-lg);
}

/* Enhanced accessibility and responsive refinements */
@media (max-width: 768px) {
    .single-service-style1:hover .icon-holder {
        transform: scale(1.05) rotate(2deg);
    }
    
    .main-slider .content .big-title h2 {
        font-size: 2.25rem;
        line-height: 1.2;
    }
    
    .working-process__single:hover .img-holder .inner {
        transform: scale(1.02);
    }
}

/* Enhanced focus states for accessibility */
.single-service-style1 a:focus,
.btn-one:focus,
.video-gallery-style1 .icon a:focus {
    outline: 3px solid var(--afrisurge-amber);
    outline-offset: 3px;
    border-radius: var(--afrisurge-radius-md);
}

/* === ENHANCED AFRISURGE PRELOADER WITH BRAND COLORS === */

/* Override template preloader with our complete brand color system */
.handle-preloader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--afrisurge-gradient-complete) !important;
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    z-index: 9999999;
    opacity: 1;
    transition: opacity 0.8s ease-out;
}

/* Enhanced preloader close button */
.preloader-close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    line-height: 38px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: var(--afrisurge-white);
    text-align: center;
    cursor: pointer;
    z-index: 99999999;
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
    backdrop-filter: blur(10px);
}

.preloader-close:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

/* Enhanced animation preloader container */
.handle-preloader .animation-preloader {
    position: absolute;
    z-index: 100;
    text-align: center;
}

/* Enhanced spinner with brand colors */
.handle-preloader .animation-preloader .spinner {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    margin: 0 auto 60px auto;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top: 4px solid var(--afrisurge-white);
    border-right: 4px solid var(--afrisurge-yellow-primary);
    border-bottom: 4px solid var(--afrisurge-orange-primary);
    border-left: 4px solid var(--afrisurge-amber);
    
    animation: afrisurgeSpinner 2s linear infinite;
    -webkit-animation: afrisurgeSpinner 2s linear infinite;
    -moz-animation: afrisurgeSpinner 2s linear infinite;
    
    position: relative;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}

/* Enhanced spinner inner glow effect */
.handle-preloader .animation-preloader .spinner::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top: 2px solid rgba(255, 255, 255, 0.6);
    border-right: 2px solid rgba(var(--afrisurge-yellow-rgb), 0.6);
    animation: afrisurgeSpinnerInner 1.5s linear infinite reverse;
    -webkit-animation: afrisurgeSpinnerInner 1.5s linear infinite reverse;
}

/* Enhanced loading text container */
.handle-preloader .animation-preloader .txt-loading {
    text-align: center;
    user-select: none;
    position: relative;
}

/* Enhanced loading letters with brand colors */
.handle-preloader .animation-preloader .txt-loading .letters-loading {
    position: relative;
    display: inline-block;
    color: var(--afrisurge-white);
    font-size: 80px;
    line-height: 80px;
    font-weight: 800;
    letter-spacing: 8px;
    text-transform: uppercase;
    font-family: var(--thm-font);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    margin: 0 2px;
}

/* Enhanced letter animations with warm brand colors */
.handle-preloader .animation-preloader .txt-loading .letters-loading:before {
    position: absolute;
    top: 0;
    left: 0;
    animation: afrisurgeLetters 3s infinite;
    content: attr(data-text-preloader);
    color: var(--afrisurge-white);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8),
                 0 0 40px rgba(var(--afrisurge-orange-rgb), 0.6),
                 0 0 60px rgba(var(--afrisurge-yellow-rgb), 0.4);
    opacity: 0;
    transform: rotateY(-90deg);
}

/* Staggered animation delays for each letter */
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(1):before {
    animation-delay: 0.1s;
}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before {
    animation-delay: 0.2s;
}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before {
    animation-delay: 0.3s;
}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before {
    animation-delay: 0.4s;
}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before {
    animation-delay: 0.5s;
}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before {
    animation-delay: 0.6s;
}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before {
    animation-delay: 0.7s;
}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before {
    animation-delay: 0.8s;
}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(9):before {
    animation-delay: 0.9s;
}

/* Enhanced fade-out when loaded */
.preloader .loaded .animation-preloader {
    opacity: 0;
    transition: opacity 0.6s ease-out;
    transform: scale(0.8);
}

.handle-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-out, visibility 0s linear 0.8s;
}

/* Enhanced brand color keyframe animations */
@keyframes afrisurgeSpinner {
    0% {
        transform: rotateZ(0deg);
        filter: hue-rotate(0deg);
    }
    25% {
        filter: hue-rotate(90deg);
    }
    50% {
        filter: hue-rotate(180deg);
    }
    75% {
        filter: hue-rotate(270deg);
    }
    100% {
        transform: rotateZ(360deg);
        filter: hue-rotate(360deg);
    }
}

@keyframes afrisurgeSpinnerInner {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(-360deg);
    }
}

@keyframes afrisurgeLetters {
    0%, 75%, 100% {
        opacity: 0;
        transform: rotateY(-90deg);
    }
    25%, 50% {
        opacity: 1;
        transform: rotateY(0deg);
    }
}

/* Enhanced mobile responsiveness for preloader */
@media screen and (max-width: 768px) {
    .handle-preloader .animation-preloader .spinner {
        width: 120px;
        height: 120px;
        margin-bottom: 40px;
    }
    
    .handle-preloader .animation-preloader .txt-loading .letters-loading {
        font-size: 48px;
        line-height: 48px;
        letter-spacing: 4px;
    }
}

@media screen and (max-width: 480px) {
    .handle-preloader .animation-preloader .spinner {
        width: 100px;
        height: 100px;
        margin-bottom: 30px;
    }
    
    .handle-preloader .animation-preloader .txt-loading .letters-loading {
        font-size: 36px;
        line-height: 36px;
        letter-spacing: 3px;
    }
}

/* Enhanced preloader with logo integration option */
.handle-preloader .animation-preloader::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-image: url('../images/logo-white.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8;
    z-index: -1;
    animation: pulse 2s infinite;
}

/* === SESSION 18 ENHANCED COLOR REFINEMENTS === */

/* Fix any remaining template color overrides for complete brand consistency */
.single-service-style1 .icon-holder {
    background: var(--afrisurge-gradient-primary) !important;
    border: 2px solid var(--afrisurge-primary) !important;
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
}

.single-service-style1:hover .icon-holder {
    background: var(--afrisurge-gradient-warm) !important;
    border-color: var(--afrisurge-orange-primary) !important;
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 32px rgba(var(--afrisurge-orange-rgb), 0.3);
}

/* Enhanced button system with better brand integration */
.btn-one,
.theme-btn {
    background: var(--afrisurge-gradient-primary) !important;
    border: 2px solid var(--afrisurge-primary) !important;
    color: var(--afrisurge-white) !important;
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
    border-radius: var(--afrisurge-radius-md);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.025em;
}

.btn-one:hover,
.theme-btn:hover {
    background: var(--afrisurge-gradient-warm) !important;
    border-color: var(--afrisurge-orange-primary) !important;
    color: var(--afrisurge-white) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(var(--afrisurge-orange-rgb), 0.4);
}

/* Enhanced dial progress circles */
.progress-block .dial,
.progress-block .inner-text {
    color: var(--afrisurge-primary) !important;
    font-weight: 700;
}

/* Enhanced navigation with brand colors */
.main-menu .navigation > li > a:hover,
.main-menu .navigation > li.current > a {
    color: var(--afrisurge-orange-primary) !important;
}

.main-menu .navigation > li > a:focus {
    outline: 2px solid var(--afrisurge-amber);
    outline-offset: 2px;
    border-radius: var(--afrisurge-radius-sm);
}

/* Enhanced section title borders */
.sec-title .sub-title .border-box {
    background: var(--afrisurge-gradient-warm) !important;
}

/* Enhanced working process counting numbers */
.working-process__single .counting::before {
    background: var(--afrisurge-gradient-warm) !important;
    color: var(--afrisurge-white) !important;
    border: 3px solid var(--afrisurge-orange-primary) !important;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(var(--afrisurge-orange-rgb), 0.3);
}

.working-process__single:hover .img-holder .inner {
    border: 3px solid var(--afrisurge-orange-primary) !important;
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(var(--afrisurge-orange-rgb), 0.2);
}

/* Enhanced video gallery button */
.video-gallery-style1 .icon a {
    background: var(--afrisurge-gradient-warm) !important;
    border: 3px solid var(--afrisurge-orange-primary) !important;
    box-shadow: 0 0 20px rgba(var(--afrisurge-orange-rgb), 0.4);
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
}

.video-gallery-style1 .icon a:hover {
    background: var(--afrisurge-gradient-complete) !important;
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(var(--afrisurge-orange-rgb), 0.6);
}

/* Enhanced fact counters */
.fact-counter-box .single-fact-counter .count-text {
    color: var(--afrisurge-primary) !important;
    font-weight: 800;
}

/* Enhanced footer links */
.footer-area a:hover {
    color: var(--afrisurge-amber) !important;
    transition: color var(--afrisurge-transition-normal) var(--afrisurge-easing);
}

/* Enhanced slogan area text gradient */
.slogan-area .slogan-text-box h2 span {
    background: var(--afrisurge-gradient-warm) !important;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

/* Enhanced experience box */
.parallax-scene .experience-box h2 {
    color: var(--afrisurge-orange-primary) !important;
    font-weight: 900;
    text-shadow: 2px 2px 4px rgba(var(--afrisurge-orange-rgb), 0.3);
}

/* Enhanced breadcrumb areas */
.breadcrumb-area,
.page-header {
    background: var(--afrisurge-gradient-complete) !important;
}

/* Enhanced accessibility with brand colors */
*:focus-visible {
    outline: 3px solid var(--afrisurge-amber) !important;
    outline-offset: 2px;
    border-radius: var(--afrisurge-radius-sm);
}

/* Enhanced mobile optimizations */
@media (max-width: 768px) {
    .single-service-style1:hover .icon-holder {
        transform: scale(1.05) rotate(2deg);
    }
    
    .working-process__single:hover .img-holder .inner {
        transform: scale(1.02);
    }
    
    .btn-one,
    .theme-btn {
        padding: var(--afrisurge-spacing-sm) var(--afrisurge-spacing-lg);
        font-size: 0.875rem;
    }
}

/* === SESSION 19 ENHANCED COLOR PERFECTION === */

/* Advanced template color override system for perfect brand consistency */
.main-slider .banner-carousel .slide .content .big-title h2,
.main-slider .slide .content .big-title h2 {
    color: var(--afrisurge-white) !important;
    text-shadow: 2px 2px 6px rgba(var(--afrisurge-primary-rgb), 0.6);
    font-weight: 800;
}

/* Enhanced service card system with complete brand integration */
.single-service-style1 .icon-holder {
    background: var(--afrisurge-gradient-primary) !important;
    border: 3px solid var(--afrisurge-primary) !important;
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
    position: relative;
    overflow: hidden;
}

/* === CRITICAL CONTRAST FIX - SESSION 22 === */
/* Fix the contrast issue in service cards where link hover creates poor visibility */
.single-service-style1 .title-holder h3 a:hover {
    color: var(--afrisurge-white) !important; /* Keep white text on link hover for good contrast */
    text-decoration: none;
    transform: scale(1.02);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Ensure proper contrast in all hover states */
.single-service-style1:hover .title-holder h3 a {
    color: var(--afrisurge-white) !important; /* White text on card hover */
}

.single-service-style1:hover .title-holder h3 a:hover {
    color: var(--afrisurge-white) !important; /* Keep white on link hover within card hover */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

/* Enhanced hover state for better visibility */
.single-service-style1:hover .title-holder h3 a:focus {
    color: var(--afrisurge-white) !important;
    outline: 2px solid var(--afrisurge-white);
    outline-offset: 2px;
}

.single-service-style1 .icon-holder::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--afrisurge-gradient-warm);
    transition: left 0.3s ease;
    z-index: 1;
}

.single-service-style1:hover .icon-holder::before {
    left: 0;
}

.single-service-style1:hover .icon-holder {
    border-color: var(--afrisurge-orange-primary) !important;
    transform: scale(1.05) rotate(3deg);
    box-shadow: 0 12px 36px rgba(var(--afrisurge-orange-rgb), 0.4);
}

.single-service-style1 .icon-holder span {
    position: relative;
    z-index: 2;
    color: var(--afrisurge-white) !important;
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
}

.single-service-style1:hover .icon-holder span {
    color: var(--afrisurge-white) !important;
    transform: scale(1.1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Enhanced service card title interactions */
.single-service-style1:hover .title-holder h3 a {
    color: var(--afrisurge-primary) !important;
    text-decoration: none;
}

.single-service-style1 .title-holder h3 a {
    transition: color var(--afrisurge-transition-normal) var(--afrisurge-easing);
}

/* Enhanced progress circles with dynamic color integration */
.progress-block .dial {
    color: var(--afrisurge-primary) !important;
    font-weight: 800 !important;
    text-shadow: 1px 1px 2px rgba(var(--afrisurge-primary-rgb), 0.3);
}

.progress-block .inner-text {
    color: var(--afrisurge-primary) !important;
    font-weight: 800;
}

.progress-block:hover .dial {
    color: var(--afrisurge-orange-primary) !important;
    transition: color var(--afrisurge-transition-normal) var(--afrisurge-easing);
}

/* Enhanced video gallery with complete brand system */
.video-gallery-style1 .icon a {
    background: var(--afrisurge-gradient-warm) !important;
    border: 4px solid var(--afrisurge-orange-primary) !important;
    box-shadow: 0 0 25px rgba(var(--afrisurge-orange-rgb), 0.5);
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
    position: relative;
    overflow: hidden;
}

.video-gallery-style1 .icon a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    transition: all 0.3s ease;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.video-gallery-style1 .icon a:hover::before {
    width: 120%;
    height: 120%;
}

.video-gallery-style1 .icon a:hover {
    background: var(--afrisurge-gradient-complete) !important;
    transform: scale(1.15);
    box-shadow: 0 0 40px rgba(var(--afrisurge-orange-rgb), 0.7);
    border-color: var(--afrisurge-amber) !important;
}

/* Enhanced fact counters with brand color animation */
.fact-counter-box .single-fact-counter .count-text {
    color: var(--afrisurge-primary) !important;
    font-weight: 900;
    transition: color var(--afrisurge-transition-normal) var(--afrisurge-easing);
}

.fact-counter-box .single-fact-counter:hover .count-text {
    color: var(--afrisurge-orange-primary) !important;
    transform: scale(1.05);
}

/* Enhanced working process cards with orange accent system */
.working-process__single .counting::before {
    background: var(--afrisurge-gradient-warm) !important;
    color: var(--afrisurge-white) !important;
    border: 4px solid var(--afrisurge-orange-primary) !important;
    font-weight: 800;
    box-shadow: 0 6px 20px rgba(var(--afrisurge-orange-rgb), 0.4);
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
}

.working-process__single:hover .counting::before {
    background: var(--afrisurge-gradient-energy) !important;
    border-color: var(--afrisurge-amber) !important;
    transform: scale(1.1);
    box-shadow: 0 8px 28px rgba(var(--afrisurge-orange-rgb), 0.6);
}

.working-process__single:hover .img-holder .inner {
    border: 4px solid var(--afrisurge-orange-primary) !important;
    transform: scale(1.08);
    box-shadow: 0 12px 32px rgba(var(--afrisurge-orange-rgb), 0.3);
    border-radius: var(--afrisurge-radius-lg);
}

/* Enhanced navigation system with warm accent integration */
.main-menu .navigation > li > a:hover,
.main-menu .navigation > li.current > a {
    color: var(--afrisurge-orange-primary) !important;
    text-shadow: 1px 1px 2px rgba(var(--afrisurge-orange-rgb), 0.3);
}

.main-menu .navigation > li > a {
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
}

.main-menu .navigation > li:hover {
    transform: translateY(-1px);
}

/* Enhanced section title borders with gradient integration */
.sec-title .sub-title .border-box {
    background: var(--afrisurge-gradient-warm) !important;
    height: 4px;
    border-radius: var(--afrisurge-radius-sm);
    box-shadow: 0 2px 8px rgba(var(--afrisurge-orange-rgb), 0.3);
}

/* Enhanced button system with advanced hover states */
.btn-one,
.theme-btn,
.btn-primary {
    background: var(--afrisurge-gradient-primary) !important;
    border: 3px solid var(--afrisurge-primary) !important;
    color: var(--afrisurge-white) !important;
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
    border-radius: var(--afrisurge-radius-md);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.025em;
    position: relative;
    overflow: hidden;
}

.btn-one::before,
.theme-btn::before,
.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--afrisurge-gradient-warm);
    transition: left 0.3s ease;
    z-index: 1;
}

.btn-one:hover::before,
.theme-btn:hover::before,
.btn-primary:hover::before {
    left: 0;
}

.btn-one .txt,
.theme-btn .txt,
.btn-primary .txt {
    position: relative;
    z-index: 2;
}

.btn-one:hover,
.theme-btn:hover,
.btn-primary:hover {
    border-color: var(--afrisurge-orange-primary) !important;
    color: var(--afrisurge-white) !important;
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(var(--afrisurge-orange-rgb), 0.4);
}

/* Enhanced footer system with warm accent links */
.footer-area a {
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
}

.footer-area a:hover {
    color: var(--afrisurge-amber) !important;
    text-shadow: 1px 1px 2px rgba(var(--afrisurge-amber-rgb), 0.3);
    transform: translateX(2px);
}

/* Enhanced breadcrumb system with complete gradient */
.breadcrumb-area,
.page-header {
    background: var(--afrisurge-gradient-complete) !important;
    position: relative;
    overflow: hidden;
}

.breadcrumb-area::before,
.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--afrisurge-primary-rgb), 0.1);
    backdrop-filter: blur(1px);
}

/* Enhanced slogan area text effects with dynamic gradients */
.slogan-area .slogan-text-box h2 span {
    background: var(--afrisurge-gradient-warm) !important;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    position: relative;
}

.slogan-area .slogan-text-box h2 span::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--afrisurge-gradient-warm);
    border-radius: var(--afrisurge-radius-sm);
}

/* Enhanced experience box with pulsing animation */
.parallax-scene .experience-box h2 {
    color: var(--afrisurge-orange-primary) !important;
    font-weight: 900;
    text-shadow: 3px 3px 6px rgba(var(--afrisurge-orange-rgb), 0.4);
    animation: experiencePulse 3s ease-in-out infinite;
}

@keyframes experiencePulse {
    0%, 100% {
        transform: scale(1);
        text-shadow: 3px 3px 6px rgba(var(--afrisurge-orange-rgb), 0.4);
    }
    50% {
        transform: scale(1.02);
        text-shadow: 4px 4px 8px rgba(var(--afrisurge-orange-rgb), 0.6);
    }
}

/* Enhanced accessibility with brand color focus states */
*:focus-visible {
    outline: 4px solid var(--afrisurge-amber) !important;
    outline-offset: 3px;
    border-radius: var(--afrisurge-radius-md);
    box-shadow: 0 0 0 2px var(--afrisurge-white), 0 0 0 6px var(--afrisurge-amber);
}

/* Enhanced mobile optimizations */
@media (max-width: 768px) {
    .single-service-style1:hover .icon-holder {
        transform: scale(1.02) rotate(1deg);
    }
    
    .working-process__single:hover .img-holder .inner {
        transform: scale(1.03);
    }
    
    .video-gallery-style1 .icon a:hover {
        transform: scale(1.08);
    }
    
    .btn-one,
    .theme-btn,
    .btn-primary {
        padding: var(--afrisurge-spacing-sm) var(--afrisurge-spacing-lg);
        font-size: 0.875rem;
    }
    
    .main-menu .navigation > li:hover {
        transform: none;
    }
}

/* Enhanced print styles with brand colors */
@media print {
    * {
        color: var(--afrisurge-dark) !important;
        background: var(--afrisurge-white) !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
        color: var(--afrisurge-primary) !important;
    }
}

/* === SESSION 22 & 23 CRITICAL CONTRAST FIXES === */

/* CRITICAL FIX: "What We Do" Section Text Visibility */
.service-style1__title {
    position: relative;
    display: block;
    padding-top: 100px;
    padding-right: 60px;
    padding-bottom: 100px;
    margin-right: -30px;
    z-index: 1;
}

.service-style1__title:before {
    content: "";
    position: absolute;
    top: 0;
    left: -1000000px;
    bottom: 0;
    right: 0;
    background: var(--afrisurge-dark) !important; /* Dark brand background for contrast */
    z-index: -1;
}

/* Fix main section title text visibility */
.service-style1__title .sec-title--style2 .sub-title h3 {
    color: var(--afrisurge-white) !important;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.service-style1__title .sec-title--style2 h2 {
    color: var(--afrisurge-white) !important;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.service-style1__title .inner-text p {
    color: var(--afrisurge-white) !important;
    opacity: 0.95;
    line-height: 1.6;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Fix video gallery text visibility */
.video-gallery-title h3 {
    color: var(--afrisurge-white) !important;
    font-size: 20px;
    line-height: 22px;
    font-weight: 600;
    margin: 0 0 4px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.video-gallery-title a {
    color: var(--afrisurge-amber) !important;
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
}

.video-gallery-title a:hover {
    color: var(--afrisurge-yellow-primary) !important;
    text-decoration: none;
}

/* Fix orange accent line above "What we do" */
.service-style1__title .sec-title--style2 .sub-title .border-box {
    background: var(--afrisurge-orange-primary) !important;
    height: 4px;
    width: 60px;
    border-radius: var(--afrisurge-radius-sm);
    box-shadow: 0 2px 8px rgba(var(--afrisurge-orange-rgb), 0.4);
}

/* Service card contrast fixes */
.single-service-style1 .title-holder h3 a {
    color: var(--afrisurge-dark) !important; /* Ensure dark text on light background */
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
}

/* Template override: Ensure consistent hover behavior */
.single-service-style1:hover .title-holder h3 a,
.single-service-style1:hover .title-holder h3 a:hover,
.single-service-style1:hover .title-holder h3 a:focus {
    color: var(--afrisurge-white) !important; /* Always white on hover states */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

/* Critical accessibility fix: Ensure focus states are visible */
.single-service-style1 a:focus,
.single-service-style1 .title-holder h3 a:focus {
    outline: 3px solid var(--afrisurge-amber) !important;
    outline-offset: 2px;
    border-radius: var(--afrisurge-radius-sm);
}

/* Additional contrast protection for all service elements */
.service-style1-area .single-service-style1 * {
    /* Ensure no text inherits poor contrast colors */
    text-shadow: none;
}

.service-style1-area .single-service-style1:hover * {
    /* Add text shadow on hover for better readability */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Fix any hardcoded template colors that might cause contrast issues */
.single-service-style1:before {
    background: var(--afrisurge-bg-secondary) !important; /* Light brand background */
}

.single-service-style1:after {
    background: var(--afrisurge-primary) !important; /* Primary brand color */
}

/* Enhanced mobile responsiveness for contrast fixes */
@media (max-width: 768px) {
    .service-style1__title .sec-title--style2 h2 {
        font-size: 28px;
        line-height: 1.2;
    }
    
    .service-style1__title .inner-text p {
        font-size: 14px;
        line-height: 1.5;
    }
    
    .video-gallery-title h3 {
        font-size: 18px;
    }
}

/* === SESSION 23 FOOTER FIXES === */

/* Fix footer logo sizing and visibility */
.footer-logo-style1 img {
    max-width: 150px;
    height: auto;
    filter: brightness(1.1) contrast(1.1);
}

/* Fix footer contact information text visibility */
.footer-area .single-footer-widget .contact-info .contact-item .text {
    color: var(--afrisurge-gray-300) !important;
}

.footer-area .single-footer-widget .contact-info .contact-item .text p {
    color: var(--afrisurge-gray-300) !important;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

.footer-area .single-footer-widget .contact-info .contact-item .text a {
    color: var(--afrisurge-white) !important;
    font-weight: 500;
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
}

.footer-area .single-footer-widget .contact-info .contact-item .text a:hover {
    color: var(--afrisurge-amber) !important;
    text-decoration: none;
}

/* Fix footer contact icons */
.footer-area .single-footer-widget .contact-info .contact-item .icon {
    color: var(--afrisurge-orange-primary) !important;
}

.footer-area .single-footer-widget .contact-info .contact-item .icon i {
    color: var(--afrisurge-orange-primary) !important;
    font-size: 18px;
}

/* Enhanced footer company info text */
.footer-area .single-footer-widget--company-info .our-company-info .text-box p {
    color: var(--afrisurge-gray-300) !important;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Enhanced footer phone and email links */
.footer-area .single-footer-widget--company-info .our-company-info h2 a {
    color: var(--afrisurge-white) !important;
    font-weight: 700;
    font-size: 24px;
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
}

.footer-area .single-footer-widget--company-info .our-company-info h2 a:hover {
    color: var(--afrisurge-orange-primary) !important;
}

.footer-area .single-footer-widget--company-info .our-company-info h3 a {
    color: var(--afrisurge-amber) !important;
    font-weight: 500;
    font-size: 18px;
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
}

.footer-area .single-footer-widget--company-info .our-company-info h3 a:hover {
    color: var(--afrisurge-yellow-primary) !important;
}

/* Enhanced footer section titles */
.footer-area .single-footer-widget .title h3 {
    color: var(--afrisurge-white) !important;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 25px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Enhanced footer service links */
.footer-area .single-footer-widget .footer-widget-links ul li a {
    color: var(--afrisurge-gray-300) !important;
    font-size: 15px;
    line-height: 1.8;
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
}

.footer-area .single-footer-widget .footer-widget-links ul li a:hover {
    color: var(--afrisurge-white) !important;
    padding-left: 5px;
}

/* Enhanced footer social links */
.footer-area .footer-social-link ul li a {
    background: var(--afrisurge-gray-700) !important;
    color: var(--afrisurge-white) !important;
    border: 2px solid var(--afrisurge-gray-600) !important;
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
}

.footer-area .footer-social-link ul li a:hover {
    background: var(--afrisurge-orange-primary) !important;
    border-color: var(--afrisurge-orange-primary) !important;
    color: var(--afrisurge-white) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--afrisurge-orange-rgb), 0.3);
}

/* Enhanced footer bottom area */
.footer-bottom {
    background: var(--afrisurge-gray-900) !important;
    border-top: 1px solid var(--afrisurge-gray-700) !important;
}

.footer-bottom .copyright p {
    color: var(--afrisurge-gray-400) !important;
    font-size: 14px;
}

.footer-bottom .copyright p a {
    color: var(--afrisurge-amber) !important;
    font-weight: 600;
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
}

.footer-bottom .copyright p a:hover {
    color: var(--afrisurge-yellow-primary) !important;
}

/* Enhanced mobile responsiveness for footer */
@media (max-width: 768px) {
    .footer-area .single-footer-widget--company-info .our-company-info h2 a {
        font-size: 20px;
    }
    
    .footer-area .single-footer-widget--company-info .our-company-info h3 a {
        font-size: 16px;
    }
    
    .footer-logo-style1 img {
        max-width: 120px;
    }
    
    .footer-area .single-footer-widget .contact-info .contact-item .text p {
        font-size: 14px;
    }
}

/* === SESSION 23 HEADER LOGO VISIBILITY ENHANCEMENT === */

/* Main header logo visibility improvements */
.main-header .main-logo-box img {
    max-height: 60px;
    filter: brightness(1.2) contrast(1.1);
    background: rgba(255, 255, 255, 0.95);
    padding: 8px 16px;
    border-radius: var(--afrisurge-radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
}

.main-header .main-logo-box img:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

/* Sticky header logo visibility improvements */
.sticky-header .logo img {
    max-height: 50px;
    filter: brightness(1.2) contrast(1.1);
    background: rgba(255, 255, 255, 0.95);
    padding: 6px 12px;
    border-radius: var(--afrisurge-radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
}

.sticky-header .logo img:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Mobile menu logo visibility improvements */
.mobile-menu .nav-logo img {
    max-height: 45px;
    filter: brightness(1.1) contrast(1.05);
    background: rgba(255, 255, 255, 0.95);
    padding: 6px 12px;
    border-radius: var(--afrisurge-radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Enhanced logo container styling */
.main-header .main-logo-box {
    position: relative;
    z-index: 2;
}

.main-header .main-logo-box a {
    display: inline-block;
    position: relative;
}

/* Alternative approach - subtle glow effect for logo */
.main-header .main-logo-box a::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: linear-gradient(135deg, 
        rgba(var(--afrisurge-orange-rgb), 0.1), 
        rgba(var(--afrisurge-yellow-rgb), 0.1));
    border-radius: var(--afrisurge-radius-lg);
    z-index: -1;
    opacity: 0;
    transition: opacity var(--afrisurge-transition-normal) var(--afrisurge-easing);
}

.main-header .main-logo-box a:hover::before {
    opacity: 1;
}

/* Ensure proper spacing around logo */
.main-header .main-logo-box {
    margin-right: 30px;
}

/* Enhanced mobile responsiveness for logo */
@media (max-width: 768px) {
    .main-header .main-logo-box img {
        max-height: 50px;
        padding: 6px 12px;
    }
    
    .sticky-header .logo img {
        max-height: 45px;
        padding: 5px 10px;
    }
    
    .main-header .main-logo-box {
        margin-right: 15px;
    }
}

@media (max-width: 480px) {
    .main-header .main-logo-box img {
        max-height: 45px;
        padding: 5px 10px;
    }
    
    .sticky-header .logo img {
        max-height: 40px;
        padding: 4px 8px;
    }
}

/* Focus states for accessibility */
.main-header .main-logo-box a:focus,
.sticky-header .logo a:focus,
.mobile-menu .nav-logo a:focus {
    outline: 3px solid var(--afrisurge-amber);
    outline-offset: 2px;
    border-radius: var(--afrisurge-radius-md);
}

/* === SESSION 24 SINGLE SERVICE PAGE CTA BUTTON CONTRAST FIX === */

/* CRITICAL FIX: Service Detail Page CTA Button Contrast */
.service-cta-section .cta-buttons .btn-outline-primary {
    background: rgba(255, 255, 255, 0.95) !important; /* Semi-transparent white background */
    color: var(--afrisurge-primary) !important; /* Primary color text */
    border: 3px solid rgba(255, 255, 255, 0.95) !important; /* White border */
    font-weight: 600;
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
    backdrop-filter: blur(10px); /* Add blur effect for modern look */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.service-cta-section .cta-buttons .btn-outline-primary:hover {
    background: var(--afrisurge-white) !important; /* Full white on hover */
    color: var(--afrisurge-dark) !important; /* Dark text for maximum contrast */
    border-color: var(--afrisurge-white) !important; /* White border */
    transform: translateY(-2px); /* Lift effect */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
    text-shadow: none !important; /* Remove any text shadow */
}

.service-cta-section .cta-buttons .btn-outline-primary:focus {
    background: var(--afrisurge-white) !important;
    color: var(--afrisurge-dark) !important; /* Dark text for contrast */
    border-color: var(--afrisurge-white) !important;
    outline: 3px solid var(--afrisurge-amber) !important;
    outline-offset: 2px;
    text-shadow: none !important;
}

/* Enhanced primary button in CTA section for consistency */
.service-cta-section .cta-buttons .btn-primary {
    background: var(--afrisurge-white) !important;
    color: var(--afrisurge-dark) !important; /* Dark text for contrast */
    border: 3px solid var(--afrisurge-white) !important;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
    text-shadow: none !important;
}

.service-cta-section .cta-buttons .btn-primary:hover {
    background: var(--afrisurge-gradient-warm) !important; /* Orange gradient on hover */
    color: var(--afrisurge-white) !important; /* White text on dark background */
    border-color: var(--afrisurge-orange-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--afrisurge-orange-rgb), 0.3);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) !important; /* Add shadow for readability */
}

.service-cta-section .cta-buttons .btn-primary:focus {
    background: var(--afrisurge-white) !important;
    color: var(--afrisurge-primary) !important;
    outline: 3px solid var(--afrisurge-amber) !important;
    outline-offset: 2px;
}

/* Mobile responsiveness for CTA buttons */
@media (max-width: 768px) {
    .service-cta-section .cta-buttons .btn {
        display: block !important;
        width: 100% !important;
        margin: 10px 0 !important;
        padding: 15px 20px !important;
        font-size: 16px !important;
    }
    
    .service-cta-section .cta-buttons .btn.me-3 {
        margin-right: 0 !important;
    }
}

/* Enhanced text contrast for CTA section */
.service-cta-section .cta-content h3 {
    color: var(--afrisurge-white) !important;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.service-cta-section .cta-content p {
    color: var(--afrisurge-white) !important;
    font-size: 18px;
    margin-bottom: 30px;
    opacity: 0.95;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* === SESSION 23 "MORE SERVICES" BUTTON STYLING === */

/* More Services button in What We Do section */
.more-services-btn {
    margin-top: 40px;
    padding: 20px 0;
}

.more-services-btn .btn-one {
    background: var(--afrisurge-gradient-warm) !important;
    border: 3px solid var(--afrisurge-orange-primary) !important;
    color: var(--afrisurge-white) !important;
    padding: 15px 35px;
    font-weight: 600;
    font-size: 16px;
    border-radius: var(--afrisurge-radius-lg);
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
    box-shadow: 0 4px 15px rgba(var(--afrisurge-orange-rgb), 0.3);
    position: relative;
    overflow: hidden;
}

.more-services-btn .btn-one::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--afrisurge-gradient-complete);
    transition: left 0.3s ease;
    z-index: 1;
}

.more-services-btn .btn-one:hover::before {
    left: 0;
}

.more-services-btn .btn-one .txt {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.more-services-btn .btn-one:hover {
    border-color: var(--afrisurge-amber) !important;
    color: var(--afrisurge-white) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(var(--afrisurge-orange-rgb), 0.5);
}

/* Arrow icon for More Services button */
.more-services-btn .btn-one .txt::after {
    content: "\f061"; /* Font Awesome arrow-right */
    font-family: "Font Awesome 5 Free", "FontAwesome", "icomoon" !important;
    font-weight: 900;
    font-size: 14px;
    margin-left: 8px;
    transition: transform var(--afrisurge-transition-normal) var(--afrisurge-easing);
}

.more-services-btn .btn-one:hover .txt::after {
    transform: translateX(5px);
}

/* Enhanced service cards layout for 4 cards */
.service-style1__content .row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 0;
}

.service-style1__content .row .col-xl-6:nth-child(-n+4) {
    margin-bottom: 30px;
}

/* Mobile responsiveness for More Services button */
@media (max-width: 768px) {
    .more-services-btn .btn-one {
        padding: 12px 25px;
        font-size: 14px;
        width: 100%;
        max-width: 280px;
    }
    
    .more-services-btn {
        margin-top: 30px;
        padding: 15px 0;
    }
}

@media (max-width: 480px) {
    .more-services-btn .btn-one {
        padding: 10px 20px;
        font-size: 13px;
    }
}

/* Focus state for accessibility */
.more-services-btn .btn-one:focus {
    outline: 3px solid var(--afrisurge-amber);
    outline-offset: 3px;
    border-radius: var(--afrisurge-radius-lg);
}

/* === END SESSION 23 MORE SERVICES BUTTON === */

/* Fix missing icons by providing Font Awesome fallbacks */
.icon-refresh:before {
    content: "\f021"; /* Font Awesome sync-alt */
    font-family: "Font Awesome 5 Free", "FontAwesome", "icomoon" !important;
    font-weight: 900;
}

.icon-development:before {
    content: "\f085"; /* Font Awesome cogs */
    font-family: "Font Awesome 5 Free", "FontAwesome", "icomoon" !important;
    font-weight: 900;
}

.icon-customer-service:before {
    content: "\f590"; /* Font Awesome headset */
    font-family: "Font Awesome 5 Free", "FontAwesome", "icomoon" !important;
    font-weight: 900;
}

.icon-verification:before {
    content: "\f0a3"; /* Font Awesome certificate */
    font-family: "Font Awesome 5 Free", "FontAwesome", "icomoon" !important;
    font-weight: 900;
}

.icon-clock:before {
    content: "\f017"; /* Font Awesome clock */
    font-family: "Font Awesome 5 Free", "FontAwesome", "icomoon" !important;
    font-weight: 900;
}

.icon-close:before {
    content: "\f00d"; /* Font Awesome times */
    font-family: "Font Awesome 5 Free", "FontAwesome", "icomoon" !important;
    font-weight: 900;
}

/* Alternative fallback for older Font Awesome versions */
.icon-refresh:before {
    content: "\f01e"; /* Font Awesome refresh (fallback) */
}

/* Enhanced icon visibility and styling */
[class^="icon-"]:before,
[class*=" icon-"]:before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ensure proper icon sizing in service cards */
.single-service-style1 .icon-holder span:before {
    font-size: 48px;
    line-height: 1;
    color: inherit;
}

/* Enhanced icon spacing and alignment */
.icon-holder span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Button icon alignment fixes */
.btn-one .icon-refresh,
.theme-btn .icon-refresh {
    margin-left: 8px;
    font-size: 14px;
}

/* Office hours icon styling */
.office-hours .icon-clock {
    font-size: 32px;
    display: inline-block;
}

/* Search and close icon improvements */
.icon-close,
.icon-magnifying-glass {
    cursor: pointer;
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing);
}

.icon-close:hover,
.icon-magnifying-glass:hover {
    color: var(--afrisurge-orange-primary) !important;
    transform: scale(1.1);
}

/* === SESSION 21 ICON AUDIT SUCCESS === */
.icon-fixes-complete {
    background: var(--afrisurge-gradient-success);
    color: var(--afrisurge-white);
    padding: var(--afrisurge-spacing-md);
    border-radius: var(--afrisurge-radius-md);
    text-align: center;
    font-weight: 600;
    box-shadow: var(--afrisurge-shadow-success);
}

/* Mobile icon optimizations */
@media (max-width: 768px) {
    .single-service-style1 .icon-holder span:before {
        font-size: 36px;
    }
    
    .office-hours .icon-clock {
        font-size: 24px;
    }
    
    .btn-one .icon-refresh,
    .theme-btn .icon-refresh {
        font-size: 12px;
        margin-left: 6px;
    }
}