/* ============================================================================
   KING AUTO GROUP CORPORATE WEBSITE - PREMIUM DESIGN SYSTEM
   ============================================================================ */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ============================================================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================================ */
:root {
  /* Primary Colors - Rich Blues */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e3a8a;
  --color-primary-900: #1e40af;

  /* Accent Colors - Premium Gold */
  --color-accent-400: #fbbf24;
  --color-accent-500: #f59e0b;
  --color-accent-600: #d97706;

  /* Neutral Colors */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* Semantic Colors */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* Spacing Scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* Typography */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;

  /* Z-Index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-primary-800) 0%, var(--color-primary-600) 100%);
  --gradient-hero: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
  --gradient-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%);
}

/* Dark Mode Colors */
[data-theme="dark"] {
  --color-bg-primary: #0f172a;
  --color-bg-secondary: #1e293b;
  --color-bg-tertiary: #334155;
  --color-text-primary: #f1f5f9;
  --color-text-secondary: #cbd5e1;
  --color-text-tertiary: #94a3b8;
  --color-border: #334155;
}

/* Light Mode Colors (Default) */
:root,
[data-theme="light"] {
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f9fafb;
  --color-bg-tertiary: #f3f4f6;
  --color-text-primary: #111827;
  --color-text-secondary: #374151;
  --color-text-tertiary: #6b7280;
  --color-border: #e5e7eb;
}

/* ============================================================================
   BASE STYLES & RESET
   ============================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  transition: background-color var(--transition-base), color var(--transition-base);
}

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
  text-align: center;
}

h1 {
  font-size: var(--font-size-5xl);
  font-weight: 800;
  letter-spacing: -0.025em;
}

h2 {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  letter-spacing: -0.015em;
}

h3 {
  font-size: var(--font-size-3xl);
  font-weight: 600;
}

h4 {
  font-size: var(--font-size-2xl);
  font-weight: 600;
}

h5 {
  font-size: var(--font-size-xl);
  font-weight: 600;
}

h6 {
  font-size: var(--font-size-lg);
  font-weight: 600;
}

p {
  margin-bottom: var(--space-md);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

a {
  color: var(--color-primary-600);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-700);
}

/* ============================================================================
   CORPORATE PAGE HEADING CENTERING
   ============================================================================ */
/* Center all headings on corporate pages - using !important to override inline styles */
h1[style],
h2[style],
h3[style],
h4[style],
h5[style],
h6[style],
.section-title,
.hero-title,
.section h1,
.section h2,
.section h3,
.section h4,
.section h5,
.section h6,
.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6,
.grid h1,
.grid h2,
.grid h3,
.grid h4,
.grid h5,
.grid h6,
.timeline-item h1,
.timeline-item h2,
.timeline-item h3,
.timeline-item h4,
.timeline-item h5,
.timeline-item h6 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Center section headers */
.section-header {
  text-align: center !important;
  margin-bottom: var(--space-2xl);
}

.section-header .section-title {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.section-header .section-subtitle {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 800px;
}

/* Ensure all subtitle variations are centered */
.section-subtitle,
p.section-subtitle {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Force center alignment for all corporate page content */
.hero *,
.section-header *,
div[style*="text-align: center"] *,
div[style*="max-width"][style*="margin: 0 auto"] * {
  text-align: center !important;
}

/* Exception for cards and specific content that should maintain their alignment */
.card-body:not([style*="text-align: center"]) *,
.grid .card:not([style*="text-align: center"]) .card-body * {
  text-align: inherit;
}

/* But ensure card headers in hero sections are centered */
.card-body[style*="text-align: center"] *,
.hero .card-body *,
.section[style*="background: linear-gradient"] .card-body * {
  text-align: center !important;
}

/* ============================================================================
   LAYOUT UTILITIES
   ============================================================================ */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.container-fluid {
  width: 100%;
  padding: 0 var(--space-lg);
}

.section {
  padding: var(--space-5xl) 0;
}

.section-sm {
  padding: var(--space-3xl) 0;
}

.section-lg {
  padding: var(--space-5xl) 0;
}

/* ============================================================================
   STAFF ACCESS BAR
   ============================================================================ */
.staff-access-bar {
  background: var(--color-gray-800);
  color: var(--color-gray-300);
  font-size: 0.875rem;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-gray-700);
}

[data-theme="dark"] .staff-access-bar {
  background: var(--color-gray-900);
  border-bottom-color: var(--color-gray-800);
}

.staff-access-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.staff-access-text {
  font-weight: 500;
  color: var(--color-gray-400);
}

.staff-login-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-gray-300);
  text-decoration: none;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  font-weight: 500;
}

