/* ==================================================
           VISION & MISSION SECTION
           All styles are scoped to prevent conflicts
        ================================================== */

        .jpm-vision-mission {
            --jpm-navy: #081d39;
            --jpm-blue: #123d6a;
            --jpm-gold: #e4b541;
            --jpm-light-gold: #fff1bd;
            --jpm-cream: #fffaf0;
            --jpm-text: #25344a;
            --jpm-white: #ffffff;

            position: relative;
            overflow: hidden;
            padding: 100px 0;
            font-family: "Noto Sans Tamil", sans-serif;
            color: var(--jpm-text);
            background:
                radial-gradient(circle at 10% 15%,
                rgba(228, 181, 65, 0.16),
                transparent 25%),

                radial-gradient(circle at 90% 80%,
                rgba(44, 116, 179, 0.14),
                transparent 28%),

                linear-gradient(135deg,
                #fffaf0 0%,
                #f5faff 45%,
                #fff8e8 100%);
        }

        .jpm-vision-mission *,
        .jpm-vision-mission *::before,
        .jpm-vision-mission *::after {
            box-sizing: border-box;
        }

        /* Decorative background circles */

        .jpm-vm-orb {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            filter: blur(2px);
            animation: jpmVmFloat 9s ease-in-out infinite;
        }

        .jpm-vm-orb-one {
            width: 240px;
            height: 240px;
            top: -80px;
            left: -70px;
            border: 1px solid rgba(228, 181, 65, 0.28);
            background: rgba(255, 255, 255, 0.2);
        }

        .jpm-vm-orb-two {
            width: 320px;
            height: 320px;
            right: -150px;
            bottom: -130px;
            border: 1px solid rgba(18, 61, 106, 0.18);
            background: rgba(255, 255, 255, 0.15);
            animation-delay: -3s;
        }

        .jpm-vm-orb-three {
            width: 100px;
            height: 100px;
            top: 45%;
            left: 4%;
            background: rgba(228, 181, 65, 0.08);
            animation-delay: -5s;
        }

        @keyframes jpmVmFloat {
            0%,
            100% {
                transform: translateY(0) rotate(0deg);
            }

            50% {
                transform: translateY(-22px) rotate(12deg);
            }
        }

        /* Small particles */

        .jpm-vm-particle {
            position: absolute;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--jpm-gold);
            opacity: 0.35;
            animation: jpmVmParticle 6s ease-in-out infinite;
        }

        .jpm-vm-particle.p1 {
            top: 18%;
            right: 13%;
        }

        .jpm-vm-particle.p2 {
            top: 60%;
            left: 8%;
            animation-delay: -2s;
        }

        .jpm-vm-particle.p3 {
            bottom: 13%;
            right: 28%;
            animation-delay: -4s;
        }

        @keyframes jpmVmParticle {
            0%,
            100% {
                transform: translateY(0) scale(1);
                opacity: 0.25;
            }

            50% {
                transform: translateY(-16px) scale(1.5);
                opacity: 0.7;
            }
        }

        .jpm-vm-container {
            position: relative;
            z-index: 2;
        }

        /* Section heading */

        .jpm-vm-heading {
            max-width: 850px;
            margin: 0 auto 55px;
            text-align: center;
        }

        .jpm-vm-small-title {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            margin-bottom: 16px;
            padding: 9px 18px;
            color: var(--jpm-blue);
            font-size: 0.88rem;
            font-weight: 800;
            letter-spacing: 1px;
            border: 1px solid rgba(228, 181, 65, 0.45);
            border-radius: 50px;
            background: rgba(255, 255, 255, 0.7);
            box-shadow:
                0 10px 30px rgba(18, 61, 106, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(12px);
        }

        .jpm-vm-small-title i {
            color: var(--jpm-gold);
        }

        .jpm-vm-main-title {
            margin-bottom: 18px;
            color: var(--jpm-navy);
            font-family: "Archivo Black", "Noto Sans Tamil", sans-serif;
            font-size: clamp(2rem, 4vw, 3.6rem);
            line-height: 1.25;
            letter-spacing: -1px;
        }

        .jpm-vm-main-title span {
            position: relative;
            color: var(--jpm-gold);
        }

        .jpm-vm-main-title span::after {
            content: "";
            position: absolute;
            left: 8%;
            right: 8%;
            bottom: -6px;
            height: 5px;
            border-radius: 50px;
            background: linear-gradient(
                90deg,
                transparent,
                var(--jpm-gold),
                transparent
            );
        }

        .jpm-vm-subtitle {
            max-width: 730px;
            margin: 0 auto;
            color: #596579;
            font-size: 1.03rem;
            line-height: 1.95;
        }

        /* Intro message box */

        .jpm-vm-intro-box {
            position: relative;
            overflow: hidden;
            margin-bottom: 50px;
            padding: 30px 35px;
            border: 1px solid rgba(228, 181, 65, 0.38);
            border-radius: 26px;
            background:
                linear-gradient(
                135deg,
                rgba(255, 255, 255, 0.92),
                rgba(255, 249, 227, 0.82)
                );
            box-shadow:
                0 22px 60px rgba(15, 44, 78, 0.11),
                inset 0 1px 0 #ffffff;
            backdrop-filter: blur(15px);
        }

        .jpm-vm-intro-box::before {
            content: "";
            position: absolute;
            top: -80px;
            right: -50px;
            width: 190px;
            height: 190px;
            border-radius: 50%;
            background: radial-gradient(
                circle,
                rgba(228, 181, 65, 0.22),
                transparent 67%
            );
        }

        .jpm-vm-intro-icon {
            display: flex;
            flex: 0 0 auto;
            align-items: center;
            justify-content: center;
            width: 68px;
            height: 68px;
            color: var(--jpm-white);
            font-size: 1.7rem;
            border-radius: 20px;
            background: linear-gradient(
                145deg,
                var(--jpm-gold),
                #b78313
            );
            box-shadow:
                0 15px 30px rgba(184, 130, 18, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
        }

        .jpm-vm-intro-content h3 {
            margin-bottom: 9px;
            color: var(--jpm-navy);
            font-size: 1.28rem;
            font-weight: 800;
        }

        .jpm-vm-intro-content p {
            margin: 0;
            color: #596579;
            font-size: 0.98rem;
            line-height: 1.9;
        }

        /* Vision and mission cards */

        .jpm-vm-card {
            position: relative;
            overflow: hidden;
            height: 100%;
            padding: 38px 34px 34px;
            border: 1px solid rgba(255, 255, 255, 0.65);
            border-radius: 30px;
            box-shadow:
                0 24px 65px rgba(13, 42, 76, 0.13),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
            transition:
                transform 0.45s ease,
                box-shadow 0.45s ease,
                border-color 0.45s ease;
        }

        .jpm-vm-card:hover {
            transform: translateY(-12px);
        }

        .jpm-vm-card-vision {
            background:
                linear-gradient(
                145deg,
                rgba(9, 34, 65, 0.98),
                rgba(21, 77, 124, 0.95)
                );
        }

        .jpm-vm-card-mission {
            background:
                linear-gradient(
                145deg,
                rgba(255, 255, 255, 0.98),
                rgba(255, 246, 214, 0.94)
                );
        }

        .jpm-vm-card-vision:hover {
            box-shadow:
                0 30px 80px rgba(8, 29, 57, 0.3),
                0 0 35px rgba(228, 181, 65, 0.15);
        }

        .jpm-vm-card-mission:hover {
            border-color: rgba(228, 181, 65, 0.65);
            box-shadow:
                0 30px 80px rgba(75, 55, 10, 0.18),
                0 0 35px rgba(228, 181, 65, 0.2);
        }

        .jpm-vm-card::before {
            content: "";
            position: absolute;
            width: 220px;
            height: 220px;
            top: -115px;
            right: -95px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.15);
        }

        .jpm-vm-card::after {
            content: "";
            position: absolute;
            width: 160px;
            height: 160px;
            right: -55px;
            bottom: -85px;
            border-radius: 50%;
            background: rgba(228, 181, 65, 0.12);
        }

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

        .jpm-vm-icon-wrap {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 82px;
            height: 82px;
            border-radius: 24px;
        }

        .jpm-vm-card-vision .jpm-vm-icon-wrap {
            color: var(--jpm-navy);
            background: linear-gradient(
                145deg,
                #ffda72,
                var(--jpm-gold)
            );
            box-shadow:
                0 17px 35px rgba(228, 181, 65, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.65);
        }

        .jpm-vm-card-mission .jpm-vm-icon-wrap {
            color: var(--jpm-white);
            background: linear-gradient(
                145deg,
                var(--jpm-blue),
                var(--jpm-navy)
            );
            box-shadow:
                0 17px 35px rgba(8, 29, 57, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
        }

        .jpm-vm-icon-wrap i {
            font-size: 2rem;
            transition: transform 0.45s ease;
        }

        .jpm-vm-card:hover .jpm-vm-icon-wrap i {
            transform: scale(1.12) rotate(-7deg);
        }

        .jpm-vm-number {
            font-family: "Archivo Black", sans-serif;
            font-size: 3.5rem;
            line-height: 1;
            opacity: 0.1;
        }

        .jpm-vm-card-vision .jpm-vm-number {
            color: var(--jpm-white);
        }

        .jpm-vm-card-mission .jpm-vm-number {
            color: var(--jpm-navy);
        }

        .jpm-vm-card-body {
            position: relative;
            z-index: 2;
        }

        .jpm-vm-card-tag {
            display: inline-block;
            margin-bottom: 12px;
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 1.4px;
            text-transform: uppercase;
        }

        .jpm-vm-card-vision .jpm-vm-card-tag {
            color: var(--jpm-light-gold);
        }

        .jpm-vm-card-mission .jpm-vm-card-tag {
            color: #a7740b;
        }

        .jpm-vm-card-title {
            margin-bottom: 17px;
            font-size: clamp(1.55rem, 3vw, 2.25rem);
            font-weight: 800;
            line-height: 1.35;
        }

        .jpm-vm-card-vision .jpm-vm-card-title {
            color: var(--jpm-white);
        }

        .jpm-vm-card-mission .jpm-vm-card-title {
            color: var(--jpm-navy);
        }

        .jpm-vm-card-text {
            margin-bottom: 26px;
            font-size: 0.98rem;
            line-height: 1.95;
        }

        .jpm-vm-card-vision .jpm-vm-card-text {
            color: rgba(255, 255, 255, 0.77);
        }

        .jpm-vm-card-mission .jpm-vm-card-text {
            color: #5b6677;
        }

        /* Feature points */

        .jpm-vm-feature-list {
            display: grid;
            gap: 13px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .jpm-vm-feature-list li {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 12px 14px;
            border-radius: 14px;
            font-size: 0.92rem;
            line-height: 1.65;
            transition:
                transform 0.3s ease,
                background 0.3s ease;
        }

        .jpm-vm-feature-list li:hover {
            transform: translateX(6px);
        }

        .jpm-vm-card-vision .jpm-vm-feature-list li {
            color: rgba(255, 255, 255, 0.9);
            background: rgba(255, 255, 255, 0.07);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .jpm-vm-card-mission .jpm-vm-feature-list li {
            color: #435166;
            background: rgba(255, 255, 255, 0.68);
            border: 1px solid rgba(228, 181, 65, 0.2);
        }

        .jpm-vm-feature-list i {
            flex: 0 0 auto;
            margin-top: 5px;
            color: var(--jpm-gold);
        }

        /* Verse box */

        .jpm-vm-verse {
            position: relative;
            overflow: hidden;
            margin-top: 55px;
            padding: 42px 40px;
            text-align: center;
            border: 1px solid rgba(228, 181, 65, 0.5);
            border-radius: 28px;
            background:
                linear-gradient(
                135deg,
                rgba(255, 255, 255, 0.94),
                rgba(255, 247, 218, 0.9)
                );
            box-shadow:
                0 22px 55px rgba(25, 55, 90, 0.1),
                inset 0 1px 0 #ffffff;
        }

        .jpm-vm-verse::before,
        .jpm-vm-verse::after {
            position: absolute;
            color: var(--jpm-gold);
            font-family: Georgia, serif;
            font-size: 8rem;
            line-height: 1;
            opacity: 0.09;
        }

        .jpm-vm-verse::before {
            content: "“";
            top: -20px;
            left: 25px;
        }

        .jpm-vm-verse::after {
            content: "”";
            right: 25px;
            bottom: -65px;
        }

        .jpm-vm-verse-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 58px;
            height: 58px;
            margin-bottom: 18px;
            color: var(--jpm-white);
            font-size: 1.35rem;
            border-radius: 50%;
            background: linear-gradient(
                145deg,
                var(--jpm-gold),
                #a8730c
            );
            box-shadow: 0 12px 25px rgba(167, 115, 12, 0.25);
        }

        .jpm-vm-verse-text {
            position: relative;
            z-index: 2;
            max-width: 880px;
            margin: 0 auto 14px;
            color: var(--jpm-navy);
            font-size: clamp(1.05rem, 2.4vw, 1.4rem);
            font-weight: 700;
            line-height: 1.9;
        }

        .jpm-vm-verse-reference {
            position: relative;
            z-index: 2;
            display: inline-block;
            color: #9a6b0d;
            font-size: 0.93rem;
            font-weight: 800;
        }

        /* Core values */

        .jpm-vm-values {
            margin-top: 60px;
        }

        .jpm-vm-values-heading {
            margin-bottom: 30px;
            text-align: center;
        }

        .jpm-vm-values-heading h3 {
            margin-bottom: 8px;
            color: var(--jpm-navy);
            font-size: clamp(1.5rem, 3vw, 2.15rem);
            font-weight: 800;
        }

        .jpm-vm-values-heading p {
            margin: 0;
            color: #697587;
        }

        .jpm-vm-value-item {
            height: 100%;
            padding: 27px 22px;
            text-align: center;
            border: 1px solid rgba(228, 181, 65, 0.28);
            border-radius: 22px;
            background: rgba(255, 255, 255, 0.72);
            box-shadow:
                0 15px 40px rgba(18, 61, 106, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(12px);
            transition:
                transform 0.4s ease,
                box-shadow 0.4s ease;
        }

        .jpm-vm-value-item:hover {
            transform: translateY(-8px);
            box-shadow:
                0 22px 50px rgba(18, 61, 106, 0.14),
                0 0 25px rgba(228, 181, 65, 0.12);
        }

        .jpm-vm-value-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 62px;
            height: 62px;
            margin-bottom: 17px;
            color: var(--jpm-white);
            font-size: 1.4rem;
            border-radius: 18px;
            background: linear-gradient(
                145deg,
                var(--jpm-blue),
                var(--jpm-navy)
            );
            box-shadow: 0 12px 27px rgba(8, 29, 57, 0.2);
            transition: transform 0.4s ease;
        }

        .jpm-vm-value-item:hover .jpm-vm-value-icon {
            transform: rotate(-8deg) scale(1.08);
        }

        .jpm-vm-value-item h4 {
            margin-bottom: 9px;
            color: var(--jpm-navy);
            font-size: 1.05rem;
            font-weight: 800;
        }

        .jpm-vm-value-item p {
            margin: 0;
            color: #697587;
            font-size: 0.88rem;
            line-height: 1.75;
        }

        /* Responsive styles */

        @media (max-width: 991.98px) {
            .jpm-vision-mission {
                padding: 80px 0;
            }

            .jpm-vm-heading {
                margin-bottom: 42px;
            }

            .jpm-vm-intro-box {
                padding: 26px;
            }

            .jpm-vm-card {
                padding: 32px 28px;
            }
        }

        @media (max-width: 767.98px) {
            .jpm-vision-mission {
                padding: 65px 0;
            }

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

            .jpm-vm-subtitle {
                font-size: 0.94rem;
            }

            .jpm-vm-intro-box {
                text-align: center;
            }

            .jpm-vm-intro-icon {
                margin: 0 auto 18px;
            }

            .jpm-vm-card {
                padding: 29px 23px;
                border-radius: 24px;
            }

            .jpm-vm-icon-wrap {
                width: 70px;
                height: 70px;
                border-radius: 20px;
            }

            .jpm-vm-number {
                font-size: 2.7rem;
            }

            .jpm-vm-verse {
                padding: 35px 22px;
            }
        }

        @media (max-width: 575.98px) {
            .jpm-vm-main-title {
                font-size: 1.8rem;
            }

            .jpm-vm-card-top {
                margin-bottom: 23px;
            }

            .jpm-vm-feature-list li {
                padding: 11px;
            }
        }

        /* Reduced motion accessibility */

        @media (prefers-reduced-motion: reduce) {
            .jpm-vision-mission *,
            .jpm-vision-mission *::before,
            .jpm-vision-mission *::after {
                scroll-behavior: auto !important;
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }