/* ─── LOGOS SECTION ─── */
  .logos-bx-sec {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 60px 0 72px;
    background:
      radial-gradient(ellipse 65% 80% at 35% 55%, rgba(15,55,200,0.55) 0%, transparent 65%),
      radial-gradient(ellipse 45% 60% at 68% 38%, rgba(90,20,180,0.35) 0%, transparent 60%),
      radial-gradient(ellipse 30% 30% at 12% 75%, rgba(0,30,120,0.4)  0%, transparent 60%),
      #060610;
  }
  .logo-boxes{padding-top: 100px; gap:12px; background: url(../img/client-sec-bg.jpg) center center no-repeat;}
  .client-logo-bx:nth-child(1),
  .client-logo-bx:nth-child(3),
  .client-logo-bx:nth-child(5),
  .client-logo-bx:nth-child(7),
  .client-logo-bx:nth-child(9),
  .client-logo-bx:nth-child(11),
  .client-logo-bx:nth-child(13),
  .client-logo-bx:nth-child(15),
  .client-logo-bx:nth-child(17),
  .client-logo-bx:nth-child(19),
  .client-logo-bx:nth-child(21),
  .client-logo-bx:nth-child(23),
  .client-logo-bx:nth-child(25) { margin-top: -41%; }

  .client-logo-bx {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 160px;
    background: url(../img/logo-back-hexa.png) center center no-repeat;
    background-size: 100% 100%;
  padding: 25px;
  }
    .client-logo-bx:hover {background: url(../img/logo-back-hexa-hover.png) center center no-repeat; 
      background-size: 100% 100%;}

  @media (max-width:1024px) {
    .grid-six{ grid-template-columns:1fr 1fr 1fr 1fr  ;}
  }
  @media (max-width:767px) {
    .grid-six{ grid-template-columns:1fr 1fr 1fr ;}
    .logo-boxes{padding-top: 0;}
    .client-logo-bx:nth-child(1),
  .client-logo-bx:nth-child(3),
  .client-logo-bx:nth-child(5),
  .client-logo-bx:nth-child(7),
  .client-logo-bx:nth-child(9),
  .client-logo-bx:nth-child(11),
  .client-logo-bx:nth-child(13),
  .client-logo-bx:nth-child(15),
  .client-logo-bx:nth-child(17),
  .client-logo-bx:nth-child(19),
  .client-logo-bx:nth-child(21),
  .client-logo-bx:nth-child(23),
  .client-logo-bx:nth-child(25) { margin-top: 0%; }
  }
  @media (max-width:480px) {
  .client-logo-bx { height: 100px;}
  }
  /* ─── HEADING ─── */
  .logos-bx-sec .heading {
    position: relative; z-index: 3;
  }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }

