/* ==========================================================================
   PT Noto Water Envirotech - About Page Stylesheet (css/about.css)
   ========================================================================== */

/* Timeline styling */
.timeline-container {
  position: relative;
  padding-left: 2.5rem;
}

.timeline-container::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15px;
  width: 3px;
  background: linear-gradient(180deg, #12AABF 0%, #2B6F8B 50%, #092534 100%);
  border-radius: 2px;
}

.timeline-item {
  position: relative;
  margin-bottom: 2.5rem;
}

.timeline-dot {
  position: absolute;
  left: -2.5rem;
  top: 0.25rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 4px solid #12AABF;
  box-shadow: 0 0 10px rgba(18, 170, 191, 0.4);
}

/* Brand Value Pillars */
.pillar-card {
  position: relative;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(220, 237, 250, 0.9);
}

.pillar-card:hover {
  transform: translateY(-8px);
  border-color: #12AABF;
  box-shadow: 0 20px 35px -10px rgba(9, 37, 52, 0.12);
}

.pillar-card i {
  transition: transform 0.3s ease;
}

.pillar-card:hover i {
  transform: scale(1.1);
}

/* Stat Box Grid */
.stat-box {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  padding: 1.75rem;
  text-align: center;
  transition: all 0.3s ease;
}

.stat-box:hover {
  border-color: #12AABF;
  box-shadow: 0 10px 25px -5px rgba(18, 170, 191, 0.15);
}