/* ================= ROOT THEME ================= */
:root{
--text:#1e293b;
--muted:#64748b;
--bg:#f8fafc;
}

/* ================= HERO ================= */
.hero{
background:#eef3f9;
padding:80px 20px;
}

.hero-container{
max-width:1140px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
}

.hero-left{flex:1;}

.small-text{
color:var(--muted);
margin-bottom:10px;
}

.hero-left h1{
font-size:48px;
color:var(--text);
line-height:1.3;
}

.hero-left span{
color:var(--primary);
}

.desc{
margin:20px 0;
color:var(--muted);
}

.search-box{
display:flex;
background:#fff;
border-radius:10px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.input-group{
display:flex;
align-items:center;
gap:8px;
padding:12px 15px;
border-right:1px solid #eee;
flex:1;
}

.input-group i{
color:var(--primary);
}

.input-group input,
.input-group select{
border:none;
outline:none;
width:100%;
}

.search-btn{
background:var(--primary);
color:#fff;
border:none;
padding:14px 25px;
cursor:pointer;
}

.hero-right{
flex:1;
text-align:right;
}

.hero-right img{
max-width:80%;
}

/* ================= CATEGORIES ================= */
.categories{
padding:80px 20px;
text-align:center;
}

.cat-title{
font-size:32px;
color:var(--text);
}

.cat-sub{
color:var(--muted);
margin-bottom:40px;
}

.cat-grid{
max-width:1140px;
margin:auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.cat-card{
background:#f1f5f9;
padding:25px;
border-radius:14px;
cursor:pointer;
transition:.3s;
}

.cat-card:hover{
transform:translateY(-5px);
background:#fff;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.icon{
width:60px;
height:60px;
margin:auto;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
margin-bottom:15px;
background:color-mix(in srgb, var(--primary) 15%, white);
}

.icon i{
color:var(--primary);
font-size:26px;
}

.icon img{
height:28px;
}

.cat-card h4{
color:var(--text);
margin-bottom:5px;
}

.cat-card p{
color:var(--muted);
}

.cat-btn{
margin-top:30px;
}

.cat-btn a{
background:var(--primary);
color:#fff;
padding:10px 20px;
border-radius:8px;
text-decoration:none;
}

/* ================= JOB SECTION ================= */
.job-section{
background:var(--bg);
padding:80px 20px;
}

.container{
max-width:1140px;
margin:auto;
}

.job-title{
text-align:center;
font-size:32px;
color:var(--text);
}

.job-sub{
text-align:center;
color:var(--muted);
margin-bottom:30px;
}

/* ================= TABS ================= */
.tabs{
display:flex;
justify-content:center;
gap:10px;
flex-wrap:wrap;
margin-bottom:30px;
}

.tab{
padding:10px 20px;
border:none;
border-radius:8px;
background:#e2e8f0;
cursor:pointer;
font-weight:500;
}

.tab.active{
background:var(--primary);
color:#fff;
}

/* ================= JOB CARD ================= */
.jobcy-card{
background:#fff;
border-radius:12px;
padding:20px;
margin-bottom:20px;
position:relative;
transition:.3s;
}

.jobcy-card:hover{
border:1px solid var(--primary);
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/* RIBBON */
.ribbon{
border-radius: 6px;
position:absolute;
top:0;
left:0;
width:60px;
height:60px;
background:var(--primary);
clip-path:polygon(0 0,100% 0,0 100%);
}

/* TOP */
.jobcy-top{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
}

.jobcy-left{
display:flex;
align-items:center;
gap:15px;
}

.jobcy-logo{
width:60px;
height:60px;
background:color-mix(in srgb, var(--primary) 10%, white);
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
}

.jobcy-logo img{
max-width:40px;
}

.jobcy-left h4{
margin:0;
font-size:18px;
color:var(--text);
}

.jobcy-left p{
margin:0;
color:var(--muted);
font-size:14px;
}

.jobcy-right{
text-align:right;
}

.salary{
color:var(--primary);
font-weight:600;
margin-bottom:5px;
}

/* BADGES */
.badges{
display:flex;
gap:6px;
justify-content:flex-end;
flex-wrap:wrap;
}

.badge{
padding:4px 8px;
border-radius:6px;
font-size:12px;
}

.green{
background:color-mix(in srgb, #16a34a 20%, white);
color:#16a34a;
}

.red{
background:color-mix(in srgb, #dc2626 20%, white);
color:#dc2626;
}

.purple{
background:color-mix(in srgb, var(--primary) 20%, white);
color:var(--primary);
}

/* BOTTOM */
.jobcy-bottom{
margin-top:15px;
padding-top:10px;
border-top:1px solid #eee;
display:flex;
justify-content:space-between;
align-items:center;
}

.jobcy-bottom span{
color:var(--muted);
font-size:14px;
}

.jobcy-bottom a{
color:var(--primary);
text-decoration:none;
font-weight:500;
}

/* ================= RESPONSIVE ================= */

/* TABLET */
@media(max-width:900px){

.hero-container{
flex-direction:column;
text-align:center;
}

.hero-right img{
max-width:100%;
}

.search-box{
flex-direction:column;
}

.input-group{
border-right:none;
border-bottom:1px solid #eee;
}

.search-btn{
width:100%;
}

.cat-grid{
grid-template-columns:repeat(2,1fr);
}

.jobcy-top{
flex-direction:column;
align-items:flex-start;
}

.jobcy-right{
text-align:left;
width:100%;
}

.badges{
justify-content:flex-start;
}

}

/* MOBILE */
@media(max-width:600px){

.hero-left h1{
font-size:26px;
}

.cat-grid{
grid-template-columns:1fr 1fr;
gap:15px;
}

.cat-card{
padding:15px;
}

.jobcy-card{
padding:15px;
}

.jobcy-logo{
width:50px;
height:50px;
}

.jobcy-bottom{
flex-direction:column;
align-items:flex-start;
gap:10px;
}

.tabs{
gap:6px;
}

.tab{
padding:8px 12px;
font-size:13px;
}

}
.view-all-wrapper{
text-align:center;
margin-top:40px;
}

.view-all-btn{
display:inline-block;
padding:14px 32px;
font-size:16px;
font-weight:600;
border-radius:10px;
text-decoration:none;
background:var(--primary);
color:#fff;
transition:all .3s ease;
}

/* Hover effect */
.view-all-btn:hover{
background:color-mix(in srgb, var(--primary) 80%, black);
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(0,0,0,0.12);
}
/* ================= HOW IT WORK ================= */

.how-it-works{
padding:80px 20px;
background:#fff;
}

.how-container{
max-width:1140px;
margin:auto;
display:flex;
align-items:center;
gap:70px;
}

/* LEFT */

.how-left{
flex:1;
padding-right:40px;
}

.how-left h2{
font-size:34px;
color:var(--text);
margin-bottom:10px;
}

.how-desc{
color:var(--muted);
margin-bottom:35px;
max-width:450px;
}

/* TIMELINE */

.steps{
position:relative;
padding-left:45px;
}

.steps::before{
content:"";
position:absolute;
left:18px;
top:8px;
bottom:8px;
width:2px;
border-left:2px dashed #d1d5db;
}

/* STEP ITEM */

.step{
display:flex;
align-items:flex-start;
gap:16px;
margin-bottom:50px;
position:relative;
}

.step span{
width:36px;
height:36px;
border-radius:50%;
background:#e5e7eb;
display:flex;
align-items:center;
justify-content:center;
font-weight:600;
font-size:14px;
position:absolute;
left:-45px;
top:0;
z-index:2;
}

.step.active span{
background:var(--primary);
color:#fff;
}

.step.active h4{
color:var(--primary);
}

.step h4{
margin:0;
font-size:18px;
color:var(--text);
}

.step p{
margin-top:4px;
font-size:14px;
color:var(--muted);
max-width:420px;
}

/* RIGHT IMAGE */

.how-right{
flex:1;
text-align:center;
}

.how-right img{
max-width:100%;
height:auto;
}

/* RESPONSIVE */

@media(max-width:900px){

.how-container{
flex-direction:column;
text-align:center;
}

.steps{
padding-left:0;
}

.steps::before{
display:none;
}

.step span{
position:static;
margin-bottom:5px;
}

}
/* ================= TESTIMONIAL ================= */

.testimonial-section{
padding:80px 20px;
background:#f8fafc;
overflow:hidden;
}

.testi-title{
text-align:center;
font-size:32px;
color:var(--text);
}

.testi-sub{
text-align:center;
color:var(--muted);
margin-bottom:50px;
}

/* SLIDER */

.testimonial-slider{
width:100%;
overflow:hidden;
position:relative;
}

.testimonial-track{
display:flex;
gap:30px;
will-change:transform;
}

/* CARD */

/* TESTIMONIAL CARD GLASS STYLE */

.testimonial-card{
flex:0 0 350px;
padding:35px 30px;
border-radius:18px;

/* glass effect */
background:rgba(255,255,255,0.35);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);

/* border */
border:1px solid color-mix(in srgb, var(--primary) 35%, white);

/* shadow */
box-shadow:
0 10px 25px rgba(0,0,0,0.08),
0 2px 6px rgba(0,0,0,0.04);

text-align:center;
transition:all .35s ease;
position:relative;
overflow:hidden;
}

.testimonial-card:hover{

transform:translateY(-6px) scale(1.02);

border-color:var(--primary);

box-shadow:
0 20px 45px rgba(0,0,0,0.15),
0 8px 20px rgba(0,0,0,0.08);

}

.testi-img img{
width:70px;
height:70px;
border-radius:50%;
object-fit:cover;
margin-bottom:15px;
}

.testi-text{
color:var(--muted);
font-size:14px;
line-height:1.6;
margin-bottom:15px;
}

.testimonial-card h4{
margin:0;
font-size:18px;
color:var(--text);
}

.testimonial-card span{
color:var(--primary);
font-size:13px;
}

.testimonial-card::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
padding:1px;
background:linear-gradient(
120deg,
transparent,
var(--primary),
transparent
);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask-composite:exclude;
opacity:.3;
pointer-events:none;
}
.testi-img img{
width:70px;
height:70px;
border-radius:50%;
object-fit:cover;

border:3px solid color-mix(in srgb, var(--primary) 25%, white);

box-shadow:0 5px 15px rgba(0,0,0,0.15);

margin-bottom:18px;
}
.testimonial-section{

padding:80px 20px;

background:
linear-gradient(
180deg,
#f8fafc 0%,
#eef3ff 100%
);

overflow:hidden;
}

/* MOBILE */

@media(max-width:768px){

.testimonial-card{
flex:0 0 280px;
padding:20px;
}

}
/* ================= BLOG SECTION ================= */

.blog-section{
padding:80px 20px;
background:#f8fafc;
}

.blog-title{
text-align:center;
font-size:32px;
color:var(--text);
margin-bottom:10px;
}

.blog-sub{
text-align:center;
color:var(--muted);
max-width:650px;
margin:auto;
margin-bottom:50px;
}

/* GRID */

.blog-grid{
max-width:1140px;
margin:auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

/* CARD */

.blog-card{
background:#fff;
border-radius:14px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
transition:.3s;
}

.blog-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 40px rgba(0,0,0,0.12);
}

/* IMAGE */

.blog-img{
height:220px;
overflow:hidden;
}

.blog-img img{
width:100%;
height:100%;
object-fit:cover;
transition:.4s;
}

.blog-card:hover img{
transform:scale(1.08);
}

/* CONTENT */

.blog-content{
padding:25px;
}

.blog-content h3{
font-size:18px;
color:var(--text);
margin-bottom:10px;
}

.blog-content p{
font-size:14px;
color:var(--muted);
margin-bottom:15px;
}

/* READ MORE */

.read-btn{
text-decoration:none;
color:var(--primary);
font-weight:500;
}

/* RESPONSIVE */

@media(max-width:900px){

.blog-grid{
grid-template-columns:1fr 1fr;
}

}

@media(max-width:600px){

.blog-grid{
grid-template-columns:1fr;
}

}
/* BLOG VIEW MORE BUTTON */

.blog-view-more{
text-align:center;
margin-top:40px;
}

.blog-more-btn{
padding:14px 30px;
background:var(--primary);
color:#fff;
border-radius:10px;
text-decoration:none;
font-weight:600;
transition:.3s;
}

.blog-more-btn:hover{
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(0,0,0,0.12);
}

/* BLOG MODAL */

.blog-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:none;
align-items:center;
justify-content:center;
z-index:999;
}

.blog-modal-box{
background:#fff;
max-width:700px;
width:90%;
padding:30px;
border-radius:14px;
position:relative;
animation:popup .3s ease;
}

@keyframes popup{
from{
transform:scale(.8);
opacity:0;
}
to{
transform:scale(1);
opacity:1;
}
}

.blog-close{
position:absolute;
top:15px;
right:20px;
font-size:24px;
cursor:pointer;
}

.blog-modal-box img{
width:100%;
border-radius:10px;
margin-bottom:20px;
}

.blog-modal-box h3{
margin-bottom:10px;
color:var(--text);
}

.blog-modal-box p{
color:var(--muted);
line-height:1.6;
}
/* APPLY MODAL */

.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.6);
display:none;
align-items:center;
justify-content:center;
padding:20px;
z-index:999;
}

