/* Mobile Optimizations - Conservative Approach + CLS Prevention
   ============================================================= */

/* Prevent Cumulative Layout Shift - CRITICAL FOR CORE WEB VITALS */
.client-logo-item {
  min-height: 60px; /* Reserve space for mobile logos */
}

.testimonial-card {
  min-height: 200px; /* Reserve space for testimonials */
}

.stat-item {
  min-height: 100px; /* Reserve space for stats */
}

.site-header {
  min-height: 80px; /* Reserve space for navigation */
}

.stats-module {
  min-height: 400px; /* Prevent module loading shifts */
}

.solutions-tabs-section {
  min-height: 500px; /* Prevent module loading shifts */
}

/* Font loading optimization for mobile CLS */
.hero-headline {
  font-feature-settings: "kern" 1;
  text-rendering: optimizeSpeed;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.fonts-loaded .hero-headline {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Images - prevent layout shift */
img {
  max-width: 100%;
  height: auto;
}

/* Critical Mobile Fixes for All Broken Sections */

/* 1. Fix Mobile Navigation Menu */
@media (max-width: 768px) {
  /* Fix navbar toggle button visibility and styling */
  .site-header .navbar-toggle {
    display: flex !important;
    background: transparent !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }
  
  .site-header .navbar-toggle:hover {
    background: rgba(0, 0, 0, 0.05) !important;
  }
  
  /* Fix mobile menu positioning and visibility */
  .site-header .navbar-menu {
    position: fixed !important;
    top: var(--header-height, 80px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: white !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    z-index: 999 !important;
    overflow-y: auto !important;
    padding: 2rem 1rem !important;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1) !important;
  }
  
  /* Show menu when active */
  .site-header .navbar-menu.active,
  .site-header .navbar-menu.is-open {
    transform: translateX(0) !important;
    display: block !important;
  }
  
  /* Fix navigation layout */
  .site-header .navbar-nav {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }
  
  .site-header .nav-item {
    width: 100% !important;
  }
  
  .site-header .nav-link {
    display: block !important;
    padding: 1rem !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  }
  
  /* Fix dropdown menu for mobile */
  .site-header .dropdown-menu {
    position: static !important;
    display: none !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    background: rgba(0, 0, 0, 0.02) !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  
  .site-header .has-dropdown.active .dropdown-menu {
    display: block !important;
  }
  
  .site-header .dropdown-link {
    padding-left: 2rem !important;
  }
  
  /* Fix CTA button in mobile menu */
  .site-header .navbar-cta {
    margin: 2rem 0 0 0 !important;
    text-align: center !important;
  }
  
  .site-header .navbar-cta .btn {
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 auto !important;
  }
  
  /* Logo optimization */
  .site-header .logo-image {
    max-width: 150px !important;
    height: auto !important;
  }
  
  /* Ensure header stays on top */
  .site-header {
    position: relative !important;
    z-index: 1000 !important;
  }
  
  .site-header.sticky-header {
    position: fixed !important;
  }
}

/* 2. Fix Hero Banners on Mobile - HIDE THEM */
@media (max-width: 768px) {
  /* Hide banners completely on mobile */
  .hero .header-banner,
  .hero .purple-banner {
    display: none !important;
  }
  
  /* Fix hero section spacing without banners */
  .hero {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  /* Adjust hero container padding to account for no banners */
  .hero > .container {
    padding-top: 2rem !important;
  }
  
  /* Fix hero headline size */
  .hero .hero-headline {
    font-size: 2rem !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
  }
  
  /* Fix hero description */
  .hero .hero-description {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1.5rem !important;
  }
  
  /* Fix hero CTA button */
  .hero .hero-cta-button {
    padding: 0.875rem 2rem !important;
    font-size: 1rem !important;
  }
  
  /* Touch target optimization */
  a, button, .btn, .cta-button {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Better button spacing */
  .btn, .cta-button {
    padding: 12px 24px;
  }
}

/* 3. Performance optimizations that don't break layout */
@media (max-width: 768px) {
  /* Simplify shadows for performance */
  .card, .stats-card {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  
  /* Optimize transitions */
  * {
    transition-duration: 0.2s !important;
  }
  
  /* Remove hover effects on touch devices */
  @media (hover: none) {
    .card:hover,
    .stats-card:hover,
    .team-member:hover {
      transform: none;
    }
  }
}

/* 3. Fix Trusted Leaders Stats Section - PROPERLY CENTERED */
@media (max-width: 768px) {
  /* Fix the stats module stats - not hero stats */
  .stats-module .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem 1rem !important;
    margin: 2rem auto !important;
    max-width: 100% !important;
    padding: 0 1rem !important;
  }
  
  .stats-module .stat-item {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .stats-module .stat-number {
    font-size: 2.5rem !important;
    text-align: center !important;
  }
  
  .stats-module .stat-label {
    font-size: 0.9rem !important;
    text-align: center !important;
  }
  
  /* Hero stats (if different from stats module) */
  .hero .stats-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin: 2rem auto !important;
    max-width: 400px !important;
    padding: 0 1rem !important;
  }
  
  /* Fix stats card alignment - ensure they are centered */
  .hero .stats-card {
    text-align: center !important;
    padding: 1.5rem !important;
    margin: 0 auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Fix stat numbers */
  .hero .stat-number {
    font-size: 2.5rem !important;
    margin-bottom: 0.5rem !important;
    text-align: center !important;
    width: 100% !important;
  }
  
  /* Fix stat description */
  .hero .stat-description {
    font-size: 1rem !important;
    text-align: center !important;
    width: 100% !important;
  }
  
  /* Font optimizations */
  body {
    font-size: 16px;
  }
  
  h2 {
    font-size: 2rem;
  }
  
  h3 {
    font-size: 1.5rem;
  }
}

/* 4. Hide Logo Carousel and Improve Testimonials */
@media (max-width: 768px) {
  /* Hide the logo carousel section entirely on mobile */
  .client-logos-section {
    display: none !important;
  }
  
  /* Fix Trusted Leaders Testimonials - MAX SPECIFICITY */
  .stats-module .testimonials-section {
    margin-top: 3rem !important;
    padding: 0 1rem !important;
    display: block !important;
  }
  
  .stats-module .testimonials-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    padding: 0 1rem !important;
  }
  
  .stats-module .testimonial-card {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    text-align: left !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Ensure quote is visible with DARK TEXT */
  .stats-module .testimonial-card .testimonial-quote,
  .stats-module .testimonial-card blockquote {
    display: block !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: #374151 !important;
    margin: 0 0 1.5rem 0 !important;
    font-style: italic !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-weight: 400 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  /* Ensure author section is visible with max specificity */
  .stats-module .testimonial-card .testimonial-author {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    padding-top: 1rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  .stats-module .testimonial-card .author-image {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Ensure author info is visible with max specificity */
  .stats-module .testimonial-card .author-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  .stats-module .testimonial-card .author-name {
    display: block !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    font-size: 1rem !important;
    margin-bottom: 0.25rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    line-height: 1.2 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  .stats-module .testimonial-card .author-institution {
    display: block !important;
    font-size: 0.875rem !important;
    color: #4b5563 !important;
    margin-bottom: 0.25rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    line-height: 1.3 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  .stats-module .testimonial-card .author-title {
    display: block !important;
    font-size: 0.8rem !important;
    color: #6b7280 !important;
    opacity: 1 !important;
    visibility: visible !important;
    line-height: 1.3 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  /* Ensure proper spacing */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Stack grid items on mobile */
  .grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  /* Adjust section padding */
  section {
    padding: 3rem 0;
  }
}

/* 5. Fix Testimonials Carousel */
@media (max-width: 768px) {
  /* Fix Hero Testimonials Section */
  .hero .testimonials-section {
    margin: 2rem auto !important;
    padding: 0 1rem !important;
  }
  
  /* Fix testimonial carousel container */
  .hero .testimonials-carousel {
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  
  /* Fix testimonial content wrapper */
  .hero .testimonial-content {
    padding: 1.25rem !important;
  }
  
  /* Fix testimonial slide visibility */
  .hero .testimonial-slide {
    opacity: 0 !important;
    position: absolute !important;
  }
  
  .hero .testimonial-slide.active {
    opacity: 1 !important;
    position: relative !important;
  }
  
  /* Fix testimonial layout - vertical on mobile */
  .hero .testimonial-horizontal {
    flex-direction: column !important;
    text-align: center !important;
    gap: 1rem !important;
    align-items: center !important;
  }
  
  /* Fix avatar */
  .hero .testimonial-avatar {
    width: 60px !important;
    height: 60px !important;
    margin: 0 auto !important;
    border: 2px solid rgba(107, 33, 168, 0.2) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }
  
  .hero .testimonial-avatar img,
  .hero .headshot-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
  }
  
  /* Fix testimonial text container */
  .hero .testimonial-text {
    text-align: center !important;
    width: 100% !important;
  }
  
  /* Fix quote text */
  .hero .testimonial-quote {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    padding: 0 0.5rem !important;
    text-align: center !important;
    margin-bottom: 1rem !important;
    color: #475569 !important;
    font-style: italic !important;
    position: relative !important;
  }
  
  /* Fix quote marks */
  .hero .testimonial-quote::before {
    font-size: 1.5rem !important;
    left: -0.5rem !important;
    top: -0.5rem !important;
  }
  
  /* Fix author info */
  .hero .testimonial-author-inline {
    justify-content: center !important;
    font-size: 0.85rem !important;
    padding-left: 0 !important;
    text-align: center !important;
    flex-wrap: wrap !important;
  }
  
  .hero .testimonial-author-inline::before {
    display: none !important;
  }
  
  .hero .author-name {
    font-size: 0.9rem !important;
    color: #6B21A8 !important;
  }
  
  .hero .author-title,
  .hero .author-company {
    font-size: 0.8rem !important;
    color: #64748b !important;
  }
  
  /* Fix dots navigation */
  .hero .testimonial-dots {
    margin-top: 1rem !important;
    gap: 0.5rem !important;
    padding: 0.5rem !important;
  }
  
  .hero .dot {
    width: 8px !important;
    height: 8px !important;
    border: 1.5px solid rgba(107, 33, 168, 0.3) !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
  }
  
  .hero .dot.active {
    background: #6B21A8 !important;
    border-color: #6B21A8 !important;
    transform: scale(1.2) !important;
  }
}

/* 7. Hide video on mobile, show image fallback */
@media (max-width: 768px) {
  .dashboard-video-wrapper {
    display: none;
  }
  
  .mobile-fallback-image {
    display: block;
  }
}

/* 8. Optimize scrolling */
@media (max-width: 768px) {
  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }
  
  /* Optimize touch scrolling */
  .scroll-container {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
  }
}

/* 7. Additional Mobile Performance & UX Fixes */
@media (max-width: 768px) {
  /* Prevent horizontal scroll */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
  }
  
  .container,
  .section,
  section {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  
  /* Fix any elements that might cause overflow */
  pre, code, table {
    overflow-x: auto !important;
    max-width: 100% !important;
  }
  
  /* Ensure all flex containers wrap properly */
  .flex,
  [class*="flex"] {
    flex-wrap: wrap !important;
  }
  
  /* Fix form elements */
  input, textarea, select {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Fix video containers */
  .video-container,
  .dashboard-video-wrapper {
    width: 100% !important;
    height: auto !important;
  }
  
  /* Hide complex animations on mobile */
  * {
    animation-duration: 0.3s !important;
  }
  
  /* Optimize scrolling */
  .scroll-container {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
  }
}

/* 6. Fix FAQ Section and Other Sections */
@media (max-width: 768px) {
  /* Fix QA Module (FAQ Section) - PROPER ACCORDION */
  .qa-module {
    padding: 2rem 0 !important;
  }
  
  .qa-module .container {
    max-width: 100% !important;
    padding: 0 1rem !important;
  }
  
  .qa-module .qa-accordion {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  /* QA Accordion Item */
  .qa-module .qa-accordion-item {
    margin-bottom: 0.75rem !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
  }
  
  /* Hide checkbox */
  .qa-module .qa-toggle {
    display: none !important;
  }
  
  /* Style the question as clickable */
  .qa-module .qa-question {
    display: block !important;
    padding: 1rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    width: 100% !important;
    cursor: pointer !important;
    position: relative !important;
    padding-right: 3rem !important;
    background: rgba(0, 0, 0, 0.02) !important;
    transition: background 0.2s ease !important;
  }
  
  .qa-module .qa-question:hover {
    background: rgba(0, 0, 0, 0.04) !important;
  }
  
  /* Add arrow indicator */
  .qa-module .qa-question::after {
    content: '▼' !important;
    position: absolute !important;
    right: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: transform 0.3s ease !important;
    font-size: 0.75rem !important;
    color: var(--qa-question-color, #43367e) !important;
  }
  
  /* Style the answer - hidden by default */
  .qa-module .qa-answer {
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 1rem !important;
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
    transition: max-height 0.3s ease, padding 0.3s ease !important;
  }
  
  /* Show answer when checkbox is checked */
  .qa-module .qa-toggle:checked ~ .qa-answer {
    max-height: 500px !important;
    padding: 1rem !important;
  }
  
  /* Rotate arrow when open */
  .qa-module .qa-toggle:checked ~ .qa-question::after {
    transform: translateY(-50%) rotate(180deg) !important;
  }
  
  /* Fix QA header */
  .qa-module .qa-header {
    text-align: center !important;
    padding: 0 1rem !important;
    margin-bottom: 2rem !important;
  }
  
  .qa-module .qa-title {
    font-size: 2rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .qa-module .qa-subtext {
    font-size: 1rem !important;
  }

/* 7. Fix Video/Laptop Display - Show Only Image on Mobile */
@media (max-width: 768px) {
  /* Hide laptop container completely */
  .laptop-container {
    display: none !important;
  }
  
  /* Show mobile fallback image instead */
  .mobile-fallback-image {
    display: block !important;
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  }
  
  .mobile-fallback-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  
  /* If no fallback image, show the dashboard image directly */
  .dashboard-screenshot img:not(.laptop-background) {
    display: block !important;
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  }

/* 8. Solutions Page Module Fixes */
@media (max-width: 768px) {
  /* Solutions Hero */
  .solutions-hero {
    padding: 3rem 0 !important;
  }
  
  .solutions-hero .container {
    padding: 0 1rem !important;
  }
  
  .solutions-hero h1 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
  }
  
  .solutions-hero .hero-description {
    font-size: 1rem !important;
    margin-bottom: 1rem !important;
  }
  
  .solutions-hero .hero-tagline {
    font-size: 0.9rem !important;
  }
  
  /* Solutions Tabs - IMPROVED MOBILE */
  .solutions-tabs-section {
    padding: 2rem 0 !important;
  }
  
  .tabs-wrapper {
    padding: 0 !important;
  }
  
  /* Tab Navigation - Horizontal Scroll */
  .tabs-nav {
    display: flex !important;
    overflow-x: auto !important;
    gap: 1rem !important;
    padding: 1rem !important;
    margin-bottom: 1.5rem !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    scroll-snap-type: x mandatory !important;
  }
  
  .tabs-nav::-webkit-scrollbar {
    display: none !important;
  }
  
  /* Tab Buttons - Better Mobile Size */
  .tab-button {
    flex: 0 0 auto !important;
    min-width: 120px !important;
    max-width: 160px !important;
    padding: 1rem 0.75rem !important;
    background: white !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-family: inherit !important;
    text-align: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    scroll-snap-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .tab-button:hover {
    border-color: var(--color-primary, #43367e) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  }
  
  .tab-button.active {
    border-color: var(--color-primary, #43367e) !important;
    background: var(--color-primary, #43367e) !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(67, 54, 126, 0.2) !important;
  }
  
  /* Tab Icons - Proper Mobile Size */
  .tab-icon {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    margin-bottom: 0.5rem !important;
    color: white !important;
  }
  
  .tab-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  
  .tab-button.active .tab-icon {
    background: rgba(255, 255, 255, 0.2) !important;
  }
  
  /* Tab Labels - Better Typography */
  .tab-label {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }
  
  .tab-button.active .tab-label {
    color: white !important;
  }
  
  /* Tab Content Panel */
  .tabs-content {
    padding: 0 1rem !important;
  }
  
  .tab-panel {
    display: none !important;
  }
  
  .tab-panel.active {
    display: block !important;
  }
  
  /* Product Card - Mobile Optimized */
  .product-card {
    background: white !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
  }
  
  /* Product Header - Stack on Mobile */
  .product-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1rem !important;
    padding: 1.5rem !important;
    border-bottom: 1px solid #e5e7eb !important;
  }
  
  /* Product Icon - Larger on Mobile */
  .product-icon {
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    color: white !important;
    flex-shrink: 0 !important;
  }
  
  .product-icon svg {
    width: 30px !important;
    height: 30px !important;
  }
  
  /* Product Info - Center Aligned */
  .product-info {
    flex: none !important;
    text-align: center !important;
  }
  
  .product-name {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--color-primary, #43367e) !important;
    margin: 0 0 0.5rem 0 !important;
    line-height: 1.2 !important;
  }
  
  .product-tagline {
    font-size: 1rem !important;
    color: #6b7280 !important;
    font-weight: 400 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
  }
  
  /* Features Grid - Single Column */
  .product-features {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    padding: 1.5rem !important;
  }
  
  .feature-card {
    padding: 1rem !important;
    background: #f9fafb !important;
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .feature-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--color-primary, #43367e) !important;
    margin: 0 0 0.5rem 0 !important;
  }
  
  .feature-description {
    font-size: 0.875rem !important;
    color: #6b7280 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
  }
  
  /* Client Quote - Mobile Styling */
  .client-quote {
    padding: 1.5rem !important;
    background: #f8fafc !important;
    border-top: 1px solid #e5e7eb !important;
    text-align: center !important;
  }
  
  .quote-icon {
    width: 24px !important;
    height: 24px !important;
    color: var(--color-primary, #43367e) !important;
    margin: 0 auto 1rem !important;
    opacity: 0.7 !important;
  }
  
  .quote-text {
    font-size: 0.9375rem !important;
    font-style: italic !important;
    color: #374151 !important;
    line-height: 1.5 !important;
    margin: 0 0 0.75rem 0 !important;
  }
  
  .quote-source {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--color-primary, #43367e) !important;
    font-style: normal !important;
  }
  
  /* Product Outcome */
  .product-outcome {
    padding: 1.5rem !important;
    background: white !important;
    border-top: 1px solid #e5e7eb !important;
  }
  
  .outcome-title {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: var(--color-primary, #43367e) !important;
    margin: 0 0 0.75rem 0 !important;
  }
  
  .outcome-text {
    font-size: 0.9375rem !important;
    color: #374151 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
  }
  
  /* Benefits Grid */
  .benefits-grid {
    padding: 2rem 0 !important;
  }
  
  .benefits-grid .container {
    padding: 0 1rem !important;
  }
  
  .benefits-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  .benefit-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    padding: 1.5rem !important;
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  }
  
  .benefit-icon {
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
  }
  
  .benefit-content h4 {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .benefit-content p {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }
  
  /* Features Module */
  .features-module {
    padding: 2rem 0 !important;
  }
  
  .features-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding: 0 1rem !important;
  }
  
  .feature-card {
    padding: 1.5rem !important;
    text-align: center !important;
  }
  
  .feature-icon {
    width: 60px !important;
    height: 60px !important;
    margin: 0 auto 1rem !important;
  }
  
  .feature-title {
    font-size: 1.125rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .feature-description {
    font-size: 0.875rem !important;
  }
  
  /* Methodology Module */
  .methodology-module {
    padding: 2rem 0 !important;
  }
  
  .methodology-steps {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 0 1rem !important;
  }
  
  .methodology-step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 1.5rem !important;
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  }
  
  .step-number {
    width: 50px !important;
    height: 50px !important;
    font-size: 1.25rem !important;
    margin-bottom: 1rem !important;
  }
  
  .step-title {
    font-size: 1.125rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .step-description {
    font-size: 0.875rem !important;
  }
  
  /* Real-time Intelligence Module */
  .energy-analytics-module {
    padding: 2rem 0 !important;
  }
  
  .energy-analytics-module .container {
    padding: 0 1rem !important;
  }
  
  .energy-title {
    font-size: 2rem !important;
    margin-bottom: 1rem !important;
  }
  
  .energy-subtext {
    font-size: 1rem !important;
    margin-bottom: 2rem !important;
  }
  
  .dashboard-card {
    padding: 1.5rem !important;
  }
  
  .dashboard-title {
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
  }
  
  .dashboard-metrics {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-top: 1.5rem !important;
  }
  
  .metric {
    padding: 1rem !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 8px !important;
    text-align: center !important;
  }
  
  .metric-title {
    font-size: 0.875rem !important;
    margin-bottom: 0.25rem !important;
  }
  
  .metric-desc {
    font-size: 0.8rem !important;
  }
  
  /* Energy Grid / Heat Map Section */
  .energy-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    margin-bottom: 2rem !important;
  }
  
  .heatmap-card {
    padding: 1.5rem !important;
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  }
  
  .heatmap-title {
    font-size: 1.25rem !important;
    margin-bottom: 1rem !important;
    text-align: center !important;
  }
  
  .heatmap-img {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 1rem !important;
  }
  
  .heatmap-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
  
  .heatmap-metric {
    text-align: center !important;
    padding: 0.75rem !important;
    background: rgba(0, 0, 0, 0.02) !important;
    border-radius: 8px !important;
  }
  
  .heatmap-metric-value {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.25rem !important;
  }
  
  .heatmap-metric-label {
    font-size: 0.75rem !important;
    opacity: 0.8 !important;
  }
  
  /* Key Metrics Cards */
  .key-metrics {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .key-metric-card {
    padding: 1.25rem !important;
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
    text-align: center !important;
  }
  
  .key-metric-title {
    font-size: 0.875rem !important;
    margin-bottom: 0.5rem !important;
    opacity: 0.7 !important;
  }
  
  .key-metric-value {
    font-size: 2rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
  }
  
  .key-metric-desc {
    font-size: 0.8rem !important;
    opacity: 0.6 !important;
  }
  
  /* Proven Results Module */
  .proven-results {
    padding: 2rem 0 !important;
  }
  
  .results-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 0 1rem !important;
  }
  
  .result-card {
    padding: 1.5rem !important;
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    text-align: center !important;
  }
  
  .result-value {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
  }
  
  .result-label {
    font-size: 1rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .result-description {
    font-size: 0.875rem !important;
    opacity: 0.8 !important;
  }
  
  /* Transition Banner */
  .transition-banner {
    padding: 2rem 0 !important;
  }
  
  .transition-content {
    padding: 0 1rem !important;
    text-align: center !important;
  }
  
  .transition-title {
    font-size: 1.75rem !important;
    margin-bottom: 1rem !important;
  }
  
  .transition-description {
    font-size: 1rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  /* Solutions CTA */
  .solutions-cta {
    padding: 2rem 0 !important;
    text-align: center !important;
  }
  
  .cta-content {
    padding: 2rem 1rem !important;
    background: white !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  }
  
  .cta-title {
    font-size: 1.75rem !important;
    margin-bottom: 1rem !important;
  }
  
  .cta-description {
    font-size: 1rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  .cta-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: center !important;
  }
  
  .cta-button {
    width: 100% !important;
    max-width: 280px !important;
    padding: 0.875rem 1.5rem !important;
    font-size: 1rem !important;
  }

/* 9. About Page Module Fixes */
@media (max-width: 768px) {
  /* About Hero */
  .about-hero {
    padding: 3rem 0 !important;
    text-align: center !important;
  }
  
  .about-hero .container {
    padding: 0 1rem !important;
  }
  
  .about-hero h1 {
    font-size: 2rem !important;
    margin-bottom: 1rem !important;
  }
  
  .about-hero .hero-subtitle {
    font-size: 1rem !important;
  }
  
  /* About Mission */
  .about-mission {
    padding: 2rem 0 !important;
  }
  
  .mission-content {
    padding: 0 1rem !important;
    text-align: center !important;
  }
  
  .mission-title {
    font-size: 1.75rem !important;
    margin-bottom: 1rem !important;
  }
  
  .mission-text {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
  
  /* About Values */
  .about-values {
    padding: 2rem 0 !important;
  }
  
  .values-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 0 1rem !important;
  }
  
  .value-card {
    padding: 1.5rem !important;
    text-align: center !important;
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  }
  
  .value-icon {
    width: 50px !important;
    height: 50px !important;
    margin: 0 auto 1rem !important;
  }
  
  .value-title {
    font-size: 1.125rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .value-description {
    font-size: 0.875rem !important;
  }
  
  /* About CTA */
  .about-cta {
    padding: 2rem 0 !important;
    text-align: center !important;
  }
  
  .about-cta .container {
    padding: 0 1rem !important;
  }
  
  .about-cta-content {
    padding: 2rem 1rem !important;
    background: white !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  }
  
  .about-cta h2 {
    font-size: 1.75rem !important;
    margin-bottom: 1rem !important;
  }
  
  .about-cta p {
    font-size: 1rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  /* Contact Page Modules */
  .contact-hero {
    padding: 3rem 0 !important;
    text-align: center !important;
  }
  
  .contact-hero h1 {
    font-size: 2rem !important;
    margin-bottom: 1rem !important;
  }
  
  .contact-hero .hero-subtitle {
    font-size: 1rem !important;
  }
  
  /* Contact Info */
  .contact-info {
    padding: 2rem 0 !important;
  }
  
  .contact-info-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 0 1rem !important;
  }
  
  .contact-info-card {
    padding: 1.5rem !important;
    text-align: center !important;
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  }
  
  .contact-icon {
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto 1rem !important;
  }
  
  .contact-info-title {
    font-size: 1.125rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .contact-info-text {
    font-size: 0.9375rem !important;
  }
  
  /* Contact Form */
  .contact-module {
    padding: 2rem 0 !important;
  }
  
  .contact-form-wrapper {
    padding: 0 1rem !important;
  }
  
  .contact-form {
    background: white !important;
    padding: 1.5rem !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  }
  
  .form-group {
    margin-bottom: 1rem !important;
  }
  
  .form-label {
    font-size: 0.875rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .form-input,
  .form-textarea {
    width: 100% !important;
    padding: 0.75rem !important;
    font-size: 1rem !important;
    border-radius: 6px !important;
  }
  
  .form-submit {
    width: 100% !important;
    padding: 0.875rem !important;
    font-size: 1rem !important;
  }
  
  /* Blog Modules */
  .blog-hero {
    padding: 3rem 0 !important;
    text-align: center !important;
  }
  
  .blog-hero h1 {
    font-size: 2rem !important;
    margin-bottom: 1rem !important;
  }
  
  .blog-featured {
    padding: 2rem 0 !important;
  }
  
  .featured-post {
    padding: 0 1rem !important;
  }
  
  .featured-image {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    margin-bottom: 1rem !important;
  }
  
  .featured-title {
    font-size: 1.5rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .featured-excerpt {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
  }
  
  /* Blog Categories */
  .blog-categories {
    padding: 1.5rem 0 !important;
  }
  
  .categories-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    padding: 0 1rem !important;
    justify-content: center !important;
  }
  
  .category-tag {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    background: rgba(67, 54, 126, 0.1) !important;
    border-radius: 20px !important;
    color: var(--color-primary) !important;
  }
  
  /* Trusted Worldwide Module */
  .trusted-worldwide {
    padding: 2rem 0 !important;
    text-align: center !important;
  }
  
  .trusted-worldwide h2 {
    font-size: 1.75rem !important;
    margin-bottom: 1rem !important;
  }
  
  .worldwide-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
    padding: 0 1rem !important;
    margin-top: 2rem !important;
  }
  
  .worldwide-stat {
    text-align: center !important;
  }
  
  .worldwide-number {
    font-size: 2rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.25rem !important;
  }
  
  .worldwide-label {
    font-size: 0.875rem !important;
    opacity: 0.8 !important;
  }

/* 10. Additional Global Mobile Fixes */
@media (max-width: 768px) {
  /* General section fixes */
  .section,
  section,
  [class*="-module"],
  [class*="-section"] {
    padding: 2rem 0 !important;
    overflow-x: hidden !important;
  }
  
  /* Fix all text alignment issues */
  .text-center {
    text-align: center !important;
  }
  
  /* Fix all grid layouts - be more specific */
  .grid:not(.tabs-nav):not(.stats-grid),
  .flex-grid:not(.client-logos) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  /* Fix card components */
  .card:not(.dashboard-card):not(.heatmap-card),
  [class$="-card"]:not(.dashboard-card):not(.heatmap-card) {
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    padding: 1.5rem !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  }
  
  /* Fix team grid */
  .team-section {
    padding: 2rem 0 !important;
  }
  
  .team-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding: 0 !important;
  }
  
  .team-member {
    width: 100% !important;
    max-width: 350px !important;
    margin: 0 auto !important;
    text-align: center !important;
    padding: 1.5rem !important;
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  }
  
  .member-photo {
    margin: 0 auto 1rem !important;
  }
  
  .member-photo img {
    width: 150px !important;
    height: 150px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
  }
  
  /* Fix value propositions */
  .value-props {
    grid-template-columns: 1fr !important;
  }
  
  /* Fix feature sections */
  .feature-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Fix metrics/stats in other sections */
  .metric,
  .stat,
  .feature {
    text-align: center !important;
    padding: 1.5rem !important;
  }
  
  /* Fix all images to be responsive */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Fix any overflow issues - be more careful */
  body > *,
  .container,
  .section,
  section {
    max-width: 100vw !important;
  }
  
  /* Fix z-index issues */
  .modal,
  .dropdown,
  .overlay {
    z-index: 9999 !important;
  }
  
  /* Common heading sizes */
  h1 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }
  
  h2 {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
  }
  
  h3 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  
  h4 {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
  }
  
  h5 {
    font-size: 1.125rem !important;
    line-height: 1.4 !important;
  }
  
  /* Common paragraph and text sizes */
  p,
  .text-base {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
  }
  
  .text-sm {
    font-size: 0.875rem !important;
  }
  
  .text-xs {
    font-size: 0.8rem !important;
  }
  
  .text-lg {
    font-size: 1rem !important;
  }
  
  /* Common spacing fixes */
  .mb-24 {
    margin-bottom: 2rem !important;
  }
  
  .mb-20 {
    margin-bottom: 2rem !important;
  }
  
  .mb-16 {
    margin-bottom: 1.5rem !important;
  }
  
  .mb-12 {
    margin-bottom: 1.5rem !important;
  }
  
  .mb-8 {
    margin-bottom: 1rem !important;
  }
  
  /* Common padding fixes */
  .p-8 {
    padding: 1.5rem !important;
  }
  
  .p-6 {
    padding: 1.25rem !important;
  }
  
  .px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .py-20 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  .py-16 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  /* Button standardization */
  .btn,
  .button,
  [class*="-button"],
  [class*="btn-"] {
    min-height: 44px !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
    border-radius: 8px !important;
  }
  
  /* Fix list styling */
  ul,
  ol {
    padding-left: 1.5rem !important;
  }
  
  li {
    margin-bottom: 0.5rem !important;
  }
}