/* =========================================
   SECTION
========================================= */

.sh-clients-section{

    padding:40px 5%;

    background:#ffffff;
}

.sh-header{

    text-align:center;

    margin-bottom:60px;
}

.sh-header h2{

    font-size:64px;

    font-weight:800;

    color:#081a23;

    margin-bottom:12px;
}

.sh-header h2 span{

    color:#000000;
    background:#fff300;
    border-radius:48px;
}

.sh-header p{

    font-size:22px;

    color:#6d7883;
}


/* =========================================
   TOP INDUSTRY CARDS
========================================= */

.sh-category-grid{

    display:grid;

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

    gap:32px;

    margin-bottom:60px;
}

.sh-category-card{

    background:#ffffff;

    min-height:320px;

    border-radius:22px;

    padding:24px 20px;

    border:1.5px solid #ffffff;

    box-shadow:
        0 8px 22px rgba(6,32,36,.08);

    text-align:center;

    display:flex;
    flex-direction:column;
    align-items:center;

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

.sh-category-card:hover{

    transform:translateY(-6px);

    border:1.5px solid #0a373e;

    box-shadow:
        0 18px 45px rgba(6,32,36,.18),
        0 8px 20px rgba(13,66,74,.12),
        0 0 0 1px rgba(13,66,74,.08);
}


/* ICON */
.sh-icon{

    width:60px;
    height:60px;

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

    margin-bottom:18px;

    align-self:flex-start;
}

.sh-icon svg{

    width:56px;
    height:56px;

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

.sh-category-card:hover .sh-icon svg{

    transform:scale(1.08);

    
}

/* TITLE */

.sh-category-card h3{

    font-size:20px;

    font-weight:700;

    color:#081a23;

    margin-bottom:12px;
}

/* COUNT */

.sh-count{

    font-size:42px;

    font-weight:800;

   color:#081a23;

    margin-bottom:12px;
}

/* DESCRIPTION */

.sh-category-card p{

    font-size:14px;

    line-height:1.6;

    color:#6d7883;

    max-width:280px;
}
/* TAGS */

.sh-tags{

    margin-top:auto;

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:10px;
}
.sh-tags span{

    padding:7px 12px;

    border-radius:30px;

    background:#0d424a;

    color:#ffffff;

    font-size:12px;

    font-weight:600;
}


/* =========================================
   HORIZONTAL COMPANY SCROLLER
========================================= */

.sh-logo-slider{

    width:100%;

    overflow:hidden;

    margin-top:50px;

    position:relative;
}

.sh-logo-track{

    display:flex;

    flex-direction:row;

    align-items:center;

    gap:25px;

    width:max-content;

    animation:companyScroll 38s linear infinite;
}
.sh-logo-slider:hover .sh-logo-track{

    animation-play-state: paused;
}

.sh-logo-slider:hover .sh-logo-track1{
    animation-play-state:paused;
}
.sh-logo-slider:hover .sh-logo-track2{
    animation-play-state:paused;
}
.sh-logo-slider:hover .sh-logo-track3{
    animation-play-state:paused;
}


.sh-logo-track1{

    display:flex;

    flex-direction:row;

    align-items:center;

    gap:25px;

    width:max-content;

    animation:companyScroll 14s linear infinite;
}
.sh-logo-slider:hover .sh-logo-track{

    animation-play-state:paused;
}

.sh-logo-track2{

    display:flex;

    flex-direction:row;

    align-items:center;

    gap:25px;

    width:max-content;

    animation:companyScroll 10s linear infinite;
}
.sh-logo-slider:hover .sh-logo-track{

    animation-play-state:paused;
}

@keyframes companyScroll{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }
}

/* =========================================
   LOGO CARD
========================================= */

.sh-company-item{

    min-width:220px;

    height:78px;

    background:#ffffff;

    border-radius:20px;

    margin-top:-0%;

    margin-bottom:0%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border:1px solid #ffffff;

    transition:
        transform .45s cubic-bezier(.22,.61,.36,1),
        box-shadow .45s ease,
        filter .45s ease;

    cursor:pointer;
}

.sh-company-item:hover{

    transform:translateY(-5px);

    box-shadow:
    0 15px 30px rgba(4, 4, 4, 0.08);
}

.sh-company-item img{

    width:170px;

    height:150px;

    object-fit:contain;
    transition:
        transform .45s ease,
        filter .45s ease;
}

.sh-company-item span{

    margin-top:10px;

    font-size:14px;

    font-weight:600;

    color:#0f172a;
}





.sh-icon1 svg{
    width:100px;
    height:100px;
    display:block;
    margin:auto;
    transition:all .4s ease;
}

.sh-category-card:hover .sh-icon svg{
    transform:translateY(-6px) scale(1.08);
}



/* Buttons */

.company-filter{

    display:flex;

    justify-content:center;

    gap:25px;

    margin:40px 0 35px;

    flex-wrap:wrap;
}

.filter-btn{

    padding:14px 38px;

    background:transparent;

    border:none;

    font-size:24px;

    font-weight:700;

    color:#111;

    cursor:pointer;

    position:relative;

    transition:.35s;
}

.filter-btn::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:3px;

    background:#c2c2c2;

    transition:.35s;
}

