/*==================================================
APPLUMY CAREERS PAGE
==================================================*/

/*==================================
CAREER FORM
==================================*/

.career-form-section{

    padding:120px 0 10px;

    background:#000;

    position:relative;

    overflow:hidden;

}

.career-form-section::before{

    content:"";

    position:absolute;

    top:-250px;

    right:-250px;

    width:650px;

    height:650px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(255,255,255,.04),
    transparent 70%);

}

.career-wrapper{

    display:grid;

    grid-template-columns:0.9fr 1.1fr;

    gap:80px;

    align-items:start;

    position:relative;

    z-index:2;

}

/*==================================
LEFT CONTENT
==================================*/

.career-content{

    position:sticky;

    top:120px;

}

.section-badge{

    display:inline-flex;

    align-items:center;

    padding:10px 22px;

    border:1px solid rgba(255,255,255,.08);

    border-radius:999px;

    color:#FFF;

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:25px;

}

.career-content h2{

    color:#FFF;

    font-size:36px;

    line-height:1.1;

    margin-bottom:25px;

}

.career-content p{

    color:#B5B5B5;

    font-size:16px;

    line-height:1.9;

    margin-bottom:40px;

}

/*==================================
BENEFITS
==================================*/

.career-benefits{

    display:grid;

    gap:18px;

}

.benefit{

    display:flex;

    align-items:center;

    gap:14px;

    color:#FFF;

    font-size:17px;

    padding:18px 22px;

    background:#0B0B0B;

    border:1px solid rgba(255,255,255,.08);

    border-radius:16px;

    transition:.35s;

}

.benefit:hover{

    transform:translateX(10px);

    border-color:rgba(255,255,255,.18);

}

/*==================================
FORM BOX
==================================*/

.career-form-box{

    background:#0B0B0B;

    border:1px solid rgba(255,255,255,.08);

    border-radius:30px;

    padding:50px;

}

.career-form-box h3{

    color:#FFF;

    font-size:38px;

    margin-bottom:35px;

}

/*==================================
FORM GRID
==================================*/

.form-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

}

.form-group{

    margin-bottom:22px;

}

.form-group.full{

    width:100%;

}

/*==================================
INPUT
==================================*/

.form-group input,

.form-group select,

.form-group textarea{

    width:100%;

    background:#111;

    border:1px solid rgba(255,255,255,.08);

    border-radius:16px;

    color:#FFF;

    padding:18px 22px;

    font-size:16px;

    outline:none;

    transition:.35s;

    font-family:inherit;

}

.form-group input::placeholder,

.form-group textarea::placeholder{

    color:#8A8A8A;

}

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus{

    border-color:#FFF;

}

/*==================================
SELECT
==================================*/

.form-group select{

    appearance:none;

    cursor:pointer;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M3.204 5h9.592L8 11z'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 18px center;

    padding-right:55px;

}

/*==================================
FILE INPUT
==================================*/

.form-group input[type=file]{

    padding:15px;

    cursor:pointer;

}

.form-group input[type=file]::file-selector-button{

    background:#FFF;

    color:#000;

    border:none;

    border-radius:10px;

    padding:12px 18px;

    margin-right:15px;

    cursor:pointer;

    font-weight:600;

    transition:.35s;

}

.form-group input[type=file]::file-selector-button:hover{

    background:#DDD;

}
/*==================================================
TEXTAREA
==================================================*/

.form-group textarea{

    min-height:180px;

    resize:vertical;

    line-height:1.8;

}

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

.career-btn{

    width:100%;

    height:62px;

    border:none;

    border-radius:16px;

    background:#FFF;

    color:#000;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.35s ease;

    margin-top:10px;

}

.career-btn:hover{

    transform:translateY(-5px);

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

}

.career-btn:active{

    transform:scale(.98);

}

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

.career-success{

    padding:18px 24px;

    margin-bottom:25px;

    border-radius:14px;

    background:#0F2A14;

    color:#7CFF9A;

    border:1px solid rgba(124,255,154,.20);

    font-size:15px;

    line-height:1.7;

}

/*==================================================
ERROR MESSAGE
==================================================*/

.career-error{

    padding:18px 24px;

    margin-bottom:25px;

    border-radius:14px;

    background:#2A1010;

    color:#FF9C9C;

    border:1px solid rgba(255,120,120,.20);

    font-size:15px;

    line-height:1.7;

}

/*==================================================
FIELD ERROR
==================================================*/

.form-group.error input,

.form-group.error textarea,

.form-group.error select{

    border-color:#ff5c5c;

}

.form-group small{

    display:block;

    margin-top:8px;

    color:#ff8a8a;

    font-size:13px;

}

/*==================================================
LOADING BUTTON
==================================================*/

.career-btn.loading{

    pointer-events:none;

    opacity:.75;

    position:relative;

}

.career-btn.loading::after{

    content:"";

    width:20px;

    height:20px;

    border-radius:50%;

    border:2px solid rgba(0,0,0,.25);

    border-top-color:#000;

    position:absolute;

    right:22px;

    top:50%;

    margin-top:-10px;

    animation:careerSpin .8s linear infinite;

}

