/* ================================================== Hero Section ================================================== */
/* ================================================================================================================== */
.hero {
  position: relative;
  /* Background image */
  background-image: url('/images/spline.webp');
  background-size: 90% 110%;
  background-position: 70% center;
  background-repeat: no-repeat;
  /* Put text in center */
  display: flex;
  align-items: center;
}

.hero-text-container { /* position: relative; */ z-index: 3; background-color: var(--text-background); }


/* -------------------- Decorations -------------------- */
.hex-decorative { z-index: 2; position: absolute; opacity: 0.95; }

/* TODO - Fix minimum clamp width */
.hex-1  { left: 3%;  top: 6%;  width: clamp(105px, 6vw, 115px);  background: var(--gradient-yellow); }
.hex-2  { left: 10%; top: 11%; width: clamp(77px, 4.5vw, 85px); background: var(--gradient-purple); }

.hex-3  { left: 39%; top: 18%; width: clamp(171px, 10vw, 190px); background: var(--gradient-green); }
.hex-4  { left: 48%; top: 9%;  width: clamp(225px, 13vw, 250px); background-image: url('/images/gallery/thumbnails/1.webp'); background-size: cover; }

.hex-5  { left: 73%; top: 21%; width: clamp(80px, 5.5vw, 90px); background: var(--gradient-purple); }
.hex-6  { left: 68%; top: 30%; width: clamp(100px, 7.5vw, 130px); background: var(--gradient-blue); }
.hex-7  { left: 61%; top: 39%; width: clamp(120px, 9vw, 150px);  background: var(--gradient-yellow); }

.hex-8  { left: 57%; top: 68%; width: clamp(216px, 12vw, 240px); background-image: url('/images/gallery/thumbnails/3.webp'); background-size: cover; }
.hex-9  { left: 68%; top: 79%; width: clamp(162px, 9vw, 180px);  background: var(--gradient-purple); }

.hex-10 { left: 83%; top: 56%; width: clamp(189px, 10.5vw, 210px); background-image: url('/images/gallery/thumbnails/12.webp'); background-size: cover; }
.hex-11 { left: 88%; top: 43%; width: clamp(131px, 7.2vw, 145px);  background: var(--gradient-green); }
.hex-12 { left: 80%; top: 40%; width: clamp(144px, 10vw, 165px);   background-image: url('/images/gallery/thumbnails/16.webp'); background-size: cover; }

.hex-13 { right: 7%; top: 9%;  width: clamp(180px, 15vw, 200px); background: var(--text-background); background-image: url('/images/gallery/thumbnails/11.webp'); background-size: cover; }

.decoration-1 { z-index: 1; width: 20%; position: absolute; left: 15%; bottom: 0; }

@media (max-width: 900px) {
  .hero { background-image: url('/images/spline-sm.webp'); }

  .hex-4  { display: none; }
  .hex-11 { display: none; }

  /* 1 */
  .hex-8  { left: 5%; top: 70%; width: 140px; }
  /* 2 */
  .hex-12 { left: 19%; top: 76%; width: 130px; }
  /* 3 */
  .hex-1  { left: 64%;  top: 86%;  width: 90px; }
  /* 4 */
  .hex-3  { left: 74%; top: 85%; width: 70px; }
  /* 5 */
  .hex-9  { left: 82%; top: 83%; width: 50px; }
  /* 6 */
  .hex-7  { left: 46%; top: 44%; width: 150px; }
  /* 7 */
  .hex-6  { left: 30%; top: 41%; width: 130px; }
  /* 8 */
  .hex-5  { left: 20%; top: 35%; width: 100px; }
  /* 9 */
  .hex-10 { left: 4%; top: 4%; width: 140px; }
  /* 10 */
  .hex-2  { left: 20%; top: 4%; width: 85px; }
  /* 11 */
  .hex-13 { right: 14%; top: 4%;  width: 150px; }
  .decoration-1 { left: 9%; }
}

/* ================================================== Activities ================================================== */
/* ================================================================================================================ */
.activities .card { background: none; border: none; }

/* =================================================== Acronym ==================================================== */
/* ================================================================================================================ */
.acronym { background-image: url('/images/spline-2.webp');
  background-size: 90% 100%;
  background-position: center;
  background-repeat: no-repeat;  }

.hex-row h3 { margin: 0; color: var(--white); font-size: 8rem; }
.hex-btn { border: none; background: none; cursor: pointer; padding: 0; flex: 1; margin-left: -3%; }
.hex-btn:first-child { margin-left: 0; }
.hex-btn div { width: 100%; }

.hexagon.active p { display: none; }

.explanation { display: none; }
.explanation.active { display: block; }

.hexagon.active { position: relative; overflow: hidden; }
.hexagon.active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient( 120deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70% );
  background-size: 200% 200%;
  animation: shimmerWave 4s linear infinite;
  pointer-events: none;
}

@keyframes shimmerWave {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@media (max-width: 992px) {  .hex-row h3 { font-size: 6rem; } .acronym { background-size: 200% 100%; } }
@media (max-width: 576px) {  .hex-row h3 { font-size: 4rem; } }

/* ==================================================== Roles ===================================================== */
/* ================================================================================================================ */
.hive-table { border-collapse: separate; border-spacing: .5rem 0; }

/* .hive-table, */
.hive-table th,
.hive-table td { border: 0 !important; }
.hive-table > :not(caption) > * > * { border-bottom-width: 0 !important; background: none; }

/* Column backgrounds */
.hive-table thead th:nth-child(2),
.hive-table tbody td:nth-child(2) { background: var(--yellow-translucent); }
.hive-table thead th:nth-child(3),
.hive-table tbody td:nth-child(3) { background: var(--purple-translucent); }
.hive-table thead th:nth-child(4),
.hive-table tbody td:nth-child(4) { background: var(--blue-translucent); }
.hive-table thead th:nth-child(5),
.hive-table tbody td:nth-child(5) { background: var(--green-translucent); }

/* Mobile tabs */
.hive-table-mobile .nav-link::before { content: none !important; }
.hive-table-mobile .nav-link { border: none; border-radius: 0; color: var(--black); }

.roles-tab-1 { background-color: var(--yellow-translucent) !important; }
.roles-tab-2 { background-color: var(--purple-translucent) !important; }
.roles-tab-3 { background-color: var(--blue-translucent) !important; }
.roles-tab-4 { background-color: var(--green-translucent) !important; }

/* =================================================== Contact ==================================================== */
/* ================================================================================================================ */
.contact-section {
  position: relative; 
  overflow: hidden;
  background-image: url('/images/spline-3.webp');
  background-size: auto 100%;
  background-position: left;
  background-repeat: no-repeat;  
}

.bee-sleeping-decoration { position: absolute; right: 0%; bottom: 0; width: clamp(130px, 10vw, 190px); }