.vision-section {
     position: relative;
     overflow: hidden;
 }

 .gif-background {
     background: url('img/ai-generated-7879042_1280.jpg') center/cover no-repeat !important;
     min-height: 500px;
     position: relative;
     background-attachment: fixed;
     /* Creates parallax effect */
     background-size: cover;
     background-position: center center;
     animation: fadeIn 1.5s ease-in-out;
     /* Smooth fade in */
 }

 /* Fallback for browsers that don't support fixed attachment */
 @supports not (background-attachment: fixed) {
     .gif-background {
         background-attachment: scroll;
     }
 }

 /* Overlay to ensure text readability */
 .bg-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;

     mix-blend-mode: multiply;
 }

 /* Animation for smooth loading */
 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 /* Responsive adjustments */
 @media (max-width: 992px) {
     .gif-background {
         background-attachment: scroll;
         min-height: 400px;
     }
 }

 @media (max-width: 768px) {
     .gif-background {
         min-height: 350px;
         background-size: contain;
         background-color: #3CB815;
         /* Fallback solid color */
     }
 }

 .bg-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;

     /* Green overlay with transparency */
 }

 .vision-card {
     background: rgba(0, 0, 0, 0.6);
     backdrop-filter: blur(5px);
     border-radius: 15px;
     border: 2px solid rgba(255, 255, 255, 0.1);
     position: relative;
     z-index: 2;
 }

 .vision-pill {
     background: rgba(255, 255, 255, 0.1);
     color: white;
     border-radius: 50px;
     border: 1px solid rgba(255, 255, 255, 0.3);
     font-size: 1.1rem;
 }

 .fa-seedling {
     color: #3CB815;
     text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
 }

 @media (max-width: 768px) {
     .gif-background {
         min-height: 400px;
     }
 }

 .mission-card {
     background: rgba(0, 0, 0, 0.6);
     backdrop-filter: blur(10px);
     border-radius: 15px;
     border: 1px solid rgba(255, 255, 255, 0.2);
     position: relative;
     z-index: 2;
     transition: all 0.3s ease;
 }

 .mission-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
 }

 .mission-pill {
     background: rgba(246, 80, 5, 0.2);
     /* Orange accent */
     color: white;
     border-radius: 50px;
     border: 1px solid rgba(255, 255, 255, 0.3);
     font-size: 1.1rem;
     transition: all 0.3s ease;
 }

 .mission-pill:hover {
     background: rgba(246, 80, 5, 0.3);
     transform: scale(1.05);
 }

 .pulse-animation {
     animation: pulse 2s infinite;
 }

 @keyframes pulse {
     0% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.1);
     }

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

   .offer-section {
       background-color: #f8f9fa;
       position: relative;
       overflow: hidden;
   }

   .product-card {
       background: white;
       border-radius: 15px;
       padding: 25px;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
       transition: all 0.4s ease;
       position: relative;
       overflow: hidden;
       border: 1px solid rgba(60, 184, 21, 0.1);
       text-align: center;
   }

   .product-card:hover {
       transform: translateY(-10px);
       box-shadow: 0 15px 30px rgba(60, 184, 21, 0.15);
       border-color: rgba(60, 184, 21, 0.3);
   }

   .product-icon {
       width: 80px;
       height: 80px;
       background: linear-gradient(135deg, #3CB815, #4CD964);
       color: white;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto 20px;
       font-size: 30px;
       transition: all 0.3s ease;
   }

   .product-card:hover .product-icon {
       transform: rotate(15deg) scale(1.1);
   }

   .product-list {
       list-style: none;
       padding: 0;
       text-align: left;
   }

   .product-list li {
       padding: 8px 0;
       position: relative;
       padding-left: 25px;
   }

   .product-list li:before {
       content: "\f00c";
       font-family: "Font Awesome 5 Free";
       font-weight: 900;
       color: #3CB815;
       position: absolute;
       left: 0;
   }

   .product-gif {
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       height: 5px;
       background-size: cover;
       background-position: center;
       transition: all 0.5s ease;
       opacity: 0.7;
   }

   .product-card:hover .product-gif {
       height: 100%;
       opacity: 0.1;
   }

   @media (max-width: 768px) {
       .product-card {
           padding: 20px;
       }
   }
        .features-section {
            background-color: #f8f9fa;
            position: relative;
        }
    
        .certification-card {
            background: white;
            border-radius: 15px;
            padding: 30px 20px;
            text-align: center;
            height: 100%;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.4s ease;
            border-top: 4px solid #3CB815;
        }
    
        .certification-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(60, 184, 21, 0.1);
        }
    
        .cert-icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            padding: 15px;
        }
    
        .cert-icon img {
            max-height: 100%;
            max-width: 100%;
            filter: brightness(0) invert(1);
        }
    
        .cert-badge {
            display: inline-block;
            background: rgba(60, 184, 21, 0.1);
            color: #3CB815;
            padding: 5px 15px;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-top: 15px;
        }
    
        .bg-success {
            background-color: #3CB815 !important;
        }
    
        .bg-warning {
            background-color: #F65005 !important;
        }
    
        .bg-danger {
            background-color: #6f42c1 !important;
        }
    
        .bg-primary {
            background-color: #0d6efd !important;
        }

                 .promise-section {
                     background-color: #f8f9fa;
                     position: relative;
                     overflow: hidden;
                 }
        
                 .promise-columns {
                     display: flex;
                     justify-content: center;
                     flex-wrap: wrap;
                     gap: 30px;
                     margin-bottom: 50px;
                 }
        
                 .promise-column {
                     flex: 1;
                     min-width: 300px;
                     max-width: 350px;
                     background: white;
                     border-radius: 15px;
                     overflow: hidden;
                     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
                     transition: all 0.4s ease;
                     position: relative;
                     z-index: 1;
                 }
        
                 .promise-column:hover {
                     transform: translateY(-10px);
                     box-shadow: 0 15px 40px rgba(60, 184, 21, 0.15);
                 }
        
                 .promise-header {
                     padding: 30px;
                     text-align: center;
                     position: relative;
                 }
        
                 .promise-header i {
                     font-size: 2.5rem;
                     margin-bottom: 15px;
                     display: inline-block;
                     transition: all 0.3s ease;
                 }
        
                 .promise-column:hover .promise-header i {
                     transform: scale(1.2) rotate(10deg);
                 }
        
                 .farmer-col .promise-header {
                     background: linear-gradient(135deg, rgba(60, 184, 21, 0.1), rgba(60, 184, 21, 0.2));
                     color: #3CB815;
                 }
        
                 .client-col .promise-header {
                     background: linear-gradient(135deg, rgba(246, 80, 5, 0.1), rgba(246, 80, 5, 0.2));
                     color: #F65005;
                 }
        
                 .industry-col .promise-header {
                     background: linear-gradient(135deg, rgba(13, 110, 253, 0.1), rgba(13, 110, 253, 0.2));
                     color: #0d6efd;
                 }
        
                 .promise-body {
                     padding: 30px;
                     position: relative;
                 }
        
                 .promise-ornament {
                     position: absolute;
                     bottom: 20px;
                     right: 20px;
                     width: 50px;
                     height: 50px;
                     opacity: 0.1;
                     background-size: contain;
                     background-repeat: no-repeat;
                     transition: all 0.3s ease;
                 }
        
                 .farmer-col .promise-ornament {
                     background-image: url('img/wheat-icon.svg');
                 }
        
                 .client-col .promise-ornament {
                     background-image: url('img/handshake-icon.svg');
                 }
        
                 .industry-col .promise-ornament {
                     background-image: url('img/globe-icon.svg');
                 }
        
                 .promise-column:hover .promise-ornament {
                     transform: scale(1.5);
                     opacity: 0.2;
                 }
        
                 .grow-together-box {
                     background: linear-gradient(135deg, #3CB815, #2e7d32);
                     padding: 40px;
                     border-radius: 15px;
                     color: white;
                     max-width: 800px;
                     margin: 0 auto;
                     position: relative;
                     overflow: hidden;
                 }
        
                 .grow-together-box::before {
                     content: '';
                     position: absolute;
                     top: -50px;
                     right: -50px;
                     width: 150px;
                     height: 150px;
                     background: rgba(255, 255, 255, 0.1);
                     border-radius: 50%;
                 }
        
                 .grow-together-box::after {
                     content: '';
                     position: absolute;
                     bottom: -30px;
                     left: -30px;
                     width: 100px;
                     height: 100px;
                     background: rgba(255, 255, 255, 0.1);
                     border-radius: 50%;
                 }
        
                 @media (max-width: 768px) {
                     .promise-columns {
                         flex-direction: column;
                         align-items: center;
                     }
        
                     .promise-column {
                         max-width: 100%;
                     }
        
                     .grow-together-box {
                         padding: 30px 20px;
                     }
                 }


  /* Base Styles */
  .value-orbs-container {
      margin-top: -50px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      padding: 20px 0;
  }

  .value-orb {
      flex: 1 1 220px;
      /* Flexible width with minimum 220px */
      max-width: 280px;
      background: white;
      border-radius: 60% 40% 40% 60% / 50% 50% 50% 50%;
      padding: 35px;
      text-align: center;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
      border: 2px solid var(--light);
      margin-bottom: 15px;
  }

  .value-orb:hover {
      transform: translateY(-8px);
      border-color: var(--primary);
      box-shadow: 0 10px 25px rgba(60, 184, 21, 0.1);
  }

  .orb-icon {
      font-size: 2.2rem;
      margin-bottom: 12px;
  }

  .orb-content h3 {
      color: var(--dark);
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 8px;
  }

  .orb-content p {
      color: #555;
      font-size: 0.9rem;
      margin-bottom: 0;
  }

  /* Tablet Responsive (768px - 991px) */
  @media (max-width: 991px) {
      .value-orb {
          flex: 1 1 200px;
          padding: 20px;
      }

      .orb-icon {
          font-size: 2rem;
      }

      .orb-content h3 {
          font-size: 1rem;
      }
  }

  /* Mobile Responsive (up to 767px) */
  @media (max-width: 767px) {
      .value-orbs-container {
          flex-direction: column;
          align-items: center;
          gap: 15px;
      }

      .value-orb {
          width: 100%;
          max-width: 300px;
          flex: none;
          border-radius: 50% 20% / 10% 40%;
          padding: 25px 20px;
      }

      .orb-content h3 {
          font-size: 1.1rem;
      }

      .orb-content p {
          font-size: 0.95rem;
      }
  }

  /* Small Mobile (up to 575px) */
  @media (max-width: 575px) {
      .value-orb {
          padding: 20px 15px;
      }

      .orb-icon {
          font-size: 1.8rem;
      }
  }