/* ==========================================================================
   SERVICES.CSS - COMPLETE DESIGN SYSTEM
   Version: 1.2 (Conflict Resolved)
   Compatible: IE11+, Modern Browsers
   Breakpoints: 520px, 820px
   ========================================================================== */

/* ===== CSS VARIABLES (Using Your Theme Tokens) ===== */
:root {
    /* Colors - Using your existing theme */
    --bg: #172554;
    --surface: #131e45;
    --surface-2: #1d2e6b;
    --primary: #93C5FD;
    --primary-600: #60A5FA;
    --secondary: #C4B5FD;
    --accent: #6EE7B7;
    --muted: #94A3B8;
    --text: #F8FAFC;
    --text-2: #E6EEF8;
    --border: #2d3b6c;

    /* Fonts - Using your existing fonts */
    --font-sans: "Helvetica Neue", Arial, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", sans-serif;
    --font-head: "Helvetica Neue", Arial, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
    
    /* Sizing - Using your existing tokens */
    --base-size: 16px;
    --line-height: 1.6;
    --container-max: 1200px;
    
    /* Spacing - Using your existing tokens */
    --space-xs: .25rem;
    --space-sm: .5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 3rem;
    
    /* Border Radius - Using your existing tokens */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    
    /* Shadows - Using your existing tokens */
    --shadow-sm: 0 4px 10px rgba(2,6,23,0.6);
    --shadow-md: 0 10px 30px rgba(2,6,23,0.7);
    
    /* Breakpoints - Using your existing tokens */
    --bp-sm: 520px;
    --bp-md: 820px;
    --bp-lg: 1100px;
    
    /* For backward compatibility with existing code */
    --primary-rgb: 147, 197, 253;
}

/* ===== CORE STRUCTURE CLASSES ===== */

/* Container */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* Height Control */
.h-65 { min-height: 65vh; }
.h-80 { min-height: 80vh; }
.h-auto { min-height: auto; }