.modal-box{
background:#fff;
width:100%;
max-width:520px;
border-radius:12px;
padding:35px;
position:relative;
box-shadow:0 25px 60px rgba(0,0,0,0.15);
}

.modal-close{
position:absolute;
top:15px;
right:18px;
font-size:22px;
cursor:pointer;
color:#888;
}

.modal-box input,
.modal-box textarea{
width:100%;
padding:12px 14px;
border:1px solid #e2e8f0;
border-radius:8px;
margin-bottom:14px;
}

.modal-box textarea{
height:90px;
resize:none;
}

.modal-box button{
width:100%;
padding:14px;
border:none;
border-radius:8px;
background:linear-gradient(135deg,var(--primary),#7c6dfa);
color:#fff;
font-weight:600;
cursor:pointer;
}

.resume-label{
font-size:14px;
font-weight:500;
margin-bottom:6px;
display:block;
}

/* STEP FORM STYLE */
//* ===== STEP FORM CARD ===== */

#step2Box,
#step3Box{
background:#ffffff;
padding:45px;
border-radius:16px;
box-shadow:0 25px 60px rgba(0,0,0,0.08);

width:100%;
max-width:650px;

margin-left:auto;

}

/* GRID */

.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:22px;
margin-bottom:30px;
}

/* INPUT */

