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


/* HERO SECTION */

.careers-hero{

height:45vh;
min-height:360px;

background-image:url("../assets/img/about/2.jpg");
background-size:cover;
background-position:center;
background-repeat:no-repeat;

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

position:relative;


}


.hero-overlay{

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.45);

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

text-align:center;
color:#fff;

}


.hero-overlay h1{

font-size:48px;
font-weight:600;
margin-bottom:10px;

}


.hero-overlay p{

font-size:20px;
opacity:.9;

}



/* INTRO SECTION */

.careers-intro{

padding:80px 0;
text-align:center;

}


.careers-intro h2{

font-size:34px;
margin-bottom:20px;
color:#3f4a52;

}


.careers-intro p{

max-width:750px;
margin:auto;

font-size:17px;
line-height:1.7;

color:#5a646c;

}



/* JOB SECTION */

.careers-jobs{

padding:90px 0;
background:#f7f8f9;

}


.section-title{

text-align:center;
font-size:34px;
margin-bottom:60px;
color:#3f4a52;

}



/* JOB GRID */

.job-list{

display:grid;

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

gap:35px;

max-width:1100px;
margin:auto;

}



/* JOB CARD */

.job-card{

background:#fff;

padding:35px;

border-radius:12px;

box-shadow:
0 5px 18px rgba(0,0,0,0.08);

transition:all .3s ease;

display:flex;
flex-direction:column;

}


.job-card:hover{

transform:translateY(-6px);

box-shadow:
0 15px 35px rgba(0,0,0,0.12);

}



/* JOB TITLE */

.job-card h3{

font-size:22px;
margin-bottom:15px;
color:#2c2f33;

}



/* META INFO */

.job-meta{

display:flex;
flex-wrap:wrap;

gap:15px;

margin-bottom:18px;

font-size:14px;
color:#6a747c;

}


.job-meta i{

margin-right:6px;
color:#7a848c;

}



/* JOB DESCRIPTION */

.job-card p{

font-size:15px;
line-height:1.6;
color:#59646d;

margin-bottom:25px;

}



/* APPLY BUTTON */

.apply-btn{

display:inline-block;

padding:10px 22px;

background:#2f3a43;
color:#fff;

text-decoration:none;

border-radius:30px;

font-size:14px;

transition:all .3s ease;

align-self:flex-start;

}


.apply-btn:hover{

background:#000;

}



/* RESPONSIVE */

@media(max-width:900px){

.job-list{

grid-template-columns:1fr;

}

}


@media(max-width:600px){

.hero-overlay h1{

font-size:36px;

}

.hero-overlay p{

font-size:17px;

}

}