* { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Segoe UI', sans-serif;
      background-color: #f4f4f4;
      color: #333;
    }

   
    section {
      max-width: 1200px;
      margin: 40px auto;
      padding: 20px;
    }

    h2 {
      text-align: center;
      color: #004080;
      margin-bottom: 30px;
    }

    .staff-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
    }

    .staff-card {
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      overflow: hidden;
      text-align: center;
      padding-bottom: 20px;
      transition: transform 0.3s ease;
    }

    .staff-card:hover {
      transform: translateY(-5px);
    }

    .staff-card img {
      width: 100%;
      height: 240px;
      object-fit: cover;
    }

    .staff-info {
      padding: 15px;
    }

    .staff-info h3 {
      color: #004080;
      margin-bottom: 5px;
    }

    .staff-info p {
      font-size: 0.95rem;
      color: #555;
      margin: 3px 0;
    }