.jpm-faith-section,
    .jpm-faith-section * {
      box-sizing: border-box;
    }

    .jpm-faith-section {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      padding: 100px 0;
      color: #ffffff;
      font-family: "Urbanist", "Noto Sans Tamil", sans-serif;
      background:
        radial-gradient(circle at 8% 15%, rgba(0, 115, 255, 0.23), transparent 28%),
        radial-gradient(circle at 92% 85%, rgba(255, 25, 65, 0.2), transparent 30%),
        linear-gradient(125deg, #020713 0%, #071a3b 42%, #1b0615 73%, #030711 100%);
    }

    .jpm-faith-section::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -3;
      opacity: 0.3;
      background-image:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
      background-size: 38px 38px;
      mask-image: linear-gradient(
        to bottom,
        transparent,
        #000 16%,
        #000 84%,
        transparent
      );
    }

    .jpm-faith-section::after {
      content: "";
      position: absolute;
      left: 8%;
      right: 8%;
      bottom: -110px;
      z-index: -2;
      height: 180px;
      border-radius: 50%;
      background: linear-gradient(
        90deg,
        rgba(0, 112, 255, 0.22),
        rgba(255, 215, 80, 0.08),
        rgba(255, 29, 76, 0.2)
      );
      filter: blur(45px);
    }

    .jpm-static-orb {
      position: absolute;
      z-index: -2;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(20px);
    }

    .jpm-static-orb-blue {
      top: -115px;
      left: 5%;
      width: 250px;
      height: 250px;
      background: rgba(0, 119, 255, 0.15);
      box-shadow: 0 0 90px rgba(0, 119, 255, 0.45);
    }

    .jpm-static-orb-red {
      right: 4%;
      bottom: -130px;
      width: 255px;
      height: 255px;
      background: rgba(255, 22, 67, 0.13);
      box-shadow: 0 0 90px rgba(255, 22, 67, 0.4);
    }

    .jpm-heading-area {
      margin-bottom: 25px;
      text-align: center;
    }

    .jpm-small-label {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 9px;
      padding: 7px 15px;
      border: 1px solid rgba(255, 255, 255, 0.17);
      border-radius: 50px;
      color: #eef6ff;
      font-size: 0.74rem;
      font-weight: 800;
      letter-spacing: 1.7px;
      text-transform: uppercase;
      background: linear-gradient(
        135deg,
        rgba(0, 112, 255, 0.25),
        rgba(255, 30, 70, 0.21)
      );
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 8px 22px rgba(0, 0, 0, 0.28);
      backdrop-filter: blur(12px);
    }

    .jpm-small-label i {
      color: #ffca43;
      text-shadow: 0 0 12px rgba(255, 202, 67, 0.9);
    }

    .jpm-main-title {
      margin: 0 0 14px;
      color: transparent;
      font-family: "Archivo Black", sans-serif;
      font-size: clamp(2rem, 4vw, 3.15rem);
      font-weight: 400;
      line-height: 1.08;
      letter-spacing: 1px;
      background: linear-gradient(
        90deg,
        #ffffff 8%,
        #80c8ff 42%,
        #ffd66b 68%,
        #ff8ca5 92%
      );
      background-clip: text;
      -webkit-background-clip: text;
      filter: drop-shadow(0 5px 15px rgba(0, 110, 255, 0.2));
      text-transform: uppercase;
    }

    .jpm-intro-neon {
      position: relative;
      margin: 0 auto;
      padding: 2px;
      border-radius: 6px 6px 6px 6px;
      background: linear-gradient(
        90deg,
        #00a8ff,
        #ffffff,
        #ffd458,
        #ff2955,
        #00a8ff
      );
      background-size: 300% 100%;
 
    }

    .jpm-intro-box {
      padding: 13px 22px;
      border-radius: 5px 5px 5px 5px;
      background: linear-gradient(
        135deg,
        rgba(7, 47, 100, 0.97),
        rgba(27, 6, 37, 0.97)
      );
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        inset 0 -1px 0 rgba(255,255,255,0.05);
    }

    .jpm-intro-box p {
      margin: 0;
      color: rgba(245, 248, 255, 0.94);
      font-family: "Noto Sans Tamil", sans-serif;
      font-size: 1.3rem;
      font-weight: 500;
      line-height: 1.75;
    }

    .jpm-card-column {
      display: flex;
    }

    .jpm-card-wrapper {
      --neon-color: #168eff;
      --neon-rgb: 22, 142, 255;
      --card-top: #073b82;
      --card-middle: #031a41;
      --card-bottom: #020a1d;

      position: relative;
      display: flex;
      width: 100%;
      height: 100%;
      padding: 2px;
      border-radius: 7px 7px 7px 7px;
      background: var(--neon-color);
      box-shadow:
        0 0 7px rgba(var(--neon-rgb), 0.9),
        0 0 16px rgba(var(--neon-rgb), 0.62),
        0 0 30px rgba(var(--neon-rgb), 0.28);
      animation: jpmNeonBorderPulse 2.8s ease-in-out infinite;
    }

    .jpm-card-wrapper::before {
      content: "";
      position: absolute;
      inset: -5px;
      z-index: -1;
      border: 1px solid rgba(var(--neon-rgb), 0.62);
      border-radius: 10px 10px 10px 10px;
      box-shadow:
        0 0 9px rgba(var(--neon-rgb), 0.75),
        0 0 24px rgba(var(--neon-rgb), 0.35);
      animation: jpmOuterNeonPulse 2.8s ease-in-out infinite;
    }

    .jpm-card-gold {
      --neon-color: #ffd35a;
      --neon-rgb: 255, 211, 90;
      --card-top: #8c6508;
      --card-middle: #493304;
      --card-bottom: #1b1101;
    }

    .jpm-card-blue {
      --neon-color: #1b9cff;
      --neon-rgb: 27, 156, 255;
      --card-top: #07509d;
      --card-middle: #06275a;
      --card-bottom: #020b22;
      animation-delay: 0.35s;
    }

    .jpm-card-blue::before {
      animation-delay: 0.35s;
    }

    .jpm-card-red {
      --neon-color: #ff345c;
      --neon-rgb: 255, 52, 92;
      --card-top: #921833;
      --card-middle: #53101f;
      --card-bottom: #28040e;
      animation-delay: 0.7s;
    }

    .jpm-card-red::before {
      animation-delay: 0.7s;
    }

    .jpm-card-silver {
      --neon-color: #dfe9f3;
      --neon-rgb: 223, 233, 243;
      --card-top: #6f7d8b;
      --card-middle: #384550;
      --card-bottom: #111920;
      animation-delay: 1.05s;
    }

    .jpm-card-silver::before {
      animation-delay: 1.05s;
    }

    .jpm-resource-card {
      position: relative;
      display: flex;
      flex: 1;
      flex-direction: column;
      min-height: 250px;
      overflow: hidden;
      padding: 22px 20px 18px;
      border-radius: 5px 5px 5px 5px;
      background:
        radial-gradient(
          circle at 88% 12%,
          rgba(var(--neon-rgb), 0.25),
          transparent 31%
        ),
        linear-gradient(
          145deg,
          var(--card-top) 0%,
          var(--card-middle) 45%,
          var(--card-bottom) 100%
        );
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.28),
        inset 0 -1px 0 rgba(255,255,255,0.05),
        0 18px 38px rgba(0,0,0,0.4);
    }

    .jpm-resource-card::before {
      content: "";
      position: absolute;
      top: -66px;
      right: -44px;
      width: 150px;
      height: 150px;
      border: 1px solid rgba(var(--neon-rgb), 0.4);
      border-radius: 30% 70% 62% 38% / 42% 35% 65% 58%;
      background: rgba(var(--neon-rgb), 0.08);
      box-shadow: inset 0 0 25px rgba(var(--neon-rgb), 0.1);
      transform: rotate(24deg);
    }

    .jpm-resource-card::after {
      content: "";
      position: absolute;
      right: -28px;
      bottom: -42px;
      width: 120px;
      height: 120px;
      border: 1px solid rgba(var(--neon-rgb), 0.28);
      border-radius: 50%;
      box-shadow:
        inset 0 0 0 14px transparent,
        inset 0 0 0 15px rgba(var(--neon-rgb), 0.18),
        inset 0 0 0 30px transparent,
        inset 0 0 0 31px rgba(var(--neon-rgb), 0.12);
    }

    .jpm-card-header {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 15px;
    }

    .jpm-icon-box {
      display: grid;
      place-items: center;
      width: 56px;
      height: 56px;
      flex-shrink: 0;
      border: 1px solid rgba(255,255,255,0.34);
      border-radius: 6px 6px 6px 6px;
      color: #ffffff;
      font-size: 1.32rem;
      background: linear-gradient(
        145deg,
        rgba(255,255,255,0.26),
        rgba(var(--neon-rgb),0.9)
      );
      box-shadow:
        0 10px 24px rgba(var(--neon-rgb),0.3),
        inset 0 1px 1px rgba(255,255,255,0.42);
    }

    .jpm-card-number {
      color: rgba(255,255,255,0.12);
      font-family: "Anton", sans-serif;
      font-size: 3.1rem;
      line-height: 1;
      text-shadow: 0 0 16px rgba(var(--neon-rgb),0.45);
    }

    .jpm-card-content {
      position: relative;
      z-index: 2;
      display: flex;
      flex: 1;
      flex-direction: column;
    }

    .jpm-card-content h3 {
      margin: 0 0 8px;
      color: #ffffff;
      font-size: 1.9rem;
      font-weight: 500;
      letter-spacing: 0.2px;
    }

    .jpm-card-content p {
      margin: 0 0 16px;
      color: rgba(242, 246, 255, 0.84);
      font-family: "Noto Sans Tamil", "Urbanist", sans-serif;
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.65;
    }

    .jpm-button-wrap {
      margin-top: auto;
      padding-top: 5px;
    }

    .jpm-card-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-width: 142px;
      min-height: 38px;
      padding: 9px 14px;
      border: 1px solid rgba(255,255,255,0.3);
      border-radius: 4px 4px 4px 4px;
      color: #ffffff;
      font-size: 0.77rem;
      font-weight: 800;
      letter-spacing: 0.3px;
      text-decoration: none;
      background: linear-gradient(
        135deg,
        rgba(255,255,255,0.2),
        rgba(var(--neon-rgb),0.92)
      );
      box-shadow:
        0 8px 20px rgba(var(--neon-rgb),0.28),
        inset 0 1px 0 rgba(255,255,255,0.4);
      transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
    }

    .jpm-card-button:hover {
      color: #ffffff;
      transform: translateY(-2px);
      box-shadow:
        0 11px 25px rgba(var(--neon-rgb),0.4),
        0 0 15px rgba(var(--neon-rgb),0.3);
    }

    .jpm-card-button i {
      font-size: 0.7rem;
    }

    @keyframes jpmNeonBorderPulse {
      0%,
      100% {
        box-shadow:
          0 0 6px rgba(var(--neon-rgb),0.72),
          0 0 13px rgba(var(--neon-rgb),0.48),
          0 0 25px rgba(var(--neon-rgb),0.2);
      }

      50% {
        box-shadow:
          0 0 9px rgba(var(--neon-rgb),1),
          0 0 22px rgba(var(--neon-rgb),0.8),
          0 0 42px rgba(var(--neon-rgb),0.42);
      }
    }

    @keyframes jpmOuterNeonPulse {
      0%,
      100% {
        opacity: 0.42;
        box-shadow:
          0 0 7px rgba(var(--neon-rgb),0.55),
          0 0 18px rgba(var(--neon-rgb),0.2);
      }

      50% {
        opacity: 0.9;
        box-shadow:
          0 0 12px rgba(var(--neon-rgb),0.9),
          0 0 29px rgba(var(--neon-rgb),0.45);
      }
    }

    @keyframes jpmIntroNeonBorder {
      0% {
        background-position: 0% 50%;
        box-shadow:
          0 0 9px rgba(0,156,255,0.5),
          0 0 22px rgba(255,38,83,0.22);
      }

      50% {
        box-shadow:
          0 0 16px rgba(255,211,90,0.62),
          0 0 30px rgba(255,38,83,0.38);
      }

      100% {
        background-position: 300% 50%;
        box-shadow:
          0 0 9px rgba(0,156,255,0.5),
          0 0 22px rgba(255,38,83,0.22);
      }
    }

    @media (max-width: 1199.98px) {
      .jpm-resource-card {
        min-height: 235px;
      }
    }

    @media (max-width: 991.98px) {
      .jpm-faith-section {
        padding: 42px 0;
      }

      .jpm-resource-card {
        min-height: 225px;
      }
    }

    @media (max-width: 575.98px) {
      .jpm-faith-section {
        padding: 37px 0;
      }

      .jpm-heading-area {
        margin-bottom: 22px;
      }

      .jpm-main-title {
        font-size: 2rem;
      }

      .jpm-intro-box {
        padding: 12px 15px;
      }

      .jpm-intro-box p {
        font-size: 0.83rem;
      }

      .jpm-resource-card {
        min-height: 240px;
        padding: 20px 17px 18px;
      }

      .jpm-icon-box {
        width: 52px;
        height: 52px;
      }

      .jpm-card-button {
        width: 100%;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .jpm-card-wrapper,
      .jpm-card-wrapper::before,
      .jpm-intro-neon {
        animation: none !important;
      }
    }