* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  :root {
      --primary-blue: #0066CC;
      --dark-blue: #004499;
      --accent-gold: #D4AF37;
      --dark-bg: #1a1a2e;
      --text-dark: #1a1a2e;
      --text-light: #666;
      --white: #ffffff;
      --light-gray: #f8f9fa;
      --border-gray: #e0e0e0;
  }

  html {
      scroll-behavior: smooth;
  }

  body {
      font-family: 'Inter', sans-serif;
      color: var(--text-dark);
      line-height: 1.6;
      overflow-x: hidden;
      min-height: 100vh;
      background: var(--light-gray);
      scroll-behavior: smooth;
  }

  /* Custom Scrollbar */
  ::-webkit-scrollbar {
      width: 12px;
  }

  ::-webkit-scrollbar-track {
      background: var(--light-gray);
  }

  ::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, var(--primary-blue), var(--dark-blue));
      border-radius: 6px;
      border: 2px solid var(--light-gray);
  }

  ::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, var(--dark-blue), var(--primary-blue));
  }

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

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

  @keyframes fadeInLeft {
      from {
          opacity: 0;
          transform: translateX(-30px);
      }

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

  @keyframes fadeInRight {
      from {
          opacity: 0;
          transform: translateX(30px);
      }

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

  @keyframes scaleIn {
      from {
          opacity: 0;
          transform: scale(0.9);
      }

      to {
          opacity: 1;
          transform: scale(1);
      }
  }

  @keyframes float {

      0%,
      100% {
          transform: translateY(0);
      }

      50% {
          transform: translateY(-10px);
      }
  }

  @keyframes pulse {

      0%,
      100% {
          transform: scale(1);
      }

      50% {
          transform: scale(1.05);
      }
  }

  @keyframes slideIn {
      from {
          width: 0;
      }

      to {
          width: 100%;
      }
  }

  @keyframes rotateIn {
      from {
          opacity: 0;
          transform: rotate(-10deg) scale(0.8);
      }

      to {
          opacity: 1;
          transform: rotate(0) scale(1);
      }
  }

  @keyframes shimmer {
      0% {
          background-position: -1000px 0;
      }

      100% {
          background-position: 1000px 0;
      }
  }

  @keyframes countUp {
      from {
          opacity: 0;
          transform: translateY(20px);
      }

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

  .animate-on-scroll {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .animate-on-scroll.visible {
      opacity: 1;
      transform: translateY(0);
  }

  .delay-1 {
      transition-delay: 0.1s;
  }

  .delay-2 {
      transition-delay: 0.2s;
  }

  .delay-3 {
      transition-delay: 0.3s;
  }

  .delay-4 {
      transition-delay: 0.4s;
  }

  /* Navigation */
  .navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
  }

  .navbar.scrolled {
      padding: 0.5rem 0;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
  }

  .nav-container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 1rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }

  .logo {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      text-decoration: none;
      animation: fadeInLeft 0.8s ease;
  }

  .logo-icon {
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
      transition: transform 0.3s ease;
      position: relative;
      overflow: hidden;
      border-radius: 12px;
      background: white;
      padding: 4px;
  }

  .logo-icon img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 8px;
  }

  .logo:hover .logo-icon {
      transform: rotate(10deg) scale(1.1);
  }

  .logo-text {
      display: flex;
      flex-direction: column;
  }

  .logo-text span:first-child {
      font-weight: 800;
      font-size: 1.1rem;
      color: var(--text-dark);
      letter-spacing: -0.5px;
  }

  .logo-text span:last-child {
      font-size: 0.75rem;
      color: var(--primary-blue);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
  }

  .nav-links {
      display: flex;
      gap: 2.5rem;
      list-style: none;
  }

  .nav-links a {
      text-decoration: none;
      color: var(--text-dark);
      font-weight: 500;
      font-size: 0.95rem;
      position: relative;
      padding: 0.5rem 0;
      transition: color 0.3s ease;
  }

  .nav-links a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--primary-blue);
      transition: width 0.3s ease;
  }

  .nav-links a:hover {
      color: var(--primary-blue);
  }

  .nav-links a:hover::after {
      width: 100%;
  }

  @media (max-width: 992px) {
      .logo-icon {
          width: 50px;
          height: 50px;
      }

      .logo-text span:first-child {
          font-size: 0.95rem;
      }

      .logo-text span:last-child {
          font-size: 0.65rem;
      }
  }

  .nav-cta {
      background: var(--primary-blue);
      color: white !important;
      padding: 0.75rem 1.5rem !important;
      border-radius: 50px;
      transition: all 0.3s ease !important;
  }

  .nav-cta::after {
      display: none !important;
  }

  .nav-cta:hover {
      background: var(--dark-blue);
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(0, 102, 204, 0.4);
  }

  .mobile-menu-btn {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 5px;
  }

  .mobile-menu-btn span {
      width: 25px;
      height: 2px;
      background: var(--text-dark);
      transition: all 0.3s ease;
  }

  .mobile-menu {
      position: fixed;
      top: 78px;
      left: 0;
      right: 0;
      z-index: 999;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(15px);
      display: none;
      flex-direction: column;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  }

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

  .mobile-menu a {
      padding: 1rem 2rem;
      color: var(--text-dark);
      font-weight: 600;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      transition: background 0.2s ease, color 0.2s ease;
  }

  .mobile-menu a:hover {
      background: rgba(0, 102, 204, 0.06);
      color: var(--primary-blue);
  }

/* Hero Section - Professional & Responsive */

/* Hero Section - Force Background Image */
section.hero#home {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120px 0 60px;
    overflow: hidden;
}

/* Background Image - Using the section directly */
section.hero#home {
    background-image: url('./professional_colaboration.png');
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

/* Dark overlay for text readability - ONLY this, no other overlays */
section.hero#home .parallax-bg {
    display: none;
}

/* Create overlay using pseudo-element on the section */
section.hero#home::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 37, 64, 0.262);
    z-index: 0;
}

/* Remove any existing after pseudo-element that might be causing issues */
section.hero#home::after {
    display: none;
}

