/* Main content section */
/* .work-section {
  min-height: 100vh;
  padding-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #000;
  overflow: hidden;
} */
.work-section {
  min-height: 100vh;
  padding-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #000;
  overflow: hidden;
  z-index: 1;
} 

/* Section title */
.work-title {
  color: #ebff03;
  font-family: "Druk Text Trial", sans-serif;
  font-size: 100px;
  font-weight: 700;
  -webkit-text-stroke: 4px #ebff03;
  position: fixed; /* Changed from absolute to fixed */
  top: 50%;
  left: 50%;
  /* transform: translate(-50%, -50%); */
  z-index: 10;
  text-align: center;
  will-change: transform; /* Optimize for animations */
  pointer-events: none;
}

.stats-section {
  position: relative;
  z-index: 20;
  width: 100%;
  min-height: 100vh;
  will-change: transform;
}


  /* Image grid container */
  .image-grid {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
    opacity: 0.5;
    overflow: hidden;
    position: relative;
  }

  /* Image row */
  .image-row {
    display: flex;
    justify-content: center;
    gap: 40px;
    will-change: transform;
    position: relative;
    width: 100%;
  }

  #image-row-01, #image-row-02, #image-row-03 {
    display: flex;
    gap: 40px;
    min-width: 100%;
    justify-content: center;
  }

  /* Individual grid image */
  .grid-image {
    width: 141px;
    height: 250px;
    object-fit: cover;
  }

  /* Scroll indicator */
  .scroll-indicator-container {
    position: absolute;
    right: 59px;
    top: 292px;
  }

  .scroll-indicator {
    width: 40px;
    height: 40px;
    fill: #fff;
  }

  .border-title-dark{
    color: transparent;
    -webkit-text-stroke: 2px #000000;
  }

  /* Responsive styles */
  @media (max-width: 991px) {
    .work-title {
      font-size: 140px;
    }

    .image-grid {
      gap: 40px;
      padding: 40px 0;
    }

    .image-row {
      gap: 40px;
      /* flex-wrap: wrap; */
    }

    .grid-image {
      width: 120px;
      height: 200px;
    }
  }

  @media (max-width: 640px) {
    .work-title {
      font-size: 60px !important;
      -webkit-text-stroke: 2px #ebff03;
    }

    .image-grid {
      gap: 20px;
      padding: 20px 0;
    }

    .image-row {
      gap: 20px;
    }

    .grid-image {
      width: 100px;
      height: 160px;
    }
  }