/* Page-specific styles for about.html */
/* Add about page custom styles here */

.about-hero {
  padding-top: 180px;
  padding-bottom: 100px;
  background: linear-gradient(180deg, #f4f8ff 0%, #ffffff 100%);
}

.about-hero .hero-badge {
  background: rgba(14, 90, 196, 0.08);
  color: var(--primary);
}

.about-hero .hero-content h1 {
  max-width: 720px;
}

.about .about-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
}

.about .about-image img {
  width: 100%;
  min-height: 520px;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 35px 80px rgba(15, 76, 129, 0.12);
}

.about .about-content {
  display: grid;
  gap: 24px;
}

.about .feature-box {
  gap: 20px;
  padding: 30px;
}

.about .feature-box i {
  width: 70px;
  height: 70px;
  font-size: 28px;
}

.about .feature-box:hover {
  transform: translateY(-10px);
}

.process-card {
  min-height: 320px;
}