/* =========================================
           CLIENT PAGE
        ========================================= */

        .clients-page{
            position:relative;
            width:100%;
            padding:100px 0 130px;
            overflow:hidden;
            background:
                radial-gradient(
                    circle at 50% 42%,
                    rgba(149,193,31,.12) 0%,
                    rgba(149,193,31,.04) 30%,
                    transparent 65%
                ),
                #ffffff;
        }

        .clients-page::before,
        .clients-page::after{
            content:"";
            position:absolute;
            width:420px;
            height:420px;
            border-radius:50%;
            filter:blur(90px);
            opacity:.10;
            pointer-events:none;
        }

        .clients-page::before{
            top:110px;
            left:-170px;
            background:#453e8e;
        }

        .clients-page::after{
            right:-170px;
            bottom:60px;
            background:#95c11f;
        }

        /* =========================================
           HEADING
        ========================================= */

        .clients-heading{
            position:relative;
            z-index:2;
            max-width:850px;
            margin:0 auto 75px;
            padding:0 20px;
            text-align:center;
        }

        .clients-heading .small-heading{
            display:block;
            margin-bottom:12px;
            color:#95c11f;
            font-family:'Open Sans',sans-serif;
            font-size:12px;
            line-height:18px;
            font-weight:700;
            text-transform:uppercase;
            letter-spacing:3px;
        }

        .clients-heading h1{
            margin:0;
            color:#222222;
            font-size:46px;
            line-height:1.2;
            font-weight:700;
            letter-spacing:-1px;
        }

        .clients-heading h1 span{
            color:#95c11f;
        }

        .clients-heading p{
            max-width:700px;
            margin:18px auto 0;
            color:#666666;
            font-family:'Open Sans',sans-serif;
            font-size:16px;
            line-height:28px;
            font-weight:400;
            letter-spacing:0;
        }

        .clients-heading-line{
            width:58px;
            height:4px;
            margin:24px auto 0;
            border-radius:10px;
            background:linear-gradient(
                90deg,
                #453e8e,
                #95c11f
            );
        }

        /* =========================================
           HONEYCOMB WRAPPER
        ========================================= */

        .clients-honeycomb{
            position:relative;
            z-index:2;
            width:100%;
            max-width:1500px;
            margin:0 auto;
            padding:0 20px;
            box-sizing:border-box;
        }

        .clients-row{
            display:flex;
            justify-content:center;
            align-items:center;
            margin-top:-36px;
        }

        .clients-row:first-child{
            margin-top:0;
        }

        /* Alternate row movement creates honeycomb */
        .clients-row:nth-child(even){
            transform:translateX(0);
        }

        /* =========================================
           HEXAGON
        ========================================= */

        .client-hex{
            position:relative;
            width:142px;
            height:164px;
            margin:0 3px;
            flex:0 0 142px;
            filter:drop-shadow(
                0 10px 18px rgba(0,0,0,.08)
            );
            transition:
                transform .35s ease,
                filter .35s ease;
        }

        .client-hex-card{
            position:relative;
            width:100%;
            height:100%;
            box-sizing:border-box;
            display:flex;
            align-items:center;
            justify-content:center;
            overflow:hidden;

            clip-path:polygon(
                25% 6.7%,
                75% 6.7%,
                100% 50%,
                75% 93.3%,
                25% 93.3%,
                0 50%
            );

            background:linear-gradient(
                145deg,
                #95c11f 0%,
                #453e8e 100%
            );
        }

        .client-hex-card::before{

    content:"";

    position:absolute;

    inset:3px;

    clip-path:inherit;

    background:
        rgba(255,255,255,.88);

    backdrop-filter:blur(12px);

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

    z-index:1;
}

        .client-logo-wrap{
    position:relative;
    z-index:5;
    width:100px;
    height:70px;
    display:flex;
    justify-content:center;
    align-items:center;
}

        .client-logo-wrap img{
    position:relative;
    z-index:6;
    display:block;
    max-width:100px;
    max-height:65px;
    width:auto;
    height:auto;
    object-fit:contain;
    filter:none;
    opacity:1;
}

        /* Company name on hover */

        .client-company-name{
            position:absolute;
            left:50%;
            bottom:25px;
            z-index:4;
            width:80%;
            padding:7px 8px;
            box-sizing:border-box;
            border-radius:20px;

            background:rgba(69,62,142,.95);
            box-shadow:0 8px 20px rgba(0,0,0,.16);

            color:#ffffff;
            font-family:'Open Sans',sans-serif;
            font-size:10px;
            line-height:14px;
            font-weight:600;
            text-align:center;

            opacity:0;
            visibility:hidden;
            transform:translate(-50%,12px);

            transition:
                opacity .3s ease,
                visibility .3s ease,
                transform .3s ease;
        }

        /* =========================================
           HOVER EFFECT
        ========================================= */

        .client-hex:hover{

    transform:
        translate(
            var(--mouse-x),
            var(--mouse-y)
        )
        scale(1.18);

    z-index:50;

    filter:
        drop-shadow(0 0 18px rgba(149,193,31,.45))
        drop-shadow(0 0 35px rgba(69,62,142,.28));

    transition:all .35s ease;
}

        .client-hex:hover .client-hex-card::before{
            background:#ffffff;
        }

        .client-hex:hover img{

    transform:scale(1.18);

    transition:.35s;
}

        .client-hex:hover .client-company-name{
            opacity:1;
            visibility:visible;
            transform:translate(-50%,0);
        }

        /* =========================================
           EMPTY / ERROR MESSAGE
        ========================================= */

        .clients-message{
            width:100%;
            max-width:650px;
            margin:40px auto;
            padding:28px;
            box-sizing:border-box;
            border:1px solid #e5e5e5;
            border-radius:12px;
            background:#ffffff;
            box-shadow:0 12px 30px rgba(0,0,0,.07);
            color:#555555;
            font-family:'Open Sans',sans-serif;
            font-size:15px;
            line-height:25px;
            text-align:center;
        }

        /* =========================================
           TABLET
        ========================================= */

        @media only screen and (max-width:1250px){

            .clients-honeycomb{
                max-width:1100px;
            }

            .client-hex{
                width:120px;
                height:139px;
                flex-basis:120px;
                margin:0 2px;
            }

            .clients-row{
                margin-top:-30px;
            }

            .client-logo-wrap{
                width:88px;
                height:65px;
            }

            .client-logo-wrap img{
                max-width:88px;
                max-height:65px;
            }
        }

        /* =========================================
           MOBILE / SMALL TABLET
        ========================================= */

        @media only screen and (max-width:900px){

            .clients-page{
                padding:75px 0 90px;
            }

            .clients-heading{
                margin-bottom:45px;
            }

            .clients-heading h1{
                font-size:36px;
            }

            .clients-honeycomb{
                display:grid;
                grid-template-columns:repeat(4,1fr);
                gap:12px;
                max-width:700px;
            }

            .clients-row{
                display:contents;
                margin:0;
                transform:none !important;
            }

            .client-hex{
                width:100%;
                max-width:135px;
                height:150px;
                margin:0 auto;
                flex:none;
            }

            .client-company-name{
                opacity:1;
                visibility:visible;
                bottom:20px;
                transform:translate(-50%,0);
                font-size:9px;
            }

            .client-logo-wrap{
                width:88px;
                height:65px;
                position:relative;
                z-index:5;
            }

            .client-hex:hover{
                transform:scale(1.06);
            }
        }

        /* =========================================
           MOBILE
        ========================================= */

        @media only screen and (max-width:600px){

            .clients-heading h1{
                font-size:31px;
            }

            .clients-heading p{
                font-size:14px;
                line-height:24px;
            }

            .clients-honeycomb{
                grid-template-columns:repeat(2,1fr);
                gap:14px;
                padding:0 18px;
            }

            .client-hex{
                width:135px;
                height:154px;
            }
        }

        @media only screen and (max-width:340px){

            .client-hex{
                width:120px;
                height:138px;
            }

            .client-logo-wrap{
                width:78px;
                height:58px;
            }
        }
