/* =========================
   HABILIDADES – Light Switch v4 (penumbra / illumination)
   Alcance: SOLO #habilidades + .skills3-*
   ========================= */

#habilidades {
   overflow: hidden;
   contain: layout;
}

/* ===== Root ===== */
#habilidades .skills3-root {
   position: relative;
   width: 100%;
   max-width: 100%;
   min-width: 0;
   overflow: visible;
   --cyan: 100, 255, 218;
   --warm: 255, 200, 100;
   --on: 0;
   --bulb: 120px;
}
#habilidades .skills3-root.is-on {
   --on: 1;
}

@media (min-width: 768px) {
   #habilidades .skills3-root { --bulb: 131px; }
}
@media (min-width: 1024px) {
   #habilidades .skills3-root { --bulb: 140px; }
}

/* ===== Glow radial from bulb (light propagation) ===== */
#habilidades .skills3-root::after {
   content: "";
   position: absolute;
   top: 25%;
   right: -10%;
   width: 110%;
   height: 110%;
   pointer-events: none;
   z-index: 0;
   border-radius: 50%;
   background: radial-gradient(
      ellipse 30% 90% at 64% 35%,
      rgba(255, 200, 100, 0.50),
      rgba(255, 200, 100, 0.25) 40%,
      rgba(255, 200, 100, 0.10) 60%,
      transparent 80%
   );
   filter: blur(50px);
   opacity: 0;
   transform: translate(10%, -5) scale(0.4);
   transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
#habilidades .skills3-root.is-on::after {
   opacity: 0.95;
   transform: translate(-15%, 30%) scale(2.2) rotate(15deg);
}

#habilidades .skills3-shell {
   position: relative;
   z-index: 1;
   width: 100%;
   max-width: 100%;
   min-width: 0;
   padding-top: 0;
}

/* ===== Toolbar ===== */
/* Mobile (base): columna — con display:contents en title-wrap para intercalar el switch */
#habilidades .skills3-toolbar {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0.75rem;
   margin-bottom: 1.6rem;
}

/* Mobile: title-wrap invisible → sus hijos son flex-items directos del toolbar */
@media (max-width: 767px) {
   #habilidades .skills3-title-wrap {
      display: contents;
   }
   #habilidades .skills3-title-wrap .section-label {
      order: 1;
   }
   #habilidades .skills3-switch {
      order: 2;
   }
   #habilidades .skills3-title-wrap .section-title {
      order: 3;
   }
}

/* Tablet+ (768px+): fila horizontal */
@media (min-width: 768px) {
   #habilidades .skills3-toolbar {
      flex-direction: row;
      align-items: flex-end;
      gap: 0.85rem;
   }
}

#habilidades .skills3-title-wrap {
   margin: 0;
}
#habilidades .skills3-title-wrap .section-title {
   margin: 0;
   transition: color 0.6s ease-out;
}

#habilidades .skills3-root.is-off .skills3-title-wrap .section-title {
   color: rgba(200, 210, 220, 0.38);
}

#habilidades .skills3-root.is-on .skills3-title-wrap .section-title {
   color: var(--text-header, #E6F1FF);
}

/* Switch */
#habilidades .skills3-switch {
   display: inline-flex;
   align-items: center;
   gap: 0.55rem;
   padding: 0.42rem 0.6rem;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, 0.15);
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
   cursor: pointer;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
   transition:
      border-color 200ms ease,
      box-shadow 200ms ease,
      background 200ms ease;
}
#habilidades .skills3-switch:focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px rgba(var(--cyan), 0.18);
}
#habilidades .skills3-switch-name {
   font-size: 0.88rem;
   color: rgba(240, 255, 252, 0.82);
   letter-spacing: 0.2px;
}
#habilidades .skills3-switch-state {
   font-family: "Fira Code", monospace;
   font-size: 0.82rem;
   letter-spacing: 0.12em;
   color: rgba(240, 255, 252, 0.72);
   padding-inline: 0.25rem;
}
#habilidades .skills3-switch-led {
   display: none;
}
#habilidades .skills3-switch-track {
   width: 44px;
   height: 24px;
   border-radius: 999px;
   position: relative;
   overflow: hidden;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.15);
}
#habilidades .skills3-switch-knob {
   width: 18px;
   height: 18px;
   border-radius: 999px;
   position: absolute;
   top: 50%;
   left: 3px;
   transform: translateY(-50%);
   background: rgba(240, 255, 252, 0.85);
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
   transition:
      left 200ms ease,
      background 200ms ease,
      box-shadow 200ms ease;
}

