/* ============================================================================
   ROBOTICS & CONTROL LTD - MAIN STYLESHEET
   
   This stylesheet contains all the core styles for the Robotics & Control Ltd
   website. It has been organized for maximum readability and maintainability.
   
   🗂️ QUICK NAVIGATION:
   ==================
   
   📋 TABLE OF CONTENTS:
   1.  CSS RESET & BASE STYLES .................... Line 30
   2.  GLOBAL TYPOGRAPHY & TEXT ................... Line 80
   3.  LAYOUT SYSTEMS & CONTAINERS ................ Line 200
   4.  HEADER & NAVIGATION COMPONENTS ............. Line 300
   5.  BUTTON & FORM SYSTEMS ...................... Line 800
   6.  CARD & CONTENT COMPONENTS .................. Line 1200
   7.  HERO SECTIONS & BANNERS .................... Line 1500
   8.  HOMEPAGE SPECIFIC STYLING .................. Line 2500
   9.  CONTACT FORMS & FOOTER ..................... Line 9000
   10. LOADING ANIMATIONS & EFFECTS ............... Line 400
   11. UTILITY CLASSES & HELPERS .................. Line 10000
   
   📌 PAGE-SPECIFIC STYLES MOVED TO MODULAR CSS FILES:
   - Service Pages → css/services.css
   - Individual Service Pages → css/service-pages.css
   - Safety Training → css/safety-training.css
   - Blog Pages → css/blog.css
   - Form Validation → css/validation.css
   
   🎯 KEY FEATURES:
   - Dark theme Safety Training page with hexagonal course cards
   - Responsive design optimized for all devices
   - Professional loading animations and transitions
   - Comprehensive form validation and accessibility
   - SEO-optimized structure and semantic markup
   
   💡 USAGE NOTES:
   - CSS variables are defined in variables.css (loaded first)
   - All measurements use consistent spacing scale
   - Components follow BEM-like naming conventions
   - Mobile-first responsive approach throughout
   
   ============================================================================ */

/* ============================================================================
   1. IMPORTS & RESET STYLES
   ============================================================================ */

/* Import hexagonal design system module */

/* CSS Reset - Normalize default browser styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Include padding and border in element's total width/height */
}

/* ============================================================================
   2. GLOBAL BASE STYLES
   ============================================================================ */

/* Global scroll offset to account for fixed header */
html {
    scroll-padding-top: var(--header-height); /* Prevents content from being hidden behind fixed header when scrolling to anchors */
}

/* Base document styles */
html, body {
    background: var(--background-light); /* Use CSS variable for consistent theming */
    min-height: 100vh; /* Ensure full viewport height coverage */
    font-family: var(--font-family); /* Use CSS variable for consistent typography */
    color: var(--text-primary); /* Use CSS variable for consistent text color */
}

/* Safety training page uses dark theme - styles moved to css/safety-training.css */

/* ============================================================================
   3. LAYOUT & CONTAINER STYLES
   ============================================================================ */

/* Main content wrapper */
main {
    position: relative; /* Create stacking context */
    z-index: 1; /* Ensure main content appears above background elements */
}

/* Homepage-specific layout - hero section should be flush with header */
body.home main {
    padding-top: 0; /* Remove top padding for homepage to allow hero to touch header */
}

/* All other pages need padding to prevent content hiding behind fixed header */
body:not(.home) {
    padding-top: var(--header-height); /* Add space equal to header height */
}
/* ============================================================================
   4. SECTION BACKGROUND STYLES
   ============================================================================ */

/* 
   Section backgrounds provide visual variety and help separate content areas.
   Using CSS variables ensures consistent theming and easy maintenance.
*/

/* Page-specific background sections moved to dedicated CSS files:
   - Services page → css/services.css
   - Service pages (automation, safety, design, panel) → css/service-pages.css
   - Training page → css/safety-training.css
   - Blog pages → css/blog.css
*/

/* Generic store products section */
.store-products {
    background: var(--section-white);
    padding: var(--spacing-16) 0;
}

/* Light teal background sections - used for highlights and testimonials */
/* NOTE: These are global shared section classes. Page-specific sections should use their own classes in dedicated CSS files. */
.benefits-section,
.features-section,
.testimonials-section {
    background: var(--section-light-teal); /* Branded teal background for emphasis */
    padding: var(--spacing-16) 0; /* Consistent vertical spacing */
}

/* Call-to-action sections - light blue background with center alignment */
/* NOTE: This is a global shared class. Page-specific CTAs should use their own classes in dedicated CSS files. */
.cta-section {
    background: var(--section-light-blue); /* Light blue background for CTAs */
    padding: var(--spacing-16) 0; /* Consistent vertical spacing */
    text-align: center; /* Center-align CTA content */
}

.contact-section {
    background: var(--section-light-blue);
    padding: var(--spacing-16) 0;
}

.about-section {
    background: var(--section-light-blue);
    padding: var(--spacing-16) 0;
}

.expertise-section,
.capabilities-section,
.coverage-section,
.process-section {
    background: var(--section-warm-grey);
    padding: var(--spacing-16) 0;
}

.stats-section,
.achievements-section,
.certifications-section {
    background: var(--section-cool-grey);
    padding: var(--spacing-16) 0;
}

.team-section,
.company-section,
.history-section {
    background: var(--section-accent);
    padding: var(--spacing-16) 0;
}

.newsletter-section,
.footer-cta,
.special-offers {
    background: var(--section-orange-light);
    padding: var(--spacing-16) 0;
}

/* Additional Section Styling */
.footer {
    background: var(--secondary-color);
    color: white;
    padding: var(--spacing-16) 0 var(--spacing-8);
}

/* Override for specifically styled sections - exclude homepage hero with cover images */
/* REMOVED !important to allow page-specific CSS files to override hero backgrounds */
.page-hero,
.store-hero {
    background: linear-gradient(180deg, #000000 0%, #0a1929 25%, #1e3a5f 50%, #4a5f7f 75%, #e5e7eb 100%);
}

/* Specific section backgrounds take precedence over alternation */
.services,
.services-overview,
.industries-modern,
.company-intro,
.safety-overview,
.benefits-section,
.features-section,
.cta-section,
.contact-section,
.expertise-section,
.capabilities-section,
.stats-section,
.certifications-section {
    /* Background defined by individual classes above */
}

/* Zero specificity fallback - explicit section classes automatically override */
:where(section:nth-child(even)) {
    background: var(--section-light-grey);
}

:where(section:nth-child(odd)) {
    background: var(--section-white);
}

/* Card sections get subtle background */
.feature-card,
.testimonial-card {
    background: var(--section-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

.feature-card:hover,
.testimonial-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Note: .service-card now exclusively handled by Professional Box Container System */
.hero {
    position: relative;
    min-height: 80vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    color: white;
    overflow: hidden;
    margin-bottom: var(--spacing-6);
    /* Homepage keeps its original background with images */
}

/* Page Hero Sections with Black to Navy to White Gradient + Hexagon Pattern */
.page-hero,
.store-hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    overflow: hidden;
    margin-bottom: var(--spacing-6);
    background: linear-gradient(180deg, #000000 0%, #0a1929 25%, #1e3a5f 50%, #4a5f7f 75%, #e5e7eb 100%);
    text-align: center;
    padding: var(--spacing-16) var(--spacing-4);
}

/* Adjust hero text color for better readability against gradient */
.page-hero h1,
.page-hero h2,
.page-hero p,
.store-hero h1,
.store-hero h2,
.store-hero p {
    text-shadow: 0 3px 15px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.9);
    position: relative;
    z-index: 3;
}

/* Sophisticated Hexagon Grid Pattern Overlay - Blends with Gradient */
.page-hero::before,
.store-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: 86.6px 50px;
    background-image: 
        linear-gradient(30deg, rgba(103, 232, 249, 0.06) 12%, transparent 12.5%, transparent 87%, rgba(103, 232, 249, 0.06) 87.5%, rgba(103, 232, 249, 0.06)),
        linear-gradient(150deg, rgba(103, 232, 249, 0.06) 12%, transparent 12.5%, transparent 87%, rgba(103, 232, 249, 0.06) 87.5%, rgba(103, 232, 249, 0.06)),
        linear-gradient(30deg, rgba(59, 130, 246, 0.05) 12%, transparent 12.5%, transparent 87%, rgba(59, 130, 246, 0.05) 87.5%, rgba(59, 130, 246, 0.05)),
        linear-gradient(150deg, rgba(59, 130, 246, 0.05) 12%, transparent 12.5%, transparent 87%, rgba(59, 130, 246, 0.05) 87.5%, rgba(59, 130, 246, 0.05)),
        linear-gradient(60deg, rgba(148, 163, 184, 0.04) 25%, transparent 25.5%, transparent 75%, rgba(148, 163, 184, 0.04) 75%, rgba(148, 163, 184, 0.04)),
        linear-gradient(60deg, rgba(226, 232, 240, 0.03) 25%, transparent 25.5%, transparent 75%, rgba(226, 232, 240, 0.03) 75%, rgba(226, 232, 240, 0.03));
    background-position: 0 0, 0 0, 43.3px 25px, 43.3px 25px, 0 0, 43.3px 25px;
    z-index: 2;
    pointer-events: none;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.65) 25%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.65) 25%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
}

/* Additional subtle overlay for enhanced color blending */
.page-hero::after,
.store-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: 86.6px 50px;
    background-image: 
        linear-gradient(30deg, rgba(30, 58, 95, 0.04) 12%, transparent 12.5%, transparent 87%, rgba(30, 58, 95, 0.04) 87.5%, rgba(30, 58, 95, 0.04)),
        linear-gradient(150deg, rgba(30, 58, 95, 0.04) 12%, transparent 12.5%, transparent 87%, rgba(30, 58, 95, 0.04) 87.5%, rgba(30, 58, 95, 0.04)),
        linear-gradient(60deg, rgba(74, 95, 127, 0.03) 25%, transparent 25.5%, transparent 75%, rgba(74, 95, 127, 0.03) 75%, rgba(74, 95, 127, 0.03));
    background-position: 21.65px 12.5px, 21.65px 12.5px, 21.65px 12.5px;
    z-index: 2;
    pointer-events: none;
    opacity: 0.7;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0.2) 85%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0.2) 85%, rgba(0,0,0,0) 100%);
}

/* Ensure hero content is above the pattern */
.page-hero > *,
.store-hero > *,
.page-hero .container,
.store-hero .container {
    position: relative;
    z-index: 10;
}

/* Hero background image styling */
.hero-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.3;
}

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

/* Tablet hero adjustments */
@media (max-width: 1024px) and (min-width: 769px) {
    .hero,
    .page-hero,
    .store-hero {
        min-height: 60vh;
        padding: var(--spacing-12) 0;
    }
}

/* Mobile hero adjustments */
@media (max-width: 768px) {
    .hero,
    .page-hero,
    .store-hero {
        min-height: calc(100vh - var(--header-height));
        padding: var(--spacing-4) 0;
    }
    .hero-container {
        min-height: calc(100vh - var(--header-height));
        padding: var(--spacing-4) 1rem;
    }
    .hero-cover-image {
        background-size: cover !important;
        background-position: 50% 30vh !important;
        background-attachment: scroll !important;
        width: 100% !important;
        height: 100% !important;
        min-height: calc(100vh - var(--header-height)) !important;
    }
    .hero-cover-image::before,
    .hero-cover-image::after {
        background-size: cover !important;
        background-position: 50% 30vh !important;
        background-attachment: scroll !important;
        min-height: 100% !important;
        width: 100% !important;
    }
    .hero-carousel {
        max-width: 350px;
        height: 280px;
    }
    .embla__prev,
    .embla__next {
        width: 36px;
        height: 36px;
        opacity: 0.9;
    }
    .embla__prev {
        left: var(--spacing-2);
    }
    .embla__next {
        right: var(--spacing-2);
    }
    .embla__dots {
        bottom: var(--spacing-2);
        gap: var(--spacing-2);
    }
    .embla__dot {
        width: 10px;
        height: 10px;
    }
}
.hero-cover-image {
    background: none !important;
    width: 100%;
    height: 100%;
    min-height: 100%;
    position: relative;
    overflow: hidden;
}

@media (max-width: 768px) {
    .hero-cover-image::before {
        background-attachment: scroll !important;
        background-size: cover !important;
    }
}

/* Dual pseudo-element system for smooth crossfade carousel */
.hero-cover-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    min-width: 100%;
    min-height: 100%;
    animation: heroCarouselLayer1 40s infinite;
    transition: opacity 1.5s ease-in-out;
    z-index: -2;
}

.hero-cover-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    min-width: 100%;
    min-height: 100%;
    animation: heroCarouselLayer2 40s infinite;
    transition: opacity 1.5s ease-in-out;
    z-index: -1;
}

/* Layer 1: Shows images 1, 3, 5, 7 (4 images) */
@keyframes heroCarouselLayer1 {
    0%, 13% { 
        background-image: url('../images/hero-control-panel-carousel-original.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        opacity: 1;
    }
    14%, 27% {
        background-image: url('../images/hero-control-panel-interior-carousel.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        opacity: 0;
    }
    28%, 41% {
        background-image: url('../images/hero-panel-building-carousel-homepage.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        opacity: 1;
    }
    42%, 55% {
        background-image: url('../images/hero-panel-wiring-carousel.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        opacity: 0;
    }
    56%, 69% { 
        background-image: url('../images/hero-panel-building-carousel-homepage.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        opacity: 1;
    }
    70%, 83% {
        background-image: url('../images/hero-technician-assembly-carousel.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        opacity: 0;
    }
    84%, 100% {
        background-image: url('../images/hero-panel-wiring-carousel.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        opacity: 1;
    }
}

/* Layer 2: Shows images 2, 4, 6 (3 images) */
@keyframes heroCarouselLayer2 {
    0%, 13% { 
        background-image: url('../images/hero-control-panel-interior-carousel.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        opacity: 0;
    }
    14%, 27% {
        background-image: url('../images/hero-control-panel-interior-carousel.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        opacity: 1;
    }
    28%, 41% {
        background-image: url('../images/hero-panel-wiring-carousel.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        opacity: 0;
    }
    42%, 55% {
        background-image: url('../images/hero-panel-wiring-carousel.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        opacity: 1;
    }
    56%, 69% {
        background-image: url('../images/hero-technician-assembly-carousel.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        opacity: 0;
    }
    70%, 83% { 
        background-image: url('../images/hero-technician-assembly-carousel.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        opacity: 1;
    }
    84%, 100% {
        background-image: url('../images/hero-panel-building-carousel-homepage.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        opacity: 0;
    }
}

/* All secondary animations removed - using single clean cycle */
@-webkit-keyframes heroImageCycleSecondary-DISABLED {
    0%, 19% { 
        opacity: 0; 
    }
    20%, 38% { 
        background-image: url('../images/hero-robotics-assembly.png'); 
        opacity: 1; 
    }
    39%, 40% { 
        opacity: 0; 
    }
    41%, 58% { 
        background-image: url('../images/hero-white-robot.png'); 
        opacity: 1; 
    }
    59%, 60% { 
        opacity: 0; 
    }
    61%, 78% { 
        background-image: url('../images/hero-electrical-control.png'); 
        opacity: 1; 
    }
    79%, 80% { 
        opacity: 0; 
    }
    81%, 98% { 
        background-image: url('../images/hero-orange-robot.png'); 
        opacity: 1; 
    }
    99%, 100% { 
        background-image: url('../images/hero-company-logo.png'); 
        opacity: 1; 
    }
}

@-moz-keyframes heroImageCycleSecondary-DISABLED {
    0%, 19% { 
        opacity: 0; 
    }
    20%, 38% { 
        background-image: url('../images/hero-robotics-assembly.png'); 
        opacity: 1; 
    }
    39%, 40% { 
        opacity: 0; 
    }
    41%, 58% { 
        background-image: url('../images/hero-white-robot.png'); 
        opacity: 1; 
    }
    59%, 60% { 
        opacity: 0; 
    }
    61%, 78% { 
        background-image: url('../images/hero-electrical-control.png'); 
        opacity: 1; 
    }
    79%, 80% { 
        opacity: 0; 
    }
    81%, 98% { 
        background-image: url('../images/hero-orange-robot.png'); 
        opacity: 1; 
    }
    99%, 100% { 
        background-image: url('../images/hero-company-logo.png'); 
        opacity: 1; 
    }
}

@-ms-keyframes heroImageCycleSecondary-DISABLED {
    0%, 19% { 
        opacity: 0; 
    }
    20%, 38% { 
        background-image: url('../images/hero-robotics-assembly.png'); 
        opacity: 1; 
    }
    39%, 40% { 
        opacity: 0; 
    }
    41%, 58% { 
        background-image: url('../images/hero-white-robot.png'); 
        opacity: 1; 
    }
    59%, 60% { 
        opacity: 0; 
    }
    61%, 78% { 
        background-image: url('../images/hero-electrical-control.png'); 
        opacity: 1; 
    }
    79%, 80% { 
        opacity: 0; 
    }
    81%, 98% { 
        background-image: url('../images/hero-orange-robot.png'); 
        opacity: 1; 
    }
    99%, 100% { 
        background-image: url('../images/hero-company-logo.png'); 
        opacity: 1; 
    }
}

/* Removed secondary keyframes - using single element system */

/* Unused legacy keyframes removed for cleaner CSS */
/* Content overlay for hero section */
.hero-cover-image .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 10;
    pointer-events: none;
}

.hero-cover-image .hero-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to bottom, transparent 0%, rgba(248, 250, 252, 0.8) 70%, #f8fafc 100%);
    z-index: 11;
    pointer-events: none;
}
.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    z-index: 100;
    position: relative;
    min-height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.hero-content-left {
    max-width: 600px;
    text-align: left;
}
.hero-main-title {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: white;
    background: rgba(0, 0, 0, 0.4);
    padding: 1rem;
    border-radius: 0.5rem;
    position: relative;
    z-index: 101;
}
.title-accent {
    color: #10b981;
}
.hero-main-subtitle {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    color: white;
    
    padding: 1rem;
    border-radius: 0.5rem;
    max-width: 700px;
}
.hero-main-cta {
    margin-top: 2rem;
}
.btn-hero {
    display: inline-block;
    background: #ef4444;
    background: var(--hero-cta-color);
    color: white;
    padding: 1rem 2.5rem;
    min-height: 44px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.btn-hero:hover {
    background: #dc2626;
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(239, 68, 68, 0.3);
}
/* Hero Section Responsive Design */
@media (max-width: 768px) {
    .hero {
        min-height: calc(100vh - var(--header-height));
    }
    .hero-main-title {
        font-size: 2.5rem;
        padding: 0.8rem;
        margin-bottom: 1rem;
        backdrop-filter: blur(4px);
    }
    .hero-main-subtitle {
        font-size: 1.1rem;
        padding: 0.8rem;
        margin-bottom: 2rem;
        backdrop-filter: blur(4px);
    }
    .hero-container {
        padding: var(--spacing-4) 1rem;
        align-items: center;
        justify-content: center;
    }
    .hero-content-left {
        max-width: 100%;
        text-align: center;
    }
    .hero-cover-image::after {
        height: 100px;
    }
}
@media (max-width: 480px) {
    .hero {
        min-height: calc(100vh - var(--header-height));
    }
    .hero-container {
        min-height: calc(100vh - var(--header-height));
        padding: var(--spacing-2) 1rem;
    }
    .hero-main-title {
        font-size: 2rem;
        line-height: 1.2;
        padding: 0.8rem;
    }
    .hero-main-subtitle {
        font-size: 1rem;
        line-height: 1.5;
        padding: 0.8rem;
    }
    .btn-hero {
        padding: 0.8rem 2rem;
        font-size: 1rem;
    }
    .hero-cover-image .hero-gradient {
        height: 80px;
    }
    .hero-carousel {
        max-width: 300px;
        height: 240px;
    }
    .embla__prev,
    .embla__next {
        width: 32px;
        height: 32px;
    }
}
/* Header Responsive Design */
@media (max-width: 768px) {
    .header {
        padding: 0.25rem 0;
        backdrop-filter: blur(10px);
    }
    .nav-contact {
        display: none !important;
    }
    .nav-phone {
        display: none !important;
    }
    .nav-toggle {
        width: 44px;
        height: 44px;
        border-radius: var(--radius-sm);
        transition: background-color 0.2s ease;
        justify-content: center;
        align-items: center;
    }
    .nav-toggle:hover {
        background-color: rgba(8, 145, 178, 0.1);
    }
    .nav-logo {
        height: 45px; /* Consistent with mobile breakpoint */
        max-width: 50vw; /* Prevent overflow */
        width: auto;
    }
}

@media (max-width: 480px) {
    /* Small mobile header compensation - removed, handled by global solution */
}
/* High DPI / Retina Display Support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-cover-image,
    .hero-cover-image::before,
    .hero-cover-image::after {
        background-size: cover !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: optimize-contrast;
    }
    .hero-image-item {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: optimize-contrast;
    }
}

/* Extra small screens - ensure images display properly */
@media (max-width: 480px) {
    .hero-cover-image,
    .hero-cover-image::before,
    .hero-cover-image::after {
        background-size: cover !important;
        background-position: 50% 25vh !important;
        min-height: 100% !important;
    }
}
/* Landscape orientation adjustments */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: calc(100vh - var(--header-height));
    }
    .hero-container {
        padding: var(--spacing-2) 2rem;
        align-items: center;
    }
    .hero-main-title {
        font-size: 2rem;
        padding: 0.5rem;
        margin-bottom: 0.5rem;
    }
    .hero-main-subtitle {
        font-size: 0.9rem;
        padding: 0.5rem;
        margin-bottom: 1rem;
    }
    .hero-stats {
        margin: 1rem 0;
    }
}
/* Services Divisions Section */
.services-divisions {
    padding: 4rem 0;
    background: #f8fafc;
}
.divisions-title {
    font-size: 2.5rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 3rem;
    color: #111827;
    color: var(--text-primary);
}
.divisions-grid {
    /* IE11 Flexbox fallback */
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    /* Modern Grid for browsers that support it */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}
/* IE11 Flexbox spacing - using margin since gap isn't supported */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .divisions-grid {
        margin: -1rem; /* Negative margin to compensate for card margins */
    }
    .division-card {
        -ms-flex: 0 0 calc(33.333% - 2rem);
        -webkit-flex: 0 0 calc(33.333% - 2rem);
        flex: 0 0 calc(33.333% - 2rem);
        margin: 1rem;
        min-width: 280px;
    }
}
/* Responsive adjustments for IE11 flexbox */
@media screen and (-ms-high-contrast: active) and (max-width: 1024px), 
       (-ms-high-contrast: none) and (max-width: 1024px) {
    .division-card {
        -ms-flex: 0 0 calc(50% - 2rem);
        -webkit-flex: 0 0 calc(50% - 2rem);
        flex: 0 0 calc(50% - 2rem);
    }
}
@media screen and (-ms-high-contrast: active) and (max-width: 768px), 
       (-ms-high-contrast: none) and (max-width: 768px) {
    .division-card {
        -ms-flex: 0 0 calc(100% - 2rem);
        -webkit-flex: 0 0 calc(100% - 2rem);
        flex: 0 0 calc(100% - 2rem);
    }
}
.division-card {
    background: transparent;
    padding: 2.5rem 2rem;
    border-radius: 0.75rem;
    text-decoration: none;
    color: inherit;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
    display: block;
    position: relative;
    overflow: hidden;
}
.division-card:hover {
    -webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    -ms-transform: translateY(-8px);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: #0891b2;
    border-color: var(--primary-color);
}
.division-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #0891b2;
    background: var(--primary-color);
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: transform 0.3s ease;
    -moz-transition: transform 0.3s ease;
    -ms-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
}
.division-card:hover::before {
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
}
.division-icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.5rem;
    color: #0891b2;
    color: var(--primary-color);
}
.division-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.5;
}
.division-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #111827;
    color: var(--text-primary);
}
.division-description {
    font-size: 1rem;
    line-height: 1.6;
    color: #6b7280;
    color: var(--text-secondary);
}
/* Responsive Design */
@media (max-width: 768px) {
    .hero-main-title {
        font-size: 2.5rem;
    }
    .hero-main-subtitle {
        font-size: 1.1rem;
    }
    .divisions-title {
        font-size: 2rem;
    }
    .divisions-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .division-card {
        padding: 2rem 1.5rem;
    }
}
/* Additional CSS optimizations for better cross-browser support */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* Improved text rendering across devices */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
/* Animated Background Keyframes */
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@-webkit-keyframes float {
    0%, 100% { -webkit-transform: translateY(0px) rotate(0deg); transform: translateY(0px) rotate(0deg); }
    33% { -webkit-transform: translateY(-20px) rotate(120deg); transform: translateY(-20px) rotate(120deg); }
    66% { -webkit-transform: translateY(10px) rotate(240deg); transform: translateY(10px) rotate(240deg); }
}
@-moz-keyframes float {
    0%, 100% { -moz-transform: translateY(0px) rotate(0deg); transform: translateY(0px) rotate(0deg); }
    33% { -moz-transform: translateY(-20px) rotate(120deg); transform: translateY(-20px) rotate(120deg); }
    66% { -moz-transform: translateY(10px) rotate(240deg); transform: translateY(10px) rotate(240deg); }
}
@-ms-keyframes float {
    0%, 100% { -ms-transform: translateY(0px) rotate(0deg); transform: translateY(0px) rotate(0deg); }
    33% { -ms-transform: translateY(-20px) rotate(120deg); transform: translateY(-20px) rotate(120deg); }
    66% { -ms-transform: translateY(10px) rotate(240deg); transform: translateY(10px) rotate(240deg); }
}
@keyframes float {
    0%, 100% { -webkit-transform: translateY(0px) rotate(0deg); -moz-transform: translateY(0px) rotate(0deg); -ms-transform: translateY(0px) rotate(0deg); transform: translateY(0px) rotate(0deg); }
    33% { -webkit-transform: translateY(-20px) rotate(120deg); -moz-transform: translateY(-20px) rotate(120deg); -ms-transform: translateY(-20px) rotate(120deg); transform: translateY(-20px) rotate(120deg); }
    66% { -webkit-transform: translateY(10px) rotate(240deg); -moz-transform: translateY(10px) rotate(240deg); -ms-transform: translateY(10px) rotate(240deg); transform: translateY(10px) rotate(240deg); }
}
@keyframes floatReverse {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(10px) rotate(-120deg); }
    66% { transform: translateY(-15px) rotate(-240deg); }
}
@-webkit-keyframes pulse {
    0%, 100% { opacity: 0.4; -webkit-transform: scale(1); transform: scale(1); }
    50% { opacity: 0.8; -webkit-transform: scale(1.05); transform: scale(1.05); }
}
@-moz-keyframes pulse {
    0%, 100% { opacity: 0.4; -moz-transform: scale(1); transform: scale(1); }
    50% { opacity: 0.8; -moz-transform: scale(1.05); transform: scale(1.05); }
}
@-ms-keyframes pulse {
    0%, 100% { opacity: 0.4; -ms-transform: scale(1); transform: scale(1); }
    50% { opacity: 0.8; -ms-transform: scale(1.05); transform: scale(1.05); }
}
@keyframes pulse {
    0%, 100% { opacity: 0.4; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
    50% { opacity: 0.8; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); }
}
@keyframes wave {
    0% { transform: translateX(-100%) translateY(0px) rotate(0deg); }
    50% { transform: translateX(100vw) translateY(-20px) rotate(180deg); }
    100% { transform: translateX(-100%) translateY(0px) rotate(360deg); }
}
@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1); }
}
@keyframes drift {
    0% { transform: translateX(0) translateY(0) rotate(0deg); }
    25% { transform: translateX(100px) translateY(-50px) rotate(90deg); }
    50% { transform: translateX(200px) translateY(0px) rotate(180deg); }
    75% { transform: translateX(100px) translateY(50px) rotate(270deg); }
    100% { transform: translateX(0) translateY(0) rotate(360deg); }
}
@keyframes shimmer {
    0% { opacity: 0.1; transform: translateX(-100%); }
    50% { opacity: 0.3; }
    100% { opacity: 0.1; transform: translateX(100%); }
}
@keyframes electric-pulse {
    0%, 100% { 
        opacity: 0.4; 
        filter: brightness(1); 
    }
    25% { 
        opacity: 0.6; 
        filter: brightness(1.2); 
    }
    50% { 
        opacity: 0.3; 
        filter: brightness(0.8); 
    }
    75% { 
        opacity: 0.7; 
        filter: brightness(1.4); 
    }
}
@keyframes automation-pulse {
    0%, 100% { 
        opacity: 0.3; 
        filter: brightness(1) hue-rotate(0deg); 
    }
    25% { 
        opacity: 0.35; 
        filter: brightness(1.1) hue-rotate(5deg); 
    }
    50% { 
        opacity: 0.42; 
        filter: brightness(1.25) hue-rotate(10deg); 
    }
    75% { 
        opacity: 0.38; 
        filter: brightness(1.15) hue-rotate(5deg); 
    }
}
/* Removed gear animation styles */
/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    /* Disable all animations and transitions for users who prefer reduced motion */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* Specifically disable problematic animations */
    .hero {
        animation: none !important;
    }
    .hero::before,
    .hero::after {
        animation: none !important;
        opacity: 0 !important;
    }
    /* Disable floating and rotating elements */
    .service-card,
    .team-member-card,
    .feature-card {
        transform: none !important;
    }
    /* Disable hover animations on reduced motion */
    .btn-primary:hover,
    .btn-secondary:hover {
        transform: none !important;
    }
    .service-card:hover {
        transform: none !important;
    }
    /* Ensure smooth scrolling is disabled */
    html {
        scroll-behavior: auto !important;
    }
    /* Pause any CSS-driven video animations */
    video {
        animation: none !important;
        transition: none !important;
    }
}
html {
    -webkit-scroll-behavior: smooth;
    -moz-scroll-behavior: smooth;
    -ms-scroll-behavior: smooth;
    scroll-behavior: smooth;
}
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-family: var(--font-family);
    font-size: 1rem;
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: #111827;
    color: var(--text-primary);
    background: transparent;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-4);
}
/* Universal Section Spacing - Reduced for compact layout */
section {
    padding: var(--spacing-8) 0;
    margin-bottom: var(--spacing-4);
}

