/* css/about.css */

/* PROCESS STEPS (Used in White Section) */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  counter-reset: process-counter;
}

.process-card {
  padding: 2rem;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: transform 0.3s ease;
}

.process-card:hover {
  transform: translateY(-5px);
  border-color: var(--tanics-primary-red) !important;
}

/* Watermark Number - Dark Grey for White BG */
.process-card::after {
  counter-increment: process-counter;
  content: "0" counter(process-counter);
  position: absolute;
  top: -10px;
  right: 10px;
  font-size: 5rem;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.05); /* Very subtle dark watermark */
  z-index: -1;
}

.process-card h3 {
  font-size: 1.25rem;
  border-left: 3px solid var(--tanics-primary-red);
  padding-left: 15px;
  margin-bottom: 15px;
}

/* KEY PROJECTS LIST */
.project-list-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media(min-width: 768px) {
  .project-list-grid { grid-template-columns: 1fr 1fr; }
}

.project-item {
  display: flex;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.05); /* Slight tint for dark bg */
  padding: 1.5rem;
  border-left: 1px solid #333;
}
.project-item:hover {
  border-left-color: var(--tanics-primary-red);
}
.project-icon {
  font-size: 1.5rem;
  color: var(--tanics-primary-red);
  margin-right: 1rem;
}