/* Switch ON */
#habilidades .skills3-root.is-on .skills3-switch {
   border-color: rgba(var(--warm), 0.32);
   box-shadow:
      0 0 0 1px rgba(var(--warm), 0.1),
      0 0 26px rgba(var(--warm), 0.06);
}
#habilidades .skills3-root.is-on .skills3-switch-track {
   border-color: rgba(var(--warm), 0.25);
   background: radial-gradient(
      140px 60px at 20% 40%,
      rgba(var(--warm), 0.18),
      rgba(255, 255, 255, 0.03)
   );
}
#habilidades .skills3-root.is-on .skills3-switch-knob {
   left: 23px;
   background: rgba(var(--warm), 0.95);
   box-shadow:
      0 0 16px rgba(var(--warm), 0.2),
      0 8px 20px rgba(0, 0, 0, 0.35);
}

/* ===== Grid ===== */
#habilidades .skills3-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 1.5rem;
   width: 100%;
   max-width: 100%;
   min-width: 0;
   align-items: stretch;
}
@media (min-width: 768px) {
   #habilidades .skills3-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}
@media (min-width: 1024px) {
   #habilidades .skills3-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }
}
#habilidades .skills3-reveal {
   width: 100%;
   max-width: 100%;
   min-width: 0;
   display: flex;
   flex-direction: column;
}
#habilidades .skills3-reveal .skills3-card {
   flex: 1;
}

/* ===== Card ===== */
#habilidades .skills3-card {
   position: relative;
   width: 100%;
   min-width: 0;
   box-sizing: border-box;
   overflow: hidden;
   outline: none;
   border-radius: 1.1rem;
   padding: 1.5rem;

   /* OFF: penumbra — barely visible */
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.08);

   transition:
      background 0.6s ease-out,
      border-color 0.6s ease-out,
      box-shadow 0.6s ease-out,
      transform 220ms ease,
      filter 220ms ease;
}
@media (min-width: 768px) {
   #habilidades .skills3-card {
      padding: 1.5rem;
   }
}

/* Card texture overlay — rayas eliminadas */
#habilidades .skills3-card::before {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.6s ease-out;
}
/* Card hover sheen (hidden by default) */
#habilidades .skills3-card::after {
   content: "";
   position: absolute;
   inset: -1px;
   pointer-events: none;
   opacity: 0;
   transform: translateY(10px);
   transition:
      opacity 220ms ease,
      transform 220ms ease;
   background:
      radial-gradient(520px 260px at 85% 15%, rgba(var(--cyan), 0.12), transparent 60%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
}

/* Card hover (OFF state — subtle) */
@media (hover: hover) and (pointer: fine) {
   #habilidades .skills3-root.is-off .skills3-card::after {
      background:
         radial-gradient(520px 260px at 85% 15%, rgba(var(--warm), 0.06), transparent 60%),
         linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.00));
   }
   #habilidades .skills3-card:hover,
   #habilidades .skills3-card:focus-within {
      transform: translateY(-4px);
      border-color: rgba(255, 255, 255, 0.15);
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
   }
   #habilidades .skills3-card:hover::after,
   #habilidades .skills3-card:focus-within::after {
      opacity: 0.35;
      transform: translateY(0);
   }
}

