/* our approach */
          .our-approach {

            position: relative;

            background: #041021;

            isolation: isolate;

        }

        /* LEFT BLUE LIGHT */
        .left-glow {
            position: absolute;
            left: -300px;
            top: 50%;
            transform: translateY(-50%);
            width: 900px;
            height: 900px;
            border-radius: 50%;
            background: radial-gradient(circle,
                    rgba(65, 101, 183, .85) 0%,
                    rgba(65, 101, 183, .55) 15%,
                    rgba(65, 101, 183, .28) 35%,
                    rgba(65, 101, 183, .12) 55%,
                    transparent 78%);
            filter: blur(40px);
            pointer-events: none;
            z-index: 0;
        }

        /* RIGHT ORANGE LIGHT */
        .right-glow {
            position: absolute;
            right: -300px;
            top: 50%;
            transform: translateY(-50%);
            width: 900px;
            height: 900px;
            border-radius: 50%;
            background: radial-gradient(circle,
                    rgba(228, 77, 38, .85) 0%,
                    rgba(228, 77, 38, .55) 15%,
                    rgba(228, 77, 38, .28) 35%,
                    rgba(228, 77, 38, .12) 55%,
                    transparent 78%);
            filter: blur(40px);
            pointer-events: none;
            z-index: 0;
        }




        /*
      SECTION TITLE */

        .section-title {

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 18px;

            margin-bottom: 30px;

        }

        .section-title span {

            width: 95px;

            height: 2px;

            background: linear-gradient(90deg,
                    transparent,
                    #E44D26,
                    transparent);

            border-radius: 50px;

            position: relative;

        }

        /* line glow */

        .section-title span::after {

            content: "";

            position: absolute;

            inset: -2px;

            background: #E44D26;

            filter: blur(8px);

            opacity: .35;

            z-index: -1;

        }

        .section-title h6 {

            font-size: 15px;

            font-weight: 700;

            letter-spacing: 4px;

            color: #E44D26;

            text-transform: uppercase;

        }


        .section-title span {

            overflow: hidden;

        }

        .section-title span::before {

            content: "";

            position: absolute;

            width: 40px;

            height: 100%;

            background: linear-gradient(90deg,
                    transparent,
                    white,
                    transparent);

            left: -50px;

            animation: titleShine 4s linear infinite;

            opacity: .9;

        }

        @keyframes titleShine {

            0% {

                left: -60px;

            }

            100% {

                left: 120px;

            }

        }


        /* ALL CARD SAME HEIGHT */

        .grid {
            align-items: stretch;
        }

        .approach-card {

            display: flex;

            flex-direction: column;

            height: 100%;

            min-height: 340px;

        }


        .approach-card {
            margin-top: 0;
            margin-left: 0;
        }





        /* --------------------------- */
        .approach-card {

            position: relative;

            padding: 40px;

            border-radius: 24px;

            background: linear-gradient(180deg,
                    rgba(255, 255, 255, .07),
                    rgba(255, 255, 255, .03));

            backdrop-filter: blur(22px);

            border: 1px solid rgba(255, 255, 255, .12);

            backdrop-filter: blur(18px);

            overflow: hidden;

            transition: .4s;

        }

        /*RUNNING BORDER*/



        .approach-card::after {

            content: "";

            position: absolute;

            inset: -2px;

            border-radius: 26px;

            padding: 2px;

            background: conic-gradient(from 0deg,

                    transparent 0deg,

                    transparent 250deg,

                    #E44D26 290deg,

                    #ffffff 310deg,

                    #4165B7 330deg,

                    transparent 360deg);

            opacity: 0;

            transition: .4s;

            animation: borderRotate 3s linear infinite;

            -webkit-mask:

                linear-gradient(#000 0 0) content-box,

                linear-gradient(#000 0 0);

            -webkit-mask-composite: xor;

            mask-composite: exclude;

            pointer-events: none;

        }

        .approach-card:hover::after {

            opacity: 1;

        }

        @keyframes borderRotate {

            from {

                transform: rotate(0deg);

            }

            to {

                transform: rotate(360deg);

            }

        }


        .approach-card::before {

            content: "";

            position: absolute;

            top: -140%;

            left: -60%;

            width: 55%;

            height: 320%;

            background: linear-gradient(90deg,

                    transparent,

                    rgba(255, 255, 255, .18),

                    transparent);

            transform: rotate(25deg);

            transition: 1s;

        }

        .approach-card:hover::before {

            left: 160%;

        }

        .approach-card:hover {

            transform: translateY(-12px);

            box-shadow:

                0 15px 40px rgba(0, 0, 0, .35),

                0 0 30px rgba(228, 77, 38, .12);

        }



        .number {
            position: absolute;
            right: 25px;
            top: 15px;
            width: 64px;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            font-weight: 800;
            color: rgba(228, 77, 38, .6);
            border-radius: 50%;
            border: 2px solid rgba(228, 77, 38, .25);
            background: rgba(255, 255, 255, .03);
            transition: .4s;
            z-index: 2;
        }



        .approach-card:hover .number {
            color: #fff;
            border-color: #E44D26;
            background: rgba(228, 77, 38, .12);
            animation: numberGlowPulse 1.6s ease-in-out infinite;
        }

        @keyframes numberGlowPulse {

            0%,
            100% {
                box-shadow: 0 0 8px rgba(228, 77, 38, .4), 0 0 0 rgba(65, 101, 183, 0);
                border-color: #E44D26;
            }

            50% {
                box-shadow: 0 0 20px rgba(228, 77, 38, .8), 0 0 30px rgba(65, 101, 183, .4);
                border-color: #4165B7;
            }
        }

        .icon {

            font-size: 28px;

            color: #E44D26;

            margin-bottom: 25px;

        }

        .approach-card h3 {

            font-size: 24px;

            font-weight: 700;

            margin-bottom: 15px;

        }

        .approach-card p {

            color: #cbd5e1;

            line-height: 1.9;

        }

        .line {
            margin-top: 35px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .line span {
            position: relative;
            flex: 1;
            height: 2px;
            background: #334155;
            border-radius: 2px;
            overflow: visible;
            transition: background .4s;
        }

        /* the comet head */
        .line span::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: radial-gradient(circle, #ffffff 0%, #E44D26 60%, transparent 100%);
            box-shadow: 0 0 8px 2px #E44D26, 0 0 16px 4px rgba(228, 77, 38, .6);
            transform: translate(-50%, -50%) scale(0);
            opacity: 0;
            pointer-events: none;
        }

        /* the trail fill, masked to follow the head */
        .line span::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 2px;
            background: linear-gradient(90deg, transparent, #4165B7, #E44D26);
            width: 0%;
            transition: none;
        }

        .approach-card:hover .line span::before {
            animation: cometHead 1.1s ease-out forwards;
        }

        .approach-card:hover .line span::after {
            animation: cometTrail 1.1s ease-out forwards;
        }

        @keyframes cometHead {
            0% {
                left: 0%;
                transform: translate(-50%, -50%) scale(0);
                opacity: 0;
            }

            15% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }

            85% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }

            95% {
                transform: translate(-50%, -50%) scale(1.8);
                box-shadow: 0 0 16px 6px #ffffff, 0 0 28px 10px #E44D26;
            }

            100% {
                left: 100%;
                transform: translate(-50%, -50%) scale(0);
                opacity: 0;
            }
        }

        @keyframes cometTrail {
            0% {
                width: 0%;
            }

            90% {
                width: 100%;
            }

            100% {
                width: 100%;
            }
        }

        .approach-card:hover .line i {
            color: #E44D26;
            transform: translateX(10px);
            text-shadow: 0 0 10px rgba(228, 77, 38, .8);
            transition: .4s;
        }

        /* Remove zigzag offsets so all cards align in clean rows */


        .flex.justify-center.mt-10 .approach-card {
            width: 100%;
        }

        @media (min-width: 768px) {
            .flex.justify-center.mt-10 .approach-card {
                width: calc(50% - 16px);
            }
        }