.apply-hero{

height:340px;

background:url('/img/careers-banner.jpg');

background-size:cover;

background-position:center;

position:relative;

display:flex;

align-items:center;

}

.hero-overlay{

position:absolute;

inset:0;

background:rgba(0,0,0,.55);

}

.hero-content{

position:relative;

z-index:2;

color:white;

max-width:700px;

}

.hero-tag{

letter-spacing:3px;

font-size:13px;

font-weight:600;

opacity:.8;

}

.hero-content h1{

font-size:52px;

font-weight:800;

margin-top:15px;

margin-bottom:15px;

}

.hero-content p{

font-size:17px;

line-height:1.8;

max-width:600px;

}



.apply-page{

margin-top:-80px;

padding-bottom:100px;

position:relative;

z-index:5;

}

.apply-card{

background:white;

padding:60px;

border-radius:24px;

box-shadow:

0 10px 40px rgba(0,0,0,.08);

max-width:900px;

margin:auto;

}



.card-header{

margin-bottom:40px;

}

.card-header h2{

font-size:34px;

font-weight:700;

}

.card-header p{

color:#777;

}



.form-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:25px;

}



.form-group{

margin-bottom:25px;

}



.form-group label{

display:block;

margin-bottom:10px;

font-weight:600;

font-size:14px;

}



.form-group input,

.form-group select{

width:100%;

padding:16px;

border-radius:12px;

border:1px solid #ddd;

font-size:15px;

font-family:Montserrat;

transition:.3s;

}



.form-group input:focus,

.form-group select:focus{

outline:none;

border-color:black;

}



.upload-box{

border:2px dashed #d4d4d4;

padding:40px;

text-align:center;

border-radius:16px;

position:relative;

cursor:pointer;

transition:.3s;

}



.upload-box:hover{

border-color:#111;

background:#fafafa;

}



.upload-box input{

position:absolute;

inset:0;

opacity:0;

cursor:pointer;

}



.upload-box p{

font-weight:600;

margin-bottom:6px;

}



.upload-box span{

font-size:13px;

color:#777;

}



.submit-btn{

width:100%;

padding:18px;

border:none;

border-radius:14px;

background:#111;

color:white;

font-size:16px;

font-weight:600;

cursor:pointer;

transition:.3s;

}



.submit-btn:hover{

transform:translateY(-2px);

background:black;

}



@media(max-width:768px){

.form-row{

grid-template-columns:1fr;

}

.apply-card{

padding:35px;

}

.hero-content h1{

font-size:36px;

}

}

.upload-box{

position:relative;

padding:40px;

border:2px dashed #d8d8d8;

border-radius:16px;

background:#fafafa;

text-align:center;

transition:.3s;

cursor:pointer;

}

.upload-box:hover{

border-color:#111;

background:#fff;

}

.upload-box input{

position:absolute;

inset:0;

opacity:0;

cursor:pointer;

width:100%;

height:100%;

}

.resume-info{

margin-top:14px;

font-size:14px;

font-weight:500;

color:#444;

}

.upload-progress{

width:100%;

height:6px;

background:#ececec;

border-radius:20px;

overflow:hidden;

margin-top:15px;

display:none;

}

#progressBar{

width:0;

height:100%;

background:#111;

transition:.25s;

}

.upload-box.dragover{

border-color:#111;

background:#f5f5f5;

}