/* ===== Card ON: illuminated ===== */
#habilidades .skills3-root.is-on .skills3-card.card {
   background: rgba(var(--warm), 0.06);
   border-color: rgba(var(--warm), 0.3);
   box-shadow:
      0 12px 40px rgba(0, 0, 0, 0.4),
      0 0 0 1px rgba(var(--warm), 0.08),
      0 0 28px rgba(var(--warm), 0.05);
}
#habilidades .skills3-root.is-on .skills3-card::before {
   opacity: 0.55;
   background:
      radial-gradient(720px 340px at 92% 10%, rgba(var(--warm), 0.14), transparent 62%),
      radial-gradient(520px 240px at 8% 85%, rgba(255, 255, 255, 0.04), transparent 58%);
}

/* Card hover ON: warm */
@media (hover: hover) and (pointer: fine) {
   #habilidades .skills3-root.is-on .skills3-card.card:hover,
   #habilidades .skills3-root.is-on .skills3-card.card:focus-within {
      transform: translateY(-6px);
      border-color: rgba(var(--warm), 0.4);
      box-shadow:
         0 18px 56px rgba(0, 0, 0, 0.5),
         0 0 0 1px rgba(var(--warm), 0.14),
         0 0 34px rgba(var(--warm), 0.08);
      filter: brightness(1.03);
   }
   #habilidades .skills3-root.is-on .skills3-card::after {
      background:
         radial-gradient(520px 260px at 85% 15%, rgba(var(--warm), 0.14), transparent 60%),
         linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
   }
   #habilidades .skills3-root.is-on .skills3-card:hover::after,
   #habilidades .skills3-root.is-on .skills3-card:focus-within::after {
      opacity: 0.95;
      transform: translateY(0);
   }
}

/* ===== Inner stacking ===== */
#habilidades .skills3-inner {
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   gap: 0.9rem;
}
#habilidades .skills3-head,
#habilidades .skills3-body {
   position: relative;
   z-index: 2;
}

/* Head */
#habilidades .skills3-head {
   display: flex;
   align-items: center;
   gap: 0.75rem;
}

/* Icon */
#habilidades .skills3-icon {
   width: 30px;
   height: 30px;
   border-radius: 10px;
   display: grid;
   place-items: center;
   background: rgba(255, 255, 255, 0.04);
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
   transition: background 0.6s ease-out, box-shadow 0.6s ease-out;
}
#habilidades .skills3-icon svg {
   width: 18px;
   height: 18px;
   display: block;
}

/* Icon strokes: OFF = dim, ON = warm */
#habilidades .skills3-ico-stroke {
   stroke: rgba(180, 190, 200, 0.35);
   stroke-width: 2.1;
   stroke-linecap: round;
   stroke-linejoin: round;
   transition: stroke 0.6s ease-out, filter 0.6s ease-out, opacity 0.6s ease-out;
   opacity: 1;
}
#habilidades .skills3-root.is-on .skills3-ico-stroke {
   stroke: rgba(var(--warm), 0.92);
   filter: drop-shadow(0 0 10px rgba(var(--warm), 0.15));
   opacity: 1;
}
#habilidades .skills3-root.is-on .skills3-icon {
   background: rgba(var(--warm), 0.08);
   box-shadow: inset 0 0 0 1px rgba(var(--warm), 0.2);
}

/* Title block */
#habilidades .skills3-title-block {
   display: flex;
   flex-direction: column;
}

/* Title: OFF = dim, ON = bright */
#habilidades .skills3-title {
   display: inline-block;
   font-size: 1.06rem;
   font-weight: 800;
   color: rgba(240, 168, 48, 0.35);
   letter-spacing: 0.2px;
   position: relative;
   padding-bottom: 0.45rem;
   transition: color 0.6s ease-out;
}
#habilidades .skills3-title::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0.14rem;
   width: 100%;
   height: 2px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.1);
   opacity: 0.5;
   transition: background 0.6s ease-out, opacity 0.6s ease-out;
}
#habilidades .skills3-root.is-on .skills3-title {
   color: rgba(240, 168, 48, 0.95);
}
#habilidades .skills3-root.is-on .skills3-title::after {
   background: rgba(var(--warm), 0.5);
   opacity: 0.8;
}

