:root{
    --secondary: #ecc47d;

   }
   .about-hero {
      width: 100vw;
      margin-left: calc(-50vw + 50%);
      margin-right: calc(-50vw + 50%);
      min-height: 220px;
        background: linear-gradient(135deg,#fffdeb 0% ,#fdf1ff 100%);
       display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 40px 24px;
      position: relative;
      overflow: hidden;
      text-align: center;
    }

    .about-hero-sub {
      font-size: 15px;
      color: var(--clr-primary-dark);
      opacity: 0.8;
      max-width: 480px;
      position: relative;
      z-index: 1;
    }

    .about-section-title {
      font-size: 20px;
      font-weight: 800;
      color: var(--clr-primary-darkest);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .about-section-title::before {
      content: '';
      display: block;
      width: 4px;
      height: 22px;
      border-radius: 4px;
      background: var(--grad-btn);
      flex-shrink: 0;
    }

    .about-mission {
      margin-top: 40px;
    
      border: 1.5px solid var(  --secondary);
      border-radius: 20px;
      padding: 32px 36px;
      display: flex;
      gap: 24px;
      align-items: flex-start;
    }
    .about-mission-icon {
      width: 56px; height: 56px; border-radius: 14px;
      background: var(--clr-primary-lighter);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .about-mission-icon svg { width: 28px; height: 28px; color: white; }
    .about-mission-text h3 { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
    .about-mission-text p { font-size: 14px; color: var(--muted); line-height: 1.75; }

    .about-team { margin-top: 40px; }
    .about-team-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .about-team-card {
      background: white;
      border: 1.5px solid var(--clr-primary-lighter);
      border-radius: 20px;
      padding: 28px 20px;
      text-align: center;
      box-shadow: 0 2px 10px rgba(78,0,92,0.06);
      transition: transform 0.2s;
    }
    .about-team-card:hover { transform: translateY(-4px); }
    .about-team-avatar {
      width: 100px; height: 100px; border-radius: 50%;
      background: #ffffff;
      margin: 0 auto 14px;
      display: flex; align-items: center; justify-content: center;
      font-size: 28px; font-weight: 900; color: white;
      box-shadow: 0 4px 14px rgba(78,0,92,0.2);
      overflow: hidden;
    }
    .about-team-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
    .about-team-name { font-size: 16px; font-weight: 800; color: var(--clr-primary-darkest); }
    .about-team-role { font-size: 12px; color: var(--muted); margin-top: 4px; }
    .about-team-badge {
      display: inline-block;
      margin-top: 10px;
      padding: 4px 14px;
      background: var(--clr-primary-lighter);
      border-radius: 20px;
      font-size: 12px; font-weight: 600; color: var(--clr-primary-dark);
    }

    .about-values { margin-top: 40px; }
    .about-values-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .about-value-item {
     
       border: 1.5px solid var(  --secondary);
      border-radius: 16px;
      padding: 22px 20px;
      text-align: center;
    }
    .about-value-emoji { font-size: 32px; margin-bottom: 10px; }
    .about-value-title { font-size: 15px; font-weight: 700; color: var(--clr-primary-darkest); margin-bottom: 6px; }
    .about-value-desc { font-size: 13px; color: var(--muted); line-height: 1.6; }
.footer {
  background: var(--clr-primary-lighter);
}
    @media (max-width: 1024px) {
      .about-values-list, .about-team-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
      .about-mission { flex-direction: column; }
    }
    @media (max-width: 480px) {
      .about-values-list, .about-team-grid { grid-template-columns: 1fr; }
      .about-team-card { width: 100%; max-width: 320px; margin: 0 auto; }
      .about-team-grid .about-team-card:last-child { grid-column: 1 !important; }
    }