@keyframes clientFloat{
    0%,100%{
        translate:0 0;
    }

    50%{
        translate:0 -6px;
    }
}

.client-floating{
    animation:clientFloat 4s ease-in-out infinite;
    will-change:transform;
}

.client-hex-card::after{
    content:"";
    position:absolute;
    top:-50%;
    left:-85%;
    width:55%;
    height:190%;
    z-index:3;
    pointer-events:none;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.55),
        transparent
    );
    transform:rotate(25deg);
    transition:left .65s ease;
}

.client-hex:hover .client-hex-card::after{
    left:135%;
}

@media only screen and (max-width:900px){
    .client-floating{
        animation:none;
    }
}
.client-logo-wrap{
    width:90px;
    height:60px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.client-logo-wrap img{
    max-width:90px;
    max-height:55px;
    width:auto;
    height:auto;
    object-fit:contain;
    filter:none;
    opacity:1;
    transition:transform .35s ease;
}

.client-hex:hover .client-logo-wrap img{
    transform:scale(1.08);
}
@keyframes clientEntrance{
    from{
        opacity:0;
        transform:scale(.75) translateY(25px);
    }

    to{
        opacity:1;
        transform:scale(1) translateY(0);
    }
}

.client-hex{
    opacity:0;
}

.client-hex.client-visible{
    animation:clientEntrance .65s ease forwards;
}
/* Apple Watch proximity movement */

.client-hex{
    --watch-scale:1;
    --watch-x:0px;
    --watch-y:0px;

    transform:
        translate(
            var(--watch-x),
            var(--watch-y)
        )
        scale(var(--watch-scale));

    transition:
        transform .22s cubic-bezier(.2,.8,.2,1),
        filter .25s ease;

    will-change:transform;
}

.client-hex.watch-active{
    z-index:40;

    filter:
        drop-shadow(0 16px 26px rgba(69,62,142,.20))
        drop-shadow(0 0 15px rgba(149,193,31,.22));
}

/* Keep hover compatible with mouse movement */

.client-hex:hover{
    z-index:60;

    filter:
        drop-shadow(0 0 18px rgba(149,193,31,.45))
        drop-shadow(0 0 35px rgba(69,62,142,.28));
}

/* Disable movement on mobile */

@media only screen and (max-width:900px){

    .client-hex,
    .client-hex.watch-active{
        transform:none;
    }
}
.clients-search{
    position:relative;
    width:90%;
    max-width:430px;
    margin:30px auto 0;
}

.clients-search input{
    width:100%;
    box-sizing:border-box;
    padding:15px 50px 15px 20px;
    border:1px solid #e1e1e1;
    border-radius:30px;
    background:#ffffff;
    box-shadow:0 8px 25px rgba(0,0,0,.07);
    color:#333333;
    font-size:15px;
    line-height:22px;
    outline:none;
    transition:all .3s ease;
}

.clients-search input:focus{
    border-color:#95c11f;
    box-shadow:
        0 10px 28px rgba(0,0,0,.08),
        0 0 0 4px rgba(149,193,31,.12);
}

.clients-search-icon{
    position:absolute;
    top:50%;
    right:20px;
    transform:translateY(-50%);
    font-family:"FontAwesome";
    color:#453e8e;
    font-size:16px;
    pointer-events:none;
}

.client-hex.client-hidden{
    display:none;
}
/* COUNTERS */

.clients-counter-section{

    display:flex;

    justify-content:center;

    gap:35px;

    flex-wrap:wrap;

    margin:55px 0 75px;
}

.client-counter-box{

    width:220px;

    padding:35px 25px;

    border-radius:18px;

    background:#fff;

    text-align:center;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s;
}

.client-counter-box:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 35px rgba(69,62,142,.15);
}

