/* body {
    background-color: #000;
    color: #fff;
    font-family: "Segoe UI", sans-serif;
  }
   */
   .hero-section1 {
    background: #000;
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
  }
  
  .hero-heading1 {
    font-size: 3.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-top: 60px;
  }
  
  .highlighted1 {
    color: #1a73e8;
  }
  
  .hero-subtext1 {
    font-size: 1.2rem;
    color: #ccc;
    margin: 30px 0 20px;
  }
  
  .custom-btn1 {
    background-color: #1a73e8;
    padding: 14px 24px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    border-radius: 8px;
    width: fit-content;
  }
  
  .hero-left1 {
    padding: 40px 50px;
  }
  
  .hero-img-wrapper1 {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 40px;
    background: #000;
    
  }
  
  .hero-img1 {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  }
  
  /* Responsive tweaks */
  @media (max-width: 991.98px) {
    .hero-heading1 {
      font-size: 2.2rem;
      margin-top: 30px;
    }
  
    .hero-subtext1 {
      font-size: 1rem;
    }
  
    .hero-left1 {
      padding: 30px 20px;
      text-align: left;
    }
  
    .custom-btn1 {
      width: 100%;
      text-align: center;
    }
  
    .hero-img-wrapper1 {
      padding: 20px;
      margin-top: 30px;
    }
  }
/*   
  .bg-blue {
    background: linear-gradient(to bottom right, #007bff, #3399ff);
    transition: background 0.3s ease;
  } */

  
  .bg-dark-gray {
    background: #1c1c1d;
    transition: background 0.3s ease;
  }

  .custom-card {
    position: relative;
    overflow: hidden;
    background-color: #1a1a1a;
    border-radius: 20px;
    transition: all 0.3s ease;
  }
  
  .custom-card:hover {
    background: linear-gradient(135deg, #0056d2, #339af0);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
    transform: translateY(-5px);
  }
  
  .custom-card::before,
  .custom-card::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    z-index: 0;
    transition: all 0.4s ease;
  }
  
  .custom-card::before {
    width: 300px;
    height: 300px;
    top: -100px;
    left: -80px;
  }
  
  .custom-card::after {
    width: 250px;
    height: 250px;
    bottom: -80px;
    right: -60px;
  }
  

  .custom-card ul li {
    padding: 8px 0;
    font-size: 16px;
    display: flex;
    align-items: center;
  }

  .badge-point {
    color: ffff;
    margin-right: 10px;
    font-size: 20px;
    line-height: 1;
  }

.list-size{
  font-size: 13px !important;
}

  @media (max-width: 767.98px) {
    h2 {
      font-size: 24px;
    }

    .custom-card h4 {
      font-size: 18px;
    }
  }


