/* =========================================
PREMIUM CLIENT LOGO SLIDER
========================================= */

.client-slider-section{

    position:relative;

    overflow:hidden;

    padding:40px 0;

    background:
    linear-gradient(
    135deg,
    #020f2c 0%,
    #04173d 50%,
    #020b22 100%);
}


/* OVERLAY EFFECT */

.client-slider-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
    circle at top left,
    rgba(124,58,237,0.18),
    transparent 35%),

    radial-gradient(
    circle at bottom right,
    rgba(59,130,246,0.14),
    transparent 35%);

    pointer-events:none;
}


/* SLIDER */

.logo-slider{

    width:100%;

    overflow:hidden;

    position:relative;
}


/* TRACK */

.logo-track{

    display:flex;

    align-items:center;

    gap:28px;

    width:max-content;

    animation:clientScroll 38s linear infinite;
}


/* LOGO CARD */

.logo-item{

    min-width:260px;

    height:150px;

    background:
    rgba(255,255,255,0.05);

    border:1px solid
    rgba(255,255,255,0.08);

    border-radius:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:24px;

    backdrop-filter:blur(14px);

    transition:0.4s ease;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.18);
}


/* HOVER */

.logo-item:hover{

    transform:translateY(-8px);

    border-color:#7c3aed;

    box-shadow:
    0 18px 45px rgba(124,58,237,0.28);
}


/* IMAGE */

.logo-item img{

    max-width:100%;

    max-height:85px;

    object-fit:contain;

    background:#ffffff;

    padding:14px;

    border-radius:18px;
}


/* DARK LOGOS */

.logo-item img[src*="DBS"],

.logo-item img[src*="upes"],

.logo-item img[src*="Evon"],

.logo-item img[src*="Translumina"],

.logo-item img[src*="NABARD"],

.logo-item img[src*="Aptara"]{

    background:#ffffff;
}


/* SLIDER ANIMATION */

@keyframes clientScroll{

    0%{

        transform:translateX(0);
    }

    100%{

        transform:translateX(-50%);
    }
}



/* =========================================
CLIENT CATEGORY SECTION
========================================= */

.client-category-section{

    background:
    linear-gradient(
    135deg,
    #020f2c 0%,
    #03163f 50%,
    #020b22 100%);

    padding:90px 0;
}


/* SECTION HEADER */

.client-category-header{

    text-align:center;

    margin-bottom:60px;
}


.client-category-header span{

    display:inline-block;

    background:
    rgba(139,92,246,0.14);

    border:1px solid
    rgba(139,92,246,0.30);

    color:#c4b5fd;

    padding:12px 24px;

    border-radius:50px;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:20px;
}


.client-category-header h2{

    font-size:52px;

    line-height:1.15;

    font-weight:800;

    color:#ffffff;

    max-width:980px;

    margin:auto;
}



/* =========================================
CLIENT GRID
========================================= */

.client-logo-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

    gap:32px;
}



/* =========================================
CLIENT CARD
========================================= */

.client-logo-card{

    background:
    rgba(255,255,255,0.03);

    border:1px solid
    rgba(255,255,255,0.08);

    border-radius:28px;

    padding:40px 28px;

    text-align:center;

    transition:0.4s ease;

    backdrop-filter:blur(12px);

    min-height:320px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    position:relative;
}


/* GLOW EFFECT */

.client-logo-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    135deg,
    rgba(139,92,246,0.12),
    transparent);

    opacity:0;

    transition:0.4s ease;
}


/* HOVER */

.client-logo-card:hover{

    transform:translateY(-10px);

    border-color:#7c3aed;

    box-shadow:
    0 20px 50px rgba(124,58,237,0.22);
}


.client-logo-card:hover::before{

    opacity:1;
}


/* IMAGE */

.client-logo-card img{

    width:100%;

    max-width:180px;

    height:100px;

    object-fit:contain;

    background:#ffffff;

    border-radius:18px;

    padding:14px;

    margin-bottom:28px;

    position:relative;

    z-index:2;
}


/* TITLE */

.client-logo-card h3{

    color:#ffffff;

    font-size:24px;

    line-height:1.5;

    font-weight:700;

    position:relative;

    z-index:2;
}



/* =========================================
TEXT ONLY CARD
========================================= */

.text-client-card{

    justify-content:center;
}


.text-client-card h3{

    font-size:34px;

    line-height:1.4;
}



/* =========================================
RESPONSIVE
========================================= */

@media(max-width:1200px){

    .client-logo-grid{

        grid-template-columns:
        repeat(3,1fr);
    }
}


@media(max-width:991px){

    .client-category-header h2{

        font-size:40px;
    }

    .client-logo-grid{

        grid-template-columns:
        repeat(2,1fr);
    }
}


@media(max-width:768px){

    .client-slider-section{

        padding:30px 0;
    }

    .logo-item{

        min-width:200px;

        height:120px;

        padding:18px;
    }

    .logo-item img{

        max-height:65px;
    }

    .logo-track{

        gap:18px;
    }

    .client-category-section{

        padding:70px 0;
    }

    .client-category-header{

        margin-bottom:45px;
    }

    .client-category-header h2{

        font-size:34px;
    }

    .client-logo-grid{

        grid-template-columns:1fr;
    }

    .client-logo-card{

        min-height:auto;

        padding:32px 22px;
    }

    .client-logo-card h3{

        font-size:20px;
    }

    .text-client-card h3{

        font-size:26px;
    }
}