@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap');

:root {
  --ibot-red: #ff1717;
  --ibot-bg: #18191c;
  --ibot-white: #fff;
  --bg_shadow: #b43030;
}

body, .profile {
  background: var(--ibot-bg) !important;
  color: var(--ibot-white) !important;
}

:root {
  --ibot-red: #ff1717;
  --ibot-bg: #18191c;
  --ibot-white: #fff;
  --bg_shadow: #4b1111;
}
/* Section Titles */
.section-title-01, .team-sec {
  font-family: 'Orbitron', 'Archivo Black', 'Arial Black', Arial, sans-serif;
  font-size: 2em;
  font-weight: 700;
  margin: 40px 0 30px 0;
  color: var(--ibot-red);
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: none;
  -webkit-text-stroke: 1.5px var(--ibot-red);
  text-stroke: 1.5px var(--ibot-red);
  text-shadow:
    0 0 5px var(--bg_shadow),
    0 0 10px var(--bg_shadow),
    0 0 20px var(--bg_shadow),
    0 0 40px var(--bg_shadow),
    0 0 60px var(--bg_shadow);
  background: none;
  display: block;
  padding: 20px 0 10px 0;
  animation: tubelight-blink 2.2s infinite;
  will-change: opacity, filter;
}

/* Tubelight blink animation for heads and coordinators */
@keyframes tubelight-blink {
  0%, 100% { opacity: 1; filter: brightness(1.3) drop-shadow(0 0 8px #fff7); }
  2% { opacity: 0.5; filter: brightness(1.1) drop-shadow(0 0 2px #fff3); }
  4% { opacity: 0.2; filter: brightness(0.8) drop-shadow(0 0 1px #fff1); }
  6% { opacity: 0.7; filter: brightness(1.2) drop-shadow(0 0 6px #fff5); }
  8% { opacity: 0.3; filter: brightness(0.7) drop-shadow(0 0 1px #fff1); }
  10%, 20% { opacity: 1; filter: brightness(1.4) drop-shadow(0 0 10px #fff9); }
  22% { opacity: 0.6; filter: brightness(1.1) drop-shadow(0 0 2px #fff3); }
  24% { opacity: 0.4; filter: brightness(0.9) drop-shadow(0 0 1px #fff1); }
  26% { opacity: 0.9; filter: brightness(1.3) drop-shadow(0 0 8px #fff7); }
  28% { opacity: 0.2; filter: brightness(0.7) drop-shadow(0 0 1px #fff1); }
  30%, 100% { opacity: 1; filter: brightness(1.3) drop-shadow(0 0 8px #fff7); }
}

/* Example selectors, adjust as needed */

/* If you use a different class for heads/coordinators, change .team-head/.team-coord accordingly. */

/* Card Grid */
.card-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* Center the cards horizontally */
  align-items: flex-start;   /* Align cards to the top */
  gap: 28px;
  margin: 0 auto;
  padding: 0 2vw;
}

/* Team Card */
.card {
  position: relative;
  width: 255px;
  height: 320px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(25, 29, 34, 0.98);
  box-shadow: 0 5px 18px rgb(255 23 23 / 30%);
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(.25,.8,.25,1), box-shadow 0.4s cubic-bezier(.25,.8,.25,1);
  margin: 20px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.card:hover {
  transform: translateY(-8px) scale(1.04);
  box-shadow: 0 14px 36px rgba(255,23,23,0.18), 0 10px 18px rgba(0,0,0,0.22);
}

/* Full Image Cover */
.card .card-image {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: #000;
  transition: 0.5s;
  overflow: hidden;
}

.card .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s, filter 0.5s;
}

.card:hover .card-image img {
  opacity: 0.22;
  filter: blur(1.5px) grayscale(30%);
}

/* Social Icons - animated in center on hover */
.social-icons {
  position: absolute;
  left: 50%;
  bottom: 85px;
  transform: translateX(-60%) translateY(-10%);
  z-index: 3;
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  width: auto;
  min-width: 102px; /* 3 icons * 34px + 2*gap */
  pointer-events: none;
}

.card:hover .social-icons {
  pointer-events: auto; /* Enable pointer events on hover */
}

.social-icons li {
  list-style: none;
}

.social-icons li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: 18px;
  color: var(--ibot-red);
  background: linear-gradient(135deg, #fff 60%, #ffeaea 100%);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(255,23,23,0.12);
  border: 2px solid #ffebee;
  margin: 0 4px;
  transition: transform 0.22s cubic-bezier(.25,.8,.25,1), box-shadow 0.22s, background 0.22s, color 0.22s;
  opacity: 0;
  transform: translateY(70px);
}

.card:hover .social-icons li a {
  opacity: 1;
  transform: translateY(0px);
}

.social-icons li a:hover {
  background: linear-gradient(135deg, #ff1717 60%, #ff6262 100%);
  color: #fff;
  box-shadow: 0 4px 18px 0 #ff1717a0, 0 1.5px 8px 0 #00000025;
  transform: scale(1.13);
  border-color: #ff1717;
}

.social-icons li a .fab {
  transition: 0.8s;
}

.social-icons li a .fab:hover {
  transform: rotateY(360deg);
  color: #fff;
}

.card:hover li:nth-child(1) a { transition-delay: 0.1s; }
.card:hover li:nth-child(2) a { transition-delay: 0.2s; }
.card:hover li:nth-child(3) a { transition-delay: 0.3s; }
.card:hover li:nth-child(4) a { transition-delay: 0.4s; }

/* Details Overlay - slides up on hover */
.details {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(24,25,28,0.98);
  width: 100%;
  height: 80px; /* Lower height */
  z-index: 1;
  padding: 8px 0px 6px 0px;
  transform: translateY(100px);
  transition: transform 0.5s cubic-bezier(.25,.8,.25,1), background 0.4s, height 0.4s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card:hover .details {
  z-index: 2;
  transform: translateY(0px);
  background: linear-gradient(0deg, rgba(24,25,28,0.98) 90%, rgba(24,25,28,0.7) 100%, rgba(24,25,28,0.0) 100%);
  height: 80px;
}

.details h2 {
  font-family: 'Archivo Black', Arial, sans-serif;
  margin: 0px 0px 2px 0px;
  padding: 0;
  text-align: center;
  font-size: 1.15em;
  color: var(--ibot-red);
  letter-spacing: 1px;
  text-shadow: none;
  background: none;
}

.details .job-title {
  font-size: 1em;
  color: #ffb3b3;
  text-align: center;
  font-weight: 500;
  margin: 0px 0px;
  font-family: 'Poppins', sans-serif;
  text-shadow: none;
  background: none;
}

/* Responsive for mobile */
@media (max-width: 900px) {
  .team-sec {
    font-size: 1.3em;
    margin: 18px auto 18px auto;
  }
  .card-wrapper {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 2vw;
  }
  .card {
    max-width: 98vw;
    min-width: unset;
    border-radius: 14px;
    margin: 14px auto;
    height: 280px;
  }
  .details {
    padding: 0 8px 10px 8px;
    min-height: 60px;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
  }
  .social-icons {
    bottom: 70px;
  }
}