.form-col{
display:flex;
flex-direction:column;
gap:18px;
}

.form-col input{
width:100%;
padding:14px 16px;
border:1px solid #e5e7eb;
border-radius:10px;
font-size:15px;
background:#fafafa;
outline:none;
transition:.25s;
}

/* focus */

.form-col input:focus{
background:#fff;
border-color:var(--primary);
box-shadow:0 0 0 3px rgba(255,90,95,0.15);
}

/* BUTTON */

.next-btn{
background:var(--primary);
color:#fff;
border:none;
padding:13px 22px;
border-radius:8px;
cursor:pointer;
font-weight:600;
float:right;
transition:.3s;
}

.next-btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}
.how-container{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:80px;
}

.how-right{
flex:1;
display:flex;
justify-content:flex-end;
}
@media(max-width:900px){

.how-container{
flex-direction:column;
gap:0px;
}

#step2Box,
#step3Box{
max-width:100%;
padding:30px;
}

.form-grid{
grid-template-columns:1fr;
}

.next-btn{
width:100%;
}

}
/* ===== STEP 3 LAYOUT ===== */

.step3-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:22px;
margin-bottom:25px;
}

.step3-col input{
width:100%;
padding:14px 16px;
border:1px solid #e5e7eb;
border-radius:10px;
font-size:15px;
background:#fafafa;
outline:none;
transition:.25s;
}

.step3-col input:focus{
background:#fff;
border-color:var(--primary);
box-shadow:0 0 0 3px rgba(255,90,95,0.15);
}

/* resume section */

.resume-area{
grid-column:1/3;
margin-bottom:20px;
text-align:left;
}

.resume-area input{
width:100%;
padding:12px;
border:1px solid #e5e7eb;
border-radius:8px;
background:#fafafa;
}

/* textarea */

#step3Box textarea{
width:100%;
padding:14px;
border:1px solid #e5e7eb;
border-radius:10px;
margin-bottom:20px;
resize:none;
}

/* submit button */

.submit-btn{
width:100%;
padding:14px;
background:var(--primary);
border:none;
border-radius:10px;
color:#fff;
font-weight:600;
cursor:pointer;
transition:.3s;
}

.submit-btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}