/******************************
 * Team-specific styles
 ******************************/
#team-content {
  max-width: 960px !important; /* Changed to max-width for responsiveness; override inline */
  height: auto;
  margin: 0 auto !important; /* Nullify inline negative margins */
  padding: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1 !important; /* Lower z-index for content */
}

.page-title {
  margin-top: 0;
  margin-bottom: 60px !important; /* Reduced to ~3 lines for distance to scrolling part; override inline */
  font-size: 1.2rem;
  font-weight: 200;
  letter-spacing: 0.5em;
  text-align: center;
  color: var(--current-text) !important;
  opacity: 1;
  position: fixed !important; /* Make title fixed to prevent moving; override inline relative */
  top: 80px !important; /* Adjust for desktop; override inline */
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important; /* Higher z-index for title to stay on top */
  display: inline-block;
  background: transparent !important;
  padding: 0 !important;
}

.page-title::after {
  content: '';
  position: absolute;
  bottom: -7.5px;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: linear-gradient(to right, transparent, var(--glow-color), transparent);
  filter: blur(2.25px);
  animation: flare-flicker 0.5s infinite ease-in-out;
}

.team-container {
  display: flex;
  justify-content: space-around;
  gap: 32px;
  width: 100%;
  margin-bottom: 48px;
  flex-wrap: nowrap; /* Changed to nowrap to keep all team members next to each other in a single row on desktop */
}

.team-member {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  text-align: center;
  transition: transform 0.3s ease, filter 0.3s ease;
  flex: 1 1 240px; /* Flexible basis to prevent overflow */
  max-width: 240px;
  margin-bottom: 32px;
}

.team-member:hover {
  transform: translateY(-10px);
  filter: brightness(1.2);
}

.photo-container {
  position: relative;
  width: 128px;
  height: 128px;
  margin: 0 auto 12px;
}

.photo-container img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--white-glow);
}

.photo-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  box-shadow: 0 0 10px #000000, 0 0 20px #000000, 0 0 30px #000000; /* Changed to black for black glow on desktop */
  pointer-events: none;
  animation: flame-glow-black 2s infinite ease-in-out; /* Applied uniform animation (2s duration) to all on desktop */
}

@keyframes flame-glow {
  0% { box-shadow: 0 0 10px #FFFFFF, 0 0 20px #FFFFFF, 0 0 30px #FFFFFF; opacity: 0.7; }
  50% { box-shadow: 0 0 10px #FFFFFF, 0 0 20px #FFFFFF, 0 0 30px #FFFFFF; opacity: 1; }
  100% { box-shadow: 0 0 10px #FFFFFF, 0 0 20px #FFFFFF, 0 0 30px #FFFFFF; opacity: 0.7; }
}

@keyframes flame-glow-black {
  0% { box-shadow: 0 0 10px #000000, 0 0 20px #000000, 0 0 30px #000000; opacity: 0.7; }
  50% { box-shadow: 0 0 10px #000000, 0 0 20px #000000, 0 0 30px #000000; opacity: 1; }
  100% { box-shadow: 0 0 10px #000000, 0 0 20px #000000, 0 0 30px #000000; opacity: 0.7; }
}

.team-member h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2em;
  font-weight: 300;
  margin: 8px 0 4px;
  color: var(--white-glow);
}

.team-member .role {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88em;
  font-weight: 300;
  color: var(--white-glow);
  margin-bottom: 8px;
  text-align: center;
}

.team-member p {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72em;
  color: var(--text-color);
  line-height: 1.4;
  text-align: justify;
}

.description {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  max-height: 200px; /* Increased max-height for better visibility of full description */
  overflow-y: auto; /* Make description scrollable */
  padding-right: 10px; /* Add padding for scrollbar */
  -ms-overflow-style: none; /* Hide scrollbar IE and Edge */
  scrollbar-width: none; /* Hide scrollbar Firefox */
}

.description::-webkit-scrollbar {
  display: none; /* Hide scrollbar Chrome, Safari, Opera */
}

.read-more {
  color: var(--secondary-glow);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.72em;
  margin-left: 4px;
  font-family: 'Montserrat', sans-serif;
}

.read-more:hover {
  color: var(--white-glow);
}

.full.show {
  display: block !important; /* Ensure full is shown; override inline none */
  animation: fadeIn 0.3s ease;
}

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

/* Mobile */
@media (max-width: 600px) {
  #team-content { 
    width: 100% !important; 
    padding: 0 !important; 
    margin-top: 120px !important; /* Push down below fixed title; override inline */ 
  }
  
  .team-container { 
    flex-direction: column; 
    gap: 24px; 
    margin-bottom: 32px; 
    align-items: center !important; /* Center align team members on mobile */ 
    width: 100% !important;
  }
  
  .team-member { 
    max-width: 90% !important; /* Narrower to allow side margins */
    margin-bottom: 24px; 
    margin-left: auto; 
    margin-right: auto; /* Center each member */
  }
  
  .photo-container { 
    width: 96px; 
    height: 96px; /* Keep reduced if needed, but original was 96px */ 
  }
  
  .photo-container::before {
    width: 96px;
    height: 96px;
    box-shadow: 0 0 10px #000000, 0 0 20px #000000, 0 0 30px #000000; /* Changed to black for uniform black glow on mobile */
    animation: flame-glow-black 2s infinite ease-in-out; /* Applied uniform animation (2s duration) to all on mobile; removed nth-child specifics */
  }
  
  /* Restore scrollable content for mobile */
  .scrollable-content {
    position: fixed !important; /* Fix position to create middle scrolling area */
    top: 140px !important; /* Adjust to leave upper gap below fixed title (e.g., 60px title + 80px gap) */
    bottom: 100px !important; /* Increased lower gap at bottom of screen */
    left: 0 !important;
    right: 0 !important;
    overflow-y: auto !important; /* Enable scrolling in middle area */
    overflow-x: hidden !important; /* Prevent horizontal overflow */
    width: 100% !important; /* Ensure full width */
    box-sizing: border-box !important; /* Include padding in width */
    padding: 20px 120px !important; /* Further increased left/right padding for more visible side margins (space on left and right) */
    -ms-overflow-style: none !important; /* IE and Edge; hide scrollbar */
    scrollbar-width: none !important; /* Firefox; hide scrollbar */
    z-index: 1 !important; /* Ensure below fixed elements */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%) !important;
  }
  
  /* Hide scrollbar for Chrome, Safari and Opera on mobile */
  .scrollable-content::-webkit-scrollbar {
    display: none !important;
  }
  
  .page-title {
    font-size: 1rem;
    margin-bottom: 60px !important;
    position: fixed !important; /* Fixed on mobile; override inline */
    top: 60px !important; /* Adjust for mobile */
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important; /* Higher than content */
    color: #000 !important;
    background: transparent !important; /* Transparent */
    padding: 0 !important;
  }
  
  .description {
    max-height: 150px; /* Increased for mobile visibility */
    overflow-y: auto;
    padding-right: 10px;
    -ms-overflow-style: none; /* Hide scrollbar IE and Edge */
    scrollbar-width: none; /* Hide scrollbar Firefox */
  }
  
  .description::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome, Safari, Opera */
  }
  
  /* Fix team member names visibility on mobile */
  .team-member h3,
  .team-member .role {
    color: #000 !important; /* Change to black for better contrast on potentially light backgrounds */
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.7); /* Add white shadow to pop against dark/colored plasma background if needed */
  }
  
  .team-member p {
    color: #333 !important; /* Darker gray for descriptions */
  }
  
  .read-more {
    color: #007BFF !important; /* Visible blue for links */
  }
}

/* Added styles for scrollable content (copied/adapted from services.html inline style) */
.scrollable-content {
  max-height: none !important; /* Remove height limit on desktop; override inline */
  overflow-y: visible !important; /* Changed to visible to show all content without scroll on desktop */
  padding: 60px 10px !important; /* Symmetric gap on desktop */
  -ms-overflow-style: none !important; /* IE and Edge; hide scrollbar */
  scrollbar-width: none !important; /* Firefox; hide scrollbar */
}

.scrollable-content::-webkit-scrollbar {
  display: none !important; /* Hide scrollbar Chrome, Safari, Opera */
}

/* Change Team page title to black on mobile */
@media (max-width: 768px) {
  .page-title {
    color: #000 !important;
  }
}

@media (min-width: 601px) {
  .scrollable-content {
    max-height: 65vh !important; /* Adjusted for desktop; override inline */
  }
  
  #team-content {
    margin-top: 140px !important; /* Push down on desktop for fixed title */
  }
  
  .page-title {
    top: 80px !important; /* Desktop position */
  }
}