/* =========================================================
   AVM NETWORKS LIMITED — CAREER PAGE
   Unified Glassmorphism (About Page Reflection Style)
   Based on career.php + career.js
   No global background modification
========================================================= */

/* container */
.career-container{
    max-width:1100px;
    margin:auto;
    padding:0 22px;
}

/* every section spacing */
section{
    padding:80px 0;
}

/* =================================================
   UNIVERSAL GLASS CARD (ABOUT PAGE STYLE)
================================================= */

.career-hero .career-container,
.career-jobs .career-container,
.career-apply .career-container,
.about-cta .career-container{
    position:relative;
    padding:38px;
    border-radius:18px;

    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    box-shadow:0 18px 55px rgba(0,0,0,.35);
    overflow:hidden;
}

/* reflection shine */
.career-hero .career-container::after,
.career-jobs .career-container::after,
.career-apply .career-container::after{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:120%;
    height:100%;
    background:linear-gradient(115deg, transparent, rgba(255,255,255,.22), transparent);
    transition:1.2s;
}

.career-hero .career-container:hover::after,
.career-jobs .career-container:hover::after,
.career-apply .career-container:hover::after{
    left:120%;
}

/* =================================================
   HERO
================================================= */

.career-hero{
    text-align:center;
    padding-top:90px;
}

.career-hero h1{
    font-size:38px;
    color:#fff;
    margin-bottom:12px;
}

.career-hero p{
    color:#cfe6ff;
    font-size:17px;
}

/* =================================================
   HEADINGS
================================================= */

.center-title{
    text-align:center;
    color:#eaf4ff;
    font-size:28px;
    margin-bottom:45px;
    position:relative;
}

/* advanced underline */
.center-title::after{
    content:"";
    display:block;
    margin:14px auto 0;
    width:120px;
    height:3px;
    background:linear-gradient(90deg,transparent,#39d1ff,transparent);
}

/* =================================================
   JOB CARDS GRID
================================================= */

.jobs-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
}

.job-card{
    padding:24px;
    border-radius:16px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(7px);
    transition:.25s;
    text-align:center;
    position:relative;
    overflow:hidden;
}

/* shine */
.job-card::after{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:120%;
    height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,.18), transparent);
    transition:1.1s;
}

.job-card:hover::after{
    left:120%;
}

.job-card:hover{
    transform:translateY(-7px);
    border-color:#39d1ff;
    box-shadow:0 18px 45px rgba(57,209,255,.20);
}

.job-card h3{
    color:#fff;
    margin-bottom:12px;
}

.job-card p{
    color:#cfe6ff;
    font-size:14.5px;
    line-height:1.6;
}

/* link */
.viewJob{
    display:inline-block;
    margin-top:16px;
    color:#39d1ff;
    font-weight:600;
    text-decoration:none;
}

/* =================================================
   MODAL (CENTER FIX)
================================================= */

.job-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    z-index:9999;
    align-items:center;
    justify-content:center;
}

.job-modal-content{
    width:520px;
    max-width:92%;
    padding:34px;
    border-radius:18px;

    background:rgba(25,35,55,.92);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(12px);

    color:#eaf4ff;
    text-align:center;
}

#modalBody{
    margin-top:16px;
    line-height:1.8;
    text-align:center;   /* FIXED LEFT SHIFT ISSUE */
}

.close-modal{
    position:absolute;
    right:18px;
    top:12px;
    font-size:24px;
    cursor:pointer;
}

/* =================================================
   APPLY FORM
================================================= */

.career-apply form{
    max-width:640px;
    margin:auto;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.career-apply input,
.career-apply textarea,
.career-apply select{
    padding:13px 14px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.25);
    background:rgba(255,255,255,.06);
    color:#fff;
    outline:none;
}

/* dropdown text color fix */
.career-apply select{
    color:#000;
    background:#fff;
}

.career-apply textarea{
    min-height:120px;
    resize:vertical;
}

.upload-label{
    color:#d7ecff;
    font-size:14px;
}

/* submit button */

#submitBtn{
    background:#19bfff;
    color:#002033;
    border:none;
    padding:14px;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
    transition:.25s;
}

#submitBtn:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(57,209,255,.35);
}

/* =================================================
   SUCCESS POPUP
================================================= */

#successPopup{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    z-index:10000;
    align-items:center;
    justify-content:center;
}

.success-popup-box{
    width:420px;
    max-width:90%;
    padding:34px;
    border-radius:18px;
    background:rgba(25,40,65,.92);
    backdrop-filter:blur(12px);
    text-align:center;
    color:#fff;
}

.success-icon{
    font-size:50px;
    color:#39d1ff;
    margin-bottom:10px;
}

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

@media(max-width:900px){
.jobs-grid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:600px){
.jobs-grid{grid-template-columns:1fr;}
.career-hero h1{font-size:28px;}
section{padding:60px 0;}
}