.client-counter-box h2{

    color:#95c11f;

    font-size:52px;

    margin-bottom:12px;
}

.client-counter-box p{

    color:#555;

    font-size:15px;

    letter-spacing:.5px;

    margin:0;
}
/* CLIENT HERO */

.clients-hero{

    max-width:900px;

    margin:70px auto 40px;

    text-align:center;

    padding:0 20px;
}

.clients-hero h1{

    font-size:48px;

    font-weight:700;

    color:#222;

    margin-bottom:18px;
}

.clients-hero h1::after{

    content:"";

    display:block;

    width:90px;

    height:4px;

    background:#95c11f;

    margin:18px auto 0;

    border-radius:5px;
}

.clients-hero p{

    font-size:18px;

    color:#666;

    line-height:32px;

    max-width:820px;

    margin:25px auto 0;
}
/* Premium Background */

.clients-bg{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
}

.clients-bg span{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    animation:floatGlow 14s ease-in-out infinite;
}

.clients-bg span:nth-child(1){
    width:350px;
    height:350px;
    background:rgba(149,193,31,.18);
    left:8%;
    top:10%;
}

.clients-bg span:nth-child(2){
    width:450px;
    height:450px;
    background:rgba(69,62,142,.12);
    right:10%;
    top:18%;
    animation-delay:4s;
}

