/* naveXo Global Logistics - Official Color Palette from Brand Image */

:root {
  /* Primary Colors from OCR analysis */
  --navexo-navy: #0E5A72;        /* Deep teal/dark blue-green from circle 3 */
  --navexo-orange: #ED7A1E;      /* Bright orange from circle 4 and dot */
  
  /* Accent Colors from OCR analysis */
  --navexo-steel-blue: #6D8E9C;  /* Desaturated steel blue/blue-gray from circle 5 */
  --navexo-sky-blue: #E6F2F9;     /* Very light powder blue from circle 2 */
  --navexo-mint: #ECF7F4;         /* Very pale mint/seafoam from circle 1 */
  
  /* Additional Colors */
  --navexo-white: #FFFFFF;
  --navexo-dark-navy: #0C4A5C;
  --navexo-light-orange: #FF8C42;
  
  /* Text Colors */
  --text-primary: #0E5A72;
  --text-secondary: #6D8E9C;
  --text-accent: #ED7A1E;
  --text-white: #FFFFFF;
  
  /* Background Colors */
  --bg-light: #ECF7F4;
  --bg-lighter: #E6F2F9;
  --bg-white: #FFFFFF;
  --bg-navy: #0E5A72;
  --bg-orange: #ED7A1E;
}

/* Logo color classes */
.logo-primary { color: var(--navexo-navy); }
.logo-accent { color: var(--navexo-orange); }
.logo-secondary { color: var(--navexo-steel-blue); }

/* Background color classes */
.bg-mint { background-color: var(--navexo-mint); }
.bg-sky-blue { background-color: var(--navexo-sky-blue); }
.bg-steel-blue { background-color: var(--navexo-steel-blue); }
.bg-navy { background-color: var(--navexo-navy); }
.bg-orange { background-color: var(--navexo-orange); }

/* Text color classes */
.text-navy { color: var(--navexo-navy); }
.text-orange { color: var(--navexo-orange); }
.text-steel { color: var(--navexo-steel-blue); }
.text-sky { color: var(--navexo-sky-blue); }
.text-mint { color: var(--navexo-mint); }
.text-white { color: var(--navexo-white); }

/* Button styles with new colors */
.btn-primary-custom {
  background-color: var(--navexo-navy);
  border-color: var(--navexo-navy);
  color: white;
}

.btn-primary-custom:hover {
  background-color: var(--navexo-dark-navy);
  border-color: var(--navexo-dark-navy);
}

.btn-accent-custom {
  background-color: var(--navexo-orange);
  border-color: var(--navexo-orange);
  color: white;
}

.btn-accent-custom:hover {
  background-color: var(--navexo-light-orange);
  border-color: var(--navexo-light-orange);
}

/* Card styles with new colors */
.card-custom {
  border: 1px solid var(--navexo-mint);
  background-color: var(--navexo-white);
}

.card-header-custom {
  background-color: var(--navexo-mint);
  color: var(--text-primary);
  border-bottom: 1px solid var(--navexo-navy);
}

/* Navigation styles */
.nav-custom .nav-link {
  color: var(--text-primary);
}

.nav-custom .nav-link:hover {
  color: var(--navexo-orange);
}

.nav-custom .nav-link.active {
  color: var(--navexo-orange);
  border-bottom: 2px solid var(--navexo-orange);
}

/* Middle Section Colors - naveXo Brand Palette */

/* 1. Shipping Process Section */
.shipping-process-section {
  background-color: var(--navexo-mint); /* Light Mint Ice #EAF9F7 */
}

.shipping-process-title {
  color: var(--navexo-navy); /* Deep Navy Blue #0D5169 */
}

.shipping-process-subtext {
  color: var(--navexo-steel-blue); /* Steel Blue #6F8E98 */
}

.shipping-process-icon {
  color: var(--navexo-navy); /* Navy for main icon */
}

.shipping-process-icon-accent {
  color: var(--navexo-orange); /* Bright Orange #F37124 for accents */
}

.shipping-process-circle {
  background-color: var(--navexo-white); /* White background */
  border-color: var(--navexo-sky-blue); /* Soft Sky Blue #DCEFF7 border */
}

/* 2. Helpful Section (How are we helpful?) */
.helpful-section {
  background-color: var(--navexo-navy); /* Deep Navy Blue #0D5169 */
  color: var(--navexo-white); /* White text */
}

