@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=DM+Sans:wght@400;500&display=swap');

.careers,
.careers *,
.careers *::before,
.careers *::after{ box-sizing:border-box; }

.careers{
    width:100%;
    padding:80px 0 100px;
    background:#fff;
}

.careers__inner{
    max-width:1440px;
    margin:0 auto;
    padding:0 70px;
}

.careers__head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:60px;
    margin-bottom:70px;
}

.careers__intro{ max-width:520px; }

.careers__title{
    margin:0 0 22px;
    font-family:'Poppins',sans-serif;
    font-size:38px;
    font-weight:700;
    line-height:1.25;
    color:#1b2f72;
}

.careers__title-orange{ color:#f5903e; }

.careers__desc{
    margin:0;
    font-family:'DM Sans',sans-serif;
    font-size:17px;
    line-height:1.8;
    color:#000000;
    max-width:400px;
}

.careers__filters{
    display:flex;
    align-items:center;
    gap:14px;
    flex-shrink:0;
    padding-top:12px;
}

.careers__select-wrap,
.careers__search-wrap{ position:relative; }

.careers__select{
    appearance:none;
    -webkit-appearance:none;
    width:190px;
    height:38px;
    padding:0 32px 0 14px;
    border:1px solid #d9d9d9;
    border-radius:4px;
    background:#fff;
    font-family:'DM Sans',sans-serif;
    font-size:16px;
    color:#444;
    cursor:pointer;
    transition:border-color .25s ease;
}

.careers__select:hover{ border-color:#b6b6b6; }

.careers__select:focus-visible{
    outline:2px solid #f5903e;
    outline-offset:2px;
}

.careers__select-wrap::after{
    content:"⌄";
    position:absolute;
    top:50%;
    right:12px;
    transform:translateY(-65%);
    font-size:15px;
    color:#666;
    pointer-events:none;
}

.careers__search{
    width:220px;
    height:38px;
    padding:0 34px 0 14px;
    border:1px solid #d9d9d9;
    border-radius:4px;
    background:#fff;
    font-family:'DM Sans',sans-serif;
    font-size:14px;
    color:#333;
    transition:border-color .25s ease;
}

.careers__search::placeholder{ color:#9a9a9a; }

.careers__search:hover{ border-color:#b6b6b6; }

.careers__search:focus-visible{
    outline:2px solid #f5903e;
    outline-offset:2px;
}

.careers__search-icon{
    position:absolute;
    top:50%;
    right:12px;
    transform:translateY(-50%);
    font-size:15px;
    color:#666;
    pointer-events:none;
}

.job{ border-top:1px solid #f0d9c4; }

.job:last-child{ border-bottom:1px solid #f0d9c4; }

.job__head{
    position:relative;
    width:100%;
    display:grid;
    grid-template-columns:1fr 1.25fr auto;
    align-items:start;
    gap:40px;
    padding:34px 0 30px;
    cursor:pointer;
    text-align:left;
}

.job__head:focus-visible{
    outline:2px solid #f5903e;
    outline-offset:-4px;
}

.job__dots{
    position:absolute;
    top:14px;
    left:0;
    display:flex;
    gap:3px;
}

.job__dots span{
    display:block;
    width:4px;
    height:4px;
    border-radius:50%;
    background:#f5903e;
}

.job__tag{
    display:inline-block;
    padding:3px 9px;
    margin-bottom:12px;
    border-radius:3px;
    background:#fbe6d3;
    font-family:'Poppins',sans-serif;
    font-size:8px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#b0651f;
}

.job__title{
    margin:0;
    font-family:'Poppins',sans-serif;
    font-size:18px;
    font-weight:600;
    line-height:1.4;
    color:#1b2f72;
    transition:color .25s ease;
}

.job__head:hover .job__title{ color:#f5903e; }

.job__summary{
    margin:0 0 16px;
    font-family:'DM Sans',sans-serif;
    font-size:14px;
    line-height:1.75;
    color:#4a4a4a;
}

.job__meta{
    display:flex;
    flex-wrap:wrap;
    gap:22px;
}

.job__meta span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:'DM Sans',sans-serif;
    font-size:11px;
    color:#7a7a7a;
}

.job__meta i{
    font-style:normal;
    font-size:11px;
    color:#a3a3a3;
}

.job__btn{
    align-self:center;
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 18px;
    border-radius:30px;
    background:#f5903e;
    color:#fff;
    font-family:'DM Sans',sans-serif;
    font-size:11px;
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;
    transition:background .25s ease, transform .25s ease;
}

.job__head:hover .job__btn{
    background:#ffa658;
    transform:translateY(-2px);
}

.job__btn:focus-visible{
    outline:2px solid #1b2f72;
    outline-offset:3px;
}

.job__btn span{ font-size:12px; }

.job__panel{
    max-height:0;
    overflow:hidden;
    transition:max-height .45s cubic-bezier(.22,1,.36,1);
}

.job.active .job__panel{ max-height:800px; }

.job__panel-inner{
    display:grid;
    grid-template-columns:1fr 1.25fr auto;
    gap:40px;
    padding:0 0 38px;
    opacity:0;
    transform:translateY(-8px);
    transition:opacity .35s ease .05s, transform .35s ease .05s;
}

.job.active .job__panel-inner{
    opacity:1;
    transform:translateY(0);
}

.job__panel-inner::before{ content:""; }

.job__panel-body{
    grid-column:2;
    max-width:560px;
}

.job__panel-body h2,
.job__panel-body h3,
.job__panel-body h4{
    margin:0 0 10px;
    font-family:'Poppins',sans-serif;
    font-size:13px;
    font-weight:600;
    color:#1b2f72;
}

.job__panel-body p{
    margin:0 0 22px;
    font-family:'DM Sans',sans-serif;
    font-size:13px;
    line-height:1.8;
    color:#4a4a4a;
}

.job__panel-body ul,
.job__panel-body ol{
    margin:0 0 22px;
    padding:0 0 0 18px;
}

.job__panel-body li{
    margin-bottom:8px;
    font-family:'DM Sans',sans-serif;
    font-size:13px;
    line-height:1.7;
    color:#4a4a4a;
}

.job__panel-body > *:last-child{ margin-bottom:0; }

.job.is-hidden{ display:none; }

.careers__empty{
    display:none;
    padding:50px 0;
    font-family:'DM Sans',sans-serif;
    font-size:14px;
    color:#7a7a7a;
    text-align:center;
}

.careers__empty.show{ display:block; }

@media(max-width:1100px){

.careers__inner{ padding:0 40px; }

.careers__head{
    flex-direction:column;
    gap:34px;
    margin-bottom:50px;
}

.careers__filters{ padding-top:0; }

.job__head{
    grid-template-columns:1fr 1fr;
    gap:26px;
}

.job__btn{
    grid-column:1 / -1;
    justify-self:start;
    align-self:start;
    margin-top:6px;
}

.job__panel-inner{
    grid-template-columns:1fr 1fr;
    gap:26px;
}

}
/* ===== CAREERS — breadcrumb ===== */

.careers-page .breadcrumb-wrapper {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    /* background: transparent !important;
    transform: none !important; */
}

.careers-page .breadcrumb-wrapper .breadcrumb,
.careers-page .breadcrumb-wrapper .breadcrumb a,
.careers-page .breadcrumb-wrapper .breadcrumb span {
    color: #0f1b3c !important;
}

.careers-page .breadcrumb-wrapper .breadcrumb {
    max-width: 1440px;
    margin: 0 auto !important;
    padding: 100px 70px 100px !important;
}

.careers-page .careers {
    padding-top: 60px;
}
@media(max-width:760px){

.careers{ padding:50px 0 70px; }

.careers__inner{ padding:0 22px; }

.careers__title{ font-size:28px; }

.careers__filters{
    flex-direction:column;
    align-items:stretch;
    width:100%;
}

.careers__select,
.careers__search{ width:100%; }

.job__head{
    grid-template-columns:1fr;
    gap:16px;
    padding:28px 0 24px;
}

.job__dots{ top:10px; }

.job__meta{ gap:14px; }

.job__panel-inner{
    grid-template-columns:1fr;
    gap:0;
}

.job__panel-inner::before{ display:none; }

.job__panel-body{
    grid-column:1;
    max-width:100%;
}

.job.active .job__panel{ max-height:1200px; }

}

@media(prefers-reduced-motion:reduce){

.job__panel,
.job__panel-inner,
.job__btn,
.job__title{ transition:none; }

.job__head:hover .job__btn{ transform:none; }

}

/*=========================================
  CAREERS APPLICATION POPUP
=========================================*/

.application-popup{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.65);
    backdrop-filter:blur(8px);
    display:none;
    justify-content:center;
    align-items:center;
    padding:40px;
    z-index:99999;
    animation:fadeIn .35s ease;
}

.application-popup.show{
    display:flex;
}

.application-popup__content{
    width:min(1400px,96vw);
    max-height:92vh;
    overflow:hidden;
    background:#ffffff;
    border-radius:24px;
    position:relative;
    box-shadow:0 25px 80px rgba(0,0,0,.15);
    display:flex;
    flex-direction:column;
}

/*=========================================
  CLOSE BUTTON
=========================================*/

.popup-close{
    position:absolute;
    top:24px;
    right:24px;
    width:46px;
    height:46px;
    border:none;
    background:#f5f5f5;
    border-radius:50%;
    font-size:28px;
    cursor:pointer;
    transition:.3s;
    z-index:5;
}

.popup-close:hover{
    background:#F58220;
    color:#fff;
    transform:rotate(90deg);
}

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

.popup-header{
    padding:45px 55px 30px;
    border-bottom:1px solid #ECECEC;
}

.popup-tag{
    display:inline-flex;
    align-items:center;
    padding:8px 18px;
    background:#FFF3E8;
    color:#F58220;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.popup-header h2{
    margin:18px 0 12px;
    font-size:42px;
    line-height:1.2;
    font-weight:700;
    color:#172B4D;
}

.popup-meta{
    display:flex;
    flex-wrap:wrap;
    gap:22px;
    color:#5F6C7B;
    font-size:15px;
}

.popup-meta span{
    display:flex;
    align-items:center;
    gap:8px;
}

/*=========================================
  BODY
=========================================*/

.popup-body{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    height:100%;
    overflow:hidden;
}

/*=========================================
  LEFT SIDE
=========================================*/

.popup-job{
    padding:50px 55px;
    overflow-y:auto;
    border-right:1px solid #ECECEC;
}

.popup-job::-webkit-scrollbar{
    width:8px;
}

.popup-job::-webkit-scrollbar-thumb{
    background:#d7d7d7;
    border-radius:30px;
}

.popup-job h3{
    margin:0 0 18px;
    color:#172B4D;
    font-size:24px;
    font-weight:700;
}

.popup-job h4{
    margin:35px 0 14px;
    color:#172B4D;
    font-size:20px;
    font-weight:600;
}

.popup-job p{
    margin-bottom:18px;
    color:#4E5968;
    font-size:17px;
    line-height:1.9;
}

.popup-job ul{
    margin:18px 0;
    padding-left:22px;
}

.popup-job li{
    margin-bottom:12px;
    color:#4E5968;
    line-height:1.8;
    font-size:16px;
}

.popup-job strong{
    color:#172B4D;
}

.popup-job hr{
    margin:35px 0;
    border:none;
    border-top:1px solid #ECECEC;
}

/*=========================================
  RIGHT SIDE CONTAINER
=========================================*/

.popup-form{
    padding:50px;
    overflow-y:auto;
    background:#FAFBFD;
}

.popup-form::-webkit-scrollbar{
    width:8px;
}

.popup-form::-webkit-scrollbar-thumb{
    background:#d7d7d7;
    border-radius:30px;
}

.popup-form h3{
    margin:0 0 28px;
    font-size:28px;
    font-weight:700;
    color:#172B4D;
}

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

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}
/*=========================================
  FORM LAYOUT
=========================================*/

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-bottom:20px;
}

.form-group{
    display:flex;
    flex-direction:column;
    margin-bottom:22px;
}

.form-group label{
    margin-bottom:8px;
    font-size:14px;
    font-weight:600;
    color:#172B4D;
}

.form-group label span{
    color:#F58220;
}

.form-group small{
    margin-top:8px;
    font-size:12px;
    color:#7B8794;
}

/*=========================================
  INPUTS
=========================================*/

.form-group input,
.form-group textarea,
.form-group select{
    width:100%;
    padding:15px 18px;
    border:1px solid #D9E2EC;
    border-radius:14px;
    background:#fff;
    font-size:15px;
    font-family:'DM Sans',sans-serif;
    color:#172B4D;
    transition:.3s ease;
}

.form-group textarea{
    resize:vertical;
    min-height:140px;
}

.form-group input::placeholder,
.form-group textarea::placeholder{
    color:#A0AEC0;
}

.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover{
    border-color:#BAC8D6;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
    outline:none;
    border-color:#F58220;
    box-shadow:0 0 0 4px rgba(245,130,32,.12);
}

/*=========================================
  FILE UPLOAD
=========================================*/

.form-group input[type=file]{
    padding:14px;
    border:2px dashed #D9E2EC;
    background:#fff;
    cursor:pointer;
    border-radius:14px;
}

.form-group input[type=file]:hover{
    border-color:#F58220;
    background:#FFF8F2;
}

.form-group input[type=file]::file-selector-button{
    padding:10px 18px;
    margin-right:15px;
    border:none;
    border-radius:10px;
    background:#F58220;
    color:#fff;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.form-group input[type=file]::file-selector-button:hover{
    background:#DB6C0B;
}

/*=========================================
  CHECKBOX
=========================================*/

.form-check{
    margin:10px 0 25px;
}

.form-check label{
    display:flex;
    align-items:flex-start;
    gap:12px;
    cursor:pointer;
    font-size:14px;
    line-height:1.6;
    color:#52606D;
}

.form-check input{
    width:18px;
    height:18px;
    margin-top:2px;
    accent-color:#F58220;
}

/*=========================================
  SUBMIT BUTTON
=========================================*/

.submit-btn{
    width:100%;
    border:none;
    border-radius:14px;
    padding:18px;
    background:#F58220;
    color:#fff;
    font-size:16px;
    font-weight:700;
    font-family:'Poppins',sans-serif;
    cursor:pointer;
    transition:.3s ease;
}

.submit-btn:hover{
    background:#DB6C0B;
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(245,130,32,.25);
}

.submit-btn:active{
    transform:translateY(0);
}

.submit-btn:disabled{
    opacity:.6;
    cursor:not-allowed;
}

/*=========================================
  VALIDATION
=========================================*/

.form-group input.error,
.form-group textarea.error{
    border-color:#DC2626;
}

.form-group .error-message{
    margin-top:6px;
    color:#DC2626;
    font-size:12px;
}

.form-group input.success,
.form-group textarea.success{
    border-color:#16A34A;
}

/*=========================================
  SUCCESS MESSAGE
=========================================*/

.form-success{
    display:none;
    text-align:center;
    padding:30px;
}

.form-success.show{
    display:block;
}

.form-success h3{
    color:#16A34A;
    margin-bottom:12px;
    font-size:28px;
}

.form-success p{
    color:#52606D;
    line-height:1.7;
}
/*=========================================
  RESPONSIVE
=========================================*/

@media (max-width:1200px){

    .application-popup{
        padding:20px;
    }

    .application-popup__content{
        width:100%;
        max-height:95vh;
    }

    .popup-header{
        padding:35px;
    }

    .popup-job{
        padding:35px;
    }

    .popup-form{
        padding:35px;
    }

}

@media (max-width:991px){

    .popup-body{
        grid-template-columns:1fr;
        overflow:auto;
    }

    .popup-job{
        border-right:none;
        border-bottom:1px solid #ECECEC;
        max-height:420px;
    }

    .popup-form{
        background:#fff;
    }

    .popup-header h2{
        font-size:34px;
    }

}

@media (max-width:768px){

    .application-popup{
        padding:0;
        align-items:flex-end;
    }

    .application-popup__content{
        width:100%;
        height:100vh;
        max-height:100vh;
        border-radius:24px 24px 0 0;
    }

    .popup-header{
        padding:25px;
    }

    .popup-header h2{
        font-size:28px;
    }

    .popup-meta{
        flex-direction:column;
        gap:10px;
    }

    .popup-job{
        padding:25px;
    }

    .popup-form{
        padding:25px;
    }

    .form-row{
        grid-template-columns:1fr;
        gap:0;
    }

    .popup-form h3{
        font-size:24px;
    }

    .popup-job h3{
        font-size:22px;
    }

}

@media (max-width:576px){

    .popup-close{
        width:40px;
        height:40px;
        font-size:22px;
        top:18px;
        right:18px;
    }

    .popup-tag{
        font-size:11px;
        padding:6px 14px;
    }

    .popup-header h2{
        font-size:24px;
        margin-top:15px;
    }

    .popup-meta{
        font-size:14px;
    }

    .popup-job p,
    .popup-job li{
        font-size:15px;
    }

    .form-group input,
    .form-group textarea,
    .form-group select{
        padding:14px;
        font-size:14px;
    }

    .submit-btn{
        padding:16px;
        font-size:15px;
    }

}

/*=========================================
  SMOOTH SCROLL
=========================================*/

.popup-job,
.popup-form{
    scroll-behavior:smooth;
}

/*=========================================
  STICKY SUBMIT
=========================================*/

@media (max-width:768px){

    .popup-form{

        padding-bottom:100px;

    }

    .submit-btn{

        position:sticky;
        bottom:0;
        z-index:5;

        border-radius:14px;

        box-shadow:0 -8px 20px rgba(0,0,0,.08);

    }

}

/*=========================================
  POPUP OPEN ANIMATION
=========================================*/

.application-popup.show .application-popup__content{

    animation:popupScale .35s ease;

}

@keyframes popupScale{

    from{

        opacity:0;
        transform:translateY(40px) scale(.96);

    }

    to{

        opacity:1;
        transform:translateY(0) scale(1);

    }

}