/* ================= BASE ================= */

/* Hide specific team cards but keep their space and make them non-interactive */
.team-grid .team-card:nth-child(3),
.team-grid .team-card:nth-child(5),
.team-grid .team-card:nth-child(7),
.team-grid .team-card:nth-child(9),
.team-grid .team-card:nth-child(13),
.team-grid .team-card:nth-child(14),
.team-grid .team-card:nth-child(15),
.team-grid .team-card:nth-child(19),
.team-grid .team-card:nth-child(24),
.team-grid .team-card:nth-child(25),
.team-grid .team-card:nth-child(29),
.team-grid .team-card:nth-child(30),
.team-grid .team-card:nth-child(41) {
  visibility: hidden !important;     /* Force hide but maintain space */
  pointer-events: none !important;   /* Force disable hover/click interactions */
  opacity: 0 !important;              /* Additional visual hiding */
}
@media (max-width: 767px){
  .team-grid .team-card:nth-child(3),
.team-grid .team-card:nth-child(5),
.team-grid .team-card:nth-child(7),
.team-grid .team-card:nth-child(9),
.team-grid .team-card:nth-child(13),
.team-grid .team-card:nth-child(14),
.team-grid .team-card:nth-child(15),
.team-grid .team-card:nth-child(19),
.team-grid .team-card:nth-child(24),
.team-grid .team-card:nth-child(25),
.team-grid .team-card:nth-child(29),
.team-grid .team-card:nth-child(30),
.team-grid .team-card:nth-child(41) {
display: none !important;
}
}

.brands-slider {
  padding: 100px 150px !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  background: linear-gradient(186deg, rgba(32, 31, 31, 1) 80%, rgba(0, 0, 0, 0.2) 0%) !important;
  min-height: 300px !important;
  height: auto !important;
  overflow: visible !important;
}

/* Force visibility for all child elements */
.brands-slider * {
  opacity: inherit;
  visibility: inherit;
}

/* Ensure team grid is visible */
.brands-slider .team-grid {
  opacity: 1 !important;
  visibility: visible !important;
  display: grid !important;
}

/* Ensure team cards are visible */
.brands-slider .team-card {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}

/* Responsive padding for brands-slider */
@media (max-width: 1200px) {
  .brands-slider {
    padding: 80px 100px;
  }
}

@media (max-width: 992px) {
  .brands-slider {
    padding: 60px 50px !important;
  }
}

@media (max-width: 768px) {
  .brands-slider {
    padding: 50px 30px !important;
  }
}

@media (max-width: 576px) {
  .brands-slider {
    padding: 0px 20px !important;
    overflow: hidden !important;
  }
}

.section-badge {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:1px;
  color: white;
  font-size: 18px;
  margin-bottom: 20px;
}

.section-badge img {
  width: 20px;
  height: auto;
}

.section-title {
  text-align:center;
  margin:20px 0 70px;
  color: white;
  font-size: 45px;
  font-weight: bold;
  line-height: 1.2;
}

/* Responsive section badge and title */
@media (max-width: 992px) {
  .section-badge {
    font-size: 16px;
    gap: 10px;
  }
  
  .section-badge img {
    width: 18px;
  }
  
  .section-title {
    font-size: 36px;
    margin: 15px 0 50px;
  }
}

@media (max-width: 768px) {
  .section-badge {
    font-size: 14px;
    gap: 8px;
  }
  
  .section-badge img {
    width: 16px;
  }
  
  .section-title {
    font-size: 28px;
    margin: 15px 0 40px;
    padding: 0 15px;
  }
}

@media (max-width: 576px) {
  .section-badge {
    font-size: 12px;
    gap: 6px;
  }
  
  .section-badge img {
    width: 14px;
  }
  
  .section-title {
    font-size: 24px;
    margin: 10px 0 30px;
    padding: 0 10px;
  }
}

/* ================= GRID ================= */
.team-grid {
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:30px 20px;
  max-width:1600px;
  margin:0 auto;
  padding:0 20px;
  perspective: 1000px;
  transform-style: preserve-3d;
}

/* ================= CARD ================= */
.team-card {
  display:flex;
  flex-direction:column;
  text-align:center;
  cursor:pointer;
  opacity: 1; /* Changed from 0 to 1 - JS will animate if needed */
  transform:translateY(0); /* Changed from 30px to 0 */
  background:transparent;
  border-radius:16px;
  overflow:visible;
  perspective: 1000px;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

/* Vertical Rectangle Image Container */
.card-image {
  position:relative;
  width:100%;
  height:320px;
  border-radius:16px;
  overflow:hidden;
  background:#111;
  margin-bottom:0;
  transform-style: preserve-3d;
  will-change: transform;
  backface-visibility: hidden;
}

.card-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  will-change: transform, filter, opacity;
}