section + section {
    margin-top: var(--spacing-2);
}

/* Specific section spacing */
.services-section,
.industries-section,
.cta-section,
.about-section,
.contact-section,
.testimonials-section,
.partners-section,
.overview-section,
.services,
.about,
.partners {
    padding: var(--spacing-8) 0;
    margin: var(--spacing-6) 0;
}

/* Content block spacing */
.section-header {
    margin-bottom: var(--spacing-12);
}

/* Page-specific grids moved to dedicated CSS files */
.features-grid,
.team-grid,
.about-grid,
.contact-grid,
.certification-grid,
.contact-methods {
    margin: var(--spacing-8) 0;
}

/* Additional content spacing */
.hero-stats,
.company-stats,
.feature-list,
.benefit-list {
    margin: var(--spacing-8) 0;
}

.card,
.feature-card,
/* Removed duplicate service-card spacing - handled by Professional Box Container System */

/* Footer gets special spacing */
.footer {
    margin-top: var(--spacing-16);
    padding-top: var(--spacing-16);
}
/* Tablet specific responsive styles */
@media (max-width: 1024px) and (min-width: 769px) {
    .container {
        padding: 0 var(--spacing-6);
        max-width: 90%;
    }
    
    .page-title {
        font-size: var(--font-size-4xl) !important;
        line-height: 1.2;
    }
    
    .page-subtitle {
        font-size: var(--font-size-xl) !important;
        line-height: 1.4;
    }
    
    .section-title {
        font-size: var(--font-size-3xl) !important;
    }
    
    .nav-logo {
        height: 90px; /* Maintain proportion for medium tablets */
        width: auto;
        max-width: 45vw;
    }
    
    .nav-phone {
        font-size: var(--font-size-sm);
    }
    
    .btn-primary {
        padding: var(--spacing-3) var(--spacing-5);
        font-size: var(--font-size-base);
    }
}

/* Mobile responsive styles */
@media (max-width: 768px) {
    .container {
        padding: 0 var(--spacing-4);
    }
    
    .page-title {
        font-size: var(--font-size-2xl) !important;
    }
    
    .page-subtitle {
        font-size: var(--font-size-base) !important;
    }
    
    .section-title {
        font-size: var(--font-size-xl) !important;
    }
}

@media (min-width: 768px) {
    .container {
        padding: 0 var(--spacing-6);
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0 var(--spacing-8);
    }
    
    .page-title {
        font-size: var(--font-size-4xl);
    }
    
    .page-subtitle {
        font-size: var(--font-size-xl);
    }
    
    .section-title {
        font-size: var(--font-size-3xl);
    }
}
/* Buttons */
.btn-primary {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: var(--spacing-3) var(--spacing-6);
    min-height: 44px;
    background-color: var(--brand-orange);
    color: white !important;
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
    border: none;
    cursor: pointer;
}
.btn-primary:hover {
    background-color: #e55a2b;
    color: white !important;
    -webkit-transform: translateY(-1px);
    -moz-transform: translateY(-1px);
    -ms-transform: translateY(-1px);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-md);
}
.btn-compact {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    white-space: nowrap;
    min-width: auto;
    color: white !important;
}
.btn-secondary {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    padding: var(--spacing-3) var(--spacing-6);
    min-height: 44px;
    background-color: transparent;
    color: #111827;
    color: var(--text-primary);
    text-decoration: none;
    border: 2px solid #e5e7eb;
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 0.875rem;
    font-size: var(--font-size-sm);
    -webkit-transition: all 150ms ease-in-out;
    -moz-transition: all 150ms ease-in-out;
    -ms-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
    -webkit-transition: all var(--transition-fast);
    -moz-transition: all var(--transition-fast);
    -ms-transition: all var(--transition-fast);
    transition: all var(--transition-fast);
}
.btn-secondary:hover {
    border-color: #0891b2;
    border-color: var(--primary-color);
    color: #0891b2;
    color: var(--primary-color);
    transform: translateY(-1px);
}
/* Hero specific button styles for contrast on navy background */
.hero .btn-secondary {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.5);
}
.hero .btn-secondary:hover {
    color: #0891b2;
    color: var(--primary-color);
    border-color: #ffffff;
    background-color: #ffffff;
}
.btn-large {
    padding: 1rem 2rem;
    padding: var(--spacing-4) var(--spacing-8);
    min-height: 44px;
    font-size: 1rem;
    font-size: var(--font-size-base);
}
/* ============================================================================
   4. HEADER & NAVIGATION COMPONENTS
   ============================================================================ */

/*
  Professional Site Header & Navigation System
  
  🏗️ STRUCTURE:
  - Fixed header with glassmorphism effect
  - Responsive navigation with mobile hamburger menu
  - Company logo and contact information
  - Smooth scroll effects and transitions
  
  📱 RESPONSIVE FEATURES:
  - Collapsible mobile navigation
  - Touch-friendly button sizes
  - Optimized for both desktop and mobile
*/

/* Header & Navigation */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(16, 185, 129, 0.1);
}

/* Header hide/show states for scroll behavior */
.header.header-hidden {
    transform: translateY(-100%);
}

.header.header-visible {
    transform: translateY(0);
}

/* Store hero section styling - no additional padding needed with global main padding */
.store-hero {
    /* padding-top removed - handled by global main padding */
}
/* Header with white background */
.header.on-dark {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}
/* Header on light background - solid white */
.header.on-light {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}
.nav {
    padding: 0.5rem 0;
    padding: var(--spacing-2) 0;
}
.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    padding: 0 var(--spacing-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 80px; /* Ensure consistent header height */
    position: relative; /* For proper positioning context */
}
.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    gap: var(--spacing-3);
    font-weight: 700;
    font-size: 1.25rem;
    font-size: var(--font-size-xl);
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}
/* Ensure brand colors follow header theme */
.header.on-dark .nav-brand {
    color: #111827;
    color: var(--text-primary);
}
.header.on-light .nav-brand {
    color: #111827;
    color: var(--text-primary);
}
.nav-logo {
    height: 100px; /* Tablet size: 768-1023px */
    width: auto;
}
.nav-brand-text {
    /* Default text styling inherited from .nav-brand */
}
.nav-brand-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    gap: var(--spacing-3);
    text-decoration: none;
    color: inherit;
    transition: opacity 150ms ease-in-out;
    transition: opacity var(--transition-fast);
}
.nav-brand-link:hover {
    opacity: 0.8;
}
/* Responsive logo sizing - improved scalability */
.nav-logo {
    height: 100px; /* Base tablet size: 768-1023px */
    width: auto;
    max-width: none; /* Allow natural width scaling */
    object-fit: contain; /* Maintain aspect ratio */
    transition: all 0.3s ease; /* Smooth scaling transitions */
    vertical-align: middle; /* Ensure proper alignment with adjacent text */
    display: block; /* Prevent inline spacing issues */
}

/* Large desktop responsive logo sizing */
@media (min-width: 1200px) {
    .nav-logo {
        height: 130px; /* Large desktop size - balanced for visibility without overlap */
    }
}

/* Desktop responsive logo sizing */
@media (min-width: 1024px) and (max-width: 1199px) {
    .nav-logo {
        height: 120px; /* Standard desktop size - balanced for visibility without overlap */
    }
}

/* Tablet responsive logo sizing */
@media (min-width: 768px) and (max-width: 1023px) {
    .nav-logo {
        height: 110px; /* Tablet size - balanced for visibility without overlap */
    }
}

/* Mobile responsive logo sizing - prevent squashing */
@media (max-width: 767px) {
    .nav-logo {
        height: 80px; /* Smaller mobile size - balanced for visibility without overlap */
        max-width: 60vw; /* Prevent logo from taking too much width */
        min-height: 60px; /* Maintain minimum readable size */
    }
}

/* Small mobile responsive logo sizing */
@media (max-width: 480px) {
    .nav-logo {
        height: 70px; /* Very small mobile - balanced for visibility without overlap */
        max-width: 55vw; /* Ensure menu has space */
        min-height: 55px; /* Maintain legibility */
    }
}

/* Extra small mobile devices */
@media (max-width: 360px) {
    .nav-logo {
        height: 60px;
        max-width: 50vw;
        min-height: 50px;
    }
}
/* Removed redundant 480px media query - mobile sizing now handled by 767px breakpoint */
.nav-menu {
    display: none;
    list-style: none;
    gap: 2rem;
    gap: var(--spacing-8);
    align-items: center;
}
.nav-link {
    color: var(--brand-teal);
    text-decoration: none;
    font-weight: 500;
    transition: all var(--transition-normal);
    position: relative;
}
.nav-link {
    color: var(--text-primary);
}

.nav-link:hover {
    color: var(--brand-teal);
}

.nav-link.active {
    color: #ff6b35 !important;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #ff6b35;
    border-radius: 1px;
}

/* Prevent underline on Services dropdown link - high specificity */
.nav-item.nav-dropdown .nav-dropdown-container .nav-link.active::after,
.nav-item.nav-dropdown .nav-dropdown-container .nav-link:hover::after,
.nav-item.nav-dropdown .nav-dropdown-container .nav-link::after {
    display: none !important;
    content: none !important;
}
.nav-contact {
    display: flex;
    align-items: center;
    gap: 1rem;
    gap: var(--spacing-4);
    position: relative;
    z-index: 100;
}
.nav-phone {
    font-weight: 500;
    transition: color 0.3s ease;
}
.header.on-dark .nav-phone {
    color: rgba(255, 255, 255, 0.8);
}
.header.on-light .nav-phone {
    color: #6b7280;
    color: var(--text-secondary);
}
.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-2);
    width: 48px; /* Improved touch target */
    height: 48px;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    position: relative;
    z-index: 1001; /* Ensure toggle stays above other elements */
}

.nav-toggle:hover {
    background-color: rgba(8, 145, 178, 0.1);
    transform: scale(1.05);
}

.nav-toggle:focus {
    outline: 2px solid rgba(8, 145, 178, 0.5);
    outline-offset: 2px;
}
.hamburger {
    width: 24px;
    height: 2px;
    background-color: #D4571F;
    transition: all 0.3s ease;
    display: block;
}
.header.on-light .hamburger {
    background-color: #D4571F;
}
.nav-toggle.active .hamburger:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle.active .hamburger:nth-child(2) {
    opacity: 0;
}
.nav-toggle.active .hamburger:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}
@media (min-width: 768px) {
    .nav-menu {
        display: flex;
    }
    .nav-contact {
        display: flex !important;
    }
    .nav-toggle {
        display: none;
    }
}
/* Enhanced Mobile Menu - Scalable & Responsive */
.nav-menu.mobile-open {
    display: flex;
    position: fixed;
    top: var(--header-height, 120px);
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100vh - var(--header-height, 120px));
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    padding: var(--spacing-4) var(--spacing-6);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    border-top: 1px solid var(--border-color);
    z-index: 10001;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
}

/* Use dynamic viewport height on supporting browsers */
@supports (height: 100dvh) {
    .nav-menu.mobile-open {
        height: calc(100dvh - var(--header-height, 120px));
    }
}

/* Lock body scroll when mobile menu is open */
body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* Prevent header transform while menu is open */
body.menu-open .header {
    transform: none !important;
}

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

/* Ensure nav-contact and nav-phone are always hidden in mobile menu */
.nav-menu.mobile-open .nav-contact,
.nav-menu.mobile-open .nav-phone {
    display: none !important;
}
/* Enhanced mobile touch targets - scalable across devices */
@media (max-width: 767px) {
    .nav-menu.mobile-open {
        padding: var(--spacing-3) var(--spacing-5);
    }
    
    .nav-menu.mobile-open .nav-item {
        margin: var(--spacing-1) 0;
        border-radius: var(--radius-sm);
        overflow: hidden; /* Contain hover effects */
    }
    
    /* Allow dropdown submenu to be visible when expanded */
    .nav-menu.mobile-open .nav-item.nav-dropdown.open {
        overflow: visible;
    }
    
    .nav-menu.mobile-open .nav-link {
        display: flex;
        padding: var(--spacing-4) var(--spacing-3);
        min-height: 48px; /* Improved touch target size */
        align-items: center;
        border-radius: var(--radius-sm);
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        text-decoration: none;
        position: relative;
        z-index: 10;
        touch-action: manipulation;
        font-size: var(--font-size-base);
        font-weight: 500;
        color: var(--text-primary);
        user-select: none; /* Prevent text selection on mobile */
    }
    
    .nav-menu.mobile-open .nav-link:hover,
    .nav-menu.mobile-open .nav-link:focus {
        background-color: rgba(8, 145, 178, 0.08);
        transform: translateX(4px);
        outline: none;
    }
    
    .nav-menu.mobile-open .nav-link:active {
        background-color: rgba(8, 145, 178, 0.15);
        transform: translateX(4px) scale(0.98);
        transition: all 0.1s ease;
    }
}

/* Small mobile optimizations */
@media (max-width: 480px) {
    .nav-menu.mobile-open {
        padding: var(--spacing-2) var(--spacing-4);
    }
    
    .nav-menu.mobile-open .nav-link {
        min-height: 52px; /* Larger touch targets on small screens */
        font-size: 1.1rem; /* Slightly larger text for better readability */
    }
}

/* Extra small mobile optimizations */
@media (max-width: 360px) {
    .nav-menu.mobile-open {
        max-height: calc(100vh - 55px);
    }
    
    .nav-menu.mobile-open .nav-link {
        min-height: 56px; /* Even larger touch targets */
        padding: var(--spacing-5) var(--spacing-3);
    }
}
.header.on-dark .nav-menu.mobile-open {
    background: #1a1f2e;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.header.on-dark .nav-menu.mobile-open .nav-link {
    color: rgba(255, 255, 255, 0.9);
}
/* Dropdown Styles */
.nav-dropdown {
    position: relative;
    height: auto;
}

.nav-dropdown-container {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    gap: var(--spacing-1);
    height: auto;
}

.nav-dropdown-container .nav-link {
    position: static;
}
.nav-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #10b981;
    color: var(--primary-color);
    padding: 0.25rem;
    padding: var(--spacing-1);
    border-radius: 0.375rem;
    border-radius: var(--radius-sm);
    transition: color 0.2s ease, background 0.2s ease;
    width: 24px;
    height: 24px;
}
.header.on-light .nav-dropdown-toggle {
    color: #10b981;
    color: var(--primary-color);
}
.nav-dropdown-toggle:hover {
    color: #67e8f9;
    background: rgba(255, 255, 255, 0.1);
}
.header.on-light .nav-dropdown-toggle:hover {
    color: #0891b2;
    color: var(--primary-color);
    background: #f8fafc;
    background: var(--accent-color);
}
.dropdown-arrow {
    transition: transform 0.25s ease;
}
.nav-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}
.nav-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 5px);
    left: 0;
    background: #ffffff;
    border-radius: 0.5rem;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    border: 1px solid #e5e7eb;
    border: 1px solid var(--border-color);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    z-index: 1000;
    list-style: none;
    padding: var(--spacing-2) 0;
    margin: 0;
    pointer-events: none;
}
.header.on-dark .nav-dropdown-menu {
    background: #1a1f2e;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.nav-dropdown-menu .nav-link {
    display: block;
    padding: var(--spacing-3) var(--spacing-4);
    color: var(--text-secondary);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: var(--radius-sm);
}
.header.on-dark .nav-dropdown-menu .nav-link {
    color: rgba(255, 255, 255, 0.8);
}
.header.on-dark .nav-dropdown-menu .nav-link:hover {
    color: #67e8f9;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 var(--spacing-2);
    white-space: nowrap;
}
.nav-dropdown-menu .nav-link:hover {
    background: var(--accent-color);
    color: var(--brand-teal);
}
.nav-dropdown-menu .nav-link::after {
    display: none;
}
/* Mobile dropdown adjustments - Enhanced for visibility and scrollability */
@media (max-width: 767px) {
    /* Ensure nav dropdown item has proper spacing */
    .nav-dropdown {
        margin-bottom: var(--spacing-2);
    }
    
    .nav-dropdown-container {
        width: 100%;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
    }
    .nav-dropdown-container .nav-link {
        flex: 1;
        justify-content: space-between;
        padding-right: var(--spacing-2) !important;
    }
    .nav-dropdown-toggle {
        min-width: 44px;
        min-height: 44px;
        padding: var(--spacing-3);
        flex-shrink: 0;
        z-index: 10;
    }
    
    /* Mobile menu must be scrollable */
    .nav-menu.mobile-open {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain;
    }
    
    /* Dropdown menu - initially hidden with no space */
    .nav-dropdown-menu {
        position: static !important;
        opacity: 0;
        visibility: hidden;
        transform: none;
        box-shadow: none;
        border: none;
        background: transparent;
        margin-left: var(--spacing-4);
        margin-top: 0;
        margin-bottom: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease, padding 0.3s ease, overflow 0s 0.3s;
        width: calc(100% - var(--spacing-4));
        display: block;
    }
    
    /* Dropdown menu when open - expands with proper spacing */
    .nav-dropdown.open .nav-dropdown-menu {
        opacity: 1 !important;
        visibility: visible !important;
        max-height: 1000px !important;
        margin-top: var(--spacing-2) !important;
        margin-bottom: var(--spacing-2) !important;
        padding: var(--spacing-1) 0 !important;
        overflow: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease, padding 0.3s ease, overflow 0s !important;
    }
    
    /* Ensure dropdown items are visible and clickable */
    .nav-dropdown.open .nav-dropdown-menu .nav-link {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    .nav-dropdown-toggle::after {
        display: none;
    }
    
    /* Individual dropdown link styling */
    .nav-dropdown-menu .nav-link {
        margin: var(--spacing-1) 0;
        padding: var(--spacing-3) var(--spacing-4);
        min-height: 44px;
        display: flex !important;
        align-items: center;
        border-radius: var(--radius-sm);
        color: #CC5500 !important;
        background: rgba(8, 145, 178, 0.05);
        width: 100%;
        box-sizing: border-box;
    }
    .nav-dropdown-menu .nav-link:hover,
    .nav-dropdown-menu .nav-link:active {
        background: rgba(8, 145, 178, 0.15) !important;
        color: #CC5500 !important;
    }
}
/* Hero Section */
.hero {
    padding: calc(80px + var(--spacing-20)) 0 calc(var(--spacing-20) * 2);
    position: relative;
    overflow: hidden;
}

/* Hero background for all pages - clean white */
.hero:not(.home-hero) {
    background: transparent;
}
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none;
    z-index: 1;
}
/* Professional PCB Circuit Board Background */
/* PCB circuit elements removed for cleaner professional look */
/* PCB styles removed */
/* Ensure navigation never gets animation effects */
.header,
.nav-menu,
.nav-link,
.nav-dropdown,
.nav-dropdown-menu,
.nav-toggle {
    animation: none !important;
    transform: none !important;
}
.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-4);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-12);
    align-items: center;
    position: relative;
    z-index: 2;
}
.hero-content {
    text-align: center;
    position: relative;
    z-index: 3;
}
.hero-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
    margin-bottom: var(--spacing-6);
    position: relative;
    overflow: hidden;
}
/* Responsive hero title sizing */
@media (min-width: 480px) {
    .hero-title {
        font-size: var(--font-size-4xl);
    }
}
.hero-title-content {
    display: block;
    position: relative;
}
@keyframes robotic-pulse {
    0%, 100% {
        box-shadow: 0 0 5px rgba(8, 145, 178, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(8, 145, 178, 0.6), 0 0 30px rgba(103, 232, 249, 0.4);
    }
}
@keyframes slide-in-left {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes slide-in-right {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes fade-in-up {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fade-in-down {
    0% {
        transform: translateY(-30px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes zoom-in {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes rotate-in {
    0% {
        transform: rotate(-180deg) scale(0);
        opacity: 0;
    }
    100% {
        transform: rotate(0) scale(1);
        opacity: 1;
    }
}
/* Letter Animation Classes */
/* Removed complex letter animations */
/* Training System Grading and Celebration Styles */
.grading-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.grading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}
.grading-content {
    position: relative;
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: var(--spacing-8);
    max-width: 500px;
    width: 90%;
    margin: 0 var(--spacing-4);
    box-shadow: var(--shadow-xl);
    text-align: center;
    transform: scale(0.9);
    animation: modal-enter 0.3s ease-out forwards;
}
@keyframes modal-enter {
    to {
        transform: scale(1);
    }
}
.grading-header {
    margin-bottom: var(--spacing-6);
}
.grading-header h3 {
    color: var(--text-primary);
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-4);
}
.success-icon, .fail-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-2);
}
.grading-score {
    margin-bottom: var(--spacing-6);
}
.score-display {
    margin-bottom: var(--spacing-4);
}
.score-number {
    display: block;
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--spacing-2);
}
.grading-modal.passed .score-number {
    color: #10b981;
}
.grading-modal.failed .score-number {
    color: #ef4444;
}
.score-label {
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    font-weight: 500;
}
.pass-status {
    display: inline-block;
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.pass-status.passed {
    background: #d1fae5;
    color: #065f46;
}
.pass-status.failed {
    background: #fee2e2;
    color: #991b1b;
}
.grading-message {
    margin-bottom: var(--spacing-6);
    color: var(--text-secondary);
}
.grading-actions {
    display: flex;
    gap: var(--spacing-3);
    justify-content: center;
    flex-wrap: wrap;
}
/* Celebration Effects */
.celebration-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
    overflow: hidden;
}
.celebration-message {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3rem;
    font-weight: 700;
    color: #f59e0b;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    animation: celebration-bounce 2s ease-out;
}
.celebration-subtitle {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-top: var(--spacing-2);
    animation: celebration-fade-in 1s ease-out 0.5s both;
}
@keyframes celebration-bounce {
    0% {
        transform: translateX(-50%) scale(0.5) translateY(50px);
        opacity: 0;
    }
    50% {
        transform: translateX(-50%) scale(1.2) translateY(-20px);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) scale(1) translateY(0);
        opacity: 1;
    }
}
@keyframes celebration-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes confetti-fall {
    0% {
        transform: translateY(-10px) rotate(0deg);
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}
/* Training System Responsive Scaling Fixes */
.training-system {
    padding: var(--spacing-8) 0;
}
.training-system .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-4);
}
.question-container {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-6);
    box-shadow: var(--shadow-sm);
}
.question-header {
    margin-bottom: var(--spacing-4);
}
.question-text {
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.6;
}
.question-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}
.option {
    display: flex;
    align-items: center;
    padding: var(--spacing-4);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: var(--surface);
}
.option:hover {
    border-color: var(--primary-color);
    background: var(--surface-hover);
}
.option.correct {
    border-color: #10b981;
    background: #d1fae5;
    color: #065f46;
}
.option.incorrect {
    border-color: #ef4444;
    background: #fee2e2;
    color: #991b1b;
}
.fill-in-input {
    width: 100%;
    padding: var(--spacing-3);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    transition: border-color var(--transition-fast);
}
.fill-in-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}
.question-feedback {
    margin-top: var(--spacing-4);
    padding: var(--spacing-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}
.question-feedback.correct {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}
.question-feedback.incorrect {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}
/* Chapter Content Scaling */
.chapter-container {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-6);
}
.chapter-header {
    margin-bottom: var(--spacing-8);
}
.chapter-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-4);
}
.learning-objectives {
    background: var(--accent-color);
    padding: var(--spacing-6);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--primary-color);
}
.chapter-content-text {
    font-size: var(--font-size-base);
    line-height: 1.8;
    color: var(--text-primary);
    margin-bottom: var(--spacing-8);
}
.chapter-content-text h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: var(--spacing-6) 0 var(--spacing-4) 0;
}
.chapter-content-text h4 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: var(--spacing-4) 0 var(--spacing-3) 0;
}
.chapter-questions {
    border-top: 2px solid var(--border-color);
    padding-top: var(--spacing-8);
}
.chapter-questions h4 {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-4);
}
/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .grading-content {
        padding: var(--spacing-6);
        margin: 0 var(--spacing-3);
    }
    .score-number {
        font-size: 3rem;
    }
    .celebration-message {
        font-size: 2rem;
    }
    .celebration-subtitle {
        font-size: 1.2rem;
    }
    .chapter-container {
        padding: var(--spacing-4);
    }
    .chapter-title {
        font-size: var(--font-size-2xl);
    }
    .question-container {
        padding: var(--spacing-4);
    }
    .question-text {
        font-size: var(--font-size-base);
    }
    .grading-actions {
        flex-direction: column;
        align-items: center;
    }
}
.hero-subtitle {
    font-size: var(--font-size-xl);
    color: #ffffff;
    margin-bottom: var(--spacing-8);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.hero-cta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    align-items: center;
}
.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-visual {
    width: 400px;
    height: 300px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    background: var(--text-primary);
}
.hero-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
    border-radius: var(--radius-xl);
}
/* Hero Carousel Styles */
.hero-carousel {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 300px;
    /* Fixed height for consistent display */
}
.embla {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-xl);
    overflow: hidden;
    position: relative;
}
.embla__container {
    display: flex;
    height: 100%;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.embla__slide {
    flex: 0 0 100%;
    min-width: 0;
    position: relative;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}
.hero-image-item {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: var(--radius-xl);
    transition: transform 0.3s ease-in-out;
    background: var(--surface);
}
.hero-image-item:hover {
    transform: scale(1.02);
}
/* Carousel Navigation */
.embla__prev,
.embla__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 10;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0.8;
}
.embla__prev {
    left: var(--spacing-4);
}
.embla__next {
    right: var(--spacing-4);
}
.embla__prev:hover,
.embla__next:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    opacity: 1;
}
.embla__prev:disabled,
.embla__next:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: translateY(-50%) scale(0.9);
}
/* Carousel Dots */
.embla__dots {
    display: flex;
    justify-content: center;
    gap: var(--spacing-3);
    position: absolute;
    bottom: var(--spacing-4);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    padding: var(--spacing-2);
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.embla__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
}
.embla__dot:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.2);
}
.embla__dot--selected {
    background: var(--brand-orange);
    transform: scale(1.4);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}
@media (min-width: 768px) {
    .hero-container {
        grid-template-columns: 1fr 1fr;
        text-align: left;
    }
    .hero-content {
        text-align: left;
    }
    .hero-subtitle {
        margin-left: 0;
        margin-right: 0;
    }
    .hero-cta {
        flex-direction: row;
        justify-content: flex-start;
    }
    .hero-title {
        font-size: var(--font-size-5xl);
    }
}
@media (max-width: 479px) {
    .hero-title {
        font-size: 1.75rem; /* Even smaller for very small screens */
        line-height: 1.2;
    }
}
/* Section Styles */
.section-header {
    text-align: center;
    margin-bottom: var(--spacing-16);
}
.section-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-4);
}
.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}
/* Services Section */
.services {
    padding: var(--spacing-20) 0;
    position: relative;
    overflow: hidden;
}
.services::before {
    content: '';
    position: absolute;
    top: 5%;
    right: 5%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--primary-color) 0%, transparent 50%);
    border-radius: 50%;
    opacity: 0.03;
    animation: pulse 20s ease-in-out infinite;
    z-index: 1;
}
.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
}
/* Removed duplicate service-card definition - using Professional Box Container System instead */
/* Service icon styles moved to css/services.css and css/service-pages.css */
/* Contact Icons */
.contact-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--spacing-4);
    color: white;
    flex-shrink: 0;
}
.contact-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}
/* Clickable Contact Method Cards */
.contact-method-clickable {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-fast);
    border-radius: 12px;
    padding: 0.5rem;
    margin: -0.5rem;
}
.contact-method-clickable:hover {
    background: rgba(8, 145, 178, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(8, 145, 178, 0.15);
}
.contact-method-clickable:active {
    transform: translateY(0);
}
.contact-method-clickable .contact-details h3 {
    transition: color var(--transition-fast);
}
.contact-method-clickable:hover .contact-details h3 {
    color: var(--primary);
}
/* Service styles moved to css/services.css and css/service-pages.css */
/* Modern About Page Styles */
.company-intro {
    padding: var(--spacing-16) 0 var(--spacing-8) 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-16);
    align-items: center;
}

.intro-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-4);
    background: linear-gradient(135deg, var(--brand-teal), var(--primary-light));
    color: white;
    border-radius: 50px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--spacing-6);
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);
}

.intro-title {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    color: #111827;
    line-height: 1.1;
    margin-bottom: var(--spacing-6);
}

.intro-text {
    font-size: var(--font-size-lg);
    color: #374151;
    line-height: 1.7;
    margin-bottom: var(--spacing-8);
}

.intro-highlights {
    margin-bottom: var(--spacing-8);
}

.highlight-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.highlight-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(8, 145, 178, 0.2);
}

.highlight-content h4 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: #111827;
    margin-bottom: var(--spacing-2);
}

.highlight-content p {
    color: #374151;
    line-height: 1.6;
}

.intro-cta {
    display: flex;
    gap: var(--spacing-4);
    flex-wrap: wrap;
}

.intro-cta .btn-outline {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-3) var(--spacing-6);
    min-height: 44px;
    background: transparent;
    color: var(--brand-teal);
    border: 2px solid var(--brand-teal);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all 0.3s ease;
}

.intro-cta .btn-outline:hover {
    background: var(--brand-teal);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-3) var(--spacing-6);
    min-height: 44px;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(8, 145, 178, 0.3);
}

.intro-visual {
    position: relative;
}

.visual-container {
    position: relative;
    width: 100%;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

/* Ensure the visual container has proper positioning for absolutely positioned image */
.company-intro .visual-container {
    position: relative;
    min-height: 500px;
}

/* Contact form container styling */
.contact-form-container {
    position: relative;
    z-index: 10;
    margin-top: var(--spacing-8);
    padding: var(--spacing-4);
}

.visual-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    opacity: 0.1;
}

.floating-elements {
    position: absolute;
    inset: 0;
}

.float-element {
    position: absolute;
    width: 60px;
    height: 60px;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    animation: float 6s ease-in-out infinite;
}

.element-1 {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.element-2 {
    top: 60%;
    right: 20%;
    animation-delay: 1.5s;
}

.element-3 {
    bottom: 30%;
    left: 30%;
    animation-delay: 3s;
}

.element-4 {
    top: 40%;
    left: 60%;
    animation-delay: 4.5s;
}

/* About image styling */
.about-image-main {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-xl);
}

.company-metrics {
    position: absolute;
    bottom: var(--spacing-6);
    right: var(--spacing-6);
    display: flex;
    gap: var(--spacing-4);
}

.metric {
    background: transparent;
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.metric-value {
    display: block;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--primary-color);
}

.metric-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Hero Stats */
.hero-stats {
    display: flex;
    gap: var(--spacing-8);
    margin-top: var(--spacing-8);
    justify-content: center;
}

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

.stat-number {
    display: block;
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: #10b981;
    line-height: 1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.stat-label {
    font-size: var(--font-size-sm);
    color: #10b981;
    margin-top: var(--spacing-2);
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    display: inline-block;
}

.hero-badge {
    background: var(--brand-teal) !important;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: 50px;
    margin-bottom: var(--spacing-6);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.badge-text {
    font-size: var(--font-size-sm);
    color: white;
    font-weight: 500;
}

.badge-highlight {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: white;
    background: rgba(255, 255, 255, 0.15);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    margin-left: var(--spacing-1);
}

/* Modern Timeline */
.company-timeline {
    padding: var(--spacing-20) 0;
    background: #f8fafc;
    position: relative;
}

.timeline-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-4);
}

.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, var(--brand-teal), var(--primary-light));
    transform: translateX(-50%);
    border-radius: 2px;
    z-index: 1;
}

.timeline-items {
    position: relative;
    z-index: 2;
}

.timeline-item {
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-20);
    position: relative;
    align-items: start;
    min-height: 180px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-marker {
    grid-column: 2;
    width: 120px;
    height: 120px;
    background: white;
    border: 6px solid var(--brand-teal);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-teal);
    font-weight: 800;
    font-size: var(--font-size-xl);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    z-index: 3;
    position: relative;
    align-self: center;
}

.timeline-content {
    background: white;
    padding: var(--spacing-8);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    border: 1px solid rgba(16, 185, 129, 0.1);
    transition: all 0.3s ease;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.timeline-content:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.timeline-item:nth-child(odd) .timeline-content {
    grid-column: 1;
    text-align: right;
}

.timeline-item:nth-child(even) .timeline-content {
    grid-column: 3;
    text-align: left;
}

.timeline-year {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: var(--spacing-2);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.timeline-content h3 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: #111827;
    margin-bottom: var(--spacing-3);
}

.timeline-content p {
    color: #374151;
    line-height: 1.6;
    margin-bottom: var(--spacing-4);
}

.timeline-tags {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.tag {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: 50px;
    font-size: var(--font-size-xs);
    font-weight: 600;
}

/* Modern Team Section */
.team-section {
    padding: var(--spacing-8) 0;
    background: #ffffff;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-16);
}

.team-member {
    background: transparent;
    border-radius: var(--radius-xl);
    padding: var(--spacing-8);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #f1f5f9;
}

.team-member:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.member-avatar {
    position: relative;
    margin-bottom: var(--spacing-6);
}

.avatar-placeholder {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-3);
}

.avatar-icon {
    font-size: 2rem;
    color: white;
}

.member-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
}

.status-indicator {
    color: #10b981;
    font-size: 0.8rem;
}

.status-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.member-name {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: #111827;
    margin-bottom: var(--spacing-2);
    text-align: center;
}

.member-role {
    font-size: var(--font-size-base);
    color: var(--primary-color);
    font-weight: 600;
    text-align: center;
    margin-bottom: var(--spacing-4);
}

.member-bio {
    color: #374151;
    line-height: 1.6;
    text-align: center;
    margin-bottom: var(--spacing-6);
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.member-skills {
    display: flex;
    gap: var(--spacing-2);
    justify-content: center;
    flex-wrap: wrap;
}

.skill-tag {
    background: #f1f5f9;
    color: #111827;
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: 50px;
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.team-cta {
    text-align: center;
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    padding: var(--spacing-12);
    border-radius: var(--radius-xl);
}

.team-cta h3 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: #111827;
    margin-bottom: var(--spacing-4);
}

.team-cta p {
    color: #374151;
    margin-bottom: var(--spacing-6);
}

/* Modern Values Section */
.values-section {
    padding: var(--spacing-8) 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-8);
}

.value-card {
    background: transparent;
    padding: var(--spacing-8);
    border-radius: var(--radius-xl);
    text-align: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #f1f5f9;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.value-icon {
    margin-bottom: var(--spacing-6);
}

.icon-bg {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 2rem;
    color: white;
    box-shadow: 0 8px 30px rgba(8, 145, 178, 0.3);
}

.value-card h3 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: #111827;
    margin-bottom: var(--spacing-4);
}

.value-card p {
    color: #374151;
    line-height: 1.6;
    margin-bottom: var(--spacing-6);
}

.value-stats {
    text-align: center;
}

.stat-highlight {
    background: linear-gradient(135deg, var(--brand-teal), var(--primary-light));
    color: white;
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: 50px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    display: inline-block;
}

/* Modern Industries Section */
.industries-modern {
    padding: var(--spacing-8) 0;
    background: #ffffff;
}

.industries-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-12);
    align-items: start;
}

.industry-spotlight {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    padding: var(--spacing-12);
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
}

.spotlight-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-6);
}

.industry-spotlight h3 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--spacing-4);
}

.industry-spotlight p {
    font-size: var(--font-size-lg);
    line-height: 1.6;
    margin-bottom: var(--spacing-8);
    opacity: 0.9;
}

.spotlight-features {
    margin-bottom: var(--spacing-8);
}

.feature-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}

.feature-icon {
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: white;
}

.spotlight-stats {
    display: flex;
    gap: var(--spacing-6);
}

.spotlight-stats .stat-item {
    text-align: left;
}

.spotlight-stats .stat-number {
    font-size: var(--font-size-2xl);
    font-weight: 800;
}

.spotlight-stats .stat-label {
    font-size: var(--font-size-sm);
    opacity: 0.8;
}

.industries-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
}

.industry-card-modern {
    background: transparent;
    padding: var(--spacing-6);
    border-radius: var(--radius-lg);
    border: 1px solid #f1f5f9;
    transition: all 0.3s ease;
}

.industry-card-modern:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.card-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
}

.card-header h4 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: #111827;
}

.industry-card-modern p {
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: var(--spacing-4);
}

.card-metrics {
    text-align: right;
}

.metric {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: 50px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    display: inline-block;
}

/* Modern CTA Section */
.cta-modern {
    padding: var(--spacing-24) 0;
    background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

.cta-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-12);
    align-items: center;
}

.cta-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: 50px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--spacing-6);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.cta-modern h2 {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    margin-bottom: var(--spacing-6);
    line-height: 1.1;
}

.cta-modern p {
    font-size: var(--font-size-lg);
    opacity: 0.9;
    line-height: 1.6;
    margin-bottom: var(--spacing-8);
}

.cta-features {
    display: flex;
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-8);
    flex-wrap: wrap;
}

.cta-feature {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.cta-feature .feature-icon {
    font-size: 1.2rem;
}

.cta-actions {
    display: flex;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-8);
    flex-wrap: wrap;
}

.btn-large {
    padding: var(--spacing-4) var(--spacing-8);
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.btn-icon {
    margin-left: var(--spacing-2);
}

.btn-secondary .btn-icon {
    margin-left: 0;
    margin-right: var(--spacing-2);
}

.trust-indicators {
    display: flex;
    gap: var(--spacing-6);
    flex-wrap: wrap;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    opacity: 0.8;
}

.trust-icon {
    font-size: 1.2rem;
}

.trust-text {
    font-size: var(--font-size-sm);
}

.cta-visual {
    position: relative;
    height: 400px;
}

.visual-bg-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.2), rgba(16, 185, 129, 0.2));
    border-radius: var(--radius-xl);
}

.floating-icons {
    position: absolute;
    inset: 0;
}

.float-icon {
    position: absolute;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    animation: float 8s ease-in-out infinite;
}

.icon-1 {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.icon-2 {
    top: 60%;
    right: 20%;
    animation-delay: 2s;
}

.icon-3 {
    bottom: 30%;
    left: 30%;
    animation-delay: 4s;
}

.icon-4 {
    top: 40%;
    right: 40%;
    animation-delay: 6s;
}

/* Section Badges - Glass Effect */
.section-badge {
    background: var(--brand-teal);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: 50px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--spacing-4);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

/* Responsive Design */
@media (max-width: 768px) {
    .intro-grid,
    .industries-showcase,
    .cta-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }
    
    .hero-stats {
        flex-direction: column;
        gap: var(--spacing-4);
    }
    
    .timeline-line {
        left: 40px;
    }
    
    .timeline-item {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding-left: 100px;
        margin-bottom: var(--spacing-12);
        min-height: auto;
    }
    
    .timeline-marker {
        position: absolute !important;
        left: 0;
        top: 20px;
        width: 80px;
        height: 80px;
        grid-column: unset;
    }
    
    .timeline-content {
        grid-column: 1 !important;
        text-align: left !important;
        margin: 0 !important;
        min-height: auto;
    }
    
    .intro-cta {
        flex-direction: column;
    }
    
    .cta-actions {
        flex-direction: column;
    }
    
    .cta-features,
    .trust-indicators {
        justify-content: center;
    }
}