/* Keep content above overlay */
section.hero#home .hero-container-refined,
section.hero#home .hero-highlights {
    position: relative;
    z-index: 2;
}


 /* Container */
 .hero-container-refined {
     max-width: 1400px;
     width: 100%;
     margin: 0 auto;
     padding: 0 5%;
     display: grid;
     grid-template-columns: 1fr 0.9fr;
     gap: 4rem;
     align-items: center;
 }

 /* Hero Content */
 .hero-content {
     animation: fadeInLeft 0.8s ease;
 }

 .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     background: var(--primary-blue, #1e24bb);
     backdrop-filter: blur(8px);
     padding: 0.6rem 1.2rem;
     border-radius: 50px;
     margin-bottom: 1.5rem;
     font-size: 0.85rem;
     color: var(--white);
     font-weight: 600;
     border: 1px solid var(--primary-blue, #1e24bb);
 }

 .hero-badge span {
     width: 8px;
     height: 8px;
     background: #22c55e;
     border-radius: 50%;
     animation: pulse 2s infinite;
 }

 .hero-content h1 {
     font-size: clamp(2.2rem, 5vw, 3.8rem);
     font-weight: 800;
     line-height: 1.2;
     margin-bottom: 1.2rem;
     color: #ffffff;
     letter-spacing: -0.02em;
 }

 .hero-content h1 span {
     color: var(--primary-blue, #D4AF37);
     position: relative;
     display: inline-block;
 }

 .hero-subtitle {
     font-size: clamp(1rem, 2vw, 1.2rem);
     color: rgba(255, 255, 255, 0.85);
     margin-bottom: 1.8rem;
     max-width: 550px;
     line-height: 1.6;
 }

 /* Proof List */
 .hero-proof-list {
     list-style: none;
     margin-bottom: 2rem;
 }

 .hero-proof-list li {
     position: relative;
     padding: 0.7rem 0 0.7rem 2rem;
     color: rgba(255, 255, 255, 0.9);
     font-size: 0.95rem;
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }

 .hero-proof-list li::before {
     content: '✓';
     position: absolute;
     left: 0;
     top: 0.7rem;
     color: var(--accent-gold, #D4AF37);
     font-weight: bold;
 }

 /* Buttons */
 .hero-buttons {
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
     margin-top: 1.5rem;
 }

 .btn-primary {
     background: linear-gradient(135deg, var(--primary-blue, #0066CC), var(--dark-blue, #004499));
     color: white;
     padding: 0.9rem 2rem;
     border-radius: 50px;
     text-decoration: none;
     font-weight: 600;
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     transition: all 0.3s ease;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
     border: none;
     cursor: pointer;
     font-size: 0.95rem;
 }

 .btn-primary:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
     background: linear-gradient(135deg, var(--dark-blue), var(--primary-blue));
 }

 .btn-secondary {
     background: transparent;
     color: var(--text-dark);
     padding: 0.9rem 2rem;
     border-radius: 50px;
     text-decoration: none;
     font-weight: 600;
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     transition: all 0.3s ease;
     border: 2px solid var(--primary-blue);
 }

 .btn-secondary:hover {
     border-color: var(--white, #D4AF37);
     color: var(--primary-blue, #D4AF37);
     transform: translateY(-3px);
 }

 /* Hero Brief Card - Properly Positioned & Balanced */
 .hero-panel-shell {
     display: flex;
     align-items: center;
     /* Vertically center the card */
     justify-content: flex-end;
 }



 /* For desktop - align with hero content naturally */
 @media (min-width: 1101px) {
     .hero-container-refined {
         align-items: center;
         /* Vertically center both columns */
     }

     .hero-brief-card {
         /* No negative margin, stays naturally aligned */
         margin: 0;
     }
 }

 /* For tablet - prevent jumping */
 @media (max-width: 1100px) {
     .hero-panel-shell {
         justify-content: center;
         margin-top: 1rem;
     }

     .hero-brief-card {
         max-width: 100%;
         margin: 0 auto;
     }
 }

 /* For mobile - perfect balance */
 @media (max-width: 768px) {
     .hero-brief-card {
         padding: 1.5rem;
         margin: 1rem 0 0 0;
     }

     .hero-panel-shell {
         margin-top: 0;
     }
 }

 /* Fix the grid inside the card */
 .hero-brief-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1rem;
     margin-top: 0.5rem;
 }

 .hero-brief-item {
     padding: 1rem;
     border-radius: 16px;
     background: rgba(255, 255, 255, 0.06);
     border: 1px solid rgba(255, 255, 255, 0.08);
     transition: all 0.3s ease;
 }

 .hero-brief-item:hover {
     background: rgba(255, 255, 255, 0.12);
     transform: translateY(-3px);
 }

 .hero-brief-item strong {
     display: block;
     font-size: 1rem;
     margin-bottom: 0.35rem;
     color: var(--accent-gold, #D4AF37);
 }

 .hero-brief-item span {
     display: block;
     color: rgba(255, 255, 255, 0.8);
     line-height: 1.5;
     font-size: 0.85rem;
 }

 /* Responsive grid for mobile */
 @media (max-width: 550px) {
     .hero-brief-grid {
         grid-template-columns: 1fr;
         gap: 0.8rem;
     }
 }

 /* Card header styling */
 .hero-card-eyebrow {
     font-size: 0.7rem;
     letter-spacing: 0.15em;
     text-transform: uppercase;
     color: var(--accent-gold, #D4AF37);
     margin-bottom: 0.75rem;
     font-weight: 700;
 }

 .hero-brief-card h3 {
     font-size: clamp(1.2rem, 3vw, 1.6rem);
     line-height: 1.4;
     margin-bottom: 1.5rem;
     color: white;
 }

 /* Highlights Row */
 .hero-highlights {
     max-width: 1400px;
     width: 100%;
     margin: 3rem auto 0;
     padding: 0 5%;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.5rem;
 }

 .highlight-card {
     background: rgba(255, 255, 255, 0.08);
     backdrop-filter: blur(8px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 20px;
     padding: 1.2rem 1.5rem;
     transition: all 0.3s ease;
 }

 .highlight-card:hover {
     background: rgba(255, 255, 255, 0.858);
     transform: translateY(-5px);
     border-color: rgba(212, 175, 55, 0.3);
 }

 .highlight-card strong {
     display: block;
     color: var(--accent-gold, #D4AF37);
     margin-bottom: 0.5rem;
     font-size: 0.9rem;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .highlight-card span {
     color: rgba(255, 255, 255, 0.8);
     line-height: 1.5;
     font-size: 0.9rem;
 }

 /* Responsive */
 @media (max-width: 1100px) {
     .hero-container-refined {
         grid-template-columns: 1fr;
         gap: 2rem;
     }

     .hero-panel-shell {
         justify-content: center;
     }

     .hero-brief-card {
         max-width: 100%;
     }

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

 @media (max-width: 768px) {
     .hero {
         padding: 100px 0 40px;
     }

     .hero-container-refined {
         padding: 0 6%;
     }

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

     .btn-primary,
     .btn-secondary {
         justify-content: center;
         width: 100%;
     }

     .hero-brief-grid {
         grid-template-columns: 1fr;
         gap: 0.8rem;
     }

     .hero-highlights {
         grid-template-columns: 1fr;
         gap: 0.8rem;
         margin-top: 2rem;
     }

     .highlight-card {
         padding: 1rem 1.2rem;
     }

     .hero-brief-card {
         padding: 1.5rem;
     }

     .hero-proof-list li {
         font-size: 0.85rem;
         padding: 0.5rem 0 0.5rem 1.8rem;
     }

     .hero-proof-list li::before {
         top: 0.5rem;
     }
 }

 @media (max-width: 480px) {
     .hero-badge {
         font-size: 0.7rem;
         padding: 0.4rem 1rem;
     }

     .hero-brief-item {
         padding: 0.8rem;
     }
 }

 /* Animations */
 @keyframes fadeInLeft {
     from {
         opacity: 0;
         transform: translateX(-30px);
     }

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

 @keyframes pulse {

     0%,
     100% {
         transform: scale(1);
         opacity: 1;
     }

     50% {
         transform: scale(1.2);
         opacity: 0.7;
     }
 }

 .animate-on-scroll {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .animate-on-scroll.visible {
     opacity: 1;
     transform: translateY(0);
 }

 .delay-2 {
     transition-delay: 0.2s;
 }

  /* Why Choose Us Section */
  .why-us {
      padding: 6rem 2rem;
      background: white;
  }

  .section-container {
      max-width: 1400px;
      margin: 0 auto;
  }

  .section-header {
      text-align: center;
      margin-bottom: 4rem;
      animation: fadeInUp 0.8s ease;
  }

  .section-tag {
      display: inline-block;
      background: var(--primary-blue);
      color: var(--white);
      padding: 0.5rem 1rem;
      border-radius: 50px;
      font-size: 0.85rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 1rem;
      border: 1px solid rgba(0, 102, 204, 0.2);
  }

  .section-title {
      font-size: 2.5rem;
      font-weight: 800;
      color: var(--primary-blue);
      margin-bottom: 1rem;
  }

  .features-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem;
  }

  .feature-card {
      background: white;
      padding: 2.5rem 2rem;
      border-radius: 20px;
      text-align: center;
      transition: all 0.4s ease;
      border: 1px solid var(--border-gray);
      position: relative;
      overflow: hidden;
  }

  .feature-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, var(--primary-blue), var(--accent-gold));
      transform: scaleX(0);
      transition: transform 0.4s ease;
  }

  .feature-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      border-color: transparent;
  }

  .feature-card:hover::before {
      transform: scaleX(1);
  }

  .feature-icon {
      width: 70px;
      height: 70px;
      background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(212, 175, 55, 0.1));
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
      font-size: 1.8rem;
      line-height: 1;
      transition: all 0.3s ease;
  }

  .myicons{
        font-size: 2rem;
  }
  .icon_image {
      font-size: 2rem;
      width: 6rem;
      /* 32px */
      height: 6rem;
      /* 32px */
      border-radius: 30%;
      /* Makes it perfectly round */
      object-fit: cover;
      /* Ensures image fills the circle without distortion */
      display: inline-flex;
      align-items: center;
      justify-content: center;
  }
  .feature-card:hover .feature-icon {
      background: linear-gradient(135deg, var(--primary-blue), var(--accent-gold));
      color: white;
      transform: rotateY(360deg) scale(1.1);
      box-shadow: 0 10px 30px rgba(0, 102, 204, 0.4);
  }

  .feature-card h3 {
      font-size: 1.2rem;
      font-weight: 700;
      margin-bottom: 0.75rem;
      color: var(--text-dark);
  }

  .feature-card p {
      font-size: 0.95rem;
      color: var(--text-light);
      line-height: 1.7;
  }

  /* Services Section */
  .services {
      padding: 6rem 2rem;
      background: linear-gradient(135deg, var(--dark-bg) 0%, #16213e 100%);
      color: white;
      position: relative;
      overflow: hidden;
  }

  .services::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }

  .services .section-title {
      color: white;
  }

  .services-accordion {
      max-width: 1200px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
  }

  .service-category {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 15px;
      margin-bottom: 1rem;
      overflow: hidden;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .service-header {
      display: flex;
      align-items: center;
      padding: 2rem;
      cursor: pointer;
      transition: background 0.3s ease;
      user-select: none;
  }

  .service-header:hover {
      background: rgba(255, 255, 255, 0.15);
  }

  .service-icon {
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, var(--primary-blue), var(--accent-gold));
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      margin-right: 1.5rem;
      flex-shrink: 0;
  }

  .service-title-info h3 {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      color: white;
  }

  .service-title-info p {
      font-size: 1rem;
      color: rgba(255, 255, 255, 0.8);
      margin: 0;
  }

  .service-arrow {
      margin-left: auto;
      font-size: 1.2rem;
      transition: transform 0.3s ease;
      color: var(--accent-gold);
  }

  .service-category.active .service-arrow {
      transform: rotate(180deg);
  }

  .service-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.5s ease;
  }

  .service-category.active .service-content {
      max-height: 2000px;
  }

  .service-overview {
      padding: 2rem;
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 2rem;
      align-items: start;
  }

  .service-overview p {
      font-size: 1.1rem;
      color: rgba(255, 255, 255, 0.9);
      line-height: 1.8;
  }

  .service-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  }

  .sub-services {
      padding: 0 2rem 2rem;
  }

  .sub-service {
      background: rgba(255, 255, 255, 0.05);
      padding: 1.5rem;
      border-radius: 10px;
      margin-bottom: 1rem;
      border-left: 4px solid var(--accent-gold);
  }

  .sub-service h4 {
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
      color: white;
  }

  .sub-service p {
      font-size: 0.95rem;
      color: rgba(255, 255, 255, 0.8);
      line-height: 1.6;
  }

  .services-cta {
      text-align: center;
      margin-top: 3rem;
  }

  /* Certifications Section */
  .certifications {
      padding: 6rem 2rem;
      background: var(--light-gray);
  }

  .certifications-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin-top: 3rem;
  }

  .certification-card {
      background: white;
      padding: 2.5rem;
      border-radius: 20px;
      text-align: center;
      transition: all 0.4s ease;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
      border: 1px solid var(--border-gray);
      position: relative;
      overflow: hidden;
  }

  .certification-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, var(--primary-blue), var(--accent-gold));
      transform: scaleX(0);
      transition: transform 0.4s ease;
  }

  .certification-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      border-color: transparent;
  }

  .certification-card:hover::before {
      transform: scaleX(1);
  }

  .certification-card:hover .cert-icon {
      animation: spinIcon 0.6s ease-in-out;
  }

  @keyframes spinIcon {
      from {
          transform: rotateY(0);
      }

      to {
          transform: rotateY(360deg);
      }
  }

  .cert-icon {
      width: 70px;
      height: 70px;
      background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(232, 145, 58, 0.1));
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
      font-size: 1.8rem;
      transition: all 0.3s ease;
  }

  .certification-card:hover .cert-icon {
      background: linear-gradient(135deg, var(--primary-blue), var(--accent-gold));
      color: white;
      transform: rotateY(360deg);
  }

  .certification-card h3 {
      font-size: 1.2rem;
      font-weight: 700;
      margin-bottom: 1rem;
      color: var(--text-dark);
  }

  .certification-card p {
      font-size: 0.95rem;
      color: var(--text-light);
      line-height: 1.7;
      margin-bottom: 1.5rem;
  }

  .cert-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--primary-blue);
      color: white;
      padding: 0.4rem 1rem;
      border-radius: 50px;
      font-size: 0.8rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      line-height: 1;
      min-height: 36px;
      /* Ensures consistent height */
  }

  .cert-badge:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
  }

  .identifiers-section {
      background: white;
      padding: 2.5rem;
      border-radius: 20px;
      margin-top: 3rem;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  }

  .identifiers-section h3 {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 1.5rem;
      color: var(--text-dark);
      text-align: center;
  }

  .identifiers-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.5rem;
  }

  .identifier-item {
      text-align: center;
      padding: 1rem;
      background: var(--light-gray);
      border-radius: 10px;
  }

  .identifier-label {
      display: block;
      font-size: 0.9rem;
      color: var(--text-light);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 0.5rem;
  }

  .identifier-value {
      display: block;
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--primary-blue);
      font-family: 'Courier New', monospace;
  }

  .compliance-standards {
      background: white;
      padding: 2.5rem;
      border-radius: 20px;
      margin-top: 3rem;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  }

  .compliance-standards h3 {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 2rem;
      color: var(--text-dark);
      text-align: center;
  }

  .naics-accordion {
      background: white;
      padding: 2.5rem;
      border-radius: 20px;
      margin-top: 2rem;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  }

  .naics-accordion summary {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      cursor: pointer;
  }

  .naics-accordion summary::-webkit-details-marker {
      display: none;
  }

  .naics-summary-text h3 {
      margin-bottom: 0.5rem;
      text-align: left;
  }

  .naics-summary-text p {
      color: var(--text-light);
  }

  .naics-chevron {
      width: 44px;
      height: 44px;
      flex-shrink: 0;
      border-radius: 50%;
      background: rgba(0, 102, 204, 0.08);
      color: var(--primary-blue);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      font-weight: 700;
      transition: transform 0.3s ease, background 0.3s ease;
  }

  .naics-accordion[open] .naics-chevron {
      transform: rotate(180deg);
      background: rgba(0, 102, 204, 0.14);
  }

  .naics-list {
      margin-top: 1.5rem;
      display: grid;
      gap: 0.9rem;
  }

  .naics-item {
      padding: 1rem 1.1rem;
      background: var(--light-gray);
      border-radius: 12px;
      border-left: 4px solid var(--primary-blue);
      color: var(--text-dark);
      transition: transform 0.3s ease, background 0.3s ease;
  }

  .naics-item:hover {
      transform: translateX(8px);
      background: rgba(0, 102, 204, 0.08);
  }

  .standards-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1rem;
  }

  .standard-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem;
      background: var(--light-gray);
      border-radius: 10px;
      transition: all 0.3s ease;
  }

  .standard-item:hover {
      background: rgba(0, 102, 204, 0.1);
      transform: translateX(10px);
  }

  .standard-name {
      font-weight: 700;
      color: var(--primary-blue);
      font-size: 1rem;
  }

  .standard-desc {
      font-size: 0.9rem;
      color: var(--text-light);
      text-align: right;
  }

  /* Clients Section */
  .clients {
      padding: 4rem 2rem;
      background: white;
      overflow: hidden;
  }

  .clients-scroll {
      display: flex;
      gap: 4rem;
      animation: scroll 30s linear infinite;
  }

  @keyframes scroll {
      0% {
          transform: translateX(0);
      }

      100% {
          transform: translateX(-50%);
      }
  }

  .client-logo {
      flex-shrink: 0;
      height: 40px;
      opacity: 0.5;
      filter: grayscale(100%);
      transition: all 0.3s ease;
  }

  .client-logo:hover {
      opacity: 1;
      filter: grayscale(0%);
  }

  /* Contact Section */
  .contact-section {
      padding: 6rem 2rem;
      background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue));
      color: white;
      position: relative;
      overflow: hidden;
  }

  .contact-section::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -20%;
      width: 600px;
      height: 600px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 50%;
  }

  .contact-grid {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      position: relative;
      z-index: 1;
  }

  @media (max-width: 992px) {
      .contact-grid {
          grid-template-columns: 1fr;
          gap: 3rem;
      }
  }

  .contact-info {
      display: flex;
      flex-direction: column;
      gap: 2rem;
  }

  .contact-item {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      padding: 1.5rem;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 15px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: all 0.3s ease;
  }

  .contact-item:hover {
      background: rgba(255, 255, 255, 0.15);
      border-color: rgba(255, 255, 255, 0.3);
      transform: translateY(-5px);
  }

  .contact-icon {
      width: 50px;
      height: 50px;
      background: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary-blue);
      font-size: 1.3rem;
      flex-shrink: 0;
  }

  .contact-details h4 {
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      color: white;
  }

  .contact-details p {
      font-size: 0.95rem;
      color: rgba(255, 255, 255, 0.8);
      line-height: 1.6;
      margin: 0;
  }

  .contact-certifications {
      padding: 1.5rem;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 15px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .contact-certifications h4 {
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: 1rem;
      color: white;
  }

  .cert-badges {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 1rem;
  }

  .cert-badges .cert-badge {
      background: white;
      color: var(--primary-blue);
      padding: 0.5rem 1rem;
      border-radius: 50px;
      font-size: 0.8rem;
      font-weight: 700;
  }

  .cert-ids {
      font-size: 0.9rem;
      color: rgba(255, 255, 255, 0.8);
      line-height: 1.6;
  }

  .contact-form {
      background: rgba(255, 255, 255, 0.1);
      padding: 2.5rem;
      border-radius: 20px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-bottom: 1rem;
  }

  @media (max-width: 768px) {
      .form-row {
          grid-template-columns: 1fr;
      }
  }

  .form-group {
      margin-bottom: 1.5rem;
  }

  .form-group label {
      display: block;
      font-size: 0.9rem;
      font-weight: 600;
      color: white;
      margin-bottom: 0.5rem;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
      width: 100%;
      padding: 1rem;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.1);
      color: white;
      font-size: 0.95rem;
      transition: all 0.3s ease;
      font-family: 'Inter', sans-serif;
  }

  .form-group input::placeholder,
  .form-group textarea::placeholder {
      color: rgba(255, 255, 255, 0.6);
  }

  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
      outline: none;
      border-color: white;
      background: rgba(255, 255, 255, 0.2);
      box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
  }

  .form-group select {
      cursor: pointer;
  }

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

  .contact-form .btn-primary {
      width: 100%;
      justify-content: center;
  }

  /* About Section */
  .about {
      padding: 6rem 2rem;
      background: white;
  }

  .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
  }

  .about-image {
      position: relative;
  }

  .about-image img {
      width: 100%;
      height: 500px;
      object-fit: cover;
      border-radius: 20px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  }

  .about-badge {
      position: absolute;
      bottom: 30px;
      right: -20px;
      background: var(--primary-blue);
      padding: 1.5rem;
      color: var(--white);
      border-radius: 15px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      animation: float 3s ease-in-out infinite;
  }

  .about-content h3 {
      font-size: 2rem;
      font-weight: 800;
      margin-bottom: 1.5rem;
      color: var(--primary-blue);
  }

  .about-content>p {
      font-size: 1.1rem;
      color: var(--text-light);
      margin-bottom: 2rem;
      line-height: 1.8;
  }

  .about-features {
      list-style: none;
      margin-bottom: 2rem;
  }

  .about-features li {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      margin-bottom: 1rem;
      padding: 1rem;
      background: var(--light-gray);
      border-radius: 12px;
      transition: all 0.3s ease;
  }

  .about-features li:hover {
      background: rgba(0, 102, 204, 0.1);
      transform: translateX(10px);
  }

  .about-features li::before {
      content: '→';
      width: 24px;
      height: 24px;
      background: var(--primary-blue);
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      flex-shrink: 0;
  }

  .about-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      margin-top: 2rem;
  }

  .about-card {
      background: var(--light-gray);
      padding: 1.5rem;
      border-radius: 15px;
      text-align: center;
      transition: all 0.3s ease;
  }

  .about-card:hover {
      background: var(--primary-blue);
      color: white;
      transform: translateY(-5px);
  }

  .about-card h4 {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
  }

  .about-card p {
      font-size: 0.85rem;
      opacity: 0.8;
  }

  .page-hero {
      padding: 9rem 2rem 5rem;
      position: relative;
      overflow: hidden;
  }

  .page-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
          radial-gradient(circle at top left, rgba(0, 102, 204, 0.14), transparent 38%),
          radial-gradient(circle at bottom right, rgba(212, 175, 55, 0.16), transparent 32%);
      pointer-events: none;
  }

  .page-hero-about {
      /* background: linear-gradient(180deg, #f4f8ff 0%, #ffffff 100%); */
  }

  /* Background Image - Using the section directly */
  .page-hero-about {
      background-image: url('./IMG-20260423-WA0007.jpg');
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: scroll;
  }

  /* Create overlay using pseudo-element on the section */
  .page-hero-about::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(10, 37, 64, 0.262);
      z-index: 0;
  }

  /* Remove any existing after pseudo-element that might be causing issues */
  .page-hero-about::after {
      display: none;
  }

  .page-hero-contact {
      background: linear-gradient(180deg, #eef4ff 0%, #f8fbff 58%, #ffffff 100%);
  }

  .page-hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
      gap: 2.5rem;
      align-items: center;
      position: relative;
      z-index: 1;
  }

  .page-title {
      font-size: clamp(2.6rem, 5vw, 4.2rem);
      line-height: 1.05;
      font-weight: 800;
      color: var(--primary-blue);
      margin-bottom: 1.25rem;
      letter-spacing: -0.03em;
      max-width: 13ch;
  }

  .page-subtitle {
      max-width: 60ch;
      font-size: 1.05rem;
      line-height: 1.8;
      color: var(--text-dark);
  }

  .page-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-top: 2rem;
  }

  .page-stat-grid,
  .contact-quick-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
      margin-top: 2rem;
  }

  .page-stat-card,
  .contact-quick-card {
      background: rgba(255, 255, 255, 0.78);
      border: 1px solid rgba(0, 102, 204, 0.12);
      border-radius: 20px;
      padding: 1.25rem;
      box-shadow: 0 20px 45px rgba(0, 68, 153, 0.08);
      backdrop-filter: blur(12px);
  }

  .page-stat-card strong,
  .contact-quick-card strong {
      display: block;
      color: var(--primary-blue);
      font-size: 1.25rem;
      font-weight: 800;
      margin-bottom: 0.35rem;
  }

  .page-stat-card span,
  .contact-quick-card span {
      color: var(--text-light);
      font-size: 0.92rem;
      line-height: 1.6;
  }

  .page-hero-panel {
      display: grid;
      gap: 1rem;
  }

  .page-panel-card,
  .page-mini-card,
  .story-point,
  .value-card,
  .location-details-card {
      background: white;
      border-radius: 24px;
      border: 1px solid rgba(0, 102, 204, 0.1);
      box-shadow: 0 24px 50px rgba(23, 46, 84, 0.08);
  }

  .page-panel-card {
      padding: 2rem;
  }

  .page-panel-eyebrow {
      text-transform: uppercase;
      letter-spacing: 0.12em;
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--primary-blue);
      margin-bottom: 0.85rem;
  }

  .page-panel-card h3 {
      font-size: 1.7rem;
      line-height: 1.25;
      margin-bottom: 1rem;
      color: var(--text-dark);
  }

  .panel-check-list {
      list-style: none;
      display: grid;
      gap: 0.85rem;
  }

  .panel-check-list li {
      position: relative;
      padding-left: 1.6rem;
      color: var(--text-light);
  }

  .panel-check-list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.55rem;
      width: 0.65rem;
      height: 0.65rem;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--primary-blue), var(--accent-gold));
  }

  .page-panel-mini-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
  }

  .page-mini-card {
      padding: 1.25rem;
  }

  .page-mini-card span {
      display: block;
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-light);
      margin-bottom: 0.4rem;
  }

  .page-mini-card strong {
      font-size: 1rem;
      color: var(--text-dark);
      line-height: 1.5;
  }

  .story-section,
  .values-section,
  .location-map-section {
      padding: 5.5rem 2rem;
  }

  .story-section {
      background: #ffffff;
  }

  .story-grid,
  .location-map-shell,
  .capability-band-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 2rem;
      align-items: center;
  }

  .story-visual {
      position: relative;
  }

  .story-visual img {
      width: 100%;
      min-height: 520px;
      object-fit: cover;
      border-radius: 28px;
      box-shadow: 0 24px 60px rgba(25, 44, 76, 0.16);
  }

  .story-badge {
      position: absolute;
      left: 1.5rem;
      bottom: 1.5rem;
      background: rgba(255, 255, 255, 0.92);
      padding: 1rem 1.2rem;
      border-radius: 18px;
      box-shadow: 0 16px 30px rgba(22, 33, 62, 0.12);
      max-width: 260px;
  }

  .story-badge strong {
      display: block;
      color: var(--primary-blue);
      margin-bottom: 0.2rem;
  }

  .story-badge span {
      color: var(--text-light);
      font-size: 0.92rem;
  }

  .story-copy p {
      color: var(--text-light);
      line-height: 1.85;
      margin-bottom: 1rem;
  }

  .story-points {
      display: grid;
      gap: 1rem;
      margin-top: 1.5rem;
  }

  .story-point,
  .value-card {
      padding: 1.5rem;
  }

  .story-point h4,
  .value-card h3,
  .location-details-card h3 {
      color: var(--text-dark);
      margin-bottom: 0.5rem;
      font-size: 1.05rem;
  }

  .story-point p,
  .value-card p,
  .location-details-card p {
      color: var(--text-light);
      line-height: 1.7;
      margin: 0;
  }

  .values-section {
      background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
  }

  .value-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1.25rem;
  }

  .value-card {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .value-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 28px 60px rgba(0, 68, 153, 0.14);
  }

  .capability-band {
      padding: 5rem 2rem;
      background: linear-gradient(135deg, var(--dark-bg), #14294d);
      color: white;
  }

  .capability-band .section-title,
  .capability-band .section-tag {
      color: white;
  }

  .capability-band .section-tag {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.2);
  }

  .capability-list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.85rem;
      justify-content: flex-start;
  }

  .capability-pill {
      padding: 0.9rem 1.2rem;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: rgba(255, 255, 255, 0.92);
      font-weight: 600;
      letter-spacing: 0.01em;
  }

  .contact-section-redesign .section-title,
  .contact-section-redesign .section-tag,
  .contact-section-redesign .contact-section-intro {
      position: relative;
      z-index: 1;
  }

  .contact-tag {
      background: rgba(255, 255, 255, 0.15);
      color: white;
      border-color: rgba(255, 255, 255, 0.25);
  }

  .contact-section-intro {
      color: rgba(255, 255, 255, 0.82);
      max-width: 760px;
      margin: 1rem auto 0;
      line-height: 1.8;
  }

  .contact-section-redesign .contact-icon {
      width: 58px;
      height: 58px;
      border-radius: 18px;
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 800;
      padding: 0.5rem;
      text-align: center;
      line-height: 1.2;
  }

  .contact-details a {
      color: white;
      text-decoration: none;
      font-weight: 600;
  }

  .contact-details a:hover {
      text-decoration: underline;
  }

  .contact-form-title {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 2rem;
      color: white;
  }

  .location-map-section {
      background: linear-gradient(180deg, #ffffff 0%, #eef4ff 100%);
  }

  .location-map-shell {
      background: white;
      border-radius: 32px;
      padding: 2rem;
      box-shadow: 0 28px 70px rgba(23, 46, 84, 0.12);
      border: 1px solid rgba(0, 102, 204, 0.1);
  }

  .location-map-copy>p {
      color: var(--text-light);
      line-height: 1.8;
      margin-bottom: 1.5rem;
  }

  .location-details-card {
      padding: 1.5rem;
  }

  .location-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-top: 1.25rem;
  }

  .location-map-frame {
      min-height: 100%;
  }

  .location-map-frame iframe {
      width: 100%;
      height: 100%;
      min-height: 420px;
      border: 0;
      border-radius: 24px;
      box-shadow: inset 0 0 0 1px rgba(0, 102, 204, 0.08);
  }

  .hero-container-refined {
      align-items: stretch;
      gap: 3rem;
  }

  .hero-proof-list {
      list-style: none;
      display: grid;
      gap: 0.85rem;
      max-width: 42rem;
      margin-bottom: 2rem;
  }

  .hero-proof-list li {
      position: relative;
      padding: 0.95rem 1rem 0.95rem 3rem;
      background: rgba(255, 255, 255, 0.82);
      border: 1px solid rgba(0, 102, 204, 0.1);
      border-radius: 16px;
      box-shadow: 0 14px 30px rgba(21, 44, 79, 0.08);
      color: var(--text-dark);
      line-height: 1.6;
  }

  .hero-proof-list li::before {
      content: '';
      position: absolute;
      left: 1.15rem;
      top: 1.2rem;
      width: 0.9rem;
      height: 0.9rem;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--primary-blue), var(--accent-gold));
      box-shadow: 0 0 0 6px rgba(0, 102, 204, 0.08);
  }

  .hero-panel-shell {
      display: grid;
      gap: 1.25rem;
  }

  .hero-brief-card {
      margin-top: -4rem;
      margin-left: 2rem;
      width: calc(100% - 2rem);
      background: rgba(13, 27, 52, 0.92);
      color: white;
      border-radius: 24px;
      padding: 1.75rem;
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 28px 70px rgba(8, 22, 44, 0.28);
  }

  .hero-card-eyebrow {
      font-size: 0.75rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.72);
      margin-bottom: 0.75rem;
      font-weight: 700;
  }

  .hero-brief-card h3 {
      font-size: 1.55rem;
      line-height: 1.35;
      margin-bottom: 1.25rem;
      color: white;
  }

  .hero-brief-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
  }

  .hero-brief-item {
      padding: 1rem;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .hero-brief-item strong {
      display: block;
      font-size: 1rem;
      margin-bottom: 0.35rem;
      color: white;
  }

  .hero-brief-item span {
      display: block;
      color: rgba(255, 255, 255, 0.78);
      line-height: 1.55;
      font-size: 0.92rem;
  }

  .hero-highlights {
      max-width: 1400px;
      margin: 2.5rem auto 0;
      padding: 0 2rem 3rem;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
      position: relative;
      z-index: 1;
  }

  .highlight-card {
      background: rgba(255, 255, 255, 0.85);
      border: 1px solid rgba(0, 102, 204, 0.1);
      border-radius: 20px;
      padding: 1.35rem 1.4rem;
      box-shadow: 0 18px 40px rgba(18, 44, 79, 0.08);
  }

  .highlight-card strong {
      display: block;
      color: var(--text-dark);
      margin-bottom: 0.4rem;
      font-size: 0.98rem;
  }

  .highlight-card span {
      color: var(--text-light);
      line-height: 1.65;
      font-size: 0.94rem;
  }


 
  .home-about {
    position: relative;
      padding: 5.5rem 2rem;
    background-image: url('./IMG-20260423-WA0007.jpg');
        background-size: cover;
        background-position: center 30%;
        background-repeat: no-repeat;
        background-attachment: scroll;
      /* background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%); */
  }

   /* Create overlay using pseudo-element on the section */
   .home-about::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: rgba(10, 37, 64, 0.334);
       z-index: 0;
   }

        /* @media (max-width: 768px) {
            .home-about::before {
                    background: rgba(10, 37, 64, 0.48);
        } */
    /* } */
   .home-about .home-about-copy,
   .home-about .home-about-cards {
       position: relative;
       z-index: 1;
   }

  .home-about-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
      gap: 2rem;
      align-items: start;
  }

  .home-about-copy p {
      color: var(--white);
      line-height: 1.85;
      margin-bottom: 1rem;
      max-width: 62ch;
  }

  .home-about-cards {
      display: grid;
      gap: 1rem;
  }

  .home-about-card {
      background: white;
      border-radius: 24px;
      padding: 1.5rem;
      border: 1px solid rgba(0, 102, 204, 0.1);
      box-shadow: 0 24px 50px rgba(23, 46, 84, 0.08);
  }

  .home-about-card strong {
      display: block;
      color: var(--primary-blue);
      font-size: 1.1rem;
      margin-bottom: 0.4rem;
  }

  .home-about-card span {
      color: var(--text-light);
      line-height: 1.65;
  }

  .service-category-primary {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(0, 102, 204, 0.2));
      border-color: rgba(255, 255, 255, 0.18);
  }

  .service-category-tertiary {
      opacity: 0.92;
  }

  .service-category-tertiary .service-header {
      padding-top: 1.6rem;
      padding-bottom: 1.6rem;
  }

  .feature-icon,
  .service-icon,
  .cert-icon {
      font-weight: 800;
      letter-spacing: 0.04em;
      font-size: 0.82rem;
      text-transform: uppercase;
  }

  /* Testimonials Section */
  .testimonials {
      padding: 6rem 2rem;
      background: var(--light-gray);
  }

  .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
      margin-top: 3rem;
  }

  .testimonial-card {
      background: white;
      padding: 2.5rem;
      border-radius: 20px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
      transition: all 0.4s ease;
      position: relative;
  }

  .testimonial-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  }

  .testimonial-card::before {
      content: '"';
      position: absolute;
      top: 20px;
      right: 30px;
      font-size: 5rem;
      color: var(--primary-blue);
      opacity: 0.1;
      font-family: serif;
      line-height: 1;
  }

  .testimonial-header {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1.5rem;
  }

  .testimonial-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid var(--primary-blue);
  }

  .testimonial-info h4 {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text-dark);
  }

  .testimonial-stars {
      color: var(--accent-gold);
      font-size: 1rem;
      letter-spacing: 2px;
  }

  .testimonial-text {
      font-size: 1rem;
      color: var(--text-light);
      line-height: 1.8;
      font-style: italic;
  }

  .testimonial-link {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      color: var(--primary-blue);
      text-decoration: none;
      font-weight: 600;
      margin-top: 1.5rem;
      font-size: 0.9rem;
      transition: gap 0.3s ease;
  }

  .testimonial-link:hover {
      gap: 1rem;
  }

  /* Footer */
  .footer {
      background: var(--dark-bg);
      color: white;
      padding: 4rem 2rem 2rem;
  }

  .footer-grid {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 4rem;
      margin-bottom: 3rem;
  }

  .footer-brand {
      max-width: 300px;
  }

  .footer-logo {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 1.5rem;
  }

  .footer-logo-icon {
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue));
      transition: transform 0.3s ease;
  }

  .footer-logo-icon:hover {
      transform: scale(1.1);
  }

  .footer-logo-text {
      font-weight: 800;
      font-size: 1.2rem;
  }

  .footer-brand p {
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.8;
      margin-bottom: 1.5rem;
  }

  .footer-social {
      display: flex;
      gap: 1rem;
  }

  .footer-social a {
      width: 40px;
      height: 40px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-decoration: none;
      transition: all 0.3s ease;
  }

  .footer-social a svg {
      width: 18px;
      height: 18px;
      fill: currentColor;
  }

  .footer-social a:hover {
      background: var(--primary-blue);
      transform: translateY(-3px);
  }

  .footer-column h4 {
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: 1.5rem;
      color: white;
  }

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

  .footer-links li {
      margin-bottom: 0.75rem;
  }

  .footer-links a {
      color: rgba(255, 255, 255, 0.7);
      text-decoration: none;
      transition: all 0.3s ease;
      display: inline-block;
  }

  .footer-links a:hover {
      color: var(--primary-blue);
      transform: translateX(5px);
  }

  .footer-bottom {
      max-width: 1400px;
      margin: 0 auto;
      padding-top: 2rem;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: rgba(255, 255, 255, 0.5);
      font-size: 0.9rem;
  }

  .footer-certifications {
      display: flex;
      gap: 1rem;
      align-items: center;
  }

  .cert-badge {
      height: 50px;
      opacity: 0.8;
      transition: opacity 0.3s ease;
  }

  .cert-badge:hover {
      opacity: 1;
  }

  /* Responsive */
  @media (max-width: 1200px) {

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

      .hero h1 {
          font-size: 2.8rem;
      }
  }

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

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

      .hero-container,
      .services-content,
      .cta-container,
      .about-grid {
          grid-template-columns: 1fr;
          gap: 3rem;
      }

      .hero {
          padding-top: 100px;
      }

      .hero-image-float {
          display: none;
      }

      .stats-bar {
          position: relative;
          bottom: auto;
          left: auto;
          transform: none;
          margin-top: 3rem;
          flex-wrap: wrap;
          justify-content: center;
      }

      .stat-item:not(:last-child)::after {
          display: none;
      }

      .testimonials-grid {
          grid-template-columns: 1fr;
      }

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

      .page-hero-grid,
      .story-grid,
      .location-map-shell,
      .capability-band-grid {
          grid-template-columns: 1fr;
      }

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

      .story-visual {
          order: -1;
      }

      .hero-highlights,
      .home-about-grid,
      .hero-brief-grid {
          grid-template-columns: 1fr;
      }

      .hero-brief-card {
          margin: 0;
          width: 100%;
      }
  }

  @media (max-width: 768px) {

      .features-grid,
      .process-grid,
      .about-cards,
      .certifications-grid {
          grid-template-columns: 1fr;
      }

      .hero h1 {
          font-size: 2.2rem;
      }

      .section-title {
          font-size: 1.8rem;
      }

      .footer-grid {
          grid-template-columns: 1fr;
          gap: 2rem;
      }

      .footer-bottom {
          flex-direction: column;
          gap: 1rem;
          text-align: center;
      }

      .hero-container,
      .services-content,
      .cta-container,
      .about-grid {
          padding: 0 1.5rem;
      }

      /* .hero-image-main {
          height: auto;
      } */

      .hero-contact,
      .hero-buttons {
          width: 100%;
      }

      .stats-bar {
          width: 100%;
          margin-top: 2rem !important;
          margin-bottom: 2rem !important;
          justify-content: center;
          padding: 1.5rem 1rem !important;
          gap: 1.5rem !important;
      }

      .stat-item {
          flex: 0 1 auto;
      }

      .about {
          padding: 4rem 1.5rem;
      }

      .service-overview {
          grid-template-columns: 1fr;
      }

      .service-image {
          height: 250px;
      }

      .mobile-menu {
          top: 72px;
      }

      .contact-section {
          padding: 4rem 1.5rem;
      }

      .contact-grid {
          gap: 2rem;
      }

      .page-hero {
          padding: 8rem 1.5rem 4rem;
      }

      .page-title {
          font-size: 2.35rem;
          max-width: none;
      }

      .page-stat-grid,
      .contact-quick-grid,
      .page-panel-mini-grid,
      .value-grid {
          grid-template-columns: 1fr;
      }

      .story-section,
      .values-section,
      .location-map-section,
      .capability-band {
          padding: 4rem 1.5rem;
      }

      .location-map-shell {
          padding: 1.25rem;
          border-radius: 24px;
      }

      .story-visual img {
          min-height: 340px;
      }

      .story-badge {
          position: static;
          margin-top: 1rem;
          max-width: none;
      }

      .contact-info {
          gap: 1rem;
      }

      .hero-proof-list li {
          padding-left: 2.7rem;
      }

      .hero-highlights {
          padding: 0 1.5rem 2.5rem;
      }

      .home-about {
          padding: 4rem 1.5rem;
      }

      .contact-item {
          padding: 1rem;
      }

      .contact-form {
          padding: 1.5rem;
      }

      .contact-form h3 {
          font-size: 1.3rem;
          margin-bottom: 1.5rem;
      }

      .contact-form-title {
          font-size: 1.3rem;
          margin-bottom: 1.5rem;
      }

      .form-group label {
          font-size: 0.85rem;
      }

      .form-group input,
      .form-group select,
      .form-group textarea {
          padding: 0.75rem;
          font-size: 0.9rem;
      }

      .contact-icon {
          width: 40px;
          height: 40px;
          font-size: 1rem;
      }

      .contact-section-redesign .contact-icon {
          width: 48px;
          height: 48px;
          font-size: 0.68rem;
      }

      .contact-details h4 {
          font-size: 1rem;
      }

      .contact-details p {
          font-size: 0.85rem;
      }

      .compliance-standards,
      .naics-accordion {
          padding: 1.5rem;
      }

      .compliance-standards h3,
      .naics-summary-text h3 {
          font-size: 1.3rem;
      }

      .standards-list {
          grid-template-columns: 1fr;
      }

      .standard-item {
          flex-direction: column;
          align-items: flex-start;
          gap: 0.5rem;
      }

      .standard-item:hover,
      .naics-item:hover {
          transform: none;
      }

      .standard-desc {
          text-align: left;
      }

      .naics-accordion summary {
          align-items: flex-start;
      }

      .naics-chevron {
          width: 38px;
          height: 38px;
          font-size: 1.2rem;
      }

      .location-map-frame iframe {
          min-height: 320px;
      }
  }

  /* Loading Animation */
  .page-loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: white;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.5s ease, visibility 0.5s ease;
  }

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

  .loader {
      width: 50px;
      height: 50px;
      border: 4px solid var(--light-gray);
      border-top-color: var(--primary-blue);
      border-radius: 50%;
      animation: spin 1s linear infinite;
  }

  @keyframes spin {
      to {
          transform: rotate(360deg);
      }
  }

  /* Parallax Effect */
  .parallax-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 120%;
      background: linear-gradient(135deg, rgba(0, 102, 204, 0.03), rgba(232, 145, 58, 0.03));
      transform: translateY(0);
      will-change: transform;
  }