/*==============================================================
                TECHNOLOGY LOGO SLIDER
==============================================================*/

.technology-slider{

    position:relative;

    overflow:hidden;

    background:#ffffff;

    padding:70px 0;

}

/*----------------------------------
    Slider Container
----------------------------------*/

.logo-slider{

    position:relative;

    width:100%;

    overflow:hidden;

    padding:5px 0;

}

/* Fade effect on both sides */

.logo-slider::before,
.logo-slider::after{

    content:"";

    position:absolute;

    top:0;

    width:140px;

    height:100%;

    z-index:5;

    pointer-events:none;

}

.logo-slider::before{

    left:0;

    background:linear-gradient(
        to right,
        #ffffff 0%,
        rgba(255,255,255,0) 100%
    );

}

.logo-slider::after{

    right:0;

    background:linear-gradient(
        to left,
        #ffffff 0%,
        rgba(255,255,255,0) 100%
    );

}

/*----------------------------------
    Logo Track
----------------------------------*/

.logo-track{

    display:flex;

    align-items:center;

    gap:28px;

    width:max-content;

    animation:logoScroll 40s linear infinite;

}

/* Pause on Hover */

.logo-slider:hover .logo-track{

    animation-play-state:paused;

}

/*----------------------------------
    Individual Card
----------------------------------*/

.logo-card{

     flex:0 0 auto;

    width:210px;

    height:130px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:20px;

    padding:18px;

    transition:all .35s ease;

    box-shadow:
        0 10px 25px rgba(9,30,66,.05);

}

/* Hover */

.logo-card:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

    box-shadow:
        0 18px 45px rgba(10,132,255,.18);

}

/*----------------------------------
    Logo Image
----------------------------------*/

.logo-card img{

        width:80%;

    height:80%;

    object-fit:contain;

    transition:all .35s ease;

    filter:grayscale(40%) opacity(.75);


}

.logo-card:hover img{

    filter:none;

    transform:scale(1.08);

}

/*----------------------------------
    Infinite Animation
----------------------------------*/

@keyframes logoScroll{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

/*----------------------------------
    Responsive
----------------------------------*/

@media(max-width:992px){

.logo-card{

    width:150px;

    height:85px;

}

.logo-card img{

    max-width:100px;

    max-height:38px;

}

.logo-track{

    gap:20px;

    animation-duration:32s;

}

}

@media(max-width:768px){

.logo-card{

    width:130px;

    height:75px;

    padding:18px;

}

.logo-card img{

    max-width:85px;

    max-height:32px;

}

.logo-slider::before,
.logo-slider::after{

    width:60px;

}

.logo-track{

    gap:16px;

    animation-duration:26s;

}

}