/* About Section */
.about {
    padding: var(--spacing-20) 0;
    background: transparent;
    position: relative;
    overflow: hidden;
}
.about::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 8%;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, var(--primary-light) 0%, transparent 40%);
    border-radius: 50%;
    opacity: 0.05;
    animation: float 25s ease-in-out infinite;
    z-index: 1;
}
.about::after {
    content: '';
    position: absolute;
    bottom: 10%;
    right: 10%;
    width: 100px;
    height: 100px;
    background: linear-gradient(60deg, var(--primary-color) 0%, transparent 60%);
    border-radius: 40%;
    opacity: 0.04;
    animation: floatReverse 22s ease-in-out infinite;
    z-index: 1;
}
.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-12);
    align-items: center;
}
.about-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-6);
}
.about-description {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-6);
    line-height: 1.7;
    font-size: var(--font-size-lg);
}
.about-qualities {
    margin-bottom: var(--spacing-8);
}
.qualities-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-4);
}
.qualities-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-2);
}
.qualities-list li {
    color: var(--text-secondary);
    position: relative;
    padding-left: var(--spacing-6);
}
.qualities-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}
.vision-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-4);
}
.vision-description {
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: var(--font-size-lg);
}
.about-image {
    display: flex;
    justify-content: center;
    align-items: center;
}
.about-visual {
    width: 100%;
    max-width: 500px;
    height: 400px;
    background: linear-gradient(135deg, var(--secondary-color), var(--text-primary));
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    position: relative;
    overflow: hidden;
}
.about-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.05) 50%, transparent 70%);
}
@media (min-width: 768px) {
    .about-grid {
        grid-template-columns: 1fr 1fr;
    }
    .qualities-list {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* Partners Section */
.partners {
    padding: var(--spacing-20) 0;
    background-color: var(--surface);
}
.partners-carousel {
    overflow: visible;
    position: relative;
}
.partners-track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-16);
    max-width: 900px;
    margin: 0 auto;
}
.partner-logo {
    flex-shrink: 0;
    background-color: transparent;
    border: none;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-8);
    transition: all var(--transition-fast);
}
.partner-logo:hover {
    transform: translateY(-2px);
}
.partner-image-wrapper {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-4);
}
.partner-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    filter: grayscale(0%);
}
.partner-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    margin-top: var(--spacing-3);
    padding-top: var(--spacing-3);
    border-top: 2px solid var(--border-color);
    width: 100%;
}
.partner-placeholder {
    color: var(--text-light);
    font-weight: 500;
}
/* CTA Section */
.cta {
    padding: var(--spacing-20) 0;
    background: transparent;
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
}
.cta::before {
    content: '';
    position: absolute;
    top: 5%;
    left: 15%;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, var(--primary-light) 0%, transparent 50%);
    border-radius: 50%;
    opacity: 0.1;
    animation: drift 30s ease-in-out infinite;
    z-index: 1;
}
.cta::after {
    content: '';
    position: absolute;
    bottom: 8%;
    right: 20%;
    width: 120px;
    height: 40px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    opacity: 0.05;
    animation: shimmer 8s ease-in-out infinite;
    z-index: 1;
}
.cta-content {
    text-align: center;
}
.cta-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    margin-bottom: var(--spacing-6);
    text-align: center;
}
.cta-description {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-8);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
    text-align: center;
}
.cta-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    align-items: center;
    margin-bottom: 4rem;
}
.cta-contact {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    align-items: center;
}
.cta-phone,
.cta-email {
    opacity: 0.9;
    font-weight: 500;
}
@media (min-width: 768px) {
    .cta-buttons {
        flex-direction: row;
        justify-content: center;
    }
    .cta-contact {
        flex-direction: row;
        gap: var(--spacing-4);
    }
    .cta-contact::before {
        content: '|';
        opacity: 0.5;
    }
}
/* Footer */
.footer {
    background-color: var(--secondary-color);
    color: white;
    padding: var(--spacing-16) 0 var(--spacing-8);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-8);
}

/* Desktop: 4-column layout */
@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1.5fr;
        gap: var(--spacing-12);
        align-items: start;
    }
}

/* Mobile: Everything centered */
@media (max-width: 767px) {
    .footer-grid {
        text-align: center;
        grid-template-columns: 1fr;
    }
    
    .footer-brand,
    .footer-links,
    .footer-contact {
        text-align: center;
    }
    
    .footer-certifications,
    .footer-social {
        text-align: center;
    }
    
    .footer-bottom {
        text-align: center;
    }
    
    .footer-legal {
        justify-content: center;
        text-align: center;
    }
}
.footer-brand {
    margin-bottom: var(--spacing-6);
    text-align: center;
}
.footer-logo {
    height: 140px;
    width: auto;
    margin: 0 auto var(--spacing-4);
    display: block;
    background: white;
    padding: var(--spacing-4);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    object-fit: contain; /* Maintain aspect ratio */
    vertical-align: middle; /* Ensure proper alignment */
}
.footer-description {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

/* Center footer description on mobile/tablet */
@media (max-width: 1023px) {
    .footer-description {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
}
.footer-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-4);
}
.footer-list {
    list-style: none;
}
.footer-list li {
    margin-bottom: var(--spacing-2);
}
.footer-list a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.footer-list a:hover {
    color: var(--primary-light);
}
.contact-info p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--spacing-3);
    line-height: 1.6;
}
.contact-info a {
    color: white;
    text-decoration: none;
    transition: color var(--transition-fast);
}
.contact-info a:hover {
    color: #10b981;
    text-decoration: underline;
}
/* Footer Social Media */
.footer-social {
    text-align: center;
    margin-bottom: var(--spacing-8);
}
.footer-social h4 {
    color: white;
    margin-bottom: var(--spacing-4);
    font-size: var(--font-size-lg);
    font-weight: 600;
}
.social-links {
    display: flex;
    justify-content: center;
    gap: var(--spacing-4);
}
.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    text-decoration: none;
    transition: all var(--transition-fast);
    border: 2px solid rgba(255, 255, 255, 0.2);
}
.social-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.social-link.linkedin:hover {
    background: #0077b5;
    border-color: #0077b5;
    color: white;
}
.social-link.instagram:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border-color: #dc2743;
    color: white;
}
.social-link svg {
    width: 24px;
    height: 24px;
    transition: transform var(--transition-fast);
}
.social-link:hover svg {
    transform: scale(1.1);
}
@media (max-width: 768px) {
    .footer-social {
        margin-bottom: var(--spacing-6);
    }
    .social-link {
        width: 45px;
        height: 45px;
    }
    .social-link svg {
        width: 20px;
        height: 20px;
    }
}
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--spacing-6);
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
}
.footer-legal {
    margin-top: var(--spacing-4);
    display: flex;
    justify-content: center;
    gap: var(--spacing-6);
    flex-wrap: wrap;
}
.footer-legal a {
    color: var(--text-light);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
}
.footer-legal a:hover {
    color: var(--primary-light);
}
/* Footer Certifications Section */
.footer-certifications {
    margin: var(--spacing-12) 0 var(--spacing-8);
    padding: var(--spacing-8) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}
.footer-certifications h4 {
    color: white;
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-6);
    text-align: center;
}
.certifications-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    transition: transform var(--transition-normal);
    display: block;
    margin: 0 auto;
}
.certifications-image:hover {
    transform: scale(1.02);
}
.partner-logo {
    max-height: 60px;
    height: auto;
    width: auto;
    display: block;
    margin: var(--spacing-4) auto 0;
    transition: transform var(--transition-normal);
}
.partner-logo:hover {
    transform: scale(1.05);
}
/* Responsive design for certifications */
@media (max-width: 767px) {
    .footer-certifications {
        margin: var(--spacing-8) 0 var(--spacing-6);
        padding: var(--spacing-6) 0;
    }
    .certifications-image {
        max-height: 100px;
        width: auto;
    }
    .footer-logo {
        height: 100px;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .certifications-image {
        max-height: 140px;
        width: auto;
    }
    .footer-logo {
        height: 120px;
    }
}
@media (min-width: 1024px) {
    .certifications-image {
        max-height: 200px;
        width: auto;
    }
    .footer-logo {
        height: 140px;
    }
}
/* Scroll to Top Button - Excluded from Safety Training page (has its own styling) */
body:not(.safety-training-page) .scroll-to-top {
    position: fixed;
    bottom: 6.5rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    background: #0f172a;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--transition-fast);
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
body:not(.safety-training-page) .scroll-to-top:hover {
    background: var(--primary);
    border-color: white;
    transform: translateY(0);
    box-shadow: 0 6px 25px rgba(8, 145, 178, 0.4);
}
body:not(.safety-training-page) .scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
body:not(.safety-training-page) .scroll-to-top svg {
    width: 24px;
    height: 24px;
    stroke: white;
    stroke-width: 2.5;
}
/* Responsive adjustments for scroll button */
@media (max-width: 768px) {
    body:not(.safety-training-page) .scroll-to-top {
        bottom: 6rem;
        right: 1.5rem;
        width: 45px;
        height: 45px;
    }
    body:not(.safety-training-page) .scroll-to-top svg {
        width: 20px;
        height: 20px;
    }
}
/* Popup Tooltip Styles */
.popup-tooltip {
    position: absolute;
    background: linear-gradient(135deg, var(--surface), var(--surface-dark));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-0);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    max-width: 300px;
    min-width: 250px;
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    transition: all var(--transition-normal) cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-left: 4px solid var(--primary-color);
}
.popup-tooltip-show {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.popup-tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-4) var(--spacing-4) var(--spacing-2);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--spacing-3);
}
.popup-tooltip-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}
.popup-tooltip-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-1);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}
.popup-tooltip-close:hover {
    background: var(--primary-color-alpha);
    color: var(--primary-color);
    transform: scale(1.1);
}
.popup-tooltip-content {
    padding: 0 var(--spacing-4) var(--spacing-4);
}
.popup-tooltip-content p {
    margin: 0;
    font-size: var(--font-size-xs);
    line-height: 1.5;
    color: var(--text-secondary);
}
.popup-tooltip-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    transform: rotate(45deg);
    z-index: -1;
}
.popup-tooltip-arrow.top-left,
.popup-tooltip-arrow.top-right {
    bottom: -7px;
    border-top: none;
    border-left: none;
}
.popup-tooltip-arrow.bottom-left,
.popup-tooltip-arrow.bottom-right {
    top: -7px;
    border-bottom: none;
    border-right: none;
}
.popup-tooltip-arrow.left {
    right: -7px;
    top: 50%;
    margin-top: -6px;
    border-left: none;
    border-bottom: none;
}
.popup-tooltip-arrow.right {
    left: -7px;
    top: 50%;
    margin-top: -6px;
    border-right: none;
    border-top: none;
}
.popup-tooltip-arrow.top-left {
    left: 50px;
}
.popup-tooltip-arrow.top-right {
    right: 50px;
}
.popup-tooltip-arrow.bottom-left {
    left: 50px;
}
.popup-tooltip-arrow.bottom-right {
    right: 50px;
}
/* Popup Tooltip Animation */
@keyframes popupTooltipSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* Mobile - Hide popup tooltips on small screens */
@media (max-width: 767px) {
    .popup-tooltip {
        display: none;
    }
}
/* Dark mode support - but force white background on body */
@media (prefers-color-scheme: dark) {
    html, body {
        background: #ffffff !important;
        background-color: #ffffff !important;
    }
    .popup-tooltip {
        background: linear-gradient(135deg, var(--surface-dark), var(--bg-primary));
        border-color: rgba(255, 255, 255, 0.1);
    }
    .popup-tooltip-arrow {
        background: var(--surface-dark);
        border-color: rgba(255, 255, 255, 0.1);
    }
}
/* Professional Tooltip Styles */
.pro-tooltip {
    position: absolute;
    z-index: 10000;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 280px;
    font-size: 0.875rem;
    line-height: 1.4;
    display: none;
}
/* Tooltip Container */
.pro-tooltip .tooltip-text {
    background: var(--text-primary);
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    position: relative;
    word-wrap: break-word;
    font-weight: 500;
}
.pro-tooltip .tooltip-icon {
    display: inline-block;
    margin-right: 0.5rem;
    font-weight: bold;
    font-size: 1rem;
}
/* Tooltip with Icon Layout */
.pro-tooltip-success .tooltip-text,
.pro-tooltip-warning .tooltip-text,
.pro-tooltip-error .tooltip-text,
.pro-tooltip-info .tooltip-text,
.pro-tooltip-help .tooltip-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* Tooltip Types */
.pro-tooltip-success .tooltip-text {
    background: #10b981;
    border-left: 4px solid #059669;
}
.pro-tooltip-warning .tooltip-text {
    background: #f59e0b;
    border-left: 4px solid #d97706;
}
.pro-tooltip-error .tooltip-text {
    background: #ef4444;
    border-left: 4px solid #dc2626;
}
.pro-tooltip-info .tooltip-text {
    background: var(--primary);
    border-left: 4px solid var(--primary-dark);
}
.pro-tooltip-help .tooltip-text {
    background: #8b5cf6;
    border-left: 4px solid #7c3aed;
}
/* Tooltip Arrow Positioning */
.pro-tooltip-top .tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--text-primary);
}
.pro-tooltip-success.pro-tooltip-top .tooltip-text::after {
    border-top-color: #10b981;
}
.pro-tooltip-warning.pro-tooltip-top .tooltip-text::after {
    border-top-color: #f59e0b;
}
.pro-tooltip-error.pro-tooltip-top .tooltip-text::after {
    border-top-color: #ef4444;
}
.pro-tooltip-info.pro-tooltip-top .tooltip-text::after {
    border-top-color: var(--primary);
}
.pro-tooltip-help.pro-tooltip-top .tooltip-text::after {
    border-top-color: #8b5cf6;
}
.pro-tooltip-bottom .tooltip-text::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: var(--text-primary);
}
.pro-tooltip-success.pro-tooltip-bottom .tooltip-text::after {
    border-bottom-color: #10b981;
}
.pro-tooltip-warning.pro-tooltip-bottom .tooltip-text::after {
    border-bottom-color: #f59e0b;
}
.pro-tooltip-error.pro-tooltip-bottom .tooltip-text::after {
    border-bottom-color: #ef4444;
}
.pro-tooltip-info.pro-tooltip-bottom .tooltip-text::after {
    border-bottom-color: var(--primary);
}
.pro-tooltip-help.pro-tooltip-bottom .tooltip-text::after {
    border-bottom-color: #8b5cf6;
}
.pro-tooltip-left .tooltip-text::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: var(--text-primary);
}
.pro-tooltip-success.pro-tooltip-left .tooltip-text::after {
    border-left-color: #10b981;
}
.pro-tooltip-warning.pro-tooltip-left .tooltip-text::after {
    border-left-color: #f59e0b;
}
.pro-tooltip-error.pro-tooltip-left .tooltip-text::after {
    border-left-color: #ef4444;
}
.pro-tooltip-info.pro-tooltip-left .tooltip-text::after {
    border-left-color: var(--primary);
}
.pro-tooltip-help.pro-tooltip-left .tooltip-text::after {
    border-left-color: #8b5cf6;
}
.pro-tooltip-right .tooltip-text::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: var(--text-primary);
}
.pro-tooltip-success.pro-tooltip-right .tooltip-text::after {
    border-right-color: #10b981;
}
.pro-tooltip-warning.pro-tooltip-right .tooltip-text::after {
    border-right-color: #f59e0b;
}
.pro-tooltip-error.pro-tooltip-right .tooltip-text::after {
    border-right-color: #ef4444;
}
.pro-tooltip-info.pro-tooltip-right .tooltip-text::after {
    border-right-color: var(--primary);
}
.pro-tooltip-help.pro-tooltip-right .tooltip-text::after {
    border-right-color: #8b5cf6;
}
/* Follow cursor tooltip (no arrow) */
.pro-tooltip-follow .tooltip-text::after {
    display: none;
}
/* Responsive tooltip adjustments */
@media (max-width: 768px) {
    .pro-tooltip {
        max-width: 240px;
        font-size: 0.8rem;
    }
    .pro-tooltip .tooltip-text {
        padding: 0.6rem 0.8rem;
    }
}
/* Accessibility - reduce motion */
@media (prefers-reduced-motion: reduce) {
    .pro-tooltip {
        transition: opacity 0.1s ease;
    }
}
/* Disable tooltips on mobile to prevent interference with navigation */
@media (max-width: 768px) {
    .pro-tooltip,
    [data-tooltip] {
        pointer-events: none !important;
    }
    .pro-tooltip {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    /* Ensure mobile navigation links are always clickable */
    .nav-menu.mobile-open .nav-link {
        pointer-events: auto !important;
        position: relative;
        z-index: 999;
    }
}
/* ========================================
   UNIFIED ICON SIZING SYSTEM
   Professional sizing with transparent background support
   ======================================== */

/* Training course icons moved to css/safety-training.css */

/* Page-specific icon styles moved to dedicated CSS files:
   - Service card icons → css/services.css
   - Service detail icons → css/service-pages.css
*/

/* Feature icons - Small inline icons */
.feature-icon-png {
    width: 24px;
    height: 24px;
    object-fit: contain;
    vertical-align: middle;
    display: inline-block;
}

/* Service icon images moved to css/services.css and css/service-pages.css */

/* Benefits Section Styling */
.benefits-section {
    padding: var(--spacing-16) 0;
    background: var(--accent-color);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-8);
    margin-top: var(--spacing-12);
}

.benefit-item {
    text-align: center;
    padding: var(--spacing-6);
}

.benefit-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-4);
    background: var(--primary-color);
    color: white;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefit-icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 2;
}

.benefit-item h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-3);
}

.benefit-item p {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Service Footer Styling */
.service-footer {
    margin-top: var(--spacing-6);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Service duration and contact styles moved to css/service-pages.css */

/* Overview Image Styling */
.overview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Product Showcase Styles */
.store-hero {
    background: linear-gradient(135deg, #0f766e 0%, #10b981 50%, #14b8a6 100%);
    color: white;
    padding: 4.5rem 0 4rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
}

/* Override for pages with custom background images */
.store-hero[data-bg-fixed="true"] {
    background: none !important;
}

.store-hero[data-bg-fixed="true"]::before {
    display: none !important;
}
.store-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 1;
    pointer-events: none;
}
.store-hero-content {
    position: relative;
    z-index: 2;
}
.store-hero .page-title {
    font-size: 2.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}
.store-hero .page-subtitle {
    font-size: 1.125rem;
    opacity: 0.95;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}
.store-controls {
    background: var(--background-light);
    padding: 2rem 0;
    border-bottom: 1px solid var(--border-color);
}
.store-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.search-container {
    position: relative;
    flex: 1;
    max-width: 400px;
}
.search-input {
    width: 100%;
    padding: 0.75rem 1rem;
    padding-right: 3rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color var(--transition-fast);
}
.search-input:focus {
    outline: none;
    border-color: var(--primary);
}
.search-btn {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
}
.filter-controls {
    display: flex;
    gap: 1rem;
}
.filter-select {
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: transparent;
    font-size: 1rem;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}
.filter-select:focus {
    outline: none;
    border-color: var(--primary);
}
/* Product Grid - CEMBRE-inspired minimal design */
.store-products {
    padding: 4rem 0;
}
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 3rem;
    margin-bottom: 3rem;
}
.product-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.product-card:hover {
    border-color: var(--brand-teal);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}
.product-image {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--transition-fast);
}
.product-card:hover .product-image img {
    transform: scale(1.03);
}
.product-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--accent);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}
.product-info {
    padding: 1.75rem;
    background: #ffffff;
}
.product-manufacturer {
    color: var(--brand-teal);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}
.product-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}
.product-model {
    color: var(--text-light);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}
.product-description {
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
    line-height: 1.6;
    font-size: 0.9375rem;
}
.product-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
    margin-bottom: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
}
.spec-item {
    background: #f8fafc;
    color: var(--text-secondary);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8125rem;
    line-height: 1.4;
    font-weight: 500;
}
.product-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}
.product-actions .btn-primary,
.product-actions .btn-secondary {
    flex: 1;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 6px;
    font-weight: 600;
    transition: all var(--transition-fast);
}
.product-actions .btn-primary {
    background: var(--brand-teal);
    color: white;
    border: none;
}
.product-actions .btn-primary:hover {
    background: #0d9488;
    transform: translateY(-1px);
}
.product-actions .btn-secondary {
    background: transparent;
    color: var(--brand-teal);
    border: 2px solid var(--brand-teal);
}
.product-actions .btn-secondary:hover {
    background: #f0fdfa;
    border-color: #0d9488;
    color: #0d9488;
}
.product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.product-price {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.original-price {
    color: var(--text-secondary);
    text-decoration: line-through;
    font-size: 0.875rem;
}
.current-price {
    color: var(--primary);
    font-size: 1.25rem;
    font-weight: 600;
}
/* Store Empty State */
.store-empty-state {
    text-align: center;
    padding: 4rem 2rem;
    grid-column: 1 / -1;
}
.empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}
.store-empty-state h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}
.store-empty-state p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
/* Store Features */
.store-features {
    background: var(--background-light);
    padding: 4rem 0;
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}
.feature-card {
    text-align: center;
    padding: 2rem;
    background: transparent;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}