/* Layout Patterns */
.layout-split {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.layout-reverse { flex-direction: row-reverse; }

.layout-centered {
    display: block;
    text-align: center;
}

.layout-full {
    width: 100%;
    display: block;
}

/* Section Base */
/* Make the entire section look like one card */
.service-section {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    margin-bottom: var(--space-xl);
    margin-right: var(--space-lg) !important;
    margin-left: var(--space-lg) !important;
    width: calc(100% - (2 * var(--space-lg))) !important;
    max-width: calc(100% - (2 * var(--space-lg))) !important;
    box-sizing: border-box !important;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    opacity: 1 !important;
}

/* Content Areas */
.section-content {
    flex: 1;
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    z-index: 2;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    background: transparent; /* Transparent to show parent background */
}

/* Standardized Image Container for ALL Service Sections */
/* Remove borders from inside containers */
.section-image-container {
    flex: 1;
    padding: var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: transparent; /* Transparent to show parent background */
    border: none;
    box-shadow: none;
    overflow: hidden;
}

/* Standardized Image Styling for ALL Service Sections */
.section-image-container img {
    width: 100%;
    height: auto;
    max-height: 80vh; /* Consistent max height */
    object-fit: contain; /* Keep aspect ratio */
    border-radius: calc(var(--radius-lg) - 4px); /* Slightly smaller than container */
    max-width: 100%;
    display: block;
    transition: transform 0.3s ease;
}

/* Hover effect for images */
.section-image-container:hover img {
    transform: scale(1.02);
}

/* Specific exceptions for Hero and CTA sections */
.section-hero .section-image-container{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: auto !important;
}

.section-hero .section-image-container img{
    max-height: none !important;
    border-radius: 0 !important;
    object-fit: cover !important;
}

/* Ensure container doesn't interfere */
.service-section > .container {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* ===== SECTION TYPE CLASSES ===== */

/* Section 1: Hero */
.section-hero {
    margin-top: 100px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.section-hero .section-content {
    text-align: center;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex; /* ← CRITICAL */
    flex-direction: column; /* ← CRITICAL */
    justify-content: flex-end !important;
    align-items: center;
    padding-bottom: 4rem;
}

/* Section 2: Problem Solution */
.section-problem-solution .section-content {
    padding: 3rem var(--space-xl);
}

.problem-solution-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

.problem-side, .solution-side {
    flex: 1;
    min-width: 300px;
    padding: var(--space-lg);
    border-radius: var(--radius-md);
}

.problem-side {
    background: rgba(231, 76, 60, 0.05);
    border: 1px solid rgba(231, 76, 60, 0.2);
}

.solution-side {
    background: rgba(39, 174, 96, 0.05);
    border: 1px solid rgba(39, 174, 96, 0.2);
}

/* Section 3: Process */
.section-process .process-flow {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin: var(--space-lg) 0;
}

.process-step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: linear-gradient(135deg, var(--surface), var(--surface-2));
    border-radius: var(--radius-md);
    border-left: 4px solid var(--primary);
    opacity: 1; /* For JS animation */
}

.step-number {
    width: 50px;
    height: 50px;
    background: var(--primary);
    color: var(--surface);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.step-content {
    flex: 1;
}

.step-content h3 {
    margin-top: 0;
    margin-bottom: var(--space-sm);
    color: var(--text);
}

.step-content p {
    margin: 0;
    color: var(--text-2);
}

/* Section 4: Features/Services */
.section-features .section-content {
    padding: 3rem var(--space-xl);
}

.features-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin: var(--space-lg) 0;
}

/* Section 5: Transformation */
.section-transformation .before-after-comparison {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin: var(--space-lg) 0;
    padding: var(--space-lg);
    background: var(--surface-2);
    border-radius: var(--radius-lg);
}

.before-side, .after-side {
    flex: 1;
    min-width: 300px;
    padding: var(--space-lg);
    text-align: center;
}

.problem-stats, .solution-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Section 6: Technology */
.section-technology .tech-stack-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin: var(--space-lg) 0;
}

.tech-category {
    flex: 1;
    min-width: 300px;
    padding: var(--space-lg);
    background: var(--surface);
    border-radius: var(--radius-md);
}

.tech-items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

/* ===== SECTION 7: CTA ===== */
.section-cta {
    position: relative;
    min-height: 85vh !important;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-left: 2rem !important;
    margin-right: 2rem !important;
    width: calc(100% - 4rem) !important; /* Matches 2rem + 2rem margins */
    max-width: none !important; /* Remove restriction */
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Background image handling */
.section-cta[style*="background"] {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Content container */
.section-cta .container {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-bottom: 3rem;
}

/* Content area */
.section-cta .section-content {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 3rem 2rem;
    text-align: center;
}

/* CTA buttons - reuse existing .cta-button styles */
.cta-actions {
    display: flex;
    gap: var(--space-lg);
    justify-content: center;
    margin: var(--space-lg) 0;
    flex-wrap: wrap;
}

.cta-button {
    padding: var(--space-md) 2.5rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-600));
    color: var(--surface);
    border: 2px solid var(--primary);
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    cursor: pointer;
    font-family: var(--font-head);
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(var(--primary-rgb, 147, 197, 253), 0.3);
    color: var(--surface);
    text-decoration: none;
}

/* ===== VISUAL STYLE CLASSES ===== */

/* Cards */
.card {
    padding: var(--space-lg);
    background: var(--surface);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.card-border {
    border: 1px solid var(--border);
}

/* Feature Cards */
.feature-card {
    flex: 1;
    min-width: 250px;
    padding: var(--space-lg);
    background: var(--surface);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary);
    position: relative;
    opacity: 1; /* For JS animation */
}

.feature-icon {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: var(--space-md);
    display: block;
}

/* Technology Items */
.tech-item {
    padding: var(--space-sm) var(--space-md);
    background: var(--surface-2);
    border-radius: 25px;
    border: 1px solid var(--border);
    font-size: 0.9rem;
    opacity: 1; /* For JS animation */
}

/* Stats Items */
.stat-item {
    padding: var(--space-md);
    background: var(--surface);
    border-radius: var(--radius-sm);
    transition: transform 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-3px);
}

.stat-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--primary);
    display: block;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-2);
    margin-top: var(--space-sm);
    display: block;
}

/* Metric Items */
.metric-item {
    text-align: center;
    padding: var(--space-lg);
    background: var(--surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.metric-value {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary);
    display: block;
    opacity: 1; /* For JS animation */
}

.metric-label {
    font-size: 1rem;
    color: var(--text-2);
    margin-top: var(--space-sm);
    display: block;
}

/* ===== TYPOGRAPHY CLASSES ===== */

.section-title {
    font-size: 2.5rem;
    margin-bottom: var(--space-lg);
    background: linear-gradient(135deg, var(--text), var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.2;
    font-family: var(--font-head);
}

.section-subtitle {
    font-size: 1.8rem;
    margin-bottom: var(--space-md);
    color: var(--primary);
    font-family: var(--font-head);
}

.section-description {
    font-size: 1.2rem;
    color: var(--text-2);
    margin-bottom: var(--space-lg);
    line-height: var(--line-height);
    font-family: var(--font-sans);
}

/* Content Lists */
.content-list {
    list-style: none;
    padding: 0;
    margin: var(--space-md) 0;
}

.content-list li {
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-sm);
    background: var(--surface);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--accent);
    font-family: var(--font-sans);
}

