.results-section {
      background-color: black;
      color: #ffffff;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 4rem 1rem;
      text-align: center;
      overflow: hidden; /* Hide overflowing content during scroll */
    }

    .results-header {
      max-width: 56rem;
      margin-bottom: 3rem;
    }

    .results-title {
      font-size: 3rem;
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 1rem;
    }

    .results-description {
      font-size: 1.125rem;
      color: #a0a0a0;
      margin-bottom: 2rem;
    }

    .results-cards-wrapper { /* New wrapper for scrolling content */
      width: 100%;
      max-width: 72rem;
      overflow: hidden; /* Hide scrollbar */
      position: relative;
      /* Added inset box-shadow for left and right sides */
      box-shadow: inset 50px 0 30px -20px black, /* Left shadow */
                  inset -50px 0 30px -20px black; /* Right shadow */
    }

    .results-cards-container {
      display: flex; /* Changed to flex for horizontal layout */
      white-space: nowrap; /* Keep items in a single line */
      gap: 2rem; /* gap-8 */
      animation: scroll-cards 60s linear infinite; /* Slower animation */
      padding-bottom: 1rem; /* Add some padding for visual separation */
    }

    .results-cards-container:hover {
      animation-play-state: paused; /* Pause on hover */
    }

    .result-card {
      background-color: #1a1a1a;
      border-radius: 0.75rem;
      overflow: hidden;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      flex-shrink: 0; /* Prevent cards from shrinking */
      width: 300px; /* Fixed width for cards, adjust as needed */
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .card-image-wrapper {
      position: relative;
      width: 100%;
      padding-top: 56.25%;
      overflow: hidden;
    }

    .card-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .card-content {
      padding: 1.5rem;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .card-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: #ffffff;
      margin-bottom: 0.5rem;
    }

    .card-tag {
      display: inline-block;
      background-color: #007bff;
      color: #ffffff;
      font-size: 0.75rem;
      font-weight: 700;
      padding: 0.25rem 0.5rem;
      border-radius: 0.25rem;
      margin-left: 0.5rem;
    }

    .card-description {
      font-size: 0.875rem;
      color: #a0a0a0;
      line-height: 1.5;
      margin-bottom: 1rem;
    }

    .card-stats {
      display: flex;
      justify-content: space-between;
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .card-stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 1rem;
      color: #ffffff;
      font-weight: 600;
    }

    .card-stat-label {
      font-size: 0.75rem;
      color: #a0a0a0;
      margin-top: 0.25rem;
    }

    /* Keyframes for infinite scroll */
    @keyframes scroll-cards {
      0% {
        transform: translateX(0%);
      }
      100% {
        transform: translateX(calc(-50% - 1rem)); /* Adjust for half the content + gap */
      }
    }

    /* Responsive Adjustments for Results Section */
    @media (min-width: 1024px) {
      /* No specific grid changes needed here as it's now flex for scroll */
    }

    @media (max-width: 768px) {
      .results-title {
        font-size: 2.5rem;
      }

      .results-description {
        font-size: 1rem;
      }

      /* No specific grid changes needed here as it's now flex for scroll */
      .result-card {
        width: 280px; /* Adjust card width for smaller screens */
      }
    }

    @media (max-width: 480px) {
      .results-title {
        font-size: 2rem;
      }

      .results-description {
        font-size: 0.875rem;
      }

      .card-content {
        padding: 1rem;
      }

      .card-title {
        font-size: 1rem;
      }

      .card-description {
        font-size: 0.75rem;
      }

      .card-stat-item {
        font-size: 0.875rem;
      }

      .card-stat-label {
        font-size: 0.625rem;
      }

      .result-card {
        width: 250px; /* Further adjust card width for very small screens */
      }
    }
    
.fade-in-element{
opacity:0;
transform:translateY(20px);
transition: opacity 0.8s ease-out,transform 0.8s ease-out;
}
.fade-in-element.is-visible{
opacity: 1;
transform: translateY(0);
}