/* ---------------start of work-flow section-------------------
             Technology section     */
             .workflow-title .highlight {
              color: #007bff;
          }
  
          .workflow-card {
              background: linear-gradient(135deg, #a5ec7f, #96db6c);
              border-radius: 20px;
              box-shadow: 0 4px 20px rgba(0,0,0,0.1);
              color: #000;
              transition: transform 0.3s ease;
              max-width: 100%;
              width: 100%;
              z-index: 10;
              position: relative;
          }
  
          .workflow-card:hover {
              transform: translateY(-5px);
          }
  
          .workflow-card .icon {
              font-size: clamp(30px, 5vw, 40px);
              margin-bottom: 20px;
          }
  
          .workflow-card h3 {
              font-weight: bold;
              margin-bottom: 15px;
              font-size: clamp(1.1rem, 2.5vw, 1.5rem);
          }
  
          .workflow-card p {
              font-size: clamp(0.9rem, 2vw, 1rem);
              color: #222;
              margin-bottom: 25px;
              line-height: 1.6;
          }
  
          .workflow-card .btn {
              background-color: #000;
              color: #fff;
              font-weight: bold;  
              font-size: clamp(0.8rem, 1.5vw, 0.9rem);
              padding: 12px 20px;
              border-radius: 10px;
              border: none;
              transition: all 0.3s ease;
              text-decoration: none;
              display: inline-block;
              text-align: center;
          }
  
          .workflow-card .btn:hover {
              background-color: whitesmoke;
              border: 2px solid #000;
              transform: translateY(-2px);
              box-shadow: 0 4px 15px rgba(0,0,0,0.2);
          }
  
          .workflow-title {
              font-size: clamp(1.8rem, 4vw, 3rem);
              font-weight: bold;
              line-height: 1.2;
              margin-bottom: 2rem;
          }
  
          /* Ring Container Base Styles */
          .ring-area {
              width: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              min-height: 400px;
              overflow: visible;
              position: relative;
              z-index: 1;
          }
  
          .ring-container {
            transform: scale(0.9);
              position: relative;
              width: 500px;
              height: 500px;
              margin: 0 auto;
              transform-origin: center center;
              z-index: 1;
          }
  
          .center-image {
              position: absolute;
              width: 340px;
              height: 340px;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              border-radius: 50%;
              overflow: hidden;
              z-index: 2;
              box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
              transition: all 0.5s ease;
          }
  
          .center-image img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: opacity 0.3s ease;
          }
  
          .outer-ring {
              position: absolute;
              width: 380px;
              height: 380px;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              border: 2px solid #ccc;
              border-radius: 50%;
              z-index: 1;
          }
  
          .point {
              position: absolute;
              width: 24px;
              height: 24px;
              background-color: white;
              border: 2px solid #ccc;
              border-radius: 50%;
              transform: translate(-50%, -50%);
              cursor: pointer;
              z-index: 3;
              transition: all 0.3s ease;
              display: flex;
              align-items: center;
              justify-content: center;
          }
  
          .point:hover {
              transform: translate(-50%, -50%) scale(1.2);
              box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
          }
  
          .point.active {
              background: linear-gradient(135deg, #339af0, #0056d2);
              border-color: #0056d2;
              transform: translate(-50%, -50%) scale(1.3);
          }
  
          .point-label {
              position: absolute;
              font-size: 14px;
              border: 1px solid #ccc;
              background-color: black;
              border-radius: 10px;
              opacity: 0.8;
              padding: 8px 12px;
              z-index: 999;
              font-weight: bold;
              color: whitesmoke;
              text-align: center;
              width: auto;
              min-width: 100px;
              max-width: 150px;
              font-size: 12px;
              opacity: 0;
              transition: opacity 0.3s;
              pointer-events: none;
              /* white-space: ; */
              overflow: hidden;
              /* text-overflow: ellipsis; */
          }
  
          .point:hover + .point-label,
          .point.active + .point-label {
              opacity: 1;
          }
  
          .moving-ball {
              position: absolute;
              width: 18px;
              height: 18px;
              background: linear-gradient(135deg, #339af0, #0056d2);
              border-radius: 50%;
              transform: translate(-50%, -50%);
              z-index: 4;
              box-shadow: 0 0 15px rgba(0, 86, 210, 0.6), 0 0 30px rgba(0, 86, 210, 0.4);
          }
  
          .ring-path {
              position: absolute;
              width: 380px;
              height: 380px;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              border-radius: 50%;
              z-index: 0;
              pointer-events: none;
          }
  
          /* Desktop Specific Styles - FIXED CARD SIZE */
          @media (min-width: 1025px) {
              .workflow-card {
                  max-width: 380px; /* Reduced from 500px to 380px */
              }
              
              .ring-area {
                  margin-top: 3rem;
                  align-items: flex-start;
                  padding-top: 2rem;
                  overflow: visible;
              }
              
              .workflow-left-column {
                  align-self: flex-start !important;
              }
          }
  
          /* Tablet Specific Styles (769px to 1024px) */
          @media (min-width: 769px) and (max-width: 1024px) {
              .workflow-card {
                  max-width: 450px;
                  margin-bottom: 0rem;
              }
              
              .ring-container {
                  transform: scale(1.5) !important;
                  width: 500px;
                  height: 500px;
                  margin: 2rem auto;
              }
              
              .ring-area {
                  margin-top: -2rem;
                  margin-bottom: 2rem;
                  min-height: 750px;
                  overflow: visible;
              }
              
              .point-label {
                  z-index: 999;
                  font-size: 12px;
                  width: 80px;
                  padding: 4px;
              }
              
              .col-lg-6.mb-4.mb-lg-0 {
                  margin-bottom: 0rem !important;
              }
          }
  
          /* Mobile Specific Styles (up to 768px) */
          @media (max-width: 768px) {
              .workflow-card {
                  max-width: 100%;
                  margin: 0 auto 1rem auto;
                  width: 100%;
              }
              
              .workflow-card .btn {
                  width: 100%;
                  max-width: none;
              }
              
              .ring-container {
                  transform: scale(0.9);
                  width: 500px;
                  height: 500px;
                  left: 50%;
                  transform-origin: center center;
                  margin: 2rem auto 2rem -250px;
              }
              
              .ring-area {
                  min-height: 350px;
                  padding: 0 20px;
                  overflow: hidden;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: 100%;
                  position: relative;
                  margin-top: -1rem;
                  margin-bottom: 2rem;
              }
              
              .point-label {
                  font-size: 12px;
                  width: 100px;
                  padding: 3px;
                  border-radius: 4px;
                  z-index: 999;
              }
              
              .col-lg-6.mb-4.mb-lg-0 {
                  margin-bottom: 1rem !important;
              }
          }
  
          /* Small Mobile Specific Styles (up to 480px) */
          @media (max-width: 480px) {
              .workflow-card {
                  max-width: 100%;
                  margin: 0 auto 1rem auto;
                  padding: 1rem !important;
              }
              
              .workflow-card .btn {
                  width: 100%;
                  padding: 15px 20px;
                  font-size: 1rem;
              }
              
              .ring-container {
                  transform: scale(0.5);
                  left: 50%;
                  margin: 2rem auto 2rem -250px;
              }
              
              .ring-area {
                  min-height: 300px;
                  padding: 0 15px;
                  overflow: hidden;
                  margin-top: -8rem;
                  
                  margin-bottom: 2rem;
                  margin-bottom: -10rem;
              }
              
              .point-label {
                  font-size: 9px;
                  width: 60px;
                  min-width: 55px;
                  padding: 4px;
                  z-index: 999;
              }
          }
  
          /* Section Padding */
          #Workflows-outcomes {
              padding: 3rem 0;
          }
  
          @media (max-width: 768px) {
              #Workflows-outcomes {
                  padding: 2rem 0;
              }
          }
