/* ============================================
       STICKY HEADER & SUB-HEADER FIXED
       ============================================ */

    /* Remove any default body margin/padding */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 0;
    }

    /* Top Sub-header - Sticky at very top of page */
    .top-subheader {
      position: sticky;
      top: 0;
      z-index: 1031;
      background-color: #0a1a3a;
      color: #ffffff;
      padding: 8px 0;
      font-size: 14px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      width: 100%;
    }

    /* Carrier Portal Button - matching Client Portal style */
    .top-subheader .btn-portal.carrier {
      background-color: transparent;
      color: #f9f9f9;
      text-decoration: none;
      padding: 6px 15px;
      border-radius: 4px;
      font-weight: 500;
      font-size: 13px;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
    }

    .top-subheader .btn-portal.carrier:hover {
      background-color: #ff5f13;
      color: #ffffff;
    }

    .top-subheader .btn-portal {
      background-color: transparent;
      color: #f9f9f9;
      text-decoration: none;
      padding: 6px 15px;
      border-radius: 4px;
      font-weight: 500;
      font-size: 13px;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
    }

    .top-subheader .btn-portal:hover {
      background-color: #ff5f13;
      color: #ffffff;
    }

    /* Optional: subtle separator between portal buttons */
    .top-subheader .portal-separator {
      color: rgba(255, 255, 255, 0.2);
      margin: 0 8px;
    }

    /* Main Header - Below sub-header, transparent background */
    .header {
      position: fixed;
      top: 41px; /* Height of top sub-header */
      left: 0;
      width: 100%;
      z-index: 1030;
      background-color: transparent;
      padding: 20px 0;
      transition: all 0.3s ease-in-out;
    }

    /* When scrolled - header becomes sticky at top with solid background */
    .header.scrolled {
      top: 0;
      background-color: #0a1a3a !important;
      padding: 10px 0;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    /* Logo transition */
    .header .logo img {
      max-height: 66px;
      transition: all 0.3s ease;
    }

    .header.scrolled .logo img {
      max-height: 50px;
    }

    /* Nav link colors */
    .header .navmenu a {
      color: rgba(255, 255, 255, 0.8);
    }

    .header.scrolled .navmenu a {
      color: rgba(255, 255, 255, 0.9);
    }

    .header .navmenu a:hover,
    .header .navmenu .active {
      color: #ff5f13 !important;
    }

    /* Mobile adjustments */
    @media (max-width: 768px) {
      .top-subheader {
        position: sticky;
        top: 0;
      }
      
      .header {
        top: 80px;
        padding: 12px 0;
      }
      
      .header.scrolled {
        top: 0;
        padding: 8px 0;
      }
    }

    @media (max-width: 480px) {
      .top-subheader {
        position: sticky;
        top: 0;
      }
      
      .header {
        top: 105px;
      }
      
      .header.scrolled {
        top: 0;
      }
    }

    /* Page Title padding adjustment to account for fixed header */
    .page-title {
      padding: 180px 0 120px 0 !important;
      min-height: auto !important;
    }

    /* Mobile responsive adjustments for portal buttons */
    @media (max-width: 768px) {
      .top-subheader .btn-portal,
      .top-subheader .btn-portal.carrier {
        padding: 4px 10px;
        font-size: 11px;
      }
      
      .top-subheader .portal-separator {
        margin: 0 4px;
      }
    }

    @media (max-width: 576px) {
      .top-subheader .language-portal {
        gap: 6px;
      }
      
      .top-subheader .btn-portal span,
      .top-subheader .btn-portal.carrier span {
        display: none;
      }
      
      .top-subheader .btn-portal i,
      .top-subheader .btn-portal.carrier i {
        margin-right: 0;
        font-size: 14px;
      }
      
      .top-subheader .btn-portal,
      .top-subheader .btn-portal.carrier {
        padding: 6px 8px;
      }
    }

    /* FIX: Dropdown menu text colors when header is scrolled */
    .header.scrolled .navmenu .dropdown ul {
      background: white !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    .header.scrolled .navmenu .dropdown ul li a {
      color: #0e1d34 !important;
      background: transparent !important;
    }

    .header.scrolled .navmenu .dropdown ul li a:hover {
      color: #ff5f13 !important;
      background: rgba(255, 95, 19, 0.05) !important;
      padding-left: 20px !important;
    }

    /* Also fix the parent dropdown arrow color when scrolled */
    .header.scrolled .navmenu a {
      color: rgba(255, 255, 255, 0.9);
    }

    .header.scrolled .navmenu .dropdown > a {
      color: rgba(255, 255, 255, 0.9);
    }

    /* Ensure dropdown toggle icon is visible */
    .header.scrolled .navmenu .dropdown .toggle-dropdown {
      color: rgba(255, 255, 255, 0.7);
    }

    /* Fix for mobile menu when scrolled */
    @media (max-width: 1199px) {
      .header.scrolled .navmenu ul {
        background: white !important;
      }
      
      .header.scrolled .navmenu ul li a {
        color: #0e1d34 !important;
      }
      
      .header.scrolled .navmenu ul li a:hover {
        color: #ff5f13 !important;
      }
    }

    /* Custom About Page Styles - Matching index.php exactly */
    :root {
      --accent-orange: #ff5f13;
      --accent-blue: #0e1d34;
    }
    
    /* Hero Section with Image Background - Matching 3PL page style */
    .page-title {
      position: relative;
      overflow: hidden;
      background-image: url('assets/img/about_us.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      min-height: 70vh;
    }
    
    .page-title::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #0e1d34 0%, #1a2f4e 100%);
      opacity: 0.85;
      z-index: 1;
    }
    
    .page-title::after {
      content: '';
      position: absolute;
      top: -50%;
      right: -10%;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(255,95,19,0.15) 0%, rgba(255,95,19,0) 70%);
      border-radius: 50%;
      z-index: 2;
    }
    
    .page-title .container {
      position: relative;
      z-index: 10;
    }
    
    /* Floating elements - using icons like dispatching page */
    .floating-icon {
      position: absolute;
      opacity: 0.1;
      pointer-events: none;
      z-index: 3;
      color: #ff5f13;
      filter: drop-shadow(0 0 20px rgba(255, 95, 19, 0.3));
      animation: floatIcon 15s ease-in-out infinite;
    }
    
    .floating-icon i {
      font-size: 80px;
    }
    
    .floating-icon.large i {
      font-size: 120px;
    }
    
    .floating-icon.small i {
      font-size: 50px;
    }
    
    .floating-icon-1 {
      top: 10%;
      left: 3%;
      animation: floatIcon 18s ease-in-out infinite;
    }
    
    .floating-icon-2 {
      top: 20%;
      right: 2%;
      animation: floatIcon 22s ease-in-out infinite reverse;
    }
    
    .floating-icon-3 {
      bottom: 15%;
      left: 5%;
      animation: floatIcon 20s ease-in-out infinite 2s;
    }
    
    .floating-icon-4 {
      bottom: 25%;
      right: 5%;
      animation: floatIcon 25s ease-in-out infinite 1s;
    }
    
    @keyframes floatIcon {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      25% { transform: translate(20px, -15px) rotate(5deg); }
      50% { transform: translate(-15px, -25px) rotate(10deg); }
      75% { transform: translate(-25px, -10px) rotate(5deg); }
    }
    
    /* Badge styling */
    .badge-about {
      background: rgba(255,95,19,0.15);
      color: #fff;
      padding: 8px 20px;
      border-radius: 50px;
      font-size: 14px;
      font-weight: 600;
      display: inline-block;
      backdrop-filter: blur(5px);
      border: 1px solid rgba(255,95,19,0.3);
      margin-bottom: 20px;
    }
    
    /* Section Title - EXACTLY matching index.php */
    .section-title {
      text-align: center;
      padding: 30px 0;
      margin-bottom: 30px;
      position: relative;
    }
    
    .section-title h2 {
      font-size: 32px;
      font-weight: 700;
      text-transform: uppercase;
      margin-bottom: 20px;
      padding-bottom: 0;
      position: relative;
      z-index: 2;
    }
    
    .section-title span {
      position: absolute;
      top: 4px;
      color: color-mix(in srgb, var(--heading-color), transparent 95%);
      left: 0;
      right: 0;
      z-index: 1;
      font-weight: 700;
      font-size: 52px;
      text-transform: uppercase;
      line-height: 1;
    }
    
    .section-title p {
      margin-bottom: 0;
      position: relative;
      z-index: 2;
    }
    
   /* Timeline Styles - FIXED */
.timeline {
  position: relative;
  padding: 40px 0;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, #ff5f13 0%, rgba(255,95,19,0.1) 100%);
  top: 0;
}

.timeline-item {
  position: relative;
  margin-bottom: 100px;
  min-height: 200px;
}

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

.timeline-content {
  position: relative;
  width: calc(50% - 50px);
  padding: 30px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.03);
  transition: all 0.3s ease;
}