.filter-btn:hover::after,
.filter-btn.active::after{

    width:100%;
}

.filter-btn.active{

    color:#011d26;
}



/* Show only selected */

.logo-group{

    display:none;
}

.logo-group.active{

    display:block;
}

.company-filter{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

    margin:45px 0;

}

.filter-btn{

    position:relative;

    padding:14px 34px;

    border:none;

    border-radius:50px;

    cursor:pointer;

    background:#ffffff14;

    backdrop-filter:blur(16px);

    color:#000000;

    font-size:21px;

    font-weight:700;

    letter-spacing:.5px;

    transition:.4s;

    overflow:hidden;

    border:1px solid #ffffff14;

}

.filter-btn::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transition:.6s;

}

.filter-btn:hover::before{

    left:100%;

}

.filter-btn:hover{

    transform:translateY(-4px);

    box-shadow:
    0 12px 30px #ffffff40;

}

.filter-btn.active{

    background:#fff300;

    color:#000000;

    box-shadow:

    0 0 20px rgba(212, 207, 207, 0.45),

    0 10px 25px rgba(255, 255, 255, 0.25);

}

.logo-group{
    display:none;
    width:100%;
}

.logo-group.active{
    display:block;
}




/* =========================================================
   CLIENTS SECTION - RESPONSIVE
   Add this at the END of your CSS
========================================================= */

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

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

    .sh-clients-section{
        padding:60px 20px;
    }

    .sh-header{
        margin-bottom:45px;
    }

    .sh-header h2{
        font-size:42px;
        line-height:1.2;
    }

    .sh-header h2 span{
        border-radius:30px;
        padding:0 10px;
    }

    .sh-header p{
        font-size:18px;
        max-width:600px;
        margin:0 auto;
        line-height:1.7;
    }

    /* Cards */

    .sh-category-grid{
        grid-template-columns:1fr;
        gap:24px;
        margin-bottom:40px;
    }

    .sh-category-card{
        min-height:auto;
        padding:30px 24px;
        border-radius:18px;
    }

    .sh-category-card h3{
        font-size:24px;
        margin-bottom:12px;
    }

    .sh-count{
        font-size:38px;
    }

    .sh-category-card p{
        font-size:15px;
        max-width:100%;
    }

    .sh-icon1 svg{
        width:80px;
        height:80px;
    }

    /* Filter */

    .company-filter{
        gap:12px;
        margin:35px 0;
    }

    .filter-btn{
        padding:12px 24px;
        font-size:15px;
    }

    /* Logos */

    .sh-logo-slider{
        margin-top:30px;
    }

    .sh-company-item{
        min-width:180px;
        height:70px;
    }

    .sh-company-item img{
        width:130px;
        height:70px;
    }

    .sh-logo-track,
    .sh-logo-track1,
    .sh-logo-track2{
        gap:18px;
    }

}


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

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

    .sh-clients-section{
        padding:50px 16px;
    }

    .sh-header{
        margin-bottom:35px;
    }

    .sh-header h2{
        font-size:34px;
    }

    .sh-header p{
        font-size:16px;
        line-height:1.6;
    }

    /* Cards */

    .sh-category-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .sh-category-card{
        padding:24px 20px;
        border-radius:16px;
    }

    .sh-icon1 svg{
        width:70px;
        height:70px;
    }

    .sh-category-card h3{
        font-size:22px;
        line-height:1.4;
    }

    .sh-count{
        font-size:32px;
    }

    .sh-category-card p{
        font-size:14px;
        line-height:1.7;
    }
}
    /* Filter */
 .company-filter{

        display:flex;

        align-items:center;

        justify-content:space-between;

        gap:6px;

        width:100%;

        padding:0 10px;

        margin:28px auto 22px;   /* Increased top gap */
    }

