.elementor-112607 .elementor-element.elementor-element-39d091d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for container, class: .elementor-element-39d091d *//* ==========================================================
HIRING TIMELINE
========================================================== */

section.hrt-section {
    padding: 0 !important;
    margin: 16px 0 !important;
}

div.hrt-outer {
    border: 1px solid #d6d6d6 !important;
    padding: 7px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}

div.hrt-inner {
    position: relative !important;

    border: 1px solid #d6d6d6 !important;

    padding: 32px 10px 32px !important;

    background: #ffffff !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


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

img.hrt-logo {
    display: block !important;

    width: 140px !important;
    height: auto !important;

    margin: 0 0 80px auto !important;
    padding: 0 !important;

    border-radius: 0 !important;
}


/* ==========================================================
TIMELINE
========================================================== */

div.hrt-timeline {
    position: relative !important;

    display: grid !important;

    grid-template-columns:
        repeat(7, minmax(0, 1fr)) !important;

    column-gap: 10px !important;

    align-items: stretch !important;

    box-sizing: border-box !important;
}


/* ==========================================================
HORIZONTAL LINE
========================================================== */

div.hrt-line {
    position: absolute !important;

    /*
    Center of the icon boxes.
    */
    top: 170px !important;

    left: 50px !important;
    right: 50px !important;

    height: 2px !important;

    background: #d9dddd !important;

    z-index: 1 !important;

    pointer-events: none !important;
}


/* ==========================================================
EACH STEP
========================================================== */

div.hrt-step {
    position: relative !important;
   padding: 10px  !important;
    min-width: 0 !important;
   border-radius: 29px !important;
    text-align: center !important;

    z-index: 2 !important;

    box-sizing: border-box !important;

    transition:
        margin-top 0.25s ease,
        padding 0.25s ease,
        width 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        border-radius 0.25s ease !important;
            border-color: #00c19d;
}


/* ==========================================================
STEP NUMBER
========================================================== */

div.hrt-step-no {
    display: block !important;

    margin: 0 0 119px !important;
    padding: 0 !important;

    color: #94a1a8 !important;

    font-size: 14px !important;
    line-height: 18px !important;

    font-weight: 700 !important;

    letter-spacing: 0.6px !important;

    text-transform: uppercase !important;

    box-sizing: border-box !important;

    transition: color 0.25s ease !important;
}


/* ==========================================================
NORMAL ICON
========================================================== */

div.hrt-icon-box {
    position: relative !important;

    width: 60px !important;
    height: 60px !important;

    margin: 0 auto 91px !important;
    padding: 0 !important;

    border: 2px solid #252b2d !important;

    border-radius: 15px !important;

    background: #ffffff !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    z-index: 4 !important;

    transition:
        border-color 0.25s ease,
        background 0.25s ease !important;
}

div.hrt-icon-box img {
    display: block !important;

    width: 21px !important;
    height: 21px !important;

    object-fit: contain !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 0 !important;

    position: relative !important;

    z-index: 2 !important;
}


/* ==========================================================
STEP 03 ICON INNER
Used only to preserve the existing Step 03
green icon treatment when it is hovered.
========================================================== */

div.hrt-hover-icon-inner {
    width: 100% !important;
    height: 100% !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    border-radius: 12px !important;

    transition:
        width 0.25s ease,
        height 0.25s ease,
        background 0.25s ease !important;
}


/* ==========================================================
FINAL STEP
========================================================== */

div.hrt-icon-box.hrt-finish {
    background: #171d3b !important;

    border-color: #171d3b !important;
}

div.hrt-icon-box.hrt-finish img {
    filter: brightness(0) invert(1) !important;
}


/* ==========================================================
HOVER STATE
APPLIES TO ALL 7 STEPS
========================================================== */

div.hrt-step:hover {
width: 120% !important;

    border: 2px solid #00c9a7 !important;

    background: #f3fbf9 !important;

    box-sizing: border-box !important;

    z-index: 10 !important;
}


/* Hovered step number */

div.hrt-step:hover > .hrt-step-no {
    margin-bottom: 119px !important;

    color: #00a98c !important;
}


/* Hovered icon */

div.hrt-step:hover > .hrt-icon-box {
    border-color: #00c9a7 !important;

    background: #ffffff !important;
}


/* Green inner icon background */

div.hrt-step:hover > .hrt-icon-box::before {
    content: "" !important;

    position: absolute !important;

    width: 45px !important;
    height: 45px !important;

    border-radius: 12px !important;

    background: linear-gradient(
        180deg,
        #00dfb8 0%,
        #00c5a2 100%
    ) !important;

    z-index: 1 !important;
}


/* Keep Step 03's existing inner icon working */

div.hrt-step:hover .hrt-hover-icon-inner {
    width: 45px !important;
    height: 45px !important;

    background: linear-gradient(
        180deg,
        #00dfb8 0%,
        #00c5a2 100%
    ) !important;

    border-radius: 12px !important;

    position: relative !important;

    z-index: 1 !important;
}


/* Hovered icon sizing */

div.hrt-step:hover > .hrt-icon-box img {
    width: 16px !important;
    height: 16px !important;
    filter: brightness(20);
}


/* Step 03 keeps its icon at the same size */

div.hrt-step:hover .hrt-hover-icon-inner img {
    width: 16px !important;
    height: 16px !important;
}


/* Hovered description */

div.hrt-step:hover p.hrt-small {
    color: #00b89b !important;
}


/* ==========================================================
TITLES
========================================================== */

h3.hrt-title {
    margin: 0 !important;
    padding: 0 !important;

    color: #101718 !important;

    font-size: 11px !important;
    min-height: 45px;

    line-height: 15px !important;

    font-weight: 700 !important;

    text-align: center !important;

    box-sizing: border-box !important;
}


/* ==========================================================
DESCRIPTION
========================================================== */

p.hrt-small {
    margin: 43px 0 0 !important;
    padding: 0 !important;

    color: #69747a !important;

    font-size: 10px !important;
    line-height: 15px !important;

    font-weight: 400 !important;

    text-align: center !important;

    transition: color 0.25s ease !important;
}


/* ==========================================================
YOU ARE HERE
========================================================== */

div.hrt-current {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 44px !important;

    margin: 58px auto 0 !important;
    padding: 0 !important;

    background: #071313 !important;

    color: #00d1ad !important;

    border-radius: 25px !important;

    font-size: 10px !important;
    line-height: 1 !important;

    font-weight: 700 !important;

    letter-spacing: 0.5px !important;

    text-transform: uppercase !important;

    box-sizing: border-box !important;
}


/* ==========================================================
IMAGE RESET
========================================================== */

img.hrt-logo,
div.hrt-step img {
    user-select: none !important;

    -webkit-user-drag: none !important;

    border-radius: 0 !important;
}


/* ==========================================================
LARGE DESKTOP
========================================================== */

@media (min-width: 1400px) {

    div.hrt-inner {
        padding: 34px 30px 68px !important;
    }

    img.hrt-logo {
        width: 140px !important;
        margin-bottom: 80px !important;
    }

    div.hrt-timeline {
        column-gap: 27px !important;
    }

    div.hrt-line {
        top: 170px !important;

        left: 50px !important;
        right: 50px !important;
    }

    div.hrt-step-no {
        margin-bottom: 119px !important;
    }

    div.hrt-icon-box {
        width: 60px !important;
        height: 60px !important;

        margin-bottom: 91px !important;
    }

    /* Hover keeps the same dimensions as the original active Step 03 */

 
    div.hrt-hover-icon-inner {
        width: 45px !important;
        height: 45px !important;
    }

    h3.hrt-title {
        font-size: 11px !important;
        line-height: 15px !important;
        min-height: 60px;
    }

    p.hrt-small {
        font-size: 11px !important;
    }
}


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

@media (max-width: 1100px) {

    div.hrt-inner {
        padding: 26px 10px 50px !important;
    }

    img.hrt-logo {
        width: 120px !important;

        margin-bottom: 30px !important;
    }

    div.hrt-timeline {
        column-gap: 10px !important;
    }

    div.hrt-line {
        top: 95px !important;

        left: 35px !important;
        right: 35px !important;
    }

    div.hrt-step-no {
        margin-bottom: 50px !important;

        font-size: 12px !important;
    }

    div.hrt-icon-box {
        width: 50px !important;
        height: 50px !important;

        margin-bottom: 35px !important;

        border-radius: 12px !important;
    }

    div.hrt-icon-box img {
        width: 20px !important;
        height: 20px !important;
    }

    div.hrt-hover-icon-inner {
        border-radius: 9px !important;
    }

    /*
    Tablet hover state.
    Same proportions as the original active state.
    */

    div.hrt-step:hover {
        margin-top: -30px !important;

        padding: 30px 10px 28px !important;

        width: 110% !important;

        border-radius: 22px !important;
    }

    div.hrt-step:hover > .hrt-step-no {
        margin-bottom: 50px !important;
    }

    div.hrt-step:hover > .hrt-icon-box {
        width: 50px !important;
        height: 50px !important;
    }

    div.hrt-step:hover > .hrt-icon-box::before {
        width: 40px !important;
        height: 40px !important;

        border-radius: 10px !important;
    }

    div.hrt-step:hover .hrt-hover-icon-inner {
        width: 40px !important;
        height: 40px !important;
    }

    div.hrt-step:hover > .hrt-icon-box img {
        width: 18px !important;
        height: 18px !important;
    }

    div.hrt-step:hover .hrt-hover-icon-inner img {
        width: 18px !important;
        height: 18px !important;
    }

    h3.hrt-title {
        font-size: 8px !important;
        line-height: 10px !important;
    }

    div.hrt-step h3.hrt-title {
        min-height: 40px !important;
    }

    p.hrt-small {
        margin-top: 35px !important;

        font-size: 8px !important;
        line-height: 12px !important;
    }

    div.hrt-current {
        margin-top: 38px !important;
        font-size: 8px !important;
    }
}


/* ==========================================================
TABLET / SMALL DESKTOP
========================================================== */

@media (max-width: 767px) {

    div.hrt-inner {
        padding: 22px 16px 35px !important;
    }

    img.hrt-logo {
        width: 100px !important;

        margin: 0 auto 35px !important;
    }

    div.hrt-timeline {
        display: flex !important;

        flex-direction: column !important;

        gap: 18px !important;
    }

    /*
    No desktop line on mobile.
    */

    div.hrt-line {
        display: none !important;
    }

    div.hrt-step {
        width: 100% !important;

        padding: 20px !important;

        border: 1px solid #e2e8e6 !important;

        border-radius: 18px !important;

        background: #ffffff !important;

        box-sizing: border-box !important;

        margin-top: 0 !important;
    }

    div.hrt-step-no {
        margin-bottom: 18px !important;
    }

    div.hrt-icon-box {
        width: 64px !important;
        height: 64px !important;

        margin-bottom: 20px !important;

        border-radius: 11px !important;
    }

    div.hrt-icon-box img {
        width: 30px !important;
        height: 30px !important;
    }


    /* ======================================================
       MOBILE HOVER
       Keep the existing mobile layout.
    ====================================================== */

    div.hrt-step:hover {
        margin-top: 0 !important;

        width: 100% !important;

        padding: 24px 20px !important;

        border: 2px solid #00c9a7 !important;

        border-radius: 20px !important;

        background: #f3fbf9 !important;

        box-sizing: border-box !important;
    }

    div.hrt-step:hover > .hrt-step-no {
        margin-bottom: 18px !important;

        color: #00a98c !important;
    }

    div.hrt-step:hover > .hrt-icon-box {
        width: 72px !important;
        height: 72px !important;

        margin-bottom: 20px !important;

        border-radius: 11px !important;
    }

    div.hrt-step:hover > .hrt-icon-box::before {
        width: 58px !important;
        height: 58px !important;

        border-radius: 9px !important;
    }

    div.hrt-step:hover .hrt-hover-icon-inner {
        width: 58px !important;
        height: 58px !important;

        border-radius: 9px !important;
    }

    div.hrt-step:hover > .hrt-icon-box img {
        width: 30px !important;
        height: 30px !important;
    }

    div.hrt-step:hover .hrt-hover-icon-inner img {
        width: 30px !important;
        height: 30px !important;
    }


    /* Titles */

    h3.hrt-title,
    div.hrt-step h3.hrt-title {
        min-height: 0 !important;

        font-size: 17px !important;
        line-height: 24px !important;
    }


    /* Description */

    p.hrt-small {
        margin-top: 17px !important;

        font-size: 14px !important;
        line-height: 21px !important;
    }


    /* Button */

    div.hrt-current {
        width: 145px !important;
        height: 40px !important;

        margin-top: 22px !important;

        font-size: 11px !important;
    }
}


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

@media (max-width: 480px) {

    div.hrt-inner {
        padding: 18px 12px 28px !important;
    }

    img.hrt-logo {
        width: 90px !important;

        margin-bottom: 28px !important;
    }

    div.hrt-step {
        padding: 18px 15px !important;

        border-radius: 16px !important;
    }

    /*
    Keep the hovered mobile card within
    the same existing mobile dimensions.
    */

    div.hrt-step:hover {
        padding: 22px 15px !important;

        border-radius: 18px !important;
    }

    h3.hrt-title,
    div.hrt-step h3.hrt-title {
        font-size: 16px !important;
        line-height: 23px !important;
    }
}
```/* End custom CSS */