.staff-login-link:hover {
  color: var(--color-primary-400);
  background: rgba(59, 130, 246, 0.1);
}

.staff-login-link svg {
  width: 16px;
  height: 16px;
}

/* Hide staff bar on mobile to save space */
@media (max-width: 768px) {
  .staff-access-bar {
    display: none;
  }
}

/* ============================================================================
   CORPORATE HEADER & NAVIGATION
   ============================================================================ */
.corporate-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all var(--transition-base);
}

[data-theme="dark"] .corporate-header {
  background: rgba(15, 23, 42, 0.95);
}

.corporate-header.scrolled {
  box-shadow: var(--shadow-md);
}

.header-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: transform var(--transition-base);
}

.logo:hover {
  transform: scale(1.02);
}

.logo-image {
  height: 48px;
  width: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  list-style: none;
}

.nav-link {
  position: relative;
  font-weight: 500;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: var(--space-sm) 0;
  transition: color var(--transition-fast);
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-primary);
  transition: width var(--transition-base);
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-primary-600);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}



/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.mobile-menu-toggle span {
  width: 24px;
  height: 2px;
  background: var(--color-primary-600);
  transition: all var(--transition-base);
}

/* ============================================================================
   BUTTONS
   ============================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 1;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-base);
  white-space: nowrap;
}

/* Button Container Centering */
.btn-container,
.hero-buttons,
div[style*="display: flex"][style*="justify-content: center"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
}

.btn-primary {
  background: var(--gradient-primary);
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

.btn-secondary {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 2px solid var(--color-border);
}

.btn-secondary:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-primary-600);
}

.btn-outline {
  background: transparent;
  color: var(--color-primary-600);
  border: 2px solid var(--color-primary-600);
}

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

.btn-lg {
  padding: var(--space-lg) var(--space-2xl);
  font-size: var(--font-size-lg);
}

.btn-sm {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-sm);
}

.btn-white {
  background: white;
  color: var(--color-primary-600);
  border: 2px solid white;
}

.btn-white:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

/* ============================================================================
   CARDS
   ============================================================================ */
.card {
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: all var(--transition-base);
}

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

.card-header {
  padding: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}

.card-body {
  padding: var(--space-xl);
}

.card-footer {
  padding: var(--space-xl);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
}

/* Glass Card (Glassmorphism) */
.card-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

