.main-container {
      max-width: 1200px;
      margin: 0 auto;
  }



  /* --- Responsive Grid for Profiles --- */
  .profile-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 25px;
  }

  /* --- Profile Card Styling --- */
  .profile-card {
      display: flex;
      align-items: center;
      background-color: #ffffff;
      border-radius: 12px;
      box-shadow: 0 5px 20px rgba(44, 62, 80, 0.08);
      padding: 20px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .profile-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 8px 25px rgba(44, 62, 80, 0.12);
  }

  /* --- Avatar Styling --- */
  .profile-avatar {
      flex-shrink: 0;
      width: 65px;
      height: 65px;
      border-radius: 50%;
      margin-right: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
  }

  .profile-avatar svg {
      width: 32px;
      height: 32px;
      fill: currentColor;
  }

  /* Avatar Background Colors for role-based grouping */
  .bg-blue {
      background-color: #3498db;
  }

  /* Leadership */
  .bg-green {
      background-color: #2ecc71;
  }

  /* Sports */
  .bg-purple {
      background-color: #9b59b6;
  }

  /* Dharma House */
  .bg-orange {
      background-color: #e67e22;
  }

  /* Karma House */
  .bg-teal {
      background-color: #1abc9c;
  }

  /* Satya House */
  .bg-red {
      background-color: #e74c3c;
  }

  /* Shakti House */
  .bg-slate {
      background-color: #34495e;
  }

  /* Special Roles */

  /* --- Info Styling --- */
  .profile-info {
      flex-grow: 1;
  }

  .profile-name {
      font-size: 1.2em;
      font-weight: 600;
      color: #2c3e50;
      margin: 0;
  }

  .profile-position {
      font-size: 0.9em;
      color: #7f8c8d;
      margin: 0;
  }

  /* --- Responsive Adjustments --- */
  @media (max-width: 768px) {
      body {
          padding: 15px;
      }

      header h1 {
          font-size: 2em;
      }
  }



  /* --- Responsive Grid for Cards --- */
  .prefect-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
      gap: 25px;
  }

  /* --- Card Styling --- */
  .prefect-card {
      display: flex;
      background-color: #ffffff;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
      overflow: hidden;
      /* Important for the split design */
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .prefect-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  }

  /* --- Left Side: Info --- */
  .card-info {
      padding: 25px;
      flex-grow: 1;
  }

  .student-name {
      font-size: 1.3em;
      font-weight: 600;
      color: #1e293b;
      margin-bottom: 8px;
  }

  .position-tag {
      font-size: 0.85em;
      font-weight: 500;
  }

  .position-tag.girl {
      color: #c2185b;
  }

  .position-tag.boy {
      color: #1976d2;
  }

  /* --- Right Side: Class --- */
  .card-class {
      flex-shrink: 0;
      width: 100px;
      background-color: #e0e7ff;
      /* Light indigo background */
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .class-name {
      font-size: 1.8em;
      font-weight: 700;
      color: #4338ca;
      /* Dark indigo text */
  }

  /* --- Responsive Adjustments --- */
  @media (max-width: 480px) {
      .prefect-grid {
          grid-template-columns: 1fr;
          /* Single column on small screens */
      }

      .prefect-card {
          flex-direction: column;
          /* Stack the sections vertically */
      }

      .card-class {
          width: 100%;
          padding: 15px;
          order: -1;
          /* Move the class to the top */
      }

      .class-name {
          font-size: 1.4em;
      }

      .card-info {
          text-align: center;
      }
  }


  .council-photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .council-photo-wrapper {
      width: 84px;
      /* adjust */
      height: 84px;
      overflow: hidden;
      border-radius: 50%;
      /* optional: circle */
  }