.elementor-42410 .elementor-element.elementor-element-3315b2d{--display:flex;}/* Start custom CSS for html, class: .elementor-element-7de1e4f *//* ==========================================
   EMPLOYEE BENEFITS
========================================== */

.employee-benefits{
    padding:80px 20px;
    background:#ffffff;
    overflow:hidden;
}

.benefits-wrapper{
    max-width:1300px;
    margin:auto;
    position:relative;
}

.benefits-heading{
    text-align:center;
    font-size:42px;
    font-weight:700;
    color:#222;
    margin-bottom:80px;
}


/* ==========================================
   SLIDER
========================================== */

.benefits-slider{
    position:relative;
    width:100%;
    /* tooltip is absolutely positioned inside this, so give it room below */
    padding-bottom:40px;
}

.slider-window{
    overflow:hidden;
    width:100%;
}

.benefits-track{
    display:flex;
    align-items:flex-start;
    gap:45px;
    transition:transform .45s ease;
    padding:30px 0;
    /* IMPORTANT: track must size to its content, not stretch to 100%,
       otherwise JS translateX math to center the active item breaks */
    width:max-content;
}


/* ==========================================
   BENEFIT ITEM
========================================== */

.benefit-item{
    width:120px;
    flex-shrink:0;
    text-align:center;
    cursor:pointer;
    transition:.35s;
    opacity:.18;
    transform:scale(.72);
}


/* ==========================================
   ICON CIRCLE
========================================== */

.icon-circle{
    width:78px;
    height:78px;
    margin:auto;
    border:2px solid #dcdcdc;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    transition:.35s;
}

.icon-circle img{
    width:40px;
    height:40px;
    object-fit:contain;
}


/* ==========================================
   TITLE
========================================== */

.benefit-title{
    display:block;
    margin-top:18px;
    font-size:15px;
    font-weight:600;
    color:#444;
    line-height:1.4;
}


/* ==========================================
   ACTIVE
========================================== */

.benefit-item.active{
    opacity:1;
    transform:scale(1);
}

.benefit-item.active .icon-circle{
    width:95px;
    height:95px;
    border:3px solid #49b9dd;
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.benefit-item.active .icon-circle img{
    width:50px;
    height:50px;
}


/* ==========================================
   NEAR ITEMS
========================================== */

.benefit-item.near{
    opacity:.55;
    transform:scale(.86);
}


/* ==========================================
   FAR ITEMS
========================================== */

.benefit-item.far{
    opacity:.28;
    transform:scale(.74);
}


/* ==========================================
   TOOLTIP
   (repositioned: now sits below the slider/arrows,
   centered horizontally, instead of overlapping the heading)
========================================== */

.benefit-tooltip{
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    margin-top:20px;
    width:360px;
    max-width:90vw;
    background:#fff;
    border-radius:16px;
    padding:24px;
    box-shadow:0 18px 40px rgba(0,0,0,.16);
    text-align:center;
    opacity:0;
    visibility:hidden;
    transition:.30s;
    z-index:20;
    pointer-events:none;
}

.benefit-tooltip.show{
    opacity:1;
    visibility:visible;
}

.benefit-tooltip h3{
    margin:0 0 10px;
    font-size:22px;
}

.benefit-tooltip p{
    margin:0;
    color:#666;
    line-height:1.7;
}

.tooltip-arrow{
    position:absolute;
    top:-9px;
    left:50%;
    width:18px;
    height:18px;
    background:#fff;
    transform:translateX(-50%) rotate(45deg);
}


/* ==========================================
   CENTER ARROWS
========================================== */

.center-navigation{
    position:absolute;
    top:72px;
    left:50%;
    transform:translateX(-50%);
    width:240px;
    display:flex;
    justify-content:space-between;
    pointer-events:none;
}

.nav-btn{
    width:46px;
    height:46px;
    border:none;
    border-radius:50%;
    background:#fff;
    box-shadow:0 8px 20px rgba(0,0,0,.12);
    cursor:pointer;
    font-size:22px;
    transition:.25s;
    pointer-events:auto;
}

.nav-btn:hover{
    background:#49b9dd;
    color:#fff;
}


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

@media(max-width:992px){
    .benefits-track{
        gap:30px;
    }
    .benefits-heading{
        font-size:34px;
    }
}


@media(max-width:768px){
    .benefits-heading{
        font-size:28px;
    }
    .benefits-track{
        gap:18px;
    }
    .benefit-item{
        width:90px;
    }
    .icon-circle{
        width:60px;
        height:60px;
    }
    .benefit-item.active .icon-circle{
        width:78px;
        height:78px;
    }
    .benefit-tooltip{
        width:280px;
    }
    .center-navigation{
        width:180px;
    }
}/* End custom CSS */