.feature-card h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}
.feature-card p {
    color: var(--text-secondary);
    line-height: 1.5;
}
/* Enhanced Responsive Design for Store */
/* Large Desktop - 1440px+ */
@media (min-width: 1440px) {
    .store-hero {
        padding: 8rem 0 6rem;
    }
    .store-hero h1 {
        font-size: 4rem;
    }
    .store-hero p {
        font-size: 1.5rem;
        max-width: 800px;
        margin: 0 auto;
    }
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 3rem;
    }
    .store-toolbar {
        padding: 0 2rem;
    }
    .search-container {
        max-width: 500px;
    }
}
/* Desktop - 1024px to 1439px */
@media (min-width: 1024px) and (max-width: 1439px) {
    .store-hero {
        padding: 7rem 0 5rem;
    }
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 2.5rem;
    }
}
/* Tablet Landscape - 768px to 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    .store-hero {
        padding: 6rem 0 4rem;
    }
    .store-hero h1 {
        font-size: 2.5rem;
    }
    .store-toolbar {
        gap: 1.5rem;
        padding: 0 1rem;
    }
    .search-container {
        max-width: 350px;
    }
    .filter-controls {
        gap: 0.75rem;
    }
    .filter-select {
        min-width: 140px;
    }
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 2rem;
    }
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    .feature-card {
        padding: 1.5rem;
    }
    .progress-line {
        width: 80px;
    }
}
/* Tablet Portrait - 480px to 767px */
@media (min-width: 480px) and (max-width: 767px) {
    .store-hero {
        padding: 5rem 0 3rem;
    }
    .store-hero h1 {
        font-size: 2.25rem;
        line-height: 1.2;
    }
    .store-hero p {
        font-size: 1.125rem;
        margin-bottom: 2rem;
    }
    .store-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 0 1rem;
    }
    .search-container {
        max-width: 100%;
    }
    .filter-controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    .filter-select {
        width: 100%;
        padding: 0.875rem 1rem;
        font-size: 1rem;
    }
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1.5rem;
        padding: 0 1rem;
    }
    .product-card {
        border-radius: 10px;
    }
    .product-info {
        padding: 1.25rem;
    }
    .product-footer {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    .features-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .feature-card {
        padding: 2rem 1.5rem;
        text-align: center;
    }
    .form-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .progress-line {
        width: 60px;
    }
    .step-number {
        width: 35px;
        height: 35px;
        font-size: 0.875rem;
    }
    .step-label {
        font-size: 0.8rem;
    }
}
/* Mobile - up to 479px */
@media (max-width: 479px) {
    .store-hero {
        padding: 4rem 0 2rem;
    }
    .store-hero h1 {
        font-size: 1.875rem;
        line-height: 1.1;
        margin-bottom: 1rem;
    }
    .store-hero p {
        font-size: 1rem;
        margin-bottom: 1.5rem;
        padding: 0 1rem;
    }
    .store-controls {
        padding: 1.5rem 0;
    }
    .store-toolbar {
        flex-direction: column;
        gap: 1rem;
        padding: 0 1rem;
    }
    .search-container {
        order: 1;
    }
    .search-input {
        padding: 1rem;
        font-size: 16px; /* Prevents zoom on iOS */
        border-radius: 12px;
    }
    .search-btn {
        right: 1rem;
    }
    .filter-controls {
        order: 2;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    .filter-select {
        width: 100%;
        padding: 1rem;
        font-size: 16px; /* Prevents zoom on iOS */
        border-radius: 12px;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 1rem center;
        background-size: 1rem;
        padding-right: 3rem;
    }
    .products-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0 1rem;
    }
    .product-card {
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }
    .product-image {
        border-radius: 8px 8px 0 0;
    }
    .product-info {
        padding: 1rem;
    }
    .product-name {
        font-size: 1.125rem;
        line-height: 1.3;
    }
    .product-description {
        font-size: 0.875rem;
        line-height: 1.4;
    }
    .product-specs {
        margin-bottom: 1rem;
    }
    .spec-tag {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
    .product-footer {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    .current-price {
        font-size: 1.375rem;
        text-align: center;
    }
    .nav-actions {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }
    .btn-primary {
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
    }
    .quantity-controls {
        align-self: flex-end;
    }
    .qty-btn {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
    .quantity {
        min-width: 30px;
        font-size: 1rem;
    }
    .btn-block {
        padding: 1rem;
        font-size: 1rem;
        border-radius: 8px;
        font-weight: 600;
    }
    .features-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0 1rem;
    }
    .feature-card {
        padding: 1.5rem 1rem;
        border-radius: 8px;
        text-align: center;
    }
    .feature-icon {
        font-size: 2.5rem;
        margin-bottom: 0.75rem;
    }
    .feature-card h3 {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
    .feature-card p {
        font-size: 0.875rem;
        line-height: 1.4;
    }
    .store-empty-state {
        padding: 3rem 1rem;
    }
    .empty-icon {
        font-size: 3rem;
    }
    .store-empty-state h3 {
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
    }
    .store-empty-state p {
        font-size: 0.875rem;
        line-height: 1.4;
    }
    .form-section {
        padding: 1.5rem 1rem;
        border-radius: 8px;
        margin-bottom: 1rem;
    }
    .form-section h3 {
        font-size: 1.125rem;
        margin-bottom: 1rem;
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 1rem;
        font-size: 16px; /* Prevents zoom on iOS */
        border-radius: 8px;
    }
    .btn-large {
        padding: 1rem 2rem;
        font-size: 1rem;
        border-radius: 8px;
        width: 100%;
    }
    .summary-card {
        padding: 1.5rem 1rem;
        border-radius: 8px;
        position: static;
    }
    .progress-step {
        min-width: 80px;
    }
    .step-number {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }
    .step-label {
        font-size: 0.7rem;
        white-space: nowrap;
    }
    .progress-line {
        width: 40px;
        min-width: 40px;
    }
}
/* Touch and Interaction Improvements */
@media (hover: none) and (pointer: coarse) {
    .product-card:hover {
        transform: none;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
    .filter-select:hover {
        border-color: var(--border-color);
    }
}
/* High DPI Display Optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .product-image img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}
/* Landscape Mobile Specific */
@media (max-width: 767px) and (orientation: landscape) {
    .store-hero {
        padding: 3rem 0 2rem;
    }
    .store-hero h1 {
        font-size: 1.75rem;
    }
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}
/* GDPR Banner */
.gdpr-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(31, 41, 55, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: white;
    padding: var(--spacing-4);
    z-index: 1000;
    transform: translateY(100%);
    transition: transform var(--transition-normal);
    border-top: 2px solid var(--primary-color);
}
.gdpr-banner.show {
    transform: translateY(0);
}
.gdpr-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    flex-wrap: wrap;
}
.gdpr-text {
    flex: 1;
    min-width: 300px;
}
.gdpr-actions {
    display: flex;
    gap: var(--spacing-3);
    flex-wrap: wrap;
}
.gdpr-btn {
    padding: var(--spacing-2) var(--spacing-4);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
}
.gdpr-accept {
    background-color: var(--primary-color);
    color: white;
}
.gdpr-accept:hover {
    background-color: var(--primary-dark);
}
.gdpr-settings {
    background-color: transparent;
    color: var(--primary-light);
    border: 1px solid var(--primary-light);
}
.gdpr-settings:hover {
    background-color: var(--primary-light);
    color: var(--secondary-color);
}
/* ============================================================================
   14. LOADING ANIMATIONS & EFFECTS
   ============================================================================ */

/*
  Professional Page Loading System
  Features smooth loading animation with company branding and progress tracking
  Used across all pages for consistent user experience
*/

/* Professional Loading Screen - Clean, Elegant Design */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.6s ease-out, visibility 0.6s ease-out;
    overflow: hidden;
}

/* Subtle Background Animation */
.page-loader::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 20%, rgba(8, 145, 178, 0.02) 0%, transparent 60%),
                radial-gradient(circle at 70% 80%, rgba(255, 107, 53, 0.02) 0%, transparent 60%);
    animation: subtleAmbient 6s ease-in-out infinite alternate;
}

.page-loader.hidden {
    opacity: 0;
    visibility: hidden;
    display: none;
}

/* Clean Container Layout */
.loader-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
    max-width: 500px;
    padding: var(--spacing-8);
}

/* Professional Logo Presentation */
.tech-loader {
    position: relative;
    margin-bottom: var(--spacing-8);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Elegant Logo Styling - Centerpiece */
.loader-logo {
    position: relative;
    width: 320px;
    height: auto;
    min-height: 240px;
    opacity: 0;
    transform: scale(0.8);
    animation: elegantLogoEntrance 1.2s ease-out 0.3s forwards;
    filter: drop-shadow(0 8px 32px rgba(8, 145, 178, 0.12));
    padding: var(--spacing-6) 0 var(--spacing-12);
}

.loader-logo img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    max-height: none;
    vertical-align: middle; /* Ensure proper alignment */
}

/* Elegant Glow Effect */
.loader-logo::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(8, 145, 178, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
    animation: subtleGlow 3s ease-in-out infinite alternate;
}

/* Clean Progress Section */
.progress-section {
    width: 100%;
    margin-top: var(--spacing-6);
}

/* Professional Progress Counter */
.progress-counter {
    font-family: var(--font-family);
    font-size: var(--font-size-3xl);
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: var(--spacing-4);
    opacity: 1;
    animation: none;
    letter-spacing: -0.02em;
}

/* Minimal Progress Bar */
.progress-bar-container {
    width: 100%;
    max-width: 300px;
    height: 3px;
    background: rgba(8, 145, 178, 0.08);
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
    margin: 0 auto var(--spacing-6);
    opacity: 1;
    animation: none;
}

/* Smooth Progress Fill */
.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--brand-orange) 100%);
    width: 0%;
    transition: width 0.4s ease-out;
    border-radius: var(--radius-sm);
    position: relative;
}

/* Subtle Shimmer Effect */
.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    animation: gentleShimmer 2s ease-in-out infinite;
}

/* Hide Status Text - Not Needed */
.tech-status {
    display: none !important;
}

/* Remove All Gear Elements - Clean Design */
.gear, .gear-1, .gear-2, .gear-3 {
    display: none !important;
}

/* Hide Circuit Pattern - Professional Approach */
.circuit-pattern {
    display: none !important;
}

/* Professional Animation Keyframes */
@keyframes subtleAmbient {
    0% { opacity: 0.3; }
    100% { opacity: 0.7; }
}

@keyframes elegantLogoEntrance {
    0% { 
        opacity: 0; 
        transform: scale(0.8); 
    }
    100% { 
        opacity: 1; 
        transform: scale(1); 
    }
}

@keyframes subtleGlow {
    0% { 
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(1);
    }
    100% { 
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

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

@keyframes gentleShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(300px); }
}

/* Logo appears at 60% progress and stays visible */
.loader-logo.show {
    opacity: 1;
}

/* Accessibility: Reduced Motion Support for Loader */
@media (prefers-reduced-motion: reduce) {
    .page-loader::before {
        animation: none;
    }
    
    .loader-logo {
        animation: none;
        opacity: 1;
        transform: scale(1);
    }
    
    /* Simple fade-in fallback */
    .page-loader {
        animation: fadeInSimple 0.3s ease-in;
    }
}

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

/* Responsive Design for Professional Loading */
@media (max-width: 768px) {
    .loader-container {
        padding: var(--spacing-6);
    }
    
    .loader-logo {
        width: 280px;
    }
    
    .progress-counter {
        font-size: var(--font-size-2xl);
    }
    
    .progress-bar-container {
        max-width: 250px;
    }
    
    .tech-status {
        font-size: var(--font-size-base);
        padding: 0 var(--spacing-4);
    }
}

@media (max-width: 480px) {
    .loader-container {
        padding: var(--spacing-4);
    }
    
    .loader-logo {
        width: 240px;
    }
    
    .progress-counter {
        font-size: var(--font-size-xl);
    }
    
    .progress-bar-container {
        max-width: 200px;
    }
    
    .tech-status {
        font-size: var(--font-size-sm);
    }
}
/* About Page Hero Video */
.hero-video-container {
    margin-top: var(--spacing-12);
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.hero-intro-video {
    width: 100%;
    height: auto;
    max-height: 450px;
    object-fit: cover;
    background: var(--surface);
    border-radius: var(--radius-xl);
    transition: transform 0.3s ease-in-out;
}

.hero-intro-video:hover {
    transform: scale(1.02);
}

/* Responsive video sizing */
@media (max-width: 768px) {
    .hero-video-container {
        margin-top: var(--spacing-8);
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    
    .hero-intro-video {
        max-height: 280px;
        border-radius: var(--radius-lg);
    }
}

@media (max-width: 480px) {
    .hero-video-container {
        margin-top: var(--spacing-6);
    }
    
    .hero-intro-video {
        max-height: 200px;
        border-radius: var(--radius-md);
    }
}

/* Hero Robot Video */
.hero-robot-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-xl);
}
@media (max-width: 768px) {
    .hero-visual {
        width: 100%;
        max-width: 350px;
        height: 250px;
    }
    .hero-carousel {
        width: 100%;
        max-width: 350px;
        height: 280px;
    }
    .embla__prev,
    .embla__next {
        width: 35px;
        height: 35px;
    }
    .embla__prev {
        left: var(--spacing-2);
    }
    .embla__next {
        right: var(--spacing-2);
    }
    .embla__dots {
        bottom: var(--spacing-3);
        gap: var(--spacing-1);
    }
    .embla__dot {
        width: 8px;
        height: 8px;
    }
}
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
    align-items: center;
}

.safety-badge {
    display: inline-block;
    background: var(--brand-teal);
    color: white;
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--spacing-4);
}

.hero-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-4);
    line-height: 1.2;
    position: relative;
}

.hero-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 80px;
    height: 4px;
    background: var(--brand-orange);
    border-radius: 2px;
}

.hero-subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-6);
}

.hero-contact {
    background: white;
    padding: var(--spacing-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

.contact-item {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-3);
    gap: var(--spacing-2);
}

.contact-item:last-child {
    margin-bottom: 0;
}

.contact-label {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 80px;
}

.contact-value {
    color: var(--brand-teal);
    text-decoration: none;
    font-weight: 500;
}

.contact-value:hover {
    text-decoration: underline;
}

.services-overview {
    padding: var(--spacing-12) 0;
    background: white;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
}

/* Service overview card styles moved to css/service-pages.css */

.company-mission {
    padding: var(--spacing-12) 0;
    background: var(--section-light-grey);
}

.mission-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.mission-description {
    font-size: var(--font-size-lg);
    line-height: 1.7;
    color: var(--text-secondary);
    margin-top: var(--spacing-6);
}

/* Hexagonal Training Courses */
.training-courses {
    padding: var(--spacing-16) 0;
    background: white;
}

.hexagon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-4) var(--spacing-8);
    margin-top: var(--spacing-12);
    justify-items: center;
}

/* Honeycomb staggering effect */
.hexagon-item:nth-child(4n-1),
.hexagon-item:nth-child(4n) {
    transform: translateY(70px);
}

@media (min-width: 768px) {
    .hexagon-item:nth-child(3n-1) {
        transform: translateY(70px);
    }
    
    .hexagon-item:nth-child(4n-1),
    .hexagon-item:nth-child(4n) {
        transform: none;
    }
}

@media (min-width: 1024px) {
    .hexagon-item:nth-child(4n-1),
    .hexagon-item:nth-child(4n) {
        transform: translateY(70px);
    }
    
    .hexagon-item:nth-child(3n-1) {
        transform: none;
    }
}

.hexagon-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hexagon {
    width: 280px;
    height: 280px;
    position: relative;
    background: white;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    border: 3px solid var(--brand-teal);
}

.hexagon:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.25);
    background: var(--section-light-grey);
    border-color: var(--brand-orange);
}

.hexagon-content {
    text-align: center;
    padding: var(--spacing-4);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hex-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-3);
    display: block;
}

.hexagon-content h4 {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-2);
    line-height: 1.3;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hexagon-content p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: var(--spacing-3);
    flex-grow: 1;
}

.hex-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-align: center;
}

.hex-details span {
    background: var(--section-light-grey);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    font-weight: 500;
}

.hex-details .participants {
    background: var(--brand-teal);
    color: white;
    font-weight: 600;
}

@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .hexagon-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-4) var(--spacing-6);
    }
}

@media (min-width: 1024px) {
    .hero-grid {
        grid-template-columns: 2fr 1fr;
        gap: var(--spacing-12);
        align-items: start;
    }
    
    .hero-title {
        font-size: var(--font-size-4xl);
    }
}

@media (min-width: 1024px) {
    .hexagon-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Footer layout improvements */
.footer-content {
    width: 100%;
}

.footer-certifications,
.footer-social {
    text-align: center;
    margin-bottom: var(--spacing-6);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--spacing-6);
    text-align: center;
}

.footer-legal {
    display: flex;
    justify-content: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
    margin-top: var(--spacing-4);
}

.footer-legal a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-legal a:hover {
    color: var(--primary-light);
}

/* Removed duplicate footer-grid rules - consolidated above */
    }
    
    .footer-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        text-align: left;
    }
    
    .footer-legal {
        margin-top: 0;
    }
}
/* Page Hero Section */
.page-hero {
    padding: var(--spacing-8) 0 var(--spacing-12);
    background: linear-gradient(180deg, #000000 0%, #0a1929 25%, #1e3a5f 50%, #4a5f7f 75%, #e5e7eb 100%);
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-bottom: var(--spacing-6);
}

/* Services Page Specific styles moved to css/services.css */
.page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
    pointer-events: none;
}
.page-hero-content {
    position: relative;
    z-index: 2;
}
.page-hero::before {
    display: none;
}
.page-hero::after {
    display: none;
}
.page-hero-content {
    max-width: 800px;
    margin: 0 auto;
}
.page-title {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    margin-bottom: var(--spacing-6);
    line-height: 1.1;
}
.page-subtitle {
    font-size: var(--font-size-xl);
    opacity: 0.9;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .page-title {
        font-size: var(--font-size-5xl);
    }
}
/* Overview Section */
.overview-section {
    padding: var(--spacing-20) 0;
    background-color: var(--surface);
}
.overview-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-12);
    align-items: center;
}
.overview-description {
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    line-height: 1.7;
    margin-bottom: var(--spacing-6);
}
.overview-features {
    margin-top: var(--spacing-8);
}
.feature-item {
    display: flex;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    padding: var(--spacing-6);
    background-color: var(--surface-hover);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    transition: all var(--transition-fast);
}
.feature-item:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.feature-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.feature-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}
.feature-content h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-2);
}
.feature-content p {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}
.overview-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Automation graphic styles moved to css/service-pages.css */
.overview-graphic {
    width: 100%;
    max-width: 500px;
    height: 400px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    position: relative;
    overflow: hidden;
}
.overview-graphic::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
    border-radius: var(--radius-xl);
}
@media (min-width: 768px) {
    .overview-grid {
        grid-template-columns: 1fr 1fr;
    }
}
/* Service features moved to css/service-pages.css */
/* Industry Applications */
.industry-applications {
    padding: var(--spacing-20) 0;
    background-color: var(--accent-color);
}
.industries-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
}
.industry-card {
    background-color: var(--surface);
    padding: var(--spacing-8);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}
.industry-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}
.industry-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    transform: scaleX(0);
    transition: transform var(--transition-normal);
    transform-origin: left;
}
.industry-card:hover::before {
    transform: scaleX(1);
}
.industry-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-4);
}
.industry-description {
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: var(--font-size-base);
}
@media (min-width: 768px) {
    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .industries-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* Contact Form Styles */
.contact-form {
    background-color: var(--surface);
    padding: var(--spacing-8);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}
.form-group {
    margin-bottom: var(--spacing-6);
}
.form-label {
    display: block;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-sm);
}
.form-input,
.form-textarea {
    width: 100%;
    padding: var(--spacing-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--font-size-base);
    transition: all var(--transition-fast);
    background-color: var(--surface);
}
.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}
.form-textarea {
    resize: vertical;
    min-height: 120px;
}
.form-submit {
    width: 100%;
}
/* Course Grid for Safety Training */
.course-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
}
.course-card {
    background-color: var(--surface);
    padding: var(--spacing-6);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    transition: all var(--transition-normal);
}
.course-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}
.course-level {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-3);
    background-color: var(--primary-color);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 500;
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-4);
}
.course-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-3);
}
.course-description {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-4);
    line-height: 1.6;
}
.course-details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}
.course-detail {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}
@media (min-width: 768px) {
    .course-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .course-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mt-4 { margin-top: var(--spacing-4); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mt-8 { margin-top: var(--spacing-8); }
.mb-8 { margin-bottom: var(--spacing-8); }
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.grid { display: grid; }
/* Responsive Images */
img {
    max-width: 100%;
    height: auto;
}
/* ==================== INTERACTIVE TRAINING SYSTEM STYLES ==================== */
/* Training System Container */
.training-system {
    min-height: 60vh;
    padding: var(--spacing-8) 0;
}
/* Module Selection Grid */
.training-modules-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-12);
}
@media (min-width: 768px) {
    .training-modules-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .training-modules-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-8);
    }
}
/* Training Module Cards */
.training-module-card {
    background: var(--surface);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}
.training-module-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-color);
}
.training-module-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
}
.module-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-4);
    gap: var(--spacing-3);
}
.module-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
}
.module-difficulty {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-3);
    background-color: var(--primary-color);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 500;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.module-description {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-4);
    line-height: 1.6;
}
.module-details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-5);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}
.module-progress {
    margin-bottom: var(--spacing-5);
}
.progress-bar {
    width: 100%;
    height: 8px;
    background-color: var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: var(--spacing-2);
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    border-radius: var(--radius-sm);
    transition: width var(--transition-normal);
}
.progress-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
}
.module-start-btn {
    width: 100%;
    justify-content: center;
    font-weight: 600;
}
/* Training Overview Features */
.training-overview {
    background: var(--accent-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-8);
    margin-top: var(--spacing-12);
}
.training-overview h3 {
    text-align: center;
    margin-bottom: var(--spacing-6);
    color: var(--text-primary);
    font-size: var(--font-size-2xl);
}
.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
}
@media (min-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.feature-item {
    text-align: center;
}
.feature-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-3);
}
.feature-content h4 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-2);
    color: var(--text-primary);
}
.feature-content p {
    color: var(--text-secondary);
    line-height: 1.6;
}
/* Breadcrumb Navigation */
.training-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-6);
    font-size: var(--font-size-sm);
}
.breadcrumb-btn {
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    font-weight: 500;
}
.breadcrumb-btn:hover {
    background-color: var(--accent-color);
    color: var(--primary-dark);
}
.breadcrumb-separator {
    color: var(--text-light);
}
.breadcrumb-current {
    color: var(--text-secondary);
    font-weight: 500;
}
/* Module Header Section */
.module-header-section {
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--surface) 100%);
    border-radius: var(--radius-lg);
    padding: var(--spacing-8);
    margin-bottom: var(--spacing-8);
    border: 1px solid var(--border-color);
}
.module-header-section .module-title {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-4);
}
.module-header-section .module-description {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-5);
}
.module-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
}
.meta-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
}
/* Training Content Layout */
.training-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
}
@media (min-width: 1024px) {
    .training-content {
        grid-template-columns: 300px 1fr;
        gap: var(--spacing-10);
    }
}
/* Chapter Navigation */
.chapter-navigation {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    height: fit-content;
}
/* Only apply sticky positioning on larger screens where we have sidebar layout */
@media (min-width: 1024px) {
    .chapter-navigation {
        position: sticky;
        top: 120px;
    }
}
.chapter-navigation h3 {
    margin-bottom: var(--spacing-4);
    color: var(--text-primary);
    font-size: var(--font-size-lg);
}
.chapter-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}
.chapter-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
    width: 100%;
}
.chapter-item:hover {
    background-color: var(--accent-color);
    border-color: var(--primary-color);
}
.chapter-item.current {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}
.chapter-item.completed {
    background-color: #f0fdf4;
    border-color: #22c55e;
}
.chapter-item.completed .chapter-status {
    color: #22c55e;
    font-weight: 600;
}
.chapter-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: var(--border-color);
    color: var(--text-secondary);
    border-radius: 50%;
    font-weight: 600;
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}
.chapter-item.current .chapter-number {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}
.chapter-item.completed .chapter-number {
    background-color: #22c55e;
    color: white;
}
.chapter-info {
    flex: 1;
    min-width: 0;
}
.chapter-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin: 0 0 var(--spacing-1) 0;
    line-height: 1.4;
}
.chapter-status {
    font-size: var(--font-size-xs);
    color: var(--text-light);
}
/* Chapter Content */
.chapter-content {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.chapter-container {
    padding: var(--spacing-8);
}
.chapter-header {
    margin-bottom: var(--spacing-8);
    padding-bottom: var(--spacing-6);
    border-bottom: 2px solid var(--border-color);
}
.chapter-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-6);
}
.learning-objectives {
    background: var(--accent-color);
    padding: var(--spacing-5);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--primary-color);
}
.learning-objectives h4 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-3);
    color: var(--text-primary);
}
.learning-objectives ul {
    margin: 0;
    padding-left: var(--spacing-5);
}
.learning-objectives li {
    margin-bottom: var(--spacing-2);
    color: var(--text-secondary);
    line-height: 1.6;
}
/* Chapter Content Text */
.chapter-content-text {
    margin-bottom: var(--spacing-10);
    line-height: 1.7;
    color: var(--text-primary);
}
.chapter-content-text h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin: var(--spacing-8) 0 var(--spacing-4) 0;
    color: var(--text-primary);
}
.chapter-content-text h4 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: var(--spacing-6) 0 var(--spacing-3) 0;
    color: var(--text-primary);
}
.chapter-content-text h5 {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin: var(--spacing-4) 0 var(--spacing-2) 0;
    color: var(--text-primary);
}
.chapter-content-text p {
    margin-bottom: var(--spacing-4);
}
.chapter-content-text ul,
.chapter-content-text ol {
    margin: var(--spacing-4) 0;
    padding-left: var(--spacing-6);
}
.chapter-content-text li {
    margin-bottom: var(--spacing-2);
}
.chapter-content-text strong {
    font-weight: 600;
    color: var(--text-primary);
}
.safety-tip {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: var(--radius-md);
    padding: var(--spacing-5);
    margin: var(--spacing-6) 0;
    border-left: 4px solid #f59e0b;
}
.safety-tip strong {
    color: #92400e;
}
/* Questions Section */
.chapter-questions {
    background: var(--accent-color);
    padding: var(--spacing-8);
    margin: var(--spacing-8) -var(--spacing-8) var(--spacing-8) -var(--spacing-8);
    border-top: 2px solid var(--border-color);
}
.chapter-questions h4 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--spacing-3);
    color: var(--text-primary);
}
.chapter-questions > p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-6);
}
/* Question Containers */
.question-container {
    background: var(--surface);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-6);
    transition: all var(--transition-normal);
}
.question-container:last-child {
    margin-bottom: 0;
}
.question-header {
    margin-bottom: var(--spacing-5);
}
.question-text {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.5;
}
/* Multiple Choice Questions */
.question-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}
.option {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: var(--surface);
}
.option:hover {
    border-color: var(--primary-color);
    background-color: var(--accent-color);
}
.option input[type="radio"] {
    margin: 0;
    flex-shrink: 0;
    margin-top: 2px;
}
.option-text {
    flex: 1;
    line-height: 1.5;
    color: var(--text-primary);
}
.option.correct {
    border-color: #22c55e;
    background-color: #f0fdf4;
}
.option.incorrect {
    border-color: #ef4444;
    background-color: #fef2f2;
}
.option.selected {
    border-width: 2px;
}
.correct-indicator {
    color: #22c55e;
    font-weight: bold;
    font-size: var(--font-size-lg);
    margin-left: var(--spacing-2);
}
/* Fill in the Blank Questions */
.fill-blank-input {
    display: inline-block;
    min-width: 120px;
    max-width: 200px;
    padding: var(--spacing-2) var(--spacing-3);
    border: 2px solid var(--primary-color);
    border-radius: var(--radius-sm);
    font-size: inherit;
    font-family: inherit;
    background: var(--surface);
    transition: all var(--transition-fast);
    margin: 0 var(--spacing-1);
    box-sizing: border-box;
}
.fill-blank-input:focus {
    outline: none;
    border-color: var(--primary-dark);
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}
.fill-blank-input.correct {
    border-color: #22c55e;
    background-color: #f0fdf4;
}
.fill-blank-input.incorrect {
    border-color: #ef4444;
    background-color: #fef2f2;
}
.fill-blank-input[readonly] {
    cursor: default;
}
.question-actions {
    margin-top: var(--spacing-5);
    display: flex;
    gap: var(--spacing-3);
    align-items: center;
}
.check-answer-btn {
    padding: var(--spacing-3) var(--spacing-6);
}
.help-text {
    font-size: var(--font-size-sm);
    color: var(--text-light);
    font-style: italic;
}
/* Question Feedback */
.question-feedback {
    margin-top: var(--spacing-5);
    padding: var(--spacing-5);
    border-radius: var(--radius-md);
    border-left: 4px solid;
    display: flex;
    gap: var(--spacing-3);
    align-items: flex-start;
}
.question-feedback.correct {
    background-color: #f0fdf4;
    border-color: #22c55e;
}
.question-feedback.incorrect {
    background-color: #fef2f2;
    border-color: #ef4444;
}
.feedback-icon {
    font-size: var(--font-size-lg);
    flex-shrink: 0;
    margin-top: 2px;
}
.feedback-text {
    flex: 1;
    line-height: 1.6;
}
.feedback-text strong {
    display: block;
    margin-bottom: var(--spacing-2);
    font-weight: 600;
}
.correct-answers {
    margin-top: var(--spacing-3);
    padding: var(--spacing-3);
    background: rgba(239, 68, 68, 0.1);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}