/* ---------------start of technology section-------------------
             Technology section     */
 
             section.header {
              text-align: center;
              padding: 20px 0;
              background-color: #f0f0f0;
          }
          
          section.header h1 {
              font-size: 1.2rem;
              font-weight: 600;
              color: #333;
              margin-bottom: 0;
          }
          
          section.header h2 {
              font-size: 2rem;
              font-weight: 700;
              color: #111;
              margin-top: 5px;
          }
          
          section.main-content {
              padding: 0 15px 30px;
              
          }
          
          section.tech-arsenal {
              background-color: white;
              border-radius: 20px;
              box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
              overflow: hidden;
              margin-bottom: 30px;
          }
          
          section.category-section {
              background-color: #1967FB;
              color: white;
              padding: 15px 0;
              height: 100%;
              min-height: 500px;
              
              max-height: 400px;
              overflow-y: auto;
              overflow-x: hidden;
              scrollbar-width: thin;
              scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
          }
          
          /* Custom scrollbar styling */
          section.category-section::-webkit-scrollbar {
              width: 6px;
          }
          
          section.category-section::-webkit-scrollbar-track {
              background: rgba(0, 0, 0, 0.1);
              border-radius: 10px;
          }
          
          section.category-section::-webkit-scrollbar-thumb {
              background-color: rgba(255, 255, 255, 0.3);
              border-radius: 10px;
          }
          
          section.category-section::-webkit-scrollbar-thumb:hover {
              background-color: rgba(255, 255, 255, 0.5);
          }
          
          .category-item {
              padding: 12px 20px;
              cursor: pointer;
              display: flex;
              align-items: center;
              font-weight: 500;
              transition: background 0.3s;
          }
          
          .category-item i {
              margin-right: 12px;
              font-size: 18px;
              width: 24px;
              text-align: center;
          }
          
          .category-item.active {
              background-color: rgba(255, 255, 255, 0.1);
              border-radius: 10px;
          }
          
          .category-item.active::after {
              content: "→";
              margin-left: auto;
          }
          
          section.tech-section {
              padding: 20px;
          }
          .tech-item {
              display: flex;
            
              flex-wrap: wrap;
              padding: 10px;
            
          }

          .tech-card {
              background-color: #f9f9f9;
              border-radius: 10px;
              padding: 20px;
              width: 100%;
              margin-bottom: 20px;
              display: flex;
              align-items: center;
              
          }
          
          .tech-logo {
              width: 30px;
              height: 30px;
              margin-right: 15px;
              object-fit: contain;
          }
          
          .tech-name {
              font-weight: 600;
              font-size: 1rem;
              margin-bottom: 0;
          }
          
          @media (max-width: 767px) {
              section.category-section {
                  min-height: auto;
                  overflow-x: auto;
                  white-space: nowrap;
                  display: flex;
                  padding: 10px;
                  max-height: none;
              }
              
              .category-item {
                  display: inline-flex;
                  padding: 8px 15px;
                  margin-right: 10px;
                  min-width: max-content;
              }
              
              .category-item.active::after {
                  display: none;
              }
              
              section.tech-section {
                  padding: 15px;
              }
              
              .tech-card {
                  padding: 15px;
              }
              
              section.main-content {
                  padding: 0 10px 20px;
              }
          }