/* ===== Body ===== */
#habilidades .skills3-body {
   display: grid;
   gap: 0.75rem;
}

/* Items list: OFF = collapsed, ON = expanded */
#habilidades .skills3-items {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   gap: 0.6rem;

   max-height: 0;
   opacity: 0;
   overflow: hidden;
   pointer-events: none;

   transition:
      max-height 0.6s ease-out,
      opacity 0.4s ease-out;
}
#habilidades .skills3-root.is-on .skills3-items {
   max-height: 420px;
   opacity: 1;
   pointer-events: auto;
}
/* OFF faster collapse */
#habilidades .skills3-root.is-off .skills3-items {
   transition:
      max-height 0.4s ease,
      opacity 0.25s ease;
}

/* Individual items: staggered reveal */
#habilidades .skills3-item {
   position: relative;
   padding-left: 1.2rem;
   font-size: 0.95rem;
   line-height: 1.28rem;
   color: rgba(240, 255, 252, 0.78);

   opacity: 0;
   transform: translateY(8px);
   transition:
      opacity 0.35s ease-out,
      transform 0.35s ease-out,
      color 0.6s ease-out,
      text-shadow 0.6s ease-out;
   transition-delay: 0s;
}
#habilidades .skills3-item::before {
   content: "•";
   position: absolute;
   left: 0;
   top: 0.02rem;
   width: 1rem;
   color: rgba(255, 255, 255, 0.2);
   transition: color 0.6s ease-out, text-shadow 0.6s ease-out;
}

/* Items ON: staggered fade-in + slide-up */
#habilidades .skills3-root.is-on .skills3-item {
   opacity: 1;
   transform: translateY(0);
   transition-delay: calc(var(--i, 0) * 0.1s + 0.3s);
   color: rgba(240, 255, 252, 0.88);
   text-shadow: 0 0 10px rgba(var(--warm), 0.1);
}
#habilidades .skills3-root.is-on .skills3-item::before {
   color: rgba(var(--warm), 0.92);
   text-shadow: 0 0 12px rgba(var(--warm), 0.2);
}

/* Items OFF: no stagger on collapse */
#habilidades .skills3-root.is-off .skills3-item {
   transition-delay: 0s;
   transition-duration: 0.2s;
}

@media (prefers-reduced-motion: reduce) {
   #habilidades .skills3-items,
   #habilidades .skills3-item {
      transition: none !important;
   }
}

/* ===== Bulb / Farol ===== */
/* Mobile (base): más abajo, menos translateY negativo para no tapar el switch */
#habilidades .skills3-bulb {
   position: absolute;
   top: 4rem;
   right: -1.5rem;
   width: calc(var(--bulb) * 0.7);
   height: calc(var(--bulb) * 1.18);
   transform: translateY(-50px) scale(1.3);
   transform-origin: top right;
   pointer-events: auto;
   cursor: pointer;
   z-index: 4;
}

/* Tablet/Desktop (768px+): posición y transformación originales */
@media (min-width: 768px) {
   #habilidades .skills3-bulb {
      top: 2rem;
      transform: translateY(calc(-0.59 * var(--bulb))) scale(1.3);
   }
}
/* Glow behind farol */
#habilidades .skills3-bulb::before {
   content: "";
   position: absolute;
   inset: -20%;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(255, 200, 100, 0.3) 0%, transparent 70%);
   filter: blur(15px);
   opacity: 0;
   z-index: -1;
   pointer-events: none;
   transition: opacity 0.3s ease-out;
}
#habilidades .skills3-root.is-off .skills3-bulb::before {
   opacity: 0;
}
#habilidades .skills3-root.is-on .skills3-bulb::before {
   opacity: 1;
}
#habilidades .skills3-bulb svg {
   width: 100%;
   height: 100%;
   display: block;
   transform-origin: 85% 30%;
   transition: none;
}

