.marquee-container {
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .marquee-track {
    display: flex;
    gap: 10px;
    /* reduces space between cards */
    animation: scroll 25s linear infinite;
  }

  .marquee-track .col-md-2 {
    flex: 0 0 auto;
    /* prevents shrinking */
    margin-right: 0;
    /* remove extra margin */
  }

  @keyframes scroll {
    0% {
      transform: translateX(0%);
    }

    100% {
      transform: translateX(-50%);
      /* adjust for seamless scroll */
    }
  }

  .hover-zoom {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .hover-zoom:hover {
    transform: scale(1.05);
    /* slightly enlarge */
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
    /* optional: enhance shadow */
  }

  .steps {
    display: flex;
    flex-direction: column;
    /* column-wise layout */
    align-items: center;
    gap: 2rem;
    /* space between steps */
  }

  .step-img {
    width: auto;
    height: 100px;
    /* keeps height fixed */
    max-width: 100%;
    object-fit: contain;
    /* maintain aspect ratio */
  }

  .step-img {
    width: auto;
    height: 100px;
    max-width: 100%;
    object-fit: contain;
    animation: float 3s ease-in-out infinite;
    /* continuous float */
  }

  @keyframes float {
    0% {
      transform: translateY(0px);
    }

    50% {
      transform: translateY(-10px);
      /* move up 10px */
    }

    100% {
      transform: translateY(0px);
    }
  }

  .hero-section {
    padding: 80px 0;
    background-color: #f8f9fa;
    /* light background */
  }

  .hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    /* wraps on smaller screens */
    gap: 2rem;
  }

  .hero-text {
    flex: 1 1 400px;
    /* grows, shrinks, minimum width */
    max-width: 600px;
  }

  .hero-text h1 {
    font-size: 2.5rem;
    line-height: 1.2;
  }

  .hero-text .highlight {
    color: #007bff;
    /* highlight color */
  }

  .hero-text .blue {
    color: #0d6efd;
  }

  .hero-buttons {
    margin-top: 20px;
  }

  .hero-image {
    flex: 1 1 400px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hero-image video {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 10px;
  }