/* Smooth fade-in animation for the page */
body {
  animation: fadeIn 1.2s ease-in-out;
  background: linear-gradient(to bottom, #ffffff, #e0f7fa); /* Gradient from white to blue */
  background-size: cover; /* Ensures the gradient covers the entire viewport */
  background-attachment: fixed; /* Prevents the gradient from scrolling */
  margin: 0;
  height: 100vh; /* Ensures the gradient spans the full viewport height */
}

/* Our Team Header */
.team-container {
  text-align: center;
  padding: 4rem 2rem;
  margin-top: 2rem;
  margin-bottom: 0;
  margin-inline: auto;
  max-width: 900px;
  animation: fadeInUp 1.5s ease-in-out;
}

.team-container h1 {
  font-size: 2.5rem;
  color: #005f73;
  margin-bottom: 1rem;
}

.team-container p {
  font-size: 1.2rem;
  color: #333;
  line-height: 1.8;
}

.team-role {
  font-size: 1.4rem; /* Increase font size for the role */
  color: #555; /* Slightly darker gray for better visibility */
  margin: 0.5rem 0; /* Add more spacing above and below the role */
  font-weight: 600; /* Make the role text bold */
}

/* Member Container */
.member-container {
  display: flex; /* Arrange team members in a row */
  justify-content: center; /* Center the row horizontally */
  gap: 4rem; /* Increase spacing between team members */
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  padding: 3rem; /* Add padding around the container */
  margin: 0 auto; /* Move the container higher */
  max-width: 2000px; /* Increase the width of the container */
}

/* Team Member Section */
.team-member {
  background-color: #f9f9f9; /* Light background for cards */
  padding: 3rem; /* Increase padding for larger cards */
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  max-width: 400px; /* Increase the width of each card */
  flex: 1 1 400px; /* Allow flexibility for responsive design */
  text-align: center; /* Center-align content inside the card */
  margin-bottom: 3rem; /* Add more spacing between rows */
}

.team-member:hover {
  transform: translateY(-5px); /* Slight lift on hover */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

.team-photo {
  width: 180px; /* Increase photo size */
  height: 180px;
  object-fit: cover;
  border-radius: 50%; /* Make the photo circular */
  margin-bottom: 1.5rem; /* Add more spacing below the photo */
}

.team-info {
  text-align: center; /* Center-align the text */
}

.team-name {
  font-size: 2rem; /* Increase font size for the name */
  color: #005f73;
  margin: 0;
}

.team-bio {
  margin-top: 3rem; /* Add space between the role and the description */
  font-size: 1.2rem; /* Slightly larger font size for the bio */
  color: #333; /* Darker color for better readability */
  line-height: 1.6; /* Improve line spacing */
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}