@keyframes careerSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*==================================================
FORM HOVER
==================================================*/

.form-group input:hover,

.form-group textarea:hover,

.form-group select:hover{

    border-color:rgba(255,255,255,.18);

}

.career-form-box{

    transition:.35s ease;

}

.career-form-box:hover{

    box-shadow:0 35px 90px rgba(255,255,255,.04);

}

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

.career-content{

    animation:leftFade .8s ease forwards;

}

.career-form-box{

    animation:rightFade .8s ease forwards;

}

.benefit{

    opacity:0;

    animation:benefitFade .7s ease forwards;

}

.benefit:nth-child(1){animation-delay:.10s;}
.benefit:nth-child(2){animation-delay:.20s;}
.benefit:nth-child(3){animation-delay:.30s;}
.benefit:nth-child(4){animation-delay:.40s;}
.benefit:nth-child(5){animation-delay:.50s;}
.benefit:nth-child(6){animation-delay:.60s;}

@keyframes leftFade{

    from{

        opacity:0;

        transform:translateX(-40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes rightFade{

    from{

        opacity:0;

        transform:translateX(40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes benefitFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
INPUT AUTOFILL
==================================================*/

input:-webkit-autofill,

input:-webkit-autofill:hover,

input:-webkit-autofill:focus{

    -webkit-text-fill-color:#FFF;

    -webkit-box-shadow:0 0 0px 1000px #111 inset;

}
/*==================================================
LARGE LAPTOP
==================================================*/

@media(max-width:1200px){

.career-wrapper{

grid-template-columns:1fr;

gap:70px;

}

.career-content{

position:relative;

top:auto;

text-align:center;

max-width:850px;

margin:auto;

}

.career-benefits{

grid-template-columns:repeat(2,1fr);

margin-top:40px;

}

}

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

@media(max-width:991px){

.career-form-section{

padding:100px 0;

}

.career-content h2{

font-size:46px;

}

.career-form-box{

padding:40px;

}

.form-grid{

grid-template-columns:1fr;

gap:18px;

}

}

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

@media(max-width:767px){

.career-form-section{

padding:80px 0;

}

.career-wrapper{

gap:50px;

}

.career-content{

text-align:center;

}

.career-content h2{

font-size:34px;

line-height:1.2;

}

.career-content p{

font-size:16px;

}

.career-benefits{

grid-template-columns:1fr;

}

.benefit{

padding:16px 18px;

font-size:15px;

}

.career-form-box{

padding:30px 24px;

border-radius:24px;

}

.career-form-box h3{

font-size:30px;

margin-bottom:25px;

}

.form-group{

margin-bottom:18px;

}

.form-group input,

.form-group textarea,

.form-group select{

padding:16px 18px;

font-size:15px;

border-radius:14px;

}

.form-group textarea{

min-height:150px;

}

.career-btn{

height:56px;

font-size:16px;

}

}

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

@media(max-width:480px){

.career-form-section{

padding:70px 0;

}

.section-badge{

font-size:11px;

padding:8px 16px;

}

.career-content h2{

font-size:28px;

}

.career-content p{

font-size:15px;

}

.benefit{

font-size:14px;

padding:14px 16px;

}

.career-form-box{

padding:22px 18px;

}

.career-form-box h3{

font-size:26px;

}

.form-group input,

.form-group select,

.form-group textarea{

font-size:14px;

padding:14px 16px;

}

.form-group input[type=file]{

padding:12px;

}

.form-group input[type=file]::file-selector-button{

padding:10px 14px;

font-size:13px;

}

.career-btn{

height:52px;

font-size:15px;

}

}

/*==================================================
ACCESSIBILITY
==================================================*/

.form-group input:focus-visible,

.form-group textarea:focus-visible,

.form-group select:focus-visible,

.career-btn:focus-visible{

outline:2px solid #FFF;

outline-offset:3px;

}

/*==================================================
SMOOTH TRANSITIONS
==================================================*/

.form-group input,

.form-group textarea,

.form-group select,

.career-btn,

.benefit,

.career-form-box{

transition:all .3s ease;

}

/*==================================================
FINAL POLISH
==================================================*/

.career-form-section{

overflow:hidden;

}

.career-form-box,

.benefit{

will-change:transform;

}

.form-group input,

.form-group textarea,

.form-group select{

box-sizing:border-box;

}

.form-group input[type=file]{

overflow:hidden;

}

.form-group textarea{

max-width:100%;

}

.career-btn{

display:flex;

align-items:center;

justify-content:center;

}

.career-form-box *{

position:relative;

z-index:2;

}
.career-success{

    background:#0f5132;

    color:#fff;

    padding:15px 20px;

    border-radius:8px;

    margin-bottom:20px;

    font-weight:600;

    transition:all .5s ease;

}

.contact-success{

    background:#0f5132;

    color:#fff;

    padding:15px 20px;

    border-radius:8px;

    margin-bottom:20px;

    font-weight:600;

}