[data-theme="dark"] .card-glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================================================
   HERO SECTION
   ============================================================================ */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gradient-overlay);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  color: white;
  max-width: 900px;
  text-align: center !important;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.hero-title {
  font-size: var(--font-size-6xl);
  font-weight: 900;
  margin-bottom: var(--space-lg);
  line-height: 1.1;
  background: linear-gradient(135deg, #ffffff 0%, #93c5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero-subtitle {
  font-size: var(--font-size-2xl);
  font-weight: 400;
  margin-bottom: var(--space-2xl);
  color: rgba(255, 255, 255, 0.9);
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 800px;
}

/* Hero Buttons Container - Force centering */
.hero-buttons {
  display: flex !important;
  gap: 1rem !important;
  margin: 2rem auto !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  text-align: center !important;
  width: 100% !important;
}

/* Force center any div with flex styling in hero */
.hero-content div[style*="display: flex"],
.hero-content div[style*="display:flex"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Override any inline text-align styles in hero */
.hero-content *[style*="text-align"] {
  text-align: center !important;
}

/* Ensure all hero content elements are centered */
.hero-content>* {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-3xl);
}

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

.stat-value {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  color: var(--color-accent-400);
  display: block;
  margin-bottom: var(--space-xs);
}

.stat-label {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================================================
   GRID SYSTEM
   ============================================================================ */
.grid {
  display: grid;
  gap: var(--space-xl);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

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

/* ============================================================================
   FOOTER
   ============================================================================ */
.corporate-footer {
  background: var(--color-gray-900);
  color: white;
  padding: var(--space-4xl) 0 var(--space-xl);
}

[data-theme="dark"] .corporate-footer {
  background: var(--color-gray-950, #000000);
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-3xl);
  margin-bottom: var(--space-3xl);
}

.footer-brand h3 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-md);
  color: white;
}

.footer-brand p {
  color: var(--color-gray-400);
  line-height: var(--line-height-relaxed);
}

.footer-section h4 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-lg);
  color: white;
  text-align: left;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: var(--space-md);
}

.footer-links a {
  color: var(--color-gray-400);
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: white;
}

.footer-bottom {
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-gray-800);
  text-align: center;
  color: white;
  font-size: var(--font-size-sm);
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

/* Scroll animations */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================================
   CTA SECTIONS & BUTTON CENTERING
   ============================================================================ */
/* Ensure all CTA sections and their content are centered */
.section[style*="text-align: center"],
.section div[style*="text-align: center"],
.hero-content,
.section-header,
.cta-section,
.call-to-action {
  text-align: center !important;
}

/* Center all button groups and flex containers */
div[style*="display: flex"]:not(.nav-links):not(.header-wrapper):not(.footer-content):not(.staff-access-content) {
  justify-content: center !important;
  align-items: center !important;
}

/* Specific centering for button containers */
div[style*="display: flex"][style*="gap: 1rem"],
div[style*="display: flex"][style*="gap: var(--space-md)"],
div[style*="display: flex"][style*="gap: var(--space-lg)"] {
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  text-align: center !important;
}

/* Center content in max-width containers */
div[style*="max-width"][style*="margin: 0 auto"] {
  text-align: center !important;
}

/* Ensure hero stats are centered */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-3xl);
  text-align: center;
  justify-items: center;
}

/* Additional hero section centering */
.hero .container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: inherit;
  text-align: center;
}

