/* Team Page Specific Styles */

/* Set base styles for body */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  background-color: #f7f7f7;
  color: #333;
}

/* Style for paragraph text */
p {
    margin-bottom: 16px;
    color: var(--neutral-dark-gray);
    font-size: 17.6px;
    line-height: 1.8;
}

/* Container for all team members */
.team-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  padding: 4rem;
}

/* Styles for each team member card */
.team-member {
  position: relative;
  width: 295px;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

/* Container for social media icons */
.social-icons {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 20px;
}

/* Style for each social media icon image */
.social-icon img {
  width: 36px;
  height: 36px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));
}

/* Hover effect for social media icons */
.social-icon img:hover {
  transform: scale(1.2);
  opacity: 0.8;
}

/* Header box under image for team member name */
.box {
  background-color: rgba(255, 165, 0, 0.7);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  height: 63px;
}

/* Scale effect on hover/focus of team member */
.team-member:focus,
.team-member:hover {
  transform: scale(1.05);
}

/* Image (thumbnail) of team member */
.thumb {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.3s ease;
  border-radius: 0px;
  background-color: transparent; 
  filter: drop-shadow(7px 7px 8px rgba(0,0,0,0.3));    
}

/* Hidden details section of each team member */
.member-details {
  padding: 16px;
  background-color:	#FFE0B2;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  box-shadow: 0 15px 35px var(--shadow-medium);
}

/* Show details on hover/focus */
.team-member:hover .member-details,
.team-member:focus .member-details {
  max-height: 295px;
  opacity: 1;
  box-shadow: 0 15px 35px var(--shadow-medium);
}

/* Box background and border radius changes on hover/focus */
.team-member:hover .box,
.team-member:focus .box {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: rgba(255, 165, 0);
}

/* Dim the image slightly on hover/focus */
.team-member:hover .thumb,
.team-member:focus .thumb {
  opacity: 0.8;
}

/* Team member name heading */
h4 {
  padding: 16px;
  font-size: 1.2rem;
}

/* Reset section padding to minimal */
section {
  padding: 0.1px;
}

/* Introduction section styling */
.introduction {
  padding: 32px;
  background-color: var(--shadow-light);
  border-radius: 10px; 
  margin-top: 10px;
} 

/* Styling for the IIT logo image */
.iitlogo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 350px;
}

/* Flex container for introduction content */
.intro-flex {
  display: flex; 
  align-items: center;
}