/* Main resets */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: sans-serif; line-height:1.6; color:#333; background:#f9f9f9; }

/* Header */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:2rem 2rem;
  border-bottom:1px solid #e0e0e0;
  position: sticky;
  top:0;
  z-index: 1000;
  background: linear-gradient(
    135deg,
    #e6e6e6,
    #ffffff,
    #d0d0d0,
    #fafafa,
    #bfbfbf
  );
  border-bottom: 1px solid #bbb;
  /* subtle outer glow */
  box-shadow:           0 0 20px rgba(210, 210, 210, 0.6),              /* outer glow */
    inset 0 4px 8px rgba(255, 255, 255, 0.8),       /* strong top gloss */
    inset 0 -2px 4px rgba(150, 150, 150, 0.15);     /* subtle bottom shadow */
  border-bottom: border-bottom: 1px solid #aaa;
}


.logo { font-size:1.5rem; font-weight:bold;}

.logo a {
  text-decoration: none;
  color: inherit; /* optional: inherit color from parent */
}

.main-nav a {
  margin-left:1.5rem; text-decoration:none; color:#333; font-weight:500; 
}
.nav-toggle { display: none; }


/* About section */
.about { background:#fff; padding:2rem 8rem; font-size: 1.1rem; text-align:center; line-height: 2rem; }

/* Main content container */
.container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* Team heading */

/* Team grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2rem;
}

/* Individual team cards */
.team-card {
  background: #fff;
  text-align: center;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  transition: box-shadow 0.3s ease;
}
.team-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.team-card img {
  width: 100%;
  height: auto;
  border-radius: 100px; /* circular */
  margin-bottom: 1rem;
}
.team-card h3 {
  margin-bottom: 0.5rem;
}
.team-card p {
  color: #666;
  font-size: 0.95rem;
  padding: 0.5rem 0rem;
}


/* Footer */
.site-footer {
  padding:1rem; background:#fff; text-align:center; font-size:0.9rem;
  border-top:1px solid #e0e0e0;
}



/* Responsive nav toggle for small screens */
@media (max-width: 768px) {
  .main-nav { display:none; flex-direction:column; }
  .nav-toggle { display:block; background:none; border:none; font-size:1.5rem; }
}