/* Force center alignment for all hero content elements */
.hero h1,
.hero h2,
.hero h3,
.hero h4,
.hero h5,
.hero h6,
.hero p,
.hero .hero-title,
.hero .hero-subtitle {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Center all CTA sections */
.section div[style*="text-align: center"],
.section div[style*="max-width"][style*="margin: 0 auto"] {
  text-align: center !important;
}

/* Force center all button containers with inline styles */
div[style*="display: flex"][style*="gap: 1rem"][style*="justify-content: center"],
div[style*="display: flex"][style*="gap:1rem"][style*="justify-content:center"],
div[style*="display:flex"][style*="gap:1rem"][style*="justify-content:center"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  text-align: center !important;
  margin: 0 auto !important;
}

/* Comprehensive centering for all section content */
.section div[style*="max-width"][style*="margin: 0 auto"] h1,
.section div[style*="max-width"][style*="margin: 0 auto"] h2,
.section div[style*="max-width"][style*="margin: 0 auto"] h3,
.section div[style*="max-width"][style*="margin: 0 auto"] h4,
.section div[style*="max-width"][style*="margin: 0 auto"] h5,
.section div[style*="max-width"][style*="margin: 0 auto"] h6,
.section div[style*="max-width"][style*="margin: 0 auto"] p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Override any conflicting inline styles */
.section div[style*="text-align: center"] * {
  text-align: center !important;
}

.section div[style*="max-width"][style*="margin: 0 auto"] h1,
.section div[style*="max-width"][style*="margin: 0 auto"] h2,
.section div[style*="max-width"][style*="margin: 0 auto"] h3,
.section div[style*="max-width"][style*="margin: 0 auto"] h4,
.section div[style*="max-width"][style*="margin: 0 auto"] h5,
.section div[style*="max-width"][style*="margin: 0 auto"] h6,
.section div[style*="max-width"][style*="margin: 0 auto"] p {
  text-align: center !important;
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */
@media (max-width: 1024px) {

  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-content {
    grid-template-columns: 1fr 1fr;
  }

  .hero-title {
    font-size: var(--font-size-5xl);
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .footer-content {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: 70vh;
  }

  .hero-title {
    font-size: var(--font-size-4xl);
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-subtitle {
    font-size: var(--font-size-xl);
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  h1 {
    font-size: var(--font-size-4xl);
    text-align: center !important;
  }

  h2 {
    font-size: var(--font-size-3xl);
    text-align: center !important;
  }

  .section {
    padding: var(--space-3xl) 0;
  }

  /* Ensure mobile hero content remains centered */
  .hero-content {
    text-align: center !important;
    padding: 0 var(--space-md);
  }

  .hero-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 2rem auto !important;
  }

  .hero-buttons .btn {
    width: 100%;
    max-width: 280px;
    text-align: center;
  }

  /* Mobile CTA section centering */
  .section div[style*="text-align: center"],
  .section div[style*="max-width"] {
    text-align: center !important;
    padding: 0 var(--space-md);
  }

  /* Mobile button containers */
  div[style*="display: flex"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
  }

  div[style*="display: flex"] .btn {
    width: 100%;
    max-width: 280px;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-md);
  }

  .btn {
    width: 100%;
  }

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

/* ============================================================================
   COMPREHENSIVE HERO & CTA CENTERING OVERRIDES
   ============================================================================ */

/* Force center all hero sections regardless of inline styles */
.hero .hero-content,
.hero .hero-content * {
  text-align: center !important;
}

.hero .hero-content div {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin: 0 auto !important;
}

/* Force center all CTA button containers */
.section div[style*="display: flex"]:not(.grid):not(.nav-links):not(.header-wrapper):not(.footer-content) {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  text-align: center !important;
  margin: 0 auto !important;
}

/* Ensure all section headers and content are centered */
.section-header,
.section-header * {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Override any text alignment in corporate pages */
.section div[style*="text-align: center"] div[style*="display: flex"] {
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

/* Final override for button containers */
div[style*="display: flex"][style*="gap"][style*="justify-content: center"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  text-align: center !important;
  margin: 0 auto !important;
}

/* ============================================================================
   FINAL HERO SECTION CENTERING OVERRIDES
   ============================================================================ */

/* Ensure all hero sections have proper container centering */
.hero .container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: inherit !important;
  width: 100% !important;
}

/* Force center all hero content regardless of structure */
.hero .hero-content {
  text-align: center !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 900px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ensure all hero titles and subtitles are centered */
.hero .hero-title,
.hero .hero-subtitle,
.hero h1,
.hero h2,
.hero p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* Center hero buttons regardless of inline styles */
.hero div[style*="display: flex"],
.hero .hero-buttons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  margin: 2rem auto !important;
  text-align: center !important;
  width: 100% !important;
}

/* Override any conflicting styles in hero sections */
.hero * {
  text-align: center !important;
}

/* Specific override for hero sections with min-height inline styles */
.hero[style*="min-height"] .hero-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* ============================================================================
   ADDITIONAL CTA & HERO ALIGNMENT OVERRIDES
   ============================================================================ */

/* Ensure all CTA sections are perfectly centered */
.section div[style*="max-width"][style*="text-align: center"] {
  text-align: center !important;
  margin: 0 auto !important;
}

.section div[style*="max-width"][style*="text-align: center"] * {
  text-align: center !important;
}

/* Force center all button containers in CTA sections */
.section div[style*="display: flex"][style*="justify-content: center"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Ensure all hero buttons are centered regardless of inline styles */
.hero div[style*="display: flex"][style*="gap"],
.hero .hero-buttons,
.hero-content div[style*="display: flex"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  margin: 2rem auto !important;
  text-align: center !important;
  width: 100% !important;
}

/* Override any conflicting text alignment in hero sections */
.hero .hero-content,
.hero .hero-content * {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ensure all section CTA containers are centered */
.section .container .scroll-reveal div[style*="max-width"] {
  text-align: center !important;
  margin: 0 auto !important;
}

/* Force center alignment for all CTA button groups */
div[style*="display: flex"][style*="gap: 1rem"][style*="justify-content: center"],
div[style*="display:flex"][style*="gap:1rem"][style*="justify-content:center"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  text-align: center !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* Comprehensive mobile centering for hero and CTA sections */
@media (max-width: 768px) {

  .hero .hero-content,
  .hero .hero-content *,
  .section div[style*="text-align: center"],
  .section div[style*="max-width"] {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero div[style*="display: flex"],
  .section div[style*="display: flex"] {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  .hero .btn,
  .section .btn {
    width: 100% !important;
    max-width: 280px !important;
    text-align: center !important;
    margin: 0 auto !important;
  }
}

/* ============================================================================
   ENHANCED HERO SECTION & CTA CENTERING SYSTEM - 2025 UPDATE
   ============================================================================ */

/* COMPREHENSIVE HERO BUTTON CENTERING - Handle all button container variations */
.hero div[style*="display: flex"][style*="gap"],
.hero div[style*="display:flex"][style*="gap"],
.hero div[style*="display: flex; gap"],
.hero div[style*="display:flex; gap"],
.hero div[style*="display: flex;gap"],
.hero div[style*="display:flex;gap"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  margin: 2rem auto !important;
  text-align: center !important;
  width: 100% !important;
}

/* HERO STATS ENHANCED CENTERING */
.hero .hero-stats,
.hero div[class*="hero-stats"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: var(--space-xl) !important;
  margin: var(--space-3xl) auto !important;
  text-align: center !important;
  justify-items: center !important;
  width: 100% !important;
}

.hero .stat-item {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Mobile Company Name */
.mobile-company-name {
  display: none;
}

@media (max-width: 768px) {
  .mobile-company-name {
    display: block;
    font-weight: 800;
    font-size: 1.125rem;
    color: var(--color-primary-800);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ============================================================================
   COMPREHENSIVE CTA SECTION CENTERING ENHANCEMENTS
   ============================================================================ */

/* CTA BUTTON CONTAINERS - Enhanced targeting for all variations */
.section div[style*="display: flex"][style*="gap: 1rem"],
.section div[style*="display:flex"][style*="gap:1rem"],
.section div[style*="display: flex; gap: 1rem"],
.section div[style*="display:flex; gap:1rem"],
.section div[style*="display: flex"][style*="justify-content: center"],
.section div[style*="display:flex"][style*="justify-content:center"],
.section div[style*="display: flex; justify-content: center"],
.section div[style*="display:flex; justify-content:center"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  text-align: center !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* CTA SECTIONS WITH BACKGROUND GRADIENTS */
.section[style*="background: linear-gradient"] div[style*="text-align: center"],
.section[style*="background:linear-gradient"] div[style*="text-align:center"] {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.section[style*="background: linear-gradient"] div[style*="display: flex"],
.section[style*="background:linear-gradient"] div[style*="display:flex"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  text-align: center !important;
  margin: 0 auto !important;
}

/* SECTION HEADERS - Ensure all section headers are centered */
.section-header,
.section .section-header,
div[class*="section-header"] {
  text-align: center !important;
  margin-bottom: var(--space-2xl) !important;
}

.section-header h1,
.section-header h2,
.section-header h3,
.section-header .section-title,
.section-header .section-subtitle,
.section-header p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================================
   BUTTON STYLING ENHANCEMENTS
   ============================================================================ */

/* Ensure all buttons in hero and CTA sections have consistent styling */
.hero .btn,
.section div[style*="text-align: center"] .btn,
.section div[style*="max-width"][style*="margin: 0 auto"] .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* Button hover effects for hero sections */
.hero .btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-xl) !important;
}

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

@media (max-width: 768px) {

  /* Enhanced mobile hero centering */
  .hero .hero-content {
    padding: 0 var(--space-md) !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Mobile button stacking */
  .hero div[style*="display: flex"],
  .section div[style*="display: flex"]:not(.grid):not(.nav-links):not(.header-wrapper):not(.footer-content) {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
    width: 100% !important;
  }

  /* Mobile button sizing */
  .hero .btn,
  .section div[style*="text-align: center"] .btn {
    width: 100% !important;
    max-width: 280px !important;
    min-width: 200px !important;
  }

  /* Mobile CTA section padding */
  .section div[style*="text-align: center"],
  .section div[style*="max-width"] {
    padding-left: var(--space-md) !important;
    padding-right: var(--space-md) !important;
  }
}

@media (max-width: 480px) {

  /* Extra small screen adjustments */
  .hero .btn,
  .section .btn {
    width: 100% !important;
    max-width: 100% !important;
    font-size: var(--font-size-base) !important;
    padding: var(--space-md) var(--space-lg) !important;
  }

  .hero-title {
    font-size: var(--font-size-3xl) !important;
    line-height: 1.2 !important;
  }

  .hero-subtitle {
    font-size: var(--font-size-lg) !important;
  }
}

/* ============================================================================
   FINAL OVERRIDE SYSTEM - Bulletproof centering
   ============================================================================ */

/* Override any remaining inline styles that might interfere */
.hero[style] .hero-content[style] *,
.section[style] div[style*="text-align: center"] *,
.section[style] div[style*="max-width"][style*="margin: 0 auto"] * {
  text-align: center !important;
}

/* Ensure button containers always center regardless of specificity */
div[style*="display"][style*="flex"][style*="gap"][style*="justify-content"],
div[style*="display"][style*="flex"][style*="gap"]:not([style*="justify-content"]) {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  text-align: center !important;
  margin: 0 auto !important;
}

/* Corporate page specific overrides */
body[class*="corporate"] .hero *,
body[class*="corporate"] .section div[style*="text-align: center"] *,
body[class*="corporate"] .section div[style*="max-width"][style*="margin: 0 auto"] * {
  text-align: center !important;
}

/* Animation-safe centering - ensure animations don't break alignment */
.animate-fade-in-up,
.scroll-reveal {
  text-align: inherit !important;
}

.hero .animate-fade-in-up,
.hero .scroll-reveal,
.section div[style*="text-align: center"] .animate-fade-in-up,
.section div[style*="text-align: center"] .scroll-reveal {
  text-align: center !important;
}

/* ============================================================================
   END ENHANCED CENTERING SYSTEM
   ============================================================================ */
/* ============================================================================
   RESPONSIVE STYLES (MOBILE & TABLET)
   ============================================================================ */

/* Utility Classes for Responsiveness */
.mobile-only {
  display: none;
}

@media (max-width: 1024px) {
  :root {
    --font-size-5xl: 2.5rem;
    --font-size-6xl: 3rem;
    --space-5xl: 4rem;
  }

  .container {
    padding: 0 var(--space-md);
  }

  .hero-title {
    font-size: 3.5rem;
  }

  .nav-links {
    gap: var(--space-md);
  }
}

@media (max-width: 768px) {
  :root {
    --font-size-4xl: 2rem;
    --font-size-5xl: 2.5rem;
    --font-size-6xl: 2.5rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
    --space-3xl: 3rem;
    --space-5xl: 4rem;
  }

  .mobile-only {
    display: block;
  }

  /* Navigation */
  .mobile-menu-toggle {
    display: flex;
    z-index: 1100;
    position: relative;
  }

  .mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--color-bg-primary);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-lg);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    z-index: 1000;
    padding: 2rem;
    overflow-y: auto;
  }

  .nav-links.mobile-active {
    transform: translateX(0);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
  }

  .nav-link {
    font-size: 1.25rem;
  }

  .nav-actions {
    display: none;
  }

  /* Grid System - Stack columns on mobile */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  /* Timeline (About Page) - Force vertical stacking */
  .timeline::after {
    left: 31px !important;
  }

  .timeline-item {
    width: 100% !important;
    padding-left: 70px !important;
    padding-right: 25px !important;
  }

  .timeline-item::after {
    left: 21px !important;
    right: auto !important;
  }

  /* Reset left/right positioning */
  .left,
  .right {
    left: 0 !important;
  }

  /* Fix arrows for all items to point left */
  .timeline-item::before {
    left: 60px !important;
    right: auto !important;
    border: medium solid var(--color-bg-primary) !important;
    border-width: 10px 10px 10px 0 !important;
    border-color: transparent var(--color-bg-primary) transparent transparent !important;
  }

  /* Hero */
  .hero {
    min-height: auto;
    padding: var(--space-4xl) 0 var(--space-2xl);
  }

  .hero-content {
    padding-top: 0;
  }

  .hero-title {
    font-size: 2.25rem;
  }

  .hero-subtitle {
    font-size: 1.125rem;
  }

  .hero-buttons {
    flex-direction: column;
    width: 100%;
    gap: 1rem;
  }

  .hero-buttons .btn {
    width: 100%;
  }

  /* Typography & Spacing */
  h1 {
    font-size: 2.25rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  .section-header {
    margin-bottom: var(--space-xl);
  }

  .section {
    padding: var(--space-3xl) 0;
  }

  /* Cards */
  .card-body {
    padding: var(--space-lg);
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }
}


/* Footer Fix */
@media (max-width: 768px) {
  .footer-content {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-xl) !important;
    grid-template-columns: 1fr !important;
  }

  .footer-brand,
  .footer-section {
    text-align: center !important;
  }

  .footer-links li {
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ============================================================================
   NEW MOBILE MENU OVERLAY SYSTEM
   ============================================================================ */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-nav-content {
  position: absolute;
  top: 0;
  right: 0;
  width: 80%;
  max-width: 300px;
  height: 100%;
  background: var(--color-bg-primary);
  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  padding: var(--space-2xl) var(--space-lg);
  overflow-y: auto;
}

.mobile-menu-overlay.active .mobile-nav-content {
  transform: translateX(0);
}

.mobile-nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.mobile-nav-links .nav-link {
  font-size: 1.25rem;
  display: block;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.desktop-only {
  display: flex;
}

@media (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }
}


/* Mobile Menu Button Style */
.mobile-nav-links li:last-child .nav-link {
  background: var(--gradient-primary);
  color: white;
  text-align: center;
  border-radius: var(--radius-lg);
  margin-top: var(--space-md);
  border: none;
  font-weight: 600;
  box-shadow: var(--shadow-md);
}

/* Footer Heading Fix */
@media (max-width: 768px) {
  .footer-section h4 {
    text-align: center !important;
    width: 100% !important;
  }

  .footer-links {
    align-items: center !important;
  }
}

/* Footer Brand Title - Left on desktop, centered on mobile */
.footer-brand-title {
  text-align: left;
}

@media (max-width: 768px) {
  .footer-brand-title {
    text-align: center !important;
  }
}


/* Brighten Footer Bottom Text */
.footer-bottom p {
  color: rgba(255, 255, 255, 0.9) !important;
}

.footer-bottom a {
  color: white !important;
}