/* ===========================
   Technology Logo HRBX
   Smooth CSS Marquee Slider
=========================== */

.technology-logo-hrbx-section{
    position:relative;
    background:#eef5ff;
}

.technology-logo-hrbx-section,
.technology-logo-hrbx-section *{
    box-sizing:border-box;
}

/* ===========================
   Header
=========================== */

.technology-logo-hrbx-header{
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
}

.technology-logo-hrbx-description p{
    margin:0;
}

/* ===========================
   Wrapper
=========================== */

.technology-logo-hrbx-wrapper{
    width:100%;
}

.technology-logo-hrbx-content-wrap{
    position:relative;
    width:100%;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
}

/* ===========================
   Tabs
=========================== */

.technology-logo-hrbx-tabs{
    align-items:center;
}

.technology-logo-hrbx-tab{
    border:0;
    cursor:pointer;
    text-align:center;
    box-shadow:0 4px 12px rgba(31, 64, 104, .08);
}

.technology-logo-hrbx-tab:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(31, 64, 104, .12);
}

.technology-logo-hrbx-tab.active{
    background:#2d94ed;
    color:#ffffff;
    box-shadow:0 10px 22px rgba(45, 148, 237, .25);
}

/* ===========================
   Content
=========================== */

.technology-logo-hrbx-content{
    display:none;
    position:relative;
    width:100%;
}

.technology-logo-hrbx-content.active{
    display:block;
}

/* ===========================
   Stage
=========================== */

.technology-logo-hrbx-stage{
    width:100%;
    min-height:120px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#ffffff;
    border:1px solid #b7d9fb;
    border-radius:12px;
    box-shadow:none;
}

.technology-logo-hrbx-no-logos .technology-logo-hrbx-stage{
    display:none;
}

/* ===========================
   Smooth Marquee Slider
=========================== */

.technology-logo-hrbx-slider{
    width:100%;
    overflow:hidden;
    min-width:0;
}

.technology-logo-hrbx-marquee-track{
    display:flex;
    width:max-content;
    animation:technologyLogoMarquee var(--marquee-duration, 30s) linear infinite;
    will-change:transform;
}

.technology-logo-hrbx-marquee-group{
    display:flex;
    align-items:center;
    flex-shrink:0;
}

/* Hover par slider stop */
.technology-logo-hrbx-stage:hover .technology-logo-hrbx-marquee-track,
.technology-logo-hrbx-slider:hover .technology-logo-hrbx-marquee-track{
    animation-play-state:paused;
}

@keyframes technologyLogoMarquee{
    from{
        transform:translate3d(0, 0, 0);
    }

    to{
        transform:translate3d(-50%, 0, 0);
    }
}

/* ===========================
   Logo Item
=========================== */

.technology-logo-hrbx-logo-item{
    width:200px;
    min-width:200px;
    text-align:center;
    outline:none;
}

.technology-logo-hrbx-logo-box{
    width:100%;
    height:80px;
    min-height:80px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px 12px;
    background:#ffffff;
    border:1px solid #d8d8cb;
    border-radius:6px;
    box-shadow:0 4px 10px 0 #00000033;
    overflow:hidden;
}

.technology-logo-hrbx-logo-box img{
    display:block;
    width:auto;
    max-width:170px;
    max-height:56px;
    object-fit:contain;
    margin:0 auto;
    transition:transform .25s ease, opacity .25s ease;
}

.technology-logo-hrbx-logo-item:hover img{
    transform:translateY(-1px);
    opacity:.94;
}

.technology-logo-hrbx-logo-name{
    word-break:break-word;
}

/* ===========================
   Responsive
=========================== */

@media(max-width:768px){
    .technology-logo-hrbx-tabs{
        justify-content:flex-start;
        flex-wrap:nowrap;
        overflow-x:auto;
        padding-bottom:8px;
        scrollbar-width:none;
    }
    .technology-logo-hrbx-logo-item {
        padding: 0 5px !important;
    }

    .technology-logo-hrbx-tabs::-webkit-scrollbar{
        display:none;
    }

    .technology-logo-hrbx-tab{
        flex:0 0 auto;
        white-space:normal;
    }

    .technology-logo-hrbx-stage{
        min-height:110px;
    }

    .technology-logo-hrbx-logo-item{
        width:150px;
        min-width:150px;
    }

    .technology-logo-hrbx-logo-box{
        height:72px;
        min-height:72px;
    }

    .technology-logo-hrbx-logo-box img{
        max-height:50px;
        max-width:100px;
    }
}

@media(max-width:520px){
    body .technology-logo-hrbx-stage {
        padding: 20px 10px;
    }
    .technology-logo-hrbx-logo-item{
        width:140px;
        min-width:140px;
    }

    .technology-logo-hrbx-logo-box{
        min-height:68px;
        padding:8px 10px;
    }

    .technology-logo-hrbx-logo-box img{
        max-height:46px;
        max-width:115px;
    }
}

@media(prefers-reduced-motion: reduce){
    .technology-logo-hrbx-marquee-track{
        animation:none;
    }
}