/* ===== IMAGE CLASSES ===== */

.img-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.img-contain {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-lg);
}

/* ===== ANIMATION CLASSES (CSS-only) ===== */

.animate-count {
    animation: countUp 2s ease-out;
}

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

.animate-fade {
    animation: fadeIn 1s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-slide {
    animation: slideIn 1s ease-out;
}

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

/* ===== BUTTON CLASSES ===== */

.cta-actions {
    display: flex;
    gap: var(--space-lg);
    justify-content: center;
    margin: var(--space-lg) 0;
    flex-wrap: wrap;
}

.cta-button {
    padding: var(--space-md) 2.5rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-600));
    color: var(--surface);
    border: 2px solid var(--primary);
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    cursor: pointer;
    font-family: var(--font-head);
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(var(--primary-rgb, 147, 197, 253), 0.3);
    color: var(--surface);
    text-decoration: none;
}

/* ===== SERVICE NAVIGATION ===== */

.service-navigation {
    background: var(--surface);
    padding: var(--space-lg) 0;
    border-top: 1px solid var(--border);
    margin-top: var(--space-xl);
}

.nav-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    max-width: var(--container-max);
    margin: 0 auto;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: var(--font-sans);
}

.nav-link:hover {
    background: var(--primary);
    color: var(--surface);
    transform: translateY(-2px);
    text-decoration: none;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet (820px) */
@media (max-width: 820px) {
    .layout-split,
    .layout-reverse {
        flex-direction: column;
    }
    
    .section-content,
    .section-image-container {
        padding: var(--space-lg);
        width: 100%;
    }
    
    .section-image-container {
        min-height: 300px;
        margin-top: var(--space-lg); /* Add spacing on mobile */
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .section-description {
        font-size: 1.1rem;
    }
    
    .features-grid,
    .tech-stack-grid,
    .problem-solution-grid {
        flex-direction: column;
    }
    
    .feature-card,
    .tech-category,
    .problem-side,
    .solution-side,
    .before-side,
    .after-side {
        min-width: 100%;
    }
    
    .nav-links {
        flex-direction: column;
    }
    
    .nav-link {
        width: 100%;
        justify-content: center;
    }
}

/* Mobile (520px) */
@media (max-width: 520px) {
    .service-section {
        margin-bottom: var(--space-lg);
    }
    
    .section-content {
        padding: var(--space-lg);
    }
    
    .section-image-container {
        padding: var(--space-md);
        min-height: 250px;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    .process-step {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: var(--space-md);
    }
    
    .step-number {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        margin-bottom: var(--space-sm);
    }
    
    .cta-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .cta-button {
        width: 100%;
        text-align: center;
    }


}

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

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .service-section,
    .card-hover,
    .stat-item,
    .nav-link,
    .cta-button {
        transition: none;
    }
    
    .animate-count,
    .animate-fade,
    .animate-slide {
        animation: none;
    }
    
    .card-hover:hover,
    .stat-item:hover,
    .nav-link:hover,
    .cta-button:hover {
        transform: none;
    }
}

/* Focus States */
.service-section:focus-visible,
.card:focus-visible,
.nav-link:focus-visible,
.cta-button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ===== IE11 FALLBACKS ===== */

/* Flexbox fallbacks for IE11 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .layout-split,
    .layout-reverse {
        display: -ms-flexbox;
    }
    
    .features-grid,
    .tech-stack-grid,
    .problem-solution-grid {
        display: -ms-flexbox;
        -ms-flex-wrap: wrap;
    }
    
    .section-content {
        -ms-flex: 1;
    }
}

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

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: var(--space-md); }
.mt-2 { margin-top: var(--space-lg); }
.mb-1 { margin-bottom: var(--space-md); }
.mb-2 { margin-bottom: var(--space-lg); }

.p-1 { padding: var(--space-md); }
.p-2 { padding: var(--space-lg); }

/* ===== PRINT STYLES ===== */

@media print {
    .service-section {
        min-height: auto;
        page-break-inside: avoid;
        border: none !important;
    }
    
    .section-image-container {
        display: none;
    }
    
    .section-cta,
    .service-navigation {
        display: none;
    }
    
    .card-hover:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ===== FIX FOR SERVICE PAGE HERO ALIGNMENT ===== */

/* Target the service page hero specifically */
.service-section.section-hero {
    display: flex !important;
    align-items: flex-end !important; /* Align children to bottom */
    justify-content: center !important; /* Keep horizontal center */
}

/* Make sure the container inside doesn't interfere */
.service-section.section-hero .container {
    width: 100%;
    height: 100%;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
}

/* Override the global hero-innovative styles on service pages */
main .service-section.section-hero {
    min-height: 80vh !important; /* Use your h-80 class height */
    align-items: flex-end !important;
    justify-content: center !important;
}

/* Ensure the section-content uses full height */
.service-section.section-hero .section-content {
    height: 100%;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding-bottom: 4rem !important;
}

/* ==========================================================================
   END OF SERVICES.CSS
   ========================================================================== */
/* ==========================================================================
   SECTION-SPECIFIC OVERRIDES TEMPLATE
   ========================================================================== */
/* ADD THIS AT THE VERY END OF YOUR services.css FILE */
/* UNCOMMENT AND MODIFY ONLY WHAT YOU NEED */

/* ===== SECTION 2: PROBLEM/SOLUTION ===== */

.section-problem-solution .section-image-container img {
    max-height: 550px !important;
    width: 90% !important;
    margin: 0 auto !important;
}

/* Move content to the right */
.section-problem-solution .section-content {
    margin-left: 1rem !important;
    padding-left: 2.5rem !important;
}


/*
.section-problem-solution .section-content {
    padding: 2.5rem !important;
}

.section-problem-solution .problem-side,
.section-problem-solution .solution-side {
    min-height: 280px !important;
}
*/

/* ===== SECTION 3: PROCESS ===== */

.section-process .section-image-container img {
    max-height: 700px !important;
    width: 90% !important;
}

/* Move content to the right */
.section-process .section-content {
    margin-left: 1rem !important;
    padding-left: 2.5rem !important;
}

/*
.section-process .section-content {
    padding: 2.5rem 3rem !important;
}

.section-process .process-step {
    margin-bottom: 1.2rem !important;
    padding: 1.2rem !important;
}
*/

/* ===== SECTION 3: PROCESS - 2×2 GRID LAYOUT ===== */
.section-process .process-flow {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
    margin: 1rem 0 !important;
}

.section-process .process-step {
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
    padding: 1.5rem !important;
    height: 100% !important;
    justify-content: center !important;
}

.section-process .step-number {
    margin-bottom: 0.25rem !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 1.3rem !important;
}

.section-process .step-content h3 {
    margin-bottom: 0.5rem !important;
    font-size: 1.2rem !important;
    min-height: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.section-process .step-content p {
    font-size: 1rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

/* Mobile responsive for Process grid */
@media (max-width: 820px) {
    .section-process .process-flow {
        grid-template-columns: 1fr !important; /* Change to 1 column on mobile */
        gap: 1rem !important;
    }
    
    .section-process .process-step {
        padding: 1.2rem !important;
    }
    
    .section-process .step-number {
        width: 35px !important;
        height: 35px !important;
        font-size: 1.1rem !important;
    }
    
    .section-process .step-content h3 {
        font-size: 1.1rem !important;
    }
    
    .section-process .step-content p {
        font-size: 0.95rem !important;
    }
}


/* ===== SECTION 4: FEATURES/SERVICES ===== */
/*

/* Move content to the right */
.section-features .section-content {
    margin-left: 1rem !important;
    padding-left: 2.5rem !important;
}

.section-features .section-image-container img {
    max-height: 700px !important;
    width: 90% !important;
}

.section-features .feature-card {
    min-height: 50px !important;
    padding: 0.5rem !important;
}

.section-features .features-grid {
    gap: 0.7rem !important;
    margin-top: 0.5rem !important;
}

/* ===== SECTION 5: TRANSFORMATION - FINAL SIMPLIFIED ===== */

/* Section container adjustments */
.section-transformation {
    margin-bottom: 1rem !important;
    padding-bottom: 0.5rem !important;
    background: var(--surface) !important;
}

/* 2-column layout: Before/After left, Metrics right */
.section-transformation .section-content {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.7rem !important;
    align-items: start !important;
    margin-right: 3rem !important;
    padding-right: 2rem !important;
}

/* Image styling */
.section-transformation .section-image-container img {
    max-height: 550px !important;
    width: 90% !important;
}

/* BEFORE/AFTER COMPARISON (Left Column) */
.section-transformation .before-after-comparison {
    grid-column: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0.5rem !important;
    gap: 0.5rem !important;
    background: var(--surface-2) !important;
}

/* Before & After boxes - REDUCED HEIGHT */
.section-transformation .before-side,
.section-transformation .after-side {
    flex: 1 !important;
    min-width: 150px !important;
    max-width: 300px !important;
    padding: 0.6rem !important; /* Reduced from 0.75rem */
    margin: 0 !important;
    min-height: auto !important; /* Remove minimum height */
    height: auto !important; /* Let content determine height */
}

/* Reduce spacing inside boxes */
.section-transformation .stat-item {
    padding: 0.3rem !important; /* Reduced from 0.4rem */
    margin-bottom: 0.2rem !important; /* Reduced from 0.3rem */
}

/* Reduce text sizes inside */
.section-transformation .before-side h3,
.section-transformation .after-side h3 {
    font-size: 1.2rem !important;
    margin-bottom: 0.3rem !important;
}

.section-transformation .stat-value {
    font-size: 1.6rem !important;
    margin-bottom: 0.3rem !important;
}

.section-transformation .stat-label {
    font-size: 1rem !important;
    line-height: 1.3 !important;
    margin-top: 0.4rem !important;
}


/* Stats inside boxes */
.section-transformation .stat-item {
    margin-bottom: 0.4rem !important;
    padding: 0.5rem !important;
}

/* METRICS GRID (Right Column) */
.section-transformation .features-grid.mt-2 {
    grid-column: 2 !important;
    margin-top: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
}

/* Metric items (60%, 45%, etc.) */
.section-transformation .metric-item {
    padding: 0.75rem !important;
    min-height: 150px !important;
    text-align: center !important;
}

.section-transformation .metric-value {
    font-size: 2.2rem !important;
    margin-bottom: 0.3rem !important;
}

.section-transformation .metric-label {
    font-size: 1.2rem !important;
    line-height: 1.2 !important;
}

/* Mobile responsiveness */
@media (max-width: 820px) {
    .section-transformation .section-content {
        grid-template-columns: 1fr !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
    }
    
    .section-transformation .before-after-comparison,
    .section-transformation .features-grid.mt-2 {
        grid-column: 1 !important;
    }
}

/* ===== SECTION 6: TECHNOLOGY ===== */

/* Add gap between Section 5 and Section 6 */
.section-technology {
    margin-top: 3rem !important;
    padding-top: 2rem !important;
}

/* Move content to the right */
.section-technology .section-content {
    margin-left: 1rem !important;
    padding-left: 2.5rem !important;
}

.section-technology .section-image-container img {
    max-height: 550px !important;
    width: 90% !important;
}

.section-technology .tech-category {
    min-height: 20px !important;
    padding: 0.5rem !important;
}

.section-technology .tech-items {
    gap: 0.5rem !important;
    margin-top: 1.5rem !important;
}

/* ===== LAYOUT TYPE OVERRIDES ===== */
/*
.layout-split .section-image-container {
    flex: 0.8 !important;
}

.layout-split .section-content {
    flex: 1.2 !important;
}

.layout-reverse .section-image-container {
    padding-left: 0 !important;
    padding-right: 2rem !important;
}

.layout-centered .section-content {
    max-width: 800px !important;
    margin: 0 auto !important;
}
*/

/* ===== CONTENT TYPE OVERRIDES ===== */

/* For sections with lists */
/*
.section-problem-solution .content-list li {
    padding: 0.5rem 0 !important;
    font-size: 1.05rem !important;
}

/* For sections with steps */
/*
.section-process .step-number {
    width: 45px !important;
    height: 45px !important;
    font-size: 1.1rem !important;
}

/* For sections with cards */
/*
.service-section .card {
    border-radius: 12px !important;
    transition: transform 0.25s ease !important;
}
*/
/* For sections with stats */
/*
.section-transformation .stat-value {
    font-size: 2.2rem !important;
    margin-bottom: 0.5rem !important;
}
*/

/* ===== IMAGE CONSISTENCY OVERRIDES ===== */
/* Apply to ALL service section images (except hero) */
/*
.service-section:not(.section-hero) .section-image-container img {
    border-radius: 14px !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2) !important;
    border: 1px solid var(--border) !important;
}

/* Ensure all images have consistent vertical alignment */
/*
.section-image-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
*/

/* ===== SPACING OVERRIDES ===== */
/*
/* Adjust spacing between sections */
/*
.service-section {
    margin-bottom: 3rem !important;
}

/* Adjust spacing within sections */
/*
.section-content {
    padding: 2.5rem !important;
}

/* Adjust spacing for mobile */
/*
@media (max-width: 820px) {
    .service-section {
        margin-bottom: 2rem !important;
    }
    
    .section-content {
        padding: 1.5rem !important;
    }
    
    .section-image-container img {
        max-height: 300px !important;
        width: 95% !important;
    }
}
*/

/* ==========================================================================
   END OF SECTION-SPECIFIC OVERRIDES
   ========================================================================== */