/* ─── GRID WRAPPER ─── */
.hc-grid-wrap {
  position: relative; z-index: 2;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Grid: width set by JS via --grid-w */
.hc-grid {
  width: var(--grid-w, 920px);
}

/* Rows: gap & overlap driven by CSS vars set in JS */
.hc-row {
  display: flex;
  gap: var(--hex-gap, 10px);
  margin-top: var(--row-overlap, -33px);
}
.hc-row:first-child { margin-top: 0; }
.hc-row--off        { margin-left: var(--row-offset, 78px); }

/* ─── SINGLE HEX ─── */
.hc-hex {
  flex-shrink: 0;
  width:  var(--hw, 145px);
  height: var(--hh, 167px);
  position: relative;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.72) translateY(14px);
  animation: hexPop 0.42s cubic-bezier(.34,1.38,.64,1) both;
}
@keyframes hexPop {
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Shape layers */
.hx {
  position: absolute; inset: 0;
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
.hx-border {
  inset: -1.5px;
  background: linear-gradient(135deg,
    rgba(55,110,255,0.75),
    rgba(130,50,255,0.55),
    rgba(25,190,255,0.45)
  );
  z-index: 0; opacity: 0.5;
  transition: opacity 0.28s ease;
}
.hx-fill {
  background: linear-gradient(150deg, rgba(16,26,70,0.97), rgba(7,10,30,0.98));
  z-index: 1;
}
.hx-shine {
  background: radial-gradient(ellipse 75% 55% at 25% 18%,
    rgba(70,130,255,0.13) 0%, transparent 60%);
  z-index: 2; pointer-events: none;
}

/* Logo */
.hx-logo {
  position: absolute; inset: 0; z-index: 3;
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s cubic-bezier(.34,1.3,.64,1), filter 0.3s ease;
}
.hx-lp {
  width: var(--logo-sz, 64px);
  height: var(--logo-sz, 64px);
  border-radius: var(--logo-br, 10px);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: var(--logo-fs, 13px);
  letter-spacing: 0.5px;
  transition: filter 0.3s ease;
}

/* Hover */
.hc-hex:hover .hx-border { opacity: 1; animation: bGlow 1.3s ease infinite; }
.hc-hex:hover .hx-logo   { transform: scale(1.08) translateY(-4px); filter: drop-shadow(0 0 12px var(--hc)) drop-shadow(0 0 24px var(--hc2)); }
.hc-hex:hover .hx-fill   { filter: brightness(1.25); }
.hc-hex:hover .hx-lp     { filter: brightness(1.4) saturate(1.2); }
@keyframes bGlow {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.5; }
}

/* ══════════════════════════════════════════════════════════════
   CAREERS PAGE — Positions Section
   ══════════════════════════════════════════════════════════════ */

/* ── WRAPPER ── */
#positions-section {
  min-height: 100vh;
  padding: 40px 0px;
  color: #fff;
}

/* ── HEADER ── */
.pos-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 20px;
}
.pos-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(245, 166, 35, .09);
  border: 1px solid rgba(245, 166, 35, .22);
  padding: 6px 16px;
  border-radius: 30px;
  margin-bottom: 14px;
}
.pos-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #F5A623;
  display: inline-block;
  flex-shrink: 0;
  animation: posShimmer 2s infinite;
}
@keyframes posShimmer {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.pos-badge-text {
  color: #F5A623;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pos-heading {
  font-size: clamp(22px, 2vw, 24px);
  font-weight: 700;
  background: linear-gradient(135deg, #fff 30%, #777);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.15;
}

/* ── CONTROLS ── */
.pos-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}
@media (max-width: 480px) {
    .pos-controls {
        align-items: center;
    }
}
.pos-search-wrap { position: relative; }
.pos-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #555;
  font-size: 15px;
  pointer-events: none;
  user-select: none;
}
#positions-section .pos-search {
  background: #161616;
  border: 1px solid #2a2a2a;
  border-radius: 30px;
  padding: 10px 18px 10px 40px;
  color: #fff;
  font-size: 14px;
  width: 250px;
  outline: none;
  transition: border-color .2s;
}
#positions-section .pos-search:focus { border-color: rgba(245, 166, 35, .45); }
#positions-section .pos-search::placeholder { color: #444; }