/* Bulb OFF: tenue */
#habilidades .skills3-root.is-off .skills3-bulb svg {
   opacity: 0.63;
   filter: brightness(0.78);
   transition: opacity 0s, filter 0s;
}

/* Bulb ON: restaurar opacidad + drop-shadow glow */
#habilidades .skills3-root.is-on .skills3-bulb svg {
   opacity: 1;
   filter: none !important;
   transition: opacity 0.5s ease, filter 0.5s ease;
}

/* ── Cristales del farol ── */
#habilidades .skills3-glass {
   transition: fill 0.6s ease;
}
#habilidades .skills3-root.is-off .skills3-glass {
   fill: rgba(100, 140, 130, 0.15);
}
#habilidades .skills3-root.is-on .skills3-glass {
   fill: rgba(245, 210, 85, 0.45);
}

/* ── Luz interior (glow elipses) ── */
#habilidades .skills3-filament {
   transition: opacity 0.3s ease;
}
#habilidades .skills3-root.is-off .skills3-filament {
   opacity: 0;
}
#habilidades .skills3-root.is-on .skills3-filament {
   opacity: 1;
   transition: opacity 0.6s ease 0.2s;
}

/* Bulb ON animations */
#habilidades .skills3-root.is-on .skills3-filament {
   animation: skills3Flicker 420ms ease-out 1;
}

@keyframes skills3BulbOn {
   0% {
      transform: scale(0.985) rotate(0deg);
      filter: brightness(0.95);
   }
   18% {
      transform: scale(1.04) rotate(-3deg);
      filter: brightness(1.03);
   }
   38% { transform: scale(1) rotate(2deg); }
   60% { transform: scale(1) rotate(-1deg); }
   80% { transform: scale(1) rotate(0.6deg); }
   100% {
      transform: scale(1) rotate(0deg);
      filter: none;
   }
}
@keyframes skills3Glow {
   0% { opacity: 0; transform: scale(0.88); }
   35% { opacity: 1; transform: scale(1.03); }
   100% { opacity: 1; transform: scale(1); }
}
@keyframes skills3Flicker {
   0% { stroke-opacity: 0.15; }
   12% { stroke-opacity: 1; }
   22% { stroke-opacity: 0.35; }
   34% { stroke-opacity: 1; }
   48% { stroke-opacity: 0.55; }
   64% { stroke-opacity: 1; }
   100% { stroke-opacity: 1; }
}

/* Bulb intro animation (only OFF, on scroll reveal) */
#habilidades .skills3-root.is-off .skills3-bulb.is-revealed svg {
   animation: skills3BulbIntro 820ms cubic-bezier(0.2, 0.9, 0.2, 1) 1;
}
@keyframes skills3BulbIntro {
   0% {
      transform: scale(0.985) rotate(0deg);
      filter: brightness(0.95);
   }
   22% {
      transform: scale(1.02) rotate(-2.6deg);
      filter: brightness(1.02);
   }
   46% { transform: scale(1) rotate(1.6deg); }
   70% { transform: scale(1) rotate(-0.8deg); }
   100% {
      transform: scale(1) rotate(0deg);
      filter: none;
   }
}

/* ══════════════════════════════════════
   Stack Técnico — Bento integrado en skills3-root
   ══════════════════════════════════════ */

/* ── Estado OFF ── */
#habilidades .skills3-root.is-off .skills-bento__card {
   background: rgba(255, 255, 255, 0.03);
   border-color: rgba(255, 255, 255, 0.08);
}

#habilidades .skills3-root.is-off .skills-bento__icons {
   max-height: 0;
   opacity: 0;
   overflow: hidden;
   transition: max-height 0.5s ease, opacity 0.3s ease;
}

