/* 1) Section container */
#whoiam {
    display: none;               /* JS will show */
    padding: 6rem 1rem 4rem;     /* generous top/bottom padding */
    background: #fdf2f4;         /* very light rose tint */
  }
  
  /* 2) Heading style */
  #whoiam h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 1rem;
    color:rgb(83, 103, 77);;              /* darker rose */
    font-weight: 600;
    letter-spacing: 0.5px;
  }
  
  /* 3) Divider under heading */
  #whoiam .divider {
    width: 6rem;
    height: 4px;
    background: #f43f5e;
    margin: 0 auto 2.5rem;
    border-radius: 2px;
  }

  @media (min-width: 1200px) {
    #whoiam .profile-image { max-width: 580px; }
  }
  /* 4) Profile image card */
  #whoiam .profile-image {
    background: white;
    padding: 0.5rem;
    border-radius: 1rem;
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
    max-width: 500px;
    margin: 0 auto 2rem;
  }


  #whoiam .rounded-image {
    width: 100%;
    border-radius: 1rem;
    height: auto;
  }
  
  /* 5) Vision & guidance content boxes */
  #whoiam .vision-statement .content-box,
  #whoiam .parent-guidance .content-box {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    margin-bottom: 3rem;
    line-height: 1.7;
    color: #333;
  }
  #whoiam .vision-statement p {
    margin-bottom: 1rem;
  }
  
  /* 6) Approach cards */
  #whoiam .cards {
    gap: 1.5rem;
  }
  #whoiam .card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 6px 12px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
  }
  #whoiam .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
  }
  #whoiam .card h3 {
    margin: 1rem 0 0.5rem;
    font-size: 1.25rem;
    color: #7b7263;
  }
  #whoiam .icon {
    font-size: 2rem;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    background: #fecdd3;
  }
  
  /* 7) CTA area */
  #whoiam .cta {
    padding: 3rem 1rem 1rem;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
    text-align: center;
  }
  #whoiam .cta h2 {
    color: #3b3b33;
    margin-bottom: 0.5rem;
  }
  #whoiam .cta p {
    margin-bottom: 1.5rem;
    color: #555;
  }
  #whoiam .cta-button {
    background: #6d6d6b;
    color: white;
    padding: 0.75rem 2rem;
    font-size: 1.1rem;
    border-radius: 9999px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  #whoiam .cta-button:hover {
    background: #3b3b33;
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    transform: translateY(-2px);
  }
  

  /* where your desktop flex-layout starts */
@media (min-width: 768px) {
  #whoiam .row {
    display: flex;
    align-items: flex-start;
    /* ↓ tighten the space between image & text */
    column-gap: 1rem;           /* was 2rem */
  }
}
  


  /* center & size the FA icons */
#whoiam .icon {
    width: 4rem;
    height: 4rem;
    background: #fecdd3;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  #whoiam .icon i {
    color: #b91c1c;      /* dark rose */
    font-size: 1.75rem;  /* adjust as needed */
  }
  
  #whoiam p {
    font-size: 18px;


  }