.clients-bg span:nth-child(3){
    width:300px;
    height:300px;
    background:rgba(149,193,31,.10);
    left:45%;
    bottom:5%;
    animation-delay:8s;
}

@keyframes floatGlow{

    0%,100%{
        transform:translateY(0) scale(1);
    }

    50%{
        transform:translateY(-35px) scale(1.08);
    }

}
/* =====================================
   APPLE WATCH CENTER EFFECT
===================================== */

/* Center row (largest) */
.clients-row:nth-child(4) .client-hex{
    width:175px;
    height:202px;
}

/* Rows near center */
.clients-row:nth-child(3) .client-hex,
.clients-row:nth-child(5) .client-hex{
    width:160px;
    height:184px;
}

/* Next rows */
.clients-row:nth-child(2) .client-hex,
.clients-row:nth-child(6) .client-hex{
    width:148px;
    height:170px;
}

/* Top & Bottom rows */
.clients-row:nth-child(1) .client-hex,
.clients-row:nth-child(7) .client-hex{
    width:132px;
    height:152px;
}

/*==================================================
STEP 2 — APPLE WATCH STYLE CLIENT LOGOS
==================================================*/

.ts-logo-grid{
    position:relative;

    display:flex;
    flex-direction:row;
    flex-wrap:wrap;

    align-items:center;
    justify-content:center;
    align-content:center;

    width:100%;
    max-width:1250px;

    margin:65px auto 110px;
    padding:55px 35px 90px;

    gap:0;

    overflow:visible;

    background:
        radial-gradient(
            ellipse at center,
            rgba(149,193,31,.07) 0%,
            rgba(69,62,142,.035) 42%,
            transparent 75%
        );
}
/* individual watch icon position */

.ts-client-item{
    position:relative;

    flex:0 0 92px;

    width:92px;
    height:92px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:-4px -2px;

    z-index:2;
}

.ts-client-item:hover{
    z-index:9999;
}

/* stagger icons like Apple Watch */



/* main circular app */

.ts-client-card{
    position:relative;

    width:88px;
    height:88px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    cursor:pointer;

    isolation:isolate;

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        filter .35s ease;

    z-index:1;
}


/* premium circular surface */

.ts-card-bg{
    position:absolute;
    inset:0;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(235,239,246,.96)
        );

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

    box-shadow:
        0 12px 30px rgba(15,24,43,.18),
        inset 0 2px 4px rgba(255,255,255,.95),
        inset 0 -3px 8px rgba(23,32,51,.06);

    z-index:-2;

    transition:
        box-shadow .35s ease,
        background .35s ease;
}


/* subtle outer ring */

.ts-card-ring{
    position:absolute;

    inset:-5px;

    border-radius:50%;

    border:1px solid rgba(149,193,31,.18);

    opacity:.35;

    z-index:-3;

    transition:
        opacity .35s ease,
        transform .35s ease,
        border-color .35s ease;
}


/* logo holder */

.ts-client-logo{
    width:64px;
    height:64px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    overflow:hidden;
}


/* logo */

.ts-client-logo img{
    display:block;

    width:auto !important;
    max-width:80% !important;

    height:auto !important;
    max-height:56px !important;

    object-fit:contain !important;

    filter:grayscale(20%);
    opacity:.92;

    transition:
        transform .35s ease,
        filter .35s ease,
        opacity .35s ease;
}


/* hover */

.ts-client-card:hover{
    z-index:9999;
    transform:translateY(-10px) scale(1.18);
}

