/* ==========================================
   COMMON
========================================== */

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
    padding:70px 0;
}

/* Default Text Color */

.career-page{
    color:#1d2939;
}

.career-page h1,
.career-page h2,
.career-page h3,
.career-page h4{
    color:#0b2d5a;
    font-weight:700;
}

.career-page p,
.career-page li,
.career-page span{
    color:#4b5563;
    line-height:1.8;
}


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

.career-hero{

    height:420px;

    background:
    linear-gradient(rgba(5,20,45,.78),
    rgba(5,20,45,.78)),
    url("/static/images/career-banner.jpg");

    background-size:cover;
    background-position:center;

    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.career-overlay{
    color:#fff;
}

.career-overlay h1{
    color:#fff;
    font-size:56px;
    margin-bottom:20px;
}

.career-overlay p{
    color:#e8edf7;
    font-size:22px;
    max-width:760px;
    margin:auto;
}


/* ==========================================
   INTRO
========================================== */

.career-intro{
    text-align:center;
}

.career-intro h2{
    font-size:40px;
    margin-bottom:20px;
}

.career-intro p{
    max-width:900px;
    margin:auto;
}


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

.career-benefits{
    margin-top:30px;
}

.career-benefits h2{
    text-align:center;
    margin-bottom:40px;
}

.benefit-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;

}

.benefit-card{

    background:#fff;

    border-radius:15px;

    padding:35px;

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.benefit-card:hover{

    transform:translateY(-8px);

}

.benefit-card h3{

    color:#0b2d5a;

    margin:20px 0 15px;

}

.benefit-card p{

    color:#5b6472;

}


/* ==========================================
   OPEN POSITIONS
========================================== */

.career-openings{
    margin-top:40px;
}

.career-openings h2{
    text-align:center;
    margin-bottom:40px;
}

.job-card{

    background:#fff;

    border-left:5px solid #1b63c6;

    border-radius:15px;

    padding:30px;

    margin-bottom:30px;

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

}

.job-card h3{

    color:#0b2d5a;

    margin-bottom:15px;

}

.job-card p{

    color:#5b6472;

    margin:8px 0;

}

.job-card strong{

    color:#1b63c6;

}

.job-card button{

    margin-top:20px;

    background:#1b63c6;

    color:#fff;

    border:none;

    padding:12px 28px;

    border-radius:8px;

    cursor:pointer;

    transition:.3s;

}

.job-card button:hover{

    background:#174d97;

}


/* ==========================================
   HIRING PROCESS
========================================== */

.career-process{
    margin-top:40px;
}

.career-process h2{
    text-align:center;
    margin-bottom:40px;
}

.process-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:25px;

}

.process-grid div{

    background:#fff;

    padding:30px;

    border-radius:15px;

    text-align:center;

    box-shadow:0 8px 25px rgba(0,0,0,.08);
    color:#000000;


}

.process-grid span{

    display:flex;

    justify-content:center;

    align-items:center;

    width:60px;

    height:60px;

    margin:0 auto 20px;

    border-radius:50%;

    background:#1b63c6;

    color:#fff;

    font-size:24px;

    font-weight:bold;

}

.process-grid h3{
    color:#0b2d5a;
}

.process-grid p{
    color:#5b6472;
}


/* ==========================================
   CONTACT CTA
========================================== */

.career-contact{

    text-align:center;

    background:#eef5ff;

    border-radius:20px;

    padding:80px 30px;

    margin:70px auto;

}

.career-contact h2{

    color:#0b2d5a;

    margin-bottom:20px;

}

.career-contact p{

    color:#4b5563;

    margin-bottom:35px;

}

.career-btn{

    display:inline-block;

    background:#1b63c6;

    color:#fff;

    text-decoration:none;

    padding:15px 35px;

    border-radius:10px;

    font-weight:600;

    transition:.3s;

}

.career-btn:hover{

    background:#164f9d;

}


/* ==========================================
   Responsive
========================================== */

@media(max-width:768px){

    .career-overlay h1{
        font-size:40px;
    }

    .career-overlay p{
        font-size:18px;
    }

    .career-intro h2{
        font-size:30px;
    }

    .career-benefits h2,
    .career-openings h2,
    .career-process h2,
    .career-contact h2{
        font-size:30px;
    }

}