#habilidades .skills3-root.is-off .skills-bento__title {
   color: rgba(240, 168, 48, 0.35);
   transition: color 0.6s ease-out;
}

#habilidades .skills3-root.is-off .skills-grid-section .section-title {
   color: rgba(200, 210, 220, 0.38);
   transition: color 0.4s ease;
}

/* ── Estado ON ── */
#habilidades .skills3-root.is-on .skills-bento__card {
   background: rgba(var(--warm), 0.06);
   border-color: rgba(var(--warm), 0.3);
   box-shadow:
      0 12px 40px rgba(0, 0, 0, 0.4),
      0 0 0 1px rgba(var(--warm), 0.08),
      0 0 28px rgba(var(--warm), 0.05);
}

#habilidades .skills3-root.is-on .skills-bento__icons {
   max-height: 300px;
   opacity: 1;
   overflow: visible;
   transition: max-height 0.6s ease 0.3s, opacity 0.4s ease 0.4s;
}

#habilidades .skills3-root.is-on .skills-bento__title {
   color: rgba(240, 168, 48, 0.95);
   transition: color 0.6s ease-out;
}

#habilidades .skills3-root.is-on .skills-bento__title::after {
   background: rgba(var(--warm), 0.5);
   opacity: 0.8;
}

#habilidades .skills3-root.is-on .skills-grid-section .section-title {
   color: var(--text-header, #E6F1FF);
   transition: color 0.4s ease 0.2s;
}

/* ── Bento card: sheen overlay (oculto por defecto) ── */
#habilidades .skills-bento__card::after {
   content: "";
   position: absolute;
   inset: -1px;
   pointer-events: none;
   opacity: 0;
   transform: translateY(10px);
   transition: opacity 220ms ease, transform 220ms ease;
   background:
      radial-gradient(520px 260px at 85% 15%, rgba(var(--cyan), 0.10), transparent 60%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
   z-index: 0;
}

/* Contenido bento por encima del sheen */
#habilidades .skills-bento__card > * {
   position: relative;
   z-index: 1;
}

/* ── Hover bento — base siempre activo (igual que skills3-card:hover) ── */
@media (hover: hover) and (pointer: fine) {
   #habilidades .skills-bento__card:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 255, 255, 0.15);
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
   }
   #habilidades .skills-bento__card:hover::after {
      opacity: 0.35;
      transform: translateY(0);
   }
}

/* ── Sheen OFF: dorado tenue ── */
@media (hover: hover) and (pointer: fine) {
   #habilidades .skills3-root.is-off .skills-bento__card::after {
      background:
         radial-gradient(520px 260px at 85% 15%, rgba(var(--warm), 0.06), transparent 60%),
         linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.00));
   }
}

/* ── Hover bento ON — sobreescribe con warm (igual que skills3-root.is-on .skills3-card:hover) ── */
@media (hover: hover) and (pointer: fine) {
   #habilidades .skills3-root.is-on .skills-bento__card::after {
      background:
         radial-gradient(520px 260px at 85% 15%, rgba(var(--warm), 0.12), transparent 60%),
         linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
   }
   #habilidades .skills3-root.is-on .skills-bento__card:hover {
      transform: translateY(-6px);
      border-color: rgba(var(--warm), 0.4);
      box-shadow:
         0 18px 56px rgba(0, 0, 0, 0.5),
         0 0 0 1px rgba(var(--warm), 0.14),
         0 0 34px rgba(var(--warm), 0.08);
      filter: brightness(1.03);
   }
   #habilidades .skills3-root.is-on .skills-bento__card:hover::after {
      opacity: 0.9;
      transform: translateY(0);
   }
}

/* ── z-index: glow ::after no tapa el contenido ── */
#habilidades .skills3-root::after {
   z-index: 0;
}

.skills-grid-section {
   position: relative;
   z-index: 2;
}