.ts-client-card:hover .ts-card-bg{
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f4f7fb
        );

    box-shadow:
        0 26px 60px rgba(15,24,43,.24),
        0 0 0 6px rgba(149,193,31,.08),
        inset 0 2px 5px rgba(255,255,255,1);
}

.ts-client-card:hover .ts-card-ring{
    opacity:1;

    border-color:rgba(149,193,31,.65);

    transform:scale(1.05);
}

.ts-client-card:hover .ts-client-logo img{
    filter:grayscale(0%);
    opacity:1;

    transform:scale(1.08);
}


/* company label */

.ts-client-name{
    position:absolute;

    left:50%;
    top:calc(100% + 14px);

    min-width:115px;
    max-width:160px;

    padding:7px 11px;

    border-radius:16px;

    background:rgba(18,27,48,.96);

    color:#ffffff;

    font-size:10px;
    line-height:15px;
    font-weight:700;

    text-align:center;

    transform:
        translateX(-50%)
        translateY(7px);

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    box-shadow:
        0 12px 28px rgba(15,24,43,.22);

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;

    z-index:10000;
}

.ts-client-card:hover .ts-client-name{
    opacity:1;
    visibility:visible;

    transform:
        translateX(-50%)
        translateY(0);
}


/* tablet */

@media only screen and (max-width:1000px){

    .ts-logo-grid{
        padding:60px 25px 100px;
    }

    .ts-client-item{
        width:100px;
        height:100px;
    }

    .ts-client-card{
        width:86px;
        height:86px;
    }

    .ts-client-logo{
        width:62px;
        height:62px;
    }

    .ts-client-logo img{
        max-height:46px !important;
    }

    
}


/* mobile */

@media only screen and (max-width:650px){

    .ts-logo-grid{
        padding:40px 10px 80px;

        gap:5px;
    }

    .ts-client-item{
        width:78px;
        height:78px;
    }

    .ts-client-card{
        width:66px;
        height:66px;
    }

    .ts-client-logo{
        width:48px;
        height:48px;
    }

    .ts-client-logo img{
        max-width:82% !important;
        max-height:36px !important;
    }

    

    .ts-client-name{
        min-width:100px;
        font-size:9px;
    }
}

/*==================================================
CLIENT COUNTER FIX
==================================================*/

.clients-counter-section{
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0,1fr)) !important;
    gap:24px !important;

    width:100% !important;
    max-width:1000px !important;

    margin:55px auto 70px !important;
    padding:0 20px !important;

    box-sizing:border-box;
}

.client-counter-box{
    width:100% !important;
    min-width:0 !important;

    margin:0 !important;
    padding:32px 20px !important;

    background:#ffffff;

    border-radius:20px;

    text-align:center;

    box-shadow:
        0 16px 40px rgba(23,32,51,.08);
}

.client-counter-box h2{
    margin:0 0 10px !important;

    color:#95c11f !important;

    font-size:46px !important;
    line-height:1 !important;

    font-weight:800 !important;
}

.client-counter-box p{
    margin:0 !important;

    color:#687080;

    font-size:14px;
    line-height:22px;

    text-align:center !important;
}

@media only screen and (max-width:800px){

    .clients-counter-section{
        grid-template-columns:repeat(2,1fr) !important;
    }
}

@media only screen and (max-width:500px){

    .clients-counter-section{
        grid-template-columns:1fr !important;
    }
}

/* ==============================================
FINAL CLIENT DESCRIPTION VISIBILITY FIX
============================================== */

#clientInfoPanel{
    display:none !important;
    opacity:0;

transform:
    translate(-50%,-50%)
    scale(.92);

transition:
    opacity .25s ease,
    transform .25s ease;
}

#clientLogoGrid.has-active-client #clientInfoPanel{
    display:block !important;

    position:absolute;
    left:50%;
    top:50%;

    width:310px;
    min-height:190px;

    padding:30px 28px;

    transform:translate(-50%, -50%);

    border-radius:28px;

    background:rgba(255,255,255,.96);

    box-shadow:
        0 28px 70px rgba(15,24,43,.18);

    z-index:9999;

    pointer-events:none;

    text-align:center;

    opacity:1;
