/* Base styles */
     body {
          font-family: 'Inter', sans-serif;
          background-color: #f8fafc;
          color: #0a192f;
          overflow-x: hidden;
     }
.banner-cover {
    background: url('../images/about.jpg'), #00000082;
    background-size: cover;
    background-blend-mode: overlay;
}
         .service-cover {
            background: url('../images/services.jpg'), #00000082;
            background-size: cover;
            background-blend-mode: overlay;
        }
   #home {
    background: url('../images/consulting.jpg') center center / cover no-repeat, linear-gradient(110deg, #cbc4a6d9 0%, #000000cc 100%);
    background-size: cover;
    background-position-y: -4vh;
    background-blend-mode: multiply;
}

     /* Floating Particles Background - Adjusted for more variance */
     .animate-float {
          animation: float 6s ease-in-out infinite;
     }

     .animate-float-lg {
          animation: float-lg 8s ease-in-out infinite;
     }

     .animate-float-sm {
          animation: float-sm 4s ease-in-out infinite;
     }

     /* Text balance */
     .text-balance {
          text-wrap: balance;
     }

     /* Client logos with icons - More distinct hover */
     .client-logo {
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 1rem;
          font-weight: 500;
          color: #334155;
          transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          /* Smoother transition */
          text-align: center;
          padding: 0.75rem;
          border-radius: 0.75rem;
          filter: grayscale(100%);
          /* Grayscale default */
          opacity: 0.8;
     }

     .client-logo:hover {
          color: rgb(84 193 33);
          transform: scale(1.1);
          /* More pronounced scale */
          background-color: rgba(212, 175, 55, 0.1);
          /* More visible background on hover */
          filter: grayscale(0%);
          /* Full color on hover */
          opacity: 1;
     }

     .client-logo i {
          font-size: 3rem;
          /* Slightly larger icons */
          margin-bottom: 0.75rem;
          color: #334155;
          transition: color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     }

     .client-logo:hover i {
          color: rgb(84 193 33);
     }


     /* Services section - Enhanced hover effect */
     .service-card {
          position: relative;
          overflow: hidden;
          perspective: 1000px;
          /* For 3D transform */
     }

     .service-card::after {
          content: '';
          position: absolute;
          top: -50%;
          left: -50%;
          width: 200%;
          height: 200%;
          background: radial-gradient(circle at center, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0) 70%);
          /* Stronger radial gradient */
          opacity: 0;
          transition: opacity 0.7s ease, transform 0.7s ease;
          /* Added transform for smoother interaction */
          pointer-events: none;
     }

     .service-card:hover::after {
          opacity: 1;
          transform: scale(1.1);
          /* Slight scale on the gradient */
     }

     .service-card:hover {
          transform: translateY(-8px) rotateX(2deg);
          /* Added subtle 3D tilt */
          box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
          /* More pronounced shadow */
     }

     /* Form styling */
     input,
     textarea {
          transition: all 0.3s ease;
     }

     input:focus,
     textarea:focus {
          border-color: rgb(84 193 33);
          box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.3);
          /* Stronger focus ring */
     }

     /* Styles for the new Impact section - Gradient background, more vibrant numbers */
     .impact-metric {
          background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
          /* Subtle gradient */
          border: 1px solid rgba(255, 255, 255, 0.15);
          padding: 2.5rem;
          border-radius: 1rem;
          text-align: center;
          transition: all 0.4s ease;
          position: relative;
          overflow: hidden;
     }

     .impact-metric::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 1rem;
          background: linear-gradient(45deg, rgba(212, 175, 55, 0.2), transparent);
          opacity: 0;
          transition: opacity 0.4s ease;
          z-index: 0;
     }

     .impact-metric:hover::before {
          opacity: 1;
     }

     .impact-metric:hover {
          border-color: rgb(84 193 33);
          /* Gold border on hover */
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
          transform: translateY(-8px) scale(1.02);
          /* Slight lift and scale */
     }

     .impact-metric .number {
          font-size: 4rem;
          /* Larger font size */
          font-weight: 800;
          /* Bolder */
          color: rgb(84 193 33);
          margin-bottom: 0.75rem;
          line-height: 1;
          position: relative;
          z-index: 1;
     }

     .impact-metric .description {
          font-size: 1.25rem;
          /* Slightly larger description */
          color: #f8fafc;
          line-height: 1.6;
          position: relative;
          z-index: 1;
     }

     /* Yellow/Orange Callout Box inspired by Image 2 - More pronounced */
     .callout-box {
          background-color: #fdefc7;
          /* Lighter, more inviting yellow */
          color: #334155;
          padding: 2rem;
          border-radius: 1rem;
          /* More rounded */
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
          /* Stronger shadow */
          border-left: 8px solid rgb(84 193 33);
          /* Thicker accent gold border */
          margin-top: 2.5rem;
          font-style: italic;
          line-height: 1.7;
          font-size: 1.125rem;
          /* Slightly larger text */
          position: relative;
     }

     .callout-box::before {
          content: '“';
          /* Add a large quote mark */
          position: absolute;
          top: 10px;
          left: 10px;
          font-family: serif;
          font-size: 5rem;
          color: rgba(212, 175, 55, 0.2);
          line-height: 1;
          z-index: 0;
     }

     /* Team member styling - Unique shape, hover overlay */
     .team-member-card {
          background-color: #ffffff;
          border-radius: 1.25rem;
          /* More rounded */
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
          padding: 1.5rem;
          text-align: center;
          transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          position: relative;
          overflow: hidden;
     }

     .team-member-card:hover {
          transform: translateY(-10px) rotateZ(1deg);
          /* Lift and slight rotation */
          box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
     }

     .team-member-card img {
          width: 130px;
          /* Slightly larger image */
          height: 130px;
          border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
          /* Organic, squarish shape */
          object-fit: cover;
          margin-bottom: 1.25rem;
          border: 0;
          /* Thicker accent border */
          transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     }

     .team-member-card:hover img {
          border-color: #a855f7;
          /* Change border color on hover */
          transform: scale(1.05);
     }

     .team-member-card h4 {
          font-weight: 700;
          font-size: 1.35rem;
          /* Slightly larger name */
          color: #0a192f;
          margin-bottom: 0.35rem;
     }

     .team-member-card p {
          font-size: 1rem;
          /* Slightly larger title */
          color: #334155;
     }

     /* Work Showcase Section - Enhanced overlay, diagonal wipe */
     .work-card {
          border-radius: 1.25rem;
          /* More rounded */
          overflow: hidden;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
          transition: all 0.4s ease;
     }

     .work-card:hover {
          transform: scale(1.03);
          /* Slight zoom on card */
          box-shadow: 0 15px 45px rgba(0, 0, 0, 0.2);
     }

     .work-card img {
          transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     }

     .work-card .absolute {
          background: linear-gradient(135deg, rgba(10, 25, 47, 0.95) 0%, rgba(10, 25, 47, 0.7) 100%);
          /* Deeper, richer overlay */
          opacity: 0;
          transform: translateY(100%);
          /* Start from bottom */
          transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     }

     .work-card:hover .absolute {
          opacity: 1;
          transform: translateY(0%);
          /* Slide up */
     }

     .work-card .absolute h3,
     .work-card .absolute p {
          transform: translateY(20px);
          /* Start text slightly lower */
          opacity: 0;
          transition: all 0.5s ease 0.2s;
          /* Delayed text fade-in */
     }

     .work-card:hover .absolute h3,
     .work-card:hover .absolute p {
          transform: translateY(0);
          opacity: 1;
     }

     /* New styles for Hero Section Image */
     .hero-image-container {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
     }

     .cta-button-primary,
     .cta-button-secondary {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 0.75rem 1.5rem;
          /* 12px 24px */
          border-radius: 9999px;
          /* pill shape */
          font-size: 0.95rem;
          /* 15px */
          font-weight: 600;
          /* semibold */
          text-transform: uppercase;
          letter-spacing: 0.05em;
          border: 2px solid transparent;
          transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          transform: translateY(0);
     }

     .cta-button-primary:hover,
     .cta-button-secondary:hover {
          transform: translateY(-3px);
          box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
     }

     /* Primary Button (Gold) */
     .cta-button-primary {
          background-color: rgb(226 194 9);
          /* accent color */
          color: #0a192f;
          /* primary-dark color */
     }

     .cta-button-primary:hover {
          background-color: rgb(228 194 9)
          /* accent-dark color */
     }

     /* Secondary Button (Outlined) */
     .cta-button-secondary {
          background-color: transparent;
          color: #f8fafc;
          /* primary-light color */
          border-color: rgb(226 194 9)
          /* accent color */
     }

     .cta-button-secondary:hover {
          background-color: rgb(228 194 9)
          color: #0a192f;
     }

     .hero-styled-image-wrapper {
          position: relative;
          width: 100%;
          max-width: 550px;
          /* Increased max-width */
          height: 350px;
          /* Fixed height for a consistent frame size */
          background-color: #0a192f;
          /* Primary dark as the frame background */
          padding: 12px;
          /* Thicker padding to create the frame */
          border-radius: 1.5rem;
          /* More prominent rounded corners */
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(212, 175, 55, 0.3);
          /* Outer shadow + inner glow */
          overflow: hidden;
          /* Subtle tilt, less aggressive than before */
          transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) scale(0.98);
          transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     }

     .hero-styled-image-wrapper:hover {
          transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1.02);
          /* More pronounced zoom and no tilt on hover */
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(212, 175, 55, 0.5);
          /* Stronger shadows on hover */
     }

     .hero-styled-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 1rem;
          /* Slightly less rounded than wrapper for the inner frame */
          display: block;
          /* Adjust filter for a slightly more muted, but still vibrant look */
          filter: brightness(0.9) contrast(1.1);
          transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     }

     .hero-styled-image-wrapper:hover .hero-styled-image {
          filter: brightness(1) contrast(1);
          /* Return to normal on hover */
     }

     /* =================================================================
   Premium Scrolling Client Logos
==================================================================== */
     .scroller {
          max-width: 900px;
          margin: auto;
          -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
          mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
     }

     .scroller__inner {
          display: flex;
          flex-wrap: nowrap;
          gap: 2.5rem;
          /* Increased gap for more spacing */
          animation: scroll 40s linear infinite;
     }

     .scroller:hover .scroller__inner {
          animation-play-state: paused;
     }

     @keyframes scroll {
          to {
               transform: translate(calc(-50% - 1.25rem));
               /* Adjust based on new gap */
          }
     }

     .client-logo-scroller {
          font-size: 1.5rem;
          /* 24px */
          font-weight: 600;
          font-family: 'Playfair Display', serif;
          /* Using display font for elegance */
          color: rgb(252, 252, 252);
          /* primary-light with transparency */
          white-space: nowrap;
          transition: all 0.4s ease;
          padding: 0.5rem 1rem;
     }

     .scroller__inner:hover .client-logo-scroller {
          color: rgba(248, 250, 252, 0.3);
          /* Fade out non-hovered logos */
     }

     .scroller__inner .client-logo-scroller:hover {
          color: rgb(84 193 33);
          /* Accent color on hover */
          transform: scale(1.1);
     }

     /* =================================================================
   Premium "Who We Serve" Section
==================================================================== */
     .audience-card-visual {
          position: relative;
          display: block;
          overflow: hidden;
          border-radius: 1rem;
          /* 16px */
          aspect-ratio: 4 / 5;
          border: 1px solid rgba(255, 255, 255, 0.1);
          transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     }

     .audience-card-visual:hover {
          transform: translateY(-8px) scale(1.03);
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
          border-color: rgba(212, 175, 55, 0.5);
          /* accent color with transparency */
     }

     .audience-card-visual__image {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-size: cover;
          background-position: center;
          transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     }

     .audience-card-visual:hover .audience-card-visual__image {
          transform: scale(1.1);
     }

     .audience-card-visual__overlay {
          position: absolute;
          inset: 0;
          background: linear-gradient(to top, rgba(10, 25, 47, 0.95) 0%, rgba(10, 25, 47, 0.2) 60%, transparent 100%);
          transition: background 0.5s ease;
     }

     .audience-card-visual:hover .audience-card-visual__overlay {
          background: linear-gradient(to top, rgba(10, 25, 47, 1) 0%, rgba(10, 25, 47, 0.4) 60%, transparent 100%);
     }

     .audience-card-visual__content {
          position: relative;
          z-index: 10;
         
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          padding: 1.75rem;
          /* 28px */
          text-align: left;
     }

     .audience-card-visual__content i,
     .audience-card-visual__content h4,
     .audience-card-visual__content p {
          transform: translateY(10px);
          opacity: 0;
          transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     }

     .audience-card-visual:hover .audience-card-visual__content i,
     .audience-card-visual:hover .audience-card-visual__content h4,
     .audience-card-visual:hover .audience-card-visual__content p {
          transform: translateY(0);
          opacity: 1;
     }

     .audience-card-visual:hover .audience-card-visual__content h4 {
          transition-delay: 0.1s;
     }

     .audience-card-visual:hover .audience-card-visual__content p {
          transition-delay: 0.15s;
     }

     /* =================================================================
   Premium "Our Impact" Section
==================================================================== */
     .impact-content-area {
          position: relative;
          z-index: 10;
     }

     .impact-stats-visual {
          position: relative;
          text-align: center;
          padding: 4rem 2rem;
          background: rgba(255, 255, 255, 0.03);
          border-radius: 1.5rem;
          border: 1px solid rgba(255, 255, 255, 0.1);
          backdrop-filter: blur(10px);
          box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
     }

     #impact-number {
          text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
          /* accent color text shadow */
          line-height: 1;
     }

     #impact-description {
          min-height: 56px;
          /* Reserve space to prevent layout shift */
     }

     .impact-nav-button {
          width: 4rem;
          /* 64px */
          height: 4rem;
          /* 64px */
          border-radius: 9999px;
          /* circle */
          border: 2px solid rgba(212, 175, 55, 0.5);
          color: rgba(212, 175, 55, 0.8);
          display: inline-flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;
     }

     .impact-nav-button:hover {
          background-color: rgb(84 193 33);
          /* accent color */
          color: #0a192f;
          /* primary dark */
          border-color: rgb(84 193 33);
          transform: scale(1.05);
     }

     /* =================================================================
      PERFORMANCE OPTIMIZATIONS
     ================================================================= */
     /* 1. Optimize Header Animation */
     #header::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #f8fafc;
          /* primary-light */
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          opacity: 0;
          z-index: -1;
          transition: opacity 0.3s ease-in-out;
     }

     #header.scrolled::before {
          opacity: 0.95;
          /* Corresponds to bg-primary-light/95 */
     }

     /* 2. Hint browser about upcoming animations */
     .hero-title span span,
     .hero-buttons a,
     .client-preview,
     .about-image-container,
     .about-content>*,
     .approach-header>*,
     .approach-card,
     .services-header>*,
     .service-card,
     .audience-header>*,
     .audience-card-visual,
     .team-header>*,
     .team-member-card,
     .impact-content-area>*,
     .work-header>*,
     .work-card,
     .testimonial-content,
     .contact-info>*,
     .contact-form {
          will-change: transform, opacity;
     }

      .audience-card-visual__content h4,
          .audience-card-visual__content p,
          .audience-card-visual__content i {
               opacity: 1 !important;
          }

          #impact li {
               list-style: none;
          }


         .wpcf7-list-item label {
    display: inline-flex;
}