/* View toggle */
.pos-view-toggle {
  display: flex;
  background: #161616;
  border: 1px solid #2a2a2a;
  border-radius: 30px;
  padding: 4px;
  gap: 2px;
}
.pos-view-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  color: #555;
  border: none;
  padding: 7px 14px;
  border-radius: 24px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  transition: background .2s, color .2s;
}
.pos-view-btn:hover { color: #999; }
.pos-view-btn.pos-active { background: #F5A623 !important; color: #000 !important; }

/* ── FILTER BAR ── */
.pos-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
  align-items: center;
}
.pos-cat-btn {
  background: #161616;
  color: #555;
  border: 1px solid #2a2a2a;
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.pos-cat-btn:hover { border-color: #444; color: #999; }
.pos-cat-btn.pos-active { background: #fff !important; color: #000 !important; border-color: #fff !important; }
.cat-count { margin-left: 7px; opacity: .55; }
.pos-result-count { color: #555; font-size: 14px; }

/* ── DIVIDER ── */
.pos-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(245, 166, 35, .25), transparent);
  margin-bottom: 30px;
}

/* ── EMPTY STATE ── */
.pos-empty {
  display: none;
  text-align: center;
  padding: 60px 0;
  color: #555;
}
.pos-empty .ei { font-size: 40px; margin-bottom: 12px; }
.pos-empty p { font-size: 14px; }

/* ── ALL VIEWS hidden by default ── */
.pos-view { display: none; }

/* ── GRID CARDS ── */
@keyframes posFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes posFadeLeft {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}
.grid-card {
  background: linear-gradient(145deg, #161616, #1a1a1a);
  border: 1px solid #2a2a2a;
  border-radius: 20px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform .3s, border-color .3s, box-shadow .3s;
  animation: posFadeUp .45s ease both;
}
.grid-card:hover { transform: translateY(-4px); }
.grid-glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  pointer-events: none;
}
.grid-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.grid-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.grid-type {
  background: #252525;
  color: #888;
  font-size: 14px;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: .04em;
}
#positions-section .grid-title {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.3;
}
.grid-desc {
  color: #666;
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 18px;
}
.skills-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.skill-tag {
  padding: 3px 11px;
  border-radius: 20px;
  font-size: 14px;
  white-space: nowrap;
  letter-spacing: .02em;
  border: 1px solid transparent;
}
.skills-more { color: #555; font-size: 14px; padding: 3px 6px; }
.grid-footer { display: flex; align-items: center; }
.grid-cat { font-size: 14px; padding: 4px 12px; border-radius: 20px; }
.pos-apply-btn {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  color: #000;
  border: none;
  padding: 9px 20px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s;
}
.pos-apply-btn:hover { opacity: .82; }

/* ── LIST ROWS ── */
.list-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 20px;
  align-items: flex-start;
  padding: 20px 24px;
  border-bottom: 1px solid #1e1e1e;
  border-radius: 12px;
  cursor: pointer;
  transition: background .2s, padding-left .25s;
  animation: posFadeLeft .4s ease both;
}
.list-row:hover { background: #161616; padding-left: 34px; }
.list-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.list-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
#positions-section .list-title { color: #fff; font-size: 16px; font-weight: 700; }
.list-cat { font-size: 14px; padding: 2px 10px; border-radius: 20px; }
.list-level { color: #555; font-size: 14px; }
.list-desc { color: #666; font-size: 14px; line-height: 1.7; margin: 8px 0 10px; }
.list-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.list-skill { color: #555; font-size: 14px; }
.pos-apply-outline {
  display: inline-block;
  text-decoration: none;
  border: 1px solid;
  padding: 9px 22px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .2s, color .2s;
}

/* ── FOOTER CTA ── */
.pos-footer {
  margin-top: 30px;
  padding: 40px;
  background: linear-gradient(135deg, #161616, #1a1a1a);
  border: 1px solid #222;
  border-radius: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.pos-footer .f-sub { color: #888; font-size: 14px; margin-bottom: 6px; }
.pos-footer .f-title { color: #fff; font-size: 22px; font-weight: 700; }
.f-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.f-btn-gold {
  background: #F5A623;
  color: #000;
  padding: 12px 28px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  transition: opacity .2s;
}
.f-btn-gold:hover { opacity: .84; }
.f-btn-ghost {
  background: transparent;
  color: #fff;
  padding: 12px 28px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #333;
  text-decoration: none;
  display: inline-block;
  transition: border-color .2s;
}
.f-btn-ghost:hover { border-color: #666; }

/* ── CAREERS LOADER ── */
#loader {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
}
.loader-car {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  border-top: 5px solid #fff;
  border-right: 5px solid #f1aa12;
  border-bottom: 5px solid #f1aa12;
  border-left: 5px solid #f1aa12;
  border-radius: 100px;
  -webkit-animation: spin 1s infinite linear;
  animation: spin 1s infinite linear;
}
@keyframes spin { 100% { transform: rotate(360deg); } }
}

/* Ripple */
.hx-ripple {
  position: absolute; z-index: 10; border-radius: 50%;
  background: rgba(100,190,255,0.28);
  pointer-events: none; transform: scale(0);
  animation: rip 0.55s ease forwards;
}
@keyframes rip { to { transform: scale(5); opacity: 0; } }