transition:
    opacity .25s ease,
    transform .25s ease;
}

/*==================================================
FINAL APPLE WATCH ROW LAYOUT
==================================================*/

.ts-logo-grid{
    position:relative;

    width:100%;
    max-width:1350px;

    margin:55px auto 100px;
    padding:45px 20px 80px;

    overflow:visible;

    background:
        radial-gradient(
            ellipse at center,
            rgba(149,193,31,.07) 0%,
            rgba(69,62,142,.035) 42%,
            transparent 75%
        );
}


/* EACH HORIZONTAL ROW */

.ts-watch-row{
    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;

    width:100%;

    height:78px;

    margin:0 auto;

    overflow:visible;
}


/* Alternate rows move half an icon */

.ts-watch-row:nth-of-type(even){
    transform:translateX(44px);
}


/* ONE LOGO POSITION */

.ts-client-item{
    position:relative;

    flex:0 0 88px;

    width:88px;
    height:88px;

    display:flex;
    justify-content:center;
    align-items:center;

    margin:0 -1px;

    z-index:2;
}


/* ACTUAL ROUND APP */

.ts-client-card{
    position:relative;

    width:84px;
    height:84px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:50%;

    cursor:pointer;

    isolation:isolate;

    z-index:2;
}


/* WHITE CIRCULAR BACKGROUND */

.ts-card-bg{
    position:absolute;
    inset:0;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f3f5f8
        );

    border:1px solid rgba(23,32,51,.07);

    box-shadow:
        0 9px 24px rgba(23,32,51,.12),
        inset 0 1px 2px #ffffff;

    z-index:-2;
}


/* OUTER RING */

.ts-card-ring{
    position:absolute;

    inset:-4px;

    border-radius:50%;

    border:1px solid rgba(149,193,31,.12);

    z-index:-3;

    pointer-events:none;
}


/* LOGO */

.ts-client-logo{
    width:62px;
    height:62px;

    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;

    border-radius:50%;
}

.ts-client-logo img{
    display:block;

    width:auto !important;
    max-width:82% !important;

    height:auto !important;
    max-height:48px !important;

    object-fit:contain !important;
}


/* ACTIVE / CURSOR */

.ts-client-card.watch-active{
    z-index:100;
}

.ts-client-card.watch-active .ts-card-bg{
    box-shadow:
        0 18px 45px rgba(23,32,51,.20),
        0 0 0 5px rgba(149,193,31,.08);
}

.ts-client-card.watch-active .ts-card-ring{
    border-color:#95c11f;
}


/* RESPONSIVE */

@media only screen and (max-width:900px){

    .ts-watch-row{
        height:68px;
    }

    .ts-watch-row:nth-of-type(even){
        transform:translateX(36px);
    }

    .ts-client-item{
        flex-basis:74px;
        width:74px;
        height:74px;
    }

    .ts-client-card{
        width:70px;
        height:70px;
    }

    .ts-client-logo{
        width:51px;
        height:51px;
    }

    .ts-client-logo img{
        max-height:38px !important;
    }
}

/*==================================================
PREMIUM CLIENT INFO POPUP
==================================================*/

#clientInfoPanel{
    display:none !important;
}

#clientLogoGrid.has-active-client #clientInfoPanel{
    display:block !important;

    position:absolute;

    left:50%;
    top:50%;

    width:340px;

    padding:26px;

    transform:translate(-50%,-50%) scale(1);

    border:1px solid rgba(255,255,255,.80);
    border-radius:28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.97),
            rgba(245,247,251,.94)
        );

    backdrop-filter:blur(18px);

    box-shadow:
        0 30px 80px rgba(23,32,51,.20),
        0 0 0 6px rgba(149,193,31,.05);

    z-index:99999;

    pointer-events:none;

    animation:clientInfoOpen .25s ease;
}