.timeline-content:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(255,95,19,0.1);
  border-color: rgba(255,95,19,0.2);
}

/* Left side items (odd) */
.timeline-item:nth-child(odd) .timeline-content {
  left: 0;
  margin-right: auto;
}

/* Right side items (even) */
.timeline-item:nth-child(even) .timeline-content {
  left: 50%;
  margin-left: 50px;
}

.timeline-year {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  height: 80px;
  background: #ff5f13;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  box-shadow: 0 10px 20px rgba(255,95,19,0.3);
  z-index: 5;
}

/* Year position for left side items */
.timeline-item:nth-child(odd) .timeline-year {
  right: -90px;
}

/* Year position for right side items */
.timeline-item:nth-child(even) .timeline-year {
  left: -90px;
}

.timeline-content h3 {
  font-size: 24px;
  font-weight: 700;
  color: #0e1d34;
  margin-bottom: 15px;
}

.timeline-content p {
  color: #6c757d;
  line-height: 1.7;
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .timeline::before {
    left: 30px;
  }
  
  .timeline-item {
    margin-bottom: 40px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    min-height: 0;
  }
  
  .timeline-content {
    position: static;
    width: 100%;
    margin-left: 0 !important;
    left: auto !important;
  }
  
  .timeline-year {
    position: static;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    font-size: 18px;
    top: auto;
    transform: none;
  }

  /* Team card images weren't centering because the column uses a bare
     "d-flex" (active at all breakpoints), and flex items don't center
     on their main axis by default. Barely visible on desktop where the
     column width matches the card closely, but very noticeable on
     mobile once the column goes full-width. */
  #team .col-lg-4.d-flex {
    justify-content: center;
  }
}
    
    /* Values Cards */
    .value-card {
      background: #fff;
      padding: 40px 30px;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.05);
      text-align: center;
      transition: all 0.3s ease;
      height: 100%;
      border: 1px solid rgba(0,0,0,0.03);
      position: relative;
      overflow: hidden;
    }
    
    .value-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: #ff5f13;
      transform: scaleX(0);
      transition: transform 0.3s ease;
      transform-origin: left;
    }
    
    .value-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 30px 60px rgba(255,95,19,0.15);
    }
    
    .value-card:hover::before {
      transform: scaleX(1);
    }
    
    .value-icon {
      width: 90px;
      height: 90px;
      background: rgba(255,95,19,0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 25px;
      transition: 0.3s;
    }
    
    .value-card:hover .value-icon {
      background: #ff5f13;
      transform: scale(1.1) rotate(5deg);
    }
    
    .value-card:hover .value-icon i {
      color: #fff;
    }
    
    .value-icon i {
      font-size: 42px;
      color: #ff5f13;
      transition: 0.3s;
    }
    
    .value-card h3 {
      font-size: 22px;
      font-weight: 700;
      color: #0e1d34;
      margin-bottom: 15px;
    }
    
    .value-card p {
      color: #6c757d;
      line-height: 1.7;
      margin: 0;
    }
    
    /* Quote Section */
    .quote-section {
      background: linear-gradient(135deg, #f8f9fc 0%, #ffffff 100%);
      position: relative;
      overflow: hidden;
      padding: 80px 0;
    }
    
    .quote-section::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -20%;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(255,95,19,0.05) 0%, rgba(255,95,19,0) 70%);
      border-radius: 50%;
    }
    
    .quote-content {
      position: relative;
      z-index: 5;
    }
    
    .quote-icon {
      font-size: 60px;
      color: #ff5f13;
      opacity: 0.3;
      margin-bottom: 20px;
    }
    
    .quote-text {
      font-size: 28px;
      font-weight: 600;
      color: #0e1d34;
      line-height: 1.5;
      margin-bottom: 20px;
      font-style: italic;
    }
    
    .quote-author {
      font-size: 18px;
      color: #6c757d;
    }
    
    .quote-author strong {
      color: #ff5f13;
    }
    
    /* Stats Section - Matching index.php exactly */
    .stats {
      padding: 60px 0;
      background-color: #f8f9fc;
      position: relative;
      overflow: hidden;
    }
    
    .stats::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -10%;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(255, 95, 19, 0.05) 0%, rgba(255, 95, 19, 0) 70%);
      border-radius: 50%;
      pointer-events: none;
    }
    
    .stats .stats-item {
      background: white;
      border-radius: 10px;
      padding: 30px 20px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.03);
      transition: all 0.3s ease;
      border: 1px solid rgba(0,0,0,0.03);
    }
    
    .stats .stats-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 30px rgba(255, 95, 19, 0.1);
      border-color: rgba(255, 95, 19, 0.1);
    }
    
    .stats .stats-item p {
      font-size: 16px;
      color: #6c757d;
      margin: 0;
      font-weight: 500;
    }
    
    .stats-number-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      font-size: 42px;
      font-weight: 700;
      color: #001973;
      margin-bottom: 10px;
      line-height: 1;
    }
    
    .stats-plus, .stats-percent {
      font-size: 42px;
      font-weight: 700;
      color: #001973;
      line-height: 1;
      display: inline-block;
    }
    
    .stats-item:hover .stats-number-wrapper,
    .stats-item:hover .stats-plus,
    .stats-item:hover .stats-percent,
    .stats-item:hover .stats-number-wrapper span {
      color: #ff5f13 !important;
    }
    
    .stats .stats-item span[data-purecounter] {
      font-size: 42px !important;
      font-weight: 700 !important;
      color: inherit !important;
      display: inline-block !important;
      margin: 0 !important;
      line-height: 1 !important;
    }
    
    /* Motto Section */
    .motto-section {
      background: #0e1d34;
      color: #fff;
      padding: 60px 0;
      position: relative;
      overflow: hidden;
    }
    
    .motto-section::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -10%;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(255,95,19,0.1) 0%, rgba(255,95,19,0) 70%);
      border-radius: 50%;
    }
    
    .motto-content {
      position: relative;
      z-index: 5;
      text-align: center;
    }
    
    .motto-content h3 {
      font-size: 24px;
      font-weight: 600;
      color: rgba(255,255,255,0.8);
      margin-bottom: 20px;
      letter-spacing: 2px;
    }
    
    .motto-content h2 {
      font-size: 48px;
      font-weight: 800;
      color: #fff;
      margin-bottom: 30px;
      position: relative;
      display: inline-block;
    }
    
    .motto-content h2::after {
      content: '';
      position: absolute;
      bottom: -15px;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 4px;
      background: #ff5f13;
      border-radius: 2px;
    }
    
    .motto-content p {
      font-size: 18px;
      color: rgba(255,255,255,0.7);
      max-width: 800px;
      margin: 40px auto 0;
    }
    
    /* Badge accent for results section */
    .badge-accent {
      display: inline-block;
      background: rgba(255, 95, 19, 0.1);
      color: #ff5f13;
      padding: 5px 15px;
      border-radius: 50px;
      font-size: 14px;
      font-weight: 600;
      border: 1px solid rgba(255, 95, 19, 0.2);
    }
    
    .divider-dispatch {
      width: 60px;
      height: 3px;
      background: #ff5f13;
      margin: 30px 0;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
      .page-title h1 {
        font-size: 36px;
      }
      
      .section-title span {
        font-size: 38px;
      }
      
      .section-title h2 {
        font-size: 28px;
      }
      
      .timeline::before {
        left: 30px;
      }
      
      .quote-text {
        font-size: 22px;
      }
      
      .motto-content h2 {
        font-size: 36px;
      }
      
      .floating-icon i {
        font-size: 50px;
      }
    }