/* Highlight Section */
  .card-hov {
          transition: transform 700ms ease-in-out;
          
      }
  .card-hov:hover {
      background: linear-gradient(135deg, #ff1200, #ffc107);
      transform: scale(1.05);
      cursor: pointer;
      color: white;
  }



  
      /* ======================== BENEFITS SECTION ======================== */

      .benefits-section {
        position: relative;
        padding: 65px 20px;
      }
      
      .benefits-wrapper {
        display: flex;
        gap: 60px;
        max-width: 1200px;
        margin: 0 auto;
      }
      
      .benefits-left {
        flex: 0 0 40%;
        position: sticky;
        top: 20%;
        height: fit-content;
      }
      
      .benefits-left .badge {
        display: inline-block;
        background: #f5f5f5;
        padding: 6px 20px;
        border-radius: 20px;
        font-size: 0.9rem;
        margin-bottom: 20px;
      }
      
      .benefits-left h2 {
        font-size: 2rem;
        /* font-weight: 700; */
        margin-bottom: 20px;
        line-height: 1.2;
      }
      
      .benefits-left p {
        font-size: 1.1rem;
        color: #555;
        margin-bottom: 30px;
        max-width: 500px;
      }
      
      .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
      }
      
      .tag {
        background: #f5f5f5;
        padding: 10px 20px;
        border-radius: 30px;
        font-size: 0.95rem;
      }
      
      .benefits-right {
        flex: 1;
        display: flex;
        flex-direction: column;
      }
      
      .benefit-step {
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.6s ease;
        margin: 50px 0;
      }
      
      .benefit-step.active {
        opacity: 1;
        /* transform: translateY(0); */
      }
      
      /* ========================
         MEDIA QUERIES
         ======================== */
      
      @media (max-width: 992px) {
        .hero {
          padding: 80px 20px;
        }
      
        .hero h1 {
          font-size: 2.5rem;
        }
      
        .card-left,
        .card-right {
          display: none;
        }
      }
      
      @media (max-width: 576px) {
        .hero {
          padding: 60px 15px;
        }
      
        .hero h1 {
          font-size: 2rem;
        }
      
        .feature-icons span {
          display: block;
          margin: 10px 0;
        }
      
        .btn-explore,
        .btn-demo {
          display: block;
          width: 100%;
          margin: 10px auto;
        }
      }
      @media (max-width: 768px) {
        .benefits-wrapper {
          flex-direction: column;
          gap: 40px;
        }
      
        .benefits-left {
          position: static;
          flex: 1 1 100%;
        }
      
        .benefits-right {
          flex: 1 1 100%;
        }
      
        .benefit-step {
          opacity: 1 !important;
          transform: translateY(0) !important;
          margin: 40px 0;
        }
      }




/* --- FIX hero white CTA visibility without changing HTML --- */
.hero-section {
  position: relative !important;
  overflow: visible !important; /* allow inner divs to escape */
  z-index: 2;
  height: 300px !important;
}

/* Fix clipping caused by global .container.position-relative */
.hero-section .container.position-relative {
  overflow: visible !important;
}

/* Make sure the white CTA box stays on top of everything */
.hero-section .rounded-4.px-4.pt-3.pb-4 {
  position: relative !important;
  z-index: 20 !important;
  margin-bottom: -100px !important; /* prevent clipping below hero */
}

/* Ensure the button itself isn’t hidden */
.hero-section .btn {
  position: relative !important;
  z-index: 25 !important;
}

/* Default (large screens / desktops) */
.hero-section .floating-btn {
  margin-left: -32px;
  margin-bottom: -100px !important;
}

/* Small Laptops (1280px and below) */
@media (max-width: 1280px) {
  .hero-section .floating-btn {
    margin-left: -23px !important;
    margin-bottom: -110px !important;
  }
}

/* Tablets (768px–1024px) */
@media (max-width: 1024px) {
  .hero-section .floating-btn {
    margin-left: -30px;
    margin-top: -17px !important;
  }
}

@media (max-width: 992px) {
  .hero-section .floating-btn {
    margin-left: -15px;
    margin-top: -20px !important;
  }
}

/* Mobile (below 768px) */
@media (max-width: 768px) {
  .hero-section .floating-btn {
    margin-left: -14px;
    margin-top: -10px !important;          /* FIX: No negative margin on mobile */
    width: 100%;
  }
  .hero-section .floating-btn a {
    display: inline-block;
  }
}

@media (max-width: 767px) {
  .hero-section .floating-btn {
    margin-left: -12px;
    margin-top: -24px !important;          /* FIX: No negative margin on mobile */
    width: 100%;
  }
  .hero-section .floating-btn a {
    display: inline-block;
  }
}

@media (max-width: 575px) {
  .hero-section .floating-btn {
    margin-left: -30px;
    margin-top: -14px !important;          /* FIX: No negative margin on mobile */
    width: 100%;
  }
  .hero-section .floating-btn a {
    display: inline-block;
  }
}

@media (max-width: 425px) {
  .hero-section .floating-btn {
    margin-left: -15px;
    margin-top: -18px !important;          /* FIX: No negative margin on mobile */
    width: 100%;
  }
  .hero-section .floating-btn a {
    display: inline-block;
  }
}

@media (max-width: 376px) {
    .hero-section .floating-btn {
        margin-left: 0px !important;
        margin-top: 58px !important;
        width: 100%;
    }

  .hero-section .floating-btn a {
    display: inline-block;
  }
}