.about-swiper-container {
  height: 400px;
  padding: 20px 0;
  margin: 0 auto;
  overflow: hidden;
  position: relative; /* Add this */
}


.about-swiper-slide {
  height: auto;
  padding: 15px;
}

/* About Values Card */
.about-value-card {
  height: 80%;
  background: white;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid #e5e7eb;
}

.about-value-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.about-value-icon {
  width: 80px;
  height: 80px;
  background: #4682B410;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.about-value-icon i {
  font-size: 2.5rem;
  color: #4682B4;
}

/* Pagination */
.about-swiper-pagination {
  position: absolute !important;
  bottom: 10px !important; /* Adjust based on your needs */
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  display: flex !important;
  justify-content: center !important;
  z-index: 10;
}

.about-swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #4682B4 !important; /* Steel blue */
  opacity: 0.4;
  margin: 0 6px !important;
  transition: all 0.3s ease;
}

.about-swiper-pagination .swiper-pagination-bullet-active {
  opacity: 1 !important;
  transform: scale(1.3);
  background: #4682B4 !important; /* Keep steel blue for active */
}
    /* Timeline Line */
    .timeline-line {
      position: absolute;
      left: 50%;
      width: 2px;
      background: #4682B4; /* steelBlue */
      opacity: 0.2;
      height: calc(100% - 100px);
      transform: translateX(-50%);
    }

    /* Left Dot (appears to the left of the timeline) */
    .timeline-dot-left {
      width: 20px;
      height: 20px;
      border: 4px solid white;
      position: absolute;
      left: calc(98% - 1px); /* 50% - (dot width/2 + line width/2) */
      top: 25px;
      background-color: #FF6B35; /* safetyOrange */
      border-radius: 50%;
      z-index: 1;
    }

    /* Right Dot (appears to the right of the timeline) */
    .timeline-dot-right {
      width: 20px;
      height: 20px;
      border: 4px solid white;
      position: absolute;
      left: calc(1% - 13px); /* 50% + line width/2 */
      top: 25px;
      background-color: #4682B4; /* steelBlue */
      border-radius: 50%;
      z-index: 1;
    }