/* =========================================================
           ACTIVE MEMBERS WRAPPER
        ========================================================= */
        
        .active-members-wrapper{
            position:relative;
            overflow:hidden;
        
            width:100%;
        
            margin-top:35px;
        
            padding:10px 0;
        }
        
        .active-members-wrapper .active-members-grid{
            width:max-content;
        }
        
        .active-members-wrapper:hover .active-members-grid{
            animation-play-state:paused;
        }
        
        
        /* =========================================================
           FADE EDGES
        ========================================================= */
        
        .active-members-wrapper::before,
        .active-members-wrapper::after{
            content:"";
        
            position:absolute;
        
            top:0;
        
            width:120px;
            height:100%;
        
            z-index:5;
        
            pointer-events:none;
        }
        
        .active-members-wrapper::before{
            left:0;
        
            background:
            linear-gradient(
                to right,
                #ffffff 0%,
                rgba(255,255,255,0) 100%
            );
        }
        
        .active-members-wrapper::after{
            right:0;
        
            background:
            linear-gradient(
                to left,
                #ffffff 0%,
                rgba(255,255,255,0) 100%
            );
        }
        
        
        /* =========================================================
           SCROLL TRACK
        ========================================================= */
        
        .active-members-grid{
            display:flex;
        
            flex-wrap:nowrap;
        
            gap:24px;
        
            width:max-content;
        
            will-change:transform;
        
            animation:
            activeMembersScroll 20s linear infinite;
        }
        
        
        /* =========================================================
           CARD
        ========================================================= */
        
        .active-member-card{
            flex:0 0 300px;
        
            flex-shrink:0;
        
            display:flex;
            flex-direction:column;
        
            position:relative;
        
            overflow:hidden;
        
            border-radius:28px;
        
            background:#ffffff;
        
            border:
            1px solid rgba(226,232,240,0.9);
        
            box-shadow:
            0 14px 35px rgba(15,23,42,0.08);
        
            transition:
            transform 0.35s ease,
            box-shadow 0.35s ease,
            border-color 0.35s ease,
            background 0.35s ease;
        }
        
        
        /* =========================================================
           CARD HOVER
        ========================================================= */
        
        .active-member-card:hover{
            transform:
            translateY(-10px)
            scale(1.02);
        
            border-color:
            rgba(79,70,229,0.22);
        
            box-shadow:
            0 30px 70px rgba(79,70,229,0.18);
        
            background:
            linear-gradient(
                180deg,
                #ffffff 0%,
                rgba(79,70,229,0.03) 100%
            );
        }
        
        
        /* =========================================================
           GLOW BORDER EFFECT
        ========================================================= */
        
        .active-member-card::before{
            content:"";
        
            position:absolute;
        
            inset:0;
        
            border-radius:28px;
        
            padding:1px;
        
            background:
            linear-gradient(
                135deg,
                rgba(79,70,229,0.5),
                rgba(6,182,212,0.5)
            );
        
            -webkit-mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
        
            -webkit-mask-composite:xor;
        
            mask-composite:exclude;
        
            opacity:0;
        
            transition:
            opacity 0.4s ease;
        
            pointer-events:none;
        }
        
        .active-member-card:hover::before{
            opacity:1;
        }
        
        
        /* =========================================================
           MEMBER IMAGE
        ========================================================= */
        
        .active-member-image{
            position:relative;
        
            width:100%;
            height:260px;
        
            overflow:hidden;
        
            background:
            linear-gradient(
                135deg,
                #312e81,
                #4f46e5,
                #06b6d4
            );
        
            display:flex;
            align-items:center;
            justify-content:center;
        }
        
        .active-member-image img{
            width:100%;
            height:100%;
        
            object-fit:contain;
        
            display:block;
        
            padding:10px;
        
            transition:
            transform 0.6s ease,
            filter 0.5s ease;
        }
        
        
        /* =========================================================
           IMAGE HOVER
        ========================================================= */
        
        .active-member-card:hover .active-member-image img{
            transform:scale(1.08);
        
            filter:
            brightness(1.05)
            saturate(1.08);
        }
        
        
        /* =========================================================
           IMAGE OVERLAY
        ========================================================= */
        
        .active-member-image::after{
            content:"";
        
            position:absolute;
        
            inset:0;
        
            background:
            linear-gradient(
                to top,
                rgba(15,23,42,0.35),
                transparent 60%
            );
        
            opacity:0;
        
            transition:
            opacity 0.4s ease;
        }
        
        .active-member-card:hover .active-member-image::after{
            opacity:1;
        }
        
        
        /* =========================================================
           CARD BODY
        ========================================================= */
        
        .active-member-body{
            padding:24px;
        
            display:flex;
            flex-direction:column;
        
            align-items:center;
        
            text-align:center;
        
            flex:1;
        
            min-height:180px;
        }
        
        
        /* =========================================================
           MEMBER BADGE
        ========================================================= */
        
        .active-member-code{
            display:inline-flex;
        
            align-items:center;
            justify-content:center;
        
            gap:8px;
        
            padding:6px 14px;
        
            margin-bottom:14px;
        
            border-radius:50px;
        
            background:
            rgba(79,70,229,0.10);
        
            color:#4338ca;
        
            font-size:16px;
            font-weight:700;
        
            letter-spacing:0.4px;
        
            text-transform:uppercase;
        
            transition:
            background 0.35s ease,
            color 0.35s ease,
            transform 0.35s ease;
        }
        
        .active-member-card:hover .active-member-code{
            background:
            linear-gradient(
                135deg,
                #4338ca,
                #06b6d4
            );
        
            color:#ffffff;
        
            transform:
            scale(1.05);
        }
        
        
        /* =========================================================
           MEMBER NAME
        ========================================================= */
        
        .active-member-body h5{
            font-size:22px;
            font-weight:800;
        
            color:#111827;
        
            margin-bottom:18px;
        
            line-height:1.5;
        
            text-align:center;
        
            transition:
            color 0.35s ease,
            transform 0.35s ease;
        }
        
        .active-member-card:hover .active-member-body h5{
            color:#4338ca;
        
            transform:
            translateY(-2px);
        }
        
        
        /* =========================================================
           MEMBER DISTRICT
        ========================================================= */
        
        .active-member-district{
            display:flex;
        
            align-items:center;
            justify-content:center;
        
            gap:10px;
        
            margin-top:auto; /* KEY FIX */
        
            width:100%;
        
            padding-top:18px;
        
            color:#475569;
        
            font-size:15px;
            font-weight:600;
        
            text-align:center;
        
            border-top:
            1px solid rgba(226,232,240,0.9);
        
            transition:
            transform 0.35s ease,
            color 0.35s ease;
        }
        
        .active-member-district i{
            color:#4338ca;
        }
        
        .active-member-card:hover .active-member-district{
            color:#312e81;
        
            transform:
            translateY(-2px);
        }
        
        
        /* =========================================================
           AUTO SCROLL ANIMATION
        ========================================================= */
        
        @keyframes activeMembersScroll{
        
            0%{
                transform:translateX(0);
            }
        
            100%{
                transform:translateX(-50%);
            }
        
        }
        
        
        /* =========================================================
           RESPONSIVE
        ========================================================= */
        
        @media(max-width:992px){
        
            .active-member-card{
                flex:0 0 260px;
            }
        
        }
        
        @media(max-width:768px){
        
            .active-member-card{
                flex:0 0 85vw;
            }
        
            .active-members-wrapper::before,
            .active-members-wrapper::after{
                width:60px;
            }
        
            .active-member-image{
                height:230px;
            }
        
            .active-member-body{
                padding:20px;
            }
        
            .active-member-body h5{
                font-size:20px;
            }
        
        }