/* Base Overlay - Dark gradient */
.card-image::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0.1),
    rgba(0,0,0,0.5)
  );
  transition:background .5s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
  will-change: background;
}

/* Hover Effects - GSAP will handle transform, so we use opacity and filter */
.team-card:hover img {
  transform:scale(1.1);
}

/* Yellow overlay on hovered card */
.team-card:hover .card-image::after {
  background: linear-gradient(
    to bottom,
    rgba(206, 245, 1, 0.4),  /* CEF501 in rgba */
    rgba(128, 128, 128, 0.6)  /* Grey in rgba */
  );
}


/* Grey overlay on all other cards when one is hovered - only when hovering on cards */
.team-grid.card-hovered .team-card:not(:hover),
.team-grid:has(.team-card:hover) .team-card:not(:hover) {
  opacity: 0.5;
  transition: opacity .5s cubic-bezier(.4,0,.2,1);
}

.team-grid.card-hovered .team-card:not(:hover) .card-image::after,
.team-grid:has(.team-card:hover) .team-card:not(:hover) .card-image::after {
  background: rgba(0, 0, 0, 0.7) !important;
  transition: background .5s cubic-bezier(.4,0,.2,1) !important;
}

.team-grid.card-hovered .team-card:not(:hover) .card-image img,
.team-grid:has(.team-card:hover) .team-card:not(:hover) .card-image img {
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter .5s cubic-bezier(.4,0,.2,1), opacity .5s cubic-bezier(.4,0,.2,1);
}

/* Text Below Card */
.card-title {
  margin-top:16px;
  font-size:16px;
  font-weight:600;
  color:#CEF501;
  transition:color .4s cubic-bezier(.4,0,.2,1);
  will-change: color;
}

.team-card:hover .card-title {
  color:white;
}

.card-role {
  display:block;
  margin-top:6px;
  font-size:13px;
  color:#CEF501;
  transition:color .4s cubic-bezier(.4,0,.2,1);
  will-change: color;
}

.team-card:hover .card-role {
  color:white;
}

/* ================= RESPONSIVE ================= */

/* Large Desktop (1400px and below) */
@media (max-width:1400px) {
  .team-grid {
    grid-template-columns:repeat(5, 1fr);
    gap:25px 18px;
    max-width: 1400px;
  }
}

/* Desktop (1200px and below) */
@media (max-width:1200px) {
  .team-grid {
    grid-template-columns:repeat(4, 1fr);
    gap:25px 16px;
    max-width: 1200px;
  }
  
  .card-image {
    height:280px;
  }
}

/* Tablet Landscape (992px and below) */
@media (max-width:992px) {
  .team-grid {
    grid-template-columns:repeat(3, 1fr);
    gap:25px 14px;
    max-width: 992px;
    padding:0 20px;
  }
  
  .card-image {
    height:260px;
  }
  
  .card-title {
    font-size:15px;
  }
  
  .card-role {
    font-size:12px;
  }
}

/* Tablet Portrait (768px and below) */
@media (max-width:768px) {
  .team-grid {
    grid-template-columns:repeat(3, 1fr);
    gap:20px 12px;
    padding:0 15px;
  }
  
  .card-image {
    height:240px;
  }
  
  .card-title {
    font-size:14px;
    margin-top:12px;
  }
  
  .card-role {
    font-size:11px;
    margin-top:4px;
  }
}

/* Mobile Large (576px and below) */
@media (max-width:576px) {
  .team-grid {
    grid-template-columns:repeat(2, 1fr);
    gap:20px 10px;
    padding:0 10px;
  }
  
  .card-image {
    height:220px;
  }
  
  .card-title {
    font-size:13px;
    margin-top:10px;
  }
  
  .card-role {
    font-size:10px;
    margin-top:3px;
  }
}

/* Mobile Small (480px and below) */
@media (max-width:480px) {
  .team-grid {
    grid-template-columns:repeat(2, 1fr);
    gap:15px 8px;
    padding:0 8px;
  }
  
  .card-image {
    height:200px;
  }
  
  .card-title {
    font-size:12px;
    margin-top:8px;
  }
  
  .card-role {
    font-size:9px;
    margin-top:2px;
  }
}