/* ==========================================
   TRUSTED CLIENTS SECTION
========================================== */

.clients-section{
    padding:45px 0 70px;
    background:#ffffff;
    position:relative;
    overflow:hidden;
}

.clients-section .container{
    max-width:1280px;
    margin:auto;
    padding:0 24px;
    position:relative;
}

/* ==========================================
   HEADER
========================================== */

.clients-header{
    max-width:760px;
    margin:0 auto 40px;
    text-align:center;
}

.clients-heading{
    font-size:3rem;
    font-weight:800;
    color:#E85A00;
    line-height:1.15;
    margin-bottom:14px;
}

.clients-subheading{
    font-size:1.08rem;
    color:#64748B;
    line-height:1.6;
}

/* ==========================================
   MARQUEE CONTAINER
========================================== */

.marquee-bar-container{

    position:relative;

    width:100%;
    overflow:hidden;

    border-radius:26px;

    background:linear-gradient(
        180deg,
        #ffffff,
        #fcfcfc
    );

    padding:28px 0;

    border:1px solid #EEF2F7;

    box-shadow:
        0 18px 45px rgba(15,23,42,.06),
        0 4px 10px rgba(15,23,42,.03);

}

/* Orange ambient glow */

.marquee-bar-container::before{

    content:"";

    position:absolute;

    width:380px;
    height:160px;

    left:50%;
    top:50%;

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

    background:rgba(232,90,0,.06);

    filter:blur(90px);

    z-index:0;

}

/* Orange Accent Line */

.marquee-bar-container::after{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:65px;

    height:4px;

    border-radius:20px;

    background:#E85A00;

}

/* ==========================================
   MARQUEE
========================================== */

.marquee-wrapper{

    overflow:hidden;
    width:100%;
    position:relative;
    z-index:2;

}

.marquee-track{

    display:flex;
    align-items:center;

    gap:28px;

    width:max-content;

    animation:marqueeScroll 45s linear infinite;

}

.marquee-bar-container:hover .marquee-track{

    animation-play-state:paused;

}

/* ==========================================
   CLIENT PILLS
========================================== */

.client-name{

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

    white-space:nowrap;

    padding:12px 24px;

    font-size:1rem;
    font-weight:700;

    color:#64748B;

    background:#ffffff;

    border:1px solid #EEF2F7;

    border-radius:999px;

    box-shadow:
        0 3px 10px rgba(15,23,42,.04);

    transition:all .25s ease;

}

.client-name:hover{

    transform:translateY(-3px);

    color:#0F172A;

    border-color:#E85A00;

    box-shadow:
        0 10px 22px rgba(232,90,0,.12);

}

/* ==========================================
   ANIMATION
========================================== */

@keyframes marqueeScroll{

    from{
        transform:translateX(0);
    }

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

}

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

@media(max-width:992px){

.clients-heading{

    font-size:2.4rem;

}

.client-name{

    padding:11px 20px;
    font-size:.95rem;

}

}

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

@media(max-width:768px){

.clients-section{

    padding:35px 0 55px;

}

.clients-section .container{

    padding:0 16px;

}

.clients-heading{

    font-size:2rem;

}

.clients-subheading{

    font-size:.95rem;

}

.marquee-bar-container{

    border-radius:20px;

    padding:20px 0;

}

.client-name{

    font-size:.9rem;

    padding:10px 18px;

}

}