.filter-btn{

    flex:1;

    min-width:0;

    height:40px;

    padding:0 6px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    font-size:12px;

    font-weight:600;

    white-space:nowrap;
}

.filter-btn span{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;
}

/* Health Button */

.filter-btn[data-filter="health"]{

    flex:1.3;

    min-width:64px;

    font-family:"Century Gothic", sans-serif;

    font-size:12px;

    font-weight:600;

    letter-spacing:0.2px;
}

.filter-btn[data-filter="health"] span{

    white-space:nowrap;
    /* Logo Slider */

    .sh-logo-slider{
        margin-top:25px;
    }

    .sh-company-item{
        min-width:150px;
        height:65px;
        border-radius:14px;
    }

    .sh-company-item img{
        width:110px;
        height:55px;
    }

    .sh-logo-track{
        gap:15px;
        animation-duration:70s;
    }

    .sh-logo-track1{
        gap:15px;
        animation-duration:18s;
    }

    .sh-logo-track2{
        gap:15px;
        animation-duration:14s;
    }

}


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

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

    .sh-clients-section{
        padding:40px 16px;
    }

    .sh-header h2{
        font-size:30px;
        line-height:1.25;
    }

    .sh-header p{
        font-size:15px;
        line-height:1.7;
    }

    .sh-category-card{
        padding:22px 18px;
    }

    .sh-icon1 svg{
        width:64px;
        height:64px;
    }

    .sh-category-card h3{
        font-size:22px;
    }

    .sh-count{
        font-size:30px;
    }

    .sh-category-card p{
        font-size:14px;
        line-height:1.6;
    }

    /* Filter Buttons */

    .company-filter{

        display:flex;

        align-items:center;

        justify-content:space-between;

        gap:6px;

        width:100%;

        padding:0 10px;

         margin:32px auto 22px; 
    }

    .filter-btn{

        flex:1;

        min-width:0;

        height:40px;

        padding:0 6px;

        border-radius:20px;

        font-size:12px;

        font-weight:600;

        white-space:nowrap;

        display:flex;

        align-items:center;

        justify-content:center;
    }

    /* Company Logos */

    .sh-company-item{

        min-width:150px;

        height:65px;

        border-radius:14px;
    }

    .sh-company-item img{

        width:110px;

        height:55px;

        object-fit:contain;
    }

    .sh-logo-track,
    .sh-logo-track1,
    .sh-logo-track2{

        gap:15px;
    }

    .sh-logo-track{

        animation-duration:40s;
    }

    .sh-logo-track1{

        animation-duration:18s;
    }

    .sh-logo-track2{

        animation-duration:14s;
    }

}