/*------------------- end of technology section-------------------
             Technology section     */








/* ---------------start of advantage section-------------------
             Technology section     */
  
             .page-wrapper {
              position: relative;
              width: 100%;
              /* min-height: 100vh; */
              overflow: hidden;
              background-color: #000;
            }
        
            .blur-image {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 40%;
              background-image: url('/assets/images/WhatsApp\ Image\ 2025-06-09\ at\ 12.10.49\ PM.jpeg');
              background-size: cover;
              background-position: center;
              filter: blur(4px);
              opacity: 0.25;
              z-index: 1;
            }
        
            .advantage-section {
              position: relative;
              z-index: 2;
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 100px 15px;
            }
        
            .advantage-container {
              position: relative;
              max-width: 1200px;
              width: 90%;
              border-radius: 16px;
              padding: 60px 30px;
              background-color: rgba(255, 255, 255, 0.05);
              backdrop-filter: blur(12px);
              -webkit-backdrop-filter: blur(12px);
              box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
              border: 1px solid rgba(255, 255, 255, 0.1);
              color: #fff;
              clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
            }
        
            .header-section {
              text-align: center;
              margin-bottom: 70px;
            }
        
            .main-title {
              font-size: 16px;
              letter-spacing: 1px;
              margin-bottom: 15px;
              text-transform: uppercase;
              font-weight: 500;
            }
        
            .sub-title {
              font-size: 36px;
              font-weight: 600;
              margin-bottom: 20px;
            }
        
            .features-grid {
              padding: 0 15px;
            }
        
            .feature-row {
              margin-bottom: 50px;
              position: relative;
            }
        
            .feature-column {
              padding: 0 25px;
              position: relative;
            }
            @keyframes subtleShake {
              0% { transform: translate(0, 0); }
              25% { transform: translate(-2px, 2px); }
              50% { transform: translate(2px, -2px); }
              75% { transform: translate(-2px, -2px); }
              100% { transform: translate(0, 0); }
            }
            
            .feature-icon {
              
              font-size: 28px;
              margin-bottom: 20px;
              animation: subtleShake 2s infinite;
            }
            
        
            .feature-title {
              font-size: 22px;
              font-weight: 600;
              margin-bottom: 20px;
            }
        
            .feature-text {
              font-size: 14px;
              line-height: 1.6;
              color: rgba(255, 255, 255, 0.8);
            }
        
            .vertical-divider {
              width: 1px;
              position: absolute;
              top: 0;
              bottom: 0;
              left: 50%;
              transform: translateX(-50%);
            }
        
            .horizontal-divider {
              height: 1px;
              /* background-color: rgba(255, 255, 255, 0.2); */
              width: 90%;
              margin: 0 auto 50px;
            }
        
            @media (max-width: 991px) {
              .vertical-divider {
                display: none;
              }
              .feature-column {
                margin-bottom: 30px;
              }
              .advantage-container {
                margin: 0 10px;
                clip-path: none;
                padding: 40px 20px;
              }
            }