@keyframes clientInfoOpen{

    from{
        opacity:0;
        transform:
            translate(-50%,-50%)
            scale(.92);
    }

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


/* TOP SECTION */

.ts-client-info-top{
    display:flex;
    align-items:center;

    gap:18px;

    margin-bottom:18px;
}


/* LOGO CIRCLE */

.ts-client-info-logo{
    flex:0 0 74px;

    width:74px;
    height:74px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:50%;

    background:#ffffff;

    border:1px solid rgba(23,32,51,.08);

    box-shadow:
        0 10px 28px rgba(23,32,51,.11);
}

.ts-client-info-logo img{
    display:block;

    width:auto !important;
    max-width:70% !important;

    height:auto !important;
    max-height:50px !important;

    object-fit:contain !important;
}


/* LABEL */

.ts-client-info-label{
    display:block;

    margin-bottom:5px;

    color:#95c11f;

    font-size:9px;
    line-height:14px;

    font-weight:800;

    letter-spacing:1.7px;

    text-transform:uppercase;
}


/* CLIENT NAME */

.ts-client-info h3{
    margin:0 !important;

    color:#172033 !important;

    font-size:23px !important;
    line-height:1.2 !important;

    font-weight:700 !important;

    text-align:left !important;
}


/* DESCRIPTION */

.ts-client-info p{
    margin:0 !important;

    padding-top:16px;

    border-top:1px solid rgba(23,32,51,.08);

    color:#687080 !important;

    font-size:13px !important;
    line-height:23px !important;

    text-align:left !important;
}


/* SMALL GREEN ACCENT */

.ts-client-info::after{
    content:"";

    position:absolute;

    left:28px;
    bottom:-4px;

    width:60px;
    height:4px;

    border-radius:4px;

    background:#95c11f;
}


/* MOBILE */

@media only screen and (max-width:650px){

    #clientLogoGrid.has-active-client #clientInfoPanel{
        width:280px;

        padding:22px;

        top:50%;
    }

    .ts-client-info-logo{
        flex-basis:62px;

        width:62px;
        height:62px;
    }

    .ts-client-info h3{
        font-size:19px !important;
    }
}

/* Premium hover animation */

.ts-client-card{
    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        box-shadow .35s ease,
        filter .35s ease;
}

.ts-client-card:hover{

    transform:
        scale(1.18)
        translateY(-10px);

    box-shadow:
        0 25px 55px rgba(0,0,0,.22);

    z-index:999;
}

.ts-client-card:hover .ts-card-ring{

    border-color:#95c11f;

    box-shadow:
        0 0 25px rgba(149,193,31,.35);
}

.ts-client-card:hover .ts-card-bg{

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #eef6da
        );
}

/* =========================================
   MOBILE CLIENT LOGO GRID FIX
========================================= */

@media (max-width: 768px){

    /* Keep the logo area inside the screen */
    .ts-logo-grid{
        width:100% !important;
        max-width:100% !important;

        padding:20px 10px 120px !important;

        overflow:hidden !important;

        box-sizing:border-box !important;
    }


    /* Each logo row */
    .ts-watch-row{
        width:100% !important;

        display:flex !important;
        flex-wrap:wrap !important;
        justify-content:center !important;
        align-items:center !important;

        gap:8px !important;

        margin:0 auto 8px !important;

        transform:none !important;
    }


    /* Client item */
    .ts-client-item{
        width:auto !important;
        height:auto !important;

        margin:0 !important;

        flex:0 0 auto !important;
    }


    /* Logo circle */
    .ts-client-card{
        width:58px !important;
        height:58px !important;

        min-width:58px !important;
        min-height:58px !important;

        border-radius:50% !important;

        margin:0 !important;

        transform:none !important;
    }


    /* Actual logo */
    .ts-client-logo{
        width:100% !important;
        height:100% !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        padding:8px !important;

        box-sizing:border-box !important;
    }

    .ts-client-logo img{
        display:block !important;

        width:auto !important;
        height:auto !important;

        max-width:100% !important;
        max-height:100% !important;

        object-fit:contain !important;

        margin:0 auto !important;
    }


    /* Remove desktop oversized hover */
    .ts-client-card:hover{
        transform:none !important;
    }


    /* Tap / selected logo effect */
    .ts-client-card.mobile-active{
        transform:scale(1.16) !important;

        z-index:50 !important;

        border-color:#95c11f !important;

        box-shadow:
            0 10px 25px rgba(23,32,51,.20),
            0 0 0 2px rgba(149,193,31,.35) !important;
    }

}