/* About Hero Section */
    .about-hero {
      background: rgba(0,0,0,0.3);
      /* padding: 100px 8% 80px; */
      text-align: center;
      position: relative;
      overflow: hidden;
      color: #f5f5dc;

    }
    
    .about-hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(circle at center, rgba(55, 84, 38, 0.2) 0%, transparent 70%);
      z-index: -1;
    }
    
    .about-hero h1 {
      font-size: 48px;
      margin-bottom: 20px;
      background: linear-gradient(45deg, #f5f5dc, #f5f5dc);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    .about-hero p {
      font-size: 20px;
      max-width: 800px;
      margin: 0 auto 30px;
      line-height: 1.6;
      opacity: 0.9;
    }
    
    /* Mission Section */
    .mission-section {
      background: rgba(0,0,0,0.3);
      /* padding: 80px 8%; */
    }
    
    .mission-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 40px;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .mission-card {
      background: rgba(245, 245, 220, 0.05);
      background-color: #f5f5dc;
      padding: 40px 30px;
      border-radius: 15px;
      border: 1px solid rgba(245, 245, 220, 0.1);
      transition: transform 0.3s, border-color 0.3s;
    }
    
    .mission-card:hover {
      transform: translateY(-5px);
      border-color: rgba(245, 245, 220, 0.3);
    }
    
    .mission-icon {
      font-size: 40px;
      margin-bottom: 20px;
    }
    
    .mission-card h3 {
      font-size: 24px;
      margin-bottom: 15px;
      color: #375426;
    }
    
    .mission-card p {
      line-height: 1.6;
      opacity: 0.9;
      color: #375426;
    }
    
    /* Timeline Section */
    .timeline-section {
      background: rgba(0,0,0,0.3);
      /* padding: 80px 8%; */
          color: #f5f5dc;

    }
    
    .timeline-container {
      max-width: 1000px;
      margin: 0 auto;
      position: relative;
    }
    
    .timeline-container::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 2px;
      background: linear-gradient(to bottom, #375426, #f5f5dc, #375426);
      transform: translateX(-50%);
    }
    .mission-card h3 {
      font-size: 24px;
      margin-bottom: 15px;
      color: #375426;
    }
    .timeline-item {
      display: flex;
      margin-bottom: 50px;
      position: relative;
    }
    
    .timeline-item:nth-child(odd) {
      justify-content: flex-start;
    }
    
    .timeline-item:nth-child(even) {
      justify-content: flex-end;
    }
    
    .timeline-content {
      background: #f5f5dc;
      padding: 25px;
      border-radius: 10px;
      border: 1px solid rgba(245, 245, 220, 0.1);
      width: 45%;
      position: relative;
      color: #375426;
    }
    
    .timeline-item:nth-child(odd) .timeline-content {
      margin-right: auto;
      color: #375426
    }
    
    .timeline-item:nth-child(even) .timeline-content {
      margin-left: auto;
      color: #375426
    }
    
    .timeline-content::before {
      content: '';
      position: absolute;
      top: 20px;
      width: 15px;
      height: 15px;
      background: #375426;
      border: 3px solid gold;
      border-radius: 50%;
    }
    
    .timeline-item:nth-child(odd) .timeline-content::before {
      right: -37px;
      color: #375426
    }
    
    .timeline-item:nth-child(even) .timeline-content::before {
      left: -37px;
      color: #375426
    }
    
    .timeline-year {
      font-size: 18px;
      font-weight: bold;
      color: #375426;
      margin-bottom: 10px;
    }
    

    /* Team Section */
    .team-section {
      background: rgba(0,0,0,0.3);
      padding: 80px 8%;
      text-align: center;
    }
    .team-section h2{
            color: #f5f5dc;}   
    .team-section h3{
            color: #f5f5dc;}    
    .team-section p{
            color: #375426;}
    
    .team-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 30px;
      max-width: 1200px;
      margin: 50px auto 0;
    }
    
    .team-card {
      background: rgba(245, 245, 220, 0.05);
      padding: 30px;
      border-radius: 15px;
      border: 1px solid rgba(245, 245, 220, 0.1);
      transition: transform 0.3s;      
      background-color: #f5f5dc;

    }
    
    .team-card:hover {
      transform: translateY(-5px);
    }
    
    .team-avatar {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: linear-gradient(45deg, #2c5912, #355604);
      margin: 0 auto 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
      color: #f5f5dc;
    }
    
    .team-card h3 {
      font-size: 22px;
      margin-bottom: 5px;
      color: #375426
    }
    
    .team-role {
      color: #375426;
      font-weight: 600;
      margin-bottom: 15px;
    }
    
    .team-bio {
      font-size: 14px;
      line-height: 1.5;
      opacity: 0.9;
      color: #375426
    }
    
    /* Values Section */
    .values-section {
      background: rgba(0,0,0,0.3);
      padding: 80px 8%;
    }
    .values-section h2{
            color: #f5f5dc;

    }
    

    .values-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 30px;
      max-width: 1200px;
      margin: 0 auto;
      color: #f5f5dc;
    }
    
    .value-card {
      text-align: center;
      padding: 30px 20px;
    }
    
    .value-icon {
      font-size: 50px;
      margin-bottom: 20px;
      color: #375426    }
    
    .value-card h3 {
      font-size: 22px;
      margin-bottom: 15px;

    }
    
    /* Stats Section */
    .stats-section {
      background: rgba(0,0,0,0.3);
      padding: 80px 8%;
      text-align: center;
      color: #f5f5dc;

    }
    
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 40px;
      max-width: 1000px;
      margin: 0 auto; 
    }
    
    .stat-item h3 {
      font-size: 48px;
      color: #f5f5dc;      
      margin-bottom: 10px;
    }
    
    .stat-item p {
      font-size: 18px;
      opacity: 0.9;
    }
 
    /* Responsive Design */
    @media (max-width: 1024px) {
      .timeline-container::before {
        left: 30px;
      }
      
      .timeline-content {
        width: calc(100% - 80px);
        margin-left: 80px !important;
      }
      
      .timeline-content::before {
        left: -37px !important;
        right: auto !important;
      }
    }
    
    @media (max-width: 768px) {
      header {
        padding: 15px 20px;
        flex-direction: column;
        gap: 15px;
      }
      
      .about-hero {
        padding: 80px 5% 60px;
      }
      
      .about-hero h1 {
        font-size: 36px;
      }
      
      .mission-section,
      .timeline-section,
      .team-section,
      .values-section,
      .stats-section {
        padding: 60px 5%;
      }
      
    
    @media (max-width: 480px) {
      .about-hero h1 {
        font-size: 32px;
      }
      
      .about-hero p {
        font-size: 18px;
      }
      
      .mission-grid,
      .team-grid,
      .values-grid,
      .stats-grid {
        grid-template-columns: 1fr;
      }
      
      .ticker-item {
        padding: 0 15px;
        font-size: 12px;
      }
    }