/* Chapter Navigation Footer */
.chapter-navigation-footer {
    margin-top: var(--spacing-10);
    padding-top: var(--spacing-6);
    border-top: 2px solid var(--border-color);
}
.nav-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
}
@media (max-width: 767px) {
    .nav-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .training-nav-btn {
        width: 100%;
        justify-content: center;
    }
}
.complete-chapter-btn {
    font-weight: 600;
}
.complete-chapter-btn:disabled {
    background-color: #22c55e;
    cursor: default;
    opacity: 0.8;
}
.complete-chapter-btn:disabled:hover {
    transform: none;
    background-color: #22c55e;
}
/* Screen Reader Only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Focus Styles for Accessibility */
.training-nav-btn:focus,
.chapter-item:focus,
.module-start-btn:focus,
.breadcrumb-btn:focus,
.check-answer-btn:focus {
    outline: 3px solid var(--primary-light);
    outline-offset: 2px;
}
.option:focus-within {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
/* Error Message */
.error-message {
    background: #fef2f2;
    border: 1px solid #ef4444;
    color: #dc2626;
    padding: var(--spacing-5);
    border-radius: var(--radius-md);
    text-align: center;
    font-weight: 500;
}
/* Loading States */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-8);
    color: var(--text-secondary);
}
/* Mobile Specific Styles */
@media (max-width: 767px) {
    .training-content {
        gap: var(--spacing-6);
    }
    /* Fix fill-in-blank inputs for mobile */
    .fill-blank-input {
        display: block;
        width: 100%;
        min-width: auto;
        max-width: none;
        margin: var(--spacing-2) 0;
        font-size: var(--font-size-sm);
    }
    .question-text {
        line-height: 1.8;
    }
    .chapter-navigation {
        position: static;
        order: -1;
    }
}
/* Very small screens - further optimize fill-in-blank inputs */
@media (max-width: 480px) {
    .fill-blank-input {
        padding: var(--spacing-2);
        margin: var(--spacing-1) 0;
        font-size: var(--font-size-xs);
    }
    .question-container {
        padding: var(--spacing-4);
    }
    .question-text {
        font-size: var(--font-size-base);
        line-height: 2;
    }
    .chapter-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--spacing-3);
    }
    .module-header-section {
        padding: var(--spacing-6);
    }
    .module-header-section .module-title {
        font-size: var(--font-size-2xl);
    }
    .chapter-container {
        padding: var(--spacing-6);
    }
    .chapter-questions {
        margin-left: -var(--spacing-6);
        margin-right: -var(--spacing-6);
        padding: var(--spacing-6);
    }
}
/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .training-module-card,
    .chapter-item,
    .question-container,
    .option {
        border-width: 2px;
    }
    .progress-bar {
        border: 1px solid var(--text-primary);
    }
}
/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .training-module-card,
    .chapter-item,
    .option,
    .question-container {
        transition: none;
    }
    .training-module-card:hover,
    .chapter-item:hover {
        transform: none;
    }
    .progress-fill {
        transition: none;
    }
}
/* Print Styles */
@media print {
    .training-system {
        background: white !important;
        color: black !important;
    }
    .chapter-navigation,
    .nav-buttons,
    .question-actions {
        display: none;
    }
    .chapter-content {
        border: none;
        box-shadow: none;
    }
    .question-container {
        break-inside: avoid;
    }
}
/* Green links - only apply to text links, not ANY button classes */
a:not([class*="btn-"]):not(.nav-link):not(.nav-brand-link):not(.social-link):not(.service-contact) {
    color: #10b981 !important;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}
a:not([class*="btn-"]):not(.nav-link):not(.nav-brand-link):not(.social-link):not(.service-contact):hover {
    color: #059669 !important;
    text-decoration: underline;
}
/* Ensure buttons keep their original styling */
.btn,
.btn-primary {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.btn:hover,
.btn-primary:hover {
    color: #ffffff !important;
    text-decoration: none !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/* Remove white text override for btn-secondary and btn-large to allow proper dark text on light backgrounds */
.btn-secondary:hover {
    text-decoration: none !important;
}
/* Prevent btn-large secondary buttons from inheriting white text */
.btn-secondary.btn-large {
    color: var(--text-primary) !important;
}
/* Modern Contact Page Styling */
.contact-info-section {
    display: grid;
    gap: var(--spacing-6);
    margin: var(--spacing-8) 0;
}
.contact-method {
    display: flex;
    align-items: flex-start;
    padding: var(--spacing-6);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.contact-method::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
}
.contact-method:hover::before {
    left: 100%;
}
.contact-method-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(8, 145, 178, 0.3);
    border-color: rgba(8, 145, 178, 0.4);
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.1) 0%, rgba(8, 145, 178, 0.05) 100%);
}
.contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    margin-right: var(--spacing-4);
    flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3);
    transition: all 0.3s ease;
}
.contact-method:hover .contact-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 30px rgba(8, 145, 178, 0.5);
}
.contact-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}
.contact-details h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-1);
    color: var(--text-primary);
}
.contact-details p {
    font-size: var(--font-size-base);
    font-weight: 500;
    margin-bottom: var(--spacing-1);
    color: var(--primary-color);
}
.contact-details span {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    opacity: 0.8;
}
/* Modern Contact Form Styling */
.contact-form {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    padding: var(--spacing-8);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}
.contact-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--primary-color));
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
    0%, 100% { background-position: 200% 0; }
    50% { background-position: -200% 0; }
}
.form-group {
    margin-bottom: var(--spacing-6);
    position: relative;
}
.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--spacing-2);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.form-input {
    width: 100%;
    padding: var(--spacing-4);
    border: 2px solid rgba(8, 145, 178, 0.2);
    border-radius: 12px;
    font-size: var(--font-size-base);
    background: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    position: relative;
}
.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.1);
    background: rgba(255, 255, 255, 1);
    transform: translateY(-1px);
}
.form-input:hover:not(:focus) {
    border-color: rgba(8, 145, 178, 0.4);
    background: rgba(255, 255, 255, 0.9);
}
/* Modern Contact Page Hero */
.page-hero {
    background: linear-gradient(180deg, #000000 0%, #0a1929 25%, #1e3a5f 50%, #4a5f7f 75%, #e5e7eb 100%);
    padding: var(--spacing-16) 0 var(--spacing-12);
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
    pointer-events: none;
}
.page-hero .page-title,
.page-hero .page-subtitle {
    color: white;
    position: relative;
    z-index: 2;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8), 0 0 16px rgba(0, 0, 0, 0.6);
}
.page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(8, 145, 178, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(8, 145, 178, 0.1) 0%, transparent 50%);
    pointer-events: none;
}
.page-hero-content {
    text-align: center;
    position: relative;
    z-index: 2;
}
.page-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: white;
    margin-bottom: var(--spacing-4);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.page-subtitle {
    font-size: var(--font-size-lg);
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}
/* Contact Overview Section Modern Styling */
.overview-section {
    padding: var(--spacing-16) 0;
    position: relative;
}
.overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-12);
    align-items: start;
}
@media (max-width: 768px) {
    .overview-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }
    .contact-info-section {
        margin: var(--spacing-6) 0;
    }
    .contact-form {
        padding: var(--spacing-6);
    }
    
    .contact-form-container {
        margin-top: var(--spacing-6);
        padding: var(--spacing-2);
    }
    
    .intro-visual {
        height: auto;
        min-height: 400px;
    }
    .page-title {
        font-size: var(--font-size-2xl);
    }
}/* Professional About Page Styling */

/* About Page Hero Section */
.store-hero {
    background: linear-gradient(135deg, #1e3a8a 0%, #0891b2 50%, #10b981 100%);
    color: white;
    padding: var(--spacing-20) 0;
}

.hero-badge {
    background: var(--brand-teal) !important;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: 50px;
    margin-bottom: var(--spacing-6);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.badge-text {
    color: white;
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.badge-highlight {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: white;
    background: rgba(255, 255, 255, 0.15);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    margin-left: var(--spacing-1);
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-8);
    margin-top: var(--spacing-8);
}

.stat-item {
    text-align: center;
    padding: var(--spacing-8) var(--spacing-6);
    background: rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(20px);
    border: 2px solid var(--brand-teal);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
    border-color: #0d9488;
}

.stat-number {
    display: block;
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: var(--spacing-3);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.hero-stats .stat-label {
    color: #10b981 !important;
    font-size: var(--font-size-base);
    font-weight: 600;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
    line-height: 1.5;
}

/* Company Introduction Section */
.company-intro {
    background: var(--section-white);
    padding: var(--spacing-12) 0;
}

.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-16);
    align-items: center;
}

.intro-badge {
    display: inline-block;
    background: var(--section-light-teal);
    color: var(--brand-teal);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--spacing-4);
    border: 1px solid var(--brand-teal);
}

.intro-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-6);
    line-height: 1.2;
}

.intro-text {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-8);
}

.intro-highlights {
    display: grid;
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-8);
}

.highlight-item {
    padding: var(--spacing-6);
    background: var(--section-light-grey);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--brand-orange);
}

.highlight-content h4 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-2);
}

.highlight-content p {
    color: var(--text-primary);
    line-height: 1.5;
}

.intro-cta {
    display: flex;
    gap: var(--spacing-4);
    flex-wrap: wrap;
}

.btn-outline {
    padding: var(--spacing-3) var(--spacing-6);
    background: transparent;
    color: var(--brand-teal);
    border: 2px solid var(--brand-teal);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 500;
    transition: all var(--transition-normal);
}

.btn-outline:hover {
    background: var(--brand-teal);
    color: white;
    transform: translateY(-1px);
}

.intro-visual {
    position: relative;
}

.visual-container {
    position: relative;
    height: 400px;
    background: linear-gradient(45deg, var(--section-light-teal), var(--section-light-blue));
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.intro-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.visual-bg {
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23ffffff" stroke-width="0.5" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
}

.company-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
    position: relative;
    z-index: 2;
}

.metric {
    text-align: center;
    padding: var(--spacing-6);
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.metric-value {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--brand-teal);
    margin-bottom: var(--spacing-1);
}

.metric-label {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

/* Timeline Section Styling */
.company-timeline {
    background: var(--section-light-grey);
    padding: var(--spacing-12) 0;
}

.section-badge {
    background: var(--brand-teal);
    display: inline-block;
    
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--spacing-4);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.timeline-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--brand-teal);
    transform: translateX(-50%);
}

.timeline-items {
    display: grid;
    gap: var(--spacing-12);
}

.timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--spacing-6);
    align-items: center;
}

.timeline-item:nth-child(even) .timeline-content {
    grid-column: 1;
    text-align: right;
}

.timeline-item:nth-child(odd) .timeline-content {
    grid-column: 3;
    text-align: left;
}

.timeline-marker {
    grid-column: 2;
    width: 80px;
    height: 80px;
    background: var(--brand-teal);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    border: 4px solid white;
    box-shadow: var(--shadow-lg);
}

.marker-inner {
    color: white;
    font-weight: 700;
    font-size: var(--font-size-sm);
}

.timeline-content {
    background: white;
    padding: var(--spacing-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    position: relative;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.timeline-content::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border: 12px solid transparent;
    transform: translateY(-50%);
}

.timeline-item:nth-child(even) .timeline-content::before {
    right: -24px;
    border-left-color: white;
}

.timeline-item:nth-child(odd) .timeline-content::before {
    left: -24px;
    border-right-color: white;
}

.timeline-year {
    color: var(--brand-orange);
    font-weight: 700;
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-2);
}

.timeline-content h3 {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: var(--spacing-3);
    font-size: var(--font-size-lg);
}

.timeline-content p {
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: var(--spacing-4);
}

.timeline-tags {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.tag {
    background: var(--section-light-teal);
    color: var(--brand-teal);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    border: 1px solid var(--brand-teal);
}

/* Missing Section Classes - Professional Backgrounds */
.industries-modern {
    background: var(--section-cool-grey);
    padding: var(--spacing-16) 0;
}

.company-intro {
    background: var(--section-light-blue);
    padding: var(--spacing-16) 0;
}

.services-overview {
    background: var(--section-light-grey);
    padding: var(--spacing-16) 0;
}

/* DUPLICATE SECTION REMOVED - These styles were already defined above in the main section background styles */

/* Team Section Styling */
.team-section {
    background: var(--section-white);
    padding: var(--spacing-20) 0;
    margin-bottom: var(--spacing-20);
}

.team-section .section-header {
    margin-bottom: var(--spacing-8);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-12);
}

.team-member {
    background: var(--section-light-grey);
    padding: var(--spacing-8);
    border-radius: var(--radius-xl);
    text-align: center;
    border: 1px solid var(--border-color);
    transition: all var(--transition-normal);
}

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

.member-avatar {
    margin-bottom: var(--spacing-6);
}

.avatar-placeholder {
    width: 120px;
    height: 120px;
    background: linear-gradient(45deg, var(--brand-teal), var(--brand-orange));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border: 4px solid white;
    box-shadow: var(--shadow-md);
}

.avatar-icon {
    color: white;
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-align: center;
}

.member-name {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-2);
}

.member-role {
    color: var(--brand-teal);
    font-weight: 600;
    margin-bottom: var(--spacing-4);
    font-size: var(--font-size-sm);
}

.member-bio {
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: var(--spacing-6);
}

.member-skills {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    justify-content: center;
}

.skill-tag {
    background: white;
    color: var(--brand-teal);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xs);
    font-weight: 500;
    border: 1px solid var(--brand-teal);
}

.team-cta {
    text-align: center;
    background: var(--section-light-teal);
    padding: var(--spacing-12);
    border-radius: var(--radius-xl);
    border: 1px solid var(--brand-teal);
}

.cta-content h3 {
    color: var(--text-primary);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--spacing-4);
}

.cta-content p {
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-6);
}

/* Values Section Styling */
.values-section {
    background: var(--section-light-grey);
    padding: var(--spacing-20) 0;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-8);
}

.value-card {
    background: white;
    padding: var(--spacing-8);
    border-radius: var(--radius-xl);
    text-align: center;
    border: 1px solid var(--border-color);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.value-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-teal), var(--brand-orange));
}

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

/* Modern Coverage Section */
.coverage-modern {
    background: #ffffff;
    padding: var(--spacing-20) 0;
}

.coverage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-8);
    margin-top: var(--spacing-12);
}

.coverage-card {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    padding: var(--spacing-10);
    border-radius: var(--radius-xl);
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.coverage-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--brand-teal), var(--brand-orange));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.coverage-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(16, 185, 129, 0.15);
    border-color: var(--brand-teal);
}

.coverage-card:hover::before {
    opacity: 1;
}

.coverage-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--brand-teal), #0891b2);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-6);
    color: white;
    transition: all 0.3s ease;
}

.coverage-card:hover .coverage-icon {
    transform: scale(1.1) rotate(5deg);
}

.coverage-card h3 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-4);
}

.coverage-card p {
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: var(--font-size-base);
}

/* Modern Partners Section */
.partners-modern {
    background: var(--section-light-grey);
    padding: var(--spacing-20) 0;
}

.partners-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--spacing-10);
    margin-top: var(--spacing-12);
}

.partner-card {
    background: #ffffff;
    border-radius: var(--radius-xl);
    padding: var(--spacing-10);
    border: 3px solid #e5e7eb;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    position: relative;
    overflow: hidden;
}

/* Teal border for Partners section on About page */
.partners-modern:first-of-type .partner-card {
    border-color: #10b981;
}

/* Burnt orange border for Certifications section on About page */
.partners-modern + .partners-modern .partner-card {
    border-color: #ff6b35;
}

.partner-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), transparent);
    border-radius: 0 0 0 100%;
    transition: all 0.3s ease;
}

/* Teal gradient for Partners cards */
.partners-modern:first-of-type .partner-card::after {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), transparent);
}

/* Burnt orange gradient for Certifications cards */
.partners-modern + .partners-modern .partner-card::after {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.05), transparent);
}

.partner-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(16, 185, 129, 0.15);
}

/* Keep teal border on hover for Partners */
.partners-modern:first-of-type .partner-card:hover {
    border-color: #10b981;
    box-shadow: 0 12px 40px rgba(16, 185, 129, 0.25);
}

/* Keep burnt orange border on hover for Certifications */
.partners-modern + .partners-modern .partner-card:hover {
    border-color: #ff6b35;
    box-shadow: 0 12px 40px rgba(255, 107, 53, 0.25);
}

.partner-card:hover::after {
    width: 150px;
    height: 150px;
}

.partner-logo-container {
    background: #f8fafc;
    padding: var(--spacing-8);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    border: 1px solid #e5e7eb;
}

.partner-logo-img {
    max-width: 200px;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.partner-details h3 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-2);
}

.partner-role {
    color: var(--brand-teal);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-4);
}

/* Burnt orange role color for Certifications */
.partners-modern + .partners-modern .partner-role {
    color: #ff6b35;
}

.partner-description {
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: var(--font-size-base);
}

/* Responsive adjustments for modern sections */
@media (max-width: 768px) {
    .coverage-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }
    
    .partners-showcase {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }
    
    .coverage-card,
    .partner-card {
        padding: var(--spacing-8);
    }
}

.value-card h3 {
    color: var(--text-primary);
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin: var(--spacing-6) 0 var(--spacing-4);
}

.value-card p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-6);
}

.value-stats {
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--border-color);
}

.stat-highlight {
    background: var(--section-light-teal);
    color: var(--brand-teal);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border: 1px solid var(--brand-teal);
}

/* Industries Section Styling */
.industries-modern {
    background: var(--section-white);
    padding: var(--spacing-20) 0;
}

.industries-showcase {
    display: grid;
    gap: var(--spacing-8);
}

.industry-spotlight {
    background: var(--section-light-grey);
    padding: var(--spacing-8);
    border-radius: var(--radius-xl);
    border-left: 6px solid var(--brand-orange);
    color: var(--text-primary);
}

.spotlight-content h3 {
    color: var(--text-primary);
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-4);
}

.spotlight-content p {
    color: var(--text-primary);
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .intro-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }
    
    .timeline-item {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .timeline-item:nth-child(even) .timeline-content,
    .timeline-item:nth-child(odd) .timeline-content {
        grid-column: 1;
        text-align: left;
    }
    
    .timeline-content::before {
        display: none;
    }
    
    .timeline-line {
        left: 40px;
    }
    
    .timeline-item {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding-left: 100px;
        margin-bottom: var(--spacing-12);
        min-height: auto;
    }
    
    .timeline-marker {
        position: absolute !important;
        left: 0;
        top: 20px;
        width: 80px;
        height: 80px;
        grid-column: unset;
    }
    
    .timeline-content {
        grid-column: 1 !important;
        text-align: left !important;
        margin: 0 !important;
        min-height: auto;
    }
    
    .intro-cta {
        justify-content: center;
    }
    
    .hero-stats {
        grid-template-columns: 1fr;
    }
}

/* Enhanced global text overflow prevention for About page and all sections */
p, h1, h2, h3, h4, h5, h6, span, div {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Additional text handling for specific content areas */
.intro-text, .page-subtitle, .section-subtitle, .service-description {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}

/* About Page Intro Video Container - MISSING STYLES ADDED */
.intro-video-container {
    width: 100%;
    max-width: 100%;
    margin: var(--spacing-6) 0;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: var(--section-light-grey);
    position: relative;
}

.intro-video {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-xl);
}

