/* Legacy section styles (how-it-works, titleTop) moved out of layouts/app inline <style>. Used by includes/how_it_works and older CMS pages. */
      

      .featuredJobsCarousel .jobint {
        margin: 0 10px;
    }
  
  
    :root {
              --primary-color: #00B43D;
              --secondary-color: #090b0a;
              --light-bg: #f9f9f9;
              --grey-text: #666;
          }
          
          /* * {
              font-family: 'Poppins', sans-serif;
          } */
          
          /* body {
              background-color: #fff;
              color: #333;
              padding: 20px;
          } */
          
          .how-it-works-section {
              background: #FFFFFF;
              padding: 80px 0;
              border-radius: 20px;
              position: relative;
              overflow: hidden;
          }
        
          
          .titleTop {
              text-align: center;
              margin-bottom: 60px;
          }
          
          .titleTop h3 {
              font-weight: 700;
              margin-bottom: 15px;
              color: var(--secondary-color);
              font-size: 2.5rem;
          }
          
          .titleTop p {
              color: var(--grey-text);
              font-size: 1.2rem;
              max-width: 600px;
              margin: 0 auto;
          }
          
          .howlist {
              position: relative;
          }
          
          /* Progress Line */
          .progress-line {
              position: absolute;
              top: 80px;
              left: 10%;
              width: 80%;
              height: 4px;
              background: #e0e0e0;
              z-index: 1;
          }
          
          .progress-line::after {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: var(--primary-color);
              transform: scaleX(0);
              transform-origin: left;
              transition: transform 1.5s ease-in-out;
              animation: fillLine 2s forwards;
          }
          
          @keyframes fillLine {
              to {
                  transform: scaleX(1);
              }
          }
          
          .step-item {
              text-align: center;
              position: relative;
              z-index: 2;
              padding: 0 20px;
          }
          
          .step-icon-container {
              width: 100px;
              height: 100px;
              margin: 0 auto 30px;
              background: white;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              box-shadow: 0 10px 30px rgba(0, 180, 61, 0.15);
              position: relative;
              transition: all 0.4s ease;
              border: 3px solid white;
          }
          
          .step-icon-container::before {
              content: '';
              position: absolute;
              top: -5px;
              left: -5px;
              right: -5px;
              bottom: -5px;
              border-radius: 50%;
              background: linear-gradient(135deg, var(--primary-color), #00a036);
              z-index: -1;
              opacity: 0;
              transition: opacity 0.4s ease;
          }
          
          .step-item:hover .step-icon-container {
              transform: translateY(-10px);
              box-shadow: 0 15px 40px rgba(0, 180, 61, 0.25);
          }
          
          .step-item:hover .step-icon-container::before {
              opacity: 1;
          }
          
          .step-icon {
              font-size: 2.5rem;
              color: var(--primary-color);
              transition: all 0.4s ease;
          }
          
          .step-item:hover .step-icon {
              color: white;
              transform: scale(1.1);
          }
          
          .step-number {
              position: absolute;
              top: -10px;
              right: -10px;
              width: 40px;
              height: 40px;
              background: var(--primary-color);
              color: white;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              font-weight: 700;
              font-size: 1.2rem;
              box-shadow: 0 5px 15px rgba(0, 180, 61, 0.3);
          }
          
          .step-content h4 {
              font-weight: 600;
              margin-bottom: 15px;
              color: var(--secondary-color);
              font-size: 1.5rem;
          }
          
          .step-content p {
              color: var(--grey-text);
              line-height: 1.6;
              max-width: 300px;
              margin: 0 auto;
          }
          
          /* Responsive adjustments */
          @media (max-width: 992px) {
              .progress-line {
                  display: none;
              }
              
              .step-item {
                  margin-bottom: 50px;
              }
              
              .step-icon-container {
                  width: 100px;
                  height: 100px;
              }
              
              .step-icon {
                  font-size: 2rem;
              }
          }
          
          @media (max-width: 576px) {
              .titleTop h3 {
                  font-size: 2rem;
              }
              
              .step-icon-container {
                  width: 90px;
                  height: 90px;
              }
              
              .step-icon {
                  font-size: 1.8rem;
              }
              
              .step-content h4 {
                  font-size: 1.3rem;
              }
          }
  
  a{text-decoration:none !important; }