.helpful-timeline-line {
  background-color: var(--navexo-mint); /* Light Mint Ice #EAF9F7 */
}

.helpful-icon {
  color: var(--navexo-orange); /* Bright Orange #F37124 */
}

.helpful-number {
  color: var(--navexo-orange); /* Bright Orange #F37124 */
}

.helpful-dot {
  background-color: var(--navexo-white); /* White dots */
  border-color: var(--navexo-orange); /* Orange highlight */
}

.helpful-connector {
  background-color: var(--navexo-white); /* White connectors */
}

/* 3. Transparency Section */
.transparency-section {
  background-color: var(--navexo-sky-blue); /* Soft Sky Blue #DCEFF7 */
}

.transparency-title {
  color: var(--navexo-navy); /* Deep Navy Blue #0D5169 */
}

.transparency-highlight {
  color: var(--navexo-orange); /* Bright Orange #F37124 */
}

.transparency-card {
  background-color: var(--navexo-white); /* White cards */
  box-shadow: 0 4px 20px rgba(111, 142, 152, 0.15); /* Steel Blue shadow */
}

.transparency-icon {
  color: var(--navexo-navy); /* Navy outline */
}

.transparency-icon-accent {
  color: var(--navexo-orange); /* Orange accent */
}

/* 4. Features/Counters Section */
.counter-number {
  color: var(--navexo-navy); /* Deep Navy Blue #0D5169 */
}

.counter-label {
  color: var(--navexo-steel-blue); /* Steel Blue #6F8E98 */
}

.counter-icon-bg {
  background-color: var(--navexo-mint); /* Light Mint Ice #EAF9F7 */
}

.counter-underline {
  background-color: var(--navexo-orange); /* Bright Orange #F37124 */
}

/* 5. Dividers & Borders */
.divider-steel {
  background-color: rgba(111, 142, 152, 0.1); /* Steel Blue with 10% opacity */
}

.border-steel-light {
  border-color: rgba(111, 142, 152, 0.1); /* Steel Blue with 10% opacity */
}

/* 6. Typography for Middle Content */
.heading-navy {
  color: var(--navexo-navy); /* Deep Navy Blue #0D5169 */
}

.highlight-orange {
  color: var(--navexo-orange); /* Bright Orange #F37124 */
}

.text-steel {
  color: var(--navexo-steel-blue); /* Steel Blue #6F8E98 */
}

.text-steel-light {
  color: rgba(111, 142, 152, 0.8); /* De-saturated steel blue */
}

.text-white {
  color: var(--navexo-white); /* White */
}

/* 7. Button Styles for Middle Sections */
.btn-middle-primary {
  background-color: var(--navexo-navy);
  color: var(--navexo-white);
  border: none;
  transition: all 0.3s ease;
}

.btn-middle-primary:hover {
  background-color: var(--navexo-dark-navy);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(13, 81, 105, 0.2);
}

.btn-middle-accent {
  background-color: var(--navexo-orange);
  color: var(--navexo-white);
  border: none;
  transition: all 0.3s ease;
}

.btn-middle-accent:hover {
  background-color: var(--navexo-light-orange);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(243, 113, 36, 0.2);
}

/* Additional styles for helpful section timeline */
.helpful-section .helpful-content {
  position: relative;
}

.helpful-section .helpful-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background-color: var(--navexo-mint);
  z-index: 1;
}

.helpful-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--navexo-white);
  border: 2px solid var(--navexo-orange);
  position: relative;
  z-index: 2;
}

.helpful-col {
  position: relative;
  margin-bottom: 30px;
}

.helpful-detail-wrapper {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Shipping process circles */
.shipping-process-circle {
  border-radius: 50%;
  border: 2px solid var(--navexo-sky-blue);
  background-color: var(--navexo-white);
  padding: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.shipping-process-circle:hover {
  border-color: var(--navexo-orange);
  transform: scale(1.05);
}

/* Transparency cards */
.transparency-card {
  border-radius: 12px;
  background-color: var(--navexo-white);
  box-shadow: 0 4px 20px rgba(111, 142, 152, 0.15);
  transition: all 0.3s ease;
  border: 1px solid rgba(111, 142, 152, 0.1);
}

.transparency-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(111, 142, 152, 0.2);
}