/* Enhanced Mobile Responsiveness for About Page */
@media (max-width: 768px) {
    /* Store Hero Section Mobile Fixes */
    .store-hero {
        padding: var(--spacing-12) 0 var(--spacing-8);
        min-height: auto;
    }
    
    .store-hero-content {
        text-align: center;
    }
    
    .hero-badge {
    background: var(--brand-teal) !important;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-2);
        align-items: center;
        margin-bottom: var(--spacing-6);
    }
    
    .page-title {
        font-size: 2rem;
        line-height: 1.2;
        margin-bottom: var(--spacing-4);
    }
    
    .page-subtitle {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: var(--spacing-6);
    }
    
    .hero-stats {
        flex-direction: column;
        gap: var(--spacing-4);
        align-items: center;
    }
    
    .stat-item {
        text-align: center;
        min-width: auto;
    }
    
    /* Contact Section Mobile Responsiveness */
    .company-intro {
        padding: var(--spacing-8) 0;
    }
    
    .intro-content {
        margin-bottom: var(--spacing-8);
    }
    
    .intro-title {
        font-size: 1.75rem;
        line-height: 1.3;
        margin-bottom: var(--spacing-4);
    }
    
    .intro-text {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: var(--spacing-6);
    }
    
    .intro-highlights {
        flex-direction: column;
        gap: var(--spacing-4);
    }
    
    .highlight-item {
        margin-bottom: var(--spacing-4);
    }
    
    .contact-info-section {
        margin-top: var(--spacing-6);
    }
    
    .contact-method {
        padding: var(--spacing-4);
        margin-bottom: var(--spacing-4);
    }
    
    .contact-details h3 {
        font-size: 1.1rem;
    }
    
    .contact-details p {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    .contact-details span {
        font-size: 0.8rem;
    }
    
    /* Visual container - use flexbox for mobile reordering - FIXED: Apply to correct parent */
    .visual-container {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-6);
    }
    
    /* CRITICAL: Move metrics below form on mobile using order */
    .company-metrics {
        order: 2; /* This moves metrics after form */
        margin-top: var(--spacing-6);
        justify-content: center;
        gap: var(--spacing-6);
    }
    
    .contact-form-container {
        order: 1; /* This keeps form at top */
    }
    
    .metric {
        text-align: center;
    }
    
    .metric-value {
        font-size: 1.25rem;
    }
    
    .metric-label {
        font-size: 0.8rem;
    }
    
    /* Services Grid Mobile Responsiveness */
    .automation-services {
        padding: var(--spacing-8) 0;
    }
    
    .section-title {
        font-size: 1.75rem;
        line-height: 1.3;
        margin-bottom: var(--spacing-4);
    }
    
    .section-subtitle {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: var(--spacing-6);
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }
    
    .service-card {
        padding: var(--spacing-6);
        text-align: center;
    }
    
    .service-title {
        font-size: 1.1rem;
        margin-bottom: var(--spacing-3);
    }
    
    .service-description {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: var(--spacing-4);
    }
    
    /* Industries Grid Mobile Responsiveness */
    .industries-modern {
        padding: var(--spacing-8) 0;
    }
    
    .industries-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }
    
    .industry-card {
        padding: var(--spacing-6);
        text-align: center;
    }
    
    .industry-title {
        font-size: 1.1rem;
        margin-bottom: var(--spacing-3);
    }
    
    .industry-description {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    /* Footer Mobile Responsiveness */
    .footer {
        padding: var(--spacing-8) 0 var(--spacing-6);
    }
    
    /* Footer mobile centering handled in main footer-grid rules above */
    
    .footer-brand {
        margin-bottom: var(--spacing-6);
    }
    
    .footer-description {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    .footer-title {
        font-size: 1.1rem;
        margin-bottom: var(--spacing-3);
    }
    
    .footer-list li {
        margin-bottom: var(--spacing-2);
    }
    
    .footer-list a {
        font-size: 0.9rem;
    }
    
    .footer-contact p {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: var(--spacing-2);
    }
}

/* Small Mobile Devices - Extra responsive adjustments */
@media (max-width: 480px) {
    /* Hero Section - Extra Small Mobile */
    .store-hero {
        padding: var(--spacing-8) 0 var(--spacing-6);
    }
    
    .page-title {
        font-size: 1.75rem;
        line-height: 1.3;
    }
    
    .page-subtitle {
        font-size: 0.95rem;
    }
    
    .hero-stats {
        gap: var(--spacing-3);
    }
    
    .stat-item {
        padding: var(--spacing-3);
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
    .stat-label {
        font-size: 0.8rem;
    }
    
    /* Contact Section - Extra Small Mobile */
    .company-intro {
        padding: var(--spacing-6) 0;
    }
    
    .intro-title {
        font-size: 1.5rem;
        line-height: 1.3;
    }
    
    .intro-text {
        font-size: 0.9rem;
        line-height: 1.6;
    }
    
    .contact-method {
        padding: var(--spacing-3);
    }
    
    .contact-details h3 {
        font-size: 1rem;
    }
    
    .contact-details p {
        font-size: 0.85rem;
    }
    
    .contact-details span {
        font-size: 0.75rem;
    }
    
    /* Metrics - Extra Small Mobile */
    .company-metrics {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-4);
        margin-top: var(--spacing-4);
    }
    
    .metric {
        min-width: 120px;
    }
    
    .metric-value {
        font-size: 1.1rem;
    }
    
    .metric-label {
        font-size: 0.75rem;
    }
    
    /* Services Section - Extra Small Mobile */
    .automation-services {
        padding: var(--spacing-6) 0;
    }
    
    .section-title {
        font-size: 1.5rem;
        line-height: 1.3;
    }
    
    .section-subtitle {
        font-size: 0.9rem;
    }
    
    .service-card {
        padding: var(--spacing-4);
    }
    
    .service-title {
        font-size: 1rem;
    }
    
    .service-description {
        font-size: 0.85rem;
    }
    
    /* Industries Section - Extra Small Mobile */
    .industries-modern {
        padding: var(--spacing-6) 0;
    }
    
    .industry-card {
        padding: var(--spacing-4);
    }
    
    .industry-title {
        font-size: 1rem;
    }
    
    .industry-description {
        font-size: 0.85rem;
    }
    
    /* Footer - Extra Small Mobile */
    .footer {
        padding: var(--spacing-6) 0 var(--spacing-4);
    }
    
    .footer-grid {
        gap: var(--spacing-4);
        text-align: center;
    }
    
    .footer-title {
        font-size: 1rem;
    }
    
    .footer-description,
    .footer-list a,
    .footer-contact p {
        font-size: 0.85rem;
    }
    
    /* Container adjustments for extra small screens */
    .container {
        padding: 0 var(--spacing-3);
    }
}
    
    /* Intro Video Mobile */
    .intro-video-container {
        margin: var(--spacing-4) 0;
        border-radius: var(--radius-lg);
    }
    
    .intro-video {
        max-height: 250px;
        border-radius: var(--radius-lg);
    }
    
    /* Company Intro Grid Mobile */
    .intro-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-6);
    }
    
    .intro-visual {
        order: -1;
    }
    
    .visual-container {
        height: 300px;
    }
    
    /* Fix Value Card Text Visibility on Mobile */
    .value-card {
        background: white !important;
        color: var(--text-primary) !important;
        border: 1px solid var(--border-color);
        margin-bottom: var(--spacing-4);
        box-shadow: var(--shadow-sm);
    }
    
    .value-card h3 {
        color: var(--text-primary) !important;
        font-weight: 700;
        margin: var(--spacing-4) 0 var(--spacing-3);
        font-size: var(--font-size-lg);
    }
    
    .value-card p {
        color: var(--text-primary) !important;
        line-height: 1.6;
        font-size: var(--font-size-base);
        margin-bottom: var(--spacing-4);
    }
    
    .value-icon {
        margin-bottom: var(--spacing-4);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        background: var(--section-light-teal);
        border-radius: 50%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Fix Timeline Content Text Visibility */
    .timeline-content {
        background: white !important;
        color: var(--text-primary) !important;
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow-sm);
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    
    .timeline-content h3 {
        color: var(--text-primary) !important;
        font-weight: 600;
        margin-bottom: var(--spacing-3);
    }
    
    .timeline-content p {
        color: var(--text-primary) !important;
        line-height: 1.6;
        margin-bottom: var(--spacing-4);
    }
    
    .timeline-year {
        color: var(--brand-orange) !important;
        font-weight: 700;
    }
    
    /* Fix Highlight Items Text Visibility */
    .highlight-item {
        background: white !important;
        color: var(--text-primary) !important;
        border: 1px solid var(--border-color);
        border-left: 4px solid var(--brand-orange);
        margin-bottom: var(--spacing-4);
    }
    
    .highlight-content h4 {
        color: var(--text-primary) !important;
        font-weight: 600;
        margin-bottom: var(--spacing-2);
    }
    
    .highlight-content p {
        color: var(--text-primary) !important;
        line-height: 1.5;
    }
    
    /* Team Member Cards Mobile */
    .team-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-6);
    }
    
    .team-member {
        text-align: center;
    }
    
    /* Industries Mobile */
    .industries-showcase {
        gap: var(--spacing-6);
    }

@media (max-width: 480px) {
    /* Extra Small Mobile Adjustments */
    .store-hero {
        padding: var(--spacing-8) 0 var(--spacing-6);
    }
    
    .store-hero-content {
        padding: 0 var(--spacing-3);
    }
    
    .page-title {
        font-size: var(--font-size-xl) !important;
        line-height: 1.3;
        margin-bottom: var(--spacing-3);
    }
    
    .page-subtitle {
        font-size: var(--font-size-sm) !important;
        line-height: 1.4;
        margin-bottom: var(--spacing-4);
    }
    
    .hero-badge {
    background: var(--brand-teal) !important;
        padding: var(--spacing-2) var(--spacing-3);
        margin-bottom: var(--spacing-3);
    }
    
    .badge-text, .badge-highlight {
        font-size: 0.75rem;
    }
    
    .hero-stats {
        margin-top: var(--spacing-4);
        max-width: 250px;
    }
    
    .stat-item {
        padding: var(--spacing-2);
    }
    
    .stat-number {
        font-size: var(--font-size-xl);
    }
    
    .stat-label {
        font-size: 0.75rem;
    }
    
    /* Video Extra Small Mobile */
    .intro-video-container {
        margin: var(--spacing-3) 0;
        border-radius: var(--radius-md);
    }
    
    .intro-video {
        max-height: 200px;
        border-radius: var(--radius-md);
    }
    
    .visual-container {
        height: 250px;
    }
    
    /* Timeline Extra Small */
    .timeline-item {
        padding-left: 80px;
        margin-bottom: var(--spacing-8);
    }
    
    .timeline-marker {
        width: 60px !important;
        height: 60px !important;
        left: 0;
    }
    
    .timeline-line {
        left: 30px;
    }
    
    /* Value Cards Extra Small */
    .value-card {
        padding: var(--spacing-6);
    }
    
    .value-card h3 {
        font-size: var(--font-size-base);
        margin: var(--spacing-3) 0 var(--spacing-2);
    }
    
    .value-card p {
        font-size: var(--font-size-sm);
    }
}

/* Ensure long words don't overflow containers */
.timeline-content p, .value-card p, .member-bio, .intro-content p {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Additional overflow protection for containers */
.company-intro, .intro-content, .highlight-content, .member-info {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Enhanced Enterprise Metrics Section Styling */
.enterprise-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-6);
    margin-top: var(--spacing-12);
    padding: var(--spacing-8);
    background: linear-gradient(135deg, var(--brand-teal) 0%, #0f766e 100%);
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.enterprise-metrics::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

.metric-item {
    text-align: center;
    position: relative;
    z-index: 2;
    padding: var(--spacing-4);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.metric-item:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.metric-number {
    display: block;
    font-size: var(--font-size-4xl);
    font-weight: 800;
    color: white;
    line-height: 1;
    margin-bottom: var(--spacing-2);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.metric-label {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

/* Mobile responsive adjustments for metrics */
@media (max-width: 768px) {
    .enterprise-metrics {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-4);
        padding: var(--spacing-6);
        margin-top: var(--spacing-8);
    }
    
    .metric-number {
        font-size: var(--font-size-3xl);
    }
    
    .metric-label {
        font-size: var(--font-size-xs);
    }
}

@media (max-width: 480px) {
    .enterprise-metrics {
        grid-template-columns: 1fr;
        gap: var(--spacing-3);
        padding: var(--spacing-4);
    }
    
    /* Enhanced typography scaling for very small screens */
    .page-title {
        font-size: 1.75rem !important;
        line-height: 1.1;
    }
    
    .page-subtitle {
        font-size: 0.9rem !important;
        line-height: 1.4;
    }
    
    .section-title {
        font-size: 1.5rem !important;
        line-height: 1.2;
    }
    
    /* Proper container padding to prevent edge-to-edge text */
    .container {
        padding: 0 var(--spacing-3);
    }
    
    /* Fine-tuned spacing for very small screens */
    .hero-stats {
        gap: var(--spacing-3);
        margin-top: var(--spacing-4);
    }
    
    .stat-item {
        padding: var(--spacing-3);
    }
    
    .contact-form-container {
        padding: var(--spacing-3);
    }
    
    .company-metrics {
        margin-top: var(--spacing-4);
        gap: var(--spacing-4);
    }
    
    .metric {
        padding: var(--spacing-2);
    }
    
    .metric-value {
        font-size: 1.1rem;
    }
    
    .metric-label {
        font-size: 0.75rem;
    }
}

/* Force cache refresh */
/* Updated Wed Sep 17 08:59:28 AM UTC 2025 */

/* ====================================
   PRODUCT SHOWCASE STYLES
   ==================================== */

/* Category Navigation */
.category-nav {
    background: var(--section-light-grey);
    padding: var(--spacing-16) 0;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-6);
    margin-top: var(--spacing-8);
}

.category-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    text-decoration: none;
    color: var(--text-primary);
    transition: all var(--transition-normal);
    display: block;
    box-shadow: var(--shadow-sm);
}

.category-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--primary-color);
}

.category-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-4);
    display: block;
}

.category-card h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--spacing-2);
    color: var(--text-primary);
}

.category-card p {
    color: var(--text-light);
    line-height: 1.6;
    font-size: var(--font-size-sm);
}

/* Product Categories */
.product-category {
    padding: 5rem 0;
    background: #ffffff;
}

.product-category.alternate-bg {
    background: #fafafa;
}

.category-header {
    text-align: left;
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 3px solid var(--brand-teal);
}

.category-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.category-description {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    max-width: 700px;
    line-height: 1.6;
}

/* Product Grid and Cards */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-8);
    margin-top: var(--spacing-8);
}

.product-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

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

.product-image {
    height: 200px;
    background: var(--section-light-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border-color);
}

.product-placeholder {
    font-size: 4rem;
    opacity: 0.6;
}

.product-info {
    padding: var(--spacing-6);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-manufacturer {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-2);
}

.product-name {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-1);
    line-height: 1.3;
}

.product-model {
    font-size: var(--font-size-sm);
    color: var(--text-light);
    font-family: 'Courier New', monospace;
    background: var(--section-light-grey);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    display: inline-block;
    margin-bottom: var(--spacing-4);
}

.product-description {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-4);
    flex: 1;
}

.product-specs {
    margin-bottom: var(--spacing-6);
}

.spec-item {
    font-size: var(--font-size-sm);
    color: var(--text-light);
    padding: var(--spacing-1) 0;
    border-bottom: 1px solid var(--section-light-grey);
    display: flex;
    align-items: center;
}

.spec-item:before {
    content: "▸";
    color: var(--primary-color);
    margin-right: var(--spacing-2);
    font-weight: bold;
}

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

.product-actions {
    display: flex;
    gap: var(--spacing-3);
    margin-top: auto;
}

.product-actions .btn-primary,
.product-actions .btn-secondary {
    flex: 1;
    text-align: center;
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

/* Service Excellence Section */
.service-excellence {
    background: var(--section-light-teal);
    padding: var(--spacing-16) 0;
}

/* REMOVED DUPLICATE SERVICE GRID - Using main definitions at lines 2362-2475 instead */

/* REMOVED DUPLICATE SERVICE CARD STYLES - Using main definitions at lines 2456-2475 instead */

.service-action {
    margin-top: auto;
}

.service-action .btn-primary,
.service-action .btn-secondary {
    padding: var(--spacing-3) var(--spacing-5);
    font-size: var(--font-size-sm);
}

/* Contact CTA Section */
.contact-cta {
    background: var(--hero-gradient);
    color: white;
    padding: var(--spacing-16) 0;
    text-align: center;
}

.cta-content h2 {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    margin-bottom: var(--spacing-4);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.cta-content p {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-8);
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.cta-actions {
    display: flex;
    gap: var(--spacing-4);
    justify-content: center;
    flex-wrap: wrap;
}

.btn-large {
    padding: var(--spacing-4) var(--spacing-6);
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.btn-outline {
    background: transparent;
    color: white;
    border: 2px solid white;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-outline:hover {
    background: white;
    color: var(--primary-color);
}

/* Hero CTA Section Improvements */
.hero-cta-section {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: var(--spacing-8);
    margin-top: var(--spacing-8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-cta-section .cta-text h3 {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    margin-bottom: var(--spacing-3);
    color: white;
}

.hero-cta-section .cta-text p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--spacing-6);
    line-height: 1.6;
}

.cta-buttons {
    display: flex;
    gap: var(--spacing-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* Responsive Design for Mobile */
@media (max-width: 768px) {
    .category-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }

    .category-card {
        padding: var(--spacing-4);
        text-align: center;
    }

    .products-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }

    .product-card {
        margin: 0 var(--spacing-2);
    }

    .product-actions {
        flex-direction: column;
        gap: var(--spacing-2);
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }

    .cta-actions {
        flex-direction: column;
        align-items: center;
    }

    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }

    .btn-large {
        width: 100%;
        max-width: 300px;
    }

    .category-title {
        font-size: var(--font-size-3xl);
    }

    .product-name {
        font-size: var(--font-size-lg);
    }

    .hero-cta-section {
        padding: var(--spacing-6);
        margin: var(--spacing-6) var(--spacing-2) 0;
    }
}

@media (max-width: 480px) {
    .product-card {
        margin: 0;
    }

    .category-card {
        padding: var(--spacing-3);
    }

    .product-info {
        padding: var(--spacing-4);
    }

    .service-card {
        padding: var(--spacing-4);
    }

    .contact-cta {
        padding: var(--spacing-12) var(--spacing-2);
    }

    .cta-content h2 {
        font-size: var(--font-size-3xl);
    }

    .hero-cta-section .cta-text h3 {
        font-size: var(--font-size-xl);
    }
}

/* ========================================
   INLINE CSS CLEANUP - PROPER CLASSES
   ======================================== */

/* Policy page content container */
.policy-content-container {
    max-width: 800px;
    margin: 0 auto;
}

/* Footer designer attribution link */
.footer-designer-link {
    color: var(--primary-light);
    text-decoration: none;
}

/* Footer white contact links */
.footer-contact-link {
    color: white;
    text-decoration: none;
}

/* Cookie notice links */
.cookie-notice-link {
    color: var(--primary-light);
}

/* Blog content text styling moved to css/blog.css */

/* ========================================
   PROFESSIONAL BOX CONTAINER SYSTEM
   Service card styles moved to css/services.css
   ======================================== */

/* Note: .feature-icon-png sizing is defined in the UNIFIED ICON SIZING SYSTEM section above */

/* Category icon PNG styling - Medium icons for categories */
.category-icon-png {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: inline-block;
}

/* Service icon styling for PNG icons */
.service-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: inline-block;
}

/* Industry icon styling for PNG icons - Prominent industry indicators */
.industry-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: inline-block;
}

/* Service card title */
.service-card__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-2);
    text-align: center;
    line-height: 1.3;
}

/* Service card description */
.service-card__description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    text-align: center;
    margin-bottom: var(--spacing-3);
}

/* Service card badge */
.service-card__badge {
    display: inline-block;
    background: var(--brand-teal);
    color: white;
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin: 0 auto;
    text-align: center;
    display: block;
    width: fit-content;
}

.service-card__badge--accent {
    background: var(--brand-orange);
}

.service-card__badge--outline {
    background: transparent;
    color: var(--brand-teal);
    border: 1px solid var(--brand-teal);
}

/* Service cards grid - Base layout */
.service-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-6);
    margin-top: var(--spacing-8);
}

/* Service card icon - Base styling */
.service-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-teal);
    margin: 0 auto var(--spacing-3);
    font-size: 2.5rem;
}

.service-card__icon svg {
    width: 2.5rem;
    height: 2.5rem;
    stroke-width: 2;
}

/* Large service cards for main pages */
.service-cards-grid--large {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-8);
}

.service-cards-grid--large .service-card {
    padding: var(--spacing-8);
}

.service-cards-grid--large .service-card__icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-4);
}

.service-cards-grid--large .service-card__icon svg {
    width: 3rem;
    height: 3rem;
}

.service-cards-grid--large .service-card__title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-3);
}

.service-cards-grid--large .service-card__description {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-4);
}

/* Compact service cards for secondary sections */
.service-cards-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-4);
}

.service-cards-grid--compact .service-card {
    padding: var(--spacing-4);
}

.service-cards-grid--compact .service-card__icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-2);
}

.service-cards-grid--compact .service-card__icon svg {
    width: 2rem;
    height: 2rem;
}

.service-cards-grid--compact .service-card__title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-1);
}

.service-cards-grid--compact .service-card__description {
    font-size: var(--font-size-xs);
    margin-bottom: var(--spacing-2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .service-cards-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }
    
    .service-cards-grid--large {
        grid-template-columns: 1fr;
    }
    
    .service-cards-grid--compact {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    
    .service-card {
        padding: var(--spacing-4);
    }
    
    .service-cards-grid--large .service-card {
        padding: var(--spacing-6);
    }
}

@media (max-width: 480px) {
    .service-cards-grid,
    .service-cards-grid--large,
    .service-cards-grid--compact {
        grid-template-columns: 1fr;
    }
    
    .service-card__icon {
        font-size: 2rem !important;
    }
    
    .service-card__icon svg {
        width: 2rem !important;
        height: 2rem !important;
    }
}

/* Industry showcase cards */
.industry-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-6);
    margin-top: var(--spacing-8);
}

.industry-card {
    background: linear-gradient(135deg, var(--brand-teal) 0%, var(--primary-dark) 100%);
    color: white;
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    text-align: center;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.industry-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.industry-card:hover::before {
    opacity: 1;
}

.industry-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.25);
}

.industry-card__icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-3);
    display: block;
}

.industry-card__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-2);
    line-height: 1.3;
}

.industry-card__description {
    font-size: var(--font-size-sm);
    line-height: 1.5;
    opacity: 0.9;
    margin-bottom: var(--spacing-3);
}

.industry-card__badge {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    display: inline-block;
    backdrop-filter: blur(4px);
}

/* Responsive adjustments for industry cards */
@media (max-width: 768px) {
    .industry-cards-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }
    
    .industry-card {
        padding: var(--spacing-4);
    }
}

/* Capabilities Section Styling */
.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-8);
    margin-top: var(--spacing-8);
}

.capability-item {
    background: #ffffff;
    padding: var(--spacing-8);
    border-radius: var(--radius-lg);
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.capability-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    border-color: var(--primary-color);
}

.capability-item h4 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: var(--spacing-4);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: var(--spacing-2);
}

.capability-item p {
    color: #374151;
    line-height: 1.7;
    margin-bottom: var(--spacing-6);
}

.tech-tags {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    margin-top: var(--spacing-4);
}

.tech-tag {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: 50px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Coverage Section Styling */
.coverage-content {
    max-width: 900px;
    margin: var(--spacing-8) auto 0;
}

.coverage-text {
    background: #ffffff;
    padding: var(--spacing-10);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.coverage-text h3 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: var(--spacing-6);
    text-align: center;
}

.coverage-text > p {
    font-size: var(--font-size-lg);
    color: #374151;
    line-height: 1.7;
    margin-bottom: var(--spacing-8);
    text-align: center;
}

.coverage-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-8);
}

.coverage-highlight {
    background: #f8fafc;
    padding: var(--spacing-6);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--primary-color);
}

.coverage-highlight h4 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: var(--spacing-3);
}

.coverage-highlight p {
    color: #4b5563;
    line-height: 1.6;
}

.coverage-benefits {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: var(--spacing-8);
    border-radius: var(--radius-xl);
    border: 1px solid #cbd5e1;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    margin-top: var(--spacing-6);
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-4);
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.benefit-item:last-child {
    margin-bottom: 0;
}

.benefit-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15), 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

.benefit-icon {
    width: 32px;
    height: 32px;
    color: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

.benefit-item span:last-child {
    font-weight: 600;
    color: #1e293b;
    font-size: 1.1rem;
    line-height: 1.5;
}

/* Responsive adjustments for new sections */
@media (max-width: 768px) {
    .capabilities-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }
    
    .capability-item {
        padding: var(--spacing-6);
    }
    
    .coverage-text {
        padding: var(--spacing-6);
    }
    
    .coverage-highlights {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }
}


/* Course Icon Styling */
.course-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #4CAF50, #66BB6A);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-4);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
    transition: all var(--transition-normal);
}

.course-icon svg {
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transition: transform var(--transition-normal);
}

/* Styling for colored PNG course icons - ensure consistency */
.course-icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: inline-block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transition: transform var(--transition-normal);
}

/* Note: .course-icon-png styling is defined in the UNIFIED ICON SIZING SYSTEM section above */

/* Brochure card hover effects moved to css/safety-training.css */


/* Mobile optimization for course icons */
@media (max-width: 480px) {
    .course-icon {
        width: 48px;
        height: 48px;
    }
}


/* Safety Training page loader styles moved to css/safety-training.css */


/* Department Contact Styles */
.contact-departments {
    padding: 60px 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.departments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 40px;
}

.department-card {
    background: white;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
}

.department-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    border-color: #0891b2;
}

.department-card--primary {
    border: 2px solid #0891b2;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

.department-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.department-icon svg {
    width: 24px;
    height: 24px;
    stroke: white;
    stroke-width: 2;
}

.department-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
}

.department-description {
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 16px;
}

.department-contact {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #0891b2;
    font-weight: 500;
    transition: color 0.3s ease;
}

.department-contact:hover {
    color: #0e7490;
}

.contact-email {
    font-family: "Courier New", monospace;
    font-size: 0.875rem;
}

.department-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #0891b2;
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
}

.contact-cta {
    margin-top: 48px;
    padding: 32px;
    background: white;
    border-radius: 12px;
    border: 2px dashed #0891b2;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.cta-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
}

.cta-content p {
    color: #64748b;
    margin: 0;
}
    content: "✓";
    color: #10b981;
    font-weight: 700;
    font-size: 1.2rem;
    margin-right: 0.75rem;
}

.service-features-modern li:last-child {
    border-bottom: none;
}

.btn-outline-modern {
    display: inline-flex;
    align-items: center;
    padding: 0.875rem 1.75rem;
    min-height: 44px;
    background: transparent;
    color: #10b981;
    border: 2px solid #10b981;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    align-self: flex-start;
}

.btn-outline-modern:hover {
    background: #10b981;
    color: white;
    transform: translateX(4px);
}

/* CTA Section */
.cta-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.cta-title {
    font-size: 2.75rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    text-align: center;
}

.cta-description {
    font-size: 1.2rem;
    color: #6b7280;
    line-height: 1.7;
    margin-bottom: 2.5rem;
    text-align: center;
}

.cta-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.btn-large {
    padding: 1.125rem 2.5rem;
    font-size: 1.125rem;
}

.cta-contact {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-phone, .cta-email {
    font-size: 1rem;
    color: #374151;
    font-weight: 500;
}

.cta-phone a, .cta-email a {
    color: #10b981;
    text-decoration: none;
    transition: color 0.3s ease;
}

.cta-phone a:hover, .cta-email a:hover {
    color: #0f766e;
    text-decoration: underline;
}

/* Responsive Design for Modern Services */
@media (max-width: 1024px) {
    .services-grid-modern {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .hero-title-large {
        font-size: 2.5rem;
    }
    
    .hero-subtitle-large {
        font-size: 1.125rem;
    }
    
    .services-modern {
        padding: 3rem 0;
    }
    
    .services-grid-modern {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .service-card-modern {
        padding: 2rem;
    }
    
    .service-title-modern {
        font-size: 1.5rem;
    }
    
    .cta-title {
        font-size: 2rem;
    }
    
    .cta-description {
        font-size: 1.05rem;
    }
    
    .cta-contact {
        flex-direction: column;
        gap: 1rem;
    }
}


/* ============================================================================
   SERVICE COVERAGE & TRUSTED PARTNERS SECTIONS
   ============================================================================ */

/* Service Coverage Section */
.service-coverage {
    background: var(--section-light-grey);
    padding: var(--spacing-16) 0;
}

.coverage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-8);
    margin-top: var(--spacing-12);
}

.coverage-item {
    background: var(--background-light);
    padding: var(--spacing-8);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.coverage-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.15);
}

.coverage-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    border-radius: 50%;
    margin-bottom: var(--spacing-6);
}

.coverage-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-3);
}

.coverage-description {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Trusted Partners Section */
.trusted-partners {
    background: var(--section-white);
    padding: var(--spacing-16) 0;
}

.logo-fallback {
    font-weight: 700;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-sm);
    display: inline-block;
}

.partner-name {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-2);
}

.partner-description {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

/* Trusted Partners Section - Full Color Logos */
.trusted-partners .partner-logo {
    background: white !important;
    padding: 3rem !important;
    height: auto !important;
    min-height: 350px !important;
    max-height: none !important;
    width: 400px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin: 0 !important;
    border: 3px solid #10b981;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Burnt orange border for Certifications section - using adjacent sibling */
.trusted-partners + .trusted-partners .partner-logo {
    border-color: #ff6b35 !important;
}

.trusted-partners .partner-logo img,
.trusted-partners .partner-image {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    max-height: 300px !important;
    min-height: 150px !important;
    object-fit: contain !important;
    filter: none !important;
}

.trusted-partners .partners-grid {
    max-width: 1400px;
    margin: var(--spacing-16) auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

@media (max-width: 1024px) {
    .trusted-partners .partner-logo {
        width: 350px !important;
        min-height: 300px !important;
        padding: 2.5rem !important;
    }
    
    .trusted-partners .partner-logo img,
    .trusted-partners .partner-image {
        max-height: 250px !important;
    }
}

@media (max-width: 768px) {
    .trusted-partners .partners-grid {
        flex-direction: column;
        gap: var(--spacing-8);
    }
    
    .trusted-partners .partner-logo {
        min-height: 250px !important;
        padding: 2rem !important;
        width: 100% !important;
        max-width: 500px !important;
    }
    
    .trusted-partners .partner-logo img,
    .trusted-partners .partner-image {
        max-height: 220px !important;
    }
}

.partners-certifications {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-6);
    margin-top: var(--spacing-12);
    padding-top: var(--spacing-8);
    border-top: 1px solid var(--border-color);
}

.certification-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    background: var(--section-light-teal);
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--brand-teal-dark);
}

.cert-icon {
    color: var(--primary-color);
}

/* ========================================
   MODERN ABOUT PAGE ENHANCEMENTS
   ======================================== */

/* Enhanced Company Intro Section */
.company-intro {
    padding: var(--spacing-20) 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.intro-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--spacing-20);
    align-items: center;
}

.intro-content {
    max-width: 100%;
}

.intro-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--spacing-6);
    background: linear-gradient(135deg, #111827, #374151);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.intro-text {
    font-size: var(--font-size-lg);
    line-height: 1.8;
    color: #4b5563;
    margin-bottom: var(--spacing-8);
}

.intro-highlights {
    display: grid;
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-10);
}

.highlight-item {
    padding: var(--spacing-6);
    background: white;
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--brand-teal);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.highlight-item:hover {
    transform: translateX(8px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15);
}

.highlight-content h4 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: #111827;
    margin-bottom: var(--spacing-3);
}

.highlight-content p {
    color: #6b7280;
    line-height: 1.6;
}

.intro-cta {
    display: flex;
    gap: var(--spacing-4);
    flex-wrap: wrap;
}

.intro-visual {
    position: relative;
}

.visual-container {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.intro-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.intro-visual:hover .intro-image {
    transform: scale(1.05);
}

/* Enhanced History Section */
.history-section {
    padding: var(--spacing-20) 0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

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

.history-text h3 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: #111827;
    margin-top: var(--spacing-12);
    margin-bottom: var(--spacing-4);
    padding-top: var(--spacing-8);
    border-top: 2px solid var(--brand-teal);
}

.history-text h3:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.history-text p {
    font-size: var(--font-size-lg);
    line-height: 1.8;
    color: #4b5563;
    margin-bottom: var(--spacing-6);
}

/* Enhanced Values Section */
.values-section {
    padding: var(--spacing-20) 0;
    background: linear-gradient(135deg, #f0fdfa 0%, #ecfdf5 100%);
}

.values-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-6);
    margin-top: var(--spacing-12);
}

.value-detail-card {
    background: white;
    padding: var(--spacing-8);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border-top: 4px solid var(--brand-teal);
    transition: all 0.3s ease;
}

.value-detail-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(16, 185, 129, 0.15);
}

.value-detail-card h4 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--brand-teal);
    margin-bottom: var(--spacing-4);
}

.value-detail-card p {
    color: #6b7280;
    line-height: 1.7;
}

/* Enhanced Testimonials Section */
.testimonials-section {
    padding: var(--spacing-20) 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-16);
}

.testimonial-card {
    background: white;
    padding: var(--spacing-8);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(16, 185, 129, 0.15);
    border-color: var(--brand-teal);
}

.testimonial-content p {
    font-size: var(--font-size-lg);
    line-height: 1.8;
    color: #374151;
    font-style: italic;
    margin-bottom: var(--spacing-6);
}

.testimonial-author h4 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #111827;
    margin-bottom: var(--spacing-2);
}

.testimonial-author p {
    color: #6b7280;
    font-size: var(--font-size-base);
}

.company-size {
    display: inline-block;
    margin-top: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-3);
    background: var(--section-light-teal);
    color: var(--brand-teal-dark);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

/* About Page Metrics - Horizontal Bar Design */
.about-metrics {
    padding: var(--spacing-20) 0;
    background: transparent;
    margin: var(--spacing-16) 0;
}

.about-metrics .enterprise-metrics {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 0;
    padding: var(--spacing-10) var(--spacing-8);
    background: linear-gradient(135deg, #10b981 0%, #14b8a6 50%, #06b6d4 100%);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(16, 185, 129, 0.2);
}

.about-metrics .metric-item {
    flex: 1;
    text-align: center;
    color: white;
    padding: var(--spacing-6) var(--spacing-4);
    position: relative;
}

.about-metrics .metric-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
}

.about-metrics .metric-number {
    display: block;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    margin-bottom: var(--spacing-2);
    color: white;
    line-height: 1;
}

.about-metrics .metric-label {
    display: block;
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
    line-height: 1.4;
    max-width: 200px;
    margin: 0 auto;
}

/* Legacy enterprise-metrics for other pages */
.enterprise-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-6);
    padding: var(--spacing-12);
    background: linear-gradient(135deg, var(--brand-teal), var(--primary-light));
    border-radius: var(--radius-xl);
}

.metric-item {
    text-align: center;
    color: white;
}

.metric-number {
    display: block;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    margin-bottom: var(--spacing-2);
}

.metric-label {
    display: block;
    font-size: var(--font-size-sm);
    opacity: 0.95;
    font-weight: 500;
}

/* Mobile responsive for about metrics */
@media (max-width: 768px) {
    .about-metrics .enterprise-metrics {
        flex-wrap: wrap;
        gap: var(--spacing-4);
    }
    
    .about-metrics .metric-item:not(:last-child)::after {
        display: none;
    }
    
    .about-metrics .metric-item {
        flex: 0 0 calc(50% - var(--spacing-2));
    }
}

@media (max-width: 480px) {
    .about-metrics .enterprise-metrics {
        flex-direction: column;
        padding: var(--spacing-6);
    }
    
    .about-metrics .metric-item {
        flex: 1 1 auto;
        width: 100%;
        padding: var(--spacing-4);
    }
}

/* Enhanced Expertise Cards */
.expertise-section {
    padding: var(--spacing-20) 0;
}

.expertise-grid {
    display: grid;
    gap: var(--spacing-12);
}

.expertise-item {
    background: white;
    padding: var(--spacing-10);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    border-left: 6px solid var(--brand-teal);
}

.expertise-item h3 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: #111827;
    margin-bottom: var(--spacing-4);
}

.expertise-item > p {
    font-size: var(--font-size-lg);
    line-height: 1.8;
    color: #4b5563;
    margin-bottom: var(--spacing-6);
}

.expertise-details h4 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--brand-teal);
    margin-bottom: var(--spacing-4);
}

.expertise-details ul {
    list-style: none;
    padding: 0;
}

.expertise-details li {
    padding: var(--spacing-3) 0;
    padding-left: var(--spacing-8);
    position: relative;
    color: #6b7280;
    line-height: 1.6;
}

.expertise-details li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--brand-teal);
    font-weight: bold;
}

/* Enhanced Industry Cards */
.industry-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-8);
}

.industry-card {
    background: white;
    padding: var(--spacing-8);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border-top: 4px solid var(--brand-teal);
}

.industry-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(16, 185, 129, 0.15);
}

.industry-card__icon {
    width: 80px;
    height: 80px;
    margin-bottom: var(--spacing-6);
    background: linear-gradient(135deg, var(--section-light-teal), var(--background-light));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
}

.industry-card__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: #111827;
    margin-bottom: var(--spacing-4);
}

.industry-card__description {
    color: #6b7280;
    line-height: 1.7;
    margin-bottom: var(--spacing-4);
}

.industry-card__badge {
    display: inline-block;
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--section-light-teal);
    color: var(--brand-teal-dark);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

/* Capabilities Section Enhancement */
.capabilities-section {
    padding: var(--spacing-20) 0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.capabilities-grid {
    display: grid;
    gap: var(--spacing-8);
}

.capability-item {
    background: white;
    padding: var(--spacing-8);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.capability-item:hover {
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.15);
}

.capability-item h4 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: #111827;
    margin-bottom: var(--spacing-4);
}

.capability-item p {
    color: #6b7280;
    line-height: 1.7;
    margin-bottom: var(--spacing-4);
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.tech-tag {
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--section-light-teal);
    color: var(--brand-teal-dark);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

/* ========================================
   RESPONSIVE DESIGN - MOBILE OPTIMIZATION
   ======================================== */

@media (max-width: 1024px) {
    .intro-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-12);
    }
    
    .intro-visual {
        order: -1;
    }
    
    .enterprise-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .company-intro,
    .history-section,
    .values-section,
    .testimonials-section,
    .expertise-section,
    .capabilities-section {
        padding: var(--spacing-12) 0;
    }
    
    .intro-title {
        font-size: 2rem;
    }
    
    .intro-cta {
        flex-direction: column;
    }
    
    .intro-cta .btn-primary,
    .intro-cta .btn-outline {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    
    .enterprise-metrics {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
        padding: var(--spacing-8);
    }
    
    .metric-number {
        font-size: 2rem;
    }
    
    .expertise-item,
    .capability-item {
        padding: var(--spacing-6);
    }
    
    .industry-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .values-details {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .intro-highlights {
        gap: var(--spacing-4);
    }
    
    .highlight-item {
        padding: var(--spacing-4);
    }
    
    .history-text h3 {
        font-size: var(--font-size-xl);
        margin-top: var(--spacing-8);
    }
    
    .value-detail-card,
    .testimonial-card {
        padding: var(--spacing-6);
    }
}


/* Newsletter Section Enhancement */
.industries-modern .overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-16);
    align-items: center;
}

.overview-content {
    max-width: 100%;
}

.about-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: #111827;
    margin-bottom: var(--spacing-4);
}

.overview-description {
    font-size: var(--font-size-lg);
    line-height: 1.8;
    color: #4b5563;
    margin-bottom: var(--spacing-6);
}

.qualities-list {
    list-style: none;
    padding: 0;
    margin-top: var(--spacing-6);
}

.qualities-list li {
    padding: var(--spacing-3) 0;
    padding-left: var(--spacing-8);
    position: relative;
    color: #4b5563;
    line-height: 1.6;
}

.qualities-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--brand-teal);
    font-weight: bold;
    font-size: 1.2rem;
}

/* Contact Form in Newsletter */
.overview-visual .contact-form {
    background: white;
    padding: var(--spacing-8);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: var(--spacing-6);
}

.form-label {
    display: block;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: #374151;
    margin-bottom: var(--spacing-2);
}

.form-input {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    transition: all 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.form-submit {
    width: 100%;
    padding: var(--spacing-4);
    min-height: 44px;
    background: linear-gradient(135deg, var(--brand-teal), var(--primary-light));
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.form-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}

/* Categories Section Enhancement */
.automation-services .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-6);
    margin-top: var(--spacing-12);
}

.service-card {
    background: white;
    padding: var(--spacing-8);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border-top: 4px solid var(--brand-teal);
    text-align: center;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(16, 185, 129, 0.15);
}

.service-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--spacing-4);
    color: var(--brand-teal);
}

.service-icon svg {
    width: 100%;
    height: 100%;
}

.service-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #111827;
    margin-bottom: var(--spacing-3);
}

.service-card p {
    color: #6b7280;
    line-height: 1.6;
}

/* ========================================
   BLOG PAGE MOBILE RESPONSIVENESS
   Blog page styles moved to css/blog.css
   ======================================== */

/* ========================================
   MODERN CONTACT PAGE ENHANCEMENTS
   ======================================== */

/* Contact Methods Grid */
.contact-methods-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-8);
    margin-top: var(--spacing-12);
}

/* Enhanced Contact Method Cards */
.contact-method-card {
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    padding: 3rem 2.5rem;
    border-radius: 24px;
    border: 1px solid rgba(16, 185, 129, 0.08);
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.contact-method-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.04) 0%, rgba(15, 118, 110, 0.04) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.contact-method-card:hover::before {
    opacity: 1;
}

.contact-method-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 25px 50px rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.25);
}

.method-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.2);
    position: relative;
}

.method-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.contact-method-card:hover .method-icon {
    transform: scale(1.15) rotate(8deg);
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.35);
}

.method-icon svg {
    width: 36px;
    height: 36px;
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    position: relative;
    z-index: 1;
}

.method-details {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}

.method-label {
    font-size: 0.8125rem;
    color: #6b7280;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.method-value {
    font-size: 1.25rem;
    color: #111827;
    font-weight: 700;
    transition: color 0.3s ease;
}

.contact-method-card:hover .method-value {
    color: #10b981;
}

/* Split Screen Contact Section Enhancement */
.modern-contact-section {
    padding: 0;
    background: white;
}

.contact-split-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 700px;
}

.contact-image-side {
    background: linear-gradient(135deg, var(--section-light-teal), var(--background-light));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-12);
    position: relative;
    overflow: hidden;
}

.contact-image-side::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

.contact-hero-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
}

.contact-form-side {
    background: white;
    padding: var(--spacing-16);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modern-form-container {
    width: 100%;
    max-width: 500px;
}

.modern-form-container h2 {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 700;
    color: #111827;
    margin-bottom: var(--spacing-3);
    background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.form-intro {
    font-size: var(--font-size-base);
    color: #6b7280;
    margin-bottom: var(--spacing-8);
    line-height: 1.6;
}

.modern-contact-form .form-group {
    margin-bottom: var(--spacing-6);
}

.modern-contact-form .form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: #374151;
    margin-bottom: var(--spacing-2);
}

.modern-contact-form .form-input,
.modern-contact-form .form-textarea {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-family: inherit;
    transition: all 0.3s ease;
    background: white;
}

.modern-contact-form .form-input:focus,
.modern-contact-form .form-textarea:focus {
    outline: none;
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

.modern-contact-form .form-textarea {
    resize: vertical;
    min-height: 120px;
}

.form-submit-modern {
    width: 100%;
    padding: var(--spacing-4);
    min-height: 44px;
    background: linear-gradient(135deg, var(--brand-teal), var(--primary-light));
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.form-submit-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(16, 185, 129, 0.3);
}

/* Contact Details Section */
.contact-details-section {
    background: var(--section-light-teal);
    padding: var(--spacing-16) 0;
}

.contact-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-8);
}

.detail-card {
    background: white;
    padding: var(--spacing-8);
    border-radius: var(--radius-xl);
    border-left: 4px solid var(--brand-teal);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.detail-card h3 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--brand-teal);
    margin-bottom: var(--spacing-4);
}

.detail-card p {
    color: #4b5563;
    line-height: 1.8;
    font-size: var(--font-size-base);
}

.detail-card strong {
    color: #111827;
    font-weight: 600;
}

/* Trust Section Enhancement */
.trust-section {
    padding: var(--spacing-20) 0;
    background: white;
    text-align: center;
}

.trust-content h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: #111827;
    margin-bottom: var(--spacing-4);
}

.trust-content > p {
    font-size: var(--font-size-lg);
    color: #4b5563;
    max-width: 800px;
    margin: 0 auto var(--spacing-12);
    line-height: 1.8;
}

.trust-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-8);
    max-width: 900px;
    margin: 0 auto;
}

.trust-stat {
    padding: var(--spacing-6);
    background: linear-gradient(135deg, var(--section-light-teal), white);
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.trust-stat:hover {
    border-color: var(--brand-teal);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(16, 185, 129, 0.15);
}

.stat-number {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    font-size: var(--font-size-base);
    color: #6b7280;
    font-weight: 500;
}

/* ========================================
   CONTACT PAGE MOBILE RESPONSIVENESS
   ======================================== */

@media (max-width: 1024px) {
    .contact-split-container {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    
    .contact-image-side {
        padding: var(--spacing-8);
        min-height: 400px;
    }
    
    .contact-form-side {
        padding: var(--spacing-12) var(--spacing-6);
    }
    
    .trust-stats {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }
}

@media (max-width: 768px) {
    .contact-methods-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }
    
    .contact-method-card {
        padding: var(--spacing-6);
    }
    
    .method-icon {
        width: 60px;
        height: 60px;
    }
    
    .method-icon svg {
        width: 28px;
        height: 28px;
    }
    
    .contact-image-side {
        min-height: 300px;
        padding: var(--spacing-6);
    }
    
    .contact-form-side {
        padding: var(--spacing-8) var(--spacing-4);
    }
    
    .contact-details-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }
    
    .detail-card {
        padding: var(--spacing-6);
    }
}

@media (max-width: 480px) {
    .contact-method-card {
        padding: var(--spacing-4);
    }
    
    .method-icon {
        width: 50px;
        height: 50px;
    }
    
    .method-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .method-value {
        font-size: var(--font-size-base);
    }
    
    .contact-image-side {
        min-height: 250px;
        padding: var(--spacing-4);
    }
    
    .contact-hero-image {
        border-radius: var(--radius-md);
    }
    
    .contact-form-side {
        padding: var(--spacing-6) var(--spacing-4);
    }
    
    .modern-form-container h2 {
        font-size: 1.5rem;
    }
    
    .form-intro {
        font-size: var(--font-size-sm);
    }
    
    .modern-contact-form .form-group {
        margin-bottom: var(--spacing-4);
    }
    
    .detail-card h3 {
        font-size: var(--font-size-lg);
    }
    
    .stat-number {
        font-size: 2rem;
    }
}